/* Growth OS: gaya SaaS modern ringkas, identitas oranye */
:root{
  --bg:#F6F6F8;--surface:#fff;--surface2:#EEEFF3;--sub:#FAFAFB;--ink:#14151A;--muted:#6B6F7B;--line:#E6E7EC;
  --primary:#EE6A14;--on-primary:#fff;--primary-soft:#FDE8D8;
  --mint:#1F9D63;--mint-ink:#11704A;--mint-soft:#DCF2E6;
  --pink:#D93F3F;--pink-ink:#B02525;--pink-soft:#FBE2E0;
  --amber:#C79A00;--amber-ink:#6F5300;--amber-soft:#FAEFC2;
  --blue:#3B7DD8;--blue-ink:#1F5AAA;--blue-soft:#E0EBFA;
  --dock:#FFFFFF;--dock-ink:#6B6F7B;
  --head:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;--body:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  --r:12px;--nav-h:76px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0F1013;--surface:#17181C;--surface2:#24252B;--sub:#1C1D22;--ink:#F1F2F5;--muted:#A0A4AF;--line:#2B2D34;
  --primary:#FF7B2E;--on-primary:#1C0E04;--primary-soft:#3A2113;--mint:#3FCB8A;--mint-ink:#4FD99A;--mint-soft:#10301F;
  --pink:#FF6B6B;--pink-ink:#FF8585;--pink-soft:#3C1717;--amber:#E9BE2B;--amber-ink:#EBC445;--amber-soft:#3A3010;
  --blue:#6FA3F0;--blue-ink:#8DB7F5;--blue-soft:#172B49;--dock:#1C1D22;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0F1013;--surface:#17181C;--surface2:#24252B;--sub:#1C1D22;--ink:#F1F2F5;--muted:#A0A4AF;--line:#2B2D34;
  --primary:#FF7B2E;--on-primary:#1C0E04;--primary-soft:#3A2113;--mint:#3FCB8A;--mint-ink:#4FD99A;--mint-soft:#10301F;
  --pink:#FF6B6B;--pink-ink:#FF8585;--pink-soft:#3C1717;--amber:#E9BE2B;--amber-ink:#EBC445;--amber-soft:#3A3010;
  --blue:#6FA3F0;--blue-ink:#8DB7F5;--blue-soft:#172B49;--dock:#1C1D22;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:14px;line-height:1.5}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--head);margin:0;font-weight:600;line-height:1.2}
p{margin:0}
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.s{width:16px;height:16px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* kerangka */
.app{min-height:100vh;display:flex;flex-direction:column}
.side{display:none}
.top{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:10px 16px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--head);font-weight:700;font-size:15px}
.top .grow{flex:1;min-width:0}
.sr{display:none;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px;padding:7px 12px;color:var(--muted);background:var(--sub);min-width:340px;text-align:left}
.sr kbd{margin-left:auto;font:11px ui-monospace,Menlo,monospace;border:1px solid var(--line);border-radius:5px;padding:1px 6px;background:var(--surface)}
.iconbtn{border:1px solid var(--line);background:var(--surface);border-radius:9px;width:36px;height:36px;display:grid;place-items:center;color:var(--ink)}
.avatar{width:34px;height:34px;border-radius:9px;background:var(--primary);color:var(--on-primary);border:0;display:grid;place-items:center;font-family:var(--head);font-weight:700}
.demo{font-size:11px;font-weight:600;letter-spacing:.04em;background:var(--primary-soft);color:var(--primary);padding:3px 9px;border-radius:99px;white-space:nowrap}
.btn.cta{display:none}
main{flex:1;padding:16px 16px calc(var(--nav-h) + 28px);width:100%;max-width:1280px;margin-inline:auto;min-width:0}
.tabs{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:30;background:var(--dock);border-radius:20px;display:grid;grid-template-columns:repeat(6,1fr);padding:5px;border:1px solid var(--line);box-shadow:0 8px 24px rgba(238,106,20,.12),0 2px 8px rgba(20,21,26,.08)}
.tab{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;font-size:10.5px;font-weight:500;color:var(--dock-ink);border-radius:15px;position:relative}
.tab[aria-current="page"]{background:var(--primary-soft);color:var(--primary);font-weight:600}
.tab .n{position:absolute;top:2px;right:8px;background:var(--primary);color:#fff;border-radius:99px;font-size:9.5px;padding:0 5px;min-width:15px}
@media (min-width:900px){
  .app{display:grid;grid-template-columns:240px 1fr;grid-template-rows:auto 1fr}
  .side{display:flex;flex-direction:column;gap:2px;grid-row:1 / span 2;padding:14px 12px;background:var(--surface);border-right:1px solid var(--line);position:sticky;top:0;height:100vh;overflow-y:auto}
  .side .brand{padding:6px 8px 10px;font-size:15px}
  .grp{font-size:11px;letter-spacing:.06em;color:var(--muted);padding:14px 10px 6px;font-weight:600}
  .nav{display:flex;align-items:center;gap:10px;background:none;border:0;padding:8px 10px;border-radius:8px;color:var(--muted);font-weight:500;text-align:left;width:100%}
  .nav:hover{background:var(--surface2);color:var(--ink)}
  .nav[aria-current="page"]{background:var(--primary-soft);color:var(--primary)}
  .nav .n{margin-left:auto;font-size:11px;background:var(--primary);color:#fff;border-radius:99px;padding:1px 7px}
  .me{margin-top:auto;display:flex;gap:10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:10px;background:none;text-align:left;width:100%}
  .me .av{width:30px;height:30px;border-radius:8px;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;font-weight:700;flex:none}
  .tabs,.top .brand,.top .iconbtn.m{display:none}
  .top{padding:12px 28px}.sr{display:flex}.btn.cta{display:inline-flex}
  .top .avatar{display:none}
  main{padding:24px 28px 56px}
}
@media (max-width:899px){.me,.grp{display:none}}

/* header halaman */
.ph{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.ph h1{font-size:24px}.bc{color:var(--muted);font-size:12.5px;margin-bottom:4px}
.ph .sub{color:var(--muted);font-size:13px;margin-top:4px;max-width:760px}

/* komponen */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;min-width:0}
.card.flat{background:var(--sub);border-style:dashed}
.card.p0{padding:0}
.card.p0>.sec-t{padding:14px 16px;margin:0;border-bottom:1px solid var(--line)}
.stack{display:flex;flex-direction:column;gap:16px;min-width:0}
.grid{display:grid;gap:14px;min-width:0}
.sec-t{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px}
.sec-t h3{font-size:15px}
.link{background:none;border:0;color:var(--primary);font-weight:600;font-size:13px;padding:4px 0}
.muted{color:var(--muted)}.small{font-size:13px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--primary);border-radius:9px;padding:8px 14px;font-weight:600;font-size:13px;background:var(--primary);color:var(--on-primary);white-space:nowrap}
.btn.ghost{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn.sm{padding:5px 10px;font-size:12px}
.btn:disabled{opacity:.55;cursor:wait}
.pill{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:99px;white-space:nowrap}
.pill.mint{background:var(--mint-soft);color:var(--mint-ink)}.pill.pink{background:var(--pink-soft);color:var(--pink-ink)}
.pill.amber{background:var(--amber-soft);color:var(--amber-ink)}.pill.primary{background:var(--primary-soft);color:var(--primary)}
.pill.gray{background:var(--surface2);color:var(--muted)}.pill.blue{background:var(--blue-soft);color:var(--blue-ink)}
.seg{display:inline-flex;background:var(--surface2);border-radius:8px;padding:3px;gap:2px;max-width:100%;overflow-x:auto}
.seg button{border:0;background:none;padding:5px 11px;border-radius:6px;font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(20,20,60,.15)}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.chipb{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:5px 12px;font-size:12.5px;font-weight:500;white-space:nowrap;color:var(--muted)}
.chipb[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);min-width:0}
.row:last-child{border-bottom:0;padding-bottom:0}.row:first-child{padding-top:0}
.row .main{flex:1;min-width:0}.row .t{font-weight:600;overflow-wrap:anywhere}.row .end{text-align:right;flex:none}
.ico{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;flex:none}
.ico.mint{background:var(--mint-soft);color:var(--mint-ink)}.ico.pink{background:var(--pink-soft);color:var(--pink-ink)}
.ico.amber{background:var(--amber-soft);color:var(--amber-ink)}.ico.primary{background:var(--primary-soft);color:var(--primary)}.ico.blue{background:var(--blue-soft);color:var(--blue-ink)}
.pos{color:var(--mint-ink)}.neg{color:var(--pink-ink)}
.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;background:var(--surface2);padding:2px 6px;border-radius:6px;overflow-wrap:anywhere;word-break:break-all}

/* kpi + sparkline */
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.kpi .l{font-size:12.5px;color:var(--muted)}
.kpi .v{font-family:var(--head);font-weight:600;font-size:21px;white-space:nowrap}
.kpi .f{display:flex;justify-content:space-between;align-items:flex-end;gap:8px;min-height:32px}
.kpi .d{font-size:11.5px;color:var(--muted)}
.kpi svg{max-width:90px;height:30px;flex:none}
.kpis.k4{grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.kpis.k4{grid-template-columns:repeat(4,1fr)}.kpis{grid-template-columns:repeat(3,1fr)}.kpi .v{font-size:24px}.g-home{grid-template-columns:1.7fr 1fr}.g-2{grid-template-columns:1fr 1fr}}
.chart svg{display:block;width:100%;height:auto}
.chart text{font-family:var(--body);font-size:11px;fill:var(--muted)}
.legend{display:flex;gap:14px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px}

/* tabel */
.tw{overflow-x:auto;max-width:100%}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:620px}
th{font-size:12px;font-weight:600;color:var(--muted);text-align:right;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--sub)}
td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
th:first-child,td:first-child{text-align:left}
tbody tr:hover td{background:var(--sub)}
tr:last-child td{border-bottom:0}
td .btn,td select{padding:4px 9px;font-size:12px}
.card.p0 .tw table{margin:0}

