/* فاضي - تصميم تطبيق داكن */
:root {
  --bg: #060B16;
  --panel: rgba(14, 22, 41, .86);
  --panel-solid: #0E1629;
  --card: #152039;
  --card-2: #1B2847;
  --line: rgba(148, 163, 196, .14);
  --text: #EAF0FF;
  --muted: #8796B4;
  --accent: #22D3A6;
  --accent-2: #14B8A6;
  --accent-ink: #03140F;
  --low: #22C55E;
  --mid: #F59E0B;
  --high: #EF4444;
  --unk: #475569;
  --t-fuel: #F43F5E;
  --t-gas: #FB923C;
  --t-bakery: #FACC15;
  --t-bank: #38BDF8;
  --t-atm: #A78BFA;
  --shadow: 0 12px 32px rgba(0, 0, 0, .5);
  --glow: 0 0 0 1px rgba(34, 211, 166, .35), 0 10px 28px rgba(34, 211, 166, .28);
  --safe-t: env(safe-area-inset-top);
  --safe-b: env(safe-area-inset-bottom);
  --tabbar: calc(64px + var(--safe-b));
  --top: calc(104px + var(--safe-t));
  --ease: cubic-bezier(.2, .8, .2, 1);
  --glow-bg: #10324A;
  --attr-bg: rgba(6, 11, 22, .6);
  --pin-unk: #1E293B;
  --top-a: rgba(6, 11, 22, .96);
  --top-b: rgba(6, 11, 22, 0);
  --tab-bg: rgba(10, 16, 31, .94);
  --grab: rgba(148, 163, 196, .35);
  --scrim: rgba(2, 6, 15, .6);
  --toast-bg: #F2F6FF;
  --toast-ink: #0B1222;
  --ok-ink: #86EFAC;
  --mid-ink: #FCD34D;
  --bad-ink: #FCA5A5;
  --tiles: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.6);
  color-scheme: dark;
}

