/* Zorabot portal - structural stylesheet.
   All colors/typography come from CSS variables defined in theme.css, which
   flips between the light and dark skins via the [data-theme] attribute. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
}
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: var(--display-tracking, 0); }

/* Smooth cross-fade + slight rise between same-origin pages (progressive;
   ignored where unsupported, and browsers reduce it under reduced-motion). */
@view-transition { navigation: auto; }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes vt-out { from { opacity: 1; } to { opacity: 0; } }
::view-transition-old(root) { animation: vt-out 0.16s ease both; }
::view-transition-new(root) { animation: vt-in 0.24s ease both; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- App shell ---------- */
.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
/* Settle the page in on load instead of snapping. Pure CSS, so it still shows
   if scripts are blocked, and it never delays the first paint by more than the
   animation itself. */
@media (prefers-reduced-motion: no-preference) {
  .shell > .main { animation: page-in 200ms ease-out both; }
}
@keyframes page-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.sidebar {
  background: var(--side-bg);
  color: var(--side-text);
  border-right: 1px solid var(--side-border);
  padding: 20px 14px;
  display: flex; flex-direction: column; gap: 26px;
  position: sticky; top: 0; height: 100vh;
}
.brand {
  display: inline-flex; align-items: baseline; gap: 0;
  padding: 2px 8px; font-family: var(--font-display);
  font-weight: 700; font-size: 1.32rem; color: var(--text); letter-spacing: -0.01em;
}
.market-header .brand { font-size: 1.64rem; }
.brand:hover { text-decoration: none; }
/* The wordmark's BOT badge - picked by the owner from /design candidates
   (2026-08-07): "Zora" in text colour, "BOT" as a raised mono chip on the
   accent gradient, glued to the word so it reads as one title. */
.brand .wb {
  font-family: var(--font-mono); font-weight: 700; font-size: 0.42em;
  letter-spacing: 0.12em; padding: 0.2em 0.45em; border-radius: 5px;
  margin-left: 0.14em; transform: translateY(-0.5em);
  background: var(--accent-gradient, var(--accent));
  color: var(--accent-contrast);
}
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-label {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--side-muted); margin: 14px 8px 4px;
}
.navlink {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: calc(var(--radius) - 4px);
  color: var(--side-muted); font-weight: 500;
}
.navlink:hover { color: var(--side-text); background: var(--side-hover); text-decoration: none; }
.navlink.active { color: var(--side-active-text); background: var(--side-active-bg); }
.navlink .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.75; }
.sidebar .foot { margin-top: auto; font-size: 0.75rem; color: var(--side-muted); padding: 0 8px; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 28px; border-bottom: 1px solid var(--border);
  background: var(--topbar-bg); backdrop-filter: var(--topbar-blur, none);
  position: sticky; top: 0; z-index: 5;
}
.pagetitle { font-size: 1.05rem; font-weight: 650; margin: 0; }
.crumb { color: var(--muted); font-weight: 400; }
.userchip {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 12px 5px 6px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--bg-card); font-size: 0.85rem;
}
.userchip img { width: 26px; height: 26px; border-radius: 50%; display: block; }
.userchip .signout { color: var(--muted); font-size: 0.78rem; }

.content { padding: 26px 28px 48px; display: flex; flex-direction: column; gap: 22px; max-width: 1180px; width: 100%; }
.section-title { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 6px 0 -10px; font-weight: 600; }

/* ---------- Cards & stats ---------- */
.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.card.accent-top::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--accent-gradient, var(--accent));
}
.card h3 {
  margin: 0 0 10px; font-size: 0.8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted);
}
.stat { font-size: 1.55rem; font-weight: 700; font-family: var(--font-display); }
.stat small { font-size: 0.85rem; color: var(--muted); font-weight: 500; font-family: var(--font); }
.card .sub { color: var(--muted); font-size: 0.84rem; margin-top: 6px; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0; font-size: 0.88rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; text-align: right; font-weight: 550; overflow-wrap: anywhere; }

/* ---------- Status: signal gems ---------- */
/* A rotated gem + mono uppercase label, coloured by severity. No pills. */
.badge {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--off);
  background: none; border: 0; padding: 0;
}
.badge::before {
  content: ""; width: 8px; height: 8px; flex: none;
  transform: rotate(45deg); background: currentColor;
}
.badge.ok   { color: var(--ok); }
.badge.ok::before  { background: linear-gradient(135deg, var(--ok), var(--accent-2)); box-shadow: 0 0 8px var(--ok-line); }
.badge.warn { color: var(--warn); }
.badge.err  { color: var(--err); }
.badge.err::before { box-shadow: 0 0 8px var(--err-line); }
.badge.info { color: var(--accent-text); }
.badge.info::before { background: transparent; border: 1.5px solid var(--accent-text); box-sizing: border-box; }
.badge.muted { color: var(--off); }

/* ---------- Tables ---------- */
.tablewrap { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-card); box-shadow: var(--shadow); }
.tablewrap .tablehead { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.tablewrap .tablehead h2 { margin: 0; font-size: 0.95rem; }
.tablescroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.87rem; }
th {
  text-align: left; padding: 11px 18px; font-family: var(--font-mono);
  font-size: 0.64rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.11em;
  color: var(--muted); border-bottom: 1px solid var(--border); background: var(--thead-bg, transparent);
}
td { padding: 10px 18px; border-bottom: 1px solid var(--row-border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--row-hover); }
td.mono, .mono { font-family: var(--font-mono); font-size: 0.82rem; }
td .time { color: var(--muted); white-space: nowrap; }

/* ---------- Form inputs ---------- */
.input {
  font: inherit; width: 100%; color: var(--text);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px); padding: 9px 12px;
}
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input-name { max-width: 320px; font-weight: 600; }
textarea.input { resize: vertical; line-height: 1.5; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-weight: 600; font-size: 0.88rem;
  padding: 9px 18px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text);
  cursor: pointer; transition: filter 120ms ease, transform 120ms ease;
}
.btn:hover { filter: brightness(1.06); text-decoration: none; transform: translateY(-1px); }
.btn-primary {
  background: var(--accent-gradient, var(--accent));
  color: var(--accent-contrast); border-color: transparent;
  box-shadow: var(--btn-glow, none);
}
.btn-ghost { background: transparent; }
.btn-danger { background: var(--err); color: #fff; border-color: transparent; }
.btn-sm { padding: 5px 12px; font-size: 0.8rem; }

/* ---------- Empty / notice ---------- */
.empty {
  border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 40px 34px; text-align: center; color: var(--muted); background: transparent;
}
.empty::before {
  content: ""; display: block; width: 12px; height: 12px; margin: 0 auto 16px;
  border: 1.5px solid var(--accent-text); transform: rotate(45deg);
}
.empty h2 { font-family: var(--font-display); margin: 0 0 8px; }
.notice {
  border: 1px solid var(--accent-line); background: var(--accent-soft);
  color: var(--text); border-radius: var(--radius); padding: 14px 18px; font-size: 0.9rem;
}
.flash-ok   { border-color: var(--ok-line);   background: var(--ok-soft); }
.flash-warn { border-color: var(--warn-line); background: var(--warn-soft); }
.flash-err  { border-color: var(--err-line);  background: var(--err-soft); }

/* ---------- Marketing pages (landing / pricing) ---------- */
.market { min-height: 100vh; display: flex; flex-direction: column; }
.market-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px 34px; border-bottom: 1px solid var(--border);
  background: var(--topbar-bg); backdrop-filter: var(--topbar-blur, none);
}
.market-nav { display: flex; align-items: center; gap: 22px; }
.market-nav a { color: var(--muted); font-weight: 550; font-size: 0.9rem; }
.market-nav a:hover { color: var(--text); text-decoration: none; }
.market-header .right { display: flex; align-items: center; gap: 12px; }
.market-main { flex: 1; }
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px; }

.hero-market { padding: clamp(48px, 8vw, 104px) 0 64px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px;
  padding: 5px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 600;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.hero-market h1 { font-size: clamp(2.4rem, 5vw, 3.7rem); line-height: 1.06; margin: 0 0 18px; }
.hero-market h1 .grad {
  background: var(--accent-gradient, none); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}
.hero-market p.lead { color: var(--muted); font-size: 1.12rem; line-height: 1.6; max-width: 520px; margin: 0 0 28px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-note { margin-top: 18px; color: var(--muted); font-size: 0.84rem; }
.btn-lg { padding: 12px 24px; font-size: 0.98rem; }

/* Product-preview mock built from our own UI, no screenshot needed. */
.preview {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 6px); box-shadow: 0 30px 70px rgba(2, 6, 23, 0.22);
  overflow: hidden; transform: rotate(0.5deg);
}
.preview-bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--thead-bg, transparent); }
.preview-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.preview-bar span { margin-left: 8px; color: var(--muted); font-size: 0.78rem; font-family: var(--font-mono); }
.preview-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.preview-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.preview-stat { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: var(--bg); }
.preview-stat b { display: block; font-family: var(--font-display); font-size: 1.35rem; }
.preview-stat small { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }
.preview-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.82rem; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.preview-row .mono { color: var(--muted); }

