@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');
:root{--bg:#0a0f1f;--surface:rgba(255,255,255,.055);--surface2:rgba(255,255,255,.1);--line:rgba(255,255,255,.12);--ink:#eaf0ff;--mute:#9aa7c7;--accent:#6c8dff;--accent2:#a78bfa;--accent3:#22d3ee;--ok:#34d399;--bad:#fb7185;--orb:.35;--shadow:0 24px 60px -28px rgba(0,0,0,.8);color-scheme:dark}
@media (prefers-color-scheme:light){:root{--bg:#f2f4fb;--surface:rgba(255,255,255,.82);--surface2:#fff;--line:rgba(20,33,61,.12);--ink:#14213d;--mute:#5b6784;--accent:#4f6bff;--accent2:#8b5cf6;--ok:#15803d;--bad:#dc2626;--orb:.2;--shadow:0 24px 60px -32px rgba(20,33,61,.4);color-scheme:light}}
*{box-sizing:border-box}html{scroll-behavior:smooth}[hidden]{display:none!important}
body.ui{margin:0;min-height:100vh;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5;position:relative;overflow-x:hidden;padding-bottom:env(safe-area-inset-bottom)}
body.ui::before,body.ui::after{content:"";position:fixed;width:48vmax;height:48vmax;border-radius:50%;filter:blur(90px);opacity:var(--orb);z-index:-1;pointer-events:none;animation:float 18s ease-in-out infinite alternate}
body.ui::before{background:radial-gradient(circle,var(--accent),transparent 65%);top:-20vmax;left:-14vmax}
body.ui::after{background:radial-gradient(circle,var(--accent2),transparent 65%);bottom:-22vmax;right:-16vmax;animation-delay:-9s}
@keyframes float{to{transform:translate(6vmax,5vmax) scale(1.12)}}
@keyframes fadeup{from{opacity:0;transform:translateY(16px)}}
body.ui h1,body.ui h2,body.ui h3{letter-spacing:-.025em;margin:0}body.ui h2{font-size:17px;margin:0 0 14px}
.big{font-size:clamp(28px,4.2vw,42px);font-weight:800;line-height:1.1;margin:4px 0 0}
.gt{background:linear-gradient(120deg,var(--accent),var(--accent2),var(--accent3));-webkit-background-clip:text;background-clip:text;color:transparent}
.mut{color:var(--mute);font-size:13px}.err{color:var(--bad)}.ok{color:var(--ok)}
.shell{max-width:1060px;margin:0 auto;padding:22px 20px}.narrow{max-width:480px}
.glass,.card{background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.card{padding:20px;margin-bottom:16px;animation:fadeup .6s both}.pad{padding:18px;margin-bottom:14px;animation:fadeup .6s both}
.row{display:flex;gap:12px}.row>*{flex:1;min-width:0}
.mark{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent2) 60%,var(--accent3));color:#fff;font-size:20px;box-shadow:0 10px 26px -8px var(--accent);flex:none}
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:12px 20px;background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.02em;color:var(--ink);text-decoration:none}.nav .sp{flex:1}
.nav a.l{color:var(--mute);text-decoration:none;font-weight:600;font-size:14px;padding:8px 10px;border-radius:10px}.nav a.l:hover{color:var(--ink);background:var(--surface)}
a.l{color:var(--accent);text-decoration:none;font-weight:600}
.badge{display:inline-block;padding:6px 12px;border-radius:99px;background:var(--surface);border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--mute)}
body.ui .btn,body.ui button.p{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto;margin:0;padding:13px 20px;border:0;border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font:inherit;font-weight:700;font-size:15px;cursor:pointer;text-decoration:none;box-shadow:0 12px 30px -12px var(--accent);transition:transform .15s,filter .2s}
body.ui .btn:hover,body.ui button.p:hover{transform:translateY(-2px);filter:brightness(1.1)}body.ui .btn:active,body.ui button.p:active{transform:scale(.97)}
body.ui button.p{margin-top:16px}
body.ui .btn.sec,body.ui .s2{background:var(--surface2);color:var(--ink);box-shadow:none;border:1px solid var(--line)}
body.ui .s2{display:inline-flex;padding:10px 14px;border-radius:12px;font:inherit;font-weight:600;font-size:14px;cursor:pointer}
body.ui .btn.lg{padding:16px 26px;font-size:16px;border-radius:16px}
label{display:block;font-size:13px;color:var(--mute);margin:14px 0 6px;font-weight:600}
body.ui input:not([type=checkbox]):not([type=color]):not([type=file]),body.ui select,body.ui textarea{width:100%;padding:13px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:15px;transition:border-color .2s,box-shadow .2s}
body.ui input:focus,body.ui select:focus,body.ui textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 25%,transparent)}
body.ui input[type=color]{width:100%;height:46px;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:4px}
body.ui input[type=file]{width:100%;color:var(--mute);font:inherit;font-size:14px}body.ui select option{color:#111}
.login{max-width:400px;margin:9vh auto 0;padding:32px 26px;text-align:center;animation:fadeup .7s both}.login .mark{width:56px;height:56px;font-size:28px;margin-bottom:14px}
.login h1{font-size:26px}.login .sub{color:var(--mute);margin:6px 0 8px}.login label{text-align:left}
table{width:100%;border-collapse:collapse;font-size:14px}th{color:var(--mute);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
th,td{text-align:left;padding:12px 8px;border-bottom:1px solid var(--line)}tbody tr:hover td{background:var(--surface)}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s,transform .8s}.reveal.show{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}