/* ═══════════ الأساس — أونيكس وذهب ═══════════ */
:root{
  --ink:#0c0b09; --ink-2:#11100c; --panel:#151310; --panel-2:#1d1a14; --line:#282419; --line-2:#3b3422;
  /* txt-3 انرفع تباينه للوضع الليلي (كان 6f6754 ≈ 3.4:1 → صار ≈ 4.8:1) */
  --txt:#f0ead9; --txt-2:#b5ab92; --txt-3:#8d846d;
  --gold:#d3b477; --gold-2:#e9d7a8; --gold-deep:#b3924f; --gold-dim:#54482c;
  --grad-gold:linear-gradient(135deg,#ecd9a6 0%,#d3b477 45%,#b98f4a 100%);
  --g-a:#3fb26f; --amber:#d69e2e; --burn:#b8433a; --rose:#cf7285;
  --r:18px; --r-sm:11px;
  --shadow:0 1px 2px rgba(0,0,0,.55), 0 18px 44px -18px rgba(0,0,0,.7);
  --shadow-lg:0 2px 5px rgba(0,0,0,.55), 0 34px 80px -26px rgba(0,0,0,.85);
  --glow:0 0 0 1px var(--gold-dim), 0 10px 34px -12px rgba(211,180,119,.28);
  --ease:cubic-bezier(.22,.61,.36,1);
}
:root[data-theme="light"]{
  --ink:#f3efe4; --ink-2:#ece7d8; --panel:#fbf8f0; --panel-2:#ebe4d2; --line:#ddd4bd; --line-2:#c4b795;
  --txt:#262013; --txt-2:#6d6450; --txt-3:#9b917b;
  --gold:#a8843d; --gold-2:#8a6b2c; --gold-deep:#7c5f26; --gold-dim:#cdbb92;
  --grad-gold:linear-gradient(135deg,#c8a558 0%,#a8843d 55%,#8a6b2c 100%);
  --g-a:#25835a; --amber:#a3742a; --burn:#a63c33; --rose:#b25a6e;
  --shadow:0 1px 2px rgba(50,40,20,.08), 0 16px 38px -16px rgba(50,40,20,.2);
  --shadow-lg:0 2px 6px rgba(50,40,20,.1), 0 30px 66px -22px rgba(50,40,20,.26);
  --glow:0 0 0 1px var(--gold-dim), 0 10px 30px -12px rgba(140,110,50,.25);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink); color:var(--txt);
  font-family:'Almarai',system-ui,sans-serif; font-size:15px; line-height:1.7;
  -webkit-font-smoothing:antialiased; transition:background .3s var(--ease), color .3s var(--ease);
}
body::before{
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1100px 520px at 50% -140px, color-mix(in srgb,var(--gold) 10%, transparent), transparent 70%),
    radial-gradient(760px 480px at 100% 30%, color-mix(in srgb,var(--gold) 4%, transparent), transparent 70%),
    radial-gradient(900px 620px at 0% 100%, color-mix(in srgb,var(--gold) 3%, transparent), transparent 72%);
}
body::after{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,h2,h3,h4,.display{font-family:'El Messiri',serif; font-weight:600; letter-spacing:0; line-height:1.35; margin:0}
.mono{font-family:'IBM Plex Mono',monospace; font-weight:500; font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate}
button,input,select,textarea{font-family:inherit; font-size:inherit; color:inherit}
button{cursor:pointer; border:0; background:none; padding:0}
img{display:block; max-width:100%}
::selection{background:color-mix(in srgb, var(--gold) 32%, transparent)}
:focus-visible{outline:1.5px solid var(--gold); outline-offset:3px; border-radius:8px}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:8px; border:3px solid var(--ink)}
::-webkit-scrollbar-thumb:hover{background:var(--gold-dim)}
::-webkit-scrollbar-track{background:transparent}
.wrap{width:min(1340px, 100% - 34px); margin-inline:auto}

/* ═══════════ الهيدر ═══════════ */
header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter:blur(18px) saturate(1.15); -webkit-backdrop-filter:blur(18px) saturate(1.15);
  border-bottom:1px solid var(--line);
}
header::after{
  content:''; position:absolute; inset-inline:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent 8%, color-mix(in srgb,var(--gold) 42%, transparent) 50%, transparent 92%);
  pointer-events:none;
}
.hdr-in{display:flex; align-items:center; gap:18px; height:66px}
.brand{display:flex; align-items:center; gap:13px; flex-shrink:0}
.brand-ic{
  width:41px;height:41px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 35% 30%, color-mix(in srgb,var(--gold) 16%, var(--panel)), var(--panel));
  border:1px solid var(--gold-dim); box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.brand-ic svg{width:19px;height:19px; stroke:var(--gold)}
.brand-nm{font-family:'El Messiri'; font-weight:700; font-size:17px; line-height:1.2; letter-spacing:.01em}
.brand-sub{font-size:9.5px; color:var(--gold-deep); letter-spacing:.34em; margin-top:1px}
.search{flex:1; max-width:520px; position:relative; display:flex; align-items:center}
.search svg{position:absolute; inset-inline-start:16px; width:15px;height:15px; color:var(--txt-3); pointer-events:none}
.search input{
  width:100%; height:42px; border-radius:999px; border:1px solid var(--line);
  background:color-mix(in srgb, var(--panel) 72%, transparent); padding-inline:42px 18px; color:var(--txt); transition:.2s var(--ease);
}
.search input::placeholder{color:var(--txt-3)}
.search input:focus{outline:none; border-color:var(--gold-dim); box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 12%, transparent); background:var(--panel)}
.hdr-actions{display:flex; align-items:center; gap:9px; margin-inline-start:auto}
.icon-btn{
  width:41px;height:41px; border-radius:50%; display:grid; place-items:center;
  background:transparent; border:1px solid var(--line); color:var(--txt-2); transition:.18s var(--ease);
}
.icon-btn:hover{color:var(--gold); border-color:var(--gold-dim); transform:translateY(-1px)}
.icon-btn svg{width:16px;height:16px}
.btn-admin{
  height:41px; padding-inline:17px; border-radius:999px; display:flex; align-items:center; gap:8px;
  background:transparent; border:1px solid var(--line); color:var(--txt-2);
  font-size:13px; font-weight:700; transition:.18s var(--ease); white-space:nowrap;
}
.btn-admin:hover{color:var(--gold); border-color:var(--gold-dim); transform:translateY(-1px)}
.btn-admin svg{width:14px;height:14px}

/* ═══════════ البطل ═══════════ */
.ticker{padding:46px 0 30px; border-bottom:1px solid var(--line); position:relative}
.ticker-top{display:flex; align-items:flex-end; justify-content:space-between; gap:26px; margin-bottom:26px}
.ticker h1{font-size:clamp(25px, 3.6vw, 40px); font-weight:700; line-height:1.4}
.ticker h1 .num{color:var(--gold); font-variant-numeric:tabular-nums}
.ticker h1 .hl{
  background:var(--grad-gold);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ticker p{margin:10px 0 0; color:var(--txt-2); max-width:640px; font-size:14.5px; font-weight:400}
.used-note{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  padding:7px 15px; border-radius:999px; font-size:12.5px; font-weight:800; letter-spacing:.01em;
  background:color-mix(in srgb,var(--gold) 10%, transparent);
  border:1px solid var(--gold-dim); color:var(--gold-2);
}
:root[data-theme="light"] .used-note{color:var(--gold-deep)}
.used-note svg{width:15px;height:15px; flex-shrink:0}
.live{display:flex; align-items:center; gap:9px; margin-top:14px; font-size:12px; color:var(--txt-3); font-weight:400; letter-spacing:.02em}
.live .dot{width:7px;height:7px;border-radius:50%; background:var(--txt-3); flex-shrink:0; transition:.3s}
.live .dot.on{background:var(--g-a); animation:pulse 2.4s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--g-a) 42%, transparent)}
  70%{box-shadow:0 0 0 9px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
.counts{display:flex; flex-shrink:0; background:color-mix(in srgb,var(--panel) 55%, transparent);
  border:1px solid var(--line); border-radius:16px; overflow:hidden; backdrop-filter:blur(8px)}
.count{min-width:96px; padding:15px 20px 13px; text-align:center; position:relative}
.count + .count{border-inline-start:1px solid var(--line)}
.count::before{content:none}
.count b{display:block; font-family:'El Messiri'; font-weight:700; font-size:24px; line-height:1.15; letter-spacing:.01em}
.count span{font-size:11px; color:var(--txt-3); font-weight:700; letter-spacing:.05em; display:inline-flex; align-items:center; gap:5px}
.count span::before{content:''; width:5px;height:5px;border-radius:50%; background:var(--cc,var(--txt-3))}
.count.av{--cc:var(--g-a)} .count.rs{--cc:var(--amber)} .count.sl{--cc:var(--burn)}
.terms{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:11px}
.tm{
  background:color-mix(in srgb,var(--panel) 62%, transparent); border:1px solid var(--line);
  border-radius:15px; padding:14px 16px; transition:.22s var(--ease); position:relative; overflow:hidden;
}
.tm::before{
  content:''; position:absolute; inset-inline:14%; top:0; height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb,var(--gold) 35%, transparent), transparent);
  opacity:0; transition:.25s;
}
.tm:hover{border-color:var(--gold-dim); transform:translateY(-2px); box-shadow:var(--shadow)}
.tm:hover::before{opacity:1}
.tm-h{display:flex; align-items:center; gap:9px; font-size:11.5px; font-weight:700; color:var(--gold); margin-bottom:6px; letter-spacing:.03em}
.tm-h svg{width:20px;height:20px; padding:3px; border:1px solid var(--gold-dim); border-radius:50%; flex-shrink:0}
.tm b{font-family:'El Messiri'; font-weight:600; font-size:15px; display:block}
.tm p{margin:4px 0 0; font-size:12.5px; color:var(--txt-2); line-height:1.7}

