/* ExcluLive: palette and Geologica from the supplied Figma design system.
   Light mode is the TechMC adaptation; semantic roles keep all tools consistent. */
@font-face { font-family: Geologica; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/geologica-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Geologica; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/geologica-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e0d0b; --sidebar-bg: #080808; --surface: #141210; --surface2: #1c1916;
  --input-bg: #0e0d0b; --hover-bg: #242019; --border: #a8987838;
  --text: #f5edd8; --muted: #a89878; --placeholder: #988970;
  --accent: #c9a96e; --accent-light: #d4af72; --accent-bright: #e2c791;
  --gold-low: #a07845; --gold-border: #c9a96e66; --gold-bg: #c9a96e14;
  --green: #4bd77c; --red: #f08080; --amber: #f5bb50; --info: #78aaff;
  --success-bg: #22c55e1a; --danger-bg: #e055551a; --warning-bg: #f59e0b14;
  --danger-border: #e0555559; --warning-border: #f59e0b59; --success-border: #22c55e59;
  --focus: #c9a96e3d; --shadow: #00000026; --shadow-strong: #00000080;
  --backdrop: #080808b8; --on-accent: #1a1208; --offline: #857961;
  --primary-fill: linear-gradient(115deg, #d4af72 0%, #c9a96e 48%, #a07845 100%);
  --primary-hover: linear-gradient(115deg, #e2c791 0%, #d4af72 60%, #b8885a 100%);
  font-family: Geologica, Inter, "Segoe UI", sans-serif;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f2eb; --sidebar-bg: #fbf9f4; --surface: #fffdf9; --surface2: #efe9de;
  --input-bg: #ffffff; --hover-bg: #f0e9dc; --border: #d6ccba;
  --text: #252019; --muted: #70634f; --placeholder: #7b6e59;
  --accent: #82602e; --accent-light: #795725; --accent-bright: #63471f;
  --gold-low: #a07845; --gold-border: #ad8b505e; --gold-bg: #b38b4512;
  --green: #19713a; --red: #b33636; --amber: #875609; --info: #2458a8;
  --success-bg: #e6f3e8; --danger-bg: #fbeceb; --warning-bg: #fff2d8;
  --danger-border: #dd9693; --warning-border: #d7b773; --success-border: #97cba5;
  --focus: #9d77312b; --shadow: #4f38130a; --shadow-strong: #4f381324;
  --backdrop: #28201480; --on-accent: #1a1208; --offline: #8a7b63;
}
html { scrollbar-color: var(--gold-border) var(--sidebar-bg); }
body { font-family: Geologica, Inter, "Segoe UI", sans-serif; font-weight: 300; font-size: 14px; line-height: 1.55; }
h1, h2, h3 { font-family: inherit; color: var(--text); letter-spacing: -.035em; line-height: 1.25; font-weight: 400; }
h1 { font-size: 26px; } h2 { font-size: 30px; } h3 { font-size: 18px; }
b, strong { font-weight: 500; }
.eyebrow { font-weight: 500; letter-spacing: .14em; font-size: 10px; }
.topbar { height: 76px; gap: 24px; padding: 0 28px; background: var(--sidebar-bg); }
.brand { color: var(--text); font-size: 19px; font-weight: 500; gap: 12px; white-space: nowrap; }
.brand-mark { width: 36px; height: 36px; border-radius: 12px; font-weight: 500; color: var(--on-accent); background: var(--primary-fill); }
.brand small { display: block; margin-top: 1px; color: var(--muted); font-size: 10px; font-weight: 300; letter-spacing: .04em; }
.account { gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.account #userName { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.account > .small-button { font-size: 12px; padding: 9px 12px; }
.theme-control { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.theme-control select { height: 36px; max-width: 136px; padding: 0 8px; font-size: 12px; }
.login-theme { position: absolute; right: 24px; top: 24px; }
.layout { height: calc(100dvh - 76px); grid-template-columns: clamp(320px, 25vw, 400px) minmax(0, 1fr); }
.sidebar { padding: 26px 20px 16px; overflow: hidden; }
.filters { grid-template-columns: 1fr 1fr; gap: 10px; }
.filters select { height: 38px; }
.device-list { flex: 1; margin: 4px -6px 0; padding: 0 6px; gap: 6px; }
.device-item { border-radius: 12px; grid-template-columns: 30px minmax(0, 1fr); }
.device-item.selected { background: var(--gold-bg); border-color: var(--gold-border); }
.device-item.selected .device-name { color: var(--accent-light); }
.device-open { padding: 12px 10px; }
.device-name { font-size: 14px; }
.device-group { margin-top: 4px; font-size: 11px; }
.device-pagination { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 12px; }
.workspace { padding: 32px clamp(20px, 3vw, 48px); }
.device-panel { max-width: 1160px; }
.device-header { padding: 0 2px 4px; }
.card, dialog, .login { background: var(--surface); border: 1px solid var(--border); box-shadow: 0 8px 28px var(--shadow); border-radius: 18px; }
.card { padding: 24px; margin-bottom: 18px; }
.control-section > summary { font-size: 16px; font-weight: 500; padding: 2px 0; }
.control-section > summary::marker { color: var(--accent); font-size: 12px; }
.control-section[open] > summary { padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.button, .small-button, .icon-button { border-radius: 10px; font-weight: 400; }
.button { min-height: 42px; padding: 10px 16px; line-height: 1.4; }
.button.primary, .login button { background: var(--primary-fill); color: var(--on-accent); border: 1px solid transparent; box-shadow: 0 3px 12px var(--focus); font-weight: 500; }
.button.primary:hover:not(:disabled), .login button:hover:not(:disabled) { background: var(--primary-hover); box-shadow: 0 4px 18px var(--focus); }
.button.secondary, .small-button, .icon-button { border-color: var(--gold-border); background: transparent; color: var(--accent-light); }
.button.secondary:hover:not(:disabled), .small-button:hover:not(:disabled), .icon-button:hover:not(:disabled) { background: var(--gold-bg); border-color: var(--accent); }
.button.warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--amber); }
.button.danger, .small-button.danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--red); }
.button.danger:hover:not(:disabled), .small-button.danger:hover:not(:disabled) { border-color: var(--red); }
button:disabled, .button:disabled { opacity: .42; box-shadow: none; }
.status-pill, .job-status, .save-state { font-size: 11px; font-weight: 400; border: 1px solid var(--border); background: var(--surface2); }
.status-pill.online, .job-status.succeeded { color: var(--green); background: var(--success-bg); border-color: var(--success-border); }
.status-pill.offline, .job-status.failed { color: var(--red); background: var(--danger-bg); border-color: var(--danger-border); }
.search { height: 44px; border-radius: 10px; }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea { border-radius: 9px; }
select { min-height: 38px; padding: 8px 10px; max-width: 100%; }
label:has(> select) { gap: 6px; }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; flex-shrink: 0; vertical-align: middle; }
input:focus, select:focus, textarea:focus, .search:focus-within { box-shadow: 0 0 0 3px var(--focus); }
.tabs { border: 1px solid var(--border); padding: 4px; border-radius: 11px; }
.tab { font-size: 12px; padding: 8px 14px; border-radius: 7px; }
.tab.active { background: var(--gold-bg); color: var(--accent-light); }
.dialog-content { padding: 28px; }
.dialog-content h2 { font-size: 25px; }
dialog { box-shadow: 0 24px 80px var(--shadow-strong); max-height: calc(100dvh - 32px); }
dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(5px); }
.dialog-content, .network-content { max-height: calc(100dvh - 34px); overflow-y: auto; }
.job-row, .obs-stream-target, .network-room, .network-provider-card, .network-dhcp-row { border-radius: 10px; }
.job-row summary { padding: 13px 15px; }
.job-row pre { padding: 16px; line-height: 1.7; }
.how-to-use { border-color: var(--border); background: var(--gold-bg); border-radius: 10px; }
.how-to-use summary { font-weight: 400; padding: 10px 12px; }
.how-to-use-body { padding: 0 12px 12px; line-height: 1.6; }
.obs-warning, .hint { line-height: 1.6; }
.network-note, .network-transaction { background: var(--gold-bg); color: var(--text); border-color: var(--gold-border); }
.network-resource { border-color: var(--border); background: var(--border); border-radius: 12px; }
.network-room { background: var(--surface); border-color: var(--border); }
.network-room:has(input:checked) { background: var(--gold-bg); border-color: var(--gold-border); }
.network-badge { background: var(--warning-bg); color: var(--amber); }
.network-badge.ok { background: var(--success-bg); color: var(--green); }
.network-status.error, .network-wifi-secret.error, .network-inline-warning { color: var(--red); }
.network-device.online { color: var(--green); } .network-device.offline { color: var(--muted); }
.login { width: min(460px, calc(100% - 32px)); padding: 36px; margin: 15vh auto 40px; }
.login h1 { font-size: 32px; font-weight: 400; }
.login p { font-size: 13px; }
.login input { height: 46px; }
.login button { min-height: 46px; border-radius: 10px; }
.login::before { font-weight: 400; font-size: 10px; letter-spacing: .16em; }
::selection { color: var(--text); background: var(--focus); }
@media (max-width: 1200px) {
  .topbar { height: auto; min-height: 76px; padding: 14px 20px; align-items: flex-start; }
  .layout { height: auto; min-height: calc(100dvh - 100px); }
  .sidebar { max-height: calc(100dvh - 24px); position: sticky; top: 0; }
  .workspace { overflow: visible; padding: 24px 20px; }
}
@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; gap: 16px; }
  .account { justify-content: flex-start; }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; max-height: none; overflow: visible; border-right: 0; }
  .device-list { flex: none; max-height: 300px; }
  .workspace { padding: 24px 16px; }
}
@media (max-width: 560px) {
  .topbar { padding: 18px 16px; }
  .account { gap: 8px; }
  .account > .small-button { padding: 8px 10px; font-size: 11px; }
  .theme-control { gap: 6px; }
  .layout { min-width: 0; }
  .card { padding: 18px 16px; border-radius: 14px; }
  .dialog-content { padding: 20px 16px; }
  .dialog-actions, .script-footer, .title-row { flex-wrap: wrap; }
  .profile-row, .catalog-layout, .form-grid, .provision-grid, .settings-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid .wide, .settings-grid .wide { grid-column: auto; }
  .login { padding: 28px 22px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; animation: none !important; } }
