/* card-styles.css — VIP profile-card styling.
 *
 * Colours are now free (a wheel), applied as three inline custom properties on the card
 * element by card-styles.js/applyCardStyle: --accent, --card-bg, --card-surface. Every
 * other surface tone is DERIVED from those here, so all three drive the whole card and
 * nothing is left neutral. Values are validated to #rrggbb + clamped dark server-side,
 * so nothing a player types reaches the page as anything but a colour. Frame/effect are
 * still validated preset IDs → the class names below.
 */

/* ── Derived surface tokens ───────────────────────
 * The accent's soft/line/glow come from --accent; the header + borders come from the
 * body + box colours. color-mix means ANY picked hex themes the whole card. Fallbacks
 * cover the default (non-customised) card, where the inline vars aren't set.
 */
.popup-box, .profile-card, .cs-profile-preview-card, .cs-picker {
  --accent-soft: color-mix(in srgb, var(--accent) 9%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 22%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 35%, transparent);
  /* Header shares the box tone (as the original --bg-3 header did), and the box border
     is the box colour with a subtle accent tint — this matches the original cool-blue
     default; a white-grey lighten washed both out. */
  --card-head:   var(--card-surface, var(--bg-3));
  --card-border: color-mix(in srgb, var(--card-surface, var(--bg-3)), var(--accent) 8%);
}
/* Swatch chips in the picker fill with their own colour (set inline by the picker). */
.cs-chip--bg { background: var(--card-bg, var(--bg-2)); }

/* Optional drop shadow on the card's boxes (the "Box shadow" toggle; off by default),
   so they lift off the card fill. Applied via the cs-shadow class on the card element. */
.cs-shadow .result-stat,
.cs-shadow .rank-badge,
.cs-shadow .achievement-card { box-shadow: 0 3px 9px -3px rgba(0,0,0,.5); }

/* ── Frames ───────────────────────────────────── */
.cs-frame-glow     { box-shadow: 0 0 0 1px var(--accent-line), 0 0 26px -6px var(--accent-glow); }
/* Fade to the normal border tone (not transparent) so the gradient frame stays a
   complete outline instead of vanishing halfway — mirrors the SVG stats card. */
.cs-frame-gradient { border-image: linear-gradient(140deg, var(--accent), var(--border-2) 65%) 1; border-width: 1px; border-style: solid; }
.cs-frame-corners  { clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.cs-frame-outline  { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-soft); }
.cs-frame-beam     { box-shadow: inset 0 3px 0 0 var(--accent); }
/* A thick accent bar down the left edge (side counterpart to Top beam). */
.cs-frame-edge     { box-shadow: inset 4px 0 0 0 var(--accent); }
/* Accent rails along the top AND bottom edges. */
.cs-frame-rails    { box-shadow: inset 0 3px 0 0 var(--accent), inset 0 -3px 0 0 var(--accent); }
/* Accent outline with a gap, then a faint inner line — a crisp "framed" look. */
.cs-frame-double   { border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--card-bg, var(--bg-2)), inset 0 0 0 4px var(--accent-soft); }
/* Dashed accent border. */
.cs-frame-dashed   { border-style: dashed; border-color: var(--accent-line); }
/* Soft accent glow bleeding in from the card's own edges. */
.cs-frame-inset    { box-shadow: inset 0 0 0 1px var(--accent-line), inset 0 0 28px -12px var(--accent); }
/* Accent corner brackets — 8 bars (h+v per corner) drawn over the fill. Uses
   background-image, so any element it applies to must set background-COLOR (not the
   `background` shorthand) or the shorthand wipes these layers (see .cs-chip below). */
