:root { --navy:#102941; --ink:#1a2d3f; --muted:#6b7a88; --line:#e5ebef; --bg:#f5f7f8; --white:#fff; --blue:#1689cf; --blue-dark:#0874b7; --teal:#25c4b5; --soft-blue:#eaf6fd; --soft-teal:#e7f9f7; --soft-amber:#fff5e5; --purple:#705ae3; --shadow:0 12px 32px rgba(25,47,68,.08); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--bg); font-family:"DM Sans",Arial,sans-serif; font-size:15px; }
button,input,select { font:inherit; }
button { cursor:pointer; }
[hidden] { display:none !important; }
h1,h2,h3,p { margin-top:0; } h1,h2,h3,strong { font-family:"Manrope","DM Sans",sans-serif; } a { color:inherit; }
.login-layout { min-height:100vh; display:grid; grid-template-columns:minmax(420px,1.12fr) minmax(420px,.88fr); }
.login-intro { min-height:100vh; padding:56px clamp(44px,8vw,136px); color:#fff; display:flex; flex-direction:column; background:radial-gradient(circle at 80% 8%,rgba(41,201,184,.27),transparent 28%),linear-gradient(136deg,#102b48 5%,#123d60 60%,#0f5069); overflow:hidden; position:relative; }
.login-intro:after { content:""; width:520px; height:520px; border:1px solid rgba(255,255,255,.08); position:absolute; border-radius:50%; right:-210px; bottom:-215px; box-shadow:0 0 0 56px rgba(255,255,255,.025),0 0 0 112px rgba(255,255,255,.02); }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-family:"Manrope",sans-serif; font-size:22px; font-weight:800; letter-spacing:-1px; width:max-content; }.brand span span { color:var(--blue); }.brand-light { color:#fff; }.brand-light span span { color:#58dfcf; }.brand-mark { display:grid; width:31px;height:31px; place-items:center; border-radius:10px; color:#fff; font-family:"Manrope"; font-size:22px; font-weight:800; background:linear-gradient(145deg,#30d5c4,#168bca); box-shadow:0 4px 13px rgba(0,0,0,.15); }
.intro-copy { max-width:570px; margin:auto 0 50px; position:relative; z-index:1; }.eyebrow { letter-spacing:1.55px; font-size:11px; font-weight:700; color:#a4c6d8; margin-bottom:17px; }.eyebrow.accent { color:#128cca; }.intro-copy h1 { font-size:clamp(41px,4.3vw,66px); line-height:1.1; letter-spacing:-2.7px; margin-bottom:26px; }.intro-copy p:not(.eyebrow) { max-width:500px; color:#d1e0e8; line-height:1.7; font-size:17px; }.intro-points { display:flex; gap:23px; position:relative; z-index:1; color:#d8e7ef; font-size:13px; }.intro-points i { font-style:normal; color:#52dec9; margin-right:6px; }
.login-panel { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:45px; background:#fff; }.login-card { width:min(100%,410px); }.login-card h2 { font-size:33px; letter-spacing:-1.3px; margin:0 0 8px; }.muted { color:var(--muted); line-height:1.55; }.button { border:0; border-radius:9px; font-weight:700; min-height:48px; padding:0 18px; transition:transform .18s,box-shadow .18s,background .18s; }.button:hover { transform:translateY(-1px); }.button-primary { color:#fff; background:linear-gradient(130deg,#168dca,#0d72b2); box-shadow:0 7px 16px rgba(13,116,181,.18); }.button-secondary { color:#216189; background:#edf7fc; }.button-ghost { color:#526575; background:#fff; border:1px solid #d7e2e8; }.button-full { width:100%; margin-top:28px; display:flex; align-items:center; justify-content:center; gap:10px; }.microsoft-mark { display:grid; grid-template-columns:repeat(2,8px); grid-template-rows:repeat(2,8px); gap:2px; }.microsoft-mark b:nth-child(1){background:#f35325}.microsoft-mark b:nth-child(2){background:#81bc06}.microsoft-mark b:nth-child(3){background:#05a6f0}.microsoft-mark b:nth-child(4){background:#ffba08}.divider { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center; color:#96a4ae; margin:24px 0; font-size:12px; }.divider:before,.divider:after { content:""; height:1px; background:#e5ebef; }.field-label { display:block; font-weight:600; font-size:13px; margin-bottom:8px; }input,select { width:100%; border:1px solid #d9e2e7; border-radius:8px; outline:none; color:var(--ink); background:#fff; min-height:46px; padding:0 13px; transition:border .2s,box-shadow .2s; }input:focus,select:focus { border-color:#39a9df; box-shadow:0 0 0 3px rgba(40,155,213,.12); }.login-card .button-secondary { margin-top:14px; }.login-help { color:#7b8993; margin-top:26px; font-size:13px; text-align:center; }.login-help a { color:#167fbd; font-weight:700; text-decoration:none; }.security-note { margin-top:42px; font-size:12px; color:#87959d; }.security-note span { color:#1ba898; margin-right:5px; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:252px 1fr; }.sidebar { min-height:100vh; position:fixed; width:252px; display:flex; flex-direction:column; padding:27px 14px 18px; background:#fff; border-right:1px solid var(--line); }.tenant-label { margin:43px 11px 7px; color:#a1adb6; font-size:10px; letter-spacing:1.15px; font-weight:700; }.tenant-switcher { border:0; border-radius:7px; color:#385063; display:flex; justify-content:space-between; align-items:center; width:100%; padding:10px 11px; font-size:13px; font-weight:700; background:#f2f7f9; }.tenant-switcher span { color:#7f929e; font-size:18px; }.primary-nav { margin-top:23px; }.nav-item { display:flex; width:100%; gap:12px; align-items:center; color:#637481; border:0; background:transparent; padding:11px 12px; margin:2px 0; border-radius:7px; text-align:left; font-size:14px; font-weight:600; }.nav-item>span { width:17px; text-align:center; font-size:17px; color:#76909e; }.nav-item:hover { background:#f1f7fa; color:#176eaa; }.nav-item.active { color:#137dbd; background:#e9f5fb; }.nav-item.active>span { color:#168acb; }.nav-item b { margin-left:auto; min-width:19px; border-radius:99px; padding:2px 6px; font-size:10px; color:#fff; background:#e18458; }.primary-nav hr { border:0; border-top:1px solid #ecf0f2; margin:17px 8px; }.sidebar-bottom { margin-top:auto; }.profile-mini { display:flex; align-items:center; gap:9px; padding:16px 6px 0; margin-top:10px; border-top:1px solid var(--line); }.avatar,.activity-avatar { display:grid; place-items:center; flex:0 0 auto; color:#377090; background:#d9edf7; font-size:11px; font-weight:700; width:31px;height:31px;border-radius:50%; }.profile-mini strong,.profile-mini small { display:block; }.profile-mini strong { font-size:11px; }.profile-mini small { color:#8d9ca6; font-size:10px; margin-top:2px; }.profile-mini button { margin-left:auto; border:0; color:#8195a2; background:transparent; font-size:17px; }
.workspace { grid-column:2; min-width:0; }.topbar { height:69px; display:flex; align-items:center; justify-content:space-between; padding:0 42px; border-bottom:1px solid var(--line); background:#fff; }.breadcrumb { color:#8796a1; font-size:13px; }.topbar-actions { display:flex; align-items:center; gap:15px; }.icon-button,.help-button { position:relative; display:grid; place-items:center; border:0; color:#617583; background:transparent; font-size:20px; }.icon-button i { position:absolute; top:3px; right:-1px; width:6px;height:6px;border-radius:50%;background:#e78560; }.help-button { width:27px; height:27px; border-radius:50%; color:#5c7788; background:#eaf2f5; font-weight:700; font-size:14px; }.content { max-width:1280px; margin:0 auto; padding:49px clamp(26px,4vw,62px) 70px; }.page-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:29px; }.page-heading .eyebrow { margin-bottom:8px; }.page-heading h1 { margin-bottom:7px; font-size:31px; line-height:1.2; letter-spacing:-1.4px; }.quick-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.quick-card { position:relative; display:flex; align-items:center; gap:13px; padding:17px; text-align:left; border:1px solid #e2e9ed; border-radius:11px; background:#fff; transition:box-shadow .2s,border .2s,transform .2s; }.quick-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); border-color:#b7dcea; }.quick-card.highlighted { border-color:#9fd6ee; background:linear-gradient(120deg,#effaff,#fff); }.quick-icon { display:grid; place-items:center; width:39px;height:39px; border-radius:9px; background:#dff3fd; color:#1188ca; font-size:25px; font-weight:400; }.quick-icon.amber { background:#fff0dd;color:#d68540; }.quick-icon.purple { background:#f0edff;color:#6e5bcd; }.quick-card strong,.quick-card small { display:block; }.quick-card strong { font-size:13px; margin-bottom:3px; }.quick-card small { color:#7d8c96; font-size:11px; line-height:1.35; }.quick-card em { margin-left:auto; color:#9aa9b2; font-style:normal; font-size:18px; }.summary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:35px 0; }.summary-card { display:flex; gap:15px; align-items:center; padding:20px; background:#fff; border:1px solid #e5ebef; border-radius:10px; }.summary-icon { display:grid; place-items:center; width:41px;height:41px;border-radius:9px;font-size:21px;font-weight:700; }.summary-icon.blue { background:#e4f4fc;color:#148ccc; }.summary-icon.orange { background:#fff1df;color:#d88746; }.summary-icon.green { background:#e1f7ef;color:#25a47e; }.summary-card small,.summary-card strong,.summary-card a { display:block; }.summary-card small { color:#7d8b95; font-size:11px; }.summary-card strong { margin:1px 0 3px; font-size:25px; letter-spacing:-1px; }.summary-card a { color:#2685bd; text-decoration:none; font-size:11px; font-weight:700; }.activity-panel { border:1px solid #e2e8ec; border-radius:11px; background:#fff; overflow:hidden; }.section-title { display:flex; align-items:center; justify-content:space-between; padding:20px 23px; border-bottom:1px solid #edf1f3; }.section-title h2 { margin:0; font-size:16px; letter-spacing:-.45px; }.section-title button,.back-row button { border:0; background:transparent; color:#1684c0; font-size:12px; font-weight:700; }.activity-row { display:grid; grid-template-columns:auto 1fr 120px 116px; gap:12px; align-items:center; padding:15px 23px; border-bottom:1px solid #f0f2f3; }.activity-row:last-child { border-bottom:0; }.activity-avatar.amber-bg { background:#ffecd8;color:#b86e30; }.activity-row strong,.activity-row small { display:block; }.activity-row strong { font-size:12px; }.activity-row small { margin-top:4px; color:#7b8a95; font-size:11px; }.activity-row time { color:#84939d; font-size:11px; }.status { justify-self:start; border-radius:20px; padding:5px 9px; font-size:10px; font-weight:700; }.status.completed { color:#198867;background:#e4f8f0; }.status.pending { color:#a56927;background:#fff1df; }
.back-row { margin-bottom:22px; }.user-heading { margin-bottom:24px; }.step-badge { color:#147db8; background:#e8f5fb; border-radius:99px; padding:8px 13px; font-size:11px; font-weight:700; }.onboarding-layout { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:22px; align-items:start; }.form-card { overflow:hidden; border:1px solid #e0e8ec; border-radius:11px; background:#fff; }.form-section { padding:26px 30px 29px; border-bottom:1px solid #e9eef0; }.form-section>div:first-child { position:relative; padding-left:38px; margin-bottom:22px; }.form-section h2 { margin:0 0 3px; font-size:17px; letter-spacing:-.5px; }.form-section p { margin:0; color:#82919b; font-size:12px; }.form-number { position:absolute; left:0; top:0; display:grid; place-items:center; color:#1586c2; background:#e8f5fb; width:25px;height:25px;border-radius:50%;font-size:12px;font-weight:700; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.form-grid label { color:#526674; font-size:12px; font-weight:700; }.form-grid input,.form-grid select { margin-top:7px; font-weight:500; font-size:13px; }.full-width { grid-column:1/-1; }.profile-options { display:grid; gap:9px; }.profile-option { display:flex; align-items:center; gap:11px; padding:12px 14px; border:1px solid #dce5e9; border-radius:8px; cursor:pointer; }.profile-option.selected { border-color:#67bce3; background:#f3fbfe; }.profile-option input { position:absolute; opacity:0; pointer-events:none; }.radio-dot { width:16px;height:16px;border:1.5px solid #aebfc9;border-radius:50%; }.profile-option.selected .radio-dot { border:5px solid #168dca; }.profile-option strong,.profile-option small { display:block; }.profile-option strong { font-size:12px; }.profile-option small { color:#7e8c96; font-size:11px; margin-top:3px; }.form-actions { display:flex; justify-content:space-between; padding:19px 30px; background:#f9fbfc; }.form-actions .button-primary span { margin-left:10px; font-size:17px; }.info-card { padding:23px; color:#577083; border:1px solid #d9e8ee; border-radius:11px; background:#f0fafc; }.info-icon { display:grid; place-items:center; width:23px;height:23px;border-radius:50%; color:#1686c3;background:#d3eff9;font-family:serif;font-weight:700; }.info-card h3 { margin:14px 0 13px; color:#27475a; font-size:14px; }.info-card ol { padding-left:18px; margin:0; }.info-card li { margin-bottom:12px; padding-left:3px; font-size:12px; line-height:1.55; }.info-card hr { border:0;border-top:1px solid #d5e8ee;margin:19px 0; }.info-card p { margin:0; font-size:11px; line-height:1.6; }.info-card strong { color:#3b5b6e; font-size:11px; }.toast { position:fixed; z-index:3; display:flex; align-items:flex-start; gap:10px; right:25px; bottom:24px; min-width:330px; padding:15px; border:1px solid #cde9de; border-radius:10px; color:#2c6856; background:#fff; box-shadow:0 15px 36px rgba(25,47,68,.18); }.toast>span { display:grid; place-items:center; flex:0 0 auto; width:23px;height:23px;border-radius:50%;color:#fff;background:#31ad84;font-size:12px; }.toast p { margin:0; }.toast strong,.toast small { display:block; }.toast strong { font-size:12px; }.toast small { margin-top:3px; color:#71838a; font-size:11px; }.toast button { margin-left:auto; border:0; color:#91a0a8; background:transparent; font-size:19px; line-height:16px; }
@media (max-width:1000px) { .login-layout{grid-template-columns:1fr}.login-intro{min-height:330px;padding:38px 8vw}.intro-copy{margin:50px 0 22px}.intro-copy h1{font-size:40px}.login-panel{min-height:570px}.app-shell{grid-template-columns:70px 1fr}.sidebar{width:70px;padding:20px 8px}.sidebar .brand>span:last-child,.tenant-label,.tenant-switcher,.nav-item:not(.profile-mini *){font-size:0}.sidebar .brand{margin:auto}.sidebar .brand-mark{font-size:22px}.tenant-switcher{padding:10px 0;height:38px}.tenant-switcher span{display:none}.nav-item{justify-content:center;padding:11px}.nav-item>span{font-size:18px}.nav-item b{display:none}.profile-mini>span:not(.avatar),.profile-mini button{display:none}.profile-mini{justify-content:center;padding:16px 0 0}.workspace{grid-column:2}.onboarding-layout{grid-template-columns:1fr}.info-card{display:none} }
@media (max-width:680px) { .login-intro{min-height:290px}.intro-points{gap:10px;flex-wrap:wrap}.login-panel{padding:28px}.topbar{padding:0 21px}.content{padding:32px 19px}.quick-actions,.summary-grid{grid-template-columns:1fr}.activity-row{grid-template-columns:auto 1fr}.activity-row time,.activity-row .status{display:none}.page-heading h1{font-size:25px}.form-section{padding:22px 18px}.form-grid{grid-template-columns:1fr}.form-actions{padding:15px 18px;gap:9px}.form-actions .button{padding:0 11px;font-size:12px}.step-badge{display:none}.toast{right:13px;bottom:13px;left:13px;min-width:0}.sidebar{display:none}.app-shell{display:block}.workspace{width:100%}.brand{font-size:20px} }