/* Shared, presentation-only palettes. Status colors keep the same meaning. */
:root,[data-theme="dark"]{color-scheme:dark;--page:#09121d;--surface:#101f2d;--raised:#172b3b;--field:#0b1927;--ink:#e0ecf6;--muted:#9eb2c5;--line:#304b61;--accent:#63ddd1;--accent-ink:#062d2a;--link:#8ed8f4;--glow:#16495355;--good:#6de4b5;--bad:#ffa7a7;--warn:#f2cb7c;--neutral:#9eb2c5;--grid:#527d8a12;--radius:12px}
[data-theme="ocean"]{color-scheme:light;--page:#eaf6fa;--surface:#ffffff;--raised:#dff1f6;--field:#f4fbfd;--ink:#173c50;--muted:#4c6c7b;--line:#b1d8e4;--accent:#087f91;--accent-ink:#fff;--link:#086587;--glow:#82d7df45;--good:#14633b;--bad:#a02c38;--warn:#82550d;--neutral:#596c7e;--grid:#167da010;--radius:18px}
[data-theme="midnight"]{color-scheme:dark;--page:#100d1c;--surface:#1d172b;--raised:#2d213e;--field:#140f21;--ink:#f0e8fa;--muted:#bba7cd;--line:#52405f;--accent:#cc9cf7;--accent-ink:#231033;--link:#dab4ff;--glow:#71315445;--good:#8dddb2;--bad:#ffa6b6;--warn:#e8c783;--neutral:#b0a3c0;--grid:#a481c310;--radius:8px}
[data-theme="forest"]{color-scheme:dark;--page:#0f1c16;--surface:#192d23;--raised:#263d2b;--field:#13231a;--ink:#e7efda;--muted:#b1c4a7;--line:#465b3d;--accent:#b4cf82;--accent-ink:#1d2c16;--link:#d3df9d;--glow:#66833138;--good:#87ddb0;--bad:#ffae9c;--warn:#edcf83;--neutral:#afbdab;--grid:#b6cb7210;--radius:15px}
[data-theme="city"]{color-scheme:light;--page:#f5eee5;--surface:#fffcf7;--raised:#ede1d3;--field:#f8f1e8;--ink:#393a43;--muted:#70655e;--line:#d6bfa6;--accent:#aa512c;--accent-ink:#fff;--link:#385e80;--glow:#e5a56845;--good:#286443;--bad:#a22c36;--warn:#805510;--neutral:#6a6b76;--grid:#9e765516;--radius:10px}
body{color:var(--ink);background-color:var(--page);background-image:radial-gradient(ellipse at 10% 0%,var(--glow),transparent 50%),linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:auto,36px 36px,36px 36px}
h1,h2,h3,.access-heading h2,.access-table tbody th{color:var(--ink)}p,.page-header p,.field-hint,.access-note,.access-legend,footer,.access-lock,.metric>small,.metric>span,.channel-title,.tracked-time,.uptime-caption{color:var(--muted)}a,.entrance-url{color:var(--link)}.eyebrow,.title-accent,.network-emblem,.selection-count{color:var(--accent)}
section,.network-strip,.metric,.contact-row,.access-table tbody tr,.access-table tbody tr:nth-child(even){background:var(--surface);border-color:var(--line);border-radius:var(--radius)}.access-panel{background:transparent;border:0}.access-table{background:transparent}.access-table tbody tr:hover{background:var(--surface);border-color:var(--accent)}.access-table tbody th{background:var(--raised);border-color:var(--line)}.access-table tbody td:nth-child(4),.access-cell,.recipient-panel,.contact-editor{border-color:var(--line)}
.metric>strong,.uptime-value{color:var(--ink)}.metric.online>strong,.telemetry.online .uptime-value,.telemetry.online .health-label{color:var(--good)}.metric.offline>strong,.telemetry.offline .health-label{color:var(--bad)}.telemetry.unknown .health-label{color:var(--warn)}.telemetry.closed .health-label{color:var(--neutral)}
button,.button-link,.contact-actions button{background:var(--raised);border-color:var(--line);color:var(--ink)}button:hover:not(:disabled),.button-link:hover{background:var(--surface);color:var(--accent);border-color:var(--accent)}.account-badge,.readonly-badge{background:var(--raised);border-color:var(--line);color:var(--accent)}
textarea,input:not([type=checkbox]),select{background:var(--field);border-color:var(--line);color:var(--ink)}textarea::placeholder,input::placeholder{color:var(--muted)}input[type=checkbox]{accent-color:var(--accent)}.send-summary{background:var(--raised);color:var(--ink)}.send-summary strong{color:var(--accent)}#send,#theme-save{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}#send:hover:not(:disabled),#theme-save:hover:not(:disabled){background:var(--accent);color:var(--accent-ink);filter:brightness(1.08)}
.access-indicator.open{color:var(--good)}.access-indicator.closed{color:var(--bad)}.access-indicator.pending{color:var(--warn)}.access-indicator.unknown{color:var(--neutral)}.access-switch{background:var(--raised);border-color:var(--muted)}.access-switch[aria-checked=true]{background:#238873;border-color:#43a992}.access-switch[aria-checked=true]:hover:not(:disabled){background:#2ba28a}.access-switch:disabled{cursor:not-allowed}#status,#contacts-status,#access-status,#theme-status{color:var(--warn)}
.appearance-panel summary{cursor:pointer;font-weight:600;display:list-item}.appearance-panel summary small{display:inline-block;font-weight:400;color:var(--muted);margin-left:12px;font-size:13.8px}.appearance-panel p{font-size:14.95px;line-height:1.7}.theme-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:20px 0}.theme-option{display:flex;flex-direction:column;gap:10px;text-align:left;min-width:0;padding:12px;border:2px solid var(--line);border-radius:var(--radius)}.theme-option[aria-pressed=true]{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:2px}.theme-option strong{font-size:16.1px}.theme-option small{font-size:11.5px;color:var(--muted);line-height:1.5}.theme-swatch{display:block;width:100%;height:48px;border-radius:6px;background:linear-gradient(120deg,#09121d 40%,#172b3b 40%,#172b3b 75%,#63ddd1 75%)}.swatch-ocean .theme-swatch{background:linear-gradient(120deg,#eaf6fa 40%,#b1d8e4 40%,#b1d8e4 75%,#087f91 75%)}.swatch-midnight .theme-swatch{background:linear-gradient(120deg,#100d1c 40%,#52405f 40%,#52405f 75%,#cc9cf7 75%)}.swatch-forest .theme-swatch{background:linear-gradient(120deg,#0f1c16 40%,#465b3d 40%,#465b3d 75%,#b4cf82 75%)}.swatch-city .theme-swatch{background:linear-gradient(120deg,#f5eee5 40%,#d6bfa6 40%,#d6bfa6 75%,#aa512c 75%)}
.motion-label{display:flex;align-items:center;gap:10px;font-size:14.95px}.appearance-actions{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}#theme-status{font-size:13.8px;min-height:1.6em}
[data-reduce-motion=true] *,[data-reduce-motion=true] *::before,[data-reduce-motion=true] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:850px){.theme-options{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:520px){.theme-options{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* IoT atmosphere: decorative only; no simulated traffic or connection activity. */
body{position:relative;isolation:isolate;min-height:100vh}
body::before,body::after{content:"";position:fixed;pointer-events:none;z-index:-1;inset:-6%;opacity:.55;background-repeat:no-repeat;transform:translate3d(0,0,0)}
body::before{background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:72px 72px;animation:ambient-grid 38s ease-in-out infinite alternate}
body::after{background-image:radial-gradient(ellipse at 85% 16%,var(--glow),transparent 46%);animation:ambient-glow 26s ease-in-out infinite alternate}
[data-theme="ocean"] body{background-image:radial-gradient(ellipse at 0 0,var(--glow),transparent 60%);background-size:auto}
[data-theme="ocean"] body::before{inset:auto -15% -36vh;height:68vh;border-radius:46% 54% 0 0;background:linear-gradient(160deg,#4dc1d322,#1b88b50b 72%);transform-origin:50% 100%;animation:ambient-wave 32s ease-in-out infinite alternate}
[data-theme="ocean"] body::after{inset:auto -20% -42vh;height:74vh;border-radius:57% 43% 0 0;background:linear-gradient(195deg,#55cbd831,#087f9105 68%);animation:ambient-wave 41s ease-in-out infinite alternate-reverse}
[data-theme="midnight"] body{background-image:radial-gradient(ellipse at 12% 0,var(--glow),transparent 60%);background-size:auto}
[data-theme="midnight"] body::before{background-image:radial-gradient(ellipse at 15% 54%,#af91e21c,transparent 40%),radial-gradient(ellipse at 76% 65%,#974d7a17,transparent 42%);background-size:auto;animation:ambient-fog 43s ease-in-out infinite alternate}
[data-theme="midnight"] body::after{background-image:radial-gradient(ellipse at 65% 8%,#ccb0e820,transparent 38%),radial-gradient(ellipse at 28% 90%,#7363a51f,transparent 38%);animation:ambient-fog 36s ease-in-out infinite alternate-reverse}
[data-theme="forest"] body{background-image:radial-gradient(ellipse at 5% 0,var(--glow),transparent 56%);background-size:auto}
[data-theme="forest"] body::before{background-image:linear-gradient(117deg,transparent 12%,#cadc8b0e 14%,transparent 18%,transparent 36%,#c6d58b0c 39%,transparent 45%,transparent 68%,#c3d58e0b 73%,transparent 78%);background-size:auto;animation:ambient-rays 40s ease-in-out infinite alternate}
[data-theme="forest"] body::after{background-image:radial-gradient(ellipse at 92% 7%,#bed16c28,transparent 40%),radial-gradient(ellipse at 4% 94%,#296b381a,transparent 44%);animation:ambient-glow 31s ease-in-out infinite alternate}
[data-theme="city"] body{background-image:radial-gradient(ellipse at 90% 3%,var(--glow),transparent 55%);background-size:auto}
[data-theme="city"] body::before{background-image:radial-gradient(circle at 85% 13%,#ecb27828,transparent 26%),linear-gradient(145deg,#fff6d818,transparent 68%);background-size:auto;animation:ambient-glow 32s ease-in-out infinite alternate}
[data-theme="city"] body::after{inset:auto -2% 0;height:30vh;opacity:.32;background:linear-gradient(0deg,#956f492e,#566b8120);clip-path:polygon(0 100%,0 60%,5% 60%,5% 42%,10% 42%,10% 72%,17% 72%,17% 35%,22% 35%,22% 61%,28% 61%,28% 49%,33% 49%,33% 77%,39% 77%,39% 27%,43% 27%,43% 46%,47% 46%,47% 67%,53% 67%,53% 38%,57% 38%,57% 56%,63% 56%,63% 21%,67% 21%,67% 48%,72% 48%,72% 66%,77% 66%,77% 36%,82% 36%,82% 56%,88% 56%,88% 71%,93% 71%,93% 45%,100% 45%,100% 100%);animation:none}
@keyframes ambient-grid{from{transform:translate3d(0,0,0)}to{transform:translate3d(12px,18px,0)}}
@keyframes ambient-glow{from{opacity:.4;transform:translate3d(0,0,0)}to{opacity:.7;transform:translate3d(-1%,1%,0)}}
@keyframes ambient-wave{from{transform:translate3d(-1%,0,0) rotate(-2deg)}to{transform:translate3d(1%,-1%,0) rotate(2deg)}}
@keyframes ambient-fog{from{opacity:.4;transform:translate3d(-2%,0,0)}to{opacity:.7;transform:translate3d(2%,1%,0)}}
@keyframes ambient-rays{from{opacity:.4;transform:translate3d(-1%,0,0)}to{opacity:.7;transform:translate3d(1%,0,0)}}

/* The topology reads existing snapshots; the static lines describe relationships. */
.topology-panel{position:relative;overflow:hidden;padding:24px;border:1px solid var(--line);background:var(--surface);box-shadow:0 12px 35px #00000012}
.topology-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.topology-heading h2{font-size:25.3px;margin:0 0 8px;line-height:1.3;color:var(--ink)}
.topology-heading p{font-size:14.95px;line-height:1.65;margin:0;max-width:760px;color:var(--muted)}
.topology-note{display:inline-flex;align-items:center;gap:7px;font-size:13.8px;line-height:1.5;color:var(--muted);padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--field)}
.topology-layout{display:grid;grid-template-columns:130px 150px minmax(0,1fr);gap:28px;align-items:center}
.topology-host{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px 10px;min-width:0;background:var(--raised);border:1px solid var(--line);border-radius:var(--radius)}
.topology-host::after{content:"";position:absolute;top:50%;left:100%;width:29px;height:1px;background:var(--line)}
.host-symbol{position:relative;display:block;width:40px;height:48px;border:1px solid var(--accent);border-radius:7px;background:var(--field);box-shadow:0 0 28px var(--glow)}
.host-symbol::before{content:"";position:absolute;left:8px;right:8px;top:12px;height:5px;border-top:1px solid var(--accent);border-bottom:1px solid var(--accent)}
.host-symbol::after{content:"";position:absolute;left:8px;right:8px;bottom:10px;height:2px;background:var(--line)}
.topology-host strong{font-size:16.1px;color:var(--ink);line-height:1.4;overflow-wrap:anywhere}
.topology-host small{font-size:13.8px;color:var(--muted);line-height:1.5}
.topology-channels{position:relative;display:grid;gap:14px}
.topology-channels::before{content:"";position:absolute;left:-15px;top:25%;bottom:25%;width:1px;background:var(--line)}
.topology-channel{position:relative;display:flex;flex-direction:column;gap:8px;padding:14px 12px;background:var(--field);border:1px solid var(--line);border-radius:10px;min-width:0}
.topology-channel::before,.topology-channel::after{content:"";position:absolute;top:50%;height:1px;background:var(--line)}
.topology-channel::before{right:100%;width:15px}.topology-channel::after{left:100%;width:28px}
.topology-channel strong{display:flex;align-items:center;gap:8px;font-size:14.95px;line-height:1.4;color:var(--ink)}
.topology-channel strong::before{content:"";width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--tone,var(--neutral));box-shadow:0 0 12px var(--glow)}
.topology-channel span{font-size:13.8px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.topology-nodes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none;min-width:0}
.topology-node{display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-width:0;text-decoration:none;padding:12px 13px;border:1px solid var(--line);border-radius:10px;background:var(--field);transition:transform .2s ease}
.topology-node strong{font-size:13.8px;line-height:1.5;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.topology-badges{display:flex;gap:7px 12px;flex-wrap:wrap;align-items:center}
.topology-badge{display:inline-flex;gap:6px;align-items:center;font-size:13px;line-height:1.5;color:var(--tone,var(--neutral));white-space:nowrap}
.topology-badge::before{content:"";display:inline-block;width:6px;height:6px;flex-shrink:0;border-radius:50%;background:currentColor}
.topology-panel [data-tone="online"]{--tone:var(--good)}.topology-panel [data-tone="offline"]{--tone:var(--bad)}.topology-panel [data-tone="unknown"]{--tone:var(--warn)}.topology-panel [data-tone="closed"]{--tone:var(--neutral)}
.topology-empty{font-size:14.95px;line-height:1.7;color:var(--muted);padding:18px;margin:0;border:1px dashed var(--line);border-radius:var(--radius);grid-column:1/-1}
#access-list tr,#live-rows tr{scroll-margin-top:24px;transition:transform .2s ease}
#access-list tr:focus-within,#live-rows tr:focus-within,.topology-node:focus-visible{outline:2px solid var(--accent);outline-offset:3px;box-shadow:0 8px 28px var(--glow)}
.topology-node:focus-visible{text-decoration:none}
#access-list tr.card-spotlight,#live-rows tr.card-spotlight{outline:2px solid var(--accent);outline-offset:4px;box-shadow:0 0 0 7px var(--glow),0 12px 30px var(--glow)}
@media(hover:hover) and (pointer:fine){#access-list tr:hover,#live-rows tr:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 10px 32px var(--glow)}.topology-node:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 8px 20px var(--glow);text-decoration:none}}
@media(max-width:1200px){.topology-layout{grid-template-columns:118px 140px minmax(0,1fr);gap:22px}.topology-host::after{width:23px}.topology-channel::after{width:22px}.topology-nodes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:850px){.topology-layout{grid-template-columns:1fr 2fr;gap:16px}.topology-channels{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.topology-host{padding:14px 10px;gap:8px}.host-symbol{width:30px;height:35px}.host-symbol::before{left:6px;right:6px;top:8px}.host-symbol::after{left:6px;right:6px;bottom:7px}.topology-nodes{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr))}.topology-host::after,.topology-channels::before,.topology-channel::before,.topology-channel::after{display:none}}
@media(max-width:600px){.topology-panel{padding:18px}.topology-heading{margin-bottom:18px;gap:12px}.topology-heading h2{font-size:23px}.topology-heading p{font-size:13.8px}.topology-note{width:100%;box-sizing:border-box;font-size:13px}.topology-layout{grid-template-columns:1fr;gap:12px}.topology-host{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;text-align:left;padding:12px 14px}.topology-host strong{font-size:14.95px}.topology-host small{margin-left:auto;font-size:13px}.host-symbol{width:25px;height:30px;flex-shrink:0}.topology-channels{grid-template-columns:repeat(2,minmax(0,1fr))}.topology-nodes{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.topology-node{padding:11px 10px;gap:8px}.topology-node strong{font-size:13.8px}.topology-badges{gap:4px 8px}.topology-badge{font-size:13px}}
/* Pause all ambient motion when hidden; respect both saved and OS preferences. */
[data-page-hidden="true"] *,[data-page-hidden="true"] *::before,[data-page-hidden="true"] *::after{animation-play-state:paused!important;transition:none!important}
[data-page-hidden="true"] body::before,[data-page-hidden="true"] body::after,body[data-page-hidden="true"]::before,body[data-page-hidden="true"]::after{animation-play-state:paused!important}
[data-reduce-motion="true"] body::before,[data-reduce-motion="true"] body::after,body[data-reduce-motion="true"]::before,body[data-reduce-motion="true"]::after{animation:none!important}
[data-reduce-motion="true"] #access-list tr,[data-reduce-motion="true"] #live-rows tr,[data-reduce-motion="true"] .topology-node{transform:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){body::before,body::after{animation:none!important}#access-list tr,#live-rows tr,.topology-node{transform:none!important;transition:none!important}}
:root .repair-panel{border-color:var(--line)}
.repair-panel .access-heading{align-items:center}.repair-panel code{overflow-wrap:anywhere}
#repair-local{flex-shrink:0;border:1px solid var(--accent);font-size:16.1px;padding:13px 19px}
#repair-status{font-size:14.95px;line-height:1.8;overflow-wrap:anywhere}.repair-details{font-size:14.95px;line-height:1.8}
.repair-details summary{cursor:pointer}.repair-details li{padding:8px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.repair-details li[data-result=failed],.repair-details li[data-result=attention]{font-weight:700}
