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

/* ═══════════════════════════════════════
   DESIGN TOKENS — White & Blue, Clean
   WCAG AA: all text ≥ 4.5:1 contrast
   ═══════════════════════════════════════ */
:root {
  --bg-body: #f8fafc;
  --bg-white: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f1f5f9;
  --bg-sidebar: #ffffff;
  --bg-input: #f1f5f9;
  --bg-input-focus: #ffffff;
  --bg-muted: #f1f5f9;
  --bg-blue-soft: #eff6ff;
  --bg-hero: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%);

  --border-color: #e2e8f0;
  --border-hover: #cbd5e1;
  --border-blue: #93c5fd;

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-white: #ffffff;

  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a5f;

  --green-50: #f0fdf4;
  --green-500: #22c55e;
  --green-700: #15803d;
  --red-50: #fef2f2;
  --red-500: #ef4444;
  --red-700: #b91c1c;
  --orange-50: #fff7ed;
  --orange-500: #f97316;
  --orange-700: #c2410c;
  --purple-50: #faf5ff;
  --purple-500: #a855f7;
  --purple-700: #7e22ce;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.07);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.1);
  --shadow-blue: 0 4px 14px rgba(59,130,246,0.25);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  --transition: 200ms ease;
  --sidebar-width: 260px;
}

/* ═══════════════════════════════════════
   RESET
   ═══════════════════════════════════════ */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased }
body { font-family:'Inter',system-ui,-apple-system,sans-serif; background:var(--bg-body); color:var(--text-primary); line-height:1.6; min-height:100vh }
a { color:var(--blue-600); text-decoration:none; transition:color var(--transition) }
a:hover { color:var(--blue-800) }
img { max-width:100%; display:block }

