:root{--bg:#0a0c0f;--panel:#13171d;--panel2:#0f1318;--line:#2a3039;--text:#f7f8f8;--muted:#98a2ae;--accent:#b7ff4a;--danger:#ff6d6d;--radius:22px}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif}body{min-height:100vh}
button,input,select,textarea{font:inherit}.shell{max-width:780px;margin:auto;padding:14px 16px 105px}.topbar{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:5;background:#0a0c0fe8;backdrop-filter:blur(14px);padding:8px 0 12px}.brand{display:flex;gap:10px;align-items:center}.mark{width:44px;height:44px;border-radius:14px;background:var(--accent);color:#07090b;display:grid;place-items:center;font-weight:950;font-size:29px}.brand small{display:block;color:var(--muted);margin-top:2px}.icon{background:var(--panel);color:white;border:1px solid var(--line);border-radius:13px;width:42px;height:42px}
.hero,.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin:12px 0}.hero{padding:24px;background:radial-gradient(circle at 10% 0,#b7ff4a28,transparent 38%),var(--panel)}h1{font-size:33px;line-height:1.15;margin:8px 0 12px}h2{margin:0 0 10px;font-size:22px}h3{margin:0 0 6px}p{color:var(--muted);line-height:1.65}.pill{display:inline-flex;padding:6px 10px;border-radius:999px;background:#b7ff4a18;color:var(--accent);font-size:12px;font-weight:800}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.item{background:var(--panel2);border:1px solid var(--line);border-radius:18px;padding:15px}.emoji{font-size:44px;margin-bottom:8px}.meta{color:var(--muted);font-size:13px}.row{display:flex;gap:9px;flex-wrap:wrap}.btn{border:0;border-radius:14px;padding:12px 15px;font-weight:850;cursor:pointer}.primary{background:var(--accent);color:#090b0d}.secondary{background:#20252d;color:white;border:1px solid #343b46}.ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}input,select,textarea{width:100%;background:#0d1116;color:white;border:1px solid var(--line);border-radius:13px;padding:13px;margin:6px 0 12px;outline:none}textarea{min-height:86px;resize:vertical}label{font-size:13px;color:#c6ccd3}.bottom{position:fixed;bottom:0;left:0;right:0;z-index:8;background:#0b0e12f2;border-top:1px solid var(--line);display:flex;justify-content:center;gap:4px;padding:8px max(8px,env(safe-area-inset-bottom))}.bottom button{width:min(120px,19vw);background:transparent;border:0;color:#7f8996;padding:8px 4px;border-radius:14px;font-size:19px}.bottom span{display:block;font-size:11px;margin-top:3px}.bottom button.active{color:var(--accent);background:#b7ff4a0e}.bottom .addnav{background:var(--accent);color:#080a0c}.stat{display:flex;justify-content:space-between;align-items:end}.big{font-size:40px;font-weight:950}.match{border-right:4px solid var(--accent)}.danger{color:var(--danger)}.notice{font-size:13px;padding:11px;border-radius:14px;background:#ffffff08;color:var(--muted);border:1px solid var(--line)}.progress{height:8px;background:#252a32;border-radius:99px;overflow:hidden}.progress i{display:block;height:100%;background:var(--accent);border-radius:99px}.hidden{display:none}@media(max-width:560px){.grid{grid-template-columns:1fr}h1{font-size:29px}.shell{padding-inline:12px}}

.itemimg{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;margin-bottom:10px;background:#090b0e;border:1px solid var(--line)}
input[type="file"]{padding:10px}
button:disabled{opacity:.55;cursor:not-allowed}

.linkbtn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.checkrow{display:flex;align-items:center;gap:8px;margin:4px 0 14px;color:#c6ccd3}
.checkrow input{width:auto;margin:0}
.contact-number{margin:10px 0 18px;direction:ltr;text-align:right}

.demo-section{margin-top:24px}
.section-head{display:flex;justify-content:space-between;align-items:end;margin:0 0 10px}
.section-head h2{margin-bottom:4px}
.demo-swap{position:relative;overflow:hidden}
.demo-visual{height:128px;border-radius:14px;background:linear-gradient(135deg,#171c23,#0d1116);display:grid;place-items:center;font-size:54px;margin-bottom:12px;border:1px solid var(--line)}
.demo-badges{align-items:center;margin-bottom:8px}
.demo-label{font-size:11px;color:var(--muted);border:1px dashed #4a5360;padding:5px 8px;border-radius:999px}
.demo-swap p{margin:6px 0 0}

.nav-match{position:relative}
.match-badge{position:absolute;top:2px;right:18%;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--danger);color:white;font-size:10px;font-weight:900;display:grid;place-items:center;border:2px solid #0b0e12}
.match-badge.hidden{display:none}
.match-alert{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:#b7ff4a10;border:1px solid #b7ff4a55;border-radius:18px;padding:14px 15px;margin:12px 0;cursor:pointer}
.match-alert-icon{font-size:25px}
.match-alert strong{display:block;font-size:15px}
.match-alert p{margin:3px 0 0;font-size:13px;line-height:1.45}
.match-alert-arrow{font-size:20px;color:var(--accent)}
.match-title-row{align-items:center;margin-bottom:8px}
.new-match{font-size:11px;font-weight:900;background:var(--danger);color:white;padding:5px 8px;border-radius:999px}

.lang-select{width:auto;min-width:92px;margin:0;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:9px 10px;font-weight:800}
.top-actions{align-items:center;flex-wrap:nowrap}
html[dir="ltr"] .match{border-right:1px solid var(--line);border-left:4px solid var(--accent)}
html[dir="ltr"] .contact-number{text-align:left}


/* LOOP visual refresh — richer desktop background + glass depth */
:root{
  --bg:#071018;
  --panel:rgba(16,24,35,.82);
  --panel2:rgba(11,18,27,.86);
  --line:rgba(255,255,255,.09);
  --text:#f7f9fb;
  --muted:#a9b5c3;
}

html{
  min-height:100%;
  background:#071018;
}

body{
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 14% 12%, rgba(183,255,74,.13), transparent 27%),
    radial-gradient(circle at 86% 18%, rgba(53,194,255,.10), transparent 24%),
    radial-gradient(circle at 68% 78%, rgba(110,91,255,.07), transparent 26%),
    linear-gradient(155deg,#071018 0%,#0a111a 42%,#05090e 100%);
  background-attachment:fixed;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.22;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:radial-gradient(circle at 50% 32%,#000 22%,transparent 78%);
  mask-image:radial-gradient(circle at 50% 32%,#000 22%,transparent 78%);
}

body::after{
  content:"";
  position:fixed;
  width:620px;
  height:620px;
  left:50%;
  top:-310px;
  transform:translateX(-50%);
  pointer-events:none;
  z-index:0;
  border-radius:50%;
  background:radial-gradient(circle,rgba(183,255,74,.10),rgba(65,191,255,.035) 38%,transparent 70%);
  filter:blur(22px);
}

.shell{
  max-width:980px;
  margin:auto;
  padding:18px 20px 115px;
  position:relative;
  z-index:1;
}

.topbar{
  margin-bottom:10px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  background:rgba(8,14,21,.72);
  box-shadow:0 12px 36px rgba(0,0,0,.20);
  backdrop-filter:blur(18px);
}

.mark{
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 10px 30px rgba(183,255,74,.16);
}

.hero,.card{
  background:
    linear-gradient(180deg,rgba(21,31,44,.90),rgba(12,19,28,.90));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:
    0 18px 50px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(12px);
}

.hero{
  position:relative;
  overflow:hidden;
  padding:30px;
  background:
    radial-gradient(circle at 8% 2%,rgba(183,255,74,.20),transparent 32%),
    radial-gradient(circle at 88% 18%,rgba(75,197,255,.08),transparent 28%),
    linear-gradient(180deg,rgba(23,35,49,.94),rgba(13,21,31,.92));
}

.hero::after{
  content:"";
  position:absolute;
  width:240px;
  height:240px;
  inset:auto -70px -110px auto;
  border-radius:50%;
  background:radial-gradient(circle,rgba(183,255,74,.10),transparent 67%);
  pointer-events:none;
}

.item{
  background:linear-gradient(180deg,rgba(15,23,34,.94),rgba(9,15,23,.94));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.16);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.item:hover{
  transform:translateY(-2px);
  border-color:rgba(183,255,74,.22);
  box-shadow:0 16px 38px rgba(0,0,0,.23);
}

.itemimg{
  border-color:rgba(255,255,255,.09);
  box-shadow:0 8px 22px rgba(0,0,0,.20);
}

.btn{
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}

.btn:hover{
  transform:translateY(-1px);
}

.primary{
  box-shadow:0 10px 24px rgba(183,255,74,.17);
}

.secondary{
  background:rgba(35,45,58,.78);
}

.demo-visual{
  background:
    radial-gradient(circle at 28% 18%,rgba(183,255,74,.09),transparent 35%),
    linear-gradient(145deg,#17222f,#0b1119);
}

.match-alert{
  box-shadow:0 12px 34px rgba(0,0,0,.16);
  backdrop-filter:blur(10px);
}

.bottom{
  width:min(680px,calc(100% - 24px));
  left:50%;
  right:auto;
  transform:translateX(-50%);
  bottom:12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  background:rgba(8,14,21,.86);
  box-shadow:0 18px 55px rgba(0,0,0,.35);
  backdrop-filter:blur(18px);
  padding:8px;
}

.bottom button{
  width:min(120px,18vw);
}

@media(min-width:900px){
  .grid{gap:16px}
  h1{font-size:38px}
  .hero,.card{border-radius:26px}
}

@media(max-width:560px){
  .shell{padding:12px 12px 105px}
  .topbar{margin-inline:0;padding:8px 9px;border-radius:16px}
  .hero{padding:22px}
  .bottom{width:calc(100% - 16px);bottom:8px}
  body::before{opacity:.14}
}


/* Center owner status pill inside action row */
.item .row > .pill{
  align-self:center;
  align-items:center;
  justify-content:center;
  min-height:42px;
  line-height:1;
  padding:0 14px;
}


/* LOOP 2.0 — premium dark marketplace */
:root{
  --bg:#050708;
  --bg-soft:#090d10;
  --surface:#10151a;
  --surface-2:#0c1116;
  --surface-3:#131a21;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(183,255,74,.22);
  --text:#f6f8f4;
  --muted:#94a09a;
  --accent:#b7ff4a;
  --accent-2:#d4ff8d;
  --danger:#ff6d6d;
  --radius:24px;
  --shadow:0 20px 60px rgba(0,0,0,.34);
  --shadow-soft:0 12px 32px rgba(0,0,0,.22);
}

html,body{
  background:var(--bg);
  color:var(--text);
  font-family:"Alexandria",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
}

html[lang="en"] body{
  font-family:"Space Grotesk","Alexandria",system-ui,sans-serif;
}

body{
  position:relative;
  min-height:100vh;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 18% 8%, rgba(183,255,74,.12), transparent 24%),
    radial-gradient(circle at 82% 14%, rgba(183,255,74,.055), transparent 22%),
    linear-gradient(180deg,#070a0d 0%,#050708 48%,#07090b 100%);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.015) 1px, transparent 1px);
  background-size:54px 54px;
  opacity:.85;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.55) 38%,transparent 88%);
  mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.55) 38%,transparent 88%);
}

body::after{
  content:"";
  position:fixed;
  width:840px;
  height:840px;
  left:50%;
  top:-580px;
  transform:translateX(-50%);
  pointer-events:none;
  z-index:0;
  border-radius:50%;
  background:radial-gradient(circle,rgba(183,255,74,.11) 0%,rgba(183,255,74,.025) 36%,transparent 70%);
  filter:blur(20px);
}

.shell{
  width:min(1080px,calc(100% - 32px));
  max-width:none;
  margin:0 auto;
  padding:18px 0 122px;
  position:relative;
  z-index:1;
}

.topbar{
  position:sticky;
  top:14px;
  z-index:20;
  margin-bottom:18px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:20px;
  background:rgba(8,11,14,.76);
  box-shadow:0 16px 50px rgba(0,0,0,.32);
  backdrop-filter:blur(22px) saturate(120%);
}

.brand{gap:12px}
.brand strong{
  font-family:"Space Grotesk","Alexandria",sans-serif;
  font-size:18px;
  letter-spacing:.08em;
}
.brand small{
  color:#9da89f;
  font-size:11px;
  font-weight:600;
  letter-spacing:.01em;
}

.mark{
  width:46px;
  height:46px;
  border-radius:15px;
  background:linear-gradient(145deg,var(--accent-2),var(--accent));
  color:#070a08;
  box-shadow:
    0 10px 26px rgba(183,255,74,.18),
    inset 0 1px 0 rgba(255,255,255,.5);
}

.lang-select,.icon{
  background:rgba(17,23,29,.88);
  border:1px solid rgba(255,255,255,.08);
}
.lang-select{
  color:#eef2ed;
  min-width:96px;
  border-radius:13px;
  padding:10px 12px;
}
.icon{border-radius:13px}

.hero,.card{
  border:1px solid rgba(255,255,255,.075);
  background:
    linear-gradient(180deg,rgba(18,24,30,.96),rgba(10,14,18,.96));
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(14px);
}

.hero{
  min-height:275px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  overflow:hidden;
  padding:34px 34px 32px;
  border-radius:30px;
  background:
    radial-gradient(circle at 12% 6%,rgba(183,255,74,.18),transparent 34%),
    linear-gradient(180deg,rgba(20,27,33,.98),rgba(10,14,18,.98));
  box-shadow:var(--shadow);
}

.hero::before{
  content:"";
  position:absolute;
  width:290px;
  height:290px;
  right:-105px;
  top:-105px;
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(183,255,74,.14),rgba(183,255,74,.025) 46%,transparent 71%);
  filter:blur(4px);
  pointer-events:none;
}
html[dir="ltr"] .hero::before{
  right:auto;
  left:-105px;
}

.hero::after{
  content:"LOOP";
  position:absolute;
  inset:auto 18px -28px auto;
  font-family:"Space Grotesk",sans-serif;
  font-size:118px;
  font-weight:700;
  line-height:1;
  letter-spacing:-.06em;
  color:rgba(255,255,255,.018);
  pointer-events:none;
  user-select:none;
}
html[dir="ltr"] .hero::after{
  right:auto;
  left:18px;
}

.hero h1{
  font-size:clamp(34px,5vw,56px);
  letter-spacing:-.035em;
  margin:12px 0 14px;
  max-width:760px;
}
.hero p{
  font-size:15px;
  max-width:660px;
  margin:0 0 22px;
}
.hero .pill{
  width:max-content;
  border:1px solid rgba(183,255,74,.18);
  background:rgba(183,255,74,.07);
}

h1,h2,h3{
  text-wrap:balance;
}
h2{
  font-size:clamp(23px,2.6vw,31px);
  letter-spacing:-.02em;
}

.grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.item{
  position:relative;
  border-radius:22px;
  padding:16px;
  background:
    linear-gradient(180deg,rgba(15,20,25,.98),rgba(9,13,17,.98));
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 12px 32px rgba(0,0,0,.18);
  overflow:hidden;
}
.item::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(120deg,transparent 20%,rgba(183,255,74,.04),transparent 75%);
  transition:opacity .25s ease;
}
.item:hover::after{opacity:1}
.item:hover{
  transform:translateY(-3px);
  border-color:rgba(183,255,74,.22);
  box-shadow:0 20px 44px rgba(0,0,0,.26);
}
.item h3{
  font-size:20px;
  margin-top:2px;
}
.itemimg{
  aspect-ratio:16/10;
  border-radius:16px;
  margin-bottom:14px;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:none;
}

.pill{
  border:1px solid rgba(183,255,74,.13);
  background:rgba(183,255,74,.075);
  color:var(--accent);
  letter-spacing:.02em;
}

.btn{
  border-radius:14px;
  padding:12px 16px;
  transition:
    transform .18s cubic-bezier(.2,.8,.2,1),
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}
.primary{
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  color:#081008;
  box-shadow:0 9px 24px rgba(183,255,74,.16);
}
.primary:hover{
  box-shadow:0 12px 30px rgba(183,255,74,.24);
}
.secondary{
  background:rgba(29,36,44,.9);
  border-color:rgba(255,255,255,.08);
}
.secondary:hover{border-color:rgba(183,255,74,.18)}

input,select,textarea{
  background:rgba(7,11,14,.88);
  border:1px solid rgba(255,255,255,.085);
  border-radius:14px;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(183,255,74,.5);
  box-shadow:0 0 0 3px rgba(183,255,74,.075);
  background:#090e12;
}

.demo-section{margin-top:34px}
.section-head{margin-bottom:13px}
.demo-visual{
  height:150px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(circle at 25% 18%,rgba(183,255,74,.10),transparent 38%),
    linear-gradient(145deg,#151c22,#0a0f13);
}

.match-alert{
  margin:16px 0 18px;
  border-radius:18px;
  background:
    linear-gradient(180deg,rgba(183,255,74,.085),rgba(183,255,74,.04));
  border:1px solid rgba(183,255,74,.2);
}

.bottom{
  width:min(700px,calc(100% - 24px));
  left:50%;
  right:auto;
  transform:translateX(-50%);
  bottom:12px;
  border-radius:22px;
  padding:8px;
  border:1px solid rgba(255,255,255,.075);
  background:rgba(8,11,14,.88);
  box-shadow:0 20px 60px rgba(0,0,0,.42);
  backdrop-filter:blur(22px);
}
.bottom button{
  width:min(125px,18vw);
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.bottom button:hover{transform:translateY(-1px)}
.bottom button.active{
  background:rgba(183,255,74,.075);
}
.bottom .addnav{
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  box-shadow:0 10px 24px rgba(183,255,74,.16);
}

/* entrance motion */
@keyframes loopFadeUp{
  from{opacity:0;transform:translateY(18px) scale(.992)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes loopFadeIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes loopGlow{
  0%,100%{box-shadow:0 0 0 rgba(183,255,74,0)}
  50%{box-shadow:0 0 30px rgba(183,255,74,.07)}
}

#app > *{
  animation:loopFadeUp .55s cubic-bezier(.2,.75,.25,1) both;
}
#app > *:nth-child(2){animation-delay:.055s}
#app > *:nth-child(3){animation-delay:.10s}
#app > *:nth-child(4){animation-delay:.145s}
#app > *:nth-child(5){animation-delay:.19s}
#app .grid > *{
  animation:loopFadeUp .48s cubic-bezier(.2,.75,.25,1) both;
}
#app .grid > *:nth-child(2){animation-delay:.045s}
#app .grid > *:nth-child(3){animation-delay:.09s}
#app .grid > *:nth-child(4){animation-delay:.135s}
#app .grid > *:nth-child(5){animation-delay:.18s}
#app .grid > *:nth-child(6){animation-delay:.225s}
#app .grid > *:nth-child(7){animation-delay:.27s}
#app .grid > *:nth-child(8){animation-delay:.315s}

.topbar{
  animation:loopFadeIn .42s ease both;
}
.mark{
  animation:loopGlow 4.6s ease-in-out infinite;
}

@media(max-width:760px){
  .shell{width:min(100% - 20px,1080px);padding-top:10px}
  .topbar{top:8px}
  .hero{min-height:240px;padding:26px 22px}
  .hero::after{font-size:82px;bottom:-18px}
  .grid{grid-template-columns:1fr}
  .demo-visual{height:132px}
}

@media(max-width:520px){
  .brand strong{font-size:16px}
  .brand small{font-size:10px}
  .mark{width:42px;height:42px}
  .lang-select{min-width:84px;padding:9px 8px}
  .top-actions{gap:6px}
  .top-actions .pill{display:none}
  .hero h1{font-size:34px}
  .bottom{bottom:8px;width:calc(100% - 14px)}
}

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


/* LOOP 2.1 — lighter Arabic typography + more visible entrance motion */
html[lang="ar"] body{
  font-family:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  font-weight:400;
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3{
  font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;
  font-weight:600;
  letter-spacing:0;
}

html[lang="ar"] .hero h1{
  font-size:clamp(31px,4.2vw,47px);
  line-height:1.24;
  font-weight:600;
  max-width:820px;
  margin:15px 0 14px;
}

html[lang="ar"] .hero p{
  font-size:15px;
  line-height:1.9;
  font-weight:400;
}

html[lang="ar"] .btn{
  font-weight:600;
}

html[lang="ar"] .pill{
  font-weight:600;
}

html[lang="ar"] .item h3{
  font-weight:600;
}

.hero > .pill{
  position:relative;
  z-index:3;
  margin-bottom:2px;
}

.hero h1,
.hero p,
.hero .row{
  position:relative;
  z-index:2;
}

/* Stronger, staged page entrance */
@keyframes loopBrandIn{
  0%{opacity:0;transform:translateY(-12px) scale(.96);filter:blur(7px)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
@keyframes loopHeroIn{
  0%{opacity:0;transform:translateY(26px) scale(.985);filter:blur(8px)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
@keyframes loopPieceIn{
  0%{opacity:0;transform:translateY(20px);filter:blur(5px)}
  100%{opacity:1;transform:translateY(0);filter:blur(0)}
}
@keyframes loopCardIn{
  0%{opacity:0;transform:translateY(24px) scale(.97)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

.topbar .brand{
  animation:loopBrandIn .72s cubic-bezier(.16,1,.3,1) both;
}
.top-actions{
  animation:loopBrandIn .72s .10s cubic-bezier(.16,1,.3,1) both;
}

#app > .hero{
  animation:loopHeroIn .82s .06s cubic-bezier(.16,1,.3,1) both;
}

#app > .hero > .pill{
  animation:loopPieceIn .58s .22s cubic-bezier(.16,1,.3,1) both;
}
#app > .hero > h1{
  animation:loopPieceIn .68s .31s cubic-bezier(.16,1,.3,1) both;
}
#app > .hero > p{
  animation:loopPieceIn .68s .40s cubic-bezier(.16,1,.3,1) both;
}
#app > .hero > .row{
  animation:loopPieceIn .68s .49s cubic-bezier(.16,1,.3,1) both;
}

#app > h2{
  animation:loopPieceIn .60s .43s cubic-bezier(.16,1,.3,1) both;
}

#app > .grid > .item{
  animation:loopCardIn .68s cubic-bezier(.16,1,.3,1) both;
}
#app > .grid > .item:nth-child(1){animation-delay:.52s}
#app > .grid > .item:nth-child(2){animation-delay:.60s}
#app > .grid > .item:nth-child(3){animation-delay:.68s}
#app > .grid > .item:nth-child(4){animation-delay:.76s}
#app > .grid > .item:nth-child(5){animation-delay:.84s}
#app > .grid > .item:nth-child(6){animation-delay:.92s}

.demo-section{
  animation:loopPieceIn .72s .72s cubic-bezier(.16,1,.3,1) both;
}

.demo-section .grid > .item{
  animation:loopCardIn .65s cubic-bezier(.16,1,.3,1) both;
}
.demo-section .grid > .item:nth-child(1){animation-delay:.82s}
.demo-section .grid > .item:nth-child(2){animation-delay:.89s}
.demo-section .grid > .item:nth-child(3){animation-delay:.96s}
.demo-section .grid > .item:nth-child(4){animation-delay:1.03s}
.demo-section .grid > .item:nth-child(5){animation-delay:1.10s}
.demo-section .grid > .item:nth-child(6){animation-delay:1.17s}
.demo-section .grid > .item:nth-child(7){animation-delay:1.24s}
.demo-section .grid > .item:nth-child(8){animation-delay:1.31s}

/* Prevent older generic animation rules from competing with the staged hero */
#app > .hero > *{
  will-change:transform,opacity,filter;
}

@media(max-width:760px){
  html[lang="ar"] .hero h1{
    font-size:clamp(30px,8vw,39px);
    line-height:1.28;
  }
}

@media(max-width:520px){
  html[lang="ar"] .hero h1{
    font-size:31px;
  }
}


/* LOOP 2.2 — performance motion pass: transform + opacity only */
@keyframes loopBrandInSmooth{
  from{opacity:0;transform:translate3d(0,-8px,0) scale(.985)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes loopHeroInSmooth{
  from{opacity:0;transform:translate3d(0,18px,0) scale(.992)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes loopPieceInSmooth{
  from{opacity:0;transform:translate3d(0,12px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes loopCardInSmooth{
  from{opacity:0;transform:translate3d(0,14px,0) scale(.992)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

.topbar .brand{
  animation:loopBrandInSmooth .46s cubic-bezier(.22,.61,.36,1) both;
}
.top-actions{
  animation:loopBrandInSmooth .46s .05s cubic-bezier(.22,.61,.36,1) both;
}

#app > .hero{
  animation:loopHeroInSmooth .56s .03s cubic-bezier(.22,.61,.36,1) both;
}
#app > .hero > .pill{
  animation:loopPieceInSmooth .38s .12s cubic-bezier(.22,.61,.36,1) both;
}
#app > .hero > h1{
  animation:loopPieceInSmooth .42s .17s cubic-bezier(.22,.61,.36,1) both;
}
#app > .hero > p{
  animation:loopPieceInSmooth .42s .22s cubic-bezier(.22,.61,.36,1) both;
}
#app > .hero > .row{
  animation:loopPieceInSmooth .42s .27s cubic-bezier(.22,.61,.36,1) both;
}

#app > h2{
  animation:loopPieceInSmooth .40s .24s cubic-bezier(.22,.61,.36,1) both;
}

#app > .grid > .item{
  animation:loopCardInSmooth .44s cubic-bezier(.22,.61,.36,1) both;
}
#app > .grid > .item:nth-child(1){animation-delay:.30s}
#app > .grid > .item:nth-child(2){animation-delay:.35s}
#app > .grid > .item:nth-child(3){animation-delay:.40s}
#app > .grid > .item:nth-child(4){animation-delay:.45s}
#app > .grid > .item:nth-child(5){animation-delay:.50s}
#app > .grid > .item:nth-child(6){animation-delay:.55s}

.demo-section{
  animation:loopPieceInSmooth .46s .42s cubic-bezier(.22,.61,.36,1) both;
}
.demo-section .grid > .item{
  animation:loopCardInSmooth .42s cubic-bezier(.22,.61,.36,1) both;
}
.demo-section .grid > .item:nth-child(1){animation-delay:.48s}
.demo-section .grid > .item:nth-child(2){animation-delay:.52s}
.demo-section .grid > .item:nth-child(3){animation-delay:.56s}
.demo-section .grid > .item:nth-child(4){animation-delay:.60s}
.demo-section .grid > .item:nth-child(5){animation-delay:.64s}
.demo-section .grid > .item:nth-child(6){animation-delay:.68s}
.demo-section .grid > .item:nth-child(7){animation-delay:.72s}
.demo-section .grid > .item:nth-child(8){animation-delay:.76s}

/* Avoid expensive animated blur/filter work */
#app > .hero > *,
.topbar .brand,
.top-actions,
#app > .grid > .item,
.demo-section,
.demo-section .grid > .item{
  filter:none !important;
  will-change:transform,opacity;
  backface-visibility:hidden;
  transform-style:preserve-3d;
}

/* Reduce expensive fixed-paint work on smaller screens */
@media(max-width:760px){
  body{background-attachment:scroll}
  .hero,.card,.topbar,.bottom{backdrop-filter:blur(10px)}
}

@media(max-width:520px){
  .hero,.card{backdrop-filter:none}
}


/* LOOP Admin */
.admin-hero{min-height:220px}
.admin-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:16px 0;
}
.admin-stat{
  min-height:118px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:20px;
  padding:18px;
  background:linear-gradient(180deg,rgba(16,22,27,.98),rgba(9,13,16,.98));
  box-shadow:var(--shadow-soft);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.admin-stat strong{
  font-family:"Space Grotesk","IBM Plex Sans Arabic",sans-serif;
  font-size:38px;
  line-height:1;
  color:var(--accent);
}
.admin-stat span{color:var(--muted);font-size:13px}
.admin-list{display:grid;gap:10px}
.admin-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.065);
}
.admin-row:last-child{border-bottom:0}
.admin-row strong{display:block;margin-bottom:5px}
.admin-actions{align-items:center;justify-content:flex-end}
#adminNavBtn:not(.hidden){display:block}
@media(max-width:700px){
  .admin-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin-row{align-items:flex-start;flex-direction:column}
  .admin-actions{width:100%;justify-content:flex-start}
}


/* LOOP 2.3 — global-marketplace polish */
.marketplace-hero{
  min-height:300px;
  padding-top:38px;
}
.hero-eyebrow{
  display:block;
  color:var(--muted);
  font-size:13px;
  font-weight:500;
  margin-bottom:8px;
}
.marketplace-hero h1{
  max-width:760px;
}
.trust-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:14px 0 26px;
}
.trust-point{
  display:flex;
  align-items:center;
  gap:11px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(15,20,25,.88),rgba(9,13,16,.88));
  box-shadow:0 10px 28px rgba(0,0,0,.15);
}
.trust-point>span{
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:11px;
  display:grid;
  place-items:center;
  color:var(--accent);
  background:rgba(183,255,74,.07);
  border:1px solid rgba(183,255,74,.12);
  font-size:18px;
  font-weight:700;
}
.trust-point strong{
  display:block;
  font-size:13px;
  margin-bottom:2px;
}
.trust-point small{
  display:block;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}

.discovery{margin-top:8px}
.discovery-head{
  align-items:center;
  gap:16px;
}
.search-box{
  width:min(360px,100%);
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 12px;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(9,13,17,.86);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.search-box:focus-within{
  border-color:rgba(183,255,74,.4);
  box-shadow:0 0 0 3px rgba(183,255,74,.06);
}
.search-box>span{color:var(--accent);font-size:18px}
.search-box input{
  margin:0;
  padding:12px 0;
  border:0;
  background:transparent;
  box-shadow:none!important;
}
.category-chips{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:2px 0 14px;
  scrollbar-width:none;
}
.category-chips::-webkit-scrollbar{display:none}
.category-chip{
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.075);
  background:rgba(12,17,21,.92);
  color:var(--muted);
  border-radius:999px;
  padding:9px 13px;
  font:inherit;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:all .18s ease;
}
.category-chip:hover{
  color:var(--text);
  border-color:rgba(183,255,74,.18);
}
.category-chip.active{
  color:#081008;
  background:var(--accent);
  border-color:var(--accent);
}

.marketplace-item{
  padding:14px;
}
.item-media{
  position:relative;
  margin-bottom:12px;
}
.marketplace-item .itemimg{
  width:100%;
  margin:0;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:16px;
}
.item-placeholder{
  aspect-ratio:1/1;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-family:"Space Grotesk",sans-serif;
  font-size:28px;
  font-weight:700;
  letter-spacing:.08em;
  color:rgba(255,255,255,.18);
  background:
    radial-gradient(circle at 30% 20%,rgba(183,255,74,.09),transparent 35%),
    linear-gradient(145deg,#151b20,#0a0e12);
  border:1px solid rgba(255,255,255,.06);
}
.item-condition{
  position:absolute;
  inset:10px 10px auto auto;
  z-index:2;
  background:rgba(5,8,10,.78);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  color:#eef4ea;
  border-radius:999px;
  padding:6px 9px;
  font-size:10px;
  font-weight:600;
}
html[dir="rtl"] .item-condition{
  right:auto;
  left:10px;
}
.item-kicker{
  color:var(--accent);
  font-size:11px;
  font-weight:600;
  margin-bottom:4px;
}
.marketplace-item h3{
  font-size:18px;
  margin-bottom:6px;
}
.marketplace-item p{
  margin:8px 0 13px;
  font-size:13px;
}
.empty-results{
  grid-column:1/-1;
  text-align:center;
  padding:34px;
}

@media(min-width:900px){
  #itemsGrid.grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:760px){
  .trust-strip{grid-template-columns:1fr}
  .discovery-head{align-items:stretch;flex-direction:column}
  .search-box{width:100%}
  .marketplace-hero{min-height:270px}
}


/* Favorites + social auth */
.favorite-top{position:relative;font-size:22px;line-height:1}
.favorite-count{
  position:absolute;
  top:-5px;
  right:-5px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:var(--accent);
  color:#071008;
  font-size:10px;
  font-weight:800;
  border:2px solid #0a0d10;
}
.favorite-btn{
  position:absolute;
  top:10px;
  left:10px;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(5,8,10,.72);
  color:#fff;
  backdrop-filter:blur(10px);
  display:grid;
  place-items:center;
  font-size:20px;
  cursor:pointer;
  transition:transform .18s ease,background .18s ease,color .18s ease;
}
html[dir="ltr"] .favorite-btn{left:auto;right:10px}
.favorite-btn:hover{transform:scale(1.06)}
.favorite-btn.active{
  color:var(--accent);
  background:rgba(183,255,74,.10);
  border-color:rgba(183,255,74,.3);
}
.compact-hero{min-height:190px}
.favorites-grid{margin-top:14px}
.auth-polished{max-width:620px;margin-inline:auto}
.social-auth{display:grid;gap:10px;margin:8px 0 16px}
.social-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.09);
  font:inherit;
  font-weight:600;
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.social-btn:hover{transform:translateY(-1px)}
.social-btn span{
  width:24px;
  height:24px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-family:"Space Grotesk",sans-serif;
  font-weight:700;
}
.social-btn.google{
  background:#f7f7f7;
  color:#161616;
}
.social-btn.google span{
  background:#fff;
  border:1px solid #ddd;
}
.social-btn.facebook{
  background:#1877f2;
  color:white;
  border-color:#1877f2;
}
.social-btn.facebook .facebook-icon{
  background:#fff;
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.social-btn.facebook .facebook-icon svg{
  width:18px;
  height:18px;
  display:block;
}
.auth-divider{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
  margin:14px 0;
  font-size:12px;
}
.auth-divider::before,.auth-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:rgba(255,255,255,.08);
}


/* Item details + gallery */
.item-open,.item-title-link{cursor:pointer}
.item-title-link:hover{color:var(--accent)}
.item-detail{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);
  gap:18px;
  align-items:start;
}
.detail-gallery{
  min-width:0;
}
.detail-main-wrap{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  background:#0b0f13;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow);
}
.detail-main-image{
  width:100%;
  aspect-ratio:4/3;
  object-fit:contain;
  background:#050708;
  display:block;
  cursor:zoom-in;
}
.gallery-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(4,7,9,.72);
  color:#fff;
  font-size:30px;
  display:grid;
  place-items:center;
  cursor:pointer;
  backdrop-filter:blur(10px);
}
.gallery-prev{left:14px}
.gallery-next{right:14px}
html[dir="rtl"] .gallery-prev{left:auto;right:14px}
html[dir="rtl"] .gallery-next{right:auto;left:14px}
.gallery-count{
  position:absolute;
  bottom:12px;
  left:50%;
  transform:translateX(-50%);
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  background:rgba(4,7,9,.72);
  border:1px solid rgba(255,255,255,.09);
  color:#fff;
}
.detail-thumbs{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:10px 2px 2px;
  scrollbar-width:none;
}
.detail-thumbs::-webkit-scrollbar{display:none}
.thumb-btn{
  flex:0 0 74px;
  width:74px;
  height:74px;
  padding:0;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:#0a0e12;
  cursor:pointer;
}
.thumb-btn.active{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(183,255,74,.12);
}
.thumb-btn img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.detail-empty-image{
  aspect-ratio:4/3;
  border-radius:24px;
  display:grid;
  place-items:center;
  font-family:"Space Grotesk",sans-serif;
  font-size:56px;
  font-weight:700;
  color:rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 25% 20%,rgba(183,255,74,.10),transparent 35%),
    #0a0e12;
  border:1px solid rgba(255,255,255,.08);
}
.detail-info{
  position:sticky;
  top:96px;
  border-radius:24px;
}
.detail-info h1{
  font-size:clamp(30px,4vw,46px);
  margin:14px 0 18px;
}
.detail-topline{
  justify-content:space-between;
  align-items:center;
}
.detail-favorite{
  position:static;
  width:42px;
  height:42px;
}
.detail-facts{
  display:grid;
  gap:10px;
  margin:14px 0;
}
.detail-facts>div{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.065);
}
.detail-facts span{
  color:var(--muted);
  font-size:12px;
}
.detail-facts strong{
  text-align:end;
  font-size:13px;
}
.detail-description{
  margin-top:18px;
}
.detail-description h3{
  margin-bottom:8px;
}
.detail-description p{
  line-height:1.9;
}
.detail-actions{
  margin-top:20px;
}
.lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(0,0,0,.94);
  display:grid;
  place-items:center;
  padding:24px;
}
.lightbox-image{
  max-width:min(92vw,1400px);
  max-height:86vh;
  object-fit:contain;
}
.lightbox-close,
.lightbox-arrow{
  position:fixed;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(20,20,20,.72);
  color:#fff;
  backdrop-filter:blur(12px);
  cursor:pointer;
}
.lightbox-close{
  top:18px;
  right:18px;
  width:44px;
  height:44px;
  border-radius:50%;
  font-size:28px;
}
.lightbox-prev,.lightbox-next{
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  border-radius:50%;
  font-size:34px;
}
.lightbox-prev{left:18px}
.lightbox-next{right:18px}
.lightbox-counter{
  position:fixed;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(20,20,20,.72);
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  padding:7px 12px;
  font-size:12px;
}
@media(max-width:860px){
  .item-detail{grid-template-columns:1fr}
  .detail-info{position:static}
}
@media(max-width:560px){
  .gallery-arrow{width:38px;height:38px;font-size:26px}
  .thumb-btn{flex-basis:62px;width:62px;height:62px}
  .detail-main-image{aspect-ratio:1/1}
  .lightbox{padding:10px}
}


