/* Client dashboard demo */
.db-sec{background:radial-gradient(900px 500px at 80% -10%,rgba(110,160,255,.14),transparent 60%),radial-gradient(700px 400px at 0 100%,rgba(255,77,102,.1),transparent 60%),#070d1c;color:#e6edfc;padding:clamp(48px,7vw,96px) 0}
.db-sec .h2x{color:#fff}.db-sec .lead2{color:#a9b8d6}
#dash{margin-top:36px;border:1px solid rgba(110,160,255,.28);border-radius:14px;background:linear-gradient(160deg,rgba(16,28,56,.92),rgba(7,13,28,.96));box-shadow:0 50px 120px -50px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.03) inset;padding:clamp(16px,2.6vw,30px);position:relative}
#dash:fullscreen{overflow:auto;border-radius:0;padding:32px;background:#070d1c}
.db-top{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-end;margin-bottom:22px}
.db-title h3{font:400 clamp(1.5rem,2.8vw,2.2rem)/1.1 var(--serif,Georgia,serif);color:#fff;margin:10px 0 4px}
.db-title p{margin:0;color:#8fa0bf;font-size:.9rem}
.db-live{display:inline-flex;gap:8px;align-items:center;font:700 .68rem Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#ffb020;border:1px solid rgba(255,176,32,.45);padding:5px 10px;border-radius:99px}
.db-live i{width:7px;height:7px;border-radius:50%;background:#ffb020;box-shadow:0 0 0 0 rgba(255,176,32,.7);animation:dbp 1.8s infinite}
@keyframes dbp{70%{box-shadow:0 0 0 9px rgba(255,176,32,0)}100%{box-shadow:0 0 0 0 rgba(255,176,32,0)}}
.db-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.db-proj{display:flex;border:1px solid rgba(143,170,230,.35);border-radius:6px;overflow:hidden}
.db-proj button{font:600 .85rem Inter,sans-serif;padding:10px 16px;background:transparent;color:#cfdcf5;border:0;cursor:pointer;transition:background .2s}
.db-proj button+button{border-left:1px solid rgba(143,170,230,.25)}
.db-proj button[aria-selected=true]{background:#ff4d66;color:#fff}.db-proj button:not([aria-selected=true]):hover{background:rgba(255,255,255,.08)}
.db-btn{font:600 .85rem Inter,sans-serif;padding:10px 14px;border:1px solid rgba(143,170,230,.35);border-radius:6px;background:transparent;color:#e6edfc;cursor:pointer}.db-btn:hover{background:rgba(255,255,255,.08)}
.db-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
@media(max-width:1180px){.db-kpis{grid-template-columns:repeat(3,1fr)}}@media(max-width:600px){.db-kpis{grid-template-columns:repeat(2,1fr)}}
.db-kpi{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:block;padding:16px 16px 12px;border:1px solid rgba(143,170,230,.2);border-radius:10px;background:rgba(4,9,22,.55);transition:transform .25s,border-color .25s,box-shadow .25s;overflow:hidden}
.db-kpi:hover,.db-kpi:focus-visible{transform:translateY(-4px);border-color:#ff4d66;box-shadow:0 24px 40px -26px rgba(255,77,102,.6)}
.db-kpi:focus-visible,.db-card:focus-visible,.db-ins:focus-visible,.db-mf:focus-visible{outline:2px solid #ff4d66;outline-offset:2px}
.db-kpi small{display:block;font:600 .68rem Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#8fa0bf}
.db-kpi b{display:block;font:300 clamp(1.7rem,2.4vw,2.2rem)/1.15 var(--serif,Georgia,serif);color:#fff;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.db-kpi em{font:700 .78rem Inter,sans-serif;font-style:normal}.db-kpi em.g{color:#35d49a}.db-kpi em.w{color:#ffb020}.db-kpi em.r{color:#ff6b80}
.db-kpi .sp{display:block;width:100%;height:30px;margin-top:8px}
.db-kpi .go{position:absolute;right:12px;top:14px;font:700 .68rem Inter,sans-serif;color:#ff7a8f;opacity:0;transform:translateX(-6px);transition:all .25s}.db-kpi:hover .go,.db-kpi:focus-visible .go{opacity:1;transform:none}
.db-ins-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0 20px}
@media(max-width:900px){.db-ins-row{grid-template-columns:1fr}}
.db-ins{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid rgba(143,170,230,.18);border-radius:8px;background:rgba(255,255,255,.03);color:#cdd8ef;font-size:.9rem;line-height:1.4;transition:background .2s,border-color .2s}
.db-ins:hover{background:rgba(255,255,255,.07);border-color:rgba(143,170,230,.45)}.db-ins i{width:4px;align-self:stretch;border-radius:2px;flex:none}.db-ins span{flex:1}.db-ins em{font-style:normal;color:#ff7a8f;font-weight:700}
.db-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:1000px){.db-grid{grid-template-columns:1fr}}
.db-card{cursor:pointer;border:1px solid rgba(143,170,230,.2);border-radius:10px;background:rgba(4,9,22,.55);padding:16px 16px 10px;transition:transform .3s,border-color .3s,box-shadow .3s;position:relative}
.db-card:hover{transform:translateY(-4px);border-color:rgba(255,77,102,.8);box-shadow:0 30px 60px -34px rgba(255,77,102,.55)}
.db-ch{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.db-ch h4{margin:0;font:400 1.25rem var(--serif,Georgia,serif);color:#fff}.db-ch span{font:600 .74rem Inter,sans-serif;color:#ff7a8f;transition:transform .25s}.db-card:hover .db-ch span{transform:translateX(4px)}
.db-fig{overflow-x:auto}.db-fig svg{display:block;width:100%;height:auto;min-width:430px;overflow:visible}
.db-fine{font-size:.8rem;color:#8fa0bf;margin:18px 0 0}
/* chart text */
#dash svg,.db-modal svg{font-family:Inter,sans-serif}
.db-sec .gl{stroke:rgba(143,160,191,.16)}.db-modal .gl{stroke:rgba(143,160,191,.16)}
.ax{font:500 11.5px Inter,sans-serif;fill:#8fa0bf}.axt{font:600 10.5px Inter,sans-serif;fill:#9fb0cf;letter-spacing:.08em}
.tx{font:700 12px Inter,sans-serif;fill:#e6edfc;paint-order:stroke;stroke:rgba(5,10,24,.92);stroke-width:3.5px;stroke-linejoin:round}.tx.s{font-size:10.5px;font-weight:500;fill:#9fb0cf}
.big{font:300 32px "Fraunces",Georgia,serif;fill:#fff}.rn{font:800 9.5px Inter,sans-serif;fill:#07101f}
.hv{fill:transparent}.hv:hover{fill:rgba(255,255,255,.07)}
[data-t]{cursor:pointer}
.glow{filter:drop-shadow(0 0 7px rgba(255,77,102,.8))}
/* animation */
.cv{stroke-dasharray:1;stroke-dashoffset:1;animation:dbd 1.5s .1s cubic-bezier(.3,.7,.2,1) forwards}
path.cv[stroke-dasharray]{}
@keyframes dbd{to{stroke-dashoffset:0}}
.fadein{opacity:0;animation:dbf .8s .8s forwards}@keyframes dbf{to{opacity:1}}
.vb{transform-box:fill-box;transform-origin:bottom;animation:dbv .8s cubic-bezier(.2,.7,.2,1) both}@keyframes dbv{from{transform:scaleY(0)}}
.dhb{transform-box:fill-box;transform-origin:left;animation:dbh .8s cubic-bezier(.2,.7,.2,1) both}.dhb.rl{transform-origin:right}.dhb.c{transform-origin:center}@keyframes dbh{from{transform:scaleX(0)}}
.hc{animation:dbc .5s both}@keyframes dbc{from{opacity:0;transform:scale(.6)}}.hc{transform-box:fill-box;transform-origin:center}
.bub{transform-box:fill-box;transform-origin:center;animation:dbb .5s cubic-bezier(.3,1.6,.5,1) both}@keyframes dbb{from{opacity:0;transform:scale(0)}}
.pulse{animation:dbr 1.8s infinite;transform-box:fill-box;transform-origin:center}@keyframes dbr{0%{opacity:1;transform:scale(.9)}100%{opacity:0;transform:scale(1.5)}}
.seg{animation:dbs .6s both}@keyframes dbs{from{opacity:0}}
#dash.pre .cv,#dash.pre .vb,#dash.pre .dhb{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.cv,.fadein,.vb,.dhb,.hc,.bub,.pulse,.seg{animation:none!important}.cv{stroke-dashoffset:0}.fadein{opacity:1}}
/* tooltip */
.db-tip{position:fixed;z-index:10001;pointer-events:none;background:#0b1428;color:#e6edfc;border:1px solid rgba(255,77,102,.6);border-radius:6px;padding:8px 11px;font:500 .82rem/1.45 Inter,sans-serif;box-shadow:0 14px 30px -10px rgba(0,0,0,.7);max-width:240px}.db-tip b{color:#fff}
/* modal */
.db-lock{overflow:hidden}
.db-modal{position:fixed;inset:0;z-index:10000;background:rgba(3,6,15,.82);backdrop-filter:blur(8px);overflow-y:auto;padding:clamp(10px,3vw,40px);animation:dbm .3s}
.db-modal[hidden]{display:none}@keyframes dbm{from{opacity:0}}
.db-m-in{max-width:1180px;margin:0 auto;border:1px solid rgba(110,160,255,.35);border-radius:14px;background:linear-gradient(160deg,#101c38,#070d1c);padding:clamp(16px,2.6vw,32px);color:#e6edfc;animation:dbu .4s cubic-bezier(.2,.8,.2,1)}
@keyframes dbu{from{opacity:0;transform:translateY(24px) scale(.98)}}
.db-m-head{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:flex-start}
.db-m-head h3{font:400 clamp(1.7rem,3.4vw,2.6rem)/1.05 var(--serif,Georgia,serif);color:#fff;margin:12px 0 6px}.db-m-head p{margin:0;color:#a9b8d6;max-width:60ch}
.db-m-nav{display:flex;align-items:center;gap:8px;color:#8fa0bf;font:600 .8rem Inter,sans-serif}
.db-m-nav button{width:40px;height:40px;border-radius:50%;border:1px solid rgba(143,170,230,.4);background:transparent;color:#fff;font-size:1.05rem;cursor:pointer}.db-m-nav button:hover{background:#ff4d66;border-color:#ff4d66}
.db-m-nav .x{margin-left:8px}
.db-m-kp{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}
.db-m-kp div{border:1px solid rgba(143,170,230,.2);background:rgba(4,9,22,.55);border-radius:8px;padding:12px 16px}
.db-m-kp small{display:block;font:600 .68rem Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#8fa0bf}
.db-m-kp b{display:block;font:300 1.9rem/1.15 var(--serif,Georgia,serif);color:#fff;margin-top:2px}
.db-m-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:860px){.db-m-grid{grid-template-columns:1fr}.db-m-kp{grid-template-columns:1fr 1fr 1fr}}
.db-mf{margin:0;border:1px solid rgba(143,170,230,.2);border-radius:10px;background:rgba(4,9,22,.6);padding:16px;cursor:zoom-in;position:relative;transition:border-color .25s,opacity .3s;min-width:0}
.db-mf.wide{grid-column:1/-1}.db-mf:hover{border-color:rgba(255,77,102,.7)}
.db-mf figcaption b{display:block;font:400 1.2rem var(--serif,Georgia,serif);color:#fff}.db-mf figcaption span{display:block;font-size:.86rem;color:#9fb0d4;margin:2px 0 10px}
.db-zoom{position:absolute;top:14px;right:16px;font:700 .68rem Inter,sans-serif;letter-spacing:.06em;color:#ff7a8f;font-style:normal;opacity:0;transition:opacity .2s}.db-mf:hover .db-zoom,.db-mf:focus-visible .db-zoom{opacity:1}
.db-mf.focus{grid-column:1/-1;cursor:zoom-out;border-color:#ff4d66}.db-mf.focus .db-fig svg{min-width:0}
.db-m-grid.has-focus .db-mf.dim{display:none}
@media(max-width:700px){.db-m-nav span{display:none}}
.db-grid>*,.db-kpis>*,.db-ins-row>*,.db-m-grid>*{min-width:0}
#dash{min-width:0;max-width:100%}.db-sec .wrap{min-width:0}

/* scrubber */
.db-scrub{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:12px 16px;border:1px solid rgba(143,170,230,.2);border-radius:10px;background:rgba(4,9,22,.55)}
.db-scrub label{font:700 .7rem Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#8fa0bf;white-space:nowrap}
.db-scrub output{font:600 .9rem Inter,sans-serif;color:#fff;min-width:7.5em;text-align:right;font-variant-numeric:tabular-nums}
.db-play{width:38px;height:38px;border-radius:50%;border:0;background:#ff4d66;color:#fff;font-size:.85rem;cursor:pointer;flex:none;box-shadow:0 8px 20px -8px rgba(255,77,102,.8);transition:transform .2s}.db-play:hover{transform:scale(1.08)}
.db-scrub input[type=range]{flex:1;min-width:0;height:28px;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.db-scrub input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,#ff4d66,#6ea0ff)}
.db-scrub input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(90deg,#ff4d66,#6ea0ff)}
.db-scrub input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid #ff4d66;margin-top:-8px;box-shadow:0 0 0 6px rgba(255,77,102,.2)}
.db-scrub input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid #ff4d66}
.db-scrub input[type=range]:focus-visible{outline:2px solid #ff4d66;outline-offset:4px}
@media(max-width:600px){.db-scrub label{display:none}}
.scrub .cv{animation:none!important;stroke-dashoffset:0}.scrub .fadein{animation:none!important;opacity:1}.scrub .vb,.scrub .dhb,.scrub .hc,.scrub .bub,.scrub .seg{animation:none!important}
/* polish: animated glow border */
#dash::before{content:"";position:absolute;inset:-1px;border-radius:14px;padding:1px;background:conic-gradient(from var(--a,0deg),transparent 0 70%,rgba(255,77,102,.9) 80%,rgba(110,160,255,.9) 90%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;animation:dba 7s linear infinite}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes dba{to{--a:360deg}}
@media(prefers-reduced-motion:reduce){#dash::before{animation:none}}
/* expanded views */
.db-chips{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 18px}
.db-chips button{font:600 .82rem Inter,sans-serif;padding:8px 14px;border-radius:99px;border:1px solid rgba(143,170,230,.3);background:rgba(4,9,22,.5);color:#cfdcf5;cursor:pointer;transition:all .2s;display:inline-flex;gap:8px;align-items:center}
.db-chips button:hover{border-color:#ff4d66;color:#fff;transform:translateY(-1px)}
.db-chips em{font-style:normal;font-size:.7rem;background:rgba(255,77,102,.2);color:#ff9aa9;padding:2px 7px;border-radius:99px}
.db-count{display:inline-block;margin-left:10px;font:600 .72rem Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#a9b8d6}.db-count b{color:#ff7a8f;font-size:.95rem}
.ring{animation:dbring 1.4s cubic-bezier(.3,.7,.2,1) both}@keyframes dbring{from{stroke-dasharray:0 999}}
@media(prefers-reduced-motion:reduce){.ring{animation:none}}
/* briefing and what-if simulator */
.db-two2{display:grid;grid-template-columns:1fr 1.7fr;gap:16px;margin:0 0 18px}
@media(max-width:1000px){.db-two2{grid-template-columns:1fr}}
.db-brief,.db-sim{border:1px solid rgba(143,170,230,.2);border-radius:12px;background:linear-gradient(160deg,rgba(16,28,56,.7),rgba(4,9,22,.7));padding:20px;min-width:0}
.db-brief h4,.db-sim h4{margin:10px 0 8px;font:400 1.5rem var(--serif,Georgia,serif);color:#fff}
.db-brief p{margin:0 0 10px;color:#cdd8ef;line-height:1.55;font-size:.95rem}.db-brief p b{color:#fff}
.db-brief .db-btn{margin-top:6px}
.db-sim-h p{margin:0 0 14px;color:#9fb0d4;font-size:.9rem}
.db-sim-c{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}@media(max-width:700px){.db-sim-c{grid-template-columns:1fr}}
.db-sim-c label{display:block;min-width:0}.db-sim-c label>span{display:flex;justify-content:space-between;gap:8px;font:700 .72rem Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#cfdcf5}
.db-sim-c output{color:#ff7a8f}.db-sim-c input{width:100%;margin:8px 0 2px;accent-color:#ff4d66;height:26px;cursor:pointer}.db-sim-c small{display:block;color:#8fa0bf;font-size:.78rem;line-height:1.4}
.db-sim-o{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:8px}
.db-sim-o>div{border:1px solid rgba(143,170,230,.2);border-radius:8px;padding:10px 12px;background:rgba(4,9,22,.5);min-width:0}.db-sim-o small{display:block;font:700 .64rem Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#8fa0bf}
.db-sim-o b{display:block;font:300 1.6rem var(--serif,Georgia,serif);color:#fff;margin:2px 0}.db-sim-o em{font-style:normal;font-size:.78rem;color:#9fb0d4}.db-sim-o em.g{color:#35d49a}
@media print{
  body *{visibility:hidden!important}
  #dash,#dash *{visibility:visible!important}
  #dash{position:absolute;left:0;top:0;width:100%;background:#fff!important;color:#111!important}
  #dash .db-scrub,#dash .db-tools,#dash .db-chips,#dash #db-print,#dash .go,#dash .db-sim-c{display:none!important}
  #dash *{animation:none!important}
}
