@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap";
@layer base {
.font-arabic{font-feature-settings:"liga" 1, "calt" 1;letter-spacing:0;font-family:IBM Plex Sans Arabic,Noto Sans Arabic,Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.8}[dir=rtl]{text-align:right;direction:rtl}[dir=rtl] .px-6{padding-left:1.5rem;padding-right:1.5rem}[dir=rtl] .pl-4{padding-left:0;padding-right:1rem}[dir=rtl] .pr-4{padding-left:1rem;padding-right:0}[dir=rtl] .ml-auto{margin-left:0;margin-right:auto}[dir=rtl] .mr-auto{margin-left:auto;margin-right:0}[dir=rtl] .flex-row{flex-direction:row-reverse}[dir=rtl] .text-left{text-align:right}[dir=rtl] .text-right{text-align:left}[dir=rtl] a{transition:all .3s}[dir=rtl] a:hover{padding-right:.25rem}[lang=ar]{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility}bdi{direction:ltr;unicode-bidi:isolate}[lang=ar] h1,[lang=ar] h2,[lang=ar] h3,[lang=ar] h4,[lang=ar] h5,[lang=ar] h6{letter-spacing:-.02em;font-weight:600}[lang=ar] p{letter-spacing:.01em;line-height:2}[dir=rtl] button,[dir=rtl] .btn{font-family:inherit}[dir=rtl] input,[dir=rtl] textarea,[dir=rtl] select{text-align:right;direction:rtl}[dir=rtl] .dropdown-menu{left:0;right:auto}[dir=rtl] .tooltip{text-align:right}[lang=ar] .arabic-numerals{font-variant-numeric:normal}[dir=rtl] .mixed-content{unicode-bidi:plaintext}@media (max-width:768px){[lang=ar]{font-size:.95rem}[lang=ar] h1{font-size:1.75rem}[lang=ar] h2{font-size:1.5rem}}
}

@layer base {
:root{--color-brand-primary:#008c89;--color-brand-primary-hover:#006b69;--color-brand-secondary:#8b5cf6;--color-brand-accent:#06b6d4;--glass-bg:#ffffff05;--glass-bg-hover:#ffffff0d;--glass-border-color:#ffffff0d;--glass-border-secondary:#ffffff1a;--color-success:#10b981;--color-success-bg:#10b98133;--color-warning:#f59e0b;--color-warning-bg:#f59e0b33;--color-error:#ef4444;--color-error-bg:#ef444433;--color-info:#3b82f6;--color-info-bg:#3b82f633;--color-streak-fire:#f97316;--color-xp-blue:#3b82f6;--color-achievement-gold:#eab308;--color-social-purple:#8b5cf6;--color-nudge-cyan:#06b6d4;--glass-blur:blur(12px);--glass-border:1px solid var(--glass-border-color);--glass-shadow:0 8px 32px #0000004d;--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-normal:.2s cubic-bezier(.4, 0, .2, 1);--transition-slow:.3s cubic-bezier(.4, 0, .2, 1);--space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--space-3xl:4rem;--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-full:9999px;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 4px 6px #0000001a;--shadow-lg:0 10px 15px #0000001a;--shadow-xl:0 20px 25px #0000001a;--shadow-glass:var(--glass-shadow);--z-dropdown:1000;--z-sticky:1010;--z-fixed:1020;--z-modal-backdrop:1030;--z-modal:1040;--z-popover:1050;--z-tooltip:1060}.glass-card,.metric-card{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-glass);transition:all var(--transition-normal)}.glass-card:hover{background:var(--glass-bg-hover);box-shadow:var(--shadow-xl);transform:translateY(-1px)}.btn-primary{background:var(--color-brand-primary);color:var(--color-brand-primary);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);font-weight:var(--font-weight-medium);transition:all var(--transition-fast);cursor:pointer;border:none}.btn-primary:hover{background:var(--color-brand-primary-hover);transform:translateY(-1px)}.btn-secondary{background:var(--glass-bg);color:#ffffffb3;border:var(--glass-border);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);font-weight:var(--font-weight-medium);transition:all var(--transition-fast);cursor:pointer}.btn-secondary:hover{background:var(--glass-bg-hover);color:var(--color-brand-primary);transform:translateY(-1px)}.streak-flame{color:var(--color-streak-fire);filter:drop-shadow(0 0 8px #f973164d)}.xp-progress{background:linear-gradient(90deg, var(--color-xp-blue), var(--color-brand-accent));border-radius:var(--radius-full);box-shadow:0 0 16px #3b82f64d}.achievement-badge{background:var(--color-achievement-gold);color:var(--bg-primary);border-radius:var(--radius-full);padding:var(--space-xs) var(--space-sm);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);box-shadow:0 0 12px #eab30866}.metric-card{padding:var(--space-lg)}.metric-card-value{color:var(--color-brand-primary);font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);line-height:1.2}.metric-card-label{color:#ffffffb3;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.bounce-celebration{animation:.6s ease-in-out bounceY}.pulse-glow{animation:2s ease-in-out infinite pulseGlow}.slide-up{animation:.3s ease-out slideUp}@keyframes bounceY{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-8px)}60%{transform:translateY(-4px)}}@keyframes pulseGlow{0%,to{box-shadow:0 0 16px #3b82f64d}50%{box-shadow:0 0 24px #3b82f699}}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.metric-card{padding:var(--space-md)}.metric-card-value{font-size:var(--font-size-xl)}}.focus-ring:focus{box-shadow:0 0 0 2px var(--border-focus);outline:none}
}