/* ═══════════════════════════════════════════════════════════════════════
   CS2 Services — Operations Center theme
   Orange on near-black, tactical HUD styling, animated backdrop.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --bg:        #08080a;
  --bg2:       #0c0d11;
  --panel:     rgba(18,19,24,.72);
  --panel2:    rgba(24,25,31,.86);

  --orange:    #ff7a1a;
  --orange-hi: #ffa04d;
  --orange-lo: #c95a08;
  --green:     #22e06a;
  --red:       #ff5252;
  --amber:     #ffc233;

  --line:      rgba(255,122,26,.16);
  --line-soft: rgba(255,255,255,.06);

  --text:      #ecebe8;
  --dim:       #a09e9a;
  --faint:     #8a8884;   /* 4.6:1 on the panel background - WCAG AA */

  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --ui:   'Chakra Petch', 'Segoe UI', system-ui, sans-serif;

  --r:   4px;
  --max: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--orange); color: #12100d; }

a { color: var(--orange); text-decoration: none; }
a:hover { color: var(--orange-hi); }

img { max-width: 100%; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 22px; }
.hidden { display: none !important; }

/* The browser's own [hidden] rule is a UA style, so ANY author `display`
   silently beats it — `.shell { display: grid }` on a [hidden] element renders
   as a grid. That is not a theoretical footgun: it left the admin sign-in box
   painted on top of the panel after a successful login, which reads exactly
   like a login that failed. Restate it as an author rule that wins. */
[hidden] { display: none !important; }
.center { text-align: center; }
.sm  { font-size: 13px; }
.muted { color: var(--dim); }

/* ── animated backdrop ─────────────────────────────────────────────────
   Everything here is decorative. Layers are fixed so the page scrolls
   over a stable scene rather than dragging the effects along with it. */

.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg > * { position: absolute; inset: -20%; }

/* Diagonal stripes, drifting. The travel distance is one full tile on the
   135deg axis, so the loop repeats with no visible seam. */
.bg-stripes {
  background: repeating-linear-gradient(
    135deg,
    transparent 0 46px,
    rgba(255,122,26,.028) 46px 50px,
    transparent 50px 96px,
    rgba(255,122,26,.014) 96px 98px
  );
  animation: drift 26s linear infinite;
}
@keyframes drift {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-138px, 138px, 0); }
}

/* Faint technical grid, static — keeps the stripes from reading as a gif. */
.bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 75%);
}

/* Breathing orange bloom behind the hero. */
.bg-glow {
  background:
    radial-gradient(ellipse 60% 46% at 50% -6%, rgba(255,122,26,.20), transparent 62%),
    radial-gradient(ellipse 44% 40% at 12% 26%, rgba(255,122,26,.075), transparent 60%),
    radial-gradient(ellipse 46% 42% at 90% 62%, rgba(255,60,0,.055), transparent 62%);
  animation: breathe 11s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: .78; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.045); }
}

/* Slow sweep, like a radar line passing down the screen. */
.bg-scan {
  inset: auto 0 auto 0;
  height: 42%;
  background: linear-gradient(180deg,
    transparent 0%, rgba(255,122,26,.055) 48%, rgba(255,122,26,.09) 50%,
    rgba(255,122,26,.055) 52%, transparent 100%);
  animation: sweep 9s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes sweep {
  0%   { transform: translateY(-60vh); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(115vh); opacity: 0; }
}

.bg-vignette {
  background: radial-gradient(ellipse 100% 80% at 50% 40%, transparent 40%, rgba(0,0,0,.72) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .bg-stripes, .bg-glow { animation: none; }
  .bg-scan { display: none; }
}

/* ── HUD corners ───────────────────────────────────────────────────────
   Fixed tactical readouts. Hidden on narrow screens where they would
   collide with real content. */

.hud { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
/* Direct children only — the inner data-i18n spans must stay inline, or
   absolute positioning stacks every label on the same point. */
.hud > span {
  position: absolute;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: rgba(255,122,26,.42);
  text-transform: uppercase;
  white-space: nowrap;
}
.hud b { color: rgba(255,160,77,.8); font-weight: 700; }
.hud-tl { top: 84px;    left: 22px; }
.hud-tr { top: 84px;    right: 22px; }
.hud-bl { bottom: 18px; left: 22px; }
.hud-br { bottom: 18px; right: 22px; }

@media (max-width: 1320px) { .hud { display: none; } }

/* ── shared bits ───────────────────────────────────────────────────────*/

/* Pulsing status dot, reused in the header, footer and connect card. */
.live, .dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(34,224,106,.6);
  animation: pulse 2.2s ease-out infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,224,106,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(34,224,106,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,224,106,0); }
}

/* ── buttons ───────────────────────────────────────────────────────────*/

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  /* Never wrap. A flex row that runs out of room will otherwise break the
     label across lines - "[ FREE ]" became three lines on a 360px phone and
     pushed the header to three times its height. */
  white-space: nowrap;
  padding: 12px 22px;
  border: 1px solid var(--orange);
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255,122,26,.16), rgba(255,122,26,.06));
  color: var(--orange-hi);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .15s, border-color .15s, box-shadow .2s, transform .12s, background .2s;
}
/* Light sweeps across on hover. z-index keeps it behind the label. */
.btn::after {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform .55s ease;
}
.btn:hover::after { transform: translateX(130%); }
.btn:hover {
  color: #14100b;
  background: var(--orange);
  box-shadow: 0 0 22px rgba(255,122,26,.4);
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn:disabled::after { display: none; }

.btn.lg   { padding: 16px 30px; font-size: 14px; }
.btn.sm   { padding: 8px 14px;  font-size: 11.5px; }
.btn.wide { width: 100%; }

.btn.ghost {
  border-color: var(--line-soft);
  background: rgba(255,255,255,.03);
  color: var(--dim);
}
.btn.ghost:hover {
  border-color: var(--orange);
  background: rgba(255,122,26,.1);
  color: var(--orange-hi);
  box-shadow: none;
}

.btn.free {
  border-color: var(--green);
  color: #7cf5ac;
  background: linear-gradient(180deg, rgba(34,224,106,.16), rgba(34,224,106,.05));
}
.btn.free:hover {
  background: var(--green);
  color: #04180c;
  box-shadow: 0 0 22px rgba(34,224,106,.45);
}

/* ── header ────────────────────────────────────────────────────────────*/

/* ── promotion banner ──────────────────────────────────────────────────
   index.php renders this above the header whenever a banner is scheduled.
   It was styled only in the admin stylesheet, which the public site does not
   load - so on the live site it fell back to raw block flow: no padding, no
   colour, the body text running straight into the link, and a 24px close
   button wedged inline after it. On a phone that reads as a broken header,
   because it sits directly above the real one.

   It is deliberately not sticky. The header below it is, and two stacked
   sticky bars eat a third of a phone screen. */
.promobar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 22px;
  padding-top: calc(11px + var(--safe-t, 0px));
  padding-left: calc(22px + var(--safe-l, 0px));
  padding-right: calc(22px + var(--safe-r, 0px));
  border-bottom: 1px solid var(--line);
  background: rgba(255,122,26,.10);
  font-size: 14px;
  line-height: 1.45;
}

