/* PanelOSM shared UI. Media frames and billboard content keep their own colors. */
:root.panelosm-theme,body.panelosm-neumo{color-scheme:dark;--accent:#3985ff;--bg:#18191c;--surface:#1e1f23;--text:#f4f4f5;--muted:#a7a8b0;--border:#303136;--line:var(--border);--blue:var(--accent);--shadow:8px 8px 20px #0c0d0f,-7px -7px 18px #2a2b30;--small-shadow:4px 4px 10px #101114,-4px -4px 10px #2a2b30;--inset:inset 4px 4px 9px #111215,inset -4px -4px 9px #292a2f;--hover:color-mix(in srgb,var(--accent) 12%,var(--surface));--select:color-mix(in srgb,var(--accent) 20%,var(--surface));background:var(--bg);color:var(--text)}
:root.panelosm-theme.light,body.panelosm-neumo.light{color-scheme:light;--bg:#e8e9ed;--surface:#e8e9ed;--text:#1b1c20;--muted:#5d5f69;--border:#d1d3da;--shadow:8px 8px 20px #c5c6cc,-7px -7px 18px #fff;--small-shadow:4px 4px 10px #c5c6cc,-4px -4px 10px #fff;--inset:inset 4px 4px 9px #c5c6cc,inset -4px -4px 9px #fff}
body.panelosm-neumo{box-sizing:border-box;background:var(--bg)!important;color:var(--text)!important;font-family:Segoe UI,system-ui,Arial,sans-serif!important;padding-bottom:76px;accent-color:var(--accent)}
body.panelosm-neumo :is(section,article,details,.card,.tile,.panel,.box,.login-card,.device-card,.photo,.connection-card,.user-editor,.quota-settings,.vpn-note,.user-card,.task-card){background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--border)!important;border-radius:6px!important;box-shadow:var(--shadow)!important}
body.panelosm-neumo :is(header,footer,aside,.sidebar,.nas-sidebar,.nas-main,.nas-toolbar,.titlebar,.statusbar,.ribbon-tabs){background:var(--bg)!important;color:var(--text)!important;border-color:var(--border)!important}
body.panelosm-neumo :is(button,.button,.btn){background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--border)!important;border-radius:5px!important;box-shadow:var(--small-shadow)!important;transition:box-shadow .16s,background .16s,border-color .16s;filter:none!important}
body.panelosm-neumo :is(button,.button,.btn):hover:not(:disabled){border-color:var(--accent)!important;background:var(--hover)!important}
body.panelosm-neumo :is(button,.button,.btn):active:not(:disabled){box-shadow:var(--inset)!important}
body.panelosm-neumo :is(.primary,button[type=submit],.button.primary,.file-tab){background:var(--accent)!important;color:var(--accent-ink,#fff)!important;border-color:var(--accent)!important}
body.panelosm-neumo :is(.primary,button[type=submit],.button.primary):hover:not(:disabled){background:var(--accent)!important;box-shadow:var(--inset)!important}
body.panelosm-neumo .box{box-sizing:border-box;max-width:calc(100vw - 32px)}
body.panelosm-neumo .box input{box-sizing:border-box;width:100%}
body.panelosm-neumo .box form button:not(.warn):not([type=button]){background:var(--accent)!important;color:var(--accent-ink,#fff)!important;border-color:var(--accent)!important}
body.panelosm-neumo :is(input,textarea,select){background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--border)!important;border-radius:5px!important;box-shadow:var(--inset)!important}
body.panelosm-neumo :is(input[type=checkbox],input[type=radio],input[type=range],input[type=color]){box-shadow:none!important;accent-color:var(--accent)}
body.panelosm-neumo :is(input,textarea)::placeholder{color:var(--muted);opacity:1}
body.panelosm-neumo :is(a,button,input,textarea,select,summary):focus-visible{outline:2px solid var(--accent)!important;outline-offset:4px}
body.panelosm-neumo :is(h1,h2,h3,h4,strong,label,th,td){color:inherit}
body.panelosm-neumo :is(.eyebrow,.number,#key-status){color:var(--accent)!important}
body.panelosm-neumo :is(.muted,.description,small,.file-date,.file-type,.file-size,.ribbon-caption,.sidebar-heading,.panel-link,.ribbon-help,.account-label,.connection-card p,.credential-note,.private-label,.field-hint,.users-heading p,.user-card span,.device-meta){color:var(--muted)!important}
body.panelosm-neumo :is(.badge,.drop,.photo-body,.device-preview,.connection-details,.credential,.storage-info,.quota-info,#notice:not(:empty),#history li){background:var(--surface)!important;color:var(--text)!important;border-color:var(--border)!important;border-radius:5px!important}
body.panelosm-neumo :is(.danger,.warn,.remove,.form-error){color:#e25b68!important;border-color:#9e424c!important}
body.panelosm-neumo.light :is(.danger,.warn,.remove,.form-error){color:#a51e35!important}
body.panelosm-neumo :is(.navigation,.address-shell,.search-box,.columns,.files-pane,.main-pane,.connection-pane,.users-pane,.context-menu,.dialog-body,.dialog-title,.dialog-actions,dialog,.modal,.transfer-list,.transfer-heading,.toast,.ribbon,.ribbon-tab.active,.file-actions,.volume-bar,#preview-content,.preview-text,#picker-folders){background:var(--surface)!important;color:var(--text)!important;border-color:var(--border)!important}
body.panelosm-neumo :is(dialog,.modal,.context-menu){border:1px solid var(--border)!important;border-radius:6px!important;box-shadow:var(--shadow)!important}
body.panelosm-neumo dialog::backdrop{background:#0008;backdrop-filter:blur(3px)}
body.panelosm-neumo :is(.file-row:hover,.side-link:hover,.tree-row:hover,.tree-open:hover){background:var(--hover)!important}
body.panelosm-neumo :is(.file-row.selected,.side-link.active,.tree-row.active,.ribbon-tab.active,.user-card.active){background:var(--select)!important;border-color:var(--accent)!important;color:var(--text)!important}
body.panelosm-neumo :is(.file-row.selected .file-date,.file-row.selected .file-type,.file-row.selected .file-size){color:var(--muted)!important}
body.panelosm-neumo :is(.connection-card,.quota-settings,.user-editor){padding:22px}
body.panelosm-neumo .grant-row{border-color:var(--border)}
body.panelosm-neumo .drop.over{background:var(--hover)!important;border-color:var(--accent)!important}
body.panelosm-neumo :is(.device-stat,.device-icon,.device-details){background:var(--surface)!important;color:var(--text)!important;border-color:var(--border)!important}
body.panelosm-neumo :is(.device-subtitle,.device-stat span,.device-empty){color:var(--muted)!important}
body.panelosm-neumo .crop-dialog{background:var(--surface)!important;color:var(--text)!important;border-color:var(--border)!important;box-shadow:var(--shadow)!important}
body.panelosm-neumo #terminal{background:var(--surface)!important;color:var(--text)!important;border-color:var(--border)!important;box-shadow:var(--inset)!important}
/* The old NAS layout remains available; both layouts inherit the same theme. */
body.nas-modern .explorer{height:calc(100dvh - 76px);padding:18px;gap:12px;background:var(--bg)}
body.nas-modern .titlebar{height:46px;min-height:46px;padding:0 12px;font-weight:600}
body.nas-modern .ribbon-tabs{border:0;gap:9px;min-height:36px}
body.nas-modern .ribbon-tabs :is(a,button){padding:7px 17px;border:1px solid var(--border)}
body.nas-modern .ribbon{height:114px;min-height:114px;padding:8px;gap:8px;box-shadow:var(--shadow);border:1px solid var(--border)}
body.nas-modern .ribbon-group{border-color:var(--border);padding:0 10px}
body.nas-modern .navigation{border:1px solid var(--border);padding:10px;box-shadow:var(--small-shadow)}
body.nas-modern .workspace{gap:18px}
body.nas-modern .sidebar{width:245px;min-width:245px;padding-top:16px;border:1px solid var(--border);box-shadow:var(--shadow)}
body.nas-modern .side-link{min-height:38px;padding-left:18px}
body.nas-modern .main-pane{border:1px solid var(--border);box-shadow:var(--shadow)}
body.nas-modern .file-row{min-height:39px;font-size:13px}
body.nas-modern .columns{height:40px}
body.nas-modern .files-pane{padding:0 16px}
body.nas-modern .statusbar{border:1px solid var(--border);padding:6px 12px;min-height:34px}
body.panelosm-neumo:not(.nas-modern) .explorer{height:calc(100dvh - 76px)}
body.nas-modern.panelosm-compact .explorer{gap:7px;padding:10px}
body.nas-modern.panelosm-compact .ribbon{height:104px;min-height:104px}
body.nas-modern.panelosm-compact .file-row{min-height:29px;font-size:12px}
body.nas-modern.panelosm-compact .side-link{min-height:30px}
body.nas-modern.panelosm-compact .sidebar{width:210px;min-width:210px}
body.panelosm-neumo.panelosm-compact :is(section,.card,.connection-card,.login-card){padding:16px}
/* Portal navigation */
body.panelosm-home{display:block;min-height:100dvh}
.panelosm-home main{width:min(1100px,100%);max-width:1100px;margin:0 auto;padding:52px 28px}
.portal-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:68px;gap:20px}
.portal-brand{font-size:15px;font-weight:750;letter-spacing:.15em;display:flex;align-items:center;gap:12px}
.portal-mark{width:36px;height:36px;display:grid;place-items:center;color:var(--accent);background:var(--surface);box-shadow:var(--small-shadow);border-radius:5px}
.portal-meta{color:var(--muted);font-size:12px;letter-spacing:.06em}
.panelosm-home h1{font-size:clamp(36px,6vw,64px);font-weight:650;letter-spacing:-.055em;margin:14px 0;line-height:1.1}
.portal-intro{color:var(--muted);font-size:16px;line-height:1.65;margin-bottom:36px}
.panelosm-home .options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
body.panelosm-neumo .options a{display:flex;flex-direction:column;position:relative;min-height:240px;padding:28px;background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--border)!important;border-radius:6px!important;box-shadow:var(--shadow)!important;text-decoration:none;transition:transform .18s,border-color .18s}
body.panelosm-neumo .options a:hover{transform:translateY(-4px);border-color:var(--accent)!important}
.options .number{font-size:12px;font-weight:650;letter-spacing:.1em}
.options .tile-symbol{position:absolute;right:26px;top:24px;color:var(--muted);font-size:24px}
.options .name{font-size:23px;font-weight:650;margin:44px 0 12px;letter-spacing:-.025em}
.options .description{font-size:13px;line-height:1.65}
.panelosm-home .portal-other{margin-top:36px;padding:24px}
.portal-other summary{font-size:17px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.portal-other summary::-webkit-details-marker{display:none}
.portal-other summary::after{content:'+';color:var(--accent);font-size:24px}
.portal-other[open] summary::after{content:'−'}
.portal-other .options{margin-top:24px;grid-template-columns:repeat(2,minmax(0,1fr))}
.portal-other .options a{min-height:175px}
.portal-other .name{margin-top:24px;font-size:20px}
.portal-footnote{margin-top:32px;color:var(--muted);font-size:12px}
/* Compact appearance popover, shared across every page. */
.panelosm-theme-control{position:fixed;right:20px;bottom:max(16px,env(safe-area-inset-bottom));z-index:10000;font:13px Segoe UI,system-ui,sans-serif;color:var(--text,#f4f4f5)}
.panelosm-theme-toggle{padding:11px 16px!important;display:flex!important;align-items:center;gap:8px;min-height:42px}
.panelosm-theme-toggle::before{content:'◐';color:var(--accent);font-size:18px}
.panelosm-theme-popover{position:absolute;bottom:56px;right:0;width:290px;max-width:calc(100vw - 24px);padding:20px;background:var(--surface,#1e1f23);border:1px solid var(--border,#303136);border-radius:6px;box-shadow:var(--shadow);display:grid;gap:16px}
.panelosm-theme-popover[hidden]{display:none!important}
.panelosm-theme-popover h2{font-size:16px!important;margin:0!important}
.panelosm-theme-popover label{display:flex!important;justify-content:space-between;align-items:center;gap:12px;margin:0!important;font-size:13px!important}
.panelosm-theme-popover select{width:142px!important;margin:0!important;padding:8px!important;font:inherit}
.panelosm-theme-popover input[type=color]{width:48px!important;height:32px;margin:0!important;padding:3px!important;cursor:pointer}
.panelosm-theme-swatches{display:flex;gap:10px}
body.panelosm-neumo .panelosm-theme-swatches button{width:30px;height:30px;min-width:30px;background:var(--swatch)!important;border:2px solid var(--border)!important;border-radius:50%!important;padding:0!important}
.panelosm-theme-popover p{font-size:11px;color:var(--muted);line-height:1.6;margin:0}
.panelosm-theme-reset{padding:9px!important;font-size:12px!important}
/* Stream UI only: never resize, tint, or add shadows to displayed photos. */
body.panelosm-player{padding:0!important;background:#000!important}
body.panelosm-player .panelosm-theme-control{display:none}
body.panelosm-player #tools{background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--border);box-shadow:var(--small-shadow);border-radius:5px}
body.panelosm-player #message{color:var(--text)}
@media(max-width:850px){.panelosm-home .options{grid-template-columns:repeat(2,minmax(0,1fr))}.portal-top{margin-bottom:46px}.panelosm-home .options a:last-child:nth-child(odd){grid-column:1/-1}}
@media(max-width:700px){body.nas-modern .explorer{padding:7px;gap:7px}body.nas-modern .workspace{gap:7px}body.nas-modern .sidebar{width:155px;min-width:155px}body.nas-modern .ribbon-tabs :is(a,button){padding:5px 8px}body.nas-modern .ribbon{height:106px;min-height:106px}body.nas-modern .titlebar{height:37px;min-height:37px}body.nas-modern .files-pane{padding:0 5px}.panelosm-theme-control{right:12px;bottom:max(12px,env(safe-area-inset-bottom))}.panelosm-home main{padding:28px 20px}.portal-meta{display:none}}
@media(max-width:520px){.panelosm-home .options,.portal-other .options{grid-template-columns:1fr}.panelosm-home .options a{min-height:190px;padding:24px}.options .name{margin-top:28px}.portal-other .options a{min-height:160px}.portal-top{margin-bottom:38px}.panelosm-home .portal-other{padding:18px}}
@media(prefers-reduced-motion:reduce){body.panelosm-neumo *,body.panelosm-neumo *::before{transition:none!important;scroll-behavior:auto!important}}