:root { color-scheme: dark; font-family: Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#eef1f8; background:#090b10; --yellow:#ffca05; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; background:radial-gradient(circle at 70% -20%,#29230f,transparent 38%),#090b10; }
header { min-height:82px; padding:14px max(22px,calc((100% - 1180px)/2)); display:flex; align-items:center; gap:24px; border-bottom:1px solid #222832; background:#0c0f15dd; }
header a,header button { color:#cbd2dc; text-decoration:none; } header div { flex:1; } h1,h2,p { margin:0; } h1 { font-size:20px; } header p,.panel-title p,.token-result p { margin-top:5px; color:#788290; font-size:12px; }
button { padding:9px 13px; border:1px solid #3a414c; border-radius:9px; color:#e7ebf1; background:#171c24; cursor:pointer; } button:hover { border-color:#80680a; } button[type=submit] { border:0; color:#171307; background:var(--yellow); font-weight:700; }
main { width:min(1180px,calc(100% - 36px)); margin:28px auto; display:grid; gap:18px; }
.panel { padding:22px; border:1px solid #282e38; border-radius:16px; background:#11151ce8; box-shadow:0 18px 50px #0005; }
.user-form { margin-top:18px; display:grid; grid-template-columns:repeat(4,minmax(140px,1fr)) auto; align-items:end; gap:12px; }
label { display:block; color:#929cab; font-size:12px; } input,select,textarea { width:100%; margin-top:7px; padding:11px 12px; border:1px solid #323a46; border-radius:9px; outline:0; color:#eef1f8; background:#090c11; } input:focus,select:focus,textarea:focus { border-color:var(--yellow); box-shadow:0 0 0 3px #ffca0522; }
.panel-title,.token-result { display:flex; align-items:center; gap:18px; }.panel-title > div,.token-result > div { flex:1; }.token-result textarea { flex:2; min-height:42px; resize:none; }
.table-wrap { margin-top:18px; overflow:auto; } table { width:100%; border-collapse:collapse; white-space:nowrap; } th,td { padding:12px 10px; border-bottom:1px solid #242a33; text-align:left; font-size:13px; } th { color:#75808e; font-size:11px; } .badge { padding:3px 7px; border-radius:99px; background:#202630; color:#aeb7c3; font-size:10px; }.badge.on { color:#58dfa0;background:#103326; }.actions { display:flex; gap:6px; }.error { min-height:18px; margin-top:10px;color:#ff8992;font-size:12px; }
dialog { width:min(430px,calc(100% - 30px)); padding:0; border:1px solid #333b46; border-radius:16px; color:#eef1f8; background:#12171e; box-shadow:0 30px 100px #000; } dialog::backdrop { background:#000b; } dialog form { padding:24px; } dialog label { margin-top:14px; }.check { display:flex;align-items:center;gap:8px;}.check input { width:auto;margin:0;}.dialog-actions { margin-top:20px;display:flex;justify-content:flex-end;gap:9px; }
@media(max-width:850px){.user-form{grid-template-columns:1fr 1fr}.panel-title,.token-result{align-items:stretch;flex-direction:column}header{gap:12px}header>a{display:none}} @media(max-width:520px){.user-form{grid-template-columns:1fr}.panel{padding:16px}main{width:calc(100% - 20px)}}