/* =====================================================================================================
   CueCraft design system: "liquid glass" for the web
   -----------------------------------------------------------------------------------------------------
   Layers (back to front):
     #cc-bg       fixed background (preset gradient, generated image or the user's photo) + adaptive scrim
     .cc-glass    the functional glass layer: tint + backdrop blur/saturate (+ SVG lens refraction on
                  Chromium, added by glass.js), a specular highlight that follows the pointer, a
                  light-catching rim, and a soft shadow for depth
     content      text and controls drawn ON the glass with solid fills (no glass-on-glass for text)
   All colours are CSS variables. glass.js recomputes the adaptive ones (scrim, accent, status text) so
   text keeps WCAG AA contrast over every background; the defaults below are already safe without JS.
   Docs: README-design.md
   ===================================================================================================== */

/* ---------------------------------------------------------------- tokens */
:root{
  --cc-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --cc-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --cc-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Cascadia Code", Consolas, Menlo, monospace;

  /* type scale */
  --cc-fs-xs: 12px; --cc-fs-sm: 13px; --cc-fs-base: 15px; --cc-fs-md: 17px; --cc-fs-lg: 20px;
  --cc-fs-xl: 24px; --cc-fs-2xl: 32px; --cc-fs-3xl: clamp(44px, 7vw, 84px);
  --cc-lh: 1.5;

  /* spacing (4 px grid) */
  --cc-s-1: 4px; --cc-s-2: 8px; --cc-s-3: 12px; --cc-s-4: 16px; --cc-s-5: 20px; --cc-s-6: 24px; --cc-s-7: 32px; --cc-s-8: 48px; --cc-s-9: 72px;

  /* concentric corner radii: an inner radius = outer radius - the padding between them */
  --cc-r-xs: 8px; --cc-r-sm: 12px; --cc-r-md: 16px; --cc-r-lg: 24px; --cc-r-xl: 32px; --cc-r-pill: 999px;
  --cc-r: var(--cc-r-lg);

  /* touch */
  --cc-hit: 44px;            /* minimum touch target */
  --cc-hit-sm: 36px;         /* compact controls on precise pointers only (upsized to 44 on touch) */

  /* glass (glass.js overwrites --cc-glass-a, --cc-glass-a-clear, --cc-glass-rgb, --cc-blur from the Look settings) */
  --cc-glass-a: .56;          /* tint opacity of the regular material */
  --cc-glass-a-clear: .30;    /* "clear" material, for media-rich spots with bold text only */
  --cc-glass-a-strong: .82;   /* text-heavy surfaces: sheets, tables */
  --cc-blur: 22px;
  --cc-sat: 175%;
  --cc-edge: .75;             /* edge highlight strength 0..1 */
  --cc-lens: ;                /* url(#cc-lens-…) set per element by glass.js on Chromium */
  --cc-mx: 30%; --cc-my: 0%;  /* specular highlight position (pointer / tilt) */

  /* motion */
  --cc-ease: cubic-bezier(.2,.8,.2,1);
  --cc-spring: cubic-bezier(.34,1.36,.5,1);   /* a little overshoot: "fluid" controls */
  --cc-dur: .28s;

  /* brand */
  --cc-brand-1: #ffb648; --cc-brand-2: #ff4f9a; --cc-brand-3: #7b5cff;
  --cc-brand-grad: linear-gradient(135deg, var(--cc-brand-1), var(--cc-brand-2) 52%, var(--cc-brand-3));

  /* pad colours (the classic djay pad palette used across the app) */
  --cc-pad-1:#ff4b4b; --cc-pad-2:#ff9d2e; --cc-pad-3:#ffd23f; --cc-pad-4:#4ee07a;
  --cc-pad-5:#33d6ff; --cc-pad-6:#4f7bff; --cc-pad-7:#a46bff; --cc-pad-8:#ff5fc8;
}

/* dark appearance (default) */
:root, :root[data-theme="dark"]{
  color-scheme: dark;
  --cc-bg-solid: #0a0b10;
  --cc-glass-rgb: 22 24 33;
  --cc-scrim-rgb: 4 5 10;   --cc-scrim-a: .22;
  --cc-fg: #f6f7fb;  --cc-fg-2: #c9cdd9;  --cc-fg-3: #9aa1b2;
  --cc-line: rgba(255,255,255,.14); --cc-line-strong: rgba(255,255,255,.26);
  --cc-fill: rgba(255,255,255,.09); --cc-fill-2: rgba(255,255,255,.15); --cc-fill-3: rgba(255,255,255,.22);
  --cc-field: rgba(0,0,0,.30);
  --cc-hi: 255 255 255;       /* specular colour */
  --cc-shadow: 0 1px 1px rgba(0,0,0,.25), 0 18px 44px -18px rgba(0,0,0,.65);
  --cc-accent: #f5a83e; --cc-accent-rgb: 245 168 62; --cc-accent-ink: #1b1206; --cc-accent-text: #ffc271;
  --cc-ok: #4fd18f;   --cc-ok-text: #7ee8b0;
  --cc-warn: #f5c94f; --cc-warn-text: #ffd978;
  --cc-danger: #e5484d; --cc-danger-text: #ffa3a3; --cc-danger-ink: #ffffff;
  --cc-info: #5aa9ff; --cc-info-text: #9cccff;
}
:root[data-theme="light"]{
  color-scheme: light;
  --cc-bg-solid: #eceef3;
  --cc-glass-rgb: 252 252 254;
  --cc-scrim-rgb: 246 247 250; --cc-scrim-a: .30;
  --cc-fg: #0f1115;  --cc-fg-2: #3b404c;  --cc-fg-3: #5d6373;
  --cc-line: rgba(15,17,21,.12); --cc-line-strong: rgba(15,17,21,.24);
  --cc-fill: rgba(15,17,21,.06); --cc-fill-2: rgba(15,17,21,.10); --cc-fill-3: rgba(15,17,21,.16);
  --cc-field: rgba(255,255,255,.72);
  --cc-hi: 255 255 255;
  --cc-shadow: 0 1px 1px rgba(30,30,60,.08), 0 18px 44px -20px rgba(30,30,60,.35);
  --cc-glass-a: .60; --cc-glass-a-clear: .36;
  --cc-accent: #b85f00; --cc-accent-rgb: 184 95 0; --cc-accent-ink: #ffffff; --cc-accent-text: #8f4a00;
  --cc-ok: #1f9d5c;   --cc-ok-text: #0b6b3a;
  --cc-warn: #d49b00; --cc-warn-text: #7a5000;
  --cc-danger: #d1303a; --cc-danger-text: #b0202a; --cc-danger-ink: #ffffff;
  --cc-info: #2a6fd6; --cc-info-text: #1452b0;
}
/* no JS yet + the OS asks for light: follow it (glass.js sets data-theme explicitly once it runs) */
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    color-scheme: light;
    --cc-bg-solid: #eceef3; --cc-glass-rgb: 252 252 254; --cc-scrim-rgb: 246 247 250; --cc-scrim-a: .30;
    --cc-fg: #0f1115; --cc-fg-2: #3b404c; --cc-fg-3: #5d6373;
    --cc-line: rgba(15,17,21,.12); --cc-line-strong: rgba(15,17,21,.24);
    --cc-fill: rgba(15,17,21,.06); --cc-fill-2: rgba(15,17,21,.10); --cc-fill-3: rgba(15,17,21,.16);
    --cc-field: rgba(255,255,255,.72); --cc-glass-a: .60; --cc-glass-a-clear: .36;
    --cc-shadow: 0 1px 1px rgba(30,30,60,.08), 0 18px 44px -20px rgba(30,30,60,.35);
    --cc-accent: #b85f00; --cc-accent-rgb: 184 95 0; --cc-accent-ink: #ffffff; --cc-accent-text: #8f4a00;
    --cc-ok: #1f9d5c; --cc-ok-text: #0b6b3a; --cc-warn: #d49b00; --cc-warn-text: #7a5000;
    --cc-danger: #d1303a; --cc-danger-text: #b0202a; --cc-info: #2a6fd6; --cc-info-text: #1452b0;
  }
}

