/* Bee design tokens + shared components (manager + app). Brand: BeeControls green #8cc63f, grey #939598, Lato. */
@font-face { font-family: 'Lato'; src: url('fonts/Lato-Light.ttf') format('truetype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/Lato-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/Lato-Semibold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/Lato-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
:root {
  --green: #8cc63f; --green-d: #6fa32c; --green-t: rgba(140,198,63,.14); --grey: #939598;
  --bg: #eef0f3; --panel: #ffffff; --panel-2: #f6f7f9; --line: #d9dde3; --line-2: #e7eaee;
  --ink: #1f2429; --ink-2: #4a5159; --muted: #7b838c; --sel: #e8f3d9; --hdr: #2b3136; --hdr-ink: #f1f3f5;
  --card: #ffffff;   /* 1.77.25 ROOT FIX: the cards' colour was never defined (always white) — white text on white in the dark theme */
  --down: #d64545; --warn: #d69a1f; --warn-soft: #f0d58a;--info: #3d7fd6; --shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
  --font: 'Lato', 'Segoe UI', 'Noto Sans Arabic', Tahoma, Arial, sans-serif;
  /* 1.77.117 tokens (the ONE place): the laptop programs' road bar (no connection / took the other road) and the Touch Panel's
     "ready" screen, which changes dark ↔ light on its own (it never follows the app's theme) */
  --road-down-bg: #fdecea; --road-down-ink: #7a1c14; --road-down-line: #f3b8b1; --road-down-dot: #b3261e;
  --road-alt-bg: #eef6e3; --road-alt-ink: #2d4a12; --road-alt-line: #c9e2a6; --road-alt-dot: #5f8f22;
  --kready-dark: #15181c; --kready-dark-ink: #eef1ec; --kready-light: #eef0f3; --kready-light-ink: #1d2418;
  --lk-bad: #a8321f; --lk-ok: #3b6e1a; --lk-on: #ffffff;   /* 1.77.121 remote-connection details: stray / deleted = red, a client here = green */
  --nav-ink: #1f2429; --nav-dim: #4a5159;   /* 1.77.231 the app's left menu */
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --lk-bad: #ff8a78; --lk-ok: #9fd46a; --lk-on: #15181c; --nav-ink: #ffffff; --nav-dim: #e3e7ea; } }
:root[data-theme="dark"] { --lk-bad: #ff8a78; --lk-ok: #9fd46a; --lk-on: #15181c; --nav-ink: #ffffff; --nav-dim: #e3e7ea; }
.lkinfo { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); margin-top: 2px; }
.lkbad { color: var(--lk-bad); font-weight: 700; } .lkok { color: var(--lk-ok); font-weight: 700; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #15181c; --panel: #1d2126; --panel-2: #23282e; --line: #333a42; --line-2: #2a3036; --ink: #e9ecef; --ink-2: #c3c9cf; --muted: #8d959e;
  --sel: #2c3a1d; --hdr: #0f1215; --hdr-ink: #e9ecef; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.3); --card: #23282e; } }
:root[data-theme="dark"] { --bg: #15181c; --panel: #1d2126; --panel-2: #23282e; --line: #333a42; --line-2: #2a3036; --ink: #e9ecef; --ink-2: #c3c9cf; --muted: #8d959e;
  --sel: #2c3a1d; --hdr: #0f1215; --hdr-ink: #e9ecef; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.3); --card: #23282e; }
/* 1.77.38 (owner chose B — mockups/hex-background.png) the page background, ONE place for the manager AND the app: the header's
   hexagons fade into the page corner on a soft tint (no more blank white). The look's own colours stay (other skins), the
   photo looks keep their photo. */
:root { --page-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cdefs%3E%3Cpath id='h' d='M-34 0l17-29.4h34L34 0 17 29.4h-34z'/%3E%3C/defs%3E%3Cg fill='%238cc63f'%3E%3Cuse href='%23h' x='380' y='40' opacity='.42'/%3E%3Cuse href='%23h' x='329' y='70' opacity='.34'/%3E%3Cuse href='%23h' x='380' y='100' opacity='.3'/%3E%3Cuse href='%23h' x='278' y='40' opacity='.24'/%3E%3Cuse href='%23h' x='329' y='130' opacity='.22'/%3E%3Cuse href='%23h' x='227' y='70' opacity='.16'/%3E%3Cuse href='%23h' x='278' y='100' opacity='.18'/%3E%3Cuse href='%23h' x='380' y='160' opacity='.2'/%3E%3Cuse href='%23h' x='176' y='40' opacity='.12'/%3E%3Cuse href='%23h' x='278' y='160' opacity='.12'/%3E%3Cuse href='%23h' x='329' y='190' opacity='.14'/%3E%3Cuse href='%23h' x='380' y='220' opacity='.1'/%3E%3C/g%3E%3C/svg%3E"); --page-t1: var(--panel-2); --page-t2: var(--bg); --page-hex-o: 1; --page-hex-rtl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cdefs%3E%3Cpath id='h' d='M-34 0l17-29.4h34L34 0 17 29.4h-34z'/%3E%3C/defs%3E%3Cg fill='%238cc63f'%3E%3Cuse href='%23h' x='40' y='40' opacity='.42'/%3E%3Cuse href='%23h' x='91' y='70' opacity='.34'/%3E%3Cuse href='%23h' x='40' y='100' opacity='.3'/%3E%3Cuse href='%23h' x='142' y='40' opacity='.24'/%3E%3Cuse href='%23h' x='91' y='130' opacity='.22'/%3E%3Cuse href='%23h' x='193' y='70' opacity='.16'/%3E%3Cuse href='%23h' x='142' y='100' opacity='.18'/%3E%3Cuse href='%23h' x='40' y='160' opacity='.2'/%3E%3Cuse href='%23h' x='244' y='40' opacity='.12'/%3E%3Cuse href='%23h' x='142' y='160' opacity='.12'/%3E%3Cuse href='%23h' x='91' y='190' opacity='.14'/%3E%3Cuse href='%23h' x='40' y='220' opacity='.1'/%3E%3C/g%3E%3C/svg%3E"); }
:root:not([data-skin]) { --page-t1: #f7f9f4; --page-t2: #eef2ea; }
:root:not([data-skin])[data-theme="dark"] { --page-t1: #171c19; --page-t2: #121613; }
@media (prefers-color-scheme: dark) { :root:not([data-skin]):not([data-theme="light"]) { --page-t1: #171c19; --page-t2: #121613; } }
.main, .content { background: var(--page-hex) no-repeat right top / 420px auto, linear-gradient(160deg, var(--page-t1), var(--page-t2)); background-attachment: local, scroll; }
[dir="rtl"] .main, [dir="rtl"] .content { background-image: var(--page-hex-rtl), linear-gradient(160deg, var(--page-t1), var(--page-t2)); background-position: left top, 0 0; }
:root[data-skin="photo"] .content, :root[data-skin="contrast"] .content { background: none; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font: 14px/1.45 var(--font); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { flex: 0 0 auto; }
img.camimg { width: 100%; max-width: 360px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: #111; display: block; }
img.cicon { width: 22px; height: 22px; object-fit: contain; flex: 0 0 auto; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: var(--green); }
.btn.primary { background: var(--green); border-color: var(--green); color: var(--hdr); }   /* 1.77.41 owner rule: white on the light green was contrast 2.0 */
.btn.primary:hover { background: var(--green-d); }
.btn.danger:hover { border-color: var(--down); color: var(--down); }
.btn.sm { padding: 4px 9px; font-size: 13px; }
.btn.sm svg, .ib svg { width: 17px; height: 17px; }
.btn:disabled { opacity: .5; cursor: default; }
.ib { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; color: var(--ink-2); }
.ib:hover { border-color: var(--green); color: var(--ink); }
.ib.act { background: var(--green); border-color: var(--green); color: #fff; }
input[type=text], input[type=password], input[type=number], input[type=time], select, textarea, .tx { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; min-width: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--green-t); border-color: var(--green); }
input[type=range] { accent-color: var(--green); width: 130px; direction: ltr; }
input[type=color] { width: 40px; height: 30px; border: 1px solid var(--line); border-radius: 6px; padding: 2px; background: var(--panel); }
.sw { width: 44px; height: 24px; border-radius: 999px; background: #c5cad0; border: 0; position: relative; cursor: pointer; padding: 0; flex: 0 0 auto; transition: background .15s; }
.sw i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
.sw.on { background: var(--green); } .sw.on i { left: 23px; }
/* 1.77.175 ROOT RULE for EVERY device (owner: "any device we control, not only TVs"): its gateway does not answer (the card's LED is red)
   → its switches show "not reachable" (grey, the knob in the middle) — never an old ON. It follows the LED live (BeeUI.reflectLink).
   A TV / box that does not answer is also set OFF by the server (runtime.tvOff). */
:root { --unreach: #9aa1a7; }
.card:has(.led-bad) .sw, .tile:has(.led-bad) .sw { background: var(--unreach) !important; opacity: .6; } .card:has(.led-bad) .sw i, .tile:has(.led-bad) .sw i { left: 13px !important; }
.card.on:has(.led-bad), .tile.on:has(.led-bad) { background: var(--panel) !important; }
.bc { display: inline-flex; align-items: center; gap: 6px; }
.bv { font-weight: 700; min-width: 48px; text-align: center; font-variant-numeric: tabular-nums; }
.bv.big { font-size: 15px; }
/* multi-function devices: shutter (▲■▼ + position + slat), thermostat (power, temperature, mode, fan), read-only indicators */
.bshut, .btherm { display: flex; flex-direction: column; gap: 6px; align-items: stretch; min-width: 150px; }
.bpos { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; } .bpos input[type=range] { flex: 1; width: auto; }
/* 1.77.168 owner-approved (mockups/shutter-card-calibration.png): the shutter — compact, centred, the window drawing + % + quick % + ▲ ■ ▼ */
:root { --sh-frame: #4a5159; --sh-glass: #dfe9f3; --sh-slat1: #7b838c; --sh-slat2: #9aa1a7; }
.shut2 { align-items: center; text-align: center; gap: 8px; }
.shut2 .shwin { width: 70px; height: 78px; border: 3px solid var(--sh-frame); border-radius: 6px; position: relative; overflow: hidden; background: var(--sh-glass); }
.shut2 .shwin i { position: absolute; left: 0; right: 0; top: 0; background: repeating-linear-gradient(var(--sh-slat1) 0 5px, var(--sh-slat2) 5px 9px); transition: height .9s linear; }
.shut2 .shpct { font-size: 30px; font-weight: 800; line-height: 1.1; } .shut2 .shpct small { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.shut2 .bpos { width: 100%; } .shut2 .bpos input[type=range] { accent-color: var(--green-d); }
.shut2 .shchips { display: flex; justify-content: space-between; width: 100%; gap: 4px; }
.shut2 .shchips button { border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 8px; padding: 3px 7px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.shut2 .shchips button.on { background: var(--lk-ok); border-color: var(--lk-ok); color: var(--lk-on); }
.shut2 .bc { justify-content: center; gap: 10px; } .shut2 .ib.shstop { background: var(--hdr); color: var(--hdr-ink); border-color: var(--hdr); }
/* 1.77.169 owner-approved (mockups/settings-screen-wifi.png): Settings → Touch Panel Wi-Fi */
.wfnow { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; background: var(--panel-2); border-radius: 10px; padding: 8px 12px; margin: 0 0 8px; font-size: 13.5px; }
.wfok { color: var(--lk-ok); font-weight: 800; } .wferr { color: var(--lk-bad); font-weight: 700; }
.wfsteps { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; font-size: 13px; } .wfsteps span { border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px; color: var(--ink-2); }
.wfsteps .d { border-color: var(--lk-ok); color: var(--lk-ok); font-weight: 700; } .wfsteps .n { border-color: var(--ink); color: var(--ink); font-weight: 700; }
/* the Manager's calibration box (same picture) */
.calbox { padding: 10px 12px; margin: 6px 0; } .calst { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; font-size: 13px; } .calst .btn { margin-top: 5px; }
.caln { min-width: 22px; height: 22px; border-radius: 50%; background: var(--lk-ok); color: var(--lk-on); font-weight: 800; display: grid; place-items: center; font-size: 12px; }
.calres { display: flex; gap: 10px; margin: 10px 0; } .calres > div { flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 6px; text-align: center; font-size: 12.5px; color: var(--ink-2); } .calres b { display: block; font-size: 18px; color: var(--ink); }
/* 1.77.173 owner ("the shutter data is not centred"): in the Manager's tile the control row lays out from the start — the shutter fills it, centred */
.tile .tctl:has(.shut2) { justify-content: center; } .tile .tctl .shut2 { width: 100%; }
/* inside the big card the old rule makes every button 110×70 — the compact shutter keeps its own sizes */
.bigcard .ctl .shut2 .shchips button { min-height: 0; min-width: 0; flex: 0 0 auto; font-size: 12.5px; border-radius: 8px; padding: 3px 8px; }
.bigcard .ctl .shut2 .bc .ib { min-height: 0; min-width: 0; flex: 0 0 auto; width: 54px; height: 42px; padding: 0; border-radius: 12px; font-size: 18px; }
.bigcard .ctl .shut2 .bc .ib svg { width: 22px; height: 22px; }
.bigcard .shut2 { width: 100%; overflow: hidden; }
.bigcard .shut2 .shpct small { color: inherit; opacity: .8; }   /* readable on every look (glass / photo = white text) */
.bigcard.shutbig { width: min(340px, 92vw); text-align: center; padding: 22px 22px 18px; } .bigcard.shutbig h2 { justify-content: center; font-size: 19px; } .bigcard.shutbig .bstate { display: none; }
.bslat { font-size: 12px; } .brow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.btemp { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; } .btemp svg { width: 16px; height: 16px; }
.bchips { display: flex; flex-wrap: wrap; gap: 4px; }
.bchip { border: 1px solid var(--line-2); border-radius: 999px; padding: 2px 9px; font: inherit; font-size: 11.5px; background: var(--panel); color: inherit; cursor: pointer; }
.bchip.on { background: var(--green); border-color: var(--green); color: #16240a; font-weight: 700; }
.bind { display: inline-flex; align-items: center; gap: 7px; } .bind i { width: 12px; height: 12px; border-radius: 50%; background: #c5cad0; box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.bind.on i { background: var(--green); box-shadow: 0 0 0 3px var(--green-t); } .bind small { font-size: 10.5px; color: var(--muted, #888); border: 1px solid var(--line-2); border-radius: 999px; padding: 0 6px; }
.pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--panel-2); color: var(--ink-2); border: 1px solid var(--line-2); white-space: nowrap; }
/* 1.49.2 connection LED on cards + the building sign (owner-approved mockups/building-connection-mockup.png) */
.led { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: #c5cad0; vertical-align: middle; }
.led.led-ok { background: #8cc63f; box-shadow: 0 0 6px #8cc63f; } .led.led-bad { background: #e5534b; box-shadow: 0 0 6px #e5534b; } .led.led-grey { background: #c5cad0; }
.bsign { display: inline-flex; align-items: center; gap: 6px; border-radius: 12px; padding: 1px 10px; font-weight: 600; font-size: 12.5px; }
.bsign.ok { background: #eef6e3; color: #4d7a14; } .bsign.bad { background: #fdecea; color: #b3261e; }
.pill.ok { background: var(--green-t); color: var(--green-d); border-color: transparent; }
.pill.bad { background: rgba(214,69,69,.12); color: var(--down); border-color: transparent; }
/* 1.77.191 Manager tree: gateways in groups (mockups/tree-gateways-groups.png) */
.mbody > .tn.gwg { padding-inline-start: 22px; font-weight: 700; color: var(--ink); background: var(--panel-2); }
.mbody > .tn.gwr { padding-inline-start: 46px; white-space: normal; flex-wrap: wrap; }
.tn.gwr .lb { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; min-width: 0; flex: 1 1 0; }
.gled { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-inline-start: 6px; background: var(--down); }
.gled.on { background: var(--green); } .gled.off { background: var(--grey); }
.gwp { font-size: 11px; color: var(--muted); flex: 1 0 100%; text-align: end; }
.pill.warn { background: rgba(214,154,31,.14); color: var(--warn); border-color: transparent; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--down); display: inline-block; }
.dot.on { background: var(--green); }
.muted { color: var(--muted); }
.err { color: var(--down); min-height: 18px; font-size: 13px; }
.toast-box { position: fixed; bottom: 34px; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 50; max-width: min(380px, calc(100vw - 32px)); }
.toast { background: var(--hdr); color: var(--hdr-ink); padding: 10px 14px; border-radius: 8px; box-shadow: var(--shadow); border-left: 4px solid var(--green); font-size: 13px; }
.toast.bad { border-left-color: var(--down); }
.modal-bg { position: fixed; inset: 0; background: rgba(15,18,21,.45); display: grid; place-items: center; z-index: 40; padding: 16px; }
.modal { background: var(--panel); border-radius: 10px; box-shadow: var(--shadow); width: min(460px, 100%); padding: 20px; max-height: calc(100vh - 32px); overflow: auto; }
.modal h3 { margin: 0 0 12px; font-size: 17px; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.field > span { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: radial-gradient(1200px 500px at 50% -10%, var(--green-t), transparent), var(--bg); }
.login .card { width: min(400px, 100%); background: var(--panel); border-radius: 12px; box-shadow: var(--shadow); padding: 28px; }
.login .logo { display: flex; justify-content: center; margin-bottom: 6px; }
.login .logo img { width: min(260px, 80%); height: auto; }
/* 1.77.105 owner: "why bee logo is not in the middle — check all centrally". The logo sits inside a link (www.bee-controls.com);
   the link was wider than the picture (80% of itself) and the picture stood at its start: 30 px off the middle. The link now
   fills the row and centres the picture; the header's .beelink divider never reaches a sign-in card. ONE rule for every sign-in. */
.login .logo > a, .login .logo .beelink { display: flex; justify-content: center; width: 100%; padding: 0; margin: 0; border: 0; }
/* 1.77.105 ONE header rule for every Bee page (owner: "fix header … centrallllll"): the manager / programs header (.hdr) and the
   app / wall screen header (.top). Nothing in a header ever breaks onto 2-3 lines; a narrow window lets the extra words step back
   (each button keeps its icon + tooltip) and long titles end with "…". */
.hdr, .top { flex-wrap: nowrap; overflow: hidden; overflow-x: clip; overflow-y: visible; }
/* 1.77.164 ROOT FIX (owner: "the place drop-down opens behind the photo — PC and Touch Panel"): `overflow: hidden` also cut off every menu that
   opens DOWN from a header (places, who, …). Now only the sideways overflow is clipped; a menu hangs below the header (old browsers keep hidden). */
.hdr > *, .top > *, .hdr .hb, .top .tb, .hdr .who, .hdr .ttl { white-space: nowrap; }
.hdr .beelink, .hdr .hb, .hdr .who .pill, .top .tb { flex-shrink: 0; }
.hdr .ttl { min-width: 0; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; }
.hdr .who { min-width: 0; flex-shrink: 1; overflow: hidden; } .hdr .who .nm { overflow: hidden; text-overflow: ellipsis; }
.hdr { min-height: 54px; }
@media (max-width: 1500px) { .hdr .ttl small { display: none; } .hdr .hb > span:not([data-notr]) { display: none; } }
/* 1.77.237 ROOT FIX (owner: "why do I have to scroll right and left"): 'overflow-x: clip' is not a scroll box, so a header kept its full
   width (every button side by side) as its minimum and the page grid grew wider than the window. The page frame and a header now never
   get wider than the window; when the header does not fit, the words step back (icons + tooltips stay) — .tight is set by the page when
   the buttons really do not fit, not only below 1500 px. */
.shell { grid-template-columns: minmax(0, 1fr); } .shell > *, .hdr, .top { min-width: 0; }
.hdr.tight .ttl small { display: none; } .hdr.tight .hb > span:not([data-notr]) { display: none; }
@media (max-width: 1100px) { .hdr .who .nm { display: none; } }
/* 1.77.105 ONE button rule (owner: "fix centrally"): the words on a button never break onto 2 lines ("Restart", "Send to server",
   "✓ Confirm" did at 1000 px). When a row of buttons has no room, whole buttons move to the next line instead. */
.btn, .hb, .avchip, .avb, .pill, .badge, .chip, .tbb > span { white-space: nowrap; }
.btn { max-width: 100%; }
.row:has(> .btn), .avchips, .btns { flex-wrap: wrap; }
/* ONE field rule: a field's name never breaks ("Function" did); too long = "…" (the full name stays in the tooltip / the line) */
.field > span, label.pr > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ONE table rule (was only inside the manager): every Bee table looks the same; a wide table scrolls inside its own pane
   (never pushes a column off the screen); text-align start = right in Arabic by itself. */
table.grid { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.grid th { text-align: start; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 700; background: var(--panel-2); padding: 8px 10px; border-bottom: 1px solid var(--line); position: sticky; top: 0; white-space: nowrap; }
.grid td { padding: 7px 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.grid tr:last-child td { border-bottom: 0; }
.grid tbody tr { cursor: pointer; }
.grid tbody tr:hover td { background: var(--panel-2); }
.grid tr.on td { background: var(--sel); }
.grid td.ic svg { width: 18px; height: 18px; color: var(--grey); }
.grid tr[data-card].on td.ic svg { color: var(--green-d); }
.grid .nm { font-weight: 600; }
.grid .mono { font-family: Consolas, 'Courier New', monospace; font-size: 12.5px; color: var(--ink-2); }
.grid td.ctl { text-align: end; white-space: nowrap; }
.grid td.ck, .grid th.ck { width: 28px; padding-inline-end: 0; }
[dir=rtl] .grid th[style*="right"] { text-align: left !important; }
/* 1.77.105 the laptop programs' road bar (moved here from manager.html in 1.77.117): cloud / local / no connection */
.linkbar { position: sticky; top: 0; z-index: 9999; padding: 9px 16px; font-size: 14px; font-weight: 600; text-align: center; }
.linkbar .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-inline-end: 8px; vertical-align: 1px; }
.linkbar.down { background: var(--road-down-bg); color: var(--road-down-ink); border-bottom: 1px solid var(--road-down-line); } .linkbar.down .dot { background: var(--road-down-dot); }
.linkbar.alt { background: var(--road-alt-bg); color: var(--road-alt-ink); border-bottom: 1px solid var(--road-alt-line); } .linkbar.alt .dot { background: var(--road-alt-dot); }
/* 1.77.113 a prepared wall screen with no project yet: the full logo (owner: "without white background" — straight on the screen) + "BeeControls is ready for you…" */
/* owner: dark and light change every 5 s (app.html toggles .alt) — its own colours, so the app's theme is never touched */
.kready { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 24px; text-align: center;
  background: var(--kready-dark); color: var(--kready-dark-ink); transition: background-color 1.2s ease, color 1.2s ease; }
.kready.alt { background: var(--kready-light); color: var(--kready-light-ink); }
.kready-logo { background: none; padding: 0; }
.kready-logo img { display: block; width: min(460px, 70vw); height: auto; }
.kready-t { font-size: clamp(22px, 3.2vw, 34px); font-weight: 600; color: inherit; letter-spacing: .2px; }
/* owner: the ADGSC Group logo in the bottom right corner (the real file), straight on the screen — "without background", like the Bee logo */
.kready-adgsc { position: absolute; right: 24px; bottom: 22px; background: none; padding: 0; }
.kready-adgsc img { display: block; width: clamp(96px, 11vw, 150px); height: auto; }
/* 1.77.108 the Local / Cloud switch of the laptop programs (header + sign-in card) — the chosen road in BeeControls green */
.road { display: inline-flex; flex-shrink: 0; border-radius: 8px; overflow: hidden; }
.road > button { border-radius: 0 !important; margin: 0 !important; }
.road > button + button { border-inline-start-width: 0 !important; }
.road > button.on { background: var(--green) !important; border-color: var(--green) !important; color: var(--hdr) !important; font-weight: 700; }
/* 1.77.108 the welcome message (BeeUI.greeting) — on the card colour so it stays readable on every look, also on a photo */
.greet { display: inline-block; max-width: 100%; padding: 7px 15px; margin: 0 0 12px; border-radius: 12px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); font-size: 17px; font-weight: 600; line-height: 1.4; }
/* narrow screens (a 1000-1280 px laptop): the tree and the properties give the middle room (their drag-resize still wins) */
@media (max-width: 1280px) { .body { --sideW: 220px; --propsW: 290px; } }
.login h1 { text-align: center; font-size: 18px; font-weight: 600; margin: 6px 0 18px; color: var(--ink-2); letter-spacing: .3px; }
.login .btn.primary { width: 100%; justify-content: center; padding: 10px; }
.login .switch-link { text-align: center; margin-top: 12px; font-size: 13px; }
.login .switch-link a { color: var(--green-d); cursor: pointer; font-weight: 600; }

/* password eye (BeeUI.pwEyes wraps every password input) */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap > input { width: 100%; box-sizing: border-box; padding-inline-end: 40px; }
.pw-eye { position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--muted, #888); cursor: pointer; border-radius: 8px; padding: 0; }
.pw-eye:hover { color: var(--green, #8cc63f); background: rgba(140, 198, 63, .1); }

/* 1.77.127 the demo button, last in every manager's left menu (agreed mockups/menu-demo-link-mockup.jpg) */
.sidedemo { margin: 14px 10px 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.sidedemo .btn { width: 100%; justify-content: center; font-weight: 700; padding: 10px 12px; }
.sidedemo .muted { font-size: 12px; text-align: center; margin-top: 6px; line-height: 1.35; color: var(--ink-2); }   /* contrast rule: small text, not --muted */

/* 1.77.128 the Servers tree: the small grey details after a server / project name (contrast: --ink-2) */
.srvsub { font-size: 12px; color: var(--ink-2); font-weight: 400; }
.tn .lb:has(.srvsub) { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }   /* the details wrap instead of being cut */

/* 1.77.132 folded menu sections (More / Settings) */
.tfold { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.tfold .tf-t { flex: 1; }
.tfold .tf-n { font-weight: 400; color: var(--ink-2); }

/* 1.77.135 a TV / Android box = ONE card in the manager's Rooms view (2 columns wide, its controls stacked) */
.tile.tvtile { grid-column: span 2; }
/* 1.77.148 one tile for one device with several parts (intercom / access terminal / AC): each part on its own line with its control */
.tile.utile { grid-column: span 2; } .utile .uparts { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.utile .upart { gap: 8px; align-items: center; padding: 4px 6px; border-radius: 8px; background: var(--panel-2); font-size: 13px; } .utile .upart .sp { flex: 1; }
.tvtile .tvctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.tvtile .tvctl .tctl { margin: 0; }
.tvtile .tvrem { display: grid; grid-template-columns: repeat(3, 44px); gap: 6px; justify-content: center; margin-top: 10px; }
.tvtile .tvrem .btn { justify-content: center; padding: 6px 0; min-width: 0; }
/* 1.77.143 the full remote next to the arrows (VOL / CH / ⏮⏯⏭ / ⓘ / Source / Mute) and 0–9 under "123" — same keys as the app's TV card */
.tvrem2 { display: grid; grid-template-columns: repeat(2, 58px); gap: 6px; margin-top: 10px; } .tvrem2.n { grid-template-columns: repeat(5, 44px); justify-content: center; margin-top: 6px; }
.tvrem2 .btn { justify-content: center; padding: 6px 0; min-width: 0; font-weight: 700; }

/* 1.77.137 moving between the support page and a project: a calm screen instead of the sign-in form */
.switching { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: var(--bg); color: var(--ink-2); font-size: 16px; }
.switching img { width: min(320px, 70vw); height: auto; }

/* 1.77.147 access control (People & attendance): the face photo box and the licence notice */
.accface { width: 110px; height: 130px; object-fit: cover; border-radius: 12px; border: 2px solid var(--green); } .accface.empty { border-style: dashed; display: grid; place-items: center; font-size: 12px; }
.acclock { border: 2px solid var(--warn); }

/* 1.77.150 owner-approved (mockups/licence-models-page.png) Manager → Licence models. The ticked box is dark green (white ✓ reads on it) */
.lmwrap { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; } .lmlist { width: 330px; max-width: 100%; } .lmed { flex: 1; min-width: 320px; }
.lmrow { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 10px; border: 1px solid var(--line-2); margin-bottom: 8px; font-size: 14px; cursor: pointer; color: var(--ink); }
.lmrow b { flex: 1; } .lmrow.on { border-color: var(--green); background: var(--sel); } .lmn { font-size: 12.5px; color: var(--ink-2); }
.lmtag { font-size: 11.5px; color: var(--ink-2); background: var(--panel-2); border-radius: 8px; padding: 2px 7px; }
.lmf { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .lmf input { width: 100%; box-sizing: border-box; }
.lmlab { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 4px; }
.lmgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 18px; margin: 6px 0 14px; }
.lmck { display: flex; align-items: center; gap: 9px; font-size: 14px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 10px; color: var(--ink); }
.lmck[data-cmd] { cursor: pointer; } .lmbox { width: 20px; height: 20px; flex: none; border-radius: 6px; border: 2px solid var(--muted); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 900; }
.lmck.on .lmbox { background: var(--lk-ok); border-color: var(--lk-ok); color: var(--lk-on); }
.lmlock { font-size: 12.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }

/* 1.77.151 owner-approved (mockups/access-card.png) the access terminal card + its bigger screen */
.tile.acct { grid-column: span 2; } .acct .accsub { font-size: 12px; color: var(--ink-2); margin: 2px 0 6px; }
.accrow { display: flex; gap: 10px; align-items: center; margin: 6px 0; } .accwho { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--ink-2); min-width: 0; } .accwho b { font-size: 14px; color: var(--ink); }
.accph { width: 84px; height: 100px; flex: none; border-radius: 10px; overflow: hidden; background: var(--panel-2); border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; }
.accph img { width: 100%; height: 100%; object-fit: cover; } .accnopic { font-size: 28px; opacity: .6; }
.accok { color: var(--lk-ok); font-weight: 800; } .accno { color: var(--lk-bad); font-weight: 800; }
.acclog { font-size: 12.5px; border-top: 1px solid var(--line-2); padding-top: 4px; color: var(--ink); } .acclog div { display: flex; gap: 8px; padding: 2px 0; } .acclog .sp { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.accempty { font-size: 12.5px; color: var(--ink-2); padding: 10px 0; } .accbtns { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.modal.accbig { width: min(1000px, 100%); } .accbody { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.accshots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(420px, 100%); } .accshot { border: 1px solid var(--line-2); border-radius: 12px; padding: 6px; font-size: 12.5px; color: var(--ink); }
.accshot .accph { width: 100%; height: 120px; margin-bottom: 4px; } .accshot .muted { color: var(--ink-2); } .acctable { flex: 1; min-width: 300px; max-height: 60vh; overflow: auto; }

/* 1.77.155 owner-approved (mockups/access-groups.png) access control — groups × gates */
.acschip { display: inline-block; background: var(--sel); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; font-size: 12.5px; color: var(--ink); margin: 1px; }
.acswait { color: var(--ink-2); font-weight: 700; } .acstable { overflow: auto; max-width: 100%; }

/* 1.77.157 owner-approved (mockups/tv-card-labels.png) TV card: every control with its word */
.tvlbl { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 13px; } .tvlbl .sp { flex: 1; } .tvl { min-width: 58px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.tvlbl .tvlc { flex: 1; min-width: 0; } .tvlbl .tvlc select, .tvlbl .tvlc input[type=range] { width: 100%; } .tvlbl button.tvlc { justify-content: center; }
.tvkeys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 8px; } .tvkeys .btn { justify-content: center; padding: 6px 2px; min-width: 0; font-size: 12px; font-weight: 700; white-space: normal; line-height: 1.15; text-align: center; }   /* the word wraps rather than being cut (Arabic is longer) */
.tvnumb { display: block; width: 100%; margin-top: 6px; justify-content: center; }

/* 1.77.158 owner-approved (mockups/card-rename.png): ✎ rename on every card */
.renb { border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); border-radius: 7px; padding: 0 6px; font-size: 12px; line-height: 20px; margin-inline-start: 6px; cursor: pointer; opacity: .8; } .renb:hover { opacity: 1; }
.renbox { display: inline-flex; gap: 4px; align-items: center; flex: 1; min-width: 0; } .renin { flex: 1; min-width: 80px; border: 2px solid var(--lk-ok); border-radius: 7px; padding: 3px 6px; font: inherit; font-weight: 700; background: var(--panel); color: var(--ink); }
.renok, .renx { border-radius: 7px; padding: 2px 8px; font-weight: 800; cursor: pointer; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); } .renok { background: var(--lk-ok); border-color: var(--lk-ok); color: var(--lk-on); }

/* 1.77.161 owner-approved (mockups/send-to-server-header.png): ONE Send to server, in the header */
.hb.sendb { border: 2px solid transparent; font-weight: 700; } .hb.sendb.on { background: var(--lk-ok); border-color: var(--green); color: var(--lk-on); font-weight: 800; } .hb.sendb:disabled { opacity: .75; cursor: default; }
.hb.sendx { padding-inline: 10px; } .whob { cursor: pointer; border: 0; font: inherit; }

/* 1.77.162 📱 Send to Touch Panel beside Send to server */
.hb.sendtp { border: 2px solid var(--line); font-weight: 800; }
/* 1.77.168 owner-approved (mockups/screen-updating.png): "Updating Bee…" on the wall screen — above everything, the dark clock-saver look */
:root { --upd-bg1: #22262a; --upd-bg2: #101214; --upd-ink: #e8ebed; --upd-ink2: #c9cdd1; --upd-track: #2c3136; --upd-dim: #9aa1a7; }
.updov { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 42%, var(--upd-bg1) 0%, var(--upd-bg2) 75%); color: var(--upd-ink); }
.updov[hidden] { display: none; }
.updov .updin { text-align: center; width: min(640px, 92vw); }
.updov .updlogo { height: 64px; max-width: 80vw; margin-bottom: 30px; }
.updov h1 { font-size: clamp(26px, 5vw, 40px); font-weight: 700; margin: 0 0 10px; }
.updov .updv { font-size: clamp(15px, 2.6vw, 22px); color: var(--upd-ink2); margin-bottom: 26px; } .updov .updv b { color: var(--green); }
.updov .updbar { height: 14px; border-radius: 7px; background: var(--upd-track); overflow: hidden; margin: 0 6%; } .updov .updbar i { display: block; height: 100%; background: var(--green); border-radius: 7px; transition: width .6s; }
.updov .updsteps { display: flex; justify-content: space-between; margin: 16px 6% 0; font-size: 16px; color: var(--upd-dim); } .updov .updsteps .ok { color: var(--green); } .updov .updsteps .now { color: var(--upd-ink); font-weight: 700; }
.updov .updn { margin-top: 26px; font-size: 18px; color: var(--upd-ink2); } .updov .updn + .updn { margin-top: 8px; }
/* 1.77.167 owner-approved (mockups/clock-sync-button.png): date & time — the device's time, ⏱ Sync, the source (Bee server / Touch Panel) */
.clkbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; margin: 0 0 10px; }
.clkseg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.clkseg button { border: 0; background: var(--panel); color: var(--ink); padding: 6px 10px; font: inherit; font-weight: 700; cursor: pointer; }
.clkseg button.on { background: var(--lk-ok); color: var(--lk-on); }
.clkok { color: var(--lk-ok); font-weight: 800; } .clkbad { background: var(--panel-2); color: var(--lk-bad); border-radius: 7px; padding: 1px 7px; font-weight: 800; font-size: 12.5px; }
.clkrow { display: flex; align-items: center; gap: 8px; margin: 6px 0; flex-wrap: wrap; } .clkrow > b { min-width: 140px; color: var(--ink-2); font-weight: 600; }
/* 1.77.172 owner-approved (mockups/autosave-toggle.png): the Auto-save switch in the dark header */
.hdr .hb.astog { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; color: var(--hdr-ink); font-weight: 700; cursor: pointer; }
.hdr .hb.astog > span:last-child { display: inline !important; }
.assw { width: 36px; height: 20px; border-radius: 10px; background: rgba(255,255,255,.28); position: relative; flex: 0 0 auto; transition: background .2s; }
.assw i { position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--hdr-ink); transition: left .2s; }
.assw.on { background: var(--green); } .assw.on i { left: 19px; }
.leavem { width: min(440px, 92vw); } .leavem h3 { margin: 0 0 6px; }
/* 1.77.164 owner-approved (mockups/one-manager-save-send.png): the screen's state beside 💾 Save / 📱 Send to the screen — on the dark header */
.hdr .scrst { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px; font-size: 13px; font-weight: 700; white-space: nowrap;
  background: rgba(255,255,255,.10); color: var(--hdr-ink); max-width: 340px; overflow: hidden; text-overflow: ellipsis; }
.hdr .scrst.ok::first-letter { color: var(--green); } .hdr .scrst.warn::first-letter { color: var(--warn); }


/* 1.77.163 owner-approved (mockups/map-icon-menu.png): the icons on the photo — always visible, transparency, hide when on / off; the right-click menu */
.mk, .mapmk { opacity: var(--mka, 1); }
.mklb { position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 118px; padding: 2px 6px; border-radius: 6px; background: rgba(20, 24, 28, .78); color: white; font-size: 11.5px; font-weight: 600; line-height: 1.2; text-align: center; pointer-events: none; overflow-wrap: anywhere; filter: none; }   /* 1.77.223 the name under a Live view icon */
.mk:not(.has-bg) svg, .mk:not(.has-bg) .cicon, .mapmk:not(.has-bg) svg, .mapmk:not(.has-bg) .cicon { filter: drop-shadow(0 0 1.5px var(--panel)) drop-shadow(0 0 2.5px rgba(0, 0, 0, .75)); }
.mapmk.hide-on.on, .mapmk.hide-off:not(.on) { visibility: hidden; }
.mk.hide-on.on, .mk.hide-off:not(.on) { opacity: .35; outline: 1px dashed var(--muted); }
.ctxm.mkm { min-width: 270px; } .ctxm.mkm .sp { flex: 1; } .ctxm.mkm .cicon, .ctxm.mkm svg { width: 18px; height: 18px; }
.ctxm .mkrow { display: flex; align-items: center; gap: 8px; padding: 6px 14px; font-size: 13.5px; } .ctxm .mkrow input[type=range] { flex: 1; min-width: 90px; }
.ctxm .mkrow .mksz { width: auto; padding: 2px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); color: var(--ink); }
.ctxm .lmbox { width: 18px; height: 18px; flex: none; border-radius: 5px; border: 2px solid var(--muted); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; }
.ctxm .lmbox.on { background: var(--lk-ok); border-color: var(--lk-ok); color: var(--lk-on); }

/* 1.77.163 ROOT FIX (owner screenshot: card names one letter per line): the ✎ on a room tile shows only on hover / when the tile is selected — it never takes the name's room */
.tile .tn2 .renb { display: none; } .tile:hover .tn2 .renb, .tile.sel .tn2 .renb { display: inline-block; }
.tile .tn2 > span[data-notr] { flex: 1 1 auto; min-width: 60px; overflow-wrap: break-word; word-break: normal; }

/* 1.77.164 owner (pressed Send to server to reach the screen): the two send buttons ALWAYS show their words, also on a narrower window */
.hdr .hb.sendb > span, .hdr .hb.sendtp > span { display: inline !important; }


/* 1.77.184 owner-approved (mockups/manager-live-where.png) "where am I working": the sign next to the project name + its bar under the header */
.where { display: inline-flex; align-items: center; gap: 7px; border-radius: 10px; padding: 6px 11px; font-weight: 700; font-size: 13.5px; white-space: nowrap; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; margin-inline-start: 10px; }
.where.panel { background: var(--green); color: black; } .where.panel i { width: 9px; height: 9px; border-radius: 50%; background: var(--green-d); box-shadow: 0 0 0 3px rgba(0,0,0,.18); display: inline-block; flex: none; }
.where.pc { background: var(--warn); color: black; } .where.off { background: var(--down); color: white; }
/* 1.77.208 mockups/send-master-slave.png */
.sendm { position: fixed; top: 92px; inset-inline-end: 16px; width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 110px); overflow: auto; z-index: 60; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.sendm .sc { padding: 9px 16px 4px; color: var(--ink-2); font-size: 12px; font-weight: 700; } .sendm .rw { display: flex; align-items: center; gap: 11px; padding: 11px 16px; border-top: 1px solid var(--line); } .sendm .rw.on { background: var(--green-t); }
.sendm .tg { font-size: 12px; font-weight: 800; border-radius: 7px; padding: 3px 9px; min-width: 62px; text-align: center; flex: none; } .sendm .tg.m { background: var(--green); color: black; } .sendm .tg.s { background: rgba(60,120,190,.18); } .sendm .tg.n { background: var(--line); }
.sendm .dt { width: 9px; height: 9px; border-radius: 50%; background: var(--green); flex: none; } .sendm .dt.off { background: var(--down); } .sendm .nm { font-weight: 600; } .sendm .su { color: var(--ink-2); font-size: 13px; } .sendm .btn { margin-inline-start: auto; flex: none; } .sendm .msg { padding: 10px 16px; font-weight: 600; border-top: 1px solid var(--line); } .sendm .pk { display: flex; gap: 10px; margin: 10px 16px; } .sendm .pk > div { flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; } .sendm .pk .on { border: 2px solid var(--green); background: var(--green-t); } .sendm .ft { display: flex; gap: 8px; padding: 0 16px 14px; flex-wrap: wrap; align-items: center; }
.wseg { display: inline-flex; margin-inline-start: 8px; border: 1px solid rgba(255,255,255,.3); border-radius: 9px; overflow: hidden; flex: none; } .wseg button { border: 0; background: transparent; color: inherit; padding: 6px 11px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; } .wseg button.on { background: var(--green); color: black; }
.wbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 16px; font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--line); }
.wbar.pc { background: rgba(214,154,31,.14); } .wbar.panel { background: var(--green-t); } .wbar.off { background: rgba(214,69,69,.12); }
.wbar .wsp { flex: 1; min-width: 200px; } .wbar .wcode { font-weight: 400; opacity: .75; font-size: 12.5px; }