/* ============================================================
   DUMBELL SEMINGGU — tema "Putih & Jingga"
   Kanvas putih bersih + aksen jingga (identitas brand).
   Font Archivo lokal (offline).
   ============================================================ */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url('archivo.woff2') format('woff2');
}

:root{
  --bg:#F4F3EE; --card:#FFFFFF; --card2:#EAE9E2; --line:#DAD8CF;
  --txt:#141610; --dim:#6C6E66; --accent:#E8571A; --accent2:#B04309;
  --ok:#0B7A4B; --warn:#A9720A; --danger:#CF3A2A;
  --on:#FFFFFF;
  --r:20px;
  --hair:rgba(20,22,16,.10);
  --hair2:rgba(20,22,16,.16);
  --sunk:#9B9D94;
  --hatch:repeating-linear-gradient(135deg,rgba(255,255,255,.13) 0 1px,transparent 1px 7px);
  --sh:0 1px 2px rgba(20,22,16,.05),0 10px 24px rgba(20,22,16,.04);
  --glow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt);
  font:400 15px/1.55 'Archivo',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.032em;line-height:1.08;font-stretch:106%;text-wrap:pretty}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;letter-spacing:inherit}
input{font:inherit}
b{font-weight:800}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

#topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;
  padding:calc(15px + env(safe-area-inset-top)) 18px 12px;
  background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 1px 0 var(--hair);
}
#topTitle{flex:1;min-width:0}
#topTitle h1{font-size:18px;font-stretch:104%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#topSub{display:block;font-size:11.5px;color:var(--dim);font-weight:600;margin-top:3px}
.icon-btn{
  width:44px;height:44px;border-radius:14px;background:var(--card);border:1px solid var(--hair);
  display:grid;place-items:center;flex:none;color:var(--dim);box-shadow:var(--sh);
  transition:transform .12s ease,color .15s
}
.icon-btn:active{transform:scale(.94);color:var(--txt)}
.icon-btn svg{width:20px;height:20px}
#backBtn{font-size:27px;line-height:1;padding-bottom:4px;color:var(--txt)}

main{padding:16px 18px calc(96px + env(safe-area-inset-bottom));max-width:640px;margin:0 auto}

#tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;
  background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(20px) saturate(140%);
  border-top:1px solid var(--line);
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));
}
#tabbar button{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  padding:9px 4px;border-radius:16px;transition:color .15s,background .15s
}
#tabbar button svg{width:22px;height:22px;stroke-width:1.9}
#tabbar button.active{color:var(--accent2);background:color-mix(in srgb,var(--accent) 9%,transparent)}

.card{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);padding:16px;margin-bottom:10px;box-shadow:var(--sh)}
.muted{color:var(--dim)}
.sec-title{
  display:flex;align-items:center;gap:9px;
  font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:var(--dim);font-weight:800;margin:28px 2px 11px
}
.sec-title::before{content:"";flex:none;width:14px;height:2px;border-radius:2px;background:var(--accent)}
.chip{
  display:inline-block;font-size:12.5px;font-weight:700;padding:11px 17px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);color:var(--dim);margin:0 7px 7px 0;transition:transform .12s
}
.chip:active{transform:scale(.96)}
.chip.on{background:var(--accent);background-image:var(--hatch);color:var(--on);border-color:transparent}
.btn{
  display:block;width:100%;text-align:center;padding:17px 16px;border-radius:999px;
  background:var(--accent);background-image:var(--hatch);color:var(--on);
  font-weight:800;font-size:15px;letter-spacing:-.012em;
  box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 24%,transparent);
  transition:transform .12s ease,filter .15s
}
.btn:active{transform:scale(.985);filter:brightness(1.08)}
.btn.ghost{background:var(--card);background-image:none;color:var(--txt);border:1px solid var(--line);font-weight:800;box-shadow:none}
.btn.danger{background:transparent;background-image:none;color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 36%,transparent);font-weight:800;box-shadow:none}
.row{display:flex;align-items:center;gap:13px}
.grow{flex:1;min-width:0}

