/* ============================================================
   PieSMP — Design System
   Style: Neo-brutalist / dark. Tokens -> primitives -> components.
   Fonts load via <link> in index.html. No @import here: it blocks
   CSS parsing and duplicated the download.
   ============================================================ */

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

:root{
  /* ---- Surfaces ---- */
  --bg:#0b0d10;--bg-alt:#0f1216;--panel:#14181d;--panel-2:#1a2027;--panel-3:#1e252e;
  --ink:#000;                       /* the brutalist border/shadow colour */
  --border:#2a323c;--border-light:#38424e;

  /* ---- Text (all >=4.5:1 on --bg, --panel and --panel-2) ---- */
  --text:#e8edf2;                   /* 15.1:1 on panel */
  --muted:#98a5b3;                  /*  7.1:1 on panel */
  --dim:#818d9b;                    /*  5.3:1 on panel — was #5c6875 (3.1:1, failed AA) */

  /* ---- Palette ---- */
  --cyan:#22d3ee;--green:#4ade80;--red:#f87171;--amber:#fbbf24;
  --purple:#c084fc;--blue:#60a5fa;--pink:#f472b6;--orange:#fb923c;--lime:#a3e635;
  --cyan-dim:rgba(34,211,238,.12);--cyan-mid:rgba(34,211,238,.25);
  --on-accent:#04252c;              /* 8.9:1 on cyan, 9.2 on green, 9.6 on amber */
  --on-danger:#1a0505;              /* 7.1:1 on red */

  /* ---- Semantic aliases: components reference these, never raw hues ---- */
  --primary:var(--cyan);--on-primary:var(--on-accent);
  --success:var(--green);--warning:var(--amber);--danger:var(--red);--info:var(--blue);
  --focus:#7dd3fc;                  /* focus ring — distinct from --primary so it reads on cyan */

  /* ---- Type ---- */
  --font-head:"Bricolage Grotesque","Lexend",ui-sans-serif,system-ui,sans-serif;
  --font-body:"Lexend",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;

  /* Type scale — 1.25 major third, fluid where it needs to be */
  --fs-2xs:0.75rem;   /* 12px — the floor. Nothing smaller. */
  --fs-xs:0.8125rem;  /* 13 */
  --fs-sm:0.875rem;   /* 14 */
  --fs-base:1rem;     /* 16 — body */
  --fs-md:1.125rem;   /* 18 */
  --fs-lg:1.25rem;    /* 20 */
  --fs-xl:1.5rem;     /* 24 */
  --fs-2xl:clamp(1.75rem,1.4rem + 1.6vw,2.25rem);
  --fs-3xl:clamp(2rem,1.4rem + 3vw,3rem);
  --fs-display:clamp(2.75rem,1.6rem + 5.6vw,6rem);

  --lh-tight:1.05;--lh-snug:1.25;--lh-body:1.6;
  /* Tracking in em so it scales WITH fluid type. The old -3px on a 3rem
     floor was -6% and the letters collided on mobile. */
  --tracking-display:-0.035em;--tracking-tight:-0.02em;
  --tracking-wide:0.05em;--tracking-kicker:0.18em;

  /* ---- Spacing: 4px base ---- */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;
  --space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;
  --space-16:64px;--space-20:80px;--space-24:96px;

  /* ---- Radius ---- */
  --radius-sm:10px;--radius:16px;--radius-lg:24px;--radius-xl:32px;--radius-pill:999px;

  /* ---- Brutalist elevation ramp (one scale, no ad-hoc values) ---- */
  --shadow-1:3px 3px 0 var(--ink);
  --shadow-2:4px 4px 0 var(--ink);
  --shadow-3:6px 6px 0 var(--ink);
  --shadow-4:8px 8px 0 var(--ink);
  --shadow-5:12px 12px 0 var(--ink);
  --stroke:4px solid var(--ink);
  --stroke-thin:3px solid var(--ink);
  --hairline:3px solid rgba(255,255,255,.06);

  /* ---- Motion: one rhythm for the whole product ---- */
  --dur-fast:120ms;--dur:180ms;--dur-slow:280ms;--dur-exit:140ms;
  --ease-out:cubic-bezier(.22,1,.36,1);      /* entering */
  --ease-in:cubic-bezier(.4,0,1,1);          /* exiting  */
  --ease-spring:cubic-bezier(.2,.9,.3,1.2);  /* toasts, pops */

  /* ---- Layering ---- */
  --z-base:0;--z-raised:10;--z-sticky:20;--z-nav:100;--z-overlay:150;--z-toast:200;

  --nav-h:72px;
  --container:1280px;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:var(--fs-base);line-height:var(--lh-body);
  min-height:100svh;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-head);line-height:var(--lh-snug);text-wrap:balance}
p{text-wrap:pretty}
::selection{background:var(--primary);color:var(--on-primary)}
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border:4px solid var(--bg);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--border-light)}
a{color:var(--primary);text-decoration:none;transition:color var(--dur) var(--ease-out)}
a:hover{color:#67e8f9}
img{max-width:100%;display:block}
button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
button{touch-action:manipulation}          /* kills the 300ms tap delay */
svg{flex-shrink:0}
[hidden]{display:none!important}

/* ---------- Focus. Every interactive element, no exceptions. ---------- */
:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
  border-radius:2px;
}
.btn:focus-visible,.copy-ip:focus-visible,.nav-link:focus-visible{outline-offset:4px}
.input:focus-visible{outline-offset:0}

/* ---------- Skip link ---------- */
/* position:fixed, not absolute — an absolutely positioned skip link
   scrolls with the document, so on a scrolled page it lands off-screen
   even when focused. */
.skip-link{
  position:fixed;left:var(--space-4);top:var(--space-4);
  z-index:calc(var(--z-toast) + 1);
  background:var(--primary);color:var(--on-primary);font-weight:800;
  padding:var(--space-3) var(--space-5);border:var(--stroke);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-2);
  transform:translateY(calc(-100% - var(--space-8)));
  transition:transform var(--dur) var(--ease-out);
}
.skip-link:focus,.skip-link:focus-visible{transform:translateY(0);color:var(--on-primary)}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .spinner{animation:none;border-top-color:var(--primary);opacity:.9}
}

