/* ===========================================================================
   FEXORA TRADING — the whole site's theme, in one file.
   ===========================================================================

   ONE PLACE FOR ONE FACT. Every page loads this and nothing else styles
   anything on its own: the menu, the buttons, the panels and the type scale
   exist once, so eleven pages cannot drift into eleven designs. It is the
   same rule the charting code follows after four separate bugs came from the
   same value being written down twice.

   COMMITTED TO ONE DARK PALETTE, on purpose. Every platform this sits beside
   is dark, the product is dark, and the logo is white type that disappears on
   white paper. There is a light logo in assets/ for print and for anywhere
   with a white background, but the site itself does not have a light mode.

   THE GREENS AND REDS ARE NOT DECORATIVE. --buy and --sell are the exact
   values the footprint chart draws with. The site and the product must never
   disagree about what green means.
   ======================================================================== */

:root{
  color-scheme: dark;

  --ink:      #05070B;
  --ink-2:    #090D14;
  --surface:  #0D131C;
  --surface-2:#111926;
  --line:     rgba(126,158,196,.16);
  --line-2:   rgba(126,158,196,.28);
  --line-3:   rgba(126,158,196,.42);

  --brand:    #0B63F6;
  --brand-2:  #22D3EE;
  --buy:      #12A88A;
  --sell:     #F0384B;
  --amber:    #FFD166;

  --text:     #E9EEF5;
  --text-2:   #A8B6C8;
  --muted:    #6F8098;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gut: clamp(16px, 4vw, 48px);
  --max: 1200px;
  --nav-h: 66px;

  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

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

/* [hidden] LOSES TO ANY class that sets display, because the UA rule is
   display:none on the element type and .btn sets display:inline-flex on a
   class. So a `<button class="btn" hidden>` is visible - which is how the
   admin's "Clear filter" button shipped switched on, and how any future
   hidden control would too. Stated once, here, rather than per component:
   the two existing per-component copies below are now redundant and harmless. */
[hidden]{ display:none !important; }

html, body{ margin:0; }
body{
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; }
::selection{ background: rgba(34,211,238,.28); }

:focus-visible{ outline:2px solid var(--brand-2); outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width: var(--max); margin-inline:auto; padding-inline: var(--gut); }
.narrow{ max-width: 780px; }

/* ------------------------------- type ---------------------------------- */
h1,h2,h3,h4{ font-family: var(--display); font-weight:700; letter-spacing:-.022em; text-wrap: balance; margin:0; }
h1{ font-size: clamp(2.05rem, 5.2vw, 3.8rem); line-height:1.05; }
h2{ font-size: clamp(1.6rem, 3.3vw, 2.45rem); line-height:1.12; }
h3{ font-size:1.06rem; font-weight:600; letter-spacing:-.01em; }
h4{ font-size:.95rem; font-weight:600; letter-spacing:-.005em; }
p{ margin:0; }

.lede{ font-size: clamp(1rem, 1.6vw, 1.16rem); color: var(--text-2); line-height:1.65; max-width:62ch; }
.small{ font-size:.875rem; color: var(--muted); line-height:1.6; }
.mono{ font-family: var(--mono); }
.num{ font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* The terminal-chrome motif: a hairline rule and a monospaced tag, the way a
   trading application labels a pane. Used instead of a decorative eyebrow. */
.tag{
  font-family: var(--mono); font-size:.68rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color: var(--muted);
  display:flex; align-items:center; gap:12px;
}
.tag::after{ content:""; flex:1; height:1px; background: var(--line); }

/* ------------------------------ buttons -------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family: var(--body); font-weight:600; font-size:.95rem;
  padding:13px 22px; border-radius:8px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition: transform .14s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn-primary{
  color:#04121F;
  background: linear-gradient(94deg, var(--brand-2), #4E9BFF 58%, var(--brand));
  box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 8px 28px -10px rgba(11,99,246,.85);
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.34) inset, 0 12px 34px -10px rgba(34,211,238,.9); }
.btn-ghost{ color: var(--text); border-color: var(--line-2); background: rgba(255,255,255,.02); }
.btn-ghost:hover{ border-color: var(--line-3); background: rgba(255,255,255,.05); }
/* A <button> with no background set inherits the browser's grey chrome -
   which is exactly what the Show/Hide control on the password fields came
   out as. Buttons and links both use .btn, so it is set here once. */
.btn-plain{ color: var(--text-2); padding-inline:4px; background:none; }
.btn-plain:hover{ color: var(--text); }
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none !important; }
.btn-lg{ padding:15px 26px; font-size:1rem; }
.btn-block{ width:100%; }

/* -------------------------------- nav ---------------------------------- */
.nav{
  position: sticky; top: env(safe-area-inset-top, 0px); z-index:60;
  /* The dropdown panels hang below the bar, so nothing here may clip. */
  overflow: visible;
  background: rgba(5,7,11,.84);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in{ display:flex; align-items:center; gap:26px; height: var(--nav-h); }
.brand{ display:flex; align-items:center; flex:none; text-decoration:none; }
/* 1 Oct: the mark was 26px tall in a 66px bar - smaller than the "Create
   account" button sitting opposite it (154x42.5px measured), so the button
   read as the loudest thing in the header and the company name as a caption.
   36px makes it 180px wide, a shade wider than that button and four fifths
   its height, with 15px of air above and below. Measured, not eyeballed. */
.brand img{ height:36px; width:auto; align-self:center; }
.nav-links{ display:flex; gap:24px; flex:1; }
.nav-links a{
  text-decoration:none; color: var(--text-2); font-size:.92rem; font-weight:500;
  padding:6px 0; border-bottom:1px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.nav-links a:hover{ color: var(--text); border-bottom-color: var(--brand-2); }
.nav-links a[aria-current="page"]{ color: var(--text); border-bottom-color: var(--brand-2); }
/* ------------------------------ dropdowns -------------------------------
   Four flat links were fine for five pages; at fifteen the menu has to
   group. Each group opens on hover for a mouse AND on click for a keyboard
   or a touch screen - hover alone locks out both, which is the usual way a
   nav like this is shipped broken. */
.has-menu{ position:relative; }
.nav-top{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:0; cursor:pointer; padding:6px 0;
  font-family: var(--body); font-size:.92rem; font-weight:500; color: var(--text-2);
  border-bottom:1px solid transparent; transition:color .18s ease, border-color .18s ease;
}
.nav-top svg{ opacity:.7; transition: transform .18s ease; }
.has-menu:hover .nav-top, .nav-top[aria-expanded="true"]{ color: var(--text); }
.nav-top[aria-expanded="true"] svg{ transform: rotate(180deg); }
.has-menu.on .nav-top{ border-bottom-color: var(--brand-2); color: var(--text); }
.menu{
  position:absolute; top: calc(100% + 12px); left:-14px; z-index:70;
  min-width: 330px; padding:8px;
  background: var(--surface); border:1px solid var(--line-2); border-radius:12px;
  box-shadow: 0 26px 60px -28px rgba(0,0,0,.95);
  display:none; flex-direction:column; gap:2px;
}
/* THE MEGA PANEL. Two or three columns under one heading each, which is how
   both platforms this was measured against lay their navigation out - and
   the reason theirs holds thirty links without looking like a list. A panel
   this wide has to be pinned to the bar rather than to its button, or the
   right-hand group opens off the edge of the screen. */
.menu.mega{
  left:auto; right:auto; padding:18px;
  display:none; grid-template-columns: repeat(var(--cols, 2), minmax(210px, 1fr));
  gap:8px 26px;
  width: max-content; max-width: min(860px, calc(100vw - 40px));
}
.has-menu:hover .menu.mega, .menu.mega[data-open="1"]{ display:grid; }
.menu.mega .col{ display:flex; flex-direction:column; gap:2px; }
.menu.mega .colhead{
  font-family: var(--mono); font-size:.64rem; letter-spacing:.17em; text-transform:uppercase;
  color: var(--muted); padding:4px 13px 8px;
}
.menu.mega a{ padding:9px 13px; }
/* The last group is pinned near the right edge of the bar so a wide panel
   cannot run off the viewport. */
.has-menu.pin-right .menu{ left:auto; right:-14px; }
.has-menu:hover .menu, .menu[data-open="1"]{ display:flex; }
/* A gap between the button and the panel breaks a hover the moment the
   pointer crosses it, so the panel reaches back up under the button. */
.menu::before{ content:""; position:absolute; left:0; right:0; top:-14px; height:14px; }
.menu a{
  text-decoration:none; display:flex; flex-direction:column; gap:2px;
  padding:11px 13px; border-radius:8px; transition: background .14s ease;
}
.menu a:hover{ background: var(--surface-2); }
.menu a b{ font-size:.93rem; font-weight:600; color: var(--text); }
.menu a span{ font-size:.81rem; color: var(--muted); line-height:1.45; }
.menu a[aria-current="page"] b{ color: var(--brand-2); }

.dsec{
  font-family: var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color: var(--muted); padding:16px 4px 4px;
}

.nav-cta{ display:flex; gap:10px; align-items:center; flex:none; }
.nav-cta .btn{ padding:9px 16px; font-size:.88rem; }

.burger{
  display:none; flex:none; width:40px; height:40px; border-radius:8px;
  border:1px solid var(--line-2); background: rgba(255,255,255,.02);
  align-items:center; justify-content:center; cursor:pointer; margin-left:auto;
}
.burger span{ display:block; width:17px; height:1.5px; background: var(--text); position:relative; transition: background .16s ease; }
.burger span::before, .burger span::after{
  content:""; position:absolute; left:0; width:17px; height:1.5px; background: var(--text);
  transition: transform .2s ease, top .2s ease;
}
.burger span::before{ top:-5.5px; } .burger span::after{ top:5.5px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ top:0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after{ top:0; transform: rotate(-45deg); }

/* THE DRAWER. A phone menu that slides a panel in rather than pushing the
   page down: pushing reflows the hero underneath it, and on a chart-heavy
   page that meant a canvas re-laying out every time somebody tapped the
   menu. */
.drawer{
  position: fixed; inset: 0; z-index:70; display:none;
  background: rgba(3,5,8,.72); backdrop-filter: blur(4px);
}
.drawer[data-open="1"]{ display:block; }
.drawer-panel{
  position:absolute; top:0; right:0; bottom:0; width: min(330px, 86vw);
  background: var(--ink-2); border-left:1px solid var(--line-2);
  padding: calc(18px + env(safe-area-inset-top, 0px)) 22px calc(22px + env(safe-area-inset-bottom, 0px));
  display:flex; flex-direction:column; gap:6px; overflow-y:auto;
  animation: slideIn .22s cubic-bezier(.2,.7,.3,1);
}
@keyframes slideIn{ from{ transform: translateX(22px); opacity:.4; } to{ transform:none; opacity:1; } }
.drawer-panel .dhead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.drawer-panel .dhead img{ height:24px; width:auto; }
.drawer-close{
  width:36px; height:36px; border-radius:8px; border:1px solid var(--line-2);
  background:none; color: var(--text); font-size:20px; line-height:1; cursor:pointer;
}
.drawer-panel a.dlink{
  text-decoration:none; color: var(--text); font-size:1rem; font-weight:500;
  padding:13px 4px; border-bottom:1px solid var(--line);
}
.drawer-panel a.dlink[aria-current="page"]{ color: var(--brand-2); }
.drawer-panel .dcta{ display:flex; flex-direction:column; gap:10px; margin-top:20px; }

@media (max-width: 900px){
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .burger{ display:flex; }
  .nav-in{ height:60px; gap:14px; }
  .brand img{ height:32px; }   /* 60px bar: 14px of air each side */
}
@media (max-width: 380px){
  .brand img{ height:28px; }   /* 140px wide, so the burger always fits */
}

/* ------------------------------ sections -------------------------------- */
.sec{ padding-block: clamp(52px, 6.6vw, 96px); display:flex; flex-direction:column; gap: clamp(24px, 3.2vw, 42px); }
.sec-sm{ padding-block: clamp(38px, 4.4vw, 62px); }
.sec-head{ display:flex; flex-direction:column; gap:14px; max-width:74ch; }
section{ border-bottom:1px solid var(--line); }
.alt{ background: var(--ink-2); }

.split{ display:grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: clamp(24px,3.2vw,52px); align-items:center; }
.split.wide-left{ grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); }
.split.wide-right{ grid-template-columns: minmax(0,1fr) minmax(0,1.25fr); }
/* minmax(0,1fr) and not 1fr. A bare `1fr` track is minmax(AUTO,1fr), so a
   child with a wide intrinsic minimum - here a table with min-width:520px -
   forces the track open and the page scrolls sideways on a phone. Measured
   at 538px against a 390px screen on the forex page. */
@media (max-width: 900px){ .split.wide-left, .split.wide-right{ grid-template-columns: minmax(0,1fr); } }
/* And the same guard on the containers a table can sit in: a flex or grid
   item's automatic minimum is its content, which a scroll container is
   meant to override and does not always. */
.split > *, .stack, .stack-sm, .tbl-scroll{ min-width:0; }

.stack{ display:flex; flex-direction:column; gap:22px; }
.stack-sm{ display:flex; flex-direction:column; gap:12px; }
.row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

/* ------------------------------- panels --------------------------------- */
.panel{
  border:1px solid var(--line-2); border-radius:12px; overflow:hidden;
  background: var(--ink-2);
  box-shadow: 0 30px 70px -34px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.015) inset;
}
.panel-bar{
  display:flex; align-items:center; gap:10px; padding:9px 13px;
  border-bottom:1px solid var(--line); background: var(--surface);
  font-family: var(--mono); font-size:.72rem; color: var(--text-2);
  flex-wrap:wrap;
}
.panel-bar .sep{ color: var(--muted); }
.panel-bar .right{ margin-left:auto; color: var(--muted); }
.dot{ width:8px; height:8px; border-radius:50%; background: var(--buy); flex:none; box-shadow:0 0 0 3px rgba(18,168,138,.18); }
canvas.chart{ display:block; width:100%; height:auto; background: var(--ink-2); }

.card{ border:1px solid var(--line); border-radius:12px; background: var(--surface); padding:24px; display:flex; flex-direction:column; gap:12px; }
.card p{ color: var(--text-2); font-size:.94rem; }
.card .n{ font-family: var(--mono); font-size:.72rem; color: var(--brand-2); letter-spacing:.14em; }
.cards{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:18px; }
.cards-2{ grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); }

.badge{
  font-family: var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--text-2); border:1px solid var(--line); border-radius:999px;
  padding:5px 11px; background: rgba(255,255,255,.02); display:inline-block;
}
.badge-live{ color: var(--buy); border-color: rgba(18,168,138,.4); }
.badge-warn{ color: var(--amber); border-color: rgba(255,209,102,.34); }