/* Back navigation */
.top-back{
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(15,20,25,.88);
  color:var(--text);
  display:grid;
  place-items:center;
  font-size:30px;
  line-height:1;
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.top-back:hover{
  transform:translateY(-1px);
  border-color:rgba(183,255,74,.2);
  background:rgba(20,27,33,.94);
}
html[dir="rtl"] .top-back{transform:scaleX(-1)}
html[dir="rtl"] .top-back:hover{transform:scaleX(-1) translateY(-1px)}

/* Listing photo editor */
.edit-photo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
  gap:10px;
  margin:8px 0 12px;
}
.edit-photo{
  position:relative;
  aspect-ratio:1/1;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:#0a0e12;
  transition:opacity .18s ease,transform .18s ease,border-color .18s ease;
}
.edit-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.edit-photo-remove{
  position:absolute;
  top:7px;
  right:7px;
  width:30px;
  height:30px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.72);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:20px;
  cursor:pointer;
  backdrop-filter:blur(8px);
}
.edit-photo.removed{
  opacity:.32;
  border-color:rgba(255,109,109,.35);
}
.edit-photo.removed::after{
  content:"سيتم حذفها";
  position:absolute;
  inset:auto 8px 8px 8px;
  padding:5px 7px;
  border-radius:9px;
  background:rgba(90,14,14,.78);
  color:#ffd9d9;
  font-size:10px;
  text-align:center;
}
@media(max-width:560px){
  .top-back{width:40px;height:40px;flex-basis:40px}
  .edit-photo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}


