:root { color-scheme: dark; --bg:#070b12; --surface:#0b1220; --raised:#111b2c; --line:#243244; --text:#f5f8fc; --muted:#8fa2ba; --blue:#1267ff; --green:#3ddc97; --red:#ff6b77; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--text); font:15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; }
header { min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px clamp(20px,4vw,56px); border-bottom:1px solid var(--line); background:rgba(11,18,32,.9); }
h1,h2,h3,p { margin:0; }
h1 { font-size:24px; } h2 { font-size:22px; } h3 { font-size:20px; margin-top:10px; }
a { color:#7fb0ff; text-decoration:none; }
button { border:0; border-radius:6px; padding:11px 16px; color:white; background:var(--blue); font:inherit; font-weight:700; cursor:pointer; }
.secondary { background:var(--raised); border:1px solid var(--line); }
.header-actions { display:flex; align-items:center; gap:10px; }
.eyebrow { color:#7fb0ff; text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:800; }
.muted { color:var(--muted); }
main { width:min(1280px, calc(100% - 40px)); margin:0 auto; padding:34px 0 60px; }
.demo-studio { margin-bottom:34px; padding:24px; border:1px solid #244886; border-radius:8px; background:linear-gradient(145deg,rgba(18,103,255,.13),rgba(11,18,32,.96) 55%); }
.studio-heading { margin:0 0 18px; }
.persona-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.persona { display:flex; min-height:142px; flex-direction:column; align-items:flex-start; padding:16px; border:1px solid var(--line); border-radius:6px; background:rgba(7,11,18,.66); color:var(--text); transition:transform .16s ease,border-color .16s ease,background .16s ease; }
.persona:hover { transform:translateY(-2px); border-color:#397fff; background:rgba(17,27,44,.96); }
.persona strong { font-size:16px; }.persona span { margin:6px 0 16px; color:var(--muted); font-size:13px; }.persona b { margin-top:auto; color:#7fb0ff; font-size:12px; }
.summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--line); border-radius:8px; background:var(--surface); overflow:hidden; }
.summary .metric { border-right:1px solid var(--line); padding:22px; } .summary .metric:last-child { border:0; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin:42px 0 18px; }
.instance-grid { display:grid; gap:16px; }
.instance-card { border:1px solid var(--line); border-radius:8px; padding:24px; background:var(--surface); box-shadow:0 18px 50px rgba(0,0,0,.15); }
.instance-top { display:flex; justify-content:space-between; gap:20px; }
.status { display:inline-flex; align-items:center; gap:7px; padding:4px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:.08em; font-size:10px; font-weight:800; }
.status::before { content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.status.online { color:var(--green); background:rgba(61,220,151,.1); } .status.offline { color:var(--red); background:rgba(255,107,119,.1); }
.version { color:var(--muted); font-family:ui-monospace,monospace; }
.metrics-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:1px; margin:24px 0; background:var(--line); border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.metric { display:flex; flex-direction:column; min-width:0; padding:16px; background:var(--raised); }
.metric span,.metric small { color:var(--muted); } .metric strong { margin:3px 0; font-size:25px; line-height:1.2; } .metric small { font-size:12px; }
.instance-foot { display:flex; flex-wrap:wrap; gap:10px 28px; color:var(--muted); font-size:12px; }
.empty { padding:50px; text-align:center; border:1px dashed var(--line); border-radius:8px; color:var(--muted); }
.error { color:var(--red); }
.login-page { display:grid; place-items:center; padding:20px; background:radial-gradient(circle at 50% 20%,#102449 0,var(--bg) 45%); }
.login-shell { width:min(420px,100%); padding:34px; border:1px solid var(--line); border-radius:8px; background:rgba(11,18,32,.94); box-shadow:0 28px 90px rgba(0,0,0,.45); }
.mark { display:grid; place-items:center; width:44px; height:44px; margin-bottom:24px; border-radius:8px; background:var(--blue); font-weight:900; }
.login-shell h1 { margin:6px 0; font-size:28px; }
.login-form { display:grid; gap:16px; margin-top:28px; }
label { display:grid; gap:7px; color:#cbd7e6; font-weight:700; }
input { width:100%; border:1px solid var(--line); border-radius:6px; padding:12px; background:var(--raised); color:white; font:inherit; outline:none; }
input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(18,103,255,.18); }
.login-form button { margin-top:4px; }
@media(max-width:900px){ .persona-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.summary{grid-template-columns:1fr}.summary .metric{border-right:0;border-bottom:1px solid var(--line)}.summary .metric:last-child{border:0}.section-heading{align-items:start;flex-direction:column}.header-actions .muted{display:none} }
@media(max-width:600px){ header{align-items:flex-start;flex-direction:column}.header-actions{width:100%}.header-actions button{flex:1}main{width:min(100% - 24px,1280px);padding-top:20px}.demo-studio{padding:16px}.persona-grid{grid-template-columns:1fr}.instance-card{padding:16px}.metrics-grid{grid-template-columns:1fr 1fr}.instance-foot{display:grid}.login-shell{padding:26px} }