/* ===== وضع النهار ===== */
:root[data-theme="light"] {
  --bg: #EEF2F8;
  --panel: rgba(255, 255, 255, .9);
  --panel-solid: #FFFFFF;
  --card: #F3F6FB;
  --card-2: #E4EAF3;
  --line: rgba(15, 23, 42, .1);
  --text: #0B1426;
  --muted: #5B6B86;
  --accent: #10B981;
  --accent-2: #0D9488;
  --accent-ink: #FFFFFF;
  --unk: #94A3B8;
  --shadow: 0 10px 28px rgba(15, 23, 42, .12);
  --glow: 0 0 0 1px rgba(16, 185, 129, .3), 0 10px 24px rgba(16, 185, 129, .25);
  --glow-bg: #CFF5E9;
  --attr-bg: rgba(255, 255, 255, .7);
  --pin-unk: #FFFFFF;
  --top-a: rgba(238, 242, 248, .97);
  --top-b: rgba(238, 242, 248, 0);
  --tab-bg: rgba(255, 255, 255, .95);
  --grab: rgba(15, 23, 42, .18);
  --scrim: rgba(15, 23, 42, .35);
  --toast-bg: #0B1426;
  --toast-ink: #FFFFFF;
  --ok-ink: #15803D;
  --mid-ink: #B45309;
  --bad-ink: #B91C1C;
  --tiles: saturate(.85);
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
body.theming * { transition: background-color .3s, color .3s, border-color .3s !important; }
body {
  font-family: 'Tajawal', system-ui, sans-serif; background: var(--bg); color: var(--text);
  -webkit-font-smoothing: antialiased; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
input, textarea { -webkit-user-select: text; user-select: text; }
button, input, select { font-family: inherit; font-size: 16px; color: inherit; }
button { touch-action: manipulation; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.grow { flex: 1; min-width: 0; }
.press { transition: transform .12s var(--ease); }
.press:active, .btn:active, .tab:active, .chips button:active, .fab:active, .list-btn:active, .near-item:active { transform: scale(.96); }

/* ===== شاشة البداية ===== */
.splash {
  position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: radial-gradient(circle at 50% 40%, var(--glow-bg) 0%, var(--bg) 62%);
  transition: opacity .45s var(--ease), visibility .45s;
}
.splash.out { opacity: 0; visibility: hidden; }
.splash-logo { position: relative; width: 108px; height: 108px; margin-bottom: 14px; animation: pop .7s var(--ease) both; }
.splash-logo img { width: 100%; height: 100%; border-radius: 28px; box-shadow: 0 20px 50px rgba(34,211,166,.25); }
.splash-logo .ring { position: absolute; inset: -10px; border-radius: 36px; border: 2px solid rgba(34,211,166,.5); animation: ring 1.6s ease-out infinite; }
.splash b { font-size: 30px; font-weight: 800; animation: rise .6s .15s var(--ease) both; }
.splash small { color: var(--accent); animation: rise .6s .25s var(--ease) both; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rise { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ring { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }

/* ===== الخريطة ===== */
#map { position: fixed; inset: 0; z-index: 1; background: var(--bg); }
.leaflet-container { background: var(--bg); font-family: inherit; }
.dark-tiles { filter: var(--tiles); }
.leaflet-control-attribution { background: var(--attr-bg) !important; color: var(--muted) !important; font-size: 9px; margin-bottom: calc(var(--tabbar) + 2px) !important; }
.leaflet-control-attribution a { color: var(--muted) !important; }
.leaflet-control-zoom { display: none; }

.pin-wrap { position: relative; width: 40px; height: 40px; animation: drop .35s var(--ease) both; }
@keyframes drop { from { transform: translateY(-8px) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.pin {
  position: absolute; inset: 4px; display: grid; place-items: center; background: var(--pc); color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 6px 16px rgba(0,0,0,.5);
  transform: rotate(45deg); border-radius: 50% 50% 50% 4px;
}
.pin svg { width: 17px; height: 17px; transform: rotate(-45deg); stroke-width: 2.2; }
.pin-wrap.unknown .pin { background: var(--pin-unk); color: var(--tc); box-shadow: 0 0 0 2px var(--tc), 0 6px 16px rgba(0,0,0,.5); }
.pin-wrap.no .pin { filter: grayscale(.7); opacity: .8; }
.pin-wrap.high::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--high); animation: ping 1.6s ease-out infinite; }
@keyframes ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.pin-badge {
  position: absolute; top: -6px; left: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: #fff; color: #0B1222; font-size: 11px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.pin-fav { position: absolute; bottom: -4px; right: -4px; font-size: 13px; color: #FACC15; text-shadow: 0 1px 3px #000; }
.cluster {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff;
  background: radial-gradient(circle, var(--cc) 0 55%, transparent 56%);
  box-shadow: 0 0 0 6px rgba(100,116,139,.3), 0 8px 18px rgba(0,0,0,.5);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--cc) 30%, transparent), 0 8px 18px rgba(0,0,0,.5);
}
.me { width: 18px; height: 18px; border-radius: 50%; background: #3B82F6; border: 3px solid #fff; box-shadow: 0 0 0 8px rgba(59,130,246,.25); animation: me 2s infinite; }
@keyframes me { 50% { box-shadow: 0 0 0 14px rgba(59,130,246,.08); } }

/* ===== الشريط العلوي ===== */
.topbar {
  position: fixed; top: 0; inset-inline: 0; z-index: 1000; padding: calc(10px + var(--safe-t)) 14px 6px;
  background: linear-gradient(180deg, var(--top-a) 60%, var(--top-b));
}
.search {
  display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; border-radius: 16px;
  background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}
.search svg { color: var(--muted); flex: none; }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 16px; }
.search input::placeholder { color: var(--muted); }
.search input::-webkit-search-cancel-button { display: none; }
.live { display: flex; align-items: center; gap: 6px; padding: 6px 4px 0; }
.live small { color: var(--accent); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); flex: none; }
.icon-btn { position: relative; background: none; border: 0; color: var(--text); padding: 9px; border-radius: 12px; cursor: pointer; }
.icon-btn.sm { padding: 4px; }
.icon-btn:active { background: var(--card); }

.offline {
  position: fixed; z-index: 1500; top: calc(10px + var(--safe-t)); left: 50%; transform: translateX(-50%);
  background: var(--high); color: #fff; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700;
}

.chips {
  position: fixed; z-index: 999; inset-inline: 0; top: var(--top);
  display: flex; gap: 8px; padding: 2px 14px 8px; overflow-x: auto; scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chips button {
  flex: none; display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--text);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 7px 14px; border-radius: 999px; cursor: pointer; font-size: 14px;
  transition: background .2s, color .2s, transform .12s;
}
.chips button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; box-shadow: var(--glow); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); display: inline-block; }

.hint {
  position: fixed; z-index: 998; top: calc(var(--top) + 48px); left: 50%; transform: translateX(-50%);
  background: var(--panel); border: 1px solid var(--line); padding: 8px 14px; border-radius: 999px; font-size: 14px; backdrop-filter: blur(10px); white-space: nowrap;
}

/* نتائج البحث */
.results {
  position: fixed; z-index: 1002; top: calc(66px + var(--safe-t)); inset-inline: 14px; max-height: 55vh; overflow-y: auto;
  background: var(--panel-solid); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 6px;
  animation: rise .2s var(--ease);
}
.results .empty { padding: 16px; text-align: center; color: var(--muted); font-size: 14px; }

/* انت الان في */
.here {
  position: fixed; z-index: 998; inset-inline: 14px; top: calc(var(--top) + 46px);
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--panel); border: 1px solid rgba(34,211,166,.4);
  border-radius: 16px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow); animation: rise .3s var(--ease);
}
.here-text { flex: 1; min-width: 0; }
.here-text small { display: block; color: var(--muted); font-size: 11px; }
.here-text b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pulse-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: pulse 1.8s infinite; flex: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(34,211,166,.7); } 70% { box-shadow: 0 0 0 10px rgba(34,211,166,0); } 100% { box-shadow: 0 0 0 0 rgba(34,211,166,0); } }