.hero{
  position:relative;overflow:hidden;
  background:var(--accent);background-image:var(--hatch);
  border-radius:26px;padding:22px;margin-bottom:14px;color:var(--on);
  box-shadow:0 10px 30px color-mix(in srgb,var(--accent) 20%,transparent)
}
.hero::after{
  content:"";position:absolute;right:-58px;bottom:-92px;width:196px;height:196px;border-radius:50%;
  border:17px solid rgba(255,255,255,.16);pointer-events:none
}
.hero small{display:block;font-size:10px;font-weight:800;letter-spacing:.21em;text-transform:uppercase;opacity:.78}
.hero h2{font-size:34px;margin:9px 0 5px;line-height:.98;letter-spacing:-.042em;font-stretch:112%}
.hero p{margin:0;font-size:13px;font-weight:600;opacity:.85}
.hero .btn{position:relative;margin-top:16px;background:var(--on);background-image:none;color:var(--accent2);box-shadow:none}
.hero-bar{position:relative;height:7px;border-radius:999px;background:rgba(255,255,255,.28);margin-top:16px;overflow:hidden}
.hero-bar i{display:block;height:100%;background:#fff;border-radius:999px;transition:width .35s cubic-bezier(.2,.7,.3,1)}
.hero.rest{background:var(--card);background-image:none;color:var(--txt);border:1px solid var(--hair);box-shadow:var(--sh)}
.hero.rest::after{border-color:rgba(20,22,16,.05)}
.hero.rest small{color:var(--dim);opacity:1}
.hero.rest p{color:var(--dim);opacity:1;font-weight:500}

.day{
  display:flex;align-items:center;gap:13px;padding:14px 15px;background:var(--card);
  border-radius:var(--r);margin-bottom:8px;width:100%;text-align:left;border:1px solid var(--hair);
  box-shadow:var(--sh);transition:transform .12s ease,border-color .15s
}
.day:active{transform:scale(.99)}
.day.today{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 4%,var(--card))}
.day .badge{
  width:48px;height:48px;border-radius:15px;display:grid;place-items:center;
  font-weight:800;font-size:11px;letter-spacing:.11em;background:var(--card2);
  color:var(--dim);flex:none
}
.day.today .badge{background:var(--accent);background-image:var(--hatch);color:var(--on)}
.day b{display:block;font-size:15px;letter-spacing:-.02em}
.day span{font-size:12px;color:var(--dim)}
.dbar{height:5px;border-radius:999px;background:var(--card2);margin-top:9px;overflow:hidden}
.dbar i{display:block;height:100%;border-radius:999px;transition:width .35s cubic-bezier(.2,.7,.3,1)}
.dstat{flex:none;text-align:right;font-size:17px;font-weight:800;min-width:56px;letter-spacing:-.03em}
.dstat small{display:block;font-size:9px;font-weight:800;letter-spacing:.1em;color:var(--dim);margin-top:3px;text-transform:uppercase}
.dstat.ok{color:var(--ok)} .dstat.warn{color:var(--warn)} .dstat.dim{color:var(--sunk)}

.nudge{
  margin-top:14px;font-size:12.5px;line-height:1.6;color:var(--dim);
  background:color-mix(in srgb,var(--warn) 9%,var(--card));border-radius:14px;padding:12px 14px;
  border-left:3px solid var(--warn)
}
.nudge.ok{border-left-color:var(--accent2);background:color-mix(in srgb,var(--accent) 6%,var(--card));color:var(--dim)}
.nudge b{color:var(--txt)}

.wknav{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--hair);border-radius:var(--r);padding:9px;margin-bottom:10px;text-align:center;box-shadow:var(--sh)}
.wknav>button{width:44px;height:44px;border-radius:14px;background:var(--card2);font-size:19px;flex:none;color:var(--dim)}
.wknav>button:active{color:var(--txt)}
.wknav b{font-size:14px;letter-spacing:-.015em}

.daymini{display:grid;gap:7px;margin-top:15px}
.dm{background:var(--card2);border-radius:14px;padding:11px 2px;text-align:center;border:1px solid transparent}
.dm b{display:block;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);font-weight:800}
.dm i{display:block;font-style:normal;font-size:14px;font-weight:800;margin-top:4px;letter-spacing:-.02em}
.dm.part{border-color:color-mix(in srgb,var(--accent) 50%,transparent);background:color-mix(in srgb,var(--accent) 6%,var(--card))} .dm.part i{color:var(--accent2)}
.dm.full{background:var(--accent);background-image:var(--hatch)} .dm.full b{color:var(--on);opacity:.72} .dm.full i{color:var(--on)}