/* ============================ LAYOUT ============================ */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--space-6)}
.container-md{max-width:800px}
.container-sm{max-width:600px}
@media (max-width:640px){.container{padding-inline:var(--space-4)}}

/* Offset for the fixed nav. Applied to every routed page. */
.page{padding-top:calc(var(--nav-h) + 4px + var(--space-6));min-height:100svh}
.section{padding-block:var(--space-20)}
.section-alt{background:var(--bg-alt);border-block:var(--stroke)}
@media (max-width:720px){.section{padding-block:var(--space-12)}}

.stack{display:flex;flex-direction:column;gap:var(--space-2)}
.row{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.center{text-align:center}
.accent{color:var(--primary)}

/* ---------- Section heading block: was 6 copies of the same inline style ---------- */
.section-head{text-align:center;margin-bottom:var(--space-12);max-width:640px;margin-inline:auto}
.kicker{
  font-size:var(--fs-sm);font-weight:800;text-transform:uppercase;
  letter-spacing:var(--tracking-kicker);color:var(--primary);margin-bottom:var(--space-2);
}
.section-title{
  font-size:var(--fs-3xl);font-weight:900;
  letter-spacing:var(--tracking-tight);line-height:var(--lh-tight);
}
.section-sub{color:var(--muted);margin-top:var(--space-3)}
.page-title{font-size:var(--fs-2xl);font-weight:900;letter-spacing:var(--tracking-tight)}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-8)}

/* ============================ SURFACES ============================ */
.neo-card{
  background:var(--panel);border:var(--stroke);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-3);
}
.neo-card-sm{
  background:var(--panel);border:var(--stroke-thin);border-radius:var(--radius);
  box-shadow:var(--shadow-2);
}
/* Lift ONLY on things that are actually interactive — a hover response on a
   static card promises a click that never comes. */
a.neo-card,button.neo-card,.neo-card.is-interactive,
a.neo-card-sm,button.neo-card-sm,.neo-card-sm.is-interactive{
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
}
a.neo-card:hover,button.neo-card:hover,.neo-card.is-interactive:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-4)}
a.neo-card:active,button.neo-card:active,.neo-card.is-interactive:active{transform:translate(1px,1px);box-shadow:var(--shadow-2)}
a.neo-card-sm:hover,button.neo-card-sm:hover,.neo-card-sm.is-interactive:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-3)}

/* ============================ BUTTONS ============================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-head);font-weight:800;font-size:var(--fs-sm);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;white-space:nowrap;
  padding:var(--space-3) var(--space-6);
  min-height:48px;                     /* WCAG / Material touch target */
  cursor:pointer;border:var(--stroke);border-radius:var(--radius);
  box-shadow:var(--shadow-2);text-decoration:none;
  touch-action:manipulation;
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background-color var(--dur) var(--ease-out);
}
/* Hover lift only where a pointer can hover. On touch it sticks. */
@media (hover:hover){
  .btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-4)}
}
.btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-secondary{background:var(--panel-2);color:var(--text)}
.btn-danger{background:var(--danger);color:var(--on-danger)}
.btn-lime{background:var(--lime);color:var(--on-accent)}
.btn-ghost{
  background:transparent;color:var(--muted);border-color:transparent;box-shadow:none;
  padding:var(--space-2) var(--space-4);
}
@media (hover:hover){.btn-ghost:hover{color:var(--text);background:rgba(255,255,255,.06);transform:none;box-shadow:none}}
.btn-ghost:active{transform:none;box-shadow:none}
.btn-sm{min-height:44px;padding:var(--space-2) var(--space-5);font-size:var(--fs-xs);border-width:3px;box-shadow:var(--shadow-1)}
@media (hover:hover){.btn-sm:hover{box-shadow:var(--shadow-3)}}
.btn-lg{min-height:56px;padding:var(--space-4) var(--space-10);font-size:var(--fs-base)}
.btn-block{width:100%}
.btn-icon{width:48px;height:48px;min-height:48px;padding:0;border-radius:50%}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:var(--shadow-1)}
.btn:disabled:hover{transform:none;box-shadow:var(--shadow-1)}
/* Spinner inside a submitting button — keeps the label, adds progress. */
.btn-spinner{width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite}

