/* nqaat • CANVA v5 — Base & Components */
@import url('tokens.css');

*,
*::before,
*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0; color:var(--text); background:var(--grid);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Arabic", "Noto Kufi Arabic";
  line-height:1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a{ color:inherit; }
.container{ width:min(1260px, 94vw); margin-inline:auto; padding-inline:.9rem; }
.section{ padding: clamp(1.8rem, 4vw, 3rem) 0; }

/* Header */
.header{ position:sticky; top:0; z-index:60; backdrop-filter: blur(10px) saturate(130%); background: color-mix(in oklab, var(--bg) 85%, transparent); border-bottom:1px solid var(--line); }
.nav{ display:grid; grid-template-columns: 1fr auto auto; gap:.8rem; align-items:center; padding:.8rem 0; }
@media(max-width:980px){ .nav{ grid-template-columns: 1fr auto; } }
.brand{ display:flex; align-items:center; gap:.7rem; font-weight:900; text-decoration:none; }
.brand .mark{ width:32px; height:32px; border-radius:12px; background: linear-gradient(135deg, var(--brand), var(--accent)); box-shadow: 0 6px 30px color-mix(in oklab, var(--brand) 30%, transparent); }

.nav-links{ display:flex; gap:.45rem; align-items:center; flex-wrap:wrap; }
.nav-links a{ text-decoration:none; padding:.55rem .85rem; border:1px solid transparent; border-radius:999px; }
.nav-links a:hover, .nav-links a[aria-current="page"]{ border-color:var(--line); background: color-mix(in oklab, var(--surface) 88%, transparent); box-shadow: var(--shadow-sm); }

.controls{ display:flex; gap:.45rem; align-items:center; }

.select, .btn, .input, .chip{
  appearance:none; border:1px solid var(--line); background: color-mix(in oklab, var(--surface) 90%, transparent);
  color:var(--text); padding:.75rem 1rem; border-radius:16px; font-size:.95rem; outline:none;
}
.select:focus, .btn:focus, .input:focus{ box-shadow: 0 0 0 6px color-mix(in oklab, var(--brand) 30%, transparent); }
.btn{ display:inline-flex; gap:.6rem; align-items:center; cursor:pointer; font-weight:900; text-decoration:none; border:1px solid color-mix(in oklab, var(--brand) 50%, transparent); background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 90%, #fff 0), var(--brand)); color:#fff; }
.btn.secondary{ background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 90%, #fff 0), var(--accent)); color:#0e141b; }
.btn.ghost{ background: transparent; border-color:var(--line); color:var(--text); }
.badge{ display:inline-flex; gap:.35rem; align-items:center; padding:.35rem .65rem; border-radius:999px; border:1px solid var(--line); font-size:.85rem; background: color-mix(in oklab, var(--surface) 88%, transparent); }

/* Cards & grids */
.card{ border:1px solid var(--line); border-radius:20px; background: color-mix(in oklab, var(--surface) 90%, transparent); box-shadow: var(--shadow); }
.card.pad{ padding:1.2rem; }
.grid{ display:grid; gap:1.2rem; }
.grid.cols-2{ grid-template-columns: repeat(2,minmax(0,1fr)); }
.grid.cols-3{ grid-template-columns: repeat(3,minmax(0,1fr)); }
.grid.cols-4{ grid-template-columns: repeat(4,minmax(0,1fr)); }
@media(max-width:980px){ .grid.cols-3, .grid.cols-4{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:640px){ .grid.cols-2, .grid.cols-3, .grid.cols-4{ grid-template-columns:1fr; } }

/* Hero */
.hero{ padding: clamp(2rem, 6vw, 4rem) 0 1rem; }
.hero-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap: clamp(1rem, 4vw, 2rem); align-items:center; }
@media(max-width:980px){ .hero-grid{ grid-template-columns: 1fr; } }
.kicker{ color:var(--accent); font-weight:900; text-transform:uppercase; letter-spacing:.3px; font-size:.82rem; }
h1.hero-title{ font-size: clamp(2.4rem, 3.8vw + 1rem, 3.8rem); line-height:1.08; margin:.4rem 0 .8rem; }
.hero-title .grad{ background: linear-gradient(135deg, var(--brand), var(--accent)); -webkit-background-clip:text; background-clip:text; color: transparent; }
.lead{ font-size: clamp(1rem,1vw + .6rem,1.25rem); color: var(--muted); }
.hero-visual{ position:relative; min-height:330px; border-radius:20px; overflow:hidden; display:grid; place-items:center; }
.hero-visual .mesh{ position:absolute; inset:0; background: radial-gradient(600px 240px at 20% 0%, rgba(91,142,255,.18), transparent 60%), radial-gradient(600px 240px at 85% 15%, rgba(71,236,204,.16), transparent 60%), repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 40px), repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 40px); opacity:.5; }
.hero-visual .orb{ position:absolute; width:520px; height:520px; border-radius:50%; filter: blur(60px); background: radial-gradient(closest-side, rgba(91,142,255,.48), transparent 70%), radial-gradient(closest-side, rgba(71,236,204,.48), transparent 70%); mix-blend-mode:screen; opacity:.85; transform: translate3d(0,0,0); }
.hero-visual img{ width:100%; height:auto; z-index:1; position:relative; opacity:.95; }
.search{ display:flex; gap:.6rem; margin-top:1rem; flex-wrap:wrap; }
.input.flex{ flex:1 1 360px; }

