:root{color-scheme:dark;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:#090b10;color:#f7f7fa}
*{box-sizing:border-box}
body{margin:0;background:#090b10;color:#f7f7fa}
button,input,select{font:inherit}
button{cursor:pointer;border:0}
input,select{width:100%;background:#171b24;border:1px solid #303747;color:#fff;border-radius:12px;padding:12px;outline:none}
input:focus,select:focus{border-color:#f3a33e}
.hidden{display:none!important}
.app{min-height:100vh;display:grid;grid-template-columns:240px 1fr}
aside{position:sticky;top:0;height:100vh;background:#10131a;border-left:1px solid #242936;padding:22px 14px;display:flex;flex-direction:column}
.logo{display:flex;gap:10px;align-items:center;padding:4px 8px 26px}
.logo>span,.brand-mark{color:#f3a33e;font-size:32px}
.logo div{display:grid}
.logo small{color:#858d9a;margin-top:3px}
nav{display:grid;gap:7px}
.nav,.logout{background:transparent;color:#aeb5c1;text-align:right;padding:13px 15px;border-radius:12px}
.nav.active,.nav:hover{background:#252b37;color:#fff}
.logout{margin-top:auto;color:#ff8278}
main{padding:26px;min-width:0}
header,.section-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}
h1,h2,p{margin:0}
header h1{font-size:28px}
header p,.section-head p{color:#858d9a;margin-top:6px}
#storage-badge{background:#252b37;color:#f3a33e;border-radius:999px;padding:8px 14px}
.view{display:none}
.view.active{display:block}
.stats{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:14px;margin-bottom:18px}
.stat,.panel{background:#131720;border:1px solid #252b37;border-radius:18px}
.stat{padding:20px}
.stat small{color:#858d9a}
.stat strong{display:block;font-size:28px;margin-top:8px;color:#f3a33e}
.panel{padding:18px;margin-bottom:18px}
.panel h2{margin-bottom:16px}
.primary{background:#f3a33e;color:#111318;padding:11px 17px;border-radius:12px;font-weight:700}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.form-grid label{display:grid;gap:7px;color:#c8ced7}
.form-grid .wide{grid-column:1/-1}
.check{display:flex!important;align-items:center;gap:9px}
.check input{width:18px;height:18px;accent-color:#f3a33e}
.actions{display:flex;align-items:center;gap:9px}
.actions button:not(.primary){background:#252b37;color:#fff;padding:11px 16px;border-radius:12px}
.upload-label{border:1px dashed #3a4252;border-radius:14px;padding:14px}
.upload-label input{border:0;padding:4px 0;background:transparent}
.upload-label span{font-size:12px;color:#858d9a}
.table-wrap{overflow:auto;padding:0}
table{width:100%;border-collapse:collapse;white-space:nowrap}
th,td{text-align:right;padding:15px;border-bottom:1px solid #242936}
th{color:#8f97a5;font-size:13px}
td{color:#d8dce3}
.badge{display:inline-block;border-radius:9px;background:#252b37;color:#aeb5c1;padding:5px 8px;font-size:12px}
.badge.on{color:#f3a33e}
.row-actions{display:flex;gap:6px}
.row-actions button{background:#252b37;color:#fff;border-radius:9px;padding:7px 9px}
.row-actions .danger{color:#ff8278}
.simple-list{display:grid;gap:8px}
.simple-item{display:flex;justify-content:space-between;align-items:center;background:#191e28;border-radius:12px;padding:12px}
.simple-item small{color:#858d9a}
.status{min-height:24px;color:#79d5a7}
.token-box{background:#0d1118;border:1px solid #f3a33e;border-radius:12px;padding:13px;direction:ltr;word-break:break-all;color:#f3a33e}
.feature-note{background:#191e28;border:1px solid #303747;border-radius:12px;padding:13px;color:#aeb5c1;line-height:1.8}
.toast{position:fixed;left:22px;bottom:22px;background:#f3a33e;color:#111318;border-radius:12px;padding:12px 16px;transform:translateY(100px);opacity:0;transition:.2s}
.toast.show{transform:none;opacity:1}
.login-screen{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-box{width:min(100%,390px);background:#131720;border:1px solid #252b37;border-radius:22px;padding:28px;display:grid;gap:15px}
.login-box h1{font-size:26px}
.login-box p{color:#858d9a}
.login-box label{display:grid;gap:7px}
.error{color:#ff8278;min-height:20px}
progress{width:100%;accent-color:#f3a33e}
@media(max-width:900px){.app{grid-template-columns:1fr}
aside{position:static;height:auto;padding:12px}
.logo{padding-bottom:12px}
nav{display:flex;overflow:auto}
.nav{white-space:nowrap}
.logout{display:none}
main{padding:18px}
.stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){.form-grid{grid-template-columns:1fr}
.form-grid .wide{grid-column:auto}
.stats{grid-template-columns:1fr 1fr}
.section-head{align-items:flex-start}
.section-head p{font-size:13px}
header{align-items:flex-start}
}