/* ============================ FORMS ============================ */
.form-group{margin-bottom:var(--space-5)}
.form-label{
  display:block;font-size:var(--fs-xs);font-weight:700;color:var(--muted);
  margin-bottom:var(--space-2);letter-spacing:.05em;text-transform:uppercase;
}
.form-label .req{color:var(--danger);margin-left:2px}
.form-hint{display:block;font-size:var(--fs-xs);color:var(--dim);margin-top:var(--space-2)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
@media (max-width:560px){.form-grid{grid-template-columns:1fr;gap:0}}

.input{
  display:block;width:100%;background:var(--bg);border:var(--stroke);color:var(--text);
  font-size:var(--fs-base);          /* 16px: less makes iOS zoom on focus */
  padding:var(--space-3) var(--space-4);min-height:48px;
  border-radius:var(--radius);outline:none;box-shadow:var(--shadow-2);
  transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
}
.input:focus{border-color:var(--primary);box-shadow:var(--shadow-2),0 0 0 3px var(--cyan-mid)}
.input::placeholder{color:var(--dim)}
.input[aria-invalid="true"]{border-color:var(--danger)}
.input[aria-invalid="true"]:focus{box-shadow:var(--shadow-2),0 0 0 3px rgba(248,113,113,.3)}
.input:disabled{opacity:.5;cursor:not-allowed;background:var(--panel-2)}
textarea.input{resize:vertical;min-height:140px;line-height:var(--lh-body);padding-block:var(--space-3)}
select.input{
  appearance:none;cursor:pointer;padding-right:var(--space-10);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2398a5b3' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--space-4) center;
}
/* Read-only value display — must NOT look like an editable field. */
.field-readonly{
  width:100%;background:transparent;border:3px dashed var(--border);
  color:var(--muted);padding:var(--space-3) var(--space-4);min-height:48px;
  border-radius:var(--radius);display:flex;align-items:center;
}
/* Password field with reveal toggle */
.input-affix{position:relative;display:flex}
.input-affix .input{padding-right:52px}
.affix-btn{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;display:grid;place-items:center;
  background:none;border:none;cursor:pointer;color:var(--muted);border-radius:var(--radius-sm);
}
.affix-btn:hover{color:var(--text)}
.affix-btn svg{width:20px;height:20px}

/* Field-level error, sits directly under its input */
.field-error{
  display:flex;align-items:flex-start;gap:var(--space-2);
  color:var(--danger);font-size:var(--fs-xs);font-weight:600;margin-top:var(--space-2);
}
.field-error svg{width:14px;height:14px;margin-top:2px}
.field-error:empty{display:none}

/* ============================ BADGES ============================ */
.badge{
  display:inline-flex;align-items:center;gap:var(--space-1);
  font-size:var(--fs-2xs);font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:5px var(--space-3);border-radius:var(--radius-sm);
  border:var(--stroke-thin);box-shadow:2px 2px 0 var(--ink);white-space:nowrap;
}
.badge-cyan{background:var(--cyan);color:var(--on-accent)}
.badge-green{background:var(--green);color:var(--on-accent)}
.badge-red{background:var(--red);color:var(--on-danger)}
.badge-amber{background:var(--amber);color:var(--on-accent)}
.badge-purple{background:var(--purple);color:var(--on-accent)}
.badge-lime{background:var(--lime);color:var(--on-accent)}
.badge-blue{background:var(--blue);color:var(--on-accent)}   /* referenced by statusBadge(), never defined */
.badge-ghost{background:var(--panel-2);color:var(--muted);border-color:var(--border)} /* likewise */

/* ============================ ALERTS ============================ */
.alert{
  display:flex;align-items:flex-start;gap:var(--space-3);
  padding:var(--space-4) var(--space-5);border-radius:var(--radius);
  font-size:var(--fs-sm);font-weight:600;margin-bottom:var(--space-4);
  border:var(--stroke);box-shadow:var(--shadow-2);
}
.alert svg{width:18px;height:18px;flex-shrink:0;margin-top:1px}
.alert:empty{display:none}
.alert-info{background:var(--cyan-dim);color:var(--cyan)}
.alert-success{background:rgba(74,222,128,.12);color:var(--green)}
.alert-warning{background:rgba(251,191,36,.12);color:var(--amber)}
.alert-error{background:rgba(248,113,113,.12);color:var(--red)}

/* ============================ TOAST ============================ */
.toast{
  position:fixed;left:50%;bottom:var(--space-8);z-index:var(--z-toast);
  display:inline-flex;align-items:center;gap:var(--space-2);
  background:var(--panel);border:var(--stroke);color:var(--text);
  font-weight:700;font-size:var(--fs-sm);padding:var(--space-3) var(--space-6);
  border-radius:var(--radius);box-shadow:var(--shadow-3);
  transform:translate(-50%,80px);opacity:0;pointer-events:none;
  max-width:calc(100vw - var(--space-8));
  transition:transform var(--dur-slow) var(--ease-spring),opacity var(--dur) var(--ease-out);
}
.toast.show{transform:translate(-50%,0);opacity:1}
.toast svg{width:18px;height:18px;color:var(--success)}
.toast.error{border-color:var(--danger)}
.toast.error svg{color:var(--danger)}

/* ============================ NAV ============================ */
.nav{
  position:fixed;inset-inline:0;top:0;z-index:var(--z-nav);
  background:rgba(11,13,16,.92);backdrop-filter:blur(12px);
  border-bottom:var(--stroke);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);height:var(--nav-h)}
.nav-brand{
  display:flex;align-items:center;gap:var(--space-3);flex-shrink:0;
  font-family:var(--font-head);font-size:var(--fs-lg);font-weight:900;
  color:var(--text);letter-spacing:.02em;text-transform:uppercase;
}
.nav-brand:hover{color:var(--text)}
.nav-mark{
  width:40px;height:40px;background:var(--panel);border:var(--stroke-thin);
  border-radius:12px;display:grid;place-items:center;box-shadow:var(--shadow-1);
}
.nav-mark svg{width:24px;height:24px}

.nav-links{display:flex;align-items:center;gap:2px;list-style:none}
.nav-link{
  display:inline-flex;align-items:center;min-height:44px;
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);
  font-family:var(--font-head);font-size:var(--fs-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
  position:relative;transition:color var(--dur) var(--ease-out),background-color var(--dur) var(--ease-out);
}
@media (hover:hover){.nav-link:hover{color:var(--text);background:rgba(255,255,255,.06)}}
/* Current-page indicator — the nav set an .active class that had no styles at all. */
.nav-link[aria-current="page"]{color:var(--primary);background:var(--cyan-dim)}
.nav-link[aria-current="page"]::after{
  content:'';position:absolute;left:var(--space-3);right:var(--space-3);bottom:2px;
  height:3px;background:var(--primary);border-radius:2px;
}
.nav-actions{display:flex;align-items:center;gap:var(--space-3);flex-shrink:0}

.nav-status{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--fs-xs);font-weight:700;color:var(--muted);white-space:nowrap}
.nav-dot{width:10px;height:10px;border-radius:50%;background:var(--danger);border:2px solid var(--ink);flex-shrink:0;position:relative}
.nav-dot.online{background:var(--success)}
/* A ring that expands and fades outward, like a status light breathing —
   signals "live" without demanding attention. ::after so it never affects
   the dot's own hit area or layout. */
