@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap");
:root{color-scheme:light;--bg:#f7f8fa;--surface:#fff;--surface-soft:#f4f6f8;--surface-code:#f1f3f5;--text:#101828;--muted:#667085;--muted-2:#98a2b3;--line:#e4e7ec;--line-strong:#d0d5dd;--blue:#1769e0;--blue-soft:#eef5ff;--green:#087a55;--green-soft:#ecfdf3;--amber:#9a5b09;--amber-soft:#fff7e8;--red:#b42318;--red-soft:#fff1f2;--navy:#0d1b2f}
html[data-theme="dark"]{color-scheme:dark;--bg:#161616;--surface:#262626;--surface-soft:#202020;--surface-code:#1c1c1c;--text:#f7f7f7;--muted:#b7b7b7;--muted-2:#7f7f7f;--line:#303030;--line-strong:#3c3c3c;--blue:#e13d49;--blue-soft:#301d20;--green:#79c99a;--green-soft:#18261e;--amber:#d9aa62;--amber-soft:#2d2518;--red:#ff6c75;--red-soft:#321b1e;--navy:#121212}
*{box-sizing:border-box}html,body{margin:0;min-height:100%}html{background:var(--bg)}body,button,input,select,textarea{font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif}body{background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{color:inherit}.key,code,.nav-label,.topbar-kicker,.install-kicker{font-family:"IBM Plex Mono",monospace}
.app-shell{min-height:100vh;display:flex}.sidebar{width:228px;position:fixed;inset:0 auto 0 0;z-index:30;padding:20px 14px 16px;display:flex;flex-direction:column;background:var(--surface);border-right:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;padding:0 8px 22px}.brand-icon{width:52px;height:42px;display:grid;place-items:center;background:transparent;color:var(--text);position:relative}.brand-icon--onyx{border:0;border-radius:0;box-shadow:none}.brand-icon-theme{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 8px 18px rgba(23,105,224,.10))}.brand-icon-theme--dark{display:none}html[data-theme="dark"] .brand-icon-theme--light{display:none}html[data-theme="dark"] .brand-icon-theme--dark{display:block}.brand strong{display:block;font-size:15px;font-weight:600}.brand span{display:block;margin-top:3px;color:var(--muted);font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}.nav-label{padding:8px 10px;color:var(--muted-2);font-size:12.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}.sidebar nav{display:flex;flex-direction:column;gap:2px}.sidebar nav a{min-height:40px;padding:0 10px;border:1px solid transparent;border-radius:7px;color:var(--muted);display:flex;gap:9px;align-items:center;font-size:12.5px;font-weight:500}.sidebar nav a:hover{background:var(--surface-soft);color:var(--text)}.sidebar nav a.active{background:var(--blue-soft);border-color:color-mix(in srgb,var(--blue) 18%,var(--line));color:var(--blue)}.nav-icon{width:26px;height:22px;display:grid;place-items:center;border:1px solid var(--line);border-radius:5px;background:var(--surface);font-family:"IBM Plex Mono",monospace;font-size:13px;color:inherit}.sidebar-bottom{margin-top:auto;padding:14px 8px 0;border-top:1px solid var(--line);display:grid;gap:9px}.admin-mini{display:flex;gap:9px;align-items:center;min-width:0}.admin-avatar{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);border-radius:7px;background:var(--surface-soft);font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:500}.admin-meta{min-width:0}.admin-meta strong,.admin-meta small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.admin-meta strong{font-size:13px;font-weight:500}.admin-meta small{margin-top:2px;color:var(--muted);font-size:12.5px}.logout-link{color:var(--muted);font-size:12px}.logout-link:hover{color:var(--red)}
.content{margin-left:228px;width:calc(100% - 228px);padding:0 32px 48px}.topbar{min-height:64px;margin:0 -32px 28px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:18px;position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 94%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}.topbar-left,.topbar-actions{display:flex;align-items:center;gap:9px}.topbar-kicker{color:var(--muted);font-size:13px;letter-spacing:.06em}.icon-btn{appearance:none;width:34px;height:34px;border:1px solid var(--line);border-radius:7px;display:grid;place-items:center;cursor:pointer;background:var(--surface);color:var(--muted)}.icon-btn:hover{border-color:var(--line-strong);color:var(--text)}.mobile-menu-btn{display:none}
.page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}.page-header h1{margin:0;font-size:29px;font-weight:500;letter-spacing:-.035em;line-height:1.08}.page-header p{max-width:760px;margin:7px 0 0;color:var(--muted);font-size:13px;line-height:1.65}.page-header-actions{display:flex;gap:8px;flex-wrap:wrap}.panel,.stat-card,.table-wrap{background:var(--surface);border:1px solid var(--line);border-radius:9px}.panel{padding:18px}.panel h2,.panel h3{margin:0;font-weight:500;letter-spacing:-.015em}.panel h2{font-size:15.5px}.panel h3{font-size:13.5px}.panel p{margin:6px 0;color:var(--muted);font-size:13px;line-height:1.65}.panel-header{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:13px}.panel-header p{margin-top:4px}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}.stat-card{padding:15px 16px;min-height:108px}.stat-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.stat-icon{width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--line);border-radius:6px;background:var(--surface-soft);font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--muted)}.stat-card span{display:block;color:var(--muted);font-size:12.5px;font-weight:500}.stat-card strong{display:block;margin-top:13px;font-size:24px;line-height:1;font-weight:500;letter-spacing:-.035em}.stat-card small{display:block;margin-top:7px;color:var(--muted-2);font-size:13px}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.grid-main{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr);gap:12px}.stack{display:grid;gap:12px}.quick-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.quick-action{padding:11px;border:1px solid var(--line);border-radius:8px;background:var(--surface-soft);display:flex;align-items:center;gap:9px}.quick-action:hover{border-color:var(--line-strong)}.quick-action .qa-icon{width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--line);border-radius:6px;background:var(--surface);font-family:"IBM Plex Mono",monospace;font-size:12.5px}.quick-action strong{font-size:13px;font-weight:500}.quick-action small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:720px}th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}th{color:var(--muted);font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;background:var(--surface-soft)}td{font-size:12.5px}tr:last-child td{border-bottom:0}tbody tr:hover{background:color-mix(in srgb,var(--surface-soft) 72%,transparent)}td small{display:block;color:var(--muted);margin-top:3px;max-width:460px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.empty-state{padding:32px 16px;text-align:center;color:var(--muted)}.actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.actions form{margin:0}
.btn{appearance:none;border:1px solid var(--text);border-radius:7px;min-height:35px;padding:0 11px;background:var(--text);color:var(--bg);cursor:pointer;font-weight:500;font-size:12.5px;display:inline-flex;align-items:center;justify-content:center;gap:6px}.btn:hover{opacity:.88}.btn:disabled{opacity:.42;cursor:not-allowed}.btn-secondary{background:var(--surface);border-color:var(--line-strong);color:var(--text)}.btn-danger{background:var(--surface);border-color:color-mix(in srgb,var(--red) 35%,var(--line));color:var(--red)}.btn-success{background:var(--green-soft);border-color:color-mix(in srgb,var(--green) 30%,var(--line));color:var(--green)}.btn-ghost{background:transparent;border-color:var(--line);color:var(--muted)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.form-grid .full{grid-column:1/-1}label{display:grid;gap:6px;color:var(--text);font-size:12.5px;font-weight:500}.input{width:100%;min-height:40px;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);border-radius:7px;padding:9px 10px;outline:none}.input::placeholder{color:var(--muted-2)}.input:focus{border-color:color-mix(in srgb,var(--blue) 60%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 9%,transparent)}textarea.input{resize:vertical}.checkbox{display:flex;align-items:center;gap:8px;min-height:40px}.checkbox input{width:16px;height:16px;accent-color:var(--blue)}.form-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;margin-top:4px}.badge{display:inline-flex;align-items:center;min-height:22px;border:1px solid var(--line);border-radius:5px;padding:0 7px;font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.04em}.badge-online,.badge-active{color:var(--green);background:var(--green-soft);border-color:color-mix(in srgb,var(--green) 25%,var(--line))}.badge-slow,.badge-trial{color:var(--amber);background:var(--amber-soft);border-color:color-mix(in srgb,var(--amber) 25%,var(--line))}.badge-offline,.badge-expired,.badge-suspended{color:var(--red);background:var(--red-soft);border-color:color-mix(in srgb,var(--red) 25%,var(--line))}.badge-unknown,.badge-none{color:var(--muted);background:var(--surface-soft)}.flash{margin-bottom:14px;padding:10px 12px;border-radius:8px;border:1px solid var(--line);font-size:13px}.flash-success{background:var(--green-soft);color:var(--green)}.flash-error{background:var(--red-soft);color:var(--red)}.flash.is-dismissing{opacity:0;transition:.3s ease}.inline-form{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.inline-form .input{min-width:210px}.key{font-size:13px;color:var(--muted);overflow-wrap:anywhere}.muted{color:var(--muted)}
.activity-list{display:grid}.activity-item{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:9px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}.activity-item:last-child{border-bottom:0}.activity-dot{width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--line);border-radius:6px;background:var(--surface-soft);font-family:"IBM Plex Mono",monospace;font-size:12.5px}.activity-item strong{display:block;font-size:12.5px;font-weight:500}.activity-item small{display:block;margin-top:2px;color:var(--muted);font-size:12.5px}.activity-time{color:var(--muted);font-family:"IBM Plex Mono",monospace;font-size:12px;white-space:nowrap}.app-status-line{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:11px;border-top:1px solid var(--line);font-size:12.5px}.app-status-line span{color:var(--muted)}.app-status-line strong{font-family:"IBM Plex Mono",monospace;font-weight:500}.compact-panel-header{align-items:center}.dashboard-grid-clean .table-wrap{border:0;border-radius:0!important}