.cs-frame-brackets {
  --bk: var(--accent);
  background-image:
    linear-gradient(var(--bk),var(--bk)), linear-gradient(var(--bk),var(--bk)),
    linear-gradient(var(--bk),var(--bk)), linear-gradient(var(--bk),var(--bk)),
    linear-gradient(var(--bk),var(--bk)), linear-gradient(var(--bk),var(--bk)),
    linear-gradient(var(--bk),var(--bk)), linear-gradient(var(--bk),var(--bk));
  background-repeat: no-repeat;
  background-size: 24px 3px, 3px 24px, 24px 3px, 3px 24px, 24px 3px, 3px 24px, 24px 3px, 3px 24px;
  background-position:
    left 10px top 10px,     left 10px top 10px,
    right 10px top 10px,    right 10px top 10px,
    left 10px bottom 10px,  left 10px bottom 10px,
    right 10px bottom 10px, right 10px bottom 10px;
}

/* Frames that paint an accent ON the card SURFACE (beam/edge/rails/inner-glow/double/
   brackets) are covered at the top by the header, which has its own background and negative
   margins that reach the card's top edge. On the real cards we redraw them on a
   pointer-events-none ::after overlay that sits ABOVE the header, so the top of the accent
   shows. (The picker chips keep the bare rules above — they have no header.) */
.profile-card, .cs-profile-preview-card { position: relative; }
.profile-card.cs-frame-beam::after,     .popup-box.cs-frame-beam::after,     .cs-profile-preview-card.cs-frame-beam::after,
.profile-card.cs-frame-edge::after,     .popup-box.cs-frame-edge::after,     .cs-profile-preview-card.cs-frame-edge::after,
.profile-card.cs-frame-rails::after,    .popup-box.cs-frame-rails::after,    .cs-profile-preview-card.cs-frame-rails::after,
.profile-card.cs-frame-inset::after,    .popup-box.cs-frame-inset::after,    .cs-profile-preview-card.cs-frame-inset::after,
.profile-card.cs-frame-double::after,   .popup-box.cs-frame-double::after,   .cs-profile-preview-card.cs-frame-double::after,
.profile-card.cs-frame-brackets::after, .popup-box.cs-frame-brackets::after, .cs-profile-preview-card.cs-frame-brackets::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 2;
}
.profile-card.cs-frame-beam::after,  .popup-box.cs-frame-beam::after,  .cs-profile-preview-card.cs-frame-beam::after  { box-shadow: inset 0 3px 0 0 var(--accent); }
.profile-card.cs-frame-edge::after,  .popup-box.cs-frame-edge::after,  .cs-profile-preview-card.cs-frame-edge::after  { box-shadow: inset 4px 0 0 0 var(--accent); }
.profile-card.cs-frame-rails::after, .popup-box.cs-frame-rails::after, .cs-profile-preview-card.cs-frame-rails::after { box-shadow: inset 0 3px 0 0 var(--accent), inset 0 -3px 0 0 var(--accent); }
.profile-card.cs-frame-inset::after, .popup-box.cs-frame-inset::after, .cs-profile-preview-card.cs-frame-inset::after { box-shadow: inset 0 0 0 1px var(--accent-line), inset 0 0 28px -12px var(--accent); }
.profile-card.cs-frame-double::after,.popup-box.cs-frame-double::after,.cs-profile-preview-card.cs-frame-double::after { box-shadow: inset 0 0 0 1px var(--accent), inset 0 0 0 4px var(--card-bg, var(--bg-2)), inset 0 0 0 5px var(--accent-soft); }
.profile-card.cs-frame-brackets::after, .popup-box.cs-frame-brackets::after, .cs-profile-preview-card.cs-frame-brackets::after {
  --bk: var(--accent);
  background-image:
    linear-gradient(var(--bk),var(--bk)), linear-gradient(var(--bk),var(--bk)),
    linear-gradient(var(--bk),var(--bk)), linear-gradient(var(--bk),var(--bk)),
    linear-gradient(var(--bk),var(--bk)), linear-gradient(var(--bk),var(--bk)),
    linear-gradient(var(--bk),var(--bk)), linear-gradient(var(--bk),var(--bk));
  background-repeat: no-repeat;
  background-size: 24px 3px, 3px 24px, 24px 3px, 3px 24px, 24px 3px, 3px 24px, 24px 3px, 3px 24px;
  background-position:
    left 10px top 10px,     left 10px top 10px,
    right 10px top 10px,    right 10px top 10px,
    left 10px bottom 10px,  left 10px bottom 10px,
    right 10px bottom 10px, right 10px bottom 10px;
}
/* The overlay above is the single source for these frames on the real cards — neutralise
   the bare surface paint (from the shared frame rules) so it isn't drawn twice (which would
   double the inner glow) or left hidden under the header. A popup already trades its drop
   shadow for any active frame's box-shadow, so this changes nothing there. Double keeps its
   accent border (only its box-shadow rings move to the overlay). */
