:root { color-scheme: dark; --bg:#0b0b0c; --panel:#131315; --panel2:#18181b; --line:#29292e; --text:#f5f5f3; --muted:#929299; --accent:#ff3b30; --green:#2fd071; --amber:#ffb020; --radius:22px; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--text); }
body { min-height:100dvh; }
button,input,select { font:inherit; }
button { cursor:pointer; }
button:disabled,input:disabled,select:disabled { cursor:not-allowed; opacity:.48; }
.app-shell { width:min(1240px, calc(100% - 40px)); margin:0 auto; padding:42px 0 max(64px, env(safe-area-inset-bottom)); }
.topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:42px; }
.eyebrow { font-size:11px; letter-spacing:.17em; font-weight:800; color:var(--muted); }
h1 { font-size:clamp(42px, 7vw, 88px); line-height:.91; letter-spacing:-.055em; margin:10px 0 0; max-width:900px; }
h1 span { color:#77777f; } h2 { margin:6px 0 0; font-size:28px; letter-spacing:-.03em; } h3 { margin:0 0 6px; }
.top-actions { display:flex; align-items:center; gap:10px; }
.connection-badge { display:flex; align-items:center; gap:8px; padding:10px 13px; border:1px solid var(--line); border-radius:999px; font-size:13px; color:var(--muted); background:#111113; }
.connection-badge i { width:8px; height:8px; border-radius:50%; background:var(--muted); box-shadow:0 0 0 4px #222226; }
.connection-badge.online { color:#c8f6d8; border-color:#244b33; background:#102318; }.connection-badge.online i{background:var(--green);box-shadow:0 0 0 4px #1b472c}.connection-badge.reconnecting{color:#ffdf9d}.connection-badge.reconnecting i{background:var(--amber)}
.icon-button,.text-button { border:1px solid var(--line); color:var(--text); background:var(--panel); border-radius:12px; min-width:42px; height:42px; }
.text-button { padding:0 14px; color:var(--muted); }.icon-button:hover,.text-button:hover{background:var(--panel2)}
.hidden { display:none !important; }
.setup-card { display:grid; grid-template-columns:1fr 1fr; gap:44px; background:linear-gradient(145deg,#151517,#101012); border:1px solid var(--line); padding:34px; border-radius:var(--radius); }
.setup-copy p,.muted { color:var(--muted); line-height:1.6; }
.muted.compact { margin:0; font-size:13px; }
.stack-form, .dialog-card { display:grid; gap:18px; }
label { display:grid; gap:8px; color:#c8c8cc; font-size:13px; font-weight:650; }
input,select { width:100%; border:1px solid #34343a; background:#0f0f11; color:var(--text); border-radius:12px; padding:13px 14px; outline:none; }
input:focus,select:focus{border-color:#666670;box-shadow:0 0 0 3px #ffffff0d}
.primary,.secondary,.danger-button { border:0; border-radius:12px; padding:12px 16px; font-weight:800; }
.primary { background:var(--text); color:#080809; }.primary:hover{background:#ddd}.secondary { background:#242428; color:var(--text); border:1px solid #323238; }.danger-button{background:#371615;color:#ffafa9;border:1px solid #642421}
.summary-row { display:grid; grid-template-columns:130px 180px minmax(180px,1fr) auto; gap:12px; align-items:stretch; margin-bottom:56px; }
.summary-row>div:not(.summary-actions){padding:18px 20px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}
.metric-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:750}.metric{font-size:34px;font-weight:850;margin-top:6px;letter-spacing:-.04em}.metric.small{font-size:17px;margin-top:13px}.metric.danger{color:#ff665e}
.summary-actions{display:flex;gap:10px;align-items:center;padding-left:10px}
.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:18px; }
.device-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.device-card { position:relative; min-height:196px; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; overflow:hidden; cursor:pointer; transition:transform .16s ease,border-color .16s ease,background .16s ease; }
.device-card:hover,.device-card:focus-visible { transform:translateY(-2px); border-color:#46464d; outline:none; }
.device-card.active { border-color:#5a2421; background:linear-gradient(145deg,#221111,#151315); }
.device-card.active:hover,.device-card.active:focus-visible { border-color:#7a302b; }
.device-status { font-size:38px; font-weight:900; letter-spacing:-.04em; margin:30px 0 8px; }.device-card.active .device-status{color:#ff554d}.device-name{font-weight:800;font-size:16px}.device-meta{color:var(--muted);font-size:12px}.device-top{display:flex;justify-content:space-between;gap:10px}.state-dot{width:11px;height:11px;border-radius:50%;background:#4b4b52;box-shadow:0 0 0 5px #28282d}.active .state-dot{background:var(--accent);box-shadow:0 0 0 5px #52221f}.inactive .state-dot{background:var(--green);box-shadow:0 0 0 5px #1c472c}
.device-card .device-actions{position:absolute;right:15px;bottom:15px}.device-card .mini{border:1px solid var(--line);background:#111113;color:var(--muted);border-radius:9px;padding:7px 11px}.device-card .mini:hover{color:var(--text);background:#1d1d21}
.empty-state{padding:50px;text-align:center;border:1px dashed #333338;border-radius:var(--radius);color:var(--muted)}
.events-section{margin-top:52px}.event-list{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel)}.event-row{display:grid;grid-template-columns:1.2fr .7fr 1fr;gap:16px;padding:15px 18px;border-bottom:1px solid var(--line);font-size:13px}.event-row:last-child{border-bottom:0}.event-row .event-state{font-weight:850}.event-row .event-time,.event-row .event-meta{color:var(--muted)}
dialog{width:min(560px,calc(100% - 28px));padding:0;border:1px solid #33333a;border-radius:24px;background:#121214;color:var(--text);box-shadow:0 30px 100px #000b}dialog::backdrop{background:#000a;backdrop-filter:blur(8px)}.dialog-card{padding:26px}.dialog-card.wide{width:auto}.dialog-header{display:flex;justify-content:space-between;align-items:flex-start}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}pre{white-space:pre-wrap;word-break:break-word;background:#09090a;border:1px solid #2b2b30;border-radius:14px;padding:16px;color:#d4d4d8;max-height:280px;overflow:auto}
.sensor-editor{max-height:min(88dvh,900px);overflow:auto}.settings-panel{display:grid;gap:15px;padding:18px;border:1px solid #2f2f35;border-radius:16px;background:#101012}.settings-panel .eyebrow{margin-bottom:-3px}.panel-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.panel-title-row h3{font-size:18px;margin:3px 0 0}.field-help{font-weight:500;color:var(--muted);font-size:12px;line-height:1.45}.field-help code{color:#d8d8dd}.switch-row{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid #313137;border-radius:12px;background:#0d0d0f;font-weight:650}.switch-row input{width:18px;height:18px;margin:0;accent-color:#f5f5f3}.switch-row span{line-height:1.25}.compact-switch{padding:9px 11px;white-space:nowrap}.trigger-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.inline-actions{display:flex;justify-content:flex-start;margin-top:-7px}.small-button{padding:8px 11px;font-size:12px}.disabled-panel{opacity:.58}.disabled-panel .field-help{opacity:.9}
.advanced-panel{margin-top:8px;padding:18px;border:1px solid #323238;border-radius:16px;background:#0d0d0f;display:grid;gap:9px}.advanced-panel h3{margin:2px 0 0;font-size:17px}.advanced-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}.advanced-actions .danger-button{margin-left:auto}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#efefed;color:#080809;border-radius:12px;padding:11px 15px;font-weight:800;font-size:13px;box-shadow:0 15px 45px #0008;z-index:30;max-width:min(90vw,680px);text-align:center}
@media(max-width:900px){.device-grid{grid-template-columns:repeat(2,1fr)}.summary-row{grid-template-columns:1fr 1fr}.summary-actions{grid-column:1/-1;padding:6px 0 0}.setup-card{grid-template-columns:1fr}}
@media(max-width:600px){.app-shell{width:min(100% - 24px,1240px);padding-top:24px}.topbar{margin-bottom:28px}.top-actions{flex-direction:column;align-items:flex-end}.connection-badge{padding:8px 10px}.device-grid{grid-template-columns:1fr}.summary-row{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:42px}.summary-row>div:not(.summary-actions){padding:15px}.summary-actions{display:grid;grid-template-columns:1fr 1fr}.event-row{grid-template-columns:1fr auto}.event-meta{display:none}.two-col,.trigger-grid{grid-template-columns:1fr}.panel-title-row{align-items:center}.advanced-actions{display:grid;grid-template-columns:1fr}.advanced-actions .danger-button{margin-left:0}h2{font-size:24px}}