.fabs { position: fixed; z-index: 998; left: 14px; bottom: calc(var(--tabbar) + 16px); display: flex; flex-direction: column; gap: 10px; }
.fab {
  width: 50px; height: 50px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); color: var(--accent);
  backdrop-filter: blur(10px); box-shadow: var(--shadow); display: grid; place-items: center; cursor: pointer; transition: transform .12s;
}

/* ===== الشريط السفلي ===== */
.tabbar {
  position: fixed; z-index: 1050; inset-inline: 0; bottom: 0; height: var(--tabbar); padding-bottom: var(--safe-b);
  display: grid; grid-template-columns: 1fr 1fr 76px 1fr 1fr; align-items: center;
  background: var(--tab-bg); border-top: 1px solid var(--line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.tab {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; justify-content: center;
  background: none; border: 0; color: var(--muted); font-size: 11px; font-weight: 700; cursor: pointer; transition: color .2s, transform .12s;
}
.tab svg { width: 23px; height: 23px; }
.tab.on { color: var(--accent); }
.tab.on::after { content: ''; position: absolute; top: 0; width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.tab .badge { position: absolute; top: 6px; left: calc(50% - 20px); }
.tab-ask {
  justify-self: center; width: 62px; height: 62px; margin-top: -26px; border-radius: 22px; border: 4px solid var(--bg);
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); display: grid; place-items: center;
  box-shadow: var(--glow); cursor: pointer; transition: transform .12s;
}
.tab-ask:active { transform: scale(.92); }
.tab-ask svg { width: 28px; height: 28px; stroke-width: 2.3; }
.badge {
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--high); color: #fff;
  font-size: 11px; font-weight: 800; font-style: normal; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg);
}

