/* ===========================================================================
   Estakhrjo Experience System — Persian RTL / Fluid / Touch-first
   A focused layer over the existing application: semantic tokens, flexible
   layouts, accessible interaction states and an admin-editable visual system.
   =========================================================================== */

:root {
  --content-max: 1280px;
  --sidebar-width: 272px;
  --touch-target: 44px;
  --tap-gap: clamp(8px, 1.4vw, 14px);
  --space-1: clamp(6px, .7vw, 10px);
  --space-2: clamp(10px, 1.2vw, 16px);
  --space-3: clamp(16px, 2vw, 24px);
  --space-4: clamp(24px, 4vw, 48px);
  --page-inline: clamp(16px, 3.8vw, 52px);
  --radius-control: 14px;
  --radius-surface: 20px;
  --base-font-size: 16px;
  --body-leading: 1.85;
  --heading-scale: 1;
  --card-min: 272px;
  --surface-elevation: 0 14px 38px rgba(1, 12, 29, .18);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand) 34%, transparent);
}

/* ---- Foundations: Persian legibility and a calmer visual hierarchy ---- */
html { font-size: var(--base-font-size); text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: var(--body-leading);
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
  background: radial-gradient(circle at 94% -8%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 32rem), var(--bg);
}
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .34; background-image: linear-gradient(color-mix(in srgb, var(--border) 42%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--border) 32%, transparent) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, #000, transparent 60%); }
body > * { position: relative; }
::selection { background: var(--brand); color: #032330; }

h1, h2, h3, h4, h5, h6 { font-weight: 800; letter-spacing: 0; text-wrap: balance; }
h1 { font-size: clamp(2rem, 4.8vw, 4.4rem); }
h2 { font-size: clamp(1.45rem, 2.65vw, 2.2rem); }
h3 { font-size: clamp(1.05rem, 1.7vw, 1.35rem); }
p, li { max-inline-size: 76ch; }
small, .hint { line-height: 1.7; }

.container { width: min(var(--content-max), 100%); max-width: none; margin-inline: auto; padding-inline: var(--page-inline); }
main#app { min-width: 0; }
.orb { opacity: .28; filter: blur(110px); }
.cursor-glow { display: none; }

/* ---- Reusable controls: all operation controls receive a reliable hit area ---- */
button, input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea { font: inherit; }
button, .btn, .hdr-ic, .theme-toggle, .loc-pill, .nav-burger, .nav-bell, .p-item, .pm-item, .pm-fab, .pms-item, .tg-send, .tg-hact, .cfg-tgl, .cfg-tri, .admin-nav-item, .admin-command, .admin-command-deck button, .shop-filter-main, .shop-filter-sub, .tag-chip, .day-tab, .role-opt, .card-fav, .cv-step-pill, .cv-cert-chip {
  min-block-size: var(--touch-target);
  min-inline-size: var(--touch-target);
}
button, .btn, .p-item, .pm-item, .pm-fab, .pms-item, .admin-nav-item, .admin-command, .admin-command-deck button, .shop-filter-main, .shop-filter-sub, .tag-chip, .day-tab, .role-opt { touch-action: manipulation; }
.btn { min-height: var(--touch-target); padding: 10px clamp(14px, 2vw, 22px); border-radius: var(--radius-control); line-height: 1.25; white-space: normal; }
.btn-sm { min-height: var(--touch-target); padding: 8px 12px; font-size: .78rem; }
.btn-lg { min-height: 52px; }
.btn:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; box-shadow: var(--focus-ring); }
button:disabled, .btn:disabled { cursor: not-allowed; opacity: .52; transform: none !important; }