/* ═══════════ الفلاتر ═══════════ */
.filters{
  position:sticky; top:var(--hdr-h,66px); z-index:90;
  background:color-mix(in srgb, var(--ink) 86%, transparent);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line); isolation:isolate;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease); will-change:transform;
}
.filters.is-scrolled-away{transform:translateY(calc(-100% - 2px)); pointer-events:none}
.filters.open{transform:none; pointer-events:auto}
.f-mini{display:flex; align-items:center; gap:9px; padding:9px 0}
.filters-in{
  display:none; position:absolute; inset-inline:0; top:calc(100% - 1px);
  width:min(1340px, calc(100% - 34px)); max-height:min(58dvh, 480px);
  margin-inline:auto; padding:16px; overflow-y:auto; overscroll-behavior:contain;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); align-items:start; gap:14px;
  background:color-mix(in srgb,var(--ink-2) 97%,transparent);
  border:1px solid var(--line-2); border-top-color:var(--line);
  border-radius:0 0 18px 18px; box-shadow:var(--shadow-lg);
}
.filters.open .filters-in{display:grid}
.filters-in > .fgrp{min-width:0; align-content:flex-start}
.filters-in > .fgrp-col{grid-column:1/-1}
.filters.open .f-toggle{color:var(--gold); border-color:var(--gold-dim); background:var(--panel)}
.f-toggle{
  display:flex; align-items:center; gap:8px; min-height:40px; padding-inline:15px;
  border-radius:999px; border:1px solid var(--line); background:transparent;
  color:var(--txt-2); font-size:13px; font-weight:800; flex-shrink:0;
}
.f-toggle svg{width:16px;height:16px}
.f-toggle b{
  min-width:19px;height:19px; border-radius:999px; display:grid; place-items:center;
  background:var(--grad-gold); color:#241b09; font-size:11px; font-weight:800; padding-inline:5px;
}
.f-toggle[aria-expanded="true"]{color:var(--gold); border-color:var(--gold-dim)}
.f-quick{display:flex; gap:7px; overflow-x:auto; flex:1; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.f-quick::-webkit-scrollbar{display:none}
.scroll-x{overflow-x:auto; scrollbar-width:none; flex-wrap:nowrap!important; max-width:100%}
.scroll-x::-webkit-scrollbar{display:none}
.fgrp{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.flabel{font-size:12.5px; color:var(--txt); font-weight:800; letter-spacing:.035em; margin-inline-end:4px}
.chip{
  height:34px; padding-inline:15px; border-radius:999px; font-size:13px; font-weight:700;
  background:color-mix(in srgb,var(--panel) 42%, transparent); border:1px solid var(--line-2); color:var(--txt);
  display:flex; align-items:center; gap:7px; transition:.18s var(--ease); white-space:nowrap;
}
.chip:hover{color:var(--txt); border-color:var(--gold-dim); transform:translateY(-1px)}
.chip.on{background:var(--grad-gold); color:#221a09; border-color:transparent; font-weight:800; box-shadow:var(--glow)}
:root[data-theme="light"] .chip.on{color:#fff}
.chip .dot{width:8px;height:8px;border-radius:3px; background:var(--c); flex-shrink:0}
.chip.fav-chip svg{width:13px;height:13px}
.chip.fav-chip.on{background:color-mix(in srgb,var(--rose) 85%, #000 5%); border-color:transparent; color:#fff; box-shadow:0 0 0 1px color-mix(in srgb,var(--rose) 45%, transparent), 0 10px 30px -12px color-mix(in srgb,var(--rose) 40%, transparent)}
.sel{
  height:34px; padding-inline:14px 32px; border-radius:999px; background:transparent;
  border:1px solid var(--line-2); color:var(--txt); font-size:13px; font-weight:700; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a89e87' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left 11px center; background-size:12px;
}
.sel:hover{border-color:var(--gold-dim); color:var(--txt)}
.price-in{
  width:78px; height:34px; border-radius:999px; border:1px solid var(--line-2);
  background:color-mix(in srgb,var(--panel) 42%, transparent); color:var(--txt); padding-inline:13px; font-size:13px;
}
.price-in::placeholder{color:var(--txt-2); opacity:1}
.price-in:focus{outline:none; border-color:var(--gold-dim)}
.clear-link{
  font-size:12px; color:var(--txt-3); text-decoration:underline;
  text-underline-offset:4px; text-decoration-color:var(--line-2);
  min-height:34px; display:inline-flex; align-items:center; padding-inline:4px;
}
.clear-link:hover{color:var(--gold)}
.shown-line{margin-inline-start:0; align-self:center; font-size:12px; color:var(--txt-3)}
.shown-line b{color:var(--txt-2)}

/* ═══════════ الشبكة والأقسام ═══════════ */
.grid{display:block; padding:30px 0 100px}
.sect{margin-bottom:42px}
.sect-h{display:flex; align-items:center; gap:14px; margin-bottom:18px}
.sect-h h2{font-weight:700; font-size:21px; white-space:nowrap; letter-spacing:.01em}
.sect-h .n{
  font-family:'IBM Plex Mono'; font-weight:600; font-size:11.5px; color:var(--gold);
  border:1px solid var(--gold-dim); border-radius:999px; padding:2px 11px;
}
.sect-h .rule{flex:1; height:1px; background:linear-gradient(to left, var(--line-2), transparent)}
.sect-grid{display:grid; gap:20px; grid-template-columns:repeat(auto-fill, minmax(295px, 1fr))}

/* ═══════════ البطاقة ═══════════ */
.card{
  background:linear-gradient(180deg, color-mix(in srgb,var(--panel) 94%, #fff 1%), var(--panel));
  border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; position:relative; display:flex; flex-direction:column;
  opacity:0; transform:translateY(20px) scale(.985);
  transition:opacity .55s var(--ease), transform .55s var(--ease),
             border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.card.in{opacity:1; transform:none}
.card:hover{border-color:var(--gold-dim); box-shadow:var(--shadow-lg); z-index:2; transform:translateY(-4px)}
.card::before{
  content:''; position:absolute; inset-inline:10%; top:0; height:1px; z-index:3;
  background:linear-gradient(90deg, transparent, color-mix(in srgb,var(--gold) 55%, transparent), transparent);
  opacity:0; transition:opacity .25s var(--ease);
}
.card:hover::before{opacity:1}
.card.sold{filter:grayscale(.92) brightness(.8); opacity:.5}
.card.sold:hover{filter:grayscale(.65) brightness(.9); opacity:.75}
.shot{position:relative; aspect-ratio:4/3; background:var(--panel-2); overflow:hidden; cursor:pointer}
.shot::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.14), transparent 28%, transparent 74%, rgba(0,0,0,.2));
}
.shot img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.card:hover .shot img{transform:scale(1.05)}
.tag{
  position:absolute; top:11px; inset-inline-start:11px; z-index:3; display:flex;
  border-radius:999px; overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,.4);
  border:1px solid color-mix(in srgb,var(--gold) 34%, transparent);
}
.tag-id{background:rgba(12,10,6,.78); backdrop-filter:blur(8px); color:var(--gold-2); font-family:'IBM Plex Mono'; font-size:10.5px; font-weight:600; display:grid; place-items:center; padding:5px 12px; letter-spacing:.06em}
:root[data-theme="light"] .tag-id{color:#e9d7a8}
.flags{position:absolute; top:11px; inset-inline-end:11px; z-index:3; display:flex; flex-direction:column; align-items:flex-end; gap:6px}
.pin{
  padding:4px 12px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.02em;
  backdrop-filter:blur(9px); border:1px solid transparent; display:flex; align-items:center; gap:5px;
}
.pin svg{width:11px;height:11px}
.pin.res{background:color-mix(in srgb,var(--amber) 26%, rgba(12,10,6,.62)); color:#f3d489; border-color:color-mix(in srgb,var(--amber) 44%, transparent)}
.pin.sld{background:rgba(12,10,6,.74); color:#cfc6b2; border-color:rgba(255,255,255,.14)}
.pin.brn{background:linear-gradient(135deg,#c8524a,#a2352d); color:#fff; border-color:rgba(255,255,255,.2)}
.pin.new{background:color-mix(in srgb,var(--gold) 30%, rgba(12,10,6,.6)); color:var(--gold-2); border-color:color-mix(in srgb,var(--gold) 45%, transparent)}
.pin.hid{background:rgba(12,10,6,.8); color:#b9b0a0; border-color:rgba(255,255,255,.18)}
.card.hid{border-style:dashed}
.card.hid .shot img{opacity:.62}
:root[data-theme="light"] .pin.new{color:#f6ecd2}
.edit-pin{
  position:absolute; bottom:10px; inset-inline-start:10px; z-index:3; display:flex; align-items:center; gap:6px;
  background:rgba(12,10,6,.74); backdrop-filter:blur(9px); border:1px solid color-mix(in srgb,var(--gold) 30%, transparent);
  color:var(--gold-2); padding:5px 12px; border-radius:999px; font-size:11px; font-weight:700;
}
.edit-pin:hover{background:rgba(12,10,6,.92)}
.edit-pin svg{width:12px;height:12px}
.kebab{
  position:absolute; bottom:10px; inset-inline-start:10px; z-index:4;
  width:32px;height:32px; display:grid; place-items:center; border-radius:50%;
  background:rgba(12,10,6,.74); backdrop-filter:blur(9px);
  border:1px solid color-mix(in srgb,var(--gold) 30%, transparent); color:var(--gold-2);
}
.kebab:hover{background:var(--grad-gold); color:#241b08; border-color:transparent}
.kebab svg{width:15px;height:15px}
.cmenu-back{position:fixed; inset:0; z-index:260}
.cmenu{
  position:fixed; z-index:261; min-width:216px; padding:7px;
  background:var(--ink-2); border:1px solid var(--line-2); border-radius:16px; box-shadow:var(--shadow-lg);
}
.cmenu .ttl{font-size:10.5px; font-weight:800; color:var(--txt-3); letter-spacing:.04em; padding:6px 11px 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cmenu button{
  width:100%; display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:11px;
  font-size:13px; font-weight:700; color:var(--txt-2); text-align:start; transition:.15s var(--ease);
}
.cmenu button:hover{background:var(--panel-2); color:var(--gold)}
.cmenu button svg{width:14px;height:14px; flex-shrink:0}
.cmenu .sep{height:1px; background:var(--line); margin:6px 5px}
.cmenu .row{display:flex; gap:5px; padding:2px 4px 4px}
.cmenu .row button{justify-content:center; padding:7px 5px; font-size:12px; font-weight:800; border:1px solid var(--line); border-radius:9px}
.cmenu .row button.on{background:var(--grad-gold); color:#241b08; border-color:transparent}
:root[data-theme="light"] .cmenu .row button.on{color:#fff}
.cmenu button.danger{color:var(--burn)}
.cmenu button.danger:hover{background:color-mix(in srgb,var(--burn) 16%, transparent); color:#ff6b62}
.cover-pin{
  position:absolute; bottom:10px; inset-inline-end:10px; z-index:4; display:flex; align-items:center; gap:6px;
  background:rgba(12,10,6,.74); backdrop-filter:blur(9px); border:1px solid color-mix(in srgb,var(--gold) 30%, transparent);
  color:var(--gold-2); padding:5px 12px; border-radius:999px; font-size:11px; font-weight:700;
}
.cover-pin:hover{background:var(--grad-gold); color:#241b08; border-color:transparent}
.cover-pin svg{width:12px;height:12px}
.cover-pin.is-cover{color:var(--txt-3); border-color:var(--line-2); cursor:default}
.cover-pin.is-cover:hover{background:rgba(12,10,6,.74); color:var(--txt-3); border-color:var(--line-2)}
.shot-arrow{
  position:absolute; top:50%; translate:0 -50%; z-index:3; width:33px;height:33px;
  display:grid; place-items:center; border-radius:50%;
  background:rgba(12,10,6,.55); backdrop-filter:blur(7px); color:#f0ead9;
  opacity:0; transition:.2s var(--ease); border:1px solid rgba(255,255,255,.13);
}
.shot-arrow:hover{color:var(--gold-2); border-color:color-mix(in srgb,var(--gold) 40%, transparent)}
.shot-arrow.prev{inset-inline-start:10px}
.shot-arrow.next{inset-inline-end:10px}
.shot:hover .shot-arrow{opacity:1}
.shot-arrow svg{width:14px;height:14px}
@media (hover:none){.shot-arrow{opacity:.8}}
.shot-nav{position:absolute; bottom:11px; left:50%; translate:-50% 0; z-index:3; display:flex; gap:4px}
.pip{width:5px;height:5px;border-radius:50%; background:rgba(255,255,255,.38); transition:.2s}
.pip.on{background:var(--gold-2); width:15px; border-radius:3px}
.vid-mark{
  position:absolute; bottom:10px; inset-inline-end:10px; z-index:3; display:flex; align-items:center; gap:5px;
  background:rgba(12,10,6,.74); backdrop-filter:blur(7px); color:var(--gold-2); padding:4px 11px;
  border-radius:999px; font-size:10.5px; font-weight:700; border:1px solid rgba(255,255,255,.13);
}
.vid-mark svg{width:10px;height:10px}
.body{padding:17px 18px 18px; display:flex; flex-direction:column; flex:1}
.b-brand{font-size:10px; color:var(--gold-deep); font-weight:800; letter-spacing:.24em; text-transform:uppercase; margin-bottom:4px}
.b-name{font-family:'El Messiri'; font-weight:600; font-size:17px; line-height:1.4; margin-bottom:12px; cursor:pointer; transition:color .18s}
.b-name:hover{color:var(--gold)}
.specs{display:grid; grid-template-columns:1fr 1fr; gap:7px 13px; margin-bottom:12px}
.spec{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--txt-2); min-width:0}
.spec svg{width:13px;height:13px; color:var(--gold-deep); flex-shrink:0; opacity:.85}
.spec span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chiprow{display:flex; flex-wrap:wrap; gap:5px; margin-bottom:11px}
.mini-chip{
  font-size:11px; font-weight:700; color:var(--gold-2); padding:3px 9px; border-radius:999px;
  background:color-mix(in srgb,var(--gold) 9%, transparent); border:1px solid var(--gold-dim);
}
:root[data-theme="light"] .mini-chip{color:var(--gold-deep)}
/* لون الحالة الخارجية حسب خطورتها */
.mini-chip.tone-good{color:var(--g-a); border-color:color-mix(in srgb,var(--g-a) 40%, transparent);
  background:color-mix(in srgb,var(--g-a) 10%, transparent)}
.mini-chip.tone-warn{color:var(--amber); border-color:color-mix(in srgb,var(--amber) 45%, transparent);
  background:color-mix(in srgb,var(--amber) 12%, transparent)}
.mini-chip.tone-bad{color:var(--burn); border-color:color-mix(in srgb,var(--burn) 45%, transparent);
  background:color-mix(in srgb,var(--burn) 12%, transparent)}
.cond-line{font-size:12px; color:var(--txt-3); margin-top:4px; line-height:1.6}
.img-fail{object-fit:cover}
.sold-sect .sect-h h2{color:var(--txt-2)}
.sold-sect .sect-h .chip{min-height:32px; height:32px}
.note{
  font-size:12.5px; color:var(--txt-2); background:color-mix(in srgb,var(--panel-2) 72%, transparent);
  border:1px solid var(--line); border-inline-start:2px solid var(--gold-deep);
  border-radius:10px; padding:9px 12px; margin-bottom:13px; line-height:1.7;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* الصف الأخير بالبطاقة: السعر + الأزرار.
   بيلفّ لسطر تاني لما ما يضل مجال — بدونه زر الواتساب بينقص من البطاقة
   (البطاقة overflow:hidden) على الشاشات الصغيرة وبالإنجليزي. */
.foot{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap;
}
.price{display:flex; align-items:baseline; gap:6px; min-width:0; flex:1 1 auto}
.price b{font-family:'El Messiri'; font-weight:700; font-size:22px; letter-spacing:.01em; color:var(--gold-2)}
:root[data-theme="light"] .price b{color:var(--gold-deep)}
.price .cur{font-size:11.5px; color:var(--txt-3); font-weight:700}
.price .was{font-family:'IBM Plex Mono'; font-size:12px; color:var(--txt-3); text-decoration:line-through; margin-inline-start:3px}
.acts{display:flex; align-items:center; gap:7px; flex-shrink:0; margin-inline-start:auto}
.btn-icon{
  width:38px;height:38px; border-radius:50%; display:grid; place-items:center;
  background:transparent; border:1px solid var(--line); color:var(--txt-2); transition:.18s var(--ease);
}
.btn-icon:hover{color:var(--gold); border-color:var(--gold-dim); transform:translateY(-1px)}
.btn-icon svg{width:15px;height:15px}
.btn-icon.fav.on{background:color-mix(in srgb,var(--rose) 16%, transparent); border-color:var(--rose); color:var(--rose)}
.btn-icon.fav.on svg{fill:var(--rose); stroke:var(--rose)}
.btn-icon.cmp.on{background:color-mix(in srgb,var(--gold) 16%, transparent); border-color:var(--gold-deep); color:var(--gold)}
.btn-wa{
  height:38px; padding-inline:16px; border-radius:999px; display:flex; align-items:center; gap:7px;
  background:var(--grad-gold); color:#241b08; font-size:12.5px; font-weight:800; text-decoration:none;
  transition:.18s var(--ease); border:1px solid transparent; box-shadow:0 1px 0 rgba(255,255,255,.25) inset;
  white-space:nowrap; flex-shrink:0;
}
:root[data-theme="light"] .btn-wa{color:#fff; box-shadow:none}
.btn-wa:hover{transform:translateY(-1px); box-shadow:0 12px 30px -10px color-mix(in srgb,var(--gold) 55%, transparent)}
.btn-wa svg{width:14px;height:14px}
.btn-wa[disabled]{background:var(--panel-2); color:var(--txt-3); border-color:var(--line); cursor:not-allowed; box-shadow:none; transform:none}
.empty{text-align:center; padding:100px 20px; color:var(--txt-2)}
.empty h3{font-size:19px; margin-bottom:7px; color:var(--txt)}

/* ═══════════ سكيلتون ═══════════ */
.sk{position:relative; overflow:hidden; background:var(--panel-2); border-radius:9px}
.sk::after{
  content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, color-mix(in srgb,var(--gold) 7%, transparent), transparent);
  animation:shim 1.6s infinite;
}
@keyframes shim{to{transform:translateX(100%)}}
.sk-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.sk-img{aspect-ratio:4/3; border-radius:0}
.sk-body{padding:16px 18px; display:flex; flex-direction:column; gap:10px}
.sk-l{height:12px}
.w40{width:40%} .w60{width:60%} .w85{width:85%}
.sk-t{height:22px; width:130px}

/* ═══════════ شريط المقارنة ═══════════ */
.cmp-bar{
  position:fixed; bottom:20px; left:50%; translate:-50% 0; z-index:150;
  display:flex; align-items:center; gap:11px; padding:11px 13px;
  background:color-mix(in srgb,var(--panel) 86%, transparent); backdrop-filter:blur(18px);
  border:1px solid var(--gold-dim); border-radius:999px; box-shadow:var(--shadow-lg);
  max-width:min(740px, calc(100% - 26px)); flex-wrap:wrap; justify-content:center;
}
.cmp-bar[hidden]{display:none}
.cmp-items{display:flex; gap:7px; flex-wrap:wrap}
.cmp-i{
  display:flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px;
  background:color-mix(in srgb,var(--panel-2) 80%, transparent); border:1px solid var(--line); font-size:12px; font-weight:700;
}
.cmp-i button{display:grid; place-items:center; width:17px;height:17px; border-radius:50%; color:var(--txt-3)}
.cmp-i button:hover{color:var(--txt); background:var(--line)}
.cmp-i button svg{width:10px;height:10px}
.cmp-go{
  height:39px; padding-inline:18px; border-radius:999px; background:var(--grad-gold); color:#241b08;
  font-weight:800; font-size:13px; display:flex; align-items:center; gap:7px; transition:.18s;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset;
}
:root[data-theme="light"] .cmp-go{color:#fff; box-shadow:none}
.cmp-go svg{width:14px;height:14px}
.cmp-go:hover{transform:translateY(-1px)}
.cmp-go.dim{background:transparent; color:var(--txt-3); border:1px solid var(--line); box-shadow:none}
.cmp-x{font-size:12px; color:var(--txt-3); text-decoration:underline; text-underline-offset:3px}
.cmp-x:hover{color:var(--gold)}

/* ═══════════ النوافذ ═══════════ */
.ovl{
  position:fixed; inset:0; z-index:200; background:rgba(6,5,3,.76);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  display:grid; place-items:center; padding:16px;
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease);
}
.ovl.on{opacity:1; pointer-events:auto}
.modal{
  width:min(1060px, 100%); max-height:min(93dvh, 100%); overflow:auto; overscroll-behavior:contain;
  background:var(--ink-2); border:1px solid var(--line-2); border-radius:24px; position:relative;
  transform:translateY(18px) scale(.98); transition:transform .3s var(--ease); box-shadow:var(--shadow-lg);
}
.ovl.on .modal{transform:none}
.m-close{
  position:sticky; top:13px; inset-inline-start:calc(100% - 54px); z-index:5;
  width:38px;height:38px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb,var(--panel) 82%, transparent); backdrop-filter:blur(9px);
  border:1px solid var(--line-2); color:var(--txt-2); margin-bottom:-38px;
}
.m-close:hover{color:var(--gold)}
.m-close svg{width:15px;height:15px}
.m-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:0}
.m-media{padding:20px; border-inline-end:1px solid var(--line)}
.m-stage{
  aspect-ratio:4/3; border-radius:16px; overflow:hidden; background:var(--panel-2);
  border:1px solid var(--line); position:relative; touch-action:pan-y;
}
/* بصفحة الجهاز بنعرض الصورة كاملة بدون قص — الزبون بدّه يشوف الجهاز كله */
.m-stage img{
  width:100%;height:100%; object-fit:contain; background:var(--panel-2);
  cursor:zoom-in;
}
/* علامة صغيرة بتقول إنه الصورة بتكبر — التكبير الحقيقي بالعارض الكامل */
.stage-zoom{
  position:absolute; bottom:10px; inset-inline-end:10px; z-index:3;
  width:32px;height:32px; border-radius:9px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--ink) 62%, transparent); backdrop-filter:blur(6px);
  border:1px solid var(--line-2); color:var(--txt-2); pointer-events:none;
  transition:.18s var(--ease);
}
.stage-zoom svg{width:15px;height:15px}
.m-stage:hover .stage-zoom{color:var(--gold); border-color:var(--gold-dim)}
.m-stage iframe,.m-stage video{width:100%;height:100%; border:0; background:#000}
.m-thumbs{display:flex; gap:8px; margin-top:11px; flex-wrap:wrap}
.m-th{
  width:66px;height:48px; border-radius:10px; overflow:hidden; border:1.5px solid var(--line);
  background:var(--panel-2); display:grid; place-items:center; color:var(--txt-2); transition:.18s;
}
.m-th img{width:100%;height:100%; object-fit:cover}
.m-th.on{border-color:var(--gold)}
.m-th.vid svg{width:15px;height:15px}
.m-info{padding:26px}
.m-info h2{font-size:24px; font-weight:700; margin:2px 0 13px}
.m-badges{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:17px}
.m-bd{padding:4px 12px; border-radius:999px; font-size:11.5px; font-weight:800; border:1px solid; letter-spacing:.02em}
.m-table{margin:0 0 15px; border:1px solid var(--line); border-radius:14px; overflow:hidden}
.m-row{display:grid; grid-template-columns:122px 1fr}
.m-row + .m-row{border-top:1px solid var(--line)}
.m-row dt{padding:10px 14px; font-size:12px; color:var(--gold-deep); font-weight:800; background:color-mix(in srgb,var(--panel) 62%, transparent); letter-spacing:.02em}
.m-row dd{margin:0; padding:10px 14px; font-size:13.5px}
.m-note{
  font-size:13px; color:var(--txt-2); background:color-mix(in srgb,var(--panel) 62%, transparent);
  border:1px solid var(--line); border-inline-start:2px solid var(--gold-deep);
  border-radius:12px; padding:11px 14px; margin-bottom:17px; line-height:1.75;
}
.m-price{display:flex; align-items:baseline; gap:8px; margin-bottom:15px}
.m-price b{font-family:'El Messiri'; font-weight:700; font-size:34px; letter-spacing:.01em; color:var(--gold-2)}
:root[data-theme="light"] .m-price b{color:var(--gold-deep)}
.m-price .was{font-family:'IBM Plex Mono'; font-size:14px; color:var(--txt-3); text-decoration:line-through}
.m-cta{display:flex; gap:9px; flex-wrap:wrap}
.m-cta .btn-wa{flex:1; min-width:190px; height:47px; justify-content:center; border-radius:999px; font-size:14px}
.btn-ghost{
  height:47px; padding-inline:17px; border-radius:999px; display:flex; align-items:center; gap:8px;
  background:transparent; border:1px solid var(--line); color:var(--txt-2);
  font-size:12.5px; font-weight:700; transition:.18s var(--ease);
}
.btn-ghost:hover{color:var(--gold); border-color:var(--gold-dim)}
.btn-ghost svg{width:14px;height:14px}
.m-terms{display:flex; gap:7px; flex-wrap:wrap; margin-top:17px; padding-top:15px; border-top:1px solid var(--line)}
.m-tm{
  display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--txt-2); font-weight:700;
  background:transparent; border:1px solid var(--line); border-radius:999px; padding:6px 13px;
}
.m-tm svg{width:12px;height:12px; color:var(--gold)}

/* ═══════════ المقارنة ═══════════ */
.cmp-modal{width:min(980px,100%)}
.cmp-hd{padding:24px 26px 0; display:flex; align-items:center; justify-content:space-between}
.cmp-hd h2{font-size:21px; font-weight:700}
.cmp-wrap{padding:18px 26px 26px; overflow-x:auto}
.cmp-table{border-collapse:separate; border-spacing:0; width:100%; min-width:560px}
.cmp-table th,.cmp-table td{
  padding:12px 14px; text-align:start; border-bottom:1px solid var(--line);
  font-size:13.5px; vertical-align:top;
}
.cmp-table thead th{background:color-mix(in srgb,var(--panel) 62%, transparent); font-family:'El Messiri'; font-weight:600; font-size:14.5px; border-bottom:1px solid var(--line-2)}
.cmp-table .lbl{
  position:sticky; inset-inline-start:0; background:var(--ink-2); z-index:2;
  font-size:11.5px; color:var(--gold-deep); font-weight:800; width:112px; min-width:112px; letter-spacing:.02em;
}
.cmp-th-img{width:90px;height:64px; border-radius:11px; object-fit:cover; border:1px solid var(--line); margin-bottom:8px}
.cmp-price{font-family:'El Messiri'; font-weight:700; font-size:18px; color:var(--gold-2)}
:root[data-theme="light"] .cmp-price{color:var(--gold-deep)}
.cmp-price.best{color:var(--g-a)}
.cmp-table .wa-cell .btn-wa{height:36px; font-size:12px}

/* ═══════════ لوحة التحكم ═══════════ */
.dash-ovl{
  position:fixed; inset:0; z-index:300; background:rgba(6,5,3,.62); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease);
}
.dash-ovl.on{opacity:1; pointer-events:auto}
.dash{
  position:absolute; top:0; bottom:0; left:0; width:min(560px, 100%);
  background:var(--ink-2); border-inline-start:1px solid var(--line-2);
  transform:translateX(-105%); transition:transform .32s var(--ease);
  display:flex; flex-direction:column; box-shadow:var(--shadow-lg);
}
.dash-ovl.on .dash{transform:none}
.dash-hd{
  padding:19px 24px; border-bottom:1px solid var(--line); display:flex;
  align-items:center; justify-content:space-between; gap:12px; flex-shrink:0;
}
.dash-hd h2{font-size:19px; font-weight:700}
.dash-hd p{margin:2px 0 0; font-size:11.5px; color:var(--txt-3)}
.dot-flag{padding:4px 12px; border-radius:999px; font-size:11px; font-weight:800; border:1px solid}
.pub-flag{
  background:color-mix(in srgb,var(--g-a) 9%, transparent); border:1px solid color-mix(in srgb,var(--g-a) 30%, transparent);
  color:color-mix(in srgb,var(--g-a) 72%, var(--txt)); border-radius:12px; padding:10px 14px;
  font-size:12.5px; font-weight:700; margin-bottom:19px;
}
.fld{margin-bottom:16px}
.fld label{display:block; font-size:12px; font-weight:800; color:var(--txt-2); margin-bottom:7px; letter-spacing:.02em}
.fld input,.fld textarea,.fld select{
  width:100%; min-height:42px; border-radius:12px; border:1px solid var(--line);
  background:color-mix(in srgb,var(--panel) 70%, transparent); color:var(--txt); padding:9px 14px; transition:.18s;
}
.fld textarea{min-height:88px; resize:vertical; line-height:1.7}
.fld input:focus,.fld textarea:focus{outline:none; border-color:var(--gold-dim); box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 10%, transparent)}
.req-note{color:var(--gold); font-size:10px; font-weight:800; margin-inline-start:5px}
.fld .form-invalid,.form-invalid{
  border-color:var(--burn)!important;
  background:color-mix(in srgb,var(--burn) 7%,var(--panel))!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--burn) 22%,transparent)!important;
}
.fld:has(.form-invalid) > label{color:color-mix(in srgb,var(--burn) 75%,var(--txt))}
.field-error-msg{margin:7px 0 0; color:color-mix(in srgb,var(--burn) 78%,var(--txt)); font-size:11.5px; font-weight:800; line-height:1.65}
.expense-row .field-error-msg{grid-column:1/-1; margin:0 2px 3px}
.form-error-summary{
  margin:0 0 12px; padding:12px 14px; border-radius:12px;
  border:1px solid color-mix(in srgb,var(--burn) 55%,transparent);
  background:color-mix(in srgb,var(--burn) 11%,var(--panel));
  color:color-mix(in srgb,var(--burn) 68%,var(--txt));
  font-size:12.5px; font-weight:800; line-height:1.75; overflow-wrap:anywhere;
}
.form-error-summary[hidden]{display:none}
.fld-row{display:grid; grid-template-columns:1fr 1fr; gap:11px}
.fld-row-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:11px}
.hint{font-size:11.5px; color:var(--txt-3); margin:6px 0 0}
.pw-wrap{position:relative}
.pw-wrap input{padding-inline-end:46px}
.pw-eye{
  position:absolute; inset-inline-end:6px; top:50%; translate:0 -50%;
  width:34px;height:34px; display:grid; place-items:center; border-radius:50%;
  color:var(--txt-3); transition:.16s var(--ease);
}
.pw-eye:hover{color:var(--gold); background:color-mix(in srgb,var(--gold) 8%, transparent)}
.pw-eye.on{color:var(--gold)}
.pw-eye svg{width:17px;height:17px}
.st-seg{display:flex; border:1px solid var(--line); border-radius:12px; overflow:hidden}
.st-seg button{flex:1; height:39px; font-size:12.5px; font-weight:800; color:var(--txt-3); background:transparent; transition:.16s}
.st-seg button + button{border-inline-start:1px solid var(--line)}
.st-seg button.on{background:var(--grad-gold); color:#241b08}
:root[data-theme="light"] .st-seg button.on{color:#fff}
.drop{
  border:1.5px dashed var(--line-2); border-radius:14px; padding:24px; text-align:center;
  color:var(--txt-3); cursor:pointer; transition:.2s; display:flex; flex-direction:column; align-items:center; gap:6px;
}
.drop:hover,.drop.over{border-color:var(--gold); color:var(--txt-2); background:color-mix(in srgb,var(--gold) 4%, transparent)}
.drop svg{width:22px;height:22px}
.drop b{font-size:13px; color:var(--txt-2)}
.drop small{font-size:11.5px}
.pv{display:grid; grid-template-columns:repeat(auto-fill, minmax(90px,1fr)); gap:8px; margin-top:11px}
.pv-i{position:relative; aspect-ratio:4/3; border-radius:11px; overflow:hidden; border:1px solid var(--line)}
.pv-i img{width:100%;height:100%;object-fit:cover}
.pv-i .cover-tag{
  position:absolute; top:4px; inset-inline-start:4px; background:rgba(12,10,6,.82); color:var(--gold-2);
  font-size:9px; font-weight:800; padding:2px 8px; border-radius:999px; border:1px solid color-mix(in srgb,var(--gold) 30%, transparent);
}
.pv-tools{
  position:absolute; inset-inline:0; bottom:0; display:flex; justify-content:center; gap:3px;
  padding:4px; background:linear-gradient(transparent, rgba(6,5,3,.88));
}
.pv-tools button{
  width:23px;height:23px; display:grid; place-items:center; border-radius:7px;
  background:rgba(255,255,255,.13); color:#fff; font-size:11px;
}
.pv-tools button:hover{background:color-mix(in srgb,var(--gold) 55%, rgba(255,255,255,.1)); color:#241b08}
.pv-tools button svg{width:11px;height:11px}
.btn{
  width:100%; height:47px; border-radius:999px; font-size:14px; font-weight:800;
  display:flex; align-items:center; justify-content:center; gap:8px; transition:.18s var(--ease);
}
.btn svg{width:15px;height:15px}
.btn:disabled{cursor:wait; opacity:.72; transform:none!important; filter:saturate(.72)}
.btn-pri{background:var(--grad-gold); color:#241b08; box-shadow:0 1px 0 rgba(255,255,255,.25) inset}
:root[data-theme="light"] .btn-pri{color:#fff; box-shadow:none}
.btn-pri:hover{filter:brightness(1.06); transform:translateY(-1px)}
.btn-sec{background:transparent; border:1px solid var(--line); color:var(--txt-2)}
.btn-sec:hover{color:var(--gold); border-color:var(--gold-dim)}
.dash-bd{padding:22px 24px 36px; overflow-y:auto; flex:1}
.dash-sec{margin-top:28px; padding-top:24px; border-top:1px solid var(--line)}
.dash-sec h4{font-size:15.5px; font-weight:700; margin-bottom:4px; font-family:'El Messiri'}
.dash-sec > p{margin:0 0 14px; font-size:12px; color:var(--txt-3)}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:15px}
.stat{background:color-mix(in srgb,var(--panel) 66%, transparent); border:1px solid var(--line); border-radius:12px; padding:11px 12px; text-align:center}
.stat b{display:block; font-family:'El Messiri'; font-weight:700; font-size:16px; color:var(--gold-2)}
:root[data-theme="light"] .stat b{color:var(--gold-deep)}
.stat span{font-size:10.5px; color:var(--txt-3); font-weight:800; letter-spacing:.03em}
.mini{display:flex; flex-direction:column; gap:8px}
.mini-i{
  display:flex; align-items:center; gap:12px; background:color-mix(in srgb,var(--panel) 66%, transparent);
  border:1px solid var(--line); border-inline-start:2px solid var(--gold-deep);
  border-radius:12px; padding:9px 12px;
}
.mini-i img{width:54px;height:39px; border-radius:8px; object-fit:cover; flex-shrink:0}
.mini-t{flex:1; min-width:0}
.mini-t b{display:block; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mini-t span{font-size:11.5px; color:var(--txt-3)}
.mini-a{display:flex; gap:5px; flex-shrink:0}
.mini-a button{
  width:31px;height:31px; border-radius:50%; display:grid; place-items:center;
  background:transparent; border:1px solid var(--line); color:var(--txt-2); transition:.16s;
}
.mini-a button:hover{color:var(--gold); border-color:var(--gold-dim)}
.mini-a button svg{width:13px;height:13px}
.team-i{
  display:flex; align-items:center; gap:10px; margin-bottom:8px;
  background:color-mix(in srgb,var(--panel) 66%, transparent);
  border:1px solid var(--line); border-inline-start:2px solid var(--gold-deep);
  border-radius:12px; padding:9px 12px;
}
.team-i.off{opacity:.5}
.team-av{
  width:34px;height:34px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  background:var(--panel-2); border:1px solid var(--gold-dim); color:var(--gold); font-weight:800; font-size:14px;
}
.team-t{flex:1; min-width:0}
.team-t b{display:block; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.team-t span{font-size:11px; color:var(--txt-3)}
.team-sel{height:32px; font-size:11.5px; padding-inline:11px 27px; flex-shrink:0}
.team-i .btn-icon{width:32px;height:32px; flex-shrink:0}
.team-i .btn-icon svg{width:13px;height:13px}
.fld-sel{appearance:auto}

/* ── التكاليف والمبيعات الخاصة بالمالك ── */
.owner-only{
  display:inline-flex; vertical-align:middle; margin-inline-start:7px; padding:3px 9px;
  border-radius:999px; border:1px solid var(--gold-dim); color:var(--gold);
  font-family:'Almarai'; font-size:9.5px; font-weight:800;
}
.warn-flag{background:color-mix(in srgb,var(--amber) 10%,transparent); border-color:color-mix(in srgb,var(--amber) 32%,transparent); color:var(--amber)}
.expense-list{display:flex; flex-direction:column; gap:8px; margin-bottom:9px}
.expense-row{display:grid; grid-template-columns:minmax(0,1fr) 130px 40px; gap:8px; align-items:center}
.expense-row input{margin:0}
.expense-row button{
  width:40px;height:40px; display:grid; place-items:center; border-radius:11px;
  border:1px solid var(--line); color:var(--burn); background:color-mix(in srgb,var(--burn) 5%,transparent);
}
.expense-row button:hover{border-color:color-mix(in srgb,var(--burn) 45%,transparent); background:color-mix(in srgb,var(--burn) 10%,transparent)}
.expense-row button svg{width:14px;height:14px}
.compact-btn{width:auto; min-height:40px; height:40px; padding-inline:18px; font-size:12px}
.sale-price-box{padding:14px; margin:12px 0; border:1px solid var(--gold-dim); border-radius:14px; background:color-mix(in srgb,var(--gold) 5%,transparent)}
.sold-date,.sale-date{font-size:11px; color:var(--txt-3); margin:8px 0 0}
.finance-preview{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:13px}
.finance-preview > div{padding:11px; border-radius:12px; border:1px solid var(--line); background:color-mix(in srgb,var(--panel) 66%,transparent); text-align:center}
.finance-preview span{display:block; font-size:10.5px; color:var(--txt-3); font-weight:800; margin-bottom:3px}
.finance-preview b{font-family:'IBM Plex Mono'; font-size:13px; color:var(--gold-2)}
.gain{color:var(--g-a)!important}.loss{color:var(--burn)!important}
.sales-stats{grid-template-columns:repeat(4,1fr)}
.sale-list{display:flex; flex-direction:column; gap:10px}
.sale-card{display:flex; align-items:flex-start; gap:12px; padding:12px; border:1px solid var(--line); border-inline-start:3px solid var(--gold-deep); border-radius:14px; background:color-mix(in srgb,var(--panel) 66%,transparent)}
.sale-card > img{width:74px;height:56px;object-fit:cover;border-radius:9px;flex-shrink:0}
.sale-main{flex:1;min-width:0}
.sale-head{display:flex;justify-content:space-between;align-items:center;gap:9px}
.sale-head > b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sale-head > span{font-size:10.5px;color:var(--gold);flex-shrink:0}
.sale-numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:9px}
.sale-numbers span{padding:7px 8px;border:1px solid var(--line);border-radius:9px;font-size:9.5px;color:var(--txt-3)}
.sale-numbers b{display:block;margin-top:2px;font-family:'IBM Plex Mono';font-size:11px;color:var(--txt-2)}
.sale-expenses{margin-top:7px;font-size:10.5px;line-height:1.7;color:var(--txt-3)}
.sale-actions{display:flex;gap:7px;margin-top:10px}
.sale-actions .btn{width:auto;height:36px;padding-inline:14px;font-size:11px}

/* ── الإحصائيات ── */
.stats.two{grid-template-columns:repeat(2,1fr)}
.stat .sub{display:block; font-size:10px; color:var(--txt-3); font-weight:700; margin-top:2px}
.chart{margin:14px 0 4px}
.chart-hd{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:9px}
.chart-hd h5{margin:0; font-family:'El Messiri'; font-weight:600; font-size:13.5px; color:var(--txt-2)}
.chart-hd span{font-size:11px; color:var(--txt-3)}
.chart-bars{
  display:flex; align-items:flex-end; gap:3px; height:104px;
  padding:0 2px 0; border-bottom:1px solid var(--line);
}
.cbar{position:relative; flex:1; min-width:0; height:100%; display:flex; align-items:flex-end}
.cbar i{
  display:block; width:100%; height:var(--h); min-height:2px;
  border-radius:4px 4px 0 0; background:linear-gradient(180deg, var(--gold-2), var(--gold-deep));
  transition:filter .16s var(--ease);
}
.cbar.zero i{background:var(--line-2); min-height:2px}
.cbar:hover i{filter:brightness(1.18)}
.cbar b{
  position:absolute; bottom:100%; left:50%; translate:-50% 0; margin-bottom:5px;
  background:var(--ink-2); border:1px solid var(--line-2); border-radius:8px;
  padding:4px 9px; font-size:11px; font-weight:700; white-space:nowrap; color:var(--txt);
  opacity:0; pointer-events:none; transition:opacity .14s; z-index:3;
}
.cbar:hover b{opacity:1}
.chart-x{display:flex; justify-content:space-between; margin-top:6px; font-size:10.5px; color:var(--txt-3)}
.rank{display:flex; flex-direction:column; gap:7px; margin-top:4px}
.rank-i{display:flex; align-items:center; gap:9px; font-size:12px}
.rank-l{flex:0 0 40%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--txt-2)}
.rank-b{flex:1; height:7px; border-radius:4px; background:var(--panel-2); overflow:hidden}
.rank-b i{display:block; height:100%; border-radius:4px; background:var(--grad-gold)}
.rank-n{font-family:'IBM Plex Mono'; font-size:11.5px; color:var(--txt-3); min-width:26px; text-align:end}
.ev-i{
  display:flex; align-items:center; gap:9px; font-size:12px; padding:7px 10px;
  background:color-mix(in srgb,var(--panel) 60%, transparent);
  border:1px solid var(--line); border-radius:10px;
}
.ev-i .dotc{width:7px;height:7px;border-radius:50%; background:var(--c,var(--txt-3)); flex-shrink:0}
.ev-i .who{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ev-i .when{font-size:10.5px; color:var(--txt-3); flex-shrink:0}

/* ═══════════ عناصر عامة ═══════════ */
.toast{
  position:fixed; bottom:24px; inset-inline-start:24px; z-index:400;
  display:flex; align-items:flex-start; gap:10px; width:max-content;
  max-width:min(560px,calc(100vw - 32px)); padding:13px 16px;
  background:color-mix(in srgb,var(--panel) 96%, transparent); backdrop-filter:blur(12px);
  border:1px solid var(--gold-dim); border-radius:14px;
  box-shadow:var(--shadow-lg); color:var(--txt); font-size:13px; font-weight:700; line-height:1.65;
  overflow-wrap:anywhere; white-space:normal;
  transform:translateY(84px); opacity:0; transition:.32s var(--ease); pointer-events:none;
}
.toast.on{transform:none; opacity:1}
.toast svg{width:17px;height:17px; margin-top:2px; color:var(--g-a); flex-shrink:0}
.toast.bad{border-color:color-mix(in srgb,var(--burn) 62%, transparent); background:color-mix(in srgb,var(--burn) 12%,var(--panel))}
.toast.bad svg{color:var(--burn)}
.top-btn{
  position:fixed; bottom:24px; inset-inline-end:24px; z-index:140;
  width:45px;height:45px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb,var(--panel) 88%, transparent); backdrop-filter:blur(10px);
  border:1px solid var(--line-2); color:var(--txt-2);
  box-shadow:var(--shadow); transition:.2s var(--ease);
}
.top-btn:hover{color:var(--gold); border-color:var(--gold-dim); transform:translateY(-2px)}
.top-btn svg{width:16px;height:16px}
.top-btn[hidden]{display:none}
.fab{
  position:fixed; inset-inline-end:var(--edge); z-index:145;
  min-height:52px; padding-inline:20px; border-radius:999px;
  display:flex; align-items:center; gap:9px;
  background:var(--grad-gold); color:#241b08; font-size:14px; font-weight:800;
  box-shadow:var(--shadow-lg), 0 0 0 1px color-mix(in srgb,var(--gold) 35%, transparent);
  transition:.2s var(--ease);
}
:root[data-theme="light"] .fab{color:#fff}
.fab:hover{transform:translateY(-2px); filter:brightness(1.06)}
.fab svg{width:18px;height:18px}
.fab[hidden]{display:none}

/* ── العناصر العائمة: كل واحد بمكانه، وما بيتلاقوا أبداً ──
   الترتيب من تحت لفوق: شريط المقارنة → الزر العائم → زر الأعلى   */
:root{
  --edge:24px;
  --safe-b:env(safe-area-inset-bottom, 0px);
  --lane-1:calc(24px + var(--safe-b));    /* الطابق الأول */
  --lane-2:calc(88px + var(--safe-b));    /* الطابق الثاني */
  --lane-3:calc(148px + var(--safe-b));   /* الطابق الثالث */
}
.fab{bottom:var(--lane-1)}
.top-btn{bottom:var(--lane-2)}
body.has-cmp .fab{bottom:var(--lane-2)}
body.has-cmp .top-btn{bottom:var(--lane-3)}
body.no-fab .top-btn{bottom:var(--lane-1)}
body.no-fab.has-cmp .top-btn{bottom:var(--lane-2)}
.toast{bottom:var(--lane-1)}
body.has-cmp .toast{bottom:var(--lane-2)}
.cmp-bar{bottom:calc(20px + var(--safe-b))}
.btn-admin.is-dash{color:var(--gold); border-color:var(--gold-dim)}
.btn-admin #adminIc{display:grid; place-items:center}
.btn-admin #adminIc svg{width:14px;height:14px}
footer{border-top:1px solid var(--line); padding:24px 0 32px; color:var(--txt-3); font-size:12px; position:relative}
footer::before{
  content:''; position:absolute; inset-inline:0; top:-1px; height:1px;
  background:linear-gradient(90deg, transparent 10%, color-mix(in srgb,var(--gold) 30%, transparent) 50%, transparent 90%);
}
.foot-in{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}

/* ═══════════ التجاوب ═══════════ */
@media (max-width:900px){
  .m-grid{grid-template-columns:1fr}
  .m-media{border-inline-end:0; border-bottom:1px solid var(--line)}
  .ticker-top{flex-direction:column; align-items:stretch}
  .counts{width:100%} .count{flex:1; min-width:0}
  .brand-sub{display:none}
}
@media (max-width:820px){
  .wrap{width:min(1340px, 100% - 24px)}
  :root{--edge:16px}
  .search{order:3; max-width:none; flex-basis:100%}
  .hdr-in{height:auto; padding:10px 0; flex-wrap:wrap; gap:9px}
  .search input{height:44px}
  .icon-btn,.btn-admin{min-height:44px; height:44px}
  .icon-btn{width:44px}

  /* الفلاتر: اللوحة بتطفو فوق المحتوى وما بتقصّر واجهة الأجهزة */
  .filters-in{
    width:min(1340px, calc(100% - 24px)); padding:12px; gap:12px;
    max-height:min(58dvh, 420px); border-radius:0 0 15px 15px;
  }
  .clear-link{min-height:40px; display:inline-flex; align-items:center}
  .filters.open .filters-in{display:flex; flex-direction:column; align-items:stretch}
  .fgrp{gap:7px}
  .filters-in > .fgrp{flex-wrap:wrap}
  .flabel{flex-basis:100%; margin:0 0 2px}
  .chip{min-height:40px}
  .sel,.price-in{min-height:40px; height:40px}
  .price-in{flex:1; width:auto; min-width:0}
  .shown-line{flex-basis:100%; text-align:start; margin:0}
  .m-info{padding:19px}
  .cmp-bar{border-radius:22px; padding:9px 11px}
  .fld-row,.fld-row-3{grid-template-columns:1fr}
  .sales-stats{grid-template-columns:repeat(2,1fr)}
  .sale-numbers{grid-template-columns:repeat(2,1fr)}
  .sect-grid{grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:14px}
  .dash-hd{padding:15px 17px}
  .dash-bd{padding:18px 17px calc(40px + var(--safe-b))}
  .m-close{inset-inline-start:calc(100% - 50px)}
}
@media (max-width:600px){
  .toast{inset-inline:12px; width:auto; max-width:none}
  .fab .fab-lbl{display:none}
  .fab{padding-inline:0; width:52px; justify-content:center}
  .counts{width:100%} .count{min-width:0; padding-inline:12px}
  .count b{font-size:20px}
  .expense-row{grid-template-columns:minmax(0,1fr) 96px 40px}
  .finance-preview{grid-template-columns:1fr}
  .sale-card{flex-direction:column}
  .sale-card > img{width:100%;height:auto;max-height:180px}
  .sale-actions{flex-direction:column}
  .sale-actions .btn{width:100%}
  .foot-in{flex-direction:column; align-items:flex-start; gap:8px}
}
@media (max-width:380px){
  .wrap{width:min(1340px, 100% - 18px)}
  .sect-grid{grid-template-columns:1fr}
  .brand-nm{font-size:15.5px}
  .ticker{padding:30px 0 22px}
  .terms{grid-template-columns:1fr}
  .m-row{grid-template-columns:96px 1fr}
  .cmp-i{font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition-duration:.01ms!important}
  .card{opacity:1; transform:none}
}

/* ═══════════ اللغة والطباعة ═══════════ */
.icon-btn.lang{width:auto; padding-inline:14px; font-size:11px; font-weight:800; letter-spacing:.06em; font-family:'Almarai'}
html[dir="ltr"] .sect-h .rule{background:linear-gradient(to right, var(--line-2), transparent)}
#printSheet{display:none}
@media print{
  /* margin:0 بيمنع المتصفح يطبع الرابط والتاريخ برأس وذيل الصفحة */
  @page{ size:A4; margin:0 }
  body{background:#fff !important; color:#000}
  body::before,body::after{display:none !important}
  body > *:not(#printSheet){display:none !important}

  /* ملصقات الأكواد */
  #printSheet.labels-mode{display:grid !important; grid-template-columns:repeat(3,1fr); direction:ltr; padding:12mm}
  .plabel{border:1.5px dashed #999; padding:16px 10px 13px; text-align:center; page-break-inside:avoid}
  .plabel .pcode{font-family:'IBM Plex Mono',monospace; font-size:23px; font-weight:700; letter-spacing:.1em; color:#000}
  .plabel .pname{font-size:11px; color:#333; margin-top:5px}
  .plabel .pprice{font-size:11px; color:#666; margin-top:2px}

  /* ورقة مواصفات جهاز واحد — نوع الجهاز والصور والمواصفات بس */
  #printSheet.sheet-mode{display:block !important}
  .ds{font-family:'Almarai',sans-serif; color:#111; line-height:1.7; padding:14mm 13mm}
  .ds-hd{border-bottom:2.5px solid #b3924f; padding-bottom:9px; margin-bottom:16px}
  .ds-hd h1{font-family:'El Messiri',serif; font-size:26px; margin:2px 0 0; color:#000}
  .ds-brand{font-size:11.5px; letter-spacing:.22em; color:#8a6b2c; font-weight:800; text-transform:uppercase}
  /* الصور: وحدة تحت التانية وبعرض الصفحة كامل — أوضح بكثير من
     تكديسها جنب بعض بصور صغيرة ما بتبيّن الخدوش والحالة. */
  .ds-cover{
    display:block; width:100%; height:auto; max-height:105mm; object-fit:contain;
    border:1px solid #ddd; border-radius:6px; background:#fafafa;
    margin-bottom:16px; page-break-inside:avoid; break-inside:avoid;
  }
  .ds-imgs{display:block; margin-top:16px}
  .ds-imgs img{
    display:block; width:100%; height:auto; max-height:120mm; object-fit:contain;
    border:1px solid #ddd; border-radius:6px; background:#fafafa;
    margin-bottom:10mm; page-break-inside:avoid; break-inside:avoid;
  }
  .ds-imgs img:last-child{margin-bottom:0}
  .ds-tbl{width:100%; border-collapse:collapse; margin-bottom:14px; page-break-inside:auto;table-layout:fixed}
  .ds-tbl tr{break-inside:avoid;page-break-inside:avoid}
  .ds-tbl th,.ds-tbl td{overflow-wrap:anywhere;white-space:pre-wrap}
  .ds-note{white-space:pre-wrap;overflow-wrap:anywhere}
  .ds-tbl th{width:34%; text-align:start; background:#f4f0e6; color:#5a4a24;
    font-size:12.5px; font-weight:800; padding:8px 12px; border:1px solid #e2dcc9}
  .ds-tbl td{font-size:13.5px; padding:8px 12px; border:1px solid #e2dcc9}
  .ds-note{border:1px solid #e2dcc9; border-inline-start:3px solid #b3924f;
    border-radius:6px; padding:10px 13px; font-size:12.5px}
}
/* ═══════════════════════════════════════════════════════════════════
   إضافات النسخة المُقسّمة — شرائح متعددة · واتساب عام · لوحة كصفحة
   ═══════════════════════════════════════════════════════════════════ */

/* ── عدّاد صغير جوّا الشريحة ── */
.chip-n{opacity:.6; font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:600}
.chip.on .chip-n{opacity:.75}

/* ── مواصفات: صفوف شرائح متعددة الاختيار ── */
.fgrp-col{flex-direction:column; align-items:flex-start; gap:8px; width:auto}
.spec-rows{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px 14px; width:100%}
.spec-row{display:flex; flex-direction:column; align-items:flex-start; gap:5px; min-width:0; max-width:100%}
.spec-row .flabel{min-width:0; flex-shrink:0}
.spec-row .fgrp{width:100%; min-width:0}
@media (max-width:1050px){
  .spec-rows{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .spec-rows{grid-template-columns:1fr}
}

/* ── زر واتساب العام: على جهة البداية حتى ما يلاقي الأزرار التانية ── */
.wa-cta{
  position:fixed; inset-inline-start:var(--edge); bottom:var(--lane-1); z-index:145;
  display:flex; align-items:center; gap:9px;
  min-height:52px; padding-inline:18px; border-radius:999px;
  background:linear-gradient(135deg,#25d366,#128c7e); color:#fff;
  font-size:14px; font-weight:800; text-decoration:none;
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(37,211,102,.35);
  transition:.2s var(--ease);
}
.wa-cta:hover{transform:translateY(-2px); filter:brightness(1.06)}
.wa-cta svg{width:20px;height:20px; flex-shrink:0}
body.has-cmp .wa-cta{bottom:var(--lane-2)}
@media (max-width:560px){
  /* بالموبايل بيصير دائري بدون كلام حتى ما ياخد عرض الشاشة */
  .wa-cta{min-height:50px; width:50px; padding:0; justify-content:center}
  .wa-cta-lbl{display:none}
}

/* ═══════════════════════════════════════════════════════════════════
   عارض الصور الكامل (Lightbox)
   ═══════════════════════════════════════════════════════════════════ */
.lb{
  position:fixed; inset:0; z-index:380;
  background:rgba(4,3,2,.94);
  display:flex; flex-direction:column;
  opacity:0; pointer-events:none; transition:opacity .22s var(--ease);
  /* --drag بتزيد وقت السحب لتحت: الخلفية بتفتح تدريجياً */
  --drag:0;
}
.lb.on{opacity:1; pointer-events:auto}
.lb.dragging{background:rgba(4,3,2,calc(.94 - var(--drag) * .55)); transition:none}
.lb.dragging .lb-bar,
.lb.dragging .lb-thumbs,
.lb.dragging .lb-nav,
.lb.dragging .lb-hint{opacity:calc(1 - var(--drag)); transition:none}

/* الشريط العلوي: العدّاد + أزرار التكبير والإغلاق */
.lb-bar{
  flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 14px calc(12px);
  padding-top:calc(12px + env(safe-area-inset-top, 0px));
}
.lb-count{font-size:12.5px; font-weight:700; color:rgba(255,255,255,.62); letter-spacing:.05em}
.lb.single .lb-count{visibility:hidden}
.lb-tools{display:flex; align-items:center; gap:7px}
.lb-btn{
  width:40px;height:40px; border-radius:11px; display:grid; place-items:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  color:#f2ece0; transition:.16s var(--ease); cursor:pointer;
}
.lb-btn:hover{background:rgba(255,255,255,.16); border-color:var(--gold-dim); color:var(--gold)}
.lb-btn:disabled{opacity:.32; cursor:default}
.lb-btn:disabled:hover{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); color:#f2ece0}
.lb-btn svg{width:18px;height:18px}
.lb-close{background:rgba(255,255,255,.14)}

/* المسرح: الصورة بتتوسّط وبتظهر كاملة مهما كانت أبعادها.
   لازم flex مش grid — بـ grid الصف بيتقاس على المحتوى، فـ max-height:100%
   بينحسب على ارتفاع غير محدّد والمتصفح بيتجاهله والصورة بتنقص من فوق وتحت. */
.lb-stage{
  flex:1 1 auto; min-height:0; position:relative;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  padding:6px 12px;
  touch-action:none;                 /* بناخد اللمس كله: تكبير وسحب */
  cursor:zoom-in;
}
.lb.zoomed .lb-stage{cursor:grab}
.lb.zoomed .lb-stage:active{cursor:grabbing}
.lb-stage img{
  display:block;
  max-width:100%; max-height:100%; width:auto; height:auto;
  min-width:0; min-height:0;
  object-fit:contain; user-select:none; -webkit-user-drag:none;
  transform-origin:center center; will-change:transform;
  border-radius:4px;
}

/* أسهم التنقّل */
.lb-nav{
  position:absolute; top:50%; translate:0 -50%; z-index:2;
  width:46px;height:46px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.15);
  color:#f2ece0; transition:.16s var(--ease);
}
.lb-nav:hover{background:rgba(255,255,255,.18); color:var(--gold); border-color:var(--gold-dim)}
.lb-nav svg{width:19px;height:19px}
.lb-nav.prev{inset-inline-start:14px}
.lb-nav.next{inset-inline-end:14px}
.lb.single .lb-nav{display:none}

/* شريط الصور المصغّرة */
.lb-thumbs{
  flex-shrink:0; display:flex; gap:8px; justify-content:center; flex-wrap:nowrap;
  overflow-x:auto; scrollbar-width:none;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
}
.lb-thumbs::-webkit-scrollbar{display:none}
.lb-th{
  width:62px;height:46px; flex-shrink:0; border-radius:9px; overflow:hidden;
  border:1.5px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05);
  opacity:.55; transition:.16s var(--ease); cursor:pointer;
}
.lb-th img{width:100%;height:100%; object-fit:cover; display:block}
.lb-th:hover{opacity:.85}
.lb-th.on{opacity:1; border-color:var(--gold)}
.lb.single .lb-thumbs{display:none}

.lb-hint{
  flex-shrink:0; margin:0; text-align:center; font-size:11px;
  color:rgba(255,255,255,.4); font-weight:600;
  padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px));
}
.lb-hint .touch-only,
.lb-hint .mouse-only{display:none}
@media (hover:none) and (pointer:coarse){ .lb-hint .touch-only{display:inline} }
@media (hover:hover) and (pointer:fine){  .lb-hint .mouse-only{display:inline} }
.lb.single .lb-hint{padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px))}

@media (max-width:560px){
  .lb-nav{width:40px;height:40px}
  .lb-nav.prev{inset-inline-start:8px}
  .lb-nav.next{inset-inline-end:8px}
  .lb-btn{width:38px;height:38px}
  .lb-th{width:52px;height:39px}
  .lb-hint{font-size:10.5px}
}
@media (prefers-reduced-motion:reduce){
  .lb, .lb-stage img{transition:none !important}
}

/* ═══════════ قائمة المشاركة (كمبيوتر) ═══════════ */
.share-back{position:fixed; inset:0; z-index:410}
.share-menu{
  position:fixed; z-index:411; width:min(310px, calc(100vw - 24px)); padding:8px;
  background:color-mix(in srgb,var(--panel) 96%, transparent); backdrop-filter:blur(16px);
  border:1px solid var(--gold-dim); border-radius:15px; box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; gap:2px;
}
.share-menu .ttl{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px 9px; font-size:12px; font-weight:800; color:var(--txt-3);
  border-bottom:1px solid var(--line); margin-bottom:5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.share-menu .ttl svg{width:14px;height:14px; flex-shrink:0; color:var(--gold)}
.share-menu a{
  display:flex; align-items:center; gap:11px;
  padding:10px 11px; border-radius:10px; font-size:13.5px; font-weight:700;
  color:var(--txt-2); text-decoration:none; transition:.15s var(--ease);
}
.share-menu a:hover{background:var(--panel-2); color:var(--txt)}
.share-menu a svg{width:17px;height:17px; flex-shrink:0}
.share-menu a[data-sk="wa"] svg{color:#25d366}
.share-menu a[data-sk="tg"] svg{color:#2aabee}
.share-menu a[data-sk="fb"] svg{color:#1877f2}
.share-menu a[data-sk="x"]  svg{color:var(--txt)}
.share-menu .sep{height:1px; background:var(--line); margin:5px 0}
.share-url{display:flex; gap:6px; padding:2px}
.share-url input{
  flex:1; min-width:0; height:38px; border-radius:10px; padding-inline:11px;
  background:var(--panel-2); border:1px solid var(--line); color:var(--txt-2);
  font-family:'IBM Plex Mono',monospace; font-size:11.5px;
}
.share-url input:focus{outline:none; border-color:var(--gold-dim)}
.share-url button{
  flex-shrink:0; display:flex; align-items:center; gap:6px;
  height:38px; padding-inline:13px; border-radius:10px;
  background:var(--grad-gold); color:#241b08; font-size:12.5px; font-weight:800;
  border:1px solid transparent; transition:.15s var(--ease);
}
:root[data-theme="light"] .share-url button{color:#fff}
.share-url button:hover{filter:brightness(1.06)}
.share-url button svg{width:14px;height:14px}

/* ═══════════ قائمة تنزيل الصور ═══════════ */
.dl-back{position:fixed; inset:0; z-index:410}
.dl-menu{
  position:fixed; z-index:411; width:min(340px, calc(100vw - 24px)); padding:8px;
  max-height:min(560px, calc(100vh - 40px)); overflow-y:auto;
  background:color-mix(in srgb,var(--panel) 96%, transparent); backdrop-filter:blur(16px);
  border:1px solid var(--gold-dim); border-radius:15px; box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; gap:2px;
}
.dl-menu .ttl{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px 9px; font-size:12px; font-weight:800; color:var(--txt-3);
  border-bottom:1px solid var(--line); margin-bottom:5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dl-menu .ttl svg{width:14px;height:14px; flex-shrink:0; color:var(--gold)}
.dl-menu > button[data-dl]{
  display:flex; align-items:center; gap:11px; text-align:start;
  padding:11px; border-radius:10px; font-size:13.5px; font-weight:700;
  color:var(--txt-2); transition:.15s var(--ease);
}
.dl-menu > button[data-dl]:hover:not(:disabled){background:var(--panel-2); color:var(--txt)}
.dl-menu > button[data-dl]:disabled{opacity:.6; cursor:default}
.dl-menu > button[data-dl] > svg{width:17px;height:17px; flex-shrink:0; color:var(--gold)}
.dl-menu > button[data-dl] span{display:flex; flex-direction:column; gap:2px; min-width:0}
.dl-menu > button[data-dl] i{font-style:normal; font-size:11px; font-weight:600; color:var(--txt-3)}
.dl-menu .sep{height:1px; background:var(--line); margin:5px 0}
.dl-hint{margin:2px 0 8px; padding-inline:4px; font-size:11px; font-weight:700; color:var(--txt-3)}
.dl-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(78px, 1fr)); gap:7px; padding:2px}
.dl-th{
  position:relative; aspect-ratio:4/3; border-radius:9px; overflow:hidden;
  border:1.5px solid var(--line); background:var(--panel-2);
  transition:.15s var(--ease); cursor:pointer;
}
.dl-th img{width:100%;height:100%; object-fit:cover; display:block}
.dl-th i{
  position:absolute; bottom:3px; inset-inline-start:3px;
  min-width:17px; height:17px; padding-inline:4px; border-radius:5px;
  display:grid; place-items:center; font-style:normal;
  font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:700;
  background:color-mix(in srgb,var(--ink) 72%, transparent); color:#f2ece0;
}
.dl-th::after{
  content:''; position:absolute; inset:0; background:rgba(0,0,0,.35);
  opacity:0; transition:.15s var(--ease);
}
.dl-th:hover{border-color:var(--gold); transform:translateY(-1px)}
.dl-th:hover::after{opacity:1}
.dl-th.on{border-color:var(--gold)}

/* ── اللوحة كصفحة كاملة (admin.html) بدل نافذة جانبية ── */
.admin-wrap{padding-block:26px 40px}
.dash-page{
  position:static; inset:auto; width:100%; max-width:900px; margin:0 auto;
  transform:none; border:1px solid var(--line-2); border-radius:18px;
  background:var(--ink-2); box-shadow:var(--shadow);
  min-height:60vh; overflow:hidden;
}
.dash-page .dash-bd{overflow:visible; max-height:none}
.dash-page .dash-hd{border-radius:18px 18px 0 0}
body.admin-page{overflow-y:auto}
body.admin-page footer{margin-top:0}
@media (max-width:820px){
  .admin-wrap{padding-block:16px 28px}
  .dash-page{border-radius:14px}
  .dash-page .dash-bd{padding:18px 16px 30px}
  .dash-page .dash-hd{padding:16px}
}

/* ── الصورة البديلة لما النسخة المصغّرة مش موجودة ── */
img.img-fail{object-fit:cover}
/* Admin workspace: mobile first, scoped to preserve storefront styling. */
.admin-page{--gold:#647eea;--gold-dim:#647eea40;--gold-2:#8296ef;--gold-deep:#4c60b9;--grad-gold:linear-gradient(135deg,#7188ed,#5269c9);--surface:#fff;--workspace-bg:#f5f7fb;--workspace-text:#172033;--txt:var(--workspace-text);--txt-2:#748199;--txt-3:#748199;--ink:var(--workspace-bg);--ink-2:var(--surface);--panel:var(--surface);--panel-2:var(--workspace-bg);--line:#94a3b830;--line-2:#94a3b850;background:var(--workspace-bg);color:var(--workspace-text)}
.admin-page[data-theme="dark"],html[data-theme="dark"] .admin-page{--surface:#151c2c;--workspace-bg:#0e1421;--workspace-text:#e3e8f5}
.admin-page header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid #94a3b830}
.admin-page .hdr-in{min-height:68px;gap:8px}.admin-page .brand-sub{font-size:10px}
.admin-page button,.admin-page select,.admin-page summary,.admin-page .icon-btn,.admin-page .clear-link{min-height:44px;min-width:44px;touch-action:manipulation}
.admin-page input,.admin-page textarea,.admin-page select{font-size:16px!important;max-width:100%;scroll-margin-block:120px;background:var(--surface);color:var(--workspace-text)}
.admin-page input[type=checkbox]{width:24px!important;height:24px!important;flex:none}
.admin-page label:has(input[type=checkbox]){min-height:44px;display:flex;align-items:center;gap:10px}
.admin-page button:focus-visible,.admin-page summary:focus-visible,.admin-page input:focus-visible,.admin-page select:focus-visible{outline:3px solid #647eea;outline-offset:3px}
.admin-page .dash-page{max-width:none;overflow:visible;border:1px solid #94a3b830;background:var(--surface);box-shadow:0 8px 40px #17203305;color:var(--workspace-text)}
.admin-page .dash-hd{background:transparent}.admin-page .dash-bd{padding:16px;overflow:visible}
.admin-page .dash-sec{border-color:#94a3b830}.admin-page .fld label{color:var(--workspace-text)}
.admin-page [hidden]{display:none!important}
.admin-wrap{min-width:0}.admin-nav{position:fixed;inset-block:68px 0;inset-inline-start:0;width:min(310px,86vw);padding:22px 14px;background:var(--surface);border-inline-end:1px solid #94a3b830;z-index:80;overflow-y:auto;transform:translateX(-110%);transition:transform .22s ease}
[dir=rtl] .admin-nav{transform:translateX(110%)}.admin-nav.open{transform:translateX(0)}
.admin-nav>button{display:block;text-align:start;width:100%;border:0;border-radius:10px;padding:12px;margin-block:6px;background:transparent;color:var(--workspace-text);font:inherit}
.admin-nav>button[aria-current=page]{background:#647eea18;color:#647eea;font-weight:700}
.nav-heading{display:flex;align-items:center;justify-content:space-between;font:600 12px monospace;letter-spacing:.06em;margin-bottom:24px}.nav-heading button{background:transparent;border:0;color:inherit}
.drawer-backdrop{position:fixed;inset:0;z-index:70;background:#0f172a70;backdrop-filter:blur(3px)}.drawer-open{overflow:hidden}
.workspace-welcome{display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:24px}.workspace-welcome p{font:600 11px monospace;letter-spacing:.14em;color:#647eea}.workspace-welcome h2{font-size:clamp(20px,3vw,28px);line-height:1.6}
.workspace-welcome .btn,.catalog-toolbar .btn{width:auto;padding-inline:20px}
.overview-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.overview-stats article{border:1px solid #94a3b830;border-radius:14px;padding:20px;background:var(--workspace-bg)}.overview-stats strong{display:block;font-size:clamp(19px,3vw,30px);margin-top:10px;overflow-wrap:anywhere}.overview-stats small{color:#718096}
.stock-alert{width:100%;display:flex;justify-content:space-between;gap:12px;border:0;border-bottom:1px solid #94a3b830;background:transparent;color:inherit;text-align:start;padding:14px}
.catalog-toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:end;margin-bottom:20px}.catalog-toolbar label{flex:1;min-width:160px;font-size:12px}.catalog-toolbar input,.catalog-toolbar select{display:block;width:100%;margin-top:8px;min-height:44px;padding:10px;border:1px solid #94a3b850;border-radius:8px}
.inventory-grid{width:100%;border-collapse:collapse;table-layout:fixed}.inventory-grid thead{display:none}.inventory-grid tbody{display:grid;gap:16px}.inventory-grid tr{display:grid;grid-template-columns:minmax(0,1fr);border:1px solid #94a3b840;border-radius:16px;padding:16px;gap:12px;background:var(--surface)}.inventory-grid td{min-width:0;overflow-wrap:anywhere}.inventory-grid small{display:block;color:#718096;font-size:12px;margin-top:5px}
.inventory-grid .inventory-identity{display:flex;align-items:center;gap:12px}.inventory-identity img{width:72px;height:54px;object-fit:cover;border-radius:10px;flex:none}.inventory-identity strong{display:block}.inventory-price{font-size:20px}
.spec-badges{display:flex;gap:6px;flex-wrap:wrap}.spec-badges span{padding:5px 8px;font-size:11px;border-radius:6px;background:var(--workspace-bg);border:1px solid #94a3b830}
.visibility-badge{display:inline-block;padding:5px 8px;font-size:11px;border-radius:6px}.visibility-badge.public{background:#10b98118;color:#059669}.visibility-badge.internal{background:#f59e0b18;color:#a16207}.visibility-badge.owner{background:#8b5cf620;color:#8b5cf6}
.visibility-toggles,.inventory-actions,.payment-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.visibility-toggles button,.inventory-actions button,.payment-actions button{border:1px solid #94a3b840;border-radius:8px;padding:8px;background:transparent;color:inherit;font-size:12px}.visibility-toggles button[aria-checked=true]{background:#647eea18;border-color:#647eea}.visibility-toggles button:disabled{opacity:.5}
.inventory-actions svg{width:16px;height:16px}.row-menu{position:relative}.row-menu summary{cursor:pointer;text-align:center;list-style:none;font-size:22px;border:1px solid #94a3b840;border-radius:8px}.row-menu>div{position:absolute;inset-inline-end:0;top:48px;min-width:130px;background:var(--surface);box-shadow:0 8px 30px #0002;border:1px solid #94a3b840;border-radius:10px;padding:6px;z-index:20}.row-menu button{display:block;width:100%;text-align:start}
.studio-step{border:1px solid #94a3b830;border-radius:12px;margin-block:14px;background:var(--surface)}.studio-step>summary{padding:16px;font-weight:700;cursor:pointer;list-style-position:inside}.step-content{padding:0 16px 12px}.admin-page .fld-row,.admin-page .fld-row-3{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}.admin-page .fld{min-width:0}
.preset-chips{display:flex;gap:6px;flex-wrap:wrap;margin-block:9px}.preset-chips button{font-size:12px;border:1px solid #94a3b840;border-radius:8px;padding:6px 10px;background:transparent;color:inherit}.preset-chips button[aria-pressed=true]{background:#647eea18;border-color:#647eea;color:#647eea}
.spec-detail{display:block!important;font-size:12px;margin-block:10px}.spec-detail select{width:100%;margin-top:6px;padding:8px;border:1px solid #94a3b840;border-radius:8px}.picker-open{margin-top:8px;border:1px solid #94a3b840;border-radius:8px;background:transparent;color:inherit;padding:8px 12px}
.integrated-gpu-field input{width:100%;margin-top:6px}.dual-gpu-toggle{display:flex!important;align-items:center;gap:8px}.dual-gpu-toggle input{width:auto}.dual-gpu-line{display:flex;align-items:center;gap:7px;min-width:0;color:var(--txt-3);font-size:11px}.dual-gpu-line>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dual-gpu-badge{flex:none;padding:2px 6px;border:1px solid color-mix(in srgb,var(--gold) 45%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--gold) 12%,transparent);color:var(--gold);font-size:9px;font-weight:850;letter-spacing:.04em;text-transform:uppercase}
.studio-actions{position:sticky;bottom:0;display:flex;gap:8px;z-index:40;margin:20px -16px -16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--surface) 90%,transparent);border-top:1px solid #94a3b840;backdrop-filter:blur(16px)}.studio-actions .btn{flex:1;padding:8px;min-width:0;margin:0!important;font-size:13px}
.admin-page dialog{color:var(--workspace-text);background:var(--surface);border:1px solid #94a3b840;border-radius:20px;padding:20px;width:min(600px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;margin:auto}.admin-page dialog::backdrop{background:#0f172a80;backdrop-filter:blur(4px)}
.picker-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.picker-head button{border:0;background:transparent;color:inherit}.spec-picker input{width:100%;padding:12px;border:1px solid #94a3b840;border-radius:8px}.picker-results{max-height:45dvh;overflow:auto;padding-block:12px}.picker-results h4{margin-block:16px 8px;color:#647eea}.picker-results button{display:block;text-align:start;width:100%;padding:10px 12px;border:0;border-bottom:1px solid #94a3b830;background:transparent;color:inherit}.picker-results button:hover{background:#647eea18}
.laptop-preview img{width:100%;height:auto;max-height:40dvh;object-fit:contain}.payment-dialog .fld,.admin-page #admin-view-settings label.fld{display:block;margin-block:14px}.payment-dialog input,.payment-dialog select,#admin-view-settings textarea,#admin-view-settings input{display:block;width:100%;padding:10px;border:1px solid #94a3b840;border-radius:8px}.payment-dialog [data-error]{color:#ef4444}
.admin-page .form-invalid{border:2px solid #ef4444!important;background:#fef2f280!important;animation:field-shake .3s ease}.admin-page .field-error-msg{color:#ef4444;font-size:12px;margin-top:8px}
@keyframes field-shake{0%,100%{transform:translateX(0)}25%,75%{transform:translateX(-5px)}50%{transform:translateX(5px)}}
.admin-page .toast{top:80px;bottom:auto;right:50%;left:auto;transform:translate(50%,-12px);max-width:calc(100vw - 24px);z-index:150}.admin-page .toast.on{transform:translate(50%,0)}
@media(max-width:767px){.admin-page .hdr-actions .btn-admin,.admin-page .brand-sub{display:none}.admin-page .brand-nm{font-size:16px}.admin-page .hdr-in{padding-inline:10px}.admin-page .hdr-actions{gap:3px}.admin-page dialog.spec-picker{inset:auto 0 0;margin:0;width:100%;max-width:none;max-height:90dvh;border-radius:20px 20px 0 0;padding-bottom:calc(20px + env(safe-area-inset-bottom))}.admin-page .expense-row{grid-template-columns:minmax(0,1fr) 90px 44px}.admin-page .team-i,.admin-page .sale-card{flex-wrap:wrap}.admin-page .sale-main{min-width:0}.admin-page .sale-numbers{flex-wrap:wrap}.admin-page .dash-hd{padding:16px}}
@media(min-width:768px){.admin-page .fld-row{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-page .fld-row-3{grid-template-columns:repeat(3,minmax(0,1fr))}.inventory-grid{font-size:12px}.inventory-grid thead{display:table-header-group}.inventory-grid th{text-align:start;padding:12px 8px;color:#718096;font-weight:500;border-bottom:1px solid #94a3b840}.inventory-grid tbody{display:table-row-group}.inventory-grid tr{display:table-row}.inventory-grid td{padding:16px 8px;vertical-align:top;border-bottom:1px solid #94a3b830}.inventory-grid .inventory-identity{display:table-cell}.inventory-identity img{margin-bottom:8px}.overview-stats{grid-template-columns:repeat(4,minmax(0,1fr))}.admin-page .dash-bd{padding:24px}.studio-actions{margin-inline:-24px;margin-bottom:-24px}.admin-page .toast{right:24px;transform:translateY(-12px);max-width:560px}.admin-page .toast.on{transform:translateY(0)}}
@media(min-width:1024px){.workspace-ready .admin-wrap{margin-inline-start:250px;width:calc(100% - 274px);max-width:none;padding-block:24px}.admin-nav,[dir=rtl] .admin-nav{transform:none;width:230px;z-index:50}.admin-page #navToggle,.admin-page #drawerClose{display:none}.admin-page .dash-bd{padding:28px}.studio-actions{position:static;margin:24px 0 0;border:1px solid #94a3b830;border-radius:12px;padding:12px}.studio-actions .btn{flex:0 1 220px}}
@media(prefers-reduced-motion:reduce){.admin-page *{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
@media print{.admin-page header,.admin-page .admin-nav,.admin-page main,.admin-page .toast,.admin-page .drawer-backdrop{display:none!important}.admin-page #printSheet.invoice-mode{display:block!important;padding:30px;color:#000;background:white}.invoice-mode h1{font-size:24px}.invoice-mode p{margin-block:16px}}
.admin-page .pv-tools{flex-wrap:wrap}.admin-page .btn-pri{color:#fff}
.admin-page #toastDismiss{background:transparent;border:0;color:inherit;flex:none}.admin-page:not(.workspace-ready) #navToggle,.admin-page:not(.workspace-ready) #notificationsBtn{display:none}
@media(max-width:767px){.admin-page .brand{min-width:0;flex:1}.admin-page .brand>div:last-child{min-width:0}.admin-page .brand-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-page .brand-ic{display:none}.admin-page .hdr-actions{flex:none}.admin-page .hdr-in{height:68px}}

/* Customer storefront — independent of the admin workspace. */
.storefront {
  --ink:#101715; --ink-2:#17211d; --panel:#1a2620; --panel-2:#223128;
  --line:#304337; --line-2:#415b48; --txt:#eef4ec; --txt-2:#c0d0c2; --txt-3:#a6b9aa;
  --gold:#b8d588; --gold-2:#d3e8ae; --gold-deep:#344f21; --gold-dim:#536b39;
  --grad-gold:linear-gradient(135deg,#c5df9d,#a4c16f);
  background:var(--ink); color:var(--txt);
}
:root[data-theme=light] .storefront {
  --ink:#f6f7f2; --ink-2:#fff; --panel:#fff; --panel-2:#edf1e8;
  --line:#dce3d8; --line-2:#c2ccbb; --txt:#213426; --txt-2:#516254; --txt-3:#657467;
  --gold:#416530; --gold-2:#324f25; --gold-deep:#fff; --gold-dim:#b4c6a6;
  --grad-gold:linear-gradient(135deg,#537a40,#365b26);
}
.storefront .wrap{width:min(1320px,calc(100% - 32px));margin-inline:auto}
.storefront button,.storefront select,.storefront .btn-wa,.storefront .clear-link{min-width:44px;min-height:44px;touch-action:manipulation}
.storefront input,.storefront select,.storefront textarea{font-size:16px}
.storefront button:focus-visible,.storefront a:focus-visible,.storefront input:focus-visible,.storefront select:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.storefront [hidden]{display:none!important}
.storefront header{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--ink) 94%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.storefront .hdr-in{min-height:80px;height:auto;padding-block:14px;gap:22px}
.storefront .brand-nm{font-size:22px}.storefront .brand-sub{font-size:9px;letter-spacing:.12em}
.storefront .brand-ic{background:var(--panel-2);border:1px solid var(--line);box-shadow:none;color:var(--gold)}
.storefront .search{max-width:none;flex:1}.storefront .search input{height:48px;border-radius:12px;background:var(--panel);border:1px solid var(--line)}
.storefront .hdr-actions{gap:8px}.storefront .btn-admin{border-radius:10px;font-size:12px}
.storefront .ticker{padding:42px 0 28px;border:0;background:radial-gradient(ellipse at 90% 0%,color-mix(in srgb,var(--gold) 9%,transparent),transparent 65%)}
.storefront .ticker-top{gap:30px;align-items:center;margin-bottom:24px}.storefront .ticker h1{font-size:clamp(28px,3.8vw,46px);line-height:1.5;margin-top:8px;max-width:700px;letter-spacing:-.03em}
.storefront .ticker p{font-size:14px;max-width:650px;line-height:1.9}.store-eyebrow{display:block;font-size:10px;letter-spacing:.13em;font-weight:700;color:var(--gold)}
.storefront .counts{gap:20px;padding:22px 26px;border:1px solid var(--line);border-radius:18px;background:var(--panel);box-shadow:none}.storefront .count{min-width:64px}.storefront .count b{font-size:28px}.storefront .count span{font-size:11px}
.storefront .used-note{font-size:12px;margin-top:16px;color:var(--txt-2)}.storefront .live{font-size:11px;margin-top:10px}
.storefront .terms{gap:10px}.storefront .tm{padding:14px 18px;border-radius:12px;background:var(--panel);box-shadow:none}.storefront .tm b{font-size:13px}.storefront .tm p{font-size:11px}.storefront .tm-h{font-size:10px;margin-bottom:4px}
.storefront .filters{position:sticky;top:var(--hdr-h,80px);z-index:90;background:var(--ink);border-block:1px solid var(--line);transform:none;will-change:auto;isolation:auto;backdrop-filter:none}
.storefront .f-mini{gap:12px;padding-block:12px}.storefront .f-toggle{background:var(--panel);color:var(--txt);border-radius:10px;padding-inline:14px}
.storefront .f-quick{min-width:0;gap:8px;scroll-behavior:smooth;overscroll-behavior-inline:contain}.storefront .f-quick .chip{flex:none;border-radius:10px;padding:8px 16px;font-size:12px;border-color:transparent;background:transparent}.storefront .f-quick .chip.on{background:var(--panel-2);border-color:var(--gold-dim);color:var(--gold)}
.storefront.filters-open{overflow:hidden}
.storefront dialog.filters-in{position:fixed;inset:0 0 0 auto;width:min(520px,100%);height:100dvh;max-height:100dvh;max-width:100%;margin:0;padding:24px;overflow:auto;overscroll-behavior:contain;background:var(--ink-2);color:var(--txt);border:0;border-inline-start:1px solid var(--line);border-radius:20px 0 0 20px;box-shadow:0 20px 90px #0004;display:none}
[dir=rtl] .storefront dialog.filters-in{inset:0 auto 0 0;border-radius:0 20px 20px 0}
.storefront dialog.filters-in[open]{display:flex;flex-direction:column;gap:24px;animation:store-sheet-in .2s ease}
.storefront dialog.filters-in::backdrop{background:#07130db3;backdrop-filter:blur(5px)}
.filter-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.filter-heading h2{font-size:24px;margin:8px 0 0}.filter-heading button{background:var(--panel-2);border:1px solid var(--line);border-radius:50%;color:var(--txt)}
.filter-search-label{display:block;font-size:12px}.filter-search-label input{display:block;width:100%;height:48px;margin-top:9px;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--txt)}
.storefront .filters-in>.fgrp{flex:none;display:flex;flex-wrap:wrap;gap:10px;align-items:center}.storefront .filters-in .flabel{font-size:12px;min-width:55px}.storefront .filters-in .scroll-x{flex-wrap:wrap!important;overflow:visible}.storefront .filters-in .spec-row{align-items:flex-start;padding-block:12px;border-bottom:1px solid var(--line)}
.storefront .filters-in .chip{white-space:normal;text-align:start;padding:9px 12px;border-radius:9px;line-height:1.5}.storefront .filters-in .price-in{width:110px;flex:1;min-width:80px;height:44px}.storefront .filters-in .sel{flex:1;max-width:100%}
.filter-actions{position:sticky;bottom:-24px;z-index:2;display:flex;flex-direction:column;gap:6px;margin:0 -24px -24px;padding:16px 24px calc(12px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--ink-2) 96%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.storefront .filter-actions .btn-pri{color:var(--gold-deep);font-size:14px;border-radius:12px}
.store-catalog{padding-block:32px 50px}.catalog-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.catalog-heading h2{font-size:26px;margin:8px 0}.storefront .shown-line{font-size:12px;color:var(--txt-3)}
.view-switch{display:flex;gap:4px;border:1px solid var(--line);padding:4px;border-radius:12px}.view-switch button{display:grid;place-items:center;background:transparent;border:0;border-radius:8px;color:var(--txt-3)}.view-switch button[aria-pressed=true]{background:var(--panel-2);color:var(--gold)}.view-switch svg{width:18px;height:18px}
.storefront .sect-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.storefront .sect{margin:0}.storefront .grid{padding:0}
.storefront .card{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 2px 5px #00000006;opacity:1;transform:none;transition:border-color .2s,box-shadow .2s}
.storefront .card::before{display:none}.storefront .card:hover{transform:none;border-color:var(--gold-dim);box-shadow:0 12px 35px #00000012}
.storefront .shot{aspect-ratio:4/3;background:var(--panel-2)}.storefront .shot img{object-fit:contain;padding:10px}.storefront .shot::after{display:none}.storefront .tag{display:none}
.storefront .flags{inset-block-start:10px;inset-inline-start:10px;inset-inline-end:48px;display:flex;flex-wrap:wrap;gap:4px}.storefront .pin{font-size:10px;padding:4px 7px;border-radius:6px;backdrop-filter:blur(8px);line-height:1.5}.storefront .condition-pin{background:var(--panel);color:var(--gold);border:1px solid var(--line)}
.storefront .card .body{padding:16px;display:flex;flex-direction:column;flex:1;min-width:0}.storefront .b-brand{font-size:10px;letter-spacing:.12em;color:var(--txt-3)}.storefront .b-name{font-size:17px;line-height:1.45;min-height:48px;margin:5px 0 12px;overflow:visible;white-space:normal}
.storefront .b-name button{font:inherit;color:var(--txt);background:transparent;border:0;padding:0;text-align:start;line-height:inherit;max-width:100%;overflow-wrap:anywhere}
.storefront .specs{display:flex;flex-direction:column;gap:7px;margin:0}.storefront .spec{font-size:11px;gap:8px;min-width:0;line-height:1.5}.storefront .spec svg{width:14px;height:14px;flex:none;color:var(--txt-3)}.storefront .spec span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.storefront .card .chiprow,.storefront .card .note{display:none}.storefront .card .foot{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:auto;padding-top:18px;border:0}.storefront .price{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px}.storefront .price b{font-size:25px;color:var(--txt);letter-spacing:-.04em}.storefront .price .cur{font-size:11px}.storefront .price .was{font-size:12px;color:var(--txt-3);width:100%}
.storefront .card .acts{display:grid;grid-template-columns:44px 44px minmax(0,1fr);gap:6px}.storefront .card .btn-wa{grid-column:1/-1;grid-row:1;justify-content:center;border-radius:9px;font-size:12px;background:#168347;color:white;box-shadow:none;padding:8px}.storefront .card .btn-icon{width:44px;height:44px;border-radius:9px;background:var(--panel-2)}
.storefront .card-details{display:flex;gap:5px;align-items:center;justify-content:center;border:0;border-radius:9px;background:var(--panel-2);font-size:11px;color:var(--txt)}.storefront .card-details svg{width:12px;height:12px;flex:none}
.storefront .grid.list-view .sect-grid{grid-template-columns:1fr}.storefront .list-view .card{display:grid;grid-template-columns:minmax(130px,30%) minmax(0,1fr)}.storefront .list-view .shot{aspect-ratio:auto;min-height:100%;height:100%}.storefront .list-view .b-name{min-height:0}.storefront .list-view .specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.storefront .list-view .card .acts{max-width:340px}
.storefront .empty{padding:60px 24px;border:1px dashed var(--line-2);border-radius:20px;background:var(--panel);text-align:center}.storefront .empty h3{font-size:23px}.storefront .empty p{max-width:480px;margin:12px auto;color:var(--txt-2)}.storefront .sk-card{border-radius:16px;overflow:hidden;min-width:0}
.storefront .ovl{padding:20px;z-index:200}.storefront .modal{border-radius:20px;max-height:calc(100dvh - 40px)}.storefront .m-info{padding:28px}.storefront .m-close{min-width:44px;min-height:44px;background:var(--panel);top:10px}.storefront .m-table{margin-block:20px}.storefront .m-row{gap:16px;align-items:start}.storefront .m-row dd{overflow-wrap:anywhere}.storefront .m-cta{gap:8px}.storefront .m-cta .btn-wa{width:100%;justify-content:center;border-radius:12px;background:#168347;color:white}
@keyframes store-sheet-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px){.storefront .sect-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.storefront .ticker-top{align-items:flex-start}.storefront .counts{padding:16px;gap:12px}.storefront .brand-sub{display:none}}
@media(max-width:767px){
  .storefront .wrap{width:calc(100% - 24px)}.storefront .hdr-in{gap:10px;padding-block:10px;flex-wrap:wrap;min-height:0}.storefront .brand{flex:1;min-width:0;gap:8px}.storefront .brand-ic{width:34px;height:34px}.storefront .brand-nm{font-size:17px;white-space:nowrap}.storefront .hdr-actions{gap:4px;flex:none}.storefront #adminLbl{display:none}.storefront .btn-admin{padding:0;width:44px;justify-content:center}.storefront .search{order:3;flex-basis:100%}.storefront .search input{height:44px}
  .storefront .ticker{padding:24px 0 18px}.storefront .ticker-top{display:block;margin-bottom:14px}.storefront .ticker h1{font-size:28px}.storefront .ticker p{font-size:12px;line-height:1.9}.storefront .counts{display:none}.storefront .used-note{font-size:10px;margin-top:12px}.storefront .live{font-size:10px}.storefront .terms{display:flex;overflow:auto;gap:8px;scrollbar-width:none}.storefront .tm{flex:0 0 185px;padding:12px}.storefront .tm p{font-size:10px}
  .storefront .f-mini{padding-block:9px;gap:8px}.storefront .f-toggle{padding-inline:10px;font-size:11px}.storefront .f-quick .chip{padding:8px 12px;font-size:11px}
  .storefront dialog.filters-in,[dir=rtl] .storefront dialog.filters-in{inset:auto 0 0;width:100%;height:auto;max-height:90dvh;max-width:none;border-radius:22px 22px 0 0;padding:20px;gap:22px}.storefront dialog.filters-in[open]{display:flex}.storefront .filter-actions{bottom:-20px;margin:0 -20px -20px;padding-inline:20px}.filter-heading h2{font-size:22px}
  .store-catalog{padding-block:24px 36px}.catalog-heading{margin-bottom:18px;gap:10px}.catalog-heading h2{font-size:22px}.storefront .sect-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.storefront .card{border-radius:12px}.storefront .card .body{padding:11px}.storefront .b-name{font-size:14px;min-height:42px;margin-bottom:8px}.storefront .b-brand{font-size:9px}.storefront .spec{font-size:10px;gap:5px}.storefront .specs{gap:6px}.storefront .spec svg{width:12px;height:12px}.storefront .price b{font-size:22px}.storefront .price .cur{font-size:10px}.storefront .card .foot{padding-top:13px;gap:9px}
  .storefront .card .acts{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.storefront .card .btn-icon{width:100%}.storefront .card-details{grid-column:1/-1}.storefront .shot-arrow{display:none}.storefront .flags{inset-block-start:6px;inset-inline-start:6px;inset-inline-end:6px}.storefront .flags .pin:not(.condition-pin):not(.hid){display:none}.storefront .condition-pin{font-size:9px;padding:3px 5px;max-width:100%}.storefront .kebab{top:auto;bottom:8px}.storefront .shot img{padding:7px}.storefront .cover-pin{display:none}
  .storefront .grid.list-view .sect-grid{grid-template-columns:1fr}.storefront .list-view .card{grid-template-columns:minmax(95px,32%) minmax(0,1fr)}.storefront .list-view .specs{grid-template-columns:1fr}.storefront .list-view .b-name{min-height:0}
  .storefront .ovl{padding:0;align-items:flex-end}.storefront .modal{width:100%;max-height:94dvh;border-radius:20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom)}.storefront .m-grid{grid-template-columns:minmax(0,1fr)}.storefront .m-info,.storefront .m-media{padding:18px;min-width:0}.storefront .m-stage{max-height:40dvh}.storefront .m-info h2{font-size:24px}.storefront .m-row{grid-template-columns:minmax(80px,34%) minmax(0,1fr);font-size:12px}.storefront .m-thumbs{flex-wrap:nowrap;overflow-x:auto}.storefront .m-th{flex:none;min-height:48px}.storefront .m-cta{padding-bottom:12px}.storefront .wa-cta{bottom:calc(16px + var(--safe-b));width:48px;height:48px}.storefront .wa-cta-lbl{display:none}
}
@media(prefers-reduced-motion:reduce){.storefront *, .storefront *::before{animation:none!important;transition:none!important;scroll-behavior:auto!important}}