/* Sections */
.section { padding: 64px 0; }
.section.alt { background: var(--thead-bg, transparent); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.section-head .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-text); font-family: var(--font-mono); font-weight: 500; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; }
.section-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin: 10px 0 12px; }
.section-head p { color: var(--muted); font-size: 1.02rem; margin: 0; }

/* Two columns by design: eight cards read as 2x4, and the wider card fits a
   full sentence per feature instead of a clipped one. */
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; grid-auto-rows: 1fr; }
.feature { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.feature .ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.feature h3 { margin: 0 0 5px; font-size: 0.98rem; text-transform: none; letter-spacing: 0; color: var(--text); display: flex; align-items: center; gap: 8px; }
.feature p { margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.5; }

/* Featured wide feature card: icon + text side by side, status panel right */
.feature-featured { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; margin-bottom: 16px; padding: 22px 26px; border-radius: 18px; border: 1px solid var(--accent-line); background: linear-gradient(150deg, var(--accent-soft), transparent 70%); text-decoration: none; color: var(--text); transition: border-color 0.15s ease; }
.feature-featured:hover { text-decoration: none; border-color: var(--accent); }
.ff-main { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.ff-ico { width: 44px; height: 44px; flex: none; border-radius: 13px; display: grid; place-items: center; color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.ff-ico .ic { width: 22px; height: 22px; }
.feature-featured h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; margin: 0 0 6px; }
.feature-featured p { color: var(--muted); font-size: 0.94rem; line-height: 1.55; margin: 0 0 10px; max-width: 50ch; }
.ff-status { min-width: 224px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 13px; }
.ffs { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.ffs .l { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.ffs .v { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.ffs .v.cyan { color: var(--accent-text); }
@media (max-width: 760px) { .feature-featured { grid-template-columns: 1fr; } .ff-status { min-width: 0; } }

.steps-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step-card { position: relative; padding: 26px 22px 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); box-shadow: var(--shadow); overflow: hidden; }
.step-card::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent-gradient, var(--accent)); }
.step-num { position: absolute; top: 14px; right: 20px; font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; color: var(--border); line-height: 1; }
.step-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.35rem; background: var(--accent-soft); border: 1px solid var(--accent-line); margin-bottom: 16px; }
.step-card h3 { margin: 0 0 6px; font-size: 1.05rem; text-transform: none; letter-spacing: 0; color: var(--text); }
.step-card p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }

/* Pricing */
.pricing-toggle { display: inline-flex; gap: 4px; padding: 5px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); margin: 0 auto 36px; }
.pricing-toggle button { font: inherit; font-weight: 600; font-size: 0.86rem; border: none; background: transparent; color: var(--muted); padding: 8px 16px; border-radius: 999px; cursor: pointer; }
.pricing-toggle button.active { background: var(--accent-gradient, var(--accent)); color: var(--accent-contrast); }
.pricing-toggle .save { font-size: 0.68rem; opacity: 0.85; }
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1000px; margin: 0 auto; align-items: start; }
.plan.soon { opacity: 0.92; }
.plan .tag.soon-tag { background: var(--surface); color: var(--accent-text); border: 1px solid var(--accent-line); }
.plan .soon-price { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--muted); }
.btn.disabled { opacity: 0.55; pointer-events: none; }
.plan { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); padding: 28px; box-shadow: var(--shadow); }
.plan.featured { border-color: var(--accent-line); box-shadow: var(--shadow); }
.plan .tag { position: absolute; top: -11px; right: 22px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; background: var(--accent-gradient, var(--accent)); color: var(--accent-contrast); }
.plan h3 { margin: 0 0 4px; font-size: 1.2rem; text-transform: none; letter-spacing: 0; color: var(--text); }
.plan .tagline { color: var(--muted); font-size: 0.9rem; margin: 0 0 18px; }
.plan .price { display: flex; align-items: baseline; gap: 6px; }
.plan .price .amount { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; }
.plan .price .per { color: var(--muted); font-size: 0.9rem; }
.plan .price-sub { color: var(--muted); font-size: 0.82rem; margin: 6px 0 20px; min-height: 1.1em; }
.plan ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.plan li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; }
.plan li::before { content: "✓"; color: var(--ok); font-weight: 800; flex: none; }
.plan li.off { color: var(--muted); }
.plan li.off::before { content: "–"; color: var(--muted); }
.plan .btn { width: 100%; justify-content: center; }

.market-footer { border-top: 1px solid var(--border); padding: 26px 0; margin-top: auto; color: var(--muted); font-size: 0.85rem; }
.market-footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.market-footer a { color: var(--muted); }

/* ---------- Home (centered hero + glass mock) ---------- */
.gem { width: 7px; height: 7px; flex: none; transform: rotate(45deg); background: var(--accent-gradient, var(--accent)); display: inline-block; }
.hero-c { position: relative; padding: clamp(52px, 8vw, 92px) 0 44px; text-align: center; overflow: hidden; }
.hero-c .wrap { max-width: 820px; position: relative; }
.hero-c .hero-eyebrow { margin-bottom: 0; }
.hero-c h1 { font-size: clamp(2.5rem, 5.4vw, 3.7rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; margin: 24px 0 0; }
.hero-c h1 .grad { background: var(--accent-gradient, none); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-c .lead { font-size: 1.12rem; color: var(--muted); max-width: 560px; margin: 22px auto 0; line-height: 1.62; }
.hero-c .cta { display: flex; gap: 14px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.trust { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; color: var(--muted); margin-top: 22px; display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; text-transform: uppercase; }

.glassmock { max-width: 860px; margin: 50px auto 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.glassmock .gm-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--border); gap: 12px; }
.gm-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; }
.gm-live { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ok); display: flex; align-items: center; gap: 8px; letter-spacing: 0.04em; white-space: nowrap; }
.gm-live::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--ok), var(--accent-2)); }
.gm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 18px 20px; }
.gm-stat { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.gm-stat .l { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.gm-stat .v { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; margin-top: 5px; }
.gm-rows { padding: 0 20px 18px; display: flex; flex-direction: column; gap: 8px; }
.gm-row { display: flex; align-items: center; gap: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; font-size: 0.85rem; }
.gm-row .t { flex: 1; }
.gm-row .ago { color: var(--muted); font-size: 0.78rem; font-family: var(--font-mono); }
.gm-gem { width: 8px; height: 8px; transform: rotate(45deg); flex: none; }
.gm-gem.ok { background: linear-gradient(135deg, var(--ok), var(--accent-2)); }
.gm-gem.warn { background: var(--warn); }

/* How it works: connected gradient nodes */
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 940px; margin: 0 auto; }
.how-step { text-align: center; padding: 0 22px; position: relative; }
.how-step::before { content: ""; position: absolute; top: 26px; left: calc(-50% + 26px); width: calc(100% - 52px); height: 2px; background: linear-gradient(90deg, transparent, var(--accent-line) 20%, var(--accent-line) 80%, transparent); z-index: 0; }
.how-step:first-child::before { display: none; }
.how-node { position: relative; z-index: 1; width: 52px; height: 52px; margin: 0 auto; border-radius: 16px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.how-step h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin: 18px 0 7px; }
.how-step p { color: var(--muted); font-size: 0.9rem; margin: 0; line-height: 1.55; }

/* Feature cards as links */
.feature { display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: start; text-decoration: none; color: var(--text); transition: transform 0.15s ease, border-color 0.15s ease; }
.feature:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--accent); }
.feature .ico { margin-bottom: 0; }
/* fc-body fills the (equal-height) card; 'Learn more' pins to the bottom so it
   lands in the exact same place on every card, whatever the text length. */
.fc-body { display: flex; flex-direction: column; min-width: 0; height: 100%; }
.feature h3 { color: var(--text); margin: 0 0 5px; }
.feature p { margin: 0; }
.feature-more { margin-top: auto; padding-top: 10px; color: var(--accent-text); font-size: 0.8rem; font-weight: 600; }
.prow { text-decoration: none; color: var(--text); transition: filter 0.15s ease, transform 0.15s ease; }
.prow:hover { text-decoration: none; transform: translateY(-1px); filter: brightness(1.04); }
.prow .amt { text-align: right; line-height: 1.15; }
.rows-head { font-family: var(--font-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 2px; padding: 0 4px; }
.prow.soon { pointer-events: none; opacity: 0.8; }
.prow .amt-soon { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text); }

/* ---------- Feature detail pages ---------- */
/* Real buttons, not a strip of text links: each section reads as its own
   target, with the icon carried in a tile the way the dashboard cards do. */
.feat-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 34px; }
.feat-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 13px;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text); font-size: 0.86rem; font-weight: 600;
  box-shadow: var(--shadow);
  transition: border-color 130ms ease, transform 130ms ease;
}
.feat-nav a .ic { width: 17px; height: 17px; flex: none; }
.feat-nav a .nico { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-text); }
.feat-nav a:hover { text-decoration: none; border-color: var(--accent-line); transform: translateY(-2px); }
.feat-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.feat-nav a.active { border-color: transparent; background: var(--accent-gradient, var(--accent)); color: var(--accent-contrast); }
.feat-nav a.active .nico { background: rgba(255, 255, 255, 0.18); border-color: transparent; color: inherit; }
/* The server page carries eight sections, so its tab bar is tighter than the
   feature nav it borrows: at that size they land in even rows instead of
   leaving one orphan on a line of its own. */
