@font-face { font-family: Gilroy; src: url('../fonts/Gilroy-Regular.ttf'); font-weight: 400; font-display: swap; }
@font-face { font-family: Gilroy; src: url('../fonts/Gilroy-Medium.ttf'); font-weight: 500; font-display: swap; }
@font-face { font-family: Gilroy; src: url('../fonts/Gilroy-Bold.ttf'); font-weight: 700; font-display: swap; }
:root { --portal-purple:#351067; --portal-purple-light:#5420b7; --portal-pink:#e51d58; --portal-ink:#21152d; --portal-muted:#766d80; --portal-border:#e7e0ed; --portal-soft:#f7f4fa; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body.portal-login-page { margin:0; background:#f5f1f8; color:var(--portal-ink); font-family:Gilroy,Arial,sans-serif; }
.portal-login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(420px,.92fr) minmax(500px,1.08fr); background:#fff; }
.portal-story { position:relative; min-height:100vh; padding:48px; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; justify-content:space-between; color:#fff; }
.portal-story__background,.portal-story__overlay { position:absolute; inset:0; z-index:-2; }
.portal-story__background { background-size:cover; background-position:center 35%; transform:scale(1.02); }
.portal-story__overlay { z-index:-1; background:linear-gradient(155deg,rgba(36,6,75,.9) 4%,rgba(53,16,103,.72) 48%,rgba(229,29,88,.58) 115%); }
.portal-story::after { content:''; position:absolute; right:-170px; bottom:-180px; width:420px; height:420px; border:1px solid rgba(255,255,255,.18); border-radius:50%; box-shadow:0 0 0 60px rgba(255,255,255,.035),0 0 0 120px rgba(255,255,255,.025); z-index:-1; }
.portal-brand { display:inline-flex; align-items:center; gap:12px; font-size:20px; font-weight:700; letter-spacing:.17em; }
.portal-brand__mark { position:relative; width:40px; height:40px; border-radius:13px; background:linear-gradient(135deg,var(--portal-pink),#8b2bd1); box-shadow:0 10px 24px rgba(27,3,56,.24); }
.portal-brand__mark::before,.portal-brand__mark::after,.portal-brand__mark span { content:''; position:absolute; background:#fff; border-radius:99px; }
.portal-brand__mark::before { width:4px; height:21px; left:18px; top:9px; transform:rotate(45deg); }
.portal-brand__mark::after { width:4px; height:21px; left:18px; top:9px; transform:rotate(-45deg); }
.portal-brand__mark span { width:4px; height:19px; left:18px; top:11px; }
.portal-brand--light { color:#fff; }
.portal-brand--mobile { display:none; color:var(--portal-purple); margin-bottom:28px; }
.portal-story__content { max-width:570px; margin:auto 0; padding:72px 0; }
.portal-eyebrow,.portal-role-badge { display:inline-flex; align-items:center; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.portal-eyebrow { padding:8px 12px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); color:#fff; backdrop-filter:blur(8px); }
.portal-story h1 { max-width:540px; margin:22px 0 18px; color:#fff; font-size:clamp(40px,4.2vw,64px); line-height:1.02; letter-spacing:-.035em; font-weight:700; }
.portal-story__content>p { max-width:530px; margin:0; color:rgba(255,255,255,.82); font-size:18px; line-height:1.65; }
.portal-benefits { display:flex; flex-wrap:wrap; gap:12px 20px; margin-top:30px; }
.portal-benefits span { display:inline-flex; align-items:center; gap:7px; color:rgba(255,255,255,.9); font-size:13px; font-weight:500; }
.portal-benefits i { display:inline-flex; align-items:center; justify-content:center; width:19px; height:19px; border-radius:50%; background:rgba(255,255,255,.18); color:#fff; font-style:normal; font-size:11px; }
.portal-story__footer { margin:0; color:rgba(255,255,255,.58); font-size:12px; letter-spacing:.06em; }
.portal-access { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:48px clamp(36px,7vw,110px); background:radial-gradient(circle at 100% 0,#fbf6fc 0,transparent 34%),#fff; }
.portal-access__inner { width:100%; max-width:500px; }
.portal-switcher { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; padding:5px; margin-bottom:40px; border:1px solid var(--portal-border); border-radius:14px; background:var(--portal-soft); }
.portal-switcher a { padding:10px 8px; border-radius:10px; color:#74697e; font-size:13px; font-weight:600; text-align:center; text-decoration:none; transition:.2s ease; }
.portal-switcher a:hover { color:var(--portal-purple); }
.portal-switcher a.active { color:#fff; background:var(--portal-purple); box-shadow:0 6px 16px rgba(53,16,103,.2); }
.portal-role-badge { padding:6px 10px; color:var(--portal-purple); background:#f1e9f8; }
.portal-heading h2 { margin:14px 0 8px; color:var(--portal-ink); font-size:clamp(30px,3vw,39px); line-height:1.12; font-weight:700; letter-spacing:-.025em; }
.portal-heading p { margin:0 0 30px; color:var(--portal-muted); font-size:15px; line-height:1.55; }
.portal-alert { display:flex; align-items:flex-start; gap:10px; margin-bottom:22px; padding:12px 14px; border:1px solid #f6c8d5; border-radius:10px; background:#fff2f6; color:#9e1a43; font-size:13px; line-height:1.45; }
.portal-alert svg { flex:0 0 19px; width:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.portal-field { margin-bottom:20px; }
.portal-field label { margin:0 0 8px; color:#33263f; font-size:13px; font-weight:700; }
.portal-label-row { display:flex; align-items:center; justify-content:space-between; }
.portal-label-row span { color:#a097a8; font-size:11px; }
.portal-input-wrap { position:relative; }
.portal-input-wrap>svg { position:absolute; top:50%; left:15px; width:20px; transform:translateY(-50%); fill:none; stroke:#8d8296; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.portal-input-wrap input { width:100%; height:52px; padding:0 48px 0 45px; border:1px solid var(--portal-border); border-radius:11px; outline:none; background:#fff; color:var(--portal-ink); font:500 15px Gilroy,Arial,sans-serif; transition:border-color .18s,box-shadow .18s,background .18s; }
.portal-input-wrap input::placeholder { color:#aaa2b0; font-weight:400; }
.portal-input-wrap input:hover { border-color:#cfc2da; }
.portal-input-wrap input:focus { border-color:var(--portal-purple-light); box-shadow:0 0 0 4px rgba(84,32,183,.1); background:#fff; }
.portal-password-toggle { position:absolute; top:50%; right:10px; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; transform:translateY(-50%); border:0; border-radius:8px; background:transparent; color:#7b7084; cursor:pointer; }
.portal-password-toggle:hover { color:var(--portal-purple); background:#f4eff8; }
.portal-password-toggle svg { width:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.portal-password-toggle .icon-eye-off { display:none; }
.portal-password-toggle.is-visible .icon-eye { display:none; }
.portal-password-toggle.is-visible .icon-eye-off { display:block; }
.portal-field-error { display:block; margin-top:7px; color:#c32350; font-size:12px; }
.portal-submit { width:100%; height:52px; margin-top:8px; display:flex; align-items:center; justify-content:center; gap:10px; border:0; border-radius:11px; background:linear-gradient(110deg,var(--portal-purple),var(--portal-purple-light)); color:#fff; font:700 15px Gilroy,Arial,sans-serif; cursor:pointer; box-shadow:0 12px 25px rgba(53,16,103,.22); transition:transform .18s,box-shadow .18s,opacity .18s; }
.portal-submit:hover { transform:translateY(-1px); box-shadow:0 15px 30px rgba(53,16,103,.27); }
.portal-submit:focus { outline:3px solid rgba(84,32,183,.2); outline-offset:2px; }
.portal-submit:disabled { opacity:.75; cursor:wait; transform:none; }
.portal-submit svg { width:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.portal-submit.is-loading svg { display:none; }
.d4h-access { display:grid; grid-template-columns:42px 1fr 20px; align-items:center; gap:12px; margin-top:25px; padding:13px; border:1px solid #e5dcec; border-radius:12px; background:#fbf9fc; color:var(--portal-ink); text-decoration:none; transition:.2s ease; }
.d4h-access:hover { color:var(--portal-purple); border-color:#cfc0dc; background:#f7f1fa; transform:translateY(-1px); text-decoration:none; }
.d4h-access__icon { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:10px; background:#ede4f5; color:var(--portal-purple); }
.d4h-access svg { width:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.d4h-access strong,.d4h-access small { display:block; }
.d4h-access strong { font-size:13px; }
.d4h-access small { margin-top:2px; color:#8a8092; font-size:11px; }
.d4h-access__arrow { width:18px!important; color:#8a8092; }
.portal-help { display:flex; align-items:flex-start; justify-content:center; gap:8px; margin-top:26px; color:#918899; font-size:11px; line-height:1.5; text-align:center; }
.portal-help svg { flex:0 0 16px; width:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:1050px) { .portal-login-shell{grid-template-columns:minmax(350px,.8fr) minmax(480px,1.2fr)} .portal-story{padding:38px} .portal-access{padding:42px 55px} .portal-benefits{display:grid} }
@media (max-width:820px) { .portal-login-shell{display:block;min-height:100vh;background:linear-gradient(145deg,#f2ebf7,#fff 48%,#fff3f7)} .portal-story{display:none} .portal-access{min-height:100vh;padding:34px 24px;background:transparent} .portal-access__inner{max-width:520px;padding:34px;border:1px solid rgba(221,210,230,.8);border-radius:20px;background:rgba(255,255,255,.92);box-shadow:0 22px 55px rgba(53,16,103,.12)} .portal-brand--mobile{display:inline-flex} }
@media (max-width:520px) { .portal-access{align-items:flex-start;padding:18px 12px} .portal-access__inner{padding:25px 20px;border-radius:17px} .portal-brand--mobile{margin-bottom:22px} .portal-switcher{margin-bottom:28px} .portal-heading h2{font-size:29px} .portal-heading p{margin-bottom:24px} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{scroll-behavior:auto!important;transition:none!important} }