@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg-primary: #020203;
  --bg-secondary: #0a0a0b;
  --bg-card: rgba(13, 13, 15, 0.7);
  --bg-card-hover: rgba(18, 18, 21, 0.8);
  --bg-input: #050505;
  --border-color: rgba(255,255,255,0.08);
  --border-glow: rgba(34,197,94,0.3);
  --accent: #22c55e;
  --accent-bg: rgba(34, 197, 94, 0.1);
  --accent2: #16a34a;
  --accent-grad: linear-gradient(135deg, #22c55e, #16a34a);
  --accent-glow: 0 0 30px rgba(34,197,94,0.2);
  --success: #10b981;
  --success-bg: rgba(16,185,129,0.1);
  --warning: #f59e0b;
  --warning-bg: rgba(245,158,11,0.1);
  --danger: #ef4444;
  --danger-bg: rgba(239,68,68,0.1);
  --text1: #ffffff;
  --text2: #cbd5e1;
  --text3: #94a3b8;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --shadow-card: 0 8px 32px rgba(0,0,0,0.4);
  --shadow-el: 0 20px 50px rgba(0,0,0,0.8);
  --font-sans: 'Cairo', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --glass: blur(12px);
}

[data-theme="light"] {
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-card: rgba(255, 255, 255, 0.8);
  --bg-card-hover: rgba(248, 250, 252, 0.9);
  --bg-input: #ffffff;
  --border-color: rgba(0,0,0,0.06);
  --border-glow: rgba(34,197,94,0.15);
  --text1: #0f172a;
  --text2: #334155;
  --text3: #64748b;
  --shadow-card: 0 4px 20px rgba(0,0,0,0.05);
  --shadow-el: 0 10px 30px rgba(0,0,0,0.1);
}
/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: #1e1e21; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #2a2a2d; }
html{scroll-behavior:smooth}
body{
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text1);
  min-height: 100vh;
  line-height: 1.8;
  overflow-x: hidden;
  direction: rtl;
  text-align: right;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
}

/* Background */
.bg-glow{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--bg-primary)}
.bg-glow::before{content:'';position:absolute;width:1000px;height:800px;background:radial-gradient(circle, rgba(34,197,94,0.06) 0%, transparent 70%);top:-300px;right:-200px;border-radius:50%;filter:blur(80px)}
.bg-glow::after{content:'';position:absolute;width:800px;height:800px;background:radial-gradient(circle, rgba(59,130,246,0.04) 0%, transparent 70%);bottom:-200px;left:-100px;border-radius:50%;filter:blur(80px)}
.bg-mesh { position:fixed; inset:0; opacity:0.15; pointer-events:none; background-image: radial-gradient(var(--border-color) 1px, transparent 1px); background-size: 40px 40px; z-index:0; }
[data-theme="light"] .bg-mesh { opacity: 0.05; }

