:root { color-scheme: dark; --bg:#07111f; --panel:#0f1d30; --line:rgba(177,207,242,.16); --text:#f4f7fb; --muted:#a9b9ca; --cyan:#35d9ff; --blue:#5b8cff; --danger:#ff9aaa; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; font-family:Inter,"Segoe UI",system-ui,sans-serif; color:var(--text); background:radial-gradient(circle at 15% 10%,rgba(53,217,255,.15),transparent 28rem),radial-gradient(circle at 85% 20%,rgba(122,92,255,.15),transparent 26rem),var(--bg); }
.topbar { width:min(980px,calc(100% - 32px)); margin:18px auto; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; font-weight:750; font-size:1.1rem; }
.brand img { width:38px; height:38px; }
.brand span span { color:var(--cyan); }
.lang-switch { display:flex; gap:4px; padding:4px; border:1px solid var(--line); border-radius:999px; background:rgba(10,24,43,.8); }
.lang-switch button { min-width:34px; height:30px; border:0; border-radius:999px; color:#cfe2ff; background:transparent; font-weight:700; cursor:pointer; }
.lang-switch button[aria-pressed="true"] { background:linear-gradient(120deg,rgba(53,217,255,.25),rgba(91,140,255,.3)); }
main { width:min(560px,calc(100% - 32px)); margin:7vh auto 48px; padding:clamp(24px,5vw,38px); border:1px solid var(--line); border-radius:24px; background:rgba(15,29,48,.9); box-shadow:0 30px 90px rgba(0,0,0,.38); }
h1 { margin:0 0 10px; font-size:clamp(1.7rem,5vw,2.25rem); line-height:1.12; }
p { color:var(--muted); line-height:1.65; }
label { display:block; margin:15px 0 7px; color:#dce8f5; font-size:.92rem; }
input,select { width:100%; padding:13px 14px; border:1px solid rgba(177,207,242,.22); border-radius:11px; outline:none; background:#091728; color:var(--text); font:inherit; }
input:focus,select:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(53,217,255,.1); }
.primary,.secondary { display:flex; width:100%; justify-content:center; margin-top:20px; padding:13px 18px; border:0; border-radius:11px; font:inherit; font-weight:750; cursor:pointer; text-decoration:none; }
.primary { background:linear-gradient(120deg,var(--cyan),#7be7ff); color:#06121f; }
.secondary { color:#dcecff; background:#132640; border:1px solid var(--line); }
button:disabled { cursor:wait; opacity:.65; }
.note { margin:16px 0 0; font-size:.9rem; }
a { color:var(--cyan); }
.message { min-height:24px; margin:14px 0 0; color:#bdefff; }
.message.error { color:var(--danger); }
.profile { display:grid; gap:10px; margin:22px 0; padding:18px; border:1px solid var(--line); border-radius:14px; background:#0a192b; }
.profile div { display:flex; justify-content:space-between; gap:20px; color:var(--muted); }
.profile strong { color:var(--text); text-align:right; overflow-wrap:anywhere; }
[hidden] { display:none !important; }
.spinner { width:48px; height:48px; margin:8px auto 24px; border:4px solid rgba(53,217,255,.18); border-top-color:var(--cyan); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:480px) { .topbar,main { width:calc(100% - 20px); } main { margin-top:4vh; } }