.points{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; }
.points li{ display:grid; grid-template-columns:22px 1fr; gap:14px; align-items:start; }
.points .k{ font-family: var(--mono); font-size:.72rem; color: var(--brand-2); padding-top:3px; font-variant-numeric: tabular-nums; }
.points strong{ display:block; font-weight:600; color: var(--text); margin-bottom:3px; }
.points span.d{ color: var(--text-2); font-size:.95rem; }

/* ------------------------------ readout --------------------------------- */
.readout{ border:1px solid var(--line-2); border-radius:12px; background: var(--surface); overflow:hidden; }
.readout .r{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; border-bottom:1px solid var(--line); font-family: var(--mono); font-size:.86rem; }
.readout .r:last-child{ border-bottom:0; }
.readout .lbl{ color: var(--text-2); }
.readout .val{ font-variant-numeric: tabular-nums; font-weight:500; }
.meter{ height:6px; border-radius:99px; background: rgba(126,158,196,.16); overflow:hidden; width:120px; flex:none; }
.meter i{ display:block; height:100%; border-radius:99px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
.v-good{ color: var(--buy); } .v-warn{ color: var(--amber); } .v-bad{ color: var(--sell); }

/* ------------------------------- tables --------------------------------- */
.tbl-scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:12px; }
table{ width:100%; border-collapse:collapse; font-size:.93rem; min-width:520px; }
th, td{ text-align:left; padding:14px 18px; border-bottom:1px solid var(--line); }
th{ font-family: var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); font-weight:500; background: var(--surface); }
tr:last-child td{ border-bottom:0; }
td.num, th.num{ text-align:right; font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ------------------------------- forms ---------------------------------- */
.auth{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); min-height: calc(100vh - var(--nav-h)); }
@media (max-width: 920px){ .auth{ grid-template-columns:1fr; min-height:0; } .auth-side{ display:none; } }
.auth-form{ display:flex; align-items:center; justify-content:center; padding: clamp(32px,5vw,64px) var(--gut); }
.auth-box{ width:100%; max-width:420px; display:flex; flex-direction:column; gap:22px; }
.auth-side{
  border-left:1px solid var(--line); background: var(--ink-2);
  padding: clamp(32px,4vw,56px); display:flex; flex-direction:column; justify-content:center; gap:26px;
  background-image: radial-gradient(700px 400px at 70% 20%, rgba(11,99,246,.16), transparent 62%);
}