.ex{background:var(--card);border:1px solid var(--hair);border-radius:var(--r);margin-bottom:9px;overflow:hidden;box-shadow:var(--sh);transition:border-color .15s}
.ex-head{display:flex;gap:13px;padding:14px 15px;align-items:center;width:100%;text-align:left;min-height:74px;transition:transform .12s ease}
.ex-head:active{transform:scale(.995)}
.ex-no{
  width:46px;height:46px;border-radius:15px;display:grid;place-items:center;font-weight:800;font-size:16px;
  background:color-mix(in srgb,var(--accent) 11%,var(--card));color:var(--accent2);flex:none;letter-spacing:-.02em
}
.ex.kelar{background:color-mix(in srgb,var(--accent) 4%,var(--card));border-color:color-mix(in srgb,var(--accent) 26%,transparent)}
.ex.kelar .ex-no{background:var(--accent);background-image:var(--hatch);color:var(--on);font-size:19px}
.ex.kelar .ex-num{color:var(--accent2)}
.ex-head b{display:block;font-size:15.5px;line-height:1.28;letter-spacing:-.022em}
.ex-head .meta{font-size:11.5px;color:var(--dim);margin-top:4px}
.ex-head .last{font-size:11.5px;color:var(--accent2);margin-top:5px;font-weight:700}
.ex-num{display:block;font-size:9.5px;color:var(--dim);font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:4px}
.ex-body{padding:2px 15px 15px}
.arrow{color:var(--sunk);font-size:18px}
.star{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.12em;color:var(--on);background:var(--accent);border-radius:7px;padding:3px 8px;margin-left:8px;vertical-align:2px}
.swapped{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.12em;color:var(--dim);background:var(--card2);border:1px solid var(--line);border-radius:7px;padding:2px 8px;margin-left:8px;vertical-align:2px}

/* media gerakan: grid statis tanpa geser — semua foto kelihatan sekaligus,
   dipotong seragam (tap = lihat utuh). Video full-lebar di atasnya. */
