/* 1D3R dashboard theme: the 1d3r.com look on every dashboard page.
   Loaded after style.css. Tektur for titles and big numbers, Geist Mono for small labels,
   the site's grid and brass light behind the top of each page, site-style cards and buttons. */

@font-face { font-family: "Tektur"; src: url("/site/fonts/tektur-medium.woff") format("woff"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: local("Geist Mono"), url("/site/fonts/geist-mono.woff") format("woff"); font-weight: 400 500; font-display: swap; }

:root {
  --font-display: "Tektur", "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* The website's palette */
  --bg: #0a0c10;
  --bg-sunken: #080a0d;
  --surface: #10141b;
  --surface-2: #151a23;
  --surface-3: #1c222d;
  --surface-hover: #181e28;
  --line: #212833;
  --line-strong: #2d3542;
  --text: #edf0f4;
  --text-2: #a3adbb;
  --text-3: #6f7a89;
  --accent-hot: #ffc965;
  --card-grad: linear-gradient(180deg, var(--surface-2), var(--surface));
  --grid-line: rgba(255, 255, 255, .035);
  --slash: rgba(var(--glow), .42);
  --violet: #8b7cf6;
  /* The accent glow as r, g, b (the admin site swaps these for its violet). */
  --glow: 231, 176, 74;
  --glow-hot: 255, 201, 101;
  --title-em-light: #c48a1a;
  --sidebar-w: 264px;
}
:root[data-theme="light"] {
  --bg: #f6f7f9;
  --bg-sunken: #eef0f3;
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --surface-3: #eff1f5;
  --card-grad: linear-gradient(180deg, #ffffff, #fbfbfc);
  --grid-line: rgba(17, 21, 27, .05);
  --slash: rgba(var(--glow), .32);
  --accent-hot: #b07812;
  --glow: 214, 154, 40;
}

/* ---------- the page background: grid + brass light, like the website hero ---------- */
.app-main { position: relative; isolation: isolate; overflow-x: clip; }   /* the light slash must never widen the page on phones */
.app-main::before {
  content: ""; position: absolute; z-index: -2; inset: 0 0 auto 0; height: 560px; pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at 72% 0%, #000 20%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 75% at 72% 0%, #000 20%, transparent 72%);
}
.app-main::after {
  content: ""; position: absolute; z-index: -1; top: -120px; right: 16%; width: 150px; height: 620px; pointer-events: none;
  transform: skewX(-24deg);
  background: linear-gradient(180deg, rgba(var(--glow-hot), 0) 0%, var(--slash) 30%, rgba(var(--glow), .08) 62%, rgba(var(--glow), 0) 100%);
  box-shadow: 0 0 120px 30px rgba(var(--glow), .06);
  opacity: .5;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
  mask-image: linear-gradient(180deg, #000 55%, transparent);
}
@media (max-width: 900px) { .app-main::after { right: -40px; opacity: .35; } }

/* ---------- page titles ---------- */
.page-head { align-items: flex-end; margin-bottom: 26px; }
/* The small label above every title: the sidebar section the page is in (set by the sidebar). */
.page-head > div:first-child::before, .ov2-head > div:first-child::before {
  content: var(--nav-group, none);
  display: inline-flex; align-items: center;
  margin-bottom: 10px; padding-left: 17px;
  font: 500 11.5px/1 var(--font-mono); letter-spacing: .26em; text-transform: uppercase; color: var(--text-2);
  background: linear-gradient(var(--accent), var(--accent)) 0 50% / 8px 8px no-repeat;
}
.page-head h1, .ov2-head h1, .picker-main h1 {
  font: 500 clamp(28px, 3.1vw, 38px)/1.02 var(--font-display);
  text-transform: uppercase; letter-spacing: -.01em; color: var(--text);
}
.page-head h1 em, .ov2-head h1 em, .picker-main h1 em { font-style: normal; color: var(--accent); }
:root[data-theme="light"] .page-head h1 em, :root[data-theme="light"] .ov2-head h1 em { color: var(--title-em-light); }
.page-head h1 .badge-premium { font-family: var(--font-sans); text-transform: uppercase; }
.page-desc { margin-top: 10px; font-size: 15px; line-height: 1.55; }
.back-link { font: 500 11.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }

/* ---------- cards ---------- */
.panel, .stat-strip, .community-list { background: var(--card-grad); border-color: var(--line); border-radius: 12px; box-shadow: none; }
.panel-tint { background: var(--surface-2); }
.panel-foot { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.panel-head h2, .preview-label h2, .section-title h2 {
  font: 500 12.5px/1.35 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text);
}
.panel-head p { margin-top: 6px; }
.setting-meta h2, .setting-meta h3 { font: 500 12px/1.35 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.setting-meta p { color: var(--text-3); }
.subhead h3 { font: 500 11.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }

/* big numbers in Tektur */
.stat dt, .stat-label { font: 500 11px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.stat dd, .stat-value { font: 500 28px/1.05 var(--font-display); letter-spacing: -.01em; margin-top: 8px; }

/* ---------- buttons, like the website ---------- */
.btn-primary, button[type="submit"]:not(.btn):not(.icon-btn), .button {
  box-shadow: 0 0 0 1px rgba(var(--glow-hot), .25) inset, 0 10px 30px -12px rgba(var(--glow), .65);
}
.btn-secondary, .btn:not(.btn-primary):not(.btn-ghost):not(.btn-danger):not(.btn-danger-solid):not(.btn-ok) { background: rgba(255, 255, 255, .025); }
:root[data-theme="light"] .btn-secondary { background: #fff; }

/* ---------- tabs ---------- */
.tabs-line a, .tabs-line button { font: 500 12px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.tabs { background: color-mix(in srgb, var(--surface) 80%, transparent); }
.tabs a, .tabs button, .tab { font-weight: 500; }
.tabs .active, .tabs .is-active, .tabs [aria-selected="true"] { background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-line); }

/* ---------- top bar ---------- */
.topbar { background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.crumbs strong { font: 500 11.5px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.crumbs a span { font-size: 13px; }

/* ---------- sidebar ---------- */
.sidebar { background: var(--bg-sunken); }
.sb-brand-name { font: 500 17px var(--font-display); letter-spacing: .02em; }
.sb-brand-name span { margin-left: 3px; font: 500 10.5px var(--font-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--text-3); }
.sb-server-copy small { font: 500 10.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.sb-find {
  display: flex; align-items: center; gap: 8px; width: auto; height: 34px; margin: 0 12px 6px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text-3); font-size: 13px; font-weight: 400; cursor: pointer; text-align: left;
}
.sb-find:hover { color: var(--text-2); border-color: var(--line-strong); background: var(--surface-2); }
.sb-find svg { width: 15px; height: 15px; flex: none; }
.sb-find span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-find kbd { font: 10.5px var(--font-mono); color: var(--text-3); border: 1px solid var(--line-strong); border-radius: 5px; padding: 1px 5px; }
.sb-nav { padding-top: 4px; }
.sb-group + .sb-group { margin-top: 0; }
.sb-group-label, .sb-section-label { display: block; padding: 16px 10px 6px; font: 500 10.5px var(--font-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--text-3); }
.sb-section-label { padding-top: 18px; }
.sb-top { padding-top: 6px; }
.sb-row { position: relative; }
.sb-link { height: 33px; border-radius: 8px; }
.sb-link.is-active { background: linear-gradient(90deg, rgba(var(--glow), .15), rgba(var(--glow), .02)); }
:root[data-theme="light"] .sb-link.is-active { background: linear-gradient(90deg, rgba(var(--glow), .16), rgba(var(--glow), .03)); }
.sb-crown { margin-left: auto; display: inline-flex; color: var(--gold-text); }
.sb-crown svg { width: 13px !important; height: 13px !important; flex: 0 0 13px !important; fill: currentColor !important; stroke: none !important; opacity: .9 !important; }
.sb-row:hover .sb-link .sb-crown, .sb-row:focus-within .sb-link .sb-crown, .sb-row:hover .sb-link .sb-pill, .sb-row:focus-within .sb-link .sb-pill { margin-right: 24px; }
/* pin buttons appear on hover */
.sb-pin {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); z-index: 1;
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--text-3);
  display: grid; place-items: center; opacity: 0; transition: opacity var(--t), color var(--t), background var(--t);
}
.sb-pin svg { width: 13px; height: 13px; }
.sb-row:hover .sb-pin, .sb-pin:focus-visible { opacity: 1; }
.sb-pin:hover { color: var(--accent-text); background: var(--surface-3); }
.sb-pin.is-pinned { color: var(--accent-text); }
.sb-pins .sb-pin.is-pinned { opacity: 0; }
.sb-pins .sb-row:hover .sb-pin { opacity: 1; }
.sb-pin-hint { display: none; margin: 0 10px 2px; font-size: 12px; line-height: 1.45; color: var(--text-3); }
.sb-pin-hint svg { width: 12px; height: 12px; vertical-align: -2px; }
.sb-pins[data-empty] .sb-pin-hint { display: block; }
@media (hover: none) { .sb-pin { opacity: .6; } .sb-row .sb-link .sb-crown, .sb-row .sb-link .sb-pill { margin-right: 24px; } }
/* folding groups */
.sb-fold { margin: 1px 0; }
.sb-fold-head {
  display: flex; align-items: center; gap: 10px; height: 35px; padding: 0 10px; border-radius: 8px;
  color: var(--text); font-size: 13.5px; font-weight: 500; cursor: pointer; list-style: none; user-select: none;
}
.sb-fold-head::-webkit-details-marker { display: none; }
.sb-fold-head:hover { background: var(--surface-2); }
.sb-fold-head svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--text-2); }
.sb-fold-head > span:first-of-type { flex: 1; }
.sb-count { font: 500 11px var(--font-mono); color: var(--text-3); }
.sb-chev { width: 14px !important; height: 14px !important; flex: 0 0 14px !important; color: var(--text-3) !important; transition: transform var(--t); }
.sb-fold[open] > .sb-fold-head .sb-chev { transform: rotate(90deg); }
.sb-fold[data-here] > .sb-fold-head { color: var(--text); }
.sb-fold[data-here] > .sb-fold-head > svg:first-child { color: var(--accent-text); }
.sb-fold-body { margin: 2px 0 8px 18px; padding-left: 9px; border-left: 1px solid var(--line); }
.sb-sub { height: 31px; font-size: 13px; color: var(--text-2); }
.sb-sub > svg:first-child { display: none; }
.sb-sub.is-active::before { left: -10px; }
.sb-sub.is-premium > svg:first-child { display: none; }

/* ---------- unsaved changes bar ---------- */
.savebar { border-color: rgba(var(--glow), .35); }
.js-savebar .savebar-auto {
  position: fixed; left: calc(var(--sidebar-w) + (100vw - var(--sidebar-w)) / 2); bottom: 22px; z-index: 70;
  width: min(660px, calc(100vw - var(--sidebar-w) - 40px)); margin: 0; transform: translate(-50%, 140%); opacity: 0; pointer-events: none;
  padding: 10px 10px 10px 18px; border-color: rgba(var(--glow), .35); border-radius: 14px;
  background: color-mix(in srgb, var(--bg-sunken) 94%, transparent);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .02) inset;
  transition: transform .26s var(--ease), opacity .2s var(--ease);
}
.js-savebar .savebar-auto.is-dirty { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.savebar.is-dirty p::before, .savebar.is-marked p::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; vertical-align: 1px; background: var(--warn); box-shadow: 0 0 8px var(--warn); }
.savebar.is-marked p { color: var(--text); }
.savebar-auto .savebar-discard { margin-left: auto; }
:root[data-theme="light"] .savebar-auto { background: rgba(255, 255, 255, .96); box-shadow: 0 20px 50px rgba(17, 21, 27, .18); }
.savebar-spacer { height: 0; transition: height .2s; }
body.has-dirty .page { padding-bottom: 120px; }
@media (max-width: 900px) {
  .js-savebar .savebar-auto { left: 50%; width: calc(100vw - 20px); bottom: 10px; }
}
.savebar-auto .row { display: flex; gap: 8px; margin-left: auto; flex-wrap: nowrap; }

/* ---------- live previews ---------- */


/* ---------- Ctrl K ---------- */
.command-dialog { width: min(640px, calc(100vw - 24px)); border-radius: 16px; background: var(--surface); }
.command-input input { font-size: 16px !important; }
.command-heading { font: 500 10.5px var(--font-mono); letter-spacing: .18em; text-transform: uppercase; padding: 12px 10px 6px; }
.command-item { min-height: 40px; }
.command-item.is-selected { background: var(--surface-3); }
.command-item.is-selected small { color: var(--accent-text); }
.command-item mark { background: none; color: var(--accent-text); font-weight: 600; }
.command-item .cmd-sub { color: var(--text-3); font-size: 12.5px; margin-left: 6px; }
.command-foot { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 12px; }
.command-foot kbd { font: 10.5px var(--font-mono); border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 5px; margin-right: 4px; }

/* ---------- community picker ---------- */
.picker { position: relative; isolation: isolate; }
.picker::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto 0; height: 520px; pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 60% 75% at 50% 0%, #000 20%, transparent 72%); mask-image: radial-gradient(ellipse 60% 75% at 50% 0%, #000 20%, transparent 72%); }
.picker-main h1 { font-size: 40px; }

/* ---------- small things ---------- */
.badge { letter-spacing: .01em; }
.toggle input[type="checkbox"]:checked { box-shadow: 0 0 12px rgba(var(--glow), .35); }
.empty h3, .empty-state h3 { font: 500 18px var(--font-display); text-transform: uppercase; }

/* ---------- Features hub ---------- */
.feat-search { display: flex; align-items: center; gap: 8px; height: 38px; width: 260px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text-3); }
.feat-search svg { width: 15px; height: 15px; flex: none; }
.feat-search input { flex: 1; min-width: 0; height: 36px; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.feat-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.feat-filters button { height: 32px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--text-2);
  font: 500 11.5px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; gap: 7px; }
.feat-filters button span { color: var(--text-3); letter-spacing: 0; }
.feat-filters button svg { width: 12px; height: 12px; fill: currentColor; stroke: none; color: var(--gold-text); }
.feat-filters button.is-on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text); }
.feat-filters button.is-on span { color: var(--accent-text); }
.feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.feat-card { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 172px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-grad); transition: border-color var(--t), opacity var(--t); }
.feat-card:hover { border-color: var(--line-strong); }
.feat-top { display: flex; align-items: center; justify-content: space-between; }
.feat-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-3); border: 1px solid var(--line); color: var(--text-2); }
.feat-icon svg { width: 19px; height: 19px; }
.feat-card.is-live .feat-icon { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text); }
.feat-body { display: block; flex: 1; color: inherit; }
.feat-body:hover { color: inherit; }
.feat-body h2 { font: 500 17px/1.15 var(--font-display); text-transform: uppercase; letter-spacing: .01em; }
.feat-body p { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--text-3); }
.feat-foot { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.feat-group { color: var(--text-3); font: 500 10.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.feat-prem { display: inline-flex; align-items: center; gap: 4px; color: var(--gold-text); font-size: 11.5px; font-weight: 500; }
.feat-prem svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.feat-status { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; color: var(--text-2); font-size: 12.5px; }
.feat-status svg { width: 13px; height: 13px; }
.feat-status.is-on { color: var(--ok); }
.feat-status.is-off { color: var(--text-3); }
.feat-switch { margin: 0; }
.feat-toggle { width: 40px; height: 23px; padding: 0; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface-3); position: relative; }
.feat-toggle span { position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #7b8594; transition: left .16s var(--ease), background .16s; }
.feat-toggle.is-on { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px rgba(var(--glow), .35); }
.feat-toggle.is-on span { left: 19px; background: var(--accent-ink); }
.feat-toggle:hover { background: var(--surface-3); } .feat-toggle.is-on:hover { background: var(--accent-hover); }
.feat-hidden-tag { display: none; position: absolute; top: 18px; right: 66px; font: 500 10px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.feat-card.is-hidden { border-style: dashed; }
.feat-card.is-hidden .feat-body, .feat-card.is-hidden .feat-icon, .feat-card.is-hidden .feat-foot { opacity: .55; }
.feat-card.is-hidden .feat-hidden-tag { display: block; }
.feat-empty { padding: 30px 0; text-align: center; }
@media (max-width: 700px) { .feat-search { width: 100%; } .page-head .page-actions { width: 100%; } }

/* ---------- Overview (home) ---------- */
.ov-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; color: var(--text-2); font-size: 13px; }
.ov-meta strong { font-weight: 600; }
.ov-mini-icon { width: 24px; height: 24px; border-radius: 7px; object-fit: cover; display: inline-grid; place-items: center; background: var(--surface-3); color: var(--text); font-size: 10px; font-weight: 600; }
.home-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: 16px; margin-bottom: 16px; }
.home-status { position: relative; overflow: hidden; padding: 24px 26px; border: 1px solid rgba(var(--glow), .3); border-radius: 12px;
  background: radial-gradient(circle at 100% 0%, rgba(var(--glow), .14), transparent 55%), var(--card-grad); }
.home-status::before { content: ""; position: absolute; inset: 10px; pointer-events: none; opacity: .65;
  background: linear-gradient(var(--accent), var(--accent)) 0 0 / 14px 2px, linear-gradient(var(--accent), var(--accent)) 0 0 / 2px 14px,
    linear-gradient(var(--accent), var(--accent)) 100% 0 / 14px 2px, linear-gradient(var(--accent), var(--accent)) 100% 0 / 2px 14px,
    linear-gradient(var(--accent), var(--accent)) 0 100% / 14px 2px, linear-gradient(var(--accent), var(--accent)) 0 100% / 2px 14px,
    linear-gradient(var(--accent), var(--accent)) 100% 100% / 14px 2px, linear-gradient(var(--accent), var(--accent)) 100% 100% / 2px 14px;
  background-repeat: no-repeat; }
.home-status h2 { font: 500 clamp(20px, 2vw, 26px)/1.08 var(--font-display); text-transform: uppercase; max-width: 26ch; }
.home-status h2 em { font-style: normal; color: var(--accent); }
.home-status p { margin-top: 10px; max-width: 62ch; line-height: 1.55; }
.home-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; position: relative; }
.home-quick a { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: rgba(255, 255, 255, .025); color: var(--text); font-size: 13px; font-weight: 500; }
.home-quick a:hover { border-color: var(--accent-line); color: var(--text); background: var(--accent-soft); }
.home-quick svg { width: 15px; height: 15px; color: var(--text-2); }
.home-setup { padding: 20px 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-grad); }
.home-setup.is-collapsed { display: flex; align-items: center; gap: 14px; }
.home-setup.is-collapsed > div:nth-child(2) { flex: 1; }
.home-setup-head { display: flex; align-items: center; gap: 14px; }
.home-setup-head > div:nth-child(2) { flex: 1; }
.home-setup h2 { font: 500 12px var(--font-mono); letter-spacing: .18em; text-transform: uppercase; }
.home-setup p { margin-top: 3px; font-size: 12.5px; color: var(--text-3); }
.home-setup .setup-ring { width: 64px; height: 64px; flex-basis: 64px; }
.home-setup .setup-ring span { font: 500 16px var(--font-display); }
.setup-ring::after { background: var(--surface); }
.home-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; }
.home-steps li { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; color: var(--text); }
.home-steps li.is-done { color: var(--text-3); }
.home-steps li.is-done .checklist-mark { border: 0; background: var(--ok-soft); color: var(--ok); }
.home-steps .checklist-mark { flex: none; width: 18px; height: 18px; }
.home-steps a { margin-left: auto; font-size: 12.5px; white-space: nowrap; }
.home-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.home-kpi { display: flex; flex-direction: column; padding: 16px 18px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-grad); min-width: 0; }
.home-kpi-label { display: flex; align-items: center; gap: 7px; font: 500 11px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.home-kpi-label svg { width: 14px; height: 14px; }
.home-kpi strong { margin-top: 10px; font: 500 32px/1 var(--font-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-kpi-trend { margin-top: 6px; font-size: 12px; color: var(--text-3); }
.home-kpi-trend.is-up { color: var(--ok); } .home-kpi-trend.is-down { color: var(--danger); } .home-kpi-trend.is-warn { color: var(--warn); }
.home-bars { display: flex; align-items: flex-end; gap: 4px; height: 32px; margin-top: 12px; }
.home-bars i { flex: 1; border-radius: 2px; background: rgba(var(--glow), .38); min-height: 3px; }
.home-bars i:last-child { background: var(--accent); }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: 16px; }
.home-feed { list-style: none; margin: 12px 0 0; padding: 0; }
.home-feed li { display: flex; align-items: center; gap: 12px; padding: 11px 20px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--text-2); }
.home-feed li strong { font-weight: 500; }
.home-feed time { margin-left: auto; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.home-feed-icon { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); }
.home-feed-icon svg { width: 15px; height: 15px; }
.home-empty { padding: 22px 20px; color: var(--text-3); font-size: 13px; }
.home-feats { display: grid; grid-template-columns: 1fr 1fr; margin-top: 12px; }
.home-feats a { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--line); color: var(--text); font-size: 13.5px; min-width: 0; }
.home-feats a:nth-child(odd) { border-right: 1px solid var(--line); }
.home-feats a:hover { background: var(--surface-2); color: var(--text); }
.home-feats svg { width: 16px; height: 16px; flex: none; color: var(--text-2); }
.home-feats span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-feats em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--text-2); white-space: nowrap; }
.home-feats em.is-on { color: var(--ok); } .home-feats em.is-off { color: var(--text-3); }
@media (max-width: 1100px) { .home-hero, .home-grid { grid-template-columns: minmax(0, 1fr); } .home-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .home-kpis { grid-template-columns: minmax(0, 1fr); } .home-feats { grid-template-columns: 1fr; } .home-feats a:nth-child(odd) { border-right: 0; } .home-status { padding: 20px; } }