.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:.85rem; font-weight:500; color: var(--text-2); }
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border-radius:8px;
  border:1px solid var(--line-2); background: var(--surface); color: var(--text);
  font-family: var(--body); font-size:.95rem; line-height:1.4;
  transition: border-color .16s ease, background .16s ease;
}
.field textarea{ min-height:120px; resize:vertical; }
.field input::placeholder, .field textarea::placeholder{ color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--brand-2); background: var(--surface-2); }
.field .hint{ font-size:.78rem; color: var(--muted); }
.field .err{ font-size:.8rem; color: var(--sell); display:none; }
.field.bad input, .field.bad select{ border-color: var(--sell); }
.field.bad .err{ display:block; }

.check{ display:flex; gap:10px; align-items:flex-start; font-size:.86rem; color: var(--text-2); }
.check input{ margin-top:3px; accent-color: var(--brand-2); flex:none; width:16px; height:16px; }

.note{
  border:1px solid var(--line-2); border-radius:10px; padding:14px 16px;
  background: var(--surface); font-size:.88rem; color: var(--text-2); line-height:1.6;
}
.note.ok{ border-color: rgba(18,168,138,.42); }
.note.warn{ border-color: rgba(255,209,102,.38); }
.note strong{ color: var(--text); }
.note[hidden]{ display:none !important; }

.divider{ display:flex; align-items:center; gap:14px; color: var(--muted); font-size:.78rem; font-family: var(--mono); letter-spacing:.1em; }
.divider::before, .divider::after{ content:""; flex:1; height:1px; background: var(--line); }

/* ------------------------------- pricing -------------------------------- */
/* FOUR ACROSS, THEN TWO, THEN ONE - declared rather than left to auto-fit.
   With minmax(270px,1fr) the four cards needed 1134px inside a 1104px
   container, so the last one dropped to a row of its own and the page read
   as three plans and an afterthought. */