/* Title and body share a line while there is room, then wrap as a pair. */
.promobar > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 12px;
  flex: 1;
  min-width: 0;
}
.promobar b {
  font-family: var(--mono);
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.promobar span { color: var(--dim); font-size: 13px; }

.promocta {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 14px;
  border: 1px solid currentColor;
  border-radius: var(--r);
  color: inherit;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.promocta:hover { background: currentColor; color: #12100d; }

.promox {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border: 0; border-radius: var(--r);
  background: transparent;
  color: var(--faint);
  font-size: 20px; line-height: 1;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.promox:hover { color: var(--text); background: rgba(255,255,255,.08); }

/* The four styles the panel offers. */
.promobar.orange { border-bottom-color: rgba(255,122,26,.4); background: rgba(255,122,26,.10); color: var(--orange-hi); }
.promobar.green  { border-bottom-color: rgba(34,224,106,.4); background: rgba(34,224,106,.10); color: #7cf5ac; }
.promobar.amber  { border-bottom-color: rgba(255,194,51,.4); background: rgba(255,194,51,.10); color: #ffd97a; }
.promobar.red    { border-bottom-color: rgba(255,82,82,.4);  background: rgba(255,82,82,.10);  color: #ff9a9a; }

/* Phones. Three items in a row cannot share 360px with a sentence in them, so
   the close button leaves the flow and the text gets the full width. */
@media (max-width: 640px) {
  .promobar {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 9px;
    padding: 10px 16px;
    padding-top: calc(10px + var(--safe-t, 0px));
    /* Room for the absolutely positioned close button. */
    padding-right: calc(46px + var(--safe-r, 0px));
  }
  .promobar > div { flex: 1 0 100%; }
  .promobar b { font-size: 11.5px; letter-spacing: .06em; }
  .promobar span { font-size: 12.5px; }
  .promocta { font-size: 11px; padding: 8px 13px; }
  .promox {
    position: absolute;
    top: calc(4px + var(--safe-t, 0px));
    right: calc(6px + var(--safe-r, 0px));
    width: 34px; height: 34px;
  }
}

.bar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(8,8,10,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
/* Thin orange rule under the header, brightest in the middle. */
.bar::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,122,26,.55), transparent);
}

.barinner { display: flex; align-items: center; gap: 18px; height: 68px; }

/* The brand is the one part of the bar allowed to give way. min-width:0 lets
   it actually shrink - a flex item defaults to min-width:auto and refuses to
   go below its content, which is what forces everything else to wrap. */
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); min-width: 0; }
.brand img { filter: drop-shadow(0 0 8px rgba(255,122,26,.45)); flex-shrink: 0; }
.brandtext { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brandtext b {
  font-family: var(--mono);
  font-size: 15px; font-weight: 700; letter-spacing: .18em;
  color: var(--text);
  /* A configured site name can be any length. Truncate it rather than let it
     wrap and drag the header open. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The controls keep their size; they are the things people tap. */
.barright { flex-shrink: 0; }
.barright .btn, .barright .langbtn { flex-shrink: 0; }
.brandtext i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint);
  display: flex; align-items: center;
}
.brandtext i .live { width: 5px; height: 5px; margin-right: 5px; }

.mainnav { display: flex; gap: 26px; margin-inline: auto; }
.mainnav a {
  font-family: var(--mono);
  font-size: 11.5px; font-weight: 500; letter-spacing: .14em;
  color: var(--dim);
  position: relative;
  padding: 4px 0;
}
.mainnav a::after {
  content: '';
  position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--orange);
  transition: width .22s ease;
}
.mainnav a:hover { color: var(--orange-hi); }
.mainnav a:hover::after { width: 100%; }

.barright { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.authnav  { display: flex; align-items: center; gap: 8px; }
.authnav .muted { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; }

/* ── language switcher ─────────────────────────────────────────────────*/

.lang { position: relative; }
.langbtn {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  padding: 8px 11px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: rgba(255,255,255,.03);
  color: var(--dim);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.langbtn:hover,
.langbtn[aria-expanded="true"] { border-color: var(--orange); color: var(--orange-hi); }

.langmenu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 168px; margin: 0; padding: 5px;
  list-style: none;
  background: #101116;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 18px 40px rgba(0,0,0,.6);
  z-index: 50;
}
.langmenu li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 11px;
  font-family: var(--mono); font-size: 12px;
  color: var(--dim);
  cursor: pointer;
  border-radius: 3px;
}
.langmenu li:hover { background: rgba(255,122,26,.1); color: var(--orange-hi); }
.langmenu li[aria-selected="true"] { color: var(--orange); }
.langmenu li span { font-size: 10px; letter-spacing: .12em; opacity: .6; }

/* ── hero ──────────────────────────────────────────────────────────────*/

main, footer { position: relative; z-index: 2; }

.hero { padding: 92px 0 74px; text-align: center; }

.eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--orange);
  padding: 7px 15px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: rgba(255,122,26,.06);
  margin-bottom: 26px;
}

