:root{
  --bg:#0b1220;
  --card:#111827;
  --muted:#94a3b8;
  --text:#e5e7eb;
  --line:rgba(255,255,255,.08);
  --pri:#22c55e;
  --sec:#334155;
  --danger:#ef4444;

  /* Tab/Subtab UI (customizable from Settings) */
  --tab-font-size:16px;
  --subtab-font-size:15px;
  --tab-font-family: ;
  --tab-font-weight:600;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:linear-gradient(180deg,#0b1220,#070b14);
  color:var(--text);
}

.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; flex-direction:column;
  padding:8px 10px;
  gap:8px;
  background:rgba(17,24,39,.9);
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(10px);
}

/* Linia 1: GSweb (stanga) + TAB dropdown (centru) + Setari (dreapta) */
.headerTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.brandMini{display:flex; align-items:center; gap:10px; min-width:86px}
.brandMini .title{display:block; font-weight:800; letter-spacing:.3px; white-space:nowrap}

.brand{display:flex; align-items:center; gap:10px}
.brand .title,
.brand .sub{display:none}
.dot{
  width:12px;height:12px;border-radius:999px;
  background:var(--danger);
  box-shadow:0 0 0 4px rgba(239,68,68,.15);
}
.title{font-weight:700; letter-spacing:.3px}

.actions{display:flex; gap:10px; align-items:center}

/* Linia 2: Subtaburi pe toata latimea, cu scroll orizontal */
.subtabsBar{width:100%}
.subtabsBar .subtabs{width:100%}

.wrap{padding:14px; max-width:980px; margin:0 auto; width:100%; box-sizing:border-box}
@media (max-width: 640px){
  .wrap{padding:8px 6px 14px; max-width:100%}
}
@media (max-width: 400px){
  .wrap{padding:6px 4px 12px}
}

.card{
  background:rgba(17,24,39,.85);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.hidden{display:none !important}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width:640px){ .grid2{grid-template-columns:1fr} }

input{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(2,6,23,.4);
  color:var(--text);
  outline:none;
}
input:focus{border-color:rgba(34,197,94,.5)}

.row{display:flex; gap:10px; margin-top:10px}
.row > *{flex:1}

button{
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(51,65,85,.35);
  color:var(--text);
  cursor:pointer;
}
button.primary{background:rgba(34,197,94,.18); border-color:rgba(34,197,94,.35)}
button.secondary{background:rgba(51,65,85,.35)}
button.danger{background:rgba(239,68,68,.14); border-color:rgba(239,68,68,.35)}
button.ghost{background:transparent}
button:hover{filter:brightness(1.08)}

.iconbtn{
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  position:relative;
}
.iconbtn.ok{ box-shadow: 0 0 0 4px rgba(34,197,94,.14); border-color: rgba(34,197,94,.28); }
.iconbtn.bad{ box-shadow: 0 0 0 4px rgba(239,68,68,.14); border-color: rgba(239,68,68,.28); }
.iconbtn .dot{
  position:absolute;
  left:10px; top:10px;
  width:10px; height:10px;
  border-radius:50%;
  pointer-events:none;
}

.pillbtn{
  height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  font-weight:700;
}
.pillbtn:hover{filter:brightness(1.08)}

.drawerHeadBtns{display:flex; align-items:center; gap:8px}

.hint{color:var(--muted); margin-top:10px; font-size:13px}

.dash{display:flex; flex-direction:column; gap:10px}

.tabs, .subtabs{display:flex; gap:8px; overflow:auto; padding-bottom:6px}
/* Subtab glow/border may extend upward; give room so it doesn't get clipped in the scroll container */
.subtabs{ padding-top:6px; }

/* === Mobile-friendly TAB dropdown (B) === */
.tabs{overflow:visible; padding-bottom:0}
.tabDropdown{position:relative; display:inline-block; min-width:120px}
.tabDropBtn{display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:120px}
.tabDropBtn{font-size:var(--tab-font-size); font-weight:var(--tab-font-weight); font-family:var(--tab-font-family, inherit)}
.tabDropBtn .chev{opacity:.75; font-size:12px}
.tabDropMenu{
  position:absolute;
  left:0;
  top:calc(100% + 10px);
  width:min(320px, 78vw);
  max-height:60vh;
  overflow:auto;
  padding:10px;
  border-radius:16px;
  background:rgba(16,24,39,.92);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  display:none;
  z-index:60;
  backdrop-filter: blur(10px);
}
.tabDropdown.open .tabDropMenu{display:block}

/* === TAB dropdown items: lista verticala (nu wrap orizontal) === */
.tabDropItem{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  color:#e5e7eb;
  font-size:var(--tab-font-size);
  font-weight:var(--tab-font-weight);
  font-family:var(--tab-font-family, inherit);
  text-align:left;
  margin:0 0 8px 0;
}
.tabDropItem:last-child{margin-bottom:0}
.tabDropItem.active{
  background:rgba(34,197,94,.10);
  border-color:rgba(34,197,94,.35);
}
.tabDropItem .miniBtns{display:flex; gap:8px; margin-left:8px}
.tabDropItem .miniBtn{
  width:28px; height:28px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  font-size:14px;
}
.tabDropItem .miniBtn:active{transform:scale(.98)}

/* Reorder list (Tab/Subtab modal) – i13: placeholder între rânduri; pe telefon nu scrollă tot modalul la tragere */
.reorderList{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  touch-action:none;
}
.reorderItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  cursor:grab;
  touch-action:none;
}
.reorderItem .label{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:700;
  pointer-events:none;
}
.reorderItem .trashBtn{
  width:34px;
  height:34px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  cursor:pointer;
  opacity:.95;
}
.reorderItem .trashBtn:hover{ filter:brightness(1.15); }
.reorderItem .trashBtn:active{ transform:scale(.98); }
.reorderItem .trashBtn{ touch-action:manipulation; flex-shrink:0; }
.reorderItem .handle{
  width:36px;
  min-width:36px;
  height:36px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  cursor:grab;
  flex-shrink:0;
}
.reorderItem.dragging{
  opacity:.85;
  filter:brightness(1.08);
  cursor:grabbing;
}
.reorderItem.dragging .handle{ cursor:grabbing; }
.reorderPlaceholder{
  flex-shrink:0;
  border-radius:14px;
  border:2px dashed rgba(34,197,94,.5);
  background:rgba(34,197,94,.08);
  pointer-events:none;
  box-sizing:border-box;
}
.tabItemRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  margin:0 0 8px 0;
}
.tabItemRow:last-child{margin-bottom:0}
.tabItemRow.active{
  background:rgba(34,197,94,.10);
  border-color:rgba(34,197,94,.35);
}
.tabItemLabel{font-weight:700}
.tabItemBtn{
  width:30px; height:30px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  color:#e5e7eb;
}
.tabItemBtn:active{transform:scale(.98)}

