:root{
  --void:#0A0A0C; --coal:#111114; --slab:#17171B; --raise:#1E1E23;
  --chalk:#F4F4F6; --ash:#9A9AA4; --dim:#6A6A74;
  --red:#F05023; --maroon:#710F11; --red-deep:#8A1512; --red-soft:rgba(240,80,35,.15);
  --line:rgba(255,255,255,.085); --line-2:rgba(255,255,255,.045);
  --shadow:0 24px 60px -28px rgba(0,0,0,.95);
  --glow:0 0 0 1px rgba(240,80,35,.4), 0 18px 48px -20px rgba(240,80,35,.35);
  --r:4px; --maxw:1300px;
  --disp:'Archivo', ui-sans-serif, system-ui, sans-serif;
  --body:'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
}
[data-theme="light"]{
  --void:#EFEFEC; --coal:#FFFFFF; --slab:#F7F7F5; --raise:#E9E9E5;
  --chalk:#0A0A0C; --ash:#5C5C64; --dim:#8A8A93;
  --line:rgba(10,10,12,.13); --line-2:rgba(10,10,12,.07);
  --shadow:0 24px 60px -32px rgba(10,10,12,.35);
  --red-soft:rgba(255,30,39,.1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:hidden}
img,svg,video{max-width:100%}
body{margin:0; background:var(--void); color:var(--chalk); font-family:var(--body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; width:100%; max-width:100vw}
/* matte grain — the finish, not a gloss */
body::before{content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.5;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E")}
h1,h2,h3,h4,h5{font-family:var(--disp); margin:0; font-weight:800; line-height:.98; letter-spacing:-.035em;
  font-stretch:112%; text-transform:uppercase}
p{margin:0}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; background:none; border:none}
a{color:inherit}
img{display:block}
:focus-visible{outline:2px solid var(--red); outline-offset:3px}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 26px; position:relative; z-index:2}
.mono{font-family:var(--mono); font-size:11.5px; letter-spacing:-.01em}
.eyebrow{font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.2em; color:var(--red)}
.eyebrow.ash{color:var(--dim)}
.rule{height:1px; background:var(--line-2)}

/* progress + announce */
#prog{position:fixed; top:0; left:0; height:2px; background:var(--red); z-index:99; width:0}
.announce{background:linear-gradient(90deg,var(--red),var(--maroon)); color:#fff; font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; overflow:hidden; height:32px; display:flex; align-items:center; position:relative; z-index:3}
.announce .slide{width:100%; text-align:center; animation:up .5s cubic-bezier(.2,.8,.2,1)}
@keyframes up{from{opacity:0; transform:translateY(9px)}}

/* topbar */
.topbar{position:sticky; top:0; z-index:60; background:color-mix(in srgb,var(--void) 88%,transparent);
  backdrop-filter:blur(20px) saturate(140%); border-bottom:1px solid var(--line-2)}
.topbar-in{display:flex; align-items:center; gap:10px; height:66px; max-width:var(--maxw); margin:0 auto; padding:0 22px; min-width:0}
.brand{font-family:var(--disp); font-weight:900; font-size:20px; letter-spacing:-.055em; font-stretch:118%;
  text-transform:uppercase; text-decoration:none; display:flex; align-items:center; gap:9px; white-space:nowrap}
.mark{width:26px; height:26px; background:var(--red); position:relative; flex:none;
  clip-path:polygon(0 0,100% 0,100% 62%,62% 100%,0 100%)}
.mark::after{content:""; position:absolute; inset:7px 7px auto auto; width:6px; height:6px; background:var(--void)}
.brand em{font-style:normal; color:var(--red)}
.nav{display:flex; gap:2px; margin-left:6px; min-width:0}
.nav a{font-size:13.5px; color:var(--ash); text-decoration:none; padding:9px 10px; border-radius:var(--r); transition:.2s;
  font-weight:500; white-space:nowrap}
.nav a:hover{color:var(--chalk); background:var(--slab)}
.spacer{flex:1}
.pulse{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10.5px; color:var(--ash);
  border:1px solid var(--line); padding:6px 10px; border-radius:var(--r)}
.dot{width:6px; height:6px; background:var(--red); border-radius:50%; animation:beat 1.9s infinite}
@keyframes beat{0%{box-shadow:0 0 0 0 rgba(240,80,35,.7)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.mini{background:var(--slab); border:1px solid var(--line); border-radius:var(--r); padding:7px 8px;
  font-family:var(--mono); font-size:11px; color:var(--ash); cursor:pointer}
.icon-btn{width:36px; height:36px; border:1px solid var(--line); background:var(--slab); border-radius:var(--r);
  display:grid; place-items:center; color:var(--ash); transition:.2s; font-size:14px}
.icon-btn:hover{color:var(--red); border-color:var(--red)}
.btn{text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:var(--r); padding:12px 20px;
  font-family:var(--disp); font-weight:700; font-size:13px; letter-spacing:.05em; text-transform:uppercase;
  border:1px solid transparent; transition:.22s cubic-bezier(.2,.8,.2,1); white-space:nowrap}
.btn-red{background:var(--red); color:#fff}
.btn-red:hover{background:#fff; color:var(--red)}
[data-theme="light"] .btn-red:hover{background:var(--chalk); color:#fff}
.btn-line{border-color:var(--line); color:var(--chalk); background:var(--slab)}
.btn-line:hover{border-color:var(--red); color:var(--red)}
.btn-sm{padding:9px 14px; font-size:11.5px}
.hide-md{display:inline-flex}

/* hero */
.hero{padding:70px 0 0; position:relative; overflow:hidden}
.hero::after{content:""; position:absolute; left:0; right:0; top:0; height:520px; pointer-events:none;
  background:radial-gradient(ellipse 60% 70% at 78% 8%, rgba(240,80,35,.20), transparent 70%)}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.hero h1{font-size:clamp(44px,7vw,96px); font-stretch:118%; letter-spacing:-.05em}
.hero h1 span{color:var(--red); position:relative; display:inline-block}

.hero-sub{margin-top:22px; color:var(--ash); font-size:17px; max-width:47ch}
.builder{margin-top:30px; background:var(--coal); border:1px solid var(--line); border-radius:var(--r); padding:15px}
.builder-row{display:flex; gap:9px}
.url-field{flex:1; display:flex; align-items:center; gap:9px; background:var(--void); border:1px solid var(--line);
  border-radius:var(--r); padding:0 13px; transition:.2s}
.url-field:focus-within{border-color:var(--red); box-shadow:0 0 0 3px var(--red-soft)}
.url-field input{flex:1; background:none; border:none; outline:none; padding:13px 0; font-family:var(--mono); font-size:13px}
.builder-out{margin-top:12px; display:flex; gap:9px; align-items:center; flex-wrap:wrap; font-family:var(--mono); font-size:11px; color:var(--dim)}
.chip-out{border:1px dashed var(--line); padding:5px 9px; border-radius:var(--r); color:var(--ash); max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chip-out b{color:var(--red); font-weight:500}
.hstats{display:flex; gap:30px; margin-top:28px; flex-wrap:wrap}
.hstats b{font-family:var(--disp); font-size:30px; display:block; letter-spacing:-.04em; font-stretch:118%}
.hstats span{font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.16em; color:var(--dim)}

.preview{background:var(--coal); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); position:relative}
.preview::before{content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--red); z-index:3}
.pv-img{aspect-ratio:16/10; overflow:hidden; position:relative; background:var(--slab)}
.pv-img img{width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.05)}
.scan{position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(240,80,35,.30) 50%,transparent 55%);
  animation:scan 4.5s cubic-bezier(.6,0,.4,1) infinite; mix-blend-mode:screen}
@keyframes scan{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}
.pv-body{padding:18px}
.pv-title{font-family:var(--disp); font-size:20px; font-weight:800; letter-spacing:-.03em; text-transform:uppercase; margin-top:11px}
.dombar{display:flex; align-items:center; gap:8px; margin-top:13px; background:var(--void); border:1px solid var(--line-2);
  padding:9px 11px; border-radius:var(--r); font-family:var(--mono); font-size:11px; color:var(--dim); overflow:hidden}
.dombar b{color:var(--ash); font-weight:500}
.fav{width:19px; height:19px; background:var(--red); color:#fff; display:grid; place-items:center; flex:none;
  font-family:var(--disp); font-size:11px; font-weight:800; border-radius:2px}
.pv-foot{display:flex; align-items:center; justify-content:space-between; margin-top:16px; gap:12px}
.price{font-family:var(--disp); font-size:26px; font-weight:900; letter-spacing:-.04em; font-stretch:112%}
.was{font-family:var(--mono); font-size:11.5px; color:var(--dim); text-decoration:line-through; margin-left:7px}
.badge{font-family:var(--mono); font-size:10px; padding:4px 8px; border-radius:2px; letter-spacing:.06em;
  text-transform:uppercase; background:var(--red-soft); color:var(--red); border:1px solid rgba(240,80,35,.30)}
.badge.mute{background:var(--slab); color:var(--ash); border-color:var(--line)}

/* trust strip — launch credibility */
.trust{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:var(--r); background:var(--coal); overflow:hidden}
.trust div{padding:22px 20px; border-right:1px solid var(--line-2)}
.trust div:last-child{border-right:none}
.trust b{font-family:var(--disp); font-size:14px; text-transform:uppercase; letter-spacing:-.02em; display:block; margin-bottom:7px}
.trust b::before{content:"—"; color:var(--red); margin-right:8px}
.trust p{color:var(--ash); font-size:13.5px}
@media (max-width:900px){.trust{grid-template-columns:1fr 1fr} .trust div{border-bottom:1px solid var(--line-2)}}
@media (max-width:520px){.trust{grid-template-columns:1fr} .trust div{border-right:none}}

/* ticker */
.ticker{border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); overflow:hidden; margin-top:52px;
  background:var(--coal); position:relative; z-index:2}
.ticker-track{display:flex; gap:36px; padding:12px 0; width:max-content; animation:slide 46s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.tick{display:flex; gap:9px; font-family:var(--mono); font-size:11px; color:var(--dim); white-space:nowrap}
.tick b{color:var(--ash); font-weight:500} .tick i{font-style:normal; color:var(--red)}

/* sections */
section{padding:76px 0; position:relative; z-index:2}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:22px; margin-bottom:28px; flex-wrap:wrap}
.sec-head h2{font-size:clamp(28px,3.8vw,46px)}
.sec-head p{color:var(--ash); margin-top:10px; max-width:58ch; font-size:15px}

/* drops rail */
.rail{display:flex; gap:14px; overflow-x:auto; padding-bottom:14px; scroll-snap-type:x mandatory; scrollbar-width:thin}
.rail::-webkit-scrollbar{height:5px} .rail::-webkit-scrollbar-thumb{background:var(--red)}
.drop{flex:0 0 232px; scroll-snap-align:start; background:var(--coal); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; transition:.25s}
.drop:hover{border-color:var(--red); transform:translateY(-4px)}
.drop img{width:100%; aspect-ratio:4/3; object-fit:cover}
.drop div{padding:12px}
.drop b{font-family:var(--disp); font-size:14px; text-transform:uppercase; letter-spacing:-.02em; display:block; line-height:1.15}
.drop span{font-family:var(--mono); font-size:10.5px; color:var(--dim)}

/* category tiles */
.cats{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:12px}
.cat-tile{background:var(--coal); border:1px solid var(--line); border-radius:var(--r); padding:20px 16px; text-align:left;
  transition:.25s; position:relative; overflow:hidden}
.cat-tile:hover{border-color:var(--red); background:var(--slab)}
.cat-tile:hover .ci{transform:translateY(-2px) scale(1.05); color:var(--red)}
.ci{font-size:24px; display:block; margin-bottom:12px; transition:.25s; color:var(--ash)}
.cat-tile b{font-family:var(--disp); font-size:15px; text-transform:uppercase; letter-spacing:-.02em; display:block}
.cat-tile span{font-family:var(--mono); font-size:10px; color:var(--dim)}

/* controls */
.controls{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px}
.search{flex:1; min-width:220px; display:flex; align-items:center; gap:10px; background:var(--coal); border:1px solid var(--line);
  border-radius:var(--r); padding:0 13px}
.search input{flex:1; background:none; border:none; outline:none; padding:13px 0; font-size:14.5px}
.kbd{font-family:var(--mono); font-size:10px; border:1px solid var(--line); border-radius:2px; padding:2px 6px; color:var(--dim)}
.sel{background:var(--coal); border:1px solid var(--line); border-radius:var(--r); padding:13px; font-size:13.5px; cursor:pointer}
.chips{display:flex; gap:7px; overflow-x:auto; padding-bottom:16px; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{text-decoration:none; border:1px solid var(--line); background:var(--coal); border-radius:var(--r); padding:8px 15px; font-size:13px;
  color:var(--ash); white-space:nowrap; transition:.2s; font-family:var(--mono); text-transform:uppercase; letter-spacing:.05em; font-size:11px}
.chip:hover{border-color:var(--red); color:var(--chalk)}
.chip[aria-pressed="true"]{background:var(--red); border-color:var(--red); color:#fff}

/* wall */
.wall{display:grid; grid-template-columns:repeat(auto-fill,minmax(252px,1fr)); gap:16px}
.pcard{background:var(--coal); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex;
  flex-direction:column; transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .25s; position:relative}
.pcard::after{content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--red);
  transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.pcard:hover{transform:translateY(-6px); box-shadow:var(--glow); border-color:rgba(240,80,35,.30)}
.pcard:hover::after{transform:scaleX(1)}
.pcard.seen{opacity:.82} .pcard.seen .pt{color:var(--dim)}
.pimg{aspect-ratio:1; position:relative; overflow:hidden; background:var(--slab)}
.pimg img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.pcard:hover .pimg img{transform:scale(1.06)}
.pimg .fb{position:absolute; inset:0; display:grid; place-items:center; font-family:var(--disp); font-size:46px; font-weight:900;
  color:var(--red); background:var(--slab)}
.pimg-top{position:absolute; top:9px; left:9px; right:9px; display:flex; justify-content:space-between; gap:8px}
.mini-btn{width:30px; height:30px; border-radius:2px; background:rgba(10,10,12,.62); backdrop-filter:blur(6px);
  border:1px solid var(--line); display:grid; place-items:center; color:#fff; font-size:12px; transition:.2s}
[data-theme="light"] .mini-btn{background:rgba(255,255,255,.75); color:var(--chalk)}
.mini-btn:hover,.mini-btn[aria-pressed="true"]{color:#fff; background:var(--red); border-color:var(--red)}
.pbody{padding:13px; display:flex; flex-direction:column; gap:8px; flex:1}
.pt{font-family:var(--disp); font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:-.025em; line-height:1.12}
.pmeta{display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; color:var(--dim); flex-wrap:wrap}
.star{color:var(--red)}
.heat{height:3px; background:var(--line-2); border-radius:2px; overflow:hidden}
.heat i{display:block; height:100%; background:linear-gradient(90deg,var(--maroon),var(--red))}
.dom{display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px; color:var(--dim);
  border-top:1px dashed var(--line); padding-top:9px; margin-top:auto; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.pfoot{display:flex; align-items:center; justify-content:space-between; gap:9px; padding:0 13px 13px}
.buy{text-decoration:none; background:var(--raise); color:var(--chalk); border:1px solid var(--line); border-radius:var(--r); padding:9px 14px;
  font-family:var(--disp); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; transition:.22s}
.buy:hover{background:var(--red); border-color:var(--red); color:#fff}
.empty{grid-column:1/-1; text-align:center; padding:70px 20px; border:1px dashed var(--line); border-radius:var(--r)}
.empty h3{font-size:24px; margin-bottom:10px}
.empty p{color:var(--ash); margin-bottom:18px}
.skel{border:1px solid var(--line-2); border-radius:var(--r); height:330px; background:var(--coal);
  background-image:linear-gradient(100deg,transparent 25%,var(--line-2) 45%,transparent 68%);
  background-size:220% 100%; animation:sh 1.4s infinite}
@keyframes sh{from{background-position:130% 0}to{background-position:-50% 0}}

/* spotlight */
.spot{border:1px solid var(--line); border-radius:var(--r); background:var(--coal); display:grid;
  grid-template-columns:1.05fr .95fr; overflow:hidden; position:relative}
.spot::before{content:""; position:absolute; inset:0; background:radial-gradient(ellipse 50% 60% at 100% 0%,rgba(240,80,35,.16),transparent 70%)}
.spot-txt{padding:40px; position:relative}
.spot h3{font-size:clamp(26px,3.4vw,44px); margin-top:12px}
.spot p{color:var(--ash); margin-top:14px; max-width:44ch}
.count{display:flex; gap:8px; margin-top:22px}
.count div{background:var(--void); border:1px solid var(--line); padding:10px 14px; text-align:center; min-width:64px; border-radius:var(--r)}
.count b{font-family:var(--disp); font-size:23px; display:block; font-stretch:118%}
.count span{font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:.14em; color:var(--dim)}
.spot-img{position:relative; min-height:320px}
.spot-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

/* coupons */
.coupons{display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:14px}
.coupon{background:var(--coal); border:1px solid var(--line); border-radius:var(--r); padding:20px; position:relative; overflow:hidden}
.coupon::before,.coupon::after{content:""; position:absolute; width:18px; height:18px; border-radius:50%; background:var(--void);
  border:1px solid var(--line); left:-10px}
.coupon::before{top:calc(50% - 9px)} .coupon::after{left:auto; right:-10px; top:calc(50% - 9px)}
.coupon b{font-family:var(--disp); font-size:30px; display:block; color:var(--red); font-stretch:118%}
.coupon .who{font-family:var(--mono); font-size:11px; color:var(--dim); margin:6px 0 16px}
.code{display:flex; gap:8px; align-items:center; border:1px dashed var(--red); border-radius:var(--r); padding:9px 12px;
  font-family:var(--mono); font-size:13px; letter-spacing:.12em; justify-content:space-between; width:100%; transition:.2s}
.code:hover{background:var(--red-soft)}

/* brands + guides + board */
.brands{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:12px}
.brand-card{background:var(--coal); border:1px solid var(--line); border-radius:var(--r); padding:16px; display:flex; gap:12px;
  align-items:center; transition:.2s; text-align:left}
.brand-card:hover{border-color:var(--red)}
.brand-card b{font-size:13.5px; display:block; font-family:var(--body); font-weight:600}
.brand-card span{font-family:var(--mono); font-size:10px; color:var(--dim)}
.guides{display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:16px}
.guide{background:var(--coal); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; transition:.25s; text-align:left}
.guide:hover{border-color:var(--red); transform:translateY(-4px)}
.guide img{width:100%; aspect-ratio:16/9; object-fit:cover}
.guide div{padding:18px}
.guide h4{font-size:18px; margin:9px 0 8px}
.guide p{color:var(--ash); font-size:14px}
.board{border:1px solid var(--line); border-radius:var(--r); background:var(--coal); overflow:hidden}
.row{display:grid; grid-template-columns:42px 1fr auto auto; gap:14px; align-items:center; padding:14px 18px; border-bottom:1px solid var(--line-2)}
.row:last-child{border:none}
.rank{font-family:var(--disp); font-size:16px; color:var(--dim); font-stretch:118%}
.row:nth-child(1) .rank{color:var(--red)}
.who b{display:block; font-size:14px; font-family:var(--body); font-weight:600}
.who span{font-family:var(--mono); font-size:10.5px; color:var(--dim)}
.bar{width:120px; height:5px; background:var(--line-2); border-radius:2px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--red)}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.step{background:var(--coal); border:1px solid var(--line); border-radius:var(--r); padding:26px; position:relative; overflow:hidden}
.step .n{font-family:var(--disp); font-size:52px; font-weight:900; color:var(--line); position:absolute; right:14px; top:6px; font-stretch:118%}
.step h4{font-size:19px; margin:14px 0 10px} .step p{color:var(--ash); font-size:14.5px}
.faq details{border-bottom:1px solid var(--line-2); padding:18px 0}
.faq summary{cursor:pointer; font-family:var(--disp); font-size:17px; font-weight:800; text-transform:uppercase;
  letter-spacing:-.02em; list-style:none; display:flex; justify-content:space-between; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--red); font-size:22px; line-height:1}
.faq details[open] summary::after{content:"−"}
.faq p{color:var(--ash); margin-top:12px; max-width:76ch; font-size:15px}

/* compare tray */
.tray{position:fixed; bottom:0; left:0; right:0; z-index:70; background:var(--coal); border-top:2px solid var(--red);
  transform:translateY(110%); transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.tray.on{transform:none}
.tray-in{max-width:var(--maxw); margin:0 auto; padding:14px 26px; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.tray-items{display:flex; gap:9px; flex:1; flex-wrap:wrap}
.tray-item{display:flex; align-items:center; gap:8px; background:var(--slab); border:1px solid var(--line); border-radius:var(--r); padding:6px 9px; font-size:12.5px}
.tray-item img{width:26px; height:26px; object-fit:cover; border-radius:2px}
.cmp-table{width:100%; border-collapse:collapse; font-size:13.5px}
.cmp-table th,.cmp-table td{border:1px solid var(--line); padding:11px; text-align:left; vertical-align:top}
.cmp-table th{background:var(--slab); font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--dim); font-weight:400}

/* newsletter */
.news{border:1px solid var(--line); border-radius:var(--r); background:var(--coal); padding:38px; display:grid;
  grid-template-columns:1fr auto; gap:26px; align-items:center; position:relative; overflow:hidden}
.news::before{content:""; position:absolute; inset:0; background:radial-gradient(ellipse 40% 100% at 0% 50%,rgba(240,80,35,.14),transparent 70%)}
.news h3{font-size:clamp(22px,2.6vw,32px); position:relative}
.news p{color:var(--ash); margin-top:9px; position:relative; max-width:46ch}
.news-form{display:flex; gap:8px; position:relative}
.news-form input{background:var(--void); border:1px solid var(--line); border-radius:var(--r); padding:13px 15px; min-width:230px; outline:none}
.news-form input:focus{border-color:var(--red)}

footer{border-top:1px solid var(--line-2); padding:52px 0 36px; position:relative; z-index:2}
.fgrid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px}
.fgrid a{display:block; color:var(--ash); text-decoration:none; font-size:14px; padding:5px 0; transition:.2s}
.fgrid a:hover{color:var(--red)}
.fgrid h5{font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.18em; color:var(--dim); margin:0 0 10px; font-weight:400}
.disclosure{margin-top:36px; padding:16px 18px; border:1px solid var(--line); border-radius:var(--r); font-size:12.5px;
  color:var(--dim); background:var(--coal)}

/* modal */
.overlay{position:fixed; inset:0; z-index:95; background:rgba(5,5,7,.78); backdrop-filter:blur(8px); display:none;
  align-items:flex-start; justify-content:center; padding:24px; overflow-y:auto}
.overlay.on{display:flex}
.modal{background:var(--void); border:1px solid var(--line); border-radius:var(--r); width:100%; max-width:640px;
  box-shadow:var(--shadow); animation:pop .3s cubic-bezier(.2,.8,.2,1); margin:auto}
.modal.wide{max-width:1000px}
@keyframes pop{from{opacity:0; transform:translateY(20px)}}
.mhead{display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--line-2);
  position:sticky; top:0; background:var(--void); z-index:3}
.mhead h3{font-size:20px}
.mbody{padding:24px}
.field{margin-bottom:14px}
.field label{display:block; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:var(--dim); margin-bottom:7px}
.field input,.field select,.field textarea{width:100%; background:var(--coal); border:1px solid var(--line); border-radius:var(--r);
  padding:12px 13px; outline:none; font-size:14.5px; transition:.2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red); box-shadow:0 0 0 3px var(--red-soft)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.err{color:var(--red); font-size:12.5px; margin-top:6px; display:none}
.field.bad input{border-color:var(--red)} .field.bad .err{display:block}
.stepper{display:flex; gap:5px; padding:0 24px 16px}
.stepper i{flex:1; height:3px; background:var(--line); transition:.3s} .stepper i.on{background:var(--red)}
.pane{display:none} .pane.on{display:block}
.qitem{display:grid; grid-template-columns:54px 1fr auto; gap:13px; align-items:center; padding:12px; border:1px solid var(--line);
  border-radius:var(--r); margin-bottom:9px; background:var(--coal)}
.qitem img{width:54px; height:54px; object-fit:cover; border-radius:2px}
.tabs{display:flex; gap:5px; padding:14px 24px 0; flex-wrap:wrap}
.tab{padding:9px 14px; border-radius:var(--r); font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--dim); border:1px solid transparent}
.tab[aria-selected="true"]{background:var(--coal); border-color:var(--line); color:var(--red)}
.chart{display:flex; align-items:flex-end; gap:4px; height:140px; padding:14px; background:var(--coal); border:1px solid var(--line); border-radius:var(--r)}
.chart i{flex:1; background:var(--red); border-radius:1px; min-height:3px; opacity:.85; transition:height .5s}
.chart i:hover{opacity:1}
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px}
.kpi{background:var(--coal); border:1px solid var(--line); border-radius:var(--r); padding:14px}
.kpi b{font-family:var(--disp); font-size:24px; display:block; font-stretch:112%}
.kpi span{font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:.12em; color:var(--dim)}
.stars{display:flex; gap:4px; font-size:20px; color:var(--line)}
.stars b{cursor:pointer; transition:.15s} .stars b.on{color:var(--red)}
.toasts{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:120; display:flex; flex-direction:column; gap:9px; align-items:center}
.toast{background:var(--red); color:#fff; border-radius:var(--r); padding:12px 18px; font-size:13.5px; font-weight:600;
  box-shadow:var(--shadow); animation:pop .28s}
#toTop{position:fixed; right:20px; bottom:20px; z-index:65; width:42px; height:42px; background:var(--red); color:#fff;
  border-radius:var(--r); display:none; place-items:center; font-size:17px}
#toTop.on{display:grid}
[dir="rtl"] body{text-align:right}


@media (max-width:900px){
  .hero-grid,.spot,.news{grid-template-columns:1fr} .spot-txt{padding:26px} .spot-img{min-height:240px}
  .steps{grid-template-columns:1fr} .fgrid{grid-template-columns:1fr 1fr} .kpis{grid-template-columns:1fr 1fr}
  .hide-md{display:none} section{padding:52px 0} .hero{padding:44px 0 0} .news{padding:26px}
}
@media (max-width:560px){
  .wrap{padding:0 18px} .topbar-in{padding:0 12px} .wall{grid-template-columns:repeat(auto-fill,minmax(154px,1fr)); gap:11px}
  .two{grid-template-columns:1fr} .row{grid-template-columns:30px 1fr auto} .bar{display:none}
  .news-form{flex-direction:column} .news-form input{min-width:0; width:100%} .modal{max-width:100%}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

/* ===== added for the PHP build: banner slot, plans, checkout, crumbs ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.crumbs{font-family:var(--mono);font-size:11px;color:var(--dim);display:flex;gap:8px;align-items:center}
.crumbs a{color:var(--ash); text-decoration:none}
.crumbs a:hover{color:var(--red)}

/* paid homepage banner */
.paidbar-wrap{padding:26px 0 0;position:relative;z-index:2}
.paidbar{display:grid;grid-template-columns:.9fr 1.1fr;gap:0;background:var(--coal);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;position:relative}
.paidbar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red);z-index:2}
.paidbar-img{position:relative;min-height:260px;background:var(--slab)}
.paidbar-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.paidbar-txt{padding:30px 34px;display:flex;flex-direction:column;justify-content:center}
.paidbar-txt h2{font-size:clamp(24px,3vw,38px);margin-top:12px}
.paidbar-txt p{color:var(--ash);margin-top:12px;max-width:52ch}
.paidbar-foot{display:flex;align-items:center;gap:16px;margin-top:22px;flex-wrap:wrap}
.paidbar-empty{border-style:dashed;transition:.25s}
.paidbar-empty:hover{border-color:var(--red)}
.paidbar-slot{display:grid;place-items:center;border-left:1px dashed var(--line);min-height:220px;color:var(--dim)}

/* plan cards */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px}
.plan{background:var(--coal);border:1px solid var(--line);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;position:relative}
.plan-hot{border-color:var(--red)}
.plan-tag{position:absolute;top:-1px;right:16px;background:var(--red);color:#fff;font-family:var(--mono);font-size:9.5px;
  text-transform:uppercase;letter-spacing:.14em;padding:5px 10px}
.plan h2{font-size:20px;margin-bottom:12px}
.plan-price{font-family:var(--disp);font-size:44px;font-weight:900;letter-spacing:-.04em;font-stretch:112%;line-height:1}
.plan-price span{font-family:var(--mono);font-size:12px;font-weight:400;color:var(--dim);letter-spacing:0;margin-left:6px}
.plan-per{color:var(--dim);margin-top:6px}
.plan-blurb{color:var(--ash);font-size:14px;margin:16px 0}
.plan-perks{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:9px}
.plan-perks li{font-size:13.5px;color:var(--ash);padding-left:20px;position:relative}
.plan-perks li::before{content:"—";position:absolute;left:0;color:var(--red)}
.plan .btn{margin-top:auto}

/* checkout */
.co-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:36px;margin-top:26px;align-items:start}
.co-sum{background:var(--coal);border:1px solid var(--line);border-radius:var(--r);padding:24px;position:sticky;top:96px}
.co-line{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:14px;color:var(--ash)}
.co-total{border-bottom:none;border-top:1px solid var(--line);margin-top:6px;padding-top:14px;color:var(--chalk);font-size:16px}
.pay-msg{font-size:13.5px;color:var(--ash);margin-top:12px;min-height:20px}
.pay-err{color:var(--red)}
.done-card{background:var(--coal);border:1px solid var(--red);border-radius:var(--r);padding:28px}
#payElement{min-height:80px}

