:root { color-scheme:dark; --bg:#0a1013; --panel:#121b20; --panel2:#18242a; --line:#2a3941; --text:#eff4f5; --muted:#91a3ab; --accent:#f2a53b; --good:#62d18c; --blue:#79aee8; --danger:#ef6d5f; font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
* { box-sizing:border-box; } [hidden] { display:none!important; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 80% 0,#17282e 0,var(--bg) 38rem); color:var(--text); }
.login-page { display:grid;place-items:center; }.login-main { width:100%; }.login-card { width:min(430px,calc(100% - 24px));margin:auto;padding:30px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,var(--panel2),var(--panel));box-shadow:0 25px 90px #0008; }.login-card h1 { margin-bottom:8px; }.login-intro { margin-bottom:24px;color:var(--muted); }.login-card label { display:grid;gap:7px;margin-top:14px;color:var(--muted);font-size:.8rem; }.login-submit { width:100%;margin-top:20px;padding:12px; }.login-error { min-height:1.3em;margin-top:12px;color:var(--danger);font-size:.85rem; }
.viewer-mode .admin-control { opacity:.55;pointer-events:none; }.viewer-note { color:var(--blue);font-size:.78rem; }
.delete-user { border:1px solid #ef6d5f66;color:var(--danger); }.delete-user:hover { color:white;background:var(--danger); }
header,main,footer { width:min(1500px,calc(100% - 40px)); margin-inline:auto; }
header { display:flex; justify-content:space-between; align-items:center; padding:30px 0 24px; border-bottom:1px solid var(--line); }
h1,h2,p { margin:0; } h1 { font-size:clamp(2rem,4vw,3.3rem); letter-spacing:-.05em; } h2 { font-size:clamp(1.8rem,3vw,2.5rem); }
.eyebrow,.section-label { margin-bottom:7px; color:var(--accent); font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.header-tools { display:grid; justify-items:end; gap:12px; } nav { display:flex; gap:4px; padding:4px; border:1px solid var(--line); border-radius:10px; }
button { border:0; border-radius:7px; padding:9px 13px; color:var(--muted); background:transparent; cursor:pointer; font:inherit; } button:hover,button:focus-visible { color:var(--text); outline:none; }
.nav-button.active,.save { color:#17110a; background:var(--accent); font-weight:750; }
.alarm-count { display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:4px;padding:0 5px;border-radius:99px;background:var(--danger);color:white;font-size:.7rem;font-weight:800; }
.connection { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.86rem; }.connection span { width:9px;height:9px;border-radius:50%;background:var(--muted); }.connection.online span { background:var(--good);box-shadow:0 0 0 5px #62d18c20; }.connection.offline span { background:var(--danger); }
.server-status { display:grid;gap:7px;justify-items:start;min-width:210px; }
.page-heading { padding:34px 0 22px; }.page-heading>p:last-child,#updated { margin-top:7px;color:var(--muted); }.dashboard-heading { display:flex;align-items:end;justify-content:space-between;gap:20px; }
.environment { display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px; }.environment-card { display:grid;gap:6px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(145deg,var(--panel2),var(--panel)); }.environment-card>span { color:var(--muted);font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em; }.environment-card strong { color:var(--blue);font-size:1.55rem; }.environment-card small { color:var(--muted); }.environment-card.missing { opacity:.62; }
.beds { display:grid;gap:14px; }.bed { padding:20px;border:1px solid var(--line);border-left:5px solid #58676e;border-radius:14px;background:linear-gradient(145deg,var(--panel2),var(--panel)); }.bed.active { border-left-color:var(--accent); }.bed.ready { border-color:var(--good);border-left-width:5px;box-shadow:inset 0 0 30px #62d18c09; }
.bed-top,.bed-meta,.sensor-head,.sensor-values { display:flex;justify-content:space-between;align-items:center;gap:12px; }.bed-number { font-size:1.45rem;font-weight:750; }.status-pill { display:inline-block;margin-top:5px;padding:3px 7px;border-radius:99px;background:#ffffff0b;color:var(--muted);font-size:.68rem;font-weight:800;letter-spacing:.07em; }.active .status-pill { color:var(--accent); }.ready .status-pill { color:#092113;background:var(--good); }
.pour-toggle { display:flex;align-items:center;gap:9px;padding:11px 16px;border:1px solid var(--line);background:#0b1114;color:var(--text);font-weight:700; }.pour-toggle span { width:13px;height:13px;border-radius:3px;background:#52626a; }.pour-toggle.on span { background:var(--good);box-shadow:0 0 0 5px #62d18c18; }
.bed-meta { justify-content:flex-start;margin:16px 0; padding:12px 0;border-block:1px solid var(--line); }.bed-meta label { min-width:260px; }.bed-meta>div { min-width:180px; }.bed-meta span,.bed-meta label,.sensor-values span { display:block;color:var(--muted);font-size:.72rem; }.bed-meta strong { display:block;margin-top:4px;font-size:.87rem; }
.release-forecast strong { color:var(--accent);font-size:1rem; }.ready .release-forecast strong { color:var(--good); }
.bed-sensors { display:grid;grid-template-columns:repeat(3,1fr);gap:10px; }.maturity-sensor { padding:14px;border:1px solid var(--line);border-radius:10px;background:#0d1418; }.maturity-sensor.missing { opacity:.62; }.sensor-head span { color:var(--muted);font-size:.75rem; }.sensor-values { margin:13px 0 10px; }.sensor-values strong { display:block;margin-top:3px;font-size:1.25rem; }.progress { height:9px;overflow:hidden;border-radius:99px;background:#293941; }.progress i { display:block;height:100%;background:linear-gradient(90deg,var(--accent),#f5cc53); }.ready .progress i { background:var(--good); }.maturity-sensor>p { margin-top:6px;color:var(--muted);font-size:.7rem;text-align:right; }
.settings-menu { display:grid;gap:12px; }.settings-link { width:100%;display:flex;justify-content:space-between;align-items:center;padding:22px;color:var(--text);text-align:left;border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,var(--panel2),var(--panel)); }.settings-link:hover { border-color:var(--accent); }.settings-link strong,.settings-link small { display:block; }.settings-link small { margin-top:5px;color:var(--muted); }.settings-link>span:last-child { color:var(--accent);font-size:1.5rem; }.back-button { padding:0;margin-bottom:22px;color:var(--accent); }
.table-wrap { overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#10181c; } table { width:100%;min-width:900px;border-collapse:collapse; } th { padding:12px 10px;color:var(--muted);font-size:.7rem;text-align:left;text-transform:uppercase;letter-spacing:.08em;background:#0b1114; } td { padding:10px;border-top:1px solid var(--line); }.serial { color:var(--accent);font-weight:750;font-variant-numeric:tabular-nums; }.recipe-table { max-width:800px; }.recipe-table table { min-width:600px; }
.measurements-table table { min-width:1100px; }.measurements-table td { padding-block:14px; }.measurement-value { color:var(--text);font-size:1.05rem;font-weight:750; }.role-badge { display:inline-grid;place-items:center;min-width:28px;padding:4px 8px;border:1px solid var(--line);border-radius:6px;color:var(--accent);font-weight:800;background:#0b1114; }#measurements-updated { color:var(--muted);font-size:.82rem; }
input,select { width:100%;min-width:90px;padding:10px;border:1px solid var(--line);border-radius:7px;background:#0b1114;color:var(--text);font:inherit; } input:focus,select:focus { outline:1px solid var(--accent);border-color:var(--accent); } select:disabled { opacity:.65; }.empty-row { padding:25px;text-align:center;color:var(--muted); }
.new-recipe { display:grid;grid-template-columns:2fr 1fr auto;gap:12px;align-items:end;max-width:800px;margin-top:18px;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--panel); }.new-recipe label { display:grid;gap:6px;color:var(--muted);font-size:.76rem; }.form-status,.formula { min-height:1.2em;margin-top:10px;color:var(--good);font-size:.82rem; }.formula { color:var(--muted); }
footer { padding:28px 0 40px;color:#718188;font-size:.78rem; }
.alarm-table table { min-width:900px; }.alarm-state { display:inline-block;padding:4px 7px;border-radius:99px;font-size:.68rem;font-weight:800; }.alarm-state.active { color:white;background:var(--danger); }.alarm-state.cleared { color:#092113;background:var(--good); }
.alarm-modal { position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:#05090bd9;backdrop-filter:blur(4px); }.alarm-dialog { width:min(620px,100%);max-height:85vh;overflow:auto;padding:26px;border:2px solid var(--danger);border-radius:16px;background:var(--panel);box-shadow:0 20px 80px #000; }.alarm-dialog h2 { margin-bottom:18px; }.alarm-message { margin-top:10px;padding:14px;border-left:4px solid var(--danger);border-radius:8px;background:#ef6d5f12; }.alarm-message p { margin:5px 0; }.alarm-message small { color:var(--muted); }.alarm-actions { display:flex;justify-content:flex-end;gap:8px;margin-top:20px; }.dismiss-alarm { border:1px solid var(--line);color:var(--text); }
@media (max-width:800px) { header { align-items:flex-start;gap:12px; }.header-tools { gap:8px; }.dashboard-heading { align-items:flex-start;flex-direction:column; }.environment { grid-template-columns:1fr; }.bed-meta { align-items:stretch;flex-direction:column; }.bed-meta label,.bed-meta>div { min-width:0; }.bed-sensors { grid-template-columns:1fr; }.new-recipe { grid-template-columns:1fr; } }
@media (max-width:520px) { header,main,footer { width:min(100% - 24px,1500px); } header { flex-direction:column; }.header-tools { width:100%;justify-items:stretch; }.header-tools nav { justify-content:space-between; }.header-tools nav button { flex:1; }.connection { justify-content:flex-end; }.bed { padding:14px; }.bed-top { align-items:flex-start; }.pour-toggle { padding:9px; } }