.pill{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--pill-bg, rgba(2,6,23,.35));
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:var(--subtab-font-size);
  font-weight:var(--tab-font-weight);
  font-family:var(--tab-font-family, inherit);
}
.pill.active{
  border-color: var(--subtab-active-border, rgba(34,197,94,.45));
  background: var(--subtab-active-bg, rgba(34,197,94,.14));
  box-shadow:
    0 0 var(--subtab-active-glow, 0px) var(--subtab-active-border, rgba(34,197,94,.45)),
    0 0 calc(var(--subtab-active-glow, 0px) / 2) var(--subtab-active-border, rgba(34,197,94,.35));
}

.pill .pillText{white-space:nowrap}
.pill .subtabHandle{
  width:26px; height:26px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  display:grid; place-items:center;
  padding:0;
  font-size:14px;
  cursor:grab;
  flex-shrink:0;
}
.pill .subtabHandle:active{ cursor:grabbing; }
.subtabs .pill.subtabDragging{
  opacity:1;
  filter:brightness(1.12);
  cursor:grabbing;
  z-index:10;
  position:relative;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.subtabPlaceholder{
  flex-shrink:0;
  border-radius:999px;
  border:2px dashed rgba(34,197,94,.5);
  background:rgba(34,197,94,.08);
  pointer-events:none;
}
.pill .miniBtns{display:flex; gap:6px; margin-left:2px}
.pill .miniBtn{
  width:26px; height:26px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  display:grid; place-items:center;
  padding:0;
  font-size:13px;
}
.pill .miniBtn:hover{filter:brightness(1.15)}

.grid{
  position:relative;
  min-height:60vh;
  background:rgba(2,6,23,.25);
  border:1px dashed rgba(255,255,255,.08);
  border-radius:16px;
  padding:10px;
}

.pkg{
  position:absolute;
  overflow: visible;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(17,24,39,.92);
  box-shadow:0 10px 20px rgba(0,0,0,.25);
  padding:12px;
  touch-action: pan-y;
  -webkit-user-select:none;
  user-select:none;
}
body.editMode .pkg{ touch-action:none; }
.pkgHead{display:flex; justify-content:space-between; gap:10px; align-items:center}
.pkgTitle{font-weight:700}
.badge{font-size:12px; color:var(--muted)}

.pkgHeadRight{display:flex; align-items:center; gap:8px}
.pkgMiniBtn{
  width:28px; height:28px;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  display:grid; place-items:center;
  padding:0;
  font-size:14px;
}
.pkgMiniBtn:hover{filter:brightness(1.15)}

.pkgBody{margin-top:10px; display:grid; gap:10px}
/* A1/A2: card SEN – grid mini-carduri per valoare; redimensionare și poziție din setări */
.pkg--sen .pkgBody{
  padding:8px 8px 10px !important;
  display:flex;
  justify-content:var(--sen-mini-justify, center);
  align-items:var(--sen-mini-align, center);
  overflow:hidden;
  min-height:0;
}
.pkg--sen .pkgBody .pkgSenBody{ max-width:100%; min-width:0; }
.pkgSenBody{ display:flex; flex-direction:column; gap:6px; }
.pkgSenBody.senGrid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.pkgSenBody .senItem{
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:12px;
  background:rgba(0,0,0,.2);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:var(--sen-mini-w, auto);
  min-width:0;
  min-height:var(--sen-mini-h, 64px);
  text-align:center;
  overflow:hidden;
}
.pkgSenBody .senItem .senLbl{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }
.pkgSenBody .senItem .senValRow{ display:flex; align-items:baseline; justify-content:center; flex-wrap:nowrap; gap:5px; min-width:0; max-width:100%; }
.pkgSenBody .senItem .senVal{ font-size:22px; font-weight:700; color:var(--text); line-height:1.2; }
.pkgSenBody .senItem .senUnit{ font-size:14px; color:var(--muted); flex-shrink:0; }
@media (max-width:380px){ .pkgSenBody.senGrid{ grid-template-columns:1fr; } }
.pkgSenBody .senRow{ font-size:14px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.pkgSenBody .senLabel{ color:var(--muted); min-width:80px; }
.pkgSenBody .senVal{ font-weight:600; color:var(--text); }
/* B1: Irigație – fie 1 buton mare (1 zonă), fie 4 butoane mici pe un rând (4 zone) */
.pkg--irig .pkgBody{ padding:6px 2px 8px !important; }
/* Card cu 4 zone: fără spațiu pe laterale; deasupra butoanelor (roșu) = cât sub programare (galben) */
.pkg--irig:has(.irigBody--4){ padding-left:0 !important; padding-right:0 !important; padding-top:4px !important; padding-bottom:4px !important; }
.pkg--irig:has(.irigBody--4) .pkgHead{ padding-left:6px !important; padding-right:6px !important; padding-top:4px !important; padding-bottom:2px !important; }
.pkg--irig:has(.irigBody--4) .pkgBody{ padding:3px 0 6px !important; margin-top:2px !important; }
.irigBody{ display:flex; flex-direction:column; gap:6px; }
.pkg--irig:has(.irigBody--4) .irigBody{ gap:2px; }
.irigZone{ display:flex; flex-direction:column; gap:0; background:rgba(0,0,0,.12); border-radius:6px; border:1px solid var(--line); min-width:0; }
.irigBtnMain{ border-radius:6px; font-weight:600; border:1px solid var(--line); cursor:pointer; transition:filter .15s, background .15s; background:var(--surface-elevated, #334155); color:var(--text); }
.irigBtnMain.irigBtnOn{ background:var(--irig-on-bg, var(--primary, #16a34a)) !important; color:#fff !important; border-color:#fff !important; }
.irigBtnMain:hover:not([aria-disabled]){ filter:brightness(1.1); }
.irigBtnMain[aria-disabled]{ opacity:.6; cursor:not-allowed; }
.irigProgram{ color:var(--muted); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Card cu 4 zone: buton mare (doar nume pe buton; starea prin culoare), sub el programul */
.irigBody--4{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:2px;
}
.irigBody--4 .irigZone{
  padding:2px 0 4px;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.irigBody--4 .irigBtnMain{
  flex:1;
  min-height:52px;
  padding:8px 0;
  font-size:19px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.irigBody--4 .irigProgram{
  font-size:13px;
  margin-top:0;
  padding-top:1px;
  border-top:1px solid rgba(255,255,255,.06);
}

/* Card cu 1 zonă = 1 buton mare, nume pe buton, sub el programul */
.irigBody--1 .irigZone{ padding:8px 0 10px; gap:8px; }
.irigBody--1 .irigBtnMain{ padding:15px 6px; font-size:24px; min-height:auto; }
.irigBody--1 .irigProgram{ font-size:14px; }

/* Mobile: butoanele 4 zone – card compact în înălțime */
@media (max-width: 600px) {
  .pkg--irig:has(.irigBody--4) .pkgBody{ padding:2px 0 5px !important; margin-top:2px !important; }
  .irigBody--4{ gap:2px; }
  .irigBody--4 .irigZone{ padding:2px 0 4px; gap:2px; }
  .irigBody--4 .irigBtnMain{ padding:6px 0; min-height:38px; font-size:clamp(14px, 3.4vw, 17px); }
  .irigBody--4 .irigProgram{ font-size:11px; padding-top:1px; }
}
@media (max-width: 400px) {
  .irigBody--4 .irigBtnMain{ min-height:34px; padding:5px 0; }
}
.pkgBtns{display:flex; gap:10px}
.pkgBtns button{flex:1}

.drawer{
  position:fixed; top:0; right:0; height:100%; width:min(420px, 92vw);
  background:rgba(17,24,39,.98);
  border-left:1px solid var(--line);
  z-index:30;
  display:flex; flex-direction:column;
}
.drawerHead{display:flex; justify-content:space-between; align-items:center; padding:14px; border-bottom:1px solid var(--line)}
.drawerTitle{font-weight:800; font-size:18px}
.drawerSub{color:var(--muted); font-size:12px}
.drawerSub.buildInfo{opacity:.75}
.drawerBody{padding:14px; overflow:auto}
.sectionTitle{font-weight:700; margin-bottom:6px}

/* Collapsible sections in Settings drawer */
.sectionToggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 12px;
}
.sectionToggle .chev{opacity:.85; transition:transform .18s ease}
.sectionToggle.isOpen .chev{transform:rotate(180deg)}
.sectionBody{margin-top:10px}

/* Package settings modal: make collapsible headers clearly clickable */
#pkgModal .sectionToggle{
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(16,185,129,.12);
  cursor:pointer;
  margin-top:10px;
}
#pkgModal .sectionToggle.isOpen{
  background:rgba(16,185,129,.18);
}
#pkgModal .sectionBody{margin-top:10px;}
hr{border:none; border-top:1px solid var(--line); margin:14px 0}

.switchRow{display:flex; justify-content:space-between; align-items:center; gap:10px}
.switchRow input{width:auto}

.backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  z-index:20;
}

.devList{margin-top:10px; display:grid; gap:8px}
.devItem{
  padding:10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(2,6,23,.25);
  display:flex; justify-content:space-between; gap:10px; align-items:center;
}
.devItem small{color:var(--muted)}
.devItem button{flex:0 0 auto; padding:10px 10px}


/* Vent package widgets */
.ventGrid{display:grid; grid-template-columns:110px 1fr; gap:12px; align-items:stretch}
@media (max-width:520px){ .ventGrid{grid-template-columns:90px 1fr;} }

.levelWrap{
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(2,6,23,.25);
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  justify-content:space-between;
}
.levelBar{
  position:relative;
  width:28px;
  flex:1;
  min-height:140px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  overflow:hidden;
}
.levelFill{
  position:absolute;
  left:0; right:0; bottom:0;
  height:0%;
  background:rgba(34,197,94,.45);
}
.levelVal{font-weight:800}
.tempBox{
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(2,6,23,.25);
  padding:10px;
  display:grid;
  gap:8px;
}
.tempRow{display:flex; justify-content:space-between; gap:10px; align-items:baseline}
.tempRow b{font-size:18px}
.small{color:var(--muted); font-size:12px}
.cfgRow{display:flex; gap:10px}
.cfgRow input{flex:1}
.pkgCfgBtn{
  width:28px; height:28px;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  display:grid; place-items:center;
  padding:0;
  font-size:14px;
}
.pkgCfgBtn:hover{filter:brightness(1.15)}


/* ---- VENT v2 layout (like ref) ---- */
.ventCard{display:flex; flex-direction:column; gap:12px; height:100%;}
.ventHdr{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:10px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(2,6,23,.25);
}
.ventPill{
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.06);
  font-size:12px;
  color:var(--text);
  white-space:nowrap;
}
.ventMain{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:14px;
  align-items:stretch;
}
@media (max-width:520px){
  .ventMain{grid-template-columns:120px 1fr;}
}

.distBox{
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(2,6,23,.25);
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
}
.distScale{
  width:100%;
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:var(--muted);
}
.distBarWrap{
  position:relative;
  width:44px;
  flex:1;
  min-height:180px;
  border-radius:18px;
  border:1px solid var(--level-outline, var(--line));
  /* glow-ul conturului e controlat separat prin --outline-glow */
  box-shadow: 0 0 var(--outline-glow, 0px) 0 var(--level-outline, rgba(255,255,255,.10));
  background:rgba(255,255,255,.06);
  overflow:hidden;
}
.distDots{
  position:absolute; inset:10px;
  border-radius:14px;
  background-image: radial-gradient(var(--dots-rgba, rgba(255,255,255,.10)) var(--dots-size, 1.2px), transparent calc(var(--dots-size, 1.2px) + 0.8px));
  background-size: 12px 12px;
  pointer-events:none;
  /* glow-ul punctelor (intensitate) */
  filter: drop-shadow(0 0 var(--dots-glow, 0px) var(--dots-rgba, rgba(255,255,255,.15)));
}
.distFill{
  position:absolute; left:0; right:0; bottom:0;
  height:0%;
  background:rgba(34,197,94,.28);
}
.distVal{
  font-weight:800;
  font-size:18px;
}

.tempPanel{
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(2,6,23,.25);
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.tempBig{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
.tempBig .label{color:var(--muted); font-size:12px; letter-spacing:.2px}
.tempBig .value{font-size:28px; font-weight:900}
.limitsRow{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.limitsRow .lim{
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.06);
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.lim small{color:var(--muted)}
.lim input{padding:10px; border-radius:12px;}

.ventBtns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:auto;
}
.ventBtns button{
  padding:14px 12px;
  border-radius:18px;
  font-weight:800;
  letter-spacing:.4px;
}


/* ---- VENT v3 (limits on bar + buttons under bar) ---- */
.distBarWrap{ position:relative; }
.limOverlay{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:84px;
  display:flex;
  justify-content:center;
  z-index:3;
  pointer-events:auto;
}
.limOverlay.top{ top:8px; }
.limOverlay.bottom{ bottom:8px; }

.limOverlay input{
  width:84px;
  text-align: var(--lim-align, center);
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--lim-border, var(--line));
  background: var(--lim-bg, rgba(17,24,39,.55));
  color: var(--lim-text, var(--text));
  font-weight: var(--lim-font-weight, 800);
  font-size: var(--lim-font-size, 13px);
}

.limOverlay input[readonly]{
  cursor: default;
}

.pkg--vent button:disabled{
  opacity: 0.45;
  filter: grayscale(20%);
  cursor: not-allowed;
}

.distBtns{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:6px;
}
.distBtns button{
  width:100%;
  padding:14px 12px;
  border-radius:18px;
  font-weight:900;
  letter-spacing:.5px;
}
.tempPanel{ min-height:260px; }


/* ---- Modal layer ---- */
.modal{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.55);
  z-index:1000;
  padding:18px;
}
.modalCard{
  width:min(720px, 100%);
  max-height: min(84vh, 900px);
  overflow:hidden;
  border-radius:22px;
  border:1px solid var(--line);
  background:rgba(2,6,23,.92);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
}
.modalHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:14px 14px;
  border-bottom:1px solid var(--line);
}
.modalKicker{ color:var(--muted); font-size:12px; }
.modalTitle{ font-size:18px; font-weight:900; }
.modalBody{
  padding:14px;
  overflow:auto;
  max-height: calc(84vh - 140px);
}
.modalFoot{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:14px;
  border-top:1px solid var(--line);
}
.ghost{
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  border-radius:16px;
  padding:12px 14px;
  font-weight:800;
}
.formGrid{ display:grid; gap:12px; }
.f{ display:grid; gap:6px; }
.f span{ color:var(--muted); font-size:12px; }
.f input, .f select{
  width:100%;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
}
.split2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:520px){ .split2{ grid-template-columns:1fr; } }
.hintLine{ color:var(--muted); font-size:12px; margin-top:4px; }

/* range + number row (F52) */
.rangeRow{ display:flex; align-items:center; gap:10px; }
.rangeRow input[type=range]{ flex:1; width:100%; margin:0; padding:0; }
.rangeRow input[type=number]{ width:86px; padding:12px 10px; }
.styleSection input[type=range]{ width:100%; margin:0; padding:0; }

.sectionResetRow{ display:flex; justify-content:flex-end; margin-top:10px; }

/* Resize handles (F52) */
.resizeHandle{ position:absolute; width:14px; height:14px; border-radius:6px; border:1px solid rgba(255,255,255,.30); background:rgba(15,23,42,.92); box-shadow:0 8px 24px rgba(0,0,0,.45); z-index:50; }
.resizeHandle.br{ right:-6px; bottom:-6px; cursor:se-resize; }
body.editMode .widgetBox{ position:relative; }
body.editMode .widgetLevel{ position:relative; }



/* ---- Compact pkg head ---- */
.pkgHead{ padding:10px 12px !important; }
.pkgTitle{ font-size:16px !important; font-weight:800 !important; opacity:.92; }
.badge{ opacity:.7; }
.pkgBody{ padding:10px 12px 12px !important; }

/* ---- VENT v4 compact ---- */
.ventMain{ grid-template-columns: 1fr !important; }
.distBox{ position:relative; padding:10px !important; }
.distBarWrap{ width:56px !important; min-height:220px !important; }
.distVal{ margin-top:8px; font-size:16px !important; opacity:.95; }
.tempPanel{ display:none !important; } /* temp moves into badge */

.tempBadge{
  position:absolute;
  right:10px;
  top:10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  border-radius:18px;
  padding:10px 12px;
  min-width:120px;
}
.tempBadge .label{ color:var(--muted); font-size:12px; letter-spacing:.2px; }
.tempBadge .value{ font-size:22px; font-weight:900; margin-top:2px; }


/* ---- VENT v5 single card (no nested panels) ---- */
.distBox{
  border:none !important;
  background:transparent !important;
  padding:0 !important;
  align-items:center !important;
}
.distScale{ display:none !important; } /* min/max only in settings */
.tempBadge{
  position:absolute;
  right:0;
  top:0;
  border:none !important;
  background:transparent !important;
  padding:0 !important;
  min-width:auto !important;
  text-align:right;
  opacity:.95;
}
.tempBadge .label{ font-size:12px; }
.tempBadge .value{ font-size:20px !important; }

.distBarWrap{
  margin-top:28px; /* space for temp */
  width:64px !important;
  min-height:240px !important;
  background:rgba(255,255,255,.10) !important; /* only the bar is "albicios" */
  border:1px solid rgba(255,255,255,.10) !important;
}
.distCenterVal{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-weight: var(--level-val-weight, 900);
  font-size: var(--level-val-size, 20px);
  color:var(--text);
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
  pointer-events:none;
  z-index:4;
}
.limOverlay input{
  background:rgba(0,0,0,.28) !important;
}

.distBtns{ margin-top:16px !important; width:220px; }
.distBtns button{ padding:16px 14px !important; }


/* ---- VENT v6 title near temp ---- */
.pkgHead{ background:transparent !important; border:none !important; padding:0 !important; }
.pkgHead .pkgTitle{ display:none !important; }
.pkgHead .badge{ display:none !important; }
.pkgHead .pkgHeadRight{ display:none !important; } /* we'll render actions elsewhere for VENT */

.pkgBody{ position:relative; }

.pkgActions{
  position:absolute;
  top:12px;
  right:12px;
  display:flex;
  gap:8px;
  z-index:20;
}
.pkgActions .iconbtn{
  width:38px; height:38px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  font-weight:900;
}

/* Overlay gear (Edit mode) - sits on the package border, top-right */
.pkgCfgOverlay{
  position:absolute;
  top:-14px;
  right:-14px;
  width:34px;
  height:34px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.22);
  background:rgba(15,23,42,.92);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:60;
  cursor:pointer;
}
.pkgCfgOverlay:hover{ filter:brightness(1.18); }
.pkgCfgOverlay:active{ transform:scale(.98); }


/* Widget gear (Edit mode) - for sub elements inside a package */
.widgetBox{ position:relative; }
.widgetCfgOverlay{
  position:absolute;
  top:-12px;
  right:-12px;
  width:28px;
  height:28px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.22);
  background:rgba(15,23,42,.92);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:70;
  cursor:pointer;
}
.widgetCfgOverlay:hover{ filter:brightness(1.18); }
.widgetCfgOverlay:active{ transform:scale(.98); }

/* Make sure widget wrappers don't change layout */
.widgetBtn{ width:100%; }
.widgetBtn > button{ width:100%; }

.ventHeaderSimple{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:8px;
  margin-bottom:8px;
}
.ventHdrSpacer{ width:38px; height:38px; }

.ventHdrActions{
  justify-self:end;
  display:flex;
  gap:8px;
  z-index:30;
}
.ventHdrActions.is-hidden{ visibility:hidden; pointer-events:none; }
.ventHdrActions .iconbtn{
  width:38px; height:38px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  font-weight:900;
}

.ventName{
  font-size:16px;
  font-weight:900;
  opacity:.92;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding:0 6px;
}
.tempInline{
  text-align:right;
}
.tempInline .label{ color:var(--muted); font-size:12px; letter-spacing:.2px; }
.tempInline .value{ font-size:18px; font-weight:900; margin-top:2px; }

.tempBadge{ display:none !important; } /* not used now */
.distBarWrap{ margin-top:0 !important; }


/* ---- VENT v7: no header box + compact mobile ---- */
.pkg--vent .pkgHead{ display:none !important; }
.pkg--vent .pkgBody{
  padding:12px 14px 14px !important;
  position:relative;
}

/* actions floating */
.pkg--vent .pkgActions{
  position:absolute;
  top:10px;
  right:10px;
  display:flex;
  gap:8px;
  z-index:20;
}
.pkg--vent .pkgActions .iconbtn{
  width:38px; height:38px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  font-weight:900;
}

/* header (title + gear) */
.pkg--vent .ventHeader{
  margin:6px 0 10px;
}
.pkg--vent .ventName{
  font-size:16px;
  font-weight:900;
  opacity:.92;
}
.pkg--vent .tempInline{ text-align:right; }
.pkg--vent .tempInline .label{ color:var(--muted); font-size:12px; }
.pkg--vent .tempInline .value{ font-size:18px; font-weight:900; }

/* single card look: no extra translucent panels */
.pkg--vent .ventCard{ background:transparent !important; border:none !important; }
.pkg--vent .distBox{ background:transparent !important; border:none !important; padding:0 !important; }

.pkg--vent .distBarWrap{
  margin:0 auto;
  width:64px;
  min-height:250px;
  background:rgba(255,255,255,.10);
  border:1px solid var(--level-outline, rgba(255,255,255,.10));
  border-radius:18px;
  position:relative;
}

.pkg--vent .distCenterVal{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:20px;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
  z-index:4;
  pointer-events:none;
}

.pkg--vent .devLabel{
  margin-top:10px;
  opacity:.65;
  text-align:center;
}

.pkg--vent .distBtns{
  margin:14px auto 0;
  /* keep button block consistent even if the card is wider (avoid 'giant' buttons on large cards) */
  width:min(220px, 100%);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.pkg--vent .distBtns button{
  width:100%;
  padding:16px 14px;
  border-radius:18px;
  font-weight:900;
}

/* mobile tighter */
@media (max-width:520px){
  .pkg--vent .pkgBody{ padding:10px 12px 12px !important; }
  .pkg--vent .ventHeader{ margin:4px 0 8px; }
  .pkg--vent .distBarWrap{ min-height:230px; }
  .pkg--vent .distBtns button{ padding:14px 12px; }
}


/* ===== VENT incremental 1-4 ===== */
/* 1) scoate albiciosul de sus (header-ul) doar la VENT */
.pkg--vent .pkgHead{ display:none !important; }

/* card curat: fara panouri translucide in plus */
.pkg--vent{ background: transparent !important; border:1px solid rgba(255,255,255,.06) !important; box-shadow:none !important; }
.pkg--vent .pkgBody{ background: transparent !important; border:none !important; padding:12px 14px 14px !important; }

/* 3) ascunde id/device label (ramane doar in setari) */
.pkg--vent .devLabel{ display:none !important; }

/* 4) apropie graficul de butoane */
.pkg--vent .distBtns{ margin-top:10px !important; }
@media (max-width:520px){
  .pkg--vent .pkgBody{ padding:10px 12px 12px !important; }
  .pkg--vent .distBtns{ margin-top:8px !important; }
}

/* 2) titlu centrat + TEMP/UMID centrat deasupra graficului */
.pkg--vent .ventHeader{ display:grid; justify-content:stretch; margin:2px 0 8px; }
.pkg--vent .ventTopCenter{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.pkg--vent .ventName{ font-size:16px; font-weight:900; text-align:center; opacity:.92; }
.pkg--vent .metricsRow{ display:flex; gap:14px; align-items:flex-end; justify-content:center; }
.pkg--vent .metric{ display:flex; gap:6px; align-items:flex-end; }
.pkg--vent .metric .label{ color:var(--muted); font-size:12px; letter-spacing:.2px; }
.pkg--vent .metric .value{ font-size:16px; font-weight:900; }

/* Build tag is shown in Settings (drawer) only; keep it out of the header UI */
.buildTag{display:none !important; font-size:12px;opacity:.45;font-weight:700;margin-left:6px;}

/* ---- Modal style editor ---- */
.sep{ border:none; border-top:1px solid rgba(255,255,255,.08); margin:14px 0; }
.styleGrid{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:10px; }
@media (max-width:700px){ .styleGrid{ grid-template-columns:1fr; } }
.styleSection{ border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:12px; background:rgba(255,255,255,.03); }
.styleTitle{ font-weight:900; margin-bottom:10px; }
.styleSubTitle{ font-weight:900; opacity:.8; margin:10px 0 6px; font-size:12px; letter-spacing:.2px; }


/* ---- VENT v9: fara TEMP/UMID in card + fara chenar sus ---- */
.pkg--vent .ventCard{ background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; }
.pkg--vent .ventHeader{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0 0 10px !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  outline:none !important;
}
.pkg--vent .ventName{
  font-size:16px;
  font-weight:900;
  text-align:center;
  opacity:.92;
}

/* ---- Per-package style vars (saved in config_json.style) ---- */
.pkg--vent{
  font-family: var(--font-family, inherit);
  background: rgba(255,255,255,.02);
  border: var(--card-border-w,1px) solid rgba(255,255,255,.06);
  border-color: var(--card-border-c, rgba(255,255,255,.06));
  border-radius: var(--card-radius,22px);
  box-shadow: var(--card-shadow, none);
}
.pkg--vent{
  /* allow "transparent" by opacity=0 */
  background: color-mix(in srgb, var(--card-bg, #000000) calc(var(--card-opacity,0) * 100%), transparent);
}
.pkg--vent .ventName{
  font-family: var(--font-family, inherit);
  font-size: var(--title-size,16px);
  font-weight: var(--title-weight,900);
  color: var(--title-color, var(--text));
  text-align: var(--title-align, center);
}
.pkg--vent .ventHdrActions .iconbtn{
  color: var(--icon-color, var(--text));
  font-size: var(--icon-size,16px);
}
.pkg--vent.icons-left .ventHeader{ grid-template-columns: 38px 1fr 38px; }
.pkg--vent.icons-left .ventHdrActions{ justify-self:start !important; grid-column:1 !important; }
.pkg--vent.icons-left .ventHdrSpacer{ grid-column:3 !important; }
/* optional: show gear on the left (keeps title perfectly centered) */
.pkg--vent.icons-left .ventHdrActions{ justify-self:start; grid-column:1; }
.pkg--vent.icons-left .ventHdrSpacer{ grid-column:3; }

.pkg--vent .distBarWrap{
  background: var(--level-empty, rgba(2,6,23,.35));
}
.pkg--vent .distFill{ background: color-mix(in srgb, var(--level-fill, rgba(34,197,94,.28)) 28%, transparent); }
.pkg--vent .distVal{ color: var(--level-text, var(--text)); }
/* punctele sunt controlate prin intensitate (alpha + glow), nu prin opacity */
.pkg--vent .distDots{ opacity: 1; }

.pkg--vent .distBtns{
  width: min(var(--btn-block-w, 220px), 100%);
  gap: var(--btn-gap, 10px);
}
.pkg--vent .distBtns button{
  padding: var(--btn-pad-y, 16px) var(--btn-pad-x, 14px);
  border-radius: var(--btn-radius, 18px);
  font-size: var(--btn-font, 14px);
}
.pkg--vent .distBtns button[data-btn="close"]{
  background: var(--close-off-bg, rgba(255,255,255,.06));
  border-color: var(--close-border, var(--line));
  color: var(--close-txt, var(--text));
}
.pkg--vent .distBtns button[data-btn="open"]{
  background: var(--open-off-bg, rgba(34,197,94,.18));
  border-color: var(--open-border, var(--line));
  color: var(--open-txt, var(--text));
}
/* ON colors (momentan doar la apasare) */
.pkg--vent .distBtns button[data-btn="close"]:active{ background: var(--close-on-bg, rgba(255,255,255,.12)); }
.pkg--vent .distBtns button[data-btn="open"]:active{ background: var(--open-on-bg, rgba(34,197,94,.28)); }


/* ---- VENT v10: scoate chenarul patrat (border) ---- */
.pkg--vent{
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* select style */
#pkgDeviceSelect{width:100%;}

.modal[aria-hidden="true"]{display:none !important;}
.modal[aria-hidden="false"]{display:block !important;}

/* Inline package form in settings drawer */
.inlineForm{
  padding:10px 10px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.03);
  margin:10px 0 12px;
}
.inlineForm .row{ display:flex; gap:10px; margin-top:8px; }
.inlineForm .row:first-child{ margin-top:0; }
.inlineForm .row.right{ justify-content:flex-end; }
.inlineForm select, .inlineForm input{ flex:1; }

#pkgCreateModal{ display:none !important; }


/* === INLINE_PKG_UI_v1: form mai aerisit in Setari (Pachete) === */
#settingsDrawer .inlineForm{
  padding:12px;
  margin:10px 0 12px;
}
#settingsDrawer .inlineForm .row{
  gap:10px;
}
#settingsDrawer .inlineForm select,
#settingsDrawer .inlineForm input{
  min-height:42px;
  padding:10px 12px;
  border-radius:14px;
}
#settingsDrawer .inlineForm .row.right{
  gap:12px;
}
#settingsDrawer .inlineForm .row.right .secondary,
#settingsDrawer .inlineForm .row.right .primary{
  min-height:42px;
  padding:10px 14px;
  border-radius:14px;
  min-width:120px;
}

