:root{color-scheme:dark;--bg:#080c17;--panel:#0d1423;--panel2:#101a2b;--panel3:#141e31;--border:#202d43;--border2:#293854;--text:#eef3ff;--muted:#8998b7;--muted2:#657493;--purple:#7657ff;--purple2:#5638e7;--green:#28d69a;--amber:#ffb827;--red:#ff596c;--blue:#4e86ff;--shadow:0 16px 48px rgba(0,0,0,.23);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:radial-gradient(ellipse at 78% -20%,rgba(82,70,190,.12),transparent 40%),var(--bg);color:var(--text);font-size:13px;line-height:1.5}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.48;cursor:not-allowed}a{color:inherit;text-decoration:none}input,select{width:100%;min-width:0;background:#111a2b;color:var(--text);border:1px solid var(--border2);border-radius:8px;min-height:39px;padding:9px 11px;outline:none;transition:border-color .18s,box-shadow .18s}input::placeholder{color:#62718e}select{cursor:pointer}input:focus,select:focus{border-color:#7a61ff;box-shadow:0 0 0 3px rgba(118,87,255,.12)}label{display:block;color:#c9d4ea;font-size:11px;font-weight:600;margin:0 0 7px}small{display:block;color:var(--muted2);font-size:10px;margin-top:5px}.muted{color:var(--muted)}.small{font-size:11px}.eyebrow{font-size:9px;font-weight:800;letter-spacing:1.5px;color:#8d80ff;margin-bottom:5px}.brand{display:flex;align-items:center;gap:11px;min-width:0}.brand-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;border:1px solid rgba(139,116,255,.55);color:#c7bbff;background:linear-gradient(145deg,rgba(118,87,255,.24),rgba(118,87,255,.04));font-weight:800;letter-spacing:-1px;box-shadow:inset 0 0 18px rgba(118,87,255,.1);flex:none}.brand-name{font-size:16px;line-height:1.25;font-weight:800;letter-spacing:.2px}.brand-sub{font-size:10px;color:var(--muted);margin-top:3px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:8px 13px;border:1px solid transparent;border-radius:8px;color:white;font-size:11px;font-weight:700;white-space:nowrap;transition:transform .16s,background .16s,border-color .16s}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn-primary{background:linear-gradient(120deg,#7654ff,#502dd5);box-shadow:0 5px 16px rgba(89,55,227,.19)}.btn-primary:hover:not(:disabled){background:linear-gradient(120deg,#8567ff,#6240eb)}.btn-secondary{background:#151f32;border-color:#2d3c57;color:#d4def2}.btn-secondary:hover:not(:disabled){background:#1a2942;border-color:#44577a}.btn-ghost{background:#10192a;border-color:#26344e;color:#becbe3}.btn-danger{background:#821f30;border-color:#a33345;color:#ffe9ed}.btn-danger:hover:not(:disabled){background:#a5283c}.btn-blue{background:#173c93;border-color:#2452bc}.btn-xs{padding:5px 8px;min-height:27px;border-radius:6px;font-size:10px}.btn-wide{width:100%}.icon-btn{height:36px;width:36px;display:grid;place-items:center;background:#111a2b;border:1px solid var(--border);border-radius:9px;color:#c5d1e8;font-size:18px}.mobile-nav-toggle{display:none}
/* Login */
.login-page{min-height:100vh;display:grid;place-items:center;padding:25px;background:radial-gradient(ellipse at 50% 10%,rgba(91,67,204,.19),transparent 44%),var(--bg)}.login-wrap{width:min(100%,420px)}.brand-login{justify-content:center;margin:0 0 28px}.brand-login .brand-name{font-size:20px}.brand-login .brand-sub{text-align:left;font-size:11px}.login-card{padding:30px;background:linear-gradient(155deg,rgba(18,27,45,.98),rgba(10,16,29,.98));border:1px solid #27344d;border-radius:17px;box-shadow:var(--shadow)}.login-card h1{font-size:24px;letter-spacing:-.7px;margin:4px 0 6px}.login-card>p{font-size:12px;margin:0 0 25px}.login-card form label{margin-top:15px}.login-card input{min-height:44px}.login-card .btn{margin-top:22px;min-height:43px;font-size:12px}.login-security{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:21px;color:var(--muted);font-size:10px}.status-dot{width:7px;height:7px;display:inline-block;border-radius:99px;background:var(--green);box-shadow:0 0 10px rgba(40,214,154,.4)}.login-foot{text-align:center;color:#566381;font-size:10px;margin:19px 0 0}.form-message{font-size:11px;padding:10px 11px;border-radius:7px;margin-top:10px;background:#341a27;border:1px solid #652839;color:#ffb6c0}.form-success{background:#0d2b25;border-color:#155b49;color:#a5f4d8}.form-error{background:#341a27;border-color:#652839;color:#ffb6c0}
/* App shell */
.topbar{height:72px;position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:0 25px;background:rgba(7,11,21,.93);border-bottom:1px solid #202a3e;backdrop-filter:blur(16px)}.topbar-right{display:flex;align-items:center;gap:10px}.user-avatar{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#171d47;border:1px solid #4540a0;color:#b7adff;font-size:16px;font-weight:800}.user-meta{display:flex;flex-direction:column;gap:2px;min-width:120px}.user-meta strong{font-size:12px;font-weight:700}.user-meta span{font-size:10px;color:var(--muted)}.app-shell{display:grid;grid-template-columns:226px minmax(0,1fr);align-items:start;min-height:calc(100vh - 72px)}.sidebar{position:sticky;top:72px;height:calc(100vh - 72px);padding:22px 14px 14px;border-right:1px solid #202a3e;background:rgba(8,13,24,.73);display:flex;flex-direction:column;z-index:20}.nav-caption{color:#546482;font-size:9px;font-weight:800;letter-spacing:1.4px;padding:0 12px 11px}.side-nav{display:grid;gap:5px}.nav-link{display:flex;align-items:center;gap:11px;padding:11px 12px;color:#9eacc7;border:1px solid transparent;border-radius:8px;font-size:12px;transition:all .18s}.nav-link:hover{background:#10182a;color:#ecf0ff}.nav-link.active{background:linear-gradient(100deg,rgba(91,66,220,.3),rgba(59,49,139,.16));border-color:#393182;color:#d4ccff;box-shadow:inset 2px 0 #8b70ff}.nav-icon{width:19px;text-align:center;font-size:17px;color:#9caac7}.nav-link.active .nav-icon{color:#baadff}.sidebar-bottom{margin-top:auto}.profile-card{border:1px solid #2b2853;background:linear-gradient(155deg,rgba(39,30,83,.52),rgba(15,18,39,.66));padding:14px;border-radius:10px}.profile-row{display:flex;align-items:center;gap:9px}.profile-avatar{width:33px;height:33px;display:grid;place-items:center;border-radius:10px;background:#322575;color:#e5cb69;font-size:17px}.profile-row strong,.profile-row span{display:block}.profile-row strong{font-size:11px}.profile-row span{font-size:10px;color:var(--muted);margin-top:2px}.profile-role{display:inline-block;background:#34276c;color:#c5b6ff;border-radius:5px;padding:3px 7px;font-size:9px;font-weight:800;letter-spacing:.6px;margin:12px 0}.profile-card .btn{min-height:32px}.sidebar-version{display:flex;justify-content:space-between;color:#495776;font-size:9px;padding:13px 4px 0}.sidebar-version span{color:#6c7a99}.content{min-width:0;max-width:1800px;width:100%;margin:0 auto;padding:24px 25px 12px}.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:15px;margin:0 0 19px;scroll-margin-top:90px}.page-heading h1{font-size:24px;letter-spacing:-.8px;margin:0 0 4px}.page-heading p{font-size:11px;margin:0}.heading-actions{display:flex;align-items:center;gap:10px}.secure-badge{display:inline-flex;align-items:center;gap:7px;color:#a8b5cc;font-size:10px;padding:8px 10px;background:#101a2a;border:1px solid #22324b;border-radius:7px}.stats-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:16px}.stat-card{min-width:0;position:relative;padding:14px 14px 13px 56px;background:linear-gradient(145deg,#121b2d,#0c1422);border:1px solid #26324a;border-radius:10px;overflow:hidden}.stat-card:after{content:"";position:absolute;width:105px;height:105px;right:-45px;top:-56px;border-radius:50%;background:currentColor;opacity:.04}.stat-icon{position:absolute;left:13px;top:15px;width:33px;height:33px;border-radius:11px;display:grid;place-items:center;font-size:18px;font-weight:700;background:rgba(118,87,255,.19);color:#b6a7ff}.stat-label{font-size:10px;color:#a8b5cd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stat-value{font-size:25px;letter-spacing:-.8px;line-height:1.3;font-weight:800;margin-top:4px}.stat-foot{font-size:9px;color:#6f7f9f;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stat-green{color:var(--green)}.stat-green .stat-icon{background:rgba(40,214,154,.15);color:var(--green)}.stat-amber{color:var(--amber)}.stat-amber .stat-icon{background:rgba(255,184,39,.15);color:var(--amber)}.stat-red{color:var(--red)}.stat-red .stat-icon{background:rgba(255,89,108,.15);color:var(--red)}.stat-blue{color:var(--blue)}.stat-blue .stat-icon{background:rgba(78,134,255,.16);color:var(--blue)}
/* Panels */
.main-grid{display:grid;grid-template-columns:minmax(0,1.72fr) minmax(320px,.95fr);gap:12px;align-items:start}.main-column,.right-column{display:grid;gap:12px;min-width:0}.panel{min-width:0;background:linear-gradient(155deg,rgba(14,22,37,.96),rgba(10,16,29,.98));border:1px solid #25324a;border-radius:10px;padding:15px;box-shadow:0 5px 25px rgba(0,0,0,.06);scroll-margin-top:90px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.panel-head h2{font-size:15px;letter-spacing:-.25px;margin:0}.panel-number{font-size:10px;color:#6e7ba0;background:#141e31;border:1px solid #26344c;padding:4px 7px;border-radius:5px}.table-count,.tiny-count{font-size:10px;color:#aab7d0;background:#151f32;border:1px solid #2a3851;border-radius:6px;padding:5px 8px}.form-grid{display:grid;grid-template-columns:1fr 1.2fr 1.2fr auto;gap:10px;align-items:end}.field{min-width:0}.field-action .btn{width:100%;min-height:39px}.field-grow{min-width:100px}.created-key-box{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:13px;background:#102a26;border:1px solid #1a5a49;border-radius:8px;padding:11px}.created-key-box .eyebrow{color:var(--green)}.created-key-box code{color:#9cf3d2;font-size:14px;font-weight:800;letter-spacing:.7px;overflow-wrap:anywhere}.form-message[hidden],.global-message[hidden],[hidden]{display:none!important}.global-message{border:1px solid #31405a;background:#111f34;color:#c9d7f0;padding:10px 12px;border-radius:8px;margin:0 0 14px;font-size:11px}.global-error{background:#331923;border-color:#70293a;color:#ffbec7}.global-success{background:#0e2b25;border-color:#1a5d4b;color:#a7f6dc}.filter-row{display:grid;grid-template-columns:minmax(160px,1.3fr) minmax(115px,.8fr) minmax(120px,.9fr) auto;gap:8px;margin-bottom:12px}.filter-row select,.filter-row input{min-height:35px;padding-top:7px;padding-bottom:7px;font-size:10px}.search-wrap{position:relative;min-width:0}.search-wrap span{position:absolute;left:10px;top:7px;font-size:16px;color:#7f8eac}.search-wrap input{padding-left:30px}.table-wrap{overflow:auto;width:100%;border:1px solid #1e2a40;border-radius:7px}table{width:100%;border-collapse:collapse;font-size:10px;white-space:nowrap}thead{background:#151f32}th{font-size:9px;color:#8999b7;letter-spacing:.45px;font-weight:800;text-align:left;padding:11px 10px;border-bottom:1px solid #29364d}td{padding:10px;border-bottom:1px solid #1c283c;color:#ced8eb;vertical-align:middle}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:rgba(95,111,162,.055)}.empty-cell{text-align:center!important;color:#6f7e9e!important;padding:25px 12px!important}.key-cell{display:flex;align-items:center;gap:6px}.key-cell code,.table-key{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:#e0e5ff;font-weight:600;letter-spacing:.2px}.mini-copy{border:0;background:transparent;color:#8e9dff;font-size:15px;padding:0 2px;line-height:1}.mini-copy:hover{color:#c4baff}.row-subtext{font-size:9px;color:#697a99;margin-top:3px;max-width:180px;overflow:hidden;text-overflow:ellipsis}.account-chip{color:#b9c6df}.status-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 7px;border-radius:5px;font-size:9px;font-weight:700}.status-badge i{width:5px;height:5px;border-radius:50%;background:currentColor}.badge-green{background:rgba(20,139,99,.19);color:#4fe5b3}.badge-amber{background:rgba(181,117,10,.19);color:#ffc959}.badge-red{background:rgba(192,48,67,.19);color:#ff858f}.badge-muted{background:#222d40;color:#9cabc6}.row-actions{display:flex;gap:4px;align-items:center}.table-footer{display:flex;justify-content:space-between;align-items:center;color:#62718f;font-size:9px;padding:11px 2px 0}.text-btn{border:0;background:transparent;color:#9e9aff;font-size:10px;font-weight:700}.text-btn:hover{color:#cbc5ff}.stack-form{display:grid;gap:12px}.permission-note{font-size:10px;line-height:1.5;padding:9px 10px;background:#15172f;border:1px solid #2d2a5b;border-radius:7px;color:#bbb5ef;margin:-3px 0 13px}.stack-form select,.stack-form input{min-height:37px;font-size:11px}.section-divider{height:1px;background:#212d43;margin:17px 0 13px}.subsection-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.subsection-head h3{font-size:12px;margin:0}.compact-table-wrap{max-width:100%}.compact-table-wrap table{min-width:440px}.compact-table-wrap th,.compact-table-wrap td{padding:8px 7px}.compact-table-wrap th{font-size:8px}.account-name{font-size:10px}.role-pill{display:inline-block;padding:3px 5px;border-radius:4px;font-size:8px;font-weight:700}.role-admin{background:#38256c;color:#ccbaff}.role-developer{background:#163868;color:#8fbeff}.role-reseller{background:#184a41;color:#87e8cc}.account-actions{justify-content:flex-end}.mini-action{background:#111d31;border:1px solid #2a3952;border-radius:5px;width:25px;height:25px;color:#acbad3;padding:0;font-size:13px}.mini-action:hover{border-color:#6576a0}.danger-text{color:#ff8792!important}.success-text{color:#46dfaa!important}.donut-row{display:flex;align-items:center;justify-content:space-around;gap:18px;padding:5px 0 7px}.donut{width:132px;height:132px;flex:none;display:grid;place-items:center;border-radius:50%;background:conic-gradient(var(--green) 0 60%,var(--amber) 60% 85%,var(--red) 85% 100%);position:relative}.donut:before{content:"";position:absolute;inset:13px;border-radius:50%;background:#0d1525;border:1px solid #1d2a41}.donut-hole{position:relative;z-index:1;display:flex;align-items:center;flex-direction:column;justify-content:center}.donut-hole strong{font-size:19px;line-height:1.3}.donut-hole span{font-size:9px;color:#7f8eac}.legend-list{display:grid;gap:12px;flex:1;min-width:110px}.legend-list>div{display:grid;grid-template-columns:8px minmax(60px,1fr) auto;gap:6px;align-items:center;font-size:9px;color:#aab7cf}.legend-list strong{font-size:10px;color:#e0e7f6}.legend-dot{width:7px;height:7px;border-radius:50%}.dot-green{background:var(--green)}.dot-amber{background:var(--amber)}.dot-red{background:var(--red)}.api-live{display:inline-flex;align-items:center;gap:5px;background:#102c27;border:1px solid #1b5747;color:#58e1b3;border-radius:5px;padding:4px 7px;font-size:9px;font-weight:800}.api-live i{width:5px;height:5px;border-radius:50%;background:currentColor}.endpoint-code{display:block;border:1px solid #293751;background:#090f1b;padding:11px;border-radius:7px;color:#b9b1ff;font-size:10px;overflow-wrap:anywhere}.api-panel p{line-height:1.7}.api-panel .btn{margin-top:5px}.app-footer{display:flex;align-items:center;gap:7px;color:#5f6e8b;font-size:9px;border-top:1px solid #1b273b;margin-top:16px;padding:15px 0 8px}.app-footer .footer-right{margin-left:auto}
/* Modal/toast */
.modal{width:min(92vw,470px);max-height:85vh;overflow:auto;background:#101827;border:1px solid #34415a;border-radius:14px;color:var(--text);padding:22px;box-shadow:0 24px 90px rgba(0,0,0,.55)}.modal::backdrop{background:rgba(2,5,12,.76);backdrop-filter:blur(4px)}.modal-close-form{display:flex;justify-content:flex-end;margin:-9px -9px 8px}.modal-kicker{font-size:9px;font-weight:800;letter-spacing:1.5px;color:#988aff}.modal h2{font-size:19px;margin:4px 0 8px}.modal p{font-size:11px;line-height:1.7}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:17px}.detail-grid>div{min-width:0;padding:10px;background:#131f32;border:1px solid #26364f;border-radius:7px}.detail-grid span{display:block;color:#8090ae;font-size:9px;margin-bottom:5px}.detail-grid strong,.detail-grid code{display:block;color:#e0e7f6;font-size:10px;overflow-wrap:anywhere}.detail-grid code{color:#b9aeff}.toast-region{position:fixed;right:18px;bottom:18px;z-index:100;display:grid;gap:8px;max-width:min(90vw,360px)}.toast{border:1px solid #245d4d;background:#0f2a25;color:#b9f6df;padding:12px 15px;border-radius:9px;box-shadow:var(--shadow);font-size:11px;animation:toast-in .2s ease-out}.toast-error{border-color:#783040;background:#301923;color:#ffc5cc}@keyframes toast-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1600px){.content{padding-left:32px;padding-right:32px}.main-grid{grid-template-columns:minmax(0,1.8fr) minmax(360px,.9fr)}.panel{padding:18px}.stat-card{padding-top:17px;padding-bottom:16px}.form-grid{grid-template-columns:1fr 1.2fr 1.2fr auto}}
@media(max-width:1250px){.app-shell{grid-template-columns:205px minmax(0,1fr)}.content{padding:20px 16px}.main-grid{grid-template-columns:minmax(0,1fr)}.right-column{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.right-column #accounts{grid-row:span 2}.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.stat-card{padding-left:54px}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.field-action{grid-column:auto}.filter-row{grid-template-columns:minmax(0,1fr) minmax(120px,.6fr) minmax(120px,.7fr) auto}}
@media(max-width:850px){.topbar{height:64px;padding:0 15px}.app-shell{display:block;min-height:calc(100vh - 64px)}.sidebar{position:fixed;top:64px;left:0;bottom:0;width:250px;height:auto;transform:translateX(-105%);transition:transform .2s ease;background:#090f1b;border-right:1px solid #27354c;box-shadow:var(--shadow)}.sidebar.sidebar-open{transform:translateX(0)}.mobile-nav-toggle{display:grid}.topbar .brand-mark{width:34px;height:34px}.topbar .brand-name{font-size:14px}.content{padding:19px 14px 10px}.page-heading{align-items:flex-start;flex-direction:column}.heading-actions{width:100%;justify-content:space-between}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stat-card:last-child{grid-column:span 2}.main-grid{grid-template-columns:minmax(0,1fr)}.right-column{grid-template-columns:minmax(0,1fr)}.right-column #accounts{grid-row:auto}.filter-row{grid-template-columns:minmax(0,1fr) minmax(120px,.6fr)}.filter-row .search-wrap{grid-column:1/-1}.filter-row .btn{width:100%}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.panel{padding:13px}.table-wrap table{min-width:790px}.compact-table-wrap table{min-width:440px}.page-heading h1{font-size:22px}}
@media(max-width:480px){.brand-sub{font-size:9px}.topbar{padding:0 10px}.user-meta{min-width:0}.user-meta strong{max-width:95px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar-right{gap:7px}.user-avatar{width:32px;height:32px}.content{padding:16px 10px}.stats-grid{gap:7px}.stat-card{padding:12px 8px 11px 43px}.stat-icon{width:26px;height:26px;left:9px;top:13px;font-size:14px;border-radius:8px}.stat-label{font-size:9px}.stat-value{font-size:22px}.stat-foot{font-size:8px}.panel-head h2{font-size:14px}.form-grid{grid-template-columns:minmax(0,1fr)}.field-action{grid-column:auto}.filter-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.filter-row .search-wrap{grid-column:1/-1}.filter-row .btn{grid-column:1/-1}.created-key-box{align-items:flex-start;flex-direction:column}.created-key-box code{font-size:12px}.donut-row{gap:12px}.donut{width:105px;height:105px}.donut:before{inset:11px}.legend-list{gap:9px}.legend-list>div{font-size:8px}.app-footer{flex-wrap:wrap}.footer-right{width:100%;margin-left:0!important}.detail-grid{grid-template-columns:1fr}.modal{padding:17px}}

/* Visual refresh: polished glass panels, clearer hierarchy, and softer interactions */
:root{--bg:#070b16;--panel:#0e1728;--panel2:#121e32;--panel3:#17243a;--border:#253650;--border2:#344965;--purple:#8067ff;--purple2:#6246ee;--green:#36dfad;--blue:#5b9cff;--shadow:0 22px 65px rgba(0,0,0,.28)}
body{background:radial-gradient(ellipse at 82% -8%,rgba(88,70,230,.18),transparent 36%),radial-gradient(ellipse at 0% 45%,rgba(22,119,190,.07),transparent 38%),var(--bg);font-size:13px}
.topbar{background:rgba(7,11,22,.84);border-bottom-color:rgba(104,127,169,.2);box-shadow:0 8px 30px rgba(0,0,0,.12)}
.brand-mark{background:linear-gradient(145deg,rgba(128,103,255,.34),rgba(47,157,255,.12));border-color:rgba(150,132,255,.58);box-shadow:0 0 28px rgba(112,87,255,.14),inset 0 0 18px rgba(118,87,255,.13)}
.sidebar{background:linear-gradient(180deg,rgba(9,15,29,.94),rgba(7,12,23,.88));border-right-color:rgba(104,127,169,.18)}
.nav-link{border-radius:11px;padding:12px 13px;transition:transform .18s ease,background .18s ease,border-color .18s ease}
.nav-link:hover{transform:translateX(2px);background:rgba(31,45,72,.6)}
.nav-link.active{background:linear-gradient(105deg,rgba(112,83,255,.24),rgba(51,127,220,.1));border-color:rgba(126,105,255,.35);box-shadow:inset 3px 0 #927cff,0 5px 18px rgba(46,37,120,.1)}
.content{padding-top:29px}
.page-heading{margin-bottom:23px}
.page-heading h1{font-size:clamp(23px,2vw,29px);letter-spacing:-1px}
.eyebrow{color:#a397ff;letter-spacing:1.7px}
.secure-badge{border-radius:999px;background:rgba(18,34,47,.72);border-color:rgba(54,223,173,.2)}
.stats-grid{gap:12px}
.stat-card{border-radius:15px;padding-top:17px;padding-bottom:16px;background:linear-gradient(145deg,rgba(20,31,52,.98),rgba(11,19,34,.98));border-color:rgba(93,117,158,.28);box-shadow:0 8px 24px rgba(0,0,0,.08);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.stat-card:hover{transform:translateY(-3px);border-color:rgba(139,121,255,.48);box-shadow:0 14px 32px rgba(0,0,0,.18)}
.stat-icon{border-radius:12px;box-shadow:inset 0 1px rgba(255,255,255,.07)}
.stat-value{font-variant-numeric:tabular-nums;letter-spacing:-1.2px}
.panel{border-radius:15px;padding:18px;background:linear-gradient(155deg,rgba(15,24,41,.97),rgba(10,16,29,.98));border-color:rgba(88,111,151,.27);box-shadow:0 10px 32px rgba(0,0,0,.09)}
.panel-head{margin-bottom:17px}
.panel-head h2{font-size:15px;letter-spacing:-.35px}
.panel-number,.table-count,.tiny-count{border-radius:8px;background:rgba(24,36,58,.78);border-color:rgba(89,113,154,.25)}
input,select{border-radius:10px;background:rgba(14,24,41,.94);border-color:#2b3d59;min-height:41px}
input:focus,select:focus{border-color:#927cff;box-shadow:0 0 0 3px rgba(128,103,255,.15)}
.btn{border-radius:10px;min-height:38px;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}
.btn-primary{background:linear-gradient(115deg,#8067ff 0%,#6046ec 55%,#416be9 100%);box-shadow:0 7px 20px rgba(96,70,236,.23)}
.btn-primary:hover:not(:disabled){filter:brightness(1.12);box-shadow:0 9px 26px rgba(96,70,236,.3)}
.btn-secondary,.btn-ghost{background:rgba(22,34,54,.88);border-color:#31445f}
.btn-secondary:hover:not(:disabled),.btn-ghost:hover:not(:disabled){border-color:#647da5;background:#1b2a43}
.table-wrap{border:1px solid rgba(72,94,132,.22);border-radius:11px;overflow:auto}
table thead th{background:rgba(19,30,49,.98);color:#91a3c4;letter-spacing:.65px}
table tbody tr{transition:background .15s ease}
table tbody tr:hover{background:rgba(61,79,123,.12)}
table td,table th{border-bottom-color:rgba(75,95,130,.18)}
.created-key-box{border-radius:12px;box-shadow:inset 0 1px rgba(255,255,255,.025)}
.profile-card{border-radius:13px;border-color:rgba(119,100,237,.3);background:linear-gradient(145deg,rgba(38,31,78,.56),rgba(15,20,39,.82))}
.api-panel{background:radial-gradient(ellipse at 100% 0%,rgba(57,126,234,.1),transparent 55%),linear-gradient(155deg,rgba(15,24,41,.97),rgba(10,16,29,.98))}
.endpoint-code{border-radius:9px;border-color:rgba(78,134,255,.25)}
.modal{border-radius:18px;border-color:rgba(115,133,174,.32);box-shadow:0 30px 100px rgba(0,0,0,.55)}
.toast{border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.28)}
.app-footer{color:#6f80a0;border-top-color:rgba(90,111,149,.18);padding-top:17px}
@media(max-width:900px){.content{padding-top:20px}.panel{border-radius:13px}.stats-grid{gap:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* JUSTIN LICENSE v2.1 — Admin security-first visual refresh */
:root{--accent-mint:#4ce2b6;--accent-lilac:#ad9cff;--surface-glass:rgba(15,24,43,.84)}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{background:radial-gradient(ellipse at 86% 0%,rgba(101,72,255,.22),transparent 32%),radial-gradient(ellipse at 6% 35%,rgba(32,159,202,.10),transparent 32%),linear-gradient(145deg,#060914 0%,#090e1d 52%,#0a0d1c 100%);color:#eff3ff}
.topbar{height:76px;background:rgba(6,10,21,.91);border-bottom:1px solid rgba(144,157,194,.17);backdrop-filter:blur(20px)}
.brand-mark{width:45px;height:45px;border-radius:15px;font-size:17px}
.brand-name{font-size:17px;letter-spacing:-.35px}
.brand-sub{font-size:11px;letter-spacing:.15px}
.user-avatar{width:40px;height:40px;border-radius:14px;background:linear-gradient(145deg,rgba(133,105,255,.3),rgba(61,114,222,.12));border:1px solid rgba(157,137,255,.47)}
.app-shell{grid-template-columns:238px minmax(0,1fr)}
.sidebar{top:76px;height:calc(100vh - 76px);padding:23px 15px 16px}
.nav-caption{font-size:10px;letter-spacing:2.4px;color:#6f7d9c;padding-left:13px}
.nav-link{min-height:44px;margin:4px 0;padding:12px 13px;font-size:12px}
.nav-icon{width:23px;font-size:16px}
.content{padding:31px clamp(16px,2.4vw,36px) 36px;max-width:1600px;margin:auto;width:100%}
.page-heading{position:relative;isolation:isolate;overflow:hidden;margin-bottom:19px;padding:27px 28px;border:1px solid rgba(123,137,184,.23);border-radius:22px;background:radial-gradient(ellipse at 91% 30%,rgba(102,81,255,.22),transparent 36%),linear-gradient(128deg,rgba(18,27,48,.94),rgba(10,17,32,.89));box-shadow:0 20px 56px rgba(0,0,0,.18)}
.page-heading:after{content:"JL";position:absolute;right:6%;top:50%;transform:translateY(-54%);font-size:clamp(96px,12vw,166px);font-weight:900;letter-spacing:-12px;line-height:1;color:rgba(174,160,255,.045);z-index:-1;pointer-events:none}
.page-heading h1{font-size:clamp(27px,3vw,38px);line-height:1.1;letter-spacing:-1.5px;margin:10px 0 12px}
.page-heading .muted{font-size:13px;line-height:1.65;max-width:630px}
.eyebrow{font-size:10px;letter-spacing:2.25px;color:#ae9fff}
.heading-actions{gap:10px;margin-top:15px}
.secure-badge{padding:10px 14px;font-size:11px;border:1px solid rgba(63,218,175,.2);background:rgba(20,45,52,.48)}
.stats-grid{gap:14px;margin-bottom:22px}
.stat-card{position:relative;isolation:isolate;overflow:hidden;min-height:132px;border-radius:19px;padding:20px 16px 17px 73px;border-color:rgba(111,131,176,.22);background:linear-gradient(145deg,rgba(19,29,51,.98),rgba(11,18,33,.98));box-shadow:0 15px 35px rgba(0,0,0,.12)}
.stat-card:after{content:"";position:absolute;z-index:-1;width:135px;height:135px;right:-43px;top:-65px;border-radius:50%;background:currentColor;opacity:.045}
.stat-icon{top:20px;left:17px;width:40px;height:40px;border-radius:14px;font-size:19px}
.stat-label{font-size:11px;color:#9ba8c2;line-height:1.5}
.stat-value{font-size:32px;font-weight:800;letter-spacing:-1.3px;margin-top:3px}
.stat-foot{font-size:10px;margin-top:7px;line-height:1.5;color:#7787a5}
.panel{border-radius:20px;padding:22px;border-color:rgba(111,131,176,.23);background:linear-gradient(150deg,rgba(15,24,43,.97),rgba(9,16,30,.97));box-shadow:0 18px 45px rgba(0,0,0,.13)}
.panel-head{margin-bottom:20px;gap:14px}
.panel-head h2{font-size:19px;letter-spacing:-.55px;margin-top:6px}
.panel-number{width:38px;height:38px;display:grid;place-items:center;font-size:12px;color:#b8acff;border-color:rgba(131,114,255,.22);background:rgba(70,57,135,.2)}
.form-grid{gap:14px}
.field label{font-size:11px;font-weight:700;color:#b8c4dd;margin-bottom:8px}
.field small{font-size:10px;line-height:1.5}
input,select{border:1px solid #2d3d5c;border-radius:12px;min-height:45px;padding:0 13px;background:rgba(9,17,32,.92);color:#eaf0ff;font-size:12px}
input::placeholder{color:#63718e}
.btn{min-height:42px;border-radius:12px;padding:0 15px;font-size:11px;font-weight:750;letter-spacing:.05px}
.btn-primary{background:linear-gradient(115deg,#a18aff,#7959fa 48%,#4c82f6);border:1px solid rgba(190,177,255,.38);box-shadow:0 8px 24px rgba(103,76,246,.27)}
.btn-secondary,.btn-ghost{background:linear-gradient(145deg,rgba(28,42,67,.96),rgba(17,28,48,.96));border-color:rgba(98,121,164,.38);color:#e1eaff}
.btn-danger{background:linear-gradient(120deg,#b93859,#8e2946);border-color:#c14b67;color:#fff0f4}
.btn-blue{background:linear-gradient(120deg,#2f83e8,#4654df);border:1px solid rgba(100,157,255,.4);color:white}
.table-wrap{border-radius:14px;border-color:rgba(82,105,150,.25);background:rgba(6,12,23,.28)}
table{font-size:11px}table thead th{padding:13px 12px;font-size:9px;letter-spacing:1px;background:rgba(18,29,49,.98)}table td{padding:13px 12px;color:#c6d1e5}
.key-cell code,.table-key{font-size:11px;letter-spacing:.1px;color:#c6baff;background:rgba(107,88,223,.1);border:1px solid rgba(125,105,242,.15);border-radius:6px;padding:5px 7px}
.row-actions{gap:6px;flex-wrap:wrap}.btn-xs{min-height:30px;padding:0 9px;border-radius:8px;font-size:10px}
.btn[data-action="reset-activation"]{color:#d8ceff;border-color:rgba(149,126,255,.42);background:linear-gradient(120deg,rgba(113,83,255,.25),rgba(63,83,166,.25))}
.created-key-box{margin-top:16px;padding:15px;border:1px solid rgba(70,221,177,.25);background:linear-gradient(100deg,rgba(22,70,64,.26),rgba(16,29,46,.6))}
.filter-row{gap:9px;margin-bottom:15px}.search-wrap{border-radius:12px;background:rgba(9,17,32,.92);border-color:#2d3d5c}.search-wrap input{border:0;background:transparent}
.status-badge{border-radius:999px;padding:6px 9px;font-size:10px}
#reset-key-panel{position:relative;overflow:hidden;margin:0 0 22px;padding:22px;background:radial-gradient(ellipse at 100% 0%,rgba(117,89,255,.23),transparent 38%),linear-gradient(120deg,rgba(22,31,57,.98),rgba(11,20,37,.98));border-color:rgba(142,122,255,.45);box-shadow:0 20px 45px rgba(61,43,160,.13)}
#reset-key-panel:before{content:"";position:absolute;top:-76px;right:24%;width:165px;height:165px;border:1px solid rgba(164,148,255,.09);border-radius:50%;box-shadow:0 0 0 22px rgba(164,148,255,.025),0 0 0 44px rgba(164,148,255,.02);pointer-events:none}
.reset-key-copy{display:flex;align-items:flex-start;gap:14px;position:relative}
.reset-key-icon{flex:0 0 49px;height:49px;display:grid;place-items:center;border-radius:16px;font-size:26px;color:#e1d9ff;background:linear-gradient(145deg,rgba(140,111,255,.32),rgba(79,102,221,.17));border:1px solid rgba(174,156,255,.36);box-shadow:inset 0 1px rgba(255,255,255,.1),0 8px 22px rgba(75,56,178,.2)}
.reset-key-copy h2{margin:6px 0 7px;font-size:22px;letter-spacing:-.65px}
.reset-key-copy p{font-size:12px;line-height:1.65;max-width:720px;margin:0;color:#a8b5cf}
.quick-reset-form{display:grid;grid-template-columns:minmax(220px,1.05fr) minmax(240px,1fr) auto;align-items:end;gap:13px;margin-top:21px;position:relative}
.quick-reset-select{min-width:0}.quick-reset-select select{width:100%;min-width:0}
.quick-reset-info{min-height:45px;display:flex;align-items:center;gap:10px;padding:10px 13px;border:1px solid rgba(93,117,165,.22);border-radius:12px;background:rgba(5,12,25,.38);font-size:11px;line-height:1.5;color:#aebcd7}
.quick-reset-info strong{color:#ece7ff}.reset-info-dot{flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:#6b7b99}.reset-info-active{background:#47e1b0;box-shadow:0 0 0 4px rgba(71,225,176,.12)}.reset-info-muted{background:#7e8aa2}
.btn-reset-key{white-space:nowrap;background:linear-gradient(120deg,#a18aff,#7757f4 55%,#4c77e9);border:1px solid rgba(189,175,255,.5);color:#fff;box-shadow:0 8px 24px rgba(105,79,237,.28)}
.btn-reset-key:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
.reset-key-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:15px;padding-top:13px;border-top:1px solid rgba(126,139,183,.14);color:#8493b1;font-size:10px}
#reset-key-panel[hidden],#navResetKey[hidden]{display:none!important}
@media(max-width:1000px){.quick-reset-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.quick-reset-select{grid-column:1/-1}.btn-reset-key{width:100%}}
@media(max-width:850px){.topbar{height:66px;padding:0 15px}.app-shell{display:block}.sidebar{top:66px;height:calc(100vh - 66px);width:270px}.content{padding:18px 13px 28px}.page-heading{padding:22px 19px;border-radius:19px}.page-heading h1{font-size:29px}.stat-card{min-height:120px;border-radius:16px;padding-left:58px}.stat-icon{width:33px;height:33px;left:13px;top:17px}.panel{padding:16px;border-radius:17px}#reset-key-panel{padding:17px}.reset-key-copy h2{font-size:20px}.reset-key-foot{font-size:9px}}
@media(max-width:520px){.topbar{padding:0 10px}.brand-mark{width:38px;height:38px;border-radius:13px}.brand-name{font-size:13px}.brand-sub{font-size:9px}.user-avatar{width:34px;height:34px}.user-meta strong{font-size:11px}.user-meta span{font-size:9px}.content{padding:13px 10px 24px}.page-heading{padding:20px 15px;margin-bottom:13px}.page-heading h1{font-size:26px;letter-spacing:-1.1px}.page-heading .muted{font-size:12px}.heading-actions{align-items:center;gap:8px}.secure-badge{font-size:10px;padding:9px 10px}.heading-actions .btn{padding:0 11px;min-height:39px}.stats-grid{gap:8px;margin-bottom:15px}.stat-card{min-height:110px;padding:14px 9px 12px 48px;border-radius:15px}.stat-icon{width:29px;height:29px;left:10px;top:14px;border-radius:10px;font-size:15px}.stat-label{font-size:9px}.stat-value{font-size:27px;margin-top:4px}.stat-foot{font-size:9px}.panel{padding:14px;margin-bottom:13px}.panel-head h2{font-size:17px}.quick-reset-form{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:17px}.quick-reset-select{grid-column:auto}.quick-reset-info{min-height:43px}.btn-reset-key{width:100%;min-height:46px;font-size:12px}.reset-key-copy{gap:11px}.reset-key-icon{flex-basis:41px;height:41px;border-radius:13px;font-size:23px}.reset-key-copy h2{font-size:18px}.reset-key-copy p{font-size:11px}.reset-key-foot{display:grid;gap:7px}.filter-row{gap:8px}.btn-xs{min-height:31px}table{font-size:10px}.row-actions{min-width:245px}}

/* License ownership and key-control clarity */
.owner-meta{display:grid;gap:2px;min-width:92px}.owner-meta small{font-size:9px;color:#7f91b3;margin-top:0}.lock-reason{max-width:210px;white-space:normal;line-height:1.35;color:#ffb6bf}.row-actions .btn:disabled{opacity:.42}
#dialogContent textarea{display:block;width:100%;min-height:96px;resize:vertical;background:#111a2b;color:var(--text);border:1px solid var(--border2);border-radius:10px;padding:11px;outline:none;font:inherit}#dialogContent textarea:focus{border-color:#7a61ff;box-shadow:0 0 0 3px rgba(118,87,255,.12)}#dialogContent .stack-form{margin-top:15px}

.audit-details{min-width:220px;max-width:380px;white-space:normal;overflow-wrap:anywhere;color:#9faecc;font-size:10px;line-height:1.45}

/* Backup and disaster-recovery workspace */
.backups-panel{margin-top:20px;scroll-margin-top:88px}.backup-stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin:16px 0}.backup-stat{display:grid;gap:5px;padding:15px 16px;border:1px solid rgba(88,109,151,.24);border-radius:13px;background:linear-gradient(140deg,rgba(24,35,57,.86),rgba(13,20,35,.92));min-width:0}.backup-stat>span{font-size:10px;color:var(--muted)}.backup-stat strong{font-size:21px;color:#d3c9ff;letter-spacing:-.5px}.backup-stat small{font-size:10px;color:var(--muted2);margin:0}.backup-settings-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:13px;margin:14px 0 20px}.backup-settings-card{min-width:0;display:grid;align-content:start;gap:12px;padding:16px;border:1px solid rgba(88,109,151,.24);border-radius:14px;background:rgba(12,20,35,.72)}.backup-settings-card .subsection-head{gap:8px;flex-wrap:wrap;margin:0}.backup-settings-card .subsection-head h3,.backup-history-head h3{margin:0;font-size:13px}.backup-toggle-row{display:flex;gap:10px;align-items:flex-start;padding:11px;border:1px solid rgba(67,191,147,.22);border-radius:10px;background:rgba(21,94,74,.10);cursor:pointer}.backup-toggle-row input{width:17px;min-width:17px;height:17px;min-height:17px;margin:2px 0 0;accent-color:var(--green)}.backup-toggle-row span{display:grid;gap:3px}.backup-toggle-row strong{font-size:11px;color:#d8e9e8}.backup-toggle-row small{margin:0;font-size:10px;line-height:1.45;color:var(--muted)}.backup-config-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.backup-config-fields input,.backup-config-fields select{min-height:39px}.backup-settings-card>button{width:100%}.backup-settings-card input[type=file]{min-height:45px;padding:9px;background:#10192a;font-size:10px}.backup-settings-card textarea{display:block;width:100%;min-height:76px;resize:vertical;background:#111a2b;color:var(--text);border:1px solid var(--border2);border-radius:10px;padding:11px;outline:none;font:inherit}.backup-settings-card textarea:focus{border-color:#7a61ff;box-shadow:0 0 0 3px rgba(118,87,255,.12)}.backup-history-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:16px 0 11px}.backup-history-head p{margin:3px 0 0}.backup-table{min-width:800px}.backup-actions{min-width:230px;flex-wrap:wrap}.backup-security-note{display:grid;gap:7px;margin-top:14px;padding:14px 16px;border:1px solid rgba(255,184,39,.24);border-radius:12px;background:rgba(104,73,15,.12);font-size:10px;color:#adb9d0;line-height:1.55}.backup-security-note strong{color:#ffd26c;font-size:12px}.backup-security-note code{color:#d5c7ff}.audit-details{min-width:220px;max-width:380px;white-space:normal;overflow-wrap:anywhere;color:#9faecc;font-size:10px;line-height:1.45}.owner-meta{display:grid;gap:2px;min-width:92px}.owner-meta small{font-size:9px;color:#7f91b3;margin-top:0}.lock-reason{max-width:210px;white-space:normal;line-height:1.35;color:#ffb6bf}.row-actions .btn:disabled{opacity:.42}
#dialogContent textarea{display:block;width:100%;min-height:96px;resize:vertical;background:#111a2b;color:var(--text);border:1px solid var(--border2);border-radius:10px;padding:11px;outline:none;font:inherit}#dialogContent textarea:focus{border-color:#7a61ff;box-shadow:0 0 0 3px rgba(118,87,255,.12)}#dialogContent .stack-form{margin-top:15px}
@media(max-width:850px){.backup-settings-grid{grid-template-columns:minmax(0,1fr)}.backup-stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.backup-stat{padding:12px}.backup-stat strong{font-size:18px}}
@media(max-width:520px){.backup-stats-grid{grid-template-columns:minmax(0,1fr)}.backup-settings-card{padding:12px}.backup-config-fields{grid-template-columns:minmax(0,1fr)}.backup-history-head{align-items:flex-start}.backup-security-note{padding:12px}.backup-actions{min-width:245px}}

.dot-purple{background:var(--purple)}


/* JUSTIN LICENSE simple clean refresh */
:root{--bg:#0b1020;--panel:#111a2b;--panel2:#151f33;--panel3:#1a2640;--border:#26344b;--border2:#354661;--text:#f4f7ff;--muted:#9aa8c0;--muted2:#7d8ba5;--purple:#7965f5;--purple2:#6550df;--shadow:0 12px 32px rgba(0,0,0,.18)}
body{background:#0b1020;font-size:14px;line-height:1.6}
.topbar{height:66px;padding:0 28px;background:rgba(11,16,32,.96);border-bottom-color:#202b40}
.brand-mark{border-radius:10px;background:#211e48;border-color:#4941a0;box-shadow:none}
.brand-name{font-size:15px;letter-spacing:.1px}
.brand-sub{font-size:11px}
.app-shell{max-width:1600px;margin:0 auto}
.sidebar{background:#0e1627;border-right:1px solid #202b40}
.nav-caption{letter-spacing:1px;font-size:10px}
.nav-link{margin:3px 10px;border-radius:9px;padding:11px 13px;color:#aab7ce;font-size:13px}
.nav-link.active{background:#211f45;color:#e3deff;border:1px solid #37316c}
.nav-icon{width:22px}
.content{padding:30px;max-width:1600px}
.page-heading{margin-bottom:24px;gap:18px}
.page-heading h1{font-size:26px;letter-spacing:-.6px;margin:4px 0 5px}
.page-heading p{font-size:13px}
.panel,.stat-card,.login-card,.profile-card,.table-wrap{border-radius:13px;box-shadow:none}
.panel{background:#111a2b;border-color:#26344b;padding:21px}
.stat-card{padding:18px;background:#111a2b;border-color:#26344b;min-height:130px}
.stat-icon{border-radius:10px}
.stat-label{font-size:12px}
.stat-value{font-size:29px;letter-spacing:-.7px}
.stat-foot{font-size:11px}
h2{font-size:17px;letter-spacing:-.2px}
h3{font-size:14px}
.btn{min-height:38px;padding:9px 14px;border-radius:8px;font-size:12px;box-shadow:none}
.btn-primary{background:#7058ed}
.btn-primary:hover:not(:disabled){background:#806cf5}
.btn-secondary,.btn-ghost{background:#172238;border-color:#2b3a54}
input,select,textarea{background:#0d1628;border-color:#30415c;border-radius:8px;min-height:41px;padding:10px 12px;font-size:13px}
label{font-size:12px;color:#d5def0}
table{font-size:12px}
th{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:#9cabc4}
td,th{padding:12px 13px}
.badge{border-radius:6px}
.reset-key-panel{background:#111a2b;border-color:#413879}
.reset-key-icon{border-radius:10px;box-shadow:none}
.quick-reset-form{gap:14px}
.quick-reset-info{border-radius:8px}
.login-card{background:#111a2b;border-color:#26344b;padding:30px}
.login-card h1{font-size:25px}
.login-card .btn{min-height:44px}
.sidebar-version{font-size:10px}
.global-message{border-radius:9px}
.toast{border-radius:9px}
@media(max-width:900px){.content{padding:20px}.topbar{padding:0 17px}.page-heading h1{font-size:23px}}
@media(max-width:600px){.content{padding:15px}.topbar{height:62px}.brand-name{font-size:13px}.brand-sub{font-size:9px}.page-heading{align-items:flex-start;flex-direction:column}.page-heading h1{font-size:22px}.panel{padding:15px}.stat-card{padding:14px;min-height:112px}.stat-value{font-size:25px}.btn{white-space:normal}.login-card{padding:23px}}



/* =========================================================
   JUSTIN · CHARCOAL UI v3
   Refined dark interface inspired by the supplied references
   ========================================================= */
:root{
  color-scheme:dark;
  --bg:#14161e;
  --panel:#1c202b;
  --panel2:#202531;
  --panel3:#252b38;
  --border:#2a3040;
  --border2:#353d50;
  --text:#f3f5fa;
  --muted:#9aa7bb;
  --muted2:#78869d;
  --purple:#a0a9ff;
  --purple2:#818cf8;
  --green:#32d3a1;
  --amber:#f4b740;
  --red:#fa6877;
  --blue:#8ba9ff;
  --shadow:0 12px 30px rgba(0,0,0,.22);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg)!important;color:var(--text)!important;font-size:13px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}a{color:inherit;text-decoration:none}::selection{background:rgba(139,160,207,.28);color:#fff}
input,select,textarea{width:100%;min-width:0;min-height:42px;padding:10px 12px;background:#151821!important;color:var(--text)!important;border:1px solid #303749!important;border-radius:10px!important;outline:0;box-shadow:none!important;transition:border-color .18s,background .18s,box-shadow .18s}
input::placeholder,textarea::placeholder{color:#657188;opacity:1}input:focus,select:focus,textarea:focus{border-color:#65728a!important;box-shadow:0 0 0 3px rgba(134,151,184,.12)!important;background:#171b25!important}input[type=checkbox],input[type=radio]{width:18px;min-width:18px;min-height:18px;accent-color:#9aa9c2}input[type=file]{padding:8px}select{cursor:pointer}textarea{resize:vertical;min-height:92px}label{display:block;margin:0 0 7px;color:#aab6c9!important;font-size:12px;font-weight:650;line-height:1.45}small{display:block;margin-top:5px;color:var(--muted2);font-size:10px;line-height:1.5}.muted{color:var(--muted)!important}.small{font-size:11px}.eyebrow{margin-bottom:5px;color:#8795ad!important;font-size:9px;font-weight:800;letter-spacing:1.45px;text-transform:uppercase}
/* Brand and global controls */
.brand{display:flex;align-items:center;gap:11px;min-width:0}.brand-mark{display:grid;place-items:center;flex:none;width:40px;height:40px;border:1px solid #3b4357!important;border-radius:12px!important;background:linear-gradient(145deg,#292f3e,#1b1f2b)!important;color:#f1f4fa!important;font-weight:800;letter-spacing:-1px;box-shadow:inset 0 1px rgba(255,255,255,.04)!important}.brand-name{color:#f1f4fa!important;font-size:16px;font-weight:800;letter-spacing:.015em;line-height:1.25}.brand-sub{margin-top:3px;color:#8793a8!important;font-size:10px;letter-spacing:.02em}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:39px;padding:9px 14px;border:1px solid #394256!important;border-radius:9px!important;background:#292f3e!important;color:#eef1f7!important;font-size:12px;font-weight:650;line-height:1.25;white-space:nowrap;box-shadow:none!important;transition:background .16s,border-color .16s,transform .16s}.btn:hover:not(:disabled){background:#333b4d!important;border-color:#4a566e!important;transform:translateY(-1px)}.btn:active:not(:disabled){transform:translateY(0)}.btn-primary{background:#303749!important;border-color:#424b60!important;color:#f7f8fb!important}.btn-primary:hover:not(:disabled){background:#394256!important}.btn-secondary,.btn-ghost{background:#202531!important;border-color:#303749!important;color:#dce2ed!important}.btn-secondary:hover:not(:disabled),.btn-ghost:hover:not(:disabled){background:#282e3c!important}.btn-danger{background:rgba(117,35,48,.28)!important;border-color:rgba(250,104,119,.38)!important;color:#ffadb6!important}.btn-danger:hover:not(:disabled){background:rgba(145,43,59,.4)!important}.btn-blue{background:#273754!important;border-color:#3c527b!important}.btn-xs{min-height:28px;padding:5px 9px;border-radius:7px!important;font-size:10px}.btn-wide{width:100%}.icon-btn{display:grid;place-items:center;width:38px;height:38px;border:1px solid #303749!important;border-radius:10px!important;background:#1a1e29!important;color:#aebbd0!important;font-size:18px}.icon-btn:hover{background:#262c39!important;border-color:#48536a!important}.mobile-nav-toggle{display:none}
/* Login */
.login-page{display:grid;place-items:center;min-height:100vh;padding:24px;background:radial-gradient(ellipse at 50% 0%,rgba(108,125,161,.09),transparent 42%),var(--bg)!important}.login-wrap{width:min(100%,430px)}.brand-login{justify-content:center;margin:0 0 26px}.brand-login .brand-name{font-size:20px}.brand-login .brand-sub{font-size:11px}.login-card{padding:30px;background:linear-gradient(150deg,#1d212d,#191d27)!important;border:1px solid var(--border)!important;border-radius:17px!important;box-shadow:var(--shadow)!important}.login-card h1{margin:4px 0 6px;color:var(--text)!important;font-size:25px;letter-spacing:-.7px}.login-card>p{margin:0 0 22px;font-size:12px}.login-card form label{margin-top:15px}.login-card input{min-height:45px}.login-card .btn{min-height:45px;margin-top:22px}.login-security{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:20px;padding:10px;border:1px solid #2c3444;border-radius:9px;background:#181c26;color:var(--muted);font-size:10px}.login-foot{text-align:center;margin:18px 0 0;color:#647188;font-size:10px}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 9px rgba(50,211,161,.24)}.form-message{margin-top:10px;padding:10px 12px;border:1px solid rgba(250,104,119,.25);border-radius:9px;background:rgba(117,35,48,.2);color:#ffb9c0;font-size:11px}.form-success{border-color:rgba(50,211,161,.25);background:rgba(20,103,79,.19);color:#9cebd2}.form-error{border-color:rgba(250,104,119,.25);background:rgba(117,35,48,.2);color:#ffb9c0}
/* Main app frame */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;height:70px;padding:0 25px;background:rgba(23,26,36,.96)!important;border-bottom:1px solid #2a3040!important;backdrop-filter:blur(18px)}.topbar-right{display:flex;align-items:center;gap:10px}.user-avatar{display:grid;place-items:center;flex:none;width:38px;height:38px;border:1px solid #343b4d!important;border-radius:10px!important;background:#272d3b!important;color:#eef1f7!important;font-size:13px;font-weight:800}.user-meta{display:flex;flex-direction:column;gap:2px;min-width:100px}.user-meta strong{overflow:hidden;color:#f0f3f9;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.user-meta span{color:var(--muted);font-size:10px}.app-shell{display:grid;grid-template-columns:244px minmax(0,1fr);align-items:stretch;min-height:calc(100vh - 70px);max-width:1900px;margin:0 auto}.sidebar{position:sticky;top:70px;display:flex;flex-direction:column;width:244px;height:calc(100vh - 70px);padding:21px 13px 13px;border-right:1px solid #292f3e!important;background:#171a23!important;z-index:20}.nav-caption{padding:0 12px 11px;color:#76849b!important;font-size:9px;font-weight:800;letter-spacing:1.55px}.side-nav{display:grid;gap:4px}.nav-link{display:flex;align-items:center;gap:11px;margin:0;padding:11px 12px;border:1px solid transparent!important;border-radius:9px!important;color:#9ca9bd!important;font-size:12px;transition:background .16s,border-color .16s,color .16s}.nav-link:hover{background:#202531!important;color:#f1f3f8!important}.nav-link.active{position:relative;background:#252b39!important;border-color:#353d50!important;color:#f5f6f9!important;box-shadow:none!important;font-weight:650}.nav-link.active:before{position:absolute;top:9px;bottom:9px;left:0;width:3px;border-radius:0 3px 3px 0;background:#aab7ce;content:""}.nav-icon{width:20px;flex:none;color:#8998b1!important;text-align:center;font-size:16px}.nav-link.active .nav-icon{color:#dce3ee!important}.sidebar-bottom{margin-top:auto}.profile-card{padding:12px;border:1px solid #2c3342!important;border-radius:12px!important;background:#1b1f2a!important}.profile-row{display:flex;align-items:center;gap:9px}.profile-avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#282e3c!important;color:#e5eaf3!important;font-size:15px}.profile-row strong,.profile-row span{display:block}.profile-row strong{font-size:11px}.profile-row span{margin-top:2px;color:var(--muted);font-size:10px}.profile-role{display:inline-block;margin:12px 0;padding:4px 8px;border:1px solid #303749;border-radius:6px;background:#222837!important;color:#a9b7ce!important;font-size:9px;font-weight:800;letter-spacing:.7px}.profile-card .btn{min-height:35px}.sidebar-version{display:flex;justify-content:space-between;padding:12px 4px 0;color:#8491a5!important;font-size:9px}.sidebar-version span{color:#67758c!important}.content{width:100%;max-width:1660px;min-width:0;margin:0 auto;padding:25px 26px 18px}.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 19px;scroll-margin-top:90px}.page-heading h1{margin:0 0 5px;color:#f4f6fa!important;font-size:25px;letter-spacing:-.65px;line-height:1.22}.page-heading p{margin:0;font-size:12px}.heading-actions{display:flex;align-items:center;gap:9px}.secure-badge{display:inline-flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid #303749!important;border-radius:8px;background:#1c212c!important;color:#abb8cb!important;font-size:10px}.secure-badge .status-dot{width:6px;height:6px}.app-footer{display:flex;align-items:center;gap:8px;margin-top:28px;padding:17px 4px 7px;border-top:1px solid #2b3040!important;color:#7f8da4!important;font-size:10px}.footer-right{margin-left:auto;color:#6c7890}
/* Cards / stats */
.stats-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px;margin-bottom:16px}.stat-card{position:relative;min-width:0;min-height:108px;overflow:hidden;padding:17px 13px 14px 58px;border:1px solid #2b3242!important;border-radius:12px!important;background:#1c202b!important;box-shadow:0 2px 4px rgba(0,0,0,.08)!important}.stat-card:after{position:absolute;top:-43px;right:-36px;width:96px;height:96px;border-radius:50%;background:currentColor;content:"";opacity:.025}.stat-icon{position:absolute;top:17px;left:13px;display:grid;place-items:center;width:34px;height:34px;border:1px solid #343b4d!important;border-radius:11px!important;background:#242936!important;color:#d6dce7!important;font-size:17px}.stat-label{overflow:hidden;color:#91a0b6!important;font-size:10px;font-weight:750;letter-spacing:.7px;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.stat-value{margin-top:3px;color:#f5f7fb!important;font-size:25px;font-weight:800;letter-spacing:-.7px;line-height:1.25}.stat-foot{overflow:hidden;margin-top:4px;color:#78869c!important;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.stat-green .stat-icon{border-color:rgba(50,211,161,.3)!important;background:rgba(15,105,78,.22)!important;color:var(--green)!important}.stat-green{color:var(--green)}.stat-amber .stat-icon{border-color:rgba(244,183,64,.28)!important;background:rgba(124,81,8,.22)!important;color:var(--amber)!important}.stat-amber{color:var(--amber)}.stat-red .stat-icon{border-color:rgba(250,104,119,.28)!important;background:rgba(128,37,51,.22)!important;color:var(--red)!important}.stat-red{color:var(--red)}.stat-blue .stat-icon{border-color:rgba(139,169,255,.27)!important;background:rgba(55,75,121,.23)!important;color:var(--blue)!important}.stat-blue{color:var(--blue)}.stat-purple .stat-icon{border-color:#3c4355!important;background:#242936!important;color:#e5e9f2!important}.stat-purple{color:#c2cad9}
/* Panels and forms */
.main-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(310px,.92fr);gap:13px;align-items:start}.main-column,.right-column{display:grid;gap:13px;min-width:0}.panel,.backup-settings-card,.backup-stat{min-width:0;border:1px solid #2b3242!important;border-radius:12px!important;background:#1c202b!important;box-shadow:0 2px 4px rgba(0,0,0,.07)!important;scroll-margin-top:88px}.panel{padding:18px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}.panel-head h2,.panel h2{margin:0;color:#f0f3f8!important;font-size:15px;font-weight:750;letter-spacing:-.2px;line-height:1.35}.panel-head p{margin:5px 0 0}.panel-number,.table-count,.tiny-count{display:inline-flex;align-items:center;justify-content:center;flex:none;padding:4px 8px;border:1px solid #353c4d!important;border-radius:6px!important;background:#252a36!important;color:#aab6c8!important;font-size:10px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;align-items:end}.field{min-width:0}.field-action .btn{width:100%;min-height:42px}.field-grow{min-width:0}.field small{color:#78869c}.created-key-box{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:13px;border:1px solid rgba(50,211,161,.22)!important;border-radius:10px!important;background:rgba(20,103,79,.16)!important}.created-key-box code{overflow-wrap:anywhere;color:#9cebd2;font-size:12px;font-weight:700}.filter-row{display:grid;grid-template-columns:minmax(0,1fr) 155px 170px auto;gap:9px;align-items:end;margin-bottom:13px}.search-wrap{position:relative;min-width:0}.search-wrap>span{position:absolute;top:50%;left:12px;transform:translateY(-50%);color:#8392a9;font-size:17px;pointer-events:none}.search-wrap input{padding-left:35px}.subsection-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 0 10px}.subsection-head h3,.panel h3{margin:0;color:#dce2ed!important;font-size:12px;font-weight:750}.permission-note{margin-bottom:12px;padding:10px 12px;border:1px solid #303749;border-radius:8px;background:#181c26;color:#94a1b6;font-size:11px}.quick-stats .donut-row{display:flex;align-items:center;gap:19px}.legend-list{flex:1;display:grid;gap:10px;min-width:0}.legend-list>div{display:grid;grid-template-columns:8px minmax(0,1fr) auto;align-items:center;gap:8px;color:#9aa8bc;font-size:11px}.legend-list strong{color:#e3e8f0;font-size:11px}.legend-dot{display:inline-block;width:7px;height:7px;border-radius:50%}.dot-green{background:var(--green)}.dot-amber{background:var(--amber)}.dot-purple{background:#a0a9ff}.dot-red{background:var(--red)}.donut{position:relative;display:grid;place-items:center;flex:none;width:115px;height:115px;border-radius:50%;background:conic-gradient(var(--green) 0 35%,var(--amber) 35% 55%,#a0a9ff 55% 75%,var(--red) 75% 100%)}.donut:before{position:absolute;inset:11px;border:1px solid #333a4c;border-radius:50%;background:#1c202b;content:""}.donut-hole{position:relative;z-index:1;display:grid;text-align:center}.donut-hole strong{color:#f2f5fa;font-size:24px;line-height:1.2}.donut-hole span{color:#8492a7;font-size:9px}
/* Tables */
.table-wrap{width:100%;min-width:0;overflow:auto;border:1px solid #2b3242!important;border-radius:10px!important;background:#191d27!important;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}.table-wrap table{width:100%;border-collapse:separate!important;border-spacing:0;min-width:740px;background:transparent!important;font-size:11px}.table-wrap thead th{position:sticky;top:0;z-index:1;padding:12px 13px;border-bottom:1px solid #303749!important;background:#171a23!important;color:#92a0b6!important;font-size:9px!important;font-weight:800;letter-spacing:.7px;text-align:left;text-transform:uppercase;white-space:nowrap}.table-wrap tbody td{padding:12px 13px;border-bottom:1px solid #292f3e!important;background:transparent!important;color:#dce2ec!important;vertical-align:middle}.table-wrap tbody tr:last-child td{border-bottom:0!important}.table-wrap tbody tr:hover td{background:#222733!important}.table-wrap .empty-cell{padding:30px 14px;color:#8290a6!important;text-align:center}.compact-table-wrap table{min-width:490px}.table-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 2px 0;border-top:1px solid #2b3242!important;color:#8492a8;font-size:10px}.text-btn{border:0;background:transparent;color:#b6c2d5;font:inherit;cursor:pointer}.text-btn:hover{color:#fff}.badge,.status-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 7px;border:1px solid #353c4c!important;border-radius:6px!important;background:#252a36!important;color:#d0d7e3!important;font-size:10px;font-weight:750;line-height:1.2;white-space:nowrap}.badge-green{background:rgba(15,105,78,.2)!important;border-color:rgba(50,211,161,.28)!important;color:#43d9a9!important}.badge-amber{background:rgba(124,81,8,.18)!important;border-color:rgba(244,183,64,.26)!important;color:#f4c45f!important}.badge-red{background:rgba(128,37,51,.2)!important;border-color:rgba(250,104,119,.27)!important;color:#ff8996!important}.badge-purple{background:rgba(76,83,127,.2)!important;border-color:#3a4159!important;color:#bcc6ff!important}.row-actions{display:flex;align-items:center;gap:5px;min-width:max-content}.row-actions .btn{min-height:28px;padding:5px 8px;font-size:10px}
/* API / code samples */
.api-live{display:inline-flex;align-items:center;gap:6px;padding:4px 7px;border:1px solid rgba(50,211,161,.25);border-radius:6px;background:rgba(15,105,78,.16);color:#4dd9ae;font-size:9px;font-weight:800;letter-spacing:.5px}.api-live i{width:5px;height:5px;border-radius:50%;background:currentColor}.endpoint-code{display:block;overflow:auto;padding:13px 14px;border:1px solid #303749!important;border-radius:9px!important;background:#151821!important;color:#d4deef!important;font-size:11px;white-space:pre-wrap;overflow-wrap:anywhere}.api-example-code{display:block;overflow:auto;max-width:100%;margin:10px 0 14px;padding:13px;border:1px solid #303749;border-radius:9px;background:#151821;color:#aebbd0;font:11px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.api-panel p{line-height:1.65}.api-panel .btn{margin-top:4px}
/* Reset-key, messages and dialog surfaces */
.reset-key-panel{border-color:#333b4e!important;background:linear-gradient(145deg,#1d222e,#1a1e28)!important}.reset-key-copy{display:flex;align-items:flex-start;gap:13px}.reset-key-icon{display:grid;place-items:center;flex:none;width:43px;height:43px;border:1px solid #41495d!important;border-radius:12px!important;background:#272e3c!important;color:#dce4f0!important;font-size:22px}.reset-key-copy h2{margin:0 0 5px;font-size:19px}.reset-key-copy p{margin:0;max-width:780px;line-height:1.6}.quick-reset-form{display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,1.1fr) auto;align-items:end;gap:12px;margin-top:17px}.quick-reset-info{display:flex;align-items:center;gap:9px;min-height:42px;padding:9px 11px;border:1px solid #303749;border-radius:9px;background:#171b25;color:#a5b2c6;font-size:10px}.reset-info-dot{width:7px;height:7px;flex:none;border-radius:50%;background:#74839b}.btn-reset-key{background:#2a3040!important}.reset-key-foot{display:flex;justify-content:space-between;gap:12px;margin-top:12px;padding-top:11px;border-top:1px solid #2d3444;color:#8593a8;font-size:10px}.global-message{margin:0 0 14px;padding:12px 14px;border:1px solid #343d50;border-radius:9px;background:#202633;color:#e3eaf4;font-size:12px}.global-message.error{border-color:rgba(250,104,119,.3);background:rgba(117,35,48,.18);color:#ffb5bd}.global-message.success{border-color:rgba(50,211,161,.28);background:rgba(20,103,79,.16);color:#9cebd2}.toast-region{position:fixed;right:18px;bottom:18px;z-index:100;display:grid;gap:8px;max-width:min(400px,calc(100vw - 30px))}.toast{padding:12px 15px;border:1px solid #3b4355!important;border-radius:10px!important;background:#252b38!important;color:#f0f3f8!important;box-shadow:var(--shadow)!important;font-size:12px}.toast.error{border-color:rgba(250,104,119,.35)!important}.toast.success{border-color:rgba(50,211,161,.3)!important}.modal{position:fixed;max-width:min(620px,calc(100vw - 28px));max-height:min(86vh,860px);overflow:auto;padding:24px;border:1px solid #343b4e!important;border-radius:15px!important;background:#1c202b!important;color:var(--text)!important;box-shadow:0 24px 80px rgba(0,0,0,.48)!important}.modal::backdrop{background:rgba(3,5,9,.72);backdrop-filter:blur(4px)}.modal-close-form{display:flex;justify-content:flex-end;margin:-12px -12px 6px}.modal h2{margin:0 0 8px;font-size:19px}.modal p{font-size:12px;line-height:1.65}.modal-kicker{margin:0 0 7px;color:#8291aa;font-size:9px;font-weight:800;letter-spacing:1.35px;text-transform:uppercase}.stack-form{display:grid;gap:12px;margin-top:15px}.modal-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:15px}.detail-grid>div{min-width:0;padding:11px;border:1px solid #2f3647;border-radius:9px;background:#181c26}.detail-grid span{display:block;margin-bottom:5px;color:#8492a8;font-size:10px}.detail-grid strong,.detail-grid code{overflow-wrap:anywhere;color:#e5eaf2;font-size:11px}
/* Backup screens and remaining utility surfaces */
.backup-stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}.backup-stat{display:grid;gap:4px;padding:14px}.backup-stat span{color:#98a6bb;font-size:10px}.backup-stat strong{color:#f0f4fa;font-size:21px}.backup-stat small{margin:0}.backup-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.backup-settings-card{display:grid;align-content:start;gap:14px;padding:15px}.backup-toggle-row{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid #303749;border-radius:9px;background:#171b25}.backup-toggle-row>input{margin:2px 0 0}.backup-toggle-row strong{display:block;color:#e1e7f0}.backup-toggle-row small{font-weight:400}.backup-config-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.backup-history-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:19px 0 12px}.backup-history-head p{margin:4px 0 0}.backup-security-note{display:grid;gap:8px;margin-top:14px;padding:14px;border:1px solid rgba(244,183,64,.2);border-radius:10px;background:rgba(124,81,8,.1);color:#aeb9cb;font-size:10px;line-height:1.6}.backup-security-note strong{color:#f4cc73;font-size:12px}.backup-security-note code{color:#dce5f3}.backup-table{min-width:800px}.backup-actions{min-width:230px;flex-wrap:wrap}.audit-details{min-width:220px;max-width:380px;color:#9caac0;font-size:10px;line-height:1.5;white-space:normal;overflow-wrap:anywhere}.owner-meta{display:grid;gap:2px;min-width:92px}.owner-meta small{margin:0;color:#8190a7;font-size:9px}.lock-reason{max-width:210px;color:#ffadb6;line-height:1.35;white-space:normal}#dialogContent textarea{display:block;width:100%;min-height:96px;padding:11px;background:#151821!important;color:var(--text)!important;border:1px solid #303749!important;border-radius:9px!important;outline:0;font:inherit}#dialogContent textarea:focus{border-color:#65728a!important;box-shadow:0 0 0 3px rgba(134,151,184,.12)!important}#dialogContent .stack-form{margin-top:15px}.license-create-dark{display:grid;gap:14px;padding:17px;border:1px solid #303749!important;border-radius:12px!important;background:#181c26!important}.license-create-dark .field label{color:#aab6c9!important;font-weight:650}.license-create-dark input,.license-create-dark select{background:#151821!important;border:1px solid #303749!important;border-radius:9px!important;color:#eef1f7!important;min-height:42px}.license-create-dark input:focus,.license-create-dark select:focus{border-color:#65728a!important;box-shadow:0 0 0 3px rgba(134,151,184,.12)!important}.license-create-dark .field small{color:#8391a7}.required-mark{color:#fa6877}
/* Responsive behavior */
@media(min-width:1500px){.content{padding-left:32px;padding-right:32px}.main-grid{grid-template-columns:minmax(0,1.7fr) minmax(340px,.9fr)}}
@media(max-width:1200px){.app-shell{grid-template-columns:220px minmax(0,1fr)}.sidebar{width:220px}.content{padding:21px 17px}.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.stat-card{min-height:104px}.main-grid{grid-template-columns:minmax(0,1fr)}.right-column{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.right-column #accounts{grid-row:span 2}.filter-row{grid-template-columns:minmax(0,1fr) minmax(125px,.6fr)}.filter-row .search-wrap{grid-column:1/-1}.filter-row .btn{width:100%}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:850px){.topbar{height:64px;padding:0 15px}.app-shell{display:block;min-height:calc(100vh - 64px)}.sidebar{position:fixed;top:64px;left:0;bottom:0;width:min(285px,calc(100vw - 54px));height:auto;max-height:calc(100dvh - 64px);padding:18px 12px 12px;overflow:auto;transform:translateX(-105%);transition:transform .22s ease;background:#171a23!important;border-right:1px solid #2e3546!important;box-shadow:var(--shadow);z-index:50}.sidebar.sidebar-open{transform:translateX(0)}.mobile-nav-toggle{display:grid}.topbar .brand-mark{width:35px;height:35px}.topbar .brand-name{font-size:14px}.topbar .brand-sub{font-size:9px}.content{padding:19px 14px 12px}.page-heading{align-items:flex-start;flex-direction:column;gap:13px}.page-heading h1{font-size:24px}.heading-actions{width:100%;justify-content:space-between;flex-wrap:wrap}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.stat-card:last-child{grid-column:auto}.stat-card{min-height:100px;padding-left:55px}.main-grid{grid-template-columns:minmax(0,1fr)}.right-column{grid-template-columns:minmax(0,1fr)}.right-column #accounts{grid-row:auto}.panel{padding:15px}.filter-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.filter-row .search-wrap{grid-column:1/-1}.filter-row .btn{grid-column:1/-1}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.quick-reset-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.quick-reset-select{grid-column:1/-1}.btn-reset-key{width:100%}.page-heading .heading-actions .btn{min-height:40px}.backup-settings-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){.topbar{padding:0 10px}.brand{gap:8px}.brand-mark{width:34px;height:34px;border-radius:10px!important}.brand-name{font-size:13px}.brand-sub{font-size:9px}.topbar-right{gap:6px}.user-meta{min-width:0;max-width:95px}.user-meta strong{max-width:95px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-meta span{font-size:9px}.user-avatar{width:32px;height:32px;border-radius:9px!important}.content{padding:15px 10px 8px}.page-heading{margin-bottom:15px}.page-heading h1{font-size:22px;letter-spacing:-.5px}.page-heading p{font-size:11px;line-height:1.55}.eyebrow{font-size:8px;letter-spacing:1.2px}.heading-actions{gap:7px}.secure-badge{padding:8px;font-size:9px}.heading-actions .btn{padding:8px 10px;font-size:11px}.stats-grid{gap:8px;margin-bottom:12px}.stat-card{min-height:91px;padding:12px 8px 11px 44px;border-radius:10px!important}.stat-icon{top:12px;left:8px;width:27px;height:27px;border-radius:8px!important;font-size:14px}.stat-label{font-size:8px;letter-spacing:.45px}.stat-value{font-size:22px;margin-top:3px}.stat-foot{font-size:8px;white-space:normal;line-height:1.35}.main-column,.right-column{gap:10px}.panel{padding:12px;margin-bottom:0;border-radius:11px!important}.panel-head{align-items:flex-start;margin-bottom:12px}.panel-head h2,.panel h2{font-size:14px}.panel-head p{font-size:10px;line-height:1.55}.panel-number{font-size:9px}.form-grid{grid-template-columns:minmax(0,1fr);gap:11px}.field-action{grid-column:auto}.btn{white-space:normal;min-height:40px}.btn-xs{min-height:29px}.filter-row{gap:8px}.filter-row select,.filter-row button{min-width:0}.table-wrap{border-radius:9px!important}.table-wrap table{min-width:700px;font-size:10px}.table-wrap thead th{padding:11px 10px;font-size:8px!important}.table-wrap tbody td{padding:11px 10px;font-size:10px}.compact-table-wrap table{min-width:470px}.table-footer{align-items:flex-start;font-size:9px}.created-key-box{align-items:flex-start;flex-direction:column}.created-key-box code{font-size:11px}.quick-reset-form{grid-template-columns:minmax(0,1fr);gap:10px}.quick-reset-select{grid-column:auto}.quick-reset-info{font-size:10px}.reset-key-copy{gap:10px}.reset-key-icon{width:37px;height:37px;font-size:19px}.reset-key-copy h2{font-size:16px}.reset-key-copy p{font-size:10px}.reset-key-foot{display:grid;gap:6px;font-size:9px}.backup-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.backup-stat{padding:11px}.backup-stat strong{font-size:18px}.backup-settings-card{padding:12px}.backup-config-fields{grid-template-columns:minmax(0,1fr)}.backup-history-head{align-items:flex-start}.backup-security-note{padding:12px}.backup-actions{min-width:245px}.quick-stats .donut-row{gap:12px}.donut{width:95px;height:95px}.donut-hole strong{font-size:21px}.legend-list{gap:8px}.legend-list>div{font-size:9px}.login-card{padding:23px}.login-card h1{font-size:22px}.login-page{padding:15px}.detail-grid{grid-template-columns:minmax(0,1fr)}.modal{padding:17px}.modal h2{font-size:17px}.modal-actions .btn{flex:1}.app-footer{flex-wrap:wrap;gap:5px;font-size:9px}.footer-right{width:100%;margin-left:0}.api-example-code{font-size:10px;padding:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Mobile drawer backdrop: keeps navigation behavior comfortable on touch screens */
.sidebar-backdrop{display:none}
@media(max-width:850px){
  .sidebar-backdrop:not([hidden]){display:block;position:fixed;inset:64px 0 0;z-index:40;border:0;border-radius:0;background:rgba(4,6,10,.6);backdrop-filter:blur(2px)}
  .sidebar{z-index:50}
}
.toast.toast-success{border-color:rgba(50,211,161,.3)!important}
.toast.toast-error{border-color:rgba(250,104,119,.35)!important}

/* Independent dashboard pages: each navigation item opens its own workspace. */
.main-grid.single-view{display:block!important;grid-template-columns:minmax(0,1fr)!important}
.main-grid.single-view .main-column,.main-grid.single-view .right-column{display:contents!important}
.main-grid.single-view>.main-column>*,.main-grid.single-view>.right-column>*{width:100%;max-width:none}
#application-api{scroll-margin-top:90px}
#application-api[hidden],#reset-key-panel[hidden],#backups[hidden],#create-license[hidden],#licenses[hidden],#accounts[hidden],#history[hidden]{display:none!important}

/* Workspace navigation refined to match the supplied charcoal reference. */
.nav-group-caption{padding:19px 12px 7px;color:#667287;font-size:9px;font-weight:800;letter-spacing:1.45px;line-height:1.2}.nav-caption{padding-bottom:7px!important;color:#d4d9e3!important;font-size:10px!important;letter-spacing:1.8px!important}.side-nav{gap:3px!important}.nav-link{min-height:40px!important;gap:12px!important;padding:10px 12px!important;border-radius:8px!important}.nav-link .nav-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nav-link.active{background:#252a35!important;border-color:#353d4b!important}.nav-link.active:before{background:#c1cad8!important}.nav-group-caption + .nav-link{margin-top:0!important}@media(max-width:720px){.nav-group-caption{padding-top:15px}.sidebar{overflow-y:auto}.sidebar-bottom{margin-top:24px}}

/* Reseller token economy */
.token-admin-box{margin:20px 0;padding:18px;border:1px solid var(--border,#303746);border-radius:14px;background:rgba(255,255,255,.025)}
.token-admin-box .subsection-head{margin-top:0}.token-admin-box .form-grid{align-items:end}.token-admin-box .field{max-width:340px}
#accountsTable td:nth-child(4){white-space:nowrap;font-variant-numeric:tabular-nums}
#initialTokensField{min-width:180px}

/* Reseller dashboard presentation inspired by the approved JUSTIN concept */
.reseller-dashboard .topbar{background:#0b1421!important;border-bottom-color:#1e2c40!important}
.reseller-dashboard .app-shell{grid-template-columns:286px minmax(0,1fr);max-width:none}
.reseller-dashboard .sidebar{width:286px;background:#0c1725!important;border-right-color:#203047!important}
.reseller-dashboard .brand-mark{background:linear-gradient(145deg,#334e86,#222d5d)!important;color:#fff!important}
.reseller-dashboard .content{max-width:none;padding:24px 28px 28px}
.reseller-dashboard .page-heading{align-items:center;margin-bottom:20px}
.reseller-dashboard .page-heading .eyebrow{display:none}
.reseller-dashboard .page-heading h1{font-size:26px}
.reseller-dashboard .page-heading p{font-size:12px;color:#9fb2cc}
.reseller-dashboard .stats-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}
.reseller-dashboard .stats-grid .stat-card{min-height:142px;padding:20px 18px 17px 70px;border-radius:12px!important;background:linear-gradient(145deg,#172538,#111d2c)!important;border-color:#24354c!important}
.reseller-dashboard .stats-grid .stat-icon{top:21px;left:18px;width:43px;height:43px;border-radius:11px!important;font-size:21px}
.reseller-dashboard .stat-label{font-size:10px;letter-spacing:.45px;color:#a7bdd6!important}
.reseller-dashboard .stat-value{font-size:29px;margin-top:8px}
.reseller-dashboard .stat-foot{font-size:11px;margin-top:7px;color:#9aaec7!important}
.reseller-dashboard .stats-grid .stat-card:nth-child(1) .stat-icon{background:#126548!important;color:#57e6a4!important}
.reseller-dashboard .stats-grid .stat-card:nth-child(2) .stat-icon{background:#4438a5!important;color:#d2caff!important}
.reseller-dashboard .stats-grid .stat-card:nth-child(3) .stat-icon{background:#1c4fb1!important;color:#c5dcff!important}
.reseller-dashboard .stats-grid .stat-card:nth-child(4) .stat-icon{background:#945e12!important;color:#ffe0a2!important}
.reseller-dashboard .main-grid{display:block}
.reseller-dashboard .main-column{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.reseller-dashboard .main-grid>aside{display:none!important}
.reseller-dashboard .panel{border:1px solid #22334a!important;border-radius:12px!important;background:linear-gradient(145deg,#142235,#101b2a)!important;box-shadow:none!important}
.reseller-dashboard #create-license{padding:20px 22px;margin-bottom:0}
.reseller-dashboard #create-license .panel-head{margin-bottom:15px}
.reseller-dashboard #create-license .panel-head h2{font-size:17px}
.reseller-dashboard #create-license .panel-number{display:none}
.reseller-dashboard #createLicenseForm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 18px}
.reseller-dashboard #createLicenseForm .field{min-width:0}
.reseller-dashboard #createLicenseForm .field-grow,.reseller-dashboard #createLicenseForm .field-action{grid-column:1/-1}
.reseller-dashboard #createLicenseForm input,.reseller-dashboard #createLicenseForm select{min-height:42px;background:#18283b!important;border-color:#2c405b!important;color:#e8f0fb!important}
.reseller-dashboard #createLicenseForm label{font-size:11px;color:#b8c9df}
.reseller-dashboard #createLicenseForm .field-action .btn{width:100%;min-height:44px;background:linear-gradient(100deg,#4c67ed,#5940db)!important;border:0!important;color:white!important}
.reseller-dashboard #licenses{padding:0;overflow:hidden}
.reseller-dashboard #licenses .panel-head{padding:20px 22px 15px;margin:0;border-bottom:1px solid #22334a}
.reseller-dashboard #licenses .panel-head h2{font-size:17px}
.reseller-dashboard #licenses .filter-row{padding:14px 20px}
.reseller-dashboard #licenses .table-wrap{overflow-x:auto}
.reseller-dashboard #licenses table{min-width:820px}
.reseller-dashboard #licenses th{background:#142236;color:#9fb4ce}
.reseller-dashboard #licenses td,.reseller-dashboard #licenses th{border-color:#203047!important}
.reseller-dashboard .nav-link.active{background:#1e2d42!important;border-color:#2b405a!important}
.reseller-dashboard .nav-link.active:before{background:#667fff!important}
.reseller-dashboard .profile-card{background:#142235!important;border-color:#263951!important}
@media(max-width:1050px){.reseller-dashboard .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.reseller-dashboard .app-shell{grid-template-columns:240px minmax(0,1fr)}.reseller-dashboard .sidebar{width:240px}}
@media(max-width:650px){.reseller-dashboard .content{padding:16px 12px}.reseller-dashboard .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.reseller-dashboard .stats-grid .stat-card{min-height:120px;padding:14px 10px 12px 50px}.reseller-dashboard .stats-grid .stat-icon{top:15px;left:10px;width:31px;height:31px}.reseller-dashboard .stat-value{font-size:24px}.reseller-dashboard #createLicenseForm{grid-template-columns:minmax(0,1fr)}.reseller-dashboard #createLicenseForm .field-grow,.reseller-dashboard #createLicenseForm .field-action{grid-column:auto}.reseller-dashboard #create-license{padding:15px}.reseller-dashboard #licenses .panel-head{padding:15px}}