.hero h1 {
  margin: 0 0 20px;
  font-size: clamp(44px, 8.4vw, 92px);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.015em;
  text-transform: uppercase;
}
.hero h1 .t1 { display: block; color: var(--text); }
.hero h1 .t2 {
  display: block;
  background: linear-gradient(100deg, var(--orange-lo), var(--orange) 35%, var(--orange-hi) 60%, var(--orange) 85%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6s ease-in-out infinite;
  filter: drop-shadow(0 0 26px rgba(255,122,26,.28));
}
@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.lede {
  max-width: 620px; margin: 0 auto 18px;
  font-size: 17px; color: var(--dim);
}

.tags {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .16em;
  color: var(--faint);
  margin: 0 0 34px;
}

.cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

.mission {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .2em;
  color: rgba(255,122,26,.45);
  margin: 36px 0 0;
}

/* ── stats strip ───────────────────────────────────────────────────────*/

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 30px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--line);
  overflow: hidden;
}
.stat {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 22px 12px;
  background: rgba(12,13,17,.82);
  transition: background .2s;
}
.stat:hover { background: rgba(255,122,26,.05); }
.stat .n {
  font-family: var(--mono);
  font-size: clamp(22px, 3.4vw, 34px);
  font-weight: 700;
  color: var(--orange);
  text-shadow: 0 0 20px rgba(255,122,26,.35);
  font-variant-numeric: tabular-nums;
}
.stat .k {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--faint);
}

@media (max-width: 620px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ── sections ──────────────────────────────────────────────────────────*/

section.wrap { padding: 62px 22px; }

.sectionhead {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 30px;
}
.sectionhead h2 {
  margin: 0;
  font-family: var(--mono);
  font-size: 15px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--orange);
  white-space: nowrap;
}
/* Rule filling the rest of the row, so headings read like panel labels. */
.sectionhead::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
  order: 3;
}
.sectionhead p, .sectionhead select { order: 2; }
.sectionhead p { margin: 0; font-size: 14px; }

/* ── cards ─────────────────────────────────────────────────────────────*/

.card {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: 24px;
  margin-bottom: 18px;
  position: relative;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* Corner ticks — cheap way to make a plain box read as instrumentation. */
.card::before, .card::after {
  content: '';
  position: absolute;
  width: 11px; height: 11px;
  border: 1px solid var(--orange);
  opacity: .5;
}
.card::before { top: -1px;    left: -1px;  border-right: 0; border-bottom: 0; }
.card::after  { bottom: -1px; right: -1px; border-left: 0;  border-top: 0; }

.card h3 {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--orange-hi);
}

.grid2 { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; }
@media (max-width: 780px) { .grid2 { grid-template-columns: 1fr; } }

.balcard { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.balcard .label {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint);
}
.bignum {
  font-family: var(--mono);
  font-size: 48px; font-weight: 700; line-height: 1.1;
  color: var(--orange);
  text-shadow: 0 0 24px rgba(255,122,26,.3);
  font-variant-numeric: tabular-nums;
}
.balcard .btn { margin-top: 14px; }

/* ── forms ─────────────────────────────────────────────────────────────*/

