:root {
  color-scheme: light;
  --navy: #0a2860;
  --deep: #082655;
  --blue: #0867e9;
  --orange: #ff9c22;
  --text: #122951;
  --muted: #7182a2;
  --border: #e4ecf8;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--text); background: #f1f6fd; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button,input { font: inherit; }
.auth-page { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 28px; background: radial-gradient(ellipse at 4% 0%, #dceeff 0, transparent 35%), radial-gradient(ellipse at 94% 90%, #e7eaff 0, transparent 31%), #f4f7fd; }
.auth-shell { width: min(1160px,100%); min-height: 695px; display: grid; grid-template-columns: 50% 50%; border-radius: 27px; overflow: hidden; box-shadow: 0 25px 75px rgba(28,69,133,.12), 0 2px 6px rgba(36,71,125,.05); background: white; }
.brand-panel { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; padding: 37px 42px 26px; color: white; background: linear-gradient(153deg,#0a4aab 0%,#096be5 51%,#0579ed 100%); }
.brand-panel::before { content: ""; position: absolute; inset: 0; z-index:-2; background: radial-gradient(circle at 95% 30%, rgba(142,219,255,.25), transparent 34%), linear-gradient(165deg, rgba(5,24,87,.32), transparent 48%); }
.brand-panel::after { content: ""; position:absolute; right:-110px; bottom:50px; width:290px; height:290px; border:1px solid rgba(255,255,255,.12); border-radius:50%; z-index:-1; box-shadow: 0 0 0 45px rgba(255,255,255,.035),0 0 0 90px rgba(255,255,255,.025); }
.panel-orb { position:absolute; pointer-events:none; border-radius:50%; z-index:-1; }
.orb-one { width:220px; height:220px; left:-135px; top:180px; background:rgba(154,207,255,.09); }
.orb-two { width:180px; height:180px; right:-78px; top:-90px; background:rgba(154,207,255,.17); }
.brand-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.brand-identity { display:inline-flex; align-items:center; gap:10px; font-size:15px; font-weight:800; letter-spacing:.16em; }
.brand-dot { background: #ffae38; height:10px; width:10px; border-radius:50%; box-shadow:0 0 0 5px rgba(255,174,56,.18); }
.brand-version { padding:9px 12px; border:1px solid rgba(255,255,255,.23); border-radius:999px; font-size:11px; font-weight:600; color:#e0efff; white-space:nowrap; }
.brand-showcase { position:relative; flex:1; display:grid; place-items:center; min-height:265px; padding:18px 6px; }
.logo-frame { position:relative; width:min(93%,405px); padding:22px 14px; border:1px solid rgba(255,255,255,.85); border-radius:29px; background:white; box-shadow:0 24px 48px rgba(1,23,97,.23), 0 3px 8px rgba(3,19,53,.07); transform:rotate(-2deg); animation:softFloat 6s ease-in-out infinite; }
.logo-frame img { width:100%; height:auto; display:block; }
.star {position:absolute; color:#ffad2f; text-shadow:0 5px 10px rgba(10,35,70,.15); }
.star-one {left:10px; top:18%; font-size:38px; }
.star-two {right:7px; bottom:19%; font-size:28px; }
.brand-message { position:relative; }
.mini-eyebrow { color:#d3eaff; letter-spacing:.13em; font-size:10px; font-weight:800; display:flex; align-items:center; gap:9px; }
.mini-line {height:2px;width:19px;border-radius:2px;background:#ffb440;}
.brand-message h1 {font-size:clamp(26px,2.6vw,38px); letter-spacing:-.035em; line-height:1.16; margin:13px 0 12px; font-weight:800; }
.brand-message h1 span {color:#ffe3a9;}
.brand-message p { max-width:430px; color:#dcecff; font-size:13px; line-height:1.8; margin:0; }
.feature-pills {display:flex; gap:9px; flex-wrap:wrap; margin-top:23px; }
.feature-pills span { display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border:1px solid rgba(255,255,255,.25); border-radius:12px; color:#f6fbff; background:rgba(255,255,255,.11); font-size:11px; font-weight:700; backdrop-filter: blur(8px); }
.feature-pills svg {width:15px;height:15px;fill:none;stroke:#ffbf53;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.brand-footer {border-top:1px solid rgba(255,255,255,.15);margin-top:25px;padding-top:17px;color:#bfdcff;font-size:10px;}
.login-panel { display:flex;flex-direction:column;justify-content:space-between;min-width:0;padding:38px 49px 27px;background:linear-gradient(150deg,#fff 40%,#fcfdff 100%); }
.login-topline {display:flex;align-items:center;justify-content:space-between;gap:8px;}
.login-edition {font-size:12px;color:#7a8da9;font-weight:700;}
.login-edition span {color:#ff9c22;font-size:16px;vertical-align:middle;}
.status-pill {display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:30px;background:#eef8f4;color:#269d78;font-size:10px;font-weight:800;letter-spacing:.045em;white-space:nowrap;}
.status-dot {width:7px;height:7px;border-radius:50%;background:#35b58a;}
.login-container { max-width:410px; width:100%; margin:32px auto; }
.welcome-icon {width:50px;height:50px;display:grid;place-items:center;border-radius:17px;background:linear-gradient(155deg,#e9f4ff,#d6eaff);margin-bottom:25px;}
.welcome-icon svg {width:25px;height:25px;fill:none;stroke:#0665d6;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;}
.form-eyebrow {font-size:11px;font-weight:800;letter-spacing:.14em;color:#1671e5;margin:0 0 10px;}
.login-container h2 {font-size:clamp(29px,3vw,37px);font-weight:800;letter-spacing:-.04em;line-height:1.21;color:#0b285a;margin:0 0 11px;}
.login-container h2 span {color:#0870ea;}
.form-intro {font-size:13px;color:#7586a3;line-height:1.8;margin:0 0 29px;}
.login-form {display:flex;flex-direction:column;gap:18px;}
.field-group label {display:block;font-size:12px;font-weight:800;color:#263c60;margin-bottom:9px;}
.input-wrap {position:relative;display:flex;align-items:center;}
.input-wrap > svg {position:absolute;left:16px;width:19px;height:19px;fill:none;stroke:#8aa2c5;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;}
.input-wrap input {display:block;width:100%;height:54px;padding:0 50px 0 47px;border:1.4px solid #e3ebf5;border-radius:13px;outline:none;background:#f9fbff;color:#1a3259;font-size:13px;transition:border-color .2s,box-shadow .2s,background-color .2s;}
.input-wrap input::placeholder {color:#9aaac1;}
.input-wrap input:hover {border-color:#c5d7ee;}
.input-wrap input:focus {border-color:#2588ff;box-shadow:0 0 0 4px rgba(37,136,255,.11);background:white;}
.password-toggle {position:absolute;right:11px;width:35px;height:35px;border:0;border-radius:10px;background:transparent;display:grid;place-items:center;cursor:pointer;color:#90a0b9;}
.password-toggle:hover {background:#eef5fe;color:#1169da;}
.password-toggle svg {width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;}
.form-subrow {display:flex;gap:10px;align-items:flex-start;justify-content:space-between;min-height:20px;}
.remember-check {display:flex;align-items:center;gap:8px;color:#556987;font-size:11px;white-space:nowrap;cursor:pointer;}
.remember-check input {width:15px;height:15px;accent-color:#086de6;}
.password-help {font-size:10px;line-height:1.6;text-align:right;color:#8699b4;}
.submit-btn {width:100%;height:55px;margin-top:4px;background:linear-gradient(108deg,#0879f7,#075bd7);border:0;border-radius:13px;color:#fff;font-size:13px;font-weight:800;letter-spacing:.01em;box-shadow:0 12px 24px rgba(8,108,226,.2);display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;transition:transform .2s,box-shadow .2s,filter .2s;}
.submit-btn svg {width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s;}
.submit-btn:hover:not(:disabled) {transform:translateY(-2px);box-shadow:0 16px 30px rgba(8,108,226,.28);filter:brightness(1.03);}
.submit-btn:hover svg {transform:translateX(3px);}
.submit-btn:disabled {opacity:.7;cursor:wait;}
.security-footnote {display:flex;align-items:flex-start;gap:9px;margin-top:25px;padding:13px 14px;border:1px solid #edf1f8;border-radius:13px;background:#f8fbff;color:#8494ac;font-size:10px;line-height:1.5;}
.security-footnote svg {height:15px;width:15px;flex:none;fill:none;stroke:#6c9dd8;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.notice {margin:0 0 20px;padding:12px 14px;border-radius:10px;font-size:12px;line-height:1.65;}
.notice-error {background:#fff1f1;color:#b63a47;border:1px solid #ffdadf;}
.notice-success {background:#eefbf3;color:#24744b;border:1px solid #c9eed9;}
.login-bottom {border-top:1px solid #eef1f7;display:flex;flex-wrap:wrap;justify-content:space-between;gap:9px;padding-top:19px;color:#9ba9be;font-size:10px;}
@keyframes softFloat {0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-9px) rotate(-1deg)}}
@media (max-width: 960px) {
  .auth-page {padding:18px;}
  .auth-shell {grid-template-columns:45% 55%;min-height:680px;}
  .brand-panel {padding:29px 25px 24px;}
  .login-panel {padding:29px 32px 25px;}
  .brand-version {display:none;}
  .brand-showcase {min-height:230px;}
  .brand-message h1 {font-size:28px;}
}
@media (max-width: 700px) {
  .auth-page {padding:0;display:block;}
  .auth-shell {width:100%;min-height:100dvh;display:flex;flex-direction:column;border-radius:0;box-shadow:none;}
  .brand-panel {padding:21px 24px 22px;min-height:184px;}
  .brand-top {margin-bottom:12px;}
  .brand-version {display:block;padding:7px 9px;font-size:9px;}
  .brand-showcase {min-height:0;padding:0;position:absolute;right:19px;top:62px;width:118px;height:90px;}
  .logo-frame {width:118px;border-radius:14px;padding:8px;transform:rotate(-4deg);}
  .star {display:none;}
  .brand-message {max-width:65%;}
  .mini-eyebrow {font-size:8px;}
  .brand-message h1 {font-size:22px;line-height:1.18;margin:8px 0 0;}
  .brand-message p,.feature-pills,.brand-footer {display:none;}
  .login-panel {padding:25px 24px 22px;flex:1;}
  .login-container {margin:23px auto 29px;}
  .welcome-icon {display:none;}
  .login-container h2 {font-size:31px;}
  .form-intro {margin-bottom:25px;}
  .login-bottom {font-size:9px;}
}
@media (max-width: 370px) {
  .brand-message h1 {font-size:19px;}
  .brand-showcase {right:10px;width:105px;}
  .logo-frame {width:105px;}
  .form-subrow {flex-direction:column;align-items:flex-start;}
  .password-help {text-align:left;}
}
@media (prefers-reduced-motion:reduce) {*,*::before,*::after {animation-duration:.01ms!important;transition-duration:.01ms!important;}}