/* ===== LOOP neon visual pass / performance-safe motion ===== */
.brand{
  min-width:148px;
  display:flex;
  align-items:center;
}
.brand-logo{
  width:156px;
  height:62px;
  background:url('./loop-logo.svg') center/contain no-repeat;
  filter:drop-shadow(0 0 10px rgba(183,255,74,.16));
}
@media(max-width:560px){
  .brand{min-width:118px}
  .brand-logo{width:122px;height:52px}
}

/* Remove expensive global visual effects that caused mobile jank */
body{
  background-attachment:scroll !important;
}
body::after{
  display:none !important;
}
.hero,.card,.topbar,.bottom,.match-alert{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.hero::before{
  filter:none !important;
}

/* Kill old broad animations and keep only lightweight hero entrance */
#app > *,
#app .grid > *,
.topbar,
.mark{
  animation:none !important;
}

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

.marketplace-hero{
  min-height:360px;
  padding:36px;
  display:flex;
  align-items:center;
  isolation:isolate;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(5,8,9,.95) 0%,rgba(5,8,9,.72) 52%,rgba(5,8,9,.60) 100%),
    url('./loop-hero-bg.svg') center/cover no-repeat,
    #080b0c !important;
  border-color:rgba(183,255,74,.13);
  box-shadow:
    0 18px 50px rgba(0,0,0,.30),
    inset 0 0 0 1px rgba(255,255,255,.02);
}
html[dir="ltr"] .marketplace-hero{
  background:
    linear-gradient(270deg,rgba(5,8,9,.95) 0%,rgba(5,8,9,.72) 52%,rgba(5,8,9,.60) 100%),
    url('./loop-hero-bg.svg') center/cover no-repeat,
    #080b0c !important;
}
.marketplace-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 78% 50%,rgba(183,255,74,.07),transparent 28%),
    linear-gradient(180deg,transparent 58%,rgba(0,0,0,.24));
  z-index:-1;
}
.marketplace-hero .hero-content{
  width:min(570px,100%);
  position:relative;
  z-index:1;
}
.hero-brandmark{
  width:230px;
  height:96px;
  background:url('./loop-logo.svg') center/contain no-repeat;
  margin:0 0 8px auto;
  filter:drop-shadow(0 0 14px rgba(183,255,74,.18));
  opacity:.98;
}
html[dir="ltr"] .hero-brandmark{
  margin-left:0;
  margin-right:auto;
}
.marketplace-hero .hero-eyebrow,
.marketplace-hero h1,
.marketplace-hero p,
.marketplace-hero .hero-actions{
  opacity:0;
  animation:loopSoftEnter .34s ease-out forwards !important;
}
.marketplace-hero h1{animation-delay:.05s !important}
.marketplace-hero p{animation-delay:.09s !important}
.marketplace-hero .hero-actions{animation-delay:.13s !important}
.marketplace-hero h1{
  max-width:590px;
  text-shadow:0 3px 18px rgba(0,0,0,.45);
}
.marketplace-hero p{
  color:#c3cbc4;
}
.hero-actions{
  gap:10px;
}
.hero-actions .primary{
  min-width:150px;
}