.media{display:grid;grid-template-columns:repeat(var(--mcols,3),1fr);gap:8px;margin:2px 0 13px}
.media:empty{display:none}
.media img{width:100%;height:150px;object-fit:cover;border:1px solid var(--line);border-radius:14px;background:var(--card2);cursor:zoom-in;display:block}
.media video{grid-column:1/-1;width:100%;aspect-ratio:16/9;height:auto;border:1px solid var(--line);border-radius:14px;background:#000}
/* animasi gerakan transparan: "ngambang" di kanvas + bayangan lembut (timbul) */
.media img.anim{
  grid-column:1/-1;width:auto;max-width:100%;height:auto;max-height:320px;margin:0 auto;
  object-fit:contain;border:0;background:transparent;cursor:default
  /* kanvas file-nya sudah dipangkas ngepas badan + bayangan — nol ruang kosong */
}
/* thumbnail di badge nomor gerakan */
.ex-no.ada-thumb{background:transparent;overflow:hidden}
.ex-no img.thumb{width:100%;height:100%;object-fit:contain;padding:2px}
/* thumbnail di sheet ganti gerakan */
.gopt .gthumb{width:54px;height:54px;flex:none;object-fit:contain;background:var(--card2);border-radius:12px;padding:3px}

#lightbox{position:fixed;inset:0;z-index:90;background:rgba(20,22,16,.93);display:grid;place-items:center;padding:16px}
#lightbox img{max-width:100%;max-height:92vh;border-radius:14px;background:var(--card)}
#lightboxClose{position:absolute;top:calc(14px + env(safe-area-inset-top));right:16px;font-size:20px;width:44px;height:44px;border-radius:14px;background:var(--card);color:var(--txt)}

.sisi-note{
  font-size:11.5px;font-weight:700;color:var(--accent2);text-align:center;
  background:color-mix(in srgb,var(--accent) 8%,var(--card));border-radius:999px;
  padding:8px 14px;margin:-4px 0 12px
}
.tips{font-size:12.5px;color:var(--dim);background:color-mix(in srgb,var(--accent) 6%,var(--card));border-left:3px solid var(--accent);border-radius:0 14px 14px 0;padding:12px 14px;margin-bottom:13px;line-height:1.6}
.tips b{color:var(--accent2)}

table.log{width:100%;border-collapse:separate;border-spacing:0 6px}
table.log th{font-size:9.5px;text-transform:uppercase;letter-spacing:.15em;color:var(--dim);font-weight:800;padding:0 3px 4px;text-align:center}
table.log td{padding:0 2px}
table.log td:first-child{width:20px;text-align:center;color:var(--dim);font-weight:800;font-size:13px}
table.log td:last-child{width:50px}
.stp{display:flex;align-items:stretch;gap:4px}
.stp button{
  width:34px;min-height:52px;flex:none;border:1px solid var(--line);border-radius:12px;background:var(--card2);
  font-size:18px;font-weight:800;color:var(--txt);display:grid;place-items:center
}
.stp button:active{background:var(--accent);color:var(--on);border-color:transparent}
.log input{
  width:100%;min-width:0;min-height:52px;background:var(--card2);border:1.5px solid transparent;border-radius:12px;
  padding:8px 2px;text-align:center;color:var(--txt);font-size:17px;font-weight:800;
  transition:border-color .15s,background .15s,box-shadow .15s
}
.log input::placeholder{color:var(--sunk);font-weight:600}
.log input:focus{outline:none;border-color:var(--accent2);background:var(--card);box-shadow:var(--glow)}
.tick{
  width:100%;height:52px;border-radius:12px;background:var(--card);border:1.5px solid var(--line);
  color:var(--sunk);font-size:20px;font-weight:800;transition:transform .12s ease,background .15s,color .15s
}
.tick:active{transform:scale(.93)}
@keyframes tick-pop{0%{transform:scale(.55)}55%{transform:scale(1.18)}100%{transform:scale(1)}}
.tick.pop{animation:tick-pop .3s cubic-bezier(.2,.7,.3,1.4)}
tr.done .tick{background:var(--accent);background-image:var(--hatch);color:var(--on);border-color:transparent;box-shadow:0 5px 16px color-mix(in srgb,var(--accent) 28%,transparent)}
tr.done input{color:var(--accent2);background:color-mix(in srgb,var(--accent) 7%,var(--card2))}
tr.done td:first-child{color:var(--accent2)}
.addset{
  margin-top:12px;font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
  padding:15px;width:100%;text-align:center;border:1.5px dashed var(--line);border-radius:14px
}
.addset:active{border-color:var(--accent2);color:var(--accent2)}
.swapbtn{
  margin-top:9px;font-size:13px;font-weight:800;color:var(--accent2);padding:15px;width:100%;text-align:center;
  border-radius:999px;background:color-mix(in srgb,var(--accent) 9%,var(--card));
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  letter-spacing:.01em;transition:transform .12s
}
.swapbtn:active{transform:scale(.985)}

.prev{font-size:12px;color:var(--dim);margin-top:15px;border-top:1px solid var(--line);padding-top:13px}
.prev b{display:block;color:var(--txt);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:7px}
.prev-row{display:flex;justify-content:space-between;gap:10px;padding:4px 0}

.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.stat{background:var(--card);border:1px solid var(--hair);border-radius:18px;padding:14px 8px;text-align:center;box-shadow:var(--sh)}
.stat b{display:block;font-size:23px;letter-spacing:-.035em;font-stretch:106%}
.stat span{display:block;margin-top:5px;font-size:8.5px;color:var(--dim);font-weight:800;letter-spacing:.055em;text-transform:uppercase;line-height:1.35}
/* versi jingga — dipakai di layar latihan biar suasana brand kerasa */
.stat-grid.oranye .stat{background:var(--accent);background-image:var(--hatch);border-color:transparent;box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 22%,transparent)}
.stat-grid.oranye .stat b{color:#fff}
.stat-grid.oranye .stat span{color:rgba(255,255,255,.85)}
svg.chart{width:100%;height:180px;display:block}

.hist{display:flex;gap:13px;padding:14px 15px;background:var(--card);border:1px solid var(--hair);border-radius:var(--r);margin-bottom:8px;width:100%;text-align:left;align-items:center;box-shadow:var(--sh);transition:transform .12s ease}
.hist:active{transform:scale(.99)}
.hist .d{width:48px;flex:none;text-align:center;background:var(--card2);border-radius:13px;padding:7px 0}
.hist .d b{display:block;font-size:18px;letter-spacing:-.03em}
.hist .d span{font-size:8.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.12em;font-weight:800}
.hist .arrow{color:var(--sunk);font-size:20px}

#restBar{
  position:fixed;left:12px;right:12px;bottom:calc(70px + env(safe-area-inset-bottom));z-index:40;
  background:var(--txt);border-radius:20px;overflow:hidden;box-shadow:0 14px 38px rgba(20,22,16,.3)
}
.rest-inner{display:flex;align-items:center;gap:9px;padding:12px}
.rest-inner button{background:rgba(255,255,255,.14);border-radius:13px;padding:12px 13px;font-size:13px;font-weight:800;color:rgba(255,255,255,.9);min-height:46px}
.rest-time{flex:1;text-align:center;color:#fff}
.rest-time b{display:block;font-size:28px;letter-spacing:-.035em;line-height:1.1}
.rest-time small{font-size:9px;color:rgba(255,255,255,.6);letter-spacing:.2em;text-transform:uppercase;font-weight:800}
.rest-stop{background:var(--accent)!important;background-image:var(--hatch)!important;color:var(--on)!important}
#restFill{height:4px;background:var(--accent);width:100%;border-radius:0 999px 999px 0;transition:width 1s linear}

.empty{text-align:center;color:var(--dim);padding:44px 20px;font-size:14px;line-height:1.6}

#gate{
  position:fixed;inset:0;z-index:80;background:var(--bg);overflow-y:auto;
  padding:calc(34px + env(safe-area-inset-top)) 22px calc(30px + env(safe-area-inset-bottom))
}
.gate-in{max-width:420px;margin:0 auto}
.gate-logo{display:flex;justify-content:center;margin-bottom:24px}
.gate-logo svg{width:58px;height:58px;background:var(--card);border:1px solid var(--hair);border-radius:18px;padding:9px;box-shadow:var(--sh)}
.gate-in h2{font-size:29px;text-align:center;line-height:1.05;letter-spacing:-.042em;font-stretch:110%}
.gate-in .sub{font-size:13.5px;color:var(--dim);text-align:center;margin:12px 0 28px;line-height:1.6}
.field{margin-bottom:12px}
.field label{display:block;font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--dim);font-weight:800;margin-bottom:9px}
.field input{
  width:100%;min-height:56px;background:var(--card);border:1.5px solid var(--line);border-radius:16px;
  padding:16px;color:var(--txt);font-size:16px;font-weight:600;transition:border-color .15s,box-shadow .15s
}
.field input::placeholder{color:var(--sunk)}
.field input:focus{outline:none;border-color:var(--accent2);box-shadow:var(--glow)}
.gate-err{background:color-mix(in srgb,var(--danger) 9%,var(--card));color:var(--danger);border-radius:13px;padding:12px 14px;font-size:13px;font-weight:600;margin-bottom:12px;border:1px solid color-mix(in srgb,var(--danger) 26%,transparent)}