.plans{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:16px; align-items:stretch; }
.plans.plans-3{ grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; }
@media (max-width: 1080px){ .plans, .plans.plans-3{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:18px; } }
@media (max-width: 720px){ .plans, .plans.plans-3{ grid-template-columns: minmax(0,1fr); } }

/* THE BLOCKS INSIDE A PLAN CARD. The whole point of this rewrite: a plan is
   described in full, in its own card, grouped by what the group is about -
   Markets, Order flow, Recording, Workspace, Alerts - rather than leaving a
   person to read a matrix sideways to find out what they are buying. */
.plan .pgroup{ display:flex; flex-direction:column; gap:9px; padding-top:16px; border-top:1px solid var(--line); }
.plan .ghead{
  font-family: var(--mono); font-size:.64rem; letter-spacing:.17em; text-transform:uppercase;
  color: var(--brand-2);
}
.plan.featured .ghead{ color: var(--brand-2); }
.plan .pgroup ul{ gap:8px; }
.plan .pgroup ul li{ font-size:.875rem; line-height:1.5; }
.plan .pgroup ul li strong{ color: var(--text); }
.plan{ padding:22px; }
.plan .pname{ font-size:1.15rem; }
.plan .price .amt{ font-size: clamp(1.7rem, 2.4vw, 2.05rem); }
.plan{ border:1px solid var(--line); border-radius:14px; background: var(--surface); padding:26px; display:flex; flex-direction:column; gap:18px; }
.plan.featured{ border-color: rgba(34,211,238,.42); background: var(--surface-2); box-shadow: 0 0 0 1px rgba(34,211,238,.1), 0 26px 60px -40px rgba(34,211,238,.55); }
.plan .pname{ font-family: var(--display); font-weight:700; font-size:1.2rem; letter-spacing:-.01em; }
.plan .price{ font-family: var(--mono); font-size:2rem; font-variant-numeric: tabular-nums; line-height:1.1; }
.plan .price small{ font-size:.82rem; color: var(--muted); font-weight:400; }
.plan ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:.92rem; color: var(--text-2); }
/* A MARKER OUT OF FLOW, NOT A GRID COLUMN.
   As a two-column grid, every inline element inside the item became its own
   grid item: a line reading "1 device · 5 watchlists · 2 charts a tab" has
   three <span class="num"> in it, so it came out as seven cells stacked down
   the card, one word each. Absolute positioning leaves the content as
   ordinary inline flow, which is what it is. */
.plan ul li{ position:relative; padding-left:24px; }
.plan ul li::before{
  content:"+"; position:absolute; left:4px; top:0;
  color: var(--brand-2); font-family: var(--mono); line-height:1.6;
}
.plan ul li.no{ color: var(--muted); }
.plan ul li.no::before{ content:"\2013"; color: var(--muted); }

/* ------------------------------ pricing ---------------------------------
   The plan cards, the monthly/yearly switch and the feature matrix. The
   matrix is the part that was missing: four cards can carry a headline each,
   and everything a person actually compares - which markets, how many
   devices, whether the recording is kept - needs a row of its own beside
   every plan. */
.pay-switch{
  display:inline-flex; align-items:center; gap:4px; padding:4px;
  border:1px solid var(--line-2); border-radius:999px; background: var(--surface);
}
.pay-switch button{
  font-family: var(--body); font-size:.88rem; font-weight:600; color: var(--text-2);
  background:none; border:0; border-radius:999px; padding:9px 18px; cursor:pointer;
  transition: background .16s ease, color .16s ease;
}
.pay-switch button[aria-pressed="true"]{
  background: linear-gradient(94deg, var(--brand-2), var(--brand));
  color:#04121F;
}
.pay-switch .save{
  font-family: var(--mono); font-size:.7rem; letter-spacing:.06em; color: var(--buy);
  padding-right:12px; padding-left:4px;
}

.plan{ position:relative; }
.plan.featured::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  border-radius:14px 14px 0 0;
  background: linear-gradient(90deg, var(--brand-2), var(--brand));
}
.plan .ptop{ display:flex; flex-direction:column; gap:6px; }
.plan .ptag{
  font-family: var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color: var(--muted);
}
.plan .price{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.plan .price .amt{ font-family: var(--mono); font-size:2.1rem; font-variant-numeric: tabular-nums; line-height:1; }
.plan .price .per{ font-size:.8rem; color: var(--muted); }
.plan .was{
  font-family: var(--mono); font-size:.78rem; color: var(--muted);
  min-height:1.2em;
}
.plan .was s{ opacity:.7; }

/* THE MATRIX. Rows grouped by what they are about, so a person scanning for
   "how many devices" is not reading past the chart types to find it. */
.matrix{ width:100%; border-collapse:separate; border-spacing:0; min-width:720px; }
.matrix th, .matrix td{ padding:13px 18px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.matrix thead th{
  /* Under the site's own sticky bar, not behind it: the scroll container is
     horizontal only, so a vertical sticky here is relative to the page. */
  position: sticky; top: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  z-index:2; background: var(--surface-2);
  font-family: var(--display); font-size:.95rem; font-weight:700; letter-spacing:-.01em;
  color: var(--text); text-transform:none;
}
.matrix thead th:first-child{
  font-family: var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--muted); font-weight:500;
}
.matrix thead th span{ display:block; font-family: var(--mono); font-size:.72rem; font-weight:400; color: var(--muted); margin-top:3px; }
/* The base `th` rule is uppercase mono, which is right for a small column
   heading and wrong for thirty feature names down the side - they came out
   as a wall of capitals nobody reads. */
.matrix tbody th{
  font-family: var(--body); text-transform:none; letter-spacing:normal;
  font-weight:500; font-size:.92rem; color: var(--text-2);
  background: var(--surface); position:sticky; left:0; z-index:1;
  border-right:1px solid var(--line);
}
.matrix td{ font-size:.9rem; color: var(--text-2); font-family: var(--mono); font-variant-numeric: tabular-nums; }
.matrix tr.grp th{
  font-family: var(--mono) !important; text-transform:uppercase !important; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color: var(--brand-2); background: var(--ink-2); padding-top:18px; padding-bottom:10px;
}
.matrix tr.grp td{ background: var(--ink-2); }
.matrix .yes{ color: var(--buy); }
.matrix .no{ color: var(--muted); opacity:.6; }
.matrix col.hi{ background: rgba(34,211,238,.045); }

/* ----------------------------- market packages -------------------------- */
.mkts{ display:grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap:14px; }
.mkt{
  border:1px solid var(--line); border-radius:12px; background: var(--surface);
  padding:18px; display:flex; flex-direction:column; gap:10px;
}
.mkt .mname{ font-family: var(--display); font-weight:700; font-size:1.02rem; letter-spacing:-.01em; }
.mkt .mprice{ font-family: var(--mono); font-size:1.3rem; font-variant-numeric: tabular-nums; }
.mkt .mprice small{ font-size:.74rem; color: var(--muted); }
.mkt > .small{ margin-top:-4px; }
.mkt > .small s{ opacity:.65; }
.mkt > .small b{ color: var(--text); font-weight:600; }
.plan .was b{ color: var(--text); font-weight:600; }
.mkt ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px;
         font-size:.85rem; color: var(--text-2); }
