@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/fonts/plex-cyrillic.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/fonts/plex-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root {
  --ground: #f5f6f7; --surface: #fff; --raised: #f0f1f2; --active: #e9eaec;
  --text: #181a1c; --muted: #53585e; --faint: #646a70;
  --accent: #1967a3; --negative: #ac2538; --positive: #23704b;
  --border: #e1e3e6; --control: #858b92; --rule: #e9ebed;
  --primary: #1c1f22; --on-primary: #fff; --scrim: rgba(0,0,0,.4);
  --radius: 8px; --gap: 16px; --pad: 24px; --sidebar: 224px;
  --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --motion: 120ms; --safe-top: env(safe-area-inset-top,0px); --safe-bottom: env(safe-area-inset-bottom,0px);
  color-scheme: light;
}
:root[data-theme=dark] {
  --ground: #111214; --surface: #191a1c; --raised: #252629; --active: #2c2d30;
  --text: #f5f5f6; --muted: #bbc0c6; --faint: #a0a6ad;
  --accent: #71b9ed; --negative: #f296a5; --positive: #8ccead;
  --border: #303236; --control: #737980; --rule: #2a2c2f;
  --primary: #f1f2f3; --on-primary: #181a1c; --scrim: rgba(0,0,0,.65);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; overscroll-behavior: none; scroll-padding: 88px 0 150px; }
body { margin: 0; background: var(--ground); color: var(--text); font: 15px/1.5 var(--font); }
button,input,select,textarea { font: inherit; }
button,a,input,select,textarea { touch-action: manipulation; }
button { cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
button,.button { min-height: 44px; padding: 10px 16px; border: 1px solid transparent; border-radius: 6px; text-align: center; line-height: 22px; transition: transform var(--motion) ease-out; }
button:active:not(:disabled),.button:active { transform: translateY(1px); }
button:disabled { cursor: wait; color: var(--muted); background: var(--raised); }
a { color: inherit; text-decoration: none; }
a.button { display: inline-flex; align-items: center; justify-content: center; }
.primary,.button.primary { color: var(--on-primary); background: var(--primary); font-weight: 500; }
.secondary { background: var(--surface); color: var(--text); border-color: var(--control); }
.plain { background: transparent; color: var(--muted); }
.danger { color: var(--negative); background: transparent; border-color: var(--control); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
input,select,textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--control); border-radius: 6px; color: var(--text); background: var(--surface); font-size: 16px; }
textarea { resize: vertical; min-height: 108px; line-height: 1.6; }
input::placeholder,textarea::placeholder { color: var(--faint); opacity: 1; }
select { padding-right: 24px; }
input[type=number] { font-variant-numeric: tabular-nums; }
h1,h2,h3,p { margin: 0; }
h1 { font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
h2 { font-size: 17px; line-height: 1.4; font-weight: 600; }
h3 { font-size: 15px; font-weight: 500; }
.small,.meta { color: var(--faint); font-size: 13px; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.gate { max-width: 480px; min-height: 100svh; margin: 0 auto; padding: calc(40px + var(--safe-top)) 24px calc(40px + var(--safe-bottom)); display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.gate p { color: var(--muted); }
.gate-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 600; }
.brand svg { width: 26px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.brand-large { font-size: 26px; }
/* 224px labeled navigation + fluid workspace; each settings row is 220px + 32px + remaining controls. */
.app-shell { display: grid; grid-template-columns: var(--sidebar) minmax(0,1fr); min-height: 100dvh; }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100dvh; padding: calc(24px + var(--safe-top)) 16px 24px; border-right: 1px solid var(--border); }
.sidebar > .brand { padding: 0 12px; }
.sidebar-caption { margin: 6px 0 32px 48px; font-size: 12px; color: var(--faint); }
nav { display: flex; flex-direction: column; gap: 4px; }
nav a { min-height: 44px; padding: 10px 12px; border-radius: 6px; display: flex; align-items: center; gap: 12px; color: var(--muted); }
nav a[aria-current=page] { background: var(--active); color: var(--text); font-weight: 500; }
.nav-icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-footer { margin-top: auto; padding: 18px 12px 0; display: flex; flex-direction: column; gap: 8px; color: var(--faint); font-size: 13px; }
.sidebar-footer a { padding: 8px 0; color: var(--muted); }
.workspace { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 5; min-height: 60px; background: var(--ground); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(8px + var(--safe-top)) 28px 8px; border-bottom: 1px solid var(--border); }
.scope-caption { display: flex; gap: 12px; align-items: baseline; }
.scope-caption > span:first-child { font-weight: 500; }
.chat-picker { width: min(380px,50%); min-width: 150px; margin-left: auto; }
.chat-picker select { border-color: transparent; background: var(--ground); font-size: 15px; }
.theme-button { padding: 10px; }
.mobile-menu { display: none; }
.mobile-menu span { color: var(--text); font-weight: 500; }
.demo-banner { margin: 12px 28px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 13px; border-bottom: 1px solid var(--border); }
.demo-banner button { font-size: 13px; }
#notice { margin: 12px 28px 0; color: var(--muted); font-size: 14px; }
#notice[data-error=true] { color: var(--negative); }
main { max-width: 1232px; padding: 28px 28px calc(48px + var(--safe-bottom)); margin: 0 auto; }
.title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.title-row p { margin-top: 8px; color: var(--muted); font-size: 14px; }
.title-row button { flex: none; }
.panel { min-width: 0; padding: var(--pad); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.panel + .panel { margin-top: 16px; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.panel-header a { font-size: 13px; padding: 8px 0; text-decoration: underline; text-underline-offset: 4px; }
.overview-grid { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 16px; align-items: stretch; }
.overview-grid > .panel + .panel { margin: 0; }
.metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-bottom: 24px; padding: 6px 0 22px; border-bottom: 1px solid var(--border); }
.metric { padding: 0 20px; border-right: 1px solid var(--border); }
.metric:first-child { padding-left: 0; }
.metric:last-child { border: 0; padding-right: 0; }
.metric .label { color: var(--muted); font-size: 14px; margin-bottom: 6px; }
.metric .value { font-size: 28px; line-height: 1.2; font-weight: 400; font-variant-numeric: tabular-nums; }
.status-line { display: flex; gap: 10px; align-items: center; margin: 8px 0 16px; font-size: 14px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--positive); display: inline-block; flex: none; }
.status-dot.off { background: var(--faint); }
.fact-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.fact-row:last-child { border: 0; }
.fact-row strong { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.chart { display: block; width: 100%; height: 165px; margin-top: 16px; }
.chart text { font-family: var(--font); font-size: 12px; fill: var(--faint); }
.chart .bar { fill: var(--accent); }
.chart .axis { stroke: var(--rule); stroke-width: 1; }
.settings-form { padding-bottom: 104px; }
.settings-row { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 32px; padding: 24px 0; border-top: 1px solid var(--border); }
.settings-row:first-of-type { padding-top: 0; border: 0; }
.settings-copy h2 { margin-bottom: 7px; }
.settings-copy p { color: var(--muted); font-size: 14px; line-height: 1.6; }
.settings-row > .panel { padding: 0; background: transparent; border: 0; border-radius: 0; }
.settings-copy .preview { margin-top: 20px; }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }
.field label { font-weight: 500; font-size: 14px; }
.field .description { font-size: 13px; color: var(--faint); }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.toggle-row { min-height: 62px; padding: 12px 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0,1fr) 48px; gap: 4px 16px; align-items: center; }
.toggle-row:last-child { border: 0; }
.toggle-row + .field,.toggle-row + .field-pair { margin-top: 18px; }
.toggle-row label { cursor: pointer; font-size: 15px; font-weight: 500; }
.toggle-row label span { display: block; font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 3px; font-weight: 400; }
.toggle-row input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 48px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; position: relative; }
.toggle-row input[type=checkbox]::before { content: ''; position: absolute; width: 38px; height: 22px; left: 5px; top: 11px; border-radius: 12px; background: var(--control); }
.toggle-row input[type=checkbox]::after { content: ''; position: absolute; width: 16px; height: 16px; left: 8px; top: 14px; border-radius: 50%; background: var(--surface); transition: transform var(--motion) ease-out; }
.toggle-row input:checked::before { background: var(--primary); }
.toggle-row input:checked::after { background: var(--on-primary); transform: translateX(16px); }
.toggle-row input:disabled { cursor: default; }
.toggle-row input:disabled::before { background: var(--active); border: 1px solid var(--control); }
.field-error { color: var(--negative); font-size: 13px; grid-column: 1 / -1; }
[aria-invalid=true] { border-color: var(--negative); }
.form-errors { margin-bottom: 24px; padding: 16px; border: 1px solid var(--negative); border-radius: 6px; color: var(--negative); background: var(--surface); }
.form-errors h2 { font-size: 16px; }
.form-errors ul { padding-left: 20px; margin: 10px 0 0; }
.form-errors a { text-decoration: underline; text-underline-offset: 3px; }
.save-row { position: fixed; z-index: 10; left: var(--sidebar); right: 0; bottom: var(--keyboard-inset,0px); background: var(--surface); border-top: 1px solid var(--border); padding: 12px 28px calc(12px + var(--safe-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.save-message { min-width: 0; }
.save-message > .small { font-size: 14px; color: var(--text); }
.save-feedback { color: var(--muted); font-size: 13px; margin-top: 3px; overflow-wrap: anywhere; }
.save-feedback:empty { margin-top: 0; }
.save-feedback[role=alert] { color: var(--negative); }
.save-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.preview { padding: 14px; border-left: 2px solid var(--border); color: var(--muted); background: transparent; font-size: 13px; overflow-wrap: anywhere; }
.preview h3 { color: var(--text); margin-bottom: 6px; }
.information { color: var(--muted); padding: 16px 0; margin-bottom: 20px; }
.empty { color: var(--muted); padding: 12px 0; }
.event-list { margin: 0; padding: 0; list-style: none; }
.event-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.event-row:last-child { border: 0; }
.overview-grid .event-row { padding-top: 16px; padding-bottom: 16px; }
.event-row p { overflow-wrap: anywhere; }
.event-row .meta { margin-top: 5px; font-size: 12px; }
.event-time { color: var(--faint); font-size: 12px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.report { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.report:last-child { border: 0; }
.report p { margin-top: 8px; overflow-wrap: anywhere; }
.report .preview { margin-top: 16px; }
.row-actions,.raid-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.row-actions button { padding: 8px 12px; }
.raid-summary { margin-top: 14px; }
body[data-route=raid] main { padding-bottom: 150px; }
.loading { padding: 24px 0; color: var(--muted); }
.error-panel { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.error-panel h2 { color: var(--negative); }
dialog { width: calc(100% - 32px); max-width: 440px; padding: 24px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
dialog::backdrop { background: var(--scrim); }
.confirmation p { margin: 14px 0 24px; color: var(--muted); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 12px; }
.menu-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.menu-dialog { max-width: 480px; max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
@media (hover:hover) and (pointer:fine) {
  nav a:hover { background: var(--raised); color: var(--text); }
  .plain:hover,.secondary:hover,.danger:hover { background: var(--raised); }
  .primary:hover { opacity: .88; }
  .panel-header a:hover,.sidebar-footer a:hover { text-decoration-thickness: 2px; }
}
@media (max-width:1100px) {
  .app-shell { grid-template-columns: minmax(0,1fr); }
  .sidebar { display: none; }
  .mobile-menu { display: inline-flex; align-items: center; gap: 8px; }
  .save-row { left: 0; }
  .scope-caption { display: none; }
}
@media (max-width:900px) {
  .overview-grid { grid-template-columns: minmax(0,1fr); }
  .settings-row { grid-template-columns: 190px minmax(0,1fr); gap: 24px; }
}
@media (max-width:640px) {
  .topbar { min-height: 56px; padding: calc(6px + var(--safe-top)) 12px 6px; gap: 4px; }
  .mobile-menu { padding: 10px; }
  .theme-button { padding: 10px 8px; font-size: 13px; }
  .chat-picker { flex: 1; width: auto; max-width: calc(100% - 136px); min-width: 0; }
  .chat-picker select { text-align: right; font-size: 14px; padding-left: 4px; }
  main { padding: 24px 18px calc(32px + var(--safe-bottom)); }
  .demo-banner { margin: 6px 18px 0; }
  #notice { margin: 10px 18px 0; }
  h1 { font-size: 24px; }
  .title-row { margin-bottom: 24px; }
  .title-row p { font-size: 13px; }
  .title-row button { padding: 10px 12px; font-size: 13px; }
  .metrics { grid-template-columns: 1fr 1fr; gap: 20px 0; }
  .metric { padding: 0 14px; }
  .metric:nth-child(2) { border: 0; }
  .metric:nth-child(3) { padding-left: 0; }
  .metric:nth-child(4) { border: 0; }
  .metric .label { font-size: 13px; }
  .settings-row { grid-template-columns: minmax(0,1fr); gap: 12px; padding: 24px 0; }
  .settings-copy p { font-size: 13px; }
  .settings-copy .preview { margin-top: 12px; }
  .panel { padding: 18px; }
  .field-pair { gap: 12px; align-items: start; }
  .field-pair .field label { min-height: 42px; }
  .save-row { padding: 10px 18px calc(10px + var(--safe-bottom)); gap: 12px; align-items: center; }
  .save-actions { gap: 4px; }
  .save-actions .plain { display: none; }
  .save-message > .small { font-size: 13px; }
  .save-feedback { font-size: 12px; }
  .save-actions > .primary { max-width: 168px; font-size: 14px; }
  .settings-form { padding-bottom: 100px; }
  .event-time { white-space: normal; max-width: 86px; }
  .native-save .save-row { padding: 8px 18px; }
  .native-save .save-actions { display: none; }
  dialog { padding: 20px; }
}
@media (max-width:360px) {
  .field-pair { grid-template-columns: minmax(0,1fr); }
  .field-pair .field label { min-height: 0; }
  .save-actions > .primary { max-width: 144px; padding: 10px 12px; }
}
@media (prefers-reduced-motion:reduce) {
  button,.button,.toggle-row input::after { transition: none; }
  button:active:not(:disabled),.button:active { transform: none; }
}