/* =========================================================
   STREAMEOW — "QUIET PREMIUM" design system
   Editorial minimalism · whitespace · one lime accent.
   Light "paper" palette. Fonts: Fraunces (display) + Inter (body).

   This single stylesheet powers EVERY page. The first half is the
   reusable design system (tokens, nav, buttons, cards, tables,
   forms, footer, reveal utilities). The later sections keep/alias
   the component classes the existing Thymeleaf templates depend on
   (panels, stat cards, pricing, auth, chat widgets, …) so no page
   loses its styling.
   ========================================================= */

/* ---------------------------------------------------------
   1. DESIGN TOKENS — palette + type scale + motion
   --------------------------------------------------------- */
:root{
  /* palette */
  --ink:        #111210;   /* deep charcoal ink            */
  --ink-soft:   #3a3c37;   /* muted ink                    */
  --paper:      #f6f5f0;   /* warm off-white paper         */
  --paper-2:    #efeee7;   /* slightly deeper paper        */
  --card:       #ffffff;
  --line:       rgba(17,18,16,.10);
  --line-soft:  rgba(17,18,16,.06);
  --lime:       #C6FF3D;   /* the single accent            */
  --lime-deep:  #a6e017;   /* accent for text on paper     */
  --muted:      #6f716a;
  --danger:     #cf3b3b;
  --danger-bg:  rgba(207,59,59,.08);

  /* elevation */
  --shadow:     0 30px 80px -40px rgba(17,18,16,.45);
  --shadow-sm:  0 18px 40px -28px rgba(17,18,16,.55);

  /* motion */
  --ease:       cubic-bezier(.22,.61,.36,1);
  --ease-out:   cubic-bezier(.16,1,.3,1);

  /* layout */
  --maxw:       1180px;
  --r:          22px;
  --radius:     14px;

  /* type families */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* ---- backwards-compat aliases (templates use these var names
          inline, e.g. color:var(--accent); border:1px solid var(--line) ) ---- */
  --bg:     var(--paper);
  --bg1:    var(--card);
  --bg2:    var(--paper-2);
  --text:   var(--ink);
  --accent: var(--lime-deep);
  --accent2:var(--lime);
}

/* ---------------------------------------------------------
   2. BASE RESET + TYPOGRAPHY
   --------------------------------------------------------- */
*{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  letter-spacing:.002em;
  overflow-x:hidden;
}
body.menu-open{ overflow:hidden; }

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:360;
  line-height:1.05;
  letter-spacing:-.018em;
  margin:0;
  color:var(--ink);
}
h1{ font-size:clamp(38px,6vw,64px); }
h2{ font-size:clamp(28px,4vw,40px); margin-bottom:8px; }
h3{ font-size:20px; }
.serif-i{ font-style:italic; font-weight:360; }
.accent{ color:var(--lime-deep); }
.muted{ color:var(--muted); }
::selection{ background:var(--lime); color:var(--ink); }

/* ---------------------------------------------------------
   3. LAYOUT PRIMITIVES — wrap, main, section, eyebrow, headings
   --------------------------------------------------------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:28px;
}
/* templates lay content out with <main> + bare <section> */
main{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
section{ position:relative; padding:64px 0; }

.section{ padding:120px 0; }
.section-sm{ padding:30px 0 120px; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; font-weight:500; letter-spacing:.32em; text-transform:uppercase;
  color:var(--muted);
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--ink); opacity:.4; }

/* design-system heading block */
.head{ max-width:760px; margin-bottom:64px; }
.head h2{ font-size:clamp(34px,5.4vw,62px); margin-top:22px; letter-spacing:-.022em; }
.head p{ margin:22px 0 0; font-size:17px; color:var(--ink-soft); max-width:54ch; }
.center{ text-align:center; margin-inline:auto; }
.center .eyebrow::before{ display:none; }
.center.head p{ margin-inline:auto; }

/* template heading blocks */
.section-head{ text-align:center; margin-bottom:34px; }
.section-head p{ color:var(--muted); margin:0; }
.subhead{ font-size:13px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin:36px 0 16px; }

/* ---------------------------------------------------------
   4. NAV — sticky paper bar (keeps existing .nav / .links markup)
   --------------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:120;
  background:rgba(246,245,240,.82);
  backdrop-filter:saturate(160%) blur(18px);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  max-width:var(--maxw); margin:0 auto; padding:16px 24px;
}
.brand{
  display:flex; align-items:center; gap:11px;
  font-family:var(--font-display); font-weight:420; font-size:22px; letter-spacing:-.02em;
  color:var(--ink);
}
.brand-mark, .mark{
  width:32px; height:32px; flex:none;
  border-radius:9px; display:block;
  box-shadow:0 1px 0 rgba(17,18,16,.04), 0 0 0 1px rgba(17,18,16,.06);
  transition:transform .6s var(--ease);
}
.brand:hover .brand-mark, .brand:hover .mark{ transform:rotate(-10deg) scale(1.06); }

.links{ display:flex; align-items:center; flex-wrap:wrap; gap:30px; row-gap:10px; font-size:14.5px; }
.links a{
  color:var(--ink-soft); font-weight:450; position:relative; padding:4px 0;
  transition:color .3s var(--ease);
}
.links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%;
  background:var(--ink); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.links a:hover{ color:var(--ink); }
.links a:hover::after{ transform:scaleX(1); transform-origin:left; }
/* button-style links (Sign in / Sign out) keep their pill look — no underline */
.links a.btn::after, .links .btn::after{ display:none; }
/* ...but not their SIZE. The shared .btn is proportioned for hero calls-to-action (14.5px text,
   12px/22px padding), which in a 14.5px nav row made Sign in loom over every link beside it and sit
   off the shared baseline. Compact pill, and a lime edge so it still reads as the bar's one action. */
.links .btn{ font-size:13.5px; padding:9px 18px; font-weight:520; }
.links .btn:hover{ transform:none; box-shadow:none; } /* the nav is sticky — lifting looks like a glitch */
.links a.btn-ghost{ border-color:var(--line); color:var(--ink); }
.links a.btn-ghost:hover{ border-color:var(--lime-deep); color:var(--lime-deep); background:rgba(166,224,23,.08); }
.nav-logout{ display:inline; margin:0; }

/* burger / toggle */
.nav-toggle{
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:44px; height:42px; padding:0; cursor:pointer;
  background:transparent; border:1px solid var(--line); border-radius:50%;
  transition:border-color .2s var(--ease);
}
.nav-toggle:hover{ border-color:var(--ink); }
.nav-toggle span{
  display:block; width:18px; height:1.6px; border-radius:2px; background:var(--ink);
  transition:transform .25s var(--ease), opacity .2s var(--ease);
}
.nav.open .nav-toggle span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
.nav.open .nav-toggle span:nth-child(2){ opacity:0; }
.nav.open .nav-toggle span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }

/* scroll-progress bar (optional, wired by page JS) */
.progress{ position:fixed; top:0; left:0; height:2px; background:var(--lime); width:0; z-index:200; transition:width .1s linear; }

/* theme toggle — a quiet round button that lives in the nav, pushed to
   the right so it sits next to the links (desktop) or the hamburger (mobile) */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center; margin-left:auto;
  width:42px; height:42px; flex:none; padding:0; cursor:pointer;
  background:transparent; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:50%;
  transition:color .25s var(--ease), border-color .25s var(--ease),
             background .25s var(--ease), transform .5s var(--ease);
}
.theme-toggle:hover{ color:var(--ink); border-color:var(--ink); transform:rotate(-18deg); }
.theme-toggle:active{ transform:rotate(-18deg) scale(.94); }
.theme-toggle svg{ width:18px; height:18px; display:block; }
/* light mode shows the moon (click → go dark); dark mode shows the sun (click → go light) */
.theme-toggle .ic-sun{ display:none; }
.theme-toggle .ic-moon{ display:block; }
html[data-theme="dark"] .theme-toggle .ic-moon{ display:none; }
html[data-theme="dark"] .theme-toggle .ic-sun{ display:block; }

/* ---------------------------------------------------------
   5. BUTTONS — default ink · lime accent (.btn-primary/.btn-lime) · ghost · danger
   --------------------------------------------------------- */
.btn{
  --bg:var(--ink); --fg:var(--paper);
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--bg); color:var(--fg);
  font-family:var(--font-body);
  font-size:14.5px; font-weight:500; letter-spacing:.01em; line-height:1.2;
  padding:12px 22px; border-radius:100px; border:1px solid transparent;
  cursor:pointer; position:relative; overflow:hidden; white-space:nowrap;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease),
             color .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.btn:active{ transform:translateY(0); }
.btn .arr{ transition:transform .4s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }

/* lime accent (the primary CTA) — .btn-primary kept as an alias */
.btn-lime, .btn-primary{ --bg:var(--lime); --fg:var(--ink); font-weight:500; }
.btn-lime::before, .btn-primary::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120px 60px at var(--mx,50%) 50%, rgba(255,255,255,.55), transparent 70%);
  opacity:0; transition:opacity .4s var(--ease);
}
.btn-lime:hover::before, .btn-primary:hover::before{ opacity:1; }

/* ghost / secondary */
.btn-ghost{ --bg:transparent; --fg:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--ink); }

/* danger (text action) */
.btn-danger{ --bg:transparent; --fg:var(--danger); border-color:var(--line); }
.btn-danger:hover{ border-color:var(--danger); background:var(--danger-bg); }

/* large size */
.btn-lg{ padding:16px 30px; font-size:16px; }

/* ---------------------------------------------------------
   6. HERO + pill + actions (template public pages)
   --------------------------------------------------------- */
.hero{ text-align:center; padding:96px 0 56px; }
.hero h1{ font-size:clamp(38px,6.4vw,68px); margin:0 0 18px; }
.hero h1 .accent{ color:var(--lime-deep); font-style:italic; }
.hero p{ font-size:18px; color:var(--ink-soft); max-width:660px; margin:0 auto 30px; }
.hero .actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.actions{ display:flex; gap:14px; flex-wrap:wrap; }
.pill{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:24px;
  padding:7px 16px; border-radius:999px;
  border:1px solid var(--line); background:var(--card);
  color:var(--ink-soft); font-size:13px; font-weight:500;
}

/* ---------------------------------------------------------
   7. CARDS — design-system surface + lime hover border
   --------------------------------------------------------- */
