/* StayKR — 可愛療癒層（cute.js 的樣式）。html.kr-cute 才生效，設定裡可關。2026-10-06 */
html.kr-cute{
  --cute-pink:#F6A6B6; --cute-peach:#FFD9B8; --cute-mint:#BFE6CF; --cute-sky:#C9DEFA; --cute-butter:#FFE9A8;
  --cute-sh:0 6px 18px color-mix(in srgb,var(--ac) 10%,transparent),0 1px 2px rgba(60,40,20,.05);
}
/* 背景：很淡的圓點，像筆記本 */
html.kr-cute body{background-color:var(--bg);background-image:radial-gradient(color-mix(in srgb,var(--ac) 9%,transparent) 1.2px,transparent 1.3px);background-size:22px 22px}
html.kr-cute[data-theme="dark"] body{background-image:radial-gradient(rgba(255,255,255,.05) 1.2px,transparent 1.3px)}
/* 卡片：更圓、柔和陰影 */
html.kr-cute :is(.kr-card,.pq-card,.kr-greet,.kr-cucard,.vcard,.ph-item,.kr-wr-list,.cd,.kr-prac-card,.kr-cu-tile,.hb-plan,.kr-lvcard,.kr-hn-card,.kr-hn-lv,.yts-card,.kr-wb,.srs-card,.qz-fb,.pa-found,.kr-path-unit){border-radius:22px;box-shadow:var(--cute-sh);border-color:color-mix(in srgb,var(--line) 70%,transparent)}
html.kr-cute :is(.kr-cucard,.kr-prac-card,.kr-cu-tile,.yts-card,.kr-lvcard,.pa-found,.kr-path-unit){transition:transform .18s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}
html.kr-cute :is(.kr-cucard,.kr-prac-card,.kr-cu-tile,.yts-card,.kr-lvcard,.pa-found,.kr-path-unit):hover{transform:translateY(-3px)}
html.kr-cute :is(.kr-cucard,.kr-prac-card,.kr-cu-tile,.yts-card,.kr-lvcard,.pa-found,.kr-path-unit):active{transform:scale(.97)}
/* 首頁問候卡：粉嫩漸層＋小雲朵 */
html.kr-cute .kr-greet{background:linear-gradient(135deg,color-mix(in srgb,var(--cute-peach) 55%,var(--bg2)),color-mix(in srgb,var(--cute-sky) 45%,var(--bg2)));border:0;position:relative;overflow:hidden}
html.kr-cute .kr-greet::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.35)}
html.kr-cute[data-theme="dark"] .kr-greet{background:linear-gradient(135deg,#3a2b24,#232c3d)}
/* 按鈕：圓滾滾、按下去會陷下去 */
html.kr-cute .btn{border-radius:999px;box-shadow:0 3px 0 color-mix(in srgb,var(--bd) 90%,#000 6%);transition:transform .12s,box-shadow .12s}
html.kr-cute .btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--bd)}
html.kr-cute .btn.primary{background:var(--ac);border-color:var(--ac);color:#fff;box-shadow:0 4px 0 color-mix(in srgb,var(--ac) 62%,#000)}
html.kr-cute .btn.primary:active{box-shadow:0 1px 0 color-mix(in srgb,var(--ac) 62%,#000)}
html.kr-cute .btn:disabled{box-shadow:none;opacity:.55}
html.kr-cute .pos-btn{border-radius:999px;padding:5px 14px}
html.kr-cute .pos-btn.on{box-shadow:0 3px 0 color-mix(in srgb,var(--ac) 62%,#000)}
/* 選項：像糖果按鍵 */
html.kr-cute .qz-opt{border-radius:18px;border-width:2px;box-shadow:0 4px 0 var(--bd);transition:transform .12s,box-shadow .12s,background .15s}
html.kr-cute .qz-opt:not(:disabled):active{transform:translateY(3px);box-shadow:0 1px 0 var(--bd)}
html.kr-cute .qz-opt.sel{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 9%,var(--bg2));box-shadow:0 4px 0 color-mix(in srgb,var(--ac) 45%,transparent)}
html.kr-cute .qz-opt.ok{box-shadow:0 4px 0 color-mix(in srgb,var(--ok) 60%,#000);animation:krPop .45s cubic-bezier(.3,1.6,.5,1)}
html.kr-cute .qz-opt.ng{box-shadow:0 4px 0 color-mix(in srgb,var(--ac2) 60%,#000)}
@keyframes krPop{0%{transform:scale(.94)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
/* 回饋框：答對薄荷綠、答錯淡粉 */
html.kr-cute .qz-fb.ok{background:color-mix(in srgb,var(--cute-mint) 45%,var(--bg2));border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
html.kr-cute .qz-fb.ng{background:color-mix(in srgb,var(--cute-pink) 25%,var(--bg2));border-color:color-mix(in srgb,var(--ac2) 35%,transparent)}
html.kr-cute .kr-tiger-fb{animation:krHop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes krHop{0%{transform:translateY(8px) scale(.6)}60%{transform:translateY(-4px) scale(1.08)}100%{transform:none}}
.kr-shake{animation:krShake .4s ease}
@keyframes krShake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
/* 答對冒愛心 */
.kr-burst{position:fixed;z-index:400;pointer-events:none;width:0;height:0}
.kr-burst i{position:absolute;left:0;top:0;font-style:normal;font-size:18px;color:var(--c);opacity:0;animation:krFly 1.1s ease-out var(--d) forwards;text-shadow:0 1px 0 rgba(0,0,0,.08)}
@keyframes krFly{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.1) rotate(20deg)}}
/* 底部導覽：選中的圖示放進粉色膠囊 */
html.kr-cute .bn-item.on .bi{background:color-mix(in srgb,var(--ac) 14%,transparent);border-radius:999px;padding:3px 14px;animation:krPop .35s cubic-bezier(.3,1.6,.5,1)}
html.kr-cute .tool-btn.on{border-bottom-width:3px;border-radius:2px}
/* 進度條：圓頭＋柔和條紋 */
html.kr-cute :is(.pq-minibar,.kr-path-bar,.hb-goal-bar,.yts-prog){border-radius:999px}
/* 吐司：老虎對話框 */
html.kr-cute .toast{border-radius:18px;padding-left:46px;background:var(--bg2);color:var(--tx);border:2px solid color-mix(in srgb,var(--ac) 25%,transparent);box-shadow:var(--cute-sh)}
html.kr-cute .toast::before{content:"";position:absolute;left:8px;top:50%;width:30px;height:30px;transform:translateY(-50%);background:url(images/kr/tiger-hello.webp) center/contain no-repeat}
/* 角落探頭的小老虎 */
.kr-peek{position:fixed;right:10px;bottom:calc(74px + env(safe-area-inset-bottom,0px));z-index:110;width:64px;height:64px;padding:0;border:0;background:none;cursor:pointer;transform:translateY(120%) rotate(-8deg);transition:transform .45s cubic-bezier(.3,1.5,.5,1);-webkit-tap-highlight-color:transparent}
.kr-peek.show{transform:translateY(0) rotate(-8deg);animation:krBob 3.4s ease-in-out .5s infinite}
.kr-peek img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.12))}
.kr-peek.hop img{animation:krHop .55s cubic-bezier(.3,1.6,.5,1)}
.kr-peek-bub{position:absolute;right:56px;bottom:40px;min-width:120px;max-width:200px;background:var(--bg2);color:var(--tx);border:2px solid color-mix(in srgb,var(--ac) 25%,transparent);border-radius:16px 16px 4px 16px;padding:7px 11px;text-align:left;box-shadow:var(--cute-sh);opacity:0;transform:translateY(6px) scale(.9);transition:.25s;pointer-events:none;display:flex;flex-direction:column}
.kr-peek-bub.on{opacity:1;transform:none}
.kr-peek-bub b{font-size:14px}.kr-peek-bub small{font-size:11.5px;color:var(--tx2)}
@media (min-width:900px){.kr-peek{bottom:22px;right:22px;width:76px;height:76px}}
html:not(.kr-cute) .kr-peek{display:none}
@media (prefers-reduced-motion:reduce){.kr-peek.show,.kr-peek.hop img,.kr-burst i,html.kr-cute .qz-opt.ok,.kr-shake,html.kr-cute .kr-tiger-fb{animation:none}}
.kr-peek{width:54px;height:54px;right:-4px}
@media (min-width:900px){.kr-peek{right:18px;width:72px;height:72px}}
html.kr-cute .wrap{padding-bottom:40px}