.profile-card.cs-frame-beam,   .popup-box.cs-frame-beam,   .cs-profile-preview-card.cs-frame-beam,
.profile-card.cs-frame-edge,   .popup-box.cs-frame-edge,   .cs-profile-preview-card.cs-frame-edge,
.profile-card.cs-frame-rails,  .popup-box.cs-frame-rails,  .cs-profile-preview-card.cs-frame-rails,
.profile-card.cs-frame-inset,  .popup-box.cs-frame-inset,  .cs-profile-preview-card.cs-frame-inset,
.profile-card.cs-frame-double, .popup-box.cs-frame-double, .cs-profile-preview-card.cs-frame-double {
  box-shadow: none;
}
.profile-card.cs-frame-brackets, .popup-box.cs-frame-brackets, .cs-profile-preview-card.cs-frame-brackets {
  background-image: none;
}

/* ── Effects ──────────────────────────────────── */
/* Scoped to the card header so the animation never runs under the stats text.
 * .cs-fx-preview is the swatch in the picker — listed here so each effect option
 * animates itself, rather than needing a second set of preview-only rules. */
.cs-effect-shimmer .popup-player-header::after,
.cs-effect-shimmer .profile-header::after,
.cs-effect-shimmer .cs-fx-preview::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, var(--accent-soft) 50%, transparent 60%);
  background-size: 300% 100%;
  animation: cs-shimmer 6s linear infinite;
}
@keyframes cs-shimmer { from { background-position: 150% 0; } to { background-position: -150% 0; } }

.cs-effect-pulse .popup-avatar,
.cs-effect-pulse .profile-avatar,
.cs-effect-pulse .cs-fx-preview { animation: cs-pulse 3.2s ease-in-out infinite; }
@keyframes cs-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--bg-2), 0 0 0 4px var(--accent-line); }
  50%      { box-shadow: 0 0 0 3px var(--bg-2), 0 0 0 4px var(--accent), 0 0 16px -2px var(--accent-glow); }
}

.cs-effect-scan .popup-player-header::after,
.cs-effect-scan .profile-header::after,
.cs-effect-scan .cs-fx-preview::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, var(--accent-soft) 3px 4px);
  animation: cs-scan 8s linear infinite;
  opacity: .5;
}
@keyframes cs-scan { from { background-position: 0 0; } to { background-position: 0 40px; } }