@media (max-width:900px){
  .paidbar{grid-template-columns:1fr}
  .paidbar-img{min-height:200px}
  .paidbar-txt{padding:22px}
  .plans{grid-template-columns:1fr}
  .co-grid{grid-template-columns:1fr}
  .co-sum{position:static}
}


/* ===== v4: brand logo, mobile nav, blog ===== */
.brand img{height:28px;width:auto;display:block;flex:none}
.brand{flex:none}
.brand-name em{font-style:normal;color:var(--red)}
.navBtn{display:none}
@media (max-width:1040px){
  .navBtn{display:grid}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--coal);
    border-bottom:1px solid var(--line);flex-direction:column;padding:10px 16px 16px;gap:2px;margin:0}
  .nav.open{display:flex}
  .nav a{padding:12px;border-bottom:1px solid var(--line-2)}
  .topbar-in{position:relative}
}
.badge.new{background:var(--maroon);color:#fff;border-color:var(--maroon)}
.post-card{background:var(--coal);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:.25s;text-decoration:none;color:inherit;display:block}
.post-card:hover{border-color:var(--red);transform:translateY(-4px)}
.post-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.post-card div{padding:18px}
.post-card h3{font-size:17px;margin:9px 0 8px;line-height:1.15}
.post-card p{color:var(--ash);font-size:13.5px}
.prose{max-width:760px;font-size:16.5px;line-height:1.75;color:var(--ash)}
.prose h2{font-size:24px;color:var(--chalk);margin:38px 0 14px;line-height:1.1}
.prose p{margin:0 0 18px}
.prose strong{color:var(--chalk)}
.prose a{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.prose ul{margin:0 0 18px;padding-left:22px}
.prose li{margin-bottom:8px}
.prose .callout{border-left:3px solid var(--red);background:var(--coal);border-radius:0 4px 4px 0;
  padding:16px 18px;margin:0 0 18px;color:var(--chalk);font-size:15px}
.post-hero{padding:56px 0 8px}
.post-meta{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;color:var(--dim);margin-top:16px}
.rel-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:18px}


/* ===== v1.0.0: header breakpoints, hero carousel, compact hero ===== */
@media (max-width:1250px){ .hide-lg{display:none !important} }
@media (max-width:1040px){ .nav{display:none} }

/* homepage hero carousel — up to 5 slides, one visible, auto-advance */
.caro{position:relative; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--coal)}
.caro-track{display:flex; transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.caro-slide{flex:0 0 100%; display:grid; grid-template-columns:1.05fr .95fr; min-height:380px; position:relative}
.caro-slide::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--red); z-index:2}
.caro-txt{padding:38px 42px; display:flex; flex-direction:column; justify-content:center}
.caro-txt h2{font-size:clamp(24px,3.2vw,42px); margin-top:12px}
.caro-txt p{color:var(--ash); margin-top:12px; max-width:50ch}
.caro-foot{display:flex; align-items:center; gap:16px; margin-top:22px; flex-wrap:wrap}
.caro-img{position:relative; min-height:260px; background:var(--slab)}
.caro-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.caro-nav{position:absolute; bottom:16px; left:42px; display:flex; gap:8px; z-index:5; align-items:center}
.caro-dot{width:26px; height:4px; border-radius:2px; background:var(--raise); border:none; cursor:pointer; padding:0; transition:.25s}
.caro-dot[aria-current="true"]{background:var(--red); width:40px}
.caro-arrows{position:absolute; top:16px; right:16px; display:flex; gap:6px; z-index:5}
.caro-arrow{width:34px; height:34px; border-radius:var(--r); border:1px solid var(--line); background:rgba(10,10,12,.6);
  backdrop-filter:blur(6px); color:var(--chalk); display:grid; place-items:center; cursor:pointer; font-size:15px}