/* Login */
.login-page,.install-page{min-height:100svh;padding:24px;background:var(--bg)}.login-page{display:grid;place-items:center}.auth-card{width:min(430px,100%);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:26px}.auth-card .brand{padding:0 0 22px}.auth-card h1{margin:0;font-size:23px;font-weight:500;letter-spacing:-.03em}.auth-card>p{color:var(--muted);font-size:13px;line-height:1.65}.auth-card form{display:grid;gap:13px;margin-top:20px}.auth-card .btn{justify-content:center;min-height:40px}.auth-theme{position:fixed;right:20px;top:20px;z-index:50}.error-box{padding:10px 11px;border-radius:7px;background:var(--red-soft);color:var(--red);border:1px solid color-mix(in srgb,var(--red) 25%,var(--line));font-size:12.5px}.password-wrap{position:relative}.password-wrap .input{padding-right:45px}.password-toggle{position:absolute;right:5px;bottom:5px;min-width:36px;height:30px;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;font-size:13px}.password-toggle:hover{background:var(--surface-soft);color:var(--text)}

/* Installer */
.install-page{display:grid;place-items:center}.install-shell,.install-shell-v22{width:min(1120px,100%);display:grid;grid-template-columns:310px minmax(0,1fr);overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--surface)}.install-aside,.install-shell-v22 .install-aside{padding:28px;background:var(--surface-soft);border-right:1px solid var(--line)}.install-aside .brand{padding:0 0 25px}.install-aside h2,.install-shell-v22 .install-aside h2{margin:0;font-size:18px;font-weight:500;letter-spacing:-.02em}.install-aside>p,.install-shell-v22 .install-aside>p{color:var(--muted);font-size:13px;line-height:1.65}.install-main,.install-shell-v22 .install-main{padding:32px 36px 36px;min-width:0}.install-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}.install-kicker{display:block;margin-bottom:8px;color:var(--blue);font-size:12.5px;letter-spacing:.08em}.install-head h1,.install-shell-v22 .install-head h1{margin:0;font-size:27px;font-weight:500;letter-spacing:-.035em}.install-head p,.install-shell-v22 .install-head p{margin:7px 0 0;color:var(--muted);font-size:12px;line-height:1.6}.install-card{width:100%;padding:0;border:0;background:transparent}.install-card form{margin-top:0;gap:0}.install-steps,.install-shell-v22 .install-steps{display:grid;gap:5px;margin-top:20px}.install-step-link,.install-shell-v22 .install-step-link{display:flex;align-items:center;gap:9px;padding:9px;border:1px solid transparent;border-radius:7px;color:var(--muted)}.install-step-link .step-number,.install-shell-v22 .install-step-link .step-number{width:27px;height:27px;display:grid;place-items:center;border:1px solid var(--line);border-radius:6px;background:var(--surface);font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:500}.install-step-link strong,.install-shell-v22 .install-step-link strong{display:block;font-size:12.5px;font-weight:500}.install-step-link small,.install-shell-v22 .install-step-link small{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}.install-step-link.is-active{background:var(--blue-soft);border-color:color-mix(in srgb,var(--blue) 18%,var(--line));color:var(--text)}.install-step-link.is-done .step-number{background:var(--green-soft);color:var(--green);border-color:color-mix(in srgb,var(--green) 25%,var(--line))}.install-pane{display:none}.install-pane.is-active{display:block}.install-section-title,.install-shell-v22 .install-section-title{margin:0 0 6px;color:var(--text);font-size:13px;font-weight:500}.install-section-copy,.install-shell-v22 .install-section-copy{margin:0 0 18px;color:var(--muted);font-size:12.5px;line-height:1.6}.install-nav{display:flex;justify-content:space-between;gap:8px;padding-top:20px;margin-top:21px;border-top:1px solid var(--line)}.install-nav-end{justify-content:flex-end}.requirements-title{margin-top:24px;color:var(--muted-2);font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}.requirements-list{display:grid;margin:9px 0 0}.requirement-row{display:flex;align-items:flex-start;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}.requirement-row:last-child{border-bottom:0}.requirement-row>span{width:20px;height:20px;flex:0 0 20px;display:grid;place-items:center;border:1px solid var(--line);border-radius:5px;font-family:"IBM Plex Mono",monospace;font-size:13px}.requirement-row.is-valid>span{background:var(--green-soft);color:var(--green)}.requirement-row.is-invalid>span{background:var(--red-soft);color:var(--red)}.requirement-row strong{display:block;color:var(--text);font-size:13px;font-weight:500}.requirement-row small{display:block;margin-top:2px;color:var(--muted);font-size:12px}.install-summary{display:grid;gap:6px;margin:0 0 16px}.install-summary-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 10px;border:1px solid var(--line);border-radius:7px;background:var(--surface-soft);font-size:13px}.install-summary-row span{color:var(--muted)}.install-summary-row strong{font-weight:500;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:65%}.install-primary-btn{min-width:190px}.install-error,.install-warning,.warning-box{margin-bottom:18px;padding:11px 12px;border:1px solid var(--line);border-radius:7px;font-size:12.5px;line-height:1.55}.install-error{background:var(--red-soft);color:var(--red)}.install-warning,.warning-box{background:var(--amber-soft);color:var(--amber)}.db-test-note,.db-connected-banner{display:flex;align-items:center;gap:10px;margin-top:18px;padding:11px 12px;border:1px solid var(--line);border-radius:7px;background:var(--surface-soft)}.db-test-icon,.db-connected-banner>span{width:27px;height:27px;flex:0 0 27px;display:grid;place-items:center;border:1px solid var(--line);border-radius:6px;background:var(--surface);font-family:"IBM Plex Mono",monospace;font-size:12.5px}.db-test-note strong,.db-connected-banner strong{display:block;font-size:12.5px;font-weight:500}.db-test-note small,.db-connected-banner small{display:block;margin-top:2px;color:var(--muted);font-size:12.5px}.db-connected-banner{margin:0 0 20px;background:var(--green-soft);border-color:color-mix(in srgb,var(--green) 24%,var(--line))}.db-connected-banner>span{color:var(--green)}.db-connected-banner>div{min-width:0;flex:1}.db-connected-banner a{color:var(--blue);font-size:13px;font-weight:500}.finalization-list{display:grid;gap:6px;margin-top:18px}.finalization-list>div{display:flex;gap:9px;align-items:flex-start;padding:10px;border:1px solid var(--line);border-radius:7px;background:var(--surface-soft)}.finalization-list>div>span{width:24px;height:24px;flex:0 0 24px;display:grid;place-items:center;border:1px solid var(--line);border-radius:5px;background:var(--surface);font-family:"IBM Plex Mono",monospace;font-size:13px}.finalization-list p{margin:0}.finalization-list strong{display:block;font-size:12.5px;font-weight:500}.finalization-list small{display:block;margin-top:2px;color:var(--muted);font-size:12.5px}
@media(max-width:1100px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-main{grid-template-columns:1fr}}
@media(max-width:900px){.sidebar{width:72px;padding-inline:9px}.brand{justify-content:center;padding-inline:0}.brand>div:last-child,.nav-label,.sidebar nav a .nav-text,.admin-meta,.logout-link{display:none}.sidebar nav a{justify-content:center;padding-inline:6px}.sidebar-bottom{align-items:center;justify-items:center}.content{margin-left:72px;width:calc(100% - 72px);padding-inline:20px}.topbar{margin-inline:-20px;padding-inline:20px}.grid-2{grid-template-columns:1fr}}
@media(max-width:760px){.install-shell,.install-shell-v22{grid-template-columns:1fr}.install-aside,.install-shell-v22 .install-aside{border-right:0;border-bottom:1px solid var(--line);padding:20px}.install-aside>p,.requirements-title,.requirements-list{display:none}.install-aside .brand{padding-bottom:10px}.install-steps{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:8px}.install-step-link{padding:6px;justify-content:center}.install-step-link>div:last-child{display:none}.install-main,.install-shell-v22 .install-main{padding:24px 20px 28px}}
@media(max-width:620px){.app-shell{display:block}.sidebar{width:min(260px,86vw);transform:translateX(-105%);transition:transform .18s ease;box-shadow:12px 0 30px rgba(0,0,0,.12)}body.sidebar-open .sidebar{transform:translateX(0)}.sidebar .brand{justify-content:flex-start}.sidebar .brand>div:last-child,.sidebar .nav-label,.sidebar nav a .nav-text,.sidebar .admin-meta,.sidebar .logout-link{display:block}.sidebar nav a{justify-content:flex-start}.content{margin-left:0;width:100%;padding:0 14px 24px}.topbar{margin-inline:-14px;padding-inline:14px;min-height:58px;margin-bottom:20px}.mobile-menu-btn{display:grid}.page-header{align-items:flex-start;flex-direction:column}.stats{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr}.quick-actions{grid-template-columns:1fr}.inline-form{width:100%}.inline-form .input{flex:1;min-width:0}.login-page,.install-page{padding:14px}.auth-card{padding:22px}.install-main,.install-shell-v22 .install-main{padding:22px 16px 24px}.install-head h1{font-size:24px}}