/* ---------------------------------------------------------------- base */
*,*::before,*::after{ box-sizing: border-box }
[hidden]{ display: none !important }
html{ background: var(--cc-bg-solid); -webkit-text-size-adjust: 100%; text-size-adjust: 100% }
body.cc, .cc-root{
  margin: 0; min-height: 100vh; min-height: 100dvh; background: transparent; color: var(--cc-fg);
  font: 400 var(--cc-fs-base)/var(--cc-lh) var(--cc-font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
:where(.cc) :where(button, input, select, textarea){ font: inherit; color: inherit }
:where(.cc) :where(a){ color: var(--cc-accent-text) }
:where(.cc) :focus-visible{ outline: 3px solid rgb(var(--cc-accent-rgb) / .75); outline-offset: 2px }
:where(.cc) ::selection{ background: rgb(var(--cc-accent-rgb) / .35) }
:where(.cc) :where(img, svg){ max-width: 100% }

/* ---------------------------------------------------------------- background layer (built by glass.js) */
#cc-bg{ position: fixed; inset: 0; z-index: -10; overflow: hidden; pointer-events: none; background: var(--cc-bg-solid) }
#cc-bg .cc-bg__img{
  position: absolute; inset: -2px; background-size: cover; background-position: center;
  transition: opacity .6s var(--cc-ease); opacity: 1;
}
#cc-bg .cc-bg__img.is-leaving{ opacity: 0 }
#cc-bg .cc-bg__scrim{ position: absolute; inset: 0; background: rgb(var(--cc-scrim-rgb) / var(--cc-scrim-a)); transition: background-color .4s }
/* "Club lights": the original DJ Set Builder look, kept as a preset */
#cc-bg .cc-bg__img[data-preset="club"]{ background:
  radial-gradient(38% 52% at 14% 18%, rgba(245,168,62,.65), transparent 70%),
  radial-gradient(34% 48% at 86% 14%, rgba(255,70,160,.55), transparent 70%),
  radial-gradient(44% 58% at 72% 86%, rgba(70,115,255,.55), transparent 70%),
  radial-gradient(30% 40% at 24% 88%, rgba(50,210,190,.45), transparent 70%),
  radial-gradient(20% 30% at 50% 50%, rgba(160,90,255,.35), transparent 70%), #0d0f17 }
:root[data-theme="light"] #cc-bg .cc-bg__img[data-preset="club"]{ background:
  radial-gradient(38% 52% at 14% 18%, rgba(245,168,62,.45), transparent 70%),
  radial-gradient(34% 48% at 86% 14%, rgba(255,90,170,.32), transparent 70%),
  radial-gradient(44% 58% at 72% 86%, rgba(80,125,255,.32), transparent 70%),
  radial-gradient(30% 40% at 24% 88%, rgba(50,210,190,.28), transparent 70%), #ece9e3 }
#cc-bg .cc-bg__img[data-preset="plain"]{ background:
  radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.06), transparent 60%), var(--cc-bg-solid) }
:root[data-theme="light"] #cc-bg .cc-bg__img[data-preset="plain"]{ background:
  radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.7), transparent 60%), var(--cc-bg-solid) }