.card{
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:34px 30px 36px; position:relative; overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  pointer-events:none; /* decorative gradient border must never intercept clicks on card content (e.g. login fields) */
  background:linear-gradient(140deg, var(--lime), transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .5s var(--ease);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent; }
.card:hover::before{ opacity:1; }

/* design-system card icon chip */
.card .ic{
  width:54px; height:54px; border-radius:15px; display:grid; place-items:center;
  background:var(--paper-2); border:1px solid var(--line-soft); margin-bottom:22px;
  transition:background .5s var(--ease), transform .5s var(--ease);
}
.card:hover .ic{ background:var(--lime); transform:rotate(-6deg); }
.card .ic svg{ width:25px; height:25px; }
.card h3{ font-size:22px; letter-spacing:-.01em; }
.card p{ margin:11px 0 0; font-size:14.5px; color:var(--muted); line-height:1.6; }

/* dark card variant */
.card-ink{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.card-ink h1,.card-ink h2,.card-ink h3,.card-ink h4{ color:var(--paper); }
.card-ink p{ color:rgba(246,245,240,.72); }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }

/* ---------------------------------------------------------
   8. FEATURE GRID (index) — .grid + .feature + emoji .ic
   --------------------------------------------------------- */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feature{
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:26px 24px;
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.feature:hover{ transform:translateY(-4px); border-color:transparent; box-shadow:var(--shadow); }
.feature h3{ margin:8px 0 6px; font-size:18px; }
.feature p{ margin:0; color:var(--muted); font-size:14.5px; }
.feature .ic{ font-size:26px; line-height:1; }

/* ---------------------------------------------------------
   9. PRICING — .cards / .card(pricing) / tier / price / devices / badge
   --------------------------------------------------------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.cards .card{ text-align:center; padding:30px 26px; }
.card .tier{ font-family:var(--font-display); font-weight:420; font-size:18px; }
.card .price{ font-family:var(--font-display); font-size:40px; font-weight:380; margin:12px 0 2px; letter-spacing:-.02em; }
.card .price small{ font-size:14px; color:var(--muted); font-weight:500; }
.card .devices{ color:var(--muted); font-size:13px; margin-bottom:20px; }
.cards .card .btn{ width:100%; }
.card-hi{ border-color:var(--lime-deep); box-shadow:0 0 0 1px var(--lime-deep) inset; }
.card-hi:hover{ box-shadow:0 0 0 1px var(--lime-deep) inset, var(--shadow); }
.badge{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--lime); color:var(--ink); font-size:11px; font-weight:700;
  padding:3px 12px; border-radius:999px;
}

/* ---------------------------------------------------------
   10. CTA box
   --------------------------------------------------------- */
.cta{ text-align:center; }
.cta .box{
  background:linear-gradient(140deg, rgba(198,255,61,.16), rgba(198,255,61,.04));
  border:1px solid var(--line); border-radius:24px; padding:52px 28px;
}

/* ---------------------------------------------------------
   11. DOWNLOAD cards
   --------------------------------------------------------- */
.dl-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; max-width:720px; margin:0 auto; }
.dl{
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:22px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.dl:hover{ transform:translateY(-4px); border-color:transparent; box-shadow:var(--shadow); }
.dl h3{ margin:0 0 2px; font-size:17px; }
.dl p{ margin:0; color:var(--muted); font-size:13px; }

/* ---------------------------------------------------------
   12. TABLES — bare <table> (templates) + .table-wrap + table.quiet
   --------------------------------------------------------- */
.table-wrap{
  width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line-soft); border-radius:var(--r); background:var(--card);
}
.table-wrap table{ min-width:520px; }
table{ width:100%; border-collapse:collapse; font-size:14.5px; color:var(--ink-soft); }
th,td{ text-align:start; padding:14px 18px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
th{
  color:var(--muted); font-weight:600; font-size:12px;
  text-transform:uppercase; letter-spacing:.1em; border-bottom:1px solid var(--line);
}
tbody tr{ transition:background .2s var(--ease); }
tbody tr:hover{ background:var(--paper-2); }
tbody tr:last-child td{ border-bottom:0; }
td:first-child, th:first-child{ color:var(--ink); }

/* design-system editorial table */
table.quiet caption{
  text-align:start; padding:22px 26px 0; font-family:var(--font-display);
  font-size:22px; color:var(--ink); letter-spacing:-.01em;
}
table.quiet .tick{ color:var(--lime-deep); }

/* click-to-sort column headers (console.js §7) — a sortable title toggles asc/desc.
   Tokens keep it light/dark aware; the ▲/▼ indicator rides on the active header. */
th[data-sort]{ cursor:pointer; user-select:none; -webkit-user-select:none; white-space:nowrap; }
th[data-sort]:hover{ color:var(--ink); }
th[data-sort]:focus-visible{ outline:2px solid var(--lime-deep); outline-offset:-2px; border-radius:4px; }
.sort-ind{ display:inline-block; margin-left:5px; font-size:9px; line-height:1; vertical-align:middle; color:var(--lime-deep); }

/* ---------------------------------------------------------
   13. STATUS TAGS — .tag / .ok / .bad
   --------------------------------------------------------- */
.tag{
  display:inline-block; font-size:11px; font-weight:600;
  padding:2px 10px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink-soft);
  transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.tag.ok{ color:var(--lime-deep); border-color:var(--lime-deep); background:rgba(166,224,23,.10); }
.tag.bad{ color:var(--danger); border-color:var(--danger); background:var(--danger-bg); }

/* ---------------------------------------------------------
   14. FORMS — design fields + template auth / row-form / inputs
   --------------------------------------------------------- */
.field{ display:flex; flex-direction:column; gap:9px; margin-bottom:20px; }
.field label{ font-weight:500; font-size:13px; letter-spacing:.04em; color:var(--ink); }
.field .hint{ font-size:12.5px; color:var(--muted); }
.field input, .field textarea, .field select{
  font-family:var(--font-body); font-size:15px; color:var(--ink);
  background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:14px 16px; width:100%;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--muted); }
.field input:hover, .field textarea:hover, .field select:hover{ border-color:rgba(17,18,16,.22); }
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--lime-deep); box-shadow:0 0 0 4px rgba(166,224,23,.18);
}
.field textarea{ resize:vertical; min-height:120px; line-height:1.6; }
.field-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.field-row .field{ flex:1; min-width:220px; margin-bottom:0; }