.nav-dot.online::after{
  content:'';position:absolute;inset:-2px;border-radius:50%;
  border:1.5px solid var(--success);
  animation:dotPulse 2.4s ease-out infinite;
}
@keyframes dotPulse{
  0%{transform:scale(1);opacity:.7}
  100%{transform:scale(2.4);opacity:0}
}
@media (prefers-reduced-motion:reduce){.nav-dot.online::after{animation:none;display:none}}

/* Hamburger — the old markup had three bare <span>s with no CSS at all,
   so the button rendered as an empty bordered box. */
.nav-toggle{
  display:none;width:48px;height:48px;
  background:var(--panel);border:var(--stroke-thin);border-radius:var(--radius-sm);
  cursor:pointer;box-shadow:var(--shadow-1);
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.nav-toggle span{display:block;width:22px;height:3px;background:var(--text);border-radius:2px;transition:transform var(--dur) var(--ease-out),opacity var(--dur-fast) var(--ease-out)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* User dropdown */
.dropdown{position:relative}
.dropdown-toggle{
  display:flex;align-items:center;gap:var(--space-2);min-height:44px;
  padding:var(--space-1) var(--space-3);cursor:pointer;
  border:var(--stroke-thin);border-radius:12px;background:var(--panel);
  box-shadow:2px 2px 0 var(--ink);color:var(--text);
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
@media (hover:hover){.dropdown-toggle:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-1)}}
.dropdown-name{font-weight:700;font-size:var(--fs-xs);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dropdown-menu{
  position:absolute;top:calc(100% + var(--space-2));right:0;
  background:var(--panel);border:var(--stroke);border-radius:var(--radius);
  min-width:220px;z-index:var(--z-raised);box-shadow:var(--shadow-3);padding:var(--space-1);
  opacity:0;pointer-events:none;transform:translateY(-8px) scale(.98);transform-origin:top right;
  transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur) var(--ease-out);
}
.dropdown-menu.show{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.dropdown-item{
  display:flex;align-items:center;gap:var(--space-3);width:100%;
  padding:var(--space-3) var(--space-4);min-height:44px;
  color:var(--text);font-size:var(--fs-sm);font-weight:600;text-align:left;
  cursor:pointer;background:none;border:none;border-radius:var(--radius-sm);
  transition:background-color var(--dur-fast) var(--ease-out);
}
.dropdown-item:hover{background:var(--panel-2);color:var(--text)}
.dropdown-item svg{width:16px;height:16px;color:var(--muted)}
.dropdown-item-danger{color:var(--danger)}
.dropdown-item-danger svg{color:var(--danger)}
.dropdown-divider{height:3px;background:var(--ink);margin:var(--space-1) 0}

/* ---------- Mobile nav ---------- */
@media (max-width:900px){
  .nav-toggle{display:flex}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:var(--space-1);
    background:var(--bg);border-bottom:var(--stroke);
    padding:var(--space-3) var(--space-4) var(--space-5);
    max-height:calc(100svh - var(--nav-h));overflow-y:auto;
    /* Collapsed. The old code toggled `.open` against zero CSS —
       the mobile menu simply did not work. */
    display:none;
  }
  .nav-links.open{display:flex;animation:navDrop var(--dur) var(--ease-out) both}
  .nav-link{
    min-height:52px;padding:var(--space-3) var(--space-4);
    font-size:var(--fs-sm);border-radius:var(--radius-sm);
  }
  .nav-link[aria-current="page"]::after{display:none}
  .nav-link[aria-current="page"]{border-left:4px solid var(--primary)}
  .nav-status{display:none}
}
@media (max-width:520px){
  .nav-brand span{display:none}          /* mark only — keeps the bar from wrapping */
  .nav-actions .btn{padding-inline:var(--space-3)}
  .dropdown-name{display:none}
}
@keyframes navDrop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

/* ============================ HERO ============================ */
.hero{
  position:relative;text-align:center;overflow:hidden;
  min-height:100svh;                    /* svh, not vh: no mobile URL-bar jump */
  padding-top:calc(var(--nav-h) + var(--space-12));
  padding-bottom:var(--space-16);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(34,211,238,.1) 0%,transparent 60%);
}
.hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-grid{position:absolute;inset:0;background-image:radial-gradient(rgba(34,211,238,.08) 1px,transparent 1px);background-size:24px 24px}
.hero-content{position:relative;z-index:1}

/* Decorative floating blocks — one per corner-ish, drifting at slightly
   different speeds/phases (negative delays) so they never sync up into a
   single obvious pulse. Faded and blurred just enough to read as
   background texture, not competing UI. */
.hero-cube{
  position:absolute;opacity:.55;filter:blur(.3px);
  animation:heroCubeFloat var(--cube-dur,7s) ease-in-out var(--cube-delay,0s) infinite;
  will-change:transform;
}
.hero-cube svg{width:100%;height:100%;display:block}
@keyframes heroCubeFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-18px) rotate(4deg)}
}
@media (max-width:720px){.hero-cube{display:none}}         /* keep small screens uncluttered */
@media (prefers-reduced-motion:reduce){.hero-cube{animation:none}}
.hero h1{
  font-size:var(--fs-display);font-weight:900;
  letter-spacing:var(--tracking-display);line-height:.92;   /* .85 clipped descenders */
  margin-bottom:var(--space-5);
}
.hero-sub{color:var(--muted);font-size:var(--fs-md);max-width:52ch;margin:0 auto var(--space-8);line-height:var(--lh-body)}
.hero-kicker{font-size:var(--fs-sm);font-weight:800;text-transform:uppercase;letter-spacing:var(--tracking-kicker);color:var(--primary);margin-bottom:var(--space-3)}
.hero-cta{display:flex;justify-content:center;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-12)}