/* ---------------------------------------------------------------- the material */
.cc-glass{
  position: relative; isolation: isolate; color: var(--cc-fg);
  border-radius: var(--cc-r); box-shadow: var(--cc-shadow);
}
/* body of the glass: tint + blur + saturate (+ lens) + specular highlight + inner light */
.cc-glass::before{
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(140% 90% at var(--cc-mx) var(--cc-my), rgb(var(--cc-hi) / calc(.11 * var(--cc-edge))), transparent 55%),
    linear-gradient(180deg, rgb(var(--cc-hi) / calc(.05 * var(--cc-edge))), transparent 42%),
    rgb(var(--cc-glass-rgb) / var(--cc-glass-a));
  -webkit-backdrop-filter: blur(var(--cc-blur)) saturate(var(--cc-sat));
  backdrop-filter: blur(var(--cc-blur)) saturate(var(--cc-sat)) var(--cc-lens);   /* lens last: the blur keeps its native edge handling */
  box-shadow:
    inset 0 1px 0 0 rgb(var(--cc-hi) / calc(.40 * var(--cc-edge))),
    inset 0 -1px 0 0 rgb(var(--cc-hi) / calc(.10 * var(--cc-edge))),
    inset 0 10px 22px -16px rgb(var(--cc-hi) / calc(.38 * var(--cc-edge))),
    inset 0 -12px 22px -18px rgb(var(--cc-hi) / calc(.22 * var(--cc-edge)));
}
/* the rim: a 1 px light-catching edge, brightest where the light hits (top-left) */
.cc-glass::after{
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; padding: 1px;
  background: linear-gradient(150deg,
     rgb(var(--cc-hi) / calc(.70 * var(--cc-edge))) 0%, rgb(var(--cc-hi) / calc(.12 * var(--cc-edge))) 26%,
     rgb(var(--cc-hi) / .04) 55%, rgb(var(--cc-hi) / calc(.30 * var(--cc-edge))) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
:root[data-theme="light"] .cc-glass::after{ opacity: .9 }
/* variants */
.cc-glass--clear{ --cc-glass-a: var(--cc-glass-a-clear) }            /* media-rich spots, bold text only */
.cc-glass--strong{ --cc-glass-a: var(--cc-glass-a-strong) }   /* sheets, long text */
.cc-glass--tinted::before{
  background:
    radial-gradient(140% 90% at var(--cc-mx) var(--cc-my), rgb(var(--cc-hi) / calc(.11 * var(--cc-edge))), transparent 55%),
    linear-gradient(rgb(var(--cc-accent-rgb) / .22), rgb(var(--cc-accent-rgb) / .22)),
    rgb(var(--cc-glass-rgb) / var(--cc-glass-a));
}
.cc-glass--flat{ box-shadow: none }
.cc-glass--pill{ --cc-r: var(--cc-r-pill) }

/* solid mode: transparency 0 in Look, Reduce Transparency in the OS, or no backdrop-filter support */
:root[data-cc-solid] .cc-glass::before{
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: linear-gradient(180deg, rgb(var(--cc-hi) / .05), transparent 40%), rgb(var(--cc-glass-rgb) / .97);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .cc-glass::before{ background: rgb(var(--cc-glass-rgb) / .95) }
}
@media (prefers-reduced-transparency: reduce){
  :root:not([data-cc-glass-anyway]) .cc-glass::before{ -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    background: rgb(var(--cc-glass-rgb) / .97) !important }
}
@media (prefers-contrast: more){
  :root{ --cc-glass-a: .92; --cc-glass-a-clear: .85; --cc-line: currentColor }
  .cc-glass::after{ background: var(--cc-fg); opacity: .6 }
}
@media (forced-colors: active){
  .cc-glass{ border: 1px solid CanvasText }
  .cc-glass::before, .cc-glass::after{ display: none }
}

/* ---------------------------------------------------------------- layout */
.cc-page{ min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  padding: 0 max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)) }
.cc-container{ width: 100%; max-width: 1180px; margin: 0 auto }
.cc-container--narrow{ max-width: 760px }
.cc-container--form{ max-width: 460px }
.cc-main{ flex: 1; padding: var(--cc-s-6) 0 var(--cc-s-8) }
.cc-stack{ display: grid; gap: var(--cc-gap, var(--cc-s-4)); align-content: start }
.cc-row{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--cc-gap, var(--cc-s-3)) }
.cc-row--between{ justify-content: space-between }
.cc-row--end{ justify-content: flex-end }
.cc-row--nowrap{ flex-wrap: nowrap }
.cc-spacer{ flex: 1 }
.cc-grid{ display: grid; gap: var(--cc-gap, var(--cc-s-4)); grid-template-columns: repeat(auto-fit, minmax(min(var(--cc-min, 240px), 100%), 1fr)) }
.cc-card{ padding: var(--cc-s-5); border-radius: var(--cc-r-lg) }
.cc-card--lg{ padding: var(--cc-s-7); border-radius: var(--cc-r-xl) }
@media (max-width: 600px){ .cc-card--lg{ padding: var(--cc-s-5) } }
.cc-section-title{ display: flex; align-items: center; gap: var(--cc-s-3); margin: 0 0 var(--cc-s-3) }

