/* Supplied client-login-mockup.zip design. Decorative background only. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("inter-latin.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("manrope-latin.woff2") format("woff2"); }

/* The background is fabricated artwork. No report data is loaded or hidden here. */
:root { color-scheme: dark; --text:#f7f7f5; --muted:#a8adb7; --orange:#ff4a1c; --surface:#171b22; --line:rgba(255,255,255,.12); --ease:cubic-bezier(.22,.8,.22,1); }
* { box-sizing:border-box; }
html { min-width:320px; background:#10141a; }
body { margin:0; color:var(--text); font-family:Manrope,"Avenir Next",sans-serif; font-size:16px; line-height:1.5; }
button,input { font-family:inherit; font-size:16px; line-height:inherit; }
button { cursor:pointer; }
button:focus-visible,a:focus-visible { outline:3px solid #ff865e; outline-offset:4px; }
button,input,a { -webkit-tap-highlight-color:transparent; }
.background { position:fixed; inset:-22px; overflow:hidden; pointer-events:none; user-select:none; }
.dashboard { display:grid; grid-template-columns:238px 1fr; min-width:1160px; height:100%; min-height:830px; filter:blur(15px); opacity:.66;  }
.sidebar { padding:54px 27px; background:#0b1015; border-right:1px solid #ffffff15; }
.ghost-brand { height:24px; width:144px; background:#d5d7db; border-radius:6px; margin:0 0 48px 10px; }
.ghost-client { height:64px; border:1px solid #646a743b; border-radius:16px; background:#262c35; margin-bottom:48px; }
.nav-group { margin:34px 0; }
.nav-label { height:10px; width:114px; margin:0 12px 21px; background:#51565f; border-radius:4px; }
.nav-item { height:17px; width:138px; margin:28px 14px; background:#9298a2; border-radius:6px; opacity:.45; }
.nav-active { height:49px; margin:0; width:100%; border-radius:28px; background:#ff4a1c28; border:1px solid #ff4a1c80; }
.report { padding:55px 44px; background:#11161d; }
.report-top { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #ffffff15; padding-bottom:36px; }
.skeleton { height:12px; width:110px; background:#7a818c; border-radius:5px; }
.date-shape { width:240px; height:38px; background:#282f38; border:1px solid #ffffff30; border-radius:20px; }
.title-shape { width:350px; height:40px; margin:42px 0 16px; border-radius:8px; background:#d8d9dc; }
.subtitle-shape { width:230px; height:12px; background:#737984; border-radius:4px; margin-bottom:38px; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.metric { height:142px; padding:25px; border:1px solid #ffffff25; border-radius:20px; background:#1a2029; }
.metric:first-child { background:#ee4b25; }
.metric .skeleton { height:10px; width:85px; opacity:.55; background:#d9dbe0; }
.metric .value { height:30px; width:108px; margin-top:23px; background:#e2e2e4; border-radius:5px; }
.charts { display:grid; grid-template-columns:1.6fr 1fr; gap:22px; margin-top:24px; }
.chart { min-height:290px; border:1px solid #ffffff23; border-radius:22px; background:#1a2028; padding:25px; overflow:hidden; }
.chart svg { width:100%; height:193px; margin-top:20px; }
.bars { display:flex; align-items:flex-end; gap:15px; height:190px; margin-top:27px; }
.bars i { flex:1; background:#ff6744; border-radius:4px 4px 0 0; opacity:.8; }
.table { display:grid; grid-template-columns:2fr repeat(3,1fr); gap:24px; padding:24px; margin-top:24px; border:1px solid #ffffff23; border-radius:22px; background:#1a2028; }
.table i { display:block; background:#9298a259; border-radius:4px; height:10px; margin:12px 0; width:80%; }
.veil { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 45%,rgba(12,16,22,.22) 5%,rgba(8,11,16,.57) 88%); }
.login-stage { position:relative; display:grid; grid-template-columns:minmax(0,1fr); place-items:center; min-height:100svh; padding:70px 20px; }
.login-wrap { width:min(440px,100%); min-width:0; }
.brand { display:block; width:188px; height:40px; object-fit:contain; filter:invert(1); margin:0 auto 35px; }
.card { border:1px solid rgba(255,255,255,.15); border-radius:26px; background:linear-gradient(145deg,#1a1e25,#13171d); box-shadow:0 30px 100px #0009,0 2px 8px #0004,inset 0 1px 0 #ffffff05; overflow:hidden; }
.panels { display:grid; grid-template-columns:minmax(0,1fr); overflow:hidden; }
.panel { grid-area:1/1; min-width:0; padding:42px 37px 35px; transition:transform 460ms var(--ease),opacity 330ms ease,visibility 460ms; }
.panel h1,.panel h2 { font-family:Inter,sans-serif; font-size:30px; font-weight:600; letter-spacing:-1.1px; line-height:1.16; margin:0 0 12px; }
.intro { font-size:14px; color:var(--muted); margin:0; line-height:1.65; }
.form { margin-top:30px; }
.field-label { display:block; font-size:13px; font-weight:600; margin-bottom:10px; color:#c8cbd1; }
.input { display:block; width:100%; min-width:0; height:56px; border:1px solid #ffffff2b; border-radius:12px; background:#11151b; color:var(--text); padding:0 16px; outline:none; transition:border-color 180ms,box-shadow 180ms; }
.input::placeholder { color:#858c97; opacity:1; }
.input:focus { border-color:#ff704b; box-shadow:0 0 0 3px #ff4a1c20; }
.primary { display:flex; justify-content:center; align-items:center; gap:12px; height:54px; width:100%; padding:0 20px; margin-top:16px; border:1px solid #ff734655; border-radius:12px; background:var(--orange); color:#10141a; font-family:Inter,sans-serif; font-weight:600; font-size:15px; transition:background 160ms,transform 160ms; }
.primary:hover { background:#ff6540; }
.primary:active { transform:translateY(1px); }
.primary svg { width:18px; height:18px; }
.form-foot { color:#969da8; font-size:13px; line-height:1.6; margin:24px 0 0; }
.code-panel { padding-top:22px; padding-bottom:24px; }
.back { display:inline-flex; align-items:center; gap:7px; margin:0 0 21px -3px; padding:4px 3px; min-height:32px; border:0; background:transparent; color:#b8bec8; font-size:13px; }
.back:hover { color:#fff; }
.back svg { width:16px; height:16px; }
.recipient { display:block; color:#d5d9e0; font-weight:500; overflow-wrap:anywhere; }
.code-panel .intro { min-height:46.2px; }
.code-panel .form { margin-top:22px; }
.code { font-family:Inter,sans-serif; font-size:23px; letter-spacing:.45em; text-align:center; padding-left:calc(16px + .45em); font-variant-numeric:tabular-nums; }
.code::placeholder { color:#565e6a; }
.resend-line { display:flex; align-items:center; justify-content:center; gap:5px; font-size:13px; color:#969da8; margin:18px 0 0; flex-wrap:wrap; }
.resend { padding:8px 2px; border:0; background:transparent; color:#d8dce3; font-size:13px; text-decoration:underline; text-underline-offset:4px; }
.resend:hover { color:#ff805b; }
.privacy { display:flex; align-items:center; justify-content:center; gap:7px; font-size:13px; color:#a3a9b2; margin:24px 0 0; }
.privacy svg { width:13px; height:13px; opacity:.8; }
@media(max-width:600px) {
 .dashboard { transform:translateX(-160px); }
 .login-stage { padding:64px 20px; }
 .brand { width:173px; height:36px; margin-bottom:28px; }
 .panel { padding:34px 26px 29px; }
 .panel h1,.panel h2 { font-size:27px; letter-spacing:-.9px; }
 .code-panel { padding-top:18px; padding-bottom:18px; }
 .back { margin-bottom:18px; }
 .card { border-radius:22px; }
 .privacy { margin-top:22px; }
}
@media(max-height:650px) { .login-stage { padding-block:40px 64px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; } }

/* Native navigation keeps the real POST/303 flow and works without scripts. */
.panel { animation:signin-enter 300ms var(--ease) both; }
@keyframes signin-enter { from { opacity:0; transform:translateX(18px); } to { opacity:1; transform:translateX(0); } }
.back,.resend { text-decoration:none; }
.back { min-height:44px; }
.resend { display:inline-flex; min-height:44px; align-items:center; text-decoration:underline; }
.signin-status { padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:#11151b; font-size:13px; line-height:1.6; color:#b8bec8; margin:20px 0 0; overflow-wrap:anywhere; }
.signin-status.failed { border-color:#f3bd6766; color:#f3bd67; }
.signin-expired { margin-bottom:0; }
.account-list { list-style:none; margin:26px 0 0; padding:0; }
.account-list li + li { margin-top:10px; }
.account-link { display:grid; grid-template-columns:38px minmax(0,1fr) 18px; gap:12px; align-items:center; padding:14px; min-height:68px; color:var(--text); border:1px solid #ffffff2b; border-radius:12px; background:#11151b; text-decoration:none; }
.account-link:hover { border-color:#ff704b; background:#20242b; }
.account-avatar { display:grid; place-items:center; height:38px; border-radius:10px; background:#ff4a1c20; color:#ff987e; font-family:Inter,sans-serif; font-weight:600; font-size:13px; }
.account-name { min-width:0; overflow-wrap:anywhere; font-size:14px; }
.account-link svg { width:18px; height:18px; }
.account-foot { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; justify-content:space-between; margin-top:24px; color:var(--muted); font-size:13px; }
.account-foot span { min-width:0; overflow-wrap:anywhere; }
.account-foot form { margin:0; }
.account-foot button { padding:8px 0; min-height:44px; border:0; background:transparent; color:#d8dce3; text-decoration:underline; text-underline-offset:4px; font-size:13px; }
.not-found-title { overflow-wrap:anywhere; }
.return-link { text-decoration:none; margin-top:26px; }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; } }