@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/inter-var.woff2) format("woff2"); }
  :root {
    --canvas: #F8FAFC; --surface: #FFFFFF; --surface-2: #F1F5F9; --line: #E2E8F0; --line-2: #E5E7EB;
    --t1: #0F172A; --t2: #475569; --t3: #64748B; --t4: #94A3B8;
    --ok: #059669; --ok-bg: #ECFDF5; --ok-line: #A7F3D0;
    --warn: #D97706; --warn-bg: #FFFBEB; --warn-line: #FDE68A;
    --crit: #DC2626; --crit-bg: #FEF2F2; --crit-line: #FECACA;
    --info: #2563EB; --info-bg: #EFF6FF; --info-line: #BFDBFE;
    --muted: #64748B; --muted-bg: #F1F5F9; --muted-line: #E2E8F0;
    --primary: #4338CA; --primary-hover: #3730A3; --primary-soft: #EEF2FF; --primary-line: #C7D2FE;
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05);
  }
  html { color-scheme: light; }
  body { background: var(--canvas); color: var(--t1); font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
  .term { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
  .num { font-variant-numeric: tabular-nums; }
  .panel { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
  .tone-ok { border-color: var(--ok-line); } .tone-warn { border-color: var(--warn-line); } .tone-crit { border-color: var(--crit-line); } .tone-dead { border-color: var(--line); background: #FCFCFD; }
  .pill { display:inline-flex; align-items:center; gap:.35rem; padding:.12rem .55rem; border-radius:9999px; font-size:.7rem; font-weight:600; letter-spacing:.02em; border:1px solid transparent; white-space:nowrap; }
  .pill-online { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-line); }
  .pill-warning { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
  .pill-critical { color: var(--crit); background: var(--crit-bg); border-color: var(--crit-line); }
  .pill-unreachable { color: var(--muted); background: var(--muted-bg); border-color: var(--muted-line); }
  .pill-info { color: var(--info); background: var(--info-bg); border-color: var(--info-line); }
  .dot { width:.5rem; height:.5rem; border-radius:9999px; display:inline-block; flex:none; }
  .dot-online { background: var(--ok); } .dot-warning { background: var(--warn); } .dot-critical { background: var(--crit); animation: pulse 1.6s ease-in-out infinite; } .dot-unreachable { background: var(--t4); }
  @keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.4 } }
  .badge { display:inline-flex; align-items:center; padding:.1rem .5rem; border-radius:.375rem; font-size:.68rem; font-weight:600; border:1px solid transparent; white-space:nowrap; }
  .badge-cpanel { color:#C2410C; background:#FFF7ED; border-color:#FED7AA; }
  .badge-aapanel { color:#1D4ED8; background:#EFF6FF; border-color:#BFDBFE; }
  .badge-cyberpanel { color:#6D28D9; background:#F5F3FF; border-color:#DDD6FE; }
  .badge-vanilla { color:#475569; background:#F1F5F9; border-color:#E2E8F0; }
  .bar { height:.45rem; border-radius:9999px; background: var(--surface-2); overflow:hidden; border:1px solid var(--line); }
  .bar > i { display:block; height:100%; border-radius:9999px; transition: width .4s ease; }
  .btn { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .8rem; border-radius:.5rem; font-size:.8rem; font-weight:600; border:1px solid var(--line); background: var(--surface); color: var(--t1); transition: background .15s, border-color .15s, color .15s; white-space:nowrap; box-shadow: var(--shadow); }
  .btn:hover { background: var(--surface-2); border-color: #CBD5E1; }
  .btn:disabled { opacity:.45; cursor:not-allowed; }
  .btn-primary { background: var(--primary); border-color: var(--primary); color:#FFFFFF; }
  .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
  .btn-danger { color: var(--crit); border-color: var(--crit-line); background: var(--surface); }
  .btn-danger:hover { background: var(--crit-bg); }
  .btn-warn { color: var(--warn); border-color: var(--warn-line); background: var(--warn-bg); }
  .btn-warn:hover { background: #FEF3C7; }
  .btn-xs { padding:.25rem .55rem; font-size:.72rem; }
  .input { width:100%; background: var(--surface); border:1px solid #CBD5E1; color: var(--t1); border-radius:.5rem; padding:.5rem .7rem; font-size:.85rem; }
  .input::placeholder { color: var(--t4); }
  .input:focus { outline:none; border-color: var(--primary); box-shadow: 0 0 0 3px rgb(67 56 202 / 0.15); }
  .nav-tab { white-space:nowrap; padding:.45rem .9rem; border-radius:.5rem; font-size:.8rem; font-weight:600; color: var(--t2); }
  .nav-tab.active { background: var(--primary); color:#FFFFFF; }
  .nav-tab:hover:not(.active) { color: var(--t1); background: var(--surface-2); }
  .log-line { white-space:pre-wrap; word-break:break-word; padding:.15rem 0; border-bottom:1px solid var(--line-2); color: var(--t2); }
  .lvl-info { color: var(--t2); } .lvl-warning { color: var(--warn); } .lvl-error, .lvl-critical { color: var(--crit); }
  table.grid { width:100%; border-collapse:separate; border-spacing:0; font-size:.8rem; }
  table.grid th { text-align:left; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color: var(--t3); font-weight:600; padding:.6rem .75rem; border-bottom:1px solid var(--line); background: #FAFBFC; }
  table.grid td { padding:.6rem .75rem; border-bottom:1px solid var(--line-2); vertical-align:middle; color: var(--t1); }
  table.grid tr:last-child td { border-bottom:none; }
  table.grid tr:hover td { background: #FAFBFC; }
  .scroll::-webkit-scrollbar { width:8px; height:8px; } .scroll::-webkit-scrollbar-thumb { background:#CBD5E1; border-radius:8px; }
  pre.raw { background: var(--surface-2); border:1px solid var(--line); border-radius:.5rem; padding:.6rem .8rem; font-size:.72rem; max-height:16rem; overflow:auto; color:#1E293B; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
  .modal-bg { background: rgb(15 23 42 / 0.35); backdrop-filter: blur(2px); }
  .drawer { width: min(840px, 100vw); background: var(--surface); border-left:1px solid var(--line); box-shadow: -8px 0 24px -12px rgb(15 23 42 / 0.15); }
  .toast { animation: slidein .2s ease; box-shadow: 0 4px 12px -4px rgb(15 23 42 / 0.15); }
  @keyframes slidein { from { transform: translateY(8px); opacity:0 } to { transform:none; opacity:1 } }
  .spin { animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg) } }
  .sev-critical { border-left: 3px solid var(--crit); } .sev-warning { border-left: 3px solid var(--warn); } .sev-info { border-left: 3px solid var(--info); }
  .pill-ai { color:#6D28D9; background:#F5F3FF; border-color:#DDD6FE; }
  .btn-ai { color:#6D28D9; background:#F5F3FF; border-color:#DDD6FE; }
  .btn-ai:hover { background:#EDE9FE; }
  .btn-ai-solid { background:#6D28D9; border-color:#6D28D9; color:#fff; }
  .btn-ai-solid:hover { background:#5B21B6; border-color:#5B21B6; }
  .pill-low { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-line); }
  .pill-medium { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
  .pill-high, .pill-critical { color: var(--crit); background: var(--crit-bg); border-color: var(--crit-line); }
  .pill-allowed { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-line); }
  .pill-caution { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
  .pill-blocked { color: var(--crit); background: var(--crit-bg); border-color: var(--crit-line); }
  .pill-analyzed { color: var(--info); background: var(--info-bg); border-color: var(--info-line); }
  .pill-approved { color:#6D28D9; background:#F5F3FF; border-color:#DDD6FE; }
  .pill-rejected, .pill-failed { color: var(--crit); background: var(--crit-bg); border-color: var(--crit-line); }
  .pill-executed { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-line); }
  .code { background:#F1F5F9; border:1px solid var(--line); border-radius:.5rem; padding:.6rem .8rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.74rem; color:#1E293B; overflow:auto; white-space:pre-wrap; word-break:break-word; }
  .code .k { color:#4338CA; font-weight:600; } .code .f { color:#0F766E; } .code .s { color:#B45309; } .code .o { color:#DC2626; font-weight:600; } .code .c { color:#64748B; font-style:italic; }
  .code-row { display:flex; gap:.6rem; align-items:flex-start; padding:.35rem 0; border-bottom:1px dashed var(--line); } .code-row:last-child { border-bottom:none; }
  .code-row .n { color: var(--t4); width:1.2rem; text-align:right; flex:none; font-size:.7rem; padding-top:.1rem; }
  .ai-drawer { width: min(760px, 100vw); background: var(--surface); border-left:1px solid var(--line); box-shadow: -8px 0 24px -12px rgb(15 23 42 / 0.15); }
  .risk-safe { color: var(--ok) } .risk-caution { color: var(--warn) } .risk-destructive { color: var(--crit) }
  canvas.spark { width:100%; height:64px; display:block; }
  .tile-label { font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color: var(--t3); font-weight:600; }
  .tile-value { font-size:1.85rem; font-weight:700; color: var(--t1); line-height:1.15; }
  .chip { display:inline-flex; align-items:center; gap:.3rem; padding:.1rem .5rem; border-radius:.375rem; font-size:.7rem; font-weight:500; background: var(--surface-2); color: var(--t2); border:1px solid var(--line); }
  .seg { display:flex; height:.4rem; border-radius:9999px; overflow:hidden; background: var(--surface-2); border:1px solid var(--line); }
  .seg > i { display:block; height:100%; }
  .brand { display:inline-flex; align-items:center; gap:.5rem; font-weight:700; color: var(--t1); letter-spacing:-.01em; }
  .brand > span.mark { width:1.6rem; height:1.6rem; border-radius:.45rem; background: var(--primary); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; }

  /* ---- sidebar layout ---- */
  .nav-group { font-size:.65rem; letter-spacing:.08em; font-weight:700; color: var(--t4); text-transform:uppercase; padding:.9rem .75rem .3rem; }
  .nav-item { display:flex; align-items:center; gap:.6rem; width:100%; padding:.42rem .6rem; border-radius:.5rem; font-size:.82rem; font-weight:500; color: var(--t2); text-align:left; white-space:nowrap; }
  .nav-item:hover:not(.active) { background: var(--surface-2); color: var(--t1); }
  .nav-item.active { background:#EEF2FF; color:#4338CA; font-weight:600; }
  .nav-ico { width:1.1rem; text-align:center; flex-shrink:0; font-size:.9rem; }
  .nav-badge { margin-left:auto; font-size:.65rem; font-weight:600; padding:.02rem .4rem; border-radius:9999px; border:1px solid var(--line); background: var(--surface-2); color: var(--t2); }
  .nav-badge.b-red { background: var(--crit-bg); color: var(--crit); border-color: var(--crit-line); }
  .nav-badge.b-amber { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
  .nav-badge.b-green { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
  #sidebar { transition: width .15s ease; }
  #sidebar.collapsed { width:4rem; }
  #sidebar.collapsed .nav-label, #sidebar.collapsed .nav-badge, #sidebar.collapsed .nav-group span, #sidebar.collapsed .brand-name, #sidebar.collapsed .who-box { display:none; }
  #sidebar.collapsed .nav-item { justify-content:center; }
  #sidebar.collapsed .nav-group { padding:.5rem 0 0; text-align:center; }
  #sidebar.collapsed .nav-group::before { content:"–"; }
  #logBody { height: calc(8 * 1.25rem + .5rem); }
  .log-line { line-height: 1.25rem; }
  .inc-banner { border:1px solid var(--warn-line); background: var(--warn-bg); border-radius:.6rem; padding:.55rem .65rem; }
  .inc-banner.crit { border-color: var(--crit-line); background: var(--crit-bg); }
  .btn-emerald { background:#059669; color:#fff; border-color:#059669; }
  .btn-emerald:hover { background:#047857; }
  .btn-indigo-solid { background:#4338CA; color:#fff; border-color:#4338CA; }
  .btn-indigo-solid:hover { background:#3730A3; }
  .hidden { display:none !important; }

  /* ---- web terminal ---- */
  .term-win { background:#0F172A; border:1px solid #1E293B; border-radius:.75rem; box-shadow:0 20px 50px -12px rgb(15 23 42 / .45); display:flex; flex-direction:column; overflow:hidden; }
  .term-bar { background:#1E293B; color:#E2E8F0; display:flex; align-items:center; gap:.75rem; padding:.5rem .75rem; font-size:.78rem; border-bottom:1px solid #334155; }
  .term-bar .tb { color:#CBD5E1; border:1px solid #475569; border-radius:.4rem; padding:.1rem .5rem; line-height:1.25rem; }
  .term-bar .tb:hover { background:#334155; color:#fff; }
  .term-badge { font-size:.68rem; font-weight:600; padding:.05rem .5rem; border-radius:9999px; border:1px solid; }
  .term-badge.on { color:#34D399; border-color:#065F46; background:#022C22; }
  .term-badge.off { color:#FCA5A5; border-color:#7F1D1D; background:#2A0F12; }
  .term-badge.wait { color:#FCD34D; border-color:#78350F; background:#2A1B07; }
  .term-body { flex:1; min-height:0; padding:.5rem .25rem .25rem .75rem; background:#0F172A; }
  .term-body .xterm { height:100%; }
  .term-body .xterm-viewport { background-color:#0F172A !important; }
  .term-full { position:fixed; inset:0; z-index:90; border-radius:0; }