/* N-Sights Cloud — shared design system for all pages beyond index.html
   (index.html keeps its own inline copy so it never needs this file to load
   for its critical first paint). Same color scheme, same tokens. */
:root {
  --bg-0: #0a0e27; --bg-1: #0f1535; --bg-2: #162044; --bg-3: #1e2b5e; --bg-4: #253470;
  --fg-0: #e2e8f0; --fg-1: #94a3b8; --fg-2: #64748b;
  --accent-1: #6366f1; --accent-2: #8b5cf6; --accent-3: #a855f7; --accent-g: #06b6d4;
  --danger: #ef4444; --danger-h: #f87171; --warn: #f59e0b; --success: #10b981; --info: #3b82f6;
  --border: #1e3a5f; --border-h: #2d5a8a;
  --shadow: 0 8px 32px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 40px rgba(99,102,241,0.15);
  --radius: 16px; --radius-sm: 10px;
  --font: 'Vazirmatn', 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', monospace;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/fonts/webfonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font); background: var(--bg-0); color: var(--fg-0);
  min-height: 100vh; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
body::before {
  content: ''; position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 0%, rgba(99,102,241,0.08), transparent),
    radial-gradient(ellipse 50% 50% at 80% 100%, rgba(139,92,246,0.06), transparent),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(6,182,212,0.03), transparent);
  pointer-events: none; z-index: 0;
}
.container { max-width: 900px; margin: 0 auto; padding: 20px 16px; position: relative; z-index: 1; }
.container-narrow { max-width: 480px; }
.container-wide { max-width: 1100px; }

header.site-header { text-align: center; padding: 28px 0 20px; }
header.site-header .logo { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 10px; }
header.site-header .logo-icon {
  width: 48px; height: 48px; background: linear-gradient(135deg, var(--accent-2), var(--accent-1));
  border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 24px rgba(99,102,241,0.3), 0 4px 12px rgba(0,0,0,0.3);
}
header.site-header .logo-icon svg { width: 28px; height: 28px; }
header.site-header h1 {
  font-size: 1.7rem; font-weight: 700; letter-spacing: -0.5px;
  background: linear-gradient(90deg, #fff, #a5b4fc);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
header.site-header .tagline { color: var(--fg-1); font-size: 0.9rem; margin-top: 4px; }

.top-links { display: flex; justify-content: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; font-size: 0.8rem; }
.top-links a { color: var(--fg-1); text-decoration: none; transition: color 0.2s; }
.top-links a:hover { color: var(--accent-1); }
.lang-switch select {
  padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg-2); color: var(--fg-0); font-family: var(--font); font-size: 0.85rem; cursor: pointer;
}
.lang-switch select:hover { background: var(--bg-3); border-color: var(--border-h); }

/* ─── Topbar (login/signup on one side, plans icon + language on the other) ─── */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-bottom: 18px; flex-wrap: wrap;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.icon-btn {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: var(--bg-2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-1); text-decoration: none; transition: all 0.2s; flex-shrink: 0;
}
.icon-btn:hover { background: var(--bg-3); color: var(--fg-0); border-color: var(--border-h); }
.icon-btn svg { width: 19px; height: 19px; }
.btn-sm {
  padding: 8px 18px; border: none; border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 0.85rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
}
.btn-sm-primary {
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: #fff; box-shadow: 0 4px 14px rgba(99,102,241,0.3);
}
.btn-sm-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99,102,241,0.4); }
.btn-sm-ghost { background: var(--bg-2); color: var(--fg-0); border: 1px solid var(--border); }
.btn-sm-ghost:hover { background: var(--bg-3); border-color: var(--border-h); }

/* Keep the utility bar itself left-to-right regardless of page language, so
   "left"/"right" placement stays predictable across all 8 languages. Each
   control's own text still shapes correctly per the active script. */
.topbar { direction: ltr; }
.topbar .btn-sm, .topbar .icon-btn, .topbar select { direction: rtl; }
[dir="ltr"] .topbar .btn-sm, [dir="ltr"] .topbar select { direction: ltr; }

