:root { color-scheme: dark; --bg:#0a0d12; --panel:#121720; --line:#242c38; --text:#f4f7fb; --muted:#8f9bac; --accent:#61e5a6; --danger:#ff6b79; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(circle at 85% 0,#16352b 0,transparent 28rem),var(--bg); color:var(--text); min-height:100vh; }
.auth-shell { min-height:100vh;display:grid;place-items:center;padding:24px; }
.auth-card { width:min(420px,100%);padding:32px;background:color-mix(in srgb,var(--panel) 95%,transparent);border:1px solid var(--line);border-radius:24px;box-shadow:0 28px 90px #0007; }
.auth-card h1 { margin-bottom:12px; }.auth-card .muted { margin-bottom:24px; }.auth-card button { width:100%;margin-top:24px; }
main { width:min(1040px,calc(100% - 32px)); margin:0 auto; padding:48px 0 80px; }
header,.panel-title,.target,.agent,.actions { display:flex; align-items:center; justify-content:space-between; gap:16px; }
h1,h2,p { margin:0; } h1 { font-size:clamp(2.2rem,7vw,4.5rem); line-height:.95; letter-spacing:-.06em; } h2 { font-size:1.15rem; }
.eyebrow { color:var(--accent); font-weight:800; letter-spacing:.18em; font-size:.72rem; margin-bottom:12px; }.muted,.panel-title p,.target-meta { color:var(--muted); }.panel-title p { font-size:.85rem; margin-top:6px; }
button,input,select { font:inherit; } button { border:0; border-radius:12px; background:var(--accent); color:#062518; font-weight:800; padding:11px 16px; cursor:pointer; } button:hover { filter:brightness(1.08); } button:disabled { opacity:.45; cursor:wait; }.secondary { background:#202733; color:var(--text); }.danger { color:var(--danger); }
.summary { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:36px 0 16px; }.summary article,.panel { background:color-mix(in srgb,var(--panel) 92%,transparent); border:1px solid var(--line); border-radius:20px; }.summary article { padding:20px; }.summary span { display:block;color:var(--muted);font-size:.8rem;}.summary strong { display:block;font-size:2rem;margin-top:8px; }
.panel { padding:22px; margin-top:16px; }.target-list,.agent-list { margin-top:18px; }.target,.agent { padding:17px 0; border-top:1px solid var(--line); }.target:first-child,.agent:first-child { border-top:0; }.target-name { font-weight:800; margin-bottom:5px; }.target-meta { font-size:.8rem; font-family:ui-monospace,monospace; }.target-actions { display:flex;gap:8px; }.target-actions .icon { padding:10px 12px; }.status { display:inline-flex;align-items:center;gap:7px;font-size:.8rem;color:var(--muted);}.status::before { content:"";width:8px;height:8px;border-radius:50%;background:#596271; }.status.online::before { background:var(--accent);box-shadow:0 0 12px var(--accent); }.empty { color:var(--muted);text-align:center;padding:34px 0; }
.notice { margin-top:24px;padding:14px 16px;border:1px solid #674f28;background:#282116;border-radius:14px;color:#ffd38a;}.hidden { display:none; }
.account { display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end; }.account div { display:flex;flex-direction:column;text-align:right;margin-right:6px; }.account span { color:var(--muted);font-size:.75rem; }
.tabs { display:flex;gap:8px;margin-top:30px;padding-bottom:2px;overflow-x:auto; }.tabs button { background:#171e28;color:var(--muted);white-space:nowrap; }.tabs button.active { background:var(--accent);color:#062518; }
.agent-side,.user-actions { display:flex;align-items:center;gap:10px; }.owner-select { margin:0;display:flex;align-items:center;gap:7px; }.owner-select select,.user-actions select { width:auto;margin:0;padding:8px 10px; }
.user-list { margin-top:18px; }.user-row { display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 0;border-top:1px solid var(--line); }.user-row:first-child { border-top:0; }.you { color:var(--accent);font-size:.7rem;margin-left:7px; }.user-actions button { padding:9px 12px; }
dialog { width:min(460px,calc(100% - 32px)); border:1px solid var(--line); border-radius:20px; color:var(--text); background:#151b24; padding:24px; } dialog::backdrop { background:#05070ab8;backdrop-filter:blur(5px); } dialog h2 { margin-bottom:22px; } label { display:block;color:var(--muted);font-size:.8rem;margin-top:15px; } input,select { width:100%;margin-top:7px;background:#0b0f15;color:var(--text);border:1px solid #303a49;border-radius:11px;padding:12px;outline:none; } input:focus,select:focus { border-color:var(--accent); }.actions { margin-top:24px;justify-content:flex-end; }
.token-row { display:flex;align-items:center;gap:8px;margin-top:7px; }.token-row input { margin-top:0;min-width:0;flex:1;font-family:ui-monospace,monospace; }.token-row button { white-space:nowrap;padding-inline:13px; }
#toast { position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:#eefbf5;color:#092218;padding:12px 18px;border-radius:12px;opacity:0;pointer-events:none;transition:.2s;box-shadow:0 12px 50px #0008; } #toast.show { opacity:1;transform:translate(-50%,0); }
@media (max-width:650px){ main{padding-top:28px}header{align-items:flex-start;flex-direction:column}.account{width:100%;justify-content:flex-start}.account div{text-align:left;margin-right:auto}.summary{grid-template-columns:1fr 1fr}.summary article:last-child{grid-column:1/-1}.target,.agent,.user-row{align-items:flex-start;flex-direction:column}.target-actions,.user-actions,.agent-side{width:100%;flex-wrap:wrap}.target-actions button:first-child{flex:1}.owner-select{width:100%;justify-content:space-between}.owner-select select{flex:1}.panel{padding:17px}.token-row{flex-wrap:wrap}.token-row input{flex-basis:100%}.token-row button{flex:1} }