:root {
  color-scheme: dark;
  --bg: #080a0f;
  --panel: #10131a;
  --panel-2: #151922;
  --line: #252b36;
  --line-soft: rgba(255,255,255,.07);
  --text: #f4f7fb;
  --muted: #8993a4;
  --acid: #c8ff38;
  --acid-soft: rgba(200,255,56,.11);
  --cyan: #52e7da;
  --red: #ff637d;
  --amber: #ffc857;
  --blue: #7aa2ff;
  --radius: 18px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .46; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,p { margin-top: 0; }
.muted { color: var(--muted); }
.kicker { margin-bottom: 8px; color: var(--acid); font-size: .67rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.brand-symbol { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; background: var(--acid); color: #090c08; font-size: .8rem; font-weight: 900; box-shadow: 0 0 28px rgba(200,255,56,.12); }

/* Login */
.login-screen { display: grid; min-height: 100vh; grid-template-columns: minmax(420px, 1.08fr) minmax(420px, .92fr); }
.login-visual { position: relative; display: flex; min-height: 100vh; overflow: hidden; padding: clamp(42px, 6vw, 90px); align-items: center; background: #0d1015; border-right: 1px solid var(--line); }
.visual-grid { position: absolute; inset: 0; opacity: .36; background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(125deg, #000 15%, transparent 85%); }
.login-visual::before { content:""; position:absolute; width:34rem; height:34rem; right:-15rem; top:8%; border:1px solid rgba(200,255,56,.25); border-radius:50%; box-shadow: 0 0 90px rgba(200,255,56,.05), inset 0 0 80px rgba(200,255,56,.03); }
.visual-copy { position: relative; z-index: 1; max-width: 680px; }
.visual-copy .brand-symbol { margin-bottom: clamp(56px, 11vh, 120px); }
.visual-copy h2 { max-width: 650px; margin-bottom: 24px; font-size: clamp(3.2rem, 6.5vw, 7.2rem); line-height: .9; letter-spacing: -.075em; }
.visual-copy > p:last-child { max-width: 510px; color: #aab2bf; font-size: clamp(1rem, 1.5vw, 1.22rem); line-height: 1.7; }
.signal-line { position: absolute; left: clamp(42px, 6vw, 90px); bottom: 40px; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }
.signal-line i,.sync-state i { width: 8px; height: 8px; border-radius:50%; background: var(--acid); box-shadow: 0 0 16px var(--acid); }
.login-panel { display: grid; min-height: 100vh; padding: 40px; place-items: center; background: radial-gradient(circle at 50% 35%, rgba(122,162,255,.07), transparent 35%), var(--bg); }
.login-form { width: min(410px, 100%); }
.login-form h1 { margin-bottom: 12px; font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -.055em; }
.login-intro { margin-bottom: 38px; line-height: 1.65; }
.mobile-brand { display: none; }
label { display: grid; gap: 9px; margin-bottom: 18px; color: #bdc5d2; font-size: .76rem; font-weight: 700; letter-spacing: .04em; }
label small { color: var(--muted); font-weight: 400; letter-spacing: 0; }
input { width: 100%; padding: 14px 15px; outline: none; border: 1px solid var(--line); border-radius: 11px; background: #0e1118; color: var(--text); transition: border .2s, box-shadow .2s; }
input:focus { border-color: rgba(200,255,56,.62); box-shadow: 0 0 0 3px rgba(200,255,56,.08); }
.primary,.secondary,.bot-actions button { min-height: 43px; border: 1px solid transparent; border-radius: 10px; padding: 0 16px; font-weight: 800; }
.primary { background: var(--acid); color: #0a0c08; }
.secondary { border-color: var(--line); background: var(--panel); color: var(--text); }
.login-submit { display:flex; width:100%; margin-top: 10px; align-items:center; justify-content:space-between; }
.login-submit i { font-size: 1.15rem; font-style:normal; }
.login-progress { display:flex; margin-top:18px; align-items:center; gap:10px; color:var(--muted); font-size:.78rem; }
.login-progress i { width:15px; height:15px; border:2px solid var(--line); border-top-color:var(--acid); border-radius:50%; animation: spin .8s linear infinite; }
.form-error { min-height: 22px; margin: 14px 0 0; color: #ff91a3; font-size: .8rem; }
@keyframes spin { to { transform:rotate(360deg); } }

/* App shell */
.app-shell { min-height: 100vh; }
.sidebar { position:fixed; z-index:20; inset:0 auto 0 0; display:flex; width:230px; padding:26px 18px 20px; flex-direction:column; border-right:1px solid var(--line); background:#0b0e13; }
.side-brand { display:flex; padding:0 7px; align-items:center; gap:12px; }
.side-brand > span:last-child { display:grid; }
.side-brand b { font-size:.92rem; }
.side-brand small { color:var(--muted); font-size:.67rem; letter-spacing:.13em; text-transform:uppercase; }
.sidebar nav { display:grid; gap:5px; margin-top:62px; }
.sidebar nav a { display:flex; padding:12px 13px; align-items:center; gap:14px; border:1px solid transparent; border-radius:10px; color:var(--muted); font-size:.82rem; font-weight:700; transition:.2s; }
.sidebar nav a i { color:#505a68; font-family:ui-monospace,monospace; font-size:.63rem; font-style:normal; }
.sidebar nav a:hover,.sidebar nav a.active { border-color:var(--line); background:var(--panel); color:var(--text); }
.sidebar nav a.active i { color:var(--acid); }
.side-footer { display:flex; margin-top:auto; padding:15px 6px 0; align-items:center; justify-content:space-between; border-top:1px solid var(--line); }
.identity { display:flex; min-width:0; align-items:center; gap:10px; }
.identity > span:last-child { display:grid; min-width:0; }
.identity b { overflow:hidden; font-size:.76rem; text-overflow:ellipsis; }
.identity small { color:var(--muted); font-size:.62rem; }
.avatar { display:grid; width:33px; height:33px; flex:none; place-items:center; border-radius:50%; background:#252b35; font-size:.72rem; font-weight:900; }
.icon-button,.close-button { border:0; background:transparent; color:var(--muted); font-size:1.15rem; }
.workspace { margin-left:230px; padding:34px clamp(24px,4vw,62px) 80px; }
.topbar { display:flex; max-width:1500px; margin:0 auto; align-items:center; justify-content:space-between; gap:24px; }
.topbar h1 { margin-bottom:0; font-size:clamp(1.85rem,3vw,3rem); letter-spacing:-.05em; }
.top-actions { display:flex; align-items:center; gap:12px; }
.sync-state { display:flex; align-items:center; gap:9px; padding:0 10px; color:var(--muted); font-size:.72rem; font-weight:700; }
.sync-state.offline i { background:var(--red); box-shadow:0 0 16px var(--red); }
.sync-state.loading i { background:var(--amber); box-shadow:0 0 16px var(--amber); animation:pulse 1s infinite; }
@keyframes pulse { 50% { opacity:.25; } }
.notice { max-width:1500px; margin:20px auto 0; padding:13px 15px; border-radius:10px; font-size:.8rem; }
.notice.error { border:1px solid rgba(255,99,125,.25); background:rgba(255,99,125,.08); color:#ffafbc; }

/* Overview */
.overview-grid { display:grid; max-width:1500px; margin:34px auto 0; grid-template-columns:minmax(390px,1.15fr) minmax(430px,.85fr); gap:16px; }
.hero-card,.metric-card,.bot-card,.table-panel { border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); }
.hero-card { position:relative; min-height:275px; overflow:hidden; padding:32px; }
.hero-copy { position:relative; z-index:2; max-width:580px; }
.hero-copy h2 { margin-bottom:10px; font-size:clamp(1.8rem,3.4vw,3.2rem); letter-spacing:-.055em; }
.hero-copy > p:last-child { line-height:1.55; }
.hero-meta { position:absolute; z-index:2; left:32px; right:32px; bottom:27px; display:flex; gap:45px; }
.hero-meta div { display:grid; gap:4px; }
.hero-meta span,.bot-summary span,.detail-strip span,.filter-row > span { color:var(--muted); font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.hero-meta strong { font-size:.76rem; }
.pulse-orbit { position:absolute; width:280px; height:280px; right:-50px; top:-40px; border:1px solid rgba(200,255,56,.14); border-radius:50%; }
.pulse-orbit::before,.pulse-orbit::after { content:""; position:absolute; border:1px solid rgba(200,255,56,.1); border-radius:50%; }
.pulse-orbit::before { inset:38px; }.pulse-orbit::after { inset:78px; }
.pulse-orbit i { position:absolute; width:7px; height:7px; border-radius:50%; background:var(--acid); box-shadow:0 0 15px var(--acid); }
.pulse-orbit i:nth-child(1){left:18px;top:68px}.pulse-orbit i:nth-child(2){right:32px;bottom:45px}.pulse-orbit i:nth-child(3){left:50%;top:50%;}
.metric-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.metric-card { display:flex; min-height:129px; padding:20px; align-items:center; justify-content:space-between; gap:14px; }
.metric-card:first-child { grid-column:span 2; }
.metric-copy { display:grid; gap:5px; }
.metric-label { color:var(--muted); font-size:.65rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.metric-value { font-size:clamp(1.6rem,2.6vw,2.4rem); letter-spacing:-.04em; }
.metric-detail { color:var(--muted); font-size:.66rem; }
.gauge { position:relative; display:grid; width:67px; height:67px; flex:none; place-items:center; }
.gauge svg { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.gauge circle { fill:none; stroke-width:4; }
.gauge-track { stroke:#252b35; }
.gauge-value { stroke:var(--acid); stroke-linecap:round; stroke-dasharray:113.1; stroke-dashoffset:113.1; }
.gauge span { position:relative; color:var(--muted); font-size:.63rem; }

/* Sections */
.content-section { max-width:1500px; margin:58px auto 0; scroll-margin-top:20px; }
.section-heading { display:flex; margin-bottom:18px; align-items:end; justify-content:space-between; gap:24px; }
.section-heading h2 { margin-bottom:0; font-size:1.55rem; letter-spacing:-.035em; }
.section-heading > p { max-width:520px; margin-bottom:1px; font-size:.76rem; text-align:right; }
.bots-grid { display:grid; gap:16px; }
.bot-card { padding:25px; }
.bot-top,.bot-identity,.safety-box,.panel-title { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.bot-identity { justify-content:flex-start; }
.bot-icon { display:grid; width:39px; height:39px; place-items:center; border-radius:11px; background:var(--acid-soft); color:var(--acid); }
.agent-label { margin-bottom:3px; color:var(--muted); font-size:.65rem; }
.instance-name { margin:0; font-size:1.25rem; }
.status-pill { padding:6px 10px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:.62rem; font-weight:900; letter-spacing:.07em; text-transform:uppercase; }
.status-pill.good { border-color:rgba(200,255,56,.28); background:var(--acid-soft); color:var(--acid); }
.status-pill.bad { border-color:rgba(255,99,125,.3); background:rgba(255,99,125,.08); color:#ff8da0; }
.status-pill.warn { border-color:rgba(255,200,87,.28); background:rgba(255,200,87,.08); color:var(--amber); }
.bot-summary { display:grid; margin-top:24px; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:13px; background:#0c0f15; }
.bot-summary > div { display:grid; min-width:0; padding:17px 19px; gap:5px; border-right:1px solid var(--line); }
.bot-summary > div:last-child { border:0; }
.bot-summary strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.9rem; }
.bot-summary small { overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; font-size:.67rem; }
.detail-strip { display:grid; margin-top:14px; grid-template-columns:repeat(4,1fr); gap:14px; }
.detail-strip div { display:grid; gap:4px; }
.detail-strip b { overflow:hidden; font-family:ui-monospace,monospace; font-size:.68rem; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.safety-box { margin-top:22px; padding:14px 16px; border:1px solid rgba(200,255,56,.14); border-radius:11px; background:var(--acid-soft); }
.safety-box > div { display:grid; gap:3px; }
.safety-title { color:var(--acid); font-size:.75rem; font-weight:900; }
.safety-reason { color:#aeb997; font-size:.67rem; }
.safety-box > b { color:var(--acid); font-size:.72rem; }
.safety-box.locked { border-color:rgba(255,99,125,.25); background:rgba(255,99,125,.08); }
.safety-box.locked .safety-title,.safety-box.locked > b { color:#ff8da0; }
.filter-row { display:flex; min-height:40px; margin-top:14px; align-items:center; gap:12px; }
.filter-list { display:flex; flex-wrap:wrap; gap:6px; }
.filter-list i { padding:4px 7px; border:1px solid var(--line); border-radius:6px; color:#bec6d1; font-family:ui-monospace,monospace; font-size:.65rem; font-style:normal; }
.bot-actions { display:flex; margin-top:18px; flex-wrap:wrap; gap:8px; }
.bot-actions button { min-height:38px; border-color:var(--line); background:#171b24; color:#d7dde7; font-size:.7rem; }
.bot-actions button:hover:not(:disabled) { border-color:#596373; }
.bot-actions .start { border-color:rgba(200,255,56,.28); color:var(--acid); }
.bot-actions .configure { margin-left:auto; border-color:rgba(122,162,255,.3); color:#a9c0ff; }

/* Tables and activity */
.table-panel { overflow:hidden; }
.panel-title { padding:19px 21px; border-bottom:1px solid var(--line); }
.panel-title h3 { margin:0; font-size:.9rem; }
.panel-title span { color:var(--muted); font-size:.63rem; text-transform:uppercase; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.75rem; }
th,td { padding:13px 17px; border-bottom:1px solid var(--line-soft); text-align:left; white-space:nowrap; }
th { color:var(--muted); font-size:.59rem; letter-spacing:.1em; text-transform:uppercase; }
td { color:#d2d8e2; }
tbody tr:last-child td { border-bottom:0; }
.empty { padding:28px; color:var(--muted); text-align:center; }
.activity-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr); gap:16px; }
.audit-list { max-height:480px; overflow:auto; }
.audit-item { display:grid; padding:14px 20px; grid-template-columns:8px minmax(0,1fr) auto; align-items:start; gap:12px; border-bottom:1px solid var(--line-soft); }
.audit-item:last-child { border-bottom:0; }
.audit-item > i { width:7px; height:7px; margin-top:5px; border-radius:50%; background:var(--blue); }
.audit-item > div { min-width:0; }
.audit-item b { display:block; overflow:hidden; font-size:.72rem; text-overflow:ellipsis; white-space:nowrap; }
.audit-item small,.audit-item time { color:var(--muted); font-size:.62rem; }

/* Configuration dialog */
.config-dialog { width:min(720px,calc(100% - 28px)); padding:0; border:1px solid #343b48; border-radius:20px; background:var(--panel); color:var(--text); box-shadow:0 35px 120px rgba(0,0,0,.72); }
.config-dialog::backdrop { background:rgba(3,5,8,.82); backdrop-filter:blur(8px); }
.config-dialog form { padding:27px; }
.dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.dialog-head h2 { margin-bottom:4px; font-size:1.55rem; }
.close-button { font-size:1.65rem; }
.security-note { display:flex; margin:22px 0; padding:14px; gap:12px; border:1px solid rgba(122,162,255,.23); border-radius:11px; background:rgba(122,162,255,.07); color:#c8d5f2; }
.security-note i { color:var(--blue); font-style:normal; }
.security-note p { margin:0; font-size:.72rem; line-height:1.55; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.form-grid .full { grid-column:1/-1; }
.dialog-actions { display:flex; margin-top:22px; justify-content:flex-end; gap:9px; }

@media (max-width:1100px) {
  .overview-grid,.activity-grid { grid-template-columns:1fr; }
  .metric-grid { grid-template-columns:repeat(3,1fr); }
  .metric-card:first-child { grid-column:auto; }
}
@media (max-width:820px) {
  .login-screen { grid-template-columns:1fr; }
  .login-visual { display:none; }
  .mobile-brand { display:block; margin-bottom:50px; }
  .sidebar { position:sticky; top:0; width:100%; height:auto; padding:12px 15px; flex-direction:row; align-items:center; border:0; border-bottom:1px solid var(--line); }
  .side-brand > span:last-child,.sidebar nav a i,.sidebar nav a span,.identity { display:none; }
  .sidebar nav { display:flex; margin:0 auto; }
  .sidebar nav a { width:8px; height:8px; padding:0; border:0; border-radius:50%; background:#343a45; }
  .sidebar nav a.active { background:var(--acid); box-shadow:0 0 12px var(--acid); }
  .side-footer { margin:0; padding:0; border:0; }
  .workspace { margin-left:0; padding:26px 18px 60px; }
  .topbar,.section-heading { align-items:flex-start; flex-direction:column; }
  .section-heading > p { text-align:left; }
  .detail-strip { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:580px) {
  .login-panel { padding:26px; }
  .top-actions { width:100%; justify-content:space-between; }
  .sync-state { padding-left:0; }
  .overview-grid { grid-template-columns:minmax(0,1fr); }
  .hero-card { min-height:320px; padding:24px; }
  .hero-meta { left:24px; right:24px; bottom:22px; flex-direction:column; gap:12px; }
  .metric-grid { grid-template-columns:1fr; }
  .bot-card { padding:18px; }
  .bot-summary { grid-template-columns:1fr; }
  .bot-summary > div { border:0; border-bottom:1px solid var(--line); }
  .detail-strip { grid-template-columns:1fr 1fr; }
  .bot-actions { display:grid; grid-template-columns:repeat(2,1fr); }
  .bot-actions .configure { margin-left:0; }
  .form-grid { grid-template-columns:1fr; }
  .form-grid .full { grid-column:auto; }
  .dialog-actions { flex-direction:column-reverse; }
  .dialog-actions button { width:100%; }
}