/* produk */
.pcard{display:flex;flex-direction:column;gap:10px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);min-width:0}
.pcard .head{display:flex;gap:12px;align-items:flex-start}
.score{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;font-family:var(--head);font-weight:700;font-size:16px;flex:none}
.score.hi{background:var(--mint-soft);color:var(--mint-ink)}.score.mid{background:var(--amber-soft);color:var(--amber-ink)}.score.lo{background:var(--pink-soft);color:var(--pink-ink)}
.meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;color:var(--muted)}
.fac{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;font-size:12px}
.fac div{display:flex;flex-direction:column;gap:3px}
.bar{height:5px;border-radius:99px;background:var(--surface2);overflow:hidden}
.bar i{display:block;height:100%;background:var(--primary);border-radius:99px}
.fac .bar i.est{background:repeating-linear-gradient(45deg,var(--primary),var(--primary) 4px,var(--primary-soft) 4px,var(--primary-soft) 8px)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.search{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:0 12px;color:var(--muted)}
.search input{flex:1;border:0;background:none;color:var(--ink);padding:9px 0;font:inherit;min-width:0}
.search input:focus-visible{outline:none}.search:focus-within{border-color:var(--primary)}

/* form */
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500}
.field select,.field input,.field textarea,.sel,.inp{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:9px;padding:8px 11px;font:inherit;min-width:0}
.field textarea,.inp.ta{resize:vertical;min-height:70px;font-size:13px}
.frm{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.login{grid-column:1/-1;grid-row:1/-1;width:100%;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:max(20px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));box-sizing:border-box;background:radial-gradient(900px 500px at 50% -10%,var(--primary-soft,#FFF1E8),transparent 70%),var(--bg)}
.login .card{width:100%;max-width:420px;margin:0 auto;display:flex;flex-direction:column;gap:16px;padding:32px 28px;box-sizing:border-box;box-shadow:0 10px 40px rgba(20,20,40,.08)}
.login .brand{font-size:19px;white-space:nowrap}
.login .card h1,.login .card h2{margin:0}
@media(max-width:480px){.login{padding:16px}.login .card{padding:26px 20px;max-width:100%}}
.err{background:var(--pink-soft);color:var(--pink-ink);padding:9px 12px;border-radius:9px;font-size:13px}
.loading{padding:40px;text-align:center;color:var(--muted)}
.dec{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.dec.pending{border-color:var(--primary)}
.beat{display:flex;gap:10px;font-size:14px}.beat b{font-family:var(--head);color:var(--primary);flex:none;width:44px;font-size:12.5px;padding-top:2px}
.eng{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:10px}
.engb{display:flex;align-items:center;gap:8px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px;font-weight:600}
.attn{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);text-align:left;background:none;border-left:0;border-right:0;border-top:0;width:100%;align-items:center}
.attn:last-child{border-bottom:0}.attn small{display:block;color:var(--muted);font-size:12.5px;font-weight:400}

/* studio */
.board{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:1100px){.board{grid-template-columns:repeat(4,1fr)}}
.col{background:var(--sub);border:1px solid var(--line);border-radius:var(--r);padding:10px;display:flex;flex-direction:column;gap:10px;min-width:0;align-content:start}
.col>h4{font-size:13px;display:flex;justify-content:space-between;align-items:center;padding:2px 4px;color:var(--muted)}
.ccard{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.ccard .hk{font-weight:600;font-size:14px;overflow-wrap:anywhere}
.ccard details summary{cursor:pointer;color:var(--primary);font-size:12.5px;font-weight:600}
.ccard textarea,.ccard input{width:100%}
.ccard .acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.spin{display:inline-block;width:12px;height:12px;border:2px solid var(--primary-soft);border-top-color:var(--primary);border-radius:50%;animation:sp 1s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}
.vid{aspect-ratio:9/16;max-height:150px;background:linear-gradient(160deg,var(--primary-soft),var(--surface2));border-radius:8px;display:grid;place-items:center;color:var(--muted);font-size:12px;text-align:center;padding:8px}

/* palette, toast */
.pal-bg{position:fixed;inset:0;background:rgba(15,14,30,.45);z-index:70;display:flex;justify-content:center;align-items:flex-start;padding:12vh 14px 0}
.pal{background:var(--surface);border:1px solid var(--line);width:100%;max-width:560px;border-radius:14px;overflow:hidden;box-shadow:0 20px 50px rgba(10,10,20,.3)}
.pal input{width:100%;border:0;border-bottom:1px solid var(--line);padding:14px 16px;font:inherit;font-size:15px;background:none;color:var(--ink)}
.pal input:focus-visible{outline:none}
.pal .it{display:flex;gap:10px;align-items:center;padding:10px 16px;width:100%;border:0;background:none;text-align:left}
.pal .it[aria-selected="true"]{background:var(--primary-soft);color:var(--primary)}
.pal .it small{margin-left:auto;color:var(--muted)}
.pal .lst{max-height:340px;overflow-y:auto}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--nav-h) + 20px);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:13.5px;font-weight:500;z-index:80;max-width:calc(100vw - 32px)}
@media (min-width:900px){.toast{bottom:28px}}

.loop{display:flex;align-items:stretch;gap:4px;overflow-x:auto;padding:4px 0 6px}
.lst{flex:1 0 92px;min-width:92px;background:var(--surface2);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:2px;border:1px solid transparent}
.lst b{font-family:'Bricolage Grotesque','Calibri',sans-serif;font-size:20px;color:var(--muted)}.lst span{font-weight:600;font-size:12.5px}.lst small{font-size:11px;color:var(--muted);line-height:1.25}
.lst.on{background:var(--primary-soft);border-color:var(--primary)}.lst.on b{color:var(--primary)}
.ar{align-self:center;color:var(--muted);font-style:normal;flex:0 0 auto}
.gform{display:grid;grid-template-columns:1fr;gap:12px}@media(min-width:900px){.gform{grid-template-columns:repeat(2,1fr)}}
.rep{white-space:pre-wrap;font:13px/1.55 'Instrument Sans',system-ui,sans-serif;margin:0}
.btn.danger{background:var(--pink-ink);color:#fff}
.row .main{min-width:0;overflow-wrap:anywhere}
.tl th,.tl td{text-align:left}.mo{display:inline}@media(min-width:900px){.mo{display:none}}
.bn{line-height:1.1;font-size:14px}.bn{letter-spacing:-.01em}

/* Progres alur + uji end-to-end */
.ptl{display:flex;flex-direction:column;gap:0}
.pt{display:flex;gap:12px;position:relative;padding:0 0 16px}
.pt:last-child{padding-bottom:0}
.pt:not(:last-child)::before{content:"";position:absolute;left:13px;top:28px;bottom:0;width:2px;background:var(--line)}
.pn{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:700;background:var(--surface2);color:var(--muted);border:2px solid var(--line);z-index:1}
.pt.active .pn{background:var(--mint-soft);color:var(--mint-ink);border-color:var(--mint-ink)}
.pt.shadow .pn{background:var(--amber-soft);color:var(--amber-ink);border-color:var(--amber-ink)}
.pt.blocked .pn{background:var(--pink-soft);color:var(--pink-ink);border-color:var(--pink-ink)}
.pb{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.ph2{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ph2 .pill{margin-left:auto}
.pnote{color:var(--amber-ink);background:var(--amber-soft);padding:5px 9px;border-radius:8px;margin-top:3px;overflow-wrap:anywhere}
.rb{padding:8px 0}
.rbh{display:flex;justify-content:space-between;gap:8px;font-size:13px;margin-bottom:5px}
.rbh b{font-weight:600;white-space:nowrap}
.bar.hot i{background:var(--amber-ink)}.bar.full i{background:var(--pink-ink)}
.pbar{display:flex;flex-direction:column;gap:6px;margin:4px 0 12px}
.tst{display:flex;flex-direction:column}
.ts{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
.ts .pill{flex:none;margin-top:1px;min-width:66px;text-align:center}
.ts .tb{min-width:0;flex:1;overflow-wrap:anywhere}
.ts .tg{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.ts details{margin-top:2px}.ts summary{cursor:pointer;display:inline-block}
.ts pre.rep{margin:6px 0 0;white-space:pre-wrap;font-size:11.5px}
@media(max-width:480px){.ts{flex-direction:column;gap:5px}.ts .pill{align-self:flex-start}}