@import 'tailwindcss';

:root { --ink:#f7f8fb; --muted:#9da6b8; --panel-soft:#171b25; --line:rgba(255,255,255,.1); --accent:#7c5cff; --accent-2:#24d2b5; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin:0; color:var(--ink); background:#0a0c12; font-family:Arial,Helvetica,sans-serif; }
button, input { font:inherit; }
.access-shell { min-height:100vh; display:grid; grid-template-columns:minmax(380px,1.05fr) minmax(460px,.95fr); }
.brand-panel { position:relative; overflow:hidden; padding:clamp(48px,7vw,108px); display:flex; flex-direction:column; justify-content:space-between; background:radial-gradient(circle at 18% 12%,rgba(124,92,255,.34),transparent 36%),radial-gradient(circle at 82% 80%,rgba(36,210,181,.16),transparent 30%),linear-gradient(150deg,#151526 0%,#0c0f17 58%,#090b10 100%); }
.brand-panel::after { content:''; position:absolute; inset:0; 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:42px 42px; mask-image:linear-gradient(to bottom right,black,transparent 72%); pointer-events:none; }
.brand-mark { position:relative; width:68px; height:68px; display:grid; place-items:center; }
.brand-orbit { position:absolute; inset:4px; border:1px solid rgba(255,255,255,.22); border-radius:20px; transform:rotate(45deg); box-shadow:0 0 44px rgba(124,92,255,.28); }
.brand-core { position:relative; z-index:1; font-weight:800; font-size:24px; color:white; }
.eyebrow { margin:0 0 18px; color:#b8acec; font-size:12px; font-weight:800; letter-spacing:.18em; }
.brand-panel h1 { margin:0; max-width:760px; font-size:clamp(42px,5.2vw,78px); line-height:1.02; letter-spacing:-.055em; }
.brand-copy { max-width:580px; margin:26px 0 0; color:var(--muted); font-size:clamp(17px,1.35vw,21px); line-height:1.6; }
.system-state { display:flex; align-items:center; gap:10px; color:#b6becc; font-size:13px; }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 14px rgba(36,210,181,.75); }
.login-panel { min-height:100vh; padding:48px; display:grid; place-items:center; align-content:center; background:#0d1017; }
.login-card { width:min(430px,100%); }
.mobile-brand { display:none; }
.accent { color:var(--accent-2); margin-bottom:14px; }
.login-card h2 { margin:0; font-size:40px; letter-spacing:-.045em; }
.login-copy { margin:14px 0 34px; color:var(--muted); line-height:1.55; }
.login-form { display:grid; gap:20px; }
.login-form label { display:grid; gap:9px; }
.login-form label>span { color:#dfe3ec; font-size:14px; font-weight:700; }
.login-form input { width:100%; height:54px; padding:0 16px; color:white; background:var(--panel-soft); border:1px solid var(--line); border-radius:12px; outline:none; transition:border-color .2s,box-shadow .2s; }
.login-form input:focus { border-color:rgba(124,92,255,.85); box-shadow:0 0 0 4px rgba(124,92,255,.12); }
.login-form button { height:56px; margin-top:5px; padding:0 20px; display:flex; align-items:center; justify-content:space-between; color:white; background:linear-gradient(115deg,#6d4cff,#876eff); border:0; border-radius:12px; font-weight:800; cursor:pointer; box-shadow:0 16px 36px rgba(74,49,183,.3); }
.login-form button:hover { filter:brightness(1.08); }
.security-note { margin-top:28px; padding:16px; display:flex; gap:12px; color:#8e98aa; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.07); border-radius:12px; font-size:12px; line-height:1.5; }
.security-note span { color:var(--accent-2); }
.security-note p { margin:0; }
.security-note strong { color:#c9cfda; }
.legal { margin:34px 0 0; color:#596172; font-size:12px; }
@media (max-width:850px) { .access-shell{grid-template-columns:1fr}.brand-panel{display:none}.login-panel{padding:28px 22px}.mobile-brand{display:block;margin-bottom:64px;font-size:13px;font-weight:900;letter-spacing:.18em}.login-card h2{font-size:34px} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{scroll-behavior:auto!important;transition:none!important} }