label {
  display: block;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint);
}
/* An exclusion list, not an inclusion list. Naming the types to style meant
   every new one arrived unstyled - search boxes and date pickers were
   rendering as white rounded browser defaults on a black page. This way the
   only inputs left alone are the ones that genuinely should be. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="image"]):not([type="range"]):not([type="color"]),
textarea,
select {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 11px 13px;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  background: rgba(0,0,0,.4);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255,122,26,.13);
}
/* WebKit gives search fields their own appearance, which reintroduces the
   rounded native box on top of everything above. */
input[type="search"] {
  appearance: none;
  -webkit-appearance: none;
}
label small {
  display: block;
  margin-top: 6px;
  font-family: var(--ui);
  font-size: 11px; letter-spacing: .02em; text-transform: none;
  color: var(--faint);
}

/* 34px on the right is the arrow's space - see the select rule below. A
   padding shorthand here would reclaim it and the label would run under the
   arrow, which is exactly what a longer currency label did. */
.sectionhead select { width: auto; margin: 0; padding: 8px 34px 8px 12px; font-size: 12px; }

.types { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chk {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0;
  padding: 9px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: rgba(0,0,0,.3);
  cursor: pointer;
  font-size: 11px; letter-spacing: .12em;
  transition: border-color .15s, color .15s, background .15s;
}
.chk:hover { border-color: rgba(255,122,26,.4); }
.chk input { accent-color: var(--orange); width: 14px; height: 14px; margin: 0; }
.chk:has(input:checked) {
  border-color: var(--orange);
  background: rgba(255,122,26,.1);
  color: var(--orange-hi);
}

.msg { margin-top: 12px; font-size: 13.5px; min-height: 20px; }
.msg.ok  { color: var(--green); }
.msg.bad { color: var(--red); }

/* ── connect card ──────────────────────────────────────────────────────*/

.connect { border-color: rgba(34,224,106,.28); }
.connect::before, .connect::after { border-color: var(--green); }

.copyrow { display: flex; gap: 10px; align-items: stretch; margin-top: 14px; }
.copyrow code {
  flex: 1;
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--green);
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(34,224,106,.24);
  border-radius: var(--r);
  overflow-x: auto;
  white-space: nowrap;
}
kbd {
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 2px 6px;
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  background: rgba(255,255,255,.05);
}

/* ── steps ─────────────────────────────────────────────────────────────*/

.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin: 0; padding: 0;
}
.steps li {
  position: relative;
  padding: 26px 22px 22px;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color .2s, transform .2s;
}
/* Orange bar wipes in along the top edge on hover. */
.steps li::before {
  content: '';
  position: absolute; top: 0; left: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--orange), transparent);
  transition: width .35s ease;
}
.steps li:hover { border-color: var(--line); transform: translateY(-3px); }
.steps li:hover::before { width: 100%; }
.steps .num {
  font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: .2em;
  color: var(--orange);
  opacity: 1;
}
.steps h3 { margin: 10px 0 8px; font-size: 17px; font-weight: 600; }
.steps p  { margin: 0; font-size: 14.5px; color: var(--dim); }

/* ── features ──────────────────────────────────────────────────────────*/

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.features article {
  padding: 22px;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--orange);
  border-radius: var(--r);
  transition: background .2s, transform .2s;
}
.features article:hover { background: var(--panel2); transform: translateY(-3px); }
.features .ico {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .2em;
  color: var(--orange);
}
.features h3 { margin: 8px 0; font-size: 16.5px; font-weight: 600; }
.features p  { margin: 0; font-size: 14.5px; color: var(--dim); }

/* ── packages ──────────────────────────────────────────────────────────*/

.packages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 16px;
}
.pkg {
  position: relative;
  padding: 26px 20px;
  text-align: center;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.pkg:hover {
  border-color: var(--orange);
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(0,0,0,.5);
}
.pkg.best { border-color: var(--orange); box-shadow: 0 0 30px rgba(255,122,26,.14); }
.pkg .tag {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 9.5px; font-weight: 700; letter-spacing: .16em;
  padding: 4px 11px;
  border-radius: 100px;
  background: var(--orange);
  color: #14100b;
  white-space: nowrap;
}
.pkg .label {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint);
}
.pkg .n {
  font-family: var(--mono);
  font-size: 38px; font-weight: 700; line-height: 1.15;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pkg .price {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 22px; font-weight: 700;
  color: var(--orange);
}
.pkg .per { font-size: 12px; color: var(--faint); }

/* ── tables ────────────────────────────────────────────────────────────*/

.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left;
  padding: 9px 12px;
  font-family: var(--mono);
  font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint);
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
td {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  vertical-align: top;
}

.bar-progress {
  margin-top: 5px;
  width: 116px; height: 4px;
  background: rgba(255,255,255,.08);
  border-radius: 2px;
  overflow: hidden;
}
.bar-progress i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--orange-lo), var(--orange));
  transition: width .4s ease;
}

.pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid currentColor;
}
.pill.done            { color: var(--green); }
.pill.running,
.pill.pending,
.pill.waiting_connect { color: var(--amber); }
.pill.failed,
.pill.cancelled       { color: var(--red); }

/* Free trials in order history.
 *
 * Deliberately quieter than the status pills beside it: this labels the order,
 * it does not report on it, and a second loud badge on the same row would
 * compete with the thing the customer is actually looking for. Sits under the
 * order number with a little air so it does not crowd the id. */
