/* Shared application shell: accessible, responsive, default LIGHT / opt-in DARK. */
:root,[data-theme="light"]{
 color-scheme:light;--bg:#f5f7fc;--panel:#ffffff;--panel2:#f3f6fc;--edge:#e0e7f3;--txt:#182542;--muted:#66748d;--accent:#6652cc;--a2:#087a93;--danger:#c63350;--shadow:0 12px 44px rgba(30,50,94,.07);
 --app-head:#fff;--app-panel:#fff;--app-input:#fff;--app-soft:#f5f7fc;--app-ink:#182542;--app-link:#5541bb;--app-border:#e1e7f1;--app-row:#eef2f9;--app-hero:#ebecff;--app-stat:#f8f9fd;
}
[data-theme="dark"]{
 color-scheme:dark;--bg:#0b1225;--panel:#151e36;--panel2:#202c49;--edge:#313d5d;--txt:#f1f5ff;--muted:#a4b3d0;--accent:#ba9bff;--a2:#78e4d0;--danger:#ff9da9;--shadow:0 12px 44px rgba(0,0,0,.26);
 --app-head:#121b31;--app-panel:#151e36;--app-input:#0b1429;--app-soft:#10182d;--app-ink:#f1f5ff;--app-link:#b5a0fa;--app-border:#303e5e;--app-row:#23314d;--app-hero:#212047;--app-stat:#111b33;
}
body{background:var(--bg);color:var(--txt);}
a{color:var(--app-link)}a:hover{color:var(--accent)}
.topbar{max-width:none;min-height:76px;padding:10px clamp(14px,3vw,34px);border-bottom:1px solid var(--app-border);background:var(--app-head);position:sticky;top:0;z-index:40;justify-content:flex-start;gap:15px;box-shadow:0 1px 18px rgba(29,44,92,.035)}
.brand{color:var(--txt);font-size:19px}.brand:hover{color:var(--accent)}.brand-mark{width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,#7865ea,#34bfce);color:white;box-shadow:0 5px 17px #6865bd35}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.mobile-menu,.theme-switch,.menu-close{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--app-border);border-radius:12px;background:var(--app-panel);color:var(--txt);cursor:pointer;min-width:42px;min-height:42px;box-shadow:none;font-size:16px}.mobile-menu{font-size:21px}.theme-switch{padding:8px 13px;font-size:13px;font-weight:700}.theme-switch span:first-child{font-size:20px;line-height:1}
.app-frame{display:flex;min-height:calc(100vh - 76px);max-width:1600px;margin:0 auto;align-items:stretch;position:relative}.content-frame{flex:1;min-width:0;display:flex;flex-direction:column}
.main-nav{position:sticky;top:76px;height:calc(100vh - 76px);width:238px;flex:0 0 238px;min-width:0;background:var(--app-head);border-right:1px solid var(--app-border);display:flex!important;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:0;padding:19px 12px;z-index:30;overflow-y:auto;overscroll-behavior:contain}
.menu-title{display:flex;align-items:center;justify-content:space-between;padding:4px 13px 15px;color:var(--muted);font-size:12px;letter-spacing:.5px;text-transform:uppercase}.menu-close{display:none}.nav-list{display:grid;gap:5px}.nav-link{display:flex;align-items:center;gap:11px;color:var(--muted);font-size:13px;white-space:normal;border-radius:11px;padding:12px 14px;font-weight:700;line-height:1.25}.nav-link.current,.nav-link:hover{background:var(--app-soft);color:var(--accent)}.nav-foot{margin-top:auto;border-top:1px solid var(--app-border);padding:17px 4px 5px;display:flex;flex-wrap:wrap;gap:8px}.nav-foot .btn{width:100%;justify-content:center}.nav-scrim{display:none}
.main-container{width:100%;max-width:1264px;padding:clamp(18px,2.8vw,32px);min-height:0;flex:1}.site-footer{width:100%;max-width:1264px;padding:20px clamp(18px,2.8vw,32px);border-color:var(--app-border)}
.panel,.metric,.price-card,.feature{background:var(--app-panel);border-color:var(--app-border);box-shadow:var(--shadow)}.panel-head h2,.page-head h1{color:var(--txt)}.panel-head p,.panel>p,.intro{color:var(--muted)}.field{color:var(--txt)}
.field input,.field select,.field textarea{background:var(--app-input);color:var(--txt);border:1px solid var(--app-border)}.field input::placeholder,.field textarea::placeholder{color:var(--muted)}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px #9e82fa22}.field input[readonly]{opacity:.8;background:var(--app-soft)}
.btn{background:var(--panel2);border-color:var(--app-border);color:var(--txt)}.btn:hover{color:var(--accent);filter:brightness(1.02)}.btn-primary{background:linear-gradient(110deg,#6759d8,#3c8fca);color:white;border:0}.btn-primary:hover{color:white;filter:brightness(1.08)}.btn-secondary{background:var(--panel2)}.btn-ghost{background:transparent}
.account-chip{color:var(--accent);background:var(--app-soft);border-color:var(--app-border)}
table{color:var(--txt)}th{color:var(--muted);background:var(--app-soft)}td{border-bottom-color:var(--app-border)}td a{color:var(--app-link)}.status-list>div,.list-row{border-color:var(--app-border)}.detail-grid>div{background:var(--app-soft);border-color:var(--app-border)}
.status{background:var(--app-soft);border-color:var(--app-border);color:var(--muted)}.status-active{background:#e8faf1;border-color:#b8e9d0;color:#137b4a}.status-suspended,.status-expired{background:#fff5df;border-color:#f2d9a6;color:#925800}.status-revoked,.status-disabled{background:#ffedf0;border-color:#f4bec5;color:#aa2a43}
[data-theme="dark"] .status-active{background:#143a32;border-color:#245e50;color:#83f5d7}[data-theme="dark"] .status-suspended,[data-theme="dark"] .status-expired{background:#49381f;border-color:#72552b;color:#ffce90}[data-theme="dark"] .status-revoked,[data-theme="dark"] .status-disabled{background:#4b2533;border-color:#7b4154;color:#ffaeb6}
.flash{background:#eeebff;color:var(--txt)}.flash.error{background:#fff1f3;color:#9e213b}.flash.success{background:#e5faf0;color:#176c49}[data-theme="dark"] .flash{background:#292345}[data-theme="dark"] .flash.error{background:#52202b;color:#fff}[data-theme="dark"] .flash.success{background:#123d35;color:#fff}
pre,.secret-code{background:var(--app-soft);border-color:var(--app-border);color:var(--txt)}.secret-panel{background:var(--app-hero);border-color:var(--app-border)}.secret-panel p{color:var(--muted)}.price-card li{color:var(--txt);border-color:var(--app-border)}.hero p{color:var(--muted)}.price-card p,.feature p{color:var(--muted)}.pill{background:var(--app-soft);color:var(--app-link);border-color:var(--app-border)}
.hero-visual{background:linear-gradient(145deg,#282051,#152c50);border-color:#4b4c80}.hero-visual .display-number{color:#eddbff}.hero-visual .visual-rows>div{color:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1000px){
 .mobile-menu{display:inline-flex;margin:0;order:0}.brand{order:1}.top-actions{order:2}.app-frame{display:block}.content-frame{width:100%}
 .main-nav{position:fixed;left:0;top:0;bottom:0;width:min(310px,85vw);height:100dvh;z-index:80;border-radius:0;border-right:1px solid var(--app-border);padding:18px 13px;transform:translate3d(-102%,0,0);visibility:hidden;transition:transform .28s ease,visibility .28s;box-shadow:15px 0 45px rgba(7,20,45,.14)}
 .main-nav.open{display:flex;transform:translate3d(0,0,0);visibility:visible}.menu-close{display:inline-flex;font-size:16px}
 .nav-scrim{display:block;position:fixed;inset:0;background:rgba(6,16,37,.55);z-index:79;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,visibility .28s}
 body.menu-open .nav-scrim{opacity:1;visibility:visible;pointer-events:auto}body.menu-open{overflow:hidden}
 .main-container{padding:21px 15px 60px}.site-footer{padding:19px 15px 30px}
}
@media(max-width:640px){.topbar{min-height:66px;gap:10px;padding:10px 12px}.brand{font-size:16px;gap:7px}.brand-mark{width:35px;height:35px;font-size:21px}.brand small{font-size:7px;letter-spacing:1.4px}.theme-switch{font-size:12px;min-width:41px;padding:7px}.theme-label{display:none}.page-head{margin-bottom:18px}.page-head h1{font-size:25px}.panel{padding:17px}.main-container{padding:18px 12px 45px}.form-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.main-nav,.nav-scrim{transition:none!important}}

.nav-icon{width:25px;height:25px;display:inline-grid;place-items:center;border-radius:8px;background:var(--app-soft);font-size:17px;line-height:1;flex:0 0 25px;font-weight:800}.nav-link.current .nav-icon{background:var(--app-hero);color:var(--accent)}
/* Universal drawer: menu always opens LEFT -> RIGHT when hamburger is clicked. */
@media(min-width:1001px){
 .app-frame{display:block}.content-frame{width:100%}
 .main-nav{position:fixed;left:0;top:0;bottom:0;width:min(320px,90vw);height:100dvh;z-index:80;border-radius:0;padding:19px 13px;transform:translate3d(-102%,0,0);visibility:hidden;transition:transform .28s ease,visibility .28s;box-shadow:15px 0 45px rgba(7,20,45,.14)}
 .main-nav.open{transform:translate3d(0,0,0);visibility:visible}.menu-close{display:inline-flex}
 .nav-scrim{display:block;position:fixed;inset:0;background:rgba(6,16,37,.55);z-index:79;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,visibility .28s}
 body.menu-open .nav-scrim{opacity:1;visibility:visible;pointer-events:auto}body.menu-open{overflow:hidden}
}