@font-face { font-family:'Sora'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/sora-600.woff2') format('woff2'); }
  @font-face { font-family:'Sora'; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/fonts/sora-700.woff2') format('woff2'); }
  @font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/inter-400.woff2') format('woff2'); }
  @font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/fonts/inter-600.woff2') format('woff2'); }
  @font-face { font-family:'Anton'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/anton-400.woff2') format('woff2'); }

  :root{
    /* brand chrome — pinned to the live site's fixed light identity, never inverts */
    --brand-bg:#ffffff;
    --brand-text:#0b0f17;
    --brand-muted:#535863;
    --brand-border:#e4e5ea;
    --brand-accent:#ff2aa6;
    --brand-accent-2:#d91a87;
    --brand-indigo:#4f47eb;

    /* content tokens — these do adapt to viewer theme */
    --bg:#ffffff;
    --surface:#f6f5fb;
    --surface-2:#f6f5fb;
    --pink-soft:#ffe6f5;
    --text:#0b0f17;
    --muted:#535863;
    --muted-2:#64748b;
    --border:#e3e1ee;
    --accent:#ff2aa6;
    --accent-2:#d91a87;
    --indigo:#4f47eb;
    --focus:#4f47eb;
    --shadow:0 1px 2px rgba(11,15,23,.04), 0 8px 24px -12px rgba(11,15,23,.12);

    /* semantic tokens for status pills, warning/error boxes, etc. — component
       CSS below reads these instead of literal hex so the admin-console dark
       theme (further down) only has to redefine the tokens, once, in one place. */
    --error-bg:#fdecea; --error-border:#f5c2bd; --error-text:#b42318;
    --status-pending-bg:#fff3d6; --status-pending-text:#92620a;
    --status-resolved-bg:#e2f5e9; --status-resolved-text:#166534;
    --status-closed-bg:#eef0f3; --status-closed-text:#4b5563;
    --status-shipped-bg:#e0edfb; --status-shipped-text:#1d4e89;
    --warn-bg:#fef3e2; --warn-border:#f0c674; --warn-text:#92650a;
    --overdue-border:#f3a6a6; --overdue-bg:#fde8e8; --overdue-text:#991b1b;
    --queue-pending-border:#f1d28a; --queue-pending-bg:#fff4d6;
    --queue-resolved-border:#b7dfc3; --queue-resolved-bg:#e7f6ec;
    --internal-bg:#fdf6e3; --internal-border:#ead9a7; --internal-text:#4d3b12;
    --internal-badge-bg:#f3dfad; --internal-badge-text:#6f4f00;
    --success-text:#1f6b3a;
  }

  /* Disguised Alpha has no dark mode — the real site is a fixed light identity
     (only the ticker and footer are dark, and those are pinned separately below).
     Storefront and customer-portal pages intentionally do not adapt to the
     viewer's OS/theme preference, so they always match the brand instead of
     inventing a look that doesn't exist. The admin console (body.admin-app,
     our own internal tool, not part of the storefront brand) is the one
     exception — see the dark-mode block near the end of this file. */
  :root[data-theme="dark"],
  :root[data-theme="light"]{
    --bg:#ffffff; --surface:#f6f5fb; --surface-2:#f6f5fb; --pink-soft:#ffe6f5; --text:#0b0f17;
    --muted:#535863; --muted-2:#64748b; --border:#e3e1ee;
    --accent:#ff2aa6; --accent-2:#d91a87; --indigo:#4f47eb; --focus:#4f47eb;
    --shadow:0 1px 2px rgba(11,15,23,.04), 0 8px 24px -12px rgba(11,15,23,.12);
    --error-bg:#fdecea; --error-border:#f5c2bd; --error-text:#b42318;
    --status-pending-bg:#fff3d6; --status-pending-text:#92620a;
    --status-resolved-bg:#e2f5e9; --status-resolved-text:#166534;
    --status-closed-bg:#eef0f3; --status-closed-text:#4b5563;
    --status-shipped-bg:#e0edfb; --status-shipped-text:#1d4e89;
    --warn-bg:#fef3e2; --warn-border:#f0c674; --warn-text:#92650a;
    --overdue-border:#f3a6a6; --overdue-bg:#fde8e8; --overdue-text:#991b1b;
    --queue-pending-border:#f1d28a; --queue-pending-bg:#fff4d6;
    --queue-resolved-border:#b7dfc3; --queue-resolved-bg:#e7f6ec;
    --internal-bg:#fdf6e3; --internal-border:#ead9a7; --internal-text:#4d3b12;
    --internal-badge-bg:#f3dfad; --internal-badge-text:#6f4f00;
    --success-text:#1f6b3a;
  }

  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter', system-ui, -apple-system, sans-serif;
    font-size:16.5px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; }
  h1,h2,h3{ font-family:'Sora', system-ui, sans-serif; text-wrap:balance; margin:0; letter-spacing:-.01em; }
  .kicker{
    display:inline-flex; align-items:center; gap:.5em;
    font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
    color:var(--accent-2);
  }
  .kicker::before{ content:""; width:1.4em; height:2px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); border-radius:2px; }
  .wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }
  .mono{ font-family: ui-monospace, "SF Mono", "Space Mono", Menlo, monospace; font-variant-numeric:tabular-nums; }

  /* ---------- brand chrome ---------- */
  /* promo ticker — brand-fixed black (#05070C), never inverts with viewer theme */
  .ticker{
    background:#05070c; color:#fff; overflow:hidden;
    font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  }
  .ticker__track{
    display:inline-flex; align-items:center; white-space:nowrap;
    padding:8px 0; will-change:transform;
    animation:ticker-scroll 38s linear infinite;
  }
  .ticker__seq{ display:inline-flex; align-items:center; gap:30px; padding-right:30px; }
  .ticker__seq > span{ display:inline-flex; align-items:center; gap:8px; }
  .ticker__pill{
    background:linear-gradient(90deg,#ff2aa6,#d91a87); color:#fff; font-weight:700;
    padding:4px 14px; border-radius:200px;
  }
  .ticker .hl{ color:#ff2aa6; font-weight:700; }
  .ticker__dot{ color:#ff2aa6; font-size:.5rem; }
  @keyframes ticker-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  @media (prefers-reduced-motion:reduce){ .ticker__track{ animation:none; } }

  header.nav{
    position:sticky; top:0; z-index:40;
    background:var(--brand-bg); border-bottom:1px solid var(--brand-border);
  }
  .nav__row{
    max-width:1180px; margin:0 auto; padding:12px 24px;
    display:flex; align-items:center; gap:28px;
  }
  .nav__brand img{ height:38px; width:auto; }
  .nav__menu{ display:flex; align-items:center; gap:22px; list-style:none; margin:0; padding:0; flex:1; }
  .nav__menu a{
    text-decoration:none; color:var(--brand-text); font-size:.93rem; font-weight:500;
    display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  }
  .nav__menu a.current{ color:var(--brand-accent); font-weight:600; }
  .nav__badge{
    font-size:.62rem; font-weight:700; letter-spacing:.04em; color:#fff;
    background:linear-gradient(135deg,var(--brand-accent),var(--brand-accent-2));
    padding:2px 6px; border-radius:200px;
  }
  .nav__right{ display:flex; align-items:center; gap:16px; }
  .nav__search{
    display:flex; align-items:center; gap:8px;
    border:1px solid var(--brand-border); border-radius:200px;
    padding:7px 14px; color:var(--brand-muted); font-size:.85rem;
  }
  .nav__search input{ border:0; outline:0; background:transparent; font-size:.85rem; width:150px; font-family:inherit; color:var(--brand-text); }
  .nav__icon{ color:var(--brand-text); position:relative; }
  .nav__cart-count{
    position:absolute; top:-6px; right:-8px; background:var(--brand-accent); color:#fff;
    font-size:.62rem; font-weight:700; line-height:1; padding:2px 5px; border-radius:200px;
  }
  .nav__notification{ position:relative; }
  .nav__notification-button{
    display:flex; align-items:center; justify-content:center; position:relative; padding:4px;
    border:0; background:transparent; color:var(--brand-text); cursor:pointer;
  }
  .nav__notification-count{
    position:absolute; top:-5px; right:-7px; background:var(--brand-accent); color:#fff;
    font-size:.62rem; font-weight:700; line-height:1; padding:2px 5px; border-radius:200px;
  }
  .nav__notification-count[hidden], .nav__notifications-menu[hidden]{ display:none; }
  .nav__notifications-menu{
    position:absolute; right:0; top:calc(100% + 12px); width:min(340px, calc(100vw - 28px));
    background:var(--brand-bg); border:1px solid var(--brand-border); border-radius:12px;
    box-shadow:0 16px 40px rgba(11,15,23,.16); padding:12px; z-index:60;
  }
  .nav__notifications-menu > strong{ display:block; font-family:'Sora',sans-serif; font-size:.86rem; margin:2px 4px 8px; }
  .nav__notifications-list{ display:flex; flex-direction:column; gap:4px; }
  .nav__notification-item{
    display:flex; flex-direction:column; gap:3px; width:100%; text-align:left; border:0; border-radius:8px;
    background:transparent; color:var(--brand-text); padding:9px 10px; cursor:pointer; font:inherit; font-size:.8rem;
  }
  .nav__notification-item:hover, .nav__notification-item.is-unread{ background:var(--pink-soft); }
  .nav__notification-item small{ color:var(--brand-muted); font-size:.68rem; }
  .nav__notifications-empty{ margin:0; padding:14px 8px; color:var(--brand-muted); font-size:.8rem; }
  .nav__hamburger{
    display:none; width:38px; height:38px; padding:8px; border:1px solid var(--brand-border); border-radius:8px;
    background:var(--brand-bg); cursor:pointer; flex-direction:column; justify-content:center; gap:4px;
  }
  .nav__hamburger span{ display:block; width:100%; height:2px; border-radius:2px; background:var(--brand-text); }
  .nav__mobile-panel{ display:none; }
  @media (max-width:900px){
    .nav__row{ gap:12px; padding:10px 16px; }
    .nav__menu, .nav__search, .nav__right > .nav__textlink, .nav__right > .nav__icon{ display:none; }
    .nav__brand{ margin-right:auto; }
    .nav__right{ gap:10px; }
    .nav__hamburger{ display:flex; }
    .nav__mobile-panel:not([hidden]){
      display:flex; flex-direction:column; gap:2px; padding:8px 16px 14px;
      border-top:1px solid var(--brand-border); background:var(--brand-bg);
    }
    .nav__mobile-link{
      display:block; width:100%; padding:11px 8px; border:0; background:transparent; color:var(--brand-text);
      text-align:left; text-decoration:none; font:inherit; font-size:.92rem; font-weight:600; cursor:pointer;
    }
    .nav__mobile-link:hover{ color:var(--brand-accent); background:var(--pink-soft); border-radius:8px; }
  }

  /* ---------- hero ---------- */
  /* Matches the real site's .heroband exactly: #0A0A0B base + two soft pink
     radial gradients, verified against disguisedalpha.com/contact/'s live
     CSS — the storefront hero is genuinely dark, not the light panel this
     was originally built with. */
  .hero{
    background:#0A0A0B;
    background-image:
      radial-gradient(130% 130% at 78% 18%, rgba(255,42,166,.17), rgba(255,42,166,0) 55%),
      radial-gradient(90% 120% at 12% 100%, rgba(255,42,166,.08), rgba(0,0,0,0) 60%);
    color:#fff;
  }
  .hero__inner{ padding:64px 0 88px; display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:16px; }
  .hero p{ color:rgba(255,255,255,.72); }
  .hero__meta{ color:rgba(255,255,255,.6); }
  .hero__meta span:not(.sep){
    border:1px solid rgba(255,255,255,.16); border-radius:200px; padding:6px 14px;
    background:rgba(255,255,255,.04);
  }
  /* .h-display matches the real site's own hero-headline utility class
     (verified against disguisedalpha.com's live CSS: font-family, clamp,
     line-height, letter-spacing, uppercase are copied exactly) — the real
     site's marketing pages use Anton here, not Sora. */
  .h-display{
    font-family:'Anton', system-ui, sans-serif; font-weight:400;
    font-size:clamp(40px, 8vw, 96px); line-height:.92; letter-spacing:-.01em;
    text-transform:uppercase;
  }
  .hero h1{ max-width:16ch; }
  .hero p{ color:var(--muted); max-width:58ch; font-size:1.05rem; margin:0; }
  .pink{ color:var(--accent); }
  .hero__meta{ display:flex; flex-wrap:wrap; gap:8px 10px; color:var(--muted-2); font-size:.86rem; align-items:center; }
  .hero__meta .sep{ color:var(--accent); }

  /* Entrance animation — also copied from the real site's own hero (same
     keyframe name, easing, and stagger pattern), not invented from scratch. */
  @keyframes heroReveal{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:translateY(0); } }
  .hero .kicker{ animation:heroReveal 1s cubic-bezier(.2,.8,.2,1) backwards; }
  .hero h1{ animation:heroReveal 1.2s cubic-bezier(.2,.8,.2,1) backwards; animation-delay:.1s; }
  .hero p{ animation:heroReveal 1s cubic-bezier(.2,.8,.2,1) backwards; animation-delay:.4s; }
  .hero__meta{ animation:heroReveal 1s cubic-bezier(.2,.8,.2,1) backwards; animation-delay:.55s; }
  @media (prefers-reduced-motion:reduce){
    .hero .kicker, .hero h1, .hero p, .hero__meta{ animation:none; }
  }
  .search-box{
    margin-top:8px; width:100%; max-width:560px; position:relative;
  }
  .search-box input{
    width:100%; font-family:inherit; font-size:1rem; color:var(--text);
    padding:15px 20px 15px 46px; border-radius:12px; border:1px solid var(--border);
    background:var(--bg); box-shadow:var(--shadow);
  }
  .search-box input:focus{ outline:2px solid var(--focus); outline-offset:1px; }
  .search-box svg{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--muted-2); }
  .search-hint{ font-size:.8rem; color:var(--muted-2); }

  /* ---------- section headings ---------- */
  .sec-head{ display:flex; flex-direction:column; gap:12px; margin-bottom:30px; }
  .sec-head h2{ font-size:2.2rem; font-weight:700; }
  .sec-head p{ margin:0; color:var(--muted); font-size:1rem; max-width:60ch; }

  /* ---------- quick actions (self-service) ---------- */
  .quick{ padding:56px 0 24px; background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .quick__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
  @media (max-width:900px){ .quick__grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .quick__grid{ grid-template-columns:1fr; } }
  .qcard{
    background:var(--bg); border:1px solid var(--border); border-radius:14px;
    padding:24px; display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit;
    box-shadow:var(--shadow);
    transition:transform .15s ease, box-shadow .15s ease; position:relative;
  }
  .qcard:hover{ transform:translateY(-2px); }
  .qcard__icon{
    width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:var(--pink-soft); color:var(--accent); flex-shrink:0;
  }
  .qcard h3{ font-size:1.02rem; font-weight:600; font-family:'Inter',sans-serif; }
  .qcard p{ margin:0; color:var(--muted); font-size:.87rem; flex:1; }
  .qcard__cta{ font-size:.85rem; font-weight:700; color:var(--accent); }
  .pill-new{
    position:absolute; top:16px; right:16px; font-size:.62rem; font-weight:700; letter-spacing:.04em;
    color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2)); padding:3px 8px; border-radius:200px;
  }

  /* ---------- topics / chips ---------- */
  .topics{ padding:56px 0 8px; }
  .topics__layout{ display:grid; grid-template-columns:320px 1fr; gap:44px; align-items:start; }
  @media (max-width:960px){ .topics__layout{ grid-template-columns:1fr; gap:24px; } }
  .topics__intro{ display:flex; flex-direction:column; gap:14px; }
  .topics__intro h2{ font-size:2.2rem; font-weight:700; }
  .topics__intro p{ margin:0; color:var(--muted); font-size:.95rem; }
  .browse-all{ color:var(--accent); font-weight:700; font-size:.95rem; text-decoration:none; }
  .topics__main .search-box{ max-width:none; margin:0 0 6px; }
  .topics__main .search-hint{ display:block; margin-bottom:16px; }
  .chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
  .chip{
    border:1px solid var(--border); background:var(--surface); color:var(--text);
    padding:8px 16px; border-radius:200px; font-size:.85rem; font-weight:500; cursor:pointer;
    font-family:inherit;
  }
  .chip[aria-pressed="true"]{
    background:linear-gradient(135deg,var(--accent),var(--accent-2)); border-color:transparent; color:#fff;
  }
  .chip:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

  /* ---------- faq — two-column grid, circular toggles ---------- */
  .faq{ columns:2; column-gap:16px; margin-bottom:8px; }
  @media (max-width:700px){ .faq{ columns:1; } }
  details.faq__item{
    border:1px solid var(--border); border-radius:14px; background:var(--bg); padding:6px 20px;
    margin:0 0 14px; break-inside:avoid;
  }
  details.faq__item summary{
    list-style:none; cursor:pointer; padding:16px 44px 16px 0; position:relative;
    font-weight:600; font-size:.98rem; font-family:'Inter',sans-serif;
  }
  details.faq__item summary::-webkit-details-marker{ display:none; }
  details.faq__item summary::after{
    content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%);
    width:28px; height:28px; border:1px solid var(--border); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:1.05rem; font-weight:400; line-height:1; color:var(--muted-2);
  }
  details.faq__item[open] summary::after{
    content:"×"; background:var(--accent); border-color:var(--accent); color:#fff;
  }
  .faq__a{ margin:0 0 18px; color:var(--muted); font-size:.92rem; max-width:70ch; }
  .faq__cat-tag{ display:none; }
  .faq-empty{ display:none; color:var(--muted-2); font-size:.9rem; padding:18px 0; }

  /* ---------- contact form + sidebar ---------- */
  .helpdesk{ padding:56px 0 16px; }
  .helpdesk__grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:28px; align-items:stretch; }
  @media (max-width:860px){ .helpdesk__grid{ grid-template-columns:1fr; } }
  .hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
  .btn--tab{ background:var(--border); border-color:var(--border); color:var(--muted); }
  .btn--tab:hover{ background:var(--bg); border-color:var(--accent); color:var(--text); }
  .guest-toggle{ display:flex; width:100%; margin-top:12px; font-size:.85rem; }
  .guest-form{ margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
  .guest-form > .fs{ margin:0 0 14px; font-size:.85rem; color:var(--muted-2); }
  .guest-form > small{ display:block; margin-top:4px; color:var(--muted-2); font-size:.78rem; }
  .guest-topics{
    display:flex; flex-wrap:nowrap; gap:8px; margin-bottom:18px;
    overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch;
  }
  .guest-topic{
    flex:0 0 auto; padding:8px 16px; border:1px solid var(--border); border-radius:999px; font-size:.82rem;
    font-weight:600; color:var(--muted); background:var(--bg); cursor:pointer; transition:all .15s;
    white-space:nowrap;
  }
  .guest-topic:hover{ border-color:var(--accent); color:var(--text); }
  .guest-topic.is-active{
    border-color:var(--accent); background:var(--pink-soft); color:var(--accent-2);
    box-shadow:inset 0 0 0 1px var(--accent);
  }
  .guest-sendbtn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; }
  .form-helper{ margin:12px 0 0; font-size:.8rem; color:var(--muted-2); text-align:center; }
  .support-status{
    margin:8px 0 0; font-size:.8rem; font-weight:600; color:var(--muted);
    display:flex; align-items:center; justify-content:center; gap:7px;
  }
  .support-status .dot{ width:8px; height:8px; border-radius:50%; background:var(--muted-2); flex-shrink:0; }
  .support-status.is-open .dot{ background:#16a34a; }
  .panel{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:28px; }
  .panel h2{ font-size:1.3rem; font-weight:700; margin-bottom:6px; }
  .panel > p.lead{ color:var(--muted); font-size:.9rem; margin:0 0 22px; }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
  @media (max-width:520px){ .field-row{ grid-template-columns:1fr; } }
  .field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
  .field[hidden]{ display:none; }
  .field label{ font-size:.8rem; font-weight:600; color:var(--text); white-space:nowrap; }
  .field small{ font-weight:400; color:var(--muted-2); }
  .field input, .field select, .field textarea{
    font-family:inherit; font-size:.92rem; color:var(--text); background:var(--bg);
    border:1px solid var(--border); border-radius:4px; padding:11px 13px;
  }
  .field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--focus); outline-offset:1px; }
  .field textarea{ resize:vertical; min-height:110px; font-family:inherit; }
  .file-drop{
    border:1px dashed var(--border); border-radius:4px; padding:16px; text-align:center;
    color:var(--muted-2); font-size:.85rem; cursor:pointer; background:var(--bg);
  }
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    border-radius:12px; padding:13px 22px; font-weight:600; font-size:.92rem; border:1px solid transparent;
    cursor:pointer; font-family:inherit; text-decoration:none;
    transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background-color .12s ease;
  }
  .btn:hover{ transform:translateY(-1px); box-shadow:0 6px 16px -8px rgba(11,15,23,.35); }
  .btn:active{ transform:translateY(0); box-shadow:none; }
  .btn--accent{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; width:100%; }