.card {
  background: linear-gradient(145deg, var(--bg-1), var(--bg-2));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; margin-bottom: 16px; box-shadow: var(--shadow), var(--shadow-glow);
  position: relative; overflow: hidden;
}
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,0.3), transparent);
}
.card h2, .card h3 { margin-bottom: 16px; color: #fff; }

.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 0.8rem; color: var(--fg-1); margin-bottom: 6px; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea {
  width: 100%; padding: 12px 14px; background: var(--bg-0); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--fg-0); font-family: var(--font); font-size: 0.95rem; transition: all 0.2s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-1); box-shadow: 0 0 0 3px rgba(99,102,241,0.1); }
.hint { font-size: 0.78rem; color: var(--fg-2); margin-top: 6px; }

.btn {
  padding: 12px 24px; border: none; border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 0.95rem; font-weight: 600; cursor: pointer;
  transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-primary { background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); color: #fff; box-shadow: 0 4px 16px rgba(99,102,241,0.35); width: 100%; }
.btn-primary:hover:not(:disabled) { background: linear-gradient(135deg, #818cf8, #a78bfa); transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary { background: var(--bg-2); color: var(--fg-0); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--bg-3); border-color: var(--border-h); }
.btn-danger { background: rgba(239,68,68,0.12); color: var(--danger); border: 1px solid rgba(239,68,68,0.25); }
.btn-danger:hover { background: rgba(239,68,68,0.2); }
.btn-block { width: 100%; }

.badge { padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; display: inline-block; }
.badge-free { background: rgba(245,158,11,0.15); color: var(--warn); border: 1px solid rgba(245,158,11,0.3); }
.badge-basic { background: rgba(59,130,246,0.15); color: var(--info); border: 1px solid rgba(59,130,246,0.3); }
.badge-pro { background: rgba(139,92,246,0.15); color: var(--accent-2); border: 1px solid rgba(139,92,246,0.3); }
.badge-business { background: rgba(168,85,247,0.15); color: var(--accent-3); border: 1px solid rgba(168,85,247,0.3); }
.badge-enterprise { background: rgba(16,185,129,0.15); color: var(--success); border: 1px solid rgba(16,185,129,0.3); }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(100px);
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 24px; font-size: 0.9rem; color: var(--fg-0); box-shadow: var(--shadow);
  z-index: 1000; opacity: 0; transition: all 0.3s; }
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.success { border-color: var(--success); }
.toast.error { border-color: var(--danger); }
.toast.warn { border-color: var(--warn); }

.plans-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
@media (max-width: 1000px) { .plans-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .plans-grid { grid-template-columns: 1fr; } }
.plan-card { display: flex; flex-direction: column; }
.plan-card .plan-name { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; }
.plan-card .plan-price { font-size: 1.6rem; font-weight: 700; background: linear-gradient(90deg,#fff,#a5b4fc); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom: 12px; }
.plan-card .plan-price small { font-size: 0.75rem; color: var(--fg-1); -webkit-text-fill-color: var(--fg-1); }
.plan-card ul { list-style: none; margin: 12px 0; flex: 1; }
.plan-card li { font-size: 0.85rem; color: var(--fg-1); padding: 6px 0; border-bottom: 1px solid var(--border); }
.plan-card li:last-child { border-bottom: none; }

table.data-table { width: 100%; border-collapse: collapse; }
table.data-table th, table.data-table td { padding: 12px 14px; text-align: inherit; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
table.data-table th { color: var(--fg-1); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; }
table.data-table tr:hover td { background: rgba(99,102,241,0.05); }

.center-text { text-align: center; }
.muted { color: var(--fg-1); }
.small { font-size: 0.82rem; }
footer.site-footer { text-align: center; padding: 32px 0 16px; color: var(--fg-2); font-size: 0.8rem; }
footer.site-footer a { color: var(--fg-1); text-decoration: none; }
footer.site-footer a:hover { color: var(--accent-1); }