/* Nine sections wrapped to eight-and-one, which reads as a mistake. Three rows
   of three is a shape, not a leftover. */
#server-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 26px; }
@media (max-width: 900px) { #server-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { #server-tabs { grid-template-columns: 1fr; } }
#server-tabs a { padding: 10px 12px; gap: 9px; font-size: 0.8rem; }
#server-tabs a .nico { width: 27px; height: 27px; border-radius: 8px; }
#server-tabs a .nico .ic { width: 15px; height: 15px; }
[data-sec][hidden] { display: none; }

.feat-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.feat-head .fico { width: 54px; height: 54px; flex: none; border-radius: 15px; display: grid; place-items: center; color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.feat-head .fico .ic { width: 26px; height: 26px; }
.feat-head h1 { font-size: clamp(1.7rem, 3.4vw, 2.1rem); margin: 0; }
.feat-intro { font-size: 1.1rem; color: var(--muted); max-width: 72ch; line-height: 1.62; margin: 0 0 30px; }
.feat-grid { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; align-items: start; }
.feat-sec { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow); }
.feat-sec h3 { font-family: var(--font-display); font-weight: 650; font-size: 1.05rem; margin: 0 0 13px; }
.feat-sec ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.feat-sec li { display: flex; gap: 11px; font-size: 0.92rem; color: var(--text); line-height: 1.5; }
.feat-sec li::before { content: ""; width: 7px; height: 7px; flex: none; margin-top: 6px; transform: rotate(45deg); background: var(--accent-gradient, var(--accent)); }
.feat-cmd { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.feat-cmd .fc-head { padding: 10px 16px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--border); }
.feat-cmd .fc-cmd { padding: 14px 16px 8px; font-family: var(--font-mono); font-size: 0.9rem; color: var(--accent-text); word-break: break-word; }
.feat-cmd .fc-res { padding: 0 16px 16px; font-size: 0.87rem; color: var(--muted); display: flex; gap: 10px; align-items: flex-start; }
.feat-cmd .fc-res::before { content: ""; width: 7px; height: 7px; flex: none; margin-top: 6px; transform: rotate(45deg); background: linear-gradient(135deg, var(--ok), var(--accent-2)); }
.feat-cta { margin-top: 34px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
@media (max-width: 760px) { .feat-grid { grid-template-columns: 1fr; } }

/* ---------- Hosted transcript (example) ---------- */
.ts-wrap { max-width: 760px; margin: 0 auto; }
.ts-head { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 24px; box-shadow: var(--shadow); margin-bottom: 16px; }
.ts-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.ts-top h1 { font-size: 1.3rem; margin: 0; display: flex; align-items: center; gap: 12px; }
.ts-brand { width: 34px; height: 34px; border-radius: 9px; flex: none; }
.ts-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; }
.ts-meta .l { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-family: var(--font-mono); }
.ts-meta .v { font-weight: 600; margin-top: 4px; font-size: 0.95rem; }
.ts-chat { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 8px; box-shadow: var(--shadow); }
.ts-msg { display: flex; gap: 12px; padding: 12px 14px; border-radius: 12px; }
.ts-msg:hover { background: var(--row-hover); }
.ts-ava { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--accent-contrast); background: var(--accent-gradient, var(--accent)); }
.ts-ava.buyer { background: linear-gradient(135deg, #6d5bff, #a855f7); }
.ts-body .n { font-weight: 650; font-size: 0.9rem; }
.ts-body .t { color: var(--muted); font-size: 0.7rem; margin-left: 8px; font-family: var(--font-mono); }
.ts-body p { margin: 3px 0 0; font-size: 0.92rem; line-height: 1.5; }
.ts-note { text-align: center; color: var(--muted); font-size: 0.82rem; margin-top: 20px; }

.ptease { max-width: 1000px; margin: 0 auto; background: linear-gradient(160deg, var(--accent-soft), transparent); border: 1px solid var(--accent-line); border-radius: 20px; padding: 40px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 34px; align-items: center; }
.ptease h2 { font-size: 1.85rem; font-weight: 700; line-height: 1.2; margin: 0; }
.ptease p { color: var(--muted); margin: 12px 0 22px; font-size: 0.95rem; line-height: 1.6; }
.ptease .rows { display: flex; flex-direction: column; gap: 12px; }
.prow { display: flex; align-items: center; justify-content: space-between; background: var(--bg-card); border: 1px solid var(--border); border-radius: 13px; padding: 16px 20px; font-family: var(--font-display); font-weight: 600; }
.prow.pro { background: var(--accent-soft); border-color: var(--accent-line); }
.prow .amt { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; }
.prow .amt small { font-size: 0.72rem; color: var(--muted); font-weight: 400; }

@media (max-width: 820px) {
  .gm-stats { grid-template-columns: repeat(2, 1fr); }
  .how { grid-template-columns: 1fr; gap: 28px; }
  .how-step::before { display: none; }
  .ptease { grid-template-columns: 1fr; padding: 30px; }
}

@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .preview { transform: none; }
  .feature-grid, .steps-rail { grid-template-columns: 1fr; }
  .plan-grid { grid-template-columns: 1fr; max-width: 420px; }
  .market-nav { display: none; }
  .market-header { padding: 12px 18px; }
  .wrap { padding: 0 18px; }
}

/* ---------- Dashboard polish (owner / admin / my servers) ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.page-head .h { display: flex; flex-direction: column; gap: 3px; }
.page-head .h .eyebrow { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.page-head .h h1 { font-size: 1.5rem; margin: 0; letter-spacing: -0.02em; }

/* Rich metric cards */
.statgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.statcard {
  position: relative; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); overflow: hidden;
}
.statcard .st-ico {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  font-size: 1.15rem; margin-bottom: 16px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent);
}
.statcard .st-num { font-family: var(--font-display); font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.statcard .st-num small { font-family: var(--font); font-size: 0.82rem; font-weight: 500; color: var(--muted); }
.statcard .st-label { color: var(--muted); font-size: 0.82rem; margin-top: 7px; }
.statcard .st-sub { color: var(--muted); font-size: 0.78rem; margin-top: 10px; opacity: 0.85; }
/* A card that opens a page of its own. */
a.statcard.link { display: block; text-decoration: none; color: inherit; transition: border-color 120ms ease, transform 120ms ease; }
a.statcard.link:hover { border-color: var(--accent-line); transform: translateY(-2px); text-decoration: none; }
a.statcard.link:hover .st-ico { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text); }
a.statcard.link:hover .st-sub { color: var(--accent-text); opacity: 1; }
a.statcard.link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.statcard.ok   .st-ico { background: var(--ok-soft);   border-color: var(--ok-line);   color: var(--ok); }
.statcard.warn .st-ico { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.statcard.err  .st-ico { background: var(--err-soft);  border-color: var(--err-line);  color: var(--err); }

/* Server cards (my servers) */
.server-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.server-card {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow); text-decoration: none; color: var(--text);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.server-card:hover { transform: translateY(-2px); border-color: var(--accent-line); text-decoration: none; }
.server-card .sc-top { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
  background: var(--accent-gradient, var(--accent)); color: var(--accent-contrast);
}
.server-card .sc-name { font-weight: 700; font-size: 1.02rem; line-height: 1.2; }
.server-card .sc-rel { color: var(--muted); font-size: 0.78rem; }
.server-card .sc-facts { display: flex; flex-direction: column; gap: 8px; }
.server-card .sc-fact { display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; }
.server-card .sc-fact span:first-child { color: var(--muted); }
.server-card .sc-go { margin-top: 2px; color: var(--accent); font-weight: 600; font-size: 0.86rem; }

/* Unified customer dashboard panels (cyan/blue accented) */
.dash-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.dash-panel + .dash-panel { margin-top: 20px; }
.dp-head { display: flex; align-items: center; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--border); background: linear-gradient(120deg, var(--accent-soft), transparent 62%); }
.dp-avatar { width: 48px; height: 48px; border-radius: 14px; flex: none; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--accent-contrast); background: var(--accent-gradient, var(--accent)); box-shadow: var(--logo-glow, none); }
.dp-title { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1.15; }
.dp-rel { color: var(--muted); font-size: 0.74rem; font-family: var(--font-mono); margin-top: 3px; letter-spacing: 0.02em; }
.dp-head .dp-status { margin-left: auto; }
.dp-body { padding: 22px 24px; }
.dp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.dp-tile { border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; background: var(--bg); }
.dp-tile.accent { background: var(--accent-soft); border-color: var(--accent-line); }
.dp-tile .l { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); }
.dp-tile .l .ic { width: 13px; height: 13px; color: var(--accent-text); }
.dp-tile .v { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin-top: 10px; display: flex; align-items: center; gap: 8px; }
.dp-tile.accent .v { color: var(--accent-text); }
.dp-tile .sub { color: var(--muted); font-size: 0.78rem; margin-top: 7px; overflow-wrap: anywhere; }
.dp-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.dp-activity { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 16px; }
.dp-activity .ah { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); margin-bottom: 6px; }
.dp-ev { display: flex; gap: 14px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--row-border); }
.dp-ev:last-child { border-bottom: none; }
.dp-ev .k { font-family: var(--font-mono); font-size: 0.76rem; color: var(--accent-text); min-width: 160px; }
.dp-ev .s { color: var(--muted); flex: 1; font-family: var(--font-mono); font-size: 0.74rem; overflow-wrap: anywhere; }
.dp-ev .t { color: var(--muted); font-size: 0.72rem; white-space: nowrap; }
.dp-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.dp-tile.link { text-decoration: none; color: var(--text); transition: border-color 0.15s ease, transform 0.15s ease; }
.dp-tile.link:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-1px); }

