@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800&display=swap";@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap";.main-navigation{position:fixed;top:0;left:0;right:0;z-index:1000;background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid rgba(59,130,246,.1);padding:1rem 0;font-family:Inter,Poppins,sans-serif}.nav-container{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 2rem}.nav-brand{flex-shrink:0}.brand-link{display:flex;align-items:center;gap:.75rem;text-decoration:none;transition:all .3s ease}.brand-link:hover{transform:translateY(-2px)}.brand-icon{font-size:1.75rem;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.brand-text{font-family:Poppins,sans-serif;font-size:1.5rem;font-weight:700;color:#3b82f6}.nav-links{display:flex;gap:2rem;flex:1;justify-content:center}.nav-link{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:#64748b;font-weight:500;font-size:.95rem;padding:.75rem 1.5rem;border-radius:12px;transition:all .3s ease;position:relative}.nav-link:hover{color:#3b82f6;background:#3b82f61a;transform:translateY(-2px)}.nav-link.active{color:#3b82f6;background:linear-gradient(135deg,#3b82f61a,#93c5fd1a);box-shadow:0 4px 15px #3b82f633}.nav-link.active:after{content:"";position:absolute;bottom:-1rem;left:50%;transform:translate(-50%);width:6px;height:6px;background:#3b82f6;border-radius:50%}.nav-icon{font-size:1.1rem}.nav-label{font-weight:600}.nav-profile{flex-shrink:0}.profile-link{display:flex;align-items:center;text-decoration:none}.profile-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#60a5fa);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:1rem;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #3b82f64d}.profile-avatar:hover{transform:scale(1.05);box-shadow:0 6px 20px #3b82f666}@media(max-width:1024px){.nav-links{gap:1.5rem}.nav-link{padding:.5rem 1rem;font-size:.875rem}}@media(max-width:768px){.nav-container{padding:0 1rem}.nav-links{gap:1rem}.nav-link{flex-direction:column;gap:.25rem;padding:.5rem;font-size:.75rem}.nav-icon{font-size:1rem}.brand-text{font-size:1.25rem}.profile-avatar{width:35px;height:35px;font-size:.875rem}}@media(max-width:480px){.nav-links{gap:.5rem}.nav-link{padding:.25rem}.nav-label,.brand-text{display:none}}@tailwind base;@tailwind components;@tailwind utilities;:root{--primary-color: #4361ee;--secondary-color: #3a0ca3;--accent-color: #4cc9f0;--text-color: #2b2d42;--light-text: #8d99ae;--background-color: #f8f9fa;--card-bg: #ffffff;--success-color: #4ade80;--warning-color: #fbbf24;--danger-color: #f87171;--border-radius: 12px;--box-shadow: 0 10px 20px rgba(0,0,0,.1);--transition: all .3s ease}*{font-family:Poppins,sans-serif}.page-with-navbar{padding-top:70px;min-height:100vh}.nav-transition{transition:all .3s ease}.page-header{text-align:center;margin-bottom:3rem;padding:2rem 0}.page-header h1{font-size:2.5rem;font-weight:700;color:#1e293b;margin-bottom:.5rem;background:linear-gradient(135deg,#3b82f6,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.page-header p{font-size:1.1rem;color:#64748b;max-width:600px;margin:0 auto}.min-h-screen{min-height:100vh}.max-w-4xl{max-width:56rem}.max-w-7xl{max-width:80rem}.mx-auto{margin-left:auto;margin-right:auto}.p-6{padding:1.5rem}.p-4{padding:1rem}.p-8{padding:2rem}.py-12{padding-top:3rem;padding-bottom:3rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.mb-8{margin-bottom:2rem}.mb-4{margin-bottom:1rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}.mr-3{margin-right:.75rem}.ml-1{margin-left:.25rem}.mt-1{margin-top:.25rem}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.from-blue-50{--tw-gradient-from: #eff6ff;--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(239, 246, 255, 0))}.to-indigo-100{--tw-gradient-to: #e0e7ff}.from-gray-50{--tw-gradient-from: #f9fafb;--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(249, 250, 251, 0))}.to-blue-50{--tw-gradient-to: #eff6ff}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-purple-600{--tw-gradient-from: #9333ea;--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(147, 51, 234, 0))}.to-pink-600{--tw-gradient-to: #db2777}.from-purple-500{--tw-gradient-from: #a855f7;--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(168, 85, 247, 0))}.to-pink-500{--tw-gradient-to: #ec4899}.from-blue-500{--tw-gradient-from: #3b82f6;--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(59, 130, 246, 0))}.to-blue-600{--tw-gradient-to: #2563eb}.from-emerald-500{--tw-gradient-from: #10b981;--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(16, 185, 129, 0))}.to-teal-600{--tw-gradient-to: #0d9488}.text-gray-800{color:#1f2937}.text-gray-600{color:#4b5563}.text-gray-700{color:#374151}.text-gray-400{color:#9ca3af}.text-white{color:#fff}.text-blue-600{color:#2563eb}.text-green-600{color:#16a34a}.text-red-500{color:#ef4444}.text-gray-500{color:#6b7280}.text-purple-100{color:#f3e8ff}.text-purple-600{color:#9333ea}.text-green-500{color:#22c55e}.text-green-800{color:#166534}.text-green-700{color:#15803d}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.text-transparent{color:transparent}.bg-white{background-color:#fff}.bg-gray-100{background-color:#f3f4f6}.bg-gray-50{background-color:#f9fafb}.bg-green-50{background-color:#f0fdf4}.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.border-blue-200{border-color:#bfdbfe}.border-blue-400{border-color:#60a5fa}.border-gray-200{border-color:#e5e7eb}.border-gray-300{border-color:#d1d5db}.border-green-200{border-color:#bbf7d0}.rounded-xl{border-radius:.75rem}.rounded-lg{border-radius:.5rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{align-items:center}.space-x-4>:not([hidden])~:not([hidden]){margin-left:1rem}.space-y-3>:not([hidden])~:not([hidden]){margin-top:.75rem}.grid{display:grid}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-2xl{font-size:1.5rem;line-height:2rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.font-medium{font-weight:500}.text-center{text-align:center}.text-left{text-align:left}.relative{position:relative}.absolute{position:absolute}.inset-0{top:0;right:0;bottom:0;left:0}.w-full{width:100%}.w-5{width:1.25rem}.h-5{height:1.25rem}.shadow-xl{box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.shadow-lg,.hover\:shadow-lg:hover{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.hover\:border-blue-400:hover{border-color:#60a5fa}.hover\:bg-gray-50:hover{background-color:#f9fafb}.hover\:bg-purple-50:hover{background-color:#faf5ff}.hover\:scale-105:hover{transform:scale(1.05)}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.bg-opacity-50{background-color:rgba(var(--tw-bg-opacity-color),.5)}.ring-4{box-shadow:0 0 0 4px var(--tw-ring-color)}.ring-purple-500{--tw-ring-color: #a855f7}.ring-opacity-50{--tw-ring-opacity: .5}.transform{transform:var(--tw-transform)}.line-through{text-decoration:line-through}.overflow-hidden{overflow:hidden}@media(min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}.bg-gradient-to-r.from-purple-600.to-pink-600{background:linear-gradient(to right,#9333ea,#db2777)}.bg-gradient-to-r.from-purple-500.to-pink-500{background:linear-gradient(to right,#a855f7,#ec4899)}.bg-gradient-to-r.from-blue-500.to-blue-600{background:linear-gradient(to right,#3b82f6,#2563eb)}.bg-gradient-to-r.from-emerald-500.to-teal-600{background:linear-gradient(to right,#10b981,#0d9488)}.bg-gradient-to-br.from-blue-50.to-indigo-100{background:linear-gradient(to bottom right,#eff6ff,#e0e7ff)}.bg-gradient-to-br.from-gray-50.to-blue-50{background:linear-gradient(to bottom right,#f9fafb,#eff6ff)}:root{--header-height: 80px}.header{position:fixed;top:0;left:0;right:0;background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid rgba(59,151,151,.1);z-index:1000;height:var(--header-height)}.header-content{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 3rem;height:100%}.logo{display:flex;align-items:center;height:100%}.logo-text{font-family:Poppins,sans-serif;font-size:1.5rem;font-weight:700;background:linear-gradient(135deg,#3b9797,#5bb5b5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}.nav-links{display:flex;gap:3rem;margin-left:3rem;height:100%;align-items:center}.nav-links a{text-decoration:none;color:#064541;font-weight:500;font-size:1rem;transition:all .3s ease;cursor:pointer;line-height:1;white-space:nowrap}.nav-links a:hover{color:#191a1a}.nav-links .active-nav{color:#3b9797!important;font-weight:800!important;padding-bottom:2px!important;font-size:large;cursor:pointer!important}.auth-buttons{display:flex;gap:1rem;align-items:center;height:100%}.streak-badge{font-weight:600;background:linear-gradient(135deg,#3b9797,#2c7a7a);color:#fff;padding:16px 2px;border-radius:20px;font-size:.9rem;line-height:1;white-space:nowrap;min-width:60px;text-align:center}.user-type-badge{font-weight:600;padding:16px;border-radius:20px;font-size:.9rem;border:2px solid;line-height:1;white-space:nowrap;min-width:120px;text-align:center}.user-type-badge.premium{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border-color:#f59e0b}.user-type-badge.free{background:#f8f9fa;color:#6b7280;border-color:#e5e7eb}.roll-badge{color:#2c3e50;font-weight:600;background:#f8f9fa;padding:16px;border-radius:20px;border:2px solid #3B9797;font-size:.9rem;line-height:1;white-space:nowrap;min-width:100px;text-align:center}.btn-signup{background:#3b9797;color:#fff;border:none;padding:1rem 1.5rem;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s ease;font-size:.875rem;box-shadow:0 4px 15px #3b97974d;line-height:1;white-space:nowrap}.btn-signup:hover{transform:translateY(-2px);background:#626c6c;color:#fff;box-shadow:0 8px 25px #3b979766}.main-content{padding-top:var(--header-height)}.app-bg-free{background:#f8fafc;min-height:100vh}.app-bg-premium{background:linear-gradient(135deg,#eef4f4 75%,#eef7f7);min-height:100vh}.app-loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - var(--header-height));padding:20px;text-align:center}.app-loading-spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #3B9797;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.app-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.app-modal-content{background:#fff;border-radius:12px;padding:30px;max-width:600px;width:90%;max-height:80vh;overflow:auto;position:relative}.app-modal-close{position:absolute;top:15px;right:15px;background:none;border:none;font-size:24px;cursor:pointer;color:#666}.app-text-center{text-align:center}.app-mb-20{margin-bottom:20px}.app-grid-auto-fit{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;max-width:1200px;margin:0 auto}.app-card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 4px 6px #0000001a;border:1px solid #e1e5e9;cursor:pointer;transition:transform .2s,box-shadow .2s}.app-card:hover{transform:translateY(-2px);box-shadow:0 8px 15px #00000026}.app-btn-primary{background:#3b9797;color:#fff;border:none;padding:10px 20px;border-radius:6px;cursor:pointer;font-weight:500;transition:background .2s}.app-btn-primary:hover{background:#2c7a7a}.app-btn-disabled{background:#ccc;color:#fff;border:none;padding:10px 20px;border-radius:6px;cursor:not-allowed;font-weight:500}.app-btn-secondary{background:#6c757d;color:#fff;border:none;padding:10px 20px;border-radius:6px;cursor:pointer;font-weight:500}.app-btn-success{background:#28a745;color:#fff;border:none;padding:10px 20px;border-radius:6px;cursor:pointer;font-weight:500}.app-btn-danger{background:#dc3545;color:#fff;border:none;padding:12px 24px;border-radius:6px;cursor:pointer;font-size:16px;font-weight:600}