/* ==========================================================================
   CURT CREATION — client portal theme

   NAME COLLISION, on purpose: twenty-one ships its own css/theme.css, which
   this file replaces. Nothing loads it (head.tpl links theme.min.css, which is
   untouched), so the seeded screens are unaffected. The vendor original is kept
   beside this file as css/theme.vendor.css -- if theme.min.css ever needs
   rebuilding, minify THAT, not this.
   Single source of truth for colour, type, spacing and component styling.
   Nothing outside this file may contain a literal colour value.

   Layout:
     1. Fonts
     2. Tokens (:root)
     3. Dark theme ([data-theme="dark"])
     4. Reset + base
     5. App shell — sidebar, header, main
     6. Components
     7. Screens
     8. Mobile
   ========================================================================== */

/* ---------------------------------------------------------------- 1. FONTS */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Poppins:wght@400;500;600;700;800&display=swap");

/* Cocogoose Pro is a licensed family and is NOT redistributed in this repo.
   Drop the .woff2 files into css/fonts/ and it takes over automatically; until
   then --font-display falls through to Poppins, which the Curt Creation design
   system names as its display fallback.

   Note the trial family renders digits 0-9 as a "TRIAL" watermark glyph, which
   is why --font-display-num deliberately excludes Cocogoose. Any text that can
   contain a digit must use var(--font-display-num), not var(--font-display). */
@font-face {
  font-family: "Cocogoose Pro";
  src: url("fonts/Cocogoose-Pro-Regular.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cocogoose Pro";
  src: url("fonts/Cocogoose-Pro-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------- 2. TOKENS */

:root {
  /* -- brand ------------------------------------------------------------- */
  --cc-red:  #A73E3E;
  --cc-teal: #699794;
  --cc-ink:  #2A2928;

  --red-50:  #FBF1F1;
  --red-100: #F4DCDC;
  --red-200: #E7B9B9;
  --red-300: #D69090;
  --red-400: #C16868;
  --red-500: #A73E3E;
  --red-600: #8E3434;
  --red-700: #722A2A;
  --red-800: #561F1F;
  --red-900: #3A1515;

  --teal-50:  #F0F5F4;
  --teal-100: #DCE9E8;
  --teal-200: #BBD3D0;
  --teal-300: #95BAB6;
  --teal-400: #7DA9A5;
  --teal-500: #699794;
  --teal-600: #547B78;
  --teal-700: #42605E;
  --teal-800: #314745;
  --teal-900: #20302F;

  --neutral-0:   #FFFFFF;
  --neutral-50:  #F7F7F6;
  --neutral-100: #EFEEED;
  --neutral-200: #DEDCD9;
  --neutral-300: #C4C1BD;
  --neutral-400: #9C9893;
  --neutral-500: #767270;
  --neutral-600: #565350;
  --neutral-700: #3B3938;
  --neutral-800: #2A2928;
  --neutral-900: #1C1B1A;
  --neutral-950: #121211;

  /* -- status ------------------------------------------------------------ */
  --success:    #4F8A6B;
  --success-bg: #E7F1EC;
  --warning:    #C98A3A;
  --warning-bg: #F8EFDF;
  --danger:     #A73E3E;
  --danger-bg:  #F4DCDC;
  --info:       #699794;
  --info-bg:    #DCE9E8;

  /* Tint fills that hold up in both themes (README: "Red/teal tint fills"). */
  --tint-red:         rgba(167, 62, 62, .12);
  --tint-red-border:  rgba(167, 62, 62, .45);
  --tint-teal:        rgba(105, 151, 148, .14);
  --tint-teal-border: rgba(105, 151, 148, .30);
  --tint-teal-border-strong: rgba(105, 151, 148, .45);

  /* -- semantic, light --------------------------------------------------- */
  --bg:            var(--neutral-0);
  --bg-subtle:     var(--neutral-50);
  --bg-muted:      var(--neutral-100);
  --surface:       var(--neutral-0);
  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);
  --fg1:           var(--neutral-900);
  --fg2:           var(--neutral-600);
  --fg3:           var(--neutral-500);
  --fg-inverse:    var(--neutral-0);
  --link:          var(--teal-600);
  --accent:        var(--red-500);

  /* Primary CTA. Inverted in dark -- a near-black button on a near-black
     surface disappears, so the pair swaps rather than being re-tinted. */
  --cta-bg: #1C1B1A;
  --cta-fg: #FFFFFF;

  /* The sidebar is charcoal in BOTH themes, so it carries its own scale
     rather than reading the fg/surface tokens, which invert. (Never write
     a token name ending in "*" followed by "/" in this comment -- the "*" + "/"
     pair closes the comment early and the CSS parser then eats the next
     declaration, which is exactly how --rail-bg silently vanished once.) */
  --rail-bg:            var(--neutral-900);
  --rail-fg:            #FFFFFF;
  --rail-fg-muted:      rgba(255, 255, 255, .60);
  --rail-fg-faint:      rgba(255, 255, 255, .34);
  --rail-fg-dim:        rgba(255, 255, 255, .55);
  --rail-fg-dimmer:     rgba(255, 255, 255, .50);
  --rail-fg-chip:       rgba(255, 255, 255, .80);
  --rail-surface:       rgba(255, 255, 255, .06);
  --rail-surface-hover: rgba(255, 255, 255, .08);
  --rail-surface-open:  rgba(255, 255, 255, .12);
  --rail-border:        rgba(255, 255, 255, .10);
  --rail-border-strong: rgba(255, 255, 255, .18);
  --rail-badge-bg:      rgba(255, 255, 255, .14);
  --rail-spark-idle:    rgba(255, 255, 255, .22);
  --log-bg:             var(--neutral-900);
  --log-fg:             #E8E6E3;

  /* -- radii ------------------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* -- spacing (4px base) ------------------------------------------------ */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* -- shadows ----------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(28, 27, 26, .06);
  --shadow-sm: 0 2px 6px rgba(28, 27, 26, .08);
  --shadow-md: 0 8px 20px rgba(28, 27, 26, .10);
  --shadow-lg: 0 18px 40px rgba(28, 27, 26, .14);

  /* -- type -------------------------------------------------------------- */
  --font-display:     "Cocogoose Pro", "Poppins", "Montserrat", system-ui, sans-serif;
  --font-display-num: "Poppins", "Montserrat", system-ui, "Segoe UI", sans-serif;
  --font-body:        "Inter", "Helvetica Neue", -apple-system, system-ui, sans-serif;
  --font-mono:        "JetBrains Mono", "SF Mono", ui-monospace, "Menlo", monospace;

  --tracking-tight: -.02em;
  --tracking-wide:  .06em;
  --tracking-caps:  .08em;

  /* -- motion ------------------------------------------------------------ */
  --t-fast: .15s;
}

/* ------------------------------------------------------------ 3. DARK THEME */
/* Values follow the handoff's "Semantic dark" list, which overrides the
   design system's own dark block in three places: bg-subtle collapses onto bg
   (so the app shell never equals surface), and both border values step up one
   notch for legibility on charcoal. */

[data-theme="dark"] {
  --bg:            var(--neutral-900);
  --bg-subtle:     var(--neutral-900);
  --bg-muted:      var(--neutral-700);
  --surface:       var(--neutral-800);
  --border:        rgba(255, 255, 255, .12);
  --border-strong: rgba(255, 255, 255, .22);
  --fg1:           var(--neutral-50);
  --fg2:           var(--neutral-300);
  --fg3:           var(--neutral-400);
  --fg-inverse:    var(--neutral-900);
  --link:          var(--teal-400);
  --accent:        var(--red-400);

  --cta-bg: #F7F7F6;
  --cta-fg: #1C1B1A;

  --shadow-md: 0 8px 20px rgba(0, 0, 0, .40);
  --shadow-lg: 0 18px 40px rgba(0, 0, 0, .50);

  /* Status tints need more body against charcoal than their light-mode
     backgrounds, which would read as near-white blocks. */
  --success-bg: rgba(79, 138, 107, .18);
  --warning-bg: rgba(201, 138, 58, .18);
  --danger-bg:  rgba(167, 62, 62, .20);
  --info-bg:    rgba(105, 151, 148, .18);
  --red-50:     rgba(167, 62, 62, .14);
  --red-100:    rgba(167, 62, 62, .22);
  --teal-50:    rgba(105, 151, 148, .12);
  --teal-100:   rgba(105, 151, 148, .20);
}

/* ------------------------------------------------------- 4. RESET AND BASE */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.cc {
  margin: 0;
  background: var(--bg-subtle);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Content links only. :where() keeps this at (0,0,1) specificity so any
   single-class component rule (.cc-navitem, .cc-btn--*, .cc-chip, ...) wins --
   with the plain ".cc a" form (0,1,1) every anchor-based component silently
   rendered link-teal instead of its own colour. */
:where(.cc) a { color: var(--link); text-decoration: none; transition: color var(--t-fast); }
:where(.cc) a:hover { color: var(--accent); text-decoration: underline; }
.cc img { max-width: 100%; }
.cc h1, .cc h2, .cc h3, .cc h4, .cc p { margin: 0; }
.cc button { font-family: var(--font-body); }
.cc code, .cc pre, .cc .cc-mono { font-family: var(--font-mono); }

.cc ::-webkit-scrollbar { width: 10px; height: 10px; }
.cc ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-pill); }

.cc :focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: var(--r-xs); }
/* display:flex/grid on a class outranks the UA's [hidden] rule -- make hidden
   always win so toggling el.hidden works on any component. */