/* Aurora — a slow, colourful accent wash drifting across the header. */
.cs-effect-aurora .popup-player-header::after,
.cs-effect-aurora .profile-header::after,
.cs-effect-aurora .cs-fx-preview::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, transparent 8%, var(--accent-soft) 30%, color-mix(in srgb, var(--accent) 26%, transparent) 50%, var(--accent-soft) 70%, transparent 92%);
  background-size: 220% 100%;
  animation: cs-aurora 9s ease-in-out infinite;
}
@keyframes cs-aurora { 0% { background-position: 0 0; } 50% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* Glint — a bright highlight sweeps across the avatar every few seconds. */
.cs-effect-glint .popup-avatar,
.cs-effect-glint .profile-avatar { position: relative; }
.cs-effect-glint .popup-avatar::after,
.cs-effect-glint .profile-avatar::after,
.cs-effect-glint .cs-fx-preview::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 42%, color-mix(in srgb, var(--accent) 55%, #fff) 50%, transparent 58%);
  background-size: 260% 100%;
  animation: cs-glint 4.5s ease-in-out infinite;
}
@keyframes cs-glint { 0%, 12% { background-position: 150% 0; } 55%, 100% { background-position: -150% 0; } }

/* Motion is decoration here — none of it carries meaning, so it all goes. */
@media (prefers-reduced-motion: reduce) {
  .cs-effect-shimmer .popup-player-header::after,
  .cs-effect-shimmer .profile-header::after,
  .cs-effect-shimmer .cs-fx-preview::after,
  .cs-effect-scan .popup-player-header::after,
  .cs-effect-scan .profile-header::after,
  .cs-effect-scan .cs-fx-preview::after { animation: none; }
  .cs-effect-pulse .popup-avatar,
  .cs-effect-pulse .profile-avatar,
  .cs-effect-pulse .cs-fx-preview,
  .cs-effect-aurora .popup-player-header::after,
  .cs-effect-aurora .profile-header::after,
  .cs-effect-aurora .cs-fx-preview::after,
  .cs-effect-glint .popup-avatar::after,
  .cs-effect-glint .profile-avatar::after,
  .cs-effect-glint .cs-fx-preview::after { animation: none; }
}

/* ── Picker (profile page) ────────────────────── */
.cs-picker { display: grid; gap: 20px; }
.cs-group-label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-4); margin-bottom: 10px; }
/* Frame/effect options are tiles: a large live preview on top, label below. A grid so
   the whole set reads as one neat block instead of a wrapping run of pills. */
.cs-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 9px; }

.cs-opt {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  padding: 9px; border-radius: 9px; cursor: pointer; text-align: center;
  background: var(--card-bg, var(--bg-2)); border: 1px solid var(--card-border, var(--border-2)); color: var(--text-2);
  font-family: inherit; font-size: 12px; line-height: 1;
  transition: border-color .15s, color .15s, background .15s, box-shadow .15s;
}
.cs-opt:hover:not(:disabled) { border-color: var(--accent-line); color: var(--text-1); }
.cs-opt[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.cs-opt:disabled { opacity: .45; cursor: not-allowed; }
.cs-opt-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The live preview each option renders itself with — a mini card panel the frame or
   effect is applied to. position/overflow are here because the effect presets hang an
   animated ::after inside it. */
/* background-COLOR (not the shorthand) so a frame's own background-image layers
   (e.g. Brackets) survive on the chip instead of being wiped. */
.cs-chip {
  position: relative; overflow: hidden; flex-shrink: 0;
  width: 100%; height: 42px; border-radius: 6px;
  background-color: var(--card-surface, var(--bg-3)); border: 1px solid var(--border-2);
}
/* Accent swatches read --accent from the cs-accent-* class on their own button. */
.cs-chip--accent { background-color: var(--accent); border-color: transparent; }
.cs-chip--frame  { background-color: var(--card-surface, var(--bg-3)); }
.cs-chip--frame.cs-frame-corners { border-radius: 0; }
/* Brackets sit close to the corners at card scale; tighten them for the small tile. */
.cs-chip--frame.cs-frame-brackets {
  background-size: 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px;
  background-position:
    left 6px top 6px,     left 6px top 6px,
    right 6px top 6px,    right 6px top 6px,
    left 6px bottom 6px,  left 6px bottom 6px,
    right 6px bottom 6px, right 6px bottom 6px;
}
.cs-fx-preview   { background-color: var(--card-surface, var(--bg-3)); }
/* "None"/"Default" options have no preset class, so mark them visually. */
.cs-opt--accent.cs-accent-default .cs-chip--accent { background: var(--accent); }
.cs-opt--frame.cs-frame-none .cs-chip,
.cs-opt--effect.cs-effect-none .cs-chip {
  background: repeating-linear-gradient(45deg, var(--bg-1) 0 5px, var(--bg-3) 5px 10px);
}

/* ── Colour groups (Accent / Background / Boxes) — a wheel + quick-pick swatches ── */
.cs-color-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cs-wheel { position: relative; width: 36px; height: 36px; flex-shrink: 0; cursor: pointer; border-radius: 50%; }
/* A faint spectrum ring hints "pick any colour"; the face shows the current pick. */
.cs-wheel::before {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  background: conic-gradient(from 90deg, #ff5d6e, #f59e2e, #e8c14a, #8ee84a, #2fd8c9, #4da6ff, #b083ff, #e85ad8, #ff5d6e);
  opacity: .9;
}
.cs-wheel input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; padding: 0; margin: 0; }
.cs-wheel-face { position: absolute; inset: 4px; border-radius: 50%; background: var(--bg-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); pointer-events: none; }
.cs-swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.cs-swatch {
  width: 28px; height: 28px; border-radius: 7px; padding: 0; cursor: pointer;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 55%),
    var(--sw);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 1px 3px rgba(0,0,0,.4);
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.cs-swatch:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.4); box-shadow: 0 4px 11px -3px rgba(0,0,0,.6); }
.cs-swatch.is-on { border-color: transparent; box-shadow: 0 0 0 2px var(--card-bg, var(--bg-2)), 0 0 0 3px var(--accent); }