/* ---------------------------------------------------------------- type */
.cc-h1, .cc-h2, .cc-h3{ font-family: var(--cc-font-display); margin: 0; letter-spacing: -.02em; line-height: 1.15 }
.cc-display{ font-family: var(--cc-font-display); font-size: var(--cc-fs-3xl); font-weight: 800; letter-spacing: -.045em; line-height: .98; margin: 0 }
.cc-h1{ font-size: var(--cc-fs-2xl); font-weight: 750 }
.cc-h2{ font-size: var(--cc-fs-xl); font-weight: 700 }
.cc-h3{ font-size: var(--cc-fs-md); font-weight: 650; letter-spacing: -.01em }
.cc-lead{ font-size: var(--cc-fs-md); color: var(--cc-fg-2); margin: 0; line-height: 1.55 }
.cc-text-2{ color: var(--cc-fg-2) }
.cc-small{ font-size: var(--cc-fs-sm) }
.cc-xs{ font-size: var(--cc-fs-xs) }
.cc-mono{ font-family: var(--cc-mono); font-size: .92em; letter-spacing: 0 }
.cc-num{ font-variant-numeric: tabular-nums }
.cc-center{ text-align: center }
.cc-p{ margin: 0 }
.cc-eyebrow{ font-size: var(--cc-fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cc-fg-2) }
.cc-link{ color: var(--cc-accent-text); text-decoration: none; font-weight: 600; border-radius: 4px }
.cc-link:hover{ text-decoration: underline; text-underline-offset: 3px }
/* text placed straight on the background (not on glass): big, bold, with a soft shadow */
.cc-on-bg{ color: var(--cc-fg) !important; text-shadow: 0 1px 2px rgb(var(--cc-scrim-rgb) / .55), 0 0 24px rgb(var(--cc-scrim-rgb) / .45) }
.cc-visually-hidden{ position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
.cc-divider{ height: 1px; background: var(--cc-line); border: 0; margin: var(--cc-s-4) 0 }
.cc-kbd{ font-family: var(--cc-mono); font-size: .85em; padding: 1px 6px; border-radius: 6px; background: var(--cc-fill-2); box-shadow: inset 0 -1px 0 var(--cc-line) }

/* ---------------------------------------------------------------- logo */
.cc-logo{ display: inline-flex; align-items: center; gap: 10px; color: var(--cc-fg); text-decoration: none; border-radius: 12px; min-height: var(--cc-hit) }
.cc-logo__mark{ width: 32px; height: 32px; flex: none; filter: drop-shadow(0 4px 10px rgba(255,79,154,.35)) }
.cc-logo__word{ font-family: var(--cc-font-display); font-weight: 750; font-size: 20px; letter-spacing: -.03em; line-height: 1 }
.cc-logo__word b{ font-weight: 750 }
.cc-logo__word span{ font-weight: 450; opacity: .92 }
.cc-logo--lg .cc-logo__mark{ width: 56px; height: 56px }
.cc-logo--lg .cc-logo__word{ font-size: 32px }

/* ---------------------------------------------------------------- top bar + step pills */
.cc-topbar{
  position: sticky; top: max(10px, env(safe-area-inset-top)); z-index: 50; margin: max(10px, env(safe-area-inset-top)) auto 0;
  display: flex; align-items: center; gap: var(--cc-s-3); padding: 6px 8px 6px 14px; min-height: 60px;
  --cc-r: 30px;
}
.cc-topbar__nav{ display: flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end }
@media (max-width: 520px){ .cc-topbar{ padding-left: 10px } .cc-topbar .cc-logo__word{ font-size: 18px } }
.cc-steps{ display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none }
.cc-steps::-webkit-scrollbar{ display: none }
.cc-step{
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--cc-hit-sm); padding: 0 14px 0 6px; border-radius: var(--cc-r-pill);
  background: transparent; border: 0; color: var(--cc-fg-2); font-weight: 600; font-size: var(--cc-fs-sm); white-space: nowrap;
  text-decoration: none; cursor: pointer; transition: background-color var(--cc-dur), color var(--cc-dur), transform .2s var(--cc-spring);
}
.cc-step__n{ display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--cc-fill-2); color: var(--cc-fg); font-size: 12px; font-weight: 750; flex: none }
.cc-step:hover{ background: var(--cc-fill); color: var(--cc-fg) }
.cc-step:active{ transform: scale(.96) }
.cc-step.is-current, .cc-step[aria-current="step"]{ background: var(--cc-fill-2); color: var(--cc-fg); box-shadow: inset 0 0 0 1px var(--cc-line), inset 0 1px 0 rgb(var(--cc-hi) / .25) }
.cc-step.is-current .cc-step__n, .cc-step[aria-current="step"] .cc-step__n{ background: var(--cc-accent); color: var(--cc-accent-ink) }
.cc-step.is-done .cc-step__n{ background: var(--cc-ok); color: #06240f }
.cc-step.is-done .cc-step__n::before{ content: "✓" }
.cc-step.is-done .cc-step__n > *{ display: none }

/* ---------------------------------------------------------------- buttons */
.cc-btn{
  --_bg: var(--cc-fill-2); --_fg: var(--cc-fg);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--cc-hit); padding: 0 20px; border: 0; border-radius: var(--cc-r-pill);
  background: var(--_bg); color: var(--_fg); font-weight: 650; font-size: var(--cc-fs-base); line-height: 1.1;
  text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; -webkit-user-select: none;
  box-shadow: inset 0 0 0 1px var(--cc-line), inset 0 1px 0 rgb(var(--cc-hi) / .16);
  transition: transform .25s var(--cc-spring), background-color var(--cc-dur), box-shadow var(--cc-dur), filter var(--cc-dur);
  touch-action: manipulation;
}
.cc-btn:hover{ --_bg: var(--cc-fill-3) }
.cc-btn:active{ transform: scale(.965) }
.cc-btn:disabled, .cc-btn[aria-disabled="true"]{ opacity: .5; cursor: not-allowed; transform: none }
.cc-btn svg{ width: 18px; height: 18px; flex: none }
.cc-btn--primary{
  --_bg: var(--cc-accent); --_fg: var(--cc-accent-ink);
  background: linear-gradient(180deg, rgb(255 255 255 / .26), rgb(255 255 255 / 0) 55%), var(--_bg);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), inset 0 -1px 0 rgb(0 0 0 / .14), 0 8px 22px -8px rgb(var(--cc-accent-rgb) / .7);
}
.cc-btn--primary:hover{ --_bg: var(--cc-accent); filter: brightness(1.06) saturate(1.05) }
.cc-btn--destructive{
  --_bg: var(--cc-danger); --_fg: var(--cc-danger-ink);
  background: linear-gradient(180deg, rgb(255 255 255 / .18), rgb(255 255 255 / 0) 55%), var(--_bg);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 8px 20px -10px rgba(229,72,77,.7);
}
.cc-btn--destructive:hover{ --_bg: var(--cc-danger); filter: brightness(1.07) }
.cc-btn--danger-quiet{ --_fg: var(--cc-danger-text) }
.cc-btn--plain{ --_bg: transparent; --_fg: var(--cc-accent-text); box-shadow: none }
.cc-btn--plain:hover{ --_bg: var(--cc-fill) }
/* glass button: its own little lens, for buttons that sit straight on the background */
.cc-btn--glass{ --_bg: transparent; isolation: isolate; box-shadow: 0 6px 18px -8px rgb(0 0 0 / .45) }
.cc-btn--glass::before{
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(120% 120% at var(--cc-mx) var(--cc-my), rgb(var(--cc-hi) / .22), transparent 60%), rgb(var(--cc-glass-rgb) / max(.45, var(--cc-glass-a)));
  -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%) var(--cc-lens);
  box-shadow: inset 0 0 0 1px var(--cc-line), inset 0 1px 0 rgb(var(--cc-hi) / .45), inset 0 -1px 0 rgb(var(--cc-hi) / .12);
}
.cc-btn--glass:hover::before{ background: radial-gradient(120% 120% at var(--cc-mx) var(--cc-my), rgb(var(--cc-hi) / .3), transparent 60%), rgb(var(--cc-glass-rgb) / max(.55, var(--cc-glass-a))) }
:root[data-cc-solid] .cc-btn--glass::before{ -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(var(--cc-glass-rgb) / .97) }
.cc-btn--sm{ min-height: var(--cc-hit-sm); padding: 0 14px; font-size: var(--cc-fs-sm) }
.cc-btn--lg{ min-height: 52px; padding: 0 26px; font-size: var(--cc-fs-md) }
.cc-btn--icon{ width: var(--cc-hit); padding: 0 }
.cc-btn--icon.cc-btn--sm{ width: var(--cc-hit-sm) }
.cc-btn--block{ width: 100% }
.cc-btn.is-busy{ color: transparent !important; pointer-events: none }
.cc-btn.is-busy::after{ content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid var(--_fg); border-right-color: transparent; animation: cc-spin .7s linear infinite }
@media (pointer: coarse){
  .cc-btn--sm, .cc-step{ min-height: var(--cc-hit) }
  .cc-btn--icon.cc-btn--sm{ width: var(--cc-hit) }
}

/* ---------------------------------------------------------------- segmented control (fluid thumb) */
.cc-seg{
  position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px;
  border-radius: var(--cc-r-pill); background: var(--cc-fill); box-shadow: inset 0 0 0 1px var(--cc-line), inset 0 1px 2px rgb(0 0 0 / .12);
  max-width: 100%;
}
.cc-seg > button, .cc-seg > a{
  position: relative; z-index: 1; min-height: calc(var(--cc-hit-sm) + 2px); padding: 0 16px; border: 0; border-radius: var(--cc-r-pill);
  background: transparent; color: var(--cc-fg-2); font-weight: 600; font-size: var(--cc-fs-sm); white-space: nowrap; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: color var(--cc-dur), transform .2s var(--cc-spring); touch-action: manipulation;
}
.cc-seg > button:hover{ color: var(--cc-fg) }
.cc-seg > button:active{ transform: scale(.96) }
.cc-seg > .is-active, .cc-seg > [aria-pressed="true"], .cc-seg > [aria-selected="true"], .cc-seg > [aria-current="page"]{
  color: var(--cc-fg); background: var(--cc-fill-3); box-shadow: inset 0 1px 0 rgb(var(--cc-hi) / .3), 0 2px 8px -2px rgb(0 0 0 / .3) }
