:root{--color-primary: #7c3aed;--color-primary-light: #a78bfa;--color-primary-dark: #5b21b6;--color-primary-50: #f5f3ff;--color-primary-100: #ede9fe;--color-accent: #14b8a6;--color-accent-light: #5eead4;--color-accent-dark: #0d9488;--color-warm: #f59e0b;--color-warm-light: #fcd34d;--color-danger: #ef4444;--color-success: #22c55e;--surface-primary: rgba(255, 255, 255, .72);--surface-glass: rgba(255, 255, 255, .55);--surface-glass-strong: rgba(255, 255, 255, .85);--surface-dark: #0f172a;--gradient-primary: linear-gradient(135deg, #7c3aed 0%, #6366f1 50%, #14b8a6 100%);--gradient-warm: linear-gradient(135deg, #7c3aed 0%, #ec4899 50%, #f59e0b 100%);--gradient-hero: linear-gradient(135deg, #4c1d95 0%, #5b21b6 25%, #6d28d9 50%, #7c3aed 75%, #4338ca 100%);--gradient-subtle: linear-gradient(160deg, #f8f7ff 0%, #f3f0ff 25%, #eef6ff 55%, #f0fdfa 100%);--shadow-xs: 0 1px 2px rgba(0, 0, 0, .04);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);--shadow-md: 0 4px 16px rgba(124, 58, 237, .06), 0 2px 6px rgba(0, 0, 0, .03);--shadow-lg: 0 8px 32px rgba(124, 58, 237, .1), 0 4px 12px rgba(0, 0, 0, .04);--shadow-xl: 0 16px 48px rgba(124, 58, 237, .12), 0 8px 24px rgba(0, 0, 0, .06);--shadow-glow: 0 0 20px rgba(124, 58, 237, .2), 0 0 60px rgba(124, 58, 237, .08);--shadow-glow-accent: 0 0 20px rgba(20, 184, 166, .2), 0 0 60px rgba(20, 184, 166, .08);--blur-sm: 8px;--blur-md: 16px;--blur-lg: 24px;--radius-sm: .625rem;--radius-md: 1rem;--radius-lg: 1.25rem;--radius-xl: 1.5rem;--radius-2xl: 2rem;--radius-full: 9999px;--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--ease-smooth: cubic-bezier(.4, 0, .2, 1);--ease-out-expo: cubic-bezier(.16, 1, .3, 1);--duration-fast: .18s;--duration-normal: .3s;--duration-slow: .45s;--mobile-max: 480px;--safe-bottom: env(safe-area-inset-bottom, 0px);--bottom-nav-h: 72px}*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--gradient-subtle);background-attachment:fixed;min-height:100vh;min-height:100dvh;color:#1e293b;overflow-x:hidden;line-height:1.6}[lang=ar] body,[lang=ar] button,[lang=ar] input,[lang=ar] textarea,[lang=ar] select,[lang=ar] h1,[lang=ar] h2,[lang=ar] h3,[lang=ar] h4,[lang=ar] p,[lang=ar] div,[lang=ar] span,[lang=ar] label{font-family:Tajawal,-apple-system,BlinkMacSystemFont,sans-serif}.mobile-shell{max-width:var(--mobile-max);margin:0 auto;min-height:100vh;min-height:100dvh;position:relative}@media(min-width:481px){.mobile-shell{border-left:1px solid rgba(203,213,225,.2);border-right:1px solid rgba(203,213,225,.2);box-shadow:0 0 80px #7c3aed0a}}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#7c3aed26;border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:#7c3aed4d}@keyframes fadeInUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes slideInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes pulseGlow{0%,to{box-shadow:0 0 8px #7c3aed40,0 0 24px #7c3aed14}50%{box-shadow:0 0 16px #7c3aed66,0 0 48px #7c3aed26}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes spinSlow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes bounceLight{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}@keyframes breathe{0%,to{opacity:.4;transform:scale(1)}50%{opacity:.7;transform:scale(1.04)}}@keyframes dotPulse1{0%,to{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}@keyframes dotPulse2{0%,to{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}@keyframes dotPulse3{0%,to{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}@keyframes breatheLung{0%,to{transform:scale(1);opacity:.85}50%{transform:scale(1.08);opacity:1}}@keyframes heartPulse{0%,to{transform:scale(1)}15%{transform:scale(1.15)}30%{transform:scale(1)}45%{transform:scale(1.08)}}@keyframes heartRing{0%,to{opacity:.15;transform:scale(1)}50%{opacity:.4;transform:scale(1.06)}}@keyframes sunRise{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes rayPulse{0%,to{opacity:.5}50%{opacity:1}}@keyframes auraExpand{0%,to{opacity:.1;transform:scale(1)}50%{opacity:.3;transform:scale(1.08)}}@keyframes dotFloat{0%,to{opacity:.4;transform:translateY(0)}50%{opacity:.8;transform:translateY(-4px)}}@keyframes ripple{0%{transform:scale(.8);opacity:.6}to{transform:scale(2.5);opacity:0}}@keyframes exerciseCardEntry{0%{opacity:0;transform:translateY(32px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes breathCircle{0%,to{r:60;opacity:.08}50%{r:80;opacity:.15}}@keyframes countdownPop{0%{transform:scale(1.3);opacity:0}to{transform:scale(1);opacity:1}}@keyframes successBounce{0%{transform:scale(0);opacity:0}50%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}@keyframes pageEnter{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.page-enter{animation:pageEnter var(--duration-slow) var(--ease-out-expo) both}.anim-fade-in-up{animation:fadeInUp var(--duration-slow) var(--ease-out-expo) both}.anim-fade-in-scale{animation:fadeInScale var(--duration-slow) var(--ease-out-expo) both}.anim-slide-in-right{animation:slideInRight var(--duration-slow) var(--ease-out-expo) both}.anim-slide-in-left{animation:slideInLeft var(--duration-slow) var(--ease-out-expo) both}.anim-slide-up{animation:slideUp var(--duration-slow) var(--ease-out-expo) both}.anim-scale-in{animation:scaleIn var(--duration-normal) var(--ease-out-expo) both}.anim-exercise-card{animation:exerciseCardEntry var(--duration-slow) var(--ease-out-expo) both}.anim-delay-1{animation-delay:60ms}.anim-delay-2{animation-delay:.12s}.anim-delay-3{animation-delay:.18s}.anim-delay-4{animation-delay:.24s}.anim-delay-5{animation-delay:.3s}.anim-delay-6{animation-delay:.36s}.anim-delay-7{animation-delay:.42s}.anim-delay-8{animation-delay:.48s}.glass-card{background:var(--surface-glass-strong);backdrop-filter:blur(var(--blur-md));-webkit-backdrop-filter:blur(var(--blur-md));border:1px solid rgba(255,255,255,.6);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);transition:box-shadow var(--duration-normal) var(--ease-smooth),transform var(--duration-normal) var(--ease-smooth)}.glass-card-light{background:var(--surface-glass);backdrop-filter:blur(var(--blur-sm));-webkit-backdrop-filter:blur(var(--blur-sm));border:1px solid rgba(255,255,255,.35);border-radius:var(--radius-xl);box-shadow:var(--shadow-xs)}.btn-primary{background:var(--gradient-primary);background-size:200% 200%;color:#fff;font-weight:700;border:none;border-radius:var(--radius-lg);padding:.875rem 2rem;cursor:pointer;transition:all var(--duration-normal) var(--ease-smooth);box-shadow:0 4px 16px #7c3aed40;position:relative;overflow:hidden;-webkit-user-select:none;user-select:none}.btn-primary:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,transparent 50%);opacity:0;transition:opacity var(--duration-fast)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px #7c3aed59;background-position:100% 0}.btn-primary:hover:after{opacity:1}.btn-primary:active{transform:translateY(0) scale(.97)}.btn-primary:disabled{background:#cbd5e1;box-shadow:none;transform:none;cursor:not-allowed}.btn-secondary{background:#fff;color:#475569;font-weight:600;border:1.5px solid rgba(148,163,184,.25);border-radius:var(--radius-lg);padding:.875rem 2rem;cursor:pointer;transition:all var(--duration-normal) var(--ease-smooth)}.btn-secondary:hover{border-color:var(--color-primary-light);color:var(--color-primary);transform:translateY(-1px);box-shadow:var(--shadow-md)}.text-gradient{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.text-gradient-warm{background:var(--gradient-warm);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.bg-gradient-animated{background:var(--gradient-hero);background-size:400% 400%;animation:gradientShift 12s ease infinite}.particle{position:absolute;border-radius:50%;pointer-events:none;opacity:.12}.particle-1{width:200px;height:200px;background:radial-gradient(circle,rgba(124,58,237,.35),transparent 70%);top:-40px;right:-60px;animation:float 8s ease-in-out infinite}.particle-2{width:160px;height:160px;background:radial-gradient(circle,rgba(20,184,166,.35),transparent 70%);bottom:15%;left:-30px;animation:float 10s ease-in-out infinite 2s}.particle-3{width:120px;height:120px;background:radial-gradient(circle,rgba(245,158,11,.25),transparent 70%);top:40%;right:10%;animation:float 7s ease-in-out infinite 4s}.particle-4{width:80px;height:80px;background:radial-gradient(circle,rgba(236,72,153,.25),transparent 70%);bottom:30%;left:20%;animation:float 9s ease-in-out infinite 1s}.input-premium{width:100%;padding:.875rem 1rem;background:#f8fafce6;border:1.5px solid rgba(203,213,225,.4);border-radius:var(--radius-md);font-size:1rem;color:#1e293b;transition:all var(--duration-normal) var(--ease-smooth);outline:none}.input-premium:focus{border-color:var(--color-primary);background:#fff;box-shadow:0 0 0 4px #7c3aed14,var(--shadow-sm)}.input-premium.error{border-color:var(--color-danger);box-shadow:0 0 0 4px #ef444414}.progress-bar-container{width:100%;height:6px;background:#cbd5e140;border-radius:var(--radius-full);overflow:hidden;position:relative}.progress-bar-fill{height:100%;background:var(--gradient-primary);background-size:200% 100%;border-radius:var(--radius-full);transition:width var(--duration-normal) var(--ease-spring);position:relative}.progress-bar-fill:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:shimmer 2s ease-in-out infinite;background-size:200% 100%}.typing-dot{width:7px;height:7px;border-radius:50%;background:var(--color-primary-light);display:inline-block;margin:0 2px}.typing-dot:nth-child(1){animation:dotPulse1 1.2s ease-in-out infinite}.typing-dot:nth-child(2){animation:dotPulse2 1.2s ease-in-out .2s infinite}.typing-dot:nth-child(3){animation:dotPulse3 1.2s ease-in-out .4s infinite}.badge{display:inline-flex;align-items:center;padding:.2rem .625rem;border-radius:var(--radius-full);font-size:.7rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase}.badge-primary{background:var(--color-primary-100);color:var(--color-primary-dark)}.badge-accent{background:#14b8a61a;color:var(--color-accent-dark)}.badge-warm{background:#f59e0b1a;color:#b45309}.badge-danger{background:#ef44441a;color:#dc2626}.hover-lift{transition:transform var(--duration-normal) var(--ease-spring),box-shadow var(--duration-normal) var(--ease-smooth);will-change:transform}.hover-lift:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}.hover-lift:active{transform:translateY(0) scale(.98)}.pulse-glow{animation:pulseGlow 2.5s ease-in-out infinite}.icon-gradient{display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);padding:.75rem;position:relative}.modal-overlay{background:#0f172a80;backdrop-filter:blur(var(--blur-sm));-webkit-backdrop-filter:blur(var(--blur-sm))}::selection{background:#7c3aed26;color:#1e293b}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.reaction-btn{transition:transform var(--duration-fast) var(--ease-spring)}.reaction-btn:active{transform:scale(1.2)}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:var(--mobile-max);height:var(--bottom-nav-h);padding-bottom:var(--safe-bottom);background:#ffffffeb;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid rgba(203,213,225,.2);display:flex;align-items:center;justify-content:space-around;z-index:50;box-shadow:0 -4px 24px #0000000a}.bottom-nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 12px;border-radius:var(--radius-md);transition:all var(--duration-normal) var(--ease-smooth);cursor:pointer;-webkit-user-select:none;user-select:none;background:none;border:none;position:relative}.bottom-nav-item.active{color:var(--color-primary)}.bottom-nav-item.active:before{content:"";position:absolute;top:-1px;left:50%;transform:translate(-50%);width:24px;height:3px;background:var(--gradient-primary);border-radius:0 0 3px 3px}.bottom-nav-item svg{width:22px;height:22px;transition:transform var(--duration-fast) var(--ease-spring)}.bottom-nav-item.active svg{transform:scale(1.1)}.bottom-nav-label{font-size:.625rem;font-weight:600;letter-spacing:.01em}.exercise-card{background:#fff;border:1px solid rgba(226,232,240,.6);border-radius:var(--radius-xl);padding:1.25rem;transition:all var(--duration-normal) var(--ease-smooth);cursor:pointer;position:relative;overflow:hidden}.exercise-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--radius-xl) var(--radius-xl) 0 0;opacity:0;transition:opacity var(--duration-normal)}.exercise-card:hover:before{opacity:1}.exercise-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:transparent}.exercise-card:active{transform:scale(.98)}.breath-ring{transition:all 1s var(--ease-smooth)}.breath-indicator{transition:all .5s var(--ease-smooth)}.section-header{display:flex;align-items:center;gap:.625rem;margin-bottom:1rem}.section-header-icon{width:2rem;height:2rem;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}.section-header-title{font-size:1.125rem;font-weight:800;color:#1e293b;letter-spacing:-.01em}.stat-card{background:#fff;border:1px solid rgba(226,232,240,.5);border-radius:var(--radius-lg);padding:.875rem;display:flex;align-items:center;gap:.75rem}.chat-bubble-user{background:var(--gradient-primary);color:#fff;border-radius:var(--radius-xl) var(--radius-xl) 6px var(--radius-xl);padding:.75rem 1rem;max-width:82%;box-shadow:0 2px 8px #7c3aed26}.chat-bubble-bot{background:#fff;color:#334155;border:1px solid rgba(226,232,240,.5);border-radius:var(--radius-xl) var(--radius-xl) var(--radius-xl) 6px;padding:.75rem 1rem;max-width:82%;box-shadow:var(--shadow-xs)}.screen-with-nav{padding-bottom:calc(var(--bottom-nav-h) + 16px)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1.5rem;text-align:center}.empty-state-icon{width:64px;height:64px;border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;font-size:1.75rem;margin-bottom:1rem;background:#7c3aed0f}.compact-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;position:sticky;top:0;z-index:30;background:#ffffffe0;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(226,232,240,.3)}.compact-header-title{font-size:1.0625rem;font-weight:700;color:#1e293b}.compact-header-btn{width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:#64748b;cursor:pointer;transition:all var(--duration-fast) var(--ease-smooth)}.compact-header-btn:hover{background:#f1f5f9cc;color:#334155}.touch-ripple{position:relative;overflow:hidden}.touch-ripple:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at var(--x, 50%) var(--y, 50%),rgba(124,58,237,.08) 0%,transparent 60%);opacity:0;transition:opacity var(--duration-fast);pointer-events:none}.touch-ripple:active:after{opacity:1}