.mkt ul li{ position:relative; padding-left:18px; }
.mkt ul li::before{ content:"·"; position:absolute; left:6px; color: var(--brand-2); font-weight:700; }
.mkt.all{ border-color: rgba(34,211,238,.42); background: var(--surface-2); }

/* ------------------------------- accordion ------------------------------ */
.qa{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background: var(--surface); }
.qa details{ border-bottom:1px solid var(--line); }
.qa details:last-child{ border-bottom:0; }
.qa summary{
  cursor:pointer; list-style:none; padding:16px 20px;
  font-weight:600; font-size:.97rem; color: var(--text);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  transition: background .14s ease;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ background: var(--surface-2); }
.qa summary::after{
  content:"+"; font-family: var(--mono); font-size:1.15rem; color: var(--brand-2);
  flex:none; line-height:1; transition: transform .18s ease;
}
.qa details[open] summary::after{ content:"\2013"; }
.qa .ans{ padding:0 20px 18px; color: var(--text-2); font-size:.94rem; line-height:1.68; }
.qa .ans p + p{ margin-top:12px; }

/* -------------------------------- clock --------------------------------- */
.clock{ display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap:1px; background: var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.clock > div{ background: var(--surface); padding:22px 24px; display:flex; flex-direction:column; gap:6px; }
.clock .mkt{ font-family: var(--display); font-weight:700; font-size:1.05rem; letter-spacing:-.01em; }
.clock .hrs{ font-family: var(--mono); font-size:1.15rem; font-variant-numeric: tabular-nums; }
.clock .note2{ font-size:.86rem; color: var(--muted); }

/* ------------------------------- page head ------------------------------ */
.phead{ border-bottom:1px solid var(--line);
  background: radial-gradient(760px 400px at 78% 8%, rgba(11,99,246,.16), transparent 62%), var(--ink); }
.phead-in{ padding-block: clamp(42px,5.4vw,78px); display:flex; flex-direction:column; gap:16px; }
.crumb{ font-family: var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: var(--muted); }
.crumb a{ text-decoration:none; }
.crumb a:hover{ color: var(--text-2); }

/* --------------------------------- prose -------------------------------- */
.prose{ display:flex; flex-direction:column; gap:20px; max-width:74ch; }
.prose h2{ font-size:1.4rem; margin-top:18px; }
.prose h3{ margin-top:10px; }
.prose p, .prose li{ color: var(--text-2); font-size:.97rem; line-height:1.72; }
.prose ul, .prose ol{ margin:0; padding-left:22px; display:flex; flex-direction:column; gap:9px; }
.prose strong{ color: var(--text); }

/* --------------------------------- tabs --------------------------------- */
.tabs{ display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:0; }
.tabs [role="tab"]{
  font-family: var(--body); font-size:.92rem; font-weight:500; color: var(--text-2);
  background:none; border:0; border-bottom:2px solid transparent;
  padding:11px 14px; cursor:pointer; transition:color .16s ease, border-color .16s ease;
}
.tabs [role="tab"]:hover{ color: var(--text); }
.tabs [role="tab"][aria-selected="true"]{ color: var(--text); border-bottom-color: var(--brand-2); }
.tabpane{ padding-top: clamp(22px, 3vw, 34px); }
.tabpane[hidden]{ display:none !important; }

/* The offer strip: one line at the top of the pricing page and, later, in
   the chart's own header. It reads the same schedule the /free page does -
   two countdowns from two sources disagree, and a countdown that disagrees
   with itself is very visible. */
.offer-strip{
  display:inline-flex; align-items:center; gap:12px; text-decoration:none;
  padding:11px 16px; border-radius:999px; align-self:flex-start;
  border:1px solid rgba(18,168,138,.42); background: rgba(18,168,138,.07);
  font-size:.9rem; transition: border-color .18s ease, background .18s ease;
}
.offer-strip:hover{ border-color: var(--buy); background: rgba(18,168,138,.13); }
.offer-strip .os-dot{ width:8px; height:8px; border-radius:50%; background: var(--buy); flex:none;
  box-shadow:0 0 0 3px rgba(18,168,138,.2); }
.offer-strip .os-text b{ font-weight:600; }
.offer-strip .os-text span{ color: var(--text-2); }
.offer-strip .os-go{ font-family: var(--mono); font-size:.78rem; color: var(--buy); white-space:nowrap; }
.nav-free{ color: var(--buy) !important; }

/* ------------------------------ the drop -------------------------------
   The claim box is the whole point of /free, so it is the loudest object on
   the page and it changes shape with its state rather than only changing
   its words. */
.drop-hero{ background:
  radial-gradient(820px 460px at 74% 6%, rgba(11,99,246,.24), transparent 62%),
  radial-gradient(620px 380px at 10% 96%, rgba(34,211,238,.12), transparent 60%),
  var(--ink); }

.claim{
  margin-top:8px; border:1px solid var(--line-2); border-radius:16px;
  background: var(--surface); padding: clamp(20px, 3vw, 30px);
  display:flex; flex-direction:column; gap:18px;
  max-width:560px; position:relative; overflow:hidden;
}
.claim::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background: linear-gradient(90deg, var(--brand-2), var(--brand));
  opacity:.5;
}
.claim[data-state="open"]{
  border-color: rgba(18,168,138,.55); background: var(--surface-2);
  box-shadow: 0 0 0 1px rgba(18,168,138,.18), 0 26px 64px -30px rgba(18,168,138,.7);
}
.claim[data-state="open"]::before{ background: linear-gradient(90deg, var(--buy), var(--brand-2)); opacity:1; }
.claim[data-state="won"]{ border-color: rgba(18,168,138,.55); }
.claim[data-state="won"]::before{ background: var(--buy); opacity:1; }
.claim[data-state="over"]::before, .claim[data-state="has"]::before{ opacity:.25; }

