/* Rasa Lintang · Perkiraan Omzet
   Look follows the chosen reference: black frame and sidebar, a white panel inset in it, quiet bordered cards,
   one bright yellow that always means "forecast" or "attention". */
:root{
  --page:#E9EAEE; --frame:#111111; --side-t:#EDEDED; --side-m:#9A9A9A; --side-h:#1F1F1F; --side-c:#1C1C1C;
  --panel:#FFFFFF; --ink:#141414; --ink2:#454545; --muted:#6B6B6B; --line:#ECECEC; --soft:#F5F5F5; --track:#F1F1F1;
  --yellow:#FFD60A; --yellow-d:#E9BF00; --yellow-s:#FFEFA6; --yellow-xs:#FFFAE3;
  --bar:#1C1C1C; --fit:#9A9A9A; --up:#12804A; --down:#C9372A;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font:400 15px/1.5 'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.num,.big,table{font-variant-numeric:tabular-nums}
h1,h2,h3,p{margin:0}
h1,h2,h3{line-height:1.2}
a{color:inherit}
button,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.side :focus-visible,.ptop :focus-visible{outline-color:var(--yellow)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- frame ---------- */
.strip{display:none}
.frame{max-width:1440px;margin:16px auto;background:var(--frame);border-radius:30px;padding:12px;display:grid;grid-template-columns:244px minmax(0,1fr);gap:4px}
.side{color:var(--side-t);padding:14px 12px 12px 10px;display:flex;flex-direction:column;gap:6px;position:sticky;top:28px;align-self:start;height:calc(100vh - 56px);min-height:600px}
.side-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px 10px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;min-height:44px;min-width:0}
.mark{width:40px;height:40px;border-radius:50%;background:var(--yellow);color:var(--ink);display:grid;place-items:center;font-weight:800;font-size:14px;flex:none}
.logo-t b{display:block;font-size:17px;font-weight:700;white-space:nowrap;line-height:1.15}
.logo-t small{display:block;font-size:12px;color:var(--side-m);white-space:nowrap}
.side .side-x{display:none}
.demo-box{display:flex;align-items:center;gap:8px;background:var(--side-c);border-radius:999px;min-height:44px;padding:0 14px;font-size:13px;color:#C9C9C9;margin:0 2px 8px}
.demo-box svg{width:17px;height:17px;color:var(--yellow)}
.side-lab{font-size:12px;color:var(--side-m);font-weight:600;padding:12px 12px 4px}
.side-nav{display:flex;flex-direction:column;gap:2px}
.side-nav a,.side-nav button{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 14px;border-radius:999px;border:0;background:none;color:var(--side-t);text-decoration:none;font-size:14.5px;font-weight:500;text-align:left;width:100%}
.side-nav a:hover,.side-nav button:hover{background:var(--side-h)}
.side-nav a.on{background:var(--yellow);color:var(--ink);font-weight:700}
.side-nav a.wa{color:var(--yellow)}
.next{margin-top:auto;background:var(--side-c);border-radius:20px;padding:16px;color:var(--side-t)}
.next .k{font-size:11.5px;color:var(--side-m);font-weight:600}
.next h3{font-size:16px;font-weight:700;margin-top:6px}
.next p{font-size:12.5px;color:#BDBDBD;margin-top:2px}
.next .row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:12px}
.next .tags{display:flex;gap:6px;flex-wrap:wrap}
.next .tags span{font-size:11.5px;font-weight:700;color:var(--yellow);background:#2A2A2A;border-radius:6px;padding:3px 8px;white-space:nowrap}
.next .go{width:44px;height:44px;border-radius:50%;background:var(--yellow);color:var(--ink);display:grid;place-items:center;flex:none;text-decoration:none;transition:transform .2s ease}
.next .go:hover{transform:translateX(2px)}
.next-m{display:none}

.panel{background:var(--panel);border-radius:24px;min-width:0}
.ptop{display:none}
.pin{padding:26px 28px 24px;min-width:0}

/* controls */
.pill{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 18px;border-radius:999px;border:1px solid transparent;background:var(--soft);color:var(--ink);font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap}
.pill.line{background:var(--panel);border-color:#E3E3E3}
.pill.line:hover{border-color:#BDBDBD}
.pill.yellow{background:var(--yellow);color:var(--ink)}
.pill.yellow:hover{background:#FFE34D}
.round{width:46px;height:46px;border-radius:50%;border:1px solid #E6E6E6;background:var(--panel);display:grid;place-items:center;color:var(--ink);flex:none}
.round:hover{border-color:#BDBDBD}
.round.dark{background:#232323;border-color:#232323;color:#fff}
.round:disabled{opacity:.35;cursor:not-allowed}
.sel{position:relative;display:inline-flex;align-items:center}
.sel select{appearance:none;-webkit-appearance:none;min-height:46px;padding:0 42px 0 18px;border:1px solid #E3E3E3;border-radius:999px;background:var(--panel);font-weight:600;font-size:14px;color:var(--ink);cursor:pointer;max-width:100%}
.sel select:hover{border-color:#BDBDBD}
.sel svg{position:absolute;right:14px;width:17px;height:17px;pointer-events:none;color:var(--muted)}
.sel.on select{background:var(--yellow);border-color:var(--yellow)}
.sel.small select{min-height:44px;font-size:13px;padding:0 38px 0 14px}

/* hello */
.hello{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l who" "r r";gap:16px 24px;align-items:start}
.hello-l{grid-area:l}
.who{grid-area:who}
.hello-r{grid-area:r}
.hello-l{min-width:0}
.hello h1{font-size:30px;font-weight:600;letter-spacing:-.02em}
.attn{margin-top:8px;font-size:15px;color:var(--ink2);max-width:640px}
.attn b{color:var(--ink);font-weight:700}
.attn mark{background:var(--yellow);color:var(--ink);padding:0 4px;border-radius:4px;font-weight:700}
.dataline{margin-top:8px;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.dataline i{width:8px;height:8px;border-radius:50%;background:#BDBDBD;flex:none}
.dataline.ok i{background:var(--up);box-shadow:0 0 0 3px #DDF2E6}
.dataline.copy{color:#7A5A00} .dataline.copy i{background:var(--yellow-d);box-shadow:0 0 0 3px var(--yellow-s)}
.dataline.gen{color:var(--down)} .dataline.gen i{background:var(--down);box-shadow:0 0 0 3px #FBE3E0}
.hello-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.who{display:flex;align-items:center;gap:10px;padding-left:4px}
.ava{width:46px;height:46px;border-radius:50%;overflow:hidden;flex:none}
.ava svg{display:block;width:100%;height:100%}
.who-t b{display:block;font-size:14px;font-weight:700}
.who-t small{display:block;font-size:12px;color:var(--muted)}

/* ---------- ringkasan ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:24px}
.kpi{border:1px solid var(--line);border-radius:18px;padding:16px 18px 16px;min-width:0;display:flex;flex-direction:column;gap:4px}
.kpi .top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.kpi .lab{font-size:13px;color:var(--muted);font-weight:500}
.kpi .ic{width:38px;height:38px;border-radius:50%;background:var(--soft);display:grid;place-items:center;flex:none;color:var(--ink2)}
.kpi .ic svg{width:18px;height:18px}
.kpi .big{font-size:27px;font-weight:700;letter-spacing:-.02em;line-height:1.15;white-space:nowrap}
.kpi .dl{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.kpi .dl b{font-weight:700}
.sq{width:16px;height:16px;border-radius:4px;display:inline-grid;place-items:center;border:1.5px solid currentColor;flex:none}
.sq svg{width:11px;height:11px;stroke-width:2.6}
.up-t{color:var(--up)} .dn-t{color:var(--down)}
.kpi.hero{background:var(--yellow);border-color:var(--yellow)}
.kpi.hero .lab,.kpi.hero .dl{color:#3A3000}
.kpi.hero .ic{background:rgba(0,0,0,.08);color:var(--ink)}
.kpi.hero .up-t{color:#0B5E35} .kpi.hero .dn-t{color:#9E2318}

.dash{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);grid-template-areas:"chart cal" "chart plan" "conf plan" "reg plan";gap:16px;margin-top:16px;align-items:start}
.card{border:1px solid var(--line);border-radius:20px;padding:20px 22px;min-width:0;background:var(--panel)}
.ch{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.ch h2{font-size:18px;font-weight:600;letter-spacing:-.01em}
.sub{font-size:12.5px;color:var(--muted);margin-top:3px}
.c-chart{grid-area:chart} .c-cal{grid-area:cal} .c-conf{grid-area:conf} .c-reg{grid-area:reg} .c-plan{grid-area:plan;align-self:stretch}
.c-plan{align-self:stretch}

.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--muted);margin-top:12px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:4px}
.legend .la{background:var(--bar)} .legend .lf{background:var(--yellow)} .legend .lb{background:var(--yellow-s);width:16px}
.legend .lm{height:0;width:16px;border-top:2px solid var(--fit);border-radius:0}
.chartbox{position:relative;margin-top:8px;touch-action:pan-y}
.chartbox svg{display:block;width:100%}
.chartbox:focus-visible{outline-offset:4px;border-radius:8px}
.ctip{position:absolute;z-index:3;pointer-events:none;background:var(--frame);color:#fff;border-radius:12px;padding:9px 12px;font-size:12px;line-height:1.35;white-space:nowrap;box-shadow:0 10px 26px rgba(0,0,0,.25);opacity:0;transition:opacity .15s ease}
.ctip.on{opacity:1}
.ctip .t{font-size:11.5px;color:#BDBDBD;margin-bottom:4px}
.ctip .cols{display:flex;gap:16px}
.ctip .cols span{display:block;font-size:11px;color:#A8A8A8}
.ctip .cols b{display:block;font-size:13.5px;font-weight:700}
.ctip .ev{margin-top:4px;font-size:11.5px;color:var(--yellow)}
.ctip::after{content:"";position:absolute;left:var(--ax,50%);bottom:-5px;width:10px;height:10px;margin-left:-5px;background:var(--frame);transform:rotate(45deg);border-radius:2px}
.hint{font-size:12px;color:var(--muted);margin-top:8px}
.cread{margin-top:10px;background:var(--frame);color:#fff;border-radius:14px;padding:10px 14px;font-size:12px;line-height:1.35;min-height:62px}
.cread .t{font-size:11.5px;color:#BDBDBD;margin-bottom:4px}
.cread .cols{display:flex;gap:22px;flex-wrap:wrap}
.cread .cols span{display:block;font-size:11px;color:#A8A8A8}
.cread .cols b{display:block;font-size:14.5px;font-weight:700}
.cread .ev{margin-top:4px;font-size:12px;color:var(--yellow)}
.kpi .rng{display:block}
.kpi .rng b{display:block;font-size:14px;margin-top:1px}
.rgl{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:2px}
.rgl li{display:grid;grid-template-columns:150px minmax(0,1fr) 78px 62px;gap:12px;align-items:center;padding:8px 0;font-size:13.5px;border-top:1px solid var(--line)}
.rgl li:first-child{border-top:0}
.rgl .n{font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rgl em{font-style:normal;font-size:11px;font-weight:700;background:var(--yellow);border-radius:6px;padding:1px 6px}
.rgl .tr{height:12px;border-radius:999px;background:var(--track);overflow:hidden}
.rgl .tr i{display:block;height:100%;border-radius:999px;background:#2B2B2B}
.rgl li.top .tr i{background:var(--yellow)}
.rgl .v{text-align:right;color:var(--ink2)}
.rgl b{text-align:right;font-weight:700}
.sbars.rows{display:grid;grid-template-columns:minmax(0,1fr);height:auto;gap:2px;padding-top:22px;align-items:stretch}
.sref-v{position:absolute;top:0;bottom:0;border-left:1.5px dashed #BDBDBD;pointer-events:none}
.sref-v span{position:absolute;top:0;left:4px;font-size:11px;color:var(--muted)}
.sr-r{display:grid;grid-template-columns:52px minmax(0,1fr) 50px;gap:12px;align-items:center;min-height:44px;border:0;background:none;padding:0 0 0 12px;border-radius:12px;text-align:left}
.sr-r .mn{font-size:13px;font-weight:600}
.sr-r .tr{height:16px;display:block}
.sr-r .tr i{display:block;height:100%;border-radius:999px;background:#2B2B2B;transform-origin:left center}
.sr-r.pk .tr i{background:var(--yellow)}
.sr-r .pv{font-size:12.5px;font-weight:700;text-align:right;padding-right:8px}
.sr-r[aria-pressed="true"]{background:var(--soft)}


.calnav{display:flex;gap:6px}
.calrow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin-top:18px}
.cm{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;padding:4px 0;border-radius:14px;min-height:44px}
.cm .mn{font-size:12.5px;color:var(--muted);font-weight:500}
.cm .cv{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:13.5px;font-weight:700;border:2px solid transparent}
.cm.pk .cv{border-color:var(--yellow)}
.cm[aria-pressed="true"] .cv{background:var(--yellow);border-color:var(--yellow)}
.cm[aria-pressed="true"] .mn{color:var(--ink);font-weight:700}
.cm:hover .cv{border-color:#D4D4D4}
.cm.pk:hover .cv{border-color:var(--yellow-d)}
.caldet{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink2);display:grid;gap:6px}
.caldet h3{font-size:15px;font-weight:700;color:var(--ink)}
.caldet .r{display:flex;justify-content:space-between;gap:10px}
.caldet .r b{color:var(--ink);font-weight:700;text-align:right}
.calkey{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:4px}
.calkey i{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid var(--yellow);vertical-align:-2px;margin-right:5px}

.c-conf .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:16px}
.c-conf .lab{font-size:13px;color:var(--muted)}
.c-conf .big{font-size:36px;font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:8px 0 12px}
.thick{height:34px;border-radius:10px;background:var(--track);overflow:hidden}
.thick span{display:block;height:100%;background:var(--yellow);border-radius:10px;transform-origin:left center}
.c-conf .fn{font-size:12.5px;color:var(--muted);margin-top:10px}
.c-conf .fn b{color:var(--ink)}
.linkbtn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 4px;border:0;background:none;color:var(--ink);font-weight:700;font-size:13.5px;text-decoration:underline;text-underline-offset:3px}

.plan{list-style:none;margin:12px -10px 0;padding:0;display:grid;gap:2px}
.prow{display:grid;grid-template-columns:44px 96px minmax(0,1fr);gap:4px 10px;align-items:center;padding:8px 10px;border-radius:14px}
.prow.done{background:#F6F6F6}
.chk{width:44px;height:44px;border:0;background:none;display:grid;place-items:center;padding:0;border-radius:10px}
.chk i{width:22px;height:22px;border-radius:6px;border:2px solid #C4C4C4;display:grid;place-items:center;color:transparent}
.chk[aria-checked="true"] i{background:var(--ink);border-color:var(--ink);color:#fff}
.chk i svg{width:14px;height:14px;stroke-width:3}
.prow .d small{display:block;font-size:11.5px;color:var(--muted)}
.prow .d b{display:block;font-size:14.5px;font-weight:700;white-space:nowrap}
.prow .t b{display:block;font-size:14px;font-weight:600;line-height:1.3}
.prow .t small{display:block;font-size:12px;color:var(--muted)}
.prow .t .pkd{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--yellow);margin-right:6px;vertical-align:1px;box-shadow:0 0 0 1px var(--yellow-d)}
.plan-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--muted)}

/* ---------- musim ---------- */
.view{min-width:0}
#v-musim,#v-keyakinan,#v-wilayah,#v-metode{margin-top:22px}
.sbars{--h:260px;position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;align-items:end;height:var(--h);margin-top:22px;padding-top:28px}
.sref{position:absolute;left:0;right:0;border-top:1.5px dashed #BDBDBD;pointer-events:none}
.sref span{position:absolute;right:0;top:-20px;font-size:11.5px;color:var(--muted);background:var(--panel);padding-left:6px}
.sc{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;border:0;background:none;padding:0;border-radius:10px;min-width:0}
.sc i{display:block;width:min(34px,80%);border-radius:10px;background:#2B2B2B;transform-origin:bottom}
.sc.pk i{background:var(--yellow)}
.sc .pv{font-size:12px;font-weight:700;margin-bottom:6px;white-space:nowrap}
.sc[aria-pressed="true"] i{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
.slabs{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;margin-top:8px;font-size:12px;color:var(--muted);text-align:center}
.skey{display:flex;gap:6px 18px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:12px}
.skey i{display:inline-block;vertical-align:middle;margin-right:6px}
.skey .kl{width:18px;border-top:1.5px dashed #9A9A9A}
.skey .ky{width:12px;height:12px;border-radius:4px;background:var(--yellow)}
.sdet{margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--soft);font-size:13.5px;color:var(--ink2);min-height:44px}
.sdet b{color:var(--ink)}
.peaks{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:16px}
.pk-c{border:1px solid var(--line);border-radius:20px;padding:18px 20px}
.pk-c .w{font-size:12px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:6px}
.pk-c .w svg{width:16px;height:16px}
.pk-c h3{font-size:18px;font-weight:700;margin-top:6px}
.pk-c .val{font-size:26px;font-weight:700;letter-spacing:-.02em;margin-top:4px}
.pk-c p{font-size:13.5px;color:var(--ink2);margin-top:6px}
.pk-c.hot{background:var(--yellow);border-color:var(--yellow)}
.pk-c.hot .w{color:#3A3000}
.pk-c.note{background:var(--frame);border-color:var(--frame);color:#EDEDED}
.pk-c.note .w{color:var(--yellow)} .pk-c.note p{color:#CFCFCF}

/* ---------- keyakinan ---------- */
.confv{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
.strips{display:grid;gap:4px;margin-top:16px}
.strip-r{display:grid;grid-template-columns:96px minmax(0,1fr) 190px;gap:14px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.strip-r:first-child{border-top:0}
.strip-r .m{font-weight:700;font-size:14px}
.strip-r .m small{display:block;font-size:12px;color:var(--muted);font-weight:500}
.track{position:relative;height:30px;border-radius:999px;background:var(--track)}
.track .bd{position:absolute;top:4px;bottom:4px;border-radius:999px;background:var(--yellow);transform-origin:center}
.track .pt{position:absolute;top:0;bottom:0;width:3px;margin-left:-1.5px;background:var(--ink);border-radius:2px}
.strip-r .v{text-align:right}
.track .mid{position:absolute;left:50%;top:-4px;bottom:-4px;border-left:1px dashed #BDBDBD}
.strip-k{display:grid;grid-template-columns:96px minmax(0,1fr) 190px;gap:14px;font-size:11.5px;color:var(--muted)}
.strip-k .kk{display:flex;justify-content:space-between}
.strip-k b{font-weight:600}
.strip-r .v b{display:block;font-size:15px;font-weight:700}
.strip-r .v span{display:block;font-size:12px;color:var(--muted)}
.acc .big{font-size:44px;font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:10px 0 6px}
.acc p{font-size:13.5px;color:var(--ink2)}
.acc ul{list-style:none;margin:14px 0 0;padding:0;display:grid}
.acc li{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink2)}
.acc li b{color:var(--ink);text-align:right}

/* ---------- wilayah ---------- */
.vh h2{font-size:22px;font-weight:600;letter-spacing:-.01em}
.regions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:16px}
.rg{border:1px solid var(--line);border-radius:20px;padding:16px 18px;background:var(--panel);text-align:left;display:flex;flex-direction:column;gap:2px;min-width:0;transition:transform .2s ease,border-color .2s ease}
.rg:hover{transform:translateY(-2px);border-color:#CFCFCF}
.rg[aria-pressed="true"]{border:2px solid var(--ink);padding:15px 17px}
.rg .n{font-weight:700;font-size:15px}
.rg .fast{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;background:var(--yellow);border-radius:6px;padding:2px 8px;margin-top:4px}
.rg .fast svg{width:13px;height:13px;stroke-width:2.6}
.rg .tot{font-size:24px;font-weight:700;letter-spacing:-.02em;margin-top:8px}
.rg .s{font-size:12px;color:var(--muted)}
.rg svg.spark{width:100%;height:60px;margin:10px 0 6px;display:block}
.rg .row{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--ink2);padding-top:6px;border-top:1px solid var(--line);margin-top:4px}
.rg .row b{color:var(--ink)}
.rg-key{font-size:12px;color:var(--muted);margin-top:12px;display:flex;gap:14px;flex-wrap:wrap}
.rg-key i{display:inline-block;width:16px;height:0;border-top:2px solid var(--bar);vertical-align:3px;margin-right:6px}
.rg-key i.f{border-top:2px dashed var(--yellow-d)}

/* ---------- metode ---------- */
.metv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.method p{font-size:14px;color:var(--ink2);margin-top:10px}
.method p:first-of-type{margin-top:0}
.method p b{color:var(--ink)}
.method h2{font-size:18px;font-weight:600;margin-bottom:12px}
#tblWrap{margin-top:14px;max-height:520px;overflow:auto;border-radius:12px;border:1px solid var(--line)}
.dtab{width:100%;border-collapse:collapse;font-size:13px}
.dtab th{position:sticky;top:0;background:var(--soft);text-align:left;font-weight:600;color:var(--muted);padding:9px 12px;font-size:12px}
.dtab td{padding:8px 12px;border-top:1px solid var(--line);white-space:nowrap}
.dtab td+td,.dtab th+th{text-align:right}
.dtab tr.fc td{background:var(--yellow-xs)}

/* ---------- footer ---------- */
.foot{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.foot p{font-size:12.5px;color:var(--muted);max-width:540px}
.foot-a{display:flex;gap:8px;flex-wrap:wrap}

/* states */
.state{display:grid;gap:14px;margin-top:22px}
.state .sk{height:140px;border-radius:20px;background:var(--soft)}
.state p{font-size:14px;color:var(--muted)}
.errbox{border:1px solid var(--line);border-radius:20px;padding:22px;max-width:560px}
.errbox h2{font-size:19px;margin-bottom:6px}
.errbox p{color:var(--ink2);margin-bottom:14px}

/* guide */
.guide{position:fixed;z-index:96;right:28px;bottom:28px;background:var(--frame);color:#fff;border-radius:22px;padding:18px 20px 14px;box-shadow:0 20px 50px rgba(0,0,0,.35);width:380px;max-width:calc(100vw - 24px)}
.g-st{font-size:12.5px;color:var(--yellow);font-weight:600}
.guide h3{font-size:17px;font-weight:700;margin:4px 0 6px}
.guide p{font-size:14px;color:#DDD;line-height:1.5}
.g-b{display:flex;justify-content:space-between;align-items:center;margin-top:14px;gap:8px}
.guide button{min-height:44px;padding:0 18px;border-radius:999px;font-weight:700;font-size:14px;border:0}
.g-skip{background:none;color:#CFCFCF;text-decoration:underline;text-underline-offset:3px}
.g-next{background:var(--yellow);color:var(--ink)}
.spot{box-shadow:0 0 0 3px var(--yellow),0 0 0 9px rgba(255,214,10,.3)!important}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:85;opacity:0;pointer-events:none;transition:opacity .25s ease}
.scrim.on{opacity:1;pointer-events:auto}

/* motion: once, transform and opacity only */
.rise{animation:rise .45s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 60ms)}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.growx{animation:growx .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:.25s}
@keyframes growx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.growy{animation:growy .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 30ms + 100ms)}
@keyframes growy{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.view.swap{animation:rise .3s cubic-bezier(.2,.7,.2,1) both}
svg .gb{transform-box:fill-box;transform-origin:bottom}

/* ---------- 1024 to 1279 ---------- */
@media (max-width:1279px) and (min-width:1024px){
  .frame{margin:10px;grid-template-columns:224px minmax(0,1fr)}
  .pin{padding:22px 22px 22px}
  .who-t{display:none}
  .rgl li{grid-template-columns:130px minmax(0,1fr) 72px 58px}
  .kpi .big{font-size:24px}
  .kpis{gap:12px}
  .hello h1{font-size:27px}
}

/* ---------- below 1024: sidebar becomes a drawer ---------- */
@media (max-width:1023px){
  body{background:var(--frame)}
  .strip{display:flex;justify-content:space-between;align-items:center;min-height:44px;padding:0 16px;font-size:13px;font-weight:600;color:#D6D6D6;text-decoration:none;background:var(--frame)}
  .strip span:first-child{display:inline-flex;align-items:center;gap:6px}
  .strip svg{width:17px;height:17px}
  .strip-tag{font-weight:500;color:var(--side-m);font-size:12px}
  .frame{display:block;margin:0;border-radius:0;padding:0;background:var(--frame)}
  .side{position:fixed;z-index:90;left:0;top:0;bottom:0;height:auto;min-height:0;width:min(320px,86vw);background:var(--frame);padding:14px 14px calc(16px + env(safe-area-inset-bottom));overflow:auto;transform:translateX(-105%);visibility:hidden;transition:transform .3s cubic-bezier(.2,.7,.2,1),visibility 0s linear .3s}
  .side.open{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .side .side-x{display:grid}
  .next{margin-top:18px}
  .panel{background:transparent;border-radius:0}
  .ptop{display:block;position:sticky;top:-62px;z-index:50;background:var(--frame);padding:0 16px 8px}
  .ptop-phone{display:flex;align-items:center;gap:8px;min-height:62px}
  .ptop-phone .logo{flex:1;color:#fff}
  .ptop-phone .pill{min-height:44px;padding:0 14px;font-size:13.5px}
  .vpills{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
  .vpills::-webkit-scrollbar{display:none}
  .vpills a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;color:#D6D6D6;text-decoration:none;font-size:14px;font-weight:500;background:#1F1F1F}
  .vpills a.on{background:var(--yellow);color:var(--ink);font-weight:700}
  .pin{background:var(--panel);border-radius:24px 24px 0 0;padding:22px 16px 28px;min-height:calc(100vh - 110px)}
  .help-d,.who{display:none}
  .hello{grid-template-columns:minmax(0,1fr);grid-template-areas:"l" "r"}
  .hello-r{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .sel select{width:100%}
  .hello-r .sel{width:100%}
  .dash{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"chart chart" "cal conf" "reg reg" "plan next"}
  .next-m{display:block;grid-area:next;margin-top:0;align-self:stretch}
  .confv,.metv{grid-template-columns:minmax(0,1fr)}
  .regions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guide{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));width:auto;margin:0 auto}
  .foot{flex-direction:column;align-items:flex-start}
}

/* ---------- phone ---------- */
@media (max-width:719px){
  .hello h1{font-size:25px}
  .attn{font-size:14.5px}
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:18px}
  .kpi.hero{grid-column:1 / -1;padding:18px}
  .kpi.hero .big{font-size:34px}
  .kpi:not(.hero){padding:12px 12px;border-radius:16px}
  .kpi:not(.hero) .ic{display:none}
  .kpi:not(.hero) .lab{font-size:12px;line-height:1.3;min-height:31px}
  .kpi:not(.hero) .big{font-size:17px;white-space:normal}
  .kpi:not(.hero) .dl{font-size:11.5px;line-height:1.35}
  .kpi:not(.hero) .sq{display:none}
  .dash{grid-template-columns:minmax(0,1fr);grid-template-areas:"chart" "cal" "conf" "reg" "plan" "next";gap:14px}
  .card{padding:18px 16px;border-radius:20px}
  .ch h2{font-size:17px}
  .cm .cv{width:44px;height:44px;font-size:12.5px}
  .c-conf .cols{gap:14px}
  .c-conf .big{font-size:30px}
  .thick{height:26px;border-radius:8px}
  .prow{grid-template-columns:44px 84px minmax(0,1fr);gap:2px 8px;padding:8px}
  .plan{margin:12px -8px 0}
  .sbars{gap:4px;--h:220px}
  .slabs{gap:4px;font-size:11px}
  .sc .pv{font-size:11px}
  .strip-r{grid-template-columns:1fr auto;gap:6px 10px}
  .strip-r .track{grid-column:1 / -1;grid-row:2}
  .strip-k{grid-template-columns:minmax(0,1fr)}
  .strip-k span:not(.kk){display:none}
  .regions{grid-template-columns:minmax(0,1fr)}
  .rgl li{grid-template-columns:minmax(0,1fr) 70px 54px;gap:4px 10px}
  .rgl .tr{grid-column:1 / -1;grid-row:2}
  .cread .cols{gap:14px}
}

@media (prefers-reduced-motion:reduce){
  .rise,.growx,.growy,.view.swap{animation:none}
  .side,.scrim,.ctip,.rg,.next .go{transition:none}
  .rg:hover,.next .go:hover{transform:none}
}