[hidden] { display: none !important; }

.cc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
         clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Icons: Lucide, stroke 1.75, currentColor. */
.cc-i { width: 17px; height: 17px; flex: 0 0 auto; stroke: currentColor; stroke-width: 1.75;
        fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cc-i-sm { width: 14px; height: 14px; }
.cc-i-xs { width: 13px; height: 13px; }

@media (prefers-reduced-motion: reduce) {
  .cc *, .cc *::before, .cc *::after {
    transition-duration: .01ms !important; animation-duration: .01ms !important;
  }
}

/* ------------------------------------------------------------ 5. APP SHELL */

.cc-app { display: flex; min-height: 100vh; background: var(--bg-subtle); }

/* -- sidebar ------------------------------------------------------------- */

.cc-rail {
  width: 240px; flex: 0 0 240px;
  background: var(--rail-bg);
  border-right: 1px solid var(--border);
  color: var(--rail-fg);
  display: flex; flex-direction: column;
  padding: 20px 14px; gap: 22px;
  position: sticky; top: 0; height: 100vh;
}
.cc-rail__brand { display: flex; align-items: center; padding: 2px 8px; }
.cc-rail__brand img { height: 28px; width: auto; display: block; }

.cc-rail__nav { display: flex; flex-direction: column; gap: 2px; }
.cc-navitem {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 500;
  color: var(--rail-fg-muted); text-decoration: none; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.cc-navitem:hover { background: var(--rail-surface-hover); color: var(--rail-fg); text-decoration: none; }
.cc-navitem.is-active { background: var(--red-500); color: var(--rail-fg); font-weight: 600; }
.cc-navitem.is-active:hover { background: var(--red-500); }
.cc-navitem__badge {
  margin-left: auto; font-family: var(--font-display-num); font-weight: 700; font-size: 11px;
  background: var(--rail-badge-bg); padding: 1px 7px; border-radius: var(--r-pill);
}
.cc-navitem__badge--due { background: var(--red-500); color: var(--rail-fg); }
.cc-navitem__dot { margin-left: auto; width: 7px; height: 7px; border-radius: var(--r-pill); }

.cc-rail__group { display: flex; flex-direction: column; gap: 2px; }
.cc-rail__grouplabel {
  padding: 0 12px 6px;
  font-family: var(--font-display); font-weight: 700; font-size: 10px;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--rail-fg-faint);
}

.cc-rail__foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.cc-credit {
  background: var(--tint-teal); border: 1px solid var(--tint-teal-border);
  border-radius: var(--r-md); padding: 13px;
}
.cc-credit__label {
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  color: var(--teal-400); letter-spacing: .04em; text-transform: uppercase;
}
.cc-credit__amount {
  font-family: var(--font-display-num); font-weight: 800; font-size: 22px;
  color: var(--rail-fg); margin-top: 2px;
}
.cc-credit__note { font-size: 11px; color: var(--rail-fg-dimmer); margin-top: 2px; }

.cc-rail__chips { display: flex; gap: 8px; }
.cc-rail__chip {
  flex: 1; text-align: center; padding: 8px; border-radius: var(--r-sm);
  background: var(--rail-surface-hover); color: var(--rail-fg-chip);
  font-size: 12px; font-weight: 600; text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.cc-rail__chip:hover { background: var(--rail-surface-open); color: var(--rail-fg); text-decoration: none; }

/* -- account switcher ---------------------------------------------------- */

.cc-switch { position: relative; margin-top: -8px; }
.cc-switch__trigger {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: 10px; cursor: pointer;
  background: var(--rail-surface); border: 1px solid var(--rail-border);
  color: var(--rail-fg); text-align: left; font-family: var(--font-body);
  transition: background var(--t-fast);
}
.cc-switch__trigger:hover,
.cc-switch__trigger[aria-expanded="true"] { background: var(--rail-surface-open); }
.cc-switch__id { flex: 1; min-width: 0; }
/* The tpl emits name/meta as <span>s -- ellipsis only clips block boxes, so
   an inline name paints straight past the trigger when the account name is
   long ("CurtCreation (Christen Kyle Dungca)"). Block them. */
.cc-switch__name {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--rail-fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-switch__meta {
  display: block; font-size: 11px; color: var(--rail-fg-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-switch__chev { width: 14px; height: 14px; flex: 0 0 auto; stroke: var(--rail-fg-muted);
                   stroke-width: 2; fill: none; stroke-linecap: round; }

/* Avatars and type tiles show initials, which can start with a digit
   ("7 Days to Die") -- digit-safe display face, never trial Cocogoose. */
.cc-avatar {
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display-num); font-weight: 700; font-size: 11px;
  color: var(--neutral-0);
}
.cc-avatar--red     { background: var(--red-500); }
.cc-avatar--teal    { background: var(--teal-600); }
.cc-avatar--neutral { background: var(--neutral-600); }
.cc-avatar--round   { border-radius: var(--r-pill); }

.cc-panel {
  position: absolute; top: calc(100% + 8px); z-index: 40;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg); overflow: hidden;
}
.cc-panel[hidden] { display: none; }
.cc-switch__panel { left: 0; width: 296px; }
.cc-panel__head {
  padding: 11px 14px; border-bottom: 1px solid var(--border);
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--fg3);
}
.cc-panel__foot {
  padding: 11px 14px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
}
.cc-panel__foot a { font-size: 12.5px; font-weight: 600; }
.cc-panel__note { font-size: 11.5px; color: var(--fg3); line-height: 1.5; }

.cc-acct {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 14px; cursor: pointer; text-align: left;
  border: 0; border-bottom: 1px solid var(--border); background: transparent;
  font-family: var(--font-body); transition: background var(--t-fast);
}
.cc-acct:hover { background: var(--bg-subtle); }
.cc-acct.is-current { background: var(--bg-muted); }
.cc-acct[disabled] { opacity: .55; cursor: not-allowed; }
.cc-acct[disabled]:hover { background: transparent; }
.cc-acct__id { flex: 1; min-width: 0; }
.cc-acct__name {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--fg1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-acct__meta { display: block; font-size: 11.5px; color: var(--fg3); margin-top: 1px;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-acct__badge {
  display: inline-flex; padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap;
}
.cc-acct__badge--viewing { background: var(--teal-100); color: var(--teal-700); }
.cc-acct__badge--due     { background: var(--danger-bg); color: var(--danger); }
.cc-acct__badge--closed  { background: var(--bg-muted); color: var(--fg3); }

/* -- header -------------------------------------------------------------- */

.cc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.cc-head {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 32px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
@supports not (backdrop-filter: blur(12px)) { .cc-head { background: var(--bg); } }

.cc-search {
  position: relative;
  flex: 1; max-width: 420px; display: flex; align-items: center; gap: 9px;
  padding: 8px 12px; border: 1px solid var(--border);
  border-radius: var(--r-pill); background: var(--surface);
}
/* Live KB suggestions dropdown (filled by the footer's typeahead JS). */
.cc-search__pop {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); box-shadow: var(--shadow-md);
  padding: 6px; z-index: 95; max-height: 340px; overflow-y: auto;
}
/* .cc prefix: the content-link rule ":where(.cc) a:hover" is (0,1,1) and
   would otherwise win the hover underline/colour over a bare class. */
.cc .cc-search__hit {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; border-radius: var(--r-sm); text-decoration: none;
}
.cc .cc-search__hit:hover, .cc .cc-search__hit.is-active { background: var(--bg-subtle); text-decoration: none; }
.cc-search__hit-title { font-size: 13px; font-weight: 600; color: var(--fg1); }
.cc-search__hit-cat { font-size: 11px; color: var(--fg3); }
.cc-search__none { padding: 10px; font-size: 12.5px; color: var(--fg2); }
.cc .cc-search__all {
  display: block; padding: 8px 10px; margin-top: 4px;
  border-top: 1px solid var(--border);
  font-size: 12.5px; font-weight: 600; color: var(--fg2); text-decoration: none;
}
.cc .cc-search__all:hover, .cc .cc-search__all.is-active {
  background: var(--bg-subtle); color: var(--fg1); text-decoration: none;
}
.cc-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: var(--font-body); font-size: 13px; color: var(--fg1);
}
.cc-search__icon { width: 15px; height: 15px; flex: 0 0 auto; stroke: var(--fg3);
                   stroke-width: 2; fill: none; stroke-linecap: round; }
.cc-kbd {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg3);
  border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px;
}

.cc-head__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.cc-user { position: relative; padding-left: 10px; border-left: 1px solid var(--border); }
.cc-user__trigger {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 8px 4px 4px; border: 0; background: transparent;
  border-radius: var(--r-pill); cursor: pointer; font-family: var(--font-body);
  transition: background var(--t-fast);
}
.cc-user__trigger:hover, .cc-user__trigger[aria-expanded="true"] { background: var(--bg-muted); }
.cc-user__id { line-height: 1.25; text-align: left; }
/* The tpl emits these as <span>s; block them so name stacks over the
   "Your login · role" line, matching the prototype's two-line chip. */
.cc-user__name { display: block; font-size: 12px; font-weight: 600; color: var(--fg1); }
.cc-user__sub { display: block; font-size: 11px; color: var(--fg3); white-space: nowrap; }
.cc-user__avatar {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: var(--r-pill);
  background: var(--teal-600); color: var(--neutral-0);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display-num); font-weight: 700; font-size: 12px;
}
.cc-user__panel { right: 0; width: 280px; }
/* The shared chevron class strokes a rail (white-scale) token; on the header's
   light surface that is invisible, so the user menu re-inks it. */
.cc-user__trigger .cc-switch__chev { stroke: var(--fg3); }
.cc-user__idblock { padding: 14px; border-bottom: 1px solid var(--border); }
.cc-user__viewing { font-size: 12px; color: var(--fg2); margin-top: 8px; }
.cc-user__viewing strong { font-weight: 600; color: var(--fg1); }
.cc-menu { padding: 6px; }
.cc-menu + .cc-menu { border-top: 1px solid var(--border); }
.cc-menuitem {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 12px; border: 0; background: transparent;
  border-radius: var(--r-sm); font-family: var(--font-body); font-size: 13px;
  color: var(--fg1); cursor: pointer; text-align: left; text-decoration: none;
  transition: background var(--t-fast);
}
.cc-menuitem:hover { background: var(--bg-subtle); color: var(--fg1); text-decoration: none; }
.cc-menuitem__count {
  margin-left: auto; font-family: var(--font-display-num);
  font-weight: 700; font-size: 11px; color: var(--fg3);
}
.cc-menuitem--danger { font-weight: 600; color: var(--red-500); }
.cc-menuitem--danger:hover { background: var(--red-50); color: var(--red-500); }

.cc-body { flex: 1; padding: 28px 32px 56px; max-width: 1240px; width: 100%; }

/* ----------------------------------------------------------- 6. COMPONENTS */

/* -- typography ---------------------------------------------------------- */

.cc-h1 { font-family: var(--font-display); font-weight: 700; font-size: 32px;
         letter-spacing: var(--tracking-tight); color: var(--fg1); }
.cc-h2 { font-family: var(--font-display); font-weight: 700; font-size: 30px;
         letter-spacing: var(--tracking-tight); color: var(--fg1); }
.cc-h3 { font-family: var(--font-display); font-weight: 700; font-size: 28px;
         letter-spacing: var(--tracking-tight); color: var(--fg1); }
.cc-h4 { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--fg1); }