.claim-clock{ display:flex; flex-direction:column; gap:5px; }
.claim-label{ font-family: var(--mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color: var(--muted); }
.claim[data-state="open"] .claim-label{ color: var(--buy); }
.claim-count{ font-size: clamp(1.9rem, 4.4vw, 2.9rem); line-height:1.05; font-weight:500;
  font-variant-numeric: tabular-nums; letter-spacing:-.02em; }
.claim[data-state="open"] .claim-count{ color: var(--buy); }
.claim[data-state="won"] .claim-count{ color: var(--buy); }
.claim-sub{ font-size:.92rem; color: var(--text-2); }
.claim-act{ display:flex; gap:10px; flex-wrap:wrap; }
.claim-act .btn{ flex:1 1 auto; }
.claim-foot{ margin:0; }
.claim-foot.warn{ color: var(--amber); }
.claim-form{ display:flex; flex-direction:column; gap:12px; width:100%; }

/* The six dates, as a list that crosses itself off. */
.drops{ display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap:12px; }
.drop{
  border:1px solid var(--line); border-radius:12px; background: var(--surface);
  padding:16px 18px; display:grid; gap:3px;
  grid-template-areas: "n day" "n date" "n time" "n state";
  grid-template-columns: 34px 1fr; align-items:baseline;
}
.drop .dnum{ grid-area:n; font-size:.78rem; color: var(--muted); align-self:start; padding-top:3px; }
.drop .dday{ grid-area:day; font-family: var(--display); font-weight:700; font-size:1rem; letter-spacing:-.01em; }
.drop .ddate{ grid-area:date; font-size:.86rem; color: var(--text-2); }
.drop .dtime{ grid-area:time; font-size:.82rem; color: var(--muted); }
.drop .dstate{ grid-area:state; font-family: var(--mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color: var(--muted); margin-top:6px; }
.drop.open{ border-color: rgba(18,168,138,.55); background: var(--surface-2); }
.drop.open .dstate{ color: var(--buy); }
.drop.gone{ opacity:.45; }
.drop.gone .dday, .drop.gone .ddate{ text-decoration: line-through; }

/* ------------------------------ help launcher ---------------------------
   A help panel on every page, opened from a button in the corner. It is NOT
   dressed up as a live chat: there is nobody sitting on the other end of it
   tonight, and a widget that types "we usually reply in a minute" when
   nobody does is the cheapest way to lose somebody's trust. It answers the
   common questions itself and hands over an email address. */
.help-btn{
  position: fixed; right:18px; z-index:80;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 18px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(34,211,238,.4); color: var(--text);
  background: rgba(13,19,28,.92); backdrop-filter: blur(10px);
  font-family: var(--body); font-size:.9rem; font-weight:600;
  box-shadow: 0 16px 40px -18px rgba(0,0,0,.95);
  transition: transform .15s ease, border-color .2s ease;
}
.help-btn:hover{ transform: translateY(-1px); border-color: var(--brand-2); }
.help-btn svg{ flex:none; }
.help-panel{
  position: fixed; right:18px; z-index:81;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  width: min(370px, calc(100vw - 36px)); max-height: min(560px, calc(100vh - 140px));
  overflow-y:auto;
  background: var(--surface); border:1px solid var(--line-2); border-radius:14px;
  box-shadow: 0 30px 70px -26px rgba(0,0,0,.95);
  display:none; flex-direction:column;
}
.help-panel[data-open="1"]{ display:flex; }
.help-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:16px 18px; border-bottom:1px solid var(--line); background: var(--surface-2);
}
.help-head b{ font-family: var(--display); font-size:1rem; letter-spacing:-.01em; }
.help-head p{ font-size:.8rem; color: var(--muted); margin-top:3px; }
.help-body{ padding:14px 18px 18px; display:flex; flex-direction:column; gap:12px; }
.help-body .qlink{
  text-decoration:none; display:flex; flex-direction:column; gap:2px;
  padding:10px 12px; border-radius:9px; border:1px solid var(--line);
  transition: border-color .15s ease, background .15s ease;
}
.help-body .qlink:hover{ border-color: var(--line-3); background: var(--surface-2); }
.help-body .qlink b{ font-size:.88rem; font-weight:600; }
.help-body .qlink span{ font-size:.78rem; color: var(--muted); }
.help-mail{
  border-top:1px solid var(--line); padding-top:12px;
  display:flex; flex-direction:column; gap:8px;
}
.help-mail .addr{
  font-family: var(--mono); font-size:.88rem; color: var(--text);
  background: var(--ink-2); border:1px solid var(--line); border-radius:8px;
  padding:9px 12px; display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.help-mail .addr button{
  font-family: var(--body); font-size:.78rem; font-weight:600; color: var(--brand-2);
  background:none; border:0; cursor:pointer; padding:2px 4px;
}
@media (max-width: 480px){
  .help-btn{ right:14px; padding:11px 15px; font-size:.85rem; }
  .help-panel{ right:14px; left:14px; width:auto; }
}

/* -------------------------------- footer -------------------------------- */
footer{ background: var(--ink-2); }
.foot{ padding-block:46px; display:flex; flex-direction:column; gap:28px; }

/* ---------------------------------------------------------------------------
   THE FOOTER LOGO, AND WHY IT LOOKED CRUSHED. Reported 1 Oct: "फुटर में जो
   लोगो है ना वो दबा हुआ है". Measured: it was rendering 346x30 - ratio 11.54
   against the file's own 5.00, so 131% too wide. On all nineteen pages.

   The cause is three harmless rules meeting: `img{ display:block }` makes the
   logo a block-level flex item, its container is `flex-direction:column`, and
   a column flex container stretches its items across the cross axis - which
   for a column IS the width. `width:auto` does not save it, because stretch
   wins over auto. So the logo was pulled out to the container's 34ch and the
   declared height held it at 30px.

   align-self stops the stretch; the ratio then comes from the file. Written
   as a rule rather than an inline style so the next footer image cannot
   inherit the same fault.
   --------------------------------------------------------------------------- */
.foot-top img{ align-self:flex-start; height:34px; width:auto; }
.foot-top{ display:flex; gap:30px; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; }
.foot-links{ display:flex; gap:38px; flex-wrap:wrap; }
.foot-col{ display:flex; flex-direction:column; gap:9px; }
.foot-col b{ font-size:.74rem; font-family: var(--mono); letter-spacing:.14em; text-transform:uppercase; color: var(--muted); font-weight:500; }
.foot-col a{ text-decoration:none; color: var(--text-2); font-size:.92rem; }
.foot-col a:hover{ color: var(--text); }
.risk{ border-top:1px solid var(--line); padding-top:22px; color: var(--muted); font-size:.8rem; line-height:1.7; max-width:94ch; }

.close-in{ padding-block: clamp(56px,7vw,104px); display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center; }
.close-in h2{ max-width:20ch; }
.close-in .lede{ text-align:center; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ===========================================================================
   ADMIN PANEL
   ===========================================================================
   Same tokens, same type, same buttons as the public site — on purpose. An
   admin panel built with its own palette becomes a second design to maintain,
   and the operator stops trusting that green means the same thing here as it
   does on the chart.

   The only visual difference is a red hairline under the nav and an ADMIN tag,
   so that a screenshot of this can never be mistaken for a screenshot of the
   product.
   ======================================================================== */
.adminbar{ border-bottom:1px solid rgba(240,56,75,.42); }
.adminbar .brand{ gap:10px; }
.adminbar .brand img{ height:22px; width:auto; }
.adm-tag{
  font-family: var(--mono); font-size:.6rem; font-weight:500; letter-spacing:.18em;
  color: var(--sell); border:1px solid rgba(240,56,75,.5); border-radius:4px;
  padding:2px 6px; line-height:1.4; white-space:nowrap;
}
.adminbar .nav-links a{ font-size:.88rem; }

/* ------------------------------- page head ------------------------------ */
.adm-head{ display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap; padding-block:26px 6px; }
.adm-head h1{ font-size: clamp(1.5rem, 3vw, 2.1rem); }
.adm-head .lede{ font-size:.95rem; }
.adm-head .right{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }

/* ---------------------------------- KPIs -------------------------------- */
.kpis{ display:grid; gap:10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.kpi{
  border:1px solid var(--line); border-radius:12px; background: var(--surface);
  padding:14px 16px; display:flex; flex-direction:column; gap:3px; min-width:0;
}
.kpi .k-l{ font-family: var(--mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color: var(--muted); }
.kpi .k-v{ font-size:1.6rem; font-weight:600; letter-spacing:-.02em; line-height:1.15; }
.kpi .k-s{ font-size:.78rem; color: var(--text-2); line-height:1.45; }
.kpi-good .k-v{ color: var(--buy); }
.kpi-bad .k-v{ color: var(--sell); }
.kpi-warn .k-v{ color: var(--amber); }

/* ------------------------------- state chips ---------------------------- */
/* ONE vocabulary of states for the whole panel. An operator reads the colour
   before the word, so "expired" cannot be amber on one page and red on the
   next. The mapping lives in fexora-admin.js; these are the five looks. */
.st{
  display:inline-block; font-family: var(--mono); font-size:.68rem; font-weight:500;
  letter-spacing:.04em; padding:3px 8px; border-radius:99px; white-space:nowrap;
  border:1px solid transparent;
}
.st-ok  { color:#7FE3CD; background: rgba(18,168,138,.14); border-color: rgba(18,168,138,.38); }
.st-bad { color:#FF9AA6; background: rgba(240,56,75,.13); border-color: rgba(240,56,75,.38); }
.st-warn{ color:#FFE0A3; background: rgba(255,209,102,.12); border-color: rgba(255,209,102,.36); }
.st-info{ color:#9AE8F7; background: rgba(34,211,238,.11); border-color: rgba(34,211,238,.34); }
.st-dim { color: var(--muted); background: rgba(126,158,196,.09); border-color: var(--line); }
.st-hot {
  color:#05070B; background: var(--buy); border-color: var(--buy); font-weight:600;
  animation: stpulse 1.6s ease-in-out infinite;
}
@keyframes stpulse{ 50%{ box-shadow:0 0 0 5px rgba(18,168,138,.22); } }

/* ------------------------------- filter bar ----------------------------- */
.filters{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.fsearch, .fsel{ display:flex; min-width:0; }
.fsearch input, .fsel select{
  font-family: var(--body); font-size:.88rem; color: var(--text);
  background: var(--surface); border:1px solid var(--line-2); border-radius:9px;
  padding:9px 12px; min-width:0;
}
.fsearch input{ width: min(280px, 60vw); }
.fsel select{ appearance:none; padding-right:30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 55%, calc(100% - 10px) 55%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; }
.fcount{ font-family: var(--mono); font-size:.76rem; color: var(--muted); margin-left:2px; }
.btn-sm{ padding:8px 13px; font-size:.8rem; }
.filters .btn-sm{ margin-left:auto; }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path: inset(50%); }

/* --------------------------------- tables ------------------------------- */
.adm-tbl{ min-width: 680px; font-size:.9rem; }
.adm-tbl td{ vertical-align:middle; }
.adm-tbl tbody tr:last-child td{ border-bottom:0; }
.adm-tbl tbody tr.clickable{ cursor:pointer; }
.adm-tbl tbody tr.clickable:hover{ background: rgba(126,158,196,.055); }
.adm-tbl tbody tr.clickable:focus-visible{ outline:2px solid var(--brand-2); outline-offset:-2px; }
.adm-tbl th.sortable{ cursor:pointer; user-select:none; white-space:nowrap; }
.adm-tbl th.sortable:hover{ color: var(--text-2); }
.adm-tbl th .sar{ display:inline-block; width:0; height:0; margin-left:6px; vertical-align:middle;
  border-left:3.5px solid transparent; border-right:3.5px solid transparent; border-bottom:5px solid var(--line-3); opacity:0; }
.adm-tbl th[data-sort="up"] .sar{ opacity:1; border-bottom-color: var(--brand-2); }
.adm-tbl th[data-sort="down"] .sar{ opacity:1; border-bottom:0; border-top:5px solid var(--brand-2); }
.adm-tbl .who{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.adm-tbl .who b{ font-weight:600; font-size:.9rem; }
.adm-tbl .who span{ font-family: var(--mono); font-size:.74rem; color: var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:30ch; }
.adm-tbl .pk{ display:flex; gap:4px; flex-wrap:wrap; }
.adm-tbl .pk i{ font-style:normal; font-family: var(--mono); font-size:.66rem; color: var(--text-2);
  border:1px solid var(--line); border-radius:4px; padding:1px 5px; }
.empty-row td{ text-align:center; padding-block:34px; }
.empty{ color: var(--muted); font-size:.9rem; }

/* --------------------------------- pager -------------------------------- */
.pager{ display:flex; gap:4px; align-items:center; margin-top:12px; flex-wrap:wrap; }
.pg{
  font-family: var(--mono); font-size:.8rem; color: var(--text-2); cursor:pointer;
  background: var(--surface); border:1px solid var(--line); border-radius:8px;
  min-width:34px; height:34px; padding-inline:8px;
}
.pg:hover:not([disabled]){ border-color: var(--line-3); color: var(--text); }
.pg.on{ color: var(--text); border-color: var(--brand-2); background: rgba(34,211,238,.1); }
.pg[disabled]{ opacity:.35; cursor:not-allowed; }
.pg-gap{ color: var(--muted); padding-inline:3px; }

/* ------------------------------ side panel ------------------------------ */
.side{ position:fixed; inset:0; z-index:70; pointer-events:none; }
.side[data-open="0"]{ visibility:hidden; }
.side-back{ position:absolute; inset:0; background: rgba(2,4,8,.66); opacity:0; transition: opacity .2s; }
.side-panel{
  position:absolute; top:0; right:0; bottom:0; width: min(520px, 100%);
  background: var(--ink-2); border-left:1px solid var(--line-2);
  transform: translateX(100%); transition: transform .24s cubic-bezier(.2,.8,.3,1);
  display:flex; flex-direction:column; overflow:hidden;
}
.side[data-open="1"]{ pointer-events:auto; }
.side[data-open="1"] .side-back{ opacity:1; }
.side[data-open="1"] .side-panel{ transform:none; }
.side-head{ display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--line); }
.side-title{ font-size:1.05rem; margin:0; flex:1; min-width:0; }
.side-x{ background:none; border:0; color: var(--text-2); font-size:1.5rem; line-height:1; cursor:pointer; padding:0 4px; }
.side-x:hover{ color: var(--text); }
.side-body{ padding:20px; overflow-y:auto; display:flex; flex-direction:column; gap:16px; }
.side-body .readout .r{ padding:11px 14px; font-size:.82rem; }
.side-body h4{ font-family: var(--mono); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color: var(--muted); font-weight:500; }
.side-acts{ display:flex; gap:8px; flex-wrap:wrap; }
.side-acts .btn{ padding:9px 14px; font-size:.84rem; }

/* --------------------------------- toasts ------------------------------- */
.toasts{ position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:90;
  display:flex; flex-direction:column; gap:8px; width: min(560px, calc(100vw - 28px)); }
.toast{
  background: var(--surface-2); border:1px solid var(--line-2); border-radius:11px;
  padding:13px 40px 13px 15px; font-size:.88rem; line-height:1.5; color: var(--text-2);
  box-shadow: 0 18px 44px -14px rgba(0,0,0,.8); position:relative;
  animation: tin .18s ease-out;
}
@keyframes tin{ from{ transform: translateY(8px); opacity:0; } }
.toast-ok{ border-color: rgba(18,168,138,.5); }
.toast-bad{ border-color: rgba(240,56,75,.5); }
.toast-x{ position:absolute; top:7px; right:9px; background:none; border:0; color: var(--muted);
  font-size:1.2rem; line-height:1; cursor:pointer; padding:2px 5px; }
.toast-x:hover{ color: var(--text); }

/* ------------------------- two-column admin body ------------------------ */
.adm-split{ display:grid; gap:18px; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); align-items:start; }
.adm-stack{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.adm-card{ border:1px solid var(--line); border-radius:12px; background: var(--surface); padding:16px 18px;
  display:flex; flex-direction:column; gap:11px; min-width:0; }
.adm-card > h3{ font-size:.98rem; }
.adm-card .small{ line-height:1.55; }
.adm-h{ font-family: var(--mono); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase;
  color: var(--muted); font-weight:500; display:flex; align-items:center; gap:9px; }
.adm-h::after{ content:""; flex:1; height:1px; background: var(--line); }

/* A list of short lines: the attention list, today's activity, job states. */
.lines{ display:flex; flex-direction:column; }
.lines > li{ display:flex; gap:10px; align-items:baseline; padding:9px 0; border-bottom:1px solid var(--line);
  font-size:.86rem; line-height:1.5; }
.lines > li:last-child{ border-bottom:0; }
.lines{ list-style:none; margin:0; padding:0; }
.lines time{ font-family: var(--mono); font-size:.74rem; color: var(--muted); flex:none; min-width:8ch; }
.lines .t{ flex:1; min-width:0; color: var(--text-2); }
.lines .t b{ color: var(--text); font-weight:600; }
.lines a{ color: var(--brand-2); text-decoration:none; }
.lines a:hover{ text-decoration:underline; }

/* The big clock on the drops page: an operator watching a five-minute window
   should not have to read it off a table row. */
.bigclock{ display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.bigclock .bc-l{ font-family: var(--mono); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color: var(--muted); }
.bigclock .bc-v{ font-family: var(--mono); font-size: clamp(1.7rem, 5vw, 2.6rem); font-weight:500;
  font-variant-numeric: tabular-nums; letter-spacing:-.02em; line-height:1; }
.bigclock.live .bc-v{ color: var(--buy); }
.bigclock .bc-s{ font-size:.82rem; color: var(--text-2); }

/* A capacity bar for "61 of 100 claimed". */
.cap{ display:flex; align-items:center; gap:9px; }
.cap .meter{ width:86px; }
.cap .meter i.full{ background: var(--sell); }
.cap b{ font-family: var(--mono); font-size:.8rem; font-weight:500; }

/* An editable-looking field that is not editable yet says so, rather than
   accepting a number and throwing it away. */
.ro{ display:flex; align-items:center; gap:8px; }
.ro input{
  /* 11ch, because "₹30,590" at 9ch clipped its last character - a price field
     that silently truncates is the worst possible field to silently truncate. */
  font-family: var(--mono); font-size:.86rem; color: var(--text-2); width:11ch;
  background: var(--ink); border:1px dashed var(--line-2); border-radius:7px; padding:6px 8px;
}
.ro input[readonly]{ cursor:not-allowed; }

@media (max-width: 900px){
  .adm-split{ grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 620px){
  .adm-tbl .hide-sm, .adm-tbl th.hide-sm{ display:none; }
  .adm-tbl{ min-width: 480px; }
  .filters .btn-sm{ margin-left:0; }
  .kpi .k-v{ font-size:1.35rem; }
}