@font-face { font-family: "Manrope"; src: url("../assets/fonts/manrope-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
:root { --ink:#142b32; --muted:#566a70; --rail:#123c47; --rail-deep:#0b3039; --accent:#167b6e; --line:#d6e2df; --ground:#f2f6f5; }
* { box-sizing: border-box; }
body { margin:0; min-width:320px; min-height:100dvh; background:var(--ground); color:var(--ink); font-family:"Manrope","Segoe UI",sans-serif; font-size:14px; line-height:1.5; }
button,input { font:inherit; }
a { color:var(--accent); font-weight:750; text-underline-offset:4px; }
::selection { background:#9bd8ce; color:var(--rail-deep); }
:focus-visible { outline:3px solid #57b4a7; outline-offset:3px; }
.login-layout { display:grid; min-height:100dvh; grid-template-columns:minmax(360px,.95fr) minmax(480px,1.05fr); }
.login-brand { position:relative; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; padding:clamp(34px,5vw,72px); background:var(--rail); color:#edf8f6; }
.login-brand::after { content:""; position:absolute; right:-18%; bottom:-22%; width:520px; aspect-ratio:1; border:1px solid rgba(255,255,255,.09); border-radius:50%; box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 150px rgba(255,255,255,.018); pointer-events:none; }
.brand-lockup { display:flex; align-items:center; gap:12px; font-size:20px; letter-spacing:-.025em; }
.brand-lockup > span { display:grid; width:42px; height:42px; place-items:center; border-radius:13px; background:#d8eee9; color:var(--rail-deep); font-size:23px; }
.brand-lockup strong { font-weight:780; }
.brand-lockup b { color:#9ad2c7; font-weight:560; }
.brand-message { position:relative; z-index:1; max-width:620px; margin-block:80px; }
.brand-message h1 { max-width:12ch; margin:0; font-size:clamp(42px,5vw,76px); line-height:1.02; letter-spacing:-.04em; text-wrap:balance; }
.brand-message p { max-width:52ch; margin:24px 0 0; color:#d0dfdd; font-size:16px; line-height:1.75; }
.brand-signal { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:14px 20px; color:#d7e8e6; }
.brand-signal span { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:650; }
.brand-signal i { color:#79c7b9; font-size:18px; }
.login-panel { display:grid; place-items:center; padding:40px; }
.login-form { width:min(420px,100%); }
.login-form header { margin-bottom:30px; }
.login-form h2 { margin:0; font-size:30px; line-height:1.15; letter-spacing:-.035em; }
.login-form header p { margin:9px 0 0; color:var(--muted); }
.login-form > label { display:grid; gap:8px; margin-top:18px; }
.login-form > label > span { font-size:12px; font-weight:760; }
.input-wrap { display:flex; height:48px; align-items:center; gap:10px; padding:0 13px; border:1px solid var(--line); border-radius:11px; background:#fff; color:var(--muted); transition:border-color 180ms ease,box-shadow 180ms ease; }
.input-wrap:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgba(22,123,110,.13); }
.input-wrap > i { font-size:19px; }
.input-wrap input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--ink); }
.input-wrap input::placeholder { color:#596d72; opacity:1; }
.password-toggle { display:grid; width:34px; height:34px; place-items:center; border:0; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; font-size:18px; }
.password-toggle:hover { background:#eaf1ef; color:var(--ink); }
.form-row { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:18px 0 24px; font-size:12px; }
.check-label { display:flex; align-items:center; gap:8px; color:var(--muted); }
.check-label input { width:16px; height:16px; accent-color:var(--accent); }
.submit-button { display:flex; width:100%; min-height:48px; align-items:center; justify-content:space-between; padding:0 17px; border:1px solid var(--accent); border-radius:11px; background:var(--accent); color:#fff; cursor:pointer; font-weight:780; transition:background 180ms ease,transform 120ms ease; }
.submit-button:hover { background:#0f645a; }
.submit-button:active { transform:translateY(1px); }
.submit-button:disabled { cursor:wait; opacity:.72; }
.support-copy { margin:24px 0 0; color:var(--muted); font-size:12px; text-align:center; }
.form-message { margin-bottom:18px; padding:11px 13px; border-radius:9px; background:#f8e4e2; color:#8b3636; font-size:12px; font-weight:650; }
@media (max-width:860px) { .login-layout { grid-template-columns:1fr; } .login-brand { min-height:300px; padding:30px; } .brand-message { margin:48px 0; } .brand-message h1 { font-size:42px; } .brand-signal { display:none; } .login-panel { padding:44px 22px 60px; } }
@media (max-width:480px) { .login-brand { min-height:230px; } .brand-message { margin:38px 0 4px; } .brand-message h1 { font-size:34px; } .brand-message p { display:none; } .form-row { align-items:flex-start; flex-direction:column; gap:10px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01ms!important; animation-duration:.01ms!important; } }