:root { --ink:#102033; --muted:#5b6b7d; --line:#d9e3ef; --paper:#fff; --soft:#eef6ff; --blue:#1769e0; --blue-dark:#0d3f91; --teal:#15a3a3; --shadow:0 20px 55px rgba(16,32,51,.14); }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; color:var(--ink); background:#f7fbff; font-family:Inter,Arial,sans-serif; } button,input { font:inherit; }
.auth-page { background:radial-gradient(circle at 18% 20%,rgba(21,163,163,.16),transparent 29%),linear-gradient(135deg,#f8fbff,#eaf4ff 55%,#fdf8eb); }.auth-wrap { display:grid; place-items:center; min-height:100vh; padding:32px 16px; }.auth-card { width:min(100%,600px); padding:42px; border:1px solid rgba(23,105,224,.16); border-radius:24px; background:rgba(255,255,255,.92); box-shadow:var(--shadow); }.auth-intro { text-align:center; }.brand { display:inline-flex; align-items:center; gap:9px; color:var(--blue-dark); font-size:1.35rem; font-weight:800; text-decoration:none; }.brand > span:last-child > span:first-child { color:#e35d7a; }.brand img { display:block; width:38px; height:46px; }.brand-mark { display:grid; place-items:center; width:34px; height:40px; border-radius:12px 12px 16px 16px; color:#fff; background:linear-gradient(135deg,var(--blue),var(--teal)); font-size:1rem; }.eyebrow { margin:32px 0 10px; color:var(--teal); font-size:.76rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } h1 { margin:0; color:var(--ink); font-size:2.25rem; line-height:1.02; letter-spacing:-.055em; white-space:nowrap; }.helper { margin:18px 0 26px; color:var(--muted); line-height:1.6; }.form-grid { display:grid; gap:17px; }.form-grid label { display:grid; gap:8px; color:var(--ink); font-size:.87rem; font-weight:700; }.form-grid input { width:100%; min-height:50px; padding:0 14px; border:1px solid var(--line); border-radius:10px; outline:none; background:#fff; }.form-grid input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(23,105,224,.14); }.password-field { position:relative; }.password-field input { padding-right:65px; }.password-toggle { position:absolute; top:50%; right:8px; transform:translateY(-50%); border:0; color:var(--blue-dark); background:transparent; font-size:.8rem; font-weight:800; cursor:pointer; }.button,.logout-button { min-height:50px; border:1px solid transparent; border-radius:999px; padding:0 20px; font-weight:800; cursor:pointer; }.primary { color:#fff; background:var(--blue); box-shadow:0 16px 30px rgba(23,105,224,.25); }.form-message { min-height:1.3em; margin:18px 0 0; color:#b42318; font-size:.86rem; font-weight:700; }.return-link { margin:22px 0 0; text-align:center; font-size:.88rem; font-weight:700; }.return-link a { color:var(--blue-dark); }.pin-input { font-size:1.25rem; font-weight:800; letter-spacing:.32em; text-align:center; text-transform:uppercase; }.portal-page { background:#f4f8fc; }.portal-topbar { display:flex; align-items:center; justify-content:space-between; min-height:84px; padding:0 clamp(16px,4vw,56px); border-bottom:1px solid var(--line); background:rgba(255,255,255,.92); }.portal-identity { display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; }.portal-identity img { display:block; width:38px; height:46px; }.portal-identity strong,.portal-identity small { display:block; }.portal-identity strong { font-size:.94rem; }.portal-identity small { margin-top:3px; color:var(--muted); font-size:.76rem; font-weight:700; }.logout-button { min-height:44px; color:var(--blue-dark); border-color:rgba(23,105,224,.16); background:var(--soft); }.portal-main { width:min(1120px,calc(100% - 32px)); margin:0 auto; padding:32px 0 68px; }.portal-intro { max-width:650px; }.portal-intro .eyebrow { margin-top:0; }.portal-intro p:last-child { margin:18px 0 0; color:var(--muted); font-size:1.05rem; line-height:1.6; }.service-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:36px; }.service-card { display:flex; flex-direction:column; min-height:226px; padding:22px; border:1px solid var(--line); border-radius:16px; color:var(--ink); background:#fff; text-decoration:none; transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease; }.service-card:hover,.service-card:focus-visible { border-color:rgba(23,105,224,.45); transform:translateY(-4px); box-shadow:0 16px 34px rgba(16,32,51,.1); }.card-number { color:var(--teal); font-size:.8rem; font-weight:800; }.service-card h2 { margin:20px 0 0; color:var(--blue-dark); font-size:1.15rem; }.service-card p { margin:12px 0; color:var(--muted); font-size:.9rem; line-height:1.55; }.card-link { margin-top:auto; color:var(--blue); font-size:.85rem; font-weight:800; }.workspace { max-width:760px; }.workspace h1 { margin-top:12px; }.workspace .panel { margin-top:28px; padding:24px; border:1px solid var(--line); border-radius:16px; background:#fff; color:var(--muted); line-height:1.6; }.back-link { color:var(--blue-dark); font-size:.9rem; font-weight:800; text-decoration:none; }
@media (max-width:760px) { .auth-card { padding:30px 24px; }.auth-card h1 { font-size:clamp(1.9rem,8vw,2.25rem); white-space:normal; }.portal-topbar { min-height:74px; }.account-email { display:none; }.portal-main { padding:46px 0; }.service-grid { grid-template-columns:1fr; } }