:root {
  color-scheme: dark;
  --canvas: #000;
  --panel: #0c0c0d;
  --raised: #161618;
  --selected: #212123;
  --line: #262628;
  --line-strong: #404044;

  --fg: #f5f5f5;
  --body: #b8b8bc;
  --muted: #96969c;
  --faint: #66666c;

  --accent: #2c6cf6;
  --accent-strong: #6a9cff;
  --accent-soft: #0b1733;
  --accent-ink: #fff;

  --ok: #4ade80;
  --warn: #fbbf24;
  --bad: #f87171;

  --radius: 14px;
  --radius-sm: 10px;
  --header-h: 56px;
  --font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --shadow-panel: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 24px 48px -32px rgba(0, 0, 0, 0.9);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--canvas); color: var(--body);
  font-family: var(--font); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; font-synthesis: none; overflow-x: hidden;
}
main { flex: 1; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { color: var(--fg); margin: 0; }
p { margin: 0; }
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--accent) 45%, transparent); }
:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; border-radius: 6px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { width: 1.1em; height: 1.1em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic-fill { fill: currentColor; stroke: none; }
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.container-md { max-width: 980px; }
.container-sm { max-width: 720px; }
.section { padding: 96px 0; }
.center { text-align: center; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.accent { color: var(--accent); }

.banner {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 44px 8px 16px;
  background: var(--accent-soft); border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: #c3d4f7; font-size: 13.5px; font-weight: 500; text-align: center; position: relative;
}
.banner a { display: inline-flex; align-items: center; gap: 4px; color: #fff; font-weight: 600; }
.banner a:hover .ic { transform: translateX(3px); }
.banner .ic { transition: transform 0.2s var(--ease); }
.banner-close { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #8da6d4; padding: 6px; border-radius: 8px; display: grid; place-items: center; }
.banner-close:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }

.site-header {
  position: sticky; top: 0; z-index: 60; height: var(--header-h);
  background: rgba(0, 0, 0, 0.94); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  animation: drop 0.6s var(--ease) both;
}
.nav { height: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; position: relative; }

.brand { display: inline-flex; align-items: baseline; gap: 3px; color: var(--fg); font-size: 27px; font-weight: 600; letter-spacing: -0.055em; line-height: 1; }
.brand .logo-mark { height: 0.84em; width: auto; flex: none; transform: translateY(0.09em); transition: transform 0.4s var(--ease); }
.brand:hover .logo-mark { transform: translateY(0.02em); }
.nav-right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
.menu-btn { display: grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 0; background: var(--raised); border: 1px solid var(--line-strong); border-radius: 12px; color: var(--fg); transition: background 0.2s, color 0.2s, transform 0.15s var(--ease); }
.menu-btn:hover { background: var(--selected); }
.menu-btn:active { transform: scale(0.94); }
.menu-btn[aria-expanded='true'] { background: #f5f5f5; color: #000; }

.nav-links { position: absolute; right: 24px; top: calc(100% + 8px); width: 248px; display: flex; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px) scale(0.97); transform-origin: top right; transition: opacity 0.16s var(--ease), transform 0.22s var(--ease), visibility 0s linear 0.22s; flex-direction: column; gap: 2px; padding: 8px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7); }
.nav-links.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity 0.18s var(--ease), transform 0.26s var(--ease), visibility 0s; }
.nav-links a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--body); font-size: 15px; font-weight: 500; transition: color 0.2s var(--ease), background 0.2s var(--ease), transform 0.15s var(--ease); }
.nav-links a .ic { width: 18px; height: 18px; flex: none; color: var(--faint); transition: color 0.2s var(--ease); }
.nav-links a:hover, .nav-links a:focus-visible { background: #f5f5f5; color: #000; outline: none; }
.nav-links a:hover .ic, .nav-links a:focus-visible .ic { color: #000; }
.nav-links a:active { transform: scale(0.97); }
.nav-links a[aria-current='page'] { background: var(--selected); color: var(--fg); }
.nav-links a[aria-current='page']:hover { background: #f5f5f5; color: #000; }
.badge-new {
  font-size: 10.5px; font-weight: 600; line-height: 1; padding: 3px 7px; border-radius: 999px; letter-spacing: 0.01em;
  color: var(--accent-strong); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}

.user-chip { position: relative; }
.user-chip > button { display: flex; align-items: center; gap: 9px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line-strong); font-weight: 500; font-size: 14px; color: var(--fg); }
.user-chip > button:hover { background: var(--selected); }
.user-chip img, .avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--selected); object-fit: cover; }
.avatar-ph { display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--muted); }
.menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px; padding: 6px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px) scale(0.97); transform-origin: top right; transition: opacity 0.16s var(--ease), transform 0.22s var(--ease), visibility 0s linear 0.22s; }
.menu.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity 0.18s var(--ease), transform 0.26s var(--ease), visibility 0s; }
@media (prefers-reduced-motion: reduce) { .nav-links, .menu, .nav-links.open, .menu.open { transition: none; transform: none; } }
.menu a, .menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: 8px; font-size: 14px; color: var(--body); text-align: left; }
.menu a:hover, .menu button:hover { background: var(--raised); color: var(--fg); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.menu .who-line { padding: 8px 10px 6px; font-size: 12.5px; color: var(--faint); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px;
  border-radius: 10px; border: 1px solid transparent; font-weight: 600; font-size: 14.5px; white-space: nowrap; letter-spacing: -0.005em;
  transition: transform 0.18s var(--ease), box-shadow 0.25s, background 0.2s, border-color 0.2s, opacity 0.2s, color 0.2s;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn[disabled] { opacity: 0.5; pointer-events: none; }
.btn .ic { transition: transform 0.2s var(--ease); }
.btn:hover .ic-nudge, .btn:hover .ic-arrow { transform: translateX(3px); }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { background: var(--accent-strong); }
.btn-white { background: var(--fg); color: #000; }
.btn-white:hover { background: #fff; transform: translateY(-1px); }
.btn-ghost { background: var(--raised); border-color: var(--line-strong); color: var(--fg); }
.btn-ghost:hover { background: var(--selected); border-color: #55555b; }
.btn-danger { background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.35); color: var(--bad); }
.btn-danger:hover { background: rgba(248, 113, 113, 0.16); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn-lg { height: 50px; padding: 0 26px; font-size: 16px; border-radius: 12px; }
.btn-icon { width: 32px; padding: 0; }
.btn-block { width: 100%; }

.hero { position: relative; isolation: isolate; min-height: calc(100vh - var(--header-h) - 36px); display: grid; align-content: center; padding: 72px 0 96px; text-align: center; overflow: hidden; }
.page-hero { position: relative; isolation: isolate; overflow: hidden; }
.pill-count { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-strong); font-size: 13.5px; color: var(--body); }
.pill-count b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.pill-count .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); animation: ping 2.2s infinite; }
.display { font-size: clamp(46px, 9.4vw, 112px); line-height: 0.95; letter-spacing: -0.06em; font-weight: 700; margin: 26px auto 0; max-width: 1000px; }
.display .brand-display { font-size: 1em; font-weight: 700; letter-spacing: -0.06em; gap: 0.03em; }
.display .w { display: inline-block; opacity: 0; transform: translateY(0.45em); animation: rise 0.9s var(--ease) forwards; animation-delay: calc(0.12s * var(--i, 0) + 0.15s); }
.lead { font-size: clamp(18px, 2.5vw, 28px); line-height: 1.35; letter-spacing: -0.02em; color: var(--body); max-width: 760px; margin: 28px auto 0; font-weight: 400; }
.hero-cta { display: flex; justify-content: center; gap: 12px; margin-top: 38px; flex-wrap: wrap; }
.fade-up { opacity: 0; animation: rise 0.9s var(--ease) forwards; animation-delay: calc(0.1s * var(--d, 0) + 0.6s); }
.cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); color: var(--faint); animation: bob 2.2s ease-in-out infinite; padding: 8px; }
.cue:hover { color: var(--fg); }

.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.js .reveal.in { opacity: 1; transform: none; }
.statement { font-size: clamp(30px, 5.4vw, 64px); line-height: 1.08; letter-spacing: -0.045em; font-weight: 600; color: var(--fg); max-width: 1000px; }
.statement .w { color: #2c2c30; transition: color 0.35s ease; }
.statement .w.on { color: var(--fg); }
.statement .w.on.hl { color: var(--accent-strong); }
.eyebrow { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-strong); margin-bottom: 14px; }
.h2 { font-size: clamp(32px, 5vw, 56px); line-height: 1; letter-spacing: -0.05em; font-weight: 700; }
.sub { color: var(--muted); font-size: 18px; margin-top: 14px; max-width: 560px; }
.section-head { margin-bottom: 52px; }
.section-head.center .sub { margin-left: auto; margin-right: auto; }

.panel { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-panel); }
.panel-pad { padding: 22px; }
.spot::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.35s; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.055), transparent 60%); }
.spot:hover::before { opacity: 1; }
.spot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.35s; padding: 1px; background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 70%, transparent), transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.spot:hover::after { opacity: 1; }
.tile { padding: 18px 20px; display: flex; gap: 14px; align-items: flex-start; text-align: left; }
.tile .ic { margin-top: 4px; color: var(--accent-strong); font-size: 18px; }
.tile h3 { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.tile p { color: var(--muted); font-size: 14px; line-height: 1.5; margin-top: 2px; }
.icon-tile { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 19px; background: var(--raised); border: 1px solid var(--line-strong); color: var(--accent-strong); }
.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.hero-tiles { margin-top: 72px; }

.stat { padding: 20px 22px 22px; }
.stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.stat-label { color: var(--muted); font-size: 14px; font-weight: 500; }
.stat-note { color: var(--muted); font-size: 12.5px; margin-top: 8px; }
.stat-value { font-size: 40px; font-weight: 700; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; line-height: 1.05; color: var(--fg); margin-top: 2px; }
.skeleton { color: transparent !important; position: relative; }
.skeleton::after { content: ''; position: absolute; inset: 4px 30% 4px 0; border-radius: 6px; background: linear-gradient(90deg, var(--raised) 0, var(--selected) 50%, var(--raised) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--line-strong); color: var(--muted); background: rgba(255, 255, 255, 0.03); white-space: nowrap; }
.pill-live, .pill-ok { color: var(--ok); background: rgba(74, 222, 128, 0.08); border-color: rgba(74, 222, 128, 0.28); }
.pill-bad { color: var(--bad); background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.3); }
.pill-warn { color: var(--warn); background: rgba(251, 191, 36, 0.08); border-color: rgba(251, 191, 36, 0.3); }
.pill-blue { color: var(--accent-strong); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.pill-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 2s ease-in-out infinite; }
.pill-offline { color: var(--warn); background: rgba(251, 191, 36, 0.08); border-color: rgba(251, 191, 36, 0.3); }
.pill-offline::before { animation: none; }

.watch { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.panel-head h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.015em; }
.panel-head p { color: var(--faint); font-size: 13px; margin-top: 2px; }
.bars { width: 100%; height: 150px; }
.bars rect { fill: var(--accent); transition: height 0.45s var(--ease), y 0.45s var(--ease); }
.bars-axis { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; margin-top: 8px; }
.bars rect.zero { fill: rgba(255, 255, 255, 0.16); }
.big-num { font-size: 30px; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--fg); line-height: 1; }
.feed { font-family: var(--mono); font-size: 12.5px; display: flex; flex-direction: column; gap: 2px; min-height: 236px; }
.feed-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; animation: slide 0.5s var(--ease); white-space: nowrap; overflow: hidden; }
.feed-row:nth-child(odd) { background: rgba(255, 255, 255, 0.03); }
.feed-row .route { color: #d4d4d8; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.feed-row .ms { color: var(--faint); width: 52px; text-align: right; }
.feed-empty { color: var(--faint); font-family: var(--font); font-size: 14px; padding: 60px 0; text-align: center; }
.method { display: inline-block; min-width: 46px; text-align: center; padding: 1px 7px; border-radius: 6px; font-family: var(--mono); font-size: 11.5px; font-weight: 600; }
.m-get { background: rgba(74, 222, 128, 0.1); color: var(--ok); }
.m-post { background: var(--accent-soft); color: var(--accent-strong); }
.m-patch, .m-put { background: rgba(251, 191, 36, 0.1); color: var(--warn); }
.m-delete { background: rgba(248, 113, 113, 0.1); color: var(--bad); }
.st { font-weight: 600; } .st-2 { color: var(--ok); } .st-3 { color: var(--accent-strong); } .st-4 { color: var(--warn); } .st-5 { color: var(--bad); }

.show { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; padding: 56px 0; }
.show.flip .show-text { order: -1; }
.show-text h3 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.04; letter-spacing: -0.05em; font-weight: 700; }
.show-text > p { color: var(--muted); font-size: 17px; margin-top: 16px; max-width: 480px; }
.show-text ul { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.show-text li { display: flex; gap: 10px; align-items: center; color: var(--body); font-size: 15px; }
.show-text li .ic { color: var(--accent-strong); }
.show-text .btn { margin-top: 26px; }

.console { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-panel); }

.cta { text-align: center; padding: 96px 24px; border: 1px solid var(--line); border-radius: 24px; background: var(--panel); position: relative; overflow: hidden; }
.cta .h2 { font-size: clamp(36px, 6vw, 72px); }
.cta .sub { margin: 18px auto 0; }

.field { display: grid; gap: 7px; margin-bottom: 16px; }
.label { font-size: 13px; font-weight: 600; color: var(--fg); }
.hint { font-size: 13px; color: var(--faint); }
.input, .select, .textarea { width: 100%; height: 42px; padding: 0 13px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line-strong); outline: none; transition: border-color 0.15s, box-shadow 0.15s; color: var(--fg); }
.textarea { height: auto; min-height: 100px; padding: 11px 13px; resize: vertical; line-height: 1.5; }
.input:hover, .select:hover, .textarea:hover { border-color: #55555b; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2396969c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.select option { background: #111; }
.hov-name { cursor: default; border-bottom: 1px dotted transparent; transition: border-color 0.15s; }
.hov-name:hover, .hov-name:focus-visible { border-bottom-color: var(--faint); outline: none; }
.pop { position: fixed; z-index: 70; width: 276px; padding: 14px; display: grid; gap: 10px; border-radius: 14px; background: var(--raised); border: 1px solid var(--line-strong); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); animation: pop-in 0.14s var(--ease); }
.pop[hidden] { display: none; }
.pop::before { content: ''; position: absolute; inset: -10px; z-index: -1; }
.pop-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pop-head .pav { width: 36px; height: 36px; border-radius: 10px; }
.pop-head b { display: block; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-head small { color: var(--faint); font-size: 12px; }
.pop-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pop-line { font-size: 13px; color: var(--body); }
.pop-actions { display: flex; gap: 8px; }
@keyframes pop-in { from { opacity: 0; transform: translateY(4px); } }
.reminders { display: grid; gap: 14px; margin-top: 14px; }
.reminder { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--panel) 60%, transparent); }
.reminder .textarea { min-height: 64px; }
.reminder-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.reminder-num { width: 96px; }
.reminder-unit { width: 130px; }
.reminder-state.bad { color: var(--bad, #f26d6d); }
.switch { position: relative; width: 40px; height: 23px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--selected); border: 1px solid var(--line-strong); transition: background 0.2s, border-color 0.2s; }
.switch span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: transform 0.22s var(--ease); }
.switch input:checked + span { background: var(--accent); border-color: var(--accent); }
.switch input:checked + span::after { transform: translateX(17px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.toggle-row:last-child { border-bottom: 0; }
.toggle-row b { font-weight: 600; display: block; color: var(--fg); }
.toggle-row small { color: var(--faint); font-size: 13px; }
.seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.seg button { border: 0; background: none; padding: 6px 14px; border-radius: 7px; font-size: 13.5px; font-weight: 500; color: var(--muted); transition: background 0.2s, color 0.2s; }
.seg button[aria-pressed='true'] { background: var(--selected); color: var(--fg); }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--body); }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background 0.15s; }
.table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table td.actions { text-align: right; white-space: nowrap; }
.table td.actions > * + * { margin-left: 8px; }
.table td b { color: var(--fg); font-weight: 600; }
.empty { padding: 40px 16px; text-align: center; color: var(--faint); }
.empty b { display: block; color: var(--fg); font-weight: 600; margin-bottom: 4px; }

