:root{
  --bg:#0b1220;
  --card:#111827;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --line:#1f2937;
  --primary:#22c55e;
  --danger:#ef4444;
  --ghost:#374151;
}

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

.topbar{
  position:sticky; top:0;
  padding:14px 14px calc(14px + env(safe-area-inset-top));
  background:rgba(5,8,20,.72);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  z-index:10;
}

.brand{display:flex; gap:10px; align-items:center}
.dot{
  width:12px;height:12px;border-radius:999px;
  background:var(--danger);
  box-shadow:0 0 0 6px rgba(239,68,68,.15);
}
.title{font-weight:800; letter-spacing:.2px}
.subtitle{font-size:12px;color:var(--muted); margin-top:2px}

.iconBtn{
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  font-size:16px;
}
.iconBtn.small{
  padding:8px 10px;
  font-size:14px;
  border-radius:10px;
}

.container{
  padding:14px 14px 90px;
  max-width:720px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}

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

.cardTitle{
  font-weight:800;
  margin-bottom:10px;
}

.row{display:flex; align-items:center; justify-content:space-between}
.gap{gap:10px}

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

.btn{
  border:1px solid var(--line);
  border-radius:16px;
  padding:20px 18px;
  color:var(--text);
  font-size:16px;
  font-weight:800;
  letter-spacing:.2px;
  background:#0f172a;
  touch-action: manipulation;
  user-select:none;
}

.btn.primary{background:rgba(34,197,94,.18); border-color:rgba(34,197,94,.35)}
.btn.danger {background:rgba(239,68,68,.16); border-color:rgba(239,68,68,.35)}
.btn.ghost  {background:rgba(55,65,81,.18); border-color:rgba(55,65,81,.35)}
.btn:active{transform:scale(.985)}

.hint{margin-top:10px; font-size:12px; color:var(--muted); line-height:1.35}
.hintSmall{margin-top:6px; font-size:12px; color:var(--muted)}

.tile{
  background:rgba(15,23,42,.75);
  border:1px solid rgba(31,41,55,.9);
  border-radius:16px;
  padding:12px;
}
.tileLabel{font-size:12px; color:var(--muted); margin-bottom:6px}
.tileValue{font-size:22px; font-weight:900}
.tileValue.big{font-size:28px}
.unit{font-size:12px; color:var(--muted); font-weight:700; margin-left:4px}
.span2{grid-column:1 / span 2}

.barWrap{
  margin-top:10px;
  height:10px;
  border-radius:999px;
  background:rgba(55,65,81,.25);
  overflow:hidden;
}
.bar{
  height:100%;
  width:0%;
  background:rgba(34,197,94,.8);
}

/* Form */
.formGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.field{display:flex; flex-direction:column; gap:6px}
.field span{font-size:12px; color:var(--muted); font-weight:700}
.field input, .field select{
  border-radius:14px;
  border:1px solid var(--line);
  background:#0b1020;
  color:var(--text);
  padding:12px;
  font-size:16px;
  outline:none;
}

/* small divider text in dialog */
.divider{
  margin-top:6px;
  padding-top:10px;
  border-top:1px solid rgba(31,41,55,.7);
  font-weight:900;
  color:rgba(229,231,235,.9);
  font-size:12px;
  letter-spacing:.3px;
}