.caro-arrow:hover{background:var(--red); border-color:var(--red); color:#fff}
[data-theme="light"] .caro-arrow{background:rgba(255,255,255,.7); color:var(--chalk)}

.hstats-hero{margin-top:0; display:grid; grid-template-columns:1fr 1fr; gap:18px}

/* compact hero (no display headline, per owner preference) */
.hero-compact{padding:34px 0 0}
.hero-compact .h1line{font-family:var(--disp); font-weight:800; text-transform:uppercase; letter-spacing:-.02em;
  font-size:15px; color:var(--ash); font-stretch:112%}
.hero-compact .h1line b{color:var(--red)}
.hero-row{display:grid; grid-template-columns:1.2fr .8fr; gap:34px; align-items:center; margin-top:18px}

@media (max-width:900px){
  .caro-slide{display:flex !important; flex-direction:column !important; min-height:0 !important}
  .caro-img{order:-1 !important; position:relative !important; width:100% !important;
    height:210px !important; min-height:0 !important; max-height:210px !important; overflow:hidden}
  .caro-img img{position:absolute !important; inset:0 !important; width:100% !important;
    height:100% !important; object-fit:cover !important}
  .caro-txt{padding:14px 16px 40px; justify-content:flex-start; height:222px; overflow:hidden}
  .caro-txt .eyebrow{line-height:1.2}
  .caro-txt h2{margin-top:7px}
  .caro-txt h2{font-size:22px}
  .caro-txt p{font-size:13.5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; margin-top:7px; line-height:1.45}
  .caro-foot{margin-top:14px; gap:10px}
  .caro-slide{align-items:stretch}
  .caro-nav{left:16px; bottom:12px}
  .caro-arrows{top:12px; right:12px}
  .caro-foot .price{font-size:21px}
  .hero-row{grid-template-columns:1fr; gap:22px}
  .hstats-hero{grid-template-columns:repeat(4,1fr) !important; gap:10px !important}
  .hstats-hero b{font-size:20px !important}
  .hstats-hero span{font-size:8.5px}
  .h1line{font-size:12px; line-height:1.6}
  .announce{height:auto; padding:6px 12px; font-size:10px; line-height:1.5}
  .paidbar-slot{display:none}
  .btn-sm{padding:9px 11px; font-size:11px}
}


/* ===== v1.0.2: phone header must fit 360px, measured not assumed ===== */
@media (max-width:760px){
  .topbar-in{gap:7px; padding:0 12px; height:60px}
  .brand img{height:24px}
  .brand-name{font-size:15px; letter-spacing:-.05em}
  /* currency + theme move into the slide-down menu on phones */
  #curSel, #themeBtn{display:none}
  .topbar .btn-sm{padding:8px 10px; font-size:10.5px; letter-spacing:.03em}
  .icon-btn{width:32px; height:32px}
  .nav{padding:10px 12px 14px}
  .nav .mob-only{display:flex; gap:8px; padding-top:10px; border-top:1px solid var(--line-2)}
  .nav .mob-only select,.nav .mob-only button{flex:1}
}
@media (min-width:761px){ .nav .mob-only{display:none} }
@media (max-width:420px){
  .brand-name{display:none}          /* icon alone is the mark at this width */
  .topbar-in{gap:6px; padding:0 10px}
  .topbar .btn-sm{padding:8px 9px; font-size:10px}
}
/* every flex row that holds text must be allowed to shrink */
.topbar-in > *{min-width:0}
.caro-foot{min-width:0}
.caro-txt h2{overflow-wrap:anywhere}


/* ===== v1.1.0: search bar, seller dashboard, uploads, video ===== */
.search-big{display:flex; gap:9px; align-items:center; background:var(--coal); border:1px solid var(--line);
  border-radius:var(--r); padding:0 0 0 14px; margin-top:4px}
.search-big:focus-within{border-color:var(--red); box-shadow:0 0 0 3px var(--red-soft)}
.search-big span{color:var(--dim); font-size:17px}
.search-big input{flex:1; min-width:0; background:none; border:none; outline:none; padding:15px 0; font-size:15.5px}
.search-big .btn{border-radius:0 var(--r) var(--r) 0; padding:15px 20px; align-self:stretch}

.vid-wrap{margin-top:12px; position:relative; padding-top:56.25%; border-radius:var(--r); overflow:hidden; border:1px solid var(--line)}
.vid-wrap iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* seller auth */
.auth-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:28px}
.auth-card{background:var(--coal); border:1px solid var(--line); border-radius:var(--r); padding:26px;
  display:flex; flex-direction:column; gap:12px}