/* auth card (login / register / recover) */
.auth{
  max-width:400px; margin:60px auto;
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:34px 32px; box-shadow:var(--shadow-sm);
}
.auth h2{ font-size:24px; text-align:center; margin-bottom:6px; }
.auth label{ display:block; font-size:13px; color:var(--ink); font-weight:500; margin:16px 0 6px; }
.auth input{
  width:100%; padding:13px 15px; border-radius:14px;
  background:var(--card); border:1px solid var(--line); color:var(--ink); font-size:15px;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.auth input:focus{ outline:none; border-color:var(--lime-deep); box-shadow:0 0 0 4px rgba(166,224,23,.18); }
.auth .btn{ width:100%; margin-top:22px; }
.error{ color:var(--danger); font-size:13px; margin-top:12px; text-align:center; }

/* inline admin form rows */
.row-form{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.row-form > div{ display:flex; flex-direction:column; }
.row-form label{ font-size:12px; color:var(--muted); margin-bottom:5px; }
.row-form input, .row-form select{
  padding:11px 13px; border-radius:12px;
  background:var(--card); border:1px solid var(--line); color:var(--ink); font-family:inherit;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.row-form input:focus, .row-form select:focus{
  outline:none; border-color:var(--lime-deep); box-shadow:0 0 0 4px rgba(166,224,23,.18);
}

/* checkbox row (content curation) */
.check-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; cursor:pointer; }
.check-row input, .hidecat{ accent-color:var(--lime-deep); width:16px; height:16px; }

/* extend (admin) */
.extend-form{ display:flex; gap:6px; align-items:center; }
.extend-days{
  width:64px; padding:8px; border-radius:10px; border:1px solid var(--line);
  background:var(--card); color:var(--ink); font-family:inherit;
}
.extend-days:focus{ outline:none; border-color:var(--lime-deep); }

/* monospace key chips */
code.key, .key{
  background:var(--paper-2); border:1px solid var(--line);
  border-radius:7px; padding:2px 7px; font-size:13px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* accent link */
a.link-accent{ color:var(--lime-deep); transition:opacity .2s var(--ease); }
a.link-accent:hover{ opacity:.78; text-decoration:underline; }

/* ---------------------------------------------------------
   15. PANELS + ADMIN CONSOLE COMPONENTS
   --------------------------------------------------------- */
.panel{
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:24px; margin-bottom:18px;
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.panel h2, .panel h3{ margin-top:0; }
.panel-accent{ border-color:var(--lime-deep); box-shadow:0 0 0 1px rgba(166,224,23,.35) inset; }
.flash-ok{ border-color:var(--lime-deep); }
.flash-bad{ border-color:var(--danger); }

.panel-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.panel-head h3{ margin:0; }
.count-badge{
  display:inline-flex; align-items:center; justify-content:center; min-width:24px;
  padding:2px 9px; border-radius:999px;
  background:var(--paper-2); border:1px solid var(--line);
  color:var(--muted); font-size:12px; font-weight:700;
}

.page-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  flex-wrap:wrap; padding:36px 0 22px;
}
.page-head h2{ margin:0; }
.page-head p{ margin:4px 0 0; }
.page-head-actions{ display:flex; gap:10px; flex-wrap:wrap; }

.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:14px; margin-bottom:22px; }
.stat-card{
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:22px 18px; text-align:center;
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.stat-card:hover{ transform:translateY(-3px); border-color:transparent; box-shadow:var(--shadow-sm); }
.stat-card .num{ font-family:var(--font-display); font-size:34px; font-weight:380; line-height:1.1; letter-spacing:-.02em; }
.stat-card.accent .num{ color:var(--lime-deep); }
.stat-card .lbl{ color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em; margin-top:6px; }

.empty{
  color:var(--muted); font-size:14px; text-align:center;
  padding:26px 16px; border:1px dashed var(--line); border-radius:14px;
  background:var(--paper-2);
}

/* ---------------------------------------------------------
   16. FOOTER — rich sitemap (ink) + disclaimer
   --------------------------------------------------------- */
.footer{
  background:var(--ink);
  color:rgba(246,245,240,.66);
  padding:72px 0 40px;
  font-size:14px; line-height:1.65;
  margin-top:40px;
}
.footer .brand{ color:var(--paper); }
.foot-grid{
  display:grid; grid-template-columns:1.6fr .8fr .8fr 1fr; gap:40px; padding-bottom:48px;
}
.foot-brand p{ margin:18px 0 0; max-width:34ch; color:rgba(246,245,240,.66); }
.foot-brand strong{ color:var(--paper); font-weight:500; }
.foot-col h5{
  margin:0 0 16px; font:500 12px/1 var(--font-body);
  letter-spacing:.14em; text-transform:uppercase; color:var(--lime);
}
.foot-col a{
  display:block; margin-bottom:11px; color:rgba(246,245,240,.66);
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.foot-col a:hover{ color:var(--paper); transform:translateX(3px); }
.foot-disclaimer{
  margin:0; padding:22px 24px;
  border:1px solid rgba(246,245,240,.12); border-left:3px solid var(--lime);
  border-radius:14px; background:rgba(246,245,240,.03);
  color:rgba(246,245,240,.78); font-size:13px; line-height:1.7; max-width:none;
}
.foot-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-top:36px; padding-top:28px; border-top:1px solid rgba(246,245,240,.1); font-size:13px;
}
.foot-socials{ display:flex; gap:14px; }
.foot-socials a{ color:rgba(246,245,240,.55); transition:color .2s var(--ease); }
.foot-socials a:hover{ color:var(--lime); }

/* Device-ID inputs on the mint form: one per device the key covers. Its own grid because the
   row-form flex layout squeezes ten inputs into unusable slivers. */
.acx-devid-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:8px; margin-top:6px; }
.acx-devid-grid input{ width:100%; }

/* ---------------------------------------------------------
   17. VERIFICATION WIDGET
   The real Cloudflare Turnstile widget draws itself; only the
   .captcha / .captcha-row wrappers (in per-page styles) position
   it. The hand-drawn "Turnstile-style placeholder" box that used
   to live here was a mock that no markup ever rendered.
   --------------------------------------------------------- */

/* Reserve the widget's height up front. An empty 0-height slot both makes the
   loader's "is this box real yet?" check unreliable and shifts the whole form
   down the moment the iframe lands. 65px is Turnstile's own rendered height. */
.cf-turnstile{ min-height:65px; }

/* Shown only when the widget failed to load (see fragments/common :: head). */
.cf-turnstile-note{ font-size:13px; line-height:1.5; color:#c0392b; margin-top:6px; }
.cf-turnstile-retry{
  font:inherit; color:inherit; background:none; border:0; padding:0;
  text-decoration:underline; cursor:pointer;
}

/* ---------------------------------------------------------
   18. SUPPORT CHAT WIDGET (visitor side) — light theme
   --------------------------------------------------------- */
.seao-chat{ position:fixed; inset-inline-end:22px; bottom:22px; z-index:9999; font-size:14px; }
.seao-chat-toggle{
  width:58px; height:58px; border-radius:50%; border:none; cursor:pointer;
  background:var(--lime); color:var(--ink);
  font-size:24px; box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.seao-chat-toggle:hover{ transform:translateY(-2px); }
.seao-chat-toggle.open{ transform:scale(.92); }
.seao-chat-panel[hidden], .seao-chat-email[hidden], .seao-chat-status[hidden]{ display:none; }
.seao-chat-panel{
  position:absolute; inset-inline-end:0; bottom:70px; width:350px; max-width:calc(100vw - 32px);
  height:480px; max-height:calc(100vh - 120px); display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden;
  box-shadow:var(--shadow);
}
.seao-chat-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; font-weight:600; border-bottom:1px solid var(--line); background:var(--paper-2);
}
.seao-chat-x{ background:none; border:none; color:var(--muted); font-size:22px; line-height:1; cursor:pointer; }
.seao-chat-x:hover{ color:var(--ink); }
.seao-chat-log{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; }
.seao-msg{ display:flex; }
.seao-msg.me{ justify-content:flex-end; }
.seao-msg.them{ justify-content:flex-start; }
.seao-msg.sys{ justify-content:center; }
.seao-msg.sys span{ color:var(--muted); font-size:12px; text-align:center; max-width:90%; }
/* The Telegram offer under the greeting. Styled as a system line rather than a bubble because it is
   not something anybody said. Its <a> is inserted directly, so it needs the sizing that the sys rule
   above gives to a <span>.
   The accent is the UNDERLINE, not the text: --lime-deep on the panel's white card is about 1.6:1,
   which is fine for a display heading and unreadable at 12px. Ink text beside the muted grey of the
   other system lines already reads as the one thing here to press; the lime rule under it is what
   makes it ours. */
.seao-chat-tg a{
  color:var(--ink); font-size:12px; font-weight:600; text-decoration:none;
  border-bottom:2px solid var(--lime-deep); padding-bottom:1px;
}
.seao-chat-tg a:hover{ border-bottom-color:var(--ink); }
/* Selector written against `.seao-msg.sys` rather than `.seao-chat-tg` for the SPECIFICITY, and
   `color:inherit` is the point of it: `.seao-msg.sys span` above is (0,2,1) and matches this handle as
   a descendant, so a declared --muted beat the --ink the link sets, whatever the source order — the
   label read as ink and the handle beside it as grey, halfway through one underlined link. Three
   classes (0,3,0) take it back, and `inherit` keeps it tied to the link's colour rather than restating
   it. Do not narrow this to `.seao-chat-tg .tg-h`: that is (0,2,0) and loses again. */
.seao-msg.sys .tg-h{ unicode-bidi:isolate; direction:ltr; color:inherit; }
.seao-bubble{ max-width:78%; padding:9px 13px; border-radius:14px; line-height:1.45; word-wrap:break-word; }
.seao-msg.me .seao-bubble{ background:var(--ink); color:var(--paper); border-end-end-radius:4px; }
.seao-msg.them .seao-bubble{ background:var(--paper-2); border:1px solid var(--line); color:var(--ink); border-end-start-radius:4px; }
.seao-dots{ display:flex; gap:4px; }
.seao-dots span{ width:6px; height:6px; border-radius:50%; background:var(--muted); animation:seao-blink 1.2s infinite both; }
.seao-dots span:nth-child(2){ animation-delay:.2s; }
.seao-dots span:nth-child(3){ animation-delay:.4s; }
.seao-chat-email{ display:flex; gap:6px; padding:8px 12px; border-top:1px solid var(--line); }
.seao-chat-email input{ flex:1; padding:9px 11px; border-radius:10px; background:var(--card); border:1px solid var(--line); color:var(--ink); }
.seao-chat-email-btn{ padding:9px 12px; border-radius:10px; border:1px solid var(--line); background:var(--paper-2); color:var(--ink); cursor:pointer; }
.seao-chat-form{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); }
.seao-chat-form input{ flex:1; padding:11px 13px; border-radius:12px; background:var(--card); border:1px solid var(--line); color:var(--ink); }
.seao-chat-form input:focus{ outline:none; border-color:var(--lime-deep); }
.seao-chat-send{
  width:42px; border:none; border-radius:12px; cursor:pointer;
  background:var(--lime); color:var(--ink); font-size:15px;
}
.seao-chat-attach{
  width:42px; flex:none; border:1px solid var(--line); border-radius:12px; cursor:pointer;
  background:var(--card); color:var(--ink); font-size:16px;
}
.seao-chat-attach:hover{ background:var(--paper-2); }

/* image attachments in the log */
.seao-stack{ display:flex; flex-direction:column; gap:6px; max-width:78%; }
.seao-msg.me .seao-stack{ align-items:flex-end; }
.seao-msg.them .seao-stack{ align-items:flex-start; }
.seao-img{
  display:block; max-width:200px; max-height:220px; border-radius:12px;
  border:1px solid var(--line); cursor:pointer;
}
.seao-img-link{ display:inline-block; line-height:0; }

/* email gate: stack the note above the field + button */
.seao-chat-email{ flex-direction:column; align-items:stretch; gap:8px; }
.seao-chat-email-note{ font-size:12.5px; color:var(--muted); line-height:1.45; }

/* queue / "your turn" strip — one quiet line under the header saying where the visitor stands.
   Tokens only, so the dark block at :822 needs no companion rule: --ink-soft, --paper-2 and --line are
   all redefined there. The .live tint is the same lime wash the console uses for a live conversation. */
.seao-chat-status{
  padding:9px 14px; font-size:12.5px; line-height:1.45; color:var(--ink-soft);
  background:var(--paper-2); border-bottom:1px solid var(--line);
}
.seao-chat-status.live{ color:var(--ink); background:rgba(166,224,23,.16); }

/* agent console (admin/chat) */
.chat-admin{ display:grid; grid-template-columns:320px 1fr; gap:18px; align-items:start; }
.chat-list{ max-height:70vh; overflow-y:auto; padding:10px; }
.chat-conv{
  display:block; width:100%; text-align:left; cursor:pointer; padding:11px 12px; border-radius:12px;
  border:1px solid transparent; background:none; color:var(--ink); margin-bottom:4px;
}
.chat-conv:hover{ background:var(--paper-2); }
.chat-conv.active{ background:var(--paper-2); border-color:var(--line); }
.chat-conv .subj{ font-weight:600; font-size:14px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-conv .meta{ color:var(--muted); font-size:12px; display:flex; gap:8px; align-items:center; margin-top:3px; }
.chat-conv .dot{ width:8px; height:8px; border-radius:50%; background:var(--lime-deep); display:inline-block; }
.chat-thread{ display:flex; flex-direction:column; min-height:60vh; }
.chat-thread-head{ font-weight:600; margin-bottom:10px; }
.chat-thread-log{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:4px 2px; min-height:320px; }
.chat-thread-form{ display:flex; gap:8px; margin-top:12px; }
.chat-thread-form input{ flex:1; padding:11px 13px; border-radius:12px; background:var(--card); border:1px solid var(--line); color:var(--ink); }
.chat-thread-form input:focus{ outline:none; border-color:var(--lime-deep); }

/* ---------------------------------------------------------
   18b. FLOATING TELEGRAM BUTTON — the corner's second tenant
   Read this together with the chat widget above, because the
   two share one corner. .seao-chat is z-index:9999 and its
   OPEN panel is a 350x480 box anchored at bottom:70px, so this
   button is deliberately 9998: a support shortcut must never
   cover a conversation already in progress.
   Vertically it goes the other way and sits ABOVE the chat
   toggle (.with-chat). The chat widget is switchable off and
   is hidden from staff, and a button floating over an empty
   corner looks broken, so the template hands us .solo for
   that case and it takes the corner slot itself.
   Logical properties throughout: the Arabic site is RTL and
   both tenants have to mirror together.
   --------------------------------------------------------- */
.seao-tg{ position:fixed; inset-inline-end:22px; z-index:9998; font-size:14px; }
/* 22px corner + the chat toggle's 58px + a 12px gap between the two circles. */
.seao-tg.with-chat{ bottom:92px; }
.seao-tg.solo{ bottom:22px; }
/* Ink on paper rather than a second lime circle: two identical lime bubbles stacked read as one
   control that has duplicated itself. Both tokens flip together in dark mode, so this inverts
   cleanly instead of needing a companion rule down in section 22.

   The pale ring is not decoration. .footer is also background:var(--ink) (section 16), and the
   footer is exactly where someone hunting for a way to contact us ends up — so on the one screen
   this button matters most, an unringed ink circle on an ink ground disappears and only the glyph
   survives. The ring reads as a hairline on paper and as the button's edge on the footer. */
.seao-tg-toggle{
  width:52px; height:52px; border-radius:50%; border:none; cursor:pointer;
  background:var(--ink); color:var(--paper);
  box-shadow:var(--shadow-sm), 0 0 0 1px rgba(246,245,240,.26);
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s var(--ease);
}
.seao-tg-toggle:hover{ transform:translateY(-2px); }
.seao-tg.open .seao-tg-toggle{ transform:scale(.92); }
.seao-tg-toggle:focus-visible{ outline:2px solid var(--lime-deep); outline-offset:2px; }
/* The UA's [hidden] rule loses to display:flex — the same trap the chat panel above sidesteps. */
.seao-tg-menu[hidden]{ display:none; }
.seao-tg-menu{
  position:absolute; inset-inline-end:0; bottom:62px; width:264px; max-width:calc(100vw - 44px);
  display:flex; flex-direction:column; gap:2px; padding:6px;
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow);
}
.seao-tg-item{
  display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:11px;
  color:var(--ink); transition:background .2s var(--ease);
}
.seao-tg-item:hover{ background:var(--paper-2); }
/* A Telegram handle is a Latin string that begins with "@". Dropped into an RTL paragraph the
   bidi algorithm resolves that leading "@" as neutral and flips it to the far side, so the
   Arabic site rendered "@Streameowpro" as "Streameowpro@" — a handle nobody can retype. Isolating
   the span pins it to its own LTR run without affecting the label above it. */
.seao-tg-item .sub{ unicode-bidi:isolate; direction:ltr; text-align:start; }
.seao-tg-item:focus-visible{ outline:2px solid var(--lime-deep); outline-offset:-2px; background:var(--paper-2); }
.seao-tg-item svg{ width:20px; height:20px; flex:none; color:var(--lime-deep); }
.seao-tg-item b{ display:block; font-weight:500; line-height:1.35; }
.seao-tg-item .sub{ display:block; font-size:12.5px; color:var(--muted); }

/* ---------------------------------------------------------
   19. SCROLL-REVEAL + ANIMATION UTILITIES
   --------------------------------------------------------- */
.r{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.r.in{ opacity:1; transform:none; }
.r.d1{ transition-delay:.08s; } .r.d2{ transition-delay:.16s; } .r.d3{ transition-delay:.24s; }
.r.d4{ transition-delay:.32s; } .r.d5{ transition-delay:.40s; } .r.d6{ transition-delay:.48s; }

.reveal-up{ opacity:0; transform:translateY(24px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.in .reveal-up, .reveal-up.in{ opacity:1; transform:none; }
.reveal-up.d1{ transition-delay:.32s; } .reveal-up.d2{ transition-delay:.42s; } .reveal-up.d3{ transition-delay:.52s; }

.bar{ position:absolute; top:-1px; left:0; height:2px; width:0; background:var(--ink); transition:width 1.1s var(--ease-out); }
.in .bar{ width:100%; }

.float{ animation:floaty 7s ease-in-out infinite; }
.float.f2{ animation-duration:8.5s; animation-delay:-2s; }
.float.f3{ animation-duration:9.5s; animation-delay:-4s; }
.float.f4{ animation-duration:8s; animation-delay:-1s; }
.float.f5{ animation-duration:10s; animation-delay:-3s; }
.pulse{ animation:pulse 2s infinite; }

/* lightweight entrance for stacked grids (template pages) */
@keyframes seao-fade-up{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.hero, .panel, .auth, .section-head{ animation:seao-fade-up .5s ease both; }
.grid > *, .cards > *, .dl-grid > *, .stat-grid > *{ animation:seao-fade-up .5s ease both; }
.grid > *:nth-child(2), .cards > *:nth-child(2), .dl-grid > *:nth-child(2), .stat-grid > *:nth-child(2){ animation-delay:.06s; }
.grid > *:nth-child(3), .cards > *:nth-child(3), .stat-grid > *:nth-child(3){ animation-delay:.12s; }
.grid > *:nth-child(4), .stat-grid > *:nth-child(4){ animation-delay:.18s; }
.grid > *:nth-child(5), .stat-grid > *:nth-child(5){ animation-delay:.24s; }
.grid > *:nth-child(6), .stat-grid > *:nth-child(6){ animation-delay:.30s; }

@keyframes floaty{ 0%,100%{ transform:var(--base,translateY(0)) translateY(0); } 50%{ transform:var(--base,translateY(0)) translateY(-14px); } }
@keyframes pulse{ 50%{ box-shadow:0 0 0 8px rgba(198,255,61,0); } }
@keyframes slide{ to{ transform:translateX(-50%); } }
@keyframes sheetIn{ to{ opacity:1; transform:translateY(0); } }
@keyframes seao-blink{ 0%,80%,100%{ opacity:.3; } 40%{ opacity:1; } }

/* ---------------------------------------------------------
   20. RESPONSIVE
   --------------------------------------------------------- */
@media (max-width:1000px){
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:40px 24px; }
}
@media (max-width:860px){
  .nav-inner{ flex-wrap:wrap; padding:14px 18px; }
  .nav-toggle{ display:flex; }
  .links{
    display:none; flex-basis:100%; flex-direction:column; align-items:stretch;
    gap:2px; margin-top:12px; font-size:16px;
  }
  .nav.open .links{ display:flex; animation:seao-fade-up .25s ease both; }
  .links a{ padding:12px 8px; border-radius:10px; color:var(--ink); }
  .links a::after{ display:none; }
  .links a:hover{ background:var(--paper-2); }
  .links .btn{ width:100%; text-align:center; margin-top:6px; }
  .nav-logout{ display:block; }
  .nav-logout .btn{ width:100%; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .foot-brand{ grid-column:1 / -1; }
  .chat-admin{ grid-template-columns:1fr; }
}
@media (max-width:820px){
  .grid, .cards, .dl-grid{ grid-template-columns:1fr; }
}
/* tablet: two-up for the feature grid + pricing cards (the 1-col rule above
   still governs below ~560px; this narrower query wins in between) */
@media (max-width:1000px) and (min-width:561px){
  .grid, .cards{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px){
  main{ padding:0 16px; }
  section{ padding:44px 0; }
  .section{ padding:80px 0; }
  .page-head{ padding:26px 0 18px; }
  .hero{ padding:56px 0 32px; }
  .cta .box{ padding:34px 18px; }
}
@media (max-width:680px){
  .wrap{ padding-inline:22px; }
  .grid-3, .grid-2{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .hero .actions{ flex-direction:column; }
  .hero .actions .btn{ width:100%; }
  .auth{ margin:30px 0; padding:24px 22px; }
  .row-form{ flex-direction:column; align-items:stretch; gap:12px; }
  .row-form > div{ width:100%; }
  .row-form input, .row-form select{ width:100%; }
  .row-form .btn{ width:100%; }
  .dl{ flex-direction:column; align-items:flex-start; }
  .dl .btn{ width:100%; text-align:center; }
  .stat-card .num{ font-size:28px; }
  .foot-grid{ grid-template-columns:1fr; }
  .foot-bottom{ justify-content:flex-start; }
  /* Leave room so the fixed widgets never cover the foot of the page. The old 96px was sized for the
     chat toggle alone; the Telegram button now stacks above it, so the tallest case is 14 + 58 + 12 +
     52 = 136px, plus 16px so the stack clears the last line of text rather than just touching it,
     and the home-indicator inset sits under all of it. Reserved unconditionally rather
     than per-page: the alternative is an :has() rule that silently reserves nothing on the older
     iOS versions this padding exists for, and dead space at the bottom of a dark footer costs less
     than a button parked on the copyright line.

     The `body ` prefix is load-bearing — do not trim it back to a bare `.footer`. Nine pages
     (legal/contact, faq, terms, privacy, refund, cookies, disclaimer, dmca, plus every ar/legal
     mirror that pulls those pagestyle blocks in) re-declare `.footer{ padding:72px 0 40px }` in a
     <style> block inside <body>. That is later in the document and of equal specificity, so a bare
     `.footer` here loses the shorthand and reserves nothing on precisely the pages the support
     links point customers at. */
  body .footer{ padding-bottom:calc(152px + env(safe-area-inset-bottom)); }
  /* honour the iOS home-indicator safe area */
  .seao-chat{ inset-inline-end:14px; bottom:calc(14px + env(safe-area-inset-bottom)); }
  .seao-tg{ inset-inline-end:14px; }
  .seao-tg.with-chat{ bottom:calc(84px + env(safe-area-inset-bottom)); }
  .seao-tg.solo{ bottom:calc(14px + env(safe-area-inset-bottom)); }
}

/* ---------------------------------------------------------
   21. REDUCED MOTION FALLBACK
   --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  /* The end mark is punctuation, so it must be PRESENT, not merely unanimated: its resting state is
     invisible, and turning off animation would leave the heading with no full stop at all. */
  .r .pawmark-stop, .reveal-up .pawmark-stop{
    opacity:1 !important;
    transform:translateY(var(--pawstop-seat)) !important;
    transition:none !important;
  }
  .seao-face .lid{ animation:none !important; }
  /* The cat stands still. Paw prints stay VISIBLE (they are part of the page's
     texture, not a loading state) — only the walking and stepping stop. */
  .apps-pair img, .in .apps-pair img, .apps-pair:hover img,
  .brand:hover .brand-mark, .brand:active .brand-mark{ animation:none !important; transform:none !important; }
  .paw-walk img, .in .paw-walk img, .paw-walk.in img, .paw-walk.in img:nth-child(even){
    opacity:.4 !important; transform:none !important; transition:none !important;
  }
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
  .r, .reveal-up{ opacity:1 !important; transform:none !important; }
  .bar{ width:100% !important; }
}

/* ---------------------------------------------------------
   22. DARK THEME — html[data-theme="dark"]
        Flips the base tokens (the --bg / --text / --accent aliases
        recompute from them automatically) then re-tunes the handful
        of components that bake in a light/dark intent, so the whole
        surface stays cohesive. Lime accent intact; no pure black/white.
   --------------------------------------------------------- */
html[data-theme="dark"]{
  --ink:        #f3f2ec;   /* text → warm off-white            */
  --ink-soft:   #c8c7bf;   /* secondary text                   */
  --paper:      #0f100d;   /* page background → near-black     */
  --paper-2:    #16170f;   /* deeper surface                   */
  --card:       #1b1c16;   /* elevated card surface            */
  --line:       rgba(255,255,255,.13);
  --line-soft:  rgba(255,255,255,.07);
  --muted:      #9a9b90;
  --lime:       #C6FF3D;   /* accent unchanged                 */
  --lime-deep:  #C6FF3D;   /* bright lime reads on dark        */

  /* softer, blacker elevation suited to a dark canvas */
  --shadow:     0 34px 80px -42px rgba(0,0,0,.75);
  --shadow-sm:  0 20px 44px -30px rgba(0,0,0,.80);

  color-scheme:dark;
}

/* keep dark text on the lime selection highlight (--ink is now light) */
html[data-theme="dark"] ::selection{ background:var(--lime); color:#111210; }

/* sticky nav — translucent dark glass instead of paper glass */
html[data-theme="dark"] .nav{ background:rgba(15,16,13,.72); }

/* the rounded logo ring reads as a faint light edge on dark */
html[data-theme="dark"] .brand-mark,
html[data-theme="dark"] .mark{ box-shadow:0 0 0 1px rgba(255,255,255,.08); }

/* text-on-lime elements must stay dark (the ink token is now light) */
html[data-theme="dark"] .btn-lime,
html[data-theme="dark"] .btn-primary{ --fg:#111210; }
html[data-theme="dark"] .badge{ color:#111210; }
html[data-theme="dark"] .card:hover .ic{ color:#111210; }
html[data-theme="dark"] .seao-chat-toggle,
html[data-theme="dark"] .seao-chat-send{ color:#111210; }

/* the "ink" feature card stays a distinct elevated dark panel (not inverted) */
html[data-theme="dark"] .card-ink{
  background:#23251a; color:var(--ink); border-color:var(--line);
}
html[data-theme="dark"] .card-ink h1,
html[data-theme="dark"] .card-ink h2,
html[data-theme="dark"] .card-ink h3,
html[data-theme="dark"] .card-ink h4{ color:var(--ink); }
html[data-theme="dark"] .card-ink p{ color:var(--ink-soft); }

/* Panels that are deliberately DARK in light mode but live in a page's own <style> block, so they
   never got the treatment .card-ink and .footer got above. Their background is var(--ink), which the
   token flip turns near-WHITE, while every text rule inside them hard-codes rgba(246,245,240,…) —
   the panel inverts and its text drops to ~1.02:1. Pin them to the same elevated dark surface, the
   decision already taken three times (.card-ink :860, .footer :876, .apps-side.dark index.html:109).
   Page-local class names, but verified collision-free: index .cta-box/.scr, legal/faq .doc-cta,
   legal/contact .reach-card, reseller/portal .stat.accent. (.callout, .contact-card and .auth-aside
   are NOT here — each is a LIGHT panel on some other page, so they are pinned in their own file.) */
html[data-theme="dark"] .cta-box,
html[data-theme="dark"] .doc-cta,
html[data-theme="dark"] .reach-card,
html[data-theme="dark"] .stat.accent{ background:#23251a; color:var(--ink); border-color:var(--line); }
/* …and the children those panels paint with var(--paper), which is near-black once flipped */
html[data-theme="dark"] .cta-box h2,
html[data-theme="dark"] .doc-cta h3,
html[data-theme="dark"] .reach-card h2,
html[data-theme="dark"] .reach-card .mail,
html[data-theme="dark"] .reach-card .resp strong,
html[data-theme="dark"] .stat.accent .num{ color:var(--ink); }
/* the hero device mockups: an ink frame with hard-coded light chrome (.scr-appbar #eef0e6,
   .scr-lbl #c7c9bd) sitting straight on it, plus a lime LIVE chip that must keep dark text */
html[data-theme="dark"] .scr{ background:#23251a; }
html[data-theme="dark"] .scr-hero .live{ color:#111210; }

/* ~50 inline SVGs are drawn with a hard-coded stroke="#111210" and sit on chips painted with tokens
   that flip (.card .ic and .reach-link .ric are var(--paper-2) → #16170f; the FAQ .ico is
   transparent over --paper). In dark mode that is 1.03:1 — the icon simply vanishes. Repaint them,
   then put the dark stroke back on the states where the chip is LIME in both themes. A presentation
   attribute has zero specificity, so any CSS rule wins; children with their own stroke are untouched. */
html[data-theme="dark"] svg[stroke="#111210"]{ stroke:var(--ink); }
html[data-theme="dark"] svg [fill="#111210"]{ fill:var(--ink); }
/* Chips that are LIME in both themes must keep the dark stroke — the repaint above would put
   near-white on lime at 1.05:1. Three of these were missed on the first pass and are regressions
   the repaint itself introduced: .notice.flash .mark (the success tick on the reseller portal, shown
   after issuing a key), .auth-card:hover .ic-key (the admin sign-in card — note .ic-key is its own
   class, and a class selector never matches .ic as a prefix), and .form-done .ok (latent: the
   element exists but nothing adds its .show class yet). */
html[data-theme="dark"] .card:hover .ic svg[stroke="#111210"],
html[data-theme="dark"] .reach-link:hover .ric svg[stroke="#111210"],
html[data-theme="dark"] .faq-list details[open] summary .ico svg[stroke="#111210"],
html[data-theme="dark"] .notice.flash .mark svg[stroke="#111210"],
html[data-theme="dark"] .auth-card:hover .ic-key svg[stroke="#111210"],
html[data-theme="dark"] .form-done .ok svg[stroke="#111210"]{ stroke:#111210; }
html[data-theme="dark"] .card:hover .ic svg [fill="#111210"],
html[data-theme="dark"] .notice.flash .mark svg [fill="#111210"],
html[data-theme="dark"] .auth-card:hover .ic-key svg [fill="#111210"],
html[data-theme="dark"] .form-done .ok svg [fill="#111210"]{ fill:#111210; }

/* form fields — fix the hardcoded light hover border */
html[data-theme="dark"] .field input:hover,
html[data-theme="dark"] .field textarea:hover,
html[data-theme="dark"] .field select:hover{ border-color:rgba(255,255,255,.24); }

/* tables — a whisper of header lift on dark */
html[data-theme="dark"] table th{ background:rgba(255,255,255,.022); }

/* FOOTER — it is intentionally dark/ink in light mode, so in dark mode
   keep it a *slightly elevated* dark surface, NOT inverted to a light bar */
html[data-theme="dark"] .footer{
  background:#17180f;
  color:var(--ink-soft);
  border-top:1px solid var(--line);
}
html[data-theme="dark"] .footer .brand,
html[data-theme="dark"] .foot-brand strong,
html[data-theme="dark"] .foot-col a:hover{ color:var(--ink); }

/* auth card — lean on --card, just soften the resting lift */
html[data-theme="dark"] .auth{ box-shadow:var(--shadow-sm); }

/* =========================================================
   23. ADMIN CONSOLE CHROME — ".acx-" (the "control room" shell)
        Sidebar + topbar + content furniture for fragments/console.html.
        Uses ONLY design tokens, so light + dark theming is automatic.
        Responsive: the sidebar becomes a 64px icon rail under 860px and
        opens as an overlay drawer via .acx-app.acx-nav-open (console.js).
   --------------------------------------------------------- */
.acx-body{ background:var(--paper); }

.acx-app{
  --acx-rail: 264px;
  display:grid;
  grid-template-columns: var(--acx-rail) minmax(0, 1fr);
  min-height:100vh;
}
/* No sidebar — the console shell rendered for an EMPLOYEE, who can reach exactly one page in it.
   Collapsing the rail to a single column matters beyond looks: the grid would otherwise hold a 264px
   gap where the nav used to be. Declared with the same specificity as the rule above and after it, so
   it wins without !important. The mobile override below re-states it for the same reason. */
.acx-app.is-solo{ grid-template-columns: minmax(0, 1fr); }

/* ---- sidebar ---- */
.acx-sidebar{
  position:sticky; top:0; align-self:start;
  height:100vh; overflow-y:auto;
  display:flex; flex-direction:column; gap:6px;
  padding:22px 16px 20px;
  background:var(--card);
  border-right:1px solid var(--line);
}
.acx-brand{
  display:flex; align-items:center; gap:11px;
  padding:6px 10px 18px; margin-bottom:6px;
  border-bottom:1px solid var(--line-soft);
}
/* The same brand lockup sitting in the TOPBAR rather than at the head of the rail (employee view).
   Undoes the rail-specific padding, bottom rule and margin, which read as a stray divider up there. */
.acx-brand.acx-brand-inline{
  padding:0; margin:0 auto 0 0; border-bottom:0; text-decoration:none; color:inherit;
}
.acx-brand-mark{ border-radius:9px; flex:none; }
.acx-brand-text{ font-family:var(--font-display); font-size:19px; letter-spacing:-.01em; color:var(--ink); white-space:nowrap; }
.acx-brand-text b{ font-weight:500; color:var(--lime-deep); }

.acx-nav{ display:flex; flex-direction:column; gap:20px; flex:1; }
.acx-nav-group{ display:flex; flex-direction:column; gap:2px; }
.acx-nav-bottom{ margin-top:auto; padding-top:16px; border-top:1px solid var(--line-soft); }
.acx-nav-label{
  padding:0 12px 6px; font-size:10.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.acx-nav-item{
  display:flex; align-items:center; gap:12px;
  padding:9px 12px; border-radius:12px;
  font-size:14.5px; font-weight:450; color:var(--ink-soft);
  transition:background .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
.acx-nav-item:hover{ background:var(--paper-2); color:var(--ink); }
.acx-nav-item.is-active{ background:var(--ink); color:var(--paper); }
.acx-nav-item.is-active .acx-ic{ color:var(--lime); }
.acx-ic{
  width:19px; height:19px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ---- main column ---- */
.acx-main{ display:flex; flex-direction:column; min-width:0; min-height:100vh; }

/* ---- topbar ---- */
.acx-topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:16px;
  padding:14px 26px;
  background:color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.acx-search{
  display:flex; align-items:center; gap:9px; flex:1; max-width:460px;
  padding:9px 14px; border-radius:12px;
  background:var(--paper-2); border:1px solid var(--line-soft);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.acx-search:focus-within{ border-color:var(--lime-deep); box-shadow:0 0 0 4px rgba(166,224,23,.16); }
.acx-search svg{ width:17px; height:17px; flex:none; fill:none; stroke:var(--muted); stroke-width:1.9; stroke-linecap:round; }
.acx-search input{
  flex:1; min-width:0; border:none; background:transparent; outline:none;
  font-family:var(--font-body); font-size:14px; color:var(--ink);
}
.acx-search input::placeholder{ color:var(--muted); }

.acx-topbar-right{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.acx-env{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px; border-radius:100px;
  font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-soft); background:var(--paper-2); border:1px solid var(--line);
}
.acx-env::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--lime-deep); }

.acx-icon-btn{
  display:inline-grid; place-items:center; width:38px; height:38px;
  border-radius:11px; border:1px solid var(--line); background:var(--card);
  color:var(--ink-soft); cursor:pointer;
  transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.acx-icon-btn:hover{ border-color:var(--ink); color:var(--ink); }
.acx-icon-btn svg{ width:18px; height:18px; }
.acx-logout{ margin:0; display:inline-flex; }

/* topbar theme-toggle uses the shared .ic-sun / .ic-moon swap already in the design system */
.acx-icon-btn.theme-toggle .ic-moon{ display:block; }
.acx-icon-btn.theme-toggle .ic-sun{ display:none; }
html[data-theme="dark"] .acx-icon-btn.theme-toggle .ic-moon{ display:none; }
html[data-theme="dark"] .acx-icon-btn.theme-toggle .ic-sun{ display:block; }

.acx-profile{
  display:inline-flex; align-items:center; gap:9px;
  padding:5px 12px 5px 6px; border-radius:100px;
  border:1px solid var(--line); background:var(--card);
  transition:border-color .25s var(--ease);
}
.acx-profile:hover{ border-color:var(--ink); }
.acx-avatar{
  display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%;
  background:var(--ink); color:var(--paper); font-size:13px; font-weight:600; flex:none;
}
.acx-profile-name{ font-size:13.5px; color:var(--ink-soft); max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- hamburger (mobile only) ---- */
.acx-hamburger{
  display:none; width:38px; height:38px; border-radius:11px;
  border:1px solid var(--line); background:var(--card); cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.acx-hamburger span{ width:16px; height:1.8px; background:var(--ink); border-radius:2px; }

/* ---- scrim (mobile drawer backdrop) ---- */
.acx-scrim{ display:none; }

/* ---- content ---- */
.acx-content{ padding:34px 32px 80px; max-width:1200px; width:100%; }

/* -------- console primitives section pages build on (all token-based) -------- */
.acx-page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:22px; flex-wrap:wrap; margin-bottom:28px; }
.acx-page-head h1{ font-size:clamp(28px,4vw,42px); letter-spacing:-.02em; margin:0; }
.acx-page-head .acx-lede{ margin:10px 0 0; color:var(--muted); font-size:15px; max-width:60ch; }

.acx-stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:26px; }
.acx-stat{
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:20px 22px; position:relative; overflow:hidden;
}
.acx-stat .acx-stat-num{ font-family:var(--font-display); font-weight:340; font-size:34px; line-height:1; letter-spacing:-.02em; color:var(--ink); }
.acx-stat .acx-stat-lbl{ margin-top:9px; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.acx-stat.accent::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--lime); }
/* A tile that is also the link to its own filtered list. Inherits colour so the number and label keep
   the plain-tile treatment instead of turning into blue underlined link text. */
a.acx-stat-link{ display:block; color:inherit; text-decoration:none; transition:border-color .18s, transform .18s; }
a.acx-stat-link:hover{ border-color:var(--lime-deep); transform:translateY(-1px); }
a.acx-stat-link:focus-visible{ outline:2px solid var(--lime-deep); outline-offset:2px; }

.acx-panel{
  background:var(--card); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:26px 26px 28px; margin-bottom:22px;
}
.acx-panel-head{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.acx-panel-head h2{ font-size:22px; letter-spacing:-.01em; margin:0; }

/* status pills for console pages (tokened light+dark) */
.acx-pill{
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600;
  letter-spacing:.05em; padding:4px 10px; border-radius:100px; border:1px solid var(--line);
  color:var(--ink-soft); background:var(--paper-2); white-space:nowrap;
}
.acx-pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.85; }
.acx-pill.crit{ color:var(--danger); background:var(--danger-bg); border-color:rgba(207,59,59,.3); }
.acx-pill.warn{ color:#9a6a12; background:rgba(214,158,46,.12); border-color:rgba(214,158,46,.35); }
.acx-pill.info{ color:var(--ink-soft); }
.acx-pill.ok{ color:var(--lime-deep); background:rgba(166,224,23,.14); border-color:rgba(166,224,23,.45); }
html[data-theme="dark"] .acx-pill.warn{ color:#e6b657; }

/* ---- activity-log ACTION pills, coloured by family (AuditService.familyOf) ----
   The family answers "what kind of thing was this" and is orthogonal to the ok/refused pill beside it,
   which stays the only signal for whether it succeeded. Each family is a hue + a matching 12%-alpha
   wash, and the ::before dot inherits currentColor, so the pill reads as a unit.

   Every colour below is a LITERAL rather than a token because these are identity colours for eleven
   categories — the design system carries exactly one accent, so a token-only palette here would collapse
   into eleven shades of lime. They are re-stated for dark mode rather than flipped automatically:
   the light steps sit around 35–45% lightness for contrast on paper and would disappear on near-black. */
.acx-pill.fam-credits{     color:#7a5a00; background:rgba(196,145,0,.13);  border-color:rgba(196,145,0,.38); }
.acx-pill.fam-lifetime{    color:#5b3fd6; background:rgba(107,78,245,.12); border-color:rgba(107,78,245,.38); }
.acx-pill.fam-mint{        color:#3f7d2f; background:rgba(93,167,66,.14);  border-color:rgba(93,167,66,.40); }
.acx-pill.fam-extend{      color:#1f6f7a; background:rgba(31,111,122,.12); border-color:rgba(31,111,122,.35); }
.acx-pill.fam-restore{     color:#2f6f4f; background:rgba(47,111,79,.12);  border-color:rgba(47,111,79,.35); }
.acx-pill.fam-destructive{ color:#b3261e; background:rgba(179,38,30,.10);  border-color:rgba(179,38,30,.35); }
.acx-pill.fam-account{     color:#8a4b1f; background:rgba(138,75,31,.11);  border-color:rgba(138,75,31,.34); }
.acx-pill.fam-impersonation{ color:#8c2f6b; background:rgba(140,47,107,.11); border-color:rgba(140,47,107,.34); }
.acx-pill.fam-config{      color:#5a5f6b; background:rgba(90,95,107,.10);  border-color:rgba(90,95,107,.30); }
.acx-pill.fam-messaging{   color:#2b5aa8; background:rgba(43,90,168,.11);  border-color:rgba(43,90,168,.34); }
.acx-pill.fam-provision{   color:#4a6b1f; background:rgba(74,107,31,.11);  border-color:rgba(74,107,31,.32); }
.acx-pill.fam-other{       color:var(--ink-soft); }

html[data-theme="dark"] .acx-pill.fam-credits{     color:#e8bb4a; background:rgba(232,187,74,.12);  border-color:rgba(232,187,74,.32); }
html[data-theme="dark"] .acx-pill.fam-lifetime{    color:#a894ff; background:rgba(168,148,255,.13); border-color:rgba(168,148,255,.34); }
html[data-theme="dark"] .acx-pill.fam-mint{        color:#8fd06f; background:rgba(143,208,111,.13); border-color:rgba(143,208,111,.34); }
html[data-theme="dark"] .acx-pill.fam-extend{      color:#63c2cf; background:rgba(99,194,207,.12);  border-color:rgba(99,194,207,.32); }
html[data-theme="dark"] .acx-pill.fam-restore{     color:#6fc79a; background:rgba(111,199,154,.12); border-color:rgba(111,199,154,.32); }
html[data-theme="dark"] .acx-pill.fam-destructive{ color:#f0857c; background:rgba(240,133,124,.12); border-color:rgba(240,133,124,.34); }
html[data-theme="dark"] .acx-pill.fam-account{     color:#e0a071; background:rgba(224,160,113,.12); border-color:rgba(224,160,113,.32); }
html[data-theme="dark"] .acx-pill.fam-impersonation{ color:#e08cc4; background:rgba(224,140,196,.12); border-color:rgba(224,140,196,.32); }
html[data-theme="dark"] .acx-pill.fam-config{      color:#a9aeba; background:rgba(169,174,186,.10); border-color:rgba(169,174,186,.28); }
html[data-theme="dark"] .acx-pill.fam-messaging{   color:#82aeee; background:rgba(130,174,238,.12); border-color:rgba(130,174,238,.32); }
html[data-theme="dark"] .acx-pill.fam-provision{   color:#b3cf7a; background:rgba(179,207,122,.11); border-color:rgba(179,207,122,.30); }

/* A refused row keeps its family colour but is visibly de-emphasised, so "what was attempted" and
   "did it work" stay two separate readings instead of one confusing blend. */
.acx-log-row-fail .acx-log-action .acx-pill{ opacity:.62; border-style:dashed; }

.acx-empty{
  padding:26px; text-align:center; color:var(--muted); font-size:14.5px;
  background:var(--paper-2); border:1px dashed var(--line); border-radius:14px;
}

/* horizontal-scroll wrapper for wide tables inside the console */
.acx-table-wrap{ width:100%; overflow-x:auto; }

/* ---- responsive: icon rail + drawer under 860px ---- */
@media (max-width:860px){
  .acx-app{ grid-template-columns:64px minmax(0,1fr); }
  /* Re-stated inside the query: the 64px icon-rail rule above would otherwise reintroduce the empty
     column on a phone for the employee view that has no sidebar to put in it. */
  .acx-app.is-solo{ grid-template-columns: minmax(0,1fr); }
  .acx-sidebar{ padding:18px 8px; align-items:center; }
  .acx-brand{ justify-content:center; padding:6px 0 16px; }
  .acx-brand-text{ display:none; }
  .acx-nav-label{ display:none; }
  .acx-nav-item{ justify-content:center; padding:11px; }
  .acx-nav-item span:not(.acx-ic){ display:none; }
  .acx-hamburger{ display:inline-flex; }

  /* the drawer: slide the full-label sidebar over the page */
  .acx-app.acx-nav-open .acx-sidebar{
    position:fixed; top:0; left:0; z-index:60; width:264px; height:100vh;
    align-items:stretch; padding:22px 16px; box-shadow:var(--shadow);
  }
  .acx-app.acx-nav-open .acx-brand{ justify-content:flex-start; padding:6px 10px 18px; }
  .acx-app.acx-nav-open .acx-brand-text{ display:block; }
  .acx-app.acx-nav-open .acx-nav-label{ display:block; }
  .acx-app.acx-nav-open .acx-nav-item{ justify-content:flex-start; padding:9px 12px; }
  .acx-app.acx-nav-open .acx-nav-item span:not(.acx-ic){ display:inline; }
  .acx-app.acx-nav-open .acx-scrim{
    display:block; position:fixed; inset:0; z-index:50;
    background:rgba(17,18,16,.42);
  }
}

@media (max-width:560px){
  .acx-content{ padding:24px 18px 64px; }
  .acx-topbar{ padding:12px 16px; gap:10px; }
  .acx-env, .acx-profile-name{ display:none; }
  .acx-search{ max-width:none; }
}

/* Flash feedback banners (success / error) shown at the top of every console page. */
.acx-flash{
  padding:13px 16px; border-radius:12px; margin:0 0 20px; font-weight:600; font-size:14px;
  border:1px solid transparent; display:flex; align-items:center; gap:10px;
}
.acx-flash-ok{ background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.4); color:#34d399; }
.acx-flash-err{ background:rgba(255,77,109,.12); border-color:rgba(255,77,109,.45); color:#ff6b81; }
.acx-flash-warn{ background:rgba(214,158,46,.13); border-color:rgba(214,158,46,.45); color:#9a6a12; }
html[data-theme="dark"] .acx-flash-warn{ color:#e6b657; }
.acx-flash-ok::before{ content:"\2713"; font-weight:800; }
.acx-flash-err::before{ content:"\26A0"; }
.acx-flash-warn::before{ content:"\26A0"; }
/* One-click Undo button riding inside the success flash — pushed to the far end, spaced from the text. */
.acx-flash-undo{ margin:0 0 0 auto; display:inline-flex; }

/* Worker-not-connected banner — amber/warning, more prominent (persistent system state, not a one-off). */
.acx-flash-worker{
  background:rgba(255,145,43,.13); border-color:rgba(255,145,43,.5); color:#ffab52;
  flex-direction:column; align-items:flex-start; gap:5px; line-height:1.45;
}
.acx-flash-worker strong{ font-size:15px; }
.acx-flash-worker span{ font-weight:500; opacity:.92; }

/* Shared list pager (20/page prev-next footer under console tables). */
.acx-pager{ display:flex; align-items:center; gap:14px; justify-content:flex-end; margin-top:16px; }
.acx-pager-btn{ padding:6px 14px; font-size:13px; }
.acx-pager-note{ font-size:13px; }

/* ---- live tables (console.js §8): unified toolbar + refresh state ----
   The search box and its FILTER dropdowns sit in one quiet control strip INSIDE the table's
   panel, right above the rows — one frame, no separate "find" card. */
.acx-toolbar{
  display:flex; flex-wrap:wrap; gap:12px 14px; align-items:flex-end;
  padding:12px 14px; margin:0 0 14px;
  background:var(--paper-2); border:1px solid var(--line-soft); border-radius:12px;
}
.acx-toolbar > div{ margin:0; }
.acx-toolbar .field{ margin:0; }
.acx-toolbar .acx-tb-grow{ flex:1 1 240px; min-width:200px; }
.acx-toolbar input[type="search"]{ width:100%; }
/* Typing filters as-you-type, so the explicit Search button is only a no-JS fallback. */
html.acx-js .acx-toolbar .acx-tb-go{ display:none; }
/* While the background fetch runs, the refreshing list dims (form stays fully usable). */
.acx-live-wait .acx-table-wrap, .acx-live-wait .acx-empty, .acx-live-wait .acx-pager,
.acx-live-wait .acx-log-wrap, .acx-live-wait .acx-bulkbar{
  opacity:.45; pointer-events:none; transition:opacity .18s ease;
}

/* =========================================================
   ROW ACTIONS ⋮ MENU + MULTI-SELECT  (behaviour in console.js §4–5)
   Collapses each row's buttons into one kebab menu and adds a
   select column + a floating bulk bar. Tokens only → auto-themed.
   ========================================================= */

/* Compact the select + actions columns so the row is shorter. */
th.acx-col-sel, td.acx-col-sel{ width:34px; padding-left:14px; padding-right:0; text-align:center; }
th.acx-col-act, td.acx-col-act{ width:52px; text-align:right; white-space:nowrap; }
td.acx-col-sel, td.acx-col-act{ vertical-align:middle; }

/* checkboxes */
.acx-check, .acx-check-all{
  width:16px; height:16px; margin:0; cursor:pointer; accent-color:var(--lime-deep);
  vertical-align:middle;
}

/* the ⋮ trigger */
.acx-menu{ display:inline-block; }
.acx-menu-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; padding:0; border-radius:9px;
  border:1px solid var(--line); background:transparent; color:var(--ink-soft);
  cursor:pointer; transition:border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.acx-menu-btn:hover{ border-color:var(--ink); color:var(--ink); background:var(--paper-2); }
.acx-menu-btn svg{ width:18px; height:18px; display:block; }
.acx-menu-btn[aria-expanded="true"]{ border-color:var(--lime-deep); color:var(--ink); }

/* the popover — moved to <body> and positioned fixed by console.js */
.acx-menu-pop{ display:none; }
.acx-menu-pop.is-open{
  display:block; z-index:1200;
  background:var(--card); border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--shadow); padding:6px;
  min-width:172px; max-width:min(88vw,300px);
}
/* every action inside the menu renders as a full-width row, whatever its tag */
.acx-menu-pop .acx-menu-item,
.acx-menu-pop > form > button,
.acx-menu-pop > form > .acx-menu-item,
.acx-menu-pop > a{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:9px 11px; margin:0; border:0; border-radius:8px;
  background:transparent; color:var(--ink); font:inherit; font-size:13.5px;
  text-align:left; text-decoration:none; cursor:pointer; box-shadow:none;
  transition:background .12s var(--ease), color .12s var(--ease);
}
.acx-menu-pop > form{ margin:0; display:block; }
.acx-menu-pop .acx-menu-item:hover,
.acx-menu-pop > form > button:hover,
.acx-menu-pop > a:hover{ background:var(--paper-2); transform:none; box-shadow:none; }
.acx-menu-pop .acx-menu-item svg,
.acx-menu-pop > form > button svg,
.acx-menu-pop > a svg{ width:15px; height:15px; flex:0 0 auto; opacity:.8; }
.acx-menu-pop .is-danger{ color:var(--danger); }
.acx-menu-pop .is-danger:hover{ background:var(--danger-bg); }
/* A text input living inside a row menu — "Replace with <new device id>". Sized to match the action rows
   above it so the menu keeps one column edge, and stopped from inheriting the row's flex sizing. */
.acx-menu-pop .acx-menu-input{
  display:block; width:100%; margin:2px 0 0; padding:7px 11px;
  border:1px solid var(--line); border-radius:8px;
  background:var(--paper); color:var(--ink); font:inherit; font-size:13px;
}
.acx-menu-pop .acx-menu-input:focus{ outline:none; border-color:var(--lime); }
/* a thin divider + tiny label inside the menu */
.acx-menu-sep{ height:1px; margin:5px 4px; background:var(--line-soft); }
.acx-menu-label{ padding:6px 11px 2px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
/* an inline field (e.g. days / device-limit) inside a menu item form */
.acx-menu-pop .acx-menu-field{
  display:flex; align-items:center; gap:8px; padding:7px 11px;
}
.acx-menu-pop .acx-menu-field input{
  width:74px; padding:6px 8px; font-size:13px; border:1px solid var(--line);
  border-radius:8px; background:var(--paper); color:var(--ink);
}
.acx-menu-pop .acx-menu-field button{
  width:auto; padding:6px 12px; border-radius:8px; border:1px solid var(--line);
  background:var(--ink); color:var(--paper); font-size:12.5px; cursor:pointer;
}

/* floating bulk-action bar — hidden until ≥1 row is selected */
.acx-bulkbar{
  position:sticky; bottom:14px; z-index:40;
  display:none; align-items:center; gap:14px; flex-wrap:wrap;
  margin:14px 0 2px; padding:11px 16px;
  background:var(--card); border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow-sm);
}
.acx-bulkbar.is-active{ display:flex; }
.acx-bulkbar .acx-bulk-count{ font-weight:600; color:var(--ink); font-size:14px; }
.acx-bulkbar .acx-bulk-count b{ color:var(--lime-deep); }
.acx-bulkbar .acx-bulk-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-left:auto; }
.acx-bulkbar [data-acx-bulk]{ padding:7px 13px; font-size:12.5px; }

@media (max-width:860px){
  .acx-bulkbar{ position:fixed; left:12px; right:12px; bottom:12px; margin:0; }
  .acx-bulkbar .acx-bulk-actions{ margin-left:0; }
}

/* ---- per-action secret-PIN dialog (console.js §2) ---- */
.acx-pin-overlay{
  position:fixed; inset:0; z-index:1400; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(10,11,9,.55); backdrop-filter:blur(2px);
}
.acx-pin-dialog{
  width:100%; max-width:360px; background:var(--card); border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow); padding:22px;
}
.acx-pin-title{ font-size:17px; font-weight:600; color:var(--ink); }
.acx-pin-sub{ margin-top:5px; font-size:13px; color:var(--muted); }
.acx-pin-sub:empty{ display:none; }
.acx-pin-input{
  width:100%; margin-top:16px; padding:11px 13px; font-size:15px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:10px;
}
.acx-pin-input:focus{ outline:none; border-color:var(--lime-deep); box-shadow:0 0 0 4px rgba(166,224,23,.16); }
.acx-pin-remember{
  display:flex; align-items:center; gap:8px; margin-top:12px; font-size:13px; color:var(--ink-soft); cursor:pointer;
}
.acx-pin-remember input{ width:15px; height:15px; accent-color:var(--lime-deep); }
.acx-pin-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }

/* ---- compact activity-log table — fits the panel; long ids wrap tidily, Result never clipped ---- */
.acx-log-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
/* table-layout:fixed lets the column widths below hold, so no column bleeds off the right edge */
.acx-log-wrap table{ width:100%; min-width:680px; table-layout:fixed; }
.acx-log-wrap th, .acx-log-wrap td{ padding:8px 12px; font-size:12.5px; line-height:1.35; vertical-align:top; }
.acx-log-wrap td.acx-log-when{ white-space:nowrap; width:120px; color:var(--muted); }
.acx-log-wrap th.acx-log-who, .acx-log-wrap td.acx-log-who{ width:200px; word-break:break-word; }
.acx-log-wrap th.acx-log-action, .acx-log-wrap td.acx-log-action{ width:150px; }
.acx-log-wrap th.acx-log-target, .acx-log-wrap td.acx-log-target{ width:150px; }
.acx-log-wrap td.acx-log-detail{ white-space:normal; color:var(--ink-soft); word-break:break-word; }
.acx-log-wrap th.acx-log-result, .acx-log-wrap td.acx-log-result{ width:78px; white-space:nowrap; }
/* the id chip: a touch smaller, wraps only at need (not every character), no fixed narrow box */
.acx-log-wrap code.key{ font-size:11px; padding:2px 6px; white-space:normal; word-break:break-word; overflow-wrap:anywhere; }
.acx-log-wrap .acx-pill{ white-space:nowrap; }

/* log search box in the panel header */
.acx-log-search{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.acx-log-search input[type="search"]{
  padding:7px 11px; font-size:13px; min-width:200px; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:9px;
}
.acx-log-search input[type="search"]:focus{ outline:none; border-color:var(--lime-deep); box-shadow:0 0 0 3px rgba(166,224,23,.16); }
/* when both search + clear are present, the search keeps the left auto-margin and clear sits after it */
.acx-log-search + .acx-log-clear{ margin-left:16px; }

/* admin-only "clear logs by date range" control in the log panel header */
.acx-log-clear{ display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }
.acx-log-clear .field{ margin:0; gap:4px; }
.acx-log-clear label{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.acx-log-clear input[type="date"]{
  padding:7px 10px; font-size:13px; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:9px;
}

/* =========================================================
   DENSER ADMIN CONSOLE — smaller type + tighter widgets so more data fits
   on screen (requested). Overrides the base console sizes above; tweak here.
   Second pass (requested "smaller + comfortable"): the loud elements —
   page titles, KPI/stat tiles, panel headings, analytics tiles — shrink a
   notch more; body text, table rows and control padding stay readable so it
   reads compact, not cramped.
   ========================================================= */
.acx-page-head{ margin-bottom:17px; }
.acx-page-head h1{ font-size:clamp(19px,2.2vw,25px); }
.acx-page-head .acx-lede{ font-size:12px; margin-top:5px; }

.acx-stat-grid{ grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-bottom:16px; }
.acx-stat{ padding:11px 14px; }
.acx-stat .acx-stat-num{ font-size:21px; }
.acx-stat .acx-stat-lbl{ margin-top:4px; font-size:9.5px; letter-spacing:.06em; }

.acx-panel{ padding:16px 18px 18px; margin-bottom:14px; }
.acx-panel-head{ margin-bottom:11px; gap:10px; }
.acx-panel-head h2{ font-size:15.5px; }
.acx-panel .panel-sub, .acx-panel .acx-lede{ font-size:12px; }

/* analytics "widgets" (the tiles + section headings on Analytics) match the KPI scale */
.an-tile{ padding:12px 14px; }
.an-tile b{ font-size:20px; }
.an-tile span{ font-size:11.5px; margin-top:4px; }

/* denser data tables across the console — kept comfortable (row padding unchanged) */
.acx-table-wrap table{ font-size:12.5px; }
.acx-table-wrap th, .acx-table-wrap td{ padding:8px 12px; }
.acx-table-wrap th{ font-size:10.5px; }
.count-badge{ font-size:11px !important; padding:2px 9px !important; }

/* smaller sidebar nav + topbar + small buttons */
.acx-nav-item{ padding:7px 12px; font-size:12.5px; }
.acx-nav-label{ font-size:9.5px; }
.acx-topbar{ padding:10px 20px; }
.acx-page-head .btn, .acx-panel .btn{ padding:9px 15px; font-size:13px; }
.btn-xs{ padding:6px 11px !important; font-size:12px !important; }

/* ---- notes/invoice modal (note-modal.js: iframe popup) ---- */
.note-modal-overlay{
  position:fixed; inset:0; z-index:1500; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(10,11,9,.55); backdrop-filter:blur(2px);
}
.note-modal{
  position:relative; width:100%; max-width:600px; height:min(88vh,640px);
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); overflow:hidden;
}
.note-modal-frame{ width:100%; height:100%; border:0; display:block; background:var(--card); }
.note-modal-x{
  position:absolute; top:10px; right:10px; z-index:2; width:30px; height:30px; border-radius:8px;
  border:1px solid var(--line); background:var(--card); color:var(--ink-soft); font-size:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.note-modal-x:hover{ border-color:var(--ink); color:var(--ink); }

/* =========================================================================
   CAT — the brand's own motion.
   The mark is a paw and the two-paw pair already MEANS "Streameow and Pro"
   across the site (.apps-pair). None of it ever moved, so the joke in the name
   only landed once, in the logo. These are the smallest gestures that let it
   land again: a paw that presses when you touch it, a pair that takes a step,
   and a trail that walks across the page as you scroll past.
   Every one is decorative, additive, and switched off wholesale under
   prefers-reduced-motion at the bottom of this file — a paw walking past is
   exactly the kind of thing that makes some people ill.
   ========================================================================= */

/* A paw presses like a paw: down and slightly askew, not a uniform scale-up. */
.brand-mark{ transition:transform .28s var(--ease-out); }
.brand:hover .brand-mark{ transform:scale(.94) rotate(-6deg); }
.brand:active .brand-mark{ transform:scale(.9) rotate(-9deg); }

/* The pair takes a step: left paw, then right, once on reveal and again on hover.
   Offset delays are the whole trick — moving both at once reads as a wobble. */
@keyframes seao-step{
  0%   { transform:none; }
  35%  { transform:translateY(-22%) rotate(-7deg); }
  70%  { transform:translateY(0) rotate(2deg); }
  100% { transform:none; }
}
.apps-pair img{ transform-origin:50% 85%; }
.in .apps-pair img, .apps-pair:hover img{ animation:seao-step .62s var(--ease-out) both; }
.in .apps-pair img:nth-child(2), .apps-pair:hover img:nth-child(2){ animation-delay:.14s; }

/* A cat walking across the page. The prints alternate above and below the line
   and lean into the direction of travel, because a row of identical stamps in a
   straight line reads as a border, not as an animal. */
.paw-walk{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(14px, 4vw, 42px); padding:6px 0; pointer-events:none;
}
.paw-walk img{
  width:clamp(15px, 2.4vw, 22px); height:auto; display:block;
  opacity:0; transform:translateY(10px) scale(.7) rotate(-18deg);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.paw-walk img:nth-child(even){ transform:translateY(-4px) scale(.7) rotate(-18deg); align-self:flex-start; }
/* Stamped one after another, left to right — the delays ARE the walk. */
.in .paw-walk img, .paw-walk.in img{ opacity:.5; transform:translateY(0) scale(1) rotate(-14deg); }
.in .paw-walk img:nth-child(even), .paw-walk.in img:nth-child(even){ opacity:.34; transform:translateY(-9px) scale(1) rotate(-14deg); }
.in .paw-walk img:nth-child(1), .paw-walk.in img:nth-child(1){ transition-delay:.05s; }
.in .paw-walk img:nth-child(2), .paw-walk.in img:nth-child(2){ transition-delay:.16s; }
.in .paw-walk img:nth-child(3), .paw-walk.in img:nth-child(3){ transition-delay:.27s; }
.in .paw-walk img:nth-child(4), .paw-walk.in img:nth-child(4){ transition-delay:.38s; }
.in .paw-walk img:nth-child(5), .paw-walk.in img:nth-child(5){ transition-delay:.49s; }
.in .paw-walk img:nth-child(6), .paw-walk.in img:nth-child(6){ transition-delay:.60s; }
.in .paw-walk img:nth-child(7), .paw-walk.in img:nth-child(7){ transition-delay:.71s; }

/* =========================================================================
   MARGINALIA — the paw as punctuation.
   The cat was only ever in the logo. Rather than scatter more of it, the mark
   is demoted from illustration to TYPOGRAPHY and spent only where a serif
   editorial page already has ornament: the full stop that closes a section
   heading, the break between long arguments, the mark that fills an empty box.
   Those are load-bearing slots, so the brand is doing a job on the page.

   Every mark is <svg class="pawmark"><use href="#seao-paw"/></svg>, defined
   once in the nav fragment. The symbol carries fill="currentColor", which BEATS
   a CSS `fill` across the <use> boundary — recolour with `color`, never `fill`.
   ========================================================================= */
.pawmark{ display:inline-block; fill:currentColor; vertical-align:baseline; flex:none; }

/* An inline <svg> is a line-break opportunity even with no space before it, so
   the mark is bound to its last word by the caller with .nowrap. */
.nowrap{ white-space:nowrap; }

/* ---- the end mark: the period at the end of a section heading -------------
   h1/h2 only. Below ~28px the four toes collapse into a smudge, so 13px is a
   hard legibility floor and 24px stops it ballooning on the display sizes.
   --pawstop-seat is the optical nudge that rests the pad on the baseline; it is
   a variable because it is the one number worth retuning by eye. */
h1 .pawmark-stop,
h2 .pawmark-stop{
  --pawstop-seat:.02em;
  width: clamp(13px, .40em, 24px);
  height:clamp(13px, .40em, 24px);
  margin-inline-start:.11em;
  transform-origin:50% 92%;          /* the pad — so it presses rather than shrinks */
  transform:translateY(var(--pawstop-seat));
}

/* The only motion here, once per heading: the words settle, then the mark
   presses into place. The delay must clear the parent reveal's 1s fade above,
   or it lands while the heading is still arriving and nobody sees it happen.
   Hidden ONLY inside a reveal wrapper, so a page without .r (every legal page)
   and every visitor without JS still gets the full stop. */
.r .pawmark-stop,
.reveal-up .pawmark-stop{
  opacity:0;
  transform:translateY(var(--pawstop-seat)) scale(.62) rotate(-16deg);
  transition:opacity .42s var(--ease-out), transform .42s var(--ease-out);
  transition-delay:.7s;
}
.r.in .pawmark-stop,
.reveal-up.in .pawmark-stop,
.in .pawmark-stop{ opacity:1; transform:translateY(var(--pawstop-seat)); }

/* ---- the asterism: a thematic break in long prose ------------------------
   Three prints in the ⁂ arrangement, faint. Long-form pages only. */
.pawrism{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  margin:44px auto; width:100%; border:0; opacity:.30; color:var(--ink);
}
.pawrism .row{ display:flex; gap:14px; }
.pawrism .pawmark{ width:11px; height:11px; }
.pawrism .pawmark:nth-child(1){ transform:rotate(-12deg); }
.pawrism .pawmark:nth-child(2){ transform:rotate(9deg); }

/* ---- the empty state: a ghost paw where there is nothing yet -------------
   An empty box holding one grey sentence is the least finished thing on a paid
   product. The mark says the box is WORKING and simply empty. */
.empty .pawmark-ghost{
  display:block; width:34px; height:34px; margin:0 auto 12px;
  color:var(--ink); opacity:.14;
}

/* =========================================================================
   THE FACE — the paw sells, the face speaks.
   Allowed only where the product talks to a person: the support toggle and the
   error page. Never in the nav, the hero, a pricing card, or beside a CTA.
   ========================================================================= */
.seao-face{ display:block; }

/* Blinks on hover or keyboard focus only. The lids are currentColor, so the
   blink never depends on the ground behind the face. NOT named seao-blink —
   that name already belongs to the chat typing dots. */
.seao-face .lid{ transform-box:fill-box; transform-origin:50% 0%; transform:scaleY(0); }
.seao-chat-toggle:hover .seao-face .lid,
.seao-chat-toggle:focus-visible .seao-face .lid{ animation:seao-face-blink .5s var(--ease-out) 1; }
@keyframes seao-face-blink{ 0%,100%{ transform:scaleY(0); } 42%,58%{ transform:scaleY(1); } }

/* The error page is the one place the face is large. Ink on lime in BOTH
   themes, like the app icon, so --ink is pinned rather than inherited. The
   corner radius is the icon's own ratio (rx 240 of 1024 = .234). */
.seao-face-badge{
  display:inline-grid; place-items:center;
  width:88px; height:88px; margin:0 0 26px;
  border-radius:21px;
  background:var(--lime); color:#111210;
  box-shadow:var(--shadow-sm);
}

/* =========================================================
   BILINGUAL + CURRENCY + SITE-WIDE DISCLAIMER
   Language switch (EN/AR), currency menu, the disclaimer bar
   under the nav, and the RTL overrides for Arabic.
   Last on purpose: the RTL rules below undo what everything
   above sets physically, so they have to win on order alone.
   ========================================================= */

/* ---- language switch: one pill, two halves, sliding highlight ---- */
.lang-switch{
  display:inline-flex; align-items:center; gap:2px; flex:none;
  padding:3px; border:1px solid var(--line); border-radius:999px;
  background:var(--paper-2); margin-inline-start:auto;
}
.lang-switch .ls-opt{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:999px; border:0;
  font-size:12.5px; font-weight:600; letter-spacing:.03em;
  color:var(--muted); text-decoration:none; line-height:1;
  transition:background .22s var(--ease), color .22s var(--ease), box-shadow .22s var(--ease);
}
.lang-switch .ls-opt:hover{ color:var(--ink); }
.lang-switch .ls-opt.is-on{
  background:var(--card); color:var(--ink);
  box-shadow:0 1px 2px rgba(17,18,16,.14), 0 0 0 1px rgba(17,18,16,.05);
}
.lang-switch .ls-opt:focus-visible{ outline:2px solid var(--lime-deep); outline-offset:2px; }

/* ---- "get your key" card (fragments/common :: keyHelp): how activation actually starts ---- */
.keyhelp{
  display:grid; grid-template-columns:1.1fr 1fr; gap:26px 40px; align-items:center;
  padding:34px 32px; background:var(--paper-2);
  border:1px solid var(--line-soft); border-radius:var(--r);
}
.keyhelp h3{ font-size:24px; line-height:1.2; margin:12px 0 0; letter-spacing:-.015em; }
.keyhelp p{ margin:10px 0 0; font-size:14.5px; color:var(--muted); line-height:1.65; }
.keyhelp-ways{ display:grid; gap:10px; }
.keyhelp-way{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:13px 16px; border:1px solid var(--line); border-radius:14px;
  background:var(--card); color:var(--ink); text-decoration:none;
  font:inherit; text-align:start; cursor:pointer;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.keyhelp-way:hover{ border-color:var(--lime-deep); transform:translateY(-1px); }
.keyhelp-way:focus-visible{ outline:2px solid var(--lime-deep); outline-offset:2px; }
.keyhelp-way svg{ width:20px; height:20px; flex:none; color:var(--lime-deep); }
.keyhelp-way b{ display:block; font-size:14px; font-weight:600; line-height:1.3; }
.keyhelp-way > span > span{ display:block; font-size:12.5px; color:var(--muted); margin-top:2px; }
.keyhelp-foot{ grid-column:1 / -1; margin:0; font-size:13.5px; color:var(--muted); }
.keyhelp-foot a{ color:var(--lime-deep); font-weight:600; margin-inline-start:4px; }
/* narrow hosts (the sign-in column) stack the card */
.keyhelp.compact, .keyhelp.compact .keyhelp-foot{ grid-template-columns:1fr; }
.keyhelp.compact{ padding:24px 22px; margin-bottom:26px; }
.keyhelp.compact h3{ font-size:20px; }
/* the hero's one-line pointer to the card */
.hero-help{ margin:16px 0 0; font-size:14px; color:var(--muted); }
.hero-help a{ color:var(--ink); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
@media (max-width:760px){ .keyhelp{ grid-template-columns:1fr; padding:26px 22px; } }

/* ---- currency switch ---- */
.cur-switch{ position:relative; flex:none; }
.cur-btn{
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 11px; border:1px solid var(--line); border-radius:999px;
  background:var(--paper-2); color:var(--ink-soft); cursor:pointer;
  font:600 12.5px/1 var(--font-body); letter-spacing:.03em;
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.cur-btn:hover{ border-color:var(--lime-deep); color:var(--ink); }
.cur-btn:focus-visible{ outline:2px solid var(--lime-deep); outline-offset:2px; }
.cur-menu{
  display:none; position:absolute; top:calc(100% + 8px); inset-inline-end:0; z-index:60;
  min-width:230px; padding:6px; border:1px solid var(--line); border-radius:14px;
  background:var(--card); box-shadow:var(--shadow-sm);
}
.cur-menu.open{ display:block; }
.cur-menu a{
  display:flex; align-items:baseline; gap:9px; padding:8px 10px; border-radius:9px;
  color:var(--ink-soft); text-decoration:none; font-size:13.5px;
}
.cur-menu a:hover{ background:var(--paper-2); color:var(--ink); }
.cur-menu a.is-on{ background:rgba(166,224,23,.15); color:var(--ink); }
.cur-menu a b{ font-size:12px; letter-spacing:.06em; min-width:34px; }
.cur-menu .cur-note{
  margin:6px 4px 2px; padding-top:8px; border-top:1px solid var(--line-soft);
  font-size:11.5px; line-height:1.5; color:var(--muted);
}

/* price approximation marker */
.price-approx{
  font-size:12px; font-weight:500; color:var(--muted);
  letter-spacing:.02em; margin-inline-start:6px; white-space:nowrap;
}
.price-note{ margin:14px 0 0; font-size:12.5px; line-height:1.6; color:var(--muted); max-width:52ch; }

/* ---- site-wide disclaimer bar (sits under the nav on every public page) ---- */
/* The ground is a literal near-black, NOT var(--ink): --ink is the TEXT colour, and §22 flips it to
   near-white in the dark theme — which turned this strip into near-white text on a near-white bar,
   contrast ~1:1, on every public page, for every visitor in dark mode. */
.disc-bar{
  background:#111210; color:rgba(246,245,240,.82);
  border-bottom:1px solid rgba(198,255,61,.22);
}
html[data-theme="dark"] .disc-bar{ background:#17180f; border-bottom-color:var(--line); }
.disc-inner{
  display:flex; align-items:center; gap:10px;
  padding:10px 0; font-size:13px; line-height:1.55;
}
.disc-bar svg{ color:var(--lime); flex:none; }
.disc-bar p{ margin:0; }
.disc-bar a{
  color:var(--lime); text-decoration:underline; text-underline-offset:2px;
  margin-inline-start:6px; white-space:nowrap;
}
.disc-bar a:hover{ color:var(--paper); }

/* footer: address + the expanded disclaimer block */
.foot-addr{
  display:flex; align-items:center; gap:7px;
  margin:14px 0 0 !important; font-size:13.5px; color:rgba(246,245,240,.8) !important;
}
.foot-city{
  display:block; margin-top:14px; font-size:13px; color:rgba(246,245,240,.5);
}
.foot-disclaimer b{
  display:block; margin-bottom:7px; color:var(--lime);
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
}
.foot-disclaimer p{ margin:0 0 9px; }
.foot-disclaimer a{
  color:var(--lime); text-decoration:underline; text-underline-offset:2px; font-size:12.5px;
}

/* =========================================================
   RTL — Arabic. Logical properties do most of the work above;
   these handle what stays physically directional.
   ========================================================= */
[dir="rtl"] body{ font-family:'Inter', 'Segoe UI', Tahoma, system-ui, sans-serif; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] .doc-hero h1, [dir="rtl"] .grp h2{
  font-family:'Segoe UI', Tahoma, system-ui, sans-serif;
  letter-spacing:normal;   /* negative tracking mangles joined Arabic script */
}
[dir="rtl"] .serif-i{ font-style:normal; }
/* Arabic reads better a touch larger and looser than Latin at the same size */
[dir="rtl"] .doc-body, [dir="rtl"] .faq-list .ans, [dir="rtl"] p{ line-height:1.85; }

[dir="rtl"] .doc-nav ol{ border-left:0; border-right:1px solid var(--line); }
[dir="rtl"] .doc-nav a{
  padding:9px 18px 9px 0; margin-left:0; margin-right:-1px;
  border-left:0; border-right:1px solid transparent;
}
[dir="rtl"] .doc-nav a.active{ border-right-color:var(--lime-deep); }
[dir="rtl"] .doc-nav a:hover{ transform:translateX(-2px); }
[dir="rtl"] .footer .foot-col a:hover{ transform:translateX(-3px); }
[dir="rtl"] .faq-list .ans ul{ padding-left:0; padding-right:20px; }
[dir="rtl"] .foot-disclaimer{ border-left:0; border-right:3px solid var(--lime); }
[dir="rtl"] .doc-cta::after{ right:auto; left:-100px; }
/* directional glyphs must flip, or the arrow points away from the action */
[dir="rtl"] .arr{ display:inline-block; transform:scaleX(-1); }
/* Same for the chat send glyph: a bare ➤ in the markup, pointing the way the reader is not going. */
[dir="rtl"] .seao-chat-send{ transform:scaleX(-1); }
/* A hover that re-declares `transform` REPLACES the flip above rather than adding to it
   (.btn:hover .arr is 0,3,0 against 0,2,0), so an arrow sitting correctly mirrored at rest snapped
   back to pointing left the moment the pointer touched it. These compose both transforms. */
[dir="rtl"] .btn:hover .arr{ transform:scaleX(-1) translateX(4px); }
[dir="rtl"] .reach-link:hover .arr{ transform:scaleX(-1) translateX(4px); }

/* Wide positive tracking is a Latin typographic device: Arabic letters JOIN, and tracking pulls those
   joins apart into disconnected glyphs. The h1/h2/h3 reset below already concedes this — these are the
   small-caps label classes it missed, every one of which now carries Arabic. */
[dir="rtl"] .eyebrow, [dir="rtl"] .subhead, [dir="rtl"] .kind, [dir="rtl"] .badge,
[dir="rtl"] .tag, [dir="rtl"] .stat span, [dir="rtl"] .tvlabel, [dir="rtl"] .group-label h3,
[dir="rtl"] .apps-key .sub, [dir="rtl"] .res-tag, [dir="rtl"] .pill,
/* …and the same device on table headers and the account portal's own small-caps labels. */
[dir="rtl"] th, [dir="rtl"] .pl-head, [dir="rtl"] .lic h3.sub, [dir="rtl"] .badge-pin,
[dir="rtl"] .pl-src .key, [dir="rtl"] .pl-src .lbl, [dir="rtl"] .pl-test-head{ letter-spacing:normal; }

/* Indicators that fill from an edge: each is anchored left:0 with a width that grows, so in RTL they
   filled away from the edge the reader starts at. */
[dir="rtl"] .progress{ left:auto; right:0; }
[dir="rtl"] .bar{ left:auto; right:0; }

/* The reach card's underline clears its envelope icon by 28px — on the icon's side, which mirrors. */
[dir="rtl"] .mail::after{ left:0; right:28px; transform-origin:right; }

@media (max-width:980px){
  .lang-switch{ margin-inline-start:0; }
  .cur-menu{ inset-inline-end:auto; inset-inline-start:0; }
}

/* Legal-page tables of contents in RTL. These live in per-page <style> blocks under three different
   class names (.doc-nav, .legal-toc, .toc), each drawing its rail with border-left — so in Arabic the
   rail lands on the wrong side of the text. Flip all three here rather than in seven page templates,
   since the Arabic pages reuse the English CSS via the pagestyle fragment.

   Desktop only, deliberately: below their own breakpoints the legal pages reshape that vertical rail
   into a horizontal row of pills, and these selectors outrank the pages' mobile rules — so unscoped
   they would re-apply a rail's padding and negative margin to a layout that no longer has one. 981px
   clears the largest page breakpoint (refund's 980). */
@media (min-width:981px){
  [dir="rtl"] .legal-toc nav, [dir="rtl"] .legal-toc ol,
  [dir="rtl"] .toc nav, [dir="rtl"] .toc ol{
    border-left:0; border-right:1px solid var(--line);
  }
  [dir="rtl"] .legal-toc a, [dir="rtl"] .toc a,
  [dir="rtl"] .toc-link{
    border-left:0; border-right:1px solid transparent;
    padding-left:0; padding-right:16px;
    margin-left:0; margin-right:-1px;
  }
  [dir="rtl"] .legal-toc a.active, [dir="rtl"] .toc a.active, [dir="rtl"] .toc-link.active{
    border-right-color:var(--lime-deep);
  }
}
/* Section number chips and callout rails are also left-anchored in the legal layout. */
[dir="rtl"] .callout{ border-left:0; border-right:3px solid var(--lime); }
[dir="rtl"] .legal-section .num{ left:auto; right:0; }
/* An LTR-valued box (a Device ID, an Upload code) on an Arabic page: while it is EMPTY its Arabic
   placeholder follows the page; the first typed character drops :placeholder-shown and the value is laid
   out LTR again. `direction` cannot be set on ::placeholder, hence the input itself. Not widened to every
   input[dir="ltr"]: the URL boxes' "https://…" placeholders read correctly as they are. */
[dir="rtl"] input[dir="ltr"][name="deviceId"]:placeholder-shown,
[dir="rtl"] input[dir="ltr"][name="uploadCode"]:placeholder-shown,
[dir="rtl"] input[dir="ltr"][name="newDeviceId"]:placeholder-shown{ direction:rtl; text-align:right; }