:root {
  --ink: #eef2ff; --muted: #aab9d9; --navy: #dce6ff; --blue: #95cfff;
  --cream: #16213f; --line: #344366; --gold: #ffd582; --green: #8ce4ca;
  --shadow: 0 18px 45px #03091b55;
  color: var(--ink); background: #0b1230;
}
.reward-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.reward-tabs button { min-height: 44px; padding: 9px 14px; border-radius: 12px; }
.reward-tabs [aria-pressed=true] { background: #6555c5; color: white; }
.reward-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; }
#reward-form { margin-bottom: 24px; }
#reward-message { color: #ffda86; }
.reward-tabs button:disabled { opacity: .6; cursor: default; }
body {
  background: radial-gradient(ellipse at 85% 0, #543c7355, transparent 45%), radial-gradient(ellipse at 0 45%, #16607940, transparent 45%), #0b1230;
}
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background-image: radial-gradient(circle, #d1e9ff99 1px, transparent 1.6px), radial-gradient(circle, #fff5cb77 1px, transparent 1.5px);
  background-size: 91px 113px, 157px 173px; background-position: 13px 27px, 54px 81px;
}
.login-shell, .app-shell { isolation: isolate; }
.login-card, .daily-column, .panel, .page-shell {
  border-color: #718cb035; background: linear-gradient(135deg, #1b2949f5, #131e39f5); box-shadow: var(--shadow);
}
.login-card { position: relative; padding-top: 28px; }
.login-card h1 { font-size: 1.8rem; line-height: 1.45; }
.login-card .muted { line-height: 1.8; }
.space-planet { position: relative; width: 80px; height: 80px; margin: 12px auto 32px; border-radius: 50%; background: radial-gradient(circle at 28% 24%, #ffe8bc, #d4a2f2 44%, #6658b3 80%); box-shadow: 0 0 60px #b697ef38, inset -12px -8px 18px #29235366; }
.space-planet::after { content: ''; position: absolute; width: 124px; height: 30px; top: 26px; left: -25px; border: 7px solid #a7d8edaa; border-top-color: #c6e7ff33; border-radius: 50%; transform: rotate(-24deg); }
h1, h2, .task-title { color: #f3f5ff; }
label, .group-title { color: #c3cfe6; min-width: 0; }
input, select { min-width: 0; max-width: 100%; background: #0e1932; border-color: #435274; color: #eef2ff; }
input[type=date] { appearance: none; -webkit-appearance: none; min-inline-size: 0; }
input::-webkit-date-and-time-value { text-align: left; }
input:focus, select:focus { outline-color: #91cfff40; border-color: #91cfff; }
.primary, .pending-card button, .page-nav button.active, .category-tabs button.active { color: #fff; background: linear-gradient(120deg, #6555c5, #4268b8); border-color: #a29bee; box-shadow: 0 5px 18px #7964d52b; }
.primary:hover { background: #7261d4; }
.ghost, .icon-button, .demo-switch button, .page-nav button, .date-return { background: #233354; color: #dbe5fa; border-color: #435274; }
.balance { background: #1c2a48; border-color: #506c9344; }
.balance:first-child strong::before { content: '✦ '; color: #89d8ed; }
.balance:nth-child(2) strong::before { content: '★ '; color: #ffda86; }
.category-tabs button { background: #202f4c; color: #c8d5ec; border-color: #425474; }
.category-tabs button::before { display: block; font-size: 1.3rem; margin-bottom: 5px; }
[data-category=ENGLISH]::before { content: '🌎'; }
[data-category=CHINESE]::before { content: '🪐'; }
[data-category=MATH]::before { content: '🌙'; }
[data-category=LIFE]::before { content: '☀️'; }
.task-card, .pending-card, .history-card, .project-row { background: #1c2c49; border-color: #3c5173; }
.task-card.confirmed { background: #162f3a; opacity: .85; }
.task-card button { background: #2b3b59; color: #c8d6ed; }
.task-card button.checkin { background: linear-gradient(120deg, #91e5ce, #78cbe9); color: #0c3040; box-shadow: 0 5px 16px #72cfe51c; }
.task-title::before { content: '✧'; color: #9fd6ff; margin-right: 8px; }
.confirmed .task-title::before { content: '★'; color: #ffda86; }
.overview-grid div, .mobile-overview div, .weekly-row { background: #21324f; border-color: #3c5173; }
.overview-grid .overview-points, .mobile-overview div.earned { background: #1a3b43; }
.count-badge { background: #4c4163; color: #ffe1a0; }
.streak-panel, .streak-sheet-card { background: linear-gradient(140deg, #343051, #1c2948); }
.streak-flame { background: linear-gradient(135deg, #6752a4, #314c77); box-shadow: 0 0 26px #a38cd72b; }
.streak-item { background: #1d2947; border-color: #75689466; }
.streak-item p, .streak-item-title span, .streak-next, .weekly-remaining { color: #ffe1a0; }
.streak-track { background: #435072; }
.streak-track span { background: linear-gradient(90deg, #8fcde9, #c5a0ef, #ffda86); }
.weekly-row.today { background: #293a5b; outline-color: #869de766; }
.weekly-remaining.done { color: #8ce4ca; }
.import-entry, .project-row:hover { background: #27385a; }
.empty { border-color: #526481; }
.date-control, .mobile-date-control { background: #233454; border-color: #53688b; box-shadow: none; }
.mobile-date-step { background: #233354; color: #dbe5fa; border-color: #435274; }
.mobile-date-step:hover, .mobile-date-step:active { background: #30466f; color: #ffffff; }
.date-picker-wrap { border-color: #526481; }
.date-step:hover { background: #3b4c70; }
.sheet-backdrop { background: #030918aa; }
.calendar-sheet-card { background: #192644; border: 1px solid #526481; max-height: 85dvh; overflow: auto; }
.calendar-sheet-card, .calendar-sheet-card h2, .calendar-sheet-card .eyebrow { color: #eef2ff; }
.calendar-sheet-card .sheet-close { background: transparent; color: #aab9d9; }
.calendar-month-nav button, .calendar-grid button, .calendar-actions button { background: #233354; color: #dbe5fa; border-color: #435274; }
.calendar-grid span { color: #aab9d9; }
.calendar-grid button:hover, .calendar-month-nav button:hover, .calendar-actions button:hover { background: #30466f; }
.calendar-actions { grid-template-columns: minmax(0, 1fr); }
.calendar-month-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 16px 0; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.calendar-grid button { min-width: 0; min-height: 44px; padding: 6px 0; border-radius: 12px; }
.calendar-grid [aria-pressed="true"] { background: #6754bf; border-color: #c4b5fd; }
.calendar-grid [aria-current="date"] { box-shadow: inset 0 0 0 2px #7dd3fc; }
.danger { border-color: #d97986; background: #3a1f39; color: #ffb9c2; }
.danger:hover, .danger:focus-visible { background: #b84d68; border-color: #ef8b9a; color: #fff7f7; }
.reward-config-grid { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: 18px; align-items: start; }
.reward-config-grid > form { margin: 0; padding: 18px; border: 1px solid #526481; border-radius: 18px; background: #14213e; }
.reward-list-panel { margin: 0; box-shadow: none; }
.parent-reward-heading { margin: 18px 0 10px; }
@media (max-width: 768px) { .reward-config-grid { grid-template-columns: 1fr; } }
@media (min-width: 769px) { .page-nav .mobile-reward-nav { display: none; } }
.history-filters { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; }
.error { color: #ffb5bf; }
.mobile-streak-button { background: linear-gradient(120deg, #493861, #2e4265); border-color: #9f88bd; color: #ffe1a0; }
button { transition: background .18s, box-shadow .18s; }
button:focus-visible { outline: 3px solid #a8dfff; outline-offset: 3px; }
@media (max-width: 767px) {
  .page-nav, .mobile-date-bar { background: #101b34f5; border-color: #344568; }
  .category-tabs { background: #172440f5; }
  .history-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mobile-date-bar { justify-content: flex-start; }
  .mobile-date-trigger { min-width: 104px; padding: 0 6px; }
  .topbar h1 { font-size: 1.45rem; line-height: 1.5; }
  .login-card { padding: 26px 22px; }
  input, select { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }