/* ==========================================================================
   SHOKRI VISION GALLERIES — app layer
   Sits on top of the studio design system (assets/css/style.css):
   same tokens, same fonts, same buttons/banners/menu machinery.
   ========================================================================== */

.app-main { width: min(1240px, 92vw); margin-inline: auto; padding: 8.8rem 0 4.5rem; min-height: 72vh; }
@media (min-width: 1101px) {
  body.mode-admin .app-main { padding-top: 9.2rem; }   /* the folded two-row admin header is taller — keep the page clear of it */
  body.mode-admin .ctlbar { top: 8.3rem; }
}
@media (min-width: 681px) and (max-width: 1100px) {
  body.mode-admin .ctlbar { top: 6.2rem; }            /* admin header is taller on tablets too — the sticky chip bar must not slide under it */
}

.app-title { font: 400 clamp(2.2rem, 5vw, 3.6rem)/1 var(--f-d); letter-spacing: .01em; text-transform: uppercase; }
.app-title em { font-style: normal; color: var(--red); }
.app-lead { color: var(--muted); max-width: 680px; margin-top: .9rem; }
.mut { color: var(--muted); }

/* ---------- stat cards (stats-band language, boxed) ---------- */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.2rem; margin: 2.2rem 0; }
.stat-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(#151212, #100e0e);
  padding: 1.6rem 1.4rem 1.4rem;
  transition: border-color .3s, transform .5s var(--ease);
}
.stat-card:hover { border-color: rgba(225, 6, 0, .5); transform: translateY(-4px); }
.stat-card .n { font: 400 clamp(2.4rem, 4.5vw, 3.6rem)/1 var(--f-d); color: var(--red); }
.stat-card .n .dim { color: transparent; -webkit-text-stroke: 1.5px rgba(244, 241, 236, .55); font-size: .5em; }
.stat-card .l { margin-top: .6rem; color: var(--muted); font: 600 .66rem/1.4 var(--f-b); letter-spacing: .2em; text-transform: uppercase; }

