/* Original Giannis vs3 reference styles. No modelled data or demo JavaScript. */

:root{color-scheme:light;--bg:#f3f6f4;--card:#fff;--ink:#0d1f1a;--mut:#667a72;--line:#e3ebe7;--em:#0f8f6f;--emd:#064a3a;--am:#e8a33a;--ro:#e5566d;--r:18px;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}html{scroll-padding-top:env(safe-area-inset-top,0px);background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 Manrope,system-ui,-apple-system,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}
.hero{background:radial-gradient(900px 400px at 85% -10%,#1fb68c55,transparent 60%),radial-gradient(600px 300px at 0% 110%,#0f8f6f66,transparent 60%),linear-gradient(135deg,#04271f,#0a5a45);color:#fff;padding:22px 32px 70px}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.logo{font-weight:800;font-size:22px;letter-spacing:-.8px}.logo i{color:#5eead4;font-style:normal}
.nav{display:flex;gap:4px;background:#ffffff14;border:1px solid #ffffff22;border-radius:999px;padding:4px;max-width:100%;overflow-x:auto}
.nav button{border:0;background:none;color:#cfe9e0;padding:9px 16px;border-radius:999px;cursor:pointer;font:600 13px Manrope,sans-serif;white-space:nowrap;transition:.2s}
.nav button.on{background:#fff;color:var(--emd)}.nav button:not(.on):hover{color:#fff}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#7ee8c8;font-weight:700;margin-top:30px}
h1{font-size:clamp(26px,3.6vw,42px);letter-spacing:-1.4px;line-height:1.08;margin:8px 0 6px;font-weight:800;max-width:980px}h1 span{color:#7ee8c8;font-weight:600}
.lede{color:#bfe0d4;max-width:640px;margin:0}
.bar-ctl{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:20px}
.field{display:flex;align-items:center;gap:10px;background:#ffffff14;border:1px solid #ffffff2a;border-radius:14px;padding:6px 8px 6px 12px}
.field small{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#9fd8c6;font-weight:700}
.field select{background:transparent;border:0;color:#fff;font:700 14px Manrope,sans-serif;padding:6px 4px;outline:0;cursor:pointer}.field select option{color:#0d1f1a}
.b{border:1px solid #ffffff44;background:transparent;color:#fff;border-radius:12px;padding:10px 16px;font:700 13px Manrope,sans-serif;cursor:pointer;transition:.2s}.b:hover{background:#ffffff1c}.b.p{background:#fff;color:var(--emd);border-color:#fff}
main{max-width:1400px;margin:-44px auto 0;padding:0 28px 48px;position:relative}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:0 1px 2px #0d1f1a08,0 12px 32px -18px #0d1f1a30}
.pf{position:sticky;top:calc(8px + env(safe-area-inset-top,0px));z-index:30;display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:12px 18px;margin-bottom:16px;backdrop-filter:blur(10px);background:#ffffffee}
.pf .lab{font-weight:800;font-size:13px}.pf .nt{font-size:11.5px;color:var(--mut);margin-left:auto;max-width:520px;text-align:right}
.pf input[type=date]{border:1.5px solid var(--line);border-radius:10px;padding:6px 10px;font:700 12.5px Manrope,sans-serif;color:var(--ink)}
.seg{display:flex;background:var(--bg);border-radius:10px;padding:3px;max-width:100%;overflow-x:auto}
.seg button{border:0;background:none;padding:7px 13px;border-radius:8px;font:700 12px Manrope,sans-serif;color:var(--mut);cursor:pointer;white-space:nowrap}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px #0d1f1a1f}
.tag{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;background:#e8a33a24;color:#a96d0a;padding:3px 8px;border-radius:99px;vertical-align:middle;margin-left:8px;white-space:nowrap}.tag.real{background:#0f8f6f18;color:var(--em)}
.eb{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--em);font-weight:800}
h2{font-size:20px;letter-spacing:-.5px;margin:2px 0 2px;font-weight:800}.d{font-size:12.5px;color:var(--mut);margin:0 0 14px}
.hd{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.sec{display:none;animation:fade .35s}.sec.on{display:block}@keyframes fade{from{opacity:0;transform:translateY(6px)}}
.kp4{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:16px;margin-bottom:16px}
.g2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
.g2b{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
.g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-bottom:16px}
@media(max-width:1000px){.g2,.g2b{grid-template-columns:1fr}.hero{padding:20px 18px 66px}main{padding:0 14px 40px}.pf .nt{margin-left:0;text-align:left}}
.k .l{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--mut);font-weight:800;letter-spacing:.02em}
.chip2{background:#0f8f6f14;color:var(--em);padding:3px 9px;border-radius:99px;font-size:11px;font-weight:800;white-space:nowrap}
.k .v{font-size:36px;font-weight:800;letter-spacing:-1.6px;margin:8px 0 8px;line-height:1}.k .v small{font-size:15px;color:var(--mut);font-weight:700;letter-spacing:0}
.comp{display:flex;height:10px;border-radius:6px;overflow:hidden;gap:2px;margin-bottom:12px;background:var(--bg)}.comp i{display:block;animation:grow .8s;transform-origin:left}
@keyframes grow{from{transform:scaleX(0)}}
.br{display:grid;grid-template-columns:96px 1fr auto;gap:10px;align-items:center;font-size:12.5px;font-weight:600;margin:7px 0}.br.sub{padding-left:14px;color:var(--mut)}.br.sub .nm:before{content:"└ ";color:#b5c4bc}
.br .t{height:7px;background:var(--bg);border-radius:4px;overflow:hidden}.br .t i{display:block;height:100%;border-radius:4px;animation:grow .8s;transform-origin:left}.br b{font-weight:800;min-width:60px;text-align:right}
.tot{border-bottom:1px dashed var(--line);padding-bottom:8px;margin-bottom:4px}
.dn{display:flex;gap:14px;align-items:center}.dn svg{width:150px;flex:none}.dl{font-size:12px;flex:1}.dl div{display:flex;justify-content:space-between;gap:8px;padding:3px 0;font-weight:600}.dl i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px}.dl .me{font-weight:800;color:var(--ink)}.dl .me span{background:#0f8f6f14;padding:0 5px;border-radius:5px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--mut);text-align:left;padding:10px 9px;border-bottom:1px solid var(--line);font-weight:800;white-space:nowrap}th.s{cursor:pointer}th.s:hover{color:var(--ink)}
td{padding:12px 9px;border-bottom:1px solid var(--line);font-weight:600}tr:last-child td{border:0}.n{text-align:right}.sc{overflow-x:auto}
tbody tr.cl{cursor:pointer}tbody tr.cl:hover{background:#f3f8f6}tr.me td{background:#0f8f6f0d}tr.tt td{font-weight:800;background:var(--bg)}tr.ot td{color:var(--mut)}
.rkn{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:9px;background:var(--bg);font-weight:800;font-size:12px}.rkn.t1{background:#e8a33a33;color:#a96d0a}
.nmc{display:flex;align-items:center;gap:10px}.dot{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:10px;flex:none}
.mini{height:6px;background:var(--bg);border-radius:4px;width:56px;display:inline-block;vertical-align:middle;margin-right:7px;overflow:hidden}.mini i{display:block;height:100%;border-radius:4px}
.pill{font-size:11px;padding:4px 10px;border-radius:99px;font-weight:800;white-space:nowrap}.ok{background:#0f8f6f18;color:var(--em)}.bad{background:#e5566d18;color:var(--ro)}.mid{background:#e8a33a22;color:#b27614}
.cc{font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:7px;color:#fff;white-space:nowrap}
.leg{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--mut);margin-top:12px;font-weight:600}.leg b{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}
svg{width:100%;height:auto;display:block}.rel{position:relative}
.tip{position:absolute;pointer-events:none;background:#0d1f1a;color:#fff;font-size:12px;padding:8px 11px;border-radius:10px;display:none;z-index:6;line-height:1.5;white-space:nowrap;box-shadow:0 10px 24px #0004}
.chips{display:flex;gap:8px;flex-wrap:wrap}.chip{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);background:#fff;padding:6px 12px;border-radius:99px;font:700 12px Manrope,sans-serif;cursor:pointer;color:var(--mut)}.chip i{width:9px;height:9px;border-radius:50%}.chip.on{color:var(--ink);border-color:var(--ink)}.chip.off i{opacity:.25}
.tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
select.s2{border:1.5px solid var(--line);border-radius:10px;padding:7px 12px;font:700 12.5px Manrope,sans-serif;background:#fff;color:var(--ink)}
.sg{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.sg>div{border:1px solid var(--line);border-radius:14px;padding:14px;background:linear-gradient(160deg,#fff,#f1f8f5)}
.sg small{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);font-weight:800}.sg b{display:block;font-size:24px;letter-spacing:-.8px;margin:4px 0}
.pb{height:6px;background:var(--bg);border-radius:4px;overflow:hidden;margin-top:6px}.pb i{display:block;height:100%;background:linear-gradient(90deg,#7ee8c8,var(--em));border-radius:4px}
.sh{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px}.sh .dot{width:52px;height:52px;border-radius:16px;font-size:14px}
.ins{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-weight:600;font-size:13px}.ins:last-child{border:0}.ins .ic{flex:none;width:30px;height:30px;border-radius:10px;background:#0f8f6f14;display:grid;place-items:center}
.reg path{stroke:#fff;stroke-width:1.2;cursor:pointer;transition:.15s}.reg path:hover{stroke:#0d1f1a;stroke-width:2}.reg path.on{stroke:#0d1f1a;stroke-width:2.4}
.mapw{background:linear-gradient(180deg,#e9f2ff,#dcebf5);border-radius:14px;overflow:hidden}
.hm td.c{text-align:center;font-weight:800;border-radius:0;border:1px solid #fff;color:#0d1f1a}
.hl{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-bottom:16px}
.hlc p{font-size:15.5px;line-height:1.5;margin:8px 0 12px;font-weight:600;color:#23362f}.hlc p b{color:var(--ink);font-weight:800}.hf{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:11px;color:var(--mut);font-weight:700;border-top:1px dashed var(--line);padding-top:10px}
.dlt{font-weight:800;font-size:11px;padding:2px 7px;border-radius:7px;white-space:nowrap}.dlt.pos{background:#0f8f6f18;color:var(--em)}.dlt.neg{background:#e5566d18;color:var(--ro)}
.mv{font-weight:800;font-size:12px;color:#9aa9a2}.mv.pos{color:var(--em)}.mv.neg{color:var(--ro)}.gn{color:var(--em);font-size:11.5px;font-weight:800}
.mx td{vertical-align:top}.mx td.mc{cursor:pointer;border-left:1px solid var(--line);transition:.15s}.mx td.mc:hover{background:#eef7f3}.mx .tc{background:#f7faf9}
.mv1{font-size:18px;font-weight:800;letter-spacing:-.4px}.mv2{font-size:11.5px;color:var(--mut);margin:2px 0 4px}.kd{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px}
.dz{display:flex;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}.dz:last-child{border:0}.dz svg{width:112px;flex:none}
.evl{max-height:560px;overflow:auto;margin-top:8px}.evh{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--mut);padding:12px 0 4px;display:flex;justify-content:space-between;border-top:1px solid var(--line);position:sticky;top:0;background:#fff}
.evi{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:12.5px}.evt{font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:7px;white-space:nowrap;min-width:104px;text-align:center}
.dot.sm{width:24px;height:24px;border-radius:8px;font-size:9px}.evx{flex:1;min-width:0}.evx small{color:var(--mut);margin-left:6px}.evdd{color:var(--mut);font-size:11.5px;white-space:nowrap}
.dw{position:fixed;inset:0;background:#04271f66;display:none;z-index:60}.dw.on{display:block}
.dwb{position:absolute;right:0;top:0;bottom:0;width:min(560px,100%);background:#fff;padding:calc(24px + env(safe-area-inset-top,0px)) 24px calc(24px + env(safe-area-inset-bottom,0px));overflow:auto;box-shadow:-20px 0 60px #0004;animation:slide .3s}
@keyframes slide{from{transform:translateX(40px);opacity:0}}.x{float:right;border:0;background:var(--bg);border-radius:10px;width:34px;height:34px;cursor:pointer;font-size:14px}
tr.sub td{background:#fafcfb;font-size:12.5px}tr.sub td:nth-child(3){padding-left:26px}.xp{font-size:11px;color:var(--em);font-weight:800;margin-left:8px}tr.rx{cursor:pointer}tr.rx:hover td{background:#eef7f3}optgroup{font-weight:800}
.foot{text-align:center;color:var(--mut);font-size:12px;margin-top:24px}
dialog{border:0;border-radius:20px;max-width:560px;padding:26px;box-shadow:0 30px 80px #0006;font-family:Manrope,sans-serif;color:var(--ink)}dialog::backdrop{background:#04271f99;backdrop-filter:blur(4px)}dialog p{color:var(--mut);line-height:1.7;font-size:13px}dialog b{color:var(--ink)}