.cs-locked-note {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 8px; margin-bottom: 16px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); font-size: 13px;
}
.cs-locked-note > span { flex: 1 1 220px; }

/* Sits inside the locked note, so it must not stretch on narrow screens. */
.cs-cta {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; font-size: 13px; white-space: nowrap; flex: 0 0 auto;
}
.cs-cta svg { flex-shrink: 0; }
.cs-preview { margin: 0; }

/* ── Expandable widget shell ──────────────────── */
/* Widget + tabs track use the card BODY colour so the option boxes (box colour) sit
   raised on top, mirroring the card's own body/box hierarchy. */
/* Container matches .kf-widget: use the panel background/border directly, NOT the card
   theme vars (--card-bg/--card-border) — those tint the card PREVIEW, not this dropdown
   box, and leaked a darker bg into the Profile + Additional Options widgets. */
.cs-widget { border: 1px solid var(--border-2); border-radius: var(--radius-lg); background: var(--bg-3); overflow: hidden; }
.cs-toggle {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 14px 16px; background: none; border: none; cursor: pointer;
  font-family: inherit; transition: background .15s;
}
.cs-toggle:hover { background: var(--accent-soft); }
.cs-toggle-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cs-toggle-label { font-size: 14px; font-weight: 600; color: var(--text-1); }
.cs-toggle-sub { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-unsaved {
  flex-shrink: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #e8b923; background: rgba(232,185,35,.12); border: 1px solid rgba(232,185,35,.3);
  padding: 2px 8px; border-radius: 20px;
}
.cs-toggle-arrow { flex-shrink: 0; color: var(--text-3); transition: transform .2s; }
.cs-toggle[aria-expanded="true"] .cs-toggle-arrow { transform: rotate(180deg); }
.cs-body { padding: 16px; border-top: 1px solid var(--card-border, var(--border-2)); }

.cs-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.cs-footer-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
/* Reset is a subtle ghost action, distinct from Preview/Save. */
.cs-reset { background: none; border: 1px solid var(--card-border, var(--border-2)); color: var(--text-3); }
.cs-reset:hover { color: var(--text-1); border-color: var(--border-hi, var(--accent-line)); }
.cs-save { flex-shrink: 0; }

/* The compact preview is the same public popup card players see from leaderboards,
   but opened from the editor with the unsaved working style applied immediately. */
.cs-profile-preview-overlay { z-index: 1200; }
.cs-profile-preview-card { max-width: 600px; }
.cs-preview-periods { margin-bottom: 12px; }

/* Default keeps the established per-category badge palette. When the player enables
   badge matching, a chosen accent turns decorative rankings, placement badges and the
   platform badge into one coherent card theme. The legacy medal itself remains gold. */
.profile-card.cs-badges-accent:not(.cs-accent-default) .achievement-card:not(.achievement-card--legacy),
.popup-box.cs-badges-accent:not(.cs-accent-default) .achievement-card:not(.achievement-card--legacy) {
  --ach-color: var(--accent) !important;
}
.profile-card.cs-badges-accent:not(.cs-accent-default) .rank-badge.rank-top,
.popup-box.cs-badges-accent:not(.cs-accent-default) .rank-badge.rank-top {
  border-color: var(--accent-line);
  background: linear-gradient(180deg, var(--accent-soft), var(--bg-3));
}
.profile-card.cs-badges-accent:not(.cs-accent-default) .rank-badge.rank-top .rank-num,
.popup-box.cs-badges-accent:not(.cs-accent-default) .rank-badge.rank-top .rank-num { color: var(--accent); }
.profile-card.cs-badges-accent:not(.cs-accent-default) .rank-label,
.popup-box.cs-badges-accent:not(.cs-accent-default) .rank-label,
.profile-card.cs-badges-accent:not(.cs-accent-default) .achievement-label,
.popup-box.cs-badges-accent:not(.cs-accent-default) .achievement-label,
.profile-card.cs-badges-accent:not(.cs-accent-default) .achievement-sub,
.popup-box.cs-badges-accent:not(.cs-accent-default) .achievement-sub { color: var(--accent); }
.profile-card.cs-badges-accent:not(.cs-accent-default) .popup-platform.ps,
.profile-card.cs-badges-accent:not(.cs-accent-default) .popup-platform.xbox,
.popup-box.cs-badges-accent:not(.cs-accent-default) .popup-platform.ps,
.popup-box.cs-badges-accent:not(.cs-accent-default) .popup-platform.xbox {
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
.profile-card.cs-badges-accent:not(.cs-accent-default) .achievement-card--legacy,
.popup-box.cs-badges-accent:not(.cs-accent-default) .achievement-card--legacy {
  border-color: var(--accent-line);
  border-left-color: var(--accent);
}
.profile-card.cs-badges-accent:not(.cs-accent-default) .achievement-card--legacy:hover,
.popup-box.cs-badges-accent:not(.cs-accent-default) .achievement-card--legacy:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border-2));
  border-left-color: var(--accent);
  box-shadow: 0 7px 20px -9px color-mix(in srgb, var(--accent) 60%, transparent);
}

