:root{
  --bg:#0b0d10;--panel:#15191e;--panel2:#101317;--gold:#f0c658;--gold2:#ffd978;
  --text:#f5f6f7;--muted:#9ba3ad;--line:rgba(255,255,255,.10);--green:#66efb3;
}
*{box-sizing:border-box}
html{background:var(--bg);color-scheme:dark}
body{margin:0;min-height:100vh;background:
  radial-gradient(circle at 82% 18%,rgba(240,198,88,.08),transparent 28%),
  radial-gradient(circle at 12% 74%,rgba(240,198,88,.045),transparent 30%),
  linear-gradient(135deg,#090b0e,#111419 60%,#0a0c0f);
  color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.23;background-image:
  linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:38px 38px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 78%)}
a{color:inherit}
.shell{width:min(1180px,calc(100% - 34px));margin:auto}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;border-bottom:1px solid var(--line)}
.brand img{display:block;width:168px;height:auto}
.toplinks{display:flex;flex-wrap:wrap;gap:18px;align-items:center;color:#b6bec7;font-size:.78rem}
.toplinks a{text-decoration:none}
.toplinks a:hover{color:var(--gold2)}
.hero{padding:70px 0 30px;text-align:center}
.kicker{color:var(--gold);font-size:.67rem;font-weight:900;letter-spacing:.20em;text-transform:uppercase}
h1{margin:13px auto 8px;font-size:clamp(2.3rem,6vw,4.4rem);line-height:.97;letter-spacing:-.055em}
.hero p{max-width:650px;margin:0 auto;color:#b4bdc7;font-size:1.02rem;line-height:1.6}
.access-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start;padding:18px 0 65px}
.login-card,.guide-card{position:relative;border:1px solid rgba(240,198,88,.30);border-radius:18px;background:
  linear-gradient(150deg,rgba(29,34,40,.96),rgba(14,17,21,.97));box-shadow:0 30px 90px rgba(0,0,0,.35)}
.login-card{padding:34px}
.login-card::before{content:"";position:absolute;left:34px;right:34px;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.iconbox{display:grid;place-items:center;width:68px;height:68px;margin:0 auto 20px;border:1px solid rgba(240,198,88,.55);border-radius:16px;background:rgba(240,198,88,.07);box-shadow:0 0 32px rgba(240,198,88,.10)}
.iconbox svg{width:31px;height:31px;stroke:var(--gold2);fill:none;stroke-width:1.8}
.login-card h2{text-align:center;margin:0;font-size:1.55rem}
.login-card .lead{max-width:520px;margin:8px auto 26px;text-align:center;color:var(--muted);font-size:.88rem;line-height:1.55}
.field{display:grid;gap:7px;margin-top:15px}
.field label{font-size:.78rem;font-weight:800}
.field input{width:100%;height:52px;border:1px solid rgba(255,255,255,.16);border-radius:9px;background:#171c22;color:#fff;padding:0 15px;font-size:.95rem;outline:none}
.field input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(240,198,88,.09)}
.button{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;margin-top:20px;border:0;border-radius:9px;background:linear-gradient(180deg,#ffe08a,#eebf4f);color:#16181b;font-weight:900;font-size:.95rem;cursor:pointer}
.button:hover{filter:brightness(1.04)}
.security-note{display:flex;gap:10px;align-items:flex-start;margin-top:15px;padding:12px 13px;border:1px solid rgba(102,239,179,.13);border-radius:9px;background:rgba(102,239,179,.035);color:#8fa49a;font-size:.70rem;line-height:1.45}
.security-note i{width:8px;height:8px;flex:0 0 8px;margin-top:4px;border-radius:50%;background:var(--green);box-shadow:0 0 12px rgba(102,239,179,.65)}
.quicklinks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:13px}
.quicklinks a{display:flex;align-items:center;justify-content:center;min-height:42px;border:1px solid var(--line);border-radius:8px;text-decoration:none;color:#aeb7c0;font-size:.72rem}
.quicklinks a:hover{border-color:rgba(240,198,88,.35);color:var(--gold2)}
.guide-card{padding:24px;border-color:var(--line)}
.guide-label{color:var(--gold);font-size:.62rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase}
.guide-card h3{margin:8px 0 11px;font-size:1.15rem}
.guide-card p{margin:0;color:#909aa5;font-size:.78rem;line-height:1.55}
.guide-card details{margin-top:14px;border-top:1px solid var(--line);padding-top:14px}
.guide-card summary{cursor:pointer;color:#e8ebee;font-size:.80rem;font-weight:800}
.guide-card details p{margin-top:9px}
.tech-tag{display:inline-flex;margin-top:18px;padding:7px 9px;border:1px solid var(--line);border-radius:999px;color:#7f8993;font-size:.62rem}
.decor{position:fixed;z-index:-1;right:4vw;bottom:8vh;width:330px;height:330px;border-radius:50%;border:1px solid rgba(240,198,88,.07);box-shadow:inset 0 0 60px rgba(240,198,88,.025)}
.decor::before,.decor::after{content:"";position:absolute;border:1px solid rgba(240,198,88,.06);border-radius:50%}
.decor::before{inset:48px}.decor::after{inset:100px}
.footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:23px 0 32px;border-top:1px solid var(--line);color:#7f8790;font-size:.69rem}
.footer nav{display:flex;gap:16px;flex-wrap:wrap}.footer a{text-decoration:none}
@media(max-width:850px){.access-grid{grid-template-columns:1fr}.guide-card{order:2}.toplinks{display:none}}
@media(max-width:560px){.shell{width:min(100% - 22px,1180px)}.hero{padding-top:45px}.login-card{padding:24px 18px}.quicklinks{grid-template-columns:1fr}.footer{align-items:flex-start;flex-direction:column}}