.qdots{display:flex;gap:7px;justify-content:center;margin-bottom:28px}
.qdots i{width:26px;height:3px;border-radius:999px;background:var(--line);transition:background .25s}
.qdots i.on{background:var(--accent)}
.qdots i.done{background:color-mix(in srgb,var(--accent) 45%,var(--line))}

.qopt{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;min-height:62px;
  background:var(--card);border:1.5px solid var(--hair);border-radius:20px;
  padding:16px 18px;margin-bottom:9px;font-size:15px;font-weight:700;letter-spacing:-.018em;box-shadow:var(--sh);
  transition:transform .12s ease,border-color .15s,background .15s
}
.qopt::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--line);transition:border-color .15s,background .15s,box-shadow .15s}
.qopt:active{border-color:var(--accent2);background:color-mix(in srgb,var(--accent) 4%,var(--card));transform:scale(.99)}
.qopt:active::before{border-color:var(--accent2);background:var(--accent);box-shadow:inset 0 0 0 3.5px var(--card)}
.qopt small{display:block;font-size:12px;color:var(--dim);font-weight:500;margin-top:3px;letter-spacing:0}
.gate-back{display:block;margin:18px auto 0;color:var(--dim);font-size:13px;font-weight:700;padding:12px 18px;letter-spacing:.02em}
.gate-back:active{color:var(--txt)}

.sela{text-align:center;padding:80px 0 10px}
.sela h2{font-size:30px;line-height:1.08;letter-spacing:-.042em;font-stretch:110%}
.sela p{color:var(--dim);font-size:14.5px;line-height:1.7;margin:16px 0 32px}
.sela b{color:var(--accent2);font-weight:800}

.rev-day{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--hair);border-radius:18px;padding:12px 14px;margin-bottom:8px;text-align:left;box-shadow:var(--sh)}
.rev-day .badge{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-weight:800;font-size:10.5px;
  letter-spacing:.11em;background:color-mix(in srgb,var(--accent) 9%,var(--card));flex:none;color:var(--accent2)
}
.rev-day b{display:block;font-size:14.5px;letter-spacing:-.02em}
.rev-day span{font-size:12px;color:var(--dim)}