/* Section heading -- the uppercase 13px rule used on every card header. */
.cc-sect {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--fg2); margin: 0;
}
.cc-eyebrow {
  font-family: var(--font-display); font-weight: 700; font-size: 10px;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--teal-600);
}
.cc-label {
  font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--fg3);
}
.cc-lede { color: var(--fg2); }
.cc-num { font-family: var(--font-display-num); font-weight: 800; letter-spacing: var(--tracking-tight); }
.cc-mono { font-family: var(--font-mono); }
.cc-muted { color: var(--fg3); }
.cc-dim { color: var(--fg2); }
.cc-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-nowrap { white-space: nowrap; }

/* -- layout helpers ------------------------------------------------------ */

.cc-stack { display: flex; flex-direction: column; }
.cc-stack--4  { gap: 4px; }  .cc-stack--8  { gap: 8px; }
.cc-stack--12 { gap: 12px; } .cc-stack--14 { gap: 14px; }
.cc-stack--16 { gap: 16px; } .cc-stack--18 { gap: 18px; }
.cc-stack--20 { gap: 20px; } .cc-stack--24 { gap: 24px; }
.cc-row { display: flex; align-items: center; gap: 10px; }
.cc-row--between { justify-content: space-between; }
.cc-row--wrap { flex-wrap: wrap; }
.cc-row--end { align-items: flex-end; }
.cc-spacer { margin-left: auto; }

.cc-pagehead { display: flex; align-items: flex-end; justify-content: space-between;
               gap: 20px; flex-wrap: wrap; }
.cc-crumb { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg3); }
.cc-crumb a { font-weight: 600; }

/* -- buttons ------------------------------------------------------------- */

.cc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 13px; border-radius: var(--r-sm); border: 1px solid transparent;
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: opacity var(--t-fast), background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.cc-btn:hover { text-decoration: none; }
.cc-btn--md { padding: 10px 14px; font-size: 13px; }
.cc-btn--lg { padding: 12px; font-size: 14px; width: 100%; }
.cc-btn--block { width: 100%; }

.cc-btn--solid { background: var(--red-500); color: var(--neutral-0); }
.cc-btn--solid:hover { opacity: .9; color: var(--neutral-0); }

.cc-btn--dark { background: var(--cta-bg); color: var(--cta-fg); }
.cc-btn--dark:hover { opacity: .9; color: var(--cta-fg); }

.cc-btn--ghost { background: var(--surface); color: var(--fg1); border-color: var(--border); }
.cc-btn--ghost:hover { background: var(--bg-muted); color: var(--fg1); }

.cc-btn--outline { background: transparent; color: var(--rail-fg); border-color: var(--rail-border-strong); }
.cc-btn--outline:hover { background: var(--rail-surface-hover); color: var(--rail-fg); }

.cc-btn--danger { background: var(--surface); color: var(--red-500); border-color: var(--border); }
.cc-btn--danger:hover { background: var(--red-50); border-color: var(--red-200); color: var(--red-500); }

.cc-btn--pill { border-radius: var(--r-pill); padding: 9px 14px; }
.cc-btn--quiet { background: var(--bg-muted); color: var(--fg3); border-color: var(--border); cursor: default; }
.cc-btn--quiet:hover { opacity: 1; background: var(--bg-muted); color: var(--fg3); }
.cc-btn[disabled], .cc-btn.disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }

.cc-toggle-theme {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); color: var(--fg2);
  font-family: var(--font-body); font-size: 12px; font-weight: 600; cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.cc-toggle-theme:hover { color: var(--fg1); border-color: var(--border-strong); }

/* -- pills --------------------------------------------------------------- */

.cc-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap;
}
.cc-pill--success { color: var(--success); background: var(--success-bg); }
.cc-pill--warning { color: var(--warning); background: var(--warning-bg); }
.cc-pill--danger  { color: var(--danger);  background: var(--danger-bg); }
.cc-pill--info    { color: var(--teal-700); background: var(--teal-100); }
.cc-pill--neutral { color: var(--fg2); background: var(--bg-muted); }

