:root { --navy:#061a34; --blue:#1266e8; --green:#1f9d57; --ink:#142238; --muted:#69778d; --line:#dce5f0; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; padding:24px; color:var(--ink); background:#eef3f9; font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; }
.access-shell { width:min(980px,100%); min-height:570px; display:grid; grid-template-columns:1.05fr .95fr; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:0 24px 70px rgba(6,26,52,.16); }
.access-brand { display:flex; flex-direction:column; justify-content:center; padding:60px; color:#fff; background:var(--navy); }
.access-brand img { width:220px; height:112px; object-fit:cover; object-position:center; border-radius:6px; background:#fff; }
.access-brand h1 { max-width:390px; margin:34px 0 14px; font-size:38px; line-height:1.08; letter-spacing:0; }
.access-brand p { max-width:430px; margin:0; color:#b7c9df; line-height:1.55; }
.role-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }.role-list span{padding:7px 10px;border:1px solid rgba(255,255,255,.16);border-radius:5px;color:#dce9f8;font-size:11px;font-weight:800}
.access-form-wrap { display:flex; flex-direction:column; justify-content:center; padding:42px 52px; }
.access-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:22px;padding:4px;border-radius:7px;background:#edf3f9}.access-tabs button{height:36px;border:0;border-radius:5px;color:var(--muted);background:transparent;font-size:11px;font-weight:900;cursor:pointer}.access-tabs button.active{color:var(--blue);background:#fff;box-shadow:0 2px 8px rgba(6,26,52,.09)}
[hidden]{display:none!important}
.api-state { display:flex; align-items:center; gap:8px; width:max-content; margin-bottom:26px; padding:7px 9px; border-radius:5px; color:#8a6400; background:#fff6d8; font-size:10px; font-weight:850; }.api-state i{width:8px;height:8px;border-radius:50%;background:#e4a500}.api-state.online{color:#147743;background:#e9f8ef}.api-state.online i{background:var(--green)}.api-state.offline{color:#b43434;background:#ffeded}.api-state.offline i{background:#d84444}
form>div small { color:var(--blue); font-size:10px; font-weight:900; text-transform:uppercase; } form h2{margin:5px 0 24px;font-size:27px}
.text-button{height:auto!important;margin-top:10px!important;padding:7px!important;color:var(--blue)!important;background:transparent!important;font-size:11px!important}.access-error.success{color:var(--green)}
label { display:grid; gap:7px; margin-bottom:15px; color:var(--ink); font-size:11px; font-weight:850; }input,select{width:100%;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:6px;outline:none;background:#fff;font:inherit}input:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(18,102,232,.1)}form>button{width:100%;height:44px;margin-top:5px;border:0;border-radius:6px;color:#fff;background:var(--blue);font:inherit;font-weight:900;cursor:pointer}form>button:disabled{opacity:.6;cursor:wait}.access-error{min-height:18px;margin:10px 0 0;color:#c53232;font-size:11px;text-align:center}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}.form-grid .wide{grid-column:1/-1}.form-divider{margin:3px 0 14px;padding-top:13px;border-top:1px solid var(--line);color:var(--blue);font-size:10px;font-weight:900;text-transform:uppercase}
.demo-accounts { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }.demo-accounts>span{grid-column:1/-1;color:var(--muted);font-size:9px;font-weight:900;text-transform:uppercase}.demo-accounts button{min-height:34px;border:1px solid var(--line);border-radius:5px;color:var(--muted);background:#fff;font-size:10px;font-weight:800;cursor:pointer}.demo-accounts button:hover{color:var(--blue);border-color:#9cc1f5;background:#f4f8ff}
@media(max-width:760px){body{padding:12px}.access-shell{grid-template-columns:1fr}.access-brand{padding:28px}.access-brand img{width:150px;height:76px}.access-brand h1{margin:20px 0 9px;font-size:27px}.role-list{margin-top:18px}.access-form-wrap{padding:28px}}
@media(max-width:430px){.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}}