#sheetWrap{position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end}
#sheetBg{position:absolute;inset:0;background:rgba(20,22,16,.4);backdrop-filter:blur(3px)}
#sheet{
  position:relative;width:100%;max-width:640px;margin:0 auto;background:var(--card);
  border-radius:28px 28px 0 0;
  padding:26px 18px calc(24px + env(safe-area-inset-bottom));
  max-height:82vh;overflow-y:auto;scrollbar-width:none;box-shadow:0 -18px 50px rgba(20,22,16,.2)
}
#sheet::-webkit-scrollbar{width:0;height:0}
#sheet::before{content:"";position:absolute;top:11px;left:50%;transform:translateX(-50%);width:38px;height:4px;border-radius:999px;background:var(--line)}
#sheet h3{font-size:20px;letter-spacing:-.032em;margin-bottom:5px}
#sheet .sub{font-size:12.5px;color:var(--dim);margin-bottom:18px;line-height:1.55}
.stepper{display:flex;align-items:center;gap:10px;margin-bottom:15px}
.stepper button{width:60px;height:66px;border-radius:16px;background:var(--card2);font-size:26px;font-weight:600;flex:none;color:var(--txt)}
.stepper button:active{background:color-mix(in srgb,var(--accent) 10%,var(--card2))}
.stepper input{
  flex:1;min-width:0;height:66px;background:var(--card2);border:1.5px solid transparent;border-radius:16px;
  text-align:center;font-size:32px;font-weight:800;letter-spacing:-.035em;color:var(--txt)
}
.stepper input:focus{outline:none;border-color:var(--accent2);box-shadow:var(--glow)}
#sheet .dateline{display:flex;align-items:center;gap:10px;margin-bottom:16px}
#sheet .dateline input{flex:1;min-width:0;min-height:50px;background:var(--card2);border:0;border-radius:13px;padding:13px;color:var(--txt);font-size:15px;font-weight:600;text-align:center}
#sheet .acts{display:flex;gap:8px}
#sheet .acts .btn{margin:0}

.tierlabel{display:flex;align-items:center;gap:11px;font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--dim);margin:22px 0 10px;font-weight:800}
.tierlabel::after{content:"";flex:1;height:1px;background:var(--line)}
.gopt{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;min-height:64px;
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:13px 14px;margin-bottom:8px;transition:transform .12s ease,border-color .15s
}
.gopt:active{transform:scale(.99);border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.gopt b{display:block;font-size:14.5px;letter-spacing:-.02em}
.gopt small{display:block;font-size:11.5px;color:var(--dim);margin-top:4px;line-height:1.5}
.gopt .lvl{flex:none;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:5px 10px;background:var(--card2);color:var(--dim)}
.gopt.balik{background:color-mix(in srgb,var(--accent) 5%,var(--card));border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.gopt.balik b{color:var(--accent2)}

.wrow{display:flex;align-items:center;gap:10px;padding:13px 15px;background:var(--card);border:1px solid var(--hair);border-radius:16px;margin-bottom:7px;width:100%;text-align:left;box-shadow:var(--sh)}
.wrow b{font-size:15px;min-width:70px;letter-spacing:-.025em}
.wrow .dt{font-size:12.5px;color:var(--dim);flex:1}
.wrow .dl{font-size:12.5px;font-weight:800}
.wrow .up{color:var(--danger)} .wrow .dn{color:var(--ok)} .wrow .eq{color:var(--dim)}

.wcard .big{font-size:34px;font-weight:800;line-height:1;letter-spacing:-.04em;font-stretch:106%;margin-top:4px}
.wcard .btn{margin-top:15px}

/* input timer istirahat bebas (di Pengaturan) */
.restcustom{display:flex;gap:8px;margin-top:10px;align-items:center}
.restcustom input{
  flex:1;min-width:0;min-height:48px;background:var(--card2);border:1.5px solid transparent;border-radius:13px;
  padding:10px;text-align:center;color:var(--txt);font-size:16px;font-weight:800
}
.restcustom input:focus{outline:none;border-color:var(--accent2)}
.restcustom button{flex:none;padding:0 22px;min-height:48px;border-radius:999px;background:var(--accent);background-image:var(--hatch);color:var(--on);font-weight:800;font-size:13px}

/* ============================================================
   BINGKAI HP DI LAYAR LEBAR (desktop/tablet) — ala app BIKIN!.
   Semua elemen dikurung jadi kolom 420px di tengah; di HP
   (layar < 700px) nggak ada yang berubah sama sekali.
   ============================================================ */
@media (min-width:700px){
  body{background:#E9E7DE}
  body::before{
    content:"";position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);
    width:420px;background:var(--bg);
    border-left:2px solid var(--line);border-right:2px solid var(--line);
    z-index:-1;
  }
  #topbar{width:420px;margin:0 auto}
  main{max-width:420px}
  #tabbar{
    left:50%;right:auto;width:420px;transform:translateX(-50%);
    border-left:2px solid var(--line);border-right:2px solid var(--line);
  }
  #restBar{left:50%;right:auto;width:392px;transform:translateX(-50%)}
  #gate{
    left:50%;right:auto;width:420px;transform:translateX(-50%);
    border-left:2px solid var(--line);border-right:2px solid var(--line);
  }
}