/* ---------- panels + tables ---------- */
.panel {
  border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(#151212, #100e0e);
  padding: 1.6rem 1.5rem; margin-bottom: 1.4rem;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.panel h2 { font: 400 clamp(1.6rem, 3vw, 2.2rem)/1 var(--f-d); letter-spacing: .02em; }
.panel h2 em { font-style: normal; color: var(--red); }
.split { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.4rem; align-items: start; }

.tblwrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th { text-align: left; padding: .6rem .7rem; color: #6e6660; font: 600 .64rem/1 var(--f-b); letter-spacing: .18em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
td { padding: .78rem .7rem; border-bottom: 1px solid rgba(255, 255, 255, .05); vertical-align: top; }
tr:hover td { background: rgba(225, 6, 0, .05); }
td a { color: var(--ink); text-decoration: none; }
td a:hover { color: var(--red); }

/* ---------- status pills ---------- */
.pill { display: inline-block; padding: .3rem .75rem; border-radius: 999px; font: 600 .62rem/1 var(--f-b); letter-spacing: .16em; text-transform: uppercase; }
.pill.on { color: #7ad97a; background: rgba(122, 217, 122, .1); border: 1px solid rgba(122, 217, 122, .35); }
.pill.off { color: #ff9a90; background: rgba(255, 154, 144, .08); border: 1px solid rgba(255, 154, 144, .3); }

/* ---------- flash banners (reuse .banner from the studio css) ---------- */
.banner--ok  { border-color: rgba(122, 217, 122, .4); border-left-color: #7ad97a; background: rgba(122, 217, 122, .06); }
.banner--ok b { color: #7ad97a; }
.banner--pass { border-color: rgba(232, 176, 75, .5); border-left-color: #e8b04b; background: rgba(232, 176, 75, .07); }
.banner--pass b { color: #e8b04b; }
html[lang="ar"] .banner--ok  { border-left-width: 1px; border-right: 4px solid #7ad97a; border-color: rgba(122, 217, 122, .4); }
html[lang="ar"] .banner--pass { border-left-width: 1px; border-right: 4px solid #e8b04b; border-color: rgba(232, 176, 75, .5); }

/* ---------- search box ---------- */
.searchbox { display: flex; gap: .6rem; align-items: center; }
.searchbox input {
  width: 230px; max-width: 55vw;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: .66rem 1.1rem; color: var(--ink); font: 500 .85rem/1 var(--f-b);
}
.searchbox input:focus { border-color: var(--red); outline: none; box-shadow: 0 0 0 4px rgba(225, 6, 0, .14); }

/* ---------- empty states / audit / facts ---------- */
.empty { color: var(--muted); padding: 2rem 1.4rem; border: 1px dashed rgba(255, 255, 255, .16); border-radius: 12px; text-align: center; }
.auditlist { list-style: none; padding: 0; }
.auditlist li { display: flex; gap: .7rem; align-items: baseline; padding: .5rem 0; border-bottom: 1px solid rgba(255, 255, 255, .05); font-size: .9rem; }
.auditlist code { font: 600 .7rem/1.6 var(--f-b); background: rgba(225, 6, 0, .1); color: #ff7b72; padding: .18rem .6rem; border-radius: 999px; white-space: nowrap; }
.facts { list-style: none; padding: 0; margin: .3rem 0 1.4rem; }
.facts li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid rgba(255, 255, 255, .05); font-size: .95rem; }
.facts span { color: var(--muted); }
.facts strong { font-weight: 600; }

.who-chip {
  font: 700 .68rem/1 var(--f-b); letter-spacing: .16em; color: var(--muted);
  border: 1px solid var(--line); padding: .62rem .9rem; border-radius: 999px;
  max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.backlink { display: inline-block; margin-top: 1.2rem; color: var(--muted); font: 600 .74rem/1 var(--f-b); letter-spacing: .18em; }
.backlink:hover { color: var(--red); }

/* ---------- login / guest auth ---------- */
.authwrap { min-height: 92vh; display: grid; place-items: center; padding: 1rem 0; }
.auth-card {
  width: min(460px, 100%);
  border: 1px solid rgba(225, 6, 0, .4); border-radius: 18px;
  background: linear-gradient(#170f0f, #100d0d);
  padding: 2.6rem 2.5rem 2.3rem;
  text-align: center;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .5);
}
.auth-brand { display: inline-flex; align-items: center; gap: .85rem; margin-bottom: .35rem; }
.auth-brand .brand-mark { height: 60px; }
.auth-brand .brand-word { height: 26px; }
.auth-sub { color: var(--muted); font: 600 .7rem/1 var(--f-b); letter-spacing: .3em; text-transform: uppercase; margin-bottom: 1.7rem; }
.auth-card form { display: grid; gap: 1.1rem; text-align: left; }
.auth-card .btn { justify-content: center; display: flex; margin-top: .3rem; }
.auth-foot { margin-top: 1.7rem; color: var(--muted); font-size: .84rem; }
.auth-foot a { color: var(--red); }
.auth-foot a:hover { color: #fff; }

/* ---------- landing ---------- */
.land-hero { padding-top: 1rem; }
.land-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.2rem; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .app-main { padding-top: 6.8rem; }
  .dash-grid { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
  .stat-card { padding: 1.2rem 1rem 1rem; }
  .panel { padding: 1.2rem 1rem; }
  th, td { padding: .6rem .5rem; }
  .searchbox input { flex: 1 1 auto; }
  .who-chip { display: none; }
  .auth-card { padding: 2rem 1.5rem 1.8rem; }
}

/* ---------- RTL mirroring for app bits ---------- */
html[lang="ar"] .tblwrap th, html[lang="ar"] td { text-align: right; }
html[lang="ar"] .auditlist { text-align: right; }

/* ---------- Phase 2: uploader, photo grid, watermarks, danger ---------- */
.dropzone { border: 1px dashed rgba(152,145,138,.55); border-radius: 10px; padding: 1.7rem 1rem; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; margin-bottom: 1rem; }
.dropzone:hover, .dropzone.dz-over { border-color: var(--red); border-style: solid; background: rgba(225,6,0,.06); }
.dz-t { display: block; font-family: 'Bebas Neue', sans-serif; font-size: 1.08rem; letter-spacing: .07em; color: var(--ink); }
.dz-s { display: block; margin-top: .35rem; color: var(--muted); font-size: .72rem; }
.dz-input { display: none; }
.up-list { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.1rem; }
.up-list:empty { display: none; }
.up-row { display: flex; align-items: center; gap: .7rem; font-size: .75rem; color: var(--muted); background: var(--panel); border: 1px solid rgba(255,255,255,.07); border-radius: 8px; padding: .45rem .7rem; }
.up-row .up-name { min-width: 0; flex: 0 1 auto; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.up-bar { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.09); overflow: hidden; }
.up-bar-fill { display: block; height: 100%; width: 0; background: var(--red); transition: width .2s; }
.up-pct { flex: 0 0 auto; min-width: 4.5em; text-align: right; font-variant-numeric: tabular-nums; font-size: .68rem; letter-spacing: .05em; }
.up-row.up-done .up-bar-fill { width: 100% !important; background: #2ea96e; }
.up-row.up-done .up-pct { color: #2ea96e; }
.up-row.up-fail { border-color: rgba(225,6,0,.7); }
.up-row.up-fail .up-bar { display: none; }
.up-row.up-fail .up-pct { color: var(--red); flex: 1; text-align: end; }

.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: .9rem; margin-top: 1.1rem; }
.ph-card { position: relative; display: flex; flex-direction: column; gap: .5rem; background: #0f0d0d; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: .55rem; cursor: grab; }
.ph-card:active { cursor: grabbing; }
.ph-card.dragging { opacity: .35; border-style: dashed; }
.ph-card.new { border-color: rgba(225,6,0,.55); }
.ph-imgwrap { display: block; aspect-ratio: 1/1; border-radius: 6px; overflow: hidden; background: #0a0909; }
.ph-imgwrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.ph-card:hover .ph-imgwrap img { transform: scale(1.04); }
.coverpill { position: absolute; top: .95rem; inset-inline-start: .95rem; z-index: 2; background: var(--red); color: var(--red-ink, #fff); font-size: .62rem; font-family: 'Bebas Neue', 'Tajawal', sans-serif; letter-spacing: .09em; padding: .2rem .55rem .12rem; border-radius: 99px; }
.ph-card figcaption { min-width: 0; }
.ph-name { display: block; font-size: .72rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-meta { display: block; font-size: .65rem; color: var(--muted); margin-top: .18rem; }
.ph-ops { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.ph-ops form { display: inline-flex; }
.ph-ops form .btn, .ph-ops a.btn { white-space: nowrap; }

.gcover { display: block; width: 54px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid rgba(255,255,255,.12); }
span.gcover-empty { display: flex; align-items: center; justify-content: center; color: var(--muted); background: #0f0d0d; }
.album-panel { scroll-margin-top: 9.5rem; }
.alb-no { font-variant-numeric: tabular-nums; white-space: nowrap; }
.alb-rename { display: flex; gap: .45rem; align-items: center; }
.alb-rename input { max-width: 420px; min-width: 0; }
.alb-ops { white-space: nowrap; }
.alb-ops form { display: inline-block; margin-inline-end: .25rem; }
.alb-add { display: flex; gap: .6rem; margin-top: 1.1rem; }
.alb-add input { flex: 1 1 260px; width: auto; min-width: 0; }

.checkline { display: flex; align-items: center; gap: .55rem; cursor: pointer; font-size: .84rem; color: var(--ink); min-height: 2.4rem; }
.checkline input { width: 16px; height: 16px; accent-color: var(--red); flex: 0 0 auto; }

.btn--dgr { border-color: rgba(225,6,0,.65); color: var(--red); }
.btn--dgr:hover { background: var(--red); border-color: var(--red); color: var(--red-ink, #fff); }
.btn--solid.btn--dgr { background: var(--red); border-color: var(--red); color: var(--red-ink, #fff); }
.panel--dgr { border-color: rgba(225,6,0,.5); }
.panel--dgr .panel-head h2 { color: var(--red); }
.dgr-form { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.dgr-form input[name="confirm"] { flex: 0 1 220px; min-width: 0; }
.dgr-form .app-lead { flex: 1 1 100%; }

.wm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.wm-card { background: #0f0d0d; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: .7rem .7rem 1rem; }
.wm-preview-wrap { border-radius: 6px; overflow: hidden; aspect-ratio: 3/2; background: #141111; }
.wm-preview-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wm-card h3 { font-size: .95rem; letter-spacing: 0; margin: .6rem 0 .2rem; }

@media (max-width: 680px) {
  .photos { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: .6rem; }
  .ph-ops form .btn { padding: .22rem .55rem; font-size: .6rem; }
  .alb-rename { flex-wrap: wrap; }
  .alb-rename input { max-width: 100%; }
  .alb-add { flex-wrap: wrap; }
  .alb-add input { flex: 1 1 100%; }
  .dgr-form { flex-direction: column; align-items: stretch; }
  .dgr-form input[name="confirm"] { width: 100%; }
  .up-row { flex-wrap: wrap; }
  .up-row .up-name { max-width: 100%; flex: 1 1 100%; }
  .wm-grid { grid-template-columns: 1fr; }
}

html[lang="ar"] .dz-t, html[lang="ar"] .coverpill { font-family: 'Changa', 'Tajawal', sans-serif; letter-spacing: 0; }
html[lang="ar"] .up-pct { text-align: left; }

/* ---------- Phase 3: customer portal ---------- */
.gl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.2rem; margin: 2rem 0 1rem; }
.gl-card { display: block; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: linear-gradient(#151212, #100e0e); color: #f4f1ec; text-decoration: none; transition: border-color .3s, transform .5s var(--ease); }
.gl-card:hover { border-color: rgba(225, 6, 0, .55); transform: translateY(-5px); }
.gl-cover { aspect-ratio: 16/9; background: #0a0909; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.gl-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.gl-card:hover .gl-cover img { transform: scale(1.03); }
.gl-cover span { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); font-family: 'Bebas Neue', 'Tajawal', sans-serif; font-size: 2.2rem; }
.gl-body { padding: 1.1rem 1.2rem 1.2rem; }
.gl-body h3 { font: 400 1.5rem/1.1 'Bebas Neue', sans-serif; letter-spacing: .02em; }
.gl-meta { margin-top: .45rem; color: var(--muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.gl-picks { margin-top: .7rem; }

.alb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.1rem; margin: 1.6rem 0; }
.alb-card { display: block; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: linear-gradient(#151212, #100e0e); color: #f4f1ec; text-decoration: none; transition: border-color .3s, transform .5s var(--ease); }
.alb-card:hover { border-color: rgba(225, 6, 0, .55); transform: translateY(-4px); }
.alb-cover { aspect-ratio: 4/3; background: #0a0909; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.alb-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.alb-card:hover .alb-cover img { transform: scale(1.03); }
.alb-cover span { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); font-family: 'Bebas Neue', 'Tajawal', sans-serif; font-size: 2rem; }
.alb-body { padding: .85rem 1rem; display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; }
.alb-body h3 { font: 400 1.25rem/1.1 'Bebas Neue', sans-serif; letter-spacing: .02em; }
.alb-body .cnt { color: var(--muted); font-size: .68rem; letter-spacing: .1em; white-space: nowrap; }

/* photo grid — masonry columns of natural-ratio thumbs */
.pgrid { columns: 3 230px; column-gap: 14px; margin: 1.6rem 0; }
.pgrid.only-fav .pcard:not([data-fav="1"]) { display: none; }
.pcard { break-inside: avoid; margin: 0 0 14px; position: relative; border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; overflow: hidden; background: #0f0d0d; transition: border-color .2s; }
.pcard[data-sel="1"] { border-color: rgba(46, 169, 110, .8); }
.pcard[data-sel="1"]::after { content: '✓'; position: absolute; top: .5rem; inset-inline-start: .5rem; width: 22px; height: 22px; border-radius: 99px; background: #2ea96e; color: #fff; font-size: .8rem; display: grid; place-items: center; z-index: 2; }
.p-img { display: block;cursor: zoom-in; }
.p-img img { display: block; width: 100%; }
.p-cap { padding: .45rem .6rem; font-size: .66rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-ops { position: absolute; top: .55rem; inset-inline-end: .55rem; display: flex; gap: .3rem; opacity: 0; transition: opacity .25s; z-index: 3; }
.pcard:hover .p-ops, .p-ops:focus-within { opacity: 1; }
.pcard[data-sel="1"] .p-ops { top: 2.4rem; }
.p-btn { width: 30px; height: 30px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .3); background: rgba(10, 9, 9, .68); color: #f4f1ec; cursor: pointer; display: grid; place-items: center; font-size: .8rem; text-decoration: none; padding: 0; }
.p-btn:hover { border-color: #e10600; color: #e10600; }
.p-btn.p-fav.on, .p-btn.p-sel.on { background: #e10600; border-color: #e10600; color: #fff; }
.p-btn.p-sel.on { background: #2ea96e; border-color: #2ea96e; }

/* chips toolbar */
.ctlbar { position: sticky; top: 5.2rem; z-index: 40; display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; background: rgba(10, 9, 9, .88); border: 1px solid var(--line); border-radius: 14px; padding: .65rem .9rem; margin: 1.4rem 0 .4rem; }
.chip { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; font: 600 .68rem/1 var(--f-b); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-decoration: none; background: transparent; }
.chip b { color: #f4f1ec; font-variant-numeric: tabular-nums; }
.chip.sel { border-color: rgba(225, 6, 0, .55); color: #f4f1ec; }
.chip.sent { border-color: rgba(122, 217, 122, .5); color: #7ad97a; }
.chip--btn { cursor: pointer; }
.chip--btn:hover, .chip--btn.on { border-color: #e10600; color: #e10600; }
.chip--back { color: var(--muted); }
.chip--back:hover { color: #e10600; }
.chip.shake { animation: chipshake .45s; }
@keyframes chipshake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.sel-sub { display: flex; gap: .6rem; align-items: center; margin-inline-start: auto; }
.sel-sub form { display: flex; gap: .6rem; align-items: center; }
.sel-sub input { width: 220px; max-width: 40vw; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: .55rem 1rem; color: #f4f1ec; font: 500 .8rem/1 var(--f-b); }
.sel-sub input:focus { border-color: #e10600; outline: none; }
.pick-panel .chip b { font-size: .78rem; }

/* ---------- lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 960; display: flex; flex-direction: column; background: rgba(7, 6, 6, .97); color: #f4f1ec; }
.lb[hidden] { display: none; }
/* the shared chrome's style.css also ships studio-lightbox .lb rules (opacity:0 +
   pointer-events:none, unlocked only by .lb.open which the portal never adds) — the
   portal opens #lb via [hidden] + body.lb-open, so reclaim visibility on that signal */
body.lb-open .lb { opacity: 1; pointer-events: auto; }
.lb-backdrop { position: absolute; inset: 0; }
.lb-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; }
.lb-c { font: 400 1.1rem/1 'Bebas Neue', sans-serif; letter-spacing: .1em; color: #98918a; font-variant-numeric: tabular-nums; }
.lb-name { color: #98918a; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 44vw; }
.lb-x { margin-inline-start: auto; background: none; border: 0; color: #f4f1ec; font-size: 2rem; line-height: 1; cursor: pointer; }
.lb-x:hover { color: #e10600; }
.lb-stage { margin: 0; flex: 1; min-height: 0; display: grid; place-items: center; position: relative; z-index: 1; padding: 0 3.6rem; }
.lb-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; cursor: zoom-in; transform-origin: center center; }
.lb-img.zoomed { cursor: grab; }
.lb-img.grabbing { cursor: grabbing; }
.lb-vid { min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; display: block; background: rgba(0, 0, 0, .55); border-radius: 10px; outline: none; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 52px; height: 52px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(10, 9, 9, .6); color: #f4f1ec; font-size: 1.7rem; cursor: pointer; display: grid; place-items: center; padding-bottom: .3rem; }
.lb-nav:hover { border-color: #e10600; color: #e10600; }
.lb-nav--prev { inset-inline-start: 1rem; }
.lb-nav--next { inset-inline-end: 1rem; }
.lb-ops { display: flex; gap: .7rem; justify-content: center; padding: .9rem 0 .4rem; position: relative; z-index: 2; }
.lb-btn { min-width: 44px; height: 40px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(10, 9, 9, .6); color: #f4f1ec; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; padding: 0 1.1rem; font: 600 .66rem/1 var(--f-b); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.lb-btn:hover { border-color: #e10600; color: #e10600; }
.lb-btn.lb-fav.on { background: #e10600; border-color: #e10600; color: #fff; }
.lb-btn.lb-sel.on { background: #2ea96e; border-color: #2ea96e; color: #fff; }
.lb-hint { text-align: center; color: rgba(152, 145, 138, .85); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; padding: .4rem 1rem 1rem; position: relative; z-index: 2; }
body.lb-open { overflow: hidden; }

@media (max-width: 680px) {
  .pgrid { columns: 2 150px; column-gap: 10px; }
  .pcard { margin-bottom: 10px; }
  .p-ops { opacity: 1; }
  .ctlbar { top: 4.6rem; padding: .55rem .6rem; }
  .ctlbar .btn { padding: .4rem .7rem; font-size: .6rem; }
  .sel-sub { margin-inline-start: 0; flex: 1 1 100%; }
  .sel-sub form { flex: 1 1 100%; }
  .sel-sub input { flex: 1 1 auto; width: auto; max-width: none; }
  .lb-stage { padding: 0 .9rem; }
  .lb-nav { width: 42px; height: 42px; font-size: 1.3rem; }
  .lb-btn { padding: 0 .8rem; }
  .gl-grid { grid-template-columns: 1fr; }
  .alb-grid { grid-template-columns: 1fr; }
}

html[lang="ar"] .chip, html[lang="ar"] .lb-btn, html[lang="ar"] .lb-hint, html[lang="ar"] .lb-c,
html[lang="ar"] .gl-meta, html[lang="ar"] .alb-body .cnt, html[lang="ar"] .p-cap { font-family: 'Changa', 'Tajawal', sans-serif; letter-spacing: 0; }
html[lang="ar"] .gl-body h3, html[lang="ar"] .alb-body h3 { font-family: 'Changa', 'Tajawal', sans-serif; }

/* ---- Control Center builder blocks (promit2) ---- */
.wc-richtext { max-width: 640px; margin-top: 1.4rem; }
.wc-richtext p { color: var(--muted); font-size: 1.05rem; font-weight: 300; line-height: 1.8; margin: 0 0 1rem; }
.wc-richtext p:last-child { margin-bottom: 0; }
.wc-img { max-width: 640px; }
.wc-img img { width: 100%; height: auto; display: block; border: 1px solid var(--line); border-radius: 16px; }

/* ---- Control Center admin pages ---- */
.cc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.cc-mod { display: block; padding: 1.2rem 1.3rem; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; color: var(--ink); background: rgba(255, 255, 255, .02); }
.cc-mod:hover { border-color: var(--red, #e10600); }
.cc-mod em { font: 400 1rem/1 'Bebas Neue', sans-serif; color: var(--red, #e10600); font-style: normal; letter-spacing: .1em; }
.cc-mod h3 { font: 400 1.25rem/1.15 'Bebas Neue', sans-serif; letter-spacing: .08em; margin: .5rem 0 .55rem; }
.cc-mod p { color: var(--muted); font-size: .84rem; line-height: 1.6; margin: 0; }
.cc-soon { color: var(--muted); font-size: .8rem; }
.cc-logo-row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.cc-logo-prev { height: 52px; max-height: 52px; width: auto; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: 10px; padding: .3rem .5rem; }
html.mode-light .cc-mod { background: rgba(20, 16, 14, .02); }
.cc-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.cc-media { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, .02); }
.cc-media-thumb { display: block; height: 150px; background: rgba(255, 255, 255, .04); border-bottom: 1px solid var(--line); }
.cc-media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-media-info { padding: .8rem .9rem .95rem; }
.cc-media-info h3 { margin: 0 0 .3rem; font-size: .85rem; font-weight: 500; line-height: 1.4; word-break: break-all; color: var(--ink); }
.cc-media-info small { display: block; color: var(--muted); font-size: .72rem; line-height: 1.5; margin-bottom: .65rem; }
.cc-media-ops { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.cc-media-ops form { display: inline-flex; margin: 0; }
.cc-media-ops .btn { padding: .34rem .75rem; font-size: .68rem; }
html.mode-light .cc-media { background: rgba(20, 16, 14, .02); }
html.mode-light .cc-media-thumb { background: rgba(20, 16, 14, .03); }

/* ---- Control Center: pages & sections builder ---- */
.cc-tree { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, .02); }
.cc-row { display: flex; align-items: center; gap: .8rem; padding: .75rem 1rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.cc-row:last-child { border-bottom: 0; }
.cc-idx { font: 400 .95rem/1 'Bebas Neue', sans-serif; color: #e10600; min-width: 1.2rem; font-style: normal; letter-spacing: .06em; }
.cc-sec-main { flex: 1; min-width: 12rem; }
.cc-sec-main h3 { margin: 0 0 .15rem; font-size: .92rem; font-weight: 600; color: var(--ink); }
.cc-sum { color: var(--muted); font-size: .76rem; line-height: 1.5; }
.cc-ops { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.cc-ops form { display: inline-flex; margin: 0; }
.cc-ops .btn { padding: .34rem .75rem; font-size: .66rem; }
.cc-secconfirm { flex-basis: 100%; display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; background: rgba(225, 6, 0, .08); border: 1px solid rgba(225, 6, 0, .35); border-radius: 12px; padding: .6rem .85rem; margin-top: .5rem; }
.cc-secconfirm form { display: inline-flex; margin: 0; }
.cc-secconfirm b { font-size: .8rem; letter-spacing: .06em; }
.cc-addsec { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.cc-addsec form { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.cc-addsec select { min-width: 14rem; }
.cc-rep { display: grid; gap: .6rem; border: 1px dashed var(--line); border-radius: 12px; padding: .8rem; margin: .4rem 0 .9rem; }
.cc-rep-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: .6rem; align-items: center; }
html.mode-light .cc-tree { background: rgba(20, 16, 14, .02); }
html.mode-light .cc-secconfirm { background: rgba(225, 6, 0, .06); }
@media (max-width: 680px) {
  .cc-rep-row { grid-template-columns: 1fr; }
  .cc-row { align-items: flex-start; }
}
.cc-group { margin: 1.4rem 0 .9rem; font: 400 1rem/1 'Bebas Neue', sans-serif; letter-spacing: .12em; color: var(--ink); }
.cc-group + .cc-soon { margin-top: 0; }
.cc-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line); vertical-align: -2px; margin-inline-start: .45rem; }
html.mode-light .cc-swatch { border-color: rgba(20, 16, 14, .3); }

/* ---------- pager (database pagination, Phase 4) ---------- */
.pager { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-top: 1.2rem; }
.pg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.2rem; height: 2.2rem; padding: 0 .7rem;
  border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); font: 600 .78rem/1 var(--f-b); letter-spacing: .08em;
  text-decoration: none; background: rgba(255, 255, 255, .02);
  transition: border-color .25s, color .25s, transform .25s;
}
a.pg-btn:hover { border-color: rgba(225, 6, 0, .6); color: var(--red); transform: translateY(-2px); }
.pg-cur { color: var(--red); border-color: rgba(225, 6, 0, .55); background: rgba(225, 6, 0, .1); cursor: default; }
.pg-gap { color: var(--muted); padding: 0 .3rem; }
html.mode-light .pg-btn { background: rgba(20, 16, 14, .02); }

/* ---------- dashboard charts (server-rendered SVG) ---------- */
.chartwrap { max-width: 100%; overflow-x: auto; margin-top: .9rem; }
.chartwrap .sv-chart { display: block; max-width: 100%; height: auto; }
.sv-chart .bar { fill: rgba(225, 6, 0, .78); transition: fill .2s; }
.sv-chart .bar:hover { fill: #e10600; }
.sv-chart .flat { stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.sv-chart .line { stroke: #f4f1ec; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sv-chart .dot { fill: #f4f1ec; stroke: rgba(7, 6, 6, .9); stroke-width: 1; }
.sv-chart .ax { fill: var(--muted); font: 500 10px var(--f-b); letter-spacing: .08em; }
.legend { display: inline-flex; align-items: center; gap: .5rem; font: 600 .62rem/1 var(--f-b); letter-spacing: .16em; color: var(--muted); text-transform: uppercase; }
.legend .lg { display: inline-block; width: 14px; height: 4px; border-radius: 99px; }
.legend .lg-bar { background: #e10600; }
.legend .lg-line { background: #f4f1ec; height: 2px; }
html.mode-light .sv-chart .bar { fill: rgba(225, 6, 0, .85); }
html.mode-light .sv-chart .flat { stroke: rgba(20, 16, 14, .12); }
html.mode-light .sv-chart .line { stroke: #1c1a17; }
html.mode-light .sv-chart .dot { fill: #1c1a17; stroke: rgba(255, 255, 255, .9); }

/* top galleries ranking */
.topgals { list-style: none; padding: 0; margin: 0; }
.topgals li { display: grid; grid-template-columns: minmax(120px, 220px) 1fr auto; gap: 1rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.topgals a { color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topgals a:hover { color: var(--red); }
.tg-track { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .04); overflow: hidden; }
.tg-bar { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #e10600, #ff5b47); }
.topgals b { font: 400 1.05rem/1 var(--f-d); color: var(--red); font-variant-numeric: tabular-nums; }
html.mode-light .tg-track { background: rgba(20, 16, 14, .06); }
@media (max-width: 680px) {
  .topgals li { grid-template-columns: 1fr; gap: .35rem; }
  .legend { flex-basis: 100%; }
}