/* Tampilan HP & lembar bawah (bottom sheet). Di desktop: appbar, menu bawah, dan tombol + mengambang disembunyikan. */
.appbar,.bnav,.fab{display:none}
.sheetin h3{margin:0 0 8px}
.srow{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border:0;background:none;text-align:left;border-radius:12px;color:var(--ink);text-decoration:none;font-weight:600;font-size:15px}
.srow:hover{background:var(--bg)}
.srow em{margin-left:auto;font-style:normal;font-size:12px;font-weight:700;background:var(--blue);color:#fff;border-radius:99px;padding:1px 9px}
.srow small{margin-left:auto;color:var(--mute);font-weight:400}
.me.big{margin-bottom:8px}
@keyframes sheet{from{transform:translateY(100%)}}
@media(max-width:860px){
body{padding-bottom:calc(70px + env(safe-area-inset-bottom));font-size:15px}
.shell{grid-template-columns:1fr}
.side{display:none}
.appbar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:25;padding:10px 14px;background:var(--card);border-bottom:1px solid var(--line)}
@supports(background:color-mix(in srgb,red,blue)){.appbar{background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(10px)}}
.appbar .brand{padding:0}.ttl{font-size:17px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avbtn{padding:0;border:0;background:none;border-radius:50%}
.bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--card);border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
.bn{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:none;color:var(--mute);font-size:11px;font-weight:600;padding:6px 0;border-radius:12px;text-decoration:none}
.bn.on{color:var(--blue)}.bn.on .ic{transform:translateY(-2px)}
.fab{display:grid;position:fixed;right:16px;bottom:calc(78px + env(safe-area-inset-bottom));width:56px;height:56px;border-radius:50%;background:var(--blue);color:#fff;border:0;box-shadow:var(--sh2);place-items:center;z-index:28;padding:0;animation:pop2 .45s both}
.wrap{padding:0 12px}
.hero{margin:12px;padding:18px 0 20px;border-radius:18px}
.hero h1{font-size:26px;max-width:calc(100% - 80px);margin-bottom:6px}
.hero .lead{font-size:14px;margin-bottom:12px;max-width:calc(100% - 70px)}
.hero #bee{width:84px;bottom:-12px;right:4px}
.back{margin-bottom:4px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stats div{min-width:0;padding:8px 10px;font-size:12px}.stats b{font-size:22px}
.prog{max-width:none}
.cols{display:flex;flex-direction:column;gap:12px;padding-top:4px}
.cols>.main,.cols>aside{display:contents}
.o1{order:1}.o2{order:2}.o3{order:3}.o4{order:4}.o5{order:5}.o6{order:6}.o7{order:7}
.card{padding:14px;margin:0}
.grid{grid-template-columns:1fr;margin-bottom:0;gap:10px}
.cls{padding:12px}.cls i{width:46px;height:46px;font-size:22px;border-radius:12px}
.cls.tilt:hover{transform:none}
.sec{margin:8px 0 10px}.sec .primary{display:none}
.week{gap:4px}.day{padding:8px 0}.day b{font-size:17px}
.bar{flex-direction:column;align-items:stretch;gap:10px;margin:0}
.bar>.primary{display:none}
.pilltabs{min-width:0;width:100%}.sbox{min-width:0;flex:none}
.post{gap:12px;padding:12px}.pic{width:40px;height:40px}.post h3{font-size:16px}
.metas{gap:10px}.meta.dim{margin-left:0}
input,select,textarea{font-size:16px}
.ringcard{gap:12px}.ring{width:76px}
.empty2{padding:16px}
dialog{width:100%;max-width:100%;margin:auto 0 0;border-radius:22px 22px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));max-height:92vh;max-height:92dvh;overflow:auto}
dialog[open]{animation:sheet .3s cubic-bezier(.2,.9,.3,1)}
dialog .row label{min-width:0;flex:1 1 100%}
dialog .act button{flex:1}
#toast{bottom:calc(84px + env(safe-area-inset-bottom));max-width:calc(100% - 24px);text-align:center}
}

/* ===== Perapian tampilan HP (v9) ===== */
@media(max-width:860px){
.content{padding-bottom:84px}
.hero{margin:10px 12px;padding:16px 0 16px;border-radius:16px}
.hero h1{font-size:23px;line-height:1.15;max-width:calc(100% - 84px)}
.hero .lead{font-size:13.5px;line-height:1.45;max-width:calc(100% - 84px);margin-bottom:12px}
.hero #bee{top:30px;bottom:auto;right:6px;width:70px}
.stats{gap:6px}
.stats div{padding:8px 9px;font-size:11.5px;border-radius:12px;line-height:1.25}
.stats .ic{width:16px;height:16px;margin-bottom:1px}.stats b{font-size:20px}
.sec{margin:14px 0 8px}.sec h2{font-size:19px}
.card{border-radius:14px}.card h3{font-size:16px}
.bar{gap:8px;margin-bottom:10px}
.pilltabs button{padding:8px 6px;font-size:14px}
.sbox input::placeholder{font-weight:400;font-size:15px}
.chips{flex-wrap:nowrap;margin:0 -12px;padding:0 12px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent)}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:none;white-space:nowrap;padding:6px 13px;font-size:13px}
.fab{width:52px;height:52px;right:14px;bottom:calc(74px + env(safe-area-inset-bottom))}
.post{padding:12px;gap:10px}.post h3{font-size:15.5px;line-height:1.3}
.cls{gap:12px}.cls h3{font-size:17px}
}
@media(max-width:380px){
.hero h1{font-size:21px}.hero #bee{width:60px}
.stats b{font-size:18px}.stats div{padding:7px 8px}
}
.chip{white-space:nowrap}