:root {
    --bg: #0b0f14;
    --bg2: #121821;
    --bg3: #1a2230;
    --border: #243044;
    --text: #e7eef8;
    --muted: #8b9bb4;
    --accent: #5b9dff;
    --accent2: #3dd6c6;
    --ok: #3ecf8e;
    --warn: #f0b429;
    --err: #f07178;
    --chip: #1e2a3a;
    --radius: 12px;
    --shadow: 0 8px 32px rgba(0,0,0,.35);
    --font: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font); min-height: 100%; }
  body {
    background-image:
      radial-gradient(ellipse 80% 50% at 10% -10%, rgba(91,157,255,.18), transparent),
      radial-gradient(ellipse 60% 40% at 90% 0%, rgba(61,214,198,.10), transparent);
  }
  a { color: var(--accent); text-decoration: none; }
  button, input, select, textarea {
    font: inherit; color: inherit; background: var(--bg3); border: 1px solid var(--border);
    border-radius: 8px; padding: .55rem .75rem;
  }
  button {
    cursor: pointer; background: linear-gradient(180deg, #2a3a52, #1e2a3a);
    transition: transform .08s ease, border-color .15s, box-shadow .15s;
  }
  button:hover { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(91,157,255,.25); }
  button:active { transform: translateY(1px); }
  button.primary {
    background: linear-gradient(180deg, #4d8df0, #2f6fd4);
    border-color: #6aa4ff; font-weight: 600;
  }
  button.ghost { background: transparent; }
  button.danger { border-color: #7a3038; color: #ffb4b8; background: rgba(255,90,101,.08); }
  button.sm { padding: .3rem .55rem; font-size: .78rem; }
  button:disabled { opacity: .5; cursor: not-allowed; }
  .modal-backdrop {
    position: fixed; inset: 0; background: rgba(4,8,14,.72); backdrop-filter: blur(4px);
    display: none; align-items: center; justify-content: center; z-index: 100; padding: 1rem;
  }
  .modal-backdrop.open { display: flex; }
  .modal {
    width: min(560px, 100%); max-height: min(90vh, 760px); overflow: auto;
    background: var(--bg2); border: 1px solid var(--border); border-radius: 14px;
    padding: 1.15rem 1.25rem 1.25rem; box-shadow: 0 20px 60px rgba(0,0,0,.45);
  }
  .modal h3 { margin: 0 0 1rem; font-size: 1.05rem; }
  .modal-actions { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; flex-wrap: wrap; }
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
  .form-grid .full { grid-column: 1 / -1; }
  @media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
  .actions-cell { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
  .app { max-width: 1280px; margin: 0 auto; padding: 1.25rem 1.25rem 3rem; }
  header {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin-bottom: 1.25rem; flex-wrap: wrap;
  }
  .brand { display: flex; align-items: center; gap: .75rem; }
  .logo {
    width: 40px; height: 40px; border-radius: 10px;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    display: grid; place-items: center; font-weight: 800; color: #061018; letter-spacing: -1px;
    box-shadow: 0 0 24px rgba(91,157,255,.35);
  }
  h1 { font-size: 1.25rem; margin: 0; font-weight: 700; letter-spacing: -.02em; }
  .subtitle { color: var(--muted); font-size: .85rem; margin: .1rem 0 0; }
  .header-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
  .pill {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--chip); border: 1px solid var(--border); border-radius: 999px;
    padding: .3rem .7rem; font-size: .8rem; color: var(--muted);
  }
  .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
  .dot.warn { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
  .dot.err { background: var(--err); box-shadow: 0 0 8px var(--err); }
  .nav {
    display: flex; gap: .35rem; background: var(--bg2); border: 1px solid var(--border);
    border-radius: 999px; padding: .3rem; margin-bottom: 1.25rem; flex-wrap: wrap;
  }
  .nav button {
    border: none; background: transparent; border-radius: 999px; padding: .5rem 1rem;
    color: var(--muted); font-weight: 500;
  }
  .nav button.active {
    background: var(--bg3); color: var(--text); border: 1px solid var(--border);
    box-shadow: var(--shadow);
  }
  .grid { display: grid; gap: 1rem; }
  .stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .card {
    background: linear-gradient(180deg, rgba(26,34,48,.95), rgba(18,24,33,.98));
    border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem;
    box-shadow: var(--shadow);
  }
  .card h3 { margin: 0 0 .75rem; font-size: .95rem; font-weight: 600; }
  .stat-label { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
  .stat-value { font-size: 1.45rem; font-weight: 700; margin-top: .25rem; font-variant-numeric: tabular-nums; }
  .stat-value.sm { font-size: 1.05rem; }
  .panel { display: none; }
  .panel.active { display: block; }
  .row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
  .row > * { min-width: 0; }
  .grow { flex: 1; }
  label { display: block; font-size: .8rem; color: var(--muted); margin-bottom: .3rem; }
  .field { margin-bottom: .85rem; }
  .switch {
    display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; user-select: none;
  }
  .switch input { display: none; }
  .switch .track {
    width: 40px; height: 22px; border-radius: 999px; background: #2a3548; border: 1px solid var(--border);
    position: relative; transition: background .15s;
  }
  .switch .track::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
    border-radius: 50%; background: #c5d0e0; transition: transform .15s;
  }
  .switch input:checked + .track { background: #245a44; border-color: #2f8a64; }
  .switch input:checked + .track::after { transform: translateX(18px); background: var(--ok); }
  table { width: 100%; border-collapse: collapse; font-size: .9rem; }
  th, td { text-align: left; padding: .65rem .5rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
  th { color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
  tr:hover td { background: rgba(255,255,255,.02); }
  .badge {
    display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px;
    padding: .15rem .55rem; font-size: .75rem; border: 1px solid var(--border); background: var(--chip);
  }
  .badge.ok { color: var(--ok); border-color: #2a5a45; }
  .badge.warn { color: var(--warn); border-color: #5a4a20; }
  .badge.err { color: var(--err); border-color: #5a2a30; }
  .badge.muted { color: var(--muted); }
  .chat-log {
    height: 360px; overflow: auto; background: #0a0e13; border: 1px solid var(--border);
    border-radius: 10px; padding: .85rem; margin-bottom: .85rem; font-family: var(--mono); font-size: .85rem;
  }
  .msg { margin-bottom: .9rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
  .msg .role { font-weight: 700; margin-bottom: .2rem; }
  .msg.user .role { color: var(--accent); }
  .msg.assistant .role { color: var(--accent2); }
  .msg.system .role { color: var(--muted); }
  .msg .meta { color: var(--muted); font-size: .75rem; margin-top: .3rem; }
  .chat-input { display: flex; gap: .5rem; }
  .chat-input textarea { flex: 1; min-height: 72px; resize: vertical; }
  .events {
    max-height: 420px; overflow: auto; font-family: var(--mono); font-size: .8rem;
  }
  .event { display: grid; grid-template-columns: 72px 64px 1fr; gap: .5rem; padding: .4rem 0; border-bottom: 1px solid rgba(36,48,68,.6); }
  .event .lvl { text-transform: uppercase; font-weight: 700; font-size: .7rem; }
  .event .lvl.info { color: var(--accent); }
  .event .lvl.warn { color: var(--warn); }
  .event .lvl.error { color: var(--err); }
  .event .lvl.success { color: var(--ok); }
  .event .ts { color: var(--muted); }
  .settings-stack {
    display: flex; flex-direction: column; gap: 1rem; max-width: 720px;
  }
  .settings-stack .card h3 {
    display: flex; align-items: center; gap: .5rem;
    padding-bottom: .65rem; margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
  }
  .settings-stack .card h3 .section-num {
    display: inline-grid; place-items: center;
    width: 22px; height: 22px; border-radius: 6px; font-size: .72rem; font-weight: 700;
    background: var(--chip); border: 1px solid var(--border); color: var(--accent); flex-shrink: 0;
  }
  .settings-stack .card h4 {
    margin: 1.1rem 0 .55rem; font-size: .82rem; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: .05em;
  }
  .field-row {
    display: flex; flex-wrap: wrap; gap: .75rem;
  }
  .field-row > .field { flex: 1 1 180px; min-width: 0; margin-bottom: .85rem; }
  .toggle-list {
    display: flex; flex-direction: column; gap: .45rem; margin-bottom: .85rem;
  }
  .toggle-list .switch {
    padding: .45rem .65rem; border-radius: 8px; border: 1px solid var(--border);
    background: rgba(0,0,0,.15); width: 100%; box-sizing: border-box;
  }
  .settings-actions {
    display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .25rem; padding-top: .85rem;
    border-top: 1px solid var(--border);
  }
  .settings-stack input[type="text"],
  .settings-stack input[type="number"],
  .settings-stack select,
  .settings-stack textarea {
    width: 100%;
  }
  .toast {
    position: fixed; bottom: 1.25rem; right: 1.25rem; background: var(--bg3); border: 1px solid var(--border);
    border-radius: 10px; padding: .7rem 1rem; box-shadow: var(--shadow); z-index: 50;
    transform: translateY(120%); opacity: 0; transition: .25s ease; max-width: 360px;
  }
  .toast.show { transform: translateY(0); opacity: 1; }
  .toast.err { border-color: #7a3038; }
  .toast.ok { border-color: #2a5a45; }
  .muted { color: var(--muted); }
  .mono { font-family: var(--mono); }
  .two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; }
  @media (max-width: 900px) {
    .two-col { grid-template-columns: 1fr; }
    .event { grid-template-columns: 1fr; gap: .15rem; }
  }
  .bar {
    height: 6px; background: #1a2433; border-radius: 999px; overflow: hidden; margin-top: .35rem;
  }
  .bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
  .hint { font-size: .8rem; color: var(--muted); margin-top: .35rem; }