input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea, .fg input, .fg select, .fg textarea, .hero-search input, .hero-search select {
  min-block-size: var(--touch-target);
  border-radius: var(--radius-control);
  line-height: 1.6;
}
textarea { min-height: 112px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { inline-size: 20px; block-size: 20px; accent-color: var(--brand); }

/* ---- Public shell: avoid fragile widths and improve scanability ---- */
.announce { min-height: 40px; padding: 8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); font-size: clamp(.72rem, 1.8vw, .82rem); }
.nav { width: min(var(--content-max), calc(100% - clamp(20px, 4vw, 56px))); border-radius: 18px; background: color-mix(in srgb, var(--glass) 88%, transparent); }
.nav-inner { width: 100%; max-width: none; min-height: 60px; padding: 8px clamp(10px, 1.8vw, 18px); }
.nav-brand { flex: 0 0 auto; font-size: 1.08rem; }
.nav-links { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a { min-block-size: var(--touch-target); display: inline-flex; align-items: center; padding-inline: clamp(10px, 1.3vw, 15px); }
.nav-actions { gap: 6px; }
.nav-actions > * { flex: 0 0 auto; }
.nav-mobile-tools { display: none; }
.hdr-ic, .theme-toggle, .loc-pill, .nav-bell { min-width: var(--touch-target); min-height: var(--touch-target); }
.loc-pill { padding-inline: 12px; }

.hero { min-height: min(780px, calc(100svh - 36px)); padding-block: clamp(112px, 16vh, 160px) clamp(52px, 7vh, 88px); }
.hero-wrap { width: min(100%, 980px); padding-inline: var(--page-inline) !important; }
.hero h1 { font-size: clamp(2rem, 7vw, 4.75rem) !important; max-width: 16ch; }
.hero p, .hero-sub-inline { max-width: min(100%, 700px); font-size: clamp(.93rem, 1.8vw, 1.1rem); }
.glass-widget { padding: clamp(14px, 2.4vw, 26px); border-radius: clamp(18px, 2.5vw, 28px); }
.hero-search form, .hero-search-row { grid-template-columns: minmax(0, 2fr) minmax(150px, 1fr) minmax(130px, .85fr) auto; }
.section { padding-block: clamp(52px, 8vw, 96px); }
.section-sm { padding-block: clamp(36px, 5vw, 64px); }
.sec-head { gap: var(--space-2); margin-bottom: clamp(22px, 3vw, 38px); }
.sec-title p { max-width: 64ch; }
.cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-min)), 1fr)); gap: clamp(12px, 2vw, 24px); }
.features-grid, .testi-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: clamp(12px, 1.8vw, 20px); }
.card, .panel, .table-card, .p-table, .op-manager, .op-editor, .sc-manager, .sc-editor { border-radius: var(--radius-surface); }
.card { min-width: 0; box-shadow: var(--surface-elevation); }
.card:hover { transform: translateY(-4px); }
.card-body { padding: clamp(16px, 2vw, 22px); }
.card-img { height: clamp(150px, 18vw, 196px); }
.card-fav { width: var(--touch-target); height: var(--touch-target); }
.card-foot { gap: var(--space-1); flex-wrap: wrap; }
.card-foot .btn { margin-inline-start: auto; }

/* ---- Fluid application shell and dashboard hierarchy ---- */
.panel-shell { grid-template-columns: minmax(228px, var(--sidebar-width)) minmax(0, 1fr); min-height: 100dvh; padding-top: 78px; }
.p-side { width: auto; min-width: 0; padding: 14px 12px; top: 78px; height: calc(100dvh - 78px); background: color-mix(in srgb, var(--card) 92%, transparent); }
.p-item { min-height: var(--touch-target); padding: 8px 10px; border-radius: 12px; font-size: .82rem; }
.p-item .pi-ic { width: 28px; height: 28px; }
.p-nav-lbl { padding-top: 14px; }
.p-main { min-width: 0; padding: clamp(18px, 3.4vw, 48px) clamp(16px, 3.8vw, 54px) max(84px, env(safe-area-inset-bottom)); }
.panel-hero { min-height: clamp(156px, 20vw, 220px); border-radius: var(--radius-surface); }
.panel-hero-content { padding: clamp(18px, 3vw, 34px); }
.panel-hero-content h2 { font-size: clamp(1.35rem, 2.8vw, 2rem); }
.ph-chips { gap: 7px; }
.ph-chip { min-height: 32px; display: inline-flex; align-items: center; }
.w-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 205px), 1fr)); gap: clamp(10px, 1.5vw, 16px); }
.w-card { min-height: 162px; padding: clamp(16px, 2vw, 22px); border-radius: var(--radius-surface); }
.w-card .w-ic { width: var(--touch-target); height: var(--touch-target); }
.p-table { overflow-x: auto; overscroll-behavior-inline: contain; }
.p-table table { min-width: 620px; }
.p-table-head { min-height: 64px; padding: 10px clamp(14px, 2vw, 20px); gap: 12px; }
.p-table td, .p-table th { padding: 13px clamp(12px, 1.8vw, 20px); }
.panel-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.form-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: var(--space-2); }

