/* SELARAS — pola tampilan aplikasi gym modern: putih bersih, aksen tosca, kartu foto gelap, CTA kuning */
:root{--navy:#0B3A42;--navy2:#0E5560;--aksen:#12A7B5;--aksen2:#5CCAD4;--teal:#12A7B5;--kuning:#FFD23F;--hijau:#22A06B;--merah:#E5484D;--bg:#FFFFFF;--bg2:#F3F7F8;--kartu:#FFFFFF;--teks:#14232B;--abu:#7B8A93;--garis:#E5ECEE;--garis2:#D5DFE2;--r:16px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--teks);font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:14.5px;line-height:1.45}
body{min-height:100vh}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;line-height:1.2;font-weight:800;letter-spacing:-.01em}
h3{font-size:16px;margin-bottom:10px}
h4{font-size:14px;margin:14px 0 6px}
#app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg);position:relative}
@media(min-width:760px){body{background:#E9EFF1}#app{box-shadow:0 0 40px rgba(11,58,66,.12)}}
.isi{padding:6px 16px 120px}
.isi.dgn-hero{margin-top:-46px;position:relative;z-index:2}
.isi.tanpa-pad{padding:0 16px 120px}
.ic{width:20px;height:20px}
.kecil{font-size:12px;color:var(--abu);margin:6px 0}
.tengah{text-align:center;display:block;margin:12px auto}
.redup{color:var(--abu)}
.merah{color:var(--merah)!important}
.naik{color:var(--merah)}.turun{color:var(--hijau)}
.ok-teks{color:var(--hijau);font-weight:700;margin:8px 0 0}
.sub{color:var(--abu);margin:-4px 0 12px;font-size:12.5px}
.lead{color:var(--abu);margin:6px 0 16px}
.sek{font-size:16px;font-weight:800;margin:22px 0 12px}

/* hero beranda */
.hero-f{background-size:cover;background-position:right center;padding:12px 18px 70px;min-height:250px;position:relative}
.hf-top{display:flex;justify-content:space-between;align-items:center;padding-top:env(safe-area-inset-top)}
.brand-f{display:inline-flex;align-items:center;gap:7px;font-weight:900;font-size:17px;color:var(--navy);letter-spacing:-.02em}
.brand-f img{width:30px;height:30px;border-radius:9px}
.lonceng{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.9);display:grid;place-items:center;color:var(--navy);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.hf-isi{max-width:62%;margin-top:30px}
.hf-isi h1{font-size:19px;color:var(--teks)}
.hf-isi p{font-size:12px;color:#44555E;margin:6px 0 0}
.hf-dots{display:flex;gap:5px;margin-top:16px}
.hf-dots i{width:6px;height:6px;border-radius:6px;background:#C9D6DA}.hf-dots i.on{width:18px;background:var(--aksen)}

/* kotak program */
.pilihbox{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--garis);border-radius:14px;padding:12px 14px;box-shadow:0 6px 18px rgba(11,58,66,.08);margin-bottom:12px}
.pb-ik{width:36px;height:36px;border-radius:10px;background:#E3F6F8;color:var(--aksen);display:grid;place-items:center}
.pb-tx{flex:1;min-width:0}.pb-tx small{display:block;font-size:11px;color:var(--abu)}.pb-tx b{display:block;font-size:13.5px}
.pb-tx em{font-style:normal;font-size:11px;color:var(--abu);display:flex;align-items:center;gap:5px}
.titikhijau{width:7px;height:7px;border-radius:50%;background:var(--hijau);display:inline-block}
.promo{display:flex;align-items:center;gap:12px;border:1.5px dashed #F2B544;background:linear-gradient(90deg,#FFF7E0,#FFFDF5);border-radius:14px;padding:11px 12px}
.pr-ik{width:40px;height:40px;border-radius:12px;background:#FFE8A3;color:#B07800;display:grid;place-items:center;flex:0 0 40px}
.promo div{flex:1}.promo b{display:block;font-size:13px}.promo small{font-size:11.5px;color:#6E6047}
.klaim{background:var(--aksen);color:#fff;font-weight:800;font-size:12.5px;padding:8px 16px;border-radius:10px}
.klaim.off{background:#DDE5E7;color:var(--abu)}

/* ikon */
.ikon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ikon-t{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11.5px;font-weight:600;text-align:center}
.it-kotak{position:relative;width:62px;height:62px;border-radius:18px;display:grid;place-items:center;color:var(--navy)}
.it-kotak .ic{width:28px;height:28px}
.it-kotak[class*="g-"]{color:#fff;box-shadow:0 8px 18px -6px var(--sh),inset 0 1px 0 rgba(255,255,255,.28)}
.it-kotak[class*="g-"]::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 50%);pointer-events:none}
.it-kotak[class*="g-"] .ic{width:27px;height:27px;stroke-width:1.9}
.g-teal{background:linear-gradient(145deg,#2CC6D2,#0E8C98);--sh:rgba(14,140,152,.55)}
.g-amber{background:linear-gradient(145deg,#FFC94D,#F29A0C);--sh:rgba(242,154,12,.55)}
.g-green{background:linear-gradient(145deg,#45D08A,#1A9A5C);--sh:rgba(26,154,92,.5)}
.g-coral{background:linear-gradient(145deg,#FF8A7A,#E5484D);--sh:rgba(229,72,77,.5)}
.ikon-t:active .it-kotak{transform:scale(.95)}
.baru{position:absolute;top:-6px;right:-10px;background:var(--merah);color:#fff;font-style:normal;font-size:8.5px;font-weight:900;padding:2px 5px;border-radius:6px}

/* seksi dengan "Lihat semua" */
.sek-f{display:flex;justify-content:space-between;align-items:flex-end;margin:22px 0 12px}
.sek-f .sek{margin:0}
.sek-f small{font-size:11.5px;color:var(--abu)}
.sek-f > a{font-size:12.5px;font-weight:700;color:var(--aksen);white-space:nowrap}

/* kartu foto menu */
.geser{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 6px;scrollbar-width:none}
.geser::-webkit-scrollbar{display:none}
.fcard{position:relative;flex:0 0 46%;scroll-snap-align:start;height:250px;border-radius:14px;overflow:hidden;background-size:cover;background-position:center;color:#fff;display:flex;flex-direction:column;justify-content:flex-end}
.fcard .fpl{position:absolute;top:30px;left:50%;transform:translateX(-50%);width:120px;height:120px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
.fcard .fpl .piring{width:120px;height:120px}
.fcard::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(5,30,36,.9));pointer-events:none}
.fchip{position:absolute;top:8px;left:8px;right:8px;display:flex;justify-content:space-between;z-index:2}
.jamchip,.kkchip{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;background:rgba(0,0,0,.55);padding:3px 7px;border-radius:7px}
.jamchip .ic{width:12px;height:12px}
.kkchip{background:var(--kuning);color:#3A2E00}
.fbawah{position:relative;z-index:2;padding:0 10px 8px}
.fbawah small{font-size:10px;opacity:.85;font-weight:600}
.fbawah b{display:block;font-size:14px;line-height:1.2;margin:2px 0}
.fbawah em{font-style:normal;font-size:10.5px;opacity:.85}
.fbar{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.14);backdrop-filter:blur(4px);font-size:10px;font-weight:800;letter-spacing:.06em;padding:7px 10px}
.fbar.ok{background:rgba(34,160,107,.85)}
.fbar .ic{width:14px;height:14px}
.fcard.kosong{background:var(--bg2);color:var(--teks);border:1.5px dashed var(--garis2)}
.fcard.kosong::after{display:none}
.fcard.kosong .fbar{background:var(--aksen);color:#fff}

/* kartu aktivitas */
.acard{position:relative;display:block;border-radius:14px;overflow:hidden;background-size:cover;background-position:center 30%;min-height:170px;text-shadow:0 1px 6px rgba(0,0,0,.45);color:#fff;padding:16px 52px 16px 16px;min-height:150px}
.acard b{display:block;font-size:20px;margin:10px 0 4px}
.acard em{font-style:normal;font-size:12px;opacity:.88}
.side{position:absolute;right:0;top:0;bottom:0;width:34px;background:var(--aksen);color:#fff;writing-mode:vertical-rl;transform:rotate(180deg);font-size:10.5px;font-weight:800;letter-spacing:.08em;display:flex;align-items:center;justify-content:center}
.lvl{display:inline-block;font-size:10.5px;font-weight:700;background:rgba(255,255,255,.18);color:#fff;padding:3px 8px;border-radius:6px;margin-right:5px}
.lvl.kuning{background:var(--kuning);color:#3A2E00}.lvl.hijau{background:var(--hijau)}.lvl.merah{background:var(--merah);color:#fff!important}

/* ringkasan */
.ringkas-f{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.ringkas-f a{border:1px solid var(--garis);border-radius:14px;padding:12px}
.ringkas-f small{display:block;font-size:11px;color:var(--abu)}
.ringkas-f b{display:block;font-size:20px;font-weight:800;margin:2px 0}
.ringkas-f b i{font-style:normal;font-size:11px;color:var(--abu);margin-left:2px;font-weight:600}
.ringkas-f em{font-style:normal;font-size:11px;color:var(--aksen);font-weight:700}
.ringkas-f a:nth-child(3){background:var(--navy);color:#fff;border-color:var(--navy)}.ringkas-f a:nth-child(3) small,.ringkas-f a:nth-child(3) b i{color:#A8D8DE}.ringkas-f a:nth-child(3) em{color:var(--kuning)}
.ringkas3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:6px}
.ringkas3 div{border:1px solid var(--garis);border-radius:14px;padding:12px}
.ringkas3 small{display:block;font-size:11px;color:var(--abu)}
.ringkas3 b{display:block;font-size:20px;font-weight:800}
.ringkas3 b i{font-style:normal;font-size:11px;color:var(--abu)}

/* kartu umum */
.kartu{display:block;background:var(--kartu);border:1px solid var(--garis);border-radius:var(--r);padding:16px;margin-bottom:12px}
.kartu.tipis{padding:14px}
.kartu.angkat{margin-top:-24px;position:relative;z-index:2;box-shadow:0 8px 22px rgba(11,58,66,.1)}
.kt-atas{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px}
.kt-atas small{color:var(--abu);font-weight:600}
.kt-atas h2{font-size:19px;margin-top:2px}
.kt-atas h3{margin:2px 0 0}
.lencana{font-size:10.5px;font-weight:800;background:#E3F6F8;color:#0E8C98;padding:4px 8px;border-radius:7px;white-space:nowrap}
.lencana.abu{background:var(--bg2);color:var(--abu)}.lencana.oranye{background:#FFF1CC;color:#9A6B00}
.baris{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--garis);font-size:13px}
.baris:last-child{border-bottom:0}.baris span{color:var(--abu)}.baris b{text-align:right}
.kartu.tautan{display:flex;align-items:center;gap:10px;font-weight:700}
.kartu.tautan span{flex:1}.kartu.tautan.sorot{background:var(--navy);color:#fff;border-color:var(--navy)}
.kartu.timbang{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#FFFBEA;border-color:#F6E2A0;margin-top:12px}
.besar{font-size:22px;font-weight:800}
.mcard{flex:0 0 64%;scroll-snap-align:start;border-radius:14px;overflow:hidden;border:1px solid var(--garis)}
.mtx{padding:10px 12px}.mtx small{color:var(--abu);font-size:11px}.mtx b{display:block;font-size:14px}.mtx em{font-style:normal;font-size:12px;color:var(--aksen);font-weight:700}
.dua{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.dua.atas{margin:0 0 14px}
.rv{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rv div{text-align:center}.rv small{display:block;font-size:11px;color:var(--abu)}
.rv b{font-size:18px;font-weight:800}
.rv em{display:block;font-style:normal;font-size:11px;color:var(--abu)}
.kartu.rv b{font-size:20px}
.tgt{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}

/* tombol */
.btn{display:flex;align-items:center;justify-content:center;gap:6px;background:var(--kuning);color:#2B2300;font-weight:800;border-radius:12px;padding:12px 14px;min-height:46px;text-align:center;font-size:14px;transition:transform .1s}
.btn:active{transform:scale(.97)}
.btn.ghost{background:#fff;color:var(--aksen);border:1.5px solid var(--aksen)}
.btn.ghost.merah{color:var(--merah);border-color:#F3C2C3}
.btn.kecil{min-height:34px;padding:7px 12px;font-size:12.5px}
.btn.lebar{width:100%;margin:8px 0 14px}
.btn[disabled]{opacity:.4;pointer-events:none}
.kecilbtn{font-size:12px;font-weight:800;color:#fff;background:var(--aksen);padding:6px 12px;border-radius:9px;white-space:nowrap}
.link{color:var(--aksen);font-weight:700;text-decoration:underline;font-size:13px}

/* kepala halaman */
.kepala{display:grid;grid-template-columns:36px 1fr minmax(36px,auto);align-items:center;padding:calc(12px + env(safe-area-inset-top)) 0 12px;position:sticky;top:0;background:var(--bg);z-index:5}
.kepala h1{text-align:left;font-size:17px;padding-left:6px}
.balik{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--teks)}
.balik.terang{background:rgba(255,255,255,.18);color:#fff}

/* tabs, cips */
.tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--garis);margin-bottom:12px}
.tabs a{text-align:center;padding:10px 0;font-weight:700;font-size:13px;color:var(--abu);border-bottom:2.5px solid transparent;margin-bottom:-1px}
.tabs a.on{color:var(--aksen);border-color:var(--aksen)}
.cips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.cips.gulir{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 12px;padding:0 16px;scrollbar-width:none}
.cips.gulir::-webkit-scrollbar{display:none}
.cip{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;padding:7px 13px;border-radius:9px;border:1px solid var(--garis2);font-weight:600;font-size:12.5px;color:#55666F;background:#fff}
.cip.on{background:#E3F6F8;color:#0E8C98;border-color:var(--aksen)}
.cip input{display:none}
.tglstrip{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin:2px 0 12px}
.tgl{border:1px solid var(--garis);border-radius:11px;padding:7px 0;display:flex;flex-direction:column;align-items:center}
.tgl small{font-size:10px;color:var(--abu)}.tgl b{font-size:16px}
.tgl.on{background:var(--aksen);border-color:var(--aksen);color:#fff}.tgl.on small{color:#D6F3F6}
.modepil{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.modepil button{border:1px solid var(--garis2);border-radius:10px;padding:9px 6px;font-weight:700;font-size:12px;color:#55666F}
.modepil button.on{border-color:var(--aksen);background:#E3F6F8;color:#0E8C98}
.infobar{display:flex;justify-content:space-between;gap:10px;align-items:center;background:var(--bg2);border-radius:11px;padding:10px 12px;font-size:12.5px;margin-bottom:12px}
.infobar b{color:var(--aksen)}
.total .meter{margin:8px 0 4px}

/* kartu daftar foto (menu & program) */
.lcard,.pcard{position:relative;display:flex;align-items:flex-end;min-height:118px;border-radius:13px;overflow:hidden;background-size:cover;background-position:center;color:#fff;margin-bottom:10px;padding:12px 46px 12px 14px}
.lcard .fpl{position:absolute;right:46px;top:50%;transform:translateY(-50%);width:96px;height:96px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.35))}
.lcard .fpl .piring{width:96px;height:96px}
.lcard::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,30,36,.9) 0,rgba(5,30,36,.55) 55%,rgba(5,30,36,.1));pointer-events:none}
.lc-isi{position:relative;z-index:2;max-width:70%}
.lc-isi b{display:block;font-size:15px;line-height:1.2}
.lc-isi small{font-size:11px;opacity:.85}
.lc-pill{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.lc-pill span{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;background:rgba(0,0,0,.45);padding:3px 7px;border-radius:7px}
.lc-pill span:first-child{background:#fff;color:var(--teks)}
.lc-pill .ic{width:12px;height:12px}
.lcard .side{z-index:3}
.lcard.kosong{background:var(--bg2);color:var(--teks);border:1.5px dashed var(--garis2)}
.lcard.kosong::before{display:none}
.pcard{align-items:center;gap:12px;min-height:84px;padding-right:14px}
.pcard > *{position:relative;z-index:2}
.pc-no{width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);display:grid;place-items:center;font-size:12px;font-weight:800;flex:0 0 30px}
.pcard b{display:block;font-size:13.5px}
.pc-tag{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.pc-tag span{font-size:10px;font-weight:700;background:rgba(255,255,255,.2);padding:2px 7px;border-radius:5px}
.pc-tag .lvl{margin:0}
.pcard .new{position:absolute;top:8px;right:8px;background:var(--merah);color:#fff;font-style:normal;font-size:9px;font-weight:900;padding:2px 6px;border-radius:5px}
.pcard.kini{outline:2.5px solid var(--kuning)}
.pcard.rest{filter:grayscale(.6)}

/* baris menu (halaman catat, ganti) */
.mbaris{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--garis);border-radius:13px;padding:10px;margin-bottom:9px}
.mbaris.polos{border:0;padding:6px 0;margin:6px 0 0}
.mimg{position:relative;height:110px;display:grid;place-items:center;background:radial-gradient(circle at 60% 35%,#1C6A74,#0B3A42)}
.mimg .piring{width:84px;height:84px}
.mimg .ok{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:var(--hijau);color:#fff;font-style:normal;font-size:12px;display:grid;place-items:center;font-weight:800}
.mimg .tag{position:absolute;top:8px;left:8px;font-size:10px;font-style:normal;background:var(--kuning);color:#3A2E00;padding:2px 7px;border-radius:6px;font-weight:800}
.mimg.kecil{flex:0 0 56px;height:56px;border-radius:12px;background:radial-gradient(circle at 60% 35%,#1C6A74,#0B3A42)}
.mimg.kecil .piring{width:46px;height:46px}
.mb-tx{flex:1;min-width:0}
.mbaris small,.mb-tx small{color:var(--abu);font-size:11px;font-weight:600;display:block}
.mbaris b{display:block;font-size:14px;line-height:1.25}
.mbaris em{font-style:normal;font-size:12px;color:var(--aksen);font-weight:700}
.mbaris > div:not(.mimg){flex:1}
.mbaris .ok{font-style:normal;color:var(--hijau);font-weight:800}
.mbaris.kosong{border-style:dashed;background:var(--bg2)}
.kartu.hari.kini{border:2px solid var(--aksen)}
.jlist{list-style:none;margin:0;padding:0}
.jlist li{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--garis);font-size:13px}
.jlist li:last-child{border:0}.jlist li a{flex:1;font-weight:600}
.jlist em{font-style:normal;color:var(--abu);font-size:12px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gcard{border:1px solid var(--garis);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;padding-bottom:10px}
.gcard b{font-size:13px;padding:8px 10px 0;line-height:1.25}
.gcard em{font-style:normal;font-size:12px;color:var(--aksen);font-weight:700;padding:2px 10px}
.gcard small{font-size:10.5px;padding:2px 10px}.gcard .status{color:var(--abu)}
.gcard.larang{opacity:.5}

/* resep */
.hero{height:230px;display:grid;place-items:center;margin:0 -16px;position:relative;background:radial-gradient(circle at 60% 35%,#1C6A74,#0B3A42)}
.hero .piring{width:170px;height:170px;filter:drop-shadow(0 14px 22px rgba(0,0,0,.35))}
.hero .balik{position:absolute;top:calc(12px + env(safe-area-inset-top));left:14px;background:rgba(255,255,255,.18);color:#fff}
.jr{font-size:21px;margin:4px 0 12px}
.stat4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center;background:var(--bg2);border-radius:12px;padding:11px 4px;margin-bottom:8px}
.stat4 b{display:block;font-size:16px;font-weight:800}.stat4 small{font-size:10.5px;color:var(--abu)}
.status-tinjau{display:inline-block;font-size:11px;font-weight:700;background:#FFF1CC;color:#8A5E00;padding:5px 9px;border-radius:7px;margin-top:6px}
.tb{width:100%;border-collapse:collapse;font-size:12.5px}
.tb th{text-align:left;font-size:10.5px;color:var(--abu);font-weight:700;padding:0 0 6px;border-bottom:1px solid var(--garis)}
.tb td{padding:9px 0;border-bottom:1px solid var(--garis);vertical-align:top}
.tb td small{display:block;color:var(--abu);font-size:10.5px}
.tb .ka{text-align:right;padding-left:8px;white-space:nowrap}
.langkah-masak{margin:0;padding-left:0;list-style:none;counter-reset:l}
.langkah-masak li{counter-increment:l;position:relative;padding:0 0 10px 34px}
.langkah-masak li::before{content:counter(l);position:absolute;left:0;top:-1px;width:24px;height:24px;border-radius:7px;background:#E3F6F8;color:#0E8C98;font-size:12px;font-weight:800;display:grid;place-items:center}
.aksi-bawah{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 16px}

/* ganti */
.ocard{flex:0 0 44%;scroll-snap-align:start;border:1.5px solid var(--garis);border-radius:14px;overflow:hidden;text-align:left;display:flex;flex-direction:column;padding-bottom:10px;background:#fff}
.geser.opsi.kecil .ocard{flex-basis:40%}
.ocard .mimg{height:96px}.ocard .mimg .piring{width:74px;height:74px}
.ocard b{font-size:12.5px;padding:8px 10px 2px;line-height:1.25}
.ocard em{font-style:normal;font-size:11.5px;color:var(--abu);padding:0 10px}
.ocard small{font-size:11.5px;font-weight:800;padding:2px 10px}
.ocard.on{border-color:var(--aksen);box-shadow:0 0 0 3px #D3F1F4}
.ocard.kini{opacity:.6}
.preview{border:2px solid var(--aksen)}
.banding{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:stretch;margin:8px 0 12px}
.banding>div{background:var(--bg2);border-radius:12px;padding:10px}
.banding .baru{background:#E3F6F8}
.banding small{font-size:10.5px;color:var(--abu);display:block}
.banding b{font-size:13px;display:block;line-height:1.25}
.banding em{font-style:normal;font-size:11px;color:var(--abu);display:block}
.banding span{font-size:12px;font-weight:800;display:block;margin-top:4px}
.banding>i{font-style:normal;font-size:18px;color:var(--aksen);align-self:center}
.selisih{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.selisih div{border-radius:12px;padding:10px;background:var(--bg2)}
.selisih small{display:block;font-size:10.5px;color:var(--abu)}.selisih b{font-size:13.5px}
.selisih em{display:block;font-style:normal;font-size:10.5px;color:var(--abu)}

/* form */
.f{display:block;font-size:12.5px;font-weight:700;color:#3C4D56;margin:0 0 12px}
.f input,textarea{display:block;width:100%;margin-top:6px;padding:11px 12px;border:1px solid var(--garis2);border-radius:10px;font:inherit;font-size:16px;background:#fff;color:var(--teks)}
.f input:focus,textarea:focus{outline:0;border-color:var(--aksen);box-shadow:0 0 0 3px #D3F1F4}
textarea{resize:vertical;margin:0 0 6px;font-size:14px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.g2 .btn{margin-bottom:12px}
.seg,.seg3{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.seg3{grid-template-columns:repeat(3,1fr);margin-bottom:14px}
.seg.wrap{grid-template-columns:repeat(auto-fit,minmax(84px,1fr))}
.seg button,.pil{display:block;border:1.5px solid var(--garis2);background:#fff;border-radius:11px;padding:11px 10px;font-weight:700;font-size:13px;text-align:left;cursor:pointer}
.seg button{text-align:center}.seg button small{display:block;font-weight:600;color:var(--abu);font-size:10.5px}
.seg button.on,.pil.on{border-color:var(--aksen);background:#E3F6F8;color:#0B6F78}
.pil input{display:none}.pil b{display:block}.pil small{display:block;color:var(--abu);font-weight:500;font-size:11.5px;margin-top:2px}
.stack{display:grid;gap:8px;margin-bottom:12px}
.tog{display:flex;gap:10px;align-items:center;font-weight:600;font-size:13.5px;margin:8px 0 12px}
.tog input{width:20px;height:20px;accent-color:var(--aksen)}
.lbl{font-weight:700;font-size:12.5px;margin:12px 0 0}

/* onboarding */
.onb{min-height:100vh;display:flex;flex-direction:column;background:#fff}
.onb-top{padding:calc(16px + env(safe-area-inset-top)) 18px 6px}
.onb-top .logo-k{display:inline-flex;align-items:center;gap:7px;font-weight:900;font-size:17px;color:var(--navy)}
.onb-top .logo-k img{width:30px;height:30px;border-radius:9px}
.onb-top small{display:block;color:var(--abu);margin-top:8px;font-size:12px}
.langkah{display:flex;gap:5px;margin-top:14px}
.langkah i{flex:1;height:4px;border-radius:4px;background:var(--garis)}
.langkah i.on{background:var(--aksen)}
.onb-isi{flex:1;padding:16px 18px 20px}
.onb-isi h2{font-size:22px}
.onb-bawah{position:sticky;bottom:0;display:grid;grid-template-columns:1fr 2fr;gap:10px;padding:12px 18px calc(14px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--garis)}
.ring2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.ring2 div{background:var(--navy);color:#fff;border-radius:14px;padding:14px}
.ring2 div:last-child{background:var(--aksen)}
.ring2 small{display:block;opacity:.8;font-size:11.5px}.ring2 b{font-size:28px;font-weight:900}.ring2 span{opacity:.8;margin-left:4px}
.peringatan{background:#FFF4E5;border:1px solid #FFD49A;border-radius:12px;padding:11px 13px;margin:0 0 12px;font-size:12.5px}
.peringatan p{margin:4px 0 0}
.info{background:#E3F6F8;border-radius:11px;padding:10px 12px;font-size:12.5px;margin-bottom:12px}

/* jalan hari */
.hgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.hcell{aspect-ratio:1;border:1px solid var(--garis);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hcell b{font-size:14px}.hcell small{font-size:9.5px;color:var(--abu)}
.hcell.done{background:var(--aksen);color:#fff;border-color:var(--aksen)}.hcell.done small{color:#D6F3F6}
.hcell.rest{background:var(--bg2)}
.hcell.miss{background:#FDECEC;border-color:#F6CACB}
.hcell.kini{border:2px solid var(--kuning);background:#FFFBEA}
.legenda{display:none}
.sesi-kini{display:none}
.panel-z{background-size:cover;background-position:center;color:#fff;margin:0 -16px;padding:calc(12px + env(safe-area-inset-top)) 18px 46px;min-height:230px;display:flex;flex-direction:column;justify-content:flex-end}
.pz-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:auto}
.pz-j{font-size:12.5px;font-weight:700;background:rgba(0,0,0,.35);padding:4px 10px;border-radius:8px}
.panel-z h1{font-size:26px;margin:8px 0 4px}
.panel-z p{margin:0;opacity:.85;font-size:12.5px}
.pnav{display:flex;justify-content:space-between;margin:-36px 0 40px;position:relative;z-index:3}
.pnav .pn{color:#fff;font-weight:700;font-size:11.5px;background:rgba(0,0,0,.35);padding:4px 10px;border-radius:8px}
.bd{margin:0 0 12px}
.bd-l{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px}
.bd-l span{color:var(--abu)}.bd-l i{font-style:normal;color:var(--abu);font-weight:600}
.meter{height:7px;background:var(--bg2);border-radius:7px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--aksen);border-radius:7px}
.meter i.pen{background:var(--hijau)}
.meter.besar{height:9px;background:rgba(255,255,255,.15);margin:10px 0 18px}
.unggah{margin:4px 0 6px}
.unggah label.btn{width:100%}
#pvbukti img{width:100%;max-height:340px;object-fit:contain;border-radius:12px;margin-top:10px;background:var(--bg2)}

/* modal */
.modal{position:fixed;inset:0;background:rgba(11,30,36,.55);z-index:50;display:flex;align-items:flex-end;justify-content:center;animation:mmasuk .2s}
.lembar{background:#fff;width:100%;max-width:480px;border-radius:22px 22px 0 0;padding:10px 18px calc(18px + env(safe-area-inset-bottom));max-height:92vh;overflow:auto;animation:naikin .25s}
.lembar h2{font-size:19px;margin-top:8px}
.pegang{width:40px;height:5px;background:var(--garis2);border-radius:5px;margin:4px auto 6px}
.modal.gelap{background:var(--navy);align-items:center}
.sesi{color:#fff;text-align:center;padding:24px;max-width:440px;width:100%}
.sesi .jam{font-size:80px;font-weight:900;letter-spacing:-2px;font-variant-numeric:tabular-nums}
.langkah-masak.terang{text-align:left;opacity:.9;font-size:13.5px}
.langkah-masak.terang li::before{background:rgba(255,255,255,.15);color:#fff}
.btn.ghost.terang{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.link.terang{color:rgba(255,255,255,.8);margin-top:16px}
@keyframes mmasuk{from{opacity:0}}@keyframes naikin{from{transform:translateY(40px)}}

/* jurnal, skor */
.jrow{display:flex;align-items:center;gap:12px;border:1px solid var(--garis);border-radius:13px;padding:10px 12px;margin-bottom:8px}
.jd{flex:0 0 44px;height:44px;border-radius:11px;background:var(--aksen);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}
.jd b{font-size:15px;line-height:1}.jd small{font-size:9px;opacity:.85}
.jt{flex:1;min-width:0}.jt b{font-size:13px;display:block}.jt small{font-size:11px;color:var(--abu)}
.saran{margin:0;padding-left:18px;font-size:13px}.saran li{margin-bottom:6px}
.skor-kartu{display:flex;gap:16px;align-items:center}
.skor-kartu h2{font-size:17px;margin-top:4px}.skor-kartu small{color:var(--abu)}
.cincin{--p:0;flex:0 0 96px;height:96px;border-radius:50%;background:conic-gradient(var(--aksen) calc(var(--p)*1%),var(--bg2) 0);display:grid;place-items:center;position:relative}
.cincin::before{content:'';position:absolute;inset:9px;background:#fff;border-radius:50%}
.cincin b{position:relative;font-size:28px;font-weight:900;line-height:1;margin-top:10px}.cincin small{position:relative;margin-top:-28px;font-size:11px}
.papan{list-style:none;margin:6px 0 0;padding:0}
.papan li{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--garis)}
.papan li b{flex:1}.papan li em{font-style:normal;font-weight:800}
.papan .no{width:28px;height:28px;border-radius:8px;background:var(--bg2);display:grid;place-items:center;font-weight:800;font-size:12.5px}
.papan li:nth-child(1) .no{background:var(--kuning)}.papan li:nth-child(2) .no{background:#DDE5E7}.papan li:nth-child(3) .no{background:#F6D7B8}
.papan li.saya{background:#E3F6F8;border-radius:10px}
.akhir{text-align:center;background:var(--navy);color:#fff;border:0}
.akhir small{opacity:.75}.akhir p{opacity:.85;margin:0 0 14px}
.skor-besar{font-size:80px;font-weight:900;line-height:1;margin-top:8px}.skor-besar span{font-size:22px;color:var(--kuning)}
.akhir .stat4{background:rgba(255,255,255,.08)}.akhir .stat4 small{color:rgba(255,255,255,.7)}
canvas.pratinjau{width:100%;border-radius:14px;display:block;margin-bottom:6px;border:1px solid var(--garis)}
.ref{padding:10px 0;border-bottom:1px solid var(--garis);display:flex;flex-direction:column;gap:3px;font-size:12.5px}
.ref:last-child{border:0}.ref small{color:var(--abu)}.ref a{color:#0E8C98;word-break:break-all;font-size:11.5px}.ref em{font-style:normal;font-size:11.5px}
.ref .lencana{align-self:flex-start;margin-top:3px}

/* nav bawah dengan tombol tengah */
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;background:#fff;border-top:1px solid var(--garis);padding:6px 4px calc(8px + env(safe-area-inset-bottom));z-index:20}
.nav a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:600;color:#9AA7AE}
.nav a.on{color:var(--aksen)}
.nav .ic{width:22px;height:22px}
.nav .fab{margin-top:-30px;color:var(--navy);font-weight:800;letter-spacing:.01em}
.nav .fab .fab-c{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:linear-gradient(145deg,#FFB547 0%,#FC5C2B 100%);color:#fff;border:4px solid #fff;box-shadow:0 10px 22px -4px rgba(252,92,43,.55),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .15s ease,box-shadow .15s ease}
.nav .fab .fab-c::after{content:'';position:absolute;inset:4px;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 55%);pointer-events:none}
.nav .fab:active .fab-c{transform:scale(.94)}
.nav .fab .fab-gl{width:32px;height:32px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.15))}
@keyframes fabDot{0%,100%{transform:scale(1)}50%{transform:scale(.82)}}
.nav .fab.live{color:#E5484D}
.nav .fab.live .fab-c{background:radial-gradient(120% 120% at 30% 20%,#FF7A7E 0%,#E5484D 55%,#B8282D 100%);box-shadow:0 10px 24px rgba(229,72,77,.4)}
.nav .fab.live .fab-c::before{content:'';position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(229,72,77,.5);animation:fabNadi 1.4s ease-out infinite}
.nav .fab .fab-rec{width:18px;height:18px;border-radius:5px;background:#fff}
@keyframes fabNadi{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.3);opacity:0}}
@media (prefers-reduced-motion:reduce){.nav .fab.live .fab-c::before{animation:none}}
.catatbtn{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;color:#fff;background:var(--aksen);padding:8px 13px 8px 10px;border-radius:999px;white-space:nowrap;box-shadow:0 4px 12px rgba(18,167,181,.3)}
.catatbtn .ic{width:16px;height:16px;stroke-width:3}
.toast{position:fixed;left:50%;bottom:92px;transform:translate(-50%,20px);background:var(--teks);color:#fff;padding:10px 16px;border-radius:12px;font-weight:700;font-size:13px;opacity:0;transition:.25s;z-index:80;white-space:nowrap}
.toast.on{opacity:1;transform:translate(-50%,0)}
.gizi{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-align:center;margin:0 0 8px}
.gizi div{border:1px solid var(--garis);border-radius:10px;padding:8px 2px}
.gizi small{display:block;font-size:10.5px;color:var(--abu)}.gizi b{font-size:13.5px}
.cari{width:100%;padding:11px 12px;border:1px solid var(--garis2);border-radius:10px;font:inherit;font-size:16px;margin:4px 0 10px}
.cari:focus{outline:0;border-color:var(--aksen);box-shadow:0 0 0 3px #D3F1F4}
.maklist{list-style:none;margin:0;padding:0}
.maklist li button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;padding:10px 2px;border-bottom:1px solid var(--garis)}
.maklist b{display:block;font-size:13.5px}.maklist small{font-size:11.5px;color:var(--abu)}
.maklist em{font-style:normal;font-size:12px;font-weight:700;color:var(--aksen);white-space:nowrap}
.pilihmak{background:#E3F6F8;border:1.5px solid var(--aksen);border-radius:12px;padding:12px;margin:4px 0 12px}
.pilihmak b{display:block}.pilihmak small{font-size:12px;color:#36545A}
.pilihmak .seg.wrap{grid-template-columns:repeat(4,1fr)}
img.foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mimg,.hero{overflow:hidden}
.mimg.kecil{position:relative;overflow:hidden}
.hero img.foto{filter:none}
.fcard .fpl img.foto,.lcard .fpl img.foto{display:none}
/* rekam ala Strava */
.rek{min-height:100vh;display:flex;flex-direction:column;background:#fff;position:relative}
.rk-top{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:calc(10px + env(safe-area-inset-top)) 14px 10px}
.rk-top b{font-size:16px}
.rk-top.over{position:absolute;top:0;left:0;right:0;z-index:3}
.rk-pill{display:inline-flex;align-items:center;gap:6px;background:#fff;border-radius:99px;padding:6px 11px;font-size:12px;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.gdot{width:8px;height:8px;border-radius:50%;background:#C7CFD3;display:inline-block}.gdot.g{background:#22A06B}.gdot.y{background:#F2B544}
.rk-map{height:44vh;min-height:250px;overflow:hidden}
.rk-map .rpeta,.rh-map .rpeta{width:100%;height:100%;display:block}
.rk-sheet{flex:1;background:#fff;border-radius:22px 22px 0 0;margin-top:-18px;position:relative;z-index:2;padding:16px 18px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(0,0,0,.08)}
.rk-mode{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.rk-mode button{border:1.5px solid var(--garis2);border-radius:12px;padding:11px 4px;font-weight:800;font-size:13px}
.rk-mode button.on{border-color:var(--aksen);background:#E3F6F8;color:#0B6F78}
.rk-opt span{font-size:12.5px;font-weight:700;color:var(--abu)}
.rk-start{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:var(--aksen);color:#fff;margin:14px auto 4px;box-shadow:0 10px 24px rgba(18,167,181,.4)}
.rk-start .ic{width:36px;height:36px;fill:#fff}
.rk-pause{background:#FFF4D6;color:#8A6200;font-weight:800;font-size:12.5px;text-align:center;padding:7px;border-radius:9px;margin-bottom:8px}
.rk-big{text-align:center}.rk-big small,.rk-two small{font-size:11.5px;color:var(--abu);font-weight:700;display:block}.rk-two i{font-style:normal;font-weight:500}
.rk-big b{font-size:54px;font-weight:900;letter-spacing:-1px;font-variant-numeric:tabular-nums;line-height:1.1}
.rk-two{display:grid;grid-template-columns:1fr 1fr;text-align:center;border-top:1px solid var(--garis);border-bottom:1px solid var(--garis);margin:8px 0;padding:8px 0}
.rk-two div+div{border-left:1px solid var(--garis)}
.rk-two b{font-size:34px;font-weight:900;font-variant-numeric:tabular-nums}
.rk-mini{display:grid;grid-template-columns:repeat(4,1fr);text-align:center;font-size:10.5px;color:var(--abu);margin:8px 0 10px}
.rk-mini b{display:block;font-size:16px;color:var(--teks);font-weight:800}
.rk-ctrl{display:flex;justify-content:center;gap:26px;margin-top:10px}
.rk-c{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;color:#fff}
.rk-c .ic{width:30px;height:30px}
.rk-c.pause{background:#0B3A42}.rk-c.go{background:var(--aksen)}.rk-c.fin{background:var(--hijau)}
.rk-c.go .ic{fill:#fff}
.rk-lbl{display:flex;justify-content:center;gap:58px;font-size:12px;font-weight:700;color:var(--abu);margin-top:4px}
.rsplit{font-size:13px}
.rs-h,.rs-r{display:grid;grid-template-columns:40px 64px 1fr 60px;gap:8px;align-items:center;padding:6px 0}
.rs-h{font-size:11px;color:var(--abu);font-weight:700;border-bottom:1px solid var(--garis)}
.rs-r{border-bottom:1px solid var(--garis)}.rs-r span:last-child,.rs-h span:last-child{text-align:right;color:var(--abu)}
.rs-r i{height:8px;background:var(--bg2);border-radius:8px;overflow:hidden}.rs-r i em{display:block;height:100%;background:#9FDCE2;border-radius:8px}.rs-r i em.best{background:var(--aksen)}
.rh-j{font-size:22px;margin:4px 0 10px}
.rh-3{display:grid;grid-template-columns:repeat(3,1fr)}.rh-3 small{display:block;font-size:11px;color:var(--abu)}.rh-3 b{font-size:19px}
.rh-map{height:230px;border-radius:14px;overflow:hidden;margin-bottom:12px}
.panel-z .lvl{align-self:flex-start}

.rk-info,.rk-warn{display:flex;gap:10px;align-items:flex-start;border-radius:14px;padding:11px 12px;font-size:12.5px;line-height:1.45;margin:10px 0}
.rk-info{background:#E8F7EE;color:#14563A}.rk-info .ic{color:#1A9A5C;flex:none;width:18px;height:18px;margin-top:1px}
.rk-warn{background:#FFF4D6;color:#6B4A00}.rk-warn .ic{color:#E08A00;flex:none;width:18px;height:18px;margin-top:1px}
.lc-cek{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-size:12px;font-weight:800;background:#fff;color:var(--navy);padding:6px 11px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.18);cursor:pointer}
.lc-cek .ic{width:14px;height:14px;stroke-width:3;color:var(--aksen)}
.lc-cek.ok{background:#1A9A5C;color:#fff}