:root { --ink: #3a2220; --panel: #e23b3b; --leaf: #ff4f4f; --mint: #ffe4dc; --line: #f0d6d0; --muted: #8a6e6a; --bg: #fff7f5; --surface: #fff; --soft: #fff3ef; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Geeza Pro", "SF Arabic", "Segoe UI", sans-serif; }
main { max-width: 980px; margin: 0 auto; padding: 24px; }
header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
h1 { margin: 0; }
h2 { margin: 28px 0 12px; }
label, .stack { display: grid; gap: 8px; margin: 8px 0; }
input, textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 12px; font: inherit; }
button { border: 0; border-radius: 12px; padding: 10px 14px; font: inherit; cursor: pointer; }
.primary { background: var(--leaf); color: white; }
.ghost { background: var(--mint); }
.danger { background: #9d2c2c; color: white; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px; margin: 10px 0; display: grid; gap: 8px; }
button.staff-link { width: 100%; text-align: start; color: inherit; background: var(--surface); }
.pair { display: flex; gap: 8px; }
.pair button { flex: 1; }
button.staff-link.open { border-color: var(--leaf); }
.hobby-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.hobby-picks span { background: var(--mint); border-radius: 999px; padding: 6px 10px; }
.hobby-picks button { border: 0; background: transparent; padding: 0 0 0 8px; }
.review-photo, .card img { width: min(100%, 420px); max-height: 360px; object-fit: contain; border-radius: 12px; background: var(--bubble); display: block; }
.campaign-line { display: flex; direction: ltr; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px; margin: 10px 0; }
.campaign-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 12px; flex: 0 0 52px; background: var(--mint); display: grid; place-items: center; }
.card img.campaign-thumb, img.campaign-thumb { width: 52px; height: 52px; max-height: 52px; }
.campaign-meta { display: grid; gap: 2px; min-width: 0; text-align: start; }
.campaign-meta small { color: var(--muted); }
.campaign-actions { display: flex; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; max-width: 280px; }
.campaign-actions input { width: 100%; }
.wallet-card { margin: 8px 0 16px; padding: 22px 24px; border-radius: 22px; background: linear-gradient(160deg, #ff6b6b, #c53636); color: white; display: grid; gap: 6px; }
.wallet-card span { color: #ffede8; font-size: 16px; }
.wallet-card strong { color: white; font-size: 40px; line-height: 1.1; }
.pay-choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.pay-choices button { width: auto; }
.campaign-edit { display: grid; gap: 8px; margin: 0 0 14px; }
.campaign-edit label { display: grid; gap: 4px; }
.filters, .row input, .row select { width: auto; }
.specs p { margin: 4px 0; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.error { color: #9d2c2c; }
.muted { color: var(--muted); }
.sub-count strong { font-size: 32px; }
.sheet-bar { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.sheet-bar .sheet-search { flex: 1; }
.sheet-shown { margin: 0 0 8px; }
.sheet-wrap { overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.sheet { width: 100%; border-collapse: collapse; font-size: 13px; }
.sheet th, .sheet td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: start; white-space: nowrap; vertical-align: middle; }
.sheet thead th { position: sticky; top: 0; background: var(--bubble); }
.sheet select { width: 100%; min-width: 88px; font: inherit; padding: 4px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.sheet button { padding: 4px 8px; border-radius: 8px; }
.sheet-tools { flex-wrap: nowrap; }
.sheet tr.picked td { background: var(--soft); }
.record-line { display: grid; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px; margin: 10px 0; }
.record-shot { width: min(100%, 280px); max-height: 220px; object-fit: contain; border-radius: 12px; background: var(--bubble); }
.top { background: var(--panel); color: white; padding: 20px; border-radius: 16px; }
.admin-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.admin-nav button {
  min-height: 72px; border-radius: 18px; border: 0; padding: 14px 12px;
  background: var(--surface); color: #c53636; font-weight: 700; font-size: 16px; line-height: 1.35;
  box-shadow: 0 8px 0 #ffd0c8, 0 14px 24px #e23b3b18;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.admin-nav button:hover { transform: translateY(-2px); background: var(--soft); color: #c53636; }
.admin-nav button:active { transform: translateY(2px); box-shadow: 0 4px 0 #ffd0c8, 0 8px 16px #e23b3b14; }
.admin-nav button.primary {
  background: linear-gradient(180deg, #ff6b6b, #e23b3b); color: white;
  box-shadow: 0 8px 0 #c53636, 0 14px 24px #ff4f4f40;
}
.admin-nav button.primary:hover { background: linear-gradient(180deg, #ff7a7a, #e23b3b); color: white; }
.admin-nav button.primary:active { box-shadow: 0 4px 0 #c53636, 0 8px 16px #ff4f4f30; }
.admin-nav button.brand-nav { padding: 10px 12px; }
.nav-lockup { display: block; width: min(100%, 260px); height: 48px; margin: 0 auto; object-fit: contain; pointer-events: none; }
@media (max-width: 720px) { .admin-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.login { max-width: 420px; margin: 12vh auto; }
[data-tip] { position: relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute; inset-inline-start: 50%; bottom: calc(100% + 6px);
  transform: translateX(-50%); z-index: 20;
  background: #3a2220; color: white; font-size: 12px; font-weight: 700;
  padding: 6px 10px; border-radius: 10px; white-space: nowrap;
  pointer-events: none; box-shadow: 0 8px 20px #3a222044;
}

/* Oct 6 2026: owner password change + SMS-code link on the login card */
.top-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.link-button { background: none; border: 0; color: var(--muted, #8a6f6a); text-decoration: underline; cursor: pointer; padding: 6px 0; font: inherit; font-size: 14px; }
.password-pane input { display: block; width: 100%; margin: 8px 0; }

/* Phase 1 (Oct 7 2026): dark mode. Light values above stay the default. */
html[data-theme="dark"] {
  --ink: #f3e6e3; --muted: #b8a19c; --line: #3b2c2a; --bg: #121011; --surface: #1c1819;
  --bubble: #2a2020; --mint: #3a2523; --soft: #241c1c; --panel: #e23b3b; --leaf: #ff5c5c; --mine: #c53636;
  color-scheme: dark;
}
html[data-theme="dark"] body, html[data-theme="dark"] :root { color: var(--ink); }
html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { background: var(--surface); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--muted); }
html[data-theme="dark"] .ghost, html[data-theme="dark"] button.ghost { color: var(--ink); }
html[data-theme="dark"] svg { color: inherit; }
/* Phase 2 (Oct 7 2026): analytics, moderation, metrics */
.an-card { display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 16px; padding: 12px; margin: 10px 0; background: var(--surface, #fff); }
.an-chart { width: 100%; height: auto; }
.an-views { fill: var(--leaf); opacity: .35; }
.an-clicks { fill: var(--leaf); }
.an-label { font-size: 9px; fill: var(--muted); }
.an-legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.an-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--leaf); display: inline-block; }
.an-dot.views { opacity: .35; }
.an-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.an-tile { display: grid; gap: 2px; background: var(--soft, #fff3ef); border-radius: 10px; padding: 6px 8px; }
.an-tile small { color: var(--muted); font-size: 11px; }
.metrics-card { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 12px 0; padding: 12px; border-radius: 16px; background: var(--surface, #fff); border: 1px solid var(--line); }
.metric { display: grid; gap: 2px; text-align: center; }
.metric strong { font-size: 22px; color: var(--leaf); }
.metric-at { grid-column: 1 / -1; text-align: center; }
.mod-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mod-chip { font-size: 12px; border-radius: 999px; padding: 2px 8px; background: var(--mint, #ffe4dc); }
.mod-chip.hot { background: #9d2c2c; color: #fff; }
.mod-text { margin: 0; padding: 8px 10px; border-inline-start: 3px solid var(--leaf); background: var(--soft, #fff3ef); border-radius: 8px; white-space: pre-wrap; }
.mod-actions { flex-wrap: wrap; }
.mod-actions button { flex: 0 1 auto; }
.mod-appeal { border-color: #e6a800; }
.lvl-escalated, .lvl-severe { border-color: #9d2c2c; }
.mod-resolved, .mod-dismissed { opacity: .75; }
.ban-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; }
.ban-form > input, .ban-form > .pair { grid-column: 1 / -1; }
.mod-history { display: grid; gap: 4px; font-size: 13px; }
.mod-legacy { margin: 12px 0; }
.mod-tabs { flex-wrap: wrap; }
.audit-log { font-size: 13px; }
@media (max-width: 520px) { .an-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .metrics-card { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ban-form { grid-template-columns: 1fr; } }
/* Phase 3 */
.tfa-banner { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border: 2px solid #f0a020; background: #fff6e0; margin: 8px 0; }
.p3-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.p3-admin .card.person { display: flex; flex-direction: column; gap: 4px; }
.p3-admin .unseen { border-inline-start: 4px solid #ff4f4f; }
.tfa-qr { width: 220px; height: 220px; background: #fff; border-radius: 12px; padding: 6px; }
.tfa-secret { direction: ltr; font-family: ui-monospace, monospace; letter-spacing: 1px; }
.recovery pre { direction: ltr; font-family: ui-monospace, monospace; font-size: 15px; background: #f6f6f6; padding: 8px; border-radius: 8px; }
.ghost.danger { color: #c0392b; }
.primary.danger { background: #c0392b; color: #fff; }
.tfa-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tfa-x { width: 34px; height: 34px; border: 0; border-radius: 10px; background: #ffe3dc; color: #c0392b; font-size: 16px; cursor: pointer; }
.tfa-confirm { border: 1px solid #f3c3b8; }
.tfa-head h2 { flex: 1 1 auto; margin: 0; }
.tfa-head .tfa-x { flex: 0 0 34px !important; width: 34px !important; min-width: 0 !important; height: 34px !important; padding: 0 !important; display: grid; place-items: center; }
/* Subscriber tools + reset-access window (Oct 7 2026) */
.sheet-tools .ban-btn, .sheet-tools .danger { background: #c0392b !important; color: #fff !important; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.sheet-tools .reset-btn { display: inline-flex; align-items: center; gap: 6px; }
.btn-ico { font-size: 14px; line-height: 1; }
.reset-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(20,10,10,.45); }
.reset-card { width: min(420px, 100%); display: grid; gap: 10px; padding: 16px; background: #fff; border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.reset-card label { display: grid; gap: 4px; }
.reset-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.reset-x { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; background: #ffe3dc; color: #c0392b; cursor: pointer; }
.reset-row { display: flex; gap: 8px; } .reset-row input { flex: 1; min-width: 0; }
.reset-note { color: #1e7a4f; }
.retention-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.extend-wrap { display: inline-flex; align-items: center; gap: 6px; }
.extend-date { width: auto; }
.ok-note { color: #1e7a4f; font-weight: 700; }
/* Profiles (Oct 7 2026) */
.p4-card { display: grid; gap: 10px; }
.p4-top { display: flex; gap: 14px; align-items: center; }
.p4-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: 0 0 72px; }
.p4-photo.letter { display: grid; place-items: center; background: #ff4f4f; color: #fff; font-size: 28px; font-weight: 700; }
.p4-info { display: grid; gap: 2px; }
.p4-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.p4-tabs button { width: auto; padding: 6px 12px; }
.p4-table { width: 100%; border-collapse: collapse; font-size: 13px; } .p4-table th, .p4-table td { padding: 6px; border-bottom: 1px solid #f0dcd8; text-align: start; }
.p4-msg { margin: 4px 0; padding: 6px 10px; border-radius: 10px; background: #f6f1f0; display: grid; } .p4-msg.mine { background: #ffe3dc; }
.p4-chat summary { cursor: pointer; font-weight: 600; }

.review-gallery { display: flex; gap: 6px; overflow-x: auto; align-items: flex-end; }
.review-gallery .review-photo { width: 140px; height: 140px; object-fit: cover; }
.bijanco { display: grid; gap: 10px; margin-bottom: 18px; }
.bijanco .bj-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bijanco .bj-head h2 { margin: 0; flex: 1; }
.bj-pill { font-size: 12px; padding: 3px 10px; border-radius: 999px; font-weight: 700; }
.bj-pill.ok { background: #d9f7e4; color: #11612f; } .bj-pill.off { background: #fff1c2; color: #6b5200; }
.bj-sub { margin: 0; font-size: 12px; } .bj-note { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--soft, #fff0ee); }
.bj-table-wrap { overflow-x: auto; border: 1px solid var(--line, #ddd); border-radius: 12px; }
.bj-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 620px; }
.bj-table th, .bj-table td { padding: 8px; border-bottom: 1px solid var(--line, #eee); text-align: start; vertical-align: top; }
.bj-table td b, .bj-table td small { display: block; } .bj-table td small { color: var(--muted, #777); margin-top: 2px; }
.bj-table tr.on { background: var(--soft, #fff4f2); }
.bj-table pre { white-space: pre-wrap; font: inherit; margin: 4px 0; }
.bj-acts { display: grid; gap: 4px; min-width: 96px; } .bj-acts button { padding: 6px 8px; font-size: 12px; }
.bj-prio, .bj-st { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--soft, #eee); white-space: nowrap; }
.bj-prio.high { background: #ffd9d6; color: #8a1a12; } .bj-prio.medium { background: #fff1c2; color: #6b5200; } .bj-prio.low { background: #e5eefc; color: #1d3f78; }
.bj-st.published { background: #d9f7e4; color: #11612f; } .bj-st.failed { background: #ffd9d6; color: #8a1a12; } .bj-st.executing { background: #e5eefc; color: #1d3f78; }
.bj-chat { border: 1px solid var(--line, #ddd); border-radius: 12px; padding: 10px; display: grid; gap: 8px; background: var(--surface, #fff); color: var(--ink, #222); }
.bj-chat-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bj-chat-log { max-height: 260px; overflow-y: auto; display: grid; gap: 6px; }
.bj-msg { padding: 8px 10px; border-radius: 12px; white-space: pre-wrap; max-width: 92%; font-size: 13px; }
.bj-msg.user { background: var(--mine, #c53636); color: #fff; justify-self: end; } .bj-msg.bot { background: var(--soft, #f3f3f3); justify-self: start; }
.bj-chat-send { display: flex; gap: 8px; align-items: end; } .bj-input { flex: 1; resize: vertical; background: transparent; color: inherit; }
@media (max-width: 700px) {
  .bj-table { min-width: 0; } .bj-table thead { display: none; }
  .bj-table tr { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 10px; border-bottom: 1px solid var(--line, #eee); }
  .bj-table td { border: 0; padding: 0; } .bj-table td:first-child, .bj-table td.bj-acts { grid-column: 1 / -1; }
  .bj-table td[data-k]::before { content: attr(data-k); display: block; font-size: 11px; color: var(--muted, #777); }
  .bj-acts { grid-template-columns: repeat(4, 1fr); }
}
.bj-acts button:disabled { opacity: .4; cursor: not-allowed; }

/* Oct 19 2026: Control panel language switch (one language on screen) */
.admin-lang { width: auto; min-width: 0; padding: 6px 10px; border-radius: 10px; font: inherit; }
.login-lang { display: flex; justify-content: flex-end; }
.pod-install-progress { padding: 8px; border-radius: 10px; background: rgba(226, 59, 59, .06); }
/* Oct 19 2026: podcast tools — Check now link and the update notice */
.pod-check-now { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }
.pod-check-now[disabled] { opacity: .6; cursor: default; }
.pod-update-notice { display: grid; gap: 6px; padding: 10px; border-radius: 10px; border: 1px solid rgba(217, 119, 6, .45); background: rgba(217, 119, 6, .08); }
.pod-update-notice ul { margin: 0; padding-inline-start: 18px; }

/* #194: subscriber thumbnails + row menu */
.sub-name { display: inline-flex; align-items: center; gap: 8px; }
.sub-thumb { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; display: inline-grid; place-items: center; background: #eee; font-weight: 700; }
.row-menu { position: relative; }
.row-menu > summary { list-style: none; cursor: pointer; padding: 6px 10px; border-radius: 8px; white-space: nowrap; }
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu-list { position: static; margin-top: 4px; z-index: 20; display: grid; min-width: 190px; background: #fff; border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.15); padding: 4px; }
.row-menu-list .menu-item { justify-content: flex-start; text-align: start; width: 100%; }
.row-menu-list .menu-item, .row-menu-list button.menu-item.danger { background: transparent !important; color: inherit; border: 0; box-shadow: none; gap: 8px; display: flex; align-items: center; padding: 8px 10px; border-radius: 8px; }
.row-menu-list .menu-item:hover { background: #fdecea !important; }
.row-menu-list button.menu-item.danger { color: #b00020 !important; }
.pill.danger-pill { background: #fde7ea; color: #b00020; font-size: .75rem; padding: 1px 6px; border-radius: 999px; }

/* #196: tile count badges + owner «حسابي» */
.admin-nav button { position: relative; }
.nav-badge { display: inline-block; margin-inline-start: 6px; min-width: 1.4em; padding: 1px 7px; border-radius: 999px; font-size: 0.78em; font-weight: 700; line-height: 1.5; background: rgba(127,127,127,.18); color: inherit; vertical-align: middle; }
.nav-badge.hot { background: #e5484d; color: #fff; box-shadow: 0 0 0 2px rgba(229,72,77,.25); }
.me-nav { font-weight: 700; }
.me-pane .stack-field { display: grid; gap: 4px; }

/* #197: «حسابي والمدراء» — two separated sections */
.acct-managers { display: grid; gap: 16px; }
.acct-managers > section.card { padding: 14px; border-radius: 14px; }
.acct-managers .sec-head { margin-top: 0; }
/* #211 customer requests */
.inq-tabs { flex-wrap: wrap; gap: 8px; }
.inq-card { display: grid; gap: 10px; padding: 14px; border-radius: 14px; }
.inq-card.inq-new { border-inline-start: 4px solid #e53935; }
.inq-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inq-head strong { font-size: 17px; }
.inq-when { margin-inline-start: auto; font-size: 13px; }
.inq-badge, .inq-kind { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: #f2f2f2; }
.inq-badge-new { background: #ffe1dd; color: #b3261e; } .inq-badge-replied { background: #dff3e7; color: #1e7a4f; } .inq-badge-closed { background: #eee; color: #555; }
.inq-msg { margin: 0; white-space: pre-wrap; line-height: 1.6; background: #fffaf3; border-radius: 10px; padding: 10px 12px; }
.inq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; }
.inq-field { display: grid; gap: 2px; min-width: 0; font-size: 14px; }
.inq-field > bdi, .inq-field > span:last-child { overflow-wrap: anywhere; }
.inq-field .muted { font-size: 12px; }
.inq-actions { flex-wrap: wrap; gap: 8px; }
.inq-actions .button-link { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 10px; text-decoration: none; background: #ffe9e4; color: inherit; font-weight: 600; }