:root{--ink:#102d4f;--teal:#058da2;--navy:#07284e;--surface:#f4f8fc;--radius:18px;--font:Inter,'Segoe UI',system-ui,-apple-system,sans-serif}
body{font-family:var(--font)!important;color:#14304d;background:#f4f8fc}
#app{min-height:100vh}
.sidebar{background:linear-gradient(175deg,#082d56 0%,#092643 62%,#061d39 100%)!important;box-shadow:8px 0 45px rgba(9,40,73,.09)}
.sidebar .brand{padding-bottom:18px;gap:9px}
.brand-mark{background:rgba(255,255,255,.08)!important;box-shadow:none!important;border:1px solid rgba(255,255,255,.1);border-radius:13px!important}
.brand-mark svg{display:none}.brand-mark img{width:34px;height:34px;object-fit:contain;display:block}
.brand-word{font-size:18px!important;letter-spacing:-.5px!important;color:#fff!important}.brand-word span{color:#48e1d2!important}
.brand-sub{color:#a9cada!important;font-size:10px!important}
.nav-item{border-radius:11px!important;transition:background .15s,transform .15s}.nav-item:hover{transform:translateX(2px)}.nav-item.active{background:linear-gradient(100deg,#087b96,#0e9da8)!important;color:#fff!important;box-shadow:0 6px 17px rgba(0,169,177,.2)}
.side-tag{font-size:10px!important;letter-spacing:.5px!important}
.demo-banner{font-size:12px!important;background:#e8f5fa!important;color:#17637c!important;border-bottom:1px solid #d1e4ee!important}
.topbar{background:rgba(255,255,255,.93)!important;backdrop-filter:blur(14px);border-bottom:1px solid #e4edf4!important}
.content{max-width:1500px!important}
.page-header h1{letter-spacing:-.9px!important;color:#0d2e50!important}
.card{border:1px solid #dfeaf3!important;border-radius:17px!important;box-shadow:0 6px 24px rgba(10,44,79,.045)!important;transition:box-shadow .15s}
.card:hover{box-shadow:0 10px 27px rgba(10,44,79,.065)!important}
.btn.primary{background:linear-gradient(110deg,#063a67,#057e94)!important;border:0!important;color:white!important;box-shadow:0 5px 11px rgba(8,73,111,.12)}
.btn.primary:hover{filter:brightness(1.08)}.btn.secondary{border-color:#cbdde9!important}
.btn, .row-action{transition:transform .15s,box-shadow .15s,background .15s}.btn:active{transform:scale(.975)}
input,textarea,select{border-color:#cbdce7!important;border-radius:10px!important;background:#fff}
input:focus,textarea:focus,select:focus{border-color:#0b90a4!important;box-shadow:0 0 0 3px rgba(0,151,161,.12)!important}
.metric{min-height:146px;overflow:hidden}.metric .figure{color:#0a355b!important;font-weight:790!important}
.hero{background:linear-gradient(120deg,#0a3b67,#0b879a)!important}.hero h2{letter-spacing:-.6px}
.role-menu{border:1px solid #dce8f0;border-radius:15px!important;box-shadow:0 15px 35px rgba(12,37,72,.13)!important}
.data-table thead{background:#f3f8fc}.data-table tr:hover{background:#f8fbff}
.modal-backdrop{backdrop-filter:blur(5px);background:rgba(2,17,39,.48)!important}.modal{border-radius:21px!important;border:1px solid #d3e0ed;box-shadow:0 28px 90px rgba(6,30,60,.24)!important}
#toast{z-index:9999}
/* Access */
.login-shell{min-height:100vh;background:radial-gradient(circle at 85% 10%,#e0f7fb 0,transparent 38%),radial-gradient(circle at 12% 92%,#dceafb 0,transparent 33%),#f4f8fc;padding:22px 28px 52px}
.login-top{display:flex;justify-content:space-between;align-items:center;gap:20px;max-width:1370px;margin:0 auto 25px}
.login-brand{display:flex;align-items:center;gap:11px;font-size:26px;font-weight:830;letter-spacing:-1.1px;color:#0a2c50;text-decoration:none}
.login-brand img{width:48px;height:48px;object-fit:contain}.login-brand small{display:block;font-size:12px;letter-spacing:.2px;font-weight:450;color:#527291}
.login-top-meta{font-size:13px;color:#527291}
.login-card{max-width:1370px;margin:auto;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);border-radius:28px;overflow:hidden;background:white;box-shadow:0 22px 90px rgba(11,48,83,.12);min-height:680px;border:1px solid #dce9f3}
.login-story{background:linear-gradient(144deg,#072d59 0%,#063860 45%,#047d91 100%);color:#fff;padding:65px 60px;display:flex;flex-direction:column;justify-content:space-between;position:relative;isolation:isolate;overflow:hidden}
.login-story:before{content:"";position:absolute;width:550px;height:550px;border-radius:50%;background:linear-gradient(60deg,rgba(32,213,202,.21),rgba(255,255,255,.02));right:-330px;top:-150px;z-index:-1}
.login-story:after{content:"";position:absolute;width:440px;height:440px;border:2px solid rgba(255,255,255,.11);border-radius:50%;left:-260px;bottom:-230px;z-index:-1}
.login-promise{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid rgba(255,255,255,.25);color:#c0f8f1;border-radius:30px;font-size:12px;font-weight:750;letter-spacing:.7px}
.login-story h1{max-width:600px;font-size:clamp(35px,4vw,58px);line-height:1.12;margin:31px 0 22px;font-weight:850;letter-spacing:-1.8px;color:white}
.login-story p{max-width:430px;color:#e0eff7;font-size:16px;line-height:1.75}
.login-portrait{display:flex;align-items:center;gap:28px;margin-top:28px}.login-portrait img{width:145px;height:145px;border-radius:46% 54% 52% 48%;border:6px solid rgba(255,255,255,.28);object-fit:cover;box-shadow:0 10px 28px rgba(2,20,40,.21)}.login-portrait span{font-size:14px;color:#e4f5f7;line-height:1.6;max-width:230px}
.login-story-foot{border-top:1px solid rgba(255,255,255,.22);padding-top:25px;display:flex;gap:17px;flex-wrap:wrap;font-size:12px;color:#cfe9f1}.login-story-foot span{display:flex;gap:8px;align-items:center}
.login-right{padding:52px 57px 38px;background:linear-gradient(165deg,#fff,#fafdff);display:flex;flex-direction:column;justify-content:center}
.login-right .eyebrow{color:#008999;font-weight:850;font-size:11px;letter-spacing:1.5px}
.login-right h2{font-size:33px;color:#092d50;letter-spacing:-1px;margin:12px 0}.login-right>p{font-size:14px;line-height:1.6;color:#617890;margin:0 0 28px}
.login-form .field{margin:0 0 17px}.login-form label{font-size:12px;font-weight:780;color:#163b60;display:block;margin-bottom:8px}.login-form input{padding:14px!important;width:100%;font-size:14px}
.login-form .btn{min-height:50px;width:100%;font-weight:800;justify-content:center;font-size:14px}
.login-show{display:flex;align-items:center;justify-content:space-between;gap:10px}.login-show button{border:0;background:transparent;color:#087c93;font-size:12px;text-decoration:underline;cursor:pointer}
.login-err{background:#fff0f0;color:#9b253c;border:1px solid #f5c5c5;border-radius:12px;padding:11px 13px;margin:4px 0 14px;font-size:13px}
.login-note{background:#eef8fb;border:1px solid #d6e9ef;color:#26657c;padding:13px;border-radius:12px;font-size:12px;line-height:1.5;margin-top:18px}
.login-accounts{margin-top:18px;border-top:1px solid #dfe9f0;padding-top:18px}
.login-accounts summary{font-size:13px;color:#0b6985;font-weight:780;cursor:pointer;list-style-position:inside}
.login-account-list{margin-top:12px;max-height:198px;overflow:auto;border:1px solid #e5edf4;border-radius:12px;background:#fff}
.login-account{border:0;border-bottom:1px solid #e9eff5;background:#fff;text-align:left;display:flex;gap:9px;align-items:center;padding:10px 12px;width:100%;color:#173956;cursor:pointer;font-size:12px}.login-account:hover{background:#f1f9fa}.login-account b{display:block;font-size:12px}.login-account small{color:#688299}
.login-account-icon{width:27px;height:27px;border-radius:8px;background:#dceef5;color:#14728d;display:grid;place-items:center;font-weight:800;font-size:11px}
.login-foot{text-align:center;color:#8395a9;margin-top:23px;font-size:12px}
/* extra cards/charts */
.graph-panel{background:#fff;border:1px solid #dfebf3;border-radius:17px;padding:23px}.graph-panel h3{font-size:16px;margin:0 0 6px;color:#0d345b}.graph-caption{font-size:12px;color:#638096;margin-bottom:15px}
.graph-bars{display:grid;gap:15px}.graph-line{display:grid;grid-template-columns:minmax(130px,1fr) minmax(150px,2fr) 39px;align-items:center;gap:10px;font-size:12px}.graph-track{height:12px;background:#edf3f8;border-radius:8px;overflow:hidden}.graph-value{height:100%;background:linear-gradient(90deg,#069d9e,#35c2b0);border-radius:8px}.graph-value.blue{background:linear-gradient(90deg,#2860b5,#5e9fed)}.graph-value.violet{background:linear-gradient(90deg,#7552c7,#b095fa)}.graph-value.amber{background:linear-gradient(90deg,#dd9b2b,#f5c36b)}
.chart-note{font-size:11px;color:#6f879b;margin-top:13px}.chart-actions{display:flex;gap:8px;flex-wrap:wrap;margin:13px 0}
.demo-pill{display:inline-flex;border-radius:99px;background:#def8f2;color:#026e67;padding:6px 11px;font-size:11px;font-weight:800}
@media(max-width:900px){.login-card{grid-template-columns:1fr}.login-story{padding:38px 32px;min-height:320px}.login-story h1{font-size:38px}.login-story-foot{display:none}.login-portrait{position:absolute;right:30px;bottom:25px;opacity:.45}.login-right{padding:40px 32px}.login-shell{padding:16px}}
@media(max-width:540px){.login-top-meta{display:none}.login-card{border-radius:19px}.login-story{min-height:265px;padding:30px 25px}.login-story h1{font-size:32px;margin:22px 0 10px}.login-story p{font-size:13px}.login-right{padding:32px 22px}.login-right h2{font-size:27px}.login-portrait img{width:95px;height:95px}.graph-line{grid-template-columns:1fr;gap:5px}.graph-line>strong{text-align:right}}
@media print{.login-shell{display:none}.graph-panel{break-inside:avoid}.demo-banner{display:none!important}}