@font-face {
  font-family: "YB";
  src: url("/fonts/yb.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* 2026 experience system: stable geometry, measured spacing and soft motion */
:root {
  --page-gutter: clamp(16px, 3.4vw, 48px);
  --page-width: 1240px;
  --section-space: clamp(44px, 7vw, 92px);
  --card-radius: clamp(20px, 2.2vw, 30px);
  --motion-soft: 420ms cubic-bezier(.22, .72, .24, 1);
  --motion-quick: 220ms cubic-bezier(.22, .72, .24, 1);
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
.site-shell { min-height: 100svh; }
.content-area,
.site-shell > .content-area { padding: 0 0 clamp(64px, 9vw, 112px); }
.content-area > :not(.home-hero):not(.home-slider):not(.impact-band) { animation: pageSoftReveal 520ms cubic-bezier(.22,.72,.24,1) both; }

@keyframes pageSoftReveal {
  from { opacity: 0; filter: saturate(.9); }
  to { opacity: 1; filter: saturate(1); }
}

:where(.public-page-header, .content-band, .shop-filters, .shop-notice, .grid-cards, .cart-layout, .checkout-layout, .tracking-panel, .empty-state, .route-state) {
  width: min(var(--page-width), calc(100% - (var(--page-gutter) * 2)));
  margin-inline: auto;
}

.public-page-header,
.page-header.public-page-header {
  margin-block: clamp(34px, 5vw, 66px) clamp(28px, 4vw, 48px);
  padding-inline: 0;
}
.public-page-header h1 { margin-block: 10px 12px; }
.public-page-header p { margin: 0; max-width: 780px; }
.content-band { margin-block: var(--section-space); padding: clamp(22px, 4vw, 48px); }
.liquid-panel, .glass-card, .product-card, .article-card, .service-card, .content-band {
  border-radius: var(--card-radius);
}

:where(a, button, summary, .product-card, .article-card, .service-card, .related-content-card, .table-row, .liquid-panel) {
  transition: color var(--motion-quick), background-color var(--motion-quick), border-color var(--motion-quick), box-shadow var(--motion-soft), opacity var(--motion-quick) !important;
}
:where(button, summary, [role="button"], .check-row, .product-card, .article-card, .service-card, .related-content-card, .table-row):hover,
:where(.btn-primary, .btn-secondary, .btn-danger, .header-cta):hover {
  transform: none !important;
}
:where(.product-card, .article-card, .service-card, .related-content-card):hover {
  box-shadow: 0 24px 70px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.12);
  border-color: rgba(123, 226, 195, .32);
}
.product-card:hover .article-cover img,
.article-card:hover .article-cover img { transform: none !important; filter: saturate(1.06) brightness(1.03); }
.product-card, .article-card, .service-card { animation: none !important; }

.hero-slide-media { animation: heroPolishedFade 900ms cubic-bezier(.22,.72,.24,1) both !important; will-change: opacity; }
.hero-slide-media::after { animation: none !important; }
.hero-content-enter { animation: heroPolishedCopy 720ms cubic-bezier(.22,.72,.24,1) both !important; }
.hero-content > * { animation: none !important; }
@keyframes heroPolishedFade { from { opacity: .2; } to { opacity: 1; } }
@keyframes heroPolishedCopy { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hero-orbit > button:hover, .slider-dots button:hover { transform: none !important; }

/* Stable header actions */
.site-header { gap: clamp(12px, 2vw, 28px); }
.header-actions { gap: 8px; }
.header-icon-action {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid rgba(153, 217, 195, .18);
  border-radius: 15px;
  color: #e5f4ee;
  background: rgba(255,255,255,.045);
  text-decoration: none;
}
.header-icon-action:hover { background: rgba(80, 211, 173, .11); border-color: rgba(111, 225, 192, .35); }
.header-icon-action span { font-size: 1.05rem; }
.header-icon-action em { font-style: normal; font-size: .78rem; }
.header-cart-link { position: relative; padding-inline-end: 14px; }
.header-cart-link b { min-width: 21px; height: 21px; display: grid; place-items: center; border-radius: 8px; color: #06271e; background: #efd28c; font-size: .68rem; }

/* Unified user authentication */
.auth-shell { min-height: 100svh; background: radial-gradient(circle at 70% 12%, rgba(28,151,121,.22), transparent 33%), #04110d; }
.account-auth-page, .profile-completion-page { min-height: 100svh; display: grid; place-items: center; padding: clamp(24px, 6vw, 72px) var(--page-gutter); position: relative; }
.auth-back-home { position: absolute; inset-block-start: 24px; inset-inline-start: var(--page-gutter); color: #b8d2c8; text-decoration: none; }
.account-auth-card, .profile-completion-card {
  width: min(560px, 100%);
  padding: clamp(24px, 5vw, 48px);
  border: 1px solid rgba(132, 214, 185, .18);
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(14, 43, 34, .94), rgba(5, 23, 18, .96));
  box-shadow: 0 40px 120px rgba(0,0,0,.46), inset 0 1px rgba(255,255,255,.08);
  animation: authCardReveal 620ms cubic-bezier(.22,.72,.24,1) both;
}
@keyframes authCardReveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.account-auth-intro h1, .profile-completion-card h1 { margin: 10px 0; color: #fff8e7; font-size: clamp(2rem, 5vw, 3rem); }
.account-auth-intro p, .profile-completion-card > p { color: #a9c2b9; line-height: 1.9; }
.auth-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 5px; margin-block: 26px 20px; border-radius: 16px; background: rgba(0,0,0,.2); }
.auth-tabs button { min-height: 44px; border: 0; border-radius: 12px; color: #9eb8ae; background: transparent; }
.auth-tabs button.active { color: #05251c; background: #d8bf81; box-shadow: 0 8px 28px rgba(215,181,109,.18); }
.auth-form, .completion-form { display: grid; gap: 16px; }
.auth-form label, .completion-form label { display: grid; gap: 7px; }
.field-hint { margin: -6px 0 0; color: #86a69b; font-size: .78rem; }
.auth-submit, .completion-submit { width: 100%; min-height: 50px; margin-top: 4px; }
.auth-retry, .completion-logout { justify-self: center; color: #9eb8ae; background: none; border: 0; text-decoration: none; }
.otp-input { text-align: center; letter-spacing: .55em; font-size: 1.3rem; }
.completion-progress { display: flex; gap: 7px; margin-bottom: 26px; }
.completion-progress span { flex: 1; height: 4px; border-radius: 9px; background: rgba(255,255,255,.12); }
.completion-progress span.active { background: linear-gradient(90deg, var(--accent-3), #f3dc9f); }
.completion-form { margin-top: 28px; }
.completion-form label b { color: #efb199; }
.completion-logout { display: block; margin: 18px auto 0; }

/* User panel */
.profile-shell { min-height: 100svh; display: grid; grid-template-columns: 292px minmax(0, 1fr); background: radial-gradient(circle at 78% 6%, rgba(23,137,109,.16), transparent 31%), #04110d; color: #edf7f2; }
.profile-menu-toggle, .profile-sidebar-backdrop { display: none; }
.profile-sidebar { position: sticky; inset-block-start: 0; height: 100svh; display: flex; flex-direction: column; padding: 24px 18px; border-inline-end: 1px solid rgba(138,205,183,.14); background: rgba(6,27,21,.86); backdrop-filter: blur(22px); z-index: 20; }
.profile-brand { display: flex; align-items: center; gap: 12px; padding: 8px 10px 24px; color: inherit; text-decoration: none; }
.profile-brand div { display: grid; gap: 3px; }
.profile-brand small { color: #89a69b; }
.profile-nav { display: grid; gap: 7px; }
.profile-nav a { display: flex; align-items: center; gap: 11px; min-height: 48px; padding: 10px 13px; border: 1px solid transparent; border-radius: 15px; color: #a9c4ba; text-decoration: none; }
.profile-nav a.active { color: #fff8e8; border-color: rgba(124,217,187,.2); background: linear-gradient(90deg, rgba(33,151,120,.18), rgba(255,255,255,.035)); }
.profile-nav a:hover { color: #f5dfaa; background: rgba(255,255,255,.04); }
.profile-nav a span { width: 25px; text-align: center; color: #d7ba75; }
.profile-sidebar-footer { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.profile-sidebar-footer a, .profile-sidebar-footer button { width: 100%; min-height: 42px; display: grid; place-items: center; border: 1px solid rgba(138,205,183,.14); border-radius: 13px; color: #9fb9af; background: rgba(255,255,255,.025); text-decoration: none; }
.profile-content { min-width: 0; padding: clamp(28px, 5vw, 68px); }
.profile-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.profile-page-header h1 { margin: 8px 0 6px; color: #fff8e8; font-size: clamp(2rem, 4vw, 3.5rem); }
.profile-page-header p { margin: 0; color: #91ada2; }
.profile-phone { padding: 9px 13px; border: 1px solid rgba(137,209,185,.18); border-radius: 13px; color: #c6ddd5; }
.profile-dashboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.profile-dashboard-grid a { display: grid; gap: 6px; min-height: 160px; padding: 24px; border: 1px solid rgba(135,211,184,.15); border-radius: 24px; color: #c3d8d0; background: rgba(255,255,255,.035); text-decoration: none; }
.profile-dashboard-grid strong { color: #f3d895; font-size: 2.2rem; }
.profile-dashboard-grid small { color: #7f9e93; }
.profile-welcome, .profile-form-card, .user-order-card, .favorite-panel-card, .address-card { border: 1px solid rgba(135,211,184,.15); border-radius: 24px; background: rgba(255,255,255,.035); }
.profile-welcome { margin-top: 20px; padding: clamp(24px, 4vw, 44px); }
.profile-welcome h2 { margin: 9px 0; color: #fff5dc; }
.profile-welcome p { color: #99b3aa; }
.profile-welcome > div { display: flex; gap: 9px; margin-top: 22px; }
.profile-section { min-width: 0; }
.profile-form-card { padding: clamp(20px, 4vw, 36px); }
.user-order-list, .address-card-list { display: grid; gap: 14px; }
.user-order-card { padding: 22px; }
.user-order-head, .user-order-total { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.user-order-head > div { display: grid; gap: 4px; }
.user-order-items { display: grid; gap: 8px; margin-block: 18px; padding-block: 15px; border-block: 1px solid rgba(137,209,185,.1); }
.user-order-items > div { display: flex; justify-content: space-between; gap: 16px; color: #a7c0b7; }
.favorite-panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.favorite-panel-card { padding: 21px; }
.favorite-panel-card > span { color: #d7ba75; font-size: .76rem; }
.favorite-panel-card h3 { min-height: 58px; margin-block: 8px 18px; }
.favorite-panel-card h3 a { color: #eff7f3; text-decoration: none; }
.favorite-panel-card > div, .address-card > div { display: flex; gap: 8px; align-items: center; }
.address-panel-layout { display: grid; grid-template-columns: minmax(320px, .8fr) minmax(360px, 1.2fr); gap: 18px; align-items: start; }
.address-card { padding: 20px; }
.address-card > div:first-child { justify-content: space-between; }
.address-card > div:first-child span { color: #06251c; background: #d8bf81; border-radius: 8px; padding: 3px 8px; font-size: .68rem; }
.address-card p { color: #aac2b9; line-height: 1.8; }
.address-card small { display: block; margin-bottom: 16px; color: #819e94; }
.profile-menu-toggle { display: none; }

/* Checkout, favorites and product reviews */
.polished-checkout { align-items: start; gap: clamp(16px, 3vw, 30px); }
.checkout-choice-group, .checkout-address-group { display: grid; gap: 10px; margin: 0 0 28px; padding: 0; border: 0; }
.checkout-choice-group legend, .checkout-address-group legend { margin-bottom: 12px; color: #f1dcaa; font-weight: 800; }
.choice-card { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 13px 15px; border: 1px solid rgba(135,211,184,.14); border-radius: 17px; background: rgba(255,255,255,.025); cursor: pointer; }
.choice-card.active, .saved-address.active { border-color: rgba(73,213,172,.55); background: rgba(35,157,124,.12); box-shadow: inset 0 0 0 1px rgba(73,213,172,.12); }
.choice-card span { display: grid; gap: 3px; }
.choice-card small { color: #8ba79c; }
.account-identity-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 28px; }
.account-identity-summary > div { display: grid; gap: 5px; padding: 13px; border-radius: 15px; background: rgba(255,255,255,.035); }
.account-identity-summary small { color: #85a095; }
.recipient-fields { margin-bottom: 28px; }
.saved-address-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.saved-address { display: grid; gap: 5px; padding: 15px; border: 1px solid rgba(135,211,184,.14); border-radius: 17px; color: #b9cfc7; background: rgba(255,255,255,.025); cursor: pointer; }
.saved-address input { position: absolute; opacity: 0; }
.saved-address span { min-height: 50px; color: #8ea99f; line-height: 1.7; font-size: .8rem; }
.saved-address.new { align-content: center; }
.new-address-fields { margin-top: 12px; padding: 18px; border-radius: 18px; background: rgba(0,0,0,.12); }
.checkout-final-fields { margin-top: 28px; }
.checkout-pay-button { width: 100%; min-height: 56px; margin-top: 16px; font-size: 1rem; }
.secure-checkout-note { display: flex; gap: 10px; margin-top: 18px; padding: 13px; border-radius: 15px; color: #91ada2; background: rgba(44,155,123,.08); font-size: .78rem; line-height: 1.7; }
.secure-checkout-note p { margin: 0; }
.secure-checkout-note span { color: #78d9bd; }
.favorite-content-button { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 9px 15px; border: 1px solid rgba(235,189,148,.25); border-radius: 14px; color: #e6c9b1; background: rgba(130,63,44,.08); }
.favorite-content-button.active { color: #ffd6c3; border-color: rgba(240,133,97,.45); background: rgba(179,65,42,.13); }
.favorite-content-button span { font-size: 1.2rem; }
.content-favorite-footer { width: min(1040px, calc(100% - (var(--page-gutter) * 2))); display: flex; justify-content: center; margin: 28px auto var(--section-space); padding: 22px; border-block: 1px solid rgba(135,211,184,.12); }
.in-cart-panel { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-block: 18px; padding: 14px; border: 1px solid rgba(83,216,176,.25); border-radius: 17px; color: #b8d6cb; background: rgba(41,160,126,.1); }
.product-main-image { overflow: hidden; border-radius: 24px; }
.thumb-row button { padding: 0; border: 2px solid transparent; border-radius: 13px; overflow: hidden; background: transparent; }
.thumb-row button.active { border-color: #d8bf81; }
.product-rating-summary { display: flex; align-items: center; gap: 8px; margin-block: 12px; }
.rating-stars { color: #e7c16f; letter-spacing: 2px; white-space: nowrap; }
.product-rating-summary small { color: #86a398; }
.spec-table-wrap { overflow-x: auto; border-radius: 18px; }
.spec-table td, .spec-table th { min-width: 150px; }
.reviews-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.reviews-heading h2 { margin: 8px 0 0; }
.rating-overview { display: grid; justify-items: center; gap: 2px; }
.rating-overview > strong { color: #f5dc9c; font-size: 2.4rem; }
.reviews-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 22px; align-items: start; }
.review-list { display: grid; gap: 12px; }
.review-card { display: grid; grid-template-columns: 44px 1fr; gap: 13px; padding: 18px; border: 1px solid rgba(135,211,184,.13); border-radius: 19px; background: rgba(255,255,255,.025); }
.review-avatar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: #f5dda2; background: rgba(216,191,129,.12); }
.review-card header { display: flex; justify-content: space-between; gap: 12px; }
.review-card h3 { margin: 12px 0 4px; font-size: 1rem; }
.review-card p { color: #abc1b9; line-height: 1.85; }
.review-card small { color: #79968c; }
.review-form-wrap { position: sticky; inset-block-start: 110px; padding: 20px; border-radius: 20px; background: rgba(0,0,0,.13); }
.review-form-wrap > p { color: #8da89e; line-height: 1.7; }
.review-form-wrap form { display: grid; gap: 12px; }
.review-form-wrap label { display: grid; gap: 6px; }

/* Admin row builders */
.spec-builder { padding: 20px; border: 1px solid rgba(131,204,180,.15); border-radius: 20px; }
.spec-builder > p { margin: 0 0 15px; color: var(--muted); }
.spec-builder-rows { display: grid; gap: 10px; margin-bottom: 12px; }
.spec-builder-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; padding: 10px; border-radius: 16px; background: rgba(0,0,0,.12); }
.spec-row-inputs { display: grid; grid-template-columns: repeat(var(--spec-columns), minmax(120px,1fr)); gap: 8px; }
.spec-row-actions { display: flex; gap: 6px; align-items: center; }
.admin-image-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 9px; margin-top: 12px; }
.admin-image-preview-grid > div { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 14px; }
.admin-image-preview-grid img { width: 100%; height: 100%; object-fit: cover; }
.admin-image-preview-grid button { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; width: 29px; height: 29px; border: 0; border-radius: 9px; color: #fff; background: rgba(96,20,13,.82); }

@media (max-width: 1000px) {
  .profile-shell { grid-template-columns: 1fr; }
  .profile-sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; width: min(310px, calc(100vw - 36px)); transform: translateX(105%); transition: transform var(--motion-soft) !important; }
  .profile-sidebar.open { transform: none; }
  .profile-sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 19; visibility: hidden; opacity: 0; background: rgba(0,0,0,.62); transition: opacity var(--motion-quick), visibility var(--motion-quick); }
  .profile-sidebar-backdrop.open { visibility: visible; opacity: 1; }
  .profile-menu-toggle { position: fixed; inset-block-start: 14px; inset-inline-start: 14px; z-index: 18; width: 45px; height: 45px; display: grid; place-content: center; gap: 4px; border: 1px solid rgba(137,209,185,.18); border-radius: 14px; background: rgba(7,31,24,.88); }
  .profile-menu-toggle span { width: 19px; height: 2px; background: #d7ba75; }
  .profile-content { padding-top: 80px; }
  .address-panel-layout, .reviews-layout { grid-template-columns: 1fr; }
  .review-form-wrap { position: static; }
}

@media (max-width: 760px) {
  :root { --page-gutter: 14px; --section-space: 40px; }
  .site-header { padding-inline: 10px; }
  .header-icon-action em { display: none; }
  .header-icon-action { min-width: 42px; padding: 7px 9px; }
  .header-cart-link { gap: 3px; }
  .brand-copy { max-width: 120px; }
  .public-page-header, .page-header.public-page-header { margin-block: 26px 30px; }
  .content-band { padding: 19px; }
  .account-auth-card, .profile-completion-card { padding: 23px 18px; border-radius: 24px; }
  .auth-tabs { grid-template-columns: 1fr; }
  .completion-form .form-grid.two, .profile-form-card .form-grid.two { grid-template-columns: 1fr; }
  .profile-content { padding: 76px 14px 40px; }
  .profile-page-header { display: grid; }
  .profile-dashboard-grid { grid-template-columns: 1fr; }
  .profile-welcome > div { align-items: stretch; flex-direction: column; }
  .account-identity-summary, .saved-address-grid { grid-template-columns: 1fr; }
  .in-cart-panel, .reviews-heading { align-items: stretch; flex-direction: column; }
  .review-card { grid-template-columns: 36px 1fr; padding: 14px; }
  .review-avatar { width: 36px; height: 36px; }
  .review-card header { display: grid; }
  .spec-builder-row { grid-template-columns: 1fr; }
  .spec-row-inputs { grid-template-columns: 1fr; }
  .spec-row-actions { justify-content: stretch; }
  .spec-row-actions button { flex: 1; }
}

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

:root {
  color-scheme: light;
  --bg: #f6faf7;
  --bg-soft: #edf7f0;
  --surface: #ffffff;
  --surface-2: #f9fcfa;
  --panel: #ffffff;
  --panel-border: #dfeee5;
  --text: #12251b;
  --muted: #607368;
  --accent: #334155;
  --accent-2: #6366f1;
  --accent-3: #d7b56d;
  --danger: #b42318;
  --shadow: 0 18px 45px rgba(15, 107, 63, 0.1);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(237, 247, 240, 0.9)),
    var(--bg);
  color: var(--text);
  font-family: "YB", "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
  direction: rtl;
}

body {
  overflow-x: clip;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.35;
  color: var(--text);
}

p {
  margin: 0;
  color: var(--muted);
  line-height: 1.95;
}

button,
input,
textarea,
select {
  font: inherit;
}

.site-shell,
.admin-shell {
  min-height: 100vh;
}

.site-shell {
  background:
    linear-gradient(90deg, rgba(15, 107, 63, 0.06), transparent 38%),
    linear-gradient(180deg, #ffffff 0, #f6faf7 48%, #eef7f1 100%);
  overflow-x: clip;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(1180px, calc(100% - 32px));
  margin: 16px auto 0;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  box-shadow: 0 12px 35px rgba(15, 107, 63, 0.08);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 12px;
  z-index: 20;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
}

.brand-mark {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(15, 107, 63, 0.18);
}

.brand-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  padding: 4px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid var(--panel-border);
}

.brand-title {
  font-weight: 800;
}

.brand-subtitle,
.muted,
small {
  color: var(--muted);
  font-size: 0.92rem;
}

.nav-links,
.sidebar-nav,
.chip-list,
.row-actions,
.hero-actions,
.form-actions,
.inline-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.nav-links a {
  padding: 9px 11px;
  border-radius: 8px;
  color: #233f2e;
  transition: background 0.2s ease, color 0.2s ease;
}

.nav-links a:hover {
  background: var(--bg-soft);
  color: var(--accent);
}

.site-menu-toggle,
.admin-menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  place-items: center;
  gap: 4px;
  padding: 9px;
}

.site-menu-toggle span,
.admin-menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 99px;
  background: var(--accent);
}

.mobile-site-nav,
.site-nav-backdrop,
.admin-sidebar-backdrop {
  display: none;
}

.content-area {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 54px;
  overflow-x: clip;
}

.footer {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto 24px;
  padding: 24px;
  background: #0c4f30;
  border-radius: 8px;
  color: #ffffff;
}

.footer h3,
.footer p {
  color: #ffffff;
}

.footer p {
  opacity: 0.82;
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.hero {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
}

.hero-home {
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0.78) 47%, rgba(255, 255, 255, 0.97) 100%),
    url("/uploads/b2e1e1a881f942659f31874c4bb92359.jpg");
  background-size: cover;
  background-position: center;
}

.hero-copy {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  padding: clamp(34px, 6vw, 72px);
  margin-left: auto;
  color: var(--text);
  text-align: right;
}

.eyebrow,
.section-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 6px 11px;
  margin-bottom: 12px;
  border-radius: 8px;
  background: rgba(15, 107, 63, 0.1);
  color: var(--accent);
  font-size: 0.84rem;
  font-weight: 800;
}

.hero h1 {
  font-size: clamp(2.1rem, 5vw, 4.5rem);
  margin-bottom: 16px;
  max-width: 10ch;
  overflow-wrap: break-word;
}

.hero p {
  max-width: 52ch;
  font-size: 1.08rem;
}

.btn-primary,
.btn-secondary,
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 11px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 800;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #ffffff;
  box-shadow: 0 12px 26px rgba(15, 107, 63, 0.2);
}

.btn-secondary {
  background: #ffffff;
  color: var(--accent);
  border-color: var(--panel-border);
}

.btn-danger {
  background: #fff5f3;
  color: var(--danger);
  border-color: #ffd8d1;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-danger:hover {
  transform: translateY(-1px);
}

.small {
  min-height: 34px;
  padding: 8px 11px;
  font-size: 0.88rem;
}

.glass-surface,
.glass-card,
.content-band,
.admin-table,
.empty-state,
.notice-box {
  background: var(--surface);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.glass-card {
  padding: 16px;
}

.p-4 { padding: 16px; }
.p-5 { padding: 20px; }
.p-6 { padding: 24px; }
.p-8 { padding: 32px; }

.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.content-band {
  padding: clamp(24px, 4vw, 42px);
  margin: 22px 0;
}

.feature-prose {
  display: grid;
  gap: 12px;
}

.feature-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 22px 0;
}

.feature-strip > div {
  display: grid;
  gap: 6px;
  padding: 20px;
  background: #ffffff;
  border: 1px solid var(--panel-border);
  border-right: 4px solid var(--accent);
  border-radius: 8px;
}

.feature-strip strong {
  color: var(--accent);
}

.feature-strip span {
  color: var(--muted);
  line-height: 1.8;
}

.section-block,
.admin-section {
  margin-top: 26px;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.public-page-header,
.page-header {
  margin: 18px 0 24px;
}

.public-page-header h1,
.page-header h1 {
  font-size: clamp(2rem, 4vw, 3.4rem);
  margin-bottom: 8px;
}

.article-grid {
  align-items: stretch;
}

.article-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 230px;
  border-top: 4px solid var(--accent);
}

.article-card h3 {
  font-size: 1.22rem;
}

.article-card p {
  flex: 1;
}

.article-meta,
.status-chip {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 5px 9px;
  border-radius: 8px;
  background: rgba(15, 107, 63, 0.09);
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 800;
}

.read-link {
  color: var(--accent);
  font-weight: 800;
}

.article-detail {
  max-width: 920px;
  margin: 0 auto;
}

.article-detail-header {
  padding: clamp(24px, 4vw, 44px);
  margin-bottom: 18px;
  background:
    linear-gradient(135deg, rgba(15, 107, 63, 0.09), rgba(215, 181, 109, 0.12));
  border: 1px solid var(--panel-border);
  border-radius: 8px;
}

.article-detail-header h1 {
  margin: 12px 0;
  font-size: clamp(2rem, 4vw, 3.4rem);
}

.article-body {
  padding: clamp(24px, 4vw, 42px);
  background: #ffffff;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.prose-rtl {
  line-height: 2.05;
  overflow-wrap: break-word;
}

.prose-rtl h1,
.prose-rtl h2,
.prose-rtl h3 {
  margin: 0.6em 0 0.35em;
}

.prose-rtl p {
  max-width: 75ch;
  margin-bottom: 0.85em;
}

.empty-state {
  padding: 28px;
  color: var(--muted);
  text-align: center;
}

.big-number {
  font-size: 2.45rem;
  font-weight: 900;
  color: var(--accent);
}

.admin-shell {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 16px;
  width: min(1440px, calc(100% - 32px));
  margin: 16px auto;
  background: transparent;
}

.admin-sidebar {
  position: sticky;
  top: 16px;
  height: calc(100vh - 32px);
  padding: 20px;
  background: #0c4f30;
  border-radius: 8px;
  color: #ffffff;
  box-shadow: var(--shadow);
}

.sidebar-brand {
  display: grid;
  gap: 3px;
  margin-bottom: 18px;
}

.sidebar-brand strong {
  font-size: 1.25rem;
  font-weight: 900;
}

.sidebar-brand small {
  color: rgba(255, 255, 255, 0.72);
}

.sidebar-nav {
  align-items: stretch;
  flex-direction: column;
  gap: 7px;
  max-height: calc(100vh - 112px);
  overflow-y: auto;
  padding-left: 3px;
}

.sidebar-group {
  display: grid;
  gap: 5px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebar-group > span {
  padding: 6px 10px 2px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.8rem;
  font-weight: 900;
}

.sidebar-nav a {
  padding: 10px 12px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.86);
}

.sidebar-nav a:hover,
.sidebar-button:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.sidebar-button {
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.86);
  text-align: right;
  cursor: pointer;
}

.admin-content {
  padding: 4px 0 28px;
  min-width: 0;
}

.admin-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.admin-grid {
  display: grid;
  gap: 16px;
}

.two-columns {
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
}

.form-grid {
  display: grid;
  gap: 14px;
  margin: 16px 0;
}

.form-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid label,
.form-grid .full {
  display: grid;
  gap: 7px;
}

.form-grid .full {
  grid-column: 1 / -1;
}

.input {
  width: 100%;
  min-height: 42px;
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: #ffffff;
  color: var(--text);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.input:focus {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(31, 138, 91, 0.12);
}

.textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.9;
}

.small-textarea {
  min-height: 86px;
}

.code-textarea {
  min-height: 220px;
  direction: ltr;
  text-align: left;
  font-family: Consolas, "Courier New", monospace;
}

.compact-input {
  min-height: 36px;
  padding: 8px 10px;
}

.color-input {
  padding: 4px;
}

.ltr {
  direction: ltr;
  text-align: left;
}

.check-row {
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 8px;
  min-height: 42px;
}

.check-list {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.inline-form {
  flex-wrap: nowrap;
}

.inline-form.compact {
  width: min(460px, 100%);
}

.notice-box {
  margin-top: 14px;
  padding: 14px 16px;
}

.notice-box.success {
  color: #0b5e39;
  background: #effaf3;
}

.notice-box.error,
.error-box {
  color: #9f1f17;
  background: #fff4f2;
  border: 1px solid #ffd8d1;
}

.error-box {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 8px;
}

.list-panel {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.list-row {
  display: grid;
  gap: 8px;
}

.admin-table {
  overflow: hidden;
}

.table-head,
.table-row {
  display: grid;
  gap: 12px;
  align-items: center;
  padding: 13px 16px;
}

.table-head {
  background: var(--bg-soft);
  color: var(--accent);
  font-weight: 900;
}

.table-row {
  border-top: 1px solid var(--panel-border);
}

.table-row > div:first-child,
.table-row strong {
  min-width: 0;
}

.table-row small {
  display: block;
  margin-top: 4px;
}

.selected-row {
  background: #f3faf5;
}

.users-grid {
  grid-template-columns: minmax(170px, 1.1fr) minmax(170px, 0.9fr) minmax(130px, 0.75fr) minmax(130px, 0.75fr) 100px minmax(250px, 1fr);
}

.pages-grid {
  grid-template-columns: minmax(220px, 1.4fr) minmax(130px, 0.8fr) 120px 70px minmax(170px, 0.8fr);
}

.articles-grid {
  grid-template-columns: minmax(240px, 1.5fr) minmax(130px, 0.7fr) 120px 70px minmax(220px, 0.9fr);
}

.menus-grid {
  grid-template-columns: minmax(170px, 1fr) minmax(120px, 0.7fr) 100px 120px minmax(230px, 1fr);
}

.menu-items-grid {
  grid-template-columns: minmax(170px, 1fr) minmax(150px, 1fr) minmax(130px, 0.8fr) 70px minmax(160px, 0.8fr);
}

.status-chip.published {
  background: #edf9f1;
  color: #0b6b3f;
}

.status-chip.draft {
  background: #fff8e7;
  color: #8a640f;
}

.role-panel {
  display: grid;
  gap: 16px;
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.permission-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--surface-2);
}

.permission-item small {
  grid-column: 2;
  direction: ltr;
  text-align: left;
}

.media-library {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.media-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.media-preview {
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: var(--bg-soft);
}

.media-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #111827;
}

.article-cover-preview {
  width: min(100%, 380px);
  margin-top: 10px;
}

.file-icon {
  color: var(--accent);
  font-weight: 900;
}

.media-info {
  display: grid;
  gap: 6px;
}

.upload-box {
  padding: 16px;
  border: 1px dashed var(--accent-2);
  border-radius: 8px;
  background: #f6fbf8;
}

.login-panel {
  width: min(440px, calc(100% - 32px));
  margin: 72px auto;
  padding: 24px;
  background: #ffffff;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px 16px;
  background:
    linear-gradient(135deg, rgba(15, 107, 63, 0.11), transparent 42%),
    linear-gradient(315deg, rgba(215, 181, 109, 0.2), transparent 34%),
    #f6faf7;
}

.auth-shell .login-panel {
  margin: 0;
}

.auth-hint {
  margin-top: 8px;
  font-size: 0.95rem;
}

.login-methods {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 5px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--bg-soft);
}

.auth-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 900;
}

.auth-tabs button.active {
  background: #ffffff;
  color: var(--accent);
  box-shadow: 0 8px 20px rgba(15, 107, 63, 0.08);
}

.login-method {
  padding-top: 16px;
  border-top: 1px solid var(--panel-border);
}

.home-slider {
  position: relative;
  min-height: var(--home-slider-height, 540px);
  margin-bottom: 24px;
}

.slider-panel {
  min-height: var(--home-slider-height, 540px);
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 8px;
  background-image:
    linear-gradient(90deg, rgba(4, 39, 25, 0.08), rgba(255, 255, 255, 0.72) 45%, rgba(255, 255, 255, 0.96)),
    var(--slide-image);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow);
  animation: fadeLift 0.7s ease both;
}

.slider-copy {
  width: min(620px, 100%);
  padding: clamp(32px, 6vw, 76px);
  margin-left: auto;
}

.slider-copy h1 {
  max-width: 13ch;
  margin-bottom: 16px;
  font-size: clamp(2.25rem, 5.5vw, 4.7rem);
  overflow-wrap: break-word;
}

.slider-copy p {
  max-width: 56ch;
  font-size: 1.08rem;
}

.slider-controls {
  position: absolute;
  inset-inline: 22px;
  bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  pointer-events: none;
}

.slider-arrow,
.slider-dot {
  pointer-events: auto;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.86);
  color: var(--accent);
  cursor: pointer;
}

.slider-arrow {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  line-height: 1;
}

.slider-dots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 10px 28px rgba(15, 107, 63, 0.12);
}

.slider-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 999px;
}

.slider-dot.active {
  width: 28px;
  background: var(--accent);
}

.home-summary {
  background:
    linear-gradient(135deg, rgba(15, 107, 63, 0.07), rgba(215, 181, 109, 0.12)),
    #ffffff;
}

.impact-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0;
}

.impact-band > div,
.section-card {
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: #ffffff;
  box-shadow: var(--shadow);
}

.impact-band > div {
  display: grid;
  gap: 8px;
  padding: 20px;
  border-top: 4px solid var(--accent-3);
  animation: fadeLift 0.55s ease both;
}

.impact-band strong {
  color: var(--accent);
  font-size: 1.12rem;
}

.public-icon {
  width: 42px;
  height: 42px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.impact-band span {
  color: var(--muted);
  line-height: 1.85;
}

.public-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.section-card {
  display: grid;
  gap: 10px;
  min-height: 210px;
  padding: 20px;
  border-top: 4px solid var(--accent);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
  animation: fadeLift 0.5s ease both;
}

.section-card:nth-child(3n + 2) {
  border-top-color: #2f80ed;
}

.section-card:nth-child(3n) {
  border-top-color: #c06f23;
}

.section-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(15, 107, 63, 0.14);
}

.section-card span {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 8px;
  background: var(--bg-soft);
  color: var(--accent);
  font-weight: 900;
  font-size: 0.82rem;
}

.section-card h3 {
  font-size: 1.18rem;
}

.section-card p {
  align-self: end;
}

.article-cover {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 8px;
  background: var(--bg-soft);
}

.article-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sliders-grid {
  grid-template-columns: minmax(220px, 1.1fr) minmax(220px, 1fr) 90px 90px minmax(220px, 0.9fr);
}

.slider-thumb {
  width: 88px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 8px;
  background: var(--bg-soft);
}

.slider-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rich-editor {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: #ffffff;
}

.rich-toolbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--panel-border);
}

.rich-toolbar button,
.rich-upload {
  min-width: 38px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 9px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--accent);
  cursor: pointer;
  font-weight: 900;
}

.rich-toolbar button.active {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

.rich-upload {
  position: relative;
  overflow: hidden;
}

.rich-upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.rich-surface {
  min-height: 260px;
  padding: 14px;
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.rich-surface:focus-visible {
  outline-color: var(--accent-2);
}

.rich-surface img,
.prose-rtl img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.rich-surface video,
.prose-rtl video {
  width: 100%;
  max-height: 420px;
  border-radius: 8px;
  background: #111827;
}

.editor-media,
.editor-file,
.prose-rtl .editor-file {
  display: block;
  margin: 16px auto;
}

.editor-file {
  padding: 14px 16px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--accent);
  font-weight: 900;
}

.media-plain {
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0;
}

.media-rounded {
  border-radius: 8px !important;
}

.media-soft {
  border-radius: 18px !important;
  box-shadow: 0 0 0 10px rgba(15, 107, 63, 0.08);
}

.media-shadow {
  border-radius: 8px !important;
  box-shadow: 0 18px 44px rgba(18, 37, 27, 0.2) !important;
}

.media-small {
  width: min(320px, 100%) !important;
}

.media-half {
  width: min(50%, 100%) !important;
}

.media-full {
  width: 100% !important;
}

.is-selected-media {
  outline: 3px solid var(--accent-3);
  outline-offset: 4px;
}

.editor-resize-handle {
  position: absolute;
  z-index: 3000;
  width: 16px;
  height: 16px;
  display: none;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 8px 20px rgba(18, 37, 27, 0.22);
  cursor: ew-resize;
  touch-action: none;
}

.page-visual-editor {
  display: grid;
  gap: 14px;
}

.visual-editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.segmented-control {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: #ffffff;
}

.segmented-control button {
  min-height: 34px;
  padding: 7px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 900;
}

.segmented-control button.active {
  background: var(--accent);
  color: #ffffff;
}

.visual-tool-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.file-button {
  position: relative;
  overflow: hidden;
}

.file-button input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.color-swatch-row {
  display: inline-flex;
  gap: 7px;
  align-items: center;
}

.color-swatch {
  width: 30px;
  height: 30px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--panel-border);
  cursor: pointer;
}

.color-swatch.active {
  box-shadow: 0 0 0 3px var(--accent-3);
}

.visual-stage {
  overflow-x: auto;
  padding: 18px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: repeating-linear-gradient(45deg, #f7f8fb 0 12px, #ffffff 12px 24px);
}

.visual-device-frame {
  width: min(100%, 1120px);
  min-height: 520px;
  margin-inline: auto;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(18, 37, 27, 0.16);
}

.visual-device-frame.tablet {
  width: min(768px, 100%);
}

.visual-device-frame.mobile {
  width: min(390px, 100%);
}

.visual-content-box {
  position: relative;
  width: 100%;
  margin-inline: auto;
}

.visual-resize-grip {
  position: absolute;
  left: -12px;
  bottom: 16px;
  z-index: 5;
  width: 24px;
  height: 48px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(18, 37, 27, 0.18);
  cursor: ew-resize;
  touch-action: none;
}

.visual-resize-grip::before {
  content: "";
  position: absolute;
  inset: 10px 8px;
  border-inline: 2px solid var(--accent);
}

.builder-lite-panel {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--bg-soft);
}

.builder-lite-title,
.option-editor-row,
.response-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.option-editor-row .input {
  flex: 1;
}

.response-card {
  display: grid;
  gap: 14px;
}

.response-card-head small {
  display: block;
  margin-top: 4px;
}

.unread-message {
  border-color: rgba(47, 128, 237, 0.45);
}

.danger-zone .glass-card {
  border-color: rgba(215, 58, 73, 0.35);
}

.home-visual-config {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(280px, 1.1fr);
  gap: 18px;
  align-items: start;
}

.home-preview-stack {
  display: grid;
  gap: 12px;
}

.home-slider-preview {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 24px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(15, 107, 63, 0.88), rgba(47, 128, 237, 0.76)),
    url("/uploads/b2e1e1a881f942659f31874c4bb92359.jpg");
  background-size: cover;
  background-position: center;
  color: #ffffff;
}

.home-slider-preview strong {
  font-size: 1.35rem;
}

.home-news-preview {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(18, 37, 27, 0.12);
}

.home-news-preview span {
  color: var(--accent);
  font-weight: 900;
  font-size: 0.84rem;
}

.range-field input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.option-list,
.submission-values {
  display: grid;
  gap: 8px;
}

.dynamic-panel {
  border-right: 4px solid #2f80ed;
}

.form-section {
  padding: 16px;
  margin-bottom: 14px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.form-section h3 {
  margin-bottom: 12px;
  font-size: 1.05rem;
  color: var(--accent);
}

.dynamic-grid {
  grid-template-columns: minmax(220px, 1.2fr) minmax(120px, 0.6fr) 100px 100px minmax(180px, 0.8fr);
}

.fields-grid {
  grid-template-columns: minmax(240px, 1.2fr) minmax(120px, 0.7fr) 90px 80px minmax(170px, 0.8fr);
}

.products-grid {
  grid-template-columns: minmax(220px, 1.25fr) minmax(110px, 0.6fr) minmax(120px, 0.7fr) 90px 110px minmax(220px, 0.9fr);
}

.payments-grid,
.services-grid {
  grid-template-columns: minmax(220px, 1.2fr) minmax(130px, 0.7fr) 110px 100px minmax(190px, 0.8fr);
}

.backups-grid {
  grid-template-columns: minmax(240px, 1.5fr) 110px 150px minmax(120px, 0.6fr);
}

.product-grid {
  align-items: stretch;
}

.product-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-card p {
  flex: 1;
}

.product-price {
  color: #0b5e39;
  font-weight: 950;
}

.product-price.large {
  font-size: 1.6rem;
}

.product-detail {
  display: grid;
  gap: 22px;
}

.product-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.75fr);
  gap: 20px;
  align-items: start;
}

.product-gallery,
.product-summary,
.payment-method {
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.product-gallery {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.product-gallery > img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: 8px;
  background: var(--bg-soft);
}

.thumb-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
}

.thumb-row img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
}

.product-summary {
  display: grid;
  gap: 12px;
  padding: clamp(20px, 3vw, 32px);
}

.swatch-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.swatch-list span {
  padding: 6px 10px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font-weight: 800;
}

.feature-list {
  margin: 14px 0 0;
  padding-inline-start: 22px;
  line-height: 2;
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  overflow: hidden;
  border-radius: 8px;
}

.spec-table th,
.spec-table td {
  padding: 12px 14px;
  border: 1px solid var(--panel-border);
  text-align: right;
}

.spec-table th {
  width: 34%;
  background: var(--bg-soft);
  color: var(--accent);
}

.video-grid,
.payment-method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.video-grid video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: #111827;
}

.payment-summary {
  margin-bottom: 18px;
}

.payment-method {
  display: grid;
  gap: 10px;
  padding: 20px;
  border-top: 4px solid #2f80ed;
}

.article-detail-cover {
  margin: 16px 0;
  overflow: hidden;
  border-radius: 8px;
  background: var(--bg-soft);
}

.article-detail-cover img {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  display: block;
}

.admin-help {
  margin: 14px 0 18px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.admin-help-toggle {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border: 0;
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  font-weight: 900;
}

.admin-help-toggle span:last-child {
  color: var(--accent);
  font-size: 0.88rem;
}

.admin-help-body {
  display: grid;
  gap: 8px;
  padding: 16px;
  animation: fadeLift 0.22s ease both;
}

.sidebar-nav a,
.sidebar-button {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-nav svg,
.sidebar-button svg {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.audit-log-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.home-design-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.home-design-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--surface-2);
}

.news-carousel {
  --news-card-width: 340px;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px 14px;
  scroll-snap-type: x mandatory;
}

.news-carousel .article-card {
  flex: 0 0 min(var(--news-card-width), 86vw);
  scroll-snap-align: start;
}

.news-carousel::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.news-carousel::-webkit-scrollbar-thumb,
.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(15, 107, 63, 0.26);
  border-radius: 999px;
}

@keyframes fadeLift {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2026-07-14: responsive home and partner-directory primitives. */
.site-shell .partner-groups-page {
  width: min(var(--page-width), calc(100% - (var(--page-gutter) * 2)));
  min-width: 0;
  margin-inline: auto;
  padding-block: clamp(24px, 4vw, 52px) clamp(48px, 7vw, 84px);
  display: grid;
  gap: clamp(18px, 2.6vw, 30px);
}

.site-shell .partner-groups-page > :is(.partner-groups-header, .partner-groups-filter,
  .partner-groups-grid, .partner-groups-empty) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  margin: 0 !important;
}

.site-shell .partner-groups-page .partner-groups-filter {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 12px;
  padding: clamp(16px, 2.4vw, 24px) !important;
}

.site-shell .partner-groups-page .partner-groups-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
}

.site-shell .partner-groups-page .partner-card {
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.site-shell .partner-groups-page .partner-card > img {
  width: 100% !important;
  height: auto !important;
  max-height: 190px;
  aspect-ratio: 16 / 9;
  object-fit: contain !important;
  border: 1px solid var(--tri-secondary-border);
  background: color-mix(in srgb, var(--tri-primary) 7%, #ffffff);
}

.site-shell .partner-groups-page .partner-card :is(h3, p) {
  margin: 0;
}

.site-shell .partner-groups-page .partner-card > span,
.site-shell .partner-groups-page .partner-card > p {
  color: #475467 !important;
}

.site-shell .partner-groups-page .partner-card details {
  width: 100%;
  min-width: 0;
  margin-top: auto;
}

.site-shell :is(.fajr-members-preview, .reports-preview) {
  width: min(var(--page-width), calc(100% - (var(--page-gutter) * 2)));
  min-width: 0;
  margin-block: clamp(34px, 5vw, 68px) !important;
}

.site-shell :is(.fajr-members-preview, .reports-preview) > .section-title {
  margin-block-start: 0 !important;
  margin-bottom: clamp(18px, 2.4vw, 28px) !important;
}

.site-shell .fajr-members-preview .member-grid,
.site-shell .reports-preview .report-grid {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  margin: 0 !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
}

.site-shell .fajr-members-preview .member-card,
.site-shell .reports-preview .report-card {
  min-width: 0;
  height: 100%;
}

.site-shell :is(.fajr-featured-video-box, .courses-preview),
.site-shell :is(.fajr-featured-video-box, .courses-preview) > .infinite-carousel {
  min-width: 0;
  max-width: 100%;
}

/* Physical placement stays stable because Android native carousels are LTR internally. */
.infinite-carousel .infinite-carousel__nav--forward {
  inset-inline-start: auto !important;
  inset-inline-end: auto !important;
  left: auto !important;
  right: 10px !important;
}

.infinite-carousel .infinite-carousel__nav--back {
  inset-inline-start: auto !important;
  inset-inline-end: auto !important;
  right: auto !important;
  left: 10px !important;
}

/* The vision label now uses the same three-tone token as every other section label. */
.site-shell .vision-panel .section-kicker {
  color: var(--tri-secondary-ink) !important;
  -webkit-text-fill-color: var(--tri-secondary-ink) !important;
  border: 1px solid var(--tri-accent-border) !important;
  background:
    radial-gradient(circle at 100% 0, var(--tri-primary-soft), transparent 62%),
    radial-gradient(circle at 0 100%, var(--tri-secondary-soft), transparent 62%),
    radial-gradient(circle at 50% 120%, var(--tri-accent-soft), transparent 68%),
    #ffffff !important;
  box-shadow: 0 5px 15px var(--tri-accent-shadow) !important;
}

html.is-android .site-shell :is(.infinite-carousel--reports, .infinite-carousel--courses).is-native-scroll,
html.is-android .site-shell :is(.infinite-carousel--reports, .infinite-carousel--courses).is-native-scroll .infinite-carousel__track {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html.is-android .site-shell :is(.infinite-carousel--reports, .infinite-carousel--courses).is-native-scroll
  .infinite-carousel__track > [data-carousel-item] {
  box-sizing: border-box;
  inline-size: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  scroll-snap-align: start !important;
}

.report-gallery-section {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.report-gallery-carousel {
  position: relative;
  overflow: hidden;
  padding: 4px 2px 18px;
}

.report-gallery-track {
  display: flex;
  align-items: stretch;
  gap: 18px;
  direction: ltr;
}

.report-gallery-slide {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  direction: rtl;
}

.report-gallery-slide > a {
  display: block;
  padding: 8px;
  color: inherit;
  text-decoration: none;
}

.report-gallery-slide img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 18px;
  background: #f8fafc;
}

.report-gallery-slide figcaption {
  padding: 4px 18px 20px;
  color: #475467;
  line-height: 1.9;
  text-align: center;
}

.photo-report-admin-editor {
  margin-top: 20px;
}

.compact-grid {
  gap: 10px;
}

.photo-report-admin-row .media-mini img {
  object-fit: contain;
}

@media (max-width: 900px) {
  .site-shell .partner-groups-page .partner-groups-grid,
  .site-shell .fajr-members-preview .member-grid,
  .site-shell .reports-preview .report-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .site-shell .partner-groups-page {
    width: calc(100% - 24px);
    padding-block: 20px 52px;
    gap: 16px;
  }

  .site-shell .partner-groups-page .partner-groups-filter,
  .site-shell .partner-groups-page .partner-groups-grid,
  .site-shell .fajr-members-preview .member-grid,
  .site-shell .reports-preview .report-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-shell .partner-groups-page .partner-groups-filter .btn-primary {
    width: 100%;
  }

  .site-shell .fajr-featured-video-box {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin-inline: auto !important;
    padding: 16px !important;
    overflow: hidden !important;
  }

  .site-shell :is(.fajr-featured-video-box, .courses-preview) > .infinite-carousel.is-active {
    width: 100%;
    max-width: 100%;
    padding-inline: 8px !important;
  }
}

/* Compact story rail at the top of public pages. */
.story-strip {
  width: min(var(--page-width, 1240px), calc(100% - (var(--page-gutter, 22px) * 2))); display: flex; align-items: center; gap: 16px;
  margin: 12px auto 6px; padding: 9px 12px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--theme-primary) 10%, #e5eaf1); border-radius: 18px;
  background: rgb(255 255 255 / .76); box-shadow: 0 7px 24px rgb(15 23 42 / .055);
}
.story-strip__head { flex: 0 0 auto; display: grid; gap: 1px; min-width: 92px; }
.story-strip__head strong { color: #1f2937; font-size: .8rem; }
.story-strip__head small { color: #788395; font-size: .65rem; }
.story-strip__rail { min-width: 0; display: flex; gap: 12px; overflow-x: auto; padding: 2px 1px 5px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.story-chip { flex: 0 0 66px; min-width: 0; display: grid; justify-items: center; align-content: start; gap: 5px; padding: 0; border: 0; color: #334155; background: transparent; cursor: pointer; scroll-snap-align: start; font: inherit; }
.story-chip__media {
  position: relative;
  box-sizing: border-box;
  inline-size: 56px;
  block-size: 56px;
  min-inline-size: 56px;
  min-block-size: 56px;
  max-inline-size: 56px;
  max-block-size: 56px;
  aspect-ratio: 1 / 1;
  display: block;
  padding: 3px;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--theme-secondary), var(--theme-edge));
  isolation: isolate;
  transition: transform 320ms cubic-bezier(.22, .72, .24, 1);
}
.story-chip__media > img {
  box-sizing: border-box;
  inline-size: 100% !important;
  block-size: 100% !important;
  min-inline-size: 100%;
  min-block-size: 100%;
  max-inline-size: 100% !important;
  max-block-size: 100% !important;
  aspect-ratio: 1 / 1 !important;
  display: block;
  object-fit: cover !important;
  object-position: center;
  border: 2px solid #fff;
  border-radius: 50%;
}
.story-chip__play {
  position: absolute;
  z-index: 2;
  inset: 50% auto auto 50%;
  inline-size: 22px;
  block-size: 22px;
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid rgb(255 255 255 / .72);
  border-radius: 50%;
  background: rgb(15 23 42 / .76);
  box-shadow: 0 4px 12px rgb(15 23 42 / .24);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.story-chip__play svg { inline-size: 13px; block-size: 13px; fill: currentColor; }
.story-chip strong { width: 100%; overflow: hidden; color: inherit; font-size: .66rem; line-height: 1.4; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.story-chip:hover > .story-chip__media, .story-chip:focus-visible > .story-chip__media { transform: scale(1.045); }
.story-viewer { width: min(430px, calc(100% - 24px)); max-height: calc(100dvh - 28px); padding: 0; overflow: hidden; border: 0; border-radius: 22px; background: #10151d; box-shadow: 0 30px 90px rgb(0 0 0 / .48); }
.story-viewer::backdrop { background: rgb(5 10 18 / .76); backdrop-filter: blur(7px); }
.story-viewer__media { position: relative; width: 100%; aspect-ratio: 9 / 14; max-height: calc(100dvh - 28px); display: grid; place-items: center; overflow: hidden; background: #0f172a; }
.story-viewer__media :is(img, video) { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; aspect-ratio: 9 / 14; display: block; object-fit: contain !important; object-position: center; background: #0f172a; }
.story-viewer__media [hidden] { display: none !important; }
.story-viewer__close { position: absolute; z-index: 2; inset-block-start: 10px; inset-inline-end: 10px; width: 36px; height: 36px; padding: 0; border: 1px solid rgb(255 255 255 / .25); border-radius: 50%; color: #fff; background: rgb(15 23 42 / .58); font-size: 1.35rem; cursor: pointer; }
.story-viewer__caption { position: absolute; inset: auto 0 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 24px 15px 14px; color: #fff; background: linear-gradient(transparent, rgb(3 7 18 / .9)); }
.story-viewer__caption a { flex: 0 0 auto; padding: 7px 11px; border-radius: 10px; color: #182230; background: #fff; font-size: .75rem; font-weight: 850; }
.story-admin-preview { width: min(190px, 100%); aspect-ratio: 9/14; display: block; margin: 14px auto 0; object-fit: cover; border-radius: 17px; box-shadow: 0 10px 28px rgb(15 23 42 / .14); }
.story-admin-row { grid-template-columns: minmax(180px, 1fr) 80px 110px minmax(170px, auto) !important; }
.story-admin-media-preview { position: relative; width: min(190px, 100%); margin-inline: auto; }
.story-admin-media-preview .story-admin-preview { width: 100%; }
.story-admin-media-preview > .status-chip { position: absolute; inset: 24px auto auto 10px; }
.story-cover-upload { display: grid; gap: 8px; margin-top: 16px; padding-top: 15px; border-top: 1px solid #e4e9f1; }
.story-cover-upload > :is(strong, p) { margin: 0; }
.story-cover-upload > p { color: #667085; font-size: .78rem; line-height: 1.8; }
.story-cover-upload strong small { color: #7c8799; font-weight: 650; }
.story-admin-cover-preview { width: 76px; height: 76px; display: block; object-fit: cover; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 6px 18px rgb(31 45 78 / .16); }
.story-upload-progress { display: grid; gap: 6px; margin-top: 10px; color: #526071; font-size: .76rem; }
.story-upload-progress > span { height: 6px; overflow: hidden; border-radius: 99px; background: #e7ebf2; }
.story-upload-progress i { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--theme-primary), var(--theme-secondary)); transition: width 180ms ease; }
.story-admin-list-media { position: relative; }
.story-admin-list-media video { width: 68px; height: 46px; display: block; object-fit: cover; border-radius: 12px; }
.story-admin-list-media > i { position: absolute; inset-inline-start: 23px; top: 14px; width: 20px; height: 20px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: rgb(15 23 42 / .72); font-size: .55rem; font-style: normal; pointer-events: none; }
.admin-step-heading { display: flex; align-items: center; gap: 10px; margin-block-end: 14px; }
.admin-step-heading > b { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 30px; border-radius: 10px; color: #fff; background: var(--theme-primary); }
.admin-step-heading h3, .admin-step-heading small { margin: 0; }
.admin-step-heading small { color: #6b7280; }
@media (max-width: 680px) {
  .story-strip { width: min(var(--page-width, 1240px), calc(100% - 16px)); gap: 8px; margin-top: 8px; padding: 7px 8px; border-radius: 14px; }
  .story-strip__head { display: none; }
  .story-chip { flex-basis: 60px; }
  .story-chip__media { inline-size: 52px; block-size: 52px; min-inline-size: 52px; min-block-size: 52px; max-inline-size: 52px; max-block-size: 52px; }
  .story-admin-row { grid-template-columns: 1fr !important; }
}

/* Android receives one shared three-color compositor layer: visible motion, one transform. */
@supports (color: color-mix(in srgb, red 10%, white)) {
  @media (prefers-reduced-motion: no-preference) {
    html.is-android :where(.site-shell, .profile-shell, .auth-shell, .admin-shell, .admin-glass-app)::before {
      content: "";
      display: block !important;
      position: fixed;
      z-index: -1;
      width: min(140vw, 44rem);
      height: min(70vh, 32rem);
      inset-block-start: 8vh;
      inset-inline-start: -44vw;
      border-radius: 46%;
      pointer-events: none;
      opacity: .78;
      filter: none !important;
      background:
        radial-gradient(circle at 18% 24%, color-mix(in srgb, var(--tri-primary) 24%, transparent), transparent 34%),
        radial-gradient(circle at 52% 76%, color-mix(in srgb, var(--tri-secondary) 22%, transparent), transparent 36%),
        radial-gradient(circle at 84% 28%, color-mix(in srgb, var(--tri-accent) 23%, transparent), transparent 34%);
      contain: strict;
      will-change: transform !important;
      animation: fajrTricolorDriftAndroid 38s ease-in-out infinite alternate !important;
    }
  }
}

@keyframes fajrTricolorDriftAndroid {
  from { transform: translate3d(0, -1vh, 0); }
  to { transform: translate3d(82vw, 2vh, 0); }
}

@media (max-width: 1100px) {
  .two-columns {
    grid-template-columns: 1fr;
  }

  .users-grid,
  .pages-grid,
  .articles-grid,
  .menus-grid,
  .menu-items-grid {
    grid-template-columns: 1fr;
  }

  .table-head {
    display: none;
  }

  .row-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 980px) {
  .admin-shell {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    position: static;
    height: auto;
  }

  .sidebar-nav {
    flex-direction: row;
  }

  .topbar {
    position: static;
    flex-direction: column;
    align-items: stretch;
  }

  .nav-links {
    justify-content: flex-start;
  }

  .feature-strip {
    grid-template-columns: 1fr;
  }

  .impact-band {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .content-area,
  .topbar,
  .footer,
  .admin-shell {
    width: min(100% - 20px, 1180px);
  }

  .hero {
    min-height: 520px;
  }

  .home-slider,
  .slider-panel {
    min-height: 560px;
  }

  .slider-panel {
    align-items: flex-start;
    background-image:
      linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.72)),
      var(--slide-image);
  }

  .slider-copy {
    width: 100%;
    margin: 0;
    padding: 28px;
    text-align: center;
  }

  .slider-copy .eyebrow,
  .slider-copy .hero-actions {
    margin-inline: auto;
  }

  .slider-copy h1 {
    max-width: 12ch;
    margin-inline: auto;
    font-size: clamp(1.85rem, 9vw, 2.6rem);
  }

  .slider-copy p {
    max-width: 34ch;
    margin-inline: auto;
  }

  .slider-controls {
    inset-inline: 12px;
  }

  .hero-home {
    background-image:
      linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.7)),
      url("/uploads/b2e1e1a881f942659f31874c4bb92359.jpg");
    background-position: left center;
  }

  .hero-copy {
    padding: 28px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .hero h1 {
    max-width: 9ch;
    font-size: clamp(1.75rem, 8vw, 2.25rem);
    word-break: normal;
    overflow-wrap: break-word;
  }

  .hero p {
    max-width: 32ch;
  }

  .content-band,
  .article-detail-header,
  .article-body {
    overflow-x: clip;
  }

  .form-grid.two {
    grid-template-columns: 1fr;
  }

  .section-title,
  .admin-page-header {
    align-items: stretch;
    flex-direction: column;
  }

  .inline-form {
    flex-wrap: wrap;
  }

  .btn-primary,
  .btn-secondary,
  .btn-danger {
    width: 100%;
  }

  .row-actions .btn-primary,
  .row-actions .btn-secondary,
  .row-actions .btn-danger,
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary {
    width: auto;
  }
}

@media (max-width: 1100px) {
  .dynamic-grid,
  .fields-grid,
  .products-grid,
  .payments-grid,
  .services-grid,
  .backups-grid {
    grid-template-columns: 1fr;
  }

  .product-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .topbar {
    position: sticky;
    flex-direction: row;
    align-items: center;
  }

  .topbar .nav-links {
    display: none;
  }

  .site-menu-toggle {
    display: grid;
    flex-shrink: 0;
  }

  .mobile-site-nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 80;
    width: min(330px, calc(100vw - 54px));
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 20px;
    background: #ffffff;
    border-left: 1px solid var(--panel-border);
    box-shadow: -20px 0 50px rgba(18, 37, 27, 0.18);
    transform: translateX(105%);
    transition: transform 0.2s ease;
  }

  .mobile-site-nav.open {
    transform: translateX(0);
  }

  .mobile-site-nav > a:not(.brand) {
    padding: 11px 12px;
    border-radius: 8px;
    color: var(--text);
  }

  .mobile-site-nav > a:not(.brand):hover {
    background: var(--bg-soft);
    color: var(--accent);
  }

  .site-nav-backdrop.open,
  .admin-sidebar-backdrop.open {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: block;
    background: rgba(18, 37, 27, 0.38);
  }

  .admin-shell {
    grid-template-columns: 1fr;
    width: min(100% - 20px, 1180px);
    margin-top: 72px;
  }

  .admin-menu-toggle {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 95;
    display: grid;
    box-shadow: var(--shadow);
  }

  .admin-sidebar {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 90;
    width: min(315px, calc(100vw - 54px));
    height: 100vh;
    border-radius: 0;
    transform: translateX(105%);
    transition: transform 0.2s ease;
  }

  .admin-sidebar.open {
    transform: translateX(0);
  }

  .sidebar-nav {
    flex-direction: column;
  }

  .admin-content {
    padding-top: 0;
  }
}

@media (max-width: 720px) {
  .brand {
    min-width: 0;
  }

  .brand-title,
  .brand-subtitle {
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .rich-toolbar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  }

  .rich-toolbar button,
  .rich-upload {
    width: 100%;
  }

  .visual-editor-toolbar,
  .visual-tool-row,
  .builder-lite-title,
  .option-editor-row,
  .response-card-head {
    align-items: stretch;
    flex-direction: column;
  }

  .segmented-control {
    width: 100%;
  }

  .segmented-control button {
    flex: 1;
  }

  .visual-stage {
    padding: 10px;
  }

  .home-visual-config {
    grid-template-columns: 1fr;
  }

  .spec-table th,
  .spec-table td {
    display: block;
    width: 100%;
  }
}

/* Spatial liquid-glass identity */
:root {
  color-scheme: dark;
  --bg: #061510;
  --bg-soft: #0a211a;
  --surface: rgba(10, 37, 29, 0.74);
  --surface-2: rgba(13, 49, 39, 0.62);
  --panel: rgba(9, 31, 25, 0.78);
  --panel-border: rgba(130, 226, 198, 0.18);
  --text: #f5f1df;
  --muted: #a9c5ba;
  --accent: #334155;
  --accent-2: #6366f1;
  --accent-3: #d7b56d;
  --danger: #ec6f68;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
}

html,
body {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(134, 207, 185, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(134, 207, 185, 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  color: var(--text);
  font-family: var(--site-font, "YB", "Vazirmatn", sans-serif);
}

::selection {
  color: #04110d;
  background: var(--accent-3);
}

h1,
h2,
h3,
h4,
strong {
  color: var(--text);
}

p,
.muted,
small {
  color: var(--muted);
}

:focus-visible {
  outline: 2px solid var(--accent-3);
  outline-offset: 3px;
}

.site-shell {
  background: transparent;
}

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 78px;
  padding: 11px max(22px, calc((100vw - 1240px) / 2));
  border-bottom: 1px solid var(--panel-border);
  background: rgba(5, 21, 16, 0.72);
  backdrop-filter: blur(22px) saturate(145%);
}

.site-brand,
.mobile-nav-heading,
.footer-identity {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-brand {
  min-width: 295px;
}

.brand-copy,
.mobile-nav-heading div {
  display: grid;
  gap: 2px;
}

.brand-copy strong,
.mobile-nav-heading strong {
  font-size: 1rem;
}

.brand-copy small,
.mobile-nav-heading small {
  font-size: 0.76rem;
}

.brand-mark {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border: 1px solid rgba(215, 181, 109, 0.48);
  border-radius: 8px;
  color: #fff7df;
  background: rgba(11, 107, 83, 0.64);
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.08), 0 12px 30px rgba(0, 0, 0, 0.25);
}

.brand-logo {
  width: 46px;
  height: 46px;
  border-color: var(--panel-border);
  background: rgba(255, 255, 255, 0.08);
}

.desktop-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
}

.desktop-navigation a,
.footer-links a {
  padding: 8px 10px;
  color: #c4d8d0;
  border-radius: 6px;
  transition: color 160ms ease, background 160ms ease;
}

.desktop-navigation a:hover,
.footer-links a:hover {
  color: #fff5d7;
  background: rgba(21, 154, 140, 0.13);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-cta,
.btn-primary,
button.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  color: #fafff9;
  background: var(--accent);
  box-shadow: 0 13px 30px rgba(2, 78, 59, 0.28), inset 0 1px rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease;
}

.header-cta:hover,
.btn-primary:hover {
  background: #0d7b60;
  transform: translateY(-2px);
}

.btn-secondary,
button.btn-secondary,
a.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px 17px;
  border: 1px solid rgba(215, 181, 109, 0.38);
  border-radius: 7px;
  color: #f5e6ba;
  background: rgba(215, 181, 109, 0.07);
  cursor: pointer;
}

.btn-secondary:hover {
  background: rgba(215, 181, 109, 0.14);
}

.btn-danger {
  color: #fff;
  background: #9d332f;
  border-color: rgba(255, 150, 145, 0.25);
}

.content-area,
.site-shell > .content-area {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 72px;
}

.home-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 560px;
  height: min(720px, calc(100svh - 130px));
  overflow: hidden;
  background-color: #071812;
  background-image: var(--slide-image);
  background-size: cover;
  background-position: center;
}

.hero-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(2, 14, 11, 0.64);
}

.hero-content {
  width: min(1240px, calc(100% - 44px));
  margin-inline: auto;
  padding-inline-end: min(48vw, 590px);
}

.hero-kicker,
.section-kicker,
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-3);
  font-size: 0.83rem;
  font-weight: 800;
}

.hero-kicker::before,
.section-kicker::before,
.eyebrow::before {
  content: "";
  width: 25px;
  height: 1px;
  background: currentColor;
}

.hero-content h1 {
  max-width: 740px;
  margin: 18px 0 14px;
  color: #fff9e8;
  font-size: 4.6rem;
  line-height: 1.16;
  text-wrap: balance;
}

.hero-content p {
  max-width: 680px;
  color: #d5e5df;
  font-size: 1.14rem;
  line-height: 2;
}

.hero-actions {
  margin-top: 28px;
}

.hero-orbit {
  position: absolute;
  inset-inline-end: max(22px, calc((100vw - 1240px) / 2));
  inset-block-end: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: rgba(4, 22, 17, 0.58);
  backdrop-filter: blur(16px);
}

.hero-orbit > button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 6px;
  color: var(--text);
  background: transparent;
  font-size: 1.5rem;
  cursor: pointer;
}

.slider-dots {
  display: flex;
  gap: 7px;
}

.slider-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.34);
  cursor: pointer;
}

.slider-dots button.active {
  width: 26px;
  border-radius: 5px;
  background: var(--accent-3);
}

.hero-signal {
  position: absolute;
  inset-inline-start: max(22px, calc((100vw - 1240px) / 2));
  inset-block-end: 40px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #b9d2c8;
  font-size: 0.78rem;
}

.hero-signal i {
  width: 52px;
  height: 1px;
  background: rgba(215, 181, 109, 0.7);
}

.impact-band {
  width: min(1240px, calc(100% - 44px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-inline: 1px solid var(--panel-border);
  border-bottom: 1px solid var(--panel-border);
  background: rgba(8, 29, 23, 0.62);
  backdrop-filter: blur(18px);
}

.impact-band > div {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 2px 14px;
  min-height: 122px;
  padding: 25px 28px;
  border-inline-start: 1px solid var(--panel-border);
  background: rgba(10, 39, 31, 0.68);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
}

.impact-band > div:last-child {
  border-inline-start: 0;
}

.impact-band svg {
  grid-row: 1 / 3;
  width: 30px;
  color: var(--accent-3);
}

.impact-band strong {
  color: var(--text);
  font-size: 1.05rem;
}

.impact-band span {
  color: var(--muted);
  font-size: 0.85rem;
}

.section-block,
.content-band,
.public-page-header,
.article-detail,
.product-detail,
.checkout-layout,
.order-success,
.contact-layout {
  width: min(1160px, calc(100% - 44px));
  margin-inline: auto;
}

.section-block,
.content-band {
  margin-block: 86px;
}

.content-band,
.liquid-panel,
.glass-card,
.admin-section,
.route-state {
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px) saturate(135%);
}

.content-band {
  padding: 52px;
}

.home-summary {
  display: grid;
  grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1.6fr);
  gap: 64px;
  align-items: start;
}

.section-heading h2,
.section-title h2 {
  margin-top: 10px;
  font-size: 2rem;
}

.feature-prose {
  font-size: 1.03rem;
}

.section-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.section-title > p {
  max-width: 460px;
}

.public-section-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.section-card,
.article-card,
.product-card,
.metric-grid > a,
.quick-action-grid > a,
.order-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: rgba(12, 42, 34, 0.62);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(16px);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.section-card {
  min-height: 235px;
  padding: 26px;
}

.section-card:hover,
.article-card:hover,
.product-card:hover,
.metric-grid > a:hover,
.quick-action-grid > a:hover {
  transform: translateY(-4px);
  border-color: rgba(215, 181, 109, 0.42);
  background: rgba(15, 55, 44, 0.76);
}

.section-card > span,
.article-meta {
  color: var(--accent-3);
  font-size: 0.78rem;
  font-weight: 800;
}

.section-card h3 {
  margin: 38px 0 10px;
  font-size: 1.28rem;
}

.section-card b {
  position: absolute;
  inset-inline-end: 26px;
  inset-block-end: 20px;
  color: var(--accent-2);
  font-size: 1.4rem;
}

.news-carousel,
.article-grid,
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.article-card,
.product-card {
  display: flex;
  flex-direction: column;
  padding: 12px 12px 20px;
}

.article-cover {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 6px;
  background: #0c251d;
}

.article-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.article-card:hover .article-cover img,
.product-card:hover .article-cover img {
  transform: scale(1.035);
}

.article-card .article-meta,
.product-card .article-meta {
  margin: 18px 8px 7px;
}

.article-card h3,
.product-card h3,
.article-card p,
.product-card p,
.article-card .read-link,
.product-card .btn-primary,
.product-price {
  margin-inline: 8px;
}

.article-card h3,
.product-card h3 {
  font-size: 1.05rem;
}

.article-card p,
.product-card p {
  margin-top: 8px;
  font-size: 0.88rem;
  line-height: 1.8;
}

.read-link {
  margin-top: auto;
  padding-top: 16px;
  color: #67d5c3;
  font-weight: 800;
}

.public-page-header {
  position: relative;
  min-height: 290px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: 68px 0 38px;
  border-bottom: 1px solid var(--panel-border);
}

.public-page-header h1 {
  margin: 12px 0;
  font-size: 3.2rem;
}

.public-page-header p {
  max-width: 760px;
  font-size: 1.04rem;
}

.prose-rtl,
.article-body {
  color: #d7e5df;
  line-height: 2.1;
}

.prose-rtl h2,
.prose-rtl h3,
.article-body h2,
.article-body h3 {
  margin: 28px 0 12px;
}

.prose-rtl a,
.article-body a {
  color: #69daca;
}

.dynamic-panel .form-section {
  padding-block: 18px;
  border-top: 1px solid var(--panel-border);
}

.input,
input.input,
textarea.input,
select.input {
  width: 100%;
  min-height: 45px;
  border: 1px solid rgba(144, 207, 189, 0.22);
  border-radius: 7px;
  color: var(--text);
  background: rgba(4, 22, 17, 0.64);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
}

.input:focus {
  border-color: rgba(21, 154, 140, 0.9);
  box-shadow: 0 0 0 3px rgba(21, 154, 140, 0.12);
}

.input::placeholder {
  color: #78978b;
}

select.input option {
  color: #eef8f3;
  background: #0a211a;
}

.check-row {
  border-color: var(--panel-border);
  background: rgba(7, 31, 24, 0.45);
}

.notice-box.success {
  color: #bff8d8;
  border-color: rgba(63, 202, 126, 0.3);
  background: rgba(30, 126, 75, 0.17);
}

.notice-box.error,
.error-box {
  color: #ffd5d2;
  border-color: rgba(236, 111, 104, 0.32);
  background: rgba(157, 51, 47, 0.17);
}

.footer {
  width: 100%;
  margin: 40px 0 0;
  padding: 52px max(22px, calc((100vw - 1160px) / 2)) 24px;
  border: 0;
  border-top: 1px solid var(--panel-border);
  border-radius: 0;
  color: var(--text);
  background: rgba(4, 19, 15, 0.86);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.45fr 0.8fr 0.9fr;
  gap: 48px;
}

.footer-identity {
  align-items: flex-start;
}

.footer-identity h2 {
  margin: 0 0 10px;
  font-size: 1.2rem;
}

.footer-links,
.footer-contact {
  display: grid;
  align-content: start;
  gap: 5px;
}

.footer-contact a,
.footer-contact span {
  color: #bbd1c8;
  line-height: 1.9;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 38px;
  padding-top: 18px;
  border-top: 1px solid var(--panel-border);
  color: #78978b;
  font-size: 0.78rem;
}

.route-state {
  width: min(620px, calc(100% - 44px));
  margin: 100px auto;
  padding: 48px;
  text-align: center;
}

.route-state strong {
  display: block;
  font-size: 2rem;
}

.route-state p {
  margin: 10px 0 24px;
}

/* Admin command center */
.admin-shell {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  min-height: 100vh;
  background: rgba(4, 18, 14, 0.44);
}

.admin-sidebar,
.admin-sidebar.glass-surface {
  position: sticky;
  inset: auto;
  inset-block-start: 0;
  z-index: 60;
  width: auto;
  height: 100vh;
  padding: 20px 14px;
  overflow-y: auto;
  transform: none;
  border: 0;
  border-inline-end: 1px solid var(--panel-border);
  border-radius: 0;
  background: rgba(5, 24, 18, 0.78);
  box-shadow: none;
  backdrop-filter: blur(26px);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 72px;
  margin-bottom: 14px;
  padding: 9px;
  border-bottom: 1px solid var(--panel-border);
}

.sidebar-brand > div {
  display: grid;
  gap: 2px;
}

.sidebar-brand .brand-mark {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
}

.sidebar-brand small {
  font-size: 0.7rem;
}

.sidebar-nav {
  align-items: stretch;
  flex-direction: column;
  flex-wrap: nowrap;
}

.sidebar-group {
  display: grid;
  gap: 3px;
}

.sidebar-group > span {
  margin: 14px 10px 5px;
  color: #718f83;
  font-size: 0.72rem;
}

.sidebar-nav a,
.sidebar-button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #b9d0c7;
  background: transparent;
  cursor: pointer;
}

.sidebar-nav a:hover,
.sidebar-button:hover {
  color: #fff6dc;
  border-color: var(--panel-border);
  background: rgba(21, 154, 140, 0.1);
}

.sidebar-nav svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.admin-content {
  width: min(1400px, 100%);
  min-width: 0;
  margin-inline: auto;
  padding: 28px 34px 70px;
}

.admin-page-header,
.page-header.admin-page-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 24px;
  padding: 12px 0 22px;
  border-bottom: 1px solid var(--panel-border);
  background: transparent;
}

.admin-page-header h1 {
  margin: 8px 0 5px;
  font-size: 2.2rem;
}

.admin-grid,
.grid-cards {
  gap: 14px;
}

.glass-card,
.admin-section {
  color: var(--text);
}

.admin-section {
  padding: 24px;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.metric-grid > a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 16px;
  min-height: 132px;
  padding: 22px;
}

.metric-grid strong {
  grid-row: 1 / 3;
  grid-column: 2;
  color: var(--accent-3);
  font-size: 2.8rem;
  line-height: 1;
}

.metric-grid span {
  font-weight: 800;
}

.metric-grid small {
  align-self: end;
}

.quick-command {
  margin-top: 18px;
}

.quick-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.quick-action-grid > a {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 2px 10px;
  padding: 18px;
}

.quick-action-grid svg {
  grid-row: 1 / 3;
  width: 24px;
  fill: none;
  stroke: var(--accent-2);
}

.quick-action-grid span {
  font-size: 0.8rem;
  color: var(--muted);
}

.admin-table,
.table-row,
.table-head {
  border-color: var(--panel-border);
  background: rgba(7, 27, 21, 0.52);
}

.table-row:hover {
  background: rgba(17, 57, 46, 0.6);
}

.status-chip {
  border-color: var(--panel-border);
  color: #cde2da;
  background: rgba(21, 154, 140, 0.1);
}

.users-grid {
  grid-template-columns: 1.3fr 1fr 1.1fr 0.8fr 1.8fr;
}

.rich-editor,
.visual-stage,
.visual-editor-toolbar,
.builder-lite-preview {
  border-color: var(--panel-border);
  background: rgba(5, 23, 18, 0.68);
}

.rich-toolbar {
  border-color: var(--panel-border);
  background: rgba(10, 39, 31, 0.9);
}

.rich-toolbar button,
.rich-upload,
.segmented-control button {
  color: #c9ddd5;
  border-color: var(--panel-border);
  background: rgba(255, 255, 255, 0.035);
}

.rich-toolbar button.active,
.segmented-control button.active {
  color: #061510;
  background: var(--accent-3);
}

.rich-surface,
.visual-content-box {
  color: #163629;
  background-color: #f5f5ed;
}

.visual-stage {
  background-image:
    linear-gradient(rgba(102, 171, 151, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(102, 171, 151, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
}

.login-panel,
.auth-shell .glass-surface {
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  color: var(--text);
  background: rgba(6, 28, 21, 0.76);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(26px);
}

.auth-shell {
  background-color: #061510;
  background-image:
    linear-gradient(rgba(134, 207, 185, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(134, 207, 185, 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
}

.auth-tabs {
  border-color: var(--panel-border);
  background: rgba(255, 255, 255, 0.035);
}

.auth-tabs button {
  color: var(--muted);
}

.auth-tabs button.active {
  color: #061510;
  background: var(--accent-3);
}

@media (max-width: 1100px) {
  .desktop-navigation {
    display: none;
  }

  .site-menu-toggle {
    display: grid;
    border-color: var(--panel-border);
    background: rgba(255, 255, 255, 0.045);
  }

  .site-menu-toggle span,
  .admin-menu-toggle span {
    background: #d4e9e1;
  }

  .site-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 88;
    display: block;
    opacity: 0;
    visibility: hidden;
    background: rgba(0, 9, 7, 0.68);
    transition: opacity 180ms ease;
  }

  .site-nav-backdrop.open {
    opacity: 1;
    visibility: visible;
  }

  .mobile-site-nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 90;
    display: block;
    width: min(340px, calc(100vw - 42px));
    padding: 22px;
    transform: translateX(105%);
    border-inline-end: 1px solid var(--panel-border);
    background: rgba(5, 24, 18, 0.96);
    backdrop-filter: blur(28px);
    transition: transform 180ms ease;
  }

  .mobile-site-nav.open {
    transform: translateX(0);
  }

  .mobile-site-nav nav {
    display: grid;
    gap: 4px;
    margin-top: 28px;
  }

  .mobile-site-nav nav a {
    padding: 12px;
    border-bottom: 1px solid var(--panel-border);
  }

  .hero-content {
    padding-inline-end: 34vw;
  }

  .public-section-grid,
  .news-carousel,
  .article-grid,
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-shell {
    grid-template-columns: 1fr;
  }

  .admin-sidebar,
  .admin-sidebar.glass-surface {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(310px, calc(100vw - 48px));
    height: 100vh;
    transform: translateX(105%);
    border-inline-end: 0;
    border-inline-start: 1px solid var(--panel-border);
    transition: transform 180ms ease;
  }

  .admin-sidebar.open {
    transform: translateX(0);
  }

  .admin-menu-toggle {
    position: fixed;
    inset-block-start: 14px;
    inset-inline-start: 14px;
    z-index: 70;
    display: grid;
    border-color: var(--panel-border);
    background: rgba(5, 24, 18, 0.9);
  }

  .admin-sidebar-backdrop {
    z-index: 58;
  }

  .admin-content {
    padding-top: 70px;
  }
}

@media (max-width: 760px) {
  .site-header {
    min-height: 68px;
    padding: 9px 14px;
  }

  .site-brand {
    min-width: 0;
  }

  .brand-mark,
  .brand-logo {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .brand-copy strong {
    font-size: 0.88rem;
  }

  .brand-copy small {
    display: none;
  }

  .header-cta {
    display: none;
  }

  .home-hero {
    min-height: 560px;
    height: calc(100svh - 110px);
    max-height: 680px;
    background-position: 58% center;
  }

  .hero-content {
    width: calc(100% - 30px);
    padding: 38px 0 90px;
  }

  .hero-content h1 {
    margin-top: 14px;
    font-size: 2.65rem;
  }

  .hero-content p {
    font-size: 0.95rem;
    line-height: 1.9;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-orbit {
    inset-inline: auto 15px;
    inset-block-end: 22px;
  }

  .hero-signal {
    display: none;
  }

  .impact-band {
    width: calc(100% - 30px);
    grid-template-columns: 1fr;
  }

  .impact-band > div {
    min-height: 98px;
    padding: 20px;
    border-inline-start: 0;
    border-bottom: 1px solid var(--panel-border);
  }

  .impact-band > div:last-child {
    border-bottom: 0;
  }

  .section-block,
  .content-band,
  .public-page-header,
  .article-detail,
  .product-detail,
  .checkout-layout,
  .order-success,
  .contact-layout {
    width: calc(100% - 30px);
  }

  .section-block,
  .content-band {
    margin-block: 58px;
  }

  .content-band {
    padding: 24px 18px;
  }

  .home-summary {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .section-title,
  .admin-page-header {
    align-items: stretch;
    flex-direction: column;
  }

  .section-title h2,
  .section-heading h2 {
    font-size: 1.55rem;
  }

  .public-section-grid,
  .news-carousel,
  .article-grid,
  .product-grid,
  .footer-grid,
  .metric-grid,
  .quick-action-grid {
    grid-template-columns: 1fr;
  }

  .section-card {
    min-height: 205px;
  }

  .public-page-header {
    min-height: 230px;
    padding-top: 54px;
  }

  .public-page-header h1 {
    font-size: 2.2rem;
  }

  .footer {
    padding: 38px 18px 20px;
  }

  .footer-grid {
    gap: 28px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 6px;
  }

  .admin-content {
    padding-inline: 14px;
  }

  .admin-page-header h1 {
    font-size: 1.75rem;
  }

  .metric-grid strong {
    font-size: 2.35rem;
  }

  .admin-section {
    padding: 16px;
  }
}

/* Interaction, contrast and layout hardening */
:where(a, button, summary, [role="button"], input, textarea, select, .check-row, .table-row, .editor-tool) {
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease,
              box-shadow 220ms ease, transform 220ms cubic-bezier(.2,.8,.2,1), filter 220ms ease;
}
:where(a, button, summary, [role="button"]):hover { filter: brightness(1.09) saturate(1.08); }
:where(button, summary, [role="button"], .check-row):hover { transform: translateY(-2px); }
:where(input, textarea, select):hover { border-color: rgba(80, 224, 194, .48) !important; }
:where(a, button, summary, input, textarea, select):focus-visible {
  outline: 3px solid rgba(83, 229, 200, .52);
  outline-offset: 3px;
}

.home-hero { background-image: none; }
.hero-slide-media {
  position: absolute;
  z-index: -3;
  inset: 0;
  background-position: center;
  background-size: cover;
  animation: heroSlideReveal 950ms cubic-bezier(.16,1,.3,1) both;
  will-change: transform, opacity, filter;
}
.hero-slide-media::after {
  content: "";
  position: absolute;
  inset: -15%;
  background: radial-gradient(circle at 72% 30%, rgba(73,225,188,.16), transparent 34%);
  animation: heroLightSweep 1500ms ease-out both;
}
.hero-content-enter { animation: heroCopyReveal 760ms cubic-bezier(.16,1,.3,1) both; }
.hero-content p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  max-height: 6em;
}
.hero-orbit > button:hover { color: #fff4ce; background: rgba(67,218,184,.16); transform: scale(1.1); }
.slider-dots button:hover { background: rgba(255,255,255,.75); transform: scale(1.28); }
.slider-dots button.active { box-shadow: 0 0 20px rgba(236,205,131,.48); }
@keyframes heroSlideReveal {
  0% { opacity: 0; transform: scale(1.09) translate3d(2.5%,0,0); filter: blur(9px) saturate(.75); }
  45% { opacity: 1; }
  100% { opacity: 1; transform: scale(1) translate3d(0,0,0); filter: blur(0) saturate(1); }
}
@keyframes heroCopyReveal {
  0% { opacity: 0; transform: translate3d(0,32px,0); filter: blur(7px); }
  100% { opacity: 1; transform: translate3d(0,0,0); filter: blur(0); }
}
@keyframes heroLightSweep {
  from { opacity: 0; transform: translateX(18%) rotate(-5deg); }
  to { opacity: 1; transform: translateX(0) rotate(0); }
}

.mega-panel {
  inset-inline: auto !important;
  left: 50% !important;
  right: auto !important;
  width: max-content;
  min-width: min(460px, calc(100vw - 32px));
  max-width: min(1120px, calc(100vw - 32px));
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  transform: translateX(-50%) translateY(12px) scale(.985);
}
.mega-node[open] > .mega-panel,
.mega-node:hover > .mega-panel { display: flex; transform: translateX(-50%) translateY(0) scale(1); }
.mega-panel > .mega-section,
.mega-panel > .nav-leaf,
.mega-panel > .submenu-node { flex: 1 1 245px; width: min(280px, calc(100vw - 70px)); }

.article-body,
.rich-surface,
.visual-content-box,
.media-card,
.admin-help,
.segmented-control,
.dynamic-panel .form-section {
  color: #dcebe5 !important;
  border-color: var(--glass-edge) !important;
  background:
    radial-gradient(circle at 10% 8%, rgba(27,163,137,.09), transparent 24rem),
    rgba(3, 22, 16, .9) !important;
}
.rich-surface figcaption,
.article-body figcaption { color: #a8c5ba; }
.public-page-content :where(p, li, td, blockquote, span):not([class]) { color: #dcebe5 !important; }
.public-page-content :where(h1,h2,h3,h4,h5,h6) { color: #fff5d8 !important; }
.editor-figure .editor-media,
.prose-rtl .editor-figure img,
.prose-rtl .editor-figure video,
.article-body .editor-figure img,
.article-body .editor-figure video { height: auto; }
.contact-layout { display: grid; grid-template-columns: minmax(270px,.72fr) minmax(0,1.28fr); gap: 22px; align-items: start; }
.contact-info-panel,
.contact-form-panel { padding: clamp(24px,4vw,42px); border-radius: 30px; }
.contact-info-panel { display: grid; gap: 14px; position: sticky; top: 118px; }
.contact-line { display: grid; gap: 5px; padding: 16px; border: 1px solid var(--glass-edge); border-radius: 17px; background: rgba(255,255,255,.04); }
.contact-line strong { color: #efd38c; }
.contact-form-panel form { display: grid; gap: 24px; }
.table-row:hover,
.permission-item:hover,
.contact-line:hover,
.check-row:hover {
  border-color: rgba(91,226,197,.32);
  background: rgba(35,167,140,.1);
  box-shadow: inset 0 1px rgba(255,255,255,.08);
}
.table-row:hover { transform: translateX(-3px); }

.relation-picker { padding: 20px; border: 1px solid var(--glass-edge); border-radius: 23px; background: rgba(1,16,12,.34); }
.relation-picker legend { padding-inline: 9px; color: #efd38c; font-weight: 850; }
.relation-picker > p { margin: 0 0 14px; color: var(--muted); }
.relation-check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 9px; max-height: 300px; overflow: auto; }
.related-content-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 12px; margin-top: 20px; }
.related-content-card { display: grid; gap: 7px; padding: 18px; border: 1px solid var(--glass-edge); border-radius: 19px; color: var(--text); background: rgba(255,255,255,.045); }
.related-content-card:hover { transform: translateY(-5px); background: rgba(31,164,137,.12); box-shadow: 0 22px 60px rgba(0,0,0,.28); }
.related-content-card span { color: var(--muted); font-size: .86rem; line-height: 1.8; }
.related-content-card b { color: #efd38c; }
.permission-group { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--glass-edge); }
.permission-group h3 { margin: 0 0 12px; color: #efd38c; }

body,
.content-area,
.article-detail,
.product-detail,
.public-page,
.contact-layout,
.checkout-layout { color: var(--text); background-color: transparent; }
.product-gallery,
.product-summary,
.payment-method,
.article-detail,
.dynamic-panel,
.form-section,
.comment-form-wrap,
.contact-card,
.profile-panel {
  color: var(--text);
  border-color: var(--glass-edge) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), transparent 34%),
    rgba(4, 25, 19, .76) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.09);
  backdrop-filter: blur(28px) saturate(155%);
}
.product-price { color: #f0d48f; }
.product-gallery > img { background: rgba(2,15,11,.78); }
.prose-rtl,
.article-body,
.product-summary p,
.dynamic-panel p { color: #d8e9e2; }

.form-grid { gap: 18px; }
.form-grid > label,
.dynamic-panel label,
.comment-form-wrap label { gap: 8px; }
.form-grid > label > span,
.form-grid > .full > span,
.dynamic-panel label > span { color: #dcece6; font-weight: 750; }
.form-section {
  margin-block: 14px;
  padding: clamp(20px, 3vw, 30px) !important;
  border: 1px solid var(--glass-edge) !important;
  border-radius: 24px;
}
.form-section h3 { margin: 0 0 18px; color: #f1d997; }
.dynamic-panel,
.comment-form-wrap { padding: clamp(22px, 4vw, 46px); border-radius: 30px; }
.input,
input.input,
textarea.input,
select.input {
  min-height: 50px;
  padding-inline: 15px;
  color: #eef9f4 !important;
  background: linear-gradient(145deg, rgba(255,255,255,.065), transparent), rgba(0,13,10,.72) !important;
}
textarea.input { padding-block: 13px; }

.section-block,
.content-band { margin-block: clamp(46px, 6vw, 82px); }
.article-detail,
.product-detail,
.checkout-layout,
.contact-layout { margin-block: clamp(26px, 5vw, 64px); }
.public-page-header { margin-top: clamp(22px, 4vw, 50px); margin-bottom: 22px; }

.slider-button-editor {
  padding: 18px;
  border: 1px solid var(--glass-edge);
  border-radius: 22px;
  background: rgba(1,16,12,.35);
}
.slider-button-editor legend { padding-inline: 9px; color: #efd48e; font-weight: 850; }

@media (max-width: 760px) {
  .mega-panel { left: auto !important; min-width: 0; width: 100%; max-width: 100%; transform: none; }
  .mega-node[open] > .mega-panel,
  .mega-node:hover > .mega-panel { transform: none; }
  .dynamic-panel,
  .comment-form-wrap { padding: 18px; }
  .form-grid { gap: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide-media,
  .hero-slide-media::after,
  .hero-content-enter { animation: none !important; }
}

/* Store, cart and order tracking */
.home-hero { height: min(var(--home-slider-height, 620px), calc(100svh - 112px)); }
.news-carousel { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--news-card-width, 360px)), 1fr)); }
.shop-heading { position: relative; }
.cart-float-link { position: absolute; inset-inline-end: 0; inset-block-end: 38px; gap: 9px; }
.cart-float-link span { min-width: 26px; height: 26px; display: grid; place-items: center; border-radius: 9px; color: #073024; background: #f1d58f; font-size: .78rem; }
.shop-filters { width: min(1160px,calc(100% - 44px)); margin: 0 auto 28px; display: grid; grid-template-columns: 1.5fr repeat(3,1fr); gap: 10px; padding: 15px; }
.shop-filters label { display: grid; gap: 5px; }
.shop-filters label > span { color: #8dac9f; font-size: .72rem; }
.shop-notice { width: min(1160px,calc(100% - 44px)); margin: 0 auto 18px; }
.shop-product-grid { width: min(1160px,calc(100% - 44px)); margin-inline: auto; }
.wishlist-button { position: absolute; inset: 23px 23px auto auto; z-index: 4; width: 39px; height: 39px; border: 1px solid rgba(255,255,255,.24); border-radius: 14px; color: #fff; background: rgba(2,18,14,.66); backdrop-filter: blur(14px); cursor: pointer; font-size: 1.35rem; }
.wishlist-button.active { color: #ff9f9a; background: rgba(110,19,24,.72); }
.product-price-row { display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 16px; }
.product-price-row del { color: #78978c; font-size: .78rem; }
.product-actions { margin: 12px 8px 0; }
.variant-select,.quantity-select { display: grid; gap: 6px; margin-top: 13px; }
.quantity-select { max-width: 150px; }

.cart-layout { width: min(1160px,calc(100% - 44px)); margin-inline: auto; display: grid; grid-template-columns: minmax(0,1.7fr) minmax(280px,.68fr); gap: 16px; align-items: start; }
.cart-items { display: grid; gap: 10px; }
.cart-line { display: grid; grid-template-columns: 92px minmax(0,1fr) auto auto auto; gap: 14px; align-items: center; padding: 13px; }
.cart-line img { width: 92px; aspect-ratio: 1; object-fit: cover; border-radius: 17px; }
.cart-line > div:nth-child(2) { display: grid; gap: 3px; }
.cart-line > div:nth-child(2) span { color: #85a99d; font-size: .82rem; }
.quantity-control { display: flex; align-items: center; gap: 9px; padding: 5px; border: 1px solid var(--glass-edge); border-radius: 13px; }
.quantity-control button { width: 30px; height: 30px; border: 0; border-radius: 9px; color: #e4f3ed; background: rgba(255,255,255,.08); cursor: pointer; }
.cart-summary { position: sticky; top: 112px; display: grid; gap: 13px; padding: 24px; }
.checkout-product-mini { display: grid; grid-template-columns: 60px 1fr; gap: 10px; padding-block: 10px; border-bottom: 1px solid var(--glass-edge); }
.checkout-product-mini img { width: 60px; aspect-ratio: 1; object-fit: cover; border-radius: 13px; }
.checkout-product-mini > div { display: grid; gap: 2px; }
.checkout-product-mini span,.checkout-product-mini small { color: #87a89c; font-size: .75rem; }
.input-action { display: grid; grid-template-columns: 1fr auto; gap: 6px; }

.tracking-panel { width: min(760px,calc(100% - 44px)); margin: 0 auto 22px; padding: 24px; }
.tracking-panel button { margin-top: 14px; }
.order-tracking-result { max-width: 840px; }
.tracking-timeline { display: grid; margin-top: 28px; }
.tracking-timeline > div { position: relative; display: grid; grid-template-columns: 26px 1fr; gap: 12px; min-height: 78px; }
.tracking-timeline > div::before { content:""; position:absolute; inset: 22px 10px -10px auto; width: 2px; background: rgba(63,204,173,.22); }
.tracking-timeline > div:last-child::before { display:none; }
.tracking-timeline i { width: 22px; height: 22px; border: 5px solid rgba(30,177,146,.24); border-radius: 50%; background: #30c4a7; background-clip: content-box; }
.tracking-timeline span { display:grid; gap:3px; }

.store-config-grid { margin-top: 18px; align-items: start; }
.config-list { display: grid; gap: 6px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--glass-edge); }
.config-list > button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 11px; border: 1px solid transparent; border-radius: 13px; color: inherit; text-align: start; background: rgba(255,255,255,.035); cursor: pointer; }
.config-list > button:hover { border-color: var(--glass-edge); background: rgba(39,181,152,.09); }
.config-list > button > span:first-child { display: grid; gap: 2px; }

@media (max-width: 950px) {
  .shop-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
  .cart-line { grid-template-columns: 72px minmax(0,1fr) auto; }
  .cart-line img { width: 72px; }
  .cart-line > strong,.cart-line > .btn-danger { grid-column: auto; }
}

@media (max-width: 620px) {
  .cart-float-link { position: static; align-self: flex-start; margin-top: 14px; }
  .shop-filters { width: calc(100% - 30px); grid-template-columns: 1fr; }
  .shop-product-grid,.cart-layout { width: calc(100% - 30px); }
  .cart-line { grid-template-columns: 64px 1fr; }
  .cart-line img { width: 64px; }
  .quantity-control,.cart-line > strong,.cart-line > .btn-danger { grid-column: 2; justify-self: start; }
  .input-action { grid-template-columns: 1fr; }
}

/* 2026 liquid-glass design system */
:root {
  --glass: color-mix(in srgb, #0c2f27 70%, transparent);
  --glass-strong: color-mix(in srgb, #09231d 88%, transparent);
  --glass-soft: color-mix(in srgb, #d9fff2 8%, transparent);
  --glass-edge: rgba(198, 255, 237, 0.2);
  --glass-highlight: rgba(255, 255, 255, 0.16);
  --radius-xs: 12px;
  --radius-sm: 17px;
  --radius-md: 24px;
  --radius-lg: 32px;
  --liquid-shadow: 0 28px 90px rgba(0, 8, 6, 0.34), inset 0 1px 0 var(--glass-highlight);
}

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(circle at 8% 6%, rgba(31, 181, 153, 0.2), transparent 28rem),
    radial-gradient(circle at 92% 34%, rgba(215, 181, 109, 0.13), transparent 32rem),
    linear-gradient(145deg, #03100d 0%, #071d17 42%, #04130f 100%);
  background-attachment: fixed;
}

.site-shell,
.admin-shell,
.auth-shell {
  position: relative;
  isolation: isolate;
}

.site-shell::before,
.site-shell::after,
.admin-shell::before,
.admin-shell::after,
.auth-shell::before {
  content: "";
  position: fixed;
  z-index: -1;
  width: 36rem;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(4px);
  opacity: 0.5;
  animation: liquidOrb 16s ease-in-out infinite alternate;
}

.site-shell::before,
.admin-shell::before,
.auth-shell::before {
  inset: -18rem auto auto -12rem;
  background: radial-gradient(circle at 35% 35%, rgba(49, 219, 189, 0.32), rgba(3, 74, 59, 0.05) 65%, transparent 72%);
}

.site-shell::after,
.admin-shell::after {
  inset: auto -16rem -18rem auto;
  background: radial-gradient(circle at 40% 45%, rgba(215, 181, 109, 0.23), rgba(98, 72, 21, 0.03) 65%, transparent 72%);
  animation-delay: -7s;
}

.site-header {
  inset-block-start: 12px;
  width: min(1240px, calc(100% - 28px));
  min-height: 76px;
  margin: 14px auto 0;
  padding: 10px 16px;
  border: 1px solid var(--glass-edge);
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.11), transparent 32%),
    rgba(4, 24, 18, 0.68);
  box-shadow: 0 20px 60px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.13);
  backdrop-filter: blur(30px) saturate(175%);
}

.brand-mark,
.brand-logo {
  border-radius: 16px;
}

.desktop-navigation a,
.footer-links a {
  border-radius: 13px;
}

.desktop-navigation a:hover {
  box-shadow: inset 0 1px rgba(255,255,255,.08);
}

.header-cta,
.btn-primary,
button.btn-primary,
.btn-secondary,
button.btn-secondary,
a.btn-secondary,
.btn-danger,
button.btn-danger {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease, background 220ms ease;
}

.btn-primary,
button.btn-primary,
.header-cta {
  background:
    linear-gradient(150deg, rgba(255,255,255,.18), transparent 36%),
    linear-gradient(135deg, #0c765b, #118d7d);
  box-shadow: 0 16px 38px rgba(5, 118, 91, .32), inset 0 1px rgba(255,255,255,.25);
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-danger:hover,
.header-cta:hover {
  transform: translateY(-3px) scale(1.015);
}

.home-hero {
  width: min(1480px, calc(100% - 28px));
  margin: 16px auto 0;
  border: 1px solid var(--glass-edge);
  border-radius: 38px;
  box-shadow: 0 34px 110px rgba(0,0,0,.46), inset 0 1px rgba(255,255,255,.18);
}

.hero-veil {
  background:
    radial-gradient(circle at 74% 35%, transparent 0 12%, rgba(3,14,11,.18) 43%),
    linear-gradient(90deg, rgba(2, 14, 11, .94), rgba(2, 14, 11, .58) 58%, rgba(2,14,11,.25));
}

.hero-content > * { animation: liquidRise 700ms both; }
.hero-content h1 { animation-delay: 80ms; text-shadow: 0 8px 36px rgba(0,0,0,.38); }
.hero-content p { animation-delay: 150ms; }
.hero-content .hero-actions { animation-delay: 220ms; }

.hero-orbit,
.impact-band {
  border-radius: 22px;
  background: rgba(6, 29, 22, .58);
  box-shadow: inset 0 1px rgba(255,255,255,.11), 0 20px 50px rgba(0,0,0,.2);
  backdrop-filter: blur(28px) saturate(170%);
}

.impact-band {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--glass-edge);
}

.impact-band > div { background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(7,37,29,.58)); }

.content-band,
.liquid-panel,
.glass-card,
.admin-section,
.route-state,
.section-card,
.article-card,
.product-card,
.metric-grid > a,
.quick-action-grid > a,
.order-card {
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-md);
  background:
    linear-gradient(145deg, rgba(255,255,255,.095), transparent 32%),
    linear-gradient(330deg, rgba(27, 163, 137, .06), transparent 44%),
    var(--glass);
  box-shadow: var(--liquid-shadow);
  backdrop-filter: blur(30px) saturate(165%);
}

.content-band,
.glass-card,
.admin-section,
.section-card,
.article-card,
.product-card,
.metric-grid > a,
.quick-action-grid > a {
  animation: liquidRise 520ms cubic-bezier(.2,.78,.2,1) both;
}

.section-card:nth-child(2n),
.article-card:nth-child(2n),
.product-card:nth-child(2n) { animation-delay: 55ms; }
.section-card:nth-child(3n),
.article-card:nth-child(3n),
.product-card:nth-child(3n) { animation-delay: 110ms; }

.section-card:hover,
.article-card:hover,
.product-card:hover,
.metric-grid > a:hover,
.quick-action-grid > a:hover {
  transform: translateY(-8px) scale(1.012);
  border-color: rgba(194,255,236,.34);
  box-shadow: 0 34px 90px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.2);
}

.article-cover { border-radius: 18px; }

.input,
input.input,
textarea.input,
select.input {
  border-radius: 16px;
  border-color: rgba(183, 242, 223, .18);
  background: linear-gradient(145deg, rgba(255,255,255,.055), transparent), rgba(1, 15, 11, .58);
  box-shadow: inset 0 1px rgba(255,255,255,.07);
}

.input:focus {
  border-color: rgba(68, 220, 190, .76);
  box-shadow: 0 0 0 4px rgba(37, 191, 161, .12), inset 0 1px rgba(255,255,255,.1);
}

.check-row,
.status-chip,
.notice-box,
.empty-state { border-radius: 16px; }

.admin-shell {
  grid-template-columns: 292px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  background: transparent;
}

.admin-sidebar,
.admin-sidebar.glass-surface {
  inset-block-start: 14px;
  height: calc(100vh - 28px);
  border: 1px solid var(--glass-edge);
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.1), transparent 26%),
    rgba(4, 24, 18, .76);
  box-shadow: 0 28px 90px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.13);
  backdrop-filter: blur(32px) saturate(175%);
}

.sidebar-brand { border-radius: 18px; background: rgba(255,255,255,.035); padding-inline: 12px; }
.sidebar-nav a,
.sidebar-button { border-radius: 14px; }
.sidebar-nav a:hover,
.sidebar-button:hover { transform: translateX(-4px); }

.admin-content { padding: 28px 24px 70px; }
.admin-page-header { padding-inline: 8px; }
.admin-table { border-radius: 18px; overflow: hidden; }

/* Rich editor: direct manipulation, no size slider */
.rich-editor {
  overflow: visible;
  border: 1px solid var(--glass-edge);
  border-radius: 24px;
  background: rgba(2, 17, 13, .62);
  box-shadow: inset 0 1px rgba(255,255,255,.1), 0 22px 70px rgba(0,0,0,.28);
}

.rich-toolbar {
  position: sticky;
  top: 10px;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  padding: 10px;
  border: 0;
  border-bottom: 1px solid var(--glass-edge);
  border-radius: 23px 23px 0 0;
  background:
    linear-gradient(145deg, rgba(255,255,255,.09), transparent 32%),
    rgba(5, 29, 22, .9);
  backdrop-filter: blur(30px) saturate(170%);
}

.rich-tool-group {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-inline-end: 7px;
  border-inline-end: 1px solid rgba(190, 247, 228, .12);
}

.rich-tool-group:last-child { border: 0; }

.rich-toolbar button,
.rich-upload,
.rich-format-select {
  min-width: 38px;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid rgba(190,247,228,.14);
  border-radius: 11px;
  color: #d7ebe4;
  background: rgba(255,255,255,.045);
  cursor: pointer;
}

.rich-format-select { min-width: 118px; }
.rich-toolbar button:hover,
.rich-upload:hover { background: rgba(43, 191, 162, .17); transform: translateY(-1px); }
.rich-toolbar button.active { color: #03110d; background: linear-gradient(145deg, #f4d896, #caa75d); }
.rich-toolbar .danger-tool:hover { color: #ffe7e4; background: rgba(190,55,49,.38); }
.rich-upload input { display: none; }

.persian-date-picker {
  display: grid;
  grid-template-columns: minmax(86px, .95fr) minmax(104px, 1.1fr) minmax(74px, .75fr);
  gap: 8px;
  width: 100%;
}

.persian-date-picker .input {
  min-width: 0;
  text-align: center;
}

.editor-hint {
  padding: 9px 16px;
  color: #91afa4;
  border-bottom: 1px solid rgba(190,247,228,.11);
  font-size: .78rem;
}

.rich-surface {
  min-height: 440px;
  padding: 38px clamp(20px, 5vw, 68px);
  border: 0;
  border-radius: 0 0 23px 23px;
  color: #14352a;
  background:
    radial-gradient(circle at 10% 10%, rgba(27, 163, 137, .06), transparent 22rem),
    #fbfcf7;
  line-height: 2;
  outline: 0;
}

.rich-surface:focus { box-shadow: inset 0 0 0 3px rgba(31,181,153,.25); }
.rich-surface h1 { font-size: 2.25rem; }
.rich-surface h2 { font-size: 1.9rem; }
.rich-surface h3 { font-size: 1.55rem; }
.rich-surface h4 { font-size: 1.3rem; }
.rich-surface h5 { font-size: 1.12rem; }
.rich-surface h6 { font-size: 1rem; }
.rich-surface blockquote {
  margin: 20px 0;
  padding: 18px 22px;
  border-inline-start: 4px solid #118d7d;
  border-radius: 14px;
  background: rgba(17, 141, 125, .08);
}
.rich-surface hr { margin: 32px 0; border: 0; height: 1px; background: linear-gradient(90deg, transparent, #87b7a7, transparent); }

.editor-figure,
.prose-rtl figure.editor-figure,
.article-body figure.editor-figure {
  position: relative;
  max-width: 100%;
  min-width: 120px;
  margin-block: 24px;
  border-radius: 20px;
  transition: box-shadow 160ms ease, opacity 160ms ease;
}

.editor-figure .editor-media,
.prose-rtl .editor-figure img,
.prose-rtl .editor-figure video,
.article-body .editor-figure img,
.article-body .editor-figure video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  border-radius: inherit;
  object-fit: contain;
  background: rgba(7, 25, 20, .06);
}

.editor-figure figcaption {
  min-height: 32px;
  padding: 8px 12px;
  color: #59776c;
  font-size: .82rem;
  text-align: center;
}

.editor-figure.is-selected-media { box-shadow: 0 0 0 3px #15a990, 0 16px 46px rgba(3,69,55,.25); }
.editor-figure.is-dragging-media { opacity: .26; }
.editor-media-ghost {
  position: fixed !important;
  z-index: 10020;
  max-width: 360px !important;
  margin: 0 !important;
  opacity: .78;
  pointer-events: none;
  transform: rotate(-2deg) scale(.96);
  filter: drop-shadow(0 22px 38px rgba(0,0,0,.35));
}

.editor-media-overlay {
  position: absolute;
  z-index: 10010;
  border: 2px solid #18b89c;
  border-radius: 20px;
  pointer-events: none;
}

.editor-resize-handle {
  position: absolute;
  z-index: 2;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  padding: 0 !important;
  border: 2px solid #fff !important;
  border-radius: 5px !important;
  background: #12a98f !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.28);
  pointer-events: auto;
  display: block !important;
  touch-action: none;
}

.handle-nw { inset: -8px auto auto -8px; cursor: nwse-resize; }
.handle-n { inset: -8px auto auto 50%; transform: translateX(-50%); cursor: ns-resize; }
.handle-ne { inset: -8px -8px auto auto; cursor: nesw-resize; }
.handle-e { inset: 50% -8px auto auto; transform: translateY(-50%); cursor: ew-resize; }
.handle-se { inset: auto -8px -8px auto; cursor: nwse-resize; }
.handle-s { inset: auto auto -8px 50%; transform: translateX(-50%); cursor: ns-resize; }
.handle-sw { inset: auto auto -8px -8px; cursor: nesw-resize; }
.handle-w { inset: 50% auto auto -8px; transform: translateY(-50%); cursor: ew-resize; }

.editor-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 10, 8, .7);
  backdrop-filter: blur(16px);
  animation: glassFade 160ms ease both;
}

.editor-dialog {
  width: min(560px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  display: grid;
  gap: 15px;
  padding: 24px;
  border-radius: 28px;
  animation: liquidPop 220ms cubic-bezier(.2,.8,.2,1) both;
}

.editor-dialog-heading { display: grid; gap: 5px; }
.editor-dialog-heading p { font-size: .86rem; }
.editor-dialog > label { display: grid; gap: 7px; color: #d9ebe5; }
.editor-dialog-check { display: flex !important; align-items: center; gap: 9px !important; }
.editor-dialog-check input { width: 19px; height: 19px; accent-color: #16a58d; }
.editor-dialog-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 8px; }

@keyframes liquidOrb {
  from { transform: translate3d(-3%, -2%, 0) scale(.92); }
  to { transform: translate3d(8%, 7%, 0) scale(1.12); }
}

@keyframes liquidRise {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes liquidPop {
  from { opacity: 0; transform: translateY(12px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes glassFade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 1100px) {
  .admin-shell { display: block; padding: 0; }
  .admin-sidebar,
  .admin-sidebar.glass-surface { inset-block-start: 0; height: 100vh; border-radius: 28px 0 0 28px; }
}

@media (max-width: 760px) {
  .site-header { top: 7px; width: calc(100% - 16px); margin-top: 8px; border-radius: 21px; }
  .home-hero { width: calc(100% - 16px); margin-top: 9px; border-radius: 29px; }
  .impact-band { border-radius: 24px; }
  .content-band,
  .glass-card,
  .admin-section,
  .liquid-panel { border-radius: 21px; }
  .rich-toolbar { position: static; overflow-x: auto; flex-wrap: nowrap; border-radius: 20px 20px 0 0; }
  .rich-tool-group { flex: 0 0 auto; }
  .rich-image-tools { display: none; }
  .rich-surface { min-height: 360px; padding: 24px 16px; }
  .editor-hint { font-size: .7rem; }
  .editor-dialog { padding: 18px; border-radius: 22px; }
  .editor-dialog-actions { flex-wrap: wrap; }
}

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

/* Dynamic navigation and CMS workflows */
.public-menu { display: flex; align-items: center; justify-content: center; gap: 3px; }
.public-menu details { position: relative; }
.public-menu details > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 11px;
  border-radius: 13px;
  color: #c7dcd4;
  cursor: pointer;
  user-select: none;
}
.public-menu details > summary::-webkit-details-marker { display: none; }
.public-menu details > summary:hover,
.public-menu details[open] > summary { color: #fff5d7; background: rgba(40, 185, 156, .13); }
.public-menu summary span { font-size: .75rem; transition: transform 160ms ease; }
.public-menu details[open] > summary span { transform: rotate(180deg); }
.nav-leaf { display: grid; gap: 2px; padding: 9px 11px; border-radius: 13px; color: #c7dcd4; }
.nav-leaf:hover { color: #fff6dd; background: rgba(40,185,156,.13); }
.nav-leaf small { max-width: 240px; color: #7fa398; font-size: .7rem; }

.mega-panel,
.submenu-panel {
  position: absolute;
  z-index: 120;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px) scale(.985);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
  border: 1px solid var(--glass-edge);
  background:
    linear-gradient(145deg, rgba(255,255,255,.1), transparent 28%),
    rgba(4, 25, 19, .94);
  box-shadow: 0 34px 100px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.13);
  backdrop-filter: blur(34px) saturate(180%);
}
.mega-panel {
  position: fixed;
  inset-block-start: 102px;
  inset-inline-start: 50%;
  width: min(1120px, calc(100vw - 36px));
  max-height: min(68vh, 620px);
  padding: 20px;
  overflow: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  border-radius: 28px;
  transform: translate(-50%, 12px) scale(.985);
}
.submenu-panel {
  inset-block-start: calc(100% + 8px);
  inset-inline-start: 0;
  min-width: 250px;
  display: grid;
  gap: 3px;
  padding: 10px;
  border-radius: 20px;
}
.mega-node[open] > .mega-panel,
.mega-node:hover > .mega-panel,
.submenu-node[open] > .submenu-panel,
.submenu-node:hover > .submenu-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.mega-node[open] > .mega-panel,
.mega-node:hover > .mega-panel { display: grid; transform: translate(-50%, 0) scale(1); }
.submenu-node[open] > .submenu-panel,
.submenu-node:hover > .submenu-panel { transform: translateY(0) scale(1); }

.mega-section {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 120px;
  padding: 17px;
  border: 1px solid rgba(190,247,228,.11);
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(255,255,255,.065), rgba(25,133,111,.035));
}
.mega-section > strong { color: #f3d99a; font-size: .92rem; }
.mega-section > small { color: #80a79a; font-size: .72rem; }
.mega-section-links { display: grid; gap: 3px; }
.mega-section-links .nav-leaf,
.mega-section-links > a { padding: 9px 10px; border-radius: 12px; color: #cfdfda; }
.mega-section-links .nav-leaf:hover,
.mega-section-links > a:hover { background: rgba(36,184,153,.12); color: #fff; }
.mega-section-links > a { display: grid; gap: 2px; }
.mega-section-links > a small { color: #789c91; font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.category-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.category-card-grid article { display: grid; align-content: start; gap: 14px; }
.article-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.article-facts span { padding: 7px 11px; border: 1px solid var(--glass-edge); border-radius: 999px; color: #a9c7bc; background: rgba(255,255,255,.04); font-size: .78rem; }

.comment-list { display: grid; gap: 10px; margin-bottom: 34px; }
.comment-card { display: grid; grid-template-columns: 48px 1fr; gap: 13px; padding: 18px; border: 1px solid var(--glass-edge); border-radius: 19px; background: rgba(255,255,255,.035); }
.comment-avatar { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; color: #062018; background: linear-gradient(145deg,#eccd83,#b9944e); font-size: 1.25rem; font-weight: 900; }
.comment-card > div:last-child { display: grid; gap: 4px; }
.comment-card small { font-size: .72rem; }
.comment-card p { margin-top: 7px; color: #c6d9d2; }
.comment-form-wrap { max-width: 820px; padding-top: 28px; border-top: 1px solid var(--glass-edge); }
.comment-form-wrap > p { margin: 5px 0 18px; }
.comment-honeypot { position: absolute !important; inset-inline-start: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.comment-admin-body { padding: 14px; border-radius: 14px; background: rgba(255,255,255,.035); }

.donation-panel { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(280px,.75fr); gap: 42px; align-items: center; }
.donation-copy { display: grid; gap: 10px; }
.donation-form { display: grid; gap: 11px; padding: 20px; border: 1px solid var(--glass-edge); border-radius: 22px; background: rgba(0,13,10,.24); }
.donation-form label { display: grid; gap: 6px; }
.donation-fixed { display: grid; gap: 4px; padding: 18px; border-radius: 17px; text-align: center; background: linear-gradient(145deg, rgba(215,181,109,.17), rgba(15,120,94,.1)); }
.donation-fixed strong { color: #f3d99a; font-size: 1.7rem; }
.donation-grid { grid-template-columns: 1fr 1.2fr .8fr .7fr 1.8fr; }
.menu-sort-row { cursor: grab; }
.menu-sort-row:active { cursor: grabbing; opacity: .72; }
.menu-sort-row > strong { padding-inline-start: calc(var(--menu-depth, 0) * 22px); }
.drag-grip { margin-inline-end: 8px; color: #6f9e90; font-size: 1.15rem; }

@media (max-width: 1100px) {
  .category-card-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mega-panel { inset-block-start: 96px; grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .mobile-public-menu { display: grid; justify-content: stretch; gap: 4px; margin-top: 24px; }
  .mobile-public-menu .nav-leaf,
  .mobile-public-menu details > summary { width: 100%; padding: 13px; border-bottom: 1px solid var(--glass-edge); border-radius: 13px; }
  .mobile-public-menu .mega-panel,
  .mobile-public-menu .submenu-panel {
    position: static;
    width: 100%;
    max-height: 52vh;
    margin-top: 5px;
    padding: 8px;
    overflow: auto;
    opacity: 1;
    visibility: visible;
    display: none;
    transform: none;
    border-radius: 17px;
    box-shadow: none;
  }
  .mobile-public-menu details[open] > .mega-panel,
  .mobile-public-menu details[open] > .submenu-panel { display: grid; transform: none; }
  .mobile-public-menu .mega-panel { grid-template-columns: 1fr; }
  .mobile-public-menu .mega-section { min-height: 0; }
  .category-card-grid { grid-template-columns: 1fr; }
  .donation-panel { grid-template-columns: 1fr; gap: 22px; }
  .comment-card { grid-template-columns: 38px 1fr; padding: 14px; }
  .comment-avatar { width: 38px; height: 38px; border-radius: 12px; }
}

/* Final cascade guards for the desktop mega-menu and animated hero */
.home-hero { background-image: none !important; }
.mega-panel {
  inset-inline: auto !important;
  left: 50% !important;
  right: auto !important;
  width: max-content !important;
  min-width: min(460px, calc(100vw - 32px));
  max-width: min(1120px, calc(100vw - 32px));
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  transform: translateX(-50%) translateY(12px) scale(.985) !important;
}
.mega-node[open] > .mega-panel,
.mega-node:hover > .mega-panel { display: flex; transform: translateX(-50%) translateY(0) scale(1) !important; }
.mega-panel > .mega-section,
.mega-panel > .nav-leaf,
.mega-panel > .submenu-node { flex: 1 1 245px; width: min(280px, calc(100vw - 70px)); }

@media (max-width: 760px) {
  .mobile-public-menu .mega-panel {
    left: auto !important;
    min-width: 0;
    width: 100% !important;
    max-width: 100%;
    transform: none !important;
  }
  .mobile-public-menu details[open] > .mega-panel { display: grid; transform: none !important; }
  .contact-layout { grid-template-columns: 1fr; gap: 14px; }
  .contact-info-panel { position: static; }
}

/* Final interaction and spacing authority */
.content-area,
.site-shell > .content-area { max-width: none; margin: 0; padding-bottom: clamp(64px, 9vw, 112px); }
:where(.public-page-header, .content-band, .shop-filters, .shop-notice, .grid-cards, .cart-layout, .checkout-layout, .tracking-panel, .empty-state, .route-state) {
  width: min(var(--page-width), calc(100% - (var(--page-gutter) * 2)));
  margin-inline: auto;
}
.public-page-header,
.page-header.public-page-header { margin-block: clamp(34px, 5vw, 66px) clamp(28px, 4vw, 48px); }
.content-band { margin-block: var(--section-space); }
.admin-content { padding: clamp(20px, 4vw, 52px); }
.admin-page-header, .page-header.admin-page-header { margin: 0 0 clamp(24px, 4vw, 38px); }
.admin-section { margin-block: clamp(24px, 4vw, 40px); }
.admin-grid, .form-grid, .list-panel { gap: clamp(12px, 2vw, 20px); }
:where(button, summary, [role="button"], .check-row, .product-card, .article-card, .service-card, .related-content-card, .table-row):hover,
:where(.btn-primary, .btn-secondary, .btn-danger, .header-cta):hover,
.product-card:hover,
.article-card:hover,
.related-content-card:hover { transform: none !important; }
.product-card:hover .article-cover img,
.article-card:hover .article-cover img { transform: none !important; }
.product-card, .article-card, .service-card { animation: none !important; }
.hero-slide-media { animation: heroPolishedFade 900ms cubic-bezier(.22,.72,.24,1) both !important; }
.hero-slide-media::after, .hero-content > * { animation: none !important; }
.hero-content-enter { animation: heroPolishedCopy 720ms cubic-bezier(.22,.72,.24,1) both !important; }
.hero-orbit > button:hover, .slider-dots button:hover { transform: none !important; }
.rich-upload:hover, .sidebar-button:hover { transform: none !important; }
@media (max-width: 760px) {
  .public-page-header, .page-header.public-page-header { margin-block: 26px 30px; }
}

/* Stability pass: shared spacing, touch targets, and overflow guards */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
img, video, canvas, svg { max-width: 100%; }
:where(.site-shell, .admin-shell, .profile-shell, .auth-shell) {
  min-width: 0;
}
:where(.btn-primary, .btn-secondary, .btn-danger, button, [role="button"]) {
  min-height: 42px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
:where(.btn-primary, .btn-secondary, .btn-danger) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  white-space: normal;
  line-height: 1.55;
}
.form-actions,
.row-actions,
.inline-form,
.inline-control {
  min-width: 0;
  flex-wrap: wrap;
}
.center-actions { justify-content: center; }
.form-grid > label,
.checkout-form label,
.auth-form label,
.donation-form label {
  min-width: 0;
}
.input,
input.input,
textarea.input,
select.input {
  width: 100%;
  min-width: 0;
}
.notice-box,
.empty-state,
.route-state,
.admin-section,
.glass-card,
.liquid-panel,
.content-band {
  overflow-wrap: anywhere;
}
.admin-table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-head,
.table-row {
  min-width: min(100%, 720px);
}
.table-row > *,
.table-head > * {
  min-width: 0;
}
.table-row strong,
.table-row span,
.table-row small {
  overflow-wrap: anywhere;
}
.site-header,
.admin-sidebar,
.mobile-site-nav,
.profile-sidebar {
  padding-top: max(var(--safe-top, 0px), env(safe-area-inset-top));
}
.content-area,
.admin-content,
.profile-content {
  padding-bottom: max(clamp(64px, 9vw, 112px), env(safe-area-inset-bottom));
}

@media (max-width: 760px) {
  :where(.btn-primary, .btn-secondary, .btn-danger, button, [role="button"]) {
    min-height: 46px;
  }
  .form-actions,
  .row-actions,
  .inline-form,
  .inline-control {
    display: flex;
    align-items: stretch;
    gap: 10px;
  }
  .form-actions > *,
  .row-actions > *,
  .inline-form > *,
  .inline-control > * {
    flex: 1 1 180px;
  }
  .table-head {
    display: none;
  }
  .table-row {
    min-width: 0;
    grid-template-columns: 1fr !important;
    gap: 10px;
    padding: 14px;
  }
  .admin-content,
  .profile-content {
    padding-inline: 14px;
  }
  .account-auth-page,
  .profile-completion-page {
    align-items: start;
    padding-inline: 14px;
  }
}

/* Targeted polish for reported public pages */
.auth-tabs:has(> button:only-child) {
  display: none;
}

.route-state {
  width: min(1120px, calc(100% - 44px));
  margin: clamp(34px, 6vw, 86px) auto;
  padding: clamp(18px, 3vw, 30px);
}

/* Keep mobile-only profile controls out of the desktop grid. */
.profile-shell > .profile-menu-toggle,
.profile-shell > .profile-sidebar-backdrop {
  display: none !important;
}

@media (max-width: 1000px) {
  .profile-shell > .profile-menu-toggle {
    display: grid !important;
  }

  .profile-shell > .profile-sidebar-backdrop {
    display: block !important;
  }
}

.header-actions {
  flex: 0 0 auto;
  align-items: center;
}

.header-icon-action {
  min-width: 66px;
  min-height: 46px;
  padding: 8px 11px;
  gap: 7px;
  white-space: nowrap;
}

.header-cart-link {
  min-width: 76px;
}

.mega-panel {
  width: min(1040px, calc(100vw - 92px)) !important;
  min-width: 0 !important;
  max-width: calc(100vw - 92px) !important;
  max-height: none !important;
  overflow: visible !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  justify-content: stretch;
  gap: 14px;
}

.mega-node[open] > .mega-panel,
.mega-node:hover > .mega-panel {
  display: grid !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

.mega-panel > .mega-section,
.mega-panel > .nav-leaf,
.mega-panel > .submenu-node {
  width: auto !important;
  min-width: 0;
}

.mega-section {
  min-height: 0;
}

.mega-section-links {
  gap: 7px;
}

.mega-section-links .nav-leaf,
.mega-section-links > a {
  min-height: 48px;
  align-content: center;
}

.mega-section-links > a small,
.nav-leaf small {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.hero-orbit {
  inset-inline-end: clamp(22px, 5vw, 70px);
  inset-block-end: 22px;
  gap: 8px;
  padding: 8px 10px;
}

.hero-orbit > button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
}

.slider-dots {
  align-items: center;
  padding: 0 4px;
}

.comment-form-wrap {
  width: min(100%, 920px);
  margin-inline: auto;
}

.comment-form-wrap .form-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.comment-form-wrap button[type="submit"] {
  justify-self: end;
  min-width: 150px;
}

@media (max-width: 980px) {
  .mega-panel {
    width: min(720px, calc(100vw - 40px)) !important;
    max-width: calc(100vw - 40px) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .header-icon-action {
    min-width: 44px;
    padding-inline: 9px;
  }

  .mobile-public-menu .mega-panel,
  .mega-panel {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    grid-template-columns: 1fr;
  }

  .comment-form-wrap .form-grid.two {
    grid-template-columns: 1fr;
  }

  .comment-form-wrap button[type="submit"] {
    justify-self: stretch;
  }
}

/* Final professional redesign pass */
body {
  overflow-x: clip;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 220px),
    linear-gradient(145deg, #03110d 0%, #071d17 48%, #04120f 100%) !important;
}

.site-shell::before,
.site-shell::after,
.admin-shell::before,
.admin-shell::after,
.auth-shell::before,
.auth-shell::after,
.hero-slide-media::after {
  display: none !important;
}

.ui-icon,
.header-icon-action svg,
.sidebar-nav svg,
.sidebar-button svg,
.quick-action-grid svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-header {
  display: grid !important;
  grid-template-columns: minmax(180px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(10px, 1.6vw, 20px);
  min-width: 0;
  min-height: 70px;
  padding: 9px clamp(10px, 1.7vw, 18px) !important;
  border-radius: 20px !important;
}

.site-brand {
  min-width: 0 !important;
  max-width: min(360px, 38vw);
  overflow: hidden;
}

.brand-copy {
  min-width: 0;
}

.brand-copy strong,
.brand-copy small,
.mobile-nav-heading strong,
.mobile-nav-heading small,
.sidebar-brand strong,
.sidebar-brand small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desktop-navigation {
  min-width: 0;
  overflow: hidden;
}

.desktop-navigation > :where(a, details) {
  flex: 0 1 auto;
}

.public-menu details > summary,
.nav-leaf {
  min-height: 42px;
  align-items: center;
}

.header-actions {
  min-width: 0;
  justify-content: end;
}

.header-icon-action {
  min-width: 46px !important;
  min-height: 44px;
  border-radius: 12px;
}

.header-cart-link {
  min-width: 62px !important;
}

.header-icon-action span {
  display: inline-grid;
}

.home-hero {
  width: min(1440px, calc(100% - 32px)) !important;
  min-height: clamp(480px, calc(100svh - 150px), 660px) !important;
  height: clamp(480px, calc(100svh - 150px), 660px) !important;
  margin-top: 14px !important;
  border-radius: 28px !important;
  background: #061812 !important;
}

.hero-slide-media {
  background-position: center;
  filter: saturate(.95) contrast(1.04);
}

.hero-veil {
  background:
    linear-gradient(90deg, rgba(2,12,9,.94), rgba(3,18,14,.72) 54%, rgba(3,18,14,.34)),
    linear-gradient(0deg, rgba(2,12,9,.56), transparent 42%) !important;
}

.hero-content {
  width: min(1180px, calc(100% - 48px));
  padding-inline-end: min(34vw, 440px) !important;
}

.hero-content h1 {
  max-width: 760px;
  font-size: clamp(2.6rem, 6vw, 4.35rem) !important;
  line-height: 1.22;
}

.hero-content p {
  max-width: 700px;
  line-height: 1.95;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-orbit {
  inset-inline-end: clamp(18px, 4vw, 58px) !important;
  inset-block-end: clamp(18px, 3vw, 32px) !important;
  border-radius: 16px !important;
}

.slider-dots {
  min-height: 36px;
  gap: 8px;
}

.slider-dots button {
  flex: 0 0 auto;
}

.hero-signal {
  max-width: min(48vw, 540px);
  overflow: hidden;
}

.hero-signal span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.impact-band {
  width: min(1180px, calc(100% - 32px)) !important;
  margin-top: 12px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.impact-band > div {
  min-width: 0;
  min-height: 108px !important;
  padding: clamp(18px, 2.6vw, 26px) !important;
}

.section-block,
.content-band {
  margin-block: clamp(38px, 5.6vw, 72px) !important;
}

.home-summary {
  grid-template-columns: minmax(220px, .62fr) minmax(0, 1.38fr) !important;
  gap: clamp(24px, 5vw, 56px) !important;
}

.checkout-layout.polished-checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, 390px);
  gap: clamp(16px, 3vw, 30px);
  align-items: start;
  margin-block: clamp(20px, 4vw, 46px) clamp(46px, 7vw, 86px);
}

.checkout-summary {
  position: sticky;
  top: 112px;
  display: grid;
  gap: 12px;
  padding: clamp(18px, 2.4vw, 28px) !important;
}

.checkout-form {
  min-width: 0;
  padding: clamp(18px, 3vw, 34px) !important;
}

.checkout-form form {
  display: grid;
  gap: clamp(16px, 2.4vw, 24px);
}

.checkout-choice-group,
.checkout-address-group {
  margin: 0 !important;
  padding: clamp(16px, 2.2vw, 22px) !important;
  border: 1px solid var(--glass-edge) !important;
  border-radius: 22px;
  background: rgba(255,255,255,.035);
}

.checkout-choice-group legend,
.checkout-address-group legend {
  padding-inline: 8px;
}

.choice-card,
.saved-address {
  min-width: 0;
  border-radius: 16px !important;
}

.choice-card input,
.saved-address input {
  accent-color: var(--accent-3);
}

.saved-address span {
  min-height: 0 !important;
}

.saved-address-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
}

.account-identity-summary {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  margin: 0 !important;
}

.checkout-final-fields {
  margin-top: 0 !important;
}

.inline-control {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
}

.checkout-product-mini {
  min-width: 0;
}

.checkout-product-mini strong,
.checkout-product-mini span,
.checkout-product-mini small {
  overflow-wrap: anywhere;
}

.checkout-total {
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(145deg, rgba(215,181,109,.16), rgba(30,151,121,.1));
}

.response-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.response-category-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 14px;
  min-width: 0;
  min-height: 102px;
  padding: 16px;
  border: 1px solid var(--glass-edge);
  border-radius: 18px;
  color: var(--text);
  text-align: start;
  background: rgba(255,255,255,.04);
}

.response-category-card strong {
  grid-row: 1 / 3;
  grid-column: 2;
  color: var(--accent-3);
  font-size: 2rem;
  line-height: 1;
}

.response-category-card small {
  grid-column: 1 / -1;
}

.response-category-card.active {
  border-color: rgba(111,225,192,.5);
  background: rgba(33,151,120,.16);
}

.submission-values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.submission-values > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(190,247,228,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}

.relation-check-grid {
  scrollbar-gutter: stable;
}

@media (max-width: 1100px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .desktop-navigation {
    display: none !important;
  }

  .checkout-layout.polished-checkout {
    grid-template-columns: 1fr;
  }

  .checkout-summary {
    position: static;
    order: -1;
  }
}

@media (max-width: 760px) {
  .site-header {
    width: calc(100% - 18px) !important;
    min-height: 64px;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .site-brand {
    max-width: 100%;
  }

  .brand-copy strong {
    font-size: .86rem !important;
  }

  .header-icon-action em,
  .brand-copy small {
    display: none !important;
  }

  .home-hero {
    width: calc(100% - 18px) !important;
    min-height: min(620px, calc(100svh - 92px)) !important;
    height: auto !important;
    border-radius: 22px !important;
  }

  .hero-content {
    width: calc(100% - 28px);
    padding: 44px 0 104px !important;
  }

  .hero-content h1 {
    font-size: clamp(2.1rem, 12vw, 3.15rem) !important;
  }

  .hero-content p {
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }

  .hero-orbit {
    inset-inline: 14px auto !important;
  }

  .impact-band,
  .home-summary {
    grid-template-columns: 1fr !important;
  }

  .checkout-form,
  .checkout-summary {
    padding: 16px !important;
  }

  .checkout-choice-group,
  .checkout-address-group {
    padding: 14px !important;
  }

  .inline-control {
    grid-template-columns: 1fr !important;
  }

  .response-card-head {
    display: grid !important;
    gap: 10px;
  }

  .submission-values {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  .header-actions {
    gap: 6px;
  }

  .header-cart-link {
    min-width: 54px !important;
  }

  .site-menu-toggle {
    width: 42px;
  }
}
/* Final functional polish: engagement panels, payment results, slider controls, and mobile nav scroll */
.content-engagement-grid {
  width: min(1180px, calc(100% - 32px));
  margin: clamp(22px, 4vw, 52px) auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 24px);
  align-items: start;
}

.content-engagement-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.content-engagement-grid .dynamic-panel {
  width: 100%;
  max-width: none;
  margin: 0;
  height: 100%;
}

.approved-response-list {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}

.approved-response-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--glass-edge);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}

.approved-response-card small {
  color: #8fb3a7;
}

.approved-response-card div {
  display: grid;
  gap: 3px;
}

.approved-response-card strong {
  color: #f0d697;
  font-size: .78rem;
}

.approved-response-card span {
  color: var(--text);
  overflow-wrap: anywhere;
}

.payment-result-shell {
  width: min(880px, calc(100% - 32px));
  min-height: min(520px, calc(100svh - 180px));
  margin: clamp(24px, 6vw, 72px) auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(18px, 4vw, 34px);
  align-items: center;
  padding: clamp(24px, 5vw, 48px);
  border: 1px solid var(--glass-edge);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(14,57,45,.36));
  box-shadow: 0 30px 90px rgba(0,0,0,.28);
}

.payment-result-mark {
  width: clamp(72px, 12vw, 116px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 900;
}

.payment-result-shell.success .payment-result-mark {
  color: #04251c;
  background: linear-gradient(145deg, #4be0bd, #f1d68f);
}

.payment-result-shell.failed .payment-result-mark {
  color: #fff5ee;
  background: linear-gradient(145deg, #a33335, #e5a05d);
}

.payment-result-lines {
  margin: 20px 0;
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
  gap: 10px 18px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(0,0,0,.16);
}

.home-hero {
  min-height: clamp(520px, 72svh, 740px);
}

.hero-orbit {
  min-width: min(520px, calc(100% - 32px));
  padding: 10px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 22px;
  background: rgba(3, 17, 13, .64);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 60px rgba(0,0,0,.26);
}

.hero-orbit > button {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  font-size: 2rem;
  color: #fff4cf;
  background: rgba(255,255,255,.08);
}

.slider-dots {
  min-width: 170px;
  justify-content: center;
}

.slider-dots button {
  width: 34px;
  height: 7px;
  border-radius: 999px;
}

.slider-dots button.active {
  width: 62px;
  background: linear-gradient(90deg, #f1d68f, #45d5b4);
  box-shadow: 0 0 26px rgba(69,213,180,.42);
}

.mobile-site-nav {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.mobile-public-menu .mega-panel,
.mobile-public-menu .submenu-panel {
  position: static !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

@media (max-width: 760px) {
  .mobile-site-nav.open {
    height: 100dvh;
    max-height: 100dvh;
    align-content: start;
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }

  .mobile-site-nav.open .mobile-public-menu {
    align-content: start;
  }

  .mobile-site-nav.open .mobile-public-menu details,
  .mobile-site-nav.open .mobile-public-menu .mega-section,
  .mobile-site-nav.open .mobile-public-menu .mega-section-links {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .mobile-site-nav.open .mobile-public-menu .mega-panel,
  .mobile-site-nav.open .mobile-public-menu .submenu-panel {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 8px 0 0 !important;
    overflow: visible !important;
    transform: none !important;
    flex: initial !important;
  }

  .mobile-site-nav.open .mobile-public-menu .mega-panel > .mega-section,
  .mobile-site-nav.open .mobile-public-menu .mega-panel > .nav-leaf,
  .mobile-site-nav.open .mobile-public-menu .mega-panel > .submenu-node {
    width: 100% !important;
    flex: initial !important;
  }
}

@media (max-width: 820px) {
  .content-engagement-grid.two {
    grid-template-columns: 1fr;
  }

  .payment-result-shell {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .payment-result-mark {
    margin-inline: auto;
  }

  .payment-result-lines {
    text-align: start;
  }

  .hero-orbit {
    min-width: 0;
    width: calc(100% - 28px);
  }
}

/* 2026-07-01: Topex home slider import and final UX pass */
.content-area > :not(.home-slider):not(.impact-band) {
  animation-name: pageSoftReveal;
}

.vision-panel {
  padding: var(--vision-padding, clamp(24px, 4vw, 48px)) !important;
  border: 1px solid var(--vision-border, rgba(140, 219, 192, .18));
  border-radius: var(--vision-radius, 28px) !important;
  background-color: var(--vision-bg, #061812);
  color: var(--vision-text, #d8eee6);
}

.vision-panel .section-kicker {
  color: var(--vision-kicker, #d7b56d);
}

.vision-panel h2 {
  color: var(--vision-title, #fff5dc);
}

.vision-panel .feature-prose,
.vision-panel .feature-prose :where(p, li, strong, span) {
  color: var(--vision-text, #d8eee6);
}

.supporter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.supporter-card {
  min-width: 0;
  display: grid;
  gap: 7px;
  padding: 16px;
  border: 1px solid rgba(140, 219, 192, .15);
  border-radius: 16px;
  background: rgba(255,255,255,.045);
}

.supporter-card strong,
.supporter-card span,
.supporter-card small {
  overflow-wrap: anywhere;
}

.supporter-card strong {
  color: #fff5dc;
}

.supporter-card span {
  color: #d7b56d;
  font-weight: 850;
}

.supporter-card small {
  color: #91b3a7;
}

.admin-supporter-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.empty-state.compact {
  width: 100%;
  margin: 0;
  padding: 16px;
  border-radius: 16px;
  font-size: .9rem;
}

.color-input {
  min-height: 48px;
  padding: 6px;
}

/* Remove inner vertical scrollbars; long content expands and the page handles scrolling. */
.admin-sidebar,
.sidebar-nav,
.mobile-site-nav,
.relation-check-grid,
.editor-dialog,
.media-library-panel,
.mega-panel,
.submenu-panel {
  max-height: none !important;
  overflow-y: visible !important;
}

.relation-check-grid {
  overflow: visible !important;
}

.admin-shell,
.site-shell,
.profile-shell,
.auth-shell {
  height: auto !important;
  overflow: visible !important;
}

.admin-sidebar {
  height: auto !important;
  min-height: 100svh;
}

@media (max-width: 760px) {
  .vision-panel {
    padding: max(18px, calc(var(--vision-padding, 32px) * .72)) !important;
  }

  .mobile-site-nav.open {
    height: auto !important;
    max-height: none !important;
    min-height: 100dvh;
    overflow: visible !important;
  }
}

body .site-shell .mobile-site-nav,
body .site-shell .mobile-site-nav.open,
body .admin-shell .admin-sidebar,
body .admin-shell .sidebar-nav {
  overflow: visible !important;
  overflow-y: visible !important;
  max-height: none !important;
}

/* Upload progress, shared by every InputFile surface. */
.upload-progress {
  position: relative;
  width: min(360px, 100%);
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 9px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent-2, #6366f1) 32%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #334155) 12%, rgba(255,255,255,.06));
  color: color-mix(in srgb, var(--accent-3, #d7b56d) 82%, #fff);
  font-size: .76rem;
  font-weight: 900;
}

.upload-progress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  min-width: 4px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent, #334155), var(--accent-2, #6366f1), var(--accent-3, #d7b56d));
  transition: width .18s ease;
}

.upload-progress b {
  position: relative;
  z-index: 1;
  padding-inline: 12px;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0,0,0,.34);
}

/* Topex imported home slider. Colors are wired to dynamic site theme variables. */
.home-slider {
  --home-slider-progress: 0%;
  --home-accent: var(--accent, #334155);
  --home-accent-2: var(--accent-2, #6366f1);
  --home-accent-3: var(--accent-3, #d7b56d);
  --home-text-on-media: #fff;
  width: min(var(--page-width), calc(100% - (var(--page-gutter) * 2)));
  min-height: min(var(--home-slider-height, 520px), calc(100svh - 112px));
  max-height: min(var(--home-slider-height, 620px), 760px);
  aspect-ratio: 3 / 1;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: clamp(18px, 3vw, 34px) auto clamp(24px, 4vw, 44px);
  border: 1px solid color-mix(in srgb, var(--home-accent-2) 30%, transparent);
  border-radius: 26px;
  background:
    radial-gradient(circle at 82% 16%, color-mix(in srgb, var(--home-accent-2) 24%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--home-accent) 18%, #11151d), #11151d 62%);
  box-shadow: 0 28px 72px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.08);
  direction: rtl;
  touch-action: pan-y;
}

.home-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.015);
  transition: opacity .72s ease, visibility .72s ease, transform 1.1s ease, filter .72s ease;
}

.home-slider__slide.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
}

.home-slider__slide > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.03) contrast(1.02);
  user-select: none;
  -webkit-user-drag: none;
}

.home-slider__slide::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 78% 20%, color-mix(in srgb, var(--home-accent-3) 16%, transparent), transparent 32%),
    linear-gradient(270deg, rgb(3 8 12 / .62) 0%, rgb(3 8 12 / .42) 34%, rgb(3 8 12 / .18) 68%, transparent 100%),
    linear-gradient(180deg, rgb(0 0 0 / .03), rgb(0 0 0 / .24));
  pointer-events: none;
}

.home-slider__copy {
  position: absolute;
  z-index: 2;
  right: clamp(22px, 5.2vw, 74px);
  top: 50%;
  width: min(55%, 720px);
  transform: translateY(-50%);
  padding: clamp(18px, 2.8vw, 34px);
  overflow: hidden;
  direction: rtl;
  text-align: right;
}

.home-slider__copy::before {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: clamp(18px, 2.4vw, 34px);
  width: clamp(24px, 4vw, 46px);
  height: 3px;
  content: "";
  border-radius: 999px;
  background: color-mix(in srgb, var(--home-accent-3) 78%, #fff);
}

.home-slider__copy > * {
  position: relative;
  z-index: 1;
}

.home-slider__kicker {
  display: inline-flex;
  max-width: 100%;
  min-height: 32px;
  align-items: center;
  margin-bottom: 10px;
  padding: .34rem .72rem;
  border: 1px solid color-mix(in srgb, var(--home-accent-3) 42%, transparent);
  border-radius: 999px;
  color: var(--home-text-on-media);
  background: color-mix(in srgb, var(--home-accent) 32%, transparent);
  backdrop-filter: blur(10px);
  font-size: .78rem;
  font-weight: 900;
}

.home-slider__copy h2 {
  max-width: 16ch;
  margin: 0;
  color: var(--home-text-on-media) !important;
  font-size: clamp(1.65rem, 3.5vw, 3.45rem);
  font-weight: 950;
  line-height: 1.28;
  letter-spacing: 0;
  text-wrap: balance;
  text-shadow: 0 8px 32px rgb(0 0 0 / .54), 0 2px 8px rgb(0 0 0 / .48);
}

.home-slider__copy p {
  max-width: 56ch;
  margin: clamp(9px, 1.45vw, 16px) 0 0;
  color: var(--home-text-on-media) !important;
  font-size: clamp(.88rem, 1.18vw, 1.05rem);
  font-weight: 650;
  line-height: 1.95;
  text-shadow: 0 4px 18px rgb(0 0 0 / .56), 0 1px 6px rgb(0 0 0 / .52);
}

.home-slider__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(14px, 1.9vw, 22px);
}

.home-slider__button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid rgb(255 255 255 / .30);
  border-radius: 12px;
  background: rgb(255 255 255 / .10);
  color: #fff;
  box-shadow: 0 10px 24px rgb(0 0 0 / .18);
  font-weight: 900;
  line-height: 1.35;
  text-decoration: none;
  text-shadow: 0 2px 8px rgb(0 0 0 / .30);
}

.home-slider__button--primary {
  border-color: var(--home-accent-3);
  background: linear-gradient(135deg, var(--home-accent), var(--home-accent-2));
  color: #fff;
  text-shadow: none;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--home-accent-2) 34%, transparent);
}

.home-slider__button:hover {
  border-color: #fff;
  background: rgb(255 255 255 / .19);
}

.home-slider__controls {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  direction: ltr;
}

.home-slider__nav,
.home-slider__dot {
  border: 1px solid rgb(255 255 255 / .34);
  background: color-mix(in srgb, var(--home-accent) 22%, rgb(255 255 255 / .12));
  color: #fff;
  box-shadow: 0 12px 26px rgb(0 0 0 / .22);
  cursor: pointer;
}

.home-slider__nav {
  position: absolute;
  top: 50%;
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  pointer-events: auto;
  transform: translateY(-50%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 1.4rem;
  line-height: 1;
}

.home-slider__nav--prev { right: clamp(14px, 1.8vw, 24px); }
.home-slider__nav--next { left: clamp(14px, 1.8vw, 24px); }

.home-slider__nav:hover,
.home-slider__dot:hover,
.home-slider__dot.is-active {
  border-color: color-mix(in srgb, var(--home-accent-3) 74%, #fff);
  background: color-mix(in srgb, var(--home-accent-2) 68%, rgb(255 255 255 / .22));
  box-shadow: 0 14px 30px color-mix(in srgb, var(--home-accent-2) 30%, transparent);
}

.home-slider__status {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 58px;
  display: inline-flex;
  min-width: 66px;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-inline: 12px;
  border: 1px solid rgb(255 255 255 / .28);
  border-radius: 999px;
  background: rgb(3 8 12 / .42);
  color: #fff;
  font-size: .82rem;
  font-weight: 950;
  pointer-events: none;
  transform: translateX(-50%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.home-slider__dots {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 28px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid rgb(255 255 255 / .22);
  border-radius: 999px;
  background: rgb(3 8 12 / .36);
  box-shadow: 0 12px 26px rgb(0 0 0 / .18);
  direction: rtl;
  transform: translateX(-50%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.home-slider__dot {
  width: 10px;
  height: 10px;
  min-height: 0;
  padding: 0;
  border-radius: 999px;
}

.home-slider__dot.is-active {
  width: 28px;
}

@media (max-width: 900px) {
  .home-slider {
    aspect-ratio: auto;
    min-height: min(var(--home-slider-height, 430px), calc(100svh - 92px));
    max-height: none;
    border-radius: 21px;
  }

  .home-slider__slide::before {
    background:
      linear-gradient(0deg, rgb(3 8 12 / .70) 0%, rgb(3 8 12 / .38) 48%, transparent 78%),
      linear-gradient(90deg, rgb(3 8 12 / .12), transparent 60%);
  }

  .home-slider__copy {
    right: 14px;
    top: auto;
    bottom: 14px;
    width: auto;
    transform: none;
    padding: 18px;
/*    border-radius: 18px;
    background: linear-gradient(180deg, rgb(3 8 12 / .18), rgb(3 8 12 / .34));
    backdrop-filter: blur(10px);*/
    -webkit-backdrop-filter: blur(10px);
  }

  .home-slider__copy h2 {
    max-width: none;
    font-size: clamp(1.35rem, 6.7vw, 2.15rem);
  }

  .home-slider__nav {
    top: 18px;
    width: 38px;
    height: 38px;
    transform: none;
  }

  .home-slider__nav--prev { right: 14px; }
  .home-slider__nav--next { left: 14px; }
  .home-slider__status { top: 18px; bottom: auto; transform: translateX(-50%); }
  .home-slider__dots { left: 50%; top: 66px; bottom: auto; transform: translateX(-50%); }
}

@media (max-width: 520px) {
  .home-slider {
    width: calc(100% - 18px);
    min-height: min(var(--home-slider-height, 390px), calc(100svh - 92px));
    margin-top: 10px;
  }

  .home-slider__copy { padding: 16px; }

  .home-slider__copy p {
    display: -webkit-box;
    overflow: hidden;
    font-size: .86rem;
    line-height: 1.85;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }

  .home-slider__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-slider__actions > :only-child { grid-column: 1 / -1; }
  .home-slider__button { width: 100%; min-height: 42px; padding-inline: 10px; }
  .home-slider__status { min-width: 58px; min-height: 32px; padding-inline: 9px; font-size: .76rem; }
}

@media (prefers-reduced-motion: reduce) {
  .home-slider__slide,
  .home-slider__dot {
    transition: none;
  }
}

/* Final UI/UX hardening pass: dynamic theme, no accidental horizontal scroll, media slider, footer editor. */
html,
body {
  max-width: 100%;
  overflow-x: clip !important;
  scroll-behavior: smooth;
}

:where(.site-shell, .admin-shell, .profile-shell, .auth-shell, .content-area, .admin-section, .glass-card, .liquid-panel, .home-slider, .footer) {
  max-width: 100%;
  box-sizing: border-box;
}

:where(img, video, svg, canvas, iframe) {
  max-width: 100%;
}

.site-shell {
  --theme-primary: var(--accent, #334155);
  --theme-secondary: var(--accent-2, #6366f1);
  --theme-gold: var(--accent-3, #d7b56d);
  background:
    radial-gradient(circle at 8% 3%, color-mix(in srgb, var(--theme-gold) 12%, transparent), transparent 28%),
    radial-gradient(circle at 90% 8%, color-mix(in srgb, var(--theme-secondary) 13%, transparent), transparent 30%),
    linear-gradient(180deg, color-mix(in srgb, var(--theme-primary) 6%, #f8fbf9), #ffffff 42%, color-mix(in srgb, var(--theme-secondary) 4%, #f8fafc));
}

.site-header,
.footer,
.mobile-site-nav {
  border-color: color-mix(in srgb, var(--accent-2, #6366f1) 24%, transparent) !important;
}

.btn-primary,
.home-slider__button--primary,
.header-cta,
button.btn-primary,
a.btn-primary {
  background: linear-gradient(135deg, var(--accent, #334155), var(--accent-2, #6366f1)) !important;
  color: #fff !important;
  border-color: color-mix(in srgb, var(--accent-2, #6366f1) 42%, transparent) !important;
  box-shadow: 0 14px 32px color-mix(in srgb, var(--accent, #334155) 24%, transparent);
}

.btn-secondary,
a.btn-secondary,
button.btn-secondary,
.status-chip.published {
  border-color: color-mix(in srgb, var(--accent-2, #6366f1) 28%, transparent) !important;
  color: color-mix(in srgb, var(--accent, #334155) 82%, #10251d) !important;
  background: color-mix(in srgb, var(--accent-2, #6366f1) 8%, #fff) !important;
}

:where(a, button, .glass-card, .liquid-panel, .article-card, .product-card, .home-slider__slide, .home-slider__copy, .site-header, .footer, .input) {
  transition-duration: .26s;
  transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}

.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  white-space: nowrap;
}

.home-slider__slide > .home-slider__media,
.home-slider__slide > img,
.home-slider__slide > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.04) contrast(1.03);
  user-select: none;
  -webkit-user-drag: none;
}

.home-slider__slide > video.home-slider__media {
  background: #050b10;
}

.slider-thumb img,
.slider-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.editor-figure figcaption[contenteditable="false"] {
  cursor: default;
  user-select: text;
  background: color-mix(in srgb, var(--accent-2, #6366f1) 5%, transparent);
  border-radius: 12px;
}

.footer-grid--extended {
  grid-template-columns: minmax(0, 1.35fr) minmax(180px, .75fr) minmax(220px, .9fr);
}

.footer-identity--independent p {
  max-width: 620px;
  line-height: 2;
}

.footer-symbols,
.footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.footer-symbols img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--accent-2, #6366f1) 22%, transparent);
  border-radius: 16px;
  background: rgba(255,255,255,.07);
}

.footer-socials a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent-3, #d7b56d) 34%, transparent);
  color: #fff6dd;
  text-decoration: none;
  background: rgba(255,255,255,.06);
}

.footer-symbol-editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.symbol-editor-card,
.social-editor-row {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--panel-border, rgba(0,0,0,.08));
  border-radius: 18px;
  background: rgba(255,255,255,.54);
}

.symbol-editor-card img {
  width: 100%;
  height: 96px;
  object-fit: contain;
  border-radius: 14px;
  background: rgba(0,0,0,.04);
}

.social-editor-row {
  grid-template-columns: minmax(150px, .75fr) minmax(220px, 1fr) auto;
  align-items: center;
  margin-top: 10px;
}

.empty-state.compact {
  margin: 10px 0;
  padding: 14px;
  min-height: auto;
}

@media (max-width: 860px) {
  .header-cta { display: none; }
  .footer-grid--extended { grid-template-columns: 1fr; }
  .social-editor-row { grid-template-columns: 1fr; }
}

/* BuildFix4: full three-color dynamic liquid-glass theme. The three colors set in
   Admin > Settings drive background, cards, borders, buttons, header and footer. */
:where(.site-shell, .admin-shell, .auth-shell) {
  --theme-primary: var(--accent, #334155);
  --theme-secondary: var(--accent-2, #6366f1);
  --theme-edge: var(--accent-3, #d7b56d);
  --theme-bg-a: color-mix(in srgb, var(--theme-primary) 24%, #03100d);
  --theme-bg-b: color-mix(in srgb, var(--theme-secondary) 18%, #071a15);
  --theme-bg-c: color-mix(in srgb, var(--theme-edge) 8%, #020b09);
  --theme-surface-a: color-mix(in srgb, var(--theme-primary) 22%, rgba(255,255,255,.075));
  --theme-surface-b: color-mix(in srgb, var(--theme-secondary) 18%, rgba(0,0,0,.34));
  --theme-border: color-mix(in srgb, var(--theme-edge) 44%, rgba(255,255,255,.14));
  --theme-border-soft: color-mix(in srgb, var(--theme-secondary) 34%, rgba(255,255,255,.11));
  --theme-text: #f7fff9;
  --theme-muted: color-mix(in srgb, var(--theme-secondary) 22%, #d6e7df);
  min-height: 100svh;
  color: var(--theme-text) !important;
  font-family: var(--site-font, YB, Vazirmatn, Tahoma, sans-serif);
  background:
    radial-gradient(circle at 10% 6%, color-mix(in srgb, var(--theme-secondary) 32%, transparent), transparent 28rem),
    radial-gradient(circle at 92% 14%, color-mix(in srgb, var(--theme-edge) 22%, transparent), transparent 32rem),
    radial-gradient(circle at 50% 110%, color-mix(in srgb, var(--theme-primary) 34%, transparent), transparent 34rem),
    linear-gradient(145deg, var(--theme-bg-a), var(--theme-bg-b) 48%, var(--theme-bg-c)) !important;
  background-attachment: fixed !important;
}

:where(.site-shell, .admin-shell, .auth-shell)::before,
:where(.site-shell, .admin-shell, .auth-shell)::after {
  opacity: .68 !important;
  filter: blur(10px) saturate(1.2) !important;
}

:where(.content-area, .admin-content, .account-auth-page, .profile-completion-page) {
  background: transparent !important;
}

:where(.site-header, .footer, .mobile-site-nav, .admin-sidebar, .account-auth-card, .profile-completion-card,
  .glass-card, .admin-section, .content-band, .liquid-panel, .section-card, .article-card, .product-card,
  .service-card, .route-state, .empty-state, .shop-filters, .shop-notice, .cart-card, .checkout-card,
  .tracking-panel, .public-page-card, .builder-lite-panel, .visual-stage,
  .profile-form-card, .profile-welcome, .address-card, .user-order-card, .favorite-panel-card) {
  color: var(--theme-text) !important;
  border: 1px solid var(--theme-border-soft) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.035) 28%, transparent 58%),
    linear-gradient(315deg, var(--theme-surface-a), var(--theme-surface-b)) !important;
  box-shadow:
    0 28px 90px color-mix(in srgb, var(--theme-primary) 18%, rgba(0,0,0,.44)),
    inset 0 1px rgba(255,255,255,.18),
    inset 0 -1px color-mix(in srgb, var(--theme-edge) 13%, transparent) !important;
  backdrop-filter: blur(30px) saturate(178%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(178%) !important;
}

:where(.glass-card, .admin-section, .content-band, .liquid-panel, .section-card, .article-card, .product-card, .service-card)::before {
  border-color: color-mix(in srgb, var(--theme-edge) 34%, transparent) !important;
}

:where(.glass-card, .admin-section, .content-band, .liquid-panel, .section-card, .article-card, .product-card, .service-card):hover {
  border-color: var(--theme-border) !important;
  box-shadow:
    0 34px 100px color-mix(in srgb, var(--theme-secondary) 20%, rgba(0,0,0,.48)),
    inset 0 1px rgba(255,255,255,.24) !important;
}

:where(.public-page-header, .page-header, .section-title, .admin-page-header) {
  margin-block: clamp(22px, 3.4vw, 54px) clamp(18px, 2.5vw, 34px) !important;
}

:where(.content-band, .glass-card, .admin-section) {
  margin-block: clamp(18px, 2.8vw, 42px) !important;
}

:where(h1, h2, h3, h4, strong, .brand-copy strong, .sidebar-brand strong) {
  color: var(--theme-text) !important;
}

:where(p, small, .muted, .field-hint, .brand-copy small, .sidebar-brand small) {
  color: var(--theme-muted) !important;
}

:where(.input, input.input, textarea.input, select.input, .textarea) {
  color: var(--theme-text) !important;
  caret-color: var(--theme-edge) !important;
  border-color: color-mix(in srgb, var(--theme-edge) 24%, rgba(255,255,255,.16)) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025)),
    color-mix(in srgb, var(--theme-primary) 18%, rgba(0,0,0,.22)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 10px 26px rgba(0,0,0,.10) !important;
}

:where(.input:focus, input.input:focus, textarea.input:focus, select.input:focus) {
  border-color: var(--theme-border) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-edge) 22%, transparent), inset 0 1px rgba(255,255,255,.14) !important;
}

:where(.btn-primary, button.btn-primary, a.btn-primary, .header-cta, .home-slider__button--primary) {
  color: #fff !important;
  border-color: color-mix(in srgb, var(--theme-edge) 42%, rgba(255,255,255,.15)) !important;
  background:
    linear-gradient(150deg, rgba(255,255,255,.2), transparent 34%),
    linear-gradient(135deg, var(--theme-primary), var(--theme-secondary)) !important;
  box-shadow: 0 16px 42px color-mix(in srgb, var(--theme-primary) 30%, transparent), inset 0 1px rgba(255,255,255,.24) !important;
}

:where(.btn-secondary, button.btn-secondary, a.btn-secondary, .status-chip.published) {
  color: color-mix(in srgb, var(--theme-edge) 78%, #fff) !important;
  border-color: color-mix(in srgb, var(--theme-edge) 40%, rgba(255,255,255,.14)) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.11), transparent),
    color-mix(in srgb, var(--theme-secondary) 16%, rgba(255,255,255,.04)) !important;
}

:where(.btn-danger, button.btn-danger) {
  background: linear-gradient(135deg, #a93430, color-mix(in srgb, #a93430 76%, var(--theme-edge))) !important;
  border-color: rgba(255,185,175,.34) !important;
}

:where(.admin-table, .table-row, .table-head, .option-editor-row, .spec-builder-row) {
  background: color-mix(in srgb, var(--theme-primary) 10%, rgba(255,255,255,.035)) !important;
  border-color: color-mix(in srgb, var(--theme-secondary) 22%, rgba(255,255,255,.1)) !important;
}

:where(.site-shell, .admin-shell, .auth-shell) * {
  scrollbar-color: color-mix(in srgb, var(--theme-secondary) 60%, #37564c) transparent;
}

@media (prefers-reduced-motion: no-preference) {
  :where(.glass-card, .admin-section, .content-band, .liquid-panel, .section-card, .article-card, .product-card, .service-card) {
    animation-duration: 680ms !important;
    animation-timing-function: cubic-bezier(.18,.82,.26,1) !important;
  }

  :where(a, button, summary, .input, .glass-card, .admin-section, .product-card, .article-card, .site-header) {
    transition-duration: 340ms !important;
    transition-timing-function: cubic-bezier(.2,.8,.2,1) !important;
  }
}

/* Fajr network glass VOD redesign */
:root { --fajr-olive:#40553A; --fajr-oil:#0E3A43; --fajr-gold:#D6B46A; --fajr-cream:#fff8e8; }
.fajr-hero-slider { position: relative; min-height: clamp(520px, 72vh, 760px); overflow: hidden; isolation: isolate; background: #071714; }
.fajr-hero-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .75s ease, transform 1.2s ease; transform: scale(1.03); }
.fajr-hero-slide.is-active { opacity: 1; pointer-events: auto; transform: scale(1); }
.fajr-hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.08) contrast(1.05); }
.fajr-hero-overlay { position: absolute; inset: 0; background: radial-gradient(circle at 75% 20%, color-mix(in srgb, var(--accent-3, #D6B46A) 22%, transparent), transparent 34%), linear-gradient(90deg, rgba(4,15,15,.94), rgba(6,24,24,.62), rgba(5,12,14,.24)); }
.fajr-hero-copy { position: absolute; inset-block-end: clamp(42px, 10vw, 96px); inset-inline-start: clamp(18px, 6vw, 96px); width: min(720px, calc(100% - 36px)); padding: clamp(24px, 5vw, 52px); background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(18px); box-shadow: 0 28px 90px rgba(0,0,0,.35); color: #fff; }
.fajr-hero-copy h1 { font-size: clamp(2rem, 5vw, 4.4rem); margin: .35em 0; line-height: 1.18; color: #fff8e8; }
.fajr-hero-copy p { font-size: clamp(1rem, 2vw, 1.28rem); color: rgba(255,255,255,.82); max-width: 58ch; }
.hero-actions, .section-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fajr-featured-video-box { width: min(var(--page-width), calc(100% - (var(--page-gutter) * 2))); margin: clamp(-40px, -4vw, -20px) auto var(--section-space); padding: clamp(18px, 3vw, 34px); position: relative; z-index: 2; background: linear-gradient(135deg, rgba(7,18,20,.86), rgba(14,58,67,.72)); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(22px); color: #fff; }
.fajr-featured-video-box .section-title h2, .fajr-featured-video-box .section-title { color:#fff8e8; }
.fajr-video-strip { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 36px) / 3); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
.fajr-video-card { scroll-snap-align: start; min-width: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 24px; background: rgba(255,255,255,.075); overflow: hidden; box-shadow: 0 18px 60px rgba(0,0,0,.16); }
.fajr-video-card > div { padding: 16px; display: grid; gap: 8px; }
.fajr-video-card h3 { margin: 0; color: inherit; font-size: 1.05rem; }
.fajr-video-card p { margin: 0; color: rgba(255,255,255,.72); line-height: 1.9; }
.video-thumb { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; background: #061812; color: #fff; text-decoration: none; }
.video-thumb img, .course-card > img, .campaign-card > img, .partner-card > img, .member-card > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-thumb::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent, rgba(0,0,0,.58)); }
.play-badge {
  position: absolute;
  inset-inline-start: 16px;
  inset-block-end: 16px;
  z-index: 3;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  pointer-events: none;
  border: 1px solid rgb(255 255 255 / .62);
  border-radius: 999px;
  color: #15231f;
  background:
    radial-gradient(circle at 35% 28%, rgb(255 255 255 / .78), transparent 32%),
    color-mix(in srgb, var(--accent-3, #D6B46A) 88%, white);
  box-shadow: 0 12px 30px rgb(0 0 0 / .28), inset 0 1px rgb(255 255 255 / .78);
  transition: transform 420ms cubic-bezier(.16, 1, .3, 1), box-shadow 420ms ease;
  isolation: isolate;
}

.play-badge::before {
  position: absolute;
  z-index: -1;
  inset: -2px;
  content: "";
  border: 1px solid color-mix(in srgb, var(--accent-3, #D6B46A) 62%, white);
  border-radius: inherit;
  opacity: 0;
}

.play-badge::after {
  position: absolute;
  inset: 5px;
  z-index: -1;
  content: "";
  border: 1px solid rgb(255 255 255 / .34);
  border-radius: inherit;
}

.play-badge svg {
  width: 22px;
  height: 22px;
  overflow: visible;
  fill: currentColor;
  filter: drop-shadow(0 1px 0 rgb(255 255 255 / .35));
  transform: translateX(1px);
}

.video-preview-link:is(:hover, :focus-visible) + .play-badge {
  box-shadow: 0 15px 34px rgb(0 0 0 / .32), inset 0 1px rgb(255 255 255 / .84);
  transform: scale(1.055);
}
.video-thumb b { position:absolute; z-index:2; inset-inline-end:12px; inset-block-end:14px; background:rgba(0,0,0,.58); padding:4px 8px; border-radius:10px; direction:ltr; }
.fajr-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fajr-stats strong { color: var(--accent-3, #D6B46A); font-size: clamp(2rem, 4vw, 3.6rem); }
.timeline-glass { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 26px; }
.timeline-glass span, .module-card, .latest-panel, .member-card, .course-card, .partner-card, .campaign-card { border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); backdrop-filter: blur(14px); border-radius: 22px; }
.timeline-glass span { padding: 14px; text-align: center; color: var(--accent-3, #D6B46A); }
.fajr-home-modules { display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 16px; }
.module-card { padding: 22px; color: inherit; text-decoration: none; display:grid; gap: 8px; min-height: 150px; }
.module-card strong { color: #fff5dc; font-size: 1.15rem; }
.module-card span { color: rgba(255,255,255,.74); line-height: 1.8; }
.latest-dual-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap: 18px; width: min(var(--page-width), calc(100% - (var(--page-gutter) * 2))); margin-inline:auto; }
.latest-panel { padding: 22px; box-shadow: 0 16px 50px rgba(14,58,67,.08); }
.latest-panel h3 { margin-top: 0; color: var(--accent, #40553A); }
.latest-row { display:grid; grid-template-columns: 86px 1fr; gap: 12px; align-items:center; padding: 10px 0; color: inherit; text-decoration: none; border-bottom: 1px solid rgba(14,58,67,.09); }
.latest-row.no-image { grid-template-columns: 1fr; }
.latest-row img { width: 86px; height: 62px; object-fit: cover; border-radius: 14px; }
.latest-row strong { display:block; color:#12322f; }
.latest-row small { display:block; color:#637a73; margin-top:4px; line-height:1.7; }
.report-filter-bar { display:grid; grid-template-columns: 1fr 220px 180px auto; gap: 12px; align-items:end; }
.reports-archive-grid, .report-grid { align-items: stretch; }
.reports-archive-grid .fajr-video-card, .report-card { background: rgba(10,38,42,.88); color:#fff; }
.report-detail-page { width:min(1100px, calc(100% - var(--page-gutter) * 2)); margin: clamp(30px,6vw,72px) auto; display:grid; gap: 22px; }
.report-detail-hero { padding: clamp(24px,4vw,48px); border-radius: 30px; background: linear-gradient(135deg, rgba(14,58,67,.94), rgba(64,85,58,.78)); color:#fff; }
.report-detail-hero h1 { color:#fff8e8; font-size: clamp(2rem,4.5vw,4rem); }
.fajr-player-shell { padding: 14px; background: rgba(5,16,18,.92); }
.fajr-player-shell video, .fajr-player-shell img, video.fajr-plyr { width:100%; max-height: 72vh; border-radius: 20px; background:#000; object-fit: contain; }
.report-actions { display:flex; gap: 10px; justify-content:flex-end; padding: 14px 4px 2px; }
.report-gallery figure { padding: 10px; margin:0; }
.report-gallery img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:18px; }
.member-grid, .course-grid, .partner-grid, .campaign-grid { align-items: stretch; }
.member-card, .course-card, .partner-card, .campaign-card { padding: 18px; overflow:hidden; }
.member-card > img { width: 120px; height: 120px; border-radius: 999px; margin-inline:auto; border: 4px solid rgba(214,180,106,.32); }
.member-card { text-align:center; }
.member-card .resume-image { width:100%; border-radius:18px; margin-top: 12px; }
.member-tabs .tab-pills { display:flex; gap: 10px; flex-wrap:wrap; margin-bottom:24px; }
.tab-pills a { padding: 10px 16px; border-radius: 999px; background:rgba(14,58,67,.08); color:var(--accent,#40553A); text-decoration:none; }
.course-card > img, .campaign-card > img, .partner-card > img { aspect-ratio:16/10; border-radius:18px; margin-bottom: 14px; }
.partner-card > img { max-height: 170px; object-fit: cover; }
.progress-wrap { height: 10px; background: rgba(14,58,67,.12); border-radius:999px; overflow:hidden; margin: 16px 0 8px; }
.progress-wrap span { display:block; height:100%; background: linear-gradient(90deg, var(--accent,#40553A), var(--accent-3,#D6B46A)); }
.footer-logo { width: 78px; height: 78px; object-fit: contain; border-radius: 22px; padding: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); }
.brand-mark--fallback { background: linear-gradient(135deg, var(--accent,#40553A), var(--accent-3,#D6B46A)); color:#fff; }
.admin-shell { background: radial-gradient(circle at 85% -10%, color-mix(in srgb, var(--accent-3,#D6B46A) 22%, transparent), transparent 34%), linear-gradient(135deg, #071512, #102924 48%, #071411); }
.admin-sidebar { border-inline-end: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.10) !important; backdrop-filter: blur(24px); }
.admin-content { padding-top: 22px; }
.admin-context-banner { width: min(1180px, calc(100% - 24px)); margin: 0 auto 18px; padding: 16px 20px; display:flex; gap: 12px; justify-content:space-between; align-items:center; color:#fff8e8; background: rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16); }
.admin-context-banner span { color: rgba(255,255,255,.72); }
.admin-readable-panel { box-shadow: 0 24px 80px rgba(0,0,0,.16); }
.media-mini { display:flex; align-items:center; gap: 10px; }
.media-mini img { width: 68px; height: 46px; object-fit: cover; border-radius: 12px; }
.status-chip.published { background: rgba(51, 194, 129,.14); color:#a9ffd2; }
.status-chip.draft { background: rgba(214, 180, 106,.16); color:#ffe4a5; }
.article-actions-footer { display:flex; gap: 10px; align-items:center; justify-content: center; }
.notice-box.warning { background: #fff6df; color:#684600; border-color:#f3cf7c; }

@media (max-width: 1100px) { .fajr-video-strip { grid-auto-columns: calc((100% - 18px) / 2); } .fajr-home-modules { grid-template-columns: repeat(2,1fr); } .timeline-glass { grid-template-columns: repeat(2,1fr); } .report-filter-bar, .latest-dual-grid { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .fajr-hero-copy { inset-inline: 14px; inset-block-end: 34px; width:auto; padding: 22px; } .fajr-video-strip { grid-auto-columns: 86%; } .fajr-stats { grid-template-columns: repeat(2,1fr); } .fajr-home-modules { grid-template-columns: 1fr; } .timeline-glass { grid-template-columns: 1fr; } .report-filter-bar { grid-template-columns: 1fr; } .admin-context-banner { display:grid; } .latest-row { grid-template-columns: 72px 1fr; } }

/* 2026-07-09: cohesive Fajr public experience, media previews and course commerce */
.brand-mark--fallback svg {
  width: 70%;
  height: 70%;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-slider {
  min-height: clamp(390px, 58vw, 650px) !important;
  max-height: 720px !important;
  aspect-ratio: 16 / 7 !important;
}

.home-slider__media {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.home-slider__copy {
 /* border: 1px solid rgb(255 255 255 / .20);
  border-radius: 24px;
  background: linear-gradient(145deg, rgb(4 16 17 / .45), rgb(5 27 29 / .20));
  box-shadow: 0 24px 70px rgb(0 0 0 / .20), inset 0 1px rgb(255 255 255 / .14);*/
/*  backdrop-filter: blur(16px) saturate(135%);
*/}

.fajr-report-preview video,
.fajr-report-preview > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.16,1,.3,1), filter .5s ease, opacity .35s ease;
}

.fajr-report-preview.is-previewing video {
  transform: scale(1.035);
  filter: saturate(1.12) contrast(1.04);
}

.video-preview-link {
  position: absolute;
  z-index: 2;
  inset: 0;
}

.preview-sound {
  position: absolute;
  z-index: 5;
  inset-inline-end: 12px;
  inset-block-start: 12px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgb(255 255 255 / .30);
  border-radius: 50%;
  color: #fff;
  background: rgb(3 12 14 / .58);
  box-shadow: 0 10px 28px rgb(0 0 0 / .24);
  cursor: pointer;
  backdrop-filter: blur(12px);
}

.featured-badge {
  position: absolute;
  z-index: 3;
  inset-inline-start: 12px;
  inset-block-start: 12px;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--accent-3) 55%, white);
  border-radius: 999px;
  color: #1a180d;
  background: color-mix(in srgb, var(--accent-3) 86%, white);
  font-size: .72rem;
  font-weight: 950;
}

.home-course-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 36px) / 3);
  gap: 18px;
  overflow-x: auto;
  padding: 4px 2px 14px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.home-course-strip > * { scroll-snap-align: start; min-width: 0; }
.course-card { display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.course-card-body { display: grid; gap: 7px; }
.course-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.course-card-footer > strong { color: color-mix(in srgb, var(--accent-3) 84%, white) !important; }
.course-cover { position: relative; display: block; border-radius: 18px; overflow: hidden; }
.course-cover img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.course-cover span { position: absolute; inset-inline-start: 12px; inset-block-end: 12px; padding: 5px 10px; border-radius: 999px; color: #fff; background: rgb(3 15 16 / .66); backdrop-filter: blur(10px); }
.price-stack { display: grid; gap: 2px; }
.price-stack del { color: var(--theme-muted, #798b86); font-size: .78rem; }
.price-stack strong { color: color-mix(in srgb, var(--accent-3) 84%, white) !important; }
.course-catalog .course-card { padding: 16px; }

.cooperation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(290px, .65fr);
  gap: 18px;
}

.partner-preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.partner-mini-card { display: flex; align-items: center; gap: 13px; min-height: 105px; padding: 14px; color: inherit; text-decoration: none; }
.partner-mini-card img { width: 72px; height: 72px; flex: 0 0 72px; object-fit: cover; border-radius: 18px; }
.partner-mini-card span { display: grid; gap: 5px; }
.need-registration-panel { display: flex; flex-direction: column; justify-content: center; padding: clamp(22px, 3vw, 36px); color: inherit; text-decoration: none; }
.need-registration-panel h3 { font-size: clamp(1.35rem, 2.5vw, 2rem); }
.need-registration-panel b { margin-top: 12px; color: color-mix(in srgb, var(--accent-3) 82%, white) !important; }
.product-card { padding: 16px; }
.product-image img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 18px; display: block; }

.course-detail-page { width: min(1180px, calc(100% - 32px)); margin: 28px auto 72px; display: grid; gap: 22px; }
.course-detail-hero { display: grid; grid-template-columns: minmax(280px,.82fr) minmax(0,1.18fr); gap: clamp(22px,4vw,54px); align-items: center; padding: clamp(18px,3vw,36px); }
.course-detail-hero > img { width: 100%; aspect-ratio: 16/11; object-fit: cover; border-radius: 24px; }
.course-detail-hero h1 { font-size: clamp(2rem,4vw,3.7rem); }
.course-meta { display: flex; flex-wrap: wrap; gap: 9px; margin: 16px 0; }
.course-meta span { padding: 7px 11px; border-radius: 999px; color: var(--theme-muted); background: rgb(255 255 255 / .07); }
.course-purchase-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 22px; padding: 15px; border: 1px solid rgb(255 255 255 / .14); border-radius: 20px; background: rgb(255 255 255 / .06); }
.course-checkout-layout { width: min(980px, calc(100% - 32px)); margin: clamp(30px,6vw,72px) auto; display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 20px; }
.course-checkout-summary, .course-checkout-payment { padding: clamp(22px,4vw,38px); }
.course-checkout-summary > img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 22px; margin-bottom: 18px; }
.course-checkout-payment form { display: grid; gap: 18px; }

.admin-upload-preview { width: 100%; max-height: 180px; object-fit: cover; border-radius: 16px; margin-top: 10px; }
.admin-gallery-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px,1fr)); gap: 9px; margin-top: 10px; }
.admin-gallery-preview img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 13px; }
.vision-admin-preview { margin-top: 24px; border: 1px solid; overflow: hidden; }
.vision-admin-preview h2 { margin: 9px 0 14px; }

@media (max-width: 1050px) {
  .home-course-strip { grid-auto-columns: calc((100% - 18px) / 2); }
  .cooperation-grid, .course-detail-hero, .course-checkout-layout { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .home-slider { width: calc(100% - 16px) !important; aspect-ratio: auto !important; min-height: 460px !important; }
  .home-slider__copy { inset-inline: 12px !important; bottom: 12px !important; }
  .home-course-strip { grid-auto-columns: 86%; }
  .partner-preview-grid { grid-template-columns: 1fr; }
  .course-card-footer { align-items: flex-end; }
}

/* Admin UI translated from panel-admin-glass.zip into Blazor. */
.admin-glass-app {
  min-height: 100svh;
  display: flex !important;
  align-items: flex-start;
  gap: 24px;
  padding: 24px;
  direction: rtl;
  overflow: clip;
  color: #172033 !important;
  background: linear-gradient(160deg, #f8faff 0%, #eef4ff 42%, #fdf4ff 100%) !important;
  background-attachment: fixed !important;
}

.admin-ambient { position: fixed; z-index: 0; inset: 0; pointer-events: none; overflow: hidden; }
.admin-ambient i { position: absolute; border-radius: 50%; filter: blur(68px); opacity: .44; animation: adminOrb 12s ease-in-out infinite; }
.admin-ambient i:nth-child(1) { width: 420px; height: 420px; top: -130px; right: -90px; background: color-mix(in srgb, var(--accent) 42%, #3b82f6); }
.admin-ambient i:nth-child(2) { width: 360px; height: 360px; bottom: -90px; left: -70px; background: color-mix(in srgb, var(--accent-2) 34%, #7c3aed); animation-delay: -4s; }
.admin-ambient i:nth-child(3) { width: 280px; height: 280px; top: 38%; left: 34%; background: color-mix(in srgb, var(--accent-3) 35%, #06b6d4); animation-delay: -7s; }

.admin-template-panel {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / .86) !important;
  border-radius: 28px;
  color: #172033 !important;
  background: rgb(255 255 255 / .78) !important;
  box-shadow: 0 14px 42px rgb(31 45 78 / .10), inset 0 1px #fff !important;
  backdrop-filter: blur(24px) saturate(1.2) !important;
}

.admin-template-panel::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  border-radius: inherit;
  background: linear-gradient(180deg, rgb(255 255 255 / .94), transparent 46%);
  pointer-events: none;
}

.admin-glass-app .admin-sidebar {
  position: sticky !important;
  z-index: 20;
  top: 24px;
  width: 280px !important;
  min-width: 280px;
  height: calc(100svh - 48px);
  display: flex;
  flex-direction: column;
  padding: 18px;
  border-inline-end: 1px solid #fff !important;
  background: rgb(255 255 255 / .90) !important;
  transform: none;
}

.admin-glass-app .sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 4px 3px 16px; border-bottom: 1px solid #edf1f8; }
.admin-glass-app .sidebar-brand > div { min-width: 0; display: grid; }
.admin-glass-app .sidebar-brand strong { color: #172033 !important; font-size: 1rem; }
.admin-glass-app .sidebar-brand small { color: #7c879e !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-logo-box { width: 52px; height: 52px; flex: 0 0 52px; display: grid; place-items: center; padding: 7px; border-radius: 17px; object-fit: contain; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 10px 28px color-mix(in srgb, var(--accent-2) 30%, transparent); }
.admin-sidebar-close { display: none; margin-inline-start: auto; width: 36px; height: 36px; border: 0; border-radius: 12px; color: #5d687d; background: #f2f5fa; font-size: 1.5rem; cursor: pointer; }

.admin-menu-search { display: flex; align-items: center; gap: 8px; margin: 14px 0 10px; padding: 0 11px; border: 1px solid #e5eaf3; border-radius: 15px; color: #8a94a8; background: #f7f9fc; }
.admin-menu-search .admin-icon { width: 18px; height: 18px; }
.admin-menu-search input { width: 100%; min-width: 0; padding: 11px 0; border: 0; outline: 0; color: #172033; background: transparent; }

.admin-glass-app .sidebar-nav { display: block; flex: 1; overflow-y: auto; padding: 0 3px 16px; scrollbar-width: thin; }
.admin-glass-app .sidebar-group { display: grid; gap: 4px; margin-top: 13px; }
.admin-glass-app .sidebar-group > span { padding: 0 10px 5px; color: #929caf !important; font-size: .72rem; font-weight: 800; }
.admin-glass-app .sidebar-nav a,
.admin-glass-app .sidebar-button {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 0;
  border-radius: 15px;
  color: #556176 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
}
.admin-glass-app .sidebar-nav a .admin-icon,
.admin-glass-app .sidebar-button .admin-icon { width: 34px; height: 34px; padding: 7px; border-radius: 11px; color: #647087; background: #f1f4f9; transition: .3s ease; }
.admin-glass-app .sidebar-nav a:hover { color: color-mix(in srgb, var(--accent) 80%, #2563eb) !important; background: rgb(255 255 255 / .95) !important; box-shadow: 0 8px 22px rgb(31 45 78 / .08) !important; transform: translateX(-2px); }
.admin-glass-app .sidebar-nav a.active { color: color-mix(in srgb, var(--accent) 72%, #2563eb) !important; background: linear-gradient(270deg, color-mix(in srgb, var(--accent) 12%, #eff6ff), color-mix(in srgb, var(--accent-2) 8%, #f5f3ff)) !important; box-shadow: 0 5px 20px color-mix(in srgb, var(--accent) 12%, transparent) !important; }
.admin-glass-app .sidebar-nav a.active .admin-icon { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 7px 18px color-mix(in srgb, var(--accent-2) 25%, transparent); }
.admin-sidebar-status { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid color-mix(in srgb, var(--accent-2) 16%, #e9edf5); border-radius: 17px; background: color-mix(in srgb, var(--accent) 6%, #fff); }
.admin-sidebar-status > i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-3); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-3) 16%, transparent); animation: adminPulse 2s infinite; }
.admin-sidebar-status > span { display: grid; }
.admin-sidebar-status strong { color: color-mix(in srgb, var(--accent) 70%, #172033) !important; font-size: .78rem; }
.admin-sidebar-status small { color: #6f7b91 !important; font-size: .68rem; }

.admin-main-column { position: relative; z-index: 2; min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 18px; }
.admin-topbar { min-height: 86px; display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-radius: 23px; overflow: visible; }
.admin-topbar-title { min-width: 0; flex: 1; }
.admin-topbar-title span { color: #8892a6; font-size: .75rem; }
.admin-topbar-title h1 { margin: 2px 0 0; color: #172033 !important; font-size: clamp(1.1rem,2vw,1.45rem); }
.admin-topbar-actions { display: flex; align-items: center; gap: 10px; }
.admin-quick-link, .admin-profile-chip { min-height: 50px; display: flex; align-items: center; gap: 9px; padding: 6px 11px; border: 1px solid #e4e9f2; border-radius: 16px; color: #4d596f !important; background: rgb(255 255 255 / .88); box-shadow: 0 6px 18px rgb(31 45 78 / .06); text-decoration: none; }
.admin-quick-link .admin-icon { width: 22px; height: 22px; }
.admin-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.admin-avatar .admin-icon { width: 22px; height: 22px; }
.admin-profile-chip > span:last-child { display: grid; }
.admin-profile-chip strong { color: #172033 !important; font-size: .78rem; }
.admin-profile-chip small { color: #8b95a8 !important; font-size: .68rem; }

.admin-glass-app .admin-menu-toggle { position: static; flex: 0 0 44px; width: 44px; height: 44px; padding: 10px; border: 1px solid #e4e9f2; border-radius: 14px; background: #fff; }
.admin-glass-app .admin-menu-toggle span { background: var(--accent); }
.admin-glass-app .admin-content { width: 100%; max-width: none; padding: 0 0 60px !important; color: #172033 !important; background: transparent !important; }
.admin-glass-app .admin-content :where(h1,h2,h3,h4,strong) { color: #172033 !important; }
.admin-glass-app .admin-content :where(p,small,.muted,.field-hint) { color: #6f7b91 !important; }
.admin-glass-app .admin-content :where(.glass-card,.admin-section,.content-band,.liquid-panel,.empty-state) { border: 1px solid rgb(255 255 255 / .88) !important; color: #172033 !important; background: rgb(255 255 255 / .76) !important; box-shadow: 0 14px 42px rgb(31 45 78 / .09), inset 0 1px #fff !important; backdrop-filter: blur(24px) saturate(1.2) !important; }
.admin-glass-app .admin-content :where(.input,input.input,textarea.input,select.input,.textarea) { border-color: #dfe5ef !important; color: #172033 !important; caret-color: var(--accent) !important; background: rgb(248 250 253 / .94) !important; box-shadow: inset 0 1px #fff !important; }
.admin-glass-app .admin-content :where(.input:focus,input.input:focus,textarea.input:focus,select.input:focus) { border-color: color-mix(in srgb, var(--accent) 44%, #cbd5e1) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent) !important; }
.admin-glass-app .admin-content :where(.btn-secondary,a.btn-secondary,button.btn-secondary) { color: color-mix(in srgb, var(--accent) 75%, #2563eb) !important; border-color: #dce3ee !important; background: #fff !important; }
.admin-glass-app .admin-content :where(.admin-table,.table-row,.table-head) { color: #172033 !important; border-color: #e9edf4 !important; background: rgb(255 255 255 / .70) !important; }
.admin-glass-app .admin-content .table-row:hover { background: color-mix(in srgb, var(--accent) 4%, white) !important; transform: scale(1.002); }

.admin-metrics-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 20px; }
.admin-metric-card { position: relative; overflow: hidden; min-height: 150px; display: grid; align-content: center; gap: 5px; padding: 20px; border: 1px solid #fff; border-radius: 24px; background: rgb(255 255 255 / .78); box-shadow: 0 14px 38px rgb(31 45 78 / .09); backdrop-filter: blur(20px); animation: adminFadeUp .7s both; }
.admin-metric-card::after { position: absolute; left: -22px; top: -24px; width: 100px; height: 100px; content: ""; border-radius: 50%; opacity: .18; background: currentColor; filter: blur(2px); }
.admin-metric-card.blue { color: #2563eb; }.admin-metric-card.green { color: color-mix(in srgb, var(--accent-2) 70%, #4f46e5); }.admin-metric-card.orange { color: #d97706; }.admin-metric-card.purple { color: #7c3aed; }
.admin-metric-card span,.admin-metric-card small { color: #778297 !important; }.admin-metric-card strong { color: currentColor !important; font-size: 2rem; }
.payment-filter-grid { display: grid; grid-template-columns: 1fr 220px 220px; gap: 12px; }
.payment-ledger-grid { grid-template-columns: 1.1fr 1.1fr .75fr 1fr .85fr .85fr .7fr; }
.payment-source-chip { width: fit-content; padding: 4px 8px; border-radius: 999px; color: color-mix(in srgb, var(--accent) 70%, #2563eb); background: color-mix(in srgb, var(--accent) 9%, #f1f5f9); font-size: .72rem; font-weight: 800; }
.payment-ip { max-width: 140px; overflow: hidden; text-overflow: ellipsis; color: #556176; }
.course-admin-grid { grid-template-columns: 1.4fr .65fr .75fr .65fr 1fr; }
.status-chip.failed { color: #be123c !important; background: #fff1f2 !important; }

@keyframes adminOrb { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(24px,-18px,0) scale(1.08); } }
@keyframes adminPulse { 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent-3) 0%, transparent); } }
@keyframes adminFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (max-width: 1180px) {
  .admin-metrics-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .payment-ledger-grid { grid-template-columns: 1fr 1fr 1fr; }
  .payment-ledger-grid > *::before { display: block; color: #8a94a8; font-size: .68rem; }
}

@media (max-width: 1023px) {
  .admin-glass-app { display: block !important; padding: 12px; }
  .admin-glass-app .admin-sidebar { position: fixed !important; inset-block: 0; inset-inline-end: 0; top: 0; width: min(88vw,320px) !important; height: 100svh; border-radius: 24px 0 0 24px; transform: translateX(105%); transition: transform .34s cubic-bezier(.2,.8,.2,1); }
  .admin-glass-app .admin-sidebar.open { transform: translateX(0); }
  .admin-glass-app .admin-sidebar-backdrop { position: fixed; z-index: 18; inset: 0; display: block; pointer-events: none; opacity: 0; background: rgb(15 23 42 / .36); backdrop-filter: blur(4px); transition: .3s ease; }
  .admin-glass-app .admin-sidebar-backdrop.open { pointer-events: auto; opacity: 1; }
  .admin-sidebar-close, .admin-glass-app .admin-menu-toggle { display: grid; }
  .admin-topbar { position: sticky; z-index: 15; top: 8px; }
}

@media (max-width: 680px) {
  .admin-topbar { min-height: 72px; padding: 10px; }
  .admin-topbar-title span, .admin-quick-link span, .admin-profile-chip > span:last-child { display: none; }
  .admin-quick-link { width: 44px; min-height: 44px; justify-content: center; padding: 0; }
  .admin-profile-chip { padding: 3px; }
  .admin-metrics-grid, .payment-filter-grid { grid-template-columns: 1fr; }
  .payment-ledger-grid, .course-admin-grid { grid-template-columns: 1fr !important; gap: 8px; }
}

/* Dense but lightweight motion system; respects the user's OS setting. */
@media (prefers-reduced-motion: no-preference) {
  .fajr-motion-item { opacity: 0; transform: translateY(28px) scale(.985); filter: blur(5px); transition: opacity .72s cubic-bezier(.16,1,.3,1) var(--motion-delay,0ms), transform .85s cubic-bezier(.16,1,.3,1) var(--motion-delay,0ms), filter .7s ease var(--motion-delay,0ms); }
  .fajr-motion-item.fajr-in-view { opacity: 1; transform: none; filter: none; }
  .content-area .glass-card:hover { transform: translateY(-7px) scale(1.008); }
  .content-area .grid-cards > *:nth-child(2n) { --motion-delay: 70ms; }
  .content-area .grid-cards > *:nth-child(3n) { --motion-delay: 140ms; }
  .play-badge::before { animation: playAura 5.8s cubic-bezier(.16, 1, .3, 1) infinite; }
  .section-kicker::before { content: ""; width: 7px; height: 7px; margin-inline-end: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: kickerPulse 2.2s ease-out infinite; }
  .home-slider__slide.is-active .home-slider__media { animation: heroKenBurns 7s ease-out both; }
}

@keyframes playAura {
  0%, 18% { opacity: 0; transform: scale(.96); }
  28% { opacity: .48; }
  70%, 100% { opacity: 0; transform: scale(1.55); }
}
@keyframes kickerPulse { 70% { box-shadow: 0 0 0 9px transparent; } }
@keyframes heroKenBurns { from { transform: scale(1.035); } to { transform: scale(1); } }

/* 2026-07-09 polish: theme-aware account/forms, true single-step carousels and Fajr directories */
:where(.profile-shell) {
  --theme-primary: var(--accent, #334155);
  --theme-secondary: var(--accent-2, #6366f1);
  --theme-edge: var(--accent-3, #d7b56d);
  --theme-bg-a: color-mix(in srgb, var(--theme-primary) 24%, #03100d);
  --theme-bg-b: color-mix(in srgb, var(--theme-secondary) 18%, #071a15);
  --theme-bg-c: color-mix(in srgb, var(--theme-edge) 8%, #020b09);
  --theme-surface-a: color-mix(in srgb, var(--theme-primary) 22%, rgb(255 255 255 / .075));
  --theme-surface-b: color-mix(in srgb, var(--theme-secondary) 18%, rgb(0 0 0 / .34));
  --theme-border: color-mix(in srgb, var(--theme-edge) 44%, rgb(255 255 255 / .14));
  --theme-border-soft: color-mix(in srgb, var(--theme-secondary) 34%, rgb(255 255 255 / .11));
  --theme-text: #f7fff9;
  --theme-muted: color-mix(in srgb, var(--theme-secondary) 22%, #d6e7df);
  color: var(--theme-text);
  font-family: var(--site-font, YB, Vazirmatn, Tahoma, sans-serif);
  background:
    radial-gradient(circle at 86% 4%, color-mix(in srgb, var(--theme-secondary) 34%, transparent), transparent 30rem),
    radial-gradient(circle at 8% 92%, color-mix(in srgb, var(--theme-edge) 17%, transparent), transparent 34rem),
    linear-gradient(145deg, var(--theme-bg-a), var(--theme-bg-b) 48%, var(--theme-bg-c)) !important;
  background-attachment: fixed !important;
}

.profile-sidebar {
  border-color: color-mix(in srgb, var(--theme-edge) 18%, transparent) !important;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--theme-primary) 22%, rgb(4 15 13 / .93)), color-mix(in srgb, var(--theme-secondary) 16%, rgb(3 13 12 / .95))) !important;
}
.profile-nav a.active {
  border-color: color-mix(in srgb, var(--theme-edge) 30%, transparent) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--theme-primary) 32%, transparent), rgb(255 255 255 / .035)) !important;
}
.profile-nav a span, .profile-dashboard-grid strong, .favorite-panel-card > span {
  color: color-mix(in srgb, var(--theme-edge) 82%, white) !important;
}
.profile-dashboard-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.profile-dashboard-grid a,
.profile-form-card, .profile-welcome, .address-card, .user-order-card, .favorite-panel-card,
.profile-course-card {
  border: 1px solid var(--theme-border-soft) !important;
  color: var(--theme-text);
  background:
    linear-gradient(145deg, rgb(255 255 255 / .10), transparent 42%),
    linear-gradient(315deg, var(--theme-surface-a), var(--theme-surface-b)) !important;
  box-shadow: 0 22px 70px color-mix(in srgb, var(--theme-primary) 17%, rgb(0 0 0 / .35));
  backdrop-filter: blur(24px) saturate(145%);
}
.profile-course-grid { display: grid; gap: 16px; }
.profile-course-card {
  display: grid;
  grid-template-columns: minmax(190px, 310px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 34px);
  padding: 16px;
  border-radius: 26px;
}
.profile-course-card > img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; border-radius: 20px; }
.profile-course-card > div { min-width: 0; display: grid; align-content: center; gap: 10px; padding: 8px; }
.profile-course-card h2 { margin: 0; }
.profile-course-card p { margin: 0; color: var(--theme-muted); line-height: 1.9; }
.profile-course-meta, .profile-course-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.profile-course-meta span { padding: 6px 10px; border-radius: 999px; color: var(--theme-muted); background: rgb(255 255 255 / .07); }
.profile-course-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 14px; background: color-mix(in srgb, var(--theme-primary) 13%, rgb(255 255 255 / .08)); color: var(--theme-muted); }
.profile-course-contact strong { color: var(--theme-text); }
.profile-course-contact a { color: var(--theme-edge); font-weight: 900; text-decoration: none; }
.profile-course-actions { justify-content: space-between; margin-top: 8px; }

.dynamic-panel {
  border-color: var(--theme-border-soft) !important;
  background:
    radial-gradient(circle at 95% 0, color-mix(in srgb, var(--theme-edge) 14%, transparent), transparent 23rem),
    linear-gradient(145deg, color-mix(in srgb, var(--theme-primary) 20%, rgb(255 255 255 / .09)), color-mix(in srgb, var(--theme-secondary) 17%, rgb(0 0 0 / .28))) !important;
}
.dynamic-panel .form-section {
  margin-block: 18px;
  padding: clamp(16px, 2.5vw, 26px);
  border: 1px solid color-mix(in srgb, var(--theme-edge) 20%, rgb(255 255 255 / .10));
  border-radius: 20px;
  background: color-mix(in srgb, var(--theme-primary) 12%, rgb(255 255 255 / .035));
}
.dynamic-panel .option-list { display: grid; gap: 8px; }
.dynamic-panel .check-row {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--theme-secondary) 30%, rgb(255 255 255 / .10));
  border-radius: 13px;
  background: color-mix(in srgb, var(--theme-secondary) 11%, rgb(255 255 255 / .035));
}
.dynamic-panel input[type="radio"], .dynamic-panel input[type="checkbox"],
.profile-shell input[type="radio"], .profile-shell input[type="checkbox"] { accent-color: var(--theme-primary); }

.infinite-carousel {
  position: relative;
  width: 100%;
  overflow: visible;
  padding: 4px 2px 14px;
  touch-action: pan-y;
}
.infinite-carousel.is-active { overflow: hidden; }
.infinite-carousel__track,
.fajr-video-strip.infinite-carousel__track,
.home-course-strip.infinite-carousel__track {
  width: 100%;
  display: flex !important;
  flex-flow: row nowrap !important;
  gap: 18px;
  padding: 0 !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
  direction: ltr;
  will-change: transform;
}
.infinite-carousel__track > [data-carousel-item] {
  flex: 0 0 calc((100% - 36px) / 3);
  width: calc((100% - 36px) / 3);
  min-width: 0;
  direction: rtl;
  scroll-snap-align: none;
}
.infinite-carousel.is-static .infinite-carousel__track {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  transform: none !important;
}
.infinite-carousel.is-static .infinite-carousel__track > [data-carousel-item] {
  width: auto;
  min-width: 0;
  flex: none;
}
.infinite-carousel__nav {
  position: absolute;
  z-index: 8;
  inset-block-start: 50%;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--theme-edge) 52%, white);
  border-radius: 50%;
  color: #fff;
  background: color-mix(in srgb, var(--theme-primary) 68%, rgb(3 12 14 / .72));
  box-shadow: 0 12px 34px rgb(0 0 0 / .28);
  backdrop-filter: blur(14px);
  cursor: pointer;
  transform: translateY(-50%) !important;
}
.infinite-carousel__nav:hover { background: var(--theme-secondary); transform: translateY(-50%) scale(1.05) !important; }
.infinite-carousel__nav--forward { inset-inline-start: 10px; }
.infinite-carousel__nav--back { inset-inline-end: 10px; }

/* Keep the main hero arrows vertically centered on hover. */
.home-slider__nav:hover,
.home-slider__nav:focus-visible {
  transform: translateY(-50%) !important;
}

.campaign-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.campaign-card { display: flex; flex-direction: column; gap: 10px; }
.campaign-home-media { display: block; margin: -18px -18px 4px; overflow: hidden; }
.campaign-home-media img { width: 100%; aspect-ratio: 16 / 10; display: block; object-fit: cover; }
.campaign-card h3 { margin: 0; }
.campaign-card h3 a { color: inherit; text-decoration: none; }
.campaign-home-progress, .campaign-home-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.campaign-home-progress strong { font-size: .86rem; }
.campaign-home-actions { margin-top: auto; justify-content: flex-start; }
.campaigns-page-heading, .members-page-heading { padding-block-start: clamp(12px, 2vw, 24px); }
.campaign-catalog {
  width: min(1100px, calc(100% - (var(--page-gutter) * 2)));
  display: grid;
  gap: 22px;
  margin: 0 auto clamp(70px, 9vw, 120px);
}
.campaign-list-card {
  display: grid;
  grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr);
  gap: clamp(20px, 4vw, 46px);
  padding: 16px;
  overflow: hidden;
}
.campaign-list-media { position: relative; min-height: 330px; overflow: hidden; border-radius: 22px; }
.campaign-list-media img { width: 100%; height: 100%; display: block; object-fit: cover; }
.campaign-list-media > span { position: absolute; inset-inline-start: 14px; inset-block-end: 14px; padding: 7px 11px; border-radius: 999px; color: #fff; background: rgb(3 15 16 / .70); backdrop-filter: blur(12px); }
.campaign-list-body { min-width: 0; display: grid; align-content: center; gap: 13px; padding: clamp(8px, 2vw, 22px); }
.campaign-list-body h2 { margin: 5px 0 0; font-size: clamp(1.55rem, 3vw, 2.45rem); }
.campaign-list-body h2 a { color: inherit; text-decoration: none; }
.campaign-list-body > p { margin: 0; line-height: 2; }
.campaign-progress { height: 12px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--theme-secondary) 20%, rgb(255 255 255 / .10)); }
.campaign-progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--theme-primary), var(--theme-edge)); box-shadow: 0 0 22px color-mix(in srgb, var(--theme-edge) 38%, transparent); }
.campaign-finance-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.campaign-finance-row > div { display: grid; gap: 4px; padding: 12px; border-radius: 15px; background: rgb(255 255 255 / .06); }
.campaign-card-actions, .member-detail-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.campaign-detail-page, .member-detail-page { width: min(1160px, calc(100% - (var(--page-gutter) * 2))); margin: clamp(28px, 5vw, 62px) auto 100px; }
.campaign-detail-hero, .member-detail-hero { display: grid; grid-template-columns: minmax(300px, .86fr) minmax(0, 1.14fr); gap: clamp(24px, 5vw, 60px); align-items: center; padding: clamp(18px, 3vw, 36px); }
.campaign-detail-hero > img { width: 100%; min-height: 410px; max-height: 560px; object-fit: cover; border-radius: 24px; }
.campaign-detail-hero h1, .member-detail-hero h1 { margin: 8px 0 12px; font-size: clamp(2rem, 4.5vw, 4rem); }
.campaign-detail-hero > div { display: grid; gap: 14px; }
.campaign-deadline { width: fit-content; padding: 7px 10px; border-radius: 10px; background: rgb(255 255 255 / .06); }
.campaign-story { width: 100%; }

.member-directory {
  width: min(var(--page-width), calc(100% - (var(--page-gutter) * 2)));
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  margin: 0 auto clamp(64px, 8vw, 100px);
}
.members-page-heading { margin-bottom: clamp(18px, 2.5vw, 30px) !important; }
.members-page-heading p { max-width: 760px; line-height: 2; }
.member-directory > .tab-pills {
  position: sticky;
  z-index: 8;
  top: 96px;
  width: fit-content;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 auto 4px;
  padding: 8px;
  border: 1px solid var(--theme-border-soft);
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-primary) 34%, rgb(3 14 13 / .76));
  box-shadow: 0 16px 50px rgb(0 0 0 / .18);
  backdrop-filter: blur(18px);
}
.member-directory .tab-pills a { color: color-mix(in srgb, var(--theme-edge) 76%, white); background: rgb(255 255 255 / .06); }
.member-tab-section { scroll-margin-top: 158px; }
.member-role-section {
  padding: clamp(18px, 3vw, 32px);
  border: 1px solid var(--theme-border-soft);
  border-radius: clamp(22px, 3vw, 32px);
  background:
    radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--theme-edge) 11%, transparent), transparent 22rem),
    color-mix(in srgb, var(--theme-primary) 10%, rgb(255 255 255 / .025));
  box-shadow: 0 22px 70px color-mix(in srgb, var(--theme-primary) 14%, rgb(0 0 0 / .28));
}
.member-role-heading {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(280px, 1.3fr);
  align-items: end;
  gap: 18px;
  margin: 0 0 clamp(18px, 2.5vw, 28px) !important;
}
.member-role-heading h2 { margin: 5px 0 0; }
.member-role-heading > p { max-width: 620px; margin: 0; justify-self: end; color: var(--theme-muted); line-height: 1.9; }
.member-directory-grid {
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 20px);
  margin: 0;
}
.member-directory-grid:has(> :only-child) {
  grid-template-columns: minmax(280px, 390px);
  justify-content: center;
}
.member-directory-grid:has(> :nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(280px, 390px));
  justify-content: center;
}
.member-directory-card {
  min-height: 370px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: clamp(18px, 2.2vw, 26px);
}
.member-avatar-link { display: block; }
.member-avatar-link img { width: 146px; height: 146px; display: block; object-fit: cover; border: 4px solid color-mix(in srgb, var(--theme-edge) 36%, transparent); border-radius: 50%; box-shadow: 0 14px 38px rgb(0 0 0 / .24); }
.member-directory-card h3 { margin: 4px 0 0; text-align: center; }
.member-directory-card > span { color: color-mix(in srgb, var(--theme-edge) 76%, white); text-align: center; }
.member-directory-card p { margin: 0; color: var(--theme-muted); line-height: 1.9; text-align: center; }
.member-detail-link { margin-top: auto; }
.member-detail-back { display: inline-flex; margin-bottom: 14px; color: color-mix(in srgb, var(--theme-edge) 80%, white); text-decoration: none; }
.member-detail-hero > img { width: min(100%, 390px); aspect-ratio: 4 / 5; justify-self: center; object-fit: cover; border: 6px solid color-mix(in srgb, var(--theme-edge) 28%, transparent); border-radius: 34px; }
.member-position { color: color-mix(in srgb, var(--theme-edge) 82%, white) !important; font-size: 1.15rem; }
.member-detail-hero p { max-width: 62ch; line-height: 2; }
.member-detail-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 22px; }
.member-resume-section { width: 100%; margin: 0 !important; }
.member-resume-document { grid-column: 1 / -1; width: 100%; display: grid; gap: 16px; margin-top: 8px; }
.member-resume-document-heading { width: min(820px, 100%); display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-inline: auto; }
.member-resume-document-heading h2 { margin: 6px 0 0; }
.member-resume-image { width: min(820px, 100%); margin: 0 auto !important; padding: clamp(8px, 1.5vw, 14px); border-radius: 26px; }
.member-resume-image img { width: 100%; height: auto; max-height: none; aspect-ratio: auto; display: block; object-fit: contain; border-radius: 18px; }

/* Admin: calm, readable, theme-tinted command center */
.admin-glass-app {
  gap: 18px !important;
  padding: 18px !important;
  background:
    radial-gradient(circle at 88% -12%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 34rem),
    radial-gradient(circle at 2% 104%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 30rem),
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 5%, #f5f7fb), color-mix(in srgb, var(--accent-2) 5%, #eef2f7) 55%, color-mix(in srgb, var(--accent-3) 6%, #f7f6f3)) !important;
}
.admin-glass-app .admin-sidebar {
  top: 18px !important;
  height: calc(100svh - 36px) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 12%, #e1e6ee) !important;
  border-radius: 24px !important;
  background: rgb(255 255 255 / .92) !important;
  box-shadow: 0 20px 60px rgb(31 45 78 / .10) !important;
}
.admin-template-panel {
  border-color: color-mix(in srgb, var(--accent) 10%, #e3e8f0) !important;
  border-radius: 22px !important;
  background: rgb(255 255 255 / .88) !important;
  box-shadow: 0 14px 40px rgb(31 45 78 / .08) !important;
}
.admin-topbar { min-height: 76px; }
.admin-glass-app .admin-content { max-width: 1500px; margin-inline: auto; }
.admin-glass-app .admin-content > .page-header,
.admin-glass-app .admin-content > .admin-section,
.admin-glass-app .admin-content > .glass-card,
.admin-glass-app .admin-content > .notice-box { width: 100%; }
.admin-glass-app .admin-content :where(.glass-card,.admin-section,.content-band,.liquid-panel,.empty-state) {
  border-color: color-mix(in srgb, var(--accent) 10%, #e3e8f0) !important;
  background: rgb(255 255 255 / .88) !important;
  box-shadow: 0 14px 40px rgb(31 45 78 / .075) !important;
}
.admin-glass-app .admin-content :where(.input,input.input,textarea.input,select.input,.textarea) {
  border-color: color-mix(in srgb, var(--accent) 10%, #dce2eb) !important;
  background: #fbfcfe !important;
}
.admin-glass-app .sidebar-nav a { min-height: 43px; border-radius: 12px; }
.admin-glass-app .sidebar-nav a.active {
  box-shadow: inset -3px 0 var(--accent), 0 5px 16px color-mix(in srgb, var(--accent) 10%, transparent) !important;
}
.admin-sidebar-status {
  border-color: color-mix(in srgb, var(--accent) 20%, #dfe8e3) !important;
  background: color-mix(in srgb, var(--accent) 7%, white) !important;
}
.course-admin-grid { grid-template-columns: minmax(210px, 1.25fr) .5fr .65fr .55fr .7fr .6fr minmax(270px, 1.15fr); }
.campaign-admin-grid { grid-template-columns: minmax(220px, 1.35fr) .85fr .65fr 1fr .55fr minmax(220px, .95fr); }
.campaign-participation-grid { grid-template-columns: 1.25fr .75fr .7fr .55fr 1fr .7fr; }
.campaign-participation-grid code,
.campaign-admin-grid a.ltr { overflow-wrap: anywhere; font-size: .76rem; }
.registration-count-link { width: fit-content; color: color-mix(in srgb, var(--accent) 76%, #1d4ed8); font-weight: 900; text-decoration: none; }
.admin-registration-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.admin-registration-summary article { display: grid; gap: 5px; padding: 20px; border: 1px solid color-mix(in srgb, var(--accent) 10%, #e2e8f0); border-radius: 20px; background: rgb(255 255 255 / .88); box-shadow: 0 12px 34px rgb(31 45 78 / .07); }
.admin-registration-summary strong { color: var(--accent) !important; font-size: 1.9rem; }
.course-registration-grid { grid-template-columns: 1.15fr 1fr .95fr .8fr .65fr 1fr; }
.course-registration-grid code { overflow-wrap: anywhere; color: #556176; font-size: .76rem; }

@media (max-width: 1180px) {
  .profile-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-admin-grid, .course-registration-grid, .campaign-admin-grid, .campaign-participation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 1050px) {
  .infinite-carousel__track > [data-carousel-item] {
    flex-basis: calc((100% - 18px) / 2);
    width: calc((100% - 18px) / 2);
  }
  .infinite-carousel.is-static .infinite-carousel__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .infinite-carousel.is-static .infinite-carousel__track > [data-carousel-item] { width: auto; }
  .member-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member-directory-grid:has(> :only-child) { grid-template-columns: minmax(280px, 390px); }
}

@media (max-width: 850px) {
  .campaign-list-card, .campaign-detail-hero, .member-detail-hero { grid-template-columns: 1fr; }
  .campaign-list-media { min-height: 280px; }
  .member-detail-content { grid-template-columns: 1fr; }
  .member-directory > .tab-pills { top: 82px; border-radius: 20px; }
  .member-role-heading { grid-template-columns: 1fr; align-items: start; }
  .member-role-heading > p { justify-self: start; }
  .member-detail-hero > div { order: -1; }
  .member-detail-hero > img { width: min(82vw, 340px); }
}

@media (max-width: 680px) {
  .infinite-carousel__track > [data-carousel-item] {
    flex-basis: 100%;
    width: 100%;
  }
  .infinite-carousel.is-static .infinite-carousel__track { grid-template-columns: 1fr; }
  .infinite-carousel.is-static .infinite-carousel__track > [data-carousel-item] { width: auto; }
  .profile-dashboard-grid, .admin-registration-summary { grid-template-columns: 1fr; }
  .profile-course-card { grid-template-columns: 1fr; }
  .profile-course-card > img { min-height: 190px; }
  .campaign-finance-row { grid-template-columns: 1fr; }
  .campaign-list-card { padding: 10px; border-radius: 22px; }
  .campaign-list-media { min-height: 230px; }
  .campaign-card-actions > * { flex: 1 1 auto; }
  .infinite-carousel__nav { width: 38px; height: 38px; }
  .course-admin-grid, .course-registration-grid, .campaign-admin-grid, .campaign-participation-grid { grid-template-columns: 1fr !important; }
  .members-page-heading { margin-top: 24px !important; }
  .member-directory { width: min(100% - 24px, var(--page-width)); }
  .member-directory > .tab-pills { position: static; width: 100%; justify-content: center; }
  .member-role-section { padding: 16px; }
  .member-directory-grid { grid-template-columns: 1fr; }
  .member-directory-card { min-height: 340px; }
  .member-resume-document-heading { display: grid; align-items: start; }
}

/* Final polish: video previews, dynamic theme surfaces and admin spacing. */
.fajr-report-preview {
  isolation: isolate;
  background: color-mix(in srgb, var(--theme-primary, var(--accent)) 32%, rgb(2 9 12));
}

.fajr-report-preview video,
.fajr-report-preview > img {
  position: absolute;
  z-index: 0;
  inset: 0;
}

.fajr-report-preview.has-preview-poster::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background-image: var(--preview-poster);
  background-position: center;
  background-size: cover;
  opacity: 1;
  transform: scale(1);
  transition: opacity .36s ease, transform .72s cubic-bezier(.16,1,.3,1), filter .36s ease;
  pointer-events: none;
}

.fajr-report-preview.has-preview-poster.is-previewing::before {
  opacity: 0;
  transform: scale(1.025);
}

.fajr-report-preview::after {
  z-index: 2;
  pointer-events: none;
}

.fajr-report-preview.is-preview-switching video {
  opacity: .24;
  transform: scale(1.065);
  filter: blur(5px) saturate(1.18) contrast(1.04);
}

.fajr-report-preview.is-previewing video {
  opacity: 1;
}

.fajr-report-preview .play-badge,
.fajr-report-preview .featured-badge,
.fajr-report-preview b {
  z-index: 3;
}

.video-preview-link {
  z-index: 4;
}

.preview-sound {
  /* Keep the audio action reachable before hover/touch preview starts. When it
     was non-interactive, the full-card link underneath could receive the tap. */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px) scale(.94);
  transition: opacity .2s ease, transform .2s ease, border-color .2s ease, background .2s ease;
}

.fajr-report-preview:hover .preview-sound,
.fajr-report-preview.is-previewing:hover .preview-sound,
.fajr-report-preview.is-previewing .preview-sound:focus-visible,
.fajr-report-preview.is-preview-mobile.is-previewing .preview-sound {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.preview-sound svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.preview-sound__icon--on,
.preview-sound.is-muted .preview-sound__icon--off {
  display: block;
}

.preview-sound__icon--off,
.preview-sound.is-muted .preview-sound__icon--on {
  display: none;
}

.preview-sound.is-audible {
  color: color-mix(in srgb, var(--theme-edge, var(--accent-3)) 82%, white);
  border-color: color-mix(in srgb, var(--theme-edge, var(--accent-3)) 48%, white);
}

@media (hover: none), (pointer: coarse) {
  .preview-sound,
  .fajr-report-preview.is-previewing .preview-sound {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}

.fajr-featured-video-box,
.report-detail-hero {
  border-color: color-mix(in srgb, var(--theme-edge, var(--accent-3)) 26%, rgb(255 255 255 / .15)) !important;
  background:
    radial-gradient(circle at 88% 0, color-mix(in srgb, var(--theme-edge, var(--accent-3)) 16%, transparent), transparent 24rem),
    linear-gradient(135deg,
      color-mix(in srgb, var(--theme-primary, var(--accent)) 58%, rgb(4 13 16 / .88)),
      color-mix(in srgb, var(--theme-secondary, var(--accent-2)) 45%, rgb(3 12 15 / .78))) !important;
}

.impact-band {
  border-color: var(--theme-border-soft, color-mix(in srgb, var(--accent-2) 30%, transparent)) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--theme-primary, var(--accent)) 26%, rgb(255 255 255 / .055)),
      color-mix(in srgb, var(--theme-secondary, var(--accent-2)) 18%, rgb(0 0 0 / .24))) !important;
}

.impact-band > div {
  border-color: var(--theme-border-soft, color-mix(in srgb, var(--accent-2) 30%, transparent)) !important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--theme-edge, var(--accent-3)) 8%, rgb(255 255 255 / .07)),
      color-mix(in srgb, var(--theme-primary, var(--accent)) 16%, rgb(0 0 0 / .20))) !important;
}

.fajr-video-card,
.reports-archive-grid .fajr-video-card,
.report-card,
.need-registration-panel,
.partner-mini-card,
.campaign-card,
.course-card,
.member-card {
  border-color: var(--theme-border-soft, color-mix(in srgb, var(--accent-2) 28%, transparent)) !important;
  background:
    linear-gradient(145deg, rgb(255 255 255 / .10), transparent 42%),
    linear-gradient(315deg,
      color-mix(in srgb, var(--theme-primary, var(--accent)) 18%, rgb(255 255 255 / .06)),
      color-mix(in srgb, var(--theme-secondary, var(--accent-2)) 16%, rgb(0 0 0 / .24))) !important;
}

/* Scoped home refinements. */
.trust-metrics {
  position: relative;
  grid-template-columns: minmax(250px, .78fr) minmax(0, 1.22fr) !important;
  gap: clamp(14px, 2vw, 20px) !important;
  width: min(1180px, calc(100% - 32px)) !important;
  margin: clamp(28px, 4vw, 48px) auto !important;
  padding: clamp(12px, 1.8vw, 18px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--theme-edge, var(--accent-3)) 34%, rgb(255 255 255 / .12)) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--theme-edge, var(--accent-3)) 18%, transparent), transparent 20rem),
    linear-gradient(135deg,
      color-mix(in srgb, var(--theme-primary, var(--accent)) 48%, #111827),
      color-mix(in srgb, var(--theme-secondary, var(--accent-2)) 42%, #0f172a)) !important;
  box-shadow: 0 28px 90px rgb(0 0 0 / .22), inset 0 1px rgb(255 255 255 / .10);
}

.trust-metrics::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(255 255 255 / .055) 1px, transparent 1px),
    linear-gradient(0deg, rgb(255 255 255 / .045) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 78%, transparent);
}

.trust-metrics > .trust-metrics__intro,
.trust-metrics > .trust-metrics__cards {
  position: relative;
  min-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.trust-metrics > .trust-metrics__intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: clamp(18px, 3vw, 30px) !important;
}

.trust-metrics__intro h2 {
  margin: 0;
  color: color-mix(in srgb, var(--theme-edge, var(--accent-3)) 18%, #fff);
  font-size: clamp(1.45rem, 2.8vw, 2.35rem);
}

.trust-metrics__intro p {
  margin: 0;
  max-width: 42ch;
  color: color-mix(in srgb, var(--theme-secondary, var(--accent-2)) 12%, rgb(246 248 252 / .82));
  line-height: 2;
}

.trust-metrics > .trust-metrics__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 0 !important;
}

.trust-stat-card {
  position: relative;
  display: grid;
  align-content: space-between;
  min-height: 170px;
  padding: clamp(16px, 2vw, 22px);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / .16);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / .12), rgb(255 255 255 / .045)),
    color-mix(in srgb, var(--theme-primary, var(--accent)) 16%, rgb(0 0 0 / .18));
  box-shadow: inset 0 1px rgb(255 255 255 / .12), 0 16px 42px rgb(0 0 0 / .16);
}

.trust-stat-card::after {
  content: "";
  position: absolute;
  inset-inline: 18px;
  inset-block-end: 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--theme-edge, var(--accent-3)), rgb(255 255 255 / .34));
}

.trust-stat-card small {
  color: color-mix(in srgb, var(--theme-edge, var(--accent-3)) 72%, #fff);
  font-weight: 800;
}

.trust-stat-card strong {
  color: #fff8e8 !important;
  font-size: clamp(2.2rem, 4vw, 4rem) !important;
  line-height: 1;
}

.trust-stat-card span {
  color: rgb(231 242 236 / .72) !important;
  font-size: .86rem;
}

.cooperation-preview {
  margin-block: clamp(56px, 7vw, 92px) !important;
}

.cooperation-preview .section-title {
  margin-bottom: clamp(18px, 3vw, 30px);
}

.cooperation-grid {
  gap: clamp(18px, 3vw, 30px);
  align-items: stretch;
}

.partner-preview-grid {
  gap: clamp(14px, 2.2vw, 20px);
}

.partner-mini-card {
  position: relative;
  min-height: 118px;
  padding: clamp(15px, 2vw, 20px);
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 16px 42px rgb(0 0 0 / .13), inset 0 1px rgb(255 255 255 / .10);
}

.partner-mini-card::after {
  content: "";
  position: absolute;
  inset-inline: 18px;
  inset-block-end: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--theme-edge, var(--accent-3)), transparent);
}

.partner-mini-card:hover {
  transform: translateY(-4px);
}

.partner-mini-card img {
  width: 78px;
  height: 78px;
  flex-basis: 78px;
  border-radius: 20px;
  box-shadow: 0 12px 28px rgb(0 0 0 / .16);
}

@media (max-width: 980px) {
  .trust-metrics {
    grid-template-columns: 1fr !important;
  }

  .trust-metrics > .trust-metrics__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .trust-metrics {
    width: calc(100% - 18px) !important;
    margin-block: 24px !important;
    padding: 10px;
  }

  .trust-metrics > .trust-metrics__cards {
    grid-template-columns: 1fr;
  }

  .trust-stat-card {
    min-height: 128px;
  }
}

.video-thumb,
.fajr-player-shell {
  background: color-mix(in srgb, var(--theme-primary, var(--accent)) 28%, rgb(2 8 12)) !important;
}

.dynamic-panel,
.form-section,
.comment-form-wrap,
.donation-panel,
.donation-form,
.donation-supporters-panel,
.response-display-panel {
  border-color: var(--theme-border-soft, color-mix(in srgb, var(--accent-2) 30%, transparent)) !important;
  background:
    radial-gradient(circle at 96% 0, color-mix(in srgb, var(--theme-edge, var(--accent-3)) 12%, transparent), transparent 22rem),
    linear-gradient(145deg,
      color-mix(in srgb, var(--theme-primary, var(--accent)) 18%, rgb(255 255 255 / .08)),
      color-mix(in srgb, var(--theme-secondary, var(--accent-2)) 14%, rgb(0 0 0 / .26))) !important;
}

.donation-fixed,
.dynamic-panel .check-row,
.progress-wrap {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--theme-edge, var(--accent-3)) 17%, rgb(255 255 255 / .06)),
      color-mix(in srgb, var(--theme-primary, var(--accent)) 14%, rgb(0 0 0 / .16))) !important;
}

.progress-wrap span {
  background: linear-gradient(90deg, var(--theme-primary, var(--accent)), var(--theme-edge, var(--accent-3))) !important;
}

.admin-glass-app {
  --admin-ink: color-mix(in srgb, var(--accent) 18%, #172033);
  --admin-muted: color-mix(in srgb, var(--accent-2) 20%, #68758b);
  gap: 18px !important;
  padding: 18px !important;
  overflow-x: clip;
  background:
    radial-gradient(circle at 86% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 34rem),
    radial-gradient(circle at 2% 108%, color-mix(in srgb, var(--accent-2) 15%, transparent), transparent 30rem),
    linear-gradient(145deg,
      color-mix(in srgb, var(--accent) 6%, #f8fafc),
      color-mix(in srgb, var(--accent-2) 5%, #f5f7fb) 54%,
      color-mix(in srgb, var(--accent-3) 7%, #fbfaf7)) !important;
}

.admin-glass-app .admin-sidebar {
  min-height: 0;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--accent) 14%, #dfe6ef) !important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--accent) 5%, rgb(255 255 255 / .95)),
      color-mix(in srgb, var(--accent-2) 4%, rgb(255 255 255 / .90))) !important;
}

.admin-glass-app .sidebar-nav {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.admin-glass-app .sidebar-nav a > svg,
.admin-glass-app .sidebar-button > svg,
.admin-quick-link > svg,
.admin-avatar > svg,
.admin-menu-search > svg {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-glass-app .sidebar-nav a > svg,
.admin-glass-app .sidebar-button > svg {
  width: 34px;
  height: 34px;
  padding: 7px;
  border-radius: 11px;
  color: color-mix(in srgb, var(--accent) 32%, #647087);
  background: color-mix(in srgb, var(--accent) 6%, #f1f4f9);
  transition: .3s ease;
}

.admin-menu-search {
  border-color: color-mix(in srgb, var(--accent) 12%, #e2e8f0) !important;
  color: color-mix(in srgb, var(--accent) 34%, #7b879b) !important;
  background: color-mix(in srgb, var(--accent-2) 5%, #f8fafc) !important;
}

.admin-glass-app .sidebar-nav a:hover {
  color: color-mix(in srgb, var(--accent) 82%, #1d4ed8) !important;
  background: color-mix(in srgb, var(--accent) 5%, white) !important;
}

.admin-glass-app .sidebar-nav a.active {
  color: color-mix(in srgb, var(--accent) 78%, #1d4ed8) !important;
  background:
    linear-gradient(270deg,
      color-mix(in srgb, var(--accent) 12%, white),
      color-mix(in srgb, var(--accent-2) 9%, white)) !important;
}

.admin-glass-app .sidebar-nav a.active > svg {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 7px 18px color-mix(in srgb, var(--accent-2) 25%, transparent);
}

.admin-template-panel,
.admin-glass-app .admin-content :where(.glass-card,.admin-section,.content-band,.liquid-panel,.empty-state),
.admin-metric-card,
.admin-registration-summary article {
  border-color: color-mix(in srgb, var(--accent) 11%, #e1e7f0) !important;
  color: var(--admin-ink) !important;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent-3) 4%, rgb(255 255 255 / .94)), rgb(255 255 255 / .82)) !important;
  box-shadow: 0 14px 40px color-mix(in srgb, var(--accent) 10%, rgb(31 45 78 / .08)) !important;
}

.admin-glass-app .admin-content :where(.input,input.input,textarea.input,select.input,.textarea) {
  border-color: color-mix(in srgb, var(--accent) 12%, #dce2eb) !important;
  background: color-mix(in srgb, var(--accent-2) 3%, #fbfcfe) !important;
}

.admin-sidebar-status {
  border-color: color-mix(in srgb, var(--accent) 18%, #dfe8e3) !important;
  background: color-mix(in srgb, var(--accent) 7%, white) !important;
}

.admin-sidebar-status > i {
  background: var(--accent-2) !important;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-2) 15%, transparent) !important;
}

.admin-sidebar-status strong,
.admin-registration-summary strong {
  color: var(--accent) !important;
}

.admin-sidebar-status small,
.admin-glass-app .admin-content :where(p,small,.muted,.field-hint),
.course-registration-grid code,
.payment-ip {
  color: var(--admin-muted) !important;
}

.admin-metric-card.blue { color: color-mix(in srgb, var(--accent) 72%, #2563eb) !important; }
.admin-metric-card.green { color: var(--accent-2) !important; }
.admin-metric-card.orange { color: var(--accent-3) !important; }
.admin-metric-card.purple { color: color-mix(in srgb, var(--accent) 44%, var(--accent-3)) !important; }

.payment-source-chip,
.registration-count-link {
  color: color-mix(in srgb, var(--accent) 78%, #1d4ed8) !important;
  background: color-mix(in srgb, var(--accent) 8%, #f8fafc) !important;
}

.admin-settings-page {
  width: min(100%, 1500px);
  display: grid;
  gap: clamp(14px, 2vw, 22px);
  margin-inline: auto;
  align-content: start;
}

.admin-settings-page > :where(.page-header,.admin-page-header,.admin-help,.admin-section,.glass-card,.admin-grid,.notice-box) {
  margin-block: 0 !important;
}

.admin-settings-page .admin-grid.two-columns {
  align-items: start;
  gap: clamp(14px, 2vw, 22px);
}

@keyframes adminPulse {
  50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent-2) 0%, transparent); }
}

/* Admin and dynamic surfaces reset: theme-driven, scrollable, denser where it matters. */
.admin-shell.admin-glass-app {
  --theme-primary: var(--accent, #334155);
  --theme-secondary: var(--accent-2, #6366f1);
  --theme-edge: var(--accent-3, #d7b56d);
  --admin-ink: color-mix(in srgb, var(--theme-primary) 20%, #182033);
  --admin-muted: color-mix(in srgb, var(--theme-secondary) 18%, #687386);
  --admin-line: color-mix(in srgb, var(--theme-primary) 13%, #dde5ef);
  --admin-surface: color-mix(in srgb, var(--theme-edge) 4%, rgb(255 255 255 / .94));
  --admin-surface-2: color-mix(in srgb, var(--theme-secondary) 4%, rgb(248 250 252 / .94));
  width: 100%;
  min-height: 100svh;
  margin: 0;
  padding: clamp(10px, 1.5vw, 18px) !important;
  grid-template-columns: minmax(248px, 286px) minmax(0, 1fr);
  gap: clamp(10px, 1.4vw, 18px) !important;
  color: var(--admin-ink);
  background:
    radial-gradient(circle at 84% -12%, color-mix(in srgb, var(--theme-primary) 16%, transparent), transparent 31rem),
    radial-gradient(circle at 6% 108%, color-mix(in srgb, var(--theme-secondary) 13%, transparent), transparent 29rem),
    linear-gradient(145deg,
      color-mix(in srgb, var(--theme-primary) 5%, #f8fafc),
      color-mix(in srgb, var(--theme-secondary) 4%, #f5f7fb) 54%,
      color-mix(in srgb, var(--theme-edge) 6%, #fbfaf7)) !important;
}

.admin-glass-app .admin-main-column {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(10px, 1.4vw, 16px);
}

.admin-glass-app .admin-sidebar {
  position: sticky;
  inset-block-start: clamp(10px, 1.5vw, 18px) !important;
  align-self: start;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 12px;
  height: calc(100svh - (clamp(10px, 1.5vw, 18px) * 2)) !important;
  min-height: 0;
  padding: 14px !important;
  overflow: hidden !important;
  border: 1px solid var(--admin-line) !important;
  border-radius: 22px !important;
  color: var(--admin-ink) !important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--theme-primary) 5%, rgb(255 255 255 / .96)),
      color-mix(in srgb, var(--theme-secondary) 4%, rgb(255 255 255 / .91))) !important;
  box-shadow: 0 18px 48px color-mix(in srgb, var(--theme-primary) 10%, rgb(31 45 78 / .10)) !important;
}

.admin-glass-app .sidebar-brand {
  min-height: 58px;
  margin: 0 !important;
  padding: 8px 8px 12px !important;
  border-bottom: 1px solid var(--admin-line) !important;
}

.admin-glass-app .sidebar-brand small,
.admin-glass-app .sidebar-group > span,
.admin-glass-app .admin-sidebar-status small {
  color: var(--admin-muted) !important;
}

.admin-glass-app .admin-menu-search {
  min-height: 44px;
  margin: 0;
  border-color: var(--admin-line) !important;
  color: color-mix(in srgb, var(--theme-primary) 42%, #6d788b) !important;
  background: var(--admin-surface-2) !important;
}

.admin-glass-app .admin-menu-search input {
  min-width: 0;
  color: var(--admin-ink) !important;
}

.admin-glass-app .sidebar-nav {
  min-height: 0;
  max-height: none !important;
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 2px 0 8px 4px;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-color: color-mix(in srgb, var(--theme-primary) 42%, #aeb9c8) transparent;
}

.admin-glass-app .sidebar-nav::-webkit-scrollbar {
  width: 9px;
}

.admin-glass-app .sidebar-nav::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-primary) 36%, #bdc7d5);
  background-clip: content-box;
}

.admin-glass-app .sidebar-group {
  gap: 4px;
  margin: 0 !important;
  padding: 0 0 9px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-primary) 9%, #e7edf5) !important;
}

.admin-glass-app .sidebar-group > span {
  margin: 5px 8px 4px !important;
  padding: 0;
  font-size: .72rem;
}

.admin-glass-app .sidebar-nav a,
.admin-glass-app .sidebar-button {
  min-height: 39px;
  padding: 6px 8px;
  border-radius: 12px !important;
  color: color-mix(in srgb, var(--theme-primary) 30%, #4b5870) !important;
  background: transparent !important;
}

.admin-glass-app .sidebar-nav a > svg,
.admin-glass-app .sidebar-button > svg {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  padding: 7px;
  border-radius: 10px;
  color: color-mix(in srgb, var(--theme-primary) 38%, #667286);
  background: color-mix(in srgb, var(--theme-primary) 6%, #f0f4f8);
}

.admin-glass-app .sidebar-nav a:hover,
.admin-glass-app .sidebar-button:hover,
.admin-glass-app .sidebar-nav a.active {
  color: color-mix(in srgb, var(--theme-primary) 82%, #1d4ed8) !important;
  border-color: color-mix(in srgb, var(--theme-primary) 14%, #dbe4ef) !important;
  background:
    linear-gradient(270deg,
      color-mix(in srgb, var(--theme-primary) 11%, white),
      color-mix(in srgb, var(--theme-secondary) 8%, white)) !important;
}

.admin-glass-app .sidebar-nav a.active {
  box-shadow: inset -3px 0 var(--theme-primary), 0 6px 18px color-mix(in srgb, var(--theme-primary) 10%, transparent) !important;
}

.admin-glass-app .sidebar-nav a.active > svg {
  color: #fff;
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
  box-shadow: 0 7px 18px color-mix(in srgb, var(--theme-secondary) 25%, transparent);
}

.admin-glass-app .admin-sidebar-status {
  min-height: 54px;
  margin: 0;
  border-color: var(--admin-line) !important;
  color: var(--admin-ink) !important;
  background: color-mix(in srgb, var(--theme-primary) 6%, white) !important;
}

.admin-glass-app .admin-sidebar-status > i {
  background: var(--theme-secondary) !important;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--theme-secondary) 15%, transparent) !important;
}

.admin-glass-app .admin-topbar {
  position: sticky;
  inset-block-start: clamp(10px, 1.5vw, 18px);
  z-index: 30;
  min-height: 70px;
  color: var(--admin-ink);
  backdrop-filter: blur(18px) saturate(150%);
}

.admin-glass-app .admin-content {
  width: min(100%, 1520px);
  max-width: 1520px;
  margin-inline: auto;
  padding: 0 0 clamp(34px, 5vw, 72px) !important;
}

.admin-glass-app .admin-page-header,
.admin-glass-app .page-header.admin-page-header {
  min-height: auto;
  margin: 0 0 clamp(12px, 1.8vw, 22px) !important;
  padding: clamp(10px, 1.6vw, 18px) 0 clamp(12px, 1.7vw, 18px) !important;
  border-bottom-color: var(--admin-line) !important;
}

.admin-glass-app .admin-page-header h1 {
  margin: 4px 0 5px;
  color: var(--admin-ink);
  font-size: clamp(1.65rem, 2.2vw, 2.25rem);
}

.admin-glass-app .admin-page-header p {
  max-width: 880px;
  margin: 0;
  color: var(--admin-muted) !important;
}

.admin-glass-app .admin-template-panel,
.admin-glass-app .admin-help,
.admin-glass-app .admin-content :where(.glass-card,.admin-section,.content-band,.liquid-panel,.empty-state),
.admin-glass-app .admin-metric-card,
.admin-glass-app .admin-registration-summary article,
.admin-glass-app .table-row {
  border-color: var(--admin-line) !important;
  color: var(--admin-ink) !important;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--theme-edge) 4%, rgb(255 255 255 / .94)), rgb(255 255 255 / .84)) !important;
  box-shadow: 0 13px 36px color-mix(in srgb, var(--theme-primary) 9%, rgb(31 45 78 / .08)) !important;
}

.admin-glass-app .admin-section,
.admin-glass-app .glass-card.p-6 {
  padding: clamp(16px, 2vw, 24px) !important;
}

.admin-glass-app .section-title {
  margin-bottom: clamp(12px, 1.5vw, 18px);
}

.admin-glass-app .form-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(10px, 1.35vw, 16px);
  margin: clamp(12px, 1.4vw, 18px) 0;
}

.admin-glass-app .form-grid.two {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 285px), 1fr));
}

.admin-glass-app .form-grid .full,
.admin-glass-app .form-grid > .full {
  grid-column: 1 / -1;
}

.admin-glass-app .form-grid label,
.admin-glass-app .form-grid .full {
  gap: 6px;
  min-width: 0;
}

.admin-glass-app .form-grid label > span,
.admin-glass-app .form-grid .full > span,
.admin-glass-app label > span {
  color: color-mix(in srgb, var(--theme-primary) 30%, #38465c) !important;
  font-weight: 850;
}

.admin-glass-app .check-row {
  min-height: 46px;
  align-content: center;
  padding: 10px 12px;
  border: 1px solid var(--admin-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--theme-primary) 4%, #fff) !important;
}

.admin-glass-app .admin-content :where(.input,input.input,textarea.input,select.input,.textarea) {
  min-height: 44px;
  border-color: color-mix(in srgb, var(--theme-primary) 13%, #d9e1ec) !important;
  color: var(--admin-ink) !important;
  background: color-mix(in srgb, var(--theme-secondary) 3%, #fbfcfe) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .72);
}

.admin-glass-app .admin-content textarea.input,
.admin-glass-app .admin-content .textarea {
  min-height: 108px;
}

.admin-glass-app .btn-primary {
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary)) !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--theme-primary) 24%, transparent) !important;
}

.admin-glass-app .btn-secondary {
  color: color-mix(in srgb, var(--theme-primary) 76%, #243b63) !important;
  border-color: color-mix(in srgb, var(--theme-primary) 18%, #d9e1eb) !important;
  background: color-mix(in srgb, var(--theme-primary) 5%, #fff) !important;
}

.admin-glass-app .status-chip.published,
.admin-glass-app .admin-metric-card.green {
  color: color-mix(in srgb, var(--theme-secondary) 72%, #155e75) !important;
  background: color-mix(in srgb, var(--theme-secondary) 9%, #fff) !important;
}

.admin-glass-app .admin-metric-card.blue {
  color: color-mix(in srgb, var(--theme-primary) 70%, #2563eb) !important;
}

.admin-glass-app .admin-metric-card.orange,
.admin-glass-app .admin-metric-card.purple {
  color: color-mix(in srgb, var(--theme-edge) 76%, #7c3aed) !important;
}

.admin-settings-page {
  width: min(100%, 1520px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(12px, 1.7vw, 22px);
  margin-inline: auto;
  align-content: start;
}

.admin-settings-page > :where(.page-header,.admin-page-header,.admin-help,.admin-section,.glass-card,.admin-grid,.notice-box) {
  margin-block: 0 !important;
}

.admin-settings-page .admin-help {
  margin: 0 !important;
}

.admin-settings-page .identity-settings,
.admin-settings-page .footer-settings,
.admin-settings-page .seo-settings {
  display: grid;
  gap: clamp(12px, 1.6vw, 18px);
}

.admin-settings-page .settings-split-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .72fr);
  gap: clamp(12px, 1.7vw, 22px);
  align-items: start;
}

.admin-settings-page .footer-symbol-editor-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}

.admin-settings-page .social-editor-row {
  grid-template-columns: minmax(180px, .8fr) minmax(220px, 1fr) auto;
}

.admin-settings-page .seo-settings .form-grid.two {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.admin-settings-page .code-textarea {
  min-height: 160px !important;
}

.site-shell :where(.dynamic-panel,.form-section,.comment-form-wrap,.donation-panel,.donation-form,.donation-supporters-panel,.response-display-panel,.survey-panel,.survey-form,.survey-card,.donation-box-panel,.need-registration-panel) {
  --surface-primary: var(--theme-primary, var(--accent, #334155));
  --surface-secondary: var(--theme-secondary, var(--accent-2, #6366f1));
  --surface-edge: var(--theme-edge, var(--accent-3, #d7b56d));
  border-color: color-mix(in srgb, var(--surface-edge) 28%, rgb(255 255 255 / .14)) !important;
  background:
    radial-gradient(circle at 96% 0, color-mix(in srgb, var(--surface-edge) 12%, transparent), transparent 22rem),
    linear-gradient(145deg,
      color-mix(in srgb, var(--surface-primary) 16%, rgb(255 255 255 / .08)),
      color-mix(in srgb, var(--surface-secondary) 13%, rgb(0 0 0 / .26))) !important;
}

.site-shell :where(.dynamic-panel,.form-section,.comment-form-wrap,.donation-panel,.donation-form,.survey-panel,.survey-form) :where(.input,input.input,textarea.input,select.input,.textarea) {
  border-color: color-mix(in srgb, var(--theme-edge, var(--accent-3)) 24%, rgb(255 255 255 / .14)) !important;
  background:
    linear-gradient(145deg, rgb(255 255 255 / .07), transparent),
    color-mix(in srgb, var(--theme-primary, var(--accent)) 16%, rgb(0 10 12 / .72)) !important;
}

.site-shell :where(.donation-fixed,.dynamic-panel .check-row,.survey-option,.survey-choice,.progress-wrap,.form-response-card) {
  border-color: color-mix(in srgb, var(--theme-edge, var(--accent-3)) 22%, rgb(255 255 255 / .12)) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--theme-edge, var(--accent-3)) 14%, rgb(255 255 255 / .06)),
      color-mix(in srgb, var(--theme-primary, var(--accent)) 11%, rgb(0 0 0 / .16))) !important;
}

@media (max-width: 1120px) {
  .admin-shell.admin-glass-app {
    grid-template-columns: 1fr;
  }

  .admin-glass-app .admin-sidebar {
    position: fixed;
    inset-block: 10px;
    inset-inline-start: 10px;
    width: min(320px, calc(100vw - 28px));
    height: calc(100svh - 20px) !important;
    transform: translateX(110%);
    transition: transform var(--motion-soft) !important;
  }

  .admin-glass-app .admin-sidebar.open {
    transform: none;
  }

  .admin-glass-app .admin-topbar {
    inset-block-start: 10px;
  }
}

@media (max-width: 860px) {
  .admin-settings-page .settings-split-grid {
    grid-template-columns: 1fr;
  }

  .admin-settings-page .social-editor-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .admin-shell.admin-glass-app {
    padding: 10px !important;
  }

  .admin-glass-app .admin-section,
  .admin-glass-app .glass-card.p-6 {
    padding: 14px !important;
  }

  .admin-glass-app .form-grid,
  .admin-glass-app .form-grid.two {
    grid-template-columns: 1fr;
  }
}

/* Final color pass for leftover fixed green panels. */
.admin-glass-app .admin-help {
  border-color: color-mix(in srgb, var(--theme-edge) 18%, #d7deea) !important;
  background:
    radial-gradient(circle at 96% 0, color-mix(in srgb, var(--theme-edge) 9%, transparent), transparent 18rem),
    linear-gradient(145deg, color-mix(in srgb, var(--theme-primary) 5%, #fff), color-mix(in srgb, var(--theme-secondary) 4%, #f8fbff)) !important;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--theme-primary) 9%, rgb(33 48 79 / .08)) !important;
}

.admin-glass-app .admin-help-toggle {
  min-height: 48px;
  color: var(--admin-ink) !important;
  border: 0 !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--theme-primary) 8%, #fff), color-mix(in srgb, var(--theme-secondary) 7%, #fff)) !important;
}

.admin-glass-app .admin-help-toggle span:last-child {
  color: color-mix(in srgb, var(--theme-primary) 72%, #334155) !important;
}

.admin-glass-app .admin-help-body {
  color: var(--admin-ink) !important;
  background: color-mix(in srgb, var(--theme-secondary) 3%, #fff) !important;
}

.site-shell :where(.dynamic-panel,.form-section,.comment-form-wrap,.donation-panel,.donation-form,.donation-supporters-panel,.response-display-panel,.survey-panel,.survey-form,.survey-card,.donation-box-panel,.need-registration-panel,.home-report-card,.trust-card,.trust-panel,.impact-card,.support-card,.pledge-card,.campaign-card,.contact-card,.auth-card) {
  border-color: color-mix(in srgb, var(--theme-edge, var(--accent-3)) 24%, rgb(255 255 255 / .14)) !important;
  background:
    radial-gradient(circle at 96% 0, color-mix(in srgb, var(--theme-edge, var(--accent-3)) 12%, transparent), transparent 22rem),
    linear-gradient(145deg,
      color-mix(in srgb, var(--theme-primary, var(--accent)) 14%, rgb(255 255 255 / .08)),
      color-mix(in srgb, var(--theme-secondary, var(--accent-2)) 11%, rgb(0 0 0 / .22))) !important;
}

.admin-glass-app .admin-sidebar .sidebar-nav {
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.admin-glass-app .admin-sidebar .sidebar-nav::-webkit-scrollbar {
  width: 8px;
}

.admin-glass-app .admin-sidebar .sidebar-nav::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--theme-primary) 5%, transparent);
}

.admin-glass-app .admin-sidebar .sidebar-nav::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--theme-primary), var(--theme-secondary));
  border-radius: 999px;
}

/* Final rebuild: admin sidebar, footer symbols editor, and form field builders. */
.admin-shell.admin-glass-app {
  grid-template-areas: "main sidebar" !important;
  grid-template-columns: minmax(0, 1fr) clamp(268px, 21.5vw, 304px) !important;
  align-items: start !important;
  gap: clamp(16px, 2vw, 26px) !important;
}

.admin-glass-app .admin-main-column {
  grid-area: main !important;
  min-width: 0 !important;
}

.admin-glass-app .admin-sidebar {
  grid-area: sidebar !important;
  position: sticky !important;
  inset-block-start: clamp(12px, 1.6vw, 18px) !important;
  height: calc(100svh - clamp(24px, 3.2vw, 36px)) !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  gap: 12px !important;
  padding: 14px !important;
  border: 1px solid color-mix(in srgb, var(--theme-edge) 16%, rgb(218 226 238 / .92)) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 18% 0, color-mix(in srgb, var(--theme-edge) 10%, transparent), transparent 16rem),
    linear-gradient(145deg, color-mix(in srgb, var(--theme-primary) 4%, rgb(255 255 255 / .97)), color-mix(in srgb, var(--theme-secondary) 4%, rgb(250 252 255 / .92))) !important;
  box-shadow: 0 22px 54px color-mix(in srgb, var(--theme-primary) 12%, rgb(28 42 68 / .12)) !important;
}

.admin-glass-app .sidebar-brand {
  min-height: 66px !important;
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 9px !important;
  border: 1px solid color-mix(in srgb, var(--theme-primary) 9%, #e4ebf4) !important;
  border-radius: 18px !important;
  background: color-mix(in srgb, var(--theme-primary) 5%, white) !important;
}

.admin-glass-app .admin-logo-box {
  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
  object-fit: contain !important;
}

.admin-glass-app .sidebar-brand > div {
  min-width: 0 !important;
}

.admin-glass-app .sidebar-brand strong,
.admin-glass-app .sidebar-brand small {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.admin-glass-app .admin-menu-search {
  min-height: 46px !important;
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  border: 1px solid color-mix(in srgb, var(--theme-primary) 11%, #dce5f0) !important;
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--theme-secondary) 4%, white) !important;
}

.admin-glass-app .admin-menu-search svg {
  width: 22px !important;
  height: 22px !important;
  color: color-mix(in srgb, var(--theme-primary) 54%, #64748b) !important;
}

.admin-glass-app .admin-menu-search input {
  min-width: 0 !important;
  height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--admin-ink) !important;
}

.admin-glass-app .sidebar-nav {
  min-height: 0 !important;
  max-height: none !important;
  display: grid !important;
  align-content: start !important;
  gap: 10px !important;
  padding: 2px 0 6px 5px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
}

.admin-glass-app .sidebar-group {
  display: grid !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 0 10px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--theme-primary) 8%, #e6edf6) !important;
}

.admin-glass-app .sidebar-group:last-child {
  border-bottom: 0 !important;
}

.admin-glass-app .sidebar-group > span {
  margin: 3px 10px 5px !important;
  padding: 0 !important;
  color: color-mix(in srgb, var(--theme-primary) 40%, #8792a5) !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
}

.admin-glass-app .sidebar-nav a,
.admin-glass-app .sidebar-button {
  min-height: 42px !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 5px 8px !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  color: color-mix(in srgb, var(--theme-primary) 28%, #3d4a61) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.admin-glass-app .sidebar-nav a > :where(svg,.admin-icon),
.admin-glass-app .sidebar-button > :where(svg,.admin-icon) {
  width: 34px !important;
  height: 34px !important;
  padding: 8px !important;
  border-radius: 12px !important;
  color: color-mix(in srgb, var(--theme-primary) 44%, #657187) !important;
  background: color-mix(in srgb, var(--theme-primary) 6%, #f2f5fa) !important;
}

.admin-glass-app .sidebar-nav a:hover,
.admin-glass-app .sidebar-button:hover {
  color: color-mix(in srgb, var(--theme-primary) 74%, #1d4ed8) !important;
  border-color: color-mix(in srgb, var(--theme-primary) 13%, #dbe5ef) !important;
  background: linear-gradient(270deg, color-mix(in srgb, var(--theme-primary) 8%, #fff), color-mix(in srgb, var(--theme-secondary) 6%, #fff)) !important;
}

.admin-glass-app .sidebar-nav a.active {
  color: color-mix(in srgb, var(--theme-primary) 84%, #172554) !important;
  border-color: color-mix(in srgb, var(--theme-primary) 22%, #dbe5ef) !important;
  background: linear-gradient(270deg, color-mix(in srgb, var(--theme-primary) 13%, #fff), color-mix(in srgb, var(--theme-secondary) 8%, #fff)) !important;
  box-shadow: inset -4px 0 var(--theme-primary), 0 8px 18px color-mix(in srgb, var(--theme-primary) 10%, transparent) !important;
}

.admin-glass-app .sidebar-nav a.active > :where(svg,.admin-icon) {
  color: #fff !important;
  background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary)) !important;
}

.admin-glass-app .admin-sidebar-status {
  min-height: 52px !important;
  display: grid !important;
  grid-template-columns: 12px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid color-mix(in srgb, var(--theme-secondary) 16%, #dfe7f1) !important;
  border-radius: 17px !important;
  background: color-mix(in srgb, var(--theme-secondary) 6%, white) !important;
}

.admin-glass-app .admin-sidebar-status > span {
  min-width: 0 !important;
}

.admin-glass-app .admin-sidebar-status strong,
.admin-glass-app .admin-sidebar-status small {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.admin-settings-page .footer-symbol-editor {
  display: grid !important;
  gap: 12px !important;
  margin-top: 16px !important;
  padding: clamp(12px, 1.5vw, 18px) !important;
  border: 1px solid color-mix(in srgb, var(--theme-primary) 10%, #dfe6ef) !important;
  border-radius: 18px !important;
  background: color-mix(in srgb, var(--theme-secondary) 4%, #fff) !important;
}

.admin-settings-page .footer-symbol-editor h4 {
  margin: 0 !important;
  color: var(--admin-ink) !important;
  line-height: 1.8 !important;
}

.admin-settings-page .footer-symbol-editor-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)) !important;
  gap: 12px !important;
}

.admin-settings-page .symbol-editor-card {
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 10px !important;
  padding: 12px !important;
  border: 1px solid color-mix(in srgb, var(--theme-primary) 12%, #dfe7f0) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--theme-primary) 4%, #fff), color-mix(in srgb, var(--theme-secondary) 3%, #fff)) !important;
}

.admin-settings-page .symbol-editor-card > span {
  color: color-mix(in srgb, var(--theme-primary) 54%, #344154) !important;
  font-weight: 900 !important;
}

.admin-settings-page .symbol-editor-card img {
  width: 100% !important;
  height: 112px !important;
  object-fit: contain !important;
  border: 1px dashed color-mix(in srgb, var(--theme-primary) 16%, #d7dfeb) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--theme-primary) 4%, #f8fafc) !important;
}

.admin-settings-page .symbol-editor-card .input,
.admin-settings-page .symbol-editor-card input[type="file"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.admin-settings-page .symbol-editor-card input[type="file"] {
  padding: 10px !important;
  border: 1px solid color-mix(in srgb, var(--theme-primary) 12%, #dfe7f0) !important;
  border-radius: 13px !important;
  color: var(--admin-muted) !important;
  background: color-mix(in srgb, var(--theme-primary) 3%, #fff) !important;
}

.admin-settings-page .symbol-editor-card .btn-danger {
  width: 100% !important;
  justify-content: center !important;
}

.admin-glass-app .builder-lite-panel {
  border: 1px solid color-mix(in srgb, var(--theme-edge) 17%, #dfe6ef) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 92% 0, color-mix(in srgb, var(--theme-edge) 8%, transparent), transparent 15rem),
    linear-gradient(145deg, color-mix(in srgb, var(--theme-primary) 4%, #fff), color-mix(in srgb, var(--theme-secondary) 4%, #fff)) !important;
}

.admin-glass-app .builder-lite-title,
.admin-glass-app .option-editor-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
}

.admin-glass-app .builder-lite-panel .input,
.admin-glass-app .option-editor-row .input {
  width: 100% !important;
  min-width: 0 !important;
  border-color: color-mix(in srgb, var(--theme-primary) 13%, #dbe3ee) !important;
  background: color-mix(in srgb, var(--theme-secondary) 3%, #fff) !important;
}

.site-shell .dynamic-panel :where(.form-section,.option-list,.check-row),
.site-shell .survey-panel :where(.option-list,.check-row) {
  border-color: color-mix(in srgb, var(--theme-edge, var(--accent-3)) 20%, rgb(255 255 255 / .12)) !important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--theme-primary, var(--accent)) 9%, rgb(255 255 255 / .07)),
      color-mix(in srgb, var(--theme-secondary, var(--accent-2)) 7%, rgb(0 0 0 / .16))) !important;
}

.site-shell .dynamic-panel :where(input.input,textarea.input,select.input,.input),
.site-shell .survey-panel :where(input.input,textarea.input,select.input,.input) {
  border-color: color-mix(in srgb, var(--theme-edge, var(--accent-3)) 18%, rgb(255 255 255 / .15)) !important;
  background:
    linear-gradient(145deg, rgb(255 255 255 / .08), transparent),
    color-mix(in srgb, var(--theme-primary, var(--accent)) 9%, rgb(5 9 20 / .50)) !important;
}

@media (max-width: 1120px) {
  .admin-shell.admin-glass-app {
    grid-template-areas: "main" !important;
    grid-template-columns: 1fr !important;
  }

  .admin-glass-app .admin-sidebar {
    position: fixed !important;
    inset-block: 10px !important;
    inset-inline-end: 10px !important;
    width: min(332px, calc(100vw - 24px)) !important;
    height: calc(100svh - 20px) !important;
    transform: translateX(110%) !important;
    z-index: 30 !important;
  }

  .admin-glass-app .admin-sidebar.open {
    transform: translateX(0) !important;
  }
}

@media (max-width: 700px) {
  .admin-settings-page .footer-symbol-editor-grid {
    grid-template-columns: 1fr !important;
  }

  .admin-glass-app .builder-lite-title,
  .admin-glass-app .option-editor-row {
    grid-template-columns: 1fr !important;
  }
}

/* Final detail pass: non-green fallbacks, admin dashboard, symbols, rich editor, and inline media. */
:root {
  --bg: #f7f8fb;
  --bg-soft: #eef2f7;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --panel: #ffffff;
  --panel-border: #dde5f0;
  --text: #172033;
  --muted: #667085;
  --accent: #334155;
  --accent-2: #6366f1;
  --accent-3: #d7b56d;
  --shadow: 0 18px 45px rgb(51 65 85 / .10);
}

.admin-glass-app {
  --admin-brand: color-mix(in srgb, var(--accent, #334155) 32%, #4f46e5);
  --admin-brand-2: color-mix(in srgb, var(--accent-2, #6366f1) 30%, #0f172a);
  --admin-warm: color-mix(in srgb, var(--accent-3, #d7b56d) 78%, #7c3aed);
  --admin-soft: color-mix(in srgb, var(--admin-brand) 7%, #f8fafc);
}

.admin-glass-app .metric-grid > a,
.admin-glass-app .quick-action-grid > a,
.admin-glass-app .admin-metric-card {
  border-color: color-mix(in srgb, var(--admin-brand) 12%, #e2e8f0) !important;
  background:
    radial-gradient(circle at 88% 0, color-mix(in srgb, var(--admin-warm) 9%, transparent), transparent 16rem),
    linear-gradient(145deg, rgb(255 255 255 / .96), color-mix(in srgb, var(--admin-soft) 72%, #fff)) !important;
  box-shadow: 0 16px 42px color-mix(in srgb, var(--admin-brand) 9%, rgb(31 45 78 / .08)) !important;
}

.admin-glass-app .metric-grid > a:hover,
.admin-glass-app .quick-action-grid > a:hover {
  border-color: color-mix(in srgb, var(--admin-brand) 24%, #d8e0ec) !important;
  box-shadow: 0 22px 56px color-mix(in srgb, var(--admin-brand) 14%, rgb(31 45 78 / .12)) !important;
}

.admin-glass-app .metric-grid > a strong,
.admin-glass-app .admin-metric-card.blue strong {
  color: var(--admin-brand) !important;
}

.admin-glass-app .metric-grid > a:nth-child(3n + 2) strong,
.admin-glass-app .admin-metric-card.green strong,
.admin-glass-app .admin-metric-card.green {
  color: var(--admin-brand-2) !important;
}

.admin-glass-app .metric-grid > a:nth-child(3n) strong,
.admin-glass-app .admin-metric-card.orange strong,
.admin-glass-app .admin-metric-card.purple strong,
.admin-glass-app .admin-metric-card.orange,
.admin-glass-app .admin-metric-card.purple {
  color: var(--admin-warm) !important;
}

.admin-glass-app .metric-grid > a span,
.admin-glass-app .metric-grid > a small,
.admin-glass-app .quick-action-grid > a span,
.admin-glass-app .admin-metric-card span,
.admin-glass-app .admin-metric-card small {
  color: color-mix(in srgb, var(--admin-brand) 18%, #667085) !important;
}

.admin-glass-app .admin-sidebar-status > i {
  background: var(--admin-warm) !important;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--admin-warm) 16%, transparent) !important;
}

.admin-settings-page .footer-symbol-editor-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
}

.admin-settings-page .symbol-editor-card {
  grid-template-rows: auto minmax(96px, auto) auto auto auto !important;
  min-width: 0 !important;
}

.admin-settings-page .symbol-editor-card :where(input, .input, input[type="file"], button) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.footer-symbols a {
  display: grid;
  place-items: center;
  text-decoration: none;
}

.admin-glass-app .rich-editor,
.rich-editor {
  border-color: color-mix(in srgb, var(--admin-brand, var(--accent)) 18%, rgb(255 255 255 / .14)) !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--admin-brand, var(--accent)) 14%, #111827), #101827) !important;
}

.admin-glass-app .rich-toolbar,
.rich-toolbar {
  color: #edf2ff !important;
  border-bottom-color: color-mix(in srgb, var(--admin-brand, var(--accent)) 18%, rgb(255 255 255 / .14)) !important;
  background:
    radial-gradient(circle at 94% 0, color-mix(in srgb, var(--admin-warm, var(--accent-3)) 13%, transparent), transparent 18rem),
    linear-gradient(145deg, #111827, color-mix(in srgb, var(--admin-brand, var(--accent)) 11%, #182235)) !important;
}

.admin-glass-app .rich-tool-group,
.rich-tool-group {
  border-inline-end-color: color-mix(in srgb, var(--admin-brand, var(--accent)) 18%, rgb(255 255 255 / .14)) !important;
}

.admin-glass-app .rich-toolbar button,
.admin-glass-app .rich-upload,
.admin-glass-app .rich-format-select,
.rich-toolbar button,
.rich-upload,
.rich-format-select {
  border-color: color-mix(in srgb, var(--admin-brand, var(--accent)) 20%, rgb(255 255 255 / .12)) !important;
  color: #edf2ff !important;
  background: rgb(255 255 255 / .065) !important;
}

.admin-glass-app .rich-toolbar button:hover,
.admin-glass-app .rich-upload:hover,
.rich-toolbar button:hover,
.rich-upload:hover {
  background: color-mix(in srgb, var(--admin-warm, var(--accent-3)) 16%, rgb(255 255 255 / .08)) !important;
}

.admin-glass-app .rich-toolbar button.active,
.rich-toolbar button.active {
  color: #101827 !important;
  background: linear-gradient(135deg, var(--admin-warm, var(--accent-3)), #f8e3a2) !important;
  border-color: color-mix(in srgb, var(--admin-warm, var(--accent-3)) 56%, white) !important;
}

.admin-glass-app .editor-hint,
.editor-hint {
  color: #b9c4d6 !important;
  border-bottom-color: color-mix(in srgb, var(--admin-brand, var(--accent)) 16%, rgb(255 255 255 / .12)) !important;
  background: rgb(255 255 255 / .035) !important;
}

.admin-glass-app .rich-surface,
.rich-surface {
  color: #172033 !important;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--admin-brand, var(--accent)) 5%, transparent), transparent 18rem),
    #fbfcff !important;
}

.rich-surface:focus {
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--admin-brand, var(--accent)) 18%, transparent) !important;
}

.rich-surface blockquote {
  border-inline-start-color: var(--admin-warm, var(--accent-3)) !important;
  background: color-mix(in srgb, var(--admin-warm, var(--accent-3)) 10%, #fff) !important;
}

.rich-surface hr {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--admin-brand, var(--accent)) 28%, #cbd5e1), transparent) !important;
}

.editor-figure,
.prose-rtl figure.editor-figure,
.article-body figure.editor-figure {
  display: inline-block;
  width: min(360px, 48%);
  max-width: calc(100% - 16px);
  margin: 12px 8px;
  vertical-align: top;
}

.editor-figure[data-align="center"],
.prose-rtl figure.editor-figure[data-align="center"],
.article-body figure.editor-figure[data-align="center"],
.editor-figure[data-align="start"],
.prose-rtl figure.editor-figure[data-align="start"],
.article-body figure.editor-figure[data-align="start"],
.editor-figure[data-align="end"],
.prose-rtl figure.editor-figure[data-align="end"],
.article-body figure.editor-figure[data-align="end"] {
  display: block;
}

.editor-figure[data-align="inline"],
.prose-rtl figure.editor-figure[data-align="inline"],
.article-body figure.editor-figure[data-align="inline"] {
  display: inline-block;
  margin-inline: 8px;
}

.editor-figure.is-selected-media {
  box-shadow: 0 0 0 3px var(--admin-warm, var(--accent-3)), 0 16px 46px color-mix(in srgb, var(--admin-brand, var(--accent)) 18%, transparent) !important;
}

.editor-media-overlay {
  border-color: var(--admin-warm, var(--accent-3)) !important;
}

.editor-resize-handle {
  background: var(--admin-brand, var(--accent)) !important;
}

.editor-dialog-backdrop {
  background: rgb(15 23 42 / .72) !important;
}

.editor-dialog {
  border: 1px solid color-mix(in srgb, var(--admin-brand, var(--accent)) 18%, rgb(255 255 255 / .16)) !important;
  background:
    radial-gradient(circle at 92% 0, color-mix(in srgb, var(--admin-warm, var(--accent-3)) 12%, transparent), transparent 18rem),
    linear-gradient(145deg, #111827, color-mix(in srgb, var(--admin-brand, var(--accent)) 10%, #182235)) !important;
  box-shadow: 0 30px 90px rgb(15 23 42 / .42) !important;
}

.editor-dialog > label {
  color: #e5eaf5 !important;
}

.editor-dialog-check input {
  accent-color: var(--admin-warm, var(--accent-3)) !important;
}

.site-shell .content-area > :where(section, article, .content-band, .glass-card),
.admin-glass-app .admin-content > :where(section, .admin-section, .glass-card) {
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}

.site-shell .content-area :where(.grid-cards > *, .media-card, .fajr-video-card, .course-card, .campaign-card, .product-card, .member-card) {
  content-visibility: auto;
  contain-intrinsic-size: auto 360px;
}

video.is-lazy-unloaded {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--theme-primary, var(--accent)) 18%, #101827),
      color-mix(in srgb, var(--theme-secondary, var(--accent-2)) 14%, #0f172a));
}

#components-reconnect-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: none;
  place-items: center;
  padding: 20px;
  color: #f8fafc;
  background:
    radial-gradient(circle at 52% 34%, color-mix(in srgb, var(--theme-edge, var(--accent-3)) 14%, transparent), transparent 19rem),
    rgb(2 6 23 / .66);
  backdrop-filter: blur(16px);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
  display: grid;
}

.site-reconnect-card {
  width: min(420px, 100%);
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: clamp(22px, 5vw, 34px);
  border: 1px solid color-mix(in srgb, var(--theme-edge, var(--accent-3)) 30%, rgb(255 255 255 / .16));
  border-radius: 24px;
  text-align: center;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--theme-primary, var(--accent)) 40%, rgb(15 23 42 / .92)),
      color-mix(in srgb, var(--theme-secondary, var(--accent-2)) 34%, rgb(15 23 42 / .92)));
  box-shadow: 0 28px 90px rgb(0 0 0 / .34), inset 0 1px rgb(255 255 255 / .12);
}

.site-reconnect-pulse {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--theme-edge, var(--accent-3)) 82%, #fff) 0 28%, transparent 31%),
    color-mix(in srgb, var(--theme-edge, var(--accent-3)) 18%, rgb(255 255 255 / .08));
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--theme-edge, var(--accent-3)) 22%, transparent);
  animation: reconnectPulse 1.35s ease-in-out infinite;
}

.site-reconnect-title {
  color: color-mix(in srgb, var(--theme-edge, var(--accent-3)) 20%, #fff);
  font-size: 1.08rem;
}

.site-reconnect-card p {
  margin: 0;
  color: rgb(241 245 249 / .78);
  line-height: 1.9;
}

.site-reconnect-card button {
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid color-mix(in srgb, var(--theme-edge, var(--accent-3)) 42%, transparent);
  border-radius: 14px;
  color: #111827;
  background: linear-gradient(135deg, var(--theme-edge, var(--accent-3)), color-mix(in srgb, var(--theme-edge, var(--accent-3)) 62%, #fff));
  font-weight: 800;
}

#components-reconnect-modal .site-reconnect-failed,
#components-reconnect-modal .site-reconnect-rejected,
#components-reconnect-modal.components-reconnect-failed .site-reconnect-connecting,
#components-reconnect-modal.components-reconnect-rejected .site-reconnect-connecting {
  display: none;
}

#components-reconnect-modal.components-reconnect-failed .site-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected .site-reconnect-rejected {
  display: block;
}

#components-reconnect-modal.components-reconnect-show .site-reconnect-card button {
  display: none;
}

@keyframes reconnectPulse {
  0%, 100% { transform: scale(.96); box-shadow: 0 0 0 0 color-mix(in srgb, var(--theme-edge, var(--accent-3)) 22%, transparent); }
  50% { transform: scale(1); box-shadow: 0 0 0 12px transparent; }
}

@media (max-width: 720px) {
  .admin-settings-page .footer-symbol-editor-grid {
    grid-template-columns: 1fr !important;
  }

  .editor-figure,
  .prose-rtl figure.editor-figure,
  .article-body figure.editor-figure {
    display: block;
    width: 100% !important;
    max-width: 100%;
    margin: 14px 0;
  }
}

/* Final admin editor/media polish: dynamic color surfaces and precise inline media. */
.admin-search-hidden {
  display: none !important;
}

.admin-glass-app :where(.rich-editor,.visual-editor-toolbar,.visual-stage,.segmented-control,.media-library-panel),
.rich-editor,
.visual-editor-toolbar,
.visual-stage,
.segmented-control,
.media-library-panel {
  border-color: color-mix(in srgb, var(--theme-edge, var(--accent-3)) 22%, rgb(226 232 240 / .82)) !important;
  background:
    radial-gradient(circle at 96% 0, color-mix(in srgb, var(--theme-edge, var(--accent-3)) 8%, transparent), transparent 18rem),
    linear-gradient(145deg,
      color-mix(in srgb, var(--theme-primary, var(--accent)) 7%, rgb(255 255 255 / .94)),
      color-mix(in srgb, var(--theme-secondary, var(--accent-2)) 6%, rgb(248 250 252 / .88))) !important;
}

.admin-glass-app :where(.rich-toolbar),
.rich-toolbar {
  border-bottom-color: color-mix(in srgb, var(--theme-edge, var(--accent-3)) 24%, rgb(255 255 255 / .14)) !important;
  background:
    radial-gradient(circle at 96% 0, color-mix(in srgb, var(--theme-edge, var(--accent-3)) 11%, transparent), transparent 18rem),
    linear-gradient(145deg,
      color-mix(in srgb, var(--theme-primary, var(--accent)) 34%, rgb(15 23 42 / .90)),
      color-mix(in srgb, var(--theme-secondary, var(--accent-2)) 28%, rgb(15 23 42 / .92))) !important;
}

.admin-glass-app :where(.rich-toolbar button,.rich-upload,.rich-format-select,.segmented-control button),
.rich-toolbar button,
.rich-upload,
.rich-format-select,
.segmented-control button {
  border-color: color-mix(in srgb, var(--theme-edge, var(--accent-3)) 22%, rgb(255 255 255 / .14)) !important;
  color: color-mix(in srgb, var(--theme-edge, var(--accent-3)) 10%, rgb(241 245 249)) !important;
  background: color-mix(in srgb, var(--theme-primary, var(--accent)) 10%, rgb(255 255 255 / .06)) !important;
}

.admin-glass-app :where(.rich-toolbar button:hover,.rich-upload:hover,.segmented-control button:hover),
.rich-toolbar button:hover,
.rich-upload:hover,
.segmented-control button:hover {
  background: color-mix(in srgb, var(--theme-edge, var(--accent-3)) 18%, rgb(255 255 255 / .08)) !important;
}

.admin-glass-app :where(.rich-toolbar button.active,.segmented-control button.active),
.rich-toolbar button.active,
.segmented-control button.active {
  color: rgb(15 23 42) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--theme-edge, var(--accent-3)) 86%, white),
      color-mix(in srgb, var(--theme-secondary, var(--accent-2)) 20%, white)) !important;
}

.admin-glass-app :where(.media-card,.media-preview,.upload-box),
.media-card,
.media-preview,
.upload-box {
  border-color: color-mix(in srgb, var(--theme-edge, var(--accent-3)) 18%, rgb(226 232 240 / .9)) !important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--theme-primary, var(--accent)) 4%, rgb(255 255 255 / .96)),
      color-mix(in srgb, var(--theme-secondary, var(--accent-2)) 4%, rgb(248 250 252 / .92))) !important;
}

.editor-figure,
.prose-rtl figure.editor-figure,
.article-body figure.editor-figure {
  display: inline-block !important;
  min-width: 96px;
  width: min(240px, calc(33.333% - 18px));
  max-width: calc(100% - 16px);
  margin: 10px 8px !important;
  vertical-align: top;
}

.editor-figure[data-align="center"],
.prose-rtl figure.editor-figure[data-align="center"],
.article-body figure.editor-figure[data-align="center"],
.editor-figure[data-align="start"],
.prose-rtl figure.editor-figure[data-align="start"],
.article-body figure.editor-figure[data-align="start"],
.editor-figure[data-align="end"],
.prose-rtl figure.editor-figure[data-align="end"],
.article-body figure.editor-figure[data-align="end"] {
  display: block !important;
}

.editor-figure[data-align="inline"],
.editor-figure[data-align="free"],
.prose-rtl figure.editor-figure[data-align="inline"],
.prose-rtl figure.editor-figure[data-align="free"],
.article-body figure.editor-figure[data-align="inline"],
.article-body figure.editor-figure[data-align="free"] {
  display: inline-block !important;
  margin-inline: 8px !important;
}

.editor-figure .editor-media,
.prose-rtl .editor-figure img,
.prose-rtl .editor-figure video,
.article-body .editor-figure img,
.article-body .editor-figure video {
  margin: 0 !important;
}

.editor-figure[data-align="free"] {
  will-change: left, top;
}

@media (max-width: 720px) {
  .editor-figure[data-align="inline"],
  .editor-figure[data-align="free"],
  .prose-rtl figure.editor-figure[data-align="inline"],
  .prose-rtl figure.editor-figure[data-align="free"],
  .article-body figure.editor-figure[data-align="inline"],
  .article-body figure.editor-figure[data-align="free"] {
    display: inline-block !important;
    width: min(150px, calc(50% - 14px));
    max-width: calc(100% - 12px);
    margin: 8px 6px !important;
  }
}

/* 2026-07-11: final dynamic-color and Android performance/UX layer. */
body,
:where(.site-shell, .profile-shell, .auth-shell, .admin-shell) {
  --ui-primary: var(--theme-primary, var(--accent, #334155));
  --ui-secondary: var(--theme-secondary, var(--accent-2, #6366f1));
  --ui-edge: var(--theme-edge, var(--accent-3, var(--accent-2, #6366f1)));
  --ui-on-dark: color-mix(in srgb, var(--ui-edge) 8%, white);
  --ui-muted-on-dark: color-mix(in srgb, var(--ui-secondary) 18%, #dbe4ee);
  --ui-dark-a: color-mix(in srgb, var(--ui-primary) 30%, #070b14);
  --ui-dark-b: color-mix(in srgb, var(--ui-secondary) 22%, #0b1120);
  --ui-dark-c: color-mix(in srgb, var(--ui-edge) 10%, #050914);
}

body {
  background:
    radial-gradient(circle at 9% 4%, color-mix(in srgb, var(--ui-secondary) 18%, transparent), transparent 30rem),
    radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--ui-edge) 13%, transparent), transparent 32rem),
    linear-gradient(145deg, var(--ui-dark-a), var(--ui-dark-b) 52%, var(--ui-dark-c)) !important;
}

:where(.site-shell, .profile-shell, .auth-shell) {
  color: var(--ui-on-dark) !important;
  background:
    radial-gradient(circle at 88% 2%, color-mix(in srgb, var(--ui-secondary) 24%, transparent), transparent 30rem),
    radial-gradient(circle at 8% 96%, color-mix(in srgb, var(--ui-edge) 14%, transparent), transparent 34rem),
    linear-gradient(145deg, var(--ui-dark-a), var(--ui-dark-b) 50%, var(--ui-dark-c)) !important;
}

.admin-glass-app {
  background:
    radial-gradient(circle at 90% 0, color-mix(in srgb, var(--ui-primary) 11%, transparent), transparent 28rem),
    radial-gradient(circle at 4% 96%, color-mix(in srgb, var(--ui-secondary) 10%, transparent), transparent 30rem),
    linear-gradient(155deg,
      color-mix(in srgb, var(--ui-primary) 5%, #f8fafc),
      color-mix(in srgb, var(--ui-secondary) 6%, #f1f5f9) 52%,
      color-mix(in srgb, var(--ui-edge) 5%, #f8fafc)) !important;
}

.site-shell :where(.site-header, .footer, .mobile-site-nav, .mega-panel, .submenu-panel,
  .glass-card, .content-band:not(.vision-panel):not([style*="background-image"]), .liquid-panel, .section-card, .article-card, .product-card,
  .service-card, .route-state, .empty-state, .shop-filters, .shop-notice, .cart-card,
  .checkout-card, .tracking-panel, .public-page-card),
.profile-shell :where(.profile-sidebar, .profile-form-card, .profile-welcome, .address-card,
  .user-order-card, .favorite-panel-card, .profile-course-card),
.auth-shell :where(.account-auth-card, .profile-completion-card) {
  border-color: color-mix(in srgb, var(--ui-edge) 25%, rgb(255 255 255 / .12)) !important;
  background:
    linear-gradient(145deg, rgb(255 255 255 / .11), transparent 34%),
    linear-gradient(315deg,
      color-mix(in srgb, var(--ui-primary) 22%, rgb(8 13 24 / .72)),
      color-mix(in srgb, var(--ui-secondary) 17%, rgb(5 10 20 / .82))) !important;
}

.admin-glass-app :where(.admin-template-panel, .admin-section, .glass-card, .content-band,
  .liquid-panel, .empty-state, .admin-table, .builder-lite-panel, .visual-stage,
  .rich-editor, .media-library-panel) {
  border-color: color-mix(in srgb, var(--ui-edge) 16%, #dbe3ef) !important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--ui-primary) 4%, rgb(255 255 255 / .96)),
      color-mix(in srgb, var(--ui-secondary) 5%, rgb(248 250 252 / .92))) !important;
}

:where(.btn-primary, button.btn-primary, a.btn-primary, .header-cta, .home-slider__button--primary) {
  border-color: color-mix(in srgb, var(--ui-edge) 42%, rgb(255 255 255 / .16)) !important;
  background:
    linear-gradient(150deg, rgb(255 255 255 / .18), transparent 36%),
    linear-gradient(135deg, var(--ui-primary), var(--ui-secondary)) !important;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--ui-primary) 25%, transparent) !important;
}

:where(.btn-secondary, button.btn-secondary, a.btn-secondary, .status-chip.published) {
  border-color: color-mix(in srgb, var(--ui-edge) 34%, rgb(255 255 255 / .14)) !important;
  color: color-mix(in srgb, var(--ui-edge) 72%, white) !important;
  background: color-mix(in srgb, var(--ui-secondary) 12%, rgb(255 255 255 / .07)) !important;
}

.header-icon-action {
  border-color: color-mix(in srgb, var(--ui-secondary) 24%, transparent) !important;
  color: var(--ui-on-dark) !important;
  background: color-mix(in srgb, var(--ui-primary) 14%, rgb(255 255 255 / .05)) !important;
}

.header-icon-action:hover {
  border-color: color-mix(in srgb, var(--ui-edge) 44%, transparent) !important;
  background: color-mix(in srgb, var(--ui-secondary) 18%, rgb(255 255 255 / .06)) !important;
}

.header-cart-link b,
.auth-tabs button.active,
.address-card > div:first-child span {
  border-color: color-mix(in srgb, var(--ui-edge) 55%, transparent) !important;
  color: color-mix(in srgb, var(--ui-primary) 76%, #080c16) !important;
  background: color-mix(in srgb, var(--ui-edge) 84%, white) !important;
}

.completion-progress span.active,
.progress-wrap > span,
.campaign-progress > span,
.upload-progress > span {
  background: linear-gradient(90deg, var(--ui-primary), var(--ui-secondary), var(--ui-edge)) !important;
}

.profile-menu-toggle span,
.profile-nav a span,
.profile-dashboard-grid strong,
.favorite-panel-card > span,
.supporter-card span,
.rating-stars,
.rating-overview > strong {
  color: color-mix(in srgb, var(--ui-edge) 82%, white) !important;
}

.profile-menu-toggle span {
  background: var(--ui-edge) !important;
}

.profile-shell :where(.profile-nav a, .profile-sidebar-footer a, .profile-sidebar-footer button,
  .profile-page-header p, .profile-welcome p, .user-order-items > div, .address-card p,
  .address-card small, .review-card p, .review-card small),
.auth-shell :where(.account-auth-intro p, .profile-completion-card > p, .field-hint,
  .auth-tabs button, .auth-retry, .completion-logout),
.site-shell :where(.public-menu details > summary, .nav-leaf, .nav-leaf small,
  .desktop-navigation a, .footer-links a, .product-rating-summary small) {
  color: var(--ui-muted-on-dark) !important;
}

.profile-shell :where(.profile-nav a:hover, .profile-nav a.active) {
  color: color-mix(in srgb, var(--ui-edge) 76%, white) !important;
}

.profile-nav a.active,
.choice-card.active,
.saved-address.active,
.in-cart-panel,
.secure-checkout-note {
  border-color: color-mix(in srgb, var(--ui-edge) 32%, transparent) !important;
  background: color-mix(in srgb, var(--ui-primary) 22%, rgb(255 255 255 / .04)) !important;
}

.thumb-row button.active,
.editor-figure.is-selected-media {
  border-color: var(--ui-edge) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-edge) 24%, transparent) !important;
}

.review-avatar,
.play-badge,
.featured-badge {
  border-color: color-mix(in srgb, var(--ui-edge) 48%, white) !important;
  color: color-mix(in srgb, var(--ui-primary) 78%, #080c16) !important;
  background: color-mix(in srgb, var(--ui-edge) 86%, white) !important;
}

.site-shell :where(.desktop-navigation a:hover, .footer-links a:hover,
  .public-menu details > summary:hover, .public-menu details[open] > summary, .nav-leaf:hover) {
  color: color-mix(in srgb, var(--ui-edge) 76%, white) !important;
  background: color-mix(in srgb, var(--ui-secondary) 18%, transparent) !important;
}

.site-shell :where(.mega-panel, .submenu-panel) {
  border-color: color-mix(in srgb, var(--ui-edge) 30%, rgb(255 255 255 / .12)) !important;
  background:
    linear-gradient(145deg, rgb(255 255 255 / .10), transparent 30%),
    color-mix(in srgb, var(--ui-primary) 34%, rgb(7 11 21 / .94)) !important;
}

:where(.rich-toolbar button.active, .segmented-control button.active, .rich-upload:hover) {
  border-color: color-mix(in srgb, var(--ui-edge) 52%, white) !important;
  color: color-mix(in srgb, var(--ui-primary) 82%, #080c16) !important;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--ui-edge) 84%, white),
    color-mix(in srgb, var(--ui-secondary) 24%, white)) !important;
}

.editor-figure.is-selected-media {
  outline-color: var(--ui-edge) !important;
}

.slider-dots button.active,
.slider-dot.active,
.home-slider__dot.is-active {
  border-color: color-mix(in srgb, var(--ui-edge) 74%, white) !important;
  background: var(--ui-edge) !important;
  box-shadow: 0 0 18px color-mix(in srgb, var(--ui-edge) 38%, transparent) !important;
}

:where(.slider-arrow, .hero-orbit > button, .home-slider__nav, .infinite-carousel__nav, .preview-sound) {
  border-color: color-mix(in srgb, var(--ui-edge) 40%, rgb(255 255 255 / .24)) !important;
  color: white !important;
  background: color-mix(in srgb, var(--ui-primary) 54%, rgb(8 12 22 / .62)) !important;
}

.payment-result-shell.success .payment-result-mark {
  color: color-mix(in srgb, var(--ui-primary) 78%, #080c16) !important;
  background: linear-gradient(145deg, var(--ui-secondary), var(--ui-edge)) !important;
}

:where(.status-chip.draft, .notice-box.warning) {
  border-color: color-mix(in srgb, var(--ui-edge) 42%, transparent) !important;
  color: color-mix(in srgb, var(--ui-edge) 72%, #111827) !important;
  background: color-mix(in srgb, var(--ui-edge) 13%, white) !important;
}

.home-slider,
.home-hero,
.video-thumb,
.fajr-report-preview {
  background-color: color-mix(in srgb, var(--ui-primary) 30%, #080c16) !important;
}

.home-slider__copy::before {
  background: color-mix(in srgb, var(--ui-edge) 78%, white) !important;
}

/* Android-only compositor and paint budget. Desktop rendering is intentionally untouched. */
html.is-android {
  scroll-behavior: auto !important;
}

html.is-android body,
html.is-android :where(.site-shell, .profile-shell, .auth-shell, .admin-shell, .admin-glass-app) {
  background-attachment: scroll !important;
}

html.is-android *,
html.is-android *::before,
html.is-android *::after {
  animation: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  will-change: auto !important;
}

html.is-android :where(.admin-ambient, .site-shell::before, .site-shell::after,
  .admin-shell::before, .admin-shell::after, .auth-shell::before, .auth-shell::after) {
  display: none !important;
}

html.is-android :where(.site-header, .footer, .mobile-site-nav, .admin-sidebar, .admin-topbar,
  .admin-template-panel, .account-auth-card, .profile-completion-card, .profile-sidebar,
  .glass-card, .admin-section, .content-band, .liquid-panel, .section-card, .article-card,
  .product-card, .service-card, .route-state, .empty-state, .shop-filters, .shop-notice,
  .cart-card, .checkout-card, .tracking-panel, .profile-form-card, .profile-welcome,
  .address-card, .user-order-card, .favorite-panel-card, .profile-course-card,
  .rich-editor, .visual-stage, .media-library-panel, .admin-table,
  .admin-metric-card, .fajr-video-card, .member-card, .course-card, .campaign-card,
  .home-slider, .mega-panel, .submenu-panel, .editor-dialog) {
  box-shadow: 0 7px 20px rgb(0 0 0 / .14) !important;
}

html.is-android :where(.fajr-motion-item, .fajr-motion-item.fajr-in-view) {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

html.is-android :where(.home-slider__slide, .fajr-hero-slide) {
  transition: opacity 420ms cubic-bezier(.22, .72, .18, 1) !important;
}

html.is-android .infinite-carousel__track {
  transition-duration: 180ms !important;
  transition-timing-function: ease-out !important;
}

html.is-android .admin-sidebar,
html.is-android .mobile-site-nav,
html.is-android .profile-sidebar {
  transition: transform 160ms ease-out !important;
}

/* Android hero: preserve the uploaded 1600x720 (20/9) artwork, then flow copy below it. */
html.is-android .home-slider {
  width: min(var(--page-width), calc(100% - 16px)) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  overflow: hidden;
  background: color-mix(in srgb, var(--ui-primary) 26%, #080c16) !important;
}

html.is-android .home-slider__slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  min-height: 0;
  transform: none !important;
}

html.is-android .home-slider__slide.is-active {
  position: relative;
  inset: auto;
}

html.is-android .home-slider__slide::before {
  display: none !important;
}

html.is-android .home-slider__slide > .home-slider__media,
html.is-android .home-slider__slide > img,
html.is-android .home-slider__slide > video {
  grid-row: 1;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 20 / 9 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: color-mix(in srgb, var(--ui-primary) 28%, #080c16);
}

html.is-android .home-slider__copy {
  position: relative !important;
  inset: auto !important;
  grid-row: 2;
  width: 100% !important;
  max-width: none !important;
  min-height: 0;
  padding: clamp(17px, 4.8vw, 26px) !important;
  transform: none !important;
  background:
    linear-gradient(145deg, rgb(255 255 255 / .08), transparent 42%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--ui-primary) 42%, #080c16),
      color-mix(in srgb, var(--ui-secondary) 30%, #080c16)) !important;
  border-top: 1px solid color-mix(in srgb, var(--ui-edge) 24%, transparent);
}

html.is-android .home-slider__copy :where(h2, p, .home-slider__kicker) {
  color: white !important;
}

html.is-android .home-slider__controls {
  inset: 0 0 auto !important;
  width: 100%;
  height: 45vw;
  max-height: 558px;
}

html.is-android .home-slider__nav {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

html.is-android .home-slider__dots {
  top: max(10px, env(safe-area-inset-top)) !important;
  bottom: auto !important;
  min-height: 0 !important;
  padding: 7px 9px;
  transform: translateX(-50%) !important;
}

html.is-android .home-slider__actions {
  display: flex !important;
  grid-template-columns: none !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

html.is-android :where(.home-slider__button, .slider-copy .btn-primary,
  .slider-copy .btn-secondary, .infinite-carousel .btn-primary,
  .infinite-carousel .btn-secondary) {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100%;
  min-height: 42px;
  flex: 0 1 auto !important;
  padding-inline: 14px;
  white-space: normal;
}

html.is-android :where(.home-slider__nav, .slider-arrow, .infinite-carousel__nav,
  .hero-orbit > button, .preview-sound, .play-badge) {
  width: 44px !important;
  height: 44px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 44px !important;
  max-height: 44px !important;
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 44px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  place-items: center;
  line-height: 1 !important;
  touch-action: manipulation;
}

html.is-android :where(.home-slider__nav:hover, .home-slider__nav:focus-visible) {
  transform: translateY(-50%) !important;
}

html.is-android .infinite-carousel__nav,
html.is-android .infinite-carousel__nav:hover {
  transform: translateY(-50%) !important;
}

html.is-android :where(.home-slider__dot, .slider-dot, .slider-dots button),
html.is-android :where(.home-slider__dot.is-active, .slider-dot.active, .slider-dots button.active) {
  width: 10px !important;
  height: 10px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 10px !important;
  max-height: 10px !important;
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 10px !important;
  padding: 0 !important;
  border-radius: 50% !important;
}

html.is-android .admin-glass-app {
  color-scheme: light;
}

@media (max-width: 760px) {
  html.is-android .site-header,
  html.is-android .admin-topbar {
    margin-top: max(8px, env(safe-area-inset-top)) !important;
  }

  html.is-android :where(.mobile-site-nav, .admin-sidebar, .profile-sidebar) {
    padding-top: max(16px, env(safe-area-inset-top)) !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
  }

  html.is-android :where(.content-area, .admin-content, .profile-content) {
    padding-bottom: max(64px, env(safe-area-inset-bottom)) !important;
  }

  html.is-android .admin-glass-app {
    padding-inline-start: max(10px, env(safe-area-inset-left)) !important;
    padding-inline-end: max(10px, env(safe-area-inset-right)) !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }

  html.is-android :where(input:not([type="checkbox"]):not([type="radio"]), textarea, select,
    [contenteditable="true"], .input, .textarea) {
    font-size: 16px !important;
  }

  html.is-android :where(.rich-toolbar, .visual-editor-toolbar, .segmented-control,
    .admin-table, .table-scroll, .spec-table-wrap) {
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  html.is-android .rich-toolbar {
    flex-wrap: nowrap !important;
  }

  html.is-android .rich-toolbar :where(.rich-tool-group, button, select, .rich-upload) {
    flex: 0 0 auto;
  }

  html.is-android .prose-rtl {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  html.is-android .prose-rtl :where(img, video, audio, canvas, svg, figure) {
    max-width: 100% !important;
    height: auto;
  }

  html.is-android .prose-rtl :where(table, pre) {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  html.is-android .prose-rtl pre {
    white-space: pre;
  }

  html.is-android .prose-rtl iframe {
    display: block;
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 9;
    border: 0;
  }

  html.is-android :where(.campaign-list-media, .campaign-detail-hero > img) {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  html.is-android :where(.campaign-list-media img, .campaign-home-media img) {
    width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }
}

/* Android native carousel mode: the track scrolls so overlay navigation stays tappable. */
html.is-android .infinite-carousel.is-native-scroll {
  width: 100%;
  max-width: 100%;
  overflow: hidden !important;
  touch-action: pan-y !important;
  direction: ltr;
}

html.is-android .infinite-carousel.is-native-scroll .infinite-carousel__track {
  position: relative;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: flex !important;
  flex-flow: row nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory !important;
  scroll-padding-inline: 0;
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
  scrollbar-width: none;
  touch-action: pan-x pan-y !important;
  direction: ltr;
}

html.is-android .infinite-carousel.is-native-scroll .infinite-carousel__track::-webkit-scrollbar {
  display: none;
}

html.is-android .infinite-carousel.is-native-scroll .infinite-carousel__track > [data-carousel-item] {
  width: min(86vw, 420px) !important;
  max-width: min(86vw, 420px);
  flex: 0 0 min(86vw, 420px) !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always;
  direction: rtl;
}

html.is-android .infinite-carousel.is-native-scroll [data-carousel-clone] {
  display: none !important;
}

@media (max-width: 760px) {
  html.is-android .admin-glass-app .table-row > [data-label] {
    min-width: 0;
    display: grid !important;
    grid-template-columns: minmax(88px, 36%) minmax(0, 1fr);
    align-items: start;
    gap: 8px 12px;
    padding-block: 9px;
    border-bottom: 1px solid color-mix(in srgb, var(--ui-edge) 14%, #dbe3ef);
    overflow-wrap: anywhere;
    text-align: start;
  }

  html.is-android .admin-glass-app .table-row > [data-label]::before {
    content: attr(data-label);
    min-width: 0;
    grid-column: 1;
    color: color-mix(in srgb, var(--ui-primary) 68%, #475569);
    font-size: .74rem;
    font-weight: 900;
    line-height: 1.65;
    overflow-wrap: anywhere;
  }

  html.is-android .admin-glass-app .table-row > [data-label] > * {
    min-width: 0;
    grid-column: 2;
    max-width: 100%;
  }

  html.is-android .admin-glass-app .table-row > [data-label=""] {
    grid-template-columns: minmax(0, 1fr);
  }

  html.is-android .admin-glass-app .table-row > [data-label=""]::before {
    display: none;
  }

  html.is-android .admin-glass-app .table-row > [data-label=""] > * {
    grid-column: 1;
  }

  html.is-android .admin-glass-app .table-row > [data-label]:last-child {
    border-bottom: 0;
  }
}

/* Responsive 1600x720 hero frame: every uploaded ratio fills the frame. */
.home-slider,
html.is-android .home-slider {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1600 / 720 !important;
}

.home-slider__slide,
.home-slider__slide.is-active,
html.is-android .home-slider__slide,
html.is-android .home-slider__slide.is-active {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  min-height: 0 !important;
  transform: none !important;
}

.home-slider__slide > .home-slider__media,
.home-slider__slide > img,
.home-slider__slide > video,
html.is-android .home-slider__slide > .home-slider__media,
html.is-android .home-slider__slide > img,
html.is-android .home-slider__slide > video {
  width: 100% !important;
  height: 100% !important;
  /* The frame owns the responsive 1600/720 ratio. Media of every intrinsic
     ratio must fill that frame; tying the media box to the old asset ratio and
     using contain produced visible letterboxing for portrait/square uploads. */
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center !important;
  animation: none !important;
  transform: none !important;
}

html.is-android .home-slider__slide::before {
  display: block !important;
}

html.is-android .home-slider__copy {
  position: absolute !important;
  inset: auto !important;
  inset-inline-start: auto !important;
  inset-inline-end: clamp(22px, 5.2vw, 74px) !important;
  top: 50% !important;
  bottom: auto !important;
  grid-row: auto !important;
  width: min(55%, 720px) !important;
  max-width: min(55%, 720px) !important;
  transform: translateY(-50%) !important;
  border-top: 0 !important;
  background: transparent !important;
}

:where(.home-slider__nav, .infinite-carousel__nav, .slider-arrow) {
  aspect-ratio: 1 / 1 !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
}

@media (max-width: 760px) {
  .home-slider {
    width: calc(100% - 16px) !important;
    margin-top: 10px !important;
    border-radius: 17px !important;
  }

  .home-slider__copy,
  html.is-android .home-slider__copy {
    position: absolute !important;
    inset: auto 48px auto 48px !important;
    top: 50% !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100% - 12px) !important;
    display: grid !important;
    align-content: center;
    gap: 3px;
    padding: 6px 9px !important;
    overflow: hidden !important;
    border: 1px solid rgb(255 255 255 / .16) !important;
    border-radius: 11px !important;
    background: linear-gradient(90deg, rgb(2 6 23 / .74), rgb(2 6 23 / .42)) !important;
    transform: translateY(-50%) !important;
  }

  .home-slider__copy::before {
    display: none !important;
  }

  .home-slider__kicker {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 2px 6px !important;
    font-size: clamp(.58rem, 2.2vw, .7rem) !important;
    line-height: 1.35 !important;
  }

  .home-slider__copy h2 {
    max-width: 100% !important;
    margin: 0 !important;
    display: -webkit-box;
    overflow: hidden;
    font-size: clamp(.82rem, 3.5vw, 1.18rem) !important;
    line-height: 1.28 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .home-slider__copy p {
    max-width: 100% !important;
    margin: 0 !important;
    overflow: hidden;
    font-size: clamp(.58rem, 2.2vw, .72rem) !important;
    line-height: 1.45 !important;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .home-slider__actions,
  html.is-android .home-slider__actions {
    min-width: 0;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    margin-top: 2px !important;
  }

  .home-slider__button,
  html.is-android .home-slider__button {
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(50% - 3px) !important;
    min-height: 28px !important;
    max-height: 32px;
    flex: 0 1 auto !important;
    padding: 4px 8px !important;
    overflow: hidden;
    border-radius: 8px !important;
    font-size: clamp(.58rem, 2.15vw, .7rem) !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis;
  }

  .home-slider__actions > :only-child {
    max-width: 100% !important;
  }

  .home-slider__controls,
  html.is-android .home-slider__controls {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
  }

  .home-slider__nav,
  html.is-android .home-slider__nav {
    top: 50% !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 40px !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    transform: translateY(-50%) !important;
  }

  .home-slider__nav--prev { right: 6px !important; }
  .home-slider__nav--next { left: 6px !important; }

  .home-slider__dots,
  html.is-android .home-slider__dots {
    top: 6px !important;
    bottom: auto !important;
    padding: 5px 7px !important;
  }
}

@media (max-width: 390px) {
  .home-slider__copy,
  html.is-android .home-slider__copy {
    inset-inline: 44px !important;
    padding: 5px 7px !important;
  }

  .home-slider__copy p {
    display: none !important;
  }

  .home-slider__kicker {
    font-size: .56rem !important;
  }

  .home-slider__copy h2 {
    font-size: clamp(.76rem, 3.4vw, .92rem) !important;
  }
}

/* 2026-07-13: final light-theme, editor contrast, and low-end mobile authority. */
:root {
  color-scheme: light;
  --bg: #f6f8fc;
  --bg-soft: #f1f4f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --panel: #ffffff;
  --panel-border: #dfe5ef;
  --text: #172033;
  --muted: #667085;
  --shadow: 0 10px 30px rgb(31 45 78 / .08);
  --app-bg: #f6f8fc;
  --app-surface: #ffffff;
  --app-surface-soft: #f8fafc;
  --app-border: #dfe5ef;
  --app-text: #172033;
  --app-muted: #667085;
  --app-focus: #4f46e5;
}

body,
:where(.site-shell, .profile-shell, .auth-shell, .admin-shell, .admin-glass-app) {
  --theme-text: var(--app-text);
  --theme-muted: var(--app-muted);
  --theme-bg-a: #f8fafc;
  --theme-bg-b: #f4f7fb;
  --theme-bg-c: #ffffff;
  --theme-surface-a: rgb(255 255 255 / .98);
  --theme-surface-b: rgb(248 250 252 / .96);
  --theme-border: color-mix(in srgb, var(--accent-2, #6366f1) 26%, #dfe5ef);
  --theme-border-soft: color-mix(in srgb, var(--accent-2, #6366f1) 12%, #dfe5ef);
  --ui-on-dark: var(--app-text);
  --ui-muted-on-dark: var(--app-muted);
  --ui-dark-a: #f8fafc;
  --ui-dark-b: #f4f7fb;
  --ui-dark-c: #ffffff;
}

html,
body {
  background-color: var(--app-bg) !important;
  color: var(--app-text);
}

body {
  background:
    radial-gradient(circle at 92% 0, color-mix(in srgb, var(--ui-secondary, #6366f1) 5%, transparent), transparent 26rem),
    linear-gradient(180deg, #ffffff 0, var(--app-bg) 46%, #ffffff 100%) !important;
  background-attachment: scroll !important;
}

:where(.site-shell, .profile-shell, .auth-shell, .admin-shell, .admin-glass-app) {
  color: var(--app-text) !important;
  background:
    radial-gradient(circle at 92% 0, color-mix(in srgb, var(--ui-secondary, #6366f1) 5%, transparent), transparent 26rem),
    radial-gradient(circle at 6% 96%, color-mix(in srgb, var(--ui-edge, #d7b56d) 4%, transparent), transparent 28rem),
    linear-gradient(180deg, #ffffff, var(--app-bg) 44%, #ffffff) !important;
  background-attachment: scroll !important;
}

.site-shell :where(.site-header, .footer, .mobile-site-nav, .mega-panel, .submenu-panel,
  .glass-card, .content-band:not(.vision-panel):not([style*="background-image"]), .liquid-panel, .section-card, .article-card, .product-card,
  .service-card, .route-state, .empty-state, .shop-filters, .shop-notice, .cart-card,
  .checkout-card, .tracking-panel, .public-page-card, .impact-band, .impact-band > div,
  .product-gallery, .product-summary, .payment-method, .article-detail, .dynamic-panel,
  .form-section, .comment-form-wrap, .comment-card, .contact-card, .contact-line,
  .review-card, .review-form-wrap, .choice-card, .saved-address, .new-address-fields,
  .account-identity-summary > div, .spec-builder-row, .config-list > button,
  .donation-form, .payment-result-shell, .approved-response-card, .submission-values > div,
  .response-category-card, .supporter-card, .relation-picker),
.profile-shell :where(.profile-sidebar, .profile-form-card, .profile-welcome, .address-card,
  .user-order-card, .favorite-panel-card, .profile-course-card, .profile-dashboard-grid > a,
  .review-card, .account-identity-summary > div),
.auth-shell :where(.login-panel, .glass-surface, .account-auth-card, .profile-completion-card),
.admin-glass-app :where(.login-panel, .relation-picker) {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: rgb(255 255 255 / .96) !important;
  box-shadow: 0 10px 30px rgb(31 45 78 / .08), inset 0 1px #fff !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.04) !important;
  backdrop-filter: blur(10px) saturate(1.04) !important;
}

.site-shell :where(h1, h2, h3, h4, h5, h6, strong),
.profile-shell :where(h1, h2, h3, h4, h5, h6, strong),
.auth-shell :where(h1, h2, h3, h4, h5, h6, strong) {
  color: var(--app-text) !important;
}

.site-shell :where(p, small, .muted, .field-hint),
.profile-shell :where(p, small, .muted, .field-hint),
.auth-shell :where(p, small, .muted, .field-hint, .auth-hint) {
  color: var(--app-muted) !important;
}

/* Text rendered on top of photography must keep its media-safe contrast. */
.site-shell :where(.home-slider__copy, .home-slider__copy h2, .home-slider__copy p,
  .home-slider__kicker, .home-slider__button, .home-hero .hero-content,
  .home-hero .hero-content h1, .home-hero .hero-content p) {
  color: #ffffff !important;
}

.site-shell :where(.site-header, .footer) {
  background: rgb(255 255 255 / .96) !important;
}

.site-shell :where(.desktop-navigation a, .public-menu details > summary, .nav-leaf,
  .footer-links a, .footer-contact a, .footer-contact span, .header-icon-action,
  .brand-copy strong, .mobile-nav-heading strong) {
  color: #344054 !important;
}

.site-shell :where(.brand-copy small, .mobile-nav-heading small, .nav-leaf small) {
  color: #667085 !important;
}

.site-shell :where(.desktop-navigation a:hover, .public-menu details > summary:hover,
  .public-menu details[open] > summary, .nav-leaf:hover, .footer-links a:hover,
  .header-icon-action:hover) {
  color: #172033 !important;
  border-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 24%, var(--app-border)) !important;
  background: color-mix(in srgb, var(--ui-secondary, #6366f1) 8%, #fff) !important;
  filter: none !important;
}

.site-shell .footer {
  border-top-color: var(--app-border) !important;
  box-shadow: 0 -8px 28px rgb(31 45 78 / .05) !important;
}

.site-shell :where(.footer-symbols img, .footer-socials a) {
  color: #344054 !important;
  border-color: var(--app-border) !important;
  background: #ffffff !important;
}

.profile-shell .profile-sidebar {
  background: #ffffff !important;
}

.profile-shell :where(.profile-brand, .profile-page-header h1, .profile-welcome h2,
  .favorite-panel-card h3 a, .profile-phone) {
  color: var(--app-text) !important;
}

.profile-shell :where(.profile-nav a, .profile-sidebar-footer a,
  .profile-sidebar-footer button, .user-order-items > div, .address-card p,
  .address-card small, .profile-course-meta span, .profile-course-contact) {
  color: var(--app-muted) !important;
}

.profile-shell :where(.profile-nav a:hover, .profile-nav a.active) {
  color: #27364d !important;
  border-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 20%, var(--app-border)) !important;
  background: color-mix(in srgb, var(--ui-secondary, #6366f1) 9%, #fff) !important;
}

.profile-shell :where(.choice-card.active, .saved-address.active, .in-cart-panel,
  .secure-checkout-note) {
  color: #344054 !important;
  border-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 26%, var(--app-border)) !important;
  background: color-mix(in srgb, var(--ui-secondary, #6366f1) 8%, #fff) !important;
}

.profile-menu-toggle {
  border-color: var(--app-border) !important;
  background: #ffffff !important;
  box-shadow: 0 6px 20px rgb(31 45 78 / .10) !important;
}

.profile-menu-toggle span {
  background: #475467 !important;
}

/* All form controls remain neutral; theme colors are reserved for focus and actions. */
.site-shell :where(.input, input.input, textarea.input, select.input, .textarea),
.profile-shell :where(.input, input.input, textarea.input, select.input, .textarea),
.auth-shell :where(.input, input.input, textarea.input, select.input, .textarea),
.admin-glass-app .admin-content :where(.input, input.input, textarea.input, select.input, .textarea) {
  color: var(--app-text) !important;
  caret-color: var(--app-focus) !important;
  border-color: var(--app-border) !important;
  background: #ffffff !important;
  box-shadow: inset 0 1px rgb(255 255 255 / .9) !important;
}

:where(.input, input.input, textarea.input, select.input)::placeholder {
  color: #98a2b3 !important;
  opacity: 1;
}

:where(.input, input.input, textarea.input, select.input):focus {
  border-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 48%, #aab4c4) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-secondary, #6366f1) 13%, transparent) !important;
}

.input.ltr,
input.input.ltr,
textarea.input.ltr,
select.input.ltr {
  direction: ltr;
  text-align: left;
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: #ffffff !important;
}

:where(select.input, select.rich-format-select) option {
  color: var(--app-text);
  background: #ffffff;
}

.site-shell :where(.btn-secondary, a.btn-secondary, button.btn-secondary),
.profile-shell :where(.btn-secondary, a.btn-secondary, button.btn-secondary),
.auth-shell :where(.btn-secondary, a.btn-secondary, button.btn-secondary) {
  color: #344054 !important;
  border-color: var(--app-border) !important;
  background: #ffffff !important;
  box-shadow: 0 4px 14px rgb(31 45 78 / .06) !important;
}

.site-shell :where(.btn-secondary, a.btn-secondary, button.btn-secondary):hover,
.profile-shell :where(.btn-secondary, a.btn-secondary, button.btn-secondary):hover,
.auth-shell :where(.btn-secondary, a.btn-secondary, button.btn-secondary):hover {
  color: #172033 !important;
  border-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 22%, var(--app-border)) !important;
  background: color-mix(in srgb, var(--ui-secondary, #6366f1) 7%, #fff) !important;
  filter: none !important;
}

/* The toolbar itself is white; only hover and selected tools carry accent color. */
.admin-glass-app .rich-editor,
.rich-editor {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: #ffffff !important;
  box-shadow: 0 8px 24px rgb(31 45 78 / .07) !important;
}

.admin-glass-app .rich-toolbar,
.rich-toolbar {
  color: var(--app-text) !important;
  border-bottom-color: var(--app-border) !important;
  background: #ffffff !important;
  box-shadow: 0 5px 16px rgb(31 45 78 / .06) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.admin-glass-app .rich-tool-group,
.rich-tool-group {
  border-inline-end-color: var(--app-border) !important;
}

.admin-glass-app .rich-toolbar button,
.admin-glass-app .rich-toolbar .rich-upload,
.admin-glass-app .rich-toolbar .rich-format-select,
.rich-toolbar button,
.rich-toolbar .rich-upload,
.rich-toolbar .rich-format-select {
  color: #344054 !important;
  border-color: var(--app-border) !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.admin-glass-app .rich-toolbar button:hover,
.admin-glass-app .rich-toolbar .rich-upload:hover,
.admin-glass-app .rich-toolbar .rich-format-select:hover,
.rich-toolbar button:hover,
.rich-toolbar .rich-upload:hover,
.rich-toolbar .rich-format-select:hover {
  color: #172033 !important;
  border-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 28%, var(--app-border)) !important;
  background: color-mix(in srgb, var(--ui-secondary, #6366f1) 9%, #fff) !important;
  filter: none !important;
  transform: none !important;
}

.admin-glass-app .rich-toolbar button.active,
.rich-toolbar button.active,
.rich-toolbar button[aria-pressed="true"] {
  color: #172033 !important;
  border-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 38%, var(--app-border)) !important;
  background: color-mix(in srgb, var(--ui-secondary, #6366f1) 14%, #fff) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-secondary, #6366f1) 10%, transparent) !important;
}

.rich-toolbar .danger-tool:hover {
  color: #b42318 !important;
  border-color: #fecaca !important;
  background: #fff1f2 !important;
}

.admin-glass-app .editor-hint,
.editor-hint {
  color: var(--app-muted) !important;
  border-bottom-color: var(--app-border) !important;
  background: var(--app-surface-soft) !important;
}

.admin-glass-app .rich-surface,
.rich-surface {
  color: var(--app-text) !important;
  background: #ffffff !important;
}

/* Device selector: readable neutral labels with a distinct selected state. */
.segmented-control {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: #ffffff !important;
  box-shadow: 0 3px 12px rgb(31 45 78 / .05) !important;
}

.segmented-control button {
  color: #475467 !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.segmented-control button:hover {
  color: #172033 !important;
  border-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 18%, var(--app-border)) !important;
  background: color-mix(in srgb, var(--ui-secondary, #6366f1) 7%, #fff) !important;
  filter: none !important;
}

.segmented-control button.active,
.segmented-control button[aria-selected="true"],
.segmented-control button[aria-pressed="true"] {
  color: #172033 !important;
  border-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 30%, var(--app-border)) !important;
  background: color-mix(in srgb, var(--ui-secondary, #6366f1) 13%, #fff) !important;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--ui-secondary, #6366f1) 10%, transparent) !important;
}

/* The canvas has no fixed green wash. Inline background-image remains authoritative. */
.visual-stage {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background-color: #f1f4f9 !important;
  background-image:
    linear-gradient(#e8edf5 1px, transparent 1px),
    linear-gradient(90deg, #e8edf5 1px, transparent 1px) !important;
  background-size: 20px 20px !important;
}

.visual-device-frame {
  min-width: 0;
  padding: 28px;
  border-color: var(--app-border) !important;
  background-color: #ffffff !important;
  background-repeat: no-repeat;
  box-shadow: 0 8px 24px rgb(31 45 78 / .08) !important;
}

.visual-content-box {
  color: var(--app-text) !important;
  background: transparent !important;
}

.visual-resize-grip {
  border-color: var(--app-border) !important;
  background: #ffffff !important;
  box-shadow: 0 5px 14px rgb(31 45 78 / .10) !important;
}

.visual-resize-grip::before {
  border-color: #667085 !important;
}

/* Relation pickers use the same white panel and dark type as the form around them. */
fieldset.relation-picker,
fieldset.full.relation-picker,
.relation-picker {
  min-width: 0;
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: #ffffff !important;
  box-shadow: 0 5px 18px rgb(31 45 78 / .05) !important;
}

.relation-picker legend {
  color: #27364d !important;
  background: #ffffff;
}

.relation-picker > p,
.relation-picker :where(small, .muted) {
  color: var(--app-muted) !important;
}

.relation-picker .check-row {
  color: #344054 !important;
  border: 1px solid #e4e9f2 !important;
  border-radius: 12px;
  background: #f8fafc !important;
}

.relation-picker .check-row:hover {
  color: #172033 !important;
  border-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 24%, var(--app-border)) !important;
  background: color-mix(in srgb, var(--ui-secondary, #6366f1) 7%, #fff) !important;
  filter: none !important;
}

.relation-picker :where(input[type="checkbox"], input[type="radio"]) {
  accent-color: #4f46e5;
}

/* Login and all auth surfaces follow the admin panel's white/light language. */
.auth-shell {
  background:
    radial-gradient(circle at 82% 10%, color-mix(in srgb, var(--ui-secondary, #6366f1) 7%, transparent), transparent 25rem),
    linear-gradient(160deg, #ffffff, #f4f7fb 52%, #ffffff) !important;
}

.auth-shell .login-panel,
.auth-shell .login-panel.glass-surface,
.auth-shell .account-auth-card,
.auth-shell .profile-completion-card {
  color: var(--app-text) !important;
  border-color: var(--app-border) !important;
  background: #ffffff !important;
  box-shadow: 0 18px 52px rgb(31 45 78 / .12) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.auth-shell :where(.auth-back-home, .auth-retry, .completion-logout) {
  color: #475467 !important;
}

.auth-shell .auth-tabs {
  border-color: var(--app-border) !important;
  background: #f1f4f9 !important;
}

.auth-shell .auth-tabs button {
  color: #667085 !important;
  background: transparent !important;
}

.auth-shell .auth-tabs button:hover {
  color: #172033 !important;
  background: #ffffff !important;
  filter: none !important;
}

.auth-shell .auth-tabs button.active {
  color: #172033 !important;
  border-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 22%, var(--app-border)) !important;
  background: #ffffff !important;
  box-shadow: 0 5px 16px rgb(31 45 78 / .08) !important;
}

.auth-shell .login-method {
  border-top-color: var(--app-border) !important;
}

:where(.rich-toolbar, .segmented-control, .relation-picker, .login-panel)
  :where(button, input, textarea, select, [role="button"]):focus-visible,
:where(.input, input.input, textarea.input, select.input):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--app-focus) 34%, transparent) !important;
  outline-offset: 2px;
}

/* Layout guards for narrow screens and long CMS values. */
:where(.rich-editor, .rich-toolbar, .visual-editor-toolbar, .visual-tool-row,
  .segmented-control, .visual-stage, .visual-device-frame,
  .relation-picker, .relation-check-grid, .login-panel) {
  max-width: 100%;
}

:where(.visual-editor-toolbar, .visual-tool-row, .relation-check-grid,
  .profile-dashboard-grid, .form-grid) > * {
  min-width: 0;
}

.relation-picker :where(label, span, small),
.segmented-control button,
.rich-toolbar :where(button, select) {
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .relation-picker {
    padding: 14px !important;
  }

  .relation-check-grid {
    grid-template-columns: 1fr;
  }

  .segmented-control {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .segmented-control button {
    min-width: max-content;
    flex: 1 0 auto;
  }

  .rich-toolbar {
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .visual-device-frame {
    min-height: 360px;
  }

  .visual-device-frame {
    padding: 14px;
  }

  .visual-stage {
    padding: 8px;
  }
}

@media (hover: none) and (pointer: coarse) {
  :where(a, button, summary, [role="button"], .check-row, .table-row):hover {
    filter: none !important;
    transform: none !important;
  }
}

/* Android lite mode keeps the same accessible light palette with a much smaller paint budget. */
html.is-android body,
html.is-android :where(.site-shell, .profile-shell, .auth-shell, .admin-shell, .admin-glass-app) {
  background: #f6f8fc !important;
  background-image: none !important;
}

html.is-android .site-shell :where(.site-header, .footer, .mobile-site-nav, .mega-panel,
  .submenu-panel, .glass-card, .content-band, .liquid-panel, .section-card, .article-card,
  .product-card, .service-card, .route-state, .empty-state, .shop-filters, .shop-notice,
  .cart-card, .checkout-card, .tracking-panel, .public-page-card, .dynamic-panel,
  .form-section, .comment-form-wrap, .relation-picker),
html.is-android .profile-shell :where(.profile-sidebar, .profile-form-card, .profile-welcome,
  .address-card, .user-order-card, .favorite-panel-card, .profile-course-card),
html.is-android .auth-shell :where(.login-panel, .glass-surface, .account-auth-card,
  .profile-completion-card),
html.is-android .admin-glass-app :where(.admin-template-panel, .admin-section, .glass-card,
  .admin-sidebar, .admin-topbar, .relation-picker),
html.is-android :where(.rich-editor, .rich-toolbar, .visual-stage, .visual-device-frame,
  .media-library-panel, .admin-table, .home-slider, .editor-dialog) {
  box-shadow: 0 2px 8px rgb(31 45 78 / .06) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.is-android :where(.site-header, .footer, .mobile-site-nav, .profile-sidebar,
  .admin-sidebar, .admin-topbar, .rich-toolbar) {
  background-color: #ffffff !important;
}

html.is-android :where(.site-header, .admin-topbar, .cart-summary,
  .checkout-summary, .review-form-wrap) {
  transform: translateZ(0);
  will-change: auto !important;
}

html.is-android .site-shell .content-area :where(.section-card, .article-card,
  .product-card, .service-card, .fajr-video-card, .course-card, .campaign-card,
  .member-card, .supporter-card) {
  content-visibility: auto;
  contain-intrinsic-size: auto 340px;
}

@media (max-width: 760px) {
  html.is-android :where(.rich-toolbar button, .rich-upload, .rich-format-select,
    .segmented-control button) {
    min-height: 44px;
  }

  html.is-android :where(.relation-picker, .login-panel, .admin-section,
    .profile-form-card, .content-band) {
    border-radius: 18px !important;
  }
}

/* Image-only slider contract: the asset is clear, clickable, and never veiled by legacy copy. */
.home-slider--image-only .home-slider__slide::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

.home-slider--image-only :where(.home-slider__copy, .home-slider__kicker,
  .home-slider__actions, .home-slider__button) {
  display: none !important;
}

.home-slider--image-only .home-slider__slide {
  cursor: pointer;
  background: #ffffff !important;
}

.home-slider--image-only {
  background: #ffffff !important;
}

.home-slider--image-only .home-slider__media {
  background: #ffffff !important;
  filter: none !important;
}

/* Android editor handles: larger touch targets and a stable compositor-only drag ghost. */
html.is-android .editor-media-overlay {
  border-color: var(--app-focus) !important;
  border-radius: 14px;
  touch-action: none;
}

html.is-android .editor-resize-handle {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  border: 3px solid #ffffff !important;
  border-radius: 50% !important;
  background: var(--app-focus) !important;
  box-shadow: 0 2px 8px rgb(31 45 78 / .20) !important;
  pointer-events: auto !important;
  touch-action: none !important;
  -webkit-user-select: none;
  user-select: none;
}

html.is-android .editor-media-overlay,
html.is-android .editor-media-overlay *,
html.is-android .editor-figure,
html.is-android .editor-figure .editor-media {
  -ms-touch-action: none !important;
  touch-action: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

html.is-android .editor-figure[data-align="free"] {
  will-change: left, top !important;
}

html.is-android .handle-nw { inset: -21px auto auto -21px; }
html.is-android .handle-n { inset: -21px auto auto 50%; }
html.is-android .handle-ne { inset: -21px -21px auto auto; }
html.is-android .handle-e { inset: 50% -21px auto auto; }
html.is-android .handle-se { inset: auto -21px -21px auto; }
html.is-android .handle-s { inset: auto auto -21px 50%; }
html.is-android .handle-sw { inset: auto auto -21px -21px; }
html.is-android .handle-w { inset: 50% auto auto -21px; }

html.is-android .editor-figure.is-selected-media {
  touch-action: none !important;
}

html.is-android .editor-figure.is-dragging-media {
  opacity: .38 !important;
}

html.is-android .editor-media-ghost {
  position: fixed !important;
  z-index: 10020 !important;
  max-width: calc(100vw - 16px) !important;
  max-height: calc(100dvh - 16px) !important;
  margin: 0 !important;
  opacity: .88 !important;
  pointer-events: none !important;
  transform: none !important;
  filter: none !important;
  box-shadow: 0 8px 24px rgb(31 45 78 / .18) !important;
  contain: layout paint style;
}

html.is-android .editor-media-ghost * {
  pointer-events: none !important;
}

html.is-android .editor-media-drop-marker {
  border-block-start-color: var(--app-focus) !important;
  pointer-events: none !important;
}

html.is-android .news-ticker__signal::before,
html.is-android .news-ticker::before,
html.is-android .news-ticker__viewport::before,
html.is-android .news-ticker__flare {
  animation: none !important;
}

/* 2026-07-17: stable media frames and touch-friendly editing controls. */
.site-shell .courses-preview .course-card {
  display: flex !important;
  flex-direction: column;
  min-height: 100%;
}

.site-shell .courses-preview .course-card > img {
  display: block !important;
  flex: 0 0 auto;
  width: 100% !important;
  height: clamp(158px, 16vw, 218px) !important;
  aspect-ratio: auto !important;
  margin: 0 0 14px !important;
  object-fit: cover !important;
  object-position: center center;
  border-radius: 18px;
}

.site-shell .courses-preview .course-card > p {
  min-height: 3.8em;
}

@media (max-width: 720px) {
  .site-shell .courses-preview .course-card > img {
    height: clamp(156px, 48vw, 230px) !important;
  }
}

html.is-android .rich-toolbar {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 8px !important;
  padding: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin;
}

html.is-android .rich-tool-group {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 6px !important;
  padding-inline: 0 8px !important;
}

html.is-android .rich-toolbar :where(button, .rich-upload, .rich-format-select) {
  flex: 0 0 auto !important;
  min-width: 44px !important;
  min-height: 44px !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  font-size: .78rem !important;
  line-height: 1.2 !important;
}

html.is-android .rich-toolbar .rich-format-select {
  min-width: 132px !important;
}

/* 2026-07-13: final public light-card and Android interaction authority. */
.site-shell .read-link {
  color: color-mix(in srgb, var(--ui-secondary, #6366f1) 32%, #27364d) !important;
  text-decoration-line: underline;
  text-decoration-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 38%, transparent);
  text-decoration-thickness: .08em;
  text-underline-offset: .24em;
}

.site-shell .read-link:hover,
.site-shell .read-link:focus-visible {
  color: #172033 !important;
  text-decoration-color: var(--ui-secondary, #6366f1);
}

.site-shell .trust-metrics {
  color: #172033 !important;
  border-color: #dfe5ef !important;
  background: linear-gradient(135deg, #ffffff, #f7f9fd) !important;
  box-shadow: 0 18px 48px rgb(31 45 78 / .09) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.site-shell .trust-metrics::before {
  content: none !important;
  display: none !important;
}

.site-shell .trust-metrics > .trust-metrics__intro,
.site-shell .trust-metrics > .trust-metrics__cards {
  color: #172033 !important;
}

.site-shell .trust-metrics__intro .section-kicker {
  color: color-mix(in srgb, var(--ui-secondary, #6366f1) 30%, #27364d) !important;
}

.site-shell .trust-metrics__intro h2 {
  color: #172033 !important;
}

.site-shell .trust-metrics__intro p {
  color: #475467 !important;
}

.site-shell .trust-stat-card {
  color: #172033 !important;
  border-color: #dfe5ef !important;
  background: #ffffff !important;
  box-shadow: 0 10px 28px rgb(31 45 78 / .08) !important;
}

.site-shell .trust-stat-card::after {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--ui-secondary, #6366f1) 68%, #27364d),
    color-mix(in srgb, var(--ui-primary, #2563eb) 28%, #ffffff)) !important;
}

.site-shell .trust-stat-card small {
  color: #475467 !important;
}

.site-shell .trust-stat-card strong {
  color: color-mix(in srgb, var(--ui-secondary, #6366f1) 48%, #172033) !important;
}

.site-shell .trust-stat-card span {
  color: #667085 !important;
}

.site-shell .fajr-video-card,
.site-shell .reports-archive-grid .fajr-video-card,
.site-shell .report-card,
.site-shell .need-registration-panel,
.site-shell .partner-mini-card,
.site-shell .partner-card,
.site-shell .campaign-card,
.site-shell .course-card,
.site-shell .member-card,
.site-shell .supporter-card,
.site-shell :where(.home-report-card, .trust-card, .trust-panel, .impact-card,
  .support-card, .pledge-card, .contact-card) {
  color: #172033 !important;
  border-color: #dfe5ef !important;
  background: #ffffff !important;
  box-shadow: 0 10px 30px rgb(31 45 78 / .08) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.site-shell .fajr-video-card > div:not(.video-thumb),
.site-shell .report-card > div:not(.video-thumb) {
  color: #172033 !important;
  background: #ffffff !important;
}

.site-shell .fajr-video-card > .video-thumb,
.site-shell .report-card > .video-thumb {
  padding: 0 !important;
  gap: 0 !important;
  color: #ffffff !important;
  background: #061812 !important;
}

.site-shell :is(.fajr-video-card, .report-card) h3,
.site-shell :is(.fajr-video-card, .report-card) h3 a,
.site-shell :is(.need-registration-panel, .partner-mini-card, .partner-card,
  .campaign-card, .course-card, .member-card, .supporter-card,
  .home-report-card, .trust-card, .impact-card, .support-card,
  .pledge-card, .contact-card) :is(h2, h3, h4, strong) {
  color: #172033 !important;
}

.site-shell :is(.fajr-video-card, .report-card) p,
.site-shell :is(.fajr-video-card, .report-card) small,
.site-shell :is(.need-registration-panel, .partner-mini-card, .partner-card,
  .campaign-card, .course-card, .member-card, .supporter-card,
  .home-report-card, .trust-card, .impact-card, .support-card,
  .pledge-card, .contact-card) :is(p, small, .muted, .card-meta) {
  color: #667085 !important;
}

.site-shell :is(.fajr-video-card, .report-card) > div:not(.video-thumb) > span:first-child {
  width: fit-content;
  padding: 4px 9px;
  color: #475467 !important;
  border: 1px solid color-mix(in srgb, var(--ui-secondary, #6366f1) 14%, #dfe5ef);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ui-secondary, #6366f1) 7%, #ffffff) !important;
}

.admin-glass-app .rich-toolbar button,
.rich-toolbar button,
.rich-toolbar .rich-upload,
.rich-toolbar .rich-format-select {
  color: #344054 !important;
  -webkit-text-fill-color: #344054 !important;
}

.admin-glass-app .rich-toolbar button:hover,
.admin-glass-app .rich-toolbar button:focus-visible,
.admin-glass-app .rich-toolbar button.active,
.admin-glass-app .rich-toolbar button[aria-pressed="true"],
.rich-toolbar button:hover,
.rich-toolbar button:focus-visible,
.rich-toolbar button.active,
.rich-toolbar button[aria-pressed="true"],
.rich-toolbar .rich-upload:hover,
.rich-toolbar .rich-format-select:hover,
.rich-toolbar .rich-format-select:focus-visible {
  color: #172033 !important;
  -webkit-text-fill-color: #172033 !important;
}

.infinite-carousel > .infinite-carousel__nav,
.infinite-carousel .infinite-carousel__nav--forward,
.infinite-carousel .infinite-carousel__nav--back {
  inline-size: 44px !important;
  block-size: 44px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  flex: 0 0 44px !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  line-height: 1 !important;
}

html:not(.is-android) :where(a[href], button, summary, [role="button"], label[for],
  input[type="button"], input[type="submit"], input[type="reset"]) {
  -webkit-tap-highlight-color: revert !important;
}

html.is-android :where(a[href], button, summary, [role="button"], label[for],
  input[type="button"], input[type="submit"], input[type="reset"]) {
  -webkit-tap-highlight-color: transparent !important;
}

html.is-android :where(a[href], button, summary, [role="button"],
  input[type="button"], input[type="submit"], input[type="reset"]):focus-visible {
  outline: 3px solid var(--app-focus, #4f46e5) !important;
  outline-offset: 3px !important;
}

.home-slider--image-only .home-slider__dots {
  border: 1px solid rgb(255 255 255 / .72) !important;
  background: rgb(15 23 42 / .68) !important;
  box-shadow: 0 8px 20px rgb(15 23 42 / .28) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.home-slider--image-only .home-slider__dot {
  inline-size: 10px !important;
  block-size: 10px !important;
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;
  max-width: 10px !important;
  max-height: 10px !important;
  border: 1px solid rgb(255 255 255 / .92) !important;
  background: rgb(255 255 255 / .58) !important;
  box-shadow: none !important;
}

.home-slider--image-only .home-slider__dot:is(.is-active, [aria-selected="true"]) {
  inline-size: 30px !important;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  border-color: #172033 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 2px rgb(255 255 255 / .92), 0 5px 14px rgb(15 23 42 / .42) !important;
}

.home-slider--image-only .home-slider__nav {
  color: #ffffff !important;
  border-color: rgb(255 255 255 / .88) !important;
  background: rgb(15 23 42 / .78) !important;
  box-shadow: 0 8px 22px rgb(15 23 42 / .38) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.home-slider--image-only .home-slider__nav:hover,
.home-slider--image-only .home-slider__nav:focus-visible {
  color: #ffffff !important;
  border-color: #ffffff !important;
  background: #172033 !important;
}

/* 2026-07-14: restrained accent tints on the established light surfaces. */
.site-shell .section-kicker:not([style]),
.site-shell :where(.status-chip:not(.published):not(.draft):not(.failed), .featured-badge) {
  color: color-mix(in srgb, var(--ui-secondary, #6366f1) 28%, #27364d) !important;
  border: 1px solid color-mix(in srgb, var(--ui-secondary, #6366f1) 18%, #dfe5ef) !important;
  background: color-mix(in srgb, var(--ui-secondary, #6366f1) 7%, #ffffff) !important;
}

.site-shell :is(.fajr-video-card, .report-card) > div:not(.video-thumb) > span:first-child {
  color: color-mix(in srgb, var(--ui-secondary, #6366f1) 28%, #27364d) !important;
  border-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 20%, #dfe5ef) !important;
  background: color-mix(in srgb, var(--ui-secondary, #6366f1) 8%, #ffffff) !important;
}

.site-shell :is(.fajr-video-card, .report-card, .trust-stat-card, .trust-card,
  .article-card, .product-card, .course-card, .campaign-card, .member-card,
  .partner-card, .supporter-card) {
  border-block-start-width: 2px !important;
  border-block-start-style: solid !important;
  border-block-start-color: color-mix(in srgb, var(--ui-primary, #2563eb) 36%, #dfe5ef) !important;
}

.site-shell :where(.btn-secondary, a.btn-secondary, button.btn-secondary) {
  color: color-mix(in srgb, var(--ui-secondary, #6366f1) 26%, #27364d) !important;
  border-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 18%, #dfe5ef) !important;
  background: color-mix(in srgb, var(--ui-secondary, #6366f1) 5%, #ffffff) !important;
}

.site-shell :where(.btn-secondary, a.btn-secondary, button.btn-secondary):is(
  :hover, :focus-visible, .active, [aria-pressed="true"]) {
  color: #172033 !important;
  border-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 32%, #dfe5ef) !important;
  background: color-mix(in srgb, var(--ui-secondary, #6366f1) 9%, #ffffff) !important;
}

.site-shell .tab-pills :where(a, button) {
  color: color-mix(in srgb, var(--ui-secondary, #6366f1) 26%, #27364d) !important;
  border: 1px solid color-mix(in srgb, var(--ui-secondary, #6366f1) 16%, #dfe5ef) !important;
  background: color-mix(in srgb, var(--ui-secondary, #6366f1) 5%, #ffffff) !important;
}

.site-shell .tab-pills :where(a, button):is(
  :hover, :focus-visible, .active, [aria-current="page"], [aria-selected="true"]) {
  color: #172033 !important;
  border-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 34%, #dfe5ef) !important;
  background: color-mix(in srgb, var(--ui-secondary, #6366f1) 10%, #ffffff) !important;
}

/* 2026-07-14: final contrast, colored depth, and container-fit authority. */
:where(.site-shell, .profile-shell, .auth-shell, .admin-glass-app) {
  --action-primary: color-mix(in srgb, var(--ui-primary, var(--accent, #2563eb)) 35%, #172033);
  --action-secondary: color-mix(in srgb, var(--ui-secondary, var(--accent-2, #6366f1)) 38%, #172033);
  --accent-shadow-a: color-mix(in srgb, var(--ui-primary, var(--accent, #2563eb)) 9%, transparent);
  --accent-shadow-b: color-mix(in srgb, var(--ui-secondary, var(--accent-2, #6366f1)) 7%, transparent);
}

/* The content root owns the viewport; page-width children must not be clipped by the old 1180px wrapper. */
.content-area,
.site-shell > .content-area {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  margin-inline: 0 !important;
  overflow-x: visible;
}

:where(.site-shell, .profile-shell, .auth-shell, .admin-glass-app)
  :where(.content-area, .admin-content, .public-page-header, .content-band,
    .content-engagement-grid, .dynamic-panel, .form-section, .form-grid,
    .option-list, form, fieldset, .admin-section, .admin-table, .table-row,
    .row-actions, .relation-picker) {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

:where(.site-shell, .profile-shell, .auth-shell, .admin-glass-app)
  :where(.form-grid, .content-engagement-grid, .admin-grid, .table-row) > * {
  min-width: 0;
  max-width: 100%;
}

:where(.site-shell, .profile-shell, .auth-shell, .admin-glass-app)
  :where(.prose-rtl, .public-page-content, .article-body, .dynamic-panel,
    .admin-content, .table-row, .relation-picker, .notice-box) {
  overflow-wrap: anywhere;
}

:where(.site-shell, .profile-shell, .auth-shell, .admin-glass-app)
  :where(img, video, iframe, canvas) {
  max-width: 100%;
}

/* A restrained two-color shadow gives public cards the same depth language as the admin panel. */
.site-shell :is(.content-band, .glass-card, .liquid-panel, .section-card,
  .article-card, .product-card, .service-card, .report-card, .fajr-video-card,
  .course-card, .campaign-card, .member-card, .partner-card, .supporter-card,
  .trust-stat-card, .dynamic-panel, .donation-panel, .donation-form,
  .survey-panel, .survey-card, .contact-card),
.profile-shell :is(.profile-sidebar, .profile-form-card, .profile-welcome,
  .address-card, .user-order-card, .favorite-panel-card, .profile-course-card),
.admin-glass-app .admin-content :is(.admin-section, .glass-card,
  .admin-template-panel, .admin-table, .builder-lite-panel, .media-library-panel) {
  box-shadow:
    0 18px 46px var(--accent-shadow-a),
    0 7px 22px var(--accent-shadow-b),
    inset 0 1px rgb(255 255 255 / .94) !important;
}

/* Dynamic theme colors are anchored to dark ink so action labels stay WCAG-readable. */
:where(.site-shell, .profile-shell, .auth-shell, .admin-glass-app)
  :where(.btn-primary, a.btn-primary, button.btn-primary) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: color-mix(in srgb, var(--action-primary) 78%, #172033) !important;
  background: linear-gradient(135deg, var(--action-primary), var(--action-secondary)) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ui-primary, var(--accent, #2563eb)) 18%, transparent) !important;
  text-shadow: 0 1px 1px rgb(15 23 42 / .28);
}

:where(.site-shell, .profile-shell, .auth-shell, .admin-glass-app)
  :where(.btn-primary, a.btn-primary, button.btn-primary):is(:hover, :focus-visible) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: color-mix(in srgb, var(--ui-secondary, var(--accent-2, #6366f1)) 30%, #172033) !important;
  filter: brightness(.96) saturate(1.04);
}

/* CMS prose is always dark on the established light content surface, including inline legacy colors. */
.site-shell .public-page-content,
.site-shell .article-body,
.site-shell .prose-rtl {
  color: #344054 !important;
  border-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 18%, #dfe5ef) !important;
}

.site-shell :is(.public-page-content, .article-body, .prose-rtl)
  :where(p, li, dd, dt, td, th, blockquote, figcaption, span:not([class])) {
  color: #475467 !important;
  -webkit-text-fill-color: #475467 !important;
}

.site-shell :is(.public-page-content, .article-body, .prose-rtl)
  :where(h1, h2, h3, h4, h5, h6, strong, b) {
  color: #172033 !important;
  -webkit-text-fill-color: #172033 !important;
}

.site-shell :is(.public-page-content, .article-body, .prose-rtl) a:not(.btn-primary):not(.btn-secondary) {
  color: color-mix(in srgb, var(--ui-secondary, #6366f1) 30%, #27364d) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 30%, #27364d) !important;
  text-decoration-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 46%, transparent);
  text-decoration-thickness: .08em;
  text-underline-offset: .22em;
}

.site-shell :is(.public-page-content, .article-body, .prose-rtl) blockquote {
  border-inline-start-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 34%, #dfe5ef) !important;
  background: color-mix(in srgb, var(--ui-secondary, #6366f1) 5%, #ffffff) !important;
}

.site-shell :is(.public-page-content, .article-body, .prose-rtl) :where(pre, code) {
  color: #27364d !important;
  background: #f1f4f9 !important;
}

.site-shell :is(.public-page-content, .article-body, .prose-rtl) :where(table, pre) {
  max-width: 100%;
  overflow-x: auto;
}

/* Favorite control: no fixed beige/pink palette, and every state is readable on white. */
.site-shell .favorite-content-button {
  max-width: 100%;
  justify-content: center;
  overflow-wrap: anywhere;
  color: #344054 !important;
  -webkit-text-fill-color: #344054 !important;
  border-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 22%, #dfe5ef) !important;
  background: color-mix(in srgb, var(--ui-secondary, #6366f1) 7%, #ffffff) !important;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--ui-secondary, #6366f1) 11%, rgb(31 45 78 / .09)) !important;
}

.site-shell .favorite-content-button:is(:hover, :focus-visible, .active) {
  color: #172033 !important;
  -webkit-text-fill-color: #172033 !important;
  border-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 38%, #dfe5ef) !important;
  background: color-mix(in srgb, var(--ui-secondary, #6366f1) 13%, #ffffff) !important;
}

.site-shell .favorite-content-button:disabled {
  color: #667085 !important;
  -webkit-text-fill-color: #667085 !important;
  opacity: .72;
}

.site-shell .content-favorite-footer {
  max-width: calc(100% - (var(--page-gutter) * 2));
  border-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 16%, #dfe5ef) !important;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--ui-secondary, #6366f1) 4%, #ffffff), transparent) !important;
}

/* Form, poll and response surfaces use light tints; labels and options never inherit old light-on-dark colors. */
.site-shell .dynamic-panel,
.site-shell :where(.survey-panel, .survey-form, .response-display-panel) {
  color: #172033 !important;
  border-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 20%, #dfe5ef) !important;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--ui-primary, #2563eb) 6%, transparent), transparent 18rem),
    linear-gradient(145deg, #ffffff, color-mix(in srgb, var(--ui-secondary, #6366f1) 3%, #ffffff)) !important;
}

.site-shell .dynamic-panel .form-section,
.site-shell :where(.survey-panel, .survey-form) .form-section {
  color: #172033 !important;
  border-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 18%, #dfe5ef) !important;
  background: color-mix(in srgb, var(--ui-secondary, #6366f1) 4%, #ffffff) !important;
  background-image: none !important;
}

.site-shell .dynamic-panel .form-section h3,
.site-shell :where(.survey-panel, .survey-form) .form-section h3 {
  color: #172033 !important;
  -webkit-text-fill-color: #172033 !important;
}

.site-shell .dynamic-panel .option-list,
.site-shell :where(.survey-panel, .survey-form) .option-list {
  border-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.site-shell .dynamic-panel .check-row,
.site-shell :where(.survey-panel, .survey-form) :where(.check-row, .survey-option, .survey-choice) {
  color: #344054 !important;
  border-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 16%, #dfe5ef) !important;
  background: color-mix(in srgb, var(--ui-secondary, #6366f1) 5%, #ffffff) !important;
  background-image: none !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ui-secondary, #6366f1) 5%, transparent) !important;
}

.site-shell .dynamic-panel .check-row:has(input:checked),
.site-shell :where(.survey-panel, .survey-form) :where(.check-row, .survey-option, .survey-choice):has(input:checked) {
  color: #172033 !important;
  border-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 36%, #dfe5ef) !important;
  background: color-mix(in srgb, var(--ui-secondary, #6366f1) 11%, #ffffff) !important;
}

.site-shell .dynamic-panel :where(label > span, .check-row > span),
.site-shell :where(.survey-panel, .survey-form) :where(label > span, .check-row > span) {
  color: #344054 !important;
  -webkit-text-fill-color: #344054 !important;
}

.site-shell .dynamic-panel :where(label > small, .field-hint),
.site-shell :where(.survey-panel, .survey-form) :where(label > small, .field-hint) {
  color: #667085 !important;
  -webkit-text-fill-color: #667085 !important;
}

.site-shell .dynamic-panel :where(.input, input.input, textarea.input, select.input, .textarea),
.site-shell :where(.survey-panel, .survey-form) :where(.input, input.input, textarea.input, select.input, .textarea) {
  color: #172033 !important;
  -webkit-text-fill-color: #172033 !important;
  border-color: #dfe5ef !important;
  background: #ffffff !important;
  background-image: none !important;
}

.site-shell :where(.approved-response-card, .form-response-card, .response-category-card,
  .submission-values > div) {
  color: #344054 !important;
  border-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 17%, #dfe5ef) !important;
  background: color-mix(in srgb, var(--ui-secondary, #6366f1) 4%, #ffffff) !important;
  background-image: none !important;
}

.site-shell :where(.approved-response-card, .form-response-card, .response-category-card)
  :where(strong, b) {
  color: #27364d !important;
}

.site-shell :where(.approved-response-card, .form-response-card, .response-category-card)
  :where(span, p) {
  color: #475467 !important;
}

.site-shell :where(.approved-response-card, .form-response-card, .response-category-card) small {
  color: #667085 !important;
}

/* Notices are shared by public forms, auth and admin workflows. */
:where(.site-shell, .profile-shell, .auth-shell, .admin-glass-app) .notice-box {
  color: #344054 !important;
  border-color: #dfe5ef !important;
  background: #f8fafc !important;
}

:where(.site-shell, .profile-shell, .auth-shell, .admin-glass-app) .notice-box.success {
  color: #17603a !important;
  border-color: #a6e3c1 !important;
  background: #edf9f2 !important;
}

:where(.site-shell, .profile-shell, .auth-shell, .admin-glass-app) .notice-box.error {
  color: #b42318 !important;
  border-color: #f4b8b2 !important;
  background: #fff1f2 !important;
}

:where(.site-shell, .profile-shell, .auth-shell, .admin-glass-app) .notice-box.warning {
  color: #7a2e0e !important;
  border-color: #f5d58b !important;
  background: #fffaeb !important;
}

:where(.site-shell, .profile-shell, .auth-shell, .admin-glass-app) .notice-box a {
  color: currentColor !important;
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* Remaining legacy accent labels are dark-mixed instead of mixed toward white. */
.site-shell .section-kicker,
.site-shell :where(.article-facts span, .article-meta, .section-card > span,
  .product-price, .related-content-card b, .course-card-footer > strong,
  .price-stack strong, .need-registration-panel b, .member-directory-card > span,
  .member-detail-back, .member-position, .supporter-card span,
  .rating-stars, .rating-overview > strong, .donation-fixed strong) {
  color: color-mix(in srgb, var(--ui-secondary, #6366f1) 30%, #27364d) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 30%, #27364d) !important;
}

.site-shell .section-kicker {
  border-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 20%, #dfe5ef) !important;
  background: color-mix(in srgb, var(--ui-secondary, #6366f1) 9%, #ffffff) !important;
}

.site-shell :where(.status-chip.published, .status-chip:not(.published):not(.draft):not(.failed)),
.admin-glass-app :where(.eyebrow, .status-chip:not(.published):not(.draft):not(.failed)),
.profile-shell .eyebrow {
  color: color-mix(in srgb, var(--ui-secondary, var(--accent-2, #6366f1)) 30%, #27364d) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--ui-secondary, var(--accent-2, #6366f1)) 30%, #27364d) !important;
  border: 1px solid color-mix(in srgb, var(--ui-secondary, var(--accent-2, #6366f1)) 18%, #dfe5ef) !important;
  background: color-mix(in srgb, var(--ui-secondary, var(--accent-2, #6366f1)) 7%, #ffffff) !important;
}

.profile-shell :is(.profile-nav a span, .profile-dashboard-grid strong,
  .favorite-panel-card > span, .profile-course-contact a) {
  color: color-mix(in srgb, var(--ui-secondary, #6366f1) 30%, #27364d) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 30%, #27364d) !important;
}

.site-shell :where(.latest-panel, .course-purchase-box, .course-meta span,
  .campaign-finance-row > div, .campaign-deadline, .member-role-section,
  .member-directory > .tab-pills, .donation-fixed) {
  color: #344054 !important;
  border-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 18%, #dfe5ef) !important;
  background: color-mix(in srgb, var(--ui-secondary, #6366f1) 5%, #ffffff) !important;
  background-image: none !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--ui-secondary, #6366f1) 8%, transparent) !important;
}

.site-shell .footer :where(p, span, small, a) {
  color: #475467 !important;
  -webkit-text-fill-color: #475467 !important;
}

.site-shell .footer :where(h2, h3, h4, strong) {
  color: #172033 !important;
}

/* Interactive/dynamic regions must keep their measured height; old content-visibility caused partial cards. */
.site-shell .content-engagement-grid > .dynamic-panel,
.site-shell .dynamic-panel,
.admin-glass-app .admin-content > :where(section, .admin-section, .glass-card) {
  content-visibility: visible !important;
  contain: none !important;
}

.infinite-carousel.is-active {
  padding: 12px 10px 24px !important;
  box-sizing: border-box;
}

.admin-glass-app .admin-table {
  max-width: 100%;
  overflow-x: auto !important;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}

.site-shell .dynamic-panel input[type="file"],
.site-shell :where(.survey-panel, .survey-form) input[type="file"],
.admin-glass-app .admin-content input[type="file"] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 8px;
  color: #344054 !important;
  -webkit-text-fill-color: #344054 !important;
  border: 1px solid #dfe5ef !important;
  border-radius: 12px;
  background: #ffffff !important;
}

:where(.site-shell .dynamic-panel, .site-shell .survey-panel,
  .site-shell .survey-form, .admin-glass-app .admin-content)
  input[type="file"]::file-selector-button {
  min-height: 38px;
  margin-inline-end: 10px;
  padding-inline: 14px;
  color: #27364d;
  border: 1px solid color-mix(in srgb, var(--ui-secondary, var(--accent-2, #6366f1)) 18%, #dfe5ef);
  border-radius: 9px;
  background: color-mix(in srgb, var(--ui-secondary, var(--accent-2, #6366f1)) 7%, #ffffff);
}

:where(.site-shell, .profile-shell, .auth-shell, .admin-glass-app) .upload-progress {
  color: #172033 !important;
  border-color: color-mix(in srgb, var(--ui-secondary, var(--accent-2, #6366f1)) 18%, #dfe5ef) !important;
  background: #eef2f7 !important;
}

:where(.site-shell, .profile-shell, .auth-shell, .admin-glass-app) .upload-progress b {
  margin: 3px;
  padding: 2px 9px;
  color: #172033 !important;
  -webkit-text-fill-color: #172033 !important;
  border: 1px solid rgb(255 255 255 / .92);
  border-radius: 999px;
  background: rgb(255 255 255 / .94);
  box-shadow: 0 2px 7px rgb(31 45 78 / .12);
  text-shadow: none;
}

@media (max-width: 760px) {
  .content-engagement-grid {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
  }

  .site-shell .dynamic-panel,
  .site-shell :where(.survey-panel, .survey-form, .response-display-panel) {
    padding: 18px 14px !important;
  }

  .site-shell .dynamic-panel .form-section,
  .site-shell :where(.survey-panel, .survey-form) .form-section {
    width: 100%;
    padding: 16px 14px !important;
  }

  :where(.site-shell, .profile-shell, .auth-shell, .admin-glass-app) .form-grid.two {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :where(.site-shell, .profile-shell, .auth-shell, .admin-glass-app) .persian-date-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .member-directory-grid:has(> :only-child),
  .member-directory-grid:has(> :nth-child(2):last-child) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :where(.site-shell, .profile-shell, .auth-shell, .admin-glass-app) .row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
  }

  .admin-glass-app .admin-table :where(.table-row, .table-head, [data-label]) {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 340px) {
  :where(.site-shell, .profile-shell, .auth-shell, .admin-glass-app) .persian-date-picker {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Weak Android devices keep the accessible colors but use one cheap, solid paint layer. */
html.is-android .site-shell :is(.content-band, .glass-card, .liquid-panel,
  .section-card, .article-card, .product-card, .service-card, .report-card,
  .fajr-video-card, .course-card, .campaign-card, .member-card, .partner-card,
  .supporter-card, .dynamic-panel),
html.is-android .profile-shell :is(.profile-sidebar, .profile-form-card,
  .profile-welcome, .address-card, .user-order-card, .favorite-panel-card,
  .profile-course-card),
html.is-android .admin-glass-app .admin-content :is(.admin-section, .glass-card,
  .admin-template-panel, .admin-table, .builder-lite-panel, .media-library-panel) {
  box-shadow: 0 3px 10px color-mix(in srgb, var(--ui-secondary, var(--accent-2, #6366f1)) 7%, rgb(31 45 78 / .07)) !important;
}

html.is-android .site-shell :where(.dynamic-panel, .survey-panel, .survey-form,
  .response-display-panel) {
  background: #ffffff !important;
  background-image: none !important;
}

html.is-android :where(.site-shell, .profile-shell, .auth-shell, .admin-glass-app)
  :where(.btn-primary, a.btn-primary, button.btn-primary) {
  background: var(--action-primary) !important;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--ui-primary, var(--accent, #2563eb)) 11%, transparent) !important;
}

/* Admin theme variables remain colorful even when an editor chooses a very light accent. */
.admin-glass-app {
  --admin-ink: color-mix(in srgb, var(--theme-primary, var(--accent, #334155)) 16%, #172033);
  --admin-muted: color-mix(in srgb, var(--theme-secondary, var(--accent-2, #6366f1)) 16%, #475467);
  --admin-brand: color-mix(in srgb, var(--theme-primary, var(--accent, #334155)) 28%, #27364d);
  --admin-brand-2: color-mix(in srgb, var(--theme-secondary, var(--accent-2, #6366f1)) 28%, #27364d);
  --admin-warm: color-mix(in srgb, var(--theme-edge, var(--accent-3, #d7b56d)) 26%, #27364d);
}

.admin-glass-app .sidebar-group > span,
.admin-glass-app :where(.sidebar-brand small, .admin-sidebar-status small) {
  color: var(--admin-muted) !important;
  -webkit-text-fill-color: var(--admin-muted) !important;
}

.admin-glass-app .sidebar-nav a,
.admin-glass-app .sidebar-button {
  color: color-mix(in srgb, var(--theme-secondary, var(--accent-2, #6366f1)) 20%, #344054) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--theme-secondary, var(--accent-2, #6366f1)) 20%, #344054) !important;
}

.admin-glass-app .sidebar-nav a:is(:hover, .active, [aria-current="page"]),
.admin-glass-app .sidebar-button:is(:hover, .active, [aria-pressed="true"]) {
  color: #172033 !important;
  -webkit-text-fill-color: #172033 !important;
  border-color: color-mix(in srgb, var(--theme-primary, var(--accent, #334155)) 22%, #dfe5ef) !important;
  background: color-mix(in srgb, var(--theme-primary, var(--accent, #334155)) 8%, #ffffff) !important;
}

.admin-glass-app .admin-content :where(.form-grid > label > span,
  .form-grid > .full > span, label > span, .check-row > span) {
  color: #344054 !important;
  -webkit-text-fill-color: #344054 !important;
}

.admin-glass-app .admin-content .form-section,
.admin-glass-app .admin-content .option-list,
.admin-glass-app .admin-content .check-row {
  color: #344054 !important;
  border-color: color-mix(in srgb, var(--theme-secondary, var(--accent-2, #6366f1)) 16%, #dfe5ef) !important;
  background: color-mix(in srgb, var(--theme-secondary, var(--accent-2, #6366f1)) 4%, #ffffff) !important;
  background-image: none !important;
}

.admin-glass-app .btn-secondary,
.admin-glass-app a.btn-secondary,
.admin-glass-app button.btn-secondary {
  color: color-mix(in srgb, var(--theme-primary, var(--accent, #334155)) 24%, #27364d) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--theme-primary, var(--accent, #334155)) 24%, #27364d) !important;
  border-color: color-mix(in srgb, var(--theme-primary, var(--accent, #334155)) 18%, #dfe5ef) !important;
  background: color-mix(in srgb, var(--theme-primary, var(--accent, #334155)) 6%, #ffffff) !important;
}

.admin-glass-app .btn-secondary:is(:hover, :focus-visible, .active),
.admin-glass-app a.btn-secondary:is(:hover, :focus-visible, .active),
.admin-glass-app button.btn-secondary:is(:hover, :focus-visible, .active) {
  color: #172033 !important;
  -webkit-text-fill-color: #172033 !important;
  border-color: color-mix(in srgb, var(--theme-primary, var(--accent, #334155)) 30%, #dfe5ef) !important;
  background: color-mix(in srgb, var(--theme-primary, var(--accent, #334155)) 11%, #ffffff) !important;
}

.admin-glass-app .status-chip.published {
  color: color-mix(in srgb, var(--theme-secondary, var(--accent-2, #6366f1)) 26%, #27364d) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--theme-secondary, var(--accent-2, #6366f1)) 26%, #27364d) !important;
  border-color: color-mix(in srgb, var(--theme-secondary, var(--accent-2, #6366f1)) 20%, #dfe5ef) !important;
  background: color-mix(in srgb, var(--theme-secondary, var(--accent-2, #6366f1)) 8%, #ffffff) !important;
}

.admin-glass-app .status-chip.draft {
  color: #7a2e0e !important;
  -webkit-text-fill-color: #7a2e0e !important;
  border-color: #f5d58b !important;
  background: #fffaeb !important;
}

.site-shell .status-chip.draft {
  color: #7a2e0e !important;
  -webkit-text-fill-color: #7a2e0e !important;
  border-color: #f5d58b !important;
  background: #fffaeb !important;
}

.admin-glass-app .status-chip.failed {
  color: #b42318 !important;
  -webkit-text-fill-color: #b42318 !important;
  border-color: #f4b8b2 !important;
  background: #fff1f2 !important;
}

.admin-glass-app .metric-grid > a strong,
.admin-glass-app .admin-metric-card.blue,
.admin-glass-app .admin-metric-card.blue strong {
  color: var(--admin-brand) !important;
}

.admin-glass-app .metric-grid > a:nth-child(3n + 2) strong,
.admin-glass-app .admin-metric-card.green,
.admin-glass-app .admin-metric-card.green strong {
  color: var(--admin-brand-2) !important;
}

.admin-glass-app .metric-grid > a:nth-child(3n) strong,
.admin-glass-app .admin-metric-card.orange,
.admin-glass-app .admin-metric-card.orange strong,
.admin-glass-app .admin-metric-card.purple,
.admin-glass-app .admin-metric-card.purple strong {
  color: var(--admin-warm) !important;
}

.admin-glass-app :where(.metric-grid > a, .admin-metric-card)
  :where(span, small) {
  color: var(--admin-muted) !important;
  -webkit-text-fill-color: var(--admin-muted) !important;
}

:where(.site-shell, .profile-shell, .auth-shell, .admin-glass-app)
  :where(input, textarea)::placeholder {
  color: #667085 !important;
  -webkit-text-fill-color: #667085 !important;
  opacity: 1;
}

:where(.site-shell, .profile-shell, .auth-shell, .admin-glass-app)
  :where(input, textarea, select):disabled {
  color: #667085 !important;
  -webkit-text-fill-color: #667085 !important;
  border-color: #dfe5ef !important;
  background: #f1f4f9 !important;
  opacity: 1;
}

:where(.site-shell, .profile-shell, .auth-shell, .admin-glass-app)
  :where(a[href], button, summary, input, textarea, select, [role="button"]):focus-visible {
  outline: 3px solid var(--app-focus, #4f46e5) !important;
  outline-offset: 3px !important;
}

.admin-glass-app .sidebar-nav a > :where(svg, .admin-icon),
.admin-glass-app .sidebar-button > :where(svg, .admin-icon) {
  color: var(--admin-brand) !important;
  background: color-mix(in srgb, var(--theme-primary, var(--accent, #334155)) 6%, #f1f4f9) !important;
}

.admin-glass-app .sidebar-nav a.active > :where(svg, .admin-icon),
.admin-glass-app .sidebar-button.active > :where(svg, .admin-icon) {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--action-primary), var(--action-secondary)) !important;
  box-shadow: 0 7px 18px color-mix(in srgb, var(--theme-secondary, var(--accent-2, #6366f1)) 18%, transparent) !important;
}

:where(.site-shell, .profile-shell, .auth-shell)
  :where(form label > span, .form-grid > label > span, .form-grid > .full > span,
    .check-row > span, .shop-filters label > span) {
  color: #344054 !important;
  -webkit-text-fill-color: #344054 !important;
}

:where(.site-shell, .profile-shell, .auth-shell) form legend {
  color: #27364d !important;
  -webkit-text-fill-color: #27364d !important;
}

:where(.site-shell, .profile-shell) :where(.saved-address span, .shop-filters small) {
  color: #475467 !important;
  -webkit-text-fill-color: #475467 !important;
}

.site-shell :where(.in-cart-panel, .secure-checkout-note) {
  color: #344054 !important;
  border-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 18%, #dfe5ef) !important;
  background: color-mix(in srgb, var(--ui-secondary, #6366f1) 5%, #ffffff) !important;
}

.site-shell :where(.in-cart-panel, .secure-checkout-note) :where(p, small) {
  color: #475467 !important;
}

.site-shell .secure-checkout-note > span {
  color: color-mix(in srgb, var(--ui-secondary, #6366f1) 30%, #27364d) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 30%, #27364d) !important;
}

/* 2026-07-14: balanced three-color language across public, profile, auth and admin UI. */
:where(.site-shell, .profile-shell, .auth-shell, .admin-shell, .admin-glass-app) {
  --tri-primary: var(--theme-primary, var(--accent, #334155));
  --tri-secondary: var(--theme-secondary, var(--accent-2, #6366f1));
  --tri-accent: var(--theme-edge, var(--accent-3, #d7b56d));
  --tri-primary-ink: #27364d;
  --tri-secondary-ink: #27364d;
  --tri-accent-ink: #27364d;
  --tri-primary-soft: #eff5f3;
  --tri-secondary-soft: #eef5f4;
  --tri-accent-soft: #ebf9f4;
  --tri-primary-border: #c3d9d1;
  --tri-secondary-border: #c1d8d4;
  --tri-accent-border: #bfdfd3;
  --tri-primary-shadow: rgb(0 77 48 / .13);
  --tri-secondary-shadow: rgb(0 72 61 / .11);
  --tri-accent-shadow: rgb(0 119 82 / .12);
  --tri-surface:
    radial-gradient(circle at 92% 8%, var(--tri-primary-soft), transparent 42%),
    radial-gradient(circle at 8% 88%, var(--tri-secondary-soft), transparent 44%),
    radial-gradient(circle at 52% 112%, var(--tri-accent-soft), transparent 48%),
    #ffffff;
}

@supports (color: color-mix(in srgb, red 10%, white)) {
  :where(.site-shell, .profile-shell, .auth-shell, .admin-shell, .admin-glass-app) {
    --tri-primary-ink: color-mix(in srgb, var(--tri-primary) 34%, #172033);
    --tri-secondary-ink: color-mix(in srgb, var(--tri-secondary) 34%, #172033);
    --tri-accent-ink: color-mix(in srgb, var(--tri-accent) 30%, #172033);
    --tri-primary-soft: color-mix(in srgb, var(--tri-primary) 13%, #ffffff);
    --tri-secondary-soft: color-mix(in srgb, var(--tri-secondary) 11.5%, #ffffff);
    --tri-accent-soft: color-mix(in srgb, var(--tri-accent) 14.5%, #ffffff);
    --tri-primary-border: color-mix(in srgb, var(--tri-primary) 28%, #dfe5ef);
    --tri-secondary-border: color-mix(in srgb, var(--tri-secondary) 27%, #dfe5ef);
    --tri-accent-border: color-mix(in srgb, var(--tri-accent) 31%, #dfe5ef);
    --tri-primary-shadow: color-mix(in srgb, var(--tri-primary) 15.5%, transparent);
    --tri-secondary-shadow: color-mix(in srgb, var(--tri-secondary) 13%, transparent);
    --tri-accent-shadow: color-mix(in srgb, var(--tri-accent) 14.5%, transparent);
  }

  body {
    background:
      radial-gradient(circle at 88% 1%, color-mix(in srgb, var(--ui-primary, var(--accent, #334155)) 26%, transparent), transparent 30rem),
      radial-gradient(circle at 4% 42%, color-mix(in srgb, var(--ui-secondary, var(--accent-2, #6366f1)) 23%, transparent), transparent 32rem),
      radial-gradient(circle at 92% 96%, color-mix(in srgb, var(--ui-edge, var(--accent-3, #d7b56d)) 25%, transparent), transparent 34rem),
      #f8fafc !important;
  }

  :where(.site-shell, .profile-shell, .auth-shell, .admin-shell, .admin-glass-app) {
    background:
      radial-gradient(circle at 92% -2%, color-mix(in srgb, var(--tri-primary) 26%, transparent), transparent 31rem),
      radial-gradient(circle at 3% 46%, color-mix(in srgb, var(--tri-secondary) 24%, transparent), transparent 34rem),
      radial-gradient(circle at 88% 104%, color-mix(in srgb, var(--tri-accent) 25%, transparent), transparent 35rem),
      #f8fafc !important;
    background-attachment: scroll !important;
  }

  /* Global chrome carries all three brand colors without reducing navigation contrast. */
  .site-shell :is(.site-header, .mobile-site-nav, .mega-panel, .submenu-panel, .footer),
  .profile-shell .profile-sidebar,
  .admin-glass-app :is(.admin-sidebar, .admin-topbar) {
    color: #172033 !important;
    border-color: var(--tri-secondary-border) !important;
    background:
      radial-gradient(circle at 96% 0, color-mix(in srgb, var(--tri-primary) 22.5%, transparent), transparent 14rem),
      radial-gradient(circle at 3% 100%, color-mix(in srgb, var(--tri-secondary) 18.5%, transparent), transparent 15rem),
      radial-gradient(circle at 54% 130%, color-mix(in srgb, var(--tri-accent) 19.5%, transparent), transparent 18rem),
      rgb(255 255 255 / .97) !important;
    box-shadow:
      -12px 12px 30px var(--tri-primary-shadow),
      12px 12px 30px var(--tri-secondary-shadow),
      0 7px 22px var(--tri-accent-shadow) !important;
  }

  /* Ambient color replaces decorative rails and preserves each component's sticky/fixed positioning. */
  .site-shell .site-header::after,
  .site-shell .footer::before,
  .profile-shell .profile-sidebar::before,
  .admin-glass-app .admin-topbar::after {
    content: none !important;
    display: none !important;
  }

  /* Public sections become light three-tone stages, matching the admin panel's ambient language. */
  .site-shell .section-block,
  .site-shell .fajr-featured-video-box,
  .site-shell .trust-metrics,
  .site-shell .public-page-header,
  .site-shell .content-band:not(.vision-panel):not([style*="background-image"]),
  .site-shell :is(.article-detail, .product-detail, .product-gallery, .product-summary,
    .product-reviews, .report-detail-hero, .fajr-player-shell, .campaign-detail-hero,
    .course-detail-hero, .member-detail-hero, .member-resume-section, .campaign-list-card,
    .course-checkout-summary, .course-checkout-payment, .cart-summary, .checkout-summary,
    .checkout-form, .tracking-panel, .payment-result-shell, .contact-info-panel,
    .contact-form-panel, .shop-filters, .report-filter-bar, .dynamic-panel,
    .comment-form-wrap, .review-form-wrap, .donation-panel, .donation-form),
  .profile-shell :is(.profile-welcome, .profile-form-card, .profile-course-card,
    .user-order-card, .favorite-panel-card, .address-card, .glass-card),
  .auth-shell :is(.login-panel, .account-auth-card, .profile-completion-card, .glass-surface),
  .admin-glass-app :is(.glass-card, .admin-section, .admin-template-panel,
    .relation-picker, .builder-lite-panel, .admin-table) {
    color: #172033 !important;
    border-color: var(--tri-secondary-border) !important;
    background:
      radial-gradient(circle at 100% 0, color-mix(in srgb, var(--tri-primary) 21.5%, transparent), transparent 15rem),
      radial-gradient(circle at 0 100%, color-mix(in srgb, var(--tri-secondary) 18.5%, transparent), transparent 16rem),
      radial-gradient(circle at 52% 112%, color-mix(in srgb, var(--tri-accent) 19.5%, transparent), transparent 18rem),
      #ffffff !important;
    box-shadow:
      -11px 18px 38px var(--tri-primary-shadow),
      11px 18px 38px var(--tri-secondary-shadow),
      0 8px 28px var(--tri-accent-shadow),
      inset 0 1px rgb(255 255 255 / .94) !important;
  }

  .site-shell .section-block {
    box-sizing: border-box;
    padding: clamp(22px, 3vw, 38px);
    border: 1px solid var(--tri-secondary-border);
    border-radius: clamp(24px, 3vw, 34px);
  }

  /* Cards rotate through the three colors, so no grid collapses back to a white wall. */
  :is(.site-shell, .profile-shell, .admin-glass-app)
    :is(.grid-cards, .home-course-strip, .fajr-video-strip, .partner-preview-grid,
      .supporter-grid, .approved-response-list, .profile-course-grid,
      .favorite-panel-grid, .address-card-list, .profile-dashboard-grid,
      .category-card-grid, .metric-grid, .admin-metrics-grid, .trust-metrics__cards,
      .latest-dual-grid, .related-content-grid, .review-list, .comment-list,
      .cart-items, .checkout-choice-group, .saved-address-grid,
      .account-identity-summary, .quick-action-grid, .admin-registration-summary,
      .response-category-grid, .media-library)
    > :nth-child(3n + 1) {
    --card-tone: var(--tri-primary);
    --card-ink: var(--tri-primary-ink);
  }

  :is(.site-shell, .profile-shell, .admin-glass-app)
    :is(.grid-cards, .home-course-strip, .fajr-video-strip, .partner-preview-grid,
      .supporter-grid, .approved-response-list, .profile-course-grid,
      .favorite-panel-grid, .address-card-list, .profile-dashboard-grid,
      .category-card-grid, .metric-grid, .admin-metrics-grid, .trust-metrics__cards,
      .latest-dual-grid, .related-content-grid, .review-list, .comment-list,
      .cart-items, .checkout-choice-group, .saved-address-grid,
      .account-identity-summary, .quick-action-grid, .admin-registration-summary,
      .response-category-grid, .media-library)
    > :nth-child(3n + 2) {
    --card-tone: var(--tri-secondary);
    --card-ink: var(--tri-secondary-ink);
  }

  :is(.site-shell, .profile-shell, .admin-glass-app)
    :is(.grid-cards, .home-course-strip, .fajr-video-strip, .partner-preview-grid,
      .supporter-grid, .approved-response-list, .profile-course-grid,
      .favorite-panel-grid, .address-card-list, .profile-dashboard-grid,
      .category-card-grid, .metric-grid, .admin-metrics-grid, .trust-metrics__cards,
      .latest-dual-grid, .related-content-grid, .review-list, .comment-list,
      .cart-items, .checkout-choice-group, .saved-address-grid,
      .account-identity-summary, .quick-action-grid, .admin-registration-summary,
      .response-category-grid, .media-library)
    > :nth-child(3n) {
    --card-tone: var(--tri-accent);
    --card-ink: var(--tri-accent-ink);
  }

  :is(.site-shell, .profile-shell, .admin-glass-app)
    :is(.grid-cards, .home-course-strip, .fajr-video-strip, .partner-preview-grid,
      .supporter-grid, .approved-response-list, .profile-course-grid,
      .favorite-panel-grid, .address-card-list, .profile-dashboard-grid,
      .category-card-grid, .metric-grid, .admin-metrics-grid, .trust-metrics__cards,
      .latest-dual-grid, .related-content-grid, .review-list, .comment-list,
      .cart-items, .checkout-choice-group, .saved-address-grid,
      .account-identity-summary, .quick-action-grid, .admin-registration-summary,
      .response-category-grid, .media-library)
    > * {
    color: #172033 !important;
    border-color: color-mix(in srgb, var(--card-tone) 29.5%, #dfe5ef) !important;
    background:
      radial-gradient(circle at 94% 4%, color-mix(in srgb, var(--card-tone) 19%, transparent), transparent 48%),
      radial-gradient(circle at 4% 96%, color-mix(in srgb, var(--tri-secondary) 13%, transparent), transparent 48%),
      radial-gradient(circle at 56% 118%, color-mix(in srgb, var(--tri-accent) 14%, transparent), transparent 52%),
      #ffffff !important;
    box-shadow:
      -8px 14px 30px color-mix(in srgb, var(--card-tone) 12%, transparent),
      8px 15px 30px var(--tri-secondary-shadow),
      0 8px 24px var(--tri-accent-shadow) !important;
  }

  .site-shell .reports-archive-grid .fajr-video-card,
  .site-shell .reports-archive-grid .report-card {
    color: #172033 !important;
    border-color: color-mix(in srgb, var(--card-tone, var(--tri-primary)) 29.5%, #dfe5ef) !important;
    background:
      radial-gradient(circle at 94% 4%, color-mix(in srgb, var(--card-tone, var(--tri-primary)) 19%, transparent), transparent 48%),
      radial-gradient(circle at 4% 96%, color-mix(in srgb, var(--tri-secondary) 13%, transparent), transparent 48%),
      radial-gradient(circle at 56% 118%, color-mix(in srgb, var(--tri-accent) 14%, transparent), transparent 52%),
      #ffffff !important;
  }

  .site-shell :is(.fajr-video-card, .report-card) > div:not(.video-thumb) {
    color: #172033 !important;
    background: transparent !important;
  }

  .site-shell .trust-metrics__cards > * strong,
  .profile-shell .profile-dashboard-grid > * strong,
  .admin-glass-app :is(.metric-grid, .admin-metrics-grid) > * strong {
    color: var(--card-ink, var(--tri-primary-ink)) !important;
    -webkit-text-fill-color: var(--card-ink, var(--tri-primary-ink)) !important;
  }

  .site-shell .course-card .course-card-footer > strong,
  .site-shell .price-stack strong,
  .site-shell .need-registration-panel b,
  .site-shell .supporter-card span,
  .site-shell .rating-overview > strong {
    color: var(--tri-secondary-ink) !important;
    -webkit-text-fill-color: var(--tri-secondary-ink) !important;
  }

  /* Section labels and secondary actions visibly carry the complete palette. */
  .site-shell .section-kicker:not([style]),
  .profile-shell .section-kicker:not([style]),
  .auth-shell .section-kicker:not([style]),
  .admin-glass-app .section-kicker:not([style]),
  :is(.site-shell, .profile-shell, .auth-shell, .admin-glass-app) :is(.eyebrow, .admin-eyebrow) {
    color: var(--tri-secondary-ink) !important;
    -webkit-text-fill-color: var(--tri-secondary-ink) !important;
    border: 1px solid var(--tri-accent-border) !important;
    background:
      radial-gradient(circle at 100% 0, var(--tri-primary-soft), transparent 62%),
      radial-gradient(circle at 0 100%, var(--tri-secondary-soft), transparent 62%),
      radial-gradient(circle at 50% 120%, var(--tri-accent-soft), transparent 68%),
      #ffffff !important;
    box-shadow: 0 5px 15px var(--tri-accent-shadow) !important;
  }

  .site-shell .trust-metrics .section-kicker {
    color: var(--tri-secondary-ink) !important;
    -webkit-text-fill-color: var(--tri-secondary-ink) !important;
    border-color: var(--tri-accent-border) !important;
    background:
      radial-gradient(circle at 100% 0, var(--tri-primary-soft), transparent 62%),
      radial-gradient(circle at 0 100%, var(--tri-secondary-soft), transparent 62%),
      radial-gradient(circle at 50% 120%, var(--tri-accent-soft), transparent 68%),
      #ffffff !important;
  }

  :is(.site-shell, .profile-shell, .auth-shell, .admin-glass-app)
    :is(.section-title, .section-heading, .admin-page-header) {
    padding-block-end: 7px;
    background: none !important;
    text-shadow: 0 8px 24px var(--tri-primary-shadow), 0 7px 22px var(--tri-accent-shadow);
  }

  :is(.site-shell, .profile-shell, .auth-shell, .admin-glass-app)
    :is(.btn-secondary, a.btn-secondary, button.btn-secondary, .tab-pills a,
      .tab-pills button, .favorite-content-button, .auth-tabs button.active) {
    color: var(--tri-secondary-ink) !important;
    -webkit-text-fill-color: var(--tri-secondary-ink) !important;
    border-color: var(--tri-secondary-border) !important;
    background:
      radial-gradient(circle at 100% 0, var(--tri-primary-soft), transparent 60%),
      radial-gradient(circle at 0 100%, var(--tri-secondary-soft), transparent 60%),
      radial-gradient(circle at 54% 118%, var(--tri-accent-soft), transparent 66%),
      #ffffff !important;
    box-shadow: 0 7px 18px var(--tri-secondary-shadow), inset 0 -2px var(--tri-accent-border) !important;
  }

  :is(.site-shell, .profile-shell, .auth-shell, .admin-glass-app)
    :is(.btn-primary, a.btn-primary, button.btn-primary) {
    border-color: color-mix(in srgb, var(--tri-accent) 38%, var(--action-primary)) !important;
    box-shadow:
      0 10px 24px var(--tri-primary-shadow),
      0 5px 18px var(--tri-secondary-shadow),
      inset 0 -3px color-mix(in srgb, var(--tri-accent) 58%, var(--action-primary)) !important;
  }

  .site-shell .read-link,
  :is(.site-shell, .profile-shell) :is(.member-detail-back, .registration-count-link) {
    color: var(--tri-primary-ink) !important;
    -webkit-text-fill-color: var(--tri-primary-ink) !important;
    border: 1px solid var(--tri-accent-border);
    border-radius: 999px;
    background:
      radial-gradient(circle at 100% 0, var(--tri-primary-soft), transparent 62%),
      radial-gradient(circle at 0 100%, var(--tri-secondary-soft), transparent 62%),
      var(--tri-accent-soft);
    box-shadow: 0 5px 15px var(--tri-accent-shadow);
    padding: 5px 10px;
  }

  /* Forms stay readable while their containing surfaces and interaction states use all three colors. */
  :is(.site-shell, .profile-shell, .auth-shell, .admin-glass-app)
    :is(.form-section, fieldset.relation-picker, .builder-lite-panel),
  .site-shell .dynamic-panel .form-section,
  .site-shell :is(.survey-panel, .survey-form) .form-section,
  .admin-glass-app .admin-content .form-section {
    color: #172033 !important;
    border-color: var(--tri-secondary-border) !important;
    background:
      radial-gradient(circle at 100% 0, var(--tri-primary-soft), transparent 48%),
      radial-gradient(circle at 0 100%, var(--tri-secondary-soft), transparent 50%),
      radial-gradient(circle at 52% 112%, var(--tri-accent-soft), transparent 54%),
      #ffffff !important;
    box-shadow: 0 9px 24px var(--tri-primary-shadow), inset 0 3px var(--tri-secondary-border) !important;
  }

  :is(.site-shell, .profile-shell, .auth-shell, .admin-glass-app)
    :is(.input, input.input, textarea.input, select.input, .textarea) {
    color: #172033 !important;
    border-color: var(--tri-primary-border) !important;
    background:
      radial-gradient(circle at 100% 0, color-mix(in srgb, var(--tri-primary) 5%, transparent), transparent 54%),
      radial-gradient(circle at 0 100%, color-mix(in srgb, var(--tri-secondary) 4%, transparent), transparent 56%),
      radial-gradient(circle at 52% 120%, color-mix(in srgb, var(--tri-accent) 5%, transparent), transparent 60%),
      #ffffff !important;
  }

  :is(.site-shell, .profile-shell, .auth-shell, .admin-glass-app)
    :is(.input, input.input, textarea.input, select.input, .textarea):focus {
    border-color: color-mix(in srgb, var(--tri-primary) 48%, #aab4c4) !important;
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--tri-secondary) 15%, transparent),
      0 7px 18px var(--tri-accent-shadow) !important;
  }

  :is(.site-shell, .profile-shell, .auth-shell, .admin-glass-app)
    :is(.option-list, .relation-check-grid, .permission-grid)
    > :nth-child(3n + 1) { --choice-tone: var(--tri-primary); }
  :is(.site-shell, .profile-shell, .auth-shell, .admin-glass-app)
    :is(.option-list, .relation-check-grid, .permission-grid)
    > :nth-child(3n + 2) { --choice-tone: var(--tri-secondary); }
  :is(.site-shell, .profile-shell, .auth-shell, .admin-glass-app)
    :is(.option-list, .relation-check-grid, .permission-grid)
    > :nth-child(3n) { --choice-tone: var(--tri-accent); }

  :is(.site-shell, .profile-shell, .auth-shell, .admin-glass-app)
    :is(.option-list, .relation-check-grid, .permission-grid) > :is(.check-row, .permission-item) {
    color: #344054 !important;
    border-color: color-mix(in srgb, var(--choice-tone) 22%, #dfe5ef) !important;
    background: color-mix(in srgb, var(--choice-tone) 7%, #ffffff) !important;
  }

  :is(.site-shell, .profile-shell, .auth-shell, .admin-glass-app)
    :is(.check-row:has(input:checked), .choice-card.active, .saved-address.active) {
    color: #172033 !important;
    border-color: color-mix(in srgb, var(--tri-secondary) 38%, #dfe5ef) !important;
    background:
      radial-gradient(circle at 100% 0, var(--tri-primary-soft), transparent 60%),
      radial-gradient(circle at 0 100%, var(--tri-secondary-soft), transparent 60%),
      radial-gradient(circle at 50% 120%, var(--tri-accent-soft), transparent 66%),
      #ffffff !important;
    box-shadow: 0 6px 18px var(--tri-accent-shadow) !important;
  }

  :is(.site-shell, .profile-shell, .auth-shell, .admin-glass-app)
    :is(.segmented-control button.active, .segmented-control button[aria-selected="true"],
      .segmented-control button[aria-pressed="true"], .profile-nav a.active,
      .sidebar-nav a.active) {
    color: #172033 !important;
    border-color: var(--tri-secondary-border) !important;
    background:
      radial-gradient(circle at 100% 0, var(--tri-primary-soft), transparent 60%),
      radial-gradient(circle at 0 100%, var(--tri-secondary-soft), transparent 60%),
      radial-gradient(circle at 50% 120%, var(--tri-accent-soft), transparent 66%),
      #ffffff !important;
    box-shadow: 0 6px 18px var(--tri-primary-shadow), inset 0 -2px var(--tri-accent-border) !important;
  }

  :where(.progress-wrap, .campaign-progress, .completion-progress) > span,
  .site-shell .trust-stat-card::after {
    background: var(--tri-accent) !important;
  }

  /* The report hero was previously dark while the final text authority made its copy dark too. */
  .site-shell .report-detail-hero {
    min-height: clamp(260px, 34vw, 430px);
    display: grid;
    align-items: end;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(28px, 5vw, 58px) !important;
    color: #172033 !important;
    border-color: var(--tri-secondary-border) !important;
    background:
      radial-gradient(circle at 94% 0, color-mix(in srgb, var(--tri-primary) 14%, transparent), transparent 20rem),
      radial-gradient(circle at 4% 100%, color-mix(in srgb, var(--tri-secondary) 12%, transparent), transparent 21rem),
      radial-gradient(circle at 52% 118%, color-mix(in srgb, var(--tri-accent) 16%, transparent), transparent 23rem),
      #ffffff !important;
  }

  .site-shell .report-detail-hero > div {
    width: min(820px, 100%);
    display: grid;
    gap: clamp(12px, 2vw, 20px);
  }

  .site-shell .report-detail-hero h1 {
    max-width: 19ch;
    margin: 0;
    font-size: clamp(2.1rem, 5vw, 4.8rem);
    line-height: 1.08;
    letter-spacing: -.035em;
    text-wrap: balance;
    text-shadow: 0 12px 34px var(--tri-primary-shadow);
  }

  .site-shell .report-detail-hero p {
    max-width: 68ch;
    margin: 0;
    color: #344054 !important;
    -webkit-text-fill-color: #344054 !important;
    font-size: clamp(1rem, 1.6vw, 1.16rem);
    line-height: 1.95;
  }

  .site-shell .report-detail-hero .article-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
  }

  .site-shell .report-detail-hero .article-facts span {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid var(--tri-primary-border);
    border-radius: 999px;
    background: var(--tri-primary-soft) !important;
    box-shadow: 0 5px 14px var(--tri-primary-shadow);
  }

  .site-shell .report-detail-hero .article-facts span:nth-child(3n + 2) {
    border-color: var(--tri-secondary-border);
    background: var(--tri-secondary-soft) !important;
    box-shadow: 0 5px 14px var(--tri-secondary-shadow);
  }

  .site-shell .report-detail-hero .article-facts span:nth-child(3n) {
    border-color: var(--tri-accent-border);
    background: var(--tri-accent-soft) !important;
    box-shadow: 0 5px 14px var(--tri-accent-shadow);
  }

  .site-shell .report-detail-hero :where(h1, p, .article-facts span) {
    color: #172033 !important;
    -webkit-text-fill-color: #172033 !important;
  }

  /* Image-only slider remains clear; its frame and controls carry the palette. */
  .site-shell .home-slider--image-only {
    border-color: var(--tri-secondary-border) !important;
    box-shadow:
      -10px 16px 34px var(--tri-primary-shadow),
      10px 16px 34px var(--tri-secondary-shadow),
      0 7px 24px var(--tri-accent-shadow) !important;
  }

  .site-shell .home-slider--image-only .home-slider__dot.is-active {
    border-color: color-mix(in srgb, var(--tri-accent) 66%, #ffffff) !important;
    background: var(--tri-accent) !important;
    box-shadow:
      0 0 0 2px #ffffff,
      -4px 4px 12px var(--tri-primary-shadow),
      4px 4px 12px var(--tri-secondary-shadow),
      0 5px 16px var(--tri-accent-shadow) !important;
  }
}

/* The public header remains visible without changing the sticky/fixed contracts of admin and profile chrome. */
html {
  scroll-padding-block-start: calc(112px + env(safe-area-inset-top));
}

.site-shell .site-header {
  position: fixed !important;
  z-index: 1000;
  inset-block-start: max(10px, env(safe-area-inset-top)) !important;
  inset-inline: 0 !important;
  margin: 0 auto !important;
}

.site-shell > .content-area {
  padding-block-start: calc(104px + env(safe-area-inset-top)) !important;
}

/* Preserve CMS-controlled photography and the configured text palette on visual content panels. */
.site-shell .vision-panel {
  color: var(--vision-text, #f8fafc) !important;
  -webkit-text-fill-color: var(--vision-text, #f8fafc) !important;
}

.site-shell .vision-panel :where(p, li, dd, dt, span:not(.section-kicker)) {
  color: var(--vision-text, #f8fafc) !important;
  -webkit-text-fill-color: var(--vision-text, #f8fafc) !important;
}

.site-shell .vision-panel :where(h1, h2, h3, h4, h5, h6, strong, b) {
  color: var(--vision-title, #ffffff) !important;
  -webkit-text-fill-color: var(--vision-title, #ffffff) !important;
}

.site-shell .vision-panel .section-kicker {
  color: var(--vision-kicker, #ffffff) !important;
  -webkit-text-fill-color: var(--vision-kicker, #ffffff) !important;
  border-color: color-mix(in srgb, var(--vision-kicker, #ffffff) 42%, transparent) !important;
  background: rgb(15 23 42 / .48) !important;
}

@media (max-width: 760px) {
  html {
    scroll-padding-block-start: calc(94px + env(safe-area-inset-top));
  }

  .site-shell .site-header {
    inset-block-start: max(8px, env(safe-area-inset-top)) !important;
  }

  .site-shell > .content-area {
    padding-block-start: calc(88px + env(safe-area-inset-top)) !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html:not(.is-android) .site-shell .home-slider--image-only .home-slider__slide {
    transition:
      opacity 780ms cubic-bezier(.22, .74, .18, 1),
      visibility 0s linear 780ms !important;
  }

  html:not(.is-android) .site-shell .home-slider--image-only .home-slider__slide.is-active {
    transition-delay: 0s, 0s !important;
  }
}

/* Android keeps the ambient identity with static glows and one cheap shadow per surface. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  html.is-android body {
    background: #f8fafc !important;
    background-image: none !important;
  }

  html.is-android :where(.site-shell, .profile-shell, .auth-shell, .admin-shell, .admin-glass-app) {
    background:
      radial-gradient(circle at 96% 2%, color-mix(in srgb, var(--tri-primary, var(--accent, #334155)) 18%, transparent), transparent 22rem),
      radial-gradient(circle at 2% 48%, color-mix(in srgb, var(--tri-secondary, var(--accent-2, #6366f1)) 15.5%, transparent), transparent 23rem),
      radial-gradient(circle at 92% 98%, color-mix(in srgb, var(--tri-accent, var(--accent-3, #d7b56d)) 16.5%, transparent), transparent 24rem),
      #f8fafc !important;
  }

  html.is-android :is(.site-shell, .profile-shell, .auth-shell, .admin-glass-app)
    :is(.section-block, .glass-card, .content-band:not(.vision-panel):not([style*="background-image"]), .dynamic-panel,
      .form-section, .public-page-header, .fajr-featured-video-box, .trust-metrics,
      .article-detail, .product-detail, .product-gallery, .product-summary,
      .report-detail-hero, .fajr-player-shell, .campaign-detail-hero,
      .course-detail-hero, .member-detail-hero, .campaign-list-card,
      .course-checkout-summary, .course-checkout-payment, .tracking-panel,
      .payment-result-shell, .contact-info-panel, .contact-form-panel,
      .latest-panel, .course-purchase-box, .member-role-section, .donation-fixed,
      .shop-filters, .profile-sidebar, .profile-form-card, .profile-welcome,
      .login-panel, .account-auth-card, .admin-section, .admin-template-panel,
      .relation-picker, .review-form-wrap, .donation-form, .admin-table) {
    background:
      radial-gradient(circle at 96% 3%, var(--tri-primary-soft), transparent 54%),
      radial-gradient(circle at 4% 96%, var(--tri-secondary-soft), transparent 56%),
      radial-gradient(circle at 52% 112%, var(--tri-accent-soft), transparent 60%),
      #ffffff !important;
    background:
      radial-gradient(circle at 96% 3%, color-mix(in srgb, var(--tri-primary) 19%, transparent), transparent 54%),
      radial-gradient(circle at 4% 96%, color-mix(in srgb, var(--tri-secondary) 16.5%, transparent), transparent 56%),
      radial-gradient(circle at 52% 112%, color-mix(in srgb, var(--tri-accent) 19%, transparent), transparent 60%),
      #ffffff !important;
    box-shadow: 0 3px 10px var(--tri-primary-shadow) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html.is-android :is(.site-shell, .profile-shell, .admin-glass-app)
    :is(.grid-cards, .home-course-strip, .fajr-video-strip, .partner-preview-grid,
      .supporter-grid, .approved-response-list, .profile-course-grid,
      .favorite-panel-grid, .address-card-list, .profile-dashboard-grid,
      .category-card-grid, .metric-grid, .admin-metrics-grid, .trust-metrics__cards,
      .latest-dual-grid, .related-content-grid, .review-list, .comment-list,
      .cart-items, .checkout-choice-group, .saved-address-grid,
      .account-identity-summary, .quick-action-grid, .admin-registration-summary,
      .response-category-grid, .media-library) > * {
    background:
      radial-gradient(circle at 92% 5%, color-mix(in srgb, var(--card-tone, var(--tri-primary)) 15%, transparent), transparent 58%),
      #ffffff !important;
    border-block-start-color: color-mix(in srgb, var(--card-tone, var(--tri-primary)) 28%, #dfe5ef) !important;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--card-tone, var(--tri-primary)) 12%, transparent) !important;
  }

  html.is-android :is(.site-shell, .profile-shell, .auth-shell, .admin-glass-app)
    :is(.input, input.input, textarea.input, select.input, .textarea) {
    background: #ffffff !important;
  }

  html.is-android .site-shell :is(.site-header, .mobile-site-nav, .mega-panel,
    .submenu-panel, .footer),
  html.is-android .profile-shell .profile-sidebar,
  html.is-android .admin-glass-app :is(.admin-sidebar, .admin-topbar) {
    background: var(--tri-surface) !important;
    box-shadow: 0 3px 10px var(--tri-secondary-shadow) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html.is-android :is(.site-shell, .profile-shell, .auth-shell, .admin-glass-app)
    :is(.btn-primary, a.btn-primary, button.btn-primary,
      .btn-secondary, a.btn-secondary, button.btn-secondary, .section-kicker) {
    box-shadow: 0 3px 10px var(--tri-primary-shadow) !important;
  }

  html.is-android .site-shell .home-slider--image-only {
    box-shadow: 0 4px 14px var(--tri-secondary-shadow) !important;
  }
}

/* 2026-07-14: final public-page contrast, containment and three-tone authority. */
.site-shell .vision-panel:not([style*="background-image"]) {
  color: #344054 !important;
  -webkit-text-fill-color: #344054 !important;
  background-image:
    radial-gradient(circle at 96% 3%, var(--tri-primary-soft), transparent 54%),
    radial-gradient(circle at 4% 96%, var(--tri-secondary-soft), transparent 56%),
    radial-gradient(circle at 52% 112%, var(--tri-accent-soft), transparent 60%),
    linear-gradient(#ffffff, #ffffff) !important;
}

.site-shell .vision-panel:not([style*="background-image"])
  :is(.feature-prose, .feature-prose p, .feature-prose li, .feature-prose span,
    .feature-prose strong, .feature-prose b) {
  color: #344054 !important;
  -webkit-text-fill-color: #344054 !important;
}

.site-shell .vision-panel:not([style*="background-image"])
  :is(.section-heading h1, .section-heading h2, .section-heading h3) {
  color: #172033 !important;
  -webkit-text-fill-color: #172033 !important;
}

.site-shell .page-header.public-page-header {
  min-width: 0;
  max-width: calc(100% - (var(--page-gutter) * 2));
  padding-inline: clamp(18px, 4vw, 48px) !important;
  border: 1px solid var(--tri-secondary-border);
  border-radius: clamp(22px, 3vw, 32px);
  overflow: hidden;
  overflow: clip;
}

.site-shell .page-header.public-page-header
  :where(h1, h2, p, .section-kicker, .article-facts, .article-facts span) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.site-shell .campaign-catalog > :nth-child(3n + 1) { --card-tone: var(--tri-primary); }
.site-shell .campaign-catalog > :nth-child(3n + 2) { --card-tone: var(--tri-secondary); }
.site-shell .campaign-catalog > :nth-child(3n) { --card-tone: var(--tri-accent); }

@supports (color: color-mix(in srgb, red 10%, white)) {
  .site-shell > .content-area {
    background:
      radial-gradient(circle at 98% 12%, color-mix(in srgb, var(--tri-primary) 18%, transparent), transparent 29rem),
      radial-gradient(circle at 2% 50%, color-mix(in srgb, var(--tri-secondary) 16.5%, transparent), transparent 31rem),
      radial-gradient(circle at 96% 90%, color-mix(in srgb, var(--tri-accent) 18%, transparent), transparent 32rem);
  }

  .site-shell :is(.public-page-header, .section-block,
    .content-band:not(.vision-panel):not([style*="background-image"]),
    .fajr-featured-video-box, .trust-metrics, .article-detail, .product-detail,
    .product-gallery, .product-summary, .product-reviews, .report-detail-hero,
    .fajr-player-shell, .campaign-detail-hero, .course-detail-hero,
    .member-detail-hero, .member-resume-section, .campaign-list-card,
    .course-checkout-summary, .course-checkout-payment, .cart-summary,
    .checkout-summary, .checkout-form, .tracking-panel, .payment-result-shell,
    .contact-info-panel, .contact-form-panel, .shop-filters, .report-filter-bar,
    .dynamic-panel, .form-section, .comment-form-wrap, .review-form-wrap,
    .latest-panel, .course-purchase-box, .member-role-section,
    .donation-panel, .donation-form, .donation-fixed) {
    background:
      radial-gradient(circle at 97% 2%, color-mix(in srgb, var(--tri-primary) 26%, transparent), transparent 17rem),
      radial-gradient(circle at 2% 98%, color-mix(in srgb, var(--tri-secondary) 23%, transparent), transparent 18rem),
      radial-gradient(circle at 54% 116%, color-mix(in srgb, var(--tri-accent) 25%, transparent), transparent 20rem),
      #ffffff !important;
  }

  .site-shell .vision-panel:not([style*="background-image"]) {
    background-image:
      radial-gradient(circle at 97% 2%, color-mix(in srgb, var(--tri-primary) 26%, transparent), transparent 17rem),
      radial-gradient(circle at 2% 98%, color-mix(in srgb, var(--tri-secondary) 23%, transparent), transparent 18rem),
      radial-gradient(circle at 54% 116%, color-mix(in srgb, var(--tri-accent) 25%, transparent), transparent 20rem),
      linear-gradient(#ffffff, #ffffff) !important;
  }
}

/* 2026-07-14: stronger three-tone navigation without adding mobile paint layers. */
.site-shell .site-menu-toggle {
  border-color: var(--tri-secondary-border) !important;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--tri-primary) 22%, transparent), transparent 58%),
    radial-gradient(circle at 0 100%, color-mix(in srgb, var(--tri-secondary) 19%, transparent), transparent 60%),
    radial-gradient(circle at 50% 118%, color-mix(in srgb, var(--tri-accent) 21%, transparent), transparent 66%),
    #ffffff !important;
  box-shadow:
    -4px 5px 13px var(--tri-primary-shadow),
    4px 5px 13px var(--tri-secondary-shadow),
    0 3px 10px var(--tri-accent-shadow) !important;
}

.site-shell .site-menu-toggle[aria-expanded="true"] {
  border-color: var(--tri-accent-border) !important;
  box-shadow:
    0 0 0 3px var(--tri-primary-soft),
    0 5px 14px var(--tri-secondary-shadow) !important;
}

.site-shell .site-menu-toggle span:nth-child(1) {
  background: color-mix(in srgb, var(--tri-primary) 72%, #172033) !important;
}

.site-shell .site-menu-toggle span:nth-child(2) {
  background: color-mix(in srgb, var(--tri-secondary) 72%, #172033) !important;
}

.site-shell .site-menu-toggle span:nth-child(3) {
  background: color-mix(in srgb, var(--tri-accent) 68%, #172033) !important;
}

.site-shell .mobile-public-menu > :nth-child(3n + 1) { --menu-tone: var(--tri-primary); }
.site-shell .mobile-public-menu > :nth-child(3n + 2) { --menu-tone: var(--tri-secondary); }
.site-shell .mobile-public-menu > :nth-child(3n) { --menu-tone: var(--tri-accent); }

.site-shell .mobile-public-menu > :is(.nav-leaf, .nav-node, .mega-section) {
  border: 1px solid color-mix(in srgb, var(--menu-tone, var(--tri-primary)) 27%, #dfe5ef) !important;
  border-radius: 14px;
  background: color-mix(in srgb, var(--menu-tone, var(--tri-primary)) 9%, #ffffff) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--menu-tone, var(--tri-primary)) 9%, transparent) !important;
}

.site-shell .mobile-public-menu > .nav-node > summary {
  color: #27364d !important;
  background: transparent !important;
}

@media (max-width: 1100px) {
  .site-shell > .site-nav-backdrop {
    z-index: 1090 !important;
  }

  body .site-shell > .mobile-site-nav,
  body .site-shell > .mobile-site-nav.open {
    z-index: 1100 !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    background:
      radial-gradient(circle at 96% 2%, color-mix(in srgb, var(--tri-primary) 19%, transparent), transparent 16rem),
      radial-gradient(circle at 3% 54%, color-mix(in srgb, var(--tri-secondary) 16%, transparent), transparent 18rem),
      radial-gradient(circle at 92% 100%, color-mix(in srgb, var(--tri-accent) 18%, transparent), transparent 20rem),
      #ffffff !important;
  }
}

/* 2026-07-14: vivid, compositor-only tricolor ambient motion. */
@supports (color: color-mix(in srgb, red 10%, white)) {
  :where(.site-shell, .profile-shell, .auth-shell, .admin-shell, .admin-glass-app) {
    isolation: isolate;
  }

  html:not(.is-android) :where(.site-shell, .profile-shell, .auth-shell, .admin-shell, .admin-glass-app)::before,
  html:not(.is-android) :where(.site-shell, .profile-shell, .auth-shell, .admin-shell, .admin-glass-app)::after {
    content: "";
    display: block !important;
    position: fixed;
    z-index: -1;
    width: min(78rem, 78vw);
    height: max(38rem, 82vh);
    inset-block-start: max(-12rem, -18vh);
    border-radius: 44%;
    pointer-events: none;
    opacity: .92;
    filter: none;
    background-repeat: no-repeat;
    contain: strict;
    will-change: transform;
  }

  html:not(.is-android) :where(.site-shell, .profile-shell, .auth-shell, .admin-shell, .admin-glass-app)::before {
    inset-inline-start: -34vw;
    inset-inline-end: auto;
    background:
      radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--tri-primary) 28%, transparent), transparent 34%),
      radial-gradient(circle at 78% 78%, color-mix(in srgb, var(--tri-accent) 27%, transparent), transparent 36%);
    animation: fajrTricolorDriftForward 26s ease-in-out infinite alternate;
  }

  html:not(.is-android) :where(.site-shell, .profile-shell, .auth-shell, .admin-shell, .admin-glass-app)::after {
    inset-inline-start: auto;
    inset-inline-end: -32vw;
    background:
      radial-gradient(circle at 74% 38%, color-mix(in srgb, var(--tri-secondary) 26%, transparent), transparent 36%);
    animation: fajrTricolorDriftReverse 31s ease-in-out infinite alternate;
  }
}

@keyframes fajrTricolorDriftForward {
  from { transform: translate3d(0, -1.5vh, 0); }
  to { transform: translate3d(66vw, 3vh, 0); }
}

@keyframes fajrTricolorDriftReverse {
  from { transform: translate3d(0, 2vh, 0); }
  to { transform: translate3d(-68vw, -2vh, 0); }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.is-android) :where(.site-shell, .profile-shell, .auth-shell, .admin-shell, .admin-glass-app)::before {
    animation: none !important;
    transform: translate3d(30vw, 0, 0) !important;
    will-change: auto;
  }

  html:not(.is-android) :where(.site-shell, .profile-shell, .auth-shell, .admin-shell, .admin-glass-app)::after {
    animation: none !important;
    transform: translate3d(-30vw, 0, 0) !important;
    will-change: auto;
  }
}

/* 2026-07-14: final responsive cascade authority for public discovery sections. */
.site-shell .partner-groups-page {
  width: min(var(--page-width), calc(100% - (var(--page-gutter) * 2))) !important;
  min-width: 0;
  margin-inline: auto !important;
}

.site-shell .partner-groups-page > :is(.partner-groups-header, .partner-groups-filter,
  .partner-groups-grid, .partner-groups-empty),
.site-shell .fajr-members-preview .member-grid,
.site-shell .reports-preview .report-grid {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  margin: 0 !important;
}

.site-shell .partner-groups-page .partner-groups-filter {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

.site-shell .partner-groups-page .partner-groups-grid,
.site-shell .fajr-members-preview .member-grid,
.site-shell .reports-preview .report-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.site-shell :is(.fajr-members-preview, .reports-preview) {
  width: min(var(--page-width), calc(100% - (var(--page-gutter) * 2))) !important;
  min-width: 0;
  margin-block: clamp(34px, 5vw, 68px) !important;
}

.site-shell .vision-panel .section-kicker {
  color: var(--tri-secondary-ink) !important;
  -webkit-text-fill-color: var(--tri-secondary-ink) !important;
  border: 1px solid var(--tri-accent-border) !important;
  background:
    radial-gradient(circle at 100% 0, var(--tri-primary-soft), transparent 62%),
    radial-gradient(circle at 0 100%, var(--tri-secondary-soft), transparent 62%),
    radial-gradient(circle at 50% 120%, var(--tri-accent-soft), transparent 68%),
    #ffffff !important;
  box-shadow: 0 5px 15px var(--tri-accent-shadow) !important;
}

.infinite-carousel .infinite-carousel__nav--forward {
  inset-inline-start: auto !important;
  inset-inline-end: auto !important;
  left: auto !important;
  right: 10px !important;
}

.infinite-carousel .infinite-carousel__nav--back {
  inset-inline-start: auto !important;
  inset-inline-end: auto !important;
  right: auto !important;
  left: 10px !important;
}

html.is-android .site-shell :is(.infinite-carousel--reports, .infinite-carousel--courses).is-native-scroll,
html.is-android .site-shell :is(.infinite-carousel--reports, .infinite-carousel--courses).is-native-scroll .infinite-carousel__track {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html.is-android .site-shell :is(.infinite-carousel--reports, .infinite-carousel--courses).is-native-scroll
  .infinite-carousel__track > [data-carousel-item] {
  box-sizing: border-box;
  inline-size: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

@media (max-width: 900px) {
  .site-shell .partner-groups-page .partner-groups-grid,
  .site-shell .fajr-members-preview .member-grid,
  .site-shell .reports-preview .report-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  .site-shell .partner-groups-page {
    width: calc(100% - 24px) !important;
  }

  .site-shell .partner-groups-page .partner-groups-filter,
  .site-shell .partner-groups-page .partner-groups-grid,
  .site-shell .fajr-members-preview .member-grid,
  .site-shell .reports-preview .report-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .site-shell .fajr-featured-video-box {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin-inline: auto !important;
    padding: 16px !important;
    overflow: hidden !important;
  }

  .site-shell :is(.fajr-featured-video-box, .courses-preview) > .infinite-carousel.is-active {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-inline: 8px !important;
  }
}

@supports (color: color-mix(in srgb, red 10%, white)) {
  @media (prefers-reduced-motion: no-preference) {
    html.is-android :where(.site-shell, .profile-shell, .auth-shell, .admin-shell, .admin-glass-app)::before {
      display: block !important;
      animation: fajrTricolorDriftAndroid 38s ease-in-out infinite alternate !important;
      will-change: transform !important;
    }
  }
}

/* The full gallery page keeps global rules below. The home preview is isolated in Home.razor.css. */

.visual-gallery-header,
.visual-gallery-page-grid {
  width: min(var(--page-width), calc(100% - (var(--page-gutter) * 2)));
  margin-inline: auto;
}

.visual-gallery-page-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: clamp(18px, 2.4vw, 30px);
  margin-block: clamp(24px, 4vw, 48px);
}

.visual-gallery-card {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  scroll-margin-top: 128px;
  border: 1px solid color-mix(in srgb, var(--ui-primary, #2563eb) 18%, #dfe5ef) !important;
  border-radius: clamp(19px, 2vw, 28px);
  background:
    radial-gradient(circle at 96% 2%, color-mix(in srgb, var(--ui-primary, #2563eb) 7%, transparent), transparent 18rem),
    #ffffff !important;
}

.visual-gallery-card:nth-child(3n + 2) {
  border-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 24%, #dfe5ef) !important;
}

.visual-gallery-card:nth-child(3n) {
  border-color: color-mix(in srgb, var(--ui-edge, var(--accent-3, #d7b56d)) 32%, #dfe5ef) !important;
}

.visual-gallery-image-link {
  display: block;
  padding: clamp(6px, .8vw, 10px);
  color: inherit;
  text-decoration: none;
}

.visual-gallery-image-link img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  border-radius: clamp(14px, 1.5vw, 20px);
  object-fit: contain;
  background: #f8fafc;
}

.visual-gallery-card figcaption {
  padding: 4px clamp(18px, 2vw, 26px) clamp(20px, 2.3vw, 30px);
  color: #475467 !important;
  font-size: clamp(.96rem, 1.05vw, 1.08rem);
  font-weight: 650;
  line-height: 1.95;
  text-align: center;
}

.admin-gallery-field {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.admin-gallery-field > span {
  font-weight: 800;
}

.admin-gallery-editor {
  display: grid;
  gap: 14px;
  margin-top: 8px;
}

.admin-gallery-editor__item {
  display: grid;
  grid-template-columns: minmax(190px, .72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: 16px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--ui-secondary, #6366f1) 18%, #dfe5ef);
  border-radius: 18px;
  background: color-mix(in srgb, var(--ui-secondary, #6366f1) 4%, #ffffff);
}

.admin-gallery-editor__item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 13px;
  object-fit: contain;
  background: #f8fafc;
}

.admin-gallery-editor__content {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.admin-gallery-editor__content label {
  display: grid;
  gap: 7px;
}

/* Article colors are calculated from the current admin theme settings and injected as direct variables. */
.site-shell .article-body {
  color: var(--article-text, #344054) !important;
  border-color: var(--article-border, #dfe5ef) !important;
  background: linear-gradient(145deg, var(--article-bg-a, #ffffff), var(--article-bg-b, #f8fafc)) !important;
  box-shadow:
    0 18px 46px rgb(15 23 42 / .08),
    0 7px 22px rgb(15 23 42 / .06),
    inset 0 1px rgb(255 255 255 / .96) !important;
}

.site-shell .article-body :where(p, li, dd, dt, td, th, blockquote, figcaption, span:not([class])) {
  color: var(--article-muted, #475467) !important;
  -webkit-text-fill-color: var(--article-muted, #475467) !important;
}

.site-shell .article-body :where(h1, h2, h3, h4, h5, h6, strong, b) {
  color: var(--article-heading, #172033) !important;
  -webkit-text-fill-color: var(--article-heading, #172033) !important;
}

.site-shell .article-body a:not(.btn-primary):not(.btn-secondary) {
  color: var(--article-link, #27364d) !important;
  -webkit-text-fill-color: var(--article-link, #27364d) !important;
  text-decoration-color: var(--article-link, #27364d);
}

.site-shell .article-body blockquote {
  border-inline-start-color: var(--article-border, #dfe5ef) !important;
  background: var(--article-quote, #f8fafc) !important;
}

@media (max-width: 900px) {
  .visual-gallery-page-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .visual-gallery-page-grid {
    grid-template-columns: minmax(0, 1fr);
    width: calc(100% - 24px);
  }

  .admin-gallery-editor__item {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Keep the active-slide status outside the artwork on Android and make it unobtrusive. */
  html.is-android .home-slider--image-only {
    overflow: visible !important;
    margin-bottom: 38px !important;
  }

  html.is-android .home-slider--image-only .home-slider__slide {
    overflow: hidden !important;
    border-radius: inherit !important;
  }

  html.is-android .home-slider--image-only .home-slider__media {
    border-radius: inherit !important;
  }

  html.is-android .home-slider--image-only .home-slider__dots {
    top: auto !important;
    right: auto !important;
    bottom: -29px !important;
    left: 50% !important;
    width: max-content !important;
    max-width: calc(100% - 32px) !important;
    min-height: 20px !important;
    gap: 5px !important;
    padding: 4px 7px !important;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--ui-secondary, #6366f1) 20%, #dfe5ef) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: 0 7px 18px color-mix(in srgb, var(--ui-secondary, #6366f1) 12%, rgb(31 45 78 / .08)) !important;
    transform: translateX(-50%) !important;
  }

  html.is-android .home-slider--image-only .home-slider__dot {
    width: 7px !important;
    min-width: 7px !important;
    max-width: 7px !important;
    height: 7px !important;
    min-height: 7px !important;
    max-height: 7px !important;
    flex: 0 0 7px !important;
    border: 0 !important;
    background: color-mix(in srgb, var(--ui-secondary, #6366f1) 22%, #cbd5e1) !important;
    box-shadow: none !important;
  }

  html.is-android .home-slider--image-only .home-slider__dot:is(.is-active, [aria-selected="true"]) {
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    flex-basis: 18px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, var(--ui-primary, #2563eb), var(--ui-secondary, #6366f1)) !important;
    box-shadow: none !important;
  }
}
/* Report detail gallery: a single image must always occupy the full carousel width. */
.report-gallery-carousel.is-static .report-gallery-track {
    grid-template-columns: minmax(0, 1fr) !important;
}

.report-gallery-carousel.is-static .report-gallery-slide {
    width: 100% !important;
    max-width: 100%;
}

/* 2026-07-15: polished, theme-aware member cards on the home page only. */
.site-shell .fajr-members-preview {
  position: relative;
  padding: clamp(4px, .8vw, 10px) 0;
}

.site-shell .fajr-members-preview .member-grid {
  align-items: stretch;
  gap: clamp(18px, 2.4vw, 30px) !important;
}

.site-shell .fajr-members-preview .member-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0;
  min-height: 100%;
  margin: 0 !important;
  padding: clamp(10px, 1.1vw, 14px) !important;
  overflow: hidden;
  text-align: right;
  border: 1px solid color-mix(in srgb, var(--theme-edge, var(--accent-3)) 28%, rgb(255 255 255 / .18)) !important;
  border-radius: clamp(24px, 2.3vw, 32px) !important;
  background:
    radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--theme-edge, var(--accent-3)) 17%, transparent), transparent 16rem),
    linear-gradient(145deg,
      color-mix(in srgb, var(--theme-primary, var(--accent)) 25%, rgb(8 13 24 / .88)),
      color-mix(in srgb, var(--theme-secondary, var(--accent-2)) 20%, rgb(5 10 20 / .93))) !important;
  box-shadow:
    0 24px 56px color-mix(in srgb, var(--theme-secondary, var(--accent-2)) 18%, rgb(0 0 0 / .28)),
    inset 0 1px rgb(255 255 255 / .14) !important;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.site-shell .fajr-members-preview .member-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto -24% -42% 28%;
  height: 58%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--theme-primary, var(--accent)) 12%, transparent);
  filter: blur(30px);
  pointer-events: none;
}

.site-shell .fajr-members-preview .member-card__portrait {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  color: inherit;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--theme-edge, var(--accent-3)) 30%, transparent);
  border-radius: clamp(18px, 1.8vw, 24px);
  background: color-mix(in srgb, var(--theme-secondary, var(--accent-2)) 20%, #0b1120);
  box-shadow: inset 0 1px rgb(255 255 255 / .18);
}

.site-shell .fajr-members-preview .member-card__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, rgb(3 12 18 / .68) 100%);
}

.site-shell .fajr-members-preview .member-card__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  object-fit: cover;
  object-position: center 24%;
  border: 0 !important;
  border-radius: inherit !important;
  transform: scale(1.002);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), filter .35s ease;
}

.site-shell .fajr-members-preview .member-card__position {
  position: absolute;
  z-index: 1;
  inset-inline: 12px;
  bottom: 11px;
  display: block;
  width: fit-content;
  max-width: calc(100% - 24px);
  padding: 7px 11px;
  overflow: hidden;
  color: #fff !important;
  font-size: .82rem;
  font-weight: 760;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid rgb(255 255 255 / .24);
  border-radius: 999px;
  background: rgb(4 15 20 / .48);
  box-shadow: 0 8px 22px rgb(0 0 0 / .18);
  backdrop-filter: blur(11px);
}

.site-shell .fajr-members-preview .member-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 12px;
  padding: clamp(17px, 2vw, 24px) clamp(7px, 1vw, 12px) clamp(7px, 1vw, 12px);
}

.site-shell .fajr-members-preview .member-card__identity {
  display: grid;
  gap: 5px;
}

.site-shell .fajr-members-preview .member-card__eyebrow {
  color: color-mix(in srgb, var(--theme-edge, var(--accent-3)) 78%, white) !important;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

.site-shell .fajr-members-preview .member-card h3 {
  margin: 0 !important;
  color: var(--ui-on-dark, var(--theme-text, #f8fafc)) !important;
  font-size: clamp(1.16rem, 1.45vw, 1.42rem);
  line-height: 1.5;
  text-align: right;
}

.site-shell .fajr-members-preview .member-card p {
  display: -webkit-box;
  min-height: 3.9em;
  margin: 0 !important;
  overflow: hidden;
  color: var(--ui-muted-on-dark, var(--theme-muted, #dbe4ee)) !important;
  font-size: .94rem;
  line-height: 1.95;
  text-align: right;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.site-shell .fajr-members-preview .member-card__link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 44px;
  margin-top: auto;
  padding: 9px 13px;
  color: color-mix(in srgb, var(--theme-edge, var(--accent-3)) 82%, white) !important;
  font-size: .91rem;
  font-weight: 850;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--theme-primary, var(--accent)) 22%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--theme-primary, var(--accent)) 18%, rgb(255 255 255 / .055));
  transition: background .22s ease, border-color .22s ease, transform .22s ease;
}

.site-shell .fajr-members-preview .member-card__link b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  font-size: 1.05rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--theme-primary, var(--accent)) 15%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .site-shell .fajr-members-preview .member-card:hover {
    transform: translateY(-7px);
    border-color: color-mix(in srgb, var(--theme-edge, var(--accent-3)) 48%, transparent) !important;
    box-shadow:
      0 34px 72px color-mix(in srgb, var(--theme-secondary, var(--accent-2)) 18%, rgb(15 23 42 / .14)),
      inset 0 1px rgb(255 255 255 / .9) !important;
  }

  .site-shell .fajr-members-preview .member-card:hover .member-card__portrait img {
    transform: scale(1.045);
    filter: saturate(1.04) contrast(1.02);
  }

  .site-shell .fajr-members-preview .member-card__link:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--theme-primary, var(--accent)) 38%, transparent);
    background: color-mix(in srgb, var(--theme-primary, var(--accent)) 28%, rgb(255 255 255 / .08));
  }
}

@media (max-width: 620px) and (min-width: 431px) {
  .site-shell .fajr-members-preview .member-card {
    grid-template-columns: minmax(112px, 34%) minmax(0, 1fr);
    grid-template-rows: minmax(190px, auto);
    align-items: stretch;
    padding: 10px !important;
  }

  .site-shell .fajr-members-preview .member-card__portrait {
    height: 100%;
    min-height: 190px;
    aspect-ratio: auto;
  }

  .site-shell .fajr-members-preview .member-card__body {
    padding: 11px 13px 11px 8px;
  }

  .site-shell .fajr-members-preview .member-card p {
    min-height: auto;
    -webkit-line-clamp: 3;
  }
}

@media (max-width: 430px) {
  .site-shell .fajr-members-preview .member-grid {
    gap: 16px !important;
  }

  .site-shell .fajr-members-preview .member-card {
    border-radius: 24px !important;
  }

  .site-shell .fajr-members-preview .member-card__portrait {
    aspect-ratio: 4 / 3;
  }
}

/* 2026-07-15: readable article body. */
.site-shell .article-detail .article-body {
  color: #263244 !important;
  -webkit-text-fill-color: #263244 !important;
  border-color: color-mix(in srgb, var(--ui-primary, #2563eb) 16%, #d9e2ec) !important;
  background:
    linear-gradient(145deg, #ffffff, color-mix(in srgb, var(--ui-primary, #2563eb) 5%, #f8fafc)) !important;
  box-shadow:
    0 18px 44px rgb(31 45 78 / .08),
    inset 0 1px rgb(255 255 255 / .96) !important;
}

.site-shell .article-detail .article-body :where(p, li, dd, dt, td, th, figcaption, span:not([class])) {
  color: #475467 !important;
  -webkit-text-fill-color: #475467 !important;
}

.site-shell .article-detail .article-body :where(h1, h2, h3, h4, h5, h6, strong, b) {
  color: #172033 !important;
  -webkit-text-fill-color: #172033 !important;
}

.site-shell .article-detail .article-body a:not(.btn-primary):not(.btn-secondary) {
  color: color-mix(in srgb, var(--ui-secondary, #2563eb) 72%, #172033) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--ui-secondary, #2563eb) 72%, #172033) !important;
}

.site-shell .article-detail .article-body blockquote {
  color: #344054 !important;
  -webkit-text-fill-color: #344054 !important;
  background: color-mix(in srgb, var(--ui-secondary, #6366f1) 6%, #ffffff) !important;
  border-inline-start-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 34%, #d9e2ec) !important;
}

@media (max-width: 760px) {
  /* Home gallery rules live in Home.razor.css. */
}

/* Native upload status stays live even while the Blazor circuit is reconnecting. */
body.resilient-upload-active .upload-progress {
  display: none !important;
}

.resilient-upload-stack {
  position: fixed;
  inset-inline-start: max(14px, env(safe-area-inset-left));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 10020;
  width: min(370px, calc(100vw - 28px));
  display: grid;
  gap: 8px;
  pointer-events: none;
}

.resilient-upload-panel {
  width: 100%;
  display: grid;
  gap: 7px;
  padding: 11px 12px;
  border: 1px solid #d7dee8;
  border-radius: 8px;
  color: #172033;
  background: rgb(255 255 255 / .98);
  box-shadow: 0 12px 30px rgb(15 23 42 / .18);
  pointer-events: auto;
}

.resilient-upload-panel__heading {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.resilient-upload-panel__heading strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: auto;
  font-size: .82rem;
  letter-spacing: 0;
}

.resilient-upload-panel__heading b {
  flex: 0 0 42px;
  text-align: end;
  color: #344054;
  font-size: .8rem;
  letter-spacing: 0;
}

.resilient-upload-panel__message {
  min-height: 18px;
  color: #667085;
  font-size: .73rem;
  line-height: 1.55;
  letter-spacing: 0;
}

.resilient-upload-panel__track {
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: #e9edf3;
}

.resilient-upload-panel__track > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--ui-primary, #2563eb);
  transition: width .16s ease;
}

.resilient-upload-panel.is-paused {
  border-color: #e7c46a;
  background: #fffdf6;
}

.resilient-upload-panel.is-paused .resilient-upload-panel__track > span {
  background: #b7791f;
}

.resilient-upload-panel.is-complete {
  border-color: #93d6b7;
  background: #f5fcf8;
}

.resilient-upload-panel.is-complete .resilient-upload-panel__track > span {
  background: #16845b;
}

.resilient-upload-panel.is-failed {
  border-color: #efaaa7;
  background: #fff7f7;
}

.resilient-upload-panel.is-failed .resilient-upload-panel__track > span {
  background: #c43d3d;
}

@media (max-width: 560px) {
  .resilient-upload-stack {
    inset-inline: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    width: auto;
  }
}

/* 2026 quality pass: one consistent, accessible feedback layer for every page. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

:where(.site-shell, .profile-shell, .auth-shell, .admin-glass-app,
  .content-area, .admin-content, .profile-content, main) {
  min-width: 0;
}

[data-toast-source="true"] {
  display: none !important;
}

.site-toast-region {
  position: fixed;
  inset-block-start: max(14px, env(safe-area-inset-top));
  inset-inline: 0;
  z-index: 2147482000;
  width: min(440px, calc(100vw - 28px));
  margin-inline: auto;
  display: grid;
  gap: 9px;
  pointer-events: none;
}

.site-toast {
  --toast-color: #176b45;
  --toast-soft: #effbf5;
  --toast-edge: #9bd4b9;
  position: relative;
  min-height: 66px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  padding: 10px 11px 12px;
  border: 1px solid var(--toast-edge);
  border-inline-start: 5px solid var(--toast-color);
  border-radius: 15px;
  color: #172033;
  background: color-mix(in srgb, var(--toast-soft) 94%, #fff);
  box-shadow: 0 16px 42px rgb(15 23 42 / .22), inset 0 1px rgb(255 255 255 / .88);
  opacity: 0;
  transform: translateY(-16px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: auto;
}

.site-toast.is-visible {
  opacity: 1;
  transform: none;
}

.site-toast.is-leaving {
  opacity: 0;
  transform: translateY(-10px) scale(.98);
}

.site-toast--success {
  --toast-color: #137a4b;
  --toast-soft: #eaf9f1;
  --toast-edge: #8fd3b1;
}

.site-toast--error {
  --toast-color: #c52e36;
  --toast-soft: #fff0f1;
  --toast-edge: #f0a4a9;
}

.site-toast--warning {
  --toast-color: #bd6708;
  --toast-soft: #fff7e7;
  --toast-edge: #edbf70;
}

.site-toast__icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: var(--toast-color);
  box-shadow: 0 7px 16px color-mix(in srgb, var(--toast-color) 24%, transparent);
  font-size: 1.22rem;
  font-weight: 950;
  line-height: 1;
}

.site-toast__copy {
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: start;
}

.site-toast__copy strong {
  color: var(--toast-color);
  font-size: .82rem;
  font-weight: 950;
}

.site-toast__copy small {
  color: #344054;
  font-size: .77rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.site-toast__close {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  color: #667085;
  background: transparent;
  font: inherit;
  font-size: 1.18rem;
  cursor: pointer;
}

.site-toast__close:hover,
.site-toast__close:focus-visible {
  color: var(--toast-color);
  background: color-mix(in srgb, var(--toast-color) 10%, transparent);
}

.site-toast__close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.site-toast__timer {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 3px;
  transform-origin: right center;
  background: var(--toast-color);
  animation: siteToastTimer 3s linear forwards;
}

@keyframes siteToastTimer {
  to { transform: scaleX(0); }
}

/* Upload progress uses the same top feedback zone and the same status palette. */
.resilient-upload-stack {
  inset-block-start: max(90px, calc(env(safe-area-inset-top) + 82px));
  inset-block-end: auto;
  inset-inline: 0;
  z-index: 2147481900;
  width: min(440px, calc(100vw - 28px));
  margin-inline: auto;
}

.resilient-upload-panel {
  border-radius: 15px;
  border-inline-start: 5px solid var(--ui-primary, #2563eb);
  padding: 12px 13px;
  box-shadow: 0 16px 42px rgb(15 23 42 / .2);
}

.resilient-upload-panel.is-paused {
  border-color: #edbf70;
  border-inline-start-color: #bd6708;
  background: #fff7e7;
}

.resilient-upload-panel.is-complete {
  border-color: #8fd3b1;
  border-inline-start-color: #137a4b;
  background: #eaf9f1;
}

.resilient-upload-panel.is-failed {
  border-color: #f0a4a9;
  border-inline-start-color: #c52e36;
  background: #fff0f1;
}

/* Reconnect experience: branded, compact and explicit for each connection state. */
#components-reconnect-modal {
  --reconnect-tone: var(--theme-primary, var(--accent, #2f6f62));
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--reconnect-tone) 20%, transparent), transparent 30rem),
    rgb(10 18 31 / .68);
  backdrop-filter: blur(12px) saturate(.9);
}

#components-reconnect-modal.components-reconnect-failed {
  --reconnect-tone: #c43d3d;
}

#components-reconnect-modal.components-reconnect-rejected {
  --reconnect-tone: #b8660b;
}

#components-reconnect-modal .site-reconnect-card {
  width: min(430px, 100%);
  gap: 8px;
  padding: clamp(22px, 5vw, 32px);
  border: 1px solid color-mix(in srgb, var(--reconnect-tone) 28%, #d7e0ea);
  border-radius: 22px;
  color: #172033;
  background:
    radial-gradient(circle at 90% 0, color-mix(in srgb, var(--reconnect-tone) 11%, transparent), transparent 17rem),
    rgb(255 255 255 / .98);
  box-shadow: 0 30px 90px rgb(2 6 23 / .34), inset 0 1px #fff;
}

.site-reconnect-mark {
  position: relative;
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  margin-block-end: 5px;
}

.site-reconnect-mark .site-reconnect-pulse {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 22px;
  background: color-mix(in srgb, var(--reconnect-tone) 12%, #fff);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--reconnect-tone) 22%, transparent);
}

.site-reconnect-mark svg {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--reconnect-tone);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-reconnect-eyebrow {
  color: var(--reconnect-tone);
  font-size: .7rem;
  font-weight: 950;
  letter-spacing: 0;
}

#components-reconnect-modal .site-reconnect-title {
  color: #182230;
  font-size: clamp(1rem, 3vw, 1.15rem);
}

#components-reconnect-modal .site-reconnect-card p {
  max-width: 35ch;
  color: #596579;
  font-size: .83rem;
  line-height: 1.9;
}

.site-reconnect-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-block-start: 9px;
}

#components-reconnect-modal .site-reconnect-card button {
  display: none;
  min-height: 42px;
  border-color: color-mix(in srgb, var(--reconnect-tone) 34%, transparent);
  color: #fff;
  background: var(--reconnect-tone);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--reconnect-tone) 22%, transparent);
}

#components-reconnect-modal.components-reconnect-failed .site-reconnect-retry,
#components-reconnect-modal.components-reconnect-rejected .site-reconnect-reload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Keep long administration/profile menus usable at every desktop height. */
.admin-glass-app .admin-sidebar,
.profile-shell .profile-sidebar {
  overflow: hidden !important;
}

.admin-glass-app .admin-sidebar .sidebar-nav,
.profile-shell .profile-sidebar .profile-nav {
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

@media (max-width: 1120px) {
  .admin-glass-app .admin-menu-toggle {
    display: grid !important;
  }
}

@media (max-width: 760px) {
  .site-toast-region,
  .resilient-upload-stack {
    width: auto;
    inset-inline: 10px;
    margin: 0;
  }

  .resilient-upload-stack {
    inset-block-start: max(88px, calc(env(safe-area-inset-top) + 80px));
    inset-block-end: auto;
  }

  .admin-glass-app .table-row > [data-label] {
    min-width: 0;
    display: grid !important;
    grid-template-columns: minmax(88px, 36%) minmax(0, 1fr);
    align-items: start;
    gap: 8px 12px;
    padding-block: 9px;
    border-bottom: 1px solid color-mix(in srgb, var(--ui-edge, #94a3b8) 14%, #dbe3ef);
    overflow-wrap: anywhere;
    text-align: start;
  }

  .admin-glass-app .table-row > [data-label]::before {
    content: attr(data-label);
    min-width: 0;
    grid-column: 1;
    color: color-mix(in srgb, var(--ui-primary, #2563eb) 68%, #475569);
    font-size: .74rem;
    font-weight: 900;
    line-height: 1.65;
    overflow-wrap: anywhere;
  }

  .admin-glass-app .table-row > [data-label] > * {
    min-width: 0;
    grid-column: 2;
    max-width: 100%;
  }

  .admin-glass-app .table-row > [data-label=""] {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-glass-app .table-row > [data-label=""]::before {
    display: none;
  }

  .admin-glass-app .table-row > [data-label=""] > * {
    grid-column: 1;
  }

  .admin-glass-app .table-row > [data-label]:last-child {
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-toast,
  .site-toast__timer,
  .site-reconnect-pulse {
    animation: none !important;
    transition: none !important;
  }
}

/* Stable ticker authority: one JS clock on every device, immune to global
   animation-duration overrides in lite mode. */
.news-ticker__track.is-js-marquee,
html.is-android .news-ticker__track.is-js-marquee {
  animation: none !important;
  transform: translate3d(var(--fajr-ticker-x, 0px), 0, 0) !important;
  transition: none !important;
  will-change: transform !important;
}

.news-ticker__track.is-js-marquee,
.news-ticker__track.is-js-marquee * {
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html.is-android .news-ticker__track,
  html.is-android .news-ticker__track.is-js-marquee {
    animation: none !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}

html.is-android .rich-editor {
  max-width: 100% !important;
  overflow: hidden !important;
}

html.is-android .rich-toolbar {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  direction: rtl;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

html.is-android .rich-tool-group {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: max-content !important;
  max-width: none !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 0 0 8px !important;
  border-inline-end: 0 !important;
  border-inline-start: 1px solid color-mix(in srgb, var(--app-border, #dbe3ef) 82%, transparent) !important;
  scroll-snap-align: start;
}

html.is-android .rich-tool-group:last-child {
  border-inline-start: 0 !important;
  padding-inline-start: 0 !important;
}

html.is-android .rich-toolbar :where(button, .rich-upload, .rich-format-select) {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 44px !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  white-space: nowrap !important;
  text-wrap: nowrap;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  line-height: 1.15 !important;
  font-size: .78rem !important;
}

html.is-android .rich-toolbar .rich-format-select {
  min-width: 132px !important;
  padding-inline: 10px 28px !important;
}

html.is-android .rich-toolbar .rich-upload {
  position: relative !important;
  overflow: hidden !important;
}

html.is-android .rich-toolbar .rich-upload > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

html.is-android .editor-media-overlay {
  position: absolute !important;
  z-index: 2147483000 !important;
  pointer-events: none !important;
  touch-action: none !important;
  -ms-touch-action: none !important;
}

html.is-android .editor-mobile-resize-ring {
  position: absolute !important;
  z-index: 2147483000 !important;
  display: block !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 2px solid var(--app-focus, #2563eb) !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  touch-action: none !important;
  -ms-touch-action: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

html.is-android .editor-resize-handle {
  display: block !important;
  z-index: 2147483001 !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto !important;
  touch-action: none !important;
  -ms-touch-action: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

html.is-android .editor-mobile-resize-handle {
  position: absolute !important;
  border: 3px solid #fff !important;
  border-radius: 50% !important;
  background: var(--app-focus, #2563eb) !important;
  box-shadow: 0 3px 11px rgb(15 23 42 / .28) !important;
}

html.is-android .handle-nw { inset: -23px auto auto -23px !important; }
html.is-android .handle-n { inset: -23px auto auto 50% !important; }
html.is-android .handle-ne { inset: -23px -23px auto auto !important; }
html.is-android .handle-e { inset: 50% -23px auto auto !important; }
html.is-android .handle-se { inset: auto -23px -23px auto !important; }
html.is-android .handle-s { inset: auto auto -23px 50% !important; }
html.is-android .handle-sw { inset: auto auto -23px -23px !important; }
html.is-android .handle-w { inset: 50% auto auto -23px !important; }

/* Lightweight media loading and dynamic multi-tag field. */
img.fajr-image-has-placeholder {
  background-image: var(--fajr-image-placeholder);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
img.fajr-image-loading {
  filter: blur(9px);
  transform: scale(1.012);
  clip-path: circle(12% at 50% 50%);
  transform-origin: center;
  transition: filter .42s cubic-bezier(.2,.75,.25,1), transform .42s cubic-bezier(.2,.75,.25,1), clip-path .58s cubic-bezier(.2,.75,.25,1);
}
img.fajr-image-loaded {
  filter: none;
  transform: none;
  clip-path: circle(150% at 50% 50%);
  transition: filter .42s cubic-bezier(.2,.75,.25,1), transform .42s cubic-bezier(.2,.75,.25,1), clip-path .58s cubic-bezier(.2,.75,.25,1);
}
img.fajr-image-has-placeholder.fajr-image-loaded {
  background-image: none;
}
.field-disabled { opacity: .68; }
.tag-select { position: relative; display: grid; gap: 6px; width: 100%; min-width: 0; }
.tag-select.is-disabled { opacity: .66; }
.tag-select__control {
  width: 100%; min-height: 45px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 5px 8px; border: 1px solid var(--panel-border); border-radius: 8px;
  color: var(--text); background: #fff; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.tag-select:focus-within .tag-select__control { border-color: var(--accent-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 12%, transparent); }
.tag-select__search {
  flex: 1 1 110px; min-width: 90px; min-height: 31px; padding: 4px 2px; margin: 0; border: 0; outline: 0;
  color: inherit; background: transparent; font: inherit;
}
.tag-select__search::-webkit-search-cancel-button { opacity: .65; }
.tag-select__search::placeholder { color: #7b8797; opacity: .9; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 30px; padding: 3px 8px 3px 5px;
  border: 1px solid color-mix(in srgb, var(--accent-2) 22%, var(--panel-border)); border-radius: 999px;
  color: color-mix(in srgb, var(--accent) 78%, #172033); background: color-mix(in srgb, var(--accent-2) 8%, #fff);
  font-size: .9rem; font-weight: 760; line-height: 1.2;
}
.tag-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-chip button {
  flex: 0 0 22px; width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  color: inherit; background: color-mix(in srgb, currentColor 9%, transparent); cursor: pointer; font: inherit; line-height: 1;
}
.tag-chip button:hover, .tag-chip button:focus-visible { background: color-mix(in srgb, currentColor 16%, transparent); }
.tag-chip button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.tag-select__options {
  position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 5px); max-height: 230px; overflow: auto;
  display: grid; gap: 3px; padding: 7px; border: 1px solid color-mix(in srgb, var(--accent-2) 18%, #dfe5ec);
  border-radius: 12px; color: #172033; background: rgb(255 255 255 / .98); box-shadow: 0 16px 36px rgb(15 23 42 / .13);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.tag-select:focus-within .tag-select__options { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.tag-select__options button { width: 100%; padding: 9px 11px; border: 0; border-radius: 9px; text-align: start; color: inherit; background: transparent; cursor: pointer; font: inherit; }
.tag-select__options button:hover, .tag-select__options button:focus-visible { background: color-mix(in srgb, var(--accent-2) 8%, #f7f9fc); }
.tag-select__options button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; }
.tag-select__meta { margin-inline-start: 2px; color: #667085; font-size: .78rem; }
.site-shell .dynamic-panel .tag-select__control {
  border-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 18%, #dfe5ef);
  color: #172033; background: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / .72);
}
.site-shell .dynamic-panel .tag-chip {
  border-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 24%, #dfe5ef);
  color: color-mix(in srgb, var(--ui-primary, #2563eb) 78%, #172033);
  background: color-mix(in srgb, var(--ui-secondary, #6366f1) 7%, #fff);
}
.admin-glass-app .tag-select__control {
  border-color: color-mix(in srgb, var(--theme-primary) 13%, #d9e1ec);
  color: var(--admin-ink); background: color-mix(in srgb, var(--theme-secondary) 3%, #fbfcfe);
}
.dynamic-file-input {
  width: 100%; min-height: 45px; padding: 5px; border: 1px solid var(--panel-border); border-radius: 8px;
  color: inherit; background: #fff; font: inherit; overflow: hidden;
}
.dynamic-file-input::file-selector-button {
  min-height: 33px; margin-inline-end: 9px; padding: 6px 12px; border: 0; border-radius: 7px;
  color: #fff; background: var(--accent); cursor: pointer; font: inherit; font-weight: 800;
}
.site-shell .dynamic-panel .dynamic-file-input { border-color: color-mix(in srgb, var(--ui-secondary, #6366f1) 18%, #dfe5ef); color: #344054; background: #fff; }
.site-shell .dynamic-panel .dynamic-file-input::file-selector-button { background: var(--ui-primary, var(--accent)); }
@media (prefers-reduced-motion: reduce) {
  img.fajr-image-loading, img.fajr-image-loaded, .tag-select__options { transition: none; }
}

/* Offline-first status: never blocks the user's current task. */
.network-status-bar {
  position: fixed; z-index: 2147483002; inset-block-start: max(8px, env(safe-area-inset-top)); inset-inline: 50% auto;
  width: min(680px, calc(100% - 20px)); min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 8px 14px; border: 1px solid rgb(180 83 9 / .24); border-radius: 13px;
  color: #713f12; background: rgb(255 251 235 / .97); box-shadow: 0 10px 28px rgb(15 23 42 / .16);
  transform: translate(50%, calc(-100% - 28px)); opacity: 0; pointer-events: none;
  transition: transform .22s ease, opacity .22s ease;
  font-size: .78rem;
}
.network-status-bar.is-visible { transform: translate(50%, 0); opacity: 1; }
.network-status-bar.is-online-sync { color: #14532d; border-color: rgb(22 101 52 / .22); background: rgb(240 253 244 / .97); }
.network-status-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #d97706; box-shadow: 0 0 0 4px rgb(217 119 6 / .12); }
.network-status-bar.is-online-sync .network-status-dot { background: #16a34a; box-shadow: 0 0 0 4px rgb(22 163 74 / .12); }
.network-status-bar small { opacity: .78; }

/* Blazor's circuit indicator is a compact top notice, not a blocking modal. */
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
  position: fixed !important; z-index: 2147483001 !important; inset: max(58px, calc(env(safe-area-inset-top) + 50px)) 50% auto auto !important;
  width: min(620px, calc(100% - 20px)) !important; height: auto !important; min-height: 0 !important; padding: 0 !important;
  background: transparent !important; backdrop-filter: none !important; transform: translateX(50%);
  pointer-events: none;
}
#components-reconnect-modal .site-reconnect-card {
  width: 100% !important; min-height: 0 !important; display: flex !important; flex-flow: row wrap !important; align-items: center !important;
  gap: 4px 10px !important; padding: 9px 13px !important; border-radius: 13px !important; box-shadow: 0 9px 26px rgb(15 23 42 / .16) !important;
  pointer-events: auto;
}
#components-reconnect-modal .site-reconnect-mark { width: 30px !important; height: 30px !important; margin: 0 !important; }
#components-reconnect-modal .site-reconnect-mark svg { width: 18px !important; height: 18px !important; }
#components-reconnect-modal .site-reconnect-title { font-size: .82rem !important; }
#components-reconnect-modal .site-reconnect-card p { margin: 0 !important; font-size: .72rem !important; line-height: 1.5 !important; }
#components-reconnect-modal .site-reconnect-eyebrow { display: none !important; }
#components-reconnect-modal .site-reconnect-actions { margin: 0 auto 0 0 !important; }
#components-reconnect-modal .site-reconnect-card button { min-height: 32px !important; padding: 4px 10px !important; font-size: .72rem !important; }

@media (max-width: 620px) {
  .network-status-bar { justify-content: flex-start; flex-wrap: wrap; font-size: .72rem; }
  .network-status-bar small { width: 100%; padding-inline-start: 18px; }
  #components-reconnect-modal .site-reconnect-card p { display: none !important; }
}

/* =========================================================
   FAJR — Global submit/save processing feedback
   ========================================================= */
button.is-action-processing,
input.is-action-processing[type="submit"],
input.is-action-processing[type="button"] {
  position: relative !important;
  min-width: max(112px, min-content);
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  pointer-events: none !important;
  cursor: wait !important;
  user-select: none;
}

/* محتوای واقعی دکمه در زمان پردازش کاملاً پنهان بماند؛
   نه فقط فرزندان مستقیم، بلکه icon/spanهای تو در تو نیز. */
button.is-action-processing *,
input.is-action-processing[type="submit"] *,
input.is-action-processing[type="button"] * {
  opacity: 0 !important;
  visibility: hidden !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

button.is-action-processing::after {
  content: "در حال بررسی…";
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline-start: 18px;
  border-radius: inherit;
  background: inherit;
  color: var(--fajr-action-color, #fff) !important;
  -webkit-text-fill-color: var(--fajr-action-color, #fff) !important;
  font: inherit;
  font-weight: 800;
  white-space: nowrap;
}

button.is-action-processing::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset-inline-start: 13px;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -7px;
  border: 2px solid color-mix(in srgb, var(--fajr-action-color, #fff) 30%, transparent);
  border-top-color: var(--fajr-action-color, #fff);
  border-radius: 50%;
  animation: fajrActionSpin .72s linear infinite;
}

@keyframes fajrActionSpin {
  to { transform: rotate(360deg); }
}

/* =========================================================
   FAJR — Home partner cards polish
   ========================================================= */
.site-shell .cooperation-preview .partner-preview-grid {
  gap: clamp(14px, 2vw, 20px);
}

.site-shell .cooperation-preview .partner-mini-card {
  position: relative;
  isolation: isolate;
  min-height: 116px;
  padding: 13px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ui-secondary, var(--accent-2)) 18%, #dfe6ee) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--ui-secondary, var(--accent-2)) 9%, transparent), transparent 9rem),
    linear-gradient(145deg, #fff, color-mix(in srgb, var(--ui-secondary, var(--accent-2)) 3%, #f9fbfd)) !important;
  box-shadow: 0 12px 30px rgb(15 23 42 / .065), inset 0 1px #fff !important;
}

.site-shell .cooperation-preview .partner-mini-card::after {
  inset-inline: 16px !important;
  height: 2px !important;
  border-radius: 999px;
  opacity: .72;
}

.site-shell .cooperation-preview .partner-mini-card img {
  width: 82px;
  height: 82px;
  flex: 0 0 82px;
  border: 1px solid color-mix(in srgb, var(--ui-secondary, var(--accent-2)) 16%, #e5eaf0);
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 9px 22px rgb(15 23 42 / .10);
}

.site-shell .cooperation-preview .partner-mini-card > span {
  min-width: 0;
  align-content: center;
  gap: 4px;
}

.site-shell .cooperation-preview .partner-mini-card strong {
  overflow: hidden;
  color: #182230 !important;
  font-size: .98rem;
  line-height: 1.6;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-shell .cooperation-preview .partner-mini-card > span > small:last-child {
  color: #697586 !important;
  font-size: .78rem;
}

@media (hover: hover) and (pointer: fine) {
  .site-shell .cooperation-preview .partner-mini-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--ui-primary, var(--accent)) 28%, #dce3eb) !important;
    box-shadow: 0 17px 38px rgb(15 23 42 / .09), inset 0 1px #fff !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  button.is-action-processing::before { animation: none !important; }
}

/* =========================================================
   FAJR — Premium Tag Multi Select
   ========================================================= */

.tag-select {
    --tag-primary: var(--ui-primary, var(--theme-primary, var(--accent, #2563eb)));
    --tag-secondary: var(--ui-secondary, var(--accent-2, #6366f1));
    --tag-text: #182230;
    --tag-muted: #778195;
    --tag-border: #dfe5ee;
    --tag-surface: #ffffff;

    position: relative;
    width: 100%;
    min-width: 0;
    display: grid;
    gap: 7px;
    direction: rtl;
}


/* ---------- کادر اصلی ---------- */

.tag-select__control {
    position: relative;

    width: 100%;
    min-height: 48px;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;

    gap: 6px;

    padding: 6px 8px;

    border: 1px solid var(--tag-border);
    border-radius: 13px;

    color: var(--tag-text);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.98) 0%,
            rgba(249,251,253,.98) 100%
        );

    box-shadow:
        0 1px 2px rgba(15, 23, 42, .025),
        inset 0 1px 0 rgba(255,255,255,.9);

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease,
        transform .18s ease;
}


/* یک خط رنگی بسیار ظریف هنگام فوکوس */

.tag-select__control::after {
    content: "";

    position: absolute;
    right: 14px;
    left: 14px;
    bottom: -1px;

    height: 2px;

    border-radius: 100px;

    background: linear-gradient(
        90deg,
        transparent,
        var(--tag-primary),
        var(--tag-secondary),
        transparent
    );

    opacity: 0;
    transform: scaleX(.7);

    transition:
        opacity .2s ease,
        transform .2s ease;

    pointer-events: none;
}


.tag-select:focus-within .tag-select__control {
    border-color:
        color-mix(
            in srgb,
            var(--tag-primary) 50%,
            #d9e0ea
        );

    background: #fff;

    box-shadow:
        0 0 0 3px
            color-mix(
                in srgb,
                var(--tag-primary) 10%,
                transparent
            ),
        0 9px 24px rgba(15, 23, 42, .06);

    transform: translateY(-1px);
}


.tag-select:focus-within .tag-select__control::after {
    opacity: .9;
    transform: scaleX(1);
}


/* ---------- Input جست‌وجو ---------- */

.tag-select__search {
    flex: 1 1 120px;

    min-width: 100px;
    min-height: 32px;

    margin: 0;
    padding: 4px 7px;

    border: 0 !important;
    outline: 0 !important;

    color: var(--tag-text);

    background: transparent !important;

    box-shadow: none !important;

    font: inherit;
    font-size: .91rem;
    font-weight: 500;

    direction: rtl;
}


.tag-select__search::placeholder {
    color: #8b95a5;
    opacity: 1;
    font-weight: 500;
}


.tag-select__search:focus {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}


/* حذف × داخلی input search مرورگر */

.tag-select__search::-webkit-search-decoration,
.tag-select__search::-webkit-search-cancel-button,
.tag-select__search::-webkit-search-results-button,
.tag-select__search::-webkit-search-results-decoration {
    -webkit-appearance: none;
}


/* ---------- Tag / Capsule ---------- */

.tag-chip {
    position: relative;

    max-width: 100%;

    display: inline-flex;
    align-items: center;

    gap: 6px;

    min-height: 31px;

    padding: 4px 9px 4px 5px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--tag-primary) 18%,
            #dde4ed
        );

    border-radius: 9px;

    color:
        color-mix(
            in srgb,
            var(--tag-primary) 78%,
            #162033
        );

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--tag-primary) 8%,
                #fff
            ),
            color-mix(
                in srgb,
                var(--tag-secondary) 5%,
                #fff
            )
        );

    box-shadow:
        0 1px 2px rgba(15, 23, 42, .035),
        inset 0 1px 0 rgba(255,255,255,.85);

    font-size: .84rem;
    font-weight: 760;

    line-height: 1.25;

    animation: fajrTagAppear .18s ease-out;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        border-color .15s ease,
        background .15s ease;
}


.tag-chip:hover {
    border-color:
        color-mix(
            in srgb,
            var(--tag-primary) 32%,
            #d7dee8
        );

    background:
        color-mix(
            in srgb,
            var(--tag-primary) 10%,
            #fff
        );

    box-shadow: 0 3px 10px rgba(15, 23, 42, .065);

    transform: translateY(-1px);
}


.tag-chip > span {
    max-width: 190px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


/* ---------- دکمه × ---------- */

.tag-chip button {
    flex: 0 0 22px;

    width: 22px;
    height: 22px;

    display: grid;
    place-items: center;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 7px;

    color:
        color-mix(
            in srgb,
            var(--tag-primary) 75%,
            #475569
        );

    background:
        color-mix(
            in srgb,
            var(--tag-primary) 7%,
            transparent
        );

    cursor: pointer;

    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;

    transition:
        color .14s ease,
        background .14s ease,
        transform .14s ease;
}


.tag-chip button:hover {
    color: #c92b45;

    background: rgba(220, 38, 38, .09);

    transform: scale(1.08);
}


.tag-chip button:active {
    transform: scale(.92);
}


.tag-chip button:focus-visible {
    outline: 2px solid
        color-mix(
            in srgb,
            var(--tag-primary) 32%,
            transparent
        );

    outline-offset: 1px;
}


/* ---------- Dropdown گزینه‌ها ---------- */

.tag-select__options {
    position: absolute;

    z-index: 100;

    top: calc(100% + 7px);

    inset-inline: 0;

    width: 100%;

    max-height: 260px;

    overflow-y: auto;
    overscroll-behavior: contain;

    display: grid;

    gap: 3px;

    padding: 7px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--tag-primary) 13%,
            #dae2ec
        );

    border-radius: 14px;

    color: var(--tag-text);

    background: rgba(255,255,255,.985);

    box-shadow:
        0 18px 45px rgba(15, 23, 42, .12),
        0 3px 10px rgba(15, 23, 42, .05);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(-5px)
        scale(.985);

    transform-origin: top center;

    transition:
        opacity .16s ease,
        transform .16s ease,
        visibility .16s ease;
}


.tag-select:focus-within .tag-select__options {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    transform:
        translateY(0)
        scale(1);
}


/* ---------- آیتم‌های Dropdown ---------- */

.tag-select__options button {
    position: relative;

    width: 100%;

    display: flex;
    align-items: center;

    min-height: 40px;

    padding: 8px 12px;

    border: 0;
    border-radius: 10px;

    color: #263244;

    background: transparent;

    cursor: pointer;

    text-align: right;

    font: inherit;
    font-size: .88rem;
    font-weight: 620;

    transition:
        color .14s ease,
        background .14s ease,
        padding .14s ease,
        transform .14s ease;
}


/* نقطه کوچک کنار گزینه */

.tag-select__options button::before {
    content: "";

    flex: 0 0 6px;

    width: 6px;
    height: 6px;

    margin-inline-end: 9px;

    border-radius: 50%;

    background:
        color-mix(
            in srgb,
            var(--tag-primary) 42%,
            #b8c1ce
        );

    transition:
        transform .14s ease,
        background .14s ease;
}


.tag-select__options button:hover,
.tag-select__options button:focus-visible {
    color:
        color-mix(
            in srgb,
            var(--tag-primary) 82%,
            #142033
        );

    background:
        linear-gradient(
            90deg,
            color-mix(
                in srgb,
                var(--tag-primary) 8%,
                #fff
            ),
            color-mix(
                in srgb,
                var(--tag-secondary) 4%,
                #fff
            )
        );

    outline: 2px solid transparent;
    outline-offset: -2px;

    padding-inline-start: 15px;
}

.tag-select__options button:focus-visible {
    outline-color: var(--tag-primary);
}


.tag-select__options button:hover::before,
.tag-select__options button:focus-visible::before {
    background: var(--tag-primary);

    transform: scale(1.35);
}


/* ---------- Scrollbar Dropdown ---------- */

.tag-select__options {
    scrollbar-width: thin;

    scrollbar-color:
        color-mix(
            in srgb,
            var(--tag-primary) 24%,
            #cbd5e1
        )
        transparent;
}


.tag-select__options::-webkit-scrollbar {
    width: 6px;
}


.tag-select__options::-webkit-scrollbar-track {
    background: transparent;
}


.tag-select__options::-webkit-scrollbar-thumb {
    border-radius: 50px;

    background:
        color-mix(
            in srgb,
            var(--tag-primary) 22%,
            #cbd5e1
        );
}


/* ---------- متن تعداد انتخاب ---------- */

.tag-select__meta {
    display: flex;
    align-items: center;

    min-height: 18px;

    margin: 0;
    padding-inline: 4px;

    color: #7b8494;

    font-size: .72rem;
    font-weight: 570;

    line-height: 1.6;
}


/* ---------- Disabled ---------- */

.tag-select.is-disabled {
    opacity: .7;
}


.tag-select.is-disabled .tag-select__control {
    border-color: #e4e8ee;

    background: #f6f7f9;

    box-shadow: none;

    transform: none;
}


.tag-select.is-disabled .tag-chip {
    filter: saturate(.6);
}


.tag-select.is-disabled .tag-select__search {
    cursor: not-allowed;
}


/* ---------- ظاهر داخل سایت عمومی ---------- */

.site-shell .dynamic-panel .tag-select__control {
    border-radius: 13px;

    border-color:
        color-mix(
            in srgb,
            var(--ui-secondary, #6366f1) 16%,
            #dfe5ee
        );

    color: #182230;

    background:
        linear-gradient(
            180deg,
            #fff,
            #fbfcfe
        );
}


.site-shell .dynamic-panel .tag-select:focus-within .tag-select__control {
    border-color:
        color-mix(
            in srgb,
            var(--ui-primary, #2563eb) 46%,
            #dce2eb
        );
}


/* ---------- ظاهر داخل پنل مدیریت ---------- */

.admin-glass-app .tag-select {
    --tag-primary: var(--theme-primary, #2563eb);
    --tag-secondary: var(--theme-secondary, #6366f1);
}


.admin-glass-app .tag-select__control {
    border-color:
        color-mix(
            in srgb,
            var(--theme-primary, #2563eb) 13%,
            #dce3ec
        );

    background:
        color-mix(
            in srgb,
            var(--theme-secondary, #6366f1) 2%,
            #fff
        );
}


/* ---------- Animation ---------- */

@keyframes fajrTagAppear {
    from {
        opacity: 0;
        transform: scale(.93) translateY(2px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}


/* ---------- موبایل ---------- */

@media (max-width: 640px) {

    .tag-select__control {
        min-height: 46px;

        padding: 5px 6px;

        border-radius: 12px;
    }

    .tag-chip {
        min-height: 30px;

        padding-inline: 8px 4px;

        font-size: .81rem;
    }

    .tag-chip > span {
        max-width: 145px;
    }

    .tag-select__options {
        max-height: 220px;

        border-radius: 12px;
    }

    .tag-select__options button {
        min-height: 42px;
    }
}


/* ---------- Accessibility ---------- */

@media (prefers-reduced-motion: reduce) {

    .tag-select *,
    .tag-select *::before,
    .tag-select *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
FIX — Tag dropdown pushes content down instead of overlap
========================================================= */

.tag-select__options {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    left: auto !important;
    inset-inline: auto !important;

    width: 100%;

    /* در حالت بسته هیچ فضایی اشغال نکند */
    max-height: 0;

    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;

    overflow: hidden;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    border-width: 0;

    transform: translateY(-6px);

    transition:
        max-height .28s cubic-bezier(.22, 1, .36, 1),
        opacity .18s ease,
        transform .22s ease,
        margin-top .22s ease,
        padding .22s ease,
        border-width .15s ease,
        visibility .18s ease;
}

/* وقتی فیلد فعال شد */
.tag-select:focus-within .tag-select__options {
    max-height: 260px;

    margin-top: 2px;

    padding: 7px;

    border-width: 1px;

    overflow-y: auto;

    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    transform: translateY(0);
}

/* اجازه بده بازشدن لیست، ارتفاع Grid فرم را افزایش بدهد */
.dynamic-field,
.dynamic-field-container,
.dynamic-form-field {
    overflow: visible;
}

/* اگر Tag داخل Grid دو ستونه است */
.tag-select {
    align-self: start;
}

/* موبایل */
@media (max-width: 640px) {
    .tag-select:focus-within .tag-select__options {
        max-height: 220px;
    }
}


/* =========================================================
   2026-08-08 — Featured reports action alignment + stable carousel arrows
   ========================================================= */

/* Keep carousel arrow glyphs physically stable in an RTL document.
   Without isolation, ‹ / › are bidi-mirrored until an Android carousel
   switches itself to its LTR native-scroll mode. */
.infinite-carousel__nav {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    font-family: Arial, Tahoma, sans-serif;
}

/* Report cards use the same bottom-anchored action rhythm as member cards. */
.site-shell .fajr-video-card--action-aligned {
    height: 100%;
    display: flex !important;
    flex-direction: column;
}

.site-shell .fajr-video-card--action-aligned > .fajr-report-card__body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.site-shell .fajr-video-card--action-aligned .fajr-report-card__body > p {
    width: 100%;
}

.site-shell .fajr-report-detail-link {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: auto;
    align-self: flex-start;
    transform: translateY(0);
    transition:
        transform .18s cubic-bezier(.22,.72,.24,1),
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease !important;
}

.site-shell .fajr-report-detail-link::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 18%,
        color-mix(in srgb, var(--ui-primary, #2563eb) 9%, transparent) 48%,
        transparent 78%
    );
    transform: translateX(115%);
    transition: transform .42s cubic-bezier(.22,.72,.24,1);
    pointer-events: none;
}

.site-shell .fajr-report-detail-link:is(:hover, :focus-visible) {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--ui-primary, #2563eb) 13%, transparent) !important;
}

.site-shell .fajr-report-detail-link:is(:hover, :focus-visible)::before {
    transform: translateX(-115%);
}

.site-shell .fajr-report-detail-link:active {
    transform: translateY(0) scale(.985);
}

@media (prefers-reduced-motion: reduce) {
    .site-shell .fajr-report-detail-link,
    .site-shell .fajr-report-detail-link::before {
        transition: none !important;
    }
}

/* =========================================================
   2026-08-08 — Featured reports equal-height + integrated action footer
   ========================================================= */

/* All report cards in the carousel share the tallest card's cross-size.
   The card itself remains content-driven; no brittle fixed height is used. */
.site-shell .infinite-carousel--reports .infinite-carousel__track {
    align-items: stretch !important;
}

.site-shell .infinite-carousel--reports .fajr-video-card--action-aligned {
    height: auto !important;
    align-self: stretch;
}

/* The archive grid follows the same rhythm when cards share a row. */
.site-shell .reports-archive-grid {
    align-items: stretch !important;
}

.site-shell .reports-archive-grid .fajr-video-card--action-aligned {
    height: 100% !important;
}

/* Reserve a real footer zone for the CTA instead of leaving a floating button
   after variable-length copy. */
.site-shell .fajr-report-card__footer {
    width: 100%;
    min-height: 56px;
    margin-top: auto;
    padding-top: 13px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    border-top: 1px solid color-mix(in srgb, var(--card-tone, var(--ui-primary, #2563eb)) 13%, #e7ebf1);
}

.site-shell .fajr-report-card__footer .fajr-report-detail-link {
    margin-top: 0;
}

/* A tiny visual bridge makes the action read as part of the card footer. */
.site-shell .fajr-report-card__footer::before {
    content: "";
    flex: 0 0 18px;
    width: 18px;
    height: 2px;
    margin-inline-end: 9px;
    margin-bottom: 17px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--card-tone, var(--ui-primary, #2563eb)) 32%, #d7dee8);
    transition: width .18s ease, background .18s ease;
}

.site-shell .fajr-report-card__footer:has(.fajr-report-detail-link:is(:hover, :focus-visible))::before {
    width: 27px;
    background: color-mix(in srgb, var(--card-tone, var(--ui-primary, #2563eb)) 62%, #9aa7b8);
}

@media (max-width: 680px) {
    .site-shell .fajr-report-card__footer {
        min-height: 52px;
        padding-top: 11px;
    }

    .site-shell .fajr-report-card__footer::before {
        margin-bottom: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-shell .fajr-report-card__footer::before {
        transition: none !important;
    }
}

/* 2026-08-29: compact, low-bandwidth visual authority. */
.site-shell > .content-area { padding-bottom: clamp(36px, 5vw, 64px) !important; }
.site-shell .content-area > :where(section, article, .content-band, .glass-card) { margin-block: clamp(12px, 2vw, 22px) !important; }
.site-shell :where(.content-band, .glass-card, .liquid-panel, .section-card) { padding: clamp(14px, 2.4vw, 24px) !important; }
.site-shell :where(.section-title, .page-header) { margin-block-end: clamp(10px, 1.8vw, 18px) !important; }
.admin-glass-app .admin-content { gap: 14px !important; padding: clamp(12px, 2vw, 22px) !important; }
.admin-glass-app .admin-content > :where(.page-header, .admin-page-header, .admin-help, .admin-section, .glass-card, .admin-grid, .notice-box) { margin-block: 0 14px !important; }
.admin-glass-app :where(.admin-section, .glass-card.p-6) { padding: clamp(14px, 2vw, 22px) !important; }
.admin-glass-app :where(.form-grid, .admin-grid) { gap: clamp(10px, 1.5vw, 16px) !important; }
.admin-glass-app .form-actions { margin-block-start: 14px !important; }
.management-form-toggle > span { display: grid; gap: 2px; }
.management-form-toggle small { color: #667085; font-weight: 500; }
.management-target-summary { display: grid; align-content: start; gap: 9px; min-height: 220px; padding: 18px; border: 1px dashed color-mix(in srgb, var(--theme-primary) 26%, #d9e1eb); border-radius: 15px; background: color-mix(in srgb, var(--theme-primary) 4%, #fff); }
.management-target-summary :where(h3,p,ol) { margin: 0; }
.management-target-summary ol { display: grid; gap: 7px; padding-inline-start: 22px; color: #526071; font-size: .82rem; line-height: 1.75; }

@supports (content-visibility: auto) {
  .site-shell .content-area > :where(section, article):not(.story-strip):not(.news-ticker):not(.home-slider):not(.home-hero) {
    content-visibility: auto;
    contain-intrinsic-size: auto 520px;
  }
}

html[data-performance-mode="lite"] :where(.site-header, .footer, .mobile-site-nav, .glass-card, .content-band, .liquid-panel, .admin-sidebar, .admin-topbar) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 3px 12px rgb(15 23 42 / .07) !important;
}
html[data-performance-mode="lite"] :where(.admin-ambient, .decorative-orb, .liquid-orb) { display: none !important; }
/* Lite mode must never turn a long/infinite animation into a 180ms loop.
   Disable decorative motion instead of shortening it into a rapid flash. */
html[data-performance-mode="lite"] :where(.content-area, .admin-content) *,
html[data-performance-mode="lite"] :where(.content-area, .admin-content) *::before,
html[data-performance-mode="lite"] :where(.content-area, .admin-content) *::after {
  animation: none !important;
  transition-duration: .16s !important;
}
html[data-performance-mode="lite"] .content-area > * { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .story-chip > span, .story-viewer, .network-status-bar, .play-badge { transition: none !important; }
  .play-badge::before { animation: none !important; }
}

/* One tiny compositor-only pulse is safe in lite mode; keep it deliberately slow. */
@media (prefers-reduced-motion: no-preference) {
  html.is-android .play-badge::before,
  html[data-performance-mode="lite"] .play-badge::before {
    animation: playAura 7.2s cubic-bezier(.16, 1, .3, 1) infinite !important;
  }
}

/* Partner cards must always use their real content height. The generic grid
   virtualization fallback reserves 360px for off-screen cards and leaves a
   large empty tail when a card has little content. */
.site-shell .partner-groups-page .partner-groups-grid > .partner-card {
  content-visibility: visible !important;
  contain-intrinsic-size: none !important;
  height: auto !important;
  min-height: 0 !important;
  align-self: start !important;
}

/* Visual management-field mapper and portrait reel editor. */
.management-field-linker {
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--admin-warm, #d7b56d) 28%, #d9e1eb);
  border-radius: 15px;
  background: color-mix(in srgb, var(--admin-warm, #d7b56d) 5%, #fff);
}
.management-field-destination { display: block; margin-top: 4px; color: #166534 !important; font-weight: 750; }
.management-mapping-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.management-mapping-card {
  display: grid; align-content: start; gap: 8px; min-height: 142px; padding: 14px;
  border: 1px dashed #cfd7e3; border-radius: 16px; background: #fff; color: #344054;
}
.management-mapping-card.is-linked { border-style: solid; border-color: color-mix(in srgb, #22c55e 36%, #d8e1ea); background: color-mix(in srgb, #22c55e 4%, #fff); }
.management-mapping-card > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.management-mapping-card > div span { padding: 3px 7px; color: #9a3412; font-size: .67rem; border-radius: 999px; background: #ffedd5; }
.management-mapping-card > small { color: #667085; line-height: 1.65; }
.management-mapping-card > em { color: #98a2b3; font-size: .75rem; font-style: normal; }
.management-mapping-card ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.management-mapping-card li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 9px; background: rgb(255 255 255 / 82%); font-size: .78rem; }
.management-mapping-card li b { color: #667085; font-size: .68rem; }

.reel-admin-intro { margin: -4px 0 18px; color: #667085; line-height: 1.8; }
.reel-admin-preview { display: grid; place-items: center; padding: 14px; border-radius: 18px; background: #f4f6f9; }
.reel-admin-preview :is(img, video) { width: min(260px, 100%) !important; aspect-ratio: 9 / 16; display: block; object-fit: cover; border-radius: 17px; background: #111827; box-shadow: 0 12px 28px rgb(15 23 42 / 18%); }
.reel-admin-list-media img { width: 54px !important; height: 76px !important; object-fit: cover !important; border-radius: 10px !important; }
.reel-admin-list-media > span { min-width: 0; display: grid; gap: 3px; }

@media (max-width: 680px) {
  .management-mapping-grid { grid-template-columns: 1fr; }
  .management-mapping-card { min-height: 0; }
}
:root .page-action-status {
    position: fixed; inset: 0 0 auto; z-index: 11000; padding: 10px 18px;
    color: #fff; background: #334155; box-shadow: 0 2px 10px rgb(0 0 0 / .1);
    text-align: center; font-size: .88rem; pointer-events: none;
}
:root .page-action-status[hidden] { display: none; }