/* when cuecraft.js drives it, one thumb slides and stretches between options */
.cc-seg.is-live > .is-active, .cc-seg.is-live > [aria-pressed="true"], .cc-seg.is-live > [aria-selected="true"], .cc-seg.is-live > [aria-current="page"]{ background: transparent; box-shadow: none }
.cc-seg__thumb{
  position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: var(--cc-thumb-w, 0px); border-radius: var(--cc-r-pill);
  transform: translateX(var(--cc-thumb-x, 0px)); pointer-events: none;
  background: linear-gradient(180deg, rgb(var(--cc-hi) / .22), rgb(var(--cc-hi) / .06)), var(--cc-fill-3);
  box-shadow: inset 0 1px 0 rgb(var(--cc-hi) / .45), inset 0 0 0 1px rgb(var(--cc-hi) / .10), 0 3px 10px -3px rgb(0 0 0 / .35);
  transition: transform .42s var(--cc-spring), width .42s var(--cc-spring);
}
:root[data-theme="light"] .cc-seg__thumb{ background: #fff; box-shadow: 0 1px 0 rgb(255 255 255 / .9) inset, 0 2px 8px -2px rgb(30 30 60 / .25), 0 0 0 .5px rgb(0 0 0 / .06) }
.cc-seg--block{ display: grid; width: 100% }
@media (pointer: coarse){ .cc-seg > button, .cc-seg > a{ min-height: var(--cc-hit) } }

/* ---------------------------------------------------------------- fields */
.cc-field{ display: grid; gap: 6px; min-width: 0 }
.cc-label{ font-size: var(--cc-fs-sm); font-weight: 650; color: var(--cc-fg-2) }
.cc-hint{ font-size: var(--cc-fs-sm); color: var(--cc-fg-2); margin: 0 }
.cc-error{ font-size: var(--cc-fs-sm); color: var(--cc-danger-text); font-weight: 600; margin: 0 }
.cc-input, .cc-select, .cc-textarea{
  width: 100%; min-height: var(--cc-hit); padding: 0 14px; border-radius: var(--cc-r-sm);
  border: 1px solid var(--cc-line-strong); background: var(--cc-field); color: var(--cc-fg);
  font-size: 16px; /* 16px stops iPad Safari zooming in on focus */
  box-shadow: inset 0 1px 2px rgb(0 0 0 / .14); transition: border-color var(--cc-dur), box-shadow var(--cc-dur), background-color var(--cc-dur);
  -webkit-appearance: none; appearance: none;
}
.cc-textarea{ padding: 10px 14px; min-height: 96px; resize: vertical; line-height: 1.45 }
.cc-input::placeholder, .cc-textarea::placeholder{ color: var(--cc-fg-3); opacity: 1 }
.cc-input:focus, .cc-select:focus, .cc-textarea:focus{ outline: none; border-color: rgb(var(--cc-accent-rgb) / .9); box-shadow: 0 0 0 4px rgb(var(--cc-accent-rgb) / .28) }
.cc-input[aria-invalid="true"], .cc-textarea[aria-invalid="true"]{ border-color: var(--cc-danger); box-shadow: 0 0 0 3px rgb(229 72 77 / .2) }
.cc-input:disabled{ opacity: .55 }
.cc-select{ padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%; background-size: 6px 6px; background-repeat: no-repeat }
.cc-input-wrap{ position: relative; display: block }
.cc-input-wrap > .cc-input{ padding-right: 84px }
.cc-input-wrap > .cc-input-btn{
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: 36px; min-width: 64px; padding: 0 12px;
  border: 0; border-radius: 9px; background: var(--cc-fill-2); color: var(--cc-fg); font-size: var(--cc-fs-sm); font-weight: 650; cursor: pointer;
}
.cc-input-wrap > .cc-input-btn:hover{ background: var(--cc-fill-3) }
@media (pointer: coarse){ .cc-input-wrap > .cc-input-btn{ min-height: 40px } }
/* password rule checklist */
.cc-rules{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--cc-fs-sm); color: var(--cc-fg-2) }
.cc-rules li{ display: inline-flex; align-items: center; gap: 6px }
.cc-rules li::before{ content: ""; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--cc-fg-3); flex: none;
  transition: background-color .2s, box-shadow .2s }
