@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root { --forest:#173f36; --forest-deep:#0e2f28; --terracotta:#d46f4d; --terracotta-dark:#b85638; --cream:#fbf8f3; --ink:#202622; --muted:#717a74; --line:#dfe4df; --error:#b94f48; --success:#34755f; --display:"Manrope","Segoe UI",sans-serif; --body:"DM Sans","Segoe UI",sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: var(--body); -webkit-font-smoothing: antialiased; }
svg { display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.skip-link { position: fixed; z-index: 10; top: 10px; left: 10px; padding: 10px 15px; color: white; background: var(--forest); border-radius: 8px; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.login-layout { min-height: 100dvh; display: grid; grid-template-columns: minmax(390px, .86fr) minmax(520px, 1.14fr); }
.login-intro { position: relative; min-height: 100dvh; overflow: hidden; padding: clamp(34px,5vw,64px); display: flex; flex-direction: column; color: white; background: linear-gradient(150deg, var(--forest-deep), var(--forest) 70%, #245c4e); }
.login-intro::before { position: absolute; inset: 0; content:""; opacity: .15; background-image: radial-gradient(rgba(255,255,255,.4) .7px,transparent .7px); background-size: 24px 24px; mask-image: linear-gradient(to bottom,black,transparent 80%); }
.intro-glow { position:absolute; border-radius:50%; pointer-events:none; }
.intro-glow-one { width:440px; height:440px; right:-250px; top:22%; border:1px solid rgba(255,255,255,.09); box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.016); }
.intro-glow-two { width:260px; height:260px; left:-170px; bottom:-40px; background:rgba(212,111,77,.14); }
.login-brand { position:relative; z-index:2; display:inline-flex; align-items:center; align-self:flex-start; gap:11px; color:white; text-decoration:none; }
.brand-symbol { width:44px; height:44px; display:grid; place-items:center; color:white; background:var(--terracotta); border-radius:13px 13px 13px 5px; box-shadow:0 9px 22px rgba(0,0,0,.14); }
.brand-symbol svg { width:25px; height:25px; }
.login-brand > span:last-child { display:flex; flex-direction:column; line-height:1.05; }
.login-brand strong { font-family:var(--display); font-size:17px; letter-spacing:-.03em; }
.login-brand small { margin-top:3px; color:rgba(255,255,255,.58); font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.intro-content { position:relative; z-index:1; width:min(520px,100%); margin:auto 0; padding:65px 0; }
.eyebrow { display:inline-flex; align-items:center; gap:9px; color:#e7ab91; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.eyebrow span { width:24px; height:2px; background:var(--terracotta); }
.intro-content h1 { margin:22px 0 19px; font-family:var(--display); font-size:clamp(2.5rem,4.4vw,4.25rem); line-height:1.07; letter-spacing:-.06em; }
.intro-content > p { max-width:510px; color:rgba(255,255,255,.64); font-size:16px; line-height:1.75; }
.intro-benefits { margin:38px 0 0; padding:0; display:grid; gap:20px; list-style:none; }
.intro-benefits li { display:flex; align-items:center; gap:15px; }
.benefit-icon { width:44px; height:44px; display:grid; place-items:center; flex-shrink:0; color:#e8b29a; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); border-radius:13px; }
.benefit-icon svg { width:23px; height:23px; }
.intro-benefits strong,.intro-benefits small { display:block; }
.intro-benefits strong { margin-bottom:4px; font-size:13px; }
.intro-benefits small { color:rgba(255,255,255,.5); font-size:11px; }
.intro-note { position:relative; z-index:1; margin:0; color:rgba(255,255,255,.45); font-size:10px; letter-spacing:.04em; }
.intro-note span { margin-right:7px; color:#76b59e; font-size:9px; }

.login-panel { min-height:100dvh; padding:55px clamp(30px,7vw,110px); display:grid; place-items:center; background:linear-gradient(145deg,#fff 0%,#fbfaf7 100%); }
.mobile-brand { display:none; }
.login-card { width:min(475px,100%); }
.back-link { display:inline-flex; align-items:center; gap:5px; margin-bottom:38px; color:#78817c; font-size:12px; font-weight:600; text-decoration:none; transition:color .2s,transform .2s; }
.back-link:hover { color:var(--forest); transform:translateX(-3px); }
.back-link svg { width:17px; height:17px; }
.section-kicker { color:var(--terracotta-dark); font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.login-heading h2 { margin:9px 0 8px; color:var(--forest-deep); font-family:var(--display); font-size:clamp(2rem,3vw,2.65rem); letter-spacing:-.055em; }
.login-heading p { margin:0 0 31px; color:var(--muted); font-size:14px; }
.form-alert { margin-bottom:20px; padding:13px 15px; display:flex; align-items:flex-start; gap:10px; border-radius:11px; font-size:12px; line-height:1.45; }
.form-alert svg { width:19px; height:19px; flex-shrink:0; }
.form-alert-error { color:#8e3c37; background:#fbebea; border:1px solid #efd2d0; }
.form-alert-success { color:#285f4d; background:#e8f3ef; border:1px solid #cde5dc; }
.form-field { margin-bottom:20px; }
.form-field > label,.label-row label { display:block; margin-bottom:8px; color:#37423c; font-size:12px; font-weight:700; }
.label-row { display:flex; align-items:center; justify-content:space-between; }
.secure-label { margin-bottom:8px; display:flex; align-items:center; gap:5px; color:#8a928d; font-size:9px; font-weight:600; text-transform:uppercase; }
.secure-label svg { width:12px; height:12px; }
.input-shell { position:relative; }
.input-shell > svg { position:absolute; z-index:1; top:50%; left:15px; width:19px; height:19px; color:#89928d; transform:translateY(-50%); pointer-events:none; }
.input-shell input { width:100%; height:51px; padding:0 47px 0 45px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:11px; font:500 13px var(--body); outline:0; transition:border .2s,box-shadow .2s,background .2s; }
.input-shell input::placeholder { color:#abb1ad; }
.input-shell input:hover { border-color:#c6cec8; }
.input-shell input:focus { border-color:var(--forest); box-shadow:0 0 0 4px rgba(23,63,54,.09); }
.form-field.invalid input { border-color:var(--error); background:#fffafa; box-shadow:0 0 0 3px rgba(185,79,72,.08); }
.field-error { display:none; margin:6px 0 0 3px; color:var(--error); font-size:10px; }
.form-field.invalid .field-error { display:block; }
.password-toggle { position:absolute; top:50%; right:7px; width:39px; height:39px; padding:9px; color:#7d8781; background:transparent; border:0; border-radius:8px; transform:translateY(-50%); cursor:pointer; }
.password-toggle:hover { color:var(--forest); background:#f1f4f1; }
.password-toggle svg { width:21px; height:21px; }
.eye-closed { display:none; }
.password-toggle[aria-pressed="true"] .eye-open { display:none; }
.password-toggle[aria-pressed="true"] .eye-closed { display:block; }
.remember-option { width:max-content; margin:2px 0 24px; display:flex; align-items:center; gap:9px; color:#66706a; font-size:11px; cursor:pointer; }
.remember-option input { position:absolute; opacity:0; pointer-events:none; }
.remember-option > span { width:18px; height:18px; display:grid; place-items:center; color:white; background:white; border:1px solid #cbd1cd; border-radius:5px; transition:.2s; }
.remember-option svg { width:13px; height:13px; stroke-width:2.4; opacity:0; }
.remember-option input:checked + span { background:var(--forest); border-color:var(--forest); }
.remember-option input:checked + span svg { opacity:1; }
.remember-option input:focus-visible + span { outline:3px solid rgba(212,111,77,.28); outline-offset:2px; }
.submit-button { width:100%; min-height:53px; padding:0 20px; display:flex; align-items:center; justify-content:center; gap:9px; color:white; background:var(--terracotta); border:0; border-radius:12px; box-shadow:0 12px 28px rgba(184,86,56,.2); font:700 13px var(--body); cursor:pointer; transition:transform .2s,background .2s,box-shadow .2s; }
.submit-button:hover { background:var(--terracotta-dark); box-shadow:0 15px 32px rgba(184,86,56,.27); transform:translateY(-2px); }
.submit-button:active { transform:translateY(0); }
.submit-button svg { width:18px; height:18px; }
.submit-button:hover .button-arrow { transform:translateX(3px); }
.button-arrow { transition:transform .2s; }
.button-spinner { display:none; animation:spin .7s linear infinite; }
.button-spinner circle { stroke-dasharray:35; stroke-dashoffset:12; }
.submit-button.loading .button-arrow { display:none; }
.submit-button.loading .button-spinner { display:block; }
.submit-button:disabled { opacity:.78; cursor:wait; }
@keyframes spin { to { transform:rotate(360deg); } }
.account-divider { margin:28px 0 17px; display:flex; align-items:center; color:#9aa19d; font-size:9px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.account-divider::before,.account-divider::after { height:1px; flex:1; content:""; background:var(--line); }
.account-divider span { padding:0 12px; }
.account-actions { display:grid; gap:9px; }
.account-actions > a { min-height:65px; padding:10px 13px; display:grid; grid-template-columns:42px 1fr 20px; align-items:center; gap:12px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:11px; text-decoration:none; transition:border .2s,box-shadow .2s,transform .2s; }
.account-actions > a:hover { border-color:rgba(23,63,54,.3); box-shadow:0 9px 24px rgba(23,63,54,.07); transform:translateY(-2px); }
.account-icon { width:40px; height:40px; display:grid; place-items:center; color:var(--terracotta); background:#f9e9e2; border-radius:11px; }
.account-icon.company { color:var(--forest); background:#e6f0ec; }
.account-icon svg { width:22px; height:22px; }
.account-actions strong,.account-actions small { display:block; }
.account-actions strong { margin-bottom:3px; color:#35413a; font-size:11px; }
.account-actions small { color:#8c948f; font-size:9px; }
.action-arrow { width:17px; height:17px; color:#9ba39e; transition:transform .2s; }
.account-actions a:hover .action-arrow { color:var(--terracotta); transform:translateX(3px); }
.login-support { margin:23px 0 0; color:#929a95; font-size:10px; text-align:center; }
.login-support a { color:var(--terracotta-dark); font-weight:700; text-underline-offset:3px; }
:focus-visible { outline:3px solid rgba(212,111,77,.32); outline-offset:3px; }

@media (max-width:900px) {
    .login-layout { grid-template-columns:1fr; }
    .login-intro { display:none; }
    .login-panel { min-height:100dvh; padding:32px 22px 45px; align-content:start; }
    .mobile-brand { width:min(475px,100%); margin:0 auto 38px; display:block; }
    .mobile-brand .login-brand { color:var(--forest); }
    .mobile-brand .login-brand small { color:var(--muted); }
    .login-card { margin:auto; }
    .back-link { margin-bottom:30px; }
}
@media (max-width:480px) {
    .login-panel { padding:24px 17px 38px; }
    .mobile-brand { margin-bottom:30px; }
    .brand-symbol { width:40px; height:40px; }
    .login-heading h2 { font-size:1.9rem; }
    .account-actions > a { grid-template-columns:39px 1fr 17px; padding-inline:10px; }
}
@media (max-height:760px) and (min-width:901px) {
    .login-intro,.login-panel { padding-top:28px; padding-bottom:28px; }
    .intro-content { padding:35px 0; }
    .intro-benefits { margin-top:24px; }
    .back-link { margin-bottom:22px; }
    .login-heading p { margin-bottom:20px; }
    .form-field { margin-bottom:14px; }
    .remember-option { margin-bottom:16px; }
    .account-divider { margin:19px 0 12px; }
    .account-actions > a { min-height:58px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }