:root {
  --navy:#101e34;
  --bg:#f4f6f9;
  --ink:#1d2b40;
  --muted:#65748b;
  --line:#e6ebf1;
  --blue:#4268b0;
  --mono:"Cascadia Code","SFMono-Regular",Consolas,monospace;
}
* { box-sizing:border-box; }
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:14px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,p { margin:0; }
button,input { font:inherit; }
[hidden] { display:none!important; }
input:focus-visible,button:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
.login-layout { display:grid; grid-template-columns:minmax(350px,.9fr) minmax(420px,1.1fr); min-height:100vh; min-height:100svh; }
.identity-panel {
  background:var(--navy);
  color:#f5f8ff;
  padding:46px clamp(36px,5vw,84px) 30px;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
}
.identity-panel::after {
  content:"";
  position:absolute;
  width:370px;
  height:370px;
  border:1px solid #233650;
  border-radius:50%;
  right:-215px;
  top:27%;
  box-shadow:0 0 0 55px #15243b,0 0 0 56px #233650,0 0 0 111px #15243b,0 0 0 112px #233650;
  pointer-events:none;
}
.brand { display:flex; align-items:center; gap:13px; font-size:24px; font-weight:650; letter-spacing:4px; line-height:1.2; position:relative; z-index:1; }
.brand-mark { display:grid; place-items:center; width:36px; height:42px; border:1px solid #647a9c; background:#203452; transform:skew(-9deg); font-size:27px; letter-spacing:0; font-weight:400; }
.brand small { display:block; font-size:8px; letter-spacing:1.55px; color:#9baec9; margin-top:8px; font-weight:400; }
.identity-copy { padding:80px 0; margin:auto 0; position:relative; z-index:1; }
.eyebrow { font:10px var(--mono); letter-spacing:1.8px; color:#617590; }
.identity-copy .eyebrow { color:#9baec9; margin-bottom:22px; }
h1 { font-size:clamp(29px,3.1vw,46px); font-weight:500; line-height:1.6; letter-spacing:.06em; }
.identity-description { color:#a2b3ca; font-size:13px; line-height:2; margin-top:23px; }
.scope-list { display:grid; gap:23px; margin-top:48px; }
.scope-list>div { display:flex; gap:17px; align-items:flex-start; font-size:12px; color:#d1ddec; }
.scope-index { font:11px var(--mono); color:#8a9fbd; border-top:1px solid #526783; padding-top:6px; }
.scope-list small { display:block; margin-top:5px; color:#9baec9; font-size:11px; }
.identity-footer { display:flex; align-items:center; gap:8px; font-size:11px; color:#a2b3ca; z-index:1; }
.status-dot { width:6px; height:6px; border-radius:50%; background:#55bca5; }
.identity-footer>span:last-child { margin-left:auto; font:8px var(--mono); letter-spacing:1px; }
.access-panel { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:60px 44px 26px; }
.login-card { width:100%; max-width:400px; margin:auto 0; padding:45px 0; }
.access-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.readonly-tag { color:#65748b; background:#edf1f6; border:1px solid #dfe6ee; border-radius:4px; padding:2px 8px; font-size:10px; white-space:nowrap; }
h2 { font-size:29px; font-weight:650; letter-spacing:.04em; line-height:1.4; }
.login-description { margin-top:11px; font-size:12px; color:var(--muted); }
form { margin-top:34px; }
.field { margin-bottom:20px; }
label { display:block; font-size:12px; color:#435571; font-weight:500; margin-bottom:8px; }
input { display:block; width:100%; min-height:48px; border:1px solid #cfd8e5; border-radius:5px; background:#fff; padding:11px 13px; font-size:16px; color:var(--ink); transition:border-color .15s; }
input::placeholder { font-size:13px; color:#8290a3; }
input:hover:not(:disabled) { border-color:#91a4be; }
input[aria-invalid="true"] { border-color:#b65d58; }
input:disabled { color:#65748b; background:#f0f3f7; }
.login-button { width:100%; min-height:48px; margin-top:5px; padding:12px 16px; display:flex; justify-content:space-between; align-items:center; border:1px solid #253e61; border-radius:5px; background:#253e61; color:#fff; font-size:13px; font-weight:500; cursor:pointer; transition:background .15s; }
.login-button:hover:not(:disabled) { background:#304f7a; }
.login-button>span:last-child { font-size:19px; line-height:1; color:#bacce5; }
.login-button:disabled { cursor:wait; opacity:.65; }
.form-error { font-size:12px; line-height:1.8; color:#a0443e; background:#fcf0ef; border:1px solid #eacac7; border-radius:5px; padding:10px 12px; margin-bottom:16px; overflow-wrap:anywhere; }
.login-status { min-height:24px; padding-top:9px; color:var(--muted); font-size:11px; }
.access-note { display:flex; align-items:flex-start; gap:12px; border-top:1px solid #dfe6ef; padding-top:22px; margin-top:24px; }
.note-symbol { font:22px/1.5 var(--mono); color:#7c8fa9; }
.access-note p { color:var(--muted); font-size:11px; line-height:1.9; }
.access-footer { width:100%; max-width:400px; display:flex; align-items:center; gap:10px; color:#718097; font-size:9px; }
.access-footer>span:first-child { color:#9daabb; }
.footer-caption { margin-left:auto; font:8px var(--mono); letter-spacing:.5px; }
@media (min-width:1600px) { .identity-panel { padding-left:100px; padding-right:100px; } }
@media (max-width:900px) {
  .login-layout { grid-template-columns:minmax(280px,.85fr) minmax(360px,1.15fr); }
  .identity-panel { padding:35px 28px 26px; }
  .identity-copy { padding:65px 0; }
  h1 { font-size:29px; }
  .identity-footer>span:last-child { display:none; }
  .access-panel { padding:40px 30px 24px; }
  .footer-caption { display:none; }
}
@media (max-width:680px) {
  .login-layout { grid-template-columns:1fr; }
  .identity-panel { padding:25px 24px; }
  .brand { font-size:22px; }
  .brand-mark { width:32px; height:37px; font-size:24px; }
  .identity-copy { margin:0; padding:27px 0 0; }
  .identity-copy .eyebrow { font-size:9px; margin-bottom:10px; }
  h1 { font-size:25px; line-height:1.6; }
  h1 br { display:none; }
  .identity-description,.scope-list,.identity-footer { display:none; }
  .identity-panel::after { top:-140px; right:-290px; }
  .access-panel { padding:15px 24px 24px; }
  .login-card { max-width:420px; padding:28px 0; }
  h2 { font-size:26px; }
  form { margin-top:26px; }
  .access-footer { max-width:420px; }
  .footer-caption { display:inline; font-size:7px; }
}
@media (max-width:360px) {
  .identity-panel { padding:23px 20px; }
  .access-panel { padding-left:20px; padding-right:20px; }
  h1 { font-size:22px; }
  .footer-caption { display:none; }
}
@media (prefers-reduced-motion:reduce) { input,.login-button { transition:none; } }