/** * Unokidz — kids-friendly UI (dashboard + app) * Bright blues, mint, lilac, coral; rounded “sticker” cards; readable dark text on light panels. * Requires: */ @import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@500;600;700;800&display=swap"); [x-cloak] { display: none !important; } html.kids-ui.theme-zevaras { --kf-blue: #38bdf8; --kf-blue-deep: #0284c7; --kf-mint: #86efac; --kf-mint-deep: #22c55e; --kf-lilac: #c4b5fd; --kf-purple: #a78bfa; --kf-coral: #fb7185; --kf-red: #f43f5e; --kf-sun: #fde047; --kf-cream: #fffbeb; --kf-ink: #1e293b; } html.kids-ui.theme-zevaras body { font-family: "Nunito", "Fredoka", system-ui, sans-serif !important; } html.kids-ui.theme-zevaras h1, html.kids-ui.theme-zevaras h2, html.kids-ui.theme-zevaras h3 { font-family: "Fredoka", "Nunito", system-ui, sans-serif !important; letter-spacing: 0 !important; } /* Sky + mint + soft pink page wash */ html.kids-ui.theme-zevaras .app-wrapper { background: radial-gradient(ellipse 90% 60% at 10% 20%, rgba(56, 189, 248, 0.35), transparent 50%), radial-gradient(ellipse 70% 50% at 90% 10%, rgba(167, 139, 250, 0.3), transparent 45%), radial-gradient(ellipse 60% 45% at 50% 100%, rgba(134, 239, 172, 0.35), transparent 50%), linear-gradient(185deg, #e0f2fe 0%, #ecfccb 35%, #fce7f3 70%, #fef9c3 100%) !important; position: relative; } html.kids-ui.theme-zevaras .app-wrapper::before { content: "✨📚🎨⭐🌈🦋💡"; position: fixed; inset: 0; font-size: clamp(1.25rem, 3vw, 2rem); line-height: 2.5; letter-spacing: 2rem; opacity: 0.07; pointer-events: none; z-index: 0; word-break: break-all; padding: 1rem; overflow: hidden; } html.kids-ui.theme-zevaras .dash-premium-main { position: relative; z-index: 1; } /* Role strips — each role gets its own happy gradient */ html.kids-ui.theme-zevaras body.bg-role-student { background-image: none !important; background: linear-gradient(180deg, #d1fae5 0%, #a5f3fc 50%, #e0e7ff 100%) !important; } html.kids-ui.theme-zevaras body.bg-role-teacher { background-image: none !important; background: linear-gradient(180deg, #dbeafe 0%, #e9d5ff 45%, #fce7f3 100%) !important; } html.kids-ui.theme-zevaras body.bg-role-admin { background-image: none !important; background: radial-gradient(ellipse 85% 55% at 15% 0%, rgba(30, 58, 138, 0.14), transparent 52%), radial-gradient(ellipse 70% 50% at 100% 20%, rgba(180, 83, 9, 0.1), transparent 48%), radial-gradient(ellipse 55% 40% at 0% 90%, rgba(91, 33, 182, 0.12), transparent 50%), linear-gradient(185deg, #e8eaf6 0%, #f8fafc 38%, #fff7ed 72%, #ecfeff 100%) !important; } html.kids-ui.theme-zevaras body.bg-role-parent { background-image: none !important; background: radial-gradient(ellipse 80% 50% at 10% 0%, rgba(251, 113, 133, 0.12), transparent 50%), radial-gradient(ellipse 65% 45% at 95% 25%, rgba(251, 191, 36, 0.12), transparent 48%), linear-gradient(185deg, #fff7ed 0%, #fce7f3 42%, #e0f2fe 100%) !important; } /* Top bar — rainbow strip, white chunky text */ /* Kids theme: header is `.unokidz-ch` (see unokidz-common-header.css); keep logo sticker */ html.kids-ui.theme-zevaras .dash-premium-shell > .unokidz-ch .text-zinc-200, html.kids-ui.theme-zevaras .dash-premium-shell > .unokidz-ch .text-zinc-300, html.kids-ui.theme-zevaras .dash-premium-shell > .unokidz-ch .text-zinc-400, html.kids-ui.theme-zevaras .dash-premium-shell > .unokidz-ch .text-zinc-500 { color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } html.kids-ui.theme-zevaras .dash-premium-logo { background: linear-gradient(145deg, #fff 0%, #fef9c3 100%) !important; border: 3px solid #0284c7 !important; border-radius: 1.25rem !important; box-shadow: 0 4px 0 #7c3aed !important; } /* Main “notebook” card */ html.kids-ui.theme-zevaras .dash-premium-shell > .card.rounded-2xl, html.kids-ui.theme-zevaras .dash-premium-shell .card.rounded-2xl.shadow-lg { background: linear-gradient(165deg, #fffef9 0%, #f0f9ff 40%, #fdf4ff 100%) !important; border: 4px solid #38bdf8 !important; border-radius: 2rem !important; box-shadow: 0 8px 0 #a78bfa, 0 12px 32px rgba(30, 41, 59, 0.12) !important; } html.kids-ui.theme-zevaras .dash-premium-shell > .card.rounded-2xl:hover { border-color: #f472b6 !important; box-shadow: 0 8px 0 #38bdf8, 0 14px 36px rgba(30, 41, 59, 0.14) !important; } /* Default readable ink inside main card */ html.kids-ui.theme-zevaras .dash-premium-shell > .card.rounded-2xl { color: var(--kf-ink) !important; } html.kids-ui.theme-zevaras .dash-premium-shell > .card.rounded-2xl .text-white, html.kids-ui.theme-zevaras .dash-premium-shell > .card.rounded-2xl .text-zinc-200, html.kids-ui.theme-zevaras .dash-premium-shell > .card.rounded-2xl .text-zinc-300, html.kids-ui.theme-zevaras .dash-premium-shell > .card.rounded-2xl .text-zinc-400 { color: var(--kf-ink) !important; text-shadow: none !important; } html.kids-ui.theme-zevaras .dash-premium-shell > .card.rounded-2xl .text-zinc-500, html.kids-ui.theme-zevaras .dash-premium-shell > .card.rounded-2xl .text-zinc-600, html.kids-ui.theme-zevaras .dash-premium-shell > .card.rounded-2xl .text-zinc-700 { color: #475569 !important; } /* Admin Copilot readability fix (kids theme): ensure high contrast in chat panel */ html.kids-ui.theme-zevaras .admin-copilot-panel { background: #ffffff !important; border-color: #cbd5e1 !important; color: #0f172a !important; } html.kids-ui.theme-zevaras .admin-copilot-panel .text-white, html.kids-ui.theme-zevaras .admin-copilot-panel h3 { color: #0f172a !important; } html.kids-ui.theme-zevaras .admin-copilot-panel .text-zinc-400, html.kids-ui.theme-zevaras .admin-copilot-panel .text-zinc-300 { color: #475569 !important; } html.kids-ui.theme-zevaras .admin-copilot-meta { color: #334155 !important; } html.kids-ui.theme-zevaras .admin-copilot-thread { background: #f8fafc !important; border-color: #cbd5e1 !important; } html.kids-ui.theme-zevaras .admin-copilot-bubble { color: #0f172a !important; } html.kids-ui.theme-zevaras .admin-copilot-bubble.bg-zinc-900 { background: #ffffff !important; border-color: #cbd5e1 !important; color: #0f172a !important; } html.kids-ui.theme-zevaras .admin-copilot-bubble.bg-sky-500\/15 { background: #e0f2fe !important; border-color: #7dd3fc !important; color: #0c4a6e !important; } /* “Test AI connection” and similar outline actions: ensure dark label on light sky fill */ html.kids-ui.theme-zevaras .admin-copilot-panel .admin-ai-test-connection { color: #0c4a6e !important; border-color: #0284c7 !important; background-color: #e0f2fe !important; } html.kids-ui.theme-zevaras .admin-copilot-panel .admin-ai-test-connection:hover:not(:disabled) { color: #082f49 !important; background-color: #bae6fd !important; border-color: #0369a1 !important; } /* * Pastel Tailwind accents (-300 / some -400) target dark zinc UIs; on light kids panels they wash out. * Use strong inks for status lines (e.g. “Failed · …”), meta, thread labels, and admin tables. */ html.kids-ui.theme-zevaras .admin-copilot-panel .text-amber-300, html.kids-ui.theme-zevaras body.bg-role-admin .text-amber-300 { color: #b45309 !important; } html.kids-ui.theme-zevaras .admin-copilot-panel .text-emerald-300, html.kids-ui.theme-zevaras body.bg-role-admin .text-emerald-300 { color: #047857 !important; } html.kids-ui.theme-zevaras .admin-copilot-panel .text-emerald-400, html.kids-ui.theme-zevaras body.bg-role-admin .text-emerald-400 { color: #059669 !important; } html.kids-ui.theme-zevaras .admin-copilot-panel .text-sky-300, html.kids-ui.theme-zevaras body.bg-role-admin .text-sky-300 { color: #0369a1 !important; } html.kids-ui.theme-zevaras .admin-copilot-panel .text-orange-300, html.kids-ui.theme-zevaras body.bg-role-admin .text-orange-300 { color: #c2410c !important; } html.kids-ui.theme-zevaras .admin-copilot-panel [class*="bg-emerald-500/20"][class*="text-emerald-300"] { color: #065f46 !important; background-color: #d1fae5 !important; border-color: #34d399 !important; } /* Keep white label on solid buttons / badges (do not use bare button.text-white — it breaks link-style buttons on light panels, e.g. school admin) */ html.kids-ui.theme-zevaras .dash-premium-shell > .card.rounded-2xl .bg-sky-500, html.kids-ui.theme-zevaras .dash-premium-shell > .card.rounded-2xl .bg-sky-600, html.kids-ui.theme-zevaras .dash-premium-shell > .card.rounded-2xl .bg-orange-500, html.kids-ui.theme-zevaras .dash-premium-shell > .card.rounded-2xl .bg-green-600, html.kids-ui.theme-zevaras .dash-premium-shell > .card.rounded-2xl .bg-emerald-500, html.kids-ui.theme-zevaras .dash-premium-shell > .card.rounded-2xl .bg-amber-600, html.kids-ui.theme-zevaras .dash-premium-shell > .card.rounded-2xl .bg-amber-700, html.kids-ui.theme-zevaras .dash-premium-shell > .card.rounded-2xl .btn-primary, html.kids-ui.theme-zevaras .dash-premium-shell > .card.rounded-2xl a.bg-orange-500 { color: #fff !important; } /* —— No black / near-black panels: soft tints + dark text (fixes admin rows, tables, chat) —— */ html.kids-ui.theme-zevaras .dash-premium-shell .card.rounded-2xl [class*="bg-zinc-950"], html.kids-ui.theme-zevaras .dash-premium-shell .card.rounded-2xl [class*="bg-zinc-900"] { background-color: #e0f2fe !important; background-image: none !important; } html.kids-ui.theme-zevaras .dash-premium-shell .card.rounded-2xl [class*="bg-zinc-800"], html.kids-ui.theme-zevaras .dash-premium-shell .card.rounded-2xl [class*="bg-zinc-700"] { background-color: #bae6fd !important; background-image: none !important; } html.kids-ui.theme-zevaras .dash-premium-shell .card.rounded-2xl [class*="hover:bg-zinc-800"]:hover, html.kids-ui.theme-zevaras .dash-premium-shell .card.rounded-2xl [class*="hover:bg-zinc-700"]:hover, html.kids-ui.theme-zevaras .dash-premium-shell .card.rounded-2xl [class*="hover:bg-zinc-800/"]:hover, html.kids-ui.theme-zevaras .dash-premium-shell .card.rounded-2xl [class*="hover:bg-zinc-700/"]:hover { background-color: #93c5fd !important; } html.kids-ui.theme-zevaras .dash-premium-shell .card.rounded-2xl [class*="bg-black"] { background-color: #fef9c3 !important; } /* Table header row: mint band, strong contrast */ html.kids-ui.theme-zevaras .dash-premium-shell .card.rounded-2xl thead[class*="bg-zinc-800"], html.kids-ui.theme-zevaras .dash-premium-shell .card.rounded-2xl tr.bg-zinc-800 { background: linear-gradient(90deg, #a7f3d0, #99f6e4) !important; } html.kids-ui.theme-zevaras .dash-premium-shell .card.rounded-2xl thead[class*="bg-zinc-800"] th, html.kids-ui.theme-zevaras .dash-premium-shell .card.rounded-2xl tr.bg-zinc-800 th, html.kids-ui.theme-zevaras .dash-premium-shell .card.rounded-2xl tr.bg-zinc-800 td { color: #0f172a !important; } /* Data rows: alternating soft sky / cream */ html.kids-ui.theme-zevaras .dash-premium-shell .card.rounded-2xl tbody tr[class*="bg-zinc-950"]:nth-child(odd) { background-color: #f0f9ff !important; } html.kids-ui.theme-zevaras .dash-premium-shell .card.rounded-2xl tbody tr[class*="bg-zinc-950"]:nth-child(even) { background-color: #fefce8 !important; } html.kids-ui.theme-zevaras .dash-premium-shell .card.rounded-2xl tbody tr[class*="hover:bg-zinc-800"]:hover { background-color: #dbeafe !important; } html.kids-ui.theme-zevaras .dash-premium-shell .card.rounded-2xl [class*="border-zinc-7"], html.kids-ui.theme-zevaras .dash-premium-shell .card.rounded-2xl [class*="border-zinc-6"] { border-color: rgba(125, 211, 252, 0.9) !important; } /* Orange / coral accent text stays vivid on light panels */ html.kids-ui.theme-zevaras .dash-premium-shell .card.rounded-2xl .text-orange-300, html.kids-ui.theme-zevaras .dash-premium-shell .card.rounded-2xl .text-orange-400 { color: #c2410c !important; } html.kids-ui.theme-zevaras .rounded-xl.shadow-sm { box-shadow: 0 4px 0 #bae6fd, 0 8px 20px rgba(0, 0, 0, 0.06) !important; } html.kids-ui.theme-zevaras .rounded-xl.border, html.kids-ui.theme-zevaras .rounded-2xl.border { border-color: rgba(56, 189, 248, 0.45) !important; background: rgba(255, 255, 255, 0.75) !important; } /* Playful buttons */ html.kids-ui.theme-zevaras .bg-sky-500, html.kids-ui.theme-zevaras .bg-sky-600 { background: linear-gradient(180deg, #38bdf8, #0284c7) !important; border-radius: 9999px !important; border: 3px solid #fff !important; box-shadow: 0 4px 0 #0369a1 !important; } html.kids-ui.theme-zevaras .bg-orange-500 { background: linear-gradient(180deg, #fb7185, #f43f5e) !important; border-radius: 9999px !important; border: 3px solid #fff !important; box-shadow: 0 4px 0 #be123c !important; } html.kids-ui.theme-zevaras .bg-green-600 { background: linear-gradient(180deg, #86efac, #22c55e) !important; border-radius: 9999px !important; color: #fff !important; border: 3px solid #fff !important; box-shadow: 0 4px 0 #15803d !important; } html.kids-ui.theme-zevaras .bg-emerald-500 { background: linear-gradient(180deg, #6ee7b7, #10b981) !important; border-radius: 9999px !important; } html.kids-ui.theme-zevaras .bg-violet-600, html.kids-ui.theme-zevaras .bg-violet-700, html.kids-ui.theme-zevaras .bg-indigo-600, html.kids-ui.theme-zevaras .bg-indigo-700 { background: linear-gradient(180deg, #c4b5fd, #8b5cf6) !important; border-radius: 9999px !important; } html.kids-ui.theme-zevaras input:focus, html.kids-ui.theme-zevaras select:focus, html.kids-ui.theme-zevaras textarea:focus, html.kids-ui.theme-zevaras button:focus-visible { box-shadow: 0 0 0 3px #fef9c3, 0 0 0 6px #38bdf8 !important; } /* Inputs — light & chunky */ html.kids-ui.theme-zevaras .student-dash .student-dash-input, html.kids-ui.theme-zevaras .student-dash select.student-dash-input, html.kids-ui.theme-zevaras .student-dash textarea.student-dash-input, html.kids-ui.theme-zevaras .parent-dash .parent-dash-input, html.kids-ui.theme-zevaras .parent-dash select.parent-dash-input, html.kids-ui.theme-zevaras .parent-dash textarea.parent-dash-input, html.kids-ui.theme-zevaras .admin-dash .admin-dash-input, html.kids-ui.theme-zevaras .admin-dash select.admin-dash-input, html.kids-ui.theme-zevaras .teacher-dash .teacher-dash-input, html.kids-ui.theme-zevaras .teacher-dash select.teacher-dash-input, html.kids-ui.theme-zevaras .teacher-dash textarea.teacher-dash-input { background-color: #fff !important; color: var(--kf-ink) !important; border: 3px solid #7dd3fc !important; border-radius: 1rem !important; } html.kids-ui.theme-zevaras .teacher-dash select.teacher-dash-input option { background-color: #fff !important; color: var(--kf-ink) !important; } html.kids-ui.theme-zevaras .admin-dash select.admin-dash-input option { background-color: #fff !important; color: var(--kf-ink) !important; } html.kids-ui.theme-zevaras .parent-dash select.parent-dash-input option { background-color: #fff !important; color: var(--kf-ink) !important; } html.kids-ui.theme-zevaras .student-dash select.student-dash-input option { background-color: #fff !important; color: var(--kf-ink) !important; } html.kids-ui.theme-zevaras .dash-auth-seg { background: rgba(255, 255, 255, 0.9) !important; border: 3px solid #c4b5fd !important; } html.kids-ui.theme-zevaras .dash-auth-seg .text-sky-800 { color: #64748b !important; } html.kids-ui.theme-zevaras .bg-white\/80 { background: rgba(255, 255, 255, 0.95) !important; border: 2px solid #7dd3fc !important; color: var(--kf-ink) !important; } html.kids-ui.theme-zevaras .text-slate-700 { color: #475569 !important; } html.kids-ui.theme-zevaras .bg-slate-100 { background: #e0f2fe !important; } html.kids-ui.theme-zevaras .chat-send-solid { background: linear-gradient(180deg, #a78bfa, #7c3aed) !important; border-radius: 9999px !important; border: 3px solid #fff !important; box-shadow: 0 4px 0 #5b21b6 !important; } html.kids-ui.theme-zevaras .chat-send-solid:hover:not(:disabled) { background: linear-gradient(180deg, #c4b5fd, #8b5cf6) !important; } /* Professional chat module (overrides playful pill send + tints thread) */ html.kids-ui.theme-zevaras .unokidz-chat .chat-send-solid { background: linear-gradient(180deg, #334155, #1e293b) !important; border-radius: 0.5rem !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12) !important; color: #ffffff !important; } html.kids-ui.theme-zevaras .unokidz-chat .chat-send-solid:hover:not(:disabled) { background: linear-gradient(180deg, #475569, #334155) !important; } html.kids-ui.theme-zevaras .unokidz-chat-thread { border-color: rgba(148, 163, 184, 0.55) !important; background: #e2e8f0 !important; } html.kids-ui.theme-zevaras .unokidz-chat-thread__head { background: #ffffff !important; border-bottom-color: #e2e8f0 !important; } html.kids-ui.theme-zevaras .unokidz-chat-thread__title { color: #0f172a !important; } html.kids-ui.theme-zevaras .unokidz-chat-thread__meta { color: #64748b !important; } html.kids-ui.theme-zevaras .unokidz-chat-thread__body { background: #f8fafc !important; } html.kids-ui.theme-zevaras .unokidz-chat-thread__body .text-zinc-500 { color: #64748b !important; } html.kids-ui.theme-zevaras .unokidz-chat-thread__body .text-zinc-300 { color: #475569 !important; } html.kids-ui.theme-zevaras .unokidz-chat-bubble--out { background: #1e293b !important; border-color: rgba(51, 65, 85, 0.55) !important; color: #f8fafc !important; } html.kids-ui.theme-zevaras .unokidz-chat-bubble--in { background: #ffffff !important; border-color: #e2e8f0 !important; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important; } html.kids-ui.theme-zevaras .unokidz-chat-seg { border-color: #cbd5e1 !important; background: #f1f5f9 !important; } html.kids-ui.theme-zevaras .unokidz-chat-seg__btn { color: #64748b !important; } html.kids-ui.theme-zevaras .unokidz-chat-seg__btn:hover { color: #0f172a !important; background: rgba(255, 255, 255, 0.85) !important; } html.kids-ui.theme-zevaras .unokidz-chat-seg__btn--active { background: #0f172a !important; color: #ffffff !important; } html.kids-ui.theme-zevaras .unokidz-chat-attach { border-color: #94a3b8 !important; border-style: dashed !important; background: #ffffff !important; color: #475569 !important; } html.kids-ui.theme-zevaras .unokidz-chat-attach:hover { border-color: #64748b !important; background: #f8fafc !important; color: #334155 !important; } html.kids-ui.theme-zevaras .dash-toast--ok { background: linear-gradient(135deg, #22c55e, #38bdf8) !important; } html.kids-ui.theme-zevaras ::-webkit-scrollbar-track { background: #e0f2fe; } html.kids-ui.theme-zevaras ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #a78bfa, #38bdf8); border-radius: 8px; } html.kids-ui.theme-zevaras .zevaras-footer-bar { background: linear-gradient(90deg, #fce7f3, #e0f2fe, #ecfccb) !important; border-top: 4px solid #fff !important; } html.kids-ui.theme-zevaras .zevaras-footer-bar__copy, html.kids-ui.theme-zevaras .zevaras-footer-bar__nav a { color: #475569 !important; } html.kids-ui.theme-zevaras .dash-section-chevron { color: #64748b !important; } html.kids-ui.theme-zevaras .dash-section-head:hover .dash-section-chevron { color: #f43f5e !important; } /* Outline action chips inside tables */ html.kids-ui.theme-zevaras .dash-premium-shell > .card.rounded-2xl button.border-zinc-500, html.kids-ui.theme-zevaras .dash-premium-shell > .card.rounded-2xl a.border-zinc-500 { border-color: #7dd3fc !important; color: var(--kf-ink) !important; background: #fff !important; border-radius: 9999px !important; } html.kids-ui.theme-zevaras .dash-premium-shell > .card.rounded-2xl button.border-zinc-500:hover, html.kids-ui.theme-zevaras .dash-premium-shell > .card.rounded-2xl a.border-zinc-500:hover { background: #e0f2fe !important; } @media (prefers-reduced-motion: no-preference) { html.kids-ui.theme-zevaras .dash-premium-logo { animation: kf-wiggle 3s ease-in-out infinite; } } @keyframes kf-wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } } /* ========== School admin (kids theme) — command-centre readability + premium trim ========== */ html.kids-ui.theme-zevaras body.bg-role-admin .admin-dash { font-family: "DM Sans", "Nunito", system-ui, sans-serif !important; } html.kids-ui.theme-zevaras body.bg-role-admin .admin-dash h2, html.kids-ui.theme-zevaras body.bg-role-admin .admin-dash h3, html.kids-ui.theme-zevaras body.bg-role-admin .admin-dash h4 { font-family: "DM Sans", "Nunito", system-ui, sans-serif !important; letter-spacing: -0.02em !important; } html.kids-ui.theme-zevaras body.bg-role-admin .admin-dash--premium > .rounded-2xl.border.border-zinc-600:first-child { background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, #f8fafc 45%, #f5f3ff 100%) !important; border-color: rgba(51, 65, 85, 0.28) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 12px 40px rgba(15, 23, 42, 0.08) !important; } html.kids-ui.theme-zevaras body.bg-role-admin .dash-premium-shell .card.rounded-2xl .admin-dash--premium .rounded-2xl.border.border-zinc-600.bg-zinc-800 { background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%) !important; border-color: rgba(71, 85, 105, 0.35) !important; } html.kids-ui.theme-zevaras body.bg-role-admin .admin-dash--premium .admin-dash-summary-meta .text-white { color: #0f172a !important; } html.kids-ui.theme-zevaras body.bg-role-admin .admin-dash-section-ico { box-shadow: 0 4px 16px rgba(15, 23, 42, 0.18) !important; border: 1px solid rgba(255, 255, 255, 0.35) !important; } html.kids-ui.theme-zevaras body.bg-role-admin .admin-dash-section-ico .admin-dash-chevron { color: #fff !important; } html.kids-ui.theme-zevaras body.bg-role-admin .admin-dash--premium thead[class*="bg-zinc-800"] th { background: transparent !important; } html.kids-ui.theme-zevaras body.bg-role-admin .admin-dash--premium thead[class*="bg-zinc-800"] { background: linear-gradient(90deg, #312e81, #1e3a5f, #0f766e) !important; } html.kids-ui.theme-zevaras body.bg-role-admin .admin-dash--premium thead[class*="bg-zinc-800"] tr, html.kids-ui.theme-zevaras body.bg-role-admin .admin-dash--premium thead[class*="bg-zinc-800"] th { color: #f8fafc !important; } /* Task title cells use text-white for dark theme; on light rows force readable ink */ html.kids-ui.theme-zevaras body.bg-role-admin .admin-dash--premium tbody tr[class*="bg-zinc-950"] td.font-semibold.text-white { color: #0f172a !important; } /* ========== Teacher KPI tab (school admin) — readable “command centre” on kids theme ========== */ html.kids-ui.theme-zevaras body.bg-role-admin .teacher-kpi-demo--premium { font-family: "DM Sans", "Nunito", system-ui, sans-serif !important; } html.kids-ui.theme-zevaras body.bg-role-admin .teacher-kpi-demo--premium .teacher-kpi-ribbon { background: linear-gradient(125deg, #fff7ed 0%, #fef3c7 42%, #e0e7ff 100%) !important; border-color: rgba(217, 119, 6, 0.35) !important; box-shadow: 0 10px 36px rgba(15, 23, 42, 0.08) !important; } html.kids-ui.theme-zevaras body.bg-role-admin .teacher-kpi-demo--premium .teacher-kpi-ribbon-badge { background: rgba(255, 255, 255, 0.95) !important; color: #92400e !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset !important; } html.kids-ui.theme-zevaras body.bg-role-admin .teacher-kpi-demo--premium .teacher-kpi-pulse-ico { color: #b45309 !important; } html.kids-ui.theme-zevaras body.bg-role-admin .teacher-kpi-demo--premium .teacher-kpi-ribbon-copy { color: #334155 !important; } html.kids-ui.theme-zevaras body.bg-role-admin .teacher-kpi-demo--premium .teacher-kpi-ribbon-copy .text-white { color: #1e3a8a !important; } html.kids-ui.theme-zevaras body.bg-role-admin .teacher-kpi-demo--premium .teacher-kpi-hero { background: linear-gradient(160deg, #ffffff 0%, #f8fafc 48%, #eef2ff 100%) !important; border-color: rgba(51, 65, 85, 0.22) !important; box-shadow: 0 12px 40px rgba(15, 23, 42, 0.07) !important; } html.kids-ui.theme-zevaras body.bg-role-admin .teacher-kpi-demo--premium .teacher-kpi-hero .text-white { color: #0f172a !important; } html.kids-ui.theme-zevaras body.bg-role-admin .teacher-kpi-demo--premium .teacher-kpi-composite { background: linear-gradient(180deg, #fffbeb 0%, #ffedd5 100%) !important; border-color: rgba(234, 88, 12, 0.4) !important; box-shadow: 0 8px 24px rgba(234, 88, 12, 0.12) !important; } html.kids-ui.theme-zevaras body.bg-role-admin .teacher-kpi-demo--premium .teacher-kpi-composite .text-white { color: #7c2d12 !important; } html.kids-ui.theme-zevaras body.bg-role-admin .teacher-kpi-demo--premium .teacher-kpi-composite .text-orange-100 { color: #9a3412 !important; } html.kids-ui.theme-zevaras body.bg-role-admin .teacher-kpi-demo--premium .teacher-kpi-composite [class*="text-orange-200"] { color: #9a3412 !important; } html.kids-ui.theme-zevaras body.bg-role-admin .teacher-kpi-demo--premium .teacher-kpi-metric-card { background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%) !important; box-shadow: 0 8px 28px rgba(15, 23, 42, 0.07) !important; } html.kids-ui.theme-zevaras body.bg-role-admin .teacher-kpi-demo--premium .teacher-kpi-metric-card .text-white { color: #0f172a !important; } html.kids-ui.theme-zevaras body.bg-role-admin .teacher-kpi-demo--premium .teacher-kpi-metric-card[data-kpi-tone="good"] { border-left: 4px solid #059669 !important; } html.kids-ui.theme-zevaras body.bg-role-admin .teacher-kpi-demo--premium .teacher-kpi-metric-card[data-kpi-tone="watch"] { border-left: 4px solid #d97706 !important; } html.kids-ui.theme-zevaras body.bg-role-admin .teacher-kpi-demo--premium .teacher-kpi-metric-card[data-kpi-tone="neutral"] { border-left: 4px solid #475569 !important; } html.kids-ui.theme-zevaras body.bg-role-admin .teacher-kpi-demo--premium .teacher-kpi-panel { background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%) !important; border-color: rgba(71, 85, 105, 0.28) !important; } html.kids-ui.theme-zevaras body.bg-role-admin .teacher-kpi-demo--premium .teacher-kpi-panel .text-white { color: #0f172a !important; } html.kids-ui.theme-zevaras body.bg-role-admin .teacher-kpi-demo--premium .teacher-kpi-panel .text-orange-200 { color: #c2410c !important; } html.kids-ui.theme-zevaras body.bg-role-admin .teacher-kpi-demo--premium .teacher-kpi-panel .text-orange-300 { color: #c2410c !important; } html.kids-ui.theme-zevaras body.bg-role-admin .teacher-kpi-demo--premium .teacher-kpi-panel .text-sky-200 { color: #075985 !important; } html.kids-ui.theme-zevaras body.bg-role-admin .teacher-kpi-demo--premium .teacher-kpi-panel ul[class*="divide-y"] { border-color: rgba(148, 163, 184, 0.45) !important; background: rgba(255, 255, 255, 0.75) !important; } html.kids-ui.theme-zevaras body.bg-role-admin .teacher-kpi-demo--premium .teacher-kpi-engagement-list > li + li { border-top-color: rgba(203, 213, 225, 0.95) !important; } html.kids-ui.theme-zevaras body.bg-role-admin .teacher-kpi-demo--premium .teacher-kpi-panel .text-zinc-300 { color: #475569 !important; } html.kids-ui.theme-zevaras body.bg-role-admin .teacher-kpi-demo--premium .teacher-kpi-roadmap { background: linear-gradient(145deg, #f8fafc 0%, #eef2ff 50%, #fff7ed 100%) !important; border-color: rgba(71, 85, 105, 0.28) !important; } html.kids-ui.theme-zevaras body.bg-role-admin .teacher-kpi-demo--premium .teacher-kpi-roadmap .text-white { color: #0f172a !important; } html.kids-ui.theme-zevaras body.bg-role-admin .teacher-kpi-demo--premium .teacher-kpi-roadmap-li { background: rgba(255, 255, 255, 0.88) !important; border-color: rgba(148, 163, 184, 0.45) !important; color: #334155 !important; } html.kids-ui.theme-zevaras body.bg-role-admin .teacher-kpi-demo--premium .teacher-kpi-roadmap-num { color: #fff !important; } html.kids-ui.theme-zevaras body.bg-role-admin .teacher-kpi-demo--premium .teacher-kpi-section-ico { box-shadow: 0 4px 16px rgba(15, 23, 42, 0.15) !important; } /* ========== Parent / Teacher / Student premium dashboards (kids theme) ========== */ html.kids-ui.theme-zevaras body.bg-role-parent .parent-dash--premium, html.kids-ui.theme-zevaras body.bg-role-teacher .teacher-dash--premium, html.kids-ui.theme-zevaras body.bg-role-student .student-dash--premium { font-family: "DM Sans", "Nunito", system-ui, sans-serif !important; } html.kids-ui.theme-zevaras body.bg-role-parent .parent-dash--premium h2, html.kids-ui.theme-zevaras body.bg-role-parent .parent-dash--premium h3, html.kids-ui.theme-zevaras body.bg-role-teacher .teacher-dash--premium h2, html.kids-ui.theme-zevaras body.bg-role-teacher .teacher-dash--premium h3, html.kids-ui.theme-zevaras body.bg-role-student .student-dash--premium h2, html.kids-ui.theme-zevaras body.bg-role-student .student-dash--premium h3 { font-family: "DM Sans", "Nunito", system-ui, sans-serif !important; letter-spacing: -0.02em !important; } /* Hero strip (first main card) */ html.kids-ui.theme-zevaras body.bg-role-parent .parent-dash--premium > div.rounded-2xl.border.border-zinc-600.bg-zinc-900:first-child { background: linear-gradient(145deg, #ffffff 0%, #fff7ed 45%, #fce7f3 100%) !important; border-color: rgba(71, 85, 105, 0.25) !important; box-shadow: 0 12px 40px rgba(15, 23, 42, 0.07) !important; } html.kids-ui.theme-zevaras body.bg-role-teacher .teacher-dash--premium > div.rounded-2xl.border.border-zinc-600.bg-zinc-900:first-child { background: linear-gradient(145deg, #ffffff 0%, #f5f3ff 48%, #e0f2fe 100%) !important; border-color: rgba(71, 85, 105, 0.25) !important; box-shadow: 0 12px 40px rgba(15, 23, 42, 0.07) !important; } html.kids-ui.theme-zevaras body.bg-role-student .student-dash--premium > div.rounded-2xl.border.border-zinc-600.bg-zinc-900:first-child { background: linear-gradient(145deg, #ffffff 0%, #ecfdf5 45%, #e0f2fe 100%) !important; border-color: rgba(71, 85, 105, 0.25) !important; box-shadow: 0 12px 40px rgba(15, 23, 42, 0.07) !important; } html.kids-ui.theme-zevaras body.bg-role-parent .parent-dash--premium > div:first-child .text-3xl.font-bold.text-white, html.kids-ui.theme-zevaras body.bg-role-student .student-dash--premium > div:first-child .text-xl.font-bold.text-white, html.kids-ui.theme-zevaras body.bg-role-student .student-dash--premium > div:first-child .text-2xl.font-bold.text-white { color: #7c2d12 !important; } html.kids-ui.theme-zevaras body.bg-role-teacher .teacher-dash--premium > div:first-child [class*="border-orange-500"][class*="bg-zinc-950"] { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important; border-color: rgba(234, 88, 12, 0.35) !important; } html.kids-ui.theme-zevaras body.bg-role-teacher .teacher-dash--premium > div:first-child [class*="border-orange-500"] .text-white { color: #0f172a !important; } /* Parent school-approval callout: Zevaras uses a light panel; Tailwind amber-100/90 etc. stay too pale — lock readable browns */ html.kids-ui.theme-zevaras body.bg-role-parent .parent-dash--premium .parent-dash-review-callout { background: #fffbeb !important; border-color: rgba(245, 158, 11, 0.55) !important; color: #78350f !important; } html.kids-ui.theme-zevaras body.bg-role-parent .parent-dash--premium .parent-dash-review-callout p, html.kids-ui.theme-zevaras body.bg-role-parent .parent-dash--premium .parent-dash-review-callout span { color: #78350f !important; } html.kids-ui.theme-zevaras body.bg-role-parent .parent-dash--premium .parent-dash-review-callout > p:first-child { color: #451a03 !important; } /* Collapsible section chevrons — role-colored tiles */ html.kids-ui.theme-zevaras body.bg-role-parent .parent-dash--premium .dash-section-chevron { background: linear-gradient(145deg, #fb7185, #e11d48) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(225, 29, 72, 0.35) !important; } html.kids-ui.theme-zevaras body.bg-role-teacher .teacher-dash--premium .dash-section-chevron { background: linear-gradient(145deg, #6366f1, #7c3aed) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35) !important; } html.kids-ui.theme-zevaras body.bg-role-student .student-dash--premium .dash-section-chevron { background: linear-gradient(145deg, #059669, #0d9488) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35) !important; } /* Table header bands */ html.kids-ui.theme-zevaras body.bg-role-parent .parent-dash--premium thead[class*="bg-zinc-800"], html.kids-ui.theme-zevaras body.bg-role-parent .parent-dash--premium tr.bg-zinc-800 { background: linear-gradient(90deg, #9f1239, #ea580c, #ca8a04) !important; } html.kids-ui.theme-zevaras body.bg-role-parent .parent-dash--premium thead[class*="bg-zinc-800"] th, html.kids-ui.theme-zevaras body.bg-role-parent .parent-dash--premium tr.bg-zinc-800 th { color: #fefce8 !important; } html.kids-ui.theme-zevaras body.bg-role-teacher .teacher-dash--premium thead[class*="bg-zinc-800"], html.kids-ui.theme-zevaras body.bg-role-teacher .teacher-dash--premium tr.bg-zinc-800 { background: linear-gradient(90deg, #3730a3, #0369a1, #0d9488) !important; } html.kids-ui.theme-zevaras body.bg-role-teacher .teacher-dash--premium thead[class*="bg-zinc-800"] th, html.kids-ui.theme-zevaras body.bg-role-teacher .teacher-dash--premium tr.bg-zinc-800 th { color: #f8fafc !important; } html.kids-ui.theme-zevaras body.bg-role-student .student-dash--premium thead[class*="bg-zinc-800"], html.kids-ui.theme-zevaras body.bg-role-student .student-dash--premium tr.bg-zinc-800 { background: linear-gradient(90deg, #047857, #059669, #0284c7) !important; } html.kids-ui.theme-zevaras body.bg-role-student .student-dash--premium thead[class*="bg-zinc-800"] th, html.kids-ui.theme-zevaras body.bg-role-student .student-dash--premium tr.bg-zinc-800 th { color: #ecfeff !important; } /* Status / accent colours on light rows */ html.kids-ui.theme-zevaras body.bg-role-parent .parent-dash--premium .text-green-400, html.kids-ui.theme-zevaras body.bg-role-teacher .teacher-dash--premium .text-green-400, html.kids-ui.theme-zevaras body.bg-role-student .student-dash--premium .text-green-400 { color: #15803d !important; } html.kids-ui.theme-zevaras body.bg-role-parent .parent-dash--premium .text-amber-300, html.kids-ui.theme-zevaras body.bg-role-teacher .teacher-dash--premium .text-amber-300, html.kids-ui.theme-zevaras body.bg-role-student .student-dash--premium .text-amber-300 { color: #b45309 !important; } html.kids-ui.theme-zevaras body.bg-role-student .student-dash--premium .text-orange-300 { color: #c2410c !important; } /* Student weekly AI panel */ html.kids-ui.theme-zevaras body.bg-role-student .student-dash--premium section[class*="border-zinc-700"][aria-labelledby="kid-weekly-heading"] { border-color: rgba(71, 85, 105, 0.28) !important; box-shadow: 0 12px 36px rgba(15, 23, 42, 0.08) !important; } /* ========== School admin — Reports & Improvement League shells ========== */ html.kids-ui.theme-zevaras body.bg-role-admin .admin-reports-shell--premium, html.kids-ui.theme-zevaras body.bg-role-admin .admin-improvements-shell--premium { font-family: "DM Sans", "Nunito", system-ui, sans-serif !important; background: linear-gradient(165deg, #ffffff 0%, #f8fafc 52%, #f5f3ff 100%) !important; border-color: rgba(71, 85, 105, 0.28) !important; box-shadow: 0 12px 40px rgba(15, 23, 42, 0.07) !important; } html.kids-ui.theme-zevaras body.bg-role-admin .dash-report-section-ico, html.kids-ui.theme-zevaras body.bg-role-admin .dash-improvement-section-ico { box-shadow: 0 4px 16px rgba(15, 23, 42, 0.15) !important; } html.kids-ui.theme-zevaras body.bg-role-admin .admin-reports-shell--premium .text-zinc-200 { color: #334155 !important; } html.kids-ui.theme-zevaras body.bg-role-admin .admin-reports-shell--premium .text-green-400 { color: #15803d !important; } html.kids-ui.theme-zevaras body.bg-role-admin .admin-reports-shell--premium .text-amber-400, html.kids-ui.theme-zevaras body.bg-role-admin .admin-reports-shell--premium .text-orange-300 { color: #c2410c !important; } html.kids-ui.theme-zevaras body.bg-role-admin .admin-improvements-shell--premium p.text-white { color: #0f172a !important; } html.kids-ui.theme-zevaras body.bg-role-admin .admin-improvements-shell--premium .inline-flex span.font-bold.text-white { color: #0f172a !important; } html.kids-ui.theme-zevaras body.bg-role-admin .admin-improvements-shell--premium .text-amber-300 { color: #b45309 !important; } /* ========== Professional readability pass (all dashboards) ========== */ html.kids-ui.theme-zevaras .admin-impersonation-banner { background: #fff7ed !important; border-color: rgba(245, 158, 11, 0.45) !important; } html.kids-ui.theme-zevaras .admin-impersonation-banner__text, html.kids-ui.theme-zevaras .admin-impersonation-banner .text-amber-700 { color: #78350f !important; } html.kids-ui.theme-zevaras .parent-dash--premium, html.kids-ui.theme-zevaras .teacher-dash--premium, html.kids-ui.theme-zevaras .student-dash--premium, html.kids-ui.theme-zevaras .admin-dash--premium { color: #0f172a !important; } html.kids-ui.theme-zevaras .student-dash--premium > * { width: 100%; min-width: 0; box-sizing: border-box; } html.kids-ui.theme-zevaras .parent-dash--premium h2, html.kids-ui.theme-zevaras .parent-dash--premium h3, html.kids-ui.theme-zevaras .teacher-dash--premium h2, html.kids-ui.theme-zevaras .teacher-dash--premium h3, html.kids-ui.theme-zevaras .student-dash--premium h2, html.kids-ui.theme-zevaras .student-dash--premium h3, html.kids-ui.theme-zevaras .admin-dash--premium h2, html.kids-ui.theme-zevaras .admin-dash--premium h3 { color: #0f172a !important; letter-spacing: -0.01em !important; line-height: 1.25 !important; } html.kids-ui.theme-zevaras .parent-dash--premium p, html.kids-ui.theme-zevaras .teacher-dash--premium p, html.kids-ui.theme-zevaras .student-dash--premium p, html.kids-ui.theme-zevaras .admin-dash--premium p { line-height: 1.55 !important; } html.kids-ui.theme-zevaras .parent-dash--premium .text-zinc-400, html.kids-ui.theme-zevaras .teacher-dash--premium .text-zinc-400, html.kids-ui.theme-zevaras .student-dash--premium .text-zinc-400, html.kids-ui.theme-zevaras .admin-dash--premium .text-zinc-400 { color: #334155 !important; } html.kids-ui.theme-zevaras .parent-dash--premium .text-zinc-500, html.kids-ui.theme-zevaras .teacher-dash--premium .text-zinc-500, html.kids-ui.theme-zevaras .student-dash--premium .text-zinc-500, html.kids-ui.theme-zevaras .admin-dash--premium .text-zinc-500, html.kids-ui.theme-zevaras .parent-dash--premium .text-zinc-600, html.kids-ui.theme-zevaras .teacher-dash--premium .text-zinc-600, html.kids-ui.theme-zevaras .student-dash--premium .text-zinc-600, html.kids-ui.theme-zevaras .admin-dash--premium .text-zinc-600 { color: #475569 !important; } html.kids-ui.theme-zevaras .parent-dash--premium table th, html.kids-ui.theme-zevaras .parent-dash--premium table td, html.kids-ui.theme-zevaras .teacher-dash--premium table th, html.kids-ui.theme-zevaras .teacher-dash--premium table td, html.kids-ui.theme-zevaras .student-dash--premium table th, html.kids-ui.theme-zevaras .student-dash--premium table td, html.kids-ui.theme-zevaras .admin-dash--premium table th, html.kids-ui.theme-zevaras .admin-dash--premium table td { vertical-align: middle !important; line-height: 1.45 !important; } html.kids-ui.theme-zevaras .parent-dash--premium input::placeholder, html.kids-ui.theme-zevaras .teacher-dash--premium input::placeholder, html.kids-ui.theme-zevaras .student-dash--premium input::placeholder, html.kids-ui.theme-zevaras .admin-dash--premium input::placeholder, html.kids-ui.theme-zevaras .parent-dash--premium textarea::placeholder, html.kids-ui.theme-zevaras .teacher-dash--premium textarea::placeholder, html.kids-ui.theme-zevaras .student-dash--premium textarea::placeholder, html.kids-ui.theme-zevaras .admin-dash--premium textarea::placeholder { color: #64748b !important; } /* ========== Learn with AI — student dashboard spotlight (voice-first hero) ========== */ .learn-ai-spotlight { position: relative; isolation: isolate; border: 3px solid rgba(56, 189, 248, 0.65); background: linear-gradient( 145deg, #fef9c3 0%, #ffedd5 18%, #fce7f3 42%, #e0f2fe 72%, #d1fae5 100% ); box-shadow: 0 10px 0 rgba(124, 58, 237, 0.28), 0 22px 48px rgba(99, 102, 241, 0.22), inset 0 2px 0 rgba(255, 255, 255, 0.75); } .learn-ai-spotlight::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px; z-index: 3; border-radius: inherit; background: linear-gradient(90deg, #fb7185 0%, #c084fc 22%, #38bdf8 48%, #4ade80 72%, #fbbf24 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset; } .learn-ai-spotlight::after { content: ""; position: absolute; left: 0; top: 2.25rem; bottom: 2.25rem; width: 5px; border-radius: 9999px; background: linear-gradient(180deg, #f97316, #ec4899, #8b5cf6); opacity: 0.85; z-index: 1; pointer-events: none; } @media (max-width: 639px) { .learn-ai-spotlight::after { display: none; } } .learn-ai-spotlight__blob { width: 15rem; height: 15rem; opacity: 0.65; } .learn-ai-spotlight__blob--a { top: -5rem; right: -4rem; background: radial-gradient(circle, rgba(244, 114, 182, 0.65) 0%, transparent 68%); } .learn-ai-spotlight__blob--b { bottom: -4rem; left: -3rem; background: radial-gradient(circle, rgba(251, 191, 36, 0.55) 0%, transparent 68%); } .learn-ai-spotlight__blob--c { top: 40%; left: 35%; width: 12rem; height: 12rem; opacity: 0.4; background: radial-gradient(circle, rgba(52, 211, 153, 0.45) 0%, transparent 70%); } .learn-ai-spotlight__stars { z-index: 0; } .learn-ai-spotlight__stars-svg { width: 100%; height: 100%; } .learn-ai-spotlight__chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.28rem 0.75rem; border-radius: 9999px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #5b21b6; background: linear-gradient(180deg, #faf5ff 0%, #e9d5ff 100%); border: 2px solid rgba(139, 92, 246, 0.45); box-shadow: 0 3px 0 rgba(91, 33, 182, 0.18); } .learn-ai-spotlight__chip--mic { color: #0f766e; background: linear-gradient(180deg, #ccfbf1 0%, #5eead4 100%); border-color: rgba(13, 148, 136, 0.5); box-shadow: 0 3px 0 rgba(13, 148, 136, 0.2); } .learn-ai-spotlight__headline { position: relative; z-index: 1; font-family: "Fredoka", "Nunito", "DM Sans", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.35rem, 4vw, 1.85rem); letter-spacing: -0.02em; line-height: 1.22; text-wrap: balance; color: #312e81; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9); } .learn-ai-spotlight__copy { position: relative; z-index: 1; font-family: "Nunito", "Fredoka", system-ui, sans-serif; font-size: 0.95rem; line-height: 1.65; font-weight: 600; text-wrap: pretty; color: #1e293b; max-width: 36rem; } .learn-ai-spotlight__strong { font-weight: 800; } .learn-ai-spotlight__strong--teal { color: #0d9488; } .learn-ai-spotlight__strong--amber { color: #b45309; } .learn-ai-spotlight__figure { position: relative; z-index: 1; } .learn-ai-spotlight__figure-inner { position: relative; width: min(11rem, 42vw); height: min(11rem, 42vw); max-width: 200px; max-height: 200px; } .learn-ai-spotlight__mascot { width: 100%; height: 100%; display: block; filter: drop-shadow(0 8px 16px rgba(91, 33, 182, 0.2)); } .learn-ai-spotlight__figure-emoji { position: absolute; right: -0.25rem; bottom: 0.25rem; font-size: clamp(1.75rem, 6vw, 2.35rem); line-height: 1; filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.15)); } .learn-ai-spotlight__fine { position: relative; z-index: 1; text-align: center; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.03em; color: #475569; max-width: 17rem; } @media (min-width: 1024px) { .learn-ai-spotlight__fine { text-align: right; margin-left: auto; } } /* CTA: avoid Tailwind .text-white inside notebook card — it is remapped to dark ink (see .card.rounded-2xl .text-white) */ .learn-ai-spotlight__cta { position: relative; z-index: 1; font-family: "Fredoka", "Nunito", "DM Sans", system-ui, sans-serif; cursor: pointer; background: linear-gradient(135deg, #db2777 0%, #a21caf 22%, #7c3aed 50%, #4f46e5 78%, #0369a1 100%); border: 3px solid #facc15; color: #ffffff; box-shadow: 0 8px 0 #4c1d95, 0 20px 44px rgba(76, 29, 149, 0.38); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } .learn-ai-spotlight__cta-title { display: block; font-weight: 800; font-size: 1.05rem; line-height: 1.25; color: #ffffff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 2px 10px rgba(0, 0, 0, 0.25); } .learn-ai-spotlight__cta-sub { display: block; font-weight: 800; font-size: 0.875rem; line-height: 1.35; color: #fef9c3; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 12px rgba(0, 0, 0, 0.35); } .learn-ai-spotlight__cta:hover:not(:disabled) { transform: translateY(-2px); filter: saturate(1.08) brightness(1.04); box-shadow: 0 10px 0 #4c1d95, 0 26px 50px rgba(76, 29, 149, 0.42); } .learn-ai-spotlight__cta:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 3px 0 #4c1d95, 0 10px 28px rgba(76, 29, 149, 0.3); } .learn-ai-spotlight__cta-shine { background: linear-gradient( 105deg, transparent 0%, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%, transparent 100% ); transform: translateX(-100%) skewX(-12deg); } @media (prefers-reduced-motion: no-preference) { .learn-ai-spotlight__cta:hover .learn-ai-spotlight__cta-shine { animation: learn-ai-spotlight-shine 0.85s ease forwards; } } @keyframes learn-ai-spotlight-shine { to { transform: translateX(120%) skewX(-12deg); } } .learn-ai-spotlight__cta-icon-wrap { color: #ffffff; background: rgba(255, 255, 255, 0.22); border: 2px solid rgba(255, 255, 255, 0.45); } .learn-ai-spotlight__cta-svg { filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.35)); } .learn-ai-spotlight__cta-ring-offset { --tw-ring-offset-color: #fef9c3; } /* Notebook card remaps .text-white — lock CTA label colors with higher specificity */ html.kids-ui.theme-zevaras .dash-premium-shell > .card.rounded-2xl .learn-ai-spotlight .learn-ai-spotlight__cta { background: linear-gradient(135deg, #db2777 0%, #a21caf 22%, #7c3aed 50%, #4f46e5 78%, #0369a1 100%) !important; border-color: #facc15 !important; color: #ffffff !important; } html.kids-ui.theme-zevaras .dash-premium-shell > .card.rounded-2xl .learn-ai-spotlight .learn-ai-spotlight__cta-title { color: #ffffff !important; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 2px 10px rgba(0, 0, 0, 0.3) !important; } html.kids-ui.theme-zevaras .dash-premium-shell > .card.rounded-2xl .learn-ai-spotlight .learn-ai-spotlight__cta-sub { color: #fef9c3 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 12px rgba(0, 0, 0, 0.4) !important; } html.kids-ui.theme-zevaras .dash-premium-shell > .card.rounded-2xl .learn-ai-spotlight .learn-ai-spotlight__cta-icon-wrap { color: #ffffff !important; background: rgba(255, 255, 255, 0.22) !important; border-color: rgba(255, 255, 255, 0.5) !important; } html.kids-ui.theme-zevaras body.bg-role-student .learn-ai-spotlight { background: linear-gradient( 145deg, #fef08a 0%, #fed7aa 14%, #fbcfe8 36%, #e9d5ff 58%, #a5f3fc 82%, #bbf7d0 100% ) !important; border-color: rgba(14, 165, 233, 0.55) !important; box-shadow: 0 10px 0 rgba(124, 58, 237, 0.3), 0 28px 56px rgba(236, 72, 153, 0.18), inset 0 2px 0 rgba(255, 255, 255, 0.85) !important; } html.kids-ui.theme-zevaras body.bg-role-student .learn-ai-spotlight__headline { font-family: "Fredoka", "Nunito", sans-serif !important; color: #4c1d95 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95); } html.kids-ui.theme-zevaras body.bg-role-student .learn-ai-spotlight__copy { color: #1e293b !important; } html.kids-ui.theme-zevaras body.bg-role-student .learn-ai-spotlight__strong--teal { color: #0f766e !important; } html.kids-ui.theme-zevaras body.bg-role-student .learn-ai-spotlight__strong--amber { color: #b45309 !important; } html.kids-ui.theme-zevaras body.bg-role-student .learn-ai-spotlight__fine { color: #475569 !important; } /* ========== Learn with AI modal (student) — soft multicolor, topic chips + emojis, readable type ========== */ .learn-ai-modal { font-family: "Fredoka", "Nunito", "DM Sans", system-ui, sans-serif; } .learn-ai-modal--rainbow { background: linear-gradient( 165deg, #fff7ed 0%, #fce7f3 18%, #e0f2fe 40%, #ecfccb 62%, #ede9fe 85%, #cffafe 100% ); } .learn-ai-modal__title { font-family: "Fredoka", "Nunito", sans-serif; font-weight: 700; letter-spacing: 0.02em; line-height: 1.2; } .learn-ai-modal__buddy-svg { display: block; flex-shrink: 0; filter: drop-shadow(0 3px 8px rgba(91, 33, 182, 0.22)); } .learn-ai-modal__pick-label { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #0f172a; font-family: "Fredoka", "Nunito", sans-serif; } .learn-ai-modal__status { font-size: 0.875rem; font-weight: 800; color: #0f172a; font-family: "Fredoka", "Nunito", sans-serif; } .learn-ai-modal__status--thinking { color: #4338ca; font-style: italic; } .learn-ai-modal__close { flex-shrink: 0; border-radius: 9999px; border: 3px solid #0f172a; background: linear-gradient(180deg, #fef08a 0%, #facc15 45%, #eab308 100%); padding: 0.4rem 1rem; font-family: "Fredoka", "Nunito", sans-serif; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #0f172a !important; cursor: pointer; box-shadow: 0 3px 0 #854d0e, 0 6px 14px rgba(234, 179, 8, 0.35); transition: transform 0.12s ease, filter 0.12s ease; } .learn-ai-modal__close:hover { filter: brightness(1.04); } .learn-ai-modal__close:active { transform: translateY(2px); box-shadow: 0 1px 0 #854d0e; } .learn-ai-topic-chip { display: inline-flex; align-items: center; gap: 0.4rem; border-radius: 9999px; border-width: 2px; border-style: solid; padding: 0.45rem 0.9rem; font-size: 0.75rem; font-family: "Fredoka", "Nunito", sans-serif; font-weight: 800; letter-spacing: 0.02em; line-height: 1.2; transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; box-shadow: 0 2px 0 rgba(15, 23, 42, 0.08); } .learn-ai-topic-chip:hover { transform: translateY(-2px); filter: brightness(1.02); } .learn-ai-topic-chip--selected { transform: translateY(0); box-shadow: 0 4px 0 rgba(15, 23, 42, 0.18); } .learn-ai-topic-chip__emoji { font-size: 1.15rem; line-height: 1; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.5)); } .learn-ai-topic-chip__label { text-align: left; } /* —— Per-topic soft pastels (idle) + vivid selected —— */ .learn-ai-topic-chip--add, .learn-ai-topic-chip--add10, .learn-ai-topic-chip--mdadd { background: linear-gradient(180deg, #fff7ed, #ffedd5); border-color: #fdba74; color: #7c2d12 !important; } .learn-ai-topic-chip--add.learn-ai-topic-chip--selected, .learn-ai-topic-chip--add10.learn-ai-topic-chip--selected, .learn-ai-topic-chip--mdadd.learn-ai-topic-chip--selected { background: linear-gradient(135deg, #ea580c, #c2410c); border-color: #7c2d12; color: #fffbeb !important; box-shadow: 0 4px 0 #7c2d12; } .learn-ai-topic-chip--sub, .learn-ai-topic-chip--take10, .learn-ai-topic-chip--mdsub { background: linear-gradient(180deg, #ecfdf5, #d1fae5); border-color: #6ee7b7; color: #064e3b !important; } .learn-ai-topic-chip--sub.learn-ai-topic-chip--selected, .learn-ai-topic-chip--take10.learn-ai-topic-chip--selected, .learn-ai-topic-chip--mdsub.learn-ai-topic-chip--selected { background: linear-gradient(135deg, #059669, #047857); border-color: #065f46; color: #ecfdf5 !important; box-shadow: 0 4px 0 #064e3b; } .learn-ai-topic-chip--place { background: linear-gradient(180deg, #f5f3ff, #ede9fe); border-color: #c4b5fd; color: #4c1d95 !important; } .learn-ai-topic-chip--place.learn-ai-topic-chip--selected { background: linear-gradient(135deg, #7c3aed, #5b21b6); border-color: #4c1d95; color: #f5f3ff !important; box-shadow: 0 4px 0 #4c1d95; } .learn-ai-topic-chip--word { background: linear-gradient(180deg, #eff6ff, #dbeafe); border-color: #93c5fd; color: #1e3a8a !important; } .learn-ai-topic-chip--word.learn-ai-topic-chip--selected { background: linear-gradient(135deg, #2563eb, #1d4ed8); border-color: #1e3a8a; color: #eff6ff !important; box-shadow: 0 4px 0 #1e3a8a; } .learn-ai-topic-chip--shapes, .learn-ai-topic-chip--shape1 { background: linear-gradient(180deg, #fdf2f8, #fce7f3); border-color: #f9a8d4; color: #831843 !important; } .learn-ai-topic-chip--shapes.learn-ai-topic-chip--selected, .learn-ai-topic-chip--shape1.learn-ai-topic-chip--selected { background: linear-gradient(135deg, #db2777, #be185d); border-color: #831843; color: #fdf2f8 !important; box-shadow: 0 4px 0 #831843; } .learn-ai-topic-chip--count { background: linear-gradient(180deg, #fef9c3, #fef08a); border-color: #facc15; color: #713f12 !important; } .learn-ai-topic-chip--count.learn-ai-topic-chip--selected { background: linear-gradient(135deg, #ca8a04, #a16207); border-color: #713f12; color: #fefce8 !important; box-shadow: 0 4px 0 #713f12; } .learn-ai-topic-chip--order { background: linear-gradient(180deg, #e0e7ff, #c7d2fe); border-color: #a5b4fc; color: #312e81 !important; } .learn-ai-topic-chip--order.learn-ai-topic-chip--selected { background: linear-gradient(135deg, #4f46e5, #4338ca); border-color: #312e81; color: #eef2ff !important; box-shadow: 0 4px 0 #312e81; } .learn-ai-topic-chip--times, .learn-ai-topic-chip--mult { background: linear-gradient(180deg, #cffafe, #a5f3fc); border-color: #22d3ee; color: #164e63 !important; } .learn-ai-topic-chip--times.learn-ai-topic-chip--selected, .learn-ai-topic-chip--mult.learn-ai-topic-chip--selected { background: linear-gradient(135deg, #0891b2, #0e7490); border-color: #164e63; color: #ecfeff !important; box-shadow: 0 4px 0 #164e63; } .learn-ai-topic-chip--divide, .learn-ai-topic-chip--divb { background: linear-gradient(180deg, #f3e8ff, #e9d5ff); border-color: #d8b4fe; color: #581c87 !important; } .learn-ai-topic-chip--divide.learn-ai-topic-chip--selected, .learn-ai-topic-chip--divb.learn-ai-topic-chip--selected { background: linear-gradient(135deg, #9333ea, #7e22ce); border-color: #581c87; color: #faf5ff !important; box-shadow: 0 4px 0 #581c87; } .learn-ai-topic-chip--frac { background: linear-gradient(180deg, #ffedd5, #fed7aa); border-color: #fb923c; color: #7c2d12 !important; } .learn-ai-topic-chip--frac.learn-ai-topic-chip--selected { background: linear-gradient(135deg, #ea580c, #c2410c); border-color: #7c2d12; color: #fff7ed !important; box-shadow: 0 4px 0 #7c2d12; } .learn-ai-topic-chip--measure { background: linear-gradient(180deg, #ecfccb, #d9f99d); border-color: #a3e635; color: #365314 !important; } .learn-ai-topic-chip--measure.learn-ai-topic-chip--selected { background: linear-gradient(135deg, #65a30d, #4d7c0f); border-color: #365314; color: #f7fee7 !important; box-shadow: 0 4px 0 #365314; } .learn-ai-topic-chip--time { background: linear-gradient(180deg, #ffe4e6, #fecdd3); border-color: #fb7185; color: #881337 !important; } .learn-ai-topic-chip--time.learn-ai-topic-chip--selected { background: linear-gradient(135deg, #e11d48, #be123c); border-color: #881337; color: #fff1f2 !important; box-shadow: 0 4px 0 #881337; } .learn-ai-topic-chip--area { background: linear-gradient(180deg, #ccfbf1, #99f6e4); border-color: #2dd4bf; color: #134e4a !important; } .learn-ai-topic-chip--area.learn-ai-topic-chip--selected { background: linear-gradient(135deg, #0d9488, #0f766e); border-color: #134e4a; color: #f0fdfa !important; box-shadow: 0 4px 0 #134e4a; } .learn-ai-topic-chip--fall0 { background: linear-gradient(180deg, #fef3c7, #fde68a); border-color: #fbbf24; color: #78350f !important; } .learn-ai-topic-chip--fall0.learn-ai-topic-chip--selected { background: linear-gradient(135deg, #d97706, #b45309); border-color: #78350f; color: #fffbeb !important; box-shadow: 0 4px 0 #78350f; } .learn-ai-topic-chip--fall1 { background: linear-gradient(180deg, #e0f2fe, #bae6fd); border-color: #38bdf8; color: #0c4a6e !important; } .learn-ai-topic-chip--fall1.learn-ai-topic-chip--selected { background: linear-gradient(135deg, #0284c7, #0369a1); border-color: #0c4a6e; color: #f0f9ff !important; box-shadow: 0 4px 0 #0c4a6e; } .learn-ai-topic-chip--fall2 { background: linear-gradient(180deg, #fce7f3, #fbcfe8); border-color: #f472b6; color: #831843 !important; } .learn-ai-topic-chip--fall2.learn-ai-topic-chip--selected { background: linear-gradient(135deg, #db2777, #be185d); border-color: #831843; color: #fdf2f8 !important; box-shadow: 0 4px 0 #831843; } .learn-ai-topic-chip--fall3 { background: linear-gradient(180deg, #d1fae5, #a7f3d0); border-color: #34d399; color: #064e3b !important; } .learn-ai-topic-chip--fall3.learn-ai-topic-chip--selected { background: linear-gradient(135deg, #059669, #047857); border-color: #064e3b; color: #ecfdf5 !important; box-shadow: 0 4px 0 #064e3b; } .learn-ai-topic-chip--fall4 { background: linear-gradient(180deg, #ede9fe, #ddd6fe); border-color: #a78bfa; color: #4c1d95 !important; } .learn-ai-topic-chip--fall4.learn-ai-topic-chip--selected { background: linear-gradient(135deg, #7c3aed, #6d28d9); border-color: #4c1d95; color: #f5f3ff !important; box-shadow: 0 4px 0 #4c1d95; } .learn-ai-bubble__text { margin: 0; font-weight: 600; line-height: 1.45; letter-spacing: 0.015em; } /* You — punchy purple (stands apart from bot red/green/blue) */ .learn-ai-bubble--user { background: linear-gradient(145deg, #7c3aed 0%, #5b21b6 100%); border: 3px solid #ddd6fe !important; color: #faf5ff !important; } .learn-ai-bubble--user .learn-ai-bubble__text { color: #faf5ff !important; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); } /* Bot — rotate deep red, green, blue with light text */ .learn-ai-bubble--bot.learn-ai-bubble--tone-0 { background: linear-gradient(155deg, #dc2626 0%, #991b1b 100%); border: 3px solid #fecaca !important; color: #fff7ed !important; } .learn-ai-bubble--bot.learn-ai-bubble--tone-0 .learn-ai-bubble__text { color: #fff7ed !important; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); } .learn-ai-bubble--bot.learn-ai-bubble--tone-1 { background: linear-gradient(155deg, #059669 0%, #065f46 100%); border: 3px solid #6ee7b7 !important; color: #ecfdf5 !important; } .learn-ai-bubble--bot.learn-ai-bubble--tone-1 .learn-ai-bubble__text { color: #ecfdf5 !important; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); } .learn-ai-bubble--bot.learn-ai-bubble--tone-2 { background: linear-gradient(155deg, #2563eb 0%, #1e3a8a 100%); border: 3px solid #93c5fd !important; color: #eff6ff !important; } .learn-ai-bubble--bot.learn-ai-bubble--tone-2 .learn-ai-bubble__text { color: #eff6ff !important; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); } .learn-ai-send-btn { background: linear-gradient(180deg, #fcd34d 0%, #f59e0b 100%); color: #422006 !important; border: 3px solid #fff; box-shadow: 0 4px 0 #b45309, 0 6px 14px rgba(245, 158, 11, 0.35); font-family: "Fredoka", "Nunito", sans-serif; letter-spacing: 0.03em; } .learn-ai-send-btn:hover:not(:disabled) { filter: brightness(1.06); } .learn-ai-send-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 #b45309, 0 3px 10px rgba(245, 158, 11, 0.3); } .learn-ai-send-btn:disabled { box-shadow: none; border-color: rgba(255, 255, 255, 0.5); } /* Kids theme: stop dashboard ink rules from washing out modal chat */ html.kids-ui.theme-zevaras body.bg-role-student .learn-ai-modal, html.kids-ui.theme-zevaras body.bg-role-student .learn-ai-modal .learn-ai-modal__head, html.kids-ui.theme-zevaras body.bg-role-student .learn-ai-modal .learn-ai-modal__topics, html.kids-ui.theme-zevaras body.bg-role-student .learn-ai-modal .learn-ai-modal__thread, html.kids-ui.theme-zevaras body.bg-role-student .learn-ai-modal .learn-ai-modal__footer { font-family: "Fredoka", "Nunito", "DM Sans", system-ui, sans-serif !important; } html.kids-ui.theme-zevaras body.bg-role-student .learn-ai-modal .learn-ai-modal__title { color: #0f172a !important; text-shadow: none !important; } html.kids-ui.theme-zevaras body.bg-role-student .learn-ai-modal .learn-ai-modal__input { color: #0f172a !important; background: #ffffff !important; border-color: #7dd3fc !important; } html.kids-ui.theme-zevaras body.bg-role-student .learn-ai-modal .learn-ai-bubble--user, html.kids-ui.theme-zevaras body.bg-role-student .learn-ai-modal .learn-ai-bubble--user .learn-ai-bubble__text, html.kids-ui.theme-zevaras body.bg-role-student .learn-ai-modal .learn-ai-bubble--bot, html.kids-ui.theme-zevaras body.bg-role-student .learn-ai-modal .learn-ai-bubble--bot .learn-ai-bubble__text { text-shadow: none !important; } html.kids-ui.theme-zevaras body.bg-role-student .learn-ai-modal .learn-ai-bubble--user .learn-ai-bubble__text { color: #faf5ff !important; } html.kids-ui.theme-zevaras body.bg-role-student .learn-ai-modal .learn-ai-bubble--bot.learn-ai-bubble--tone-0 .learn-ai-bubble__text { color: #fff7ed !important; } html.kids-ui.theme-zevaras body.bg-role-student .learn-ai-modal .learn-ai-bubble--bot.learn-ai-bubble--tone-1 .learn-ai-bubble__text { color: #ecfdf5 !important; } html.kids-ui.theme-zevaras body.bg-role-student .learn-ai-modal .learn-ai-bubble--bot.learn-ai-bubble--tone-2 .learn-ai-bubble__text { color: #eff6ff !important; } html.kids-ui.theme-zevaras body.bg-role-student .learn-ai-modal .learn-ai-send-btn { color: #422006 !important; } html.kids-ui.theme-zevaras body.bg-role-student .learn-ai-modal__close { color: #0f172a !important; background: linear-gradient(180deg, #fef08a 0%, #facc15 45%, #eab308 100%) !important; border-color: #0f172a !important; } html.kids-ui.theme-zevaras body.bg-role-student .learn-ai-modal__pick-label { color: #0f172a !important; } html.kids-ui.theme-zevaras body.bg-role-student .learn-ai-modal__status { color: #0f172a !important; } html.kids-ui.theme-zevaras body.bg-role-student .learn-ai-modal--rainbow { background: linear-gradient( 165deg, #fff7ed 0%, #fce7f3 18%, #e0f2fe 40%, #ecfccb 62%, #ede9fe 85%, #cffafe 100% ) !important; } html.kids-ui.theme-zevaras body.bg-role-student .learn-ai-topic-chip__label { color: inherit !important; } /* Learn with AI — voice-first tutor row */ .learn-ai-sound-toggle { font-size: 0.7rem; font-weight: 800; padding: 0.25rem 0.55rem; border-radius: 9999px; border: 2px solid rgba(15, 23, 42, 0.2); background: rgba(255, 255, 255, 0.85); color: #0f172a; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; } .learn-ai-sound-toggle:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12); } .learn-ai-modal__footer--voice { gap: 0.5rem; } .learn-ai-voice-live { min-height: 2.25rem; font-size: 0.8rem; line-height: 1.35; color: rgba(15, 23, 42, 0.78); background: rgba(255, 255, 255, 0.55); border: 2px dashed rgba(99, 102, 241, 0.35); border-radius: 0.75rem; padding: 0.45rem 0.65rem; } .learn-ai-mic-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; width: 4.75rem; height: 4.75rem; border-radius: 9999px; border: 3px solid rgba(15, 23, 42, 0.22); background: linear-gradient(180deg, #a5b4fc 0%, #6366f1 45%, #4f46e5 100%); color: #ffffff; cursor: pointer; box-shadow: 0 6px 0 rgba(49, 46, 129, 0.35), 0 10px 24px rgba(79, 70, 229, 0.25); transition: transform 0.12s ease, box-shadow 0.12s ease; } .learn-ai-mic-btn__icon { font-size: 1.65rem; line-height: 1; } .learn-ai-mic-btn__label { font-size: 0.6rem; font-weight: 900; line-height: 1.05; letter-spacing: 0.02em; max-width: 4.1rem; text-align: center; } .learn-ai-mic-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 0 rgba(49, 46, 129, 0.35), 0 14px 28px rgba(79, 70, 229, 0.28); } .learn-ai-mic-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 3px 0 rgba(49, 46, 129, 0.35), 0 6px 16px rgba(79, 70, 229, 0.2); } .learn-ai-mic-btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; } .learn-ai-mic-btn--listening { animation: learn-ai-mic-pulse 1.1s ease-in-out infinite; border-color: rgba(239, 68, 68, 0.65); background: linear-gradient(180deg, #fca5a5 0%, #ef4444 45%, #dc2626 100%); box-shadow: 0 6px 0 rgba(127, 29, 29, 0.35), 0 10px 24px rgba(220, 38, 38, 0.3); } @keyframes learn-ai-mic-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 6px 0 rgba(127, 29, 29, 0.35), 0 10px 24px rgba(220, 38, 38, 0.3); } 50% { transform: scale(1.05); box-shadow: 0 7px 0 rgba(127, 29, 29, 0.35), 0 14px 28px rgba(220, 38, 38, 0.35); } } .learn-ai-keyboard-toggle { font-size: 0.7rem; font-weight: 800; padding: 0.2rem 0.5rem; border-radius: 9999px; border: 2px dashed rgba(99, 102, 241, 0.45); background: rgba(255, 255, 255, 0.75); color: #4338ca; cursor: pointer; } .learn-ai-keyboard-toggle:hover { border-style: solid; background: #eef2ff; }