@font-face { font-family: "Nanoplex"; src: url("/fonts/Nanoplex.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Determination"; src: url("/fonts/determination.ttf") format("truetype"); font-display: swap; }

:root { color-scheme: dark; --bg: #050a17; --panel: rgba(12, 24, 49, .9); --panel-soft: rgba(8, 17, 37, .8); --line: rgba(98, 132, 207, .3); --text: #f7f9ff; --muted: #aeb9ce; --cyan: #42c8ff; --gold: #ffbe24; --orange: #ff7a19; --pink: #d941ff; --green: #2bdd78; --red: #ff6868; --radius: 8px; }
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body { min-height: 100vh; margin: 0; color: var(--text); font-family: "Nanoplex", system-ui, sans-serif; letter-spacing: 0; background: radial-gradient(circle at 72% 4%, rgba(72, 47, 194, .28), transparent 28rem), radial-gradient(circle at 0% 76%, rgba(255, 122, 25, .12), transparent 24rem), linear-gradient(180deg, #020613, #071326 55%, #040916); }
body::before { position: fixed; inset: 0; z-index: -1; pointer-events: none; content: ""; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(180deg, rgba(0,0,0,.4), transparent 74%); }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
img { display: block; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.account-layout { display: grid; grid-template-columns: 280px minmax(0, 860px); gap: clamp(18px, 4vw, 72px); width: min(1240px, calc(100% - 36px)); min-height: calc(100vh - 36px); margin: 18px auto; }
.account-sidebar { position: sticky; top: 18px; display: flex; min-height: calc(100vh - 36px); padding: 22px; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(15, 28, 59, .92), rgba(5, 13, 31, .9)); box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.account-brand { display: flex; align-items: center; gap: 12px; min-height: 62px; }
.account-brand img { width: 54px; height: 54px; border-radius: 8px; object-fit: cover; }
.account-brand span { color: var(--gold); font: 900 clamp(2rem, 3vw, 3rem)/.9 "Rubik", system-ui, sans-serif; text-shadow: 0 3px 0 #9c361b; }
.account-user-card { display: flex; align-items: center; gap: 12px; margin: 36px 0 22px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(4, 11, 26, .52); }
.account-user-card img { width: 48px; height: 48px; border: 2px solid var(--cyan); border-radius: 50%; object-fit: cover; }
.account-user-card strong, .account-user-card span { display: block; }
.account-user-card span { margin-top: 4px; color: var(--cyan); font-size: .84rem; }
.account-nav { display: grid; gap: 8px; }
.account-nav a, .account-logout { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; color: var(--muted); border: 1px solid transparent; border-radius: var(--radius); }
.account-nav a:hover, .account-nav a.active, .account-logout:hover { color: #fff; border-color: rgba(255, 122, 25, .55); background: linear-gradient(100deg, rgba(255, 126, 27, .42), rgba(217, 65, 255, .1)); }
.account-logout { margin-top: auto; color: #ff9a9a; }
.account-sidebar-copy { margin-top: 48px; color: var(--muted); line-height: 1.7; }
.account-sidebar-copy .eyebrow { color: var(--orange); }
.account-main { min-width: 0; padding: 18px 0 70px; }
.account-topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 34px; }
.account-topbar h1, .auth-intro h2, .account-welcome h2, .account-section-head h2 { margin: 5px 0 0; font: 900 clamp(1.8rem, 3vw, 3.2rem)/1.05 "Rubik", system-ui, sans-serif; }
.eyebrow { display: block; color: var(--cyan); font: 1rem/1 "Determination", monospace; letter-spacing: .04em; text-transform: uppercase; }
.back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); white-space: nowrap; }
.back-link:hover, .form-foot a { color: var(--cyan); }
.account-menu-toggle { display: none; width: 44px; height: 44px; color: #fff; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-soft); }
.account-alert { margin-bottom: 16px; padding: 13px 15px; border: 1px solid; border-radius: var(--radius); }
.account-alert.error { color: #ffe6e6; border-color: rgba(255,104,104,.5); background: rgba(255,104,104,.12); }
.account-alert.success { color: #e6fff0; border-color: rgba(43,221,120,.48); background: rgba(43,221,120,.12); }
.auth-intro, .account-section-head { max-width: 700px; margin-bottom: 22px; }
.auth-intro p, .account-section-head p, .account-welcome p { max-width: 620px; margin: 18px 0 0; color: var(--muted); font-size: 1.05rem; line-height: 1.7; }
.account-form, .account-welcome, .account-card, .account-summary { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, var(--panel), rgba(6, 15, 33, .88)); box-shadow: 0 24px 60px rgba(0,0,0,.2); }
.account-form { display: grid; max-width: 720px; gap: 16px; padding: 24px; }
.auth-form { max-width: 580px; }
.account-form h3 { margin: 4px 0 0; color: var(--gold); font: 1.25rem/1 "Determination", monospace; text-transform: uppercase; }
.account-form label { display: grid; gap: 8px; color: var(--muted); }
.account-form input, .account-form textarea, .account-form select { width: 100%; min-width: 0; color: var(--text); border: 1px solid var(--line); border-radius: 6px; outline: 0; background: rgba(3, 9, 23, .8); }
.account-form input, .account-form select { height: 46px; padding: 0 13px; }
.account-form textarea { padding: 13px; resize: vertical; }
.account-form input:focus, .account-form textarea:focus, .account-form select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(66,200,255,.13); }
.password-field { position: relative; }
.password-field input { padding-right: 50px; }
.password-toggle { position: absolute; top: 4px; right: 4px; display: grid; width: 38px; height: 38px; place-items: center; color: var(--muted); border: 0; border-radius: 5px; background: transparent; }
.account-primary, .account-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 18px; color: #1c1000; border: 1px solid #ffe486; border-radius: 6px; background: linear-gradient(180deg, #ffe46f, var(--gold) 58%, var(--orange)); font: 900 1rem/1 "Rubik", system-ui, sans-serif; cursor: pointer; }
.account-secondary { color: #fff; border-color: rgba(66,200,255,.54); background: rgba(66,200,255,.12); }
.form-foot { margin: 0; color: var(--muted); text-align: center; }
.account-welcome { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(22px, 4vw, 42px); overflow: hidden; }
.account-welcome img { width: 140px; height: 140px; border: 3px solid var(--cyan); border-radius: 50%; object-fit: cover; box-shadow: 0 0 32px rgba(66,200,255,.25); }
.account-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.account-card { display: grid; gap: 10px; min-height: 160px; padding: 20px; }
.account-card:hover { border-color: var(--orange); transform: translateY(-2px); }
.account-card svg { color: var(--cyan); }
.account-card strong { font-family: "Rubik", system-ui, sans-serif; }
.account-card span { color: var(--muted); line-height: 1.5; }
.account-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; padding: 18px; }
.account-summary div { display: grid; gap: 8px; }
.account-summary span { color: var(--muted); }
.account-summary strong { color: var(--gold); font-family: "Rubik", system-ui, sans-serif; }
.profile-preview { display: flex; align-items: center; gap: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.profile-preview img { width: 76px; height: 76px; border: 2px solid var(--cyan); border-radius: 50%; object-fit: cover; }
.profile-preview strong, .profile-preview span { display: block; }
.profile-preview span { margin-top: 6px; color: var(--muted); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.check-line { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 10px !important; }
.check-line input { width: 18px; height: 18px; accent-color: var(--orange); }
@media (max-width: 900px) { .account-layout { grid-template-columns: 1fr; width: min(720px, calc(100% - 24px)); margin-top: 10px; } .account-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 10; width: min(310px, 86vw); min-height: 100vh; transform: translateX(-105%); transition: transform .2s ease; } .menu-open .account-sidebar { transform: translateX(0); } .account-main { padding-top: 10px; } .account-menu-toggle { display: grid; place-items: center; } .account-topbar { justify-content: flex-start; } .back-link { margin-left: auto; } }
@media (max-width: 620px) { .account-layout { width: min(100% - 18px, 560px); } .account-topbar { align-items: flex-start; flex-wrap: wrap; } .account-topbar > div { flex: 1; } .back-link { width: 100%; margin: 0 0 0 54px; } .account-welcome { align-items: flex-start; flex-direction: column; } .account-welcome img { width: 94px; height: 94px; } .account-cards, .account-summary, .form-grid { grid-template-columns: 1fr; } .account-form { padding: 18px; } }