/* Tables */
.table{ width:100%; border-collapse: collapse; }
.table th, .table td{ padding:.85rem .6rem; border-bottom:1px solid var(--line); text-align:start; }
.table th{ color:var(--muted); cursor: default; }
.table th.sortable{ cursor:pointer; }

/* Footer */
.footer{ margin-top:2rem; padding:2rem 0 3rem; border-top:1px solid var(--line); color:var(--muted); }

/* App */
.app{ display:grid; grid-template-columns: 280px 1fr; gap:1.2rem; padding:1.2rem 0; }
@media(max-width:1000px){ .app{ grid-template-columns:1fr; } }
.aside{ position:sticky; top:86px; align-self:start; display:grid; gap:.7rem; }
.menu{ display:grid; gap:.55rem; }
.menu a{ text-decoration:none; color:var(--text); padding:.7rem .95rem; border:1px solid var(--line); border-radius:14px; background: color-mix(in oklab, var(--surface) 88%, transparent); }
.menu a:hover, .menu a[aria-current="page"]{ background: color-mix(in oklab, var(--surface) 80%, transparent); border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.app-topbar{ display:flex; justify-content:space-between; align-items:center; gap:.6rem; padding:.85rem 1rem; border:1px solid var(--line); border-radius:14px; background: color-mix(in oklab, var(--surface) 88%, transparent); }

/* Misc */
.lang.en{ display:none; } html[lang="en"] .lang.en{ display:inline; } html[lang="en"] .lang.ar{ display:none; }
.mt-1{ margin-top:.6rem; } .mt-2{ margin-top:1rem; } .mt-3{ margin-top:1.6rem; } .mt-4{ margin-top:2rem; }
.center{ text-align:center; } .right{ text-align:end; }

/* Progress & Toast */
#progress{ position:fixed; inset-inline:0; top:0; height:3px; background: linear-gradient(90deg, var(--brand), var(--accent)); transform: scaleX(0); transform-origin:left; transition: transform .35s ease; z-index:70; }
.toast{ position:fixed; inset-inline-end:1rem; bottom:1rem; display:grid; gap:.6rem; z-index: 80; }
.toast .item{ padding:.6rem .8rem; border:1px solid var(--line); border-radius:12px; background: color-mix(in oklab, var(--surface) 90%, transparent); box-shadow: var(--shadow-sm); }

/* v6 base */
:root{ --line:#30445f; --surface:#0f141d; --brand:#8fb0ff; --muted:#6e86b7; }
body{background:#0b0f16;color:#cdd7f6;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Noto Kufi Arabic',sans-serif}
.nav-links a{margin-inline-end:.6rem}
.results-grid{ display:grid; grid-template-columns: repeat(2,minmax(220px,1fr)); gap:1rem; }
@media(min-width:900px){ .results-grid{ grid-template-columns: repeat(3,minmax(220px,1fr)); } }
.result-card{ border:1px solid var(--line); border-radius:14px; padding:1rem; background: color-mix(in oklab, var(--surface) 94%, transparent); display:grid; gap:.6rem; }
.badge{ display:inline-block; padding:.2rem .5rem; border-radius:999px; font-size:.8rem; border:1px solid var(--line); background: color-mix(in oklab, var(--surface) 92%, transparent); }
.plan-grid{ display:grid; gap:1rem; grid-template-columns: repeat(1,minmax(240px,1fr)); }
@media(min-width:760px){ .plan-grid{ grid-template-columns: repeat(2,minmax(240px,1fr)); } }
@media(min-width:1080px){ .plan-grid{ grid-template-columns: repeat(3,minmax(240px,1fr)); } }
.plan-card{ border:1px solid var(--line); border-radius:16px; padding:1rem; background: color-mix(in oklab, var(--surface) 94%, transparent); display:grid; gap:.8rem; }
.plan-card .title{ font-weight:800; font-size:1.1rem; display:flex; align-items:center; justify-content:space-between; }
.plan-card ul{ margin:0; padding-inline-start:1.1rem; }
.plan-card .price{ font-size:1.4rem; font-weight:800; }
.term-toggle,.kit{ display:flex; gap:.4rem; flex-wrap:wrap; }
.status-chip{ display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .55rem; border-radius:999px; font-size:.8rem; border:1px solid var(--line); }
.status-chip.ok{ color:#12b76a; border-color:#12b76a33; background:#12b76a1a; }
.status-chip.warn{ color:#f59e0b; border-color:#f59e0b33; background:#f59e0b1a; }
.status-chip.err{ color:#ef4444; border-color:#ef444433; background:#ef44441a; }
.tile{ border:1px solid var(--line); border-radius:14px; padding:1rem; background: color-mix(in oklab, var(--surface) 94%, transparent); display:grid; gap:.5rem; }
.tile.connected{ box-shadow: 0 0 0 1px #12b76a44 inset; }
.lang-switch .btn{ padding:.3rem .6rem; }