.cc-count {
  font-family: var(--font-display-num); font-weight: 700; font-size: 11px;
  background: var(--red-500); color: var(--neutral-0);
  padding: 2px 8px; border-radius: var(--r-pill);
}

.cc-dot { width: 9px; height: 9px; border-radius: var(--r-pill); flex: 0 0 auto; }
.cc-dot--sm { width: 7px; height: 7px; }
.cc-dot--danger  { background: var(--danger); }
.cc-dot--warning { background: var(--warning); }
.cc-dot--teal    { background: var(--teal-500); }
.cc-dot--success { background: var(--success); }
.cc-dot--neutral { background: var(--neutral-400); }
.cc-dot--red     { background: var(--red-400); }

.cc-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.cc-status--ok      { color: var(--success); }
.cc-status--danger  { color: var(--danger); }
.cc-status--warning { color: var(--warning); }

/* -- cards --------------------------------------------------------------- */

.cc-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: box-shadow var(--t-fast), border-color var(--t-fast);
}
.cc-card--pad { padding: 18px; }
.cc-card--clip { overflow: hidden; }
.cc-card--hover:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.cc-card--dark { background: var(--rail-bg); border-color: var(--border); color: var(--rail-fg); }
.cc-card--muted { background: var(--bg-muted); border-color: transparent; }
.cc-card--tint-red  { background: var(--tint-red);  border-color: var(--tint-red-border); }
.cc-card--tint-teal { background: var(--tint-teal); border-color: var(--tint-teal-border-strong); }

.cc-card__head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px; border-bottom: 1px solid var(--border);
}
.cc-card__head--tall { padding: 16px 18px; justify-content: space-between; }
.cc-card__body { padding: 18px; }
.cc-card__empty { padding: 22px 18px; font-size: 13.5px; color: var(--fg2); }

/* -- stat band ----------------------------------------------------------- */

.cc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cc-stats--3 { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cc-stat { background: var(--surface); border: 1px solid var(--border);
           border-radius: var(--r-md); padding: 16px; }
.cc-stat--due { background: var(--tint-red); border-color: var(--tint-red-border); }
.cc-stat--due .cc-stat__label,
.cc-stat--due .cc-stat__figure { color: var(--accent); }
.cc-stat__label { font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-wide);
                  text-transform: uppercase; color: var(--fg3); }
.cc-stat__figure {
  font-family: var(--font-display-num); font-weight: 800; font-size: 28px;
  color: var(--fg1); margin-top: 5px; line-height: 1.15;
}
.cc-stat__of { font-size: 15px; color: var(--fg3); }
.cc-stat__note { font-size: 12px; color: var(--fg3); margin-top: 3px; }

/* -- attention list ------------------------------------------------------ */

.cc-alert {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 18px; border-bottom: 1px solid var(--border);
  transition: background var(--t-fast);
}
.cc-alert:last-child { border-bottom: 0; }
.cc-alert:hover { background: var(--bg-subtle); }
.cc-alert__id { flex: 1; min-width: 0; }
.cc-alert__title { font-size: 13.5px; font-weight: 600; color: var(--fg1); }
.cc-alert__body { font-size: 12.5px; color: var(--fg2); margin-top: 1px; }
.cc-alert__amount { font-family: var(--font-display-num); font-weight: 700;
                    font-size: 13px; color: var(--fg1); }

/* -- verify-email notice (header.tpl include) ---------------------------- */
/* Stock theme.min.css paints .verification-banner as a white full-bleed bar;
   the .cc-verify compound (0,2,0) out-specifies those (0,1,0) rules so the
   notice reads as a warm card of this system in both themes. rgba borders use
   the --warning hue (201,138,58), which both palettes share. */

.verification-banner.cc-verify {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 0 0 18px; padding: 12px 16px;
  background: var(--warning-bg); border: 1px solid rgba(201, 138, 58, .4);
  border-radius: 12px; color: var(--fg1); font-weight: 400;
}
.cc-verify__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto;
  background: rgba(201, 138, 58, .18); color: var(--warning);
}
.cc-verify__text { flex: 1 1 240px; min-width: 0; font-size: 13px; line-height: 1.5; }
.cc-verify__text strong { font-weight: 700; color: var(--fg1); margin-right: 4px; }
.cc-verify__text span { color: var(--fg2); }
.cc-verify .btn-resend-verify-email .loader { margin-right: 6px; }
.cc-verify__close {
  border: 0; background: transparent; cursor: pointer; flex: 0 0 auto;
  font-size: 18px; line-height: 1; padding: 6px 8px; border-radius: 8px;
  color: var(--fg3); transition: background var(--t-fast), color var(--t-fast);
}
.cc-verify__close:hover { background: rgba(201, 138, 58, .18); color: var(--fg1); }

/* -- grid tables --------------------------------------------------------- */

.cc-tbl { display: block; width: 100%; }
.cc-tbl__scroll { overflow-x: auto; overflow-y: hidden; }
.cc-tbl__head, .cc-tbl__row { display: grid; gap: 14px; align-items: center; }
.cc-tbl__head {
  padding: 12px 18px; background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--fg3);
}
.cc-tbl__row {
  padding: 15px 18px; border-bottom: 1px solid var(--border);
  transition: background var(--t-fast); color: inherit; text-decoration: none;
}
.cc-tbl__row:last-child { border-bottom: 0; }
.cc-tbl__row:hover { background: var(--bg-subtle); text-decoration: none; color: inherit; }
.cc-tbl__row--link { cursor: pointer; }
.cc-tbl__actions { display: flex; gap: 7px; justify-content: flex-end; }

/* Column templates, named per screen so the markup stays declarative. */
/* The prototype had a 110px "Load" column here; there is no live-load data
   source in this install, so the column is omitted rather than faked. */
.cc-cols--dash     { grid-template-columns: minmax(190px,2.2fr) minmax(90px,1fr) minmax(120px,1.2fr) minmax(84px,.85fr) 170px; min-width: 700px; }
.cc-cols--services { grid-template-columns: 2.4fr 1fr 1fr .8fr 150px; gap: 16px; min-width: 720px; }
.cc-cols--invoices { grid-template-columns: .8fr 2.2fr 1fr 1fr .9fr 110px; min-width: 820px; }
.cc-cols--tickets  { grid-template-columns: .9fr 2.4fr 1.1fr 1fr 1fr; min-width: 760px; }
.cc-cols--domains  { grid-template-columns: 2fr 1.1fr 1.1fr 1.2fr 130px; min-width: 760px; }
.cc-cols--ledger   { grid-template-columns: 1.6fr 1fr .9fr .9fr; gap: 12px; padding: 14px 18px; }
.cc-cols--emails   { grid-template-columns: minmax(150px,1fr) minmax(260px,2.8fr) 96px; min-width: 560px; }
.cc-cols--aff      { grid-template-columns: minmax(120px,1fr) minmax(180px,2fr) minmax(110px,1fr) minmax(110px,1fr) 110px; min-width: 640px; }
.cc-cols--quotes   { grid-template-columns: 90px minmax(180px,2.2fr) minmax(110px,1fr) minmax(110px,1fr) 110px 90px; min-width: 680px; }

/* -- table toolbar + pager (email history) ------------------------------- */

.cc-tblbar { display: flex; align-items: center; gap: 14px;
             padding: 12px 18px; border-bottom: 1px solid var(--border); }
.cc-tblbar .cc-input { flex: 1; max-width: 340px; }
.cc-tblbar__count { margin-left: auto; font-size: 12px; color: var(--fg3); white-space: nowrap; }
.cc-tblpager { display: flex; align-items: center; justify-content: space-between;
               gap: 12px; padding: 12px 18px; border-top: 1px solid var(--border); }
.cc-tblpager__info { font-size: 12px; color: var(--fg3); }
.cc-email__clip { color: var(--fg3); }

/* -- service identity cell ----------------------------------------------- */