/* Titles flow as text, so a brass word keeps its space; the Premium badge sits inline. */
.page-head h1 { display: block; }
.page-head h1 .badge-premium, .page-head h1 .badge { vertical-align: .32em; margin-left: 10px; letter-spacing: .04em; }
.page-head h1 .faint { font-family: var(--font-sans); text-transform: none; font-size: .55em; }
/* The sidebar has its own search box; the top bar keeps one for phones, where the sidebar is tucked away. */
@media (min-width: 901px) { .topbar .search-trigger { display: none; } }
/* Premium page hero */
.pm-hero h1 { font: 500 clamp(26px, 2.8vw, 36px)/1.04 var(--font-display); text-transform: uppercase; letter-spacing: -.01em; margin-top: 12px; }
.pm-hero { border-color: rgba(var(--glow), .3); background: radial-gradient(circle at 100% 0%, rgba(var(--glow), .14), transparent 55%), var(--card-grad); }

/* Tabs scroll sideways on small screens instead of being cut off. */
.tabs-line { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.tabs-line::-webkit-scrollbar { display: none; }
.tabs-line a, .tabs-line button { flex: none; white-space: nowrap; }
@media (max-width: 1100px) { .hm-grid { grid-template-columns: minmax(0, 1fr); } }
.command-item > span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.command-item > span mark { display: inline; padding: 0; }
.command-input input::-webkit-search-cancel-button { display: none; }
:root[data-theme="light"] .home-status h2 em, :root[data-theme="light"] .feat-filters button.is-on { color: #b07812; }
:root[data-theme="light"] .home-bars i { background: rgba(var(--glow), .32); } :root[data-theme="light"] .home-bars i:last-child { background: var(--accent-hover); }
.home-kpis { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.home-kpi.is-locked { color: inherit; border-style: dashed; justify-content: flex-start; }
.home-kpi.is-locked:hover { border-color: var(--gold-ring); color: inherit; }
.home-kpi.is-locked strong { font-size: 14px; margin-top: 14px; }
.home-kpi.is-locked strong .badge-premium { font-size: 11px; line-height: 22px; padding: 0 10px; }
.home-kpi.is-locked .home-kpi-trend { margin-top: 12px; color: var(--text-2); }
.home-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.home-grid.is-single .home-feats { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.home-grid.is-single .home-feats a:nth-child(odd) { border-right: 0; }
@media (max-width: 1100px) { .home-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .home-kpis { grid-template-columns: minmax(0, 1fr); } }
.sb-pin.is-error { color: var(--danger); opacity: 1; }

/* ---------- Privacy & data, Bot permissions ---------- */
.radio-row, .check-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 14px; }
.radio-row input, .check-row input { margin-top: 3px; accent-color: var(--accent); }
.radio-row:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); }
.radio-row small { display: block; margin-top: 2px; }
.check-row { border-style: dashed; }
.panel.adm-danger { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }

/* A read-only setting shown with its state, set on another page. */
.note-row { display: flex; align-items: flex-start; gap: 10px; }
.note-row .badge { margin-top: 2px; flex: none; }