.workspace { display:flex; min-height:100dvh; }
.sidebar { width:246px; flex-shrink:0; background:white; border-right:1px solid var(--line); padding:34px 23px 20px; display:flex; flex-direction:column; position:fixed; inset:0 auto 0 0; z-index:20; }
.sidebar .brand { padding-left:8px; }
.sidebar-caption { font-size:9px; color:#99a2b4; font-weight:700; letter-spacing:1.7px; margin:57px 14px 17px; }
.sidebar nav { display:grid; gap:7px; }
.sidebar nav a { display:flex; align-items:center; gap:12px; min-height:47px; border-radius:10px; color:#7a8498; padding:12px 14px; font-size:12px; font-weight:550; }
.sidebar nav a.active { color:var(--blue); background:#edf2ff; }
.sidebar nav a:hover { background:#f4f6fc; }
.sidebar nav a svg { width:18px; height:18px; }
.nav-badge { font-size:10px; margin-left:auto; padding:1px 6px; background:var(--blue); color:white; border-radius:6px; }
.sidebar-bottom { margin-top:auto; padding-top:40px; }
.mini-card { background:#f7f9fe; border:1px solid #edf0f8; border-radius:13px; padding:17px; }
.mini-card > svg { color:var(--blue); margin-bottom:11px; }
.mini-card strong { display:block; font-size:12px; }
.mini-card p { font-size:11px; line-height:1.8; margin:6px 0; }
.mini-card .text-button { width:100%; font-size:11px; }
.profile { display:flex; align-items:center; gap:10px; border-top:1px solid var(--line); padding-top:22px; margin-top:27px; }
.profile strong { display:block; font-size:11px; }
.profile .account-phone { display:block; font-size:10px; color:var(--muted); margin-top:3px; }
.profile .online-dot { margin-left:auto; width:5px; height:5px; }
.avatar { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:#edf1ff; color:#5f79ba; font-size:10px; font-weight:650; flex-shrink:0; }
.avatar svg { width:17px; height:17px; }
.avatar.small { width:32px; height:32px; }
.main-wrap { margin-left:246px; flex:1; min-width:0; }
.topbar { background:#ffffffb5; height:80px; border-bottom:1px solid var(--line); padding:0 42px; display:flex; align-items:center; justify-content:space-between; }
.breadcrumb { font-size:11px; color:#9aa3b4; }
.breadcrumb span { margin:0 13px; color:#cbd1dd; }
.breadcrumb strong { color:#606c84; font-weight:500; }
.topbar-right { display:flex; gap:17px; align-items:center; }
.mobile-brand { display:none!important; }
main#main { max-width:1450px; margin:auto; padding:28px 42px 0; }
.demo-banner { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 15px; margin-bottom:30px; background:#edf2ff; color:#63749d; border:1px solid #e3eafa; border-radius:10px; font-size:11px; }
.demo-banner strong { color:#3f578c; font-weight:600; }
.demo-banner .text-button { font-size:11px; white-space:nowrap; }
.page-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:29px; }
.page-heading p { margin:0; font-size:12px; }
.date-label { white-space:nowrap; font-size:11px; color:#99a2b4; text-transform:capitalize; }
.dashboard-grid { display:grid; grid-template-columns:1.85fr 1fr; gap:22px; }
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:22px 0 28px; }
.bottom-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:25px 0 40px; }
.setup-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(240px,1fr); gap:25px; }
.setup-aside { display:grid; gap:20px; align-content:start; }
.setup-aside .card { padding:24px; }
.setup-aside .soft-icon { margin-bottom:18px; }
.setup-aside p { font-size:12px; }
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:23px; }
.settings-card { padding:28px; }
.settings-card h2 { margin-top:20px; }
.settings-card p { font-size:12px; max-width:500px; }
.settings-card .settings-phone { display:block; font-size:24px; margin:7px 0 12px; }
.settings-card form { max-width:350px; }
.data-card { grid-column:1/-1; }
footer { display:flex; align-items:center; border-top:1px solid #e4e9f2; margin-top:38px; padding:20px 0 27px; font-weight:750; font-size:14px; color:#8994aa; letter-spacing:-.5px; }
footer > span:last-child { margin-left:auto; font-size:10px; font-weight:400; letter-spacing:0; color:#9aa3b5; }
.auth-screen { min-height:100dvh; display:grid; grid-template-columns:1fr 1fr; background:white; }
.auth-story { background:#eef2ff; padding:45px 10%; display:flex; flex-direction:column; overflow:hidden; }
.auth-pitch { max-width:500px; margin:auto 0; padding:70px 0 25px; }
.auth-pitch .eyebrow { color:#8798c8; }
.auth-pitch h1 { font-size:clamp(42px,4.8vw,74px); letter-spacing:-3.5px; line-height:1.07; margin:22px 0; }
.auth-pitch h1 span { color:var(--blue); }
.auth-pitch > p { font-size:16px; line-height:1.8; color:#7585aa; }
.auth-footnote { color:#95a2c0; font-size:11px; }
.auth-form-wrap { padding:50px; display:flex; align-items:center; justify-content:center; }
.auth-form-card { width:100%; max-width:360px; }
.auth-form-card h2 { font-size:28px; letter-spacing:-1px; margin:23px 0 14px; }
.auth-form-card > .pill { text-transform:uppercase; font-size:9px; letter-spacing:1.5px; }
.auth-form-card form { margin-top:32px; }
.auth-form-card .muted { font-size:13px; line-height:1.9; }
.auth-form-card .info-box { margin-top:23px; }
.auth-trust { border-top:1px solid var(--line); display:flex; align-items:center; gap:10px; color:#9aa5bb; font-size:10px; margin-top:30px; padding-top:22px; }
.auth-trust svg { width:17px; height:17px; }
.signal-art { position:relative; width:260px; height:205px; margin-top:30px; }
.signal-ring { width:190px; height:190px; border-radius:50%; border:1px solid #dbe3ff; display:grid; place-items:center; box-shadow:0 0 0 24px #e8edfc,0 0 0 25px #dfe6fc; }
.signal-ring-inner { display:grid; place-items:center; width:110px; height:110px; background:white; border-radius:30px; color:var(--blue); box-shadow:0 12px 25px #2447a713; transform:rotate(-10deg); }
.signal-ring-inner svg { width:42px; height:42px; stroke-width:1.6; }
.signal-label { position:absolute; bottom:30px; left:85px; display:flex; align-items:center; white-space:nowrap; gap:8px; padding:13px 17px; background:white; color:#3f547f; border-radius:12px; box-shadow:0 8px 30px #2447a713; font-size:11px; transform:rotate(3deg); }
.signal-label svg { color:#37a88b; width:16px; height:16px; }
.otp-preview { display:block; letter-spacing:8px; font-size:29px; color:var(--blue); margin:6px 0; }
.otp-input { font-size:25px; letter-spacing:9px; text-align:center; }
.resend { margin-top:15px; }