[hidden] { display: none !important; }
.execution-time { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--border, #786338); border-radius: 12px; }
.execution-time label { display: grid; gap: 6px; }
.execution-time input, .execution-time select { width: 100%; min-height: 42px; box-sizing: border-box; }
.schedule-card { padding: 16px; margin-top: 12px; border: 1px solid var(--border, #786338); border-radius: 12px; overflow-wrap: anywhere; }
.installer-advanced { grid-column: 1 / -1; padding: 12px 0; }
.installer-advanced summary { cursor: pointer; margin-bottom: 12px; }
.workspace-nav { display:flex; flex-wrap:wrap; gap:6px; padding:8px 0 16px; border-bottom:1px solid var(--border); margin-bottom:20px; }
.workspace-nav button { border:1px solid transparent; border-radius:8px; background:transparent; color:var(--muted); padding:10px 12px; cursor:pointer; font:inherit; font-size:13px; }
.workspace-nav button:hover { color:var(--text); background:var(--surface); }
.workspace-nav button[aria-current] { color:var(--text); background:var(--gold-bg); border-color:var(--gold-border); font-weight:700; }
.task-home h3 { margin:0 0 8px; font-size:22px; }
.task-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:22px 0; }
.task-tile { display:flex; flex-direction:column; align-items:flex-start; gap:10px; text-align:left; padding:22px; border:1px solid var(--border); border-radius:14px; background:var(--surface); color:var(--text); cursor:pointer; font:inherit; }
.task-tile strong { font-size:16px; }
.task-tile span { font-size:13px; line-height:1.5; color:var(--muted); }
.task-tile:hover { border-color:var(--gold-border); background:var(--gold-bg); }
.workspace-nav button:focus-visible, .task-tile:focus-visible, .global-tools summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.target-bar { padding:16px 20px; margin-bottom:12px; }
.workspace-scope { display:block; font-size:14px; margin-bottom:12px; }
.target-bar .section-heading { margin-bottom:0; }
.target-bar select { min-width:210px; max-width:100%; }
.target-bar .section-heading > div { display:flex; flex-wrap:wrap; gap:8px; }
.target-bar .section-heading .muted { width:100%; margin:4px 0; font-size:12px; }
.target-bar .how-to-use { display:none; }
.setup-options { border-top:1px solid var(--border); padding-top:16px; margin-top:20px; }
.setup-options > summary { cursor:pointer; font-weight:600; margin-bottom:16px; }
.global-tools { position:relative; }
.global-tools > summary { cursor:pointer; color:var(--text); font-size:13px; padding:10px 14px; border:1px solid var(--border); border-radius:8px; }
.global-tools-menu { position:absolute; right:0; top:calc(100% + 8px); z-index:30; width:240px; padding:10px; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 32px #0004; display:grid; gap:6px; }
.global-tools-menu button { text-align:left; width:100%; }
@media(max-width:600px) { .task-grid { grid-template-columns:1fr; } .workspace-nav { gap:4px; } .workspace-nav button { padding:9px; } .target-bar { padding:14px; } }
.installer-advanced label { display: grid; gap: 6px; margin: 10px 0; }
#softwareDialog .dialog-actions { position: sticky; bottom: -1px; background: var(--bg, Canvas); padding: 14px 0; border-top: 1px solid var(--border, #786338); z-index: 2; }