/* Live status pill */
.status-pill{
  display:inline-flex;align-items:center;gap:var(--space-2);
  background:var(--panel);border:var(--stroke-thin);border-radius:var(--radius-pill);
  padding:6px var(--space-4);box-shadow:var(--shadow-1);
  font-size:var(--fs-xs);font-weight:700;color:var(--muted);margin-bottom:var(--space-4);
}

/* ============================ GRIDS ============================ */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-5)}
.modes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-5)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);max-width:800px;margin-inline:auto}
@media (max-width:760px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.features-grid,.modes-grid{grid-template-columns:1fr}}

.feature-card{padding:var(--space-6)}
.feature-icon,.mode-icon{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  margin-bottom:var(--space-4);border:var(--stroke-thin);box-shadow:var(--shadow-1);
}
.feature-icon svg,.mode-icon svg{width:24px;height:24px}
.feature-card h3{font-size:var(--fs-md);font-weight:800;margin-bottom:var(--space-1)}
.feature-card p{color:var(--muted);font-size:var(--fs-sm);line-height:1.55}

.mode-card{padding:var(--space-6);text-align:left}
.mode-card h3{font-size:var(--fs-lg);font-weight:800;margin-bottom:var(--space-1)}
.mode-card p{color:var(--muted);font-size:var(--fs-sm);line-height:1.55;margin-bottom:var(--space-3)}
.mode-chips{display:flex;flex-wrap:wrap;gap:var(--space-1)}
.mode-chips span{
  background:var(--bg);border:2px solid var(--border);border-radius:var(--radius-pill);
  padding:3px var(--space-3);font-size:var(--fs-2xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
}
/* These three were referenced in the /modes markup but never defined, so
   that page rendered its mode icons with no background or colour. */
.mode-lifesteal .mode-icon{background:var(--cyan-dim);color:var(--cyan)}
.mode-earth .mode-icon{background:rgba(74,222,128,.12);color:var(--green)}
.mode-practice .mode-icon{background:rgba(192,132,252,.12);color:var(--purple)}

/* ============================ STATS ============================ */
.stat-card{padding:var(--space-6) var(--space-4);text-align:center}
.stat-number{
  font-family:var(--font-head);font-size:clamp(1.75rem,4vw,3rem);font-weight:900;
  line-height:1;letter-spacing:var(--tracking-tight);
  font-variant-numeric:tabular-nums;      /* live counter must not reflow */
  font-feature-settings:"tnum" 1;
}
.stat-label{
  font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted);margin-top:var(--space-2);
}

/* ============================ LEADERBOARD ============================ */
.leaderboard-row{
  display:grid;grid-template-columns:56px 1fr auto;align-items:center;
  gap:var(--space-4);padding:var(--space-4) var(--space-6);
  border-bottom:var(--hairline);
}
.leaderboard-row:last-child{border-bottom:none}
.leaderboard-row:nth-child(even){background:rgba(255,255,255,.02)}
.lb-rank{
  font-family:var(--font-head);font-size:var(--fs-md);font-weight:900;
  width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  border:var(--stroke-thin);box-shadow:2px 2px 0 var(--ink);
  background:var(--panel-2);color:var(--text);font-variant-numeric:tabular-nums;
}
.lb-rank.gold{background:var(--amber);color:#000}
.lb-rank.silver{background:#94a3b8;color:#000}
.lb-rank.bronze{background:var(--orange);color:#000}
.lb-name{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis}
.lb-name small{color:var(--dim);font-weight:400;display:block;font-size:var(--fs-xs)}
.lb-value{font-weight:800;color:var(--primary);font-size:var(--fs-md);font-variant-numeric:tabular-nums}
@media (max-width:560px){
  .leaderboard-row{grid-template-columns:44px 1fr auto;gap:var(--space-3);padding:var(--space-3) var(--space-4)}
  .lb-rank{width:36px;height:36px;font-size:var(--fs-sm)}
}

/* ============================ MAP ============================ */
.map-container{
  border:var(--stroke);border-radius:var(--radius-xl);overflow:hidden;
  box-shadow:var(--shadow-4);background:var(--panel);
  aspect-ratio:16/9;                    /* reserves space -> no CLS on iframe load */
}
.map-container iframe{width:100%;height:100%;border:none;display:block}
.map-container.map-tall{aspect-ratio:auto;height:clamp(400px,70svh,760px)}
@media (max-width:720px){.map-container{aspect-ratio:4/3}}

/* ============================ AVATAR ============================ */
.avatar{
  width:40px;height:40px;border-radius:50%;background:var(--panel-2);
  border:var(--stroke-thin);display:grid;place-items:center;
  font-weight:800;font-size:var(--fs-xs);color:var(--primary);
  flex-shrink:0;box-shadow:2px 2px 0 var(--ink);
}
.avatar-sm{width:32px;height:32px;font-size:var(--fs-2xs)}
.avatar-lg{width:56px;height:56px;font-size:var(--fs-md);border-radius:14px;background:var(--cyan-dim);box-shadow:var(--shadow-1)}

/* ============================ EMPTY / LOADING ============================ */
.empty-state{text-align:center;padding:var(--space-16) var(--space-6)}
.empty-icon{
  width:64px;height:64px;background:var(--cyan-dim);border:var(--stroke-thin);
  border-radius:16px;display:grid;place-items:center;margin:0 auto var(--space-4);
  box-shadow:var(--shadow-1);color:var(--primary);
}
.empty-icon svg{width:28px;height:28px}
.empty-state h3{color:var(--text);font-weight:800;margin-bottom:var(--space-1)}
.empty-state p{color:var(--muted);font-size:var(--fs-sm);margin-bottom:var(--space-5)}

.spinner{width:24px;height:24px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-screen{display:flex;align-items:center;justify-content:center;min-height:60svh;flex-direction:column;gap:var(--space-4);color:var(--muted)}
.loading-block{padding:var(--space-10);text-align:center;color:var(--muted)}
.loading-block .spinner{margin:0 auto var(--space-3)}

/* Skeleton — a shimmer beats a blocking spinner past ~1s */
.skeleton{
  background:linear-gradient(90deg,var(--panel-2) 25%,var(--panel-3) 37%,var(--panel-2) 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:var(--radius-sm);
}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* ============================ TABLES ============================ */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse}
th,td{padding:var(--space-3) var(--space-4);text-align:left;border-bottom:var(--hairline)}
th{font-size:var(--fs-2xs);font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
td{font-size:var(--fs-sm)}

/* ============================ ENTRANCE ANIMATION ============================ */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.fade-up{animation:fadeUp var(--dur-slow) var(--ease-out) both}
.fade-in{animation:fadeIn var(--dur) var(--ease-out) both}
/* Stagger grid children — 40ms apart reads as one gesture, not six. */
.stagger > *{animation:fadeUp var(--dur-slow) var(--ease-out) both}
.stagger > *:nth-child(1){animation-delay:0ms}
.stagger > *:nth-child(2){animation-delay:40ms}
.stagger > *:nth-child(3){animation-delay:80ms}
.stagger > *:nth-child(4){animation-delay:120ms}
.stagger > *:nth-child(5){animation-delay:160ms}
.stagger > *:nth-child(6){animation-delay:200ms}

/* ============================ STORE ============================ */
.store-hero{position:relative;text-align:center;padding:var(--space-10) 0 var(--space-8);overflow:hidden}
.store-hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 0%,rgba(34,211,238,.1) 0%,transparent 60%)}
.store-hero h1{font-size:var(--fs-3xl);font-weight:900;letter-spacing:var(--tracking-tight);margin-bottom:var(--space-3);position:relative}
.store-hero > p,.store-hero .container > p{color:var(--muted);font-size:var(--fs-md);max-width:52ch;margin-inline:auto;position:relative}

.store-login-card{
  background:var(--panel);border:var(--stroke);border-radius:var(--radius-xl);
  padding:var(--space-10);max-width:460px;margin-inline:auto;box-shadow:var(--shadow-4);
}
.store-login-card h1{margin-bottom:var(--space-2);font-size:var(--fs-xl);font-weight:900}
.store-login-card > p{color:var(--muted);margin-bottom:var(--space-6);font-size:var(--fs-sm)}
@media (max-width:520px){.store-login-card{padding:var(--space-6)}}

.store-ranks-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-5);padding-block:var(--space-5) var(--space-16)}
@media (max-width:600px){.store-ranks-grid{grid-template-columns:1fr}}
.store-rank-card{
  background:var(--panel);border:var(--stroke);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-3);display:flex;flex-direction:column;
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
}
@media (hover:hover){.store-rank-card:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-4)}}
.store-rank-img{
  width:100%;aspect-ratio:1/1;background:var(--panel-2);
  display:grid;place-items:center;
  font-family:var(--font-head);font-size:var(--fs-3xl);font-weight:900;color:var(--primary);
  border-bottom:var(--stroke);
}
/* Square frame, no cropping: the new catalogue art is 1024x1024 with titles
   baked along the bottom edge (LIQUID / FRAGMENT), and the rank PNGs are
   wide logo strips — cover + 16/9 sliced the bottom text clean off.
   Contain shows every image whole; square art fills the frame edge to edge,
   strips centre themselves on the panel background. */