.cc-svc { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cc-tile {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display-num); font-weight: 700; font-size: 11px;
  color: var(--neutral-0);
}
.cc-tile--lg { width: 46px; height: 46px; border-radius: var(--r-md); font-size: 12px; }
.cc-tile--game { background: var(--red-500); }
.cc-tile--vps  { background: var(--teal-600); }
.cc-tile--web  { background: var(--neutral-700); }
.cc-tile--off  { background: var(--neutral-500); }
.cc-svc__name { font-size: 14px; font-weight: 600; color: var(--fg1); }
.cc-svc__addr { font-family: var(--font-mono); font-size: 11px; color: var(--fg3); margin-top: 2px; }

/* -- meters -------------------------------------------------------------- */

.cc-meter { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.cc-meter:last-child { margin-bottom: 0; }
.cc-meter__label { font-size: 10px; color: var(--fg3); width: 22px; flex: 0 0 auto; }
.cc-meter__track { flex: 1; height: 4px; border-radius: var(--r-pill);
                   background: var(--bg-muted); overflow: hidden; }
.cc-meter__fill { display: block; height: 100%; border-radius: var(--r-pill); }
.cc-meter__value { font-family: var(--font-display-num); font-weight: 700; font-size: 10px;
                   color: var(--fg2); width: 26px; text-align: right; flex: 0 0 auto; }
.cc-meter--calm { background: var(--teal-500); }
.cc-meter--warm { background: var(--warning); }
.cc-meter--hot  { background: var(--danger); }

.cc-gauge__track { height: 5px; border-radius: var(--r-pill); background: var(--bg-muted);
                   overflow: hidden; margin-top: 10px; }
.cc-gauge__fill { height: 100%; border-radius: var(--r-pill); }
.cc-gauge__figure { font-family: var(--font-display-num); font-weight: 800; font-size: 26px;
                    color: var(--fg1); margin-top: 6px; }
.cc-gauge__note { font-size: 11px; color: var(--fg3); margin-top: 7px; }

/* -- toggle -------------------------------------------------------------- */

.cc-toggle { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.cc-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.cc-toggle__track {
  width: 38px; height: 21px; border-radius: var(--r-pill); flex: 0 0 auto;
  position: relative; background: var(--neutral-300); transition: background var(--t-fast);
}
.cc-toggle__track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 15px; height: 15px; border-radius: var(--r-pill);
  background: var(--neutral-0); transition: transform var(--t-fast);
}
.cc-toggle input:checked + .cc-toggle__track { background: var(--success); }
.cc-toggle input:checked + .cc-toggle__track::after { transform: translateX(17px); }
.cc-toggle input:focus-visible + .cc-toggle__track { outline: 2px solid var(--link); outline-offset: 2px; }
.cc-toggle__label { font-size: 12px; color: var(--fg2); }

/* -- banners ------------------------------------------------------------- */

.cc-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: var(--r-md); border: 1px solid transparent;
}
.cc-banner--danger { background: var(--tint-red);  border-color: var(--tint-red-border); }
.cc-banner--info   { background: var(--tint-teal); border-color: var(--tint-teal-border-strong); }
.cc-banner__title { font-size: 14px; font-weight: 600; color: var(--fg1); }
.cc-banner__body  { font-size: 13px; color: var(--fg2); margin-top: 2px; }

/* -- tabs ---------------------------------------------------------------- */

.cc-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.cc-tab {
  padding: 11px 16px; font-size: 13.5px; font-weight: 500;
  color: var(--fg2); text-decoration: none; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.cc-tab:hover { color: var(--fg1); text-decoration: none; }
.cc-tab.is-active { font-weight: 700; color: var(--fg1); border-bottom-color: var(--red-500); }

.cc-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.cc-chip {
  padding: 7px 14px; border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: none;
  border: 1px solid var(--border); background: var(--surface); color: var(--fg2);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.cc-chip:hover { color: var(--fg1); border-color: var(--border-strong); text-decoration: none; }
.cc-chip.is-active { background: var(--neutral-900); color: var(--neutral-0); border-color: transparent; }
[data-theme="dark"] .cc-chip.is-active { background: var(--neutral-50); color: var(--neutral-900); }

/* -- forms --------------------------------------------------------------- */

.cc-field { display: flex; flex-direction: column; gap: 6px; }
.cc-field--wide { grid-column: span 2; }
.cc-field__label { font-size: 12px; font-weight: 600; color: var(--fg1); }
.cc-input, .cc-select, .cc-textarea {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font-family: var(--font-body); font-size: 13px;
  background: var(--surface); color: var(--fg1);
  transition: border-color var(--t-fast);
}
.cc-input:focus, .cc-select:focus, .cc-textarea:focus { outline: 0; border-color: var(--link); }
.cc-textarea { resize: vertical; }
.cc-input--sm { padding: 10px 12px; }
.cc-check { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--fg1); }
.cc-check input { width: 15px; height: 15px; accent-color: var(--red-500); }

/* -- key/value rails ----------------------------------------------------- */

.cc-kv { display: flex; justify-content: space-between; gap: 12px;
         padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.cc-kv:last-child { border-bottom: 0; }
.cc-kv__k { color: var(--fg3); }
.cc-kv__v { color: var(--fg1); text-align: right; }

.cc-linklist { display: flex; flex-direction: column; }
.cc-linklist a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--fg1); text-decoration: none;
  transition: color var(--t-fast);
}
.cc-linklist a:last-child { border-bottom: 0; }
.cc-linklist a:hover { color: var(--red-500); text-decoration: none; }
.cc-linklist__arrow { color: var(--fg3); }

/* -- feed / activity ----------------------------------------------------- */

.cc-feed { display: flex; gap: 14px; padding: 10px 0;
           border-bottom: 1px solid var(--border); align-items: center; }
.cc-feed:last-child { border-bottom: 0; }
.cc-feed__text { flex: 1; font-size: 13px; color: var(--fg1); }
.cc-feed__when { font-family: var(--font-mono); font-size: 11px; color: var(--fg3); }

.cc-note { display: flex; gap: 14px; padding: 11px 0;
           border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; }
.cc-note:last-child { border-bottom: 0; }
.cc-note:hover { text-decoration: none; color: inherit; }
.cc-note__date { font-family: var(--font-mono); font-size: 11px; color: var(--fg3);
                 white-space: nowrap; padding-top: 2px; }
.cc-note__title { display: block; font-size: 13px; font-weight: 600; color: var(--fg1); }
.cc-note__body  { display: block; font-size: 12px; color: var(--fg2); margin-top: 2px; }

/* -------------------------------------------------------------- 7. SCREENS */

/* -- two-column bodies --------------------------------------------------- */

