:root{--bg:#0f172a;--bg-secondary:#1e293b;--bg-tertiary:#0f1729;--surface:#ffffff0a;--border:#ffffff14;--accent:#7c3aed;--accent-secondary:#06b6d4;--accent-transparent:#7c3aed33;--accent-secondary-transparent:#06b6d433;--error:#ef4444;--error-transparent:#ef444433;--success:#10b981;--text:#fff;--text-secondary:#fff9;--text-tertiary:#ffffff4d;--on-surface:var(--text);--on-surface-variant:var(--text-secondary)}.glass-card{background:var(--surface);border:1px solid var(--border);-webkit-backdrop-filter:blur(12px)}html,body{width:100%!important;max-width:100vw!important;overflow-x:hidden!important}body{min-height:100vh;transition:background-color .3s,color .3s;background-color:var(--bg)!important;color:var(--text)!important}#root{min-height:100vh;background-color:var(--bg)!important;width:100%!important;max-width:100vw!important;overflow-x:hidden!important}.light-mode .glass-card{box-shadow:0 4px 24px #00000014}input,textarea,select{color:var(--text)}.light-mode .text-slate-300,.light-mode .text-slate-400,.light-mode .text-slate-500{color:#0f172a8c!important}.light-mode .text-slate-200{color:#0f172ab3!important}.light-mode ::placeholder{color:#0f172a59!important}.light-mode .glass-card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 4px 24px #00000014;background:#ffffffb3!important}.light-mode .recharts-text{fill:#0f172a99!important}*{box-sizing:border-box!important}.material-symbols-outlined{max-width:100%!important;font-size:24px!important}.auth-container{flex-direction:row;min-height:100vh;display:flex}@media (width<=768px){.auth-container{flex-direction:column}.auth-left{border-bottom:1px solid #ffffff14;border-right:none!important;width:100%!important;padding:32px 24px!important}.auth-right{display:none!important}}.main-content{margin-left:256px}@media (width<=768px){.sidebar{width:0!important;display:none!important;overflow:hidden!important}.main-content{width:100%!important;max-width:100%!important;margin-left:0!important;overflow-x:hidden!important}.dashboard-navbar{padding:12px 16px!important}footer{text-align:center!important;flex-direction:column!important;gap:16px!important;height:auto!important;padding:24px 24px 80px!important}.mobile-nav{display:flex!important}}.mobile-nav{background:var(--bg);z-index:100;border-top:1px solid #ffffff14;justify-content:space-around;align-items:center;height:60px;padding:0 16px;display:none;position:fixed;bottom:0;left:0;right:0}@media (width<=768px){.quiz-grid{grid-template-columns:1fr!important}.stats-grid{grid-template-columns:1fr 1fr!important}.leaderboard-podium{gap:8px!important}.dashboard-grid{grid-template-columns:1fr!important}.recharts-wrapper{width:100%!important}.chart-container{width:100%!important;padding:0!important;overflow:visible!important}.performance-chart{height:220px!important;min-height:220px!important}.daily-chart{height:180px!important;min-height:180px!important}.recharts-text{font-size:10px!important}.quick-stats{grid-template-columns:1fr 1fr!important}.recent-quizzes{flex-wrap:nowrap!important;overflow-x:auto!important}.quiz-setup-container{padding:16px!important}.difficulty-selector{flex-direction:column!important}.generate-button{width:calc(100% - 32px)!important;position:fixed!important;bottom:70px!important;left:16px!important;right:16px!important}.quiz-player{padding:16px!important}.answer-options{grid-template-columns:1fr!important}.quiz-nav-buttons{flex-direction:column!important;gap:8px!important}.profile-header{text-align:center!important;flex-direction:column!important}.stat-card{min-height:unset!important;flex-direction:row!important;align-items:center!important;gap:12px!important;padding:12px 16px!important;display:flex!important}.stat-card .value{font-size:20px!important}.stat-card .icon{width:36px!important;height:36px!important;font-size:16px!important}.profile-stats-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}.profile-sections{grid-template-columns:1fr!important}.leaderboard-tabs{flex-wrap:nowrap!important;overflow-x:auto!important}.podium{gap:8px!important;padding:16px!important}.podium-avatar{width:48px!important;height:48px!important}.quiz-library-grid{grid-template-columns:1fr!important;padding:0 16px!important}.quiz-card{width:100%!important;max-width:100%!important;overflow:hidden!important}.filter-pills{flex-wrap:nowrap!important;padding-bottom:8px!important;overflow-x:auto!important}.settings-layout{flex-direction:column!important}.settings-nav{border-bottom:1px solid #ffffff14!important;border-right:none!important;flex-direction:row!important;width:100%!important;overflow-x:auto!important}.flashcard-grid{grid-template-columns:1fr!important}.flashcard-study{padding:16px!important}.flashcard-card{height:250px!important}.modal-container{width:95%!important;max-width:95vw!important;max-height:90vh!important;margin:16px!important;overflow-y:auto!important}}@media (width<=640px){.upgrade-modal-container{flex-direction:column!important;max-height:90vh!important;overflow-y:auto!important}.upgrade-modal-left{border-bottom:1px solid #ffffff14!important;border-right:none!important;width:100%!important;max-width:100%!important}.upgrade-modal-right{width:100%!important}}@media (width<=768px){.landing-features-grid,.landing-pricing-grid{grid-template-columns:1fr!important}.landing-hero{text-align:center!important;flex-direction:column!important}.landing-hero-mockup{display:none!important}main,.page-content{padding-bottom:80px!important}}.recharts-responsive-container{min-height:180px!important}@media (width<=768px){.profile-stat-card{min-height:unset!important;flex-direction:row!important;align-items:center!important;gap:12px!important;height:auto!important;padding:12px 16px!important}.profile-stat-card .stat-icon{flex-shrink:0!important;justify-content:center!important;align-items:center!important;width:36px!important;height:36px!important;margin-bottom:0!important;font-size:16px!important;display:flex!important}.profile-stat-card .stat-value{font-size:20px!important;line-height:1!important}.profile-stat-card .stat-label{font-size:10px!important}.profile-stats-container{grid-template-columns:1fr 1fr!important;gap:8px!important;display:grid!important}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-8px)}80%{transform:translate(4px)}}