.dash { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; padding: 32px 0 96px; align-items: start; }
.dash-side { position: sticky; top: 80px; display: grid; gap: 2px; }
.dash-side h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); font-weight: 600; margin: 14px 12px 6px; }
.dash-side h4:first-child { margin-top: 0; }
.dash-side a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; color: var(--muted); font-weight: 500; font-size: 14.5px; transition: background 0.15s, color 0.15s; }
.dash-side a:hover { color: var(--fg); background: rgba(255, 255, 255, 0.04); }
.dash-side a[aria-current='true'] { color: var(--fg); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-strong); }
.dash-side a[aria-current='true'] .ic { color: var(--accent-strong); }
.dash-main { min-width: 0; display: grid; gap: 16px; align-content: start; }
.page-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.page-title > div:first-child { flex: 1 1 340px; min-width: 0; }
.page-title > .row { flex: none; }
.page-title h1 { font-size: 34px; letter-spacing: -0.05em; font-weight: 700; }
.page-title p { margin-top: 4px; color: var(--muted); }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.kpi { padding: 18px 20px; }
.kpi .stat-label { font-size: 13px; }
.kpi .stat-value { font-size: 30px; margin-top: 8px; }
.kpi-sub { font-size: 12.5px; color: var(--faint); margin-top: 2px; }
.chart { position: relative; }
.chart svg { width: 100%; height: 220px; overflow: visible; }
.chart .grid-line { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1; }
.chart .axis { fill: var(--faint); font-size: 11px; font-family: var(--font); }
.chart .line { fill: none; stroke: var(--accent-strong); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000); animation: draw 1.4s var(--ease) forwards; }
.chart .err-line { fill: none; stroke: var(--bad); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: 0.8; }
.chart .hover-dot { fill: #fff; stroke: var(--accent); stroke-width: 2; }
.chart .area-top { stop-color: var(--accent); stop-opacity: 0.28; } .chart .area-bot { stop-color: var(--accent); stop-opacity: 0; }
.chart-tip { position: absolute; pointer-events: none; transform: translate(-50%, -110%); padding: 6px 10px; border-radius: 8px; background: var(--raised); border: 1px solid var(--line-strong); font-size: 12px; white-space: nowrap; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); color: var(--body); }
.chart-tip b { display: block; font-size: 15px; color: var(--fg); }
.legend { display: flex; gap: 16px; font-size: 13px; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.hbar { display: grid; gap: 14px; }
.hbar-top { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.hbar-top code { font-family: var(--mono); font-size: 12.5px; color: #d4d4d8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { height: 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.07); overflow: hidden; margin-top: 6px; }
.hbar-fill { height: 100%; border-radius: 99px; background: var(--accent); transition: width 0.6s var(--ease); }
.quota { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.quota > div { height: 100%; border-radius: 99px; background: var(--accent); transition: width 0.6s var(--ease); }
.quota.hot > div { background: var(--warn); }
.srv { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.srv img, .srv .srv-ph { width: 44px; height: 44px; border-radius: 12px; background: var(--raised); flex: none; object-fit: cover; }
.srv .srv-ph { display: grid; place-items: center; font-weight: 700; color: var(--muted); }
.srv-main { flex: 1; min-width: 0; }
.srv-main b { display: block; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srv-main small { color: var(--faint); }
.two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.keyline { font-family: var(--mono); font-size: 13px; color: #d4d4d8; }
.gate { text-align: center; padding: 56px 28px; }
.gate .icon-tile { margin: 0 auto 18px; width: 52px; height: 52px; font-size: 24px; }
.gate h2 { font-size: 28px; letter-spacing: -0.04em; margin-bottom: 8px; }
.gate p { max-width: 440px; margin: 0 auto 22px; color: var(--muted); }

.modal-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, 0.72); display: grid; place-items: center; padding: 20px; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); animation: fade 0.18s ease; }
.modal { width: 100%; max-width: 520px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 18px; padding: 26px; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.8); animation: pop 0.24s var(--ease); max-height: 90vh; overflow: auto; }
.modal h3 { font-size: 22px; letter-spacing: -0.03em; margin-bottom: 6px; }
.modal > p { margin-bottom: 18px; color: var(--muted); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.toast-wrap { position: fixed; right: 18px; bottom: 18px; z-index: 100; display: grid; gap: 10px; }
.toast { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 12px; background: var(--raised); border: 1px solid var(--line-strong); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6); font-size: 14px; color: var(--fg); animation: slide 0.35s var(--ease); max-width: 360px; }
.toast.ok .ic { color: var(--ok); } .toast.bad .ic { color: var(--bad); }

.code { position: relative; border: 1px solid var(--line); border-radius: 12px; background: #050506; overflow: hidden; }
.code-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--line); color: var(--faint); font-size: 12.5px; font-family: var(--mono); }
.code pre { margin: 0; padding: 16px 18px; overflow-x: auto; font-family: var(--mono); font-size: 13px; line-height: 1.7; color: #d4d4d8; }
.code code { font-family: inherit; }
.tk-k { color: var(--accent-strong); } .tk-s { color: #86efac; } .tk-n { color: #fdba74; } .tk-c { color: #5b5b66; } .tk-p { color: #c4b5fd; }
.copy { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 7px; border: 1px solid var(--line-strong); background: var(--raised); color: var(--muted); font-size: 12px; }
.copy:hover { color: var(--fg); background: var(--selected); }
.inline-code, .docs-body code:not(pre code), .prose code { font-family: var(--mono); font-size: 0.86em; padding: 2px 7px; border-radius: 6px; background: var(--raised); border: 1px solid var(--line); color: #e4e4e7; }
.secret { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 14px; border-radius: 10px; border: 1px solid rgba(74, 222, 128, 0.3); background: rgba(74, 222, 128, 0.06); font-family: var(--mono); font-size: 13px; word-break: break-all; color: var(--fg); }
.secret span { flex: 1; }
.callout { padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(251, 191, 36, 0.28); background: rgba(251, 191, 36, 0.05); font-size: 14px; color: #e5d6a8; }
.callout strong { color: var(--warn); }
.callout-blue { border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: var(--accent-soft); color: #bccbe9; }
.callout-blue strong { color: var(--accent-strong); }

.docs { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 64px; padding: 48px 0 120px; align-items: start; }
.docs-side { position: sticky; top: 84px; display: grid; gap: 22px; font-size: 14px; max-height: calc(100vh - 110px); overflow: auto; padding-right: 8px; }
.docs-side h4 { margin: 0 0 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); font-weight: 600; }
.docs-side a { display: block; padding: 5px 12px; border-left: 1px solid var(--line); color: var(--muted); transition: color 0.15s, border-color 0.15s; }
.docs-side a:hover { color: var(--fg); }
.docs-side a.on { color: var(--fg); border-left-color: var(--accent); }
.docs-body { min-width: 0; max-width: 760px; }
.docs-body section { padding-top: 28px; margin-bottom: 56px; }
.docs-body h1 { font-size: 54px; letter-spacing: -0.055em; line-height: 1; margin-bottom: 14px; }
.docs-body h2 { font-size: 28px; letter-spacing: -0.04em; margin-bottom: 12px; }
.docs-body h3 { font-size: 17px; margin: 28px 0 8px; letter-spacing: -0.01em; }
.docs-body p, .docs-body li { color: var(--body); }
.docs-body p { margin-bottom: 14px; }
.docs-body ul { padding-left: 20px; margin: 0 0 14px; }
.docs-body .code { margin: 14px 0 18px; }
.docs-body table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 14px 0 20px; }
.docs-body th, .docs-body td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.docs-body th { color: var(--faint); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.endpoint { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); font-family: var(--mono); font-size: 14px; margin: 12px 0; overflow-x: auto; color: var(--fg); }

.vwrap { padding: 64px 0 120px; }
.vcard { max-width: 540px; margin: 0 auto; padding: 32px; }
.steps { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 30px; }
.step { display: flex; align-items: center; gap: 8px; color: var(--faint); font-size: 13px; font-weight: 500; }
.step i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; border: 1px solid var(--line-strong); transition: all 0.3s var(--ease); }
.step.on { color: var(--fg); } .step.on i { background: var(--accent); border-color: var(--accent); color: #fff; }
.step.done { color: var(--ok); } .step.done i { background: rgba(74, 222, 128, 0.12); border-color: rgba(74, 222, 128, 0.5); color: var(--ok); }
.step-bar { width: 24px; height: 1px; background: var(--line-strong); }
.vcard h1 { font-size: 30px; letter-spacing: -0.05em; text-align: center; margin-bottom: 8px; }
.vcard .lead { margin: 0 auto 26px; font-size: 16px; line-height: 1.5; text-align: center; }
.codebox { padding: 20px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--accent) 60%, transparent); background: var(--accent-soft); text-align: center; margin-bottom: 14px; }
.codebox code { display: block; font-family: var(--mono); font-size: 17px; font-weight: 600; color: #d6e3ff; word-break: break-all; }
.who { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); margin-bottom: 14px; }
.who img { width: 52px; height: 52px; border-radius: 12px; background: var(--raised); }
.who b { display: block; font-size: 16px; color: var(--fg); }
.who span { color: var(--muted); font-size: 14px; }
.who .ok-tick { margin-left: auto; color: var(--ok); }
.ol { margin: 0 0 18px; padding-left: 20px; color: var(--body); display: grid; gap: 8px; font-size: 15px; }
.err { color: var(--bad); font-size: 14px; margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: rgba(248, 113, 113, 0.07); border: 1px solid rgba(248, 113, 113, 0.28); }
.success-mark { width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 20px; display: grid; place-items: center; background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.4); color: var(--ok); font-size: 30px; animation: pop 0.5s var(--ease); }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; animation: spin 0.7s linear infinite; }
.btn.is-loading .ic { animation: spin 0.7s linear infinite; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; margin: 18px 0; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.btn-roblox { background: #fff; color: #000; }
.btn-roblox:hover { background: #e8e8e8; transform: translateY(-1px); }

.setup-list ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.setup-list li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 10px 6px; border-radius: 12px; opacity: 0.7; }
.setup-list li.next { opacity: 1; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-strong); }
.setup-list li.done { opacity: 0.6; }
.step-mark { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; background: var(--selected); color: var(--muted); border: 1px solid var(--line-strong); }
.setup-list li.next .step-mark { background: var(--accent); border-color: var(--accent); color: #fff; }
.setup-list li.done .step-mark { background: rgba(52, 196, 107, 0.16); border-color: rgba(52, 196, 107, 0.45); color: #34c46b; }
.step-mark .ic { width: 15px; height: 15px; }
.step-body b { color: var(--fg); }
.step-body p { margin: 2px 0 8px; color: var(--muted); font-size: 14px; }
.step-body .row { flex-wrap: wrap; gap: 8px; }
.callout.approve { display: grid; gap: 10px; }
.callout.approve p { margin: 0; color: var(--body); }
.callout.approve .row { flex-wrap: wrap; gap: 8px; }
.owner-stack { grid-template-columns: minmax(0, 1fr); }
.owner-stack > * { min-width: 0; }
.owner-kpis { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.support-banner { display: flex; align-items: center; gap: 10px; padding: 11px 14px; margin-bottom: 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); color: var(--fg); font-size: 14px; }
.support-banner .ic { color: var(--accent-strong); flex: none; }

.dash-side a .badge-new { margin-left: auto; padding: 2px 6px; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; }
.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.map-note { font-size: 13px; color: var(--muted); } .map-note[hidden], .map-cal[hidden] { display: none; }
.map-note.warn { padding: 9px 12px; border-radius: 10px; color: var(--warn, #fbbf24); background: rgba(251, 191, 36, 0.08); border: 1px solid rgba(251, 191, 36, 0.3); }
.map-cal { display: grid; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); font-size: 13.5px; }
.map-cal .row { flex-wrap: wrap; gap: 6px; }
.map-wrap.calibrating { cursor: crosshair; box-shadow: 0 0 0 2px var(--accent); }
.pin-ghost { position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2px dashed #fff; background: rgba(76, 141, 255, 0.35); transform: translate(-50%, -50%) scale(var(--inv, 1)); pointer-events: none; z-index: 5; }
.map-origin { width: auto; min-width: 200px; height: 38px; font-size: 13px; }
.map-main { min-width: 0; display: grid; gap: 12px; }
.map-wrap {
  position: relative; width: min(100%, 78vh); aspect-ratio: 1; margin: 0 auto; overflow: hidden; border-radius: 16px; border: 1px solid var(--line-strong);
  background: radial-gradient(circle at 50% 50%, #0f1a1f, #070b0d); touch-action: none; cursor: grab; outline: none; user-select: none;
}
.map-wrap:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.map-wrap.dragging { cursor: grabbing; }
.map-stage { position: absolute; inset: 0; transform-origin: 0 0; }
.cmap .map-stage { inset: auto; left: 0; top: 0; }
.map-stage.animating { transition: transform 0.45s var(--ease), width 0.45s var(--ease), height 0.45s var(--ease); }
.map-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; -webkit-user-drag: none; }
.map-pins { position: absolute; inset: 0; }
.map-zones { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.map-zones .zone { fill: rgba(52, 196, 107, 0.16); stroke: #34c46b; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.map-zones .zone.off { fill: rgba(180, 180, 189, 0.08); stroke: #b4b4bd; stroke-dasharray: 6 4; }
.map-zones .zone.picked { fill: rgba(52, 196, 107, 0.28); stroke-width: 3; }
.map-zones .zone.draft { fill: rgba(76, 141, 255, 0.18); stroke: #4c8dff; stroke-dasharray: 6 4; }
.map-zones polyline.zone.draft { fill: none; }
.map-zone-marks { position: absolute; inset: 0; pointer-events: none; }
.zone-label { position: absolute; transform: translate(-50%, -50%) scale(var(--inv, 1)); padding: 2px 8px; border-radius: 6px; background: rgba(10, 40, 22, 0.82); color: #9ff0bd; font-size: 11px; font-weight: 600; white-space: nowrap; }
.zone-label.off { background: rgba(0, 0, 0, 0.7); color: var(--muted); }
.zone-corner { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #4c8dff; border: 2px solid #fff; transform: translate(-50%, -50%) scale(var(--inv, 1)); }
.map-zones-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; min-width: 0; }
.map-zones-head { display: flex; align-items: center; gap: 8px; color: var(--fg); white-space: nowrap; }
.map-zones-head .grow, .map-cal .grow { min-width: 0; }
.map-zones-head .ic { width: 18px; height: 18px; color: #34c46b; }
.map-zone { display: grid; gap: 8px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); }
.map-zone.picked { border-color: #34c46b; }
.map-zone.off { opacity: 0.7; }
.map-zone-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.map-zone-name { flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: var(--fg); font-weight: 600; font-size: 14px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-zone-name:hover { text-decoration: underline; }
.map-zone-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; border: 0; background: none; color: var(--muted); }
.map-zone-icon:hover { background: var(--raised); color: var(--fg); }
.map-zone-icon .ic { width: 15px; height: 15px; }
.map-zone-flow { display: grid; gap: 4px; min-width: 0; }
.map-zone-flow small { color: var(--faint); font-size: 12px; }
.map-zone-flow .select { width: 100%; min-width: 0; height: 36px; font-size: 13px; }
.map-zone-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 640px) { .map-zone-form { grid-template-columns: 1fr; } }
.pin {
  position: absolute; width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; z-index: 1;
  transform: translate(-50%, -50%) scale(var(--inv, 1)); transition: left 3s linear, top 3s linear;
}
.pin[hidden] { display: none; }
.pin-dot { position: absolute; inset: 6px; border-radius: 50%; background: var(--c, #b4b4bd); border: 2px solid #0a0a0b; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); transition: transform 0.15s var(--ease), box-shadow 0.15s; }
.pin:hover { z-index: 3; } .pin:hover .pin-dot { transform: scale(1.25); }
.pin.staff .pin-dot { border-color: #fff; }
.pin.wanted .pin-dot { box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.55), 0 2px 6px rgba(0, 0, 0, 0.6); animation: pin-pulse 1.6s ease-in-out infinite; }
.pin.picked { z-index: 4; } .pin.picked .pin-dot { transform: scale(1.5); border-color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 45%, transparent), 0 4px 14px rgba(0, 0, 0, 0.7); }
.pin-label { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: -3px; padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.8); color: #fff; font-size: 11px; font-weight: 500; white-space: nowrap; display: none; pointer-events: none; }
.pin:hover .pin-label, .pin.picked .pin-label, .map-wrap[data-zoom='in'] .pin-label { display: block; }
@keyframes pin-pulse { 50% { box-shadow: 0 0 0 6px rgba(248, 113, 113, 0.18), 0 2px 6px rgba(0, 0, 0, 0.6); } }
.map-controls { position: absolute; right: 12px; top: 12px; z-index: 6; display: grid; gap: 6px; }
.map-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line-strong); background: rgba(10, 10, 12, 0.82); color: var(--fg); font-size: 20px; line-height: 1; backdrop-filter: blur(6px); }
.map-btn:hover { background: #f5f5f5; color: #000; }
.map-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 6; padding: 6px 12px; border-radius: 999px; background: rgba(10, 10, 12, 0.82); color: var(--muted); font-size: 12.5px; pointer-events: none; transition: opacity 0.4s; }
.map-hint.gone { opacity: 0; }
.map-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.map-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--raised); color: var(--fg); font-size: 13px; transition: opacity 0.15s, background 0.15s; }
.map-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.map-chip.off { opacity: 0.45; } .map-chip.off i { background: transparent; box-shadow: inset 0 0 0 2px var(--c); }
.map-chip:hover { background: var(--selected); }
.map-side { display: grid; gap: 14px; min-width: 0; }
.map-card { padding: 18px; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--panel); display: grid; gap: 14px; }
.map-card-empty { display: grid; justify-items: center; gap: 6px; padding: 18px 8px; text-align: center; }
.map-card-empty .ic { width: 26px; height: 26px; color: var(--faint); }
.map-card-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.map-card-head .pav { width: 56px; height: 56px; border-radius: 14px; }
.map-card-name { display: block; font-size: 17px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 4px; }
.map-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.map-tele { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.map-tele > b { font-size: 13px; color: var(--fg); }
.map-list-panel { max-height: 360px; overflow: auto; padding: 6px; }
.map-row { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 4px 10px; width: 100%; padding: 8px 10px; border-radius: 10px; border: 0; background: none; color: var(--body); text-align: left; font-size: 14px; }
.map-row:hover { background: rgba(255, 255, 255, 0.05); } .map-row.picked { background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-strong); }
.map-row i { width: 9px; height: 9px; border-radius: 50%; }
.map-row-name { color: var(--fg); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-row small { grid-column: 2 / 4; color: var(--faint); font-size: 12px; margin-top: -2px; }
@media (max-width: 1100px) { .map-layout { grid-template-columns: 1fr; } .map-wrap { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .pin { transition: none; } .pin.wanted .pin-dot { animation: none; } .map-stage.animating { transition: none; } }

.staff-group { margin: 40px 0 14px; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); }
.staff-group:first-of-type { margin-top: 8px; }
.staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 8px; }
.staff-card { display: grid; justify-items: start; gap: 6px; padding: 24px; }
.staff-av { width: 84px; height: 84px; border-radius: 22px; object-fit: cover; background: var(--raised); margin-bottom: 10px; }
.staff-av-mark { display: grid; place-items: center; background: var(--accent); }
.staff-card h3 { font-size: 20px; letter-spacing: -0.03em; }
.staff-discord { color: var(--muted); font-size: 14px; }
.staff-discord b { color: var(--fg); font-weight: 500; }
.staff-bio { color: var(--body); font-size: 14.5px; }
.staff-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.footer { border-top: 1px solid var(--line); padding: 44px 0 36px; margin-top: 56px; color: var(--faint); font-size: 14px; }
.footer-inner { display: flex; justify-content: space-between; gap: 28px; flex-wrap: wrap; align-items: flex-start; }
.footer .brand { font-size: 24px; }
.footer p { margin-top: 10px; max-width: 360px; }
.footer-links { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-links div { display: grid; gap: 8px; align-content: start; }
.footer-links h4 { color: var(--fg); font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.footer-links a:hover { color: var(--fg); }
.prose { max-width: 700px; margin: 0 auto; padding: 64px 0 100px; }
.prose h1 { font-size: 46px; letter-spacing: -0.055em; margin-bottom: 8px; line-height: 1; }
.prose h2 { font-size: 22px; letter-spacing: -0.03em; margin: 38px 0 8px; }
.prose p, .prose li { color: var(--body); }
.prose p { margin-bottom: 12px; }
.notfound { text-align: center; padding: 140px 0; }
.notfound h1 { font-size: clamp(90px, 18vw, 180px); letter-spacing: -0.07em; line-height: 0.9; }

.compare { width: 100%; border-collapse: collapse; font-size: 15px; }
.compare th, .compare td { text-align: left; padding: 15px 20px; border-bottom: 1px solid var(--line); }
.compare th { color: var(--faint); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; }
.compare tr:last-child td { border-bottom: 0; }
.compare td:first-child { color: var(--fg); }
.compare td.hi { color: var(--accent-strong); font-weight: 600; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.plan { padding: 30px; }
.plan.plan h3 { font-size: 22px; letter-spacing: -0.03em; }
.plan .price { font-size: 44px; font-weight: 700; letter-spacing: -0.05em; color: var(--fg); margin: 14px 0 4px; line-height: 1; }
.plan ul { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 11px; }
.plan li { display: flex; gap: 10px; align-items: center; color: var(--body); font-size: 15px; }
.plan li .ic { color: var(--accent-strong); }

.spacer { height: 56px; }
.section-flush { padding-top: 0; }
.code-head-mid { border-top: 1px solid var(--line); }
.fade-up[data-d='1'] { --d: 1; } .fade-up[data-d='2'] { --d: 2; } .fade-up[data-d='3'] { --d: 3; } .fade-up[data-d='4'] { --d: 4; }
.reveal[data-i='1'] { --i: 1; } .reveal[data-i='2'] { --i: 2; } .reveal[data-i='3'] { --i: 3; } .reveal[data-i='4'] { --i: 4; } .reveal[data-i='5'] { --i: 5; }
.display .w:nth-of-type(2) { --i: 1; } .display .w:nth-of-type(3) { --i: 2; } .display .w:nth-of-type(4) { --i: 3; } .display .w:nth-of-type(5) { --i: 4; }

@keyframes rise { from { opacity: 0; transform: translateY(0.45em); } to { opacity: 1; transform: none; } }
@keyframes drop { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes slide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.97); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
@keyframes press { 0% { transform: scale(1); } 40% { transform: scale(0.92); filter: brightness(1.3); } 100% { transform: scale(1); } }

@media (max-width: 1020px) {
  .grid-4, .kpis { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .watch, .two-col, .plans, .show { grid-template-columns: 1fr; }
  .show { gap: 36px; } .show.flip .show-text { order: 0; }
  .docs { grid-template-columns: 1fr; gap: 20px; }
  .docs-side { position: static; max-height: none; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .dash { grid-template-columns: 1fr; gap: 16px; }
  .dash-side { position: static; display: flex; align-items: center; overflow-x: auto; padding-bottom: 6px; gap: 6px; }
  .dash-side h4 { display: none; }
  .dash-side a { white-space: nowrap; padding: 8px 12px; }
}
@media (max-width: 640px) {
  .container { padding: 0 16px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .section { padding: 64px 0; }
  .hero { padding: 48px 0 80px; }
  .stat-value { font-size: 34px; }
  .vcard { padding: 22px; }
  .step span { display: none; }
  .banner { font-size: 12.5px; }
  .docs-side { grid-template-columns: 1fr; }
  .docs-body h1 { font-size: 40px; }
  .btn-lg { height: 48px; padding: 0 22px; }
  .cta { padding: 64px 20px; }
  .user-chip .uname { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .display .w, .fade-up, .reveal { opacity: 1 !important; transform: none !important; }
  .statement .w { color: var(--fg); }
  }

.vnote { margin-top: 18px; }
.vcard .stack-sm { display: grid; gap: 10px; }
.vcard .linklike { background: none; border: 0; color: var(--muted); font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; padding: 6px; }
.vcard .linklike:hover { color: var(--fg); }
.center-row { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.expires { font-variant-numeric: tabular-nums; }
.grow { flex: 1; min-width: 200px; }
.dash-main .who { margin-bottom: 14px; }
.dash-main .who .avatar { width: 52px; height: 52px; border-radius: 12px; }
.gate-field { text-align: left; max-width: 460px; margin: 0 auto 14px; }
.gate .err { max-width: 460px; margin: 0 auto 14px; }
.legend .lg-a { background: var(--accent-strong); } .legend .lg-b { background: var(--bad); }
.admin-wrap { padding-top: 40px; padding-bottom: 96px; }
#view .stack, .admin-wrap #view { display: grid; gap: 16px; }
.premium-table { margin-top: 14px; overflow: hidden; }
.premium-note { margin-top: 18px; }
.center-sub { margin-left: auto; margin-right: auto; text-align: center; }
.plan .row-between { margin-bottom: 0; }

.msg { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: var(--shadow-panel); max-width: 480px; }
.msg + .msg { margin-top: 12px; margin-left: 28px; }
.msg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.msg-av { width: 30px; height: 30px; border-radius: 50%; background: #000; border: 1px solid var(--line-strong); display: grid; place-items: center; flex: none; }
.msg-av img { width: 17px; height: 17px; }
.msg-name { font-size: 14px; font-weight: 600; color: var(--fg); }
.msg-tag { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 5px; margin-left: 8px; letter-spacing: 0.05em; color: var(--accent-strong); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.embed { border-left: 3px solid var(--accent); border-radius: 4px 10px 10px 4px; background: rgba(255, 255, 255, 0.03); padding: 14px 16px 15px; }
.embed.ok { border-left-color: var(--ok); }
.embed.quiet { border-left-color: var(--line-strong); }
.embed h4 { font-size: 15px; font-weight: 600; color: var(--fg); margin: 0 0 4px; letter-spacing: -0.01em; }
.embed p { font-size: 14px; line-height: 1.5; color: var(--body); margin: 0; }
.embed-meta { display: flex; gap: 28px; margin-top: 12px; font-size: 13.5px; color: var(--fg); }
.embed-meta b { display: block; color: var(--faint); font-size: 11px; font-weight: 500; margin-bottom: 1px; text-transform: uppercase; letter-spacing: 0.06em; }
.msg-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.msg-btn { padding: 7px 14px; border-radius: 8px; font-size: 13.5px; font-weight: 500; background: var(--raised); border: 1px solid var(--line-strong); color: var(--fg); }
.msg-btn.primary { background: var(--accent); border-color: transparent; color: #fff; }
.msg-btn.danger { color: var(--bad); }

.beta-tag { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1; padding: 4px 7px; border-radius: 6px; color: var(--warn); background: rgba(251, 191, 36, 0.08); border: 1px solid rgba(251, 191, 36, 0.35); }
.beta-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(251, 191, 36, 0.28); background: rgba(251, 191, 36, 0.05); color: #e5d6a8; font-size: 14px; line-height: 1.5; }
.beta-note .beta-tag { margin-top: 1px; flex: none; }
.beta-note b { color: var(--warn); font-weight: 600; }
.title-beta { vertical-align: middle; margin-left: 10px; position: relative; top: -2px; }

.methods { display: grid; gap: 12px; margin-bottom: 4px; }
.method-card { border: 1px solid var(--line-strong); border-radius: 14px; padding: 16px 18px 18px; background: var(--panel); text-align: left; transition: border-color 0.2s, background 0.2s; }
.method-card.recommended { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: linear-gradient(180deg, var(--accent-soft), var(--panel) 85%); }
.method-card[aria-disabled='true'] { opacity: 0.62; }
.method-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.method-top h3 { font-size: 16.5px; letter-spacing: -0.02em; }
.method-card > p { font-size: 14px; color: var(--muted); margin: 0 0 14px; line-height: 1.5; }
.tag { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.tag-new { color: var(--accent-strong); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.tag-legacy { color: var(--warn); background: rgba(251, 191, 36, 0.08); border-color: rgba(251, 191, 36, 0.32); }
.method-card .stack-sm { display: grid; gap: 10px; }
.method-note { font-size: 12.5px; color: var(--faint); margin-top: 10px; }

.price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 14px 0 4px; }
.price-row .price { margin: 0; }
.price-row small { font-size: 16px; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.price-or { color: var(--muted); font-size: 15px; margin-bottom: 4px; }
.price-or b { color: var(--fg); font-weight: 600; }
.plan-usage { display: grid; gap: 10px; }
.plan-usage .row-between b { color: var(--fg); }
.mini-plan { font-size: 12.5px; color: var(--faint); }
.how-buy { display: grid; gap: 12px; counter-reset: s; margin: 0; padding: 0; list-style: none; }
.how-buy li { display: flex; gap: 14px; align-items: flex-start; counter-increment: s; color: var(--body); }
.how-buy li::before { content: counter(s); flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: var(--accent-strong); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.how-buy b { color: var(--fg); font-weight: 600; }

.banner .beta-tag { margin-right: 2px; }
.beta-line { display: flex; align-items: center; gap: 10px; color: var(--body); }
.hero-note { margin-top: 20px; font-size: 14px; color: var(--faint); }
.hero-note b { color: var(--body); font-weight: 500; }
.pill-count .beta-tag { padding: 3px 6px; }
.teaser { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.teaser .panel { padding: 28px; }
.teaser h3 { font-size: 20px; letter-spacing: -0.03em; }
.teaser .big { font-size: 40px; font-weight: 700; letter-spacing: -0.05em; color: var(--fg); line-height: 1; margin: 16px 0 4px; }
.teaser .big small { font-size: 15px; color: var(--muted); font-weight: 500; letter-spacing: 0; }
.teaser p { color: var(--muted); font-size: 15px; }
.teaser .teaser .btn { margin-top: 20px; }
@media (max-width: 1020px) { .teaser { grid-template-columns: 1fr; } }

.premium-top { padding-bottom: 72px; }
.premium-top .section-head { margin-bottom: 40px; }
.title-beta { margin-left: 8px; vertical-align: 1px; }
.how .how-note { margin-top: 16px; padding-left: 40px; }
.how-buy a { text-decoration: underline; text-underline-offset: 3px; }
.faq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 14px 0; }
.faq h3 { font-size: 16px; letter-spacing: -0.02em; margin-bottom: 6px; }
.faq p { color: var(--muted); font-size: 14.5px; }
.premium-table { margin: 14px 0; overflow: hidden; }
.plan p.hint { margin: 2px 0 0; }
.plan b { color: var(--fg); font-weight: 600; }
@media (max-width: 760px) { .faq { grid-template-columns: 1fr; } }

.plan-card { display: grid; gap: 14px; }
.usage-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.usage-top b { font-size: 26px; letter-spacing: -0.04em; color: var(--fg); font-variant-numeric: tabular-nums; }
.usage-top span { color: var(--muted); font-size: 14px; }
.quota.full > div { background: var(--bad); }
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.inline-form .input { max-width: 260px; }
.inline-form .select { width: auto; min-width: 120px; }

.gate-hint { margin-top: 16px; }
.cad-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cad-head-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cad-head-title h1 { font-size: 26px; letter-spacing: -0.03em; line-height: 1.1; }
.cad-head-title p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.cad-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-strong); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); flex: none; }
.cad-bar { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 6px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.cad-tabs { display: flex; gap: 2px; flex-wrap: wrap; min-width: 0; }
.cad-tabs button { position: relative; display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; padding: 7px 11px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--muted); transition: background 0.15s, color 0.15s; }
.cad-tabs button:hover { color: var(--fg); background: rgba(255, 255, 255, 0.04); }
.cad-tabs button[aria-pressed='true'] { background: var(--selected); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-strong); }
.cad-tabs button[aria-pressed='true'] .ic { color: var(--accent-strong); }
.cad-tabs .ic { width: 15px; height: 15px; }
.cad-tab-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.6); animation: ping 2s infinite; }
.cad-me { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 0 4px; }
.cad-me .hint { font-size: 12.5px; }
.cad-me-unit { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-weight: 600; color: var(--fg); font-size: 13px; }
.cad-me-unit i { width: 8px; height: 8px; border-radius: 50%; }
.cad-status-seg button { padding: 5px 9px; font-size: 12px; }
.cad-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.cad-shell.with-radio { grid-template-columns: minmax(0, 1fr) 290px; }
.cad-rail { position: sticky; top: 76px; }
.cad-rail[hidden] { display: none; }
body.page-full #side, body.page-full .footer { display: none; }
body.cx-wide .container { max-width: 1640px; }
body.page-full .dash { grid-template-columns: minmax(0, 1fr); padding-top: 18px; }
body.page-full .container { max-width: none; padding-left: 24px; padding-right: 24px; }
.cad-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cad-tile { display: grid; gap: 4px; align-content: start; padding: 14px 16px; }
.cad-tile b { font-size: 26px; color: var(--fg); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.cad-tile small { color: var(--faint); font-size: 12.5px; }
.cad-tile .pill { justify-self: start; }
.cad-dispatch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.cad-calls { display: grid; gap: 10px; }
.cad-call { display: grid; gap: 8px; padding: 14px 16px; border-radius: 12px; background: var(--raised); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); }
.cad-call.p1 { border-left-color: var(--bad); }
.cad-call.p2 { border-left-color: var(--warn); }
.cad-call.p3 { border-left-color: var(--accent); }
.cad-call[data-status='pending'] { background: color-mix(in srgb, var(--warn) 4%, var(--raised)); }
.cad-call-head, .cad-call-foot { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cad-call-title { display: inline-flex; gap: 8px; align-items: baseline; border: 0; background: none; padding: 0; color: var(--fg); font-size: 15px; text-align: left; }
.cad-call-title .mono { color: var(--faint); font-size: 13px; }
.cad-call-title:hover b { text-decoration: underline; }
.cad-call-meta { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: 13px; margin: 0; }
.cad-call-meta .ic { width: 14px; height: 14px; }
.cad-call-desc { margin: 0; font-size: 14px; color: var(--body); }
.cad-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 7px; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--fg); background: var(--selected); border: 1px solid var(--line-strong); }
.cad-chip.s-available { border-color: rgba(74, 222, 128, 0.35); }
.cad-chip.s-busy { border-color: rgba(251, 191, 36, 0.4); }
.cad-chip.s-enroute { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.cad-chip.s-onscene { border-color: rgba(248, 113, 113, 0.45); }
.cad-unit { display: grid; gap: 2px; }
.cad-unit small { color: var(--faint); }
.cad-units td { padding: 10px 12px; }
.select-sm { height: 34px; font-size: 13px; padding: 0 30px 0 10px; width: auto; }
.select-sm.s-available { color: var(--ok); }
.select-sm.s-busy { color: var(--warn); }
.select-sm.s-enroute { color: var(--accent-strong); }
.select-sm.s-onscene { color: var(--bad); }
.linkish { border: 0; background: none; padding: 0; color: var(--accent-strong); font-weight: 600; }
.linkish:hover { text-decoration: underline; }
.icon-btn { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--raised); color: var(--muted); }
.icon-btn:hover { color: var(--fg); background: var(--selected); }
.icon-btn .ic { width: 13px; height: 13px; }
.cad-assigned { gap: 4px; }
.cad-assign .select { width: auto; min-width: 220px; flex: 1; }
.cad-assign label { gap: 6px; }
.cad-detail p { margin: 0; }
.cad-detail .section-label { margin: 4px 0 0; }
.cad-notes { display: grid; gap: 8px; max-height: 240px; overflow-y: auto; }
.cad-note { padding: 8px 10px; border-radius: 9px; background: var(--raised); }
.cad-note p { color: var(--body); font-size: 14px; }
.cad-form .field-row { gap: 12px; }
.cad-person { display: grid; gap: 14px; }
.cad-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cad-facts > div { display: grid; gap: 2px; }
.cad-facts b { color: var(--fg); font-weight: 600; font-size: 14px; }
.cad-flag { margin-bottom: 8px; }
.cad-list { display: grid; gap: 10px; }
.cad-item { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 12px 14px; border-radius: 12px; background: var(--raised); border: 1px solid var(--line); }
.cad-item p { margin: 6px 0 4px; font-size: 14px; }
.cad-split { align-items: start; }
.cad-voided td { opacity: 0.5; }
.cad-body .muted, .cad-detail .muted { font-size: 14px; }
.cad-color { white-space: nowrap; }
.lplate { display: inline-grid; justify-items: center; min-width: 92px; padding: 3px 10px 4px; border-radius: 6px; background: linear-gradient(#fbfbf8, #e7e6df); border: 2px solid #22252b; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.4); color: #13213f; line-height: 1; }
.lplate small { font-size: 8px; font-weight: 800; letter-spacing: 0.24em; color: #1f4fbf; }
.lplate b, .table td .lplate b { font-family: var(--mono); font-size: 17px; letter-spacing: 0.08em; color: #131c33; margin-top: 2px; white-space: nowrap; }
.lplate.sm { min-width: 66px; padding: 2px 7px 3px; border-width: 1.5px; }
.lplate.sm small { font-size: 6.5px; }
.lplate.sm b { font-size: 12.5px; }
.lplate.hot { border-color: var(--bad); box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.35); }
.cad-vehicles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.cad-vehicle { display: grid; gap: 10px; align-content: start; padding: 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.cad-vehicle.bolo { border-color: rgba(248, 113, 113, 0.5); background: color-mix(in srgb, var(--bad) 5%, var(--panel)); }
.cad-vehicle-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cad-vehicle-name { color: var(--fg); font-size: 15px; }
.cad-vehicle-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; font-size: 13px; }
.cad-vehicle-facts > div { display: grid; gap: 1px; min-width: 0; }
.cad-vehicle-facts small { color: var(--faint); font-size: 11.5px; }
.cad-vehicle-facts span { color: var(--body); overflow-wrap: anywhere; }
.cad-map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 14px; align-items: start; }
.cad-map-side { display: grid; gap: 6px; max-height: 76vh; overflow-y: auto; padding: 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.cad-map-side .section-label { margin: 6px 2px 2px; }
.cad-map-call { display: grid; gap: 2px; text-align: left; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); border-left: 3px solid var(--line-strong); background: var(--raised); color: var(--body); font-size: 13px; }
.cad-map-call b { color: var(--fg); font-size: 13.5px; }
.cad-map-call small { color: var(--faint); }
.cad-map-call.p1 { border-left-color: var(--bad); } .cad-map-call.p2 { border-left-color: var(--warn); } .cad-map-call.p3 { border-left-color: var(--accent); }
.cad-map-unit { display: grid; grid-template-columns: 8px auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; border: 0; background: none; color: var(--body); font-size: 13px; text-align: left; }
.cad-map-unit:hover:not(:disabled) { background: var(--raised); }
.cad-map-unit i { width: 8px; height: 8px; border-radius: 50%; }
.cad-map-unit b { color: var(--fg); }
.cad-map-unit small { color: var(--faint); }
.cad-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.cad-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cad-legend i { width: 9px; height: 9px; border-radius: 50%; }
.cad-legend i.sq { border-radius: 2px; transform: rotate(45deg); }
.cad-legend i.ring { background: none; border: 2px solid; width: 10px; height: 10px; }
.cad-legend i.sq.panic { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.35); }
.cmap { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 14px; border: 1px solid var(--line-strong); background: radial-gradient(circle at 50% 50%, #0f1a1f, #070b0d); touch-action: none; cursor: grab; outline: none; user-select: none; }
.cmap.dragging { cursor: grabbing; }
.cmap.picking { cursor: crosshair; box-shadow: 0 0 0 2px var(--accent); }
.cmap-pins, .cmap-rings { position: absolute; inset: 0; }
.cmap-rings { pointer-events: none; }
.cmap-ring { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); border: 1px dashed rgba(192, 132, 252, 0.7); background: rgba(192, 132, 252, 0.08); }
.cmap-ring.hot { border: 1px solid #f87171; background: rgba(248, 113, 113, 0.16); animation: pin-pulse 1.6s ease-in-out infinite; }
.cmap-controls { position: absolute; right: 10px; top: 10px; display: grid; gap: 6px; z-index: 6; }
.cmap-pin { position: absolute; display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: #fff; transform: translate(-50%, -50%) scale(var(--inv, 1)); transform-origin: center; transition: left 2s linear, top 2s linear; z-index: 2; }
button.cmap-pin { cursor: pointer; }
.cmap-dot { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--c); border: 2px solid #0a0a0b; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); }
.cmap-label { position: absolute; left: 50%; top: calc(100% + 2px); transform: translateX(-50%); padding: 1px 6px; border-radius: 5px; background: rgba(0, 0, 0, 0.78); color: #fff; font-size: 10.5px; font-weight: 700; font-family: var(--mono); white-space: nowrap; pointer-events: none; }
.cmap-pin.k-player .cmap-dot { width: 8px; height: 8px; border-width: 1.5px; }
.cmap-pin.k-player.flag .cmap-dot { box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.5); }
.cmap-pin.k-unit { z-index: 6; }
.cmap-pin.k-unit .cmap-dot { width: 15px; height: 15px; border-radius: 50% 50% 50% 0; transform: rotate(calc(var(--r) - 45deg)); border-color: #fff; }
.cmap-badge { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c); border: 2.5px solid var(--s); box-shadow: 0 0 0 1.5px #0a0a0b, 0 2px 8px rgba(0, 0, 0, 0.7); color: #fff; }
.cmap-badge .ic { width: 12px; height: 12px; stroke-width: 2.4; }
.cmap-pin.k-unit .cmap-label { background: color-mix(in srgb, var(--c) 70%, #000); }
.cmap-pin.k-unit.panic { z-index: 8; }
.cmap-pin.k-call .cmap-label { top: auto; bottom: calc(100% + 3px); }
.cmap-pin.k-unit.panic .cmap-badge { background: #ef4444; border-color: #fff; animation: panic-pulse 0.9s ease-out infinite; }
.cmap-pin.k-unit.panic .cmap-label { background: #b91c1c; }
.cmap-pin.k-call.panic { z-index: 6; }
.cmap-pin.k-call.panic .cmap-dot { background: #ef4444; animation: panic-pulse 0.9s ease-out infinite; }
.cmap-pin.k-call.panic .cmap-label { background: #b91c1c; }
.cad-panic { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 9000; display: flex; align-items: center; gap: 14px; width: min(640px, calc(100vw - 32px)); padding: 14px 16px; border-radius: 14px; background: #2a0b0b; border: 1.5px solid #ef4444; color: #fff; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.25), 0 18px 40px rgba(0, 0, 0, 0.6); animation: panic-flash 1s ease-in-out infinite alternate; }
.cad-panic-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #ef4444; animation: panic-pulse 0.9s ease-out infinite; }
.cad-panic-icon .ic { width: 20px; height: 20px; }
.cad-panic-text { display: grid; gap: 2px; flex: 1; min-width: 0; font-size: 13.5px; }
.cad-panic-text b { font-family: var(--mono); letter-spacing: 0.04em; color: #fecaca; }
.cad-panic .btn-ghost { color: #fff; }
.cad-panic-go { background: #ef4444; color: #fff; border-color: #ef4444; }
@keyframes panic-flash { from { background: #2a0b0b; } to { background: #4a1010; } }
@media (max-width: 560px) { .cad-panic { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .cad-panic, .cad-panic-icon, .cmap-pin.panic .cmap-badge, .cmap-pin.panic .cmap-dot { animation: none; } }
@keyframes panic-pulse { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.8); } 100% { box-shadow: 0 0 0 16px rgba(239, 68, 68, 0); } }
.cmap-pin.k-call { z-index: 5; }
.cmap-pin.k-call .cmap-dot { width: 15px; height: 15px; border-radius: 3px; transform: rotate(45deg); border-color: #fff; }
.cmap-pin.k-call.pending .cmap-dot { animation: pin-pulse 1.4s ease-in-out infinite; }
.cmap-pin.k-camera { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #3b1d5c; border: 1.5px solid #c084fc; color: #e9d5ff; z-index: 3; }
.cmap-pin.k-camera .ic { width: 13px; height: 13px; }
.cmap-pin.k-trail { z-index: 1; }
.cmap-pin.k-trail .cmap-dot { width: 5px; height: 5px; border: 0; opacity: 0.6; box-shadow: none; }
.cad-feeds { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.cad-feed { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #050607; }
.cad-feed.hot { border-color: var(--bad); box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.3); }
.cad-feed-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.cad-feed-screen .cmap { position: absolute; left: 0; top: 50%; transform: translateY(-50%); border: 0; border-radius: 0; filter: grayscale(0.85) contrast(1.15) brightness(0.85); }
.cad-feed-screen::after, .cad-bodycam-vignette { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.6)); }
.cad-feed-hud { position: absolute; left: 8px; right: 8px; top: 7px; display: flex; gap: 8px; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 2px #000; z-index: 2; }
.rec { display: inline-flex; align-items: center; gap: 5px; color: #fff; font-weight: 700; }
.rec::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #ef4444; animation: pulse 1.2s ease-in-out infinite; }
.cad-feed-read { position: absolute; left: 8px; bottom: 8px; display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; background: rgba(0, 0, 0, 0.72); font-size: 11.5px; color: #e5e5e5; z-index: 2; }
.cad-feed-foot { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 13px; background: var(--panel); }
.cad-feed-foot b { color: var(--fg); }
.cad-feed-name { display: grid; gap: 1px; flex: 1; min-width: 0; }
.cad-feed-name small { color: var(--faint); font-size: 12px; }
.cad-feed-hud span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; }
.cad-cam-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 14px; align-items: start; }
.cad-hot-row td { background: rgba(248, 113, 113, 0.06); }
.cad-cam-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.cad-cam-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--raised); color: var(--body); font-size: 13px; }
.cad-cam-chip i { width: 8px; height: 8px; border-radius: 50%; }
.cad-cam-chip b { color: var(--fg); }
.cad-cam-chip small { color: var(--faint); }
.cad-cam-chip[aria-pressed='true'] { border-color: var(--accent); background: var(--accent-soft); }
.cad-bodycam-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.cad-bodycam { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; border: 1px solid #222; background: #000; }
.cad-bodycam .cmap { position: absolute; left: 0; top: 50%; transform: translateY(-50%); border: 0; border-radius: 0; filter: saturate(0.55) contrast(1.2) brightness(0.9) sepia(0.15); }
.cad-bodycam-vignette { z-index: 1; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.85)); }
.cad-bodycam-hud { position: absolute; left: 12px; right: 12px; display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; color: #f5f5f5; text-shadow: 0 1px 2px #000; z-index: 2; }
.cad-bodycam-hud.top { top: 10px; }
.cad-bodycam-hud.bottom { bottom: 10px; color: #fde68a; }
.cad-bodycam-cross { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; z-index: 2; pointer-events: none; }
.cad-near { display: grid; gap: 4px; padding: 8px 10px; border-radius: 10px; background: var(--raised); font-size: 13px; }
.cad-near b { color: var(--fg); }
.cad-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 4px; vertical-align: -1px; margin-right: 6px; border: 1px solid var(--line-strong); }

@container cad (max-width: 860px) { .cad-map-layout, .cad-cam-layout, .cad-bodycam-layout { grid-template-columns: 1fr; } .cad-map-side { max-height: none; } }
@container cad (max-width: 620px) { .cad-dispatch { grid-template-columns: 1fr; } }
.cad-body { container: cad / inline-size; }
@media (max-width: 1100px) { .cad-shell.with-radio { grid-template-columns: 1fr; } .cad-rail { position: static; order: -1; } .cad-map-side { max-height: none; } }
@media (max-width: 860px) { .cad-tiles, .cad-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cad-split { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .cad-tiles, .cad-facts { grid-template-columns: 1fr; } .cad-assign .select { min-width: 0; width: 100%; } }

.kind { display: inline-flex; align-items: center; justify-content: center; min-width: 66px; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; border: 1px solid transparent; font-family: var(--mono); }
.k-join { color: var(--ok); background: rgba(74, 222, 128, 0.09); }
.k-leave { color: var(--muted); background: rgba(255, 255, 255, 0.06); }
.k-kill { color: var(--bad); background: rgba(248, 113, 113, 0.1); }
.k-command { color: var(--accent-strong); background: var(--accent-soft); }
.k-modcall { color: var(--warn); background: rgba(251, 191, 36, 0.1); }
.k-alert { color: #f0abfc; background: rgba(217, 70, 239, 0.1); }
.k-case { color: #67e8f9; background: rgba(34, 211, 238, 0.09); }

.team { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--body); white-space: nowrap; }
.team::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.team-police::before { background: #60a5fa; } .team-sheriff::before { background: #34d399; } .team-fire::before { background: #f87171; }
.team-dot::before, .team-dot-t::before { background: #fb923c; } .team-civilian::before { background: #a1a1aa; }
.team-jail::before { background: #fbbf24; } .team-dispatch::before { background: #c084fc; }

.stars { color: var(--warn); letter-spacing: 1px; font-size: 13px; white-space: nowrap; }
.pav { width: 30px; height: 30px; border-radius: 8px; background: var(--raised); object-fit: cover; flex: none; }
.pname { display: flex; align-items: center; gap: 10px; min-width: 0; }
.name-line { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; }
.name-line .pill { flex: none; }
.pname b { color: var(--fg); font-weight: 600; white-space: nowrap; }
.pname small { display: block; color: var(--faint); font-size: 12px; font-family: var(--mono); }
.sample-tag { font-size: 11px; font-weight: 600; color: var(--faint); padding: 2px 8px; border-radius: 999px; border: 1px dashed var(--line-strong); letter-spacing: 0.02em; }

.hero { min-height: auto; padding-bottom: 56px; }
.marquee { overflow: hidden; margin-top: 64px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.marquee-track { display: flex; gap: 12px; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); color: var(--muted); font-size: 13.5px; white-space: nowrap; }
.chip .ic { color: var(--accent-strong); font-size: 14px; }

.mock-wrap { position: relative; max-width: 1020px; margin: 0 auto; padding: 0 24px; margin-top: -8px; }
.mock { overflow: hidden; }
.mock-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); }
.mock-bar .lights { display: flex; gap: 6px; }
.mock-bar .lights i { width: 10px; height: 10px; border-radius: 50%; background: var(--selected); border: 1px solid var(--line-strong); }
.mock-title { font-weight: 600; color: var(--fg); font-size: 14px; letter-spacing: -0.01em; }
.mock-bar .sample-tag { margin-left: auto; }
.mock-body { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; }
.mock-left { padding: 18px; border-right: 1px solid var(--line); display: grid; gap: 14px; align-content: start; }
.mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mini { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--canvas); }
.mini small { display: block; color: var(--faint); font-size: 12px; }
.mini b { display: block; font-size: 26px; letter-spacing: -0.04em; color: var(--fg); font-variant-numeric: tabular-nums; line-height: 1.15; }
.spark { width: 100%; height: 110px; }
.spark path.l { fill: none; stroke: var(--accent-strong); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark path.a { fill: url(#sparkFill); }
.spark .stop-a { stop-color: var(--accent); stop-opacity: 0.3; } .spark .stop-b { stop-color: var(--accent); stop-opacity: 0; }
.mock-teams { display: flex; gap: 6px; height: 8px; border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, 0.05); }
.mock-teams i { display: block; height: 100%; transition: width 0.8s var(--ease); }
.mock-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--muted); }
.mock-feed { padding: 10px; display: flex; flex-direction: column; gap: 2px; min-height: 330px; overflow: hidden; }
.ev { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; font-size: 13.5px; animation: slide 0.5s var(--ease); min-width: 0; }
.ev:nth-child(odd) { background: rgba(255, 255, 255, 0.025); }
.ev .txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--body); }
.ev .txt b { color: var(--fg); font-weight: 600; }
.ev .when { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feature { padding: 22px; display: grid; gap: 12px; align-content: start; }
.feature h3 { font-size: 17px; letter-spacing: -0.02em; font-weight: 600; }
.feature p { color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.feature .icon-tile { transition: transform 0.4s var(--ease), border-color 0.3s; }
.feature:hover .icon-tile { transform: translateY(-3px) rotate(-6deg); border-color: var(--accent); }

.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: f; position: relative; }
.flow-step { padding: 24px; display: grid; gap: 10px; align-content: start; counter-increment: f; }
.flow-step::before { content: counter(f); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: var(--accent-strong); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.flow-step h3 { font-size: 18px; letter-spacing: -0.02em; }
.flow-step p { color: var(--muted); font-size: 14.5px; }

.free-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.free-band .panel { padding: 22px; }
.free-band b { display: block; font-size: 38px; letter-spacing: -0.05em; color: var(--fg); line-height: 1; margin-bottom: 8px; font-weight: 700; }
.free-band span { color: var(--muted); font-size: 14.5px; }

.server-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.server-card { padding: 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; transition: transform 0.3s var(--ease), border-color 0.25s; }
.server-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.server-card .srv { padding: 0; }
.server-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mini-stats { display: flex; gap: 18px; color: var(--muted); font-size: 13.5px; }
.mini-stats b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }

.crumbs { display: flex; align-items: center; gap: 8px; color: var(--faint); font-size: 14px; margin-bottom: 4px; }
.crumbs a:hover { color: var(--fg); }
.view-enter { animation: pop 0.35s var(--ease); }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.toolbar .input, .toolbar .select { width: auto; min-width: 180px; }
.toolbar .grow { flex: 1; }
.search { position: relative; flex: 1; min-width: 200px; }
.search .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.search .input { padding-left: 36px; width: 100%; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-row .field { margin-bottom: 16px; }
.num { font-variant-numeric: tabular-nums; }
.pill-gray { color: var(--muted); }
.in-game-ok { color: var(--ok); } .in-game-bad { color: var(--bad); } .in-game-skip { color: var(--faint); }
.case-reason { max-width: 380px; white-space: normal; color: var(--body); }
.case-reason small { display: block; color: var(--faint); }
.case-table th, .case-table td { padding-left: 12px; padding-right: 12px; }
.case-table td { padding-top: 14px; padding-bottom: 14px; }
.case-table th:first-child, .case-table td:first-child { padding-left: 16px; }
.case-table th:last-child, .case-table td:last-child { padding-right: 16px; }
.case-table .case-num { width: 1%; white-space: nowrap; color: var(--faint); font-variant-numeric: tabular-nums; }
.case-wrap { container: cases / inline-size; }
.case-type-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.case-type-line b { white-space: nowrap; }
.case-type-line .pill { padding: 2px 8px; font-size: 11.5px; }
.case-table td.case-reason { min-width: 150px; max-width: 360px; line-height: 1.45; overflow-wrap: anywhere; }
.case-table .case-reason small { margin-top: 3px; font-size: 12px; }
.case-table .case-mod, .case-table .case-game, .case-table .case-when { white-space: nowrap; }
.case-table .case-player .pname b { display: block; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.case-table .case-actions { width: 1%; padding-left: 8px; }
@container cases (max-width: 860px) {
  .case-table thead { display: none; }
  .case-table, .case-table tbody { display: block; }
  .case-table tbody tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "num type type actions" "player player player player" "reason reason reason reason" "mod mod game when"; align-items: center; gap: 8px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .case-table tbody tr:last-child { border-bottom: 0; }
  .case-table td, .case-table td:first-child, .case-table td:last-child { display: block; padding: 0; border: 0; max-width: none; min-width: 0; }
  .case-table .case-num { grid-area: num; width: auto; }
  .case-table .case-type { grid-area: type; }
  .case-table .case-player { grid-area: player; }
  .case-table td.case-reason { grid-area: reason; min-width: 0; max-width: none; }
  .case-table .case-mod { grid-area: mod; color: var(--muted); font-size: 13px; }
  .case-table .case-mod::before { content: 'By '; color: var(--faint); }
  .case-table .case-game { grid-area: game; font-size: 13px; }
  .case-table .case-when { grid-area: when; text-align: right; font-size: 13px; }
  .case-table .case-actions { grid-area: actions; width: auto; padding: 0; }
  .case-table .case-actions:empty { display: none; }
  .case-table .case-player .pname b { max-width: none; white-space: normal; overflow-wrap: anywhere; }
}
.t-ban { color: var(--bad); } .t-kick { color: var(--warn); } .t-warn { color: #fde68a; } .t-unban { color: var(--ok); } .t-note { color: var(--muted); }
.voided { opacity: 0.5; text-decoration: line-through; }
.profile { display: grid; grid-template-columns: 96px 1fr auto; gap: 18px; align-items: center; }
.profile img { width: 96px; height: 96px; border-radius: 18px; background: var(--raised); }
.profile h2 { font-size: 26px; letter-spacing: -0.04em; }
.profile .meta { display: flex; gap: 8px 18px; flex-wrap: wrap; color: var(--muted); font-size: 14px; margin-top: 6px; }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 10px 16px; font-size: 14.5px; align-items: center; }
.kv dt { color: var(--faint); } .kv dd { margin: 0; color: var(--fg); }
.conn { display: grid; gap: 14px; }
.conn-state { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.conn-state .keyline { padding: 4px 10px; border-radius: 8px; background: var(--raised); border: 1px solid var(--line); }
.help-list { display: grid; gap: 8px; margin: 0; padding-left: 20px; color: var(--body); font-size: 14.5px; }
.event-list { display: grid; }
.event-list .ev { border-radius: 0; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.event-list .ev:nth-child(odd) { background: none; }
.event-list .ev:hover { background: rgba(255, 255, 255, 0.025); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: ping 2.2s infinite; flex: none; }
.live-dot.off { background: var(--faint); animation: none; }
.stat-flash { animation: press 0.5s var(--ease); }

.link-hero { text-align: center; }
.big-check { color: var(--ok); }
.waiting { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--muted); padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }

.cmd { display: grid; grid-template-columns: 200px 1fr; gap: 6px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.cmd:last-child { border-bottom: 0; }
.cmd code { color: var(--fg); }

@media (max-width: 1020px) {
  .features, .flow, .free-band { grid-template-columns: repeat(2, 1fr); }
  .mock-body { grid-template-columns: 1fr; } .mock-left { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 860px) { .server-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .server-grid, .field-row { grid-template-columns: minmax(0, 1fr); }
  .profile { grid-template-columns: 72px 1fr; } .profile > :last-child { grid-column: 1 / -1; }
  .profile img { width: 72px; height: 72px; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; } .kv dd { margin-bottom: 10px; }
  .cmd { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .features, .flow, .free-band { grid-template-columns: 1fr; }
  .mock-wrap { padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

.section-label { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; margin: 14px 2px 0; }
.add-head { margin: 14px 2px 0; }
.add-head .section-label { margin: 0; }
.add-hint { margin: 0 2px; }
.dash-page { padding-bottom: 80px; }
.spacer-sm { height: 10px; }
.flip { transform: rotate(180deg); }
.dash-side .crumbs { padding: 6px 12px 10px; font-size: 13.5px; }
.bar-cell { width: 28%; min-width: 120px; }
.voided-row td { opacity: 0.55; }
.dash-main { grid-template-columns: minmax(0, 1fr); }
.dash-main > * { min-width: 0; }
.toolbar .grow .input, .toolbar .grow .select { width: 100%; }
.panel > .callout, .panel > .err { margin-bottom: 16px; }
.table td.nowrap-cell { white-space: nowrap; }
.server-card a.srv { padding: 0; }
.server-card .srv-main small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.server-card .pill { flex: none; }
.srv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.srv-stat, .srv-wait { display: grid; align-content: center; gap: 2px; min-height: 62px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.02); }
.srv-stat b { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--fg); line-height: 1.2; }
.srv-stat small { color: var(--muted); font-size: 12.5px; }
.srv-wait { color: var(--muted); font-size: 14px; border-style: dashed; }
.srv-open { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--body); font-size: 14.5px; font-weight: 500; transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease); }
.srv-open .ic { width: 16px; height: 16px; flex: none; color: var(--faint); transition: transform 0.2s var(--ease), color 0.2s var(--ease); }
.srv-open:hover, .srv-open:focus-visible { color: var(--fg); border-color: var(--line-strong); background: rgba(255, 255, 255, 0.04); outline: none; }
.srv-open:hover .ic, .srv-open:focus-visible .ic { color: var(--fg); transform: translateX(2px); }
.dash-card { padding: 20px 22px; }
.dash-card-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dash-card-link > .btn { flex: none; margin-left: auto; }
.dash-card-head { display: flex; align-items: center; gap: 14px; flex: 1 1 280px; min-width: 0; }
.dash-card-head > .icon-tile { flex: none; }
.dash-card-head > div:last-child { min-width: 0; line-height: 1.45; }
.dash-page .join-cad { margin-top: 0; }
.connect-inline { display: grid; gap: 10px; padding: 14px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent-soft); }
.connect-inline .hint { margin: 0; }
.connect-inline .grow { min-width: 160px; }
.t-jail { color: #fdba74; } .t-unjail { color: var(--ok); }
.feature { gap: 8px; }
.feature h3 { font-size: 18px; }

.banner a { white-space: nowrap; }
@media (max-width: 640px) {
  .banner { flex-wrap: wrap; row-gap: 2px; padding: 8px 16px; font-size: 12.5px; line-height: 1.4; }
  .banner a { flex-basis: 100%; justify-content: center; }
  .nav { gap: 8px; padding: 0 14px; }
  .brand { font-size: 24px; }
  .nav-links { left: 12px; right: 12px; width: auto; }
  .display { font-size: clamp(40px, 13vw, 64px); }
  .hero-cta .btn-lg { width: 100%; }
  .mock-wrap { margin-top: 0; }
  .mock-feed { min-height: 0; }
}

.faq-page .faq-group { margin-top: 36px; }
.faq-page .faq-group h2 { font-size: 20px; letter-spacing: -0.03em; margin: 0 0 12px; }
.faq-item { margin-bottom: 10px; padding: 0; overflow: hidden; }
.faq-item summary { cursor: pointer; padding: 16px 20px; font-weight: 600; color: var(--fg); list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--muted); font-size: 20px; font-weight: 400; transition: transform 0.25s var(--ease); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 20px 18px; margin: 0; color: var(--body); }
.faq-item:target { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }

.dl { padding: 64px 0 100px; }
.dl h1 { font-size: clamp(36px, 6vw, 56px); letter-spacing: -0.055em; line-height: 1; margin-bottom: 14px; }
.dl-lead { margin: 0 0 36px; text-align: left; font-size: 19px; max-width: 640px; }
.dl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dl-card { min-width: 0; padding: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; transition: border-color 0.3s, transform 0.3s var(--ease); }
.dl-card h2 { font-size: 22px; letter-spacing: -0.03em; }
.dl-card.dl-mine { border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent), var(--shadow-panel); }
.dl-card .stack-sm { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.dl-size { opacity: 0.7; font-weight: 500; margin-left: 4px; }
.dl-off { opacity: 0.4; pointer-events: none; }
.dl-version { margin-top: 12px; font-size: 14px; }
.dl-h { font-size: 24px; letter-spacing: -0.04em; margin: 44px 0 14px; }
.dl-notes { padding-left: 20px; display: grid; gap: 8px; color: var(--body); }
.callout[hidden] { display: none; }
@media (max-width: 760px) { .dl-grid { grid-template-columns: minmax(0, 1fr); } }
.app-version { position: fixed; right: 10px; bottom: 6px; z-index: 40; padding: 2px 8px; border-radius: 999px; font: 500 11px/1.5 var(--mono, ui-monospace, monospace); letter-spacing: 0.02em; color: var(--muted, #96969c); background: color-mix(in srgb, var(--canvas, #000) 70%, transparent); opacity: 0.7; pointer-events: none; user-select: none; }
@media print { .app-version { display: none; } }
.in-app a[href="/download"] { display: none; }

.in-app .banner, .in-app .footer, .in-app .cookie-bar { display: none; }
.in-app .nav-links a[href="/"], .in-app .nav-links a[href="/download"], .in-app .nav-links a[href="/discord"] { display: none; }
.in-app .hero-note, .in-app .menu a[href="/download"] { display: none; }

.try-head { margin-bottom: 28px; }
.try-head .sub { max-width: 640px; }
.pg { overflow: hidden; max-width: 1060px; margin: 0 auto; }
.pg .mock-bar .pg-reset { margin-left: 10px; }
.pg-body { display: grid; grid-template-columns: 176px minmax(0, 1fr); min-height: 470px; }
.pg-nav { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; border-right: 1px solid var(--line); background: rgba(255, 255, 255, 0.015); }
.pg-nav button { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; background: none; border-radius: 9px; color: var(--muted); font-size: 14.5px; font-weight: 500; text-align: left; transition: background 0.2s, color 0.2s; }
.pg-nav button:hover { color: var(--fg); background: rgba(255, 255, 255, 0.05); }
.pg-nav button[aria-selected='true'] { color: var(--fg); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-strong); }
.pg-nav button[aria-selected='true'] .ic { color: var(--accent-strong); }
.pg-main { padding: 18px; min-width: 0; max-height: 560px; overflow: auto; }
.pg-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }
.pg-two { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: start; }
.pg-toggle { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--canvas); }
.pg-teams { display: grid; gap: 7px; margin-top: 10px; }
.pg-team { display: grid; grid-template-columns: 92px 1fr 26px; align-items: center; gap: 10px; font-size: 13px; }
.pg-team b { color: var(--fg); text-align: right; font-variant-numeric: tabular-nums; }
.pg-bar { display: block; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.pg-bar i { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width 0.6s var(--ease); }
.pg-feed .ev:nth-child(odd), .pg-logs .ev:nth-child(odd) { background: rgba(255, 255, 255, 0.025); }
.pg-call { color: var(--faint); }
.nowrap-cell { white-space: nowrap; }
.pg .spark { height: 90px; }
.pg .table td, .pg .table th { padding-top: 10px; padding-bottom: 10px; }
.pg .mock-kpis { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) {
  .pg-body { grid-template-columns: 1fr; }
  .pg-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 8px; }
  .pg-nav button { white-space: nowrap; }
  .pg-two { grid-template-columns: 1fr; }
}

.tilt { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.35s var(--ease), border-color 0.3s; will-change: transform; }

.js .tilt.reveal.in { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.js .tilt.reveal.in.settled { transition: transform 0.3s var(--ease), border-color 0.3s; transition-delay: 0s; }
.tilt:hover { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .tilt, .js .tilt.reveal.in { transform: none !important; } }
.hero { padding-bottom: 88px; }
#try { padding-top: 88px; }

.vcard.wide { max-width: 680px; padding: 44px 40px; }
.vcard.wide .lead { margin-bottom: 16px; }
.server-name { text-align: center; color: var(--faint); font-size: 13.5px; margin: 0 0 6px; }
.apply { display: grid; gap: 28px; margin-top: 28px; padding-top: 30px; border-top: 1px solid var(--line); }
.ask { display: grid; gap: 10px; }
.ask-head { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; }
.ask-head label { font-weight: 600; font-size: 15.5px; line-height: 1.4; color: var(--fg); }
.ask .optional { font-size: 12px; color: var(--faint); white-space: nowrap; }
.ask .textarea { min-height: 150px; }
.ask .count { justify-self: end; font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; margin-top: -4px; }
.apply .own-words { text-align: center; margin: 0; }
@media (max-width: 640px) { .vcard.wide { padding: 28px 20px; } }
.rating { display: flex; gap: 6px; }
.rating .star { background: none; border: 0; padding: 2px 4px; font-size: 30px; line-height: 1; color: var(--line-strong); cursor: pointer; transition: color 0.15s, transform 0.15s var(--ease); }
.rating .star:hover { transform: scale(1.12); }
.rating .star.on { color: #fbbf24; }
.choice-pick { display: grid; gap: 8px; }
.choice-option { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: left; font: inherit; font-size: 14.5px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.02); color: var(--fg); cursor: pointer; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; }
.choice-option:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.035); }
.choice-option[aria-checked='true'] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); box-shadow: inset 0 0 0 1px var(--accent); }
.choice-radio { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1.5px solid var(--line-strong); transition: border-color 0.15s, box-shadow 0.15s; }
.choice-option[aria-checked='true'] .choice-radio { border-color: var(--accent); box-shadow: inset 0 0 0 4px var(--accent); }
.choice-option > span:last-child { min-width: 0; overflow-wrap: anywhere; }

.quota > .bad { background: var(--warn); }
.dept-quota-row { display: grid; gap: 8px; }
.stack-sm { display: grid; gap: 10px; }
.block { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; margin-top: 10px; }
.block-title { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 0; }
.panel-sep { height: 1px; background: var(--line); margin: 22px 0; }
.panel-actions { margin-top: 18px; justify-content: flex-end; }
.q-card { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.02); }
.q-meta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.q-meta .select { width: 170px; flex: none; }
.q-meta .btn { margin-left: auto; }
.q-options { display: grid; gap: 8px; padding-left: 4px; }
.q-option { display: flex; align-items: center; gap: 10px; }
.q-option .input { flex: 1; min-width: 0; }
.q-option-dot { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.q-option-add { justify-self: start; }
.preset-row { display: grid; grid-template-columns: minmax(170px, 1.1fr) 140px 84px minmax(0, 1.6fr) auto; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.02); }
.preset-row .input[type='number'] { max-width: none; }
.preset-row > * { min-width: 0; }
.preset-row .input, .preset-row .select { min-width: 0; width: 100%; }
@media (max-width: 960px) {
  .preset-row { grid-template-columns: minmax(0, 1fr) 140px 84px auto; }
  .preset-row > :nth-child(4) { grid-column: 1 / -1; order: 5; }
}
@media (max-width: 560px) { .preset-row { grid-template-columns: minmax(0, 1fr) auto; } .preset-row > :nth-child(2), .preset-row > :nth-child(3) { grid-column: 1 / -1; } .preset-row > :nth-child(3):empty { display: none; } }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.session-live { display: grid; gap: 18px; }
.mini-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.mini-stats > div { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.02); }
.mini-stats small { color: var(--muted); font-size: 12.5px; }
.mini-stats b { font-size: 20px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.mini-stats b .muted { color: inherit; }
@media (max-width: 560px) {
  .session-live .row-between > .btn { width: 100%; }
  .session-live .mini-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .session-live .mini-stats > div { padding: 12px; align-content: space-between; }
  .session-live .mini-stats b { font-size: 16px; }
}
.sessions-table .sess-when { display: none; }
@media (max-width: 560px) {
  .sessions-table .sess-started { display: none; }
  .sessions-table .sess-when { display: block; margin-top: 2px; font-size: 12.5px; }
  .sessions-table td b { overflow-wrap: anywhere; }
}
.auto-panel .callout { margin-bottom: 18px; }
.auto-panel .section-label { margin: 0 0 4px; color: var(--fg); font-size: 14px; letter-spacing: -0.005em; }
.auto-panel .section-label + .hint { margin: 0 0 12px; }
.auto-panel .chip-row { margin: 0 0 12px; }
.auto-panel .toggle-row + .field-row, .auto-panel .toggle-row + .field { margin-top: 16px; }
.auto-panel .toggle-row:has(+ .panel-sep), .auto-panel .toggle-row:has(+ .panel-actions) { border-bottom: 0; }
.auto-panel .field-row .field { margin-bottom: 14px; }
.auto-panel .lock-row { flex-wrap: wrap; gap: 8px; }
.auto-panel .lock-row + .stack-sm:not(:empty) { margin-top: 12px; }
.field .row:has(> .input[type='number']) { flex-wrap: nowrap; }
.field .row > .input[type='number'] + .muted { min-width: 0; font-size: 13.5px; }
.response-head { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; }
.response-head h3 { font-size: 18px; margin-bottom: 4px; }
.check-strip { display: flex; gap: 10px; align-items: center; padding: 11px 14px; border-radius: 10px; font-size: 13.5px; border: 1px solid var(--line); color: var(--muted); background: rgba(255, 255, 255, 0.02); }
.check-strip .ic { flex: none; }
.check-strip.clean .ic { color: var(--ok); }
.check-strip.review { border-color: rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.06); color: var(--fg); }
.check-strip.review .ic { color: var(--warn); }
.check-strip.high { border-color: rgba(248, 113, 113, 0.4); background: rgba(248, 113, 113, 0.07); color: var(--fg); }
.check-strip.high .ic { color: var(--bad); }
.qa-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.qa { display: grid; gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.qa-q { color: var(--muted); font-size: 13px; font-weight: 600; }
.qa-a { color: var(--fg); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.qa-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.qa-tags .ai-why { flex-basis: 100%; margin: 2px 0 0; }
.response-foot { padding-top: 2px; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.form-card { display: grid; gap: 14px; align-content: start; padding: 24px; }
.form-card h3 { font-size: 17px; }
.form-card .field { margin: 0; }
.form-card .btn { justify-self: start; }
.response { display: grid; gap: 18px; padding: 26px; }
.appeal-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.appeal-case { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.02); }
.appeal-case h4 { font-size: 15px; margin: 0; }
.appeal-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: 13.5px; }
.appeal-facts dt { color: var(--muted); font-weight: 600; }
.appeal-facts dd { margin: 0; overflow-wrap: anywhere; }
.appeal-save { justify-self: start; }
.length-custom { flex-wrap: nowrap; }
.length-custom .input { width: 110px; flex: none; }
.appeal-found { display: grid; gap: 8px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.02); font-size: 14px; }
.appeal-found b { color: var(--fg); }
.appeal-ref { display: grid; gap: 10px; margin-top: 8px; }
@media (max-width: 760px) { .appeal-grid { grid-template-columns: 1fr; } }
.err-inline { color: var(--warn); font-size: 13.5px; }
.mt { margin-top: 18px; }

.field .row .input[type='number'] { width: 120px; flex: none; }

.form-card .row { flex-wrap: nowrap; }

.cookie-bar { display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.cookie-bar p { margin: 0; }
.cookie-bar a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
html.cookies-ok .cookie-bar { display: none; }

.alt-link { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.alt-link summary { cursor: pointer; color: var(--muted); font-size: 14px; text-align: center; }
.alt-link summary:hover { color: var(--fg); }
.alt-link .hint { text-align: center; margin: 12px 0; }

.sample { font-size: 13px; color: var(--muted); max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sample b { color: var(--fg); font-weight: 600; }
.center { text-align: center; }

.hero { min-height: clamp(560px, 84vh, 880px); }
.hero-photo { position: absolute; inset: -40px 0 0; z-index: -1; overflow: hidden; background: #000; will-change: transform; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 56%, rgba(0, 0, 0, 0.8) 70%, rgba(0, 0, 0, 0.45) 83%, rgba(0, 0, 0, 0.15) 94%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 56%, rgba(0, 0, 0, 0.8) 70%, rgba(0, 0, 0, 0.45) 83%, rgba(0, 0, 0, 0.15) 94%, transparent 100%); }
.hero-photo picture { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity 1.8s ease; }
.hero-photo picture.on { opacity: 1; }
.hero-photo picture:nth-child(1) { --fx: 72%; --fy: 70%; }
.hero-photo picture:nth-child(2) { --fx: 62%; --fy: 62%; }
.hero-photo picture:nth-child(3) { --fx: 50%; --fy: 62%; }
.hero-photo picture:nth-child(4) { --fx: 48%; --fy: 62%; }
.hero-photo picture:nth-child(5) { --fx: 22%; --fy: 60%; }
.hero-photo picture:nth-child(6) { --fx: 50%; --fy: 60%; }
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 68%); transform: scale(1.06); animation: hero-drift 32s ease-in-out infinite alternate; }
.hero-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.28) 58%, rgba(0, 0, 0, 0.5) 84%, rgba(0, 0, 0, 0.8) 100%); }
.hero .lead { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.7); }
.hero .display { text-shadow: 0 2px 28px rgba(0, 0, 0, 0.55); }
@keyframes hero-drift { from { transform: scale(1.06) translate3d(0, 0, 0); } to { transform: scale(1.15) translate3d(-1.6%, -1%, 0); } }
@media (prefers-reduced-motion: reduce) { .hero-photo img { animation: none; transform: none; } .hero-photo picture { transition: none; } }

.cb { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); text-align: left; box-shadow: var(--shadow-panel); }
.cb-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); font-size: 12px; color: var(--muted); }
.cb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); font-weight: 500; }
.cb-lang { text-transform: uppercase; letter-spacing: 0.06em; }
.cb-copy { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--muted); transition: color 0.15s, background 0.15s, transform 0.15s var(--ease); }
.cb-copy:hover { color: var(--fg); background: rgba(255, 255, 255, 0.06); }
.cb-copy:active { transform: scale(0.94); }
.cb-copy.done { color: var(--ok); }
.cb-copy .ic { animation: cb-pop 0.28s var(--ease); }
@keyframes cb-pop { from { opacity: 0; transform: scale(0.55); } to { opacity: 1; transform: none; } }
.cb-scroll { overflow-x: auto; }
.cb-scroll.wrap pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.cb pre { margin: 0; padding: 14px 0; font-family: var(--mono); font-size: 13px; line-height: 1.7; white-space: pre; }
.cb-line { display: flex; gap: 14px; padding: 0 16px; border-left: 2px solid transparent; }
.cb-line.lit { border-left-color: var(--accent); background: rgba(255, 255, 255, 0.05); }
.cb-num { flex: none; width: 1.4em; text-align: right; color: var(--faint); user-select: none; font-variant-numeric: tabular-nums; }
.cb-line.lit .cb-num { color: var(--body); }
.cb-text { flex: 1; color: var(--fg); }
.tk-comment { color: var(--faint); font-style: italic; }
.tk-keyword { color: var(--accent-strong); }
.tk-string { color: var(--ok); }
.tk-number { color: var(--warn); }
.tk-attr { color: #93c5fd; }
.tk-tag { color: var(--accent-strong); }
.tk-punctuation { color: var(--muted); }
.cb-caret { display: inline-block; width: 7px; height: 1.1em; margin-left: 2px; vertical-align: text-bottom; background: var(--accent-strong); animation: cb-blink 1s steps(1) infinite; }
@keyframes cb-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cb-caret { animation: none; } .cb-copy .ic { animation: none; } }

.faq-item.closing summary::after { transform: none; }
.faq-item summary:hover { color: var(--accent-strong); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.footer .social { display: flex; gap: 10px; margin-top: 14px; }
.footer .social a { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); color: var(--muted); transition: color 0.15s, border-color 0.15s, background 0.15s; }
.footer .social a:hover { color: var(--fg); border-color: var(--line-strong); background: rgba(255, 255, 255, 0.04); }
.footer .social .ic { width: 16px; height: 16px; }

.status-wrap { padding: 56px 0 24px; }
.status-wrap h1 { font-size: clamp(34px, 5vw, 52px); letter-spacing: -0.05em; margin-bottom: 22px; }
.status-overall { display: flex; gap: 16px; align-items: center; padding: 20px 22px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--panel); margin-bottom: 18px; }
.status-overall b { display: block; font-size: 20px; letter-spacing: -0.02em; }
.status-overall small { color: var(--muted); font-size: 14px; }
.status-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--faint); }
.status-overall .status-dot { width: 16px; height: 16px; }
.status-overall[data-state='operational'] .status-dot, .status-dot[data-state='operational'] { background: var(--ok); }
.status-overall[data-state='degraded'] .status-dot, .status-dot[data-state='degraded'] { background: var(--warn); }
.status-overall[data-state='outage'] .status-dot, .status-dot[data-state='outage'] { background: var(--bad); }
.status-overall[data-state='operational'] { border-color: rgba(74, 222, 128, 0.35); }
.status-overall[data-state='degraded'] { border-color: rgba(251, 191, 36, 0.4); }
.status-overall[data-state='outage'] { border-color: rgba(248, 113, 113, 0.45); }
.status-list { padding: 4px 22px; }
.status-row { display: flex; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.status-row:last-child { border-bottom: 0; }
.status-name { flex: 1; min-width: 0; }
.status-name b { display: block; font-weight: 600; }
.status-name small { color: var(--muted); font-size: 13.5px; }
.status-word { font-size: 13px; font-weight: 600; color: var(--muted); }
.status-word[data-state='operational'] { color: var(--ok); }
.status-word[data-state='degraded'] { color: var(--warn); }
.status-word[data-state='outage'] { color: var(--bad); }
.status-foot { font-size: 13.5px; margin-top: 14px; }

.contact-list { display: grid; gap: 12px; margin: 28px 0 8px; }
.contact-card { display: flex; gap: 16px; align-items: center; padding: 18px 20px; color: inherit; transition: border-color 0.15s, background 0.15s; }
.contact-card:hover { border-color: var(--line-strong); background: var(--raised); }
.contact-card b { display: block; font-size: 16px; color: var(--fg); }
.contact-card small { display: block; color: var(--muted); font-size: 14px; margin: 2px 0 6px; }
.contact-card em { font-style: normal; color: var(--accent-strong); font-size: 14.5px; font-weight: 500; }
.contact-ic { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); color: var(--accent-strong); }

.quota-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 28px; align-items: start; }
.quota-main { min-width: 0; }
.quota-main .toggle-row:first-child { padding-top: 4px; }
.quota-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; padding: 18px 0 6px; border-bottom: 1px solid var(--line); }
.quota-fields .field { margin: 0; }
.quota-fields .input[type='number'] { width: 100%; }
.quota-fields .hint { margin: 2px 0 0; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.chip-btn { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); font-size: 12.5px; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.chip-btn:hover { color: var(--fg); border-color: var(--faint); }
.chip-btn.on { color: var(--fg); border-color: var(--accent); background: rgba(44, 108, 246, 0.12); }
.quota-side { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.02); display: grid; gap: 10px; }
.quota-side .section-label { margin: 0; }
.quota-preview { display: grid; gap: 10px; }
.quota-preview .quota-big { font-size: 20px; letter-spacing: -0.02em; line-height: 1.25; }
.quota-preview p { margin: 0; font-size: 13.5px; }
@media (max-width: 900px) { .quota-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .quota-fields { grid-template-columns: 1fr; } }
.quota-fields .row { flex-wrap: nowrap; gap: 10px; align-items: center; }
.quota-fields .row .grow { flex: 1 1 auto; min-width: 0; }
.quota-fields .row .muted { flex: none; }

.field { align-content: start; }
.field-row { align-items: start; }
.settings-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 32px 0 16px; padding-top: 24px; border-top: 1px solid var(--line); }
.settings-head.first { margin-top: 8px; padding-top: 0; border-top: 0; }
.settings-head .section-label { margin: 0 0 2px; font-size: 15px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; }
.settings-head .hint { margin: 0; }
.settings-head .btn { flex: none; }
@media (max-width: 560px) { .settings-head { flex-wrap: wrap; align-items: flex-start; } }
.settings-head + .callout { margin: 0 0 20px; }

.panel-page { padding-top: 14px; }
.seg-fill { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.panel-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 10px; }
.panel-grid .block { margin-top: 0; }
@media (max-width: 960px) { .panel-grid { grid-template-columns: 1fr; } }
.result { display: grid; gap: 14px; }
.result-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.result h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 18px; letter-spacing: -0.02em; margin-bottom: 2px; }
.result .kv { margin: 0; }
.support-ask { align-items: flex-start; flex-wrap: wrap; }
.support-ask-text { flex: 1 1 280px; display: grid; gap: 2px; min-width: 0; }
.support-ask .row { flex: none; flex-wrap: wrap; max-width: 100%; }
@media (max-width: 640px) { .support-ask .row { flex: 1 1 100%; } .support-ask .row .btn { flex: 1 1 auto; } }

.pg-body { min-height: 520px; }
.pg-main { max-height: 620px; }
.pg-group { display: block; padding: 12px 12px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.pg-group:first-child { padding-top: 2px; }
.pg-map { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 16px; align-items: start; }
.pg .map-wrap { width: 100%; margin: 0; }
.pg .map-card { padding: 16px; }
.pg .map-card h3 { font-size: 18px; letter-spacing: -0.02em; }
.pg .meta-row { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.pg-avatar { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 18px; background: var(--raised); color: var(--accent-strong); font-size: 38px; font-weight: 700; }
.pg .profile h2 { font-size: 22px; }
.pg .profile { grid-template-columns: 96px 1fr auto; }
.pg .profile > .row { flex-wrap: wrap; }
.quota-hours { width: 84px; }
.pg-say { display: grid; gap: 4px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--canvas); }
.pg-say small { color: var(--faint); font-size: 12px; }
.pg-say span { color: var(--fg); font-size: 15px; }
.pg-say.message { background: color-mix(in srgb, var(--accent) 14%, var(--canvas)); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.pg .stack-sm { display: grid; gap: 10px; }
@media (max-width: 860px) {
  .pg-map { grid-template-columns: 1fr; }
  .pg-group { display: none; }
  .pg .profile { grid-template-columns: 72px 1fr; } .pg .profile > .row { grid-column: 1 / -1; }
  .pg-avatar { width: 72px; height: 72px; font-size: 30px; }
}

@media (max-width: 700px) {
  .page-title > .row { flex: 1 1 100%; }
  .seg:not(.seg-fill) { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg:not(.seg-fill)::-webkit-scrollbar { display: none; }
  .seg:not(.seg-fill) button { flex: none; white-space: nowrap; }
  .dash-side { scrollbar-width: none; }
  .dash-side::-webkit-scrollbar { display: none; }
  .hero { min-height: 0; padding: 44px 0 72px; }
  .hero-photo::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.26) 40%, rgba(0, 0, 0, 0.32) 76%, rgba(0, 0, 0, 0.78) 100%); }
  .cue { bottom: 18px; }
}
@media (max-width: 640px) {
  .pg .mock-bar { flex-wrap: nowrap; gap: 8px; padding: 10px 12px; }
  .pg .mock-bar .lights, .pg .mock-bar .sample-tag, .pg-reset-label { display: none; }
  .pg .mock-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pg .mock-bar .pg-reset { margin-left: 0; flex: none; padding-inline: 10px; }
  .pg-nav { scrollbar-width: none; }
  .pg-nav::-webkit-scrollbar { display: none; }
  .pg-body { min-height: 0; }
  .pg-main { padding: 12px; max-height: none; overflow: visible; }
  .pg .toolbar .btn, .pg .toolbar .select { flex: 1 1 auto; }
}

@media (min-width: 1021px) { .show-rev .show-text { order: 2; } }
.deck { position: relative; max-width: 480px; margin: 0 auto; padding: 56px 0 0 64px; outline: none; }
.deck:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 18px; }
.deck-stage { position: relative; height: 292px; }
.case-card {
  position: absolute; inset: 0; display: grid; align-content: start; gap: 12px; padding: 20px 22px 18px; border-radius: 18px;
  background: var(--panel); border: 1px solid var(--line-strong); box-shadow: 0 26px 50px -22px rgba(0, 0, 0, 0.85); cursor: pointer; user-select: none; -webkit-user-select: none;
  transform-origin: 100% 100%;
  transform: translate3d(calc(var(--i, 0) * -22px), calc(var(--i, 0) * -18px), 0) scale(calc(1 - var(--i, 0) * 0.04));
  filter: brightness(calc(1 - var(--i, 0) * 0.14));
  transition: transform 0.5s var(--ease), filter 0.5s var(--ease), opacity 0.35s ease;
}
.case-card[data-pos='3'] { opacity: 0; }
.case-card.leaving { transform: translate3d(58%, 8%, 0) rotate(9deg); opacity: 0; transition-duration: 0.32s; }
.case-card.snap { transition: none; }
.case-card .case-head { display: flex; align-items: center; gap: 12px; }
.case-card .case-head > div { min-width: 0; display: grid; }
.case-card .case-head b { font-size: 16px; color: var(--fg); letter-spacing: -0.02em; }
.case-card .case-head small { color: var(--faint); font-size: 13px; }
.case-card .case-head .pill { margin-left: auto; flex: none; }
.case-card .av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 700; color: var(--accent-strong); background: var(--raised); border: 1px solid var(--line-strong); }
.case-card .ctype { font-size: 24px; letter-spacing: -0.04em; font-weight: 700; margin: 2px 0 0; }
.case-card dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 15px; }
.case-card dt { color: var(--faint); }
.case-card dd { margin: 0; color: var(--fg); min-width: 0; }
.case-card .case-foot { color: var(--faint); font-size: 13px; padding-top: 4px; }
.deck:not(.on) .case-card:not(:first-child) { display: none; }
.deck:not(.on) .case-card { cursor: default; }
.deck-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; }
.deck-controls[hidden], .deck-hint[hidden] { display: none; }
.deck-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--raised); color: var(--fg); transition: background 0.2s, color 0.2s, transform 0.2s var(--ease); }
.deck-btn:hover { background: #f5f5f5; color: #000; }
.deck-btn:active { transform: scale(0.94); }
.deck-count { min-width: 52px; text-align: center; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.deck-hint { text-align: center; color: var(--faint); font-size: 13px; margin: 10px 0 0; }
@media (max-width: 700px) {
  .deck { padding: 44px 0 0 44px; }
  .deck-stage { height: 276px; }
  .case-card { transform: translate3d(calc(var(--i, 0) * -15px), calc(var(--i, 0) * -14px), 0) scale(calc(1 - var(--i, 0) * 0.04)); padding: 16px 16px 14px; }
}
@media (prefers-reduced-motion: reduce) { .case-card, .case-card.leaving { transition: none; } }

.stack-sm { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chan-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--raised); font-size: 13.5px; color: var(--fg); }
.chan-chip button { display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
.chan-chip button:hover { background: var(--selected); color: var(--fg); }
.chan-chip .ic { width: 13px; height: 13px; }
.dept-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
.dept-list { display: grid; gap: 8px; position: sticky; top: 80px; }
.dept-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); text-align: left; transition: border-color 0.2s, background 0.2s, transform 0.2s var(--ease); }
.dept-card:hover { border-color: var(--line-strong); background: var(--raised); }
.dept-card[aria-current='true'] { border-color: color-mix(in srgb, var(--dept, var(--accent)) 55%, transparent); background: color-mix(in srgb, var(--dept, var(--accent)) 8%, var(--panel)); box-shadow: inset 3px 0 0 var(--dept, var(--accent)); }
.dept-card .dept-badge { min-width: 36px; height: 36px; font-size: 11.5px; border-radius: 9px; }
.dept-add-head { margin-bottom: 14px; }
.dept-add-head .dept-h { margin: 0; color: var(--fg); font-size: 15px; }
.dept-add-head .hint { margin: 2px 0 0; }
.dept-add > .err { margin-bottom: 12px; }
.dept-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05); }
.dept-dot-lg { width: 16px; height: 16px; }
.dept-name { display: grid; flex: 1 1 auto; min-width: 0; }
.dept-name b { font-size: 15px; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dept-name small { color: var(--faint); font-size: 12.5px; }
.dept-head { overflow: hidden; border-top: 0; }
.dept-head-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 22px 20px; background: linear-gradient(180deg, color-mix(in srgb, var(--dept, var(--accent)) 10%, transparent), transparent); border-top: 2px solid var(--dept, var(--accent)); }
.dept-head-id { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.dept-head-text { min-width: 0; }
.dept-head h2 { font-size: 23px; letter-spacing: -0.04em; margin: 0; }
.dept-head .muted { margin: 4px 0 0; font-size: 14px; }
.dept-head-actions { flex: none; }
.dept-head .mini-stats { margin-top: 14px; }
.dept-callsign { width: 120px; }
.dept-callsign .input { min-width: 0; width: 100%; }
.dept-head .mini-stats { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.dept-main .toolbar .select { min-width: 0; width: auto; flex: 1 1 150px; }
.dept-main .table td.actions { white-space: nowrap; }
.dot-online { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18); flex: none; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35); }
.swatch[aria-pressed='true'] { border-color: #fff; }
.rank-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; }
.rank-row-cad { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 150px) auto auto auto; }
.rank-cad { height: 38px; font-size: 13px; }
@media (max-width: 560px) { .rank-row-cad { grid-template-columns: 24px minmax(0, 1fr) auto auto auto; } .rank-row-cad .rank-cad { grid-column: 2 / -1; grid-row: 2; } }
.rank-n { color: var(--faint); font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .dept-layout { grid-template-columns: minmax(0, 1fr); }
  .dept-list { position: static; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .dept-list::-webkit-scrollbar { display: none; }
  .dept-callsign { width: 100%; }
}

.dept-none { grid-template-columns: minmax(0, 1fr); }
.dept-none .dept-list { display: none; }
.dept-kpis { margin-bottom: 18px; }
.dept-empty { display: grid; justify-items: center; align-content: center; gap: 10px; text-align: center; padding: 56px 24px; min-height: 340px; }
.dept-empty h3 { font-size: 22px; letter-spacing: -0.03em; margin: 4px 0 0; }
.dept-empty p { margin: 0; max-width: 460px; }
.dept-starters { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; width: min(100%, 720px); margin: 8px 0 6px; }
.dept-starter { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); text-align: left; transition: border-color 0.2s, background 0.2s, transform 0.2s var(--ease); }
.dept-starter:hover { border-color: var(--line-strong); background: var(--raised); transform: translateY(-1px); }
.dept-starter b { display: block; font-size: 14.5px; letter-spacing: -0.01em; }
.dept-starter small { color: var(--faint); font-size: 12.5px; }
.dept-bar { display: block; height: 4px; margin-top: 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.dept-bar i { display: block; height: 100%; border-radius: 99px; }
.dept-stats { display: flex; flex-wrap: wrap; margin: 0 -1px -1px 0; border-top: 1px solid var(--line); }
.dept-stat { flex: 1 1 150px; display: grid; gap: 3px; align-content: start; min-width: 0; padding: 14px 18px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dept-stat small, .dept-stat span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dept-stat small { color: var(--muted); font-size: 12.5px; }
.dept-stat b { font-size: 21px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dept-stat span { color: var(--faint); font-size: 12.5px; }
.dept-stat.warn b { color: var(--warn); }
.dept-stat.warn span { color: var(--warn); }
.dept-two { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.dept-h { font-size: 14px; letter-spacing: 0; color: var(--muted); font-weight: 600; margin: 0 0 12px; text-transform: none; }
.dept-h-gap { margin-top: 20px; }
.dept-chart { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; height: 150px; align-items: end; }
.dept-col { display: grid; grid-template-rows: 16px minmax(0, 1fr) 18px; height: 100%; align-items: end; justify-items: center; gap: 4px; }
.dept-col i { display: block; width: 100%; max-width: 38px; border-radius: 8px 8px 3px 3px; background: var(--accent); opacity: 0.85; align-self: end; transition: height 0.5s var(--ease); }
.dept-col small { color: var(--faint); font-size: 12px; }
.dept-val { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dept-ranks { display: grid; gap: 8px; }
.dept-rank { display: grid; grid-template-columns: minmax(70px, 1fr) minmax(0, 1.6fr) 28px; gap: 10px; align-items: center; font-size: 13.5px; }
.dept-rank b { text-align: right; font-variant-numeric: tabular-nums; }
.dept-rankbar { display: block; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.dept-rankbar i { display: block; height: 100%; border-radius: 99px; }
.dept-leaders { display: grid; gap: 8px; }
.dept-leader { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.dot-off { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); opacity: 0.5; flex: none; }
.row-click { cursor: pointer; }
.row-click:hover td { background: rgba(255, 255, 255, 0.025); }
.row-click:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: -2px; }
.ev-when { margin-left: auto; color: var(--faint); font-size: 12.5px; white-space: nowrap; }
@media (max-width: 960px) { .dept-two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .dept-head-top { flex-direction: column; padding: 18px 16px; }
  .dept-stat { flex-basis: 40%; padding: 12px 16px 14px; }
}

.set-layout { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 56px; align-items: start; margin-top: 14px; }
.set-main { display: grid; gap: 64px; min-width: 0; }
.set-group { display: grid; gap: 22px; scroll-margin-top: 84px; }
.set-group-head h2 { font-size: 24px; letter-spacing: -0.035em; color: var(--fg); }
.set-group-head p { margin-top: 3px; color: var(--muted); font-size: 14.5px; max-width: 62ch; }
.set-panels { display: grid; gap: 26px; }
.set-main .panel-pad { padding: 30px 32px; }
.set-main .panel-head { margin-bottom: 24px; }
.set-main .toggle-row { padding: 20px 0; }
.set-main .field { margin-bottom: 24px; }
.set-main .field-row { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 4px 32px; }
.set-main .settings-head { margin: 44px 0 24px; padding-top: 34px; }
.set-main .settings-head.first { margin-top: 0; padding-top: 0; }
.set-main .conn { gap: 20px; }
.set-main .help-list { gap: 10px; }
.set-jump { position: sticky; top: 84px; display: grid; gap: 2px; padding-left: 14px; border-left: 1px solid var(--line); }
.set-jump small { color: var(--faint); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; }
.set-jump button { text-align: left; padding: 7px 10px; margin-left: -10px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 14px; transition: background 0.15s, color 0.15s; }
.set-jump button:hover { background: var(--raised); color: var(--fg); }
@media (max-width: 1100px) { .set-layout { grid-template-columns: minmax(0, 1fr); } .set-jump { display: none; } }
@media (max-width: 560px) { .set-main { gap: 44px; } .set-main .panel-pad { padding: 22px 18px; } .set-panels { gap: 18px; } }

.wf { display: grid; gap: 40px; margin-top: 14px; min-width: 0; }
.wf-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.wf-tile { position: relative; display: grid; gap: 2px; padding: 22px 24px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-panel); overflow: hidden; }
.wf-tile small { color: var(--muted); font-size: 13.5px; font-weight: 500; padding-right: 44px; }
.wf-tile b { font-size: 38px; line-height: 1.1; letter-spacing: -0.045em; color: var(--fg); font-variant-numeric: tabular-nums; }
.wf-tile > span:last-child { color: var(--faint); font-size: 13px; }
.wf-tile-ic { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--raised); border: 1px solid var(--line); color: var(--accent-strong); }
.wf-tile.tone-ok .wf-tile-ic { color: var(--ok); }
.wf-tile.tone-warn { border-color: rgba(251, 191, 36, 0.35); }
.wf-tile.tone-warn .wf-tile-ic { color: var(--warn); }
.wf-banner { display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--panel); }
.wf-banner > .ic { flex: none; margin-top: 3px; color: var(--muted); }
.wf-banner b { display: block; color: var(--fg); }
.wf-banner span { color: var(--muted); font-size: 14.5px; }
.wf-banner.ok { border-color: rgba(74, 222, 128, 0.3); background: rgba(74, 222, 128, 0.04); }
.wf-banner.ok > .ic { color: var(--ok); }
.wf-banner.warn { border-color: rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.05); }
.wf-banner.warn > .ic { color: var(--warn); }
.wf-hero { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 56px 28px; }
.wf-hero h2 { font-size: 26px; letter-spacing: -0.035em; }
.wf-hero p { max-width: 58ch; color: var(--muted); }
.wf-section { display: grid; gap: 20px; }
.wf-section-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wf-section-head h2 { font-size: 20px; letter-spacing: -0.03em; color: var(--fg); }
.wf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 22px; }
.wf-card { display: flex; flex-direction: column; gap: 20px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-panel); transition: border-color 0.2s, transform 0.2s var(--ease); }
.wf-card:hover { border-color: var(--line-strong); }
.wf-card[data-status='paused'] .wf-card-title, .wf-card[data-status='paused'] .wf-flow { opacity: 0.6; }
.wf-card[data-status='attention'] { border-color: rgba(251, 191, 36, 0.38); }
.wf-card-title h3 { font-size: 18px; letter-spacing: -0.02em; color: var(--fg); overflow-wrap: anywhere; }
.wf-card-title p { margin-top: 4px; color: var(--muted); font-size: 14px; }
.wf-flow { display: grid; gap: 0; }
.wf-node { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: start; padding: 0 0 16px 22px; }
.wf-node:last-child { padding-bottom: 0; }
.wf-node::before { content: ''; position: absolute; left: 4px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.wf-node::after { content: ''; position: absolute; left: 8px; top: 18px; bottom: -2px; width: 1px; background: var(--line-strong); }
.wf-node:last-child::after { display: none; }
.wf-node:nth-child(2)::before { background: var(--warn); box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.12); }
.wf-node:nth-child(3)::before { background: var(--ok); box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.12); }
.wf-tag { font-size: 11.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); line-height: 22px; }
.wf-val { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--fg); font-size: 14.5px; line-height: 22px; min-width: 0; overflow-wrap: anywhere; }
.wf-val .ic { color: var(--accent-strong); flex: none; }
.wf-val.muted { color: var(--body); }
.wf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wf-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border: 1px solid var(--line-strong); border-radius: 8px; background: rgba(255, 255, 255, 0.03); font-size: 13px; color: var(--fg); }
.wf-chip .ic { color: var(--muted); font-size: 14px; }
.wf-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.wf-meta { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; font-size: 13px; color: var(--muted); min-width: 0; }
.wf-last { display: inline-flex; align-items: center; gap: 6px; }
.wf-last.ok .ic { color: var(--ok); }
.wf-last.failed .ic, .wf-last.partial .ic { color: var(--warn); }
.wf-spark { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.wf-spark i { display: block; width: 5px; height: 100%; border-radius: 2px; background: var(--ok); opacity: 0.85; }
.wf-spark i.partial { background: var(--warn); }
.wf-spark i.failed { background: var(--bad); }
.wf-spark i.test { background: var(--accent-strong); }
.wf-runs { display: grid; gap: 8px; }
.wf-run { border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.015); }
.wf-run[open] { border-color: var(--line-strong); }
.wf-run summary { display: grid; grid-template-columns: auto minmax(120px, 1fr) minmax(0, 1.4fr) auto; gap: 14px; align-items: center; padding: 12px 16px; cursor: pointer; list-style: none; font-size: 14px; }
.wf-run summary::-webkit-details-marker { display: none; }
.wf-run-name { display: grid; min-width: 0; }
.wf-run-name b { color: var(--fg); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-run-name .muted { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-run-sum { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.wf-run-when { font-size: 12.5px; white-space: nowrap; }
.wf-run .wf-result { padding: 4px 16px 16px; }
.wf-run .wf-result > .row-between { justify-content: flex-end; }
.wf-run .wf-result > .row-between .pill { display: none; }
.wf-result { display: grid; gap: 12px; }
.wf-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wf-steps li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; color: var(--body); overflow-wrap: anywhere; }
.wf-stepicon { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; margin-top: 1px; }
.wf-steps li.ok .wf-stepicon { color: var(--ok); background: rgba(74, 222, 128, 0.1); }
.wf-steps li.bad { border-color: rgba(248, 113, 113, 0.3); }
.wf-steps li.bad .wf-stepicon { color: var(--bad); background: rgba(248, 113, 113, 0.1); }
.wf-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.wf-tpl { display: flex; gap: 14px; align-items: flex-start; text-align: left; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: inherit; transition: border-color 0.2s, background 0.2s, transform 0.2s var(--ease); }
.wf-tpl:not(:disabled):hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent-soft); transform: translateY(-2px); }
.wf-tpl:disabled { opacity: 0.7; cursor: default; }
.wf-tpl .icon-tile { flex: none; }
.wf-tpl-text { display: grid; gap: 3px; min-width: 0; }
.wf-tpl-text b { color: var(--fg); font-weight: 600; }
.wf-tpl-text small { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.wf-hint { color: var(--faint); font-size: 13px; margin: 0; }
.field > .wf-hint { margin-top: 2px; }

.wf-edit-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.wf-edit-name { flex: 1 1 280px; min-width: 0; }
.wf-name { height: 52px; font-size: 22px; font-weight: 600; letter-spacing: -0.03em; }
.wf-on { gap: 12px; }
.wf-edit { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.wf-edit-main { display: grid; min-width: 0; }
.wf-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 20px; }
.wf-rail { display: flex; flex-direction: column; align-items: center; padding-top: 2px; }
.wf-num { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent-strong); font-weight: 700; }
.wf-line { flex: 1; width: 2px; margin: 8px 0; border-radius: 2px; background: linear-gradient(var(--line-strong), var(--line)); }
.wf-body { padding-bottom: 32px; min-width: 0; }
.wf-step:last-child .wf-body { padding-bottom: 0; }
.wf-box { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-panel); }
.wf-box-head { margin-bottom: 20px; }
.wf-box-head h3 { font-size: 18px; letter-spacing: -0.02em; color: var(--fg); }
.wf-box-head p { margin-top: 2px; color: var(--muted); font-size: 14px; }
.wf-conds { display: grid; gap: 12px; margin-bottom: 16px; }
.wf-cond { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 10px; align-items: center; }
.wf-acts { display: grid; gap: 18px; margin-bottom: 22px; }
.wf-act { border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.02); }
.wf-act-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.wf-act-num { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: var(--raised); border: 1px solid var(--line-strong); font-size: 12.5px; font-weight: 700; color: var(--fg); }
.wf-act-title { flex: 1; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--fg); min-width: 0; }
.wf-act-title .ic { color: var(--accent-strong); }
.wf-act-tools { gap: 4px; flex-wrap: nowrap; }
.wf-x { width: 32px; padding: 0; display: inline-grid; place-items: center; }
.wf-act-body { padding: 18px 16px 4px; }
.wf-act > .callout { margin: 14px 14px 0; }
.wf-add { display: grid; gap: 14px; padding-top: 20px; border-top: 1px dashed var(--line-strong); }
.wf-add-group { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: start; }
.wf-add-group .wf-tag { line-height: 32px; }
.wf-day[aria-pressed='true'], .wf-add .chip-btn:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--accent-strong); background: var(--accent-soft); }
.wf-side { position: sticky; top: 84px; display: grid; gap: 22px; }
.wf-side .panel-pad { padding: 22px; }
.wf-save { display: grid; gap: 10px; }
.wf-save .btn { width: 100%; justify-content: center; }
@media (max-width: 1180px) { .wf-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1040px) { .wf-edit { grid-template-columns: minmax(0, 1fr); } .wf-side { position: static; } }
@media (max-width: 720px) {
  .wf { gap: 32px; }
  .wf-board { gap: 12px; }
  .wf-tile { padding: 16px 16px 16px; }
  .wf-tile b { font-size: 30px; }
  .wf-grid { gap: 16px; }
  .wf-card { padding: 20px; }
  .wf-step { grid-template-columns: 30px minmax(0, 1fr); gap: 12px; }
  .wf-num { width: 30px; height: 30px; font-size: 13px; }
  .wf-box { padding: 20px 18px; }
  .wf-cond { grid-template-columns: minmax(0, 1fr) auto; }
  .wf-cond > :nth-child(1), .wf-cond > :nth-child(2), .wf-cond > :nth-child(3) { grid-column: 1 / 2; }
  .wf-cond > :nth-child(4) { grid-column: 2; grid-row: 1; }
  .wf-add-group { grid-template-columns: 1fr; gap: 4px; }
  .wf-add-group .wf-tag { line-height: 1.4; }
  .wf-run summary { grid-template-columns: auto minmax(0, 1fr) auto; }
  .wf-run-sum { display: none; }
}