/* Pe ecrane inguste (drawer), pune campurile pe randuri, nu 2 coloane */
@media (max-width: 520px){
  #settingsDrawer .inlineForm .row{
    flex-direction:column;
  }
  #settingsDrawer .inlineForm .row.right{
    flex-direction:row;
    justify-content:space-between;
  }
  #settingsDrawer .inlineForm .row.right .secondary,
  #settingsDrawer .inlineForm .row.right .primary{
    flex:1;
    min-width:0;
  }
}

/* mini labels for inline package form */
#settingsDrawer .fieldMini{ flex:1; display:flex; flex-direction:column; gap:6px; }
#settingsDrawer .miniLabel{ font-size:12px; opacity:.75; padding-left:2px; }


/* === INLINE_PKG_UI_fix_select: Tab/Subtab full width === */
#settingsDrawer .inlineForm .fieldMini{ min-width:0; }
#settingsDrawer .inlineForm .fieldMini select,
#settingsDrawer .inlineForm .fieldMini input{
  width:100% !important;
  flex:1 1 auto !important;
  min-width:0 !important;
}
#settingsDrawer .inlineForm .row{
  align-items:stretch;
}
#settingsDrawer .inlineForm select{
  appearance:auto;
}


/* === INLINE_PKG_UI_fix3: force Tab/Subtab controls usable (aggressive) === */
.inlineForm .fieldMini select,
.inlineForm .fieldMini input{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}
.inlineForm .fieldMini select{
  min-height:44px !important;
  padding:10px 12px !important;
  border-radius:14px !important;
}
.inlineForm .row{
  width:100% !important;
}
.inlineForm .fieldMini{
  flex:1 1 0 !important;
  width:100% !important;
  min-width:0 !important;
}
/* if some global select styles collapse width */
select#inPkgTab, select#inPkgSubtab{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
}