/* ===== القريب مني ===== */
.view {
  position: fixed; z-index: 1001; inset-inline: 0; top: calc(var(--top) + 44px); bottom: var(--tabbar);
  background: var(--bg); overflow-y: auto; padding: 4px 14px 20px; animation: fadein .22s var(--ease);
}
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.view-head { display: flex; align-items: center; justify-content: space-between; }
.view-head h2 { margin: 6px 0; font-size: 20px; }
.near-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: right; padding: 12px; margin-bottom: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; color: var(--text); cursor: pointer; transition: transform .12s;
}
.near-item .type-ico { width: 46px; height: 46px; }
.near-item b { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.near-item .sub-line { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--muted); }
.near-item .sub-line .ok { color: var(--low); }
.near-item .sub-line .bad { color: var(--bad-ink); }
.near-side { text-align: center; flex: none; min-width: 64px; }
.near-side .dist { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.crowd-chip { display: inline-block; padding: 4px 8px; border-radius: 8px; font-size: 11px; font-weight: 800; background: rgba(100,116,139,.18); background: color-mix(in srgb, var(--cc) 20%, transparent); color: var(--cc); }
.skeleton { height: 72px; border-radius: 18px; margin-bottom: 10px; background: linear-gradient(90deg, var(--card) 25%, var(--card-2) 50%, var(--card) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.empty-state { text-align: center; color: var(--muted); padding: 40px 16px; }

/* ===== البطاقات السفلية ===== */
.sheet, .ask {
  position: fixed; z-index: 1101; inset-inline: 0; bottom: 0; max-width: 560px; margin: 0 auto;
  background: var(--panel-solid); border: 1px solid var(--line); border-bottom: 0; border-radius: 26px 26px 0 0;
  box-shadow: 0 -12px 40px rgba(0,0,0,.55); padding: 10px 18px calc(18px + var(--safe-b));
  animation: up .28s var(--ease); max-height: 86vh; overflow-y: auto; touch-action: pan-y;
}
@keyframes up { from { transform: translateY(100%); } to { transform: none; } }
.grab { width: 44px; height: 5px; border-radius: 5px; background: var(--grab); margin: 0 auto 12px; cursor: grab; }
.sheet-head { display: flex; gap: 12px; align-items: center; }
.sheet h2 { margin: 0; font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet small { color: var(--muted); }
.type-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--tc, var(--card)); color: #fff; flex: none; }
.type-ico svg { width: 22px; height: 22px; }
.star.on svg { fill: #FACC15; stroke: #FACC15; }

.meter { margin: 16px 0 10px; }
.meter-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.meter-bar i { height: 8px; border-radius: 4px; background: var(--card); transition: background .4s; }
.meter[data-level="low"] i:nth-child(1) { background: var(--low); }
.meter[data-level="medium"] i:nth-child(-n+2) { background: var(--mid); }
.meter[data-level="high"] i { background: var(--high); }
.meter-label { display: flex; justify-content: space-between; margin-top: 8px; font-size: 14px; color: var(--muted); }
.meter-label b { color: var(--text); font-size: 15px; }

.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0; }
.stat { background: var(--card); border-radius: 14px; padding: 10px 12px; border: 1px solid var(--line); }
.stat span { display: block; font-size: 12px; color: var(--muted); }
.stat b { font-size: 17px; }
.row { display: flex; gap: 10px; margin-top: 10px; }
.row > * { flex: 1; }

.btn {
  display: inline-flex; justify-content: center; align-items: center; gap: 6px; padding: 13px 16px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--card); color: var(--text); text-decoration: none; cursor: pointer; font-weight: 700;
  transition: transform .12s, background .2s;
}
.btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); border-color: transparent; }
.btn.ghost { background: transparent; }
.btn.sm { padding: 7px 12px; font-size: 13px; border-radius: 10px; }
.btn.full { width: 100%; margin-top: 10px; }
.btn.big { padding: 16px; font-size: 18px; }
.btn:disabled { opacity: .5; }

.ask p { font-size: 18px; font-weight: 800; margin: 4px 0 14px; text-align: center; }
.ask-btns { display: flex; flex-direction: column; gap: 8px; }
.ask-btns.grid { display: grid; grid-template-columns: 1fr 1fr; }
.ask-btns .wide { grid-column: 1 / -1; }
.ans-low { background: rgba(34,197,94,.15) !important; border-color: var(--low) !important; color: var(--ok-ink) !important; }
.ans-high { background: rgba(245,158,11,.15) !important; border-color: var(--mid) !important; color: var(--mid-ink) !important; }
.ans-no { background: rgba(239,68,68,.15) !important; border-color: var(--high) !important; color: var(--bad-ink) !important; }

/* المنتجات */
.products { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.prod { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-weight: 700; font-size: 14px; }
.prod i { font-style: normal; font-size: 12px; color: var(--muted); }
.prod.yes { border-color: var(--low); background: rgba(34,197,94,.12); }
.prod.yes i { color: var(--low); }
.prod.no { border-color: var(--high); background: rgba(239,68,68,.12); color: var(--bad-ink); }
.prod.no i { color: var(--high); }
.prod-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.prod-row span { font-weight: 700; font-size: 16px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* ===== اللوحات ===== */
.panel {
  position: fixed; inset: 0; z-index: 1100; background: var(--scrim); display: flex; align-items: flex-end; justify-content: center;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fade .2s;
}
@keyframes fade { from { opacity: 0; } }
.panel-card {
  width: 100%; max-width: 560px; background: var(--panel-solid); border: 1px solid var(--line); border-bottom: 0;
  border-radius: 26px 26px 0 0; padding: 10px 18px calc(20px + var(--safe-b)); max-height: 88vh; overflow-y: auto; animation: up .28s var(--ease);
}
.panel-card h2 { margin: 0 0 8px; }
.panel-card h3.sub { margin: 20px 0 6px; font-size: 13px; color: var(--muted); font-weight: 700; }
.panel-card label { display: block; margin-bottom: 12px; font-size: 14px; color: var(--muted); }
.panel-card select, .panel-card input:not([type=checkbox]) {
  display: block; width: 100%; margin-top: 6px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--text);
}
.switch-row { display: flex !important; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--text) !important; font-size: 16px !important; margin: 0 !important; }
.switch-row small { display: block; color: var(--muted); font-size: 12px; }
.toggle { appearance: none; -webkit-appearance: none; width: 48px; height: 28px; border-radius: 14px; background: var(--card-2); position: relative; cursor: pointer; transition: background .2s; flex: none; margin: 0; }
.toggle::after { content: ''; position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: right .2s var(--ease); }
.toggle:checked { background: var(--accent); }
.toggle:checked::after { right: 23px; }