/* Dashboard action cards */
.action-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 20px; }
.action-card { display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: center; padding: 15px 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); text-decoration: none; color: var(--text); transition: border-color 0.15s ease, transform 0.15s ease; }
.action-card:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-2px); }
.ac-ico { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center; color: var(--accent-text); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.ac-ico .ic { width: 20px; height: 20px; }
.ac-title { font-weight: 650; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; }
.ac-desc { color: var(--muted); font-size: 0.8rem; margin-top: 3px; }

/* Section heading with icon */
.sec-head { display: flex; align-items: center; gap: 9px; margin: 8px 0 -6px; }
summary.sec-toggle { cursor: pointer; list-style: none; margin-top: 20px; }
summary.sec-toggle::-webkit-details-marker { display: none; }
summary.sec-toggle::after { content: "▸"; margin-left: 10px; color: var(--muted); font-size: 0.8em; }
details[open] > summary.sec-toggle::after { content: "▾"; }
details.sec-collapse { margin-bottom: 4px; }
.sec-head .si { font-size: 0.95rem; }
.sec-head h2 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 650; margin: 0; }

/* Sidebar nav icon */
.navlink .ni { width: 18px; text-align: center; font-size: 0.95rem; opacity: 0.9; }

/* ---------- Bare pages (sign-in / no-access) ---------- */
.bare {
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); background-image: var(--page-glow, none);
  background-repeat: no-repeat;
}
.bare-top { display: flex; justify-content: space-between; align-items: center; padding: 22px 34px; }
.hero { flex: 1; display: grid; place-items: center; padding: 30px 20px 60px; text-align: center; }
.hero h1 {
  font-size: clamp(2.3rem, 5vw, 3.6rem); margin: 0 0 14px; line-height: 1.08;
}
.hero .grad { background: var(--accent-gradient, none); -webkit-background-clip: text; background-clip: text; }
.hero .grad:not(:empty) { color: var(--hero-grad-color, var(--accent)); }
.hero p.lead { color: var(--muted); font-size: 1.08rem; max-width: 560px; margin: 0 auto 30px; }
.hero .cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero .chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
.bare .foot { text-align: center; color: var(--muted); font-size: 0.8rem; padding: 20px; }

.auth-card {
  width: min(400px, 92vw); margin: 0 auto;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow);
  padding: 38px 34px; text-align: center;
}
.auth-card h1 { font-size: 1.5rem; margin: 14px 0 6px; color: var(--text); }
.auth-card p { color: var(--muted); margin: 0 0 24px; }
.auth-card .logo {
  width: 52px; height: 52px; border-radius: 15px; margin: 0 auto;
  background: var(--accent-gradient, var(--accent));
  display: grid; place-items: center; color: var(--accent-contrast);
  font-weight: 800; font-size: 1.5rem; box-shadow: var(--logo-glow, none);
}

/* ---------- Day/night toggle ---------- */
.topbar-right { display: flex; align-items: center; gap: 12px; }
.iconlink { color: var(--muted); font-size: 0.82rem; white-space: nowrap; }
.theme-toggle {
  width: 38px; height: 38px; flex: none; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text);
  cursor: pointer; display: grid; place-items: center; font-size: 1.02rem; line-height: 1;
  transition: filter 120ms ease, transform 120ms ease;
}
.theme-toggle:hover { filter: brightness(1.05); transform: translateY(-1px); }
.theme-toggle .ico-sun { display: none; }
.theme-toggle .ico-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .ico-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .ico-moon { display: none; }
.bare-top .theme-toggle { background: var(--bg-card); }

/* ---------- Notification bell ---------- */
.notif-wrap { position: relative; }
.notif-bell {
  width: 38px; height: 38px; border-radius: 999px; flex: none;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text);
  cursor: pointer; display: grid; place-items: center; position: relative;
  transition: filter 120ms ease;
}
.notif-bell:hover { filter: brightness(1.06); }
.notif-badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 999px; background: var(--err); color: #fff;
  font-size: 0.64rem; font-weight: 700; display: grid; place-items: center;
  font-family: var(--font-mono); box-sizing: border-box;
}
.notif-badge[hidden] { display: none; }  /* class display: grid would override the UA rule */
.notif-panel {
  position: absolute; top: 46px; right: 0; width: 320px; max-height: 60vh;
  overflow-y: auto; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow); z-index: 60;
}
.notif-head {
  padding: 12px 14px; font-weight: 650; font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.notif-item { display: block; padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--text); }
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--row-hover); text-decoration: none; }
.notif-text { font-size: 0.86rem; line-height: 1.4; }
.notif-time { font-size: 0.7rem; color: var(--muted); margin-top: 3px; font-family: var(--font-mono); }
.notif-empty { padding: 22px 14px; text-align: center; color: var(--muted); font-size: 0.84rem; }

/* ---------- Help chat ---------- */
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.chat-box {
  display: flex; flex-direction: column; height: 62vh; min-height: 380px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
}
.chat-msgs { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.chat-msg {
  max-width: 78%; padding: 9px 13px; border-radius: 12px; align-self: flex-start;
  background: var(--bg-elevated); border: 1px solid var(--border);
}
.chat-msg.mine { align-self: flex-end; background: var(--accent); color: var(--accent-contrast); border-color: transparent; }
.chat-msg.system { align-self: center; max-width: 100%; background: transparent; border: 0; color: var(--muted); font-size: 0.8rem; padding: 2px; }
.chat-msg .cm-name { font-size: 0.72rem; font-weight: 650; opacity: 0.85; margin-bottom: 2px; }
.chat-msg.mine .cm-name, .chat-msg.system .cm-name { display: none; }
.chat-msg .cm-text { font-size: 0.9rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg .cm-time { font-size: 0.66rem; opacity: 0.7; margin-top: 3px; font-family: var(--font-mono); text-align: right; }
.chat-empty { margin: auto; color: var(--muted); font-size: 0.9rem; }
.chat-compose { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); }
.chat-compose .input { flex: 1; }
.chat-locked { padding: 14px; border-top: 1px solid var(--border); text-align: center; color: var(--muted); font-size: 0.86rem; }

/* ---------- Backup detail: roles, emojis, downloads ---------- */
.role-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--border); }
.role-row:last-child { border-bottom: 0; }
.role-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.role-name { font-weight: 650; font-size: 0.9rem; }
.role-perms { color: var(--muted); font-size: 0.76rem; margin-left: auto; text-align: right; }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px; }
.emoji-cell { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--accent-soft); }
.emoji-cell img { width: 40px; height: 40px; object-fit: contain; }
.emoji-cell figcaption { font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted); text-align: center; overflow-wrap: anywhere; }
.dl-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.dl-row .sub { margin: 0 auto 0 0; color: var(--muted); }