/* ── delivery panel (paid orders) ───────────────────────────────────────
   Mirrors the free page's panel. Sits under the order table rather than in a
   row, because the row is five columns wide and this needs room. */
.delivery-panel { margin-top: 18px; }
.delivery-panel h3 { margin: 0 0 12px; }

.dp-counts {
    display: flex; align-items: baseline; gap: 12px;
    margin-bottom: 8px;
}
.dp-counts .mono { font-family: var(--mono); font-size: 15px; }

/* A reason, not an error: paused by the customer, or waiting on capacity.
   Quieter than a failure so it does not read as something broken. */
.dp-note {
    margin-top: 10px;
    padding: 9px 12px;
    border-left: 2px solid var(--amber);
    background: rgba(255,255,255,.03);
    font-size: 13px;
    color: var(--dim);
}

.dp-checks { margin-top: 16px; display: grid; gap: 7px; }
.dp-check {
    display: flex; align-items: center; gap: 9px;
    font-size: 13px; color: var(--dim);
}
.dp-check.ok { color: inherit; }
.dp-tick {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; flex: 0 0 18px;
    border: 1px solid currentColor; border-radius: 100px;
    font-size: 11px;
}
.dp-check.ok .dp-tick { color: var(--green); }

/* Buttons get real space between them - they have been asked for twice. */
.dp-actions {
    margin-top: 18px;
    display: flex; flex-wrap: wrap; gap: 12px;
}
.dp-actions .btn { flex: 0 0 auto; }

.pill.free-trial {
    /* Its own line, under the order number.
     *
     * .pill is inline-block, so without this the badge sits alongside "#1" and
     * the two read as one run-together token. width:fit-content keeps the
     * border tight to the text now that it is a block. */
    display: block;
    width: fit-content;
    margin-top: 6px;
    color: var(--dim, #8a8a8a);
    opacity: .85;
}

/* ── faq ───────────────────────────────────────────────────────────────*/

details {
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: var(--panel);
  margin-bottom: 10px;
  transition: border-color .2s;
}
details[open] { border-color: var(--line); }
summary {
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  font-size: 15px; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: '+';
  font-family: var(--mono);
  font-size: 18px;
  color: var(--orange);
  transition: transform .2s;
  flex-shrink: 0;
}
details[open] summary::after { transform: rotate(45deg); }
summary:hover { color: var(--orange-hi); }
details p {
  margin: 0;
  padding: 0 20px 18px;
  font-size: 14.5px;
  color: var(--dim);
}

/* ── footer ────────────────────────────────────────────────────────────*/

footer {
  border-top: 1px solid var(--line);
  background: rgba(6,6,8,.7);
  margin-top: 40px;
  padding: 36px 0 30px;
}
.footinner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 26px;
  align-items: start;
}
.footinner nav { display: flex; flex-direction: column; gap: 8px; }
.footinner nav a {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .14em;
  color: var(--dim);
}
.footinner nav a:hover { color: var(--orange-hi); }
.footinner > p:last-child { text-align: right; font-size: 11.5px; line-height: 1.8; }
.footinner .brand { margin-bottom: 8px; }

@media (max-width: 780px) {
  .footinner { grid-template-columns: 1fr; }
  .footinner > p:last-child { text-align: left; }
}

/* ── modal ─────────────────────────────────────────────────────────────*/

.modal {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: 22px;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fade .18s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modalbox {
  width: 100%; max-width: 400px;
  margin: 0;
  background: #101116;
  border-color: var(--line);
  animation: rise .22s cubic-bezier(.2,.9,.3,1);
}
@keyframes rise {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.modalbox .x {
  position: absolute; top: 8px; right: 10px;
  width: 30px; height: 30px;
  font-size: 22px; line-height: 1;
  background: none; border: 0;
  color: var(--faint);
  cursor: pointer;
}
.modalbox .x:hover { color: var(--orange); }
.swap { margin: 14px 0 0; }

/* ── responsive ────────────────────────────────────────────────────────*/

@media (max-width: 900px) {
  .mainnav { display: none; }
  .brandtext i { display: none; }
}
@media (max-width: 520px) {
  .hero { padding: 58px 0 50px; }
  .btn.lg { padding: 14px 20px; font-size: 12.5px; }
  .cta { flex-direction: column; }
  .cta .btn { width: 100%; }
}

/* ── free-trial steps ──────────────────────────────────────────────────
   Numbered cards that gain a state as the customer moves through them:
   `now` is the one to act on, `done` is behind them. Everything else is
   dimmed, so at a glance there is only ever one thing to do. */

.stepcard { opacity: .55; transition: opacity .25s, border-color .25s; }
.stepcard.now  { opacity: 1; border-color: var(--line); }
.stepcard.done { opacity: 1; }
.stepcard.done::before, .stepcard.done::after { border-color: var(--green); }

.stephead { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.stephead h3 { margin: 0 0 3px; }
.stephead p  { margin: 0; }

.stepnum {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 12px; font-weight: 700;
  color: var(--orange);
  background: rgba(255,122,26,.08);
}
.stepcard.now  .stepnum { border-color: var(--orange); box-shadow: 0 0 14px rgba(255,122,26,.3); }
.stepcard.done .stepnum {
  border-color: var(--green);
  color: var(--green);
  background: rgba(34,224,106,.1);
  box-shadow: none;
}

.stepcard form { margin-top: 4px; }
.stepcard form input { margin-bottom: 12px; }
.stepcard .copyrow { margin-top: 0; }
.stepcard .copyrow code { color: var(--orange); border-color: var(--line); }

/* ── native controls, brought into the theme ───────────────────────────
   The popup list of a <select> is drawn by the OS and cannot be styled, but
   everything the page actually renders can be - including the arrow, which
   otherwise stays a light-mode chevron on a dark field. */

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--orange) 50%),
    linear-gradient(135deg, var(--orange) 50%, transparent 50%);
  background-position: calc(100% - 17px) center, calc(100% - 11px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}
/* The list itself: the most a browser will honour, and enough to stop a
   white flash on dark. */
select option { background: #101116; color: var(--text); }

input::placeholder, textarea::placeholder {
  color: var(--faint);
  opacity: .8;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .04em;
}

/* Chrome paints autofilled fields a solid pale yellow. The inset shadow is
   the only way to override it without !important on the background. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 40px #14151a inset;
  caret-color: var(--text);
  transition: background-color 9999s ease-out;
}

/* Date pickers and number spinners ship a dark-on-dark icon otherwise. */
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(62%) sepia(60%) saturate(2600%) hue-rotate(348deg) brightness(101%) contrast(101%);
  cursor: pointer;
}
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { opacity: .5; }

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 12px; width: 12px;
  background: var(--faint);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18M6 6l12 12' stroke='black' stroke-width='3'/%3E%3C/svg%3E") center/contain no-repeat;
  cursor: pointer;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,.03); }
