:root{--bg:#fff6ee;--card:#fff;--ink:#5b4468;--mut:#a090ad;--pink:#ff8fbd;--pk2:#ffd6e7;--lav:#ece3ff;--line:#f3d3e2;--bd:#f5b8d2}
*{box-sizing:border-box;margin:0}
body{font-family:Fredoka,ui-rounded,"Segoe UI",system-ui,sans-serif;color:var(--ink);background-color:var(--bg);background-image:radial-gradient(#fbd3e2 1.6px,transparent 2px);background-size:22px 22px;color-scheme:light;padding:env(safe-area-inset-top) 0 calc(78px + env(safe-area-inset-bottom));min-height:100vh}
header{padding:14px 14px 0;max-width:640px;margin:0 auto;text-align:center}
.banner{position:relative;background:linear-gradient(135deg,#ffd0e4,#ffe6f1);border:3px solid var(--bd);border-radius:24px;padding:14px 10px;box-shadow:4px 4px 0 #f9c7dc}
h1{font-size:1.6rem;font-weight:600;letter-spacing:.3px}
.banner p{font-size:.85rem;margin-top:2px}
.sp{position:absolute;font-style:normal;font-size:1.2rem}.sp.a{left:12px;top:8px}.sp.b{right:14px;bottom:8px}
.sticky{position:relative;display:inline-block;margin:14px 0 0;background:#fff3a8;font-family:Caveat,cursive;font-size:1.25rem;padding:12px 16px 8px;transform:rotate(-2deg);box-shadow:2px 3px 6px #0001;border-radius:4px}
.tape{position:absolute;top:-8px;left:50%;width:48px;height:16px;margin-left:-24px;background:#ffb6d3aa;transform:rotate(3deg)}
main{max-width:640px;margin:0 auto;padding:6px 14px}
.card{background:var(--card);border:2.5px solid var(--bd);border-radius:22px;padding:14px;margin:14px 0;box-shadow:3px 3px 0 #f9d3e3}
h2{font-size:1.05rem;font-weight:600;margin-bottom:8px}.mut{color:var(--mut);font-size:.8rem}small{font-size:.62rem;display:block;color:var(--mut)}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
.btn{background:var(--pink);color:#fff;border-radius:14px;padding:8px 14px;font-weight:600;box-shadow:0 3px 0 #e96a9c}.btn.g{background:var(--lav);color:var(--ink);box-shadow:0 3px 0 #d3c3f2}
input,select,textarea{font:inherit;color:inherit;background:#fffaf6;border:2px solid var(--line);border-radius:12px;padding:8px 10px;width:100%}
.row{display:flex;gap:8px;align-items:center}.row>*{flex:1}.row>.btn,.row>.x{flex:none}
form{display:grid;gap:8px}
.bar{height:14px;border-radius:9px;background:#fde8f0;border:2px solid var(--line);overflow:hidden}.bar i{display:block;height:100%;background:repeating-linear-gradient(45deg,var(--pink),var(--pink) 8px,#ffa9cc 8px,#ffa9cc 16px);transition:width .3s}
.h{display:flex;align-items:center;gap:10px;padding:10px;margin:6px 0;border-radius:14px;width:100%;text-align:left;background:#ffe3ee}.h b{flex:1;font-weight:400}
.c1,.c1 td{background:#ddf0ff}.c2,.c2 td{background:#dff6e6}.c3,.c3 td{background:#fff3c9}.c4,.c4 td{background:#ece3ff}.c0,.c0 td{background:#ffe3ee}
.ck{width:28px;height:28px;border-radius:50%;border:2.5px solid #c9b3dc;background:#fff;display:grid;place-items:center;color:#fff;font-size:.9rem;flex:none}
.on .ck{background:var(--pink);border-color:var(--pink)}.on b{text-decoration:line-through;color:var(--mut)}
.tag{font-size:.7rem;background:#fff;padding:2px 8px;border-radius:9px;border:1.5px solid var(--line)}
.moods{display:flex;justify-content:space-around}.moods button{font-size:1.9rem;border-radius:16px;padding:4px 6px;opacity:.55}.moods .s{opacity:1;background:var(--pk2)}
table{width:100%;border-collapse:separate;border-spacing:0 3px;text-align:center;font-size:.8rem}
th{color:var(--mut);font-weight:600;padding:4px 0}th.t{color:var(--pink)}
td{padding:5px 2px}td:first-child{text-align:left;font-size:.82rem;padding-left:8px;border-radius:12px 0 0 12px}td:last-child{border-radius:0 12px 12px 0}
td .ck{width:22px;height:22px;margin:auto;font-size:.7rem}td.off{color:#d9c6d3}.wrap{overflow-x:auto}
.chips{display:flex;flex-wrap:wrap;gap:6px}.chips label{background:var(--lav);padding:4px 10px;border-radius:10px;font-size:.85rem}.chips input{width:auto;margin-right:4px}
.x{color:var(--mut);padding:4px 8px}.nav2{display:flex;justify-content:space-between;align-items:center}
nav{position:fixed;bottom:0;left:0;right:0;display:flex;background:#fff;border-top:3px solid var(--bd);padding-bottom:env(safe-area-inset-bottom);border-radius:20px 20px 0 0}
nav button{flex:1;padding:8px 0;font-size:1.35rem;display:flex;flex-direction:column;align-items:center;opacity:.5}
nav span{font-size:.62rem;font-weight:600}nav .a{opacity:1;color:var(--pink)}
.q{border-left:4px solid var(--pink);padding:2px 10px;margin:6px 0;font-style:italic;font-size:.9rem}
details summary{cursor:pointer;color:var(--pink);font-weight:600;font-size:.9rem;margin-top:8px}
.cat{text-align:center;font-size:2.4rem;margin:18px 0 6px}.cat p{font-family:Caveat,cursive;font-size:1.4rem;color:var(--pink)}
.next{background:linear-gradient(135deg,#e3d9ff,#ffe3ee);border-radius:16px;padding:12px;text-align:center;margin-bottom:8px}
.sh{display:flex;align-items:center;gap:10px;padding:8px 10px;margin:5px 0;border-radius:14px;width:100%;text-align:left}.sh b{flex:1;font-weight:400}
.st{font-size:1.1rem;width:30px;height:30px;border-radius:50%;border:2.5px solid #c9b3dc;background:#fff;display:grid;place-items:center;color:#fff;flex:none}
.st.v1{background:var(--pink);border-color:var(--pink)}.st.v2{background:#7fd1ae;border-color:#7fd1ae}
.lg{display:flex;gap:12px;font-size:.72rem;color:var(--mut);margin-top:6px}
.hm{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:10px 0;text-align:center;font-size:.7rem}.hm b{color:var(--mut);font-weight:400}.hm i{aspect-ratio:1;border-radius:8px;display:grid;place-items:center;font-style:normal}.hm .hc{background:#f6eef2}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tile{border-radius:14px;padding:10px;text-align:center}.tile b{font-size:1.4rem;display:block}.tile span{font-size:.72rem;color:var(--mut)}
.pr{display:flex;justify-content:space-between;margin:10px 0 4px;font-size:.88rem}nav button{font-size:1.2rem}nav span{font-size:.58rem}
/* === Fix responsif HP: cegah geser samping === */
html{overflow-x:hidden;-webkit-text-size-adjust:100%;width:100%}
body{overflow-x:hidden;width:100%;max-width:100vw}
main,header,.card,.banner{max-width:100%;min-width:0}
.row>*,.nav2>*,.h>*,.sh>*,form>*{min-width:0}
input,select,textarea,button{max-width:100%}select{text-overflow:ellipsis}
.card{overflow-wrap:anywhere}
table{table-layout:fixed;width:100%}
td:first-child,th:first-child{width:31%;overflow-wrap:anywhere;line-height:1.2}
.hm,.tiles{grid-template-columns:repeat(7,minmax(0,1fr))}.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.sticky{max-width:88%}
@media(max-width:420px){
 main{padding:4px 10px}header{padding:10px 10px 0}h1{font-size:1.35rem}
 .card{padding:11px;border-radius:18px;margin:12px 0}
 table{font-size:.7rem}td:first-child{font-size:.72rem;padding-left:5px}td .ck{width:19px;height:19px}
 .nav2 .btn{padding:6px 11px}
}