.user-list-container{padding:30px;background:#f8fafc;border-radius:12px;min-height:calc(100vh - 48px)}.user-list-container h1{font-size:28px;font-weight:700;color:#1e293b;margin-bottom:30px;text-align:center}.users-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:25px;justify-content:center}.user-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e2e8f0;box-shadow:0 2px 8px #0000000d;text-align:center;display:flex;flex-direction:column;align-items:center}.user-avatar-card{width:70px;height:70px;background:linear-gradient(135deg,#0ea5e9,#0284c7);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:32px;font-weight:600;margin-bottom:15px}.user-card h3{font-size:18px;color:#1e293b;margin-bottom:5px;word-break:break-all}.user-email{font-size:14px;color:#64748b;margin-bottom:8px;word-break:break-all}.user-id-small{font-size:10px;color:#94a3b8;word-break:break-all;margin-bottom:5px}.user-plan,.user-last-login{font-size:12px;color:#475569;margin-top:5px}.error-message{color:#dc2626;background-color:#fee2e2;border:1px solid #fca5a5;padding:15px;border-radius:8px;text-align:center;margin-top:20px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#f8fafc;color:#1e293b;overflow-x:hidden;transition:background-color .3s ease,color .3s ease}body.dark-theme{background:#0f172a;color:#f1f5f9}:root{--bg-primary: #ffffff;--bg-secondary: #f8fafc;--bg-tertiary: #f1f5f9;--text-primary: #1e293b;--text-secondary: #64748b;--text-tertiary: #94a3b8;--border-color: #e2e8f0;--border-hover: #cbd5e1;--accent-color: #0ea5e9;--accent-hover: #0284c7;--success-color: #059669;--error-color: #dc2626;--warning-color: #f59e0b;--cp-color: #8b5cf6;--cp-bg: #f3f4f6;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px rgba(0, 0, 0, .05);--shadow-lg: 0 10px 25px rgba(0, 0, 0, .1)}body.dark-theme{--bg-primary: #1e293b;--bg-secondary: #0f172a;--bg-tertiary: #334155;--text-primary: #f1f5f9;--text-secondary: #cbd5e1;--text-tertiary: #94a3b8;--border-color: #334155;--border-hover: #475569;--accent-color: #38bdf8;--accent-hover: #0ea5e9;--success-color: #10b981;--error-color: #ef4444;--warning-color: #fbbf24;--cp-color: #a855f7;--cp-bg: #1e293b;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 25px rgba(0, 0, 0, .4)}.dashboard-container{display:grid;grid-template-columns:280px 1fr;height:100vh}.sidebar{background:var(--bg-primary);border-right:1px solid var(--border-color);padding:24px;display:flex;flex-direction:column;transition:background-color .3s ease,border-color .3s ease}.logo{display:flex;align-items:center;gap:12px;margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--border-color);transition:border-color .3s ease}.logo-icon{width:32px;height:32px;background:linear-gradient(135deg,#0ea5e9,#0284c7);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600}.logo-text{font-size:20px;font-weight:600;color:var(--text-primary);transition:color .3s ease}.nav-menu{display:flex;flex-direction:column;gap:8px;margin-bottom:32px}.nav-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:8px;color:var(--text-secondary);text-decoration:none;transition:all .3s ease;font-weight:500}.nav-item:hover,.nav-item.active{background:var(--bg-tertiary);color:var(--accent-color)}.nav-item.active{background:var(--bg-tertiary);border:1px solid var(--accent-color)}.nav-icon{width:20px;height:20px}.user-section{margin-top:auto;padding-top:24px;border-top:1px solid var(--border-color);transition:border-color .3s ease}.user-info{display:flex;align-items:center;gap:12px;padding:12px;background:var(--bg-secondary);border-radius:8px;transition:background .3s ease}.user-avatar{width:40px;height:40px;background:linear-gradient(135deg,#0ea5e9,#0284c7);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600}.user-details h4{font-size:14px;color:var(--text-primary);margin-bottom:2px;transition:color .3s ease}.user-details p{font-size:12px;color:var(--text-secondary);transition:color .3s ease}.main-content{padding:24px 32px;overflow-y:auto;background:var(--bg-secondary);transition:background-color .3s ease}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.header-left h1{font-size:28px;font-weight:700;color:var(--text-primary);margin-bottom:4px;transition:color .3s ease}.header-left p{color:var(--text-secondary);font-size:16px;transition:color .3s ease}.header-right{display:flex;gap:12px;margin-left:auto}.btn{padding:10px 16px;border-radius:8px;border:1px solid var(--border-color);background:var(--bg-primary);color:var(--text-primary);cursor:pointer;font-weight:500;transition:all .3s ease;text-decoration:none;display:inline-flex;align-items:center;gap:8px}.btn:hover{border-color:var(--accent-color);color:var(--accent-color)}.btn-primary{background:var(--accent-color);border-color:var(--accent-color);color:#fff}.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}.dashboard-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;margin-bottom:32px}.card{background:var(--bg-primary);border-radius:12px;padding:24px;border:1px solid var(--border-color);box-shadow:var(--shadow-sm);transition:all .3s ease}.card h3{font-size:16px;font-weight:600;color:var(--text-primary);margin-bottom:16px;transition:color .3s ease}.stat-value{font-size:36px;font-weight:700;color:var(--text-primary);line-height:1;margin-bottom:8px;transition:color .3s ease}.stat-label{color:var(--text-secondary);font-size:14px;margin-bottom:12px;transition:color .3s ease}.stat-change{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:500}.stat-change.positive{color:#059669}.stat-change.negative{color:#dc2626}.progress-ring{width:80px;height:80px;margin:0 auto 16px;position:relative}.progress-ring svg{width:100%;height:100%;transform:rotate(-90deg)}.progress-ring-bg{fill:none;stroke:#f1f5f9;stroke-width:8}.progress-ring-fill{fill:none;stroke:#0ea5e9;stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 1s ease}.progress-percentage{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:18px;font-weight:700;color:#1e293b}.content-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px}.calendar-section{background:var(--bg-primary);border-radius:12px;border:1px solid var(--border-color);overflow:hidden;transition:all .3s ease}.calendar-loading,.calendar-error{padding:40px;text-align:center;color:var(--text-secondary);transition:color .3s ease}.calendar-error{color:var(--error-color)}.calendar-header{padding:20px 24px;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;transition:border-color .3s ease}.calendar-title{font-size:18px;font-weight:600;color:var(--text-primary);transition:color .3s ease}.calendar-nav{display:flex;gap:8px}.calendar-nav button{padding:8px;border:1px solid var(--border-color);background:var(--bg-primary);border-radius:6px;cursor:pointer;color:var(--text-secondary);transition:all .3s ease}.calendar-nav button:hover{border-color:var(--accent-color);color:var(--accent-color)}.calendar-nav button:disabled{opacity:.5;cursor:not-allowed}.calendar-content{padding:24px}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border-color);border:1px solid var(--border-color);border-radius:8px;overflow:hidden;transition:all .3s ease}.calendar-day-header{background:var(--bg-tertiary);padding:8px 4px;text-align:center;font-size:12px;font-weight:600;color:var(--text-secondary);border-bottom:1px solid var(--border-color);transition:all .3s ease}.calendar-day{background:var(--bg-primary);padding:12px 8px;min-height:80px;font-size:14px;color:var(--text-primary);position:relative;transition:all .3s ease}.calendar-day.other-month{color:var(--text-tertiary);background:var(--bg-secondary)}.calendar-day.today{background:var(--bg-tertiary);color:var(--accent-color);font-weight:600}.calendar-day-number{font-weight:500;margin-bottom:4px}.calendar-task{background:var(--accent-color);color:#fff;font-size:10px;padding:2px 4px;border-radius:3px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.calendar-task.completed{background:var(--text-tertiary);text-decoration:line-through}.event-time{font-size:9px;opacity:.8;display:block}.calendar-sync-indicator{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#059669;margin-left:12px;font-weight:500}.calendar-loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#fffc;display:flex;align-items:center;justify-content:center;z-index:10}.calendar-spinner{display:flex;align-items:center;gap:8px;color:#0ea5e9;font-size:14px}.calendar-content{position:relative}.task-list{background:var(--bg-primary);border-radius:12px;border:1px solid var(--border-color);padding:24px;transition:all .3s ease}.task-list h3{margin-bottom:20px}.task-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border-color);transition:border-color .3s ease}.task-item:last-child{border-bottom:none}.task-checkbox{width:20px;height:20px;border:2px solid var(--border-color);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.task-checkbox.completed{background:var(--accent-color);border-color:var(--accent-color)}.task-checkbox .checkmark{width:12px;height:12px;background:#fff;border-radius:50%;opacity:0;transition:opacity .2s}.task-checkbox.completed .checkmark{opacity:1}.task-details{flex:1}.task-text{font-size:14px;color:var(--text-primary);margin-bottom:2px;transition:color .3s ease}.task-text.completed{text-decoration:line-through;color:var(--text-tertiary)}.task-meta{font-size:12px;color:var(--text-secondary);transition:color .3s ease}.task-priority{width:8px;height:8px;border-radius:50%;margin-left:auto}.priority-high{background:#ef4444}.priority-medium{background:#f59e0b}.priority-low{background:#10b981}.chart-container{height:200px;display:flex;align-items:end;justify-content:space-between;padding:20px 0;border-bottom:1px solid #e2e8f0}.chart-bar{width:30px;background:linear-gradient(to top,#0ea5e9,#38bdf8);border-radius:4px 4px 0 0;margin:0 2px;transition:all .3s ease;cursor:pointer}.chart-bar:hover{background:linear-gradient(to top,#0284c7,#0ea5e9)}.chart-labels{display:flex;justify-content:space-between;padding:12px 0 0;font-size:12px;color:#6b7280}@media (max-width: 1200px){.dashboard-grid{grid-template-columns:1fr 1fr}.content-grid{grid-template-columns:1fr}}@media (max-width: 768px){.dashboard-container{grid-template-columns:1fr}.sidebar{display:none}.main-content{padding:16px}.dashboard-grid{grid-template-columns:1fr}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#0f172a99;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .3s ease-out}.modal-content{background-color:#fff;padding:2rem;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;width:90%;max-width:500px;animation:slideInUp .4s cubic-bezier(.25,.46,.45,.94)}.modal-content h2{margin-top:0;color:#1e293b;font-size:1.5rem;font-weight:600}.modal-content p{color:#64748b;font-size:.9rem;margin-top:.5rem;margin-bottom:1.5rem}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;color:#475569;font-weight:500;font-size:.875rem}.form-group input{width:100%;padding:.75rem 1rem;border:1px solid #cbd5e1;border-radius:8px;font-size:1rem;transition:border-color .2s,box-shadow .2s;background-color:#f8fafc}.modal-actions{display:flex;justify-content:flex-end;gap:1rem;margin-top:2rem}.modal-actions .btn{padding:.6rem 1.2rem}.error-message{color:#dc2626;font-size:.875rem;margin-top:-1rem;margin-bottom:1rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.gamification-header{background:var(--bg-primary);border-radius:12px;padding:20px 24px;margin-bottom:24px;border:1px solid var(--border-color);box-shadow:var(--shadow-sm);transition:all .3s ease}.gamification-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}.stat-item{text-align:center}.stat-item .stat-value{font-size:24px;font-weight:700;color:var(--text-primary);margin-bottom:4px;transition:color .3s ease}.stat-item .stat-label{font-size:12px;color:var(--text-secondary);font-weight:500;transition:color .3s ease}.dashboard-grid-new{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;margin-bottom:24px}.today-card{display:flex;flex-direction:column}.today-tasks{flex:1;margin-top:16px}.today-tasks .task-list{max-height:200px;overflow-y:auto}.projects-list{display:flex;flex-direction:column;gap:12px}.project-item{display:flex;flex-direction:column;gap:6px}.project-name{font-size:14px;font-weight:500;color:#374151}.project-progress-bar{height:8px;background:#f1f5f9;border-radius:4px;overflow:hidden}.project-progress-fill{height:100%;background:linear-gradient(90deg,#0ea5e9,#38bdf8);border-radius:4px;transition:width .5s ease}.dashboard-row-2{display:grid;grid-template-columns:2fr 1fr;gap:24px}.sidebar-right{display:flex;flex-direction:column;gap:24px}.motivational-quote{background:linear-gradient(135deg,#fbbf24,#f59e0b);border-radius:12px;padding:20px;color:#fff}.motivational-quote h3{font-size:16px;font-weight:600;margin-bottom:12px;color:#fff}.motivational-quote p{font-size:14px;line-height:1.5;font-style:italic;margin:0}.streaks-section{background:var(--bg-primary);border-radius:12px;padding:20px;border:1px solid var(--border-color);transition:all .3s ease}.streaks-section h3{font-size:16px;font-weight:600;color:var(--text-primary);margin-bottom:16px;transition:color .3s ease}.streak-info{display:flex;flex-direction:column;gap:16px}.streak-current{text-align:center}.streak-number{display:block;font-size:32px;font-weight:700;color:var(--accent-color);line-height:1;transition:color .3s ease}.streak-label{font-size:12px;color:var(--text-secondary);font-weight:500;transition:color .3s ease}.streak-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}.streak-dot{width:12px;height:12px;border-radius:50%;background:var(--border-color);transition:background .3s ease}.streak-dot.active{background:var(--accent-color)}.categories-section{background:var(--bg-primary);border-radius:12px;padding:20px;border:1px solid var(--border-color);transition:all .3s ease}.categories-section h3{font-size:16px;font-weight:600;color:var(--text-primary);margin-bottom:16px;transition:color .3s ease}.categories-list{display:flex;flex-direction:column;gap:12px}.category-item{display:flex;align-items:center;gap:12px}.category-name{flex:1;font-size:14px;font-weight:500;color:var(--text-primary);min-width:80px;transition:color .3s ease}.category-progress-bar{flex:2;height:6px;background:var(--bg-tertiary);border-radius:3px;overflow:hidden;transition:background .3s ease}.category-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-color),var(--accent-hover));border-radius:3px;transition:width .5s ease}.category-count{font-size:12px;font-weight:600;color:var(--text-secondary);min-width:20px;text-align:right;transition:color .3s ease}.no-categories{text-align:center;color:var(--text-tertiary);font-size:14px;margin:20px 0;transition:color .3s ease}@media (max-width: 1200px){.gamification-stats{grid-template-columns:repeat(2,1fr);gap:24px}.dashboard-grid-new{grid-template-columns:1fr 1fr}.dashboard-row-2{grid-template-columns:1fr}}@media (max-width: 768px){.gamification-stats{grid-template-columns:1fr;gap:16px}.dashboard-grid-new{grid-template-columns:1fr}.streak-grid{grid-template-columns:repeat(5,1fr)}}.google-calendar-auth{background:#fff;border-radius:12px;padding:20px;border:1px solid #e2e8f0;margin-bottom:24px}.auth-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.auth-header h3{margin:0;font-size:16px;font-weight:600;color:#374151}.connection-status{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500}.connection-status.connected{color:#059669}.connection-status.disconnected{color:#dc2626}.status-dot{width:8px;height:8px;border-radius:50%;background:currentColor}.auth-error{background:#fef2f2;border:1px solid #fecaca;color:#dc2626;padding:12px;border-radius:8px;font-size:14px;margin-bottom:16px}.auth-loading{text-align:center;padding:20px;color:#64748b;font-size:14px}.auth-connected{display:flex;justify-content:space-between;align-items:center}.connected-info{display:flex;align-items:center;gap:12px;flex:1}.calendar-icon{color:#059669}.connection-details{display:flex;flex-direction:column}.connected-label{font-size:14px;font-weight:500;color:#374151}.connected-email{font-size:12px;color:#64748b}.auth-disconnected{text-align:center}.disconnect-info{margin-bottom:20px}.disconnect-info p{font-size:14px;color:#64748b;margin-bottom:12px;line-height:1.5}.benefits-list{list-style:none;padding:0;margin:0;text-align:left}.benefits-list li{font-size:12px;color:#64748b;margin-bottom:4px;padding-left:0}.btn-outline{background:#fff;border:1px solid #d1d5db;color:#374151}.btn-outline:hover{border-color:#9ca3af;background:#f9fafb}.theme-toggle{display:flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--border-color);border-radius:6px;padding:6px 12px;cursor:pointer;transition:all .3s ease;font-size:12px;color:var(--text-secondary)}.theme-toggle:hover{border-color:var(--accent-color);color:var(--accent-color)}.theme-toggle-track{position:relative;width:32px;height:18px;background:var(--bg-tertiary);border-radius:12px;transition:background-color .3s ease}.theme-toggle-thumb{position:absolute;top:2px;left:2px;width:14px;height:14px;background:var(--accent-color);border-radius:50%;transition:transform .3s ease;display:flex;align-items:center;justify-content:center;color:#fff}body.dark-theme .theme-toggle-thumb{transform:translate(14px)}.theme-toggle-label{font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.5px}.auth-callback-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#f8fafc;padding:20px}.auth-callback-card{background:#fff;border-radius:16px;padding:40px;box-shadow:0 10px 25px #0000001a;text-align:center;max-width:400px;width:100%}.status-icon{margin-bottom:24px}.status-icon.processing{color:#0ea5e9}.status-icon.success{color:#059669}.status-icon.error{color:#dc2626}.spinner{display:inline-block}.animate-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.callback-title{font-size:24px;font-weight:700;color:#1e293b;margin-bottom:12px}.callback-message{font-size:16px;color:#64748b;margin-bottom:24px;line-height:1.5}.progress-dots{display:flex;justify-content:center;gap:8px;margin-bottom:20px}.progress-dots span{width:8px;height:8px;border-radius:50%;background:#0ea5e9;animation:bounce 1.4s ease-in-out infinite both}.progress-dots span:nth-child(1){animation-delay:-.32s}.progress-dots span:nth-child(2){animation-delay:-.16s}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.success-details,.error-details{background:#f8fafc;border-radius:8px;padding:16px;margin-top:16px}.success-details p,.error-details p{font-size:14px;color:#475569;margin-bottom:8px}.success-details small,.error-details small{font-size:12px;color:#64748b}.cp-display{background:var(--cp-bg);border:2px solid var(--border-color);border-radius:12px;padding:16px;transition:all .3s ease}.cp-display:hover{border-color:var(--cp-color);transform:translateY(-2px);box-shadow:var(--shadow-md)}.cp-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.cp-points{display:flex;align-items:center;gap:8px}.cp-icon{font-size:24px;filter:drop-shadow(0 2px 4px rgba(139,92,246,.3))}.cp-number{font-size:28px;font-weight:700;color:var(--cp-color);line-height:1}.cp-label{font-size:14px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.cp-level{text-align:right}.level-badge{display:block;font-size:12px;font-weight:600;color:var(--cp-color);background:var(--cp-color);background-opacity:.1;padding:4px 8px;border-radius:12px;margin-bottom:4px;border:1px solid var(--cp-color)}.level-title{font-size:11px;color:var(--text-tertiary);font-weight:500;text-transform:uppercase;letter-spacing:.3px}.cp-progress{margin-top:16px}.progress-bar{width:100%;height:8px;background:var(--border-color);border-radius:4px;overflow:hidden;margin-bottom:8px}.progress-fill{height:100%;background:linear-gradient(90deg,var(--cp-color),var(--accent-color));border-radius:4px;transition:width .5s ease;box-shadow:0 2px 4px #8b5cf633}.progress-text{font-size:11px;color:var(--text-tertiary);text-align:center;font-weight:500}.stat-item.cp-display-container{padding:0}.stat-cp-display{background:transparent;border:none;padding:0}.stat-cp-display .cp-info{margin-bottom:0}.stat-cp-display .cp-number{font-size:24px}.stat-cp-display .cp-icon{font-size:20px}.stat-cp-display .cp-label{font-size:12px}.container{max-width:1200px;margin:0 auto;padding:20px}.text-center{text-align:center}.button{display:inline-block;padding:10px 20px;margin:10px 5px;border-radius:5px;text-decoration:none;font-weight:700;transition:background-color .3s ease}.button.primary{background-color:#007bff;color:#fff}.button.primary:hover{background-color:#0056b3}.button.secondary{background-color:#6c757d;color:#fff}.button.secondary:hover{background-color:#5a6268}.hero-section{background:linear-gradient(to bottom,#87ceeb,#fff);padding:80px 20px 0;text-align:center;position:relative;overflow:hidden;min-height:700px;display:flex;flex-direction:column;justify-content:center;align-items:center}.hero-content{z-index:1;position:relative}.hero-section .app-logo{width:80px;height:80px;margin-bottom:20px;border-radius:50%;box-shadow:0 4px 8px #0000001a}.hero-section h1{font-size:3.5em;color:#333;margin-bottom:10px;line-height:1.2}.hero-section p{font-size:1.2em;color:#555;max-width:600px;margin:0 auto 40px}.phone-display{margin-top:50px;position:relative;width:100%;display:flex;justify-content:center;padding-bottom:0}.main-phone-img{width:280px;height:auto;border-radius:20px;box-shadow:0 15px 30px #0000004d;position:absolute;bottom:-150px;transform:translate(-50%);left:50%;z-index:2}.features-section-1{background-color:#fff;padding:150px 20px 80px;display:flex;justify-content:center;align-items:center;text-align:center}.features-section-1 .container{display:flex;flex-wrap:wrap;gap:40px;justify-content:center}.features-section-1 .feature-item{flex:1;min-width:300px;max-width:500px;padding:20px;background-color:#f9f9f9;border-radius:8px;box-shadow:0 2px 5px #0000000d}.features-section-1 .feature-item h2{font-size:1.8em;color:#444;margin-bottom:15px}.features-section-1 .feature-item p{color:#666}.video-section{background:linear-gradient(to bottom,#c0e0f0,#87ceeb);padding:80px 20px;text-align:center}.video-section h2{font-size:2.5em;color:#333;margin-bottom:40px}.video-wrapper{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:800px;margin:0 auto;border-radius:10px;box-shadow:0 8px 15px #0003}.video-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%}.features-section-2{background-color:#e0e0e0;padding:80px 20px;display:flex;justify-content:center;align-items:center}.features-section-2 .container{display:flex;flex-wrap:wrap;align-items:center;gap:50px;justify-content:center}.features-section-2 .text-content{flex:1;min-width:300px;max-width:500px}.features-section-2 h2{font-size:2.2em;color:#333;margin-bottom:20px}.features-section-2 p{color:#555;margin-bottom:30px}.phone-horizontal-display img{width:500px;height:auto;border-radius:20px;box-shadow:0 10px 20px #00000026}.app-showcase-section{background-color:#f8f8f8;padding:80px 20px;text-align:center}.app-showcase-section .showcase-content{display:flex;flex-direction:column;align-items:center;gap:30px}.app-showcase-section h2{font-size:2.5em;color:#333;margin-bottom:15px}.app-showcase-section p{max-width:700px;color:#666}.app-showcase-section .large-phone-img{width:300px;height:auto;border-radius:25px;box-shadow:0 12px 25px #00000040;margin:30px 0}.app-showcase-section .side-text{max-width:500px;font-style:italic;color:#777}.download-cta-section{background-color:#333;color:#fff;padding:80px 20px;display:flex;justify-content:center;align-items:center}.download-cta-section .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:50px}.download-cta-section .text-and-buttons{flex:1;min-width:300px;max-width:500px}.download-cta-section h2{font-size:2.8em;margin-bottom:20px}.download-cta-section p{margin-bottom:30px;color:#ccc}.download-cta-section .button.primary{background-color:#28a745}.download-cta-section .button.primary:hover{background-color:#218838}.download-cta-section .button.secondary{background-color:#17a2b8}.download-cta-section .button.secondary:hover{background-color:#138496}.phone-vertical-display img{width:250px;height:auto;border-radius:20px;box-shadow:0 10px 20px #0000004d}.footer-section{background-color:#222;color:#eee;padding:50px 20px 150px;text-align:center;position:relative;overflow:hidden}.footer-section .footer-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}.footer-section p{max-width:600px;margin-bottom:40px}.footer-phone-img{width:200px;height:auto;border-radius:15px;box-shadow:0 10px 20px #0006;transform:rotate(15deg);position:absolute;bottom:-100px;left:50%;transform:translate(-50%) rotate(15deg);z-index:0}@media (max-width: 768px){.hero-section h1{font-size:2.5em}.hero-section p{font-size:1em}.main-phone-img{width:200px;bottom:-100px}.features-section-1 .container,.features-section-2 .container,.download-cta-section .container{flex-direction:column;text-align:center;gap:30px}.features-section-2 .phone-horizontal-display img{width:100%;max-width:400px}.download-cta-section .phone-vertical-display img{width:180px}.app-showcase-section .large-phone-img{width:250px}.footer-phone-img{width:150px;bottom:-80px}.video-wrapper{padding-bottom:75%}}@media (max-width: 480px){.hero-section h1{font-size:2em}.hero-section p{font-size:.9em}.main-phone-img{width:180px;bottom:-80px}.button{padding:8px 15px;font-size:.9em;margin:5px}.features-section-1,.video-section,.features-section-2,.app-showcase-section,.download-cta-section,.footer-section{padding:60px 15px}}.login-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background-color:#f0f2f5;padding:20px}.login-card{background-color:#fff;padding:40px;border-radius:12px;box-shadow:0 4px 15px #0000001a;width:100%;max-width:400px;text-align:center}.login-card h2{margin-bottom:25px;color:#1e293b;font-size:24px}.form-group{margin-bottom:20px;text-align:left}.form-group label{display:block;margin-bottom:8px;color:#334155;font-weight:500}.form-group input{width:100%;padding:12px;border:1px solid #cbd5e1;border-radius:8px;font-size:16px;box-sizing:border-box}.form-group input:focus{outline:none;border-color:#0ea5e9;box-shadow:0 0 0 3px #0ea5e933}.btn-primary{width:100%;padding:12px;background-color:#0ea5e9;color:#fff;border:none;border-radius:8px;font-size:18px;font-weight:600;cursor:pointer;transition:background-color .2s ease}.btn-primary:hover:not(:disabled){background-color:#0284c7}.btn-primary:disabled{background-color:#94a3b8;cursor:not-allowed}.error-message{color:#dc2626;background-color:#fee2e2;border:1px solid #fca5a5;padding:10px;border-radius:8px;margin-bottom:20px;font-size:14px}.blog-container{padding:40px 20px;max-width:1200px;margin:0 auto;text-align:center}.blog-container h1{font-size:2.8em;margin-bottom:40px;color:#1e293b}.posts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;justify-content:center}.post-card{background:#fff;border-radius:12px;box-shadow:0 4px 10px #00000014;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease-in-out}.post-card:hover{transform:translateY(-5px)}.post-image{width:100%;height:200px;object-fit:cover}.post-content{padding:20px;flex-grow:1;display:flex;flex-direction:column;text-align:left}.post-content h2{font-size:1.5em;margin-bottom:10px;color:#0ea5e9;line-height:1.3}.post-content h2 a{text-decoration:none;color:inherit;transition:color .2s}.post-content h2 a:hover{color:#0284c7}.post-meta{font-size:.9em;color:#64748b;margin-bottom:15px}.post-content p{font-size:1em;color:#475569;margin-bottom:15px;flex-grow:1}.read-more{display:inline-block;margin-top:10px;color:#0ea5e9;text-decoration:none;font-weight:600;transition:color .2s}.read-more:hover{color:#0284c7}.blog-post-container{padding:40px 20px;max-width:800px;margin:30px auto;background:#fff;border-radius:12px;box-shadow:0 4px 10px #00000014}.blog-post-container .back-to-blog{display:inline-block;margin-bottom:20px;color:#0ea5e9;text-decoration:none;font-weight:600;transition:color .2s}.blog-post-container .back-to-blog:hover{color:#0284c7}.post-header-image{width:100%;height:350px;object-fit:cover;border-radius:8px;margin-bottom:30px}.blog-post-container h1{font-size:2.5em;color:#1e293b;margin-bottom:15px;line-height:1.2}.blog-post-container .post-meta{font-size:.95em;color:#64748b;margin-bottom:30px;border-bottom:1px solid #eee;padding-bottom:15px}.blog-post-container .post-content-html{font-size:1.1em;line-height:1.8;color:#334155}.blog-post-container .post-content-html p{margin-bottom:1em}.blog-post-container .post-content-html h2{font-size:1.8em;margin-top:1.5em;margin-bottom:.8em;color:#0ea5e9}.blog-post-container .error-message{color:#dc2626}body{margin:0;font-family:Roboto,sans-serif;line-height:1.6;color:#333;background-color:#f4f4f4}#root,.App{height:100vh;display:flex;flex-direction:column}