::-webkit-scrollbar-thumb {
  background: rgba(255,122,26,.28);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,122,26,.5); }


/* ═══════════════════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════════════════
   Phones and tablets, not just narrow desktop windows. The differences that
   actually bite are collected here rather than scattered through the file.
   ═══════════════════════════════════════════════════════════════════════ */

/* iOS Safari's toolbars are part of 100vh, so a full-height element is taller
   than the visible page and the bottom is unreachable. dvh tracks the real
   viewport; vh stays as the fallback for browsers without it. */
:root {
  --vh: 100vh;
  /* Notch and home-bar insets. 0 everywhere that has none. */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}
@supports (height: 100dvh) {
  :root { --vh: 100dvh; }
}

/* Landscape on a notched phone puts the notch at one side. */
body {
  padding-left: var(--safe-l);
  padding-right: var(--safe-r);
}

/* A long code block or SteamID must scroll inside its own box, never widen
   the page. Every ancestor of a wide child needs this or the flex/grid parent
   refuses to shrink and the whole layout overflows. */
.wrap, .card, .panel, .tablewrap, .freepage, .main, .viewbody { min-width: 0; }

/* Horizontal scrollers get momentum on iOS and a visible edge, so it is
   obvious there is more to the right rather than looking like a cut-off table. */
.tablewrap {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
@media (hover: none) {
  .tablewrap {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
  }
  /* Once scrolled to the end there is nothing to fade. */
  .tablewrap:not(:hover) { mask-position: 0 0; }
}

/* ── touch targets ─────────────────────────────────────────────────────
   Pointer-coarse only: a mouse hits an 11px button fine, a thumb does not.
   44px is the smallest reliably tappable size. */

@media (pointer: coarse) {
  .btn { min-height: 44px; padding-inline: 18px; }
  .btn.sm { min-height: 40px; font-size: 12px; }
  .rowactions .btn { min-height: 38px; padding: 8px 14px; font-size: 11px; }

  .langmenu li { padding: 12px 14px; }
  .chk { padding: 12px 16px; }
  .chk input { width: 18px; height: 18px; }
  summary { padding: 18px 20px; }
  .promox { padding: 6px 10px; margin: -6px -10px; }

  /* A dashed underline is invisible to a thumb; give them room instead. */
  .linkish, .codechip { padding: 4px 0; display: inline-block; }
}

/* ── forms ─────────────────────────────────────────────────────────────
   Safari zooms the page when a focused input's text is under 16px, and never
   zooms back out. Every input therefore reads at 16px on touch devices, whatever
   it looks like on a desktop. */

@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="image"]):not([type="range"]):not([type="color"]),
  textarea,
  select {
    font-size: 16px;
    padding: 13px 14px;
  }
  .toolbar input { font-size: 16px; padding: 12px 14px; }
  .toolbar select { font-size: 16px; padding: 12px 34px 12px 14px; }
}

/* ── landing page ──────────────────────────────────────────────────────*/

@media (max-width: 900px) {
  .hero { padding: 62px 0 54px; }
  .lede { font-size: 16px; }
  section.wrap { padding: 46px 20px; }
}