/* Nav */
.navbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:14px 40px;background:rgba(2, 2, 3, 0.6);backdrop-filter: var(--glass);border-bottom:1px solid var(--border-color);transition: all 0.3s;}
[data-theme="light"] .navbar { background: rgba(255, 255, 255, 0.7); }
.nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:700;font-size:1.2rem;color:var(--text1);letter-spacing:-0.03em}
.nav-brand .brand-icon{width:36px;height:36px;background:var(--accent-grad);color:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);}
.nav-links{display:flex;align-items:center;gap:12px;list-style:none}
.nav-links a{text-decoration:none;color:var(--text2);padding:8px 16px;border-radius:var(--r-sm);font-size:.9rem;font-weight:500;transition:all .3s}
.nav-links a:hover{color:var(--text1);background:rgba(255,255,255,0.05)}
.nav-links a.active { color: var(--accent); background: var(--accent-bg); }

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 22px;border:none;border-radius:var(--r-sm);font-size:.85rem;font-weight:500;font-family:inherit;cursor:pointer;transition:all .2s;text-decoration:none;}
.btn:active{transform:scale(0.97)}
.btn-primary{background:#fff;color:#000;border:1px solid rgba(255,255,255,0.1)}
.btn-primary:hover{background:#e5e5e5}
.btn-green{background:var(--accent);color:#fff;border:1px solid rgba(255,255,255,0.1)}
.btn-green:hover{background:var(--accent-hover)}
.btn-ghost{background:transparent;color:var(--text1);border:1px solid var(--border-color)}
.btn-ghost:hover{background:rgba(255,255,255,0.05);border-color:var(--border-glow)}
.btn-danger{background:rgba(239,68,68,0.1);color:var(--danger);border:1px solid rgba(239,68,68,0.2)}
.btn-danger:hover{background:var(--danger);color:#fff}
.btn-sm{padding:6px 14px;font-size:.8rem}
.btn-lg{padding:14px 32px;font-size:.95rem}

/* Hero */
.hero{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:100px 20px 60px;max-width:850px;margin:0 auto}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;background:rgba(255,255,255,0.03);border:1px solid var(--border-color);border-radius:999px;font-size:.75rem;color:var(--text2);margin-bottom:32px;}
.hero-badge .dot{width:6px;height:6px;background:var(--success);border-radius:50%;}
.hero h1{font-size:3.5rem;font-weight:600;line-height:1.1;margin-bottom:24px;letter-spacing:-0.04em}
.hero h1 .gradient-text{background:linear-gradient(180deg,#fff 0%,#a1a1aa 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero p{font-size:1.1rem;color:var(--text2);max-width:540px;margin-bottom:48px;font-weight:300}
.hero-actions{display:flex;gap:16px;}

/* Bento Grid (New Home Layout) */
.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1100px; margin: 0 auto 80px; padding: 0 20px; position: relative; z-index: 1;}
.bento-wide { grid-column: span 2; }
/* Badges */
.badge {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.badge-success { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.badge-warning { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.badge-danger { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.badge-neutral { background: rgba(148, 163, 184, 0.1); color: #94a3b8; }

.panel-box, .stat-card, .api-key-box, .bento-card, .auth-card {
  background: var(--bg-card);
  backdrop-filter: var(--glass);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-card);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.panel-box:hover, .stat-card:hover, .bento-card:hover {
  border-color: var(--border-glow);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(34, 197, 94, 0.08);
}
.bento-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px circle at var(--mouse-x, 0) var(--mouse-y, 0), rgba(255,255,255,0.06), transparent 40%);
  z-index: 0;
}
.bento-card-content { position: relative; z-index: 1; }
.bento-icon { width: 40px; height: 40px; background: rgba(255,255,255,0.05); border: 1px solid var(--border-color); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 24px; }
.bento-card h3 { font-size: 1.1rem; margin-bottom: 12px; font-weight: 500; }
.bento-card p { font-size: 0.9rem; color: var(--text2); }
.code-header { display: flex; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--border-color); background: rgba(255,255,255,0.02); }
.code-dots { display: flex; gap: 6px; }

/* Old Features Grid (Fallback if used anywhere) */
.features-section{position:relative;z-index:1;max-width:1100px;margin:0 auto 80px;padding:0 20px}
.section-title{text-align:center;font-size:1.8rem;font-weight:600;margin-bottom:12px;letter-spacing:-0.02em}
.section-subtitle{text-align:center;color:var(--text2);font-size:.95rem;margin-bottom:44px}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.feature-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--r-lg);padding:28px;transition:all .3s}
.feature-card:hover{border-color:var(--border-glow);transform:translateY(-2px)}
.feature-icon{width:40px;height:40px;background:rgba(255,255,255,0.05);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:16px}

/* Flow Section */
.flow-section{position:relative;z-index:1;max-width:900px;margin:0 auto 80px;padding:0 20px}
.flow-steps{display:flex;flex-direction:column;gap:0}
.flow-step{display:flex;align-items:flex-start;gap:20px;padding:24px 0;position:relative}
.flow-step-num{width:40px;height:40px;min-width:40px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:500;font-size:.9rem;color:var(--text1);position:relative;z-index:2}
.flow-step.active .flow-step-num{background:#fff;color:#000;}
.flow-step-content h4{font-size:1rem;font-weight:500;margin-bottom:6px}
.flow-step-content p{color:var(--text2);font-size:.85rem}
.flow-step-line{position:absolute;right:39px;top:64px;width:1px;height:calc(100% - 40px);background:var(--border-color)}
.flow-step:last-child .flow-step-line{display:none}

/* Code Section Fallbacks */
.code-section{position:relative;z-index:1;max-width:750px;margin:0 auto 80px;padding:0 20px}
.code-window{background:#000;border:1px solid var(--border-color);border-radius:var(--r-md);overflow:hidden;direction:ltr;text-align:left}
.code-window-header{display:flex;align-items:center;gap:8px;padding:12px 16px;background:rgba(255,255,255,0.02);border-bottom:1px solid var(--border-color)}
.code-dot{width:10px;height:10px;border-radius:50%}
.code-dot.red{background:#ff5f56}.code-dot.yellow{background:#ffbd2e}.code-dot.green{background:#27c93f}
.code-window-title{margin-left:auto;margin-right:auto;color:var(--text3);font-size:.75rem;font-family:var(--font-mono)}
.code-window pre{padding:24px;margin:0;overflow-x:auto;font-family:var(--font-mono);font-size:.85rem;line-height:1.7;color:#d4d4d8}
.code-window .kw{color:#f472b6}.code-window .str{color:#34d399}.code-window .fn{color:#60a5fa}.code-window .var{color:#fbbf24}.code-window .cm{color:#71717a}

/* Auth */
.auth-container{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 70px);padding:40px 20px}
.auth-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--r-xl);padding:48px 40px;width:100%;max-width:400px;box-shadow:var(--shadow-el);}
.auth-card h2{font-size:1.5rem;font-weight:600;margin-bottom:8px;text-align:center;letter-spacing:-0.02em}
.auth-card .auth-subtitle{color:var(--text2);font-size:.85rem;margin-bottom:32px;text-align:center}
.form-group{margin-bottom:20px}
.form-group label{display:block;color:var(--text2);font-size:.8rem;font-weight:500;margin-bottom:8px}
.form-group input{width:100%;padding:12px 16px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--r-sm);color:var(--text1);font-size:.9rem;font-family:inherit;transition:all .2s;outline:none;direction:ltr;text-align:left}
.form-group input:focus{border-color:rgba(255,255,255,0.3)}
.form-group input::placeholder{color:var(--text3)}
.form-error{color:var(--danger);font-size:.75rem;margin-top:6px;display:none}
.form-error.active{display:block}
.auth-footer{text-align:center;color:var(--text3);font-size:.85rem;margin-top:24px}
.auth-footer a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.3);padding-bottom:2px;}

/* Dashboard */
.dashboard{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:48px 20px 80px}
.dashboard-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:48px}
.dashboard-header h1{font-size:1.8rem;font-weight:600;letter-spacing:-0.02em;margin-bottom:4px}
.dashboard-header .user-email{color:var(--text3);font-size:.85rem;font-family:var(--font-mono)}
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:40px}
.stat-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--r-lg);padding:24px;position:relative;overflow:hidden;}
.stat-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(400px circle at var(--mouse-x, 0) var(--mouse-y, 0), rgba(255,255,255,0.04), transparent 40%); z-index: 0; pointer-events:none;}
.stat-card > div { position:relative; z-index:1; }
.stat-card .stat-label{color:var(--text2);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px}
.stat-card .stat-value{font-size:2rem;font-weight:400}
.stat-card .stat-value.accent{color:#fff}
.stat-card .stat-value.success{color:var(--success)}
.stat-card .stat-value.warning{color:var(--warning)}

/* API Key Box */
.api-key-box{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--r-lg);padding:32px;margin-bottom:40px}
.api-key-box h3{font-size:1.1rem;font-weight:500;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.api-key-display{display:flex;align-items:center;gap:12px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--r-sm);padding:8px 8px 8px 16px}
.api-key-display code{flex:1;font-family:var(--font-mono);font-size:.85rem;color:#fff;word-break:break-all;direction:ltr;text-align:left}
.api-key-actions{display:flex;gap:8px;flex-shrink:0}

/* Logs */
.logs-section{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--r-lg);overflow:hidden;margin-bottom:40px;}
.logs-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border-color);background:rgba(255,255,255,0.01)}
.logs-header h3{font-size:1.05rem;font-weight:500}
.table-container { overflow-x: auto; }
.logs-table{width:100%;border-collapse:collapse;direction:ltr;text-align:left}
.logs-table th{text-align:left;padding:14px 24px;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);border-bottom:1px solid var(--border-color);font-weight:500}
.logs-table td{padding:16px 24px;font-size:.85rem;border-bottom:1px solid rgba(255,255,255,0.02);color:var(--text2);vertical-align:middle;}
.logs-table tr:hover td{background:rgba(255,255,255,0.01)}
.logs-table .phone-cell{font-family:var(--font-mono);color:#fff}
.logs-table .code-cell{font-family:var(--font-mono);font-weight:500;letter-spacing:1px}

.status-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.02em;border:1px solid transparent}
.status-badge.verified{background:rgba(34,197,94,0.1);color:var(--success);border-color:rgba(34,197,94,0.2)}
.status-badge.pending{background:rgba(245,158,11,0.1);color:var(--warning);border-color:rgba(245,158,11,0.2)}
.status-badge.expired{background:rgba(239,68,68,0.1);color:var(--danger);border-color:rgba(239,68,68,0.2)}
.status-badge .status-dot{width:4px;height:4px;border-radius:50%;background:currentColor}

