:root {
  --bg: #020403;
  --panel: rgba(9, 13, 12, 0.95);
  --line: #26302d;
  --line-soft: #18211e;
  --text: #f5f7f6;
  --muted: #a4aca9;
  --green: #12f53b;
  --green2: #00d928;
  --radius: 18px;
  --shadow: 0 24px 70px rgba(0,0,0,.45);
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; min-height: 100vh; color: var(--text);
  background:
    radial-gradient(circle at 72% -10%, rgba(30,255,68,.08), transparent 24rem),
    radial-gradient(circle at 0 25%, rgba(30,255,68,.035), transparent 30rem),
    linear-gradient(180deg,#060908 0%,#020403 68%);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased; overscroll-behavior: none;
}
button,input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.shell { width:min(1800px,100%); margin:0 auto; padding:18px 18px 36px; }
.brandbar {
  min-height:142px; display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:8px 24px 16px; border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,.03));
}
.brand-logo { width:clamp(300px,34vw,570px); max-height:130px; object-fit:contain; object-position:left center; }
.connection {
  display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; font-weight:750;
  letter-spacing:.12em; border:1px solid var(--line); padding:10px 13px; border-radius:999px;
}
.connection span { width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 15px rgba(18,245,59,.75); }
.connection.offline span { background:#ff4f4f; box-shadow:0 0 15px rgba(255,79,79,.5); }
main { padding-top:18px; }
.zone-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.zone-card {
  position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); padding:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 42%),radial-gradient(circle at 50% 80%,rgba(12,255,55,.09),transparent 55%),var(--panel);
  box-shadow:var(--shadow);
}
.zone-card::before { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(90deg,transparent 0 58px,rgba(255,255,255,.018) 59px 60px); opacity:.5; }
.zone-head,.zone-slider,.preset-row { position:relative; z-index:1; }
.zone-head h2 { margin:0 0 5px; font-size:clamp(20px,1.6vw,30px); line-height:1; }
.zone-head p { margin:0; color:#d1d4d3; font-size:14px; letter-spacing:.06em; }
.zone-slider { display:grid; grid-template-columns:1fr 68px; align-items:center; gap:12px; margin-top:52px; }
.level-readout,.row-level { white-space:nowrap; }
.level-readout { text-align:right; font-size:20px; font-weight:750; }
.level-readout.mixed::after,.row-level.mixed::after { content:" MIX"; font-size:9px; color:var(--green); letter-spacing:.1em; vertical-align:middle; }
input[type="range"] { appearance:none; width:100%; height:34px; margin:0; background:transparent; cursor:pointer; touch-action:pan-y; }
input[type="range"]::-webkit-slider-runnable-track { height:10px; border-radius:999px; background:linear-gradient(90deg,var(--green) 0 var(--fill,0%),#252b29 var(--fill,0%) 100%); }
input[type="range"]::-webkit-slider-thumb { appearance:none; width:24px; height:24px; border-radius:50%; background:#f8f8f8; margin-top:-7px; box-shadow:0 0 0 1px rgba(0,0,0,.3),0 4px 18px rgba(0,0,0,.45); }
input[type="range"]::-moz-range-track { height:10px; border-radius:999px; background:#252b29; }
input[type="range"]::-moz-range-progress { height:10px; border-radius:999px; background:var(--green); }
input[type="range"]::-moz-range-thumb { width:24px; height:24px; border:0; border-radius:50%; background:#f8f8f8; }
.preset-row { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-top:18px; }
.preset { min-height:48px; border-radius:10px; border:1px solid #303735; background:linear-gradient(180deg,#1c2220,#111514); color:white; font-weight:760; cursor:pointer; transition:.12s ease; user-select:none; }
.preset:hover { border-color:#4a5551; transform:translateY(-1px); }
.preset:active { transform:translateY(1px) scale(.99); }
.preset.primary,.preset.active { color:#001b05; background:linear-gradient(180deg,#29ff4b,#0be72f); border-color:#2aff4b; box-shadow:0 0 25px rgba(18,245,59,.28),inset 0 0 0 1px rgba(255,255,255,.2); }
.preset.off { font-weight:680; }
.rows-panel { margin-top:14px; border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; background:rgba(3,6,5,.84); }
.light-row { min-height:63px; display:grid; grid-template-columns:72px 190px 118px minmax(220px,1fr) 82px 370px; gap:14px; align-items:center; padding:7px 16px; border-bottom:1px solid #17201d; background:linear-gradient(90deg,rgba(255,255,255,.012),transparent 42%); }
.light-row:last-child { border-bottom:none; }
.row-number { width:58px; height:44px; display:grid; place-items:center; border-radius:10px; background:#171c1a; border:1px solid #2b3230; font-weight:760; font-size:18px; }
.row-name { font-weight:680; font-size:17px; }
.row-name small { display:block; margin-top:3px; color:#7d8884; font-size:9px; letter-spacing:.12em; }
.zone-badge { justify-self:start; min-width:90px; text-align:center; padding:8px 12px; color:var(--green); border:1px solid rgba(18,245,59,.66); background:rgba(18,245,59,.04); border-radius:8px; font-size:13px; font-weight:800; }
.row-level { font-weight:760; font-size:17px; text-align:center; }
.row-presets { display:grid; grid-template-columns:72px 82px 92px 108px; gap:8px; justify-content:end; }
.row-presets .preset { min-height:42px; }
.toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); opacity:0; pointer-events:none; padding:11px 16px; background:#121715; border:1px solid #39433f; border-radius:10px; color:white; transition:.2s ease; z-index:100; box-shadow:var(--shadow); }
.toast.show { transform:translate(-50%,0); opacity:1; }
@media (max-width:1280px) {
  .zone-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .light-row { grid-template-columns:58px 130px 90px minmax(180px,1fr) 70px 328px; gap:9px; padding-inline:10px; }
  .row-presets { grid-template-columns:64px 72px 82px 94px; gap:6px; }
}
@media (max-width:860px) {
  .shell { padding:10px 10px 26px; }
  .brandbar { min-height:105px; padding:4px 8px 12px; }
  .brand-logo { width:min(410px,78vw); }
  .connection { display:none; }
  .zone-grid { grid-template-columns:1fr; }
  .zone-card { padding:18px 15px; }
  .zone-slider { margin-top:32px; }
  .light-row { grid-template-columns:50px 1fr 86px; gap:8px; padding:12px 10px; }
  .row-number { width:46px; height:40px; }
  .zone-badge { min-width:78px; justify-self:end; }
  .row-slider { grid-column:1 / 3; margin-top:3px; }
  .row-level { grid-column:3; grid-row:2; }
  .row-presets { grid-column:1 / -1; grid-template-columns:repeat(4,1fr); width:100%; margin-top:2px; }
  .row-presets .preset { min-height:48px; }
}

/* v0.2.3 — photographic hall backgrounds restored */
.brandbar {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(1,3,2,.98) 0%, rgba(1,3,2,.91) 34%, rgba(1,3,2,.58) 70%, rgba(1,3,2,.76) 100%),
    url('/static/header-hall.jpg') center right / cover no-repeat;
}
.brandbar::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background: radial-gradient(circle at 78% 50%, rgba(18,245,59,.10), transparent 31%);
}
.brand-logo,
.connection { position: relative; z-index: 2; }

.zone-card {
  isolation:isolate;
  background-color:var(--panel);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}
.zone-card[data-zone-card="front"] {
  background-image:
    linear-gradient(180deg, rgba(2,5,4,.34) 0%, rgba(2,5,4,.64) 46%, rgba(2,5,4,.98) 82%),
    linear-gradient(90deg, rgba(0,0,0,.20), rgba(15,255,55,.08)),
    url('/static/zone-front.jpg');
}
.zone-card[data-zone-card="middle"] {
  background-image:
    linear-gradient(180deg, rgba(2,5,4,.34) 0%, rgba(2,5,4,.64) 46%, rgba(2,5,4,.98) 82%),
    linear-gradient(90deg, rgba(0,0,0,.18), rgba(15,255,55,.055)),
    url('/static/zone-middle.jpg');
}
.zone-card[data-zone-card="back"] {
  background-image:
    linear-gradient(180deg, rgba(2,5,4,.34) 0%, rgba(2,5,4,.64) 46%, rgba(2,5,4,.98) 82%),
    linear-gradient(90deg, rgba(0,0,0,.18), rgba(15,255,55,.085)),
    url('/static/zone-back.jpg');
}
.zone-card[data-zone-card="all"] {
  background-image:
    linear-gradient(180deg, rgba(2,5,4,.34) 0%, rgba(2,5,4,.64) 46%, rgba(2,5,4,.98) 82%),
    linear-gradient(90deg, rgba(0,0,0,.16), rgba(15,255,55,.065)),
    url('/static/zone-all.jpg');
}
.zone-card::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 28%),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.05), transparent 48%);
  opacity:1;
}
.zone-card::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  box-shadow: inset 0 0 55px rgba(0,0,0,.36);
}
.zone-head h2 { text-shadow: 0 2px 12px rgba(0,0,0,.9); }
.zone-head p { text-shadow: 0 2px 8px rgba(0,0,0,.9); }

@media (max-width:860px) {
  .brandbar {
    background-position: 62% center;
    background-image:
      linear-gradient(90deg, rgba(1,3,2,.98) 0%, rgba(1,3,2,.84) 58%, rgba(1,3,2,.68) 100%),
      url('/static/header-hall.jpg');
  }
  .zone-card { min-height: 220px; }
}

/* v0.3.1 authentication */
.header-actions { display:flex; align-items:center; gap:10px; position:relative; z-index:3; }
.logout-button {
  min-height:38px; padding:0 14px; border-radius:999px; border:1px solid #303a36;
  background:rgba(7,11,9,.82); color:#dce1df; font-size:11px; font-weight:800; letter-spacing:.08em;
  cursor:pointer;
}
.logout-button:hover { border-color:#52605a; color:white; }
.login-overlay {
  position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px;
  background:
    linear-gradient(90deg,rgba(1,4,2,.96),rgba(1,4,2,.78)),
    url('/static/header-hall.jpg') center / cover no-repeat,
    #020403;
  transition:opacity .18s ease, visibility .18s ease;
}
.login-overlay.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.login-card {
  width:min(430px,100%); padding:30px; border:1px solid rgba(34,255,68,.26); border-radius:22px;
  background:linear-gradient(180deg,rgba(12,18,15,.96),rgba(4,8,6,.97));
  box-shadow:0 30px 90px rgba(0,0,0,.65), 0 0 50px rgba(18,245,59,.07);
}
.login-logo { display:block; width:min(300px,85%); max-height:105px; object-fit:contain; object-position:left center; margin-bottom:12px; }
.login-kicker { color:var(--green); font-size:11px; font-weight:850; letter-spacing:.18em; margin-bottom:18px; }
.login-card h1 { margin:0 0 8px; font-size:30px; }
.login-card p { margin:0 0 24px; color:var(--muted); font-size:14px; line-height:1.45; }
.login-card label { display:block; margin:0 0 14px; color:#b8c1bd; font-size:12px; font-weight:750; letter-spacing:.04em; }
.login-card input {
  display:block; width:100%; margin-top:7px; height:50px; padding:0 14px; border-radius:11px;
  border:1px solid #303a36; outline:none; background:#080d0b; color:white; font-size:16px;
}
.login-card input:focus { border-color:rgba(18,245,59,.85); box-shadow:0 0 0 3px rgba(18,245,59,.08); }
.login-submit {
  width:100%; height:52px; margin-top:5px; border:0; border-radius:11px; cursor:pointer;
  color:#001b05; background:linear-gradient(180deg,#29ff4b,#0be72f); font-weight:900; letter-spacing:.06em;
  box-shadow:0 0 28px rgba(18,245,59,.18);
}
.login-submit:disabled { opacity:.6; cursor:wait; }
.login-error { min-height:20px; margin-top:12px; color:#ff7777; font-size:13px; text-align:center; }
body.auth-locked { overflow:hidden; }
body.auth-locked #appShell { filter:blur(8px); pointer-events:none; user-select:none; }
@media (max-width:860px) {
  .header-actions { margin-left:auto; }
  .logout-button { min-height:34px; padding:0 11px; font-size:9px; }
  .login-card { padding:24px 20px; border-radius:18px; }
  .login-logo { width:min(260px,90%); }
}

.admin-button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;min-height:34px;padding:0 12px;border:1px solid rgba(21,244,61,.35);border-radius:999px;color:var(--green);font-size:10px;font-weight:850;letter-spacing:.06em;background:rgba(7,18,11,.72)}.admin-button:hover{background:rgba(21,244,61,.1)}.admin-button[hidden]{display:none!important;}


/* v0.3.5: 30 individual controls, 10x3; independent dimmers + row presets */
.light-row .fixture-strip {
  grid-column: 1 / -1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px; padding:7px 0 12px;
}
.fixture-card {
  padding:11px 14px; min-width:0; border:1px solid #26362c; border-radius:10px;
  background:linear-gradient(120deg,rgba(14,23,17,.95),rgba(7,12,9,.95));
}
.fixture-top { display:flex; justify-content:space-between; gap:12px; align-items:center; color:var(--text); font-size:12px; }
.fixture-top strong { font-size:16px; color:var(--green); }
.fixture-top span { font-weight:700; }
.fixture-card input[type="range"] { height:31px; }
.fixture-card input[type="range"]::-webkit-slider-thumb { width:21px; height:21px; margin-top:-6px; }
.fixture-off {
  cursor:pointer; background:#1a2220; border:1px solid #465048; border-radius:7px;
  color:#fff; font-size:10px; font-weight:780; padding:6px 12px; min-height:29px;
}
.fixture-unavailable { opacity:.48; border-style:dashed; }
.fixture-unavailable input, .fixture-unavailable button { cursor:not-allowed; }
@media(max-width:860px) {
  .light-row .fixture-strip { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
  .fixture-card { padding:8px 7px; }
  .fixture-off { width:100%; padding:6px 2px; }
  .fixture-top { font-size:10px; }
  .fixture-top strong { font-size:13px; }
}