.cc-split          { display: grid; gap: 16px; align-items: start; }
.cc-split--16-10   { grid-template-columns: 1.6fr 1fr; }
.cc-split--17-10   { grid-template-columns: 1.7fr 1fr; }
.cc-split--14-10   { grid-template-columns: 1.4fr 1fr; gap: 14px; }
.cc-split--13-10   { grid-template-columns: 1.3fr 1fr; gap: 14px; }
.cc-split--12-10   { grid-template-columns: 1.2fr 1fr; }
.cc-split--2       { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.cc-split--3       { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cc-narrow         { max-width: 1000px; }
.cc-narrow--thread { max-width: 1150px; }

/* -- login --------------------------------------------------------------- */

/* Login renders inside main.cc-plain (no padding -- see header.tpl), so the
   split fills the viewport with NO negative margins. Do not "fix" this by
   bleeding out of .cc-body; login never renders there. */
.cc-login { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100vh; }
@media (max-width: 900px) {
  .cc-login { grid-template-columns: 1fr; min-height: 0; }
  .cc-login__brand { padding: 32px; gap: 24px; }
  .cc-login__pitch h1 { font-size: 30px; }
}
.cc-login__brand {
  background: var(--neutral-900); color: var(--neutral-0); padding: 56px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.cc-login__brand img { width: 200px; height: auto; object-fit: contain; display: block; }
.cc-login__pitch { display: flex; flex-direction: column; gap: 20px; max-width: 420px; }
.cc-login__pitch h1 {
  font-family: var(--font-display); font-weight: 700; font-size: 44px;
  line-height: 1.05; letter-spacing: var(--tracking-tight); color: var(--neutral-0);
}
.cc-login__pitch p { font-size: 16px; line-height: 1.65; color: rgba(255, 255, 255, .62); }
.cc-login__foot { font-size: 12px; color: rgba(255, 255, 255, .38); }
.cc-login__form {
  background: var(--surface); display: flex; align-items: center;
  justify-content: center; padding: 48px;
}
.cc-login__form-inner { width: 100%; max-width: 360px; display: flex;
                        flex-direction: column; gap: 20px; }
.cc-or { display: flex; align-items: center; gap: 12px; color: var(--fg3); font-size: 12px; }
.cc-or::before, .cc-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* -- protection panel ---------------------------------------------------- */

.cc-protect { display: flex; flex-direction: column; gap: 14px; padding: 18px; }
.cc-protect .cc-sect { color: rgba(255, 255, 255, .5); }
.cc-protect__figure { font-family: var(--font-display-num); font-weight: 800;
                      font-size: 38px; line-height: 1; color: var(--rail-fg); }
.cc-protect__line { font-size: 13px; color: rgba(255, 255, 255, .6); margin-top: 4px; }
.cc-spark { display: flex; align-items: flex-end; gap: 4px; height: 56px; }
.cc-spark__bar { flex: 1; border-radius: 3px; background: var(--rail-spark-idle); }
.cc-spark__bar--hot { background: var(--red-400); }

/* -- service detail ------------------------------------------------------ */

.cc-detail__head { display: flex; align-items: flex-start; justify-content: space-between;
                   gap: 20px; flex-wrap: wrap; }
.cc-detail__id { display: flex; gap: 14px; align-items: center; }
.cc-conn { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
           background: var(--border); border: 1px solid var(--border);
           border-radius: var(--r-sm); overflow: hidden; }
.cc-conn__cell { background: var(--surface); padding: 12px 14px; }
.cc-conn__k { font-size: 11px; color: var(--fg3); }
.cc-conn__v { font-family: var(--font-mono); font-size: 13px; color: var(--fg1);
              margin-top: 3px; word-break: break-all; }

.cc-plan { background: var(--surface); border: 1px solid var(--border);
           border-radius: var(--r-md); padding: 18px; }
.cc-plan--current { box-shadow: 0 0 0 3px rgba(42, 41, 40, .06); }
.cc-plan--popular { border-color: var(--red-300); box-shadow: 0 0 0 3px rgba(167, 62, 62, .12); }
.cc-plan__price { font-family: var(--font-display-num); font-weight: 800;
                  font-size: 28px; color: var(--fg1); }
.cc-plan__per { font-size: 13px; color: var(--fg3); }
.cc-plan__delta { font-size: 12px; color: var(--fg3); margin-top: 4px; }
.cc-plan__specs { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.cc-spec { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--fg2); }
.cc-spec svg { stroke: var(--success); stroke-width: 2.4; fill: none;
               stroke-linecap: round; width: 14px; height: 14px; flex: 0 0 auto; }

/* -- invoice ------------------------------------------------------------- */

.cc-inv__head { display: flex; justify-content: space-between; gap: 24px;
                padding: 24px 26px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.cc-inv__logo { height: 30px; width: auto; display: block; }
.cc-inv__from { font-size: 12px; color: var(--fg3); line-height: 1.7; margin-top: 10px; }
.cc-inv__no { font-family: var(--font-display-num); font-weight: 800;
              font-size: 30px; color: var(--fg1); line-height: 1.1; }
.cc-inv__dates { font-size: 12px; color: var(--fg2); line-height: 1.7; margin-top: 8px; }
.cc-inv__lines { padding: 0 26px 8px; }
.cc-inv__lrow { display: grid; grid-template-columns: 3fr .7fr 1fr; gap: 14px;
                padding: 14px 0; border-bottom: 1px solid var(--border); align-items: start; }
.cc-inv__lhead { display: grid; grid-template-columns: 3fr .7fr 1fr; gap: 14px;
                 padding: 10px 0; border-bottom: 1px solid var(--border);
                 font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-wide);
                 text-transform: uppercase; color: var(--fg3); }
.cc-inv__lname { font-size: 13px; font-weight: 600; color: var(--fg1); }
.cc-inv__lplain { font-size: 12px; color: var(--fg2); margin-top: 3px; line-height: 1.6; }
.cc-inv__totals { display: flex; justify-content: flex-end; padding: 16px 26px 24px; }
.cc-inv__totals-inner { width: 290px; display: flex; flex-direction: column; gap: 9px; }
.cc-inv__trow { display: flex; justify-content: space-between; font-size: 13px; color: var(--fg2); }
.cc-inv__trow--credit { color: var(--teal-700); }
.cc-inv__balance { display: flex; justify-content: space-between; align-items: baseline;
                   padding-top: 10px; border-top: 1px solid var(--border); }
.cc-inv__balance-figure { font-family: var(--font-display-num); font-weight: 800;
                          font-size: 24px; color: var(--fg1); }
/* WHMCS's gateway-generated pay button renders stock Bootstrap markup --
   re-skin it into the design's full-width red primary. */
.cc-invoice-paybtn { margin-top: 4px; }
.cc-invoice-paybtn .btn,
.cc-invoice-paybtn input[type="submit"],
.cc-invoice-paybtn button {
  display: block; width: 100%; padding: 12px; border: 0;
  border-radius: var(--r-sm); cursor: pointer;
  background: var(--red-500); color: var(--neutral-0);
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  transition: opacity var(--t-fast);
}
.cc-invoice-paybtn .btn:hover,
.cc-invoice-paybtn input[type="submit"]:hover,
.cc-invoice-paybtn button:hover { opacity: .9; color: var(--neutral-0); }

.cc-pay { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.cc-pay__tile {
  padding: 11px 6px; text-align: center; border: 1px solid var(--border);
  border-radius: var(--r-sm); font-size: 11.5px; font-weight: 600;
  color: var(--fg2); background: var(--surface); cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.cc-pay__tile:hover { border-color: var(--border-strong); }
.cc-pay__tile.is-selected { border-color: var(--red-500); color: var(--red-600); background: var(--red-50); }

/* -- ticket thread ------------------------------------------------------- */

.cc-msg { border-radius: var(--r-md); padding: 16px; }
.cc-msg--client { background: var(--bg-muted); }
.cc-msg--staff  { background: var(--surface); border: 1px solid var(--border); }
.cc-msg__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cc-msg__who { font-size: 13px; font-weight: 600; color: var(--fg1); }
.cc-msg__role { font-size: 11px; color: var(--fg3); }
.cc-msg__when { font-family: var(--font-mono); font-size: 11px; color: var(--fg3); }
.cc-msg__body { font-size: 13px; line-height: 1.7; color: var(--fg1); white-space: pre-line; }
.cc-msg__body img { max-width: 100%; height: auto; }
.cc-msg pre, .cc-log {
  margin: 12px 0 0; padding: 12px 14px; background: var(--log-bg);
  color: var(--log-fg); border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6; overflow-x: auto;
}
.cc-msg__avatar {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: var(--r-pill);
  color: var(--neutral-0); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display-num); font-weight: 700; font-size: 11px;
}
.cc-msg__avatar--client { background: var(--teal-600); }
.cc-msg__avatar--staff  { background: var(--red-500); }

/* -- checkout ------------------------------------------------------------ */

.cc-opt {
  border: 1px solid var(--border); background: var(--surface);
  border-radius: 10px; padding: 13px; cursor: pointer; display: block;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.cc-opt:hover { border-color: var(--border-strong); }
.cc-opt.is-selected { border-color: var(--red-500); background: var(--red-50); }
.cc-opt__label { font-size: 13px; font-weight: 600; color: var(--fg1); }
.cc-opt__sub { font-size: 12px; color: var(--fg2); margin-top: 4px; line-height: 1.5; }
.cc-opt__price { font-family: var(--font-display-num); font-weight: 700;
                 font-size: 13px; color: var(--fg1); margin-top: 8px; }
.cc-opt__tick { width: 16px; height: 16px; flex: 0 0 auto; border-radius: var(--r-pill);
                border: 1px solid var(--border-strong); display: flex;
                align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
.cc-opt.is-selected .cc-opt__tick { background: var(--red-500); border-color: var(--red-500);
                                    color: var(--neutral-0); }
.cc-optgrid { display: grid; gap: 10px; }
.cc-optgrid--2 { grid-template-columns: repeat(2, 1fr); }
.cc-optgrid--3 { grid-template-columns: repeat(3, 1fr); }
.cc-optgrid--4 { grid-template-columns: repeat(4, 1fr); }
.cc-sticky { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 14px; }
.cc-due { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; }
.cc-due__figure { font-family: var(--font-display-num); font-weight: 800;
                  font-size: 26px; color: var(--fg1); }

/* -- mobile sticky pay bar (invoice view) -------------------------------- */

.cc-paybar {
  display: none; position: fixed; left: 0; right: 0; z-index: 49;
  bottom: calc(48px + env(safe-area-inset-bottom, 0px));
  align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 16px; background: var(--surface);
  border-top: 1px solid var(--border);
}
.cc-paybar__label { font-size: 11px; color: var(--fg3); }
.cc-paybar__amt { font-family: var(--font-display-num); font-weight: 800;
                  font-size: 18px; color: var(--fg1); }

/* -- mobile: page-head + identity-cell tweaks ----------------------------- */
/* The full stacked-cards treatment lives in section 8 (MOBILE). This block
   deliberately carries NO .cc-tbl__row / .cc-tbl__head rules -- an earlier
   copy here fought the section-8 rules at equal specificity, and the
   later-in-file flex-column rule resurrected the "hidden" table header. */

@media (max-width: 900px) {
  /* The identity cell owns its own line; small cells flow beside each other. */
  .cc-cols--dash > :first-child,
  .cc-cols--services > :first-child,
  .cc-cols--domains > :first-child,
  .cc-cols--ledger > :first-child,
  .cc-cols--invoices > :nth-child(2),
  .cc-cols--tickets > :nth-child(2),
  .cc-cols--emails > :nth-child(2) { flex: 1 1 100%; min-width: 0; }

  .cc-pagehead { flex-wrap: wrap; gap: 14px; }
}

/* -- network status ------------------------------------------------------ */

.cc-pop__figures { display: flex; gap: 24px; margin-top: 14px; flex-wrap: wrap; }
.cc-pop__k { font-size: 11px; color: var(--fg3); }
.cc-pop__v { font-family: var(--font-display-num); font-weight: 800;
             font-size: 20px; color: var(--fg1); }
.cc-incident { padding: 16px 18px; border-bottom: 1px solid var(--border); display: flex; gap: 14px; }
.cc-incident:last-child { border-bottom: 0; }
.cc-incident__title { font-size: 13px; font-weight: 600; color: var(--fg1); }
.cc-incident__body { font-size: 13px; color: var(--fg2); margin-top: 4px; line-height: 1.6; }
.cc-incident__when { font-family: var(--font-mono); font-size: 11px; color: var(--fg3); margin-top: 6px; }

/* -- profile ------------------------------------------------------------- */

.cc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cc-method { display: flex; align-items: center; gap: 14px; padding: 13px 14px;
             border: 1px solid var(--border); border-radius: 10px; }
.cc-method__brand {
  width: 38px; height: 26px; flex: 0 0 auto; border-radius: 5px; background: var(--bg-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: var(--fg2);
}
.cc-seg { display: inline-flex; padding: 3px; background: var(--bg-muted); border-radius: var(--r-pill); }
.cc-seg__opt { padding: 6px 16px; border-radius: var(--r-pill); font-size: 12px;
               font-weight: 600; color: var(--fg3); text-decoration: none; border: 0;
               background: transparent; cursor: pointer; font-family: var(--font-body); }
.cc-seg__opt.is-active { background: var(--surface); font-weight: 700;
                         color: var(--fg1); box-shadow: var(--shadow-xs); }

/* --------------------------------------------------------------- 8. MOBILE */

.cc-burger, .cc-tabbar, .cc-drawer, .cc-drawer__scrim { display: none; }

@media (max-width: 900px) {
  .cc-rail { display: none; }

  .cc-burger {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px;
    background: var(--bg-muted); border: 0; color: var(--fg1); cursor: pointer;
  }
  .cc-head { padding: 12px 18px; gap: 12px; }
  .cc-head__right { gap: 8px; }
  .cc-user__id, .cc-search .cc-kbd { display: none; }
  .cc-search { max-width: none; }
  .cc-body { padding: 20px 18px calc(64px + env(safe-area-inset-bottom, 0px) + 20px); }

  /* The switcher panel is fixed 296px on desktop; inside the 268px drawer it
     would be clipped by the drawer's overflow, so it fills the drawer instead. */
  .cc-drawer .cc-switch__panel { width: 100%; min-width: 0; }

  /* Drawer: the full nav, the switcher and the credit card. */
  .cc-drawer {
    display: flex; flex-direction: column; gap: 22px;
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    width: 268px; max-width: 86vw; padding: 20px 14px;
    background: var(--rail-bg); color: var(--rail-fg); overflow-y: auto;
    transform: translateX(-100%); transition: transform var(--t-fast) ease-out;
  }
  .cc-drawer.is-open { transform: translateX(0); }
  .cc-drawer__scrim { display: block; position: fixed; inset: 0; z-index: 55;
                      background: rgba(28, 27, 26, .5); opacity: 0;
                      pointer-events: none; transition: opacity var(--t-fast); }
  .cc-drawer__scrim.is-open { opacity: 1; pointer-events: auto; }

  /* Bottom tab bar: the five places people go. */
  .cc-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--surface); border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .cc-tabbar__item {
    flex: 1; height: 48px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px;
    color: var(--fg3); text-decoration: none; position: relative;
    font-size: 10.5px; font-weight: 600;
  }
  .cc-tabbar__item:hover { color: var(--fg2); text-decoration: none; }
  .cc-tabbar__item.is-active { color: var(--red-500); font-weight: 700; }
  .cc-tabbar__dot { position: absolute; top: 2px; right: 24px; width: 7px; height: 7px;
                    border-radius: var(--r-pill); background: var(--red-500); }

  /* Tables become stacked cards -- nothing behind a horizontal scroll. */
  .cc-tbl__scroll { overflow: visible; }
  .cc-tbl__row,
  .cc-cols--dash, .cc-cols--services, .cc-cols--invoices,
  .cc-cols--tickets, .cc-cols--domains, .cc-cols--ledger, .cc-cols--emails,
  .cc-cols--aff, .cc-cols--quotes {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 8px; min-width: 0; padding: 14px 16px;
  }
  /* AFTER the flex-column rule above: the header div carries a .cc-cols--*
     class too, and at equal specificity the later declaration wins -- put
     display:none before it and the "hidden" header comes back stacked. */
  .cc-tbl__head { display: none; }
  .cc-tbl__actions { justify-content: stretch; }
  .cc-tbl__actions .cc-btn { flex: 1; min-height: 44px; }
  .cc-cell--label::before {
    content: attr(data-label); display: block;
    font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-wide);
    text-transform: uppercase; color: var(--fg3); margin-bottom: 2px;
  }

  /* One column everywhere. */
  .cc-split, .cc-stats, .cc-stats--3, .cc-fields, .cc-conn,
  .cc-optgrid--2, .cc-optgrid--3, .cc-optgrid--4, .cc-login { grid-template-columns: 1fr; }
  .cc-split--3 { grid-template-columns: repeat(2, 1fr); }
  .cc-stats { grid-template-columns: repeat(2, 1fr); }
  .cc-login__brand { padding: 32px; }
  .cc-login__pitch h1 { font-size: 30px; }
  .cc-login__form { padding: 32px 22px; }
  .cc-sticky { position: static; }
  .cc-field--wide { grid-column: auto; }
  .cc-inv__totals-inner { width: 100%; }
  .cc-inv__head { padding: 20px; }
  .cc-inv__lines { padding: 0 20px 8px; }
  .cc-inv__totals { padding: 16px 20px 20px; }
  .cc-h1 { font-size: 26px; }
  .cc-h2 { font-size: 24px; }

  /* Primary actions go full width. */
  .cc-btn--mobile-block { width: 100%; min-height: 44px; }

  /* Sticky bottom pay bar for invoice + checkout. Geometry lives on the base
     .cc-paybar rule (safe-area-aware bottom offset above the tab bar) -- this
     block only turns it on and sizes the button. */
  .cc-paybar { display: flex; box-shadow: var(--shadow-md); }
  .cc-paybar .cc-btn { flex: 1; min-height: 44px; }
}

@media (max-width: 560px) {
  .cc-stats { grid-template-columns: 1fr; }
  .cc-split--3 { grid-template-columns: 1fr; }
  .cc-pop__figures { gap: 16px; }
}

/* Print: the invoice is the one thing people print. */
@media print {
  .cc-rail, .cc-head, .cc-tabbar, .cc-paybar, .cc-banner, .cc-btn { display: none !important; }
  .cc-body { padding: 0; max-width: none; }
  .cc-card { border-color: var(--neutral-300); box-shadow: none; }
}

/* -------------------------------------------------- shell odds and ends -- */

.cc-app--plain { display: block; }
.cc-plain { flex: 1; }

.cc-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 20px 32px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--fg3);
}
.cc-foot__links { display: flex; gap: 16px; flex-wrap: wrap; }

.cc-returnadmin { position: fixed; right: 16px; bottom: 16px; z-index: 70; box-shadow: var(--shadow-md); }

@media (max-width: 900px) {
  .cc-foot { padding: 16px 18px; }
  .cc-returnadmin { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   ACCOUNT & IDENTITY SCREENS (team access, user settings, auth path)
   ========================================================================== */

/* -- confirm dialog (includes/cc-confirm.tpl) ----------------------------- */

.cc-dlg { position: fixed; inset: 0; z-index: 1080; display: flex; align-items: center; justify-content: center; padding: 20px; }
.cc-dlg[hidden] { display: none; }
.cc-dlg__scrim { position: absolute; inset: 0; background: rgba(20, 19, 18, .55); }
.cc-dlg__card {
  position: relative; width: 100%; max-width: 420px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: 22px 24px;
}
.cc-dlg__title { font-family: var(--font-display-num); font-weight: 700; font-size: 16px; color: var(--fg1); }
.cc-dlg__body  { margin-top: 8px; font-size: 13px; color: var(--fg2); line-height: 1.65; }

/* -- stock alert / flash skin --------------------------------------------
   includes/alert.tpl and flashmessage.tpl emit Bootstrap .alert markup from
   dozens of stock code paths; this retints all of them with theme tokens so
   they hold in both themes without touching every caller. */

.cc .alert {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 13px 16px; font-size: 13px; line-height: 1.6;
  background: var(--bg-subtle); color: var(--fg1);
}
.cc .alert a { font-weight: 600; }
.cc .alert ul { margin: 6px 0 0; padding-left: 18px; }
.cc .alert-danger  { background: var(--danger-bg);  border-color: var(--danger);  color: var(--fg1); }
.cc .alert-success { background: var(--success-bg); border-color: var(--success); color: var(--fg1); }
.cc .alert-warning { background: var(--warning-bg); border-color: var(--warning); color: var(--fg1); }
.cc .alert-info    { background: var(--info-bg);    border-color: var(--info);    color: var(--fg1); }
[data-theme="dark"] .cc .alert-danger,
[data-theme="dark"] .cc .alert-success,
[data-theme="dark"] .cc .alert-warning,
[data-theme="dark"] .cc .alert-info { background: var(--bg-subtle); }

/* -- Bootstrap system modal skin (#modalAjax, 2FA setup, etc.) ------------ */

.cc .modal-content {
  background: var(--surface); color: var(--fg1);
  border: 1px solid var(--border); border-radius: var(--r-md);
}
.cc .modal-header, .cc .modal-footer { border-color: var(--border); }
/* twenty-one's theme.min.css paints .modal-header light grey -- retint, or
   the title is unreadable in dark mode. */
.cc .modal-header { background: var(--surface); border-radius: var(--r-md) var(--r-md) 0 0; }
.cc .modal-content .btn-primary, .cc .modal-content .btn-success {
  background: var(--cta-bg); border-color: var(--cta-bg); color: var(--cta-fg);
}
.cc .modal-content .btn-default, .cc .modal-content .btn-secondary {
  background: var(--surface); color: var(--fg1); border: 1px solid var(--border);
}
.cc .modal-header .close { color: var(--fg2); text-shadow: none; opacity: .8; }
.cc .modal-title { font-family: var(--font-display-num); font-weight: 700; font-size: 16px; color: var(--fg1); }
.cc .modal-body { font-size: 13px; color: var(--fg1); }
.cc .modal-content .form-control { background: var(--surface); color: var(--fg1); border-color: var(--border); }

/* -- password-strength meters (includes/pwstrength.tpl + register) -------- */

.cc .progress { background: var(--bg-muted); border-radius: var(--r-pill); }

/* -- auth-path pages (2FA challenge, password reset, verify email) --------
   These render module- or core-emitted Bootstrap controls we don't author;
   the .cc-auth scope maps them onto the theme's input/button look. */

.cc-auth { max-width: 440px; margin: 4vh auto 0; }
.cc-auth--wide { max-width: 720px; }
.cc-auth .form-control,
.cc-auth input[type="text"], .cc-auth input[type="password"], .cc-auth input[type="email"] {
  display: block; width: 100%; height: auto; padding: 11px 13px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font-family: var(--font-body); font-size: 13px;
  background: var(--surface); color: var(--fg1); box-shadow: none;
}
.cc-auth .form-control:focus { outline: 0; border-color: var(--link); box-shadow: none; }
.cc-auth .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; border-radius: var(--r-sm); border: 1px solid transparent;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  cursor: pointer; text-decoration: none; box-shadow: none;
}
.cc-auth .btn-primary, .cc-auth .btn-success {
  background: var(--cta-bg); color: var(--cta-fg); border-color: var(--cta-bg);
}
.cc-auth .btn-default, .cc-auth .btn-secondary {
  background: var(--surface); color: var(--fg1); border-color: var(--border);
}
.cc-auth .btn-block { display: flex; width: 100%; }

/* user-switch-account rows: stock .select-account a (0,1,1) is display:block
   in theme.min.css and outranks .cc-row -- restate the flex row. */
.cc .select-account a.cc-row { display: flex; }

/* -- one-time codes (2FA backup code) ------------------------------------- */

.cc-bigcode {
  font-family: var(--font-mono); font-size: 22px; font-weight: 700;
  letter-spacing: .12em; text-align: center; color: var(--fg1);
  background: var(--bg-subtle); border: 1px dashed var(--border-strong);
  border-radius: var(--r-md); padding: 16px 18px; user-select: all;
}

/* -- ticket feedback 1-10 rating row -------------------------------------- */

.cc-rate { display: flex; gap: 4px; }
.cc-rate__opt { flex: 1; }
.cc-rate__opt input { position: absolute; opacity: 0; pointer-events: none; }
.cc-rate__opt span {
  display: flex; align-items: center; justify-content: center;
  padding: 9px 0; border: 1px solid var(--border); border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 600;
  color: var(--fg2); cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.cc-rate__opt:hover span { border-color: var(--border-strong); color: var(--fg1); }
.cc-rate__opt input:checked + span {
  background: var(--cta-bg); border-color: var(--cta-bg); color: var(--cta-fg);
}
.cc-rate__opt input:focus-visible + span { outline: 2px solid var(--link); outline-offset: 1px; }
@media (max-width: 560px) { .cc-rate { flex-wrap: wrap; } .cc-rate__opt { flex: 1 0 17%; } }

/* -- stock Bootstrap widget skin ------------------------------------------
   Screens still carrying twenty-one markup (pay-method capture, gateway
   pages) render inside the shell; retint their surfaces with tokens so dark
   mode holds without rewriting rarely-reachable flows. Buttons keep their
   Bootstrap classes on purpose -- the cart's own skin styles those. */

.cc .card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); color: var(--fg1);
}
.cc .card .card-title { color: var(--fg1); font-family: var(--font-display-num); font-weight: 700; }
.cc .card .text-muted, .cc .card .form-text { color: var(--fg3) !important; }
.cc .form-control, .cc .custom-select {
  background: var(--surface); color: var(--fg1); border-color: var(--border);
}
.cc .form-control:focus, .cc .custom-select:focus {
  background: var(--surface); color: var(--fg1);
  border-color: var(--link); box-shadow: none;
}
.cc .form-control::placeholder { color: var(--fg3); }
.cc .table { color: var(--fg1); }
.cc .table td, .cc .table th { border-color: var(--border); }
.cc .table-striped tbody tr:nth-of-type(odd) { background: var(--bg-subtle); }
.cc .list-group-item { background: var(--surface); border-color: var(--border); color: var(--fg1); }
.cc .well { background: var(--bg-subtle); border: 1px solid var(--border); }