.btn--ghost{ background:transparent; border-color:var(--border); color:var(--text); }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent-2); }
.btn--pink-outline{ background:var(--pink-soft); border-color:var(--accent); color:var(--accent-2); width:100%; }
.btn--pink-outline:hover{ background:#ffd6ec; }
.btn--danger{ background:#b42318; border-color:#b42318; color:#fff; }
.btn--danger:hover{ background:#96190f; }
.btn[hidden]{ display:none; }
.btn:disabled{ opacity:.6; cursor:default; transform:none !important; box-shadow:none !important; }
  .ticket-success{
    display:none; background:var(--surface-2); border:1px solid var(--border); border-radius:12px;
    padding:18px 20px; font-size:.9rem;
  }
  .ticket-success b{ font-family:'Sora',sans-serif; }

  .info-stack{ display:flex; flex-direction:column; gap:14px; }
  .info-card{
    background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:18px 20px;
    display:flex; gap:14px; align-items:flex-start;
  }
  .info-card .ic{
    width:36px; height:36px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
    background:var(--pink-soft); color:var(--accent);
  }
  .info-card h4{ margin:0 0 2px; font-size:.92rem; font-weight:600; font-family:'Inter',sans-serif; }
  .info-card p{ margin:0; font-size:.84rem; color:var(--muted); }
  .info-card a{ text-decoration:none; color:var(--accent); font-weight:600; }
  .trust-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
  .trust-list li{ display:flex; gap:8px; font-size:.85rem; color:var(--muted); align-items:flex-start; }
  .trust-list svg{ color:var(--indigo); flex-shrink:0; margin-top:2px; }
  .compliance-note{ font-size:.78rem; color:var(--muted-2); border-top:1px solid var(--border); padding-top:14px; margin-top:4px; }
  .compliance-note a{ color:var(--indigo); font-weight:600; text-decoration:none; }

  /* ---------- compliance line (above footer) ---------- */
  .ruo-line{ padding:24px 0 48px; }
  .ruo-line p{
    margin:0; border:1px dashed var(--border); border-radius:12px; padding:16px 20px;
    font-size:.85rem; line-height:1.6; color:var(--muted);
  }
  .ruo-line b{ color:var(--text); }

  /* ---------- footer — brand-fixed dark (#05070C), never inverts with viewer theme ---------- */
  footer.foot{ background:#05070c; color:#fff; padding-top:64px; }
  .foot__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; padding-bottom:44px; }
  @media (max-width:760px){ .foot__grid{ grid-template-columns:repeat(2,1fr); } }
  .foot__col h5{ font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#ffffff; margin:0 0 16px; }
  .foot__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
  .foot__col a{ text-decoration:none; color:#87888c; font-size:.87rem; }
  .foot__col a:hover{ color:#ff2aa6; }
  .foot__pay{
    background:#151416; border:1px solid #2a292c; border-radius:14px;
    display:flex; flex-wrap:wrap; align-items:center; gap:10px;
    padding:18px 22px; margin-bottom:26px;
  }
  .foot__pay .pay-label{
    font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
    color:#87888c; margin-right:10px;
  }
  .pay-badge{
    background:#252328; border:1px solid #474647; border-radius:6px;
    padding:5px 12px; font-size:.72rem; font-weight:700; letter-spacing:.04em;
    text-transform:uppercase; color:#ffffff;
  }
  .foot__ruo{
    background:#1f0a1b; border-radius:12px;
    padding:16px 22px; margin-bottom:20px;
    font-size:.8rem; line-height:1.65; color:#bdbdbf;
  }
  .foot__ruo b{ color:#ff2aa6; }
  .foot__fda{ margin:0 0 36px; font-size:.78rem; line-height:1.65; color:#bdbdbf; max-width:80ch; }
  .foot__fda b{ color:#ffffff; }
  .foot__bottom{
    border-top:1px solid #1c1b1e; padding:24px 0 30px;
    display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap;
    font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:#87888c;
  }

  .flag-note{
    max-width:1180px; margin:0 auto 0; padding:10px 24px; font-size:.76rem; color:var(--muted-2);
  }
  @media (prefers-reduced-motion: reduce){ .qcard{ transition:none; } }

/* ---------- portal auth (login/signup) ---------- */
.auth-section{ padding:64px 0 96px; }
.auth-shell{ max-width:560px; margin:0 auto; }
.auth-shell .panel{ padding:32px; }
.form-error{
  background:var(--error-bg); border:1px solid var(--error-border); color:var(--error-text);
  border-radius:8px; padding:10px 14px; font-size:.85rem; margin:0 0 18px;
}

/* ---------- ticket status pill — shared convention: any page rendering a
   ticket status badge should use these classes instead of inventing new
   ones. pink=open, amber=pending, green=resolved, gray=closed/internal. ---------- */
.status-pill{
  display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:700;
  letter-spacing:.02em; padding:4px 10px; border-radius:200px; text-transform:capitalize;
  white-space:nowrap;
}
.status-pill--open{ background:var(--pink-soft); color:var(--accent-2); }
.status-pill--pending{ background:var(--status-pending-bg); color:var(--status-pending-text); }
.status-pill--resolved{ background:var(--status-resolved-bg); color:var(--status-resolved-text); }
.status-pill--closed{ background:var(--status-closed-bg); color:var(--status-closed-text); }
/* Same gray as closed — used for internal-note bubbles/badges in ticket threads. */
.internal-note-pill{ background:var(--status-closed-bg); color:var(--status-closed-text); }

/* ---------- ticket priority pill — same shape as .status-pill, distinct
   palette so the two are never confused at a glance. low=quiet gray,
   normal=no badge needed visually (still rendered for scan consistency),
   high=amber, urgent=red (reuses the overdue tokens — a ticket already
   flagged both urgent AND overdue reads as one continuous warning color,
   not two competing ones). ---------- */
.priority-pill{
  display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:700;
  letter-spacing:.02em; padding:4px 10px; border-radius:200px; text-transform:capitalize;
  white-space:nowrap;
}
.priority-pill--low{ background:var(--status-closed-bg); color:var(--muted); }
.priority-pill--normal{ background:var(--status-closed-bg); color:var(--status-closed-text); }
.priority-pill--high{ background:var(--status-pending-bg); color:var(--status-pending-text); }
.priority-pill--urgent{ background:var(--overdue-bg); color:var(--overdue-text); }

/* ---------- admin console (ticket queue + detail) ---------- */
.admin-shell{ max-width:1180px; margin:0 auto; padding:48px 24px 96px; }
.admin-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.admin-head h1{ font-size:1.6rem; margin-top:4px; }
.admin-counts{ font-size:.9rem; color:var(--muted); margin:0; }
.admin-filters{ display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; margin-bottom:20px; padding:20px; }
.admin-filters .field{ margin-bottom:0; min-width:170px; }
.admin-filters .field--search{ flex:1; min-width:220px; }
/* overflow-x:auto (not the old overflow:hidden) so a narrow viewport gets a
   real horizontal scrollbar instead of the queue's 7 columns being clipped
   or squeezed illegible — min-width on the table forces that scrollbar to
   actually appear rather than columns silently shrinking past readable. */
.admin-table-wrap{ background:var(--bg); border:1px solid var(--border); border-radius:14px; overflow-x:auto; }
.admin-table{ width:100%; min-width:800px; border-collapse:collapse; font-size:.88rem; }
.admin-table th{
  text-align:left; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted-2); background:var(--surface); padding:12px 16px; border-bottom:1px solid var(--border);
}
.admin-table td{ padding:14px 16px; border-bottom:1px solid var(--border); vertical-align:top; }
.admin-table tbody tr:last-child td{ border-bottom:0; }
.admin-table tbody tr{ cursor:pointer; transition:background-color .1s ease; }
.admin-table tbody tr:hover{ background:var(--surface); }
.admin-table a.row-link{ text-decoration:none; color:var(--text); font-weight:600; }
.admin-table a.row-link:hover{ color:var(--accent); }
.row-sub{ font-size:.8rem; color:var(--muted-2); }
.admin-empty{ padding:40px 16px; text-align:center; color:var(--muted); }
.admin-empty::before{
  content:""; display:block; width:36px; height:36px; margin:0 auto 12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11Z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; opacity:.55;
}
.admin-th-check{ width:36px; }
.admin-table td.admin-td-check{ padding-right:0; }
.admin-bulkbar{
  display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; padding:10px 16px; margin-bottom:14px; font-size:.85rem; color:var(--muted);
}
.admin-bulkbar[hidden]{ display:none; }

/* ---------- customer portal ticket thread ---------- */
.msg-thread{
  display:flex; flex-direction:column; gap:14px; margin-top:14px;
}
.msg-bubble{
  max-width:70%; padding:14px 16px; border:1px solid var(--border); border-radius:14px;
  overflow-wrap:anywhere;
}
.msg-bubble--customer{ align-self:flex-start; background:var(--surface); }
.msg-bubble--agent{ align-self:flex-end; background:var(--pink-soft); }
.msg-body{ color:var(--text); white-space:pre-wrap; }
.msg-meta{ margin-top:7px; color:var(--muted-2); font-size:.74rem; }
.msg-bubble--agent .msg-meta{ text-align:right; }
@media (max-width:600px){ .msg-bubble{ max-width:88%; } }

/* ---------- admin-only ticket notes ---------- */
.msg-bubble--internal{
  align-self:stretch; max-width:100%; background:var(--internal-bg); border-color:var(--internal-border); color:var(--internal-text);
}
.internal-note-badge{
  display:inline-flex; align-items:center; margin-right:8px; padding:2px 7px; border-radius:200px;
  background:var(--internal-badge-bg); color:var(--internal-badge-text); font-size:.68rem; font-weight:700; letter-spacing:.02em;
}

/* ---------- checkbox fields (compliance confirmations, internal-note toggle) ---------- */
.field--checkbox label{
  display:flex; align-items:flex-start; gap:9px; font-size:.85rem; font-weight:400; color:var(--muted);
  cursor:pointer;
}
.field--checkbox input[type="checkbox"]{ margin-top:3px; flex-shrink:0; width:16px; height:16px; accent-color:var(--accent); }

/* ---------- inline "Saved" confirmation next to a select/control ---------- */
.saved-note{
  display:inline-block; margin-left:10px; font-size:.78rem; font-weight:600; color:var(--success-text);
  opacity:0; transform:translateY(-2px); transition:opacity .15s ease, transform .15s ease;
}
.saved-note.is-visible{ opacity:1; transform:translateY(0); }

.ticket-tag-tools{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:8px; }
.tag-chips{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.ticket-tag{
  display:inline-flex; align-items:center; gap:3px; padding:4px 9px; border-radius:200px;
  border:1px solid color-mix(in srgb, var(--tag-color) 55%, white); color:var(--tag-color);
  background:color-mix(in srgb, var(--tag-color) 10%, white); font-size:.76rem; font-weight:700;
}
.ticket-tag button{ border:0; background:transparent; color:inherit; padding:0; cursor:pointer; font-size:1rem; line-height:1; }
.ticket-inline-action{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px; }
.ticket-inline-action input, .ticket-inline-action select{
  min-width:180px; font:inherit; font-size:.86rem; color:var(--text); background:var(--bg);
  border:1px solid var(--border); border-radius:8px; padding:10px 12px;
}
.message-split-choice{ display:block; margin-bottom:8px; color:var(--muted-2); font-size:.72rem; cursor:pointer; }
.message-split-choice input{ accent-color:var(--accent); }
.escalation-form{
  margin-top:14px; padding:16px; border:1px solid var(--border); border-radius:10px; background:var(--bg);
}
.escalation-form[hidden]{ display:none; }
.escalation-form .btn--accent{ width:auto; }

/* ---------- customer ticket-history panel (agent console) ---------- */
.customer-tickets{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.customer-tickets a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 12px; border:1px solid var(--border); border-radius:8px; text-decoration:none; color:var(--text);
  font-size:.85rem;
}
.customer-tickets a:hover{ background:var(--surface); border-color:var(--muted-2); }
.customer-tickets .ct-subject{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.customer-tickets .ct-meta{ flex-shrink:0; color:var(--muted-2); font-size:.76rem; }
.customer-link{ color:var(--indigo); text-decoration:none; font-weight:600; }
.customer-link:hover{ text-decoration:underline; }

/* ---------- possible-duplicate banner (ticket detail) ---------- */
.duplicate-banner{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--warn-bg); border:1px solid var(--warn-border); color:var(--warn-text);
}
.duplicate-banner__text{ margin:0; font-weight:600; }
.duplicate-banner__text a{ color:var(--warn-text); text-decoration:underline; }

/* ---------- back link (ticket detail pages) ---------- */
.ticket-back{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:18px;
  color:var(--muted); text-decoration:none; font-size:.88rem; font-weight:600;
  transition:color .15s ease, transform .15s ease;
}
.ticket-back:hover{ color:var(--accent); transform:translateX(-2px); }

/* ---------- ticket queue header (stat pills + New ticket) ---------- */
.queue-head-right{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.queue-stats{ display:flex; gap:8px; flex-wrap:wrap; }
.queue-stat{
  display:inline-flex; align-items:baseline; gap:5px; padding:6px 12px; border-radius:200px;
  border:1px solid var(--border); background:var(--bg); font-size:.8rem; color:var(--muted);
}
.queue-stat b{ font-family:'Sora',sans-serif; font-size:.92rem; color:var(--text); }
.queue-stat--open{ border-color:#f5b9dc; background:var(--pink-soft); }
.queue-stat--pending{ border-color:var(--queue-pending-border); background:var(--queue-pending-bg); }
.queue-stat--resolved{ border-color:var(--queue-resolved-border); background:var(--queue-resolved-bg); }
.queue-stat--closed{ border-color:var(--border); background:var(--surface-2); }
.queue-stat--overdue{ border-color:var(--overdue-border); background:var(--overdue-bg); color:var(--overdue-text); }

/* ---------- attachments (reply forms + message thread) ---------- */
.attach-field{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.attach-picker{
  display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:8px;
  border:1px dashed var(--border); background:var(--bg); color:var(--muted); font-size:.85rem;
  font-weight:600; cursor:pointer; transition:border-color .15s ease, color .15s ease;
}
.attach-picker:hover{ border-color:var(--accent); color:var(--accent-2); }
.attach-picker.is-drag-over{ border-color:var(--accent); background:var(--pink-soft); color:var(--accent-2); }
.attach-picker input[type="file"]{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.attach-chip{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:200px;
  background:var(--pink-soft); color:var(--accent-2); font-size:.8rem; font-weight:600;
}
.attach-chip button{
  border:0; background:transparent; color:inherit; cursor:pointer; font-size:.9rem; line-height:1; padding:0;
}
.msg-attachment{
  display:inline-flex; align-items:center; gap:6px; margin-top:8px; padding:6px 12px; border-radius:200px;
  background:var(--surface); border:1px solid var(--border); color:var(--text); text-decoration:none;
  font-size:.8rem; font-weight:600;
}
.msg-attachment:hover{ border-color:var(--accent); color:var(--accent-2); }

/* ---------- audit log pager (public/admin/audit-log.html) ---------- */
.admin-pager{ display:flex; align-items:center; gap:14px; justify-content:center; margin-top:18px; }
.admin-pager span{ color:var(--muted); font-size:.85rem; }

/* ---------- order status pill (public/portal/orders.html) — order.status
   values are 'processing'|'shipped'|'delivered'|'canceled', distinct from
   the ticket status vocabulary above, so these are separate modifiers on
   the same shared .status-pill base class. ---------- */
.status-pill--processing{ background:var(--status-pending-bg); color:var(--status-pending-text); }
.status-pill--shipped{ background:var(--status-shipped-bg); color:var(--status-shipped-text); }
.status-pill--delivered{ background:var(--status-resolved-bg); color:var(--status-resolved-text); }
.status-pill--canceled{ background:var(--status-closed-bg); color:var(--status-closed-text); }

/* ---------- admin console dark mode ----------
   Unlike the storefront and customer portal (a fixed light brand identity,
   see the comment near the top of this file), the admin console is our own
   internal tool with no such constraint — an agent running their OS in dark
   mode shouldn't be forced into a bright-white console. Scoped to
   body.admin-app (set on the <body> of every /admin/*.html page) so nothing
   here can ever leak into the storefront/portal.
   This app has no in-app theme toggle today (no code sets data-theme
   anywhere) — prefers-color-scheme is the only path that actually fires;
   the [data-theme] rules are kept only for consistency with the convention
   already established above, in case a toggle is added later. */
@media (prefers-color-scheme: dark){
  body.admin-app{
    --bg:#14151f; --surface:#1c1e2b; --surface-2:#242737; --pink-soft:#3a2030; --text:#eef0f6;
    --muted:#9ea4b8; --muted-2:#7d8299; --border:#2d3040;
    --accent:#ff5cbd; --accent-2:#ff2aa6; --indigo:#8880ff; --focus:#8880ff;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -16px rgba(0,0,0,.6);

    --error-bg:#3a1c1c; --error-border:#5c2a2a; --error-text:#ff8f87;
    --status-pending-bg:#3a2f14; --status-pending-text:#f4c766;
    --status-resolved-bg:#16301f; --status-resolved-text:#5fd88f;
    --status-closed-bg:#262a35; --status-closed-text:#aab1c4;
    --status-shipped-bg:#1a2c40; --status-shipped-text:#7db2e8;
    --warn-bg:#3a2f14; --warn-border:#6b5a24; --warn-text:#f4c766;
    --overdue-border:#6b2a2a; --overdue-bg:#3a1414; --overdue-text:#ff9c93;
    --queue-pending-border:#5c4a1e; --queue-pending-bg:#332a12;
    --queue-resolved-border:#245c37; --queue-resolved-bg:#132a1c;
    --internal-bg:#332a12; --internal-border:#6b5a24; --internal-text:#f4c766;
    --internal-badge-bg:#5c4a1e; --internal-badge-text:#f4dfa0;
    --success-text:#5fd88f;
  }
}
body.admin-app[data-theme="dark"]{
  --bg:#14151f; --surface:#1c1e2b; --surface-2:#242737; --pink-soft:#3a2030; --text:#eef0f6;
  --muted:#9ea4b8; --muted-2:#7d8299; --border:#2d3040;
  --accent:#ff5cbd; --accent-2:#ff2aa6; --indigo:#8880ff; --focus:#8880ff;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px -16px rgba(0,0,0,.6);
  --error-bg:#3a1c1c; --error-border:#5c2a2a; --error-text:#ff8f87;
  --status-pending-bg:#3a2f14; --status-pending-text:#f4c766;
  --status-resolved-bg:#16301f; --status-resolved-text:#5fd88f;
  --status-closed-bg:#262a35; --status-closed-text:#aab1c4;
  --status-shipped-bg:#1a2c40; --status-shipped-text:#7db2e8;
  --warn-bg:#3a2f14; --warn-border:#6b5a24; --warn-text:#f4c766;
  --overdue-border:#6b2a2a; --overdue-bg:#3a1414; --overdue-text:#ff9c93;
  --queue-pending-border:#5c4a1e; --queue-pending-bg:#332a12;
  --queue-resolved-border:#245c37; --queue-resolved-bg:#132a1c;
  --internal-bg:#332a12; --internal-border:#6b5a24; --internal-text:#f4c766;
  --internal-badge-bg:#5c4a1e; --internal-badge-text:#f4dfa0;
  --success-text:#5fd88f;
}
body.admin-app[data-theme="light"]{
  --bg:#ffffff; --surface:#f6f5fb; --surface-2:#f6f5fb; --pink-soft:#ffe6f5; --text:#0b0f17;
  --muted:#535863; --muted-2:#64748b; --border:#e3e1ee;
  --accent:#ff2aa6; --accent-2:#d91a87; --indigo:#4f47eb; --focus:#4f47eb;
  --shadow:0 1px 2px rgba(11,15,23,.04), 0 8px 24px -12px rgba(11,15,23,.12);
  --error-bg:#fdecea; --error-border:#f5c2bd; --error-text:#b42318;
  --status-pending-bg:#fff3d6; --status-pending-text:#92620a;
  --status-resolved-bg:#e2f5e9; --status-resolved-text:#166534;
  --status-closed-bg:#eef0f3; --status-closed-text:#4b5563;
  --status-shipped-bg:#e0edfb; --status-shipped-text:#1d4e89;
  --warn-bg:#fef3e2; --warn-border:#f0c674; --warn-text:#92650a;
  --overdue-border:#f3a6a6; --overdue-bg:#fde8e8; --overdue-text:#991b1b;
  --queue-pending-border:#f1d28a; --queue-pending-bg:#fff4d6;
  --queue-resolved-border:#b7dfc3; --queue-resolved-bg:#e7f6ec;
  --internal-bg:#fdf6e3; --internal-border:#ead9a7; --internal-text:#4d3b12;
  --internal-badge-bg:#f3dfad; --internal-badge-text:#6f4f00;
  --success-text:#1f6b3a;
}

/* ---------- print export (admin ticket detail) ---------- */
@media print{
  body.admin-app,
  body.admin-app[data-theme="dark"],
  body.admin-app[data-theme="light"]{
    --bg:#ffffff; --surface:#f6f5fb; --surface-2:#f6f5fb; --pink-soft:#ffe6f5; --text:#0b0f17;
    --muted:#535863; --muted-2:#64748b; --border:#e3e1ee;
    --accent:#ff2aa6; --accent-2:#d91a87; --indigo:#4f47eb; --focus:#4f47eb;
    --shadow:0 1px 2px rgba(11,15,23,.04), 0 8px 24px -12px rgba(11,15,23,.12);
    --error-bg:#fdecea; --error-border:#f5c2bd; --error-text:#b42318;
    --status-pending-bg:#fff3d6; --status-pending-text:#92620a;
    --status-resolved-bg:#e2f5e9; --status-resolved-text:#166534;
    --status-closed-bg:#eef0f3; --status-closed-text:#4b5563;
    --status-shipped-bg:#e0edfb; --status-shipped-text:#1d4e89;
    --warn-bg:#fef3e2; --warn-border:#f0c674; --warn-text:#92650a;
    --overdue-border:#f3a6a6; --overdue-bg:#fde8e8; --overdue-text:#991b1b;
    --queue-pending-border:#f1d28a; --queue-pending-bg:#fff4d6;
    --queue-resolved-border:#b7dfc3; --queue-resolved-bg:#e7f6ec;
    --internal-bg:#fdf6e3; --internal-border:#ead9a7; --internal-text:#4d3b12;
    --internal-badge-bg:#f3dfad; --internal-badge-text:#6f4f00;
    --success-text:#1f6b3a;
  }

  body.admin-app .ticker,
  body.admin-app header.nav,
  body.admin-app footer.foot,
  body.admin-app .ticket-back,
  body.admin-app #duplicateBanner,
  body.admin-app #ticketContent > .panel:has(#assignedAgent),
  body.admin-app #ticketContent > .panel:has(#replyForm),
  body.admin-app #ticketContent .btn,
  body.admin-app .message-split-choice,
  body.admin-app .nav__notification,
  body.admin-app .keyboard-shortcuts-widget,
  body.admin-app #da-toast-container{
    display:none !important;
  }

  body.admin-app{ background:var(--bg); color:var(--text); }
  body.admin-app .admin-shell{ max-width:none; margin:0; padding:0; }
  body.admin-app #ticketContent{ gap:12px; }
  body.admin-app .panel{ background:var(--surface); border-color:var(--border); padding:18px; }
  body.admin-app .panel h2{ break-after:avoid; page-break-after:avoid; }
  body.admin-app .info-card,
  body.admin-app #messageThread .msg-bubble{ break-inside:avoid; page-break-inside:avoid; }
  body.admin-app .msg-thread{ gap:10px; }
  body.admin-app #messageThread .msg-bubble{ max-width:100%; }

  body.admin-app .status-pill,
  body.admin-app #messageThread .msg-bubble,
  body.admin-app .internal-note-badge{
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
}

/* ---------- toast notifications (public/assets/toast.js) ----------
   Brand-fixed dark, same #05070c as the ticker/footer, deliberately not a
   themed token — a toast is a transient system message, not page content,
   so it looks identical in light and dark admin mode rather than adapting. */
#da-toast-container{
  position:fixed; bottom:24px; right:24px; z-index:200;
  display:flex; flex-direction:column; gap:10px; align-items:flex-end;
  pointer-events:none;
}
.da-toast{
  background:#05070c; color:#fff; padding:12px 18px; border-radius:10px;
  font-size:.88rem; font-weight:600; box-shadow:0 8px 24px -8px rgba(0,0,0,.4);
  max-width:360px; cursor:pointer; pointer-events:auto;
  opacity:0; transform:translateY(12px); transition:opacity .22s ease, transform .22s ease;
}
.da-toast.is-visible{ opacity:1; transform:translateY(0); }
.da-toast--success{ background:#0f3d24; }
.da-toast--success::before{ content:"✓ "; color:#5fd88f; }
.da-toast--error{ background:#3d1414; }
.da-toast--error::before{ content:"✕ "; color:#ff8f87; }
@media (prefers-reduced-motion:reduce){
  .da-toast{ transition:opacity .01ms; }
}

/* ---------- live-update flash (ticket detail, SSE) ----------
   A silent background re-render is easy to miss — a brief outline pulse
   marks "this content just changed" without being alarming or lingering. */
@keyframes liveUpdateFlash{
  0%{ box-shadow:0 0 0 3px var(--accent); }
  100%{ box-shadow:0 0 0 3px transparent; }
}
.is-live-updated{ animation:liveUpdateFlash 1.4s ease-out; border-radius:14px; }
@media (prefers-reduced-motion:reduce){
  .is-live-updated{ animation:none; }
}