img.store-rank-img{object-fit:contain;object-position:center}
.store-rank-body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);flex:1}
.store-rank-body h3{font-size:var(--fs-lg);font-weight:800}
.store-rank-price{
  font-family:var(--font-head);font-size:var(--fs-xl);font-weight:900;color:var(--primary);
  font-variant-numeric:tabular-nums;margin-top:auto;
}
.coupon-list{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center;margin-top:var(--space-4);position:relative}
.coupon-chip{
  font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:700;
  background:var(--panel);border:2px solid var(--border);color:var(--primary);
  padding:4px var(--space-3);border-radius:var(--radius-sm);
}

.store-checkout-card{background:var(--panel);border:var(--stroke);border-radius:var(--radius-xl);padding:var(--space-8);box-shadow:var(--shadow-4)}
@media (max-width:520px){.store-checkout-card{padding:var(--space-5)}}
.store-checkout-summary{background:var(--panel-2);border-radius:var(--radius);padding:var(--space-5);margin-bottom:var(--space-6);border:var(--stroke-thin)}
.store-summary-row{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-1) 0;font-size:var(--fs-sm)}
.store-summary-row span:last-child{font-variant-numeric:tabular-nums}
.store-summary-total{font-weight:800;font-size:var(--fs-md)}
.store-summary-divider{border:none;border-top:var(--stroke-thin);margin:var(--space-2) 0}

/* ============================ STORE SIDEBAR ============================ */
.store-layout{
  display:grid;grid-template-columns:240px 1fr;gap:var(--space-6);
  padding-block:var(--space-5) var(--space-16);
}
@media (max-width:860px){.store-layout{grid-template-columns:1fr}}

.store-sidebar{
  position:sticky;top:calc(var(--nav-h) + var(--space-6));align-self:start;
}
@media (max-width:860px){.store-sidebar{position:static}}

.store-sidebar-nav{display:flex;flex-direction:column;gap:var(--space-1)}
.store-sidebar-link{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3) var(--space-4);min-height:44px;
  border-radius:var(--radius-sm);
  font-family:var(--font-head);font-size:var(--fs-sm);font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
  cursor:pointer;background:none;border:none;text-align:left;width:100%;
  transition:color var(--dur) var(--ease-out),background-color var(--dur) var(--ease-out);
}
@media (hover:hover){.store-sidebar-link:hover{color:var(--text);background:rgba(255,255,255,.06)}}
.store-sidebar-link[aria-selected="true"]{color:var(--primary);background:var(--cyan-dim)}
.store-sidebar-link[aria-selected="true"]::before{
  content:'';position:absolute;left:0;top:var(--space-2);bottom:var(--space-2);
  width:3px;background:var(--primary);border-radius:0 2px 2px 0;
}
.store-sidebar-link{position:relative}
.store-sidebar-link svg{width:18px;height:18px;flex-shrink:0}

