/* Student page, playful look (grades 2–5). Applied when <html> has the class "kid".
   Layout: one friendly column; every section is a chunky card with a pressed-down edge, each tab has its own color.
   Signature: Shuey the fox, the reading-streak flame and the "pressable" 3D buttons.
   Type: Fredoka (rounded display) for headings, numbers and buttons; Andika for reading text, designed for
   beginning readers (single-story a and g, clear I l 1). */
html.kid {
  --bg: #eef5ff;
  --dot: #dbe7fb;
  --surface: #ffffff;
  --sunk: #e6eefb;
  --ink: #1d2150;
  --muted: #5a618f;
  --line: #d3ddf1;
  --line-deep: #bccbe8;
  --accent: #6a4cf0;   --accent-deep: #4c2fcc; --accent-soft: #eee9ff; --accent-ink: #ffffff;
  --fox: #ff8a1f;      --fox-deep: #dd6a00;    --fox-soft: #fff1e2;
  --sun: #ffc233;      --sun-deep: #e0a000;    --sun-soft: #fff7dc;
  --leaf: #2fbf62;     --leaf-deep: #1e9a4b;   --leaf-soft: #e2f8e9;
  --sky: #22a6f2;      --sky-deep: #0f84cb;    --sky-soft: #e0f2ff;
  --berry: #ff5c9a;    --berry-deep: #d93b77;  --berry-soft: #ffe7f0;
  --ok: #1a9a4c; --ok-soft: #e2f8e9; --warn: #b76e00; --warn-soft: #fff1d6; --bad: #d22f4f; --bad-soft: #ffe6eb;
  --flame-a: #ffb300; --flame-b: #ff6a00; --flame-off: #d4d9ea;
  --font-display: "Fredoka", "Baloo 2", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Andika", "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --r: 22px;
  --edge: 0 4px 0 var(--line);
  --shadow: 0 10px 30px rgba(35, 45, 110, .14);
}
@media (prefers-color-scheme: dark) {
  html.kid:not([data-theme="light"]) {
    --bg: #12163a; --dot: #1a2050; --surface: #1d2350; --sunk: #272e64; --ink: #f3f4ff; --muted: #aab0dc; --line: #343c7a; --line-deep: #424b92;
    --accent: #9a85ff; --accent-deep: #6a4cf0; --accent-soft: #2c2766; --accent-ink: #14112b;
    --fox: #ff9a3d; --fox-deep: #c95f00; --fox-soft: #3a2a2a;
    --sun: #ffcb4d; --sun-deep: #c48c00; --sun-soft: #3a3426;
    --leaf: #4fd884; --leaf-deep: #23964c; --leaf-soft: #1d3a37;
    --sky: #4cbcff; --sky-deep: #1a86c8; --sky-soft: #1b3355;
    --berry: #ff7aae; --berry-deep: #c9407a; --berry-soft: #3d2149;
    --ok: #5fe39a; --ok-soft: #1d3a37; --warn: #ffc56b; --warn-soft: #3a3020; --bad: #ff8aa0; --bad-soft: #43213a;
    --flame-off: #3d4580;
    --shadow: 0 10px 30px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}
html.kid[data-theme="dark"] {
  --bg: #12163a; --dot: #1a2050; --surface: #1d2350; --sunk: #272e64; --ink: #f3f4ff; --muted: #aab0dc; --line: #343c7a; --line-deep: #424b92;
  --accent: #9a85ff; --accent-deep: #6a4cf0; --accent-soft: #2c2766; --accent-ink: #14112b;
  --fox: #ff9a3d; --fox-deep: #c95f00; --fox-soft: #3a2a2a;
  --sun: #ffcb4d; --sun-deep: #c48c00; --sun-soft: #3a3426;
  --leaf: #4fd884; --leaf-deep: #23964c; --leaf-soft: #1d3a37;
  --sky: #4cbcff; --sky-deep: #1a86c8; --sky-soft: #1b3355;
  --berry: #ff7aae; --berry-deep: #c9407a; --berry-soft: #3d2149;
  --ok: #5fe39a; --ok-soft: #1d3a37; --warn: #ffc56b; --warn-soft: #3a3020; --bad: #ff8aa0; --bad-soft: #43213a;
  --flame-off: #3d4580;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

/* ---------- base ---------- */
html.kid body {
  font: 18px/1.55 var(--font-body);
  background-color: var(--bg);
  background-image: radial-gradient(var(--dot) 1.6px, transparent 1.7px);
  background-size: 26px 26px;
}
html.kid h1, html.kid h2, html.kid h3 { font-family: var(--font-display); letter-spacing: 0; }
html.kid h1 { font-size: 2.1rem; font-weight: 600; }
html.kid h2 { font-size: 1.35rem; font-weight: 600; }
html.kid h3 { font-size: 1.1rem; font-weight: 600; }
:where(html.kid) a { color: var(--accent); font-weight: 700; }
html.kid .li a.t1, html.kid .book, html.kid a.notice, html.kid .chal-head { text-decoration: none; }
html.kid .li a.t1 { color: var(--ink); }
html.kid a.notice { color: var(--ink); font-weight: 400; }
html.kid .small { font-size: .9rem; }
html.kid .eyebrow { font-family: var(--font-display); font-size: .82rem; letter-spacing: .06em; font-weight: 600; }
html.kid :focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
html.kid .page { gap: 24px; }
html.kid .page-head .sub { font-size: 1.02rem; }
html.kid .main { padding-block: 26px 120px; }

/* ---------- header and tabs ---------- */
html.kid .phead { background: var(--surface); border-bottom: 3px solid var(--line); }
html.kid .phead-in { padding-block: 10px; }
html.kid .brand-mark.fox { width: 48px; height: 48px; border-radius: 50%; background: var(--sun); overflow: hidden; box-shadow: 0 3px 0 var(--sun-deep); }
html.kid .brand-mark.fox img { width: 140%; height: 140%; max-width: none; object-fit: cover; object-position: 50% 4%; margin-top: 18%; }
html.kid .brand-name { font-size: 1.25rem; font-weight: 600; }
html.kid .ptabs { gap: 6px; margin-left: 8px; }
html.kid .ptabs a { padding: 8px 14px 8px 8px; border-radius: 16px; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--ink); transition: background .15s, transform .15s; }
html.kid .ptabs a .ti { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--sunk); color: var(--tc); transition: inherit; }
html.kid .ptabs a svg { width: 20px; height: 20px; stroke-width: 2.3; }
html.kid .ptabs a:hover { background: var(--sunk); }
html.kid .ptabs a.on { background: var(--tc); color: #fff; box-shadow: 0 4px 0 var(--tcd); }
html.kid .ptabs a.on .ti { background: rgba(255, 255, 255, .22); color: #fff; }
:where(html.kid) [data-tab] { --tc: var(--accent); --tcd: var(--accent-deep); }
html.kid [data-tab="home"] { --tc: var(--fox); --tcd: var(--fox-deep); }
html.kid [data-tab="browse"] { --tc: var(--sky); --tcd: var(--sky-deep); }
html.kid [data-tab="log"] { --tc: var(--leaf); --tcd: var(--leaf-deep); }
html.kid [data-tab="challenges"] { --tc: var(--sun-deep); --tcd: #b98400; }
html.kid [data-tab="messages"] { --tc: var(--berry); --tcd: var(--berry-deep); }
html.kid [data-tab="me"] { --tc: var(--accent); --tcd: var(--accent-deep); }
html.kid .ptabs a .badge, html.kid .kid-mail .badge { position: static; margin-left: 2px; }
html.kid .badge { background: var(--berry); color: #fff; font-family: var(--font-display); font-weight: 600; min-width: 22px; height: 22px; border-radius: 11px; display: inline-grid; place-items: center; font-size: .78rem; padding: 0 6px; box-shadow: 0 0 0 2px var(--surface); }
html.kid .who .btn { border-radius: 99px; }
html.kid .kid-mail { display: none; position: relative; }
html.kid .kid-mail .badge { position: absolute; top: -6px; right: -6px; margin: 0; }

@media (max-width: 1320px) and (min-width: 861px) { html.kid .phead .brand-name { display: none; } }
@media (max-width: 1100px) and (min-width: 861px) { html.kid .ptabs a .tl { display: none; } html.kid .ptabs a { padding: 6px; } }
@media (max-width: 860px) {
  html.kid h1 { font-size: 1.75rem; }
  html.kid .phead-in { padding: 8px 16px; gap: 10px; }
  html.kid .brand-mark.fox { width: 42px; height: 42px; }
  html.kid .brand-name { font-size: 1.05rem; }
  html.kid .kid-mail { display: inline-grid; }
  html.kid .main { padding-block: 18px 130px; }
  html.kid .tabbar {
    grid-template-columns: repeat(5, 1fr); align-items: end; background: var(--surface); border-top: 3px solid var(--line);
    padding: 6px 6px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  html.kid .tabbar a { gap: 3px; font-family: var(--font-display); font-weight: 600; font-size: .8rem; color: var(--muted); padding: 2px 0; }
  html.kid .tabbar a[data-tab="messages"] { display: none; }
  html.kid .tabbar a .ti { width: 46px; height: 38px; border-radius: 14px; display: grid; place-items: center; color: var(--tc); transition: background .2s, transform .2s; }
  html.kid .tabbar a svg { width: 24px; height: 24px; stroke-width: 2.3; }
  html.kid .tabbar a.on { color: var(--tc); }
  html.kid .tabbar a.on .ti { background: var(--tc); color: #fff; animation: kid-hop .45s cubic-bezier(.3, 1.6, .5, 1); }
  html.kid .tabbar a[data-tab="log"] .ti { width: 62px; height: 62px; border-radius: 50%; background: var(--leaf); color: #fff; box-shadow: 0 5px 0 var(--leaf-deep), 0 0 0 5px var(--surface); margin-top: -26px; }
  html.kid .tabbar a[data-tab="log"] svg { width: 30px; height: 30px; stroke-width: 2.6; }
  html.kid .tabbar a[data-tab="log"]:active .ti { transform: translateY(4px); box-shadow: 0 1px 0 var(--leaf-deep), 0 0 0 5px var(--surface); }
  html.kid .toasts { bottom: calc(108px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- building blocks ---------- */
html.kid .card { border: 2px solid var(--line); border-radius: var(--r); padding: 20px; box-shadow: var(--edge); }
html.kid .card h2 { display: flex; align-items: center; gap: 10px; }
html.kid .btn {
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: .01em;
  min-height: 52px; padding: 10px 20px; border-radius: 16px; border: 2px solid var(--line); background: var(--surface); color: var(--ink);
  box-shadow: 0 4px 0 var(--line); transition: transform .08s ease, box-shadow .08s ease, filter .15s; position: relative; top: 0;
}
html.kid .btn:hover { background: var(--surface); filter: brightness(.98); }
html.kid .btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--line); }
html.kid .btn svg { width: 21px; height: 21px; stroke-width: 2.3; }
html.kid .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 4px 0 var(--accent-deep); }
html.kid .btn.primary:active { box-shadow: 0 0 0 var(--accent-deep); }
html.kid .btn.go { background: var(--fox); border-color: var(--fox); color: #fff; box-shadow: 0 5px 0 var(--fox-deep); }
html.kid .btn.go:active { box-shadow: 0 0 0 var(--fox-deep); transform: translateY(5px); }
html.kid .btn.leaf { background: var(--leaf); border-color: var(--leaf); color: #fff; box-shadow: 0 4px 0 var(--leaf-deep); }
html.kid .btn.leaf:active { box-shadow: 0 0 0 var(--leaf-deep); }
html.kid .btn.ghost { border-color: transparent; background: transparent; box-shadow: none; }
html.kid .btn.ghost:hover { background: var(--sunk); }
html.kid .btn.sm { min-height: 42px; padding: 6px 14px; font-size: .95rem; border-radius: 13px; box-shadow: 0 3px 0 var(--line); }
html.kid .btn.sm:active { transform: translateY(3px); box-shadow: none; }
html.kid .btn.primary.sm { box-shadow: 0 3px 0 var(--accent-deep); }
html.kid .btn.big { min-height: 60px; font-size: 1.25rem; padding: 12px 28px; border-radius: 18px; }
html.kid .btn.wide { width: 100%; }
html.kid .iconbtn { border-radius: 12px; min-width: 44px; min-height: 44px; }

html.kid label.field { font-family: var(--font-display); font-weight: 600; font-size: 1rem; gap: 6px; }
html.kid .input, html.kid select.input, html.kid textarea.input { border: 2px solid var(--line); border-radius: 14px; min-height: 52px; padding: 11px 14px; font-size: 1.05rem; background: var(--surface); }
html.kid .search .input { padding-left: 44px; }
html.kid .search svg { left: 14px; width: 22px; height: 22px; stroke-width: 2.3; color: var(--sky); }
html.kid .input:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 4px var(--sky-soft); }
html.kid .check { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; gap: 10px; }
html.kid .check input { width: 24px; height: 24px; accent-color: var(--leaf); }

html.kid .chip { font-family: var(--font-display); font-weight: 600; font-size: .98rem; padding: 8px 16px; border: 2px solid var(--line); border-radius: 99px; box-shadow: 0 3px 0 var(--line); transition: transform .08s; }
html.kid .chip:active { transform: translateY(3px); box-shadow: none; }
html.kid .chip.on { background: var(--sky); border-color: var(--sky); color: #fff; box-shadow: 0 3px 0 var(--sky-deep); animation: kid-pop .3s ease; }
html.kid #tags .chip:nth-child(6n+1).on { background: var(--fox); border-color: var(--fox); box-shadow: 0 3px 0 var(--fox-deep); }
html.kid #tags .chip:nth-child(6n+2).on { background: var(--leaf); border-color: var(--leaf); box-shadow: 0 3px 0 var(--leaf-deep); }
html.kid #tags .chip:nth-child(6n+3).on { background: var(--berry); border-color: var(--berry); box-shadow: 0 3px 0 var(--berry-deep); }
html.kid #tags .chip:nth-child(6n+4).on { background: var(--accent); border-color: var(--accent); box-shadow: 0 3px 0 var(--accent-deep); }
html.kid #tags .chip:nth-child(6n+5).on { background: var(--sun-deep); border-color: var(--sun-deep); box-shadow: 0 3px 0 #b98400; }

html.kid .pill { font-family: var(--font-display); font-weight: 600; font-size: .85rem; padding: 3px 11px; }
html.kid .seg { background: var(--sunk); border-radius: 16px; padding: 4px; gap: 4px; }
html.kid .seg a, html.kid .seg button { font-family: var(--font-display); font-weight: 600; font-size: 1rem; padding: 9px 16px; border-radius: 12px; }
html.kid .seg .on { background: var(--surface); color: var(--accent); box-shadow: 0 3px 0 var(--line); }

html.kid .notice { border-radius: 18px; padding: 14px 16px; border: 2px solid transparent; font-size: 1.02rem; }
html.kid .notice.ok { background: var(--leaf-soft); border-color: var(--leaf); }
html.kid .notice svg { width: 24px; height: 24px; }

html.kid .bar { height: 16px; border-radius: 99px; background: var(--sunk); }
html.kid .bar > i { border-radius: 99px; background: var(--leaf); box-shadow: inset 0 4px 0 rgba(255, 255, 255, .3); animation: kid-fill 1s cubic-bezier(.2, .8, .2, 1) both; min-width: 16px; }
html.kid .bar > i[style*="width:0%"] { min-width: 0; }
html.kid .bar.big { height: 22px; }

html.kid .list .li { padding: 12px 0; border-bottom: 2px dashed var(--line); }
html.kid .li .t1 { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; }
html.kid .li .t2 { font-size: .92rem; }

html.kid .empty { padding: 20px 16px 26px; gap: 6px; font-size: 1.02rem; }
html.kid .empty .fox { width: 130px; height: 130px; animation: kid-bob 3.2s ease-in-out infinite; }
html.kid .empty b { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; }

html.kid .stamp { border-radius: 12px; border-width: 3px; border-style: dashed; font-family: var(--font-display); background: var(--surface); transform: rotate(-4deg); }
html.kid .stamp b { font-weight: 600; }

html.kid .cover { border-radius: 6px 12px 12px 6px; box-shadow: inset 5px 0 0 rgba(0, 0, 0, .14), 0 4px 0 rgba(30, 35, 90, .14); }
html.kid .cover.gen .ct { font-family: var(--font-display); font-weight: 600; }
html.kid .shelf { gap: 26px 20px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
html.kid .book { gap: 8px; }
html.kid .book .cover { transition: transform .2s cubic-bezier(.3, 1.5, .5, 1); }
html.kid .book:hover .cover { transform: translateY(-6px) rotate(-2deg); }
html.kid .book .bt { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--ink); }
html.kid .book .ba { font-size: .88rem; font-weight: 400; }
@media (max-width: 500px) { html.kid .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; } html.kid .book .cover { font-size: 14px; } }

html.kid .starpick { gap: 8px; }
html.kid .starpick button { font-size: 2.8rem; color: var(--flame-off); transition: transform .15s; text-shadow: 0 3px 0 var(--line); }
html.kid .starpick button.on { color: var(--sun); text-shadow: 0 3px 0 var(--sun-deep); animation: kid-star .4s cubic-bezier(.3, 1.8, .5, 1); }
html.kid .starpick button:hover { transform: scale(1.12) rotate(-6deg); }
html.kid .stars { color: var(--sun-deep); letter-spacing: 1px; }

html.kid .tmpl button { border: 2px solid var(--line); border-radius: 16px; padding: 12px 14px; font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; box-shadow: 0 3px 0 var(--line); }
html.kid .tmpl button.on { border-color: var(--berry); background: var(--berry-soft); color: var(--ink); box-shadow: 0 3px 0 var(--berry); }
html.kid .msg { border-radius: 18px; padding: 14px 16px; background: var(--sunk); }
html.kid .msg.unread { box-shadow: inset 5px 0 0 var(--berry); }
html.kid .msg.staff { background: var(--sun-soft); }
html.kid .update { border-left: 5px solid var(--sun); border-radius: 4px; }
html.kid .update .ut { font-weight: 600; }

html.kid .stats { gap: 12px; background: transparent; border: 0; overflow: visible; }
html.kid .stat { border: 2px solid var(--line); border-radius: 18px; box-shadow: var(--edge); padding: 14px 16px; }
html.kid .stat .v { font-weight: 600; font-size: 2rem; color: var(--sky-deep); }
html.kid .stat:nth-child(2) .v { color: var(--leaf-deep); }
html.kid .stat:nth-child(3) .v { color: var(--fox-deep); }
html.kid .stat:nth-child(4) .v { color: var(--berry-deep); }
html.kid .stat.attn .v { color: var(--accent); }
html.kid .stat .l { font-family: var(--font-display); font-weight: 500; font-size: .9rem; }

html.kid .goal { padding: 14px 0; border-bottom: 2px dashed var(--line); }
html.kid .goal .gl { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; }
html.kid .goal.done .gl { color: var(--leaf-deep); }
html.kid .goal .gv { font-family: var(--font-display); font-weight: 600; }
html.kid .goal .bar { margin-top: 8px; }
html.kid .goal.done .bar > i { background: var(--leaf); }
html.kid .goal:not(.done) .bar > i { background: var(--sky); }
html.kid .tick { color: #fff; background: var(--leaf); border-radius: 50%; padding: 3px; width: 26px; height: 26px; vertical-align: -6px; margin-right: 6px; animation: kid-pop .4s ease both; }
html.kid .badges figure { transition: transform .2s; }
html.kid .badges figure:hover { transform: translateY(-4px) rotate(-3deg); }
html.kid .badges figure span { font-size: .85rem; }

/* ---------- modal and toasts ---------- */
html.kid .modal-back { background: rgba(20, 24, 70, .5); backdrop-filter: blur(3px); }
html.kid .modal { border-radius: 28px; padding: 22px; border: 3px solid var(--line); box-shadow: 0 8px 0 var(--line), var(--shadow); animation: kid-in .35s cubic-bezier(.3, 1.4, .5, 1); }
html.kid .modal-head h2 { font-size: 1.5rem; }
html.kid .modal-foot { gap: 10px; }
html.kid .toast {
  display: flex; align-items: center; gap: 12px; background: var(--surface); color: var(--ink); border: 3px solid var(--leaf); border-radius: 20px;
  padding: 8px 18px 8px 8px; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; box-shadow: 0 5px 0 var(--leaf-deep), var(--shadow);
  animation: kid-toast .5s cubic-bezier(.3, 1.6, .5, 1);
}
html.kid .toast .fox { width: 52px; height: 52px; flex: none; animation: kid-wiggle 1s ease .3s; }
html.kid .toast.bad { background: var(--surface); color: var(--ink); border-color: var(--fox); box-shadow: 0 5px 0 var(--fox-deep), var(--shadow); padding-left: 18px; }

/* ---------- sign-in ---------- */
html.kid .auth-card { width: min(460px, 100%); }
html.kid .auth-hello { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
html.kid .auth-hello .fox { width: 190px; height: 190px; }
html.kid .auth-hello h1 { font-size: 2rem; }
html.kid .auth-hello p { font-size: 1.1rem; color: var(--muted); }
html.kid .google-btn { box-shadow: 0 4px 0 var(--line); }

/* ---------- home ---------- */
.kh-hero {
  display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 18px;
  background: var(--sun-soft); border: 2px solid var(--sun); border-radius: 28px; padding: 16px 22px 16px 10px; box-shadow: 0 5px 0 var(--sun); position: relative; overflow: hidden;
}
.kh-hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: var(--sun); opacity: .25; pointer-events: none; }
.kh-hero .fox { width: 170px; height: 170px; }
.kh-hero .say { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; position: relative; z-index: 1; min-width: 0; }
.kh-hero h1 { font-size: 2.4rem; line-height: 1.05; }
.kh-hero .bubble { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; line-height: 1.35; color: var(--ink); max-width: 34ch; }
.kh-hero .meta { color: var(--muted); font-size: .95rem; }
@media (max-width: 560px) {
  .kh-hero { grid-template-columns: 110px minmax(0, 1fr); padding: 12px 14px 14px 4px; gap: 8px; }
  .kh-hero .fox { width: 110px; height: 110px; }
  .kh-hero h1 { font-size: 1.8rem; }
  .kh-hero .bubble { font-size: 1.02rem; }
  html.kid .kh-hero .btn.big { min-height: 52px; font-size: 1.08rem; padding: 10px 18px; }
}

.kh-tiles { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .kh-tiles { grid-template-columns: 1fr 1fr; } .kh-tiles .kh-streak { grid-column: 1 / -1; } }
.kh-tile { background: var(--surface); border: 2px solid var(--line); border-radius: var(--r); box-shadow: var(--edge); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; text-decoration: none; color: var(--ink); }
.kh-tile .lbl { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--muted); }
.kh-tile .big { font-family: var(--font-display); font-weight: 600; font-size: 2.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.kh-tile .note { font-size: .92rem; color: var(--muted); }
.kh-streak { background: var(--fox-soft); border-color: var(--fox); box-shadow: 0 4px 0 var(--fox); }
.kh-streak .top { display: flex; align-items: center; gap: 12px; }
.kh-streak .big { color: var(--fox-deep); }
.kh-streak .flame { width: 58px; height: 58px; flex: none; }
.kh-streak .flame.lit { animation: kid-flicker 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
.kh-dots { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
.kh-dots .d { display: flex; flex-direction: column; align-items: center; gap: 3px; font-family: var(--font-display); font-weight: 600; font-size: .78rem; color: var(--muted); }
.kh-dots .d i { width: 100%; max-width: 38px; aspect-ratio: 1; border-radius: 50%; background: var(--surface); border: 3px solid var(--flame-off); display: grid; place-items: center; }
.kh-dots .d.read i { background: var(--fox); border-color: var(--fox-deep); animation: kid-pop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.kh-dots .d.read i svg { width: 60%; height: 60%; }
.kh-dots .d.today i { border-style: dashed; border-color: var(--fox); }
.kh-dots .d.today { color: var(--fox-deep); }
.kh-dots .d.fix i { border-color: var(--berry); border-style: dashed; }
.kh-ring { display: flex; align-items: center; gap: 12px; }
.kh-ring svg { width: 84px; height: 84px; flex: none; transform: rotate(-90deg); }
.kh-ring .trk { stroke: var(--sunk); }
.kh-ring .val { stroke: var(--leaf); stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(.2, .8, .2, 1); }
.kh-ring .big { font-size: 2rem; color: var(--leaf-deep); }
.kh-books .big { color: var(--accent); }

.kh-fix { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; background: var(--berry-soft); border: 2px solid var(--berry); box-shadow: 0 4px 0 var(--berry); border-radius: var(--r); padding: 10px 18px 10px 6px; }
.kh-fix .fox { width: 96px; height: 96px; }
.kh-fix b { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; display: block; }
html.kid .kh-fix .btn { margin-top: 8px; background: var(--berry); border-color: var(--berry); color: #fff; box-shadow: 0 4px 0 var(--berry-deep); }
.kh-ready { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; background: var(--leaf-soft); border: 2px solid var(--leaf); box-shadow: 0 4px 0 var(--leaf); border-radius: var(--r); padding: 10px 18px 10px 6px; text-decoration: none; color: var(--ink); }
.kh-ready .fox { width: 96px; height: 96px; }
.kh-ready b { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; display: block; color: var(--leaf-deep); }

.kh-shelf { display: grid; grid-auto-flow: column; grid-auto-columns: 168px; gap: 18px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x mandatory; }
.kh-shelf > div { scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kh-shelf .cover { width: 100%; font-size: 15px; }
.kh-shelf .t { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; line-height: 1.2; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.kh-shelf .due { font-size: .88rem; color: var(--muted); }
.kh-shelf .due.late { color: var(--bad); font-weight: 700; }
.kh-shelf .acts { display: flex; gap: 6px; flex-wrap: wrap; }
html.kid .kh-shelf .acts .btn { flex: 1; padding-inline: 8px; }

/* ---------- log reading ---------- */
.kl-book { display: flex; gap: 14px; align-items: center; background: var(--sunk); border-radius: 18px; padding: 10px 14px; }
.kl-book b { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; display: block; line-height: 1.2; }
.kl-q { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }
.kl-mins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kl-mins button {
  --c: var(--sky); --cd: var(--sky-deep);
  border: 2px solid var(--line); background: var(--surface); border-radius: 18px; padding: 10px 6px 8px; cursor: pointer; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 0; box-shadow: 0 4px 0 var(--line); transition: transform .08s;
}
.kl-mins button b { font-family: var(--font-display); font-weight: 600; font-size: 1.8rem; line-height: 1.05; color: var(--c); }
.kl-mins button span { font-family: var(--font-display); font-weight: 500; font-size: .85rem; color: var(--muted); }
.kl-mins button:active { transform: translateY(4px); box-shadow: none; }
.kl-mins button.on { background: var(--c); border-color: var(--c); box-shadow: 0 4px 0 var(--cd); animation: kid-pop .3s ease; }
.kl-mins button.on b, .kl-mins button.on span { color: #fff; }
.kl-mins button:nth-child(2) { --c: var(--leaf); --cd: var(--leaf-deep); }
.kl-mins button:nth-child(3) { --c: var(--fox); --cd: var(--fox-deep); }
.kl-mins button:nth-child(4) { --c: var(--berry); --cd: var(--berry-deep); }
.kl-mins button:nth-child(5) { --c: var(--accent); --cd: var(--accent-deep); }
.kl-mins button:nth-child(6) { --c: var(--sun-deep); --cd: #b98400; }
.kl-step { display: flex; align-items: center; gap: 10px; justify-content: center; }
html.kid .kl-step .btn { width: 56px; padding: 0; font-size: 1.6rem; }
html.kid .kl-step .input { width: 120px; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; }
.kl-step span { font-family: var(--font-display); font-weight: 500; color: var(--muted); }
.kl-days { display: flex; gap: 8px; flex-wrap: wrap; }
html.kid .kl-days .chip { font-size: 1rem; }
html.kid .kl-days .chip.fix { border-color: var(--berry); color: var(--berry-deep); }
html.kid .kl-days .chip.fix.on { background: var(--berry); color: #fff; box-shadow: 0 3px 0 var(--berry-deep); }
.kl-fin { display: flex; align-items: center; gap: 14px; border: 2px solid var(--line); border-radius: 18px; padding: 10px 16px; cursor: pointer; box-shadow: 0 4px 0 var(--line); font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }
.kl-fin input { position: absolute; opacity: 0; pointer-events: none; }
.kl-fin .box { width: 34px; height: 34px; border-radius: 10px; border: 3px solid var(--line-deep); display: grid; place-items: center; flex: none; color: transparent; transition: background .15s; }
.kl-fin .box svg { width: 22px; height: 22px; stroke-width: 3.2; }
.kl-fin:has(input:checked) { border-color: var(--leaf); background: var(--leaf-soft); box-shadow: 0 4px 0 var(--leaf); }
.kl-fin:has(input:checked) .box { background: var(--leaf); border-color: var(--leaf); color: #fff; animation: kid-pop .3s ease; }
.kl-fin:has(input:focus-visible) { outline: 3px solid var(--sky); outline-offset: 3px; }

/* ---------- celebrations ---------- */
.kc-back {
  --kc: var(--sky); --kcd: var(--sky-deep);
  position: fixed; inset: 0; z-index: 100; background: var(--kc); color: #fff; display: grid; place-items: center; overflow: hidden;
  padding: calc(20px + env(safe-area-inset-top, 0px)) 16px calc(20px + env(safe-area-inset-bottom, 0px)); animation: kid-fade .25s ease;
}
.kc-back.fox { --kc: #ff8a1f; --kcd: #d86400; }
.kc-back.sun { --kc: #6a4cf0; --kcd: #4c2fcc; }
.kc-back.leaf { --kc: #22b35a; --kcd: #168a43; }
.kc-back.berry { --kc: #ff5c9a; --kcd: #d93b77; }
.kc-back.sky { --kc: #1e9ee8; --kcd: #0d7dc0; }
.kc-rays {
  position: absolute; left: 50%; top: 38%; width: 180vmax; height: 180vmax; margin: -90vmax 0 0 -90vmax; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 255, 255, .13) 0 9deg, rgba(255, 255, 255, 0) 9deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, #000 18%, transparent 55%); mask-image: radial-gradient(circle, #000 0, #000 18%, transparent 55%);
  animation: kid-spin 40s linear infinite;
}
.kc-stage { position: relative; width: min(460px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.kc-media { position: relative; width: 230px; height: 230px; display: grid; place-items: center; animation: kid-popin .7s cubic-bezier(.3, 1.6, .5, 1) both; }
.kc-media .fox { width: 230px; height: 230px; }
.kc-media.duo { width: 300px; }
.kc-media.duo .fox { width: 190px; height: 190px; position: absolute; right: -10px; bottom: 0; }
.kc-media .cover { position: absolute; left: 8px; bottom: 30px; width: 120px; font-size: 14px; animation: kid-fly .9s cubic-bezier(.3, 1.4, .5, 1) .15s both; box-shadow: 0 8px 0 rgba(0, 0, 0, .18); }
.kc-media .badge-big { animation: kid-spinin 1.1s cubic-bezier(.3, 1.3, .5, 1) both; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .18)); }
.kc-media .badge-big svg { width: 150px; height: 150px; }
.kc-media.award { width: 300px; }
.kc-media.award .fox { width: 170px; height: 170px; position: absolute; right: -14px; bottom: -6px; }
.kc-media.award .badge-big { position: absolute; left: 6px; top: 20px; }
.kc-title { font-family: var(--font-display); font-weight: 600; font-size: 2.5rem; line-height: 1.05; text-wrap: balance; animation: kid-up .5s ease .25s both; text-shadow: 0 3px 0 var(--kcd); }
.kc-sub { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; line-height: 1.35; opacity: .95; animation: kid-up .5s ease .35s both; max-width: 30ch; text-wrap: balance; }
.kc-chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.kc-chip { background: #fff; color: #1d2150; border-radius: 18px; padding: 8px 16px 8px 10px; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 0 var(--kcd); animation: kid-up .5s cubic-bezier(.3, 1.5, .5, 1) both; font-family: var(--font-display); }
.kc-chip b { font-weight: 600; font-size: 1.6rem; font-variant-numeric: tabular-nums; line-height: 1; }
.kc-chip span { font-weight: 500; font-size: .95rem; color: #5a618f; text-align: left; line-height: 1.15; }
.kc-chip .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #e0f2ff; color: #0f84cb; flex: none; }
.kc-chip .ic svg { width: 24px; height: 24px; stroke-width: 2.4; }
.kc-chip .flame { width: 40px; height: 40px; flex: none; }
.kc-chip.bump .flame { animation: kid-ignite .8s cubic-bezier(.3, 1.6, .5, 1) .9s both; }
.kc-week { width: 100%; background: rgba(255, 255, 255, .16); border-radius: 18px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; animation: kid-up .5s ease .7s both; }
.kc-week .row { justify-content: space-between; font-family: var(--font-display); font-weight: 500; font-size: 1rem; }
.kc-week .track { height: 20px; border-radius: 99px; background: rgba(0, 0, 0, .18); overflow: hidden; }
.kc-week .track i { display: block; height: 100%; border-radius: 99px; background: #ffd43b; box-shadow: inset 0 5px 0 rgba(255, 255, 255, .35); transition: width 1.2s cubic-bezier(.2, .8, .2, 1); }
.kc-goal { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: #ffe066; }
.kc-foot { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 10px; animation: kid-up .5s ease .5s both; }
html.kid .kc-foot .btn { width: 100%; min-height: 60px; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; border-radius: 18px; background: #fff; color: var(--kcd); border: 0; box-shadow: 0 5px 0 rgba(0, 0, 0, .22); }
html.kid .kc-foot .btn:active { transform: translateY(5px); box-shadow: none; }
html.kid .kc-foot .btn.ghost { background: transparent; color: #fff; box-shadow: none; min-height: 48px; font-size: 1.05rem; text-decoration: underline; text-underline-offset: 4px; }
.kc-steps { display: flex; gap: 6px; }
.kc-steps i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .4); }
.kc-steps i.on { background: #fff; width: 26px; border-radius: 5px; }
.kc-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 120; }
@media (max-height: 700px) { .kc-media, .kc-media .fox { width: 170px; height: 170px; } .kc-media.duo, .kc-media.award { width: 250px; } .kc-media.duo .fox, .kc-media.award .fox { width: 140px; height: 140px; } .kc-title { font-size: 2rem; } }

/* ---------- motion ---------- */
@keyframes kid-fill { from { width: 0; } }
@keyframes kid-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes kid-popin { 0% { transform: scale(.2) rotate(-8deg); opacity: 0; } 60% { transform: scale(1.08) rotate(2deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes kid-in { 0% { transform: translateY(30px) scale(.94); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes kid-up { 0% { transform: translateY(18px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes kid-fade { from { opacity: 0; } }
@keyframes kid-hop { 0% { transform: translateY(0); } 40% { transform: translateY(-8px) scale(1.08); } 100% { transform: none; } }
@keyframes kid-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes kid-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
@keyframes kid-toast { 0% { transform: translateY(40px) scale(.8); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes kid-star { 0% { transform: scale(.5) rotate(-30deg); } 70% { transform: scale(1.3) rotate(8deg); } 100% { transform: scale(1); } }
@keyframes kid-spin { to { transform: rotate(360deg); } }
@keyframes kid-flicker { 0%, 100% { transform: scale(1) rotate(-2deg); } 25% { transform: scale(1.05, .96) rotate(2deg); } 50% { transform: scale(.97, 1.04) rotate(-1deg); } 75% { transform: scale(1.03) rotate(1deg); } }
@keyframes kid-ignite { 0% { transform: scale(.6); filter: grayscale(1); } 50% { transform: scale(1.5) rotate(-8deg); filter: none; } 100% { transform: scale(1); } }
@keyframes kid-fly { 0% { transform: translate(-140px, 80px) rotate(-40deg) scale(.4); opacity: 0; } 100% { transform: rotate(-8deg); opacity: 1; } }
@keyframes kid-spinin { 0% { transform: scale(.1) rotate(-540deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes kid-rise { from { transform: translateY(14px); opacity: .001; } }
html.kid .page > * { animation: kid-rise .45s cubic-bezier(.2, .8, .2, 1) both; }
html.kid .page > *:nth-child(2) { animation-delay: .05s; }
html.kid .page > *:nth-child(3) { animation-delay: .1s; }
html.kid .page > *:nth-child(4) { animation-delay: .15s; }
html.kid .page > *:nth-child(n+5) { animation-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
  html.kid *, html.kid *::before, html.kid *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* demo sign-in buttons wrap at phone width */
html.kid .demo-box .btn { white-space: normal; flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; height: auto; }
html.kid .demo-box .btn .muted { font-size: .9rem; font-weight: 500; }
html.kid .btn.ghost.sm, html.kid .btn.ghost { box-shadow: none; }
html.kid .demo-box .btn.ghost { align-items: center; }