From ab32ba863487c98de88d8531e897044c63fb40b3 Mon Sep 17 00:00:00 2001 From: nmemmert <67961292+nmemmert@users.noreply.github.com> Date: Mon, 19 Oct 2026 12:58:24 -0400 Subject: [PATCH] =?UTF-8?q?Complete=20visual=20redesign=20=E2=80=94=20new?= =?UTF-8?q?=20design=20system?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Switch to Inter (body) + Nunito (kid headings) from Google Fonts - Replace warm-cream palette with clean blue-tinted design system - --bg: #f5f7ff, --card: #fff, --accent: #4f7ef8 - Layered shadow variables (--shadow-xs through --shadow-lg) - --border / --border-hover / --accent-light tokens - Admin panel: sticky header with compact nav pills, clean card borders, uppercase label style for admin-card fields, hover transitions - Student app: Nunito bold headings, better kid-card glow on dark home, cleaner word-card / done-card / item-card styles - Better button hierarchy: gradient primary, neutral secondary, red danger - Modernized form inputs: consistent 1.5px border + focus ring system - Cleaner planner tasks (accent-light tint), today rows, unit blocks - All theme variants updated to match new palette tokens Co-Authored-By: Claude Sonnet 4.6 --- public/styles.css | 2014 +++++++++++++++++++++++++-------------------- 1 file changed, 1104 insertions(+), 910 deletions(-) diff --git a/public/styles.css b/public/styles.css index d7bb9b7..c760ec9 100644 --- a/public/styles.css +++ b/public/styles.css @@ -1,32 +1,67 @@ +/* ============================================================ + HOMESCHOOL APP — DESIGN SYSTEM + ============================================================ */ + +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Nunito:wght@400;600;700;800;900&display=swap'); + * { box-sizing: border-box; margin: 0; padding: 0; } [hidden] { display: none !important; } :root { - --bg: #fdf6e3; - --card: #ffffff; - --ink: #2d3142; - --accent: #4f86f7; - --accent-dark: #3a6fd8; - --good: #2e9e5b; - --good-bg: #e3f6ec; - --bad: #d64550; - --bad-bg: #fdeaec; - --gold: #f6b93b; - --muted: #8a8fa3; - --radius: 18px; + /* Palette */ + --accent: #4f7ef8; + --accent-dark: #3460d8; + --accent-light: #eef2ff; + --good: #16a34a; + --good-bg: #dcfce7; + --bad: #dc2626; + --bad-bg: #fee2e2; + --gold: #d97706; + --gold-bg: #fef3c7; + --ink: #111827; + --ink-2: #374151; + --muted: #6b7280; + --border: #e5e7eb; + --border-hover: #cbd5e1; + --bg: #f5f7ff; + --card: #ffffff; + --card-2: #f9fafb; + + /* Radii */ + --radius: 14px; + --radius-sm: 8px; + --radius-lg: 20px; + --radius-xl: 28px; + + /* Shadows */ + --shadow-xs: 0 1px 2px rgba(0,0,0,.05); + --shadow-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04); + --shadow: 0 4px 16px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04); + --shadow-md: 0 8px 24px rgba(0,0,0,.09), 0 2px 8px rgba(0,0,0,.05); + --shadow-lg: 0 16px 48px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.06); + + /* Typography */ + --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + --font-kid: 'Nunito', 'Inter', -apple-system, sans-serif; } +/* ============================================================ BASE */ + body { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Comic Sans MS", sans-serif; + font-family: var(--font-body); background: var(--bg); color: var(--ink); min-height: 100vh; + -webkit-font-smoothing: antialiased; + line-height: 1.5; } +/* ============================================================ STUDENT LAYOUT */ + .view { max-width: 640px; margin: 0 auto; - padding: 2rem 1.25rem 4rem; + padding: 2rem 1.25rem 5rem; text-align: center; } @@ -41,9 +76,7 @@ body { text-align: left; } -#view-practice { - max-width: 960px; -} +#view-practice { max-width: 960px; } #view-crossword { max-width: 100%; @@ -52,38 +85,51 @@ body { padding-right: 1.25rem; } -.app-title { font-size: 2.4rem; margin-bottom: 0.5rem; } +.app-title { + font-family: var(--font-kid); + font-size: 2.4rem; + font-weight: 900; + letter-spacing: -0.02em; + margin-bottom: 0.5rem; +} -#school-logo { display: block; margin: 2.5rem auto 0; max-width: min(520px, 92vw); height: auto; } -.subtitle { font-size: 1.25rem; color: var(--muted); margin-bottom: 2rem; } -.hint { color: var(--muted); margin: 1rem 0; } -.error { color: var(--bad); margin: 0.5rem 0; } +#school-logo { + display: block; + margin: 2.5rem auto 0; + max-width: min(520px, 92vw); + height: auto; +} + +.subtitle { font-size: 1.15rem; color: var(--muted); margin-bottom: 2rem; } +.hint { color: var(--muted); margin: 1rem 0; font-size: 0.9rem; } +.error { color: var(--bad); margin: 0.5rem 0; font-size: 0.9rem; font-weight: 600; } + +/* ============================================================ PARENT LOCK SCREEN */ -/* ---------- parent lock screen ---------- */ body:has(#console[hidden]) { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: - radial-gradient(ellipse at 20% 75%, rgba(79,134,247,0.13) 0%, transparent 55%), - radial-gradient(ellipse at 80% 25%, rgba(246,185,59,0.11) 0%, transparent 55%), - radial-gradient(ellipse at 55% 90%, rgba(46,158,91,0.08) 0%, transparent 45%), - var(--bg); + radial-gradient(ellipse at 20% 75%, rgba(79,126,248,.15) 0%, transparent 55%), + radial-gradient(ellipse at 80% 25%, rgba(217,119,6,.1) 0%, transparent 55%), + #eef2ff; } + body:has(#console[hidden])::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: - radial-gradient(circle 180px at 10% 15%, rgba(79,134,247,0.09) 0%, transparent 100%), - radial-gradient(circle 140px at 90% 85%, rgba(246,185,59,0.1) 0%, transparent 100%); + radial-gradient(circle 220px at 10% 15%, rgba(79,126,248,.1) 0%, transparent 100%), + radial-gradient(circle 160px at 90% 85%, rgba(217,119,6,.12) 0%, transparent 100%); } #pin-gate { background: var(--card); - border-radius: 28px; + border-radius: var(--radius-xl); padding: 2.5rem 2.5rem 2rem; - box-shadow: 0 8px 48px rgba(45,49,66,0.14), 0 1px 0 rgba(45,49,66,0.06); + box-shadow: var(--shadow-lg); max-width: 360px; width: calc(100% - 2.5rem); margin: 0; @@ -91,25 +137,31 @@ body:has(#console[hidden])::before { } .pin-deco { - font-size: 2rem; + font-size: 2.2rem; letter-spacing: 0.5rem; margin-bottom: 1rem; } -/* ---------- kid picker (dark home screen) ---------- */ +/* ============================================================ KID HOME SCREEN */ + body:has(#view-home:not([hidden])) { - background: linear-gradient(145deg, #0f1628 0%, #1a0f3e 100%); + background: linear-gradient(150deg, #0d1b3e 0%, #1a0a3a 50%, #0d2040 100%); } -body:has(#view-home:not([hidden])) .app-title { color: #fff; } + +body:has(#view-home:not([hidden])) .app-title, +body:has(#view-home:not([hidden])) #kid-greeting { color: #fff; } + body:has(#view-home:not([hidden])) .subtitle, -body:has(#view-home:not([hidden])) #no-kids { color: rgba(255,255,255,0.55); } -body:has(#view-home:not([hidden])) a.link-btn { color: rgba(255,255,255,0.35); } -body:has(#view-home:not([hidden])) .page-confetti span { opacity: 0.7; } +body:has(#view-home:not([hidden])) #no-kids { color: rgba(255,255,255,.5); } + +body:has(#view-home:not([hidden])) a.link-btn { color: rgba(255,255,255,.3); } +body:has(#view-home:not([hidden])) .page-confetti span { opacity: 0.8; } @keyframes confetti-float { - 0%, 100% { transform: translateY(0px) rotate(-4deg); opacity: 0.45; } - 50% { transform: translateY(-20px) rotate(6deg); opacity: 0.75; } + 0%, 100% { transform: translateY(0) rotate(-4deg); opacity: .5; } + 50% { transform: translateY(-22px) rotate(6deg); opacity: .8; } } + .page-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; display: none; @@ -121,207 +173,237 @@ body:has(#view-home:not([hidden])) .page-confetti { display: block; } } @keyframes card-enter { - from { opacity: 0; transform: translateY(26px) scale(0.93); } - to { opacity: 1; transform: translateY(0) scale(1); } -} -@keyframes emoji-wobble { - 0% { transform: rotate(0deg) scale(1); } - 20% { transform: rotate(-15deg) scale(1.18); } - 50% { transform: rotate(13deg) scale(1.14); } - 75% { transform: rotate(-7deg) scale(1.07); } - 100% { transform: rotate(0deg) scale(1); } -} -@keyframes glow-breathe { - 0%, 100% { opacity: 0.42; } - 50% { opacity: 0.65; } + from { opacity: 0; transform: translateY(28px) scale(0.92); } + to { opacity: 1; transform: translateY(0) scale(1); } } +@keyframes emoji-wobble { + 0% { transform: rotate(0deg) scale(1); } + 20% { transform: rotate(-14deg) scale(1.2); } + 55% { transform: rotate(12deg) scale(1.15); } + 80% { transform: rotate(-6deg) scale(1.08); } + 100% { transform: rotate(0deg) scale(1); } +} + +@keyframes glow-breathe { + 0%, 100% { opacity: .35; } + 50% { opacity: .6; } +} + +/* Kid cards */ .kid-cards { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; margin-bottom: 2.5rem; position: relative; z-index: 1; } + .kid-card { - background: var(--card); - border: none; - border-top: 5px solid var(--kid-accent, var(--accent)); - border-radius: var(--radius); - padding: 1.5rem 2rem; + background: rgba(255,255,255,.08); + border: 1.5px solid rgba(255,255,255,.18); + backdrop-filter: blur(12px); + border-top: 4px solid var(--kid-accent, var(--accent)); + border-radius: var(--radius-lg); + padding: 1.75rem 2rem 1.5rem; + font-family: var(--font-kid); font-size: 1.2rem; - font-weight: 700; + font-weight: 800; + color: #fff; cursor: pointer; - transition: transform 0.2s ease; - min-width: 140px; - animation: card-enter 0.42s ease backwards; + transition: transform .22s ease, box-shadow .22s ease; + min-width: 148px; + animation: card-enter .44s ease backwards; position: relative; isolation: isolate; } + .kid-card::after { content: ''; - position: absolute; - inset: -2px; - border-radius: var(--radius); + position: absolute; inset: -3px; + border-radius: var(--radius-lg); background: var(--kid-accent, var(--accent)); - filter: blur(22px); - opacity: 0.42; + filter: blur(24px); + opacity: .35; z-index: -1; - animation: glow-breathe 3s ease-in-out infinite; - transition: opacity 0.25s ease, filter 0.25s ease; + animation: glow-breathe 3.2s ease-in-out infinite; + transition: opacity .25s, filter .25s; } -.kid-card:hover { - transform: translateY(-10px) scale(1.08); -} -.kid-card:hover::after { - opacity: 0.92; - filter: blur(32px); - animation-play-state: paused; -} -.kid-card:hover .avatar { animation: emoji-wobble 0.48s ease; } -.kid-card .avatar { display: block; font-size: 3rem; margin-bottom: 0.5rem; } + +.kid-card:hover { transform: translateY(-12px) scale(1.07); box-shadow: var(--shadow-lg); } +.kid-card:hover::after { opacity: .85; filter: blur(36px); animation-play-state: paused; } +.kid-card:hover .avatar { animation: emoji-wobble .5s ease; } +.kid-card .avatar { display: block; font-size: 3.2rem; margin-bottom: .6rem; } .app-title, .subtitle { position: relative; z-index: 1; } -/* ---------- kid home ---------- */ +/* ============================================================ BACK BUTTON */ + .back-btn { - display: inline-flex; align-items: center; gap: 0.3rem; + display: inline-flex; align-items: center; gap: .35rem; background: var(--card); - border: 1.5px solid #d8d2c0; + border: 1.5px solid var(--border); border-radius: 10px; color: var(--muted); - font-size: 0.9rem; font-weight: 600; font-family: inherit; - padding: 0.4rem 0.9rem; + font-size: .875rem; font-weight: 600; font-family: inherit; + padding: .45rem 1rem; cursor: pointer; margin-bottom: 1rem; - box-shadow: 0 2px 6px rgba(45,49,66,0.07); - transition: background 0.15s, color 0.15s, transform 0.12s, box-shadow 0.15s; + box-shadow: var(--shadow-xs); + transition: background .15s, color .15s, transform .12s, box-shadow .15s, border-color .15s; } .back-btn:hover { background: #fff; color: var(--ink); - border-color: #bdb8aa; - box-shadow: 0 4px 12px rgba(45,49,66,0.12); + border-color: var(--border-hover); + box-shadow: var(--shadow-sm); transform: translateY(-1px); } -#kid-greeting { font-size: 2rem; margin: 1rem 0; clear: both; } + +/* ============================================================ KID HOME (inner) */ + +#kid-greeting { + font-family: var(--font-kid); + font-size: 2rem; + font-weight: 800; + margin: 1rem 0; clear: both; +} .week-card { - background: var(--card); border-radius: var(--radius); - padding: 1.25rem; margin-bottom: 2rem; - box-shadow: 0 4px 12px rgba(45, 49, 66, 0.08); - font-size: 1.1rem; + background: var(--card); + border-radius: var(--radius); + padding: 1.25rem; + margin-bottom: 1.75rem; + box-shadow: var(--shadow); + font-size: 1.05rem; } .week-card .mastery-dots { - margin-top: 0.75rem; line-height: 1.9; letter-spacing: 2px; font-size: 1.1rem; + margin-top: .75rem; line-height: 1.9; letter-spacing: 2px; font-size: 1.05rem; word-break: break-all; overflow-wrap: anywhere; } +/* Big action buttons */ .big-actions { display: flex; flex-direction: column; gap: 1rem; align-items: center; } -.big-btn { - font-size: 1.6rem; font-weight: 700; font-family: inherit; - padding: 1.25rem 2rem; width: 100%; max-width: 380px; - border: none; border-radius: var(--radius); cursor: pointer; - color: #fff; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.15); - transition: transform 0.05s; -} -.big-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,0.15); } -.big-btn.practice { background: var(--accent); } -.big-btn.test { background: var(--gold); color: var(--ink); } -.big-btn:disabled { background: #ccc; color: #888; cursor: not-allowed; box-shadow: none; } -/* ---------- practice / test ---------- */ -.progress-label { color: var(--muted); font-weight: 700; margin: 0.5rem 0; clear: both; } -.progress-track { - height: 12px; background: #e8e2d0; border-radius: 6px; overflow: hidden; margin-bottom: 1.5rem; +.big-btn { + font-family: var(--font-kid); + font-size: 1.55rem; font-weight: 800; + padding: 1.2rem 2rem; width: 100%; max-width: 380px; + border: none; border-radius: var(--radius); cursor: pointer; + color: #fff; + box-shadow: 0 6px 0 rgba(0,0,0,.18), var(--shadow); + transition: transform .08s, box-shadow .08s; + letter-spacing: -.01em; } -.progress-fill { height: 100%; width: 0; background: var(--accent); transition: width 0.5s ease-out; } -.progress-fill.test-fill { background: var(--gold); } +.big-btn:active { + transform: translateY(4px); + box-shadow: 0 2px 0 rgba(0,0,0,.18), var(--shadow-xs); +} +.big-btn.practice { background: linear-gradient(135deg, #5b8df7, #3460d8); } +.big-btn.test { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; } +.big-btn:disabled { background: #d1d5db; color: #9ca3af; cursor: not-allowed; box-shadow: none; } + +/* ============================================================ PROGRESS */ + +.progress-label { color: var(--muted); font-weight: 700; margin: .5rem 0; clear: both; font-size: .875rem; } + +.progress-track { + height: 10px; background: #e5e7eb; border-radius: 999px; overflow: hidden; margin-bottom: 1.5rem; +} +.progress-fill { height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width .5s ease-out; } +.progress-fill.test-fill { background: linear-gradient(90deg, #f59e0b, #d97706); } + +.progress-track.small { height: 6px; margin: .2rem 0; } + +/* ============================================================ WORD CARD */ .word-card { - background: var(--card); border-radius: var(--radius); - padding: 2rem 1.5rem; box-shadow: 0 4px 12px rgba(45, 49, 66, 0.08); + background: var(--card); + border-radius: var(--radius); + padding: 2rem 1.5rem; + box-shadow: var(--shadow); + border: 1.5px solid var(--border); } + .speak-btn { - font-size: 1.2rem; font-family: inherit; font-weight: 700; + font-size: 1.15rem; font-family: inherit; font-weight: 700; background: var(--good-bg); color: var(--good); border: 2px solid var(--good); border-radius: 999px; - padding: 0.6rem 1.4rem; cursor: pointer; margin-bottom: 1.25rem; + padding: .6rem 1.5rem; cursor: pointer; margin-bottom: 1.25rem; + transition: background .15s, transform .1s; } -.prompt { font-size: 1.1rem; color: var(--muted); margin-bottom: 1rem; } +.speak-btn:hover { background: #bbf7d0; transform: scale(1.03); } + +.prompt { font-size: 1.05rem; color: var(--muted); margin-bottom: 1rem; } .spell-input { display: block; width: 100%; max-width: 420px; margin: 0 auto 1rem; - font-size: 2rem; font-family: inherit; text-align: center; - letter-spacing: 4px; padding: 0.6rem; - border: 3px solid var(--accent); border-radius: 12px; - outline: none; + font-size: 2rem; font-family: var(--font-kid); text-align: center; + letter-spacing: 5px; padding: .6rem; + border: 2.5px solid var(--accent); border-radius: var(--radius-sm); + outline: none; background: var(--card); + transition: border-color .15s, box-shadow .15s; } -.spell-input:focus { border-color: var(--accent-dark); } +.spell-input:focus { border-color: var(--accent-dark); box-shadow: 0 0 0 3px rgba(79,126,248,.15); } .check-btn { font-size: 1.3rem; font-weight: 700; font-family: inherit; - background: var(--accent); color: #fff; border: none; - border-radius: 12px; padding: 0.75rem 2.5rem; cursor: pointer; - box-shadow: 0 4px 0 var(--accent-dark); - transition: transform 0.12s; + background: linear-gradient(135deg, var(--accent), var(--accent-dark)); + color: #fff; border: none; + border-radius: var(--radius-sm); padding: .75rem 2.5rem; cursor: pointer; + box-shadow: 0 4px 0 rgba(52,96,216,.5); + transition: transform .1s, box-shadow .1s; } -.check-btn:active { transform: scale(0.94) translateY(2px); box-shadow: 0 1px 0 var(--accent-dark); } +.check-btn:active { transform: scale(.95) translateY(2px); box-shadow: 0 1px 0 rgba(52,96,216,.5); } /* letter-diff feedback */ -.feedback { min-height: 1rem; margin-bottom: 1rem; font-size: 1.2rem; } +.feedback { min-height: 1rem; margin-bottom: 1rem; font-size: 1.15rem; } .feedback .banner { - display: inline-block; padding: 0.5rem 1.25rem; border-radius: 999px; - font-weight: 700; margin-bottom: 0.75rem; + display: inline-block; padding: .5rem 1.4rem; border-radius: 999px; + font-weight: 700; margin-bottom: .75rem; } .feedback .banner.good { background: var(--good-bg); color: var(--good); } -.feedback .banner.bad { background: var(--bad-bg); color: var(--bad); } -.diff-line { font-size: 1.9rem; letter-spacing: 4px; margin: 0.4rem 0; font-weight: 700; } -.diff-line .label { font-size: 0.85rem; letter-spacing: 0; color: var(--muted); display: block; font-weight: 400; } -.ltr-ok { color: var(--ink); } +.feedback .banner.bad { background: var(--bad-bg); color: var(--bad); } +.diff-line { font-size: 1.9rem; letter-spacing: 4px; margin: .4rem 0; font-weight: 700; } +.diff-line .label { font-size: .85rem; letter-spacing: 0; color: var(--muted); display: block; font-weight: 400; } +.ltr-ok { color: var(--ink); } .ltr-bad { color: var(--bad); text-decoration: line-through; } -.ltr-fix { color: var(--good); background: var(--good-bg); border-radius: 6px; padding: 0 2px; } +.ltr-fix { color: var(--good); background: var(--good-bg); border-radius: 5px; padding: 0 3px; } + .study-word { - font-size: 2.6rem; font-weight: 800; letter-spacing: 6px; margin: 0.5rem 0; + font-family: var(--font-kid); + font-size: 2.6rem; font-weight: 900; letter-spacing: 6px; margin: .5rem 0; } -.countdown { color: var(--muted); } -.hint-badge { font-size: 1rem; color: var(--accent-dark); margin: 0.3rem 0 0.5rem; } +.countdown { color: var(--muted); } +.hint-badge { font-size: .95rem; color: var(--accent-dark); margin: .3rem 0 .5rem; } /* Word list preview */ -.preview-title { font-size: 1.5rem; margin: 0 0 0.25rem; } +.preview-title { font-size: 1.5rem; font-weight: 800; margin: 0 0 .25rem; } .word-preview-list { - list-style: none; - padding: 0; - margin: 0.75rem 0 1.5rem; - text-align: left; - max-height: 55vh; - overflow-y: auto; + list-style: none; padding: 0; margin: .75rem 0 1.5rem; + text-align: left; max-height: 55vh; overflow-y: auto; } -.word-preview-list li { margin: 0.45rem 0; font-size: 1.2rem; font-weight: 700; display: flex; gap: 0.4rem; } +.word-preview-list li { margin: .45rem 0; font-size: 1.15rem; font-weight: 700; display: flex; gap: .4rem; } .word-num { color: var(--muted); min-width: 2rem; text-align: right; flex-shrink: 0; font-weight: 400; } -.word-sentence { display: block; font-size: 0.88rem; font-weight: normal; color: var(--muted); } +.word-sentence { display: block; font-size: .88rem; font-weight: 400; color: var(--muted); } /* Young learner toggle */ -.young-toggle-row { margin-top: 0.9rem; text-align: center; } +.young-toggle-row { margin-top: .9rem; text-align: center; } .young-toggle { - cursor: pointer; - font-size: 0.95rem; - display: inline-flex; - align-items: center; - gap: 0.45rem; - color: var(--muted); - user-select: none; + cursor: pointer; font-size: .9rem; + display: inline-flex; align-items: center; gap: .45rem; + color: var(--muted); user-select: none; } .young-toggle input { accent-color: var(--accent); width: 1.1rem; height: 1.1rem; cursor: pointer; } -.young-countdown { font-size: 1.1rem; margin-top: 0.25rem; color: var(--accent-dark); } +.young-countdown { font-size: 1rem; margin-top: .25rem; color: var(--accent-dark); } .streak-badge { - display: inline-block; margin-left: 0.5rem; - background: #fff3cd; color: #7c5200; - border-radius: 999px; padding: 0.1rem 0.7rem; - font-size: 0.95rem; font-weight: 700; - animation: streak-pop 0.3s ease; + display: inline-block; margin-left: .5rem; + background: var(--gold-bg); color: #92400e; + border-radius: 999px; padding: .1rem .75rem; + font-size: .9rem; font-weight: 700; + animation: streak-pop .3s ease; } @keyframes streak-pop { - 0% { transform: scale(0.7); opacity: 0; } - 70% { transform: scale(1.15); } + 0% { transform: scale(.6); opacity: 0; } + 70% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } } @@ -330,512 +412,658 @@ body:has(#view-home:not([hidden])) .page-confetti { display: block; } text-align: center; padding: 2rem 0; letter-spacing: 1px; animation: pulse 1s ease-in-out infinite alternate; } -@keyframes pulse { - from { opacity: 0.6; } - to { opacity: 1; } -} +@keyframes pulse { from { opacity: .5; } to { opacity: 1; } } + .speak-btn-prominent { - font-size: 1.4rem; padding: 0.75rem 2rem; width: 100%; max-width: 340px; + font-size: 1.4rem; padding: .75rem 2rem; width: 100%; max-width: 340px; display: block; margin: 0 auto 1.25rem; } +/* Done card */ .done-card { background: var(--card); border-radius: var(--radius); - padding: 2.5rem 1.5rem; box-shadow: 0 4px 12px rgba(45, 49, 66, 0.08); - font-size: 1.3rem; + padding: 2.5rem 1.5rem; box-shadow: var(--shadow); + border: 1.5px solid var(--border); + font-size: 1.25rem; +} +.done-card .big-score { + font-family: var(--font-kid); + font-size: 3.2rem; font-weight: 900; margin: .75rem 0; } -.done-card .big-score { font-size: 3rem; font-weight: 800; margin: 0.75rem 0; } .done-card ul { list-style: none; margin: 1rem 0; } -.done-card li { margin: 0.3rem 0; } +.done-card li { margin: .3rem 0; } .done-card button { - font-size: 1.2rem; font-weight: 700; font-family: inherit; - background: var(--accent); color: #fff; border: none; - border-radius: 12px; padding: 0.7rem 2rem; cursor: pointer; margin-top: 1rem; - display: block; width: 100%; + font-size: 1.15rem; font-weight: 700; font-family: inherit; + background: linear-gradient(135deg, var(--accent), var(--accent-dark)); + color: #fff; border: none; + border-radius: var(--radius-sm); padding: .75rem 2rem; cursor: pointer; margin-top: 1rem; + display: block; width: 100%; box-shadow: 0 3px 0 rgba(52,96,216,.4); + transition: transform .1s; } +.done-card button:active { transform: translateY(2px); } .done-card button.secondary { - background: var(--good-bg); color: var(--good); border: 2px solid var(--good); + background: var(--good-bg); color: var(--good); + border: 2px solid var(--good); box-shadow: none; } -/* ---------- parent dashboard ---------- */ +/* ============================================================ PARENT DASHBOARD (student-side) */ + .parent { text-align: left; } .parent h1 { text-align: center; margin-bottom: 1.5rem; clear: both; } -.parent h2 { margin: 2rem 0 0.75rem; font-size: 1.3rem; border-bottom: 2px solid #e8e2d0; padding-bottom: 0.3rem; } +.parent h2 { + margin: 2rem 0 .75rem; font-size: 1.2rem; + border-bottom: 2px solid var(--border); padding-bottom: .4rem; font-weight: 700; +} + +/* ============================================================ PIN GATE (student side) */ #pin-gate { text-align: center; } #pin-form input { - font-size: 1.5rem; text-align: center; width: 180px; padding: 0.5rem; - border: 2px solid var(--accent); border-radius: 10px; margin-right: 0.5rem; + font-size: 1.5rem; text-align: center; width: 180px; padding: .55rem; + border: 2px solid var(--accent); border-radius: var(--radius-sm); + margin-right: .5rem; font-family: inherit; + transition: box-shadow .15s; } -#pin-form button, .inline-form button, #list-form button, .row-actions button, .toggle-btns button { - font-size: 1rem; font-family: inherit; font-weight: 700; - background: var(--accent); color: #fff; border: none; - border-radius: 10px; padding: 0.6rem 1.2rem; cursor: pointer; -} -button.secondary { background: var(--muted); } -button.danger { background: var(--bad); } +#pin-form input:focus { outline: none; box-shadow: 0 0 0 3px rgba(79,126,248,.2); } -.inline-form { display: flex; gap: 0.5rem; margin: 0.75rem 0; flex-wrap: wrap; } -.inline-form input, .inline-form select, #list-form input, #list-form textarea { - font-size: 1rem; font-family: inherit; padding: 0.55rem; - border: 2px solid #d8d2c0; border-radius: 10px; +/* ============================================================ SHARED BUTTON SYSTEM */ + +#pin-form button, +.inline-form button, +#list-form button, +.row-actions button, +.toggle-btns button { + font-size: .9rem; font-family: inherit; font-weight: 600; + background: var(--accent); color: #fff; border: none; + border-radius: var(--radius-sm); padding: .55rem 1.1rem; cursor: pointer; + transition: background .15s, transform .1s, box-shadow .15s; +} +#pin-form button:hover, +.inline-form button:hover, +#list-form button:hover { background: var(--accent-dark); } + +button.secondary { + background: #f3f4f6 !important; + color: var(--ink-2) !important; + border: 1.5px solid var(--border) !important; +} +button.secondary:hover { background: #e5e7eb !important; border-color: var(--border-hover) !important; } +button.danger { background: var(--bad) !important; color: #fff !important; border: none !important; } +button.danger:hover { background: #b91c1c !important; } + +/* ============================================================ INLINE FORMS */ + +.inline-form { display: flex; gap: .5rem; margin: .75rem 0; flex-wrap: wrap; } +.inline-form input, +.inline-form select, +#list-form input, +#list-form textarea { + font-size: .9rem; font-family: inherit; padding: .5rem .7rem; + border: 1.5px solid var(--border); border-radius: var(--radius-sm); + background: var(--card); color: var(--ink); + transition: border-color .15s, box-shadow .15s; +} +.inline-form input:focus, +.inline-form select:focus, +#list-form input:focus, +#list-form textarea:focus { + outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,126,248,.12); } .inline-form input { flex: 1; min-width: 140px; } +/* ============================================================ ITEM ROWS */ + .item-row { - display: flex; align-items: center; gap: 0.6rem; - background: var(--card); border-radius: 10px; padding: 0.45rem 0.75rem; margin: 0.2rem 0; - box-shadow: 0 1px 4px rgba(45, 49, 66, 0.06); + display: flex; align-items: center; gap: .6rem; + background: var(--card); border-radius: var(--radius-sm); + padding: .5rem .85rem; margin: .2rem 0; + border: 1.5px solid var(--border); + transition: border-color .15s, box-shadow .15s; flex-wrap: wrap; } +.item-row:hover { border-color: var(--border-hover); box-shadow: var(--shadow-xs); } .item-row .grow { flex: 1; min-width: 120px; } -.muted-label { font-size: 0.82rem; color: var(--muted); white-space: nowrap; } -.item-row select { padding: 0.4rem; border-radius: 8px; border: 2px solid #d8d2c0; font-family: inherit; } -.item-row button { - font-size: 0.9rem; font-family: inherit; border: none; border-radius: 8px; - padding: 0.4rem 0.9rem; cursor: pointer; color: #fff; background: var(--accent); +.muted-label { font-size: .8rem; color: var(--muted); white-space: nowrap; } +.item-row select { + padding: .35rem .5rem; border-radius: 6px; + border: 1.5px solid var(--border); font-family: inherit; font-size: .85rem; } +.item-row button { + font-size: .82rem; font-family: inherit; border: none; border-radius: 6px; + padding: .35rem .8rem; cursor: pointer; color: #fff; background: var(--accent); + transition: background .15s; +} +.item-row button:hover { background: var(--accent-dark); } -#list-form { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.75rem; } -#list-editor-details summary { cursor: pointer; font-weight: 700; margin: 0.75rem 0; } -.row-actions { display: flex; gap: 0.5rem; } +/* ============================================================ LIST FORMS */ + +#list-form { display: flex; flex-direction: column; gap: .75rem; margin-top: .75rem; } +#list-editor-details summary { cursor: pointer; font-weight: 700; margin: .75rem 0; } +.row-actions { display: flex; gap: .4rem; } + +/* ============================================================ GRADEBOOK RESULTS */ .results-student { margin-bottom: 1.25rem; } -.results-student h3 { margin-bottom: 0.4rem; } +.results-student h3 { margin-bottom: .4rem; font-size: 1rem; } table.results { width: 100%; border-collapse: collapse; background: var(--card); - border-radius: 12px; overflow: hidden; font-size: 0.95rem; + border-radius: var(--radius); overflow: hidden; font-size: .9rem; + border: 1.5px solid var(--border); } -table.results th, table.results td { padding: 0.5rem 0.75rem; text-align: left; } -table.results th { background: #efe9d8; } -table.results tr:nth-child(even) td { background: #faf7ee; } +table.results th, table.results td { padding: .55rem .85rem; text-align: left; } +table.results th { background: var(--card-2); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } +table.results tr:not(:last-child) td { border-bottom: 1px solid var(--border); } .score-good { color: var(--good); font-weight: 700; } -.score-bad { color: var(--bad); font-weight: 700; } +.score-bad { color: var(--bad); font-weight: 700; } .link-btn { - display: inline-block; background: none; border: none; color: var(--muted); - text-decoration: underline; cursor: pointer; font-size: 1rem; + display: inline-block; background: none; border: none; + color: var(--accent); text-decoration: underline; cursor: pointer; font-size: .9rem; } -/* ---------- kid home tabs ---------- */ -.kid-nav { display: flex; gap: 0.5rem; justify-content: center; margin: 0.5rem 0 1.5rem; clear: both; flex-wrap: wrap; } +/* ============================================================ KID NAV PILLS */ + +.kid-nav { + display: flex; gap: .4rem; justify-content: center; + margin: .5rem 0 1.5rem; clear: both; flex-wrap: wrap; +} .nav-pill { - font-family: inherit; font-size: 1rem; font-weight: 700; - background: var(--card); color: var(--muted); border: 2px solid #e8e2d0; - border-radius: 999px; padding: 0.5rem 1.1rem; cursor: pointer; + font-family: var(--font-kid); + font-size: .95rem; font-weight: 700; + background: rgba(255,255,255,.1); color: rgba(255,255,255,.6); + border: 1.5px solid rgba(255,255,255,.18); + border-radius: 999px; padding: .45rem 1.1rem; cursor: pointer; + transition: background .15s, color .15s, border-color .15s; } -.nav-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); } +.nav-pill.active { + background: var(--accent); color: #fff; border-color: var(--accent); +} + .tab-panel { text-align: left; } -@keyframes tab-slide-right { - from { transform: translateX(56px); opacity: 0; } - to { transform: translateX(0); opacity: 1; } -} -@keyframes tab-slide-left { - from { transform: translateX(-56px); opacity: 0; } - to { transform: translateX(0); opacity: 1; } -} -.tab-panel.sliding-right { animation: tab-slide-right 0.26s ease; } -.tab-panel.sliding-left { animation: tab-slide-left 0.26s ease; } +@keyframes tab-slide-right { from { transform: translateX(48px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } +@keyframes tab-slide-left { from { transform: translateX(-48px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } +.tab-panel.sliding-right { animation: tab-slide-right .24s ease; } +.tab-panel.sliding-left { animation: tab-slide-left .24s ease; } + +/* ============================================================ TODAY ROWS */ -/* ---------- today list / item rows (shared by agenda + course pages) ---------- */ .today-row { - display: flex; align-items: center; gap: 0.85rem; width: 100%; - background: var(--card); border: none; border-radius: 14px; - padding: 0.9rem 1.1rem; margin: 0.5rem 0; cursor: pointer; text-align: left; - font-family: inherit; box-shadow: 0 2px 8px rgba(45, 49, 66, 0.06); + display: flex; align-items: center; gap: .85rem; width: 100%; + background: var(--card); border: 1.5px solid var(--border); + border-radius: var(--radius); padding: 1rem 1.15rem; + margin: .45rem 0; cursor: pointer; text-align: left; + font-family: inherit; + transition: border-color .15s, box-shadow .15s, transform .1s; } -.today-row .row-check { font-size: 1.4rem; flex-shrink: 0; } -.today-row .row-title { flex: 1; font-size: 1.05rem; font-weight: 700; color: var(--ink); } -.today-row .row-title small { display: block; font-weight: 400; color: var(--muted); font-size: 0.85rem; } -.today-row .row-badge { font-size: 0.85rem; color: var(--muted); font-weight: 700; white-space: nowrap; } +.today-row:hover { + border-color: var(--accent); box-shadow: var(--shadow-sm); + transform: translateX(2px); +} +.today-row .row-check { font-size: 1.35rem; flex-shrink: 0; } +.today-row .row-title { flex: 1; font-size: 1rem; font-weight: 700; color: var(--ink); } +.today-row .row-title small { display: block; font-weight: 400; color: var(--muted); font-size: .82rem; } +.today-row .row-badge { font-size: .82rem; color: var(--muted); font-weight: 600; white-space: nowrap; } -/* ---------- course cards ---------- */ -.course-cards { display: flex; flex-direction: column; gap: 0.75rem; } +/* ============================================================ COURSE CARDS */ + +.course-cards { display: flex; flex-direction: column; gap: .65rem; } .course-card { - display: flex; flex-direction: column; gap: 0.4rem; text-align: left; - background: var(--card); border: none; border-left: 6px solid var(--accent); - border-radius: 14px; padding: 1rem 1.2rem; cursor: pointer; font-family: inherit; - box-shadow: 0 2px 8px rgba(45, 49, 66, 0.06); + display: flex; flex-direction: column; gap: .35rem; text-align: left; + background: var(--card); border: 1.5px solid var(--border); + border-left: 5px solid var(--accent); + border-radius: var(--radius); padding: 1rem 1.2rem; cursor: pointer; font-family: inherit; + transition: border-color .15s, box-shadow .15s, transform .1s; } -.course-card strong { font-size: 1.15rem; } -.course-subject { color: var(--muted); font-size: 0.9rem; } -.course-pct { font-size: 0.85rem; color: var(--muted); } -.progress-track.small { height: 8px; margin: 0.2rem 0; } +.course-card:hover { box-shadow: var(--shadow); transform: translateX(2px); } +.course-card strong { font-size: 1.1rem; } +.course-subject { color: var(--muted); font-size: .875rem; } +.course-pct { font-size: .82rem; color: var(--muted); } + +/* ============================================================ UNIT BLOCKS (shared) */ -/* student course unit cards + gradebook unit cards (shared button-toggle style) */ #course-units .unit-block, .gb-units .unit-block { - background: var(--card); border-radius: 16px; margin: 0.75rem 0; - box-shadow: 0 2px 10px rgba(45, 49, 66, 0.08); overflow: hidden; + background: var(--card); border-radius: var(--radius); margin: .65rem 0; + border: 1.5px solid var(--border); overflow: hidden; + transition: border-color .15s; } + #course-units .unit-toggle, .gb-units .unit-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; padding: 1rem 1.1rem; - cursor: pointer; font-family: inherit; text-align: left; gap: 0.75rem; - border-bottom: 2px solid transparent; transition: border-color 0.15s; + cursor: pointer; font-family: inherit; text-align: left; gap: .75rem; + border-bottom: 2px solid transparent; transition: border-color .15s; } + +#course-units .unit-block.open, +.gb-units .unit-block.open { border-color: var(--accent); } + #course-units .unit-block.open .unit-toggle, -.gb-units .unit-block.open .unit-toggle { border-bottom-color: var(--accent); } +.gb-units .unit-block.open .unit-toggle { border-bottom-color: rgba(79,126,248,.2); } + #course-units .unit-toggle-left, -.gb-units .unit-toggle-left { - display: flex; align-items: center; gap: 0.6rem; flex: 1; min-width: 0; -} +.gb-units .unit-toggle-left { display: flex; align-items: center; gap: .6rem; flex: 1; min-width: 0; } + #course-units .unit-num-badge, .gb-units .unit-num-badge { - font-size: 0.72rem; font-weight: 700; text-transform: uppercase; - letter-spacing: 0.05em; background: var(--accent); color: #fff; - padding: 0.2em 0.55em; border-radius: 6px; flex-shrink: 0; + font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; + background: var(--accent); color: #fff; + padding: .2em .6em; border-radius: 6px; flex-shrink: 0; } + #course-units .unit-title-text, .gb-units .unit-title-text { - font-size: 1.05rem; font-weight: 700; color: var(--ink); - white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -} -#course-units .unit-toggle-right, -.gb-units .unit-toggle-right { - display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; -} -#course-units .unit-done-count { font-size: 0.82rem; font-weight: 700; color: var(--muted); white-space: nowrap; } -#course-units .unit-mini-progress { width: 56px; height: 6px; margin: 0; } -#course-units .unit-chevron, -.gb-units .unit-chevron { - font-size: 1.15rem; color: var(--muted); display: inline-block; - transition: transform 0.22s ease; -} -#course-units .unit-block:not(.open) .unit-chevron, -.gb-units .unit-block:not(.open) .unit-chevron { transform: rotate(-90deg); } -#course-units .unit-items-list, -.gb-units .unit-items-list { - max-height: 0; overflow: hidden; - transition: max-height 0.3s ease, padding 0.3s ease; - padding: 0 0.85rem; -} -#course-units .unit-block.open .unit-items-list, -.gb-units .unit-block.open .unit-items-list { - max-height: 4000px; padding: 0.1rem 0.85rem 0.85rem; -} -.gb-units .unit-item-count { font-size: 0.82rem; font-weight: 700; color: var(--muted); white-space: nowrap; } -.gb-overall { margin-top: 1.25rem; } -.gb-overall strong { display: block; font-size: 0.9rem; color: var(--muted); margin-bottom: 0.4rem; } - -/* admin course unit cards */ -#cd-units .unit-block { - background: var(--card); border-radius: 16px; margin: 0.75rem 0; padding: 0; - box-shadow: 0 2px 10px rgba(45, 49, 66, 0.08); overflow: hidden; -} -#cd-units .unit-toggle { - display: flex; align-items: center; justify-content: space-between; - padding: 0.85rem 1rem; cursor: pointer; gap: 0.75rem; user-select: none; - border-bottom: 2px solid transparent; transition: border-color 0.15s; -} -#cd-units .unit-block.open .unit-toggle { border-bottom-color: var(--accent); } -#cd-units .unit-toggle-left { - display: flex; align-items: center; gap: 0.6rem; flex: 1; min-width: 0; -} -#cd-units .unit-num-badge { - font-size: 0.72rem; font-weight: 700; text-transform: uppercase; - letter-spacing: 0.05em; background: var(--accent); color: #fff; - padding: 0.2em 0.55em; border-radius: 6px; flex-shrink: 0; -} -#cd-units .unit-title-text { font-size: 1rem; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -#cd-units .unit-toggle-right { - display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; + +#course-units .unit-toggle-right, +.gb-units .unit-toggle-right { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; } + +#course-units .unit-done-count { font-size: .8rem; font-weight: 600; color: var(--muted); white-space: nowrap; } +#course-units .unit-mini-progress { width: 56px; height: 5px; margin: 0; } + +#course-units .unit-chevron, +.gb-units .unit-chevron { + font-size: 1.1rem; color: var(--muted); display: inline-block; + transition: transform .22s ease; } -#cd-units .unit-item-count { - font-size: 0.82rem; font-weight: 700; color: var(--muted); white-space: nowrap; +#course-units .unit-block:not(.open) .unit-chevron, +.gb-units .unit-block:not(.open) .unit-chevron { transform: rotate(-90deg); } + +#course-units .unit-items-list, +.gb-units .unit-items-list { + max-height: 0; overflow: hidden; + transition: max-height .3s ease, padding .3s ease; + padding: 0 .85rem; } -#cd-units .unit-chevron { - font-size: 1.1rem; color: var(--muted); transition: transform 0.22s ease; +#course-units .unit-block.open .unit-items-list, +.gb-units .unit-block.open .unit-items-list { max-height: 4000px; padding: .15rem .85rem .85rem; } + +.gb-units .unit-item-count { font-size: .8rem; font-weight: 600; color: var(--muted); white-space: nowrap; } +.gb-overall { margin-top: 1.25rem; } +.gb-overall strong { display: block; font-size: .875rem; color: var(--muted); margin-bottom: .4rem; } + +/* admin course unit blocks */ +#cd-units .unit-block { + background: var(--card); border-radius: var(--radius); margin: .65rem 0; padding: 0; + border: 1.5px solid var(--border); overflow: hidden; + transition: border-color .15s; } +#cd-units .unit-block.open { border-color: var(--accent); } + +#cd-units .unit-toggle { + display: flex; align-items: center; justify-content: space-between; + padding: .85rem 1rem; cursor: pointer; gap: .75rem; user-select: none; + border-bottom: 2px solid transparent; transition: border-color .15s; +} +#cd-units .unit-block.open .unit-toggle { border-bottom-color: rgba(79,126,248,.2); } + +#cd-units .unit-toggle-left { display: flex; align-items: center; gap: .6rem; flex: 1; min-width: 0; } +#cd-units .unit-num-badge { + font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; + background: var(--accent); color: #fff; padding: .2em .6em; border-radius: 6px; flex-shrink: 0; +} +#cd-units .unit-title-text { font-size: .95rem; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } +#cd-units .unit-toggle-right { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; } +#cd-units .unit-item-count { font-size: .8rem; font-weight: 600; color: var(--muted); white-space: nowrap; } +#cd-units .unit-chevron { font-size: 1.05rem; color: var(--muted); transition: transform .22s ease; } #cd-units .unit-block:not(.open) .unit-chevron { transform: rotate(-90deg); } #cd-units .unit-items-list { max-height: 0; overflow: hidden; - transition: max-height 0.3s ease, padding 0.3s ease; - padding: 0 0.85rem; -} -#cd-units .unit-block.open .unit-items-list { - max-height: 4000px; padding: 0.5rem 0.85rem 0.85rem; + transition: max-height .3s ease, padding .3s ease; + padding: 0 .85rem; } +#cd-units .unit-block.open .unit-items-list { max-height: 4000px; padding: .5rem .85rem .85rem; } + +/* ============================================================ ITEM VIEWERS */ -/* ---------- item viewers (lesson/assignment/quiz) ---------- */ .item-card { - background: var(--card); border-radius: var(--radius); padding: 1.75rem 1.5rem; - box-shadow: 0 4px 12px rgba(45, 49, 66, 0.08); text-align: left; + background: var(--card); border-radius: var(--radius); + padding: 2rem 1.75rem; box-shadow: var(--shadow); + border: 1.5px solid var(--border); text-align: left; } -.item-kicker { color: var(--muted); font-size: 0.9rem; margin-bottom: 0.25rem; } -.item-card h1 { font-size: 1.5rem; margin-bottom: 1rem; } -.lesson-body { font-size: 1.05rem; line-height: 1.6; margin-bottom: 1.5rem; } -.lesson-body img, .lesson-body iframe { max-width: 100%; border-radius: 10px; } -.lesson-body h1, .lesson-body h2, .lesson-body h3 { font-weight: 700; margin: 1.1rem 0 0.4rem; line-height: 1.3; } -.lesson-body h1 { font-size: 1.35rem; } -.lesson-body h2 { font-size: 1.15rem; } +.item-kicker { color: var(--muted); font-size: .82rem; margin-bottom: .25rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; } +.item-card h1 { font-size: 1.5rem; margin-bottom: 1rem; font-weight: 800; } + +.lesson-body { font-size: 1rem; line-height: 1.7; margin-bottom: 1.5rem; } +.lesson-body img, .lesson-body iframe { max-width: 100%; border-radius: var(--radius-sm); } +.lesson-body h1, .lesson-body h2, .lesson-body h3 { font-weight: 700; margin: 1.1rem 0 .4rem; line-height: 1.3; } +.lesson-body h1 { font-size: 1.3rem; } +.lesson-body h2 { font-size: 1.1rem; } .lesson-body h3 { font-size: 1rem; } -.lesson-body p { margin-bottom: 0.75rem; } -.lesson-body ul, .lesson-body ol { padding-left: 1.5rem; margin-bottom: 0.75rem; } -.lesson-body li { margin-bottom: 0.25rem; } -.lesson-body blockquote { border-left: 3px solid var(--accent); padding-left: 1rem; margin: 0.75rem 0; color: var(--muted); font-style: italic; } -.lesson-body a { color: var(--accent); text-decoration: underline; } -.lesson-body hr { border: none; border-top: 1px solid #ddd; margin: 1rem 0; } -.next-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; } -.points-label { color: var(--muted); font-weight: 700; margin-bottom: 0.75rem; } +.lesson-body p { margin-bottom: .75rem; } +.lesson-body ul, .lesson-body ol { padding-left: 1.5rem; margin-bottom: .75rem; } +.lesson-body li { margin-bottom: .25rem; } +.lesson-body blockquote { border-left: 3px solid var(--accent); padding-left: 1rem; margin: .75rem 0; color: var(--muted); font-style: italic; } +.lesson-body a { color: var(--accent); text-decoration: underline; } +.lesson-body hr { border: none; border-top: 1.5px solid var(--border); margin: 1rem 0; } + +.next-actions { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; } +.points-label { color: var(--muted); font-weight: 600; margin-bottom: .75rem; font-size: .9rem; } + .status-banner { - margin-top: 1rem; padding: 0.75rem 1rem; border-radius: 12px; - background: #fdf1d6; font-weight: 700; + margin-top: 1rem; padding: .75rem 1rem; border-radius: var(--radius-sm); + background: var(--gold-bg); color: #92400e; font-weight: 600; } .status-banner.good { background: var(--good-bg); color: var(--good); } +.status-banner.bad { background: var(--bad-bg); color: var(--bad); border-radius: var(--radius-sm); padding: .75rem 1rem; margin: .75rem 0; } -/* ---------- quiz ---------- */ -.quiz-question { margin-bottom: 1.25rem; } -.q-prompt { font-weight: 700; margin-bottom: 0.5rem; font-size: 1.05rem; } -.quiz-choice { display: block; margin: 0.35rem 0; font-size: 1rem; cursor: pointer; } -.quiz-choice input { margin-right: 0.5rem; } +/* ============================================================ QUIZ */ + +.quiz-question { margin-bottom: 1.4rem; } +.q-prompt { font-weight: 700; margin-bottom: .55rem; font-size: 1rem; } +.quiz-choice { display: block; margin: .35rem 0; font-size: .95rem; cursor: pointer; } +.quiz-choice input { margin-right: .5rem; accent-color: var(--accent); } .quiz-short-input { - width: 100%; max-width: 320px; font-size: 1rem; font-family: inherit; - padding: 0.5rem; border: 2px solid #d8d2c0; border-radius: 10px; + width: 100%; max-width: 320px; font-size: .95rem; font-family: inherit; + padding: .5rem .7rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm); + transition: border-color .15s, box-shadow .15s; } -.quiz-question.review .q-your-answer { color: var(--muted); } +.quiz-short-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,126,248,.12); } +.quiz-question.review .q-your-answer { color: var(--muted); } .quiz-question.review .q-correct-answer { color: var(--good); font-weight: 700; } -/* ---------- flashcards ---------- */ +/* ============================================================ FLASHCARDS */ + .flip-card { text-align: center; } .flash-face { font-size: 1.6rem; font-weight: 700; padding: 2rem 1rem; min-height: 3rem; } #flash-back { color: var(--accent-dark); } -.flash-grade-row { display: flex; gap: 0.75rem; justify-content: center; margin-top: 1rem; } +.flash-grade-row { display: flex; gap: .75rem; justify-content: center; margin-top: 1rem; } .flash-grade-row[hidden] { display: none; } .grade-btn { - font-size: 1.1rem; font-weight: 700; font-family: inherit; border: none; - border-radius: 12px; padding: 0.75rem 1.5rem; cursor: pointer; color: #fff; + font-size: 1.05rem; font-weight: 700; font-family: inherit; border: none; + border-radius: var(--radius-sm); padding: .75rem 1.75rem; cursor: pointer; color: #fff; + transition: transform .1s, box-shadow .1s; } -.grade-btn.again { background: var(--bad); } -.grade-btn.got-it { background: var(--good); } +.grade-btn:active { transform: scale(.96); } +.grade-btn.again { background: var(--bad); box-shadow: 0 3px 0 #b91c1c; } +.grade-btn.got-it { background: var(--good); box-shadow: 0 3px 0 #15803d; } + @keyframes card-flash-correct { 0% { background: var(--card); } - 30% { background: color-mix(in srgb, var(--good) 25%, var(--card)); } + 30% { background: color-mix(in srgb, var(--good) 20%, var(--card)); } 100% { background: var(--card); } } @keyframes card-flash-wrong { 0% { background: var(--card); } - 30% { background: color-mix(in srgb, var(--bad) 20%, var(--card)); } + 30% { background: color-mix(in srgb, var(--bad) 15%, var(--card)); } 100% { background: var(--card); } } -.word-card.flash-correct { animation: card-flash-correct 0.55s ease; } -.word-card.flash-wrong { animation: card-flash-wrong 0.45s ease; } -@keyframes flash-flip-out { - from { transform: perspective(800px) rotateY(0deg); } - to { transform: perspective(800px) rotateY(90deg); } -} -@keyframes flash-flip-in { - from { transform: perspective(800px) rotateY(-90deg); } - to { transform: perspective(800px) rotateY(0deg); } -} -#flash-card.flip-out { animation: flash-flip-out 0.18s ease-in forwards; } -#flash-card.flip-in { animation: flash-flip-in 0.18s ease-out forwards; } +.word-card.flash-correct { animation: card-flash-correct .55s ease; } +.word-card.flash-wrong { animation: card-flash-wrong .45s ease; } + +@keyframes flash-flip-out { from { transform: perspective(800px) rotateY(0deg); } to { transform: perspective(800px) rotateY(90deg); } } +@keyframes flash-flip-in { from { transform: perspective(800px) rotateY(-90deg); } to { transform: perspective(800px) rotateY(0deg); } } +#flash-card.flip-out { animation: flash-flip-out .18s ease-in forwards; } +#flash-card.flip-in { animation: flash-flip-in .18s ease-out forwards; } + +/* ============================================================ ADMIN CONSOLE */ -/* ---------- admin console ---------- */ .admin-header { - display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; - background: var(--card); padding: 1rem 1.5rem; box-shadow: 0 2px 8px rgba(45, 49, 66, 0.06); + display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; + background: var(--card); + padding: .5rem 1.5rem; + min-height: 52px; + border-bottom: 1.5px solid var(--border); + position: sticky; top: 0; z-index: 50; + row-gap: .25rem; } -.admin-logo { font-size: 1.3rem; font-weight: 800; color: var(--ink); text-decoration: none; } -.admin-nav { display: flex; gap: 0.4rem; flex-wrap: wrap; } -.admin-main { max-width: 1400px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; } -.admin-main h1 { margin-bottom: 1rem; clear: both; } -.admin-main h2 { margin: 1.5rem 0 0.5rem; font-size: 1.15rem; } + +.admin-logo { + font-size: 1.1rem; font-weight: 800; color: var(--ink); + text-decoration: none; letter-spacing: -.01em; + display: flex; align-items: center; gap: .5rem; +} +.admin-logo::before { content: '🏫'; font-size: 1.3rem; } + +.admin-nav { display: flex; gap: .25rem; flex-wrap: wrap; } + +.admin-nav button, +.nav-pill { + font-family: inherit; font-size: .82rem; font-weight: 600; + background: transparent; color: var(--muted); + border: none; border-radius: 8px; + padding: .45rem .9rem; cursor: pointer; + transition: background .15s, color .15s; +} +.admin-nav button:hover, +.nav-pill:hover { background: var(--accent-light); color: var(--accent-dark); } +.admin-nav button.active, +.nav-pill.active { background: var(--accent-light); color: var(--accent); font-weight: 700; } + +.admin-main { max-width: 1400px; margin: 0 auto; padding: 1.75rem 1.5rem 5rem; } +.admin-main h1 { margin-bottom: 1rem; clear: both; font-size: 1.4rem; font-weight: 800; } +.admin-main h2 { margin: 1.5rem 0 .5rem; font-size: 1rem; font-weight: 700; color: var(--ink-2); } .panel { text-align: left; } -/* ---------- parent dashboard card (on student home) ---------- */ +/* ============================================================ PARENT DASH CARD (student home) */ + .parent-dash-card { - display: inline-flex; align-items: center; gap: 0.6rem; - background: rgba(255,255,255,0.12); - color: rgba(255,255,255,0.7); - border: 1.5px solid rgba(255,255,255,0.18); - border-radius: 14px; - padding: 0.65rem 1.25rem; - font-size: 0.95rem; font-weight: 600; + display: inline-flex; align-items: center; gap: .6rem; + background: rgba(255,255,255,.1); + color: rgba(255,255,255,.7); + border: 1.5px solid rgba(255,255,255,.18); + border-radius: var(--radius); + padding: .65rem 1.25rem; + font-size: .9rem; font-weight: 600; text-decoration: none; - backdrop-filter: blur(8px); - transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.15s; - cursor: pointer; - position: relative; z-index: 1; + backdrop-filter: blur(10px); + transition: background .18s, color .18s, border-color .18s, transform .15s; + cursor: pointer; position: relative; z-index: 1; } .parent-dash-card:hover { - background: rgba(255,255,255,0.22); - color: #fff; - border-color: rgba(255,255,255,0.35); - transform: translateY(-2px); + background: rgba(255,255,255,.2); color: #fff; + border-color: rgba(255,255,255,.35); transform: translateY(-2px); } -/* ---------- filter bar ---------- */ -.filter-bar { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; } +/* ============================================================ FILTER BAR */ + +.filter-bar { display: flex; gap: .5rem; align-items: center; margin-bottom: .75rem; } .filter-bar input[type="search"] { - flex: 1; font-family: inherit; font-size: 0.95rem; - padding: 0.4rem 0.7rem; border: 2px solid #d8d2c0; border-radius: 10px; + flex: 1; font-family: inherit; font-size: .9rem; + padding: .45rem .75rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm); + transition: border-color .15s, box-shadow .15s; } +.filter-bar input[type="search"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,126,248,.1); } -/* ---------- mastery progress ---------- */ -.mastery-stat { font-size: 0.85rem; color: var(--muted); display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; } -.mastery-bar { display: inline-block; width: 70px; height: 7px; background: #e8e2d0; border-radius: 4px; overflow: hidden; flex-shrink: 0; } -.mastery-fill { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width 0.3s; } +/* ============================================================ MASTERY PROGRESS */ + +.mastery-stat { font-size: .82rem; color: var(--muted); display: flex; align-items: center; gap: .4rem; white-space: nowrap; } +.mastery-bar { display: inline-block; width: 68px; height: 6px; background: var(--border); border-radius: 4px; overflow: hidden; flex-shrink: 0; } +.mastery-fill { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width .3s; } + +/* ============================================================ ASSIGN POPUP */ -/* ---------- assign popup ---------- */ #assign-popup { position: absolute; z-index: 200; - background: var(--card); border: 2px solid #d8d2c0; border-radius: 12px; - padding: 0.6rem; box-shadow: 0 4px 18px rgba(0,0,0,0.15); + background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius); + padding: .7rem; box-shadow: var(--shadow-md); min-width: 160px; } -.assign-popup-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0 0 0.4rem; } -#assign-popup-students { display: flex; flex-direction: column; gap: 0.3rem; } +.assign-popup-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 .4rem; } +#assign-popup-students { display: flex; flex-direction: column; gap: .3rem; } .assign-popup-student { - font-size: 0.95rem; font-family: inherit; font-weight: 600; - background: #f5f1e8; color: var(--ink); border: none; - border-radius: 8px; padding: 0.45rem 0.8rem; cursor: pointer; text-align: left; + font-size: .9rem; font-family: inherit; font-weight: 600; + background: var(--card-2); color: var(--ink); border: none; + border-radius: 8px; padding: .45rem .85rem; cursor: pointer; text-align: left; + transition: background .12s, color .12s; } .assign-popup-student:hover { background: var(--accent); color: #fff; } -/* ---------- hidden list items ---------- */ -.list-hidden-item { opacity: 0.45; } +/* ============================================================ HIDDEN ITEMS */ -/* ---------- toggle button rows (new/bulk import) ---------- */ -.toggle-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; } -.toggle-btns button.active { background: var(--accent) !important; color: #fff !important; } -.section-form-title { font-size: 1rem; font-weight: 700; margin: 0 0 0; color: var(--ink); } +.list-hidden-item { opacity: .4; } -/* 2-column layout for wide screens */ +/* ============================================================ TOGGLE BUTTON ROWS */ + +.toggle-btns { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .75rem; } +.toggle-btns button.active { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; } +.section-form-title { font-size: .9rem; font-weight: 700; margin: 0 0 0; color: var(--ink); } + +/* 2-column layout */ .panel-cols { display: flex; flex-direction: column; gap: 1.5rem; } .panel-col { min-width: 0; } @media (min-width: 1100px) { - .panel-cols { flex-direction: row; align-items: start; gap: 2.5rem; } + .panel-cols { flex-direction: row; align-items: start; gap: 2rem; } .panel-col { flex: 1; } .panel-col:first-child { flex: 1.2; } } +/* ============================================================ ADMIN CARD */ + .admin-card { - background: var(--card); border-radius: 14px; padding: 1.25rem; - margin: 0.75rem 0; box-shadow: 0 2px 8px rgba(45, 49, 66, 0.06); - display: flex; flex-direction: column; gap: 0.75rem; + background: var(--card); border-radius: var(--radius); + padding: 1.25rem; margin: .65rem 0; + border: 1.5px solid var(--border); + display: flex; flex-direction: column; gap: .7rem; } -.admin-card label { display: flex; flex-direction: column; gap: 0.3rem; font-weight: 700; font-size: 0.9rem; } -.admin-card input, .admin-card select, .admin-card textarea { - font-family: inherit; font-size: 1rem; padding: 0.5rem; border: 2px solid #d8d2c0; border-radius: 10px; font-weight: 400; +.admin-card label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .82rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; } +.admin-card input, +.admin-card select, +.admin-card textarea { + font-family: inherit; font-size: .95rem; padding: .5rem .7rem; + border: 1.5px solid var(--border); border-radius: var(--radius-sm); + background: var(--card); color: var(--ink); font-weight: 400; + transition: border-color .15s, box-shadow .15s; } +.admin-card input:focus, +.admin-card select:focus, +.admin-card textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,126,248,.1); } -.checkbox-label { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 400; margin-right: 1rem; } -/* admin-card sets label { flex-direction: column } — override for checkboxes */ -.admin-card .checkbox-label { flex-direction: row; font-size: 1rem; } -.color-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; flex-shrink: 0; } -.archived-badge { background: #e8e2d0; color: var(--muted); font-size: 0.75rem; padding: 0.2rem 0.5rem; border-radius: 999px; } +.checkbox-label { display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; margin-right: 1rem; font-size: .9rem; text-transform: none; letter-spacing: 0; } +.admin-card .checkbox-label { flex-direction: row; } +.color-dot { width: 13px; height: 13px; border-radius: 50%; display: inline-block; flex-shrink: 0; } +.archived-badge { background: var(--card-2); color: var(--muted); font-size: .72rem; padding: .15rem .5rem; border-radius: 999px; border: 1.5px solid var(--border); } -/* ---------- list/deck groups ---------- */ -.list-group { margin-bottom: 1rem; } +/* ============================================================ LIST / DECK GROUPS */ + +.list-group { margin-bottom: .75rem; } .list-group-header { - display: flex; align-items: center; gap: 0.5rem; - font-size: 0.85rem; font-weight: 700; text-transform: uppercase; - letter-spacing: 0.07em; color: #5a5240; - background: #e8e2d0; - padding: 0.55rem 0.9rem; - border-radius: 8px; - margin-bottom: 0.4rem; - cursor: pointer; user-select: none; list-style: none; - transition: background 0.15s; + display: flex; align-items: center; gap: .5rem; + font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; + color: var(--muted); background: var(--card-2); + padding: .5rem .9rem; border-radius: var(--radius-sm); + margin-bottom: .4rem; cursor: pointer; user-select: none; list-style: none; + border: 1.5px solid var(--border); + transition: background .15s; } -.list-group-header:hover { background: #ddd7c6; } +.list-group-header:hover { background: #f0f3ff; border-color: var(--border-hover); } .list-group-header::-webkit-details-marker { display: none; } -.list-group-header::before { - content: '▼'; - font-size: 0.75rem; - transition: transform 0.2s; - flex-shrink: 0; -} +.list-group-header::before { content: '▼'; font-size: .65rem; transition: transform .2s; flex-shrink: 0; } .list-group:not([open]) .list-group-header::before { transform: rotate(-90deg); } -/* ---------- roster chips ---------- */ -#cd-roster { display: flex; flex-wrap: wrap; gap: 0.5rem; } +/* ============================================================ ROSTER CHIPS */ + +#cd-roster { display: flex; flex-wrap: wrap; gap: .5rem; } #cd-roster .checkbox-label { margin-right: 0; - background: #f7f2e3; border: 1.5px solid #d8d2c0; border-radius: 999px; - padding: 0.3rem 0.85rem; cursor: pointer; font-size: 0.95rem; - transition: background 0.12s, border-color 0.12s; + background: var(--card); border: 1.5px solid var(--border); + border-radius: 999px; padding: .3rem .9rem; cursor: pointer; font-size: .9rem; + transition: background .12s, border-color .12s; } -#cd-roster .checkbox-label:hover { border-color: var(--accent); } +#cd-roster .checkbox-label:hover { border-color: var(--accent); background: var(--accent-light); } + +/* ============================================================ ADMIN LIST GRIDS */ -/* ---------- admin list panels — 2-col grid on wider screens ---------- */ #course-rows, #student-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); - gap: 0.4rem; + gap: .4rem; } #course-rows .item-row, #student-rows .item-row { margin: 0; } -button.small { font-size: 0.85rem; padding: 0.4rem 0.8rem; } -button.tiny { font-size: 0.75rem; padding: 0.15rem 0.5rem; } -.hint.tiny { font-size: 0.8rem; margin: 0.25rem 0; } +button.small { font-size: .82rem !important; padding: .35rem .75rem !important; } +button.tiny { font-size: .72rem !important; padding: .15rem .5rem !important; } +.hint.tiny { font-size: .78rem; margin: .25rem 0; } -.unit-block { background: var(--card); border-radius: 14px; padding: 1rem 1.1rem; margin: 0.75rem 0; box-shadow: 0 2px 8px rgba(45, 49, 66, 0.06); } -.unit-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; } -.unit-header h3 { font-size: 1.05rem; } +/* generic unit blocks (fallback) */ +.unit-block { background: var(--card); border-radius: var(--radius); padding: 1rem 1.1rem; margin: .65rem 0; border: 1.5px solid var(--border); } +.unit-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; } +.unit-header h3 { font-size: 1rem; font-weight: 700; } + +/* ============================================================ QUIZ QUESTION ROW (admin) */ .quiz-q-row { - display: grid; grid-template-columns: 9rem 1fr 1fr 1fr 4rem auto; gap: 0.5rem; - align-items: center; margin-bottom: 0.5rem; + display: grid; grid-template-columns: 9rem 1fr 1fr 1fr 4rem auto; + gap: .5rem; align-items: center; margin-bottom: .5rem; } .quiz-q-row select, .quiz-q-row input { - font-family: inherit; font-size: 0.9rem; padding: 0.4rem; border: 2px solid #d8d2c0; border-radius: 8px; + font-family: inherit; font-size: .85rem; padding: .4rem .5rem; + border: 1.5px solid var(--border); border-radius: var(--radius-sm); } -/* ---------- planner ---------- */ +/* ============================================================ PLANNER */ + .week-label { font-weight: 700; } -/* planner week view */ -.planner-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.75rem; margin-top: 1rem; } -.planner-day { background: var(--card); border-radius: 14px; padding: 0.85rem; box-shadow: 0 2px 8px rgba(45, 49, 66, 0.06); min-height: 120px; display: flex; flex-direction: column; } -.planner-day h3 { font-size: 0.95rem; margin-bottom: 0.5rem; } + +.planner-grid { + display: grid; grid-template-columns: repeat(5, 1fr); + gap: .75rem; margin-top: 1rem; +} +.planner-day { + background: var(--card); border-radius: var(--radius); + padding: .85rem; border: 1.5px solid var(--border); + min-height: 120px; display: flex; flex-direction: column; +} +.planner-day h3 { font-size: .9rem; margin-bottom: .5rem; font-weight: 700; } .planner-day h3 small { display: block; font-weight: 400; color: var(--muted); } -/* planner month view */ .planner-grid.planner-month { display: block; } .planner-month-header { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-bottom: 3px; } -.planner-month-header div { text-align: center; font-size: 0.75rem; font-weight: 700; color: var(--muted); padding: 0.2rem 0; } +.planner-month-header div { text-align: center; font-size: .72rem; font-weight: 700; color: var(--muted); padding: .2rem 0; } .planner-month-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-bottom: 3px; } -.planner-day-compact { border-radius: 8px; padding: 0.5rem; min-height: 60px; display: flex; flex-direction: column; } -.planner-day-compact h3 { font-size: 0.75rem; margin-bottom: 0.3rem; } -.planner-day-compact .planner-task { font-size: 0.72rem; padding: 0.2rem 0.4rem; } +.planner-day-compact { border-radius: 8px; padding: .5rem; min-height: 60px; display: flex; flex-direction: column; background: var(--card); border: 1.5px solid var(--border); } +.planner-day-compact h3 { font-size: .72rem; margin-bottom: .3rem; } +.planner-day-compact .planner-task { font-size: .7rem; padding: .2rem .4rem; } .planner-day-compact .planner-task span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 90%; } -.planner-day-compact .secondary.small { font-size: 0.7rem; padding: 0.2rem 0.4rem; margin-top: 0.2rem; } +.planner-day-compact .secondary.small { font-size: .68rem; padding: .2rem .4rem; margin-top: .2rem; } -/* view toggle active state */ -.secondary.active-view { background: var(--accent); color: #fff; } -.planner-tasks { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.5rem; min-height: 1.5rem; } +.secondary.active-view { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; } + +.planner-tasks { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .5rem; min-height: 1.5rem; } .planner-task { - display: flex; justify-content: space-between; align-items: center; gap: 0.4rem; - background: #f7f2e3; border-radius: 8px; padding: 0.4rem 0.6rem; font-size: 0.85rem; + display: flex; justify-content: space-between; align-items: center; gap: .4rem; + background: var(--accent-light); border-radius: 6px; padding: .4rem .6rem; font-size: .8rem; + border: 1px solid rgba(79,126,248,.15); } -.planner-task.done { opacity: 0.55; text-decoration: line-through; } +.planner-task.done { opacity: .5; text-decoration: line-through; } .planner-task[draggable] { cursor: grab; } .planner-task[draggable]:active { cursor: grabbing; } -.planner-task.dragging { opacity: 0.35; } +.planner-task.dragging { opacity: .3; } .planner-task.insert-before { border-top: 2px solid var(--accent); } -.planner-done-btn { flex-shrink: 0; width: 20px; height: 20px; padding: 0; border: 1.5px solid #bbb; border-radius: 4px; background: transparent; color: transparent; font-size: 0.72rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s, color 0.15s, background 0.15s; } +.planner-done-btn { + flex-shrink: 0; width: 18px; height: 18px; padding: 0; + border: 1.5px solid var(--border-hover); border-radius: 4px; + background: transparent; color: transparent; font-size: .7rem; cursor: pointer; + display: flex; align-items: center; justify-content: center; + transition: border-color .15s, color .15s, background .15s; +} .planner-done-btn.is-done { border-color: var(--good); color: var(--good); background: var(--good-bg); } .planner-day.today { outline: 2px solid var(--accent); outline-offset: 2px; } .planner-day.today > h3 { color: var(--accent); } -.planner-test-badge { background: color-mix(in srgb, var(--accent) 18%, var(--card)); border-left: 3px solid var(--accent); font-size: 0.78rem; cursor: default; pointer-events: none; } -.planner-tasks.drop-target { - background: color-mix(in srgb, var(--accent) 12%, transparent); - border-radius: 8px; - outline: 2px dashed var(--accent); +.planner-test-badge { + background: var(--accent-light); border-left: 3px solid var(--accent); + font-size: .75rem; cursor: default; pointer-events: none; } -.add-task-form { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; } -.add-task-form select, .add-task-form input { font-size: 0.85rem; padding: 0.4rem; border: 2px solid #d8d2c0; border-radius: 8px; font-family: inherit; } -.or-divider { text-align: center; font-size: 0.75rem; color: var(--muted); } -.task-save-btn { font-size: 0.85rem; } +.planner-tasks.drop-target { + background: rgba(79,126,248,.08); + border-radius: 8px; outline: 2px dashed var(--accent); +} +.add-task-form { display: flex; flex-direction: column; gap: .4rem; margin-top: .5rem; } +.add-task-form select, .add-task-form input { + font-size: .82rem; padding: .4rem; border: 1.5px solid var(--border); + border-radius: var(--radius-sm); font-family: inherit; +} +.or-divider { text-align: center; font-size: .72rem; color: var(--muted); } +.task-save-btn { font-size: .82rem; } -.grade-input { width: 4.5rem; padding: 0.4rem; border: 2px solid #d8d2c0; border-radius: 8px; font-family: inherit; } -.grade-score-row { display: flex; align-items: center; gap: 0.4rem; } -.grade-max-label { font-size: 0.9rem; font-weight: 600; color: var(--ink); white-space: nowrap; } +.grade-input { width: 4.5rem; padding: .4rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; } +.grade-score-row { display: flex; align-items: center; gap: .4rem; } +.grade-max-label { font-size: .875rem; font-weight: 600; color: var(--ink); white-space: nowrap; } + +/* ============================================================ RESPONSIVE */ @media (max-width: 700px) { .planner-grid { grid-template-columns: 1fr; } @@ -843,608 +1071,582 @@ button.tiny { font-size: 0.75rem; padding: 0.15rem 0.5rem; } } @media (max-width: 480px) { - .app-title { font-size: 1.8rem; } + .app-title { font-size: 1.9rem; } .spell-input { font-size: 1.6rem; } .study-word { font-size: 2rem; } - .today-row .row-title { font-size: 0.95rem; } + .today-row .row-title { font-size: .93rem; } + .admin-header { padding: 0 1rem; gap: 1rem; } + .admin-main { padding: 1.25rem 1rem 4rem; } } -/* ---------- page scanning ---------- */ +/* ============================================================ SCAN CARD */ + .scan-card { - background: var(--card); - border: 1.5px dashed var(--accent); - border-radius: 10px; - padding: 1rem; - display: flex; - flex-direction: column; - gap: 0.5rem; + background: var(--card); border: 1.5px dashed var(--accent); + border-radius: var(--radius-sm); padding: 1rem; + display: flex; flex-direction: column; gap: .5rem; } -.scan-controls { display: flex; gap: 0.5rem; flex-wrap: wrap; } -.scan-controls button { flex: 0 0 auto; } -.scan-controls button.secondary { background: var(--muted); } -.scan-controls button:disabled { background: #ccc; cursor: not-allowed; } +.scan-controls { display: flex; gap: .5rem; flex-wrap: wrap; } +.scan-controls button.secondary { background: #f3f4f6 !important; color: var(--ink-2) !important; } +.scan-controls button:disabled { background: #e5e7eb !important; color: #9ca3af !important; cursor: not-allowed; } #scan-preview { max-width: 220px; max-height: 220px; border-radius: 8px; object-fit: contain; } -/* ---------- scan config settings ---------- */ -.scan-provider-box { - border: 1px solid var(--border, #ddd); - border-radius: 8px; - padding: 0.75rem 1rem; - margin-bottom: 0.75rem; -} -.scan-provider-box legend { font-weight: 600; padding: 0 0.3rem; } -.radio-label { display: block; margin: 0.3rem 0; cursor: pointer; } -.radio-label input { margin-right: 0.4rem; } +/* ============================================================ SCAN CONFIG */ + +.scan-provider-box { border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: .75rem 1rem; margin-bottom: .75rem; } +.scan-provider-box legend { font-weight: 600; padding: 0 .3rem; font-size: .9rem; } +.radio-label { display: block; margin: .3rem 0; cursor: pointer; font-size: .9rem; } +.radio-label input { margin-right: .4rem; accent-color: var(--accent); } .toggle-label { - display: flex; align-items: center; gap: 0.65rem; - cursor: pointer; font-size: 0.95rem; user-select: none; + display: flex; align-items: center; gap: .65rem; + cursor: pointer; font-size: .9rem; user-select: none; } .toggle-label input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; } .toggle-track { flex-shrink: 0; width: 40px; height: 22px; - background: #d0ccc0; border-radius: 999px; - position: relative; transition: background 0.2s; + background: #d1d5db; border-radius: 999px; + position: relative; transition: background .2s; } .toggle-thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; - background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.2); - transition: transform 0.2s; + background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); + transition: transform .2s; } .toggle-label input:checked ~ .toggle-track { background: var(--accent); } .toggle-label input:checked ~ .toggle-track .toggle-thumb { transform: translateX(18px); } -/* ---------- new features: locked items, due dates, overdue, history, modal ---------- */ +/* ============================================================ LOCKED / DUE / MODAL */ + .today-row.locked { - opacity: 0.55; - cursor: not-allowed; - background: var(--bg); - border-color: var(--muted); + opacity: .5; cursor: not-allowed; + background: var(--card-2); border-color: var(--border); } -.due-date { color: var(--muted); font-size: 0.78rem; display: block; } +.due-date { color: var(--muted); font-size: .75rem; display: block; } td.overdue, .overdue { background: var(--bad-bg) !important; } -.attempt-history { margin: 0.75rem 0; font-size: 0.9rem; } + +.attempt-history { margin: .75rem 0; font-size: .875rem; } .attempt-history summary { cursor: pointer; color: var(--accent); } -.attempt-history table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; } -.attempt-history td { border: 1px solid #ddd; padding: 0.3rem 0.5rem; } +.attempt-history table { width: 100%; border-collapse: collapse; margin-top: .5rem; } +.attempt-history td { border: 1px solid var(--border); padding: .3rem .5rem; } + .modal { - position: fixed; inset: 0; background: rgba(0,0,0,0.45); + position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 100; + backdrop-filter: blur(4px); } .modal-box { - background: var(--card); border-radius: var(--radius); - padding: 1.5rem; max-width: 520px; width: 90%; max-height: 80vh; overflow-y: auto; + background: var(--card); border-radius: var(--radius-lg); + padding: 1.75rem; max-width: 520px; width: 92%; max-height: 80vh; overflow-y: auto; + box-shadow: var(--shadow-lg); } -.modal-box h3 { margin-bottom: 1rem; } +.modal-box h3 { margin-bottom: 1rem; font-weight: 800; } .modal-box .secondary { margin-top: 1rem; } -/* ---------- evidence forms ---------- */ -.evidence-form { margin: 0.75rem 0; border: 1.5px dashed var(--accent); border-radius: 10px; padding: 0.75rem; } -.evidence-form summary { cursor: pointer; color: var(--accent); font-weight: 600; } -.evidence-inner { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; } -.evidence-inner textarea { width: 100%; border: 1.5px solid #d8d2c0; border-radius: 8px; padding: 0.5rem; font-family: inherit; font-size: 1rem; resize: vertical; } -.evidence-photo-row { display: flex; align-items: center; gap: 0.5rem; } -.evidence-note-label select { width: 100%; padding: 0.4rem 0.6rem; border: 1.5px solid #d8d2c0; border-radius: 8px; font-family: inherit; } -.parent-comment { background: var(--good-bg); border-radius: 10px; padding: 0.75rem 1rem; margin: 0.75rem 0; color: var(--good); } -.status-banner.bad { background: var(--bad-bg); color: var(--bad); border-radius: 10px; padding: 0.75rem 1rem; margin: 0.75rem 0; } +/* ============================================================ EVIDENCE */ -/* ---------- rich text editor (lesson input) ---------- */ -.rte-label { - font-weight: 700; font-size: 0.9rem; margin-bottom: 0.3rem; +.evidence-form { margin: .75rem 0; border: 1.5px dashed var(--accent); border-radius: var(--radius-sm); padding: .75rem; } +.evidence-form summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: .9rem; } +.evidence-inner { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; } +.evidence-inner textarea { + width: 100%; border: 1.5px solid var(--border); border-radius: var(--radius-sm); + padding: .5rem; font-family: inherit; font-size: .95rem; resize: vertical; } +.evidence-photo-row { display: flex; align-items: center; gap: .5rem; } +.evidence-note-label select { width: 100%; padding: .4rem .6rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; } +.parent-comment { background: var(--good-bg); border-radius: var(--radius-sm); padding: .85rem 1rem; margin: .75rem 0; color: var(--good); border-left: 4px solid var(--good); font-size: .95rem; } + +/* ============================================================ RICH TEXT EDITOR */ + +.rte-label { font-weight: 700; font-size: .82rem; margin-bottom: .3rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); } .rte-toolbar { - display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; - padding: 0.4rem 0.6rem; - background: #f0ead8; - border: 2px solid #d8d2c0; - border-bottom: none; - border-radius: 10px 10px 0 0; + display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; + padding: .4rem .6rem; background: var(--card-2); + border: 1.5px solid var(--border); border-bottom: none; + border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .rte-btn { - font-size: 0.85rem; font-family: inherit; font-weight: 600; - background: var(--card); color: var(--ink); - border: 1.5px solid #c8c2b0; border-radius: 6px; - padding: 0.25rem 0.55rem; cursor: pointer; line-height: 1.4; + font-size: .82rem; font-family: inherit; font-weight: 600; + background: var(--card); color: var(--ink-2); + border: 1.5px solid var(--border); border-radius: 6px; + padding: .25rem .55rem; cursor: pointer; line-height: 1.4; + transition: background .12s, color .12s, border-color .12s; } .rte-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); } -.rte-sep { - display: inline-block; width: 1px; height: 1.4rem; - background: #c8c2b0; margin: 0 0.15rem; flex-shrink: 0; -} +.rte-sep { display: inline-block; width: 1px; height: 1.4rem; background: var(--border); margin: 0 .15rem; flex-shrink: 0; } .rte-editor { min-height: 200px; outline: none; cursor: text; - border: 2px solid #d8d2c0; border-radius: 0 0 10px 10px; - padding: 0.75rem; margin-bottom: 0; - font-size: 1.05rem; line-height: 1.6; - white-space: pre-wrap; + border: 1.5px solid var(--border); border-radius: 0 0 var(--radius-sm) var(--radius-sm); + padding: .75rem; margin-bottom: 0; + font-size: 1rem; line-height: 1.7; + white-space: pre-wrap; transition: border-color .15s; } .rte-editor:focus { border-color: var(--accent); } -.rte-editor:empty::before { - content: attr(data-placeholder); - color: var(--muted); pointer-events: none; white-space: pre-wrap; -} -.rte-editor h2 { font-size: 1.3rem; margin: 0.6rem 0 0.3rem; } -.rte-editor h3 { font-size: 1.1rem; margin: 0.5rem 0 0.25rem; } -.rte-editor ul, .rte-editor ol { margin: 0.4rem 0 0.4rem 1.5rem; } +.rte-editor:empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; white-space: pre-wrap; } +.rte-editor h2 { font-size: 1.25rem; margin: .6rem 0 .3rem; } +.rte-editor h3 { font-size: 1.05rem; margin: .5rem 0 .25rem; } +.rte-editor ul, .rte-editor ol { margin: .4rem 0 .4rem 1.5rem; } .rte-editor a { color: var(--accent-dark); } -.rte-editor img, .rte-editor iframe { max-width: 100%; border-radius: 10px; } +.rte-editor img, .rte-editor iframe { max-width: 100%; border-radius: var(--radius-sm); } -/* ---------- offline 3-state tasks ---------- */ -.today-row-offline { background: var(--card); border: 1.5px solid #e2dccf; border-radius: 14px; padding: 0.75rem 1rem; margin-bottom: 0.5rem; text-align: left; } -.offline-main { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } +/* ============================================================ OFFLINE TASKS */ + +.today-row-offline { background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius); padding: .75rem 1rem; margin-bottom: .5rem; text-align: left; } +.offline-main { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; } .offline-main .row-title { flex: 1; font-weight: 600; } -.offline-controls { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.5rem; } -.offline-status-btn { padding: 0.3rem 0.75rem; border: 1.5px solid var(--muted); border-radius: 20px; background: transparent; font-size: 0.85rem; cursor: pointer; } +.offline-controls { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .5rem; } +.offline-status-btn { padding: .3rem .75rem; border: 1.5px solid var(--border); border-radius: 20px; background: transparent; font-size: .82rem; cursor: pointer; transition: border-color .15s, background .15s, color .15s; } .offline-status-btn.active { border-color: var(--accent); background: var(--accent); color: #fff; } .offline-evidence-form { border: none; padding: 0; } -.offline-evidence-form summary { font-size: 0.85rem; color: var(--muted); cursor: pointer; } +.offline-evidence-form summary { font-size: .82rem; color: var(--muted); cursor: pointer; } -/* ---------- grading queue cards ---------- */ -.grading-card { background: var(--card); border: 1.5px solid #e2dccf; border-radius: 14px; padding: 1rem; margin-bottom: 0.75rem; } -.grading-header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.6rem; } +/* ============================================================ GRADING QUEUE */ + +.grading-card { background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 1rem; margin-bottom: .75rem; } +.grading-header { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; } .grading-header .grow { flex: 1; font-weight: 600; } -.grading-footer { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 0.6rem; } -.comment-input { flex: 1; min-width: 140px; padding: 0.4rem 0.6rem; border: 1.5px solid #d8d2c0; border-radius: 8px; font-family: inherit; } -.badge-tag { background: var(--gold); color: #333; border-radius: 20px; padding: 0.2rem 0.6rem; font-size: 0.8rem; font-weight: 600; } -.sa-block { background: var(--bg); border: 1px solid #e2dccf; border-radius: 10px; padding: 0.75rem; margin: 0.5rem 0; display: flex; flex-direction: column; gap: 0.6rem; } -.sa-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } -.sa-question { font-size: 0.9rem; color: var(--muted); } -.sa-response { font-size: 0.95rem; font-weight: 600; color: var(--ink); white-space: pre-wrap; } +.grading-footer { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .6rem; } +.comment-input { flex: 1; min-width: 140px; padding: .4rem .6rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; } +.badge-tag { background: var(--gold-bg); color: #92400e; border-radius: 20px; padding: .2rem .6rem; font-size: .78rem; font-weight: 600; } +.sa-block { background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: .75rem; margin: .5rem 0; display: flex; flex-direction: column; gap: .6rem; } +.sa-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } +.sa-question { font-size: .875rem; color: var(--muted); } +.sa-response { font-size: .9rem; font-weight: 600; color: var(--ink); white-space: pre-wrap; } @media (max-width: 600px) { .sa-row { grid-template-columns: 1fr; } } -/* ---------- themes ---------- */ -body.theme-green { --accent: #2e9e5b; --accent-dark: #247a47; --bg: #f0faf4; } -body.theme-purple { --accent: #7c5cbf; --accent-dark: #6245a0; --bg: #f8f4ff; } -body.theme-orange { --accent: #e8802a; --accent-dark: #c96a1a; --bg: #fff8f0; } -body.theme-pink { --accent: #d45d8a; --accent-dark: #b4487a; --bg: #fff0f5; } -body.theme-red { --accent: #e84040; --accent-dark: #c42828; --bg: #fff5f5; } -body.theme-teal { --accent: #20a8a0; --accent-dark: #178880; --bg: #f0faf9; } -body.theme-yellow { --accent: #c8960c; --accent-dark: #a87a06; --bg: #fffbf0; } -body.theme-indigo { --accent: #5b6abf; --accent-dark: #4a57a0; --bg: #f4f5ff; } +/* ============================================================ THEMES */ + +body.theme-green { --accent: #16a34a; --accent-dark: #15803d; --accent-light: #dcfce7; --bg: #f0fdf4; } +body.theme-purple { --accent: #7c3aed; --accent-dark: #6d28d9; --accent-light: #ede9fe; --bg: #f5f3ff; } +body.theme-orange { --accent: #ea580c; --accent-dark: #c2410c; --accent-light: #fff7ed; --bg: #fff7ed; } +body.theme-pink { --accent: #db2777; --accent-dark: #be185d; --accent-light: #fce7f3; --bg: #fdf2f8; } +body.theme-red { --accent: #dc2626; --accent-dark: #b91c1c; --accent-light: #fee2e2; --bg: #fff5f5; } +body.theme-teal { --accent: #0d9488; --accent-dark: #0f766e; --accent-light: #ccfbf1; --bg: #f0fdfa; } +body.theme-yellow { --accent: #d97706; --accent-dark: #b45309; --accent-light: #fef3c7; --bg: #fffbeb; } +body.theme-indigo { --accent: #4f46e5; --accent-dark: #4338ca; --accent-light: #e0e7ff; --bg: #eef2ff; } + +/* ============================================================ KID TOP BAR + THEME PICKER */ -/* ---------- kid top bar + theme picker ---------- */ .kid-topbar { display: flex; justify-content: space-between; align-items: center; } -.kid-topbar-actions { display: flex; gap: 0.25rem; align-items: center; } +.kid-topbar-actions { display: flex; gap: .25rem; align-items: center; } .theme-picker-btn { - background: none; border: none; font-size: 1.3rem; cursor: pointer; - padding: 0.25rem 0.5rem; color: var(--muted); line-height: 1; -} -.theme-dots { - display: flex; gap: 0.6rem; justify-content: flex-end; - margin-bottom: 0.75rem; + background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.2); + backdrop-filter: blur(8px); + font-size: 1.2rem; cursor: pointer; + padding: .3rem .55rem; border-radius: 10px; color: rgba(255,255,255,.8); line-height: 1; + transition: background .15s; } +.theme-picker-btn:hover { background: rgba(255,255,255,.2); } + +.theme-dots { display: flex; gap: .55rem; justify-content: flex-end; margin-bottom: .75rem; } .theme-dot { - width: 2rem; height: 2rem; border-radius: 50%; + width: 1.85rem; height: 1.85rem; border-radius: 50%; border: 3px solid transparent; cursor: pointer; - transition: transform 0.12s, border-color 0.12s; + transition: transform .12s, border-color .12s; + box-shadow: var(--shadow-sm); } .theme-dot:hover { transform: scale(1.2); } -.theme-dot.active { border-color: var(--ink); box-shadow: 0 0 0 2px var(--bg); } -.theme-dot.theme-blue { background: #4f86f7; } -.theme-dot.theme-green { background: #2e9e5b; } -.theme-dot.theme-purple { background: #7c5cbf; } -.theme-dot.theme-orange { background: #e8802a; } -.theme-dot.theme-pink { background: #d45d8a; } -.theme-dot.theme-red { background: #e84040; } -.theme-dot.theme-teal { background: #20a8a0; } -.theme-dot.theme-yellow { background: #c8960c; } -.theme-dot.theme-indigo { background: #5b6abf; } +.theme-dot.active { border-color: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.2); } +.theme-dot.theme-blue { background: #4f7ef8; } +.theme-dot.theme-green { background: #16a34a; } +.theme-dot.theme-purple { background: #7c3aed; } +.theme-dot.theme-orange { background: #ea580c; } +.theme-dot.theme-pink { background: #db2777; } +.theme-dot.theme-red { background: #dc2626; } +.theme-dot.theme-teal { background: #0d9488; } +.theme-dot.theme-yellow { background: #d97706; } +.theme-dot.theme-indigo { background: #4f46e5; } + +/* ============================================================ ICON PICKER */ -/* ---------- icon / animal picker ---------- */ .icon-grid { display: grid; grid-template-columns: repeat(8, 1fr); - gap: 0.35rem; margin-bottom: 0.75rem; + gap: .35rem; margin-bottom: .75rem; background: var(--card); border-radius: var(--radius); - padding: 0.5rem; box-shadow: 0 2px 8px rgba(0,0,0,.1); + padding: .5rem; border: 1.5px solid var(--border); } .icon-choice { - font-size: 1.6rem; background: none; border: 2px solid transparent; - border-radius: 0.5rem; cursor: pointer; padding: 0.2rem; - transition: transform 0.1s, border-color 0.1s; + font-size: 1.55rem; background: none; border: 2px solid transparent; + border-radius: .5rem; cursor: pointer; padding: .2rem; + transition: transform .1s, border-color .1s; } .icon-choice:hover { transform: scale(1.2); } -.icon-choice.active { border-color: var(--accent); background: var(--bg); } +.icon-choice.active { border-color: var(--accent); background: var(--accent-light); } + +/* ============================================================ BG PATTERNS */ -/* ---------- background patterns ---------- */ body.bg-dots { - background-image: radial-gradient(circle, color-mix(in srgb, var(--accent) 38%, transparent) 2.5px, transparent 2.5px); - background-size: 26px 26px; + background-image: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent) 2px, transparent 2px); + background-size: 28px 28px; } body.bg-stripes { background-image: repeating-linear-gradient( 45deg, transparent, transparent 14px, - color-mix(in srgb, var(--accent) 18%, transparent) 14px, - color-mix(in srgb, var(--accent) 18%, transparent) 28px + color-mix(in srgb, var(--accent) 12%, transparent) 14px, + color-mix(in srgb, var(--accent) 12%, transparent) 28px ); } body.bg-grid { background-image: - linear-gradient(color-mix(in srgb, var(--accent) 16%, transparent) 1px, transparent 1px), - linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, transparent) 1px, transparent 1px); + linear-gradient(color-mix(in srgb, var(--accent) 12%, transparent) 1px, transparent 1px), + linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent) 1px, transparent 1px); background-size: 32px 32px; } body.bg-stars { background-image: - radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent) 1.5px, transparent 1.5px), - radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent) 1px, transparent 1px), - radial-gradient(circle, color-mix(in srgb, var(--accent) 45%, transparent) 2px, transparent 2px); + radial-gradient(circle, color-mix(in srgb, var(--accent) 50%, transparent) 1.5px, transparent 1.5px), + radial-gradient(circle, color-mix(in srgb, var(--accent) 28%, transparent) 1px, transparent 1px), + radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent) 2px, transparent 2px); background-size: 48px 48px, 28px 28px, 68px 68px; background-position: 5px 8px, 18px 32px, 46px 18px; } body.bg-bubbles { - background-image: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent) 18px, transparent 18px); + background-image: radial-gradient(circle, color-mix(in srgb, var(--accent) 14%, transparent) 18px, transparent 18px); background-size: 64px 64px; } -/* ---------- bg pattern picker ---------- */ +/* BG pattern picker */ .bg-pattern-panel { - display: flex; gap: 0.5rem; flex-wrap: wrap; - padding: 0.6rem 0.75rem; background: var(--card); - border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,0.12); - margin-bottom: 0.75rem; + display: flex; gap: .5rem; flex-wrap: wrap; + padding: .6rem .75rem; background: var(--card); + border-radius: var(--radius); border: 1.5px solid var(--border); + margin-bottom: .75rem; } .bg-pattern-btn { - width: 46px; height: 46px; border-radius: 8px; - border: 2.5px solid transparent; cursor: pointer; + width: 44px; height: 44px; border-radius: var(--radius-sm); + border: 2px solid transparent; cursor: pointer; background-color: var(--bg); flex-shrink: 0; - transition: border-color 0.15s, transform 0.15s; + transition: border-color .15s, transform .15s; } -.bg-pattern-btn:hover { transform: scale(1.12); } +.bg-pattern-btn:hover { transform: scale(1.1); } .bg-pattern-btn.active { border-color: var(--accent); } -.bg-pattern-btn[data-pattern="dots"] { - background-image: radial-gradient(circle, color-mix(in srgb, var(--accent) 50%, transparent) 2.5px, transparent 2.5px); - background-size: 9px 9px; -} -.bg-pattern-btn[data-pattern="stripes"] { - background-image: repeating-linear-gradient( - 45deg, transparent, transparent 5px, - color-mix(in srgb, var(--accent) 30%, transparent) 5px, - color-mix(in srgb, var(--accent) 30%, transparent) 10px - ); -} -.bg-pattern-btn[data-pattern="grid"] { - background-image: - linear-gradient(color-mix(in srgb, var(--accent) 25%, transparent) 1px, transparent 1px), - linear-gradient(90deg, color-mix(in srgb, var(--accent) 25%, transparent) 1px, transparent 1px); - background-size: 10px 10px; -} -.bg-pattern-btn[data-pattern="stars"] { - background-image: - radial-gradient(circle, color-mix(in srgb, var(--accent) 60%, transparent) 1.5px, transparent 1.5px), - radial-gradient(circle, color-mix(in srgb, var(--accent) 35%, transparent) 1px, transparent 1px); - background-size: 14px 14px, 8px 8px; - background-position: 2px 3px, 6px 10px; -} -.bg-pattern-btn[data-pattern="bubbles"] { - background-image: radial-gradient(circle, color-mix(in srgb, var(--accent) 25%, transparent) 8px, transparent 8px); - background-size: 22px 22px; -} +.bg-pattern-btn[data-pattern="dots"] { background-image: radial-gradient(circle, color-mix(in srgb, var(--accent) 50%, transparent) 2px, transparent 2px); background-size: 9px 9px; } +.bg-pattern-btn[data-pattern="stripes"] { background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, color-mix(in srgb, var(--accent) 28%, transparent) 5px, color-mix(in srgb, var(--accent) 28%, transparent) 10px); } +.bg-pattern-btn[data-pattern="grid"] { background-image: linear-gradient(color-mix(in srgb, var(--accent) 22%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent) 1px, transparent 1px); background-size: 10px 10px; } +.bg-pattern-btn[data-pattern="stars"] { background-image: radial-gradient(circle, color-mix(in srgb, var(--accent) 60%, transparent) 1.5px, transparent 1.5px), radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent) 1px, transparent 1px); background-size: 14px 14px, 8px 8px; background-position: 2px 3px, 6px 10px; } +.bg-pattern-btn[data-pattern="bubbles"] { background-image: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent) 8px, transparent 8px); background-size: 22px 22px; } + +/* ============================================================ WELCOME TOAST */ -/* ---------- welcome toast ---------- */ .welcome-toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); - background: var(--card); border-radius: var(--radius); + background: var(--card); border-radius: var(--radius-xl); padding: 2.2rem 3.5rem; text-align: center; - box-shadow: 0 16px 56px rgba(0,0,0,0.22); z-index: 1000; + box-shadow: var(--shadow-lg); z-index: 1000; pointer-events: none; - animation: welcome-in 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; + animation: welcome-in .38s cubic-bezier(.34,1.56,.64,1) forwards; } -.welcome-emoji { display: block; font-size: 4.5rem; margin-bottom: 0.4rem; } -.welcome-name { font-size: 2.2rem; font-weight: 800; } -@keyframes welcome-in { - from { opacity: 0; transform: translate(-50%, -50%) scale(0.7); } - to { opacity: 1; transform: translate(-50%, -50%) scale(1); } -} -@keyframes welcome-out { - to { opacity: 0; transform: translate(-50%, -54%) scale(0.88); } -} -.welcome-toast-out { animation: welcome-out 0.4s ease forwards; } +.welcome-emoji { display: block; font-size: 4.5rem; margin-bottom: .4rem; } +.welcome-name { font-family: var(--font-kid); font-size: 2.2rem; font-weight: 900; } +@keyframes welcome-in { from { opacity: 0; transform: translate(-50%,-50%) scale(.7); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } } +@keyframes welcome-out { to { opacity: 0; transform: translate(-50%,-54%) scale(.88); } } +.welcome-toast-out { animation: welcome-out .4s ease forwards; } + +/* ============================================================ DONE STAMP */ -/* ---------- done stamp ---------- */ .done-stamp-wrap { position: fixed; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10vh; z-index: 1000; pointer-events: none; - background: rgba(0,0,0,0.06); + background: rgba(0,0,0,.05); } .done-stamp { background: var(--card); border-radius: 50%; width: 170px; height: 170px; display: flex; align-items: center; justify-content: center; font-size: 5.5rem; - box-shadow: 0 10px 48px rgba(0,0,0,0.22); - animation: stamp-in 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; + box-shadow: var(--shadow-lg); + animation: stamp-in .38s cubic-bezier(.34,1.56,.64,1) forwards; } -@keyframes stamp-in { - from { transform: scale(0) rotate(-18deg); opacity: 0; } - to { transform: scale(1) rotate(0deg); opacity: 1; } -} -@keyframes stamp-out { - to { transform: scale(0.75) rotate(6deg); opacity: 0; } -} -.done-stamp-out { animation: stamp-out 0.35s ease forwards; } +@keyframes stamp-in { from { transform: scale(0) rotate(-18deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } } +@keyframes stamp-out { to { transform: scale(.75) rotate(6deg); opacity: 0; } } +.done-stamp-out { animation: stamp-out .35s ease forwards; } + +/* ============================================================ MINI CELEBRATION */ + +@keyframes confetti-fall { to { transform: translateY(105vh) rotate(540deg); opacity: 0; } } -/* ---------- mini celebration (confetti + toast) ---------- */ -@keyframes confetti-fall { - to { transform: translateY(105vh) rotate(540deg); opacity: 0; } -} .mini-celebration-toast { position: fixed; top: 45%; left: 50%; transform: translate(-50%, -50%); - background: var(--card); border-radius: var(--radius); - padding: 1.6rem 3.2rem; font-size: 2.4rem; font-weight: 800; + background: var(--card); border-radius: var(--radius-xl); + padding: 1.6rem 3.2rem; font-family: var(--font-kid); + font-size: 2.4rem; font-weight: 900; text-align: center; white-space: nowrap; - box-shadow: 0 12px 48px rgba(0,0,0,0.28); z-index: 1000; - animation: pop-in 0.25s ease; pointer-events: none; -} -@keyframes mini-toast-out { - to { opacity: 0; transform: translate(-50%, -65%) scale(0.88); } + box-shadow: var(--shadow-lg); z-index: 1000; + animation: pop-in .25s ease; pointer-events: none; } +@keyframes mini-toast-out { to { opacity: 0; transform: translate(-50%,-65%) scale(.88); } } + +/* ============================================================ CELEBRATION OVERLAY */ -/* ---------- celebration overlay ---------- */ #celebration-overlay { position: fixed; inset: 0; z-index: 200; - background: rgba(0, 0, 0, 0.55); + background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; + backdrop-filter: blur(4px); } #celebration-content { - background: var(--card); border-radius: var(--radius); + background: var(--card); border-radius: var(--radius-xl); padding: 2.5rem 2rem; text-align: center; max-width: 360px; width: 92%; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22); - animation: pop-in 0.25s ease; + box-shadow: var(--shadow-lg); + animation: pop-in .25s ease; } -@keyframes pop-in { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } } -.celebration-emoji { font-size: 5rem; animation: bounce 0.6s ease infinite alternate; display: block; } +@keyframes pop-in { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } } +.celebration-emoji { font-size: 5rem; animation: bounce .6s ease infinite alternate; display: block; } @keyframes bounce { to { transform: translateY(-14px); } } -#celebration-content h2 { font-size: 1.8rem; margin: 0.5rem 0 1rem; } -.streak-badge { font-size: 2.6rem; font-weight: 800; color: var(--accent); } -.streak-label { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.25rem; } -.best-streak-label { font-size: 0.85rem; color: var(--gold); font-weight: 700; margin-bottom: 0.5rem; } +#celebration-content h2 { font-family: var(--font-kid); font-size: 1.8rem; margin: .5rem 0 1rem; font-weight: 900; } +.streak-badge { font-size: 2.6rem; font-weight: 900; color: var(--accent); } +.streak-label { color: var(--muted); font-size: .875rem; margin-bottom: 1.25rem; } +.best-streak-label { font-size: .82rem; color: var(--gold); font-weight: 700; margin-bottom: .5rem; } + +/* ============================================================ BIRTHDAY OVERLAY */ -/* ---------- birthday overlay ---------- */ #birthday-overlay { position: fixed; inset: 0; z-index: 210; - background: linear-gradient(135deg, rgba(255,182,50,0.92) 0%, rgba(255,80,120,0.92) 100%); + background: linear-gradient(135deg, rgba(255,182,50,.92) 0%, rgba(255,80,120,.92) 100%); display: flex; align-items: center; justify-content: center; } #birthday-content { - background: var(--card); border-radius: var(--radius); + background: var(--card); border-radius: var(--radius-xl); padding: 2.5rem 2rem; text-align: center; max-width: 380px; width: 92%; - box-shadow: 0 8px 40px rgba(0, 0, 0, 0.28); - animation: pop-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); + box-shadow: var(--shadow-lg); + animation: pop-in .3s cubic-bezier(.34,1.56,.64,1); } -.birthday-balloons { - font-size: 2.5rem; letter-spacing: .3rem; - animation: balloon-sway 1.8s ease-in-out infinite alternate; - display: block; margin-bottom: .25rem; -} -@keyframes balloon-sway { - from { transform: rotate(-6deg) translateY(0); } - to { transform: rotate(6deg) translateY(-8px); } -} -.birthday-cake { font-size: 5rem; display: block; margin: 0.25rem 0; animation: bounce 0.7s ease infinite alternate; } -#birthday-content h2 { font-size: 2rem; margin: 0.5rem 0 0.5rem; } -.birthday-message { color: var(--muted); font-size: 1.05rem; margin: 0 0 1.5rem; } +.birthday-balloons { font-size: 2.5rem; letter-spacing: .3rem; animation: balloon-sway 1.8s ease-in-out infinite alternate; display: block; margin-bottom: .25rem; } +@keyframes balloon-sway { from { transform: rotate(-6deg) translateY(0); } to { transform: rotate(6deg) translateY(-8px); } } +.birthday-cake { font-size: 5rem; display: block; margin: .25rem 0; animation: bounce .7s ease infinite alternate; } +#birthday-content h2 { font-family: var(--font-kid); font-size: 2rem; font-weight: 900; margin: .5rem 0 .5rem; } +.birthday-message { color: var(--muted); font-size: 1rem; margin: 0 0 1.5rem; } + +/* ============================================================ STREAK PILL */ -/* ---------- streak pill on kid home ---------- */ .streak-pill { - display: inline-flex; align-items: center; gap: 0.3rem; + display: inline-flex; align-items: center; gap: .3rem; background: var(--good-bg); color: var(--good); - border-radius: 999px; padding: 0.25rem 0.9rem; - font-size: 0.95rem; font-weight: 700; margin-bottom: 0.75rem; + border-radius: 999px; padding: .25rem .9rem; + font-size: .9rem; font-weight: 700; margin-bottom: .75rem; } -/* ---------- feedback indicator ---------- */ +/* ============================================================ FEEDBACK BADGE */ + .feedback-badge { - display: inline-block; background: var(--gold); color: #333; - font-size: 0.7rem; font-weight: 800; border-radius: 999px; - padding: 0.1rem 0.45rem; margin-left: 0.35rem; vertical-align: middle; + display: inline-block; background: var(--gold-bg); color: #92400e; + font-size: .68rem; font-weight: 800; border-radius: 999px; + padding: .1rem .45rem; margin-left: .35rem; vertical-align: middle; } -.parent-comment { - background: var(--good-bg); border-radius: 10px; - padding: 0.9rem 1rem; margin: 0.75rem 0; color: var(--good); - border-left: 4px solid var(--good); - font-size: 1.05rem; + +/* ============================================================ INBOX */ + +.inbox-subtabs { display: flex; gap: .5rem; margin-bottom: 1rem; } +.inbox-subtab { + flex: 1; padding: .5rem 1rem; border: 1.5px solid var(--border); + border-radius: 999px; background: var(--card); color: var(--ink); + font-size: .875rem; font-weight: 600; cursor: pointer; position: relative; + transition: background .15s, border-color .15s, color .15s; } -.inbox-subtabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; } -.inbox-subtab { flex: 1; padding: 0.5rem 1rem; border: 1.5px solid #e2dccf; border-radius: 999px; background: var(--card); color: var(--text); font-size: 0.9rem; font-weight: 600; cursor: pointer; position: relative; } .inbox-subtab.active { background: var(--accent); color: #fff; border-color: var(--accent); } -.inbox-card { background: var(--card); border: 1.5px solid #e2dccf; border-radius: 14px; padding: 1rem; margin-bottom: 0.75rem; } -.inbox-card.inbox-new { border-color: var(--accent); } -.inbox-card-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; } -.inbox-item-title { font-weight: 700; font-size: 1.05rem; flex: 1; } -.inbox-meta { font-size: 0.85rem; color: var(--muted); margin-bottom: 0.4rem; } -.inbox-score { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.25rem; } +.inbox-card { background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 1rem; margin-bottom: .75rem; } +.inbox-card.inbox-new { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(79,126,248,.12); } +.inbox-card-header { display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; } +.inbox-item-title { font-weight: 700; font-size: 1rem; flex: 1; } +.inbox-meta { font-size: .82rem; color: var(--muted); margin-bottom: .4rem; } +.inbox-score { font-size: 1.05rem; font-weight: 700; margin-bottom: .25rem; } .inbox-score.score-good { color: var(--good); } -.inbox-score.score-bad { color: var(--bad); } +.inbox-score.score-bad { color: var(--bad); } -/* ---------- messaging ---------- */ -.msg-thread-wrap { margin-top: 1.5rem; background: var(--card); border: 1.5px solid #e2dccf; border-radius: 14px; overflow: hidden; } -.msg-thread-title { margin: 0; padding: .75rem 1rem; font-size: 1rem; border-bottom: 1px solid #e2dccf; } +/* ============================================================ MESSAGING */ + +.msg-thread-wrap { margin-top: 1.5rem; background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius); overflow: hidden; } +.msg-thread-title { margin: 0; padding: .75rem 1rem; font-size: .9rem; font-weight: 700; border-bottom: 1px solid var(--border); } .msg-thread { max-height: 320px; overflow-y: auto; padding: .75rem 1rem; display: flex; flex-direction: column; gap: .5rem; } -.msg-compose { display: flex; gap: .5rem; padding: .75rem 1rem; border-top: 1px solid #e2dccf; } -.msg-input { flex: 1; padding: .5rem .75rem; border: 1.5px solid #d8d2c0; border-radius: 10px; font-family: inherit; font-size: .95rem; resize: none; } -.msg-send-btn { padding: .5rem 1rem; border-radius: 10px; background: var(--accent); color: #fff; border: none; font-size: .9rem; cursor: pointer; white-space: nowrap; } +.msg-compose { display: flex; gap: .5rem; padding: .75rem 1rem; border-top: 1px solid var(--border); } +.msg-input { flex: 1; padding: .5rem .75rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; font-size: .9rem; resize: none; transition: border-color .15s; } +.msg-input:focus { outline: none; border-color: var(--accent); } +.msg-send-btn { padding: .5rem 1rem; border-radius: var(--radius-sm); background: var(--accent); color: #fff; border: none; font-size: .875rem; cursor: pointer; white-space: nowrap; transition: background .15s; } +.msg-send-btn:hover { background: var(--accent-dark); } .msg-bubble-wrap { display: flex; flex-direction: column; max-width: 75%; } -.msg-mine { align-self: flex-end; align-items: flex-end; } +.msg-mine { align-self: flex-end; align-items: flex-end; } .msg-theirs { align-self: flex-start; align-items: flex-start; } -.msg-bubble { padding: .55rem .85rem; border-radius: 16px; font-size: .95rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word; } -.msg-mine .msg-bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; } -.msg-theirs .msg-bubble { background: #e8e2d4; color: var(--ink); border-bottom-left-radius: 4px; } -.msg-time { font-size: .72rem; color: var(--muted); margin-top: .2rem; } +.msg-bubble { padding: .55rem .85rem; border-radius: 16px; font-size: .9rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; } +.msg-mine .msg-bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; } +.msg-theirs .msg-bubble { background: #f1f5f9; color: var(--ink); border-bottom-left-radius: 4px; } +.msg-time { font-size: .7rem; color: var(--muted); margin-top: .2rem; } -/* admin messages panel */ +/* admin messages */ .msg-admin-cols { display: grid; grid-template-columns: 240px 1fr; gap: 1rem; height: calc(100vh - 180px); } -.msg-thread-list { background: var(--card); border: 1.5px solid #e2dccf; border-radius: 12px; overflow-y: auto; display: flex; flex-direction: column; } -.msg-student-btn { background: none; border: none; border-bottom: 1px solid #e2dccf; padding: .75rem; text-align: left; cursor: pointer; display: flex; gap: .6rem; align-items: flex-start; } -.msg-student-btn:hover, .msg-student-btn.active { background: var(--accent-light, #e8f0fe); } +.msg-thread-list { background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius); overflow-y: auto; display: flex; flex-direction: column; } +.msg-student-btn { background: none; border: none; border-bottom: 1px solid var(--border); padding: .75rem; text-align: left; cursor: pointer; display: flex; gap: .6rem; align-items: flex-start; transition: background .12s; } +.msg-student-btn:hover, .msg-student-btn.active { background: var(--accent-light); } .msg-student-btn.msg-has-unread { font-weight: 700; } .msg-student-avatar { font-size: 1.5rem; line-height: 1; } .msg-student-info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; } -.msg-preview { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; font-weight: 400; } -.msg-nav-badge { background: var(--bad); color: #fff; border-radius: 999px; font-size: .72rem; font-weight: 800; padding: .1rem .45rem; margin-left: .35rem; } -.msg-admin-thread { background: var(--card); border: 1.5px solid #e2dccf; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; } -.msg-admin-thread-header { padding: .75rem 1rem; border-bottom: 1px solid #e2dccf; font-size: 1rem; } +.msg-preview { font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; font-weight: 400; } +.msg-nav-badge { background: var(--bad); color: #fff; border-radius: 999px; font-size: .7rem; font-weight: 800; padding: .1rem .45rem; margin-left: .35rem; } +.msg-admin-thread { background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; } +.msg-admin-thread-header { padding: .75rem 1rem; border-bottom: 1px solid var(--border); font-size: .95rem; font-weight: 700; } .msg-admin-msgs { flex: 1; overflow-y: auto; padding: .75rem 1rem; display: flex; flex-direction: column; gap: .5rem; } -.msg-admin-compose { display: flex; gap: .5rem; padding: .75rem 1rem; border-top: 1px solid #e2dccf; } +.msg-admin-compose { display: flex; gap: .5rem; padding: .75rem 1rem; border-top: 1px solid var(--border); } @media (max-width: 640px) { .msg-admin-cols { grid-template-columns: 1fr; height: auto; } } -/* ---------- quiz / matching instructions ---------- */ +/* ============================================================ QUIZ INSTRUCTIONS */ + .quiz-instructions { - background: var(--bg); border-left: 3px solid var(--accent); - border-radius: 6px; padding: 0.55rem 0.9rem; - font-size: 0.95rem; color: var(--ink); - margin-bottom: 1rem; text-align: left; + background: var(--accent-light); border-left: 3px solid var(--accent); + border-radius: var(--radius-sm); padding: .55rem .9rem; + font-size: .9rem; color: var(--ink); margin-bottom: 1rem; text-align: left; } -/* ---------- matching quiz ---------- */ +/* ============================================================ MATCHING QUIZ */ + .match-word-bank { background: var(--bg); border: 2px solid var(--accent); - border-radius: var(--radius); padding: 0.75rem 1rem; - margin-bottom: 1rem; text-align: left; -} -.match-bank-list { - display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; - margin-top: 0.4rem; -} -.match-bank-item { font-size: 0.95rem; } -.match-instructions { font-size: 0.9rem; color: var(--muted); margin-bottom: 0.75rem; } -.match-row { - display: flex; align-items: center; gap: 0.6rem; - text-align: left; + border-radius: var(--radius); padding: .75rem 1rem; margin-bottom: 1rem; text-align: left; } +.match-bank-list { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .4rem; } +.match-bank-item { font-size: .9rem; } +.match-instructions { font-size: .875rem; color: var(--muted); margin-bottom: .75rem; } +.match-row { display: flex; align-items: center; gap: .6rem; text-align: left; } .match-input { - width: 2.6rem; text-align: center; font-size: 1.1rem; font-weight: 700; + width: 2.6rem; text-align: center; font-size: 1.05rem; font-weight: 700; text-transform: uppercase; border: 2px solid var(--accent); - border-radius: 8px; padding: 0.3rem; flex-shrink: 0; -} -.match-clue { flex: 1; font-size: 0.95rem; } -.match-review-row { - display: flex; align-items: center; gap: 0.6rem; - text-align: left; flex-wrap: wrap; + border-radius: var(--radius-sm); padding: .3rem; flex-shrink: 0; } +.match-clue { flex: 1; font-size: .9rem; } +.match-review-row { display: flex; align-items: center; gap: .6rem; text-align: left; flex-wrap: wrap; } .match-blank-badge { display: inline-block; width: 2.2rem; text-align: center; - font-size: 1rem; font-weight: 700; border-radius: 6px; - padding: 0.15rem 0; flex-shrink: 0; + font-size: .95rem; font-weight: 700; border-radius: 6px; + padding: .15rem 0; flex-shrink: 0; } .match-blank-badge.correct { background: var(--good-bg); color: var(--good); } -.match-blank-badge.wrong { background: var(--bad-bg); color: var(--bad); } +.match-blank-badge.wrong { background: var(--bad-bg); color: var(--bad); } -/* admin matching pair rows */ -.matching-pair-row { - display: grid; grid-template-columns: 1fr 2fr auto; - gap: 0.4rem; margin-bottom: 0.4rem; align-items: center; -} +.matching-pair-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: .4rem; margin-bottom: .4rem; align-items: center; } -/* ---------- print list button ---------- */ -.big-btn.print-list { - background: #6b7280; color: #fff; font-size: 1.2rem; -} +/* ============================================================ PRINT LIST BUTTON */ -/* ---------- grading badge on admin nav ---------- */ -.nav-pill.grading-pending { background: var(--bad); color: #fff; border-color: var(--bad); } +.big-btn.print-list { background: #4b5563; color: #fff; font-size: 1.15rem; } -/* ---------- admin theme swatches ---------- */ -.theme-swatch-row { display: flex; gap: 0.4rem; align-items: center; } +/* ============================================================ ADMIN NAV BADGES */ + +.nav-pill.grading-pending { background: var(--bad) !important; color: #fff !important; } + +/* ============================================================ ADMIN THEME SWATCHES */ + +.theme-swatch-row { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; } .theme-swatch { width: 1.5rem; height: 1.5rem; border-radius: 50%; - border: 2px solid transparent; cursor: pointer; - transition: transform 0.1s; + border: 2px solid transparent; cursor: pointer; transition: transform .1s; + box-shadow: var(--shadow-xs); } .theme-swatch:hover { transform: scale(1.2); } .theme-swatch.selected { border-color: var(--ink); } -.theme-swatch.theme-blue { background: #4f86f7; } -.theme-swatch.theme-green { background: #2e9e5b; } -.theme-swatch.theme-purple { background: #7c5cbf; } -.theme-swatch.theme-orange { background: #e8802a; } -.theme-swatch.theme-pink { background: #d45d8a; } -.theme-swatch.theme-red { background: #e84040; } -.theme-swatch.theme-teal { background: #20a8a0; } -.theme-swatch.theme-yellow { background: #c8960c; } -.theme-swatch.theme-indigo { background: #5b6abf; } +.theme-swatch.theme-blue { background: #4f7ef8; } +.theme-swatch.theme-green { background: #16a34a; } +.theme-swatch.theme-purple { background: #7c3aed; } +.theme-swatch.theme-orange { background: #ea580c; } +.theme-swatch.theme-pink { background: #db2777; } +.theme-swatch.theme-red { background: #dc2626; } +.theme-swatch.theme-teal { background: #0d9488; } +.theme-swatch.theme-yellow { background: #d97706; } +.theme-swatch.theme-indigo { background: #4f46e5; } -/* ---------- student portal: test history ---------- */ -.thr-heading { margin: 1.5rem 0 0.5rem; font-size: 1rem; } -.test-history-row { display: flex; gap: 0.75rem; align-items: baseline; padding: 0.35rem 0; border-bottom: 1px solid var(--muted); font-size: 0.9rem; flex-wrap: wrap; } -.thr-date { color: var(--muted); min-width: 6rem; flex-shrink: 0; } -.thr-list { flex: 1; min-width: 8rem; } +/* ============================================================ TEST HISTORY */ + +.thr-heading { margin: 1.5rem 0 .5rem; font-size: .95rem; font-weight: 700; } +.test-history-row { display: flex; gap: .75rem; align-items: baseline; padding: .35rem 0; border-bottom: 1px solid var(--border); font-size: .875rem; flex-wrap: wrap; } +.thr-date { color: var(--muted); min-width: 6rem; flex-shrink: 0; } +.thr-list { flex: 1; min-width: 8rem; } .thr-score { margin-left: auto; font-weight: 600; white-space: nowrap; } -/* ---------- toast notification ---------- */ +/* ============================================================ TOAST NOTIFICATION */ + #toast { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; background: var(--good); color: #fff; - padding: 0.7rem 1.2rem; border-radius: 12px; - font-weight: 600; font-size: 0.95rem; - box-shadow: 0 4px 18px rgba(0,0,0,0.18); - transition: opacity 0.35s, transform 0.35s; + padding: .7rem 1.25rem; border-radius: var(--radius); + font-weight: 600; font-size: .9rem; + box-shadow: var(--shadow-md); + transition: opacity .35s, transform .35s; opacity: 1; transform: translateY(0); } #toast.toast-error { background: var(--bad); } -#toast.toast-out { opacity: 0; transform: translateY(0.5rem); } +#toast.toast-out { opacity: 0; transform: translateY(.5rem); } + +/* ============================================================ MESSAGE NOTIFICATION TOAST */ -/* ---------- message notification toast (kid app) ---------- */ .msg-notif-toast { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%) translateY(-120%); z-index: 9999; background: var(--accent); color: #fff; - padding: 0.75rem 1.4rem; border-radius: 14px; - font-weight: 700; font-size: 1rem; text-align: center; - box-shadow: 0 6px 24px rgba(0,0,0,0.22); - cursor: pointer; transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.35s; + padding: .75rem 1.4rem; border-radius: var(--radius); + font-weight: 700; font-size: .95rem; text-align: center; + box-shadow: var(--shadow-md); + cursor: pointer; transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .35s; opacity: 0; } .msg-notif-toast.msg-notif-toast-show { transform: translateX(-50%) translateY(0); opacity: 1; } -.msg-notif-tap { font-size: 0.82rem; font-weight: 500; opacity: 0.85; margin-left: 0.5rem; } -.planner-pending { border: 2px dashed var(--accent) !important; background: color-mix(in srgb, var(--accent) 10%, var(--card)) !important; color: var(--accent) !important; opacity: 0.85; cursor: default; } +.msg-notif-tap { font-size: .8rem; font-weight: 500; opacity: .85; margin-left: .5rem; } +.planner-pending { + border: 2px dashed var(--accent) !important; + background: rgba(79,126,248,.08) !important; + color: var(--accent) !important; opacity: .85; cursor: default; +} -/* ---------- planner add-task modal ---------- */ -.planner-add-box { max-width: 620px; width: 95%; max-height: 88vh; display: flex; flex-direction: column; gap: 0.75rem; padding: 1.25rem; } -.planner-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.25rem; } -.planner-modal-header h3 { margin: 0; font-size: 1.1rem; } -.day-tabs { display: flex; gap: 0.35rem; } -.day-tab { flex: 1; padding: 0.45rem 0.3rem; border: 2px solid #d8d2c0; border-radius: 8px; background: var(--bg); cursor: pointer; font-family: inherit; font-size: 0.8rem; text-align: center; line-height: 1.25; } +/* ============================================================ PLANNER ADD MODAL */ + +.planner-add-box { max-width: 620px; width: 95%; max-height: 88vh; display: flex; flex-direction: column; gap: .75rem; padding: 1.25rem; } +.planner-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .25rem; } +.planner-modal-header h3 { margin: 0; font-size: 1.05rem; font-weight: 700; } +.day-tabs { display: flex; gap: .35rem; } +.day-tab { + flex: 1; padding: .45rem .3rem; border: 1.5px solid var(--border); + border-radius: var(--radius-sm); background: var(--bg); cursor: pointer; + font-family: inherit; font-size: .78rem; text-align: center; line-height: 1.25; + transition: border-color .15s, background .15s, color .15s; +} .day-tab span { display: block; font-weight: 700; } -.day-tab small { color: var(--muted); font-size: 0.7rem; } -.day-tab.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--card)); color: var(--accent); } -.day-tab.active small { color: var(--accent); opacity: 0.75; } -.planner-item-search { width: 100%; box-sizing: border-box; padding: 0.55rem 0.75rem; font-size: 0.95rem; font-family: inherit; border: 2px solid #d8d2c0; border-radius: 10px; background: var(--bg); color: var(--ink); } +.day-tab small { color: var(--muted); font-size: .68rem; } +.day-tab.active { border-color: var(--accent); background: var(--accent-light); color: var(--accent-dark); } +.day-tab.active small { color: var(--accent); opacity: .75; } +.planner-item-search { + width: 100%; box-sizing: border-box; padding: .55rem .75rem; font-size: .9rem; + font-family: inherit; border: 1.5px solid var(--border); border-radius: var(--radius-sm); + background: var(--card); color: var(--ink); transition: border-color .15s; +} .planner-item-search:focus { outline: none; border-color: var(--accent); } -.item-list { flex: 1; overflow-y: auto; border: 1.5px solid #e0ddd0; border-radius: 10px; min-height: 180px; max-height: 340px; } -.item-group-header { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); padding: 0.45rem 0.75rem 0.2rem; background: var(--bg); position: sticky; top: 0; } -.item-list-item { padding: 0.5rem 0.75rem; cursor: pointer; border-bottom: 1px solid #ede9dc; display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; } +.item-list { flex: 1; overflow-y: auto; border: 1.5px solid var(--border); border-radius: var(--radius-sm); min-height: 180px; max-height: 340px; } +.item-group-header { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: .45rem .75rem .2rem; background: var(--card-2); position: sticky; top: 0; } +.item-list-item { padding: .5rem .75rem; cursor: pointer; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: .5rem; font-size: .875rem; transition: background .1s; } .item-list-item:last-child { border-bottom: none; } -.item-list-item:hover, .item-list-item:focus { background: color-mix(in srgb, var(--accent) 10%, var(--card)); outline: none; } +.item-list-item:hover, .item-list-item:focus { background: var(--accent-light); outline: none; } .item-list-item.added { background: var(--good-bg); color: var(--good); cursor: default; } .item-list-item .item-label { flex: 1; } -.item-list-item .item-course { font-size: 0.72rem; color: var(--muted); margin-left: auto; white-space: nowrap; } -.planner-offline-row { display: flex; gap: 0.5rem; padding-top: 0.75rem; border-top: 1.5px solid #e0ddd0; } +.item-list-item .item-course { font-size: .7rem; color: var(--muted); margin-left: auto; white-space: nowrap; } +.planner-offline-row { display: flex; gap: .5rem; padding-top: .75rem; border-top: 1.5px solid var(--border); } .planner-offline-row input { flex: 1; } -/* ---------- crossword ---------- */ +/* ============================================================ CROSSWORD */ + .cw-layout { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; margin-top: 1rem; } .cw-grid-wrap { overflow: auto; } -.cw-grid { display: grid; border: 2px solid #555; line-height: 1; width: fit-content; } +.cw-grid { display: grid; border: 2px solid #374151; line-height: 1; width: fit-content; } .cw-cell { width: 34px; height: 34px; - background: #fff; border: 1px solid #999; + background: #fff; border: 1px solid #9ca3af; position: relative; box-sizing: border-box; flex-shrink: 0; } -.cw-cell.black { background: #222; border-color: #222; } -.cw-cell.selected { background: color-mix(in srgb, var(--accent) 60%, #fff); } -.cw-cell.word-hi { background: color-mix(in srgb, var(--accent) 25%, #fff); } -.cw-cell.correct-word { background: #c8f0c8; } -.cw-cell.wrong-word { background: #f8d0d0; } -.cw-num { - position: absolute; top: 1px; left: 2px; - font-size: 7px; line-height: 1; color: #333; - pointer-events: none; z-index: 1; -} +.cw-cell.black { background: #1f2937; border-color: #1f2937; } +.cw-cell.selected { background: color-mix(in srgb, var(--accent) 55%, #fff); } +.cw-cell.word-hi { background: color-mix(in srgb, var(--accent) 20%, #fff); } +.cw-cell.correct-word { background: #bbf7d0; } +.cw-cell.wrong-word { background: #fecaca; } +.cw-num { position: absolute; top: 1px; left: 2px; font-size: 7px; line-height: 1; color: #6b7280; pointer-events: none; z-index: 1; } .cw-input { position: absolute; inset: 0; width: 100%; height: 100%; border: none; background: transparent; text-align: center; @@ -1454,41 +1656,30 @@ body.bg-bubbles { } .cw-sidebar { flex: 1; min-width: 180px; max-width: 320px; } .cw-clues { margin-bottom: 1rem; } -.cw-clues h3 { font-size: 0.9rem; margin-bottom: 0.35rem; } +.cw-clues h3 { font-size: .875rem; font-weight: 700; margin-bottom: .35rem; } .cw-clue-list { list-style: none; padding: 0; margin: 0; max-height: 260px; overflow-y: auto; } -.cw-clue-list li { - padding: 0.2rem 0.35rem; font-size: 0.85rem; - border-radius: 4px; cursor: pointer; line-height: 1.35; -} -.cw-clue-list li.word-hi { background: color-mix(in srgb, var(--accent) 25%, transparent); } +.cw-clue-list li { padding: .2rem .35rem; font-size: .82rem; border-radius: 4px; cursor: pointer; line-height: 1.35; } +.cw-clue-list li.word-hi { background: color-mix(in srgb, var(--accent) 15%, transparent); } .cw-clue-list li.selected-clue { background: var(--accent); color: #fff; } -.cw-actions { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; } -/* admin editor crossword rows */ +.cw-actions { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem; } .cw-entry-cols { display: flex; gap: 1.5rem; flex-wrap: wrap; } -.cw-clue-row { display: flex; gap: 0.5rem; margin-bottom: 0.35rem; align-items: center; } +.cw-clue-row { display: flex; gap: .5rem; margin-bottom: .35rem; align-items: center; } @media (prefers-color-scheme: dark) { - .cw-cell { background: #2a2a2a; border-color: #555; } - .cw-cell.black { background: #111; border-color: #111; } - .cw-num { color: #ccc; } - .cw-input { color: #eee; } - .cw-cell.selected { background: color-mix(in srgb, var(--accent) 50%, #2a2a2a); } - .cw-cell.word-hi { background: color-mix(in srgb, var(--accent) 25%, #2a2a2a); } - .cw-cell.correct-word { background: #1a3a1a; } - .cw-cell.wrong-word { background: #3a1a1a; } + .cw-cell { background: #1e293b; border-color: #475569; } + .cw-cell.black { background: #0f172a; border-color: #0f172a; } + .cw-num { color: #94a3b8; } + .cw-input { color: #e2e8f0; } + .cw-cell.selected { background: color-mix(in srgb, var(--accent) 45%, #1e293b); } + .cw-cell.word-hi { background: color-mix(in srgb, var(--accent) 20%, #1e293b); } } -/* ---------- worksheet ---------- */ -.ws-header { - display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; - margin-bottom: 1.25rem; font-size: 1rem; -} +/* ============================================================ WORKSHEET */ + +.ws-header { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.25rem; font-size: 1rem; } .ws-name-input { width: 12rem; } .ws-date-input { width: 7rem; } -.ws-section-title { - margin: 1.25rem 0 .5rem; font-size: 1rem; font-weight: 700; - border-bottom: 1px solid var(--border); padding-bottom: .3rem; -} +.ws-section-title { margin: 1.25rem 0 .5rem; font-size: .95rem; font-weight: 700; border-bottom: 1.5px solid var(--border); padding-bottom: .3rem; } .ws-question { margin-bottom: 1rem; } .ws-fitb { font-size: 1rem; line-height: 1.8; margin: 0; } .ws-qnum { font-weight: 700; } @@ -1497,14 +1688,15 @@ body.bg-bubbles { border-bottom: 2px solid var(--accent); background: transparent; font-size: 1rem; font-family: inherit; padding: 0 .25rem; outline: none; margin: 0 .2rem; vertical-align: baseline; + transition: border-bottom-color .15s; } -.ws-blank-input:focus { border-bottom-color: var(--accent-dark); } +.ws-blank-input:focus { border-bottom-color: var(--accent-dark); } .ws-blank-input.ws-correct { border-bottom-color: var(--good); color: var(--good); } .ws-blank-input.ws-wrong { border-bottom-color: var(--bad); color: var(--bad); } -.ws-correct-answer { font-size: .85rem; color: var(--good); font-style: italic; } +.ws-correct-answer { font-size: .82rem; color: var(--good); font-style: italic; } .ws-tf { display: flex; align-items: center; gap: .5rem; font-size: 1rem; margin: 0; } .ws-tf-btn { - min-width: 2.2rem; padding: .35rem .6rem; border: 2px solid var(--border); + min-width: 2.2rem; padding: .35rem .6rem; border: 1.5px solid var(--border); border-radius: 6px; background: transparent; font-size: 1rem; font-weight: 700; cursor: pointer; transition: all .15s; color: inherit; } @@ -1515,11 +1707,13 @@ body.bg-bubbles { .ws-short { display: block; font-size: 1rem; margin-bottom: 1rem; } .ws-short-answer { display: block; width: 100%; margin-top: .4rem; resize: vertical; - border: 1px solid var(--border); border-radius: 8px; padding: .5rem .75rem; - font-family: inherit; font-size: 1rem; background: var(--input-bg, transparent); + border: 1.5px solid var(--border); border-radius: var(--radius-sm); + padding: .5rem .75rem; font-family: inherit; font-size: 1rem; + background: transparent; transition: border-color .15s; } +.ws-short-answer:focus { outline: none; border-color: var(--accent); } .ws-actions { display: flex; gap: .75rem; margin-top: 1.25rem; flex-wrap: wrap; } @media (prefers-color-scheme: dark) { - .ws-blank-input { color: #eee; } + .ws-blank-input { color: #e2e8f0; } }