@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Tajawal:wght@400;500;700&display=swap";.theme-lang-toggle{z-index:1000;gap:1rem;display:flex}.icon-btn{background:var(--surface-glass);-webkit-backdrop-filter:blur(8px);border:1px solid var(--border-color);color:var(--text-primary);cursor:pointer;width:3rem;height:3rem;box-shadow:var(--shadow-sm);transition:all var(--transition-normal);border-radius:50%;justify-content:center;align-items:center;font-family:inherit;font-size:1rem;display:flex}.icon-btn:hover{box-shadow:var(--shadow-md);border-color:var(--primary-400);color:var(--primary-500);transform:translateY(-2px)}.auth-top-controls{top:1.5rem;position:absolute;inset-inline-end:1.5rem}.auth-page-wrapper{justify-content:center;align-items:center;width:100vw;min-height:100vh;display:flex}.auth-container{background:var(--surface-glass);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-color);width:100%;max-width:420px;box-shadow:var(--shadow-lg);opacity:0;transition:background var(--transition-normal), border-color var(--transition-normal);border-radius:1.5rem;margin:1.5rem;padding:2.5rem;animation:.5s cubic-bezier(.16,1,.3,1) forwards slideUp;transform:translateY(20px)}@keyframes slideUp{to{opacity:1;transform:translateY(0)}}.auth-header{text-align:center;margin-bottom:2rem}.auth-header h1{color:var(--text-primary);transition:color var(--transition-normal);margin-bottom:.5rem;font-size:1.875rem;font-weight:700}.auth-header p{color:var(--text-secondary);transition:color var(--transition-normal);font-size:.95rem}.input-group{margin-bottom:1.25rem}.input-group label{color:var(--text-primary);transition:color var(--transition-normal);margin-bottom:.5rem;font-size:.875rem;font-weight:600;display:block}.input-wrapper{align-items:center;display:flex;position:relative}.input-icon{color:var(--text-secondary);pointer-events:none;width:20px;height:20px;transition:color var(--transition-normal);position:absolute;inset-inline-end:1rem}.input-field{width:100%;color:var(--text-primary);background-color:var(--surface-color);border:1px solid var(--border-color);transition:all var(--transition-normal);border-radius:.75rem;padding-block:.75rem;font-family:inherit;font-size:1rem}.input-field:focus{border-color:var(--primary-500);box-shadow:0 0 0 4px var(--primary-100);outline:none}[data-theme=dark] .input-field:focus{box-shadow:0 0 0 4px #22c55e33}.auth-button{width:100%;color:var(--text-inverse);background-color:var(--primary-600);cursor:pointer;box-shadow:var(--shadow-md);transition:all var(--transition-fast);border:none;border-radius:.75rem;justify-content:center;align-items:center;gap:.5rem;margin-top:1rem;padding:.875rem;font-family:inherit;font-size:1rem;font-weight:600;display:flex}.auth-button:hover{background-color:var(--primary-700);box-shadow:var(--shadow-primary);transform:translateY(-1px)}.auth-button:active{transform:translateY(0)}.toggle-view{text-align:center;color:var(--text-secondary);transition:color var(--transition-normal);margin-top:1.5rem;font-size:.9rem}.toggle-link{color:var(--primary-600);cursor:pointer;transition:color var(--transition-fast);background:0 0;border:none;margin-right:.25rem;font-family:inherit;font-size:.9rem;font-weight:600}.toggle-link:hover{color:var(--primary-700);text-decoration:underline}html[dir=ltr] .input-field{padding-left:1rem;padding-right:2.5rem}html[dir=rtl] .input-field{padding-left:2.5rem;padding-right:1rem}html[dir=rtl] .flip-rtl{transform:scaleX(-1)}.layout-container{background-color:var(--bg-color);width:100vw;height:100vh;display:flex;overflow:hidden}.sidebar{background-color:var(--surface-color);border-inline-end:1px solid var(--border-color);width:260px;transition:width var(--transition-normal);flex-direction:column;flex-shrink:0;display:flex}.sidebar-logo{height:var(--header-height);border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:0 1rem;display:flex}.sidebar-brand{align-items:center;gap:.6rem;display:flex}.sidebar-brand-icon{background:linear-gradient(135deg, var(--primary-500), var(--primary-700));color:#fff;border-radius:.5rem;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;display:flex}.sidebar-brand-name{color:var(--text-primary);font-size:1.1rem;font-weight:700}.sidebar-new-chat-wrap{border-bottom:1px solid var(--border-color);padding:.75rem 1rem}.sidebar-new-chat-btn{background:linear-gradient(135deg, var(--primary-500), var(--primary-600));color:#fff;cursor:pointer;border:none;border-radius:999px;justify-content:center;align-items:center;gap:.5rem;width:100%;padding:.75rem 1rem;font-family:inherit;font-size:.95rem;font-weight:700;text-decoration:none;transition:all .2s;display:flex;box-shadow:0 4px 15px #22c55e40}.sidebar-new-chat-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #22c55e59}.sidebar-new-chat-btn:active{transform:translateY(0)}.recent-chats-header{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;align-items:center;gap:.5rem;padding:.75rem 1rem .4rem;font-size:.75rem;font-weight:700;display:flex}.sidebar-nav{flex-direction:column;flex:1;gap:.1rem;padding:.5rem .75rem;display:flex;overflow-y:auto}.nav-item{color:var(--text-secondary);transition:all var(--transition-fast);cursor:pointer;background:0 0;border:none;border-radius:.375rem;align-items:center;gap:.75rem;width:100%;padding:.6rem .75rem;font-family:inherit;font-size:.95rem;font-weight:500;text-decoration:none;display:flex}.nav-item:hover{background-color:var(--primary-50);color:var(--primary-600)}.nav-item.active{background-color:var(--primary-50);color:var(--primary-600);font-weight:600}[data-theme=dark] .nav-item:hover,[data-theme=dark] .nav-item.active{color:var(--primary-400);background-color:#22c55e1a}.sidebar-footer{border-top:1px solid var(--border-color);padding:1rem}.logout-btn{color:#ef4444;cursor:pointer;background-color:#ef44441a;border:1px solid #ef444433;border-radius:999px;justify-content:center;align-items:center;gap:.5rem;width:100%;padding:.65rem 1rem;font-family:inherit;font-size:.9rem;font-weight:600;transition:all .2s;display:flex}.logout-btn:hover{color:#fff;background-color:#ef4444;transform:translateY(-1px);box-shadow:0 4px 12px #ef444440}.logout-btn:active{transform:translateY(0)}.main-content{background-color:var(--bg-color);flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.main-header{height:var(--header-height);background:var(--surface-color);border-bottom:1px solid var(--border-color);z-index:10;flex-shrink:0;justify-content:flex-end;align-items:center;padding:0 1.25rem;display:flex}.page-content-wrapper{flex-direction:column;flex:1;min-height:0;display:flex;position:relative;overflow:hidden auto}.desktop-toggle-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:.5rem;justify-content:center;align-items:center;padding:.5rem;transition:all .2s;display:flex}.desktop-toggle-btn:hover{background:var(--primary-50);color:var(--primary-600)}[data-theme=dark] .desktop-toggle-btn:hover{color:var(--primary-400);background:#22c55e1a}.sidebar.collapsed{width:76px}.sidebar.collapsed .sidebar-text{display:none!important}.sidebar.collapsed .sidebar-logo{height:var(--header-height);justify-content:center;padding:0}.sidebar.collapsed .sidebar-brand{display:none}.sidebar.collapsed .sidebar-new-chat-wrap{justify-content:center;padding:1rem 0;display:flex}.sidebar.collapsed .sidebar-new-chat-btn{border-radius:50%;width:44px;height:44px;padding:.75rem}.sidebar.collapsed .sidebar-new-chat-btn svg{margin:0}.sidebar.collapsed .recent-chats-header{justify-content:center;padding:.75rem 0 .4rem}.sidebar.collapsed .recent-chats-header span{display:none}.sidebar.collapsed .recent-chats-header svg{margin:0}.sidebar.collapsed .nav-item{justify-content:center;width:44px;height:44px;margin:0 auto;padding:.65rem}.sidebar.collapsed .nav-item svg{margin:0}.sidebar.collapsed .delete-btn{display:none!important}.sidebar.collapsed .chat-link{justify-content:center;padding:.6rem!important}.sidebar.collapsed .logout-btn{border-radius:50%;width:44px;height:44px;margin:0 auto;padding:.65rem}.sidebar.collapsed .logout-btn svg{margin:0}.page-container{width:100%;height:100%}.mobile-menu-btn{color:var(--text-primary);cursor:pointer;background:0 0;border:none;margin-inline-end:auto;padding:.5rem;display:none}.mobile-close-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;padding:.5rem;display:none}.sidebar-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:40;opacity:0;transition:opacity var(--transition-normal);background:#00000080;display:none;position:fixed;inset:0}@media (width<=1024px){.desktop-toggle-btn{display:none}.sidebar{z-index:50;width:280px;position:fixed;top:0;bottom:0;left:-280px}.rtl .sidebar{left:auto;right:-280px}.sidebar.mobile-open{transform:translate(280px)}.rtl .sidebar.mobile-open{transform:translate(-280px)}.sidebar-overlay.mobile-open{opacity:1;display:block}.mobile-menu-btn{align-items:center;display:flex}.mobile-close-btn{align-items:center;margin-inline-start:auto;display:flex}.sidebar-text{display:block!important}.sidebar-logo{justify-content:space-between}.nav-item{justify-content:flex-start}.delete-btn{display:flex!important}.recent-chats-header{justify-content:flex-start}.chat-link{justify-content:flex-start;padding:.6rem 1rem!important}}.home-dashboard{background:var(--bg-color);width:100%;height:100%;display:flex}.mobile-tabs{display:none}.chat-side-panel{background:var(--surface-color);border:1px solid var(--border-color);width:30%;min-width:300px;max-width:420px;height:calc(100% - 2rem);box-shadow:var(--shadow-sm);border-radius:1.5rem;flex-direction:column;margin:1rem 0 1rem 1rem;display:flex;overflow:hidden}[dir=rtl] .chat-side-panel{margin:1rem 1rem 1rem 0}.sandbox-preview{background:var(--surface-color);border:1px solid var(--border-color);height:calc(100% - 2rem);box-shadow:var(--shadow-sm);border-radius:1.5rem;flex:1;justify-content:center;align-items:center;margin:1rem;display:flex;position:relative;overflow:hidden}.sandbox-iframe-container iframe{border:none;width:100%;height:100%}.chat-welcome-container{border-radius:12px;overflow:hidden}.welcome-icons svg{animation:4s ease-in-out infinite floatIcon}.welcome-icons svg:nth-child(2){animation-delay:1s}.welcome-icons svg:nth-child(3){animation-delay:2s}.welcome-icons svg:nth-child(4){animation-delay:3s}@keyframes floatIcon{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.sandbox-placeholder{width:100%;height:100%;color:var(--text-secondary);border:1px solid var(--border-color);opacity:.6;border-radius:.5rem;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;font-size:1rem;display:flex}.chat-messages{flex-direction:column;flex:1;padding:1.5rem;display:flex;overflow-y:auto}.chat-welcome h3{color:var(--text-primary);margin-bottom:.5rem;font-size:1.5rem}.chat-welcome p{color:var(--text-secondary);font-size:.95rem}.chat-input-container{background:0 0;padding:0 1rem 1.5rem}.chat-input-wrapper{background:var(--bg-color);border:1px solid var(--border-color);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);border-radius:2rem;align-items:flex-end;gap:1rem;padding:.85rem 1.5rem;display:flex;box-shadow:0 4px 12px #0000000d}.chat-input-wrapper:focus-within{border-color:var(--primary-400);box-shadow:var(--shadow-primary)}.chat-textarea{color:var(--text-primary);resize:none;background:0 0;border:none;outline:none;flex:1;max-height:150px;padding:.25rem 0;font-family:inherit;font-size:1rem;line-height:1.5;overflow-y:auto}.chat-textarea::placeholder{color:var(--text-secondary)}.icon-btn-small{color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:.5rem;display:flex}.icon-btn-small:hover{color:var(--primary-500);background:var(--primary-50)}[data-theme=dark] .icon-btn-small:hover{background:#22c55e1a}.send-btn{background:var(--primary-500);color:#fff;cursor:pointer;transition:all var(--transition-fast);box-shadow:var(--shadow-sm);border:none;border-radius:50%;justify-content:center;align-items:center;padding:.5rem;display:flex}.send-btn:hover{background:var(--primary-600);transform:scale(1.05)}@keyframes spin{to{transform:rotate(360deg)}}.agent-status-indicator{background-color:var(--primary-50);border:1px solid var(--primary-200);border-radius:999px;align-self:flex-start;align-items:center;gap:.75rem;margin-top:.5rem;margin-bottom:1rem;padding:.5rem 1rem;animation:.3s ease-out fadeIn;display:flex}[data-theme=dark] .agent-status-indicator{background-color:#22c55e1a;border-color:#22c55e4d}.agent-status-badge{align-items:center;gap:.5rem;display:flex}.agent-status-icon{font-size:1.1rem}.agent-status-text{color:var(--primary-700);font-size:.85rem;font-weight:600}[data-theme=dark] .agent-status-text{color:var(--primary-400)}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.typing-indicator{background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:.75rem .75rem .75rem .2rem;align-self:flex-start;align-items:center;gap:4px;height:44px;padding:.75rem 1rem;display:flex}.typing-dot{background-color:var(--text-secondary);border-radius:50%;width:6px;height:6px;animation:1.4s ease-in-out infinite both typingPulse}.typing-dot:first-child{animation-delay:-.32s}.typing-dot:nth-child(2){animation-delay:-.16s}@keyframes typingPulse{0%,80%,to{opacity:.3;transform:scale(0)}40%{opacity:1;transform:scale(1)}}@media (width<=1024px){.home-dashboard{flex-direction:column}.mobile-tabs{background:var(--surface-glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border-color);z-index:5;width:100%;display:flex}.tab-btn{color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;border-bottom:2px solid #0000;flex:1;justify-content:center;align-items:center;gap:.5rem;padding:1rem;font-weight:600;display:flex}.tab-btn.active{color:var(--primary-600);border-bottom-color:var(--primary-500);background:var(--primary-50)}[data-theme=dark] .tab-btn.active{background:#22c55e0d}.chat-side-panel{border-inline-end:none;flex:1;width:100%;min-width:0;max-width:none;min-height:0;display:none}.sandbox-preview{flex:1;min-height:0;padding:1rem;display:none}.chat-side-panel.active-panel,.sandbox-preview.active-panel{display:flex}}.markdown-body{font-size:.95rem;line-height:1.6}.markdown-body p{margin-bottom:.75rem}.markdown-body p:last-child{margin-bottom:0}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4{color:var(--text-primary);margin-top:1.5rem;margin-bottom:.75rem;font-weight:600}.markdown-body h1{font-size:1.5rem}.markdown-body h2{font-size:1.3rem}.markdown-body h3{font-size:1.1rem}.markdown-body ul,.markdown-body ol{margin-bottom:1rem;padding-inline-start:1.5rem}.markdown-body li{margin-bottom:.25rem}.markdown-body code{background-color:var(--bg-secondary);color:var(--primary-600);border-radius:.3rem;padding:.2rem .4rem;font-family:monospace;font-size:.85em}.markdown-body pre code{color:inherit;background-color:#0000;padding:0}.markdown-body pre{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:.5rem;margin-bottom:1rem;padding:1rem;overflow-x:auto}[data-theme=dark] .markdown-body code{color:var(--primary-400)}.home-hero{flex-direction:column;width:100%;height:100%;display:flex;position:relative}.home-hero-content{z-index:1;text-align:center;flex-direction:column;align-items:center;gap:1.5rem;max-width:700px;margin:auto;padding:2rem;display:flex;position:relative}.home-badge{background:var(--primary-50);border:1px solid var(--primary-200);color:var(--primary-700);letter-spacing:.03em;border-radius:999px;align-items:center;gap:.5rem;padding:.4rem 1rem;font-size:.8rem;font-weight:600;display:inline-flex}[data-theme=dark] .home-badge{color:var(--primary-400);background:#5ed6ad1a;border-color:#5ed6ad4d}.home-headline{color:var(--text-primary);flex-direction:column;gap:.2rem;margin:0;font-size:clamp(2.2rem,5vw,3.5rem);font-weight:800;line-height:1.15;display:flex}.home-headline-line{display:block}.home-headline-gradient{background:linear-gradient(135deg, var(--accent-mint) 0%, var(--accent-bold) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;display:block}.home-sub{color:var(--text-secondary);max-width:520px;margin:0;font-size:1.05rem;line-height:1.7}.home-cta{background:linear-gradient(135deg, var(--primary-500), var(--primary-600));color:#fff;cursor:pointer;border:none;border-radius:999px;align-items:center;gap:.6rem;padding:.85rem 2rem;font-family:inherit;font-size:1rem;font-weight:700;transition:all .2s;display:inline-flex;box-shadow:0 4px 20px #5ed6ad59}.home-cta:hover{transform:translateY(-2px);box-shadow:0 8px 30px #5ed6ad73}.home-cta:active{transform:translateY(0)}.home-prompts{flex-direction:column;align-items:center;gap:.75rem;width:100%;display:flex}.home-prompts-label{color:var(--text-secondary);margin:0;font-size:.85rem}.home-promp.features-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin-top:4rem;display:grid}.feature-card{background:var(--surface-color);box-shadow:var(--shadow-md);border:1px solid var(--border-color);transition:transform var(--transition-normal), box-shadow var(--transition-normal);text-align:center;border-radius:1rem;flex-direction:column;align-items:center;padding:2rem;display:flex;position:relative;overflow:hidden}.feature-card:before{content:"";background:linear-gradient(90deg, var(--accent-mint), var(--accent-bold));transform-origin:0;height:4px;transition:transform var(--transition-normal);position:absolute;top:0;left:0;right:0;transform:scaleX(0)}[data-theme=dark] .home-prompt-card:hover{background:#5ed6ad0d}.home-prompts-grid{grid-template-columns:repeat(2,1fr);gap:.75rem;width:100%;display:grid}.home-prompt-card{background:var(--surface-color);border:1px solid var(--border-color);cursor:pointer;text-align:start;border-radius:1rem;align-items:center;gap:.75rem;padding:.9rem 1rem;font-family:inherit;transition:all .2s;display:flex}.home-prompt-card:hover{border-color:var(--primary-400);transform:translateY(-2px);box-shadow:0 4px 16px #5ed6ad26}.home-prompt-icon{flex-shrink:0;font-size:1.4rem}.home-prompt-title{color:var(--text-primary);font-size:.9rem;font-weight:600}.home-prompt-desc{color:var(--text-secondary);margin-top:.1rem;font-size:.78rem}.home-stats{align-items:center;gap:2rem;padding-top:.5rem;display:flex}.home-stat{flex-direction:column;align-items:center;gap:.25rem;display:flex}.home-stat-num{background:linear-gradient(135deg, var(--accent-mint), var(--accent-bold));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.5rem;font-weight:800}.home-stat-label{color:var(--text-secondary);white-space:nowrap;font-size:.75rem}.home-stat-divider{background:var(--border-color);width:1px;height:40px}@media (width<=600px){.home-prompts-grid{grid-template-columns:1fr}.home-stats{gap:1rem}.home-hero-content{gap:1.2rem}}.not-found-container{text-align:center;background-color:var(--bg-primary);height:100vh;color:var(--text-primary);flex-direction:column;justify-content:center;align-items:center;padding:2rem;display:flex}.home-btn{background-color:var(--primary-600);color:#fff;transition:all var(--transition-fast);border-radius:.5rem;align-items:center;gap:.5rem;margin-top:1.5rem;padding:.75rem 1.5rem;text-decoration:none;display:inline-flex}.home-btn:hover{background-color:var(--primary-700);transform:translateY(-2px)}.settings-page{background-color:var(--bg-color);justify-content:center;align-items:flex-start;min-height:100vh;padding:2rem;display:flex}.settings-loading{justify-content:center;align-items:center;gap:8px;height:200px;display:flex}.settings-container{background-color:var(--surface-color);width:100%;max-width:600px;box-shadow:var(--shadow-md);border:1px solid var(--border-color);border-radius:1rem;overflow:hidden}.settings-header{border-bottom:1px solid var(--border-color);background-color:#22c55e08;padding:2rem}.settings-title{align-items:center;gap:.75rem;margin-bottom:.5rem;display:flex}.settings-title h2{color:var(--text-primary);font-size:1.5rem;font-weight:700}.settings-icon{color:var(--primary-600)}.settings-subtitle{color:var(--text-secondary);font-size:.95rem;line-height:1.5}.settings-form{padding:2rem}.settings-section{margin-bottom:2rem}.settings-section h3{color:var(--text-primary);border-bottom:1px dashed var(--border-color);margin-bottom:1.5rem;padding-bottom:.5rem;font-size:1.1rem;font-weight:600}.form-group{margin-bottom:1.5rem}.form-group label{color:var(--text-primary);margin-bottom:.5rem;font-weight:600;display:block}.select-wrapper{position:relative}.settings-select{width:100%;color:var(--text-primary);background-color:var(--bg-color);border:1px solid var(--border-color);appearance:none;cursor:pointer;transition:all var(--transition-fast);border-radius:.5rem;padding:.75rem 1rem;font-family:inherit;font-size:1rem}.settings-select:focus{border-color:var(--primary-500);outline:none;box-shadow:0 0 0 3px #22c55e1a}.select-wrapper:after{content:"▼";pointer-events:none;color:var(--text-secondary);font-size:.8rem;position:absolute;top:50%;right:1rem;transform:translateY(-50%)}.rtl .select-wrapper:after{left:1rem;right:auto}.field-hint{color:var(--text-secondary);align-items:flex-start;gap:.5rem;margin-top:.5rem;font-size:.85rem;display:flex}.field-hint svg{flex-shrink:0;margin-top:2px}.settings-actions{border-top:1px solid var(--border-color);justify-content:flex-end;padding-top:1rem;display:flex}.save-btn{background-color:var(--primary-600);color:#fff;cursor:pointer;transition:all var(--transition-fast);border:none;border-radius:.5rem;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;display:flex}.save-btn:hover:not(:disabled){background-color:var(--primary-700);transform:translateY(-1px)}.save-btn:disabled{opacity:.7;cursor:not-allowed}.btn-spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:20px;height:20px;animation:1s ease-in-out infinite spin}.license-page{max-width:1600px;color:var(--text-primary);margin:0 auto;padding:40px}.license-header{text-align:center;margin-bottom:50px}.license-header h1{background:linear-gradient(135deg, var(--text-primary), var(--primary-500));-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:10px;font-size:2.5rem}.license-header p{color:var(--text-secondary);font-size:1.1rem}.pricing-grid{grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:60px;display:grid}@media (width<=1400px){.pricing-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=768px){.pricing-grid{grid-template-columns:1fr}}.pricing-card{background:var(--surface-color);border:1px solid var(--border-color);border-radius:16px;flex-direction:column;padding:30px;transition:transform .3s,box-shadow .3s;display:flex;position:relative}.pricing-card:hover{box-shadow:var(--shadow-primary);transform:translateY(-5px)}.pricing-card.popular{border-color:var(--primary-500);box-shadow:var(--shadow-primary);transform:scale(1.02)}.pricing-card.popular:hover{transform:scale(1.02)translateY(-5px)}.popular-badge{background:var(--primary-500);color:var(--primary-dark);border-radius:20px;padding:4px 12px;font-size:.85rem;font-weight:700;position:absolute;top:-12px;left:50%;transform:translate(-50%)}.pkg-name{text-align:center;margin-bottom:15px;font-size:1.5rem}.pkg-price-container{text-align:center;min-height:50px;margin-bottom:25px}.pkg-price{color:var(--primary-500);font-size:2.5rem;font-weight:700}.pkg-period{color:var(--text-secondary);margin-right:5px;font-size:1rem}.pricing-card .btn{cursor:pointer;background:var(--panel-bg);width:100%;color:var(--text-primary);border:none;border-radius:8px;margin-bottom:30px;padding:12px;font-size:1rem;font-weight:700;transition:all .3s}.pricing-card .btn:hover{background:var(--border-color)}.pricing-card .popular-btn{background:var(--primary-500);color:var(--primary-dark)}.pricing-card .popular-btn:hover{background:var(--primary-600)}.pkg-features{flex-direction:column;gap:12px;display:flex}.feature-item{color:var(--text-secondary);align-items:center;gap:10px;font-size:.95rem;display:flex}.check-icon{color:var(--primary-500);flex-shrink:0}.topup-section{background:var(--surface-color);border:1px solid var(--border-color);text-align:center;border-radius:16px;padding:40px}.topup-section h2{margin-bottom:30px;font-size:1.8rem}.topup-grid{flex-wrap:wrap;justify-content:center;gap:30px;display:flex}.topup-card{background:var(--bg-color);border:1px solid var(--border-color);border-radius:12px;min-width:250px;padding:25px}.topup-card h3{margin-bottom:10px;font-size:1.2rem}.topup-card p{color:var(--primary-500);margin-bottom:20px;font-size:1.1rem;font-weight:700}.topup-card .btn{border:1px solid var(--primary-500);width:100%;color:var(--primary-500);cursor:pointer;background:0 0;border-radius:8px;padding:10px;font-weight:700;transition:all .3s}.topup-card .btn:hover{background:var(--primary-500);color:var(--primary-dark)}.billing-page{max-width:1000px;color:var(--text-primary);margin:0 auto;padding:40px}.billing-page.loading{height:50vh;color:var(--text-secondary);justify-content:center;align-items:center;font-size:1.2rem;display:flex}.billing-header{margin-bottom:40px}.billing-header h1{color:var(--primary-500);margin-bottom:10px;font-size:2rem}.billing-header p{color:var(--text-secondary)}.balance-card{background:linear-gradient(135deg, var(--surface-color), var(--bg-color));border:1px solid var(--primary-500);text-align:center;box-shadow:var(--shadow-primary);border-radius:16px;margin-bottom:50px;padding:40px}.balance-card h2{color:var(--text-secondary);margin-bottom:15px;font-size:1.2rem}.balance-amount{color:var(--primary-500);text-shadow:0 0 20px #5ed6ad66;margin-bottom:15px;font-size:4rem;font-weight:700}.balance-desc{color:var(--text-secondary);font-size:.95rem}.history-section h2{margin-bottom:25px;font-size:1.5rem}.no-history{background:var(--surface-color);text-align:center;color:var(--text-secondary);border-radius:12px;padding:30px}.table-responsive{overflow-x:auto}.history-table{border-collapse:collapse;background:var(--surface-color);border-radius:12px;width:100%;overflow:hidden}.history-table th,.history-table td{text-align:right;border-bottom:1px solid var(--border-color);padding:15px 20px}.history-table th{color:var(--text-secondary);background:#0003;font-weight:600}.history-table tr:last-child td{border-bottom:none}.history-table tr:hover{background:#ffffff05}.tokens-col{color:var(--primary-500);font-weight:700}:root{--primary-dark:#1f2a2e;--primary-gray-blue:#263238;--accent-mint:#5ed6ad;--accent-bold:#2ed39a;--accent-alt:#4fe3a5;--primary-400:#5ed6a0;--primary-500:#5ed6ad;--primary-600:#2ed39a;--primary-700:#1f2a2e;--bg-color:#f8fafc;--surface-color:#fff;--surface-glass:#ffffffd9;--text-primary:#1f2a2e;--text-secondary:#263238;--text-inverse:#f8f8f8;--border-color:#e2e8f0;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--shadow-primary:0 10px 15px -3px #5ed6ad40;--transition-fast:.15s ease-in-out;--transition-normal:.3s ease-in-out}:root[data-theme=dark]{--bg-color:#1f2a2e;--surface-color:#1a2428;--surface-glass:#1a2428d9;--text-primary:#f8f8f8;--text-secondary:#b0b6bb;--border-color:#2f3a3f;--panel-bg:#263238;--primary-500:#5ed6a0;--shadow-md:0 4px 6px -1px #0006}:root{--header-height:60px}*{box-sizing:border-box;margin:0;padding:0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-color)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--primary-500)}*{scrollbar-width:thin;scrollbar-color:var(--border-color) var(--bg-color)}body{background-color:var(--bg-color);color:var(--text-primary);min-height:100vh;transition:background-color var(--transition-normal), color var(--transition-normal);background-image:radial-gradient(circle at 15%,#5ed6ad14,#0000 25%),radial-gradient(circle at 85% 30%,#5ed6ad0d,#0000 25%);margin:0;font-family:Tajawal,Inter,sans-serif}.swal2-popup{border:1px solid var(--border-color);background:var(--bg-color)!important;color:var(--text-primary)!important;border-radius:12px!important}.swal2-title,.swal2-content{color:var(--text-primary)!important}.blob{filter:blur(80px);opacity:.15;pointer-events:none;border-radius:50%;animation:8s ease-in-out infinite blobFloat;position:absolute}.blob-1{background:radial-gradient(circle, var(--accent-mint), transparent 70%);width:500px;height:500px;animation-delay:0s;top:-100px;left:-100px}.blob-2{background:radial-gradient(circle, var(--accent-bold), transparent 70%);width:400px;height:400px;animation-delay:-3s;bottom:-80px;right:-80px}.blob-3{background:radial-gradient(circle, var(--accent-alt), transparent 70%);opacity:.08;width:300px;height:300px;animation:10s ease-in-out infinite blob3Float;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes blobFloat{0%,to{transform:translateY(0)scale(1)}33%{transform:translateY(-20px)scale(1.05)}66%{transform:translateY(15px)scale(.95)}}@keyframes blob3Float{0%,to{transform:translate(-50%,-50%)scale(1)}50%{transform:translate(-50%,-50%)scale(1.2)}}