:root {
  --ink: #173f43;
  --ink-soft: #436467;
  --paper: #f7f3e9;
  --card: #fffdf8;
  --coral: #ef6d58;
  --coral-dark: #d9503f;
  --mint: #afd8ca;
  --mint-dark: #4f8e7b;
  --yellow: #f3c85f;
  --line: #dedbd0;
  --shadow: 0 18px 50px rgba(30, 60, 58, 0.09);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "DM Sans", sans-serif; }
button, input, select { font: inherit; }
button { color: inherit; }
.app-shell { max-width: 1440px; min-height: 100vh; margin: 0 auto; padding: 0 5vw; }
.topbar { height: 88px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(23,63,67,.14); }
.brand { display: flex; align-items: center; gap: 11px; border: 0; background: none; font: 700 22px "Fredoka"; cursor: pointer; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px 12px 16px 12px; background: var(--coral); color: white; transform: rotate(-3deg); }
.top-actions { display: flex; align-items: center; gap: 8px; }
.nav-pill, .quiet-button, .back-button { border: 0; background: transparent; padding: 10px 14px; font-weight: 600; cursor: pointer; border-radius: 99px; }
.nav-pill.active { background: #e6e8df; }
.avatar { width: 42px; height: 42px; margin-left: 8px; border: 3px solid var(--card); border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--yellow); box-shadow: 0 3px 10px rgba(23,63,67,.18); }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.35) translateY(8%); }
.view { display: none; }
.view.active { display: block; animation: rise .35s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.hero-grid { min-height: 470px; display: grid; grid-template-columns: 1.3fr .8fr; gap: 8vw; align-items: center; }
.eyebrow, .section-kicker { color: var(--coral-dark); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.live-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--coral); }
h1, h2, p { margin-top: 0; }
.hero-copy h1, .parent-header h1, .celebration-card h1 { margin: 18px 0; font: 700 clamp(44px, 5vw, 72px)/.98 "Fredoka"; letter-spacing: -.045em; }
.hero-copy h1 em { color: var(--coral); font-style: normal; }
.hero-copy > p { max-width: 540px; color: var(--ink-soft); font-size: 18px; line-height: 1.6; }
.hero-actions { margin-top: 32px; display: flex; align-items: center; gap: 20px; }
.primary-button, .secondary-button { min-height: 50px; border-radius: 14px; padding: 0 22px; border: 0; font-weight: 800; cursor: pointer; transition: .2s ease; }
.primary-button { background: var(--ink); color: white; box-shadow: 0 7px 0 #0d2c2f; }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 9px 0 #0d2c2f; }
.primary-button:active { transform: translateY(5px); box-shadow: 0 2px 0 #0d2c2f; }
.secondary-button { background: #edf0e8; color: var(--ink); }
.time-estimate { color: var(--ink-soft); font-size: 14px; }
.mascot-card { position: relative; height: 380px; display: grid; place-items: center; border-radius: 48% 52% 46% 54%; background: var(--mint); border: 1px solid rgba(23,63,67,.15); overflow: visible; }
.mascot-card img { width: 340px; max-height: 420px; object-fit: contain; transform: translateY(20px); filter: drop-shadow(0 18px 16px rgba(23,63,67,.18)); }
.speech-bubble { position: absolute; top: 38px; right: -38px; padding: 13px 16px; border-radius: 18px 18px 18px 4px; background: var(--card); box-shadow: var(--shadow); font: 700 15px "Fredoka"; transform: rotate(2deg); }
.isabel-badge { position: absolute; bottom: 20px; left: -42px; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border: 1px solid rgba(23,63,67,.12); border-radius: 999px; background: rgba(255,253,248,.97); box-shadow: var(--shadow); transform: rotate(-2deg); }
.isabel-photo { width: 48px; height: 48px; flex: 0 0 auto; overflow: hidden; border-radius: 50%; background: var(--mint); }
.isabel-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transform: scale(1.25) translateY(7%); filter: none; }
.isabel-badge strong, .isabel-badge small { display: block; white-space: nowrap; }
.isabel-badge strong { font: 700 14px "Fredoka"; }
.isabel-badge small { margin-top: 2px; color: var(--ink-soft); font-size: 10px; }
.spark { position: absolute; color: var(--yellow); font-size: 28px; }.spark-one{top:25px;left:18px}.spark-two{bottom:35px;right:15px;font-size:20px}
.dashboard-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; padding-bottom: 22px; }
.card { padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: rgba(255,253,248,.82); box-shadow: 0 8px 30px rgba(35,67,64,.04); }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }.card-heading h2,.settings-card h2,.skill-strip h2{margin:6px 0 0;font:700 24px "Fredoka"}
.soft-badge { padding: 7px 10px; color: var(--mint-dark); background: #dfefe8; border-radius: 99px; font-size: 12px; font-weight: 800; }
.progress-body { display: flex; align-items: center; gap: 30px; margin-top: 25px; }
.progress-ring { --progress: 0deg; flex: 0 0 auto; width: 116px; height: 116px; padding: 10px; border-radius: 50%; background: conic-gradient(var(--coral) var(--progress), #ece8dd 0); }
.progress-ring > div { width: 100%; height: 100%; border-radius: 50%; display: grid; place-content: center; text-align: center; background: var(--card); }.progress-ring strong{font:700 32px "Fredoka"}.progress-ring span{display:block;color:var(--ink-soft);font-size:12px}
.progress-detail { flex: 1; }.progress-detail p{font-weight:700;margin-bottom:14px}.progress-detail>span{color:var(--ink-soft);font-size:13px}
.segmented-progress { display: flex; gap: 7px; margin-bottom: 9px; }.segmented-progress i{height:8px;flex:1;border-radius:99px;background:#e7e4da}.segmented-progress i.done{background:var(--coral)}
.flame { font-size: 28px; }.streak-number{display:flex;align-items:baseline;gap:9px;margin:24px 0 20px}.streak-number strong{font:700 48px "Fredoka"}.streak-number span{color:var(--ink-soft)}
.week-row { display: grid; grid-template-columns: repeat(7,1fr); gap: 8px; }.week-day{text-align:center}.week-day i{display:grid;place-items:center;width:30px;height:30px;margin:0 auto 7px;border-radius:50%;background:#ece8dd;color:transparent;font-style:normal}.week-day.done i{background:var(--mint);color:var(--ink)}.week-day.today i{outline:2px solid var(--coral);outline-offset:2px}.week-day span{font-size:11px;color:var(--ink-soft)}
.skill-strip { margin: 0 0 45px; padding: 26px 28px; display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.skill-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}.skill-chips span{padding:10px 13px;border:1px solid var(--line);border-radius:99px;background:var(--card);font-size:13px;font-weight:600}
footer{min-height:80px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;color:var(--ink-soft);font-size:12px}footer span:first-child{font:700 16px "Fredoka";color:var(--ink)}
.mobile-nav { display: none; }

.practice-view { min-height: calc(100vh - 170px); }.practice-topline{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:28px 0}.back-button{text-align:left}.practice-progress{text-align:center;font-size:13px;font-weight:700}.thin-progress{width:220px;max-width:100%;height:5px;margin:9px auto 0;border-radius:9px;background:#dfddd5;overflow:hidden}.thin-progress i{display:block;width:10%;height:100%;background:var(--coral);transition:.3s}.practice-topline .quiet-button{text-align:right}.problem-layout{max-width:1000px;margin:20px auto 80px;display:grid;grid-template-columns:1fr 220px;gap:22px;align-items:start}.problem-card{min-height:550px;padding:45px;border-radius:28px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}.problem-meta{display:flex;justify-content:space-between;align-items:center}.problem-meta>span:first-child{padding:7px 11px;border-radius:99px;background:#dfefe8;color:var(--mint-dark);font-weight:800;font-size:12px}.difficulty-dot{display:inline-block;width:8px;height:8px;margin-left:4px;border-radius:50%;background:#dedbd0}.difficulty-dot.on{background:var(--yellow)}.problem-card h1{margin:38px 0 45px;font:600 clamp(28px,4vw,40px)/1.35 "Fredoka";letter-spacing:-.02em}.work-area{border-top:1px solid var(--line);padding-top:30px}.work-area label{display:block;margin-bottom:9px;font-size:13px;font-weight:800}.answer-row{display:flex;align-items:center;gap:12px}.answer-row input{width:170px;height:66px;border:2px solid #c9c9be;border-radius:14px;background:#fff;padding:0 18px;color:var(--ink);font:700 30px "Fredoka";outline:none}.answer-row input:focus{border-color:var(--ink)}.answer-row span{color:var(--ink-soft);font-weight:600}.feedback{min-height:25px;margin:14px 0 4px;font-weight:700}.feedback.good{color:#317a64}.feedback.try{color:var(--coral-dark)}.problem-actions{display:flex;justify-content:space-between;margin-top:18px}.coach-card{padding:22px;border-radius:22px;background:#173f43;color:white}.coach-card img{display:block;width:120px;height:130px;object-fit:contain;margin:-12px auto 10px}.coach-card .section-kicker{color:var(--yellow)}.coach-card p{margin:8px 0 0;color:#dce8e5;font-size:14px;line-height:1.5}

.complete-view{padding:55px 0 80px}.celebration-card{position:relative;max-width:850px;margin:auto;padding:60px;text-align:center;border:1px solid var(--line);border-radius:32px;background:var(--card);overflow:hidden;box-shadow:var(--shadow)}.celebration-card h1{font-size:52px}.celebration-card>p{max-width:500px;margin:0 auto 30px;color:var(--ink-soft);font-size:17px}.big-check{display:grid;place-items:center;width:76px;height:76px;margin:0 auto 22px;border-radius:50%;background:var(--mint);font-size:40px;font-weight:800}.confetti{position:absolute;top:25px;left:0;right:0;color:var(--coral);letter-spacing:16px}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:38px 0;padding:25px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.result-stats div+div{border-left:1px solid var(--line)}.result-stats strong,.result-stats span{display:block}.result-stats strong{font:700 28px "Fredoka"}.result-stats span{margin-top:5px;color:var(--ink-soft);font-size:12px}

.parent-view{padding:62px 0}.parent-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:38px}.parent-header h1{max-width:680px;margin:10px 0;font-size:50px}.parent-header p{color:var(--ink-soft)}.period-control{display:flex;padding:4px;border-radius:12px;background:#e7e6de}.period-control button{padding:8px 12px;border:0;border-radius:9px;background:transparent;font-size:12px;font-weight:700}.period-control .active{background:var(--card);box-shadow:0 2px 7px rgba(0,0,0,.08)}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}.stat-card{padding:22px;border:1px solid var(--line);border-radius:19px;background:var(--card)}.stat-card>span,.stat-card small,.stat-card strong{display:block}.stat-card>span{font-size:12px;font-weight:700;color:var(--ink-soft)}.stat-card strong{margin:12px 0 5px;font:700 35px "Fredoka"}.stat-card small{color:var(--ink-soft)}.stat-card.accent{background:var(--mint);border-color:transparent}.parent-grid{display:grid;grid-template-columns:1.35fr .8fr;gap:20px;margin-bottom:20px}.chart-card,.settings-card{min-height:390px}.legend{font-size:11px;color:var(--ink-soft)}.legend i{display:inline-block;width:8px;height:8px;margin-right:5px;border-radius:50%;background:var(--coral)}.bar-chart{height:250px;margin-top:25px;display:grid;grid-template-columns:repeat(7,1fr);gap:12px;align-items:end;border-bottom:1px solid var(--line)}.bar-column{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px}.bar-column strong{font-size:11px}.bar-column i{display:block;width:62%;min-height:3px;border-radius:8px 8px 0 0;background:var(--coral)}.bar-column span{height:18px;color:var(--ink-soft);font-size:11px}.settings-card label{display:block;margin-top:16px;font-size:12px;font-weight:700}.settings-card input,.settings-card select{width:100%;height:43px;margin-top:7px;padding:0 11px;border:1px solid #cecec4;border-radius:10px;background:white;color:var(--ink)}.settings-card .primary-button{min-height:42px;margin-top:20px}.saved-message{margin-left:12px;color:var(--mint-dark);font-size:12px;font-weight:700;opacity:0}.saved-message.show{opacity:1}.skills-table-card{margin-top:20px}.muted{font-size:12px;color:var(--ink-soft)}.skill-rows{margin-top:20px}.skill-row{display:grid;grid-template-columns:170px 1fr 55px;gap:18px;align-items:center;padding:13px 0;border-top:1px solid var(--line)}.skill-row>span{font-weight:700;font-size:13px}.skill-row>strong{text-align:right}.skill-meter{height:8px;border-radius:9px;background:#e8e5db;overflow:hidden}.skill-meter i{display:block;height:100%;background:var(--mint-dark);border-radius:9px}

@media(max-width:850px){.app-shell{padding:0 20px}.topbar{height:72px}.nav-pill{display:none}.hero-grid{grid-template-columns:1fr;gap:10px;padding:55px 0 30px}.hero-copy h1{font-size:48px}.mascot-card{height:280px}.mascot-card img{width:260px;max-height:300px}.speech-bubble{right:8px}.dashboard-grid,.parent-grid{grid-template-columns:1fr}.skill-strip{align-items:flex-start;gap:22px;flex-direction:column}.skill-chips{justify-content:flex-start}.practice-topline{grid-template-columns:1fr auto}.practice-topline .quiet-button{display:none}.practice-progress{text-align:right}.problem-layout{grid-template-columns:1fr}.coach-card{display:flex;align-items:center}.coach-card img{width:75px;height:80px;margin:0 15px 0 0}.problem-card{padding:28px;min-height:520px}.stat-grid{grid-template-columns:1fr 1fr}.parent-header{align-items:flex-start;flex-direction:column}.period-control{margin-top:15px}.parent-header h1{font-size:40px}.result-stats{grid-template-columns:1fr;gap:18px}.result-stats div+div{border-left:0}.celebration-card{padding:50px 24px}.celebration-card h1{font-size:40px}}
@media(max-width:500px){.brand{font-size:19px}.hero-copy h1{font-size:40px}.hero-actions{align-items:flex-start;flex-direction:column}.dashboard-grid{display:block}.dashboard-grid .card{margin-bottom:14px}.progress-body{gap:17px}.progress-ring{width:96px;height:96px}.stat-grid{grid-template-columns:1fr}.problem-actions{gap:12px;flex-direction:column-reverse}.problem-actions button{width:100%}.skill-row{grid-template-columns:110px 1fr 42px}.week-row{gap:3px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Extended daily plan and end-of-set grading */
.problem-layout { max-width: 1050px; grid-template-columns: 1fr 270px; }
.feedback.neutral { color: var(--ink-soft); font-weight: 500; }
.problem-actions button:disabled { opacity: .35; cursor: not-allowed; }
.answer-map-card { position: sticky; top: 20px; padding: 22px; border-radius: 22px; background: var(--ink); color: white; }
.answer-map-heading { display: flex; align-items: center; justify-content: space-between; }
.answer-map-card .section-kicker { color: var(--yellow); }
.answer-map-card > p { margin: 18px 0 0; color: #c8d8d5; font-size: 12px; line-height: 1.5; }
.answer-map { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-top: 18px; }
.answer-map button { aspect-ratio: 1; border: 1px solid #5d7779; border-radius: 8px; background: transparent; color: #b6c9c7; font-size: 11px; font-weight: 800; cursor: pointer; }
.answer-map button.answered { border-color: #6fa995; background: #6fa995; color: white; }
.answer-map button.current { outline: 2px solid var(--yellow); outline-offset: 2px; }

.celebration-card { max-width: 1000px; }
.result-stats { grid-template-columns: repeat(4, 1fr); }
.review-list { max-height: 420px; margin: 0 0 32px; overflow: auto; text-align: left; border: 1px solid var(--line); border-radius: 16px; }
.review-row { display: grid; grid-template-columns: 28px 1fr 90px 90px; gap: 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.review-row:last-child { border-bottom: 0; }
.review-row > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 800; }
.review-row.correct > span { background: #d8eee5; color: #317a64; }
.review-row.incorrect > span { background: #f8ded8; color: var(--coral-dark); }
.review-row strong, .review-row small { display: block; }
.review-row small { color: var(--ink-soft); font-size: 11px; }
.review-row > div:first-of-type small { margin-top: 3px; }

.parent-grid { grid-template-columns: 1.15fr 1fr; }
.problem-counts-label { display: flex; justify-content: space-between; margin-top: 18px; font-size: 12px; font-weight: 800; }
.problem-counts-label small { color: var(--ink-soft); font-weight: 500; }
.problem-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.settings-card .problem-counts label { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: white; font-size: 12px; font-weight: 700; }
.settings-card .problem-counts input { width: 54px; height: 34px; margin: 0; padding: 0 6px; border: 1px solid #cecec4; border-radius: 8px; font-weight: 800; }
.plan-total { display: flex; justify-content: space-between; margin-top: 10px; padding: 10px; border-radius: 9px; background: #e0efe9; color: var(--mint-dark); font-size: 12px; font-weight: 800; }
.plan-total:has(.low) { background: #f7dfd9; color: var(--coral-dark); }
.settings-error { min-height: 0; margin: 5px 0 0; color: var(--coral-dark); font-size: 12px; }
.saved-message.error { color: var(--coral-dark); }

@media(max-width:850px) {
  .problem-layout { grid-template-columns: 1fr; }
  .answer-map-card { position: static; }
  .result-stats { grid-template-columns: 1fr 1fr; }
  .review-row { grid-template-columns: 28px 1fr 65px; }
  .review-row > div:last-child { display: none; }
  .parent-grid { grid-template-columns: 1fr; }
}
@media(max-width:500px) {
  .problem-counts { grid-template-columns: 1fr; }
  .answer-map { grid-template-columns: repeat(6, 1fr); }
}

@media(max-width:850px) {
  body { padding-bottom: 78px; }
  .top-actions .nav-pill[data-view="parent"] { display: block; padding: 8px 10px; font-size: 12px; white-space: nowrap; }
  .top-actions .avatar { width: 32px; height: 32px; margin-left: 0; border-width: 2px; }
  .isabel-badge { bottom: 12px; left: 10px; }
  .mascot-card .isabel-photo img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: 50% 25%; transform: scale(1.25) translateY(7%); filter: none; }
  html body .mobile-nav { position: fixed !important; z-index: 9999; right: 14px; bottom: max(12px, env(safe-area-inset-bottom)); left: 14px; display: flex !important; width: auto; gap: 6px; padding: 7px; visibility: visible; opacity: 1; transform: none; border: 1px solid rgba(23,63,67,.18); border-radius: 18px; background: rgba(255,253,248,.98); box-shadow: 0 12px 35px rgba(23,63,67,.18); }
  .mobile-nav button { display: flex; flex: 1; align-items: center; justify-content: center; gap: 7px; min-height: 48px; border: 0; border-radius: 12px; background: transparent; color: var(--ink-soft); font-weight: 800; cursor: pointer; }
  .mobile-nav button.active { background: var(--ink); color: white; }
  .mobile-nav button span { font-size: 18px; line-height: 1; }
}

@media(max-width:500px) {
  .brand { font-size: 14px; gap: 7px; }
  .brand-mark { width: 34px; height: 34px; }
  .top-actions { gap: 4px; }
  .top-actions .nav-pill[data-view="parent"] { padding: 7px 5px; font-size: 11px; }
  .isabel-photo { width: 42px; height: 42px; }
  .isabel-badge { padding: 6px 11px 6px 6px; }
}