/* richer imagery feel without visual clutter */
.discovery{
  position:relative;
}
.discovery::before{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  left:-70px;
  top:80px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(183,255,74,.07),transparent 68%);
  pointer-events:none;
}
.marketplace-item{
  background:
    radial-gradient(circle at 20% 0%,rgba(183,255,74,.035),transparent 34%),
    linear-gradient(180deg,rgba(15,20,22,.98),rgba(8,12,14,.98));
}
.marketplace-item .itemimg{
  background:#090b0c;
}

/* Keep interactions smooth */
.item,
.btn,
.icon,
.category-chip,
.social-btn,
.top-back{
  transition:
    transform .14s ease,
    border-color .14s ease,
    background .14s ease,
    opacity .14s ease !important;
}
.item:hover{transform:translateY(-2px)}
.btn:hover,.icon:hover,.category-chip:hover,.social-btn:hover,.top-back:hover{
  transform:translateY(-1px)
}
.btn:active,.icon:active,.category-chip:active,.social-btn:active,.top-back:active{
  transform:scale(.985)
}

@media(max-width:760px){
  .marketplace-hero{
    min-height:410px;
    padding:28px 22px 26px;
    background:
      linear-gradient(180deg,rgba(5,8,9,.70) 0%,rgba(5,8,9,.76) 48%,rgba(5,8,9,.96) 100%),
      url('./loop-hero-bg.svg') center/cover no-repeat,
      #080b0c !important;
  }
  html[dir="ltr"] .marketplace-hero{
    background:
      linear-gradient(180deg,rgba(5,8,9,.70) 0%,rgba(5,8,9,.76) 48%,rgba(5,8,9,.96) 100%),
      url('./loop-hero-bg.svg') center/cover no-repeat,
      #080b0c !important;
  }
  .hero-brandmark{
    width:190px;
    height:78px;
    margin-bottom:2px;
  }
  .marketplace-hero h1{
    font-size:clamp(32px,10vw,45px);
    line-height:1.08;
  }
  .marketplace-hero p{
    margin-bottom:18px;
  }
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
  .marketplace-hero .hero-eyebrow,
  .marketplace-hero h1,
  .marketplace-hero p,
  .marketplace-hero .hero-actions{
    opacity:1 !important;
    transform:none !important;
  }
}


