:root {
  --espresso: #1e1412;
  --espresso-2: #291b17;
  --espresso-3: #382722;
  --ivory: #f6f0e8;
  --paper: #fffaf4;
  --olive: #aaa46b;
  --olive-dark: #777243;
  --gold: #c6a66a;
  --gold-bright: #dfbd68;
  --rose: #b65f63;
  --muted: #a99b91;
  --line: rgba(220, 193, 143, .18);
  --line-light: rgba(45, 28, 23, .13);
  --success: #719752;
  --danger: #bd6264;
  --shadow: 0 24px 70px rgba(5, 2, 1, .35);
  --radius: 20px;
}

/* Executive admin dashboard */
.admin-dashboard-page { grid-template-columns: minmax(0,1fr) 270px; background: #f8f5f0; color: #2b211d; }
.admin-dashboard-page .admin-sidebar { width: 270px; padding: 26px 18px 18px; background: radial-gradient(circle at 50% 3%,rgba(193,165,91,.12),transparent 25%),linear-gradient(180deg,#211411,#17100f); }
.admin-dashboard-page .admin-brand { margin-bottom: 22px; }
.admin-dashboard-page .admin-brand img { width: 126px; }
.admin-dashboard-page .admin-brand small { color: #bba16c; }
.admin-dashboard-page .admin-sidebar nav { gap: 5px; }
.admin-dashboard-page .admin-sidebar nav a { min-height: 50px; padding: 10px 17px; color: #d6ccc6; border-radius: 14px; font-size: 13px; }
.admin-dashboard-page .admin-sidebar nav a span { margin-left: 6px; color: #d8cfca; }
.admin-dashboard-page .admin-sidebar nav a.active { color: #e3c17a; border-color: rgba(209,169,91,.25); background: linear-gradient(90deg,#58402d,#6f4e2c); }
.admin-sidebar-spacer { flex: 1; min-height: 18px; }
.admin-dashboard-page .admin-upgrade { margin: 0 3px 12px; padding: 20px 15px; text-align: center; border: 1px solid rgba(204,159,75,.28); border-radius: 14px; background: rgba(112,74,43,.19); }
.admin-dashboard-page .admin-upgrade b,.admin-dashboard-page .admin-upgrade small { display: block; }
.admin-dashboard-page .admin-upgrade b { color: #d9b86d; font-size: 16px; }
.admin-dashboard-page .admin-upgrade small { margin: 5px 0 13px; color: #c8bbb5; font-size: 10px; }
.admin-dashboard-page .admin-upgrade a { display: inline-block; padding: 8px 18px; color: #ddb96b; border: 1px solid #8b6637; border-radius: 9px; font-size: 11px; }
.admin-sidebar-links { display: grid; gap: 4px; }
.admin-sidebar-links a { padding: 6px 10px; color: #a99b95; font-size: 10px; }
.admin-dashboard-page .admin-sidebar form { margin-top: 6px; }
.admin-logout { width: 100%; padding: 8px; color: #bcaeaa; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 10px; }
.admin-dashboard-page .admin-main { padding: 27px 30px 0; background: radial-gradient(circle at 38% 0,#fffaf4 0,transparent 30%),#f8f5f0; }
.admin-main > .admin-topbar { min-height: 82px; margin-bottom: 17px; }
.admin-heading .kicker { position: relative; padding-right: 31px; color: #7f726d; font-size: 12px; }
.admin-heading .kicker::before { content: ""; position: absolute; right: 0; top: 50%; width: 22px; height: 1px; background: #c99c45; }
.admin-heading h1 { margin: 5px 0 0; font-size: 28px; }
.admin-heading p { margin: 3px 0 0; color: #978b84; font-size: 11px; }
.admin-top-actions { direction: ltr; display: flex; align-items: center; gap: 9px; }
.admin-top-actions > button { position: relative; width: 34px; height: 34px; color: #3a2b25; border: 0; border-radius: 50%; background: transparent; cursor: pointer; font-size: 17px; }
.admin-top-actions .has-notification::after { content: ""; position: absolute; top: 4px; right: 3px; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: #d03037; }
.admin-profile { direction: rtl; display: flex; align-items: center; gap: 9px; padding-left: 12px; border-left: 1px solid #e1dad3; }
.admin-profile > span { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: linear-gradient(135deg,#8b6b4b,#21130f); }
.admin-profile b,.admin-profile small { display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-profile b { font-size: 11px; }
.admin-profile small { color: #938780; font-size: 8px; }
.admin-toolbar { direction: ltr; display: flex; gap: 9px; margin-bottom: 16px; }
.admin-date-filter,.admin-filter-button { min-height: 39px; display: flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid #e4d8c9; border-radius: 7px; background: rgba(255,255,255,.7); box-shadow: 0 4px 14px rgba(53,35,25,.03); }
.admin-date-filter { direction: rtl; }
.admin-date-filter select { min-width: 125px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 11px; }
.admin-filter-button { color: #3f322c; cursor: pointer; font: inherit; font-size: 11px; }
.executive-stats { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; margin-bottom: 17px; }
.executive-stat { min-height: 145px; padding: 17px 16px 11px; overflow: hidden; border: 1px solid #ece5de; border-radius: 13px; background: rgba(255,255,255,.68); box-shadow: 0 7px 22px rgba(49,34,26,.055); }
.executive-stat-head { display: flex; align-items: center; justify-content: space-between; color: #554943; font-size: 10px; }
.executive-stat-head i { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 50%; background: #e8dfc3; font-style: normal; font-size: 20px; }
.executive-stat-gold .executive-stat-head i { color: #8e5b0b; background: #e8c278; }
.executive-stat-sage .executive-stat-head i { color: #56562e; background: #ccca9e; }
.executive-stat-rose .executive-stat-head i { color: #a6443e; background: #edbeb9; }
.executive-stat-sand .executive-stat-head i { color: #9a6d22; background: #f3dfb3; }
.executive-stat strong { display: block; margin: -5px 0 2px; font-size: clamp(18px,1.65vw,25px); font-weight: 500; }
.metric-change { direction: ltr; display: inline-block; font-size: 9px; }
.metric-change.up { color: #2f9b58; }.metric-change.down { color: #cc5650; }
.executive-stat small { display: block; margin-top: 2px; color: #948981; font-size: 8px; }
.metric-spark { height: 24px; margin-top: 5px; display: flex; align-items: end; gap: 4px; transform: skewX(-16deg); }
.metric-spark i { flex: 1; height: 30%; border-top: 1.5px solid #c59539; }
.metric-spark i:nth-child(2),.metric-spark i:nth-child(6){height:70%}.metric-spark i:nth-child(3){height:24%}.metric-spark i:nth-child(4){height:50%}.metric-spark i:nth-child(5){height:18%}.metric-spark i:nth-child(7){height:82%}
.dashboard-chart-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; margin-bottom: 16px; }
.executive-panel { padding: 16px 18px; border: 1px solid #e9e2db; border-radius: 13px; background: rgba(255,255,255,.63); box-shadow: 0 7px 20px rgba(53,36,27,.045); }
.executive-panel-head { min-height: 31px; display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.executive-panel-head h2 { margin: 0; color: #3a2f2a; font-size: 13px; font-weight: 600; }
.executive-panel-head p { margin: 2px 0 0; color: #998e87; font-size: 8px; }
.panel-info { color: #6e625c; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; color: #776c66; font-size: 8px; }
.chart-legend span::before { content: ""; width: 7px; height: 7px; display: inline-block; margin-left: 5px; border-radius: 50%; background: #8e8c50; }
.chart-legend .legend-lost::before { background: #d59a34; }.chart-legend .legend-gold::before { background: #d1a34c; }
.chart-legend.centered { justify-content: center; margin-top: 3px; }
.line-chart-wrap { height: 190px; margin-top: 8px; }
.line-chart-wrap canvas { width: 100%; height: 100%; display: block; }
.bar-chart { height: 169px; display: flex; align-items: stretch; justify-content: space-around; gap: 10px; padding: 18px 7px 0; border-bottom: 1px solid #e8e1d9; background: repeating-linear-gradient(to top,transparent 0,transparent 41px,#eee7e0 42px); }
.bar-group { flex: 1; display: flex; flex-direction: column; justify-content: end; align-items: center; }
.bar-pair { width: 100%; flex: 1; display: flex; align-items: end; justify-content: center; gap: 4px; }
.bar-pair i { width: min(17px,34%); min-height: 3px; border-radius: 3px 3px 0 0; background: #94945b; }
.bar-pair .bar-favorite { background: #d2a34c; }
.bar-group small { margin-top: 6px; color: #726761; white-space: nowrap; font-size: 7px; }
.dashboard-detail-grid { display: grid; grid-template-columns: 1.3fr 1.25fr .82fr; gap: 13px; margin-bottom: 16px; }
.dashboard-detail-grid .executive-panel { min-width: 0; padding: 14px 13px 9px; }
.recent-content-list,.alerts-list { display: grid; gap: 5px; margin-top: 8px; }
.recent-content-item { min-height: 49px; display: grid; grid-template-columns: 73px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 4px; color: #302520; border: 1px solid #ebe3db; border-radius: 7px; background: rgba(255,255,255,.35); }
.recent-content-item img { width: 73px; height: 42px; object-fit: cover; border-radius: 5px; background: #281b17; }
.recent-content-item b,.recent-content-item small { display: block; }
.recent-content-item b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.recent-content-item small,.recent-content-item > span { color: #948982; font-size: 7px; }
.panel-link { margin-top: 7px; padding-top: 8px; display: block; color: #a3782f; border-top: 1px solid #eee7e0; text-align: center; font-size: 9px; }
.compact-table-wrap { overflow-x: auto; margin-top: 8px; }
.compact-table { width: 100%; border-collapse: collapse; font-size: 8px; }
.compact-table th { padding: 6px 4px; color: #756a64; font-weight: 500; border-bottom: 1px solid #e9e1da; }
.compact-table td { padding: 7px 4px; border-bottom: 1px solid #eee8e2; white-space: nowrap; }
.compact-table td b,.compact-table td small { display: block; }.compact-table td small { color: #9b9089; font-size: 7px; }
.payment-badge { padding: 3px 5px; color: #5f4b17; border-radius: 4px; background: #f1d34f; font-weight: 700; font-size: 7px; }
.dashboard-alert { min-height: 51px; display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid #eee1d8; border-radius: 7px; background: #fcf8f5; }
.dashboard-alert > i { width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 auto; color: #a84640; border-radius: 50%; background: #f5ccc7; font-style: normal; font-weight: 700; }
.dashboard-alert b,.dashboard-alert small { display: block; }.dashboard-alert b { font-size: 8px; }.dashboard-alert small { margin-top: 2px; color: #998d86; font-size: 7px; }
.dashboard-alert-warning > i { color: #987521; background: #f5e3a9; }.dashboard-alert-olive > i { color: #626130; background: #dad9a6; }
.admin-empty { padding: 14px; color: #948982; text-align: center; font-size: 10px; }
.dashboard-footer-stats { margin: 0 -30px; min-height: 74px; display: grid; grid-template-columns: repeat(4,1fr); align-items: center; border-top: 1px solid #e6ded6; background: rgba(255,255,255,.47); }
.dashboard-footer-stats > div { padding: 8px 24px; border-left: 1px solid #e6ded6; }
.dashboard-footer-stats > div:last-child { border-left: 0; }
.dashboard-footer-stats span,.dashboard-footer-stats strong { display: block; }.dashboard-footer-stats span { color: #7c716a; font-size: 8px; }.dashboard-footer-stats strong { margin-top: 4px; font-size: 15px; font-weight: 500; }

@media (max-width:1180px){
  .executive-stats { grid-template-columns: repeat(3,1fr); }
  .dashboard-detail-grid { grid-template-columns: 1fr 1fr; }
  .alerts-panel { grid-column: 1/-1; }
}
@media (max-width:900px){
  .admin-dashboard-page { display: block; color: #2b211d; background: #f8f5f0; }
  .admin-dashboard-page .admin-main { padding: 20px 14px 90px; background: #f8f5f0; }
  .admin-top-actions > button { display: none; }.admin-profile small { display: none; }
  .executive-stats { grid-template-columns: repeat(2,1fr); }
  .dashboard-chart-grid,.dashboard-detail-grid { grid-template-columns: 1fr; }
  .alerts-panel { grid-column: auto; }
  .dashboard-footer-stats { margin: 0 -14px; grid-template-columns: 1fr 1fr; }
}
@media (max-width:560px){
  .admin-main > .admin-topbar { min-height: 62px; }.admin-heading h1 { font-size: 21px; }.admin-heading p { display: none; }
  .admin-profile div { display: none; }
  .admin-toolbar { justify-content: stretch; }.admin-date-filter { flex: 1; }.admin-date-filter select { width: 100%; min-width: 0; }
  .executive-stats { gap: 8px; }.executive-stat { min-height: 126px; padding: 12px 10px; }.executive-stat-head i { width: 30px; height: 30px; }.executive-stat strong { margin-top: 2px; }
  .dashboard-chart-grid { gap: 10px; }.executive-panel { padding: 13px 10px; }.line-chart-wrap { height: 165px; }
  .recent-content-item { grid-template-columns: 64px minmax(0,1fr); }.recent-content-item img { width: 64px; }.recent-content-item > span { display: none; }
  .dashboard-footer-stats > div { padding: 11px 14px; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ivory); background: #150e0c; font-family: "IBM Plex Sans Arabic", sans-serif; line-height: 1.75; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
main { min-height: 65vh; }

/* Header */
.site-header {
  height: 80px; padding: 0 clamp(22px, 5vw, 72px); display: flex; align-items: center; gap: 42px;
  position: sticky; top: 0; z-index: 80; border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(18, 11, 9, .93); backdrop-filter: blur(18px);
}
.brand img { width: 114px; max-height: 64px; object-fit: contain; filter: none; }
.site-header nav { display: flex; gap: 34px; margin-inline: auto; font-size: 13px; font-weight: 600; }
.site-header nav a { position: relative; padding: 28px 0 23px; color: rgba(255,255,255,.76); }
.site-header nav a::after { content: ""; position: absolute; right: 50%; bottom: 13px; width: 0; height: 2px; background: var(--gold); transition: .25s; }
.site-header nav a:hover, .site-header nav a.active { color: var(--gold-bright); }
.site-header nav a:hover::after, .site-header nav a.active::after { right: 15%; width: 70%; }
.header-actions { display: flex; align-items: center; gap: 13px; }
.pill-link { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.8); }
.icon-link { width: 41px; height: 41px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; font-size: 25px; line-height: 1; }
.nav-toggle { display: none; width: 38px; border: 0; background: transparent; padding: 6px; gap: 5px; }
.nav-toggle span { display: block; width: 100%; height: 2px; background: var(--ivory); border-radius: 3px; }
.mobile-nav, .admin-mobile-nav { display: none; }
.mobile-profile, .mobile-bell, .mobile-header-actions { display: none; }

/* Controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 12px 25px;
  border: 1px solid transparent; border-radius: 10px; background: linear-gradient(135deg, #b18b42, #e0bd67);
  color: #1a100c; font-weight: 800; box-shadow: 0 12px 30px rgba(198,166,106,.17); transition: transform .2s, filter .2s;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.07); }
.btn-sm { min-height: 39px; padding: 8px 18px; font-size: 12px; border-radius: 9px; }
.btn-ghost { color: var(--ivory); background: transparent; border-color: rgba(222,190,125,.55); box-shadow: none; }
.btn-light { background: var(--ivory); color: var(--espresso); }
.btn-danger { color: white; background: var(--danger); }
.kicker, .eyebrow { display: inline-block; margin-bottom: 10px; color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .05em; }

/* Home */
.hero { min-height: 550px; position: relative; display: flex; align-items: center; overflow: hidden; background: #160e0c; }
.hero-media { position: absolute; inset: 0; background: url('/assets/img/hero-sudanese-table.png') 67% center/cover no-repeat; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,10,8,.99) 0%, rgba(24,14,11,.86) 38%, rgba(18,10,8,.12) 76%), linear-gradient(0deg, #150e0c 0%, transparent 19%); }
.hero-content { position: relative; z-index: 2; width: min(550px, 90%); margin-right: clamp(34px, 12vw, 210px); padding: 70px 0 105px; }
.hero h1 { margin: 0 0 19px; font-family: "Readex Pro", sans-serif; font-size: clamp(44px, 5.3vw, 76px); line-height: 1.22; letter-spacing: -.04em; }
.hero h1 em { color: var(--olive); font-style: normal; }
.hero p { max-width: 520px; margin: 0 0 25px; color: rgba(255,255,255,.72); font-size: 16px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 35px; color: rgba(255,255,255,.5); font-size: 11px; }
.section { padding: 68px clamp(24px, 5vw, 78px); background: #150e0c; }
.section-soft { background: #1d1411; }
.category-strip { position: relative; z-index: 4; margin: -52px clamp(22px,5vw,75px) 0; padding: 18px 25px; border: 1px solid var(--line); border-radius: 18px; background: rgba(31,21,18,.94); box-shadow: var(--shadow); }
.category-strip .section-head { display: none; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin-bottom: 28px; }
.section-head h2 { margin: 0; font-family: "Readex Pro"; font-size: clamp(27px,3.5vw,43px); line-height: 1.3; }
.section-head > a { color: var(--gold); font-size: 13px; }
.chips { display: grid; grid-template-columns: repeat(6,1fr); gap: 0; }
.chips a { min-width: 0; padding: 12px 18px; text-align: center; border-left: 1px solid var(--line); transition: .2s; }
.chips a:last-child { border-left: 0; }
.chips a:hover { color: var(--gold); }
.chips span { display: block; font-weight: 700; font-size: 13px; }
.chips small { color: var(--muted); font-size: 10px; }
.feature-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 17px; }
.card-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 17px; }
.content-card { display: block; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #211714; transition: .25s; }
.content-card:hover { transform: translateY(-5px); border-color: rgba(215,183,112,.55); box-shadow: var(--shadow); }
.card-image { position: relative; aspect-ratio: 16/10; background-position: center; background-size: cover; }
.card-image::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(0deg,rgba(15,9,7,.75),transparent); }
.featured-card { grid-row: span 2; }
.featured-card .card-image { aspect-ratio: 4/3; }
.play { position: absolute; z-index: 2; right: 50%; bottom: 50%; transform: translate(50%,50%); width: 45px; height: 45px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; display: grid; place-items: center; padding-right: 3px; background: rgba(15,10,8,.55); color: white; backdrop-filter: blur(5px); }
.premium { position: absolute; z-index: 3; top: 11px; left: 11px; padding: 4px 9px; border-radius: 999px; background: var(--rose); color: white; font-size: 9px; }
.card-body { padding: 14px 16px; }
.card-body h3 { margin: 0 0 5px; font-size: 15px; line-height: 1.55; }
.card-body p { margin: 0 0 7px; overflow: hidden; color: var(--muted); font-size: 11px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card-body small { color: #96877d; font-size: 10px; }
.story-band { min-height: 500px; padding: 70px clamp(24px,8vw,120px); display: flex; align-items: center; background: linear-gradient(90deg,#180f0d 0%,rgba(24,15,13,.8) 43%,rgba(24,15,13,.08)),url('/assets/img/hero-sudanese-table.png') 70% center/cover; }
.story-band > div { max-width: 560px; }
.story-band h2 { margin: 0 0 17px; font-family: "Readex Pro"; font-size: clamp(34px,4.4vw,57px); line-height: 1.3; }
.story-band p { color: rgba(255,255,255,.67); font-size: 15px; }
.article-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 17px; }
.article-card { display: grid; grid-template-columns: 190px 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #211714; transition: .25s; }
.article-card:hover { transform: translateY(-4px); border-color: rgba(215,183,112,.5); }
.article-card img { width: 100%; height: 100%; min-height: 170px; object-fit: cover; }
.article-card div { padding: 20px; }
.article-card span { color: var(--gold); font-size: 10px; font-weight: 700; }
.article-card h3 { margin: 5px 0; font-size: 18px; line-height: 1.5; }
.article-card p { margin: 0; color: var(--muted); font-size: 12px; }
.subscribe-cta { position: relative; overflow: hidden; margin: 36px clamp(24px,5vw,78px) 80px; padding: 60px; border: 1px solid var(--line); border-radius: 22px; text-align: center; background: radial-gradient(circle at 15% 20%,rgba(170,164,107,.18),transparent 34%),#211512; }
.subscribe-cta h2 { margin: 8px 0; font-family: "Readex Pro"; font-size: clamp(31px,4vw,50px); line-height: 1.35; }
.subscribe-cta > span { color: var(--gold); }
.subscribe-cta p { color: var(--muted); }

/* Libraries, content and search */
.page-hero { padding: 72px clamp(22px,8vw,120px) 55px; text-align: right; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 15% 30%,rgba(170,164,107,.13),transparent 25%),#180f0d; }
.page-hero h1 { margin: 0; font-family: "Readex Pro"; font-size: clamp(40px,5vw,65px); line-height: 1.25; }
.page-hero p { max-width: 600px; margin: 8px 0 0; color: var(--muted); }
.big-search { max-width: 760px; margin: 24px 0 0; display: flex; gap: 9px; }
input, textarea, select { width: 100%; padding: 12px 14px; color: inherit; border: 1px solid var(--line); border-radius: 10px; outline: none; background: rgba(255,255,255,.045); }
input:focus, textarea:focus, select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(198,166,106,.12); }
.watch-page { padding: 45px clamp(22px,7vw,110px) 85px; background: #150e0c; }
.watch-player { aspect-ratio: 16/8; max-height: 680px; overflow: hidden; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 16px; background: #050303; box-shadow: var(--shadow); }
.watch-player video { width: 100%; height: 100%; background: #000; }
.watch-info { max-width: 920px; margin: 30px auto 0; }
.watch-info h1 { margin: 0 0 10px; font-family: "Readex Pro"; font-size: clamp(32px,4.3vw,54px); }
.watch-info p { color: var(--muted); }
.meta { display: flex; gap: 22px; color: var(--gold); font-size: 11px; }
.locked, .processing { padding: 38px; text-align: center; }
.locked span { font-size: 34px; }
.locked h2 { margin: 8px 0; }
.locked p { color: var(--muted); }
.article-page { max-width: 920px; margin: 55px auto; padding: 55px; color: var(--espresso); border-radius: 18px; background: var(--ivory); box-shadow: var(--shadow); }
.article-page header { text-align: center; }
.article-page h1 { margin: 0 0 12px; font-family: "Readex Pro"; font-size: clamp(38px,5vw,66px); line-height: 1.28; }
.article-page header p { color: #75665e; }
.article-page header img { width: 100%; aspect-ratio: 16/8; margin-top: 28px; border-radius: 14px; object-fit: cover; }
.prose { max-width: 720px; margin: 45px auto 0; font-size: 16px; }
.inline-lock { max-width: 650px; margin: 40px auto 0; color: var(--ivory); border-radius: 16px; background: var(--espresso); }
.empty, .not-found { padding: 65px; color: var(--muted); text-align: center; }

/* Privacy policy */
.page-privacy,.page-terms { background: radial-gradient(circle at 84% 8%,rgba(198,166,106,.12),transparent 28%),radial-gradient(circle at 12% 75%,rgba(170,164,107,.08),transparent 25%),#120c0b; }
.privacy-page { min-height: calc(100vh - 90px); padding: clamp(46px,7vw,100px) clamp(18px,7vw,110px); }
.privacy-card { position: relative; max-width: 1040px; margin: 0 auto; padding: clamp(32px,5vw,68px); overflow: hidden; border: 1px solid rgba(198,166,106,.3); border-radius: 26px; background: linear-gradient(145deg,rgba(45,29,25,.92),rgba(24,15,13,.96)); box-shadow: 0 35px 90px rgba(0,0,0,.35); }
.privacy-card::before { content: ""; position: absolute; width: 340px; height: 340px; top: -210px; left: -110px; border: 1px solid rgba(198,166,106,.13); border-radius: 50%; box-shadow: 0 0 0 48px rgba(198,166,106,.025),0 0 0 96px rgba(198,166,106,.018); pointer-events: none; }
.privacy-heading { position: relative; padding-bottom: 28px; text-align: right; border-bottom: 1px solid var(--line); }
.privacy-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 10px; color: var(--gold-bright); font-size: 14px; font-weight: 600; }
.privacy-kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.privacy-heading h1 { margin: 0; color: var(--ivory); font-family: "Readex Pro"; font-size: clamp(38px,5vw,64px); line-height: 1.35; }
.privacy-divider { display: block; width: 72px; height: 3px; margin-top: 20px; border-radius: 3px; background: linear-gradient(90deg,var(--gold),var(--gold-bright)); }
.privacy-content { position: relative; display: grid; gap: 14px; margin-top: 30px; }
.privacy-paragraph { display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: start; gap: 16px; padding: 19px 20px; border: 1px solid rgba(220,193,143,.12); border-radius: 15px; background: rgba(255,255,255,.025); }
.privacy-number { width: 36px; height: 36px; display: grid; place-items: center; color: #1a110f; border-radius: 50%; background: linear-gradient(135deg,var(--gold-bright),var(--gold)); font-family: "Readex Pro"; font-size: 13px; font-weight: 700; }
.privacy-paragraph p { margin: 3px 0 0; color: #d9cec7; font-size: 16px; line-height: 2; }
@media (max-width: 680px) {
  .privacy-page { min-height: auto; padding: 28px 14px 95px; }
  .privacy-card { padding: 26px 18px; border-radius: 19px; }
  .privacy-heading { padding-bottom: 21px; }
  .privacy-heading h1 { font-size: 34px; }
  .privacy-kicker { font-size: 12px; }
  .privacy-content { gap: 10px; margin-top: 20px; }
  .privacy-paragraph { grid-template-columns: 32px minmax(0,1fr); gap: 11px; padding: 15px 13px; }
  .privacy-number { width: 30px; height: 30px; font-size: 11px; }
  .privacy-paragraph p { margin-top: 0; font-size: 14px; line-height: 1.95; }
}

/* Login */
.page-login .site-header, .page-login footer, .page-login .mobile-nav { display: none; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1.03fr 1fr; background: var(--ivory); }
.auth-art { position: relative; background: linear-gradient(0deg,rgba(23,13,10,.24),rgba(23,13,10,.2)),url('/assets/img/hero-sudanese-table.png') center/cover; }
.auth-art::after { content: "تجربة سودانية أصيلة... بنكهة عالمية"; position: absolute; top: 14%; right: 50%; width: 70%; transform: translateX(50%); color: white; font-family: "Readex Pro"; font-size: clamp(33px,4vw,57px); font-weight: 600; line-height: 1.5; text-align: center; text-shadow: 0 3px 25px rgba(0,0,0,.5); }
.auth-card { width: min(520px,84%); margin: auto; color: var(--espresso); background: transparent; }
.auth-card::before { content: ""; width: 180px; height: 100px; margin: 0 auto 22px; display: block; background: url('/assets/img/taggaa-logo.png') center/contain no-repeat; }
.auth-card h1 { margin: 0; font-family: "Readex Pro"; font-size: 40px; text-align: center; }
.auth-card > p { color: #81746d; text-align: center; }
label { display: grid; gap: 6px; margin: 15px 0; font-size: 12px; font-weight: 700; }
.auth-card input, .price-card input { border-color: rgba(91,67,54,.28); background: rgba(255,255,255,.6); }
.auth-card form .btn, .price-card form .btn { width: 100%; margin-top: 9px; }
.auth-card hr { margin: 25px 0; border: 0; border-top: 1px solid rgba(80,58,48,.17); }
.auth-card summary { color: #776b65; text-align: center; cursor: pointer; }
.subscriber-help { font-size: 12px; }
.subscriber-help a { color: var(--olive-dark); font-weight: 700; }
.alert { margin: 14px 0; padding: 11px 14px; border-radius: 9px; font-size: 12px; }
.alert.error { color: #802f31; background: #f5dfe0; }
.alert.success { color: #295b43; background: #e0f0e7; }
.alert.subscription-required { display: grid; gap: 10px; }
.alert-subscribe-btn { padding: 10px 16px; color: #24180e; border-radius: 8px; background: var(--gold); font-weight: 800; text-align: center; text-decoration: none; }
.alert-subscribe-btn:hover { filter: brightness(.96); transform: translateY(-1px); }
.local-subscription-test { margin: 14px 0 18px; padding: 13px 15px; display: grid; gap: 3px; color: #443410; border: 1px solid rgba(172,132,37,.34); border-radius: 10px; background: linear-gradient(135deg,#fff7d9,#f7e6a8); text-decoration: none; box-shadow: 0 8px 24px rgba(113,82,22,.08); }
.local-subscription-test span { color: #9a6d12; font-size: 11px; font-weight: 700; }
.local-subscription-test b { font-size: 14px; }
.local-subscription-test small { color: #766540; font-size: 11px; }
.local-subscription-test:hover { border-color: #b99031; transform: translateY(-1px); }

/* Subscription */
.subscription-page { min-height: calc(100vh - 80px); padding: 65px clamp(25px,8vw,125px); display: grid; grid-template-columns: 1fr .86fr; gap: 55px; align-items: center; background: linear-gradient(90deg,rgba(21,13,11,.97) 0%,rgba(21,13,11,.86) 56%,rgba(21,13,11,.2)),url('/assets/img/hero-sudanese-table.png') 75% center/cover fixed; }
.subscription-copy h1 { margin: 0 0 17px; font-family: "Readex Pro"; font-size: clamp(44px,5.5vw,72px); line-height: 1.25; }
.subscription-copy h1::after { content: " بلا حدود"; color: var(--gold); }
.subscription-copy p { color: rgba(255,255,255,.7); font-size: 15px; }
.subscription-copy ul { padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.subscription-copy li { position: relative; padding: 11px 33px 11px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(24,15,13,.72); font-size: 12px; }
.subscription-copy li::before { content: "✓"; position: absolute; right: 11px; color: var(--gold); }
.price-card { padding: 30px; border: 1px solid rgba(214,180,108,.35); border-radius: 17px; background: rgba(35,24,20,.91); box-shadow: var(--shadow); backdrop-filter: blur(15px); }
.price { margin: 6px 0; color: var(--gold-bright); font-size: 37px; font-weight: 800; }
.price small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; }
.price-card > p { color: var(--muted); font-size: 12px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.check input { width: auto; margin-top: 6px; accent-color: var(--gold); }
.sudani-subscription .subscription-copy h1::after{content:""}.sudani-subscription{position:relative;overflow:hidden}.sudani-subscription::before{content:"";position:absolute;inset:auto -100px -170px auto;width:420px;height:420px;border-radius:42% 58% 70% 30%;background:#0000c8;opacity:.12;transform:rotate(-18deg);pointer-events:none}.sudani-flow{margin-top:23px;display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.sudani-flow span{padding:12px 10px;display:flex;align-items:center;gap:8px;color:#d8d5d0;border:1px solid rgba(65,125,255,.28);border-radius:10px;background:rgba(0,0,200,.09);font-size:10px}.sudani-flow b{width:24px;height:24px;display:grid;place-items:center;flex:0 0 auto;color:#0000c8;border-radius:50%;background:#ffeb00}.sudani-card{border-color:rgba(65,125,255,.55);box-shadow:0 22px 65px rgba(0,0,80,.22)}.sudani-provider{margin-bottom:23px;padding-bottom:17px;display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(65,125,255,.25)}.sudani-provider b,.sudani-provider small{display:block}.sudani-provider b{font-size:19px}.sudani-provider small{margin-top:2px;color:var(--muted);font-size:9px}.sudani-symbol,.sudani-mini{display:grid;place-items:center;color:#fff;border-radius:10px;background:#0000c8;font-style:normal;font-family:Arial,sans-serif;font-weight:800}.sudani-symbol{width:48px;height:48px;font-size:15px}.sudani-pay-button{color:#050548!important;background:linear-gradient(135deg,#ffeb00,#f3d900)!important;box-shadow:0 12px 28px rgba(255,235,0,.18)!important}.secure-note{margin-top:12px;display:block;color:#8f8580;text-align:center;font-size:9px}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.panel-heading span{color:#0000c8;font-size:9px;font-weight:700}.panel-heading h2{margin:2px 0 0}.sudani-mini{width:42px;height:42px;font-size:12px}.account-actions{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}.account-actions form{margin:0}.account-actions .btn{min-height:40px;padding:0 15px;font-size:10px}

/* Account */
.page-account { background: #18100e; }
.account-page { width: min(1180px,calc(100% - 48px)); margin: 38px auto 75px; padding: 45px; color: var(--espresso); border-radius: 18px; background: var(--ivory); box-shadow: var(--shadow); }
.account-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 26px; border-bottom: 1px solid var(--line-light); }
.account-head h1 { margin: 0; font-family: "Readex Pro"; font-size: 43px; }
.status { display: inline-flex; padding: 5px 10px; border-radius: 6px; background: #e7e2da; font-size: 10px; font-weight: 700; }
.status-active { color: #315b2b; background: #dce8d4; }
.status-canceled, .status-expired, .status-failed { color: #7b3134; background: #f0d7d8; }
.status-past_due, .status-suspended { color: #73571c; background: #f2e6c8; }
.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.panel, .admin-panel { padding: 22px; border: 1px solid var(--line-light); border-radius: 14px; background: rgba(255,255,255,.45); }
.panel h2 { margin-top: 0; font-size: 18px; }
.panel dl div { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line-light); }
.panel dt { color: #786c65; }
.panel dd { margin: 0; }
.timeline > div { display: grid; grid-template-columns: 1fr auto; gap: 3px 15px; padding: 9px 0; border-bottom: 1px solid var(--line-light); }
.timeline small { grid-column: 1/-1; color: #786c65; }
.mini-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; }
.mini-grid img { aspect-ratio: 16/9; border-radius: 9px; object-fit: cover; }

/* Footer */
footer { padding: 58px clamp(25px,6vw,90px); display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 45px; color: white; border-top: 1px solid var(--line); background: #100a08; }
footer img { width: 120px; filter: brightness(1.25); }
footer img.footer-logo { width: 120px; height: 120px; object-fit: contain; filter: none; }
footer p, footer a, footer small { color: rgba(255,255,255,.53); font-size: 12px; }
footer a { display: block; margin: 6px 0; }
footer small { grid-column: 1/-1; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); }
.most-viewed-section { border-top: 1px solid rgba(198,166,106,.14); background: radial-gradient(circle at 12% 15%,rgba(198,166,106,.07),transparent 30%); }
.views-badge { position: absolute; right: 10px; bottom: 10px; z-index: 3; padding: 4px 8px; color: #fff4d5; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(20,12,9,.76); backdrop-filter: blur(8px); font-size: 9px; }

/* Admin */
.admin-body { min-height: 100vh; display: grid; grid-template-columns: 1fr 245px; color: var(--espresso); background: var(--ivory); }
.admin-sidebar { grid-column: 2; grid-row: 1; position: sticky; top: 0; height: 100vh; padding: 30px 20px; display: flex; flex-direction: column; color: white; background: radial-gradient(circle at 70% 5%,rgba(170,164,107,.1),transparent 25%),#1b110f; }
.admin-brand { display: grid; justify-items: center; margin-bottom: 35px; }
.admin-brand img { width: 130px; filter: brightness(1.25); }
.admin-brand small { margin-top: 5px; color: var(--gold); font-size: 9px; }
.admin-sidebar nav { display: grid; gap: 7px; }
.admin-sidebar nav a { padding: 11px 14px; display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.68); border: 1px solid transparent; border-radius: 11px; font-size: 12px; }
.admin-sidebar nav a span { width: 22px; color: var(--gold); font-size: 19px; text-align: center; }
.admin-sidebar nav a:hover, .admin-sidebar nav a.active { color: var(--gold-bright); border-color: rgba(198,166,106,.3); background: linear-gradient(90deg,rgba(198,166,106,.18),rgba(198,166,106,.04)); }
.admin-upgrade { margin-top: auto; padding: 20px; display: grid; gap: 4px; text-align: center; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.035); }
.admin-upgrade > span { color: var(--gold); font-size: 29px; }
.admin-upgrade small { color: var(--muted); font-size: 9px; }
.admin-sidebar form { margin-top: 15px; }
.admin-sidebar form .btn { width: 100%; }
.admin-main { grid-column: 1; grid-row: 1; min-width: 0; padding: 30px; }
.admin-main > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.admin-main > header h1 { margin: 0; font-family: "Readex Pro"; font-size: 31px; }
.admin-user { display: flex; align-items: center; gap: 9px; font-size: 11px; }
.admin-user span { color: var(--rose); }
.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 18px; }
.stat-grid > div { position: relative; overflow: hidden; padding: 21px; border: 1px solid var(--line-light); border-radius: 14px; background: rgba(255,255,255,.62); box-shadow: 0 9px 24px rgba(45,25,17,.06); }
.stat-grid > div::after { content: "↗"; position: absolute; left: 16px; top: 14px; color: var(--olive-dark); }
.stat-grid span { color: #776b65; font-size: 11px; }
.stat-grid strong { display: block; margin-top: 5px; font-size: 31px; }
.admin-panel { background: rgba(255,255,255,.6); }
.admin-toolbar { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 17px; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; text-align: right; }
th, td { padding: 12px 11px; border-bottom: 1px solid var(--line-light); white-space: nowrap; }
th { color: #776b65; font-size: 10px; }
td { font-size: 11px; }
.link-danger { color: var(--danger); border: 0; background: transparent; }
dialog { width: min(820px,92vw); padding: 0; color: var(--espresso); border: 0; border-radius: 18px; background: var(--ivory); box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(12,7,6,.78); backdrop-filter: blur(5px); }
dialog form { padding: 28px; }
.dialog-head { display: flex; justify-content: space-between; }
.dialog-head button { border: 0; background: none; font-size: 27px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-grid .full { grid-column: 1/-1; }
.admin-dark-page { color: var(--ivory); background: #150e0c; }
.admin-dark-page .admin-main { background: radial-gradient(circle at 15% 15%,rgba(170,164,107,.06),transparent 25%),#150e0c; }
.admin-dark-page .admin-panel { border-color: var(--line); background: rgba(255,255,255,.025); }
.admin-dark-page th, .admin-dark-page td { border-color: var(--line); }
.admin-dark-page th { color: var(--muted); }
.admin-dark-page input, .admin-dark-page select { color: var(--ivory); }

/* Standalone admin authentication */
.admin-auth-body { min-height: 100vh; color: var(--ivory); background: #120b09; }
.admin-login-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.admin-login-brand { position: relative; overflow: hidden; padding: clamp(45px,7vw,105px); display: flex; flex-direction: column; justify-content: center; background: linear-gradient(90deg,rgba(20,12,10,.98),rgba(20,12,10,.7)),url('/assets/img/hero-sudanese-table.png') 65% center/cover; }
.admin-login-brand::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 35% 40%,rgba(198,166,106,.13),transparent 38%); }
.admin-login-brand > * { position: relative; z-index: 1; }
.admin-login-brand img { width: 155px; margin-bottom: 35px; filter: brightness(1.35); }
.admin-login-brand > span { width: fit-content; padding: 5px 11px; color: var(--gold); border: 1px solid var(--line); border-radius: 999px; font-size: 10px; }
.admin-login-brand h1 { margin: 15px 0; font-family: "Readex Pro"; font-size: clamp(43px,5vw,70px); line-height: 1.28; }
.admin-login-brand p { max-width: 560px; color: rgba(255,255,255,.62); }
.admin-login-features { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.admin-login-features span { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; color: #d9cec6; font-size: 10px; background: rgba(255,255,255,.025); }
.admin-login-panel { padding: 35px; display: grid; place-items: center; color: var(--espresso); background: var(--ivory); }
.admin-login-card { width: min(440px,100%); }
.admin-login-icon { width: 52px; height: 52px; margin-bottom: 17px; display: grid; place-items: center; color: var(--gold); border: 1px solid rgba(110,83,50,.18); border-radius: 14px; background: rgba(198,166,106,.12); font-size: 27px; }
.admin-login-card h2 { margin: 0; font-family: "Readex Pro"; font-size: 35px; }
.admin-login-card > p { margin: 7px 0 24px; color: #7f7169; font-size: 13px; }
.admin-login-card input { color: var(--espresso); border-color: rgba(72,50,40,.2); background: rgba(255,255,255,.65); }
.admin-login-card form .btn { width: 100%; margin-top: 10px; }
.admin-back-link { margin-top: 25px; display: block; color: #786b64; font-size: 11px; text-align: center; }

@media (max-width: 1050px) {
  .site-header nav { display: none; position: absolute; top: 72px; right: 18px; left: 18px; padding: 16px; flex-direction: column; gap: 0; border: 1px solid var(--line); border-radius: 15px; background: #211613; box-shadow: var(--shadow); }
  .site-header nav.open { display: flex; }
  .site-header nav a { padding: 10px 12px; }
  .site-header nav a::after { display: none; }
  .nav-toggle { display: grid; order: 3; }
  .site-header .brand { order: 2; }
  .header-actions { order: 1; margin-right: auto; }
  .chips { grid-template-columns: repeat(3,1fr); }
  .chips a:nth-child(3) { border-left: 0; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .featured-card { grid-column: 1/-1; grid-row: auto; }
  .card-grid { grid-template-columns: repeat(3,1fr); }
  .subscription-page { grid-template-columns: 1fr; }
  .admin-body { grid-template-columns: 1fr; }
  .admin-sidebar { display: none; }
  .admin-main { grid-column: 1; padding-bottom: 90px; }
  .admin-mobile-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 100; height: 70px; padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); background: rgba(24,15,13,.96); backdrop-filter: blur(15px); }
  .admin-mobile-nav a { display: grid; place-content: center; justify-items: center; color: #a99c94; font-size: 18px; }
  .admin-mobile-nav small { font-size: 8px; }
  .admin-mobile-nav a.active { color: var(--gold-bright); }
  .stat-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  body { padding-bottom: 68px; }
  .site-header { height: 68px; padding: 0 15px; gap: 11px; }
  .brand img { width: 92px; }
  .nav-toggle { width: 34px; }
  .pill-link, .header-subscribe { display: none; }
  .icon-link { width: 34px; height: 34px; font-size: 21px; }
  .mobile-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 100; height: calc(67px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid var(--line); background: rgba(21,14,12,.97); backdrop-filter: blur(16px); }
  .mobile-nav a { display: grid; place-content: center; justify-items: center; color: #a89b93; line-height: 1.2; font-size: 21px; }
  .mobile-nav small { margin-top: 3px; font-size: 8px; }
  .mobile-nav a.active { color: var(--gold-bright); }
  footer { padding: 30px 18px calc(104px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1fr; gap: 24px 18px; }
  footer .footer-brand { grid-column: 1/-1; display: flex; align-items: center; gap: 15px; }
  footer img.footer-logo { width: 88px; height: 88px; flex: 0 0 88px; }
  footer .footer-brand p { max-width: 260px; margin: 0; line-height: 1.8; }
  footer h4 { margin: 0 0 9px; color: #f1dfbd; font-size: 14px; }
  footer a { min-height: 30px; margin: 0; display: flex; align-items: center; font-size: 12px; }
  footer > small { padding-top: 16px; text-align: center; line-height: 1.7; }
  .hero { min-height: 610px; align-items: end; }
  .hero-media { background-position: 58% center; }
  .hero-overlay { background: linear-gradient(0deg,rgba(17,10,8,.99) 0%,rgba(17,10,8,.72) 58%,rgba(17,10,8,.15) 100%); }
  .hero-content { width: 100%; margin: 0; padding: 245px 20px 42px; }
  .hero .eyebrow { display: none; }
  .hero h1 { max-width: 350px; font-size: 37px; }
  .hero p { max-width: 340px; font-size: 12px; }
  .hero-trust { display: none; }
  .category-strip { margin: 0; padding: 22px 18px; border: 0; border-radius: 0; box-shadow: none; }
  .chips { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
  .chips a { min-width: 105px; padding: 12px 8px; border: 1px solid var(--line) !important; border-radius: 11px; background: #211714; }
  .section { padding: 47px 16px; }
  .section-head { align-items: start; }
  .section-head h2 { font-size: 25px; }
  .section-head > a { font-size: 10px; }
  .feature-grid, .card-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .featured-card { grid-column: 1/-1; }
  .featured-card .card-image { aspect-ratio: 16/9; }
  .card-body { padding: 10px; }
  .card-body h3 { font-size: 12px; }
  .card-body p { display: none; }
  .play { width: 38px; height: 38px; font-size: 12px; }
  .story-band { min-height: 490px; padding: 45px 18px; background-position: 64% center; }
  .story-band h2 { font-size: 31px; }
  .article-grid { grid-template-columns: 1fr; }
  .article-card { grid-template-columns: 120px 1fr; }
  .article-card img { min-height: 145px; }
  .article-card div { padding: 14px; }
  .article-card h3 { font-size: 14px; }
  .article-card p { display: none; }
  .subscribe-cta { margin: 18px 16px 55px; padding: 38px 18px; }
  .page-hero { padding: 43px 17px 33px; }
  .page-hero h1 { font-size: 34px; }
  .page-hero p { font-size: 11px; }
  .watch-page { padding: 18px 13px 50px; }
  .watch-player { aspect-ratio: 16/10; border-radius: 12px; }
  .watch-info h1 { font-size: 28px; }
  .article-page { width: calc(100% - 24px); margin: 16px auto 40px; padding: 25px 18px; border-radius: 12px; }
  .article-page h1 { font-size: 31px; }
  .big-search { display: grid; }
  .page-login { padding-bottom: 0; }
  .auth-shell { min-height: 100vh; display: block; padding: 125px 0 35px; color: white; background: linear-gradient(0deg,rgba(18,10,8,.98),rgba(18,10,8,.58)),url('/assets/img/hero-sudanese-table.png') center/cover fixed; }
  .auth-art { display: none; }
  .auth-card { width: calc(100% - 34px); color: white; }
  .auth-card::before { width: 145px; height: 78px; filter: brightness(1.3); }
  .auth-card h1 { font-size: 28px; }
  .auth-card > p, .auth-card summary { color: #b5a79d; }
  .auth-card input { color: white; border-color: var(--line); background: rgba(20,12,10,.67); }
  .auth-card hr { border-color: var(--line); }
  .subscription-page { min-height: calc(100vh - 68px); padding: 32px 14px 45px; gap: 20px; background: #180f0d; }
  .subscription-copy h1 { font-size: 35px; }
  .subscription-copy p { font-size: 12px; }
  .subscription-copy ul { grid-template-columns: 1fr; }
  .price-card { padding: 22px 18px; color: var(--espresso); background: var(--ivory); }
  .price-card input { color: var(--espresso); }
  .price-card > p, .price small { color: #786a63; }
  .page-account { background: #150e0c; }
  .account-page { width: 100%; margin: 0; padding: 30px 15px 45px; color: var(--ivory); border-radius: 0; background: #150e0c; box-shadow: none; }
  .account-head { align-items: start; border-color: var(--line); }
  .account-head h1 { font-size: 31px; }
  .account-grid { grid-template-columns: 1fr; }
  .panel { border-color: var(--line); background: #211714; }
  .panel dl div, .timeline > div { border-color: var(--line); }
  .panel dt, .timeline small { color: var(--muted); }
  .mini-grid { grid-template-columns: 1fr 1fr; }
  .admin-body { display: block; padding-bottom: 70px; color: var(--ivory); background: #150e0c; }
  .admin-main { padding: 22px 13px 85px; background: radial-gradient(circle at 20% 0,rgba(170,164,107,.08),transparent 28%),#150e0c; }
  .admin-main > header { align-items: start; }
  .admin-main > header h1 { font-size: 25px; }
  .admin-user { display: none; }
  .stat-grid { gap: 8px; }
  .stat-grid > div { padding: 13px 10px; color: var(--ivory); border-color: var(--line); background: #211714; }
  .stat-grid span { color: var(--gold); font-size: 8px; }
  .stat-grid strong { font-size: 22px; }
  .admin-panel { padding: 13px; color: var(--ivory); border-color: var(--line); background: #211714; }
  .admin-dashboard-page th, .admin-dashboard-page td { border-color: var(--line); }
  .admin-dashboard-page th { color: var(--muted); }
  .admin-toolbar { align-items: stretch; flex-direction: column; }
  .admin-toolbar .btn { font-size: 10px; padding: 9px 12px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .admin-auth-body { padding-bottom: 0; }
  .admin-login-shell { display: block; background: #160e0c; }
  .admin-login-brand { min-height: 210px; padding: 25px 22px 52px; justify-content: start; text-align: center; background-position: 65% 58%; }
  .admin-login-brand img { width: 115px; margin: 0 auto 12px; }
  .admin-login-brand > span, .admin-login-brand p, .admin-login-features { display: none; }
  .admin-login-brand h1 { margin: 0; font-size: 27px; }
  .admin-login-panel { min-height: calc(100vh - 180px); margin-top: -28px; padding: 28px 20px 45px; position: relative; z-index: 2; border-radius: 28px 28px 0 0; background: var(--ivory); }
  .admin-login-card h2 { font-size: 29px; }
  .admin-login-icon { width: 46px; height: 46px; }
}

@media (max-width: 430px) {
  .feature-grid, .card-grid { grid-template-columns: 1fr 1fr; }
  .header-actions { gap: 5px; }
  .hero-actions .btn { padding: 10px 15px; font-size: 11px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
}

/* Mobile discovery screens — matched to the approved reference */
@media (max-width: 720px) {
  html { background: #120b09; }
  body { width: 100%; overflow-x: hidden; }
  .site-header {
    position: relative; top: auto; height: 72px; padding: 0 18px; justify-content: center;
    border-bottom: 0; background: #160e0c; backdrop-filter: none;
  }
  .site-header .brand { position: absolute; right: 50%; transform: translateX(50%); }
  .site-header .brand img { width: 106px; max-height: 58px; }
  .site-header .nav-toggle, .site-header .header-actions { display: none; }
  .mobile-header-actions { position: absolute; right: 14px; left: 14px; z-index: 2; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
  .mobile-header-actions>a,.mobile-header-actions form,.mobile-header-actions button{pointer-events:auto}
  .mobile-header-actions form{margin:0}
  .mobile-account-action,.mobile-subscription-action{min-height:36px;padding:0 11px;display:inline-flex;align-items:center;justify-content:center;color:#fff3d6;border:1px solid rgba(208,174,91,.58);border-radius:10px;background:rgba(43,29,23,.9);font-size:10px;font-weight:700;line-height:1;white-space:nowrap}
  .mobile-subscription-action{color:#25180f;border-color:#d0ae59;background:linear-gradient(135deg,#d9bd70,#aa873c)}
  .mobile-header-actions button.mobile-subscription-action{font-family:"IBM Plex Sans Arabic",sans-serif}
  .mobile-subscription-action.cancel{padding:0 9px;color:#ffe9e7;border-color:#a65454;background:linear-gradient(135deg,#983e49,#6f2e37)}
  .page-home main { padding-top: 0; }
  .page-home .hero {
    width: calc(100% - 28px); min-height: 0; height: 258px; margin: 0 14px 15px;
    align-items: end; border: 1px solid rgba(214,180,108,.27); border-radius: 16px;
    background: #211613; box-shadow: none;
  }
  .page-home .hero-media { border-radius: inherit; background-position: 64% center; }
  .page-home .hero-overlay { border-radius: inherit; background: linear-gradient(90deg,rgba(18,10,8,.89) 0%,rgba(18,10,8,.42) 65%,rgba(18,10,8,.12)),linear-gradient(0deg,rgba(15,9,7,.9),transparent 58%); }
  .page-home .hero-content { width: 72%; margin: 0 0 0 auto; padding: 20px 18px 18px; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; }
  .page-home .hero h1 { max-width: 220px; margin: 0 0 5px; font-size: 25px; line-height: 1.37; text-shadow: 0 2px 16px rgba(0,0,0,.5); }
  .page-home .hero h1 br { display: none; }
  .page-home .hero h1 em { display: block; color: white; }
  .page-home .hero p { max-width: 230px; margin: 0 0 10px; color: rgba(255,255,255,.76); font-size: 9px; line-height: 1.7; }
  .page-home .hero-actions { display: block; }
  .page-home .hero-actions .btn { min-height: 36px; padding: 7px 15px; font-size: 9px; }
  .page-home .hero-actions .btn-ghost { display: none; }
  .page-home .category-strip { padding: 0 14px 20px; background: #160e0c; }
  .page-home .category-strip::before { content: "تصفّح حسب الفئة"; display: block; margin: 0 0 8px; color: #f5eee7; font-size: 11px; font-weight: 700; }
  .page-home .chips { display: grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap: 8px; overflow: visible; }
  .page-home .chips a { min-width: 0; height: 67px; padding: 9px 3px; display: grid; place-content: center; border-radius: 11px; background: #211714; }
  .page-home .chips span { font-size: 9px; }
  .page-home .chips small { font-size: 7px; }
  .page-home .section { padding: 25px 14px; }
  .page-home .section-head { margin-bottom: 13px; }
  .page-home .section-head .kicker { display: none; }
  .page-home .section-head h2 { font-size: 16px; }
  .page-home .section-head > a { color: var(--gold); }
  .page-home .feature-grid { display: grid; grid-template-columns: 1fr; gap: 11px; }
  .page-home .feature-grid .content-card { position: relative; min-height: 158px; border-radius: 13px; }
  .page-home .feature-grid .card-image { aspect-ratio: auto; height: 158px; }
  .page-home .feature-grid .card-body { position: absolute; z-index: 4; right: 0; bottom: 0; left: 38%; padding: 17px; background: linear-gradient(90deg,transparent,rgba(17,10,8,.88)); }
  .page-home .feature-grid .card-body h3 { font-size: 14px; }
  .page-home .feature-grid .card-body p { display: -webkit-box; font-size: 8px; }
  .page-home .feature-grid .play { right: auto; left: 14px; bottom: 14px; transform: none; width: 35px; height: 35px; }
  .page-home .story-band { position: relative; width: calc(100% - 28px); min-height: 176px; margin: 37px 14px 15px; padding: 18px; overflow: visible; border: 1px solid var(--line); border-radius: 14px; background-position: 63% center; }
  .page-home .story-band::before { content: "مختارات اليوم  ♥"; position: absolute; top: -31px; right: 0; color: var(--ivory); font-size: 11px; font-weight: 700; }
  .page-home .story-band > div { max-width: 64%; }
  .page-home .story-band .kicker, .page-home .story-band p, .page-home .story-band .btn { display: none; }
  .page-home .story-band h2 { margin: 0; font-family: "IBM Plex Sans Arabic"; font-size: 17px; line-height: 1.55; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
  .page-home .card-grid { grid-template-columns: 1fr 1fr; }
  .mobile-nav { height: calc(64px + env(safe-area-inset-bottom)); }
  .mobile-nav a { font-size: 20px; }
  .mobile-nav a.active span { width: 30px; height: 30px; display: grid; place-items: center; color: #24170f; border-radius: 50%; background: var(--gold); }
  .mobile-nav small { font-size: 8px; }

  .mobile-page-title { height: 44px; display: grid; grid-template-columns: 35px 1fr 35px; align-items: center; direction: ltr; }
  .mobile-page-title h1 { direction: rtl; font-family: "IBM Plex Sans Arabic"; font-size: 18px !important; font-weight: 700; text-align: center; }
  .mobile-page-title > a, .mobile-page-title > span { color: white; font-size: 23px; }
  .library-hero, .search-hero { padding: 16px 14px 12px; border: 0; background: #160e0c; }
  .library-hero > .kicker, .library-hero > h1, .library-hero > p,
  .search-hero > h1 { display: none; }
  .library-tabs, .search-tabs { display: flex; gap: 7px; margin-top: 9px; overflow-x: auto; scrollbar-width: none; }
  .library-tabs a, .search-tabs a, .search-tabs button { flex: 0 0 auto; padding: 7px 13px; color: #d2c7c0; border: 1px solid var(--line); border-radius: 9px; background: #271c18; font-size: 9px; }
  .library-tabs a.active, .search-tabs a.active { color: #20130e; border-color: var(--gold); background: linear-gradient(135deg,#b58f47,#dfbd67); }
  .video-library-section { padding: 6px 14px 30px; }
  .mobile-section-label { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 10px; }
  .mobile-section-label h2 { margin: 0; font-size: 14px; }
  .mobile-section-label span { color: var(--gold); font-size: 9px; }
  .video-library-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
  .video-library-grid .content-card { border-radius: 11px; }
  .video-library-grid .mobile-featured-video { grid-column: 1/-1; }
  .video-library-grid .mobile-featured-video .card-image { height: 215px; aspect-ratio: auto; }
  .video-library-grid .mobile-featured-video .card-body { padding: 13px 15px; }
  .video-library-grid .mobile-featured-video .card-body h3 { font-size: 16px; }
  .video-library-grid .card-body h3 { font-size: 11px; }
  .video-library-grid .card-body p { display: none; }
  .video-library-grid .card-image { aspect-ratio: 1.25/1; }
  .video-library-grid .content-card:nth-child(2) .card-image { background-position: 22% center; }
  .video-library-grid .content-card:nth-child(3) .card-image { background-position: 82% center; }
  .video-library-grid .content-card:nth-child(4) .card-image { background-position: 38% center; }
  .video-library-grid .content-card:nth-child(5) .card-image { background-position: 68% center; }
  .video-library-grid .video-time { position: absolute; z-index: 4; right: 7px; bottom: 7px; padding: 2px 5px; border-radius: 6px; background: rgba(10,6,5,.8); font-size: 8px; }

  .search-hero .big-search { display: block; margin-top: 6px; }
  .search-hero .big-search input { height: 39px; padding: 8px 12px; color: white; border-color: var(--line); background: #2a1f1b; font-size: 10px; }
  .search-hero .big-search .btn { display: none; }
  .search-results-section { padding: 8px 14px 28px; }
  .search-results-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
  .search-result-card { min-height: 92px; padding: 10px 0; display: grid; grid-template-columns: 142px 1fr; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
  .search-result-card img { grid-column: 2; grid-row: 1; width: 142px; height: 78px; min-height: 0; border-radius: 9px; }
  .search-result-card div { grid-column: 1; grid-row: 1; position: relative; padding: 3px 12px; }
  .search-result-card h3 { margin: 2px 0; font-size: 11px; }
  .search-result-card p { display: -webkit-box; color: var(--muted); font-size: 8px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .search-result-card small { position: absolute; left: 4px; bottom: 4px; color: var(--gold); }
  .search-result-card:nth-child(2) img { object-position: 25% center; }
  .search-result-card:nth-child(3) img { object-position: 78% center; }
  .search-result-card:nth-child(4) img { object-position: 38% center; }
  .search-result-card:nth-child(5) img { object-position: 64% center; }
}
@media(max-width:650px){.sudani-flow{grid-template-columns:1fr}.account-actions{display:grid}.account-actions .btn{width:100%}}

/* Large, reference-matched mobile navigation. */
@media (max-width:720px) {
  body { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
  .mobile-nav {
    height: calc(78px + env(safe-area-inset-bottom));
    padding: 7px 6px env(safe-area-inset-bottom);
    direction: rtl;
    border-top-color: rgba(207,174,105,.22);
    background: rgba(22,14,12,.98);
    box-shadow: 0 -10px 28px rgba(0,0,0,.28);
  }
  .mobile-nav a {
    min-width: 0; min-height: 64px; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 4px; color: #b9ada6; text-decoration: none; font-size: 27px;
  }
  .mobile-nav .mobile-nav-icon {
    width: 32px; height: 31px; display: grid; place-items: center;
    color: currentColor; font-family: Arial,sans-serif; font-size: 28px; line-height: 1; font-weight: 400;
  }
  .mobile-nav .icon-articles,.mobile-nav .icon-library { font-size: 25px; }
  .mobile-nav .icon-home { font-size: 30px; transform: translateY(-1px); }
  .mobile-nav small { margin: 0; color: currentColor; font-size: 10.5px; line-height: 1.2; font-weight: 500; }
  .mobile-nav a.active { color: #d8ae50; }
  .mobile-nav a.active .mobile-nav-icon { width: 32px; height: 31px; color: #d8ae50; background: transparent; }
}