.cc-rules li.is-ok{ color: var(--cc-ok-text) }
.cc-rules li.is-ok::before{ background: var(--cc-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5' fill='none' stroke='%23062a14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; box-shadow: none }

/* ---------------------------------------------------------------- toggle switch */
.cc-toggle{ display: inline-flex; align-items: center; gap: 12px; min-height: var(--cc-hit); cursor: pointer; position: relative; user-select: none; -webkit-user-select: none }
.cc-toggle > input{ position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none }
.cc-toggle__track{
  position: relative; flex: none; width: 52px; height: 32px; border-radius: var(--cc-r-pill); background: var(--cc-fill-3);
  box-shadow: inset 0 0 0 1px var(--cc-line), inset 0 1px 3px rgb(0 0 0 / .2); transition: background-color .3s var(--cc-ease);
}
.cc-toggle__track::after{
  content: ""; position: absolute; top: 2px; left: 2px; width: 28px; height: 28px; border-radius: var(--cc-r-pill); background: #fff;
  box-shadow: 0 2px 6px rgb(0 0 0 / .3), 0 0 0 .5px rgb(0 0 0 / .08), inset 0 -1px 0 rgb(0 0 0 / .06);
  transition: transform .38s var(--cc-spring), width .2s var(--cc-ease);
}
.cc-toggle:active .cc-toggle__track::after{ width: 34px }                     /* the knob stretches like liquid */
.cc-toggle > input:checked + .cc-toggle__track{ background: var(--cc-ok) }
.cc-toggle > input:checked + .cc-toggle__track::after{ transform: translateX(20px) }
.cc-toggle:active > input:checked + .cc-toggle__track::after{ transform: translateX(14px) }
.cc-toggle > input:focus-visible + .cc-toggle__track{ outline: 3px solid rgb(var(--cc-accent-rgb) / .75); outline-offset: 2px }
.cc-toggle > input:disabled + .cc-toggle__track{ opacity: .5 }

/* ---------------------------------------------------------------- slider (set --cc-pct, cuecraft.js does it) */
.cc-range{ -webkit-appearance: none; appearance: none; width: 100%; height: var(--cc-hit); background: transparent; margin: 0; cursor: pointer; --cc-pct: 50% }
.cc-range:focus{ outline: none }
.cc-range::-webkit-slider-runnable-track{ height: 6px; border-radius: 6px;
  background: linear-gradient(90deg, var(--cc-accent) 0 var(--cc-pct), var(--cc-fill-3) var(--cc-pct) 100%); box-shadow: inset 0 1px 1px rgb(0 0 0 / .2) }
.cc-range::-moz-range-track{ height: 6px; border-radius: 6px; background: var(--cc-fill-3) }
.cc-range::-moz-range-progress{ height: 6px; border-radius: 6px; background: var(--cc-accent) }
.cc-range::-webkit-slider-thumb{ -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: #fff; border: 0;
  box-shadow: 0 2px 8px rgb(0 0 0 / .35), 0 0 0 .5px rgb(0 0 0 / .1); transition: transform .3s var(--cc-spring) }
.cc-range::-moz-range-thumb{ width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 2px 8px rgb(0 0 0 / .35); transition: transform .3s var(--cc-spring) }
.cc-range:active::-webkit-slider-thumb{ transform: scale(1.18) }
.cc-range:active::-moz-range-thumb{ transform: scale(1.18) }
.cc-range:focus-visible::-webkit-slider-thumb{ box-shadow: 0 0 0 4px rgb(var(--cc-accent-rgb) / .5), 0 2px 8px rgb(0 0 0 / .35) }
.cc-range:focus-visible::-moz-range-thumb{ box-shadow: 0 0 0 4px rgb(var(--cc-accent-rgb) / .5) }
.cc-range--hue::-webkit-slider-runnable-track{ background: linear-gradient(90deg,#ff4b4b,#ffb02e,#ffe14a,#4ee07a,#33d6ff,#4f7bff,#a46bff,#ff5fc8,#ff4b4b) }
.cc-range--hue::-moz-range-track{ background: linear-gradient(90deg,#ff4b4b,#ffb02e,#ffe14a,#4ee07a,#33d6ff,#4f7bff,#a46bff,#ff5fc8,#ff4b4b) }
.cc-range--hue::-moz-range-progress{ background: transparent }
.cc-range-row{ display: grid; grid-template-columns: minmax(96px, auto) 1fr 44px; gap: 12px; align-items: center }
.cc-range-row output{ font-variant-numeric: tabular-nums; text-align: right; color: var(--cc-fg-2); font-size: var(--cc-fs-sm) }
@media (max-width: 420px){ .cc-range-row{ grid-template-columns: 1fr 44px } .cc-range-row > label{ grid-column: 1 / -1 } }

/* ---------------------------------------------------------------- chips / badges */
.cc-chip{
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: var(--cc-r-pill);
  background: var(--cc-fill-2); color: var(--cc-fg); font-size: var(--cc-fs-xs); font-weight: 700; letter-spacing: .01em; white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--cc-line); border: 0; line-height: 1.1;
}
button.cc-chip, a.cc-chip{ min-height: var(--cc-hit-sm); padding: 0 14px; font-size: var(--cc-fs-sm); cursor: pointer; text-decoration: none; transition: transform .2s var(--cc-spring), background-color var(--cc-dur) }
button.cc-chip:active, a.cc-chip:active{ transform: scale(.95) }
button.cc-chip[aria-pressed="true"]{ background: rgb(var(--cc-accent-rgb) / .24); box-shadow: inset 0 0 0 1px rgb(var(--cc-accent-rgb) / .6) }
@media (pointer: coarse){ button.cc-chip, a.cc-chip{ min-height: var(--cc-hit) } }
.cc-chip__dot{ width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none }
.cc-chip--accent{ background: rgb(var(--cc-accent-rgb) / .2); color: var(--cc-accent-text); box-shadow: inset 0 0 0 1px rgb(var(--cc-accent-rgb) / .45) }
.cc-chip--ok{ color: var(--cc-ok-text); background: color-mix(in srgb, var(--cc-ok) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cc-ok) 45%, transparent) }
.cc-chip--warn{ color: var(--cc-warn-text); background: color-mix(in srgb, var(--cc-warn) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cc-warn) 45%, transparent) }
.cc-chip--danger{ color: var(--cc-danger-text); background: color-mix(in srgb, var(--cc-danger) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cc-danger) 45%, transparent) }
.cc-chip--info{ color: var(--cc-info-text); background: color-mix(in srgb, var(--cc-info) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cc-info) 45%, transparent) }
.cc-chip--solid{ background: var(--cc-accent); color: var(--cc-accent-ink); box-shadow: none }

/* ---------------------------------------------------------------- notices */
.cc-notice{ --_c: var(--cc-info); position: relative; display: block; padding: 12px 14px 12px 26px; border-radius: var(--cc-r-md);
  background: color-mix(in srgb, var(--_c) 14%, rgb(var(--cc-glass-rgb) / .5)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_c) 42%, transparent);
  color: var(--cc-fg); font-size: var(--cc-fs-sm); line-height: 1.45 }
.cc-notice::before{ content: ""; position: absolute; left: 11px; top: 11px; bottom: 11px; width: 4px; border-radius: 4px; background: var(--_c) }
.cc-notice--ok{ --_c: var(--cc-ok) } .cc-notice--warn{ --_c: var(--cc-warn) } .cc-notice--danger{ --_c: var(--cc-danger) }
.cc-notice b, .cc-notice strong{ font-weight: 700 }

/* ---------------------------------------------------------------- tables (+ two-line compact rows when narrow) */
.cc-table-wrap{ overflow: auto; border-radius: var(--cc-r-md); container-type: inline-size; container-name: cctable; -webkit-overflow-scrolling: touch }
.cc-table{ width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px }
.cc-table th{ text-align: left; font-size: var(--cc-fs-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--cc-fg-2);
  padding: 10px 12px; white-space: nowrap; position: sticky; top: 0; z-index: 1;
  background: rgb(var(--cc-glass-rgb) / .92); box-shadow: inset 0 -1px 0 var(--cc-line) }
.cc-table td{ padding: 10px 12px; border-top: 1px solid var(--cc-line); vertical-align: middle }
.cc-table tbody tr:first-child td{ border-top: 0 }
.cc-table tbody tr{ transition: background-color .15s }
.cc-table tbody tr:hover{ background: var(--cc-fill) }
.cc-table .cc-td-num, .cc-table .cc-num{ text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap }
.cc-table .cc-td-main{ font-weight: 600 }
.cc-table .cc-td-actions{ text-align: right; white-space: nowrap }
.cc-table .cc-td-actions > * + *{ margin-left: 6px }
.cc-table .cc-sub{ display: block; font-size: var(--cc-fs-sm); font-weight: 400; color: var(--cc-fg-2) }
@container cctable (max-width: 640px){
  .cc-table--stack, .cc-table--stack tbody{ display: block }
  .cc-table--stack thead{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }
  .cc-table--stack tr{ display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 2px; position: relative;
    padding: 10px 12px; border-top: 1px solid var(--cc-line) }
  .cc-table--stack tbody tr:first-child{ border-top: 0 }
  .cc-table--stack.has-actions tr{ padding-right: var(--cc-actions-w, 120px) }
  .cc-table--stack td{ display: block; padding: 0; border: 0; text-align: left; font-size: var(--cc-fs-sm); color: var(--cc-fg-2) }
  .cc-table--stack td.cc-td-main{ flex: 1 0 100%; font-size: 15px; color: var(--cc-fg); line-height: 1.35 }
  .cc-table--stack td[data-label]:not(.cc-td-main):not(.cc-td-actions)::before{ content: attr(data-label) " "; color: var(--cc-fg-3); font-weight: 600 }
  .cc-table--stack td.cc-td-actions{ position: absolute; right: 10px; top: 50%; transform: translateY(-50%); text-align: right }
  .cc-table--stack td.cc-td-hide-narrow{ display: none }
}
@supports not (container-type: inline-size){
  @media (max-width: 680px){
    .cc-table--stack, .cc-table--stack tbody{ display: block }
    .cc-table--stack thead{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }
    .cc-table--stack tr{ display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 2px; position: relative; padding: 10px 12px; border-top: 1px solid var(--cc-line) }
    .cc-table--stack.has-actions tr{ padding-right: var(--cc-actions-w, 120px) }
    .cc-table--stack td{ display: block; padding: 0; border: 0; text-align: left; font-size: var(--cc-fs-sm); color: var(--cc-fg-2) }
    .cc-table--stack td.cc-td-main{ flex: 1 0 100%; font-size: 15px; color: var(--cc-fg) }
    .cc-table--stack td[data-label]:not(.cc-td-main):not(.cc-td-actions)::before{ content: attr(data-label) " "; color: var(--cc-fg-3); font-weight: 600 }
    .cc-table--stack td.cc-td-actions{ position: absolute; right: 10px; top: 50%; transform: translateY(-50%) }
    .cc-table--stack td.cc-td-hide-narrow{ display: none }
  }
}
.cc-empty{ padding: var(--cc-s-6); text-align: center; color: var(--cc-fg-2) }

