:root{
 --bg:#f0f4f8;
 --card-bg:rgba(255,255,255,0.75);
 --nav-bg:rgba(255,255,255,0.85);
 --text:#1e293b;--sub:#64748b;
 --border:rgba(203,213,225,0.8);
 --acc:#3b82f6;--acc-bg:rgba(59,130,246,0.15);
 --track:#cbd5e1;
 --shadow:0 4px 6px -1px rgba(0,0,0,0.05),0 2px 4px -1px rgba(0,0,0,0.03);
 --glass-border:1px solid rgba(255,255,255,0.6);
 --radius:12px;
 --input-bg:#ffffff;
}
body.theme-dark{
 --bg:#090d14;
 --card-bg:rgba(15,23,42,0.65);
 --nav-bg:rgba(15,23,42,0.85);
 --text:#f8fafc;--sub:#94a3b8;
 --border:rgba(14,165,233,0.25);
 --acc:#0ea5e9;--acc-bg:rgba(14,165,233,0.2);
 --track:#1e293b;
 --shadow:0 8px 32px 0 rgba(0,0,0,0.5);
 --glass-border:1px solid rgba(255,255,255,0.08);
 --input-bg:#0f172a;
}
body.theme-ocean{
 --bg:#082f49;
 --card-bg:rgba(12,74,110,0.6);
 --nav-bg:rgba(12,74,110,0.85);
 --text:#e0f2fe;--sub:#7dd3fc;
 --border:rgba(21,94,117,0.8);
 --acc:#22d3ee;--acc-bg:rgba(34,211,238,0.15);
 --track:#164e63;
 --shadow:0 8px 32px 0 rgba(0,0,0,0.3);
 --glass-border:1px solid rgba(255,255,255,0.12);
 --input-bg:#164e63;
}
*{box-sizing:border-box;margin:0;padding:0;outline:none;-webkit-tap-highlight-color:transparent;}
body{
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
 background:var(--bg);color:var(--text);
 padding-bottom:2rem;
 transition:background 0.3s,color 0.3s;
 min-height:100vh;
 background-image:radial-gradient(at top left,var(--acc-bg),transparent 40%);
 background-attachment:fixed;
}
@keyframes ocean-flow{
 0%{background-position:0% 50%;}
 50%{background-position:100% 50%;}
 100%{background-position:0% 50%;}
}
body.anim-grad{
 background:linear-gradient(-45deg,var(--bg),var(--acc-bg),var(--bg),var(--acc-bg));
 background-size:400% 400%;
 animation:ocean-flow 15s ease infinite;
 background-attachment:fixed;
}
body.anim-wave{
 background:var(--bg);
 background-image:repeating-linear-gradient(45deg,rgba(255,255,255,0.03) 0px,rgba(255,255,255,0.03) 40px,transparent 40px,transparent 80px);
 background-size:200% 200%;
 animation:ocean-flow 30s linear infinite;
 background-attachment:fixed;
}
.bub-wrap{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none;overflow:hidden;}
.bub{
 position:absolute;bottom:-50px;
 background:var(--acc);
 border-radius:50%;
 opacity:0;
 animation:rise 10s infinite ease-in;
}
@keyframes rise{
 0%{bottom:-50px;transform:translateX(0);opacity:0;}
 20%{opacity:0.15;}
 50%{transform:translateX(20px);}
 100%{bottom:110vh;transform:translateX(-20px);opacity:0;}
}
a{text-decoration:none;color:inherit;transition:color 0.2s;}
button{cursor:pointer;user-select:none;}
.ripple-effect{
 position:absolute;
 border-radius:50%;
 background:currentColor;
 opacity:0.3;
 transform:scale(0);
 animation:ripple-anim 0.6s linear;
 pointer-events:none;
}
@keyframes ripple-anim{
 to{transform:scale(4);opacity:0;}
}
button,.btn-p,.act-btn,.btn-done,.btn-sec,.nav-i,.p-card,.bk-it{
 position:relative;
 overflow:hidden;
}
nav{
 background:var(--nav-bg);
 backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
 border-bottom:var(--glass-border);
 position:sticky;top:0;z-index:50;margin-bottom:0.65rem;
 box-shadow:var(--shadow);
}
.nav-in{max-width:1600px;margin:0 auto;padding:0.5rem 1rem;}
.nav-l{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:0.25rem;max-width:100%;}
.nav-i{
 flex:0 0 auto;
 white-space:nowrap;
 padding:0.4rem 0.8rem;border-radius:2rem;
 font-size:0.75rem;font-weight:700;
 color:var(--sub);
 transition:all 0.2s;
 display:block;
}
.nav-i:hover{background:var(--acc-bg);color:var(--text);}
.nav-i.active{background:var(--acc);color:#fff;box-shadow:0 2px 8px var(--acc-bg);}
.nav-i.disabled{
 opacity:0.35;
}
.nav-c{display:flex;justify-content:center;gap:0.75rem;margin-top:0.5rem;padding-top:0.5rem;border-top:1px solid var(--border);}
.btn-i{background:transparent;border:none;cursor:pointer;width:24px;height:24px;border-radius:50%;color:var(--sub);font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all 0.2s;overflow:visible;}
.btn-i:hover{color:var(--text);background:var(--border);transform:scale(1.1);}
.act-btn{
 display:flex;align-items:center;justify-content:center;gap:0.35rem;
 padding:0.35rem 0.6rem;border-radius:0.4rem;
 border:1px solid var(--border);background:var(--card-bg);
 cursor:pointer;font-size:0.65rem;font-weight:800;color:var(--sub);
 transition:all 0.15s ease-out;
}
.act-btn:hover{background:var(--border);color:var(--text);transform:translateY(-1px);border-color:var(--sub);}
.act-btn:active{transform:scale(0.96);}
.act-btn.active{background:var(--acc);color:#fff;box-shadow:0 2px 8px var(--acc-bg);border-color:var(--acc);}
.ctr{max-width:1600px;width:96%;padding:0 1rem;margin:0 auto;}
.box{
 background:var(--card-bg);
 backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
 border:var(--glass-border);
 border-radius:var(--radius);
 padding:1.25rem;margin-bottom:1.25rem;
 box-shadow:var(--shadow);
}
.row{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem;gap:0.75rem;}
h1{font-size:1.5rem;font-weight:900;letter-spacing:-0.03em;margin-bottom:0.25rem;text-shadow:0 2px 10px rgba(0,0,0,0.05);}
h3{font-size:0.9rem;font-weight:800;margin-bottom:1rem;color:var(--sub);text-transform:uppercase;letter-spacing:0.05em;border-bottom:1px solid var(--border);padding-bottom:0.5rem;display:flex;align-items:center;gap:0.5rem;}
.head{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:0.35rem;
  margin-bottom:0.65rem;
  width:100%;
}
.head-brand{
  text-align:left;
  flex:0 0 auto;
  margin-right:0.15rem;
}
.head-title-row{
  display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;
  gap:0.35rem;
}
.wid-head{
  min-width:0;
  padding:0.4rem 0.55rem;
  flex:0 0 auto;
}
.head .wid-temp{
  min-width:auto;
  max-width:none;
  width:auto;
}
.head-controls{
  width:fit-content;
  max-width:100%;
  margin:0 auto 0.65rem;
}
.home-main{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  justify-content:center;
  gap:1rem;
  width:100%;
}
.home-gauges{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.stat{display:flex;align-items:center;justify-content:center;gap:0.4rem;margin-top:0.25rem;background:var(--acc-bg);padding:0.2rem 0.6rem;border-radius:1rem;border:1px solid var(--border);}
.dot{width:6px;height:6px;background:#22c55e;border-radius:50%;box-shadow:0 0 0 2px rgba(34,197,94,0.2);}
.stat-txt{font-size:0.65rem;font-weight:800;color:var(--sub);letter-spacing:0.05em;}
.acts{background:var(--card-bg);border:var(--glass-border);border-radius:0.75rem;padding:0.35rem;display:flex;gap:0.35rem;flex-wrap:wrap;justify-content:center;box-shadow:var(--shadow);backdrop-filter:blur(10px);align-items:center;}
select.zone-sel{
  width:auto !important;
  max-width:none;
  min-width:0;
  padding:0.25rem 1.35rem 0.25rem 0.4rem !important;
  font-size:0.65rem !important;
  font-weight:800;
  line-height:1.2;
  background-position:right 0.28rem center;
  background-size:0.7em;
  flex:0 0 auto;
  height:auto;
}
.pin-map-tbl select.zone-sel{
  width:auto !important;
  max-width:none;
  font-size:0.85rem !important;
  font-weight:700 !important;
  padding:0.4rem 2rem 0.4rem 0.6rem !important;
  background-position:right 0.5rem center;
  background-size:1em;
  height:auto;
  line-height:normal;
}
.pin-map-tbl td.pin-zone{width:1%;white-space:nowrap;vertical-align:middle;}
.pin-map-tbl td.pin-fn{width:1%;white-space:nowrap;vertical-align:middle;}
.pin-map-tbl .pin-zone-na{
  display:inline-block;min-width:4.5rem;text-align:center;
  color:var(--sub);opacity:0.45;font-weight:700;user-select:none;
}
.pin-map-tbl select.pin-role{
  width:max-content !important;
  max-width:none !important;
  min-width:0;
}
.zone-names .s-row{margin-bottom:0.35rem;padding-bottom:0.35rem;}
.zone-names .s-lbl.zone-idx{
  max-width:2.5rem;
  font-size:0.85rem;
  font-weight:700;
  color:var(--text);
  letter-spacing:normal;
  text-transform:none;
}
.zone-names input.zone-name-inp{
  max-width:11rem;width:auto;
  padding:0.4rem 0.6rem;
  font-size:0.85rem;
  font-weight:700;
}
.wifi-sig{width:20px;height:20px;vertical-align:middle;opacity:0.8;margin:0;flex:0 0 auto;}
.wifi-path{fill:var(--sub);opacity:0.2;transition:all 0.3s;}
.wifi-path.on{opacity:1;fill:var(--acc);}
.btn-p{
 background:var(--acc);color:#fff;border:none;
 padding:0.4rem 1rem;border-radius:0.5rem;
 font-weight:800;font-size:0.75rem;letter-spacing:0.02em;
 cursor:pointer;transition:all 0.2s;
 box-shadow:0 2px 8px var(--acc-bg);
}
.btn-p:hover{transform:translateY(-1px);box-shadow:0 4px 12px var(--acc-bg);filter:brightness(1.1);}
.btn-p:active{transform:scale(0.98);}
.btn-done{
 background:#10b981;color:white;border:none;
 padding:0.4rem 0.8rem;border-radius:0.5rem;
 font-weight:800;font-size:0.7rem;letter-spacing:0.02em;
 cursor:pointer;transition:all 0.2s;
 box-shadow:0 2px 8px rgba(16,185,129,0.2);
 display:flex;align-items:center;justify-content:center;
}
.btn-done:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(16,185,129,0.3);background:#059669;}
.btn-done:active{transform:scale(0.98);}
.btn-sec{
 background:var(--input-bg);color:var(--text);
 border:1px solid var(--border);
 padding:0.4rem 1rem;border-radius:0.5rem;
 font-weight:800;font-size:0.75rem;letter-spacing:0.02em;
 cursor:pointer;transition:all 0.2s;
}
.btn-sec:hover{border-color:var(--acc);color:var(--acc);background:var(--acc-bg);transform:translateY(-1px);}
.btn-sec:active{transform:scale(0.98);}
input[type=text],input[type=number],select{
 padding:0.4rem 0.6rem;border:1px solid var(--border);
 border-radius:0.4rem;background:var(--input-bg);
 color:var(--text);width:100%;font-weight:700;font-size:0.85rem;
 transition:all 0.2s;
 max-width:400px;
}
input[type=text]:focus,input[type=number]:focus,select:focus{
 border-color:var(--acc);
 box-shadow:0 0 0 2px var(--acc-bg);
}
select{
 appearance:none;
 background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
 background-repeat:no-repeat;
 background-position:right 0.5rem center;
 background-size:1em;
 padding-right:2rem;
 cursor:pointer;
 background-color:var(--input-bg);
 color:var(--text);
 border:1px solid var(--sub);
}
select option{
 background-color:var(--bg);
 color:var(--text);
 font-weight:600;
}
input[type=range]{
 width:100%;height:6px;
 
 background:linear-gradient(to right,var(--acc) 0%,var(--acc) var(--val,0%),var(--track) var(--val,0%),var(--track) 100%);
 border-radius:3px;-webkit-appearance:none;cursor:pointer;
 box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);margin:0;
}
input[type=range]::-webkit-slider-thumb{
 -webkit-appearance:none;width:16px;height:16px;
 background:#fff;border:2px solid var(--acc);
 border-radius:50%;
 
 box-shadow:0 0 8px var(--acc),0 0 3px var(--acc);
 transition:transform 0.1s,box-shadow 0.2s;
}
input[type=range]::-webkit-slider-thumb:hover{
 box-shadow:0 0 12px var(--acc),0 0 5px var(--acc);
}
input[type=range]::-webkit-slider-thumb:active{
 transform:scale(1.1);background:var(--acc);
 box-shadow:0 0 16px var(--acc),0 0 8px var(--acc);
}
.tab{
 padding:0.5rem 0.25rem;font-size:0.65rem;font-weight:700;
 background:transparent;border:none;border-right:1px solid var(--border);
 color:var(--sub);cursor:pointer;width:100%;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
 transition:background 0.2s;
}
.tab:hover{background:rgba(255,255,255,0.05);color:var(--text);}
/* Domů: kompaktní karty — nikdy se neroztahují přes celou šířku */
#grid.grid{
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
  justify-content:flex-start;
  align-items:center;
  width:100%;
  max-width:calc(6 * 140px + 5 * 0.75rem);
  margin-left:auto;
  margin-right:auto;
}
#grid.grid > .card,
#grid.grid > .card-onoff,
#grid.grid > .card-thermo{
  flex:0 0 140px;
  width:140px;
  max-width:140px;
  aspect-ratio:1;
  box-sizing:border-box;
}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0.75rem;}
@media(min-width:640px){.grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1024px){.grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}}
#grid.grid-zones{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  align-items:center;
}
.zone-block{
  display:flex;
  flex-direction:column;
  gap:0.55rem;
  width:100%;
  max-width:calc(6 * 140px + 5 * 0.75rem);
}
.zone-hd{
  margin:0;padding:0.15rem 0.25rem 0.35rem;
  font-size:0.8rem;font-weight:800;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--acc);
  border-bottom:1px solid var(--border);
  text-align:center;
}
.zone-grid{
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
  justify-content:flex-start;
  align-items:center;
}
.zone-grid > .card,
.zone-grid > .card-onoff,
.zone-grid > .card-thermo{
  flex:0 0 140px;
  width:140px;
  max-width:140px;
  aspect-ratio:1;
  box-sizing:border-box;
}
@media(max-width:900px){
  #grid.grid,
  .zone-block{max-width:calc(4 * 140px + 3 * 0.75rem);}
}
@media(max-width:640px){
  #grid.grid,
  .zone-block{max-width:calc(3 * 112px + 2 * 0.55rem);}
}
@media(max-width:480px){
  #grid.grid,
  .zone-grid{gap:0.55rem;}
  #grid.grid > .card,
  #grid.grid > .card-onoff,
  #grid.grid > .card-thermo,
  .zone-grid > .card,
  .zone-grid > .card-onoff,
  .zone-grid > .card-thermo{
    flex-basis:112px;width:112px;max-width:112px;
  }
  #grid.grid,
  .zone-block{max-width:calc(2 * 112px + 0.55rem);}
}
.card{
 background:var(--card-bg);
 backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
 border:var(--glass-border);
 border-radius:1.25rem;padding:1rem;
 position:relative;aspect-ratio:1;
 display:flex;align-items:center;justify-content:center;
 box-shadow:var(--shadow);transition:transform 0.2s;
}
.card:hover{transform:translateY(-2px);}
.card svg{width:100%;height:100%;overflow:visible;}
.c-bg{stroke:var(--track);stroke-linecap:round;fill:none;stroke-width:7;opacity:0.5;}
.c-val{fill:none;stroke-width:7;stroke-linecap:round;transition:stroke-dasharray 0.8s cubic-bezier(0.34,1.56,0.64,1);}
.tick{stroke:var(--sub);stroke-width:1.5;opacity:0.3;}
.tick-num{font-size:7px;font-weight:800;fill:var(--sub);text-anchor:middle;dominant-baseline:middle;font-family:monospace;opacity:0.7;}
.c-in{position:absolute;bottom:18%;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;}
.c-pct{font-size:1.5rem;font-weight:900;letter-spacing:-0.05em;text-shadow:0 2px 10px var(--bg);}
.c-lbl{font-size:0.65rem;font-weight:800;color:var(--sub);margin-top:0rem;text-transform:uppercase;letter-spacing:0.05em;}
.card-onoff{
 flex-direction:column;
 gap:0.55rem;
 padding:1rem 0.75rem;
}
.oo-ring{
 width:72%;
 aspect-ratio:1;
 border-radius:50%;
 border:6px solid color-mix(in srgb,var(--oo-color,var(--acc)) 35%,transparent);
 display:flex;align-items:center;justify-content:center;
 background:color-mix(in srgb,var(--oo-color,var(--acc)) 8%,transparent);
 transition:background 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease;
}
.oo-ring.on{
 border-color:var(--oo-color,var(--acc));
 background:color-mix(in srgb,var(--oo-color,var(--acc)) 22%,transparent);
 box-shadow:0 0 18px color-mix(in srgb,var(--oo-color,var(--acc)) 45%,transparent);
}
.oo-ring.off{
 border-color:var(--border);
 background:transparent;
 box-shadow:none;
}
.oo-stack{
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:0.12rem;padding:0 0.35rem;max-width:88%;pointer-events:none;
}
.oo-tm{
 font-size:0.58rem;font-weight:800;line-height:1.15;
 font-variant-numeric:tabular-nums;letter-spacing:0.01em;
 color:var(--sub);text-align:center;min-height:1.15em;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.oo-tm.active{color:var(--oo-color,var(--acc));}
.oo-ring.on .oo-tm{opacity:0.95;}
.oo-lbl{
 font-size:1.35rem;
 font-weight:900;
 letter-spacing:0.06em;
 color:var(--text,#0f172a);
}
.oo-ring.off .oo-lbl{color:var(--sub);}
.card-onoff > .c-lbl{position:static;}
.card-thermo{
 flex-direction:column;
 gap:0;
 padding:1rem;
 background:var(--card-bg);
 overflow:hidden;
}
.card-thermo svg{
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  padding:0.55rem;
  box-sizing:border-box;
  pointer-events:none;
}
.card-thermo .tick{
 stroke:var(--sub);
 opacity:0.4;
 stroke-width:1.5;
}
.card-thermo .tick-num{
 fill:var(--sub);
 opacity:0.9;
 font-size:6.5px;
 font-weight:800;
}
.tz-arc{
 fill:none;
 stroke-width:7;
 stroke-linecap:round;
}
.tz-blue{stroke:#3b82f6;}
.tz-green{stroke:#22c55e;}
.tz-red{stroke:#ef4444;}
.tz-needle{
 stroke:var(--text);
 stroke-width:2.4;
 stroke-linecap:round;
 transition:x2 0.2s linear,y2 0.2s linear;
}
.tz-hub{fill:var(--text);}
/* Stav CHLADÍ / TOPÍ nad středem ručičky */
.th-state-top{
 position:absolute;
 top:20%;
 left:50%;
 transform:translateX(-50%);
 z-index:3;
 margin:0;
 pointer-events:none;
}
.thermo-in{
 bottom:16%;
 left:50%;
 transform:translateX(-50%);
 width:86%;
 gap:0.1rem;
 z-index:2;
}
.thermo-in .c-pct{
 font-size:1.05rem;
 font-weight:900;
 color:var(--text);
 text-shadow:none;
 letter-spacing:-0.03em;
 line-height:1;
 margin:0;
}
.card-thermo .c-lbl{display:none !important;}
.th-sns-lbl{
 display:block;
 max-width:95%;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 font-size:0.68rem;
 font-weight:800;
 color:var(--text);
 text-transform:uppercase;
 letter-spacing:0.04em;
 margin:0.1rem 0 0;
 line-height:1.15;
}
.th-state{
 font-size:0.55rem;
 font-weight:800;
 letter-spacing:0.08em;
 text-transform:uppercase;
 padding:0.12rem 0.45rem;
 border-radius:999px;
 white-space:nowrap;
}
.th-state.on{
 color:#16a34a;
 background:color-mix(in srgb,#22c55e 18%,transparent);
}
.th-state.off{
 color:var(--sub);
 background:color-mix(in srgb,var(--sub) 12%,transparent);
}
.th-meta{
 position:absolute;
 bottom:0.4rem;
 left:50%;
 transform:translateX(-50%);
 z-index:2;
 font-size:0.55rem;
 font-weight:700;
 font-family:monospace;
 color:var(--sub);
 text-align:center;
 line-height:1.2;
 white-space:nowrap;
 margin:0;
 pointer-events:none;
}
.info{margin-top:0;padding-top:0;border-top:none;display:flex;justify-content:center;gap:0.75rem;flex-wrap:wrap;width:100%;}
.wid{
 background:linear-gradient(145deg,rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.01) 100%);
 border:1px solid var(--border);border-radius:0.8rem;padding:0.75rem;
 display:flex;justify-content:center;align-items:center;text-align:center;
 min-width:120px;box-shadow:0 2px 4px rgba(0,0,0,0.02);
}
.wid-temp{min-width:9.5rem;max-width:100%;}
.wid-temps{display:flex;flex-direction:row;justify-content:center;flex-wrap:wrap;gap:1rem;width:100%;}
.wid-temp-row{display:flex;flex-direction:column;align-items:center;min-width:3.5rem;}
.wid-temp-row + .wid-temp-row{padding-top:0;border-top:none;padding-left:1rem;border-left:1px solid var(--border);}
.wid-temp .wid-l{
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  letter-spacing:0.06em;
}
.wid-l{font-size:0.6rem;color:var(--sub);font-weight:800;text-transform:uppercase;margin-bottom:0.3rem;letter-spacing:0.1em;}
.wid-v{font-size:1.1rem;font-family:monospace;font-weight:700;color:var(--acc);}
.wid-temp-row .wid-v.sec{font-size:1rem;opacity:0.95;}
.nav-help{
 display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;
 border-left:1px solid var(--border);padding-left:1rem;
 font-size:0.7rem;font-weight:700;
}
.nav-help a{color:var(--sub);text-decoration:underline;white-space:nowrap;}
.nav-help a:hover{color:var(--text);}

/* --- App shell: footer + toast --- */
.app-footer{
  max-width:1600px;width:96%;margin:1.75rem auto 0.5rem;padding:0.85rem 1rem 1.25rem;
  text-align:center;font-size:0.7rem;font-weight:700;color:var(--sub);
  border-top:1px solid var(--border);letter-spacing:0.04em;
}
.app-footer a{color:var(--sub);text-decoration:none;margin:0 0.45rem;}
.app-footer a:hover{color:var(--acc);}
.app-footer .app-footer-sep{opacity:0.45;margin:0 0.15rem;}
#app-toast{
  position:fixed;left:50%;bottom:1.35rem;z-index:120;
  transform:translateX(-50%) translateY(140%);
  max-width:min(92vw,22rem);padding:0.65rem 1.1rem;border-radius:999px;
  background:var(--card-bg);border:1px solid var(--border);box-shadow:var(--shadow);
  color:var(--text);font-size:0.8rem;font-weight:800;text-align:center;
  pointer-events:none;opacity:0;transition:transform 0.28s ease,opacity 0.28s ease;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
#app-toast.show{transform:translateX(-50%) translateY(0);opacity:1;}
#app-toast.ok{border-color:rgba(16,185,129,0.45);color:#10b981;}
#app-toast.err{border-color:rgba(239,68,68,0.45);color:#ef4444;}
@media(max-width:900px){
  #app-toast{bottom:calc(3.6rem + env(safe-area-inset-bottom,0px));}
  .app-footer{margin-bottom:calc(0.5rem + 3.25rem + env(safe-area-inset-bottom,0px));}
}

/* --- Mobile bottom nav --- */
.mnav,.mnav-sheet,.mnav-backdrop{display:none;}
@media(max-width:900px){
  body{padding-bottom:calc(3.25rem + env(safe-area-inset-bottom,0px)) !important;}
  body > nav .nav-l,
  nav .nav-l{display:none !important;}
  nav .nav-c{
    margin-top:0;padding-top:0.35rem;border-top:none;
    flex-wrap:wrap;gap:0.5rem;
  }
  .mnav{
    display:flex !important;position:fixed !important;left:0 !important;right:0 !important;bottom:0 !important;top:auto !important;
    z-index:90 !important;height:auto !important;max-height:none !important;margin:0 !important;width:100% !important;
    justify-content:space-around;align-items:center;
    padding:0.2rem 0.35rem calc(0.2rem + env(safe-area-inset-bottom,0px));
    background:var(--nav-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border:none !important;border-top:1px solid var(--border) !important;border-radius:0 !important;
    box-shadow:0 -2px 12px rgba(0,0,0,0.1);
  }
  .mnav-i{
    flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:0.05rem;padding:0.25rem 0.2rem;min-height:0;height:auto;
    border:none;background:transparent;color:var(--sub);font-size:0.58rem;font-weight:800;
    letter-spacing:0.03em;text-transform:uppercase;cursor:pointer;border-radius:0.5rem;
    text-decoration:none;line-height:1.1;-webkit-tap-highlight-color:transparent;
  }
  .mnav-i svg{width:1.15rem;height:1.15rem;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .mnav-i.active{color:var(--acc);background:var(--acc-bg);}
  .mnav-backdrop{
    display:block;position:fixed;inset:0;z-index:95;background:rgba(0,0,0,0.45);
    opacity:0;pointer-events:none;transition:opacity 0.2s;
  }
  .mnav-backdrop.open{opacity:1;pointer-events:auto;}
  .mnav-sheet{
    display:block !important;position:fixed !important;left:0;right:0;bottom:0;top:auto;z-index:96;
    max-height:min(70vh,28rem);overflow:auto;height:auto;margin:0;
    padding:0.75rem 1rem calc(3.5rem + env(safe-area-inset-bottom,0px));
    background:var(--card-bg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border:none;border-top:1px solid var(--border);border-radius:1rem 1rem 0 0;
    box-shadow:0 -8px 32px rgba(0,0,0,0.25);
    transform:translateY(110%);transition:transform 0.25s ease;
  }
  .mnav-sheet.open{transform:translateY(0);}
  .mnav-sheet-hd{
    display:flex;justify-content:space-between;align-items:center;
    margin-bottom:0.75rem;padding:0 0.25rem 0.5rem;border-bottom:1px solid var(--border);
  }
  .mnav-sheet-hd strong{font-size:0.95rem;}
  .mnav-sheet-list{display:flex;flex-direction:column;gap:0.35rem;}
  .mnav-sheet-list a{
    display:flex;align-items:center;justify-content:space-between;
    padding:0.75rem 1rem;border-radius:0.75rem;font-weight:700;font-size:0.9rem;
    background:var(--input-bg);border:1px solid var(--border);color:var(--text);
  }
  .mnav-sheet-list a:active,.mnav-sheet-list a.active{background:var(--acc-bg);color:var(--acc);}
  .mnav-sheet-list a.disabled{opacity:0.35;pointer-events:none;}
  .mnav-sheet-list a[hidden],.mnav-sheet-list a.hide{display:none !important;}
  .mnav-sheet-sec{
    margin:0.85rem 0 0.35rem;font-size:0.65rem;font-weight:800;color:var(--sub);
    text-transform:uppercase;letter-spacing:0.08em;padding:0 0.25rem;
  }

  /* File manager — phone */
  .fm-page .f-list{max-height:none;}
  .fm-page .f-it{
    flex-wrap:wrap;align-items:center;gap:0.4rem;
    padding:0.75rem 0.55rem;
  }
  .fm-page .f-n{flex:1 1 100%;min-width:0;width:100%;}
  .fm-page .f-n a{word-break:break-all;font-size:0.85rem;}
  .fm-page .f-s{margin:0;margin-right:auto;font-size:0.7rem;}
  .fm-page .act-grp{margin-left:auto;gap:0.5rem;}
  .fm-page .mini-btn{
    min-width:2.6rem;min-height:2.6rem;padding:0.45rem 0.65rem;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:1rem;border-radius:0.55rem;
  }
  .fm-page .l-hd{padding:0.45rem 0.5rem;}
  .fm-page .l-hd .fm-hd-size,.fm-page .l-hd .fm-hd-act{display:none;}
  .fm-page .up-box{padding:1.15rem 0.75rem;}
  .fm-page .box{padding:1rem;}
  .fm-page .split-layout{gap:1rem;}
  .fm-page #bkModal .m-ft,.fm-page #resModal .m-ft{flex-wrap:wrap;gap:0.5rem;}
  .fm-page #bkModal .m-bd > div:first-child{flex-wrap:wrap;gap:0.5rem;}
}
@media(max-width:720px){
 .nav-help{border-left:none;padding-left:0;justify-content:center;width:100%;}
}
.temp-panel{
  margin:0.75rem auto 0;padding:0.55rem 0.65rem;
  max-width:calc(3 * 140px + 2 * 0.75rem);
  width:100%;
  box-sizing:border-box;
}
.temp-panel-hd{
 display:flex;justify-content:space-between;align-items:center;
 gap:0.4rem;flex-wrap:wrap;margin-bottom:0.25rem;
}
.temp-sub{font-size:0.65rem;color:var(--sub);margin-top:0.05rem;}
.temp-hist-ctrls{display:flex;gap:0.3rem;flex-wrap:wrap;align-items:center;}
.temp-hist-ctrls select{
 width:auto;min-width:0;max-width:8.5rem;padding:0.2rem 1.25rem 0.2rem 0.35rem;
 font-size:0.68rem;font-weight:700;
}
.temp-dl-btn{
 padding:0.2rem 0.55rem !important;font-size:0.68rem !important;
 text-decoration:none;line-height:1.2;white-space:nowrap;
}
.temp-dl{display:flex;gap:0.4rem;flex-wrap:wrap;}
.temp-dl .btn-sec{text-decoration:none;padding:0.35rem 0.7rem;font-size:0.7rem;}
#tempChart{width:100%;height:72px;display:block;border-radius:0.4rem;}
.temp-legend{
 display:flex;justify-content:space-between;gap:0.35rem;flex-wrap:wrap;
 margin-top:0.2rem;font-size:0.62rem;color:var(--sub);font-family:monospace;
}
.pin-map-tbl{width:auto;max-width:100%;border-collapse:collapse;font-size:0.85rem;}
.pin-map-tbl th,.pin-map-tbl td{padding:0.4rem 0.35rem;text-align:left;border-bottom:1px solid var(--border);}
.pin-map-tbl select{width:100%;min-width:0;}
.pin-warn{font-size:0.75rem;color:#ef4444;margin-top:0.5rem;display:none;}
.alert-box{
 background:linear-gradient(135deg,#f97316 0%,#ea580c 100%);
 color:white;padding:0.5rem 1rem;border-radius:2rem;
 margin:0.5rem auto;text-align:center;font-weight:800;font-size:0.75rem;
 display:none;animation:pulse-alert 2s infinite;max-width:300px;
 box-shadow:0 4px 12px rgba(249,115,22,0.4);
}
@keyframes pulse-alert{
 0%{transform:scale(1);opacity:1;}
 50%{transform:scale(1.02);opacity:0.9;}
 100%{transform:scale(1);opacity:1;}
}
.alert-box.temp-critical{
 background:linear-gradient(135deg,#dc2626 0%,#b91c1c 100%);
 box-shadow:0 4px 12px rgba(220,38,38,0.5);
 animation:flash-red 0.8s infinite;
}
.ap-pass-warn{
 display:none;align-items:center;justify-content:space-between;gap:0.75rem;flex-wrap:wrap;
 margin:0.75rem 0 0;padding:0.75rem 1rem;border-radius:0.75rem;
 background:rgba(245,158,11,0.15);border:1px solid rgba(245,158,11,0.45);color:var(--text);
 font-size:0.85rem;line-height:1.4;
}
.ap-pass-warn-txt{flex:1 1 12rem;}
.ap-pass-warn-acts{display:flex;gap:0.5rem;align-items:center;}
.ap-pass-warn a{color:var(--acc);font-weight:700;text-decoration:none;}
.ap-pass-hint{
 display:none;margin:0.5rem 0 0;padding:0.6rem 0.75rem;border-radius:0.5rem;
 background:rgba(245,158,11,0.12);border-left:3px solid #f59e0b;
 font-size:0.78rem;color:var(--sub);line-height:1.45;
}
@keyframes flash-red{
 0%,100%{opacity:1;transform:scale(1);}
 50%{opacity:0.7;transform:scale(1.05);}
}
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:100;align-items:center;justify-content:center;backdrop-filter:blur(8px);}
#manual-leave-modal{z-index:220;}
.manual-leave-cnt{max-width:420px;}
.manual-leave-ft{flex-wrap:wrap;justify-content:stretch !important;}
.manual-leave-ft button{flex:1 1 8rem;}
.m-cnt{
 background:var(--card-bg);border:1px solid var(--border);
 border-radius:1.5rem;width:92%;max-width:450px;
 display:flex;flex-direction:column;max-height:85vh;
 box-shadow:0 20px 40px -10px rgba(0,0,0,0.3);
 backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
 animation:slideUp 0.25s cubic-bezier(0.16,1,0.3,1);
}
@keyframes slideUp{from{transform:translateY(20px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.m-hd{padding:1rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:1rem;}
.m-bd{padding:1rem;overflow-y:auto;}
.m-ft{padding:1rem;border-top:1px solid var(--border);text-align:right;display:flex;justify-content:flex-end;gap:0.5rem;background:rgba(0,0,0,0.02);border-radius:0 0 1.5rem 1.5rem;}
.canvas-wrap{background:#0f172a;border-radius:0.75rem;overflow:hidden;position:relative;cursor:crosshair;touch-action:none;margin-bottom:0;border:1px solid var(--border);box-shadow:inset 0 2px 10px rgba(0,0,0,0.3);}
canvas{display:block;width:100%;}
.l-it{
 display:flex;gap:0.75rem;padding:0.75rem 0.5rem;
 border-bottom:1px solid var(--border);
 align-items:center;transition:background 0.1s;
}
.l-it:last-child{border-bottom:none;}
.l-it:hover{background:rgba(255,255,255,0.03);}
.l-col{
 flex:1;display:flex;flex-direction:column;
 gap:0.35rem;min-width:0;justify-content:center;
}
.l-inp{
 font-family:monospace;font-size:0.85rem;font-weight:800;
 text-align:center;border:1px solid var(--border);
 background:var(--input-bg);color:var(--text);
 border-radius:0.4rem;padding:0.25rem;width:100%;
 box-shadow:inset 0 1px 2px rgba(0,0,0,0.05);
}
.l-txt{
 font-size:0.7rem;font-weight:800;text-align:center;
 color:var(--sub);text-transform:uppercase;padding:0.3rem;
}
.presets{display:grid;grid-template-columns:1fr;gap:0.5rem;}
@media(min-width:500px){.presets{grid-template-columns:1fr 1fr;}}
.p-card{
 border:1px solid var(--border);padding:0.75rem;border-radius:0.75rem;
 cursor:pointer;transition:all 0.2s;background:rgba(255,255,255,0.02);
}
.p-card:hover{background:var(--acc-bg);border-color:var(--acc);transform:translateY(-2px);}
.p-tit{font-weight:800;color:var(--acc);font-size:0.85rem;margin-bottom:0.25rem;}
.p-desc{font-size:0.7rem;color:var(--sub);line-height:1.3;}
.l-hd{display:flex;padding:0.6rem 0.5rem;border-bottom:1px solid var(--border);color:var(--sub);font-weight:800;font-size:0.65rem;text-transform:uppercase;letter-spacing:0.05em;background:rgba(0,0,0,0.02);}
.f-list{max-height:400px;overflow-y:auto;}
.f-it{display:flex;align-items:center;justify-content:space-between;padding:0.6rem 0.8rem;border-bottom:1px solid var(--border);transition:background 0.2s;}
.f-it:hover{background:var(--acc-bg);}
.f-it:last-child{border-bottom:none;}
.f-ico{margin-right:0.75rem;font-size:1.2rem;opacity:0.8;}
.f-n{font-weight:700;color:var(--text);flex-grow:1;text-decoration:none;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;font-size:0.9rem;}
.f-n:hover{color:var(--acc);}
.f-s{font-family:monospace;color:var(--sub);font-size:0.75rem;margin:0 0.75rem;white-space:nowrap;font-weight:600;}
.act-grp{display:flex;gap:0.35rem;}
.mini-btn{cursor:pointer;font-weight:800;font-size:0.75rem;padding:0.3rem 0.6rem;border-radius:0.4rem;text-decoration:none;border:1px solid transparent;display:inline-block;transition:all 0.2s;}
.btn-del{color:#ef4444;background:rgba(239,68,68,0.1);}.btn-del:hover{background:#ef4444;color:#fff;}
.btn-dl{color:#3b82f6;background:rgba(59,130,246,0.1);}.btn-dl:hover{background:#3b82f6;color:#fff;}
.up-box{border:2px dashed var(--border);padding:2rem;text-align:center;border-radius:1rem;transition:0.3s;position:relative;background:rgba(255,255,255,0.02);cursor:pointer;}
.up-box:hover{border-color:var(--acc);background:var(--acc-bg);transform:scale(1.01);}
.up-in{position:absolute;inset:0;opacity:0;cursor:pointer;}
.prog-w{height:0.5rem;background:var(--track);border-radius:1rem;overflow:hidden;margin-top:0.75rem;display:none;box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);}
.prog-v{height:100%;background:linear-gradient(90deg,var(--acc) 0%,#60a5fa 100%);width:0%;transition:width 0.2s;}
.bk-list{max-height:250px;overflow-y:auto;border:1px solid var(--border);border-radius:0.5rem;padding:0.5rem;margin-bottom:1rem;background:rgba(0,0,0,0.03);}
.bk-it{display:flex;align-items:center;padding:0.4rem;gap:0.6rem;font-size:0.85rem;border-radius:0.25rem;}
.bk-it:hover{background:rgba(0,0,0,0.05);}
input[type=checkbox]{
 width:1.1rem;height:1.1rem;
 accent-color:var(--acc);
 cursor:pointer;
}
.tgl{position:relative;width:44px;height:24px;display:inline-block;flex-shrink:0;}
.tgl input{display:none;}
.tgl-slider{
 position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;
 background-color:var(--track);transition:.3s;border-radius:24px;
 box-shadow:inset 0 1px 3px rgba(0,0,0,0.2);
}
.tgl-slider:before{
 position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;
 background-color:white;transition:.3s;border-radius:50%;
 box-shadow:0 2px 4px rgba(0,0,0,0.2);
}
input:checked + .tgl-slider{background-color:var(--acc);}
input:checked + .tgl-slider:before{transform:translateX(20px);}
.set-grp{
 background:rgba(255,255,255,0.3);
 border:1px solid var(--border);
 border-radius:0.75rem;
 padding:1rem;
 margin-bottom:1rem;
 box-shadow:0 1px 2px rgba(0,0,0,0.02);
}
body.theme-dark .set-grp,body.theme-ocean .set-grp{background:rgba(0,0,0,0.15);}
.set-grp .s-row:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0;}
.acc-item{margin-bottom:0.5rem;}
.acc-hd{
 display:flex;justify-content:space-between;align-items:center;
 cursor:pointer;padding:0.75rem 0;border-bottom:1px solid var(--border);
 color:var(--sub);transition:all 0.2s;user-select:none;
}
.acc-hd:hover{color:var(--text);}
.acc-hd h3{margin:0;border:none;padding:0;font-size:0.9rem;}
.acc-bd{overflow:hidden;transition:all 0.3s ease;padding-top:0.5rem;}
.acc-arr{font-size:0.7rem;transition:transform 0.3s;color:var(--acc);font-weight:bold;}
.acc-item.closed .acc-bd{display:none;}
.acc-item.closed .acc-arr{transform:rotate(-90deg);color:var(--sub);}
.acc-item.closed .acc-hd{border-bottom:none;padding-bottom:0;}
.split-layout{display:grid;grid-template-columns:1fr;gap:1.5rem;}
@media(min-width:1024px){
 .split-layout{grid-template-columns:3fr 1fr;align-items:start;}
 
 
 .split-layout.balanced{grid-template-columns:1fr 1fr;}
 
 
 .sticky-col{position:sticky;top:5.5rem;}
}
.inf-r{display:flex;justify-content:space-between;padding:0.4rem 0;border-bottom:1px solid var(--border);font-size:0.8rem;color:var(--sub);}
.inf-v{font-family:monospace;font-weight:700;color:var(--text);text-align:right;}
.prof-bar{
 display:flex;gap:0.5rem;align-items:center;
 background:var(--card-bg);
 padding:0.5rem;border-radius:0.75rem;
 border:1px solid var(--border);
}
.warn-box{background:rgba(255,247,237,0.9);border:1px solid #fed7aa;color:#c2410c;padding:0.75rem;border-radius:0.5rem;margin-bottom:1rem;font-size:0.85rem;display:flex;gap:0.5rem;align-items:center;}
.hide{display:none;}
.s-row{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border);}
@media(min-width:640px){.s-row{flex-direction:row;align-items:center;justify-content:space-between;}}
.s-lbl{font-weight:700;color:var(--sub);width:100%;max-width:200px;font-size:0.85rem;}
.s-ctl{flex-grow:1;display:flex;align-items:center;gap:1rem;background:var(--input-bg);padding:0.4rem 0.8rem;border-radius:0.5rem;border:1px solid var(--border);}
.s-val{font-family:monospace;font-weight:700;width:60px;text-align:right;color:var(--sub);font-size:0.85rem;}
.maint-grp{width:100%;flex:1;}
.maint-row{
 display:flex;
 flex-wrap:nowrap;
 gap:0.25rem;
 align-items:center;
 margin-bottom:0.25rem;
 justify-content:flex-end;
}
@media(max-width:639px){
 .maint-row{justify-content:flex-start;flex-wrap:wrap;}
}
.maint-info{font-size:0.75rem;color:var(--acc);font-weight:700;text-align:right;display:block;}
.maint-name-inp{
 font-weight:700;color:var(--text);border:none;border-bottom:1px solid transparent;
 background:transparent;padding:0.2rem;
 width:auto;
 min-width:120px;
 font-size:0.95rem;
 margin-bottom:0;
 display:block;transition:all 0.2s;
}
.maint-name-inp:focus{border-color:var(--acc);background:var(--input-bg);border-radius:4px;}
.time-grp{display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap;}
.time-inp{width:60px !important;text-align:center;font-size:1rem;padding:0.4rem;font-weight:800;font-family:monospace;}
.file-wrap{display:flex;align-items:center;gap:0.75rem;width:100%;background:var(--input-bg);padding:0.5rem;border-radius:0.75rem;border:1px solid var(--border);}
.file-name{flex-grow:1;font-size:0.8rem;color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 0.5rem;}
.thermo-inactive{
 text-align:center;padding:2.5rem 1.25rem;border:1px dashed var(--border);
 border-radius:1rem;color:var(--sub);margin-top:1rem;
 max-width:36rem;margin-left:auto;margin-right:auto;
}
.thermo-inactive h2{color:var(--text);margin:0 0 0.5rem;font-size:1.15rem;}
.thermo-sns-panel{
  margin:0 auto 1.25rem;
  padding:1rem 1.1rem;
  border:1px solid var(--border);
  border-radius:1rem;
  background:var(--card-bg);
  box-shadow:var(--shadow);
  max-width:68rem;
  text-align: center;
}
.thermo-sns-hd h2{
  margin:0 0 0.35rem;
  font-size:1rem;
  font-weight:800;
}
.thermo-sns-hd p{
  margin:0 0 0.85rem;
  font-size:0.72rem;
  color:var(--sub);
  line-height:1.4;
}
.thermo-sns-list{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0.65rem;
}
.thermo-sns-row{
  display:flex;
  flex-direction:column;
  text-align:left;
  gap:0.35rem;
  padding:0.65rem 0.7rem;
  border:1px solid var(--border);
  border-radius:0.75rem;
  flex: 1 1 12rem;
  max-width: 15rem;
  min-width: 10rem;
}
.thermo-sns-idx{
 font-size:0.75rem;
 font-weight:800;
 color:var(--sub);
 font-family:monospace;
}
.thermo-sns-fields{min-width:0;}
.thermo-sns-fields input[type=text]{
 width:100%;
 max-width:none;
 margin-top:0.15rem;
 box-sizing:border-box;
}
.thermo-sns-tempwrap{
 display:flex;
 align-items:baseline;
 justify-content:space-between;
 gap:0.4rem;
 margin-top:0.15rem;
}
.thermo-sns-temp{
 font-size:1.05rem;
 font-weight:900;
 font-family:monospace;
 color:var(--acc);
}
.thermo-sns-temp.miss{color:var(--sub);font-size:0.75rem;font-weight:700;}
.thermo-sns-badge{
 display:inline-block;
 margin-top:0;
 font-size:0.6rem;
 font-weight:800;
 letter-spacing:0.06em;
 text-transform:uppercase;
 color:var(--sub);
}
.thermo-grid{
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:0.85rem;
 max-width:44rem;
 margin:0 auto;
}
.thermo-card{
 background:var(--card-bg);border:var(--glass-border);border-radius:1rem;
 padding:0.9rem 0.95rem;box-shadow:var(--shadow);
 min-width:0;
}
.thermo-card-hd{
 display:flex;align-items:center;justify-content:space-between;
 gap:0.5rem;margin-bottom:0.75rem;padding-bottom:0.55rem;
 border-bottom:1px solid var(--border);
}
.thermo-card-hd h3{
 margin:0;font-size:0.9rem;font-weight:800;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.thermo-live{
 display:flex;align-items:baseline;justify-content:space-between;
 gap:0.5rem;margin-bottom:0.75rem;
}
.thermo-temp{font-size:1.45rem;font-weight:900;font-family:monospace;color:var(--acc);letter-spacing:-0.03em;}
.thermo-out{
 font-size:0.65rem;font-weight:800;letter-spacing:0.08em;
 padding:0.2rem 0.45rem;border-radius:999px;text-transform:uppercase;
 white-space:nowrap;
}
.thermo-out.on{background:color-mix(in srgb,#22c55e 22%,transparent);color:#16a34a;}
.thermo-out.off{background:color-mix(in srgb,var(--sub) 18%,transparent);color:var(--sub);}
.thermo-card .s-row{margin-bottom:0.5rem;}
.thermo-card .s-row{flex-wrap:wrap;}
.thermo-card select,.thermo-card input[type=number]{
 width:100%;max-width:100%;
}
@media (max-width:639px){
 .thermo-sns-list,
 .thermo-grid{
 grid-template-columns:1fr;
}
 .thermo-sns-panel,
 .thermo-grid{
 max-width:none;
}
}
.thermo-relay-warn{
 margin:0 0 0.75rem;
 padding:0.45rem 0.6rem;
 border-radius:0.5rem;
 font-size:0.72rem;
 font-weight:700;
 line-height:1.35;
 color:#b91c1c;
 background:rgba(239,68,68,0.12);
 border:1px solid rgba(239,68,68,0.35);
}
.thermo-hint{
 font-size:0.7rem;
 color:var(--sub);
 margin:0.6rem 0 0;
}

.btn-save {
 background: var(--acc);
 color: var(--bg);
 font-weight: 700;
 width: 100%;
 max-width: 300px;
 padding: 12px;
 font-size: 1.1rem;
 border-radius: 8px;
 margin: 20px auto;
 display: block;
 box-shadow: 0 4px 15px rgba(0,255,255,0.2);
 transition: all 0.2s ease;
}
.btn-save:hover {
 filter: brightness(1.1);
 transform: translateY(-2px);
 box-shadow: 0 6px 20px rgba(0,255,255,0.3);
}