/* Task-first, responsive presentation. */
.reliability-panel { max-width:850px; margin:16px auto 110px; padding:20px; background:#fff7e6; border:1px solid #decfae; border-radius:18px; }
.reliability-panel button, .reliability-toast button { min-height:44px; margin:6px; padding:8px 14px; border:1px solid #7051d9; border-radius:12px; background:white; color:#5134a9; cursor:pointer; }
.reliability-panel pre { white-space:pre-wrap; overflow-wrap:anywhere; max-height:280px; overflow:auto; font-size:.8rem; }
.reliability-toast { position:fixed; bottom:100px; left:50%; transform:translateX(-50%); z-index:190; width:min(90%,440px); background:#29243c; color:white; border-radius:16px; padding:10px 16px; display:flex; justify-content:space-between; align-items:center; box-shadow:0 8px 28px #29243c33; }
.sync-check { text-align:center; margin:12px 0; }
.everyday-sync { color:var(--muted); font-size:.75rem; margin:4px 0 16px; overflow-wrap:anywhere; }
:root { --bg:#f8f7fc; --text:#29243c; --muted:#686277; --accent:#7051d9; --accent-soft:#eee8fc; --soft:#f0ecfa; --line:#e7e1ee; }
body { background:radial-gradient(ellipse at top right,#eee7fc 0,transparent 500px),var(--bg); font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
.app-shell { width:min(960px,100%); padding-top:max(24px,env(safe-area-inset-top)); padding-bottom:16px; }
.topbar { margin-bottom:20px; }
.topbar .eyebrow { font-size:.8rem; letter-spacing:.1em; }
.topbar h1 { font-size:1.1rem; font-weight:650; margin-top:10px; }
.hero-subtitle { font-size:.82rem; margin:6px 0 0; color:var(--muted); }
.today-overview { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:22px; margin-bottom:18px; background:#efe8ff; border:1px solid #e6dbfb; border-radius:25px; }
.today-overview .eyebrow { font-size:.63rem; letter-spacing:.09em; }
.today-overview h2 { font-size:clamp(1.4rem,5vw,2rem); margin:9px 0 7px; overflow-wrap:anywhere; }
.today-overview p { font-size:.88rem; color:#605377; margin:0; line-height:1.45; }
.personal-ring { --progress:0deg; flex:0 0 76px; width:76px; height:76px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--accent) var(--progress),#ddd1f4 0); }
.personal-ring span { display:grid; place-items:center; width:62px; height:62px; background:#efe8ff; border-radius:50%; font-size:1.05rem; font-weight:850; }
.person-tabs { gap:9px; padding-bottom:18px; }
.person-tab { display:flex; align-items:center; gap:8px; border:1px solid var(--line); background:white; padding:7px 14px 7px 7px; font-size:.85rem; min-height:44px; box-shadow:none; }
.profile-initial { display:grid; place-items:center; width:29px; height:29px; border-radius:50%; background:var(--accent-soft); color:var(--accent); }
.person-tab.active { background:var(--text); border-color:var(--text); color:white; }
.person-tab.active .profile-initial { color:white; background:#ffffff26; }
.today-tools { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 14px; }
.today-tools h2 { font-size:1.08rem; margin:0; }
.today-tools button { min-height:44px; font-size:.85rem; font-weight:750; }
.group-title { font-size:.71rem; letter-spacing:.12em; margin:0 0 9px 3px; color:var(--muted); }
.task-row { min-height:74px; padding:16px; border-radius:18px; box-shadow:0 3px 10px #30204604; gap:13px; position:relative; }
.task-copy { min-width:0; }
.task-title { font-size:.96rem; line-height:1.35; overflow-wrap:anywhere; }
.task-meta { font-size:.72rem; line-height:1.5; }
.check-circle { width:28px; height:28px; flex-basis:28px; }
.task-star { margin-left:auto; font-size:1rem; }
.task-row.done { background:#f1f8f3; border-color:#dcece1; opacity:1; }
.task-row.done .task-title { color:#477051; }
.task-row.overdue { outline:none; border-left:4px solid #b86248; }
.task-row.due-soon { outline:none; border-left:4px solid #a57928; }
.one-off-task::after { display:none; }
#questStatusPanel { background:transparent; box-shadow:none; border-top:1px solid var(--line); border-radius:0; padding:18px 0 0; margin-top:24px; }
#questStatusPanel .status-title { font-size:.8rem; }
.status-chip { font-weight:600; font-size:.75rem; }
.crown-risk-message { font-size:.8rem; color:var(--muted); font-weight:600; }
.bottom-nav { position:fixed; z-index:100; bottom:0; left:50%; transform:translateX(-50%); width:min(960px,100%); display:grid; grid-template-columns:repeat(4,1fr); padding:8px 8px max(10px,env(safe-area-inset-bottom)); border:1px solid var(--line); border-bottom:0; border-radius:22px 22px 0 0; background:#fffffff5; box-shadow:0 -5px 30px #30204608; backdrop-filter:blur(12px); }
.bottom-nav button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:54px; border:0; border-radius:14px; background:none; color:var(--muted); font-size:.7rem; font-weight:700; cursor:pointer; }
.bottom-nav svg { width:22px; height:22px; }
.bottom-nav [aria-current="page"] { background:var(--accent-soft); color:var(--accent); }
.app-version-footer { padding-bottom:calc(100px + env(safe-area-inset-bottom)); font-weight:500; }
.section-head { margin:6px 0 20px; }
.section-head h2 { font-size:1.65rem; margin-top:8px; line-height:1.2; }
.screen-description { color:var(--muted); margin:8px 0 0; font-size:.9rem; }
.panel { box-shadow:none; }
.family-dashboard { display:grid; gap:16px; }
.vault-heading { margin:8px 0; font-size:1.4rem; }
.vault-subtitle { color:var(--muted); font-size:.85rem; margin:0 0 22px; }
.family-dashboard .stars-card { grid-column:1 / -1; padding:24px; }
.stars-card .star-counters { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:16px!important; }
.achievement-card { min-width:0; padding:18px; border:1px solid var(--line); border-radius:22px; background:#fff; }
.achievement-person { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.achievement-avatar { flex:0 0 64px; width:64px; height:64px; }
.achievement-avatar svg, .settings-avatar svg, .profile-initial svg { display:block; width:100%; height:100%; }
.achievement-name { font-size:1.05rem; font-weight:750; overflow-wrap:anywhere; min-width:0; }
.achievement-name span { display:block; font-size:.72rem; color:var(--muted); font-weight:400; margin-top:5px; }
.achievement-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.achievement-stat { display:grid; justify-items:center; gap:5px; padding:15px 6px; border-radius:16px; text-align:center; }
.achievement-stat.silver { background:#f0f3f6; color:#485c70; }
.achievement-stat.gold { background:#fff5da; color:#815712; }
.achievement-stat svg { width:25px; height:25px; }
.achievement-stat strong { font-size:1.8rem; line-height:1.15; }
.achievement-stat span { font-size:.78rem; font-weight:700; }
.achievement-stat small { font-size:.66rem; }
.avatar-edit { width:100%; margin-top:14px; min-height:44px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--accent); font-weight:700; cursor:pointer; }
.settings-avatar { flex:0 0 48px; width:48px; height:48px; padding:0; border:0; border-radius:16px; background:none; cursor:pointer; }
.person-item { gap:12px; }
.person-item strong { flex:1; min-width:0; overflow-wrap:anywhere; }
.avatar-dialog { width:100%; max-width:520px; }
.avatar-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:20px; }
.avatar-choice { min-width:0; padding:7px; border:2px solid transparent; border-radius:18px; background:#f8f7fb; color:var(--text); cursor:pointer; }
.avatar-choice svg { display:block; width:100%; }
.avatar-choice span { display:block; font-size:.75rem; padding:7px 0 3px; }
.avatar-choice[aria-pressed="true"] { border-color:var(--accent); background:var(--accent-soft); }
.quest-panel .section-head { flex-wrap:wrap; gap:12px; }
.quest-panel .panel-hint { margin-bottom:0; }
@media(min-width:700px) { .family-dashboard .crown-card { grid-column:auto!important; grid-row:auto!important; } }
@media(max-width:360px) { .avatar-options { grid-template-columns:repeat(2,minmax(0,1fr)); } .family-dashboard .stars-card { padding:16px; } }
.family-dashboard > * { margin:0!important; }
.family-dashboard .mascot-card { min-height:110px; padding:16px; border-radius:20px; }
.family-dashboard .mascot-visual { flex-basis:65px; width:65px; height:65px; font-size:42px; border-radius:18px; }
.family-dashboard .mascot-name { font-size:1.1rem; }
.family-dashboard .mascot-message { font-size:.82rem; }
#historyView { margin-top:24px; }
.stars-title { color:var(--muted); }
.crown-card { padding:20px; background:#fff7e6; border:1px solid #efe1c0; }
.crown-actions button { min-height:44px; }
.crown-milestone-hero { background:linear-gradient(120deg,#efe8ff,#faf7ff); border-color:#e5d9fb; }
.reward-crown-total { color:var(--accent); }
.reward-note { max-width:560px; line-height:1.6; color:var(--muted); }
#rewardList { display:grid; gap:12px; }
.reward-item { align-items:stretch; padding:18px; border:1px solid var(--line); border-radius:18px; background:#faf9fc; gap:14px; }
.reward-copy { flex:1; min-width:0; }
.reward-symbol { display:grid; place-items:center; width:34px; height:34px; margin-bottom:12px; border-radius:11px; background:var(--accent-soft); color:var(--accent); font-size:1.4rem; }
.reward-item .routine-title { overflow-wrap:anywhere; }
.reward-item .routine-meta { margin:6px 0 10px; line-height:1.5; }
.reward-item.unlocked { border-color:#d0bde9; background:#f7f1ff; }
.reward-item.claimed { background:#f3f9f4; border-color:#d7e7d8; }
.reward-item.claimed .reward-symbol { background:#dfefe1; color:#407149; }
.reward-item .routine-actions { flex-direction:column; justify-content:center; }
.reward-item .routine-actions button { min-height:44px; min-width:44px; }
.reward-meter { height:6px; background:#e5dfed; border-radius:9px; overflow:hidden; }
.reward-meter span { display:block; height:100%; background:var(--accent); border-radius:inherit; }
.reward-caption { font-size:.72rem; color:var(--muted); margin-top:7px; }
.appearance-panel { margin-top:18px; }
.appearance-panel select { margin-top:8px; width:100%; }
.motion-option { display:flex; gap:10px; align-items:center; margin-top:18px; font-size:.9rem; }
.motion-option input { width:20px; height:20px; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible { outline:3px solid #8064d4; outline-offset:3px; }
button:disabled { cursor:not-allowed; opacity:.55; }
.routine-main, .settings-sync-copy { min-width:0; overflow-wrap:anywhere; }
body[data-theme="calm"] { --accent:#426b70; --accent-soft:#e5efef; --bg:#f7f8f8; background:var(--bg); }
body[data-theme="calm"] .today-overview, body[data-theme="calm"] .personal-ring span { background:#eaf0f0; border-color:#dbe5e5; }
body[data-theme="calm"] .personal-ring { background:conic-gradient(var(--accent) var(--progress),#d4e0e0 0); }
body[data-theme="calm"] .today-overview p { color:#466267; }
body[data-theme="calm"] .task-star, body[data-theme="calm"] #dailyMascot { display:none; }
body[data-theme="calm"] .crown-milestone-hero { background:#eef4f4; border-color:#dbe5e5; }
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
body.reduce-motion .celebration { display:none!important; }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } .celebration { display:none!important; } }
@media(min-width:700px) { .app-shell { padding-left:32px; padding-right:32px; } .today-overview { padding:28px; } #taskGroups { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; } .family-dashboard { grid-template-columns:1fr 1fr; } .family-dashboard .crown-card { grid-column:2; grid-row:1 / 3; } #rewardList { grid-template-columns:1fr 1fr; } }
@media(max-width:360px) { .app-shell { padding-left:12px; padding-right:12px; } .today-overview { padding:16px; } .today-overview .eyebrow { font-size:.55rem; } .personal-ring { flex-basis:62px; width:62px; height:62px; } .personal-ring span { width:50px; height:50px; } .reward-item { padding:12px; } }