:root { color-scheme: dark; --bg:#0c1220; --panel:#141d2f; --line:#263650; --text:#e8eef8; --muted:#8fa0bb; --accent:#5eead4; --warn:#fbbf24; --danger:#fb7185; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
#emergency-stop, #emergency-recover { display:none !important; }
/*
 * Safety-mode overlay contract:
 * the overlay is informational only and must never cover or intercept
 * dashboard controls. These selectors also protect against an older
 * revision leaving a legacy overlay in the DOM during a soft reload.
 */
.safety-overlay,
#safety-overlay,
[data-safety-overlay="true"] {
  pointer-events:none !important;
  z-index:0 !important;
}
html[data-dashboard-phase="phase1"] .safety-overlay,
html[data-dashboard-phase="phase1"] #safety-overlay,
html[data-dashboard-phase="phase1"] [data-safety-overlay="true"] {
  display:none !important;
}
.sticky-status,
.topbar,
.top-actions,
#connection-card {
  position:relative;
  z-index:1;
}
.connection-status-card #emergency-action { align-self:stretch; font-size:22px; grid-column:4; grid-row:1 / span 2; padding:0 6px; white-space:nowrap; }
body { margin:0; background:radial-gradient(circle at top right,#1a2942 0,#0c1220 42%); color:var(--text); font:14px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
.sticky-status { position:sticky; top:0; z-index:10; }
.topbar { align-items:center; background:rgba(12,18,32,.96); border-bottom:1px solid var(--line); display:flex; justify-content:space-between; padding:18px clamp(20px,5vw,72px); backdrop-filter:blur(14px); }
h1,h2,p { margin:0; } h1 { font-size:clamp(20px,3vw,32px); letter-spacing:-.03em; } h2 { font-size:18px; }
.subtitle { color:var(--muted); margin-top:6px; }
.eyebrow { color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.14em; margin-bottom:6px; }
.runtime-badge,.chip { border:1px solid var(--line); border-radius:999px; color:var(--muted); padding:6px 10px; white-space:nowrap; } .runtime-badge { color:var(--accent); } .runtime-badge.readonly { border-color:rgba(251,191,36,.45); color:var(--warn); }
.connection-checking { color:var(--accent); background:linear-gradient(90deg,transparent 0%,rgba(94,234,212,.3) 45%,transparent 70%); background-size:220% 100%; animation:connection-scan 1.4s linear infinite; }
.connection-ready { color:var(--accent); }
.connection-retry { color:var(--warn); background:linear-gradient(90deg,transparent 0%,rgba(251,191,36,.3) 45%,transparent 70%); background-size:220% 100%; animation:connection-scan 1.8s linear infinite; }
.connection-error { color:var(--danger); }
.connection-stopped { color:var(--danger); }
.connection-status-card { align-items:center; background:rgba(20,29,47,.94); border:1px solid var(--line); border-radius:10px; display:grid; gap:0 8px; grid-template-columns:auto auto minmax(40px,1fr) 180px; grid-template-rows:1fr 1fr; min-height:96px; min-width:0; padding:10px; width:min(100%,520px); }
.connection-status-card > span { color:#d1fae5; font-size:14px; font-weight:700; grid-column:1; grid-row:1; white-space:nowrap; }
.connection-status-card > strong { font-size:20px; grid-column:2; grid-row:1; white-space:nowrap; }
.connection-status-card > small { color:#d1fae5; font-size:14px; font-weight:600; grid-column:1 / 4; grid-row:2; white-space:nowrap; }
.connection-status-card .emergency-button,.connection-status-card .recover-button { align-self:stretch; font-size:22px; grid-column:4; grid-row:1 / span 2; padding:0 6px; white-space:nowrap; }
.connection-checking-card { background:rgba(13,70,75,.55); border-color:rgba(94,234,212,.55); }
.connection-ready-card { background:rgba(20,83,45,.55); border-color:rgba(74,222,128,.65); }
.connection-retry-card { background:rgba(120,83,12,.55); border-color:rgba(251,191,36,.7); }
.connection-error-card,.connection-stopped-card { background:rgba(127,29,29,.42); border-color:rgba(251,113,133,.8); box-shadow:0 0 0 1px rgba(251,113,133,.15),0 18px 48px rgba(127,29,29,.2); }
@keyframes connection-scan { from { background-position:200% 0; } to { background-position:-20% 0; } }
@media (prefers-reduced-motion: reduce) { .connection-checking,.connection-retry { animation:none; } }
.topbar > div:first-child { flex:1 1 360px; min-width:300px; }
.top-actions { align-items:center; display:flex; flex:0 1 680px; gap:10px; min-width:0; }
.management-link { border:1px solid rgba(94,234,212,.4); border-radius:8px; color:var(--accent); font-weight:750; padding:8px 11px; text-decoration:none; }
.management-auth[hidden], #management-content[hidden] { display:none !important; }
.management-link:hover { background:rgba(94,234,212,.1); }
.shell { margin:0 auto; max-width:1300px; padding:28px clamp(20px,5vw,72px) 56px; }
.auth-gate { margin:10vh auto; max-width:560px; padding:28px; text-align:center; } .auth-gate p:not(.eyebrow) { color:var(--muted); margin:8px 0 20px; } .auth-button { background:var(--accent); border:0; border-radius:8px; color:#0c1220; cursor:pointer; font:inherit; font-weight:800; padding:12px 18px; } .auth-button:hover { filter:brightness(1.08); } .account-label { color:var(--accent); font-size:.8rem; padding:8px 12px; text-align:right; }
.account-actions { display:flex; justify-content:flex-end; align-items:center; gap:8px; } .sign-out-button { background:transparent; border:1px solid rgba(160,180,210,.45); border-radius:8px; color:var(--muted); cursor:pointer; font:inherit; font-size:.8rem; padding:7px 10px; } .sign-out-button:hover { color:var(--text); border-color:var(--accent); }
.recover-button { background:#f6c453; border:0; border-radius:8px; color:#17120a; cursor:pointer; font:inherit; font-weight:800; padding:8px 12px; } .recover-button:hover { filter:brightness(1.08); }
main.auth-locked > :not(#auth-gate):not(#auth-loading) { display:none; }
.intro { align-items:center; display:flex; justify-content:space-between; margin-bottom:14px; padding:20px; } .intro p:not(.eyebrow) { color:var(--muted); margin-top:6px; } .safe { border-color:rgba(94,234,212,.35); color:var(--accent); }
.summary-grid { display:grid; gap:14px; grid-template-columns:repeat(4,1fr); margin-bottom:14px; }
.projection-card { margin-bottom:14px; padding:20px; }
.projection-grid { display:grid; gap:12px; grid-template-columns:repeat(5,1fr); margin:0; }
.projection-grid div { background:rgba(12,18,32,.35); border:1px solid var(--line); border-radius:10px; padding:12px; }
.projection-grid dt { color:var(--muted); font-size:11px; }
.projection-grid dd { margin:5px 0 0; overflow-wrap:anywhere; }
.guide-grid { display:grid; gap:14px; grid-template-columns:repeat(3,1fr); margin-bottom:14px; }
.guide { align-items:flex-start; display:flex; gap:12px; padding:16px; } .guide-number { align-items:center; background:rgba(94,234,212,.12); border:1px solid rgba(94,234,212,.28); border-radius:50%; color:var(--accent); display:flex; flex:0 0 27px; font-weight:800; height:27px; justify-content:center; } .guide h3 { font-size:14px; margin:0 0 4px; } .guide p { color:var(--muted); font-size:13px; margin:0; }
.sr-only { height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; clip:rect(0,0,0,0); white-space:nowrap; }
.content-grid { display:grid; gap:14px; grid-template-columns:1.25fr .75fr; margin-bottom:14px; }
.content-grid > * { min-width:0; }
.card { background:rgba(20,29,47,.9); border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 48px rgba(0,0,0,.18); }
.metric { padding:18px; } .metric span,.metric small { color:var(--muted); display:block; } .metric strong { display:block; font-size:30px; margin:6px 0 2px; }
.panel { min-height:360px; padding:20px; } .panel-heading { align-items:flex-start; display:flex; justify-content:space-between; margin-bottom:20px; }
.table-wrap { max-width:100%; overflow:auto; } table { border-collapse:collapse; min-width:500px; width:100%; } th,td { border-bottom:1px solid var(--line); padding:12px 8px; text-align:left; } th { color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.status { border-radius:5px; font-size:12px; padding:3px 7px; } .status.completed { background:rgba(94,234,212,.12); color:var(--accent); } .status.failed { background:rgba(251,113,133,.12); color:var(--danger); } .status.in_progress { background:rgba(251,191,36,.12); color:var(--warn); }
.timeline { list-style:none; margin:0; padding:0; } .timeline li { border-left:2px solid var(--line); padding:0 0 20px 18px; position:relative; } .timeline li::before { background:var(--accent); border-radius:50%; content:""; height:8px; left:-5px; position:absolute; top:4px; width:8px; } .timeline strong,.timeline small { display:block; } .timeline small { color:var(--muted); margin-top:3px; }
.notice { align-items:center; display:flex; justify-content:space-between; padding:20px; } .notice p:not(.eyebrow) { color:var(--muted); margin-top:6px; max-width:760px; } .warning { border-color:rgba(251,191,36,.4); color:var(--warn); }
.emergency-button { background:rgba(251,113,133,.14); border:1px solid rgba(251,113,133,.65); border-radius:8px; color:#fecdd3; cursor:pointer; font:inherit; font-weight:800; padding:10px 14px; } .emergency-button:hover { background:rgba(251,113,133,.26); } .emergency-button:disabled { cursor:not-allowed; opacity:.65; }
.compact-topbar { min-height:84px; }
.management-shell { max-width:1050px; }
.management-grid { display:grid; gap:14px; grid-template-columns:1fr 1fr; margin-bottom:14px; }
.management-panel { padding:20px; }
.management-form { display:grid; gap:12px; margin-top:18px; }
.management-form label { color:var(--muted); display:grid; font-size:12px; gap:5px; }
.management-form input,.management-form select { background:#0c1220; border:1px solid var(--line); border-radius:8px; color:var(--text); font:inherit; padding:10px; width:100%; }
.management-form button,.task-actions button,.secondary-button { background:var(--accent); border:0; border-radius:7px; color:#0c1220; cursor:pointer; font:inherit; font-weight:800; padding:9px 12px; }
.task-actions { display:flex; gap:6px; }.task-actions button:disabled { cursor:not-allowed; opacity:.35; }
.secondary-button { background:transparent; border:1px solid var(--line); color:var(--muted); }
.management-message { color:var(--accent); min-height:24px; }.management-message.error { color:var(--danger); }
.plugin-catalog { display:grid; gap:8px; list-style:none; margin:14px 0 0; padding:0; }
.plugin-catalog li { align-items:center; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; padding:8px 0; }
.plugin-catalog span,.plugin-option small,.form-note { color:var(--muted); font-size:12px; }
.plugin-options { display:grid; gap:7px; }
.plugin-option { align-items:center; color:var(--text); display:flex; gap:8px; }
.plugin-option span { display:flex; flex-direction:column; gap:2px; }
.management-form fieldset { border:1px solid var(--line); border-radius:8px; display:grid; gap:8px; padding:10px; }
.management-form legend { color:var(--muted); font-size:12px; padding:0 4px; }
.plugin-catalog small,.activation-table small { display:block; }
@media (max-width:800px) { .summary-grid,.guide-grid,.content-grid { grid-template-columns:1fr 1fr; } .content-grid { grid-template-columns:1fr; } .notice { align-items:flex-start; flex-direction:column; gap:16px; } }
@media (max-width:1000px) { .connection-status-card { grid-template-columns:auto auto minmax(70px,1fr) 180px; } .connection-status-card > span { font-size:13px; } .connection-status-card > strong { font-size:19px; } .connection-status-card > small { font-size:13px; } .connection-status-card .emergency-button,.connection-status-card .recover-button { font-size:22px; } }
@media (max-width:800px) { .management-grid { grid-template-columns:1fr; } .connection-status-card { grid-template-columns:auto auto 1fr; grid-template-rows:auto auto auto; min-height:0; } .connection-status-card > small { grid-column:1 / -1; grid-row:2; } .connection-status-card .emergency-button,.connection-status-card .recover-button { grid-column:1 / -1; grid-row:3; justify-self:stretch; margin-top:8px; min-height:76px; } }
@media (max-width:520px) { .summary-grid { grid-template-columns:1fr 1fr; } .topbar { align-items:flex-start; flex-direction:column; gap:14px; } .top-actions { align-items:stretch; flex-direction:column; width:100%; } .connection-status-card { grid-template-columns:auto 1fr; min-height:0; width:100%; } .connection-status-card > span { font-size:14px; } .connection-status-card > strong { font-size:20px; } .connection-status-card > small { font-size:14px; } .connection-status-card .emergency-button,.connection-status-card .recover-button { font-size:24px; } }