/* SmartReef Ocean · Bootstrap 5 foundation, offline assets. */
:root{--bs-primary:#176cf0;--bs-body-font-family:Inter,"Segoe UI",system-ui,sans-serif;--bs-body-color:#17345a;--bs-border-color:#dce7f4;--ink:#102d50;--muted:#647c99;--border:#e0e9f4;--accent:#176cf0;--ocean:#176cf0;--deep:#082954}
body{background:#f3f7fc;color:var(--ink);font-family:var(--bs-body-font-family);line-height:1.55}
aside{width:238px;background:linear-gradient(165deg,#102f60,#071e41 78%);padding:35px 22px;border-right:1px solid #ffffff12}
.brand{font-size:26px;letter-spacing:-1.1px;font-weight:750;color:#fff;text-decoration:none;gap:9px}.brand-mark{display:grid;place-items:center;background:#ffffff16;color:#88d8ff;width:34px;height:34px;border:1px solid #ffffff2a;border-radius:12px;font-size:22px}.environment{color:#a1bedf;letter-spacing:1.8px;font-size:9px;margin-top:15px}
nav{margin-top:42px}.nav-item{border-radius:12px;color:#a8bfdf;min-height:49px;margin:5px 0;font-size:13px;font-weight:550;transition:background .16s,color .16s}.nav-item:hover{background:#ffffff10;color:#fff}.nav-item.active{background:#256fe8;color:#fff;box-shadow:0 7px 20px #0002}.nav-item span{opacity:.9}.aside-note{color:#a8bfdf;border-top:1px solid #ffffff17;padding-top:22px}.aside-note small{color:#7896bd}.status-dot{background:#60d3f7;box-shadow:0 0 0 4px #60d3f713}
main{margin-left:238px;padding:38px 38px 20px;max-width:1800px}.page-header{margin-bottom:28px}.eyebrow{color:#4084cd;letter-spacing:1.8px;font-size:10px;font-weight:750}h1{font-size:34px;font-weight:730;letter-spacing:-1.1px;color:#102d50;margin-top:7px}h2{font-size:18px;letter-spacing:-.3px;font-weight:700;color:#17395f}h3{color:#17395f}.muted,small{color:var(--muted)}.page-header p{font-size:13px}.account{font-size:11px;color:#69809e;gap:14px}
.toolbar{background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px 20px;margin-bottom:24px;box-shadow:0 3px 12px #12366b03}.toolbar label{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#8093ac}.toolbar select{font-size:13px;border:0;background:#f3f7fd;border-radius:9px;min-width:230px;color:#21446c;padding:10px 14px;margin-top:5px}.sync-group{font-size:10px;gap:12px}
.card{border:1px solid #e0e9f4;background:#fff;border-radius:18px;box-shadow:0 4px 22px #153f7004;padding:25px;margin-bottom:22px;display:block}.section-title{gap:12px}.overview-grid{grid-template-columns:1fr 1.55fr;gap:22px}.temperature-hero{position:relative;overflow:hidden;background:linear-gradient(145deg,#103c7b,#176ed8 72%,#2497df);border:0;color:#fff;box-shadow:0 12px 28px #176cf01c}.temperature-hero:after{content:"";position:absolute;right:-70px;bottom:-185px;width:430px;height:300px;border-radius:48%;border:42px solid #ffffff07;transform:rotate(-20deg);pointer-events:none}.temperature-hero label{font-size:10px;color:#b5d6ff}.temperature-hero select{color:#fff;background:#ffffff13;border:1px solid #ffffff2e;border-radius:10px;padding:10px;font-size:12px}.temperature-hero option{color:#163b64;background:white}.temperature-hero .eyebrow{color:#b8dfff}.temperature-hero .badge{background:#ffffff18;color:#e4f8ff;border:1px solid #ffffff28}.temperature-hero .hero-reading>span:first-child{font-weight:650;font-size:70px;letter-spacing:-3px}.temperature-hero .unit{color:#abdfff}.temperature-hero .muted,.temperature-hero .hero-footer{color:#badcff}.temperature-hero .text-button{color:#fff}.hero-footer{border-color:#ffffff24;position:relative;z-index:1}.trend-card h2{font-size:18px}.trend-summary{color:#7189a6;font-size:11px}.chart-empty{border-color:#dce8f6}.temperature-hero .hero-reading{margin-top:30px}
.metrics-grid{gap:22px}.metric{position:relative;padding:24px}.metric-label{font-size:12px;color:#6c83a1}.metric strong{font-size:35px;letter-spacing:-1px;font-weight:650;color:#183b68;margin:13px 0 8px}.metric small{font-size:11px;color:#7a8fa8}.text-button{color:#176cf0;font-size:11px;font-weight:650}.metric .text-button{margin-top:18px}.module-summary{border-top:1px solid #edf2f9;padding-top:16px;margin-top:15px}.module-summary strong{font-size:13px;color:#25476f}.module-summary small{font-size:10px}.badge{font-size:10px;font-weight:600;background:#f0f5fc;color:#6682a4;padding:5px 10px}.badge.online{background:#eaf7f4;color:#208776}.badge.warning{background:#fff5df;color:#946b20}.badge.offline{background:#fff0f0;color:#bc5360}
button,.quiet{border-radius:10px;border-color:#d7e3f3;color:#365a83;font-weight:600;font-size:12px;padding:10px 15px;transition:background .15s,box-shadow .15s}button:hover{background:#edf4ff;border-color:#bad0ef}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #82b9ff;outline-offset:3px}button:disabled{opacity:.48;cursor:not-allowed}.primary,button[type=submit]{background:#176cf0;border-color:#176cf0;color:#fff;box-shadow:0 4px 10px #176cf016}.primary:hover,button[type=submit]:hover{background:#125bcf;color:white}.text-button{box-shadow:none;border:0;background:none}.text-button:hover{background:#edf4ff;color:#125bcf}
label{font-size:12px;font-weight:550;color:#4d6a8c}input:not([type=checkbox]),select{border:1px solid #dbe5f2;background:#fbfdff;border-radius:10px;padding:11px 12px;color:#1d426e;font-size:13px}input[type=checkbox]{accent-color:#176cf0}.rule-step{padding:16px 0;margin-top:16px}.step-number{background:#eaf2ff;color:#176cf0;border:1px solid #dceaff}.advanced{background:#f7faff;border:1px solid #e1ebf9;border-radius:12px}.connection-path{background:#eef5ff;color:#34639b}.information{background:#f0f6ff;border-color:#dceaff}.information p{color:#557799}details.card>summary{list-style:none;position:relative;padding-right:32px;color:#244b7b;font-size:14px}details.card>summary:after{content:"+";position:absolute;right:0;top:-4px;background:#edf4ff;border-radius:8px;color:#3c77c4;width:25px;height:25px;text-align:center;font-size:18px}details.card[open]>summary:after{content:"−"}details.card[open]>summary{margin-bottom:24px}details>summary::-webkit-details-marker{display:none}
.outlet-grid{gap:18px}.outlet{padding:22px;background:#fff;border:1px solid #dfe9f6;border-radius:16px;box-shadow:0 4px 14px #143e6903}.outlet-top h3{font-size:16px;font-weight:700;margin:2px 0 15px;line-height:1.35}.outlet-number{background:#f0f6ff;border:0;border-radius:9px;color:#5c83b5;font-weight:650;width:29px;height:29px}.outlet .physical{font-size:22px;color:#8295ad;font-weight:650}.outlet .physical.is-on{color:#176cf0}.outlet p{font-size:11px;color:#7790ad}.outlet .controls{display:flex;flex-direction:column;background:none;gap:13px;margin-top:20px;padding:16px 0 0;border-top:1px solid #edf2f9;border-radius:0}.outlet-auto{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:600;color:#315e91;cursor:pointer}.outlet-auto input{width:17px;height:17px;margin:0;accent-color:#176cf0}.outlet-switch-label{display:flex;align-items:center;justify-content:space-between;gap:9px;font-size:11px;color:#6783a5}.outlet-switch-label input[role=switch]{appearance:none;-webkit-appearance:none;position:relative;width:48px;height:27px;flex:none;background:#cfdaea;border:0;border-radius:20px;cursor:pointer;transition:background .18s;margin:0}.outlet-switch-label input[role=switch]:before{content:"";position:absolute;top:4px;left:4px;width:19px;height:19px;background:white;border-radius:50%;box-shadow:0 2px 5px #1234;transition:transform .18s}.outlet-switch-label input[role=switch]:checked{background:#176cf0}.outlet-switch-label input[role=switch]:checked:before{transform:translateX(21px)}.outlet-switch-label input:disabled{opacity:.38;cursor:not-allowed}.outlet-mode-hint{font-size:10px;color:#8a9db7}.outlet-pending{font-size:10px;color:#6382a7;min-height:16px}
.auth{background:#fff;border:1px solid #dfe9f6;border-radius:24px;padding:38px;box-shadow:0 14px 70px #13386808}.auth h1{font-size:46px;line-height:1.08;letter-spacing:-1.9px}.tabs button.active{color:#176cf0;border-color:#176cf0}.auth .tabs{margin:30px 0 22px}.auth .primary{width:100%;margin-top:8px}#notice{position:static;border-radius:12px;font-size:12px;box-shadow:none}#notice[data-kind=success]{background:#eaf5ff;border-color:#d3e8ff;color:#336a9f}.grid .value{color:#176cf0}footer{color:#97a8bc;font-size:10px;border-color:#dfe8f4}dialog{border:1px solid #dce7f6;border-radius:20px;box-shadow:0 24px 100px #0b2b5b44;color:#183e69;padding:28px}dialog::backdrop{background:#09244966;backdrop-filter:blur(4px)}
@media(min-width:1500px){main{padding:40px 48px}.outlet-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1120px){aside{width:205px;padding:28px 18px}main{margin-left:205px;padding:28px 24px}.overview-grid{grid-template-columns:1fr 1.25fr;gap:16px}.temperature-hero .hero-reading>span:first-child{font-size:58px}.card{padding:22px}.metrics-grid{gap:16px}}
@media(max-width:800px){aside{width:100%;padding:15px 18px 0;border:0;background:#0b2b5b;box-shadow:0 4px 16px #0a254016}.brand{font-size:22px}.environment{font-size:8px;margin-top:12px}nav{margin:15px -7px 0;padding-bottom:10px;gap:5px}.nav-item{margin:0;font-size:11px;min-height:38px;border-radius:9px}.nav-item.active{box-shadow:none}main{margin:0;padding:25px 18px}.page-header{margin-bottom:20px}h1{font-size:30px}.toolbar{padding:12px 14px;border-radius:12px}.toolbar select{min-width:160px;max-width:200px}.card{border-radius:15px;padding:20px}.overview-grid{grid-template-columns:1fr}.temperature-hero .hero-reading>span:first-child{font-size:68px}.metrics-grid{gap:10px}.metric{padding:15px}.metric strong{font-size:28px}.metric small{font-size:10px}.metric .text-button{font-size:10px}.auth{padding:28px;margin:25px auto}.outlet{padding:18px}.outlet-grid{gap:12px}.outlet-top h3{font-size:14px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.rule-library-toolbar{display:flex;gap:16px;align-items:end;margin:24px 0}.rule-library-toolbar label:first-child{flex:1}.rule-library-toolbar label:last-child{flex:1.5}.rule-library-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.automation-card{border:1px solid #dce8f8;border-radius:15px;padding:20px;background:linear-gradient(155deg,#fff,#f9fbff)}.automation-card .eyebrow{font-size:9px;letter-spacing:1px}.automation-flow{padding:22px 0 18px}.automation-flow>small{font-size:9px;letter-spacing:1.5px;color:#7d96b5;font-weight:700}.automation-flow h3{font-size:17px;line-height:1.5;margin:5px 0 8px}.automation-flow p{font-size:13px;color:#315e91;font-weight:600;margin:6px 0 0}.automation-arrow{display:block;color:#8bb7ed;font-size:20px;margin:4px 0}.automation-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #e9eff8;padding-top:12px;gap:10px}.automation-footer small{font-size:10px}#rule-library-status{font-size:11px;margin:18px 0 0}.action-row{grid-template-columns:1.3fr 1fr 1fr;padding:12px;background:#f8fbff;border:1px solid #e1ebf8;border-radius:10px;margin:8px 0}.form-footer{background:#f5f9ff;border:1px solid #e2edfb;border-radius:12px;padding:18px}.rule-step h3{font-size:19px}.rule-library>.section-title{align-items:center}@media(max-width:800px){.rule-library-toolbar{flex-direction:column;align-items:stretch}.rule-library-grid{grid-template-columns:1fr}.rule-library>.section-title{align-items:flex-start;flex-direction:column}.rule-library #rule-new{width:100%}.action-row{grid-template-columns:1fr 1fr}.automation-card{padding:18px}}

#rule-source-label,#rule-sensor-label{display:none}#rule-editor-panel{scroll-margin-top:20px}

.outlet-device{display:block;font-size:10px;color:#8a9fba;margin:-8px 0 13px}.grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}

.automation-flow>.automation-source{display:block;font-size:10px;letter-spacing:0;font-weight:400;color:#718cab;margin-bottom:8px}

.firmware-maintenance{border:1px solid #cfe2ff;background:#eaf3ff;color:#28578e;border-radius:12px;padding:15px 18px;font-size:12px;margin-bottom:22px}.outlet-mode-hint{color:#617b9a}footer{color:#617b9a}

.aquarium-heading{display:flex;flex-direction:column;gap:4px;margin-bottom:22px}.aquarium-heading strong{font-size:26px;color:#164d8e;letter-spacing:-.7px}.aquarium-picker select{border-color:#8dbcf4;background:#edf6ff}.aquarium-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:22px 0}.aquarium-mini{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:16px;background:linear-gradient(135deg,#f0f8ff,#e5f1ff);border:1px solid #d1e5fb}.aquarium-mini strong{font-size:19px;color:#185698}.automation-naming{display:flex;align-items:end;gap:12px;margin-bottom:24px}.automation-naming label{flex:1}#second-condition{padding:18px;background:#eef6ff;border-radius:14px;margin-top:15px}#recovery-codes{white-space:pre-wrap;overflow-wrap:anywhere}#recover-account{max-width:600px;margin:20px auto}body:has(#dashboard:not([hidden])) #recover-account{display:none}

.toolbar{position:sticky;top:10px;z-index:8;box-shadow:0 8px 30px #16395809}.aquarium-heading strong{overflow-wrap:anywhere}.settings-group>summary{font-size:16px;color:#214d7d}.settings-group[open]>summary{margin-bottom:24px}.settings-group .card{box-shadow:none}#aquarium-create-details[open],#assignment-form{margin-top:16px}

/* Water-quality workspace: stable cards, spacious controls and a responsive plot. */
.reef-dashboard{background:linear-gradient(150deg,#ffffff 35%,#edf7ff);border:1px solid #dceafa;overflow:hidden}.parameter-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:22px 0}.parameter-card{display:flex;flex-direction:column;align-items:start;gap:8px;text-align:left;border:1px solid #dce8f5;border-radius:16px;padding:16px 12px;background:#fff;color:#315273;box-shadow:none;min-width:0}.parameter-card span{font-size:12px;font-weight:600}.parameter-card strong{font-size:24px;letter-spacing:-1px}.parameter-card small{font-size:10px;font-weight:400;color:#69829b;line-height:1.5}.parameter-card.selected{border-color:#297be8;background:#e9f3ff;box-shadow:0 0 0 2px #297be81a}.parameter-controls{display:grid;grid-template-columns:1fr 1.4fr 1fr auto;align-items:end;gap:12px;margin:16px 0}.parameter-controls label{margin:0}.parameter-stats{display:flex;gap:32px;margin:24px 0 10px}.parameter-stats>div{display:flex;flex-direction:column;gap:5px}.parameter-stats small{color:#6885a3}.parameter-stats strong{font-size:20px;color:#184a80}.parameter-chart{min-height:200px}.parameter-chart:empty{min-height:60px;background:repeating-linear-gradient(0deg,transparent,transparent 29px,#e3edf7 30px);border-radius:14px}.parameter-chart svg{width:100%;height:auto;touch-action:pan-y;overflow:visible}.parameter-chart text{font-size:11px;fill:#6884a0}.parameter-grid{stroke:#dce8f4;stroke-width:1}.parameter-band{fill:#3d9aff;opacity:.16}.parameter-line{fill:none;stroke:#2478e4;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.parameter-dot{fill:#2478e4}.parameter-cross{stroke:#709cc7;stroke-dasharray:4 4;stroke-width:1}.parameter-reading{font-size:12px;min-height:22px;color:#385f86}.parameter-scrubber{font-size:11px;color:#6885a3}.parameter-scrubber input{display:block;width:100%;padding:0;accent-color:#297be8}.reef-dashboard .section-title:last-child{align-items:center;gap:16px}.reef-dashboard .section-title:last-child p{margin:0;font-size:11px}.view{animation:reef-arrive .18s ease-out}@keyframes reef-arrive{from{opacity:.6;transform:translateY(3px)}to{opacity:1;transform:none}}button,input,select{transition:border-color .15s,box-shadow .15s,background-color .15s}button:focus-visible{outline:3px solid #72b7ff;outline-offset:3px}.parameter-card:hover{border-color:#73aaf0;background:#f4f9ff}.parameter-card.selected:hover{background:#e9f3ff}
@media(max-width:800px){.parameter-controls{grid-template-columns:1fr 1fr}.parameter-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.parameter-stats{gap:20px}.parameter-stats strong{font-size:16px}.toolbar{position:static}.reef-dashboard{padding:18px}.parameter-card{padding:12px 9px}.parameter-card strong{font-size:20px}}@media(prefers-reduced-motion:reduce){.view{animation:none}button,input,select{transition:none}}

.automation-review{display:flex;flex-direction:column;gap:10px;padding:22px;border:1px solid #bad8ff;border-radius:18px;background:linear-gradient(130deg,#edf6ff,#f7fbff);margin:24px 0}.automation-review small{font-size:11px;color:#597d9f}.automation-review strong{font-size:17px;line-height:1.5;color:#164e8d}.automation-review span{padding:8px 12px;background:#fff;border-radius:10px;color:#2466a6}.lifecycle-panel ol{padding-left:24px}.lifecycle-panel li{padding:6px 0;line-height:1.6}

#local-alarms.alarms-clear{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 18px;background:#edf8f6;border-color:#d4eae5}#local-alarms.alarms-clear h2{font-size:12px;margin:0;color:#227366}#local-alarms.alarms-clear p{font-size:11px;margin:0}.live-readings{margin:0 0 22px;border:1px solid #dce8f4;border-radius:16px;background:#fff}.live-readings>summary{padding:14px 20px;color:#46769f;font-size:12px}.live-readings[open]>.overview-grid{padding:16px 20px 0}.reef-dashboard .section-title h2{font-size:23px;letter-spacing:-.6px}.parameter-card.selected strong{color:#196bd0}.reef-dashboard .eyebrow{color:#498ed6}

input[type=checkbox]:focus-visible{outline:3px solid #8bc0ff;outline-offset:4px}

.outlet-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px}.outlet-top h3{overflow-wrap:anywhere;margin:0}.outlet-top .text-button{grid-column:1/-1;justify-self:start;padding:5px 0;color:#176cf0;font-size:11px}.outlet p{line-height:1.55}#automation-diagnostics p{margin:8px 0;padding:10px 12px;background:#f0f6ff;border-radius:8px;color:#254e80}#automation-diagnostics .warning{background:#fff6e4;color:#80520b}
.form-footer #automation-diagnostics{display:block;width:100%;grid-column:1/-1}