.empty-state{text-align:center;padding:60px 24px;color:var(--text3)}
.empty-state p{font-size:.9rem}

/* Admin Specific */
.admin-table td { vertical-align: middle; }
.usage-pill { background: rgba(255,255,255,0.05); color: #fff; padding: 4px 12px; border-radius: 20px; font-weight: 500; font-family: var(--font-mono); font-size: 0.8rem; border:1px solid var(--border-color); }
.blocked-row td { opacity: 0.5; background: rgba(239,68,68,0.02); }
.admin-actions { display: flex; gap: 8px; justify-content: center; }
.action-btn { padding: 6px 12px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 0.75rem; font-weight: 500; cursor: pointer; transition: all 0.2s; background:transparent; color:var(--text2); }
.btn-warn:hover { background: rgba(245,158,11,0.1); border-color: var(--warning); color: var(--warning); }
.btn-success:hover { background: rgba(34,197,94,0.1); border-color: var(--success); color: var(--success); }
.action-btn.btn-danger:hover { background: rgba(239,68,68,0.1); border-color: var(--danger); color: var(--danger); }

/* Docs Page */
.docs-page{position:relative;z-index:1;max-width:900px;margin:0 auto;padding:60px 20px 80px}
.docs-page h1{font-size:2.5rem;font-weight:600;margin-bottom:12px;letter-spacing:-0.03em}
.docs-page .docs-lead{color:var(--text2);font-size:1.1rem;margin-bottom:48px;font-weight:300}

.docs-nav{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--r-lg);padding:24px;margin-bottom:40px}
.docs-nav h4{font-size:.8rem;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:16px;font-weight:500}
.docs-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.docs-nav ul a{text-decoration:none;color:var(--text1);font-size:.85rem;padding:6px 14px;background:rgba(255,255,255,0.03);border:1px solid var(--border-color);border-radius:var(--r-sm);transition:all .2s}
.docs-nav ul a:hover{background:rgba(255,255,255,0.08)}