.role-multi { display: grid; gap: 12px; }
.role-multi .chip-row { min-height: 34px; align-items: center; }

.role-pick { display: grid; gap: 4px; max-height: 340px; overflow: auto; margin: 4px 0 14px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.015); }
.role-pick-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px; cursor: pointer; color: var(--fg); }
.role-pick-row:hover { background: var(--raised); }
.role-pick-row input { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }

/* Moderator panel: a strip across the top, a toolbox row, then the console on the left and a tabbed deck on the right. */
.md { display: grid; gap: 16px; margin-top: 14px; }
.md-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-panel); }
.md-cell { display: grid; gap: 5px; align-content: start; min-width: 0; padding: 16px 20px 18px; }
.md-cell + .md-cell { border-left: 1px solid var(--line); }
.md-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); }
.md-big { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 18px; letter-spacing: -0.02em; color: var(--fg); }
.md-big b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.md-timer { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.md-big .md-timer { font-size: 22px; font-weight: 600; }
.md-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--faint); }
.md-dot.live { background: var(--ok); box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.15); }
.md-sub { font-size: 13px; color: var(--muted); }
.md-cell-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.md-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.md-tool { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--fg); font-size: 13.5px; font-weight: 500; transition: border-color 0.15s, background 0.15s; }
.md-tool:hover { border-color: var(--accent); background: var(--accent-soft); }
.md-tool .ic { color: var(--accent-strong); }
.md-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.9fr); gap: 20px; align-items: start; }
.md-console, .md-deck { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-panel); min-width: 0; }
.md-console { display: grid; gap: 22px; padding: 26px 28px; }
.md-head h2 { font-size: 20px; letter-spacing: -0.03em; }
.md-head p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.md-block { display: grid; gap: 12px; }
.md-block > .md-label { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.md-hint { margin: 0; color: var(--faint); font-size: 14px; }
.md-find { display: flex; gap: 10px; align-items: center; }
.md-find .search { flex: 1; }
.md-target { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(255, 255, 255, 0.02); }
.md-target-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.md-record { display: grid; gap: 8px; font-size: 14px; }
.md-record ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.md-record li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--body); }
.md-case-text { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.md-link { width: fit-content; color: var(--accent-strong); font-size: 13.5px; }
.md-quick { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.md-quick .md-label { margin-right: 4px; }
.md-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; }
.md-action { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255, 255, 255, 0.02); color: var(--fg); font-size: 14px; text-align: left; transition: border-color 0.15s, background 0.15s; }
.md-action:hover { border-color: var(--line-strong); }
.md-action .ic { flex: none; color: var(--accent-strong); }
.md-action b { font-weight: 600; }
.md-action[aria-pressed='true'] { border-color: var(--accent); background: var(--accent-soft); }
.md-action.md-ban[aria-pressed='true'], .md-action.md-kick[aria-pressed='true'] { border-color: var(--bad); background: rgba(248, 113, 113, 0.07); }
.md-action.md-ban[aria-pressed='true'] .ic, .md-action.md-kick[aria-pressed='true'] .ic { color: var(--bad); }
.md-lengths { display: flex; flex-wrap: wrap; gap: 8px; }
.md-lengths .chip-btn[aria-pressed='true'], .md-console .chip-row .chip-btn:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--accent-strong); background: var(--accent-soft); }
.md-reason { margin: 0; }
.md-go { width: 100%; justify-content: center; height: 46px; font-size: 15px; }
.md-done { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid rgba(74, 222, 128, 0.3); border-radius: 12px; background: rgba(74, 222, 128, 0.05); }
.md-done.bad { border-color: rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.05); }
.md-done > .ic { flex: none; color: var(--ok); }
.md-done.bad > .ic { color: var(--warn); }
.md-done > div { flex: 1; display: grid; min-width: 0; }
.md-done span { color: var(--muted); font-size: 14px; }
.md-deck { position: sticky; top: 76px; display: flex; flex-direction: column; max-height: calc(100vh - 100px); min-height: 420px; overflow: hidden; }
.md-tabs { flex: none; display: flex; gap: 0; padding: 8px 8px 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.md-tab { display: inline-flex; flex: 1 1 auto; justify-content: center; align-items: center; gap: 7px; padding: 10px 7px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font-size: 13px; font-weight: 500; white-space: nowrap; transition: color 0.15s, border-color 0.15s; }
.md-tab:hover { color: var(--fg); }
.md-tab[aria-selected='true'] { color: var(--fg); border-bottom-color: var(--accent); }
.md-tab em { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--raised); color: var(--muted); font-size: 11.5px; font-style: normal; font-weight: 600; text-align: center; }
.md-tab em.warn { background: rgba(251, 191, 36, 0.16); color: var(--warn); }
.md-toolbar { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.md-toolbar .search { min-width: 150px; }
.md-toolbar .seg { display: flex; width: 100%; }
.md-toolbar .seg button { flex: 1; padding: 6px 8px; white-space: nowrap; }
.md-toolbar .md-type { width: auto; min-width: 120px; }
.md-list { display: grid; align-content: start; gap: 2px; flex: 1; overflow: auto; padding: 8px; }
.md-list .md-hint { padding: 14px 10px; }
.md-list .ev { padding: 9px 8px; }
.md-player { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--fg); text-align: left; }
.md-player:hover { background: var(--raised); }
.md-player[aria-pressed='true'] { border-color: var(--accent); background: var(--accent-soft); }
.md-player-name { display: grid; min-width: 0; }
.md-player-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.md-player-name small { color: var(--faint); font-size: 12px; }
.md-flags { display: flex; align-items: center; gap: 6px; flex: none; }
.md-case { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 11px 10px; border-radius: 10px; }
.md-case:hover { background: var(--raised); }
.md-case-main { display: grid; gap: 4px; min-width: 0; }
.md-case-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.md-case-who { padding: 0; border: 0; background: none; color: var(--fg); font-weight: 600; font-size: 14px; }
.md-case-who:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.md-case-reason { margin: 0; color: var(--body); font-size: 13.5px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.md-call { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 10px; }
.md-call > div { display: grid; min-width: 0; }
.md-map { display: grid; gap: 10px; padding: 4px 2px 8px; }
.md-map .cmap { border-radius: 12px; }
.md-map .cad-legend { margin: 0; }
.md-waiting { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border: 1px solid rgba(251, 191, 36, 0.35); border-radius: 12px; background: rgba(251, 191, 36, 0.05); }
.md-waiting > .ic { flex: none; color: var(--warn); }
.md-waiting > div { flex: 1; display: grid; min-width: 0; }
.md-waiting span { color: var(--muted); font-size: 14px; }
.md-req { display: grid; gap: 7px; padding: 12px 10px; border-radius: 10px; }
.md-req + .md-req { border-top: 1px solid var(--line); border-radius: 0; }
.md-req-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.md-req-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.md-req-denied, .md-req-cancelled { opacity: 0.8; }
.md-quote { margin: 12px 0 0; padding: 10px 14px; border-left: 3px solid var(--line-strong); color: var(--body); overflow-wrap: anywhere; }
.md-meter { height: 6px; border-radius: 999px; background: var(--raised); overflow: hidden; margin-top: 4px; }
.md-meter i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width 0.4s var(--ease); }
.md-meter i.done { background: var(--ok); }
.md-crew { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.md-crew > .md-label { margin-right: 6px; }
.md-crew .md-hint { font-size: 13.5px; }
.md-mate { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.02); color: var(--fg); font-size: 13px; }
.md-mate b { font-weight: 600; }
.md-mate small { color: var(--muted); font-size: 12px; }
.md-mate.off { opacity: 0.75; }
.md-mate.me { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
button.md-mate:hover { border-color: var(--accent); background: var(--accent-soft); }
.md-suggest { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 12px; background: var(--accent-soft); }
.md-suggest[hidden] { display: none; }
.md-suggest > .ic { flex: none; color: var(--accent-strong); }
.md-suggest > div { flex: 1; display: grid; gap: 2px; min-width: 0; }
.md-suggest span { color: var(--muted); font-size: 13.5px; }
.md-suggest .md-suggest-auto { color: var(--warn); }
.md-suggest-act { display: grid; justify-items: end; gap: 6px; flex: none; }
.md-evidence { display: grid; gap: 10px; }
.md-evidence-row { display: flex; gap: 8px; }
.md-evidence-row .input { flex: 1; min-width: 0; }
.md-evidence-row .btn { flex: none; }
.md-preview { display: flex; align-items: flex-start; gap: 10px; }
.md-preview[hidden] { display: none; }
.md-preview img, .md-preview video { max-width: min(320px, 100%); max-height: 200px; border-radius: 10px; border: 1px solid var(--line); background: #000; }
.md-console.dropping { outline: 2px dashed var(--accent); outline-offset: -8px; }
.md-timeline { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.md-timeline-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.md-timeline-list { display: grid; gap: 2px; max-height: 320px; overflow: auto; }
.md-timeline-list .ev { padding: 6px 8px; font-size: 13px; }
.md-link-btn { padding: 0; border: 0; background: none; color: var(--accent-strong); font-size: 13px; }
.md-link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.md-act { flex: none; padding: 3px 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: none; color: var(--muted); font-size: 12px; font-weight: 500; opacity: 0.55; transition: opacity 0.15s, color 0.15s, border-color 0.15s; }
.md-list .ev:hover .md-act, .md-act:focus-visible { opacity: 1; }
.md-act:hover { color: var(--accent-strong); border-color: var(--accent); }
@media (hover: none) { .md-act { opacity: 1; } }
.md-alert { display: grid; gap: 7px; padding: 12px 10px; border-radius: 10px; }
.md-alert + .md-alert { border-top: 1px solid var(--line); border-radius: 0; }
.md-call > .md-call-side { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex: none; }
.md-inline { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--muted); font-size: 13px; }
.md-chat { display: flex; flex-direction: column; min-height: 100%; }
.md-chat-list { flex: 1; display: grid; align-content: end; gap: 6px; padding: 4px 2px 10px; }
.md-msg { display: grid; gap: 2px; max-width: 88%; padding: 8px 12px; border-radius: 12px; background: var(--raised); }
.md-msg.mine { justify-self: end; background: var(--accent-soft); }
.md-msg-top { display: flex; align-items: baseline; gap: 8px; }
.md-msg-top b { font-size: 13px; font-weight: 600; }
.md-msg-top small { font-size: 11.5px; }
.md-msg p { margin: 0; color: var(--body); font-size: 14px; overflow-wrap: anywhere; white-space: pre-wrap; }
.md-chat-form { position: sticky; bottom: -8px; display: flex; gap: 8px; padding: 10px 0 8px; background: var(--panel); }
.md-chat-form .input { flex: 1; min-width: 0; }
.md-recap { display: grid; gap: 14px; }
.md-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.md-stat { display: grid; gap: 2px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.md-stat b { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.md-stat span { color: var(--muted); font-size: 12.5px; }
.md-recap p { margin: 0; }
.md-top { display: grid; gap: 6px; }
.md-top ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
@media (max-width: 1300px) { .md-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md-cell:nth-child(3) { border-left: 0; } .md-cell:nth-child(n + 3) { border-top: 1px solid var(--line); } }
@media (max-width: 1100px) { .md-body { grid-template-columns: minmax(0, 1fr); } .md-deck { position: static; max-height: 560px; } }
@media (max-width: 560px) { .md-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md-evidence-row { flex-wrap: wrap; } .md-evidence-row .btn { flex: 1; } }
@media (max-width: 760px) { .md-strip { grid-template-columns: minmax(0, 1fr); } .md-cell + .md-cell { border-left: 0; border-top: 1px solid var(--line); } }
@media (max-width: 560px) { .md-console { padding: 20px 18px; } .md-find { flex-wrap: wrap; } .md-find .btn { flex: 1; } }

.dl-cmd { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 14px; margin-bottom: 14px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 12px; background: var(--accent-soft); }
.dl-cmd b { color: var(--fg); }
.dl-cmd p { margin: 0; font-size: 14px; }
.dl-cmd-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.dl-cmd-row code { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 9px; background: rgba(0, 0, 0, 0.45); border: 1px solid var(--line); font-family: var(--mono); font-size: 12.5px; color: #d4d4d8; overflow-x: auto; white-space: nowrap; }
.dl-or { margin: 0 0 10px; font-size: 14px; }

.settings { display: grid; gap: 16px; }
.settings .set-title { font-size: 30px; letter-spacing: -0.05em; text-align: center; margin-bottom: 4px; }
.set-card { width: 100%; display: grid; gap: 14px; justify-items: start; }
.set-card h2 { font-size: 20px; letter-spacing: -0.03em; }
.set-card h3 { font-size: 15px; margin-top: 6px; }
.set-card .who, .set-card .kv, .set-card .err { width: 100%; margin: 0; }
.set-card .hint { margin: 0; }
@media (max-width: 560px) { .set-card .kv { grid-template-columns: 1fr; gap: 2px 0; } .set-card .kv dd { margin-bottom: 8px; } }
/* Settings tabs and the Billing tab */
.set-tabs { display: flex; justify-content: center; gap: 4px; padding: 3px; margin: 0 auto 4px; width: fit-content; max-width: 100%; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); }
.set-tab { height: 34px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-size: 14px; font-weight: 500; transition: background 0.2s, color 0.2s; }
.set-tab:hover { color: var(--fg); }
.set-tab[aria-selected='true'] { background: var(--selected); color: var(--fg); }
.set-body, .set-billing { display: grid; gap: 16px; min-width: 0; }
.set-billing-note { text-align: center; margin: 0; }
.set-sub-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.set-sub-head h2 { margin: 0; }
.set-sub[data-state='ended'] { opacity: 0.75; }
.set-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 560px) { .set-actions .btn { flex: 1 1 100%; } }
.type-pick { display: grid; gap: 8px; }
.type-option { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 14px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.02); color: var(--muted); cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; }
.type-option:hover { border-color: var(--line-strong); color: var(--fg); }
.type-option[aria-checked='true'] { border-color: var(--accent); background: var(--accent-soft); color: var(--fg); box-shadow: inset 0 0 0 1px var(--accent); }
.type-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--selected); color: var(--muted); }
.type-option[aria-checked='true'] .type-icon { background: var(--accent); color: var(--accent-ink); }
.type-icon .ic, .type-icon svg { width: 16px; height: 16px; }
.type-text { display: grid; gap: 1px; padding-right: 28px; }
.type-text b { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--fg); }
.type-text small { font-size: 12px; line-height: 1.35; color: var(--muted); }
.type-tick { position: absolute; top: 50%; right: 14px; margin-top: -9px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); opacity: 0; transform: scale(0.6); transition: opacity 0.15s, transform 0.15s var(--ease); }
.type-tick svg { width: 10px; height: 10px; }
.type-option[aria-checked='true'] .type-tick { opacity: 1; transform: none; }
.type-hint { margin-top: 2px; }
.new-form .field:last-of-type { margin-bottom: 10px; }
.new-form .notice-inline { margin: -4px 0 16px; }
.owner-team { margin-top: 48px; }
.owner-team .page-title h2 { font-size: 26px; letter-spacing: -0.04em; font-weight: 700; }
.vcard.apply-card { max-width: 720px; padding: 0; overflow: hidden; }
.apply-card > * { padding-left: 44px; padding-right: 44px; }
.apply-card > .feed-empty { padding: 60px 0; }
.apply-card > .apply { padding-left: 0; padding-right: 0; }
.form-section, .form-foot { padding-left: 44px; padding-right: 44px; }
.apply-card > h1:first-child { padding-top: 36px; }
.apply-card > h1:first-child + .lead { padding-bottom: 36px; margin: 0; }
.apply-card h1, .apply-card .lead { text-align: left; }
.form-head { padding-top: 36px; padding-bottom: 26px; background: linear-gradient(180deg, color-mix(in srgb, var(--dept, var(--accent)) 9%, transparent), transparent); border-bottom: 1px solid var(--line); }
.apply-card > .form-head:last-child, .apply-card > .form-head + .btn { margin-bottom: 0; }
.apply-card > .form-head + .btn, .apply-card > .form-head + .form-closed { margin: 26px 44px 36px; width: auto; }
.form-org { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; font-size: 13.5px; }
.form-org-mark { width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--fg); background: var(--raised); border: 1px solid var(--line-strong); }
.form-org-name { font-weight: 600; color: var(--fg); }
.form-org-kind { color: var(--muted); padding-left: 10px; border-left: 1px solid var(--line-strong); }
.form-title { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.apply-card .form-title h1 { margin: 0; font-size: 32px; line-height: 1.15; letter-spacing: -0.045em; }
.apply-card .form-head .lead { margin: 0; max-width: 560px; color: var(--body); font-size: 15.5px; }
.form-meta { list-style: none; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.015); font-size: 13px; color: var(--muted); }
.form-meta li { display: inline-flex; align-items: center; gap: 7px; }
.form-meta .ic { font-size: 14px; color: var(--faint); }
.dept-badge { --dept-c: var(--dept, var(--accent)); flex: none; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 10px; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; color: color-mix(in srgb, var(--dept-c) 55%, #fff); background: color-mix(in srgb, var(--dept-c) 16%, var(--panel)); border: 1px solid color-mix(in srgb, var(--dept-c) 40%, transparent); }
.dept-badge-lg { min-width: 48px; height: 48px; border-radius: 12px; font-size: 14px; }
.apply-card .apply { gap: 0; margin: 0; padding-top: 0; border-top: 0; }
.form-section { padding-top: 32px; }
.form-section + .form-section { margin-top: 32px; border-top: 1px solid var(--line); }
.form-step { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.form-step-num { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--accent-strong); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.form-step h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; line-height: 28px; }
.form-step p { margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.apply-card .dept-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.apply-card .dept-option { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.02); color: var(--fg); cursor: pointer; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; }
.apply-card .dept-option:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.035); }
.apply-card .dept-option[aria-checked='true'] { border-color: var(--dept, var(--accent)); background: color-mix(in srgb, var(--dept, var(--accent)) 8%, var(--panel)); box-shadow: inset 0 0 0 1px var(--dept, var(--accent)); }
.apply-card .dept-text { display: grid; gap: 3px; min-width: 0; flex: 1; }
.apply-card .dept-text b { font-size: 14.5px; font-weight: 600; }
.apply-card .dept-text small { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.dept-radio { width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line-strong); color: transparent; font-size: 12px; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.dept-option[aria-checked='true'] .dept-radio { background: var(--dept, var(--accent)); border-color: var(--dept, var(--accent)); color: #fff; }
.form-asks { display: grid; gap: 26px; }
.apply-card .ask { gap: 10px; }
.apply-card .ask-head { justify-content: flex-start; align-items: baseline; gap: 10px; }
.apply-card .ask-head label { flex: 1; font-size: 15px; }
.ask-num { flex: none; font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--faint); min-width: 20px; }
.apply-card .ask .input, .apply-card .ask .textarea, .apply-card .ask .rating { margin-left: 30px; width: calc(100% - 30px); }
.apply-card .ask .textarea { min-height: 140px; padding: 12px 13px; line-height: 1.55; resize: vertical; }
.apply-card .ask .optional { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); }
.form-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px 28px; margin-top: 36px; padding-top: 24px; padding-bottom: 32px; border-top: 1px solid var(--line); background: rgba(255, 255, 255, 0.015); }
.apply-card .form-foot .err { margin: 0; grid-column: 1 / -1; grid-row: 1; }
.form-notice { display: flex; gap: 12px; align-items: flex-start; }
.form-notice .ic { flex: none; margin-top: 2px; font-size: 16px; color: var(--faint); }
.form-notice p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.form-send { gap: 10px; }
.form-closed { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; border-radius: 12px; border: 1px dashed var(--line-strong); color: var(--muted); font-size: 14px; font-weight: 500; }
.form-done { padding-top: 48px; padding-bottom: 44px; text-align: center; }
.apply-card .form-done h1, .apply-card .form-done .lead { text-align: center; }
.apply-card .form-done .lead { max-width: 480px; margin: 0 auto; }
.form-receipt { display: inline-grid; grid-auto-flow: column; gap: 0; margin: 26px auto 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; text-align: left; }
.form-receipt div { padding: 12px 20px; }
.form-receipt div + div { border-left: 1px solid var(--line); }
.form-receipt dt { font-size: 12px; color: var(--faint); }
.form-receipt dd { margin: 2px 0 0; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .apply-card > *, .form-section, .form-foot { padding-left: 20px; padding-right: 20px; }
  .apply-card > .apply { padding-left: 0; padding-right: 0; }
  .apply-card > .form-head + .btn, .apply-card > .form-head + .form-closed { margin: 22px 20px 28px; }
  .form-head { padding-top: 26px; padding-bottom: 22px; }
  .apply-card .form-title h1 { font-size: 26px; }
  .form-title { gap: 12px; }
  .dept-badge-lg { min-width: 42px; height: 42px; font-size: 13px; }
  .apply-card .dept-pick { grid-template-columns: 1fr; }
  .apply-card .ask .input, .apply-card .ask .textarea, .apply-card .ask .rating { margin-left: 0; width: 100%; }
  .form-section { padding-top: 26px; }
  .form-section + .form-section { margin-top: 26px; }
  .form-foot { grid-template-columns: 1fr; }
  .form-send { width: 100%; }
  .form-foot { padding-bottom: 24px; }
}
.panel-page #view > .block, .panel-page #view > .panel-grid { margin-top: 32px; }
.panel-page #view > .page-title { margin-bottom: 0; }
.live-block .panel-head { margin-bottom: 8px; }
.live-block .bars { height: 120px; }
.cad-strip:empty { display: none; }
.plate-btn { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 6px; }
.plate-btn:hover .lplate { box-shadow: 0 0 0 2px var(--accent), 0 2px 6px rgba(0, 0, 0, 0.4); }
.flip { display: inline-flex; transform: scaleX(-1); }
.cad-feed-open { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.cad-feed-cta { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 8px; background: rgba(0, 0, 0, 0.75); color: #fff; font-size: 12px; font-weight: 600; opacity: 0; transform: translateY(4px); transition: opacity 0.15s, transform 0.15s; z-index: 3; }
.cad-feed-cta .ic { width: 13px; height: 13px; }
.cad-feed-open:hover .cad-feed-cta, .cad-feed-open:focus-visible .cad-feed-cta { opacity: 1; transform: none; }
.cad-feed-open:hover .cmap { filter: grayscale(0.6) contrast(1.15) brightness(1); }
.cad-feed-alert { position: absolute; right: 8px; top: 26px; padding: 2px 7px; border-radius: 4px; background: #dc2626; color: #fff; font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: 0.1em; animation: pulse 1s ease-in-out infinite; z-index: 2; }
.cad-feed-coords { position: absolute; left: 10px; bottom: 10px; font-family: var(--mono); font-size: 11px; color: #fde68a; text-shadow: 0 1px 2px #000; z-index: 2; }
.cad-feed-screen.big { aspect-ratio: 16 / 10; border-radius: 14px; border: 1px solid #222; }
.cad-feed-screen.big .cmap { cursor: grab; }
.cad-feed-screen.big .cad-feed-hud { left: 12px; right: 12px; top: 10px; font-size: 12px; }
.cad-feed-screen.big .cad-feed-read { left: auto; right: 10px; bottom: 10px; }
.cad-feed-screen.big::after { z-index: 1; }
.cad-feed-screen.big .cmap-controls { z-index: 4; top: 34px; }
.cmap-pin.k-player.tagged .cmap-dot { width: 10px; height: 10px; box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.35); }
.cad-cam-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cad-cam-title { display: flex; align-items: baseline; gap: 10px; flex: 1; min-width: 0; }
.cad-cam-title h2 { font-size: 20px; letter-spacing: -0.02em; }
.cad-cam-detail { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.cad-cam-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cad-cam-stats > div { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.cad-cam-stats small { color: var(--muted); font-size: 12px; }
.cad-cam-stats b { font-size: 22px; color: var(--fg); }
.cad-cam-stats .bad b { color: var(--bad); }
.cad-cam-cars { display: grid; gap: 8px; }
.cad-cam-car { display: grid; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--raised); border: 1px solid var(--line); }
.cad-cam-car.hot { border-color: rgba(248, 113, 113, 0.55); background: color-mix(in srgb, var(--bad) 7%, var(--raised)); }
.cad-cam-car-who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cad-cam-car-who b { color: var(--fg); }
.cad-cam-car-who .muted { margin-left: auto; font-size: 12px; }
.cad-cam-car-list { display: grid; gap: 6px; }
.cad-cam-plate { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.cad-cam-plate > span b { color: var(--fg); }
.cad-cam-near { font-size: 13px; }
.cad-cam-near .muted { margin-left: auto; }
.chat { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: stretch; }
.chat-filters { display: grid; gap: 10px; align-content: start; padding: 14px; }
.chat-side { display: grid; gap: 8px; }
.chat-side .section-label { margin: 6px 2px 0; }
.chat-chans { display: grid; gap: 2px; }
.chat-chan-btn { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 7px 9px; border: 0; border-radius: 8px; background: none; color: var(--body); font-size: 13.5px; text-align: left; }
.chat-chan-btn:hover { background: var(--raised); }
.chat-chan-btn[aria-pressed='true'] { background: var(--selected); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-strong); }
.chat-chan-btn i { width: 9px; height: 9px; border-radius: 50%; }
.chat-chan-btn small { color: var(--faint); font-variant-numeric: tabular-nums; }
.chat-kinds { display: grid; gap: 6px; }
.chat-kind { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--body); cursor: pointer; }
.chat-main { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: max(520px, calc(100vh - 330px)); padding: 0; overflow: hidden; }
body.page-full .chat-main { height: calc(100vh - 260px); }
.chat-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.chat-top b { color: var(--fg); }
.chat-scroll { position: relative; min-height: 0; }
.chat-list { height: 100%; overflow-y: auto; padding: 10px 16px 14px; display: flex; flex-direction: column; gap: 2px; }
.chat-jump { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; border: 0; background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 600; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5); }
.chat-jump[hidden] { display: none; }
.chat-day { align-self: center; margin: 12px 0 6px; padding: 2px 10px; border-radius: 999px; background: var(--raised); color: var(--faint); font-size: 11.5px; }
.chat-msg { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 1px 8px; border-radius: 10px; }
.chat-msg.first { margin-top: 8px; padding-top: 4px; }
.chat-msg:hover { background: rgba(255, 255, 255, 0.025); }
.chat-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--c) 22%, transparent); color: var(--c); font-family: var(--mono); font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); }
.chat-avatar .ic { width: 16px; height: 16px; }
.chat-avatar.ghost { height: 0; background: none; box-shadow: none; }
.chat-body { min-width: 0; }
.chat-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; line-height: 1.4; }
.chat-head b { color: var(--fg); font-size: 14px; }
.chat-head time { color: var(--faint); font-size: 11.5px; }
.chat-chan { padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.chat-text { margin: 1px 0 0; color: var(--body); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.chat-msg.mine .chat-text { color: var(--fg); }
.chat-msg.mine .chat-head b::after { content: ' (you)'; color: var(--faint); font-weight: 400; font-size: 12px; }
.chat-msg.k-emergency { background: rgba(239, 68, 68, 0.1); box-shadow: inset 3px 0 0 #ef4444; padding-bottom: 6px; }
.chat-msg.k-emergency .chat-text { color: #fecaca; font-weight: 600; }
.chat-msg.k-alert { background: rgba(245, 158, 11, 0.08); box-shadow: inset 3px 0 0 #f59e0b; padding-bottom: 6px; }
.chat-msg.k-alert .chat-text { color: #fde68a; }
.chat-compose { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--line); background: var(--raised); }
.chat-chan-sel { width: auto; min-width: 130px; }
@container cad (max-width: 760px) { .chat { grid-template-columns: 1fr; } .chat-chans { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .chat-main { height: 70vh; } }
@container cad (max-width: 900px) { .cad-cam-detail { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .chat-compose { flex-wrap: wrap; } .chat-chan-sel { flex: 1; } }
.dept-card-cad { --dept: #6a9cff; border-style: dashed; }
.dept-badge-cad { --dept: #6a9cff; }
.dept-badge-cad .ic { width: 18px; height: 18px; }
.dept-badge-lg.dept-badge-cad .ic { width: 22px; height: 22px; }
.dept-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: color-mix(in srgb, var(--dept) 60%, #fff); background: color-mix(in srgb, var(--dept) 14%, transparent); white-space: nowrap; }
.dept-cad { display: grid; gap: 12px; }
.dept-cad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.dept-cad-card { display: grid; gap: 12px; align-content: start; border-top: 3px solid var(--dept); }
.dept-cad-ranks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.dept-cad-card .dept-cad-ranks { grid-template-columns: 1fr; }
.dept-cad-rank { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 6px 6px 12px; border-radius: 10px; background: var(--raised); border: 1px solid var(--line); font-size: 13.5px; color: var(--fg); }
.dept-cad-rank .select { min-width: 130px; }
.dept-link { display: grid; gap: 12px; }
.dept-link-body { display: grid; gap: 12px; }
.dept-link-srv { padding: 0; }
.dept-link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; align-items: start; }
.dept-link-ranks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.dept-link-ranks .select { min-width: 150px; max-width: 60%; }
.dept-link-code .input { min-width: 0; }
.link-dept { display: grid; gap: 12px; }
.dept-cad-sel { min-width: 150px; color: var(--muted); }
.dept-cad-sel.on { color: var(--ok); }
.chat-input { position: relative; }
.chat-input .input { padding-right: 62px; }
.chat-count { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 11px; font-family: var(--mono); color: var(--muted); pointer-events: none; }
.chat-count.near { color: #fbbf24; }
.cad-map-unit i.team-dot { width: 11px; height: 11px; border: 2.5px solid; box-sizing: content-box; }
.cad-modes { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; }
.cad-modes button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-weight: 600; font-size: 13px; cursor: pointer; }
.cad-modes button .ic { width: 15px; height: 15px; }
.cad-modes button:hover { color: var(--fg); }
.cad-modes button[aria-pressed="true"] { color: #fff; border-color: transparent; background: var(--mode, var(--accent)); }
.cad-mode-police { --mode: #3b82f6; }
.cad-mode-fire { --mode: #dc2626; }
.cad-mode-dot { --mode: #ea580c; }
.cad-mode-civ { --mode: #6b7280; }
.cad-mode-fire .cad-mark, .cad-mode-dot .cad-mark, .cad-mode-civ .cad-mark { background: color-mix(in srgb, var(--mode) 22%, transparent); color: var(--mode); border-color: color-mix(in srgb, var(--mode) 45%, transparent); }
.cad-civ { display: grid; gap: 0; align-content: start; min-width: 0; }
.cad-civ > .stack { gap: 16px; }
.cad-civ-check { align-self: end; display: inline-flex; align-items: center; gap: 8px; padding-bottom: 10px; }
.cad-reg-list { display: grid; gap: 8px; }
.cad-reg-row { display: flex; align-items: center; gap: 8px; }
.cad-reg-row .cad-reg { flex: 1; }
.cad-reg { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2, rgba(255, 255, 255, 0.02)); }
.cad-reg-main { display: grid; gap: 2px; flex: 1; min-width: 140px; }
.cad-reg-main small { color: var(--muted); }
.join-cad { display: grid; gap: 12px; margin-top: 12px; }
.join-cad .input { text-transform: uppercase; letter-spacing: 0.06em; }
.cad-invite-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .cad-invite-grid { grid-template-columns: minmax(0, 1fr); } }
.cad-invites { display: grid; gap: 8px; }
.cad-invite { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); }
.cad-invite-main { display: grid; gap: 2px; min-width: 0; }
.cad-invite-main small { color: var(--muted); }
.cad-invite-code { font-size: 15px; letter-spacing: 0.06em; }
.cad-invite-note { margin: 4px 0 0; color: var(--body); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.dept-cad-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 760px) { .dept-cad-roles { grid-template-columns: minmax(0, 1fr); } }
.cad-text { position: fixed; right: 20px; bottom: 20px; z-index: 8990; width: min(440px, calc(100vw - 32px)); max-height: min(620px, calc(100vh - 120px)); display: flex; flex-direction: column; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--panel); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }
.cad-text-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.cad-text-head span { display: grid; }
.cad-text-head small { color: var(--muted); }
.cad-text-lines { flex: 1; min-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 12px; }
.cad-text-msg { max-width: 85%; display: grid; gap: 2px; }
.cad-text-msg p { margin: 0; padding: 7px 11px; border-radius: 14px; background: var(--raised); color: var(--fg); overflow-wrap: anywhere; white-space: pre-wrap; }
.cad-text-msg small { color: var(--muted); font-size: 11px; padding: 0 4px; }
.cad-text-msg.dispatch { align-self: flex-end; justify-items: end; }
.cad-text-msg.dispatch p { background: var(--accent); color: var(--accent-ink); }
.cad-text-form { display: flex; align-items: center; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.cad-text-form .input { min-height: 46px; font-size: 15px; }
.cad-text-form .grow { flex: 1; min-width: 0; }
.cad-civcall { position: fixed; left: 50%; top: 84px; z-index: 8999; transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--radius); border: 1px solid #3b82f6; background: #0b1733; color: var(--fg); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }
.cad-civcall .cad-panic-text { flex: 1; min-width: 0; }
.cad-civcall-icon { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #d70015; color: #fff; font-weight: 700; font-size: 12px; }
@media (max-width: 600px) { .cad-civcall { flex-wrap: wrap; } }

body.radio-bar-page { margin: 0; min-height: 0; height: 100vh; overflow: hidden; background: #000; }
.rbar-wrap { height: 100vh; }
.rbar { --tint: var(--accent); display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 10px; box-sizing: border-box; color: #e8e8ea; font-size: 13px; background: linear-gradient(#17181b, #0b0c0e); border-bottom: 2px solid var(--tint); user-select: none; -webkit-user-select: none; }
.rbar.theme-fire { --tint: #d8262d; }
.rbar.theme-dot { --tint: #f08a12; }
.rbar-brand { display: flex; align-items: center; gap: 6px; font-weight: 700; letter-spacing: 0.12em; font-size: 11px; color: #fff; flex: none; }
.rbar-brand .ic { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.rbar-led { width: 8px; height: 8px; border-radius: 50%; background: #2a2b2f; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6); transition: background 0.15s; }
.rbar-led.rx { background: #2fd36b; box-shadow: 0 0 8px #2fd36b; }
.rbar-led.tx { background: #ef1d1d; box-shadow: 0 0 8px #ef1d1d; }
.rbar-led.emer { background: #ff9b1a; box-shadow: 0 0 10px #ff9b1a; animation: rbar-blink 0.5s steps(2) infinite; }
@keyframes rbar-blink { 50% { opacity: 0.2; } }
.rbar-ch { display: flex; align-items: center; gap: 2px; flex: none; }
.rbar-chtext { display: grid; min-width: 92px; max-width: 130px; text-align: center; line-height: 1.15; }
.rbar-chnum { font: 600 10px var(--mono, 'Geist Mono', monospace); color: var(--tint); letter-spacing: 0.08em; }
.rbar-chname { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbar-lcd { flex: 1 1 150px; min-width: 150px; height: 44px; display: grid; align-content: center; padding: 0 12px; border-radius: 8px; background: linear-gradient(#0f1d14, #0a140e); color: #9ff0b6; font-family: 'Geist Mono', monospace; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 0 1px #1f2a22; overflow: hidden; }
.rbar-from { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbar-text { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rbar.is-rx .rbar-lcd { color: #c9ffd8; }
.rbar.is-urgent .rbar-lcd { background: linear-gradient(#2a0d0d, #180606); color: #ffb3a8; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 0 1px #6b1a1a; }
.rbar-say { display: flex; gap: 6px; flex: 4 1 420px; min-width: 240px; }
.rbar-input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid #2c2d31; background: #0d0e10; color: #fff; font: inherit; font-size: 15px; user-select: text; -webkit-user-select: text; }
.rbar-input:focus { outline: none; border-color: var(--tint); }
.rbar-input:disabled { opacity: 0.55; }
.rbar-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 34px; min-width: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid #2c2d31; background: #1b1c20; color: #e8e8ea; font-weight: 600; font-size: 12px; cursor: pointer; flex: none; }
.rbar-btn .ic { width: 15px; height: 15px; }
.rbar-btn:hover:not(:disabled) { background: #24252a; }
.rbar-btn:disabled { opacity: 0.45; cursor: default; }
.rbar-btn:focus-visible { outline: 2px solid var(--tint); outline-offset: 1px; }
.rbar-btn.on { border-color: var(--tint); color: #fff; }
.rbar-arrow, .rbar-icon { padding: 0; }
.rbar-say .rbar-talk { height: 44px; min-width: 44px; }
.rbar-talk { background: var(--tint); border-color: transparent; color: #fff; }
.rbar-talk:hover:not(:disabled) { background: var(--tint); filter: brightness(1.1); }
.rbar-emer { background: #ff7a00; border-color: transparent; color: #1a0b00; letter-spacing: 0.06em; }
.rbar-emer:hover:not(:disabled) { background: #ff8d1f; }
.rbar-emer.holding { background: #ef1d1d; color: #fff; animation: rbar-blink 0.25s steps(2) infinite; }
@media (max-width: 760px) { .rbar-brand span, .rbar-say { display: none; } }
body.radio-style-full, body.radio-style-full .rbar-wrap { background: transparent; }
.rfull { display: flex; flex-direction: column; align-items: center; height: 100vh; overflow: hidden; color: #e8e8ea; user-select: none; -webkit-user-select: none; }
.rfull-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 260px; height: 34px; padding: 0 4px 0 10px; border-radius: 10px; background: rgba(12, 13, 15, 0.86); border: 1px solid #2c2d31; box-sizing: border-box; flex: none; }
.rfull-grip { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: #c9c9ce; }
.rfull-grip .ic { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.rfull-actions { display: flex; gap: 2px; }
.rfull-btn { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: 7px; border: 0; background: transparent; color: #c9c9ce; cursor: pointer; }
.rfull-btn .ic { width: 14px; height: 14px; }
.rfull-btn:hover { background: #24252a; color: #fff; }
.rfull-btn.on { background: var(--accent); color: #fff; }
.rfull-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rfull-radio { flex: 1; display: flex; justify-content: center; width: 100%; }
.rfull-status { margin-top: 40px; padding: 10px 14px; border-radius: 10px; background: rgba(12, 13, 15, 0.86); font-size: 13px; text-align: center; max-width: 240px; }
.rfull .radio-input { background: rgba(12, 13, 15, 0.92); }
.rfull .radio-log { background: rgba(12, 13, 15, 0.94); max-height: 160px; }
.radio-movable .rbar, .radio-movable .rfull-top, .radio-movable .rk { -webkit-app-region: drag; cursor: move; }
.radio-movable .rbar button, .radio-movable .rbar input, .radio-movable .rfull-top button, .radio-movable .rk .rk-ctl, .radio-movable .radio-input { -webkit-app-region: no-drag; }
.rbar-emer.cooling { background: #3a2a1a; color: #ffb36b; }
.rbar-ptt { background: #1d2a1f; border-color: #2f4a33; color: #b8f5c8; letter-spacing: 0.06em; }
.rbar-ptt:hover:not(:disabled) { background: #24362a; }
.rbar-ptt.down { background: #ef1d1d; border-color: transparent; color: #fff; }
body.mdt-page { background: transparent; }
.mdt-wrap { height: 100vh; }
.rfull-quick { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: 260px; margin-top: 6px; }
.rfull-quick button { height: 26px; padding: 0 9px; border-radius: 7px; border: 1px solid #2c2d31; background: rgba(12, 13, 15, 0.9); color: #e8e8ea; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
.rfull-quick button:hover:not(:disabled) { border-color: var(--accent); }
.mx { --tint: #2f6bff; --mx-bg: #0b1016; --mx-panel: #111821; --mx-line: #1f2a36; --mx-text: #dfe7f1; --mx-dim: #8a9aae; display: flex; height: 100%; box-sizing: border-box; padding: 10px; color: var(--mx-text); font-size: 13px; user-select: none; -webkit-user-select: none; }
.mx.theme-fire { --tint: #e0353b; }
.mx.theme-dot { --tint: #f08a12; }
.mx.embedded { height: 760px; padding: 0; }
.mx-case { position: relative; flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 18px 22px 0; border-radius: 30px; background: radial-gradient(120% 80% at 50% 0%, #3a3e45 0%, #24272c 45%, #17191c 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 0 rgba(0, 0, 0, 0.6), 0 0 0 1px #0a0b0c, 0 18px 40px rgba(0, 0, 0, 0.55); }
.mx-case::before { content: ''; position: absolute; inset: 6px; border-radius: 25px; border: 1px solid rgba(255, 255, 255, 0.05); pointer-events: none; }
.mx-bumper { position: absolute; width: 58px; height: 58px; background: #101113; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 4px rgba(0, 0, 0, 0.5); }
.mx-bumper.tl { top: -4px; left: -4px; border-radius: 32px 6px 30px 6px; }
.mx-bumper.tr { top: -4px; right: -4px; border-radius: 6px 32px 6px 30px; }
.mx-bumper.bl { bottom: -4px; left: -4px; border-radius: 6px 30px 6px 32px; }
.mx-bumper.br { bottom: -4px; right: -4px; border-radius: 30px 6px 32px 6px; }
.mx-bezel-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 140px; height: 10px; margin-top: -10px; margin-bottom: 6px; }
.mx-cam { width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #4a5a78, #05070a 65%); box-shadow: 0 0 0 2px #0d0e10; }
.mx-screw { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #6b6f76, #2a2c30); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5); }
.mx-glass { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; padding: 3px; border-radius: 10px; background: #000; box-shadow: inset 0 0 0 1px #000, 0 0 0 2px #0b0c0e; }
.mx-glass::after { content: ''; position: absolute; inset: 3px; border-radius: 8px; background: linear-gradient(115deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 32%); pointer-events: none; }
.mx-screen { flex: 1; min-width: 0; display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; background: var(--mx-bg); }
.mx-bezel-bottom { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 46px; padding: 0 6px; }
.mx-leds { display: flex; gap: 8px; }
.mx-led { width: 6px; height: 6px; border-radius: 50%; background: #1d2024; }
.mx-led.pwr { background: #34d06a; box-shadow: 0 0 6px #34d06a; }
.mx-led.net { background: #3b8cff; box-shadow: 0 0 6px #3b8cff; animation: mx-blink 2.4s infinite; }
@keyframes mx-blink { 0%, 80%, 100% { opacity: 1; } 85% { opacity: 0.2; } }
.mx-logo { display: flex; align-items: center; gap: 7px; color: #fff; letter-spacing: 0.28em; font-size: 12px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); }
.mx-logo .ic { width: 18px; height: 18px; fill: #fff; stroke: none; }
.mx-hardkeys { display: flex; justify-content: flex-end; gap: 5px; }
.mx-hk { width: 30px; height: 20px; padding: 0; border-radius: 5px; border: 0; background: linear-gradient(#2c2f34, #1a1c1f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.6); color: #9aa3ad; font: 700 9px 'Geist Mono', monospace; cursor: pointer; }
.mx-hk:hover, .mx-hk.on { color: #fff; }
.mx-hk.on { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px var(--tint); }
.mx-title { display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 6px 0 12px; background: linear-gradient(#152131, #0f1824); border-bottom: 1px solid var(--mx-line); flex: none; }
.mx-brand { display: flex; align-items: center; gap: 8px; color: #fff; }
.mx-brand .ic { width: 18px; height: 18px; fill: #fff; stroke: none; }
.mx-brand b { letter-spacing: 0.22em; font-size: 12px; }
.mx-brand small { color: var(--mx-dim); font-size: 9px; letter-spacing: 0.16em; }
.mx-unit { flex: 1; min-width: 0; display: flex; justify-content: center; }
.mx-unit span { display: flex; align-items: baseline; gap: 8px; }
.mx-unit b { font-family: 'Geist Mono', monospace; color: #fff; font-size: 14px; }
.mx-unit small { color: var(--mx-dim); }
.mx-clock { font: 600 13px 'Geist Mono', monospace; color: #c5d3e4; }
.mx-chrome { display: flex; gap: 2px; }
.mx-chrome button { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 6px; border: 0; background: transparent; color: #9fb0c4; cursor: pointer; }
.mx-chrome button .ic { width: 15px; height: 15px; }
.mx-chrome button:hover { background: #1c2838; color: #fff; }
.mx-chrome button.on { background: var(--tint); color: #fff; }
.mx-statusbar { display: flex; gap: 6px; padding: 8px 10px; background: #0d141d; border-bottom: 1px solid var(--mx-line); flex: none; }
.mx-st { flex: 1; display: grid; gap: 1px; padding: 6px 4px; border-radius: 7px; border: 1px solid #23303f; background: linear-gradient(#18222e, #121a24); color: #c9d5e3; font: inherit; cursor: pointer; text-align: center; }
.mx-st b { font: 700 14px 'Geist Mono', monospace; }
.mx-st small { font-size: 10px; color: var(--mx-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.mx-st:disabled { opacity: 0.45; cursor: default; }
.mx-st.on.st-available { background: #14532d; border-color: #22c55e; color: #fff; }
.mx-st.on.st-enroute { background: #1e3a8a; border-color: #3b82f6; color: #fff; }
.mx-st.on.st-onscene { background: #7f1d1d; border-color: #ef4444; color: #fff; }
.mx-st.on.st-busy { background: #78350f; border-color: #f59e0b; color: #fff; }
.mx-st.on.st-offduty { background: #374151; border-color: #9ca3af; color: #fff; }
.mx-st.on small { color: rgba(255, 255, 255, 0.8); }
.mx-st.st-emer { flex: 0 0 74px; background: linear-gradient(#ff8a1f, #e36a00); border-color: transparent; color: #1a0b00; }
.mx-st.st-emer small { color: #3a1a00; }
.mx-st.st-emer.holding { background: #ef1d1d; color: #fff; animation: rbar-blink 0.25s steps(2) infinite; }
.mx-main { flex: 1; min-height: 0; display: flex; }
.mx-nav { display: flex; flex-direction: column; gap: 2px; width: 140px; padding: 8px 6px; background: #0d141d; border-right: 1px solid var(--mx-line); flex: none; overflow-y: auto; }
.mx-tab { position: relative; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 8px; border-radius: 7px; border: 0; background: transparent; color: #a8b6c7; font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.mx-tab .ic { width: 16px; height: 16px; flex: none; }
.mx-tab span { flex: 1; }
.mx-tab em { min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--tint); color: #fff; font-style: normal; font-size: 10px; line-height: 17px; text-align: center; }
.mx-tab kbd { font: 600 9px 'Geist Mono', monospace; color: #5d6d80; }
.mx-tab:hover { background: #162130; color: #fff; }
.mx-tab.on { background: #1a2a40; color: #fff; box-shadow: inset 3px 0 0 var(--tint); }
.mx-content { flex: 1; min-width: 0; overflow: auto; padding: 12px; user-select: text; -webkit-user-select: text; }
.mx-content[data-tab="calls"], .mx-content[data-tab="radio"] { overflow: hidden; display: flex; }
.mx-content[data-tab="radio"] > .mx-stack { flex: 1; }
.mx-stack { display: grid; gap: 10px; align-content: start; }
.mx-stack.fill { display: flex; flex-direction: column; min-height: 0; }
.mx-split { flex: 1; display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 12px; min-height: 0; }
.mx-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; }
.mx-pane { overflow-y: auto; min-height: 0; padding-right: 2px; }
.mx-item { display: grid; gap: 3px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--mx-line); border-left: 3px solid #3b4757; background: var(--mx-panel); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.mx-item.p1 { border-left-color: #ef4444; }
.mx-item.p2 { border-left-color: #f59e0b; }
.mx-item.on { background: #182638; border-color: var(--tint); }
.mx-item-top { display: flex; align-items: center; gap: 6px; }
.mx-item-top small { margin-left: auto; color: var(--mx-dim); }
.mx-item-name { font-weight: 600; color: #fff; }
.mx-item > small { color: var(--mx-dim); }
.mx-callhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 10px; background: linear-gradient(90deg, #172435, #111821); border-left: 4px solid #3b4757; }
.mx-callhead.p1 { border-left-color: #ef4444; }
.mx-callhead.p2 { border-left-color: #f59e0b; }
.mx-callhead small, .mx-hit-main small { color: var(--mx-dim); font: 600 10px 'Geist Mono', monospace; letter-spacing: 0.08em; }
.mx-callhead h2, .mx-hit-main h2, .mx-form h2 { margin: 2px 0 0; font-size: 18px; color: #fff; }
.mx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.mx-grid > div { display: grid; gap: 2px; padding: 8px 10px; border-radius: 8px; background: var(--mx-panel); border: 1px solid var(--mx-line); min-width: 0; }
.mx-grid small { color: var(--mx-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.mx-grid b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-card { display: grid; gap: 7px; padding: 10px 12px; border-radius: 10px; background: var(--mx-panel); border: 1px solid var(--mx-line); }
.mx-card.bolo { border-left: 3px solid #ef4444; }
.mx-card h3 { margin: 0; color: var(--mx-dim); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.mx-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mx-row small { color: var(--mx-dim); white-space: nowrap; }
.mx-grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-text { margin: 0; color: #c9d5e3; line-height: 1.45; }
.mx-note { margin: 0; color: var(--mx-dim); }
.mx-err { margin: 0; padding: 8px 10px; border-radius: 8px; background: #3a1214; color: #ffb4ad; }
.mx-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; flex: none; }
.mx-tag.bad { background: #4a1414; color: #ffb3a8; }
.mx-tag.warn { background: #3d2c0e; color: #ffcf7a; }
.mx-tag.ok { background: #0f3320; color: #86efac; }
.mx-tag.gray { background: #222c38; color: #b8c4d2; }
.mx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border-radius: 7px; background: #0d141d; border: 1px solid var(--mx-line); }
.mx-chip small { color: var(--mx-dim); }
.mx-chip > b { padding-left: 4px; font-family: 'Geist Mono', monospace; }
.mx-plate { display: inline-grid; place-items: center; height: 24px; padding: 0 8px; border-radius: 4px; border: 1px solid #1b2b5c; background: #f4f4ef; color: #13235a; font: 700 12px 'Geist Mono', monospace; letter-spacing: 0.08em; cursor: pointer; flex: none; }
.mx-plate:hover { box-shadow: 0 0 0 2px var(--tint); }
.mx-plate.flat { cursor: default; }
.mx-plate.flat:hover { box-shadow: none; }
.mx-mapwrap { display: grid; place-items: center; height: 100%; min-height: 0; }
.mx-mapwrap .cmap { width: min(100%, 100cqh, 620px); max-height: 100%; }
.mx-content[data-tab="map"] { overflow: hidden; container-type: size; }
.mx-fkgrid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; align-items: start; }
.mx-fklist { display: grid; gap: 6px; align-content: start; }
.mx-fkitem { display: grid; gap: 3px; justify-items: start; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--mx-line); border-left: 3px solid #3b4757; background: var(--mx-panel); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.mx-fkitem small { color: var(--mx-dim); }
.mx-fkitem.on { background: #182638; border-color: var(--tint); }
.mx-fkitem.hot { border-left-color: #ef4444; }
.mx-fkview { min-width: 0; }
.mx-fkview .cad-feed-screen { border-radius: 10px; }
.mx-fkview .cad-feed-alert { right: auto; left: 12px; top: 34px; }
.mx-fkstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mx-fkstats > div { display: grid; gap: 2px; padding: 8px 10px; border-radius: 8px; background: var(--mx-panel); border: 1px solid var(--mx-line); }
.mx-fkstats small { color: var(--mx-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.mx-fkstats b { font-size: 18px; }
.mx-fkstats .bad b { color: #ff8f84; }
.mx-fkcar { display: grid; gap: 5px; padding: 7px 0; border-top: 1px solid var(--mx-line); }
.mx-fkcar:first-of-type { border-top: 0; padding-top: 0; }
.mx-fkcar.hot { border-left: 3px solid #ef4444; padding-left: 8px; }
@media (max-width: 760px) { .mx-fkgrid { grid-template-columns: 1fr; } .mx-fklist { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.mx-link { padding: 0; border: 0; background: none; color: #8ab4ff; font: inherit; font-weight: 600; cursor: pointer; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-link:hover { text-decoration: underline; }
.mx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 7px; border: 1px solid #2a3a4d; background: linear-gradient(#1c2938, #151f2b); color: #e3ebf5; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.mx-btn .ic { width: 14px; height: 14px; }
.mx-btn:hover:not(:disabled) { border-color: var(--tint); }
.mx-btn:disabled { opacity: 0.5; cursor: default; }
.mx-btn.accent { background: var(--tint); border-color: transparent; color: #fff; }
.mx-btn.danger { background: #5b1518; border-color: #8a2328; color: #ffd0cc; }
.mx-btn.small { height: 26px; padding: 0 9px; font-size: 12px; }
.mx-btn.wide { width: 100%; }
.mx-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.mx-inline { display: flex; gap: 6px; }
.mx-inline .mx-input { flex: 1; }
.mx-input { height: 34px; padding: 0 10px; border-radius: 7px; border: 1px solid #2a3a4d; background: #070b10; color: #fff; font: inherit; min-width: 0; box-sizing: border-box; }
textarea.mx-input { height: auto; padding: 8px 10px; resize: vertical; }
.mx-input:focus { outline: none; border-color: var(--tint); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tint) 30%, transparent); }
.mx-input.big { flex: 1; height: 40px; font: 700 16px 'Geist Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.mx-search { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--mx-panel); border: 1px solid var(--mx-line); }
.mx-search > .ic { width: 18px; height: 18px; color: var(--mx-dim); }
.mx-search .mx-btn { height: 40px; }
.mx-form { display: grid; gap: 10px; padding: 12px; border-radius: 10px; background: var(--mx-panel); border: 1px solid var(--mx-line); }
.mx-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mx-field { display: grid; gap: 4px; }
.mx-field.wide { grid-column: 1 / -1; }
.mx-field span { color: var(--mx-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.mx-hit { position: relative; display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 12px; background: linear-gradient(90deg, #142235, #101823); border: 1px solid var(--mx-line); }
.mx-hit.alert { background: linear-gradient(90deg, #3a0f12, #1a0b0d); border-color: #8a1f24; }
.mx-hit-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.mx-hit-main p { margin: 0; color: #b6c3d3; }
.mx-hit-alert { display: grid; place-items: center; gap: 2px; padding: 8px 12px; border-radius: 8px; background: #ef1d1d; color: #fff; animation: rbar-blink 1s steps(2) infinite; }
.mx-hit-alert .ic { width: 20px; height: 20px; }
.mx-bigplate { display: grid; place-items: center; gap: 0; min-width: 150px; padding: 6px 14px 8px; border-radius: 8px; background: linear-gradient(#ffffff, #e9ebe4); color: #13235a; border: 3px solid #13235a; box-shadow: inset 0 0 0 2px #fff; }
.mx-bigplate small { font: 700 9px 'Geist Mono', monospace; letter-spacing: 0.3em; color: #b4232a; }
.mx-bigplate b { font: 800 28px 'Geist Mono', monospace; letter-spacing: 0.08em; line-height: 1.1; }
.mx-avatar { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 12px; background: #1b2a3e; color: #8ab4ff; }
.mx-avatar .ic { width: 30px; height: 30px; }
.mx-empty { display: grid; justify-items: center; gap: 6px; padding: 36px 12px; color: var(--mx-dim); text-align: center; }
.mx-empty .ic { width: 26px; height: 26px; opacity: 0.6; }
.mx-empty b { color: #dfe7f1; font-size: 15px; }
.mx-empty p { margin: 0; max-width: 360px; }
.mx-table { display: grid; gap: 3px; }
.mx-tr { display: grid; grid-template-columns: 80px 1.3fr 1fr 60px 1.3fr 96px; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; background: var(--mx-panel); min-width: 0; }
.mx-tr > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-tr.head { background: transparent; color: var(--mx-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
.mx-tr b { font-family: 'Geist Mono', monospace; color: #fff; }
.mx-log { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 4px; align-content: start; padding: 8px; border-radius: 10px; background: #070b10; border: 1px solid var(--mx-line); font-family: 'Geist Mono', monospace; font-size: 12px; }
.mx-tx { display: flex; align-items: center; gap: 10px; padding: 4px 6px; border-radius: 5px; }
.mx-tx small { color: var(--mx-dim); white-space: nowrap; }
.mx-tx b { color: #9fe7b4; white-space: nowrap; }
.mx-tx.emer { background: #3a1214; }
.mx-tx.emer b { color: #ffb3a8; }
.mx-quick { display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: #0d141d; border-top: 1px solid var(--mx-line); overflow-x: auto; flex: none; }
.mx-quick > .ic { width: 15px; height: 15px; color: var(--tint); flex: none; }
.mx-quick select { height: 30px; flex: none; }
.mx-qbtn { height: 30px; padding: 0 12px; border-radius: 7px; border: 1px solid #2a3a4d; background: #162130; color: #e3ebf5; font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; flex: none; }
.mx-qbtn:hover:not(:disabled) { border-color: var(--tint); }
.mx-foot { display: flex; align-items: center; gap: 14px; height: 24px; padding: 0 12px; background: #080c11; border-top: 1px solid var(--mx-line); color: var(--mx-dim); font: 11px 'Geist Mono', monospace; flex: none; }
.mx-dot { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; }
.mx-dot.ok { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.radio-movable .mx-case { -webkit-app-region: drag; cursor: move; }
.radio-movable .mx-glass, .radio-movable .mx-hk { -webkit-app-region: no-drag; }
.radio-movable .mx-title { -webkit-app-region: drag; cursor: move; }
.radio-movable .mx-title button { -webkit-app-region: no-drag; cursor: pointer; }
@media (max-width: 760px) { .mx-nav { width: 52px; } .mx-tab span, .mx-tab kbd { display: none; } .mx-split { grid-template-columns: 1fr; } .mx-fields { grid-template-columns: 1fr; } .mx-brand small { display: none; } .mx-tr { grid-template-columns: 70px 1fr 90px; } .mx-tr > :nth-child(3), .mx-tr > :nth-child(4), .mx-tr > :nth-child(5) { display: none; } }
.rbar-btn.needs-click { outline: 1px dashed #e0902a; outline-offset: -3px; }
.hint.warn { color: #fbbf24; }

@media (max-width: 860px) { .md.compact .md-body { grid-template-columns: minmax(0, 1fr); } .md.compact .md-deck { position: static; max-height: 460px; } .md.compact .md-strip { grid-template-columns: minmax(0, 1fr); } .md.compact .md-cell + .md-cell { border-left: 0; border-top: 1px solid var(--line); } }

.m-page { min-height: 100vh; min-height: 100dvh; background: #000; color: var(--fg); -webkit-text-size-adjust: 100%; }
.m-shell { max-width: 520px; margin: 0 auto; padding: calc(28px + env(safe-area-inset-top)) 20px calc(36px + env(safe-area-inset-bottom)); display: grid; gap: 18px; }
.m-hero { display: grid; justify-items: center; gap: 10px; text-align: center; padding-top: 8px; }
.m-icon { width: 92px; height: 92px; border-radius: 21px; box-shadow: 0 12px 34px rgba(44, 108, 246, 0.35); }
.m-hero h1 { font-size: 34px; font-weight: 700; letter-spacing: -0.045em; }
.m-hero p { color: var(--muted); max-width: 34ch; line-height: 1.45; }
.m-card { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.m-card h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.m-card p { color: var(--muted); line-height: 1.45; }
.m-card.hot { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 9%, var(--panel)); }
.m-steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.m-steps li { counter-increment: step; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; line-height: 1.45; }
.m-steps li::before { content: counter(step); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; }
.m-steps b { color: var(--fg); }
.m-share { display: inline-block; vertical-align: -4px; width: 20px; height: 20px; margin: 0 2px; color: var(--accent); }
.m-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 12px; background: var(--raised); }
.m-tabs button { min-height: 40px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; }
.m-tabs button[aria-selected='true'] { background: var(--accent); color: #fff; }
.m-servers { display: grid; gap: 10px; }
.m-server { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.m-server:active { background: var(--raised); }
.m-server img, .m-server .srv-ph { width: 44px; height: 44px; border-radius: 12px; flex: none; object-fit: cover; background: var(--raised); display: grid; place-items: center; font-weight: 700; color: var(--muted); }
.m-server > span { flex: 1; min-width: 0; display: grid; gap: 2px; }
.m-server b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-server small { color: var(--muted); }
.m-server .ic { width: 18px; height: 18px; color: var(--faint); flex: none; }
.m-fine { color: var(--faint); font-size: 13px; line-height: 1.45; text-align: center; }
.m-fine a { color: var(--muted); text-decoration: underline; }
.m-code { display: flex; gap: 8px; }
.m-code .input { flex: 1; min-width: 0; font-size: 16px; text-transform: uppercase; letter-spacing: 0.06em; }
.m-err { color: #ff6b6b; font-size: 14px; }

html.m-app-html, html.m-app-html body { height: 100%; overflow: hidden; background: #000; overscroll-behavior: none; }
.m-app { position: fixed; inset: 0 0 auto 0; height: 100%; display: flex; flex-direction: column; background: #000; color: #f5f5f7; }
.m-bar { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: calc(6px + env(safe-area-inset-top)) 12px 6px; background: #000; border-bottom: 1px solid #16181f; }
.m-bar a, .m-bar button { justify-self: start; display: inline-flex; align-items: center; gap: 2px; min-height: 36px; padding: 0 6px; border: 0; background: none; color: #0a84ff; font: inherit; font-size: 16px; cursor: pointer; }
.m-bar .ic { width: 16px; height: 16px; }
.m-bar b { font-size: 16px; font-weight: 600; max-width: 56vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The phone as a floating window of the desktop app: its top bar is the handle (drag it), with a lock button and a hide button. */
.m-bar .m-barbtns { justify-self: end; display: flex; gap: 2px; }
.m-bar .m-barbtn { justify-self: auto; justify-content: center; width: 36px; padding: 0; color: #8e8e98; }
.m-bar .m-barbtn:hover, .m-bar .m-barbtn.on { color: #fff; }
.m-app.m-movable .m-bar { -webkit-app-region: drag; cursor: move; }
.m-app.m-movable .m-bar a, .m-app.m-movable .m-bar button { -webkit-app-region: no-drag; cursor: pointer; }
.m-phone { flex: 1; min-height: 0; }
.m-note { flex: 1; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center; color: #c9c9d0; line-height: 1.45; }
.m-note .btn { min-height: 46px; }
.m-offline { flex: none; padding: 6px 12px; background: #3a2a00; color: #ffd37a; font-size: 13px; text-align: center; }
.m-fine .linkbtn { display: inline; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; text-decoration: underline; cursor: pointer; }

/* ---- the Uplink Network: badges and the moderation page ---- */
.nb { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 6px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.6; white-space: nowrap; color: var(--nb, var(--accent-strong)); background: color-mix(in srgb, var(--nb, var(--accent)) 14%, transparent); border: 1px solid color-mix(in srgb, var(--nb, var(--accent)) 38%, transparent); }
.nb .ic { width: 12px; height: 12px; }
.nb-staff { --nb: #6a9cff; } .nb-support { --nb: #34d399; } .nb-chatmod { --nb: #c084fc; } .nb-developer { --nb: #f59e0b; } .nb-partner { --nb: #f472b6; }
.nb-row { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
h2 > .nb-row, h3 > .nb-row { margin-left: 10px; }
/* the moderation page */
.nm-page { padding-bottom: 60px; }
.nm-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 6px 0 22px; }
.nm-top h1 { font-size: 34px; letter-spacing: -0.05em; font-weight: 700; }
.nm-top p { margin-top: 4px; color: var(--muted); max-width: 70ch; }
.nm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 26px; }
.nm-stat { padding: 16px 18px; display: grid; gap: 2px; }
.nm-stat span { color: var(--muted); font-size: 13px; }
.nm-stat b { font-size: 28px; letter-spacing: -0.03em; color: var(--fg); font-variant-numeric: tabular-nums; }
.nm-stat small { color: var(--faint); font-size: 12.5px; }
.nm-stat.hot b { color: var(--warn); }
.nm-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.nm-tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; margin-bottom: -1px; }
.nm-tabs button:hover { color: var(--fg); }
.nm-tabs button[aria-selected='true'] { color: var(--fg); border-bottom-color: var(--accent); }
.nm-tabs em { min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--raised); color: var(--body); font-style: normal; font-size: 12px; text-align: center; }
.nm-tabs em.warn { background: rgba(251, 191, 36, 0.14); color: var(--warn); }
.nm-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.nm-toolbar .input { flex: 1 1 280px; width: auto; max-width: 460px; }
.nm-toolbar .select { width: auto; min-width: 150px; }
.nm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nm-chips button { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--muted); font: inherit; font-size: 13.5px; cursor: pointer; }
.nm-chips button[aria-pressed='true'] { background: var(--accent-soft); color: var(--accent-strong); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.nm-split { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 22px; align-items: start; }
.nm-listbox { padding: 8px; display: grid; gap: 2px; align-content: start; max-height: 74vh; overflow: auto; }
.nm-listhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 10px; }
.nm-listhead h3 { font-size: 15px; }
.nm-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid transparent; min-width: 0; color: inherit; }
.nm-item:hover { background: var(--raised); }
.nm-item.on { background: var(--raised); border-color: var(--line-strong); }
.nm-item-main { display: grid; min-width: 0; font-size: 14px; line-height: 1.4; }
.nm-item-main > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nm-item-main b { color: var(--fg); display: flex; align-items: center; gap: 6px; }
.nm-item-end { display: grid; justify-items: end; gap: 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.nm-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--raised); border: 1px solid var(--line); color: var(--accent-strong); }
.nm-ic .ic { width: 18px; height: 18px; }
.nm-av { flex: none; border-radius: 50%; object-fit: cover; background: var(--raised); border: 1px solid var(--line); }
.nm-av-ph { display: grid; place-items: center; font-weight: 700; color: var(--muted); font-size: 13px; }
.nm-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 4px; color: var(--muted); font-size: 13px; }
.nm-detail { display: grid; gap: 18px; min-width: 0; align-content: start; }
.nm-card { padding: 22px; }
.nm-card > h3 { font-size: 16px; margin-bottom: 4px; }
.nm-card > .nm-sub { color: var(--muted); font-size: 14px; margin-bottom: 14px; }
.nm-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.nm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.nm-kv { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 9px 14px; font-size: 14px; align-items: baseline; margin: 0; }
.nm-kv dt { color: var(--faint); }
.nm-kv dd { margin: 0; color: var(--fg); overflow-wrap: anywhere; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nm-kv code { font-family: var(--mono); font-size: 13px; }
.nm-copy { border: 0; background: none; color: var(--faint); cursor: pointer; padding: 2px; }
.nm-copy:hover { color: var(--fg); }
.nm-copy .ic { width: 14px; height: 14px; }
.nm-profile { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; padding: 24px; }
.nm-profile-main { flex: 1 1 280px; min-width: 0; display: grid; gap: 6px; }
.nm-profile-main h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; font-size: 26px; letter-spacing: -0.03em; }
.nm-profile-line { color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
.nm-profile-line code { font-family: var(--mono); }
.nm-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.nm-subtabs { display: flex; gap: 6px; flex-wrap: wrap; }
.nm-subtabs button { padding: 8px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.nm-subtabs button[aria-pressed='true'] { background: var(--selected); color: var(--fg); border-color: var(--line-strong); }
.nm-alert { display: flex; gap: 12px; align-items: center; padding: 14px 18px; border-radius: 14px; background: rgba(248, 113, 113, 0.08); border: 1px solid rgba(248, 113, 113, 0.3); color: var(--bad); }
.nm-alert .ic { flex: none; }
.nm-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.nm-check { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 10px; background: var(--raised); border: 1px solid var(--line); font-size: 14px; cursor: pointer; }
.nm-time { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nm-server { padding: 20px 22px; display: grid; gap: 14px; }
.nm-server-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.nm-server-head h3 { font-size: 17px; }
.nm-cars { display: flex; flex-wrap: wrap; gap: 8px; }
.nm-car { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 10px; background: var(--raised); border: 1px solid var(--line); font-size: 13.5px; }
.nm-car b { font-family: var(--mono); letter-spacing: 0.04em; color: var(--fg); }
.nm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.nm-table th { text-align: left; padding: 10px 14px; color: var(--faint); font-weight: 500; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--line); }
.nm-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.nm-table tr:last-child td { border-bottom: 0; }
.nm-table a { color: var(--accent-strong); }
.nm-scroll { overflow-x: auto; }
.nm-chat-block { display: grid; gap: 8px; margin-top: 16px; }
.nm-link { color: var(--accent-strong); font-size: 13px; font-weight: 600; }
.nm-log { display: grid; gap: 12px; max-height: 560px; overflow: auto; padding: 16px; margin: 14px 0; border-radius: 14px; background: var(--canvas); border: 1px solid var(--line); align-content: start; }
.nm-msg { display: flex; gap: 10px; align-items: flex-start; }
.nm-msg-mod .nm-text { color: var(--accent-strong); }
.nm-msg-main { min-width: 0; flex: 1; }
.nm-msg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; }
.nm-text { overflow-wrap: anywhere; color: var(--fg); font-size: 14.5px; white-space: pre-wrap; }
.nm-photo img { display: block; max-width: min(260px, 100%); max-height: 260px; border-radius: 12px; border: 1px solid var(--line); background: var(--raised); margin-top: 4px; }
.nm-sys { text-align: center; color: var(--muted); font-size: 12.5px; font-style: italic; padding: 2px 0; }
.nm-members { display: flex; flex-wrap: wrap; gap: 8px; }
.nm-member { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px 5px 5px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line); font-size: 13.5px; color: inherit; }
.nm-member.left { opacity: 0.55; }
.nm-say { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.nm-reason { margin: 14px 0; padding: 14px 16px; border-left: 3px solid var(--warn); background: var(--raised); border-radius: 0 12px 12px 0; color: var(--fg); overflow-wrap: anywhere; }
.nm-row-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 14px 0 4px; }
.nm-row-actions .input { flex: 1 1 220px; width: auto; height: 38px; }
.nm-empty { padding: 56px 24px; text-align: center; color: var(--muted); display: grid; gap: 6px; justify-items: center; }
.nm-empty b { color: var(--fg); font-size: 17px; }
.nm-empty .ic { width: 28px; height: 28px; color: var(--accent-strong); margin-bottom: 6px; }
.nm-plain { padding: 0; overflow: hidden; }
@media (max-width: 980px) { .nm-split { grid-template-columns: minmax(0, 1fr); } .nm-listbox { max-height: 420px; } .nm-top h1 { font-size: 28px; } .nm-kv { grid-template-columns: 1fr; gap: 2px 0; } .nm-kv dd { margin-bottom: 8px; } }

/* ---- Uplink Mobile: making your civilian before the phone opens ---- */
.m-scroll { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 16px calc(28px + env(safe-area-inset-bottom)); }
.m-setup { display: grid; gap: 14px; max-width: 480px; margin: 0 auto; color: #f5f5f7; }
.m-setup h2 { font-size: 26px; letter-spacing: -0.04em; margin: 4px 0 0; }
.m-setup h3 { font-size: 16px; margin: 10px 0 0; }
.m-setup p { color: #b4b4bc; line-height: 1.45; margin: 0; }
.m-setup .m-fine.left { text-align: left; }
.m-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.m-field { display: grid; gap: 6px; min-width: 0; font-size: 13px; color: #b4b4bc; }
.m-field .input, .m-field .select { height: 46px; font-size: 16px; }
.m-field small { color: #8a8a92; }
.m-progress { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 12px; }
.m-progress li { flex: 1; padding: 6px 8px; border-radius: 9px; background: #16181f; color: #8a8a92; text-align: center; border: 1px solid #23252d; }
.m-progress li.done { color: #7ee19a; border-color: #285a38; }
.m-progress li.now { color: #fff; background: #0a2a52; border-color: #0a84ff; }

.cad-fixed { display: flex; align-items: center; color: var(--muted); cursor: default; user-select: all; }

.container.nm-page { max-width: 1360px; }

/* The CAD tab of the server dashboard */
.cadl-hero { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cadl-hero img { flex: none; }
.cadl-hero-main { flex: 1 1 260px; min-width: 0; }
.cadl-hero-main h2 { font-size: 22px; letter-spacing: -0.03em; }
.cadl-modes { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.cadl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; align-items: start; }
.cadl-use { margin: 4px 0 0; display: grid; border-top: 1px solid var(--line); }
.cadl-use-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cadl-use-row dt { color: var(--muted); font-size: 14px; }
.cadl-use-row dd { margin: 0; color: var(--fg); font-size: 14.5px; font-variant-numeric: tabular-nums; text-align: right; }
.cadl-links { display: grid; gap: 4px; }
.cadl-links a { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px; color: var(--fg); transition: background 0.15s; }
.cadl-links a:hover { background: var(--selected); }
.cadl-links .ic { color: var(--accent-strong); flex: none; }
.cadl-links b { display: block; font-weight: 600; }
.cadl-links small { display: block; color: var(--muted); font-size: 13px; }
@media (max-width: 860px) { .cadl-grid { grid-template-columns: minmax(0, 1fr); } }

/* The server sidebar: folding groups and a box to find a page */
.side-find { width: 100%; height: 34px; margin: 0 0 8px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); font-size: 14px; }
.side-find:focus { outline: none; border-color: var(--accent-strong); }
.side-group { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin: 12px 0 4px; padding: 4px 12px; border: 0; background: none; color: var(--faint); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; text-align: left; }
.side-group:hover { color: var(--muted); }
.side-group .ic { width: 13px; height: 13px; transition: transform 0.2s var(--ease); }
.side-group[aria-expanded='false'] .ic { transform: rotate(-90deg); }
.side-none { padding: 8px 12px; color: var(--faint); font-size: 13px; }
@media (max-width: 960px) { .side-find, .side-group { display: none; } }
.hint.warn { color: #fbbf24; }

.os-device { display: grid; justify-items: center; --os-w: 316px; --os-top: 44px; --os-bottom: 22px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Geist", system-ui, sans-serif; }
.os-frame { position: relative; padding: 4px; border-radius: 60px; background: linear-gradient(140deg, #4a4d55, #1b1c20 35%, #2c2e33 70%, #55585f); box-shadow: inset 0 0 0 1px #6b6e76, 0 34px 60px -24px rgba(0, 0, 0, 0.85), 0 8px 20px rgba(0, 0, 0, 0.45); }
.os-bezel { position: relative; padding: 9px; border-radius: 56px; background: #000; }
.os-btn-side { position: absolute; width: 4px; padding: 0; border: 0; border-radius: 2px; background: linear-gradient(90deg, #6a6d75, #2a2c31); }
.os-btn-side.action { left: -3px; top: 104px; height: 28px; }
.os-btn-side.vup { left: -3px; top: 152px; height: 54px; }
.os-btn-side.vdown { left: -3px; top: 216px; height: 54px; }
.os-btn-side.power { right: -3px; top: 176px; height: 84px; cursor: pointer; }
.os-btn-side.power:active { transform: translateX(-1px); }
.os-notch { position: absolute; top: 9px; left: 50%; z-index: 90; width: 37%; height: 29px; transform: translateX(-50%); border-radius: 0 0 19px 19px; background: #000; display: flex; justify-content: center; align-items: center; gap: 10px; pointer-events: none; }
.os-speaker { width: 44px; height: 5px; border-radius: 3px; background: #1a1a1d; }
.os-cam { width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #34446a, #050608 70%); }

.os-screen-glass { --os-bg: #000; --os-plain: #000; --os-grouped: #000; --os-cell: #1c1c1e; --os-fg: #fff; --os-sub: #8e8e93; --os-sep: rgba(84, 84, 88, 0.55); --os-fill: #2c2c2e; --os-fill2: #1c1c1e; --os-accent: #0a84ff; --os-them: #26262a; --os-red: #ff453a; --os-green: #30d158;
  position: relative; width: var(--os-w); aspect-ratio: 390 / 844; border-radius: 47px; overflow: hidden; isolation: isolate; background: #000; color: var(--os-fg); font-size: 15px; line-height: 1.3; -webkit-font-smoothing: antialiased; user-select: none; }
.os-screen-glass.theme-light { --os-bg: #f2f2f7; --os-plain: #fff; --os-grouped: #f2f2f7; --os-cell: #fff; --os-fg: #000; --os-sub: #6c6c70; --os-sep: rgba(60, 60, 67, 0.22); --os-fill: #e5e5ea; --os-fill2: #fff; --os-accent: #007aff; --os-them: #e9e9eb; --os-red: #ff3b30; --os-green: #34c759; }
.os-screen-glass input, .os-screen-glass textarea, .os-screen-glass select { user-select: text; }
.os-screen-glass button { font-family: inherit; }
.os-screen-glass .ic { width: 18px; height: 18px; }

.os-wall { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; transition: filter 0.3s; }
.wp-uplink { background: radial-gradient(120% 70% at 15% 0%, #3a78ff 0%, transparent 55%), radial-gradient(90% 60% at 100% 100%, #0c38b8, transparent 62%), linear-gradient(165deg, #0b1f5c, #030817 70%); }
.wp-midnight { background: radial-gradient(80% 50% at 80% 10%, #5b4bd1, transparent 60%), linear-gradient(180deg, #0f0c29, #302b63 60%, #24243e); }
.wp-sunset { background: linear-gradient(170deg, #ff7e5f, #feb47b 42%, #8e3b8c 78%, #3b1f5c); }
.wp-aurora { background: radial-gradient(100% 55% at 0% 10%, #00e59b 0%, transparent 55%), radial-gradient(80% 55% at 100% 35%, #7a5cff, transparent 60%), linear-gradient(180deg, #041427, #0a2a43); }
.wp-graphite { background: radial-gradient(90% 60% at 50% 0%, #5a5a5e, transparent 60%), linear-gradient(170deg, #2c2c2e, #0b0b0c 70%); }
.wp-ocean { background: radial-gradient(90% 50% at 20% 10%, #6ff3ff, transparent 55%), linear-gradient(180deg, #00b4f0, #0047c9 70%, #062a7a); }
.wp-bloom { background: radial-gradient(70% 45% at 25% 25%, #ff6fd8, transparent 60%), radial-gradient(70% 50% at 80% 75%, #4a1fd6, transparent 62%), linear-gradient(140deg, #ff9a8b, #ff6a88 50%, #b84bff); }
.os-screen-glass.in-app .os-wall, .os-screen-glass.locked .os-wall { filter: none; }

.os-status { position: absolute; top: 0; left: 0; right: 0; z-index: 85; height: var(--os-top); display: flex; justify-content: space-between; align-items: center; padding: 6px 0 0; color: #fff; font-size: 14.5px; font-weight: 600; pointer-events: none; transition: color 0.2s; }
.os-status { display: grid; grid-template-columns: 1fr 37% 1fr; }
.os-status-l, .os-status-r { display: flex; align-items: center; gap: 5px; }
.os-status-l { grid-column: 1; }
.os-status-r { grid-column: 3; }
.os-status-l { justify-content: center; }
.os-status-r { justify-content: center; }
.os-screen-glass.theme-light.in-app:not(.in-call):not(.locked):not([data-app="camera"]):not([data-app="finder"]):not([data-app="calculator"]) .os-status { color: #000; }
.os-sig { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 10px; }
.os-sig i { width: 3px; border-radius: 1px; background: currentColor; }
.os-sig i:nth-child(1) { height: 4px; } .os-sig i:nth-child(2) { height: 6px; } .os-sig i:nth-child(3) { height: 8px; } .os-sig i:nth-child(4) { height: 10px; }
.os-wifi { position: relative; width: 15px; height: 11px; overflow: hidden; }
.os-wifi i { position: absolute; left: 50%; bottom: 0; border: 2px solid currentColor; border-color: currentColor transparent transparent transparent; border-radius: 50%; transform: translateX(-50%); }
.os-wifi i:nth-child(1) { width: 16px; height: 16px; bottom: -6px; } .os-wifi i:nth-child(2) { width: 10px; height: 10px; bottom: -3px; } .os-wifi i:nth-child(3) { width: 4px; height: 4px; bottom: 0; border-width: 2px; background: currentColor; }
.os-batt { position: relative; width: 24px; height: 11.5px; border: 1px solid currentColor; border-radius: 3.5px; padding: 1.5px; opacity: 0.95; }
.os-batt::after { content: ""; position: absolute; right: -3px; top: 3.5px; width: 1.5px; height: 4px; border-radius: 0 1px 1px 0; background: currentColor; }
.os-batt i { display: block; height: 100%; width: 82%; border-radius: 1.5px; background: currentColor; }
.os-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 0; border-radius: 10px; background: #30d158; color: #fff; font: 600 12px/1.2 inherit; pointer-events: auto; cursor: pointer; }
.os-pill .ic { width: 11px; height: 11px; }
.os-pill:not([hidden]) + .os-time { display: none; }

.os-home { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; padding: calc(var(--os-top) + 12px) 16px 0; }
.os-widget { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.os-widget > div { aspect-ratio: 1; border-radius: 20px; padding: 12px 14px; display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.92); color: #000; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); }
.os-widget-cal small { color: #ff3b30; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.os-widget-cal b { font-size: 46px; font-weight: 400; line-height: 1; margin-top: 2px; }
.os-widget-net { background: linear-gradient(160deg, #3d7bff, #1b2fcf) !important; color: #fff !important; }
.os-widget-net small { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; opacity: 0.85; }
.os-widget-net b { margin-top: auto; font-size: 20px; white-space: nowrap; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.os-widget-net span { font-size: 12px; opacity: 0.85; }
.os-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 8px; }
.os-icon { display: grid; justify-items: center; gap: 5px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.os-icon small { font-size: 11px; letter-spacing: -0.01em; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); white-space: nowrap; max-width: 72px; overflow: hidden; text-overflow: ellipsis; }
.os-icon:active .os-tile { filter: brightness(0.75); }
.os-icon-tile { position: relative; width: 56px; height: 56px; }
.os-tile { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 13.5px; overflow: hidden; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); }
.os-tile.sm { width: 34px; height: 34px; border-radius: 8.5px; }
.os-tile.xs { width: 30px; height: 30px; border-radius: 7px; }
.os-glyph { width: 100%; height: 100%; display: block; }
.os-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.os-community { display: flex; flex-direction: column; height: 100%; background: var(--os-plain); }
.os-appframe { flex: 1; width: 100%; min-height: 0; border: 0; background: #fff; display: block; margin-bottom: var(--os-bottom, 0px); }
.os-count { position: absolute; top: -5px; right: -6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #ff3b30; color: #fff; font: 600 12.5px/20px inherit; font-style: normal; text-align: center; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.os-dots { margin-top: auto; display: flex; justify-content: center; gap: 7px; padding: 10px 0; }
.os-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); }
.os-dots i.on { background: #fff; }
.os-dock { margin: 0 -6px calc(var(--os-bottom) + 4px); padding: 14px 12px; border-radius: 30px; display: grid; grid-template-columns: repeat(4, 1fr); justify-items: center; background: rgba(255, 255, 255, 0.24); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); }

.os-applayer { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.os-app { position: absolute; inset: 0; pointer-events: auto; padding: var(--os-top) 0 var(--os-bottom); background: var(--os-bg); color: var(--os-fg); display: flex; flex-direction: column; overflow: hidden; transition: transform 0.36s cubic-bezier(0.2, 0.9, 0.25, 1), opacity 0.22s ease, border-radius 0.36s; }
.os-app.opening, .os-app.closing { transform: scale(0.16); opacity: 0; border-radius: 60px; }
.os-app.closing { transition-duration: 0.24s; }
.os-app > .os-screen, .os-app > div > .os-screen { flex: 1; min-height: 0; }
.os-screen { height: 100%; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; display: flex; flex-direction: column; }
.os-screen::-webkit-scrollbar { display: none; }
.os-screen > .os-scroll { flex: 1; }
.app-messages, .app-phone, .app-market, .app-gallery { --os-bg: var(--os-plain); }
.os-tabbed { height: 100%; display: flex; flex-direction: column; }
.os-tabbed > :first-child { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.os-scroll { padding-bottom: 18px; }

.os-nav { position: sticky; top: 0; z-index: 6; padding: 4px 8px 4px; background: color-mix(in srgb, var(--os-bg) 82%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.os-nav-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 40px; }
.os-nav-title { display: grid; justify-items: center; text-align: center; max-width: 150px; min-width: 0; overflow: hidden; }
.os-nav-title b { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.os-nav-title small { font-size: 11.5px; color: var(--os-sub); }
.os-nav-right { justify-self: end; display: flex; gap: 2px; }
.os-screen-glass h1, .os-screen-glass h2, .os-screen-glass h3 { color: inherit; }
.os-large { margin: 0; padding: 0 8px 6px; font-size: 32px; font-weight: 700; letter-spacing: -0.02em; }
.os-navback { justify-self: start; display: inline-flex; align-items: center; gap: 3px; padding: 6px 4px; border: 0; background: none; color: var(--os-accent); font-size: 16px; cursor: pointer; }
.os-chev { display: inline-block; width: 11px; height: 11px; border: solid currentColor; border-width: 0 0 2.6px 2.6px; transform: rotate(45deg); margin-left: 4px; border-radius: 1px; }
.os-chev.right { width: 8px; height: 8px; border-width: 2px 2px 0 0; color: var(--os-sub); opacity: 0.7; margin: 0 2px 0 4px; flex: none; }
.os-chev.tiny { width: 6px; height: 6px; }
.os-navbtn { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; border: 0; background: none; color: var(--os-accent); font-size: 16px; cursor: pointer; border-radius: 17px; }
.os-navbtn .ic { width: 21px; height: 21px; }
.os-navbtn.bold { font-weight: 600; }
.os-navbtn.danger { color: var(--os-red); }
.os-navbtn:disabled { opacity: 0.35; }

.os-group { margin: 22px 16px 0; }
.os-group-title { margin: 0 0 6px 16px; font-size: 12.5px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; color: var(--os-sub); }
.os-group-foot { margin: 6px 16px 0; font-size: 12.5px; color: var(--os-sub); line-height: 1.35; }
.os-cells { border-radius: 11px; overflow: hidden; background: var(--os-cell); }
.os-cell { position: relative; width: 100%; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 14px; border: 0; background: none; color: var(--os-fg); font: inherit; text-align: left; cursor: default; }
button.os-cell { cursor: pointer; }
button.os-cell:active, label.os-cell:active { background: var(--os-fill); }
.os-cells > * + *::before, .os-cells > * + .os-cell::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: 0.5px solid var(--os-sep); }
.os-cells > * { position: relative; }
.os-cell-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.os-cell-main > b, .os-cell-main > .os-name { font-size: 16px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-cell-main small { font-size: 13px; color: var(--os-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-cell-value { color: var(--os-sub); font-size: 15px; white-space: nowrap; }
.os-cell.danger .os-cell-main > b { color: var(--os-red); }
.os-cell.accent .os-cell-main > b { color: var(--os-accent); }
.os-cell.tall { min-height: 76px; }
.os-cell.picked .ic { color: var(--os-accent); }
.os-cell .missed { color: var(--os-red); }
.os-cell-acts { display: flex; gap: 6px; align-items: center; }
.os-lead { flex: none; display: grid; place-items: center; width: 29px; height: 29px; border-radius: 7px; color: #fff; }
.os-lead .ic { width: 17px; height: 17px; }
.os-lead.nb-staff { background: #0a84ff; } .os-lead.nb-support { background: #30d158; } .os-lead.nb-chatmod { background: #5e5ce6; } .os-lead.nb-developer { background: #ff9f0a; } .os-lead.nb-partner { background: #e5a800; }
.os-roundmini { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--os-fill); color: var(--os-accent); cursor: pointer; }
.os-roundmini.green { color: var(--os-green); }
.os-roundmini .ic { width: 16px; height: 16px; }

.os-av { flex: none; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--os-fill); }
.os-av.ph { display: grid; place-items: center; background: linear-gradient(180deg, #a5abb8, #858a96); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
.os-av.group { background: linear-gradient(180deg, #8e9cb5, #63708a); }
.os-av.sms { background: linear-gradient(180deg, #5ee07b, #24b04b); }
.os-av.dispatch { background: linear-gradient(180deg, #ff6a5f, #d70015); }
.os-av.dispatch.off { background: linear-gradient(180deg, #a1a1a6, #6c6c70); }
.os-av .ic { width: 55%; height: 55%; }
.os-av.xs { width: 22px; height: 22px; font-size: 9px; }
.os-av.sm { width: 34px; height: 34px; }
.os-av.md { width: 44px; height: 44px; font-size: 16px; }
.os-av.lg { width: 58px; height: 58px; font-size: 20px; }
.os-av.xl { width: 88px; height: 88px; font-size: 30px; }
.os-av.xxl { width: 124px; height: 124px; font-size: 42px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.os-name { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.os-badges { display: inline-flex; gap: 2px; flex: none; }
.os-badge { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; color: #fff; background: #0a84ff; }
.os-badge .ic { width: 9px; height: 9px; }
.os-badge.nb-support { background: #30d158; } .os-badge.nb-chatmod { background: #5e5ce6; } .os-badge.nb-developer { background: #ff9f0a; } .os-badge.nb-partner { background: #e5a800; }

.os-pad { padding: 8px 16px; }
.os-pad.stack, .stack { display: grid; gap: 10px; }
.os-input { width: 100%; box-sizing: border-box; padding: 11px 13px; border: 0; border-radius: 11px; background: var(--os-cell); color: var(--os-fg); font: inherit; font-size: 16px; outline: none; }
.os-scroll .os-input, .os-pad .os-input { background: var(--os-fill2); }
.app-messages .os-input, .app-phone .os-input, .app-market .os-input, .app-gallery .os-input { background: var(--os-fill); }
.os-input.search { padding: 8px 12px; border-radius: 10px; background: var(--os-fill) !important; font-size: 16px; }
.os-input::placeholder { color: var(--os-sub); }
textarea.os-input { resize: none; line-height: 1.35; }
select.os-input { appearance: none; }
.os-inline { display: flex; gap: 8px; align-items: center; padding: 6px 10px; }
.os-inline .os-input { padding: 8px 10px; background: transparent !important; }
.os-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 18px; border: 0; border-radius: 13px; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; background: var(--os-accent); color: #fff; }
.os-btn .ic { width: 17px; height: 17px; }
.os-btn.ghost { background: var(--os-fill); color: var(--os-accent); }
.os-btn.danger { background: var(--os-red); color: #fff; }
.os-btn.danger.ghost { background: var(--os-fill); color: var(--os-red); }
.os-btn.small { min-height: 30px; padding: 0 12px; border-radius: 15px; font-size: 14px; }
.os-btn.small.ghost { background: var(--os-fill); color: var(--os-accent); }
.os-btn.small.danger { background: var(--os-fill); color: var(--os-red); }
.os-btn:disabled { opacity: 0.45; cursor: default; }
.os-btn:active:not(:disabled) { filter: brightness(0.85); }
.os-err { margin: 0; color: var(--os-red); font-size: 13.5px; }
.os-err[hidden] { display: none; }
.os-fine { margin: 0; color: var(--os-sub); font-size: 12.5px; line-height: 1.4; }
.os-fine.center { text-align: center; padding: 14px 24px; }
.os-fine.pad { padding: 4px 18px; }
.os-empty { display: grid; justify-items: center; gap: 6px; padding: 44px 26px; text-align: center; color: var(--os-sub); }
.os-empty .ic { width: 38px; height: 38px; margin-bottom: 4px; opacity: 0.7; }
.os-empty b { color: var(--os-fg); font-size: 19px; font-weight: 600; }
.os-empty p { margin: 0; font-size: 14px; line-height: 1.4; }
.os-banner-note { margin: 6px 16px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 69, 58, 0.14); color: var(--os-red); font-size: 13.5px; }
.os-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 2px; border-radius: 9px; background: var(--os-fill); }
.os-seg button { position: relative; padding: 6px 4px; border: 0; border-radius: 7px; background: none; color: var(--os-fg); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; }
.os-seg button[aria-selected="true"] { background: var(--os-cell); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14); font-weight: 600; }
.theme-dark .os-seg button[aria-selected="true"] { background: #636366; }
.os-seg em { margin-left: 4px; padding: 0 6px; border-radius: 8px; background: #ff3b30; color: #fff; font-style: normal; font-size: 11px; }
.os-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.os-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border: 0; border-radius: 16px; background: var(--os-fill); color: var(--os-fg); font: inherit; font-size: 13.5px; cursor: pointer; }
.os-chip.on { background: var(--os-accent); color: #fff; }
.os-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.os-hero { display: grid; justify-items: center; gap: 4px; padding: 16px 20px 6px; text-align: center; }
.os-hero > b { font-size: 22px; font-weight: 600; }
.os-hero > .os-name b, .os-hero > .os-name { font-size: 20px; font-weight: 600; }
.os-hero small { color: var(--os-sub); font-size: 13.5px; }
.os-hero .os-av { margin-bottom: 6px; }
.os-bignum { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.os-hero-actions { display: grid; grid-auto-flow: column; gap: 8px; margin-top: 12px; width: 100%; }
.os-hero-actions button { display: grid; justify-items: center; gap: 3px; padding: 9px 4px 7px; border: 0; border-radius: 12px; background: var(--os-cell); color: var(--os-accent); font: inherit; font-size: 11.5px; cursor: pointer; }
.os-hero-actions button b { font-size: 17px; line-height: 18px; }
.os-hero-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.os-profilecard { display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); margin: 6px 16px 8px; padding: 12px 14px; border: 0; border-radius: 13px; background: var(--os-cell); color: var(--os-fg); font: inherit; text-align: left; cursor: pointer; }
.os-profilecard > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.os-profilecard .os-name { font-size: 19px; font-weight: 600; }
.os-profilecard small { color: var(--os-sub); font-size: 13px; }
.os-check { width: 22px; height: 22px; accent-color: var(--os-accent); }
.os-checkrow { display: flex; align-items: center; gap: 10px; }

.os-inbox { display: flex; flex-direction: column; }
.os-row { display: grid; grid-template-columns: 12px auto 1fr; align-items: center; gap: 10px; padding: 0 0 0 4px; border: 0; background: none; color: var(--os-fg); font: inherit; text-align: left; cursor: pointer; }
.os-row:active { background: var(--os-fill); }
.os-row .os-av { width: 46px; height: 46px; font-size: 16px; }
.os-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--os-accent); justify-self: center; }
.os-dot.off { visibility: hidden; }
.os-row-main { min-width: 0; display: grid; gap: 1px; padding: 10px 12px 10px 0; border-bottom: 0.5px solid var(--os-sep); }
.os-row-top { display: flex; align-items: center; gap: 6px; }
.os-row-top .os-name { flex: 1; font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-row-top time { color: var(--os-sub); font-size: 14px; }
.os-row-main small { color: var(--os-sub); font-size: 14.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.os-tag { justify-self: start; margin-top: 2px; padding: 1px 7px; border-radius: 8px; background: var(--os-fill); color: var(--os-sub); font-style: normal; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }

.os-chat { height: 100%; display: flex; flex-direction: column; }
.os-chathead { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 8px 6px; border-bottom: 0.5px solid var(--os-sep); background: color-mix(in srgb, var(--os-bg) 85%, var(--os-fill)); }
.os-backcount { min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--os-accent); color: #fff; font-size: 12px; font-weight: 600; text-align: center; }
.os-backcount:empty { display: none; }
.os-chatwho { display: grid; justify-items: center; gap: 2px; padding: 2px 6px; border: 0; background: none; color: var(--os-fg); font: inherit; cursor: pointer; max-width: 170px; }
.os-chatwho small { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.os-callstatus { font-style: normal; font-size: 10.5px; color: var(--os-sub); }
.os-callstatus.st-active { color: var(--os-green); }
.os-lines { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 10px 6px; display: flex; flex-direction: column; gap: 3px; scrollbar-width: none; user-select: text; }
.os-msg { display: flex; align-items: flex-end; gap: 6px; max-width: 82%; }
.os-msg.me { align-self: flex-end; }
.os-msg.them { align-self: flex-start; }
.os-bubble-wrap { position: relative; display: grid; min-width: 0; }
.os-bubble { padding: 7px 12px; border-radius: 18px; background: var(--os-them); color: var(--os-fg); font-size: 15.5px; line-height: 1.3; word-wrap: break-word; overflow-wrap: anywhere; }
.os-bubble p { margin: 0; white-space: pre-wrap; }
.os-msg.me .os-bubble { background: #0a84ff; color: #fff; }
.os-msg.me.sms .os-bubble { background: #34c759; }
.os-msg.me.dispatch .os-bubble { background: #0a84ff; }
.os-msg.them.dispatch .os-bubble { background: rgba(255, 69, 58, 0.16); }
.os-msg.mod .os-bubble { box-shadow: inset 0 0 0 1.5px #ffd60a; }
.os-msg.pic .os-bubble { padding: 0; overflow: hidden; background: none; }
.os-photo { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; }
.os-photo img { display: block; max-width: 210px; max-height: 260px; border-radius: 16px; }
.os-from { display: flex; align-items: center; gap: 4px; margin: 4px 0 2px 12px; color: var(--os-sub); font-size: 11.5px; }
.os-from em { padding: 0 5px; border-radius: 5px; background: #ffd60a; color: #000; font-style: normal; font-weight: 600; font-size: 10px; }
.os-flag { position: absolute; right: -26px; bottom: 2px; width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--os-sub); opacity: 0; cursor: pointer; }
.os-flag .ic { width: 12px; height: 12px; }
.os-msg:hover .os-flag, .os-flag:focus-visible { opacity: 1; }
.os-sys { align-self: center; display: inline-flex; align-items: center; gap: 5px; margin: 8px 18px; color: var(--os-sub); font-size: 12px; text-align: center; }
.os-sys.mod { color: #ff9f0a; font-weight: 600; }
.os-sys .ic { width: 13px; height: 13px; }
.os-modslot:empty { display: none; }
.os-modbar { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(255, 214, 10, 0.16); color: #ffb800; font-size: 12px; font-weight: 600; }
.os-modbar .ic { width: 13px; height: 13px; }
.os-compose { flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 6px 10px 4px; }
.os-attach { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--os-fill); color: var(--os-sub); cursor: pointer; }
.os-saywrap { position: relative; flex: 1; min-width: 0; display: flex; border: 1px solid var(--os-sep); border-radius: 19px; }
.os-say { flex: 1; min-height: 34px; max-height: 96px; padding: 7px 40px 7px 13px; border: 0; background: none; color: var(--os-fg); font: inherit; font-size: 16px; line-height: 1.25; resize: none; outline: none; }
.os-say::placeholder { color: var(--os-sub); }
.os-send { position: absolute; right: 3px; bottom: 3px; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #0a84ff; color: #fff; cursor: pointer; }
.os-send .ic { width: 15px; height: 15px; stroke-width: 3; }
.os-send:disabled, .os-attach:disabled { opacity: 0.4; }
.os-to { display: flex; align-items: center; gap: 6px; padding: 0 0 0 12px; border-radius: 11px; background: var(--os-fill); color: var(--os-sub); }
.os-to .os-input { background: none !important; padding-left: 0; }
.os-lightbox { position: absolute; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 20px; background: rgba(0, 0, 0, 0.92); color: #fff; }
.os-lightbox img { max-width: 100%; max-height: 80vh; border-radius: 8px; }
.os-lightbox small { opacity: 0.6; }

.os-tabbar { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); padding: 6px 0 0; border-top: 0.5px solid var(--os-sep); background: color-mix(in srgb, var(--os-bg) 90%, var(--os-fill)); }
.os-tabbar button { display: grid; justify-items: center; gap: 2px; border: 0; background: none; color: var(--os-sub); font: inherit; font-size: 10.5px; cursor: pointer; }
.os-tabbar button .ic { width: 23px; height: 23px; }
.os-tabbar button[aria-pressed="true"] { color: var(--os-accent); }
.os-dialer { display: flex; flex-direction: column; align-items: center; height: 100%; padding: 6px 0 4px; }
.os-presets { display: flex; gap: 18px; justify-content: center; padding: 4px 0 6px; }
.os-presets button { display: grid; justify-items: center; gap: 4px; border: 0; background: none; color: var(--os-fg); font: inherit; font-size: 11px; cursor: pointer; }
.os-presets span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: #fff; }
.os-dial-display { display: grid; justify-items: center; gap: 2px; min-height: 64px; margin-top: auto; }
.os-dial-num { font-size: 32px; font-weight: 400; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.os-dial-display small { color: var(--os-sub); font-size: 12px; }
.os-dial-keys { display: grid; grid-template-columns: repeat(3, 66px); gap: 12px 22px; justify-content: center; margin: 6px 0 12px; }
.os-dkey { width: 66px; height: 66px; display: grid; place-content: center; justify-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--os-fill); color: var(--os-fg); font: inherit; cursor: pointer; }
.os-dkey b { font-size: 28px; font-weight: 400; line-height: 1; }
.os-dkey small { font-size: 8.5px; font-weight: 700; letter-spacing: 0.14em; min-height: 10px; }
.os-dkey:active { filter: brightness(1.4); }
.os-dial-row { display: grid; grid-template-columns: 66px 66px 66px; gap: 22px; justify-content: center; align-items: center; margin-bottom: 8px; }
.os-dial-call { width: 66px; height: 66px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #34c759; color: #fff; cursor: pointer; }
.os-dial-call .ic { width: 28px; height: 28px; fill: currentColor; }
.os-dial-del { justify-self: center; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--os-sub); cursor: pointer; }
.os-recent-ic { width: 26px; display: grid; place-items: center; color: var(--os-sub); }
.os-recent-ic.red { color: var(--os-red); }
.os-recent-ic .ic { width: 15px; height: 15px; }
.os-em-head { display: grid; justify-items: center; gap: 2px; padding: 4px 0 6px; }
.os-em-head b { font-size: 26px; font-weight: 700; }
.os-em-head.k-911 b { font-size: 44px; color: var(--os-red); letter-spacing: 0.04em; }
.os-em-head small { color: var(--os-sub); }
.os-services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.os-services button { display: grid; justify-items: center; gap: 3px; padding: 9px 2px; border: 1.5px solid transparent; border-radius: 12px; background: var(--os-fill); color: var(--os-fg); font: inherit; font-size: 12px; cursor: pointer; }
.os-services button[aria-checked="true"] { border-color: var(--os-red); background: rgba(255, 69, 58, 0.14); }

.os-lock { position: absolute; inset: 0; z-index: 40; touch-action: none; }
.os-screen-glass.locked .os-home, .os-screen-glass.locked .os-applayer { visibility: hidden; }
.os-screen-glass.in-app .os-home { visibility: hidden; transition: visibility 0s 0.4s; }
.os-lockface { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: calc(var(--os-top) + 6px) 14px 34px; border: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), transparent 40%); color: #fff; font: inherit; cursor: pointer; }
.os-lockicon .ic { width: 16px; height: 16px; }
.os-lock-date { margin-top: 10px; font-size: 17px; font-weight: 600; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }
.os-lock-time { font-size: 82px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); font-variant-numeric: tabular-nums; }
.os-lock-notes { width: 100%; display: grid; gap: 6px; margin-top: 18px; }
.os-lock-notes .os-banner { pointer-events: none; animation: none; }
.os-lock-hint { margin-top: auto; display: grid; justify-items: center; gap: 8px; font-size: 13px; opacity: 0.85; }
.os-lock-hint i { width: 120px; height: 5px; border-radius: 3px; background: #fff; }
.os-codepad { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: calc(var(--os-top) + 20px) 10px 20px; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px); color: #fff; }
.os-code-title { margin-top: 10px; font-size: 18px; font-weight: 500; }
.os-code-dots { display: flex; gap: 18px; margin: 14px 0 28px; }
.os-code-dots i { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid #fff; }
.os-code-dots i.on { background: #fff; }
.os-code-dots.shake { animation: osShake 0.4s; }
@keyframes osShake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
.os-keys { display: grid; grid-template-columns: repeat(3, 70px); gap: 14px 22px; }
.os-key { width: 70px; height: 70px; display: grid; place-content: center; justify-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.2); color: #fff; font: inherit; cursor: pointer; }
.os-key b { font-size: 30px; font-weight: 400; line-height: 1; }
.os-key small { font-size: 8.5px; font-weight: 700; letter-spacing: 0.15em; }
.os-key:active { background: rgba(255, 255, 255, 0.5); }
.os-code-foot { margin-top: auto; width: 100%; display: flex; justify-content: space-between; padding: 0 30px; }
.os-code-foot button { border: 0; background: none; color: #fff; font: inherit; font-size: 16px; cursor: pointer; }

.os-banners { position: absolute; top: calc(var(--os-top) - 2px); left: 8px; right: 8px; z-index: 80; display: grid; gap: 6px; pointer-events: none; }
.os-banner { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 20px; background: rgba(40, 40, 44, 0.78); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); color: #fff; font: inherit; text-align: left; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); pointer-events: auto; cursor: pointer; animation: osDrop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2); transition: opacity 0.3s, transform 0.3s; }
.theme-light .os-banner { background: rgba(246, 246, 248, 0.86); color: #000; }
.os-banner.out { opacity: 0; transform: translateY(-14px); }
.os-banner .os-tile.sm, .os-banner .os-av { width: 36px; height: 36px; }
.os-banner-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.os-banner-top { display: flex; justify-content: space-between; gap: 6px; }
.os-banner-top b { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-banner-top small { opacity: 0.6; font-size: 12px; }
.os-banner-text { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@keyframes osDrop { from { transform: translateY(-30px); opacity: 0; } }
.os-toast { justify-self: center; max-width: 92%; padding: 9px 14px; border-radius: 16px; background: rgba(40, 40, 44, 0.9); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: #fff; font-size: 13.5px; text-align: center; animation: osDrop 0.3s; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); }
.os-toast.bad { background: rgba(215, 0, 21, 0.92); }

.os-sheets { position: absolute; inset: 0; z-index: 70; pointer-events: none; }
.os-sheetwrap { position: absolute; inset: 0; display: flex; align-items: flex-end; background: rgba(0, 0, 0, 0.35); pointer-events: auto; animation: osFade 0.2s; }
.os-sheetwrap.out { opacity: 0; transition: opacity 0.2s; }
.os-sheet { width: 100%; max-height: 82%; overflow-y: auto; padding-bottom: calc(var(--os-bottom) + 10px); border-radius: 14px 14px 0 0; background: var(--os-grouped); color: var(--os-fg); animation: osUp 0.3s cubic-bezier(0.2, 0.9, 0.3, 1); }
.os-sheet-grab { width: 36px; height: 5px; margin: 6px auto 0; border-radius: 3px; background: var(--os-sep); }
.os-sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px 10px 18px; }
.os-sheet-head b { font-size: 17px; font-weight: 600; }
.os-sheet-x { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--os-fill); color: var(--os-sub); cursor: pointer; }
.os-sheet-x .ic { width: 14px; height: 14px; }
.os-sheet-body { padding: 0 16px 8px; }
.os-sheet-body.stack { display: grid; gap: 10px; }
.os-pickgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.os-pickgrid > p { grid-column: 1 / -1; }
@keyframes osUp { from { transform: translateY(100%); } }
@keyframes osFade { from { opacity: 0; } }

.os-calllayer { position: absolute; inset: 0; z-index: 60; pointer-events: none; }
.os-call { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: calc(var(--os-top) + 30px) 24px calc(var(--os-bottom) + 30px); background: #1c1c1e; color: #fff; pointer-events: auto; overflow: hidden; animation: osFade 0.25s; }
.os-call > * { position: relative; }
.os-call-bg { position: absolute !important; inset: -60px; background: radial-gradient(120% 80% at 50% 0%, #3a4a6a, #0b0d12); background-size: cover; background-position: center; filter: blur(40px) brightness(0.45) saturate(1.2); }
.os-call-min { position: absolute !important; top: calc(var(--os-top) + 6px); left: 16px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fff; cursor: pointer; }
.os-call-who { display: grid; justify-items: center; gap: 4px; text-align: center; }
.os-call-who small { font-size: 15px; opacity: 0.75; }
.os-call-who b { font-size: 30px; font-weight: 400; letter-spacing: -0.01em; }
.os-call-people { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.os-call-people span { display: grid; justify-items: center; gap: 2px; font-size: 11px; }
.os-call-people span.wait { opacity: 0.5; }
.os-call-grid { margin-top: auto; display: grid; grid-template-columns: repeat(3, auto); gap: 22px 26px; }
.os-call-answer { margin-top: auto; width: 100%; display: flex; justify-content: space-around; }
.os-callbtn-wrap { display: grid; justify-items: center; gap: 6px; font-size: 12.5px; }
.os-callbtn { width: 70px; height: 70px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.18); color: #fff; cursor: pointer; backdrop-filter: blur(10px); }
.os-callbtn .ic { width: 28px; height: 28px; }
.os-callbtn.end { background: #ff3b30; }
.os-callbtn.ok { background: #34c759; }
.os-callbtn.on { background: #fff; color: #000; }
.os-homebar { position: absolute; left: 50%; bottom: 0; z-index: 95; width: 140px; height: 22px; padding: 0; border: 0; transform: translateX(-50%); background: none; cursor: pointer; display: grid; place-items: center; }
.os-homebar i { width: 120px; height: 5px; border-radius: 3px; background: #fff; opacity: 0.9; }
.os-screen-glass.theme-light.in-app:not(.in-call):not([data-app="camera"]) .os-homebar i { background: #000; }
.os-screen-glass.locked .os-homebar { display: none; }

.os-camera { height: 100%; display: flex; flex-direction: column; background: #000; color: #fff; }
.app-camera { background: #000; }
.os-cam-top { display: flex; justify-content: center; padding: 6px; }
.os-cam-live { padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.14); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; }
.os-cam-live.on { background: #ffd60a; color: #000; }
.os-cam-view { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; background: #0b0b0c; overflow: hidden; }
.os-cam-video { width: 100%; height: 100%; object-fit: contain; }
.os-cam-empty { display: grid; justify-items: center; gap: 10px; padding: 20px; text-align: center; }
.os-cam-empty > .ic { width: 40px; height: 40px; opacity: 0.8; }
.os-cam-empty b { font-size: 17px; }
.os-cam-empty p { margin: 0; color: #a1a1a6; font-size: 13.5px; line-height: 1.4; }
.os-cam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.os-cam-flash.go { animation: osFlash 0.35s; }
@keyframes osFlash { 0% { opacity: 0.9; } 100% { opacity: 0; } }
.os-cam-grid { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 33.2%, rgba(255, 255, 255, 0.12) 33.3%, transparent 33.5%, transparent 66.5%, rgba(255, 255, 255, 0.12) 66.6%, transparent 66.8%), linear-gradient(180deg, transparent 33.2%, rgba(255, 255, 255, 0.12) 33.3%, transparent 33.5%, transparent 66.5%, rgba(255, 255, 255, 0.12) 66.6%, transparent 66.8%); }
.os-cam-mode { text-align: center; padding: 8px; color: #ffd60a; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; }
.os-cam-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 6px 26px 14px; }
.os-cam-thumb { width: 46px; height: 46px; padding: 0; border: 1.5px solid rgba(255, 255, 255, 0.6); border-radius: 9px; background: #1c1c1e; overflow: hidden; cursor: pointer; }
.os-cam-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.os-shutter { width: 72px; height: 72px; display: grid; place-items: center; padding: 0; border: 4px solid #fff; border-radius: 50%; background: none; cursor: pointer; }
.os-shutter i { width: 58px; height: 58px; border-radius: 50%; background: #fff; transition: transform 0.12s; }
.os-shutter:active i { transform: scale(0.88); }
.os-shutter.busy i { background: #8e8e93; }
.os-cam-side { justify-self: end; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fff; cursor: pointer; }

.os-photogrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.os-thumb { display: block; aspect-ratio: 1; padding: 0; border: 0; background: var(--os-fill); overflow: hidden; cursor: pointer; }
.os-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.os-viewer { height: 100%; display: flex; flex-direction: column; background: var(--os-bg); }
.os-viewer-img { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; background: #000; }
.os-viewer-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.os-viewer-nav { position: absolute; top: 50%; width: 32px; height: 32px; margin-top: -16px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.45); color: #fff; cursor: pointer; }
.os-viewer-nav.l { left: 8px; } .os-viewer-nav.r { right: 8px; }
.os-viewer-tools { display: flex; justify-content: space-around; padding: 10px 6px 4px; }
.os-phototool { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--os-accent); cursor: pointer; }
.os-phototool .ic { width: 22px; height: 22px; }
.os-phototool.danger { color: var(--os-red); }

.os-cash-logo .ic { width: 20px; height: 20px; fill: #fff; }
.os-idcard-photo { width: 54px; height: 64px; border-radius: 8px; object-fit: cover; background: #c8d4f0; }
.os-idcard-photo.ph { display: grid; place-items: center; }
.os-pay-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 16px 0; }
.os-amt { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.os-amt.in { color: var(--os-green); }
.os-amountbox { display: grid; justify-items: center; padding: 6px 0 2px; }
.os-bigamount { font-size: 50px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.os-amountbox small { color: var(--os-sub); }
.os-numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.os-numpad button { height: 46px; border: 0; border-radius: 12px; background: var(--os-cell); color: var(--os-fg); font: inherit; font-size: 22px; cursor: pointer; display: grid; place-items: center; }
.os-numpad button:active { background: var(--os-fill); }

.os-license { position: relative; display: grid; gap: 12px; padding: 16px; border-radius: 18px; color: #0b1b3a; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0 2px, transparent 2px 10px), linear-gradient(140deg, #e7eeff, #9fb7ff 70%, #7e98ef); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3); }
.os-license-top { display: flex; justify-content: space-between; align-items: baseline; }
.os-license-top b { font-size: 15px; letter-spacing: 0.08em; }
.os-license-top small { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; opacity: 0.75; }
.os-license-body { display: flex; gap: 14px; }
.os-license-photo { flex: none; width: 76px; height: 92px; border-radius: 10px; object-fit: cover; background: #c8d4f0; }
.os-license-photo.ph { display: grid; place-items: center; }
.os-license-grid { flex: 1; min-width: 0; display: grid; gap: 6px; }
.os-license-grid > div { display: grid; }
.os-license-grid small { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; }
.os-license-grid b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-license-status { justify-self: start; padding: 3px 10px; border-radius: 8px; background: #1e9e4a; color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.os-license-status.suspended { background: #e08a00; } .os-license-status.revoked { background: #d70015; } .os-license-status.none { background: #6c6c70; } .os-license-status.expired { background: #e08a00; }
.os-carlabel { display: flex; align-items: center; gap: 8px; min-width: 0; }
.os-carlabel b { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-plate { display: inline-grid; justify-items: center; padding: 1px 7px; border: 1.5px solid #1a3d8f; border-radius: 4px; background: #fff; color: #10204a; font-family: var(--mono, ui-monospace, monospace); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; }
.os-plate.big { padding: 4px 16px 6px; font-size: 22px; border-width: 2.5px; border-radius: 7px; }
.os-plate small { font-size: 8px; color: #b3261e; letter-spacing: 0.2em; }

.os-mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; padding: 4px 16px 10px; }
.os-mcard { display: grid; gap: 3px; padding: 0; border: 0; background: none; color: var(--os-fg); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.os-mcard-img { position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: 12px; overflow: hidden; background: var(--os-fill); color: var(--os-sub); }
.os-mcard-img img { width: 100%; height: 100%; object-fit: cover; }
.os-mcard-img .ic { width: 30px; height: 30px; }
.os-mcard-img em { position: absolute; left: 6px; top: 6px; padding: 1px 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.7); color: #fff; font-style: normal; font-size: 10px; font-weight: 700; }
.os-mcard b { font-size: 15px; font-weight: 600; }
.os-mcard small { font-size: 13px; color: var(--os-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-mphoto { position: relative; aspect-ratio: 1; display: grid; place-items: center; background: #000; }
.os-mphoto img { width: 100%; height: 100%; object-fit: contain; }
.os-mphoto-none { color: #8e8e93; }
.os-mphoto-none .ic { width: 50px; height: 50px; }
.os-mdots { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.os-mdots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.45); cursor: pointer; }
.os-mdots button.on { background: #fff; }
.os-mtitle { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.os-mprice { font-size: 20px; color: var(--os-accent); }
.os-mdesc { margin: 0; font-size: 15px; line-height: 1.45; white-space: pre-wrap; user-select: text; }
.os-mstrip { display: flex; gap: 8px; flex-wrap: wrap; }
.os-mstrip-item, .os-mstrip-add { position: relative; width: 66px; height: 66px; border-radius: 10px; overflow: hidden; background: var(--os-fill); }
.os-mstrip-item img { width: 100%; height: 100%; object-fit: cover; }
.os-mstrip-item button { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; cursor: pointer; }
.os-mstrip-item button .ic { width: 11px; height: 11px; }
.os-mstrip-add { display: grid; place-content: center; justify-items: center; border: 1.5px dashed var(--os-sep); color: var(--os-accent); cursor: pointer; font: inherit; font-size: 11px; }
.os-money { display: flex; align-items: center; gap: 2px; padding-left: 12px; border-radius: 11px; background: var(--os-fill); color: var(--os-sub); }
.os-money .os-input { background: none !important; padding-left: 2px; }

.app-finder { padding: 0 0 var(--os-bottom); }
.os-finder { position: relative; height: 100%; }
.os-finder-map { position: absolute; inset: 0; background: #0b1622; }
.os-finder-map .cmap { width: 100%; height: 100%; }
.os-finder-close { position: absolute; top: calc(var(--os-top) + 4px); left: 12px; z-index: 5; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(30, 30, 32, 0.75); color: #fff; backdrop-filter: blur(12px); cursor: pointer; }
.os-fsheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; max-height: 34%; overflow-y: auto; padding: 0 14px 14px; border-radius: 16px 16px 0 0; background: color-mix(in srgb, var(--os-grouped) 92%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.3); transition: max-height 0.3s; scrollbar-width: none; }
.os-fsheet.tall { max-height: 66%; }
.os-fsheet-grab { position: sticky; top: 0; z-index: 1; display: block; width: 100%; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; }
.os-fsheet-grab::after { content: ""; display: block; width: 36px; height: 5px; margin: 6px auto 0; border-radius: 3px; background: var(--os-sep); }
.os-fsheet-body { display: grid; gap: 10px; }
.os-fsheet-body .os-cells .os-cell { background: var(--os-cell); }
.os-sharing { display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: rgba(48, 209, 88, 0.14); }
.os-sharing b { color: var(--os-green); font-size: 14.5px; }
.os-sharing small { color: var(--os-sub); font-size: 12.5px; }
.os-me-pin .cmap-dot { box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.35); }

.os-storehero { display: grid; gap: 6px; padding: 18px; border-radius: 16px; color: #fff; background: radial-gradient(90% 70% at 100% 0%, #6ad4ff, transparent 60%), linear-gradient(140deg, #1d6bff, #5b2bd6); }
.os-storehero small { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; opacity: 0.8; }
.os-storehero b { font-size: 21px; line-height: 1.2; }
.os-storehero p { margin: 0; font-size: 14px; opacity: 0.85; }
.os-soon { display: grid; justify-items: center; gap: 10px; padding: 60px 30px; text-align: center; }
.os-soon .os-tile { width: 96px; height: 96px; border-radius: 22px; }
.os-soon b { font-size: 24px; font-weight: 700; }
.os-soon p { margin: 0; color: var(--os-sub); font-size: 15px; line-height: 1.4; }
.os-jobcard { display: grid; justify-items: center; gap: 4px; padding: 16px; border-radius: 16px; background: var(--os-cell); text-align: center; }
.os-jobcard-top { display: flex; align-items: center; gap: 10px; justify-self: stretch; text-align: left; }
.os-jobcard-top span { display: grid; }
.os-jobcard-top small { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--os-green); }
.os-jobcard > small { color: var(--os-sub); }
.os-jobcard > small.warn { color: var(--os-red); }
.os-upme-feed { display: grid; }
.os-upme-post { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 12px 14px; border-bottom: 0.5px solid var(--os-sep); cursor: pointer; }
.os-upme-post.full { cursor: default; }
.os-upme-who { padding: 0; border: 0; background: none; cursor: pointer; align-self: start; }
.os-upme-body { min-width: 0; display: grid; gap: 6px; }
.os-upme-head { display: flex; align-items: center; gap: 5px; min-width: 0; }
.os-upme-head .os-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.os-upme-head small { flex: none; color: var(--os-sub); font-size: 13px; }
.os-upme-more { margin-left: auto; display: flex; gap: 3px; padding: 6px 2px; border: 0; background: none; cursor: pointer; }
.os-upme-more i { width: 4px; height: 4px; border-radius: 50%; background: var(--os-sub); }
.os-upme-text { margin: 0; font-size: 15px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.os-upme-photos { display: grid; gap: 3px; border-radius: 14px; overflow: hidden; }
.os-upme-photos.n2, .os-upme-photos.n4 { grid-template-columns: 1fr 1fr; }
.os-upme-photos.n3 { grid-template-columns: 1fr 1fr; }
.os-upme-photos.n3 img:first-child { grid-row: span 2; }
.os-upme-photos img { width: 100%; height: 100%; max-height: 260px; aspect-ratio: 4 / 3; object-fit: cover; background: var(--os-fill); }
.os-upme-photos.n1 img { aspect-ratio: auto; max-height: 320px; }
.os-upme-acts { display: flex; gap: 22px; }
.os-upme-act { display: inline-flex; align-items: center; gap: 5px; padding: 2px 0; border: 0; background: none; color: var(--os-sub); font: inherit; font-size: 13.5px; cursor: pointer; }
.os-upme-act .ic, .os-upme-heart { width: 18px; height: 18px; }
.os-upme-act.on { color: #ff2d78; }
.os-upme-mecard { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--os-cell); color: var(--os-fg); font: inherit; text-align: left; cursor: pointer; }
.os-upme-mecard-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.os-upme-mecard-main small { color: var(--os-sub); font-size: 13px; }
.os-upme-compose { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.os-upme-comments { display: grid; padding-bottom: 8px; }
.os-upme-comment { display: grid; grid-template-columns: auto 1fr; gap: 9px; padding: 9px 14px; }
.os-upme-x { margin-left: auto; padding: 2px; border: 0; background: none; color: var(--os-sub); cursor: pointer; }
.os-upme-x .ic { width: 14px; height: 14px; }
.os-upme-reply { position: sticky; bottom: 0; display: flex; gap: 8px; padding: 8px 12px 14px; background: var(--os-bg); border-top: 0.5px solid var(--os-sep); }
.os-upme-reply .os-input { flex: 1; min-width: 0; }
.os-upme-send { flex: none; width: 38px; border: 0; border-radius: 50%; background: var(--os-accent); color: #fff; cursor: pointer; display: grid; place-items: center; }
.os-upme-send .ic { width: 17px; height: 17px; }
.os-upme-profile { display: grid; justify-items: center; gap: 6px; padding-top: 6px; padding-bottom: 14px; border-bottom: 0.5px solid var(--os-sep); text-align: center; }
.os-upme-profile .os-row2 { justify-self: stretch; margin-top: 6px; }
.os-upme-stats { display: flex; gap: 26px; margin-top: 4px; }
.os-upme-stats span { display: grid; }
.os-upme-stats b { font-size: 17px; }
.os-upme-stats small { color: var(--os-sub); font-size: 12px; }
.os-upme-activity { margin: 8px 14px; border-radius: 12px; overflow: hidden; background: var(--os-cell); }
.os-getbtn { border: 0; cursor: pointer; padding: 4px 14px; border-radius: 14px; background: var(--os-fill); color: var(--os-accent); font-size: 13px; font-weight: 700; }

.os-switch { position: relative; flex: none; width: 51px; height: 31px; padding: 0; border: 0; border-radius: 16px; background: var(--os-fill); cursor: pointer; transition: background 0.2s; }
.os-switch i { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); transition: transform 0.2s; }
.os-switch.on { background: #34c759; }
.os-switch.on i { transform: translateX(20px); }
.os-wallgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 12px; }
.os-wallpick { position: relative; aspect-ratio: 9 / 19.5; padding: 0; border: 2.5px solid transparent; border-radius: 12px; cursor: pointer; background-clip: padding-box; }
.os-wallpick.on { border-color: var(--os-accent); }
.os-wallpick small { position: absolute; left: 0; right: 0; bottom: 4px; color: #fff; font-size: 9.5px; text-align: center; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.os-wallpreview { display: grid; place-items: center; padding: 12px 0 0; }
.os-wall-mini { width: 120px; aspect-ratio: 9 / 19.5; display: grid; justify-items: center; align-content: start; padding-top: 30px; border: 3px solid #1c1c1e; border-radius: 20px; background-size: cover; background-position: center; color: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3); }
.os-wall-mini b { font-size: 30px; font-weight: 600; }
.os-wall-mini.photo { background-color: #222; }
.os-appearances { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px; }
.os-appearance { display: grid; justify-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--os-fg); font: inherit; cursor: pointer; }
.os-appearance-shot { display: grid; gap: 5px; align-content: start; width: 72px; height: 130px; padding: 26px 8px 8px; border: 3px solid #3a3a3c; border-radius: 16px; background: #f2f2f7; }
.os-appearance.dark .os-appearance-shot { background: #000; }
.os-appearance-shot i { height: 12px; border-radius: 4px; background: #fff; }
.os-appearance.dark .os-appearance-shot i { background: #2c2c2e; }
.os-appearance.on .os-appearance-shot { border-color: var(--os-accent); }
.os-radio { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--os-sub); }
.os-appearance.on .os-radio { border: 6px solid var(--os-accent); }
.os-aboutlogo .ic { width: 64px; height: 64px; fill: var(--os-accent); }

.os-native { display: block; justify-items: stretch; width: 100%; height: 100%; --os-top: 0px; --os-bottom: calc(22px + env(safe-area-inset-bottom)); }
.os-native .os-frame, .os-native .os-bezel { height: 100%; padding: 0; border-radius: 0; background: #000; box-shadow: none; }
.os-native .os-screen-glass { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; font-size: 16px; }
.os-native .os-notch, .os-native .os-btn-side, .os-native .os-status { display: none; }
.os-native .os-home { padding-top: 16px; }
.os-native .os-banners { top: 8px; }
.os-native .os-call-min, .os-native .os-finder-close { top: 10px; }
.os-native .os-homebar { bottom: env(safe-area-inset-bottom); }
.os-native .os-lockface, .os-native .os-codepad { padding-top: 30px; }
@media (max-width: 380px) { .os-device:not(.os-native) { --os-w: 290px; } }
.os-finder .cmap-controls { top: calc(var(--os-top) + 4px); }
.os-cam-view:not(:has(video)) .os-cam-grid { display: none; }
.nm-listing-main { display: flex; gap: 14px; align-items: flex-start; }
.nm-listing-img { width: 120px; height: 90px; object-fit: cover; border-radius: 10px; flex: none; }
.nm-listing .nm-toolbar { margin-top: 12px; }
.wp-dusk { background: linear-gradient(170deg,#2b1055,#7597de 90%); }
.wp-lagoon { background: radial-gradient(90% 50% at 70% 10%,#7ff7d4,transparent 60%),linear-gradient(180deg,#0ba5a5,#05445e); }
.wp-ember { background: radial-gradient(90% 55% at 50% 100%,#ff5e3a,transparent 65%),linear-gradient(180deg,#1b0a05,#5a1a08); }
.wp-mint { background: linear-gradient(170deg,#c8fff0,#5fe0b5 55%,#1b9c7a); }
.wp-orchid { background: radial-gradient(80% 50% at 20% 15%,#f6a8ff,transparent 60%),linear-gradient(160deg,#a43ee8,#3b0f7a); }
.wp-slate { background: linear-gradient(165deg,#6b7a8f,#2f3b4d 60%,#141b26); }
.wp-citrus { background: linear-gradient(170deg,#fff27a,#ffb300 50%,#ff6a00); }
.wp-nebula { background: radial-gradient(70% 45% at 30% 25%,#ff4fd8,transparent 60%),radial-gradient(70% 50% at 75% 70%,#2b6bff,transparent 62%),linear-gradient(180deg,#0a0020,#1b0840); }
.wp-rose { background: linear-gradient(165deg,#ffd1dc,#ff8fb1 55%,#c2185b); }
.wp-forest { background: radial-gradient(90% 50% at 80% 5%,#7bd36a,transparent 55%),linear-gradient(180deg,#14532d,#052e16); }
.wp-cobalt { background: radial-gradient(90% 55% at 0% 0%,#4f8bff,transparent 60%),linear-gradient(170deg,#0a2a8f,#030a2e); }
.wp-peach { background: linear-gradient(170deg,#ffe0c2,#ffaa85 55%,#ff7a8a); }
.wp-mono { background: linear-gradient(180deg,#f4f4f5,#9a9aa0 55%,#2a2a2d); }
.wp-neon { background: radial-gradient(70% 45% at 20% 20%,#00ffd5,transparent 60%),radial-gradient(70% 50% at 85% 80%,#ff00aa,transparent 62%),linear-gradient(180deg,#0a0a14,#14102a); }
.wp-lava { background: radial-gradient(80% 45% at 30% 85%,#ffd000,transparent 60%),linear-gradient(180deg,#2a0505,#c1121f 70%,#ff6a00); }
.wp-frost { background: radial-gradient(90% 50% at 50% 0%,#ffffff,transparent 60%),linear-gradient(180deg,#b8e6ff,#5aa9e6 70%,#1b5fa8); }
.os-pad > .os-btn { display: flex; width: 100%; }
.os-findform .os-input { width: 100%; }
.os-found { padding: 18px 0 8px; }
.m-app.m-kb .os-native { --os-bottom: 8px; }
.m-app, .m-phone, .m-app .os-device, .m-app .os-frame, .m-app .os-bezel, .m-app .os-screen-glass, .m-app .os-applayer, .m-app .os-app { overflow: hidden; overflow: clip; overscroll-behavior: none; }
.m-app .os-chat { min-height: 0; }
.m-app .os-screen-glass input, .m-app .os-screen-glass textarea, .m-app .os-screen-glass select { font-size: 16px; }
.m-app .os-scroll { overscroll-behavior: contain; scroll-padding-bottom: 24px; }
.os-calc { display: flex; flex-direction: column; height: 100%; background: #000; color: #fff; }
.os-calc .os-nav { background: #000; color: #fff; }
.os-calc-body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 0 12px 10px; min-height: 0; }
.os-calc-screen { display: block; padding: 0 8px; text-align: right; font-size: 68px; font-weight: 300; line-height: 1.1; white-space: nowrap; overflow: hidden; color: #fff; }
.os-ckeys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.os-ckey { height: 62px; border: 0; border-radius: 31px; background: #333336; color: #fff; font: inherit; font-size: 26px; cursor: pointer; }
.os-ckey.fn { background: #a5a5a8; color: #000; }
.os-ckey.op { background: #ff9f0a; font-size: 32px; }
.os-ckey.op.on { background: #fff; color: #ff9f0a; }
.os-ckey.zero { grid-column: span 2; text-align: left; padding-left: 26px; }
.os-ckey:active { filter: brightness(1.35); }
.os-clockface { display: grid; justify-items: center; gap: 10px; padding: 26px 16px; text-align: center; }
.os-clockface > b, .os-tmset > b { font-size: 44px; font-weight: 300; font-variant-numeric: tabular-nums; letter-spacing: 0.5px; }
.os-clockface small { color: var(--os-sub); font-size: 15px; }
.os-clockbtns { display: flex; gap: 14px; width: 100%; margin-top: 8px; }
.os-clockbtns .os-btn { flex: 1; }
.os-tmset { display: grid; gap: 14px; justify-items: center; }
.os-laps { display: grid; width: 100%; margin-top: 8px; }
.os-laps > div { display: flex; justify-content: space-between; padding: 9px 4px; border-top: 0.5px solid var(--os-sep); font-variant-numeric: tabular-nums; }
.os-pin { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: #ff9f0a; color: #fff; }
.os-pin .ic { width: 15px; height: 15px; }
.os-navbtn.on { color: #ff9f0a; }
.os-ntitle { font-size: 20px; font-weight: 600; }
.os-nbody { min-height: 260px; resize: none; line-height: 1.4; }
.os-calhead { display: flex; align-items: center; justify-content: space-between; padding: 4px 18px 6px; }
.os-calhead b { font-size: 18px; }
.os-calhead button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 17px; background: var(--os-fill); color: var(--os-accent); cursor: pointer; }
.os-calhead .flip .ic { transform: scaleX(-1); }
.os-calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 0 12px 10px; text-align: center; }
.os-calgrid small { padding: 4px 0; color: var(--os-sub); font-size: 12px; font-weight: 600; }
.os-day { position: relative; display: grid; place-items: center; height: 40px; border: 0; border-radius: 20px; background: none; color: var(--os-fg); font: inherit; font-size: 16px; cursor: pointer; }
.os-day.blank { pointer-events: none; }
.os-day.today b { color: var(--os-red); font-weight: 700; }
.os-day.picked { background: var(--os-accent); }
.os-day.picked b { color: #fff; }
.os-day i { position: absolute; bottom: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--os-sub); }
.os-day.picked i { background: #fff; }
.os-iconbtn { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 15px; background: none; color: var(--os-red); cursor: pointer; }

.os-wstack { position: relative; margin: 8px 16px 0; transition: height 0.55s cubic-bezier(0.2, 0.9, 0.25, 1); }
.os-wcard { position: absolute; top: 0; left: 0; right: 0; height: 188px; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; padding: 16px 18px; border: 0; border-radius: 18px; color: #fff; font: inherit; text-align: left; cursor: pointer; overflow: hidden; box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.18) inset; transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.25, 1), opacity 0.4s ease; will-change: transform; }
.os-wcard.cash { background: radial-gradient(120% 90% at 100% 0%, #2a2d3a, transparent 60%), linear-gradient(150deg, #1e1f26, #050507); }
.os-wcard.id { background: radial-gradient(120% 90% at 0% 0%, #5aa7ff, transparent 55%), linear-gradient(150deg, #2c64e8, #0c2a7a); }
.os-wcard-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.os-wcard-top b { display: inline-flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 600; }
.os-wcard-top small { opacity: 0.7; font-size: 11.5px; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os-wcard-bal { display: grid; }
.os-wcard-bal small { opacity: 0.6; font-size: 12px; }
.os-wcard-bal b { font-size: 34px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.os-wcard-id { display: flex; gap: 14px; align-items: center; }
.os-wcard-id > span:last-child { display: grid; gap: 2px; }
.os-wcard-id b { font-size: 19px; font-weight: 600; }
.os-wcard-id small { opacity: 0.8; font-size: 12.5px; }
.os-wdetail { padding-top: 10px; }
.os-wdetail.enter > * { animation: osWDetail 0.5s 0.12s cubic-bezier(0.2, 0.9, 0.25, 1) both; }
@keyframes osWDetail { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.os-cash-logo .ic { width: 20px; height: 20px; fill: #fff; }
@media (prefers-reduced-motion: reduce) { .os-wcard, .os-wstack { transition: none; } .os-wdetail.enter > * { animation: none; } }
.os-wstack, .os-wdetail { flex: none; }
.m-app.m-kb .os-homebar { display: none; }

.dev-portal { max-width: 1240px; padding-top: 24px; padding-bottom: 64px; }
.dev-shell { display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 32px; align-items: start; }
.dev-side { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 18px; }
.dev-brand { display: flex; align-items: center; gap: 12px; padding: 4px 6px; }
.dev-brand small { display: block; font-size: 10.5px; letter-spacing: 0.16em; color: var(--faint); font-weight: 600; }
.dev-brand b { font-size: 19px; letter-spacing: -0.03em; color: var(--fg); }
.dev-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(160deg, #1d1d22, #0c0c0f); border: 1px solid rgba(229, 158, 21, 0.35); box-shadow: 0 10px 24px -12px rgba(229, 158, 21, 0.7); }
.dev-mark img { width: 26px; height: 26px; object-fit: contain; }
.dev-nav { display: grid; gap: 2px; }
.dev-nav-link { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; color: var(--muted); font-size: 14.5px; font-weight: 500; transition: background 0.15s, color 0.15s; }
.dev-nav-link .ic { width: 17px; height: 17px; }
.dev-nav-link:hover { background: var(--raised); color: var(--fg); }
.dev-nav-link.on { background: var(--accent-soft); color: var(--fg); box-shadow: inset 2px 0 0 var(--accent); }
.dev-nav-link.on .ic { color: var(--accent-strong); }
.dev-nav-link em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.dev-me { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.dev-me img, .dev-me-ph { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.dev-me-ph { display: grid; place-items: center; background: var(--raised); color: var(--fg); font-weight: 600; }
.dev-me b { display: block; color: var(--fg); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-me small { color: var(--faint); font-size: 12px; }
.dev-me div { min-width: 0; }
.dev-signin { justify-content: center; }
.dev-main { min-width: 0; }
.dev-eyebrow { display: block; font-size: 11px; letter-spacing: 0.16em; color: var(--accent-strong); font-weight: 700; margin-bottom: 6px; }
.dev-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; align-items: center; padding: 44px 48px; overflow: hidden; margin-bottom: 22px; background: radial-gradient(70% 90% at 88% 40%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%), radial-gradient(60% 80% at 0% 100%, rgba(124, 58, 237, 0.16), transparent 65%), var(--panel); }
.dev-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 36px 36px; mask-image: radial-gradient(80% 90% at 30% 40%, #000, transparent 75%); pointer-events: none; }
.dev-hero-text { position: relative; }
.dev-hero-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-strong); font-size: 13px; font-weight: 600; }
.dev-hero-kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-strong); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.dev-hero h1 { font-size: clamp(34px, 4.6vw, 54px); letter-spacing: -0.05em; line-height: 1.02; margin: 18px 0 16px; color: var(--fg); }
.dev-hero h1 span { background: linear-gradient(90deg, var(--accent-strong), #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dev-hero-text p { max-width: 540px; font-size: 16.5px; line-height: 1.6; margin-bottom: 24px; }
.dev-hero-points { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--muted); font-size: 13.5px; }
.dev-hero-points li { display: inline-flex; align-items: center; gap: 7px; }
.dev-hero-points .ic { width: 15px; height: 15px; color: var(--accent-strong); }
.dev-ph-wrap { position: relative; justify-self: center; padding: 10px 0 18px; }
.dev-ph-wrap::before { content: ''; position: absolute; inset: 12% -18% 6%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 45%, transparent), transparent); filter: blur(28px); z-index: 0; }
.dev-ph { position: relative; z-index: 1; width: 276px; height: 600px; padding: 10px; border-radius: 46px; background: linear-gradient(160deg, #3a3a3e, #121214 40%, #1b1b1e); box-shadow: inset 0 0 0 1.5px #4a4a4f, inset 0 0 0 7px #0b0b0c, 0 50px 80px -40px rgba(0, 0, 0, 0.95); }
.dev-ph-island { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 86px; height: 25px; border-radius: 14px; background: #000; z-index: 2; }
.dev-ph-screen { height: 100%; border-radius: 37px; overflow: hidden; background: #000; color: #fff; padding: 14px 12px 0; display: flex; flex-direction: column; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', var(--font); }
.dev-ph-screen > * { flex: none; }
.dev-ph-status { display: flex; align-items: center; gap: 5px; padding: 3px 14px 0 16px; height: 26px; font-size: 13px; }
.dev-ph-status b { margin-right: auto; font-weight: 600; }
.dev-ph-bars { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 10px; }
.dev-ph-bars i { width: 3px; background: #fff; border-radius: 1px; }
.dev-ph-bars i:nth-child(1) { height: 4px; } .dev-ph-bars i:nth-child(2) { height: 6px; } .dev-ph-bars i:nth-child(3) { height: 8px; } .dev-ph-bars i:nth-child(4) { height: 10px; }
.dev-ph-batt { width: 22px; height: 11px; border-radius: 3.5px; border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: inset 0 0 0 1.5px #000; background: #fff; }
.dev-ph-nav { position: relative; display: flex; align-items: center; margin-top: 12px; padding: 0 4px 8px; border-bottom: 0.5px solid rgba(84, 84, 88, 0.55); font-size: 13px; }
.dev-ph-nav span { display: inline-flex; align-items: center; gap: 2px; color: #0a84ff; }
.dev-ph-nav span .ic { width: 13px; height: 13px; }
.dev-ph-nav b { position: absolute; left: 50%; transform: translateX(-50%); font-weight: 600; white-space: nowrap; }
.dev-ph-title { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin: 10px 6px 8px; }
.dev-ph-hero { min-height: 0; height: auto; padding: 11px 13px 12px; border-radius: 13px; gap: 2px; align-content: start; }
.dev-ph-hero small { font-size: 9px; }
.dev-ph-hero b { font-size: 15px; }
.dev-ph-hero p { font-size: 10.5px; }
.dev-ph-label { margin: 13px 10px 5px; font-size: 10.5px; color: #8e8e93; letter-spacing: 0.02em; }
.dev-ph-group { border-radius: 11px; background: #1c1c1e; overflow: hidden; }
.dev-ph-cell { display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center; padding: 7px 10px; position: relative; }
.dev-ph-cell + .dev-ph-cell::before { content: ''; position: absolute; top: 0; left: 48px; right: 0; height: 0.5px; background: rgba(84, 84, 88, 0.55); }
.dev-ph-cell .os-tile.xs { width: 29px; height: 29px; border-radius: 7px; }
.dev-ph-cell-main { min-width: 0; display: grid; }
.dev-ph-cell-main b { font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-ph-cell-main small { font-size: 10px; color: #8e8e93; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-ph-get { padding: 3px 11px; border-radius: 999px; background: #2c2c2e; color: #0a84ff; font-size: 11px; font-weight: 700; }
.dev-ph-tile { color: #fff; }
.dev-ph-tile .ic { width: 16px; height: 16px; }
.dev-ph-add { background: transparent; border: 1.5px dashed rgba(10, 132, 255, 0.7); box-shadow: none; color: #0a84ff; }
.dev-ph-yours .dev-ph-cell-main b { color: #0a84ff; }
.dev-ph-home { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); width: 92px; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.85); z-index: 2; }
.dev-mock-get { padding: 4px 11px; border-radius: 999px; background: #e5e5ea; color: #0a84ff; font-size: 11px; font-weight: 700; }
.dev-cta { display: grid; gap: 10px; justify-items: start; margin-bottom: 8px; }
.dev-cta h2 { font-size: 20px; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; color: var(--fg); }
.dev-cta.ok { border-color: rgba(74, 222, 128, 0.3); }
.dev-cta.ok h2 .ic { color: var(--ok); }
.dev-cta.bad { border-color: rgba(248, 113, 113, 0.35); }
.dev-h2 { font-size: 20px; letter-spacing: -0.03em; margin: 34px 0 14px; color: var(--fg); }
.dev-h2-row { margin-top: 34px; margin-bottom: 14px; }
.dev-h2-row .dev-h2 { margin: 0; }
.dev-h2-row a { color: var(--accent-strong); font-size: 14px; }
.dev-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dev-steps li { padding: 18px 18px 20px; display: grid; gap: 6px; align-content: start; transition: border-color 0.2s, transform 0.2s; }
.dev-steps li:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.dev-steps b { color: var(--fg); font-size: 15.5px; margin-top: 6px; }
.dev-steps p { font-size: 14px; line-height: 1.5; }
.dev-step-n { font-family: var(--mono); font-size: 12px; color: var(--faint); }
.dev-step-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-strong); flex: none; }
.dev-programs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dev-program { display: grid; gap: 8px; align-content: start; }
.dev-program.open { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.dev-program b { color: var(--fg); }
.dev-program p { font-size: 14px; line-height: 1.5; }
.dev-program.pick { grid-template-columns: auto 1fr; gap: 12px; cursor: pointer; }
.dev-program.pick.off { opacity: 0.55; cursor: not-allowed; }
.dev-program.pick:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.dev-page-title { margin-bottom: 22px; }
.dev-page-title h1 { font-size: 30px; letter-spacing: -0.04em; color: var(--fg); }
.dev-page-title p { margin-top: 4px; }
.dev-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.dev-stat { padding: 16px 18px; display: grid; gap: 4px; }
.dev-stat-top { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 13px; }
.dev-stat-top .ic { width: 16px; height: 16px; color: var(--faint); }
.dev-stat b { font-size: 30px; letter-spacing: -0.04em; color: var(--fg); font-variant-numeric: tabular-nums; margin-top: 8px; }
.dev-stat small { color: var(--faint); font-size: 12.5px; }
.dev-next { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; width: 100%; padding: 16px 18px; margin-top: 14px; text-align: left; color: inherit; cursor: pointer; border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: linear-gradient(90deg, var(--accent-soft), var(--panel) 70%); }
.dev-next b { display: block; color: var(--fg); }
.dev-next > .ic { color: var(--accent-strong); }
.dev-empty { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 40px 24px; }
.dev-empty b { color: var(--fg); font-size: 16px; }
.dev-empty p { max-width: 420px; margin-bottom: 8px; }
.dev-empty-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: var(--raised); color: var(--muted); margin-bottom: 4px; }
.dev-form { display: grid; gap: 16px; }
.dev-section { display: grid; gap: 4px; margin-bottom: 16px; }
.dev-section-head { margin-bottom: 14px; }
.dev-section-head h2 { font-size: 18px; letter-spacing: -0.02em; color: var(--fg); }
.dev-section-head p { margin-top: 3px; font-size: 14px; }
.dev-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--body); cursor: pointer; }
.dev-check input { margin-top: 3px; accent-color: var(--accent); }
.dev-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dev-chip { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--raised); font-size: 14px; color: var(--body); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.dev-chip input { accent-color: var(--accent); }
.dev-chip:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--fg); }
.dev-error { padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(248, 113, 113, 0.35); background: rgba(248, 113, 113, 0.08); color: var(--fg); font-size: 14px; margin-bottom: 14px; }
.dev-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .dev-grid2 { grid-template-columns: 1fr; } }
.dev-secret { display: grid; gap: 10px; margin-bottom: 16px; border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.05); }
.dev-keytext { padding: 8px 12px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line-strong); word-break: break-all; font-size: 13.5px; color: var(--fg); }
.dev-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--body); line-height: 1.55; }
.dev-apps { display: grid; gap: 10px; }
.dev-app { display: grid; grid-template-columns: auto 1fr auto auto; gap: 14px; align-items: center; padding: 14px 16px; text-align: left; width: 100%; color: inherit; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.dev-app:hover { border-color: var(--line-strong); background: var(--raised); }
.dev-app > .ic { color: var(--faint); }
.dev-app-main { display: grid; gap: 2px; min-width: 0; }
.dev-app-main b { color: var(--fg); }
.dev-app-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-app-side { display: grid; gap: 6px; justify-items: end; }
.dev-app-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; object-fit: cover; background: var(--raised); color: var(--faint); flex: none; }
.dev-app-icon.lg { width: 84px; height: 84px; border-radius: 20px; }
.dev-app-icon.lg .ic { width: 30px; height: 30px; }
.dev-back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; margin-bottom: 14px; background: none; border: 0; padding: 0; cursor: pointer; }
.dev-back:hover { color: var(--fg); }
.dev-back .ic { width: 15px; height: 15px; }
.dev-app-hero { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; padding: 22px; margin-bottom: 18px; }
.dev-app-hero h1 { font-size: 28px; letter-spacing: -0.04em; color: var(--fg); }
.dev-app-hero .row { margin-top: 10px; }
.dev-app-hero-act { display: grid; gap: 8px; justify-items: stretch; }
.dev-code-cell { display: grid; gap: 4px; }
.dev-code-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-strong); font-size: 13.5px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-code-link .ic { width: 14px; height: 14px; flex: none; }
.dev-portal pre { margin: 12px 0 0; padding: 14px 16px; border-radius: 10px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line); overflow-x: auto; font-family: var(--mono); font-size: 13px; line-height: 1.6; }
.dev-wizard { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 22px; align-items: start; }
.dev-wizard-side { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 14px; }
.dev-wsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dev-wstep { display: flex; gap: 12px; align-items: center; width: 100%; padding: 9px 10px; border-radius: 11px; background: none; border: 1px solid transparent; color: var(--muted); text-align: left; cursor: pointer; }
.dev-wstep:hover { background: var(--raised); }
.dev-wstep b { display: block; color: var(--body); font-size: 14px; }
.dev-wstep small { font-size: 12px; color: var(--faint); }
.dev-wstep-dot { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--panel); flex: none; }
.dev-wstep-dot .ic { width: 15px; height: 15px; }
.dev-wstep.on { background: var(--panel); border-color: var(--line-strong); }
.dev-wstep.on b { color: var(--fg); }
.dev-wstep.on .dev-wstep-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.dev-wstep.done:not(.on) .dev-wstep-dot { background: rgba(74, 222, 128, 0.12); border-color: rgba(74, 222, 128, 0.4); color: var(--ok); }
.dev-preview { display: grid; gap: 4px; }
.dev-preview-card { display: grid; grid-template-columns: 52px 1fr auto; gap: 11px; align-items: center; padding: 14px; border-radius: 16px; background: #f2f2f7; color: #111; }
.dev-preview-card img, .dev-preview-ph { width: 52px; height: 52px; border-radius: 13px; object-fit: cover; }
.dev-preview-ph { display: grid; place-items: center; background: #e5e5ea; color: #8e8e93; }
.dev-preview-card div { min-width: 0; }
.dev-preview-card b { display: block; font-size: 14px; color: #111; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-preview-card small { display: block; font-size: 12px; color: #6e6e73; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-preview-card em { display: block; font-style: normal; font-size: 11px; color: #8e8e93; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-ready-box { padding: 14px 16px; }
.dev-ready { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; color: var(--muted); }
.dev-ready li { display: flex; gap: 8px; align-items: center; }
.dev-ready .ic { width: 15px; height: 15px; color: var(--faint); }
.dev-ready li.ok { color: var(--fg); }
.dev-ready li.ok .ic { color: var(--ok); }
.dev-wizard-form { min-width: 0; }
.dev-pane { padding: 26px 26px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-panel); }
.dev-pane-head { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.dev-pane-n { font-size: 12px; color: var(--accent-strong); font-weight: 600; }
.dev-pane-head h2 { font-size: 22px; letter-spacing: -0.03em; color: var(--fg); margin-top: 2px; }
.dev-pane-head p { margin-top: 4px; font-size: 14px; }
.dev-pane-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.dev-listing { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.dev-listing-main { display: grid; }
.dev-icon-pick { display: grid; place-items: center; width: 104px; height: 104px; border-radius: 24px; border: 1.5px dashed var(--line-strong); background: var(--raised); color: var(--muted); cursor: pointer; overflow: hidden; padding: 0; transition: border-color 0.15s; }
.dev-icon-pick:hover { border-color: var(--accent); color: var(--fg); }
.dev-icon-pick span { display: grid; justify-items: center; gap: 6px; font-size: 12px; }
.dev-icon-pick img { width: 100%; height: 100%; object-fit: cover; }
.dev-code-ways { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 18px; }
.dev-way { padding: 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--canvas); display: grid; gap: 12px; align-content: start; }
.dev-way-head { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; }
.dev-way-head .ic { grid-row: span 2; width: 20px; height: 20px; color: var(--accent-strong); }
.dev-way-head b { color: var(--fg); }
.dev-way-head small { font-size: 12.5px; }
.dev-way .field { margin-bottom: 12px; }
.dev-uploader { display: grid; gap: 10px; }
.dev-drop { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 30px 16px; border: 1.5px dashed var(--line-strong); border-radius: 12px; background: var(--panel); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.dev-drop:hover, .dev-drop:focus-visible, .dev-drop.over { border-color: var(--accent); background: var(--accent-soft); outline: none; }
.dev-drop b { color: var(--fg); font-size: 14.5px; }
.dev-drop small { font-size: 12.5px; }
.dev-drop-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-strong); margin-bottom: 4px; }
.dev-files { display: grid; gap: 6px; }
.dev-files:empty { display: none; }
.dev-file { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.dev-file.bad { border-color: rgba(248, 113, 113, 0.4); }
.dev-file.bad small { color: var(--bad); }
.dev-file-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--raised); color: var(--muted); }
.dev-file-ic .ic { width: 16px; height: 16px; }
.dev-file-main { min-width: 0; display: grid; gap: 2px; }
.dev-file-main b { color: var(--fg); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-file-main small { font-size: 12px; }
.dev-file-bar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; margin-top: 3px; }
.dev-file-bar i { display: block; height: 100%; background: var(--accent); transition: width 0.15s; }
.dev-tree ul { list-style: none; margin: 10px 0 0; padding: 0; max-height: 50vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; font-family: var(--mono); font-size: 12.5px; }
.dev-tree li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; border-bottom: 1px solid var(--line); color: var(--body); }
.dev-tree li:last-child { border-bottom: 0; }
.dev-tree li span { overflow-wrap: anywhere; }
.dev-tree li small { color: var(--faint); white-space: nowrap; }
.dev-summary { display: grid; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 18px; }
.dev-sum-row { display: grid; grid-template-columns: 120px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.dev-sum-row:last-child { border-bottom: 0; }
.dev-sum-row span { color: var(--muted); }
.dev-sum-row b { color: var(--fg); font-weight: 500; overflow-wrap: anywhere; }
.btn-link { background: none; border: 0; padding: 0; color: var(--accent-strong); font-size: 13px; cursor: pointer; }
.dev-confirms { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); }
@media (max-width: 1080px) {
  .dev-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dev-wizard { grid-template-columns: minmax(0, 1fr); }
  .dev-wizard-side { position: static; grid-template-columns: minmax(0, 1fr); }
  .dev-wsteps { grid-auto-flow: column; overflow-x: auto; }
  .dev-wstep small { display: none; }
  .dev-preview, .dev-ready-box { display: none; }
  .dev-code-ways { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .dev-shell { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .dev-side { position: static; }
  .dev-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .dev-nav-link { position: relative; flex-direction: column; justify-content: center; gap: 5px; padding: 10px 4px 8px; font-size: 12px; line-height: 1.2; text-align: center; border: 1px solid var(--line); background: var(--panel); }
  .dev-nav-link .ic { width: 18px; height: 18px; }
  .dev-nav-link.on { box-shadow: none; border-color: var(--accent); }
  .dev-nav-link em { position: absolute; top: 5px; right: 7px; margin: 0; font-size: 10.5px; }
  .dev-brand b { font-size: 17px; }
  .dev-mark { width: 34px; height: 34px; border-radius: 10px; }
  .dev-mark img { width: 22px; height: 22px; }
  .dev-me { display: none; }
  .dev-hero { grid-template-columns: minmax(0, 1fr); padding: 28px 22px; }
  .dev-ph-wrap { display: none; }
}
@media (max-width: 600px) {
  .dev-wsteps { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); overflow: visible; }
  .dev-wstep { flex-direction: column; gap: 5px; padding: 8px 2px; text-align: center; }
  .dev-wstep b { font-size: 11.5px; }
  .dev-wstep-dot { width: 30px; height: 30px; }
  .studio-card-main .pill { display: none; }
  .studio-card-main > .ic { display: none; }
  .studio-card-main { gap: 12px; padding: 8px; }
  .dev-portal h1 { font-size: clamp(26px, 8vw, 34px); }
}
@media (max-width: 760px) {
  .dev-steps, .dev-programs, .dev-checks, .dev-listing { grid-template-columns: minmax(0, 1fr); }
  .dev-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dev-app { grid-template-columns: auto 1fr; }
  .dev-app > .ic { display: none; }
  .dev-app-side { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; justify-content: start; }
  .dev-app-hero { grid-template-columns: auto 1fr; }
  .dev-app-hero-act { grid-column: 1 / -1; }
  .dev-pane { padding: 18px 16px; }
  .dev-sum-row { grid-template-columns: minmax(0, 1fr) auto; }
  .dev-sum-row span { grid-column: 1 / -1; font-size: 12.5px; }
}
.od-page { padding-top: 28px; padding-bottom: 64px; }
.od-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.od-card .kv dt { align-self: start; padding-top: 2px; }
@media (max-width: 1080px) { .od-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .od-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.od-tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px; margin: 6px 0 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); width: fit-content; max-width: 100%; }
.od-tab { padding: 8px 14px; border-radius: 9px; border: 0; background: none; color: var(--muted); font-size: 14px; font-weight: 500; cursor: pointer; }
.od-tab:hover { color: var(--fg); background: var(--raised); }
.od-tab.on { background: var(--selected); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-strong); }
.od-search { max-width: 360px; }
.od-code { display: grid; gap: 8px; }
.od-code-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--canvas); }
.od-code-meta { font-size: 13px; }
.od-build { margin: 0; padding: 10px 12px; border-radius: 8px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line); font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap; }
.od-card { scroll-margin-top: calc(var(--header-h) + 16px); }
.od-card { display: grid; gap: 12px; }
.od-card b { color: var(--fg); }
.od-pre { white-space: pre-wrap; }
.od-card .kv { grid-template-columns: 170px 1fr; }
@media (max-width: 760px) { .od-card .kv { grid-template-columns: minmax(0, 1fr); } }

.studio-locked { display: grid; justify-items: center; gap: 10px; padding: 48px 24px; text-align: center; }
.studio-locked p { max-width: 460px; margin: 0; }
.studio-how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 28px; }
.studio-how-item { display: grid; gap: 6px; align-content: start; padding: 16px; }
.studio-cards { display: grid; gap: 10px; }
.studio-card { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; }
.studio-card-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 10px; border: 0; border-radius: var(--radius-sm); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.studio-card-main:hover { background: var(--raised); }
.studio-card-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: linear-gradient(160deg, #3d8bff, #6a2bd9); color: #fff; flex: none; }
.studio-card-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.studio-card-on { display: none; color: var(--ok); font-weight: 600; }
@media (max-width: 600px) { .studio-card-on { display: block; } }
.studio-card-text b { color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-ways { display: grid; gap: 8px; }
.studio-way { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--raised); color: var(--body); font: inherit; text-align: left; cursor: pointer; }
.studio-way span { display: grid; gap: 2px; }
.studio-way b { color: var(--fg); }
.studio-way.on { border-color: var(--accent); background: var(--accent-soft); }
.studio-chosen:empty { display: none; }

body.studio-mode .footer, body.studio-mode .banner { display: none; }
body.studio-mode .dev-portal { max-width: none; padding: 12px 16px; }
.studio { --st-bg: #0b0d12; --st-pane: #10131a; --st-line: rgba(255, 255, 255, 0.08); height: calc(100vh - var(--header-h) - 24px); min-height: 620px; display: grid; grid-template-rows: auto minmax(0, 1fr); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--st-bg); box-shadow: var(--shadow-panel); }
.studio.dropping { outline: 2px dashed var(--accent); outline-offset: -6px; }
.studio-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--st-line); background: linear-gradient(180deg, #161a23, #11141b); }
.studio-bar-l, .studio-bar-r { display: flex; align-items: center; gap: 8px; min-width: 0; }
.studio-bar-r { justify-content: flex-end; }
.studio-back { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.studio-back:hover { background: rgba(255, 255, 255, 0.06); color: var(--fg); }
.studio-run, .studio-stop { display: grid; place-items: center; width: 34px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--fg); cursor: pointer; }
.studio-run:hover:not(:disabled), .studio-stop:hover:not(:disabled) { background: rgba(255, 255, 255, 0.07); }
.studio-run .ic { width: 20px; height: 20px; fill: currentColor; }
.studio-run:disabled { opacity: 0.5; cursor: progress; }
.studio-stop i { width: 13px; height: 13px; border-radius: 2px; background: currentColor; }
.studio-stop:disabled { opacity: 0.35; cursor: default; }
.studio-scheme { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); color: var(--muted); font-size: 13px; white-space: nowrap; }
.studio-scheme > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.studio-scheme i { font-style: normal; opacity: 0.6; }
.studio-title { color: var(--fg); cursor: text; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.studio-title:hover { text-decoration: underline dotted; }
.studio-status { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); color: var(--body); font-size: 12.5px; white-space: nowrap; }
.studio-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.studio-status.ok i { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.studio-status.bad i { background: var(--bad); }
.studio-status.busy i { background: var(--accent); animation: studioPulse 0.9s ease-in-out infinite alternate; }
@keyframes studioPulse { from { opacity: 0.3; } to { opacity: 1; } }
.studio-menu-wrap { position: relative; }
.studio-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 210px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); display: grid; }
.studio-menu[hidden] { display: none; }
.studio-menu button { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 7px; background: none; color: var(--body); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.studio-menu button:hover { background: var(--raised); color: var(--fg); }

.studio-body { display: grid; grid-template-columns: 230px minmax(0, 1fr) 372px; min-height: 0; }
.studio-nav, .studio-sim { display: flex; flex-direction: column; min-height: 0; background: var(--st-pane); }
.studio-nav { border-right: 1px solid var(--st-line); }
.studio-sim { border-left: 1px solid var(--st-line); }
.studio-pane-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; padding: 0 10px 0 12px; border-bottom: 1px solid var(--st-line); color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.studio-pane-head > span { display: inline-flex; align-items: center; gap: 6px; }
.studio-pane-head small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.studio-iconbtn { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.studio-iconbtn:hover { background: rgba(255, 255, 255, 0.07); color: var(--fg); }
.studio-iconbtn .ic { width: 15px; height: 15px; }
.studio-tree { flex: 1; overflow: auto; padding: 6px 0; font-size: 13px; }
.studio-row { position: relative; display: flex; align-items: center; }
.studio-node { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px 0 calc(8px + var(--d) * 14px); border: 0; background: none; color: var(--body); font: inherit; text-align: left; cursor: pointer; white-space: nowrap; }
.studio-node span:not(.studio-caret) { overflow: hidden; text-overflow: ellipsis; }
.studio-node .ic { width: 15px; height: 15px; flex: none; color: var(--muted); }
.studio-node.dir .ic { color: #5ac8fa; }
.studio-row:hover .studio-node { background: rgba(255, 255, 255, 0.04); }
.studio-node.on { background: var(--accent-soft) !important; color: var(--fg); }
.studio-caret { width: 10px; flex: none; display: grid; place-items: center; }
.studio-caret::before { content: ""; width: 5px; height: 5px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); transition: transform 0.15s; }
.studio-caret.open::before { transform: rotate(45deg); }
.studio-caret.none::before { display: none; }
.studio-row-acts { position: absolute; right: 4px; display: none; gap: 2px; }
.studio-row:hover .studio-row-acts, .studio-row:focus-within .studio-row-acts { display: flex; }
.studio-row-acts button { display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 5px; background: var(--st-pane); color: var(--muted); cursor: pointer; }
.studio-row-acts button:hover { color: var(--fg); background: var(--raised); }
.studio-row-acts .ic { width: 13px; height: 13px; }
.studio-dirty { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--fg); opacity: 0.75; }
.studio-tree-empty { padding: 10px 14px; margin: 0; font-size: 13px; }
.studio-tree-foot { display: block; padding: 8px 12px; border-top: 1px solid var(--st-line); font-size: 11.5px; }

.studio-center { display: grid; grid-template-rows: auto auto minmax(0, 1fr) minmax(170px, 34%); min-width: 0; min-height: 0; }
.studio-tabs { display: flex; overflow-x: auto; min-height: 36px; background: var(--st-pane); border-bottom: 1px solid var(--st-line); scrollbar-width: none; }
.studio-tab { display: flex; align-items: center; flex: none; border-right: 1px solid var(--st-line); color: var(--muted); }
.studio-tab.on { background: var(--st-bg); color: var(--fg); box-shadow: inset 0 2px 0 var(--accent); }
.studio-tab-open { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 4px 0 12px; border: 0; background: none; color: inherit; font: inherit; font-size: 12.5px; cursor: pointer; }
.studio-tab-open .ic { width: 14px; height: 14px; }
.studio-tab-x { display: grid; place-items: center; width: 22px; height: 22px; margin-right: 6px; border: 0; border-radius: 5px; background: none; color: inherit; cursor: pointer; opacity: 0.6; }
.studio-tab-x:hover { opacity: 1; background: rgba(255, 255, 255, 0.08); }
.studio-tab-x .ic { width: 12px; height: 12px; }
.studio-crumb-row { min-height: 26px; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; justify-content: flex-start; }
.studio-crumbs { display: flex; align-items: center; gap: 6px; }
.studio-crumbs i { font-style: normal; opacity: 0.5; }
.studio-editor { min-height: 0; display: flex; }
.studio-edit { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 0; font-family: var(--mono); font-size: var(--ed-font, 13px); line-height: var(--ed-lh, 20px); }
.studio-gutter { overflow: hidden; padding: 10px 10px 10px 14px; min-width: 46px; color: var(--ed-gutter, rgba(255, 255, 255, 0.25)); text-align: right; user-select: none; border-right: 1px solid var(--st-line); }
.studio-gutter span { display: block; height: var(--ed-lh, 20px); }
.studio-code { width: 100%; height: 100%; margin: 0; padding: 10px 14px; border: 0; outline: 0; resize: none; background: transparent; color: var(--ed-text, #e6edf3); font: inherit; line-height: inherit; tab-size: 2; white-space: pre; overflow: auto; caret-color: var(--accent); }
.studio-blank { flex: 1; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 24px; text-align: center; }
.studio-blank > .ic { width: 34px; height: 34px; color: var(--faint); }
.studio-blank b { color: var(--fg); }
.studio-blank p { max-width: 380px; margin: 0; }
.studio-img { max-width: 220px; max-height: 220px; border-radius: 12px; background: repeating-conic-gradient(#222 0 25%, #2b2b2b 0 50%) 0 0 / 16px 16px; }
.studio-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 6px; color: var(--muted); font-size: 12.5px; }
.studio-keys kbd { padding: 2px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; font-family: var(--mono); font-size: 11.5px; color: var(--body); }

.studio-term { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; border-top: 1px solid var(--st-line); background: var(--ed-term, #07080b); }
.studio-term-body { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
.studio-term-body[hidden], .ed-problems[hidden], .lab-reqs[hidden] { display: none; }
.studio-out { overflow: auto; padding: 8px 14px; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; color: var(--ed-termtext, #c9d1d9); }
.st-line { white-space: pre-wrap; word-break: break-word; }
.st-cmd { color: var(--ed-termtext, #fff); margin-top: 4px; }
.st-ps { color: #7ee787; font-weight: 600; }
.st-ok { color: #7ee787; }
.st-err, .st-app-error { color: #ff7b72; }
.st-warn, .st-app-warn { color: #e3b341; }
.st-sys { color: #79c0ff; }
.st-dir { color: #79c0ff; }
.st-help-c { color: #d2a8ff; font-weight: 400; white-space: pre; }
.st-tag { display: inline-block; min-width: 46px; padding: 0 5px; margin-right: 2px; border-radius: 4px; background: rgba(255, 255, 255, 0.07); color: #8b949e; font-style: normal; font-size: 11px; text-align: center; }
.st-app-error .st-tag { background: rgba(255, 123, 114, 0.15); color: #ff7b72; }
.st-app-warn .st-tag { background: rgba(227, 179, 65, 0.15); color: #e3b341; }
.st-app-system .st-tag { color: #79c0ff; }
.studio-cmdline { display: flex; align-items: center; gap: 8px; padding: 6px 14px 8px; border-top: 1px solid var(--st-line); font-family: var(--mono); font-size: 12.5px; cursor: text; }
.studio-prompt { color: #7ee787; font-weight: 600; white-space: nowrap; }
.studio-cmd { flex: 1; min-width: 0; padding: 4px 0; border: 0; outline: 0; background: none; color: var(--ed-termtext, #fff); font: inherit; caret-color: #7ee787; }

.studio-sim-stage { flex: 1; min-height: 0; display: grid; place-items: center; overflow: auto; padding: 14px 0; background: radial-gradient(120% 80% at 50% 30%, rgba(61, 139, 255, 0.12), transparent 60%); }
.studio-device { --os-w: 300px; }
.studio-simbar { display: flex; justify-content: center; gap: 6px; padding: 8px; border-top: 1px solid var(--st-line); }
.studio-simbtn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--st-line); border-radius: 8px; background: rgba(255, 255, 255, 0.03); color: var(--body); font: inherit; font-size: 12.5px; cursor: pointer; }
.studio-simbtn:hover { background: rgba(255, 255, 255, 0.08); color: var(--fg); }
.studio-simbtn .ic { width: 14px; height: 14px; }
.studio-tile { background: linear-gradient(160deg, #3d8bff, #6a2bd9); color: #fff; }
.studio-tile b { font-size: 26px; font-weight: 700; }
.studio-devicon small { display: inline-flex; align-items: center; gap: 3px; }
.studio-beta-dot { width: 6px; height: 6px; border-radius: 50%; background: #ff9f0a; flex: none; }
.studio-devicon.installing .os-tile { filter: brightness(0.45) saturate(0.6); }
.studio-ring { position: absolute; inset: 0; display: grid; place-items: center; }
.studio-ring::before { content: ""; width: 30px; height: 30px; border-radius: 50%; background: conic-gradient(rgba(255, 255, 255, 0.92) calc(var(--p) * 1%), rgba(255, 255, 255, 0.18) 0); -webkit-mask: radial-gradient(circle, transparent 10px, #000 11px); mask: radial-gradient(circle, transparent 10px, #000 11px); }

@media (max-width: 1180px) {
  .studio-body { grid-template-columns: 200px minmax(0, 1fr) 340px; }
  .studio-device { --os-w: 290px; }
  .studio-scheme > span > i, .studio-scheme-dev { display: none; }
}
@media (max-width: 900px) {
  .studio { height: auto; }
  .studio-bar { grid-template-columns: 1fr; }
  .studio-bar-c { display: none; }
  .studio-bar-r { justify-content: flex-start; flex-wrap: wrap; }
  .studio-body { grid-template-columns: minmax(0, 1fr); }
  .studio-nav { max-height: 220px; border-right: 0; border-bottom: 1px solid var(--st-line); }
  .studio-center { grid-template-rows: auto auto 420px 260px; }
  .studio-sim { border-left: 0; border-top: 1px solid var(--st-line); }
  .studio-device { --os-w: 290px; }
  .studio-how { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.studio.ed-light .st-ps, .studio.ed-light .studio-prompt, .studio.ed-light .st-ok { color: #1a7f37; }
.studio.ed-light .st-sys, .studio.ed-light .st-dir { color: #0969da; }
.studio.ed-light .st-err, .studio.ed-light .st-app-error { color: #cf222e; }
.studio.ed-light .st-warn, .studio.ed-light .st-app-warn { color: #9a6700; }
.studio.ed-light .studio-bar { background: var(--st-pane); }
.studio.ed-light .studio-status, .studio.ed-light .studio-scheme { background: rgba(0, 0, 0, 0.05); }
.studio .btn-ghost { color: var(--body); }
.studio-gutter span.mark-error { color: var(--ed-error, #ff7b72); font-weight: 700; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ed-error, #ff7b72) 18%, transparent)); }
.studio-gutter span.mark-warn { color: #e3b341; font-weight: 700; }
.studio-pdot { width: 7px; height: 7px; flex: none; border-radius: 50%; }
.studio-pdot.error { background: var(--ed-error, #ff7b72); }
.studio-pdot.warn { background: #e3b341; }
.studio-ptabs { display: inline-flex; gap: 2px; }
.studio-ptab { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border: 0; border-radius: 6px; background: none; color: var(--muted); font: inherit; font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; cursor: pointer; }
.studio-ptab .ic { width: 13px; height: 13px; }
.studio-ptab:hover { color: var(--fg); }
.studio-ptab.on { color: var(--fg); background: rgba(127, 127, 127, 0.14); }
.studio-pcount:empty { display: none; }
.studio-pcount { min-width: 16px; padding: 0 5px; border-radius: 999px; background: rgba(127, 127, 127, 0.25); color: var(--fg); font-size: 10.5px; text-align: center; letter-spacing: 0; }
.studio-pcount.bad { background: var(--ed-error, #ff7b72); color: #fff; }
.studio-pcount.warn { background: #e3b341; color: #1c1c1e; }
.ed-problems { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.ed-problems-head { display: none; }
.ed-problems-list { overflow: auto; padding: 4px 0; }
.ed-problems-none { margin: 0; padding: 10px 14px; font-size: 13px; }
.ed-problem { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; padding: 5px 14px; border: 0; background: none; color: var(--body); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.ed-problem:hover { background: rgba(127, 127, 127, 0.1); }
.ed-problem i { width: 9px; height: 9px; border-radius: 50%; background: #e3b341; }
.ed-problem.error i { background: var(--ed-error, #ff7b72); }
.ed-problem-msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-problem small { font-family: var(--mono); font-size: 11.5px; }
.fi { display: inline-grid; place-items: center; flex: none; min-width: 18px; height: 15px; padding: 0 2px; border-radius: 4px; font: 700 8.5px/1 var(--mono); letter-spacing: -0.02em; color: #fff; background: #6e7681; }
.fi-js { background: #e9c600; color: #1c1c1e; }
.fi-ts { background: #3178c6; }
.fi-html { background: #e8590c; }
.fi-css { background: #2965f1; font-size: 10px; }
.fi-json { background: #8957e5; }
.fi-md { background: #57606a; }
.fi-img { background: #1f9d55; font-size: 10px; }
.fi-lua { background: #000080; }
.fi-cfg { background: #6e7681; font-size: 10px; }
.sandbox-frame { position: absolute; width: 0; height: 0; border: 0; visibility: hidden; }
.ed-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.ed-theme { display: grid; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--raised); color: var(--body); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.ed-theme.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); color: var(--fg); }
.ed-swatch { position: relative; display: block; height: 52px; border: 1px solid; border-radius: 7px; overflow: hidden; }
.ed-swatch i { position: absolute; inset: 0 auto 0 0; width: 26%; }
.ed-swatch b { position: absolute; top: 9px; left: 34%; width: 30%; height: 5px; border-radius: 3px; }
.ed-swatch em { position: relative; display: block; margin: 0 0 6px 34%; height: 4px; width: 50%; border-radius: 3px; opacity: 0.8; }
.ed-swatch em:first-of-type { margin-top: 22px; }
.ed-custom summary { cursor: pointer; color: var(--fg); font-weight: 600; margin-bottom: 10px; }
.ed-colors, .im-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ed-color { display: flex; align-items: center; gap: 8px; color: var(--body); font-size: 13px; }
.ed-color input[type="color"] { width: 34px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: none; cursor: pointer; }
.ed-toggle { display: flex; align-items: center; gap: 8px; color: var(--body); font-size: 13.5px; cursor: pointer; }
.im { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; }
.im [hidden] { display: none !important; }
.im-preview { display: grid; justify-items: center; align-content: start; gap: 12px; }
.im-canvas { width: 180px; height: 180px; border-radius: 40px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.im-small { display: grid; justify-items: center; gap: 6px; }
.im-mini { width: 54px; height: 54px; border-radius: 13px; background: center / cover no-repeat #1c1c1e; }
.im-modes { display: inline-flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--raised); justify-self: start; }
.im-modes button { padding: 6px 12px; border: 0; border-radius: 7px; background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.im-modes button.on { background: var(--panel); color: var(--fg); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.im-glyphs { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px; max-height: 170px; overflow: auto; }
.im-glyph { display: grid; place-items: center; height: 38px; border: 1px solid var(--line); border-radius: 9px; background: var(--raised); color: var(--body); cursor: pointer; }
.im-glyph.on { border-color: var(--accent); color: var(--fg); background: var(--accent-soft); }
.im-backs { display: flex; flex-wrap: wrap; gap: 8px; }
.im-back { width: 32px; height: 32px; border: 2px solid transparent; border-radius: 9px; cursor: pointer; }
.im-back.on { border-color: var(--fg); }
@media (max-width: 640px) { .im { grid-template-columns: 1fr; } .im-canvas { width: 140px; height: 140px; border-radius: 32px; } }

.lab-body { grid-template-columns: 220px minmax(0, 1fr) 400px; }
.studio-bar-r .input-sm, .input-sm { height: 30px; padding: 0 28px 0 10px; font-size: 13px; width: auto; }
.lab-examples { display: grid; gap: 2px; padding: 10px 6px 6px; border-top: 1px solid var(--st-line); margin-top: 8px; }
.lab-h { display: block; padding: 4px 8px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.lab-example { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px; border: 0; border-radius: 6px; background: none; color: var(--body); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.lab-example:hover { background: rgba(127, 127, 127, 0.1); color: var(--fg); }
.lab-example .pill { font-size: 10px; padding: 1px 6px; }
.lab-saved { display: block; padding: 10px 14px; font-size: 11.5px; }
.lab-dash { min-width: 0; }
.lab-dash-tabs { display: flex; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--st-line); }
.lab-dash-tabs button { flex: 1; padding: 6px 8px; border: 0; border-radius: 7px; background: none; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.lab-dash-tabs button.on { background: rgba(127, 127, 127, 0.16); color: var(--fg); }
.lab-dash-body { flex: 1; min-height: 0; overflow: auto; display: grid; align-content: start; gap: 10px; padding: 12px; }
.lab-card { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--st-line); border-radius: 10px; background: rgba(127, 127, 127, 0.05); }
.lab-card b { color: var(--fg); }
.lab-hero { gap: 12px; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); }
.lab-hero > div:first-child { display: grid; gap: 2px; }
.lab-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lab-stats span { display: grid; gap: 1px; padding: 8px; border-radius: 8px; background: rgba(127, 127, 127, 0.1); }
.lab-stats b { font-size: 18px; }
.lab-stats small { color: var(--muted); font-size: 11.5px; }
.lab-teams { display: flex; flex-wrap: wrap; gap: 6px; }
.lab-list { display: grid; gap: 2px; }
.lab-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; }
.lab-row:hover { background: rgba(127, 127, 127, 0.08); }
.lab-row.voided { opacity: 0.55; }
.lab-row-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.lab-row-main b { color: var(--fg); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-row-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.lab-case-n { font-family: var(--mono); color: var(--muted); font-size: 12px; min-width: 30px; }
.lab-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ok); }
.lab-dot.bad { background: var(--bad); }
.lab-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 10px; background: var(--accent-soft); color: var(--body); font-size: 13.5px; }
.lab-note p { margin: 0; }
.lab-pre { margin: 0; padding: 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.25); color: var(--ed-termtext, #c9d1d9); font: 12px/1.5 var(--mono); white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto; }
.studio.ed-light .lab-pre { background: rgba(0, 0, 0, 0.05); }
.lab-payload { max-height: 180px; }
.lab-dash-acts { padding-top: 4px; }
.lab-reqs { overflow: auto; padding: 4px 0; font-size: 12.5px; }
.lab-req summary { display: flex; align-items: center; gap: 10px; padding: 5px 14px; cursor: pointer; list-style: none; }
.lab-req summary::-webkit-details-marker { display: none; }
.lab-req summary:hover { background: rgba(127, 127, 127, 0.08); }
.lab-req summary code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); color: var(--fg); }
.lab-req-status { min-width: 34px; font-family: var(--mono); color: var(--ok); }
.lab-req.bad .lab-req-status { color: var(--ed-error, var(--bad)); }
.lab-req-m { min-width: 46px; font-family: var(--mono); color: var(--muted); font-size: 11.5px; }
.lab-req .lab-pre { margin: 4px 14px 8px; }
.dev-doc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.dev-doc-card { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--line); text-align: left; font: inherit; color: var(--body); cursor: pointer; }
.dev-doc-card:hover { border-color: var(--line-strong); }
.dev-doc-card b { color: var(--fg); font-size: 15px; }
.dev-event { border-top: 1px solid var(--line); padding: 8px 0; }
.dev-event summary { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.dev-event summary code { color: var(--fg); min-width: 120px; }
.dev-event pre { margin-top: 8px; }
.dev-ep-table td:nth-child(2) { min-width: 180px; }
@media (max-width: 700px) {
  .dev-ep-table thead { display: none; }
  .dev-ep-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .dev-ep-table td { padding: 0; border: 0; }
  .dev-ep-table td:nth-child(2) { min-width: 0; word-break: break-word; }
  .dev-ep-table td:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 1180px) { .lab-body { grid-template-columns: 190px minmax(0, 1fr) 340px; } }
@media (max-width: 900px) { .lab-body { grid-template-columns: minmax(0, 1fr); } .lab-dash { max-height: none; } .lab-dash-body { max-height: 560px; } }

.lab-card-ic { background: linear-gradient(160deg, #ff9f0a, #ff375f); }
.studio-card-del { flex: none; }
.lab-ways { display: grid; gap: 8px; max-height: 340px; overflow-y: auto; }
.lab-ways .studio-way span:not(.pill) { flex: 1; min-width: 0; }
.lab-ways .pill, .studio-card-main .pill { flex: none; white-space: nowrap; }
.lab-views { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--st-line); }
.lab-views button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.lab-views button:hover { color: var(--fg); }
.lab-views button.on { background: var(--selected); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line-strong); }
.lab .studio-bar-c { display: flex; align-items: center; gap: 12px; }
.lab .studio-title { cursor: pointer; }
.lab .studio-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.lab-full { min-height: 0; overflow: hidden; }
.lab-full[hidden], .lab-body[hidden] { display: none; }
.lab-docs-body { height: 100%; overflow-y: auto; padding: 28px 32px 48px; }
.lab-docs-inner { max-width: 980px; margin: 0 auto; display: grid; gap: 18px; }

.ld { display: grid; grid-template-columns: 210px minmax(0, 1fr); height: 100%; min-height: 0; background: var(--canvas); }
.ld-nav { display: grid; align-content: start; gap: 2px; padding: 14px 10px; border-right: 1px solid var(--st-line); background: var(--st-pane); overflow-y: auto; }
.ld-nav-item { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: inherit; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; }
.ld-nav-item:hover { background: var(--raised); color: var(--fg); }
.ld-nav-item.on { background: var(--accent-soft); color: var(--fg); box-shadow: inset 2px 0 0 var(--accent); }
.ld-main { min-width: 0; overflow-y: auto; padding: 24px 28px 40px; display: grid; align-content: start; gap: 16px; }
.ld-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ld-head h2 { margin: 0; font-size: 22px; color: var(--fg); }
.ld-head p { margin: 4px 0 0; }
.ld-head .row { display: flex; gap: 8px; flex-wrap: wrap; }
.ld-card { display: grid; gap: 12px; align-content: start; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); min-width: 0; }
.ld-card h3 { margin: 0; font-size: 14px; color: var(--fg); }
.ld-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.ld-stat { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.ld-stat b { font-size: 24px; color: var(--fg); font-variant-numeric: tabular-nums; }
.ld-stat-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-strong); margin-bottom: 4px; }
.ld-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ld-bars { display: grid; gap: 8px; }
.ld-bar { display: grid; grid-template-columns: 110px minmax(0, 1fr) 32px; align-items: center; gap: 10px; font-size: 13.5px; }
.ld-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-bar i { display: block; height: 8px; min-width: 4px; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-strong)); }
.ld-bar b { text-align: right; color: var(--fg); }
.ld-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.ld-table { width: 100%; font-size: 13.5px; }
.ld-table td { vertical-align: middle; }
.ld-acts { white-space: nowrap; text-align: right; }
.ld-acts > * + * { margin-left: 6px; }
.ld-voided td { opacity: 0.5; }
.ld-voided b { text-decoration: line-through; }
.ld-kind { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--raised); color: var(--body); text-transform: capitalize; }
.ld-kind.k-join { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.ld-kind.k-leave { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }
.ld-kind.k-modcall { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.ld-kind.k-command { background: var(--accent-soft); color: var(--accent-strong); }
.ld-depts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.ld-dept-head { display: flex; align-items: center; gap: 10px; }
.ld-dept-head b { flex: 1; color: var(--fg); }
.ld-dept-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ld-on { margin-left: 6px; }
.ld-empty { padding: 18px 4px; text-align: center; }
.ld-form { min-width: 0; }
.ld-ok { color: var(--ok); }
.ld-bad { color: var(--bad); }
@media (max-width: 900px) {
  .lab .studio-bar-c { display: flex; justify-content: center; flex-wrap: wrap; }
  .lab .studio-bar-c .lab-views { width: 100%; }
  .lab .studio-bar-c .lab-views button { flex: 1; justify-content: center; }
  .lab-full { overflow: visible; }
  .lab-docs-body { height: auto; padding: 18px 16px 32px; }
  .ld { grid-template-columns: minmax(0, 1fr); height: auto; }
  .ld-nav { display: flex; gap: 4px; padding: 8px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--st-line); scrollbar-width: none; }
  .ld-nav-item { flex: none; height: 34px; }
  .ld-nav-item.on { box-shadow: inset 0 -2px 0 var(--accent); }
  .ld-main { overflow: visible; padding: 16px; }
  .ld-grid2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) { .ld-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ld-stat { padding: 12px; } .ld-stat b { font-size: 20px; } .ld-bar { grid-template-columns: 80px minmax(0, 1fr) 28px; } }

.dev-draft-state { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.dev-draft-state .ic { width: 14px; height: 14px; color: var(--ok); }
.dev-draft-state.bad .ic { color: var(--bad); }
.dev-draft-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 10px 12px 10px 14px; border: 1px solid rgba(229, 158, 21, 0.35); border-radius: var(--radius-sm); background: rgba(229, 158, 21, 0.08); color: var(--body); font-size: 14px; }
.dev-draft-bar[hidden] { display: none; }
.dev-draft-bar > .ic { color: #e59e15; flex: none; }
.dev-draft-bar > span { flex: 1; }
.dev-draft-bar b { color: var(--fg); }

.dev-guide-title { display: flex; align-items: center; gap: 18px; }
.dev-guide-logo { flex: none; width: 56px; height: 56px; padding: 10px; border-radius: 16px; background: linear-gradient(160deg, #1d1d22, #0c0c0f); border: 1px solid rgba(229, 158, 21, 0.35); box-sizing: content-box; }
.dev-guide-toc { display: grid; gap: 10px; padding: 16px 18px; margin-bottom: 18px; }
.dev-guide-toc > div { display: flex; flex-wrap: wrap; gap: 8px; }
.dev-guide-toc button { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--raised); color: var(--body); font: inherit; font-size: 13px; cursor: pointer; }
.dev-guide-toc button:hover { border-color: var(--line-strong); color: var(--fg); }
.dev-section[id^="guide-"] { scroll-margin-top: calc(var(--header-h) + 16px); }
.dev-guide-h3 { margin: 18px 0 8px; font-size: 15px; color: var(--fg); }
.dev-guide-note { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--body); font-size: 14px; line-height: 1.5; }
.dev-guide-note .ic { flex: none; margin-top: 2px; color: var(--accent); }
.dev-guide-keys { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 12px; color: var(--body); font-size: 13.5px; }
.dev-guide-keys kbd { padding: 2px 7px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; font-family: var(--mono); font-size: 12px; color: var(--fg); }
.dev-guide-table td:first-child { white-space: nowrap; }
.dev-section ol.dev-list b { color: var(--fg); }
@media (max-width: 700px) { .dev-guide-table td:first-child { white-space: normal; } .dev-guide-title { align-items: flex-start; } }

.dev-me-out { margin-left: auto; display: grid; place-items: center; width: 30px; height: 30px; flex: none; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.dev-me-out:hover { background: var(--raised); color: var(--fg); }
.dev-me-out .ic { width: 16px; height: 16px; }
.footer-copy { color: var(--body); }