:root { color-scheme:dark; font-family:Inter,"Segoe UI",system-ui,sans-serif; --bg:#050711; --panel:#0d1220d9; --panel2:#131b2d; --line:#263557; --muted:#8190ad; --text:#eef6ff; --accent:#70d8ff; --accent2:#9d7bff; --good:#6df2c0; --danger:#ff8fbb; }
    * { box-sizing:border-box; } body { margin:0; min-height:100vh; color:var(--text); background:radial-gradient(900px 500px at 75% -8%,#173c66 0,transparent 65%),radial-gradient(700px 450px at 0% 100%,#24134c 0,transparent 68%),var(--bg); overflow-x:hidden; }
    body:before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.18; background-image:linear-gradient(#8bd7ff0d 1px,transparent 1px),linear-gradient(90deg,#8bd7ff0d 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom,#000,transparent 80%); }
    button,input { font:inherit; } button { cursor:pointer; } [hidden] { display:none !important; }
    #login { min-height:100vh; display:grid; place-items:center; padding:24px; } #login form { width:min(92vw,420px); padding:34px; display:grid; gap:15px; border:1px solid #6c8dce55; border-radius:24px; background:linear-gradient(145deg,#101a31e8,#0a0e1be8); box-shadow:0 28px 80px #0008,0 0 0 1px #ffffff08 inset; backdrop-filter:blur(18px); }
    #login form:before { content:"SW / SECURE CONSOLE"; color:var(--accent); font-size:11px; letter-spacing:.18em; font-weight:800; } #login label { color:var(--muted); font-size:12px; letter-spacing:.04em; text-transform:uppercase; } #login input { width:100%; height:50px; margin-top:8px; padding:0 15px; color:var(--text); background:#060a14cc; border:1px solid #32466e; border-radius:12px; outline:none; transition:.2s; }
    #login input:focus { border-color:var(--accent); box-shadow:0 0 0 3px #70d8ff1e,0 0 22px #70d8ff19; } #login button { height:50px; border:0; border-radius:12px; color:#05101a; background:linear-gradient(100deg,var(--accent),#c0f3ff); font-weight:800; box-shadow:0 8px 24px #70d8ff28; } #login button:hover { filter:brightness(1.08); transform:translateY(-1px); } #login button:disabled { opacity:.55; cursor:wait; }
    #login .auth-link,#login .auth-back { justify-self:center; color:var(--muted); font-size:12px; text-decoration:none; transition:color .15s; } #login .auth-link:hover,#login .auth-back:hover { color:var(--accent); text-decoration:underline; } #key-value { text-transform:uppercase; letter-spacing:.2em; text-align:center; font-weight:800; }
    #login-message { min-height:20px; margin:0; color:var(--danger); font-size:13px; }
    #loading { position:fixed; inset:0; z-index:20; display:grid; place-items:center; background:#050711f5; backdrop-filter:blur(12px); } .loading-inner { display:grid; justify-items:center; gap:14px; color:var(--muted); font-size:11px; letter-spacing:.2em; text-transform:uppercase; } .loading-inner strong { color:var(--text); font-size:32px; letter-spacing:-.06em; text-transform:none; text-shadow:0 0 30px #70d8ff66; } .spinner { width:28px; height:28px; border:2px solid #ffffff18; border-top-color:var(--accent); border-right-color:var(--accent2); border-radius:50%; animation:spin .7s linear infinite; box-shadow:0 0 18px #70d8ff44; } @keyframes spin { to { transform:rotate(360deg); } }
    #app { min-height:100vh; display:flex; } aside { position:fixed; inset:0 auto 0 0; z-index:10; width:268px; padding:26px 17px; background:#070b16dd; border-right:1px solid #31456d88; box-shadow:18px 0 60px #0004; transform:translateX(-100%); transition:transform .25s ease; backdrop-filter:blur(20px); } aside.open { transform:translateX(0); }
    .brand { display:flex; align-items:center; gap:10px; padding:3px 12px 34px; font-weight:850; letter-spacing:-.05em; font-size:21px; } .brand:before { content:""; width:11px; height:11px; border-radius:50%; background:var(--accent); box-shadow:0 0 18px var(--accent); } nav { display:grid; gap:7px; } nav button { padding:13px 14px; text-align:left; border:1px solid transparent; border-radius:11px; color:var(--muted); background:transparent; transition:.18s; } nav button.active,nav button:hover { color:var(--text); border-color:#4e6da555; background:linear-gradient(100deg,#193257aa,#16203666); box-shadow:0 0 20px #70d8ff0b inset; }
    .exit { position:absolute; left:17px; right:17px; bottom:22px; height:43px; border:1px solid #415275; border-radius:11px; color:#ffb0ca; background:#12192a; font-weight:700; transition:.18s; } .exit:hover { color:#fff; border-color:#ff8fbb99; background:#291829; } .exit:disabled { opacity:.6; cursor:wait; } .scrim { position:fixed; inset:0; z-index:5; background:#0009; backdrop-filter:blur(4px); }
    .content { width:100%; max-width:1440px; margin:auto; padding:25px clamp(18px,4vw,60px) 64px; } header { display:flex; align-items:center; gap:14px; min-height:52px; } #menu { width:43px; height:43px; border:1px solid var(--line); border-radius:12px; color:var(--text); background:#101a2dcc; font-size:21px; } header h1 { margin:0; font-size:25px; letter-spacing:-.05em; } header .user { margin-left:auto; padding:8px 12px; border:1px solid #3c5783; border-radius:999px; color:var(--accent); background:#0c1527aa; font-size:12px; }
    .section { margin-top:42px; } .section h2 { margin:0 0 17px; font-size:12px; color:var(--accent); text-transform:uppercase; letter-spacing:.18em; } .cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; }
    .card { position:relative; padding:20px; min-height:126px; border:1px solid #30466e; border-radius:17px; background:linear-gradient(145deg,#111d34dd,#0b1120dd); box-shadow:0 18px 45px #0002,0 1px 0 #ffffff0a inset; overflow:hidden; } .card:after { content:""; position:absolute; width:90px; height:90px; right:-35px; bottom:-45px; border-radius:50%; background:var(--accent); opacity:.08; filter:blur(2px); } .card .label { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.1em; } .card .value { margin-top:12px; font-size:29px; font-weight:800; letter-spacing:-.06em; } .card .hint { margin-top:9px; color:var(--muted); font-size:12px; }
    .panel { padding:21px; border:1px solid #30466e; border-radius:17px; background:linear-gradient(145deg,#10192bd9,#0a101dd9); box-shadow:0 20px 55px #0002; overflow:auto; } table { width:100%; min-width:620px; border-collapse:collapse; font-size:13px; } th,td { padding:14px 11px; border-bottom:1px solid #233452; text-align:left; white-space:nowrap; } th { color:var(--accent); font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; } tr:hover td { background:#70d8ff08; } .empty { padding:34px 10px; color:var(--muted); text-align:center; }
    .actions { display:flex; gap:10px; flex-wrap:wrap; } .actions button { min-height:43px; padding:0 17px; border:1px solid #38547d; border-radius:11px; color:var(--text); background:#162238; transition:.18s; } .actions button:hover { border-color:var(--accent); transform:translateY(-1px); } .actions button.primary { color:#06101b; background:linear-gradient(100deg,var(--accent),#b8efff); border-color:transparent; font-weight:800; box-shadow:0 8px 24px #70d8ff1f; } .actions button:disabled { opacity:.5; cursor:wait; }
    .admin-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; max-width:760px; } .admin-form label { display:grid; gap:8px; color:var(--muted); font-size:11px; letter-spacing:.1em; text-transform:uppercase; } .admin-form input { width:100%; height:47px; padding:0 14px; border:1px solid #385078; border-radius:11px; outline:none; color:var(--text); background:#070d19cc; } .admin-form input:focus { border-color:var(--accent); box-shadow:0 0 0 3px #70d8ff1e; } .admin-form .actions,.admin-form .status { grid-column:1/-1; }
    .status { min-height:22px; margin:12px 0 0; color:var(--muted); font-size:13px; } .status.error { color:var(--danger); } .status.good { color:var(--good); }
    @media (min-width:900px) { aside { transform:translateX(0); } .content { margin-left:268px; width:calc(100% - 268px); } #menu { display:none; } .scrim { display:none; } }