:root{
  --font:"Segoe UI","Segoe UI Web (West European)",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  --ink:#252423;--ink2:#605E5C;--ink3:#8A8886;--line:#E1DFDD;--line2:#EDEBE9;
  --canvas:#EAEAEA;--page:#F3F2F1;--vis:#FFFFFF;--brand:#118DFF;--brand2:#12239E;--accent:#F2C811;
  --good:#1A7F37;--bad:#C4314B;--warn:#B7791F;--shadow:0 1px 2px rgba(0,0,0,.08),0 0 1px rgba(0,0,0,.12);
  --banner:#FFF4CE;--bannerInk:#5C4A00;--head:#1B1A19;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--canvas);color:var(--ink);font-family:var(--font);font-size:13px;-webkit-font-smoothing:antialiased}
button,input,select{font-family:inherit;font-size:13px;color:inherit}
#banner{position:fixed;top:0;left:0;right:0;height:30px;background:var(--banner);color:var(--bannerInk);display:flex;align-items:center;justify-content:center;gap:8px;font-size:12.5px;font-weight:600;z-index:90;border-bottom:1px solid #F0DC8A;padding:0 12px;text-align:center}
#banner svg{flex:none}

/* sign in */
#signin{position:fixed;inset:30px 0 0 0;background:linear-gradient(135deg,#0F2C4C 0%,#12239E 55%,#118DFF 100%);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.si-card{background:#fff;width:440px;max-width:100%;box-shadow:0 2px 6px rgba(0,0,0,.2);padding:44px 44px 36px;min-height:340px;position:relative}
.si-brand{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.si-logo{width:38px;height:38px;border-radius:6px;background:#12239E;color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;letter-spacing:.5px}
.si-brand b{font-size:15px;display:block}.si-brand span{font-size:12px;color:var(--ink2)}
.si-card h1{font-size:24px;font-weight:600;margin:0 0 10px}
.si-card p{margin:0 0 16px;line-height:1.5;color:var(--ink)}
.si-note{font-size:12px;color:var(--ink2);border-top:1px solid var(--line);padding-top:12px;margin-top:22px;line-height:1.5}
.ms-btn{display:flex;align-items:center;gap:12px;width:100%;border:1px solid #8C8C8C;background:#fff;height:41px;padding:0 12px;font-weight:600;font-size:15px;cursor:pointer;color:#5E5E5E}
.ms-btn:hover{background:#F3F2F1}
.ms-logo{display:grid;grid-template-columns:9px 9px;gap:2px}
.ms-logo i{width:9px;height:9px;display:block}
.ms-head{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2);margin-bottom:18px}
.acct{display:flex;align-items:center;gap:12px;padding:10px 8px;border:1px solid transparent;cursor:pointer;margin:0 -8px}
.acct:hover{background:#F3F2F1}
.avatar{width:36px;height:36px;border-radius:50%;background:#E6F2FF;color:#12239E;display:grid;place-items:center;font-weight:600}
.code-in{width:100%;border:none;border-bottom:1px solid #666;height:36px;font-size:15px;outline:none;letter-spacing:2px;padding:0 2px}
.code-in:focus{border-bottom:2px solid #0067B8}
.btn-primary{background:#0067B8;color:#fff;border:none;min-width:108px;height:32px;padding:0 14px;cursor:pointer;font-weight:600}
.btn-primary:hover{background:#005DA6}
.btn{background:#fff;border:1px solid #8A8886;height:32px;padding:0 14px;cursor:pointer;border-radius:2px}
.btn:hover{background:#F3F2F1}
.si-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}
.si-err{color:#C4314B;font-size:13px;min-height:18px;margin-top:6px}
.code-hint{background:#E6F2FF;border-left:3px solid #0067B8;padding:8px 10px;font-size:12.5px;margin-bottom:14px}
.role-opt{display:flex;gap:12px;align-items:flex-start;padding:10px;border:1px solid var(--line);margin-bottom:8px;cursor:pointer;border-radius:3px}
.role-opt:hover,.role-opt.sel{border-color:#0067B8;background:#F5FAFF}
.role-opt b{display:block;font-size:13.5px}.role-opt span{color:var(--ink2);font-size:12px;line-height:1.4}
.role-opt select{margin-top:6px;width:100%;height:28px}

/* app chrome */
#app{position:fixed;inset:30px 0 0 0;display:none;flex-direction:column}
.topbar{height:44px;background:var(--head);color:#fff;display:flex;align-items:center;padding:0 12px;gap:12px;flex:none}
.waffle{display:grid;grid-template-columns:repeat(3,4px);gap:3px;padding:6px;opacity:.9}
.waffle i{width:4px;height:4px;background:#fff;display:block}
.appname{font-weight:600;font-size:14px;white-space:nowrap}
.crumb{color:#C8C6C4;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .sp{flex:1}
.rolechip{display:flex;align-items:center;gap:8px;background:#323130;border:1px solid #484644;color:#fff;border-radius:3px;height:30px;padding:0 10px;cursor:pointer;white-space:nowrap}
.rolechip small{color:#C8C6C4}
.me{width:30px;height:30px;border-radius:50%;background:#118DFF;display:grid;place-items:center;font-weight:600;font-size:12px}
.actionbar{height:40px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 8px;gap:2px;flex:none;overflow-x:auto}
.ab{display:flex;align-items:center;gap:6px;background:none;border:none;height:32px;padding:0 10px;cursor:pointer;border-radius:3px;white-space:nowrap;color:var(--ink)}
.ab:hover{background:#F3F2F1}
.ab svg{color:#0F6CBD}
.ab-sep{width:1px;height:20px;background:var(--line);margin:0 4px}
.rls{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink2);white-space:nowrap;padding:0 8px}
.rls b{color:var(--ink)}
.main{flex:1;display:flex;min-height:0}
.canvas-wrap{flex:1;overflow:auto;padding:14px 16px 20px;min-width:0;position:relative}
.page{background:var(--page);max-width:1500px;margin:0 auto;padding:12px;box-shadow:0 0 0 1px #DCDAD8}
.page-head{display:flex;align-items:center;gap:12px;margin:2px 2px 10px;flex-wrap:wrap}
.page-head h2{margin:0;font-size:20px;font-weight:600;letter-spacing:-.2px}
.page-head .sub{color:var(--ink2);font-size:12.5px}
.page-head .sp{flex:1}
.back{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);background:#fff;height:28px;padding:0 10px;cursor:pointer;border-radius:3px}
.drill{display:flex;flex-wrap:wrap;align-items:center;gap:2px;font-size:12px;color:var(--ink2);margin:0 2px 10px}
.drill a{color:#0F6CBD;cursor:pointer;text-decoration:none;padding:2px 4px;border-radius:2px}
.drill a:hover{background:#E6F2FF}
.drill .cur{color:var(--ink);font-weight:600;padding:2px 4px}
.drill .lbl{margin-right:4px}

/* slicers */
.slicers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:8px}
.slicer{background:var(--vis);box-shadow:var(--shadow);border-radius:4px;padding:6px 10px 8px}
.slicer label{display:block;font-size:11.5px;color:var(--ink2);margin-bottom:3px;font-weight:600}
.slicer select{width:100%;height:28px;border:1px solid #C8C6C4;border-radius:2px;background:#fff;padding:0 6px}
.slicer select:disabled{background:#F3F2F1;color:var(--ink2)}
.lock{font-size:10.5px;color:#8A6D00;margin-left:4px;font-weight:600}

/* grid & visuals */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px}
.s2{grid-column:span 2}.s3{grid-column:span 3}.s4{grid-column:span 4}.s5{grid-column:span 5}.s6{grid-column:span 6}.s7{grid-column:span 7}.s8{grid-column:span 8}.s9{grid-column:span 9}.s12{grid-column:span 12}
.vis{background:var(--vis);border-radius:4px;box-shadow:var(--shadow);display:flex;flex-direction:column;min-width:0;position:relative}
.vis:hover{box-shadow:0 0 0 1px #C8C6C4,0 2px 6px rgba(0,0,0,.08)}
.h1{height:124px}.h2{height:300px}.h3{height:360px}.h4{height:440px}.hA{min-height:120px}
.vh{display:flex;align-items:center;gap:6px;padding:8px 10px 2px 12px;min-height:30px}
.vt{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vsub{font-size:11.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vi{margin-left:auto;display:flex;gap:1px;opacity:.38;transition:opacity .12s}
.vis:hover .vi{opacity:1}
.vi button{width:24px;height:22px;border:none;background:none;cursor:pointer;border-radius:2px;display:grid;place-items:center;color:var(--ink2)}
.vi button:hover{background:#EDEBE9;color:var(--ink)}
.vb{flex:1;min-height:0;padding:2px 10px 8px;position:relative}
.ch{position:absolute;inset:0 6px 4px 6px}
.vb.scroll{overflow:auto}
.card .vb{display:flex;flex-direction:column;justify-content:flex-start;padding:2px 14px 8px}
.kpi{font-size:25px;font-weight:600;letter-spacing:-.5px;line-height:1.1;color:var(--ink)}
.kpi-l{font-size:11.5px;color:var(--ink2);margin-top:2px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.delta{font-size:11px;margin-top:4px;line-height:1.3;display:flex;align-items:center;gap:3px;color:var(--ink2)}
.up-good{color:var(--good)}.up-bad{color:var(--bad)}
.card .vh{min-height:24px;padding-top:6px}
.seg{display:inline-flex;border:1px solid #C8C6C4;border-radius:3px;overflow:hidden;margin-left:6px}
.seg button{white-space:nowrap;border:none;background:#fff;padding:3px 9px;font-size:11.5px;cursor:pointer;border-left:1px solid #C8C6C4}
.seg button:first-child{border-left:none}
.seg button.on{background:#12239E;color:#fff}

/* tables */
table.pbi{width:100%;border-collapse:collapse;font-size:12px}
table.pbi th{position:sticky;top:0;background:#fff;text-align:left;font-weight:600;color:var(--ink);padding:6px 8px;border-bottom:2px solid #C8C6C4;white-space:nowrap;cursor:default;z-index:1}
table.pbi td{padding:5px 8px;border-bottom:1px solid var(--line2);vertical-align:middle;white-space:nowrap}
table.pbi tr.click{cursor:pointer}
table.pbi tr.click:hover td{background:#F5FAFF}
table.pbi td.num,table.pbi th.num{text-align:right;font-variant-numeric:tabular-nums}
.bar{display:flex;align-items:center;gap:6px}
.bar i{display:block;height:12px;background:#118DFF;border-radius:1px}
.pill{display:inline-block;padding:1px 7px;border-radius:10px;font-size:11px;font-weight:600}
.p-high{background:#FDE7E9;color:#A4262C}.p-mod{background:#FFF4CE;color:#7A5C00}.p-low{background:#DFF6DD;color:#0E700E}
.p-t1{background:#EDEBE9;color:#484644}.p-t2{background:#E6F2FF;color:#0F548C}.p-t3{background:#EADCF7;color:#5C2E91}
.p-ok{background:#DFF6DD;color:#0E700E}.p-warn{background:#FFF4CE;color:#7A5C00}.p-err{background:#FDE7E9;color:#A4262C}.p-info{background:#EDEBE9;color:#484644}
.drv{display:inline-flex;align-items:center;gap:2px;margin-right:8px;font-size:11.5px}
.drv .ar{font-weight:700}
.ar-up{color:var(--bad)}.ar-dn{color:var(--good)}
.score{display:inline-flex;align-items:center;gap:6px}
.score b{display:inline-block;width:26px;text-align:right}
.score i{display:block;height:8px;border-radius:4px;background:#EDEBE9;width:60px;position:relative;overflow:hidden}
.score i em{position:absolute;left:0;top:0;bottom:0;border-radius:4px}
.cf-cell{border-radius:2px;text-align:center !important}

/* insight panel */
.insight{padding:4px 14px 12px;overflow:auto}
.insight ul{margin:0;padding:0;list-style:none}
.insight li{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line2);line-height:1.45;font-size:12.5px}
.insight li:last-child{border-bottom:none}
.insight .dot{flex:none;width:8px;height:8px;border-radius:50%;margin-top:6px;background:linear-gradient(90deg,#1A7F37 50%,#E66C37 50%)}

/* filters pane */
.fpane{width:250px;background:#fff;border-left:1px solid var(--line);flex:none;display:flex;flex-direction:column;overflow:auto}
.fpane.closed{width:34px}
.fpane-h{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--line);font-weight:600;font-size:14px}
.fpane-h button{border:none;background:none;cursor:pointer;padding:2px}
.fpane.closed .fpane-b,.fpane.closed .fpane-h span{display:none}
.fpane.closed .fpane-h{writing-mode:vertical-rl;padding:10px 8px;border:none}
.fsec{padding:10px 12px;border-bottom:1px solid var(--line2)}
.fsec h4{margin:0 0 6px;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink2)}
.fcard{background:#F3F2F1;border-radius:3px;padding:7px 9px;margin-bottom:6px;font-size:12px}
.fcard b{display:block;font-size:12px}
.fcard span{color:var(--ink2)}
.fcard.lock{background:#FFF8E1;border:1px solid #F2DD8C}

/* tabs */
.tabs{height:34px;background:#F3F2F1;border-top:1px solid #C8C6C4;display:flex;align-items:stretch;padding:0 8px;gap:0;flex:none;overflow-x:auto}
.tab{border:none;background:none;padding:0 16px;cursor:pointer;color:var(--ink2);white-space:nowrap;border-right:1px solid #DCDAD8;position:relative;font-size:12.5px}
.tab:hover{background:#fff;color:var(--ink)}
.tab.on{background:#fff;color:var(--ink);font-weight:600}
.tab.on:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent)}
.tab.dt{font-style:italic}
.tabs .pg{margin-left:auto;display:flex;align-items:center;color:var(--ink2);font-size:12px;padding:0 8px;white-space:nowrap}

/* overlays */
.ovl{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:100;display:flex;align-items:center;justify-content:center;padding:16px}
.modal{background:#fff;width:640px;max-width:100%;max-height:calc(100vh - 60px);overflow:auto;border-radius:4px;box-shadow:0 8px 28px rgba(0,0,0,.25)}
.modal.wide{width:980px}
.mh{display:flex;align-items:center;padding:16px 20px 8px}
.mh h3{margin:0;font-size:18px;font-weight:600}
.mh button{margin-left:auto;border:none;background:none;font-size:20px;cursor:pointer;line-height:1}
.mb{padding:6px 20px 12px}
.mf{display:flex;justify-content:flex-end;gap:8px;padding:10px 20px 16px;border-top:1px solid var(--line2)}
.fld{margin-bottom:12px}
.fld label{display:block;font-weight:600;font-size:12.5px;margin-bottom:4px}
.fld input[type=text],.fld input[type=number],.fld input[type=time],.fld select,.fld textarea{width:100%;height:32px;border:1px solid #8A8886;border-radius:2px;padding:0 8px;background:#fff}
.fld textarea{height:60px;padding:6px 8px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chk{display:flex;gap:6px;align-items:center;margin:3px 0}
.focus{position:fixed;inset:104px 266px 34px 0;background:var(--page);z-index:60;padding:14px 16px;display:flex;flex-direction:column}
.focus .vis{flex:1}
.focus-bar{display:flex;align-items:center;margin-bottom:8px}
.menu{position:fixed;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.18);border-radius:3px;z-index:120;min-width:190px;padding:4px 0}
.menu button{display:flex;align-items:center;gap:8px;width:100%;border:none;background:none;text-align:left;padding:7px 14px;cursor:pointer}
.menu button:hover{background:#F3F2F1}
.toast{position:fixed;right:20px;bottom:50px;background:#1B1A19;color:#fff;padding:10px 14px;border-radius:4px;z-index:200;box-shadow:0 4px 14px rgba(0,0,0,.3);font-size:13px;max-width:380px}
.switch{position:relative;width:34px;height:18px;display:inline-block}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:#C8C6C4;border-radius:10px;cursor:pointer;transition:.15s}
.switch span:before{content:"";position:absolute;width:12px;height:12px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.15s}
.switch input:checked+span{background:#0F6CBD}
.switch input:checked+span:before{transform:translateX(16px)}
.thr{width:62px;height:24px;border:1px solid #C8C6C4;border-radius:2px;padding:0 4px;text-align:right}
.prof-h{display:flex;gap:16px;align-items:center;padding:10px 14px}
.prof-av{width:54px;height:54px;border-radius:50%;background:#E6F2FF;color:#12239E;display:grid;place-items:center;font-size:19px;font-weight:600;flex:none}
.prof-h h3{margin:0 0 3px;font-size:18px}
.prof-meta{color:var(--ink2);font-size:12.5px;line-height:1.5}
.tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.tag{background:#F3F2F1;border-radius:2px;padding:1px 6px;font-size:11px;color:var(--ink2)}
.explain{font-size:12px;color:var(--ink2);line-height:1.5}
.explain b{color:var(--ink)}
.empty{display:grid;place-items:center;height:100%;color:var(--ink2);font-size:12.5px;text-align:center;padding:10px}
.pager{display:flex;align-items:center;gap:8px;justify-content:flex-end;padding:6px 2px 0;font-size:12px;color:var(--ink2)}
.pager button{border:1px solid var(--line);background:#fff;height:24px;padding:0 8px;cursor:pointer;border-radius:2px}
.search{height:26px;border:1px solid #C8C6C4;border-radius:2px;padding:0 8px;width:180px;margin-left:8px}

@media (max-width:1280px){.fpane{display:none}.focus{right:0}.slicers{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1100px){
  .s2,.s3{grid-column:span 4}.s4,.s5{grid-column:span 6}.s7,.s8,.s9,.s6{grid-column:span 12}
  .crumb{display:none}
}
@media (max-width:700px){
  .s2,.s3,.s4,.s5{grid-column:span 6}
  .slicers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rls,.ab span.t{display:none}
  .canvas-wrap{padding:10px 8px}
  #banner{font-size:11px}
}
@media print{#banner{position:static}.topbar,.actionbar,.tabs,.fpane{display:none}#app{position:static}}