/* ========================================================================== Summer — base styles Mobile-first, kid-friendly, per-kid color theming. ========================================================================== */ :root { --bg: #fffaf0; --bg-card: #ffffff; --text: #1f2937; --text-muted: #6b7280; --border: #e5e7eb; --primary: #f59e0b; --primary-dark: #d97706; --secondary: #3b82f6; --success: #10b981; --success-dark: #059669; --danger: #ef4444; --danger-dark: #dc2626; --reward: #ec4899; --reward-dark: #db2777; --kid-color: #3b82f6; --shadow: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.10); --radius: 12px; --radius-sm: 8px; --topbar-h: 56px; --bottombar-h: 64px; --content-pad: 16px; } /* -------------------------------------------------------------------------- Dark mode — toggled by setting [data-theme="dark"] on . Preference is persisted in localStorage by app.js; the inline script in base.html sets the attribute before paint to prevent a white flash. -------------------------------------------------------------------------- */ :root[data-theme="dark"] { --bg: #1a1a1a; --bg-card: #2a2a2a; --text: #e5e7eb; --text-muted: #9ca3af; --border: #374151; --primary: #fbbf24; --primary-dark: #f59e0b; --secondary: #60a5fa; --success: #34d399; --success-dark: #10b981; --danger: #f87171; --danger-dark: #ef4444; --reward: #f472b6; --reward-dark: #ec4899; --shadow: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5); } :root[data-theme="dark"] body { background: var(--bg); color: var(--text); } :root[data-theme="dark"] .topbar { background: linear-gradient(180deg, #1f1f1f 0%, #1a1a1a 100%); } :root[data-theme="dark"] .bottombar { background: var(--bg-card); } :root[data-theme="dark"] .topnav a:hover { background: rgba(255,255,255,0.05); } :root[data-theme="dark"] .form-row input[type="text"], :root[data-theme="dark"] .form-row input[type="number"], :root[data-theme="dark"] .form-row input[type="password"], :root[data-theme="dark"] .form-row select, :root[data-theme="dark"] .pin-input { background: #1f1f1f; color: var(--text); border-color: var(--border); } :root[data-theme="dark"] .form-row input[type="color"] { background: #1f1f1f; } :root[data-theme="dark"] .flash-msg { background: #064e3b; color: #d1fae5; border-color: #065f46; } :root[data-theme="dark"] .flash-error { background: #7f1d1d; color: #fee2e2; border-color: #991b1b; } :root[data-theme="dark"] .leader-row-1, :root[data-theme="dark"] .leader-row-2, :root[data-theme="dark"] .leader-row-3 { background: var(--bg-card); } :root[data-theme="dark"] .badge { background: #1f1f1f; } :root[data-theme="dark"] .badge-earned { background: linear-gradient(135deg, #422006 0%, #2a2a2a 100%); } :root[data-theme="dark"] .manage-row { background: var(--bg-card); } :root[data-theme="dark"] .manage-summary:hover { background: rgba(255,255,255,0.04); } :root[data-theme="dark"] .emoji-option { background: var(--bg-card); } :root[data-theme="dark"] .emoji-option:hover { background: rgba(255,255,255,0.06); } :root[data-theme="dark"] .emoji-option.selected { background: #422006; } :root[data-theme="dark"] .rewards-header h1 { color: var(--text); } :root[data-theme="dark"] .reward-cost { color: var(--primary); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 16px; line-height: 1.5; color: var(--text); background: var(--bg); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } body { min-height: 100vh; padding-bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom, 0)); } @media (min-width: 768px) { body { padding-bottom: 0; } } a { color: var(--secondary); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { margin: 0 0 12px; line-height: 1.2; } h1 { font-size: 1.6rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; } p { margin: 0 0 12px; } .muted { color: var(--text-muted); } .small { font-size: 0.85rem; } code { background: #fef3c7; padding: 1px 6px; border-radius: 4px; font-size: 0.9em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- Top bar -------------------------------------------------------------------------- */ .topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 10px var(--content-pad); background: linear-gradient(180deg, #fffbeb 0%, #fffaf0 100%); border-bottom: 1px solid var(--border); padding-top: calc(10px + env(safe-area-inset-top, 0)); height: calc(var(--topbar-h) + env(safe-area-inset-top, 0)); } .brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.15rem; color: var(--text); } .brand:hover { text-decoration: none; } .brand-emoji { font-size: 1.4rem; } .topnav { display: flex; gap: 12px; align-items: center; } .topnav a { font-size: 0.9rem; padding: 6px 10px; border-radius: var(--radius-sm); color: var(--text); } .topnav a:hover { background: #fef3c7; text-decoration: none; } .topnav a.nav-admin { background: var(--primary); color: white; font-weight: 600; } .topnav a.nav-admin:hover { background: var(--primary-dark); } .topnav a.nav-logout { font-size: 0.8rem; color: var(--text-muted); } @media (max-width: 480px) { .topnav { gap: 6px; } .topnav a:not(.nav-admin):not(.nav-logout) { display: none; } } /* -------------------------------------------------------------------------- Bottom bar (mobile only) -------------------------------------------------------------------------- */ .bottombar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10; display: grid; grid-template-columns: repeat(5, 1fr); background: white; border-top: 1px solid var(--border); height: calc(var(--bottombar-h) + env(safe-area-inset-bottom, 0)); padding-bottom: env(safe-area-inset-bottom, 0); box-shadow: 0 -2px 8px rgba(0,0,0,0.04); } .bottombar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 0.7rem; font-weight: 600; color: var(--text-muted); min-height: 44px; padding: 4px; } .bottombar a:hover { color: var(--primary); text-decoration: none; } .bottombar .bb-icon { font-size: 1.4rem; } @media (min-width: 768px) { .bottombar { display: none; } } /* -------------------------------------------------------------------------- Flash messages -------------------------------------------------------------------------- */ .flash { margin: 12px var(--content-pad) 0; padding: 12px 16px; border-radius: var(--radius); font-weight: 600; text-align: center; box-shadow: var(--shadow); } .flash-msg { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; } .flash-error { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; } /* -------------------------------------------------------------------------- Layout -------------------------------------------------------------------------- */ .content { max-width: 900px; margin: 0 auto; padding: 20px var(--content-pad) 24px; } .page-header h1 { margin-bottom: 4px; } .hero { text-align: center; margin-bottom: 24px; } .hero-title { font-size: 2rem; margin-bottom: 4px; } .hero-sub { color: var(--text-muted); margin: 0; } .empty-state { text-align: center; padding: 40px 16px; color: var(--text-muted); } /* -------------------------------------------------------------------------- Card -------------------------------------------------------------------------- */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 18px; box-shadow: var(--shadow); } .section-title { font-size: 1.1rem; margin-bottom: 14px; color: var(--text); font-weight: 700; } /* -------------------------------------------------------------------------- Home: leaderboard + kid cards -------------------------------------------------------------------------- */ .leaderboard { margin-bottom: 22px; } .leaderboard-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .leader-row { display: grid; grid-template-columns: 36px 36px 1fr auto; align-items: center; gap: 12px; background: var(--bg-card); border: 2px solid var(--kid-color, var(--secondary)); border-radius: var(--radius); padding: 10px 14px; box-shadow: var(--shadow); } .leader-medal { font-size: 1.6rem; text-align: center; } .leader-avatar { font-size: 1.6rem; text-align: center; } .leader-name { font-weight: 700; font-size: 1.1rem; color: var(--text); } .leader-pts { font-weight: 700; font-size: 1.1rem; color: var(--kid-color, var(--secondary)); } .leader-row-1 { background: linear-gradient(135deg, #fef3c7 0%, #fffaf0 100%); } .leader-row-2 { background: linear-gradient(135deg, #f1f5f9 0%, #fffaf0 100%); } .leader-row-3 { background: linear-gradient(135deg, #fed7aa 0%, #fffaf0 100%); } .kids-grid .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } .kid-card { display: block; background: var(--bg-card); border: 2px solid var(--kid-color, var(--secondary)); border-radius: var(--radius); padding: 14px; color: var(--text); box-shadow: var(--shadow); transition: transform 0.1s; } .kid-card:hover { text-decoration: none; transform: translateY(-2px); } .kid-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .kid-avatar { font-size: 2rem; } .kid-rank { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; } .kid-name { font-weight: 700; font-size: 1.15rem; } .kid-balance { font-size: 1.6rem; font-weight: 800; color: var(--kid-color, var(--secondary)); } .kid-balance .pts { font-size: 0.9rem; color: var(--text-muted); font-weight: 600; } .kid-weekly { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; } /* -------------------------------------------------------------------------- Kid detail -------------------------------------------------------------------------- */ .kid-header { background: linear-gradient(135deg, var(--kid-color) 0%, color-mix(in srgb, var(--kid-color) 70%, white) 100%); color: white; border-radius: var(--radius); padding: 18px 20px; margin-bottom: 18px; box-shadow: var(--shadow-lg); } .back-link { color: white; opacity: 0.85; font-size: 0.9rem; } .back-link:hover { opacity: 1; text-decoration: none; } .kid-hero { display: flex; align-items: center; gap: 16px; margin: 10px 0 14px; } .kid-hero-avatar { font-size: 3rem; } .kid-hero-name { color: white; margin: 0; } .kid-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; } .stat { background: rgba(255,255,255,0.18); border-radius: var(--radius-sm); padding: 8px 4px; } .stat-num { font-size: 1.5rem; font-weight: 800; } .stat-label { font-size: 0.75rem; opacity: 0.9; } /* -------------------------------------------------------------------------- Badges -------------------------------------------------------------------------- */ .badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; } .badge { text-align: center; border-radius: var(--radius); padding: 12px 8px; border: 2px solid var(--border); background: #f9fafb; } .badge-earned { background: linear-gradient(135deg, #fef3c7 0%, #ffffff 100%); border-color: var(--primary); } .badge-locked { opacity: 0.5; filter: grayscale(60%); } .badge-emoji { font-size: 1.8rem; margin-bottom: 4px; } .badge-name { font-weight: 700; font-size: 0.85rem; } .badge-desc { font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; } /* -------------------------------------------------------------------------- Timeline (kid detail) -------------------------------------------------------------------------- */ .timeline { list-style: none; padding: 0; margin: 0; } .timeline-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); } .timeline-item:last-child { border-bottom: 0; } .timeline-emoji { font-size: 1.4rem; line-height: 1.2; } .timeline-body { flex: 1; } .timeline-title { font-weight: 600; } .timeline-pts { color: var(--success); font-weight: 700; margin-left: 6px; } .timeline-pts-spend { color: var(--reward-dark); } .timeline-meta { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; } /* Status-aware timeline variants for the kid chore-request workflow. */ .timeline-pending { opacity: 0.65; } .timeline-pending .timeline-emoji { filter: grayscale(40%); } .timeline-pts-pending { color: var(--text-muted); font-weight: 600; font-size: 0.85rem; } .timeline-denied { opacity: 0.85; } .timeline-pts-denied { color: var(--danger-dark); font-weight: 700; font-size: 0.85rem; } .timeline-denial { font-style: italic; color: var(--danger-dark); background: rgba(239, 68, 68, 0.08); padding: 4px 8px; border-radius: var(--radius-sm); margin-top: 4px; } /* Pending approvals section on the parent dashboard. */ .pending-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; flex-wrap: wrap; } .pending-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; flex-wrap: wrap; } .pending-avatar { font-size: 1.5rem; } .pending-name { font-weight: 700; } .pending-chore { font-weight: 600; } .pending-when { color: var(--text-muted); font-size: 0.85rem; } .pending-note { color: var(--text-muted); font-style: italic; font-size: 0.85rem; width: 100%; margin-top: 4px; } .pending-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .inline-action { display: flex; flex-direction: row; gap: 6px; align-items: center; flex-wrap: nowrap; } .inline-action .btn { min-height: 36px; padding: 8px 12px; font-size: 0.9rem; white-space: nowrap; } .pending-reason { font-size: 0.85rem; padding: 6px 8px; border: 2px solid var(--border); border-radius: var(--radius-sm); background: white; font-family: inherit; min-width: 140px; } :root[data-theme="dark"] .pending-reason { background: #1f1f1f; color: var(--text); border-color: var(--border); } .pending-pts { width: 70px; padding: 6px 8px; font-size: 0.9rem; font-weight: 600; text-align: right; border: 2px solid var(--border); border-radius: var(--radius-sm); background: white; color: var(--text); font-family: inherit; } .pending-pts:focus { border-color: var(--primary); outline: none; } .pending-pts-label { font-size: 0.85rem; color: var(--text-muted); margin-left: -2px; } :root[data-theme="dark"] .pending-pts { background: #1f1f1f; color: var(--text); border-color: var(--border); } /* -------------------------------------------------------------------------- Chore catalog (public) -------------------------------------------------------------------------- */ .chore-list { list-style: none; padding: 0; margin: 0; } .chore-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); } .chore-row:last-child { border-bottom: 0; } .chore-info { flex: 1; } .chore-name { font-weight: 600; } .chore-desc { font-size: 0.85rem; color: var(--text-muted); margin-top: 2px; } .chore-pts { font-size: 1.1rem; font-weight: 700; color: var(--primary-dark); white-space: nowrap; } .chore-pts .pts { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; } /* -------------------------------------------------------------------------- Login -------------------------------------------------------------------------- */ .login-card { max-width: 360px; margin: 40px auto; background: var(--bg-card); border-radius: var(--radius); padding: 24px; text-align: center; box-shadow: var(--shadow-lg); } .login-form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; } .pin-input { font-size: 1.5rem; text-align: center; letter-spacing: 0.3em; padding: 14px; border: 2px solid var(--border); border-radius: var(--radius); background: #fffbeb; } .pin-input:focus { outline: 0; border-color: var(--primary); } /* -------------------------------------------------------------------------- Admin nav -------------------------------------------------------------------------- */ .admin-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; border-bottom: 1px solid var(--border); padding-bottom: 0; } .admin-nav a { padding: 8px 14px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; color: var(--text-muted); font-weight: 600; font-size: 0.9rem; border-bottom: 3px solid transparent; margin-bottom: -1px; } .admin-nav a:hover { text-decoration: none; color: var(--text); } .admin-nav a.active { color: var(--primary-dark); border-bottom-color: var(--primary); } /* -------------------------------------------------------------------------- Forms -------------------------------------------------------------------------- */ .quick-form, .inline-form { display: flex; flex-direction: column; gap: 12px; } .form-row { display: flex; flex-direction: column; gap: 4px; } .form-row label { font-weight: 600; font-size: 0.9rem; } .form-row input[type="text"], .form-row input[type="number"], .form-row input[type="password"], .form-row select, .form-row input[type="color"] { font-size: 1rem; padding: 10px 12px; border: 2px solid var(--border); border-radius: var(--radius-sm); background: white; font-family: inherit; min-height: 44px; } .form-row input[type="color"] { padding: 2px; height: 44px; width: 80px; cursor: pointer; } .form-row input:focus, .form-row select:focus { outline: 0; border-color: var(--primary); } .form-row-checkbox label { display: flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; } .form-row-checkbox input { width: 20px; height: 20px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 1rem; font-weight: 700; padding: 12px 18px; border: 0; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; min-height: 44px; font-family: inherit; transition: filter 0.1s, transform 0.1s; } .btn:hover { filter: brightness(1.05); text-decoration: none; } .btn:active { transform: scale(0.98); } .btn-primary { background: var(--primary); color: white; } .btn-primary:hover { background: var(--primary-dark); } .btn-reward { background: var(--reward); color: white; } .btn-reward:hover { background: var(--reward-dark); } .btn-danger { background: var(--danger); color: white; font-size: 0.9rem; padding: 8px 12px; min-height: 36px; } .btn-danger:hover { background: var(--danger-dark); } .btn-undo { background: transparent; color: var(--text-muted); border: 1px solid var(--border); font-size: 0.8rem; padding: 4px 8px; min-height: 32px; } .btn-undo:hover { background: #fef3c7; color: var(--text); } .btn-large { font-size: 1.15rem; padding: 14px 20px; } /* Version chip in topbar */ .app-version { font-size: 0.7rem; color: var(--text-muted); background: #fef3c7; padding: 2px 8px; border-radius: 999px; font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.02em; } :root[data-theme="dark"] .app-version { background: rgba(255,255,255,0.08); } /* History table extras */ .history-table td { vertical-align: middle; } .history-undo { margin: 0; display: inline-block; } .status-tag { display: inline-block; font-size: 0.75rem; padding: 2px 8px; border-radius: 999px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; } .status-approved { background: #d1fae5; color: #065f46; } .status-pending { background: #fef3c7; color: #92400e; } .status-denied { background: #fee2e2; color: #991b1b; } :root[data-theme="dark"] .status-approved { background: rgba(16,185,129,0.18); color: #6ee7b7; } :root[data-theme="dark"] .status-pending { background: rgba(245,158,11,0.18); color: #fcd34d; } :root[data-theme="dark"] .status-denied { background: rgba(239,68,68,0.18); color: #fca5a5; } .history-row-pending td { opacity: 0.7; } .history-row-denied td { opacity: 0.6; text-decoration: line-through; } /* -------------------------------------------------------------------------- Manage lists (admin CRUD) -------------------------------------------------------------------------- */ .manage-list { list-style: none; padding: 0; margin: 0; } .manage-row { border: 1px solid var(--border); border-left: 4px solid var(--kid-color, var(--primary)); border-radius: var(--radius-sm); margin-bottom: 8px; background: white; } .manage-inactive { opacity: 0.65; } .manage-edit summary { list-style: none; display: grid; grid-template-columns: 36px 1fr auto auto 28px; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; min-height: 56px; } .manage-edit summary::-webkit-details-marker { display: none; } .manage-summary:hover { background: #fffbeb; } .manage-avatar { font-size: 1.5rem; text-align: center; } .manage-name { font-weight: 600; } .manage-balance { font-weight: 700; color: var(--primary-dark); white-space: nowrap; } .manage-chevron { color: var(--text-muted); text-align: right; } .manage-edit[open] .manage-chevron { transform: rotate(90deg); display: inline-block; } .manage-edit[open] > summary { border-bottom: 1px solid var(--border); } .manage-edit .inline-form { padding: 14px; } .delete-form { padding: 0 14px 14px; } .badge-tag { display: inline-block; padding: 2px 8px; font-size: 0.7rem; border-radius: 999px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .badge-inactive { background: #fee2e2; color: #991b1b; } .row-actions { display: flex; gap: 8px; margin-top: 4px; } /* -------------------------------------------------------------------------- History table -------------------------------------------------------------------------- */ .history-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .history-table th, .history-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); vertical-align: top; } .history-table th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .history-table .when { white-space: nowrap; color: var(--text-muted); } .history-table .pts-earn { color: var(--success-dark); font-weight: 700; } .history-table .pts-spend { color: var(--reward-dark); font-weight: 700; } .history-table .note { color: var(--text-muted); font-style: italic; } @media (max-width: 600px) { .history-table { font-size: 0.8rem; } .history-table .note { display: none; } } /* -------------------------------------------------------------------------- Print button (on /print page) -------------------------------------------------------------------------- */ .print-button { background: var(--primary); color: white; border: 0; border-radius: var(--radius-sm); padding: 8px 14px; font-weight: 700; font-size: 0.95rem; cursor: pointer; } .print-button:hover { background: var(--primary-dark); } /* -------------------------------------------------------------------------- Theme toggle (in topbar) -------------------------------------------------------------------------- */ .theme-toggle { background: transparent; border: 0; cursor: pointer; font-size: 1.15rem; padding: 6px 8px; border-radius: var(--radius-sm); line-height: 1; color: var(--text); } .theme-toggle:hover { background: #fef3c7; } :root[data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,0.08); } .theme-toggle .theme-icon-dark { display: none; } :root[data-theme="dark"] .theme-toggle .theme-icon-light { display: none; } :root[data-theme="dark"] .theme-toggle .theme-icon-dark { display: inline; } /* -------------------------------------------------------------------------- Emoji picker (used in /parent/kids forms) -------------------------------------------------------------------------- */ .emoji-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; padding: 8px; background: #fffbeb; border: 2px solid var(--border); border-radius: var(--radius-sm); } .emoji-option { font-size: 1.6rem; line-height: 1; padding: 6px 0; border: 2px solid transparent; border-radius: var(--radius-sm); background: white; cursor: pointer; font-family: inherit; transition: transform 0.1s, background 0.1s; } .emoji-option:hover { background: #fef3c7; } .emoji-option:active { transform: scale(0.92); } .emoji-option.selected { background: #fef3c7; border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary) inset; } .emoji-option:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* -------------------------------------------------------------------------- Rewards public page (/rewards) -------------------------------------------------------------------------- */ .rewards-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .rewards-header > div { flex: 1; min-width: 0; } .rewards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; } .reward-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 16px; border: 2px solid var(--primary); } .reward-emoji { font-size: 3rem; line-height: 1; margin-bottom: 8px; } .reward-name { font-size: 1.1rem; font-weight: 700; margin: 0 0 4px; color: var(--text); } .reward-desc { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 12px; flex: 1; } .reward-cost { font-size: 1.4rem; font-weight: 800; color: var(--primary-dark); margin-top: auto; } .reward-cost .pts { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; }