@media (max-width: 640px) {
  body { font-size: 15px; }

  .barinner { height: 60px; gap: 10px; }
  .brand img { width: 30px; height: 30px; }
  .brandtext b { font-size: 13px; letter-spacing: .14em; }

  .hero { padding: 42px 0 40px; }
  .hero h1 { font-size: clamp(34px, 11vw, 52px); }
  .eyebrow { font-size: 9.5px; letter-spacing: .16em; padding: 6px 12px; }
  .tags { font-size: 10px; letter-spacing: .1em; }
  .mission { font-size: 9.5px; letter-spacing: .14em; }

  section.wrap { padding: 36px 16px; }
  .wrap { padding-inline: 16px; }
  .card { padding: 18px; }

  .sectionhead { gap: 10px; margin-bottom: 20px; }
  .sectionhead h2 { font-size: 13px; letter-spacing: .16em; }
  /* The filler rule has nowhere to go once the heading wraps. */
  .sectionhead::after { display: none; }

  .stat { padding: 16px 8px; }
  .stat .k { font-size: 8.5px; letter-spacing: .12em; }

  .steps li { padding: 20px 18px; }
  .features article { padding: 18px; }

  .copyrow { flex-direction: column; align-items: stretch; }
  .copyrow .btn { width: 100%; }

  .footinner { gap: 20px; }
  .footinner nav { flex-direction: row; flex-wrap: wrap; gap: 14px; }

  .modal { padding: 14px; align-items: flex-start; }
  .modalbox { max-height: calc(var(--vh) - 28px - var(--safe-b)); }
}

/* ── the header on a phone ─────────────────────────────────────────────
   Signed in, the bar carries six things: logo, brand, language, FREE, your
   name, ADMIN and sign out. That cannot fit 360px at desktop sizes, and the
   two ways it failed were both bad - the labels wrapped mid-button ("[",
   "FREE", "]" on three lines), and once they stopped wrapping the row ran
   off the right edge taking ADMIN and sign-out with it.

   So below 560px the bar sheds what is decorative and tightens what is not.
   Nothing that can be tapped is ever dropped. */
@media (max-width: 560px) {
  .barinner { gap: 8px; }
  .barright { gap: 6px; }

  /* Your own name, next to a button that says ADMIN. The panel tells you who
     you are signed in as; the header does not need to. */
  .authnav > .muted { display: none; }

  /* "System online" under the wordmark. */
  .brandtext i { display: none; }

  .brand img { width: 28px; height: 28px; }
  .brandtext b { font-size: 12px; letter-spacing: .1em; }

  .barright .btn.sm { padding: 8px 11px; font-size: 11px; letter-spacing: .06em; }
  /* The globe is decoration; the language code is the control, and the icon
     costs more width than the brand name can spare. */
  .langbtn svg { display: none; }
  .langbtn { padding: 8px 10px; font-size: 11px; }
}

/* Very small phones, and anything at 200% text zoom. */
@media (max-width: 400px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .types { flex-direction: column; }
  .chk { width: 100%; }

  .barinner { gap: 6px; }
  .barright { gap: 5px; }
  .brand { gap: 7px; }
  .brand img { width: 24px; height: 24px; }
  .brandtext b { font-size: 10.5px; letter-spacing: .04em; }

  .langbtn { padding: 8px 9px; }
  .barright .btn.sm { padding: 8px 9px; letter-spacing: .04em; }
}

/* ── free page ─────────────────────────────────────────────────────────*/

@media (max-width: 560px) {
  .fp-title { font-size: clamp(28px, 9vw, 40px); }
  .fp-sub { font-size: 11px; letter-spacing: .06em; }
  .fp-head h2 { font-size: 15px; }
  .fp-inner { padding: 14px; }
  .fp-actions { flex-direction: column; }
  .fp-actions .btn { width: 100%; }
  .fp-codebox { flex-direction: column; align-items: stretch; }
  .fp-codebox .btn { width: 100%; }
  .fp-warn, .fp-note { font-size: 11.5px; }
}

/* ── landscape phones ──────────────────────────────────────────────────
   Short and wide: vertical padding is the scarce resource, not width. */

@media (max-height: 480px) and (orientation: landscape) {
  .hero { padding: 26px 0 24px; }
  .freepage { padding-top: 24px; }
  .modal { align-items: flex-start; }
  .modalbox { max-height: calc(var(--vh) - 20px); }
}

/* Someone who asked for less motion should not get a moving backdrop; someone
   on a phone should not pay for one either. */
@media (max-width: 640px) {
  .bg-scan { display: none; }
}

/* ── search-visible copy ────────────────────────────────────────────────
   Two readable columns of prose rather than the four-up feature grid: this
   section is meant to be read, and 240px columns of body text are not. */
.seogrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
/* Two columns, not auto-fit. Four cards across three columns leaves one
   orphaned on its own row, and 380px-wide prose is a worse read than 550px. */
