@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #f4f1e9; --surface: #fffdf8; --surface-2: #f8f6f0; --surface-3: #eeebe2;
  --ink: #1d2d2a; --ink-soft: #52615c; --muted: #7b8580; --line: #dddcd3; --line-strong: #c6c9bf;
  --accent: #d4853c; --accent-soft: #fae7d0; --signal: #b95e46; --signal-soft: #f6ddd6;
  --ok: #2d8063; --ok-soft: #dff0e6; --warn: #a96d20; --sidebar: 258px; --radius: 12px;
  color-scheme: light; font-family: 'Manrope', 'Avenir Next', 'Segoe UI', sans-serif; color: var(--ink);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); }
body { overflow-x: hidden; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .28; background-image: radial-gradient(rgba(29,45,42,.15) .55px, transparent .55px); background-size: 7px 7px; mask-image: linear-gradient(to bottom, #000 0%, transparent 68%); z-index: -1; }
button, input, select, textarea { font: inherit; } button { cursor: pointer; } button:disabled { opacity: .45; cursor: not-allowed; }
::selection { background: var(--accent); color: #fffdf8; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; z-index: 30; color: #edf2eb; background: var(--ink); box-shadow: 12px 0 28px rgba(29,45,42,.08); }
.brand { min-height: 94px; display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.11); }
.cockpit-mark { width: 40px; height: 40px; flex: 0 0 40px; }
.brand-copy { min-width: 0; line-height: 1.1; }
.brand-copy strong { display: block; font-family: 'Manrope', 'Avenir Next', 'Segoe UI', sans-serif; font-size: 17px; font-weight: 700; letter-spacing: -.035em; }
.brand-copy span { display: block; margin-top: 6px; color: #aebbb3; font-size: 9px; letter-spacing: .11em; text-transform: uppercase; }
.brand-copy em { color: #e5a15b; font-style: normal; }
.nav { flex: 1; overflow: auto; padding: 14px 11px; }
.nav-section { padding: 15px 11px 7px; color: #91a19a; font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .15em; text-transform: uppercase; }
.nav button { width: 100%; display: flex; align-items: center; gap: 11px; padding: 10px 11px; border: 0; border-left: 2px solid transparent; border-radius: 7px; background: transparent; color: #bec9c2; text-align: left; transition: background .18s ease, color .18s ease, transform .18s ease; }
.nav button:hover { background: rgba(255,255,255,.08); color: #fff; transform: translateX(2px); } .nav button.active { border-left-color: #e5a15b; background: rgba(255,255,255,.12); color: #fff; }
.nav .ico { width: 18px; color: #92a39b; font-family: 'Manrope', 'Avenir Next', 'Segoe UI', sans-serif; font-size: 16px; text-align: center; } .nav button.active .ico { color: #e5a15b; }
.sidebar-foot { display: grid; gap: 8px; padding: 16px 20px 20px; border-top: 1px solid rgba(255,255,255,.11); color: #aebbb3; font-size: 10px; line-height: 1.45; }
.parent-wordmark-text { color: #fff; font-family: 'Manrope', 'Avenir Next', 'Segoe UI', sans-serif; font-size: 14px; letter-spacing: .02em; } .policy-mini { color: #85958c; }

.main { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 20; min-height: 78px; display: flex; align-items: center; gap: 12px; padding: 12px 30px; border-bottom: 1px solid rgba(198,201,191,.7); background: rgba(244,241,233,.88); backdrop-filter: blur(18px); }
.menu-btn { display: none; } .topbar-title { min-width: 0; }
.topbar-title h1 { margin: 0; color: var(--ink); font-family: 'Manrope', 'Avenir Next', 'Segoe UI', sans-serif; font-size: 21px; letter-spacing: -.035em; }
.topbar-title p { margin: 5px 0 0; color: var(--muted); font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .02em; }
.topbar-spacer { flex: 1; }
.mode-switch { display: flex; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); box-shadow: 0 2px 7px rgba(29,45,42,.04); }
.mode-switch button { padding: 8px 10px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--muted); font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
.mode-switch button:last-child { border-right: 0; } .mode-switch button:hover { color: var(--ink); background: var(--surface-2); } .mode-switch button.active { background: var(--ink); color: #fff; font-weight: 600; }

.icon-btn, .secondary, .primary, .danger-btn, .mini { border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); color: var(--ink); transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease; }
.icon-btn, .secondary, .primary, .danger-btn { padding: 9px 12px; } .primary { border-color: var(--ink); background: var(--ink); color: #fff; font-weight: 700; box-shadow: 0 4px 10px rgba(29,45,42,.12); }
.primary:hover { border-color: #2e4842; background: #2e4842; transform: translateY(-1px); box-shadow: 0 7px 15px rgba(29,45,42,.16); }
.secondary:hover, .icon-btn:hover, .mini:hover { border-color: var(--ink-soft); background: var(--surface-2); transform: translateY(-1px); } .danger-btn { border-color: #d8a59a; color: var(--signal); }
.mini { padding: 6px 8px; font-family: 'DM Mono', monospace; font-size: 9px; } .install-btn[hidden] { display: none; }

.content { width: min(100%, 1580px); margin: auto; padding: 30px; }
.page-head, .content > .panel, .content > .grid, .content > .board, .content > .toolbar { animation: reveal .45s ease both; }
@keyframes reveal { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.page-head { display: flex; align-items: flex-end; gap: 20px; margin-bottom: 24px; }
.page-head h2 { margin: 0; color: var(--ink); font-family: 'Manrope', 'Avenir Next', 'Segoe UI', sans-serif; font-size: clamp(28px, 3vw, 42px); font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.page-head p { max-width: 760px; margin: 9px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.55; } .page-head .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.eyebrow { margin-bottom: 10px; color: var(--accent); font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .15em; text-transform: uppercase; }

.grid { display: grid; gap: 14px; } .kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 14px; }
.kpi { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,253,248,.78); box-shadow: 0 4px 16px rgba(29,45,42,.035); }
.kpi.actionable { cursor: pointer; } .kpi.actionable:hover { border-color: var(--accent); background: var(--surface); transform: translateY(-2px); box-shadow: 0 9px 22px rgba(29,45,42,.08); }
.kpi .label { color: var(--muted); font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; } .kpi .value { margin-top: 10px; color: var(--ink); font-family: 'Manrope', 'Avenir Next', 'Segoe UI', sans-serif; font-size: 32px; font-weight: 700; line-height: 1; } .kpi .hint { margin-top: 7px; color: var(--muted); font-size: 10px; }
.cols-2 { grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); } .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.panel { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,253,248,.88); box-shadow: 0 5px 18px rgba(29,45,42,.035); }
.panel-head { display: flex; align-items: center; gap: 10px; padding: 15px 17px; border-bottom: 1px solid var(--line); background: rgba(248,246,240,.65); } .panel-head h3 { margin: 0; color: var(--ink); font-size: 12px; font-weight: 800; letter-spacing: -.01em; } .panel-head .sub { margin-left: auto; color: var(--muted); font-family: 'DM Mono', monospace; font-size: 9px; } .panel-body { padding: 15px 17px; } .stack { display: grid; gap: 10px; } .divider { height: 1px; margin: 11px 0; background: var(--line); }

.item { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 11px 0; border-bottom: 1px solid var(--line); } .item:last-child { border-bottom: 0; }
.sev { width: 4px; min-height: 39px; border-radius: 4px; background: var(--line-strong); } .sev.urgent, .sev.critical { background: var(--signal); } .sev.high { background: var(--accent); } .sev.medium { background: #d5b35b; } .sev.low { background: var(--ok); }
.item-title { color: var(--ink); font-size: 12px; font-weight: 800; } .item-meta { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.5; } .item-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.status { font-weight: 800; } .status.urgent, .status.overdue, .status.error { color: var(--signal); } .status.waiting, .status.review, .status.needs_config, .status.needs-config { color: var(--warn); } .status.done, .status.connected, .status.configured, .status.confirmed, .status.resolved { color: var(--ok); }

.table-wrap { overflow: auto; } .table { width: 100%; min-width: 760px; border-collapse: collapse; }
.table th { position: sticky; top: 0; padding: 10px; border-bottom: 1px solid var(--line-strong); background: var(--surface-2); color: var(--muted); font-family: 'DM Mono', monospace; font-size: 9px; font-weight: 500; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.table td { padding: 12px 10px; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: 11px; vertical-align: top; } .table td strong { color: var(--ink); } .table tr:hover td { background: #fcfaf5; }
.quick { display: grid; grid-template-columns: 120px 1fr auto; gap: 9px; } .input, .select, .textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 7px; outline: none; background: var(--surface); color: var(--ink); padding: 10px 11px; } .input::placeholder, .textarea::placeholder { color: #9aa29d; } .input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .textarea { min-height: 96px; resize: vertical; }
.field label { display: block; margin: 0 0 6px; color: var(--muted); font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .07em; text-transform: uppercase; } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .form-grid .full { grid-column: 1 / -1; } .form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 13px; } .toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .toolbar .input { max-width: 340px; } .toolbar .select { width: auto; } .spacer { flex: 1; } .empty { padding: 30px; border: 1px dashed var(--line-strong); border-radius: 8px; color: var(--muted); font-size: 11px; text-align: center; }

.timeline { display: grid; } .timeline-row { display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); } .timeline-row:last-child { border-bottom: 0; } .time { color: var(--accent); font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 500; } .timeline-row strong { color: var(--ink); font-size: 12px; } .timeline-row p { margin: 4px 0 0; color: var(--muted); font-size: 10px; } .flag { color: var(--warn); font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.board { display: grid; grid-template-columns: repeat(7, minmax(200px, 1fr)); gap: 10px; overflow: auto; } .lane { min-height: 220px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,253,248,.72); } .lane h4 { margin: 0; padding: 11px; border-bottom: 1px solid var(--line); color: var(--muted); font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; } .card { margin: 8px; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 3px 8px rgba(29,45,42,.04); } .card strong { color: var(--ink); font-size: 11px; } .card p { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.connection { display: grid; grid-template-columns: 220px minmax(0, 1fr) 150px; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); } .connection:last-child { border-bottom: 0; } .connection strong { display: block; color: var(--ink); font-size: 12px; } .connection small { color: var(--muted); font-size: 10px; } .capabilities { display: flex; flex-wrap: wrap; gap: 8px; } .capabilities span { padding-left: 7px; border-left: 2px solid var(--line-strong); color: var(--ink-soft); font-size: 9px; } .connection-note { grid-column: 1 / -1; margin-top: -5px; color: var(--muted); font-size: 10px; } .audit-json { color: var(--muted); font-family: 'DM Mono', monospace; font-size: 9px; white-space: pre-wrap; }

.live-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 14px; padding: 13px 16px; border: 1px solid #e2c7a2; border-left: 4px solid var(--accent); border-radius: 10px; background: #fff7e9; } .live-banner > div:first-child { display: grid; gap: 3px; } .live-banner strong { color: var(--ink); font-size: 11px; } .live-banner span { color: var(--ink-soft); font-size: 9px; } .live-banner.warning { border-color: #e3b7ad; border-left-color: var(--signal); background: #fff1ed; } .live-source-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .live-source-row span { padding: 5px 8px; border: 1px solid #e2c7a2; border-radius: 5px; background: #fffdf8; color: var(--ink-soft); font-family: 'DM Mono', monospace; font-size: 9px; } .live-panel { border-color: #e3cfad; } .live-panel > .panel-head { border-bottom-color: #ead9bd; } .status.authorized_snapshot, .status.connected_snapshot { color: var(--ok); }
.content:has(.live-banner.loading) > *:not(.live-banner) { pointer-events: none; opacity: .58; }

.modal-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(29,45,42,.56); backdrop-filter: blur(4px); } .modal { width: min(720px, 100%); max-height: 88vh; overflow: auto; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); box-shadow: 0 22px 70px rgba(29,45,42,.25); } .modal-head { display: flex; align-items: center; padding: 15px 17px; border-bottom: 1px solid var(--line); } .modal-head h3 { margin: 0; color: var(--ink); font-family: 'Manrope', 'Avenir Next', 'Segoe UI', sans-serif; font-size: 17px; } .modal-head button { margin-left: auto; } .modal-body { padding: 17px; } .modal-backdrop[hidden] { display: none; }
.command { width: min(760px, 100%); overflow: hidden; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); box-shadow: 0 22px 70px rgba(29,45,42,.25); } .command-brand { display: flex; align-items: center; gap: 10px; padding: 14px 17px; border-bottom: 1px solid var(--line); } .command-brand svg { width: 28px; height: 28px; } .command-brand div strong { color: var(--ink); font-family: 'Manrope', 'Avenir Next', 'Segoe UI', sans-serif; font-size: 14px; } .command-brand div span { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; } .command input { width: 100%; padding: 17px; border: 0; border-bottom: 1px solid var(--line); outline: none; background: var(--surface-2); color: var(--ink); font-size: 14px; } .command-results { max-height: 420px; overflow: auto; padding: 8px; } .command-result { padding: 12px; border-bottom: 1px solid var(--line); } .command-result:last-child { border-bottom: 0; } .command-result strong { color: var(--ink); font-size: 11px; } .command-result p { margin: 5px 0 0; color: var(--ink-soft); font-size: 11px; line-height: 1.5; } .kbd { padding: 2px 5px; border: 1px solid var(--line-strong); border-radius: 3px; color: var(--muted); font-size: 9px; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 80; padding: 11px 14px; border: 1px solid var(--line-strong); border-left: 3px solid var(--ok); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 11px; box-shadow: 0 12px 28px rgba(29,45,42,.16); } .toast.ok { border-left-color: var(--ok); } .toast.warn { border-left-color: var(--warn); } .toast.error { border-left-color: var(--signal); } .mobile-overlay { display: none; } .brand-note { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); } .brand-note img { max-width: 170px; max-height: 42px; } .brand-note p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }

@media (max-width: 1180px) { .kpis { grid-template-columns: repeat(3, 1fr); } .cols-2 { grid-template-columns: 1fr; } .cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 780px) { :root { --sidebar: 244px; } .shell { display: block; } .sidebar { position: fixed; left: calc(var(--sidebar) * -1); transition: left .18s ease; } .sidebar.open { left: 0; } .mobile-overlay { display: block; position: fixed; inset: 0; z-index: 29; background: rgba(29,45,42,.35); } .mobile-overlay[hidden] { display: none; } .menu-btn { display: inline-flex; } .topbar { min-height: 68px; padding: 9px 12px; } .topbar-title { display: none; } .topbar-spacer { display: none; } .mode-switch { margin-left: auto; } .mode-switch button { padding: 7px 8px; } .content { padding: 20px 14px; } .page-head { display: block; } .page-head h2 { font-size: 31px; } .page-head .actions { margin-top: 13px; } .kpis { grid-template-columns: repeat(2, 1fr); } .cols-3 { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .connection { grid-template-columns: 1fr; gap: 7px; } .connection .actions { justify-self: start; } .board { grid-template-columns: repeat(7, 230px); } .quick { grid-template-columns: 1fr; } .quick .primary { width: 100%; } .live-banner { display: grid; } .live-source-row { justify-content: flex-start; } }
@media (max-width: 430px) { .topbar { gap: 6px; } .mode-switch { flex: 1; } .mode-switch button { flex: 1; padding: 7px 4px; font-size: 8px; } #commandBtn { padding: 8px 9px; font-size: 9px; } .kpi { padding: 13px; } .kpi .value { font-size: 26px; } .content { padding: 16px 10px; } .panel-body { padding: 12px; } .panel-head { padding: 13px 12px; } .topbar { min-height: 62px; } .brand { min-height: 74px; } .brand-copy strong { font-size: 15px; } }