/* ---- Admin: a clear operational workspace, with no tiny controls ---- */
.admin-shell { grid-template-columns: minmax(210px, 250px) minmax(0, 1fr); gap: clamp(12px, 2vw, 22px); }
.admin-nav { border-radius: var(--radius-surface); padding: 9px; }
.admin-nav-item { min-height: var(--touch-target); padding: 8px 10px; font-size: .78rem; }
.admin-nav-item > span { width: 28px; height: 28px; }
.admin-overview-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--space-2); }
.admin-score { min-height: 158px; padding: 18px; border-radius: var(--radius-surface); }
.admin-command-deck, .admin-priority, .admin-billing-table, .admin-audit, .admin-process { padding: clamp(16px, 2.4vw, 24px); border-radius: var(--radius-surface); }
.admin-command-deck > div:last-child { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.admin-command-deck button { min-height: 144px; padding: 15px; border-radius: 16px; }
.admin-view-head { margin-bottom: var(--space-3); }
.admin-view-head h3 { font-size: clamp(1.18rem, 2.5vw, 1.6rem); }
.admin-member-card { grid-template-columns: 46px minmax(180px, 1fr) max-content max-content; min-height: 84px; padding: 12px; border-radius: 16px; }
.admin-member-ic { width: 42px; height: 42px; }
.admin-member-actions .btn { min-height: var(--touch-target); }
.admin-credential-strip { min-height: var(--touch-target); padding: 9px 11px; font-size: .72rem; }
.admin-create-member { padding: clamp(16px, 2.4vw, 24px); border-radius: var(--radius-surface); }
.admin-create-grid, .admin-member-edit-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr)); gap: var(--space-2); }
.admin-create-grid input, .admin-create-grid select, .admin-member-edit-grid input, .admin-member-edit-grid select { min-height: var(--touch-target); font-size: .82rem; }
.admin-create-grid .btn, .admin-member-edit-grid .btn { min-height: var(--touch-target); }
.admin-password-field button { min-height: var(--touch-target); }
.admin-filter-bar { min-height: 60px; padding: 8px; border-radius: 16px; }
.admin-filter-bar label { min-height: var(--touch-target); }
.admin-filter-bar button { min-height: var(--touch-target); }

/* ---- Design studio, powered by the admin setting contract ---- */
.design-studio { display: grid; gap: var(--space-3); }
.design-studio-head { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-2); padding:clamp(18px,2.7vw,28px); border:1px solid color-mix(in srgb,var(--brand) 30%,var(--border)); border-radius:var(--radius-surface); background:linear-gradient(125deg,color-mix(in srgb,var(--brand) 16%,transparent),color-mix(in srgb,var(--gold) 7%,transparent)); }
.design-studio-head h3 { margin:4px 0 6px; font-size:clamp(1.25rem,2.4vw,1.7rem); }
.design-studio-head p { margin:0; color:var(--muted); font-size:.84rem; }
.design-studio-head .admin-view-actions { align-self:center; }
.design-studio-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--space-2); }
.design-card { grid-column:span 4; min-width:0; padding:clamp(16px,2vw,22px); border:1px solid var(--border); border-radius:var(--radius-surface); background:var(--card); box-shadow:var(--surface-elevation); }
.design-card.wide { grid-column:span 8; }
.design-card.full { grid-column:1/-1; }
.design-card-head { display:flex; align-items:flex-start; gap:10px; margin-bottom:15px; }
.design-card-head > span { width:var(--touch-target); height:var(--touch-target); display:grid; place-items:center; flex:0 0 auto; border-radius:14px; background:color-mix(in srgb,var(--brand) 14%,transparent); font-size:1.25rem; }
.design-card h4 { margin:0 0 3px; font-size:1rem; }
.design-card p { margin:0; color:var(--muted); font-size:.75rem; line-height:1.75; }
.design-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%, 150px),1fr)); gap:12px; }
.design-field { display:grid; gap:6px; min-width:0; color:var(--muted); font-size:.76rem; font-weight:700; }
.design-field input, .design-field select { width:100%; min-width:0; min-height:var(--touch-target); padding:8px 10px; border:1px solid var(--border); border-radius:12px; background:var(--card-2); color:var(--text); }
.design-color { display:grid; grid-template-columns:36px minmax(0,1fr); align-items:center; gap:8px; }
.design-color input[type="color"] { width:36px; min-width:36px; height:36px; min-height:36px; padding:2px; border-radius:10px; cursor:pointer; }
.design-color input[type="text"] { direction:ltr; }
.design-module-links { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%, 150px),1fr)); gap:8px; }.design-module-links .btn { width:100%; justify-content:flex-start; }
.design-preview { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(220px,.7fr); gap:var(--space-2); align-items:stretch; }
.design-preview-canvas { min-height:210px; display:grid; align-content:center; gap:12px; padding:clamp(18px,3vw,32px); overflow:hidden; border:1px solid var(--border); border-radius:18px; background:radial-gradient(circle at 88% 10%,color-mix(in srgb,var(--brand) 22%,transparent),transparent 12rem),var(--bg-2); }
.design-preview-canvas h5 { margin:0; font-size:clamp(1.1rem,2vw,1.5rem); }.design-preview-canvas p { margin:0; color:var(--muted); }
.design-preview-canvas > div { display:flex; flex-wrap:wrap; gap:8px; }.design-preview-canvas .btn { min-width:130px; }
.design-preview-notes { display:grid; align-content:start; gap:8px; padding:16px; border:1px dashed color-mix(in srgb,var(--brand) 35%,var(--border)); border-radius:18px; background:color-mix(in srgb,var(--brand) 6%,transparent); }.design-preview-notes b { font-size:.9rem; }.design-preview-notes span { color:var(--muted); font-size:.74rem; line-height:1.75; }
.design-actions { position:sticky; bottom:14px; z-index:8; display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); padding:12px; border:1px solid color-mix(in srgb,var(--brand) 35%,var(--border)); border-radius:16px; background:color-mix(in srgb,var(--card-solid) 94%,transparent); box-shadow:0 12px 32px rgba(1,8,23,.28); backdrop-filter:blur(16px); }.design-actions p { margin:0; color:var(--muted); font-size:.74rem; }.design-actions > div { display:flex; flex-wrap:wrap; gap:8px; }