/* === INLINE_SELECT_OPTIONS_FIX: make dropdown options readable in Settings === */
.inlineForm select{
  background:#fff !important;
  color:#111 !important;
}
.inlineForm select option{
  background:#fff !important;
  color:#111 !important;
}

/* === INLINE_SELECT_DARK_FIX30b: dark selects/options in inline package form === */
.inlineForm select,
.inlineForm input{
  background: rgba(20, 24, 34, .92) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
.inlineForm select option{
  background: rgba(20, 24, 34, .98) !important;
  color: rgba(255,255,255,.92) !important;
}


/* === F4: Vent buttons consistent width (match gsweb24 feel) === */
.ventCard .distBtns{
  width: 100%;
  max-width: 220px;
  margin-left: auto;
  margin-right: auto;
}
.ventCard .distBtns button{
  padding: 12px 10px;
  border-radius: 16px;
}

/* === F7: style vars override (must be last) === */
.pkg--vent{
  font-family: var(--font-family, inherit) !important;
  border-radius: var(--card-radius,22px) !important;
  border: var(--card-border-w,1px) solid var(--card-border-c, rgba(255,255,255,.06)) !important;
  box-shadow: var(--card-shadow, none) !important;
  background: color-mix(in srgb, var(--card-bg, #000000) calc(var(--card-opacity,0) * 100%), transparent) !important;
}
.pkg--vent .ventName{
  font-family: var(--font-family, inherit) !important;
  font-size: var(--title-size,16px) !important;
  font-weight: var(--title-weight,900) !important;
  color: var(--title-color, var(--text)) !important;
  text-align: var(--title-align, center) !important;
}
.pkg--vent .ventHdrActions .iconbtn{
  color: var(--icon-color, var(--text)) !important;
  font-size: var(--icon-size,16px) !important;
}
.pkg--vent.icons-left .ventHeader{ grid-template-columns: 38px 1fr 38px; }
.pkg--vent .distBarWrap{
  background: var(--level-empty, rgba(2,6,23,.35)) !important;
  width: var(--level-w, 64px) !important;
  /* IMPORTANT: keep a safe minimum so the graph never "disappears" when package height is small */
  min-height: 180px !important;
  height: var(--level-h, 240px) !important;
  border-radius: var(--level-radius, 18px) !important;
}
/* orientation */
.pkg--vent .distBarWrap.level-h{
  width: var(--level-w, 260px) !important;
  height: var(--level-h, 64px) !important;
}
.pkg--vent .distBarWrap.level-h .distFill{
  width: 0%;
  height: 100% !important;
  left: 0 !important;
  bottom: 0 !important;
}
.pkg--vent .distBarWrap.level-h.axis-flip .distFill{
  left: auto !important;
  right: 0 !important;
}
.pkg--vent .distBarWrap.level-h .limOverlay.top{
  top: 50% !important;
  left: 6px !important;
  right: auto !important;
  transform: translateY(-50%) !important;
}
.pkg--vent .distBarWrap.level-h .limOverlay.bottom{
  top: 50% !important;
  right: 6px !important;
  left: auto !important;
  transform: translateY(-50%) !important;
}

.pkg--vent .distFill{ background: var(--level-fill, rgba(34,197,94,.28)) !important; }
.pkg--vent .distBarWrap.axis-flip .distFill{ bottom: auto !important; top: 0 !important; }
.pkg--vent .distVal{ color: var(--level-text, var(--text)) !important; }
.pkg--vent .distDots{ opacity: 1 !important; }
.pkg--vent .distBtns{ width: min(var(--btn-block-w, 220px), 100%) !important; gap: var(--btn-gap, 10px) !important; align-items: center !important; }
/* IMPORTANT: allow horizontal resize (override base width:100%) */
.pkg--vent .distBtns button{ width: auto !important; height: auto !important; }
.pkg--vent .distBtns button[data-btn="close"]{
  padding: var(--close-pad-y, var(--btn-pad-y, 12px)) var(--close-pad-x, var(--btn-pad-x, 10px)) !important;
  border-radius: var(--close-radius, var(--btn-radius, 16px)) !important;
  font-size: var(--close-font, var(--btn-font, 14px)) !important;
  height: var(--btn-close-h, auto) !important;
}
.pkg--vent .distBtns button[data-btn="open"]{
  padding: var(--open-pad-y, var(--btn-pad-y, 12px)) var(--open-pad-x, var(--btn-pad-x, 10px)) !important;
  border-radius: var(--open-radius, var(--btn-radius, 16px)) !important;
  font-size: var(--open-font, var(--btn-font, 14px)) !important;
  height: var(--btn-open-h, auto) !important;
}

.pkg--vent .distBtns button[data-btn="close"]{ width: min(var(--btn-close-w, 220px), 100%) !important; }
.pkg--vent .distBtns button[data-btn="open"]{ width: min(var(--btn-open-w, 220px), 100%) !important; }
.pkg--vent .distBtns button[data-btn="close"]{ background: var(--close-off-bg, rgba(255,255,255,.06)) !important; border-color: var(--close-border, var(--line)) !important; color: var(--close-txt, var(--text)) !important; }
.pkg--vent .distBtns button[data-btn="open"]{ background: var(--open-off-bg, rgba(34,197,94,.18)) !important; border-color: var(--open-border, var(--line)) !important; color: var(--open-txt, var(--text)) !important; }
.pkg--vent .distBtns button[data-btn="close"].isOn{ background: var(--close-on-bg, rgba(255,255,255,.12)) !important; }
.pkg--vent .distBtns button[data-btn="open"].isOn{ background: var(--open-on-bg, rgba(34,197,94,.28)) !important; }
.pkg--vent .distBtns button[data-btn="close"]:active{ background: var(--close-on-bg, rgba(255,255,255,.12)) !important; }
.pkg--vent .distBtns button[data-btn="open"]:active{ background: var(--open-on-bg, rgba(34,197,94,.28)) !important; }




/* === Mobile UX fixes (F17) === */
button, .btn, .pill, .miniBtn, .iconBtn, .pkg, .pkg * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
button, .btn, .pill, .miniBtn, .iconBtn {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  touch-action: manipulation;
}

/* allow page scroll on mobile */
html, body { height: auto; min-height: 100%; }
body { overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* default: allow vertical panning over packages; edit mode disables to favor drag/resize */
.pkg { touch-action: pan-y; }
body.editMode .pkg { touch-action: none; }

@media (max-width: 640px){
  /* make dashboard scroll area reliable on iOS */
  .dash { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  /* Pe telefon (Run): grid 2 coloane, cardurile se potrivesc în lățime */
  body:not(.editMode) .grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    justify-items: stretch !important;
    gap: 12px !important;
    padding-bottom: 24px !important;
    min-height: auto !important;
  }
  body:not(.editMode) .pkg{
    position: relative !important;
    left: auto !important;
    top: auto !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  /* Carduri cu 4 butoane: ocupă toată lățimea (un rând întreg) ca să încapă 4 pe orizontala */
  body:not(.editMode) .pkg--irig:has(.irigBody--4){
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* foarte îngust: 1 coloană */
@media (max-width: 360px){
  body:not(.editMode) .grid{ grid-template-columns: 1fr !important; }
}

/* === GSweb40_F26 (Pinch Zoom) ===
   Cerinta: sa poti mari/micsora cu doua degete (pinch) pe iPhone/Android.
   Pastram restul identic cu baza (F25).
   Nota: touch-action pe .pkg bloca uneori pinch-zoom pe mobil; permitem explicit pinch-zoom.
*/
.pkg { touch-action: pan-y pinch-zoom !important; }
body.editMode .pkg { touch-action: pinch-zoom !important; }


/* === F52: Level (graph) sizing/orientation + per-button sizing === */
.pkg--vent .distBarWrap{
  width: var(--level-w, 64px) !important;
  /* keep minimum height so the bar is always visible */
  min-height: 180px !important;
  height: var(--level-h, 240px) !important;
  border-radius: var(--level-radius, 18px) !important;
  overflow: hidden !important;
}
.pkg--vent .distBarWrap.level-h{
  width: var(--level-w, 240px) !important;
  height: var(--level-h, 64px) !important;
  margin-top: 28px !important;
}
.pkg--vent .distBarWrap.level-h .distFill{
  height: 100% !important;
  width: var(--level-pct, 0%) !important;
  bottom: 0 !important;
  left: 0 !important;
}
.pkg--vent .distBarWrap.level-h.axis-flip .distFill{
  left: auto !important;
  right: 0 !important;
}
.pkg--vent .distBarWrap.level-h .limOverlay.top{ top: 50% !important; left: 6px !important; right: auto !important; transform: translateY(-50%); }
.pkg--vent .distBarWrap.level-h .limOverlay.bottom{ top: 50% !important; right: 6px !important; left: auto !important; transform: translateY(-50%); }

.pkg--vent .distCenterVal{
  font-size: var(--level-val-size, 20px) !important;
  font-weight: var(--level-val-weight, 900) !important;
}

/* Per-button size + typography */
.pkg--vent .distBtns button[data-btn="close"]{
  width: min(var(--btn-close-w, 220px), 100%) !important;
  height: var(--btn-close-h, auto) !important;
  border-radius: var(--btn-close-radius, var(--btn-radius, 16px)) !important;
  font-size: var(--btn-close-font, var(--btn-font, 14px)) !important;
  padding: var(--btn-close-pad-y, var(--btn-pad-y, 12px)) var(--btn-close-pad-x, var(--btn-pad-x, 10px)) !important;
}
.pkg--vent .distBtns button[data-btn="open"]{
  width: min(var(--btn-open-w, 220px), 100%) !important;
  height: var(--btn-open-h, auto) !important;
  border-radius: var(--btn-open-radius, var(--btn-radius, 16px)) !important;
  font-size: var(--btn-open-font, var(--btn-font, 14px)) !important;
  padding: var(--btn-open-pad-y, var(--btn-pad-y, 12px)) var(--btn-open-pad-x, var(--btn-pad-x, 10px)) !important;
}


/* === F90 SEN (Senzori) === */
.pkg--sen .senBody{display:grid; place-items:center; height:100%;}
.senBox{display:grid; gap:8px; place-items:center; text-align:center; width:100%;}
.senVal{font-size:46px; font-weight:900; letter-spacing:.5px;}
.senMeta{font-size:13px; opacity:.75}
.pkg.senLow{outline:2px solid rgba(245,158,11,.9);}
.pkg.senHigh{outline:2px solid rgba(239,68,68,.9);}
.pkg.senOk{outline:2px solid rgba(34,197,94,.9);}



/* F95 Sensors Basic (doar în .senWrap, nu în .pkgSenBody) */
.senWrap{padding:10px}
.senWrap .senTitle{font-weight:700;margin-bottom:8px;opacity:.95}
.senWrap .senGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.senWrap .senItem{border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:10px;background:rgba(0,0,0,.18)}
.senWrap .senLbl{font-size:12px;opacity:.8}
.senWrap .senVal{font-size:22px;font-weight:800;line-height:1.1;margin:6px 0}
.senWrap .senUnit{font-size:12px;opacity:.8}
.senWrap .senHint{margin-top:8px;font-size:12px;opacity:.7}