@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');
:root{--ink:#151a4f;--navy:#272c7d;--blue:#0064ff;--green:#01ab09;--lime:#00e50a;--red:#e5484d;--amber:#f59e0b;--bg:#f3f5fb;--line:#e5e8f2;--line2:#eff1f7;--muted:#6b7194}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:'General Sans',system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;background:#dfe3ef;overflow:hidden}
.ic{flex:none;vertical-align:middle}
.stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
.cm{width:1080px;background:var(--bg);border-radius:22px;box-shadow:0 40px 100px rgba(10,11,35,.45);overflow:hidden;transform-origin:center center;flex:none}
/* header */
.cm-h{display:flex;align-items:center;gap:14px;background:#fff;border-bottom:1px solid var(--line);padding:12px 20px}
.fav{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;flex:none}
.fav img{width:24px;height:24px}
.dom{font-size:21px;font-weight:600;letter-spacing:-.015em;line-height:1.1;display:flex;gap:7px;align-items:center}
.dom .ic{color:var(--muted)}
.meta{font-size:12.5px;color:var(--muted);margin-top:3px;display:flex;gap:8px;align-items:center}
.dot{width:3px;height:3px;border-radius:50%;background:#b9bdd3}
.chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:99px;padding:2px 8px 2px 6px;font-weight:600;color:var(--ink);font-size:12px}
.search{margin-left:auto;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;padding:4px 4px 4px 12px;width:270px;color:var(--muted);font-size:13.5px;white-space:nowrap}
.search span{flex:1}
.btn{border-radius:10px;padding:8px 14px;font-weight:600;font-size:13.5px;border:1px solid var(--line);background:#fff;color:var(--ink);display:inline-flex;gap:7px;align-items:center;justify-content:center;white-space:nowrap}
.btn-b{background:var(--blue);border-color:var(--blue);color:#fff}
.btn-g{background:var(--green);border-color:var(--green);color:#fff}
.cta-top{padding:11px 16px;font-size:14px;border-radius:12px;box-shadow:0 6px 16px rgba(1,171,9,.28)}
.btn-w{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#fff}
.x{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);display:grid;place-items:center;flex:none}
/* body */
.cm-b{padding:14px 20px 16px;display:flex;flex-direction:column;gap:12px}
.r1{display:grid;grid-template-columns:292px repeat(5,1fr);gap:12px}
.r2,.r3{display:grid;grid-template-columns:1.6fr 1fr;gap:12px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 16px}
.c-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;gap:10px}
.c-t{font-size:14.5px;font-weight:600;display:flex;gap:8px;align-items:center}
.c-t .ic{color:var(--blue)}
.c-t .s{font-weight:500;color:var(--muted);font-size:12.5px}
.more{font-size:12.5px;font-weight:600;color:var(--blue);display:inline-flex;gap:4px;align-items:center;white-space:nowrap}
.legend{display:flex;gap:14px;font-size:12px;color:var(--muted)}
.lg{display:inline-flex;align-items:center;gap:6px}.lg:before{content:"";width:8px;height:8px;border-radius:3px;background:var(--c)}
/* hero + kpis */
.hero{border-radius:16px;padding:13px 16px 12px;color:#fff;background:radial-gradient(120% 150% at 100% 0%,#2f6bff 0%,#1d2a9a 48%,#151a4f 100%);position:relative;overflow:hidden}
.hero .h-l{font-size:12.5px;color:#c9d3ff;display:flex;gap:6px;align-items:center}
.hero .h-v{font-size:36px;font-weight:600;letter-spacing:-.03em;line-height:1;margin:9px 0 0;display:flex;align-items:baseline;gap:7px}
.hero .h-v .yoy{margin-left:auto;font-size:12px;letter-spacing:0;font-weight:500}.hero .h-v .yoy .muted{color:#c9d3ff}
.hero .h-v small{font-size:14px;color:#c9d3ff;font-weight:500;letter-spacing:0}
.hero .delta.down{color:#ffb4b6}.hero .muted{color:#c9d3ff}
.split{display:flex;height:7px;border-radius:99px;overflow:hidden;margin:12px 0 8px;background:rgba(255,255,255,.18)}
.split i{display:block;height:100%}
.sl{display:flex;gap:14px;font-size:12px;color:#dbe3ff}.sl b{color:#fff}
.bolt{position:absolute;right:-20px;bottom:-26px;opacity:.10}
.kpi{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column}
.k-l{font-size:12px;color:var(--muted);font-weight:500;display:flex;gap:6px;align-items:center;white-space:nowrap}
.k-l .ic{color:var(--blue)}
.k-v{font-size:24px;font-weight:600;letter-spacing:-.025em;line-height:1;margin:9px 0 6px}
.k-v small{font-size:12.5px;color:var(--muted);font-weight:500;margin-left:2px;letter-spacing:0}
.k-m{font-size:11.5px;color:var(--muted);margin-top:auto;line-height:1.3}
.k-m b{color:var(--ink)}
.delta{font-weight:600;font-size:12px;white-space:nowrap}.delta.up{color:#0f8a1a}.delta.down{color:var(--red)}
.muted{color:var(--muted)}
/* chart */
.chart{width:100%;height:auto;display:block}
.chart .grid{stroke:#edf0f7}
.chart .axis{font-size:11px;fill:#8a8fae;font-family:'General Sans',sans-serif}
.tip-t{font-size:11px;fill:#fff;font-weight:600;font-family:'General Sans',sans-serif}
/* lists */
.li{display:grid;grid-template-columns:1fr 92px 46px 44px;gap:10px;align-items:center;height:28px;border-bottom:1px solid var(--line2);font-size:13px;font-variant-numeric:tabular-nums}
.li:last-child{border-bottom:none}
.li-n{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden}
.li-n span{overflow:hidden;text-overflow:ellipsis}
.li-bar{display:block;height:7px;background:#eef1f8;border-radius:99px;overflow:hidden}
.li-bar i{display:block;height:100%;background:linear-gradient(90deg,#3898ec,#0064ff);border-radius:99px}
.li-bar.g i{background:linear-gradient(90deg,#00c853,#01ab09)}
.li-p{text-align:right}.li-v{text-align:right;color:var(--muted)}
.flag{border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.06);flex:none;object-fit:cover}
.fv{border-radius:4px;flex:none}
table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
th{font-size:11.5px;color:var(--muted);font-weight:500;text-align:right;padding:0 8px 4px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:0 8px;height:28px;border-bottom:1px solid var(--line2);text-align:right;white-space:nowrap}
tr:last-child td{border-bottom:none}
th:first-child,td:first-child{padding-left:0}th:last-child,td:last-child{padding-right:0}
.l{text-align:left}
.kw{font-weight:600;color:var(--blue)}
.up{color:#0f8a1a;font-weight:600;font-size:11px;margin-left:4px}.down{color:var(--red);font-weight:600;font-size:11px;margin-left:4px}
.new{background:#e6f1ff;color:#1f6fd1;font-size:10px;font-weight:700;padding:1px 5px;border-radius:5px;margin-left:5px}
.kd{display:inline-flex;align-items:center;gap:5px;font-weight:600}.kd:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--kd,#ccc)}
.drb{display:inline-block;min-width:28px;padding:2px 6px;border-radius:6px;background:#f1f3f9;font-weight:600;font-size:12px;text-align:center}
.cbar{width:110px}.cbar .li-bar{width:100%}
tr.me td{background:#f4fbf4}
tr.me td:first-child{padding-left:8px;border-radius:8px 0 0 8px}tr.me td:last-child{padding-right:8px;border-radius:0 8px 8px 0}
.dm{font-weight:600}
.you{background:#151a4f;color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:5px;margin-left:2px;overflow:visible!important}
.seg{display:inline-flex;background:#f1f3f9;border-radius:9px;padding:2px;gap:2px}
.seg span{padding:4px 9px;font-size:12px;font-weight:600;color:var(--muted);border-radius:7px}
.seg span.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(21,26,79,.12)}
/* cta */
.cta{border-radius:16px;background:radial-gradient(90% 220% at 0% 0%,#3640b8 0%,#272c7d 48%,#171b55 100%);color:#fff;padding:10px 12px 10px 16px;display:flex;align-items:center;gap:14px;position:relative;overflow:hidden}
.cta .zap{width:38px;height:38px;border-radius:11px;background:rgba(0,229,10,.14);color:var(--lime);display:grid;place-items:center;flex:none}
.cta-t{font-size:15.5px;font-weight:600;letter-spacing:-.01em}.cta-t em{font-style:normal;color:var(--lime)}
.cta-s{font-size:12.5px;color:#c9cdf5;margin-top:2px}
.cta-a{margin-left:auto;display:flex;gap:8px;align-items:center}
.cta .btn{padding:10px 16px;font-size:14px}
.src{font-size:11px;color:#9aa0bf;text-align:center;margin-top:-4px}
.m-only{display:none}
/* ---------------- mobile: full-screen sheet, fits 390x664 ---------------- */
@media (max-width:640px){
 body{background:var(--bg)}
 .stage{align-items:stretch}
 .cm{width:100%;height:100%;border-radius:0;box-shadow:none;transform:none!important;display:flex;flex-direction:column}
 .d-only{display:none!important}
 .m-only{display:block}
 .cm-h{padding:10px 14px;gap:10px}
 .fav{width:36px;height:36px;border-radius:10px}.fav img{width:20px;height:20px}
 .dom{font-size:18px}
 .meta{font-size:11.5px;margin-top:2px}
 .x{width:34px;height:34px;margin-left:auto}
 .cm-b{padding:10px 12px 12px;gap:10px;flex:1;min-height:0}
 .cm-b>*{flex-shrink:0}
 .meta{white-space:nowrap}
 .meta .m-only{display:inline}
 .hero{padding:12px 14px 10px}
 .hero .h-v{font-size:34px;margin:6px 0 4px}
 .hero .chart{height:40px;margin:6px 0 6px}
 .r1m.m-only{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .kpi{padding:10px 12px;border-radius:14px}
 .k-v{font-size:21px;margin:6px 0 0}
 .k-l{font-size:11.5px}
 .card{padding:10px 12px;border-radius:14px}
 .c-h{margin-bottom:4px}
 .li{grid-template-columns:1fr 46px 44px;height:31px;font-size:13px}
 .li .li-bar{display:none}
 .li-x{text-align:right;color:var(--muted);font-weight:600}
 .cta-m.m-only{display:flex;flex-direction:column}
 .cta-m .btn{padding:12px 16px;font-size:15px;border-radius:12px;box-shadow:0 6px 16px rgba(1,171,9,.25)}
 .cta-m .src{margin-top:0}
}

/* ================= live page additions ================= */
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit;padding:0}
.btn{cursor:pointer}
.cm{height:648px;display:flex;flex-direction:column;position:relative}
.cm-b{flex:1;min-height:0;position:relative}
.cm-h>div:nth-child(2){min-width:0}
.dom{white-space:nowrap}
.dom span{overflow:hidden;text-overflow:ellipsis;max-width:330px}
.dom a{display:inline-flex;color:var(--muted)}
.meta,.meta .chip{white-space:nowrap}
.dom a:hover{color:var(--blue)}
.fav img{border-radius:4px}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:13.5px;color:var(--ink);padding:6px 0}
.search input::placeholder{color:var(--muted)}
.search:focus-within{border-color:#9cc0ff;box-shadow:0 0 0 3px rgba(0,100,255,.12)}
.x{background:#fff;color:var(--ink)}
.x:hover{background:#f3f5fb}
.btn-g:hover{background:#019a08}
.btn-b:hover{background:#0057e0}
.more:hover{text-decoration:underline}
.seg button{padding:4px 9px;font-size:12px;font-weight:600;color:var(--muted);border-radius:7px}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(21,26,79,.12)}
.tabp[hidden]{display:none!important}
.empty{display:flex;align-items:center;justify-content:center;height:100%;min-height:90px;color:var(--muted);font-size:13px;text-align:center;padding:10px}
.fade-in{animation:fin .35s ease both}
@keyframes fin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* standalone page (opened directly, not in the iframe) */
html.standalone body{background:#e7eaf3}
html.embedded body{background:transparent}
html.embedded .cm{box-shadow:none}

/* ---------- loader ---------- */
.sk{background:linear-gradient(90deg,#eef1f8 0,#f8f9fc 40%,#eef1f8 80%);background-size:900px 100%;animation:sh 1.3s linear infinite;border-radius:8px}
.hero.skh{background:linear-gradient(90deg,#1d2a9a 0,#2b3bb8 40%,#1d2a9a 80%);background-size:900px 100%;animation:sh 1.3s linear infinite}
@keyframes sh{0%{background-position:-450px 0}100%{background-position:450px 0}}
.sk-l{height:11px;margin-top:10px}
.sk-v{height:22px;margin-top:12px;width:60%}
.skel-wrap{display:flex;flex-direction:column;gap:12px;flex:1;min-height:0;filter:saturate(.9);opacity:.75}
.skel-wrap.m-only{display:none}
.skel-wrap .r2,.skel-wrap .r3{flex:1}
.skel-wrap .card{display:flex;flex-direction:column}
.ld-ov{position:absolute;inset:0;display:grid;place-items:center;background:rgba(243,245,251,.35)}
.ld-card{width:420px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 60px rgba(21,26,79,.16);padding:22px 24px}
.ld-top{display:flex;gap:12px;align-items:center}
.ld-top h4{margin:0;font-size:18px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px}
.ld-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.spin{width:40px;height:40px;border-radius:12px;background:#eef4ff;display:grid;place-items:center;flex:none}
.spin i{width:20px;height:20px;border-radius:50%;border:2.5px solid #cfe0ff;border-top-color:var(--blue);animation:rot .8s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.prog{height:7px;border-radius:99px;background:#eef1f8;overflow:hidden;margin:16px 0 10px}
.prog i{display:block;height:100%;width:4%;background:linear-gradient(90deg,#3898ec,#0064ff);border-radius:99px;transition:width .5s ease}
.step{display:flex;gap:11px;align-items:center;padding:6px 0;font-size:13.5px;transition:color .2s}
.step .s-ic{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none}
.step.done .s-ic{background:#e5f8e7;color:#14822a}
.step.run .s-ic{border:2.5px solid #dbe6ff;border-top-color:#0064ff;animation:rot .8s linear infinite}
.step.wait{color:#a3a8c3}.step.wait .s-ic{border:2px dashed #d5d9e8}

/* ---------- state panels (limited / no data / errors / empty) ---------- */
.stp-wrap{flex:1;min-height:0;display:grid;place-items:center}
.stp{width:540px;max-width:100%;background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px 28px;box-shadow:0 18px 44px rgba(21,26,79,.08)}
.stp h4{margin:0;font-size:21px;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.stp .sub{font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.5}
.stp .sub b{color:var(--ink)}
.big-ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:14px}
.mini-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0 6px}
.mini-kpis .tile{background:#f6f8fc;border-radius:12px;padding:11px 12px}
.tile .t-l{font-size:11.5px;color:var(--muted)}
.tile .t-v{font-size:20px;font-weight:600;margin-top:4px;letter-spacing:-.02em}
.blist{margin:12px 0 16px;padding:0;list-style:none;font-size:13.5px;line-height:1.5}
.blist li{display:flex;gap:9px;padding:3px 0;align-items:flex-start}
.blist .ic{color:var(--green);margin-top:2px}
.stp .btn{padding:12px 18px;font-size:14.5px;border-radius:12px}
.stp .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.inrow{display:flex;gap:8px;border:1px solid var(--line);border-radius:12px;padding:5px;margin-top:16px}
.inrow input{flex:1;min-width:0;border:0;font:inherit;padding:8px 10px;outline:0;font-size:14px;color:var(--ink);background:transparent}
.inrow:focus-within{border-color:#9cc0ff;box-shadow:0 0 0 3px rgba(0,100,255,.12)}
.inrow .btn{padding:9px 16px;font-size:14px;border-radius:9px}
.hr{height:1px;background:var(--line);margin:20px 0 12px}

@media (max-width:640px){
 .cm{height:100%}
 .dom span{max-width:220px}
 .ld-card{width:calc(100% - 24px);padding:18px}
 .ld-top h4{max-width:220px;font-size:16px}
 .skel-wrap.m-only{display:flex}
 .skel-wrap .r1m{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .stp-wrap{place-items:start stretch;overflow:hidden}
 .stp{width:100%;padding:20px;border-radius:16px}
 .stp h4{font-size:19px}
 .mini-kpis{grid-template-columns:1fr 1fr}
 .seg button{padding:5px 9px}
 .m-trend.m-only{display:none}
 .tabp[data-panel="c"] .li:nth-child(n+5){display:none}
}
@media (max-width:640px) and (min-height:840px){
 .tabp[data-panel="c"] .li:nth-child(5){display:grid}
}
/* tall phones: there is room for the full trend chart (the hero sparkline is then redundant) */
@media (max-width:640px) and (min-height:780px){
 .m-trend.m-only{display:block}
 .hero.m-only .chart{display:none}
}
/* very short phone screens (landscape): allow scrolling inside the sheet rather than cutting content */
@media (max-width:640px) and (max-height:600px){.cm{overflow-y:auto}}

/* Large numbers in the hero (e.g. 128.7M): keep "/ month" and YoY on one line */
.hero .h-v small,.hero .h-v .yoy{white-space:nowrap}
.hero .h-v.mid{font-size:32px}
.hero .h-v.long{font-size:28px}