/* pemilih hari latihan (onboarding + pengaturan) */
.hpick{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:6px 0 4px}
.hday{
  font:inherit;font-size:12.5px;font-weight:800;padding:12px 0;border-radius:12px;
  background:var(--card);border:1.5px solid var(--hair2);color:var(--dim);cursor:pointer
}
.hday.on{background:var(--accent);border-color:var(--accent);color:var(--on)}
.hpick-info{font-size:12px;font-weight:700;color:var(--dim);text-align:center;margin:2px 0 12px;min-height:16px}

/* baris porsi di layar hari */
.porsibar{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--hair);border-radius:14px;padding:10px 14px;margin-bottom:10px;font-size:12.5px;color:var(--dim)}
.porsibar b{color:var(--txt)}
.porsibar .ubah{font-style:normal;font-size:10px;font-weight:800;color:var(--accent2);border:1px solid var(--accent);border-radius:999px;padding:1px 8px;margin-left:4px}
.porsibtn{flex:none;font:inherit;font-size:12px;font-weight:800;color:var(--accent2);background:color-mix(in srgb,var(--accent) 8%,var(--card));border:1.5px solid var(--accent);border-radius:999px;padding:8px 14px;cursor:pointer}

/* ============================================================
   SISTEM GERAK (fase desain 1) — halus ala spring, murah GPU
   (cuma transform+opacity), mati otomatis di reduced-motion.
   ============================================================ */
/* layar masuk: anak-anak konten naik berkaskade — CUMA pas ganti layar */
.view-masuk>*{animation:naik .5s cubic-bezier(.16,.84,.28,1) both}
.view-masuk>:nth-child(2){animation-delay:.045s}
.view-masuk>:nth-child(3){animation-delay:.09s}
.view-masuk>:nth-child(4){animation-delay:.135s}
.view-masuk>:nth-child(5){animation-delay:.18s}
.view-masuk>:nth-child(6){animation-delay:.22s}
.view-masuk>:nth-child(7){animation-delay:.255s}
.view-masuk>:nth-child(n+8){animation-delay:.285s}
@keyframes naik{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* langkah kuis / gate: tiap layar ngambang masuk */
.gate-in{animation:naik .42s cubic-bezier(.16,.84,.28,1) both}

/* sheet: latar meresap + panelnya meluncur naik kayak ada pegasnya */
#sheetWrap:not([hidden]) #sheetBg{animation:resap .28s ease-out both}
#sheetWrap:not([hidden]) #sheet{animation:sheet-naik .38s cubic-bezier(.18,.9,.24,1.04) both}
@keyframes resap{from{opacity:0}to{opacity:1}}
@keyframes sheet-naik{from{transform:translateY(46px);opacity:0}to{transform:none;opacity:1}}

/* bar istirahat nongol dari bawah */
#restBar:not([hidden]){animation:bar-naik .34s cubic-bezier(.18,.9,.26,1.06) both}
@keyframes bar-naik{from{transform:translateY(18px) scale(.98);opacity:0}to{transform:none;opacity:1}}

/* cincin progres: ngisi dari nol pas layar kebuka */
.ring-i{animation:ring-isi .9s cubic-bezier(.3,.6,.2,1) both}
@keyframes ring-isi{from{stroke-dashoffset:var(--c)}}

/* tab aktif: ikonnya hidup dikit */
#tabbar button svg{transition:transform .22s cubic-bezier(.2,.8,.3,1.3)}
#tabbar button.active svg{transform:translateY(-1.5px) scale(1.07)}

/* fokus keyboard kelihatan (aksesibilitas) */
button:focus-visible,.hday:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px}

/* desktop: hover ngangkat pelan (HP nggak kena) */
@media (hover:hover){
  .day:hover,.hist:hover,.qopt:hover,.gopt:hover,.rev-day:hover{border-color:color-mix(in srgb,var(--accent) 40%,transparent);transform:translateY(-1px)}
  .btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
  .icon-btn:hover,.chip:hover{border-color:var(--hair2);color:var(--txt)}
  .hday:hover{border-color:var(--accent)}
  .porsibtn:hover,.swapbtn:hover{filter:brightness(1.04);transform:translateY(-1px)}
}

/* butiran halus di kanvas — ngilangin rasa "vektor steril" */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:95;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   DESAIN 6 "DATA ATLET" — bahasa visual final (pilihan owner
   15 Agu 2026, menggantikan uji coba 45). Dashboard angka:
   ring konik, strip ticker, baris hari padat, CTA tinta.
   ============================================================ */