.me-card { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--card); border-radius: 18px; border: 1px solid var(--line); }
.me-card img { width: 48px; height: 48px; border-radius: 14px; }
.me-card b { display: block; font-size: 18px; }
.list-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; margin-top: 10px; text-align: right; text-decoration: none;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; color: var(--text); cursor: pointer; font-weight: 700; transition: transform .12s;
}
.list-btn small { display: block; color: var(--muted); font-weight: 400; font-size: 12px; margin-top: 2px; }
.lb-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(34,211,166,.12); color: var(--accent); flex: none; }
.legend-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.legend-list span { display: flex; align-items: center; gap: 8px; padding: 10px; background: var(--card); border-radius: 12px; font-size: 14px; }
.legend-list i { width: 12px; height: 12px; border-radius: 50%; }

.ask-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 4px; }
.ask-type {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 8px; border-radius: 20px;
  border: 1px solid var(--line); background: var(--card); color: var(--text); font-weight: 700; cursor: pointer; transition: transform .12s;
}
.ask-type:active { transform: scale(.96); }

.item { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px; margin-bottom: 10px; }
.item p { margin: 0 0 8px; font-weight: 700; }
.item .ans { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; cursor: pointer; }
.item .ans:first-of-type { border-top: 0; }
.item .wait { font-size: 13px; color: var(--muted); }
.reply { display: block; font-size: 13px; color: var(--text); }

/* ===== الترحيب والبوابات ===== */
.onboard, .gate {
  position: fixed; inset: 0; z-index: 1300; background: radial-gradient(circle at 50% 0%, var(--glow-bg) 0%, var(--bg) 60%);
  display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto;
}
.onboard-card, .gate-card { width: 100%; max-width: 420px; text-align: center; padding: 24px 18px; animation: rise .5s var(--ease); }
.onboard-logo, .gate-logo { width: 92px; height: 92px; border-radius: 24px; box-shadow: 0 0 0 1px var(--line), 0 16px 40px rgba(34,211,166,.18); }
.onboard h1, .gate h1 { margin: 14px 0 4px; font-size: 28px; font-weight: 800; }
.lead { color: var(--accent); margin: 0 0 20px; }
.promise { list-style: none; padding: 0; margin: 0 0 20px; text-align: right; }
.promise li { padding: 11px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 8px; }
.promise li::before { content: '✓'; color: var(--accent); font-weight: 800; margin-inline-end: 8px; }
.step-title { font-weight: 800; margin: 0 0 4px; }
.steps { text-align: right; padding-inline-start: 22px; line-height: 2; margin: 18px 0; }
.inline-ico { width: 18px; height: 18px; vertical-align: middle; color: #60A5FA; }
.note { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.arrow-down { font-size: 40px; color: var(--accent); animation: bounce 1.2s infinite; }
@keyframes bounce { 50% { transform: translateY(8px); } }
.qr { display: inline-block; background: #fff; padding: 12px; border-radius: 16px; margin: 12px 0; }
.big-ico { width: 84px; height: 84px; margin: 0 auto; border-radius: 26px; background: var(--card); display: grid; place-items: center; color: var(--accent); }
.big-ico svg { width: 40px; height: 40px; }
.steps-box { text-align: right; margin-top: 16px; font-size: 14px; color: var(--muted); line-height: 1.9; }

.toast {
  position: fixed; z-index: 1400; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar) + 20px); max-width: 92vw; text-align: center;
  background: var(--toast-bg); color: var(--toast-ink); padding: 12px 18px; border-radius: 16px; font-size: 14px; font-weight: 700; box-shadow: var(--shadow);
  animation: toast .3s var(--ease);
}
@keyframes toast { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* زر الليل والنهار */
.theme-btn { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); color: var(--text); cursor: pointer; }
.theme-btn svg { width: 19px; height: 19px; }
.theme-btn .sun { display: none; }
:root[data-theme="light"] .theme-btn .sun { display: block; }
:root[data-theme="light"] .theme-btn .moon { display: none; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: var(--card); border-radius: 12px; border: 1px solid var(--line); }
.seg button { padding: 8px 4px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 700; font-size: 13px; cursor: pointer; }
.seg button.on { background: var(--panel-solid); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.15); }

.form-cap { margin-top: 10px; font-size: 13px; color: var(--muted); text-align: center; }