/* Live bilingual tagline under the neon logo */
.brand{
  position:relative;
  flex-direction:column;
  gap:0 !important;
  align-items:center;
  justify-content:center;
}
.brand-logo{
  width:156px;
  height:50px;
  background-size:contain;
  background-position:center bottom;
}
.brand-tagline{
  display:block;
  margin-top:-2px;
  color:#f6f8f4 !important;
  font-size:11px !important;
  font-weight:700 !important;
  line-height:1.1;
  letter-spacing:0 !important;
  text-align:center;
  text-shadow:0 0 10px rgba(183,255,74,.18);
  white-space:nowrap;
}
html[lang="en"] .brand-tagline{
  font-family:"Space Grotesk",sans-serif;
  font-size:10px !important;
  letter-spacing:.02em !important;
}
@media(max-width:560px){
  .brand-logo{width:122px;height:42px}
  .brand-tagline{font-size:10px !important}
  html[lang="en"] .brand-tagline{font-size:9px !important}
}


/* ===== RTL mobile fit + single live tagline ===== */
html,body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
body{
  margin:0;
}
.shell,
#app,
main,
.hero,
.card,
.discovery,
.demo-section,
.item-detail{
  min-width:0;
  max-width:100%;
}
img,video,svg{
  max-width:100%;
}