/* ---------------------------------------------------------------- sheet / modal (use <dialog class="cc-sheet cc-glass cc-glass--strong">) */
dialog.cc-sheet{
  position: fixed; inset: 0; margin: auto; border: 0; padding: 0; color: var(--cc-fg); background: transparent;
  width: min(560px, calc(100vw - 32px)); max-height: min(86vh, 900px); overflow: visible; --cc-r: var(--cc-r-xl);
}
dialog.cc-sheet[open]{ display: flex; flex-direction: column; animation: cc-sheet-in .42s var(--cc-spring) }
dialog.cc-sheet.is-closing{ animation: cc-sheet-out .2s var(--cc-ease) forwards }
dialog.cc-sheet::backdrop{ background: rgb(0 0 0 / .38); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: cc-fade .3s var(--cc-ease) }
:root[data-theme="light"] dialog.cc-sheet::backdrop{ background: rgb(20 22 40 / .22) }
.cc-sheet__head{ display: flex; align-items: center; gap: 12px; padding: 20px 20px 4px 24px }
.cc-sheet__title{ font-family: var(--cc-font-display); font-size: var(--cc-fs-lg); font-weight: 700; letter-spacing: -.01em; margin: 0; flex: 1; min-width: 0 }
.cc-sheet__body{ padding: 12px 24px; overflow: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0 }
.cc-sheet__foot{ display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 12px 20px 20px }
.cc-sheet--wide{ width: min(860px, calc(100vw - 32px)) }
@media (max-width: 600px){
  dialog.cc-sheet{ inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 100%; max-height: 92vh;
    border-bottom-left-radius: 0; border-bottom-right-radius: 0; --cc-r: 28px 28px 0 0; padding-bottom: env(safe-area-inset-bottom) }
  dialog.cc-sheet[open]{ animation: cc-sheet-up .42s var(--cc-spring) }
  dialog.cc-sheet.is-closing{ animation: cc-sheet-down .22s var(--cc-ease) forwards }
  .cc-sheet__foot > .cc-btn{ flex: 1 }
}

/* ---------------------------------------------------------------- toasts */
.cc-toasts{ position: fixed; z-index: 1000; left: 50%; bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px)); transform: translateX(-50%);
  display: flex; flex-direction: column-reverse; align-items: center; gap: 8px; pointer-events: none; width: min(520px, calc(100vw - 24px)) }
.cc-toast{ pointer-events: auto; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 8px 8px 18px; max-width: 100%;
  --cc-r: var(--cc-r-pill); --cc-glass-a: var(--cc-glass-a-strong); font-weight: 600; font-size: var(--cc-fs-sm);
  animation: cc-toast-in .45s var(--cc-spring) }
.cc-toast.is-leaving{ animation: cc-toast-out .25s var(--cc-ease) forwards }
.cc-toast__icon{ width: 10px; height: 10px; border-radius: 50%; background: var(--cc-info); flex: none; box-shadow: 0 0 10px currentColor }
.cc-toast--ok .cc-toast__icon{ background: var(--cc-ok) } .cc-toast--warn .cc-toast__icon{ background: var(--cc-warn) } .cc-toast--danger .cc-toast__icon{ background: var(--cc-danger) }
.cc-toast__msg{ flex: 1; min-width: 0; padding: 4px 0 }
.cc-toast__close{ flex: none }

/* ---------------------------------------------------------------- progress */
.cc-progress{ position: relative; height: 8px; border-radius: var(--cc-r-pill); background: var(--cc-fill-2); overflow: hidden; box-shadow: inset 0 1px 2px rgb(0 0 0 / .2) }
.cc-progress__bar{ position: relative; height: 100%; width: calc(var(--cc-value, 0) * 100%); border-radius: inherit; overflow: hidden;
  background: linear-gradient(90deg, var(--cc-accent), color-mix(in srgb, var(--cc-accent) 70%, #fff)); transition: width .45s var(--cc-ease) }
.cc-progress__bar::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .45), transparent);
  transform: translateX(-100%); animation: cc-shimmer 1.6s ease-in-out infinite }
.cc-progress--indeterminate .cc-progress__bar{ width: 38%; animation: cc-indet 1.3s var(--cc-ease) infinite }
.cc-progress--lg{ height: 12px }

/* ---------------------------------------------------------------- meter (storage) */
.cc-meter{ display: grid; gap: 8px; --cc-meter: 0 }
.cc-meter__track{ position: relative; height: 12px; border-radius: var(--cc-r-pill); background: var(--cc-fill-2); overflow: hidden; box-shadow: inset 0 1px 2px rgb(0 0 0 / .22) }
.cc-meter__fill{ height: 100%; width: calc(min(1, var(--cc-meter)) * 100%); min-width: 6px; border-radius: inherit;
  background: linear-gradient(180deg, rgb(255 255 255 / .3), transparent 60%), var(--cc-ok); transition: width .6s var(--cc-spring), background-color .3s }
.cc-meter[data-level="warn"] .cc-meter__fill{ background-color: var(--cc-warn) }
.cc-meter[data-level="full"] .cc-meter__fill{ background-color: var(--cc-danger) }
.cc-meter[data-level="none"] .cc-meter__fill{ background-color: var(--cc-info) }
.cc-meter__label{ display: flex; justify-content: space-between; gap: 12px; font-size: var(--cc-fs-sm); color: var(--cc-fg-2); flex-wrap: wrap }
.cc-meter__label b{ color: var(--cc-fg); font-weight: 700 }
.cc-meter--mini{ gap: 4px; min-width: 120px }
.cc-meter--mini .cc-meter__track{ height: 6px }
.cc-meter--mini .cc-meter__label{ font-size: var(--cc-fs-xs) }

