/* Layar masuk, profil anak, karakter, dan lembar Aa. Dibawa dari aplikasi buku 1 (css/profil.css), hanya bagian yang dipakai. */
.me{border:0;background:none;padding:0;border-radius:50%;line-height:0}
.avw{display:block;position:relative;overflow:hidden;border-radius:50%;background:linear-gradient(180deg,#bfe3ff,#e9f6ff 70%);box-shadow:0 0 0 2.5px #fff,0 0 0 4px var(--blue)}
.avw .avc{position:absolute;left:-28%;top:3%;width:134%}
.avw.girl{background:linear-gradient(180deg,#ffd6e8,#fff0f6 70%);box-shadow:0 0 0 2.5px #fff,0 0 0 4px #ee6aa0}
.avw.guest{background:var(--blue5);display:grid;place-items:center;box-shadow:0 0 0 2.5px #fff,0 0 0 4px var(--line)}
.avw.guest svg{width:56%;height:56%;fill:var(--ink)}
body.obopen{overflow:hidden}
.ob[hidden]{display:none}
.ob{position:fixed;inset:0;z-index:100;overflow-y:auto;overflow-x:hidden;background:linear-gradient(180deg,#8fd0ff 0%,#cfeaff 38%,#fff9ee 72%);-webkit-overflow-scrolling:touch}
.ob-sky{position:absolute;inset:0 0 auto 0;height:380px;overflow:hidden;pointer-events:none}
.ob-sky .sun{position:absolute;right:-30px;top:-30px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,#fff3b0 0 40%,#ffd75a 41% 62%,rgba(255,215,90,.35) 63%);animation:sunp 5s ease-in-out infinite alternate}
.ob-sky .cloud{position:absolute;width:90px;height:28px;background:#fff;border-radius:30px;opacity:.9;animation:drift 38s linear infinite}
.ob-sky .cloud:before,.ob-sky .cloud:after{content:"";position:absolute;background:#fff;border-radius:50%}
.ob-sky .cloud:before{width:42px;height:42px;left:14px;top:-20px}
.ob-sky .cloud:after{width:30px;height:30px;left:46px;top:-12px}
.ob-sky .c1{top:70px;left:-120px}
.ob-sky .c2{top:140px;left:-120px;animation-duration:52s;animation-delay:-20s;transform:scale(.7)}
.ob-sky .c3{top:30px;left:-120px;animation-duration:64s;animation-delay:-40s;transform:scale(.5)}
@keyframes drift{to{left:110%}}
@keyframes sunp{to{transform:scale(1.08)}}
.ob-in{position:relative;z-index:2;max-width:440px;margin:0 auto;padding:calc(18px + env(safe-area-inset-top)) 18px 60px;text-align:center}
.ob-logo{margin:4px auto 8px;height:54px;width:auto}
.ob h1{font-size:var(--fs-2xl);color:var(--navy);margin:8px 0 4px}
.ob-sub{font-size:var(--fs-md);color:var(--ink);margin:0 auto 8px;max-width:34ch}
.ob-mus{position:absolute;right:14px;top:calc(14px + env(safe-area-inset-top));border:2px solid #b9e3c8;background:#e3f5ea;color:#237a46;font-weight:700;font-size:var(--fs-sm);border-radius:999px;padding:8px 12px;min-height:36px}
.ob-mus.on{background:#fff}
.ob-mus:not(.on){animation:musp 1.8s ease-in-out infinite}
@keyframes musp{50%{transform:scale(1.07)}}
.ob-stage{position:relative;margin:6px -18px 0;padding:8px 16px 0}
.ob-chars{display:flex;justify-content:center;gap:12px;position:relative;z-index:2}
.ob-ch{flex:0 0 42%;max-width:170px;border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center;opacity:.72;transform:scale(.9);transition:transform .25s,opacity .25s;touch-action:manipulation}
.ob-ch.on{opacity:1;transform:scale(1.04)}
.ob-ch span{margin-top:4px;font-family:'Fredoka';font-weight:600;font-size:var(--fs-md);color:var(--navy);background:#fff;border:2px solid var(--line);border-radius:999px;padding:4px 16px;box-shadow:0 2px 0 rgba(18,52,91,.08)}
.ob-ch.on span{background:var(--blue);border-color:var(--blue7);color:#fff}
.ob-ch .chr{width:100%}
.ob-ch .chr .c-sh{opacity:.55}
.ob-ground{position:absolute;left:0;right:0;bottom:30px;height:38px;z-index:1;background:repeating-linear-gradient(90deg,#7fcf6a 0 46px,#6cc35a 46px 92px);animation:gr 1.6s linear infinite;border-radius:6px;opacity:.9}
@keyframes gr{to{background-position:-92px 0}}
.ob-form{background:#fff;border:3px solid var(--blue);border-radius:24px;padding:16px;margin-top:4px;text-align:left;position:relative;z-index:3;box-shadow:0 10px 30px rgba(18,52,91,.15)}
.ob-form label{display:block;font-weight:600;font-size:var(--fs-sm);margin:12px 0 4px;color:var(--navy)}
.ob-form input{width:100%;min-height:48px;border:2px solid var(--line);border-radius:16px;padding:8px 16px;font:inherit;font-size:var(--fs-md);color:var(--navy);background:#fff}
.ob-form input:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px var(--blue1)}
.ob-age{font-size:var(--fs-sm);color:var(--green7);min-height:20px;margin-top:4px}
.ob-age.bad{color:var(--alert7)}
.ob-more{margin-top:12px;border-top:1px dashed var(--line);padding-top:8px}
.ob-more summary{cursor:pointer;font-weight:600;font-size:var(--fs-sm);color:var(--blue7);min-height:32px;display:flex;align-items:center}
.ob-more .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ob-err{color:var(--alert7);font-size:var(--fs-sm);font-weight:600;min-height:20px;margin-top:8px}
.ob-go,.ob-btn{display:block;width:100%;border:0;background:var(--green);color:#fff;font-family:'Fredoka';font-weight:700;font-size:var(--fs-lg);border-radius:999px;min-height:54px;box-shadow:0 5px 0 var(--green7)}
.ob-go:active,.ob-btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--green7)}
.ob-btn{background:var(--blue);box-shadow:0 5px 0 var(--blue7);max-width:320px;margin:12px auto 0}
.ob-acts{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:12px}
.ob-link{border:0;background:none;color:var(--blue7);font-weight:600;font-size:var(--fs-md);min-height:44px;padding:0 16px;text-decoration:underline;text-underline-offset:3px}
.ob-note{font-size:var(--fs-xs);color:var(--ink);margin-top:16px;position:relative;z-index:3}
.ob-hill{position:fixed;left:-10%;right:-10%;bottom:-70px;height:130px;background:radial-gradient(ellipse at 50% 0,#8fd96f 0 60%,transparent 61%);z-index:1;pointer-events:none}
.ob-list{display:grid;gap:12px;margin:12px 0}
.ob-prof{display:flex;align-items:center;gap:12px;background:#fff;border:3px solid var(--blue1);border-radius:24px;padding:12px 16px;text-align:left;min-height:84px;box-shadow:0 4px 0 var(--blue1)}
.ob-prof:active{transform:translateY(2px)}
.ob-prof span:nth-child(2){flex:1}
.ob-prof b{font-family:'Fredoka';font-size:var(--fs-lg);display:block}
.ob-prof small{color:var(--ink);font-size:var(--fs-sm)}
.ob-prof i{font-style:normal;font-size:var(--fs-2xl);color:var(--blue7)}
.ob-prof .avw{flex:0 0 auto}
@media(min-height:760px){.ob-in{padding-top:calc(34px + env(safe-area-inset-top))}}
.psheet{z-index:90}
.pf-card{display:flex;align-items:center;gap:16px;background:var(--blue5);border-radius:24px;padding:12px 16px;margin:8px 0 12px}
.pf-card b{font-family:'Fredoka';font-size:var(--fs-xl);display:block}
.pf-card small{display:block;color:var(--ink);font-size:var(--fs-sm)}
.pf-card.big .pf-ch{width:96px;flex:0 0 96px}
.pf-card .avw{flex:0 0 auto}
.pf-p{font-size:var(--fs-sm);color:var(--ink);margin:8px 0 12px}
.pf-acts{display:flex;gap:8px;flex-wrap:wrap}
.pf-acts .btn{font-size:var(--fs-md);padding:8px 16px}
.pf-del{border:0;background:none;color:var(--alert7);font-weight:600;font-size:var(--fs-sm);margin-top:12px;min-height:40px;text-decoration:underline}
.pf-code{margin-top:16px;border-top:1px dashed var(--line);padding-top:12px}
.pf-code label{display:block;font-weight:600;font-size:var(--fs-sm);margin-bottom:8px}
.pf-code .r{display:flex;gap:8px}
.pf-code input{flex:1;min-height:46px;border:2px solid var(--line);border-radius:16px;padding:8px 16px;font:inherit;font-size:var(--fs-md);text-transform:uppercase;letter-spacing:2px}
.pf-code .ok{color:var(--green7);font-weight:600}
.aa-g{margin:16px 0}
.aa-l{font-weight:600;font-size:var(--fs-sm);margin-bottom:8px;display:flex;justify-content:space-between}
.aa-h{font-size:var(--fs-xs)!important;color:var(--ink);margin-top:8px}
.aa-sz{display:flex;align-items:center;gap:12px}
.aa-sz button{width:52px;height:48px;border-radius:16px;border:2px solid var(--blue7);background:#fff;color:var(--blue7);font-family:'Fredoka';font-weight:700;font-size:var(--fs-lg)}
.aa-sz button.big{font-size:var(--fs-2xl)}
.aa-sz button:disabled{opacity:.35}
.aa-sz button small{font-size:var(--fs-xs)}
.aa-bar{flex:1;display:flex;gap:4px}
.aa-bar i{flex:1;height:10px;border-radius:6px;background:var(--line)}
.aa-bar i.on{background:var(--blue)}
.aa-seg{display:flex;gap:8px;flex-wrap:wrap}
.aa-seg button{flex:1;min-width:88px;min-height:44px;border:2px solid var(--line);background:#fff;border-radius:999px;font-weight:600;font-size:var(--fs-sm);color:var(--navy)}
.aa-seg button[aria-checked=true]{background:var(--blue);border-color:var(--blue7);color:#fff}
.kidbar{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid var(--blue1);border-radius:24px;padding:8px 12px;margin:12px 0 0}
.kidbar .avw{flex:0 0 auto}
.kidbar p{flex:1;font-size:var(--fs-sm);line-height:1.35;margin:0}
.kidbar b{font-family:'Fredoka';font-size:var(--fs-lg)}
.kidbar button{border:0;background:var(--blue1);color:var(--blue7);font-weight:700;font-size:var(--fs-sm);border-radius:999px;padding:8px 16px;min-height:38px}
.pf-code .r{display:flex;gap:8px;align-items:stretch;width:100%}
.pf-code .r input{flex:1 1 auto;min-width:0;width:auto}
.pf-code .r .btn{flex:0 0 auto;padding:0 16px;min-height:48px}
.me{flex:0 0 auto;width:46px;height:46px;display:grid;place-items:center}
.top .avw{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--blue)}
.top .avw.girl{box-shadow:0 0 0 2px #fff,0 0 0 3.5px #ee6aa0}
.ob-stage{padding-bottom:16px;margin-bottom:8px}
.ob-ground{bottom:48px}
.ob-form{margin-top:12px}
.ob-form input{display:block;max-width:100%;min-width:0;box-sizing:border-box;-webkit-appearance:none;appearance:none;line-height:1.3}
.ob-form input[type=date]{position:relative;text-align:left;min-height:50px;overflow:hidden}
.ob-form input[type=date]::-webkit-date-and-time-value{text-align:left;min-height:1.3em;margin:0}
.ob-form input[type=date]::-webkit-calendar-picker-indicator{opacity:.6}
.ob-form input[type=date]:not(.has):not(:focus)::before{content:attr(data-ph);color:#8a97a8;position:absolute;left:14px;top:50%;transform:translateY(-50%);pointer-events:none}
.ob-form .two>div{min-width:0}
.ob-form details{min-width:0}
.ob-mus{z-index:5}
.psheet .in{display:flex;flex-direction:column}
.psheet .in>.close{float:none;align-self:flex-end;order:-1;margin:0 0 -34px;position:relative;z-index:2;min-height:38px}
.psheet .in>h3{margin:0 0 12px;padding-right:48px;min-height:38px;display:flex;align-items:center}
.psheet .pf-card{width:100%;align-self:stretch}
.pf-card>div:not(.pf-ch){flex:1;min-width:0}
.pf-card b{overflow-wrap:anywhere;line-height:1.2}
.pf-card small{margin-top:4px;line-height:1.35}
.pf-card.big .pf-ch{width:84px;flex:0 0 84px}
.pf-acts .btn{white-space:nowrap}
.kidbar{align-items:center;padding:12px 12px}
.kidbar p{display:flex;flex-direction:column;gap:4px;min-width:0}
.kidbar .kn{font-family:'Fredoka';font-weight:600;font-size:var(--fs-lg);line-height:1.2;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kidbar .ka{font-size:var(--fs-sm);color:var(--ink);line-height:1.3}
.kidbar button{flex:0 0 auto}
.ob-form input[type=date]:not(.has):not(:focus)::-webkit-datetime-edit,
.ob-form input[type=date]:not(.has):not(:focus)::-webkit-datetime-edit-fields-wrapper{opacity:0}
.ob-form input[type=date]:not(.has):not(:focus){color:transparent}
.ob-age:empty{display:none}
.ob-err:empty{min-height:0;margin-top:0}
.ob-err{min-height:0}
.ob-chars{align-items:flex-end}
.ob-ch span{margin-top:8px}
.ob-ch{transform:none !important}
.ob-ch .chr{transform:scale(.9);transform-origin:50% 100%;transition:transform .25s}
.ob-ch.on .chr{transform:scale(1.04)}
.ob-form .ob-go{margin-top:16px}
.ob-ground{left:50%;right:auto;width:100vw;margin-left:-50vw;height:46px;bottom:62px;border-radius:0}
.ob-ch span{margin-top:16px}
.ob-ground{display:none}
.ob-ch{position:relative}
.ob-ch::before{content:"";position:absolute;left:2%;right:2%;bottom:40px;height:40px;border-radius:50%;z-index:0;background:radial-gradient(ellipse at 50% 50%,#9be07a 0,#7fcf6a 55%,rgba(127,207,106,.0) 71%);opacity:.95}
.ob-ch .chr{position:relative;z-index:1}
.ob-ch .chr .c-sh{opacity:.25}
.ob-ch span{position:relative;z-index:1}
.ob-ch::before{bottom:58px;height:38px;background:radial-gradient(ellipse at 50% 50%,#5fae4c 0,#7fcf6a 34%,#9be07a 58%,rgba(155,224,122,0) 72%)}
.ob-ch .chr .c-sh{opacity:0}
.ob-ch .chr .c-sh{display:none}
html[data-theme=gelap] .avw{filter:brightness(.92)}
/* tombol Mulai: abu-abu sampai kode akses diisi */
.ob-go.off{background:#5b6b7d;box-shadow:0 5px 0 #3f4c5b}
.ob-hint{font-size:var(--fs-sm);line-height:1.5;color:var(--ink);margin:8px 0 0}

/* cadangan dan pemulihan data */
.pf-bk{margin-top:16px;border-top:1px dashed var(--line);padding-top:12px}
.pf-bk h4{margin:0 0 4px;font-family:'Fredoka';font-size:16px;color:var(--navy)}
.bk-p{font-size:14px;line-height:1.5;margin:0 0 8px;color:var(--ink)}
.bk-acts{display:flex;gap:8px;flex-wrap:wrap}
.bk-acts .btn{font-size:16px;padding:8px 16px;white-space:nowrap}
.bk-msg{font-size:14px;line-height:1.5;margin:8px 0 0;color:var(--navy)}
.bk-msg:empty{margin:0}
.bk-msg.bad{color:var(--alert7,#b3261e);font-weight:600}
.ob-bk{display:flex;flex-direction:column;align-items:center;margin-top:0}
.ob-bk .bk-msg{text-align:center}