:root {
      --bg: #f6f8ff;
      --panel: rgba(255,255,255,.88);
      --panel-2: rgba(248,251,255,.86);
      --line: rgba(171, 190, 215, .48);
      --text: #152033;
      --muted: #64748b;
      --brand: #4f8cff;
      --brand-2: #7c5cff;
      --ok: #16a34a;
      --warn: #ca8a04;
      --danger: #dc2626;
      --shadow: 0 22px 60px rgba(56, 78, 125, .12);
      --radius: 8px;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      min-height: 100vh;
      color: var(--text);
      background:
        radial-gradient(circle at 12% 8%, rgba(124, 92, 255, .16), transparent 30%),
        radial-gradient(circle at 88% 14%, rgba(79, 140, 255, .18), transparent 28%),
        linear-gradient(135deg, #fbfdff 0%, var(--bg) 48%, #eef4ff 100%);
      font: 14px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    body::before,
    body::after {
      content: "";
      position: fixed;
      pointer-events: none;
      z-index: -1;
      border-radius: 999px;
      filter: blur(2px);
    }
    body::before {
      width: 360px;
      height: 360px;
      right: 6vw;
      top: 10vh;
      background:
        linear-gradient(135deg, rgba(124, 92, 255, .12), rgba(79, 140, 255, .04));
      border: 1px solid rgba(124, 92, 255, .12);
    }
    body::after {
      width: 220px;
      height: 220px;
      left: 12vw;
      bottom: 8vh;
      background:
        linear-gradient(135deg, rgba(20, 184, 166, .12), rgba(79, 140, 255, .04));
      border: 1px solid rgba(20, 184, 166, .12);
    }
    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; }
    h1, h2, h3, p { margin: 0; }
    .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
    .app {
      display: grid;
      grid-template-columns: 204px minmax(0, 1fr);
      min-height: 100vh;
    }
    .sidebar {
      padding: 18px 14px;
      border-right: 1px solid rgba(215, 225, 238, .9);
      background: rgba(255, 255, 255, .70);
      backdrop-filter: blur(16px);
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: auto;
    }
    .brand {
      padding: 8px 10px 18px;
      border-bottom: 1px solid var(--line);
      margin-bottom: 14px;
    }
    .brand h1 { font-size: 20px; letter-spacing: 0; }
    .sub { color: var(--muted); font-size: 12px; margin-top: 4px; }
    .nav { display: grid; gap: 6px; }
    .nav button {
      border: 1px solid transparent;
      border-radius: var(--radius);
      background: transparent;
      color: #334155;
      padding: 9px 10px;
      text-align: left;
      font-weight: 700;
    }
    .nav button.active {
      background: linear-gradient(135deg, rgba(79,140,255,.16), rgba(124,92,255,.14));
      border-color: rgba(124,92,255,.22);
      color: #3151b7;
    }
    .main { padding: 20px; min-width: 0; }
    .topline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 16px;
    }
    .title h2 { font-size: 24px; letter-spacing: 0; }
    .toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
    .page { display: none; }
    .page.active { display: grid; gap: 16px; }
    .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
    .span { grid-column: 1 / -1; }
    .panel {
      background: rgba(255,255,255,.92);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      backdrop-filter: blur(12px);
      overflow: hidden;
    }
    .panel-head {
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      background: linear-gradient(180deg, #ffffff, #f9fbff);
    }
    .panel-title { font-size: 15px; font-weight: 800; }
    .panel-body { padding: 16px; }
    .stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
    .stat {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 15px;
      background: linear-gradient(180deg, #ffffff, #f7fbff);
    }
    .stat .num { font-size: 28px; font-weight: 850; margin-top: 4px; }
    .network-panel {
      background:
        linear-gradient(180deg, rgba(255,255,255,.95), rgba(246,250,255,.92)),
        radial-gradient(circle at 12% 0%, rgba(79,140,255,.16), transparent 28%);
    }
    .network-head { align-items: flex-start; }
    .network-legend {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 14px;
      flex-wrap: wrap;
      color: #475569;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }
    .network-legend span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 9px;
      border: 1px solid rgba(171, 190, 215, .48);
      border-radius: 999px;
      background: rgba(255,255,255,.72);
    }
    .network-legend b { color: var(--text); }
    .net-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      display: inline-block;
      box-shadow: 0 0 0 4px rgba(79,140,255,.12);
    }
    .net-dot.rx { background: #4f8cff; }
    .net-dot.tx {
      background: #14b8a6;
      box-shadow: 0 0 0 4px rgba(20,184,166,.12);
    }
    #network-chart {
      display: block;
      width: 100%;
      height: 190px;
      min-height: 190px;
      border: 1px solid rgba(171, 190, 215, .42);
      border-radius: var(--radius);
      background:
        linear-gradient(180deg, rgba(255,255,255,.76), rgba(244,248,255,.72)),
        radial-gradient(circle at 12% 0%, rgba(79,140,255,.10), transparent 30%);
    }
    .network-ifaces {
      margin-top: 6px;
      text-align: right;
    }
    label .label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; font-weight: 700; }
    input, select, textarea {
      width: 100%;
      border: 1px solid #c8d5e4;
      border-radius: 7px;
      padding: 12px 12px;
      outline: none;
      color: var(--text);
      background: #fff;
      font-size: 15px;
    }
    input, select { min-height: 44px; }
    textarea { min-height: 132px; resize: vertical; }
    input:focus, select:focus, textarea:focus {
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(15,143,218,.12);
    }
    .check-row {
      display: flex;
      gap: 9px;
      align-items: flex-start;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel-2);
    }
    .check-row input { width: auto; margin-top: 3px; }
    .split-config {
      display: grid;
      gap: 12px;
      border: 1px solid rgba(79, 140, 255, .22);
      border-radius: var(--radius);
      padding: 12px;
      background: linear-gradient(180deg, rgba(248,251,255,.96), rgba(255,255,255,.88));
    }
    .split-config textarea { min-height: 82px; }
    .btn {
      border: 1px solid transparent;
      border-radius: 7px;
      padding: 9px 12px;
      background: #e7eef8;
      color: #243449;
      font-weight: 800;
    }
    .btn:hover { filter: brightness(.98); }
    .btn-primary { background: var(--brand); color: white; }
    .btn-blue { background: var(--brand-2); color: white; }
    .btn-warn { background: #facc15; color: #47340a; }
    .btn-danger { background: var(--danger); color: white; }
    .btn-link { border: 0; background: transparent; color: var(--brand-2); padding: 0; font-weight: 800; }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      border-radius: 999px;
      padding: 4px 8px;
      font-size: 12px;
      font-weight: 800;
      background: #e8eef6;
      color: #475569;
      white-space: nowrap;
    }
    .badge.ok { background: #dcfce7; color: #15803d; }
    .badge.warn { background: #fef3c7; color: #92400e; }
    .badge.blue { background: #dbeafe; color: #1d4ed8; }
    .badge.purple { background: #f3e8ff; color: #6d28d9; }
    .badge.danger { background: #fee2e2; color: #b91c1c; }
    .chat-layout { display: grid; grid-template-columns: minmax(340px, 450px) minmax(0, 1fr); gap: 16px; }
    .side-stack { display: grid; gap: 16px; align-content: start; }
    .chat-list { display: grid; gap: 8px; max-height: calc(100vh - 420px); overflow: auto; padding-right: 4px; }
    .chat-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 10px;
      background: white;
    }
    .chat-title { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .chat-meta { color: var(--muted); font-size: 12px; margin-top: 3px; }
    .quick { display: flex; gap: 4px; align-items: center; }
    .quick button {
      min-width: 28px;
      height: 28px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: #eef8ff;
      color: #075985;
      font-weight: 900;
    }
    table { width: 100%; border-collapse: collapse; }
    th, td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
    th { background: #f8fbff; color: var(--muted); font-size: 12px; text-align: left; }
    tr:last-child td { border-bottom: 0; }
    .pair-actions-row td { padding-top: 0; }
    .actions { display: grid; grid-template-columns: repeat(4, minmax(76px, 1fr)); gap: 10px; }
    .action-btn {
      border: 1px solid var(--line);
      border-radius: 7px;
      padding: 11px 12px;
      background: #edf5ff;
      color: #1d4ed8;
      font-weight: 850;
      min-width: 76px;
    }
    .action-btn.run { background: var(--brand); color: #fff; border-color: var(--brand); }
    .action-btn.pause { background: #fff7d6; color: #92400e; border-color: #f5d26f; }
    .action-btn.delete { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
    .stack-form { display: grid; gap: 14px; }
    .stack-form .toolbar { justify-content: flex-start; }
    .login-panel input { min-height: 50px; font-size: 16px; }
    .login-panel input[readonly] { background: #fff; }
    .account-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
    .cert-status { display: grid; gap: 8px; }
    .cert-days { font-size: 26px; font-weight: 850; }
    .cert-days.warn { color: var(--danger); }
    .console-output {
      min-height: 220px;
      max-height: 420px;
      overflow: auto;
      white-space: pre-wrap;
      background: #0f172a;
      color: #dbeafe;
      border-radius: var(--radius);
      padding: 14px;
      border: 1px solid #1e293b;
    }
    .list { display: grid; gap: 10px; }
    .item {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 12px;
      background: white;
    }
    .job { display: grid; gap: 7px; }
    .bar { height: 7px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
    .bar span { display: block; height: 100%; background: var(--brand); }
    .log-box { max-height: 360px; overflow: auto; display: grid; gap: 6px; }
    .muted { color: var(--muted); }
    .small { font-size: 12px; }
    .empty { color: var(--muted); text-align: center; padding: 16px; }
    .toast {
      position: fixed;
      right: 18px;
      bottom: 18px;
      max-width: 520px;
      z-index: 80;
      padding: 12px 14px;
      border-radius: var(--radius);
      border: 1px solid #a7e3d8;
      background: #e7fbf5;
      color: #075f4f;
      box-shadow: 0 16px 38px rgba(17,24,39,.18);
    }
    .toast.err { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
    .template-layout {
      align-items: start;
      grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
      gap: 16px;
    }
    .template-layout > .panel:first-child {
      position: sticky;
      top: 16px;
      max-height: calc(100vh - 40px);
      display: flex;
      flex-direction: column;
    }
    .template-layout > .panel:first-child .panel-body {
      overflow: auto;
      min-height: 180px;
    }
    .template-layout > .panel:last-child {
      min-width: 0;
    }
    .template-layout > .panel:last-child .panel-body {
      max-height: calc(100vh - 40px);
      overflow: auto;
    }
    .template-item { background: rgba(255,255,255,.86); }
    .ai-suggest-box {
      border: 1px solid rgba(79, 140, 255, .25);
      border-radius: var(--radius);
      padding: 14px;
      background:
        linear-gradient(180deg, rgba(239, 246, 255, .92), rgba(255,255,255,.86)),
        radial-gradient(circle at 8% 0%, rgba(124,92,255,.14), transparent 32%);
    }
    .ai-suggest-box textarea {
      min-height: 86px;
    }
    .format-help {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 12px;
      background: linear-gradient(180deg, rgba(248,251,255,.96), rgba(255,255,255,.86));
    }
    .format-help h3 { font-size: 14px; margin-bottom: 10px; }
    .token-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 10px;
    }
    .token-grid button {
      border: 1px solid var(--line);
      border-radius: 7px;
      background: #fff;
      padding: 9px;
      text-align: left;
      color: #26364f;
    }
    .emoji-text { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Apple Color Emoji", "Segoe UI Emoji", monospace; }
    @media (max-width: 1100px) {
      .app { grid-template-columns: 1fr; }
      .sidebar { position: static; height: auto; }
      .nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .chat-layout, .grid-2, .grid-3, .stat-grid { grid-template-columns: 1fr; }
      .template-layout {
        grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
      }
      .template-layout > .panel:first-child {
        position: sticky;
        top: 10px;
        max-height: calc(100vh - 20px);
      }
    }
    @media (max-width: 760px) {
      .template-layout { grid-template-columns: 1fr; }
      .template-layout > .panel:first-child {
        position: static;
        max-height: none;
      }
      .template-layout > .panel:last-child .panel-body {
        max-height: none;
      }
    }

.auth-page {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
}
.auth-card {
  width: min(420px, 100%);
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}
.auth-card h1 { font-size: 26px; margin-bottom: 6px; }
.auth-card form { display: grid; gap: 14px; margin-top: 22px; }
.auth-card .btn { min-height: 46px; }
.auth-error {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fee2e2;
  color: #991b1b;
  font-weight: 700;
}
.logout-link { text-decoration: none; display: inline-flex; align-items: center; }