:root {
  color-scheme: dark;
  --bg: #07100e;
  --paper: #0d1a17;
  --ink: #eff9f5;
  --muted: #91a49d;
  --line: #21332e;
  --deep: #060f0d;
  --deep2: #11211d;
  --accent: #b9f227;
  --cyan: #49d8d0;
  --warning: #ffbf47;
  --danger: #ff756b;
  --shadow: 0 18px 50px rgba(0, 0, 0, .24);
}

body {
  background: radial-gradient(circle at 82% -10%, rgba(78, 145, 120, .12), transparent 35rem), var(--bg);
  font-family: "Bahnschrift", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 3px solid rgba(185, 242, 39, .48);
  outline-offset: 3px;
}

.sidebar {
  border-right: 1px solid var(--line);
  background: rgba(6, 15, 13, .94);
  padding: 28px 18px 22px;
  backdrop-filter: blur(24px);
}
.brand, .login-mark {
  gap: 12px;
  margin: 0;
  padding: 0 10px;
  color: var(--ink);
  font-size: 1.08rem;
  letter-spacing: .18em;
  font-weight: 850;
}
.brand-mark { width: 36px; height: 36px; fill: none; stroke: var(--accent); stroke-width: 1.8; }
.brand-mark path:last-child { stroke: var(--cyan); }
.side-caption { margin: 55px 0 4px; padding: 0 13px; }
.side-caption, .nav-group, .eyebrow, .login-eyebrow { color: #657971; font-size: .72rem; letter-spacing: .16em; }
.nav-group { padding: 20px 13px 8px; }
.nav-link {
  gap: 13px;
  min-height: 48px;
  margin: 2px 0;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 600;
}
.nav-link:hover { background: rgba(255, 255, 255, .025); color: var(--ink); }
.nav-link.active {
  border-color: rgba(185, 242, 39, .2);
  background: rgba(185, 242, 39, .09);
  color: #d4ff5e;
}
.nav-icon { width: 22px; color: currentColor; font-size: 19px; }
.nav-badge { background: rgba(255, 191, 71, .15); color: var(--warning); }
.side-bottom {
  margin-top: auto;
  padding: 18px 12px 6px;
  border: 0;
  border-top: 1px solid rgba(146, 175, 164, .13);
  border-radius: 0;
  background: transparent;
}
.side-bottom strong { font-size: .9rem; font-weight: 600; }
.side-bottom small { color: #657971; font-size: .75rem; }
.pulse, .live-dot { background: var(--accent); box-shadow: 0 0 10px rgba(185, 242, 39, .55); }

.topbar {
  position: sticky;
  top: 0;
  z-index: 3;
  min-height: 82px;
  height: auto;
  padding: 12px clamp(22px, 3.2vw, 54px);
  border-bottom: 1px solid var(--line);
  background: rgba(7, 16, 14, .82);
  backdrop-filter: blur(22px);
}
.site-context { display: grid; justify-items: start; gap: 2px; min-width: 0; }
.site-context .eyebrow { margin: 0; }
.site-switch { position: relative; display: block; max-width: 100%; }
.site-switch::after { position: absolute; top: 50%; right: 2px; color: var(--muted); content: "⌄"; pointer-events: none; transform: translateY(-55%); }
.site-switch select {
  max-width: min(33vw, 360px);
  padding: 0 22px 0 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  background: transparent;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}
.site-switch select option { background: var(--paper); color: var(--ink); }
.top-section { display: none; }
.top-actions { gap: 12px; }
.clock { color: #657971; font-size: .76rem; }
.demo-badge, .demo-small {
  border: 1px solid rgba(185, 242, 39, .2);
  background: rgba(185, 242, 39, .06);
  color: #ccebb4;
  font-size: .72rem;
  letter-spacing: 0;
  font-weight: 600;
}
.badge-mobile { display: none; }
.user-button { gap: 9px; padding: 0 0 0 6px; color: var(--ink); font-size: .82rem; }
.user-button small { color: var(--muted); font-size: .72rem; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(145deg, #28423a, #172a25); color: #d4ff5e; }
.icon-button { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--muted); }

main { padding: 38px clamp(22px, 3.2vw, 54px) 70px; max-width: 1640px; }
h1 { font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1.1; }
h2 { font-size: 1.18rem; }
.page-head { margin-bottom: 27px; }
.page-head p, .section-line span, .panel-heading > span { color: var(--muted); }
.page-head .eyebrow { margin-bottom: 7px; }
.head-status, .status-chip {
  border: 1px solid rgba(185, 242, 39, .2);
  border-radius: 99px;
  background: rgba(185, 242, 39, .06);
  color: #ccebb4;
}
.head-status small { color: var(--muted); }
.status-chip.simulated { border-color: var(--line); background: var(--deep2); color: var(--muted); }

.metric-grid, .system-grid, .two-columns, .vent-unit-grid { gap: 14px; }
.metric-card, .system-card, .panel, .vent-unit-card {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(17, 33, 29, .95), rgba(10, 22, 18, .95));
  box-shadow: var(--shadow);
}
.metric-card { min-height: 178px; padding: 18px 19px; border-radius: 15px; }
.metric-card::before, .metric-card.lime::before, .metric-card.orange::before { inset: 0; width: auto; height: auto; background: linear-gradient(120deg, rgba(255, 255, 255, .025), transparent 38%); }
.metric-card:first-child { border-color: rgba(185, 242, 39, .28); background: linear-gradient(150deg, rgba(31, 53, 39, .95), rgba(11, 25, 20, .96)); }
.metric-card span { color: var(--muted); font-size: .84rem; letter-spacing: 0; text-transform: none; }
.metric-card strong { margin-top: 25px; font-size: clamp(1.8rem, 2.4vw, 2.45rem); }
.metric-card small { color: #657971; font-size: .72rem; }
.section-line { margin: 32px 0 16px; }
.section-line h2 { margin: 0; }
.system-card { min-height: 180px; padding: 20px; border-radius: 15px; }
.system-card:hover { transform: translateY(-2px); border-color: rgba(185, 242, 39, .28); box-shadow: 0 18px 50px rgba(0, 0, 0, .3); }
.system-symbol { width: 35px; height: 35px; border-radius: 10px; background: rgba(185, 242, 39, .1); color: var(--accent); }
.system-card:nth-child(3n + 2) .system-symbol { background: rgba(73, 216, 208, .1); color: var(--cyan); }
.system-card .system-head small { color: var(--muted); }
.system-card h3 { color: var(--ink); }
.system-card p { color: var(--muted); }
.system-card .system-value em { color: #657971; }
.panel { padding: 22px 24px; border-radius: 22px; }
.panel-heading { padding-bottom: 17px; border-bottom: 1px solid rgba(146, 175, 164, .13); }
.panel-heading .eyebrow { margin-bottom: 5px; }
.text-button { color: var(--cyan); }
.text-button:hover { color: var(--ink); text-decoration: none; }
.axis-labels, .alarm-mini small, .control-row span, .control-help, .range-ends { color: #657971; }
.empty-state { border-color: var(--line); color: var(--muted); }
.alarm-mini { border-color: rgba(146, 175, 164, .13); }
.alarm-dot { background: var(--warning); }
.alarm-dot.critical { background: var(--danger); }
.control-row strong, .equipment-line strong, .toggle-row strong, .zone-row strong, .power-row strong { color: var(--ink); }
.setpoint-value small, .water-big small, .equipment-line span, .toggle-row span, .zone-row span { color: var(--muted); }
.range { accent-color: var(--accent); }
.button { min-height: 43px; border: 1px solid transparent; border-radius: 10px; font-size: .78rem; }
.button-primary { background: var(--accent); color: #0c160d; }
.button-primary:hover { background: #d4ff5e; }
.button-secondary { border-color: var(--line); background: rgba(255, 255, 255, .025); color: var(--muted); }
.button-secondary:hover { background: rgba(255, 255, 255, .05); color: var(--ink); }
.segmented { border: 1px solid var(--line); background: #091310; }
.segmented button { color: var(--muted); }
.segmented button.selected { background: rgba(185, 242, 39, .1); color: #d4ff5e; box-shadow: none; }
.equipment-line, .toggle-row, .zone-row, .power-row { border-color: rgba(146, 175, 164, .13); }
.equip-bar, .power-meter { background: rgba(255, 255, 255, .07); }
.equip-bar i { background: var(--cyan); }
.equip-bar.lime i { background: var(--accent); }
.toggle { background: #31443c; }
.toggle.on { background: var(--accent); }
.notice { border-color: var(--line); background: #10211b; color: var(--muted); }
.scene { border-color: var(--line); background: #0a1713; }
.scene.selected { border-color: rgba(185, 242, 39, .42); background: rgba(185, 242, 39, .08); }
.scene small { color: var(--muted); }
.schedule-panel label, .login-dialog label, .ticket-form label, .ticket-comment-form label { color: var(--muted); }
.schedule-panel input, .login-dialog input, .ticket-form input, .ticket-form select, .ticket-form textarea, .ticket-comment-form textarea {
  border-color: var(--line);
  background: #091310;
  color: var(--ink);
}
.schedule-panel input:focus, .login-dialog input:focus, .ticket-form input:focus, .ticket-form select:focus, .ticket-form textarea:focus, .ticket-comment-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(185, 242, 39, .14);
}
input::placeholder, textarea::placeholder { color: #657971; }
select option { background: var(--paper); color: var(--ink); }
.power-meter i { background: linear-gradient(90deg, var(--cyan), var(--accent)); }

.camera-box { border: 1px solid var(--line); background: #020706; }
.camera-toolbar { color: var(--muted); }
.camera-option { border-color: var(--line); background: #0a1713; }
.camera-option.selected { border-color: rgba(185, 242, 39, .42); background: rgba(185, 242, 39, .08); }
.camera-option small, .camera-note { color: var(--muted); }
.alarm-item, .history-item { border-color: rgba(146, 175, 164, .13); }
.alarm-head time, .history-item time, .history-item .history-meta { color: #657971; }
.alarm-item p, .history-item p { color: var(--muted); }
.toast { border-color: var(--accent); background: var(--deep2); color: var(--ink); }

.vent-unit-card { border-radius: 15px; }
.vent-unit-card.selected { border-color: rgba(185, 242, 39, .42); background: linear-gradient(145deg, rgba(31, 53, 39, .95), rgba(11, 25, 20, .96)); box-shadow: var(--shadow); }
.vent-unit-top strong { color: var(--cyan); }
.vent-unit-card > small, .vent-unit-bottom small { color: var(--muted); }
.unit-indicator { background: rgba(255, 191, 71, .1); color: var(--warning); }
.unit-indicator.running { background: rgba(185, 242, 39, .09); color: #ccebb4; }
.light-group h3 { color: var(--muted); }
.toggle-row small, .zone-row small, .power-row small { color: #657971; }

.ticket-hint, .ticket-meta, .ticket-id, .ticket-thread > small { color: var(--muted); }
.ticket-filter { border-color: var(--line); background: #0a1713; color: var(--muted); }
.ticket-filter.selected { border-color: rgba(185, 242, 39, .42); background: rgba(185, 242, 39, .08); color: #d4ff5e; }
.ticket-card { border-color: var(--line); background: #0a1713; }
.ticket-status, .ticket-priority { background: #1b2d26; color: var(--muted); }
.ticket-status.new { background: rgba(255, 191, 71, .11); color: var(--warning); }
.ticket-status.in_progress { background: rgba(73, 216, 208, .11); color: var(--cyan); }
.ticket-status.resolved { background: rgba(185, 242, 39, .1); color: #d4ff5e; }
.ticket-priority.high { background: rgba(255, 117, 107, .11); color: var(--danger); }
.ticket-description { color: var(--muted); }
.ticket-thread { border-color: var(--line); }
.ticket-message { background: #13231e; }
.ticket-message.contractor { background: #1b3023; }
.ticket-message time { color: #657971; }

.login-dialog, .confirm-dialog { border: 1px solid var(--line); border-radius: 22px; background: var(--paper); color: var(--ink); box-shadow: 0 35px 100px rgba(0, 0, 0, .6); }
.login-dialog::backdrop, .confirm-dialog::backdrop { background: rgba(1, 6, 5, .88); backdrop-filter: blur(9px); }
.login-dialog { padding: 30px 34px 26px; }
.login-mark { margin: 0 0 30px; padding: 0; }
.login-eyebrow { color: #657971; }
.login-dialog > p, .confirm-dialog p { color: var(--muted); }
.login-foot { color: #657971; }
.form-error { color: var(--danger); }
.confirm-icon { background: rgba(255, 191, 71, .1); color: var(--warning); }
.confirm-dialog small { color: var(--muted); }

progress.equip-bar::-webkit-progress-bar, progress.power-meter::-webkit-progress-bar { background: rgba(255, 255, 255, .07); }
progress.equip-bar::-webkit-progress-value { background: var(--cyan); }
progress.equip-bar.lime::-webkit-progress-value { background: var(--accent); }
progress.power-meter::-webkit-progress-value { background: linear-gradient(90deg, var(--cyan), var(--accent)); }
progress.equip-bar::-moz-progress-bar { background: var(--cyan); }
progress.equip-bar.lime::-moz-progress-bar { background: var(--accent); }
progress.power-meter::-moz-progress-bar { background: var(--accent); }

@media (max-width: 900px) {
  .sidebar { box-shadow: 10px 0 30px rgba(0, 0, 0, .45); }
  .topbar { padding: 10px 18px; }
  main { padding: 25px 18px 60px; }
}
@media (max-width: 650px) {
  .topbar { min-height: 66px; }
  .top-actions { gap: 6px; }
  .site-switch select { max-width: 125px; }
  .demo-badge { display: inline-flex; padding: 7px 8px; font-size: .61rem; }
  .badge-desktop { display: none; }
  .badge-mobile { display: inline; }
  .metric-card { min-height: 142px; }
  #view-overview .metric-grid { display: flex; margin-right: -18px; padding-right: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  #view-overview .metric-grid::-webkit-scrollbar { display: none; }
  #view-overview .metric-card { flex: 0 0 78vw; scroll-snap-align: start; }
  .panel { padding: 18px; border-radius: 18px; }
  .system-card { min-height: 150px; }
  .camera-scene { height: 390px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* TAKT visual layer 1.0. Control logic and DOM identifiers are unchanged. */
:root{--bg:#171d23;--bg-elevated:#1b252d;--panel:#222b33;--panel-strong:#29343e;--paper:#222b33;--ink:#f0f3f5;--text:#f0f3f5;--muted:#b1bdc8;--muted-2:#94a4b1;--line:#3a4651;--line-soft:rgba(173,192,207,.17);--deep:#11181e;--deep2:#28343e;--signal:#ff783e;--signal-strong:#ff9b6b;--accent:#ff783e;--cyan:#91bedc;--violet:#b4becb;--amber:#f6c764;--warning:#f6c764;--red:#ff807d;--danger:#ff807d;--radius-lg:6px;--radius-md:5px;--radius-sm:4px;font-family:Arial,"Segoe UI",sans-serif}
body{background:#171d23;font-family:Arial,"Segoe UI",sans-serif}
.sidebar{background:#11181e;border-color:#3a4651;backdrop-filter:none}
.brand,.login-mark{font-size:2.1rem;letter-spacing:-.06em;font-weight:900;gap:0;color:#f0f3f5}
.brand-mark{display:none}.brand span,.login-mark span{line-height:1.1}
.nav-item,.nav-link{border-radius:4px;font-size:.9rem;color:#b1bdc8}
.nav-item.is-active,.nav-link.active{background:#ff783e;border-color:#ff783e;color:#171b20}
.nav-item:hover,.nav-link:hover{color:#fff;background:#303c46}.nav-item.is-active:hover,.nav-link.active:hover{background:#ff9b6b;color:#171b20}
.topbar{background:#1b242b;border-color:#3a4651;backdrop-filter:none}
.panel,.metric-card,.vent-unit-card,.ticket-card,.scene,.resource-card{background:#222b33;border-color:#3a4651;border-radius:6px;box-shadow:none}
.metric-primary,.metric-card:first-child,.metric-card.featured{background:#26333d;color:#f0f3f5}
.metric-primary .metric-value,.metric-primary p,.metric-primary .metric-foot{color:#f0f3f5}
.metric-icon,.metric-icon.cyan,.metric-icon.violet{color:#c2d0db;background:#33434f}
.metric-icon.amber{color:#f6c764;background:#403b2e}
.metric-top .trend.positive{color:#c7d3dc;background:#35424b}
.eyebrow,.side-caption,.nav-group,.login-eyebrow{color:#a7b4c0;font-size:.75rem}
.panel-head,.panel-heading{border-color:#3a4651}
.panel-head h2,.panel-heading h2{letter-spacing:-.025em}
.button,.icon-button,.text-button,input,select,textarea{border-radius:4px}
.button.primary,.button-primary,.scene.active{background:#ff783e;color:#171b20;border-color:#ff783e}
.button.primary:hover,.button-primary:hover{background:#ff9b6b;color:#171b20}
.button.secondary,.button-secondary{background:#29343e;color:#f0f3f5;border-color:#778896}
.button:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid #ffab83;outline-offset:3px}
input,select,textarea,.login-dialog input{background:#18222a;border-color:#566674;color:#f0f3f5}
input[type=range]{accent-color:#ff783e}
.control-panel{background:#222b33;border-color:#465762}.control-accent{background:#ff783e}
.system-visual{background:#1c2730;border-color:#475b6a;border-radius:4px}
.fan-symbol,.duct-line{border-color:#829eb2}.fan-symbol i{background:#a5bac9}.fan-symbol b{background:#d9e4eb}
.control-values,.control-values>div{background:#25313a;border-color:#47545f}
.equipment-row.is-selected{background:#2c3943;border-left-color:#ff783e}.device-glyph{background:#334651;color:#cce0ed;border-radius:4px}
.status,.state-label.good,.positive,.live-badge{color:#78dfa0;background:rgba(87,191,132,.09)}
.status.warning,.state-label.attention{color:#f6c764;background:rgba(246,199,100,.08)}
.pulse,.live-dot,.live-badge i,.gateway-state i,.dot.online{background:#72df9d;box-shadow:none}
.connection-pill{background:#28383a;color:#b6e5cc;border-color:#456257}
.spark-line{stroke:#ff914f}.spark-area{fill:rgba(255,145,79,.09)}
.login-dialog,.confirm-dialog{background:#222b33;color:#f0f3f5;border-color:#546572;border-radius:6px}
.login-dialog::backdrop,.confirm-dialog::backdrop{background:rgba(9,15,22,.85)}
.login-dialog p,.confirm-dialog p,.command-note{color:#b1bdc8}
.toast{background:#293741;border-color:#738a9a;border-radius:4px}
.toast-icon{background:#3b5246;color:#9be2b5}
.mobile-nav{background:#141c23;border-color:#43505b;border-radius:5px}
.mobile-nav button{border-radius:3px;font-size:.75rem;color:#c1cbd3}
.mobile-nav button.is-active{background:#3b2e27;color:#ffab83}
.demo-badge{background:#28343e;color:#c9d4dc;border-color:#596773}
.brand-mark path{stroke:currentColor}
.metric-card:first-child{border-color:#465762}
.metric-card small,.clock,.side-bottom small{color:#a7b4c0}
.avatar{background:#34414b;color:#f0f3f5}
.system-card{background:#222b33;border-color:#3a4651;border-radius:6px}
.system-card:hover{border-color:#ffab83}.system-symbol{background:#39414a;color:#ffab83;border-radius:4px}
.segmented{background:#18222a}.segmented button.selected,.ticket-filter.selected{background:#433328;color:#ffab83;border-color:#ffab83}
.scene.selected,.camera-option.selected,.vent-unit-card.selected{background:#2d3841;border-color:#ffab83;box-shadow:none}
.unit-indicator.running,.ticket-status.resolved{background:#283c32;color:#9be2b5}
.toast{border-left-color:#ff783e}
@media(min-width:721px) and (max-width:1180px){.app-shell .brand span{display:block;font-size:1rem;letter-spacing:-.07em}.app-shell .brand{padding:0}}
@media(max-width:720px){.panel,.metric-card,.control-panel{border-radius:5px}.login-dialog .brand span{display:block}.command-row .button{min-height:48px}.control-values strong{font-size:1.05rem}.metric-card{min-width:78vw}}

/* Client presentation - TAKT */
:root{--bg:#171d23;--paper:#222b33;--ink:#f0f3f5;--muted:#b1bdc8;--line:#3a4651;--accent:#ff6a2e;font-family:Arial,'Segoe UI',sans-serif}
.brand,.login-mark{letter-spacing:-.055em!important;font-size:38px!important;line-height:1.1}.brand small,.login-mark small{display:block;font-size:9px;font-weight:400;letter-spacing:.13em;color:#9daab5;margin-top:10px}.brand{margin-bottom:20px}.login-mark{margin-bottom:30px}.login-dialog h1{font-size:32px;line-height:1.15}.login-dialog{max-width:470px}.login-foot a{color:#ffae86}.nav-link.active{background:#ff6a2e!important;color:#171d23!important}.nav-group{margin-top:20px}.side-caption{display:none}.client-cooling-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.client-machine{padding:25px}.client-machine h2{font-size:28px;margin:10px 0 15px}.client-machine-state{color:#b1bdc8;font-size:13px}.client-machine-state.running{color:#72df9d}.client-machine-value{font-size:48px;margin-top:25px}.client-machine-value small{font-size:18px;margin-left:8px}.client-machine>p{color:#b1bdc8;font-size:13px}.client-flow{border-top:1px solid #3a4651;padding-top:18px;margin-top:25px;color:#aad3ed;font-size:13px}.client-note{margin:22px 0;font-size:13px;color:#b1bdc8}.brand span{display:block!important}.topbar{background:#1b242b}.sidebar{background:#11181e}.view .panel,.view .metric-card{border-radius:5px}.button-primary{background:#ff6a2e!important}.metric-card.featured,.metric-card:first-child{background:#26333d}.brand-mark{display:none}
@media(max-width:720px){.client-cooling-grid{grid-template-columns:1fr}.login-dialog h1{font-size:28px}.client-machine{padding:20px}.top-actions .clock{display:none}.brand small{font-size:8px}}

#passwordButton{font-size:12px;padding:9px 12px;white-space:nowrap}#passwordDialog{max-height:calc(100dvh - 24px);overflow-y:auto}#passwordDialog h2{font-size:25px;margin-bottom:12px}#passwordDialog p{font-size:13px;line-height:1.5}#passwordDialog .password-show{display:flex;align-items:center;gap:10px;margin:15px 0}#passwordDialog .password-show input{width:18px;height:18px;margin:0}.password-actions{display:flex;gap:12px;margin-top:18px}.password-actions button{flex:1}#passwordDialog input{min-width:0}@media(max-width:720px){.topbar{flex-wrap:wrap}.top-actions{flex-wrap:wrap;gap:8px}#passwordButton{font-size:11px;padding:7px 9px}#passwordDialog{padding:22px;width:calc(100% - 24px)}}

#loginDestination{width:100%;min-height:44px;padding:10px 12px;border:1px solid #60717d;border-radius:4px;background:#18222a;color:#f0f3f5;font:inherit}#loginDialog{max-height:calc(100dvh - 24px);overflow-y:auto}.login-foot{color:#b1bdc8}