/* Gems grid */
.gems-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-5)}
@media (max-width:600px){.gems-grid{grid-template-columns:1fr}}

.gem-card{
  background:var(--panel);border:var(--stroke);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-3);display:flex;flex-direction:column;
  text-align:center;
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
}
@media (hover:hover){.gem-card:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-4)}}
.gem-card-img{
  width:100%;aspect-ratio:1;object-fit:contain;
  background:var(--panel-2);border-bottom:var(--stroke);
  padding:var(--space-6);
}
.gem-card-body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2);flex:1}
.gem-card-amount{
  font-family:var(--font-head);font-size:var(--fs-xl);font-weight:900;
  color:var(--primary);
}
.gem-card-label{font-size:var(--fs-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.gem-card-price{
  font-family:var(--font-head);font-size:var(--fs-lg);font-weight:900;
  color:var(--text);margin-top:var(--space-1);
}
.gem-card .btn{margin-top:auto}

/* ============================ COPY IP ============================ */
.copy-ip{
  display:inline-flex;align-items:center;gap:var(--space-2);min-height:48px;
  background:var(--panel);border:var(--stroke);border-radius:var(--radius);
  padding:var(--space-2) var(--space-4);cursor:pointer;box-shadow:var(--shadow-2);
  font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:700;color:var(--primary);
  touch-action:manipulation;
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out);
}
@media (hover:hover){.copy-ip:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-3)}}
.copy-ip:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.copy-ip svg{width:18px;height:18px}
.copy-ip.copied{border-color:var(--success);color:var(--success)}
.copy-ip-lg{font-size:var(--fs-base);padding:var(--space-3) var(--space-6);min-height:56px}
/* Inline text variant (footer) */
.copy-ip-text{
  background:none;border:none;box-shadow:none;padding:0;min-height:44px;
  color:var(--primary);font-family:var(--font-mono);font-size:var(--fs-sm);
  font-weight:700;cursor:pointer;text-align:left;
}
.copy-ip-text:hover{transform:none;box-shadow:none;color:#67e8f9}

/* ============================ FOOTER ============================ */
.footer{border-top:var(--stroke);color:var(--muted);font-size:var(--fs-sm);margin-top:var(--space-16);padding-block:var(--space-12) var(--space-8)}
.footer-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--space-10);
  margin-bottom:var(--space-8);text-align:left;
}
@media (max-width:720px){.footer-grid{grid-template-columns:1fr;gap:var(--space-8)}}
.footer-brand{display:inline-flex;align-items:center;gap:var(--space-3);font-family:var(--font-head);font-weight:900;color:var(--text);font-size:var(--fs-md);text-transform:uppercase;letter-spacing:.02em;margin-bottom:var(--space-3)}
.footer-brand:hover{color:var(--text)}
.footer-mark{width:36px;height:36px;background:var(--panel);border:var(--stroke-thin);border-radius:10px;display:grid;place-items:center;box-shadow:2px 2px 0 var(--ink)}
.footer-mark svg{width:20px;height:20px}
.footer-tagline{color:var(--dim);font-size:var(--fs-sm);max-width:34ch}
.footer h2{font-size:var(--fs-2xs);font-weight:800;text-transform:uppercase;letter-spacing:.12em;margin-bottom:var(--space-3);color:var(--muted)}
.footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.footer-col a,.footer-col button{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--muted);font-weight:600;font-size:var(--fs-sm);
  transition:color var(--dur) var(--ease-out);
}
.footer-col a:hover{color:var(--primary)}
.footer-bottom{
  border-top:var(--hairline);padding-top:var(--space-5);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3);
  color:var(--dim);font-size:var(--fs-xs);
}

/* ============================ UTILITIES ============================ */
.text-mono{font-family:var(--font-mono)}
.tabular{font-variant-numeric:tabular-nums}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ============================ TICKET LIST ROW ============================ */
.mode-chips li{list-style:none}
.coupon-list li{list-style:none}

.ticket-row{
  display:grid;grid-template-columns:auto 1fr auto auto auto;align-items:center;
  gap:var(--space-4);padding:var(--space-4) var(--space-5);
  color:var(--text);text-decoration:none;
}
.ticket-row-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.ticket-row-subject{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ticket-row-meta{font-size:var(--fs-xs);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ticket-row-count{font-size:var(--fs-sm);color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}
.ticket-row-time{font-size:var(--fs-xs);color:var(--dim);white-space:nowrap}
@media (max-width:720px){
  /* Stack instead of squeezing five columns into a 375px viewport. */
  .ticket-row{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3)}
  .ticket-row-main{flex:1 1 100%;order:-1}
  .ticket-row-count::after{content:' msgs'}
}

/* ============================ TICKET DETAIL ============================ */
.ticket-detail{overflow:hidden}
.ticket-detail-head{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-4) var(--space-5);border-bottom:var(--stroke);
}
.ticket-detail-body{display:grid;grid-template-columns:1fr 280px;min-height:520px}
.ticket-chat-col{display:flex;flex-direction:column;min-width:0}
.ticket-sidebar{border-left:var(--stroke);background:var(--panel-2)}
.ticket-sidebar-summary{
  display:none;                       /* desktop: it's a permanent column, no toggle needed */
  align-items:center;justify-content:space-between;gap:var(--space-3);
  padding:var(--space-4) var(--space-5);cursor:pointer;
  font-weight:800;font-size:var(--fs-sm);list-style:none;min-height:44px;
}
.ticket-sidebar-summary::-webkit-details-marker{display:none}
.ticket-sidebar-summary::after{
  content:'';width:10px;height:10px;flex-shrink:0;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform var(--dur) var(--ease-out);
}
.ticket-sidebar[open] .ticket-sidebar-summary::after{transform:rotate(-135deg)}
.ticket-sidebar-content{padding:var(--space-5)}

