:root {
  color-scheme: dark;
  --bg: #05070d;
  --panel: rgba(9, 14, 28, 0.88);
  --panel-2: rgba(15, 23, 42, 0.74);
  --border: rgba(125, 211, 252, 0.18);
  --text: #e5f4ff;
  --muted: #8aa4b8;
  --accent: #38bdf8;
  --good: #22c55e;
  --warn: #f59e0b;
  --bad: #ef4444;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Microsoft YaHei", "PingFang SC", ui-sans-serif, system-ui, sans-serif;
  background:
    radial-gradient(circle at 20% 0%, rgba(56, 189, 248, .20), transparent 32%),
    radial-gradient(circle at 80% 10%, rgba(34, 197, 94, .12), transparent 28%),
    linear-gradient(135deg, #030712, #08111f 45%, #05070d);
  color: var(--text);
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(148,163,184,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.035) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}
.page { max-width: 1440px; margin: 0 auto; padding: 32px; }
.hero, .login-view { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 24px; }
.login-view { min-height: 100vh; align-items: center; justify-content: center; }
.login-card { max-width: 520px; width: 100%; }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .2em; font-size: 12px; margin: 0 0 8px; }
h1 { margin: 0; font-size: clamp(32px, 5vw, 56px); letter-spacing: -0.05em; }
h2 { margin: 0; }
h3 { margin: 0 0 10px; color: var(--muted); font-size: 13px; font-weight: 500; }
.subtitle, .hint { color: var(--muted); line-height: 1.7; }
.subtitle { max-width: 800px; }
.panel, .card, .login-card {
  background: linear-gradient(180deg, rgba(15,23,42,.90), rgba(2,6,23,.82));
  border: 1px solid var(--border); border-radius: 22px;
  box-shadow: 0 24px 80px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(14px);
}
.panel { padding: 20px; }
.nested-panel { margin-top: 16px; padding: 16px; background: rgba(2,6,23,.35); }
.agent-detail-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.agent-detail-layout .side-column { min-width: 0; }
.agent-detail-layout .timeline-panel { min-width: 0; }
.agent-session-workbench { display: grid; grid-template-columns: minmax(280px, 0.85fr) minmax(520px, 1.65fr); gap: 16px; align-items: start; min-height: 520px; }
.agent-session-workbench .nested-panel { margin-top: 0; }
.session-list-panel, .session-detail-panel { min-height: 520px; }
.session-list-scroll { max-height: 470px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
.session-detail-scroll { max-height: 340px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
.session-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.session-detail-panel .card { padding: 14px; }
.session-detail-panel .card .value { font-size: clamp(17px, 1.4vw, 22px); letter-spacing: -0.02em; }
.recent-sessions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.session-summary-card { cursor: pointer; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.session-summary-card .sess-head { display: flex; justify-content: space-between; align-items: center; }
.session-summary-card .sess-head strong { font-size: 14px; color: #dff7ff; }
.session-summary-card .sess-head .sess-stamp { color: var(--muted); font-size: 12px; }
.session-summary-card .sess-body { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.session-summary-card .sess-stat { font-size: 12px; }
.session-summary-card .sess-stat .sess-label { color: var(--muted); }
.session-summary-card .sess-stat .sess-val { color: var(--text); font-weight: 600; }
.session-summary-card .sess-status { display: inline-flex; align-items: center; gap: 5px; border-radius: 99px; padding: 3px 10px; font-size: 11px; font-weight: 700; }
.session-summary-card .sess-status.active { background: rgba(34,197,94,.16); color: #86efac; }
.session-summary-card .sess-status.ended { background: rgba(148,163,184,.14); color: #cbd5e1; }
.session-summary-card .sess-status .sess-dot { width: 7px; height: 7px; border-radius: 50%; }
.session-summary-card .sess-status.active .sess-dot { background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.session-summary-card .sess-status.ended .sess-dot { background: #64748b; }
.console-hero { align-items: center; }
.status-stack { display: grid; gap: 10px; justify-items: end; }
.status { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--border); background: var(--panel); padding: 12px 16px; border-radius: 999px; }
.last-seen { color: var(--muted); font-size: 13px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--good); box-shadow: 0 0 16px var(--good); }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.compact-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 8px 0 18px; }
.card { padding: 20px; overflow: hidden; position: relative; min-width: 0; }
.card .label { color: var(--muted); font-size: 13px; }
.card .value { font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; margin-top: 10px; line-height: 1.12; overflow-wrap: anywhere; }
.metric-card.good .value { color: #86efac; }
.metric-card.warn .value { color: #fcd34d; }
.metric-card.bad .value { color: #fca5a5; }
.metric-card.accent .value { color: #7dd3fc; }
.metric-card.wide-value { grid-column: span 2; }
.metric-card.wide-value .value { font-size: clamp(20px, 2.1vw, 28px); letter-spacing: -0.03em; }
.pulse-line { height: 3px; width: 100%; margin-top: 16px; border-radius: 99px; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: scan 2.4s linear infinite; opacity: .65; }
@keyframes scan { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ── navigation ── */
.nav-bar { display: flex; gap: 6px; }
.nav-btn {
  padding: 8px 14px; font-size: 13px; border-radius: 10px;
  background: rgba(15,23,42,.72); border: 1px solid var(--border);
  color: var(--muted); cursor: pointer; transition: all .15s;
}
.nav-btn:hover { color: var(--text); border-color: rgba(56,189,248,.4); }
.nav-btn.active { background: linear-gradient(135deg, rgba(56,189,248,.24), rgba(34,197,94,.12)); color: var(--text); border-color: rgba(56,189,248,.5); }
.nav-btn.logout-btn { border-color: rgba(239,68,68,.3); color: #fca5a5; }
.nav-btn.logout-btn:hover { background: rgba(239,68,68,.2); }

/* ── scrollable event list (max height, scroll) ── */
.scroll-box { max-height: 640px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(56,189,248,.3) transparent; }
.scroll-box::-webkit-scrollbar { width: 6px; }
.scroll-box::-webkit-scrollbar-track { background: transparent; }
.scroll-box::-webkit-scrollbar-thumb { background: rgba(56,189,248,.3); border-radius: 3px; }

.ops-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(340px, .8fr); gap: 24px; align-items: start; }
.side-column { display: grid; gap: 24px; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
button, input { border: 1px solid var(--border); background: rgba(15, 23, 42, .72); color: var(--text); padding: 10px 14px; border-radius: 12px; }
button { cursor: pointer; background: linear-gradient(135deg, rgba(56,189,248,.24), rgba(34,197,94,.12)); }
input { width: 100%; margin-bottom: 12px; }
.login-form { margin-top: 16px; }
.stack-form { display: grid; gap: 10px; }
.stack-form input { margin: 0; }
.event-list, .timeline, .mix-list, .active-list { display: grid; gap: 12px; }
.timeline-event { display: grid; grid-template-columns: 110px 1fr 150px; gap: 16px; align-items: start; }
.event, .user-row, .timeline-event, .mix-item, .active-row {
  border: 1px solid rgba(148, 163, 184, .16); border-radius: 16px; padding: 14px 16px;
  background: rgba(2,6,23,.36);
}
.timeline-event.fresh { animation: flash 1.2s ease-out; border-color: rgba(56,189,248,.7); }
.timeline-event.tool-failed, .timeline-event.alert-event { border-color: rgba(239,68,68,.45); background: rgba(127,29,29,.16); }
@keyframes flash { 0% { box-shadow: 0 0 0 0 rgba(56,189,248,.8); } 100% { box-shadow: 0 0 0 18px rgba(56,189,248,0); } }
.event-title { font-weight: 800; color: #dff7ff; }
.event-preview { margin-top: 8px; color: var(--muted); line-height: 1.5; }
.event-preview.one-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.compact-event { padding: 12px 0; }
.compact-event .event-preview { margin-top: 4px; }
.event-time, .meta { color: var(--muted); font-size: 13px; }
.event-side { text-align: right; }
.event-cap-hint { text-align: center; color: var(--muted); font-size: 12px; padding: 12px 0 4px; border-top: 1px dashed rgba(148,163,184,.2); }
details { margin-top: 10px; }
summary { color: var(--accent); cursor: pointer; font-size: 13px; }
pre { margin: 10px 0 0; white-space: pre-wrap; word-break: break-word; color: #cbd5e1; background: rgba(15,23,42,.72); padding: 12px; border-radius: 10px; max-height: 260px; overflow: auto; }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 68px; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid rgba(255,255,255,.12); }
.badge.message { background: rgba(56,189,248,.16); color: #7dd3fc; }
.badge.tool { background: rgba(34,197,94,.16); color: #86efac; }
.badge.llm { background: rgba(168,85,247,.18); color: #d8b4fe; }
.badge.agent { background: rgba(245,158,11,.16); color: #fcd34d; }
.badge.system { background: rgba(148,163,184,.14); color: #cbd5e1; }
.badge.alert { background: rgba(239,68,68,.18); color: #fca5a5; }
.mix-row, .active-row, .user-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.agent-row, .session-row { width: 100%; text-align: left; background: rgba(2,6,23,.36); color: var(--text); }
.agent-row:hover, .session-row:hover { border-color: rgba(56,189,248,.55); transform: translateY(-1px); }
.agent-row small, .session-row small { color: var(--muted); font-weight: 400; }
.compact-agent-row { justify-content: center; padding: 13px 12px; }
.compact-agent-row strong { display: block; text-align: center; width: 100%; }
.bar { height: 8px; background: rgba(148,163,184,.12); border-radius: 99px; overflow: hidden; margin-top: 10px; }
.bar span { display: block; height: 100%; background: linear-gradient(90deg, #38bdf8, #22c55e); border-radius: inherit; }
.trend-list { display: grid; gap: 12px; }
.trend-row { padding: 14px 0; border-bottom: 1px solid rgba(148,163,184,.12); }
.trend-head, .trend-meta { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.trend-head span, .trend-meta { color: var(--muted); font-size: 13px; }
.trend-bar { height: 12px; background: rgba(148,163,184,.12); border-radius: 999px; overflow: hidden; margin: 10px 0 8px; }
.trend-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #38bdf8, #22c55e); box-shadow: 0 0 24px rgba(56,189,248,.28); }
.active-group + .active-group { margin-top: 18px; }
.empty { color: var(--muted); padding: 16px; border: 1px dashed rgba(148,163,184,.24); border-radius: 16px; text-align: center; }
.big-empty { padding: 48px 20px; }

/* ── account management grid ── */
.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.account-grid .panel:first-child { grid-column: 1 / -1; max-width: 520px; justify-self: center; }
.account-grid .panel:nth-child(2) { grid-column: 1 / -1; max-width: 520px; justify-self: center; } /* create user */
.user-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.user-actions select { padding: 4px 8px; border-radius: 8px; border: 1px solid rgba(148,163,184,.24); background: rgba(2,6,23,.6); color: #e2e8f0; font-size: 13px; }
.user-actions button { padding: 4px 12px; font-size: 12px; }
.danger-btn { background: rgba(239,68,68,.16); color: #fca5a5; border: 1px solid rgba(239,68,68,.32); border-radius: 8px; cursor: pointer; }
.danger-btn:hover { background: rgba(239,68,68,.28); }
.danger-btn:disabled { opacity: .3; cursor: not-allowed; }
.inline-row { display: flex; gap: 8px; }
.inline-row input { flex: 1; }
.inline-row select { width: 100px; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(148,163,184,.18); background: rgba(2,6,23,.72); color: #e2e8f0; font-size: 14px; }

@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-grid, .agent-detail-layout, .agent-session-workbench { grid-template-columns: 1fr; }
  .account-grid { grid-template-columns: 1fr; }
  .account-grid .panel:first-child { grid-column: auto; max-width: none; }
  .timeline-event { grid-template-columns: 1fr; }
  .event-side { text-align: left; }
}
@media (max-width: 640px) { .page { padding: 18px; } .hero { flex-direction: column; } .cards { grid-template-columns: 1fr; } .metric-card.wide-value { grid-column: auto; } }