@media (min-width: 760px) {
  .seogrid { grid-template-columns: 1fr 1fr; gap: 18px 20px; }
}
.seogrid article {
  padding: 20px 22px;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
}
.seogrid h3 {
  margin: 0 0 9px;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--text);
}
.seogrid p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--dim);
}
.seolink { margin-top: 12px !important; }
.seolink a {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.seolink a:hover { border-bottom-color: var(--orange); }

/* ── account card ────────────────────────────────────────────────────────
   The password form lives in the order form's slot, so it needs a header row
   with a way back. */
.cardhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.cardhead h3 { margin: 0; }

/* Generate sits with the password it produces, and clear of the button below.
   Previously it was flush against CHANGE PASSWORD and the two read as one
   control - easy to press the wrong one. */
.genrow {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 4px 0 20px;
  min-width: 0;
}
.genrow code {
  font-family: var(--mono); font-size: 13px; color: var(--orange);
  overflow-wrap: anywhere; min-width: 0;
}

@media (max-width: 560px) {
  /* Stacked, and the button goes full width: a 44px target beats a neat row. */
  .genrow { align-items: stretch; gap: 8px; margin-bottom: 16px; }
  .genrow .btn { width: 100%; }
  .cardhead { flex-wrap: nowrap; }
  .cardhead h3 { min-width: 0; overflow-wrap: anywhere; }
}

/* Sign-in code box, matching the admin panel's.
   Wide-tracked and centred because a six-digit code is read back from an email
   one character at a time; a normal field makes that needlessly hard. */
.otpinput {
  text-align: center;
  font-family: var(--mono);
  font-size: 24px;
  letter-spacing: .42em;
  /* The tracking leaves a gap after the last digit, which throws the centring
     off unless it is taken back. */
  text-indent: .42em;
  padding: 12px 10px;
}

/* Two stacked buttons need a gap, or they read as one control with a seam. */
#authOtpForm .btn { margin-top: 14px; }
#authOtpForm .btn + .btn { margin-top: 10px; }

/* Stacked buttons and form ends need air, everywhere - not dialog by dialog. */
.modalbox form .btn { margin-top: 18px; }
.modalbox form .btn + .btn { margin-top: 10px; }
.card form .btn.wide { margin-top: 18px; }

/* ── dialogs: only the body scrolls ──────────────────────────────────────
   The box used to scroll itself, with a sticky header riding along inside it.
   That put a scrollbar on the whole dialog, and because the header carried
   negative margins to reach the box edges, a short dialog could still end up a
   few pixels over its own height and show a bar it did not need.

   Now the box is a flex column that never scrolls: the header takes its own
   height, the body takes the rest and scrolls only when its content genuinely
   exceeds it. A short dialog gets no scrollbar at all, because the body is
   given exactly the height of its content. */
.modal .modalbox {
  display: flex;
  flex-direction: column;
  padding: 0;                 /* the children own their padding now */
  max-height: 88vh;
  overflow: hidden;           /* clips to the rounded corners */

  /* Corner ticks only, no box outline.

     .card gives every panel a full border, and --line is a warm orange tint -
     on a dialog that framed the whole thing, so the two corner marks read as
     part of an outline rather than as the detail they are meant to be.

     Made transparent rather than removed so the box keeps its size: dropping a
     1px border on four sides moves every child by a pixel and reflows the
     header rule with it. */
  border-color: transparent;
}
/* Sized against the panel's top bar rather than left to the card's default
   padding, which is what made it look twice as tall as it needed to be. */
.modal .dlghead {
  position: static;           /* outside the scroller; nothing to stick to */
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 11px 12px 11px 20px;
  background: #101116;
  border-bottom: 1px solid rgba(255,122,26,.32);
  box-shadow: 0 1px 0 rgba(255,122,26,.08);
}
.modal .dlghead h3 {
  margin: 0; min-width: 0;
  font-size: 11.5px; letter-spacing: .18em;
  overflow-wrap: anywhere;
}
.modal .dlghead .x {
  position: static;
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--r);
  transition: background .15s, color .15s;
}
.modal .dlghead .x:hover { background: rgba(255,122,26,.12); color: var(--orange); }

/* The corner brackets belong on dialogs too.

   They were taken off because they landed on whatever sat in the corner. That
   was true when the box had no padding of its own - the submit button reached
   the edge. The dialog now has a header rule above and padded content below, so
   the ticks sit on the border where they were always meant to, and the sign-in
   and create-account dialogs match every other panel on the site.

   Drawn above the content rather than under it: the box has a solid background
   and a bracket hidden behind it is the same as no bracket. */
.modal .modalbox::before,
.modal .modalbox::after {
  display: block;
  z-index: 1;
  pointer-events: none;
}
/* Pulled inside the box.

   .card draws its brackets at -1px so they sit ON the border. A dialog clips to
   its rounded corners with overflow:hidden, and anything at a negative offset
   is simply cut away - which is why the sign-in and create-account dialogs had
   no brackets while every other panel on the site did. Moving them to 0 puts
   them just inside the edge, where they survive the clip and still read as
   corner ticks. */
.modal .modalbox::before { top: 0; left: 0; }
.modal .modalbox::after  { bottom: 0; right: 0; }
.modal .modalscroll {
  flex: 1 1 auto;
  /* Without this a flex child refuses to shrink below its content and the
     overflow lands on the page instead of inside the box. */
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 24px 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,122,26,.35) transparent;
}
.modal .modalscroll::-webkit-scrollbar { width: 8px; }
.modal .modalscroll::-webkit-scrollbar-track { background: transparent; }
.modal .modalscroll::-webkit-scrollbar-thumb {
  background: rgba(255,122,26,.3);
  border-radius: 100px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.modal .modalscroll::-webkit-scrollbar-thumb:hover { background-color: rgba(255,122,26,.55); }

/* The suspension notice has no scroll wrapper - it is always short. */
#banScreen .modalbox { display: block; padding: 24px; }