/* ---------- Discord message markup (simulation) ---------- */
.dsim-text .md-line, .dsim-edesc .md-line { margin: 0; }
.md-gap { height: 0.5em; }
.md-h1, .md-h2, .md-h3 { font-weight: 700; color: #f2f3f5; margin: 4px 0 2px; line-height: 1.3; }
.md-h1 { font-size: 1.25rem; }
.md-h2 { font-size: 1.1rem; }
.md-h3 { font-size: 1rem; }
.md-small { font-size: 0.78rem; color: #949ba4; }
.md-list { margin: 2px 0; padding-left: 22px; }
.md-list li { margin: 1px 0; }
.md-quote { margin: 3px 0; padding-left: 10px; border-left: 4px solid #4e5058; color: #dbdee1; }
.md-code { background: #1e1f22; border-radius: 4px; padding: 1px 4px; font-family: var(--font-mono); font-size: 0.85em; }
.md-pre { background: #1e1f22; border: 1px solid #2b2d31; border-radius: 5px; padding: 9px 11px; margin: 4px 0; font-family: var(--font-mono); font-size: 0.8rem; overflow-x: auto; white-space: pre; }
.md-emoji { width: 1.35em; height: 1.35em; object-fit: contain; vertical-align: -0.25em; margin: 0 1px; }
.md-h1 .md-emoji, .md-h2 .md-emoji { width: 1.2em; height: 1.2em; }
.md-mention { color: #c9cdfb; background: rgba(88, 101, 242, 0.18); border-radius: 4px; padding: 0 2px; font-weight: 500; }
.md-mention:hover { background: rgba(88, 101, 242, 0.32); }
.md-stamp { background: #3f4147; border-radius: 4px; padding: 0 4px; }
.md-link { color: #00a8fc; text-decoration: none; }
.md-imglink { display: block; margin: 6px 0; max-width: min(400px, 100%); }
.md-image { max-width: 100%; max-height: 300px; border-radius: 8px; display: block; }
.md-link:hover { text-decoration: underline; }
.md-spoiler { background: #1e1f22; color: transparent; border-radius: 4px; cursor: pointer; }
.md-spoiler.shown { background: #2b2d31; color: inherit; }
.md-spoiler * { visibility: hidden; }
.md-spoiler.shown * { visibility: visible; }

/* ---------- Backup simulation (Discord replica) ----------
   Deliberately single-theme: this panel imitates the Discord dark client, so
   it keeps Discord's palette in both site skins instead of following ours. */
.dsim {
  display: grid; grid-template-columns: 232px minmax(0, 1fr) 208px;
  height: min(72vh, 680px); margin-top: 18px;
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  background: #313338; color: #dbdee1;
  font-family: "gg sans", var(--font-body, system-ui), sans-serif;
}
.dsim-side { background: #2b2d31; display: flex; flex-direction: column; min-height: 0; }
.dsim-guild { display: flex; align-items: center; gap: 9px; padding: 13px 14px; border-bottom: 1px solid #1f2023; flex: none; }
.dsim-gicon { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: #5865f2; color: #fff; display: grid; place-items: center; font-size: 0.72rem; font-weight: 700; flex: none; }
.dsim-gicon img { width: 100%; height: 100%; object-fit: cover; }
.dsim-gname { font-weight: 650; font-size: 0.92rem; color: #f2f3f5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsim-chans { overflow-y: auto; padding: 10px 8px 16px; flex: 1; min-height: 0; }
.dsim-cat { color: #949ba4; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 14px 8px 4px; }
.dsim-chan {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 6px 8px; border: 0; border-radius: 5px; background: transparent;
  color: #949ba4; font: inherit; font-size: 0.88rem; cursor: pointer; text-align: left;
}
.dsim-chan:hover { background: #35373c; color: #dbdee1; }
.dsim-chan.active { background: #404249; color: #fff; }
.dsim-cicon { color: #80848e; font-size: 1rem; flex: none; }
.dsim-cname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsim-cbadge { margin-left: auto; background: #4e5058; color: #dbdee1; border-radius: 8px; padding: 0 6px; font-size: 0.68rem; font-family: var(--font-mono); flex: none; }
.dsim-skipped { color: #80848e; font-size: 0.72rem; font-style: italic; padding: 4px 8px; }

.dsim-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.dsim-head { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid #26282c; flex: none; }
.dsim-hash { color: #80848e; font-size: 1.2rem; }
.dsim-head b { color: #f2f3f5; font-size: 0.95rem; }
.dsim-topic { color: #949ba4; font-size: 0.8rem; border-left: 1px solid #3f4147; padding-left: 10px; margin-left: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsim-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; min-height: 0; }

.dsim-msg { display: flex; gap: 12px; }
.dsim-avatar { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: #5865f2; color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.dsim-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dsim-body { min-width: 0; flex: 1; }
.dsim-mhead { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dsim-author { font-weight: 650; font-size: 0.92rem; color: #f2f3f5; }
.dsim-time { color: #949ba4; font-size: 0.7rem; }
.dsim-text { font-size: 0.9rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
.dsim-empty { color: #80848e; font-style: italic; font-size: 0.85rem; }
.dsim-att { margin-top: 8px; }
.dsim-attimg { max-width: min(400px, 100%); max-height: 300px; border-radius: 8px; display: block; }
.dsim-file { display: inline-block; margin-top: 8px; padding: 8px 12px; background: #2b2d31; border: 1px solid #1f2023; border-radius: 8px; color: #00a8fc; font-size: 0.84rem; text-decoration: none; }

.dsim-embed { margin-top: 8px; background: #2b2d31; border-left: 4px solid #4f545c; border-radius: 4px; padding: 12px 16px; max-width: 480px; }
.dsim-eauthor { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 600; color: #f2f3f5; margin-bottom: 6px; }
.dsim-eauthor img { width: 22px; height: 22px; border-radius: 50%; }
.dsim-etitle { color: #00a8fc; font-weight: 650; font-size: 0.9rem; margin-bottom: 6px; }
.dsim-edesc { font-size: 0.85rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.dsim-efields { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 9px; }
.dsim-efield { flex: 1 1 100%; }
.dsim-efield.inline { flex: 1 1 30%; min-width: 120px; }
.dsim-efname { font-size: 0.8rem; font-weight: 650; color: #f2f3f5; }
.dsim-efvalue { font-size: 0.82rem; color: #dbdee1; white-space: pre-wrap; overflow-wrap: anywhere; }
.dsim-eimage { max-width: 100%; border-radius: 6px; margin-top: 10px; display: block; }
.dsim-ethumb { max-width: 78px; border-radius: 6px; margin-top: 8px; display: block; }
.dsim-efooter { color: #949ba4; font-size: 0.72rem; margin-top: 8px; }
.dsim-none { margin: auto; text-align: center; color: #949ba4; max-width: 340px; }
.dsim-none h3 { color: #f2f3f5; margin: 0 0 6px; }
.dsim-none p { font-size: 0.85rem; line-height: 1.5; }

.dsim-members { background: #2b2d31; overflow-y: auto; padding: 14px 10px; min-height: 0; }
.dsim-members h4 { color: #949ba4; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 10px 6px; }
.dsim-member { display: flex; align-items: center; gap: 9px; padding: 5px 6px; border-radius: 5px; }
.dsim-member:hover { background: #35373c; }
.dsim-mavatar { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; background: #5865f2; color: #fff; display: grid; place-items: center; font-size: 0.66rem; font-weight: 700; flex: none; }
.dsim-mavatar img { width: 100%; height: 100%; object-fit: cover; }
.dsim-mname { font-size: 0.85rem; color: #949ba4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dsim-gear { margin-left: auto; background: none; border: 0; color: #949ba4; font-size: 1.05rem; cursor: pointer; padding: 2px 4px; border-radius: 5px; }
.dsim-gear:hover { color: #f2f3f5; background: #35373c; }
.dsim-bot { background: #5865f2; color: #fff; font-size: 0.6rem; font-weight: 700; padding: 1px 5px; border-radius: 4px; letter-spacing: 0.03em; align-self: center; }
.dsim-text.system { color: #949ba4; font-style: italic; }
.dsim-author { cursor: pointer; }
.dsim-author:hover { text-decoration: underline; }
.dsim-member { cursor: pointer; }
.dsim-attimg { cursor: zoom-in; }

/* Overlays inside the simulation: profile card, lightbox, settings. */
.dsim-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, 0.72); display: grid; place-items: center; padding: 24px; }
.dsim-panel { position: relative; background: #313338; color: #dbdee1; border-radius: 12px; max-width: min(560px, 92vw); max-height: 86vh; overflow: auto; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }
.dsim-close { position: absolute; top: 8px; right: 10px; z-index: 2; background: rgba(0, 0, 0, 0.35); border: 0; color: #dbdee1; font-size: 1.3rem; line-height: 1; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; }
.dsim-close:hover { background: rgba(0, 0, 0, 0.6); color: #fff; }
.dsim-panel.profile { width: 340px; }
.dsim-pbanner { height: 64px; background: #5865f2; }
.dsim-pavatar { width: 78px; height: 78px; border-radius: 50%; overflow: hidden; margin: -40px 0 0 18px; border: 6px solid #313338; background: #5865f2; color: #fff; display: grid; place-items: center; font-size: 1.5rem; font-weight: 700; }
.dsim-pavatar img { width: 100%; height: 100%; object-fit: cover; }
.dsim-pbody { padding: 10px 18px 20px; }
.dsim-pbody h3 { margin: 0 0 2px; font-size: 1.15rem; color: #f2f3f5; }
.dsim-psub { color: #949ba4; font-size: 0.82rem; line-height: 1.5; }
.dsim-plabel { color: #949ba4; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin: 14px 0 6px; }
.dsim-pid { font-family: var(--font-mono); font-size: 0.8rem; color: #dbdee1; }
.dsim-rolelist { display: flex; flex-wrap: wrap; gap: 6px; }
.dsim-rolelist.column { flex-direction: column; align-items: flex-start; }
.dsim-rolechip { display: inline-flex; align-items: center; gap: 6px; background: #2b2d31; border: 1px solid #1f2023; border-radius: 6px; padding: 3px 8px; font-size: 0.78rem; }
.dsim-roledot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dsim-roleicon { width: 16px; height: 16px; object-fit: contain; }
.dsim-panel.lightbox { background: transparent; box-shadow: none; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 92vw; }
.dsim-panel.lightbox img { max-width: 88vw; max-height: 74vh; border-radius: 10px; display: block; }
.dsim-panel.settings { width: 520px; padding: 20px; }
.dsim-panel.settings h3 { margin: 0 0 4px; color: #f2f3f5; }
.dsim-tabs { display: flex; gap: 6px; margin: 16px 0 12px; border-bottom: 1px solid #3f4147; }
.dsim-tab { background: none; border: 0; border-bottom: 2px solid transparent; color: #949ba4; font: inherit; font-size: 0.85rem; padding: 8px 10px; cursor: pointer; }
.dsim-tab:hover { color: #dbdee1; }
.dsim-tab.active { color: #fff; border-bottom-color: #5865f2; }
.dsim-pane { max-height: 46vh; overflow-y: auto; }
.dsim-emojis { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; }
.dsim-emoji { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.dsim-emoji img { width: 36px; height: 36px; object-fit: contain; }
.dsim-emoji figcaption { font-size: 0.64rem; color: #949ba4; text-align: center; overflow-wrap: anywhere; }

/* Role icon next to a role name on the backup roles page. */
.role-icon { width: 16px; height: 16px; object-fit: contain; vertical-align: middle; }
.role-icon-emoji { font-size: 0.95rem; line-height: 1; }

@media (max-width: 900px) {
  .dsim { grid-template-columns: 180px minmax(0, 1fr); height: 70vh; }
  .dsim-members { display: none; }
}

/* ---------- Part pickers (semi backup / partial restore) ---------- */
.pick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.pick { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; cursor: pointer; }
.pick:hover { border-color: var(--accent-line); }
.pick-limits { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.pick-limits label { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; color: var(--muted); }
.pick-limits .input { max-width: 180px; }

/* ---------- Sythe login status ---------- */
.sy-status { margin-top: 14px; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.sy-head { display: flex; align-items: center; gap: 9px; }
.sy-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--off); flex: none; }
.sy-status.running { border-color: var(--accent-line); background: var(--accent-soft); }
.sy-status.running .sy-dot { background: var(--accent); animation: sy-pulse 1.1s ease-in-out infinite; }
.sy-status.ok { border-color: var(--ok-line); background: var(--ok-soft); }
.sy-status.ok .sy-dot { background: var(--ok); }
.sy-status.failed { border-color: var(--warn-line); background: var(--warn-soft); }
.sy-status.failed .sy-dot { background: var(--warn); }
.sy-status.needcode { border-color: var(--accent-line); background: var(--accent-soft); }
.sy-status.needcode .sy-dot { background: var(--accent-2); }
.sy-code { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.sy-code .input { max-width: 150px; font-family: var(--font-mono); letter-spacing: 0.12em; }
@keyframes sy-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .sy-status.running .sy-dot { animation: none; } }

/* A badge that changed while you were looking at it. */
.badge.just-changed { animation: badge-pop 1.6s ease-out; }
@keyframes badge-pop {
  0% { box-shadow: 0 0 0 0 var(--accent-line); }
  30% { box-shadow: 0 0 0 5px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .badge.just-changed { animation: none; } }

/* ---------- Bump config ---------- */
/* The control bar: the buttons lead, the state reads underneath them, and one
   answer line at the bottom that the page writes into. */
.bump-bar .bb-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bump-bar .bb-actions .btn { padding: 11px 18px; font-size: 0.92rem; }
.bump-bar .bb-actions .btn .ic { width: 17px; height: 17px; }
.bump-bar .bb-state { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.bump-bar .bb-note {
  margin-top: 14px; padding: 11px 14px; border-radius: 12px;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  font-size: 0.88rem; background: var(--surface); border: 1px solid var(--border);
}
/* `display: flex` above beats the UA's [hidden] rule, so the booked-bump row
   showed even with nothing scheduled - and its "Cancel it" button then reported
   cancelling something that was never booked. Two other rules in this file exist
   for exactly this trap. */
.bump-bar .bb-note[hidden] { display: none; }
.bump-bar .bb-note.ok { border-color: var(--ok); }
.bump-bar .bb-note.warn { border-color: var(--warn); }
.bump-bar .bb-note.info { border-color: var(--accent-line); }
form.inline { display: inline; }

.bump-table td { vertical-align: top; }
.bump-table .time.ready { color: var(--ok); font-weight: 600; }
.bump-table tr.editing { background: var(--accent-soft); }
/* A table cell that opens the editor: reads as text, behaves as a button. */
.linklike {
  background: none; border: 0; padding: 0; margin: 0; text-align: left;
  font: inherit; color: var(--text); cursor: pointer; border-bottom: 1px dashed var(--border);
}
.linklike:hover { color: var(--accent-text); border-bottom-color: var(--accent-line); }
.linklike:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.danger-card { border-color: var(--warn); }

/* The rich-message editor. Its own surface and its own button styling: the
   first version reused .btn, whose background is the same --bg-card as the
   dialog, so the whole toolbar read as blank space. */
/* --surface, never --bg-card: the card colour is a translucent overlay that
   only looks solid because it sits on the page background. In a dialog (top
   layer, over the backdrop) it let the page show straight through. */
.rich-dialog {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  padding: 22px 24px; max-width: 700px; width: calc(100% - 32px);
  box-shadow: var(--shadow); position: relative;
}
.rich-dialog::backdrop { background: rgba(2, 6, 20, 0.66); }
.rich-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rich-head h3 { margin: 0 0 4px; font-family: var(--font-display); font-size: 1.15rem; }
.rich-close {
  background: none; border: 0; color: var(--muted);
  font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 2px;
}
.rich-close:hover { color: var(--text); }

.rich-tools {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 11px 11px 0 0; border-bottom: 0; padding: 7px 9px;
}
.rich-tool {
  font: inherit; font-size: 0.84rem; line-height: 1;
  min-width: 32px; height: 30px; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
}
.rich-tool:hover { border-color: var(--accent-line); color: var(--accent-text); }
.rich-tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rich-tool small { font-size: 0.62rem; }
.rich-sep { width: 1px; height: 20px; background: var(--border); margin: 0 3px; }
.rich-a { font-weight: 700; }
.rich-bar { width: 12px; height: 3px; border-radius: 2px; background: var(--accent); margin-left: 3px; }

/* Sythe's palette: 13 per row, 5 rows. */
.rich-drop { position: relative; display: inline-flex; }
.rich-palette, .rich-sizes {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 5;
  padding: 8px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 14px 34px rgba(2, 6, 20, 0.34);
}
.rich-palette { display: grid; grid-template-columns: repeat(13, 17px); gap: 3px; }
.rich-sizes { display: flex; gap: 4px; align-items: baseline; }
.rich-palette[hidden], .rich-sizes[hidden] { display: none; }
/* Sythe's editor sizes text 1 to 7; the buttons are set at the size they give. */
.rich-size {
  font: inherit; min-width: 26px; padding: 4px 6px; cursor: pointer;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 7px;
}
.rich-size:hover { border-color: var(--accent-line); color: var(--accent-text); }
.rich-size:nth-child(1) { font-size: 0.6rem; }
.rich-size:nth-child(2) { font-size: 0.7rem; }
.rich-size:nth-child(3) { font-size: 0.8rem; }
.rich-size:nth-child(4) { font-size: 0.92rem; }
.rich-size:nth-child(5) { font-size: 1.06rem; }
.rich-size:nth-child(6) { font-size: 1.24rem; }
.rich-size:nth-child(7) { font-size: 1.45rem; }
.rich-swatch {
  width: 17px; height: 17px; padding: 0; cursor: pointer;
  border: 1px solid rgba(128, 128, 128, 0.45); border-radius: 3px;
}
.rich-swatch:hover { outline: 2px solid var(--accent); outline-offset: 1px; }

.rich-area {
  min-height: 150px; max-height: 300px; overflow-y: auto;
  padding: 13px 14px; line-height: 1.55; cursor: text;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 0 0 11px 11px;
}
.rich-area:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.rich-area a { color: var(--accent-text); }
.rich-area ul, .rich-area ol { margin: 6px 0; padding-left: 22px; }
.rich-out { font-size: 0.8rem; }
.rich-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }

.helper-invites { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Customer backups ---------- */
.bk-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bk-state { display: flex; align-items: center; gap: 16px; }
.bk-num {
  width: 54px; height: 54px; flex: none; border-radius: 15px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 650;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-text);
}
/* How full the 500 MB is, at a glance. */
.bk-bar { height: 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.bk-bar span { display: block; height: 100%; background: var(--accent-gradient, var(--accent)); }

/* ---------- The bot card: state, then the two things you can do ---------- */
.bot-card { max-width: 620px; }
.bot-state { display: flex; gap: 12px; align-items: flex-start; }
.bot-title { font-weight: 650; }
.bot-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.bot-token { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.bot-token[hidden] { display: none; }

/* ---------- Dashboard panel head ---------- */
.dp-refresh {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 3px 0 0;                     /* directly under the name it belongs to */
  padding: 0; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 0.76rem; color: var(--muted);
}
.dp-refresh:hover { color: var(--accent-text); }
.dp-refresh .ic { width: 13px; height: 13px; }

/* The feed, as words: a title, then labelled facts. */
.dp-activity .ah { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dp-ev .s .f, .fr-facts .f { display: inline-flex; align-items: baseline; gap: 5px; margin-right: 12px; }
.dp-ev .s .f em, .fr-facts .f em {
  font-style: normal; font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--muted); font-family: var(--font-mono);
}
.dp-ev .s a, .fr-facts a { color: var(--accent-text); margin-right: 12px; }

.feed { display: flex; flex-direction: column; gap: 2px; }
.feed-row {
  display: grid; grid-template-columns: 190px 1fr; gap: 16px; align-items: baseline;
  padding: 12px 14px; border-radius: 11px; border: 1px solid transparent;
}
.feed-row:nth-child(odd) { background: var(--bg-card); }
.feed-row:hover { border-color: var(--border); }
.fr-when { font-size: 0.8rem; color: var(--muted); font-family: var(--font-mono); }
.fr-title { font-weight: 650; font-size: 0.95rem; }
.fr-facts { margin-top: 4px; font-size: 0.86rem; }
@media (max-width: 700px) { .feed-row { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- Watchers ---------- */
.checkline { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; white-space: nowrap; }
.watch-list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); margin-top: 16px; }
.watch-card { margin: 0; }
.watch-card.paused { opacity: 0.72; }
.wc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.wc-name { display: flex; align-items: center; gap: 9px; font-weight: 650; font-size: 0.98rem; word-break: break-word; }
.wc-actions { display: flex; gap: 6px; flex: none; }
/* A signal gem, not a pill: the same language the rest of the site speaks. */
.wc-dot { width: 9px; height: 9px; flex: none; transform: rotate(45deg); border-radius: 2px; background: var(--muted); }
.wc-dot.on { background: var(--accent-gradient, var(--ok)); }
.wc-kv dt { font-size: 0.72rem; }
.wc-kv dd { font-size: 0.86rem; }

/* ---------- GP price updater ---------- */
/* Two by two: OSRS above RS3, buy beside sell - the way a seller thinks about
   them. Four in a row wrapped to 3 + 1, which read as an afterthought. */
.gp-row { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .gp-row { grid-template-columns: 1fr; } }
.gp-field { display: flex; flex-direction: column; gap: 6px; }
.gp-field.off { opacity: 0.6; }
.gp-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); font-family: var(--font-mono); }
.gp-note { font-size: 0.76rem; color: var(--muted); min-height: 18px; }
.gp-slots { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.gp-slot { margin: 0; }
.gp-slot.ready { border-color: var(--ok); }
.gp-slot.lost { border-color: var(--warn); }
.gp-slot-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.gp-slot-head h3 { margin: 0; flex: 1 1 auto; font-size: 1rem; }
/* The one-off marker, shown the way it must be typed. */
/* The marker itself is the point of this box, so it gets the room: the line to
   copy on top, at a size you can read across a desk, and the button under it. */
.gp-probe {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 14px 16px; border-radius: 11px;
  background: var(--surface); border: 1px dashed var(--accent-line);
}
.gp-probe code {
  display: block; width: 100%;
  font-size: 1.15rem; letter-spacing: 0.02em; color: var(--accent-text);
  word-break: break-all; user-select: all;
}
.gp-probe code:empty::before { content: "..."; opacity: 0.5; }

/* The setup dialog: three steps, numbered because they really are a sequence
   and the middle one happens on another site. */
.gp-dialog .gp-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; counter-reset: gp; }
.gp-step { position: relative; padding-left: 42px; counter-increment: gp; }
.gp-step::before {
  content: counter(gp);
  position: absolute; left: 0; top: -1px;
  width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 0.82rem; font-weight: 600;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-text);
}
.gp-step strong { font-size: 0.95rem; }
.gp-result {
  margin-top: 16px; padding: 12px 14px; border-radius: 11px; font-size: 0.9rem;
  background: var(--surface); border: 1px solid var(--border);
}
.gp-result.ok { border-color: var(--ok); }
.gp-result.warn { border-color: var(--warn); }
.gp-result[hidden] { display: none; }

/* ---------- Vouch scenarios ---------- */
.vouch-grid { display: flex; flex-direction: column; gap: 16px; }
.vouch-body { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; }
.vouch-body textarea { flex: 1 1 auto; }
.vouch-body [data-vouch="drop"] { flex: none; padding: 6px 11px; font-size: 1rem; line-height: 1; }
.vouch-preview { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
.vouch-preview li { font-size: 0.88rem; color: var(--muted); line-height: 1.5; }

/* A bump message drawn the way Sythe will draw it. */
.bb-preview {
  margin: 2px 0 0; padding: 10px 12px; border-radius: 10px;
  background: var(--surface); border: 1px dashed var(--border);
  font-size: 0.9rem; line-height: 1.5; word-break: break-word;
}
.bb-preview[hidden] { display: none; }
.bb-preview a, .bump-table a.md-link { color: var(--accent-text); }
.bb-preview ul, .bb-preview ol { margin: 6px 0; padding-left: 22px; }
/* "default message" is our own placeholder, not the customer's text. */
.bb-plain { color: var(--muted); font-style: italic; }

/* Toasts: fixed bottom right, so an answer is always in the same place. */
.toast-host {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  display: flex; flex-direction: column-reverse; gap: 10px;
  max-width: min(380px, calc(100vw - 36px)); pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 13px;
  /* Opaque: a toast floats over whatever is behind it. */
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 12px 34px rgba(2, 6, 20, 0.28);
  font-size: 0.88rem;
  opacity: 0; transform: translateY(10px);
  transition: opacity 180ms ease, transform 180ms ease;
}
.toast.in { opacity: 1; transform: none; }
.toast.ok { border-color: var(--ok); }
.toast.warn { border-color: var(--warn); }
.toast.info { border-color: var(--accent-line); }
.toast-text { margin: 0; flex: 1 1 190px; }
.toast-close {
  background: none; border: 0; color: var(--muted);
  font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 0 2px;
}
.toast-close:hover { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* ---------- Public ticket snapshot ---------- */
.snap-page { max-width: 860px; margin: 0 auto; padding: 28px 20px 60px; }
.snap-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.snap-meta { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; font-size: 0.84rem; color: var(--muted); }
.snap-meta strong { color: var(--text); font-family: var(--font-mono); }
.snap-note { color: var(--muted); font-size: 0.84rem; line-height: 1.6; margin: 16px 0 20px; }
.snap-msgs { background: #313338; color: #dbdee1; border-radius: 12px; padding: 18px; max-height: none; overflow: visible; }
.snap-foot { margin-top: 20px; color: var(--muted); font-size: 0.8rem; text-align: center; }

/* A secret the browser must not treat as a login: masked with CSS rather than
   type=password, so no password manager ever offers to remember a bot token. */
.input.secret { -webkit-text-security: disc; text-security: disc; font-family: var(--font-mono); letter-spacing: 0.08em; }

/* ---------- DM template page ---------- */
.dm-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 16px; align-items: start; }
.dm-label { display: flex; flex-direction: column; gap: 5px; font-size: 0.82rem; color: var(--muted); }
.dm-body { font-family: var(--font-mono); font-size: 0.84rem; line-height: 1.6; resize: vertical; }
.dm-vars { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: baseline; }
.dm-vars dt { font-size: 0.78rem; color: var(--accent-text); white-space: nowrap; }
.dm-vars dd { margin: 0; font-size: 0.8rem; color: var(--muted); }
.dm-preview { background: var(--bg-elevated); }
.dm-subject { font-size: 0.9rem; font-weight: 650; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.dm-subject span { color: var(--muted); font-weight: 500; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; margin-right: 8px; }
.dm-message { margin: 0; font-family: var(--font-body, inherit); font-size: 0.88rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 900px) { .dm-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Helper bot slots ---------- */
.bot-slot { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-top: 12px; }
.bot-head { display: flex; align-items: center; gap: 8px; }
.bot-steps { margin: 8px 0 12px; padding-left: 20px; color: var(--muted); font-size: 0.82rem; line-height: 1.7; }
.bot-steps strong { color: var(--text); }
.est { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.est-item { border: 1px solid var(--border); border-radius: 9px; padding: 7px 11px; font-size: 0.8rem; color: var(--muted); }
.est-item b { display: block; font-family: var(--font-mono); font-size: 0.95rem; color: var(--text); }
.est-item.now { border-color: var(--accent-line); background: var(--accent-soft); }
.est-item.now b { color: var(--accent-text); }
/* A bot count past the point where another token changes anything: shown, but
   visibly not a choice worth making. */
.est-item.spent { opacity: 0.5; border-style: dashed; }
/* The dismiss cross on the "more than one server?" prompt. */
.gq-close { position: absolute; top: 10px; right: 12px; margin: 0; }
.gq-close button {
  background: none; border: 0; padding: 2px 6px; cursor: pointer; line-height: 1;
  font-size: 1.15rem; color: var(--muted);
}
.gq-close button:hover { color: var(--accent-text); }
.sub.ready { color: var(--ok); }
.sub.warn-text { color: var(--warn); }

/* ---------- Confirm dialog ---------- */
dialog.confirm {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-elevated); color: var(--text);
  max-width: min(520px, 92vw); padding: 22px 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
dialog.confirm::backdrop { background: rgba(4, 8, 18, 0.68); }
dialog.confirm h3 { margin: 0 0 6px; font-size: 1.1rem; }
dialog.confirm .sub { color: var(--muted); font-size: 0.86rem; margin: 0 0 14px; }
dialog.confirm .sub b { color: var(--text); font-family: var(--font-mono); }
.rc-list { margin: 0 0 18px; padding-left: 18px; font-size: 0.84rem; line-height: 1.65; color: var(--muted); }
.rc-list li { margin-bottom: 7px; }
.rc-list b { color: var(--text); }
.rc-list em { color: var(--text); font-style: italic; }
.rc-foot { display: flex; gap: 8px; justify-content: flex-end; }

/* ---------- Quick actions row ---------- */
.quick-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 22px; }

/* ---------- Backup progress bar ---------- */
.bk-bar { height: 10px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--border); overflow: hidden; }
.bk-fill { height: 100%; width: 0; border-radius: 999px; background: var(--accent-gradient); transition: width 0.4s ease; }
.bk-fill.indet { width: 32% !important; animation: bk-indet 1.1s ease-in-out infinite; }
@keyframes bk-indet { 0% { margin-left: -32%; } 100% { margin-left: 100%; } }
.bk-counts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bk-chip { font-size: 0.78rem; color: var(--muted); background: var(--surface-2, var(--accent-soft)); border: 1px solid var(--border); border-radius: 8px; padding: 4px 9px; font-family: var(--font-mono); }
.bk-chip b { color: var(--text); font-weight: 650; }

/* ---------- Line icons ---------- */
.ic { width: 18px; height: 18px; display: block; flex: none; }
.navlink .ni { display: grid; place-items: center; width: 18px; opacity: 0.95; }
.navlink .ni .ic { width: 17px; height: 17px; }
.sec-head .si { display: inline-grid; place-items: center; color: var(--accent-text); }
.sec-head .si .ic { width: 16px; height: 16px; }
.statcard .st-ico .ic { width: 20px; height: 20px; }
.feature .ico .ic { width: 19px; height: 19px; }
.step-ico .ic { width: 22px; height: 22px; }
.theme-toggle .ic { width: 17px; height: 17px; }
.btn .ic { width: 16px; height: 16px; }

/* ---------- First-run guided tour ---------- */
.tour-ring {
  position: fixed; z-index: 100; border: 2px solid var(--accent);
  border-radius: 12px; box-shadow: 0 0 0 9999px rgba(8, 10, 16, 0.58);
  pointer-events: none; transition: top .2s ease, left .2s ease, width .2s ease, height .2s ease;
}
.tour-pop {
  position: fixed; z-index: 101; width: min(320px, 92vw);
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  padding: 16px 18px; transition: top .2s ease, left .2s ease;
}
.tour-pop h3 { margin: 0 0 6px; font-size: 1rem; }
.tour-pop p { margin: 0 0 14px; color: var(--muted); font-size: 0.9rem; }
.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-dots { display: flex; gap: 6px; }
.tour-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.tour-dots i.on { background: var(--accent); }
.tour-actions { display: flex; gap: 8px; align-items: center; }
.tour-skip { background: none; border: none; color: var(--muted); cursor: pointer; font: inherit; font-size: 0.82rem; }
.tour-skip:hover { color: var(--text); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: static; height: auto; flex-direction: row; align-items: center;
    gap: 12px; padding: 12px 16px; border-right: none;
    border-bottom: 1px solid var(--side-border); overflow-x: auto;
  }
  .sidebar .nav { flex-direction: row; }
  .sidebar .nav-label, .sidebar .foot { display: none; }
  .content { padding: 20px 16px 40px; }
  .topbar { padding: 12px 16px; }
  .kv dd { text-align: left; }
}


/* --- backups page: four tools behind four cards -------------------------- */
.bk-tools {
  display: grid; gap: 10px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.bk-tool {
  display: grid; gap: 2px; text-align: left; cursor: pointer;
  padding: 14px 16px; border-radius: 14px; font: inherit;
  background: var(--bg-card); border: 1px solid var(--border);
  transition: border-color .12s, background .12s;
}
.bk-tool:hover { border-color: var(--accent-line); }
.bk-tool.active { border-color: var(--accent); background: var(--accent-soft); }
.bk-tool .bt-ico { color: var(--muted); }
.bk-tool.active .bt-ico { color: var(--accent-text); }
.bk-tool .bt-ico .ic { width: 18px; height: 18px; }
.bk-tool .bt-t { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--text); }
.bk-tool .bt-s { font-size: 0.78rem; color: var(--muted); }
/* The destructive one is marked before it is opened, not after. */
.bk-tool.danger .bt-ico, .bk-tool.danger .bt-t { color: var(--err); }
.bk-tool.danger:hover { border-color: var(--err); }
.bk-tool.danger.active { border-color: var(--err); background: transparent; }


/* --- the alert catalogue -------------------------------------------------- */
.al-list { display: grid; gap: 2px; }
.al-row {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
}
.al-row:hover { background: var(--bg-elevated); }
/* A mandatory one is not a choice, so it does not offer itself as one. */
.al-row.fixed { cursor: default; }
.al-row.fixed:hover { background: none; }
.al-row input { margin-top: 3px; flex: none; }
.al-row .al-t { display: block; font-weight: 600; font-size: 0.9rem; }
.al-row .al-d { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 2px; }

/* One *line* per extra Sythe account inside the Session card. Three accounts as
   three detail blocks filled the screen with rows that were the same every time;
   what changes between them is the name, whether it is signed in, and when a
   human is next needed. */
.sy-others { display: grid; gap: 6px; margin-top: 14px; }
.sy-acct {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 8px 12px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border);
}
.sy-acct .sa-name { font-weight: 600; min-width: 110px; }
.sy-acct .sa-when { font-size: 0.78rem; color: var(--muted); }
/* The login sits on the same line and pushes to the right. */
.sy-acct .sy-row-login { margin: 0 0 0 auto; }
.sy-other {
  padding: 11px 13px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border);
}
.sy-other-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sy-row-login {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0 0;
}
/* Six digits with room to breathe - the old field was sized for a table cell. */
.sy-code-in {
  max-width: 118px; font-family: var(--font-mono); letter-spacing: 0.16em;
  text-align: center;
}

/* ---------- Marketing refresh (2026-08-07) ----------
   Less generic SaaS styling: the gradient and glow are reserved for the
   wordmark, the headline highlight, primary CTAs and selected states; the
   status-gem language carries more of the identity. New blocks: the labelled
   demo dashboard, gem feature markers, FAQ, and the varied feature-page
   layouts (workflow / staff-comparison / limitation note). */

/* Visible keyboard focus, site-wide - the accent ring, on both skins. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Small feature cards lead with a gem, not another rounded icon square. */
.feature .fgem {
  width: 9px; height: 9px; flex: none; margin-top: 7px;
  transform: rotate(45deg); background: var(--accent-gradient, var(--accent));
}

/* The demo dashboard says what it is. */
.gm-note {
  padding: 9px 20px; border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em;
  color: var(--muted);
}

/* FAQ: native details/summary, styled like the rest of the cards. */
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq details {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0 18px;
}
.faq summary {
  cursor: pointer; list-style: none; display: flex; align-items: center;
  gap: 12px; padding: 14px 0; font-weight: 600; font-size: 0.95rem;
}
.faq summary::before {
  content: ""; width: 8px; height: 8px; flex: none; transform: rotate(45deg);
  border: 1.5px solid var(--accent-text); transition: background 0.15s ease;
}
.faq details[open] summary::before { background: var(--accent-text); }
.faq summary::-webkit-details-marker { display: none; }
.faq details p { margin: 0 0 16px; padding-left: 20px; color: var(--muted); font-size: 0.9rem; line-height: 1.6; }

/* Feature page: numbered workflow block. */
.feat-flow {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 24px; margin-bottom: 16px;
}
.feat-flow h3 { margin: 0 0 12px; font-size: 1rem; }
.feat-flow ol { margin: 0; padding: 0 0 0 4px; list-style: none; counter-reset: fstep; display: flex; flex-direction: column; gap: 10px; }
.feat-flow ol li { counter-increment: fstep; display: flex; gap: 12px; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }
.feat-flow ol li::before {
  content: counter(fstep); flex: none; width: 24px; height: 24px;
  border-radius: 50%; display: grid; place-items: center; margin-top: 1px;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;
  color: var(--accent-text); background: var(--accent-soft);
  border: 1px solid var(--accent-line);
}

/* Feature page: what staff can / cannot do, side by side. */
.feat-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.feat-compare ul.no li::before { border-color: var(--err); background: transparent; }
@media (max-width: 640px) { .feat-compare { grid-template-columns: 1fr; } }

/* Feature page: the honest-limitation callout. */
.feat-note {
  margin-top: 16px; padding: 12px 16px; border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0; background: var(--accent-soft);
  color: var(--muted); font-size: 0.9rem; line-height: 1.6; max-width: 72ch;
}

/* Footer legal links: present when needed, invisible until then. */
.market-footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.market-footer .foot-links { display: flex; gap: 16px; }
.market-footer .foot-links a { color: var(--muted); font-size: 0.8rem; }
.market-footer .foot-links a:hover { color: var(--text); }

/* Legal pages: readable prose, no marketing chrome. */
.legal { max-width: 720px; }
.legal h1 { margin: 0 0 4px; }
.legal-updated { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 26px; }
.legal h2 { font-size: 1.02rem; margin: 26px 0 8px; }
.legal p, .legal li { color: var(--muted); font-size: 0.92rem; line-height: 1.65; }
.legal p strong, .legal li strong { color: var(--text); }
.legal ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.legal a { color: var(--accent-text); }