/* ---- Breakpoint policy: components reflow; no hard desktop-only geometry ---- */
@media (max-width: 1120px) {
  :root { --sidebar-width: 238px; }
  .hero-search form, .hero-search-row { grid-template-columns: minmax(0, 1fr) minmax(130px, .7fr) auto; }
  .hero-search form > :first-child, .hero-search-row > :first-child { grid-column: 1 / -1; }
  .admin-shell { grid-template-columns: 1fr; }
  .admin-nav { position: static; display:flex; overflow-x:auto; overscroll-behavior-inline:contain; }
  .admin-nav-item { flex:0 0 auto; }
  .design-card { grid-column:span 6; }.design-card.wide { grid-column:span 6; }
}

@media (max-width: 900px) {
  .nav { top: 8px; width: calc(100% - 20px); }
  .nav-inner { min-height: 56px; }
  .nav-name, .loc-pill b { display:none; }
  .nav-logo-w { width:40px; height:40px; }
  .nav-links { position:fixed; top:calc(100% + 8px); right:0; left:0; display:none; padding:10px; border:1px solid var(--border); border-radius:18px; background:var(--card-solid); box-shadow:var(--sh-lg); }
  .nav-links.open { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .nav-links a { justify-content:center; }
  .nav-burger { display:flex; min-width:var(--touch-target); min-height:var(--touch-target); align-items:center; justify-content:center; }
  .nav-actions #navAuth .btn { min-width:var(--touch-target); padding-inline:10px; font-size:0; }.nav-actions #navAuth .btn::before { content:'↪'; font-size:1.15rem; }
  .hero { min-height: min(700px, calc(100svh - 24px)); padding-block:106px 54px; }
  .panel-shell { display:block; padding-top:70px; }
  .p-side { display:none; }
  .p-main { padding:16px 16px calc(96px + env(safe-area-inset-bottom)); }
  .p-mbar { min-height:64px; padding-bottom:max(6px, env(safe-area-inset-bottom)); }
  .pm-item, .pm-fab { min-height:52px; min-width:52px; }
  .panel-hero { min-height:148px; }.panel-hero-content { padding:18px; }
  .ph-chips { overflow-x:auto; flex-wrap:nowrap; padding-bottom:2px; }.ph-chip { white-space:nowrap; }
  .profile-shell { grid-template-columns:1fr; }
  .design-preview { grid-template-columns:1fr; }
}

@media (max-width: 680px) {
  :root { --page-inline: 16px; --card-min: 100%; }
  body { font-size: .95rem; }
  .announce { padding-inline:12px; }.announce a { min-height:var(--touch-target); display:inline-flex; align-items:center; }
  .nav-actions { gap:3px; }.hdr-ic, .theme-toggle, .loc-pill { width:var(--touch-target); height:var(--touch-target); }
  .hero h1 { font-size:clamp(1.85rem,9vw,2.7rem) !important; }.hero-search form, .hero-search-row { grid-template-columns:1fr; }.hero-search form > *, .hero-search-row > * { grid-column:auto !important; }.hero-search .btn { width:100%; }
  .section { padding-block:44px; }.sec-head { align-items:flex-start; }.sec-link { min-height:var(--touch-target); align-items:center; }
  .card-foot .btn { width:100%; margin-inline-start:0; }.card-img { height:168px; }
  .panel, .op-manager, .op-editor, .sc-manager, .sc-editor { padding:16px; }
  .w-grid, .panel-grid, .cards { grid-template-columns:1fr; }.w-card { min-height:148px; }
  .p-topbar, .admin-view-head, .admin-priority, .design-studio-head, .design-actions { align-items:flex-start; flex-direction:column; }.p-actions, .admin-view-actions, .design-actions > div { width:100%; }.p-actions .btn, .admin-view-actions .btn { flex:1; }
  .admin-overview-grid, .admin-queue-grid, .admin-experience-grid, .admin-plan-grid { grid-template-columns:1fr; }.admin-command-deck > div:last-child { grid-template-columns:1fr 1fr; }
  .admin-member-card { grid-template-columns:42px minmax(0,1fr); }.admin-member-meta { grid-column:2; justify-self:start; align-items:flex-start; flex-direction:row; }.admin-member-actions { grid-column:1/-1; width:100%; }.admin-member-actions .btn { flex:1; }.admin-member-card-auth > .admin-credential-strip,.admin-member-card-auth > .admin-member-edit { grid-column:1/-1; }
  .admin-create-grid,.admin-member-edit-grid { grid-template-columns:1fr; }.admin-filter-bar { align-items:stretch; flex-wrap:wrap; overflow:visible; }.admin-filter-bar label { flex-basis:100%; }
  .design-studio-grid { grid-template-columns:1fr; }.design-card,.design-card.wide,.design-card.full { grid-column:auto; }.design-fields { grid-template-columns:1fr; }.design-actions { position:static; }.design-actions .btn { flex:1; }
  .op-repeat,.op-repeat[data-op-row="coach"],.op-repeat[data-op-row="course"] { grid-template-columns:1fr; }
}

/* Admin-selected density / motion preferences are applied from safe visual tokens. */
:root[data-ui-density="compact"] .p-item { min-block-size: 40px; padding-block: 6px; }
:root[data-ui-density="compact"] .w-card, :root[data-ui-density="compact"] .admin-score { min-height: 136px; padding: 14px; }
:root[data-ui-density="relaxed"] .p-item { min-block-size: 50px; }
:root[data-ui-density="relaxed"] .w-grid, :root[data-ui-density="relaxed"] .cards { gap: clamp(16px, 2.4vw, 28px); }
:root[data-ui-contrast="high"] { --border: color-mix(in srgb, var(--brand) 45%, #ffffff 18%); --muted: color-mix(in srgb, var(--text) 74%, var(--bg)); }
:root[data-ui-motion="reduced"] *, :root[data-ui-motion="reduced"] *::before, :root[data-ui-motion="reduced"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }

/* ---- Mobile repair: one clear header, no overflowing icon rail, readable footer ---- */
@media (max-width: 760px) {
  /* A phone has room for brand + identity/login + menu only. Secondary actions
     move into the opened menu instead of overflowing the viewport. */
  .nav { top: 8px; width: calc(100% - 16px); overflow: visible; }
  .nav-inner { min-height: 58px; gap: 5px; padding-inline: 8px; }
  .nav-brand { min-width: var(--touch-target); gap: 0; }
  .nav-name { display: none; }
  .nav-actions { min-width: 0; margin-inline-start: auto; gap: 4px; }
  .nav-actions > .hdr-ic, .nav-actions > .theme-toggle, .nav-actions > .loc-pill { display: none !important; }
  .nav-actions #navAuth .btn.btn-ghost { display: none !important; }
  .nav-actions #navAuth .btn.btn-primary { min-width: var(--touch-target); min-height: var(--touch-target); padding-inline: 10px; font-size: .76rem; white-space: nowrap; }
  .nav-actions #navAuth .btn.btn-primary::before { content: none; }
  .nav-actions #navAuth .nav-bell { width: var(--touch-target); height: var(--touch-target); }
  .nav-burger { display: flex; width: var(--touch-target); height: var(--touch-target); min-width: var(--touch-target); min-height: var(--touch-target); padding: 0; align-items: center; justify-content: center; }
  .nav-links { position: absolute; top: calc(100% + 8px); right: 0; left: 0; width: auto; display: none; grid-template-columns: 1fr 1fr; gap: 6px; padding: 9px; transform: none; border-radius: 18px; background: var(--card-solid); box-shadow: var(--sh-lg); }
  .nav-links.open { display: grid; }
  .nav-links a { min-height: var(--touch-target); justify-content: flex-start; padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; font-size: .8rem; }
  .nav-mobile-tools { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
  .nav-mobile-tools > * { min-height: var(--touch-target); display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--card-2); color: var(--text); font: inherit; font-size: .76rem; font-weight: 700; }
  .nav-mobile-tools button { cursor: pointer; }

  /* Footer is content, not a squeezed desktop spreadsheet. */
  .footer { margin-top: 48px; padding-bottom: calc(126px + env(safe-area-inset-bottom)); }
  .footer .container { padding-inline: 12px; }
  .footer-glass { padding: 22px 18px 20px; border-radius: 22px; }
  .footer-grid { grid-template-columns: 1fr; gap: 14px; }
  .footer-brand { padding-bottom: 6px; }
  .footer-brand p { max-width: 42ch; margin: 10px 0 14px; font-size: .82rem; line-height: 1.9; }
  .footer-social { gap: 8px; }
  .footer-social a { width: var(--touch-target); height: var(--touch-target); }
  .footer-col { padding: 14px; border: 1px solid var(--border); border-radius: 15px; background: color-mix(in srgb, var(--card-2) 74%, transparent); }
  .footer-col h4 { margin-bottom: 7px; font-size: .95rem; }
  .footer-col a { min-height: var(--touch-target); display: flex; align-items: center; margin: 0; font-size: .86rem; }
  .footer-bottom { margin-top: 20px; padding-top: 16px; font-size: .72rem; line-height: 1.8; }
  .newsletter { display: grid; grid-template-columns: minmax(0, 1fr) var(--touch-target); gap: 8px; }
  .newsletter .btn { min-width: var(--touch-target); padding: 0; }

  /* Keep fixed navigation clear of the last footer/control content. */
  body { padding-bottom: calc(116px + env(safe-area-inset-bottom)) !important; }
  .bottom-nav { right: 8px; left: 8px; bottom: max(8px, env(safe-area-inset-bottom)); min-height: 72px; padding: 5px 3px max(5px, env(safe-area-inset-bottom)); border-radius: 18px; }
  .bottom-nav a { min-height: 58px; justify-content: center; padding: 5px 1px; font-size: .67rem; }
  .bottom-nav a span { font-size: 1.22rem; }
  .m-fab, .m-sheet { display: none !important; }
}

@media (max-width: 380px) {
  .nav-actions #navAuth .btn.btn-primary { font-size: 0; width: var(--touch-target); padding: 0; }
  .nav-actions #navAuth .btn.btn-primary::after { content: '↪'; font-size: 1.05rem; }
  .nav-links { grid-template-columns: 1fr; }
  .nav-mobile-tools { grid-template-columns: 1fr 1fr; }
  .bottom-nav a { font-size: .62rem; }
}

/* ---- Dashboard mobile shell and session management form ---- */
@media (max-width: 900px) {
  body[data-page="dashboard"] .p-main { padding: 10px 14px calc(122px + env(safe-area-inset-bottom)); }
  body[data-page="dashboard"] .p-main :is(input, select, textarea) { max-inline-size: 100%; min-height: var(--touch-target); font-size: max(16px, 1rem); }
  body[data-page="dashboard"] .p-main :is(input, select) { color-scheme: dark; }
  body[data-page="dashboard"] .p-main textarea { min-height: 112px; }

  /* The compact panel header has one job: identity, context, inbox. */
  .p-mtop { top: max(8px, env(safe-area-inset-top)); min-height: 64px; margin-bottom: 14px; padding: 8px 10px; gap: 8px; }
  .pmt-r { flex: 1 1 auto; min-width: 0; gap: 8px; }
  .pmt-r > div { min-width: 0; }
  .pmt-r b { overflow: hidden; text-overflow: ellipsis; }
  .pmt-status { display: block; margin-top: 2px; }
  .pmt-tab { flex: 0 1 auto; max-width: 11ch; font-size: .7rem; text-overflow: ellipsis; }
  .pmt-l { margin-right: 0; gap: 4px; }
  .pmt-bell { width: var(--touch-target); height: var(--touch-target); min-width: var(--touch-target); min-height: var(--touch-target); }

  /* Five equal actions; no elevated centre button that hides its own label. */
  .p-mbar { min-height: 76px; right: 8px; left: 8px; bottom: max(8px, env(safe-area-inset-bottom)); align-items: center; gap: 2px; padding: 6px 4px; border-radius: 20px; }
  .pm-item, .pm-fab { flex: 1 1 0; width: auto; min-width: var(--touch-target); min-height: 60px; height: 60px; margin: 0; padding: 5px 2px; border-radius: 14px; box-shadow: none; transform: none; }
  .pm-fab { position: relative; flex-direction: column; gap: 3px; background: rgba(34,211,238,.12); color: var(--brand); border: 1px solid rgba(34,211,238,.26); font-size: 1.15rem; }
  .pm-fab:active { transform: scale(.96); }
  .pm-fab small { position: static; bottom: auto; color: inherit; font-size: .64rem; line-height: 1.2; white-space: nowrap; }
  .pm-item small { font-size: .64rem; line-height: 1.2; white-space: nowrap; }
  .pm-item span, .pm-fab span { font-size: 1.16rem; line-height: 1; }

  .work-pool { padding: 16px; margin-bottom: 14px; }
  .wp-head { align-items: flex-start; margin-bottom: 12px; }
  .wp-head > div:last-child { width: 100%; justify-content: space-between; }
  .wp-head > div:last-child .btn { min-height: var(--touch-target); }
  .wsn-grid { grid-template-columns: 1fr; gap: 10px; }
  .wsn { min-height: 158px; padding: 15px 16px; }
  .wsn .t { padding-left: 46px; line-height: 1.8; }
  .wsn .d { margin-top: 5px; }
  .wsn .del { top: 9px; left: 9px; width: var(--touch-target); height: var(--touch-target); display: grid; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--card); font-size: 1rem; }
  .wsn .pr { margin-top: 11px; font-size: .9rem; }
  .wsn .pr small { color: var(--muted); font-weight: 500; }
  .wsn-add { width: 100%; min-height: 76px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; background: transparent; font: inherit; font-size: .95rem; }
  .wsn-add span { font-size: 1.4rem; }

  .wsn-session-form { margin-top: 14px; padding: 16px; border: 1px dashed var(--border-strong); border-radius: 18px; background: var(--card-2); }
  .wsn-session-form[hidden] { display: none; }
  .wsn-session-form-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
  .wsn-session-form-head h3 { margin: 0; font-size: 1rem; }
  .wsn-session-form-head p { margin: 4px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.75; }
  .wsn-session-form-head .btn { flex: 0 0 auto; }
  .wsn-session-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .wsn-session-fields .fd { min-width: 0; gap: 6px; }
  .wsn-session-fields .fd > span { color: var(--muted); font-size: .76rem; font-weight: 800; }
  .wsn-session-fields .fd :is(input, select) { width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--card-solid); color: var(--text); font: inherit; }
  .wsn-session-fields .fd :is(input, select):focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(34,211,238,.14); }
  .wsn-session-price { grid-column: 1 / -1; }
  .wsn-session-price small { color: var(--muted2); font-size: .7rem; }
  .wsn-session-actions { display: flex; gap: 8px; margin-top: 16px; }
  .wsn-session-actions .btn { flex: 1; justify-content: center; }
}

