/* 防痴迷版 · 样式（孩子面=原型 P1 验证视觉；驾驶舱=深色工具系） */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; overflow: hidden; background: #0d1b2a; }

.scr { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; }
.scr.on { display: flex; }

button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }

/* ================= 孩子面 ================= */

/* ---------- ① 睡觉态 ---------- */
#scr-sleep { background: linear-gradient(180deg, #0d1b2a 0%, #1b263b 60%, #2c3e5d 100%); color: #fff; }
.stars { position: absolute; inset: 0; overflow: hidden; }
.star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: .7; animation: tw 3s infinite; }
@keyframes tw { 0%, 100% { opacity: .15; } 50% { opacity: .85; } }
.moon-wrap { position: relative; width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; user-select: none; -webkit-user-callout: none; }
.moon-glow { position: absolute; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 236, 170, .5) 0%, rgba(255, 236, 170, 0) 70%); animation: breathe 4s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(.85); opacity: .6; } 50% { transform: scale(1.15); opacity: 1; } }
.moon { font-size: 88px; filter: drop-shadow(0 0 18px rgba(255, 236, 170, .8)); animation: breathe 4s ease-in-out infinite; }
.ring { position: absolute; inset: -10px; border-radius: 50%; background: conic-gradient(#ffd76a var(--p, 0%), transparent 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); pointer-events: none; }
#scr-sleep h1 { font-size: 30px; margin-top: 34px; font-weight: 600; letter-spacing: 2px; }
#scr-sleep .sub { margin-top: 14px; font-size: 15px; color: rgba(255, 255, 255, .75); }
.tomorrow-story { margin-top: 26px; display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, .08); border-radius: 16px; padding: 10px 16px 10px 10px; }
.tomorrow-story img { width: 64px; height: 40px; object-fit: cover; border-radius: 8px; filter: brightness(.75); }
.tomorrow-story span { font-size: 14px; color: rgba(255, 255, 255, .85); }

/* ---------- ② 今日卡 ---------- */
#scr-home { background: #f6f8f4; }
.iqy-top { position: absolute; top: 0; left: 0; right: 0; padding: calc(env(safe-area-inset-top) + 14px) 18px 12px; background: linear-gradient(180deg, #1CC749, #17b03f); color: #fff; display: flex; justify-content: space-between; align-items: center; }
.iqy-top .app { font-size: 18px; font-weight: 700; }
.iqy-top .date { font-size: 12px; opacity: .9; }
.home-body { margin-top: 40px; width: 100%; max-width: 420px; padding: 22px; overflow-y: auto; }
.home-hi { font-size: 15px; color: #5a6b5d; margin-bottom: 4px; }
.home-title { font-size: 24px; color: #15221a; font-weight: 700; margin-bottom: 16px; }
.big-card { background: #fff; border-radius: 20px; box-shadow: 0 10px 30px rgba(28, 199, 73, .18); overflow: hidden; }
.big-card .cover { position: relative; }
.big-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.big-card .dur { position: absolute; right: 10px; bottom: 10px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; padding: 3px 8px; border-radius: 6px; }
.big-card .badge { position: absolute; left: 10px; top: 10px; background: #1CC749; color: #fff; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.card-info { padding: 16px; }
.card-info h2 { font-size: 19px; color: #15221a; }
.card-info p { font-size: 13px; color: #7d8c80; margin-top: 6px; line-height: 1.6; }
.start-btn { display: block; width: 100%; margin-top: 16px; border: none; background: #1CC749; color: #fff; font-size: 19px; font-weight: 700; padding: 16px; border-radius: 14px; box-shadow: 0 6px 18px rgba(28, 199, 73, .35); }
.start-btn:active { transform: scale(.98); }
.scarcity { margin-top: 14px; text-align: center; font-size: 13px; color: #8aa08e; }
.scarcity b { color: #1a9c3f; }
.story-cover { display: flex; align-items: center; justify-content: center; font-size: 64px; aspect-ratio: 16/9; background: linear-gradient(160deg, #14251c, #0f1a13); }

/* ---------- 3-2-1 ---------- */
#scr-count { background: rgba(10, 20, 12, .92); color: #fff; }
#scr-count .num { font-size: 130px; font-weight: 800; animation: pop 1s ease infinite; }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 25% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: .9; } }
#scr-count .tip { font-size: 18px; color: rgba(255, 255, 255, .8); margin-top: 8px; }

/* ---------- ③ 播放 ---------- */
#scr-player { background: #000; }
#scr-player video { width: 100%; max-height: 100%; object-fit: contain; background: #000; }
#bili-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.farewell-banner { position: absolute; top: calc(env(safe-area-inset-top) + 20px); left: 50%; transform: translateX(-50%); background: rgba(21, 34, 26, .9); color: #ffe9a8; font-size: 17px; padding: 12px 22px; border-radius: 999px; opacity: 0; transition: opacity .5s; white-space: nowrap; z-index: 5; }
.farewell-banner.on { opacity: 1; }

/* ---------- ④ 结束仪式 ---------- */
#scr-ritual { background: linear-gradient(180deg, #14251c, #0f1a13); color: #fff; text-align: center; }
.wave-hand { font-size: 96px; animation: wave 1.2s ease-in-out infinite; transform-origin: 70% 80%; display: inline-block; }
@keyframes wave { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(18deg); } 60% { transform: rotate(-8deg); } }
#scr-ritual h1 { font-size: 26px; margin-top: 22px; letter-spacing: 2px; }
#scr-ritual .sub { margin-top: 10px; font-size: 14px; color: rgba(255, 255, 255, .7); }
.music-dots { margin-top: 24px; display: flex; gap: 10px; }
.music-dots i { width: 10px; height: 10px; border-radius: 50%; background: #7be08f; animation: dot .9s infinite; }
.music-dots i:nth-child(2) { animation-delay: .15s; } .music-dots i:nth-child(3) { animation-delay: .3s; }
.music-dots i:nth-child(4) { animation-delay: .45s; } .music-dots i:nth-child(5) { animation-delay: .6s; }
@keyframes dot { 0%, 100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.6); opacity: 1; } }

/* ---------- ⑤ 明天见 ---------- */
#scr-tomorrow { background: linear-gradient(180deg, #f6f8f4, #e8f5ea); color: #15221a; text-align: center; }
#scr-tomorrow h1 { font-size: 34px; font-weight: 800; }
.bye-char { font-size: 80px; margin-bottom: 6px; animation: wave 1.4s ease-in-out infinite; display: inline-block; }
.next-card { margin-top: 30px; background: #fff; border-radius: 18px; padding: 14px; box-shadow: 0 8px 24px rgba(28, 199, 73, .15); }
.next-card .lbl { font-size: 12px; color: #8aa08e; margin-bottom: 8px; }
.next-card .cover-sil { position: relative; }
.next-card img { width: 200px; height: 112px; object-fit: cover; border-radius: 12px; filter: brightness(.32) blur(2px) saturate(.6); }
.next-card .q { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 44px; color: #fff; font-weight: 800; }
.next-act { margin-top: 26px; background: #1CC749; color: #fff; font-size: 17px; font-weight: 600; padding: 14px 26px; border-radius: 999px; }
.done-btn { margin-top: 18px; border: none; background: none; color: #7d8c80; font-size: 15px; padding: 10px 20px; }

/* ---------- ⑥ 电台收听 ---------- */
#scr-radio { background: linear-gradient(180deg, #101c2b, #0b1322); color: #fff; text-align: center; }
.radio-moon { font-size: 84px; animation: breathe 4s ease-in-out infinite; }
#scr-radio h1 { font-size: 24px; margin-top: 20px; letter-spacing: 2px; }
.radio-note { margin-top: 26px; display: flex; gap: 10px; }
.radio-note i { width: 10px; height: 10px; border-radius: 50%; background: #7bb1e0; animation: dot .9s infinite; }
.radio-note i:nth-child(2) { animation-delay: .15s; } .radio-note i:nth-child(3) { animation-delay: .3s; }
.radio-note i:nth-child(4) { animation-delay: .45s; } .radio-note i:nth-child(5) { animation-delay: .6s; }
.radio-count { margin-top: 24px; font-size: 16px; color: rgba(255, 255, 255, .85); }
.radio-hint { margin-top: 10px; font-size: 13px; color: rgba(255, 255, 255, .5); }

/* ---------- 家长门 ---------- */
#scr-gate { background: #10151c; color: #fff; }
#scr-gate h2 { font-size: 20px; margin-bottom: 6px; }
#scr-gate .hint { font-size: 12px; color: rgba(255, 255, 255, .5); margin-bottom: 22px; }
.pin-dots { display: flex; gap: 14px; margin-bottom: 26px; justify-content: center; }
.pin-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #5a6b5d; }
.pin-dots i.f { background: #1CC749; border-color: #1CC749; }
.keypad { display: grid; grid-template-columns: repeat(3, 72px); gap: 14px; justify-content: center; }
.keypad button { width: 72px; height: 72px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .08); color: #fff; font-size: 24px; }
.keypad button:active { background: #1CC749; }
.gate-back { margin-top: 26px; background: none; border: none; color: rgba(255, 255, 255, .5); font-size: 14px; }
#gate-ok { max-width: 420px; width: 100%; padding: 24px; overflow-y: auto; text-align: left; }
.tantrum-card { background: rgba(28, 199, 73, .1); border: 1px solid rgba(28, 199, 73, .4); border-radius: 14px; padding: 16px; }
.tantrum-card h3 { font-size: 15px; color: #7be08f; margin-bottom: 10px; }
.tantrum-card p { font-size: 13px; line-height: 1.9; color: rgba(255, 255, 255, .85); }
.tantrum-note { margin-top: 10px; color: rgba(255, 255, 255, .55) !important; font-size: 12px !important; }
.cockpit-enter { display: block; width: 100%; margin-top: 16px; border: none; background: #1CC749; color: #fff; font-size: 16px; font-weight: 700; padding: 14px; border-radius: 12px; }
.gate-quick { display: flex; gap: 10px; margin-top: 12px; }
.gate-quick button { flex: 1; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .05); color: #fff; font-size: 14px; padding: 12px; border-radius: 12px; }

/* ================= 驾驶舱 ================= */
#scr-cockpit { background: #0e141b; color: #e8edf2; justify-content: flex-start; }
.ck-head { width: 100%; display: flex; align-items: center; gap: 12px; padding: calc(env(safe-area-inset-top) + 12px) 16px 12px; background: #131b24; }
.ck-head h1 { font-size: 17px; flex: 1; }
.ck-back, .review-toggle { background: none; border: none; color: #8fa3b8; font-size: 14px; }
.review-toggle { display: flex; align-items: center; gap: 6px; }
.review-toggle:has(input:checked) { color: #ffd76a; }
.ck-tabs { width: 100%; display: flex; gap: 4px; overflow-x: auto; padding: 8px 12px; background: #131b24; flex: none; }
.ck-tabs button { border: none; background: rgba(255, 255, 255, .06); color: #aebfce; font-size: 13px; padding: 8px 12px; border-radius: 999px; white-space: nowrap; }
.ck-tabs button.on { background: #1CC749; color: #fff; }
.ck-body { flex: 1; width: 100%; max-width: 520px; margin: 0 auto; overflow-y: auto; padding: 14px 16px calc(env(safe-area-inset-bottom) + 24px); }
.ck-panel { display: none; }
.ck-panel.on { display: block; }
.ck-panel h2 { font-size: 14px; color: #8fa3b8; margin: 18px 0 10px; font-weight: 600; }
.ck-panel h2:first-child { margin-top: 0; }
.ck-note { font-size: 12px; color: #6d7f90; line-height: 1.7; margin-top: 8px; }
.ck-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); font-size: 14px; gap: 8px; }
.ck-row b { color: #fff; }
.ck-btn { border: none; background: rgba(28, 199, 73, .18); color: #7be08f; font-size: 14px; padding: 10px 16px; border-radius: 10px; }
.ck-btn.primary { background: #1CC749; color: #fff; font-weight: 700; }
.ck-btn.warn { background: rgba(255, 120, 90, .15); color: #ff9d85; }
.ck-btn.ghost { background: rgba(255, 255, 255, .07); color: #aebfce; }
.ck-btn:disabled { opacity: .4; }
.ck-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.ck-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.ck-form label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #aebfce; width: 100%; }
.ck-form label.inline { width: auto; }
.ck-form input[type="text"], .ck-form input[type="date"], .ck-form input[type="time"], .ck-form input[type="datetime-local"], .ck-form select {
  background: #1a2430; border: 1px solid rgba(255, 255, 255, .1); color: #e8edf2; border-radius: 8px; padding: 8px 10px; font-size: 14px; }
.ck-form input[type="time"], .ck-form input[type="date"] { width: 110px; }

.stepper { display: inline-flex; align-items: center; gap: 8px; }
.stepper button { width: 30px; height: 30px; border-radius: 8px; border: none; background: rgba(255, 255, 255, .08); color: #fff; font-size: 15px; }
.seg { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.seg button { border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .05); color: #aebfce; font-size: 13px; padding: 8px 14px; border-radius: 999px; }
.seg button.on { background: #1CC749; border-color: #1CC749; color: #fff; }

/* 今晚三选一 */
.pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pick-card { border: 2px solid rgba(255, 255, 255, .08); background: #131c26; border-radius: 12px; overflow: hidden; text-align: left; padding: 0; }
.pick-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.pick-card .pt { font-size: 12px; color: #e8edf2; padding: 8px 8px 2px; line-height: 1.4; }
.pick-card .pd { font-size: 11px; color: #6d7f90; padding: 0 8px 8px; }
.pick-card.sel { border-color: #1CC749; }
.pick-card.sel::after { content: "✓ 明晚"; display: block; color: #1CC749; font-size: 12px; padding: 0 8px 8px; font-weight: 700; }

/* 打卡历史 / 周报 */
.hist-row { display: flex; gap: 8px; align-items: center; font-size: 12px; color: #aebfce; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.hist-row .d { width: 74px; color: #6d7f90; }
.hist-row .m { width: 56px; color: #fff; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; background: rgba(255, 255, 255, .08); }
.tag.calm { background: rgba(28, 199, 73, .25); color: #7be08f; }
.tag.soothable { background: rgba(255, 215, 106, .2); color: #ffd76a; }
.tag.meltdown { background: rgba(255, 120, 90, .2); color: #ff9d85; }
.week-block { background: #131c26; border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.week-block h3 { font-size: 13px; color: #8fa3b8; margin-bottom: 8px; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 72px; }
.bars .bar { flex: 1; background: linear-gradient(180deg, #1CC749, #17b03f); border-radius: 4px 4px 0 0; min-height: 2px; position: relative; }
.bars .bar.over { background: linear-gradient(180deg, #ff785a, #e05a3a); }
.bars .bar i { position: absolute; top: -16px; left: 0; right: 0; text-align: center; font-size: 10px; color: #6d7f90; font-style: normal; }
.week-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; font-size: 12px; color: #aebfce; }

/* 退坡 */
.taper-status, .taper-suggest { background: #131c26; border-radius: 12px; padding: 14px; font-size: 14px; line-height: 1.8; }
.taper-status b { color: #7be08f; }
.taper-suggest .adv { color: #7be08f; } .taper-suggest .rb { color: #ff9d85; } .taper-suggest .hd { color: #ffd76a; }

/* 电台 */
.storylist { background: #131c26; border-radius: 12px; padding: 10px; }
.storylist .empty { color: #6d7f90; font-size: 13px; padding: 8px; }
.storylist .si { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 8px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.storylist .si:last-child { border-bottom: none; }
.storylist .si .n { width: 22px; height: 22px; border-radius: 50%; background: rgba(28, 199, 73, .2); color: #7be08f; display: flex; align-items: center; justify-content: center; font-size: 12px; flex: none; }
.storylist .si button { margin-left: auto; background: none; border: none; color: #6d7f90; font-size: 14px; }
.feed-list { display: flex; flex-direction: column; gap: 6px; }
.feed-item { display: flex; align-items: center; gap: 8px; background: #131c26; border-radius: 10px; padding: 10px; font-size: 13px; }
.feed-item .fi-k { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(123, 224, 143, .15); color: #7be08f; }
.feed-item .fi-k.song { background: rgba(255, 215, 106, .15); color: #ffd76a; }
.feed-item button { margin-left: auto; }
.feed-tracks { max-height: 300px; overflow-y: auto; }
.ft-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #aebfce; padding: 8px 6px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.ft-row .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-row button { background: none; border: 1px solid rgba(255, 255, 255, .15); color: #aebfce; font-size: 12px; padding: 4px 10px; border-radius: 8px; }
.opfs-library .ft-row button.dl { color: #ff9d85; border-color: rgba(255, 120, 90, .3); }

/* 活动库 */
#act-list .ft-row .t { white-space: normal; }

/* 向导 */
.guide-list { padding-left: 20px; font-size: 13px; color: #aebfce; line-height: 2; }
.install-status { background: rgba(255, 215, 106, .1); border: 1px solid rgba(255, 215, 106, .3); color: #ffd76a; border-radius: 12px; padding: 12px; font-size: 13px; line-height: 1.7; }
.install-status.ok { background: rgba(28, 199, 73, .1); border-color: rgba(28, 199, 73, .35); color: #7be08f; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 15%; transform: translateX(-50%); background: rgba(20, 30, 24, .95); color: #e8ffe8; font-size: 14px; padding: 12px 22px; border-radius: 999px; z-index: 999; max-width: 86vw; text-align: center; }