.auth-card h2{font-size:19px}
.auth-card label{display:flex; flex-direction:column; gap:6px; font-family:var(--mono); font-size:10px;
  text-transform:uppercase; letter-spacing:.13em; color:var(--dim)}
.auth-card input{background:var(--void); border:1px solid var(--line); border-radius:var(--r); padding:12px;
  outline:none; font-family:var(--body); font-size:14.5px; color:var(--chalk); text-transform:none; letter-spacing:0}
.auth-card input:focus{border-color:var(--red)}
.auth-card .btn{margin-top:6px}
.alert-line{background:var(--coal); border:1px solid var(--red); border-left-width:3px; border-radius:var(--r);
  padding:12px 15px; font-size:14px; margin:18px 0 0}
.ok-line{background:var(--coal); border:1px solid var(--line); border-left:3px solid var(--red); border-radius:var(--r);
  padding:12px 15px; font-size:14px; margin:0 0 18px}
.fine{color:var(--dim); font-size:12.5px}

/* seller dashboard */
.dash-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:22px; flex-wrap:wrap}
.dash-tabs{display:flex; gap:6px; margin:24px 0 4px; border-bottom:1px solid var(--line-2); flex-wrap:wrap}
.dash-tabs a{padding:11px 15px; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--dim); text-decoration:none; border-bottom:2px solid transparent}
.dash-tabs a.on{color:var(--red); border-bottom-color:var(--red)}
.empty-box{border:1px dashed var(--line); border-radius:var(--r); padding:36px; text-align:center; color:var(--ash); margin-top:20px}
.mini-card{background:var(--coal); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; margin-bottom:10px}
.mini-top{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:10px}
.spark{display:flex; align-items:flex-end; gap:3px; height:46px}
.spark i{flex:1; background:linear-gradient(180deg,var(--red),var(--maroon)); border-radius:1px; min-height:3px; opacity:.9}