.cs-badge-option { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 16px; padding: 14px; border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--bg-3); cursor: pointer; }
.cs-badge-option-copy { min-width: 0; display: grid; gap: 3px; }
.cs-badge-option-title { color: var(--text-1); font-size: 13px; font-weight: 700; }
.cs-badge-option-sub { color: var(--text-3); font-size: 11.5px; line-height: 1.45; }
.cs-badge-switch { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 11px; font-weight: 700; }
.cs-badge-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cs-badge-switch-track { position: relative; width: 40px; height: 22px; border: 1px solid var(--border-hi); border-radius: 999px; background: var(--bg-raise); transition: background .15s, border-color .15s; }
.cs-badge-switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-3); transition: transform .15s, background .15s; }
.cs-badge-switch input:checked + .cs-badge-switch-track { border-color: var(--accent); background: var(--accent-soft); }
.cs-badge-switch input:checked + .cs-badge-switch-track::after { transform: translateX(18px); background: var(--accent); }
.cs-badge-switch input:focus-visible + .cs-badge-switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Profile customization tabs and killfeed editor ── */
.profile-customization-block { padding-top: 2px; }
.profile-custom-tabs { display: flex; gap: 2px; margin: 0 0 14px; padding: 3px; background: var(--card-bg, var(--bg-2)); border: 1px solid var(--card-border, var(--border-2)); border-radius: 7px; }
.profile-custom-tab { flex: 1; min-height: 34px; border: 0; border-radius: 4px; background: transparent; color: var(--text-3); font-size: 13px; font-weight: 700; cursor: pointer; }
.profile-custom-tab:hover { color: var(--text-1); }
.profile-custom-tab.is-active { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-line); }
.profile-custom-panel { min-width: 0; }
.profile-additional-options { display: grid; gap: 14px; }
.additional-options-widget [data-additional-scrim-slot] { margin-top: 18px; }
.additional-options-widget .scrim-host-option { padding: 18px 0 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; }
.additional-options-kill-message { margin: 0; }
.scrim-host-option { padding: 16px; border: 1px solid var(--border-2); border-radius: var(--radius-lg); background: var(--bg-3); }
.scrim-host-option-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.scrim-host-option-copy { min-width: 0; display: grid; gap: 3px; }
.scrim-host-option-title { color: var(--text-1); font-size: 14px; font-weight: 600; }
.scrim-host-option-sub { color: var(--text-3); font-size: 12px; line-height: 1.45; }
.scrim-host-switch { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; color: var(--text-2); font-size: 12px; font-weight: 700; cursor: pointer; }
.scrim-host-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.scrim-host-switch-track { position: relative; width: 42px; height: 24px; border: 1px solid var(--border-hi); border-radius: 999px; background: var(--bg-raise); transition: background .15s, border-color .15s; }
.scrim-host-switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-3); transition: transform .15s, background .15s; }
.scrim-host-switch input:checked + .scrim-host-switch-track { border-color: var(--accent); background: var(--accent-soft); }
.scrim-host-switch input:checked + .scrim-host-switch-track::after { transform: translateX(18px); background: var(--accent); }
.scrim-host-switch input:focus-visible + .scrim-host-switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.scrim-host-switch input:disabled + .scrim-host-switch-track { opacity: .55; cursor: wait; }
.scrim-host-vip-note { margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--border); color: var(--text-4); font-size: 11.5px; line-height: 1.5; }
.scrim-host-option-status { min-height: 18px; margin: 9px 0 0; color: var(--text-3); font-size: 11.5px; }
.scrim-host-option-status.is-error { color: var(--kill, #e0506a); }
.kf-widget { border: 1px solid var(--border-2); border-radius: var(--radius-lg); background: var(--bg-3); overflow: hidden; }
.kf-preview-wrap { position: relative; padding: 23px 16px; border: 1px solid var(--border-2); border-radius: 7px; background: var(--bg-3); }
.kf-preview-wrap::before { content: 'KILLFEED PREVIEW'; position: absolute; top: 8px; left: 10px; color: var(--text-4); font: 600 9px var(--mono); letter-spacing: .08em; }
.kf-preview { display: flex; align-items: center; min-height: 112px; justify-content: center; font-family: var(--ui); }
.kf-preview-message { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; max-width: 100%; text-align: left; }
.kf-preview-tag-row { display: inline-flex; align-items: baseline; justify-content: flex-start; gap: 6px; flex-wrap: wrap; }
.kf-preview-tag { font-size: 14px; font-weight: 700; }
.kf-preview-zone { font-size: 12px; font-weight: 600; }
.kf-preview-main { font-size: 19px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.kf-preview-line { font-size: 14px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.kf-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 18px; }
.kf-control-group { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.kf-side-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.kf-control-label { margin: 0 0 1px; color: var(--text-2); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.kf-vip-badge { display: inline-block; margin-left: 5px; padding: 2px 6px; border: 1px solid var(--accent-line); border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: 9px; line-height: 1; vertical-align: 1px; }
.kf-setting-toggle { display: flex; align-items: center; gap: 8px; min-height: 20px; color: var(--text-2); font-size: 13px; cursor: pointer; }
.kf-setting-toggle input { accent-color: var(--accent); }
.kf-order-group { grid-column: 1 / -1; }
.kf-additional-group { padding: 14px; border: 1px solid var(--border-2); border-radius: 7px; background: var(--bg-3); }
.kf-additional-drawer { display: grid; gap: 10px; padding-top: 12px; }
.kf-additional-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kf-additional-fields label { display: grid; gap: 5px; color: var(--text-3); font-size: 12px; }
.kf-additional-fields select { width: 100%; min-height: 36px; padding: 0 10px; border: 1px solid var(--border-2); border-radius: 5px; background: var(--bg-raise); color: var(--text-1); font: 600 12px var(--ui); }
.kf-additional-fields select:focus { outline: none; border-color: var(--accent); }
.kf-additional-fields select:disabled { opacity: .5; cursor: not-allowed; }
.kf-control-hint { margin: 0; color: var(--text-4); font-size: 11.5px; line-height: 1.45; }
.kf-order-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kf-order-list--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kf-order-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 44px; padding: 7px; color: var(--text-2); font-size: 12.5px; border: 1px solid var(--border-2); border-radius: 6px; background: var(--bg-3); }
.kf-order-position { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-raise); color: var(--accent); font: 600 10px var(--mono); }
.kf-order-name { min-width: 0; line-height: 1.1; }
.kf-order-actions { display: inline-flex; gap: 3px; }
.kf-icon-btn { width: 27px; height: 27px; display: grid; place-items: center; padding: 0; border: 1px solid var(--border-2); border-radius: 5px; background: var(--bg-raise); color: var(--text-2); cursor: pointer; font-size: 15px; line-height: 1; }
.kf-icon-btn:hover:not(:disabled) { color: var(--text-1); border-color: var(--border-hi); }
.kf-icon-btn:disabled { opacity: .35; cursor: default; }
.kf-colors { padding-top: 14px; border-top: 1px solid var(--border); }
.kf-color-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: left; }
.kf-color-toggle[aria-disabled="true"] { cursor: default; }
.kf-color-toggle > span { display: flex; flex-direction: column; gap: 1px; }
.kf-color-toggle-sub { color: var(--text-3); font-size: 12px; }
.kf-color-toggle-arrow { flex-shrink: 0; color: var(--text-3); transition: transform .2s; }
.kf-color-toggle[aria-expanded="true"] .kf-color-toggle-arrow { transform: rotate(180deg); }
.kf-color-drawer { display: flex; flex-direction: column; gap: 12px; padding-top: 2px; }
.kf-color-drawer--wide { grid-column: 1 / -1; padding: 14px; border: 1px solid var(--border-2); border-radius: 7px; background: var(--bg-3); }
.kf-color-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.kf-color-drawer--wide .kf-color-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kf-color-field { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 1.2fr); align-items: center; gap: 12px; color: var(--text-3); font-size: 12.5px; }
.kf-color-grid .kf-color-field { grid-template-columns: 1fr; gap: 4px; }
.kf-color-inputs { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 7px; min-width: 0; }
.kf-color-grid .kf-color-inputs { grid-template-columns: 30px minmax(0, 1fr); gap: 6px; }
.kf-color-field input { min-width: 0; height: 34px; padding: 0 9px; background: var(--bg-raise); border: 1px solid var(--border-2); border-radius: 5px; color: var(--text-1); font-family: var(--mono); font-size: 12px; }
.kf-color-field input[type="color"] { width: 30px; height: 30px; padding: 2px; border-radius: 50%; cursor: pointer; overflow: hidden; }
.kf-color-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.kf-color-field input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.kf-color-grid .kf-color-field input { height: 31px; }
.kf-color-grid .kf-color-field input[type="color"] { width: 30px; }
.kf-color-field input:focus { outline: none; border-color: var(--accent); }
.kf-vip-cta { align-self: flex-start; font-size: 13px; }
.kf-vip-note { margin: 0; }
.kf-save-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.kf-streak-preview { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 2px; color: var(--text-3); font-size: 12px; }
.kf-preview-toggle { color: var(--text-2); flex-shrink: 0; }
@media (max-width: 560px) {
  .cs-badge-option { align-items: flex-start; }
  .cs-badge-switch { padding-top: 2px; }
  .scrim-host-option-row { align-items: flex-start; }
  .scrim-host-switch { padding-top: 2px; }
  .kf-controls { grid-template-columns: 1fr; }
  .kf-order-group { grid-column: auto; }
  .kf-order-list { grid-template-columns: 1fr; }
  .kf-additional-fields { grid-template-columns: 1fr; }
  .kf-color-grid { grid-template-columns: 1fr; }
  .kf-color-drawer--wide { grid-column: auto; }
  .kf-color-drawer--wide .kf-color-grid { grid-template-columns: 1fr; }
  .kf-streak-preview { grid-column: auto; align-items: flex-start; flex-direction: column; }
  .kf-color-field { grid-template-columns: 1fr; gap: 5px; }
}