@media (max-width:840px){
  /* The sidebar used to be a hard 280px column that never collapsed on
     mobile — it fell above the chat as a full metadata block (status,
     priority, category, created, close button) and pushed the actual
     conversation off screen. It's now a <details> disclosure: closed by
     default, one tap to expand, so the chat is what a phone sees first. */
  .ticket-detail-body{grid-template-columns:1fr;min-height:0}
  .ticket-sidebar{border-left:none;border-bottom:var(--stroke)}
  .ticket-sidebar-summary{display:flex}
  .ticket-sidebar-content{padding:var(--space-4);padding-top:0}
  .ticket-chat{max-height:min(52svh,460px)}
}
/* Desktop: always expanded, independent of the [open] attribute the
   details element happens to carry — it's a fixed column, not a toggle. */
@media (min-width:841px){
  .ticket-sidebar-content{display:block!important}
}

.ticket-meta{display:grid;grid-template-columns:1fr;gap:var(--space-4)}
@media (max-width:840px){.ticket-meta{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}}
.ticket-meta dt{font-size:var(--fs-2xs);font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:var(--space-1)}
.ticket-meta dd{font-weight:600;font-size:var(--fs-sm)}

.ticket-chat{
  flex:1;padding:var(--space-5);overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:var(--space-3);list-style:none;
  max-height:min(60svh,560px);
}
.msg{display:flex;gap:var(--space-3);align-items:flex-start}
.msg-self{flex-direction:row-reverse}
.msg-avatar{
  width:36px;height:36px;flex-shrink:0;display:grid;place-items:center;
  background:var(--panel-2);color:var(--primary);border:var(--stroke-thin);
  border-radius:10px;font-weight:800;font-size:var(--fs-2xs);box-shadow:2px 2px 0 var(--ink);
}
.msg-avatar-staff{background:var(--purple);color:var(--on-accent)}
.msg-body{max-width:min(70%,560px);min-width:0}
.msg-meta{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-1)}
.msg-self .msg-meta{flex-direction:row-reverse}
.msg-sender{font-weight:700;font-size:var(--fs-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-bubble{
  background:var(--panel-2);border:var(--stroke-thin);border-radius:12px;
  padding:var(--space-3) var(--space-4);box-shadow:var(--shadow-1);
  font-size:var(--fs-sm);line-height:1.55;overflow-wrap:anywhere;
}
.msg-self .msg-bubble{background:var(--cyan-dim);border-color:var(--primary)}
.msg-time{font-size:var(--fs-2xs);color:var(--dim);margin-top:var(--space-1)}
.msg-self .msg-time,.msg-self .msg-sender{text-align:right}
@media (max-width:600px){.msg-body{max-width:82%}}

.ticket-composer{
  display:flex;gap:var(--space-2);align-items:flex-end;
  padding:var(--space-4) var(--space-5);border-top:var(--stroke);
  background:var(--panel);position:sticky;bottom:0;
}
.ticket-composer .input{flex:1}
@media(max-width:520px){.nav-brand .nav-mark{display:grid}.container-sm>.neo-card{padding:var(--space-5)!important}.ticket-detail-head{flex-wrap:wrap}.ticket-detail-head>div{min-width:0}.ticket-detail-head h1{overflow-wrap:anywhere}}

/* Restored ticket UI: presentation refinements, no markup or behavior changes. */
.classic-tickets .neo-card{border-radius:16px;border-width:2px;box-shadow:5px 5px 0 #03090d}
.classic-tickets .input{border-width:2px;border-radius:8px;min-height:48px;font-size:16px;line-height:1.5}
.classic-tickets textarea.input{min-height:160px;padding:14px;resize:vertical}
.classic-tickets .form-label{letter-spacing:.05em;line-height:1.5;margin-bottom:8px}
.classic-tickets .form-group{margin-bottom:24px}
.classic-tickets .form-hint{line-height:1.6}
.classic-tickets .btn{border-width:2px;border-radius:8px;min-height:46px}
.classic-tickets .ticket-row{padding:20px;gap:16px;border-radius:10px;align-items:center}
.classic-tickets .ticket-row-subject{line-height:1.5;overflow-wrap:anywhere}
.classic-tickets .ticket-row-meta{line-height:1.7}
.classic-tickets .ticket-row-count{font-variant-numeric:tabular-nums}
.classic-tickets .field-error:not(:empty){padding-top:8px;line-height:1.5}
.classic-tickets #form-error:not(:empty){margin-bottom:20px;line-height:1.6;overflow-wrap:anywhere}
.classic-tickets :is(a,button,input,select,textarea):focus-visible{outline:2px solid #67e8f9;outline-offset:4px}
@media(max-width:520px){.classic-tickets #main>div> .neo-card{padding:32px 24px!important}.classic-tickets .ticket-row{padding:16px;gap:12px}.classic-tickets .form-grid{grid-template-columns:1fr}.classic-tickets .page-title{overflow-wrap:anywhere}}

/* Account/ticket screens remain the restored interface. */
@media(max-width:760px){
 .classic-tickets .page{padding-top:calc(var(--nav-h,72px) + 24px)}
 .classic-tickets .page-head{gap:20px;flex-wrap:wrap;align-items:flex-start}
 .classic-tickets .page-title{font-size:clamp(28px,8vw,40px);line-height:1.15}
 .classic-tickets .ticket-row{display:flex;flex-wrap:wrap;gap:12px}
 .classic-tickets .ticket-row-main{min-width:160px;flex:1}
 .classic-tickets .ticket-row-subject{font-size:16px}
 .classic-tickets .input{font-family:var(--font-body);font-size:16px}
 .classic-tickets .nav,.classic-tickets .footer{backdrop-filter:none;-webkit-backdrop-filter:none}
 .classic-tickets .form-group{margin-bottom:22px}
}
@media(prefers-reduced-motion:reduce){.classic-tickets .fade-up,.classic-tickets .skeleton{animation:none!important;opacity:1!important;transform:none!important}}