:root { color-scheme: dark; --bg:#101114; --panel:#17191e; --line:#2a2d34; --text:#f4f1ea; --muted:#969aa5; --accent:#d7f36a; --danger:#ff8e8e; }
* { box-sizing:border-box; } body { margin:0; background:radial-gradient(circle at 80% -10%,#30352a 0,#101114 38%); color:var(--text); font:15px/1.5 Inter,ui-sans-serif,system-ui,sans-serif; } .shell { max-width:1180px; margin:auto; padding:42px 24px 80px; }
h1,h2,p { margin-top:0; } h1 { font-size:clamp(30px,5vw,56px); line-height:1.02; letter-spacing:-.05em; margin-bottom:14px; } h2 { font-size:24px; letter-spacing:-.03em; margin:4px 0 18px; } .eyebrow { color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.16em; } .muted { color:var(--muted); } .hidden { display:none !important; } .login-card { max-width:540px; margin:10vh auto 0; padding:42px; background:rgba(23,25,30,.88); border:1px solid var(--line); border-radius:24px; box-shadow:0 24px 80px #0008; }
form { display:grid; gap:15px; } label { display:grid; gap:6px; color:#c5c7ce; font-size:13px; } input,select { width:100%; border:1px solid var(--line); border-radius:10px; background:#0e0f12; color:var(--text); padding:12px 13px; font:inherit; outline:none; } input:focus,select:focus { border-color:var(--accent); } button { border:0; border-radius:999px; padding:11px 17px; background:var(--accent); color:#15180e; font-weight:800; cursor:pointer; } button:hover { filter:brightness(1.08); } .quiet { background:transparent; border:1px solid var(--line); color:var(--text); } .topbar,.panel-head { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; } .topbar { align-items:center; margin-bottom:35px; } .topbar h1 { font-size:38px; margin:3px 0 0; } .stats { display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid var(--line); margin-bottom:24px; } .stats div { padding:18px 20px; border-right:1px solid var(--line); } .stats div:last-child { border:0; } .stats span { display:block; color:var(--muted); font-size:12px; } .stats strong { display:block; font-size:27px; margin-top:5px; } .grid { display:grid; grid-template-columns:1.3fr .7fr; gap:24px; } .panel { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:24px; min-width:0; } .user-list { display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:11px; overflow:hidden; } .user { background:var(--panel); padding:15px 16px; display:flex; justify-content:space-between; align-items:center; gap:12px; } .user small { color:var(--muted); display:block; } .pill { color:var(--accent); font-size:11px; border:1px solid #718231; border-radius:99px; padding:3px 8px; white-space:nowrap; } .error { color:var(--danger); min-height:20px; } .notice { padding:13px 15px; border:1px solid #703c3c; border-radius:10px; margin-bottom:20px; } .result { margin-top:18px; padding:15px; background:#0d1108; border:1px solid #657433; border-radius:10px; overflow-wrap:anywhere; } .result code { display:block; color:var(--accent); margin:8px 0; } dialog { background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:18px; padding:28px; width:min(440px,calc(100% - 32px)); } dialog::backdrop { background:#000b; } .dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:8px; }
.user-actions { display:flex; align-items:center; gap:7px; } button.small { padding:6px 10px; font-size:12px; } button.danger { background:transparent; border:1px solid #703c3c; color:var(--danger); } .checkbox { display:flex; grid-template-columns:auto 1fr; align-items:center; gap:8px; } .checkbox input { width:auto; }
@media (max-width:760px) { .shell { padding:25px 15px 50px; } .login-card { padding:26px; margin-top:5vh; } .grid { grid-template-columns:1fr; } .stats div { padding:13px 10px; } .stats strong { font-size:21px; } .topbar h1 { font-size:30px; } .user { align-items:flex-start; flex-direction:column; } }