:root{--bg:#FCFBF8;--r:22px;--sh:0 2px 3px rgba(20,22,16,.03),0 10px 26px rgba(20,22,16,.05)}
body{font-variant-numeric:tabular-nums}

/* tab bar ngambang ala pil (prototipe 6 pakai ini juga) */
#tabbar{
  left:14px;right:14px;bottom:12px;grid-template-columns:repeat(3,1fr);gap:4px;
  background:rgba(255,255,255,.92);border:1px solid var(--line);border-top:1px solid var(--line);
  border-radius:22px;padding:6px;box-shadow:0 14px 34px rgba(20,22,16,.12);
}
#tabbar button{padding:11px 4px;border-radius:16px;gap:4px}
#tabbar button.active{background:var(--accent);background-image:var(--hatch);color:#fff}
main{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
#restBar{bottom:calc(86px + env(safe-area-inset-bottom))}
@media (min-width:700px){
  #tabbar{left:50%;right:auto;width:392px;transform:translateX(-50%);border:1px solid var(--line)}
}

/* kepala beranda: halo kiri, kicker minggu kanan */
.top6{display:flex;justify-content:space-between;align-items:center;margin:2px 2px 14px}
.top6 b{font-size:20px;letter-spacing:-.028em;font-stretch:106%}
.top6 .live{font-size:10px;font-weight:800;color:var(--accent2);letter-spacing:.18em}

/* panel utama: ring + info sesi */
.panel6{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;gap:18px;align-items:center;box-shadow:var(--sh);margin-bottom:12px}
.ring6{width:98px;height:98px;border-radius:50%;background:conic-gradient(var(--accent) 0 calc(var(--p,0)*1%),#EFEDE6 0);display:grid;place-items:center;flex:none}
.ring6 i{width:74px;height:74px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-style:normal;font-weight:800;font-size:19px;letter-spacing:-.03em}
.panel6 .grow b{font-size:16.5px;display:block;letter-spacing:-.022em;line-height:1.25}
.panel6 .grow small{font-size:11.5px;color:var(--dim);display:block;margin-top:3px;font-weight:500;letter-spacing:0;text-transform:none}
.panel6 .target{font-size:10px;color:var(--accent2);font-weight:800;letter-spacing:.1em;margin-top:7px}

/* strip ticker 3 sel */
.tick6{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-bottom:12px;box-shadow:var(--sh)}
.tick6>div{background:var(--card);padding:14px 8px;text-align:center}
.tick6 b{font-size:20px;letter-spacing:-.035em;display:block}
.tick6 b span{font:inherit;color:inherit;letter-spacing:inherit}
.tick6>div>span{font-size:8.5px;font-weight:800;letter-spacing:.12em;color:var(--dim)}

/* baris hari padat */
.baris6{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;margin-bottom:12px}
.row6{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid #F0EEE6;font-size:13.5px;width:100%;text-align:left;transition:background .15s}
.row6:last-child{border-bottom:0}
.row6:active{background:#F6F4EC}
.row6 .hr{color:var(--dim);font-weight:800;font-size:11px;letter-spacing:.08em;width:34px;flex:none}
.row6 .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row6 .st{flex:none;font-weight:800;font-size:12.5px}
.row6 .st.ok{color:var(--ok)}
.row6 .st.now{color:var(--accent2)}
.row6 .st.miss{color:var(--warn)}
.row6 .st.dim{color:var(--sunk)}
.row6.now .nm{font-weight:800;color:var(--accent2)}

/* CTA tinta -> jingga pas ditekan */
.cta6{display:block;width:100%;text-align:center;background:var(--txt);color:#fff;border-radius:16px;padding:17px;font-weight:800;font-size:14.5px;letter-spacing:-.01em;margin-bottom:12px;transition:transform .16s cubic-bezier(.2,.8,.3,1.4),background .15s}
.cta6:active{transform:scale(.97);background:var(--accent)}

/* kartu umum bahasa 6 (dipakai berat badan dll) */
.kartu6{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:12px;box-shadow:var(--sh)}
.kartu6 small{font-size:9.5px;font-weight:800;letter-spacing:.16em;color:var(--dim)}
.kartu6 .big{font-size:32px;font-weight:800;letter-spacing:-.04em;font-stretch:106%;margin:5px 0 2px}
.kartu6 p{font-size:12px;color:var(--dim)}

/* tombol gerakan selesai */
.selesai-btn{margin-top:10px}
.selesai-btn:not(.ghost){background:var(--ok);background-image:none;box-shadow:0 6px 18px color-mix(in srgb,var(--ok) 24%,transparent)}