/*
SmartHome Scope verwendet eine ruhige dunkle Oberfläche mit Amber-Akzent.
Beispiel: Am 20. August 2026 erklärt ein kompaktes Badge die sichere UniFi-Namensbereinigung.
Aktueller Stand: 1.16.0 vom 20. August 2026, 13:12 Europe/Vienna: PWA-Diagnose, Statuskennzeichen und Updateaktion gestaltet.
Versionshistorie: 1.11.0 vom 16. August 2026, 16:20 Europe/Vienna: Eigenständige Piding-Inventaroberfläche ergänzt. 1.10.0 vom 16. August 2026, 12:35 Europe/Vienna: Mehrseitigen UniFi-Übernahme-Assistenten, Konfliktkarten und Auditdarstellung ergänzt. 1.9.0 vom 16. August 2026, 12:00 Europe/Vienna: Controllergeführte UniFi-Netzkarten, Filterleiste und sichere Auswahlzustände ergänzt. 1.7.1 vom 16. August 2026, 10:00 Europe/Vienna: Einheitliche moderne Modals ergänzt. 1.7.0 vom 16. August 2026, 09:30 Europe/Vienna: UniFi-Vergleichsdialog ergänzt. 1.6.0 vom 16. August 2026, 09:00 Europe/Vienna: Bereichsfarbe auch als dezente Kartenfläche ergänzt. 1.4.3 vom 16. August 2026, 08:20 Europe/Vienna: Dezente Bereichstöne in Tabellen ergänzt. 1.4.2 vom 16. August 2026, 08:00 Europe/Vienna: Passwort-Augen-Schalter ergänzt. 1.4.0 vom 16. August 2026, 07:30 Europe/Vienna: Bereichsfarben und Canvas-Landschaft ergänzt. 1.3.0 vom 15. August 2026, 21:30 Europe/Vienna: Material-Symbole, eigene Auswahllisten und stabile Knoten-Interaktion ergänzt. 1.0.0 vom 15. August 2026, 12:00 Europe/Vienna: Erstauslieferung.
Konfiguration: Die Farbvariablen in :root definieren das Anwendungsthema.
*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;600;700&display=swap');
.pwa-status-card { display: grid; }

:root { font-family: "Roboto Condensed", sans-serif; color: #f1eee7; background: #11110f; --surface: #1b1b18; --surface-raised: #242420; --line: #393832; --muted: #a8a59a; --amber: #f5b942; --amber-strong: #ffd06a; --danger: #ff8b80; --success: #a5d6a7; --shadow: 0 14px 34px rgba(0,0,0,.22); }
* { box-sizing: border-box; }
html { background: #11110f; }
body { min-height: 100vh; margin: 0; color: #f1eee7; background: #11110f; font-family: inherit; line-height: 1.45; }
button, input, select, textarea { font: inherit; }
a { color: var(--amber-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
button, .primary-button, .secondary-button { min-height: 42px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; transition: transform .16s ease, background .16s ease, border-color .16s ease; }
button:disabled, .primary-button:disabled, .secondary-button:disabled { cursor: wait; opacity: .62; transform: none; }
.button-with-icon { gap: 8px; }
button:hover, .primary-button:hover, .secondary-button:hover { transform: translateY(-1px); text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; font-weight: 700; color: #1a1302; background: var(--amber); }
.primary-button:hover { color: #1a1302; background: var(--amber-strong); }
.secondary-button { display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; color: #f1eee7; background: transparent; border-color: #5a574d; }
.secondary-button:hover { color: #f1eee7; background: #302f2a; }
.text-button { padding: 0; color: var(--muted); background: transparent; border: 0; min-height: auto; text-align: left; }
.text-button.danger, .danger { color: var(--danger); }
.content { max-width: 1480px; margin: 0 auto; padding: 34px; }
.page-header { display: flex; gap: 20px; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.page-header h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1; letter-spacing: -.025em; }
h2 { margin-bottom: 10px; font-size: 1.25rem; }
.eyebrow { margin-bottom: 6px; color: var(--amber); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.card { padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.metric-grid, .area-grid, .chart-grid { display: grid; gap: 16px; margin-bottom: 18px; }
.metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric-card { min-height: 148px; display: flex; flex-direction: column; gap: 6px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.metric-card span, .metric-card small { color: var(--muted); }
.metric-card strong { font-size: 2.35rem; line-height: 1.1; }
.metric-card.attention { border-color: #725735; }
.metric-card a { margin-top: auto; font-size: .9rem; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.section-heading h2 { margin: 0; }
.area-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.area-grid.large { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.area-card { min-height: 145px; display: flex; flex-direction: column; padding: 20px; color: #f1eee7; background: color-mix(in srgb, var(--area-color, #1b1b18) 7%, #1b1b18); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.area-card:hover { color: #fff; border-color: #7b6840; text-decoration: none; }
.area-card h2 { margin-bottom: 10px; }.area-card strong { font-size: 2rem; }.area-card small { color: var(--muted); }.card-link { margin-top: auto; color: var(--amber-strong); }
.callout { margin-top: 18px; }.callout p { color: var(--muted); }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }.toolbar > span { color: var(--muted); }
.search-form { flex: 1; display: flex; gap: 10px; }.search-form input { max-width: 480px; }
.search-control { position: relative; display: block; }.search-control input { padding-right: 76px; }.clear-search { position: absolute; top: 50%; right: 7px; min-height: 30px; padding: 0 8px; color: var(--muted); background: #2c2b26; border-color: #514e44; transform: translateY(-50%); font-size: .78rem; }.clear-search:hover { transform: translateY(-50%); color: var(--amber-strong); }
.filter-form { flex: 1; display: grid; grid-template-columns: 1.5fr repeat(4, minmax(150px, 1fr)) auto; gap: 12px; align-items: end; }.filter-form label { font-size: .85rem; }.filter-actions { display: flex; gap: 8px; }.inline-form { display: flex; align-items: end; gap: 12px; margin: 22px 0 14px; }.inline-form > div { max-width: 220px; }.file-picker { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; padding: 13px; background: #151512; border: 1px dashed #655d4b; border-radius: 10px; }.file-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }.file-picker small { grid-column: 1 / -1; }.file-picker strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
label { display: block; margin-bottom: 7px; font-weight: 600; } input, select, textarea { width: 100%; color: #f5f1e9; background: #121210; border: 1px solid #57534a; border-radius: 9px; padding: 10px 12px; } textarea { resize: vertical; } input::placeholder { color: #77746c; } small { color: var(--muted); }
.form-card { max-width: 980px; }.form-intro { color: var(--muted); }.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }.span-two { grid-column: span 2; }.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 26px; }
.stack { display: grid; align-content: start; gap: 18px; }.stack-form { display: grid; gap: 11px; }.stack-form button { margin-top: 5px; }.checkbox { display: flex; align-items: start; gap: 10px; color: var(--muted); font-weight: 400; }.checkbox input { width: auto; margin-top: 4px; }
.table-card { padding: 0; overflow: hidden; }.table-scroll { overflow-x: auto; }table { width: 100%; border-collapse: collapse; font-size: .95rem; }th, td { padding: 13px 15px; border-bottom: 1px solid #34332e; text-align: left; vertical-align: top; }th { color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }tr:last-child td { border-bottom: 0; }.area-row { background: color-mix(in srgb, var(--area-color) 5%, #1b1b18); }.area-row:hover { background: color-mix(in srgb, var(--area-color) 12%, #24231f); }.mono { font-family: "Roboto Condensed", monospace; }.ip-value { color: #f6eee0; font-weight: 600; }
th button { min-height: auto; padding: 0; color: inherit; background: transparent; border: 0; font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; }th button:hover, th button[data-direction="asc"], th button[data-direction="desc"] { color: var(--amber-strong); transform: none; }th button[data-direction="asc"]::after { content: " aufsteigend"; }th button[data-direction="desc"]::after { content: " absteigend"; }
.scope-scene { min-height: 390px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 20px; margin-bottom: 18px; overflow: hidden; background: radial-gradient(circle at 73% 48%, #39321d 0, #201f1a 28%, #1b1b18 65%); }.scene-copy { align-self: center; position: relative; z-index: 1; }.scene-copy h2 { font-size: clamp(2rem, 4vw, 3.6rem); }.scene-copy p:not(.eyebrow) { color: var(--muted); max-width: 330px; }.scene-copy dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.scene-copy dt { color: var(--muted); font-size: .85rem; }.scene-copy dd { margin: 0; font-size: 1.35rem; font-weight: 700; }.scene-stage { position: relative; min-height: 350px; perspective: 900px; transform-style: preserve-3d; }.scene-core { position: absolute; z-index: 3; top: 50%; left: 50%; width: 132px; height: 132px; display: grid; place-content: center; text-align: center; border-radius: 50%; color: #201704; background: radial-gradient(circle at 35% 30%, #ffe49f, #f5b942 52%, #9e6911); box-shadow: 0 0 0 18px rgba(245,185,66,.07), 0 35px 45px rgba(0,0,0,.4); transform: translate(-50%,-50%) translateZ(50px); }.scene-core strong { font-size: 2.6rem; line-height: 1; }.scene-core span { font-weight: 700; }.orbit { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(245,185,66,.35); border-radius: 50%; transform-style: preserve-3d; animation: orbit-spin 18s linear infinite; }.orbit-one { width: 330px; height: 180px; transform: translate(-50%,-50%) rotateX(67deg) rotateZ(0); }.orbit-two { width: 250px; height: 280px; border-color: rgba(241,238,231,.18); animation-duration: 25s; animation-direction: reverse; transform: translate(-50%,-50%) rotateX(72deg) rotateY(25deg); }.scene-node { position: absolute; z-index: 4; width: 105px; padding: 9px; color: #fff7e4; background: rgba(38,37,32,.92); border: 1px solid #776038; border-radius: 10px; box-shadow: 0 15px 22px rgba(0,0,0,.28); transform: translate(-50%,-50%) translateZ(25px); animation: node-float 5s ease-in-out infinite; }.scene-node span, .scene-node strong { display: block; }.scene-node span { overflow: hidden; color: var(--muted); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }.scene-node strong { color: var(--amber-strong); font-size: 1.25rem; }.scene-node:hover { border-color: var(--amber); background: #383326; }.scene-node:nth-child(2n) { animation-delay: -2s; }.scene-node:nth-child(3n) { animation-delay: -4s; }@keyframes orbit-spin { to { transform: translate(-50%,-50%) rotateX(67deg) rotateZ(360deg); } }@keyframes node-float { 50% { margin-top: -10px; } }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(310px, .8fr); gap: 18px; }.details { display: grid; grid-template-columns: minmax(130px, .35fr) 1fr; gap: 13px 20px; margin: 0; }.details dt { color: var(--muted); }.details dd { margin: 0; overflow-wrap: anywhere; }.credential-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }.credential-row:last-of-type { border-bottom: 0; }.credential-row small { display: block; }.danger-zone { border-color: #6a403d; }.danger-zone p { color: var(--muted); }
.issue-list { display: grid; gap: 10px; }.issue { display: grid; grid-template-columns: 120px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }.issue:last-child { border-bottom: 0; }.issue p { margin: 3px 0; color: var(--muted); }.issue-kind { align-self: start; padding: 4px 7px; color: #f5d69a; background: #4d3d22; border-radius: 6px; font-size: .8rem; font-weight: 700; }
.chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.chart { display: grid; gap: 11px; margin-top: 18px; }.bar { display: grid; grid-template-columns: minmax(90px, .7fr) 2fr auto; gap: 10px; align-items: center; }.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }.bar-track { height: 12px; overflow: hidden; background: #313029; border: 1px solid #3d3b34; border-radius: 99px; }.bar-fill { display: block; height: 100%; min-width: 0; background: var(--amber); border-radius: inherit; box-shadow: inset 0 1px rgba(255,255,255,.22); transition: width .35s ease; }.bar-value { min-width: 2.2ch; font-weight: 700; text-align: right; }
.toast-stack { position: fixed; z-index: 10; right: 22px; bottom: 22px; display: grid; gap: 9px; max-width: 360px; }.toast { padding: 13px 15px; background: rgba(42,42,37,.88); border: 1px solid #555148; border-radius: 11px; box-shadow: var(--shadow); backdrop-filter: blur(9px); }.toast.error { border-color: #884c49; }.toast.success { border-color: #587257; }.toast.warning { border-color: #80672f; }
.empty-state { padding: 24px; color: var(--muted); text-align: center; }.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }.public-page .content { max-width: 480px; min-height: 100vh; display: grid; align-content: center; }.login-card { padding: 32px; }.login-card h2 { font-size: 1.75rem; }.login-card > p:not(.eyebrow) { color: var(--muted); }dialog { color: #f1eee7; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }dialog::backdrop { background: rgba(0,0,0,.65); }.dialog-content { min-width: min(440px, 85vw); padding: 8px; }.dialog-content p { padding: 14px; background: #121210; border-radius: 8px; white-space: pre-wrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }
.scene-node:hover { transform: translate(-50%,-50%) translateZ(25px); }
.material-icon { width: 1.15em; height: 1.15em; flex: 0 0 auto; fill: currentColor; vertical-align: -.19em; }.area-link, .area-title { display: inline-flex; align-items: center; gap: 8px; }.area-title .material-icon { color: var(--amber); }.select-shell { position: relative; }.select-native { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }.select-trigger { width: 100%; min-height: 43px; display: flex; align-items: center; gap: 9px; padding: 10px 12px; color: #f5f1e9; background: #121210; border: 1px solid #57534a; border-radius: 9px; text-align: left; }.select-trigger::after { content: ''; width: 7px; height: 7px; margin-left: auto; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); }.select-trigger:hover, .select-shell.is-open .select-trigger { transform: none; border-color: var(--amber); background: #1d1c18; }.select-menu { position: absolute; z-index: 8; top: calc(100% + 6px); left: 0; right: 0; display: none; max-height: 280px; overflow-y: auto; padding: 6px; background: #242420; border: 1px solid #655b43; border-radius: 11px; box-shadow: 0 18px 35px rgba(0,0,0,.42); }.select-shell.is-open .select-menu { display: grid; gap: 2px; }.select-option { min-height: 39px; display: flex; align-items: center; gap: 9px; padding: 8px 9px; color: #eae6dc; background: transparent; border: 0; border-radius: 7px; text-align: left; }.select-option:hover, .select-option:focus-visible, .select-option.is-selected { transform: none; color: #fff5df; background: #403a2a; }.select-option.is-selected .material-icon { color: var(--amber); }.scene-inspector { min-height: 64px; display: grid; gap: 3px; margin-top: 20px; padding: 10px 12px; color: var(--muted); background: rgba(16,16,14,.52); border: 1px solid rgba(245,185,66,.24); border-radius: 10px; }.scene-inspector strong { color: var(--amber-strong); }.scope-scene.node-active .orbit, .scope-scene.node-active .scene-node { animation-play-state: paused; }.scene-node { cursor: pointer; }.scene-node:hover, .scene-node:focus-visible { transform: translate(-50%,-50%) translateZ(35px) scale(1.05); border-color: var(--amber); background: #383326; animation-play-state: paused; }
.area-card { border-color: color-mix(in srgb, var(--area-color, var(--line)) 42%, var(--line)); }.area-card:hover { border-color: var(--area-color, var(--amber)); }.area-card .area-title .material-icon, .area-link .material-icon { color: var(--area-color, var(--amber)); }.area-link { color: var(--area-color, var(--amber-strong)); }.select-trigger .material-icon, .select-option .material-icon { color: var(--option-color, var(--amber)); }
.password-control { position: relative; display: block; }.password-control input { padding-right: 48px; }.password-toggle { position: absolute; top: 50%; right: 5px; width: 36px; min-height: 34px; display: grid; place-items: center; padding: 0; color: var(--muted); background: transparent; border: 0; transform: translateY(-50%); }.password-toggle:hover, .password-toggle:focus-visible { transform: translateY(-50%); color: var(--amber-strong); background: #2c2b26; }.password-toggle .material-icon { width: 1.25rem; height: 1.25rem; }
.unifi-intro { margin-bottom: 18px; background: linear-gradient(115deg, color-mix(in srgb, #5ec6ff 11%, #1b1b18), #1b1b18 68%); }.unifi-intro > p:not(.eyebrow) { max-width: 720px; color: var(--muted); }.unifi-metrics { grid-template-columns: repeat(4, minmax(0,1fr)); }.status-badge { display: inline-flex; align-items: center; width: fit-content; padding: 4px 8px; border: 1px solid #4d4b43; border-radius: 99px; color: #d9d4c8; background: #292823; font-size: .76rem; font-weight: 700; }.status-badge.exact { color: #b9e6bd; border-color: #4d7654; background: #203126; }.status-badge.different { color: #ffe1a0; border-color: #80642f; background: #3a2e18; }.status-badge.unifi_only { color: #bde6ff; border-color: #396e89; background: #182e3a; }.status-badge.local_only { color: #d4c5ff; border-color: #68558e; background: #2b253b; }.status-badge.conflict, .status-badge.warning { color: #ffc1bc; border-color: #884c49; background: #3c2221; }.unifi-apply { display: flex; align-items: end; gap: 14px; margin-bottom: 18px; }.unifi-apply > div { min-width: min(300px, 100%); }.comparison-table td strong, .comparison-table td small { display: block; }.comparison-table td small { margin-top: 3px; color: var(--muted); }.unifi-row.conflict { background: color-mix(in srgb, var(--danger) 6%, #1b1b18); }.unifi-row.different { background: color-mix(in srgb, var(--amber) 6%, #1b1b18); }.unifi-row.unifi_only { background: color-mix(in srgb, #5ec6ff 6%, #1b1b18); }
.unifi-metrics { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }.unifi-metric-filter { width: 100%; color: inherit; text-align: left; cursor: pointer; }.unifi-metric-filter:hover, .unifi-metric-filter.is-active { transform: translateY(-2px); border-color: var(--amber); background: #29271f; }.unifi-network-card { margin-bottom: 18px; }.unifi-network-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }.unifi-network-item { display: grid; align-content: start; gap: 7px; min-height: 118px; padding: 14px; background: color-mix(in srgb, var(--area-color) 7%, #161614); border: 1px solid color-mix(in srgb, var(--area-color) 34%, var(--line)); border-radius: 12px; }.unifi-network-item > div, .area-suggestion { display: flex; align-items: center; gap: 8px; }.unifi-network-item small, .unifi-network-note { color: var(--muted); }.unifi-network-note { margin: 14px 0 0; }.unifi-results { padding: 0; overflow: hidden; }.unifi-results > .section-heading { padding: 22px 22px 0; }.unifi-results > form { display: grid; }.unifi-filter-panel { display: grid; grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(190px, 1fr)); gap: 12px; padding: 18px 22px; background: #171714; border-block: 1px solid var(--line); }.unifi-filter-panel label { font-size: .83rem; }.unifi-selection-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; background: #20201c; border-bottom: 1px solid var(--line); }.unifi-selection-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }.comparison-table { min-width: 1180px; }.comparison-table th:first-child, .comparison-table td:first-child { width: 88px; text-align: center; }.comparison-table td:nth-child(2) { width: 125px; }.comparison-table td:nth-child(5) { width: 225px; }.comparison-table td:nth-child(6) { min-width: 260px; }.comparison-table tr[hidden] { display: none; }.comparison-table .select-shell { min-width: 205px; }.comparison-table .select-trigger { min-height: 38px; padding-block: 7px; }.unifi-checkbox { justify-content: center; margin: 0; }.unifi-checkbox input { width: 19px; height: 19px; accent-color: var(--amber); }.unifi-no-action { color: #69665e; }.conflict-kind { display: block; margin-top: 7px; color: #e6b3ae; font-weight: 600; }.network-suggestion { display: block; margin-top: 7px; }.comparison-note { margin: 0; color: #d7d2c7; }.area-suggestion { width: fit-content; color: #eee9df; font-weight: 600; }
.inventory-landscape { min-height: 470px; display: grid; grid-template-columns: minmax(290px, .8fr) minmax(480px, 1.2fr); gap: 26px; margin-bottom: 18px; overflow: hidden; background: radial-gradient(ellipse at 77% 45%, #26332e 0, #1b201e 32%, #1b1b18 68%); }.landscape-copy { align-self: center; }.landscape-copy h2 { font-size: clamp(2rem, 4vw, 3.6rem); }.landscape-copy > p:not(.eyebrow) { max-width: 390px; color: var(--muted); }.landscape-copy dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.landscape-copy dt { color: var(--muted); font-size: .85rem; }.landscape-copy dd { margin: 0; font-size: 1.35rem; font-weight: 700; }.landscape-inspector { min-height: 64px; display: grid; gap: 3px; margin-top: 20px; padding: 10px 12px; color: var(--muted); background: rgba(12,15,14,.56); border: 1px solid rgba(94,198,255,.22); border-radius: 10px; }.landscape-inspector strong { color: var(--amber-strong); }.landscape-stage { position: relative; min-height: 400px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: linear-gradient(145deg, rgba(15,20,19,.72), rgba(10,12,11,.38)); }.landscape-canvas { width: 100%; height: 100%; min-height: 400px; display: block; touch-action: none; cursor: grab; }.landscape-canvas:active { cursor: grabbing; }.landscape-legend { position: absolute; z-index: 1; top: 13px; left: 13px; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 26px); }.landscape-legend-item { min-height: 31px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; color: #ebe7de; background: rgba(20,23,21,.82); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; font-size: .78rem; backdrop-filter: blur(8px); }.landscape-legend-item:hover, .landscape-legend-item:focus-visible { transform: none; border-color: var(--area-color); background: rgba(35,42,38,.96); }.area-swatch { width: 9px; height: 9px; border-radius: 99px; background: var(--area-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--area-color) 18%, transparent); }.landscape-note { position: absolute; right: 14px; bottom: 10px; left: 14px; margin: 0; color: #aaa89e; font-size: .78rem; text-align: center; }
.scope-modal { width: min(470px, calc(100vw - 32px)); padding: 0; border: 1px solid #615b4b; border-radius: 18px; background: rgba(35,34,30,.98); box-shadow: 0 26px 90px rgba(0,0,0,.58); }.scope-modal[data-tone="error"] { border-color: #93504c; }.scope-modal[data-tone="warning"] { border-color: #8d702f; }.scope-modal-content { display: grid; gap: 18px; padding: 24px; }.scope-modal-heading { display: flex; align-items: center; gap: 13px; }.scope-modal-heading h2 { margin: 0; font-size: 1.5rem; }.scope-modal-heading .eyebrow { margin: 0 0 3px; }.scope-modal-icon { width: 42px; height: 42px; display: grid; flex: 0 0 auto; place-items: center; color: #1d1605; background: var(--amber); border-radius: 12px; }.scope-modal[data-tone="error"] .scope-modal-icon { color: #fff1ef; background: #a85a55; }.scope-modal[data-tone="warning"] .scope-modal-icon { background: #d39c31; }.scope-modal-icon .material-icon { width: 23px; height: 23px; }.scope-modal-message { margin: 0; color: #d7d2c8; line-height: 1.5; white-space: pre-wrap; }.scope-modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }.scope-modal-actions [hidden] { display: none; }
.header-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 9px; }.header-actions form { margin: 0; }
.assistant-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-bottom: 18px; }.assistant-steps > * { min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 12px 15px; color: var(--muted); background: #181816; border: 1px solid var(--line); border-radius: 12px; }.assistant-steps > *.is-active { color: #fff1cd; border-color: #8a6a2c; background: #2e2718; }.assistant-steps > * > span { width: 28px; height: 28px; display: grid; flex: 0 0 auto; place-items: center; color: #171105; background: var(--amber); border-radius: 50%; font-weight: 700; }
.assistant-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; background: color-mix(in srgb, #5ec6ff 6%, var(--surface)); }.assistant-intro > div:first-child { max-width: 760px; }.assistant-intro p:not(.eyebrow) { color: var(--muted); }.assistant-summary { min-width: 330px; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 0; }.assistant-summary div { padding: 12px; background: #151512; border: 1px solid var(--line); border-radius: 10px; }.assistant-summary dt { color: var(--muted); font-size: .78rem; }.assistant-summary dd { margin: 3px 0 0; font-size: 1.55rem; font-weight: 700; }
.assistant-toolbar { position: sticky; z-index: 4; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding: 13px 16px; background: rgba(32,32,28,.96); border: 1px solid #575244; border-radius: 12px; box-shadow: var(--shadow); backdrop-filter: blur(10px); }.assistant-toolbar > div:last-child { display: flex; gap: 8px; }.assistant-groups, .conflict-list { display: grid; gap: 18px; }.assistant-group { padding: 0; overflow: hidden; border-color: color-mix(in srgb,var(--area-color) 38%,var(--line)); }.assistant-group > .section-heading { margin: 0; padding: 18px 20px; background: color-mix(in srgb,var(--area-color) 7%,#181816); }.assistant-group h2 { display: flex; align-items: center; gap: 9px; }.assistant-change-list { display: grid; }
.assistant-change { display: grid; grid-template-columns: minmax(245px,.8fr) 30px minmax(360px,1.2fr) minmax(220px,.65fr); gap: 14px; align-items: center; padding: 16px 20px; border-top: 1px solid var(--line); }.assistant-change:has(input:checked) { background: color-mix(in srgb,var(--area-color) 7%,#1b1b18); }.assistant-check { margin: 0; color: inherit; }.assistant-check input { width: 20px; height: 20px; accent-color: var(--amber); }.assistant-check span strong, .assistant-check span small { display: block; }.change-arrow { color: var(--amber); font-size: 1.45rem; text-align: center; }.assistant-diff { display: flex; flex-wrap: wrap; gap: 8px; }.assistant-diff > span, .audit-fields > span { min-width: 130px; display: grid; gap: 2px; padding: 8px 10px; background: #151512; border: 1px solid #34332e; border-radius: 8px; }.assistant-diff del, .audit-fields del { color: #d7a5a0; }.assistant-diff strong, .audit-fields strong { color: #bce3c1; }.assistant-area-choice label { font-size: .8rem; }
.assistant-notes { grid-column: 1 / -1; display: grid; gap: 7px; padding-top: 4px; }.assistant-notes label { display: flex; align-items: center; gap: 7px; font-weight: 700; }.assistant-notes label .material-icon { color: var(--amber); }.assistant-notes textarea { min-height: 72px; resize: vertical; }.assistant-notes small { color: var(--muted); }
.assistant-next { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; }.assistant-next p { margin-bottom: 0; color: var(--muted); }.controller-record { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 14px; }.controller-record > span { display: grid; padding: 11px; background: #141412; border: 1px solid var(--line); border-radius: 9px; }.controller-record small { color: var(--muted); }.conflict-card { border-left: 4px solid var(--danger); }.conflict-card.is-resolvable { border-left-color: var(--amber); }.conflict-card > p { color: var(--muted); }.blocked-reason { padding: 12px; color: #e5bbb6 !important; background: #33201f; border-radius: 9px; }.sticky-action { bottom: 12px; top: auto; margin: 18px 0 0; }
.batch-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 14px; }.batch-card { min-height: 190px; display: flex; flex-direction: column; color: inherit; }.batch-card:hover { text-decoration: none; border-color: var(--amber); }.batch-card > div:first-child { display: flex; align-items: center; justify-content: space-between; }.batch-card h2 { margin-top: 20px; }.batch-card > small:last-child { margin-top: auto; }.batch-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }.batch-hero p { margin-bottom: 0; color: var(--muted); }.batch-metrics { grid-template-columns: repeat(4,minmax(0,1fr)); }.batch-metrics .metric-card { min-height: 120px; }.backup-proof { margin-bottom: 18px; }.backup-proof p { overflow-wrap: anywhere; color: #d5c9ae; }.audit-card { margin-bottom: 18px; }.audit-list { display: grid; gap: 10px; }.audit-change { display: grid; grid-template-columns: minmax(200px,.55fr) 1.45fr; gap: 18px; padding: 14px; background: #171714; border: 1px solid var(--line); border-radius: 10px; }.audit-change > div:first-child { display: grid; align-content: start; justify-items: start; gap: 5px; }.audit-fields { display: flex; flex-wrap: wrap; gap: 8px; }
.piding-hero { display: grid; gap: 14px; margin-bottom: 18px; background: color-mix(in srgb, #46d7c4 8%, var(--surface)); border-color: color-mix(in srgb, #46d7c4 42%, var(--line)); }.piding-hero > p { max-width: 820px; margin: 0; color: #c1d6d1; }.piding-hero-heading, .piding-source { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }.piding-hero-heading h2, .piding-warning h2 { margin: 0; }.piding-hero .eyebrow, .piding-warning .eyebrow { color: #74e6d8; }.piding-mark { width: 48px; height: 48px; display: grid; place-items: center; color: #092822; background: #46d7c4; border-radius: 13px; }.piding-mark .material-icon { width: 27px; height: 27px; }.piding-source { color: var(--muted); }.piding-source strong { color: #e4fff9; }.piding-area-card { background: color-mix(in srgb, #46d7c4 8%, var(--surface)); }.piding-area-card .card-link, .piding-area-card .area-title .material-icon { color: #74e6d8; }.piding-metrics { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }.piding-metrics .metric-card { min-height: 132px; border-color: color-mix(in srgb, #46d7c4 22%, var(--line)); }.piding-warning { margin-bottom: 18px; border-color: #8d702f; background: #2d271a; }.piding-warning p { margin-bottom: 6px; color: #f0dfb8; }.piding-inventory { padding: 0; overflow: hidden; }.piding-inventory > .section-heading { margin: 0; padding: 22px; }.piding-filter-panel { display: grid; grid-template-columns: minmax(260px, 1.4fr) repeat(2, minmax(190px, .8fr)); gap: 12px; padding: 18px 22px; background: #151a18; border-block: 1px solid color-mix(in srgb, #46d7c4 25%, var(--line)); }.piding-filter-panel label { font-size: .83rem; }.piding-table { min-width: 1080px; }.piding-row { background: color-mix(in srgb, #46d7c4 4%, var(--surface)); }.piding-row:hover { background: color-mix(in srgb, #46d7c4 9%, var(--surface-raised)); }.piding-row.has-mismatch { background: color-mix(in srgb, var(--amber) 7%, var(--surface)); }.piding-row td strong, .piding-row td small { display: block; }.piding-row td small { margin-top: 3px; color: var(--muted); }.piding-table tr[hidden] { display: none; }.piding-nav[aria-current="page"] { color: #071c18 !important; background: #46d7c4 !important; }
.piding-manual-status { width: fit-content; display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: #bdece5; background: rgba(9,40,34,.52); border: 1px solid rgba(70,215,196,.32); border-radius: 10px; }.piding-manual-status[hidden] { display: none; }.piding-manual-status > span { display: grid; }.piding-manual-status small { color: #9bc8c1; }.piding-manual-status[data-status="running"] .material-icon { animation: piding-spin 1.2s linear infinite; }.piding-manual-status[data-status="failed"] { color: #ffd1cb; border-color: #8b4e49; background: #33201f; }@keyframes piding-spin { to { transform: rotate(360deg); } }
.unifi-external-actions { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 7px; font-size: .85rem; }.unifi-external-actions a { display: inline-flex; align-items: center; gap: 5px; }.unifi-fallback-link { color: var(--muted); }.unifi-link-settings code { color: #9bdcd3; }.unifi-link-settings small { display: block; margin-top: 5px; }
.settings-subsection { display: grid; gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }.settings-subsection-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }.settings-subsection-heading h3 { margin: 0; font-size: 1.06rem; }.explanation-badge { min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; color: #bde6ff; background: #182e3a; border: 1px solid #396e89; border-radius: 99px; font-size: .78rem; font-weight: 700; white-space: nowrap; }.explanation-badge:hover { color: #e6f6ff; background: #214052; border-color: #5d99b7; }.switch-setting { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: start; margin: 0; padding: 14px; color: #eee9df; background: #151512; border: 1px solid #45433c; border-radius: 11px; cursor: pointer; }.switch-setting input { position: absolute; width: 1px; height: 1px; opacity: 0; }.switch-track { position: relative; width: 46px; height: 26px; margin-top: 1px; background: #4a4841; border: 1px solid #625f56; border-radius: 99px; transition: background .16s ease, border-color .16s ease; }.switch-track span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #c5c1b7; border-radius: 50%; transition: transform .16s ease, background .16s ease; }.switch-setting input:checked + .switch-track { background: #72551f; border-color: var(--amber); }.switch-setting input:checked + .switch-track span { background: var(--amber-strong); transform: translateX(20px); }.switch-setting input:focus-visible + .switch-track { outline: 3px solid var(--amber); outline-offset: 3px; }.switch-setting strong, .switch-setting small { display: block; }.switch-setting small { margin-top: 4px; font-weight: 400; line-height: 1.35; }.unifi-run-note { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; color: var(--muted); }
.pwa-status-card { gap: 14px; }.pwa-status-card .settings-subsection-heading { margin-bottom: 0; }.pwa-status-card .settings-subsection-heading h2 { margin: 0; }.pwa-app-icon { width: 42px; height: 42px; padding: 9px; color: var(--amber); background: #2c2618; border: 1px solid #6b5525; border-radius: 12px; }.pwa-details { margin: 2px 0 4px; }.pwa-details .status-badge { white-space: normal; }.pwa-status-card > small { color: var(--muted); }.status-badge.pwa-ok { color: #b9e6bd; border-color: #4d7654; background: #203126; }.status-badge.pwa-info { color: #bde6ff; border-color: #396e89; background: #182e3a; }.status-badge.pwa-warning { color: #ffe1a0; border-color: #80642f; background: #3a2e18; }.status-badge.pwa-error { color: #ffc1bc; border-color: #884c49; background: #3c2221; }.toast.update { display: grid; gap: 11px; }.toast.update .primary-button { display: inline-flex; align-items: center; justify-content: center; width: fit-content; }
.mobile-more-button { display: none; }.nav-with-icon { display: inline-flex !important; align-items: center; gap: 8px; }.icon-button { width: 40px; min-height: 40px; display: inline-grid; place-items: center; padding: 0; color: var(--muted); background: transparent; border: 1px solid var(--line); }.icon-button:hover { color: var(--amber-strong); background: #302f2a; }.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; margin-top: 10px; }.form-hint { margin: 0; padding: 12px; color: var(--muted); background: #151512; border: 1px solid var(--line); border-radius: 9px; }
.public-page .content { width: min(100%, 520px); margin: 0 auto; }.remember-option { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; margin: 3px 0 5px; padding: 12px; color: #e9e4d9; background: #171714; border: 1px solid #45433c; border-radius: 10px; cursor: pointer; }.remember-option input { width: 19px; height: 19px; margin-top: 2px; accent-color: var(--amber); }.remember-option strong, .remember-option small { display: block; }.remember-option small { margin-top: 3px; font-weight: 400; line-height: 1.35; }
input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear { display: none; }.credential-actions { display: flex; flex-wrap: wrap; gap: 7px; }.credential-dialog-content { width: min(560px, calc(100vw - 42px)); padding: 22px; }.credential-dialog-content .section-heading { margin-bottom: 4px; }.copy-control { display: grid; grid-template-columns: 1fr auto; gap: 7px; }.copy-password-control input { padding-right: 91px; }.copy-password-control .password-toggle { right: 48px; }.password-copy-button { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); border: 0; }.password-copy-button:hover { transform: translateY(-50%); }
.piding-table { min-width: 1580px; }.piding-row.is-missing { opacity: .82; background: color-mix(in srgb, #8f7cb7 8%, var(--surface)); }.piding-row .local-source { color: #74e6d8; }.piding-edit-button { min-height: 36px; white-space: nowrap; }.piding-edit-dialog { width: min(680px, calc(100vw - 42px)); padding: 22px; }.piding-source-fields { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; margin-bottom: 14px; }.piding-source-fields > div { display: grid; gap: 3px; padding: 11px; background: #121715; border: 1px solid color-mix(in srgb, #46d7c4 24%, var(--line)); border-radius: 9px; }.piding-source-fields span { color: var(--muted); font-size: .8rem; }.piding-source-fields strong { overflow-wrap: anywhere; }.piding-edit-dialog [data-piding-delete-form] { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }.piding-edit-dialog [hidden] { display: none; }
.help-intro { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr); gap: 24px; align-items: end; margin-bottom: 18px; }.help-intro p { max-width: 760px; color: #cbc7bd; }.help-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }.help-toc a { padding: 8px 11px; color: #e9dfc8; background: #25241f; border: 1px solid #45423a; border-radius: 9px; }.help-toc a:hover { border-color: var(--amber); text-decoration: none; }.help-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }.help-topic { scroll-margin-top: 20px; }.help-topic[hidden] { display: none; }.help-topic p, .help-topic li { color: #cbc7bd; }.help-topic strong { color: #f4e4bc; }.help-topic ol { margin: 0; padding-left: 20px; }.help-topic li + li { margin-top: 8px; }.help-empty[hidden] { display: none; }
.mobile-menu { width: min(520px, calc(100vw - 24px)); padding: 0; }.mobile-menu-content { display: grid; gap: 16px; padding: 20px; }.mobile-menu-content nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.mobile-menu-content nav a { min-height: 46px; display: flex; align-items: center; padding: 10px 12px; color: #f1eee7; background: #1a1a17; border: 1px solid var(--line); border-radius: 9px; }.mobile-menu-content form button { width: 100%; }.mobile-menu-content > small { text-align: center; }
#piding-edit-dialog, #credential-dialog, #credential-edit-dialog { max-height: calc(100vh - 24px); padding: 0; overflow-x: hidden; overflow-y: auto; }#piding-edit-dialog { width: min(720px, calc(100vw - 24px)); }#credential-dialog, #credential-edit-dialog { width: min(600px, calc(100vw - 24px)); }#piding-edit-dialog > .dialog-content, #credential-dialog > .dialog-content, #credential-edit-dialog > .dialog-content { width: 100%; min-width: 0; }