@media (max-width: 540px) {
  .pmt-date, .pmt-tab { display: none; }
  .wsn-session-form-head { align-items: stretch; flex-direction: column; }
  .wsn-session-form-head .btn { align-self: flex-start; }
}

@media (max-width: 380px) {
  .wsn-session-fields { grid-template-columns: 1fr; }
  .wsn-session-price { grid-column: auto; }
  .pm-item small, .pm-fab small { font-size: .58rem; }
}

/* ---- Public mobile: reveal one task at a time, never a cropped desktop row ---- */
@media (max-width: 680px) {
  body[data-page="index"] .deal-strip { padding: 18px 16px; border-radius: 20px; }
  body[data-page="index"] .deal-head { align-items: flex-start; gap: 10px; margin-bottom: 12px; }
  body[data-page="index"] .deal-head .d-t { font-size: 1.08rem; gap: 6px; }
  body[data-page="index"] .deal-count { gap: 3px; }
  body[data-page="index"] .deal-count span { min-width: 31px; padding: 6px 2px; font-size: .82rem; }
  body[data-page="index"] .deal-count i { font-size: .9rem; }
  body[data-page="index"] .deal-row { gap: 10px; padding: 3px 1px 8px; scroll-snap-type: inline mandatory; scroll-padding-inline: 1px; }
  body[data-page="index"] .deal-card { flex-basis: calc(100% - 2px); min-width: 0; min-height: 238px; padding: 13px; scroll-snap-align: start; }
  body[data-page="index"] .deal-card .dc-img { height: 112px; }
  body[data-page="index"] .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  body[data-page="index"] .stat-pill { min-height: 118px; padding: 16px 10px; }

  /* Ad filters become a predictable two-column control matrix, not scattered pills. */
  body[data-page="ads"] .sec-head { align-items: stretch; margin-bottom: 20px; }
  body[data-page="ads"] .sec-head .btn { width: 100%; }
  body[data-page="ads"] .city-scope-bar { align-items: stretch; flex-direction: column; padding: 12px; }
  body[data-page="ads"] .city-scope-bar select { width: 100%; min-height: var(--touch-target); }
  body[data-page="ads"] .filters { gap: 10px; margin-bottom: 18px; }
  body[data-page="ads"] .fchips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body[data-page="ads"] .fchip { min-width: 0; min-height: var(--touch-target); display: flex; align-items: center; justify-content: center; padding: 8px; border-radius: 14px; text-align: center; line-height: 1.35; }
  body[data-page="ads"] .panel-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* A fixed navigator must not visually expose the content underneath it. */
  .bottom-nav { background: color-mix(in srgb, var(--card-solid) 97%, var(--bg)) !important; box-shadow: 0 12px 32px rgba(1,8,23,.46); }
  .bottom-nav + * { scroll-margin-bottom: 132px; }
  body { scroll-padding-bottom: calc(132px + env(safe-area-inset-bottom)); }
}

