/* ==========================================================
 * 小学生生活闹钟 MVP - 样式
 * 儿童友好：大字号 / 大按钮 / 图标化 / 陪伴式动画
 * ========================================================== */

:root {
  --orange: #FF9F43;
  --orange-d: #F97316;
  --blue: #4FACFE;
  --blue-d: #2E86FF;
  --green: #22C55E;
  --red: #EF4444;
  --yellow: #FBBF24;
  --ink: #334155;
  --ink-2: #64748B;
  --card: #ffffff;
  --shadow: 0 8px 24px rgba(56, 90, 150, .12);
  --r: 20px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  background: linear-gradient(175deg, #FFF6DF 0%, #FFE9C2 30%, #C9E8FF 100%);
  background-attachment: fixed;
  color: var(--ink);
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

#app { width: 100%; max-width: 430px; padding: 0 16px 40px; position: relative; }

.view { display: none; }
.view.active { display: block; animation: vin .35s ease; }
@keyframes vin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- 顶栏 ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 18px 0 10px; }
.date-chip { background: rgba(255, 255, 255, .75); border-radius: 999px; padding: 7px 14px; font-size: 14px; font-weight: 600; color: #7C5B2B; box-shadow: var(--shadow); }
.date-chip.sm { font-size: 12px; padding: 5px 10px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.sim-chip { background: #7C3AED; color: #fff; font-size: 11px; padding: 4px 9px; border-radius: 999px; font-weight: 600; }
.icon-btn { border: none; background: rgba(255, 255, 255, .85); border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 700; color: var(--blue-d); cursor: pointer; box-shadow: var(--shadow); font-family: inherit; }
.icon-btn:active { transform: scale(.94); }
.topbar-title { font-size: 17px; font-weight: 800; }
.parent-top .topbar-title { color: var(--blue-d); }

/* ---------- 步骤条 ---------- */
.steps { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 6px 0 2px; flex-wrap: wrap; }
.step { font-size: 12px; color: #94A3B8; background: rgba(255, 255, 255, .6); padding: 5px 10px; border-radius: 999px; font-weight: 600; }
.step.active { background: #fff; color: var(--orange-d); box-shadow: var(--shadow); }
.arrow { color: #CBD5E1; font-weight: 800; }

/* ---------- 首页 hero ---------- */
.hero { text-align: center; padding: 14px 0 18px; position: relative; }
.sun { font-size: 44px; display: inline-block; animation: sunSpin 16s linear infinite; position: absolute; left: 6%; top: 4px; filter: drop-shadow(0 4px 10px rgba(251, 191, 36, .6)); }
@keyframes sunSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.alarm { font-size: 62px; display: inline-block; animation: ring 1.8s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes ring {
  0%, 55%, 100% { transform: rotate(0); }
  60% { transform: rotate(-14deg); } 65% { transform: rotate(12deg); }
  70% { transform: rotate(-10deg); } 75% { transform: rotate(8deg); } 80% { transform: rotate(0); }
}
.hero h1 { font-size: 30px; margin-top: 6px; color: #43302B; text-shadow: 0 2px 0 rgba(255, 255, 255, .8); }
.slogan { color: #A0713F; font-size: 14px; font-weight: 600; margin-top: 4px; }

/* ---------- 卡片 ---------- */
.card { background: var(--card); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow); margin-top: 12px; }
.card-title { font-size: 16px; font-weight: 800; }
.card-note { font-size: 12.5px; color: var(--ink-2); margin-top: 6px; line-height: 1.6; }

.rest-card { text-align: center; padding: 26px 16px; }
.big-emoji { font-size: 56px; }
.rest-text { margin-top: 8px; font-size: 17px; font-weight: 700; }

.inline-card { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; flex-wrap: wrap; }
.countdown { margin-left: auto; color: var(--orange-d); font-weight: 800; }

/* ---------- chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip { background: #EEF6FF; color: var(--blue-d); font-weight: 700; font-size: 14px; padding: 7px 13px; border-radius: 999px; }
.chip.warn { background: #FFF0E4; color: #E04F1F; }
.chip.removable { background: #F1F5F9; color: var(--ink); cursor: pointer; }
.chip.removable b { margin-left: 5px; color: #CBD5E1; font-weight: 900; }
.chip.removable:active { transform: scale(.95); }

/* ---------- 统计卡 ---------- */
.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.stat-card { background: #fff; border-radius: var(--r); padding: 16px; text-align: center; box-shadow: var(--shadow); }
.stat-num { font-size: 34px; font-weight: 900; }
.c-orange .stat-num { color: var(--orange-d); }
.c-blue .stat-num { color: var(--blue-d); }
.stat-label { font-size: 13px; color: var(--ink-2); font-weight: 700; margin-top: 2px; }

/* ---------- 大按钮 ---------- */
.big-btn {
  display: block; width: 100%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--orange), #FF7A3D);
  color: #fff; font-size: 21px; font-weight: 800; letter-spacing: 1px;
  padding: 18px; border-radius: 999px; margin: 18px 0 8px;
  box-shadow: 0 10px 24px rgba(249, 115, 22, .4);
  transition: transform .12s; font-family: inherit;
}
.big-btn:active { transform: scale(.96); }
.big-btn.alt { background: linear-gradient(135deg, var(--blue), var(--blue-d)); box-shadow: 0 10px 24px rgba(46, 134, 255, .35); }
.big-btn.sm { font-size: 16px; padding: 13px; margin: 10px 0 0; }

/* ---------- 检查页 ---------- */
.remind-courses { text-align: center; color: #8B6A3F; font-size: 14px; font-weight: 600; background: rgba(255, 255, 255, .7); padding: 10px; border-radius: 14px; margin-top: 4px; }
.progress-wrap { margin-top: 12px; }
.progress-text { font-size: 14px; color: var(--ink-2); }
.progress-text b { color: var(--orange-d); font-size: 18px; }
.progress-bar { height: 14px; background: #fff; border-radius: 999px; margin-top: 8px; overflow: hidden; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .06); }
.progress-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--yellow), var(--orange)); transition: width .4s; }
.remind { margin-top: 10px; text-align: center; font-weight: 800; color: #E04F1F; background: #FFF0E4; border-radius: 14px; padding: 10px; font-size: 15px; }
.remind.ok { background: #E9FBF0; color: #0E9F52; }

.group-card { margin-top: 14px; }
.group-title { font-size: 15.5px; font-weight: 800; display: flex; align-items: center; justify-content: space-between; }
.group-count { font-size: 12px; color: var(--ink-2); background: #F1F5F9; border-radius: 999px; padding: 3px 10px; font-weight: 800; }

.item { display: flex; align-items: center; gap: 12px; background: #F8FAFC; border: 2px solid #E9EEF5; border-radius: 16px; padding: 12px 14px; margin-top: 10px; cursor: pointer; transition: all .18s; }
.item:active { transform: scale(.98); }
.item.checked { background: #ECFDF3; border-color: #BBF0CC; }
.item-check { width: 30px; height: 30px; min-width: 30px; border-radius: 50%; border: 2.5px solid #CBD5E1; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 900; color: transparent; background: #fff; transition: all .18s; }
.item.checked .item-check { background: var(--green); border-color: var(--green); color: #fff; animation: pop .32s; }
@keyframes pop { 0% { transform: scale(.5); } 60% { transform: scale(1.22); } 100% { transform: scale(1); } }
.item-body { flex: 1; min-width: 0; }
.item-name { font-size: 18px; font-weight: 700; }
.item.checked .item-name { color: #9AA8B5; text-decoration: line-through; }
.item-tags { font-size: 12.5px; color: #94A3B8; margin-top: 2px; }

.hw-btn { border: none; background: #FEF3C7; color: #B45309; font-size: 13px; font-weight: 700; padding: 10px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; font-family: inherit; }
.hw-btn:active { transform: scale(.94); }
.hw-status { font-size: 12px; color: #B45309; background: #FEF3C7; padding: 7px 10px; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.hw-status.ok { background: #D1FAE5; color: #047857; }

/* ---------- 出门庆祝 ---------- */
.done-wrap { text-align: center; padding-top: 20px; position: relative; overflow: hidden; }
.stars { position: relative; height: 110px; }
.star { position: absolute; top: -10px; animation: fall 2.6s linear infinite; }
@keyframes fall { 0% { transform: translateY(-16px) rotate(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(110px) rotate(300deg); opacity: 0; } }
.done-emoji { font-size: 76px; animation: pop .5s; }
.done-wrap h1 { font-size: 28px; color: #16A34A; margin-top: 6px; }
.done-sub { color: var(--ink-2); margin-top: 4px; font-weight: 600; }
.done-card { margin-top: 16px; padding: 18px; font-size: 16px; line-height: 1.7; }
.star-row { font-size: 22px; letter-spacing: 4px; }
.slogan-big { margin: 16px 0 4px; font-weight: 800; color: var(--orange-d); font-size: 16px; }

/* ---------- 模态框 ---------- */
.modal-mask { position: fixed; inset: 0; background: rgba(30, 41, 59, .45); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 24px; animation: vin .2s; }
.modal-card { background: #fff; border-radius: 26px; padding: 26px 22px; width: 100%; max-width: 340px; text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, .25); animation: pop .3s; }
.modal-emoji { font-size: 52px; }
.modal-card h3 { font-size: 20px; margin: 8px 0 6px; }
.modal-text { font-size: 14px; color: var(--ink-2); line-height: 1.7; }
.modal-items { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 12px 0; }
.modal-btns { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%); background: rgba(51, 65, 85, .92); color: #fff; font-size: 14px; font-weight: 600; padding: 11px 20px; border-radius: 999px; z-index: 99; animation: vin .25s; max-width: 85%; text-align: center; display: none; }

/* ---------- 家长端 ---------- */
.menu { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.menu-item { display: flex; align-items: center; gap: 14px; background: #fff; border: none; border-radius: 18px; padding: 15px 16px; cursor: pointer; text-align: left; box-shadow: var(--shadow); transition: transform .12s; font-family: inherit; }
.menu-item:active { transform: scale(.98); }
.menu-icon { font-size: 24px; width: 44px; height: 44px; min-width: 44px; background: #EEF6FF; border-radius: 13px; display: flex; align-items: center; justify-content: center; }
.menu-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.menu-text b { font-size: 15.5px; color: var(--ink); }
.menu-text i { font-style: normal; font-size: 12px; color: var(--ink-2); }
.menu-arrow { color: #CBD5E1; font-size: 22px; font-weight: 700; }
.sem-card { border-left: 5px solid var(--blue); }

/* ---------- 表单 ---------- */
.form-card label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); margin-top: 12px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
input[type="text"], input[type="date"], input[type="time"], select {
  border: 2px solid #E5EBF2; border-radius: 12px; padding: 11px 12px; font-size: 15px;
  font-family: inherit; background: #FBFDFF; color: var(--ink); outline: none; width: 100%;
}
input:focus, select:focus { border-color: var(--blue); }
.add-row { display: flex; gap: 8px; margin-top: 12px; }
.add-row input { flex: 1; }

.pill { border: 2px solid #E2E8F0; background: #fff; color: var(--ink-2); border-radius: 999px; padding: 9px 16px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; }
.pill:active { transform: scale(.95); }
.pill.primary { background: var(--blue-d); border-color: var(--blue-d); color: #fff; }
.pill.danger { background: #FEF2F2; border-color: #FECACA; color: var(--red); }
.pill.big { width: 100%; padding: 13px; font-size: 15px; margin-top: 14px; }
.pill.xs { padding: 5px 10px; font-size: 12px; }

/* ---------- 课程表 ---------- */
.tt-scroll { overflow-x: auto; margin-top: 10px; }
.tt-table { border-collapse: collapse; width: 100%; min-width: 380px; }
.tt-table th { font-size: 12.5px; color: var(--ink-2); padding: 6px 4px; }
.tt-table td { padding: 4px; }
.tt-p { font-size: 12.5px; font-weight: 700; color: var(--ink-2); text-align: center; white-space: nowrap; padding-right: 6px; }
.tt-sel { padding: 8px 4px; font-size: 13.5px; border-radius: 10px; }
.tt-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }

/* ---------- 作业/特殊事项卡 ---------- */
.hw-card .hw-line1 { font-size: 15px; font-weight: 600; }
.hw-meta { font-size: 12.5px; color: var(--ink-2); margin-top: 5px; }
.hw-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.hw-badge { font-size: 12.5px; font-weight: 800; padding: 5px 10px; border-radius: 999px; }
.hw-badge.todo { background: #FEF2F2; color: var(--red); }
.hw-badge.done { background: #FEF3C7; color: #B45309; }
.hw-badge.packed { background: #D1FAE5; color: #047857; }

/* ---------- 临时调课 ---------- */
.temp-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.temp-p { font-size: 13px; font-weight: 800; color: var(--ink-2); min-width: 52px; }
.temp-cur { font-size: 15px; font-weight: 800; }
.temp-arrow { color: #CBD5E1; font-weight: 900; }
.temp-row select { flex: 1; min-width: 110px; }
.temp-set { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #F8FAFC; border-radius: 12px; padding: 10px 12px; margin-top: 10px; font-size: 13.5px; flex-wrap: wrap; }

/* ---------- 演示日期 ---------- */
.sim-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.sim-day { border: 2px solid #E5EBF2; background: #FBFDFF; border-radius: 16px; padding: 12px; cursor: pointer; text-align: center; display: flex; flex-direction: column; gap: 3px; font-family: inherit; }
.sim-day b { font-size: 16px; color: var(--ink); }
.sim-day span { font-size: 12px; color: var(--ink-2); }
.sim-day.active { border-color: var(--orange); background: #FFF7ED; }
.sim-day.active b { color: var(--orange-d); }

/* ---------- 提示 ---------- */
.hint-card { background: #EEF6FF; border: 1.5px dashed #B6D7FF; color: #3B6FA0; border-radius: 16px; padding: 12px 14px; font-size: 13px; line-height: 1.6; margin-top: 12px; }
.tip { text-align: center; color: #94A3B8; font-size: 12px; margin-top: 12px; line-height: 1.6; }
.muted { color: #94A3B8; font-size: 13px; }
.pad { padding: 14px 0; text-align: center; }

/* ---------- 儿童端日期/闹钟 ---------- */
.date-chip.tap { cursor: pointer; user-select: none; }
.date-chip.tap:active { transform: scale(.96); }
.icon-btn.round { padding: 8px 12px; font-size: 17px; line-height: 1; }
.alarm.tap { cursor: pointer; }
.alarm-hint { margin-top: 8px; font-size: 12px; color: #B08557; background: rgba(255, 255, 255, .65); display: inline-block; padding: 5px 12px; border-radius: 999px; font-weight: 700; }
.alarm-hint.ok { background: #E9FBF0; color: #0E9F52; }
.modal-emoji.ringing { animation: ring 1s ease-in-out infinite; }
.modal-card.wide { max-width: 380px; }
.alarm-time { display: flex; flex-direction: column; gap: 8px; align-items: center; margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.alarm-time input { max-width: 160px; text-align: center; font-size: 20px; font-weight: 800; }

/* ---------- 铃声选择卡片 ---------- */
.sound-title { font-size: 13px; font-weight: 800; color: var(--ink-2); margin-top: 14px; text-align: left; }
.sound-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.sound-opt { display: flex; align-items: center; gap: 10px; background: #F8FAFC; border: 2px solid #E9EEF5; border-radius: 14px; padding: 10px 12px; cursor: pointer; text-align: left; font-family: inherit; }
.sound-opt:active { transform: scale(.97); }
.sound-opt.active { border-color: var(--orange); background: #FFF7ED; }
.sound-emoji { font-size: 22px; }
.sound-info { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.sound-info b { font-size: 14.5px; color: var(--ink); }
.sound-info i { font-style: normal; font-size: 11.5px; color: var(--ink-2); }
.sound-play { font-size: 12px; font-weight: 800; color: var(--blue-d); white-space: nowrap; }
.sound-opt.active .sound-play { color: var(--orange-d); }

/* ---------- 作业照片 ---------- */
.photo-label { display: block; }
.photo-btn { display: inline-block; align-self: flex-start; background: #EEF6FF; color: var(--blue-d); font-size: 14px; font-weight: 700; padding: 10px 16px; border-radius: 999px; border: 2px dashed #B6D7FF; margin-top: 8px; }
.photo-btn:active { transform: scale(.96); }
.photo-preview { display: block; width: 100%; max-width: 220px; border-radius: 12px; margin-top: 10px; border: 2px solid #E5EBF2; pointer-events: none; }
.hw-thumb { width: 68px; height: 68px; object-fit: cover; border-radius: 12px; margin-top: 10px; cursor: pointer; border: 2px solid #E5EBF2; display: block; }
.hw-thumb:active { transform: scale(.95); }
.photo-big { max-width: 100%; border-radius: 14px; margin-top: 12px; display: block; }
.item-extras { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.hw-btn.photo { background: #EEF6FF; color: var(--blue-d); }

/* 模态内日期网格 */
.modal-card .sim-grid { margin-top: 12px; text-align: left; }

/* ---------- 星星与徽章 ---------- */
.star-bar { display: inline-flex; gap: 10px; margin-top: 10px; background: rgba(255, 255, 255, .75); padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 800; cursor: pointer; box-shadow: var(--shadow); border: 2px solid #FFD8A8; }
.star-bar:active { transform: scale(.96); }
.star-item { color: var(--orange-d); }
.badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; text-align: center; }
.badge { background: #F8FAFC; border: 2px solid #E9EEF5; border-radius: 14px; padding: 12px 6px; }
.badge.got { background: #FFF7ED; border-color: #FFD8A8; }
.badge.lock { opacity: .5; filter: grayscale(.75); }
.badge-emoji { font-size: 30px; }
.badge-name { font-size: 12.5px; font-weight: 800; color: var(--ink); margin-top: 4px; }
.badge-desc { font-size: 12px; color: var(--ink-2); margin-top: 2px; line-height: 1.4; }
.reward-card { background: #FFF9EE; border: 2px dashed #FFD8A8; text-align: center; font-size: 15px; line-height: 1.8; }
.badge-new { font-size: 15px; font-weight: 800; color: var(--orange-d); }
.stat-card.c-green .stat-num { color: #16A34A; }
.stat-card.c-purple .stat-num { color: #7C3AED; }
.day-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 4px; border-bottom: 1px dashed #E9EEF5; font-size: 13.5px; }
.day-row:last-child { border-bottom: none; }
.day-date { color: var(--ink-2); font-weight: 700; }
.day-mark { font-weight: 700; }
.day-mark.ok { color: #16A34A; }
.day-mark.rest { color: #94A3B8; }
.sound-list { max-height: 42vh; overflow-y: auto; padding-right: 2px; }

/* ---------- 拍照 ---------- */
.photo-btns { display: flex; gap: 8px; }
.photo-btn { border: none; cursor: pointer; font-family: inherit; }
.cam-wrap { background: #0F172A; border-radius: 14px; overflow: hidden; margin-top: 12px; aspect-ratio: 4 / 3; }
.cam-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-hint { min-height: 20px; }