:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* Layout: sticky sprint header + tab bar; each tab is a working panel. Navy + amber from the pitch deck. */
:root{
  --bg:#F5F4EF; --surface:#FDFDFB; --sunken:#ECEAE2; --line:#DEDACF;
  --ink:#14213D; --muted:#56607A; --navy:#14213D; --on-navy:#F5F4EF; --on-navy-muted:#B9C3D4;
  --accent:#F4A259; --accent-ink:#9C4313;
  --ok:#2F7D4F; --ok-bg:#E2F1E6; --warn:#9C4313; --warn-bg:#FBEBDD; --bad:#B42318; --bad-bg:#FBE4E1;
  --bubble:#FDFDFB; --bubble-me:#D9EBD3;
  --f-display:'Rubik',Arial,sans-serif; --f-body:'Nunito Sans',Arial,sans-serif;
  --r:12px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0F1729; --surface:#17213A; --sunken:#1D2945; --line:#2C3A5C;
  --ink:#E9ECF3; --muted:#A3AEC6; --navy:#0A1120; --on-navy:#F5F4EF; --on-navy-muted:#A3AEC6;
  --accent:#F4A259; --accent-ink:#F4B27A;
  --ok:#7FD39C; --ok-bg:#183A27; --warn:#F4B27A; --warn-bg:#3D2816; --bad:#FF9C90; --bad-bg:#43201C;
  --bubble:#22304F; --bubble-me:#23452F; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0F1729; --surface:#17213A; --sunken:#1D2945; --line:#2C3A5C;
  --ink:#E9ECF3; --muted:#A3AEC6; --navy:#0A1120; --on-navy:#F5F4EF; --on-navy-muted:#A3AEC6;
  --accent:#F4A259; --accent-ink:#F4B27A;
  --ok:#7FD39C; --ok-bg:#183A27; --warn:#F4B27A; --warn-bg:#3D2816; --bad:#FF9C90; --bad-bg:#43201C;
  --bubble:#22304F; --bubble-me:#23452F; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--f-body);margin:0}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance;line-height:1.2}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1280px;margin:0 auto;padding-inline:20px}
header.top{background:var(--navy);color:var(--on-navy);padding-block:14px 0;position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
.brandrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.brand{display:flex;align-items:center;gap:10px}
.brand b{font-family:var(--f-display);font-size:18px;letter-spacing:.2px}
.brand span{color:var(--on-navy-muted);font-size:13px}
.demo{font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;background:var(--accent);color:#14213D;padding:3px 10px;border-radius:999px}
.sprintline{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin-top:10px}
.sprintline h1{font-size:20px}
.sprintline .goal{color:var(--on-navy-muted);min-width:0}
.tabs{display:flex;gap:4px;overflow-x:auto;margin-top:12px;scrollbar-width:none}
.tabs button{background:none;border:0;color:var(--on-navy-muted);padding:10px 14px;font-weight:700;border-bottom:3px solid transparent;white-space:nowrap;cursor:pointer}
.tabs button[aria-selected="true"]{color:var(--on-navy);border-bottom-color:var(--accent)}
.tabs .count{display:inline-block;min-width:20px;margin-left:6px;padding:0 6px;border-radius:999px;background:var(--bad);color:#fff;font-size:12px;line-height:20px;text-align:center}
main{padding-block:20px 48px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;min-width:0}
.stat .k{font-size:13px;color:var(--muted);font-weight:700}
.stat .v{font-family:var(--f-display);font-size:28px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.stat .s{font-size:13px;color:var(--muted)}
.stat.alert{background:var(--warn-bg);border-color:transparent}
.stat.alert .v,.stat.alert .k{color:var(--warn)}
.bar{height:8px;border-radius:4px;background:var(--sunken);overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;background:var(--accent)}
.panelhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.panelhead h2{font-size:22px}
.panelhead p{margin:2px 0 0;color:var(--muted);max-width:65ch}
.btn{border:1px solid var(--line);background:var(--surface);padding:8px 14px;border-radius:10px;font-weight:700;cursor:pointer}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--navy);color:var(--on-navy);border-color:var(--navy)}
:root[data-theme="dark"] .btn.primary{background:var(--accent);color:#14213D;border-color:var(--accent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.primary{background:var(--accent);color:#14213D;border-color:var(--accent)}}
.btn.sm{padding:4px 10px;font-size:13px;border-radius:8px}
.btn.danger{color:var(--bad)}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:800;padding:2px 8px;border-radius:999px;background:var(--sunken);color:var(--muted);white-space:nowrap}
.chip.ok{background:var(--ok-bg);color:var(--ok)}
.chip.warn{background:var(--warn-bg);color:var(--warn)}
.chip.bad{background:var(--bad-bg);color:var(--bad)}
/* Kanban */
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.col{background:var(--sunken);border-radius:var(--r);padding:10px;min-height:220px;display:flex;flex-direction:column;gap:8px;min-width:0}
.col.over{outline:2px dashed var(--accent);outline-offset:-2px}
.col h3{font-size:14px;text-transform:uppercase;letter-spacing:.8px;display:flex;justify-content:space-between;padding:2px 4px 6px;color:var(--muted)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:grab;display:flex;flex-direction:column;gap:6px}
.card.blocked{border-left:5px solid var(--warn);background:var(--warn-bg)}
.card .t{font-weight:700;line-height:1.35}
.card .m{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:var(--muted)}
.card .acts{display:flex;gap:4px;justify-content:flex-end}
.card .acts button{border:1px solid var(--line);background:transparent;border-radius:6px;padding:0 8px;cursor:pointer;color:var(--muted)}
.grid2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px}
.box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;min-width:0}
.box h3{font-size:16px;margin-bottom:10px}
.burn svg{width:100%;height:auto;display:block}
.burn .axis{stroke:var(--line)} .burn .lbl{fill:var(--muted);font-size:11px;font-family:var(--f-body)}
.burn .ideal{stroke:var(--muted);stroke-dasharray:4 4;fill:none}
.burn .actual{stroke:var(--accent-ink);stroke-width:2.5;fill:none}
.burn .area{fill:var(--accent);opacity:.18}
.burn .dot{fill:var(--accent-ink)}
.legend{display:flex;gap:14px;font-size:13px;color:var(--muted);margin-top:6px}
.legend i{display:inline-block;width:14px;height:3px;vertical-align:middle;margin-right:6px;background:var(--accent-ink)}
.legend i.d{background:none;border-top:2px dashed var(--muted)}
.legend i.c{height:10px;background:var(--line)}
.burn .vb-c{fill:var(--line)} .burn .vb-d{fill:var(--accent-ink)}
details.hist summary{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;cursor:pointer;list-style:none}
details.hist summary::-webkit-details-marker{display:none}
details.hist summary small{color:var(--muted)}
details.hist[open] summary{border-bottom:1px solid var(--line);padding-bottom:10px}
#closeDlg{width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 48px)}
/* Forms */
label{display:block;font-weight:700;font-size:13px;margin-bottom:4px}
input[type=text],input[type=number],input[type=date],input[type=time],select,textarea{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 10px}
textarea{resize:vertical;min-height:64px}
.field{margin-bottom:12px}
.row{display:flex;gap:10px;flex-wrap:wrap}.row>*{flex:1 1 140px;min-width:0}
.check{display:flex;gap:8px;align-items:center;font-weight:700}
/* Lists */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.person{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:var(--sunken);min-width:0}
.person div{min-width:0}.person b{display:block;font-size:14px}.person small{color:var(--muted)}
.entries{display:flex;flex-direction:column;gap:10px}
.entry{border-top:1px solid var(--line);padding-top:10px}
.entry:first-child{border-top:0;padding-top:0}
.entry dl{display:grid;grid-template-columns:90px minmax(0,1fr);gap:2px 10px;margin:6px 0 0;font-size:14px}
.entry dt{color:var(--muted);font-weight:700}.entry dd{margin:0}
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
td.num{font-variant-numeric:tabular-nums}
tr.done td{color:var(--muted)}
.retro{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.retro .col{min-height:160px}
.note{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.note span{min-width:0}
.vote{border:1px solid var(--line);background:transparent;border-radius:999px;padding:0 10px;cursor:pointer;font-weight:800;white-space:nowrap}
.addline{display:flex;gap:6px}.addline input{flex:1;min-width:0}
/* Reminder */
.timeline{display:flex;flex-direction:column;gap:18px}
.slot{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px}
.slot .time{font-family:var(--f-display);font-weight:700;font-size:18px;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.msgs{display:flex;flex-direction:column;gap:10px}
.msg{background:var(--sunken);border-radius:var(--r);padding:12px}
.msg .to{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;font-size:13px;color:var(--muted);font-weight:700;margin-bottom:6px}
.bubble{background:var(--bubble);border-radius:12px;padding:10px 12px;white-space:pre-wrap;max-width:62ch;font-size:14px}
.empty{color:var(--muted);font-style:italic;padding:12px 4px}
.foot{color:var(--muted);font-size:13px;margin-top:28px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}
dialog{border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);padding:20px;width:min(520px,calc(100vw - 32px))}
dialog::backdrop{background:rgba(10,17,32,.55)}
dialog h2{font-size:20px;margin-bottom:14px}
.dlgacts{display:flex;justify-content:space-between;gap:8px;margin-top:6px;flex-wrap:wrap}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--navy);color:var(--on-navy);padding:10px 16px;border-radius:10px;font-weight:700;z-index:20}
@media (max-width:900px){.board{grid-template-columns:repeat(2,minmax(0,1fr))}.grid2{grid-template-columns:minmax(0,1fr)}.retro{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.board{grid-template-columns:minmax(0,1fr)}.slot{grid-template-columns:minmax(0,1fr)}.wrap{padding-inline:16px}}
#teamSel{background:transparent;color:var(--on-navy);border:1px solid rgba(255,255,255,.28);border-radius:8px;padding:4px 8px;font-weight:700;max-width:60vw}
#teamSel option{color:#14213D;background:#FDFDFB}
.seg{display:none}
.bnav,.sheet{display:none}
@media (max-width:640px){
  header.top{position:static;padding-block:12px 12px}
  .tabs{display:none}
  .sprintline{margin-top:8px}.sprintline h1{font-size:18px}.sprintline .goal{font-size:14px}
  main{padding-block:16px calc(96px + env(safe-area-inset-bottom,0px))}
  .foot{margin-top:20px}
  .stats{gap:8px;margin-bottom:16px}.stat{padding:10px 12px}.stat .v{font-size:22px}.stat .s{font-size:12px}
  .panelhead h2{font-size:20px}.panelhead>span{width:100%}.panelhead>span .btn{flex:1}
  input[type=text],input[type=number],input[type=date],input[type=time],select,textarea{font-size:16px;min-height:44px}
  .btn{min-height:44px}.btn.sm{min-height:36px;padding:6px 12px}
  .card{cursor:default}.card .acts button{min-height:36px;min-width:44px;font-size:15px}
  .seg{display:flex;gap:4px;background:var(--sunken);border-radius:12px;padding:4px;margin-bottom:10px;position:sticky;top:env(safe-area-inset-top,0px);z-index:3}
  .seg button{flex:1;border:0;background:transparent;border-radius:9px;padding:8px 2px;font-weight:700;font-size:12px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:2px;min-height:48px;cursor:pointer}
  .seg button b{font-family:var(--f-display);font-size:16px;color:var(--ink)}
  .seg button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
  .board{grid-template-columns:minmax(0,1fr)}.board .col{display:none;min-height:0}.board .col.on{display:flex}.board .col h3{display:none}
  .bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:10;background:var(--surface);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
  .bnav button{flex:1;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:700;color:var(--muted);padding:6px 0;min-height:52px;position:relative;cursor:pointer}
  .bnav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
  .bnav button.on{color:var(--accent-ink)}
  .bnav .dot{position:absolute;top:4px;left:calc(50% + 8px);width:9px;height:9px;border-radius:50%;background:var(--bad);border:2px solid var(--surface)}
  .sheet:not([hidden]){display:block;position:fixed;inset:0;z-index:11}
  .sheetbg{position:absolute;inset:0;background:rgba(10,17,32,.45)}
  .sheetbody{position:absolute;left:0;right:0;bottom:0;background:var(--surface);border-radius:18px 18px 0 0;padding:10px 12px calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column}
  .sheetbody button{border:0;border-bottom:1px solid var(--line);background:none;text-align:left;padding:16px 8px;font-weight:700;font-size:16px;color:var(--ink);cursor:pointer}
  .sheetbody button:last-child{border-bottom:0}
  table.resp thead{display:none}
  table.resp,table.resp tbody,table.resp tr,table.resp td{display:block;width:100%}
  table.resp tr{border-bottom:1px solid var(--line);padding:10px 0}
  table.resp td{border:0;padding:3px 0;display:flex;justify-content:space-between;gap:12px;text-align:right}
  table.resp td::before{content:attr(data-label);color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;text-align:left;flex:0 0 auto}
  table.resp td:not([data-label])::before{content:none}
  table.resp td .cv{min-width:0}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px));max-width:calc(100vw - 32px)}
  .brand b{font-size:16px}
  table.resp td:first-child{font-weight:700;text-align:left;display:block}table.resp td:first-child::before{display:block;margin-bottom:2px}
  .tablewrap{overflow-x:visible}
  dialog{margin:auto 0 0;width:100vw;max-width:100vw;border-radius:18px 18px 0 0;max-height:92vh;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px))}
  #closeDlg{width:100vw}
  .entry dl{grid-template-columns:minmax(0,1fr)}.entry dt{margin-top:4px}
  .slot .time{font-size:16px}
  details.hist summary{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- Tambahan versi Laravel ---------- */
.topacts{display:flex;align-items:center;gap:8px}
.linkbtn{background:none;border:1px solid rgba(255,255,255,.28);color:var(--on-navy);border-radius:8px;padding:3px 10px;font-weight:700;font-size:12px;cursor:pointer}
.busy{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--accent);z-index:30;animation:busy 1s linear infinite;transform-origin:left}
@keyframes busy{0%{transform:scaleX(.1)}100%{transform:scaleX(1);opacity:.3}}
.warnline{font-size:12px;color:var(--warn);font-weight:700;margin-top:6px}
.wa-in .bubble{background:var(--bubble)}
.wa-out .bubble{background:var(--bubble-me)}
.walog{display:flex;flex-direction:column;gap:10px;max-height:640px;overflow:auto}
.walog .msg{display:flex;flex-direction:column}
.walog .wa-out{align-items:flex-end}
.walog .meta{font-size:12px;color:var(--muted);font-weight:700;margin-bottom:4px;display:flex;gap:6px;flex-wrap:wrap}
.kv{display:grid;grid-template-columns:140px minmax(0,1fr);gap:6px 10px;font-size:14px;margin:0}
.kv dt{color:var(--muted);font-weight:700}.kv dd{margin:0;overflow-wrap:anywhere}
code{font-size:13px;background:var(--sunken);padding:1px 6px;border-radius:6px;overflow-wrap:anywhere}
.mtable input[type=text]{min-width:120px}
@media (max-width:640px){.kv{grid-template-columns:minmax(0,1fr)}}

/* WAHA: kod QR */
.wahaqr{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:12px}
.wahaqr img{background:#fff;padding:8px;border-radius:10px;border:1px solid var(--line, #ddd);max-width:100%;height:auto}
.wahaqr p{flex:1;min-width:180px;font-size:13px;margin:0}
/* WAHA: kod pautan */
.wahacode{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:12px}
.wahacode .code{font:700 26px/1.2 ui-monospace,Consolas,monospace;letter-spacing:3px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 14px}
.wahacode p{flex:1;min-width:180px;font-size:13px;margin:0}
.wahapair{margin-top:12px}
.wahapair label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.wahapair div{display:flex;gap:8px;flex-wrap:wrap}
.wahapair input{flex:1;min-width:160px;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 10px;font:inherit}