/* ---------------------------------------------------------------- audio player bar */
.cc-player{ position: fixed; z-index: 60; left: 50%; bottom: max(14px, calc(env(safe-area-inset-bottom) + 8px)); transform: translateX(-50%);
  width: min(760px, calc(100vw - 24px)); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 8px 10px 8px 8px; --cc-r: var(--cc-r-pill); animation: cc-player-in .5s var(--cc-spring) }
.cc-player--inline{ position: relative; left: auto; bottom: auto; transform: none; width: 100%; animation: none }
.cc-player__play{ width: 48px; height: 48px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; flex: none;
  color: var(--cc-accent-ink); background: linear-gradient(180deg, rgb(255 255 255 / .3), transparent 60%), var(--cc-accent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 6px 16px -6px rgb(var(--cc-accent-rgb) / .8); transition: transform .25s var(--cc-spring) }
.cc-player__play:active{ transform: scale(.92) }
.cc-player__play svg{ width: 20px; height: 20px }
.cc-player__main{ display: grid; gap: 0; min-width: 0 }
.cc-player__title{ font-weight: 700; font-size: var(--cc-fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.cc-player__sub{ font-size: var(--cc-fs-xs); color: var(--cc-fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.cc-player__scrub{ height: 28px }
.cc-player__time{ font-size: var(--cc-fs-xs); color: var(--cc-fg-2); font-variant-numeric: tabular-nums; white-space: nowrap }
.cc-player__side{ display: flex; align-items: center; gap: 4px }

/* ---------------------------------------------------------------- misc */
.cc-spinner{ display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: cc-spin .7s linear infinite; vertical-align: -3px }
.cc-avatar{ display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; flex: none; font-weight: 800; font-size: 20px; color: #fff;
  background: var(--cc-brand-grad); box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 6px 18px -6px rgba(255,79,154,.6); text-shadow: 0 1px 2px rgb(0 0 0 / .35) }
.cc-icon{ width: 20px; height: 20px; flex: none }
.cc-icon-tile{ display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; flex: none; color: #fff;
  background: var(--cc-brand-grad); box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), inset 0 -1px 0 rgb(0 0 0 / .15), 0 8px 20px -8px rgba(123,92,255,.6) }
.cc-icon-tile svg{ width: 24px; height: 24px }
.cc-footer{ padding: var(--cc-s-6) 0 var(--cc-s-4); text-align: center; color: var(--cc-fg); font-size: var(--cc-fs-sm); font-weight: 500;
  text-shadow: 0 1px 2px rgb(var(--cc-scrim-rgb) / .55), 0 0 18px rgb(var(--cc-scrim-rgb) / .5) }
.cc-skeleton{ border-radius: 8px; background: linear-gradient(90deg, var(--cc-fill), var(--cc-fill-2), var(--cc-fill)); background-size: 200% 100%; animation: cc-skel 1.4s ease-in-out infinite; min-height: 1em }
.cc-copyfield{ display: flex; gap: 8px; align-items: stretch }
.cc-copyfield > .cc-input{ font-family: var(--cc-mono); font-size: 14px; flex: 1; min-width: 0 }

/* Look panel (built by CCGlass.mountLookPanel) */
.cc-look{ display: grid; gap: 18px }
.cc-look__bgs{ display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px }
.cc-look__bg{ position: relative; aspect-ratio: 16 / 10; border-radius: 14px; border: 0; padding: 0; cursor: pointer; overflow: hidden;
  background: var(--cc-fill-2) center/cover no-repeat; box-shadow: inset 0 0 0 1px var(--cc-line); transition: transform .25s var(--cc-spring), box-shadow .2s; min-height: 56px }
.cc-look__bg:active{ transform: scale(.95) }
.cc-look__bg[aria-pressed="true"]{ box-shadow: 0 0 0 3px var(--cc-accent), inset 0 0 0 1px rgb(255 255 255 / .3) }
.cc-look__bg > span{ position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 6px; font-size: 11.5px; font-weight: 700; color: #fff; text-align: left;
  background: linear-gradient(transparent, rgb(0 0 0 / .72)); text-shadow: 0 1px 2px rgb(0 0 0 / .6) }
.cc-look__bg[data-preset="club"]{ background: radial-gradient(60% 80% at 15% 20%, rgba(245,168,62,.85), transparent 70%), radial-gradient(60% 80% at 85% 15%, rgba(255,70,160,.75), transparent 70%), radial-gradient(70% 90% at 70% 90%, rgba(70,115,255,.75), transparent 70%), #0d0f17 }
.cc-look__bg[data-preset="plain"]{ background: linear-gradient(135deg, #2a2d38, #0a0b10 50%, #eceef3 50%, #fff) }
.cc-look__bg[data-preset="photo"]{ background: repeating-linear-gradient(45deg, var(--cc-fill), var(--cc-fill) 8px, var(--cc-fill-2) 8px, var(--cc-fill-2) 16px) }

/* ---------------------------------------------------------------- motion */
@keyframes cc-spin{ to{ transform: rotate(360deg) } }
@keyframes cc-fade{ from{ opacity: 0 } }
@keyframes cc-sheet-in{ from{ transform: translateY(14px) scale(.94) } }
@keyframes cc-sheet-out{ to{ transform: translateY(8px) scale(.96); opacity: 0 } }
@keyframes cc-sheet-up{ from{ transform: translateY(100%) } }
@keyframes cc-sheet-down{ to{ transform: translateY(100%) } }
@keyframes cc-toast-in{ from{ transform: translate(0, 24px) scale(.9) } }
@keyframes cc-player-in{ from{ transform: translate(-50%, 24px) scale(.94) } }
@keyframes cc-toast-out{ to{ transform: translateY(16px) scale(.92); opacity: 0 } }
@keyframes cc-shimmer{ to{ transform: translateX(100%) } }
@keyframes cc-indet{ from{ transform: translateX(-100%) } to{ transform: translateX(270%) } }
@keyframes cc-skel{ to{ background-position: -200% 0 } }
@keyframes cc-rise{ from{ transform: translateY(18px); opacity: 0 } }
.cc-rise{ animation: cc-rise .7s var(--cc-ease) both }
.cc-rise:nth-child(2){ animation-delay: .06s } .cc-rise:nth-child(3){ animation-delay: .12s } .cc-rise:nth-child(4){ animation-delay: .18s }

:root[data-cc-motion="off"] *, :root[data-cc-motion="off"] *::before, :root[data-cc-motion="off"] *::after{
  animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important }
}
.cc-toggle .cc-hint{ display: block; font-weight: 400 }
.cc-mt-2{ margin-top: 8px } .cc-mt-3{ margin-top: 12px } .cc-mt-4{ margin-top: 16px } .cc-mt-5{ margin-top: 20px } .cc-mt-6{ margin-top: 24px }