/* Concept 4, Workspace. Layout: icon rail + soft rounded workspace; section tabs as dark pills; tiles without borders. */
:root{
 --font:Manrope,system-ui,sans-serif; --display:var(--font); --h1w:650; --h1s:38px; --h3s:17px; --h3w:700;
 --ink:#111827; --ink2:#374151; --mut:#6B7280; --faint:#A1A7B1; --line:#E3E6EB; --line2:#EEF0F3;
 --bg:#E9ECF0; --soft:#F3F4F6; --soft2:#E9ECF0;
 --acc:#1380BA; --acc2:#2494D0; --aqua:#18E3D0; --aquaS:#DDF8F5; --aquaInk:#0B776E; --pur:#7C3388; --purS:#F2E8F4; --accS:#E6F1F9; --accInk:#0F6A9C;
 --pri:#111827; --priSh:0 8px 18px -10px rgba(17,24,39,.7); --priShH:0 10px 24px -10px rgba(36,148,208,.6);
 --on:#111827; --onInk:#fff;
 --r:28px; --rs:16px; --card:#fff; --cardBd:0; --cardSh:0 1px 2px rgba(17,24,39,.03); --cardShH:0 18px 40px -24px rgba(17,24,39,.35);
 --grad:radial-gradient(320px 240px at 100% 0%,rgba(24,227,208,.42),transparent 70%),radial-gradient(360px 260px at 0% 100%,rgba(124,51,136,.55),transparent 70%),linear-gradient(160deg,#1380BA,#111827 70%);
 --track:repeating-linear-gradient(-45deg,rgba(255,255,255,.22) 0 4px,transparent 4px 9px),linear-gradient(90deg,#2494D0,#18E3D0);
 --stripe:repeating-linear-gradient(-45deg,rgba(255,255,255,.25) 0 4px,transparent 4px 9px),linear-gradient(90deg,#1380BA,#7C3388);
 --btnBg:#fff; --btnBd:#D9DCE1; --btnBgH:#F3F4F6; --segBg:#fff; --segBd:#D9DCE1; --segOn:#111827; --segOnInk:#fff;
 --inpBg:#fff; --inpBd:#DDE0E5; --inpR:14px; --thBg:#F3F4F6; --card2:#fff; --meBg:#EEF7FC;
 --footBg:#111827; --toastBg:#111827; --stickyTop:84px; --kpiS:34px;
}
body{background:var(--bg);font-weight:500}
.aurora{--auB:#EEF3F8;--auO:.5}
body.auth .aurora{--auO:.5}
body.authed #root{display:flex;gap:18px;padding:18px max(18px,env(safe-area-inset-right,0px)) 18px max(18px,env(safe-area-inset-left,0px));height:100vh;height:100dvh}
.rail{position:relative;width:76px;flex:none;border-radius:28px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 30px 60px -36px rgba(17,24,39,.35);display:flex;flex-direction:column;padding:16px 15px;gap:8px;transition:width .38s var(--ease)}
.rail.open{width:252px}
.rail .rh{height:46px;margin-bottom:12px;display:flex;align-items:center}
.rail .logo{display:block;position:relative;height:44px;width:100%}
.rail .logo img{position:absolute;left:0;top:0;height:44px;transition:opacity .25s}
.rail .lm{width:44px}.rail .lf{height:38px!important;top:3px!important;opacity:0}
.rail.open .lm{opacity:0}.rail.open .lf{opacity:1;transition-delay:.12s}
.rtg{position:absolute;right:-13px;top:64px;width:26px;height:26px;border-radius:50%;background:#111827;color:#fff;display:grid;place-items:center;z-index:5;box-shadow:0 6px 14px -6px rgba(17,24,39,.6);transition:transform .38s var(--ease),background .2s}
.rtg:hover{background:#1380BA}.rtg svg{width:14px;height:14px;stroke-width:2.4}.rail.open .rtg{transform:rotate(180deg)}
.rl{display:flex;flex-direction:column;gap:8px;overflow-y:auto;overflow-x:hidden;margin:0 -15px;padding:2px 15px;scrollbar-width:none}.rl::-webkit-scrollbar{display:none}
.rail h6{display:none;font-size:11px;font-weight:600;color:#9CA3AF;text-transform:uppercase;letter-spacing:.06em;margin:10px 6px 0;white-space:nowrap}
.rail a{height:46px;min-height:46px;border-radius:999px;display:flex;align-items:center;gap:12px;padding:0 13px;color:#4B5563;border:1px solid var(--line);transition:background .2s,color .2s,border-color .2s,width .38s var(--ease);cursor:pointer;white-space:nowrap;overflow:hidden}
.rail a svg{width:18px;height:18px}
.rail a span{opacity:0;font-size:13.5px;font-weight:600;transition:opacity .2s}
.rail a:hover{background:#F3F4F6;color:var(--ink)}
.rail:not(.open) a.xo{display:none}
.rail:not(.open) a.cov,.rail.open a.on{background:#111827;color:#fff;border-color:#111827;box-shadow:0 8px 18px -8px rgba(17,24,39,.6)}
.rail.open h6{display:block}
.rail.open a{border-color:transparent;height:40px;min-height:40px}
.rail.open a span{opacity:1;transition-delay:.14s}
.rail .sp{flex:1}.rail .rb{display:flex;flex-direction:column;gap:8px}
.ws{flex:1;min-width:0;background:rgba(246,247,249,.8);-webkit-backdrop-filter:blur(28px) saturate(140%);backdrop-filter:blur(28px) saturate(140%);box-shadow:0 30px 60px -36px rgba(17,24,39,.35);border-radius:32px;padding:22px 28px;overflow-y:auto;overflow-x:hidden}
.tb{display:flex;align-items:center;gap:16px;justify-content:space-between;position:sticky;top:-22px;z-index:30;margin:-22px -28px 10px;padding:20px 28px 12px;background:linear-gradient(rgba(246,247,249,.97) 78%,rgba(246,247,249,0))}
#tabs{min-width:0;flex:1}
.pl{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 24px 2px 2px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}.pl::-webkit-scrollbar{display:none}
.pl a{flex:none;height:42px;padding:0 18px;border-radius:999px;border:1px solid #D9DCE1;display:flex;align-items:center;font-size:13.5px;font-weight:650;color:#374151;background:#fff;transition:all .2s;cursor:pointer}
.pl a:hover{border-color:#9CA3AF}.pl a.on{background:#111827;color:#fff;border-color:#111827}
.tbr{display:flex;align-items:center;gap:10px;flex:none}
.who{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;text-align:left;padding:3px 8px 3px 3px;border-radius:999px}.who:hover{background:#fff}
.who small{display:block;font-size:12px;color:var(--mut);font-weight:500}
.ib{border-color:#D9DCE1}
.ph .eyebrow{font-size:15px;color:#4B5563;font-weight:500}.ph h1{letter-spacing:-.03em}
.ph h1 em{background:linear-gradient(90deg,#2494D0,#7C3388);-webkit-background-clip:text;background-clip:text;color:transparent}
.card.hero{box-shadow:0 24px 44px -26px rgba(17,24,39,.6)}
.kpi .kic{border-radius:50%;width:38px;height:38px;border:1px solid var(--line);background:#fff}
.card.hero .kic{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.12);color:#fff}
.kpi .val small{font-size:.5em;margin-left:2px}
.ch .ib,.ch .ib.sm{border-radius:50%}
.tabs button{height:40px}
.sec{border-radius:20px}.sec.on{background:#111827;border-color:#111827;box-shadow:none}.sec.on b{color:#fff}.sec.on span{color:rgba(255,255,255,.65)}.sec.on .lnk{color:#18E3D0}
.sec.on .tg{background:linear-gradient(135deg,#18E3D0,#2494D0);border:0;color:#111827}
.stepper{gap:8px}.stepper a{border:1px solid #D9DCE1;background:#fff;padding:5px 14px 5px 5px}.stepper .ln{display:none}
.stepper a.on{background:#111827;color:#fff;border-color:#111827}.stepper a.on span{background:linear-gradient(135deg,#2494D0,#7C3388);border:0}
.stepper a.done span{background:linear-gradient(135deg,#18E3D0,#2494D0);border:0;color:#111827}
.rn{background:#111827;box-shadow:inset 0 0 0 2px rgba(24,227,208,.5)}
.mini-k{background:#F3F4F6;border-radius:18px}.hero .mini-k{background:rgba(255,255,255,.1)}
.kic2{border-radius:50%;background:#fff;border:1px solid var(--line)}
.trust{background:linear-gradient(160deg,rgba(24,227,208,.14),rgba(36,148,208,.1) 55%,rgba(124,51,136,.12))}
.dbar .d i{flex:1 1 0;max-width:14px;height:auto;aspect-ratio:1;border-radius:50%}.dbar .d{gap:5px;align-items:center}
.dbar .d i.f{background:radial-gradient(circle at 35% 30%,#2494D0,#1380BA)}
.dbar:nth-child(2n) .d i.f{background:radial-gradient(circle at 35% 30%,#18E3D0,#2494D0)}
.tbar .t{height:12px}
.stkr .b{border-radius:999px;height:28px}
.prog{height:10px}
.note{border-radius:18px}
.empty{border-radius:22px;background:#fff;border-color:#DDE0E5}
.foot{border-radius:28px;background:radial-gradient(420px 260px at 100% 0%,rgba(24,227,208,.22),transparent 70%),radial-gradient(420px 260px at 0% 100%,rgba(124,51,136,.35),transparent 70%),#111827}
.drop{border-radius:24px;background:#fff}
.btn.pri{background:linear-gradient(#111827,#111827) padding-box,linear-gradient(90deg,#18E3D0,#2494D0,#7C3388) border-box;border:1.5px solid transparent}
.btn.pri:hover{filter:none;background:linear-gradient(135deg,#1380BA,#7C3388) padding-box,linear-gradient(90deg,#18E3D0,#2494D0,#7C3388) border-box}
.auth-art{background:radial-gradient(420px 320px at 90% 8%,rgba(24,227,208,.5),transparent 70%),radial-gradient(520px 420px at 0% 100%,rgba(124,51,136,.7),transparent 70%),linear-gradient(160deg,#1380BA,#111827 75%)}
.auth-art:before{display:none}
.auth-form{background:#F6F7F9;border-radius:32px}
.aw h2 em{background:linear-gradient(90deg,#18E3D0,#2494D0 60%,#C9A2D0);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-wrap{padding:18px;gap:18px}
@media (max-width:900px){body.authed #root{padding:0;height:auto;display:block}.rail{display:none}.ws{border-radius:0;padding:16px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px));overflow:visible}.tb{position:sticky;top:env(safe-area-inset-top,0px);margin:-16px -16px 10px;padding:12px 16px}.burger{display:grid}.who span{display:none}.tbr .ib:not(.burger){display:none}}

/* ---------- sign in (concept 4 layout) ---------- */
.s4wrap{min-height:100vh;padding:24px max(24px,env(safe-area-inset-right,0px)) 24px max(24px,env(safe-area-inset-left,0px));display:flex;flex-direction:column}
.s4top{display:flex;justify-content:space-between;align-items:center;gap:12px;height:56px;padding:0 8px}.s4top img{height:40px}.s4sup{border:1px solid rgba(255,255,255,.9)}
.s4sup{background:rgba(255,255,255,.95);padding:10px 16px;border-radius:999px;font-size:13.5px;font-weight:600;display:flex;gap:8px;align-items:center;color:#111827;box-shadow:0 10px 24px -14px rgba(17,24,39,.5)}.s4sup svg{width:16px;height:16px;opacity:1}
.s4panel{flex:1;margin-top:20px;background:rgba(246,247,249,.82);-webkit-backdrop-filter:blur(26px) saturate(140%);backdrop-filter:blur(26px) saturate(140%);border:1px solid rgba(255,255,255,.9);border-radius:36px;display:grid;grid-template-columns:1fr 1fr;padding:28px;gap:28px;box-shadow:0 50px 90px -40px rgba(17,24,39,.55);animation:pgIn .6s var(--ease) both}
.s4form{padding:48px 6% 20px;display:flex;flex-direction:column}
.s4form .fbox{width:min(510px,100%)}
.s4form .e{font-size:16px;color:#4B5563}.s4form h1{font-size:46px;font-weight:600;letter-spacing:-.03em;margin:4px 0 6px}
.s4form .field{margin-top:22px}.s4form .field>label{font-size:13px}
.s4form .inp{height:54px;border-radius:999px;padding-left:50px!important;font-size:15px;border-color:#D9DCE1}
.s4form .ig>svg{left:20px;color:#6B7280}
.s4form .inp:focus{border-color:#111827;box-shadow:0 0 0 4px rgba(36,148,208,.16)}
.s4form .eye{right:10px}
.rw{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:13.5px;color:#4B5563}.rw #forgot{font-weight:700;color:#111827;font-size:13.5px}.rw #forgot:hover{color:#1380BA}
.s4form .switch input{background:#D9DCE1}.s4form .switch input:checked{background:#111827}.s4form .switch input:checked:after{background:#18E3D0}
.s4b{margin-top:28px;height:56px;font-size:15px;font-weight:700}
.s4sso{margin-top:12px;height:56px;font-weight:700;font-size:14.5px}
.s4note{margin-top:auto;padding-top:28px;font-size:12.5px;color:#6B7280;display:flex;gap:16px;flex-wrap:wrap}.s4note span{display:flex;gap:6px;align-items:center}.s4note svg{width:14px;height:14px;color:#1380BA}
.s4form #back,.s4form .lnk{color:#111827}
.s4pv{border-radius:30px;background:rgba(233,236,240,.75);position:relative;overflow:hidden;min-height:660px}
.s4pv:before{content:"";position:absolute;inset:-20%;background:radial-gradient(40% 30% at 80% 20%,rgba(24,227,208,.22),transparent 70%),radial-gradient(40% 30% at 20% 85%,rgba(124,51,136,.16),transparent 70%);animation:auDrift 18s ease-in-out infinite alternate}
.s4c{position:absolute;background:#fff;border-radius:26px;padding:20px;box-shadow:0 24px 50px -24px rgba(17,24,39,.3);animation:float 7s ease-in-out infinite}
.s4c h4{font-size:16px;font-weight:700}.s4c p{font-size:12px;color:#6B7280;margin-top:2px}.s4c small{display:block;text-align:center;font-size:12px;color:#6B7280}
.s4c.c1{left:6%;top:5%;width:46%}.s4c.c2{right:5%;top:19%;width:40%;animation-delay:-2s}.s4c.c3{left:6%;top:51%;width:46%;padding-bottom:6px;animation-delay:-4s}
.s4c.c4{left:6%;right:5%;bottom:5%;display:flex;justify-content:space-between;align-items:center;padding:16px 20px;animation:none}
.s4c .tk{display:grid;gap:10px;margin-top:12px}.s4c .tk div{border-radius:16px;padding:12px 14px;font-size:13px;font-weight:700}.s4c .tk span{display:block;font-size:11.5px;color:#6B7280;font-weight:500;margin-top:2px}
.s4pill{position:absolute;right:6%;top:65%;background:#111827;color:#fff;border-radius:999px;padding:12px 18px;font-size:13.5px;font-weight:600;display:flex;gap:10px;align-items:center;box-shadow:0 20px 40px -20px rgba(17,24,39,.5);animation:float 6s ease-in-out infinite;animation-delay:-1s}.s4pill b{color:#18E3D0}
.avs{display:flex;align-items:center}.avs i{width:34px;height:34px;border-radius:50%;border:3px solid #fff;margin-left:-10px}.avs i:first-child{margin-left:0}.avs b{height:34px;padding:0 10px;border-radius:999px;background:#111827;color:#fff;font-size:12px;display:grid;place-items:center;margin-left:-8px;border:3px solid #fff}
@media (max-width:1100px){.s4panel{grid-template-columns:1fr}.s4pv{display:none}.s4form{padding:28px 8px}}
@media (max-width:600px){.s4wrap{padding:16px}.s4sup{display:none}.s4panel{padding:20px;border-radius:28px}.s4form h1{font-size:36px}}
.rail a.logo{border:0;border-radius:0;padding:0;height:44px;min-height:44px;overflow:visible;background:none!important;box-shadow:none!important}

/* edge fades on scrolling tab rows so pills never cut hard against the edge */
.pl,.tabs{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 40px),transparent);padding-left:24px;padding-right:32px;margin-left:-24px;scroll-padding-inline:28px}
.tabs{margin-right:-28px}