/* KeWi AI / UP. Brand materials pass with unslop by Damir Sokolovsky (@heydamir), CC BY 4.0. */
/* Archivo: Copyright 2020 The Archivo Project Authors. SIL OFL 1.1: /archivo-OFL.txt */
@font-face {font-family: Archivo; src: url('/archivo-latin.ttf') format('truetype'); font-style: normal; font-weight: 100 900; font-display: swap}
:root {
  color-scheme: light;
  --brand: #ff5a24; --brand-hover: #f16a3e; --action: #c44317; --action-hover: #b93a12; --on-accent: #ffffff; --paper: #f3f0e8;
  --header-height: 56px;
  --bg: #f3f0e8; --side: #ece9e2; --surface: #fcfbf8; --raised: #eae7e0;
  --hover: #e4e0d8; --border: #ddd8cf; --line: #c8c2b7;
  --text: #1c1d1f; --secondary: #62615e; --muted: #64615b;
  --accent: #ab330d; --accent-soft: #fae3d7; --accent-hover: #902708;
  --positive: #326448; --positive-soft: #e8eee7;
  --warning: #916416; --warning-soft: #f8f1e3; --danger: #b4433b; --danger-soft: #faebe9;
  --glass: rgba(252,251,248,.76); --glass-strong: rgba(252,251,248,.96);
  --glass-edge: rgba(255,255,255,.9); --glass-rim: rgba(255,255,255,.85);
  --chrome-shadow: 0 12px 32px #30271d10, inset 0 1px 0 var(--glass-rim);
  --panel-shadow: 0 2px 4px #30271d03;
  --scrim: #11121466; --shadow: 0 20px 64px #30271d24;
  --sans: Archivo, "Segoe UI Variable", "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  --mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #181a1e; --side: #1e2126; --surface: #24272d; --raised: #30343c;
  --hover: #393f49; --border: #454b57; --line: #6b7382;
  --text: #ffffff; --secondary: #e4e7ed; --muted: #bec5d0;
  --accent: #ff936e; --accent-soft: #38271f; --accent-hover: #ffb193;
  --positive: #9bc3a7; --positive-soft: #233027;
  --warning: #d8bb7c; --warning-soft: #352e20; --danger: #efa49b; --danger-soft: #3a2725;
  --glass: rgba(37,41,48,.96); --glass-strong: rgba(37,41,48,.98);
  --glass-edge: #454b57; --glass-rim: rgba(255,255,255,.12);
  --chrome-shadow: 0 16px 40px #0003, inset 0 1px 0 var(--glass-rim);
  --panel-shadow: 0 2px 4px #0001;
  --scrim: #090a0cb3; --shadow: 0 24px 80px #0006;
}
* {box-sizing: border-box}
body {margin: 0; background: var(--bg); color: var(--text); font: 14px/1.6 var(--sans); -webkit-font-smoothing: antialiased}
::selection {background: var(--action); color: var(--on-accent)}
button, input, select, textarea {font: inherit}
input::placeholder, textarea::placeholder {color: var(--muted); opacity: 1}
button, a, input, select, textarea, summary {-webkit-tap-highlight-color: transparent; outline-offset: 3px}
button {cursor: pointer; transition: background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease)}
button:disabled {opacity: .5; cursor: not-allowed}
button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible {outline: 2px solid var(--accent)}
input:focus, select:focus, textarea:focus {outline: 2px solid var(--accent); border-color: transparent}
a {color: inherit; text-decoration: none}
img {max-width: 100%}
svg.icon {width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round}
h1, h2, h3, h4, p {margin: 0}
h1 {font-size: 28px; line-height: 1.35; font-weight: 500}
h2 {font-size: 16px; line-height: 1.5; font-weight: 500}
h3 {font-size: 14px; line-height: 1.6; font-weight: 500}
strong {font-weight: 500}
small {font-size: 12px}
code, .mono {font-family: var(--mono); font-variant-numeric: tabular-nums}
.muted {color: var(--muted)} .secondary {color: var(--secondary)} .accent {color: var(--accent)}
.warning {color: var(--warning)} .danger {color: var(--danger)} .nowrap {white-space: nowrap}
.row {display: flex; align-items: center; gap: 12px}
.between {justify-content: space-between} .wrap {flex-wrap: wrap} .grow {flex: 1; min-width: 0}
.stack {display: flex; flex-direction: column; gap: 16px} .gap8 {gap: 8px} .right {text-align: right}
.space {margin-top: 24px} .meta {display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 12px}
.description {color: var(--secondary); margin-top: 8px; font-size: 14px; max-width: 60em}
.text-link {display: inline-flex; align-items: center; gap: 8px; color: var(--accent); background: none; border: 0; padding: 0; font-size: 13px; text-align: left}
.text-link:hover {text-decoration: underline; text-underline-offset: 4px}
.icon-button {display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid transparent; background: none; color: var(--secondary); border-radius: 8px}
.icon-button:hover {background: var(--raised); color: var(--text)}
.btn {display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font-size: 13px; line-height: 20px; white-space: nowrap}
.btn:hover {background: var(--raised); border-color: var(--muted)}
.btn.primary {background: var(--action); border-color: transparent; color: var(--on-accent); font-weight: 500; box-shadow: inset 0 1px 0 #ffffff38}
.btn.primary:hover {background: var(--action-hover); border-color: transparent}
.btn.small {min-height: 32px; padding: 4px 12px; font-size: 12px}
.btn.quiet {background: transparent; color: var(--secondary); border-color: transparent}
.btn.quiet:hover {background: var(--raised)}
.actions {display: flex; align-items: center; gap: 8px; flex-wrap: wrap}
.shell {display: grid; grid-template-columns: 272px minmax(0, 1fr); min-height: 100vh}
.sidebar {position: fixed; inset: 16px auto 16px 16px; z-index: 40; width: 240px; padding: 0 16px 20px; display: flex; flex-direction: column; border: 1px solid var(--glass-edge); border-radius: 24px; background: var(--glass); box-shadow: var(--chrome-shadow); -webkit-backdrop-filter: blur(24px) saturate(115%); backdrop-filter: blur(24px) saturate(115%); overflow-y: auto}
.brand {display: flex; align-items: center; gap: 12px; padding: 0 4px; color: var(--text)}
.sidebar > .brand {min-height: calc(var(--header-height) - 2px); flex-shrink: 0}
.brand-lockup {display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; font: 600 20px/1 Arial, sans-serif}
.brand-image {display: block; flex: none; width: 1.25em; height: 1.25em; object-fit: contain; border-radius: 50%}
.brand-name {--brand-ink: #000; color: var(--brand-ink); font: inherit; letter-spacing: -.7px}
:root[data-theme="dark"] .brand-name {--brand-ink: var(--text)}
.brand-i {display: inline-block; font: inherit; color: transparent; background: linear-gradient(to bottom, var(--brand) 0 30%, var(--brand-ink) 30% 100%); -webkit-background-clip: text; background-clip: text}
.brand-word, .brand-word .brand-i {font-weight: 700; font-synthesis: none}
.brand-bot {color: var(--brand-ink); font-weight: 400; letter-spacing: 0}
.brand-mobile {display: none}
.brand-lockup.compact {gap: 6px; font-size: 16px}
.brand-lockup.compact .brand-name {letter-spacing: -.5px}
.workspace-caption {color: var(--muted); padding: 0 12px; font-size: 12px; margin: 32px 0 12px}
.nav-link {position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 36px; padding: 8px 12px; margin: 4px 0; border: 0; border-radius: 8px; background: none; color: var(--secondary); font-size: 14px; line-height: 20px; text-align: left}
.nav-link:hover {color: var(--text); background: var(--hover)}
:root[data-theme="dark"] .nav-link, :root[data-theme="dark"] .nav-management > summary {color: var(--text)}
.nav-link.active {background: var(--surface); color: var(--text); box-shadow: 0 1px 4px #1112140a, inset 0 0 0 1px var(--border)}
.nav-link.active:after {content: ""; position: absolute; right: 12px; width: 4px; height: 4px; border-radius: 1px; background: var(--brand)}
.nav-link.active .count {margin-right: 12px}
.nav-link.active .icon {color: var(--accent)}
.nav-link .count {margin-left: auto; color: var(--muted); font: 12px var(--mono)}
.nav-management {margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border)}
.nav-management > summary {list-style: none; display: flex; align-items: center; gap: 12px; min-height: 36px; padding: 8px 12px; color: var(--secondary); cursor: pointer; font-size: 13px; border-radius: 8px}
.nav-management > summary::-webkit-details-marker {display: none}
.nav-management > summary:after {content: "›"; margin-left: auto; color: var(--muted)}
.nav-management[open] > summary:after {transform: rotate(90deg)}
.nav-management > nav {margin-top: 8px}
.sidebar-bottom {margin-top: auto; padding: 32px 12px 0}
.runtime {display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px}
.dot {display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex-shrink: 0}
.dot.good {background: var(--positive)} .dot.bad {background: var(--danger)} .dot.warn {background: var(--warning)}
.owner {display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--border); margin-top: 20px; padding-top: 16px}
.owner .avatar {display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px; color: var(--secondary); font-size: 12px}
.owner .name {font-size: 13px} .owner .role {font-size: 12px; color: var(--muted)}
.main {grid-column: 2; min-width: 0}
.topbar {position: sticky; top: 16px; z-index: 30; height: var(--header-height); margin: 16px 24px 0; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--glass-edge); border-radius: 28px; background: var(--glass); box-shadow: var(--chrome-shadow); -webkit-backdrop-filter: blur(24px) saturate(115%); backdrop-filter: blur(24px) saturate(115%)}
.breadcrumb {font-size: 13px; color: var(--secondary)}
.top-controls {display: flex; align-items: center; gap: 12px}
.global-search {display: flex; align-items: center; gap: 8px; height: 36px; min-width: 184px; padding: 0 12px; border: 1px solid var(--border); border-radius: 18px; background: transparent; color: var(--secondary); font-size: 12px}
.global-search kbd {margin-left: auto; font: 12px var(--sans); color: var(--muted)}
.appearance {display: flex; align-items: center; gap: 8px; color: var(--secondary)}
.appearance select {max-width: 104px; background: transparent; border: 0; color: inherit; font-size: 12px; padding: 8px 4px; border-radius: 4px}
.content {max-width: 1560px; margin: auto; padding: 32px 24px}
.page-heading {display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px}
.page-heading .description {margin-top: 8px; font-size: 13px}
.heading-date {font-size: 12px; color: var(--muted)}
.controls {display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px}
.control-group {display: flex; align-items: center; gap: 12px; flex-wrap: wrap}
.select {background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; height: 40px; min-width: 128px; font-size: 13px; max-width: 100%}
.period {display: flex; align-items: center; gap: 4px; padding: 4px; background: var(--raised); border-radius: 8px}
.period button {min-height: 28px; padding: 4px 12px; font-size: 12px; line-height: 20px; color: var(--secondary); background: none; border: 0; border-radius: 4px}
.period button.active {background: var(--surface); color: var(--text); box-shadow: 0 1px 2px #0001}
.panel {min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--panel-shadow)}
.panel-head {display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px}
.panel-body {padding: 0 24px 24px}
.panel-foot {padding: 12px 24px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted)}
.section-heading {display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px}
.stats {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 24px; padding: 20px 0; border: 1px solid var(--border); border-radius: 20px; background: var(--surface)}
.stat {padding: 4px 24px; border-right: 1px solid var(--border)}
.stat:first-child {padding-left: 24px} .stat:last-child {border-right: 0}
.stat-label {color: var(--secondary); font-size: 13px}
.stat-value {font-size: 28px; line-height: 1.3; font-weight: 500; font-variant-numeric: tabular-nums; margin: 8px 0 4px}
.stat-value .unit {font: 12px var(--sans); margin-left: 8px; color: var(--muted)}
.stat-note {font-size: 12px; color: var(--muted)}
.start-here {display: flex; align-items: center; gap: 16px; padding: 16px 20px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); margin-bottom: 24px}
.start-here .description {font-size: 13px; margin-top: 4px}
.step-mark {font: 12px var(--mono); color: var(--on-accent); background: var(--action); padding: 8px; border-radius: 8px}
.home-grid {display: grid; grid-template-columns: minmax(0, 1fr) 304px; gap: 24px}
.home-grid .panel {align-self: stretch}
.home-bottom {display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; margin-top: 24px}
.production-summary {display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 24px 16px; color: var(--secondary); font-size: 12px; border-bottom: 1px solid var(--border)}
.production-summary strong {color: var(--text); margin-left: 8px; font-variant-numeric: tabular-nums}
.account-summary {display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; border-top: 1px solid var(--border); padding: 12px 0; text-align: left; color: var(--text)}
.account-summary:first-child {border-top: 0; padding-top: 0}
.account-summary:last-child {padding-bottom: 0}
.account-summary small {display: block; margin-top: 4px; color: var(--muted)}
.account-number {font: 12px var(--mono); color: var(--muted); width: 28px}
.brief-row {display: flex; align-items: start; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border)}
.brief-row:first-child {padding-top: 0} .brief-row:last-child {border-bottom: 0; padding-bottom: 0}
.brief-row h3 {font-weight: 400} .brief-row h3 a:hover {color: var(--accent)}
.brief-row .meta {margin-top: 4px}
.brief-row > .icon-button {margin-top: 0}
.empty-issue {padding: 24px; display: flex; align-items: center; gap: 20px}
.issue-paper {position: relative; flex-shrink: 0; display: grid; align-content: center; gap: 8px; width: 80px; height: 96px; padding: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--accent); font: 12px var(--mono)}
.issue-paper:before {content: ""; position: absolute; top: 12px; right: 12px; width: 6px; height: 6px; background: var(--brand); border-radius: 1px}
.issue-paper i {display: block; height: 1px; background: var(--line); width: 100%}
.issue-paper i:last-child {width: 60%}
.empty-issue p {font-size: 13px; color: var(--muted); margin: 4px 0 12px}
.dashboard-grid {display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 24px}
.chart-box {position: relative; height: 280px}
.chart-box svg {display: block; width: 100%; height: 100%}
.chart-box .chart-empty {position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 8px; text-align: center; pointer-events: none}
.chart-empty p, .chart-meta {font-size: 12px; color: var(--muted)}
.chart-meta {margin-bottom: 16px}
.chart-summary {display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px}
.chart-summary strong {font-size: 28px; font-variant-numeric: tabular-nums} .chart-summary span {color: var(--muted); font-size: 12px}
.legend {display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--secondary)}
.legend .line {width: 16px; height: 2px; background: var(--accent)}
.badge {display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; background: var(--raised); color: var(--secondary); font-size: 12px; line-height: 20px; white-space: nowrap}
.badge.good {color: var(--positive); background: var(--positive-soft)} .badge.warn {color: var(--warning); background: var(--warning-soft)} .badge.bad {color: var(--danger); background: var(--danger-soft)}
.event {display: flex; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border)}
.event:last-child {border-bottom: 0} .event time {font: 12px var(--mono); min-width: 88px; color: var(--muted)}
.event-text {font-size: 13px; color: var(--secondary); overflow-wrap: anywhere}
.site-footer {display: flex; justify-content: space-between; gap: 16px; margin-top: 32px; color: var(--muted); font-size: 12px}
.table-wrap {overflow-x: auto; border-radius: inherit}
table {width: 100%; border-collapse: collapse; text-align: left; font-size: 13px}
th {font-weight: 400; color: var(--secondary); background: var(--bg); border-bottom: 1px solid var(--border); padding: 12px 20px; font-size: 12px; white-space: nowrap}
td {padding: 16px 20px; border-bottom: 1px solid var(--border); vertical-align: middle}
tr:last-child td {border-bottom: 0}
tbody tr.clickable {cursor: pointer} tbody tr.clickable:hover {background: var(--raised)}
tbody tr.selected {background: var(--accent-soft)} tbody tr.selected td:first-child {box-shadow: inset 2px 0 var(--accent)}
.table-title {max-width: 400px; color: var(--text); font-weight: 400}
.table-sub {max-width: 400px; margin-top: 4px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere}
.table-empty {padding: 40px 24px; color: var(--muted); text-align: center}
.table-empty > .icon {margin-bottom: 12px}
.table-empty h3 {font-size: 15px; color: var(--text); font-weight: 400; margin-bottom: 8px}
.table-empty p {max-width: 400px; margin: 0 auto 16px; font-size: 13px}
.tabbar {display: flex; align-items: center; gap: 24px; border-bottom: 1px solid var(--border); margin-bottom: 24px; overflow-x: auto}
.tabbar button {display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 0 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--secondary); font-size: 13px; white-space: nowrap}
.tabbar button.active {color: var(--text); border-bottom-color: var(--accent)}
.tabbar button span {font: 12px var(--mono); color: var(--muted)}
.search-wrap {position: relative; max-width: 100%}
.search-wrap > .icon {position: absolute; left: 12px; top: 12px; width: 16px; height: 16px; color: var(--muted)}
.search-input {min-width: 240px; width: 100%; height: 40px; max-width: 100%; padding: 8px 12px 8px 36px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 13px}
.workbench {display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 24px}
.inspector {position: sticky; top: 88px}
.inspector .panel-head {border-bottom: 1px solid var(--border)}
.inspector .panel-body {padding: 20px 24px}
.inspector h3 {font-size: 16px; margin: 8px 0 12px; font-weight: 500}
.inspector dl {margin: 16px 0}
.property {display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: 13px}
.property dt {color: var(--muted)} .property dd {margin: 0; color: var(--secondary); text-align: right}
.divider {height: 1px; background: var(--border); margin: 20px 0}
.evidence {padding: 12px; border: 1px solid var(--border); border-radius: 8px; margin-top: 12px; background: var(--bg); font-size: 12px; overflow-wrap: anywhere}
.evidence a {color: var(--accent); display: inline-flex; margin-top: 8px}
.task-log {padding: 12px 24px; border-top: 1px solid var(--border); color: var(--muted); font: 12px/1.8 var(--mono); overflow-wrap: anywhere}
.signal-list {border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden}
.signal-card {display: flex; align-items: start; gap: 16px; padding: 24px; border-bottom: 1px solid var(--border)}
.signal-card:last-child {border-bottom: 0} .signal-index {color: var(--muted); font: 12px var(--mono); padding-top: 4px}
.signal-card h3 {font-size: 15px; font-weight: 400} .signal-card h3 a:hover {color: var(--accent)}
.signal-card p {color: var(--secondary); font-size: 13px; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden}
.signal-card .meta {margin-top: 12px}
.source-row {padding: 16px 0; border-bottom: 1px solid var(--border)}
.source-row details {margin-top: 12px}
.source-row details > summary {cursor: pointer}
.source-row:last-child {border-bottom: 0} .source-row h3 {font-size: 13px}
.source-row .meta {margin-top: 8px} .source-row p {color: var(--secondary); font-size: 12px; overflow-wrap: anywhere; margin-top: 8px}
.source-row .source-url {font: 12px var(--mono); overflow-wrap: anywhere; margin: 12px 0; color: var(--muted)}
.hotspot-source-grid, .platform-account-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 16px}
.hotspot-source-card {border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: 20px; min-width: 0}
.hotspot-source-card h3 {font-size: 16px; margin-top: 12px; font-weight: 500}
.hotspot-source-card > p {font-size: 13px; color: var(--secondary); line-height: 1.8; margin-top: 8px; min-height: 46px}
.hotspot-source-actions {display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 16px 0 12px}
.hotspot-source-actions > .text-link {margin-right: auto}
.hotspot-note {margin: 20px 0; line-height: 1.8}
.hotspot-inbox {margin-top: 32px}
.hotspot-inbox > .panel-head {padding: 0 0 20px; border: 0; gap: 16px; flex-wrap: wrap}
.hotspot-inbox h2 .meta {display: inline; margin-left: 8px}
.signal-card .meta {display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap}
.signal-card .grow {min-width: 0; overflow-wrap: anywhere}
.platform-overview {margin-bottom: 24px}
.platform-overview .panel-head {gap: 16px; flex-wrap: wrap}
.platform-overview .panel-head p {margin-top: 8px}
.platform-shortcuts {display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 20px 24px}
.platform-shortcut {display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px; border-radius: 8px; border: 1px solid var(--border); font-size: 13px}
.platform-shortcut:hover {background: var(--accent-soft); border-color: var(--accent)}
.platform-shortcut > .icon {margin-left: auto; width: 14px; height: 14px; color: var(--muted); flex-shrink: 0}
.platform-logo {display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; overflow: hidden}
.platform-logo.large {width: 40px; height: 40px; border-radius: 10px}
.platform-logo img {display: block; width: 100%; height: 100%; object-fit: contain}
.platform-brand-line {display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 24px}
.platform-account-card {padding: 24px; min-width: 0; overflow-wrap: anywhere}
.platform-account-card h2 {font-size: 16px; font-weight: 500}
.platform-account-card .row .meta {margin-top: 4px}
.platform-link-state {font-size: 12px; color: var(--secondary); margin: 20px 0 12px}
.platform-account-actions {display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; min-height: 32px}
.platform-data-row {display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 16px; margin: 20px 0 12px}
.comment-list {display: flex; flex-direction: column; gap: 16px}
.comment-card {padding: 24px; overflow-wrap: anywhere; min-width: 0}
.comment-content {white-space: pre-wrap; font-size: 14px; line-height: 1.9; margin: 20px 0}
@media (max-width:1180px) {.platform-shortcuts {grid-template-columns: repeat(3, minmax(0, 1fr))}}
@media (max-width:760px) {.platform-shortcuts {grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px} .platform-shortcut {padding: 10px; gap: 8px} .platform-account-card, .comment-card {padding: 20px} .hotspot-inbox .actions {flex-wrap: wrap} .platform-overview .panel-foot {gap: 12px}}
@media (max-width:360px) {.platform-shortcut {font-size: 12px; gap: 6px} .platform-shortcut > .icon {display: none}}
.resource-list {border: 1px solid var(--border); background: var(--surface); border-radius: 12px; overflow: hidden}
.resource-row {display: grid; grid-template-columns: minmax(0, 1fr) 124px 96px; align-items: center; gap: 24px; padding: 20px 24px; border-bottom: 1px solid var(--border)}
.resource-row:last-child {border-bottom: 0} .resource-row h3 {font-size: 15px; font-weight: 400}
.resource-row h3 a:hover {color: var(--accent)} .resource-row .summary {font-size: 13px; color: var(--secondary); margin-top: 4px}
.resource-row .meta {margin-top: 8px} .resource-row .row-actions {display: flex; justify-content: flex-end}
.resource-compact {display: block; padding: 16px 0; border-bottom: 1px solid var(--border)}
.resource-compact:first-child {padding-top: 0} .resource-compact:last-child {border: 0; padding-bottom: 0}
.resource-compact h3 {font-size: 14px; font-weight: 400} .resource-compact p {font-size: 13px; color: var(--muted); margin-top: 4px}
.account-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px}
.account-card {padding: 24px}
.account-letter {display: grid; place-items: center; height: 36px; width: 36px; border: 1px solid var(--border); border-radius: 8px; background: var(--raised); color: var(--secondary); font: 13px var(--mono)}
.account-card h2 {font-size: 16px} .account-card .position {color: var(--secondary); font-size: 13px; min-height: 48px; margin-top: 20px}
.keywords {display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px}
.keyword {color: var(--secondary); background: var(--raised); border-radius: 4px; font-size: 12px; padding: 4px 8px}
.platforms {margin-top: 24px; border-top: 1px solid var(--border); padding-top: 8px}
.platform-link {display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 0; font-size: 13px; border-bottom: 1px solid var(--border)}
.platform-link:last-child {border: 0} .platform-link:hover {color: var(--accent)}
.notice {display: flex; align-items: start; gap: 12px; padding: 16px 20px; border: 1px solid var(--border); border-radius: 8px; color: var(--secondary); font-size: 13px; margin-bottom: 24px; background: var(--surface)}
.notice .icon {color: var(--muted); margin-top: 2px}
.notice.warning {color: var(--warning); background: var(--warning-soft); border-color: transparent}
.fold {background: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin-top: 24px; min-width: 0}
.fold > summary {list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 20px 24px; font-size: 14px; font-weight: 500}
.fold > summary::-webkit-details-marker {display: none}
.fold > summary:after {content: "+"; font-size: 18px; margin-left: auto; font-weight: 400; color: var(--muted)}
.fold[open] > summary:after {content: "−"}
.fold > summary small {font-weight: 400; color: var(--muted); margin-left: 4px}
.fold > .panel-body {padding-top: 0}
.inline-fold {grid-column: 1/-1; border: 0; background: none; border-radius: 0; margin-top: 0; border-top: 1px solid var(--border)}
.inline-fold > summary {padding: 16px 0; font-size: 13px; color: var(--secondary)}
.inline-fold > .form-grid {padding-bottom: 8px}
.role-list {overflow: hidden}
.role-row {display: flex; align-items: center; gap: 20px; padding: 20px 24px; border-bottom: 1px solid var(--border)}
.role-row:last-child {border: 0} .role-number {font: 12px var(--mono); color: var(--muted); width: 28px}
.role-row h3 {font-weight: 500} .role-row p {color: var(--secondary); font-size: 13px; margin-top: 4px}
.role-row .role-actions {display: flex; align-items: center; gap: 16px}
.two-col {display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start}
.settings-section {padding: 24px; margin-bottom: 24px}
.settings-section h2 {margin-bottom: 20px}
.settings-section .section-title {display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px}
.settings-section .section-title h2 {margin: 0}
.settings-row {display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--border); padding: 16px 0}
.settings-row p {font-size: 12px; color: var(--muted); margin-top: 4px}
.settings-row:first-of-type {padding-top: 0}
.settings-row .row {flex-shrink: 0}
.settings-row input[type=number] {width: 88px}
.toggle {display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--secondary); font-size: 12px; white-space: nowrap}
.toggle input {appearance: none; width: 36px; height: 20px; margin: 0; background: var(--line); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; position: relative; transition: background 160ms var(--ease)}
.toggle input:before {position: absolute; content: ""; width: 12px; height: 12px; border-radius: 50%; top: 3px; left: 3px; background: var(--surface); transition: transform 160ms var(--ease)}
.toggle input:checked {background: var(--brand); border-color: var(--brand)}
.toggle input:checked:before {transform: translateX(16px); background: var(--on-accent)}
.definition {display: grid; grid-template-columns: 140px minmax(0, 1fr); margin: 0; font-size: 13px}
.definition dt, .definition dd {margin: 0; padding: 12px 0; border-bottom: 1px solid var(--border)}
.definition dt {color: var(--muted)} .definition dd {color: var(--secondary); overflow-wrap: anywhere}
.definition dd code {font-size: 12px}
.connection-status {display: flex; align-items: center; gap: 16px; padding: 20px 24px; margin-bottom: 24px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface)}
.connection-status h2 {margin-bottom: 4px}
.connection-status p {color: var(--secondary); font-size: 13px}
.connection-icon {display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 8px; color: var(--accent)}
.connection-guide {display: flex; flex-direction: column; gap: 24px}
.guide-step {display: flex; gap: 16px}
.guide-step > span {color: var(--accent); font: 12px var(--mono); padding-top: 4px}
.guide-step p {font-size: 13px; color: var(--secondary); margin: 8px 0 12px}
.form-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 20px}
.field {display: flex; flex-direction: column; gap: 8px; min-width: 0}
.field.full {grid-column: 1/-1} .field label {font-size: 13px; color: var(--secondary)}
.field input, .field select, .field textarea, .settings-row input[type=number] {width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); padding: 8px 12px; font-size: 14px; min-width: 0}
.field input, .field select {height: 40px}
.field textarea {min-height: 100px; resize: vertical; line-height: 1.8}
.field .hint {color: var(--muted); font-size: 12px}
.form-actions {display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px}
.check-group {display: flex; align-items: center; gap: 16px; flex-wrap: wrap}
.check-group label {display: flex; align-items: center; gap: 8px; font-size: 13px}
.check-group input {width: 16px; height: 16px; accent-color: var(--accent)}
.code-block {white-space: pre-wrap; overflow-wrap: anywhere; padding: 16px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; color: var(--secondary); font: 12px/1.8 var(--mono); margin: 16px 0}
.theme-options {display: flex; flex-wrap: wrap; gap: 8px}
.theme-option {display: flex; align-items: center; gap: 8px; padding: 8px 16px; min-height: 40px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--secondary); font-size: 13px}
.theme-option[aria-pressed=true] {color: var(--accent); border-color: var(--accent); background: var(--accent-soft)}
.doc-preview {font-size: 14px; line-height: 1.9; overflow-wrap: anywhere}
.doc-preview h1 {font-size: 24px; margin-bottom: 20px}
.doc-preview h2 {font-size: 18px; margin: 24px 0 12px}
.doc-preview h3 {font-size: 16px; margin: 16px 0 8px}
.doc-preview p {margin: 12px 0; color: var(--secondary)}
.doc-preview a {color: var(--accent)} .doc-preview pre {white-space: pre-wrap}
.video-player {width: 100%; max-height: 60vh; background: var(--side); border-radius: 8px; border: 1px solid var(--border)}
dialog {width: min(640px, calc(100vw - 32px)); max-height: 88vh; padding: 0; border: 1px solid var(--glass-edge); border-radius: 24px; background: var(--glass-strong); color: var(--text); box-shadow: var(--shadow), inset 0 1px 0 var(--glass-rim); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px)}
dialog.wide {width: min(960px, calc(100vw - 32px))}
dialog::backdrop {background: var(--scrim)}
.modal-head {display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--border)}
.modal-head h2 {font-size: 18px; font-weight: 500}
.modal-body {padding: 24px; max-height: calc(88vh - 80px); overflow-y: auto}
.modal-error {font-size: 13px; color: var(--danger); margin-top: 16px}
.modal-error:empty {display: none}
.search-results {display: flex; flex-direction: column; gap: 4px}
.search-result {display: block; width: 100%; padding: 12px; border: 0; border-radius: 8px; background: none; color: var(--text); text-align: left; font-size: 14px}
.search-result:hover {background: var(--raised)} .search-result small {display: block; color: var(--muted); margin-top: 4px}
#toast {position: fixed; left: calc(50% + 120px); bottom: 24px; z-index: 100; max-width: calc(100vw - 32px); padding: 12px 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--text); color: var(--surface); font-size: 13px; opacity: 0; transform: translate(-50%, 8px); pointer-events: none; transition: opacity 180ms var(--ease), transform 180ms var(--ease)}
#toast.visible {opacity: 1; transform: translate(-50%, 0)}
#toast.error {background: var(--danger-soft); color: var(--danger)}
.login {min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr}
.login-story {display: flex; flex-direction: column; padding: 48px; border-right: 1px solid var(--border); background: var(--side)}
.login-story .brand {padding: 0} .login-story .story {max-width: 440px; margin: auto 0; padding: 64px 0}
.login-story h1 {font-size: 40px; line-height: 1.4; font-weight: 400} .login-story h1 span {color: var(--accent)}
.login-story .description {font-size: 15px; line-height: 1.9; margin-top: 20px; max-width: 400px}
.login-flow {display: flex; align-items: center; gap: 16px; margin-top: 32px; font-size: 13px; color: var(--secondary); flex-wrap: wrap}
.login-flow span {color: var(--muted)} .login-bottom {font-size: 12px; color: var(--muted)}
.login-form {display: flex; align-items: center; justify-content: center; padding: 48px}
.login-form form {width: 360px; max-width: 100%}
.login-form h2 {font-size: 24px; font-weight: 500; margin-bottom: 8px}
.login-form .sub {font-size: 13px; color: var(--muted); margin-bottom: 32px}
.login-form .field {margin-bottom: 20px} .login-form .btn {width: 100%; min-height: 44px; margin-top: 16px}
.login-hint {font-size: 12px; color: var(--muted); line-height: 1.9; margin-top: 24px}
.login-appearance {position: absolute; right: 32px; top: 24px}
.starting {min-height: 100vh; min-height: 100dvh; display: flex; justify-content: center; align-items: center; gap: 12px; padding: 24px; color: var(--muted)}
.starting img {width: 32px; height: 32px; flex: none; object-fit: contain; border-radius: 50%}
.mobile-menu, .nav-dismiss, .menu-scrim {display: none}
.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap}
@media (min-width: 1600px) {.content {padding: 40px} .home-grid {grid-template-columns: minmax(0, 1fr) 336px}}
@media (max-width: 1180px) {
  .home-grid, .dashboard-grid {grid-template-columns: minmax(0, 1fr) 256px}
  .workbench {grid-template-columns: 1fr} .inspector {position: static}
  .account-grid {grid-template-columns: 1fr}
  .account-card .platforms {display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px}
  .resource-row {grid-template-columns: minmax(0, 1fr) 112px}
  .resource-row .row-actions {grid-column: 2; grid-row: 1}
  .resource-row > .resource-verification {display: none}
  .two-col {grid-template-columns: 1fr}
}
@media (max-width: 980px) {
  .home-grid, .home-bottom, .dashboard-grid {grid-template-columns: 1fr}
  .global-search {min-width: 0} .global-search kbd {display: none}
  .topbar, .content {padding-left: 24px; padding-right: 24px}
  .stat, .stat:first-child {padding: 4px 16px} .stat-note {font-size: 12px}
  .home-grid .account-summary {padding: 12px 0}
  .home-grid .account-summary:first-child {padding-top: 0}
  .login-story {padding: 32px} .login-story h1 {font-size: 32px}
}
@media (max-width: 760px) {
  .shell {display: block} .main {width: 100%}
  .sidebar {visibility: hidden; inset: 12px auto 12px 12px; transform: translateX(calc(-100% - 12px)); width: min(264px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overscroll-behavior: contain; transition: transform 180ms var(--ease); padding-top: 24px}
  .shell.menu-open .sidebar {visibility: visible; transform: translateX(0)}
  .shell.menu-open .menu-scrim {display: block; position: fixed; inset: 0; background: var(--scrim); border: 0; z-index: 35}
  .nav-dismiss {display: flex; position: absolute; top: 20px; right: 8px; width: 44px; height: 44px}
  .mobile-menu {display: inline-flex}
  .topbar {top: 12px; height: 56px; margin: 12px 12px 0; padding: 0 8px; gap: 8px} .topbar > .row {gap: 8px}
  .brand-mobile {display: inline-flex} .breadcrumb {display: none}
  .mobile-menu, .top-controls > .icon-button {width: 44px; height: 44px}
  .top-controls {gap: 4px} .global-search {width: 44px; height: 44px; padding: 0; justify-content: center; background: none; border: 0}
  .global-search span {display: none} .appearance {gap: 0} .appearance > .icon {display: none}
  .appearance select {font-size: 12px; max-width: 92px; min-height: 44px; padding: 8px 0}
  .content {padding: 24px 16px} h1 {font-size: 24px}
  .main, .content, .panel, .controls > *, .topbar > .row {min-width: 0}
  .btn.small, .nav-link, .nav-management > summary, .sidebar-bottom .icon-button {min-height: 44px}
  .field input, .field select, .field textarea, .search-input {font-size: 16px}
  .table-wrap, .tabbar {overscroll-behavior-x: contain}
  .tabbar > button {flex-shrink: 0}
  .description, .notice, .source-url, .scene-row h3, .scene-row p {overflow-wrap: anywhere}
  dialog {max-height: calc(100dvh - 32px)}
  .modal-body {max-height: calc(100dvh - 120px)}
  .navigation-open {overflow: hidden}
  .page-heading {align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 24px}
  .page-heading .description {font-size: 13px; max-width: 320px}
  .page-heading .actions {width: 100%} .page-heading .actions .primary {margin-left: auto}
  .start-here {padding: 16px; flex-wrap: wrap; gap: 12px}
  .start-here > .btn {margin-left: 40px}
  .stats {grid-template-columns: 1fr 1fr; gap: 20px 0; margin-bottom: 24px; padding: 16px 0}
  .stat, .stat:first-child {padding: 0 16px} .stat:nth-child(even) {border: 0}
  .stat-value {font-size: 28px} .stat-label, .stat-note {font-size: 12px}
  .panel-head {padding: 20px} .panel-body {padding: 0 20px 20px} .panel-foot {padding: 12px 20px}
  .controls {align-items: flex-start; flex-wrap: wrap; gap: 16px}
  .controls .search-wrap {width: 100%} .search-input {min-width: 0}
  .tabbar {gap: 24px; margin-bottom: 20px} .tabbar button {min-height: 44px}
  .production-summary {padding: 0 20px 16px; gap: 8px; flex-wrap: wrap}
  .empty-issue {padding: 24px 20px; gap: 16px} .issue-paper {width: 64px; height: 80px; padding: 8px}
  .home-grid, .home-bottom, .dashboard-grid {gap: 20px} .home-bottom {margin-top: 20px}
  .brief-row {gap: 12px} .brief-row h3 {font-size: 14px}
  .signal-card {padding: 20px; gap: 12px; flex-wrap: wrap}
  .signal-card > .btn {margin-left: 28px} .signal-card h3 {font-size: 14px}
  .resource-row {padding: 20px; gap: 12px; grid-template-columns: minmax(0, 1fr)}
  .resource-row .row-actions {grid-row: auto; grid-column: auto; justify-content: flex-start; margin-top: 4px}
  .resource-row .summary {font-size: 13px}
  .account-card, .settings-section {padding: 20px}
  .account-card .platforms {grid-template-columns: 1fr}
  .notice {padding: 16px; font-size: 13px}
  .inspector .panel-head {padding: 20px} .inspector .panel-body {padding: 20px}
  .role-row {padding: 20px; gap: 12px; flex-wrap: wrap}
  .role-row .role-actions {margin-left: 40px; width: calc(100% - 40px); gap: 12px; justify-content: space-between}
  .role-row .role-actions .badge {margin-right: auto}
  .form-grid {grid-template-columns: 1fr} .field.full {grid-column: auto}
  .settings-row {gap: 16px} .settings-row p {max-width: 220px}
  .settings-row.appearance-row {flex-direction: column; align-items: flex-start}
  .settings-row input[type=number] {width: 72px}
  .theme-options {gap: 8px} .theme-option {padding: 8px 12px}
  .definition {grid-template-columns: 104px minmax(0, 1fr)}
  .fold > summary {padding: 20px} .inline-fold > summary {padding: 16px 0}
  .fold > summary small {display: none}
  .connection-status {padding: 20px; gap: 12px; flex-wrap: wrap}
  .connection-status > .badge {margin-left: 52px}
  .two-col {gap: 20px} .connection-guide {gap: 20px}
  .chart-box {height: 240px} .chart-empty p {max-width: 240px}
  .modal-head, .modal-body {padding: 20px}
  .modal-head h2 {font-size: 16px} .modal-body {max-height: calc(88vh - 80px)}
  .site-footer {font-size: 12px; flex-wrap: wrap; margin-top: 24px}
  #toast {left: 50%}
  .event {gap: 12px} .event time {min-width: 80px}
  .login {display: block} .login-story {padding: 32px 24px; border: 0}
  .login-story .story {padding: 40px 0 0} .login-story h1 {font-size: 28px}
  .login-story .description {font-size: 14px; margin-top: 16px}
  .login-flow, .login-bottom {display: none}
  .login-form {padding: 32px 24px} .login-form form {width: 100%}
  .login-appearance {right: 16px; top: 24px}
}
@media (max-width: 400px) {
  .top-controls > [data-action="refresh"] {display: none}
}
@media (max-width: 360px) {
  .topbar {padding-left: 4px; padding-right: 4px; gap: 4px}
  .top-controls {gap: 0}
  .appearance select {max-width: 56px}
  .brand-lockup.compact {gap: 4px; font-size: 15px}
  .topbar > .row {gap: 4px}
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sidebar, .topbar, dialog {background: var(--surface); box-shadow: var(--panel-shadow); border-color: var(--border)}
}
@media (prefers-reduced-transparency: reduce) {
  .sidebar, .topbar, dialog {background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--panel-shadow); border-color: var(--border)}
}
@media (prefers-contrast: more) {
  .sidebar, .topbar, dialog {background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--line)}
  .panel, .stats, .btn {border-color: var(--line)}
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after {animation: none !important; transition: none !important; scroll-behavior: auto !important}
}