.edit-card{background:var(--coal); border:1px solid var(--line); border-radius:var(--r); margin-bottom:10px; overflow:hidden}
.edit-card summary{display:flex; align-items:center; gap:12px; padding:13px 15px; cursor:pointer; list-style:none}
.edit-card summary::-webkit-details-marker{display:none}
.edit-card summary img{width:46px; height:46px; object-fit:cover; border-radius:3px; flex:none; background:var(--slab)}
.edit-card summary > span:nth-child(2){flex:1; min-width:0}
.edit-card summary b{display:block; font-size:14.5px}
.edit-card[open] summary{border-bottom:1px solid var(--line-2)}
.edit-form{padding:18px; display:flex; flex-direction:column; gap:13px}
.edit-form label{display:flex; flex-direction:column; gap:6px; font-family:var(--mono); font-size:10px;
  text-transform:uppercase; letter-spacing:.13em; color:var(--dim)}
.edit-form input,.edit-form select{background:var(--void); border:1px solid var(--line); border-radius:var(--r);
  padding:11px 12px; outline:none; font-family:var(--body); font-size:14.5px; color:var(--chalk);
  text-transform:none; letter-spacing:0; width:100%}
.edit-form input:focus,.edit-form select:focus{border-color:var(--red)}
.edit-form input[type=file]{padding:9px; font-size:13px}
.edit-actions{display:flex; gap:9px; flex-wrap:wrap; margin-top:4px}
.add-form{border:1px solid var(--line); border-radius:var(--r); background:var(--coal); margin-top:22px}
.upload-row{display:flex; gap:14px; align-items:flex-start; background:var(--void); border:1px solid var(--line);
  border-radius:var(--r); padding:14px}
