/* WEKKEL | وكّل — واجهة الويب. نفس هوية التطبيق (AppTheme): نيلي/بنفسجي، بطاقات ناعمة، زوايا 16. */
:root {
  --primary: #4F3CE0;
  --primary-dark: #2A1F8F;
  --primary-soft: #EDEBFF;
  --on-primary-soft: #2A1F8F;
  --violet: #7C5CFF;
  --accent: #FF4D8D;
  --success: #22C55E;
  --danger: #EF4444;
  --warning: #F59E0B;
  --bg: #F6F7FB;
  --card: #FFFFFF;
  --text: #14142B;
  --text-2: #6E7191;
  --divider: #EDEEF4;
  --field: #F4F5FA;
  --hover: #F1F2F8;
  --shadow: 0 6px 18px rgba(79, 60, 224, .06);
  --shadow-lg: 0 18px 50px rgba(20, 20, 43, .18);
  --brand: linear-gradient(135deg, var(--violet), var(--primary));
  --story: linear-gradient(225deg, #FF8A3D, var(--accent), var(--violet));
  --r: 16px;
  --r-sm: 10px;
  --topbar: 60px;
  --bottomnav: 62px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --primary-soft: #2B2466;
  --on-primary-soft: #D9D4FF;
  --bg: #0E0E16;
  --card: #191926;
  --text: #F2F2F8;
  --text-2: #A0A3BD;
  --divider: #2A2A3A;
  --field: #232333;
  --hover: #232333;
  --shadow: none;
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
img, video { max-width: 100%; display: block; }
textarea { resize: vertical; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hidden { display: none !important; }
.muted { color: var(--text-2); }
.small { font-size: 12.5px; }
.bold { font-weight: 700; }
.row { display: flex; align-items: center; gap: 10px; }
.col { display: flex; flex-direction: column; gap: 10px; }
.grow { flex: 1; min-width: 0; }
.wrap { flex-wrap: wrap; }
.center { display: flex; align-items: center; justify-content: center; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pre { white-space: pre-wrap; word-break: break-word; }
.ico { width: 22px; height: 22px; fill: currentColor; flex: none; }
.ico.s { width: 18px; height: 18px; }
.ico.xs { width: 14px; height: 14px; }
.ico.l { width: 26px; height: 26px; }
[dir="rtl"] .flip { transform: scaleX(-1); }

/* ─── Boot / spinner ─────────────────────────────────────────────── */
.boot { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.boot img { border-radius: 16px; }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--primary-soft); border-top-color: var(--primary); animation: spin .8s linear infinite; }
.spinner.s { width: 18px; height: 18px; border-width: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-more { padding: 18px; display: flex; justify-content: center; }

/* ─── Buttons / fields ───────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: var(--r-sm); font-weight: 700; transition: filter .15s, background .15s; white-space: nowrap; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.btn-brand { background: var(--brand); color: #fff; }
.btn-outline { border: 1.5px solid var(--primary); color: var(--primary); }
.btn-outline:hover { background: var(--primary-soft); }
.btn-soft { background: var(--field); color: var(--text); }
.btn-soft:hover { background: var(--divider); }
.btn-tonal { background: var(--primary-soft); color: var(--on-primary-soft); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-text { color: var(--primary); padding: 0 10px; min-height: 36px; }
.btn-sm { min-height: 34px; padding: 0 12px; font-size: 13.5px; border-radius: 9px; }
.btn-block { width: 100%; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--text); transition: background .15s; position: relative; flex: none; }
.icon-btn:hover { background: var(--hover); }
.icon-btn.filled { background: var(--field); }
.icon-btn.filled:hover { background: var(--divider); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 13px; font-weight: 600; color: var(--text-2); }
.input, .textarea, .select {
  width: 100%; border: 1px solid transparent; background: var(--field); border-radius: var(--r-sm);
  padding: 11px 14px; outline: none; transition: border-color .15s;
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--primary); }
.textarea { min-height: 90px; }
.check { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.check input { width: 18px; height: 18px; accent-color: var(--primary); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--divider); background: var(--card); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.chip.active { background: var(--primary-soft); color: var(--on-primary-soft); border-color: transparent; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.chips::-webkit-scrollbar { display: none; }
.badge { position: absolute; top: 2px; inset-inline-end: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; border: 2px solid var(--card); }
.dot-online { width: 12px; height: 12px; border-radius: 50%; background: var(--success); border: 2px solid var(--card); position: absolute; bottom: 0; inset-inline-end: 0; }

/* ─── Card ───────────────────────────────────────────────────────── */
.card { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); }
.card-pad { padding: 14px 16px; }
.card + .card { margin-top: 10px; }
.section-title { font-weight: 800; font-size: 16px; margin: 0; }
.divider { height: 1px; background: var(--divider); margin: 0; border: 0; }

/* ─── Avatar ─────────────────────────────────────────────────────── */
.avatar { position: relative; flex: none; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; overflow: visible; }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar .ico { width: 58%; height: 58%; }
.avatar.ring { padding: 2.5px; background: var(--story); }
.avatar.ring img { border: 2.5px solid var(--card); }
.avatar.square, .avatar.square img { border-radius: 12px; }
.verified { color: var(--primary); display: inline-flex; vertical-align: middle; }

/* ─── Logo ───────────────────────────────────────────────────────── */
.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; font-size: 25px; letter-spacing: -.5px; }
.logo img { width: 36px; height: 36px; border-radius: 9px; }
.logo span { background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; direction: ltr; }

/* ─── Shell layout ───────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 40; height: var(--topbar); background: var(--card);
  border-bottom: 1px solid var(--divider); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 12px; gap: 8px;
}
.topbar .start, .topbar .end { display: flex; align-items: center; gap: 6px; min-width: 0; }
.topbar .end { justify-content: flex-end; }
.topbar .mid { display: flex; align-items: stretch; height: 100%; gap: 4px; }
.top-tab { display: flex; align-items: center; justify-content: center; width: 96px; color: var(--text-2); border-bottom: 3px solid transparent; position: relative; border-radius: 10px 10px 0 0; }
.top-tab:hover { background: var(--hover); }
.top-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.top-tab .badge { top: 8px; inset-inline-end: 22px; }
.top-search { position: relative; flex: 1; max-width: 260px; }
.top-search input { width: 100%; border: 0; background: var(--field); border-radius: 999px; padding: 9px 40px 9px 14px; outline: none; }
[dir="rtl"] .top-search input { padding: 9px 14px 9px 40px; }
.top-search .ico { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-end: 12px; color: var(--text-2); }
.top-avatar { border-radius: 50%; padding: 2px; }
.top-avatar:hover { background: var(--hover); }

.layout { display: grid; grid-template-columns: minmax(220px, 290px) minmax(0, 1fr) minmax(260px, 320px); gap: 24px; max-width: none; margin: 0; padding: 0 12px; }
.side { position: sticky; top: var(--topbar); height: calc(100vh - var(--topbar)); overflow-y: auto; padding: 14px 0 24px; scrollbar-width: thin; }
.side::-webkit-scrollbar { width: 6px; }
.side::-webkit-scrollbar-thumb { background: var(--divider); border-radius: 3px; }
.main { min-width: 0; padding: 14px 0 40px; }
.main-narrow { max-width: 640px; margin: 0 auto; width: 100%; }
.main-wide { max-width: 940px; margin: 0 auto; width: 100%; }

.nav-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; font-weight: 600; font-size: 14px; line-height: 1.35; transition: background .12s, color .12s; width: 100%; text-align: start; position: relative; color: var(--text); }
.nav-item:hover { background: var(--hover); }
.nav-item.active { background: var(--primary-soft); color: var(--on-primary-soft); font-weight: 700; }
.nav-item.active::before { content: ''; position: absolute; inset-inline-start: -8px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--primary); }
.nav-item .tile { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: none; }
.nav-item .tile .ico { width: 17px; height: 17px; }
.nav-item .label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* وصف قصير تحت اسم القسم (نفس نصوص التطبيق) */
.nav-item .label .nav-desc { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 500; line-height: 1.3; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item.active .label .nav-desc { color: inherit; opacity: .75; }
.nav-item .count { margin-inline-start: auto; background: var(--danger); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 7px; min-width: 20px; text-align: center; line-height: 16px; }
.nav-item .sub { display: block; font-size: 11.5px; color: var(--text-2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item .ext { margin-inline-start: auto; color: var(--text-2); display: flex; opacity: .7; }
.nav-group { display: flex; flex-direction: column; gap: 1px; }
.side-heading { font-size: 12px; font-weight: 700; color: var(--text-2); padding: 14px 8px 6px; display: flex; justify-content: space-between; align-items: center; letter-spacing: .2px; }
.side-heading a, .side-heading .btn-text { font-size: 12px; min-height: 0; padding: 0; }
/* مجموعات القائمة الجانبية القابلة للطي */
.nav-fold-head { width: 100%; background: none; border: 0; cursor: pointer; border-radius: 10px; font-family: inherit; text-align: start; }
.nav-fold-head:hover { background: var(--field); }
.nav-fold-title { display: inline-flex; align-items: center; gap: 8px; }
.nav-fold-chev { display: inline-flex; transition: transform .15s; transform: rotate(90deg); }
.nav-fold.open .nav-fold-chev { transform: rotate(-90deg); }
.nav-fold-body { display: none; }
.nav-fold.open .nav-fold-body { display: flex; }
.side-foot { font-size: 11.5px; color: var(--text-2); padding: 12px 8px; line-height: 1.8; }
.join-card { padding: 14px; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--violet) 14%, var(--card)), var(--card)); border: 1px solid var(--divider); margin-bottom: 8px; }
.join-card b { display: block; font-size: 15px; margin-bottom: 2px; }
.join-card p { margin: 0 0 10px; font-size: 12.5px; color: var(--text-2); }

/* ─── Widgets (العمود الأيمن) ───────────────────────────────────────── */
.widget { background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: 12px; }
.widget + .widget { margin-top: 12px; }
.widget-head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 8px; }
.widget-head h4 { margin: 0; font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.widget-head a { font-size: 12px; color: var(--primary); font-weight: 700; }
.widget .mini { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 10px; }
.widget .mini:hover { background: var(--hover); }
.widget .mini .t { font-weight: 700; font-size: 13.5px; line-height: 1.3; }
.widget .mini .s { font-size: 11.5px; color: var(--text-2); }
.widget .mini .btn-sm { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
.sponsored { font-size: 11px; color: var(--text-2); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.ad-card { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--divider); background: var(--card); transition: box-shadow .15s, transform .15s; }
.ad-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.ad-card + .ad-card { margin-top: 10px; }
.ad-card .img { aspect-ratio: 1.91 / 1; background: var(--field); }
.ad-card .img img { width: 100%; height: 100%; object-fit: cover; }
.ad-card .bd { padding: 10px 12px 12px; }
.ad-card .bd b { display: block; font-size: 14px; line-height: 1.35; }
.ad-card .bd p { margin: 3px 0 8px; font-size: 12.5px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ad-card .bd .row { justify-content: space-between; }
.ad-card .cta { background: var(--primary-soft); color: var(--on-primary-soft); font-weight: 700; font-size: 12.5px; padding: 5px 12px; border-radius: 8px; white-space: nowrap; }
.post.ad-post .ad-media { aspect-ratio: 1.91 / 1; background: var(--field); }
.post.ad-post .ad-media img { width: 100%; height: 100%; object-fit: cover; }
.post.ad-post .ad-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px 12px; background: var(--field); }
.post.ad-post .ad-foot b { font-size: 14.5px; }
.promo-card { border-radius: 14px; padding: 14px; color: #fff; background: var(--brand); position: relative; overflow: hidden; }
.promo-card::after { content: ''; position: absolute; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.1); inset-inline-end: -40px; top: -50px; }
.promo-card b { font-size: 15px; display: block; position: relative; }
.promo-card p { margin: 4px 0 10px; font-size: 12.5px; opacity: .9; position: relative; }
.promo-card .btn { background: #fff; color: var(--primary-dark); min-height: 34px; font-size: 13px; position: relative; }
.announce { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; margin-bottom: 10px; font-weight: 600; font-size: 14px; }
.announce .ico { flex: none; }
.announce a { margin-inline-start: auto; font-weight: 800; white-space: nowrap; }
.announce.info { background: #E0F2FE; color: #075985; }
.announce.success { background: #DCFCE7; color: #166534; }
.announce.warning { background: #FEF3C7; color: #92400E; }
.announce.promo { background: var(--primary-soft); color: var(--on-primary-soft); }
:root[data-theme="dark"] .announce.info { background: #0C4A6E; color: #E0F2FE; }
:root[data-theme="dark"] .announce.success { background: #14532D; color: #DCFCE7; }
:root[data-theme="dark"] .announce.warning { background: #78350F; color: #FEF3C7; }
.side-foot a:hover { text-decoration: underline; }

.bottomnav { display: none; }
.fab {
  position: fixed; z-index: 45; inset-inline-end: 18px; bottom: calc(var(--bottomnav) + 16px + var(--safe-b));
  width: 56px; height: 56px; border-radius: 50%; background: var(--brand); color: #fff; display: none; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(79, 60, 224, .38);
}
.fab .badge { border-color: var(--primary); }

/* Drawer (mobile) */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(10, 10, 20, .45); z-index: 80; opacity: 0; pointer-events: none; transition: opacity .2s; }
.drawer { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: min(320px, 86vw); background: var(--card); z-index: 81; transform: translateX(-105%); transition: transform .25s ease; overflow-y: auto; padding: 12px 10px 30px; }
[dir="rtl"] .drawer { transform: translateX(105%); }
body.drawer-open .drawer { transform: none; }
body.drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; }

/* Full-bleed views (shorts, chat) */
body[data-view="shorts"] .layout, body[data-view="chat"] .layout { grid-template-columns: minmax(0, 1fr); max-width: none; padding: 0; }
body[data-view="shorts"] .side, body[data-view="chat"] .side { display: none; }
body[data-view="shorts"] .main, body[data-view="chat"] .main { padding: 0; }
body[data-view="auth"] .topbar, body[data-view="auth"] .side, body[data-view="auth"] .bottomnav, body[data-view="auth"] .fab { display: none !important; }
body[data-view="auth"] .layout { grid-template-columns: minmax(0, 1fr); padding: 0; max-width: none; }
body[data-view="auth"] .main { padding: 0; }

/* Tablet: بلا العمود الأيمن */
@media (max-width: 1240px) {
  .layout { grid-template-columns: 240px minmax(0, 1fr); justify-content: stretch; }
  .side-right { display: none; }
}
/* Small tablet: أيقونات فقط في العمود الجانبي */
@media (max-width: 1000px) {
  .layout { grid-template-columns: 76px minmax(0, 1fr); gap: 16px; }
  .side-left .nav-item { justify-content: center; padding: 8px 0; }
  .side-left .nav-item .label, .side-left .side-heading, .side-left .side-foot, .side-left .nav-item .count, .side-left .me-card .label { display: none; }
  /* أيقونات فقط: لا عناوين تُطوى، فكل عناصر المجموعات ظاهرة */
  .side-left .nav-fold-body { display: flex; }
  .top-tab { width: 72px; }
  .top-search { max-width: 200px; }
  /* الزائر: بطاقة «انضم» لا تتّسع لعمود 76px (كلمة في كل سطر) — الرأس فيه «إنشاء حساب» أصلاً */
  .side-left .join-card { display: none; }
  /* «إنشاء حساب» لا يُقصّ في الرأس المزدحم؛ «دخول» متاح من صفحة التسجيل */
  .topbar .btn-join { flex: none; white-space: nowrap; }
  .topbar .end .btn-outline.desk-only { display: none; }
}
/* Mobile: مثل التطبيق — شريط علوي + شريط سفلي + زر الدردشة العائم */
@media (max-width: 760px) {
  :root { --topbar: 56px; }
  body { font-size: 14.5px; }
  .layout { grid-template-columns: minmax(0, 1fr); padding: 0; gap: 0; }
  .side { display: none; }
  .main { padding: 8px 0 calc(var(--bottomnav) + 90px + var(--safe-b)); }
  .main-narrow, .main-wide { padding: 0 8px; }
  .topbar { grid-template-columns: auto 1fr auto; padding: 0 6px; }
  .topbar .mid, .top-search, .topbar .desk-only { display: none !important; }
  .topbar .mob-only { display: inline-flex !important; }
  .logo { font-size: 23px; }
  .logo img { width: 32px; height: 32px; }
  .bottomnav {
    /* عدد التبويبات متغيّر (السوق قابل للإطفاء من اللوحة) */
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; z-index: 44; bottom: 0; left: 0; right: 0;
    height: calc(var(--bottomnav) + var(--safe-b)); padding-bottom: var(--safe-b); background: var(--card); border-top: 1px solid var(--divider);
  }
  .bottomnav a { display: flex; align-items: center; justify-content: center; color: var(--text-2); position: relative; }
  .bottomnav a .pill { width: min(60px, calc(100% - 4px)); height: 34px; border-radius: 17px; display: flex; align-items: center; justify-content: center; position: relative; }
  .bottomnav a.active { color: var(--primary); }
  .bottomnav a.active .pill { background: var(--primary-soft); }
  .bottomnav .badge { top: -2px; inset-inline-end: 8px; }
  .fab { display: flex; }
  body[data-view="shorts"] .fab, body[data-view="chat"] .fab, body[data-view="welcome"] .fab { display: none; }
  body[data-view="shorts"] .bottomnav { background: #000; border-top-color: #222; }
  body[data-view="shorts"] .bottomnav a { color: rgba(255,255,255,.7); }
  body[data-view="shorts"] .bottomnav a.active .pill { background: rgba(255,255,255,.18); color: #fff; }
  body[data-view="shorts"] .topbar, body.chat-open .bottomnav, body.chat-open .topbar, body.chat-open .fab { display: none !important; }
  body[data-view="chat"] .main { padding-bottom: 0; }
  .card { border-radius: 14px; }
}
.mob-only { display: none !important; }
.chat-back { display: none; }
@media (max-width: 760px) { .chat-back { display: inline-flex; } }

/* ─── Composer ───────────────────────────────────────────────────── */
.composer { padding: 12px 14px 6px; margin-bottom: 10px; }
.composer .fake-input { flex: 1; text-align: start; border: 1px solid var(--divider); border-radius: 24px; padding: 10px 16px; color: var(--text-2); transition: background .15s; }
.composer .fake-input:hover { background: var(--hover); }
.composer-actions { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 6px; }
.composer-actions button { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 4px; border-radius: 10px; font-weight: 600; font-size: 13.5px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer-actions button:hover { background: var(--hover); }

/* ─── Tabs ───────────────────────────────────────────────────────── */
.tabs { display: flex; border-bottom: 1px solid var(--divider); background: var(--card); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 16px; font-weight: 600; color: var(--text-2); border-bottom: 3px solid transparent; white-space: nowrap; }
.tabs button.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 800; }
.tabs.card { border-radius: var(--r); margin-bottom: 10px; border-bottom: 0; }
.feed-tabs { position: sticky; top: var(--topbar); z-index: 10; }

/* ─── Stories ────────────────────────────────────────────────────── */
.stories { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: none; scroll-behavior: smooth; }
.stories::-webkit-scrollbar { display: none; }
.story-card { flex: none; width: 112px; height: 186px; border-radius: 14px; position: relative; overflow: hidden; background: var(--field); box-shadow: var(--shadow); cursor: pointer; }
.story-card .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.story-card:hover .bg { transform: scale(1.04); }
.story-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.25), transparent 35%, transparent 60%, rgba(0,0,0,.6)); }
.story-card .who { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 2; }
.story-card .name { position: absolute; bottom: 8px; inset-inline: 8px; z-index: 2; color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.story-card .text-bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 10px; color: #fff; font-weight: 700; font-size: 13px; text-align: center; }
.story-card.add { background: var(--card); }
.story-card.add .bg { height: 70%; }
.story-card.add::after { display: none; }
.story-card.add .plus { position: absolute; top: calc(70% - 18px); left: 50%; transform: translateX(-50%); width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: #fff; border: 3px solid var(--card); display: flex; align-items: center; justify-content: center; z-index: 2; }
.story-card.add .name { color: var(--text); text-align: center; bottom: 10px; -webkit-line-clamp: 1; }
.story-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* الحلقة فوق صورة: بلون العلامة = لم تُشاهَد، وباهتة = شوهدت — بفاصل أبيض في الوضعين الفاتح والداكن */
.story-card .who .avatar.ring { background: var(--brand); }
.story-card .who .avatar.ring img { border-color: #fff; }
.story-card.seen .who .avatar.ring { background: rgba(255, 255, 255, .45); }

/* ─── Post card ──────────────────────────────────────────────────── */
.post { margin-bottom: 10px; overflow: hidden; }
.post-head { display: flex; gap: 10px; padding: 12px 8px 8px 14px; align-items: flex-start; }
[dir="rtl"] .post-head { padding: 12px 14px 8px 8px; }
.post-head .names { font-weight: 700; font-size: 15px; line-height: 1.35; }
.post-head .names a:hover { text-decoration: underline; }
.post-head .names .feeling { font-weight: 500; color: var(--text-2); font-size: 13.5px; }
.post-head .meta { display: flex; align-items: center; gap: 4px; color: var(--text-2); font-size: 12.5px; flex-wrap: wrap; }
.post-head .meta a:hover { text-decoration: underline; }
.post-text { padding: 0 16px 10px; font-size: 15px; white-space: pre-wrap; word-break: break-word; }
.post-text.big { font-size: 20px; font-weight: 600; }
.post-text a.tag, .post-text a.mention, .linkish { color: var(--primary); font-weight: 600; }
.post-text a.url { color: var(--primary); text-decoration: underline; word-break: break-all; }
.post-text .more { color: var(--text-2); font-weight: 700; }
.post-bg { margin: 0 0 10px; min-height: 240px; padding: 30px 24px; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; font-size: 24px; font-weight: 800; white-space: pre-wrap; word-break: break-word; }
.post-shared { margin: 0 12px 10px; border: 1px solid var(--divider); border-radius: 14px; overflow: hidden; }
.post-shared .post-head { padding-inline: 12px; }
.post-stats { display: flex; align-items: center; gap: 8px; padding: 6px 16px 8px; color: var(--text-2); font-size: 13.5px; }
.post-stats .rx { display: inline-flex; align-items: center; cursor: pointer; }
.post-stats .rx .e { width: 22px; height: 22px; border-radius: 50%; background: var(--card); border: 2px solid var(--card); font-size: 13px; display: inline-flex; align-items: center; justify-content: center; margin-inline-start: -6px; }
.post-stats .rx .e:first-child { margin-inline-start: 0; }
.post-stats .rx span.n { margin-inline-start: 6px; }
.post-stats .rx:hover span.n, .post-stats .lnk:hover { text-decoration: underline; cursor: pointer; }
.post-actions { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); padding: 4px 8px; border-top: 1px solid var(--divider); margin: 0 8px; }
.post-actions > button, .post-actions > .rx-wrap > button { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 4px; border-radius: 10px; font-weight: 600; color: var(--text-2); font-size: 14px; width: 100%; }
.post-actions > button:hover, .post-actions > .rx-wrap > button:hover { background: var(--hover); }
.post-actions .rx-wrap { position: relative; }
.post-actions .on { color: var(--primary); }
.post-actions .emoji { font-size: 18px; line-height: 1; }

/* Reaction picker */
.rx-picker { position: absolute; bottom: calc(100% + 6px); inset-inline-start: 0; background: var(--card); border-radius: 40px; box-shadow: var(--shadow-lg); padding: 6px 8px; display: flex; gap: 2px; z-index: 30; animation: pop .16s cubic-bezier(.34, 1.56, .64, 1); }
.rx-picker button { width: 42px; height: 42px; font-size: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: transform .12s; position: relative; }
.rx-picker button:hover { transform: scale(1.3) translateY(-4px); }
.rx-picker button[data-tip]:hover::after { content: attr(data-tip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 8px; white-space: nowrap; }
.rx-picker .sep { width: 1px; background: var(--divider); margin: 6px 4px; }
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }

/* Media grid */
.media-grid { display: grid; gap: 3px; background: var(--card); }
.media-grid .m { position: relative; overflow: hidden; background: #0b0b12; cursor: pointer; min-height: 0; }
.media-grid .m img, .media-grid .m video { width: 100%; height: 100%; object-fit: cover; }
.media-grid.n1 .m { max-height: 640px; }
.media-grid.n1 .m img, .media-grid.n1 .m video { object-fit: contain; max-height: 640px; margin: 0 auto; width: auto; max-width: 100%; }
.media-grid.n1 .m.single-img img { width: 100%; object-fit: cover; }
.media-grid.n2 { grid-template-columns: 1fr 1fr; aspect-ratio: 2 / 1.1; }
.media-grid.n3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 1 / .9; }
.media-grid.n3 .m:first-child { grid-row: span 2; }
.media-grid.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 1; }
.media-grid .m .more { position: absolute; inset: 0; background: rgba(0,0,0,.5); color: #fff; font-size: 30px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.media-grid .m .play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.media-grid .m .play i { width: 58px; height: 58px; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; display: flex; align-items: center; justify-content: center; }
.media-grid .m .dur { position: absolute; bottom: 8px; inset-inline-end: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; padding: 1px 7px; border-radius: 6px; }

/* Skeleton */
.skel { background: linear-gradient(90deg, var(--field) 25%, var(--hover) 50%, var(--field) 75%); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: 8px; }
@keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* الصور: هيكل متحرّك حتى تصل الصورة، وصورة افتراضية إن تعذّر جلبها */
img.wk-img:not(.is-loaded):not(.is-broken) { background: linear-gradient(90deg, var(--field) 25%, var(--divider) 50%, var(--field) 75%); background-size: 200% 100%; animation: sk 1.2s infinite; }
img.wk-img.is-broken { background: var(--field); object-fit: none !important; object-position: center !important; min-width: 40px; min-height: 40px; }

/* Empty state */
.empty { padding: 48px 20px; text-align: center; color: var(--text-2); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.empty .em-ico { width: 74px; height: 74px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.empty .em-ico .ico { width: 36px; height: 36px; }
.empty p { margin: 0; max-width: 360px; }

/* ─── Lists ──────────────────────────────────────────────────────── */
.list-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; transition: background .12s; }
a.list-item:hover, button.list-item:hover, .list-item.clickable:hover { background: var(--hover); cursor: pointer; }
.list-item .t { font-weight: 700; }
.list-item .s { color: var(--text-2); font-size: 13px; }
button.list-item { width: 100%; text-align: start; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.user-card { overflow: hidden; display: flex; flex-direction: column; }
.user-card .cover { aspect-ratio: 1; background: var(--primary-soft); display: flex; align-items: center; justify-content: center; color: var(--primary); }
.user-card .cover img { width: 100%; height: 100%; object-fit: cover; }
.user-card .body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.user-card .body .t { font-weight: 800; }
@media (max-width: 760px) { .grid-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

/* ─── Profile ────────────────────────────────────────────────────── */
.profile-head { overflow: hidden; margin-bottom: 10px; }
/* نفس نسبة القص عند الرفع (1500×508): كان الإطار 1.6:1 على الجوال فيظهر نصف عرض الصورة فقط */
.profile-cover, .entity-cover { aspect-ratio: 1500 / 508; min-height: 140px; width: 100%; background: var(--brand); position: relative; overflow: hidden; }
.cover-blur { position: absolute; inset: -24px; background: center / cover no-repeat; filter: blur(18px) brightness(.85); }
.cover-img, .user-card .cover img.cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.user-card .cover { position: relative; overflow: hidden; }
/* غلاف افتراضي: مرسوم بالكود، ويختفي برفع صورة */
.cover-default, .user-card .cover.cover-default { position: relative; isolation: isolate; overflow: hidden; background: var(--brand); color: #fff; }
.cover-default::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 10% 15%, rgba(255,255,255,.16) 0 18%, transparent 18.5%), radial-gradient(circle at 90% 90%, rgba(255,255,255,.11) 0 28%, transparent 28.5%); }
.cover-default::after { content: 'وكّل'; direction: rtl; position: absolute; inset: 0; z-index: -1; pointer-events: none; display: grid; place-items: center; overflow: hidden;
  font-size: clamp(72px, 13vw, 170px); line-height: 1; font-weight: 900; color: rgba(255,255,255,.16); }
.user-card .cover-default::after, .edit-cover.cover-default::after, .pc-pv-empty.cover-default::after { font-size: 56px; }
:root[data-theme="dark"] .cover-default::before { background: linear-gradient(rgba(0,0,0,.24), rgba(0,0,0,.24)), radial-gradient(circle at 10% 15%, rgba(255,255,255,.1) 0 18%, transparent 18.5%), radial-gradient(circle at 90% 90%, rgba(255,255,255,.07) 0 28%, transparent 28.5%); }
/* z-index: شريط .profile-info يتداخل مع أسفل الغلاف (margin-top سالب) فكان يحجب الزر */
.profile-cover .edit { position: absolute; bottom: 66px; inset-inline-end: 12px; z-index: 3; }
.profile-info { padding: 0 24px 16px; display: flex; gap: 18px; align-items: flex-end; margin-top: -54px; position: relative; flex-wrap: wrap; }
.profile-info .avatar { border: 5px solid var(--card); box-sizing: content-box; }
.profile-info .avatar .edit { position: absolute; bottom: 6px; inset-inline-end: 6px; width: 36px; height: 36px; }
.profile-info h1 { font-size: 28px; margin: 0; line-height: 1.2; font-weight: 900; }
.profile-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 6px; }
.profile-stats { display: flex; gap: 18px; padding: 0 24px 14px; color: var(--text-2); flex-wrap: wrap; }
.profile-stats b { color: var(--text); }
.profile-stat-btn { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.profile-stat-btn:hover { text-decoration: underline; }
.profile-stat-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.people-list { min-height: 200px; }
.people-tabs { position: sticky; top: -16px; z-index: 2; background: var(--card); padding-block: 6px; }
.prv-row { flex-wrap: wrap; }
.prv-row + .prv-row { border-top: 1px solid var(--divider); }
.profile-grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 14px; align-items: start; }
.profile-grid .sticky { position: sticky; top: calc(var(--topbar) + 14px); }
.about-row { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.about-row .ico { color: var(--text-2); margin-top: 2px; }
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; border-radius: 12px; overflow: hidden; }
.photo-grid a { aspect-ratio: 1; background: var(--field); overflow: hidden; }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.photo-grid a:hover img { transform: scale(1.05); }
@media (max-width: 1000px) { .profile-grid { grid-template-columns: minmax(0, 1fr); } .profile-grid .sticky { position: static; } }
@media (max-width: 760px) {
  .profile-cover .edit { top: 12px; bottom: auto; }
  /* صورة الحساب في الوسط تغطي أسفل الغلاف: الكلمة في الأعلى */
  .profile-cover.cover-default::after { place-items: start center; padding-top: 4px; font-size: 62px; }
  .profile-info { flex-direction: column; align-items: center; text-align: center; margin-top: -64px; padding: 0 14px 12px; gap: 8px; }
  .profile-info h1 { font-size: 23px; }
  .profile-actions { justify-content: center; }
  .profile-stats { justify-content: center; padding: 0 14px 12px; }
  .profile-head { border-radius: 0; }
}

/* ─── Modal / sheet ──────────────────────────────────────────────── */
.modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(10, 10, 20, .55); display: flex; align-items: center; justify-content: center; padding: 20px; animation: fade .15s; }
.modal { background: var(--card); border-radius: 18px; width: 100%; max-width: 540px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; box-shadow: var(--shadow-lg); animation: pop .18s ease-out; overflow: hidden; }
.modal.wide { max-width: 720px; }
.modal-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--divider); }
.modal-head h3 { margin: 0; flex: 1; text-align: center; font-size: 18px; font-weight: 800; }
.modal-body { padding: 16px; overflow-y: auto; flex: 1; }
.modal-foot { padding: 12px 16px; border-top: 1px solid var(--divider); display: flex; gap: 10px; justify-content: flex-end; }
@keyframes fade { from { opacity: 0; } }
@media (max-width: 760px) {
  .modal-backdrop { padding: 0; align-items: flex-end; }
  .modal { max-width: none; border-radius: 22px 22px 0 0; max-height: 92vh; animation: slideup .22s ease-out; }
  .modal.full { border-radius: 0; height: 100%; max-height: none; }
  .modal-foot { padding-bottom: calc(12px + var(--safe-b)); }
}
@keyframes slideup { from { transform: translateY(40px); opacity: .4; } }
.menu-list { display: flex; flex-direction: column; padding: 6px 0; }
.menu-list button, .menu-list a { display: flex; align-items: center; gap: 14px; padding: 11px 18px; font-weight: 600; text-align: start; }
.menu-list button:hover, .menu-list a:hover { background: var(--hover); }
/* بطاقة «حمّل التطبيق» الهادئة أسفل بعض الأقسام (أندرويد، الموقع فقط) */
.app-invite-card { display: flex; align-items: center; gap: 10px; margin: 16px 0 8px; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--divider); background: var(--card); color: inherit; text-decoration: none; font-size: 13.5px; line-height: 1.4; }
.app-invite-card:hover { background: var(--hover); }
.app-invite-card .aic-e { font-size: 22px; flex: none; }
.app-invite-card .aic-t { min-width: 0; }
.app-invite-card .aic-go { margin-inline-start: auto; font-weight: 800; color: var(--primary); white-space: nowrap; }
/* زرّ «+»: اسم الخيار ووصف قصير تحته */
.menu-list .mi-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.menu-list .mi-desc { font-size: 12px; font-weight: 500; color: var(--text-2); margin-top: 1px; }
.menu-list .danger { color: var(--danger); }
.menu-list .mi { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }

/* Popover (desktop dropdowns) */
.popover { position: fixed; z-index: 90; background: var(--card); border-radius: 14px; box-shadow: var(--shadow-lg); min-width: 260px; max-width: 360px; max-height: 70vh; overflow-y: auto; animation: pop .14s ease-out; border: 1px solid var(--divider); }

/* Toast */
.toasts { position: fixed; z-index: 200; bottom: calc(24px + var(--safe-b)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: #1F1F2E; color: #fff; padding: 10px 18px; border-radius: 12px; font-weight: 600; box-shadow: var(--shadow-lg); animation: slideup .2s; max-width: 90vw; }
.toast { display: flex; align-items: center; gap: 10px; pointer-events: auto; } /* زر «أبلغ الإدارة» قابل للنقر داخل .toasts */
.toast-act { flex: none; border: 0; background: rgba(255,255,255,.18); color: inherit; font: inherit; font-weight: 800; padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.toast-act:hover { background: rgba(255,255,255,.3); }
.toast.err { background: var(--danger); }
@media (max-width: 760px) { .toasts { bottom: calc(var(--bottomnav) + 20px + var(--safe-b)); } }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 150; background: rgba(0,0,0,.94); display: flex; align-items: center; justify-content: center; }
.lightbox img, .lightbox video { max-width: 100vw; max-height: 100vh; object-fit: contain; }
.lightbox .lb-close { position: absolute; top: 14px; inset-inline-end: 14px; color: #fff; background: rgba(255,255,255,.12); }
.lightbox .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; background: rgba(255,255,255,.12); width: 48px; height: 48px; }
.lightbox .lb-prev { inset-inline-start: 14px; }
.lightbox .lb-next { inset-inline-end: 14px; }
.lightbox .lb-count { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); color: #fff; font-weight: 700; }

/* ─── Comments ───────────────────────────────────────────────────── */
.comments { display: flex; flex-direction: column; gap: 12px; }
.comment { display: flex; gap: 8px; align-items: flex-start; }
.comment .bubble { background: var(--field); border-radius: 18px; padding: 8px 14px; display: inline-block; max-width: 100%; }
.comment .bubble .who { font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 4px; }
.comment .bubble .tx { white-space: pre-wrap; word-break: break-word; }
.comment .cimg { margin-top: 6px; border-radius: 12px; max-width: 240px; max-height: 240px; object-fit: cover; cursor: pointer; }
.comment .cactions { display: flex; gap: 14px; padding: 2px 12px; font-size: 12.5px; color: var(--text-2); font-weight: 700; align-items: center; }
.comment .cactions button:hover { text-decoration: underline; }
.comment .cactions .liked { color: var(--primary); }
.comment .likes { font-size: 12px; color: var(--text-2); display: inline-flex; gap: 2px; align-items: center; }
.comment .replies { margin-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.comment-box { display: flex; gap: 8px; align-items: flex-end; }
.comment-box .inbox { flex: 1; background: var(--field); border-radius: 20px; padding: 4px 6px 4px 14px; display: flex; align-items: flex-end; gap: 2px; }
[dir="rtl"] .comment-box .inbox { padding: 4px 14px 4px 6px; }
.comment-box textarea { flex: 1; border: 0; background: transparent; outline: none; resize: none; padding: 7px 0; max-height: 140px; min-height: 22px; line-height: 1.45; }
.comment-box .icon-btn { width: 34px; height: 34px; }
.reply-tag { font-size: 12.5px; color: var(--text-2); padding: 0 6px 6px; display: flex; gap: 8px; align-items: center; }

/* ─── Create post ────────────────────────────────────────────────── */
.cp-text { border: 0; outline: none; background: transparent; width: 100%; min-height: 120px; font-size: 18px; resize: none; }
.cp-text.cp-text-short { min-height: 0; height: auto; font-size: 16px; padding: 4px 0; max-height: 160px; }
.cp-text.bg { min-height: 240px; color: #fff; font-size: 24px; font-weight: 800; text-align: center; padding: 70px 20px; border-radius: 12px; }
.cp-text.bg::placeholder { color: rgba(255,255,255,.8); }
.cp-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 10px; }
.cp-media .it { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--field); }
.cp-media .it img, .cp-media .it video { width: 100%; height: 100%; object-fit: cover; }
.cp-media .it .x { position: absolute; top: 6px; inset-inline-end: 6px; width: 28px; height: 28px; background: rgba(0,0,0,.6); color: #fff; }
.cp-media .it .vid { position: absolute; bottom: 6px; inset-inline-start: 6px; background: rgba(0,0,0,.6); color: #fff; border-radius: 6px; font-size: 11px; padding: 0 6px; }
.bg-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.bg-swatches button { width: 34px; height: 34px; border-radius: 10px; border: 2px solid transparent; }
.bg-swatches button.on { border-color: var(--text); }
.bg-swatches button.none { background: var(--field); display: flex; align-items: center; justify-content: center; color: var(--text-2); }
.cp-tools { border: 1px solid var(--divider); border-radius: 12px; padding: 8px 12px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cp-tools .lbl { font-weight: 700; flex: 1; min-width: 120px; }
.progress { height: 6px; background: var(--field); border-radius: 3px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--brand); width: 0; transition: width .2s; }

/* ─── Story viewer ───────────────────────────────────────────────── */
.sv { position: fixed; inset: 0; z-index: 160; background: #000; display: flex; align-items: center; justify-content: center; }
.sv-stage { position: relative; height: 100%; max-height: 100vh; aspect-ratio: 9 / 16; max-width: 100vw; background: #111; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.sv-stage::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,.45), transparent 18%, transparent 78%, rgba(0,0,0,.45)); transition: opacity .15s; }
.sv-bars, .sv-top, .sv-bottom { transition: opacity .15s; }
.sv.holding .sv-stage::after, .sv.holding .sv-bars, .sv.holding .sv-top, .sv.holding .sv-bottom, .sv.holding .sv-side { opacity: 0; }
.sv-reply { user-select: text; -webkit-user-select: text; }
@media (min-width: 761px) { .sv-stage { height: calc(100vh - 40px); border-radius: 14px; } }
.sv-media { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.sv-media img, .sv-media video { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.sv-media .txt { padding: 30px; color: #fff; font-size: 26px; font-weight: 800; text-align: center; white-space: pre-wrap; word-break: break-word; }
.sv-media .cap { position: absolute; bottom: 90px; inset-inline: 0; text-align: center; color: #fff; padding: 8px 20px; background: rgba(0,0,0,.35); font-weight: 600; }
.sv-bars { position: absolute; top: 10px; inset-inline: 10px; display: flex; gap: 4px; z-index: 3; }
.sv-bars i { flex: 1; height: 3px; background: rgba(255,255,255,.35); border-radius: 2px; overflow: hidden; }
.sv-bars i b { display: block; height: 100%; background: #fff; width: 0; }
.sv-top { position: absolute; top: 22px; inset-inline: 12px; display: flex; align-items: center; gap: 10px; z-index: 3; color: #fff; }
.sv-top .icon-btn { color: #fff; }
.sv-top .icon-btn:hover { background: rgba(255,255,255,.15); }
.sv-tap { position: absolute; top: 70px; bottom: 90px; width: 35%; z-index: 2; cursor: pointer; }
.sv-tap.prev { inset-inline-start: 0; }
.sv-tap.next { inset-inline-end: 0; }
.sv-bottom { position: absolute; bottom: 16px; inset-inline: 12px; z-index: 3; display: flex; gap: 6px; justify-content: center; align-items: center; }
.sv-bottom button.e { font-size: 28px; width: 46px; height: 46px; border-radius: 50%; transition: transform .12s; }
.sv-bottom button.e:hover { transform: scale(1.2); }
.sv-bottom .viewers { color: #fff; display: flex; align-items: center; gap: 8px; font-weight: 700; background: rgba(255,255,255,.14); padding: 8px 16px; border-radius: 20px; }
.sv-side { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; background: rgba(255,255,255,.14); width: 48px; height: 48px; z-index: 4; }
.sv-side.l { inset-inline-start: calc(50% - min(28vh, 50vw) - 70px); }
.sv-side.r { inset-inline-end: calc(50% - min(28vh, 50vw) - 70px); }
@media (max-width: 760px) { .sv-side { display: none; } }

/* ─── Shorts ─────────────────────────────────────────────────────── */
.shorts { height: calc(100vh - var(--topbar)); overflow-y: scroll; scroll-snap-type: y mandatory; background: #000; scrollbar-width: none; }
.shorts::-webkit-scrollbar { display: none; }
.short { height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; gap: 14px; position: relative; padding: 14px 0; }
.short-stage { position: relative; height: 100%; aspect-ratio: 9 / 16; max-width: 100%; background: #111; border-radius: 14px; overflow: hidden; }
.short-stage video { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.short-info { position: absolute; bottom: 0; inset-inline: 0; padding: 60px 14px 16px; background: linear-gradient(transparent, rgba(0,0,0,.7)); color: #fff; }
.short-info .txt { margin-top: 6px; font-size: 14px; max-height: 4.5em; overflow: hidden; }
.short-rail { display: flex; flex-direction: column; gap: 16px; align-items: center; align-self: flex-end; padding-bottom: 20px; }
.short-rail button { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #fff; font-size: 12.5px; font-weight: 700; }
.short-rail button i { width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 24px; transition: background .15s; }
.short-rail button:hover i { background: rgba(255,255,255,.26); }
.short-rail .rx-wrap { position: relative; }
.short-rail .rx-picker { bottom: auto; top: 0; inset-inline-start: auto; inset-inline-end: calc(100% + 8px); }
.short .mute { position: absolute; top: 14px; inset-inline-end: 14px; color: #fff; background: rgba(0,0,0,.4); z-index: 3; }
.short .paused { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; color: #fff; }
.short .paused i { width: 76px; height: 76px; border-radius: 50%; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; }
@media (max-width: 760px) {
  .shorts { height: calc(100vh - var(--bottomnav) - var(--safe-b)); height: calc(100dvh - var(--bottomnav) - var(--safe-b)); }
  .short { padding: 0; }
  .short-stage { border-radius: 0; aspect-ratio: auto; width: 100%; }
  .short-rail { position: absolute; inset-inline-end: 8px; bottom: 90px; z-index: 3; padding: 0; }
  .short-info { padding-inline-end: 80px; }
  .short-rail button i { width: 46px; height: 46px; background: rgba(0,0,0,.25); }
}

/* ─── Chat ───────────────────────────────────────────────────────── */
.chat-wrap { display: grid; grid-template-columns: 360px minmax(0, 1fr); height: calc(100vh - var(--topbar)); background: var(--card); }
.chat-list { border-inline-end: 1px solid var(--divider); display: flex; flex-direction: column; min-height: 0; }
.chat-list .head { padding: 14px 16px 8px; display: flex; align-items: center; gap: 8px; }
.chat-list .head h2 { flex: 1; margin: 0; font-size: 22px; font-weight: 900; }
.chat-list .scroll { overflow-y: auto; flex: 1; padding: 4px 6px; }
.conv { display: flex; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 12px; }
.conv:hover { background: var(--hover); }
.conv.active { background: var(--primary-soft); }
.conv .t { font-weight: 700; }
.conv .lm { font-size: 13px; color: var(--text-2); }
.conv.unread .t, .conv.unread .lm { font-weight: 800; color: var(--text); }
.conv .ub { background: var(--primary); color: #fff; border-radius: 999px; font-size: 11.5px; padding: 0 7px; min-width: 20px; text-align: center; font-weight: 700; }
.chat-pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.chat-pane .head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--divider); min-height: 62px; }
.chat-pane .msgs { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 3px; background: var(--bg); }
.msg { display: flex; gap: 8px; align-items: flex-end; max-width: 78%; }
.msg.me { align-self: flex-end; flex-direction: row-reverse; }
.msg .b { background: var(--card); padding: 8px 13px; border-radius: 18px; white-space: pre-wrap; word-break: break-word; box-shadow: var(--shadow); position: relative; }
.msg.me .b { background: var(--primary); color: #fff; }
.msg .b.media { padding: 4px; background: transparent; box-shadow: none; }
.msg .b.media img, .msg .b.media video { border-radius: 14px; max-width: 280px; max-height: 320px; object-fit: cover; cursor: pointer; }
.msg .b audio { max-width: 240px; }
.msg .b.deleted { font-style: italic; opacity: .7; }
.msg .meta { font-size: 11px; color: var(--text-2); margin: 0 6px; white-space: nowrap; }
.msg .sender { font-size: 12px; color: var(--text-2); margin: 0 12px 2px; }
.msg .reply { font-size: 12.5px; border-inline-start: 3px solid currentColor; padding-inline-start: 8px; opacity: .8; margin-bottom: 4px; }
.msg .tools { opacity: 0; transition: opacity .1s; display: flex; }
.msg:hover .tools { opacity: 1; }
.msg .tools .icon-btn { width: 30px; height: 30px; }
.msg.pending { opacity: .6; }
.msg.failed .b { outline: 2px solid var(--danger); }
.msg-day { align-self: center; font-size: 12px; color: var(--text-2); background: var(--card); padding: 2px 12px; border-radius: 10px; margin: 10px 0; }
.chat-input { display: flex; gap: 6px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--divider); padding-bottom: calc(10px + var(--safe-b)); }
.chat-input .inbox { flex: 1; background: var(--field); border-radius: 22px; padding: 2px 16px; display: flex; }
.chat-input textarea { flex: 1; border: 0; background: transparent; outline: none; resize: none; padding: 9px 0; max-height: 140px; min-height: 24px; line-height: 1.45; }
.chat-input .send { background: var(--primary); color: #fff; }
.chat-input .send:hover { background: var(--primary-dark); }
/* تسجيل رسالة صوتية */
.chat-input.vrec { align-items: center; }
.vr-bar { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: var(--field); border-radius: 22px; padding: 10px 16px; }
.vr-dot { width: 10px; height: 10px; border-radius: 50%; background: #EF4444; flex: none; animation: vrpulse 1s infinite; }
.vr-time { font-weight: 800; font-variant-numeric: tabular-nums; flex: none; }
@keyframes vrpulse { 50% { opacity: .25; } }
.msg .b audio { max-width: 100%; width: 260px; height: 40px; display: block; }
.typing { font-size: 12.5px; color: var(--primary); font-weight: 600; }
.chat-empty { flex: 1; display: flex; align-items: center; justify-content: center; }
.shared-post-mini { background: var(--card); color: var(--text); border-radius: 12px; overflow: hidden; width: 240px; border: 1px solid var(--divider); }
.shared-post-mini img { width: 100%; height: 130px; object-fit: cover; }
.shared-post-mini .p { padding: 8px 10px; font-size: 13px; }
@media (max-width: 900px) { .chat-wrap { grid-template-columns: 300px minmax(0, 1fr); } }
@media (max-width: 760px) {
  .chat-wrap { grid-template-columns: minmax(0, 1fr); height: calc(100vh - var(--topbar) - var(--bottomnav) - var(--safe-b)); height: calc(100dvh - var(--topbar) - var(--bottomnav) - var(--safe-b)); }
  .chat-wrap.has-conv { height: 100vh; height: 100dvh; }
  .chat-wrap.has-conv .chat-list, .chat-wrap:not(.has-conv) .chat-pane { display: none; }
  .msg { max-width: 88%; }
}

/* ─── Auth ───────────────────────────────────────────────────────── */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-hero { background: var(--brand); color: #fff; padding: 60px; display: flex; flex-direction: column; justify-content: center; gap: 22px; position: relative; overflow: hidden; }
.auth-hero::before, .auth-hero::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,.08); }
.auth-hero::before { width: 420px; height: 420px; top: -120px; inset-inline-end: -120px; }
.auth-hero::after { width: 300px; height: 300px; bottom: -90px; inset-inline-start: -60px; }
.auth-hero h1 { font-size: 46px; margin: 0; line-height: 1.15; font-weight: 900; position: relative; }
.auth-hero p { font-size: 18px; opacity: .9; margin: 0; max-width: 460px; position: relative; }
.auth-hero .feat { display: flex; flex-direction: column; gap: 12px; position: relative; }
.auth-hero .feat div { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.auth-hero .feat i { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 30px 20px; }
.auth-form .card { width: 100%; max-width: 420px; padding: 28px; }
.auth-form h2 { margin: 0 0 4px; font-size: 26px; font-weight: 900; }
.auth-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.auth-err { background: rgba(239,68,68,.1); color: var(--danger); padding: 10px 14px; border-radius: 10px; font-weight: 600; font-size: 14px; }
.or { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 13px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--divider); }
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth-hero { padding: 40px 24px 30px; }
  .auth-hero h1 { font-size: 30px; }
  .auth-hero .feat { display: none; }
  .auth-form { padding: 0 12px 30px; margin-top: -16px; position: relative; }
}

/* ─── Misc ───────────────────────────────────────────────────────── */
.page-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.page-head h1 { margin: 0; font-size: 24px; font-weight: 900; flex: 1; }
@media (max-width: 760px) { .page-head { padding: 4px 6px 0; } .page-head h1 { font-size: 20px; } }
.notif { display: flex; gap: 12px; padding: 10px 14px; align-items: center; position: relative; }
.notif:hover { background: var(--hover); }
.notif.unread { background: color-mix(in srgb, var(--primary-soft) 55%, transparent); }
.notif .nb { position: absolute; bottom: -2px; inset-inline-end: -4px; width: 24px; height: 24px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; border: 2px solid var(--card); }
.notif .nb .ico { width: 13px; height: 13px; }
.notif .thumb { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex: none; }
.notif .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); flex: none; }
.trend { display: flex; justify-content: space-between; padding: 7px 10px; border-radius: 10px; }
.trend:hover { background: var(--hover); }
.store-card { overflow: hidden; display: flex; flex-direction: column; }
.store-card .banner { height: 100px; background: var(--brand); position: relative; }
.store-card .banner img { width: 100%; height: 100%; object-fit: cover; }
.store-card .logo-wrap { margin: -30px 12px 0; position: relative; }
.lock-box { padding: 40px 20px; text-align: center; }
.kbd-hint { font-size: 12px; color: var(--text-2); }
.banner-app { display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: var(--primary-soft); color: var(--on-primary-soft); border-radius: 14px; margin-bottom: 10px; font-weight: 600; }

/* التذييل في العمود الأيسر يظهر فقط حين يختفي العمود الأيمن */
.side-foot-left { display: none; }
@media (max-width: 1240px) { .side-foot-left { display: block; } }
.side-right .widget:first-child { margin-top: 0; }
.side-right .side-foot { padding: 12px 6px 0; }
@media (max-width: 1000px) { .side-foot-left { display: none; } }

/* ─── زر «لم يعجبني» + أيقونات فقط على الشاشات الضيقة ─────────────────── */
.flip-y { transform: scaleY(-1); }
.flip-x { transform: scaleX(-1); }
.post-actions .dislike.on { color: #334155; background: color-mix(in srgb, #64748B 14%, transparent); font-weight: 800; }
:root[data-theme="dark"] .post-actions .dislike.on { color: #E2E8F0; }
.short-rail button.on i { background: rgba(255,255,255,.32); }
.short-rail .dislike.on i { background: #fff; color: #111; }
@media (max-width: 560px) { .post-actions .lbl { display: none; } }

/* ─── صفحات عريضة (الملف الشخصي، الصفحة، المجموعة): بلا العمود الأيمن ─── */
body[data-view="wide"] .layout { grid-template-columns: minmax(220px, 290px) minmax(0, 1fr); }
body[data-view="wide"] .side-right { display: none; }
body[data-view="wide"] .side-foot-left { display: block; }
.main-wide { max-width: 1040px; }
.profile-grid { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }
@media (max-width: 1000px) {
  body[data-view="wide"] .layout { grid-template-columns: 76px minmax(0, 1fr); }
  body[data-view="wide"] .side-foot-left { display: none; }
}
@media (max-width: 760px) { body[data-view="wide"] .layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1100px) { .profile-grid { grid-template-columns: minmax(0, 1fr); } .profile-grid .sticky { position: static; } }

/* ─── الملف الشخصي: الروابط، أعمالي، نافذة التعديل ──────────────────── */
.link-badge { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; flex: none; line-height: 1; font-family: system-ui, sans-serif; }
.profile-links { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.profile-link { display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 10px; font-weight: 600; font-size: 14px; color: var(--text); min-width: 0; }
.profile-link:hover { background: var(--hover); }
.biz-item { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 12px; color: var(--text); }
.biz-item:hover { background: var(--hover); }
.biz-item > .ico { color: var(--text-2); }
.edit-hero { position: relative; margin-bottom: 40px; }
.edit-cover { aspect-ratio: 1500 / 508; min-height: 110px; border-radius: 14px; background: var(--brand) center / cover no-repeat; display: flex; align-items: flex-end; justify-content: flex-end; padding: 10px; }
.edit-avatar { position: absolute; bottom: -38px; inset-inline-start: 16px; border-radius: 50%; padding: 4px; background: var(--card); }
.edit-avatar .icon-btn { position: absolute; bottom: 0; inset-inline-end: -4px; width: 32px; height: 32px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.link-row { display: flex; align-items: center; gap: 8px; }
.link-row .input { min-width: 0; flex: 1; }
@media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } .link-row { flex-wrap: wrap; } .link-row .select { width: auto !important; flex: 1 !important; } }

/* ─── «تطبيقاتنا»: الشريط العلوي والصفحة ───────────────────────────── */
.apps-strip { display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: #fff; font-weight: 700; font-size: 14px; position: relative; z-index: 41; }
.apps-strip.promo { background: linear-gradient(90deg, #7C3AED, #DB2777); }
.apps-strip.info { background: #2563EB; } .apps-strip.success { background: #16A34A; } .apps-strip.warning { background: #EA580C; }
.apps-strip .as-body { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; color: inherit; text-decoration: none; }
.apps-strip .as-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apps-strip .as-cta { flex: none; background: rgba(255,255,255,.2); padding: 3px 10px; border-radius: 999px; font-size: 13px; }
.apps-strip a.as-body:hover .as-cta { background: rgba(255,255,255,.32); }
.apps-strip .as-close { flex: none; color: inherit; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; opacity: .85; }
.apps-strip .as-close:hover { background: rgba(255,255,255,.18); opacity: 1; }
body[data-view="auth"] .apps-strip { display: none; }
@media (max-width: 640px) { .apps-strip .as-cta { display: none; } .apps-strip .as-text { white-space: normal; font-size: 13px; } }
.apps-hero { display: flex; gap: 16px; align-items: center; padding: 22px; margin-bottom: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, var(--card)), var(--card)); }
.apps-hero img { border-radius: 16px; flex: none; }
.apps-hero h2 { margin: 0 0 4px; font-weight: 900; }
.apps-intro { margin: 0; color: var(--text-2); white-space: pre-line; line-height: 1.7; }
.apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.app-card { padding: 16px; display: flex; flex-direction: column; justify-content: space-between; }
.app-icon { width: 58px; height: 58px; border-radius: 16px; object-fit: cover; flex: none; background: var(--field); }
.app-icon.ph { display: grid; place-items: center; color: var(--primary); }
.app-name { font-size: 16px; display: block; }
.app-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; }
.one-account { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 0 0 14px; border-radius: 12px; background: color-mix(in srgb, var(--primary) 9%, transparent); color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; }
.one-account .oa-ico { color: var(--primary); display: inline-flex; }
.one-account .oa-cta { color: var(--primary); white-space: nowrap; font-size: 13px; }
a.one-account:hover { background: color-mix(in srgb, var(--primary) 14%, transparent); }
/* زر «+» بجانب المتاجر في القائمة الجانبية */
.nav-row { position: relative; }
.nav-row .nav-item { padding-inline-end: 44px; }
.nav-row .side-add { position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.nav-row .side-add:hover { background: var(--primary); color: #fff; }
/* دعوة تفعيل الموقع */
.geo-prompt { display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 10px; flex-wrap: wrap; }
.geo-prompt .gp-ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; background: rgba(239,68,68,.12); color: #EF4444; }
/* النص لا ينضغط: على الشاشات الضيقة تنزل الأزرار إلى سطر خاص بها */
.geo-prompt .gp-text { flex: 1 1 200px; min-width: 0; }
.geo-prompt .gp-actions { display: flex; gap: 6px; flex-wrap: wrap; flex: 0 0 auto; }
@media (max-width: 600px) {
  .geo-prompt .gp-actions { flex: 1 1 100%; padding-inline-start: 56px; }
  .geo-prompt .gp-actions .btn { flex: 1; justify-content: center; }
}

/* ─── منصة الإعلانات: مدير الإعلانات + المحفظة + أماكن العرض ─────────── */
.ads-mgr h1 { font-size: 24px; font-weight: 900; margin: 4px 0; display: flex; align-items: center; gap: 8px; }
.ads-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ads-top { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 12px; }
.ads-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ads-kpis.four { margin: 12px 0; }
.ads-kpi { display: flex; align-items: center; gap: 10px; padding: 14px; }
.ads-kpi .kv { font-size: 20px; font-weight: 900; }
.ads-kpi .ki { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--primary-soft); color: var(--primary); }
.ads-kpi .ki.ok { background: rgba(16,185,129,.13); color: #10B981; }
.ads-kpi .ki.warn { background: rgba(245,158,11,.14); color: #F59E0B; }
.ads-kpi .ki.violet { background: rgba(139,92,246,.13); color: #8B5CF6; }
.ads-kpi .ki.info { background: rgba(14,165,233,.13); color: #0EA5E9; }
.wallet-card { padding: 16px; color: #fff; background: linear-gradient(135deg, #059669, #0EA5E9); border: 0; display: flex; flex-direction: column; gap: 10px; }
.wallet-card .wc-top { display: flex; align-items: center; gap: 12px; }
.wallet-card .wc-ico { width: 44px; height: 44px; border-radius: 14px; background: rgba(255,255,255,.2); display: grid; place-items: center; }
.wallet-card .wc-bal { font-size: 26px; font-weight: 900; direction: ltr; text-align: start; }
.wallet-card .wc-bal small { font-size: 14px; opacity: .9; }
.wallet-card .wc-hint { opacity: .9; }
.wallet-card .btn-light { background: #fff; color: #047857; }
.ads-hero-ico { width: 64px; height: 64px; border-radius: 20px; margin: 0 auto 10px; display: grid; place-items: center; background: rgba(245,158,11,.14); color: #F59E0B; }
.ads-empty { padding: 36px 20px; text-align: center; }
.ads-list { overflow: hidden; }
.ads-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--divider); flex-wrap: wrap; }
.ads-row:last-child { border-bottom: 0; }
.ads-thumb { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; flex: none; display: grid; place-items: center; background: var(--field); color: var(--text-2); }
.ads-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ads-name { font-weight: 800; display: block; }
.ads-stats { display: flex; gap: 18px; text-align: center; }
.ads-stats b { display: block; font-size: 16px; }
.ads-stats span { font-size: 12px; color: var(--text-2); }
.ads-budget { margin-top: 6px; max-width: 360px; }
.ads-budget .bar { height: 6px; border-radius: 99px; background: var(--field); overflow: hidden; margin-top: 4px; }
.ads-budget .bar i { display: block; height: 100%; background: linear-gradient(90deg, #F59E0B, #EF4444); border-radius: 99px; }
.ad-status { display: inline-block; padding: 1px 9px; border-radius: 99px; font-size: 12px; font-weight: 800; }
.ad-status.ok { background: rgba(16,185,129,.14); color: #059669; }
.ad-status.warn { background: rgba(245,158,11,.16); color: #B45309; }
.ad-status.bad { background: rgba(239,68,68,.13); color: #DC2626; }
.ad-status.info { background: rgba(14,165,233,.13); color: #0369A1; }
.ad-status.muted { background: var(--field); color: var(--text-2); }
.btn.danger { color: var(--danger); }
.ads-detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; align-items: start; }
.ads-chart { width: 100%; height: auto; margin-top: 8px; }
.ads-chart .ax { font-size: 11px; fill: var(--text-2); }
.ads-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 14px; }
.ads-table td { padding: 6px 4px; border-bottom: 1px solid var(--divider); }
.ads-steps { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; padding-bottom: 2px; }
.ads-stp { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--divider); white-space: nowrap; font-weight: 700; color: var(--text-2); }
.ads-stp i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--field); font-style: normal; font-size: 13px; }
.ads-stp.on { border-color: var(--primary); color: var(--primary); }
.ads-stp.on i { background: var(--primary); color: #fff; }
.ads-stp.done { color: var(--success); }
.ads-stp.done i { background: var(--success); color: #fff; }
.ads-wizard { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; align-items: start; }
.ads-step-body { padding: 18px; }
.ads-step-body h3 { margin: 0 0 12px; font-size: 18px; font-weight: 900; }
.ads-nav { display: flex; justify-content: space-between; gap: 8px; }
.ads-obj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.ads-obj { text-align: start; padding: 14px; border-radius: 14px; border: 2px solid var(--divider); background: var(--card); display: flex; flex-direction: column; gap: 4px; color: var(--text); }
.ads-obj .oi { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); margin-bottom: 4px; }
.ads-obj small { color: var(--text-2); }
.ads-obj.on, .ads-plan.on { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.ads-media { display: flex; flex-direction: column; gap: 8px; }
.ads-media img, .ads-media video { max-width: 100%; max-height: 260px; border-radius: 12px; object-fit: contain; background: var(--field); }
.ads-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ads-postpick { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 12px; border: 2px solid var(--divider); background: var(--card); text-align: start; font-size: 13px; color: var(--text); }
.ads-postpick img, .ads-postpick .ph { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; background: var(--field); display: grid; place-items: center; }
.ads-postpick.on { border-color: var(--primary); }
.ads-estimate { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); align-self: flex-start; }
.ads-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ads-plan { position: relative; text-align: start; padding: 16px; border-radius: 16px; border: 2px solid var(--divider); background: var(--card); display: flex; flex-direction: column; gap: 6px; color: var(--text); }
.ads-plan .price { font-size: 20px; font-weight: 900; color: var(--primary); }
.ads-plan .pl { display: flex; flex-wrap: wrap; gap: 4px; }
.ads-plan .pl span { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: var(--field); }
.ads-plan .badge-plan { position: absolute; top: -10px; inset-inline-end: 12px; background: linear-gradient(90deg, #F59E0B, #EF4444); color: #fff; font-size: 11px; font-weight: 800; padding: 2px 10px; border-radius: 99px; }
.ads-rv { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--divider); }
.short-ad .short-ad-img { width: 100%; height: 100%; object-fit: contain; background: #000; }
.sponsored-pill { font-size: 11px; padding: 1px 8px; border-radius: 99px; background: rgba(255,255,255,.22); font-weight: 700; }
.sponsored-story .spn { position: absolute; top: 8px; inset-inline-end: 8px; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 99px; background: rgba(0,0,0,.55); color: #fff; z-index: 2; }
.ad-banner { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; border: 1px solid color-mix(in srgb, #F59E0B 35%, var(--divider)); }
.ad-banner > img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex: none; }
.ad-banner .sponsored { color: #B45309; font-weight: 700; }
.ad-banner-body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.top-ad .spn { font-size: 11px; opacity: .85; }
.top-ad .as-body { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; }
@media (max-width: 900px) {
  .ads-top, .ads-detail, .ads-wizard { grid-template-columns: 1fr; }
  .ads-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ads-preview-col { order: -1; }
}

/* ─── خدمات وكّل: نافذة التطبيق + صفحة وكّل غو ─────────────────────── */
.app-dlg-head { display: flex; align-items: center; gap: 12px; }
.app-dlg-ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; flex: none; }
.go-page { display: flex; flex-direction: column; gap: 14px; }
.go-hero { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 26px; border-radius: 22px; color: #fff; background: linear-gradient(135deg, #F59E0B, #EF4444 60%, #DB2777); }
.go-hero h1 { font-size: 28px; font-weight: 900; margin: 10px 0 6px; line-height: 1.3; }
.go-hero p { margin: 0 0 14px; opacity: .95; line-height: 1.8; max-width: 620px; }
.go-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.2); padding: 4px 12px; border-radius: 99px; font-weight: 800; font-size: 13px; }
.go-hero .btn-light { background: #fff; color: #B45309; }
.go-hero .btn-outline-light { border: 2px solid rgba(255,255,255,.8); color: #fff; background: transparent; }
.go-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.go-stat { background: rgba(255,255,255,.18); border-radius: 16px; padding: 12px 16px; min-width: 110px; display: flex; flex-direction: column; gap: 2px; }
.go-stat b { font-size: 26px; font-weight: 900; } .go-stat small { opacity: .9; }
.go-drivers-cta { display: flex; align-items: center; gap: 12px; padding: 14px 16px; flex-wrap: wrap; }
.gd-dot { width: 12px; height: 12px; border-radius: 50%; background: #10B981; box-shadow: 0 0 0 6px rgba(16,185,129,.18); flex: none; animation: gdpulse 1.6s infinite; }
@keyframes gdpulse { 50% { box-shadow: 0 0 0 10px rgba(16,185,129,.05); } }
.go-feats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.go-feat { padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.go-feat p { margin: 0; }
.gf-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; }
.go-join { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 18px; }
.go-join h3 { margin: 0 0 6px; font-weight: 900; } .go-join p { margin: 0 0 6px; } .go-join ul { margin: 0; padding-inline-start: 18px; line-height: 1.9; }

/* ─── الهوية: الرابط المخصص، التوثيق، إعدادات الصفحة/المجموعة ───────── */
.id-prefix { display: flex; align-items: stretch; border: 1px solid var(--divider); border-radius: 12px; overflow: hidden; background: var(--field); direction: ltr; }
.id-prefix > span { padding: 10px 10px; color: var(--text-2); white-space: nowrap; font-size: 14px; display: flex; align-items: center; }
.id-prefix .input { border: 0; border-radius: 0; flex: 1; min-width: 0; background: var(--card); }
.id-status { min-height: 18px; } .id-status.ok { color: var(--success); font-weight: 700; } .id-status.bad { color: var(--danger); font-weight: 700; }
.id-reqs { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 6px; }
.id-reqs li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.id-reqs li .ico { width: 20px; height: 20px; border-radius: 50%; padding: 3px; flex: none; }
.id-reqs li.ok .ico { background: rgba(16,185,129,.15); color: #10B981; } .id-reqs li.no .ico { background: rgba(239,68,68,.12); color: var(--danger); }
.id-verif-head { display: flex; gap: 12px; align-items: center; } .id-verif-head .vb { transform: scale(1.4); display: inline-flex; padding: 4px; }
.id-link-card { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); }
.ent-set-head { display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 12px; }
.ent-set-head h1 { font-size: 22px; font-weight: 900; margin: 0; }
.ent-set-grid { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 12px; align-items: start; }
.ent-set-tabs { display: flex; flex-direction: column; gap: 4px; position: sticky; top: calc(var(--topbar) + 12px); }
.ent-set-tabs button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: transparent; border: 0; color: var(--text); font-weight: 700; text-align: start; }
.ent-set-tabs button:hover { background: var(--hover); } .ent-set-tabs button.on { background: var(--primary-soft); color: var(--primary); }
.ent-set-body { min-height: 280px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ent-img { width: 100%; aspect-ratio: 1500/508; border-radius: 14px; overflow: hidden; background: var(--field); display: grid; place-items: center; color: var(--text-2); }
.ent-img.round { width: 140px; height: 140px; aspect-ratio: auto; border-radius: 50%; }
.ent-img img { width: 100%; height: 100%; object-fit: cover; }
.choice-card { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: start; padding: 14px; border-radius: 14px; border: 2px solid var(--divider); background: var(--card); color: var(--text); }
.choice-card.on { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.select-sm { padding: 6px 10px; font-size: 13px; width: auto; }
.btn-danger { background: var(--danger); color: #fff; }
.cp-hero { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 14%, transparent), transparent); color: var(--primary); }
.cp-hero b { color: var(--text); }
.grp-rules { margin-top: 10px; border: 1px solid var(--divider); border-radius: 12px; padding: 8px 12px; }
.grp-rules summary { cursor: pointer; font-weight: 800; display: flex; align-items: center; gap: 4px; }
@media (max-width: 760px) {
  .ent-set-grid { grid-template-columns: 1fr; }
  .ent-set-tabs { flex-direction: row; overflow-x: auto; position: static; }
  .ent-set-tabs button { white-space: nowrap; }
  .grid2 { grid-template-columns: 1fr; }
}

/* ─── وكّل برو + صفحات الأقسام المخصصة ───────────────────────────────── */
.pro-page { display: flex; flex-direction: column; gap: 12px; }
.pro-hero { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 24px; border-radius: 22px; color: #fff; background: linear-gradient(135deg, #8B5CF6, #4F3CE0 70%); }
.pro-hero h1 { font-size: 26px; font-weight: 900; margin: 10px 0 6px; } .pro-hero p { margin: 0; opacity: .95; line-height: 1.8; max-width: 620px; }
.pro-hero .btn-light, .sec-page .btn-light { background: #fff; color: #4F3CE0; font-weight: 800; }
.sec-page .btn-outline-light { border: 2px solid rgba(255,255,255,.8); color: #fff; background: transparent; }
.pro-addme { font-size: 16px; padding: 10px 18px; }
.pro-filters { gap: 8px; } .pro-filters .select { width: auto; min-width: 180px; }
.pro-cats { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.pro-cat-chip { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 96px; padding: 10px 8px; border-radius: 16px; border: 2px solid var(--divider); background: var(--card); color: var(--text); font-weight: 700; font-size: 13px; text-align: center; }
.pro-cat-chip.on { border-color: #8B5CF6; background: rgba(139,92,246,.08); }
.pro-cat-chip .pc-ico { width: 44px; height: 44px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: rgba(139,92,246,.12); color: #8B5CF6; }
.pro-cat-chip .pc-ico img { width: 100%; height: 100%; object-fit: cover; }
.pro-cat-chip small { color: var(--text-2); font-weight: 600; }
.pro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.pro-card { padding: 0; overflow: hidden; text-align: start; display: flex; flex-direction: column; color: var(--text); border: 1px solid var(--divider); }
.pro-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.pro-img { aspect-ratio: 16/10; background: var(--field); display: grid; place-items: center; color: #8B5CF6; }
.pro-img img { width: 100%; height: 100%; object-fit: cover; }
.pro-bd { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pro-cat { color: #8B5CF6; font-weight: 700; }
.pro-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pro-stars { color: #F59E0B; letter-spacing: 1px; font-size: 13px; }
.pro-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 6px; }
.pro-gallery img { width: 100%; height: 180px; object-fit: cover; border-radius: 12px; }
.sec-hero-img { width: 220px; max-width: 40%; border-radius: 18px; object-fit: cover; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.sec-body { line-height: 1.9; }
@media (max-width: 640px) { .sec-hero-img { max-width: 100%; width: 100%; } }

/* ─── المحرر: الموقع، الإشارات، تحرير الصور/الفيديو، الصوت، الروابط، المعاينة ─── */
.modal-backdrop { z-index: 170; } /* فوق عارض القصص (160) والمعرض (150): نافذة حذف القصة تظهر في المقدمة */
.loc-list { display: flex; flex-direction: column; max-height: 50vh; overflow: auto; }
.loc-item { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 10px; text-align: start; background: transparent; border: 0; color: var(--text); }
.loc-item:hover { background: var(--hover); }
.mention-box { position: absolute; inset-inline: 0; top: 100%; z-index: 20; background: var(--card); border: 1px solid var(--divider); border-radius: 12px; box-shadow: var(--shadow-lg); overflow: hidden; max-height: 260px; overflow-y: auto; }
.inbox .mention-box { top: auto; bottom: 100%; }
.mention-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; background: transparent; color: var(--text); text-align: start; }
.mention-item.on, .mention-item:hover { background: var(--primary-soft); }
.mention-item img, .mention-item .ph { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; display: grid; place-items: center; background: var(--field); }
.cp-media .it .edit { position: absolute; top: 6px; inset-inline-start: 6px; background: rgba(0,0,0,.55); color: #fff; width: 30px; height: 30px; }
.cp-media .it.audio { grid-column: 1 / -1; aspect-ratio: auto; padding: 8px 40px 8px 8px; background: var(--field); border-radius: 12px; }
.cp-media .it.audio audio { width: 100%; }
.cp-embed { position: relative; grid-column: 1 / -1; }
.ie { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; }
.ie-stage { background: repeating-conic-gradient(#e5e7eb 0 25%, #f8fafc 0 50%) 50% / 20px 20px; border-radius: 12px; display: grid; place-items: center; padding: 8px; min-height: 260px; }
.ie-canvas { max-width: 100%; max-height: 60vh; border-radius: 6px; box-shadow: 0 4px 18px rgba(0,0,0,.15); }
.ie-row { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 8px; }
.ie-row input[type=range], .ve-row input[type=range] { width: 100%; accent-color: var(--primary); }
.ve-video { width: 100%; max-height: 50vh; border-radius: 12px; background: #000; }
.ve-row { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 8px; }
@media (max-width: 760px) { .ie { grid-template-columns: 1fr; } }
.rec-time { font-size: 28px; font-weight: 900; font-variant-numeric: tabular-nums; }
.rec-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--divider); }
.rec-dot.on { background: #EF4444; animation: gdpulse 1s infinite; box-shadow: 0 0 0 6px rgba(239,68,68,.2); }
.post-audios { display: flex; flex-direction: column; gap: 6px; padding: 8px 14px; }
.post-audio { display: flex; align-items: center; gap: 8px; background: var(--field); border-radius: 14px; padding: 6px 10px; }
.post-audio audio { flex: 1; min-width: 0; height: 40px; }
.pa-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(139,92,246,.15); color: #8B5CF6; flex: none; }
.vembed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.vembed.vertical { aspect-ratio: 9 / 16; max-height: 70vh; width: auto; margin: 0 auto; }
.vembed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.post.preview { box-shadow: none; border: 1px dashed var(--divider); pointer-events: auto; }
.sv-reply { flex: 1; min-width: 120px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 999px; padding: 9px 14px; outline: none; }
.sv-reply::placeholder { color: rgba(255,255,255,.7); }
.sv-fly { position: absolute; bottom: 90px; left: 50%; font-size: 48px; z-index: 5; animation: svfly 1.2s ease-out forwards; pointer-events: none; }
@keyframes svfly { from { transform: translate(-50%, 0) scale(.6); opacity: 1; } to { transform: translate(-50%, -260px) scale(1.4); opacity: 0; } }

/* ─── السوق (Marketplace) ─────────────────────────────────────────────── */
body[data-view="market"] .layout { grid-template-columns: minmax(0, 1fr); max-width: none; padding: 0; gap: 0; }
body[data-view="market"] .side { display: none; }
body[data-view="market"] .main { padding: 0; }
.mk { display: grid; grid-template-columns: 340px minmax(0, 1fr); min-height: calc(100vh - var(--topbar)); }
.mk-side { position: sticky; top: var(--topbar); align-self: start; height: calc(100vh - var(--topbar)); overflow-y: auto; background: var(--card); border-inline-end: 1px solid var(--divider); padding: 14px 12px 30px; display: flex; flex-direction: column; gap: 8px; }
.mk-h { font-size: 24px; font-weight: 900; margin: 0; }
.mk-h3 { font-size: 18px; font-weight: 800; margin: 22px 0 10px; }
.mk-sub { font-weight: 800; font-size: 15px; margin: 6px 4px 2px; }
.mk-search { display: flex; align-items: center; gap: 8px; background: var(--field); border-radius: 999px; padding: 0 14px; height: 40px; color: var(--text-2); }
.mk-search input { flex: 1; border: 0; background: none; outline: none; font: inherit; color: var(--text); min-width: 0; }
.mk-navs { display: flex; flex-direction: column; gap: 2px; }
.mk-nav { display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 10px; font-weight: 700; color: var(--text); }
.mk-nav:hover { background: var(--hover); }
.mk-nav.active { background: var(--primary-soft); }
.mk-nav .tile { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; }
/* صورة الفئة داخل الدائرة: النسبة المئوية للارتفاع لا تُحسب داخل grid فكانت الصورة الطولية
   تأخذ ارتفاعها الطبيعي (36×72) وتخرج فوق الأسطر المجاورة — نثبّتها داخل الدائرة ونقصّ الزائد */
.mk-nav .tile { position: relative; overflow: hidden; }
.mk-nav .tile .mk-catimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.mk-cats { display: flex; flex-direction: column; gap: 1px; }
.mk-create { width: 100%; justify-content: center; color: var(--primary); font-weight: 800; }
.mk-loc { display: flex; align-items: center; gap: 6px; color: var(--primary); font-weight: 700; padding: 4px; text-align: start; background: none; border: 0; cursor: pointer; font: inherit; }
.mk-loc-label { font-weight: 800; font-size: 16px; padding: 10px 12px; background: var(--field); border-radius: 10px; }
.mk-locpill { display: inline-flex; align-items: center; gap: 4px; color: var(--primary); font-weight: 700; background: var(--primary-soft); border: 0; border-radius: 999px; padding: 6px 12px; cursor: pointer; font: inherit; font-size: 13px; }
.mk-main { min-width: 0; padding: 14px 20px 60px; }
.mk-mobilebar { display: none; gap: 6px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
.mk-mobilebar .chip { flex: none; }
.mk-mobilebar .chip.primary { background: var(--primary); color: #fff; }
.mk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.mk-head h2 { margin: 0; font-size: 21px; font-weight: 900; }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px 10px; }
.mk-card { display: flex; flex-direction: column; gap: 2px; color: var(--text); min-width: 0; }
.mk-card .mk-img { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--field); border: 1px solid var(--divider); }
.mk-card .mk-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.mk-card:hover .mk-img img { transform: scale(1.03); }
.mk-img .ph { display: grid; place-items: center; height: 100%; color: var(--text-2); }
.mk-tag { position: absolute; top: 8px; inset-inline-start: 8px; background: #fff; color: #111; font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.mk-tag.warn { background: #F59E0B; color: #fff; }
.mk-tag.dark { background: #111827; color: #fff; }
.mk-count { position: absolute; bottom: 8px; inset-inline-start: 8px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 6px; display: flex; align-items: center; gap: 3px; }
.mk-save { position: absolute; top: 6px; inset-inline-end: 6px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: #374151; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .15s; }
.mk-card:hover .mk-save, .mk-save.on { opacity: 1; }
.mk-save.on { color: #EF4444; }
@media (hover: none) { .mk-save { opacity: 1; } }
.mk-price { font-weight: 900; font-size: 17px; margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.mk-neg { font-size: 11px; font-weight: 700; color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); padding: 2px 6px; border-radius: 6px; }
.mk-title { font-size: 15px; }
.mk-where { font-size: 13px; color: var(--text-2); }
.mk-card.sk .mk-img { animation: pulse 1.2s infinite ease-in-out; }
.mk-card.sk .sk-line { height: 12px; border-radius: 6px; background: var(--field); margin-top: 8px; width: 60%; }
.mk-card.sk .sk-line.s { width: 85%; }
.mk-filters .input { padding: 8px 10px; }
.mk-detail { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: 18px; align-items: start; }
.mk-gallery { position: sticky; top: calc(var(--topbar) + 12px); }
.mk-stage { position: relative; background: #0b0b12; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; display: grid; place-items: center; }
.mk-stage img, .mk-stage video { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }
.mk-stage .ph { color: #888; }
.mk-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.88); display: grid; place-items: center; cursor: pointer; }
.mk-arrow.prev { inset-inline-start: 10px; }
.mk-arrow.next { inset-inline-end: 10px; }
.mk-idx { position: absolute; bottom: 10px; inset-inline-end: 12px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; padding: 3px 8px; border-radius: 999px; }
.mk-thumbs { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; }
.mk-thumbs button { position: relative; flex: none; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; background: var(--field); }
.mk-thumbs button.on { border-color: var(--primary); }
.mk-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.mk-thumbs .play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.3); }
.mk-info { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.mk-dtitle { font-size: 24px; font-weight: 900; margin: 0; line-height: 1.3; }
.mk-dprice { font-size: 22px; font-weight: 900; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mk-insight { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; font-size: 13px; }
.mk-insight.great { background: color-mix(in srgb, var(--success) 13%, transparent); color: #15803D; }
.mk-insight.fair { background: var(--primary-soft); color: var(--on-primary-soft); }
.mk-insight.high { background: color-mix(in srgb, var(--warning) 15%, transparent); color: #B45309; }
.mk-actions { display: flex; flex-direction: column; gap: 10px; margin: 6px 0; }
.mk-actions > .btn, .mk-actions > .row > .btn { justify-content: center; }
.mk-msgbox { border: 1px solid var(--divider); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.mk-msgbox .input { flex: 1; }
.mk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mk-stats > div { background: var(--field); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mk-table { display: flex; flex-direction: column; }
.mk-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--divider); font-size: 14px; }
.mk-desc { white-space: pre-line; line-height: 1.7; margin-top: 4px; }
.mk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-map { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--field); color: var(--text); font-weight: 700; }
.mk-seller { border-top: 1px solid var(--divider); padding-top: 12px; margin-top: 6px; display: flex; flex-direction: column; gap: 8px; }
.mk-stars { display: inline-flex; color: #F59E0B; }
.mk-safety { color: var(--text-2); background: var(--field); border-radius: 10px; padding: 8px 10px; }
.mk-modnote { padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.mk-modnote.pending { background: color-mix(in srgb, var(--warning) 14%, transparent); color: #92400E; }
.mk-modnote.rejected { background: color-mix(in srgb, var(--danger) 12%, transparent); color: #B91C1C; }
.mk-modnote.approved { background: color-mix(in srgb, var(--success) 12%, transparent); color: #166534; }
.mk-list { overflow: hidden; }
.mk-offer, .mk-srow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--divider); }
.mk-offer:last-child, .mk-srow:last-child { border-bottom: 0; }
.mk-offer-img { width: 64px; height: 64px; flex: none; border-radius: 10px; overflow: hidden; background: var(--field); display: grid; place-items: center; color: var(--text-2); }
.mk-offer-img img { width: 100%; height: 100%; object-fit: cover; }
.mk-ost { font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--field); color: var(--text-2); white-space: nowrap; }
.mk-ost.pending, .mk-ost.countered, .mk-ost.reserved { background: color-mix(in srgb, var(--warning) 16%, transparent); color: #B45309; }
.mk-ost.accepted, .mk-ost.active, .mk-ost.approved { background: color-mix(in srgb, var(--success) 14%, transparent); color: #15803D; }
.mk-ost.declined, .mk-ost.rejected, .mk-ost.hidden { background: color-mix(in srgb, var(--danger) 12%, transparent); color: #B91C1C; }
.mk-ost.sold { background: #111827; color: #fff; }
.mk-offers { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--divider); border-radius: 12px; overflow: hidden; }
.mk-offers:empty { display: none; }
.mk-offers .mk-sub { padding: 8px 12px 0; }
.mk-dash { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.mk-dash .card { padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.mk-dash .ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.mk-dash b { font-size: 22px; font-weight: 900; }
.mk-form-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; align-items: start; }
.mk-form { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.mk-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: var(--text-2); flex: 1; min-width: 140px; }
.mk-field > .input, .mk-field > select, .mk-field > textarea { color: var(--text); font-weight: 500; }
.mk-attrs { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.mk-attrs:empty { display: none; }
.mk-up { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.mk-up-item { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--field); }
.mk-up-item img, .mk-up-item video { width: 100%; height: 100%; object-fit: cover; }
.mk-cover { position: absolute; bottom: 6px; inset-inline-start: 6px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 6px; }
.mk-up-tools { position: absolute; top: 4px; inset-inline-end: 4px; display: flex; gap: 3px; }
.mk-up-tools button { width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; display: grid; place-items: center; cursor: pointer; }
.mk-up-add { aspect-ratio: 1; border: 2px dashed var(--divider); border-radius: 10px; background: var(--field); color: var(--primary); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; font: inherit; font-weight: 700; }
.mk-suggest { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--primary-soft); color: var(--on-primary-soft); border-radius: 10px; font-size: 13px; }
.mk-preview { position: sticky; top: calc(var(--topbar) + 12px); }
.mk-sellerhead { display: flex; align-items: center; gap: 16px; padding: 18px; flex-wrap: wrap; }
.mk-rate { display: flex; gap: 4px; color: #F59E0B; }
.mk-rate button { background: none; border: 0; color: inherit; cursor: pointer; padding: 2px; }
.mk-mini { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: var(--card); color: var(--text); min-width: 220px; max-width: 280px; border: 1px solid var(--divider); }
.mk-mini img, .mk-mini .ph { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex: none; background: var(--field); display: grid; place-items: center; }
@media (max-width: 1100px) {
  .mk { grid-template-columns: 290px minmax(0, 1fr); }
  .mk-detail { grid-template-columns: minmax(0, 1fr); }
  .mk-gallery { position: static; }
  .mk-form-wrap { grid-template-columns: minmax(0, 1fr); }
  .mk-preview { display: none; }
  .mk-dash { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .mk { grid-template-columns: minmax(0, 1fr); }
  .mk-side { display: none; position: fixed; inset: var(--topbar) 0 0 0; z-index: 90; height: auto; }
  .mk.side-open .mk-side { display: flex; }
  .mk-mobilebar { display: flex; }
  .mk-main { padding: 10px 12px 80px; }
  .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; }
  .mk-dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-stats { grid-template-columns: repeat(2, 1fr); }
  .mk-srow { flex-wrap: wrap; }
}

/* ─── الدردشة العائمة ─────────────────────────────────────────────────── */
.cdock { position: fixed; bottom: 0; inset-inline-end: 84px; z-index: 120; display: flex; align-items: flex-end; gap: 10px; pointer-events: none; }
.cdock.hidden { display: none; }
.cdock-wins { display: flex; align-items: flex-end; gap: 10px; }
.cdock-win { pointer-events: auto; width: 338px; height: 455px; background: var(--card); border-radius: 12px 12px 0 0; box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--divider); border-bottom: 0; animation: dockIn .18s ease-out; }
.cdock-win.flash .head { animation: dockFlash 1s ease-in-out 2; }
@keyframes dockIn { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dockFlash { 50% { background: var(--primary-soft); } }
.cdock-pane { height: 100%; display: flex; flex-direction: column; min-height: 0; border: 0; border-radius: 0; }
.cdock-pane .head { padding: 6px 8px; gap: 8px; min-height: 52px; }
.cdock-pane .head .bold { font-size: 14px; }
.cdock-pane .msgs { flex: 1; min-height: 0; padding: 8px; }
.cdock-pane .msg .b { font-size: 14px; }
.cdock-pane .chat-input { padding: 6px 8px; }
.cdock-actions { display: flex; gap: 0; }
.cdock-actions .icon-btn { width: 30px; height: 30px; color: var(--primary); }
.cdock-bubbles { pointer-events: auto; display: flex; flex-direction: column-reverse; gap: 10px; margin-bottom: 18px; position: fixed; bottom: 0; inset-inline-end: 16px; padding-bottom: 6px; }
.cdock-bubble { position: relative; }
.cdock-bubble-btn { border: 0; padding: 0; background: none; border-radius: 50%; cursor: pointer; position: relative; box-shadow: 0 4px 14px rgba(0,0,0,.2); display: block; }
.cdock-bubble-btn .badge { position: absolute; top: -2px; inset-inline-end: -2px; }
.cdock-bubble.has-unread .cdock-bubble-btn { animation: dockPop .4s ease-out; }
@keyframes dockPop { 50% { transform: scale(1.12); } }
.cdock-bubble-x { position: absolute; top: -6px; inset-inline-start: -6px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: var(--card); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.25); display: none; place-items: center; cursor: pointer; }
.cdock-bubble:hover .cdock-bubble-x { display: grid; }
.cdock-preview { position: absolute; bottom: 6px; inset-inline-end: 62px; width: 230px; background: var(--card); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 8px 12px; display: flex; flex-direction: column; font-size: 13px; animation: dockIn .2s ease-out; }
.cdock-preview span { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdock-more { width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--card); box-shadow: 0 4px 14px rgba(0,0,0,.2); font-weight: 900; cursor: pointer; }
body[data-view="chat"] .cdock { display: none; }
@media (max-width: 899px) { .cdock { display: none; } }
.chat-blocked { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--field); color: var(--text-2); font-size: 14px; border-top: 1px solid var(--divider); }

/* ─── الفيديوهات القصيرة: الاهتمامات والحد ───────────────────────────── */
.int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.int-chip { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 14px; border: 2px solid var(--divider); background: var(--card); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; text-align: start; transition: transform .1s; }
.int-chip:active { transform: scale(.97); }
.int-chip .em { font-size: 22px; }
.int-chip.on { border-color: var(--primary); background: var(--primary-soft); color: var(--on-primary-soft); }
.int-chip .ico { margin-inline-start: auto; }
.int-samples { display: flex; gap: 3px; }
.int-samples img { width: 32px; height: 48px; object-fit: cover; border-radius: 6px; }
.short-limit { background: var(--field); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.short-limit.hidden { display: none; }
@keyframes pulse { 50% { opacity: .55; } }

.mk-catimg { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ─── خدمات وكّل (العمود الأيمن) ─── */
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.svc-tile { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; background: var(--field); color: var(--text); font-weight: 700; font-size: 13px; min-width: 0; transition: background .15s; }
.svc-tile:hover { background: var(--hover); }
.svc-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.svc-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pin-badge { display: inline-flex; align-items: center; gap: 2px; color: var(--primary); font-weight: 700; }
.view-as-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 10px; background: var(--primary-soft); color: var(--on-primary-soft); }
.qr-link { font-size: 12px; color: var(--text-2); word-break: break-all; text-align: center; }
.share-card-canvas { width: 100%; max-width: 300px; aspect-ratio: 9 / 16; height: auto; border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.18); display: block; margin: 0 auto; }

/* ─── الإحصائيات (Insights) ─────────────────────────────────────── */
.ins-root { max-width: 1180px; margin: 0 auto; padding: 0 4px 30px; }
.ins-head { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin: 6px 2px 14px; }
.ins-head h1 { font-size: 26px; margin: 0; font-weight: 900; display: flex; align-items: center; gap: 6px; }
.ins-periods { flex-wrap: wrap; }
.ins-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 12px; }
.ins-kpi { padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.ins-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.ins-val { font-size: 26px; font-weight: 900; line-height: 1.1; }
.ins-delta { font-weight: 800; font-size: 12px; padding: 2px 8px; border-radius: 999px; }
.ins-delta.up { color: #059669; background: color-mix(in srgb, #10B981 14%, transparent); }
.ins-delta.down { color: #DC2626; background: color-mix(in srgb, #EF4444 14%, transparent); }
.ins-delta.flat { color: var(--text-2); background: var(--field); }
.ins-card { padding: 16px; margin-bottom: 12px; }
.ins-card h3 { margin: 0 0 10px; font-size: 16px; font-weight: 800; }
.ins-card h4 { margin: 10px 0 6px; }
.ins-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ins-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ins-grid2 > .ins-card, .ins-grid3 > .ins-card { margin-bottom: 0; }
.ins-grid2, .ins-grid3 { margin-bottom: 12px; }
.ins-chart { position: relative; }
.ins-svg { width: 100%; height: auto; display: block; overflow: visible; }
.ins-grid { stroke: var(--divider); stroke-width: 1; }
.ins-axis { fill: var(--text-2); font-size: 11px; }
.ins-cursor { stroke: var(--text-2); stroke-dasharray: 3 3; }
.ins-tip { position: absolute; top: 6px; min-width: 140px; background: var(--card); border: 1px solid var(--divider); border-radius: 10px; padding: 8px 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); font-size: 12.5px; pointer-events: none; z-index: 2; }
.ins-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-inline-end: 6px; vertical-align: middle; }
.ins-donut { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.ins-donut-n { font-size: 20px; font-weight: 900; fill: var(--text); }
.ins-legend { display: flex; gap: 8px; align-items: center; padding: 4px 0; }
.ins-ld { display: flex; gap: 22px; margin-bottom: 8px; }
.ins-ld b { font-size: 18px; }
.ins-split { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--field); margin: 12px 0 8px; }
.ins-split span { display: block; height: 100%; }
.ins-hbar { display: grid; grid-template-columns: 110px 1fr 50px; gap: 8px; align-items: center; padding: 3px 0; font-size: 13.5px; }
.ins-hbar .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-hbar .bar { height: 8px; background: var(--field); border-radius: 999px; overflow: hidden; }
.ins-hbar .bar i { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.ins-hbar b { text-align: end; }
.ins-tips { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ins-tips li { background: color-mix(in srgb, var(--primary) 7%, transparent); border-radius: 10px; padding: 10px 12px; }
.ins-posts { display: flex; flex-direction: column; }
.ins-prow { display: flex; gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--divider); color: inherit; }
.ins-prow:hover { background: var(--hover, var(--field)); }
.ins-thumb { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex: none; background: var(--field); }
.ins-thumb.ph { display: grid; place-items: center; color: var(--text-2); }
.ins-ptext { font-weight: 700; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ins-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; font-size: 13px; color: var(--text-2); }
.ins-stat b { color: var(--text); }
.ins-stat.rate { color: #059669; font-weight: 800; }
.lvl-btn { padding-inline: 10px; }
@media (max-width: 900px) { .ins-grid3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .ins-grid2 { grid-template-columns: minmax(0, 1fr); }
  .ins-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ins-val { font-size: 21px; }
  .ins-head h1 { font-size: 22px; }
  .ins-hbar { grid-template-columns: 90px 1fr 40px; }
}

/* رمز الاتصال بجانب الهاتف (الدولة تُكتشف تلقائياً) */
.dial-select { width: auto; flex: none; max-width: 118px; padding-inline: 10px 26px; font-variant-numeric: tabular-nums; }

/* صفحات العرض العريض (الملف الشخصي، الصفحات، المجموعات، الإحصائيات): تملأ المساحة بجانب القائمة
   بدل عمود 940px في الوسط يترك فراغاً كبيراً على الشاشات العريضة */
body[data-view="wide"] .main-wide { max-width: 1240px; margin-inline: 0 auto; }
body[data-view="wide"] .ins-root { max-width: 1240px; margin-inline: 0 auto; }
@media (min-width: 1400px) { body[data-view="wide"] .profile-grid { grid-template-columns: 400px minmax(0, 1fr); } }

/* أيقونة بجانب نص تبويبات الملف الشخصي */
.profile-tabs button, .tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* إعدادات المحادثة */
.cs { display: flex; flex-direction: column; gap: 2px; }
.cs-head { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 0 10px; }
.cs h4 { margin: 12px 4px 4px; font-size: 12.5px; color: var(--text-2); font-weight: 800; }
.cs-row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; text-align: start; width: 100%; }
button.cs-row:hover { background: var(--hover); }
.cs-row.danger b { color: var(--danger); }
.cs-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.cs-warn { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); font-weight: 700; }
.cs-points { margin: 0; padding-inline-start: 20px; display: grid; gap: 4px; color: var(--text-2); font-size: 14px; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:disabled { opacity: .45; cursor: not-allowed; }
input.switch { appearance: none; width: 42px; height: 24px; border-radius: 999px; background: var(--divider); position: relative; cursor: pointer; transition: background .15s; flex: none; }
input.switch::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: inset-inline-start .15s; }
input.switch:checked { background: var(--primary); }
input.switch:checked::after { inset-inline-start: 21px; }

/* معاينة وقصّ صورة الملف/الغلاف قبل الرفع */
.pc { display: flex; flex-direction: column; gap: 12px; }
.pc-wrap { position: relative; margin: 0 auto; width: 100%; border-radius: 14px; overflow: hidden; background: #0f172a; touch-action: none; user-select: none; }
.pc-wrap.avatar { max-width: 320px; }
.pc-stage { display: block; width: 100%; height: auto; cursor: grab; }
.pc-stage:active { cursor: grabbing; }
.pc-mask { position: absolute; inset: 0; pointer-events: none; border-radius: 50%; box-shadow: 0 0 0 999px rgba(15, 23, 42, .55); outline: 2px solid rgba(255, 255, 255, .85); outline-offset: -2px; }
.pc-hint { position: absolute; bottom: 8px; inset-inline-start: 50%; transform: translateX(50%); background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; padding: 3px 10px; border-radius: 999px; display: flex; gap: 6px; align-items: center; pointer-events: none; white-space: nowrap; }
[dir="ltr"] .pc-hint { transform: translateX(-50%); }
.pc-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pc-tools input[type=range] { min-width: 140px; accent-color: var(--primary); }
.pc-label { font-size: 12.5px; font-weight: 800; color: var(--text-2); }
.pc-preview { position: relative; border-radius: 14px; overflow: hidden; background: var(--card); border: 1px solid var(--divider); padding-bottom: 46px; }
.pc-pv-cover { aspect-ratio: 1500 / 508; background: var(--brand); }
.pc-pv-cover canvas, .pc-pv-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-pv-av { position: absolute; bottom: 10px; inset-inline-start: 16px; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; border: 4px solid var(--card); background: var(--field); display: grid; place-items: center; }
.pc-pv-av canvas, .pc-pv-av img { width: 100%; height: 100%; object-fit: cover; }
.pc-pv-name { position: absolute; bottom: 14px; inset-inline-start: 114px; font-size: 16px; }
.pc-pv-empty { width: 100%; height: 100%; background: var(--brand); display: grid; place-items: center; color: var(--primary); }
.pc-pv-empty.round { background: var(--field); }

/* تبويبات الروابط (مدير الإعلانات...) بنفس شكل تبويبات الأزرار */
.tabs a.tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 16px; font-weight: 600; color: var(--text-2); border-bottom: 3px solid transparent; white-space: nowrap; text-decoration: none; }
.tabs a.tab:hover { background: var(--hover); }
.tabs a.tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 800; }

/* الدعوات و«ادعُ واربح» */
.inv-list { max-height: 50vh; overflow-y: auto; }
.inv-all { border-bottom: 1px solid var(--divider); font-weight: 700; }
.badge-n { background: var(--field); border-radius: 999px; padding: 0 7px; font-size: 11px; margin-inline-start: 4px; }
.ref-share { display: flex; gap: 6px; flex-wrap: wrap; }
.ref-share .btn { flex: 1; min-width: 80px; }
.ref-wa { background: #25D366; color: #fff; } .ref-fb { background: #1877F2; color: #fff; } .ref-tg { background: #229ED9; color: #fff; } .ref-x { background: #111; color: #fff; }
.ref-banner { display: flex; gap: 8px; align-items: center; background: color-mix(in srgb, #16A34A 12%, transparent); color: #15803D; font-weight: 700; padding: 8px 12px; border-radius: 12px; margin-bottom: 10px; }
.ref-banner[hidden] { display: none; }

/* صفحة «الإحالة والربح» */
.ref-page { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin: 0 auto; width: 100%; }
.ref-hero { display: flex; gap: 16px; align-items: center; padding: 22px; background: linear-gradient(135deg, #be123c, #e11d48 55%, #f97316); color: #fff; border: 0; }
.ref-hero h1 { margin: 0 0 4px; font-size: 24px; font-weight: 900; }
.ref-hero p { margin: 0; opacity: .92; }
.ref-hero-ico { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: rgba(255,255,255,.18); flex: none; }
.ref-box { display: flex; flex-direction: column; gap: 10px; }
.ref-label { font-weight: 800; margin-bottom: 8px; }
/* سطر الرابط: النصّ يقصّ والزرّ ثابت — بلا تنسيق كانا يتراكبان */
.ref-link { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-sm);
  background: var(--field); border: 1px solid var(--divider); font-size: 13px; }
.ref-link .grow { min-width: 0; }
.ref-link .btn { flex: none; }
.ref-code { margin: 6px 2px 10px; }
.ref-stats4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ref-stat { background: var(--card); border: 1px solid var(--divider); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.ref-stat b { font-size: 19px; }
.ref-stat span:last-child { font-size: 12.5px; color: var(--text-2); }
.ref-stat-ico { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; }
.ref-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ref-steps li { display: flex; gap: 10px; align-items: flex-start; }
.ref-steps .n { width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, #e11d48 14%, transparent); color: #e11d48; font-weight: 900; display: grid; place-items: center; flex: none; font-size: 13px; }
@media (max-width: 760px) { .ref-stats4 { grid-template-columns: repeat(2, 1fr); } .ref-hero { padding: 16px; } .ref-hero h1 { font-size: 20px; } }

/* ─── /chat — تصميم مطوّر: قسما الرسائل والسوق ─── */
.chat-wrap { background: var(--card); }
.chat-list { background: var(--card); }
.chat-list .head { padding: 16px 16px 10px; }
.chat-list .head h2 { font-size: 24px; letter-spacing: -.2px; }
.chat-search { display: flex; align-items: center; gap: 8px; margin: 0 14px; background: var(--field); border-radius: 999px; padding: 0 14px; color: var(--text-2); border: 1px solid transparent; transition: border-color .15s, background .15s; }
.chat-search:focus-within { border-color: var(--primary); background: var(--card); }
.chat-search input { flex: 1; border: 0; background: transparent; outline: none; padding: 10px 0; color: var(--text); font: inherit; min-width: 0; }
.chat-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin: 12px 14px 4px; padding: 4px; background: var(--field); border-radius: 14px; }
.chat-seg-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px; border-radius: 10px; font-weight: 800; font-size: 14px; color: var(--text-2); transition: background .15s, color .15s; }
.chat-seg-btn:hover { color: var(--text); }
.chat-seg-btn.active { background: var(--card); color: var(--primary); box-shadow: 0 1px 4px rgba(15, 23, 42, .1); }
.chat-seg-btn .n { background: var(--danger); color: #fff; border-radius: 999px; font-size: 11px; min-width: 18px; padding: 0 5px; line-height: 18px; text-align: center; }
.chat-filters { padding: 8px 14px 6px; flex-wrap: wrap; overflow: visible; row-gap: 6px; }
.chat-list .scroll { padding: 2px 8px 10px; }
.conv { gap: 12px; padding: 10px; border-radius: 14px; position: relative; transition: background .12s; }
.conv + .conv::before { content: ''; position: absolute; top: 0; inset-inline: 74px 10px; border-top: 1px solid var(--divider); opacity: .6; }
.conv:hover::before, .conv:hover + .conv::before, .conv.active::before, .conv.active + .conv::before { opacity: 0; }
.conv.active { background: var(--primary-soft); }
.cv-top { display: flex; align-items: center; gap: 6px; }
.cv-top .t { font-weight: 700; font-size: 15px; }
.cv-top .tm { font-size: 12px; color: var(--text-2); flex: none; }
.conv.unread .cv-top .tm { color: var(--primary); font-weight: 700; }
.cv-sub { display: flex; align-items: center; gap: 4px; margin-top: 2px; min-width: 0; }
.cv-sub .who { font-size: 13px; color: var(--text-2); flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-sub .tk { color: var(--text-2); display: inline-flex; flex: none; }
.cv-sub .tk.seen { color: var(--primary); }
.conv .ub { margin-inline-start: auto; flex: none; line-height: 20px; }
.cv-mk { position: relative; width: 52px; height: 52px; border-radius: 12px; background: var(--field); flex: none; display: grid; place-items: center; color: var(--text-2); }
.cv-mk img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.cv-mk-av { position: absolute; bottom: -4px; inset-inline-end: -4px; border-radius: 50%; border: 2px solid var(--card); display: flex; }
.cv-tags { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.cv-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; }
.cv-tag.buy { background: color-mix(in srgb, #0EA5E9 14%, transparent); color: #0369A1; }
.cv-tag.sell { background: color-mix(in srgb, #F97316 15%, transparent); color: #C2410C; }
.cv-price { font-size: 12px; font-weight: 800; color: var(--text); }
.chat-pane { background: var(--bg); }
.chat-pane .head { background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(10px); position: relative; z-index: 2; }
.chat-pane .msgs { background:
    radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--primary) 5%, transparent), transparent 40%),
    radial-gradient(circle at 85% 80%, color-mix(in srgb, var(--violet) 5%, transparent), transparent 40%),
    var(--bg); padding: 18px 18px; gap: 2px; }
.msg .b { border-radius: 18px; padding: 8px 14px; line-height: 1.5; box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
.msg:not(.me) .b { border-end-start-radius: 6px; }
.msg.me .b { background: linear-gradient(135deg, var(--violet), var(--primary)); border-end-end-radius: 6px; }
.msg.me .b.media, .msg .b.media { background: transparent; box-shadow: none; }
.msg-day { font-weight: 700; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.chat-input { background: var(--card); gap: 8px; }
.chat-input .inbox { border: 1px solid transparent; transition: border-color .15s; }
.chat-input .inbox:focus-within { border-color: var(--primary); background: var(--card); }
.chat-input .send { width: 42px; height: 42px; background: linear-gradient(135deg, var(--violet), var(--primary)); box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 35%, transparent); }
.chat-pin { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--card); border-bottom: 1px solid var(--divider); }
.chat-pin img, .chat-pin .ph { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--field); display: grid; place-items: center; flex: none; }
.chat-pin:hover { background: var(--hover); }
.chat-welcome { text-align: center; max-width: 360px; padding: 24px; }
.chat-welcome h3 { margin: 12px 0 6px; font-size: 22px; font-weight: 900; }
.chat-welcome p { margin: 0 0 16px; }
.cw-ico { width: 84px; height: 84px; border-radius: 28px; display: inline-grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--violet), var(--primary)); box-shadow: 0 12px 30px color-mix(in srgb, var(--primary) 30%, transparent); }
.mk-msg-btn { margin-bottom: 8px; }

/* أيقونة عنوان الصفحة + تبويبات بأيقونات (الأصدقاء/المجموعات/الصفحات) */
.page-head .ph-ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.tabs > button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.tabs > button .ico { flex: none; }

/* ─── الفيديوهات القصيرة: تبويبا «لك/أتابعهم» + شريط «فيديوهات مشابهة» ─── */
.shorts-wrap { position: relative; background: #000; }
.shorts-wrap.with-side { display: grid; grid-template-columns: minmax(0, 1fr); }
.sh-main { position: relative; min-width: 0; }
.sh-tabs { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(0, 0, 0, .45); backdrop-filter: blur(10px); }
.sh-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; color: rgba(255, 255, 255, .78); font-weight: 800; font-size: 14px; transition: background .15s, color .15s; }
.sh-tabs button:hover { color: #fff; }
.sh-tabs button.active { background: #fff; color: #111; }
.sh-side { display: none; }
@media (min-width: 1100px) {
  .shorts-wrap.with-side { grid-template-columns: minmax(0, 1fr) 340px; }
  .sh-side { display: flex; flex-direction: column; height: calc(100vh - var(--topbar)); background: #0b0b0f; border-inline-start: 1px solid #1f1f27; color: #fff; }
  .sh-side-head { display: flex; align-items: center; gap: 8px; padding: 16px 16px 10px; font-size: 16px; }
  .sh-sim-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px 12px 16px; align-content: start; scrollbar-width: thin; }
  .sh-sim { position: relative; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: #1a1a22; text-align: start; }
  .sh-sim img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
  .sh-sim:hover img { transform: scale(1.05); }
  .sh-sim::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); }
  .sh-sim-v { position: absolute; top: 6px; inset-inline-start: 6px; z-index: 1; display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 800; background: rgba(0, 0, 0, .5); padding: 1px 7px; border-radius: 999px; }
  .sh-sim-t { position: absolute; bottom: 6px; inset-inline: 8px; z-index: 1; font-size: 12px; font-weight: 700; line-height: 1.35; max-height: 2.7em; overflow: hidden; }
}
@media (max-width: 760px) { .sh-tabs { top: calc(10px + env(safe-area-inset-top)); } }

/* ─── السوق: بانر، فئات دائرية، فرز سريع، «شاهدتها مؤخراً»، بطاقات أوضح ─── */
.mk-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; padding: 22px 24px; margin-bottom: 14px; border-radius: 18px; color: #fff;
  background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.18), transparent 45%), linear-gradient(135deg, #EA580C, #F97316 45%, #F59E0B); box-shadow: 0 10px 30px rgba(234, 88, 12, .25); }
.mk-hero-txt { flex: 1; min-width: 0; position: relative; z-index: 1; }
.mk-hero h2 { margin: 0 0 4px; font-size: 26px; font-weight: 900; }
.mk-hero p { margin: 0 0 12px; opacity: .92; }
.mk-hero-search { display: flex; align-items: center; gap: 8px; background: #fff; color: var(--text-2); border-radius: 999px; padding: 4px 4px 4px 14px; max-width: 520px; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
[dir="rtl"] .mk-hero-search { padding: 4px 14px 4px 4px; }
.mk-hero-search input { flex: 1; border: 0; outline: none; background: transparent; padding: 8px 0; font: inherit; color: #111; min-width: 0; }
.mk-hero .btn-light { background: #fff; color: #C2410C; font-weight: 800; }
.mk-hero .btn-ghost-light { background: rgba(255,255,255,.18); color: #fff; font-weight: 700; }
.mk-hero-art { width: 120px; height: 120px; border-radius: 32px; background: rgba(255,255,255,.16); display: grid; place-items: center; transform: rotate(-8deg); flex: none; }
.mk-hero-art .ico { width: 64px; height: 64px; }
.mk-catstrip { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 12px; margin-bottom: 6px; scrollbar-width: none; }
.mk-catstrip::-webkit-scrollbar { display: none; }
.mk-catbubble { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 78px; flex: none; text-align: center; }
.mk-catbubble .b { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; transition: transform .15s; }
.mk-catbubble .b .mk-catimg { width: 34px; height: 34px; object-fit: contain; }
.mk-catbubble:hover .b { transform: translateY(-2px) scale(1.04); }
.mk-catbubble .n { font-size: 12px; font-weight: 700; width: 100%; }
.mk-sortbar { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 0 0 12px; color: var(--text-2); scrollbar-width: none; }
.mk-sortbar::-webkit-scrollbar { display: none; }
.mk-sortbar .chip { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.mk-sortbar .chip.desc .ico { transform: scaleY(-1); }
.mk-recent-wrap { margin-bottom: 16px; }
.mk-recent { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 180px); gap: 10px; overflow-x: auto; padding: 8px 0 4px; scrollbar-width: thin; }
/* صفحة الإعلان: بطاقات منفصلة وأزرار تواصل واضحة */
.mk-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mk-col .card + .card { margin-top: 0; }
.mk-section { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.mk-section .mk-h3 { margin: 0; font-size: 17px; }
.mk-section .mk-desc { margin-top: 0; }
.mk-section .mk-seller { border-top: 0; padding-top: 0; margin-top: 0; }
.mk-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--text-2); }
.mk-meta span { display: inline-flex; align-items: center; gap: 4px; }
.mk-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.mk-fact { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 12px; background: var(--field); min-width: 0; overflow-wrap: anywhere; }
.mk-fact b { font-size: 14px; }
.mk-contact { display: flex; gap: 8px; }
.mk-contact .btn { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; }
.mk-c-wa, .mk-c-wa:hover { background: #128C7E; color: #fff; }
.mk-c-label { display: none; }
.mk-stickybar { display: none; }
@media (max-width: 760px) {
  .mk-section { padding: 14px; }
  /* زر الاتصال باسمه لا بالرقم في الهاتف: الأزرار الثلاثة تتسع في سطر واحد */
  .mk-c-label { display: inline; }
  .mk-c-num { display: none; }
  .mk-stickybar { display: block; position: fixed; z-index: 43; inset-inline: 0; bottom: calc(var(--bottomnav) + var(--safe-b)); padding: 8px 12px; background: var(--card); border-top: 1px solid var(--divider); }
  .mk-detail.has-bar { padding-bottom: 64px; }
  .mk-col .mk-contact { display: none; }
  /* «قدّم عرض سعر» بسطر كامل: كان نصه يُقتطع بجانب الحفظ والمشاركة والإبلاغ */
  .mk-actions .btn-brand { flex: 1 1 100%; }
}
/* البطاقة نفسها في السوق وفي التطبيق: سطح + حدّ خفيف + صورة بلا زوايا داخلية + سطران محجوزان للعنوان */
.mk-card { gap: 0; overflow: hidden; background: var(--card); border: 1px solid var(--divider); border-radius: 14px; transition: transform .15s, box-shadow .15s; }
.mk-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.mk-card .mk-img { border: 0; border-radius: 0; }
.mk-card .mk-img img { opacity: 0; transition: opacity .25s, transform .3s; }
.mk-card .mk-img img.in { opacity: 1; }
.mk-card:hover .mk-img img { transform: scale(1.04); }
.mk-card.premium { border-color: #F59E0B; box-shadow: 0 0 0 1px #F59E0B; }
.mk-premium { position: absolute; bottom: 8px; inset-inline-end: 8px; padding: 2px 7px; border-radius: 6px; background: linear-gradient(90deg, #F59E0B, #F97316); color: #fff; font-size: 11px; font-weight: 800; }
.mk-body { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; min-width: 0; }
.mk-card .mk-price { margin-top: 0; font-size: 16px; min-width: 0; }
/* السعر لا يُقتطع: شارة «قابل للتفاوض» هي التي تضيق حين لا يتسع السطر */
.mk-card .mk-price .ellipsis { flex: 0 1 auto; min-width: 0; }
.mk-card .mk-neg { flex: 0 1000 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mk-card .mk-title { font-size: 14px; line-height: 1.35; min-height: calc(2 * 1.35em); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.mk-card .mk-where { font-size: 12.5px; margin-top: auto; }
.mk-card.sk .sk-line { margin-top: 2px; }
.mk-where .ico { vertical-align: -2px; opacity: .7; }
.mk-ago { color: var(--text-2); }
@media (max-width: 760px) {
  .mk-hero { padding: 16px; border-radius: 14px; }
  .mk-hero h2 { font-size: 20px; }
  .mk-hero p { font-size: 13.5px; }
  .mk-hero-art { display: none; }
}

/* شارتا «جديد/رائج» في الخلاصة */
.rr-chip { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; font-size: 11.5px; padding: 0 7px; border-radius: 999px; line-height: 18px; }
.rr-chip.new { color: var(--primary); background: var(--primary-soft); }
.rr-chip.hot { color: #C2410C; background: color-mix(in srgb, #F97316 14%, transparent); }
/* «السجلات» */
.al-note { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--text-2); margin-bottom: 10px; }
.al-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 8px; scrollbar-width: none; }
.al-chips .chip { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.al-card { padding: 4px 6px; }
.al-day { font-size: 12.5px; font-weight: 800; color: var(--text-2); padding: 12px 10px 4px; }
.al-row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; }
a.al-row:hover { background: var(--hover); }
.al-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.al-what { font-size: 14px; }
.al-post { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.al-thumb { position: relative; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; flex: none; background: var(--field); }
.al-thumb img { width: 100%; height: 100%; object-fit: cover; }
.al-thumb.vid::after { content: '▶'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 14px; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.al-bar { height: 5px; border-radius: 999px; background: var(--field); margin-top: 6px; overflow: hidden; max-width: 220px; }
.al-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--violet), var(--primary)); border-radius: 999px; }

/* زر التواصل المخصّص في الملف الشخصي */
.cb-btn { font-weight: 800; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.cb-btn:hover { filter: brightness(1.06); }
.cb-kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cb-kind { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 12px; border: 1.5px solid var(--divider); font-weight: 700; font-size: 13px; }
.cb-kind .i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.cb-kind.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 7%, transparent); }
.cb-preview { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px; border-radius: 12px; background: var(--field); }

.post-hidden-note { display: flex; align-items: center; gap: 10px; padding: 14px 16px; color: var(--text-2); font-size: 14px; }

/* ترجمة المنشور */
.tr-box { padding: 0 16px 6px; }
.tr-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--text-2); padding: 2px 0; }
.tr-btn:hover { color: var(--primary); }
.tr-out { margin-top: 6px; padding: 8px 12px; border-inline-start: 3px solid var(--primary); background: var(--field); border-radius: 8px; white-space: pre-wrap; }
.tr-label { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-2); margin-bottom: 4px; }

/* استطلاعات الرأي */
.poll { display: flex; flex-direction: column; gap: 6px; padding: 4px 16px 10px; }
.poll-opt { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--divider); text-align: start; font-weight: 700; min-height: 44px; background: var(--card); }
.poll-opt:not(.res):hover { border-color: var(--primary); }
.poll-opt.pick { border-color: var(--primary); background: var(--primary-soft); }
.poll-opt i { position: absolute; inset-block: 0; inset-inline-start: 0; background: color-mix(in srgb, var(--primary) 14%, transparent); transition: width .4s; }
.poll-opt.mine i { background: color-mix(in srgb, var(--primary) 26%, transparent); }
.poll-opt .poll-t, .poll-opt b { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.poll-ck { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--text-2); display: inline-grid; place-items: center; }
.poll-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* المناسبات */
.event-card { display: flex; gap: 14px; margin: 4px 16px 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--divider); background: linear-gradient(135deg, color-mix(in srgb, #E11D48 6%, var(--card)), var(--card)); }
.ev-date { width: 58px; flex: none; border-radius: 12px; overflow: hidden; text-align: center; border: 1px solid var(--divider); background: var(--card); align-self: flex-start; }
.ev-date .m { display: block; background: #E11D48; color: #fff; font-size: 11.5px; font-weight: 800; padding: 2px 0; }
.ev-date b { display: block; font-size: 24px; padding: 4px 0 6px; }
.ev-title { font-weight: 900; font-size: 16px; margin-bottom: 2px; }
/* المنشئ: استطلاع/مناسبة/مسودة */
.cp-extra { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--divider); border-radius: 14px; margin-bottom: 8px; }
.cp-draft { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); background: var(--field); border-radius: 10px; padding: 6px 10px; margin-bottom: 8px; }
.cp-draft.hidden { display: none; }

/* رابط «الإحصائيات» ضمن تبويبات الملف الشخصي (بنفس شكل التبويب) */
.tabs > a.tab-link { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 16px; font-weight: 600; color: var(--primary); border-bottom: 3px solid transparent; white-space: nowrap; }
.tabs > a.tab-link:hover { background: var(--hover); }

/* ─── عارض الصور مع تفاصيل المنشور (مثل فيسبوك) ─── */
.post-theater { position: fixed; inset: 0; z-index: 140; display: grid; grid-template-columns: 400px minmax(0, 1fr); background: #000; }
.pt-panel { background: var(--card); display: flex; flex-direction: column; min-height: 0; border-inline-end: 1px solid #111; }
.pt-scroll { flex: 1; overflow-y: auto; min-height: 0; }
.pt-scroll .post-tail { border-top: 1px solid var(--divider); }
.pt-comments { padding: 10px 14px 4px; border-top: 1px solid var(--divider); }
.pt-box { border-top: 1px solid var(--divider); padding: 8px 12px; background: var(--card); }
.pt-media { position: relative; min-width: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pt-stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: auto; }
.pt-stage img, .pt-stage video { max-width: 100%; max-height: 100vh; object-fit: contain; transition: transform .2s; cursor: zoom-in; user-select: none; }
.pt-close { position: absolute; top: 12px; inset-inline-end: 12px; background: rgba(255,255,255,.14); color: #fff; width: 42px; height: 42px; }
.pt-close:hover, .pt-tools .icon-btn:hover, .pt-nav:hover { background: rgba(255,255,255,.26); }
.pt-tools { position: absolute; top: 12px; inset-inline-start: 12px; display: flex; gap: 6px; }
.pt-tools .icon-btn { background: rgba(255,255,255,.14); color: #fff; width: 40px; height: 40px; }
.pt-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.16); color: #fff; width: 50px; height: 50px; }
.pt-prev { inset-inline-start: 16px; }
.pt-next { inset-inline-end: 16px; }
.pt-count { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); color: #fff; background: rgba(0,0,0,.5); padding: 2px 12px; border-radius: 999px; font-size: 13px; }
.pt-count:empty { display: none; }
@media (max-width: 1100px) { .post-theater { grid-template-columns: 360px minmax(0, 1fr); } }
.pt-scroll { overflow-x: hidden; }
.pt-panel .post-actions { flex-wrap: wrap; gap: 2px; }
.pt-panel .post-actions > * { flex: 1 1 auto; min-width: 0; padding-inline: 6px; }
.pt-panel .post-actions .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-panel .post-actions > :not(:first-child) .lbl { display: none; }
.pt-panel .post-actions > * { justify-content: center; }

/* عارض الصور (140) تحت النوافذ (170) والرسائل (200): القائمة ⋯ والمشاركة وتأكيد حذف التعليق تظهر فوقه.
   والقوائم المنبثقة (popover) فوقه أيضاً عند فتحها من داخله */
.popover { z-index: 175; }
.pt-panel .post-actions button.on { color: var(--primary); }

/* شريط دعوة إشعارات المتصفح */
.wp-bar { position: fixed; z-index: 120; bottom: calc(18px + var(--safe-b)); inset-inline-start: 18px; max-width: min(460px, calc(100vw - 36px)); display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--divider); border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow-lg); animation: pop .2s ease-out; }
.wp-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--violet), var(--primary)); flex: none; }
@media (max-width: 760px) { .wp-bar { bottom: calc(var(--bottomnav) + 10px + var(--safe-b)); inset-inline: 10px; max-width: none; flex-wrap: wrap; } }

/* شريط «انضم» لزائر الإعلانات (guest.js) */
.gw-bar { position: fixed; z-index: 110; bottom: calc(18px + var(--safe-b)); left: 0; right: 0; margin-inline: auto; width: min(520px, calc(100vw - 36px)); display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--divider); border-radius: 16px; padding: 10px 8px 10px 12px; box-shadow: var(--shadow-lg); animation: pop .2s ease-out; }
.gw-bar .icon-btn { width: 32px; height: 32px; }
@media (max-width: 760px) {
  .gw-bar { bottom: calc(var(--bottomnav) + 8px + var(--safe-b)); width: calc(100vw - 20px); }
  .gw-bar .small { display: none; }
  body:has(.gw-bar) .fab { bottom: calc(var(--bottomnav) + 84px + var(--safe-b)); }
}

/* شريط «حمّل تطبيق وكّل» لزائر الهاتف (app-bar.js): جزء من الصفحة لا طبقة فوقها */
.app-bar { display: flex; align-items: center; gap: 10px; max-width: 640px; margin: 0 auto 8px; padding-block: 8px; padding-inline: 10px 4px; background: var(--card); border: 1px solid var(--divider); border-radius: 14px; }
.app-bar-stick { position: sticky; top: calc(var(--topbar) + 6px); z-index: 30; box-shadow: var(--shadow-lg); }
.app-bar-logo { width: 38px; height: 38px; border-radius: 10px; flex: none; }
.app-bar-text { min-width: 0; }
.app-bar-t { font-weight: 800; font-size: 14px; line-height: 1.3; }
.app-bar-s { font-size: 12px; color: var(--text-2); line-height: 1.35; }
.app-bar-cta { flex: none; }
.app-bar .icon-btn { width: 32px; height: 32px; flex: none; }
@media (max-width: 680px) { .app-bar { margin-inline: 8px; } }
.app-guide p { margin: 0; }
.app-guide-steps { margin: 0; padding-inline-start: 22px; line-height: 1.7; }
.app-guide-or { color: var(--text-2); font-size: 13px; }
.app-guide-url { font-size: 12px; }

/* أرباح الصنّاع + الدعم المالي */
.cr-page .card { margin-bottom: 12px; }
.cr-status { display: grid; gap: 8px; }
.cr-badge { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 16px; }
.cr-badge.ok { color: #16A34A; } .cr-badge.wait { color: #F59E0B; } .cr-badge.bad { color: var(--danger); }
.cr-checks { display: grid; gap: 6px; margin: 6px 0; }
.cr-check { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--hover); color: var(--text-2); }
.cr-check.ok { color: #16A34A; background: color-mix(in srgb, #16A34A 10%, transparent); }
.cr-check b { color: var(--text); }
.cr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.cr-stat { background: var(--card); border: 1px solid var(--divider); border-radius: 14px; padding: 12px; }
.cr-stat .v { font-size: 18px; font-weight: 800; }
@media (max-width: 700px) { .cr-stats { grid-template-columns: repeat(2, 1fr); } }
.cr-h { font-weight: 800; padding: 12px 14px 6px; }
.cr-day { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--divider); color: inherit; text-decoration: none; }
.cr-pill { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--hover); }
.cr-pill.paid { color: #16A34A; } .cr-pill.pending { color: #F59E0B; } .cr-pill.void { color: var(--text-2); text-decoration: line-through; }
.tip-box { display: grid; gap: 10px; }
.tip-who { display: grid; justify-items: center; gap: 4px; text-align: center; }
.tip-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.tip-chip { border: 1.5px solid var(--divider); background: var(--card); border-radius: 12px; padding: 10px 6px; font-weight: 800; cursor: pointer; color: var(--text); }
.tip-chip.active { border-color: #E11D48; color: #E11D48; background: color-mix(in srgb, #E11D48 8%, transparent); }
.tip-btn { color: #E11D48; }

/* زر «منشورات جديدة» العائم أعلى الخلاصة */
.new-posts-pill { position: fixed; z-index: 60; top: calc(var(--topbar, 60px) + 14px); left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px 8px 12px; border: 0; border-radius: 99px; background: var(--primary); color: #fff; font-weight: 800; font-size: 14px; cursor: pointer;
  box-shadow: 0 6px 20px rgba(79, 70, 229, .35); animation: npIn .25s ease-out; }
.new-posts-pill[hidden] { display: none; }
.new-posts-pill:hover { filter: brightness(1.08); }
.np-avs { display: inline-flex; }
.np-avs > * { margin-inline-start: -8px; border: 2px solid var(--primary); border-radius: 50%; }
.np-avs > *:first-child { margin-inline-start: 0; }
@keyframes npIn { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* الفيديوهات القصيرة على الحاسوب العريض: لوحة تعليقات بجانب الفيديو + فيديو أكبر */
.sh-cmt { display: none; }
@media (min-width: 1280px) {
  .shorts-wrap.with-side.with-cmt { grid-template-columns: 380px minmax(0, 1fr) 300px; }
  .shorts-wrap.with-cmt .short { padding: 8px 0; }
  .sh-cmt { display: flex; flex-direction: column; min-height: 0; height: calc(100vh - var(--topbar) - 24px); margin: 12px; background: var(--card); color: var(--text); border-radius: 16px; overflow: hidden; }
  .sh-cmt-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 8px; }
  .sh-cmt-txt { padding: 0 16px 10px; font-size: 14px; max-height: 7.5em; overflow-y: auto; white-space: pre-wrap; word-break: break-word; }
  .sh-cmt-title { display: flex; align-items: center; gap: 6px; padding: 10px 16px; font-weight: 800; border-top: 1px solid var(--divider); }
  .sh-cmt-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 16px 10px; scrollbar-width: thin; }
  .sh-cmt-box { border-top: 1px solid var(--divider); padding: 10px 12px; }
  .shorts-wrap.with-cmt .sh-sim-grid { grid-template-columns: 1fr 1fr; }
}

/* حماية الأعمار: شاشة الحجب لمن هم دون الحد الأدنى */
.age-block { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); }
.age-card { width: min(420px, 100%); background: var(--card); border: 1px solid var(--divider); border-radius: 20px; padding: 28px 22px; text-align: center; box-shadow: var(--shadow-lg); display: grid; gap: 10px; justify-items: center; }
.age-card h2 { margin: 0; }
.age-ico { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #6366F1, #8B5CF6); }

/* شارة منشورات صفحات الأطفال */
.kids-badge { display: inline-flex; align-items: center; margin-inline-start: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: #B45309; background: color-mix(in srgb, #F59E0B 18%, transparent); vertical-align: middle; }
.study-badge { display: inline-flex; align-items: center; margin-inline-start: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: #1D4ED8; background: color-mix(in srgb, #2563EB 16%, transparent); vertical-align: middle; }

/* القائمة الجانبية: أقسام منشورات مخصصة + صفحاتها */
.nav-sec .nav-sub { display: grid; gap: 2px; margin: -2px 0 6px; padding-inline-start: 44px; }
.nav-sub-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 10px; color: var(--text-2); font-size: 13.5px; font-weight: 600; text-decoration: none; min-width: 0; }
.nav-sub-item:hover { background: var(--hover); color: var(--text); }
.fs-pages { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.fs-page-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 220px; padding: 5px 12px 5px 6px; border-radius: 999px; background: var(--card); border: 1px solid var(--divider); color: inherit; font-weight: 700; font-size: 13.5px; text-decoration: none; }
.fs-page-chip:hover { border-color: var(--primary); }
.km-list { display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: color-mix(in srgb, #F59E0B 8%, transparent); }
.km-li { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.km-li .ico { color: #16A34A; }
.km-pin { text-align: center; letter-spacing: 6px; font-size: 20px; font-weight: 800; }

/* موافقة ولي الأمر */
.gd-code { display: grid; gap: 2px; padding: 12px; border-radius: 14px; border: 2px dashed color-mix(in srgb, var(--primary) 50%, transparent); background: color-mix(in srgb, var(--primary) 6%, transparent); }
.gd-code b { font-size: 30px; letter-spacing: 6px; }
.gd-here { text-align: start; }
.gd-here summary { cursor: pointer; font-weight: 700; color: var(--primary); }
.age-card { max-height: calc(100vh - 32px); overflow-y: auto; }

/* ─── الجوال: لا تمرير أفقي ─── */
@media (max-width: 760px) {
  /* النصوص «للحاسوب فقط» بجانب الأيقونات (كانت تُخفى في الشريط العلوي فقط فتدفع الصفحة للخارج) */
  .desk-only { display: none !important; }
  .page-head { flex-wrap: wrap; row-gap: 6px; min-width: 0; }
  .page-head > * { min-width: 0; }
  .page-head .btn { padding-inline: 10px; }
}
.page-head h1 { min-width: 0; overflow-wrap: anywhere; }

/* تاريخ الميلاد: يوم / شهر / سنة (كتابة أو اختيار) */
.bd-field { display: grid; gap: 4px; }
.bd-row { display: grid; grid-template-columns: 1fr 2fr 1.3fr; gap: 8px; }
.bd-row .input, .bd-row .select { min-width: 0; text-align: center; font-weight: 700; font-size: 16px; }
.bd-field.bad .input, .bd-field.bad .select { border-color: var(--danger); }
.bd-field.bad .bd-hint { color: var(--danger); }

/* مشغّل صوتي: موجة + سرعة */
.vp { display: flex; align-items: center; gap: 10px; min-width: 220px; max-width: 290px; padding: 2px 0; direction: ltr; }
.vp-play { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 0; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.vp.mine .vp-play { background: #fff; color: var(--primary); }
.vp-wave { flex: 1; height: 30px; display: flex; align-items: center; gap: 2px; cursor: pointer; min-width: 0; outline: none; }
.vp-wave i { flex: 1; min-width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--text-2) 45%, transparent); transition: background .15s; }
.vp-wave i.on { background: var(--primary); }
.vp.mine .vp-wave i { background: rgba(255,255,255,.45); }
.vp.mine .vp-wave i.on { background: #fff; }
.vp-side { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; }
.vp-time { font-size: 11px; font-variant-numeric: tabular-nums; opacity: .85; }
.vp-speed { font-size: 11px; font-weight: 800; border: 0; border-radius: 10px; padding: 1px 7px; background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; cursor: pointer; }
.vp-speed.on { background: var(--primary); color: #fff; }
.vp.mine .vp-speed.on { background: #fff; color: var(--primary); }
.post-audio .vp { max-width: none; flex: 1; }
.mic-btn { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.vr-bar { transition: transform .08s, background .15s; }
.vr-bar.vr-cancel { background: color-mix(in srgb, #EF4444 18%, var(--field)); }

/* تفاعلات الرسائل */
.msg-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin: -6px 8px 2px; position: relative; z-index: 1; }
.msg-reacts .mr { display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--divider); background: var(--card); border-radius: 12px; padding: 1px 7px; font-size: 13px; line-height: 1.5; cursor: pointer; box-shadow: var(--shadow); color: var(--text); }
.msg-reacts .mr span { font-size: 11px; font-weight: 800; }
.msg-reacts .mr.mine { border-color: var(--primary); background: var(--primary-soft); }
.react-pick { display: flex; gap: 2px; padding: 4px; }
.react-pick .rp { font-size: 24px; width: 42px; height: 42px; border: 0; background: transparent; border-radius: 50%; cursor: pointer; transition: transform .12s; }
.react-pick .rp:hover { transform: scale(1.2); background: var(--hover); }
.popover.popover-react { overflow: visible; min-width: 0; max-height: none; }
.react-pick .rp.on { background: var(--primary-soft); }
/* على الهاتف: الضغط المطوّل يفتح التفاعلات (والنسخ من القائمة) بدل تحديد النص */
@media (pointer: coarse) { .msg .b { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } }
.react-pick .rp-copy { font-size: 13px; width: auto; padding: 0 12px; border-radius: 21px; color: var(--text); display: inline-flex; align-items: center; gap: 4px; }

/* البحث داخل المحادثة */
.chat-search { border-bottom: 1px solid var(--divider); background: var(--card); }
.csr-bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 14px; }
.csr-bar input { border: 0; background: var(--field); border-radius: 18px; padding: 8px 14px; outline: none; font-size: 15px; color: var(--text); min-width: 0; }
.csr-list { max-height: 260px; overflow-y: auto; }
.csr { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; border: 0; background: transparent; padding: 8px 14px; cursor: pointer; color: var(--text); border-top: 1px solid var(--divider); }
.csr:hover { background: var(--hover); }
.csr mark { background: color-mix(in srgb, #FACC15 55%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.msg.flash .b { animation: msgflash 1.8s ease; }
@keyframes msgflash { 0%, 35% { box-shadow: 0 0 0 3px #FACC15; } 100% { box-shadow: var(--shadow); } }
.cv-draft { color: var(--danger, #EF4444); font-weight: 700; }

/* إنشاء فيديو قصير: منطقة اختيار/تصوير بدل فتح نافذة الملفات مباشرة */
.sp-zone { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 18px 14px; min-height: 0;
  border: 2px dashed color-mix(in srgb, var(--primary) 40%, var(--divider)); border-radius: 16px; background: color-mix(in srgb, var(--primary) 5%, var(--card)); transition: background .15s, border-color .15s; }
.sp-zone.over { background: color-mix(in srgb, var(--primary) 14%, var(--card)); border-color: var(--primary); }
.sp-ico { width: 52px; height: 52px; border-radius: 20px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #EF4444, #EC4899); margin-bottom: 4px; }
.sp-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.sp-actions .btn { min-width: 140px; padding: 10px 16px; font-size: 15px; }
/* شاشة رفع الفيديو القصير (ملء الشاشة) */
.upload-overlay { position: fixed; inset: 0; z-index: 4000; background: #0b0b14; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px calc(24px + var(--safe-b, 0px)); animation: fade .2s; }
.uo-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(28px) brightness(.45); transform: scale(1.15); }
.uo-center { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; max-width: 360px; }
.uo-ring-wrap { position: relative; width: 150px; height: 150px; margin-bottom: 8px; }
.uo-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.uo-ring circle { fill: none; stroke-width: 9; }
.uo-ring .bg { stroke: rgba(255,255,255,.18); }
.uo-ring .fg { stroke: #fff; stroke-linecap: round; transition: stroke-dashoffset .3s ease; }
.uo-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 900; font-variant-numeric: tabular-nums; }
.uo-title { font-size: 20px; font-weight: 800; }
.uo-label { font-size: 15px; opacity: .9; min-height: 22px; }
.uo-hint { font-size: 13px; opacity: .6; }
.uo-foot { position: relative; margin-top: 28px; }
.uo-cancel { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 24px; padding: 10px 26px; font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }
.uo-cancel:hover { background: rgba(255,255,255,.22); }
.uo-cancel:disabled { opacity: .4; }
/* تبويب الفيديوهات القصيرة في الملف الشخصي */
.ps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.ps-tile { position: relative; aspect-ratio: 9/16; border-radius: 8px; overflow: hidden; background: #111; display: block; }
.ps-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-views, .ps-dur { position: absolute; bottom: 6px; color: #fff; font-size: 12px; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.7); display: inline-flex; align-items: center; gap: 2px; }
.ps-views { inset-inline-start: 6px; }
.ps-dur { inset-inline-end: 6px; background: rgba(0,0,0,.55); border-radius: 6px; padding: 0 5px; text-shadow: none; }
.ps-menu { position: absolute; top: 4px; inset-inline-end: 4px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(0,0,0,.45); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
@media (min-width: 900px) { .ps-grid { grid-template-columns: repeat(4, 1fr); } }
/* اكتمال الملف الشخصي */
.pc-card { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.pc-head { display: flex; align-items: center; gap: 12px; }
.pc-ring { --p: 0; width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--primary) calc(var(--p) * 1%), color-mix(in srgb, var(--primary) 14%, var(--card)) 0); }
.pc-ring b { width: 38px; height: 38px; border-radius: 50%; background: var(--card); display: grid; place-items: center; font-size: 12px; font-weight: 900; }
.pc-bar { height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--primary) 14%, var(--card)); overflow: hidden; }
.pc-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--primary), #EC4899); border-radius: 6px; transition: width .4s ease; }
.pc-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-step { gap: 4px; }
/* سطح المكتب: كل خطوة في سطر كامل — لا ازدحام ولا تداخل */
@media (min-width: 760px) {
  .pc-host .pc-card { padding: 16px; }
  .pc-host .pc-steps { flex-direction: column; align-items: stretch; gap: 8px; }
  .pc-host .pc-step { justify-content: flex-start; width: 100%; padding: 10px 12px; border-radius: 12px; }
  .pc-host .pc-step .pc-w { margin-inline-start: auto; }
}
.pc-w { font-size: 11px; font-weight: 800; color: var(--primary); }
/* صفحة الترحيب */
.welcome { padding-bottom: 90px; }
.wl-hero { text-align: center; padding: 18px 8px 8px; }
.wl-hero h1 { margin: 6px 0 4px; font-size: 24px; }
.wl-emoji { font-size: 40px; }
.wl-progress { display: flex; align-items: center; gap: 10px; max-width: 320px; margin: 14px auto 0; }
.wl-progress .pc-bar { flex: 1; height: 8px; }
.wl-count { font-variant-numeric: tabular-nums; }
.wl-sec { display: flex; align-items: center; gap: 6px; margin: 18px 4px 10px; }
.wl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.wl-card { padding: 14px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
.wl-av { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--hover); color: var(--text-2); }
.wl-av img { width: 100%; height: 100%; object-fit: cover; }
.wl-name { font-weight: 800; max-width: 100%; display: flex; align-items: center; gap: 3px; justify-content: center; }
.wl-name .verified-dot { color: var(--primary); display: inline-flex; }
.wl-sub { min-height: 32px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wl-foot { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 4px calc(12px + var(--safe-b, 0px));
  background: linear-gradient(transparent, var(--bg) 30%); margin-top: 16px; }
.wl-next { min-width: 180px; }
@media (max-width: 760px) { .wl-grid { grid-template-columns: repeat(2, 1fr); } .welcome .wl-foot { bottom: calc(var(--bottomnav) + var(--safe-b, 0px)); } }
/* مساعد وكّل */
.ai-badge { color: #7C3AED; font-weight: 700; font-size: 12px; }
.ai-fab { position: fixed; z-index: 46; inset-inline-end: 18px; bottom: calc(18px + var(--safe-b, 0px)); width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: linear-gradient(135deg, #7C3AED, #EC4899); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(124, 58, 237, .4); transition: transform .15s; }
.ai-fab:hover { transform: scale(1.06); }
.ai-fab.hidden { display: none; }
.ai-fab-dot { position: absolute; top: 4px; inset-inline-end: 4px; width: 10px; height: 10px; border-radius: 50%; background: #22C55E; border: 2px solid #fff; }
body.has-ai .cdock-bubbles { margin-bottom: 84px; }
.ai-panel { position: fixed; z-index: 130; inset-inline-end: 18px; bottom: calc(18px + var(--safe-b, 0px)); width: 380px; height: min(600px, calc(100vh - 100px)); background: var(--card); border: 1px solid var(--divider);
  border-radius: 18px; box-shadow: var(--shadow-lg); display: none; flex-direction: column; overflow: hidden; }
.ai-panel.open { display: flex; animation: pop .16s ease-out; }
.ai-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--divider); background: linear-gradient(135deg, color-mix(in srgb, #7C3AED 10%, var(--card)), var(--card)); }
.ai-head b { display: block; }
.ai-avatar { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #7C3AED, #EC4899); }
.ai-avatar.lg { width: 56px; height: 56px; margin: 6px auto 10px; }
.ai-list { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ai-welcome { display: flex; flex-direction: column; gap: 8px; }
.ai-msg { display: flex; flex-direction: column; max-width: 88%; }
.ai-msg.me { align-self: flex-end; align-items: flex-end; }
.ai-msg.bot { align-self: flex-start; }
.ai-b { padding: 9px 12px; border-radius: 16px; white-space: pre-wrap; word-break: break-word; line-height: 1.55; font-size: 14.5px; }
.ai-msg.me .ai-b { background: var(--primary); color: #fff; border-end-end-radius: 4px; }
.ai-msg.bot .ai-b { background: var(--hover); color: var(--text); border-end-start-radius: 4px; }
.ai-msg.refused .ai-b { background: color-mix(in srgb, #F59E0B 12%, var(--card)); }
.ai-msg.err .ai-b { background: color-mix(in srgb, var(--danger, #EF4444) 12%, var(--card)); }
.ai-msg.typing .ai-b { display: flex; gap: 4px; padding: 12px 14px; }
.ai-msg.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-2); animation: aiDot 1s infinite ease-in-out; }
.ai-msg.typing i:nth-child(2) { animation-delay: .15s; } .ai-msg.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes aiDot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.ai-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ai-link { background: color-mix(in srgb, var(--primary) 10%, var(--card)); color: var(--primary); font-weight: 700; gap: 2px; }
.ai-rate { display: flex; gap: 2px; margin-top: 2px; opacity: .55; }
.ai-rate button { border: 0; background: none; cursor: pointer; font-size: 13px; padding: 2px 4px; border-radius: 6px; filter: grayscale(1); }
.ai-rate button.on { filter: none; background: var(--hover); }
.ai-msg:hover .ai-rate { opacity: 1; }
.ai-sugg { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-note { text-align: center; font-size: 12px; color: var(--text-2); }
.ai-foot { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--divider); }
.ai-input { flex: 1; resize: none; border: 1px solid var(--divider); border-radius: 18px; padding: 9px 14px; font: inherit; font-size: 15px; background: var(--bg); color: var(--text); max-height: 140px; outline: none; overflow-y: hidden; line-height: 22px; min-height: 42px; box-sizing: border-box; display: block; }
.ai-input:focus { border-color: var(--primary); }
.ai-send { flex: 0 0 auto; }
.ai-disclaimer { font-size: 11px; color: var(--text-2); text-align: center; padding: 0 10px 8px; }
@media (max-width: 760px) {
  .ai-fab { width: 48px; height: 48px; bottom: calc(var(--bottomnav) + 16px + 56px + 12px + var(--safe-b, 0px)); inset-inline-end: 22px; }
  body[data-view="shorts"] .ai-fab, body[data-view="chat"] .ai-fab, body[data-view="welcome"] .ai-fab, body[data-view="auth"] .ai-fab { display: none; }
  body:not(:has(.fab)) .ai-fab { bottom: calc(var(--bottomnav) + 16px + var(--safe-b, 0px)); }
  .ai-panel { inset: 0; width: auto; height: auto; border-radius: 0; border: 0; padding-bottom: var(--safe-b, 0px); }
}
/* حذف الرسالة/المحادثة */
.del-btn { justify-content: center; gap: 8px; padding: 12px; font-weight: 700; }
.del-scope { display: flex; flex-direction: column; gap: 8px; }
.del-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--divider); border-radius: 12px; cursor: pointer; }
.del-opt:has(input:checked) { border-color: var(--danger, #EF4444); background: color-mix(in srgb, var(--danger, #EF4444) 6%, var(--card)); }
.del-opt input { margin-top: 4px; }
/* ═══ ثيم حساب الأطفال ═══ */
:root[data-kids] {
  --primary: #FF7A1A; --primary-dark: #C2410C; --primary-soft: #FFEBD9; --on-primary-soft: #9A3412;
  --violet: #8B5CF6; --accent: #22C55E; --bg: #FFF8EC; --card: #FFFFFF; --field: #FFF3E0; --hover: #FFF1DD; --divider: #FBE3C4;
  --brand: linear-gradient(135deg, #FF7A1A, #F43F5E 55%, #8B5CF6);
  --story: linear-gradient(225deg, #FACC15, #FF7A1A, #22C55E);
  --r: 22px; --r-sm: 14px;
  --shadow: 0 8px 22px rgba(255, 122, 26, .12);
}
:root[data-kids][data-theme="dark"] { --bg: #1B1410; --card: #2A1F18; --field: #3A2B20; --hover: #3A2B20; --divider: #4A3626; --primary-soft: #4A2A12; --on-primary-soft: #FFD7B0; }
:root[data-kids] body { font-family: 'Baloo Bhaijaan 2', 'Cairo', system-ui, sans-serif; }
:root[data-kids] body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image: radial-gradient(circle at 12% 18%, #FDE68A 0 6px, transparent 7px), radial-gradient(circle at 82% 30%, #BBF7D0 0 5px, transparent 6px), radial-gradient(circle at 60% 85%, #FBCFE8 0 7px, transparent 8px), radial-gradient(circle at 30% 70%, #BFDBFE 0 5px, transparent 6px);
  background-size: 420px 420px; z-index: -1; }
:root[data-kids] .card, :root[data-kids] .btn { border-radius: var(--r); }
:root[data-kids] .btn-primary { box-shadow: 0 6px 0 #C2410C33; }
:root[data-kids] .topbar { background: linear-gradient(90deg, #FFF3E0, #FFFFFF); }
:root[data-kids][data-theme="dark"] .topbar { background: var(--card); }
/* «اطلب قصة» */
.ks-hero { text-align: center; padding: 18px 8px 6px; }
.ks-hero h1 { margin: 6px 0 4px; font-size: 26px; }
.ks-emoji { font-size: 44px; }
.ks-card { margin-bottom: 12px; }
.ks { padding-bottom: 150px; }
.ks-chips { flex-wrap: wrap; overflow: visible; }
.ks-chips .chip.active { background: var(--primary); color: #fff; }
.ks-send { font-size: 17px; }
.ks-me { text-align: center; margin: -4px 0 12px; }
.ks-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 30px; }
.ks-story.done { border: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.ks-status { font-weight: 800; font-size: 13px; white-space: nowrap; }
.ks-audio, .ai-audio { width: 100%; margin: 8px 0 4px; height: 40px; }
.ks-text { white-space: pre-wrap; line-height: 1.9; font-size: 16px; margin-top: 10px; padding: 12px; background: var(--field); border-radius: var(--r-sm); }
.ai-msg.story { max-width: 96%; }
.ai-msg.story .ai-b { background: linear-gradient(135deg, #FFF7ED, #FEF3C7); color: #431407; line-height: 1.8; }

/* «ألوّن وانشر» + الألعاب التعليمية (وضع الأطفال) */
.kp { padding-bottom: 150px; }
.kp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-bottom: 18px; }
.kp-card { background: var(--card); border: 2px solid var(--divider); border-radius: 18px; padding: 8px; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px; align-items: center; transition: transform .12s, border-color .12s; }
.kp-card:hover { transform: translateY(-2px); border-color: var(--primary); }
.kp-card.work { cursor: default; }
.kp-card img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 12px; }
.kp-name { font-weight: 800; font-size: 13px; text-align: center; }
.kp-work-row { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; width: 100%; }
/* اللوحة */
.kp-board { display: flex; flex-direction: column; gap: 10px; }
.kp-stage { background: #fff; border-radius: 16px; overflow: hidden; border: 2px solid var(--divider); touch-action: none; }
.kp-canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }
.kp-tools { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.kp-size, .kp-tool { width: 46px; height: 46px; border-radius: 14px; border: 2px solid var(--divider); background: var(--card);
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 20px; padding: 0; }
.kp-size i { display: block; border-radius: 50%; background: var(--text); }
.kp-size.on, .kp-tool.on { border-color: var(--primary); background: var(--primary-soft); }
.kp-colors { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; }
.kp-sw { aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--divider); cursor: pointer; padding: 0; }
.kp-sw.on { outline: 3px solid var(--primary); outline-offset: 2px; }
/* الألعاب */
.kp-score { margin-bottom: 14px; }
.kp-points { font-size: 20px; font-weight: 900; }
.kp-badges { display: flex; gap: 12px; flex-wrap: wrap; font-weight: 800; margin: 4px 0 6px; }
.kp-best { color: var(--text-2); }
.kp-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 24px; }
.kp-game { background: var(--card); border: 2px solid color-mix(in srgb, var(--g) 35%, transparent); border-radius: 20px;
  padding: 16px 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; text-align: center; }
.kp-game:hover { background: color-mix(in srgb, var(--g) 10%, var(--card)); }
.kp-game-emo { font-size: 36px; }
.kp-game-name { font-weight: 900; font-size: 16px; color: var(--g); }
.kp-play { display: flex; flex-direction: column; gap: 12px; min-height: 280px; }
.kp-q-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; }
.kp-step { background: var(--primary-soft); color: var(--primary); border-radius: 12px; padding: 2px 10px; }
.kp-ok { font-weight: 800; }
.kp-prompt { text-align: center; font-weight: 900; padding: 10px; }
.kp-prompt.big { font-size: 56px; line-height: 1.2; }
.kp-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.kp-opt { background: var(--card); border: 2px solid var(--divider); border-radius: 18px; padding: 14px 8px; cursor: pointer;
  font-size: 30px; font-weight: 900; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.kp-opt small { font-size: 14px; font-weight: 700; color: var(--text-2); }
.kp-opt.good { border-color: #22C55E; background: rgba(34,197,94,.14); }
.kp-opt.bad { border-color: var(--danger); background: rgba(239,68,68,.12); }
.kp-slot { min-height: 54px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: center;
  background: var(--field); border-radius: 14px; padding: 8px; }
.kp-pool { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.kp-word { font-size: 17px; font-weight: 800; padding: 10px 14px; }
.kp-word.placed { background: var(--primary-soft); color: var(--primary); border-radius: 12px; }
.kp-word.done { opacity: .35; }
.kp-word.shake { animation: kp-shake .35s; border-color: var(--danger); }
@keyframes kp-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.kp-result { text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 10px; }
.kp-emoji-xl { font-size: 64px; }
.kp-work-img { padding: 0; border: 0; background: none; cursor: pointer; width: 100%; }
.kp-work-img img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 12px; }
.kp-sub { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.kp-sub.hidden { display: none; }
.kp-chip { font-size: 22px; line-height: 1; padding: 6px 10px; border-radius: 12px; border: 2px solid var(--divider); background: var(--card); cursor: pointer; }
.kp-chip.on { border-color: var(--primary); background: var(--primary-soft); }
.kp-tool:disabled { opacity: .35; cursor: not-allowed; }
.btn-text.danger { color: var(--danger); }
/* مركز المرح */
/* مركز المرح المبسّط: شريط نقاط صغير، معلومة «هل تعلم؟»، وأزرار الصعوبة */
.kp-score-strip { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 14px; cursor: pointer; text-align: start; }
.kp-score-strip .kp-points { font-size: 18px; }
.kp-score-strip .kp-badges { margin: 0; }
.kp-fact { display: flex; flex-direction: column; gap: 2px; background: var(--primary-soft); color: var(--on-primary-soft);
  border-radius: 16px; padding: 10px 14px; font-weight: 700; }
.kp-level-btn { font-size: 17px; font-weight: 900; }
/* «قصة مصورة»: صور المشاهد */
.ks-images { display: flex; gap: 10px; overflow-x: auto; padding: 8px 0; }
.ks-img { margin: 0; flex: 0 0 auto; width: 160px; }
.ks-img img { width: 160px; height: 160px; object-fit: cover; border-radius: 16px; display: block; }
.ks-img figcaption { font-size: 12px; font-weight: 700; margin-top: 4px; }
.ks-tabs { margin-bottom: 12px; }
.kp-quick { display: flex; gap: 10px; justify-content: center; margin-bottom: 12px; flex-wrap: wrap; }
.kp-quick-item { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 16px; background: var(--card);
  border: 2px solid var(--divider); text-decoration: none; color: var(--text); font-weight: 800; }
.kp-quick-item b { font-size: 22px; }
.kp-mine-strip { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  border: 0; font: inherit; color: inherit; text-align: inherit; cursor: pointer; font-weight: 800; }
/* لوحة الصدارة */
.kp-lb-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.kp-lb h4 { margin: 0 0 6px; font-size: 15px; }
.kp-lb-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 10px; font-weight: 700; }
.kp-lb-row:nth-child(even) { background: var(--field); }
.kp-lb-row.me { background: var(--primary-soft); color: var(--on-primary-soft); }
.kp-lb-rank { min-width: 26px; text-align: center; }
.kp-lb-row .ellipsis { flex: 1; }
/* قسم لوحة الصدارة: منصّة الأوائل + صفوف قابلة للنقر (ملف/رسالة/صداقة) */
.kp-lb-row { width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; }
.kp-lb-row .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-lb-ava { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.kp-lb-ava-ph { display: flex; align-items: center; justify-content: center; background: var(--primary-soft);
  color: var(--on-primary-soft); font-weight: 900; }
.kp-lb-me { margin: 10px 0; }
.kp-lb-rank.big { font-size: 22px; font-weight: 900; min-width: 54px; }
.kp-lb-game { margin-bottom: 10px; }
.kp-lb-game > b { display: block; margin-bottom: 6px; }
.kp-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: end; margin: 12px 0; }
.kp-pod { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px 10px; border-radius: 18px;
  border: 2px solid var(--divider); background: var(--card); cursor: pointer; font: inherit; color: inherit; min-width: 0; }
.kp-pod .ellipsis { max-width: 100%; }
.kp-pod .kp-lb-ava { width: 46px; height: 46px; }
.kp-pod-medal { font-size: 24px; }
.kp-pod.p1 { padding-top: 22px; border-color: #F59E0B; background: color-mix(in srgb, #F59E0B 12%, var(--card)); }
.kp-pod.p2 { border-color: #94A3B8; }
.kp-pod.p3 { border-color: #B45309; }
.kp-pod.me { outline: 2px solid var(--primary); }
/* ألعاب الربط: عمودان وخطوط تُرسم بينهما */
.kp-match { position: relative; }
.kp-match-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.kp-match-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; position: relative; z-index: 2; }
.kp-match-col { display: flex; flex-direction: column; gap: 12px; }
.kp-match-item { min-height: 58px; border-radius: 16px; border: 3px solid var(--divider); background: var(--card);
  font-weight: 800; font-size: 17px; padding: 8px 10px; cursor: pointer; transition: transform .12s, border-color .12s; }
.kp-match-item.big { font-size: 30px; }
.kp-match-item.sel { border-color: var(--primary); transform: scale(1.04); }
.kp-match-item.done { border-color: var(--success, #22C55E); opacity: .95; cursor: default; }
.kp-match-item.bad { border-color: var(--danger); animation: kp-shake .35s; }
@keyframes kp-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
/* لعبة الذاكرة */
.kp-mem { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kp-mem-card { aspect-ratio: 1; border-radius: 14px; border: 2px solid var(--divider); background: var(--primary-soft);
  font-size: 28px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.kp-mem-card span { opacity: 0; transition: opacity .12s; }
.kp-mem-card.open span, .kp-mem-card.done span { opacity: 1; }
.kp-mem-card.done { background: rgba(34,197,94,.16); border-color: #22C55E; cursor: default; }
/* اعثر على المختلف */
.kp-find { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kp-find-cell { aspect-ratio: 1; border-radius: 14px; border: 2px solid var(--divider); background: var(--card); font-size: 28px; cursor: pointer; }
.kp-find-cell.good { border-color: #22C55E; background: rgba(34,197,94,.16); }
.kp-find-cell.bad { border-color: var(--danger); animation: kp-shake .35s; }
/* لغز الصور */
.kp-puzzle { display: grid; gap: 4px; background: var(--divider); border-radius: 14px; padding: 4px; max-width: 360px; margin: 0 auto; }
.kp-puzzle-cell { aspect-ratio: 1; border: 2px solid transparent; border-radius: 8px; background-color: #fff; background-repeat: no-repeat; cursor: pointer; padding: 0; }
.kp-puzzle-cell.on { border-color: var(--primary); transform: scale(.94); }
.kp-puzzle-cell.fit { border-color: rgba(34,197,94,.5); }
.kp-puzzle.solved { outline: 3px solid #22C55E; }
/* تعلّم اللغات */
.kp-lang-card { margin-bottom: 12px; }
.kp-lang-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.kp-lang-row b { flex: 1; }
.kp-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 6px; }
.kp-unit { text-align: start; background: var(--card); border: 2px solid var(--divider); border-radius: 14px; padding: 8px 10px;
  cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.kp-unit.locked { opacity: .75; }
.kp-bar { display: block; height: 6px; border-radius: 4px; background: var(--field); margin-top: 4px; }
.kp-bar i { display: block; height: 100%; border-radius: 4px; background: var(--success); }
.kp-free { color: var(--success); font-weight: 800; font-size: 13px; }
.kp-left { color: var(--warning); font-weight: 800; font-size: 13px; }
.kp-access { font-size: 12px; font-weight: 800; color: var(--text-2); }
.kp-game.locked { opacity: .8; }
.kp-prices { display: flex; gap: 6px; flex-wrap: wrap; }
.kp-learn { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; }
.kp-learn h2 { margin: 0; font-size: 30px; }
.kp-word-img { width: 140px; height: 140px; object-fit: contain; border-radius: 16px; background: #fff; }
.kp-word-emoji { font-size: 70px; }
.kp-opt .kp-word-img { width: 92px; height: 92px; }
.kp-opt .kp-word-emoji { font-size: 44px; }
.chip.chip-more { background: transparent; border-style: dashed; color: var(--primary); font-weight: 700; }
@media (pointer: coarse) { .sp-drop { display: none; } }
.rv-stage { position: relative; background: #000; border-radius: 14px; overflow: hidden; aspect-ratio: 9/16; max-height: 62vh; margin: 0 auto; width: 100%; max-width: 360px; }
.rv-cam { width: 100%; height: 100%; object-fit: cover; }
.rv-cam.mirror { transform: scaleX(-1); }
.rv-time { position: absolute; top: 10px; inset-inline-start: 10px; background: rgba(0,0,0,.55); color: #fff; border-radius: 10px; padding: 2px 10px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rv-rec { width: 66px; height: 66px; border-radius: 50%; border: 4px solid var(--text-2); background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.rv-rec i { width: 46px; height: 46px; border-radius: 50%; background: #EF4444; transition: all .15s; }
.rv-rec.on i { width: 26px; height: 26px; border-radius: 6px; }
.rv-rec:disabled { opacity: .4; cursor: not-allowed; }
.wb-chart { display: flex; align-items: flex-end; gap: 8px; height: 140px; padding: 6px 4px 0; }
.wb-bar { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.wb-bar i { width: 100%; max-width: 34px; border-radius: 8px 8px 3px 3px; background: color-mix(in srgb, var(--primary) 35%, transparent); }
.wb-bar.today i { background: var(--primary); }
.wb-bar small { color: var(--text-2); font-size: 11px; }

/* ريمكس / دويتو / الأصوات */
.sh-sound, .sh-origin { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin-top: 6px; color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; }
.sh-origin { opacity: .9; font-weight: 600; margin-inline-end: 10px; }
.sh-disc { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.18); align-items: center; justify-content: center; animation: spin 4s linear infinite; flex: none; }
.sh-disc.big { width: 56px; height: 56px; font-size: 26px; background: var(--primary-soft); }
.cp-remix { display: flex; align-items: center; gap: 8px; background: color-mix(in srgb, #EC4899 12%, var(--card)); color: var(--text); border-radius: 12px; padding: 8px 12px; font-weight: 700; font-size: 14px; }
.duet-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: #000; border-radius: 12px; overflow: hidden; }
.duet-cell { aspect-ratio: 9/16; max-height: 60vh; display: flex; align-items: center; justify-content: center; }
.duet-cell video { width: 100%; height: 100%; object-fit: cover; }
.duet-cell:first-child video { transform: scaleX(-1); }
.sound-head .vp { margin-top: 12px; max-width: none; }
.sound-grid a { position: relative; aspect-ratio: 9/16; }
.sound-grid a img { aspect-ratio: 9/16; }

/* رسائل تنتظر الاتصال / مثبّتة / مُعاد توجيهها */
.msg .meta.queued { display: inline-flex; align-items: center; gap: 4px; color: var(--warning, #F59E0B); }
.chat-pinbar { display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 14px; border-bottom: 1px solid var(--divider); background: color-mix(in srgb, var(--primary) 6%, var(--card)); }
.chat-pinbar .pin-go { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: var(--text); text-align: start; cursor: pointer; min-width: 0; padding: 2px 0; }
.chat-pinbar .pin-go > svg { color: var(--primary); flex: none; }
.fwd-tag { display: flex; align-items: center; gap: 4px; font-size: 11px; font-style: italic; opacity: .75; margin-bottom: 2px; }
.rp-actions { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; border-top: 1px solid var(--divider); padding-top: 4px; margin-top: 2px; }
.react-pick { flex-wrap: wrap; max-width: 300px; }
.fw-list { max-height: 50vh; overflow-y: auto; }
.fw-preview { background: var(--field); border-radius: 10px; padding: 8px 12px; font-size: 14px; }

/* ملفات / موقع / وسائط المحادثة */
.file-card, .loc-card { display: flex; align-items: center; gap: 10px; min-width: 220px; max-width: 290px; color: inherit; text-decoration: none; }
.file-ic { width: 42px; height: 42px; flex: none; border-radius: 10px; background: color-mix(in srgb, currentColor 14%, transparent); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.file-ic small { font-size: 9px; font-weight: 800; margin-top: 2px; }
.msg.me .file-card .muted, .msg.me .loc-card .muted { color: rgba(255,255,255,.8); }
.loc-pin { width: 42px; height: 42px; flex: none; border-radius: 50%; background: #10B98122; color: #10B981; display: flex; align-items: center; justify-content: center; }
.msg.me .loc-pin { background: rgba(255,255,255,.2); color: #fff; }
.loc-pin.live { animation: livepulse 1.6s infinite; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 #10B98166; } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.disap-ind { display: inline-flex; align-items: center; gap: 2px; color: var(--primary); }
.cm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 4px; }
.cm-cell { position: relative; aspect-ratio: 1; border: 0; padding: 0; border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--field); }
.cm-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-cell .play { position: absolute; inset: auto 6px 6px auto; background: rgba(0,0,0,.55); color: #fff; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }

/* وضع عدم الاتصال */
.offline-bar { position: fixed; z-index: 3000; bottom: calc(76px + var(--safe-b, 0px)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px);
  background: #1F2937; color: #fff; border-radius: 22px; padding: 7px 8px 7px 14px; font-size: 13px; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.25); animation: fade .2s; }
.offline-bar .btn-text { color: #93C5FD; font-weight: 800; }
@media (min-width: 900px) { .offline-bar { bottom: 20px; } }

/* ─── ألوان التطبيق (الإعدادات ← لون التطبيق) — لا تمس ثيم الأطفال ─── */
:root[data-accent="blue"]:not([data-kids]) { --primary: #2563EB; --primary-dark: #1E3A8A; --primary-soft: #DBEAFE; --on-primary-soft: #1E3A8A; --violet: #3B82F6; --brand: linear-gradient(135deg, #3B82F6, #2563EB); }
:root[data-accent="blue"][data-theme="dark"]:not([data-kids]) { --primary-soft: #1E2F5C; --on-primary-soft: #BFDBFE; }
:root[data-accent="green"]:not([data-kids]) { --primary: #059669; --primary-dark: #065F46; --primary-soft: #D1FAE5; --on-primary-soft: #065F46; --violet: #10B981; --brand: linear-gradient(135deg, #10B981, #059669); }
:root[data-accent="green"][data-theme="dark"]:not([data-kids]) { --primary-soft: #123F33; --on-primary-soft: #A7F3D0; }
:root[data-accent="orange"]:not([data-kids]) { --primary: #EA580C; --primary-dark: #9A3412; --primary-soft: #FFEDD5; --on-primary-soft: #9A3412; --violet: #F97316; --brand: linear-gradient(135deg, #F97316, #EA580C); }
:root[data-accent="orange"][data-theme="dark"]:not([data-kids]) { --primary-soft: #4A2512; --on-primary-soft: #FED7AA; }
:root[data-accent="pink"]:not([data-kids]) { --primary: #DB2777; --primary-dark: #9D174D; --primary-soft: #FCE7F3; --on-primary-soft: #9D174D; --violet: #EC4899; --brand: linear-gradient(135deg, #EC4899, #DB2777); }
:root[data-accent="pink"][data-theme="dark"]:not([data-kids]) { --primary-soft: #4A1530; --on-primary-soft: #FBCFE8; }
:root[data-accent="red"]:not([data-kids]) { --primary: #DC2626; --primary-dark: #991B1B; --primary-soft: #FEE2E2; --on-primary-soft: #991B1B; --violet: #EF4444; --brand: linear-gradient(135deg, #EF4444, #DC2626); }
:root[data-accent="red"][data-theme="dark"]:not([data-kids]) { --primary-soft: #4A1717; --on-primary-soft: #FECACA; }
:root[data-accent="teal"]:not([data-kids]) { --primary: #0D9488; --primary-dark: #115E59; --primary-soft: #CCFBF1; --on-primary-soft: #115E59; --violet: #14B8A6; --brand: linear-gradient(135deg, #14B8A6, #0D9488); }
:root[data-accent="teal"][data-theme="dark"]:not([data-kids]) { --primary-soft: #123E3B; --on-primary-soft: #99F6E4; }
.accent-row { display: flex; flex-wrap: wrap; gap: 8px; }
.accent-sw { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 2px var(--card); outline: none; }
.accent-sw.on { border-color: var(--text, #111); }
.accent-sw:focus-visible { border-color: var(--primary); }
/* ─── وكيلي ─── */
.wk { display: flex; flex-direction: column; gap: 10px; max-width: 760px; margin: 0 auto; }
.wk-seg { margin: 0; }
.chat-seg-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-seg-btn.wk-tab .icon { color: var(--violet); }
.wk-card { display: flex; flex-direction: column; height: calc(100dvh - 190px); min-height: 380px; overflow: hidden; }
.wk-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--divider); }
.wk-head .grow { min-width: 0; }
.wk-quota { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; color: var(--text-2, #64748B); }
.wk-plan { font-weight: 700; color: var(--primary); }
.wk-plan.free { color: inherit; }
.wk-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.wk-msg-img { max-width: 220px; max-height: 220px; border-radius: 12px; display: block; margin-bottom: 4px; object-fit: cover; }
.ai-msg.me .wk-msg-img { margin-inline-start: auto; }
.wk-time { font-size: 11px; opacity: .6; margin-top: 2px; }
.ai-msg.me .wk-time { text-align: end; }
.wk-preview { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-top: 1px solid var(--divider); }
.wk-preview img { width: 54px; height: 54px; border-radius: 8px; object-fit: cover; }
.wk-card .ai-foot { border-top: 1px solid var(--divider); }
.wk-plan-card.current { box-shadow: 0 0 0 2px var(--primary); }
.wk-price { font-size: 22px; font-weight: 800; color: var(--primary); }
.wk-feats { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 2px; font-size: 14px; }
.wk-memory { white-space: pre-wrap; background: var(--field); border-radius: 10px; padding: 8px 10px; margin: 6px 0; }
.chip.wk-open { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 700; }
@media (max-width: 760px) { .wk-card { height: calc(100dvh - 210px); } }
body[data-view="wakili"] .ai-fab, body[data-view="wakili"] .ai-panel, body[data-view="wakili"] .fab { display: none; }
@media (max-width: 420px) { .accent-row { gap: 5px; } .accent-sw { width: 24px; height: 24px; } }
.wk-chat-bar { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 12px; border-bottom: 1px solid var(--divider); background: var(--field); color: var(--text-2); text-align: start; }
.wk-chat-title { display: flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-chat-row { display: flex; align-items: center; gap: 4px; border-radius: 12px; padding: 4px; }
.wk-chat-row.active { background: var(--primary-soft); }
.wk-chat-open { display: flex; flex-direction: column; align-items: flex-start; text-align: start; min-width: 0; padding: 6px 8px; }
.wk-chat-open .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* وكيلي: شريط الكتابة */
.wk-card .ai-foot { align-items: center; padding: 10px 12px; gap: 6px; background: var(--card); }
.wk-card .ai-foot .ai-input { background: var(--field); border-color: transparent; }
.wk-card .ai-foot .ai-input:focus { border-color: var(--primary); background: var(--card); }
.wk-card .ai-foot .ai-send { width: 42px; height: 42px; flex: none; }
.wk-card .ai-foot > .icon-btn:first-child { flex: none; color: var(--primary); }
/* وكيلي في نافذة الدردشة العائمة */
.cdock-wk .wk.embedded { height: 100%; max-width: none; gap: 0; }
.cdock-wk .wk-card { height: 100%; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
.cdock-wk .wk-head { padding: 6px 8px; gap: 6px; min-height: 52px; }
.cdock-wk .wk-head .icon-btn { width: 30px; height: 30px; }
.cdock-wk .wk-head .ai-avatar { width: 34px; height: 34px; }
.cdock-wk .wk-quota { font-size: 11px; }
.cdock-wk .wk-list { padding: 8px; }
.cdock-wk .ai-foot { padding: 6px 8px; }
.cdock-wk .ai-foot .ai-send { width: 38px; height: 38px; }
.cdock-wk .ai-input { min-height: 38px; padding: 7px 12px; }
.cdock-ai { width: 52px; height: 52px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; }
/* ─── «مدرستي» — وضع الدراسة (الدروس من أكاديمية وكّل) ─── */
/* ═══ ثيم «دراستي»: أزرق/أخضر مائي هادئ للقراءة الطويلة، بخلفية دفاتر خفيفة ═══ */
:root[data-study]:not([data-kids]) {
  --primary: #2563EB; --primary-dark: #1E40AF; --primary-soft: #DBEAFE; --on-primary-soft: #1E3A8A;
  --violet: #0D9488; --accent: #0D9488; --bg: #F4F8FF; --card: #FFFFFF; --field: #EFF5FF; --hover: #E8F1FF; --divider: #D8E6FB;
  --brand: linear-gradient(135deg, #0D9488, #2563EB);
  --story: linear-gradient(225deg, #38BDF8, #2563EB, #0D9488);
  --r: 16px; --r-sm: 11px;
  --shadow: 0 8px 22px rgba(37, 99, 235, .10);
}
:root[data-study][data-theme="dark"]:not([data-kids]) {
  --bg: #0E1726; --card: #16213A; --field: #1B2A45; --hover: #1B2A45; --divider: #27375A;
  --primary-soft: #1E2F5C; --on-primary-soft: #BFDBFE;
}
/* خطوط دفتر باهتة + أيقونات تعليمية في الزوايا */
:root[data-study]:not([data-kids]) body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .45;
  background-image: repeating-linear-gradient(transparent 0 31px, #CFE0F8 31px 32px),
    radial-gradient(circle at 92% 12%, #99F6E4 0 7px, transparent 8px),
    radial-gradient(circle at 8% 84%, #BFDBFE 0 6px, transparent 7px);
  background-size: 100% 32px, 520px 520px, 520px 520px;
}
:root[data-study][data-theme="dark"]:not([data-kids]) body::before { opacity: .14; }
:root[data-study]:not([data-kids]) .topbar { background: linear-gradient(90deg, #E8F1FF, #FFFFFF); }
:root[data-study][data-theme="dark"]:not([data-kids]) .topbar { background: var(--card); }
:root[data-study]:not([data-kids]) .btn-primary { box-shadow: 0 4px 0 #1E40AF2E; }
/* شريط علوي رقيق يذكّر بأن الحساب في وضع الدراسة */
:root[data-study]:not([data-kids]) .topbar::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, #0D9488, #2563EB);
}
.study { display: flex; flex-direction: column; gap: 10px; max-width: 760px; margin: 0 auto; padding-bottom: 20px; }
.study-head { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.study-level { display: flex; align-items: center; gap: 4px; color: var(--primary); font-size: 13px; font-weight: 700; padding: 2px 0; }
.study-note { display: flex; align-items: center; gap: 6px; width: 100%; text-align: start; background: var(--primary-soft); color: var(--on-primary-soft); border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.study-note.warn { background: #FEF3C7; color: #92400E; }
:root[data-theme="dark"] .study-note.warn { background: #78350F; color: #FEF3C7; }
.study-subjects, .study-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 4px; }
.study-subjects::-webkit-scrollbar, .study-tabs::-webkit-scrollbar { display: none; }
.study-lesson { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: start; padding: 10px; }
.study-thumb { position: relative; width: 112px; height: 72px; flex: none; border-radius: 10px; overflow: hidden; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; }
.study-thumb img { width: 100%; height: 100%; object-fit: cover; }
.study-lock { position: absolute; inset: 0; background: rgba(0,0,0,.42); color: #fff; display: grid; place-items: center; }
.study-done { position: absolute; top: 4px; inset-inline-start: 4px; width: 20px; height: 20px; border-radius: 50%; background: #16A34A; color: #fff; display: grid; place-items: center; }
.study-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 4px; color: var(--text-2); }
.study-price { font-weight: 800; font-size: 11.5px; padding: 2px 8px; border-radius: 20px; }
.study-price.free { background: rgba(22,163,74,.12); color: #16A34A; }
.study-price.paid { background: rgba(234,88,12,.12); color: #EA580C; }
.study-price.owned { background: var(--primary-soft); color: var(--on-primary-soft); }
.study-video { width: 100%; max-height: 52vh; border-radius: 12px; background: #000; display: block; }
.study-locked { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px; border-radius: 12px; background: var(--field); color: var(--text-2); text-align: center; }
/* ─── «دراستي» التصميم الجديد: ترويسة واحدة، مواد كبطاقات، شبكة دروس، استوديو الأستاذ ─── */
.study { max-width: 980px; gap: 14px; }
.study-hero { position: relative; overflow: hidden; border-radius: 20px; padding: 18px; color: #fff;
  background: linear-gradient(135deg, #2563EB 0%, #0D9488 100%); box-shadow: 0 12px 28px rgba(37, 99, 235, .22); }
.study-hero.teach { background: linear-gradient(135deg, #EA580C 0%, #DB2777 100%); box-shadow: 0 12px 28px rgba(234, 88, 12, .22); }
.study-hero::after { content: ''; position: absolute; inset-inline-end: -40px; top: -50px; width: 200px; height: 200px; border-radius: 50%;
  background: rgba(255, 255, 255, .10); pointer-events: none; }
.study-hero-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.study-hero-top h2 { margin: 0; font-size: 22px; line-height: 1.2; }
.study-hero-ico { width: 48px; height: 48px; flex: none; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .2); }
.study-hero-ico .ico { width: 26px; height: 26px; }
.study-hero .study-level { color: #fff; opacity: .95; background: rgba(255, 255, 255, .16); border-radius: 999px; padding: 3px 10px; margin-top: 4px; }
.study-hero-btn { background: #fff; color: #1E40AF; font-weight: 800; flex: none; }
.study-hero-btn.ghost { background: rgba(255, 255, 255, .18); color: #fff; }
.study-hero.teach .study-hero-btn { color: #C2410C; }
.study-hero.teach .study-hero-btn.ghost { color: #fff; }
.study-hero-sub { position: relative; z-index: 1; margin-top: 10px; font-size: 13px; opacity: .92; line-height: 1.6; }
.study-hero-stats { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.study-hero-stats span { background: rgba(255, 255, 255, .16); border-radius: 12px; padding: 6px 12px; font-size: 12.5px; }
.study-hero-stats b { font-size: 16px; margin-inline-end: 2px; }
.study-teach-cta { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px dashed #FDBA74; background: color-mix(in srgb, #EA580C 6%, var(--card)); }
.study-section { display: flex; flex-direction: column; gap: 8px; }
.study-section-title { font-weight: 800; font-size: 14px; color: var(--text-2); }
.study-subject { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 128px; padding: 10px 12px; flex: none;
  border-radius: 14px; background: var(--card); border: 1.5px solid var(--divider); text-align: start; transition: border-color .15s, transform .15s; }
.study-subject:not(.static):hover { transform: translateY(-1px); }
.study-subject.active { border-color: var(--primary); background: var(--primary-soft); }
.study-subject.static { cursor: default; }
.study-subject-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; }
.study-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between; }
.study-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--field); }
.study-seg button { padding: 6px 14px; border-radius: 9px; font-weight: 700; font-size: 13px; color: var(--text-2); }
.study-seg button.active { background: var(--card); color: var(--primary); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.study-seg button:disabled { opacity: .45; cursor: not-allowed; }
.study-kinds { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.study-kinds::-webkit-scrollbar { display: none; }
.study-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.study-grid > .empty, .study-grid > .center { grid-column: 1 / -1; }
.study-card { display: flex; flex-direction: column; overflow: hidden; cursor: pointer; padding: 0; transition: transform .15s, box-shadow .15s; }
.study-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.study-card-thumb { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; color: var(--k, var(--primary));
  background: color-mix(in srgb, var(--k, var(--primary)) 14%, var(--field)); }
.study-card-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.study-card-ph .ico { width: 40px; height: 40px; }
.study-card-kind { position: absolute; top: 8px; inset-inline-start: 8px; display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px;
  border-radius: 999px; font-size: 11px; font-weight: 800; color: #fff; background: var(--k, var(--primary)); }
.study-card-kind .ico { width: 13px; height: 13px; }
.study-card-count { position: absolute; bottom: 8px; inset-inline-end: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800;
  background: rgba(0, 0, 0, .55); color: #fff; }
.study-card .study-lock { border-radius: 0; }
.study-card .study-done { top: auto; bottom: 8px; }
.study-card-body { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; min-width: 0; }
.study-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; }
.study-card-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.study-hidden { color: var(--danger); font-weight: 700; }
.study-kind { display: inline-flex; align-items: center; gap: 2px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 800;
  color: var(--k); background: color-mix(in srgb, var(--k) 13%, transparent); }
.study-course-link { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; color: #EA580C; }
.study-course-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 12px; background: var(--field); text-align: start; }
.study-course-row:hover { background: var(--hover); }
.study-course-n { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px;
  background: var(--card); color: var(--primary); }
.study-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.study-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; }
.study-video.tall { max-height: 70vh; width: auto; margin: 0 auto; aspect-ratio: 9 / 16; }
.study-create { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.study-create-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border-radius: 14px;
  background: color-mix(in srgb, var(--k) 9%, var(--card)); border: 1.5px solid color-mix(in srgb, var(--k) 30%, transparent); color: var(--text); }
.study-create-btn span { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--k); }
.study-create-btn:hover { border-color: var(--k); }
.study-field { display: flex; flex-direction: column; gap: 5px; }
.study-field > span:first-child { font-size: 13px; font-weight: 700; color: var(--text-2); }
.study-field input[type="file"] { padding: 8px; border: 1.5px dashed var(--divider); border-radius: 12px; background: var(--field); }
.study-progress { height: 8px; border-radius: 6px; background: var(--field); overflow: hidden; }
.study-progress i { display: block; height: 100%; width: 0; background: var(--primary); transition: width .2s; }
.study-q.pending { border-inline-start: 4px solid #F59E0B; }
.badge-dot { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-inline-start: 6px; border-radius: 999px;
  font-size: 11px; font-weight: 800; background: var(--danger); color: #fff; }
.btn.danger { color: var(--danger); }
@media (max-width: 640px) {
  .study-hero { padding: 14px; border-radius: 16px; }
  .study-hero-top { flex-wrap: wrap; }
  .study-hero-btn { width: 100%; }
  .study-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .study-card-body { padding: 8px 9px 10px; }
  .study-create { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.kp-draft { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; background: var(--primary-soft); color: var(--on-primary-soft); border-radius: 12px; padding: 8px 10px; font-weight: 700; }

/* «تحدّي اليوم» داخل «دراستي» */
.sq-card { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; padding: 10px 12px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(245,158,11,.16), rgba(37,99,235,.12)); color: var(--text); font-weight: 700; }
.sq-card.done { background: var(--field); }
.sq-flame { font-size: 22px; }
.sq-streak { font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 20px; background: rgba(245,158,11,.18); color: #B45309; }
:root[data-theme="dark"] .sq-streak { color: #FCD34D; }
.sq { max-width: 700px; }
.sq-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.sq-points { font-weight: 800; }
.sq-q-top { display: flex; align-items: center; justify-content: space-between; }
.sq-time { font-weight: 800; font-variant-numeric: tabular-nums; }
.sq-bar { height: 5px; border-radius: 4px; background: var(--field); overflow: hidden; margin: 6px 0 2px; }
.sq-bar i { display: block; height: 100%; width: 100%; background: var(--primary); transition: width 1s linear; }
.sq-bar.low i { background: var(--danger); }
.sq-choices { display: flex; flex-direction: column; gap: 8px; }
.sq-choice { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; padding: 11px 12px; border-radius: 12px;
  background: var(--field); color: var(--text); font-weight: 600; border: 2px solid transparent; }
.sq-choice:disabled { opacity: 1; }
.sq-choice .sq-letter { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--card); color: var(--text-2); font-weight: 800; font-size: 12px; }
.sq-choice.right { border-color: #16A34A; background: rgba(22,163,74,.12); }
.sq-choice.wrong { border-color: var(--danger); background: rgba(239,68,68,.12); }
.sq-choice.chosen { font-weight: 800; }
.sq-feedback { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--field); }
.sq-feedback.right { background: rgba(22,163,74,.12); }
.sq-feedback.wrong { background: rgba(239,68,68,.1); }
.sq-intro, .sq-result { text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.sq-medal { font-size: 42px; }
.sq-points-big { font-weight: 800; color: #B45309; }
:root[data-theme="dark"] .sq-points-big { color: #FCD34D; }
.sq-streak-row { display: flex; gap: 10px; align-items: center; font-size: 13px; font-weight: 700; }
.sq-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sq-badge { font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 20px; background: var(--primary-soft); color: var(--on-primary-soft); }
.sq-board { display: flex; flex-direction: column; gap: 4px; }
.sq-row { display: flex; align-items: center; gap: 8px; padding: 5px 2px; }
.sq-row.me { font-weight: 800; background: var(--primary-soft); border-radius: 8px; padding-inline: 6px; }
.sq-rank { width: 30px; flex: none; text-align: center; font-weight: 800; }
.sq-remind { align-items: center; gap: 8px; }
.sq-rev { border-inline-start: 4px solid var(--divider); }
.sq-rev.right { border-inline-start-color: #16A34A; }
.sq-rev.wrong { border-inline-start-color: var(--danger); }
.sq-rev-choice { font-size: 13px; color: var(--text-2); }
.sq-rev-choice.right { color: #16A34A; font-weight: 700; }
.sq-rev-choice.wrong { color: var(--danger); text-decoration: line-through; }

/* ─── الرقابة الأبوية: عدّاد الطفل وشاشة «انتهى وقتك» ─── */
.pc-badge { position: fixed; inset-block-start: auto; inset-block-end: 86px; inset-inline-end: 14px; z-index: 390;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; pointer-events: none;
  font-weight: 800; font-size: 13.5px; color: #065F46; background: color-mix(in srgb, #10B981 20%, var(--card));
  border: 1px solid color-mix(in srgb, #10B981 40%, transparent); box-shadow: var(--shadow); }
.pc-badge.warn { color: #92400E; background: color-mix(in srgb, #F59E0B 22%, var(--card)); border-color: color-mix(in srgb, #F59E0B 45%, transparent); }
.pc-badge .pc-emoji { font-size: 15px; }
@media (max-width: 760px) { .pc-badge { inset-block-end: 70px; } }

body.pc-locked { overflow: hidden; }
.pc-lock { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: blur(14px); }
/* نافذة «أكمل ملفك» المقفلة وحدها — كانت تُصيب بطاقة الرئيسية بنفس الاسم فتتداخل عناصرها على سطح المكتب */
.pc-lock .pc-card { width: min(400px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; display: grid; gap: 10px; justify-items: stretch;
  text-align: center; padding: 28px 22px; border-radius: 20px; background: var(--card); border: 1px solid var(--divider); box-shadow: var(--shadow-lg); }
.pc-lock .pc-card h2 { margin: 0; }
.pc-lock .pc-card .pc-ico { font-size: 54px; line-height: 1; }
.pc-left { display: grid; gap: 2px; padding: 12px; border-radius: 14px; text-align: center;
  background: color-mix(in srgb, #8B5CF6 8%, transparent); border: 1px solid color-mix(in srgb, #8B5CF6 25%, transparent); }
.pc-left b { font-size: 28px; font-weight: 800; }

/* مكتبة القصص + الألعاب الخارجية (وضع الأطفال) */
.kp-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 8px; }
.kp-cat { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: start; padding: 12px;
  border: 1px solid var(--border); border-radius: 16px; background: var(--card) center/cover no-repeat; cursor: pointer; min-height: 92px; }
.kp-cat:hover { border-color: var(--primary); }
.kp-cat-emo { font-size: 26px; }
.kp-cat b { font-size: .95rem; }
.kp-story-list { display: flex; flex-direction: column; gap: 8px; }
.kp-story-item { display: flex; gap: 10px; align-items: center; text-align: start; padding: 8px; border: 1px solid var(--border);
  border-radius: 14px; background: var(--card); cursor: pointer; }
.kp-story-item:hover { border-color: var(--primary); }
.kp-story-item img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; flex: none; }
.kp-story-emo { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; font-size: 28px; flex: none; }
.kp-story { font-size: 1.05rem; line-height: 1.9; }
.kp-story-cover { width: 100%; max-height: 260px; object-fit: cover; border-radius: 14px; }
.kp-story-p { margin: 10px 0; white-space: pre-wrap; }
.kp-story-fig { margin: 10px 0; text-align: center; }
.kp-story-fig img { max-width: 100%; border-radius: 14px; }
.kp-story-fig figcaption { font-size: .85rem; color: var(--text-2); margin-top: 4px; }
.kp-story-bar { display: flex; gap: 8px; align-items: center; justify-content: space-between; position: sticky; bottom: 0;
  padding: 10px 0; background: var(--card); border-top: 1px solid var(--border); flex-wrap: wrap; }
html.kp-ext-open, html.kp-ext-open body { overflow: hidden; }
.kp-ext-full { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; background: #000; }
.kp-ext-top { display: flex; gap: 8px; align-items: center; padding: 6px 10px; color: #fff; background: #111; }
.kp-ext-top b { flex: 1; min-width: 0; }
.kp-ext-frame { flex: 1; width: 100%; border: 0; background: #000; }
/* نافذة «شارك/احفظ بطاقتك» فوق إطار اللعبة (game-share.js) */
.gs-preview { display: block; max-width: 100%; max-height: min(52vh, 520px); border-radius: 14px; object-fit: contain; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); }
.gs-text { width: 100%; max-height: 110px; overflow: auto; white-space: pre-wrap; word-break: break-word; padding: 8px 10px; border-radius: 10px; background: var(--field); color: var(--text-2); }

/* ═══ «الأفلام القصيرة» ═══ */
.fm-hero { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 12px; border-radius: var(--r);
  background: linear-gradient(135deg, rgba(124, 92, 255, .16), rgba(255, 77, 141, .12)); flex-wrap: wrap; }
.fm-hero-emoji { font-size: 30px; line-height: 1; }
.fm-hero-txt { flex: 1 1 180px; min-width: 0; }
.fm-hero h1 { margin: 0; font-size: 20px; font-weight: 900; }
.fm-hero p { margin: 2px 0 0; font-size: 13px; color: var(--text-2); }
.fm-studio-link { flex: 0 0 auto; }

/* شريط التصنيفات: صفّ واحد يُسحب أفقياً بلا شريط تمرير ظاهر */
.fm-chips, .fm-sorts { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 2px 0 8px; margin: 0 -2px; scroll-snap-type: x proximity; }
.fm-chips::-webkit-scrollbar, .fm-sorts::-webkit-scrollbar { display: none; }
.fm-chips .chip, .fm-sorts .chip { flex: 0 0 auto; scroll-snap-align: start; }
.fm-sorts { padding-bottom: 10px; }

/* شبكة الأفلام: بطاقة الملصق + عنوان سطرين + سطر بيانات */
.fm-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); align-items: start; }
.fm-card { display: flex; flex-direction: column; gap: 6px; padding: 0; background: none; border: 0;
  text-align: start; cursor: pointer; color: inherit; min-width: 0; }
.fm-cover { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-sm); overflow: hidden;
  background: linear-gradient(160deg, var(--primary-soft), var(--field)); display: flex; align-items: center; justify-content: center; }
.fm-cover img { width: 100%; height: 100%; object-fit: cover; }
.fm-cover.wide { aspect-ratio: 16 / 9; }
.fm-cover-ph { font-size: 40px; opacity: .6; }
/* الشارات: أعلى الملصق للسعر، وأسفله للمدّة وعدد الأجزاء — داخل الملصق لا فوق العنوان */
.fm-badges { position: absolute; inset-inline: 6px; top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.fm-badge { padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 1.6;
  background: rgba(255, 255, 255, .92); color: #111; backdrop-filter: blur(4px); }
.fm-badge.paid { background: var(--primary); color: #fff; }
.fm-badge.owned { background: var(--success); color: #fff; }
.fm-meta-row { position: absolute; inset-inline: 6px; bottom: 6px; display: flex; justify-content: space-between; gap: 6px; }
.fm-parts, .fm-dur { padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(0, 0, 0, .6); }
.fm-title { font-size: 14px; line-height: 1.35; min-height: 2.7em; }
.fm-meta { font-size: 12px; }
.fm-more { width: 100%; margin-top: 14px; }

/* صفحة المشاهدة */
.fm-watch-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 2fr) minmax(250px, 1fr); align-items: start; }
.fm-player { border-radius: var(--r); overflow: hidden; background: #000; }
.fm-video { width: 100%; max-height: 72vh; display: block; background: #000; }
.fm-now-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px;
  background: var(--card); font-size: 13px; }
.fm-info { margin-top: 12px; }
.fm-h1 { margin: 0 0 4px; font-size: 19px; font-weight: 900; }
.fm-desc { margin: 8px 0 0; white-space: pre-wrap; }
.fm-buy { margin-top: 12px; padding: 12px; border-radius: var(--r-sm); background: var(--field); display: grid; gap: 8px; }
.fm-playlist { display: flex; flex-direction: column; gap: 6px; max-height: 70vh; overflow: auto; }
.fm-pl-item { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--divider); background: var(--card); cursor: pointer; text-align: start; width: 100%; min-width: 0; }
.fm-pl-item.active { border-color: var(--primary); background: var(--primary-soft); color: var(--on-primary-soft); }
.fm-pl-item.locked { opacity: .65; }
.fm-pl-n { min-width: 22px; text-align: center; font-weight: 800; }
.fm-pl-t { flex: 1; min-width: 0; }
.fm-pub { align-items: center; }

/* التفاعل: إعجاب · تعليق · مشاركة */
.fm-social { margin-top: 12px; }
.fm-social-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fm-like.on { background: rgba(239, 68, 68, .14); color: var(--danger); }
.fm-comments { margin-top: 12px; }
.fm-comment { display: flex; gap: 8px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--divider); }
.fm-comment .btn-text.on { color: var(--danger); }
.fm-ad { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.fm-ad-media { width: 100%; max-height: 46vh; border-radius: var(--r-sm); object-fit: contain; background: #000; }
.fm-ad-skip { min-width: 120px; }

/* استوديو الناشر */
.fm-mine-cover { width: 52px; height: 74px; flex: none; object-fit: cover; border-radius: var(--r-sm);
  background: var(--field); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.fm-mine-actions .btn { flex: 1 1 auto; }
.fm-earn-row { display: flex; gap: 20px; margin: 6px 0 8px; flex-wrap: wrap; }
.fm-earn-item { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--divider); font-size: 13px; }
.fm-pub-status { display: grid; gap: 8px; justify-items: start; }
.fm-pub-status.approved b { color: var(--success); }
.fm-pub-status.rejected b, .fm-pub-status.suspended b { color: var(--danger); }
.fm-bar { height: 6px; border-radius: 4px; background: var(--field); overflow: hidden; }
.fm-bar i { display: block; height: 100%; width: 0; background: var(--primary); transition: width .2s; }
.fm-pl-edit { cursor: grab; }
.fm-pl-edit.dragging { opacity: .5; border-style: dashed; }
.fm-grip { color: var(--text-2); letter-spacing: -2px; cursor: grab; user-select: none; }

/* نافذة الشراء: السعر والرصيد */
.fm-pay { background: var(--field); border-radius: var(--r-sm); padding: 10px 12px; display: grid; gap: 6px; }
.fm-pay .danger, .danger { color: var(--danger); }

/* الفيلم العمودي: الفيديو بنسبة 9:16 في الوسط */
.fm-portrait .fm-video { max-height: 70vh; aspect-ratio: 9 / 16; object-fit: contain; margin: 0 auto; }

@media (max-width: 900px) {
  .fm-watch-grid { grid-template-columns: 1fr; }
  .fm-playlist { max-height: none; }
}
@media (max-width: 560px) {
  .fm-hero { padding: 12px 14px; }
  .fm-hero h1 { font-size: 18px; }
  .fm-studio-link { width: 100%; justify-content: center; }
  .fm-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .fm-video { max-height: 56vh; }
}

/* ═══ التقويم ═══ */
.cal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cal-head b { flex: 1; text-align: center; font-size: 17px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 14px; width: 100%; }
.cal-grid > * { min-width: 0; }
.cal-dow { text-align: center; font-size: 12px; color: var(--text-2); padding: 4px 0; }
.cal-cell { aspect-ratio: 1; min-width: 0; font-size: 13px; border: 1px solid var(--divider); border-radius: 10px; background: var(--card);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; font-weight: 700; }
.cal-cell.empty { border: 0; background: none; cursor: default; }
.cal-cell.today { border-color: var(--primary); color: var(--primary); }
.cal-cell.on { background: var(--primary); color: #fff; border-color: var(--primary); }
/* التقويم المطوّر: هجري تحت الميلادي، أيام الشهرين المجاورين، المناسبات، «اليوم» و«القادم» */
.cal-month { padding: 10px 10px 4px; margin-bottom: 12px; }
.cal-month .cal-head { margin-bottom: 2px; }
.cal-hijri-line { text-align: center; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.cal .cal-cell { aspect-ratio: auto; min-height: 56px; position: relative; gap: 1px; padding: 4px 2px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.cal-cell .cal-g { font-size: 15px; font-weight: 800; line-height: 1.15; }
.cal-cell .cal-h { font-size: 10px; font-weight: 500; color: var(--text-2); line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-cell .cal-h.first { color: var(--primary); font-weight: 800; }
.cal-cell .cal-dots { min-height: 4px; }
.cal-cell.out { opacity: .4; }
.cal-cell.occ { background: var(--primary-soft); }
.cal-cell.today:not(.on) { border-width: 2px; }
.cal-cell.on .cal-h, .cal-cell.on .cal-h.first { color: #fff; opacity: .9; }
.cal-occ-emoji { position: absolute; top: 2px; inset-inline-end: 3px; font-size: 9px; font-style: normal; line-height: 1; }
.cal-today { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 12px; border-radius: 20px; background: var(--primary); color: #fff; }
.cal-today .grow { min-width: 0; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.cal-today .grow > b { font-size: 15px; font-weight: 900; }
.cal-today-day { flex: none; width: 58px; padding: 6px 0; border-radius: 14px; background: rgba(255, 255, 255, .16); display: flex; flex-direction: column; align-items: center; }
.cal-today-day small { font-size: 12px; font-weight: 700; }
.cal-today-day b { font-size: 24px; font-weight: 900; line-height: 1.1; }
.cal-today-next { margin-top: 4px; padding: 2px 10px; border-radius: 20px; background: rgba(255, 255, 255, .18); font-size: 12.5px; font-weight: 700; }
.cal-day { margin-bottom: 12px; }
.cal-occ { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 10px; border-radius: 14px; background: var(--primary-soft); }
.cal-occ-e { font-size: 22px; flex: none; }
.cal-occ .icon-btn { flex: none; }
.cal-up { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.cal-up h3 { margin: 0 0 4px; font-size: 16px; }
.cal-up-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border: 0; background: none; color: var(--text); text-align: start; cursor: pointer; border-radius: 10px; font: inherit; }
.cal-up-row:hover { background: var(--field); }
.cal-up-row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-up-row small { flex: none; color: var(--text-2); }
.cal-up-row.late small { color: #d33; font-weight: 700; }
.cal-up-late { color: #d33; font-weight: 800; font-size: 13px; }
.cal-up-sub { font-weight: 800; font-size: 13px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--divider); }
.cal-dots { display: flex; gap: 2px; }
.cal-dots u { width: 4px; height: 4px; border-radius: 50%; background: currentColor; display: block; }
.cal-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--divider); border-radius: 12px; background: var(--card); }
.cal-item.done { opacity: .6; }
.cal-item.done b { text-decoration: line-through; }
.cal-item .grow { cursor: pointer; }
.cal-check { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--divider); background: var(--field); font-size: 16px; cursor: pointer; }
/* ═══ مصاريفي ═══ */
.exp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.exp-head b { flex: 1; text-align: center; font-size: 17px; }
.exp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.exp-card { display: flex; flex-direction: column; gap: 2px; text-align: center; }
.exp-card b { font-size: 16px; }
.exp-card.in b { color: #10B981; }
.exp-card.out b { color: var(--danger); }
.exp-bar { height: 7px; border-radius: 4px; background: var(--field); overflow: hidden; margin-top: 4px; }
.exp-bar i { display: block; height: 100%; background: var(--primary); }
.exp-bar i.over { background: var(--danger); }
.exp-item { display: flex; align-items: center; gap: 10px; }
.exp-item .grow { cursor: pointer; }
.exp-item .in { color: #10B981; }
.exp-item .out { color: var(--danger); }
/* الجوال: الأرقام الثلاثة في صفّ واحد مضغوط بدل ثلاث بطاقات طويلة */
@media (max-width: 520px) {
  .exp-cards { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .exp-card { padding: 8px 6px; }
  .exp-card b { font-size: 13.5px; }
  .exp-card .small { font-size: 11px; }
}
/* الفيلم العمودي: إطار ضيّق في الوسط كالشورتس */
.fm-portrait .fm-watch-grid { grid-template-columns: minmax(0, 1fr) minmax(240px, .8fr); }
.fm-portrait .fm-video { max-height: 78vh; aspect-ratio: 9 / 16; object-fit: contain; margin: 0 auto; }
.fm-social { margin-top: 12px; }
.fm-like.on { background: rgba(239, 68, 68, .14); }
.fm-comments { margin-top: 12px; }
.fm-comment { display: flex; gap: 8px; align-items: flex-start; }
.fm-comment .btn-text.on { color: var(--danger); }
.fm-ad { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.fm-ad-media { width: 100%; max-height: 50vh; border-radius: 12px; object-fit: contain; background: #000; }
.fm-ad-skip { min-width: 120px; }
@media (max-width: 900px) { .fm-portrait .fm-watch-grid { grid-template-columns: 1fr; } }
/* صفّ قابل للنقر داخل بطاقة: يبدو نصاً لا زرّاً، ويظل هدف لمس واضحاً */
.cal-main, .exp-main { flex: 1; min-width: 0; display: block; text-align: start; background: none; border: 0;
  color: inherit; font: inherit; padding: 2px 0; cursor: pointer; }
.cal-main:hover, .exp-main:hover { opacity: .85; }
.cal-hint, .fm-hint { margin: 8px 2px 0; }
.exp-item .icon-btn, .cal-item .icon-btn { flex: none; }
@media (max-width: 420px) { .cal-grid { gap: 3px; } .cal-cell { font-size: 12px; border-radius: 8px; } }
/* عنوان قسم موحّد داخل الأدوات */
.tl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 16px 2px 8px; }
.tl-head h3 { margin: 0; font-size: 16px; font-weight: 900; }
.btn-sm { padding: 5px 10px; font-size: 13px; }
/* منتقي الشهر */
.mp-year { align-items: center; justify-content: center; gap: 14px; }
.mp-year b { font-size: 18px; min-width: 70px; text-align: center; }
.mp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mp-grid .chip { width: 100%; justify-content: center; }
.mp-btn { font-weight: 900; font-size: 16px; }
/* صفّ الحركة: أيقونة الفئة ثم النصّ ثم المبلغ ثم الأزرار */
.exp-ico { font-size: 20px; flex: none; }
.exp-item { gap: 8px; }
.exp-item > b { margin-inline-start: auto; white-space: nowrap; }
/* سطر الإرشاد: أجزاء معزولة اتجاهياً حتى لا تختلط الإيموجي بالنصّ */
.hint-line { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 2px 0; line-height: 1.7; }
.hint-part { unicode-bidi: isolate; white-space: nowrap; }
.hint-part + .hint-part::before { content: '·'; margin-inline-end: 8px; color: var(--text-2); }
/* اختيار الفئة بأزرار ظاهرة داخل نافذة الحركة */
.cat-pick { display: flex; flex-wrap: wrap; gap: 6px; max-height: 148px; overflow: auto; padding: 2px; }
.cat-pick .chip { font-size: 13px; }
/* «مصاريفي»: ثلاثة تبويبات رئيسية */
.exp-tabs button { font-size: 14px; }
/* زرّا الإضافة بعبارة كاملة — عمودان متساويان ولا قصّ للنصّ */
.exp-add { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.exp-add .btn { white-space: nowrap; padding-inline: 10px; }
@media (max-width: 380px) { .exp-add { grid-template-columns: 1fr; } }
/* المقارنة بالشهر السابق */
.exp-vs { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: center; }
.exp-vs > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.exp-delta { font-weight: 900; padding: 4px 10px; border-radius: 999px; background: var(--field); white-space: nowrap; }
.exp-delta.up { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.exp-delta.down { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
/* النصائح */
.exp-tip { display: flex; align-items: flex-start; gap: 10px; border-inline-start: 4px solid var(--divider); }
.exp-tip.good { border-inline-start-color: var(--success); }
.exp-tip.warn { border-inline-start-color: var(--warning); }
.exp-tip.info { border-inline-start-color: var(--primary); }
.exp-tip-ico { flex: none; font-size: 17px; }
/* أعمدة آخر ستة أشهر */
.exp-trend { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; height: 150px; }
.exp-trend-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.exp-trend-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.exp-trend-bars i { width: 42%; border-radius: 4px 4px 0 0; min-height: 3px; }
.exp-trend-bars i.out { background: var(--danger); }
.exp-trend-bars i.in { background: var(--success); }
/* ═══ «الديون» ═══ */
.dbt-hero { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin: 4px 0 10px; border-radius: var(--r);
  background: linear-gradient(135deg, color-mix(in srgb, #F59E0B 18%, var(--card)), var(--card)); }
.dbt-hero h1 { margin: 0; font-size: 20px; font-weight: 900; }
.dbt-hero p { margin: 2px 0 0; font-size: 13px; color: var(--text-2); }
.dbt .exp-card { gap: 2px; }
.dbt-alert { margin: 8px 0; padding: 10px 12px; border-radius: var(--r-sm); font-weight: 700;
  background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
/* التبويبان الكبيران: لا لبس بين «لي» و«عليّ» */
.dbt-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 10px; }
.dbt-switch-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 10px; border-radius: var(--r);
  background: var(--card); border: 2px solid var(--divider); font-weight: 800; font-size: 15px; color: var(--text-2); cursor: pointer; }
.dbt-switch-btn.lent.active { border-color: var(--success); color: var(--success); background: color-mix(in srgb, var(--success) 10%, var(--card)); }
.dbt-switch-btn.owe.active { border-color: var(--danger); color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, var(--card)); }
@media (max-width: 400px) { .dbt-switch-btn { font-size: 13.5px; padding: 12px 6px; gap: 6px; } }
.dbt-switch-btn > span:first-child { white-space: nowrap; }
.dbt-count { min-width: 22px; padding: 1px 7px; border-radius: 999px; font-size: 12px; background: var(--field); color: var(--text); }
.dbt-tools { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; }
.dbt-add { white-space: nowrap; }
.dbt-search { min-width: 0; }
@media (max-width: 420px) { .dbt-tools { grid-template-columns: 1fr; } }
/* بطاقة الشخص */
.dbt-person { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.dbt-person.late { border-inline-start: 4px solid var(--danger); }
.dbt-person.paid { opacity: .78; }
.dbt-person-head { display: flex; align-items: center; gap: 10px; }
.dbt-avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-weight: 900; font-size: 18px; }
.dbt-total { white-space: nowrap; font-size: 16px; }
/* الرقم والعنوان يلتفّان على سطرين بدل أن يُقصّ «+213» من أوّله */
.dbt-meta { overflow-wrap: anywhere; line-height: 1.45; }
.dbt-meta bdi { white-space: nowrap; }
.dbt-contact { display: flex; gap: 8px; flex-wrap: wrap; }
.dbt-contact .btn { flex: 1; min-width: 110px; justify-content: center; text-decoration: none; }
.dbt-wa { background: #25D366; color: #fff; }
/* صفّ الدين: مربّع السداد · المبلغ والتاريخ · تعديل · حذف */
.dbt-row { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--divider); }
.dbt-row.is-paid .dbt-amount { text-decoration: line-through; opacity: .7; }
.dbt-person.paid .dbt-row { border-top: 0; padding-top: 0; }
.dbt-check-wrap { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; color: var(--text-2); }
.dbt-check { width: 22px; height: 22px; accent-color: var(--success); cursor: pointer; }
.dbt-amount { display: block; font-size: 15px; }
.dbt-amount.in, .dbt-total.in { color: var(--success); }
.dbt-amount.out, .dbt-total.out { color: var(--danger); }
.dbt-due { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--field); }
.dbt-due.soon { background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); }
.dbt-due.late { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.dbt-paid-toggle { margin-top: 14px; font-weight: 800; }
/* النافذة */
.dbt-dir { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dbt-dir .chip { justify-content: center; padding: 10px; font-weight: 800; }
.dbt-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 380px) { .dbt-grid2 { grid-template-columns: 1fr; } }
.dbt-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dbt-remind { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.dbt-remind[hidden] { display: none; }

/* ─── «من يعرفني؟» ─── */
.wkn { --wk-a: #8B5CF6; --wk-b: #EC4899; --wk-soft: color-mix(in srgb, var(--wk-a) 12%, var(--card)); padding-bottom: 48px; }
.wkn-card { background: var(--card); border: 1px solid var(--divider); border-radius: 20px; padding: 16px; margin-bottom: 12px; box-shadow: 0 6px 22px rgba(20, 10, 60, .05); }
.wkn-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 20px 18px; margin: 4px 0 14px; border-radius: 22px; color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, #a78bfa 0%, var(--wk-a) 40%, var(--wk-b) 100%); box-shadow: 0 12px 30px color-mix(in srgb, var(--wk-a) 35%, transparent); }
.wkn-hero h1 { margin: 0; font-size: 23px; font-weight: 900; }
.wkn-hero p { margin: 4px 0 0; font-size: 14px; opacity: .92; }
.wkn-hero-art { position: relative; width: 70px; height: 70px; flex: none; }
.wkn-hero-art span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 44px; background: rgba(255,255,255,.18); border-radius: 22px; backdrop-filter: blur(4px); }
.wkn-hero-art i { position: absolute; font-style: normal; font-size: 20px; animation: wkn-float 3s ease-in-out infinite; }
.wkn-hero-art i:nth-of-type(1) { top: -8px; inset-inline-end: -10px; }
.wkn-hero-art i:nth-of-type(2) { bottom: -8px; inset-inline-start: -10px; animation-delay: 1.2s; }
@keyframes wkn-float { 50% { transform: translateY(-5px); } }
.wkn-cta { width: 100%; min-height: 52px; font-size: 16.5px; font-weight: 900; margin: 6px 0 14px; border-radius: 16px; }
.wkn-cta.btn-primary { background: linear-gradient(90deg, var(--wk-a), var(--wk-b)); border: 0; color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--wk-b) 30%, transparent); }
.wkn-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.wkn-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 14px 8px; border-radius: 18px; background: var(--card); border: 1px solid var(--divider); }
.wkn-step-n { position: absolute; top: 8px; inset-inline-start: 8px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 900; color: #fff; background: var(--wk-a); }
.wkn-step-e { font-size: 30px; }
.wkn-step b { font-size: 13.5px; }
.wkn-step small { color: var(--text-2); font-size: 11.5px; line-height: 1.4; }
@media (max-width: 520px) { .wkn-steps { grid-template-columns: 1fr; } .wkn-step { flex-direction: row; text-align: start; padding: 12px 14px; } .wkn-step-n { position: static; } .wkn-step small { display: block; } }
.wkn-sub { margin: 20px 2px 10px; font-size: 17px; font-weight: 900; }
.wkn-home-tabs { display: flex; gap: 6px; margin: 0 0 12px; padding: 4px; border-radius: 16px; background: var(--field); }
.wkn-home-tab { flex: 1; display: flex; justify-content: center; align-items: center; gap: 7px; min-height: 46px; padding: 8px; border-radius: 12px; text-align: center; color: var(--text-2); text-decoration: none; font-weight: 800; }
.wkn-home-tab.on { background: var(--card); color: var(--primary); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.wkn-start-card { display: flex; align-items: center; gap: 14px; padding: 16px; }
.wkn-start-icon { width: 54px; height: 54px; flex: none; display: grid; place-items: center; border-radius: 17px; background: var(--wk-soft); font-size: 30px; }
.wkn-start-card p { margin: 4px 0 0; line-height: 1.5; }
.wkn-start-card .wkn-cta { width: auto; min-width: 90px; margin: 0; }
/* «أنشئ اختبارك الآن» تحت النتيجة مباشرة: زر كبير بسطرين ونبض خفيف يلفت النظر */
.wkn-big-cta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 68px; margin: 14px 0 6px; text-decoration: none; animation: wkn-pulse 2.2s ease-in-out infinite; }
.wkn-big-cta .wkn-big-cta-t { font-size: 19px; font-weight: 900; line-height: 1.2; }
.wkn-big-cta small { font-size: 12.5px; font-weight: 600; opacity: .92; }
@keyframes wkn-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@media (prefers-reduced-motion: reduce) { .wkn-big-cta { animation: none; } }
@media (max-width: 520px) { .wkn-start-card { flex-wrap: wrap; } .wkn-start-card .wkn-cta { width: 100%; } }
.wkn-list { display: grid; gap: 8px; }
.wkn-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--card); border: 1px solid var(--divider); color: var(--text); transition: transform .12s, box-shadow .12s; }
.wkn-item:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(20, 10, 60, .07); }
.wkn-item-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: var(--wk-soft); }
.wkn-item-meta { display: flex; gap: 10px; color: var(--text-2); font-size: 12.5px; margin-top: 2px; }
.wkn-fake-pill { color: #dc2626; font-weight: 800; }
.wkn-empty { text-align: center; padding: 26px 10px; color: var(--text-2); font-size: 34px; }
.wkn-empty p { font-size: 14px; margin: 6px 0 0; }
.wkn-top { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; }
.wkn-count { font-size: 12.5px; font-weight: 800; color: var(--text-2); }
.wkn-progress { height: 9px; border-radius: 99px; background: var(--field); overflow: hidden; }
.wkn-progress i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--wk-a), var(--wk-b)); transition: width .3s; }
.wkn-q { text-align: center; padding: 22px 16px; }
.wkn-qemoji { width: 96px; height: 96px; margin: 0 auto; border-radius: 28px; display: grid; place-items: center; font-size: 52px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--wk-a) 18%, var(--card)), color-mix(in srgb, var(--wk-b) 16%, var(--card))); }
.wkn-qemoji.sm { width: 40px; height: 40px; border-radius: 12px; font-size: 22px; margin: 0; flex: none; }
.wkn-qimg { width: 100%; max-width: 360px; aspect-ratio: 16 / 10; margin: 0 auto; border-radius: 18px; overflow: hidden; background: var(--field); }
.wkn-qimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wkn-qimg.sm { width: 40px; height: 40px; max-width: none; aspect-ratio: 1; border-radius: 12px; margin: 0; flex: none; }
.wkn-q h2 { margin: 12px 0 4px; font-size: 21px; font-weight: 900; line-height: 1.45; }
.wkn-hint { margin: 8px 0 0; font-size: 12.5px; color: var(--text-2); }
.wkn-opts { display: grid; gap: 10px; margin-top: 16px; }
.wkn-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; border-radius: 16px; border: 2px solid var(--divider);
  background: var(--card); color: var(--text); font-size: 16px; font-weight: 800; text-align: start; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.wkn-opt:hover { border-color: color-mix(in srgb, var(--wk-a) 55%, var(--divider)); background: var(--wk-soft); }
.wkn-opt:active { transform: scale(.98); }
.wkn-opt.on { border-color: var(--wk-a); background: color-mix(in srgb, var(--wk-a) 16%, var(--card)); }
.wkn-opt-k { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--field); font-size: 13px; font-weight: 900; }
.wkn-opt.on .wkn-opt-k { background: var(--wk-a); color: #fff; }
.wkn-tools { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 6px; }
.wkn-tools .btn { flex: 1; min-width: 110px; }
.wkn-sum { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.wkn-sum b { font-size: 20px; }
.wkn-add { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border-radius: 16px; border: 2px dashed color-mix(in srgb, var(--wk-a) 45%, var(--divider));
  background: var(--wk-soft); color: var(--text); text-align: start; cursor: pointer; margin-bottom: 12px; }
.wkn-add > span { font-size: 26px; }
.wkn-add div { flex: 1; } .wkn-add b { display: block; } .wkn-add small { color: var(--text-2); }
.wkn-field { display: grid; gap: 6px; }
.wkn-done { text-align: center; padding: 10px 0 6px; }
.wkn-done h1 { margin: 4px 0; font-size: 24px; font-weight: 900; }
.wkn-done p { margin: 0 0 12px; color: var(--text-2); }
.wkn-confetti { font-size: 56px; animation: wkn-pop .5s ease-out; }
@keyframes wkn-pop { from { transform: scale(.4); opacity: 0; } }
.wkn-share { display: grid; gap: 10px; padding: 14px; border-radius: 20px; background: var(--card); border: 1px solid var(--divider); margin-bottom: 12px; }
.wkn-share-msg { padding: 12px; border-radius: 14px; background: var(--wk-soft); }
.wkn-share-msg p { margin: 0 0 8px; font-size: 14px; line-height: 1.6; }
.wkn-link { padding: 9px 12px; border-radius: 10px; background: var(--card); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wk-a); font-weight: 700; }
.wkn-share-btns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.wkn-wa { background: #25D366; color: #fff; }
.wkn-fb { background: #1877F2; color: #fff; }
.wkn-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 18px; }
.wkn-stats > div { padding: 12px 6px; border-radius: 16px; background: var(--card); border: 1px solid var(--divider); text-align: center; }
.wkn-stats b { display: block; font-size: 24px; font-weight: 900; }
.wkn-stats small { color: var(--text-2); }
.wkn-stats .bad b { color: #dc2626; }
.wkn-board { display: grid; gap: 6px; }
.wkn-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 16px; background: var(--card); border: 1px solid var(--divider); }
.wkn-answer-row { cursor: pointer; }
.wkn-answer-row:hover { background: var(--hover); }
.wkn-answer-row:focus-visible { outline: 2px solid var(--wk-a); outline-offset: 2px; }
.wkn-share-title { margin-top: 24px; }
.wkn-row.fake { border-color: color-mix(in srgb, #dc2626 35%, var(--divider)); }
.wkn-row.off { opacity: .5; }
.wkn-row-act { display: flex; align-items: center; gap: 2px; }
.wkn-rank { width: 28px; text-align: center; font-weight: 900; color: var(--text-2); flex: none; }
.wkn-score { font-weight: 900; }
.wkn-guest { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--field); flex: none; }
.wkn-tag { display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: 99px; background: var(--field); font-size: 11px; font-weight: 700; color: var(--text-2); }
.wkn-del { width: 100%; margin-top: 16px; color: #dc2626; }
/* صفحة الرابط */
.wkn-land { text-align: center; padding: 24px 16px 18px; margin: 4px 0 12px; border-radius: 24px; color: #fff;
  background: radial-gradient(120% 120% at 50% 0%, #a78bfa 0%, var(--wk-a) 45%, var(--wk-b) 100%); box-shadow: 0 14px 34px color-mix(in srgb, var(--wk-a) 35%, transparent); }
.wkn-land-top { position: relative; display: inline-block; }
.wkn-land-top .avatar, .wkn-land-top img { border: 4px solid rgba(255,255,255,.85); border-radius: 50%; }
.wkn-land-badge { position: absolute; bottom: -4px; inset-inline-end: -6px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.wkn-land h1 { margin: 12px 0 4px; font-size: 25px; font-weight: 900; }
.wkn-land-sub { margin: 0; font-size: 15px; opacity: .95; }
.wkn-bubble { display: flex; gap: 8px; align-items: flex-start; margin: 14px auto 0; max-width: 420px; padding: 10px 14px; border-radius: 16px; background: rgba(255,255,255,.18); text-align: start; }
.wkn-bubble q { quotes: none; font-weight: 700; line-height: 1.5; }
.wkn-info h3 { margin: 0 0 6px; font-size: 16px; font-weight: 900; }
.wkn-info p { margin: 0; color: var(--text-2); line-height: 1.7; font-size: 14px; }
.wkn-howto { margin: 10px 0 0; padding-inline-start: 20px; display: grid; gap: 4px; font-size: 14px; font-weight: 700; }
.wkn-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.wkn-chips span { padding: 5px 11px; border-radius: 99px; background: var(--wk-soft); font-size: 12.5px; font-weight: 700; }
.wkn-safe { font-size: 12.5px !important; color: #16a34a !important; font-weight: 700; }
.wkn-locked { position: relative; overflow: hidden; }
.wkn-locked-q { display: grid; gap: 8px; filter: blur(3.5px); user-select: none; pointer-events: none; }
.wkn-locked-row { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.wkn-locked-ov { position: absolute; inset: 0; display: grid; place-items: center; padding: 12px; text-align: center; font-weight: 900; background: color-mix(in srgb, var(--card) 55%, transparent); }
.wkn-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .wkn-choices { grid-template-columns: 1fr; } }
.wkn-choice { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 14px; border-radius: 20px; background: var(--card); border: 2px solid var(--divider); text-align: center; }
.wkn-choice.best { border-color: var(--wk-a); background: var(--wk-soft); }
.wkn-choice-tag { position: absolute; top: -10px; inset-inline-start: 50%; transform: translateX(50%); padding: 2px 12px; border-radius: 99px; background: linear-gradient(90deg, var(--wk-a), var(--wk-b)); color: #fff; font-size: 11.5px; font-weight: 900; }
[dir="ltr"] .wkn-choice-tag { transform: translateX(-50%); }
.wkn-choice-ic { font-size: 34px; }
.wkn-choice b { font-size: 16px; }
.wkn-choice small { color: var(--text-2); }
.wkn-choice ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13.5px; text-align: start; }
.wkn-choice ul li::before { content: '✓ '; color: var(--wk-a); font-weight: 900; }
.wkn-choice .input { text-align: center; }
.wkn-owner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; background: var(--card); border: 1px solid var(--divider); margin-bottom: 12px; }
.wkn-owner-name { display: block; font-weight: 900; font-size: 16px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wkn-me { display: flex; align-items: center; gap: 12px; }
.wkn-me b { display: block; font-size: 16px; }
.wkn-result { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 24px 16px; }
.wkn-result h1 { margin: 6px 0 0; font-size: 26px; font-weight: 900; }
.wkn-result h3 { margin: 0; font-size: 19px; font-weight: 900; }
.wkn-ring { position: relative; display: grid; place-items: center; }
.wkn-ring svg { position: absolute; inset: 0; }
.wkn-ring b { position: relative; font-size: 28px; font-weight: 900; }
.wkn-next { text-align: center; background: linear-gradient(135deg, color-mix(in srgb, var(--wk-a) 14%, var(--card)), color-mix(in srgb, var(--wk-b) 12%, var(--card))); }
.wkn-next b { font-size: 18px; }
.wkn-next p { margin: 4px 0 8px; color: var(--text-2); }
.wkn-revs { display: grid; gap: 8px; }
.wkn-rev { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--divider); border-inline-start: 4px solid var(--divider); }
.wkn-rev.ok { border-inline-start-color: #16a34a; }
.wkn-rev.no { border-inline-start-color: #dc2626; }
.wkn-rev b { display: block; font-size: 14px; }
.wkn-rev small { color: var(--text-2); }
.wkn-rev.skip { border-inline-start-color: #94a3b8; }
.wkn-answer-summary { margin-bottom: 10px; padding: 10px 12px; border-radius: 12px; background: var(--wk-soft); font-weight: 900; text-align: center; }
.wkn-start-top { animation: wkn-attn-up 2.7s ease-in-out infinite; }
.wkn-start-bottom { animation: wkn-attn-side 3.1s ease-in-out infinite; }
@keyframes wkn-attn-up { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes wkn-attn-side { 0%, 100% { translate: 0 0; } 50% { translate: 3px 0; } }
.wkn-about-bottom { display: block; width: 100%; color: var(--text); font: inherit; text-align: start; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.wkn-about-bottom:hover { transform: translateY(-2px); box-shadow: 0 8px 24px color-mix(in srgb, var(--wk-a) 16%, transparent); }
.wkn-about-bottom:focus-visible { outline: 2px solid var(--wk-a); outline-offset: 2px; }
.wkn-about-bottom .wkn-chips { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .wkn-start-top, .wkn-start-bottom { animation: none; } }

/* ─── «صارحني» (رسائل مجهولة) — بادئة srh- ─── */
.srh { --sr-a: #0F766E; --sr-b: #6366F1; --sr-soft: color-mix(in srgb, var(--sr-a) 11%, var(--card)); padding-bottom: 48px; }
.srh-card { background: var(--card); border: 1px solid var(--divider); border-radius: 20px; padding: 16px; margin-bottom: 12px; box-shadow: 0 6px 22px rgba(10, 40, 50, .05); }
.srh-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 20px 18px; margin: 4px 0 14px; border-radius: 22px; color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, #2dd4bf 0%, var(--sr-a) 45%, var(--sr-b) 100%); box-shadow: 0 12px 30px color-mix(in srgb, var(--sr-a) 32%, transparent); }
.srh-hero h1 { margin: 0; font-size: 23px; font-weight: 900; }
.srh-hero p { margin: 4px 0 0; font-size: 14px; opacity: .92; }
.srh-hero-art { position: relative; width: 70px; height: 70px; flex: none; }
.srh-hero-art span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 42px; background: rgba(255,255,255,.18); border-radius: 22px; }
.srh-hero-art i { position: absolute; font-style: normal; font-size: 20px; }
.srh-hero-art i:nth-of-type(1) { top: -6px; inset-inline-end: -8px; }
.srh-hero-art i:nth-of-type(2) { bottom: -6px; inset-inline-start: -8px; }
.srh-share { background: var(--sr-soft); border: 1px solid color-mix(in srgb, var(--sr-a) 25%, var(--divider)); border-radius: 18px; padding: 14px; margin-bottom: 12px; }
.srh-share-msg small { color: var(--text-2); font-weight: 700; }
.srh-link { margin: 6px 0 10px; padding: 10px 12px; background: var(--card); border: 1px dashed var(--divider); border-radius: 12px; font-weight: 800; word-break: break-all; text-align: start; }
.srh-share-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.srh-share-btns .btn { flex: 1 1 auto; justify-content: center; }
.srh-wa { background: #25D366; color: #fff; }
.srh-fb { background: #1877F2; color: #fff; }
.srh-tabs { display: flex; gap: 6px; padding: 4px; background: var(--field); border-radius: 14px; margin-bottom: 12px; }
.srh-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px; border: 0; background: none; border-radius: 11px; font: inherit; font-weight: 800; color: var(--text-2); cursor: pointer; }
.srh-tab.on { background: var(--card); color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.srh-badge { min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 10px; background: var(--danger); color: #fff; font-size: 12px; }
.srh-filters, .srh-reasons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.srh-chip { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--divider); background: var(--field); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.srh-chip.on { background: var(--sr-a); border-color: var(--sr-a); color: #fff; }
.srh-list { display: flex; flex-direction: column; gap: 10px; }
.srh-msg { background: var(--card); border: 1px solid var(--divider); border-radius: 18px; padding: 14px; }
.srh-msg.new { border-color: color-mix(in srgb, var(--sr-a) 55%, var(--divider)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sr-a) 12%, transparent); }
.srh-msg.ask { border-color: color-mix(in srgb, var(--warning) 60%, var(--divider)); }
.srh-msg-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.srh-who { display: inline-flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none; min-width: 0; }
.srh-anon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--field); font-size: 16px; }
.srh-tag { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--field); color: var(--text-2); }
.srh-tag.new { background: var(--sr-a); color: #fff; }
.srh-tag.ok { background: color-mix(in srgb, var(--success) 16%, var(--card)); color: var(--success); }
.srh-body { margin: 10px 0 6px; font-size: 16px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.srh-state { display: inline-block; margin: 2px 0 6px; padding: 5px 10px; border-radius: 10px; font-size: 13px; font-weight: 700; background: var(--field); color: var(--text-2); }
.srh-state.pending { background: color-mix(in srgb, var(--warning) 15%, var(--card)); color: var(--warning); }
.srh-state.accepted { background: color-mix(in srgb, var(--success) 14%, var(--card)); color: var(--success); }
.srh-acts { display: flex; align-items: center; gap: 4px; border-top: 1px solid var(--divider); padding-top: 8px; margin-top: 4px; flex-wrap: wrap; }
.srh-fav { color: #F59E0B; }
.srh-askbox { margin: 6px 0; padding: 12px; border-radius: 14px; background: color-mix(in srgb, var(--warning) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--warning) 35%, var(--divider)); }
.srh-askbtns { display: flex; gap: 8px; margin-top: 10px; }
.srh-askbtns .btn { flex: 1; justify-content: center; }
.srh-ask { text-align: center; }
.srh-ask-e { font-size: 44px; }
.srh-ask h3 { margin: 6px 0; }
.srh-ask p { margin: 0; color: var(--text-2); line-height: 1.6; }
.srh-empty { text-align: center; padding: 30px 12px; font-size: 40px; background: var(--card); border: 1px dashed var(--divider); border-radius: 18px; }
.srh-empty p { font-size: 15px; color: var(--text-2); margin: 8px 0 0; }
.srh-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 700; }
.srh-note.bad { border-color: color-mix(in srgb, var(--danger) 45%, var(--divider)); color: var(--danger); }
.srh-hint { margin: 0 4px 10px; }
.srh-set { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--divider); cursor: pointer; }
.srh-set small { display: block; color: var(--text-2); margin-top: 2px; }
.srh-field { display: flex; flex-direction: column; gap: 8px; padding: 12px 0 4px; }
.srh-field .btn { align-self: flex-start; }
.srh-blocks { display: flex; flex-direction: column; gap: 6px; }
.srh-block { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--field); min-width: 0; }
.srh-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.srh-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 14px 8px; background: var(--card); border: 1px solid var(--divider); border-radius: 16px; }
.srh-step-n { position: absolute; top: 8px; inset-inline-start: 8px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--sr-a); color: #fff; font-size: 12px; font-weight: 800; }
.srh-step-e { font-size: 28px; }
.srh-step small { color: var(--text-2); }
.srh-cta { width: 100%; justify-content: center; margin-top: 8px; padding-block: 12px; font-size: 16px; }
.srh-land { text-align: center; padding: 10px 0 14px; }
.srh-land-top { position: relative; display: inline-block; }
.srh-land-badge { position: absolute; bottom: -4px; inset-inline-end: -6px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--card); border: 2px solid var(--divider); font-size: 22px; }
.srh-land h1 { margin: 12px 0 2px; font-size: 24px; font-weight: 900; }
.srh-compose { border-color: color-mix(in srgb, var(--sr-a) 35%, var(--divider)); }
.srh-ta { width: 100%; min-height: 130px; resize: vertical; font-size: 16px; line-height: 1.6; box-sizing: border-box; }
.srh-compose-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.srh-safe { color: var(--success); font-weight: 700; font-size: 13px; }
.srh-bubble { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; padding: 10px 12px; border-radius: 14px; background: var(--sr-soft); font-weight: 700; }
.srh-info h3 { margin: 0 0 8px; font-size: 16px; }
.srh-info p { margin: 0 0 8px; line-height: 1.7; color: var(--text-2); }
.srh-howto { margin: 0; padding-inline-start: 20px; line-height: 1.9; }
.srh-done { text-align: center; }
.srh-confetti { font-size: 54px; }
.srh-done h1 { margin: 4px 0; }
.srh-done p { color: var(--text-2); line-height: 1.6; }
.srh-next { text-align: center; background: var(--sr-soft); }
.srh-next p { margin: 6px 0; color: var(--text-2); }
.srh-next small { display: block; margin-top: 8px; }
.srh-pbtn:empty { display: none; }
@media (max-width: 420px) { .srh-steps { grid-template-columns: 1fr; } .srh-step { flex-direction: row; text-align: start; gap: 10px; } .srh-step-n { position: static; } }
.wkn-pitch { padding: 16px; border-radius: 20px; margin-bottom: 12px; border: 2px solid color-mix(in srgb, var(--wkn-a, #8B5CF6) 45%, var(--divider));
  background: linear-gradient(135deg, color-mix(in srgb, #8B5CF6 12%, var(--card)), color-mix(in srgb, #EC4899 10%, var(--card))); }
.wkn-pitch-head { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.wkn-pitch-head > span { font-size: 30px; }
.wkn-pitch-head b { display: block; font-size: 17px; font-weight: 900; }
.wkn-pitch-head small { color: var(--text-2); }
.wkn-pitch ul { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.wkn-pitch li { display: flex; gap: 10px; align-items: center; font-weight: 700; font-size: 14px; }
.wkn-pitch li span { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--card); }
.wkn-note { padding: 10px 12px; border-radius: 14px; margin-bottom: 12px; font-size: 13.5px; background: color-mix(in srgb, #F59E0B 12%, var(--card)); border: 1px solid color-mix(in srgb, #F59E0B 35%, var(--divider)); }
.wkn-note a { font-weight: 800; }
/* «من يعرفني؟»: المؤقّت والنقاط */
.wkn-clock { display: flex; align-items: center; gap: 10px; margin: -4px 0 12px; }
.wkn-clock-bar { flex: 1; height: 10px; border-radius: 99px; background: var(--field); overflow: hidden; }
.wkn-clock-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #8B5CF6, #EC4899); transition: width .1s linear; }
.wkn-clock b { min-width: 34px; text-align: center; font-size: 20px; font-weight: 900; }
.wkn-clock.low .wkn-clock-bar i { background: #dc2626; }
.wkn-clock.low b { color: #dc2626; animation: wkn-pulse .5s ease-in-out infinite alternate; }
@keyframes wkn-pulse { to { transform: scale(1.18); } }
.wkn-points { font-size: 20px; font-weight: 900; color: #7C3AED; margin: 4px 0; }
.wkn-points small { font-size: 12px; font-weight: 600; color: var(--text-2); }
/* «وكّل في سنة» */
.wrp-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.wrp-bars { display: flex; gap: 4px; margin: 0 auto 10px; max-width: 380px; }
.wrp-bars i { flex: 1; height: 4px; border-radius: 99px; background: var(--divider); }
.wrp-bars i.done, .wrp-bars i.on { background: linear-gradient(90deg, #8B5CF6, #EC4899); }
.wrp-stage { display: flex; justify-content: center; }
.wrp-canvas { width: 100%; max-width: 380px; aspect-ratio: 9 / 16; height: auto; border-radius: 22px; box-shadow: 0 14px 40px rgba(0,0,0,.22); cursor: pointer; user-select: none; }
.wrp-nav { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 14px 0 24px; }
.wrp-empty { text-align: center; padding: 50px 16px; }
.wrp-empty-ic { font-size: 72px; }
.wrp-empty p { color: var(--text-2); max-width: 420px; margin: 8px auto 18px; }
/* «روابطي ومواقعي» */
.lk-claim, .lk-hold { padding: 14px; border-radius: 16px; }
.lk-claim.ok { border: 1px solid color-mix(in srgb, #16a34a 40%, var(--divider)); }
.lk-claim.bad { opacity: .7; }
.lk-method { background: var(--field); border-radius: 12px; padding: 10px 12px; margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.lk-copy code { background: var(--card); border-radius: 8px; padding: 6px 8px; font-size: 12.5px; overflow-wrap: anywhere; }
.lk-dom { font-weight: 800; }
.lk-text { margin: 8px 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-2); }
.lk .chip.warn { background: color-mix(in srgb, #F59E0B 18%, var(--card)); }

/* إعلان أعلى الصفحات */
.page-ad { margin-bottom: 10px; }

/* مدير الإعلانات: معاينة قبل الدفع في كل مكان عرض */
.adp { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.adp-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adp-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 800; background: color-mix(in srgb, #F59E0B 20%, var(--card)); color: #92400E; }
.adp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.adp-chips .chip { border: 1px solid var(--divider); background: var(--card); border-radius: 99px; padding: 4px 10px; font-size: 12.5px; cursor: pointer; }
.adp-chips .chip.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.adp-stage, .adp-item { pointer-events: auto; }
.adp .post.ad-post { margin: 0; }
.adp-side { max-width: 300px; }
.adp-phone { width: 220px; height: 390px; margin: 0 auto; border-radius: 22px; overflow: hidden; border: 6px solid #111; background: #000; }
.adp-phone .short { height: 100%; padding: 0; }
.adp-phone .short-stage { width: 100%; height: 100%; border-radius: 0; }
.adp-phone .short-stage img, .adp-phone .short-stage video { width: 100%; height: 100%; object-fit: cover; }
.adp-stories { display: flex; gap: 8px; overflow: hidden; }
.adp-ghost { opacity: .35; cursor: default; }
.adp-top { border-radius: 12px; }
.adp-all { gap: 14px; }
.adp-item { display: flex; flex-direction: column; gap: 6px; border: 1px dashed var(--divider); border-radius: 14px; padding: 10px; }
.adp-label { font-size: 13px; }
/* «من يعرفني؟»: تحدّي الردّ */
.wkn-challenge { display: flex; gap: 10px; align-items: center; padding: 10px 14px; margin-bottom: 12px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, #F97316 16%, var(--card)), color-mix(in srgb, #EC4899 14%, var(--card))); border: 1px solid color-mix(in srgb, #F97316 35%, var(--divider)); }
.wkn-challenge-ic { font-size: 26px; }
.wkn-challenge b { display: block; }
.wkn-challenge small { color: var(--text-2); }
.wkn-challenge-cta { background: linear-gradient(135deg, color-mix(in srgb, #F97316 12%, var(--card)), color-mix(in srgb, #8B5CF6 12%, var(--card))); }
.wkn-challengers { margin-bottom: 12px; }

/* «مصاريفي» v2 — تصميم حديث (رموز الألوان المعتمدة فقط) */
.xp .xp-muted { color: var(--text-2); }
.xp .in { color: #16a34a; } .xp .out { color: #dc2626; }
.xp-hero { padding: 18px; border-radius: 20px; margin: 10px 0; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 16%, var(--card)), var(--card)); }
.xp-hero-l { color: var(--text-2); }
.xp-hero-v { font-size: 32px; font-weight: 900; margin: 2px 0 10px; }
.xp-hero-v.neg { color: #dc2626; }
.xp-hero-row { display: flex; gap: 12px; }
.xp-hero-row > div { flex: 1; background: var(--field); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.xp-hero-row b { font-size: 17px; }
.xp-bar { height: 8px; border-radius: 99px; background: var(--field); overflow: hidden; margin: 10px 0 6px; }
.xp-bar i { display: block; height: 100%; border-radius: 99px; background: #16a34a; transition: width .3s; }
.xp-bar i.warn { background: #f59e0b; } .xp-bar i.over { background: #dc2626; } .xp-bar i.fixed { background: var(--primary); }
.xp-bar.two { background: color-mix(in srgb, #f59e0b 45%, var(--field)); }
.xp-quick { display: flex; gap: 8px; margin: 4px 0 12px; }
.xp-quick .btn { flex: 1; padding: 12px; font-size: 15px; }
.xp-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.xp-day { display: flex; justify-content: space-between; align-items: center; margin: 14px 4px 6px; }
.xp-list { padding: 4px 0; }
.xp-entry { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--divider); }
.xp-entry:last-child { border-bottom: 0; }
.xp-ico { width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--field); display: grid; place-items: center; font-size: 20px; }
.xp-main { flex: 1; min-width: 0; text-align: start; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.xp-row { display: flex; align-items: center; gap: 10px; }
.xp-budget, .xp-fixed { margin-bottom: 10px; }
.xp-fixed.off { opacity: .6; }
.xp-pct { font-weight: 800; font-size: 13px; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, #16a34a 14%, var(--card)); color: #16a34a; }
.xp-pct.warn { background: color-mix(in srgb, #f59e0b 16%, var(--card)); color: #b45309; }
.xp-pct.over { background: color-mix(in srgb, #dc2626 14%, var(--card)); color: #dc2626; }
.xp-actions { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; border-top: 1px solid var(--divider); padding-top: 6px; }
.xp-actions .danger, .xp-form .danger { color: #dc2626; }
.xp-empty { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.xp-empty > span { font-size: 28px; }
.xp-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; }
.xp-stat { background: var(--field); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.xp-stat b { font-size: 17px; }
.xp-more { margin: 10px 0; }
.xp-form .cat-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.xp-amount-box { display: flex; align-items: baseline; justify-content: center; gap: 8px; background: var(--field); border-radius: 18px; padding: 14px; }
.xp-amount { border: 0; background: transparent; font-size: 36px; font-weight: 900; text-align: center; width: 100%; max-width: 280px; color: inherit; outline: none; }
.xp-sym { font-size: 18px; font-weight: 800; color: var(--text-2); }
.xp-seg { display: flex; background: var(--field); border-radius: 14px; padding: 4px; gap: 4px; }
.xp-seg-b { flex: 1; border: 0; background: transparent; padding: 9px; border-radius: 10px; font-weight: 800; color: var(--text-2); cursor: pointer; }
.xp-seg-b.on { background: var(--card); color: inherit; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.xp-seg-b.on.out { color: #dc2626; } .xp-seg-b.on.in { color: #16a34a; }
.xp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.xp-two label { display: flex; flex-direction: column; gap: 4px; }
.xp-preview { background: color-mix(in srgb, var(--primary) 10%, var(--card)); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; line-height: 1.7; }
.xp-form-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── css-parts/prices.css ── */
/* «أسعار اليوم» — رموز التصميم المسموحة فقط: --field --divider --text-2 --card --primary --text */
.prc { --pu: #0E9F6E; --pd: #DC2626; --pg: #0369A1; }
.prc-hero { display: flex; align-items: center; gap: 14px; padding: 20px 18px; margin: 4px 0 12px; border-radius: 22px; color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, #38bdf8 0%, var(--pg) 50%, #0c4a6e 100%); }
.prc-hero h1 { margin: 0; font-size: 23px; font-weight: 900; }
.prc-hero p { margin: 4px 0 0; font-size: 13.5px; opacity: .92; line-height: 1.6; }
.prc-hero-ico { font-size: 40px; flex: none; }
.prc .grow { flex: 1; min-width: 0; }

.prc-tabs { display: flex; gap: 6px; margin-bottom: 10px; overflow-x: auto; }
.prc-tab { flex: 1; white-space: nowrap; padding: 10px 12px; border: 0; border-radius: 14px; background: var(--field); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.prc-tab.on { background: var(--primary); color: #fff; }

.prc-bar { margin: 8px 0; }
.prc-region { width: 100%; }
.prc-cats, .prc-seg { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 4px; }
.prc-chip { padding: 7px 12px; border: 1px solid var(--divider); border-radius: 999px; background: var(--card); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.prc-chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }

.prc-group { margin: 18px 4px 8px; font-size: 16px; }
.prc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.prc-card { background: var(--card); border: 1px solid var(--divider); border-radius: 18px; overflow: hidden; }
.prc-card-main { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; color: var(--text); text-decoration: none; }
.prc-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px 10px; }
.prc-emoji { font-size: 30px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--field); flex: none; }
.prc-emoji.s { font-size: 22px; width: 36px; height: 36px; border-radius: 12px; }
.prc-emoji.xl { font-size: 48px; width: 76px; height: 76px; border-radius: 22px; margin: 0 auto 8px; }
.prc-name { font-weight: 800; color: var(--text); text-decoration: none; }
.prc-unit { color: var(--text-2); }
.prc-val { text-align: end; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.prc-val b { font-size: 17px; unicode-bidi: isolate; }

.prc-chg { font-size: 12px; font-weight: 800; padding: 1px 7px; border-radius: 999px; unicode-bidi: isolate; }
.prc-chg.up { color: var(--pd); background: rgba(220, 38, 38, .1); }
.prc-chg.down { color: var(--pu); background: rgba(14, 159, 110, .12); }
.prc-chg.flat { color: var(--text-2); background: var(--field); }
.prc-src { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--field); color: var(--text-2); }
.prc-src.region { color: var(--pg); background: rgba(3, 105, 161, .1); }
.prc-src.official { color: var(--pu); background: rgba(14, 159, 110, .12); font-weight: 700; }
.prc-mini { border: 0; background: var(--field); color: var(--text); border-radius: 10px; padding: 5px 10px; font: inherit; font-size: 12.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.prc-mini:hover { background: var(--divider); }
.prc-hint { color: var(--text-2); line-height: 1.6; margin: 12px 4px; }

.prc-detail { text-align: center; background: var(--card); border: 1px solid var(--divider); border-radius: 22px; padding: 18px 16px; margin: 10px 0; }
.prc-detail h1 { margin: 0; font-size: 22px; }
.prc-big { font-size: 34px; font-weight: 900; margin: 10px 0 4px; color: var(--text); unicode-bidi: isolate; }
.prc-badges { display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; }
.prc-official { margin: 10px auto 0; padding: 8px 12px; border-radius: 12px; background: rgba(14, 159, 110, .1); color: var(--pu); font-size: 13.5px; max-width: 460px; }
.prc-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }

.prc-chart-box { background: var(--card); border: 1px solid var(--divider); border-radius: 18px; padding: 12px; margin: 10px 0; }
.prc-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.prc-chart-wrap { position: relative; }
.prc-chart { width: 100%; height: auto; display: block; touch-action: pan-y; }
.prc-chart .grid { stroke: var(--divider); stroke-width: 1; }
.prc-chart .line { fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.prc-chart .area { fill: var(--primary); opacity: .1; }
.prc-chart .dot { fill: var(--primary); stroke: var(--card); stroke-width: 2; }
.prc-chart .lab { fill: var(--text-2); font-size: 12px; }
.prc-chart-empty { padding: 28px 0; text-align: center; color: var(--text-2); }
.prc-tip { position: absolute; top: 0; transform: translateX(-50%); background: var(--text); color: var(--card); font-size: 12px; padding: 3px 8px; border-radius: 8px; white-space: nowrap; pointer-events: none; }
.prc-minmax { text-align: center; margin-top: 4px; }

.prc-section { margin: 14px 0; }
.prc-section h3 { margin: 0 4px 8px; font-size: 16px; }
.prc-list { background: var(--card); border: 1px solid var(--divider); border-radius: 18px; overflow: hidden; }
.prc-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--divider); color: var(--text); text-decoration: none; }
.prc-row:last-child { border-bottom: 0; }
.prc-row.me { background: var(--field); }
.prc-row.off { opacity: .55; }
.prc-row b { unicode-bidi: isolate; }
.prc-st { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--field); color: var(--text-2); }
.prc-st.ok { color: var(--pu); }
.prc-st.rejected { color: var(--pd); }

.prc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.prc-stats > div { background: var(--card); border: 1px solid var(--divider); border-radius: 16px; padding: 12px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.prc-stats b { font-size: 20px; }
.prc-stats span { font-size: 12px; color: var(--text-2); }

.prc-form { display: flex; flex-direction: column; gap: 6px; }
.prc-form label { font-weight: 700; font-size: 13.5px; margin-top: 4px; }

@media (max-width: 520px) {
  .prc-grid { grid-template-columns: 1fr; }
  .prc-big { font-size: 28px; }
}

/* ── css-parts/blood.css ── */
/* «تبرّع بالدم» — رموز التصميم المسموحة فقط: --field --divider --text-2 --card --primary --text */
.bld { --bl: #DC2626; --bl2: #991B1B; }
.bld-hero { display: flex; align-items: center; gap: 14px; padding: 20px 18px; margin: 4px 0 14px; border-radius: 22px; color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, #f87171 0%, var(--bl) 45%, var(--bl2) 100%); }
.bld-hero h1 { margin: 0; font-size: 23px; font-weight: 900; }
.bld-hero p { margin: 4px 0 0; font-size: 14px; opacity: .92; }
.bld-hero-art { position: relative; width: 64px; height: 64px; flex: none; }
.bld-hero-art span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 38px; background: rgba(255,255,255,.18); border-radius: 20px; }
.bld-hero-art i { position: absolute; bottom: -6px; inset-inline-start: -6px; font-style: normal; font-size: 20px; }

.bld-tabs { display: flex; gap: 6px; margin-bottom: 12px; background: var(--field); padding: 4px; border-radius: 14px; }
.bld-tab { flex: 1; text-align: center; padding: 9px 6px; border-radius: 10px; font-weight: 700; color: var(--text-2); text-decoration: none; }
.bld-tab.on { background: var(--card); color: var(--bl); }

.bld-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: center; }
.bld-filters .input { flex: 1 1 140px; width: auto; }
.bld-check { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; color: var(--text); }

.bld-list, .bld-sec { display: flex; flex-direction: column; gap: 10px; }
.bld-sec { margin-top: 16px; }
.bld-sec h3 { margin: 0; font-size: 16px; }
.bld-card { display: flex; gap: 12px; padding: 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--divider);
  border-inline-start: 4px solid var(--divider); color: var(--text); text-decoration: none; }
.bld-card.u-now, .bld-detail.u-now { border-inline-start-color: var(--bl); }
.bld-card.u-day, .bld-detail.u-day { border-inline-start-color: #F59E0B; }
.bld-card.u-planned, .bld-detail.u-planned { border-inline-start-color: var(--primary); }
.bld-card-type { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--text-2); }
.bld-card-top { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.bld-hosp { font-weight: 700; margin: 4px 0 2px; }
.bld-chip { display: inline-grid; place-items: center; min-width: 34px; padding: 2px 8px; border-radius: 10px; background: color-mix(in srgb, var(--bl) 12%, transparent); color: var(--bl); font-weight: 900; }
.bld-chip.big { min-width: 52px; height: 52px; font-size: 19px; border-radius: 16px; }
.bld-chip.huge { min-width: 72px; height: 72px; font-size: 26px; border-radius: 20px; }
.bld-urg { font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 99px; background: var(--field); color: var(--text-2); }
.bld-urg.now { background: var(--bl); color: #fff; }
.bld-urg.day { background: #F59E0B; color: #fff; }
.bld-can { font-size: 12px; font-weight: 700; color: #059669; }

.bld-guest, .bld-empty { padding: 14px; border-radius: 16px; background: var(--field); color: var(--text-2); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.bld-empty { align-items: center; text-align: center; }
.bld-empty div { font-size: 34px; }

.bld-form { display: flex; flex-direction: column; gap: 14px; padding: 14px; }
.bld-field { display: flex; flex-direction: column; gap: 6px; }
.bld-field > span { font-weight: 700; font-size: 14px; }
.bld-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .bld-row2 { grid-template-columns: 1fr; } }
.bld-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bld-type { padding: 12px 0; border-radius: 12px; border: 1.5px solid var(--divider); background: var(--card); color: var(--text); font-weight: 900; font-size: 17px; cursor: pointer; }
.bld-type.on { border-color: var(--bl); background: var(--bl); color: #fff; }
.bld-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.bld-seg-b { flex: 1; padding: 9px; border-radius: 12px; border: 1.5px solid var(--divider); background: var(--card); color: var(--text); font-weight: 700; cursor: pointer; }
.bld-seg-b.on { border-color: var(--bl); color: var(--bl); background: color-mix(in srgb, var(--bl) 10%, transparent); }
.bld-submit, .bld-give { width: 100%; justify-content: center; }
.bld .btn-primary { background: var(--bl); border-color: var(--bl); }
.bld-toggle { padding: 11px; border-radius: 12px; border: 1.5px dashed var(--divider); background: var(--field); color: var(--text-2); font-weight: 700; cursor: pointer; }
.bld-toggle.on { border-style: solid; border-color: #059669; color: #059669; }
.bld-elig { padding: 9px 12px; border-radius: 12px; font-weight: 700; background: var(--field); }
.bld-elig.ok { color: #059669; }
.bld-elig.wait { color: #B45309; }
.bld-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }

.bld-badge { padding: 14px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.bld-badge-main { display: flex; gap: 12px; align-items: center; }
.bld-badge-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 28px; background: var(--field); }
.bld-lives { color: var(--bl); font-weight: 800; margin-top: 2px; }
.bld-steps { display: flex; gap: 6px; }
.bld-step { flex: 1; text-align: center; padding: 4px; border-radius: 8px; background: var(--field); color: var(--text-2); font-weight: 800; font-size: 13px; }
.bld-step.on { background: var(--bl); color: #fff; }
.bld-hist, .bld-resp { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--divider); }
.bld-done { color: #059669; font-weight: 800; font-size: 13px; }

.bld-detail { padding: 16px; border-inline-start: 4px solid var(--divider); margin-top: 8px; }
.bld-detail-top { display: flex; gap: 14px; align-items: center; }
.bld-detail h2 { margin: 6px 0 2px; font-size: 19px; }
.bld-note { white-space: pre-wrap; background: var(--field); padding: 10px 12px; border-radius: 12px; margin: 12px 0 0; }
.bld-donors { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; color: var(--text-2); }
.bld-closed { margin-top: 12px; padding: 10px; border-radius: 12px; background: var(--field); font-weight: 700; color: var(--text-2); }
.bld-phone { padding: 10px 14px; border-radius: 12px; background: var(--field); font-weight: 800; }
.bld-phone.ok { background: color-mix(in srgb, #059669 12%, transparent); color: #047857; }
.bld-phone a { color: inherit; }
.bld-report { margin-inline-start: auto; }

/* ── css-parts/worship.css ── */
/* «رمضان والعبادات» — رموز التصميم المسموحة فقط: --field --divider --text-2 --card --primary --text */
.wsp { --ws: #0F766E; --ws2: #134E4A; padding-bottom: 32px; }
.wsp-hero { display: flex; align-items: center; gap: 14px; padding: 20px 18px; margin: 4px 0 14px; border-radius: 22px; color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, #2dd4bf 0%, var(--ws) 45%, var(--ws2) 100%); }
.wsp-hero h1 { margin: 0; font-size: 23px; font-weight: 900; }
.wsp-hero p { margin: 4px 0 0; font-size: 14px; opacity: .92; }
.wsp-hero-e { display: grid; place-items: center; width: 62px; height: 62px; flex: none; font-size: 36px; background: rgba(255,255,255,.18); border-radius: 20px; }

.wsp-tabs { display: flex; gap: 4px; margin-bottom: 12px; background: var(--field); padding: 4px; border-radius: 14px; overflow-x: auto; }
.wsp-tab { flex: 1; white-space: nowrap; text-align: center; padding: 9px 8px; border-radius: 10px; font-weight: 700; color: var(--text-2); text-decoration: none; }
.wsp-tab.on { background: var(--card); color: var(--ws); }

.wsp-card { background: var(--card); border: 1px solid var(--divider); border-radius: 18px; padding: 16px; margin-bottom: 12px; color: var(--text); }
.wsp-card h3 { margin: 0 0 6px; font-size: 17px; }
.wsp-empty, .wsp-countdown, .wsp-khead { text-align: center; }
.wsp-big-e { font-size: 44px; line-height: 1.2; }
.wsp-muted { color: var(--text-2); font-size: 14px; margin: 6px 0; }
.wsp-center { text-align: center; }
.wsp-sub { margin: 18px 0 8px; font-size: 16px; }
.wsp-lbl { font-size: 13px; font-weight: 700; color: var(--text-2); }
.wsp-wide { width: 100%; margin-top: 10px; }

.wsp-place { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.wsp-place-btn { flex: 1; text-align: start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--divider); background: var(--field); color: var(--text); font: inherit; cursor: pointer; }
.wsp-regions { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow-y: auto; }
.wsp-region { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 0; background: var(--field); color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.wsp-num { color: var(--text-2); font-size: 12px; min-width: 22px; }
.wsp-region.on { outline: 2px solid var(--primary); background: var(--primary-soft); }
.wsp-nogeo { font-size: 11px; font-weight: 700; color: var(--text-2); border: 1px solid var(--divider); border-radius: 8px; padding: 1px 6px; }
.wsp-place-hint { display: block; color: var(--text-2); font-size: 12px; }
.wsp-place-hint:empty { display: none; }

/* الصلاة القادمة — بارزة */
.wsp-next { text-align: center; color: #fff; border-radius: 22px; padding: 20px 16px; margin-bottom: 12px;
  background: linear-gradient(135deg, var(--ws), var(--ws2)); }
.wsp-next-l { font-size: 14px; opacity: .9; }
.wsp-next-n { font-size: 24px; font-weight: 900; margin: 4px 0; }
.wsp-count { font-size: 42px; font-weight: 900; letter-spacing: 1px; direction: ltr; font-variant-numeric: tabular-nums; }
.wsp-countdown .wsp-count { font-size: 28px; direction: inherit; color: var(--ws); }
.wsp-next-d { font-size: 13px; opacity: .9; margin-top: 4px; }

.wsp-times { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.wsp-time { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border-radius: 14px; background: var(--card); border: 1px solid var(--divider); color: var(--text); }
.wsp-time span { font-size: 13px; color: var(--text-2); }
.wsp-time b { font-size: 20px; font-variant-numeric: tabular-nums; }
.wsp-time.dim b { color: var(--text-2); }
.wsp-time.on { border-color: var(--ws); background: color-mix(in srgb, var(--ws) 10%, var(--card)); }
.wsp-time.on span, .wsp-time.on b { color: var(--ws); }
.wsp-meta { font-size: 13px; color: var(--text-2); margin: 4px 0 8px; }
.wsp-method { width: 100%; }

.wsp-table-wrap { overflow-x: auto; border: 1px solid var(--divider); border-radius: 14px; background: var(--card); margin-top: 10px; }
.wsp-table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--text); }
.wsp-table th { position: sticky; top: 0; background: var(--field); color: var(--text-2); font-weight: 700; padding: 8px 6px; white-space: nowrap; }
.wsp-table td { padding: 7px 6px; text-align: center; border-top: 1px solid var(--divider); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wsp-table td small { color: var(--text-2); }
.wsp-table td.em { font-weight: 900; color: var(--ws); }
.wsp-table tr.on td { background: color-mix(in srgb, var(--ws) 12%, transparent); font-weight: 700; }

/* الختمات */
.wsp-intro p { color: var(--text-2); margin: 0 0 12px; }
.wsp-list { display: flex; flex-direction: column; gap: 8px; }
.wsp-kitem { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--divider); color: var(--text); text-decoration: none; }
.wsp-kitem small { display: block; color: var(--text-2); margin: 2px 0 6px; }
.wsp-pct { font-weight: 900; color: var(--ws); }
.wsp-bar { height: 8px; border-radius: 8px; background: var(--field); overflow: hidden; margin: 8px 0; }
.wsp-bar i { display: block; height: 100%; background: linear-gradient(90deg, #2dd4bf, var(--ws)); border-radius: 8px; transition: width .3s; }
.wsp-khead h1 { margin: 4px 0; font-size: 22px; }
.wsp-stats { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; font-size: 14px; color: var(--text-2); margin: 4px 0 12px; }
.wsp-done { font-weight: 800; color: var(--ws); }
.wsp-seg { display: flex; gap: 4px; background: var(--field); padding: 4px; border-radius: 12px; }
.wsp-seg-b { flex: 1; padding: 8px; border: 0; border-radius: 9px; background: transparent; color: var(--text-2); font: inherit; font-weight: 700; cursor: pointer; }
.wsp-seg-b.on { background: var(--card); color: var(--primary); }

.wsp-parts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.wsp-parts.hizb { grid-template-columns: repeat(8, 1fr); }
.wsp-part { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 54px; padding: 4px 2px;
  border-radius: 12px; border: 1px solid var(--divider); background: var(--card); color: var(--text); font: inherit; cursor: pointer; overflow: hidden; }
.wsp-part b { font-size: 16px; }
.wsp-part small { font-size: 10px; color: var(--text-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsp-part.claimed { background: color-mix(in srgb, #F59E0B 14%, var(--card)); border-color: #F59E0B; }
.wsp-part.done { background: color-mix(in srgb, var(--ws) 18%, var(--card)); border-color: var(--ws); }
.wsp-part.done b::after { content: ' ✓'; color: var(--ws); }
.wsp-part.mine { outline: 2px solid var(--primary); outline-offset: 1px; }
.wsp-members { display: flex; flex-wrap: wrap; gap: 8px; }
.wsp-member { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 20px; background: var(--field); color: var(--text); text-decoration: none; font-size: 13px; }

/* البطاقات */
.wsp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.wsp-cardtpl { aspect-ratio: 9 / 12; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 10px;
  border: 0; border-radius: 18px; color: #fff; font: inherit; text-align: center; cursor: pointer; }
.wsp-cardtpl-e { font-size: 40px; }
.wsp-cardtpl b { font-size: 15px; }

@media (max-width: 420px) {
  .wsp-count { font-size: 36px; }
  .wsp-parts { grid-template-columns: repeat(5, 1fr); }
  .wsp-parts.hizb { grid-template-columns: repeat(6, 1fr); }
}

/* ── css-parts/lost.css ── */
/* ═══ «المفقودات» — lost.js ═══ (رموز الألوان فقط: --card --field --divider --text --text-2 --primary) */
.lost { position: relative; padding-bottom: 90px; }
.lost-hero { display: flex; align-items: center; gap: 14px; padding: 18px; margin: 4px 0 12px; border-radius: 22px; background: var(--card); border: 1px solid var(--divider); }
.lost-hero-art { width: 64px; height: 64px; flex: none; display: grid; place-items: center; font-size: 36px; border-radius: 20px; background: color-mix(in srgb, var(--primary) 14%, var(--field)); }
.lost-hero h1 { margin: 0; font-size: 22px; font-weight: 900; color: var(--text); }
.lost-hero p { margin: 4px 0 0; font-size: 14px; color: var(--text-2); }
.lost-returned { display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: 999px; font-weight: 800; font-size: 13px; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }

.lost-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
.lost-tab { flex: 1; padding: 10px; border-radius: 14px; border: 1px solid var(--divider); background: var(--field); color: var(--text-2); font-weight: 800; cursor: pointer; }
.lost-tab.on { background: var(--primary); border-color: var(--primary); color: #fff; }

.lost-filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.lost-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.lost-chip { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--divider); background: var(--field); color: var(--text); font-weight: 700; cursor: pointer; }
.lost-chip.on { background: color-mix(in srgb, var(--primary) 16%, var(--field)); border-color: var(--primary); color: var(--primary); }
.lost-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.lost-row > * { flex: 1 1 140px; min-width: 0; }
.lost-input { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--divider); background: var(--field); color: var(--text); font: inherit; box-sizing: border-box; }
textarea.lost-input { resize: vertical; }

.lost-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.lost-card { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--card); border: 1px solid var(--divider); color: var(--text); text-decoration: none; }
.lost-card-media { position: relative; aspect-ratio: 4 / 3; background: var(--field); display: grid; place-items: center; }
.lost-card-media img { width: 100%; height: 100%; object-fit: cover; }
.lost-card-emoji { font-size: 44px; }
.lost-card-body { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px 10px; }
.lost-card-body b { font-size: 14px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lost-card-body small { color: var(--text-2); font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lost-badge { position: absolute; top: 8px; inset-inline-start: 8px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #fff; background: #dc2626; }
.lost-badge.found { background: #16a34a; }
.lost-badge.done { top: auto; bottom: 8px; background: var(--primary); }
.lost-tags .lost-badge { position: static; }
.lost-reward { color: #b45309; font-weight: 800; font-size: 13px; }
.lost-match-pill, .lost-expired { align-self: flex-start; margin-top: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.lost-expired { background: var(--field); color: var(--text-2); }
.lost-empty { grid-column: 1 / -1; text-align: center; padding: 30px 10px; color: var(--text-2); }
.lost-empty div { font-size: 40px; }

.lost-fab { position: fixed; bottom: calc(76px + env(safe-area-inset-bottom)); inset-inline-end: 18px; z-index: 20; display: flex; align-items: center; gap: 6px; padding: 12px 18px; border: 0; border-radius: 999px; background: var(--primary); color: #fff; font-weight: 900; box-shadow: 0 8px 24px color-mix(in srgb, var(--primary) 40%, transparent); cursor: pointer; }
.lost-fab .ico { fill: currentColor; }

.lost-form { display: flex; flex-direction: column; gap: 10px; }
.lost-field { display: flex; flex-direction: column; gap: 4px; }
.lost-field > span { font-weight: 800; font-size: 13px; color: var(--text-2); }
.lost-type { display: flex; gap: 8px; }
.lost-type-btn { flex: 1; padding: 12px; border-radius: 14px; border: 2px solid var(--divider); background: var(--field); color: var(--text); font-weight: 900; cursor: pointer; }
.lost-type-btn.lost.on { border-color: #dc2626; background: color-mix(in srgb, #dc2626 10%, var(--field)); }
.lost-type-btn.found.on { border-color: #16a34a; background: color-mix(in srgb, #16a34a 10%, var(--field)); }
.lost-warn { padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.5; background: color-mix(in srgb, #f59e0b 14%, var(--field)); border: 1px solid color-mix(in srgb, #f59e0b 40%, var(--divider)); color: var(--text); }
.lost-done { padding: 10px 12px; border-radius: 12px; font-weight: 800; background: color-mix(in srgb, #16a34a 14%, var(--field)); color: var(--text); }
.lost-cur { flex: 0 0 auto !important; align-self: center; font-weight: 800; color: var(--text-2); }
.lost-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.lost-thumb { position: relative; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; border: 1px solid var(--divider); background: var(--field); }
.lost-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lost-thumb button { position: absolute; top: 2px; inset-inline-end: 2px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; }
.lost-thumb.add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--text-2); cursor: pointer; border-style: dashed; }
.lost-thumb.add .ico { fill: currentColor; }

.lost-item { margin-top: 6px; border-radius: 20px; overflow: hidden; background: var(--card); border: 1px solid var(--divider); }
.lost-gallery { display: flex; gap: 4px; overflow-x: auto; scroll-snap-type: x mandatory; background: var(--field); }
.lost-gallery a { flex: 0 0 100%; scroll-snap-align: start; }
.lost-gallery img { width: 100%; max-height: 420px; object-fit: contain; display: block; }
.lost-gallery-empty { width: 100%; padding: 40px 0; text-align: center; font-size: 64px; }
.lost-item-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.lost-item-body h1 { margin: 0; font-size: 21px; font-weight: 900; color: var(--text); }
.lost-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.lost-tag { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--field); color: var(--text-2); }
.lost-desc { margin: 0; white-space: pre-wrap; line-height: 1.6; color: var(--text); }
.lost-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; color: var(--text-2); font-size: 14px; }
.lost-owner { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--divider); }
.lost-owner small { display: block; color: var(--text-2); }
.lost-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.lost-actions .danger { color: #dc2626; }
.lost-sub { margin: 18px 0 8px; font-size: 16px; color: var(--text); }
@media (max-width: 420px) { .lost-grid { grid-template-columns: 1fr 1fr; } .lost-fab span { display: none; } }

/* ── css-parts/volunteer.css ── */
/* ═══ «مبادرات وتطوّع» ═══ */
.vol { --vol-a: #059669; padding-bottom: 32px; }
.vol-hero { display: flex; gap: 14px; align-items: center; padding: 18px; border-radius: 22px; margin: 8px 0 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--vol-a) 18%, var(--card)), var(--card)); border: 1px solid var(--divider); }
.vol-hero-e { font-size: 44px; }
.vol-hero h1 { margin: 0; font-size: 22px; font-weight: 900; color: var(--text); }
.vol-hero p { margin: 4px 0 0; color: var(--text-2); font-size: 14px; }
.vol-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.vol-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.vol-tabs .chip { flex: none; }
.vol-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 12px; }
.vol-list { display: grid; gap: 12px; }
.vol-more { width: 100%; margin-top: 12px; }
.vol-empty { text-align: center; padding: 40px 16px; color: var(--text-2); font-size: 40px; }
.vol-empty p { font-size: 15px; margin: 8px 0 0; }

.vol-card { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--card); border: 1px solid var(--divider); color: var(--text); text-decoration: none; }
.vol-card.featured { border-color: color-mix(in srgb, #F59E0B 60%, var(--divider)); box-shadow: 0 0 0 2px color-mix(in srgb, #F59E0B 25%, transparent); }
.vol-cover { position: relative; height: 140px; background: color-mix(in srgb, var(--vol-a) 14%, var(--field)) center / cover no-repeat; display: grid; place-items: center; font-size: 52px; }
.vol-cover.big { height: 220px; border-radius: 20px; margin: 8px 0 12px; }
.vol-feat { position: absolute; top: 10px; inset-inline-start: 10px; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 99px; background: #F59E0B; color: #fff; }
.vol-card-body { padding: 12px 14px; display: grid; gap: 6px; }
.vol-card-top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.vol-cat { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 99px; background: color-mix(in srgb, var(--vol-a) 14%, var(--field)); color: var(--vol-a); }
.vol-pill { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 99px; background: var(--field); color: var(--text-2); }
.vol-pill.ok { background: color-mix(in srgb, #16a34a 16%, var(--field)); color: #16a34a; }
.vol-pill.warn { background: color-mix(in srgb, #F59E0B 18%, var(--field)); color: #B45309; }
.vol-pill.bad { background: color-mix(in srgb, #dc2626 14%, var(--field)); color: #dc2626; }
.vol-title { font-size: 16px; font-weight: 900; line-height: 1.4; }
.vol-meta { font-size: 13px; color: var(--text-2); }
.vol-card-foot { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-2); }
.vol-progress { height: 8px; border-radius: 99px; background: var(--field); overflow: hidden; margin: 4px 0; }
.vol-progress.s { height: 6px; }
.vol-progress i { display: block; height: 100%; border-radius: inherit; background: var(--vol-a); transition: width .3s; }

.vol-h1 { font-size: 22px; font-weight: 900; margin: 10px 0; color: var(--text); }
.vol-org { display: flex; gap: 10px; align-items: center; color: var(--text); text-decoration: none; margin-bottom: 12px; }
.vol-org small { display: block; color: var(--text-2); font-size: 12px; }
.vol-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.vol-fact { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 14px; background: var(--field); }
.vol-fact > span { font-size: 22px; }
.vol-fact small { display: block; color: var(--text-2); font-size: 12px; }
.vol-fact b { font-size: 13px; color: var(--text); }
.vol-join { margin: 12px 0; display: grid; gap: 8px; }
.vol-join.on { padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--vol-a) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--vol-a) 35%, var(--divider)); }
.vol-cta { width: 100%; padding: 14px; font-size: 16px; font-weight: 900; margin: 12px 0; }
.vol-note { padding: 10px 14px; border-radius: 14px; background: var(--field); color: var(--text-2); font-size: 14px; margin: 10px 0; }
.vol-body { white-space: pre-wrap; line-height: 1.8; color: var(--text); margin: 10px 0; }
.vol-section { margin: 18px 0; padding: 14px; border-radius: 18px; background: var(--card); border: 1px solid var(--divider); }
.vol-section h3 { margin: 0 0 10px; font-size: 16px; font-weight: 900; color: var(--text); }
.vol-hint { margin: 0 0 10px; color: var(--text-2); font-size: 13px; }
.vol-need { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--divider); }
.vol-need:first-of-type { border-top: 0; }
.vol-need small { display: block; color: var(--text-2); font-size: 12px; }
.vol-compose { display: grid; gap: 8px; margin-bottom: 12px; }
.vol-update { padding: 10px 0; border-top: 1px solid var(--divider); display: grid; gap: 6px; }
.vol-update small { color: var(--text-2); font-size: 12px; }
.vol-update p { margin: 0; white-space: pre-wrap; color: var(--text); }
.vol-update img { width: 100%; max-height: 420px; object-fit: cover; border-radius: 14px; }
.vol-update .btn { justify-self: end; }
.vol-faces { display: flex; flex-wrap: wrap; gap: 6px; }
.vol-member { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--divider); color: var(--text); text-decoration: none; }
.vol-member small { display: block; color: var(--text-2); font-size: 12px; }
.vol-hrs { width: 76px; flex: none; }
.vol-row-actions { display: flex; gap: 8px; justify-content: space-between; margin-top: 12px; }

.vol-form { display: grid; gap: 12px; }
.vol-field { display: grid; gap: 6px; }
.vol-field > span { font-weight: 800; font-size: 14px; color: var(--text); }
.vol-field small { color: var(--text-2); font-size: 12px; }
.vol-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.vol-badge-card { --vol-b: var(--vol-a); text-align: center; padding: 24px 16px; border-radius: 24px; margin: 10px 0;
  background: linear-gradient(160deg, color-mix(in srgb, var(--vol-b) 22%, var(--card)), var(--card)); border: 1px solid var(--divider);
  display: grid; justify-items: center; gap: 8px; }
.vol-badge-card h2 { margin: 4px 0 0; font-size: 20px; font-weight: 900; color: var(--text); }
.vol-badge { font-weight: 900; color: var(--vol-b); font-size: 16px; }
.vol-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin-top: 8px; }
.vol-stats > div { padding: 10px; border-radius: 14px; background: var(--field); }
.vol-stats b { display: block; font-size: 24px; font-weight: 900; color: var(--text); }
.vol-stats small { color: var(--text-2); font-size: 12px; }
.vol-next { width: 100%; text-align: start; }
.vol-next small { color: var(--text-2); }
.vol-badges-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; }
.vol-badge-mini { text-align: center; padding: 10px 4px; border-radius: 14px; background: var(--field); opacity: .45; filter: grayscale(1); }
.vol-badge-mini.got { opacity: 1; filter: none; border: 1px solid var(--divider); background: var(--card); }
.vol-badge-mini span { font-size: 28px; display: block; }
.vol-badge-mini b { display: block; font-size: 12px; color: var(--text); }
.vol-badge-mini small { color: var(--text-2); font-size: 11px; }

@media (max-width: 520px) {
  .vol-facts, .vol-grid2, .vol-filters { grid-template-columns: 1fr; }
  .vol-cover.big { height: 170px; }
}

/* ── css-parts/adhkar.css ── */
/* «الأذكار والأدعية» — رموز التصميم المسموحة فقط: --field --divider --text-2 --card --primary --text */
.adk { --ad: #0F766E; --ad2: #134E4A; padding-bottom: 40px; }
.adk-hero { display: flex; align-items: center; gap: 14px; padding: 20px 18px; margin: 4px 0 14px; border-radius: 22px; color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, #34d399 0%, var(--ad) 45%, var(--ad2) 100%); }
.adk-hero h1 { margin: 0; font-size: 22px; font-weight: 900; }
.adk-hero p { margin: 4px 0 0; font-size: 14px; opacity: .92; }
.adk-hero-e, .adk-back { display: grid; place-items: center; width: 56px; height: 56px; flex: none; font-size: 32px; background: rgba(255,255,255,.18); border-radius: 18px; color: #fff; text-decoration: none; }
.adk-back { font-size: 38px; font-weight: 300; }
[dir="rtl"] .adk-back { transform: scaleX(-1); }

.adk-quick { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.adk-qbtn { flex: 1 1 auto; text-align: center; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--divider); background: var(--card); color: var(--text); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; }

.adk-stats { display: grid; grid-template-columns: repeat(3, 1fr) 1.2fr; gap: 8px; align-items: stretch; background: var(--card); border: 1px solid var(--divider); border-radius: 18px; padding: 12px; margin-bottom: 12px; }
.adk-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.adk-stat b { font-size: 20px; color: var(--text); }
.adk-stat small { color: var(--text-2); font-size: 12px; }
.adk-week { display: flex; align-items: flex-end; gap: 3px; height: 44px; padding-top: 4px; }
.adk-week i { flex: 1; background: var(--ad); border-radius: 3px 3px 0 0; opacity: .8; }

.adk-daily { color: #fff; border-radius: 20px; padding: 16px; margin-bottom: 14px; background: linear-gradient(135deg, #b45309, #78350f); }
.adk-daily-h { font-weight: 800; font-size: 14px; opacity: .9; margin-bottom: 6px; }
.adk-daily .adk-ar { color: #fff; }
.adk-daily .adk-src { color: rgba(255,255,255,.85); }

.adk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.adk-cat { --c: #0F766E; display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 18px; text-decoration: none; color: var(--text);
  background: var(--card); border: 1px solid var(--divider); border-top: 4px solid var(--c); transition: transform .12s; }
.adk-cat:hover { transform: translateY(-2px); }
.adk-cat-e { font-size: 30px; }
.adk-cat b { font-size: 16px; }
.adk-cat small { color: var(--text-2); font-size: 12px; }

.adk-ar { font-family: 'Amiri', 'Scheherazade New', 'Traditional Arabic', Tajawal, serif; font-size: 22px; line-height: 2.1; margin: 6px 0; color: var(--text); white-space: pre-line; direction: rtl; text-align: right; cursor: pointer; }
.adk-item { background: var(--card); border: 1px solid var(--divider); border-radius: 20px; padding: 16px; margin-bottom: 12px; transition: opacity .25s, border-color .25s; }
.adk-item h3 { margin: 0; font-size: 15px; color: var(--ad); }
.adk-item.big .adk-ar { font-size: 26px; }
.adk-item.done { border-color: var(--ad); opacity: .72; }
.adk-fadl { background: var(--field); border-radius: 12px; padding: 8px 12px; font-size: 14px; color: var(--text); margin: 8px 0; }
.adk-src { color: var(--text-2); font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.adk-grade { background: var(--field); border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 700; }
.adk-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.adk-acts { display: flex; gap: 6px; margin-inline-start: auto; }
.adk-ic { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--divider); background: var(--field); color: var(--text); font-size: 18px; cursor: pointer; }
.adk-ic.on { border-color: #f59e0b; }

.adk-counter { position: relative; width: 76px; height: 76px; flex: none; border: 0; padding: 0; border-radius: 50%; background: var(--field); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.adk-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.adk-ring-bg { fill: none; stroke: var(--divider); stroke-width: 6; }
.adk-ring-v { fill: none; stroke: var(--ad); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .25s ease; }
.adk-n { position: relative; font-weight: 900; font-size: 17px; color: var(--text); }
.adk-counter.pulse { animation: adk-pulse .22s ease; }
@keyframes adk-pulse { 50% { transform: scale(.9); } }
@media (prefers-reduced-motion: reduce) { .adk-counter.pulse { animation: none; } .adk-cat:hover { transform: none; } }

.adk-prog { position: sticky; top: 56px; z-index: 2; background: var(--card); border: 1px solid var(--divider); border-radius: 14px; padding: 8px 12px; margin-bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.adk-prog-bar { flex: 1; height: 8px; border-radius: 8px; background: var(--field); overflow: hidden; }
.adk-prog-bar i { display: block; height: 100%; background: var(--ad); transition: width .3s; }
.adk-prog small { color: var(--text-2); font-weight: 700; }
.adk-done-all { width: 100%; text-align: center; font-weight: 800; color: var(--ad); }

.adk-rem { display: flex; align-items: center; gap: 10px; background: var(--field); border-radius: 14px; padding: 10px 12px; margin-bottom: 12px; }
.adk-rem-t { flex: 1; color: var(--text); font-size: 14px; }
.adk-lbl { font-size: 13px; font-weight: 700; color: var(--text-2); }
.adk-time { font-size: 22px; font-weight: 800; text-align: center; }
.adk-days, .adk-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.adk-day { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--divider); background: var(--card); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.adk-day.on { background: var(--ad); border-color: var(--ad); color: #fff; }
.adk-muted { color: var(--text-2); font-size: 13px; }
.adk-cap { margin: 0 2px 10px; }
.adk-ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: 13px; }

.adk-rrow { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--divider); border-radius: 16px; padding: 12px; margin-bottom: 8px; transition: opacity .2s; }
.adk-rrow.off { opacity: .55; }
.adk-rrow-e { font-size: 26px; }
.adk-rrow b { color: var(--text); }
.adk-rtime { display: inline-block; margin-top: 4px; padding: 4px 10px; border-radius: 999px; border: 0; background: var(--field); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.adk-sw { position: relative; width: 46px; height: 26px; flex: none; }
.adk-sw input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.adk-sw span { position: absolute; inset: 0; border-radius: 999px; background: var(--divider); transition: background .2s; }
.adk-sw span::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: inset-inline-start .2s; }
.adk-sw input:checked + span { background: var(--ad); }
.adk-sw input:checked + span::after { inset-inline-start: 23px; }

.adk-empty { text-align: center; padding: 28px 12px; background: var(--card); border: 1px solid var(--divider); border-radius: 18px; color: var(--text); }
.adk-big { font-size: 44px; }
.adk-sres { display: flex; flex-direction: column; gap: 6px; max-height: 55vh; overflow-y: auto; }
.adk-sitem { display: block; padding: 10px 12px; border-radius: 12px; background: var(--field); color: var(--text); text-decoration: none; }

@media (max-width: 520px) {
  .adk-stats { grid-template-columns: repeat(3, 1fr); }
  .adk-week { grid-column: 1 / -1; }
  .adk-ar { font-size: 20px; }
  .adk-item.big .adk-ar { font-size: 23px; }
}

/* ── css-parts/celebs.css ── */
/* «المشاهير» — الدليل، الملف، أضفني، طلبات التعاون (رموز الألوان: --field --divider --text-2 --card --primary --text) */
.cel { padding-bottom: 32px; }
.cel-hero { display: flex; gap: 16px; align-items: center; padding: 20px; border-radius: 22px; margin: 8px 0 14px;
  background: linear-gradient(135deg, #7c3aed, #db2777); color: #fff; }
.cel-hero h1 { margin: 0 0 4px; font-size: 26px; font-weight: 900; }
.cel-hero p { margin: 0 0 12px; opacity: .92; }
.cel-hero-art { font-size: 54px; line-height: 1; }
.cel-hero .btn-tonal { background: rgba(255,255,255,.18); color: #fff; }
.cel-chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: none; }
.cel-chips::-webkit-scrollbar { display: none; }
.cel-chip { flex: 0 0 auto; border: 1px solid var(--divider); background: var(--card); color: var(--text); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; }
.cel-chip.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
.cel-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cel-input { border: 1px solid var(--divider); background: var(--field); color: var(--text); border-radius: 12px; padding: 10px 12px; font: inherit; min-width: 0; }
.cel-input:focus { outline: 2px solid var(--primary); outline-offset: 0; }
textarea.cel-input { resize: vertical; width: 100%; box-sizing: border-box; }
.cel-sec { display: block; margin: 14px 0 8px; font-size: 16px; }
.cel-muted { color: var(--text-2); }
.cel-up { color: #059669; font-weight: 700; }
.cel-down { color: #dc2626; }
.cel-unconf { display: inline-block; font-size: 11px; color: #b45309; background: rgba(245,158,11,.14); border-radius: 999px; padding: 1px 8px; }
.cel-empty { text-align: center; color: var(--text-2); padding: 40px 12px; }
.cel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.cel-feat-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 8px; scrollbar-width: thin; }
.cel-feat-row .cel-card { flex: 0 0 160px; }
.cel-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 16px 10px 12px;
  background: var(--card); border: 1px solid var(--divider); border-radius: 18px; color: var(--text); text-decoration: none; transition: transform .15s; }
.cel-card:hover { transform: translateY(-2px); }
.cel-card.is-feat { border-color: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,.25); }
.cel-card-ribbon { position: absolute; top: 8px; inset-inline-end: 10px; }
.cel-card-name { display: flex; gap: 4px; align-items: center; justify-content: center; max-width: 100%; }
.cel-card-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cel-card-total b { font-size: 18px; }
.cel-card-pl { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; font-size: 14px; }
.cel-photo { border-radius: 50%; object-fit: cover; background: var(--field); flex: 0 0 auto; }
.cel-photo-ph { display: inline-flex; align-items: center; justify-content: center; font-weight: 900; color: #fff; background: linear-gradient(135deg, #7c3aed, #db2777); }
.cel-verified { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #1d9bf0; color: #fff; font-size: 11px; font-weight: 900; margin-inline-start: 6px; vertical-align: middle; }
.cel-verified.sm { width: 15px; height: 15px; font-size: 9px; }
.cel-feat { display: inline-block; font-size: 12px; background: rgba(245,158,11,.16); color: #b45309; border-radius: 999px; padding: 2px 10px; margin-inline-start: 8px; vertical-align: middle; font-weight: 700; }
.cel-back { display: inline-block; color: var(--text-2); text-decoration: none; margin: 6px 0 10px; }
.cel-title { font-size: 22px; font-weight: 900; margin: 0 0 10px; }
.cel-banner { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--field); border: 1px solid var(--divider); margin-bottom: 12px; }
.cel-banner.rejected { border-color: #fca5a5; }
.cel-banner.active { border-color: #86efac; }
.cel-profile-head { display: flex; gap: 16px; align-items: center; }
.cel-name { font-size: 24px; font-weight: 900; margin: 0; }
.cel-headline { margin: 4px 0; color: var(--text-2); }
.cel-meta { display: flex; gap: 12px; flex-wrap: wrap; color: var(--text-2); font-size: 14px; }
.cel-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; }
.cel-totals > div { background: var(--card); border: 1px solid var(--divider); border-radius: 16px; padding: 12px; text-align: center; display: flex; flex-direction: column; }
.cel-totals b { font-size: 20px; }
.cel-totals small { color: var(--text-2); }
.cel-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 14px; }
.cel-links { display: grid; gap: 8px; margin-bottom: 14px; }
.cel-link { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--divider);
  border-inline-start: 4px solid var(--pl, var(--primary)); color: var(--text); text-decoration: none; }
.cel-link-ic { font-size: 24px; width: 32px; text-align: center; flex: 0 0 auto; }
.cel-link .grow, .cel-mylink .grow { display: flex; flex-direction: column; min-width: 0; }
.cel-link-n { display: flex; flex-direction: column; align-items: flex-end; }
.cel-link-n b { font-size: 18px; }
.cel-card-box { background: var(--card); border: 1px solid var(--divider); border-radius: 18px; padding: 14px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.cel-chart { color: var(--primary); }
.cel-chart-svg { width: 100%; height: 160px; display: block; }
.cel-about { white-space: pre-line; margin: 0; line-height: 1.7; }
.cel-gated { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cel-contacts { display: flex; gap: 8px; flex-wrap: wrap; }
.cel-prices { display: flex; gap: 8px; flex-wrap: wrap; }
.cel-price { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; background: var(--field); border: 1px solid var(--divider); min-width: 96px; color: var(--text); font: inherit; }
.cel-price.as-btn { cursor: pointer; }
.cel-price.as-btn:hover { border-color: var(--primary); }
.cel-form { display: flex; flex-direction: column; gap: 10px; }
.cel-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.cel-field > span { font-size: 13px; color: var(--text-2); }
.cel-row { display: flex; gap: 10px; flex-wrap: wrap; }
.cel-row > .cel-field { min-width: 140px; }
.cel-hide { display: inline-flex; gap: 4px; align-items: center; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.cel-photo-pick { display: flex; gap: 14px; align-items: center; }
.cel-mylinks { display: flex; flex-direction: column; gap: 8px; }
.cel-mylink { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 14px; background: var(--field); }
.cel-mylink-n { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cel-mylink-act { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; }
.cel-code { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 13px; margin-top: 4px; }
.cel-code code { background: var(--card); border: 1px dashed var(--primary); border-radius: 8px; padding: 2px 8px; font-weight: 800; letter-spacing: 1px; }
.cel-addlink { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.cel-parse { min-height: 18px; font-size: 14px; }
.cel-collabs { display: flex; flex-direction: column; gap: 10px; }
.cel-collab { background: var(--card); border: 1px solid var(--divider); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.cel-brief { margin: 0; white-space: pre-line; }
.cel-st { font-size: 12px; border-radius: 999px; padding: 2px 10px; background: var(--field); white-space: nowrap; }
.cel-st.completed { background: rgba(16,185,129,.15); color: #047857; }
.cel-st.pending, .cel-st.accepted, .cel-st.delivered { background: rgba(245,158,11,.15); color: #b45309; }
.cel-st.rejected, .cel-st.cancelled, .cel-st.refunded { background: rgba(239,68,68,.12); color: #b91c1c; }
@media (max-width: 560px) {
  .cel-hero { padding: 16px; }
  .cel-hero-art { font-size: 40px; }
  .cel-profile-head { flex-direction: column; text-align: center; }
  .cel-meta { justify-content: center; }
  .cel-grid { grid-template-columns: repeat(2, 1fr); }
  .cel-filters .cel-input { flex: 1 1 45%; }
}

/* زرّا الدردشة والمساعد العائمان: الرئيسية والملف الشخصي فقط (app.js يضبط data-fabs) */
body[data-fabs="off"] .fab, body[data-fabs="off"] .ai-fab { display: none !important; }

/* ── css-parts/growth.css ── */
/* ═══ نمو الإطلاق: الأوائل، ادعُ 3 واربح، أنقذ حياة (growth.js) — الرموز المسموحة فقط ═══ */
.gr-home:empty { display: none; }
.gr-card { position: relative; padding: 14px 16px; margin-bottom: 12px; background: var(--card); border: 1px solid var(--divider); border-radius: 18px; }
.gr-card--pioneer { background: linear-gradient(135deg, rgba(79,60,224,.10), rgba(124,92,255,.06)), var(--card); }
.gr-card--blood { background: linear-gradient(135deg, rgba(220,38,38,.10), rgba(220,38,38,.03)), var(--card); }
.gr-card--invite { background: linear-gradient(135deg, rgba(5,150,105,.10), rgba(5,150,105,.03)), var(--card); }
.gr-card--mine { border-color: var(--primary); }
.gr-x { position: absolute; top: 6px; inset-inline-end: 8px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--field); color: var(--text-2); font-size: 18px; line-height: 1; cursor: pointer; }
.gr-row { display: flex; align-items: center; gap: 12px; padding-inline-end: 24px; }
.gr-row b { display: block; font-size: 15px; color: var(--text); }
.gr-emoji { flex: none; width: 46px; height: 46px; display: grid; place-items: center; font-size: 26px; border-radius: 14px; background: var(--field); }
.gr-muted { color: var(--text-2); font-size: 13px; line-height: 1.6; }
.gr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.gr-bar { height: 8px; border-radius: 99px; background: var(--field); overflow: hidden; margin: 6px 0 4px; }
.gr-bar i { display: block; height: 100%; background: var(--primary); border-radius: 99px; transition: width .4s; }
.gr-bar--big { height: 12px; margin-top: 12px; }
.gr-tiers { display: grid; gap: 8px; margin-top: 12px; }
.gr-tier { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--field); }
.gr-tier b { font-size: 14px; color: var(--text); }
.gr-tier-n { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--divider); font-weight: 900; color: var(--text-2); }
.gr-tier--ok .gr-tier-n { border-color: var(--primary); color: var(--primary); }
.gr-rules { margin: 10px 0 0; }
.gr-friends { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gr-friend { padding: 4px 10px; border-radius: 99px; background: var(--field); font-size: 12px; color: var(--text); }
.gr-hero { display: flex; align-items: center; gap: 14px; padding: 20px 18px; margin: 4px 0 14px; border-radius: 22px; color: #fff; background: linear-gradient(135deg, #4F3CE0, #7C5CFF); }
.gr-hero h1 { margin: 0; font-size: 23px; font-weight: 900; }
.gr-hero p { margin: 4px 0 0; font-size: 14px; opacity: .92; }
.gr-hero-e { flex: none; width: 60px; height: 60px; display: grid; place-items: center; font-size: 34px; border-radius: 18px; background: rgba(255,255,255,.18); }
.gr-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.gr-totals > div { padding: 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--divider); text-align: center; }
.gr-totals b { display: block; font-size: 24px; font-weight: 900; color: var(--text); }
.gr-totals span { font-size: 12px; color: var(--text-2); }
.gr-h { margin: 16px 4px 8px; font-size: 16px; color: var(--text); }
.gr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gr-chip { padding: 6px 12px; border-radius: 99px; background: var(--field); font-size: 13px; color: var(--text); }
.gr-list { padding: 4px 12px; }
.gr-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--divider); }
.gr-item:last-child { border-bottom: 0; }
.gr-item--me { background: var(--field); border-radius: 12px; padding-inline: 8px; }
.gr-item-top { display: flex; justify-content: space-between; gap: 8px; }
.gr-item-top b { color: var(--text); }
.gr-pos { flex: none; width: 30px; text-align: center; font-weight: 900; color: var(--text-2); }
.gr-celebrate { text-align: center; }
.gr-celebrate h2 { margin: 6px 0; color: var(--text); }
.gr-medal { font-size: 72px; }
.gr-badges { display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: middle; }
.gr-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 99px; background: var(--field); border: 1px solid var(--divider); font-size: 12px; font-weight: 700; color: var(--text); }
.gr-badge--pioneer { border-color: var(--primary); color: var(--primary); }
.bld-share-donor { width: 100%; margin: 0 0 12px; }

/* ─── «حروفي» (hurufi.js) — لعبة الكلمات بالمراحل ─── */
.hf { --hf: #7C3AED; --hf-cell: 34px; }
.hf-hero { display: flex; align-items: center; gap: 12px; padding: 18px 16px; margin: 4px 0 14px; border-radius: 22px; color: #fff;
  background: linear-gradient(135deg, #7C3AED, #4F3CE0 60%, #0EA5E9); }
.hf-hero h1 { margin: 0; font-size: 22px; font-weight: 900; }
.hf-hero p { margin: 4px 0 0; font-size: 13px; opacity: .92; }
.hf-hero-e { font-size: 34px; }
.hf-back { color: #fff; text-decoration: none; font-size: 30px; line-height: 1; padding: 0 4px; }
.hf-coins { display: inline-flex; align-items: center; gap: 2px; background: rgba(255,255,255,.2); border-radius: 999px; padding: 6px 12px; font-size: 14px; white-space: nowrap; }
.hf-note { background: var(--field); border-radius: 14px; padding: 10px 14px; margin: 0 0 12px; font-size: 14px; color: var(--text); }
.hf-daily { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 0 0 12px; border-radius: 18px; background: var(--card);
  border: 1px solid var(--divider); border-inline-start: 4px solid #F59E0B; }
.hf-daily-e { font-size: 30px; }
.hf-daily b { display: block; }
.hf-daily small { color: var(--text-2); }
.hf-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.hf-qbtn { border: 1px solid var(--divider); background: var(--card); color: var(--text); border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 14px; text-decoration: none; cursor: pointer; }
.hf-qbtn:disabled { opacity: .6; }
.hf-sec { margin: 16px 2px 10px; font-size: 16px; }
.hf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.hf-cat { --c: #7C3AED; display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 18px; text-decoration: none; color: var(--text);
  background: var(--card); border: 1px solid var(--divider); border-top: 4px solid var(--c); transition: transform .12s; }
.hf-cat:hover { transform: translateY(-2px); }
.hf-cat-e { font-size: 30px; }
.hf-cat b { font-size: 16px; }
.hf-cat small { color: var(--text-2); font-size: 12px; }
.hf-bar { height: 6px; border-radius: 6px; background: var(--field); overflow: hidden; margin-top: 4px; }
.hf-bar i { display: block; height: 100%; background: var(--c); }
.hf-map { --c: #7C3AED; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px; }
.hf-lv { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; aspect-ratio: 1; border-radius: 50%;
  background: var(--card); border: 2px solid var(--divider); color: var(--text); text-decoration: none; font-size: 18px; }
.hf-lv small { font-size: 10px; color: #F59E0B; letter-spacing: -1px; }
.hf-lv.is-done { border-color: var(--c); }
.hf-lv.is-next { background: var(--c); color: #fff; border-color: var(--c); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 25%, transparent); animation: hf-pulse 1.6s infinite; }
.hf-lv.is-locked { opacity: .45; }
.hf-lv.is-grid:not(.is-locked) { border-style: dashed; }
@keyframes hf-pulse { 50% { transform: scale(1.06); } }
.hf-step { display: flex; justify-content: center; gap: 6px; margin: 4px 0 10px; }
.hf-step i { width: 26px; height: 6px; border-radius: 6px; background: var(--divider); }
.hf-step i.is-done { background: #10B981; }
.hf-step i.is-cur { background: var(--hf); }
.hf-q { background: var(--card); border: 1px solid var(--divider); border-radius: 18px; padding: 16px; font-size: 18px; font-weight: 700; text-align: center; color: var(--text); line-height: 1.7; }
.hf-ans { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 14px 0 6px; direction: rtl; }
.hf-box { width: 36px; height: 40px; border-radius: 10px; background: var(--card); border: 2px solid var(--divider); display: grid; place-items: center; font-size: 20px; font-weight: 800; color: var(--text); }
.hf-box.is-rev { border-color: #F59E0B; }
.hf-box.is-ok { background: #10B981; border-color: #10B981; color: #fff; animation: hf-pop .35s; }
@keyframes hf-pop { 50% { transform: scale(1.18); } }
.hf-preview { min-height: 30px; text-align: center; font-size: 22px; font-weight: 800; color: var(--primary); letter-spacing: 2px; }
.hf-wheel-wrap { display: flex; justify-content: center; margin: 4px 0 8px; }
.hf-wheel { position: relative; border-radius: 50%; background: var(--card); border: 1px solid var(--divider); touch-action: none; user-select: none; -webkit-user-select: none; }
.hf-wheel.is-bad { animation: hf-shake .35s; }
@keyframes hf-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.hf-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hf-lines polyline { fill: none; stroke: var(--hf); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.hf-tile { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--field); color: var(--text); font: inherit;
  font-size: 22px; font-weight: 800; cursor: pointer; touch-action: none; z-index: 1; }
.hf-tile.is-on { background: var(--hf); color: #fff; }
.hf-tile[hidden] { display: none; }
.hf-hint { text-align: center; color: var(--text-2); font-size: 14px; margin: 0 0 8px; }
.hf-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 6px 0 14px; }
.hf-tool { border: 1px solid var(--divider); background: var(--card); color: var(--text); border-radius: 999px; padding: 8px 12px; font: inherit; font-size: 14px; cursor: pointer; }
.hf-tool small { color: var(--text-2); }
.hf-tool:disabled { opacity: .5; }
.hf-xw-wrap { display: flex; justify-content: center; overflow-x: auto; padding: 4px 0 10px; }
.hf-xw { display: grid; gap: 4px; direction: rtl; }
.hf-cell { width: var(--hf-cell); height: var(--hf-cell); border-radius: 8px; background: var(--field); border: 2px solid var(--divider); display: grid; place-items: center; font-size: 18px; font-weight: 800; color: var(--text); }
.hf-cell.is-empty { visibility: hidden; }
.hf-cell.is-ok { background: #10B981; border-color: #10B981; color: #fff; }
.hf-clues { margin: 0 0 14px; padding-inline-start: 22px; color: var(--text); font-size: 14px; line-height: 1.9; }
.hf-clues li.is-done { color: var(--text-2); }
.hf-win { text-align: center; padding: 6px 0 4px; }
.hf-win h3 { margin: 6px 0; }
.hf-win-stars { font-size: 40px; color: #F59E0B; letter-spacing: 4px; }
.hf-win-stars span { color: var(--divider); }
.hf-tabs { display: flex; gap: 8px; margin: 0 0 12px; }
.hf-tabs a { flex: 1; text-align: center; padding: 9px; border-radius: 12px; background: var(--field); color: var(--text); text-decoration: none; }
.hf-tabs a.is-on { background: var(--primary); color: #fff; }
.hf-board { list-style: none; margin: 0; padding: 0; }
.hf-board li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--divider); color: var(--text); }
.hf-board li.is-me { background: var(--field); border-radius: 12px; }
.hf-rank { width: 30px; text-align: center; font-weight: 800; }
.hf-board small { color: var(--text-2); }
.hf-pts { font-weight: 900; color: var(--primary); }
@media (max-width: 380px) { .hf { --hf-cell: 28px; } .hf-box { width: 30px; height: 36px; font-size: 18px; } }

/* ─── «القنوات والمجموعات» في الدردشة — بادئة chn- (غير «المجموعات» /groups) ─── */
.chn-explore, .chn-page { max-width: 860px; margin: 0 auto; padding: 16px; }
.chn-hero { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--divider); border-radius: 20px; padding: 16px; margin-bottom: 12px; }
.chn-hero h1 { margin: 0 0 4px; font-size: 22px; }
.chn-hero p { margin: 0; color: var(--text-2); font-size: 14px; }
.chn-hero > .grow { flex: 1 1 220px; min-width: 0; }
.chn-hero-ic { width: 56px; height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); flex: none; }
.chn-search { margin: 0 0 10px !important; }
.chn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-top: 10px; }
.chn-card { display: flex; flex-direction: column; gap: 8px; background: var(--card); border: 1px solid var(--divider); border-radius: 16px; padding: 12px; color: var(--text); min-width: 0; transition: border-color .15s, transform .15s; }
.chn-card:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--divider)); transform: translateY(-1px); }
.chn-card-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chn-card-desc { margin: 0; color: var(--text-2); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chn-card-foot { display: flex; align-items: center; gap: 8px; }
.chn-badges { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.chn-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--field); color: var(--text-2); font-size: 12px; font-weight: 700; white-space: nowrap; }
.chn-badge.ok { color: #059669; background: color-mix(in srgb, #10B981 14%, transparent); }
.chn-badge.warn { color: #DC2626; background: color-mix(in srgb, #EF4444 14%, transparent); }
.chn-good { color: #059669; }
.chn-bad { color: #DC2626; }

/* صفحة القناة قبل الانضمام */
.chn-page-head { background: var(--card); border: 1px solid var(--divider); border-radius: 22px; overflow: hidden; margin-bottom: 12px; }
.chn-cover { height: 110px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 70%, var(--card)), color-mix(in srgb, var(--primary) 25%, var(--card))); }
.chn-themed .chn-cover { background-color: var(--chn-bg, var(--primary)); background-image: var(--chn-img, linear-gradient(135deg, color-mix(in srgb, var(--primary) 70%, transparent), transparent)); background-size: cover; background-position: center; }
.chn-page-id { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 16px 16px; margin-top: -42px; text-align: center; }
.chn-page-id > .avatar { border: 4px solid var(--card); }
.chn-page-id h1 { margin: 4px 0 0; font-size: 22px; }
.chn-desc { margin: 4px 0; color: var(--text); font-size: 14px; white-space: pre-wrap; max-width: 560px; }
.chn-actions { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.chn-req { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--field); color: var(--text-2); font-size: 14px; }
.chn-box { background: var(--card); border: 1px solid var(--divider); border-radius: 16px; padding: 10px 12px; margin-bottom: 10px; }
.chn-box h4 { display: flex; align-items: center; gap: 6px; margin: 2px 0 8px; font-size: 13px; color: var(--text-2); }
.chn-note { padding: 8px 10px; border-radius: 10px; background: var(--field); margin-bottom: 6px; font-size: 14px; white-space: pre-wrap; }
.chn-feed-title { margin: 14px 4px 8px; color: var(--text-2); font-size: 13px; }
.chn-feed { display: flex; flex-direction: column; gap: 8px; }
.chn-themed .chn-feed { background-color: var(--chn-bg, transparent); background-image: var(--chn-img, none); background-size: cover; border-radius: 16px; padding: 8px; }
.chn-post { background: var(--card); border: 1px solid var(--divider); border-radius: 16px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; max-width: 640px; }
.chn-post-who { display: flex; align-items: center; gap: 6px; }
.chn-post-text { white-space: pre-wrap; word-break: break-word; font-size: 15px; }
.chn-post-time { align-self: flex-end; font-size: 11.5px; }
.chn-img { max-width: 100%; max-height: 420px; border-radius: 12px; object-fit: cover; cursor: zoom-in; }
.chn-locked { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 16px; color: var(--text-2); text-align: center; background: var(--card); border: 1px dashed var(--divider); border-radius: 16px; }

/* نوافذ الإنشاء والإعدادات */
.chn-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chn-kind { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 14px; border: 2px solid var(--divider); background: var(--card); color: var(--text); text-align: center; }
.chn-kind svg { color: var(--primary); }
.chn-kind small { color: var(--text-2); font-size: 12px; }
.chn-kind.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--card)); }
.chn-kind:disabled { opacity: .5; cursor: not-allowed; }
.chn-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--field); }
.chn-av-pick { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.chn-av-img { width: 100%; height: 100%; object-fit: cover; }
.chn-members { display: flex; flex-direction: column; max-height: 55vh; overflow-y: auto; }
.chn-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.chn-sw { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--divider); background: var(--field); color: var(--text-2); font-size: 12px; }
.chn-sw.on { outline: 3px solid var(--primary); outline-offset: 2px; }
.chn-color { width: 34px; height: 30px; border: 1px solid var(--divider); border-radius: 8px; background: var(--card); padding: 2px; }
.chn-theme-preview { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 16px; border: 1px solid var(--divider); background: var(--field); min-height: 130px; }
.chn-theme-preview.chn-themed { background-color: var(--chn-bg, var(--field)); background-image: var(--chn-img, none); background-size: cover; background-position: center; }
.chn-tp-msg { align-self: flex-start; background: var(--card); color: var(--text); padding: 8px 12px; border-radius: 14px; font-size: 14px; }
.chn-tp-msg.me { align-self: flex-end; background: var(--primary); color: #fff; }
.chn-tp-btn { align-self: center; margin-top: auto; background: var(--primary); color: #fff; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; }

/* المثبّتات والفهرس */
.chn-pins, .chn-index, .chn-archive { display: flex; flex-direction: column; gap: 6px; }
.chn-pin-row { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 12px; background: var(--field); }
.chn-pin-go { display: flex; align-items: flex-start; gap: 8px; border: 0; background: transparent; color: var(--text); text-align: start; min-width: 0; padding: 4px; }
.chn-pin-note { display: block; white-space: pre-wrap; font-weight: 600; }
.chn-ord { display: inline-flex; gap: 2px; flex: none; }
.chn-ord .icon-btn { width: 30px; height: 30px; }
.chn-pin-dots { display: flex; flex-direction: column; gap: 2px; flex: none; }
.chn-pin-dots i { display: block; width: 3px; height: 8px; border-radius: 2px; background: color-mix(in srgb, var(--primary) 30%, transparent); }
.chn-pin-dots i.on { background: var(--primary); }
.chn-idx-sec { border: 1px solid var(--divider); border-radius: 14px; padding: 6px; background: var(--card); }
.chn-idx-head { display: flex; align-items: center; gap: 4px; }
.chn-idx-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); text-align: start; min-width: 0; }
.chn-idx-row:hover { background: var(--field); }
.chn-idx-row > span:first-child { font-size: 20px; flex: none; }
.chn-idx-items { display: flex; flex-direction: column; gap: 2px; padding-block: 0 4px; padding-inline: 34px 6px; }
.chn-idx-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); text-align: start; font-size: 13.5px; min-width: 0; }
.chn-idx-item:hover { background: var(--field); color: var(--text); }
.chn-idx-item img, .chn-idx-ic { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; flex: none; display: flex; align-items: center; justify-content: center; background: var(--field); }
.chn-arch-item { border-bottom: 1px solid var(--divider); padding-bottom: 8px; }
.chn-arch-label { font-weight: 800; margin: 4px 2px 6px; color: var(--primary); }
.chn-arch-item .chn-post { max-width: none; }

/* داخل المحادثة: خلفية القناة وشريط القراءة فقط */
.chat-pane.chn-themed .msgs { background-color: var(--chn-bg, transparent); background-image: var(--chn-img, none); background-size: cover; background-position: center; }
.chn-pat-dots .msgs, .chn-theme-preview.chn-pat-dots { background-image: radial-gradient(color-mix(in srgb, var(--text) 12%, transparent) 1px, transparent 1.6px), var(--chn-img, none); background-size: 18px 18px, cover; }
.chn-pat-grid .msgs, .chn-theme-preview.chn-pat-grid { background-image: linear-gradient(color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 1px), var(--chn-img, none); background-size: 22px 22px, 22px 22px, cover; }
.chn-pat-waves .msgs, .chn-theme-preview.chn-pat-waves { background-image: repeating-radial-gradient(circle at 0 100%, transparent 0 14px, color-mix(in srgb, var(--text) 6%, transparent) 14px 15px), var(--chn-img, none); background-size: 60px 60px, cover; }
.chn-readonly { justify-content: center; }
@media (max-width: 560px) {
  .chn-explore, .chn-page { padding: 12px; }
  .chn-hero { padding: 12px; }
  .chn-grid { grid-template-columns: 1fr; }
  .chn-readonly { flex-wrap: wrap; font-size: 13px; }
}

/* لوحة المفاتيح على الهاتف (keyboard.js): --kb = ارتفاع اللوحة حين يغطّي المتصفح الصفحة بها (iOS) — 0 حين يصغّرها (Chrome أندرويد) */
@media (max-width: 760px) {
  .ai-panel { bottom: var(--kb, 0px); }
  .chat-wrap.has-conv { height: calc(100dvh - var(--kb, 0px)); }
  .wk-card { height: calc(100dvh - 210px - var(--kb, 0px)); min-height: 0; }
  body.kb-open .ai-panel, body.kb-open .chat-input, body.kb-open .ai-foot { padding-bottom: 0; }
  body.kb-open .chat-input { padding-bottom: 8px; }
  body.kb-open .ai-disclaimer { display: none; }
  body.kb-open .bottomnav, body.kb-open .ai-fab, body.kb-open .fab { visibility: hidden; }
}

/* ═══ «احجز موعدك» — pro.js (رموز الألوان فقط: --card --field --divider --text --text-2 --primary) ═══ */
.pbk-hero-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.pbk-hero-btns .btn, .pbk-actions .btn, .pbk-acts .btn, .pbk-card-btn, .pbk-send { white-space: nowrap; }
.pbk-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.pbk-actions .pbk-main { flex: 1 1 100%; justify-content: center; font-size: 16px; min-height: 48px; }
.pbk-card-btn { margin-top: 8px; width: 100%; justify-content: center; }
.pbk-form { display: flex; flex-direction: column; gap: 12px; }
.pbk-field { display: flex; flex-direction: column; gap: 6px; font-weight: 700; }
.pbk-field > span { font-size: 13px; color: var(--text-2); }
.pbk-who { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: var(--field); }
.pbk-who img { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; }
.pbk-days, .pbk-quick { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 6px; scrollbar-width: thin; }
.pbk-day { flex: 0 0 auto; white-space: nowrap; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--divider); background: var(--card); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.pbk-day.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.pbk-page { padding-bottom: 80px; }
.pbk-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 12px; }
.pbk-head h2 { margin: 0; font-size: 22px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pbk-list { display: flex; flex-direction: column; gap: 10px; }
.pbk-item { padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.pbk-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.pbk-status { flex: 0 0 auto; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.pbk-when { font-weight: 700; }
.pbk-proposed { color: var(--primary); font-weight: 700; }
.pbk-pnote { padding: 8px 10px; border-radius: 10px; background: var(--field); }
.pbk-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pbk-invite { padding: 14px; margin-bottom: 12px; }
.pbk-invite p { margin: 6px 0; }
.pbk-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.pbk-counts > div { background: var(--card); border: 1px solid var(--divider); border-radius: 14px; padding: 10px; text-align: center; display: flex; flex-direction: column; }
.pbk-counts b { font-size: 22px; font-weight: 900; color: var(--primary); }
.pbk-counts span { font-size: 12px; color: var(--text-2); }
.pbk-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 10px; }
.pbk-tab { flex: 0 0 auto; white-space: nowrap; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--divider); background: var(--card); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.pbk-tab.on { background: var(--primary); color: #fff; border-color: var(--primary); }
@media (max-width: 380px) {
  .pbk-acts .btn, .pbk-hero-btns .btn { padding-inline: 10px; font-size: 13px; }
}

/* ═══ wjb: «الوظائف القريبة» + «سيرتي الذاتية في دقيقة» (jobs.js) — بداية ═══ */
.wjb { padding-bottom: 32px; }
.wjb-hero { display: flex; gap: 12px; align-items: center; padding: 16px; border-radius: 20px; margin: 8px 0 12px;
  background: linear-gradient(135deg, color-mix(in srgb, #2563EB 16%, var(--card)), color-mix(in srgb, #0EA5E9 10%, var(--card))); border: 1px solid var(--divider); }
.wjb-hero-e { font-size: 40px; flex: none; }
.wjb-hero h1 { margin: 0; font-size: 20px; font-weight: 900; color: var(--text); }
.wjb-hero p { margin: 2px 0 0; color: var(--text-2); font-size: 13.5px; }
.wjb-hero-cv { flex: none; }
.wjb-btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; }
.wjb-actions, .wjb-row { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.wjb-actions > .btn { flex: 1 1 0; }
.wjb-row > .btn, .wjb-row > a.btn { flex: 1 1 auto; }
.wjb-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 8px; }
.wjb-tabs::-webkit-scrollbar { display: none; }
.wjb-tabs .chip { flex: none; text-decoration: none; color: var(--text); cursor: pointer; }
.wjb-tabs .chip.active, .wjb-chips .chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.wjb-filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.wjb-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.wjb-chips .chip { flex: none; cursor: pointer; color: var(--text); }
.wjb-grid2, .wjb-grid3 { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wjb-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wjb-near { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); margin: 4px 0 8px; min-width: 0; }
.wjb-near:empty { display: none; }
.wjb-list { display: flex; flex-direction: column; gap: 10px; }
.wjb-card { display: flex; gap: 12px; padding: 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--divider); color: var(--text); text-decoration: none; min-width: 0; }
.wjb-card.urgent { border-color: color-mix(in srgb, #DC2626 45%, var(--divider)); }
.wjb-card-media { width: 72px; height: 72px; flex: none; border-radius: 14px; background: var(--field) center / cover no-repeat; display: grid; place-items: center; overflow: hidden; }
.wjb-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wjb-card-top { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 2px; }
.wjb-title { font-size: 15.5px; font-weight: 800; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wjb-meta { font-size: 13px; color: var(--text-2); }
.wjb-pay { font-size: 13.5px; font-weight: 800; color: #059669; }
.wjb-card-foot { display: flex; justify-content: space-between; gap: 8px; color: var(--text-2); font-size: 12px; min-width: 0; }
.wjb-pill { display: inline-flex; align-items: center; gap: 3px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--field); color: var(--text-2); white-space: nowrap; }
.wjb-pill.ok { background: color-mix(in srgb, #059669 15%, transparent); color: #059669; }
.wjb-pill.warn { background: color-mix(in srgb, #D97706 16%, transparent); color: #B45309; }
.wjb-pill.bad { background: color-mix(in srgb, #DC2626 14%, transparent); color: #DC2626; }
.wjb-empty { text-align: center; padding: 36px 12px; font-size: 40px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wjb-empty p { font-size: 14.5px; color: var(--text-2); margin: 0; }
.wjb-hint { color: var(--text-2); font-size: 12.5px; margin: 4px 0; }
.wjb-note { padding: 10px 12px; border-radius: 12px; background: var(--field); color: var(--text); font-size: 13.5px; margin: 8px 0; }
.wjb-h1 { font-size: 21px; font-weight: 900; margin: 8px 0; color: var(--text); overflow-wrap: anywhere; }
.wjb-back { display: inline-block; color: var(--text-2); font-size: 13px; margin-top: 8px; text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wjb-photos { display: flex; gap: 8px; overflow-x: auto; margin: 8px 0; scrollbar-width: none; }
.wjb-photos img { height: 180px; max-width: 85%; border-radius: 14px; object-fit: cover; cursor: zoom-in; flex: none; }
.wjb-emp { display: flex; gap: 10px; align-items: center; padding: 8px 0; color: var(--text); text-decoration: none; min-width: 0; }
.wjb-emp small { display: block; color: var(--text-2); font-size: 12px; }
.wjb-emp b { display: block; }
.wjb-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 8px 0; }
.wjb-fact { display: flex; gap: 8px; align-items: flex-start; padding: 10px; border-radius: 14px; background: var(--field); min-width: 0; }
.wjb-fact > span { font-size: 18px; flex: none; }
.wjb-fact small { display: block; color: var(--text-2); font-size: 11.5px; }
.wjb-fact b { display: block; font-size: 13.5px; overflow-wrap: anywhere; }
.wjb-apply { margin: 10px 0; display: flex; flex-direction: column; gap: 8px; }
.wjb-apply.on { flex-direction: row; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, #059669 12%, var(--card)); }
.wjb-apply.on b { min-width: 0; overflow-wrap: anywhere; font-size: 13.5px; }
.wjb-cta { width: 100%; padding-block: 12px; font-size: 15.5px; font-weight: 800; }
.wjb-section { margin: 14px 0; display: flex; flex-direction: column; gap: 8px; }
.wjb-section h3 { margin: 0; font-size: 16px; font-weight: 800; color: var(--text); }
.wjb-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; color: var(--text); background: var(--field); border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.wjb-manage { padding: 12px; border-radius: 16px; border: 1px dashed var(--divider); }
.wjb-form { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wjb-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.wjb-field > span { font-size: 13px; font-weight: 700; color: var(--text); }
.wjb-field > small { color: var(--text-2); font-size: 12px; }
.wjb-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); cursor: pointer; }
.wjb-appcard { display: flex; flex-direction: column; gap: 4px; }
.wjb-appfoot { display: flex; justify-content: space-between; align-items: center; padding: 0 6px; color: var(--text-2); }
.wjb-applicant { display: flex; gap: 10px; align-items: center; width: 100%; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--divider); background: var(--card); color: var(--text); text-align: start; font: inherit; cursor: pointer; margin-bottom: 8px; min-width: 0; }
.wjb-applicant b, .wjb-applicant small { display: block; }
.wjb-applicant small { color: var(--text-2); font-size: 12px; }
.wjb-alert { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--divider); margin: 8px 0; min-width: 0; }
.wjb-alert b, .wjb-alert small { display: block; }
.wjb-alert small { color: var(--text-2); }
.wjb-cvline { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: var(--field); font-size: 22px; }
.wjb-cvline b, .wjb-cvline small { display: block; font-size: 14px; }
.wjb-cvline small { font-size: 12px; color: var(--text-2); }
.wjb-cv-bar { display: flex; flex-direction: column; gap: 4px; }
.wjb-cv-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.wjb-cv-edit-item { padding: 10px; border-radius: 12px; border: 1px solid var(--divider); background: var(--card); }
.wjb-cv-preview { min-width: 0; }
.wjb-cv-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--divider); background: var(--field); padding: 10px; }
.wjb-tpls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wjb-tpl { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border-radius: 12px; border: 2px solid var(--divider); background: var(--card); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wjb-tpl.active { border-color: var(--primary); }
.wjb-tpl-thumb { width: 100%; height: 54px; border-radius: 6px; background: #fff; border: 1px solid #d1d5db; }
.wjb-tpl-classic { background: linear-gradient(#111827 0 10px, #fff 10px 14px, #9ca3af 14px 16px, #fff 16px 22px, #d1d5db 22px 24px, #fff 24px 30px, #d1d5db 30px 32px, #fff 32px); }
.wjb-tpl-modern { background: linear-gradient(90deg, #1e3a8a 0 34%, #fff 34%); }
.wjb-tpl-minimal { background: linear-gradient(#fff 0 6px, #374151 6px 9px, #fff 9px 16px, #e5e7eb 16px 17px, #fff 17px 26px, #e5e7eb 26px 27px, #fff 27px); }
@media (min-width: 900px) {
  .wjb-cvpage.main-narrow { max-width: 1100px; }
  .wjb-cv-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .wjb-cv-preview { position: sticky; top: 70px; }
}
@media (max-width: 420px) {
  .wjb-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wjb-grid3 > :last-child:nth-child(3) { grid-column: 1 / -1; }
  .wjb-btn { padding-inline: 10px; font-size: 13px; }
  .wjb-card-media { width: 56px; height: 56px; }
  .wjb-hero h1 { font-size: 18px; }
}
@media (max-width: 340px) {
  .wjb-grid2, .wjb-facts { grid-template-columns: minmax(0, 1fr); }
  .wjb-hero-cv { display: none; }
}

/* ── مستند السيرة: ورق أبيض دائماً، يُطبع كما يُرى ── */
.wjb-cv { background: #fff; color: #111827; width: 100%; max-width: 794px; min-width: 300px; margin: 0 auto; padding: 28px 30px; box-sizing: border-box;
  font: 13px/1.55 Cairo, "Segoe UI", Tahoma, Arial, sans-serif; box-shadow: 0 1px 6px rgba(0, 0, 0, .12); }
.wjb-cv h1 { margin: 0; font-size: 24px; font-weight: 900; color: #111827; }
.wjb-cv h2 { margin: 2px 0 0; font-size: 14.5px; font-weight: 700; color: #374151; }
.wjb-cv h3 { margin: 0 0 6px; font-size: 13.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; }
.wjb-cv p { margin: 0; white-space: pre-wrap; }
.wjb-cv ul { margin: 4px 0 0; padding-inline-start: 18px; }
.wjb-cv li { margin: 2px 0; }
.wjb-cv small { color: #6b7280; display: block; }
.wjb-cv-sec { margin-top: 14px; break-inside: avoid; }
.wjb-cv-item { margin-bottom: 8px; break-inside: avoid; }
.wjb-cv-item-h { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wjb-cv-item-h span { color: #6b7280; font-size: 12px; white-space: nowrap; }
.wjb-cv-contacts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; color: #374151; font-size: 12px; }
.wjb-cv-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.wjb-cv-tags span { padding: 2px 9px; border-radius: 999px; background: #f3f4f6; border: 1px solid #e5e7eb; font-size: 12px; }
.wjb-cv-plain { list-style: none; padding: 0 !important; }
.wjb-cv-classic .wjb-cv-head { text-align: center; border-bottom: 3px double #111827; padding-bottom: 10px; }
.wjb-cv-classic .wjb-cv-contacts { justify-content: center; }
.wjb-cv-classic h3 { border-bottom: 1px solid #9ca3af; padding-bottom: 3px; color: #111827; }
.wjb-cv-modern { display: grid; grid-template-columns: 34% 1fr; padding: 0; }
.wjb-cv-modern .wjb-cv-side { background: #1e3a8a; color: #e0e7ff; padding: 24px 18px; }
.wjb-cv-modern .wjb-cv-side h1 { color: #fff; font-size: 21px; overflow-wrap: anywhere; }
.wjb-cv-modern .wjb-cv-side h2 { color: #c7d2fe; }
.wjb-cv-modern .wjb-cv-side h3 { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .3); padding-bottom: 3px; }
.wjb-cv-modern .wjb-cv-side .wjb-cv-tags span { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); color: #fff; }
.wjb-cv-modern .wjb-cv-side li { overflow-wrap: anywhere; }
.wjb-cv-modern .wjb-cv-main { padding: 24px 22px; min-width: 0; }
.wjb-cv-modern .wjb-cv-main h3 { color: #1e3a8a; }
.wjb-cv-minimal h1 { font-weight: 800; letter-spacing: -.01em; }
.wjb-cv-minimal h2 { color: #6b7280; font-weight: 600; }
.wjb-cv-minimal h3 { color: #6b7280; font-size: 12px; font-weight: 800; }
.wjb-cv-minimal .wjb-cv-sec { border-top: 1px solid #e5e7eb; padding-top: 10px; }
.wjb-cv-minimal .wjb-cv-tags span { background: none; border: none; padding: 0; }
.wjb-cv-minimal .wjb-cv-tags span:not(:last-child)::after { content: " ·"; }
@media (max-width: 520px) {
  .wjb-cv { padding: 18px 16px; font-size: 12.5px; }
  .wjb-cv-modern { grid-template-columns: 1fr; padding: 0; }
}
#wjb-print-root { display: none; }
@media print {
  body.wjb-printing > *:not(#wjb-print-root) { display: none !important; }
  body.wjb-printing { background: #fff !important; }
  body.wjb-printing #wjb-print-root { display: block; }
  body.wjb-printing .wjb-cv { box-shadow: none; max-width: none; margin: 0; }
  body.wjb-printing .wjb-cv-modern { grid-template-columns: 34% 1fr; }
  body.wjb-printing .wjb-cv-modern .wjb-cv-side { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { size: A4; margin: 12mm; }
}
/* ═══ wjb — نهاية ═══ */

/* ═══ wkt: «مطبخ وبيت» (kitchen.js) — بداية ═══ */
.wkt { padding-bottom: 90px; }
.wkt-hero { display: flex; gap: 12px; align-items: center; padding: 16px; border-radius: 18px; background: color-mix(in srgb, #EA580C 12%, var(--card)); border: 1px solid var(--divider); margin: 8px 0 10px; }
.wkt-hero h1 { margin: 0 0 4px; font-size: clamp(19px, 5vw, 24px); font-weight: 900; color: var(--text); }
.wkt-hero p { margin: 0; color: var(--text-2); font-size: 14px; }
.wkt-hero-art { font-size: 44px; flex: none; }
.wkt-h2 { margin: 6px 0 10px; font-size: 19px; font-weight: 900; color: var(--text); }
.wkt-h3 { margin: 16px 0 8px; font-size: 16px; font-weight: 800; color: var(--text); }
.wkt-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 8px; }
.wkt-tabs::-webkit-scrollbar { display: none; }
.wkt-tab { flex: 0 0 auto; white-space: nowrap; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--divider); background: var(--card); color: var(--text); text-decoration: none; font-weight: 700; font-size: 13px; }
.wkt-tab.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.wkt-btn { white-space: nowrap; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; font-size: clamp(12px, 3.4vw, 14px); }
.wkt-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wkt-btn.on { color: var(--primary); }
.wkt-input { width: 100%; min-width: 0; box-sizing: border-box; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--divider); background: var(--field); color: var(--text); font: inherit; }
.wkt-input:focus { outline: 2px solid color-mix(in srgb, var(--primary) 40%, transparent); }
.wkt-searchrow { display: flex; gap: 8px; align-items: center; margin: 6px 0 10px; }
.wkt-searchrow .wkt-input { flex: 1 1 auto; }
.wkt-searchrow select.wkt-input { flex: 0 1 auto; width: auto; }
.wkt-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; margin-bottom: 4px; }
.wkt-chips::-webkit-scrollbar { display: none; }
.wkt-chip { flex: 0 0 auto; white-space: nowrap; padding: 6px 11px; border-radius: 999px; background: var(--field); color: var(--text); text-decoration: none; font-size: 13px; font-weight: 700; border: 1px solid transparent; }
.wkt-chip small { color: var(--text-2); font-weight: 600; }
.wkt-chip.on { border-color: var(--primary); color: var(--primary); }
.wkt-chip.ok { background: color-mix(in srgb, #F59E0B 18%, var(--card)); }
.wkt-sec { margin: 14px 0; }
.wkt-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.wkt-sec-head h3, .wkt-sec > h3 { margin: 0; font-size: 16px; font-weight: 800; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wkt-more { color: var(--primary); text-decoration: none; font-weight: 700; font-size: 13px; white-space: nowrap; }
.wkt-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 46%); gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.wkt-row::-webkit-scrollbar { display: none; }
.wkt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.wkt-card { display: flex; flex-direction: column; min-width: 0; border-radius: 16px; overflow: hidden; background: var(--card); border: 1px solid var(--divider); color: var(--text); text-decoration: none; }
.wkt-card.wide .wkt-card-media { aspect-ratio: 16 / 9; }
.wkt-card-media { position: relative; aspect-ratio: 4 / 3; background: var(--field); display: grid; place-items: center; }
.wkt-card-media img { width: 100%; height: 100%; object-fit: cover; }
.wkt-card-emoji { font-size: 44px; }
.wkt-card-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wkt-card-body small { color: var(--text-2); }
.wkt-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.wkt-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.wkt-by { display: block; }
.wkt-missing { color: #B45309 !important; }
.wkt-price { font-weight: 900; color: var(--primary); }
.wkt-pill { position: absolute; inset-inline-start: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .62); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.wkt-pill.warn { inset-inline-start: auto; inset-inline-end: 8px; top: 8px; bottom: auto; background: #B45309; }
.wkt-pill.ok { inset-inline-start: auto; inset-inline-end: 8px; top: 8px; bottom: auto; background: #059669; }
.wkt-stars { display: inline-flex; gap: 1px; color: #F59E0B; vertical-align: middle; }
.wkt-empty { grid-column: 1 / -1; text-align: center; padding: 30px 10px; color: var(--text-2); }
.wkt-empty > div { font-size: 42px; }
.wkt-panel { padding: 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--divider); margin: 8px 0 12px; display: flex; flex-direction: column; gap: 10px; }
.wkt-panel p { margin: 0; }
.wkt-warn { padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, #F59E0B 15%, var(--card)); color: var(--text); font-size: 13px; margin: 6px 0; }
.wkt-fab { position: fixed; inset-inline-end: 16px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 30; display: inline-flex; align-items: center; gap: 6px; padding: 12px 16px; border: 0; border-radius: 999px; background: var(--primary); color: #fff; font: inherit; font-weight: 800; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); cursor: pointer; white-space: nowrap; }
@media (min-width: 900px) { .wkt-fab { bottom: 24px; } }
.wkt-contest { display: flex; gap: 10px; align-items: center; padding: 12px; margin: 12px 0; border-radius: 18px; text-decoration: none; color: var(--text); background: color-mix(in srgb, #F59E0B 16%, var(--card)); border: 1px solid var(--divider); }
.wkt-contest > .btn { flex: 0 0 auto; }
.wkt-contest-ico { font-size: 34px; flex: none; }
.wkt-contest small { display: block; color: var(--text-2); }
.wkt-contest-top { display: flex; gap: 4px; margin-top: 4px; }
.wkt-contest-top img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; }
/* الوصفة */
.wkt-recipe { border-radius: 18px; overflow: hidden; background: var(--card); border: 1px solid var(--divider); }
.wkt-cover { display: block; width: 100%; max-height: 420px; object-fit: cover; background: var(--field); }
.wkt-cover.empty { display: grid; place-items: center; height: 180px; font-size: 64px; }
.wkt-recipe-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.wkt-recipe-body h1 { margin: 0; font-size: clamp(20px, 5.5vw, 26px); font-weight: 900; color: var(--text); overflow-wrap: anywhere; }
.wkt-intro { margin: 0; color: var(--text-2); }
.wkt-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.wkt-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wkt-facts > div { padding: 8px; border-radius: 12px; background: var(--field); text-align: center; min-width: 0; }
.wkt-facts small { display: block; color: var(--text-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wkt-facts b { display: block; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wkt-owner { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wkt-owner .grow { display: flex; flex-direction: column; }
.wkt-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.wkt-actions > .btn { flex: 1 1 0; justify-content: center; }
.wkt-rate { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.wkt-star { border: 0; background: none; padding: 2px; color: #F59E0B; cursor: pointer; }
.wkt-cookbtn { width: 100%; justify-content: center; padding-block: 12px; }
/* «لكم شخصاً تريد التحضير؟»: بطاقة واضحة بعدّاد كبير (بدل «− 4 حصص +») */
.wkt-serv { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 12px; padding: 12px 14px;
  border-radius: 14px; background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent); }
.wkt-serv-q { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 180px; }
.wkt-serv-q b { font-size: 15px; color: var(--text); }
.wkt-serv-q small { color: var(--text-2); font-size: 12.5px; }
.wkt-serv-reset { border: 0; background: none; padding: 0; color: var(--primary); font: inherit; font-weight: 800; cursor: pointer; text-decoration: underline; }
.wkt-stepper { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 99px; background: var(--card); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.wkt-stepper button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--primary); color: #fff; font-size: 22px; font-weight: 900; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform .1s, opacity .15s; }
.wkt-stepper button:active { transform: scale(.92); }
.wkt-stepper button:disabled { opacity: .35; cursor: default; }
.wkt-stepper-val { min-width: 92px; text-align: center; font-weight: 900; font-size: 16px; color: var(--text); white-space: nowrap; }
/* تعليقات الوصفة بشكل تعليقات المنشورات (.comment/.bubble/.comment-box) */
.wkt-cform { margin-top: 12px; }
.comment.wkt-cpinned { padding: 8px; border-radius: 14px; background: color-mix(in srgb, var(--primary) 7%, var(--card)); }
.wkt-ings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.wkt-ing { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--divider); cursor: pointer; }
.wkt-ing input { flex: none; width: 18px; height: 18px; accent-color: var(--primary); }
.wkt-ing input:checked ~ span { text-decoration: line-through; color: var(--text-2); }
.wkt-qty { font-weight: 800; min-width: 64px; color: var(--primary); }
.wkt-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.wkt-steps li { display: flex; gap: 10px; }
.wkt-steps p { margin: 0 0 6px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
.wkt-steps img { width: 100%; max-height: 300px; object-fit: cover; border-radius: 12px; }
.wkt-stepn { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; font-weight: 900; font-size: 14px; }
.wkt-tips p { white-space: pre-wrap; padding: 10px 12px; border-radius: 12px; background: var(--field); margin: 6px 0 0; }
.wkt-tried { margin: 0; border-radius: 14px; overflow: hidden; background: var(--card); border: 1px solid var(--divider); min-width: 0; }
.wkt-tried img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.wkt-tried figcaption { padding: 6px 8px; font-size: 12px; color: var(--text-2); }
.wkt-comments { display: flex; flex-direction: column; gap: 10px; }
.wkt-comment { display: flex; gap: 8px; align-items: flex-start; }
.wkt-comment p { margin: 2px 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); }
/* وضع الطبخ */
body.wkt-cooking { overflow: hidden; }
.wkt-cook { position: fixed; inset: 0; z-index: 1000; background: var(--card); color: var(--text); display: flex; flex-direction: column; padding: max(12px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom)); gap: 12px; }
.wkt-cook-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wkt-cook-head b { font-size: 16px; }
.wkt-cook-progress { height: 6px; border-radius: 6px; background: var(--field); overflow: hidden; }
.wkt-cook-bar { height: 100%; background: var(--primary); transition: width .25s; }
.wkt-cook-step { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.wkt-cook-step small { color: var(--text-2); font-weight: 700; }
.wkt-cook-step p { margin: 0; font-size: clamp(22px, 6vw, 32px); line-height: 1.5; font-weight: 700; white-space: pre-wrap; overflow-wrap: anywhere; }
.wkt-cook-step img { width: 100%; max-height: 38vh; object-fit: cover; border-radius: 14px; }
.wkt-cook-ings { max-height: 35vh; overflow-y: auto; padding: 10px 12px; border-radius: 14px; background: var(--field); }
.wkt-cook-ings ul { margin: 0; padding-inline-start: 18px; font-size: 17px; line-height: 1.7; }
.wkt-cook-timer { display: flex; align-items: center; justify-content: center; gap: 10px; }
.wkt-cook-timer:empty { display: none; }
.wkt-cook-timer > b { font-size: 34px; font-variant-numeric: tabular-nums; direction: ltr; }
.wkt-cook-nav { display: flex; gap: 10px; }
.wkt-cook-nav .btn { flex: 1 1 0; justify-content: center; padding-block: 14px; font-size: 17px; }
/* المحرّر */
.wkt-form { display: flex; flex-direction: column; gap: 10px; }
.wkt-form h3 { margin: 8px 0 0; font-size: 16px; color: var(--text); }
.wkt-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wkt-field > span { font-weight: 700; font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wkt-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wkt-4col { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 480px) { .wkt-4col { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wkt-2col { grid-template-columns: minmax(0, 1fr); } }
.wkt-coverpick { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; border: 1px dashed var(--divider); background: var(--field); }
.wkt-coverpick img, .wkt-coverpick > span { width: 84px; height: 64px; border-radius: 10px; object-fit: cover; display: grid; place-items: center; font-size: 28px; flex: none; background: var(--card); }
.wkt-edit-list { display: flex; flex-direction: column; gap: 8px; }
.wkt-ingrow { display: grid; grid-template-columns: minmax(0, 64px) minmax(0, 80px) minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.wkt-steprow { display: flex; gap: 8px; align-items: flex-start; padding: 8px; border-radius: 14px; background: var(--card); border: 1px solid var(--divider); }
.wkt-steptools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.wkt-steptools img { width: 52px; height: 40px; object-fit: cover; border-radius: 8px; }
.wkt-timerin { display: inline-flex; align-items: center; gap: 4px; }
.wkt-timerin .wkt-input { width: 82px; padding: 6px 8px; }
.wkt-thumbs img { max-width: 100%; max-height: 240px; border-radius: 12px; object-fit: cover; }
/* المسابقة */
.wkt-contest-hero { position: relative; border-radius: 18px; overflow: hidden; background: color-mix(in srgb, #F59E0B 16%, var(--card)); border: 1px solid var(--divider); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.wkt-contest-hero > img { width: calc(100% + 28px); margin: -14px -14px 0; max-height: 220px; object-fit: cover; }
.wkt-contest-hero h1 { margin: 2px 0; font-size: clamp(20px, 5.5vw, 26px); font-weight: 900; color: var(--text); }
.wkt-contest-hero p { margin: 0; color: var(--text-2); }
.wkt-contest-hero small { color: var(--text-2); font-weight: 700; }
.wkt-prize { color: var(--text) !important; font-weight: 800; }
.wkt-rules { margin: 10px 0; padding: 10px 12px; border-radius: 14px; background: var(--field); }
.wkt-rules summary { cursor: pointer; font-weight: 800; }
.wkt-rules p { white-space: pre-wrap; margin: 8px 0 0; }
.wkt-winner { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, #F59E0B 22%, var(--card)); margin: 10px 0; }
.wkt-winner a { color: var(--primary); font-weight: 800; text-decoration: none; }
.wkt-entries { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 10px; }
.wkt-entry { display: flex; flex-direction: column; min-width: 0; border-radius: 16px; overflow: hidden; background: var(--card); border: 1px solid var(--divider); }
.wkt-entry.winner { border: 2px solid #F59E0B; }
.wkt-entry-media { position: relative; display: block; aspect-ratio: 1; background: var(--field); }
.wkt-entry-media img { width: 100%; height: 100%; object-fit: cover; }
.wkt-rank { position: absolute; inset-inline-start: 8px; top: 8px; padding: 2px 9px; border-radius: 999px; background: rgba(0, 0, 0, .65); color: #fff; font-weight: 900; font-size: 13px; }
.wkt-entry-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wkt-entry-body small { color: var(--text-2); }
.wkt-entry-body a { color: var(--primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wkt-entry-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 2px; min-width: 0; }
.wkt-entry-foot > b { white-space: nowrap; color: var(--text); }
.wkt-past { display: flex; flex-direction: column; gap: 6px; }
.wkt-pastrow { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; background: var(--card); border: 1px solid var(--divider); color: var(--text); text-decoration: none; min-width: 0; }
.wkt-pastrow img, .wkt-pastrow > span { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex: none; display: grid; place-items: center; font-size: 24px; background: var(--field); }
.wkt-pastrow .grow { display: flex; flex-direction: column; }
.wkt-share { border-radius: 20px; overflow: hidden; background: var(--card); border: 1px solid var(--divider); margin-top: 8px; }
.wkt-share-head { padding: 12px 14px; font-size: clamp(18px, 5vw, 22px); font-weight: 900; text-align: center; background: color-mix(in srgb, #F59E0B 18%, var(--card)); color: var(--text); }
.wkt-share-photo { display: block; width: 100%; max-height: 520px; object-fit: cover; background: var(--field); }
.wkt-share-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.wkt-share-body p { margin: 0; color: var(--text); }
@media (max-width: 360px) {
  .wkt-btn { padding-inline: 10px; }
  .wkt-hero-art { font-size: 34px; }
  .wkt-actions > .btn { flex-basis: 30%; }
}
/* ═══ wkt: «مطبخ وبيت» — نهاية ═══ */

/* ── css-parts/challenge.css ── */
/* «تحدّي صديقك» — wch- (موبايل أولاً: الأزرار لا تنكسر على سطرين، تتقلّص بدل ذلك) */
.wch { --wch-a: #F97316; --wch-b: #EC4899; padding-bottom: 24px; }
.wch-grow { flex: 1 1 auto; min-width: 0; }
.wch-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wch-muted { color: var(--text-2); }
.wch-col { display: flex; flex-direction: column; gap: 8px; }
.wch-label { display: block; margin: 10px 0 6px; font-size: 14px; }
.wch-label:first-child { margin-top: 0; }
.wch-sub { margin: 18px 0 8px; font-size: 17px; font-weight: 900; }
.wch-card { background: var(--card); border: 1px solid var(--divider); border-radius: 18px; padding: 14px; margin: 0 0 12px; }
.wch-note { background: var(--field); border-radius: 14px; padding: 10px 12px; margin: 0 0 12px; font-size: 13.5px; color: var(--text); }
.wch-note a { color: var(--primary); font-weight: 800; }
.wch-empty { text-align: center; padding: 24px 10px; font-size: 34px; color: var(--text-2); }
.wch-empty p { font-size: 14px; margin: 6px 0 12px; }
.wch-tag { display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: 99px; background: var(--field); color: var(--text-2); font-size: 11px; font-weight: 800; vertical-align: middle; }

/* أزرار: سطر واحد دائماً، الخط يصغر على الشاشات الضيقة */
.wch-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 44px; padding: 0 14px; border-radius: 14px;
  border: 0; font: inherit; font-weight: 800; font-size: clamp(12.5px, 3.6vw, 15px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; text-decoration: none; color: var(--text); background: var(--field); transition: transform .12s ease, filter .12s ease; }
.wch-btn:active { transform: scale(.97); }
.wch-btn:disabled { opacity: .6; pointer-events: none; }
.wch-primary { color: #fff; background: linear-gradient(90deg, var(--wch-a), var(--wch-b)); box-shadow: 0 8px 20px rgba(236, 72, 153, .22); }
.wch-soft { background: var(--field); color: var(--text); }
.wch-outline { background: transparent; border: 2px solid var(--primary); color: var(--primary); }
.wch-wa { background: #25D366; color: #fff; }
.wch-cta { display: flex; width: 100%; min-height: 52px; margin: 6px 0 12px; font-size: clamp(14px, 4.2vw, 16.5px); font-weight: 900; border-radius: 16px; }
.wch-pulse { animation: wch-pulse 1.8s ease-in-out infinite; }
@keyframes wch-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
.wch-row2 { display: flex; gap: 8px; margin-bottom: 12px; }
.wch-row2 > .wch-btn { flex: 1 1 0; }

/* البطل والخطوات */
.wch-hero { display: flex; align-items: center; gap: 14px; padding: 18px 16px; margin: 4px 0 14px; border-radius: 22px; color: #fff;
  background: linear-gradient(135deg, var(--wch-a), var(--wch-b)); }
.wch-hero h1 { margin: 0; font-size: clamp(19px, 5.6vw, 23px); font-weight: 900; }
.wch-hero p { margin: 4px 0 0; font-size: 13.5px; opacity: .93; }
.wch-hero-art { position: relative; width: 64px; height: 64px; flex: none; }
.wch-hero-art span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 40px; background: rgba(255,255,255,.18); border-radius: 20px; }
.wch-hero-art i { position: absolute; font-style: normal; font-size: 19px; animation: wch-float 3s ease-in-out infinite; }
.wch-hero-art i:nth-of-type(1) { top: -8px; inset-inline-end: -8px; }
.wch-hero-art i:nth-of-type(2) { bottom: -8px; inset-inline-start: -8px; animation-delay: 1.2s; }
@keyframes wch-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.wch-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.wch-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 12px 6px 10px;
  background: var(--card); border: 1px solid var(--divider); border-radius: 16px; min-width: 0; }
.wch-step-n { position: absolute; top: 6px; inset-inline-start: 8px; font-size: 11px; font-weight: 900; color: var(--text-2); }
.wch-step-e { font-size: 26px; }
.wch-step b { font-size: 13px; }
.wch-step small { font-size: 11px; color: var(--text-2); line-height: 1.35; }
.wch-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; margin: 0 0 12px; }
.wch-stats > div { background: var(--card); border: 1px solid var(--divider); border-radius: 14px; padding: 8px 6px; text-align: center; min-width: 0; }
.wch-stats b { display: block; font-size: 17px; font-weight: 900; white-space: nowrap; }
.wch-stats small { display: block; font-size: 11px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* القوائم */
.wch-list, .wch-board { display: flex; flex-direction: column; gap: 6px; }
.wch-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--card); border: 1px solid var(--divider); border-radius: 16px; color: var(--text); text-decoration: none; }
.wch-item-ic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; font-size: 22px; border-radius: 12px; background: var(--field); }
.wch-item-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--text-2); margin-top: 2px; }
.wch-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--card); border: 1px solid var(--divider); border-radius: 14px; color: var(--text); text-decoration: none; }
.wch-row.off { opacity: .5; }
.wch-row.bad .wch-score { color: var(--text-2); }
.wch-row.me { border-color: var(--primary); }
.wch-rank { width: 28px; flex: none; text-align: center; font-weight: 900; }
.wch-guest { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--field); }
.wch-score { flex: none; font-weight: 900; color: var(--primary); white-space: nowrap; }

/* الإنشاء */
.wch-top { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; min-width: 0; }
.wch-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; padding: 4px; margin: 0 0 12px; background: var(--field); border-radius: 14px; }
.wch-tab { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 40px; padding: 0 6px; border: 0; border-radius: 11px;
  background: transparent; color: var(--text-2); font: inherit; font-weight: 800; font-size: clamp(12px, 3.5vw, 14px); white-space: nowrap; cursor: pointer; }
.wch-tab.on { background: var(--card); color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.wch-cats { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.wch-cats::-webkit-scrollbar { display: none; }
.wch-chip { flex: none; white-space: nowrap; padding: 7px 12px; border-radius: 99px; border: 1px solid var(--divider); background: var(--card); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.wch-chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.wch-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin-top: 8px; }
.wch-seg-b { min-width: 0; min-height: 38px; padding: 0 4px; border-radius: 11px; border: 1px solid var(--divider); background: var(--card); color: var(--text);
  font: inherit; font-weight: 800; font-size: clamp(11.5px, 3.4vw, 13.5px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.wch-seg-b.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.wch-preview { display: flex; flex-direction: column; gap: 6px; }
.wch-preview b { font-size: 16px; line-height: 1.5; }
.wch-preview-head { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 12.5px; }
.wch-preview-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.wch-preview-opts span { padding: 3px 10px; border-radius: 99px; background: var(--field); font-size: 13px; }
.wch-pick { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.wch-pick-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; text-align: start; border-radius: 14px; border: 1px solid var(--divider);
  background: var(--card); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.wch-pick-row.on { border-color: var(--primary); }
.wch-dots { flex: none; color: var(--wch-a); letter-spacing: 1px; font-size: 10px; }
.wch-opt-edit { display: flex; gap: 6px; align-items: center; }
.wch-opt-edit .input { flex: 1 1 auto; min-width: 0; }
.wch-tick { flex: none; width: 40px; height: 40px; border-radius: 12px; border: 2px solid var(--divider); background: var(--card); color: var(--text-2); font-size: 18px; font-weight: 900; cursor: pointer; }
.wch-tick.on { background: #16A34A; border-color: #16A34A; color: #fff; }
.wch-secs { display: grid; grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)); gap: 6px; }
.wch-sec { min-height: 44px; border-radius: 12px; border: 1px solid var(--divider); background: var(--card); color: var(--text); font: inherit; font-weight: 900; font-size: 16px; cursor: pointer; }
.wch-sec.on { background: linear-gradient(135deg, var(--wch-a), var(--wch-b)); border-color: transparent; color: #fff; }
.wch-taunts { display: flex; flex-direction: column; gap: 6px; }
.wch-taunt { text-align: start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--divider); background: var(--card); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.wch-taunt.on { border: 2px solid var(--wch-b); background: var(--field); font-weight: 800; }
.wch-done { text-align: center; margin: 10px 0 14px; }
.wch-done h1 { margin: 4px 0; font-size: 24px; font-weight: 900; }
.wch-done p { margin: 0; color: var(--text-2); }
.wch-confetti { font-size: 58px; animation: wch-float 2.4s ease-in-out infinite; }

/* المشاركة */
.wch-share { background: var(--card); border: 1px solid var(--divider); border-radius: 18px; padding: 12px; margin: 0 0 12px; }
.wch-share-msg { background: var(--field); border-radius: 14px; padding: 10px 12px; }
.wch-share-msg p { margin: 0 0 6px; line-height: 1.6; }
.wch-link { color: var(--primary); font-weight: 800; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wch-share-btns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin: 10px 0 12px; }
.wch-share-btns .wch-btn { width: 100%; padding: 0 6px; }

/* صفحة الرابط */
.wch-land { text-align: center; padding: 6px 0 10px; }
.wch-land-top { position: relative; display: inline-block; }
.wch-land-badge { position: absolute; bottom: -4px; inset-inline-end: -6px; width: 36px; height: 36px; display: grid; place-items: center; font-size: 20px;
  border-radius: 50%; background: linear-gradient(135deg, var(--wch-a), var(--wch-b)); border: 3px solid var(--card); }
.wch-land h1 { margin: 10px 0 6px; font-size: clamp(21px, 6.4vw, 27px); font-weight: 900; }
.wch-land-sub { margin: 8px 0 0; color: var(--text-2); font-size: 13.5px; }
.wch-bubble { display: inline-block; max-width: 100%; margin: 4px 0 8px; padding: 10px 14px; border-radius: 18px; background: var(--field); font-size: 15.5px; font-weight: 800; line-height: 1.5; }
.wch-bubble q { quotes: none; }
.wch-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; }
.wch-facts span { padding: 4px 10px; border-radius: 99px; background: var(--card); border: 1px solid var(--divider); font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.wch-info h3 { margin: 0 0 6px; font-size: 15.5px; }
.wch-info p { margin: 0 0 6px; line-height: 1.7; font-size: 14px; color: var(--text); }
.wch-howto { margin: 6px 0 0; padding-inline-start: 20px; font-size: 13.5px; line-height: 1.8; }
.wch-safe { color: var(--text-2) !important; font-size: 12.5px !important; }
.wch-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.wch-choice { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--divider); }
.wch-choice.best { border: 2px solid var(--wch-b); }
.wch-choice-ic { font-size: 30px; }
.wch-choice small { color: var(--text-2); }
.wch-choice ul { margin: 0; padding-inline-start: 18px; font-size: 13.5px; line-height: 1.8; }
.wch-choice-tag { position: absolute; top: 10px; inset-inline-end: 10px; padding: 2px 10px; border-radius: 99px; background: var(--wch-b); color: #fff; font-size: 11px; font-weight: 900; }

/* السؤال والعدّاد */
.wch-clock { position: sticky; top: 66px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 4px 0 12px;
  background: var(--card); border: 1px solid var(--divider); border-radius: 16px; }
.wch-clock b { min-width: 40px; text-align: center; font-size: 26px; font-weight: 900; color: #16A34A; }
.wch-clock-bar { flex: 1 1 auto; height: 12px; border-radius: 99px; background: var(--field); overflow: hidden; }
.wch-clock-bar i { display: block; height: 100%; width: 100%; border-radius: 99px; background: linear-gradient(90deg, #16A34A, #84CC16); transition: width .1s linear; }
.wch-clock.low b { color: #DC2626; animation: wch-pulse .6s ease-in-out infinite; }
.wch-clock.low .wch-clock-bar i { background: linear-gradient(90deg, #DC2626, #F97316); }
.wch-q { text-align: center; }
.wch-q h2 { margin: 6px 0 14px; font-size: clamp(18px, 5.4vw, 22px); font-weight: 900; line-height: 1.55; }
.wch-qemoji { width: 92px; height: 92px; margin: 0 auto 6px; display: grid; place-items: center; font-size: 48px; border-radius: 26px; background: var(--field); }
.wch-qemoji.wide { width: auto; min-width: 92px; padding: 0 16px; font-size: 40px; letter-spacing: 4px; }
.wch-qemoji.sm { width: 36px; height: 36px; margin: 0; flex: none; font-size: 18px; border-radius: 10px; }
.wch-hint { margin: 0; color: var(--text-2); font-size: 13px; }
.wch-opts { display: grid; gap: 8px; }
.wch-opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 8px 12px; text-align: start; border-radius: 16px;
  border: 2px solid var(--divider); background: var(--card); color: var(--text); font: inherit; font-size: 15.5px; font-weight: 800; cursor: pointer; }
.wch-opt:active, .wch-opt.on { border-color: var(--primary); background: var(--field); }
.wch-opt-k { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--field); color: var(--text-2); font-size: 13px; font-weight: 900; }
.wch-answer-in { text-align: center; font-size: 18px; font-weight: 800; min-height: 52px; }

/* النتيجة */
.wch-result { text-align: center; }
.wch-result.ok { border: 2px solid #16A34A; }
.wch-result.no { border: 2px solid #DC2626; }
.wch-result-ic { font-size: 56px; }
.wch-result h1 { margin: 2px 0; font-size: clamp(21px, 6vw, 26px); font-weight: 900; }
.wch-time { margin: 0; font-size: 30px; font-weight: 900; color: #16A34A; }
.wch-reveal { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--divider); }
.wch-ans { padding: 8px 12px; border-radius: 12px; font-weight: 900; }
.wch-ans.ok { background: rgba(22, 163, 74, .12); color: #16A34A; }
.wch-ans.no { background: rgba(220, 38, 38, .10); color: #DC2626; text-decoration: line-through; }
.wch-next { border: 2px solid var(--wch-a); }
.wch-next p { margin: 4px 0 6px; color: var(--text-2); font-size: 13.5px; }

@media (max-width: 380px) {
  .wch-step small { display: none; }
  .wch-hero-art { width: 52px; height: 52px; }
  .wch-hero-art span { font-size: 32px; }
  .wch-share-btns { gap: 4px; }
  .wch-btn { padding: 0 8px; }
}

/* ═══ wkt v2: «مطبخ وبيت» (فيديو، طهاة، فئات بالصور، تعليقات، مسار الإضافة) — بداية ═══ */
.wkt-hero { background: linear-gradient(135deg, color-mix(in srgb, #EA580C 18%, var(--card)), color-mix(in srgb, #F59E0B 14%, var(--card))); }
.wkt-hero-stats { display: block; margin-top: 4px; color: var(--text-2); font-weight: 700; }
.wkt-hero-cta { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.wkt-hero-cta .btn { flex: 1 1 0; justify-content: center; }
.wkt-play { position: absolute; inset: 0; margin: auto; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; font-size: 18px; pointer-events: none; }
.wkt-chef { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; cursor: pointer; color: var(--text); }
.wkt-chef.b > span { font-weight: 800; }
.wkt-chef:hover > span { color: var(--primary); }
.wkt-by .wkt-chef { color: var(--text-2); }
.wkt-hrow { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.wkt-hrow::-webkit-scrollbar { display: none; }
.wkt-catb { flex: 0 0 auto; width: 78px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: var(--text); text-align: center; min-width: 0; }
.wkt-catb small { max-width: 100%; font-weight: 700; font-size: 12px; }
.wkt-catb-img { width: 66px; height: 66px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--field); border: 2px solid var(--divider); font-size: 30px; }
.wkt-catb-img img { width: 100%; height: 100%; object-fit: cover; }
.wkt-catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 14px 8px; }
.wkt-catgrid .wkt-catb { width: auto; }
.wkt-chefchip { flex: 0 0 auto; width: 112px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 16px; background: var(--card); border: 1px solid var(--divider); text-decoration: none; color: var(--text); position: relative; min-width: 0; }
.wkt-chefchip b, .wkt-chefchip small { max-width: 100%; }
.wkt-rankn { font-weight: 900; font-size: 13px; }
.wkt-chefchip .wkt-rankn { position: absolute; top: 6px; inset-inline-start: 8px; }
.wkt-coll { flex: 0 0 auto; width: 170px; height: 110px; border-radius: 16px; overflow: hidden; position: relative; background: color-mix(in srgb, var(--primary) 14%, var(--card)); text-decoration: none; color: var(--text); display: block; }
.wkt-coll img { width: 100%; height: 100%; object-fit: cover; }
.wkt-coll-t { position: absolute; inset-inline: 0; bottom: 0; padding: 8px 10px; display: flex; flex-direction: column; background: linear-gradient(transparent, rgba(0, 0, 0, .65)); color: #fff; min-width: 0; }
.wkt-coll:not(:has(img)) .wkt-coll-t { background: none; color: var(--text); top: 0; justify-content: center; }
.wkt-collhead { border-radius: 18px; overflow: hidden; background: var(--card); border: 1px solid var(--divider); margin: 8px 0 12px; }
.wkt-collhead img { width: 100%; max-height: 220px; object-fit: cover; display: block; }
.wkt-collhead > div { padding: 12px 14px; }
.wkt-collhead h1 { margin: 0; font-size: 22px; color: var(--text); }
.wkt-collhead p { margin: 4px 0 0; color: var(--text-2); }
.wkt-board { display: flex; flex-direction: column; gap: 6px; }
.wkt-boardrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--card); border: 1px solid var(--divider); text-decoration: none; color: var(--text); min-width: 0; }
.wkt-boardrow .grow { display: flex; flex-direction: column; }
.wkt-boardrow .wkt-rankn { width: 30px; text-align: center; flex: none; }
.wkt-score { color: var(--primary); white-space: nowrap; }
.wkt-chefhead { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 18px; background: var(--card); border: 1px solid var(--divider); margin: 8px 0 10px; }
.wkt-chefhead h1 { margin: 0; font-size: clamp(19px, 5vw, 24px); color: var(--text); }
.wkt-bio { margin: 4px 0; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.wkt-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.wkt-facts.four { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 10px; }
.wkt-video { width: 100%; max-height: 70vh; border-radius: 14px; background: #000; display: block; }
.wkt-likerow { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; }
.wkt-likecount { border: 0; background: none; padding: 0; color: var(--text-2); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.wkt-likecount:empty { display: none; }
.wkt-likers { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.wkt-liker { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); min-width: 0; }
.wkt-sharesheet { display: flex; flex-direction: column; gap: 8px; }
.wkt-sharesheet .btn { justify-content: center; width: 100%; }
.wkt-wa { color: #16A34A !important; }
.wkt-comment.reply { margin-top: 8px; }
.wkt-comment.pinned { padding: 8px; border-radius: 12px; background: color-mix(in srgb, var(--primary) 7%, var(--card)); }
.wkt-pinned { display: block; color: var(--primary); font-weight: 700; }
.wkt-cacts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wkt-cact { border: 0; background: none; padding: 0; color: var(--text-2); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; }
.wkt-cact.on { color: #E11D48; }
.wkt-replybar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: var(--field); color: var(--text-2); font-size: 13px; }
.wkt-tried figcaption { display: flex; flex-direction: column; gap: 2px; }
.wkt-profchip-box:empty { display: none; }
.wkt-profchip { display: inline-flex; margin: 4px 0; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, #EA580C 12%, var(--card)); color: var(--text); text-decoration: none; font-weight: 700; font-size: 13px; white-space: nowrap; }
/* مسار «أضف وصفتك» */
.wkt-wiz-head { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin-bottom: 10px; }
.wkt-wiz-head::-webkit-scrollbar { display: none; }
.wkt-wiz-dot { flex: 1 0 58px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border: 0; border-radius: 12px; background: var(--field); color: var(--text-2); font: inherit; cursor: pointer; min-width: 0; }
.wkt-wiz-dot small { max-width: 100%; font-size: 11px; }
.wkt-wiz-dot.on { background: var(--primary); color: #fff; }
.wkt-wiz-dot.done { color: var(--primary); }
.wkt-wiz-nav { display: flex; gap: 8px; margin: 14px 0 90px; }
.wkt-wiz-nav .btn { justify-content: center; }
.wkt-bigpick { display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 10; border-radius: 18px; border: 2px dashed var(--divider); background: var(--field); color: var(--text-2); cursor: pointer; overflow: hidden; padding: 0; font: inherit; }
.wkt-bigpick > span { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 40px; }
.wkt-bigpick > span b { font-size: 15px; }
.wkt-bigpick img, .wkt-bigpick video { width: 100%; height: 100%; object-fit: cover; }
.wkt-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wkt-checklist li { padding: 8px 12px; border-radius: 12px; background: var(--field); color: var(--text); }
.wkt-check { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--divider); cursor: pointer; color: var(--text); }
.wkt-check input { margin-top: 3px; accent-color: var(--primary); }
@media (max-width: 380px) {
  .wkt-facts.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wkt-chefhead { flex-direction: column; text-align: center; }
}
/* ═══ wkt v2 — نهاية ═══ */

/* ═══ «إعدادات الإشعارات» — notif-settings.js (رموز: --card --field --divider --text --text-2 --primary) ═══ */
.nfs-intro { padding: 12px 14px; margin-bottom: 10px; }
.nfs-all { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 10px; }
.nfs-all .btn { white-space: nowrap; }
.nfs-gt { font-weight: 900; font-size: 13px; color: var(--text-2); margin: 14px 4px 6px; }
.nfs-card { overflow: hidden; }
.nfs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--divider); }
.nfs-row:last-child { border-bottom: 0; }
.nfs-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--field); color: var(--primary); }
.nfs-ic.off { color: var(--text-2); opacity: .6; }
.nfs-txt { flex: 1 1 0; min-width: 0; }
.nfs-txt b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nfs-seg { flex: 0 0 auto; display: flex; background: var(--field); border-radius: 999px; padding: 3px; }
.nfs-opt { border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: 12px; font-weight: 800; padding: 6px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.nfs-opt.on { background: var(--card); color: var(--primary); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.nfs-opt.on.off { color: #DC2626; }
.nfs-follow { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--text-2); cursor: pointer; }
.nfs-follow input { flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--primary); }
@media (max-width: 480px) {
  .nfs-row { flex-wrap: wrap; }
  .nfs-seg { width: 100%; }
  .nfs-opt { flex: 1 1 0; padding: 7px 4px; }
}

/* ═══ scb: التعليقات المشتركة (comments-block.js) — بداية ═══ */
.scb-note { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-radius: 12px; background: var(--field); color: var(--text-2); font-size: 13px; font-weight: 700; margin: 4px 0 8px; }
.scb-btn { white-space: nowrap; flex: 0 0 auto; }
.scb-mode { width: auto; max-width: 60%; padding: 6px 10px; font-size: 12px; white-space: nowrap; }
.scb .wkt-sec-head { flex-wrap: nowrap; }
/* ═══ scb — نهاية ═══ */

/* ═══ «احجز موعدك» — التقييمات الموثّقة (pro.js) ═══ */
.pbk-stars { color: #F59E0B; letter-spacing: 1px; white-space: nowrap; }
.pbk-stars .off { color: var(--divider); }
.pbk-stars.sm { font-size: 13px; }
.pbk-rate { display: flex; gap: 6px; justify-content: center; }
.pbk-star { border: 0; background: transparent; font-size: 36px; line-height: 1; color: var(--divider); cursor: pointer; padding: 2px; }
.pbk-star.on { color: #F59E0B; }
.pbk-rv-title { margin: 16px 0 8px; font-size: 16px; font-weight: 900; }
.pbk-rv-sum { display: flex; gap: 16px; align-items: center; padding: 12px; border-radius: 14px; background: var(--field); margin-bottom: 8px; }
.pbk-rv-avg { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 0 0 auto; }
.pbk-rv-avg b { font-size: 32px; font-weight: 900; color: var(--text); }
.pbk-rv-dist { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pbk-rv-bar { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.pbk-rv-bar span { width: 26px; white-space: nowrap; }
.pbk-rv-bar i { flex: 1; height: 6px; border-radius: 6px; background: var(--card); overflow: hidden; }
.pbk-rv-bar i b { display: block; height: 100%; background: #F59E0B; border-radius: 6px; }
.pbk-rv { padding: 10px 0; border-bottom: 1px solid var(--divider); display: flex; flex-direction: column; gap: 4px; }
.pbk-rv:last-child { border-bottom: 0; }
.pbk-myrv { padding: 8px 10px; border-radius: 10px; background: var(--field); display: flex; flex-direction: column; gap: 4px; }

/* «شارك الطلب» (blood.js) */
.bld-share { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.bld-share .btn { white-space: nowrap; }

/* ─── «أوسمتي» في الملف الشخصي ─────────────────────────────────────── */
.pb-list { display: flex; flex-direction: column; gap: 6px; }
.pb-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--field); color: var(--text); text-decoration: none; font-weight: 700; font-size: 14px; }
a.pb-item:hover { outline: 1px solid var(--divider); }
.pb-item.is-hidden { opacity: .55; }
.pb-emoji { font-size: 18px; line-height: 1; flex: none; }
.pb-label { flex: 1; min-width: 0; }
.pb-off { font-size: 11px; font-weight: 600; color: var(--text-2); }
.pb-hints { display: flex; flex-wrap: wrap; gap: 6px; }
.pb-hint { padding: 3px 10px; border-radius: 99px; border: 1px dashed var(--divider); font-size: 12px; color: var(--text-2); }
.id-pane { padding: 10px; border: 1px solid var(--divider); border-radius: 12px; }
.id-urow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--divider); }

/* ─── «التعليم وتقنيات المستقبل» (/study) ─────────────────────────────── */
.learn { display: flex; flex-direction: column; gap: 12px; }
.learn-head { display: flex; flex-direction: column; gap: 12px; }
.learn-title { display: flex; align-items: center; gap: 12px; }
.learn-title h1 { margin: 0; font-size: 22px; }
.learn-title-ico { font-size: 34px; line-height: 1; }
.learn-sections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.learn-sec { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 10px; border-radius: 14px; border: 1px solid var(--divider); background: var(--card); color: var(--text); cursor: pointer; font: inherit; }
.learn-sec b { font-size: 14px; }
.learn-sec-emoji { font-size: 22px; line-height: 1; }
.learn-sec.active { border-color: var(--c, var(--primary)); background: color-mix(in srgb, var(--c, var(--primary)) 12%, var(--card)); box-shadow: inset 0 0 0 1px var(--c, var(--primary)); }
@media (max-width: 560px) { .learn-sec { flex-direction: column; gap: 4px; padding: 10px 6px; } .learn-sec b { font-size: 12.5px; text-align: center; } }
.learn-intro { display: flex; align-items: center; gap: 14px; padding: 16px; border-inline-start: 4px solid var(--c, var(--primary)); flex-wrap: wrap; }
.learn-intro h2 { margin: 0 0 2px; font-size: 19px; }
.learn-intro-emoji { font-size: 40px; line-height: 1; }
.learn-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; color: var(--text-2); }
.learn-stats b { color: var(--text); }
.learn-tabs { display: flex; }
.learn-composer { display: flex; align-items: center; gap: 10px; padding: 12px 14px; width: 100%; cursor: pointer; text-align: start; font: inherit; color: var(--text); border: 1px solid var(--divider); }
.learn-composer-ico { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; background: color-mix(in srgb, var(--c, var(--primary)) 14%, var(--card)); }
.learn-chips { flex-wrap: wrap; }
.learn-mine-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
.learn-mine-item { flex: 0 0 150px; display: flex; flex-direction: column; gap: 4px; text-align: start; padding: 0; border: 1px solid var(--divider); border-radius: 12px; overflow: hidden; background: var(--card); color: var(--text); cursor: pointer; font: inherit; scroll-snap-align: start; }
.learn-mine-item img, .learn-mine-ph { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: grid; place-items: center; font-size: 28px; background: var(--field); }
.learn-mine-item b, .learn-mine-item .small { padding: 0 8px; }
.learn-mine-item .small { padding-bottom: 8px; }
.space-badge { display: inline-flex; align-items: center; margin-inline-start: 6px; padding: 1px 8px; border-radius: 99px; background: var(--field); border: 1px solid var(--divider); font-size: 11.5px; font-weight: 700; color: var(--text); text-decoration: none; }
.cp-space { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--field); }
.tile-emoji { font-size: 17px; line-height: 1; }
.space-composer .fake-input { white-space: normal; text-align: start; line-height: 1.5; } .space-composer { border-top: 3px solid var(--c, var(--primary)); }
/* «مساعد وكّل»: صورة للتحليل */
.ai-img { display: block; max-width: 220px; max-height: 220px; border-radius: 12px; margin-bottom: 4px; object-fit: cover; }
.ai-msg.me .ai-img { margin-inline-start: auto; }
.ai-preview { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-top: 1px solid var(--divider); }
.ai-preview img { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; }
.ai-attach { flex: none; }

/* ─── القوائم المنبثقة (حسابي، «…» المنشور): مسافات أقل وفاصل خفيف بين العناصر ─── */
.menu-list { padding: 4px 0; }
.menu-list button, .menu-list a { gap: 12px; padding: 7px 14px; min-height: 46px; }
.menu-list .mi { width: 32px; height: 32px; }
.menu-list .mi .ic, .menu-list .mi svg { width: 17px; height: 17px; }
.menu-list > :is(button, a) + :is(button, a) { border-top: 1px solid color-mix(in srgb, var(--divider) 65%, transparent); }
.popover { max-height: min(80vh, calc(100dvh - 80px)); }
@media (max-width: 760px) {
  /* 100vh على الجوال يشمل شريط المتصفح ⇒ آخر عنصر («حذف المنشور») كان يُقصّ تحته */
  .modal { max-height: 88vh; max-height: 88dvh; }
  .modal .menu-list { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .modal:has(.menu-list) .modal-head { padding: 8px 12px; }
}
.tip-pw { margin-top: 4px; } .tip-pw span { font-size: 13px; font-weight: 700; }
/* صندوق النشر في أقسام التعليم: أربعة أزرار متساوية في سطر (اثنان × اثنان على الجوال) */
.space-composer .composer-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 520px) { .space-composer .composer-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* منشورات الأقسام: صورة واحدة بارتفاع معقول */
.learn .media-grid.n1 .m, .learn .media-grid.n1 .m img, .learn .media-grid.n1 .m video { max-height: 460px; }

/* ─── الدردشة: أدوات الرسالة تطفو فوق الفقاعة (كانت تحجز ~210px بجانبها فتنحشر الفقاعات في النوافذ الصغيرة) ─── */
.msg { position: relative; }
.msg .tools { position: absolute; top: -30px; inset-inline-start: 34px; z-index: 3; background: var(--card); border: 1px solid var(--divider); border-radius: 999px; padding: 1px 3px; box-shadow: var(--shadow); pointer-events: none; }
.msg.me .tools { inset-inline-start: auto; inset-inline-end: 0; }
.msg:hover .tools, .msg:focus-within .tools { pointer-events: auto; }
.msg .tools .icon-btn { width: 28px; height: 28px; }
.chat-pane .msgs { padding-top: 36px; }
.msg-sys { align-self: center; max-width: 90%; margin: 6px 0; padding: 4px 12px; border-radius: 999px; background: var(--field); color: var(--text-2); font-size: 12.5px; text-align: center; }
.loc-b { min-width: 0; }
.loc-card { min-width: 0; width: 100%; }
/* حقل الكتابة: الزر لا يُقصّ في نوافذ الدردشة الصغيرة */
.chat-input .inbox { min-width: 0; }
.chat-input > .icon-btn { flex: none; }
.cdock-pane .chat-input { gap: 4px; }
.cdock-pane .chat-input .send { width: 36px; height: 36px; }
.cdock-pane .chat-input .inbox { padding: 2px 10px; }
/* تبويبات الرسائل: تمرير أفقي بدل قصّ آخرها («وكيلي») */
.chat-seg { overflow-x: auto; scrollbar-width: none; grid-auto-columns: minmax(max-content, 1fr); }
.chat-seg::-webkit-scrollbar { display: none; }
.chat-seg-btn span { overflow: visible; text-overflow: clip; }
/* «الصور والفيديو»: المربع يفتح منشوره + ⋯ لصاحب الملف (فتح/حذف الصورة/حذف المنشور) */
.ph-tile { position: relative; display: block; }
.ph-tile .ph-play, .ph-tile .ph-multi { position: absolute; display: inline-flex; align-items: center; gap: 3px; color: #fff; background: rgba(0,0,0,.55); border-radius: 999px; padding: 2px 6px; font-size: 11px; font-weight: 700; pointer-events: none; }
.ph-tile .ph-play { inset-inline-start: 6px; bottom: 6px; }
.ph-tile .ph-multi { inset-inline-end: 6px; top: 6px; }
.ph-tile .ph-menu { position: absolute; inset-inline-start: 6px; top: 6px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; opacity: 0; transition: opacity .12s; cursor: pointer; }
.ph-tile:hover .ph-menu, .ph-tile:focus-within .ph-menu { opacity: 1; }
@media (hover: none) { .ph-tile .ph-menu { opacity: 1; } }
/* «وكيلي» صفحة كاملة: المحادثات السابقة في عمود جانبي (الشاشات العريضة)، والزر/الشريط داخل المحادثة للجوال */
.wk-layout { display: block; }
.wk-side { display: none; }
@media (min-width: 900px) {
  .wk-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 12px; align-items: start; }
  .wk-side { display: flex; flex-direction: column; gap: 10px; padding: 12px; position: sticky; top: calc(var(--topbar, 56px) + 12px); max-height: calc(100vh - var(--topbar, 56px) - 40px); }
  .wk-layout .wk-chat-bar, .wk-layout .wk-chats-btn { display: none; }
}
.wk-side-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.wk-side-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; }
.wk-side-item { display: flex; align-items: center; gap: 2px; border-radius: 10px; padding: 2px 4px; }
.wk-side-item:hover { background: var(--field); }
.wk-side-item.active { background: color-mix(in srgb, var(--primary) 12%, var(--card)); }
.wk-side-open { display: flex; flex-direction: column; align-items: flex-start; text-align: start; min-width: 0; padding: 6px 4px; background: none; border: 0; color: var(--text); cursor: pointer; font: inherit; }
.wk-side-open b, .wk-side-open span { max-width: 100%; display: block; }
.wk-side-item .icon-btn { width: 28px; height: 28px; opacity: .55; }
.wk-side-item:hover .icon-btn, .wk-side-item.active .icon-btn { opacity: 1; }
@media (min-width: 900px) { .wk:not(.embedded) { max-width: 1080px; } }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; word-break: break-word; }
.cdock-pane .head .clamp-2 { font-size: 14px; }
/* إعدادات القناة/المجموعة بشكل صفحة الإعدادات: كل قسم بطاقة واحدة، وخط خفيف بين صفوفها */
.cs h4 { margin: 16px 6px 6px; font-size: 12.5px; font-weight: 800; color: var(--text-2); }
.cs .cs-row { background: var(--field); border-radius: 0; padding: 11px 12px; }
.cs .cs-row + .cs-row { border-top: 1px solid color-mix(in srgb, var(--divider) 70%, transparent); }
.cs h4 + .cs-row, .cs .cs-head + .cs-row, .cs .cs-warn + .cs-row { border-start-start-radius: 14px; border-start-end-radius: 14px; }
.cs .cs-row:has(+ h4), .cs .cs-row:last-child { border-end-start-radius: 14px; border-end-end-radius: 14px; }
.cs button.cs-row:hover { background: color-mix(in srgb, var(--primary) 7%, var(--field)); }
.cs .cs-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.cs .cs-head { background: var(--field); border-radius: 16px; padding: 16px 12px; }
.cs { gap: 0; }
/* قائمة «⋯» المنشور: معاينة المنشور أعلاها */
.pm-preview { display: flex; align-items: center; gap: 10px; padding: 10px 14px 12px; border-bottom: 1px solid var(--divider); background: var(--field); }
.pm-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; }
.pm-thumb { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; flex: none; }
.menu-list > .pm-preview + :is(button, a) { border-top: 0; }
.wjb-empty > .btn { font-size: 14.5px; flex: none; width: auto; max-width: 280px; padding: 9px 18px; }
/* «وظيفة جديدة»: بطاقات مرقّمة + زر نشر ثابت */
.wjb-form { display: flex; flex-direction: column; gap: 12px; padding-bottom: 80px; }
.wjb-form-hero { display: flex; gap: 12px; align-items: center; padding: 16px; border-radius: 18px; background: color-mix(in srgb, var(--primary) 9%, var(--card)); border: 1px solid var(--divider); }
.wjb-form-hero > span { font-size: 38px; line-height: 1; }
.wjb-form-hero .wjb-h1 { margin: 0; }
.wjb-form-hero small { color: var(--text-2); }
.wjb-fcard { background: var(--card); border: 1px solid var(--divider); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.wjb-fcard-h { display: flex; gap: 10px; align-items: center; }
.wjb-fcard-h b { font-size: 15.5px; }
.wjb-fcard-h small { display: block; color: var(--text-2); font-size: 12.5px; }
.wjb-step { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: none; }
.wjb-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px; border: 2px dashed var(--divider); border-radius: 14px; cursor: pointer; text-align: center; background: var(--field); }
.wjb-drop:hover { border-color: var(--primary); }
.wjb-drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.wjb-drop-ic { font-size: 28px; }
.wjb-drop small { color: var(--text-2); }
.wjb-urgent { padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #F59E0B 10%, var(--card)); }
.wjb-savebar { position: sticky; bottom: 0; padding: 10px 0 calc(10px + var(--safe-b, 0px)); background: linear-gradient(transparent, var(--bg) 35%); z-index: 2; }
.wjb-savebar .btn { width: 100%; }
.sec-share { display: flex; justify-content: flex-end; max-width: 1100px; margin: 0 auto 6px; } .sec-share .btn { border-radius: 999px; }
.nav-item .nav-hot { margin-inline-start: auto; font-size: 10.5px; font-weight: 800; color: #EA580C; background: color-mix(in srgb, #EA580C 12%, transparent); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }

/* «بداية المنصة»: دعوة أول تفاعل + شارة العضو الجديد */
.rr-chip.newc { color: #047857; background: color-mix(in srgb, #10B981 14%, transparent); }
.post-first { display: block; width: calc(100% - 32px); margin: 2px 16px 8px; padding: 6px 10px; border: 1px dashed var(--divider); border-radius: 10px; background: transparent; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 600; text-align: start; cursor: pointer; }
.post-first:hover { color: var(--primary); border-color: var(--primary); }

/* «إنشاء حساب» مميّز: تدرّج + لمعة تمرّ كل بضع ثوانٍ + نبضة خفيفة (يتوقف مع تقليل الحركة) */
.btn-join { position: relative; overflow: hidden; isolation: isolate; color: #fff !important; border: 0; font-weight: 800;
  background: linear-gradient(110deg, var(--primary), #8B5CF6 55%, #EC4899); box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 32%, transparent);
  animation: wk-join-pulse 2.8s ease-in-out infinite; white-space: nowrap; }
.btn-join::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.42) 50%, transparent 70%); transform: translateX(-120%);
  animation: wk-join-shine 2.8s ease-in-out infinite; }
[dir="rtl"] .btn-join::after { animation-name: wk-join-shine-rtl; }
.btn-join:hover { filter: brightness(1.06); color: #fff; }
.btn-join .join-ico { display: inline-block; margin-inline-end: 4px; animation: wk-join-spark 2.8s ease-in-out infinite; }
@keyframes wk-join-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); box-shadow: 0 6px 20px color-mix(in srgb, var(--primary) 45%, transparent); } }
@keyframes wk-join-shine { 0% { transform: translateX(-120%); } 40%, 100% { transform: translateX(120%); } }
@keyframes wk-join-shine-rtl { 0% { transform: translateX(120%); } 40%, 100% { transform: translateX(-120%); } }
@keyframes wk-join-spark { 0%, 70%, 100% { transform: rotate(0) scale(1); } 80% { transform: rotate(-15deg) scale(1.2); } 90% { transform: rotate(10deg) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .btn-join, .btn-join::after, .btn-join .join-ico { animation: none; } }

/* الفيديوهات القصيرة مثل تيك توك: قلب النقرتين، تسريع ×2، شريط تقدّم، شارة «جديد» */
.sh-heart { position: absolute; z-index: 6; font-size: 96px; line-height: 1; pointer-events: none; transform: translate(-50%, -60%) rotate(-12deg) scale(.3); animation: wk-heart .8s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes wk-heart { 0% { opacity: 0; transform: translate(-50%, -60%) rotate(-12deg) scale(.3); } 25% { opacity: 1; transform: translate(-50%, -60%) rotate(-12deg) scale(1.1); } 60% { opacity: 1; transform: translate(-50%, -60%) rotate(-12deg) scale(1); } 100% { opacity: 0; transform: translate(-50%, -120%) rotate(-12deg) scale(.9); } }
.sh-fast { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); z-index: 6; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-weight: 800; font-size: 13px; pointer-events: none; }
.sh-prog { position: absolute; inset-inline: 0; bottom: 0; z-index: 5; height: 14px; display: flex; align-items: flex-end; cursor: pointer; touch-action: none; }
.sh-prog::before { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.22); transition: height .15s; }
.sh-prog i { position: relative; display: block; height: 3px; width: 0; background: #fff; transition: height .15s; }
.sh-prog:hover::before, .sh-prog.drag::before, .sh-prog:hover i, .sh-prog.drag i { height: 6px; }
.sh-new { margin-inline-start: 4px; padding: 0 6px; border-radius: 6px; background: #FF3B5C; color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; }
@media (prefers-reduced-motion: reduce) { .sh-heart { animation-duration: .01s; } }

/* شريط الفيديوهات القصيرة في الرئيسية (سحب أفقي) */
.reels-card { padding: 12px 0; margin-bottom: 12px; }
.reels-head { display: flex; align-items: center; gap: 8px; padding: 0 14px 8px; }
.reels-head b { flex: 1; font-size: 15.5px; }
.reels-ico { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #FF3B5C, #8B5CF6); }
.reels-all { font-weight: 700; font-size: 13.5px; color: var(--primary); }
.reels-wrap { position: relative; }
.reels-track { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 14px; scrollbar-width: none; overscroll-behavior-x: contain; }
.reels-track::-webkit-scrollbar { display: none; }
.reel { position: relative; flex: 0 0 132px; height: 232px; border-radius: 14px; overflow: hidden; background: var(--field); scroll-snap-align: start; color: #fff; transition: transform .18s; }
.reel:hover { transform: translateY(-2px); }
.reel.skel { animation: wk-skel 1.2s ease-in-out infinite alternate; }
@keyframes wk-skel { from { opacity: .55; } to { opacity: 1; } }
.reel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-shade { position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.25), transparent 45%, rgba(0,0,0,.8)); }
.reel-av { position: absolute; top: 8px; inset-inline-start: 8px; border-radius: 50%; padding: 1.5px; background: #fff; display: inline-flex; }
.reel-new { position: absolute; top: 10px; inset-inline-end: 8px; }
.reel-foot { position: absolute; inset-inline: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 3px; }
.reel-txt { font-size: 12px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.reel-views { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; }
.reels-arrow { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--card); color: var(--text); box-shadow: 0 2px 10px rgba(0,0,0,.18); display: none; align-items: center; justify-content: center; cursor: pointer; }
.reels-arrow.prev { inset-inline-start: 6px; }
.reels-arrow.next { inset-inline-end: 6px; }
@media (hover: hover) and (min-width: 700px) { .reels-wrap:hover .reels-arrow { display: inline-flex; } }
/* السهم يشير لاتجاه التمرير حسب اتجاه اللغة */
.reels-arrow.prev svg { transform: scaleX(-1); }
[dir="rtl"] .reels-arrow svg { transform: scaleX(-1); }
[dir="rtl"] .reels-arrow.prev svg { transform: none; }
/* شريط «شوف واشري» في الرئيسية (نفس بطاقات شريط القصيرة + السعر) */
.shop-strip .reels-ico { background: linear-gradient(135deg, #F59E0B, #EF4444); }
.shop-strip-price { align-self: flex-start; padding: 2px 7px; border-radius: 8px; background: #F59E0B; color: #111; font-size: 11.5px; font-weight: 900; white-space: nowrap; }
.shop-strip-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,.35); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.reel-new.shop-off { background: #EF4444; }

/* زر عريض (صفحة الدخول): نبضة أخف كي لا يتجاوز حواف البطاقة */
.btn-join.btn-block { animation-name: wk-join-pulse-sm; padding-block: 12px; font-size: 15.5px; }
@keyframes wk-join-pulse-sm { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); box-shadow: 0 6px 20px color-mix(in srgb, var(--primary) 45%, transparent); } }
@media (prefers-reduced-motion: reduce) { .btn-join.btn-block { animation: none; } }

/* ─── «شوف واشري» (shop.js): عارض عمودي مثل الفيديوهات القصيرة + صفحات البائع والمشتري ─── */
.sp-wrap .sh-main { position: relative; }
.sp-top { position: absolute; top: 10px; inset-inline: 0; z-index: 6; display: flex; align-items: center; gap: 8px; padding: 0 10px; pointer-events: none; }
.sp-top > * { pointer-events: auto; }
.sp-menu { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,.45); backdrop-filter: blur(10px); }
.sp-menu .badge { top: -2px; border-color: #000; }
.sp-cats { flex: 1; min-width: 0; max-width: 680px; margin-inline: auto; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.sp-cats::-webkit-scrollbar { display: none; }
.sp-cat { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.45); backdrop-filter: blur(10px); color: rgba(255,255,255,.85); font-weight: 700; font-size: 13px; white-space: nowrap; }
.sp-cat.on { background: #fff; color: #111; }
@media (max-width: 760px) { .sp-top { top: calc(8px + env(safe-area-inset-top)); } }

.sp-stage { position: relative; }
.sp-pager { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.sp-pager::-webkit-scrollbar { display: none; }
.sp-slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.sp-slide video { width: 100%; height: 100%; object-fit: cover; cursor: pointer; display: block; }
.sp-slide-img { background: #000; display: flex; align-items: center; justify-content: center; }
.sp-slide-img img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.sp-item .mute { top: 60px; }
.sp-hint { position: absolute; top: 62px; inset-inline-start: 12px; z-index: 4; display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: 13px; font-weight: 800; transition: opacity .3s; animation: sp-nudge 1.6s ease-in-out 1s 2; }
.sp-hint.gone { opacity: 0; pointer-events: none; }
.sp-hint-arrow { display: inline-block; }
@keyframes sp-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-6px); } }
[dir="ltr"] .sp-hint { animation-name: sp-nudge-ltr; }
@keyframes sp-nudge-ltr { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
.sp-dots { position: absolute; top: 70px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; gap: 5px; pointer-events: none; }
.sp-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.45); transition: width .2s, background .2s; }
.sp-dots i.on { width: 16px; border-radius: 3px; background: #fff; }
.sp-arr { position: absolute; top: 45%; z-index: 4; width: 38px; height: 38px; border-radius: 50%; display: none; align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,.45); }
.sp-arr.prev { inset-inline-start: 8px; }
.sp-arr.next { inset-inline-end: 8px; }
[dir="rtl"] .sp-arr .ico { transform: scaleX(-1); }
[dir="rtl"] .sp-arr .ico.flip { transform: none; }
@media (hover: hover) { .sp-stage:hover .sp-arr { display: inline-flex; } }

.sp-info { pointer-events: none; padding-top: 80px; }
.sp-info > * { pointer-events: auto; }
.sp-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.sp-chips:empty { display: none; }
.sp-chip { padding: 1px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 800; line-height: 20px; background: rgba(255,255,255,.2); color: #fff; }
.sp-chip.promo { background: linear-gradient(135deg, #F59E0B, #EF4444); }
.sp-chip.out { background: #475569; }
.sp-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-size: 24px; font-weight: 900; line-height: 1.2; }
.sp-price s { font-size: 15px; font-weight: 600; opacity: .7; }
.sp-off { display: inline-block; padding: 0 6px; border-radius: 6px; background: #EF4444; color: #fff; font-size: 12.5px; font-weight: 800; line-height: 20px; }
.sp-title { display: block; width: 100%; margin-top: 2px; color: #fff; font-size: 15px; font-weight: 700; text-align: start; line-height: 1.35; max-height: 2.7em; overflow: hidden; }
.sp-seller { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: #fff; font-size: 14px; min-width: 0; max-width: 100%; }
.sp-seller .ellipsis { min-width: 0; }
.sp-store-badge { flex: none; display: inline-flex; align-items: center; padding: 0 6px; border-radius: 6px; background: var(--violet); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; }
.sp-rate { flex: none; display: inline-flex; align-items: center; gap: 2px; color: #FBBF24; font-weight: 800; font-size: 13px; }
.sp-rate small { color: inherit; opacity: .8; font-weight: 600; }
.sp-loc { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12.5px; opacity: .85; }
.sp-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sp-acts .sp-buy { flex: 1 1 100%; min-height: 42px; font-weight: 900; font-size: 15px; }
.sp-act { flex: 1 1 0; min-width: 0; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 8px; border-radius: 10px; background: rgba(255,255,255,.18); backdrop-filter: blur(8px); color: #fff; font-weight: 800; font-size: 13px; white-space: nowrap; }
.sp-act span { overflow: hidden; text-overflow: ellipsis; }
.sp-act:hover { background: rgba(255,255,255,.28); }
.sp-act.wa { background: rgba(37,211,102,.85); }
.sp-acts .btn-light { background: #fff; color: #111; }
.sp-rail button.on i { background: rgba(255,255,255,.32); }
.sp-empty { color: #fff; padding: 20px; }
.sp-empty .empty p { color: rgba(255,255,255,.85); }
.sp-side { display: none; }
@media (min-width: 1100px) {
  .sp-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; }
  .sp-side { display: block; height: calc(100vh - var(--topbar)); overflow-y: auto; padding: 18px 16px; background: #0b0b0f; color: #fff; border-inline-start: 1px solid #1f1f27; scrollbar-width: thin; }
  .sp-side .chip { background: rgba(255,255,255,.08); border-color: transparent; color: #fff; }
  .sp-side .muted, .sp-side small { color: rgba(255,255,255,.65); }
  .sp-side .sp-det-seller { background: rgba(255,255,255,.06); color: #fff; }
  .sp-rail .sp-rail-info { display: none; }
}
@media (max-width: 760px) {
  .sp-item .short-info { padding-inline-end: 72px; padding-bottom: 12px; }
  .sp-item .short-rail { bottom: 24px; gap: 12px; }
  .sp-price { font-size: 21px; }
}

/* تفاصيل المنتج (لوحة جانبية / نافذة) */
.sp-det { display: flex; flex-direction: column; gap: 12px; }
.sp-det-title { margin: 0; font-size: 19px; font-weight: 900; line-height: 1.35; }
.sp-det-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-size: 22px; font-weight: 900; }
.sp-det-price s { font-size: 14px; font-weight: 600; color: var(--text-2); }
.sp-det-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-chip-bad { color: #DC2626; }
.sp-det-desc { white-space: pre-wrap; line-height: 1.7; font-size: 14.5px; overflow-wrap: anywhere; }
.sp-det-rows { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.sp-det-rows > div { display: flex; gap: 8px; align-items: flex-start; }
.sp-det-rows .ico { flex: none; margin-top: 2px; opacity: .75; }
.sp-det-seller { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: var(--field); color: var(--text); }
[dir="rtl"] .sp-det-seller .ico.flip { transform: none; }
[dir="ltr"] .sp-det-seller .ico.flip { transform: scaleX(-1); }

/* نافذة الطلب */
.sp-order { gap: 12px; }
.sp-order-prod { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: var(--field); }
.sp-order-prod img { width: 52px; height: 68px; border-radius: 8px; object-fit: cover; background: var(--divider); flex: none; }
.sp-qty { display: flex; align-items: center; gap: 10px; font-weight: 700; flex-wrap: wrap; }
.sp-qty-n { min-width: 28px; text-align: center; font-size: 18px; }
.sp-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .sp-2col { grid-template-columns: 1fr; } }
.sp-sum { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: var(--field); font-size: 14px; }
.sp-sum > div, .sp-total { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sp-total { font-size: 17px; font-weight: 900; padding-top: 6px; border-top: 1px dashed var(--divider); }
.sp-cod { align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, #16A34A 14%, transparent); color: #15803D; font-weight: 800; font-size: 13.5px; }
.sp-done { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 6px 0; }
.sp-done h3 { margin: 0; font-size: 20px; font-weight: 900; }
.sp-done p { margin: 0; }
.sp-done .sp-total { width: 100%; max-width: 320px; }
.sp-done-e { font-size: 54px; line-height: 1; }
.sp-phone { font-size: 26px; font-weight: 900; letter-spacing: .5px; }
.sp-check { align-items: flex-start; }
.sp-check input { margin-top: 2px; }

/* صفحات (البائع، المحفوظات، الطلبات، اللوحة، النموذج) */
.sp-page { padding-bottom: 30px; }
.sp-unavail { padding: 30px 22px; text-align: center; }
.sp-unavail-e { font-size: 52px; }
.sp-unavail h2 { margin: 8px 0 4px; }
.sp-h { margin: 18px 4px 10px; font-size: 17px; font-weight: 900; }
.sp-card { padding: 14px 16px; margin-bottom: 10px; }
.sp-card.col { gap: 12px; }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.sp-tile { position: relative; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: var(--field); color: #fff; display: block; }
.sp-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-tile-shade { position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.2), transparent 40%, rgba(0,0,0,.8)); }
.sp-tile-dur { position: absolute; top: 6px; inset-inline-start: 6px; display: inline-flex; align-items: center; gap: 2px; padding: 1px 7px; border-radius: 999px; background: rgba(0,0,0,.5); font-size: 11.5px; font-weight: 800; }
.sp-tile-st { position: absolute; top: 6px; inset-inline-end: 6px; padding: 1px 7px; border-radius: 999px; background: #475569; font-size: 11px; font-weight: 800; }
.sp-tile-st.off { background: #EF4444; }
.sp-tile-st.new { background: #F59E0B; }
.sp-tile-foot { position: absolute; inset-inline: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.sp-tile-foot .sp-tile-price { max-width: 100%; padding: 2px 7px; border-radius: 8px; background: #F59E0B; color: #111; font-size: 12.5px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-tile-foot .sp-tile-t { width: 100%; }
.sp-tile-t { font-size: 12px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-tile-x { position: absolute; top: 34px; inset-inline-end: 6px; width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,.5); font-size: 15px; }
.sp-sel-head { display: flex; gap: 14px; align-items: flex-start; padding: 16px; }
.sp-sel-head h2 { font-size: 20px; font-weight: 900; }
.sp-sel-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 6px 0; }
.sp-stars { color: #F59E0B; font-weight: 800; letter-spacing: 1px; }
.sp-about { margin: 6px 0 10px; white-space: pre-wrap; line-height: 1.6; }
.sp-reviews { padding: 4px 16px; }
.sp-review { padding: 12px 0; border-bottom: 1px solid var(--divider); }
.sp-review:last-child { border-bottom: 0; }
.sp-review p { margin: 6px 0 0; line-height: 1.6; }

/* الحالات والطلبات */
.sp-list { gap: 10px; }
.sp-st { display: inline-flex; align-items: center; gap: 3px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--field); color: var(--text-2); white-space: nowrap; }
.sp-st.ok { background: color-mix(in srgb, #16A34A 15%, transparent); color: #15803D; }
.sp-st.warn { background: color-mix(in srgb, #F59E0B 18%, transparent); color: #B45309; }
.sp-st.info { background: color-mix(in srgb, #0EA5E9 15%, transparent); color: #0369A1; }
.sp-st.violet { background: color-mix(in srgb, var(--violet) 16%, transparent); color: var(--violet); }
.sp-st.bad { background: color-mix(in srgb, #EF4444 15%, transparent); color: #DC2626; }
.sp-order-card { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.sp-order-card.is-new { box-shadow: inset 3px 0 0 #0EA5E9, var(--shadow); }
.sp-o-head { display: flex; gap: 10px; align-items: center; color: var(--text); }
.sp-o-head img { width: 54px; height: 72px; border-radius: 10px; object-fit: cover; background: var(--field); flex: none; }
.sp-o-total { font-weight: 900; font-size: 16px; flex: none; }
.sp-steps { display: flex; flex-wrap: wrap; gap: 4px; }
.sp-step { flex: 1 1 0; min-width: 70px; text-align: center; padding: 5px 6px; border-radius: 8px; background: var(--field); color: var(--text-2); font-size: 12px; font-weight: 700; }
.sp-step.on { background: var(--primary-soft); color: var(--primary); }
.sp-step.cur { background: var(--primary); color: #fff; }
.sp-step.bad { background: color-mix(in srgb, #EF4444 15%, transparent); color: #DC2626; flex: none; }
.sp-note { padding: 8px 10px; border-radius: 10px; background: var(--field); font-size: 13.5px; white-space: pre-wrap; }
.sp-review-box { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; background: var(--field); }
.sp-rate-pick { display: flex; gap: 2px; }
.sp-rate-pick button { font-size: 28px; line-height: 1; color: var(--divider); padding: 2px; }
.sp-rate-pick button.on { color: #F59E0B; }
.sp-buyer { display: flex; flex-direction: column; gap: 5px; padding: 10px; border-radius: 12px; background: var(--field); font-size: 14px; }

/* لوحة البائع */
.sp-dash-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 10px; }
.sp-plan-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); cursor: pointer; }
.sp-plan-pill small { opacity: .8; }
.sp-kpis { flex: 1; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.sp-kpi { flex: 1 0 auto; min-width: 74px; display: flex; flex-direction: column; align-items: center; padding: 6px 8px; border-radius: 12px; background: var(--field); }
.sp-kpi b { font-size: 16px; font-weight: 900; }
.sp-kpi small { font-size: 11.5px; color: var(--text-2); white-space: nowrap; }
.sp-wallet { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; background: var(--field); font-weight: 800; cursor: pointer; }
.sp-tabs button { position: relative; flex: 1 0 auto; }
.sp-tab-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #EF4444; color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.sp-filter { margin: 0 0 10px; }
.sp-chip-n { margin-inline-start: 4px; color: var(--text-2); font-weight: 800; }
.sp-alert { padding: 10px 12px; border-radius: 12px; background: var(--field); margin-bottom: 10px; }
.sp-alert.bad { background: color-mix(in srgb, #EF4444 12%, transparent); color: #B91C1C; }
.sp-hintbar { padding: 9px 12px; border-radius: 12px; background: var(--primary-soft); color: var(--text); font-size: 13.5px; margin-bottom: 10px; line-height: 1.6; }
.sp-row { display: flex; gap: 12px; padding: 12px; align-items: flex-start; }
.sp-row-thumb { position: relative; flex: none; width: 76px; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: var(--field); }
.sp-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sp-row-thumb span { position: absolute; bottom: 4px; inset-inline-start: 4px; padding: 0 5px; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; font-weight: 700; }
.sp-row-title { display: block; margin: 4px 0 2px; font-size: 15px; overflow-wrap: anywhere; }
.sp-minis { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 6px 0; font-size: 12.5px; color: var(--text-2); }
.sp-mini { white-space: nowrap; }
.sp-row-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.sp-promo-now { margin: 6px 0; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, #F59E0B 12%, transparent); }
.sp-bar { height: 6px; border-radius: 3px; background: var(--divider); overflow: hidden; margin-top: 6px; }
.sp-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--primary), var(--violet)); border-radius: 3px; transition: width .3s; }
.sp-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 10px 0; }
.sp-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 12px; background: var(--field); text-align: center; }
.sp-stat b { font-size: 18px; font-weight: 900; }
.sp-stat small { font-size: 11.5px; color: var(--text-2); }
.sp-upsell { display: flex; align-items: center; gap: 12px; padding: 14px; margin: 10px 0; flex-wrap: wrap; background: var(--primary-soft); }
.sp-chart-wrap { margin: 12px 0; }
.sp-legend { display: flex; flex-wrap: wrap; gap: 12px; color: var(--text-2); margin-bottom: 6px; }
.sp-legend span { display: inline-flex; align-items: center; gap: 5px; }
.sp-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.sp-legend i.org { background: var(--primary); }
.sp-legend i.pro { background: #F59E0B; }
.sp-chart { display: flex; align-items: flex-end; gap: 3px; height: 160px; padding: 18px 0 18px; overflow-x: auto; }
.sp-col { position: relative; flex: 1 0 12px; max-width: 28px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.sp-col-bar { position: relative; width: 100%; border-radius: 4px 4px 0 0; background: var(--primary); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; min-height: 2px; }
.sp-col-bar i { display: block; width: 100%; background: #F59E0B; }
.sp-col-o { position: absolute; top: -16px; font-size: 10px; font-weight: 800; color: #16A34A; }
.sp-col-d { position: absolute; bottom: -16px; font-size: 10px; color: var(--text-2); }
.sp-promo-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--divider); }
.sp-promo-row:last-child { border-bottom: 0; }
.sp-promo-row img { width: 46px; height: 62px; border-radius: 8px; object-fit: cover; flex: none; background: var(--field); }
.sp-promo-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; font-weight: 800; }
.sp-wallet-card { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sp-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-bottom: 10px; }
.sp-plan { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 16px 16px; border: 2px solid transparent; }
.sp-plan.hl { border-color: var(--primary); }
.sp-plan.cur { border-color: #16A34A; }
.sp-plan h3 { margin: 0; font-size: 18px; font-weight: 900; display: flex; align-items: center; gap: 6px; }
.sp-plan p { margin: 0; line-height: 1.6; }
.sp-plan-hl { position: absolute; top: -11px; inset-inline-start: 14px; padding: 2px 10px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 12px; font-weight: 800; }
.sp-plan-price { font-size: 22px; font-weight: 900; }
.sp-plan-price small { font-size: 13px; font-weight: 600; color: var(--text-2); }
.sp-feats { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; flex: 1; }
.sp-cur { color: #16A34A; font-weight: 800; font-size: 13.5px; }
.sp-kinds { margin-bottom: 4px; flex-wrap: wrap; }
.sp-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.sp-pack { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border-radius: 12px; border: 2px solid var(--divider); background: var(--card); color: var(--text); }
.sp-pack b { font-size: 15px; }
.sp-pack.on { border-color: var(--primary); background: var(--primary-soft); }
.sp-pack:disabled { opacity: .5; cursor: not-allowed; }
.sp-quote { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: var(--field); min-height: 46px; }
.sp-q-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sp-q-price { font-size: 20px; font-weight: 900; color: var(--primary); }
.sp-neg { color: #DC2626; font-weight: 800; }

/* نموذج المنتج */
.sp-vbox { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.sp-vpick { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 12px; border-radius: 14px; border: 2px dashed var(--divider); background: var(--field); color: var(--text); }
.sp-vpick:hover { border-color: var(--primary); }
.sp-vprev { position: relative; width: 160px; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #000; }
.sp-vprev video { width: 100%; height: 100%; object-fit: cover; }
.sp-dur { position: absolute; top: 6px; inset-inline-start: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: 11.5px; font-weight: 800; }
.sp-imgs { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-img { position: relative; width: 92px; height: 92px; border-radius: 12px; overflow: hidden; background: var(--field); }
.sp-img img { width: 100%; height: 100%; object-fit: cover; }
.sp-img.add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 2px dashed var(--divider); color: var(--text-2); }
.sp-img-first { position: absolute; top: 4px; inset-inline-start: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.sp-img-tools { position: absolute; inset-inline: 0; bottom: 0; display: flex; justify-content: space-between; background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.sp-img-tools button { flex: 1; color: #fff; font-weight: 800; padding: 4px 0; font-size: 13px; }
.sp-mk { padding-top: 4px; }
.sp-upload { display: flex; flex-direction: column; gap: 4px; }
.sp-upload .sp-bar { height: 8px; margin: 0; }
@media (max-width: 420px) { .sp-act { padding: 0 4px; gap: 3px; font-size: 12px; } .sp-act .ico { width: 16px; height: 16px; } }

/* «شوف واشري» v2: رأس متدرّج، تبويبات كلها ظاهرة، نموذج بخطوات مرقّمة (مثل نموذج السوق) */
.sp-hero { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; margin-bottom: 10px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #FF3B5C, #8B5CF6); box-shadow: 0 6px 20px color-mix(in srgb, #FF3B5C 25%, transparent); }
.sp-hero small { color: rgba(255,255,255,.82); }
.sp-hero-top { display: flex; align-items: center; gap: 10px; }
.sp-hero-ico { flex: none; width: 42px; height: 42px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.2); }
.sp-hero-name { display: block; font-size: 17px; font-weight: 900; }
.sp-hero .sp-rate { color: #fff; font-size: 12.5px; }
.sp-hero .sp-plan-pill { flex: none; border: 0; font: inherit; background: #fff; color: #E11D48; padding: 6px 12px; font-size: 13px; }
.sp-hero .sp-plan-pill small { color: #9F1239; }
.sp-dash-hero .sp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; overflow: visible; }
.sp-dash-hero .sp-kpi { min-width: 0; border: 0; font: inherit; color: #fff; background: rgba(255,255,255,.16); padding: 8px 4px; border-radius: 12px; gap: 1px; }
.sp-dash-hero button.sp-kpi { cursor: pointer; }
.sp-dash-hero button.sp-kpi:hover { background: rgba(255,255,255,.26); }
.sp-dash-hero .sp-kpi b { font-size: 16px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-dash-hero .sp-kpi small { color: rgba(255,255,255,.8); font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* التبويبات الستة في شبكة: لا تمرير أفقي يخفي «متجري» */
.tabs.sp-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding: 4px; overflow: visible; }
.tabs.sp-tabs button { min-width: 0; padding: 9px 4px; border-radius: 12px; border-bottom: 0; font-size: 13.5px; }
.tabs.sp-tabs button.active { background: color-mix(in srgb, #FF3B5C 12%, transparent); color: #E11D48; }
.tabs.sp-tabs button span:not(.sp-tab-n) { overflow: hidden; text-overflow: ellipsis; }
.tabs.sp-tabs .sp-tab-n { position: absolute; top: 3px; inset-inline-end: 6px; }
@media (max-width: 640px) {
  .tabs.sp-tabs button { flex-direction: column; gap: 2px; font-size: 11px; padding: 8px 2px; }
}

/* بطاقة المنتج في «منتجاتي» */
.sp-row { border-radius: 18px; }
.sp-row-acts .btn { flex: 1 1 auto; justify-content: center; }
.sp-row-acts .sp-more { flex: none; background: var(--field); }

/* المتابعة (متجر/قسم) */
.sp-follow { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 6px 12px; border-radius: 999px; border: 0; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; color: #fff; background: #FF3B5C; }
.sp-follow.on { background: var(--field); color: var(--text); }
.sp-follow.dark { padding: 4px 10px; font-size: 12px; }
.sp-follow.dark.on { background: rgba(0,0,0,.45); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.sp-seller-row { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.sp-seller-row .sp-seller { margin-top: 0; min-width: 0; }
.sp-info .sp-seller-row { margin-top: 8px; }
.sp-cats .sp-follow { align-self: center; }
.sp-det-follow { display: flex; justify-content: flex-start; margin: 8px 0 4px; }

/* النموذج */
.sp-form-hero .sp-hero-name { font-size: 18px; }
.sp-pct { display: flex; align-items: center; gap: 10px; }
.sp-pct b { font-size: 12.5px; white-space: nowrap; }
.sp-pct-bar { flex: 1; height: 7px; border-radius: 99px; background: rgba(255,255,255,.25); overflow: hidden; }
.sp-pct-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: #fff; transition: width .3s; }
.sp-pct-bar i.ok { background: #4ADE80; }
.sp-step-h { display: flex; align-items: center; gap: 10px; }
.sp-step-h b { flex: 1; font-size: 15.5px; font-weight: 800; }
.sp-step-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.sp-req { padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; color: #E11D48; background: color-mix(in srgb, #E11D48 12%, transparent); }
.sp-form .sp-card { border-radius: 18px; }
.sp-form .sp-vpick { border-color: color-mix(in srgb, #E11D48 40%, transparent); background: color-mix(in srgb, #E11D48 5%, var(--card)); }
.sp-form .sp-vpick:hover { border-color: #E11D48; }
.sp-upload[hidden], .sp-mk[hidden] { display: none; }
.sp-form .sp-submit { gap: 6px; padding: 10px 14px; }
.sp-form .sp-submit { position: sticky; bottom: 10px; z-index: 5; box-shadow: 0 -4px 18px rgba(0,0,0,.08); }
.sp-form .sp-submit .btn-primary { background: #FF3B5C; border-color: #FF3B5C; min-height: 48px; font-size: 16px; font-weight: 800; }
@media (max-width: 760px) { .sp-form .sp-submit { bottom: calc(68px + env(safe-area-inset-bottom)); } }

/* شريط الإعلان: نص + زر «شارك الموقع» (يلتف على الهاتف) */
.announce { flex-wrap: wrap; }
.announce .ann-text { flex: 1 1 200px; min-width: 0; }
.announce .ann-acts { display: inline-flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.announce .ann-acts a { margin-inline-start: 0; }
.ann-share { display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; padding: 7px 14px; border-radius: 999px; font: inherit; font-weight: 800; font-size: 13.5px; color: #fff; background: var(--primary); box-shadow: 0 3px 10px color-mix(in srgb, var(--primary) 30%, transparent); white-space: nowrap; }
.ann-share:hover { filter: brightness(1.07); }
.announce.info .ann-share { background: #0369A1; }
.announce.success .ann-share { background: #15803D; }
.announce.warning .ann-share { background: #B45309; }
.ann-close { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none; border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: .65; cursor: pointer; }
.ann-close:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }

/* بطاقة الدردشة الصغيرة (الموقع): أعرض، رأس واضح، الاسم في سطر واحد */
.cdock-win { width: 360px; height: 500px; border-radius: 16px 16px 0 0; }
.cdock-pane .head { padding: 8px 10px; gap: 10px; min-height: 58px; background: var(--card); border-bottom: 1px solid var(--divider); }
.cdock-pane .head > .grow { min-width: 0; }
.cdock-pane .head .bold { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdock-pane .head .small { font-size: 12px; }
.cdock-actions { gap: 2px; margin-inline-start: auto; }
.cdock-actions .icon-btn { width: 32px; height: 32px; border-radius: 10px; }
.cdock-actions .icon-btn:hover { background: var(--primary-soft); }
.cdock-pane .msgs { background: var(--field); }
/* صف «المؤرشفة» حين فيها رسائل غير مقروءة */
.chat-archived-row { width: 100%; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; text-align: start; }
.chat-archived-row .chat-archived-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); flex: none; }

/* نافذة الدردشة العائمة على نمط ماسنجر (2026-11-01): أيقونات صغيرة بلون العلامة،
   الاسم بسهم ▾ يفتح قائمة، شريط كتابة: ميكروفون · صورة · مرفقات · «Aa» + رموز · 👍 */
.cdock-pane .head { min-height: 50px; padding: 6px 8px; gap: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.06); border-bottom: 0; }
.cdock-pane .head .icon-btn { width: 30px; height: 30px; color: var(--primary); border-radius: 50%; }
.cdock-pane .head .icon-btn:hover, .cdock-actions .icon-btn:hover { background: var(--primary-soft); }
.cdock-pane .head .icon-btn .ico { width: 18px; height: 18px; }
.cdock-actions .icon-btn { width: 30px; height: 30px; border-radius: 50%; }
.cdock-title { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; border: 0; background: none; padding: 2px 6px; margin-inline-start: -6px; border-radius: 8px; font: inherit; color: var(--text); cursor: pointer; }
.cdock-title:hover { background: var(--field); }
.cdock-title .bold { min-width: 0; }
.cdock-caret { transform: rotate(90deg); color: var(--primary); flex: none; }
.cdock-pane .head .small { font-size: 11.5px; }
.cdock-pane .msgs { background: var(--card); }
.cdock-pane .chat-input { gap: 2px; padding: 6px 6px 8px; border-top: 0; align-items: center; }
.cdock-pane .chat-input > .icon-btn { width: 32px; height: 32px; color: var(--primary); flex: none; }
.cdock-pane .chat-input > .icon-btn .ico { width: 20px; height: 20px; }
.cdock-pane .chat-input .inbox { padding: 0 4px 0 12px; border-radius: 20px; align-items: center; }
.cdock-pane .chat-input textarea { padding: 7px 0; font-size: 14px; }
.chat-input .emoji-btn { width: 30px; height: 30px; color: var(--primary); flex: none; align-self: flex-end; }
.chat-input .send.like { background: transparent; color: var(--primary); }
.chat-input .send.like:hover { background: var(--primary-soft); }
.cdock-pane .chat-input .send { width: 34px; height: 34px; }
.cdock-pane .chat-input .send.like .ico { width: 22px; height: 22px; }
.cdock-menu { display: flex; flex-direction: column; padding: 6px; }
.cdock-mi { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: 8px; font: inherit; font-size: 14.5px; color: var(--text); text-align: start; cursor: pointer; }
.cdock-mi:hover { background: var(--field); }
.cdock-mi .ico { color: var(--text-2); flex: none; }
.cdock-mi.danger, .cdock-mi.danger .ico { color: var(--danger); }
.cdock-sep { height: 1px; background: var(--divider); margin: 4px 6px; }
.emoji-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 6px; }
.emoji-grid button { border: 0; background: none; font-size: 22px; line-height: 1; padding: 6px 0; border-radius: 8px; cursor: pointer; }
.emoji-grid button:hover { background: var(--field); }

/* إعدادات المحادثة v2 (2026-11-01): نافذة أضيق، رأس بأزرار سريعة، أقسام قابلة للطيّ، صفوف مدمجة */
.modal.cs-modal { width: min(400px, calc(100vw - 24px)); max-height: min(640px, calc(100vh - 40px)); }
.cs-v2 .cs-head { background: none; padding: 4px 0 8px; gap: 2px; }
.cs-v2 .cs-head > b { font-size: 16px; max-width: 100%; margin-top: 6px; }
.cs-v2 .cs-head > .small, .cs-v2 .cs-head > small { font-size: 12px; color: var(--text-2); }
.cs-quick { display: flex; justify-content: center; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.cs-q { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: none; padding: 0; font: inherit; color: var(--text); cursor: pointer; width: 64px; }
.cs-q-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--field); color: var(--text); transition: background .15s; }
.cs-q:hover .cs-q-ic { background: var(--primary-soft); color: var(--primary); }
.cs-q.on .cs-q-ic { background: var(--primary); color: #fff; }
.cs-q small { font-size: 11.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cs-sec { border-top: 1px solid var(--divider); }
.cs-sec > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 12px 4px; font-weight: 800; font-size: 14px; cursor: pointer; user-select: none; }
.cs-sec > summary::-webkit-details-marker { display: none; }
.cs-sec > summary:hover { color: var(--primary); }
.cs-chev { transform: rotate(90deg); transition: transform .15s; color: var(--text-2); }
.cs-sec[open] .cs-chev { transform: rotate(-90deg); }
.cs-list { display: flex; flex-direction: column; padding-bottom: 8px; }
.cs-v2 .cs-list .cs-row { background: none; border: 0 !important; border-radius: 10px !important; padding: 8px 6px; gap: 10px; }
.cs-v2 .cs-list button.cs-row:hover, .cs-v2 .cs-list label.cs-row:hover { background: var(--field); }
.cs-v2 .cs-ic { width: 30px; height: 30px; border-radius: 9px; }
.cs-v2 .cs-ic .ico { width: 16px; height: 16px; }
.cs-v2 .cs-row b { font-size: 14px; font-weight: 700; }
.cs-v2 .cs-row small { font-size: 12px; line-height: 1.35; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cs-v2 .cs-row .grow { min-width: 0; }
.cs-v2 .cs-row select.input { min-width: 0; max-width: 110px; padding: 6px 8px; font-size: 13px; height: auto; }
.cs-v2 .cs-row .switch { flex: none; }

/* مكالمات الموقع (calls.js): شاشة المكالمة + شريط الرنين */
.wc { position: fixed; inset: 0; z-index: 1300; background: radial-gradient(120% 90% at 50% 0%, #1E3A8A 0%, #0B1220 60%); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.wc-remote { position: absolute; inset: 0; display: grid; grid-auto-flow: column; }
.wc-remote audio { display: none; }
.wc-remote .wc-video, .wc-remote video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.wc-local { position: absolute; bottom: 110px; inset-inline-end: 20px; width: 180px; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: #111; box-shadow: 0 8px 24px rgba(0,0,0,.4); z-index: 2; }
.wc-local video, .wc-local > div { width: 100%; height: 100%; object-fit: cover; }
.wc-local.hidden { display: none; }
.wc > .wc-top { position: absolute; top: 14px; inset-inline-start: 14px; z-index: 3; }
.wc > .wc-top .icon-btn { color: #fff; background: rgba(255,255,255,.12); }
.wc-info { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 0 16px; }
.wc.has-remote-video .wc-info { position: absolute; top: 18px; inset-inline: 0; }
.wc.has-remote-video .wc-av { display: none; }
.wc-av { padding: 4px; border-radius: 50%; background: rgba(255,255,255,.12); box-shadow: 0 0 0 10px rgba(255,255,255,.05); }
.wc:not(.live) .wc-av { animation: wcPulse 1.6s ease-in-out infinite; }
@keyframes wcPulse { 50% { box-shadow: 0 0 0 22px rgba(255,255,255,0); } }
.wc-name { font-size: 24px; font-weight: 800; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.wc-status { font-size: 15px; opacity: .85; font-variant-numeric: tabular-nums; }
.wc-bar { position: absolute; bottom: 28px; inset-inline: 0; display: flex; justify-content: center; gap: 18px; z-index: 3; }
.wc-btn { width: 58px; height: 58px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255,255,255,.16); color: #fff; cursor: pointer; transition: transform .12s, background .15s; }
.wc-btn:hover { transform: scale(1.06); background: rgba(255,255,255,.26); }
.wc-btn.off { background: #fff; color: #0B1220; }
.wc-btn.end { background: #EF4444; }
.wc-btn.end .ico { transform: rotate(135deg); }
.wc-btn.accept { background: #22C55E; animation: wcShake 1.2s ease-in-out infinite; }
@keyframes wcShake { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-12deg); } 80% { transform: rotate(12deg); } 90% { transform: rotate(-6deg); } }
/* مصغّرة: نافذة صغيرة في الزاوية، تواصل التصفح والمكالمة مستمرة */
.wc.mini { inset: auto; bottom: 20px; inset-inline-start: 20px; width: 240px; height: 300px; border-radius: 20px; box-shadow: 0 12px 32px rgba(0,0,0,.45); }
.wc.mini .wc-name { font-size: 16px; }
.wc.mini .wc-av .avatar, .wc.mini .wc-av img { width: 64px !important; height: 64px !important; }
.wc.mini .wc-local { width: 70px; bottom: 80px; inset-inline-end: 10px; }
.wc.mini .wc-bar { bottom: 14px; gap: 10px; }
.wc.mini .wc-btn { width: 44px; height: 44px; }
.wc.mini .wc-info { cursor: pointer; }
/* شريط مكالمة واردة */
.wc-ring { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 1310; width: min(440px, calc(100vw - 24px)); display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; border-radius: 20px; background: var(--card); color: var(--text); box-shadow: 0 16px 40px rgba(0,0,0,.28); border: 1px solid var(--divider); animation: wcDrop .25s ease-out; }
@keyframes wcDrop { from { transform: translate(-50%, -20px); opacity: 0; } }
.wc-ring-av { flex: none; }
.wc-ring b { font-size: 16px; }
.wc-ring-actions { display: flex; gap: 10px; flex: none; }
.wc-ring .wc-btn { width: 48px; height: 48px; }
.wc-tip { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11.5px; color: var(--primary); text-decoration: none; }
.wc-tip:hover { text-decoration: underline; }
.wc-tip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) { .wc-local { width: 110px; bottom: 104px; } .wc-btn { width: 54px; height: 54px; } }

/* سجل المكالمات في المحادثة: بطاقة بالوقت ومنذ متى ومعاودة الاتصال */
.msg-call { align-self: center; display: flex; align-items: center; gap: 10px; width: min(340px, 92%); margin: 8px 0; padding: 10px 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--divider); box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.msg-call-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.msg-call.ok .msg-call-ic { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.msg-call.miss .msg-call-ic { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.msg-call b { font-size: 13.5px; }
.msg-call.miss b { color: var(--danger); }
.msg-call small { color: var(--text-2); font-size: 11.5px; display: block; font-variant-numeric: tabular-nums; }
.msg-call .btn { flex: none; gap: 4px; }
.cdock-pane .msg-call { width: 94%; padding: 8px 10px; }
.cdock-pane .msg-call .btn { padding: 4px 8px; font-size: 12px; }

/* ═══ «البث المباشر» (live.js) — الرموز المسموحة فقط: --field --divider --text-2 --card --primary --text --primary-soft --success --danger.
   فوق الفيديو (خلفية سوداء دائماً) النصوص بيضاء بألوان ثابتة كما في الفيديوهات القصيرة. ═══ */
.lv-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 0 rgba(239, 68, 68, .6); animation: lv-pulse 1.4s infinite; flex: none; }
@keyframes lv-pulse { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .55); } 70% { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
.lv-badge { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 6px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .5px; line-height: 1.5; flex: none; }
.lv-coin { display: inline-flex; align-items: center; gap: 2px; font-weight: 800; }

/* الخلاصة */
.lv-feed { padding-bottom: 30px; display: flex; flex-direction: column; gap: 14px; }
.lv-hero { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 22px; background: var(--card); box-shadow: var(--shadow); flex-wrap: wrap; overflow: hidden; }
.lv-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--danger) 16%, transparent), transparent 55%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 55%); }
.lv-hero > * { position: relative; }
.lv-hero-txt { flex: 1; min-width: 200px; }
.lv-hero-txt h1 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 900; color: var(--text); }
.lv-hero-txt h1 .lv-badge { font-size: 13px; padding: 3px 8px; }
.lv-hero-stats { margin: 6px 0 0; display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 14px; font-weight: 700; }
.lv-hero-sub { margin: 4px 0 0; color: var(--text-2); font-size: 13.5px; }
.lv-hero-act { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lv-hero-coins { margin-inline-start: 4px; padding: 0 7px; border-radius: 999px; background: var(--card); color: var(--text); font-size: 12px; }
.lv-cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; background: linear-gradient(135deg, var(--danger), var(--primary)); color: #fff; font-weight: 900; box-shadow: 0 8px 22px color-mix(in srgb, var(--danger) 30%, transparent); }
.lv-cta:hover { filter: brightness(1.06); }
.lv-cta.back { background: var(--danger); }
.lv-cta .lv-dot { background: #fff; }
.lv-sec-head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 8px; }
.lv-sec-head h2 { margin: 0; font-size: 16px; font-weight: 900; color: var(--text); }
/* المميّز */
.lv-feat { position: relative; display: block; height: 260px; border-radius: 22px; overflow: hidden; background: #0b0b12; color: #fff; text-decoration: none; box-shadow: var(--shadow); }
.lv-feat-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.lv-feat:hover .lv-feat-bg { transform: scale(1.03); }
.lv-feat-bg.ph { display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 70% 30%, var(--primary) 0%, #0b0b12 70%); }
.lv-feat.audio .lv-feat-bg.ph { background: radial-gradient(circle at 70% 30%, var(--danger) 0%, var(--primary) 40%, #0b0b12 85%); }
.lv-feat-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.45), transparent 35%, transparent 45%, rgba(0,0,0,.85)); }
.lv-feat-top { position: absolute; top: 12px; inset-inline: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lv-feat-kicker { padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.16); backdrop-filter: blur(8px); font-size: 12px; font-weight: 900; }
.lv-feat-foot { position: absolute; bottom: 14px; inset-inline: 14px; display: flex; align-items: center; gap: 12px; }
.lv-feat-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lv-feat-title { font-size: 19px; font-weight: 900; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.lv-feat-host { font-size: 13.5px; opacity: .9; }
.lv-feat-cta { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; background: #fff; color: #111; font-weight: 900; font-size: 14px; }
.lv-feat.skel { background: var(--field); box-shadow: none; }
.lv-chip-dark { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.5); color: #fff; font-size: 12px; font-weight: 800; }
.lv-chip-dark.vs b { color: #FDE68A; font-style: italic; }
.lv-chip-dark .avatar { width: 18px !important; height: 18px !important; }
/* هالة المضيف */
.lv-halo { position: relative; display: inline-flex; border-radius: 50%; padding: 3px; background: conic-gradient(var(--danger), var(--primary), var(--danger)); flex: none; }
.lv-halo .avatar { box-shadow: 0 0 0 2px #0b0b12; }
/* شريط المتابَعين */
.lv-rings { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 4px; }
.lv-rings::-webkit-scrollbar { display: none; }
.lv-ring { flex: none; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text); text-decoration: none; }
.lv-ring-av { position: relative; display: inline-flex; padding: 3px; border-radius: 50%; background: conic-gradient(var(--danger), var(--primary), var(--danger)); }
.lv-ring-av .avatar { box-shadow: 0 0 0 2px var(--card); }
.lv-ring-av .lv-badge { position: absolute; bottom: -6px; inset-inline-start: 50%; transform: translateX(-50%); font-size: 9.5px; padding: 1px 5px; box-shadow: 0 0 0 2px var(--card); }
[dir="rtl"] .lv-ring-av .lv-badge { transform: translateX(50%); }
.lv-ring-name { max-width: 100%; font-size: 12px; font-weight: 700; }
/* التبويبات */
.lv-pills { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.lv-pills::-webkit-scrollbar { display: none; }
.lv-pill { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; background: var(--field); color: var(--text-2); font-weight: 800; font-size: 14px; border: 1px solid transparent; transition: background .15s, color .15s; }
.lv-pill:hover { color: var(--text); }
.lv-pill.active { background: var(--text); color: var(--card); }
.lv-newpill { position: sticky; top: calc(var(--topbar) + 8px); z-index: 5; align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; background: var(--primary); color: #fff; font-weight: 800; box-shadow: var(--shadow-lg); }
/* الشبكة والبطاقات */
.lv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.lv-empty { grid-column: 1 / -1; padding: 10px; }
.lv-sentinel { height: 1px; }
.lv-card { position: relative; display: block; border-radius: 18px; overflow: hidden; background: var(--card); box-shadow: var(--shadow); text-decoration: none; color: inherit; transition: transform .15s, opacity .3s; }
.lv-card:hover { transform: translateY(-3px); }
.lv-card.ended { opacity: .45; }
.lv-card-cover { position: relative; aspect-ratio: 9 / 16; background: #111; overflow: hidden; }
.lv-card-cover > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.lv-card:hover .lv-card-cover > img { transform: scale(1.04); }
.lv-card-ph { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 38%, var(--primary) 0%, #111 75%); }
.lv-card-ph.audio { background: radial-gradient(circle at 30% 20%, var(--danger) 0%, transparent 50%), radial-gradient(circle at 70% 70%, var(--primary) 0%, #0b0b12 80%); }
.lv-card-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.4), transparent 26%, transparent 50%, rgba(0,0,0,.82)); pointer-events: none; }
.lv-card-tl { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.lv-card-views { position: absolute; top: 8px; inset-inline-end: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.5); color: #fff; font-size: 12px; font-weight: 800; }
.lv-card-vs { position: absolute; top: 36px; inset-inline-start: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; border-radius: 999px; background: linear-gradient(90deg, #E11D48, #2563EB); color: #fff; font-size: 11.5px; }
.lv-card-vs b { font-style: italic; font-weight: 900; }
.lv-card-foot { position: absolute; inset-inline: 10px; bottom: 10px; z-index: 2; display: flex; flex-direction: column; gap: 5px; color: #fff; }
.lv-card-title { font-size: 14px; font-weight: 800; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.lv-card-host { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; opacity: .92; }
.lv-time { font-variant-numeric: tabular-nums; }
.lv-wave { display: inline-flex; align-items: flex-end; gap: 3px; height: 22px; }
.lv-wave i { width: 4px; height: 100%; border-radius: 2px; background: rgba(255,255,255,.85); transform-origin: bottom; animation: lv-wave 1s ease-in-out infinite alternate; }
@keyframes lv-wave { 0% { transform: scaleY(.25); } 100% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .lv-wave i { animation: none; transform: scaleY(.6); } }
/* هياكل التحميل */
.lv-card.skel .lv-card-cover, .lv-skel, .lv-feat.skel { background: linear-gradient(90deg, var(--field) 25%, var(--divider) 50%, var(--field) 75%); background-size: 200% 100%; animation: lv-shimmer 1.3s linear infinite; }
.lv-card.skel .lv-card-cover::after { display: none; }
.lv-skel { border-radius: 18px; }
@keyframes lv-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (max-width: 760px) {
  .lv-feed.main-wide, .lv-page.main-narrow { padding: 0 16px; }
  .lv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lv-hero { padding: 16px; }
  .lv-hero-txt h1 { font-size: 21px; }
  .lv-hero-act { width: 100%; }
  .lv-hero-act .lv-cta { flex: 1 1 100%; justify-content: center; }
  .lv-feat { height: 220px; }
  .lv-feat-title { font-size: 16px; }
  .lv-feat-foot .lv-halo .avatar { width: 44px !important; height: 44px !important; }
}

/* القصص: حلقة «مباشر» */
.story-card.live-ring { box-shadow: 0 0 0 2.5px var(--danger), var(--shadow); text-decoration: none; }
.story-card.live-ring .who .avatar { box-shadow: 0 0 0 2.5px var(--danger); }
.story-card .live-tag { position: absolute; top: 10px; inset-inline-end: 8px; z-index: 2; padding: 1px 6px; border-radius: 5px; background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 900; letter-spacing: .4px; }
/* الفيديوهات القصيرة: تبويب «مباشر» */
.sh-tabs .sh-live-tab .lv-dot { width: 7px; height: 7px; }

/* شاشة المشاهدة */
.lv-watch { position: relative; height: calc(100vh - var(--topbar)); height: calc(100dvh - var(--topbar)); background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #fff; }
.lv-watch.lv-off, .lv-watch .card { color: var(--text); }
.lv-watch.lv-off { background: transparent; height: auto; padding: 20px 0; }
.lv-loading, .lv-msg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center; }
.lv-msg .empty, .lv-msg .empty p { color: #fff; }
.lv-stage { position: relative; height: 100%; aspect-ratio: 9 / 16; max-width: 100%; background: #0b0b12; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: pan-x; }
.lv-main { position: absolute; inset: 0; display: flex; }
.lv-tile { position: relative; flex: 1; min-width: 0; overflow: hidden; background: #0b0b12; }
.lv-box { position: absolute; inset: 0; }
.lv-video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.lv-video.mirror { transform: scaleX(-1); }
.lv-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: rgba(255,255,255,.85); font-weight: 700; }
.lv-ph-bg { position: absolute; inset: -20px; background: radial-gradient(circle at 50% 40%, var(--primary) 0%, #0b0b12 70%) center / cover no-repeat; filter: blur(18px) brightness(.55); }
.lv-ph > :not(.lv-ph-bg) { position: relative; }
.lv-stage.in-battle .lv-main { top: 118px; bottom: 34%; gap: 2px; }
.lv-stage.in-battle .lv-tile.opp { border-inline-start: 2px solid #000; }
.lv-opp-link { position: absolute; bottom: 10px; inset-inline: 10px; z-index: 2; text-align: center; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.18); color: #fff; font-size: 12.5px; font-weight: 800; text-decoration: none; backdrop-filter: blur(6px); }
.lv-guests { position: absolute; inset-inline-end: 10px; top: 118px; z-index: 4; display: flex; flex-direction: column; gap: 8px; }
.lv-guests .lv-tile { flex: none; width: 92px; height: 132px; border-radius: 12px; border: 2px solid rgba(255,255,255,.7); cursor: pointer; }
.lv-guests .lv-tile.muted::after { content: '🔇'; position: absolute; top: 4px; inset-inline-end: 4px; font-size: 13px; }
.lv-guests .lv-ph .avatar { width: 46px !important; height: 46px !important; }
.lv-guests .lv-ph span { display: none; }
.lv-tile-name { position: absolute; bottom: 4px; inset-inline: 4px; font-size: 11px; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.lv-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,.45), transparent 22%, transparent 55%, rgba(0,0,0,.6)); z-index: 2; }

.lv-top { position: absolute; top: 10px; inset-inline: 10px; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lv-host { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 3px; padding-inline-end: 4px; border-radius: 999px; background: rgba(0,0,0,.4); backdrop-filter: blur(8px); }
.lv-host-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; max-width: 130px; }
.lv-host-txt b { font-size: 13.5px; }
.lv-likes { font-size: 11.5px; opacity: .85; display: inline-flex; align-items: center; }
.lv-follow { padding: 6px 12px; border-radius: 999px; background: var(--danger); color: #fff; font-weight: 800; font-size: 12.5px; }
.lv-top-end { display: flex; align-items: center; gap: 6px; flex: none; }
.lv-gifters { display: flex; }
.lv-gifters .avatar { margin-inline-start: -8px; box-shadow: 0 0 0 2px rgba(0,0,0,.6); }
.lv-viewers { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; background: rgba(0,0,0,.45); font-size: 12.5px; font-weight: 800; }
.lv-x { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); color: #fff; }
.lv-title { position: absolute; top: 58px; inset-inline: 12px; z-index: 6; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.lv-listeners { margin-inline-start: auto; display: inline-flex; align-items: center; font-size: 12px; opacity: .9; }

.lv-goal { position: absolute; top: 86px; inset-inline-start: 12px; z-index: 6; width: min(220px, 60%); padding: 6px 9px; border-radius: 12px; background: rgba(0,0,0,.45); backdrop-filter: blur(8px); font-size: 12px; }
.lv-goal-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.lv-goal-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.2); overflow: hidden; }
.lv-goal-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #FBBF24, #F97316); transition: width .5s ease; }
.lv-goal.done .lv-goal-bar i { background: var(--success); }
.lv-stage.has-battle .lv-goal { top: 124px; width: min(180px, 45%); }

.lv-battle { position: absolute; top: 86px; inset-inline: 0; z-index: 6; }
.lv-b-bar { display: flex; height: 26px; overflow: hidden; }
.lv-b-a, .lv-b-b { display: flex; align-items: center; padding: 0 10px; min-width: 52px; font-size: 13px; transition: width .6s ease; }
.lv-b-a { background: linear-gradient(90deg, #E11D48, #FB7185); justify-content: flex-start; }
.lv-b-b { background: linear-gradient(90deg, #60A5FA, #2563EB); justify-content: flex-end; }
.lv-b-meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 8px; font-size: 12px; font-weight: 700; }
.lv-b-name { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 38%; }
.lv-b-timer { padding: 2px 10px; border-radius: 999px; background: rgba(0,0,0,.55); font-weight: 900; }
.lv-b-win { margin: 6px auto 0; width: max-content; max-width: 90%; padding: 6px 14px; border-radius: 999px; background: rgba(0,0,0,.65); font-weight: 900; font-size: 14px; animation: lv-zoom .5s ease; }
.lv-b-win.mine { background: linear-gradient(90deg, #F59E0B, #EF4444); }
.lv-stage.in-battle .lv-title { top: 58px; }

.lv-gifts { position: absolute; inset-inline-start: 8px; bottom: 46%; z-index: 7; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.lv-g { display: flex; align-items: center; gap: 8px; padding: 3px; padding-inline-end: 10px; border-radius: 999px; background: linear-gradient(90deg, rgba(0,0,0,.65), rgba(0,0,0,.2)); animation: lv-slide .35s ease; max-width: 260px; }
.lv-g.big { background: linear-gradient(90deg, rgba(234,88,12,.85), rgba(225,29,72,.4)); }
.lv-g-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; font-size: 12px; }
.lv-g-txt b { font-size: 12.5px; }
.lv-g-ico { font-size: 28px; line-height: 1; width: 34px; height: 34px; object-fit: contain; display: inline-flex; align-items: center; justify-content: center; }
.lv-g-x { font-size: 20px; font-style: italic; color: #FDE68A; text-shadow: 0 2px 4px rgba(0,0,0,.5); }
.lv-g.pop .lv-g-x { animation: lv-zoom .3s ease; }
@keyframes lv-slide { from { transform: translateX(-40px); opacity: 0; } to { transform: none; opacity: 1; } }
[dir="rtl"] .lv-g { animation-name: lv-slide-rtl; background: linear-gradient(270deg, rgba(0,0,0,.65), rgba(0,0,0,.2)); }
[dir="rtl"] .lv-g.big { background: linear-gradient(270deg, rgba(234,88,12,.85), rgba(225,29,72,.4)); }
@keyframes lv-slide-rtl { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes lv-zoom { 0% { transform: scale(.4); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
.lv-big { position: absolute; inset: 0; z-index: 8; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.lv-big-item { display: flex; flex-direction: column; align-items: center; gap: 10px; animation: lv-big 3.6s ease forwards; }
.lv-big-emoji { font-size: 140px; line-height: 1; filter: drop-shadow(0 10px 30px rgba(0,0,0,.5)); }
img.lv-big-emoji, .lv-big-media { width: 70%; max-width: 320px; max-height: 50vh; object-fit: contain; }
.lv-big-cap { padding: 6px 14px; border-radius: 999px; background: rgba(0,0,0,.6); font-weight: 800; font-size: 14px; text-align: center; max-width: 90%; }
@keyframes lv-big { 0% { transform: scale(.2) translateY(40px); opacity: 0; } 15% { transform: scale(1.15); opacity: 1; } 25% { transform: scale(1); } 80% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.1) translateY(-40px); opacity: 0; } }

.lv-hearts { position: absolute; inset-inline-end: 0; bottom: 70px; width: 90px; height: 60%; z-index: 7; pointer-events: none; }
.lv-heart { position: absolute; bottom: 0; font-size: 30px; filter: hue-rotate(var(--hue, 0deg)); animation: lv-float 2.3s ease-out forwards; }
@keyframes lv-float { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 12% { transform: translate(0, -20px) scale(1.1); opacity: 1; } 100% { transform: translate(var(--dx, 0), -320px) scale(.8); opacity: 0; } }

.lv-bottom { position: absolute; inset-inline: 0; bottom: 0; z-index: 6; padding: 0 10px calc(10px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; }
.lv-comments { max-height: 34vh; width: min(78%, 330px); overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 5px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%); padding-top: 30px; }
.lv-comments::-webkit-scrollbar { display: none; }
.lv-c { display: flex; align-items: flex-start; gap: 6px; padding: 4px 8px; border-radius: 14px; background: rgba(0,0,0,.32); width: max-content; max-width: 100%; font-size: 13px; line-height: 1.35; cursor: pointer; animation: lv-cin .25s ease; overflow-wrap: anywhere; }
@keyframes lv-cin { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.lv-c-txt b { display: block; font-size: 12px; color: rgba(255,255,255,.75); }
.lv-c-host { margin-inline-start: 5px; padding: 0 5px; border-radius: 4px; background: var(--danger); color: #fff; font-size: 10px; }
.lv-c.k-join { background: transparent; opacity: .8; font-size: 12px; }
.lv-c.k-join .lv-c-txt b { display: inline; margin-inline-end: 4px; }
.lv-c.k-gift { background: rgba(245,158,11,.35); }
.lv-c.k-system { background: rgba(255,255,255,.14); font-weight: 700; }
.lv-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lv-input-wrap { flex: 1 1 150px; min-width: 0; display: flex; align-items: center; border-radius: 999px; background: rgba(255,255,255,.16); backdrop-filter: blur(8px); }
.lv-input { flex: 1; min-width: 0; height: 40px; padding: 0 14px; background: transparent; border: 0; outline: 0; color: #fff; font: inherit; font-size: 14px; }
.lv-input::placeholder { color: rgba(255,255,255,.7); }
.lv-input:disabled { opacity: .6; }
.lv-btns { display: flex; align-items: center; gap: 6px; flex: none; margin-inline-start: auto; }
.lv-btn { position: relative; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.16); color: #fff; backdrop-filter: blur(8px); flex: none; transition: transform .1s; }
.lv-btn:active { transform: scale(.9); }
.lv-btn.ghost { background: transparent; }
.lv-btn.off { background: rgba(239,68,68,.85); }
.lv-btn.on { background: var(--primary); }
.lv-btn.like { color: #FB7185; }
.lv-btn.gift { background: linear-gradient(135deg, #F472B6, #F59E0B); }
.lv-btn.end { width: auto; padding: 0 14px; border-radius: 999px; background: var(--danger); font-weight: 900; font-size: 13px; }
.lv-emo { font-size: 19px; line-height: 1; }
.lv-count { position: absolute; top: -3px; inset-inline-end: -3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.lv-emojis { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 6px; }
.lv-emojis button { font-size: 22px; padding: 4px; border-radius: 8px; }
.lv-emojis button:hover { background: var(--field); }

.lv-status { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.lv-status-box { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 80%; padding: 16px 18px; border-radius: 16px; background: rgba(0,0,0,.6); text-align: center; font-weight: 700; font-size: 14px; }
.lv-status-box .ico { width: 30px; height: 30px; }
.lv-unmute { position: absolute; top: 46%; inset-inline: 0; margin: 0 auto; width: max-content; z-index: 9; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: rgba(0,0,0,.7); color: #fff; font-weight: 800; }
.lv-nav { position: absolute; inset-inline-end: 24px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; }
.lv-nav .icon-btn { width: 46px; height: 46px; color: #fff; background: rgba(255,255,255,.12); }
.lv-nav .icon-btn:hover { background: rgba(255,255,255,.22); }
.lv-nav .icon-btn.down .ico { transform: rotate(180deg); }

/* غرفة صوتية */
.lv-audio { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding: 96px 14px 40%; }
.lv-audio-bg { position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, var(--primary) 0%, transparent 55%), radial-gradient(circle at 80% 80%, #DB2777 0%, transparent 50%), #0b0b12; opacity: .85; }
.lv-seats { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 10px; width: 100%; max-width: 360px; }
.lv-seat { display: flex; flex-direction: column; align-items: center; gap: 5px; color: #fff; min-width: 0; }
.lv-seat.host { grid-column: 1 / -1; }
.lv-seat-av { position: relative; border-radius: 50%; padding: 3px; box-shadow: 0 0 0 2px rgba(255,255,255,.18); transition: box-shadow .15s; display: inline-flex; }
.lv-seat.speaking .lv-seat-av { box-shadow: 0 0 0 3px var(--success), 0 0 18px 4px rgba(34,197,94,.55); animation: lv-speak 1s infinite alternate; }
@keyframes lv-speak { to { box-shadow: 0 0 0 4px var(--success), 0 0 26px 8px rgba(34,197,94,.35); } }
.lv-seats.many { grid-template-columns: repeat(4, 1fr); gap: 12px 8px; max-width: 400px; }
.lv-seats.many .lv-seat.empty .lv-seat-av { width: 60px; height: 60px; }
button.lv-seat { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
button.lv-seat:disabled { cursor: default; opacity: .7; }
.lv-seat.empty .lv-seat-av { width: 78px; height: 78px; align-items: center; justify-content: center; border: 2px dashed rgba(255,255,255,.35); box-shadow: none; color: rgba(255,255,255,.5); }
.lv-seat.empty { opacity: .8; }
.lv-seat-mute { position: absolute; bottom: 0; inset-inline-end: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--danger); display: flex; align-items: center; justify-content: center; }
.lv-seat-name { font-size: 13px; font-weight: 800; max-width: 100%; }
.lv-seat-role { font-size: 11px; opacity: .7; }
.lv-watch.audio .lv-gifts { bottom: 50%; }

/* نهاية البث */
.lv-ended { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.82); backdrop-filter: blur(10px); }
.lv-watch > .lv-ended { position: relative; inset: auto; width: 100%; height: 100%; }
.lv-ended-box { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; max-width: 360px; width: 100%; }
.lv-ended-box h2 { margin: 6px 0 0; font-size: 20px; font-weight: 900; }
.lv-ended-box p { margin: 0; opacity: .8; }
.lv-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; width: 100%; margin-top: 6px; }
.lv-stat { display: flex; flex-direction: column; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.1); }
.lv-stat b { font-size: 18px; }
.lv-stat span { font-size: 12px; opacity: .75; }
.lv-ended-act { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.lv-ended-host { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.lv-ended-host:empty { display: none; }

/* النوافذ (الهدايا، العملات، الضيوف) */
.lv-gift-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-height: 46vh; overflow-y: auto; }
.lv-gift { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 14px; border: 2px solid transparent; background: var(--field); color: var(--text); min-width: 0; transition: border-color .12s, transform .12s; }
.lv-gift:hover { transform: translateY(-1px); }
.lv-gift.active { border-color: var(--primary); background: var(--primary-soft); }
.lv-gift.premium .lv-gift-emo { filter: drop-shadow(0 0 6px rgba(245,158,11,.6)); }
.lv-gift img { width: 40px; height: 40px; object-fit: contain; }
.lv-gift-emo { font-size: 32px; line-height: 1.2; }
.lv-gift-name { font-size: 12px; font-weight: 700; max-width: 100%; }
.lv-gift-coins { font-size: 11.5px; color: var(--text-2); font-weight: 700; }
.lv-gift-foot { gap: 8px; align-items: center; flex-wrap: wrap; }
.lv-send { min-width: 130px; }
.lv-combo { margin-inline-start: 4px; font-style: italic; font-weight: 900; }
.lv-to .chip .avatar { margin-inline-start: -6px; }
.lv-sec { font-weight: 800; color: var(--text); margin-top: 6px; }
.lv-urow { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--divider); }
.lv-urow:last-child { border-bottom: 0; }
.lv-tag { margin-inline-start: 6px; padding: 1px 6px; border-radius: 6px; background: var(--primary-soft); color: var(--primary); font-size: 11px; }

/* البث — الجولة الثانية: البحث، المؤقّت، الشارات، الخانات، بطاقة المستخدم */
.lv-search { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 0 14px; border-radius: 999px; background: var(--field); color: var(--text-2); border: 1px solid transparent; transition: border-color .15s, background .15s; }
.lv-search:focus-within { border-color: var(--primary); background: var(--card); }
.lv-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; padding: 11px 0; color: var(--text); font: inherit; }
.lv-search input::-webkit-search-cancel-button { display: none; }
.lv-search-x { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--divider); color: var(--text-2); flex: none; }
.lv-elapsed { font-weight: 800; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.lv-left { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 6px; background: rgba(0,0,0,.45); color: #fff; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; flex: none; text-shadow: none; }
.lv-left.warn { background: var(--warning); color: #111; }
.lv-host-av { display: inline-flex; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; flex: none; }
.lv-host-txt { cursor: pointer; }
.lv-micoff { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-inline-start: 4px; border-radius: 50%; background: var(--danger); color: #fff; vertical-align: middle; }
.lv-micoff .ico { width: 11px; height: 11px; }
.lv-gifter { display: inline-flex; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; }
button.lv-b-name { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.lv-c-av { display: inline-flex; flex: none; cursor: pointer; }
.lv-c-txt b { cursor: pointer; }
.lv-slot { flex: none; width: 92px; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 12px; border: 2px dashed rgba(255,255,255,.6); background: rgba(0,0,0,.35); color: #fff; font-size: 12px; font-weight: 800; text-align: center; line-height: 1.2; cursor: pointer; backdrop-filter: blur(6px); }
.lv-slot.pending { border-style: solid; border-color: var(--warning); font-size: 11px; }
.lv-seat.pending .lv-seat-av { border-color: var(--warning); color: var(--warning); }
.lv-seat.pending { opacity: 1; }
.lv-brow { cursor: pointer; border-radius: 10px; }
.lv-brow:hover { background: var(--field); }
.lv-uc { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--text); padding-bottom: 4px; }
.lv-uc-av { position: relative; display: inline-flex; border-radius: 50%; padding: 3px; margin-bottom: 4px; }
.lv-uc-av.live { box-shadow: 0 0 0 3px var(--danger); }
.lv-uc-av .lv-badge { position: absolute; bottom: -8px; inset-inline-start: 50%; transform: translateX(-50%); }
[dir="rtl"] .lv-uc-av .lv-badge { transform: translateX(50%); }
.lv-uc-name { font-size: 18px; font-weight: 900; }
.lv-uc-user { color: var(--text-2); font-size: 13px; }
.lv-uc-bio { margin: 2px 0 0; max-width: 320px; color: var(--text); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.lv-uc-stats { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; max-width: 320px; margin: 6px 0; padding: 8px 0; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
.lv-uc-stat { display: flex; flex-direction: column; gap: 2px; }
.lv-uc-stat b { font-size: 16px; font-weight: 900; }
.lv-uc-stat span { color: var(--text-2); font-size: 12px; }
.lv-uc .btn-block { max-width: 320px; }
.lv-uc-act { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.lv-uc-bell.on { background: var(--primary-soft); color: var(--primary); }

/* البث — الجولة الثالثة: صفحتا «ابدأ بثاً» و«الأرباح» */
.lv-page { gap: 14px; }
.lv-sec-card { display: flex; flex-direction: column; gap: 12px; margin: 0 !important; }
.lv-sec-title { margin: 0; font-size: 16px; font-weight: 900; color: var(--text); }
.lv-prog { height: 8px; border-radius: 999px; background: var(--field); overflow: hidden; }
.lv-prog i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--danger)); transition: width .5s ease; }
.lv-tips { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; color: var(--text); }
.lv-tips li { padding: 8px 10px; border-radius: 12px; background: var(--field); line-height: 1.5; }
/* الأرباح */
.lv-earn-hero { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 22px; color: #fff; overflow: hidden; background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 55%, var(--danger))); box-shadow: 0 12px 30px color-mix(in srgb, var(--primary) 30%, transparent); }
.lv-earn-hero::after { content: '🪙'; position: absolute; inset-inline-end: -10px; bottom: -24px; font-size: 120px; opacity: .14; transform: rotate(-12deg); pointer-events: none; }
.lv-earn-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; font-weight: 700; opacity: .92; }
.lv-earn-share { padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.18); font-size: 12px; font-weight: 800; }
.lv-earn-big { font-size: 36px; font-weight: 900; line-height: 1.1; }
.lv-earn-est { font-size: 15px; font-weight: 700; opacity: .92; }
.lv-earn-min { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; font-size: 12.5px; font-weight: 700; }
.lv-earn-min .lv-prog { background: rgba(255,255,255,.22); }
.lv-earn-min .lv-prog i { background: #fff; }
.lv-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lv-kpi { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); min-width: 0; }
.lv-kpi span { font-size: 12.5px; color: var(--text-2); font-weight: 700; }
.lv-kpi b { font-size: 18px; font-weight: 900; color: var(--text); display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.lv-kpi small { color: var(--text-2); font-size: 12px; }
.lv-trend { padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 900; }
.lv-trend.up { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.lv-trend.down { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }
.lv-pay-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lv-amount { max-width: 160px; font-weight: 800; }
.lv-pay-est { color: var(--text); }
.lv-range { width: 100%; height: 6px; -webkit-appearance: none; appearance: none; border-radius: 999px; background: linear-gradient(to right, var(--primary) var(--p, 100%), var(--field) var(--p, 100%)); outline: none; }
[dir="rtl"] .lv-range { background: linear-gradient(to left, var(--primary) var(--p, 100%), var(--field) var(--p, 100%)); }
.lv-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--card); border: 3px solid var(--primary); cursor: pointer; }
.lv-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--card); border: 3px solid var(--primary); cursor: pointer; }
.lv-range:disabled { opacity: .5; }
.lv-explain { margin: 0; padding-inline-start: 18px; color: var(--text-2); font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.lv-chart { position: relative; }
.lv-chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.lv-chart-grid { stroke: var(--divider); stroke-width: 1; }
.lv-chart-lbl { fill: var(--text-2); font-size: 13px; font-family: inherit; }
.lv-chart-bar { fill: var(--primary); opacity: .85; transition: opacity .15s; }
.lv-chart-bar.zero { fill: var(--divider); }
.lv-chart-bar.today { fill: var(--danger); }
.lv-chart-bar.on { opacity: 1; fill: var(--danger); }
.lv-chart-hit { fill: transparent; cursor: pointer; }
.lv-chart-tip { position: absolute; transform: translate(-50%, -115%); display: flex; flex-direction: column; align-items: center; padding: 5px 10px; border-radius: 10px; background: var(--text); color: var(--card); font-size: 12px; white-space: nowrap; pointer-events: none; z-index: 2; }
.lv-chart-tip b { font-size: 13px; }
.lv-chart-sum { font-size: 20px; color: var(--text); }
.lv-sup-list { display: flex; flex-direction: column; }
.lv-sup { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border: 0; border-bottom: 1px solid var(--divider); background: none; color: var(--text); text-align: start; font: inherit; cursor: pointer; border-radius: 10px; }
.lv-sup:last-child { border-bottom: 0; }
.lv-sup:hover { background: var(--field); }
.lv-rank { width: 26px; text-align: center; font-weight: 900; color: var(--text-2); flex: none; }
.lv-sup-txt { display: flex; flex-direction: column; min-width: 0; }
.lv-cstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lv-cstat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border-radius: 16px; background: var(--field); text-align: center; min-width: 0; }
.lv-cstat-ico { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--primary); margin-bottom: 4px; }
.lv-cstat b { font-size: 17px; font-weight: 900; color: var(--text); }
.lv-cstat > span:last-child { font-size: 12px; color: var(--text-2); }
.lv-hist { display: flex; flex-direction: column; }
.lv-hico { width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--primary-soft); flex: none; font-size: 18px; }
.lv-hico.audio { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.lv-note { display: block; margin-top: 3px; color: var(--text-2); }
.lv-st.pending { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }
.lv-empty-mini { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px; }
.lv-empty-mini p { margin: 0; }
@media (max-width: 560px) {
  .lv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lv-kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .lv-cstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lv-earn-big { font-size: 30px; }
}
/* ابدأ بثاً */
.lv-go { padding-bottom: 120px; }
.lv-step { display: flex; flex-direction: column; gap: 12px; margin: 0 !important; }
.lv-step-head { display: flex; align-items: center; gap: 10px; }
.lv-step-head h2 { margin: 0; font-size: 16px; font-weight: 900; color: var(--text); }
.lv-step-n { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; font-weight: 900; font-size: 14px; flex: none; }
.lv-sub { font-weight: 800; font-size: 13.5px; color: var(--text); }
.lv-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lv-kind { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border-radius: 18px; border: 2px solid var(--divider); background: var(--card); color: var(--text); text-align: start; transition: border-color .15s, background .15s, transform .15s; }
.lv-kind:hover { transform: translateY(-1px); }
.lv-kind small { color: var(--text-2); font-size: 12.5px; line-height: 1.4; }
.lv-kind.active { border-color: var(--primary); background: var(--primary-soft); }
.lv-kind-ico { width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--field); color: var(--primary); }
.lv-kind.active .lv-kind-ico { background: var(--primary); color: #fff; }
.lv-prev { max-height: 56vh; border-radius: 20px; }
.lv-prev-tag { position: absolute; top: 10px; inset-inline-start: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 800; }
.lv-prev-btn { position: absolute; top: 10px; inset-inline-end: 10px; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(0,0,0,.5); color: #fff; }
.lv-prev-btn.on { background: #fff; color: #111; }
.lv-prev-msg { top: 54px; }
.lv-prev-av { display: inline-flex; border-radius: 50%; padding: 4px; background: conic-gradient(var(--danger), var(--primary), var(--danger)); transform: scale(calc(1 + var(--lvl, 0) * .12)); transition: transform .08s linear; box-shadow: 0 0 calc(var(--lvl, 0) * 40px) color-mix(in srgb, var(--success) 70%, transparent); }
.lv-prev-audio .lv-wave i { animation-duration: .7s; }
.lv-field { gap: 4px; }
.lv-field > span { font-size: 12.5px; color: var(--text-2); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.lv-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lv-check { display: flex; align-items: flex-start; gap: 8px; padding: 10px; border-radius: 14px; background: var(--field); color: var(--text); font-weight: 700; font-size: 13px; min-width: 0; }
.lv-check small { display: block; font-weight: 500; color: var(--text-2); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-check .grow { min-width: 0; }
.lv-check-ico { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 12px; font-weight: 900; background: var(--divider); color: var(--text-2); }
.lv-check.ok .lv-check-ico { background: var(--success); color: #fff; }
.lv-check.bad .lv-check-ico { background: var(--warning); color: #111; }
.lv-title-row { display: flex; gap: 12px; align-items: stretch; }
.lv-cover { position: relative; flex: none; width: 84px; aspect-ratio: 3 / 4; border-radius: 14px; border: 2px dashed var(--divider); background: var(--field); color: var(--text-2); overflow: hidden; padding: 0; display: flex; align-items: center; justify-content: center; }
.lv-cover:hover { border-color: var(--primary); }
.lv-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lv-cover-ph { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px; font-size: 11px; text-align: center; }
.lv-cover-rm { position: absolute; top: 4px; inset-inline-end: 4px; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(0,0,0,.6); color: #fff; }
.lv-cover .lv-prog { position: absolute; inset-inline: 6px; bottom: 6px; height: 5px; }
.lv-field-head { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--text-2); font-weight: 700; }
.lv-count-txt { font-variant-numeric: tabular-nums; }
.lv-quick .chip { cursor: pointer; }
.lv-toggle { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--field); cursor: pointer; color: var(--text); }
.lv-toggle small { display: block; color: var(--text-2); font-size: 12px; }
.lv-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.lv-sw { position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--divider); transition: background .15s; }
.lv-sw::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: inset-inline-start .15s; }
.lv-toggle input:checked + .lv-sw { background: var(--primary); }
.lv-toggle input:checked + .lv-sw::after { inset-inline-start: 21px; }
.lv-toggle input:disabled + .lv-sw { opacity: .5; }
.lv-toggle input:focus-visible + .lv-sw { outline: 2px solid var(--primary); outline-offset: 2px; }
.lv-goal-form { display: grid; grid-template-columns: 130px 1fr; gap: 8px; }
.lv-rules { display: flex; flex-direction: column; gap: 10px; margin: 0 !important; }
.lv-rules-head { display: flex; align-items: center; gap: 10px; }
.lv-rules-head b { display: block; margin: 0; font-size: 15.5px; }
.lv-rules-ico { font-size: 26px; flex: none; }
.lv-rules .lv-rule-list { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; color: var(--text); }
.lv-rules-more summary { cursor: pointer; color: var(--primary); font-weight: 700; font-size: 13.5px; margin-bottom: 8px; }
.lv-rule { display: flex; flex-direction: column; gap: 5px; }
.lv-rule-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; }
.lv-rule-head b { margin: 0; display: inline; font-variant-numeric: tabular-nums; color: var(--text-2); }
.lv-rule-ico { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; background: var(--divider); color: var(--text-2); flex: none; }
.lv-rule.ok .lv-rule-ico { background: var(--success); color: #fff; }
.lv-rule.ok .lv-prog i { background: var(--success); }
.lv-rule.flag .lv-prog, .lv-rule.flag + .lv-prog { display: none; }
.lv-rule-mode { margin: -4px 0 0; }
.lv-go-tips { display: flex; flex-direction: column; gap: 10px; margin: 0 !important; color: var(--text); }
.lv-go-bar { position: sticky; bottom: 12px; z-index: 6; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow-lg); border: 1px solid var(--divider); }
.lv-go-bar p { margin: 0; flex: 1; min-width: 0; }
.lv-go-bar .lv-start { width: auto; flex: none; padding: 13px 26px; border-radius: 999px; font-size: 16px; font-weight: 900; background: linear-gradient(135deg, var(--danger), var(--primary)); color: #fff; }
.lv-go-bar .lv-start .lv-dot { background: #fff; }
.lv-cd { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(0,0,0,.72); backdrop-filter: blur(6px); color: #fff; font-weight: 800; }
.lv-cd-n { font-size: 120px; line-height: 1; font-weight: 900; text-shadow: 0 6px 30px color-mix(in srgb, var(--danger) 60%, transparent); }
.lv-cd-n.pop { animation: lv-zoom .45s ease; }
@media (max-width: 760px) {
  .lv-go-bar { bottom: calc(var(--bottomnav) + var(--safe-b) + 8px); flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; }
  .lv-go-bar p { font-size: 11.5px; text-align: center; }
  .lv-go-bar .lv-start { width: 100%; justify-content: center; }
  .lv-checks { grid-template-columns: 1fr; }
  .lv-go { padding-bottom: 40px; }
}
@media (max-width: 420px) {
  .lv-kinds { gap: 8px; }
  .lv-kind { padding: 12px; }
  .lv-goal-form { grid-template-columns: 1fr; }
}
/* البث — الإشراف */
.lv-head-act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.lv-modbadge { margin-inline-start: 4px; font-size: 11px; }
.lv-modchip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--success) 80%, #000); color: #fff; font-size: 11px; font-weight: 900; flex: none; text-shadow: none; }
.lv-input.muted { opacity: .75; font-size: 12px; }
.lv-input.muted::placeholder { color: #FCA5A5; }
.lv-ban-days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lv-ban-days .chip { justify-content: center; }
.lv-ban-days .chip.active { background: var(--danger); color: #fff; }
.lv-pick-list { display: flex; flex-direction: column; max-height: 55vh; overflow-y: auto; }
.lv-pick { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border: 0; border-bottom: 1px solid var(--divider); background: none; color: var(--text); font: inherit; text-align: start; border-radius: 10px; cursor: pointer; }
.lv-pick:hover { background: var(--field); }
.lv-pick .ico { color: var(--primary); }
.lv-mod { display: flex; flex-direction: column; gap: 14px; }
.lv-mod-intro { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--primary-soft); color: var(--text); }
.lv-mod-intro p { margin: 0; font-weight: 700; line-height: 1.5; font-size: 14px; }
.lv-mod-ico { font-size: 30px; flex: none; }
.lv-mod-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lv-mod-head .lv-sec-title { flex: 1; min-width: 0; }
.lv-mod-count { padding: 2px 9px; border-radius: 999px; background: var(--field); color: var(--text-2); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lv-mod-list { display: flex; flex-direction: column; }
.lv-mod-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--divider); }
.lv-mod-row:last-child { border-bottom: 0; }
.lv-mod-u { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.lv-mod-u small { display: block; overflow-wrap: anywhere; }
.lv-mod-reason { display: block; margin-top: 2px; color: var(--text); }
.lv-mod-empty { margin: 0; font-size: 13.5px; }
.lv-modpage { padding-bottom: 30px; }
.modal .lv-mod .lv-sec-card { box-shadow: none; border: 1px solid var(--divider); }
@media (max-width: 560px) { .lv-page-head { flex-wrap: wrap; } }
/* البث — التذاكر (البث المدفوع) والحصص المباشرة (فضاء التعليم) */
.lv-tix-price { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; background: linear-gradient(135deg, #F59E0B, #EA580C); color: #fff; font-size: 11.5px; font-weight: 900; text-shadow: none; white-space: nowrap; }
.lv-tix-price.free { background: var(--success); }
.lv-edu-tag { align-self: flex-start; max-width: 100%; display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); color: #fff; font-size: 11px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-edu-chip, .lv-tix-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 900; flex: none; text-shadow: none; color: #fff; }
.lv-edu-chip { background: color-mix(in srgb, var(--primary) 85%, #000); }
.lv-tix-chip { background: linear-gradient(135deg, #F59E0B, #EA580C); }
/* معاينة البث المدفوع + القفل */
.lv-tix-prev { position: absolute; top: 92px; inset-inline: 0; margin: 0 auto; width: max-content; max-width: calc(100% - 24px); z-index: 7; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 999px; background: rgba(0,0,0,.62); backdrop-filter: blur(8px); color: #fff; font-size: 13px; font-weight: 800; }
[dir="rtl"] .lv-tix-prev { padding: 6px 12px 6px 6px; }
.lv-tix-prev b { font-variant-numeric: tabular-nums; color: #FDE68A; }
.lv-tix-prev-btn { padding: 5px 12px; border-radius: 999px; background: linear-gradient(135deg, #F59E0B, #EA580C); color: #fff; font-weight: 900; font-size: 12.5px; }
.lv-tix-lock { position: absolute; inset: 54px 0 0; z-index: 8; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(8,8,14,.72); backdrop-filter: blur(14px); }
.lv-tix-box { width: min(340px, 100%); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 18px 16px; border-radius: 24px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff; text-align: center; }
.lv-tix-ico { font-size: 26px; line-height: 1; }
.lv-tix-title { font-size: 16px; font-weight: 900; max-width: 100%; overflow-wrap: anywhere; }
.lv-tix-box .lv-edu-tag { align-self: center; }
.lv-tix-amount { font-size: 30px; font-weight: 900; color: #FDE68A; }
.lv-tix-sub { margin: 0; font-size: 13px; opacity: .85; line-height: 1.5; }
.lv-tix-buy { margin-top: 4px; padding: 12px 16px; border-radius: 999px; background: linear-gradient(135deg, #F59E0B, #EA580C); color: #fff; font-weight: 900; font-size: 15px; }
.lv-tix-buy.wait, .lv-tix-buy:disabled { background: rgba(255,255,255,.16); opacity: 1; }
.lv-tix-note { font-size: 12px; opacity: .85; }
.lv-tix-note.short { color: #FCA5A5; opacity: 1; font-weight: 800; }
.lv-tix-coins { background: rgba(255,255,255,.14); color: #fff; border-radius: 999px; }
.lv-tix-more { color: #fff; opacity: .75; font-size: 12.5px; text-decoration: underline; }
/* إعداد السعر في الاستوديو */
.lv-tix-form { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px; border: 1px dashed var(--divider); }
.lv-tix-form-row { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--text); }
.lv-tix-in { max-width: 140px; font-weight: 800; }
/* صفحة طلبات الوليّ */
.lv-tix-req { display: flex; flex-direction: column; gap: 10px; margin: 0 !important; }
.lv-tix-req-who { display: flex; align-items: center; gap: 10px; color: var(--text); }
.lv-tix-req-coins { color: var(--text); font-size: 17px; white-space: nowrap; }
.lv-tix-req-live { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: var(--field); color: var(--text); text-decoration: none; }
.lv-tix-req-act { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
/* /study/live */
.lv-edu-hero::before { background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 55%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--success) 16%, transparent), transparent 55%); }
.lv-edu-hero-ico { font-size: 26px; }
.lv-cta.soft { background: var(--primary-soft); color: var(--primary); box-shadow: none; }
.lv-edu-status { display: flex; align-items: center; gap: 12px; margin: 0 !important; color: var(--text); }
.lv-edu-status.pending { border-inline-start: 4px solid var(--warning); }
.lv-edu-status.rejected { border-inline-start: 4px solid var(--danger); flex-wrap: wrap; }
.lv-edu-status b { display: block; }
.lv-edu-status-ico { font-size: 28px; flex: none; }
.lv-edu-note { display: block; margin-top: 4px; color: var(--text); white-space: pre-wrap; }
.lv-edu-filters { display: flex; flex-direction: column; gap: 10px; }
.lv-edu-frow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lv-edu-frow .lv-search { margin: 0; min-width: 200px; flex: 1; }
.lv-edu-level { width: auto; min-width: 160px; max-width: 100%; border-radius: 999px; }
.lv-edu-chips.wrap { flex-wrap: wrap; overflow: visible; }
.lv-edu-teachers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.lv-edu-teachers-grid > .lv-empty { grid-column: 1 / -1; }
.lv-edu-teacher { display: flex; align-items: center; gap: 8px; padding: 12px; margin: 0 !important; }
.lv-edu-teacher-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
/* شريط «مباشر الآن» في أقسام التعليم */
.lv-edu-strip { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; padding: 12px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); }
.lv-edu-strip-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text); }
.lv-edu-strip-head b { display: inline-flex; align-items: center; gap: 4px; font-size: 14.5px; }
.lv-edu-strip-head a { color: var(--primary); font-weight: 800; font-size: 13px; text-decoration: none; flex: none; }
.lv-edu-strip-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.lv-edu-strip-row::-webkit-scrollbar { display: none; }
.lv-edu-mini { flex: none; width: 220px; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; background: var(--field); color: var(--text); text-decoration: none; }
.lv-edu-mini-av { position: relative; flex: none; display: inline-flex; }
.lv-edu-mini-av .lv-badge { position: absolute; bottom: -5px; inset-inline-start: 50%; transform: translateX(-50%); font-size: 9px; padding: 0 4px; }
[dir="rtl"] .lv-edu-mini-av .lv-badge { transform: translateX(50%); }
.lv-edu-mini-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lv-edu-mini-txt b { font-size: 13.5px; }
.lv-edu-mini-txt small { color: var(--text-2); font-size: 12px; }
.lv-edu-mini-meta { display: inline-flex; align-items: center; gap: 3px; color: var(--text-2); font-size: 12px; }
/* استوديو الأستاذ + نموذج الطلب */
.lv-edu-join { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0 !important; color: var(--text); }
.lv-edu-tracks { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.lv-edu-tracks .lv-kind { align-items: center; text-align: center; }
.lv-edu-emo { font-size: 22px; }
.lv-edu-apply .chips { flex-wrap: wrap; }
@media (max-width: 560px) {
  .lv-edu-frow .lv-search { min-width: 0; flex-basis: 100%; }
  .lv-edu-level { flex: 1 1 100%; }
  .lv-edu-teachers-grid { grid-template-columns: 1fr; }
  .lv-edu-mini { width: 200px; }
}
/* البث — تسجيل الحصص (lv-rec-*) والحماية من تسجيل الشاشة (lv-wm-*) */
.lv-rec-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .5px; flex: none; text-shadow: none; }
.lv-rec-badge.failed { background: color-mix(in srgb, var(--danger) 80%, #000); letter-spacing: 0; }
.lv-rec-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); animation: lv-rec-blink 1.2s steps(2, start) infinite; flex: none; }
@keyframes lv-rec-blink { to { visibility: hidden; } }
.lv-rec-note { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.1); font-size: 13px; font-weight: 700; text-align: start; }
.lv-rec-link { background: #fff; color: #111; flex: none; }
/* «تسجيلاتي» */
.lv-rec-card { display: flex; flex-direction: column; gap: 10px; margin: 0 !important; color: var(--text); }
.lv-rec-top { display: flex; gap: 12px; align-items: flex-start; }
.lv-rec-thumb { position: relative; flex: none; width: 112px; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--field); display: flex; align-items: center; justify-content: center; font-size: 28px; }
.lv-rec-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lv-rec-dur { position: absolute; bottom: 4px; inset-inline-end: 4px; padding: 0 5px; border-radius: 5px; background: rgba(0,0,0,.7); color: #fff; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lv-rec-title { display: block; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.lv-rec-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; font-size: 12.5px; }
.lv-rec-st { padding: 1px 8px; border-radius: 999px; background: var(--field); color: var(--text-2); font-weight: 800; }
.lv-rec-st.st-ready { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.lv-rec-st.st-published { background: var(--primary-soft); color: var(--primary); }
.lv-rec-st.st-recording, .lv-rec-st.st-failed { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }
.lv-rec-st.st-processing, .lv-rec-st.st-review { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }
.lv-rec-left { display: block; margin-top: 4px; color: var(--warning); font-weight: 800; }
.lv-rec-err { display: block; margin-top: 4px; color: var(--danger); }
.lv-rec-player { border-radius: 14px; overflow: hidden; background: #000; }
.lv-rec-video { display: block; width: 100%; max-height: 60vh; }
.lv-rec-act { display: flex; flex-wrap: wrap; gap: 8px; }
.lv-rec-del { color: var(--danger); }
.lv-rec-pub .row { flex-wrap: nowrap; }
.lv-rec-price { flex: 1; min-width: 0; }
.lv-rec-cur { width: 84px; flex: none; text-transform: uppercase; }
.lv-rec-acc { display: flex; flex-wrap: wrap; gap: 8px; }
.lv-rec-sum { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--field); color: var(--text); font-size: 13.5px; line-height: 1.5; }
@media (max-width: 420px) { .lv-rec-thumb { width: 88px; } }
/* الحماية: الشارة + العلامة المائية المتحرّكة + بطاقة «التطبيق فقط» */
.lv-wm-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.45); color: #fff; font-size: 11px; font-weight: 800; flex: none; text-shadow: none; }
.lv-wm-layer { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; user-select: none; -webkit-user-select: none; }
.lv-wm-mark { position: absolute; padding: 2px 8px; border-radius: 6px; color: rgba(255,255,255,.42); font-size: 14px; font-weight: 800; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.45); transition: left 1.2s ease, top 1.2s ease, transform 1.2s ease; }
.lv-wm-mark.faint { color: rgba(255,255,255,.16); font-size: 12px; transition: none; }
.lv-wm-mark.faint.a { top: 30%; left: 10%; transform: rotate(-18deg); }
.lv-wm-mark.faint.b { top: 66%; left: 48%; transform: rotate(-18deg); }
.lv-wm-pick { display: flex; flex-direction: column; gap: 8px; }
.lv-wm-opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 2px solid var(--divider); background: var(--card); color: var(--text); text-align: start; font: inherit; cursor: pointer; }
.lv-wm-opt.active { border-color: var(--primary); background: var(--primary-soft); }
.lv-wm-opt b { display: block; font-size: 14px; }
.lv-wm-opt small { display: block; color: var(--text-2); font-size: 12px; line-height: 1.45; }
.lv-wm-opt-ico { font-size: 20px; line-height: 1.2; flex: none; }
.lv-wm-apponly { min-height: 70vh; max-width: 420px; margin: 0 auto; color: #fff; }
.lv-wm-apponly h2 { margin: 0; font-size: 19px; }
.lv-wm-apponly p { margin: 0; opacity: .85; line-height: 1.6; }
.lv-wm-apponly-ico { font-size: 44px; }
.lv-watch.lv-off .lv-wm-apponly { color: var(--text); }
.lv-wm-stores { gap: 8px; justify-content: center; flex-wrap: wrap; }
.lv-balance { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--primary-soft); color: var(--text); flex-wrap: wrap; }
.lv-balance > div { display: flex; flex-direction: column; gap: 2px; }
.lv-balance b { font-size: 22px; font-weight: 900; }
.lv-balance .lv-wallet b { font-size: 16px; }
.lv-balance .small { color: var(--text-2); }
.lv-pkgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.lv-pkg { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border-radius: 16px; border: 1.5px solid var(--divider); background: var(--card); color: var(--text); transition: border-color .12s, transform .12s; }
.lv-pkg:hover { border-color: var(--primary); transform: translateY(-1px); }
.lv-pkg-c { font-size: 20px; font-weight: 900; }
.lv-pkg-b { font-size: 12px; color: var(--success); font-weight: 800; min-height: 16px; }
.lv-pkg-p { margin-top: 4px; padding: 4px 12px; border-radius: 999px; background: var(--primary); color: #fff; font-weight: 800; font-size: 13px; }
.lv-pkg-p.short { background: var(--field); color: var(--text-2); }

/* الصفحات: العملات، الأرباح، الاستوديو */
.lv-page { display: flex; flex-direction: column; gap: 12px; padding-bottom: 30px; }
.lv-page-head { display: flex; align-items: center; gap: 10px; }
.lv-page-head h1 { flex: 1; margin: 0; font-size: 21px; font-weight: 900; color: var(--text); }
.lv-earn-cards { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; }
.lv-earn { display: flex; flex-direction: column; gap: 4px; padding: 14px; margin: 0 !important; }
.lv-earn span { font-size: 12.5px; color: var(--text-2); }
.lv-earn b { font-size: 19px; font-weight: 900; color: var(--text); }
.lv-earn small { color: var(--text-2); }
.lv-earn.main { background: var(--primary); }
.lv-earn.main span, .lv-earn.main b, .lv-earn.main small { color: #fff; }
@media (max-width: 560px) { .lv-earn-cards { grid-template-columns: 1fr 1fr; } .lv-earn.main { grid-column: 1 / -1; } }
.lv-hrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--divider); color: var(--text); text-decoration: none; }
.lv-hrow:last-child { border-bottom: 0; }
.lv-hrow a { color: var(--text); text-decoration: none; }
.lv-plus { color: var(--success); }
.lv-st { padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--field); color: var(--text-2); flex: none; }
.lv-st.paid, .lv-st.credited, .lv-st.approved { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.lv-st.rejected { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }
.lv-rules b { display: block; margin-bottom: 6px; color: var(--text); }
.lv-rules.no { border-inline-start: 4px solid var(--danger); }
.lv-rules.ok { border-inline-start: 4px solid var(--success); }
.lv-reasons { margin: 6px 0; padding-inline-start: 20px; color: var(--danger); font-weight: 700; display: flex; flex-direction: column; gap: 4px; }
.lv-rule-list { margin: 6px 0 0; padding-inline-start: 20px; color: var(--text-2); display: flex; flex-direction: column; gap: 3px; }
.lv-rules summary { cursor: pointer; color: var(--primary); font-weight: 700; margin-top: 6px; }
.lv-prev { position: relative; aspect-ratio: 3 / 4; max-height: 52vh; width: 100%; border-radius: 16px; overflow: hidden; background: #0b0b12; margin: 0 auto; }
.lv-prev-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lv-prev-video.mirror { transform: scaleX(-1); }
.lv-prev-audio { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #fff; background: radial-gradient(circle at 50% 40%, var(--primary) 0%, #0b0b12 75%); }
.lv-prev.audio .lv-prev-video { display: none; }
.lv-prev.audio .lv-prev-audio { display: flex; }
.lv-prev-msg { position: absolute; inset-inline: 10px; top: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.65); color: #fff; font-size: 13px; font-weight: 700; text-align: center; }
.lv-meter { position: absolute; inset-inline: 14px; bottom: 12px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.25); overflow: hidden; }
.lv-meter i { display: block; height: 100%; width: 0; background: var(--success); transition: width .08s linear; }
.lv-dev { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lv-dev > .hidden + * { grid-column: 1 / -1; }
@media (max-width: 560px) { .lv-dev { grid-template-columns: 1fr; } }
.lv-switch { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--text); cursor: pointer; }
.lv-switch input { width: 20px; height: 20px; accent-color: var(--primary); }
.lv-start { min-height: 48px; font-size: 16px; }
.lv-start .lv-dot { background: #fff; }

@media (max-width: 760px) {
  .lv-watch { height: calc(100vh - var(--bottomnav) - var(--safe-b)); height: calc(100dvh - var(--bottomnav) - var(--safe-b)); }
  .lv-stage { aspect-ratio: auto; width: 100%; }
  .lv-nav { display: none; }
  .lv-top { top: calc(10px + env(safe-area-inset-top)); }
  .lv-gift-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .lv-heart, .lv-big-item, .lv-g, .lv-c, .lv-dot, .lv-seat.speaking .lv-seat-av { animation: none !important; } }

/* «مباشر الآن»: إطار متوهج + شارة LIVE حول صورة من يبث (components.js markLiveAvatar) */
.avatar.live-on { padding: 2.5px; background: conic-gradient(from 0deg, var(--danger), #ff7a59, #ff2d87, var(--danger)); cursor: pointer; animation: avLiveGlow 1.6s ease-in-out infinite; }
.avatar.live-on img, .avatar.live-on > .ico { border: 2.5px solid var(--card); }
.avatar.av-big.live-on { padding: 4px; }
.avatar.av-big.live-on img { border-width: 4px; }
@keyframes avLiveGlow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 55%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--danger) 0%, transparent), 0 0 14px 2px color-mix(in srgb, var(--danger) 45%, transparent); }
}
.avatar > .live-badge { position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); z-index: 3; padding: 0 4px; border-radius: 4px; border: 1.5px solid var(--card); background: var(--danger); color: #fff; font-size: 8.5px; font-weight: 900; line-height: 13px; letter-spacing: .3px; pointer-events: none; white-space: nowrap; }
.avatar.av-big > .live-badge { bottom: -2px; padding: 1px 9px; font-size: 13px; line-height: 18px; border-width: 2.5px; border-radius: 6px; }
.avatar.live-on > .dot-online { display: none; }
.live-now-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 11px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 13px; font-weight: 800; text-decoration: none; }
.live-now-chip[hidden] { display: none; }
.live-now-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: liveDot 1s ease-in-out infinite; }
@keyframes liveDot { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .avatar.live-on, .live-now-chip .dot { animation: none; } }

/* لافتة «فلان يطلب الانضمام» للمضيف والمشرفين داخل البث */
.lv-req { position: absolute; top: 112px; inset-inline: 12px; z-index: 25; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--card); color: var(--text); box-shadow: 0 10px 30px rgba(0,0,0,.35); animation: lvReqIn .25s ease-out; max-width: 460px; margin-inline: auto; }
.lv-req-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.lv-req-txt span { font-size: 12.5px; color: var(--text-2); }
.lv-req .lv-req-x { color: var(--text-2); }
@keyframes lvReqIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lv-req { animation: none; } }

/* «انقطع اتصال المضيف — ننتظر عودته» للمشاهدين */
.lv-away { position: absolute; inset-inline: 0; top: 42%; margin: 0 auto; width: max-content; max-width: calc(100% - 32px); z-index: 12; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 20px; border-radius: 16px; background: rgba(0,0,0,.72); color: #fff; text-align: center; backdrop-filter: blur(6px); }
.lv-away span { font-size: 13px; opacity: .85; }

/* ═══ مطبخ وبيت — تصميم v2 (2026-11-04): بطاقات بظل، أقسام الوصفة كبطاقات، تعليقات بشكل المنشورات ═══ */
/* بطاقة الوصفة في القوائم */
.wkt-grid { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
.wkt-card { border: 0; border-radius: 18px; box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease; }
.wkt-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.wkt-card-media { overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, #F59E0B 22%, var(--field)), color-mix(in srgb, #EA580C 16%, var(--field))); }
.wkt-card-media img { transition: transform .35s ease; }
.wkt-card:hover .wkt-card-media img { transform: scale(1.06); }
.wkt-card-media::after { content: ''; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(to top, rgba(0, 0, 0, .45), transparent); pointer-events: none; }
.wkt-card-emoji { font-size: 52px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .18)); }
.wkt-pill { z-index: 1; backdrop-filter: blur(6px); background: rgba(0, 0, 0, .5); padding: 3px 9px; }
.wkt-play { z-index: 1; width: 46px; height: 46px; background: rgba(0, 0, 0, .45); backdrop-filter: blur(4px); border: 2px solid rgba(255, 255, 255, .85); }
.wkt-card-body { padding: 10px 12px 12px; gap: 6px; }
.wkt-card-body > b { font-size: 14.5px; font-weight: 800; line-height: 1.35; }
.wkt-meta { gap: 10px; }
.wkt-meta small { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.wkt-by { padding-top: 6px; border-top: 1px solid var(--divider); }

/* صفحة الوصفة: كل قسم بطاقة */
.wkt-rp .wkt-recipe { border: 0; border-radius: 22px; box-shadow: var(--shadow); }
.wkt-rp .wkt-cover.empty { height: 220px; font-size: 84px; background: linear-gradient(135deg, color-mix(in srgb, #F59E0B 26%, var(--card)), color-mix(in srgb, #EA580C 20%, var(--card))); }
.wkt-rp .wkt-recipe-body { padding: 16px 18px 18px; gap: 12px; }
.wkt-rp .wkt-facts > div { padding: 10px 8px; border-radius: 14px; background: var(--primary-soft); }
.wkt-rp .wkt-facts b { font-size: 16px; color: var(--primary); }
.wkt-rp > .wkt-sec { background: var(--card); border-radius: 20px; box-shadow: var(--shadow); padding: 16px 18px; margin: 14px 0; }
.wkt-rp > .wkt-sec > .wkt-sec-head, .wkt-rp > .wkt-sec > h3 { margin-bottom: 12px; }
.wkt-rp > .wkt-sec .wkt-sec-head h3, .wkt-rp > .wkt-sec > h3 { font-size: 17px; font-weight: 900; display: inline-flex; align-items: center; gap: 8px; }
.wkt-sec-count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 99px; background: var(--primary-soft); color: var(--primary); font-size: 13px; font-weight: 900; }
.wkt-sec-count:empty { display: none; }

/* المكوّنات: صفوف بفاصل، الكمية شارة */
.wkt-rp .wkt-ings { gap: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--divider); }
.wkt-rp .wkt-ings li + li { border-top: 1px solid var(--divider); }
.wkt-rp .wkt-ing { border: 0; border-radius: 0; padding: 11px 14px; background: var(--card); transition: background .15s; }
.wkt-rp .wkt-ing:hover { background: var(--hover); }
.wkt-rp .wkt-ing input { width: 20px; height: 20px; }
.wkt-rp .wkt-qty { min-width: 0; padding: 3px 10px; border-radius: 99px; background: var(--primary-soft); font-size: 13.5px; white-space: nowrap; }
.wkt-rp .wkt-ing input:checked ~ .wkt-qty { background: var(--field); }

/* الخطوات: خط زمني مرقّم */
.wkt-rp .wkt-steps { gap: 0; }
.wkt-rp .wkt-steps li { position: relative; gap: 14px; padding-bottom: 18px; }
.wkt-rp .wkt-steps li:last-child { padding-bottom: 0; }
.wkt-rp .wkt-steps li:not(:last-child)::before { content: ''; position: absolute; inset-inline-start: 16px; top: 36px; bottom: 4px; width: 2px; background: var(--divider); }
.wkt-rp .wkt-stepn { width: 34px; height: 34px; font-size: 15px; box-shadow: 0 4px 10px color-mix(in srgb, var(--primary) 35%, transparent); }
.wkt-rp .wkt-steps p { padding-top: 6px; line-height: 1.7; font-size: 15px; }
.wkt-rp .wkt-tips p { background: color-mix(in srgb, #F59E0B 12%, var(--card)); border-inline-start: 4px solid #F59E0B; line-height: 1.7; }

/* التعليقات: نفس شكل تعليقات المنشورات داخل بطاقة */
.wkt-rp .comments { gap: 16px; }
.wkt-rp .comment .bubble { padding: 9px 14px 10px; border-radius: 18px; }
.wkt-rp .comment .bubble .who a { color: var(--text); text-decoration: none; }
.wkt-rp .comment .bubble .who a:hover { text-decoration: underline; }
.wkt-rp .comment .bubble .tx { font-size: 14.5px; line-height: 1.55; margin-top: 1px; }
.wkt-rp .comment .cactions { padding-top: 4px; }
.wkt-rp .comment .cactions button { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.wkt-rp .comment .replies { position: relative; padding-inline-start: 14px; border-inline-start: 2px solid var(--divider); margin-inline-start: 4px; }
.wkt-rp .comment .avatar { box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--divider); }
.wkt-rp .comment.wkt-cpinned { padding: 10px; border-radius: 16px; background: color-mix(in srgb, var(--primary) 6%, var(--card)); border: 1px dashed color-mix(in srgb, var(--primary) 35%, transparent); }
.wkt-rp .wkt-pinned { font-size: 12px; margin-bottom: 4px; }
.wkt-rp .wkt-cform { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--divider); }
.wkt-rp .wkt-cform .comment-box .inbox { border: 1px solid transparent; transition: border-color .15s, background .15s; }
.wkt-rp .wkt-cform .comment-box .inbox:focus-within { border-color: color-mix(in srgb, var(--primary) 45%, transparent); background: var(--card); }

@media (max-width: 600px) {
  .wkt-grid { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wkt-rp > .wkt-sec { padding: 14px; border-radius: 18px; }
  .wkt-card-body > b { font-size: 13.5px; }
}

/* تبويبات صفحة الوصفة: المكوّنات · الطريقة · نصائح */
.wkt-rp > .wkt-tabsec { padding: 6px 6px 16px; }
.wkt-rtabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 16px; background: var(--field); }
.wkt-rtab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: 10px 8px; border: 0; border-radius: 12px; background: transparent;
  color: var(--text-2); font: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s; }
.wkt-rtab > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.wkt-rtab:hover { color: var(--text); }
.wkt-rtab.on { background: var(--card); color: var(--primary); box-shadow: var(--shadow); }
.wkt-rtab:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.wkt-rtab-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--divider); color: var(--text-2); font-size: 11.5px; font-weight: 900; }
.wkt-rtab.on .wkt-rtab-n { background: var(--primary-soft); color: var(--primary); }
.wkt-tabpanel { padding: 0 10px; animation: wktTabIn .2s ease-out; }
.wkt-tabpanel .wkt-video { margin-bottom: 14px; }
.wkt-tabpanel .wkt-tips p { margin: 0; background: color-mix(in srgb, #F59E0B 12%, var(--card)); border-inline-start: 4px solid #F59E0B; line-height: 1.7; white-space: pre-wrap; padding: 12px 14px; border-radius: 12px; }
@keyframes wktTabIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .wkt-rtab { font-size: 13.5px; padding: 9px 4px; } .wkt-tabpanel { padding: 0 6px; } }

/* «تابع المطبخ»: حبة صغيرة بجانب سطر الأرقام في رأس القسم (لا تغيّر التخطيط) */
.wkt-hero-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.wkt-hero-line .wkt-hero-stats { margin-top: 0; }
.wkt-fpill { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 99px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 800; line-height: 1;
  border: 1px solid color-mix(in srgb, #EA580C 45%, transparent); background: var(--card); color: #C2410C; transition: background .15s, transform .1s; }
.wkt-fpill:hover { background: color-mix(in srgb, #EA580C 10%, var(--card)); }
.wkt-fpill:active { transform: scale(.95); }
.wkt-fpill:disabled { opacity: .6; cursor: default; }
.wkt-fpill.on { background: #EA580C; border-color: #EA580C; color: #fff; }
.wkt-fpill-n { padding-inline-start: 5px; margin-inline-start: 1px; border-inline-start: 1px solid currentColor; opacity: .8; font-weight: 700; }
:root[data-theme="dark"] .wkt-fpill:not(.on) { color: #FDBA74; }

/* ═══ «توافقنا كم؟» ═══ */
.cmp { --cmp-a: #F43F5E; --cmp-b: #8B5CF6; }
.cmp-card { background: var(--card); border: 1px solid var(--divider); border-radius: 20px; padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow); }
.cmp-hero { display: flex; align-items: center; gap: 14px; padding: 20px 18px; margin: 4px 0 14px; border-radius: 22px; color: #fff; background: linear-gradient(135deg, var(--cmp-a), var(--cmp-b)); }
.cmp-hero h1 { margin: 0; font-size: 23px; font-weight: 900; }
.cmp-hero p { margin: 4px 0 0; font-size: 14px; opacity: .92; }
.cmp-hero-art span { width: 66px; height: 66px; display: grid; place-items: center; font-size: 40px; border-radius: 20px; background: rgba(255,255,255,.18); }
.cmp-tabs { display: flex; gap: 6px; margin: 0 0 12px; padding: 4px; border-radius: 16px; background: var(--field); }
.cmp-tab { flex: 1; display: flex; justify-content: center; align-items: center; gap: 6px; min-height: 46px; border-radius: 12px; color: var(--text-2); text-decoration: none; font-weight: 800; }
.cmp-tab.on { background: var(--card); color: var(--primary); box-shadow: var(--shadow); }
.cmp-sub { margin: 18px 2px 10px; font-size: 17px; font-weight: 900; }
.cmp-rels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.cmp-rel { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 18px 10px; border-radius: 20px; background: var(--card); border: 2px solid var(--divider); color: var(--text); text-decoration: none; transition: transform .12s, border-color .12s; }
.cmp-rel:hover { border-color: var(--cmp-a); background: var(--hover); transform: translateY(-2px); }
.cmp-rel-ic { font-size: 40px; }
.cmp-rel b { font-size: 16px; font-weight: 900; }
.cmp-rel small { color: var(--text-2); font-size: 12px; line-height: 1.4; }
@media (max-width: 520px) { .cmp-rels { grid-template-columns: 1fr; } .cmp-rel { flex-direction: row; text-align: start; padding: 12px 14px; } .cmp-rel small { display: block; } }
.cmp-howto { margin: 0; padding-inline-start: 34px; line-height: 1.9; font-weight: 700; }
.cmp-cta { width: 100%; min-height: 52px; font-size: 16.5px; font-weight: 900; margin: 6px 0 14px; border-radius: 16px; }
.cmp-cta.btn-primary { background: linear-gradient(90deg, var(--cmp-a), var(--cmp-b)); border: 0; color: #fff; }
.cmp-big-cta { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 70px; text-decoration: none; animation: cmp-pulse 2.2s ease-in-out infinite; }
.cmp-big-cta span { font-size: 18px; font-weight: 900; }
.cmp-big-cta small { font-size: 12.5px; font-weight: 600; opacity: .92; }
@keyframes cmp-pulse { 50% { transform: scale(1.025); } }
@media (prefers-reduced-motion: reduce) { .cmp-big-cta { animation: none; } }
.cmp-list, .cmp-board { display: grid; gap: 8px; }
.cmp-item, .cmp-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--card); border: 1px solid var(--divider); color: var(--text); text-decoration: none; cursor: pointer; }
.cmp-item:hover, .cmp-row:hover { background: var(--hover); }
.cmp-row.off { opacity: .5; }
.cmp-item-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: var(--primary-soft); }
.cmp-item-meta { display: flex; gap: 10px; color: var(--text-2); font-size: 12.5px; margin-top: 2px; }
.cmp-pct { font-size: 18px; font-weight: 900; }
.cmp-guest { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--field); flex: none; }
.cmp-tag { margin-inline-start: 6px; padding: 1px 7px; border-radius: 99px; background: var(--field); color: var(--text-2); font-size: 11px; font-weight: 700; }
.cmp-empty { text-align: center; padding: 26px 10px; color: var(--text-2); font-size: 34px; }
.cmp-empty p { font-size: 14px; margin: 6px 0 12px; }
.cmp-note { padding: 10px 12px; border-radius: 14px; background: var(--field); color: var(--text-2); font-size: 13px; margin: 10px 0; }
.cmp-top { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; }
.cmp-count { font-size: 12.5px; font-weight: 800; color: var(--text-2); }
.cmp-progress { height: 9px; border-radius: 99px; background: var(--field); overflow: hidden; }
.cmp-progress i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--cmp-a), var(--cmp-b)); transition: width .3s; }
.cmp-q { text-align: center; padding: 22px 16px; }
.cmp-qemoji { width: 92px; height: 92px; margin: 0 auto; border-radius: 28px; display: grid; place-items: center; font-size: 50px; background: var(--primary-soft); }
.cmp-q h2 { margin: 12px 0 4px; font-size: 21px; font-weight: 900; line-height: 1.45; }
.cmp-hint { margin: 8px 0 0; font-size: 12.5px; color: var(--text-2); }
.cmp-opts { display: grid; gap: 10px; margin-top: 16px; }
.cmp-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; border-radius: 16px; border: 2px solid var(--divider); background: var(--card); color: var(--text); font-size: 16px; font-weight: 800; text-align: start; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.cmp-opt:hover { border-color: var(--cmp-a); background: var(--hover); }
.cmp-opt:active { transform: scale(.98); }
.cmp-opt.on { border-color: var(--cmp-a); background: var(--primary-soft); }
.cmp-opt-k { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--field); font-size: 13px; font-weight: 900; }
.cmp-opt.on .cmp-opt-k { background: var(--cmp-a); color: #fff; }
.cmp-tools { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 6px; }
.cmp-tools .btn { flex: 1; min-width: 110px; }
.cmp-sum { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.cmp-sum b { font-size: 20px; }
.cmp-field { display: grid; gap: 6px; margin-bottom: 12px; }
.cmp-done { text-align: center; padding: 10px 0 6px; }
.cmp-done h1 { margin: 4px 0; font-size: 24px; font-weight: 900; }
.cmp-done p { margin: 0 0 12px; color: var(--text-2); }
.cmp-confetti { font-size: 56px; }
.cmp-share { display: grid; gap: 10px; padding: 14px; border-radius: 20px; background: var(--card); border: 1px solid var(--divider); margin-bottom: 12px; }
.cmp-share-msg { padding: 12px; border-radius: 14px; background: var(--primary-soft); }
.cmp-share-msg p { margin: 0 0 8px; font-size: 14px; line-height: 1.6; }
.cmp-link { padding: 9px 12px; border-radius: 10px; background: var(--card); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--primary); font-weight: 700; }
.cmp-share-btns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.cmp-wa { background: #25D366; color: #fff; }
.cmp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.cmp-stats > div { text-align: center; padding: 12px 6px; border-radius: 16px; background: var(--card); border: 1px solid var(--divider); }
.cmp-stats b { display: block; font-size: 20px; font-weight: 900; }
.cmp-stats small { color: var(--text-2); }
.cmp-del { width: 100%; margin-top: 10px; color: #dc2626; }
.cmp-revs { display: grid; gap: 8px; }
.cmp-rev { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--divider); }
.cmp-rev.ok { border-color: var(--cmp-a); background: var(--primary-soft); }
.cmp-rev-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: var(--field); }
.cmp-rev-ans { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 13px; color: var(--text-2); }
.cmp-rev-ans small { font-weight: 800; color: var(--text); }
.cmp-rev-mark { font-size: 20px; font-weight: 900; color: var(--text-2); }
.cmp-answer-summary { font-weight: 900; margin-bottom: 10px; }
.cmp-land { text-align: center; padding: 22px 16px 18px; margin-bottom: 12px; border-radius: 24px; color: #fff; background: linear-gradient(135deg, var(--cmp-a), var(--cmp-b)); }
.cmp-land h1 { margin: 12px 0 4px; font-size: 22px; font-weight: 900; }
.cmp-land-top { position: relative; display: inline-block; }
.cmp-land-badge { position: absolute; bottom: -4px; inset-inline-end: -4px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #fff; font-size: 20px; }
.cmp-land-sub { margin: 0; opacity: .95; }
.cmp-bubble { display: flex; gap: 8px; margin-top: 12px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.18); text-align: start; font-weight: 700; }
.cmp-info h3 { margin: 0 0 6px; font-size: 16px; font-weight: 900; }
.cmp-info p { margin: 0; color: var(--text-2); line-height: 1.7; }
.cmp-safe { margin-top: 8px !important; color: #16a34a !important; font-weight: 700; font-size: 12.5px; }
.cmp-me { display: flex; align-items: center; gap: 12px; }
.cmp-me b { display: block; font-size: 16px; }
.cmp-choices { display: grid; gap: 10px; }
.cmp-choice { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 16px; border-radius: 20px; background: var(--card); border: 1px solid var(--divider); }
.cmp-choice.best { border: 2px solid var(--cmp-a); }
.cmp-choice small { color: var(--text-2); }
.cmp-choice .input, .cmp-choice .btn { width: 100%; }
.cmp-choice-ic { font-size: 30px; }
.cmp-result { text-align: center; display: grid; justify-items: center; gap: 6px; }
.cmp-result h2 { margin: 6px 0 0; font-size: 22px; font-weight: 900; }
.cmp-result p { margin: 0; }
.cmp-pair { display: flex; align-items: center; gap: 10px; }
.cmp-heart { font-size: 26px; color: #E11D48; }
.cmp-names { font-weight: 800; }
.cmp-ring { position: relative; display: grid; place-items: center; }
.cmp-ring svg { position: absolute; inset: 0; }
.cmp-ring b { font-size: 30px; font-weight: 900; }

/* ═══ «خمّن المكان» (guessplace.js) — رموز الألوان فقط: --card --divider --field --primary --primary-soft --text --text-2 --shadow --hover ═══ */
.gp { padding-bottom: 90px; }
.gp-hero { display: flex; gap: 14px; align-items: center; padding: 18px; margin: 8px 0 12px; border-radius: 20px; border: 1px solid var(--divider); background: linear-gradient(135deg, var(--primary-soft), var(--card)); box-shadow: var(--shadow); }
.gp-hero-art { font-size: 46px; line-height: 1; }
.gp-hero h1 { margin: 0 0 4px; font-size: 22px; font-weight: 900; color: var(--text); }
.gp-hero p { margin: 0; color: var(--text-2); }
.gp-me { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gp-me span { background: var(--card); border: 1px solid var(--divider); border-radius: 99px; padding: 3px 10px; font-size: 13px; color: var(--text-2); }
.gp-me b { color: var(--primary); }
.gp-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.gp-tabs::-webkit-scrollbar { display: none; }
.gp-tab { flex: none; border: 1px solid var(--divider); background: var(--card); color: var(--text); border-radius: 99px; padding: 7px 14px; font-weight: 700; cursor: pointer; }
.gp-tab:hover { background: var(--hover); }
.gp-tab.on { background: var(--primary); border-color: var(--primary); color: #fff; }

/* البطاقة */
.gp-list { display: flex; flex-direction: column; gap: 14px; }
.gp-card { background: var(--card); border: 1px solid var(--divider); border-radius: 18px; box-shadow: var(--shadow); }
.gp-card-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.gp-card-head b { display: block; color: var(--text); }
.gp-card-head small { color: var(--text-2); }
.gp-stats { font-size: 12px; font-weight: 700; color: var(--primary); background: var(--primary-soft); border-radius: 99px; padding: 3px 10px; white-space: nowrap; }
.gp-photo { position: relative; aspect-ratio: 4 / 3; background: var(--field); cursor: pointer; overflow: hidden; }
.gp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.gp-card:not(.detail) .gp-photo:hover img { transform: scale(1.03); }
.gp-card.detail .gp-photo { aspect-ratio: auto; max-height: 72vh; cursor: zoom-in; }
.gp-card.detail .gp-photo img { height: auto; max-height: 72vh; object-fit: contain; margin: 0 auto; }
.gp-photo-badge { position: absolute; top: 10px; inset-inline-start: 10px; background: rgba(0, 0, 0, .55); color: #fff; border-radius: 99px; padding: 4px 12px; font-weight: 800; font-size: 13px; backdrop-filter: blur(4px); }
.gp-status { position: absolute; top: 10px; inset-inline-end: 10px; background: var(--card); color: var(--text); border-radius: 99px; padding: 4px 10px; font-size: 12px; font-weight: 700; box-shadow: var(--shadow); }
.gp-hint { margin: 10px 12px 0; color: var(--text); overflow-wrap: anywhere; }
.gp-guess { padding: 12px; }
.gp-guess-row { display: flex; gap: 8px; align-items: stretch; }
.gp-go { flex: none; }
.gp-feedback:empty { display: none; }
.gp-try { margin-top: 8px; font-weight: 700; font-size: 14px; color: var(--text-2); }
.gp-card-foot { border-top: 1px solid var(--divider); padding: 6px 12px; }
.gp-link { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); font-weight: 700; text-decoration: none; padding: 4px 8px; border-radius: 10px; }
.gp-link:hover { background: var(--hover); color: var(--text); }
.gp-link .ico, .gp-fab .ico { fill: currentColor; }

/* قائمة المناطق القابلة للبحث */
.gp-picker { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; background: var(--field); border: 1px solid var(--divider); border-radius: 12px; padding: 0 10px; }
.gp-picker:focus-within { border-color: var(--primary); }
.gp-picker.picked { border-color: var(--primary); background: var(--primary-soft); }
.gp-picker > .ico { flex: none; fill: var(--text-2); }
.gp-picker-input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); padding: 10px 0; font: inherit; outline: none; }
.gp-picker-list { display: none; position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 30; max-height: 260px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: var(--card); border: 1px solid var(--divider); border-radius: 12px; box-shadow: var(--shadow); }
.gp-picker.open .gp-picker-list { display: block; }
.gp-picker-opt { padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--text); }
.gp-picker-opt:hover, .gp-picker-opt.hl { background: var(--hover); }
.gp-picker-opt.on { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.gp-picker-none { padding: 10px; color: var(--text-2); }

/* كشف الجواب */
.gp-answer { display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: 14px; border: 1px solid var(--divider); background: var(--field); }
.gp-answer.ok { border-color: #16a34a; background: rgba(22, 163, 74, .1); }
.gp-answer.bad { border-color: #dc2626; background: rgba(220, 38, 38, .08); }
.gp-answer-icon { font-size: 30px; line-height: 1; }
.gp-answer b { color: var(--text); }
.gp-answer small { display: block; color: var(--text-2); margin-top: 2px; }
.gp-answer-place { color: var(--text); margin-top: 2px; }
.gp-reveal { animation: gp-reveal .55s cubic-bezier(.2, 1.4, .4, 1) both; transform-origin: top center; }
@keyframes gp-reveal { 0% { opacity: 0; transform: perspective(600px) rotateX(75deg) scale(.92); } 100% { opacity: 1; transform: none; } }
.gp-shake { animation: gp-shake .4s ease; }
@keyframes gp-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.gp-confetti { position: relative; }
.gp-confetti::after { content: '🎉'; position: absolute; top: -4px; inset-inline-end: 16px; font-size: 28px; pointer-events: none; animation: gp-pop 1.1s ease both; }
@keyframes gp-pop { 0% { opacity: 0; transform: translateY(10px) scale(.4); } 40% { opacity: 1; transform: translateY(-14px) scale(1.2); } 100% { opacity: 0; transform: translateY(-36px) scale(1); } }
@media (prefers-reduced-motion: reduce) { .gp-reveal, .gp-shake, .gp-confetti::after { animation: none; } }

/* الخلاصة: فارغ، تحميل، زر النشر */
.gp-empty { text-align: center; padding: 30px 12px; color: var(--text-2); }
.gp-empty > div { font-size: 40px; }
.gp-empty .btn { margin-top: 6px; }
.gp-sentinel { min-height: 40px; display: flex; justify-content: center; padding: 10px 0; }
.gp-fab { position: fixed; bottom: calc(76px + env(safe-area-inset-bottom)); inset-inline-end: 18px; z-index: 20; display: flex; align-items: center; gap: 6px; padding: 12px 18px; border: 0; border-radius: 999px; background: var(--primary); color: #fff; font-weight: 900; box-shadow: var(--shadow); cursor: pointer; }

/* الترتيب */
.gp-board-ctrl { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.gp-seg { display: inline-flex; background: var(--field); border: 1px solid var(--divider); border-radius: 99px; padding: 3px; }
.gp-seg-btn { border: 0; background: transparent; color: var(--text-2); border-radius: 99px; padding: 6px 14px; font-weight: 700; cursor: pointer; }
.gp-seg-btn.on { background: var(--card); color: var(--primary); box-shadow: var(--shadow); }
.gp-board-me { background: var(--primary-soft); color: var(--text); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.gp-board-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gp-board-row { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--divider); border-radius: 14px; padding: 8px 12px; }
.gp-board-row b { display: block; color: var(--text); }
.gp-board-row small { color: var(--text-2); }
.gp-board-row.top1 { border-color: var(--primary); background: var(--primary-soft); }
.gp-rank { width: 28px; text-align: center; font-weight: 900; color: var(--text-2); font-size: 18px; }
.gp-pts { font-weight: 900; color: var(--primary); white-space: nowrap; }

/* النموذج */
.gp-form { display: flex; flex-direction: column; gap: 12px; background: var(--card); border: 1px solid var(--divider); border-radius: 18px; padding: 16px; box-shadow: var(--shadow); }
.gp-form h2 { margin: 0; font-size: 19px; color: var(--text); }
.gp-drop { position: relative; min-height: 200px; border: 2px dashed var(--divider); border-radius: 16px; background: var(--field); display: grid; place-items: center; overflow: hidden; cursor: pointer; }
.gp-drop:hover { border-color: var(--primary); }
.gp-drop img { width: 100%; max-height: 360px; object-fit: contain; display: block; }
.gp-drop-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text-2); text-align: center; padding: 20px; }
.gp-drop-empty .ico { width: 36px; height: 36px; fill: var(--primary); }
.gp-drop-empty b { color: var(--text); }
.gp-drop-x { position: absolute; top: 8px; inset-inline-end: 8px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .6); color: #fff; font-size: 20px; cursor: pointer; }
.gp-field { display: flex; flex-direction: column; gap: 4px; }
.gp-field > span { font-weight: 700; font-size: 14px; color: var(--text); }
.gp-field > small { color: var(--text-2); }
.gp-input { width: 100%; box-sizing: border-box; border: 1px solid var(--divider); background: var(--field); color: var(--text); border-radius: 12px; padding: 10px 12px; font: inherit; }
.gp-input:focus { outline: none; border-color: var(--primary); }
.gp-note { background: var(--field); color: var(--text-2); border-radius: 12px; padding: 10px 12px; font-size: 13px; }

/* صفحة المنشور والنقاش */
.gp-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.gp-comments { background: var(--card); border: 1px solid var(--divider); border-radius: 18px; padding: 14px; }
.gp-comments h3 { margin: 0 0 10px; color: var(--text); font-size: 17px; }
.gp-comments h3 small { color: var(--text-2); font-weight: 600; }
.gp-locked { background: var(--field); color: var(--text-2); border-radius: 14px; padding: 16px; text-align: center; font-weight: 700; }
.gp-clist { display: flex; flex-direction: column; gap: 10px; }
.gp-c { display: flex; gap: 8px; align-items: flex-start; }
.gp-c.reply { margin-inline-start: 40px; }
.gp-c-bubble { background: var(--field); border-radius: 14px; padding: 8px 12px; display: inline-block; max-width: 100%; }
.gp-c-bubble b { display: block; color: var(--text); font-size: 14px; }
.gp-c-bubble p { margin: 2px 0 0; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.gp-c-meta { display: flex; align-items: center; gap: 10px; padding: 2px 6px; color: var(--text-2); font-size: 12px; }
.gp-clike { display: inline-flex; align-items: center; gap: 3px; border: 0; background: transparent; color: var(--text-2); cursor: pointer; padding: 2px 4px; border-radius: 8px; }
.gp-clike .ico { width: 16px; height: 16px; fill: currentColor; }
.gp-clike.on { color: #e11d48; }
.gp-btn-link { border: 0; background: transparent; color: var(--text-2); font-weight: 700; font-size: 12px; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.gp-btn-link:hover { background: var(--hover); color: var(--text); }
.gp-cbox { margin-top: 12px; border-top: 1px solid var(--divider); padding-top: 10px; }
.gp-cbox-row { display: flex; gap: 8px; align-items: flex-end; }
.gp-cbox-row .gp-input { resize: vertical; min-height: 44px; }
.gp-replying { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.gp-muted { color: var(--text-2); margin: 4px 0; }
@media (max-width: 420px) { .gp-fab span { display: none; } .gp-guess-row { flex-direction: column; } .gp-c.reply { margin-inline-start: 24px; } }

/* ═══ «صالة الألعاب» (arcade.js) — للبالغين ═══ */
.arc-hero { display: flex; align-items: center; gap: 14px; padding: 20px 18px; margin: 6px 0 12px; border-radius: 22px; color: #fff; background: linear-gradient(135deg, #7C3AED, #2563EB); box-shadow: var(--shadow); }
.arc-hero h1 { margin: 0; font-size: 23px; font-weight: 900; }
.arc-hero p { margin: 4px 0 0; font-size: 14px; opacity: .92; }
.arc-hero-ic { width: 64px; height: 64px; flex: none; display: grid; place-items: center; font-size: 38px; border-radius: 20px; background: rgba(255,255,255,.18); }
.arc-count { margin: 0 4px 8px; }
.arc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.arc-card { display: flex; flex-direction: column; padding: 0; border: 1px solid var(--divider); border-radius: 18px; overflow: hidden; background: var(--card); color: var(--text); text-align: start; cursor: pointer; box-shadow: var(--shadow); transition: transform .12s, box-shadow .12s; }
.arc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.arc-cover { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; font-size: 44px; background: var(--primary-soft) center / cover no-repeat; }
.arc-play { position: absolute; inset-inline-end: 10px; bottom: 10px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; font-size: 15px; color: #fff; background: rgba(0,0,0,.55); }
.arc-meta { display: grid; gap: 3px; padding: 10px 12px 12px; min-width: 0; }
.arc-meta b { font-size: 15px; font-weight: 800; }
.arc-desc { font-size: 12.5px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.arc-empty p { color: var(--text-2); margin: 6px 0 0; }
@media (max-width: 420px) { .arc-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* ═══ معاينة «المنهاج النظامي» و«الحصص المباشرة» للزائر (study-teaser.js): محتوى مموّه + دعوة للتسجيل ═══ */
.stz-hero { display: flex; align-items: center; gap: 14px; padding: 18px; margin: 6px 0 12px; border-radius: 22px; color: #fff; background: linear-gradient(135deg, #2563EB, #0D9488); box-shadow: var(--shadow); }
.stz-hero h1 { margin: 0; font-size: 22px; font-weight: 900; }
.stz-hero p { margin: 4px 0 0; font-size: 14px; opacity: .92; }
.stz-hero-ic { width: 60px; height: 60px; flex: none; display: grid; place-items: center; font-size: 34px; border-radius: 18px; background: rgba(255,255,255,.18); }
.stz-stage { position: relative; min-height: 520px; border-radius: 20px; overflow: hidden; }
.stz-blur { filter: blur(7px) saturate(.9); opacity: .75; pointer-events: none; user-select: none; padding: 4px; }
.stz-chips { display: flex; gap: 8px; margin-bottom: 12px; }
.stz-chips span { padding: 8px 16px; border-radius: 99px; background: var(--card); border: 1px solid var(--divider); font-weight: 700; }
.stz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.stz-card { display: grid; gap: 4px; padding: 10px; border-radius: 18px; background: var(--card); border: 1px solid var(--divider); box-shadow: var(--shadow); }
.stz-card b { font-size: 15px; }
.stz-card small { color: var(--text-2); }
.stz-thumb { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; border-radius: 14px; background: var(--primary-soft); }
.stz-live { background: linear-gradient(135deg, #1E293B, #334155); }
.stz-emo { font-size: 40px; }
.stz-badge { position: absolute; top: 8px; inset-inline-start: 8px; padding: 2px 8px; border-radius: 6px; background: #DC2626; color: #fff; font-size: 11px; font-weight: 800; }
.stz-viewers { position: absolute; bottom: 8px; inset-inline-end: 8px; padding: 2px 8px; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; }
.stz-gate { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--card) 60%, transparent) 40%); }
.stz-gate-card { width: min(420px, 100%); display: grid; gap: 10px; justify-items: center; text-align: center; padding: 22px 20px; border-radius: 22px; background: var(--card); border: 1px solid var(--divider); box-shadow: var(--shadow-lg); }
.stz-gate-card h2 { margin: 0; font-size: 19px; font-weight: 900; }
.stz-gate-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; text-align: start; font-size: 14px; }
.stz-lock { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--primary-soft); color: var(--primary); }
.stz-cta { width: 100%; min-height: 50px; font-size: 16px; font-weight: 900; border-radius: 14px; }
.stz-login { width: 100%; }

/* ═══ «خمّن المكان» v2 — بطاقات منظمة، شريط تفاعل، نقاش مثل المنشورات، نشر بخطوات ═══ */
.gp { padding-bottom: 96px; }
.gp-hero { flex-wrap: wrap; box-shadow: var(--shadow); }
.gp-hero-cta { flex: none; border-radius: 14px; font-weight: 800; }
@media (max-width: 560px) { .gp-hero-cta { width: 100%; } }
.gp-me span { background: var(--card); border: 1px solid var(--divider); border-radius: 99px; padding: 4px 10px; font-size: 13px; }
.gp-tab { display: inline-flex; gap: 6px; align-items: center; padding: 9px 16px; font-size: 14.5px; }
.gp-list { display: flex; flex-direction: column; gap: 16px; }
.gp-card { overflow: hidden; }
.gp-card-head { padding: 12px 14px; }
.gp-who { min-width: 0; }
.gp-who a { color: inherit; text-decoration: none; }
.gp-who a:hover b { text-decoration: underline; }
.gp-who small { display: block; font-size: 12.5px; }
.gp-stat-pill { flex: none; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 700; color: var(--text-2); background: var(--field); border-radius: 99px; padding: 4px 10px; }
.gp-photo-answer { position: absolute; bottom: 10px; inset-inline-start: 10px; background: rgba(22, 163, 74, .92); color: #fff; border-radius: 99px; padding: 4px 12px; font-weight: 800; font-size: 13px; }
.gp-hint { display: flex; gap: 8px; align-items: flex-start; margin: 12px 14px 0; padding: 10px 12px; border-radius: 12px; background: var(--primary-soft); font-weight: 600; }
.gp-hint-ic { flex: none; }
.gp-guess { margin: 12px 14px 0; }
.gp-go-big { min-height: 46px; font-weight: 800; border-radius: 12px; }
/* شريط التفاعل: أعجبني · نقاش · مشاركة — مثل المنشورات */
.gp-actbar { display: flex; margin-top: 12px; border-top: 1px solid var(--divider); padding: 4px 6px; }
.gp-act { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; border: 0; background: transparent; color: var(--text-2); font-weight: 700; font-size: 14px; border-radius: 10px; cursor: pointer; }
.gp-act:hover { background: var(--hover); color: var(--text); }
.gp-act .ico { width: 18px; height: 18px; }
.gp-act.on { color: #e11d48; }
.gp-act.on .ico { fill: #e11d48; }
.gp-act.gp-pop .ico { animation: gp-pop .3s ease; }
@keyframes gp-pop { 50% { transform: scale(1.35); } }
.gp-more { display: flex; justify-content: flex-end; gap: 6px; margin: 6px 0 0; }
/* المشاركة */
.gp-share { display: flex; flex-direction: column; gap: 12px; }
.gp-share-img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 14px; }
.gp-share-note { margin: 0; color: var(--text-2); font-size: 13px; text-align: center; }
.gp-share-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.gp-share-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border: 1px solid var(--divider); border-radius: 14px; background: var(--card); color: var(--text); cursor: pointer; }
.gp-share-opt:hover { background: var(--hover); border-color: var(--primary); }
.gp-share-ic { font-size: 22px; }
.gp-share-opt b { font-size: 13px; }
/* الفراغ: كيف تلعب */
.gp-empty { background: var(--card); border: 1px solid var(--divider); border-radius: 20px; padding: 28px 18px; box-shadow: var(--shadow); }
.gp-empty h3 { margin: 6px 0 4px; color: var(--text); font-size: 19px; }
.gp-empty p { margin: 0 auto 14px; max-width: 420px; }
.gp-empty-art { font-size: 56px; line-height: 1; }
.gp-cta { min-height: 46px; padding: 0 22px; border-radius: 14px; font-weight: 800; }
.gp-how { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 16px; }
.gp-how-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: 14px; background: var(--field); }
.gp-how-n { position: absolute; top: 6px; inset-inline-start: 8px; font-size: 11px; font-weight: 900; color: var(--primary); }
.gp-how-e { font-size: 26px; }
.gp-how-step small { color: var(--text); font-weight: 700; font-size: 12px; text-align: center; }
@media (max-width: 480px) { .gp-how { grid-template-columns: repeat(2, 1fr); } }
/* النشر بخطوات */
.gp-new-head h1 { margin: 6px 0 10px; font-size: 22px; font-weight: 900; color: var(--text); }
.gp-steps { display: flex; gap: 6px; list-style: none; margin: 0 0 12px; padding: 0; }
.gp-steps li { flex: 1; display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 12px; background: var(--field); color: var(--text-2); font-size: 13px; min-width: 0; }
.gp-steps li span { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--card); font-weight: 900; }
.gp-steps li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-steps li.on { background: var(--primary-soft); color: var(--primary); }
.gp-steps li.on span { background: var(--primary); color: #fff; }
.gp-steps li.done span { background: #16a34a; color: #fff; }
.gp-drop { min-height: 240px; }
.gp-drop-ic { font-size: 44px; }
.gp-tips { list-style: none; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--field); display: grid; gap: 4px; font-size: 13.5px; color: var(--text); }
.gp-mini img { width: 100%; max-height: 160px; object-fit: cover; border-radius: 12px; display: block; }
.gp-form-nav { display: flex; gap: 8px; margin-top: 4px; }
.gp-form-nav .btn { min-height: 46px; border-radius: 12px; font-weight: 800; }
.gp-preview { border: 1px solid var(--divider); border-radius: 16px; overflow: hidden; }
.gp-preview-head { padding: 8px 12px; font-size: 12.5px; font-weight: 800; color: var(--text-2); background: var(--field); }
.gp-preview .gp-photo { cursor: default; }
.gp-preview-ans { padding: 10px 12px; font-size: 13.5px; color: var(--text-2); }
.gp-done { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; background: var(--card); border: 1px solid var(--divider); border-radius: 20px; padding: 24px 16px; box-shadow: var(--shadow); margin-top: 10px; }
.gp-done h2 { margin: 0; font-size: 22px; color: var(--text); }
.gp-done p { margin: 0; color: var(--text-2); }
.gp-done-art { font-size: 56px; }
.gp-done-img { width: 100%; max-height: 260px; object-fit: cover; border-radius: 14px; }
.gp-done .gp-share-grid, .gp-done .gp-form-nav { width: 100%; }
.gp-done .gp-form-nav .btn { flex: 1; }
/* النقاش */
.gp-discuss { margin-top: 14px; background: var(--card); border: 1px solid var(--divider); border-radius: 18px; padding: 14px; box-shadow: var(--shadow); scroll-margin-top: 80px; }
.gp-discuss-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.gp-discuss-head h3 { margin: 0; font-size: 17px; color: var(--text); }
.gp-count { min-width: 26px; height: 24px; padding: 0 8px; display: inline-grid; place-items: center; border-radius: 99px; background: var(--primary-soft); color: var(--primary); font-weight: 900; font-size: 13px; }
.gp-cform { margin-bottom: 14px; }
.gp-comments .replies { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding-inline-start: 12px; border-inline-start: 2px solid var(--divider); }
.gp-author { margin-inline-start: 6px; padding: 1px 7px; border-radius: 99px; background: var(--primary-soft); color: var(--primary); font-size: 11px; font-weight: 800; }
.gp-cempty { text-align: center; color: var(--text-2); padding: 14px 6px; }
.gp-locked { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 14px; }
.gp-locked b { color: var(--text); font-size: 16px; }
.gp-locked p { margin: 0 0 6px; font-weight: 500; }
.gp-locked-ic { font-size: 34px; }
.gp-discuss .gp-comments { border: 0; padding: 0; margin: 0; background: none; box-shadow: none; }

/* زر القائمة الجانبية: هزّة خفيفة كل بضع ثوانٍ + نقطة صغيرة، حتى أول فتح (wk_menu_seen) */
.icon-btn.menu-hint { position: relative; animation: menu-hint 4.5s ease-in-out 1.5s infinite; }
.icon-btn.menu-hint::after { content: ''; position: absolute; top: 6px; inset-inline-end: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 2px var(--card); animation: menu-hint-dot 1.6s ease-out infinite; }
@keyframes menu-hint { 0%, 70%, 100% { transform: none; } 75% { transform: rotate(-14deg) scale(1.08); } 80% { transform: rotate(12deg) scale(1.08); } 85% { transform: rotate(-8deg); } 90% { transform: rotate(5deg); } 95% { transform: none; } }
@keyframes menu-hint-dot { 0% { box-shadow: 0 0 0 2px var(--card), 0 0 0 2px color-mix(in srgb, var(--primary) 50%, transparent); } 100% { box-shadow: 0 0 0 2px var(--card), 0 0 0 10px transparent; } }
@media (prefers-reduced-motion: reduce) { .icon-btn.menu-hint { animation: none; } .icon-btn.menu-hint::after { animation: none; } }

/* ─── «الوكلاء الأذكياء»: الشارة + شريط الشفافية + المحادثة الصوتية ─── */
.ai-agent-badge { display: inline-flex; align-items: center; gap: 2px; margin-inline-start: 4px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 18px; vertical-align: middle; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); white-space: nowrap; }
.ai-agent-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 7px 12px; font-size: 12.5px; color: var(--text-2); background: var(--field); border-bottom: 1px solid var(--divider); }
.ai-agent-banner .link-btn { background: none; border: 0; color: var(--primary); font: inherit; cursor: pointer; padding: 0; }
.ai-mem-facts { padding-inline-start: 18px; margin: 6px 0 10px; }
/* شاشة الاتصال بالوكيل: ألوان ثابتة داكنة في الوضعين، مثل شاشة مكالمة الهاتف */
.chat-call-slot { display: contents; }
.ai-phone { position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: max(28px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom)); text-align: center; color: #fff; background: linear-gradient(180deg, #123a3a 0%, #0c1f2b 55%, #081018 100%); overflow-y: auto; }
.ai-phone-name { font-size: 24px; font-weight: 700; margin-top: 2vh; overflow-wrap: anywhere; }
.ai-phone-state { font-size: 15px; color: rgba(255, 255, 255, .78); min-height: 1.5em; direction: ltr; unicode-bidi: plaintext; font-variant-numeric: tabular-nums; }
.ai-phone-av { position: relative; margin: 3vh 0 1vh; border-radius: 50%; line-height: 0; }
.ai-phone.ringing .ai-phone-av::before, .ai-phone.ringing .ai-phone-av::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); animation: ai-phone-ring 2s ease-out infinite; pointer-events: none; }
.ai-phone.ringing .ai-phone-av::after { animation-delay: 1s; }
@keyframes ai-phone-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
.ai-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 72px; width: min(100%, 320px); margin-top: 1vh; border: 0; padding: 0; background: none; color: inherit; cursor: default; }
.ai-wave.tappable { cursor: pointer; }
.ai-wave i { display: block; flex: 0 1 5px; min-width: 2px; height: 100%; border-radius: 3px; background: rgba(255, 255, 255, .85); transform: scaleY(.06); transform-origin: center; will-change: transform; }
.ai-phone.speaking .ai-wave i { background: #4fd8c4; }
.ai-phone-sub { font-weight: 600; min-height: 1.5em; }
.ai-phone-caption { display: flex; flex-direction: column; gap: 4px; max-width: 460px; flex: 1 1 auto; min-height: 0; overflow-y: auto; font-size: 15px; line-height: 1.5; unicode-bidi: plaintext; }
.ai-phone-caption small { font-size: 13px; color: rgba(255, 255, 255, .62); unicode-bidi: plaintext; }
.ai-phone-left { font-size: 12px; color: rgba(255, 255, 255, .6); min-height: 1.3em; }
.ai-phone-mode { display: inline-flex; background: rgba(255, 255, 255, .14); border-radius: 20px; }
.ai-phone-mode[hidden], .ai-phone-hold[hidden] { display: none; }
.ai-phone-mode-opt { background: none; border: 0; color: #fff; font: inherit; font-size: 13px; font-weight: 700; padding: 8px 18px; border-radius: 20px; cursor: pointer; }
.ai-phone-mode-opt.on { background: #fff; color: #10242c; }
.ai-phone-hold { width: min(340px, 100%); padding: 20px 16px; border: 0; border-radius: 40px; background: rgba(255, 255, 255, .18); color: #fff; font: inherit; font-weight: 700; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ai-phone-hold.on { background: #1aa179; }
@media (max-height: 720px) { .ai-phone.has-hold .ai-phone-av { transform: scale(.5); margin: -33px 0; } }
.ai-phone-hold:disabled { opacity: .5; cursor: default; }
.ai-phone-actions { display: flex; align-items: flex-start; justify-content: center; gap: 36px; margin-top: 6px; }
.ai-phone-act { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: rgba(255, 255, 255, .85); background: none; border: 0; padding: 0; cursor: pointer; }
.ai-phone-act > span:first-child { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; }
.ai-phone-act.on > span:first-child { background: #fff; color: #10242c; }
.ai-phone-act.end > span:first-child { background: #e5383b; }
.ai-phone-act.primary > span:first-child { background: #1aa179; }
.ai-phone-act:focus-visible > span:first-child { outline: 3px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ai-phone.ringing .ai-phone-av::before, .ai-phone.ringing .ai-phone-av::after { animation: none; opacity: .5; } }

/* ─── تحذير الروابط الخارجية + قائمة الرسالة (نسخ / فتح) ─── */
.ext-warn .ext-lead { margin: 0 0 8px; font-weight: 600; }
.ext-warn .ext-url { padding: 8px 10px; border-radius: 10px; background: var(--field); border: 1px solid var(--divider); font-size: 13px; word-break: break-all; text-align: left; max-height: 90px; overflow: auto; }
.ext-warn .ext-risks { margin: 10px 0 6px; padding-inline-start: 20px; color: var(--text-2); font-size: 13.5px; line-height: 1.6; }
.ext-warn .ext-note { margin: 0; font-size: 13.5px; font-weight: 600; }
.msg-menu .msg-menu-host { padding: 6px 10px 2px; font-size: 12px; color: var(--text-2); direction: ltr; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-top: 1px solid var(--divider); margin-top: 4px; }
.msg-menu .msg-menu-host:first-child { border-top: 0; margin-top: 0; }

/* ─── «الوكلاء الأذكياء»: الخطط المدفوعة (العدّاد، النافذة، اشتراكاتي) ─── */
.ai-plans-bar { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 12.5px; color: var(--text-2); background: var(--field); border-bottom: 1px solid var(--divider); }
.ai-plans-bar.empty { color: var(--danger); }
.ai-plans { display: flex; flex-direction: column; gap: 12px; }
.ai-plans-usage { padding: 10px 12px; border-radius: var(--r-sm); background: var(--field); border: 1px solid var(--divider); font-weight: 600; }
.ai-plans-usage.empty { color: var(--danger); }
.ai-plan-sub { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--primary-soft); color: var(--on-primary-soft); }
.ai-plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.ai-plan { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: var(--r); background: var(--card); border: 1px solid var(--divider); }
.ai-plan.hl { border-color: var(--primary); box-shadow: var(--shadow); }
.ai-plan.cur { outline: 2px solid var(--success); outline-offset: -2px; }
.ai-plan-tag { position: absolute; top: -9px; inset-inline-end: 12px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff; background: var(--brand); }
.ai-plan-name { font-size: 15px; }
.ai-plan-price b { font-size: 20px; }
.ai-plan-feats { margin: 0; padding-inline-start: 18px; color: var(--text-2); flex: 1; }
.ai-plan-auto { display: inline-flex; align-items: center; gap: 8px; }
.ai-subs { display: flex; flex-direction: column; gap: 8px; }
.ai-sub-row { display: flex; align-items: center; gap: 12px; padding: 12px; }
.ai-sub-row.off { opacity: .7; }
.msg-plans-cta { margin-top: 6px; }

/* ── الجماهير الإعلانية وتفضيلات الإعلانات ── */
.ads-estimate.too-small { background: var(--field); color: var(--text-2); }
.ads-estimate .aud-rounded { color: var(--text-2); margin-inline-start: 4px; }
.aud-adv { padding: 12px 14px; }
.aud-adv > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; flex-wrap: wrap; list-style: none; }
.aud-adv > summary::-webkit-details-marker { display: none; }
.aud-adv > summary small { margin-inline-start: auto; }
.aud-check { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--divider); border-radius: 12px; cursor: pointer; }
.aud-check span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aud-check.off { opacity: .6; cursor: not-allowed; }
.aud-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-top: 10px; }
.aud-kpi { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--field); border-radius: 12px; min-width: 0; }
.aud-kpi b { font-size: 18px; }
.aud-dim { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.aud-bar { display: grid; grid-template-columns: minmax(70px, 120px) 1fr auto; align-items: center; gap: 8px; font-size: 13px; }
.aud-bar i { display: block; height: 8px; border-radius: 6px; background: var(--field); overflow: hidden; }
.aud-bar u { display: block; height: 100%; background: var(--primary); border-radius: 6px; text-decoration: none; }
.aud-lvl { color: inherit; opacity: .75; margin-inline-start: 4px; }
.aud-list { margin: 6px 0 0; padding-inline-start: 18px; }
.ad-hide { background: none; border: 0; padding: 6px; border-radius: 50%; color: var(--text-2); cursor: pointer; line-height: 0; flex: none; }
.ad-hide:hover { background: var(--field); }
.ad-card { position: relative; }
.ad-card > .ad-hide { position: absolute; top: 6px; inset-inline-end: 6px; background: var(--field); }

/* «أنشئ متجرك» و«أضفني» — النافذتان (رموز الألوان: --field --divider --text-2 --card --primary --text) */
.biz-body { display: flex; flex-direction: column; gap: 14px; min-height: 120px; }
.biz-load { padding: 40px 0; }
.biz-col { gap: 12px; }
.biz-field { display: flex; flex-direction: column; gap: 6px; }
.biz-field[hidden], .biz-err[hidden] { display: none; }
.biz-label { font-weight: 700; font-size: 13.5px; }
.biz-ltr { direction: ltr; text-align: start; }
.biz-foot { display: flex; gap: 8px; justify-content: flex-end; width: 100%; flex-wrap: wrap; }
.biz-foot .btn-primary { flex: 1 1 auto; justify-content: center; min-width: 0; }
.biz-err { padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #DC2626 10%, transparent); color: #DC2626; font-weight: 600; font-size: 13.5px; }
.biz-steps { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.biz-steps li { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; background: var(--field); color: var(--text-2); font-size: 12.5px; font-weight: 700; }
.biz-steps li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.biz-steps li b { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--divider); color: var(--text); font-size: 11.5px; }
.biz-steps li.on { color: var(--text); box-shadow: inset 0 0 0 1.5px var(--primary); }
.biz-steps li.on b, .biz-steps li.done b { background: var(--primary); color: #fff; }
.biz-slug-row { display: flex; align-items: center; gap: 6px; }
.biz-slug-row .input { flex: 1; min-width: 0; }
.biz-slug-row > span { flex: none; font-size: 13px; }
.biz-slug { overflow-wrap: anywhere; }
.biz-slug.ok { color: #16A34A; font-weight: 600; }
.biz-slug.bad { color: #DC2626; font-weight: 600; }
.biz-img { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--divider); border-radius: 14px; }
.biz-img-btn { flex: none; padding: 0; border: 0; background: none; cursor: pointer; }
.biz-img-box { display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--field); color: var(--text-2); }
.biz-img-box.round { width: 64px; height: 64px; border-radius: 50%; }
.biz-img-box.wide { width: 120px; height: 56px; border-radius: 10px; }
.biz-img-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.biz-notice { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 8px 4px; }
.biz-notice p { margin: 0; line-height: 1.8; color: var(--text-2); }
.biz-notice b { font-size: 17px; font-weight: 900; }
.biz-notice-ico { width: 60px; height: 60px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.biz-notice.ok .biz-notice-ico { background: color-mix(in srgb, #16A34A 14%, transparent); color: #16A34A; }
.biz-list { display: flex; flex-direction: column; gap: 8px; }
.biz-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--field); color: var(--text); text-decoration: none; min-width: 0; }
.biz-item small { display: block; }
.biz-chip { flex: none; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.biz-chip.ok { background: color-mix(in srgb, #16A34A 14%, transparent); color: #16A34A; }
.biz-chip.wait { background: color-mix(in srgb, #F59E0B 16%, transparent); color: #B45309; }

/* بطاقة المهني: اتصال ومراسلة */
.pro-contact { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.pro-contact .btn { flex: 1 1 auto; justify-content: center; min-width: 0; }

/* نافذة نجاح المتجر: الروابط ومعلومات الدخول */
.biz-link a { display: block; color: var(--primary); font-weight: 700; text-decoration: none; text-align: start; }
.biz-link small { display: block; }
.biz-login { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--divider); border-radius: 12px; }
.biz-login a { color: var(--primary); text-decoration: none; }

/* «متاجري» */
.biz-pro-note { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--primary) 9%, transparent); font-size: 13.5px; line-height: 1.6; }
.biz-pro-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 2px; }
.biz-pro-links a { color: var(--primary); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.biz-store-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.biz-store-head a { color: var(--primary); text-decoration: none; text-align: start; }
.biz-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.biz-actions .btn { justify-content: center; min-width: 0; }
.biz-sub { font-weight: 800; font-size: 14px; }
.biz-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.biz-cat { padding: 4px 11px; border-radius: 999px; background: var(--field); font-size: 13px; }
.biz-prods { display: flex; flex-direction: column; gap: 8px; }
.biz-prod { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--divider); border-radius: 12px; min-width: 0; }
.biz-prod img, .biz-prod-ph { flex: none; width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: var(--field); display: inline-flex; align-items: center; justify-content: center; }
.biz-prod-bd { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.biz-prod-bd b { max-width: 100%; }
.biz-pick { border: 0; cursor: pointer; width: 100%; text-align: start; font: inherit; }