:focus-visible { outline:2px solid var(--blue-500); outline-offset:2px; border-radius:4px }
:focus:not(:focus-visible) { outline:none }
.skip-nav { position:absolute; top:-100%; left:50%; transform:translateX(-50%); padding:8px 24px; background:var(--blue-600); color:#fff; font-weight:700; border-radius:0 0 var(--radius-sm) var(--radius-sm); z-index:9999; transition:top .2s }
.skip-nav:focus { top:0 }

::-webkit-scrollbar { width:6px }
::-webkit-scrollbar-track { background:var(--bg-body) }
::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:3px }
::-webkit-scrollbar-thumb:hover { background:#94a3b8 }

/* ═══════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════ */
.navbar { position:fixed; top:0; left:0; right:0; z-index:1000; padding:10px 24px; background:rgba(255,255,255,0.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--border-color); transition:all var(--transition) }
.navbar.scrolled { box-shadow:var(--shadow-sm) }
.navbar-inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px }
.navbar-brand { display:flex; align-items:center; gap:8px; font-size:1.3rem; font-weight:800; color:var(--text-primary); letter-spacing:-0.02em }
.navbar-brand .logo-icon { width:32px; height:32px; background:var(--blue-600); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:1rem; color:#fff }
.navbar-nav { display:flex; align-items:center; gap:2px; list-style:none }
.navbar-nav a,.navbar-nav button { padding:8px 14px; border-radius:var(--radius-sm); font-size:.875rem; font-weight:500; border:none; background:none; color:var(--text-secondary); font-family:inherit; cursor:pointer; transition:all var(--transition) }
.navbar-nav a:hover,.navbar-nav button:hover { color:var(--text-primary); background:var(--bg-muted) }
.nav-user { display:flex; align-items:center; gap:8px; padding:5px 14px !important; background:var(--bg-muted) !important; border:1px solid var(--border-color) !important; border-radius:var(--radius-full) !important; color:var(--text-primary) !important }
.nav-user .avatar { width:28px; height:28px; border-radius:50%; background:var(--blue-600); display:flex; align-items:center; justify-content:center; font-size:.73rem; font-weight:700; color:#fff }
.mobile-menu-btn { display:none; background:none; border:none; color:var(--text-primary); font-size:1.5rem; cursor:pointer; padding:8px }

/* ═══════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 20px; border-radius:var(--radius-sm); font-family:inherit; font-size:.875rem; font-weight:600; border:none; cursor:pointer; transition:all var(--transition); white-space:nowrap; text-decoration:none }
.btn:disabled { opacity:.5; cursor:not-allowed }
.btn-primary { background:var(--blue-600); color:#fff; box-shadow:var(--shadow-blue) }
.btn-primary:hover:not(:disabled) { background:var(--blue-700); transform:translateY(-1px); box-shadow:0 6px 20px rgba(59,130,246,0.3) }
.btn-secondary { background:var(--bg-muted); color:var(--text-primary); border:1px solid var(--border-color) }
.btn-secondary:hover:not(:disabled) { background:var(--bg-card-hover); border-color:var(--border-hover) }
.btn-outline { background:transparent; color:var(--blue-600); border:1px solid var(--blue-200) }
.btn-outline:hover:not(:disabled) { background:var(--blue-50); border-color:var(--blue-500) }
.btn-danger { background:var(--red-50); color:var(--red-700); border:1px solid #fecaca }
.btn-danger:hover:not(:disabled) { background:#fee2e2 }
.btn-success { background:var(--green-50); color:var(--green-700); border:1px solid #bbf7d0 }
.btn-sm { padding:6px 14px; font-size:.8rem }
.btn-lg { padding:14px 32px; font-size:1rem; border-radius:var(--radius-md) }
.btn-block { width:100% }

/* ═══════════════════════════════════════
   HERO — Blue gradient
   ═══════════════════════════════════════ */
.hero { position:relative; padding:140px 24px 80px; text-align:center; background:var(--bg-hero); color:#fff; overflow:hidden }
.hero::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.hero-content { position:relative; z-index:1; max-width:700px; margin:0 auto }
.hero-badge { display:inline-flex; align-items:center; gap:8px; padding:6px 18px; background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.2); border-radius:var(--radius-full); font-size:.8rem; color:rgba(255,255,255,0.9); margin-bottom:24px }
.hero-badge .dot { width:6px; height:6px; background:#4ade80; border-radius:50%; animation:blink 2s ease-in-out infinite }
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.hero h1 { font-size:clamp(2rem,5vw,3.4rem); font-weight:900; line-height:1.12; letter-spacing:-0.03em; margin-bottom:16px; color:#fff }
.hero h1 .gradient-text { color:#fff; text-shadow:0 0 40px rgba(255,255,255,0.3) }
.hero p { font-size:1.05rem; color:rgba(255,255,255,0.85); max-width:520px; margin:0 auto 32px; line-height:1.7 }
.hero-actions { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap }
.hero .btn-primary { background:#fff; color:var(--blue-700); box-shadow:var(--shadow-lg) }
.hero .btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(0,0,0,0.2) }
.hero .btn-secondary { background:rgba(255,255,255,0.15); color:#fff; border-color:rgba(255,255,255,0.3) }
.hero .btn-secondary:hover { background:rgba(255,255,255,0.25) }
.hero-stats { display:flex; justify-content:center; gap:48px; margin-top:48px }
.hero-stat .stat-value { font-size:2rem; font-weight:800; color:#fff }
.hero-stat .stat-label { font-size:.82rem; color:rgba(255,255,255,0.7) }

/* ═══════════════════════════════════════
   SECTIONS
   ═══════════════════════════════════════ */
.section { padding:48px 24px; max-width:1200px; margin:0 auto }
.section-header { text-align:center; margin-bottom:32px }
.section-header h2 { font-size:1.8rem; font-weight:800; color:var(--text-primary); letter-spacing:-0.02em; margin-bottom:6px }
.section-header p { color:var(--text-secondary); font-size:1rem }

/* ═══════════════════════════════════════
   FILTER BAR
   ═══════════════════════════════════════ */
.filter-bar { display:flex; align-items:center; gap:8px; margin-bottom:24px; flex-wrap:wrap }
.filter-btn { padding:8px 18px; background:var(--bg-white); border:1px solid var(--border-color); border-radius:var(--radius-full); color:var(--text-secondary); font-family:inherit; font-size:.82rem; font-weight:500; cursor:pointer; transition:all var(--transition); text-transform:capitalize }
.filter-btn:hover { background:var(--bg-muted); color:var(--text-primary); border-color:var(--border-hover) }
.filter-btn.active { background:var(--blue-50); color:var(--blue-700); border-color:var(--blue-200); font-weight:600 }
.search-input { flex:1; min-width:200px; padding:8px 18px; background:var(--bg-white); border:1px solid var(--border-color); border-radius:var(--radius-full); color:var(--text-primary); font-family:inherit; font-size:.82rem; outline:none; transition:all var(--transition) }
.search-input::placeholder { color:var(--text-muted) }
.search-input:focus { border-color:var(--blue-500); box-shadow:0 0 0 3px rgba(59,130,246,0.1) }

/* ═══════════════════════════════════════
   BOT CARDS
   ═══════════════════════════════════════ */
.bots-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:20px }
.bot-card { position:relative; background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-lg); overflow:hidden; transition:all var(--transition); cursor:pointer }
.bot-card:hover { border-color:var(--border-hover); transform:translateY(-3px); box-shadow:var(--shadow-lg) }
.bot-card-image { height:160px; background:linear-gradient(135deg, var(--blue-50), #ede9fe); display:flex; align-items:center; justify-content:center; position:relative }
.bot-card-image .bot-icon { font-size:3.2rem }
.bot-card-category { position:absolute; top:12px; right:12px; padding:4px 10px; background:var(--bg-white); border:1px solid var(--border-color); border-radius:var(--radius-full); font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--blue-700) }
.bot-card-body { padding:18px 20px }
.bot-card-body h3 { font-size:1.05rem; font-weight:700; color:var(--text-primary); margin-bottom:4px }
.bot-card-body p { color:var(--text-secondary); font-size:.85rem; line-height:1.6; margin-bottom:14px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.bot-card-meta { display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px solid var(--border-color) }
.bot-card-meta .meta-item { display:flex; align-items:center; gap:4px; font-size:.78rem; color:var(--text-muted) }
.lock-overlay { position:absolute; inset:0; background:rgba(255,255,255,0.5); backdrop-filter:blur(1px); display:flex; align-items:center; justify-content:center; opacity:0; transition:all var(--transition); pointer-events:none; z-index:5 }
.bot-card:hover .lock-overlay { opacity:1 }
.lock-badge { padding:10px 20px; background:var(--bg-white); border:1px solid var(--blue-200); border-radius:var(--radius-full); font-size:.82rem; font-weight:600; color:var(--blue-700); box-shadow:var(--shadow-md) }

/* ═══════════════════════════════════════
   PRICING
   ═══════════════════════════════════════ */
.pricing-card { max-width:480px; margin:0 auto; background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-xl); padding:36px; text-align:center; position:relative; overflow:hidden; box-shadow:var(--shadow-md) }
.pricing-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--blue-600) }
.pricing-card .pricing-badge { display:inline-block; padding:4px 14px; background:var(--blue-600); border-radius:var(--radius-full); font-size:.73rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#fff; margin-bottom:20px }
.pricing-card h3 { font-size:1.2rem; font-weight:700; color:var(--text-primary); margin-bottom:6px }
.pricing-card .price { font-size:2.6rem; font-weight:900; color:var(--blue-700); line-height:1.2 }
.pricing-card .price-period { font-size:.92rem; color:var(--text-secondary); margin-bottom:24px }
.pricing-features { list-style:none; text-align:left; margin-bottom:20px }
.pricing-features li { padding:6px 0; display:flex; align-items:center; gap:8px; color:var(--text-secondary); font-size:.9rem }
.pricing-features li .check { color:var(--blue-600); font-weight:bold; font-size:1rem; flex-shrink:0 }

.promo-input-group { display:flex; gap:8px; margin-bottom:12px }
.promo-input-group input { flex:1 }
.promo-result { font-size:.84rem; margin-bottom:12px; padding:8px 14px; border-radius:var(--radius-sm); display:none }
.promo-result.success { display:block; background:var(--green-50); color:var(--green-700); border:1px solid #bbf7d0 }
.promo-result.error { display:block; background:var(--red-50); color:var(--red-700); border:1px solid #fecaca }

/* ═══════════════════════════════════════
   MODALS
   ═══════════════════════════════════════ */
.modal-backdrop { position:fixed; inset:0; background:rgba(15,23,42,0.4); backdrop-filter:blur(4px); z-index:2000; display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; visibility:hidden; transition:all var(--transition) }
.modal-backdrop.active { opacity:1; visibility:visible }
.modal { background:var(--bg-white); border:1px solid var(--border-color); border-radius:var(--radius-xl); width:100%; max-width:440px; max-height:90vh; overflow-y:auto; transform:translateY(12px) scale(.98); transition:all var(--transition); box-shadow:var(--shadow-lg) }
.modal-backdrop.active .modal { transform:translateY(0) scale(1) }
.modal-header { padding:24px 24px 12px; display:flex; justify-content:space-between; align-items:center }
.modal-header h2 { font-size:1.2rem; font-weight:700; color:var(--text-primary) }
.modal-close { width:32px; height:32px; border-radius:50%; background:var(--bg-muted); border:1px solid var(--border-color); color:var(--text-muted); font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all var(--transition) }
.modal-close:hover { background:var(--bg-card-hover); color:var(--text-primary) }
.modal-body { padding:12px 24px 24px }

/* ═══════════════════════════════════════
   FORMS
   ═══════════════════════════════════════ */
.form-group { margin-bottom:14px }
.form-group label { display:block; font-size:.82rem; font-weight:600; color:var(--text-primary); margin-bottom:5px }
.form-control { width:100%; padding:10px 14px; background:var(--bg-input); border:1px solid var(--border-color); border-radius:var(--radius-sm); color:var(--text-primary); font-family:inherit; font-size:.9rem; outline:none; transition:all var(--transition) }
.form-control::placeholder { color:var(--text-muted) }
.form-control:focus { border-color:var(--blue-500); background:var(--bg-input-focus); box-shadow:0 0 0 3px rgba(59,130,246,0.1) }
select.form-control { cursor:pointer }
textarea.form-control { resize:vertical; min-height:90px }
.form-error { color:var(--red-700); font-size:.8rem; margin-top:4px }
.form-divider { display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--text-muted); font-size:.8rem }
.form-divider::before,.form-divider::after { content:''; flex:1; height:1px; background:var(--border-color) }

/* ═══════════════════════════════════════
   TOAST
   ═══════════════════════════════════════ */
.toast-container { position:fixed; top:70px; right:24px; z-index:3000; display:flex; flex-direction:column; gap:8px }
.toast { padding:12px 20px; background:var(--bg-white); border:1px solid var(--border-color); border-radius:var(--radius-md); color:var(--text-primary); font-size:.88rem; min-width:260px; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:8px; animation:slideIn .3s ease }
.toast.success { border-left:3px solid var(--green-500) }
.toast.error { border-left:3px solid var(--red-500) }
.toast.info { border-left:3px solid var(--blue-500) }
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ═══════════════════════════════════════
   SIDEBAR LAYOUT
   ═══════════════════════════════════════ */
.dashboard-layout { display:flex; min-height:100vh; padding-top:55px }

.sidebar { position:fixed; top:55px; left:0; bottom:0; width:var(--sidebar-width); background:var(--bg-sidebar); border-right:1px solid var(--border-color); overflow-y:auto; z-index:100; display:flex; flex-direction:column; transition:transform .3s ease }
.sidebar-header { padding:20px 20px 14px; border-bottom:1px solid var(--border-color) }
.sidebar-header h3 { font-size:.9rem; font-weight:700; color:var(--text-primary); margin-bottom:2px }
.sidebar-header p { font-size:.78rem; color:var(--text-muted) }

.sidebar-nav { flex:1; padding:12px 10px }
.sidebar-nav-label { padding:10px 12px 6px; font-size:.67rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted) }
.sidebar-nav a { display:flex; align-items:center; gap:10px; padding:9px 14px; margin-bottom:2px; border-radius:var(--radius-sm); font-size:.875rem; font-weight:500; color:var(--text-secondary); transition:all var(--transition); text-decoration:none }
.sidebar-nav a:hover { color:var(--text-primary); background:var(--bg-muted) }
.sidebar-nav a.active { color:var(--blue-700); background:var(--blue-50); font-weight:600; border:1px solid var(--blue-100) }
.sidebar-nav a .nav-icon { font-size:1.05rem; width:22px; text-align:center; flex-shrink:0 }
.sidebar-nav a .nav-badge { margin-left:auto; padding:2px 8px; border-radius:var(--radius-full); font-size:.67rem; font-weight:700; background:var(--red-50); color:var(--red-700) }

.sidebar-footer { padding:14px 20px; border-top:1px solid var(--border-color); font-size:.78rem }
.sidebar-footer a { color:var(--text-muted); font-size:.78rem }
.sidebar-footer a:hover { color:var(--text-primary) }

.main-content { flex:1; margin-left:var(--sidebar-width); padding:28px 32px; max-width:calc(100% - var(--sidebar-width)) }
.main-content .page-title { font-size:1.45rem; font-weight:800; color:var(--text-primary); margin-bottom:4px; letter-spacing:-0.01em }
.main-content .page-subtitle { font-size:.9rem; color:var(--text-secondary); margin-bottom:24px }

.sidebar-toggle { display:none; position:fixed; bottom:20px; left:20px; width:48px; height:48px; border-radius:50%; background:var(--blue-600); color:#fff; border:none; font-size:1.3rem; cursor:pointer; z-index:200; box-shadow:var(--shadow-blue) }

/* ═══════════════════════════════════════
   DASHBOARD CARDS
   ═══════════════════════════════════════ */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; margin-bottom:28px }
.stat-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-md); padding:18px 20px; transition:all var(--transition) }
.stat-card:hover { box-shadow:var(--shadow-sm); border-color:var(--border-hover) }
.stat-card .stat-icon { font-size:1.4rem; margin-bottom:8px }
.stat-card .stat-label { font-size:.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; font-weight:600; margin-bottom:4px }
.stat-card .stat-value { font-size:1.5rem; font-weight:800; color:var(--text-primary) }
.stat-card .stat-value.accent { color:var(--blue-700) }
.stat-card.highlight { border-color:var(--blue-200); background:var(--blue-50) }
.stat-card.warn { border-color:#fed7aa; background:var(--orange-50) }
.stat-card.danger { border-color:#fecaca; background:var(--red-50) }

.membership-bar { padding:18px 22px; border-radius:var(--radius-md); margin-bottom:24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px }
.membership-bar.active { background:var(--green-50); border:1px solid #bbf7d0 }
.membership-bar.inactive { background:var(--orange-50); border:1px solid #fed7aa }
.membership-bar.none { background:var(--blue-50); border:1px solid var(--blue-200) }
.membership-bar h3 { font-size:1rem; font-weight:600; color:var(--text-primary); margin-bottom:2px }
.membership-bar p { font-size:.82rem; color:var(--text-secondary) }

/* ═══════════════════════════════════════
   TABLES
   ═══════════════════════════════════════ */
.table-wrapper { overflow-x:auto; border:1px solid var(--border-color); border-radius:var(--radius-md); background:var(--bg-white) }
.data-table { width:100%; border-collapse:collapse }
.data-table th,.data-table td { padding:11px 16px; text-align:left; border-bottom:1px solid var(--border-color); font-size:.85rem }
.data-table th { background:var(--bg-muted); color:var(--text-muted); font-weight:600; text-transform:uppercase; font-size:.72rem; letter-spacing:.05em }
.data-table td { color:var(--text-secondary) }
.data-table tbody tr:hover td { background:var(--bg-body) }
.data-table tbody tr:last-child td { border-bottom:none }

.badge { display:inline-flex; padding:3px 10px; border-radius:var(--radius-full); font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.03em }
.badge-green { background:var(--green-50); color:var(--green-700) }
.badge-red { background:var(--red-50); color:var(--red-700) }
.badge-orange { background:var(--orange-50); color:var(--orange-700) }
.badge-cyan { background:var(--blue-50); color:var(--blue-700) }
.badge-purple { background:var(--purple-50); color:var(--purple-700) }
.badge-yellow { background:#fefce8; color:#a16207 }

.toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap }
.toolbar-left { display:flex; align-items:center; gap:8px; flex-wrap:wrap }

/* ═══════════════════════════════════════
   PANELS
   ═══════════════════════════════════════ */
.panel { display:none }
.panel.active { display:block; animation:fadeIn .2s ease }
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.empty-state { text-align:center; padding:48px 24px; color:var(--text-muted) }
.empty-state .empty-icon { font-size:2.5rem; margin-bottom:12px }
.empty-state h3 { font-size:1rem; color:var(--text-secondary); margin-bottom:6px }

.loading-spinner { display:inline-block; width:16px; height:16px; border:2px solid var(--border-color); border-top-color:var(--blue-600); border-radius:50%; animation:spin .6s linear infinite }
@keyframes spin{to{transform:rotate(360deg)}}

/* ═══════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════ */
.footer { padding:32px 24px; border-top:1px solid var(--border-color); text-align:center; color:var(--text-muted); font-size:.82rem; background:var(--bg-white) }

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media(max-width:768px){
  .navbar-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg-white);border-bottom:1px solid var(--border-color);flex-direction:column;padding:12px}
  .navbar-nav.open{display:flex}
  .mobile-menu-btn{display:block}
  .hero{padding:110px 16px 50px}
  .hero h1{font-size:1.9rem}
  .hero-stats{gap:24px;flex-wrap:wrap}
  .hero-actions{flex-direction:column}
  .bots-grid{grid-template-columns:1fr}
  .section{padding:32px 16px}
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .sidebar-toggle{display:flex;align-items:center;justify-content:center}
  .main-content{margin-left:0;padding:20px 16px;max-width:100%}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr}
}