/* Header logo image is wordmark only; tagline is the one live line below it */
.brand-logo{
  background-position:center !important;
}
.brand-tagline{
  margin-top:0 !important;
}

/* Keep RTL content anchored correctly */
html[dir="rtl"] body,
html[dir="rtl"] #app{
  direction:rtl;
  text-align:right;
}
html[dir="rtl"] .shell{
  margin-left:auto;
  margin-right:auto;
}

@media(max-width:760px){
  .shell{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding-left:10px !important;
    padding-right:10px !important;
    padding-bottom:105px !important;
  }

  .topbar{
    width:100%;
    max-width:100%;
    margin-left:0 !important;
    margin-right:0 !important;
    display:grid;
    grid-template-columns:auto minmax(78px,1fr) auto;
    align-items:center;
    gap:6px;
    padding:8px !important;
  }

  .brand{
    min-width:0 !important;
    width:auto !important;
    justify-self:center;
  }
  .brand-logo{
    width:102px !important;
    height:34px !important;
  }
  .brand-tagline{
    font-size:9px !important;
    line-height:1 !important;
    margin-top:2px !important;
  }
  html[lang="en"] .brand-tagline{
    font-size:8px !important;
  }

  .top-actions{
    min-width:0;
    gap:4px !important;
    flex-wrap:nowrap !important;
    justify-content:flex-end;
  }
  .lang-select{
    min-width:72px !important;
    width:72px !important;
    padding:8px 7px !important;
    font-size:12px;
  }
  #liveStatus{
    display:none !important;
  }
  .icon,
  .top-back{
    width:38px !important;
    height:38px !important;
    flex:0 0 38px !important;
  }

  .marketplace-hero,
  .hero,
  .card{
    width:100%;
    max-width:100%;
  }

  .marketplace-hero{
    padding-left:18px !important;
    padding-right:18px !important;
  }
  .marketplace-hero .hero-content{
    width:100%;
    max-width:100%;
  }
  .hero-brandmark{
    width:170px !important;
    max-width:58vw;
    height:58px !important;
  }

  .grid{
    width:100%;
    min-width:0;
  }
  .item{
    min-width:0;
    max-width:100%;
  }
  .itemimg{
    max-width:100%;
  }

  .section-head,
  .discovery-head{
    min-width:0;
    max-width:100%;
  }
  .search-box{
    min-width:0 !important;
    max-width:100%;
  }
  .search-box input{
    min-width:0;
  }

  .category-chips{
    max-width:100%;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:none;
  }
  .category-chips::-webkit-scrollbar{display:none}

  .row{
    max-width:100%;
  }

  .bottom{
    width:calc(100% - 16px) !important;
    max-width:calc(100% - 16px) !important;
  }
}