.upload-row .thumb{width:88px; height:88px; border-radius:3px; overflow:hidden; background:var(--slab); flex:none}
.upload-row .thumb img{width:100%; height:100%; object-fit:cover}
.upload-row > div:last-child{flex:1; min-width:0}
.upload-row .lbl{font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.13em;
  color:var(--dim); display:block; margin-bottom:7px}
.pill{font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.1em; padding:4px 8px;
  border-radius:3px; background:var(--raise); color:var(--ash); white-space:nowrap; flex:none}
.pill-live{background:var(--red); color:#fff}
.pill-pending{background:var(--red-soft); color:var(--red)}

@media (max-width:760px){
  .auth-grid{grid-template-columns:1fr}
  .search-big{padding-left:12px}
  .search-big input{font-size:15px; padding:13px 0}
  .search-big .btn{padding:13px 15px; font-size:11px}
  .edit-form .two{grid-template-columns:1fr}
  .upload-row{flex-direction:column}
  .edit-card summary{padding:12px}
}

/* search controls stack cleanly on a phone */
@media (max-width:760px){
  .controls{flex-direction:column; align-items:stretch; gap:9px}
  .controls > p{flex:none !important; margin-bottom:2px}
  .controls form{width:100%}
  .controls form .sel{flex:1; min-width:0}
  .chips a.chip{padding:8px 13px}
}