/* Dialog */
dialog{
  border:none;
  border-radius:18px;
  width:min(560px, calc(100% - 24px));
  background:rgba(17,24,39,.97);
  color:var(--text);
  padding:0;
}
dialog::backdrop{background:rgba(0,0,0,.55)}
.dlgHeader{
  padding:14px;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
.dlgTitle{font-weight:900}
.dlgSub{font-size:12px; color:var(--muted); margin-top:4px}
.dlgBody{padding:14px; display:flex; flex-direction:column; gap:10px}

/* Bottom tabbar */
.tabbar{
  position:fixed;
  left:0; right:0; bottom:0;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(5,8,20,.85);
  backdrop-filter: blur(10px);
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:10px;
  z-index:20;
}
.tab{
  border:1px solid var(--line);
  background:rgba(15,23,42,.75);
  color:var(--muted);
  border-radius:14px;
  padding:12px 8px;
  font-weight:900;
}
.tab.active{
  color:var(--text);
  background:rgba(34,197,94,.18);
  border-color:rgba(34,197,94,.35);
}

/* V-Level */
.levelTile { padding-bottom: 14px; }
.levelWrap{
  display:flex;
  gap:12px;
  align-items:stretch;
}
.levelCol{
  width: var(--lv-col-w, 70px);
  display:flex;
  gap:8px;
  align-items:stretch;
}
.levelTrack{
  flex:1;
  position:relative;
  border-radius:16px;
  background:rgba(55,65,81,.25);
  border:1px solid rgba(31,41,55,.9);
  overflow:hidden;
  min-height: var(--lv-track-h, 120px);
}
.levelFill{
  position:absolute;
  left:0; right:0;
  bottom:0;
  height:0%;
  background:rgba(34,197,94,.8);
  transition: height .18s ease;
}
.levelTicks{
  width:38px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  font-size:11px;
  color: var(--lv-ticks-color, #9ca3af);
  font-weight:800;
  font-family: var(--lv-font, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
}
.levelInfo{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* WB7: Level tile text style via vars */
.levelTile{
  font-family: var(--lv-font, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
}
.levelTile .tileLabel{
  color: var(--lv-label-color, #9ca3af);
  font-family: var(--lv-font, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
}
.levelTile .tileValue{
  color: var(--lv-value-color, #e5e7eb);
  font-size: var(--lv-value-size, 22px);
  font-weight: var(--lv-value-weight, 900);
  font-family: var(--lv-font, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
}

/* Gate */
.gateGrid{
  margin-top:12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.gateCol{
  background:rgba(15,23,42,.55);
  border:1px solid rgba(31,41,55,.9);
  border-radius:16px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap: var(--gate-gap, 16px);
}
.gateTitle{
  font-weight:900;
  color:var(--text);
  opacity:.9;
  margin-bottom:2px;
}

/* Header buttons container */
.headerBtns {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Edit mode button when active */
.iconBtn.active {
  background: rgba(34,197,94,.18);
  border-color: rgba(34,197,94,.6);
  color: #22c55e;
}

/* Edit buttons (hidden by default) */
.editBtn {
  display: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(34,197,94,.18);
  border: 1px solid rgba(34,197,94,.35);
  color: #22c55e;
  font-size: 14px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}
body.edit-mode .editBtn { display: flex; }
.editBtn:hover { background: rgba(34,197,94,.3); border-color: rgba(34,197,94,.5); }
.editBtn:active { transform: scale(0.95); }

.tileLabelRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.gateHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

/* --------- WB4: Gate button customization via CSS vars --------- */
.gateBtn{
  border-radius: var(--btn-radius, 16px);
  padding: var(--btn-pad-y, 20px) var(--btn-pad-x, 18px);
  font-size: var(--btn-font, 16px);
  font-weight: var(--btn-weight, 800);
  color: var(--btn-text, #e5e7eb);
  background: var(--btn-bg, rgba(55,65,81,.18));
  border-color: var(--btn-border, rgba(31,41,55,.9));
  transition: transform .06s ease, filter .12s ease, box-shadow .12s ease;
}
.gateBtn.on{
  background: var(--btn-bg-on, rgba(34,197,94,.35));
  border-color: var(--btn-border-on, rgba(34,197,94,.6));
  box-shadow: 0 0 20px rgba(34,197,94,.35);
}
.gateBtn.pressed{
  filter: brightness(1.05);
  box-shadow: 0 0 18px rgba(255,255,255,.08);
}

/* --------- WB6: Sensors tab style via CSS vars --------- */
#page-sensors{
  --s-font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --s-tile-bg: rgba(15,23,42,.75);
  --s-tile-border: rgba(31,41,55,.9);
  --s-label-color: #9ca3af;
  --s-value-color: #e5e7eb;
  --s-value-size: 22px;
  --s-value-weight: 900;
}
#page-sensors .tile{
  background: var(--s-tile-bg);
  border-color: var(--s-tile-border);
  font-family: var(--s-font);
}
#page-sensors .tileLabel{
  color: var(--s-label-color);
  font-family: var(--s-font);
}
#page-sensors .tileValue{
  color: var(--s-value-color);
  font-size: var(--s-value-size);
  font-weight: var(--s-value-weight);
  font-family: var(--s-font);
}

/* --------- WB6: Settings tab style via CSS vars --------- */
#page-settings{
  --set-font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --set-label-color: #9ca3af;
  --set-label-size: 12px;
  --set-label-weight: 700;

  --set-inp-bg: #0b1020;
  --set-inp-text: #e5e7eb;
  --set-inp-border: #1f2937;
}
#page-settings .field span{
  color: var(--set-label-color);
  font-size: var(--set-label-size);
  font-weight: var(--set-label-weight);
  font-family: var(--set-font);
}
#page-settings .field input, #page-settings .field select{
  background: var(--set-inp-bg);
  color: var(--set-inp-text);
  border-color: var(--set-inp-border);
  font-family: var(--set-font);
}
/* Ascunde linia cu host/port + status (iot.generalsmart.eu:8080 • OFF/OK) */
#connLine {
  display: none !important;
}