.docs-block{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--r-lg);padding:32px;margin-bottom:24px}
.docs-block h2{font-size:1.5rem;font-weight:600;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border-color);letter-spacing:-0.02em}
.docs-block h3{font-size:1.1rem;font-weight:500;margin:24px 0 12px;color:#fff}
.docs-block p{color:var(--text2);font-size:.95rem;margin-bottom:16px;line-height:1.7}
.docs-block ul,.docs-block ol{color:var(--text2);font-size:.95rem;padding-right:20px;margin-bottom:16px}
.docs-block li{margin-bottom:8px}

.endpoint-header{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;background:var(--bg-primary);padding:12px 16px;border-radius:var(--r-sm);border:1px solid var(--border-color)}
.method-badge{padding:4px 10px;border-radius:4px;font-size:.7rem;font-weight:600;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em;border:1px solid transparent}
.method-badge.post{background:rgba(34,197,94,0.1);color:var(--success);border-color:rgba(34,197,94,0.2)}
.method-badge.get{background:rgba(59,130,246,0.1);color:#60a5fa;border-color:rgba(59,130,246,0.2)}
.endpoint-url{font-family:var(--font-mono);font-size:.9rem;color:#fff}

.param-table{width:100%;border-collapse:collapse;margin:16px 0;direction:ltr;text-align:left}
.param-table th{text-align:left;padding:12px 16px;font-size:.75rem;color:var(--text3);border-bottom:1px solid var(--border-color);text-transform:uppercase;font-weight:500}
.param-table td{padding:12px 16px;font-size:.85rem;border-bottom:1px solid rgba(255,255,255,0.02);color:var(--text2)}
.param-table td:first-child{font-family:var(--font-mono);color:#fff;}
.param-table td code{background:rgba(255,255,255,0.05);padding:2px 6px;border-radius:4px;font-size:.8rem;border:1px solid var(--border-color)}

.response-example{background:#000;border:1px solid var(--border-color);border-radius:var(--r-sm);padding:20px;margin:16px 0;direction:ltr;text-align:left}
.response-example pre{font-family:var(--font-mono);font-size:.85rem;line-height:1.7;color:#d4d4d8;margin:0;white-space:pre-wrap}

.error-table{width:100%;border-collapse:collapse;margin:16px 0;direction:ltr;text-align:left}
.error-table th{text-align:left;padding:12px 16px;font-size:.75rem;color:var(--text3);border-bottom:1px solid var(--border-color);text-transform:uppercase;font-weight:500}
.error-table td{padding:12px 16px;font-size:.85rem;border-bottom:1px solid rgba(255,255,255,0.02);color:var(--text2)}

/* Quick Docs in dashboard */
.docs-section{margin-top:40px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--r-lg);padding:32px}
.docs-section h3{font-size:1.1rem;font-weight:500;margin-bottom:20px;display:flex;align-items:center;gap:8px}
.doc-endpoint{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--r-md);padding:16px;margin-bottom:12px}
.doc-endpoint:last-child{margin-bottom:0}
.doc-method{display:inline-block;padding:2px 8px;border-radius:4px;font-size:.7rem;font-weight:600;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em;margin-left:8px;border:1px solid transparent}
.doc-method.post{background:rgba(34,197,94,0.1);color:var(--success);border-color:rgba(34,197,94,0.2)}
.doc-method.get{background:rgba(59,130,246,0.1);color:#60a5fa;border-color:rgba(59,130,246,0.2)}
.doc-path{font-family:var(--font-mono);font-size:.85rem;color:#fff;direction:ltr;display:inline}
.doc-desc{color:var(--text2);font-size:.85rem;margin-top:8px}

.footer{position:relative;z-index:1;text-align:center;padding:40px 20px;border-top:1px solid var(--border-color);color:var(--text3);font-size:.8rem}

/* Toast */
.toast-container{position:fixed;bottom:24px;left:24px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{display:flex;align-items:center;gap:12px;padding:14px 20px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--r-sm);box-shadow:0 10px 40px rgba(0,0,0,0.8);font-size:.85rem;color:#fff;animation:slideUp .3s cubic-bezier(0.16,1,0.3,1);min-width:260px}
.toast.success{border-left:3px solid var(--success)}
.toast.error{border-left:3px solid var(--danger)}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Animations */
.animate-in{animation:fadeSlideUp .8s cubic-bezier(0.16,1,0.3,1) forwards;opacity:0;transform:translateY(20px)}
.delay-1{animation-delay:.1s}
.delay-2{animation-delay:.2s}
.delay-3{animation-delay:.3s}
@keyframes fadeSlideUp{to{opacity:1;transform:translateY(0)}}

.fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* Responsive */
@media(max-width:768px){
.mobile-menu-btn {
  display: none;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text1);
  padding: 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all 0.2s;
  justify-content: center;
  align-items: center;
}

/* Responsive */
@media(max-width: 1200px) {
  .dashboard-container { max-width: 100%; padding: 40px 30px; }
}

@media(max-width: 992px) {
  .dashboard-container { padding: 30px 20px; }
  .stats-row { grid-template-columns: 1fr; gap: 16px; }
  .dashboard-header { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 40px; }
  .dashboard-header div { width: 100%; }
  
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .hero h1 { font-size: 3rem; }
}

@media(max-width: 768px){
  .navbar { padding: 12px 20px; }
  .mobile-menu-btn { display: flex; }
  
  .nav-links {
    position: fixed;
    top: 80px;
    left: 15px;
    right: 15px;
    background: var(--bg-card);
    backdrop-filter: var(--glass);
    flex-direction: column;
    padding: 30px;
    border-radius: var(--r-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-el);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-20px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1000;
  }
  
  .nav-links.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  
  .nav-links li { width: 100%; }
  .nav-links a { display: block; width: 100%; text-align: center; padding: 14px; font-size: 1rem; }
  .nav-links .btn { width: 100%; margin-top: 10px; justify-content: center; }

  .hero { padding: 80px 20px 60px; }
  .hero h1 { font-size: 2.4rem; line-height: 1.2; }
  .hero p { font-size: 1rem; margin-bottom: 40px; }
  .hero-actions { flex-direction: column; width: 100%; gap: 12px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  
  .bento-grid { grid-template-columns: 1fr; gap: 20px; padding: 0 15px; }
  .bento-wide, .bento-tall { grid-column: span 1; grid-row: span 1; }
  
  .api-key-display { flex-direction: column; padding: 16px; gap: 16px; }
  .api-key-actions { width: 100%; justify-content: center; gap: 10px; }
  .api-key-actions .btn { flex: 1; padding: 12px; }
  
  .table-container { 
    margin: 0 -20px; 
    padding: 0 20px;
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch;
  }
  .logs-table, .admin-table { min-width: 700px; }
  
  .auth-card { padding: 40px 24px; border-radius: var(--r-xl); width: 95%; }
  .flow-step-line { right: 39px; }

  /* Charts */
  .dashboard-container canvas { height: 250px !important; }
  
  /* Docs */
  .docs-narrow { padding: 40px 15px; }
  .docs-narrow header h1 { font-size: 2rem; }
  .code-tabs { overflow-x: auto; white-space: nowrap; padding-bottom: 10px; margin-bottom: 0; }
  .code-tabs button { flex: 0 0 auto; padding: 10px 20px; }
  .code-box { border-radius: 0 0 12px 12px; }
  
  .try-it-out div { flex-direction: column; }
  .try-it-out .btn { width: 100%; }
}

@media(max-width: 480px) {
  .hero h1 { font-size: 2rem; }
  .section-header h2 { font-size: 1.5rem; }
  .btn { padding: 12px 20px; font-size: 0.85rem; }
  .stat-value { font-size: 1.8rem; }
}