/* ==========================================================
   Onyx Player as panel-controlled application
   ========================================================== */
.panel-svg{display:block;flex:0 0 auto}.brand-icon svg,.nav-icon svg,.stat-icon svg,.icon-btn svg{width:16px;height:16px}.brand-icon svg{width:19px;height:19px}.nav-icon{font-family:inherit}.nav-icon svg{stroke-width:1.9}.stat-icon{font-family:inherit}.page-eyebrow{display:flex;align-items:center;gap:7px;margin-bottom:7px;color:var(--blue);font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}.application-page-header{align-items:flex-end}.application-control-form{display:grid;gap:12px}.control-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}.control-summary-card{display:flex;align-items:center;gap:12px;min-height:74px;padding:13px 14px;border:1px solid var(--line);border-radius:9px;background:var(--surface)}.control-summary-card.is-ok{border-color:color-mix(in srgb,var(--green) 22%,var(--line))}.control-summary-card.is-warning{border-color:color-mix(in srgb,var(--amber) 28%,var(--line));background:color-mix(in srgb,var(--amber-soft) 60%,var(--surface))}.control-summary-card.is-danger{border-color:color-mix(in srgb,var(--red) 28%,var(--line));background:color-mix(in srgb,var(--red-soft) 55%,var(--surface))}.control-summary-icon{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--surface-soft);color:var(--blue)}.control-summary-card small,.control-summary-card strong{display:block}.control-summary-card small{color:var(--muted);font-size:11px}.control-summary-card strong{margin-top:3px;font-size:15px;font-weight:500}.control-alert{display:flex;align-items:flex-start;gap:11px;margin-bottom:12px;padding:12px 14px;border:1px solid var(--line);border-radius:9px}.control-alert-danger{background:var(--red-soft);border-color:color-mix(in srgb,var(--red) 28%,var(--line));color:var(--red)}.control-alert div{display:grid;gap:2px}.control-alert strong{font-size:12.5px;font-weight:600}.control-alert span{font-size:12px;line-height:1.55}.control-section{padding:0;overflow:hidden}.control-section-head{display:flex;align-items:flex-start;gap:12px;padding:18px;border-bottom:1px solid var(--line)}.control-section-head-between{align-items:center;justify-content:space-between}.control-section-title-wrap{display:flex;align-items:flex-start;gap:12px}.section-icon{width:36px;height:36px;display:grid;place-items:center;flex:0 0 36px;border:1px solid var(--line);border-radius:8px;background:var(--surface-soft);color:var(--blue)}.control-section-head h2{font-size:16px}.control-section-head p{margin:4px 0 0;font-size:12px}.home-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:18px}.home-choice{display:block;position:relative}.home-choice>input{position:absolute;opacity:0;pointer-events:none}.home-choice-card{position:relative;display:grid;grid-template-columns:96px 1fr 24px;align-items:center;gap:14px;min-height:116px;padding:13px;border:1px solid var(--line);border-radius:9px;background:var(--surface);cursor:pointer;transition:.15s ease}.home-choice-card:hover{border-color:var(--line-strong)}.home-choice>input:checked+.home-choice-card{border-color:color-mix(in srgb,var(--blue) 55%,var(--line));background:var(--blue-soft);box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 8%,transparent)}.home-choice-card strong,.home-choice-card small{display:block}.home-choice-card strong{font-size:13.5px;font-weight:600}.home-choice-card small{margin-top:5px;color:var(--muted);font-size:11.5px;line-height:1.5}.choice-check{width:22px;height:22px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:transparent;background:var(--surface)}.home-choice>input:checked+.home-choice-card .choice-check{background:var(--blue);border-color:var(--blue);color:#fff}.home-choice-visual{height:80px;display:grid;gap:5px;padding:7px;border:1px solid var(--line);border-radius:7px;background:var(--surface-soft)}.home-choice-sidebar{grid-template-columns:22px 1fr;grid-template-rows:repeat(3,1fr)}.home-choice-sidebar i{grid-row:1/4;border-radius:4px;background:var(--navy)}.home-choice-sidebar b,.home-choice-playbox b{display:block;border-radius:4px;background:color-mix(in srgb,var(--blue) 55%,var(--surface-soft))}.home-choice-playbox{grid-template-columns:repeat(2,1fr);grid-template-rows:1fr 1fr}.home-choice-playbox b:first-child{grid-column:1/-1;background:var(--navy)}.switch-control{display:flex;align-items:center;gap:9px;cursor:pointer}.switch-control input,.feature-control-card>input{position:absolute;opacity:0;pointer-events:none}.switch-track,.mini-switch{position:relative;display:block;flex:0 0 auto;border-radius:999px;background:var(--line-strong);transition:.15s ease}.switch-track{width:42px;height:23px}.switch-track span,.mini-switch span{position:absolute;display:block;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(16,24,40,.2);transition:.15s ease}.switch-track span{width:17px;height:17px;left:3px;top:3px}.switch-control input:checked+.switch-track,.feature-control-card>input:checked~.mini-switch{background:var(--blue)}.switch-control input:checked+.switch-track span{transform:translateX(19px)}.switch-control b{font-size:12.5px;font-weight:500}.control-field{padding:16px 18px 18px}.control-field small,.control-fields-grid label small{color:var(--muted);font-size:11px;font-weight:400;line-height:1.5}.maintenance-on{border-color:color-mix(in srgb,var(--amber) 32%,var(--line))}.feature-control-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:0}.feature-control-card{position:relative;display:grid;grid-template-columns:36px 1fr 36px;align-items:center;gap:11px;min-height:86px;padding:15px 18px;border-bottom:1px solid var(--line);cursor:pointer}.feature-control-card:nth-child(odd){border-right:1px solid var(--line)}.feature-control-card:hover{background:var(--surface-soft)}.feature-control-card:has(input:checked){background:color-mix(in srgb,var(--blue-soft) 36%,var(--surface))}.feature-control-icon{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--muted)}.feature-control-card:has(input:checked) .feature-control-icon{color:var(--blue);border-color:color-mix(in srgb,var(--blue) 20%,var(--line))}.feature-control-copy strong,.feature-control-copy small{display:block}.feature-control-copy strong{font-size:12.5px;font-weight:600}.feature-control-copy small{margin-top:3px;color:var(--muted);font-size:11px;font-weight:400;line-height:1.5}.mini-switch{width:34px;height:19px}.mini-switch span{width:13px;height:13px;top:3px;left:3px}.feature-control-card>input:checked~.mini-switch span{transform:translateX(15px)}.feature-control-card-wide{margin:16px 18px 0;border:1px solid var(--line)!important;border-radius:8px}.control-fields-grid{padding:18px}.host-authority-note{display:flex;align-items:center;gap:11px;margin:0 18px 18px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface-soft)}.host-authority-note>svg{color:var(--green)}.host-authority-note>div{min-width:0;flex:1}.host-authority-note strong,.host-authority-note span{display:block}.host-authority-note strong{font-size:12.5px;font-weight:600}.host-authority-note span{margin-top:2px;color:var(--muted);font-size:11.5px;line-height:1.5}.version-fields{padding-top:14px}.version-force-check{padding:2px 0}.publish-bar{position:sticky;bottom:12px;z-index:15;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 14px;border:1px solid var(--line-strong);border-radius:9px;background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:0 14px 40px rgba(16,24,40,.13);backdrop-filter:blur(12px)}.publish-bar strong,.publish-bar span{display:block}.publish-bar strong{font-size:12.5px;font-weight:600}.publish-bar span{margin-top:2px;color:var(--muted);font-size:11px}.publish-button{min-width:200px}.app-status-action{width:100%;margin-top:12px}.app-status-panel .app-status-line+.app-status-line{margin-top:8px}
@media(max-width:1100px){.control-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.home-choice-grid,.feature-control-grid{grid-template-columns:1fr}.feature-control-card:nth-child(odd){border-right:0}.control-section-head-between{align-items:flex-start;flex-direction:column}.publish-bar{align-items:flex-start;flex-direction:column}.publish-button{width:100%}}
@media(max-width:620px){.control-summary{grid-template-columns:1fr 1fr}.home-choice-card{grid-template-columns:72px 1fr 22px}.home-choice-visual{height:68px}.host-authority-note{align-items:flex-start;flex-wrap:wrap}.host-authority-note .btn{width:100%}}

/* Compact icon actions */
.icon-only-action{width:34px;min-width:34px;height:34px;padding:0;display:inline-grid;place-items:center}
.icon-only-action .panel-svg{pointer-events:none}


/* ==========================================================
   V4.5 — Watermelon/shadcn-inspired component layer
   Adapted to server-rendered PHP; no React runtime required.
   ========================================================== */
:root{--wm-shadow:0 1px 2px rgba(16,24,40,.035),0 8px 28px rgba(16,24,40,.035);--wm-shadow-pop:0 18px 50px rgba(16,24,40,.18)}
html[data-theme="dark"]{--wm-shadow:0 1px 2px rgba(0,0,0,.16),0 10px 32px rgba(0,0,0,.14);--wm-shadow-pop:0 22px 60px rgba(0,0,0,.42)}
.panel,.stat-card,.table-wrap,.control-summary-card,.control-section,.home-choice-card{border-radius:12px;box-shadow:var(--wm-shadow)}
.sidebar{padding:18px 12px 14px}.brand{padding:2px 8px 19px}.brand-icon{border-radius:0;box-shadow:none}
.sidebar nav{gap:4px}.sidebar nav a{min-height:42px;border-radius:10px;padding-inline:9px;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease}.sidebar nav a:hover{transform:translateX(1px)}.sidebar nav a.active{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--blue) 9%,transparent)}
.nav-icon{border-radius:7px}.sidebar-bottom{padding-top:12px}.admin-mini{padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--surface-soft)}
.btn{border-radius:9px;min-height:38px;padding-inline:13px;transition:transform .12s ease,box-shadow .12s ease,background .12s ease,border-color .12s ease}.btn:hover{opacity:1;transform:translateY(-1px);box-shadow:0 5px 14px rgba(16,24,40,.08)}.btn:active{transform:translateY(0)}.btn:focus-visible,.icon-btn:focus-visible,.input:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 13%,transparent)}
.input{min-height:42px;border-radius:9px}.badge{border-radius:999px;padding-inline:8px}.icon-btn{border-radius:9px}.stat-icon,.section-icon,.feature-control-icon,.control-summary-icon{border-radius:9px}
.wm-card{box-shadow:var(--wm-shadow)}
.wm-metric-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}.wm-metric{display:flex;align-items:center;gap:12px;min-height:76px;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--wm-shadow)}.wm-metric-icon{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;background:var(--surface-soft);color:var(--blue)}.wm-metric-icon-success{color:var(--green);background:var(--green-soft)}.wm-metric small,.wm-metric strong{display:block}.wm-metric small{color:var(--muted);font-size:11px}.wm-metric strong{margin-top:3px;font-size:16px;font-weight:600;letter-spacing:-.02em}
.wm-toast{position:fixed;z-index:90;top:18px;right:18px;width:min(390px,calc(100vw - 36px));display:grid;grid-template-columns:34px minmax(0,1fr) 28px;align-items:start;gap:10px;padding:12px;border:1px solid var(--line-strong);border-radius:12px;background:color-mix(in srgb,var(--surface) 96%,transparent);box-shadow:var(--wm-shadow-pop);backdrop-filter:blur(16px);animation:wmToastIn .18s ease both}.wm-toast-success{border-color:color-mix(in srgb,var(--green) 26%,var(--line))}.wm-toast-error{border-color:color-mix(in srgb,var(--red) 28%,var(--line))}.wm-toast-icon{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;background:var(--surface-soft);color:var(--blue)}.wm-toast-success .wm-toast-icon{color:var(--green);background:var(--green-soft)}.wm-toast-error .wm-toast-icon{color:var(--red);background:var(--red-soft)}.wm-toast-copy{min-width:0}.wm-toast-copy strong{display:block;font-size:12.5px;font-weight:600}.wm-toast-copy span{display:block;margin-top:3px;color:var(--muted);font-size:12px;line-height:1.45}.wm-toast-close{width:28px;height:28px;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer;font-size:18px;line-height:1}.wm-toast-close:hover{background:var(--surface-soft);color:var(--text)}.wm-toast.is-dismissing{opacity:0;transform:translateY(-8px);transition:.2s ease}@keyframes wmToastIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
.wm-dialog-layer[hidden]{display:none}.wm-dialog-layer{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:18px;opacity:0;transition:opacity .14s ease}.wm-dialog-layer.is-open{opacity:1}.wm-dialog-backdrop{position:absolute;inset:0;background:rgba(3,8,15,.52);backdrop-filter:blur(4px)}.wm-dialog{position:relative;width:min(440px,100%);display:grid;grid-template-columns:42px 1fr;gap:13px;padding:18px;border:1px solid var(--line-strong);border-radius:14px;background:var(--surface);box-shadow:var(--wm-shadow-pop);transform:translateY(8px) scale(.985);transition:transform .14s ease}.wm-dialog-layer.is-open .wm-dialog{transform:none}.wm-dialog-icon{width:42px;height:42px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--red) 24%,var(--line));border-radius:11px;background:var(--red-soft);color:var(--red)}.wm-dialog-copy h2{margin:1px 0 5px;font-size:16px;font-weight:600}.wm-dialog-copy p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.55}.wm-dialog-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;padding-top:5px}.wm-confirm-button{background:var(--red);border-color:var(--red);color:#fff}
@media(max-width:760px){.wm-metric-row{grid-template-columns:1fr}.wm-toast{top:10px;right:10px;width:calc(100vw - 20px)}.wm-dialog{padding:16px}.hosts-metric-row{grid-template-columns:1fr}}


/* ==========================================================
   V4.5.2 — Dark palette matched to Onyx mobile UI
   Reference: #161616 background / #262626 surfaces / red accent
   Light theme is intentionally unchanged.
   ========================================================== */
html[data-theme="dark"] body{
  background:#161616;
}
html[data-theme="dark"] .sidebar{
  background:#1b1b1b;
  border-right-color:#303030;
}
html[data-theme="dark"] .topbar{
  background:color-mix(in srgb,#161616 92%,transparent);
  border-bottom-color:#303030;
}
html[data-theme="dark"] .panel,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .control-summary-card,
html[data-theme="dark"] .control-section,
html[data-theme="dark"] .home-choice-card,
html[data-theme="dark"] .wm-card,
html[data-theme="dark"] .wm-metric,
html[data-theme="dark"] .auth-card{
  background:#262626;
  border-color:#343434;
}
html[data-theme="dark"] .surface,
html[data-theme="dark"] .admin-mini,
html[data-theme="dark"] .quick-action,
html[data-theme="dark"] .stat-icon,
html[data-theme="dark"] .section-icon,
html[data-theme="dark"] .feature-control-icon,
html[data-theme="dark"] .control-summary-icon,
html[data-theme="dark"] .nav-icon,
html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .wm-metric-icon{
  background:#202020;
  border-color:#343434;
}
html[data-theme="dark"] .sidebar nav a{
  color:#b7b7b7;
}
html[data-theme="dark"] .sidebar nav a:hover{
  background:#242424;
  color:#f7f7f7;
}
html[data-theme="dark"] .sidebar nav a.active{
  background:#2a2223;
  border-color:#5a3035;
  color:#e13d49;
  box-shadow:inset 3px 0 0 #e13d49;
}
html[data-theme="dark"] .sidebar nav a.active .nav-icon{
  background:#302326;
  border-color:#5a3035;
  color:#e13d49;
}
html[data-theme="dark"] .page-eyebrow,
html[data-theme="dark"] .control-summary-icon,
html[data-theme="dark"] .section-icon,
html[data-theme="dark"] .wm-metric-icon{
  color:#e13d49;
}
html[data-theme="dark"] th{
  background:#202020;
  color:#8f8f8f;
}
html[data-theme="dark"] tbody tr:hover{
  background:#222;
}
html[data-theme="dark"] .input{
  background:#1f1f1f;
  border-color:#3a3a3a;
  color:#f7f7f7;
}
html[data-theme="dark"] .input:focus,
html[data-theme="dark"] .input:focus-visible{
  border-color:#e13d49;
  box-shadow:0 0 0 3px rgba(225,61,73,.14);
}
html[data-theme="dark"] .input::placeholder{
  color:#6f6f6f;
}
html[data-theme="dark"] .btn:not(.btn-secondary):not(.btn-danger):not(.btn-success):not(.btn-ghost){
  background:#e13d49;
  border-color:#e13d49;
  color:#fff;
}
html[data-theme="dark"] .btn:not(.btn-secondary):not(.btn-danger):not(.btn-success):not(.btn-ghost):hover{
  background:#ee4653;
  border-color:#ee4653;
  box-shadow:0 7px 18px rgba(225,61,73,.18);
}
html[data-theme="dark"] .btn-secondary{
  background:#262626;
  border-color:#424242;
  color:#f3f3f3;
}
html[data-theme="dark"] .btn-secondary:hover,
html[data-theme="dark"] .btn-ghost:hover{
  background:#2d2d2d;
  border-color:#4a4a4a;
}
html[data-theme="dark"] .btn-danger{
  background:#2d2021;
  border-color:#62353a;
  color:#ff737c;
}
html[data-theme="dark"] .switch-track,
html[data-theme="dark"] .mini-switch{
  background:#555;
}
html[data-theme="dark"] .switch-control input:checked+.switch-track,
html[data-theme="dark"] .feature-control-card>input:checked~.mini-switch{
  background:#e13d49;
}
html[data-theme="dark"] .checkbox input{
  accent-color:#e13d49;
}
html[data-theme="dark"] .feature-control-card:hover{
  background:#292929;
}
html[data-theme="dark"] .feature-control-card:has(input:checked){
  background:#2b2324;
}
html[data-theme="dark"] .feature-control-card:has(input:checked) .feature-control-icon{
  color:#e13d49;
  border-color:#593238;
  background:#302426;
}
html[data-theme="dark"] .home-choice>input:checked+.home-choice-card{
  border-color:#694047;
  background:#2b2324;
  box-shadow:0 0 0 2px rgba(225,61,73,.08);
}
html[data-theme="dark"] .home-choice>input:checked+.home-choice-card .choice-check{
  background:#e13d49;
  border-color:#e13d49;
}
html[data-theme="dark"] .home-choice-sidebar b,
html[data-theme="dark"] .home-choice-playbox b{
  background:#8e353e;
}
html[data-theme="dark"] .home-choice-sidebar i,
html[data-theme="dark"] .home-choice-playbox b:first-child{
  background:#151515;
}
html[data-theme="dark"] .publish-bar{
  background:rgba(38,38,38,.94);
  border-color:#414141;
  box-shadow:0 14px 40px rgba(0,0,0,.34);
}
html[data-theme="dark"] .wm-toast,
html[data-theme="dark"] .wm-dialog{
  background:rgba(38,38,38,.97);
  border-color:#414141;
}
html[data-theme="dark"] .wm-dialog-backdrop{
  background:rgba(0,0,0,.68);
}
html[data-theme="dark"] .login-page,
html[data-theme="dark"] .install-page{
  background:
    radial-gradient(circle at 50% -10%,rgba(225,61,73,.08),transparent 34%),
    #161616;
}
html[data-theme="dark"] .auth-card{
  box-shadow:0 24px 70px rgba(0,0,0,.26);
}
html[data-theme="dark"] .brand-icon{
  background:transparent;
  border-color:transparent;
}
html[data-theme="dark"] .badge-online,
html[data-theme="dark"] .badge-active{
  color:#8bd4a7;
}
html[data-theme="dark"] .wm-confirm-button{
  background:#e13d49;
  border-color:#e13d49;
  color:#fff;
}

.brand-icon--onyx{padding:0;overflow:visible;background:transparent;border-color:transparent;color:inherit;font-size:inherit;font-weight:inherit;letter-spacing:normal;box-shadow:none}
.brand-icon--onyx img{display:block;width:100%;height:100%;object-fit:contain}

/* ==========================================================
   ONYX BRAND PATCH — exact supplied logos + blue dark accent
   ========================================================== */
.brand-logo--onyx{
  width:150px;
  height:50px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.brand-logo-theme,.brand-symbol-theme{max-width:100%;max-height:100%;object-fit:contain}
.brand-logo-theme--dark,.brand-symbol-theme{display:none}
html[data-theme="dark"] .brand-logo-theme--light{display:none}
html[data-theme="dark"] .brand-logo-theme--dark{display:block}
html[data-theme="dark"] .brand-symbol-theme--light{display:none}
html[data-theme="dark"] .brand-symbol-theme--dark{display:none}
.brand .brand-logo--onyx + div{display:none}

@media(max-width:900px){
  .sidebar .brand-logo--onyx{width:44px;height:40px}
  .sidebar .brand-logo-theme{display:none!important}
  .sidebar .brand-symbol-theme--light{display:block}
  html[data-theme="dark"] .sidebar .brand-symbol-theme--light{display:none}
  html[data-theme="dark"] .sidebar .brand-symbol-theme--dark{display:block}
}
@media(max-width:620px){
  .sidebar .brand-logo--onyx{width:132px;height:46px}
  .sidebar .brand-symbol-theme{display:none!important}
  .sidebar .brand-logo-theme--light{display:block!important}
  html[data-theme="dark"] .sidebar .brand-logo-theme--light{display:none!important}
  html[data-theme="dark"] .sidebar .brand-logo-theme--dark{display:block!important}
}

html[data-theme="dark"]{
  --blue:#2f66f5;
  --blue-soft:#18233f;
}
html[data-theme="dark"] .sidebar nav a.active{
  background:#1b2540;
  border-color:#334f91;
  color:#5f8cff;
  box-shadow:inset 3px 0 0 #2f66f5;
}
html[data-theme="dark"] .sidebar nav a.active .nav-icon{
  background:#202b47;
  border-color:#334f91;
  color:#6f98ff;
}
html[data-theme="dark"] .page-eyebrow,
html[data-theme="dark"] .control-summary-icon,
html[data-theme="dark"] .section-icon,
html[data-theme="dark"] .wm-metric-icon{color:#5f8cff}
html[data-theme="dark"] .input:focus,
html[data-theme="dark"] .input:focus-visible{
  border-color:#2f66f5;
  box-shadow:0 0 0 3px rgba(47,102,245,.16);
}
html[data-theme="dark"] .btn:not(.btn-secondary):not(.btn-danger):not(.btn-success):not(.btn-ghost){
  background:#2f66f5;
  border-color:#2f66f5;
  color:#fff;
}
html[data-theme="dark"] .btn:not(.btn-secondary):not(.btn-danger):not(.btn-success):not(.btn-ghost):hover{
  background:#4779ff;
  border-color:#4779ff;
  box-shadow:0 7px 18px rgba(47,102,245,.22);
}
html[data-theme="dark"] .switch-control input:checked+.switch-track,
html[data-theme="dark"] .feature-control-card>input:checked~.mini-switch{background:#2f66f5}
html[data-theme="dark"] .checkbox input{accent-color:#2f66f5}
html[data-theme="dark"] .feature-control-card:has(input:checked){background:#1b2540}
html[data-theme="dark"] .feature-control-card:has(input:checked) .feature-control-icon{
  color:#5f8cff;
  border-color:#334f91;
  background:#202b47;
}
html[data-theme="dark"] .home-choice>input:checked+.home-choice-card{
  border-color:#3c5da9;
  background:#1b2540;
  box-shadow:0 0 0 2px rgba(47,102,245,.10);
}
html[data-theme="dark"] .home-choice>input:checked+.home-choice-card .choice-check{
  background:#2f66f5;
  border-color:#2f66f5;
}
html[data-theme="dark"] .home-choice-sidebar b,
html[data-theme="dark"] .home-choice-playbox b{background:#3157b8}
html[data-theme="dark"] .login-page,
html[data-theme="dark"] .install-page{
  background:radial-gradient(circle at 50% -10%,rgba(47,102,245,.10),transparent 34%),#161616;
}