/* ---- Messaging: an empty inbox is an actionable state, not a broken void ---- */
.tg-thread-empty { flex: 1; min-height: 260px; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; color: var(--muted); }
.tg-thread-empty > span { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--brand) 38%, var(--border)); border-radius: 19px; background: color-mix(in srgb, var(--brand) 10%, transparent); font-size: 1.7rem; }
.tg-thread-empty b { color: var(--text); font-size: 1rem; }.tg-thread-empty p { margin: 0; max-width: 28ch; font-size: .8rem; line-height: 1.8; }
@media (max-width: 900px) {
  .tg-room-head { min-height: 76px; padding: 12px 14px; }
  .tg-room-name { font-size: .95rem; }.tg-room-sub { line-height: 1.65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tg-body { padding: 16px 14px calc(16px + env(safe-area-inset-bottom)); }
  .tg-input-bar { min-height: 72px; padding: 10px 12px max(10px, env(safe-area-inset-bottom)); }
  .tg-thread-empty { min-height: min(46svh, 360px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* ---- Estakhrjo Icon Families: global admin selector and three live previews ---- */
.design-icon-card { background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 9%,var(--card)),color-mix(in srgb,var(--gold) 6%,var(--card))); }
.design-icon-card .design-card-head > span .ej-icon { margin:0; font-size:1.45rem; }
.design-icon-series { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.design-icon-series button { min-height:142px; display:grid; align-content:start; gap:7px; padding:12px; border:1px solid var(--border); border-radius:16px; background:color-mix(in srgb,var(--card-2) 78%,transparent); color:var(--text); font:inherit; text-align:right; cursor:pointer; transition:border-color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease; }
.design-icon-series button:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--brand) 62%,var(--border)); }
.design-icon-series button.on { border-color:var(--brand); background:linear-gradient(145deg,color-mix(in srgb,var(--brand) 18%,var(--card-2)),color-mix(in srgb,var(--brand-2) 9%,var(--card-2))); box-shadow:0 10px 24px color-mix(in srgb,var(--brand) 16%,transparent); }
.design-icon-series b { font-size:.82rem; }.design-icon-series small { min-height:34px; color:var(--muted); font-size:.69rem; line-height:1.65; }
.design-icon-samples { min-height:38px; display:flex; align-items:center; gap:7px; direction:ltr; }.design-icon-samples .ej-icon { margin:0; font-size:1.45rem; }
@media (max-width:680px) { .design-icon-series { grid-template-columns:1fr; }.design-icon-series button { min-height:104px; grid-template-columns:auto 1fr; align-items:center; }.design-icon-series small { grid-column:2; min-height:0; }.design-icon-samples { grid-row:1 / span 2; flex-direction:column; align-items:center; } }