@media(max-width:390px){
  .shell{
    padding-left:8px !important;
    padding-right:8px !important;
  }
  .topbar{
    gap:4px;
    padding:7px !important;
  }
  .brand-logo{
    width:88px !important;
    height:30px !important;
  }
  .lang-select{
    min-width:66px !important;
    width:66px !important;
    font-size:11px;
  }
  .icon,
  .top-back{
    width:36px !important;
    height:36px !important;
    flex-basis:36px !important;
  }
}


/* Final logo sizing — no crop, no duplicate tagline */
.brand-logo{
  width:150px !important;
  height:42px !important;
  background:url('./loop-logo.svg') center/contain no-repeat !important;
}
.hero-brandmark{
  width:235px !important;
  height:72px !important;
  background:url('./loop-logo.svg') center/contain no-repeat !important;
}
.brand-tagline{
  margin-top:2px !important;
}
@media(max-width:760px){
  .brand-logo{width:104px !important;height:32px !important}
  .hero-brandmark{width:185px !important;height:58px !important}
}


/* ===== Approved LOOP visual lock ===== */
.brand{
  min-width:0 !important;
  flex-direction:row !important;
  justify-content:center !important;
  align-items:center !important;
}
.brand-logo{
  width:150px !important;
  height:42px !important;
  background:url('./loop-logo.svg') center/contain no-repeat !important;
  filter:drop-shadow(0 0 10px rgba(183,255,74,.24)) !important;
}
.brand-tagline{display:none !important}

.marketplace-hero{
  min-height:430px !important;
  padding:42px 28px !important;
  display:grid !important;
  place-items:center !important;
  text-align:center !important;
  background:#070a08 !important;
  isolation:isolate !important;
}
.marketplace-hero::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  width:auto !important;
  height:auto !important;
  border-radius:inherit !important;
  background:url('./loop-hero-bg.svg') center/cover no-repeat !important;
  opacity:.62 !important;
  z-index:-2 !important;
  pointer-events:none !important;
}
.marketplace-hero::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:
    radial-gradient(circle at 50% 45%,rgba(5,8,6,.88) 0%,rgba(5,8,6,.76) 34%,rgba(5,8,6,.42) 66%,rgba(5,8,6,.66) 100%),
    linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.28)) !important;
  z-index:-1 !important;
  pointer-events:none !important;
}
.marketplace-hero .hero-content{
  width:min(680px,100%) !important;
  margin-inline:auto !important;
  text-align:center !important;
}
.hero-brandmark{
  width:285px !important;
  height:72px !important;
  max-width:72vw !important;
  margin:0 auto 16px !important;
  background:url('./loop-logo.svg') center/contain no-repeat !important;
  filter:drop-shadow(0 0 16px rgba(183,255,74,.28)) !important;
}
html[dir="ltr"] .hero-brandmark{
  margin-left:auto !important;
  margin-right:auto !important;
}
.marketplace-hero .hero-eyebrow{
  display:block !important;
  text-align:center !important;
  margin:0 auto 8px !important;
}
.marketplace-hero h1{
  max-width:680px !important;
  margin:10px auto 14px !important;
  text-align:center !important;
}
.marketplace-hero p{
  max-width:600px !important;
  margin:0 auto 22px !important;
  text-align:center !important;
}
.marketplace-hero .hero-actions{
  justify-content:center !important;
  width:100% !important;
}
.marketplace-hero .hero-actions .btn{
  min-width:170px !important;
}

/* keep the top header balanced on mobile */
@media(max-width:760px){
  .topbar{
    grid-template-columns:auto minmax(110px,1fr) auto !important;
  }
  .brand-logo{
    width:120px !important;
    height:34px !important;
  }
  .marketplace-hero{
    min-height:500px !important;
    padding:36px 18px 32px !important;
  }
  .marketplace-hero::before{
    background-position:center !important;
    opacity:.55 !important;
  }
  .marketplace-hero::after{
    background:
      radial-gradient(circle at 50% 43%,rgba(5,8,6,.90) 0%,rgba(5,8,6,.78) 38%,rgba(5,8,6,.48) 72%,rgba(5,8,6,.66) 100%) !important;
  }
  .hero-brandmark{
    width:230px !important;
    height:58px !important;
    max-width:74vw !important;
    margin-bottom:14px !important;
  }
  .marketplace-hero h1{
    font-size:clamp(32px,9.3vw,44px) !important;
    line-height:1.15 !important;
  }
  .marketplace-hero .hero-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    max-width:340px !important;
    margin-inline:auto !important;
  }
  .marketplace-hero .hero-actions .btn{
    width:100% !important;
    min-width:0 !important;
  }
}

@media(max-width:390px){
  .brand-logo{
    width:106px !important;
    height:31px !important;
  }
  .topbar{
    grid-template-columns:auto minmax(96px,1fr) auto !important;
  }
}


/* Final approved raster logo: identical file in navigation and hero.
   Only the image's empty outer margins are trimmed by cover;
   the icon and LOOP wordmark remain fully visible, without distortion. */
.brand-logo,.hero-brandmark{
  background-image:url('./loop-logo-approved.webp') !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:cover !important;
  flex-shrink:0 !important;
  filter:none !important;
  overflow:visible !important;
}
.brand-logo{
  width:154px !important;
  height:56px !important;
  aspect-ratio:154/56;
}
.hero-brandmark{
  width:320px !important;
  height:120px !important;
  max-width:min(84vw,320px) !important;
  margin:0 auto 12px !important;
  aspect-ratio:8/3;
}
.brand-tagline{display:none !important}
@media(max-width:760px){
  .brand-logo{width:122px !important;height:46px !important}
  .hero-brandmark{width:264px !important;height:98px !important;max-width:78vw !important}
}
@media(max-width:390px){
  .brand-logo{width:110px !important;height:41px !important}
  .hero-brandmark{width:240px !important;height:90px !important;max-width:77vw !important}
}


/* Verified, intact LOOP artwork. Never render the damaged WebP asset. */
.brand-logo,.hero-brandmark{
  background-image:url('./loop-logo-clean.svg') !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  filter:none !important;
  transform:none;
}
.brand-logo{
  width:160px !important;
  height:59px !important;
  max-width:100% !important;
}
.hero-brandmark{
  width:min(340px,82vw) !important;
  height:140px !important;
  max-width:100% !important;
  margin:0 auto 10px !important;
}
@media(max-width:760px){
  .brand-logo{width:124px !important;height:49px !important}
  .hero-brandmark{width:min(310px,80vw) !important;height:130px !important}
}
@media(max-width:390px){
  .brand-logo{width:112px !important;height:43px !important}
  .hero-brandmark{width:min(280px,78vw) !important;height:118px !important}
}


/* LOOP mobile product catalog — compact, responsive marketplace cards.
   Scoped to real listings and Favorites; forms, gallery and admin stay intact. */
#itemsGrid.grid,
#app .favorites-grid.grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
  width:100%;
  min-width:0;
}
#itemsGrid > .marketplace-item,
#app .favorites-grid > .marketplace-item{
  min-width:0;
  height:100%;
  display:flex;
  flex-direction:column;
  padding:12px;
  border-radius:18px;
  overflow:hidden;
}
#itemsGrid .marketplace-item .item-media,
#app .favorites-grid .marketplace-item .item-media{
  width:100%;
  min-width:0;
  margin-bottom:10px;
}
#itemsGrid .marketplace-item .itemimg,
#app .favorites-grid .marketplace-item .itemimg{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  background:#0a0d0e;
  border-radius:12px;
}
#itemsGrid .marketplace-item .item-placeholder,
#app .favorites-grid .marketplace-item .item-placeholder{
  border-radius:12px;
}
#itemsGrid .marketplace-item h3,
#app .favorites-grid .marketplace-item h3{
  font-size:16px;
  line-height:1.45;
  margin:3px 0 5px;
  overflow-wrap:anywhere;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
}
#itemsGrid .marketplace-item .meta,
#app .favorites-grid .marketplace-item .meta{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#itemsGrid .marketplace-item p,
#app .favorites-grid .marketplace-item p{
  font-size:12px;
  line-height:1.5;
  margin:7px 0 12px;
  overflow-wrap:anywhere;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
}
#itemsGrid .marketplace-item > .row,
#app .favorites-grid .marketplace-item > .row{
  margin-top:auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
}
#itemsGrid .marketplace-item > .row > .btn,
#app .favorites-grid .marketplace-item > .row > .btn{
  width:100%;
  min-width:0;
  min-height:38px;
  padding:8px 6px;
  font-size:12px;
  line-height:1.25;
  text-align:center;
}
#itemsGrid .marketplace-item > .row > .pill,
#app .favorites-grid .marketplace-item > .row > .pill{
  grid-column:1/-1;
  min-height:29px;
  padding:5px 8px;
  font-size:11px;
}
@media(max-width:1099px){
  #itemsGrid.grid,
  #app .favorites-grid.grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:719px){
  #itemsGrid.grid,
  #app .favorites-grid.grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  #itemsGrid > .marketplace-item,
  #app .favorites-grid > .marketplace-item{
    padding:9px;
    border-radius:16px;
  }
  #itemsGrid .marketplace-item .item-media,
  #app .favorites-grid .marketplace-item .item-media{
    margin-bottom:8px;
  }
  #itemsGrid .marketplace-item .itemimg,
  #app .favorites-grid .marketplace-item .itemimg,
  #itemsGrid .marketplace-item .item-placeholder,
  #app .favorites-grid .marketplace-item .item-placeholder{
    border-radius:11px;
  }
  #itemsGrid .marketplace-item .item-kicker,
  #app .favorites-grid .marketplace-item .item-kicker{
    font-size:10px;
    margin-bottom:3px;
  }
  #itemsGrid .marketplace-item h3,
  #app .favorites-grid .marketplace-item h3{
    font-size:13px;
    line-height:1.4;
    min-height:2.8em;
    margin:2px 0 4px;
  }
  #itemsGrid .marketplace-item .meta,
  #app .favorites-grid .marketplace-item .meta{
    font-size:11px;
  }
  #itemsGrid .marketplace-item p,
  #app .favorites-grid .marketplace-item p{
    font-size:11px;
    margin:6px 0 10px;
    min-height:3em;
  }
  #itemsGrid .marketplace-item > .row,
  #app .favorites-grid .marketplace-item > .row{
    gap:5px;
  }
  #itemsGrid .marketplace-item > .row > .btn,
  #app .favorites-grid .marketplace-item > .row > .btn{
    min-height:35px;
    padding:7px 3px;
    font-size:11px;
    border-radius:10px;
  }
  #itemsGrid .marketplace-item > .row > .pill,
  #app .favorites-grid .marketplace-item > .row > .pill{
    min-height:27px;
  }
  #itemsGrid .marketplace-item .item-condition,
  #app .favorites-grid .marketplace-item .item-condition{
    top:7px;
    font-size:9px;
    padding:4px 6px;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  #itemsGrid .marketplace-item .favorite-btn,
  #app .favorites-grid .marketplace-item .favorite-btn{
    top:7px;
    width:30px;
    height:30px;
    font-size:17px;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  html[dir="rtl"] #itemsGrid .marketplace-item .favorite-btn,
  html[dir="rtl"] #app .favorites-grid .marketplace-item .favorite-btn{
    left:auto;
    right:7px;
  }
  html[dir="ltr"] #itemsGrid .marketplace-item .favorite-btn,
  html[dir="ltr"] #app .favorites-grid .marketplace-item .favorite-btn{
    right:auto;
    left:7px;
  }
  #itemsGrid .empty-results,
  #app .favorites-grid .empty-results{grid-column:1/-1}
}


/* Two-party swap confirmation workflow */
.swap-confirm-card{
  margin-top:16px;
  display:grid;
  gap:10px;
}
.swap-confirm-card h2{margin:0}
.swap-confirm-card p{margin:0 0 4px;line-height:1.8}
.swap-confirm-card select{width:100%;max-width:100%;min-width:0}
.swap-confirm-card .btn{justify-self:start}
.swap-list{
  display:grid;
  gap:12px;
  margin-top:16px;
}
.swap-record{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  background:rgba(9,14,16,.65);
  padding:15px;
}
.swap-record-main{
  display:grid;
  justify-items:start;
  gap:6px;
  min-width:0;
  flex:1 1 220px;
}
.swap-record-main strong{overflow-wrap:anywhere}
.swap-record-main .pill{margin-top:4px}
.swap-record-actions{
  flex:0 1 auto;
  align-items:center;
}
.swap-record-actions .btn{font-size:12px}
#adminSwapHistory{margin-top:16px}
@media(max-width:560px){
  .swap-confirm-card .btn{width:100%}
  .swap-record{padding:12px}
  .swap-record-actions{width:100%;display:grid;grid-template-columns:1fr;gap:8px}
  .swap-record-actions .btn{width:100%}
}