/* ================= ZYNX GAMES — CORE STYLESHEET ================= */
:root{
  --bg:#08090D; --bg-secondary:#10121A; --card:#151823; --card-elevated:#1B1F2B;
  --purple:#8B5CF6; --cyan:#22D3EE; --lime:#A3E635;
  --text:#FFFFFF; --muted:#8F96A8;
  --radius:16px; --radius-sm:10px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --header-h:64px; --bottomnav-h:64px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Nunito','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  overflow-x:hidden; padding-bottom:var(--bottomnav-h);
}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
img{max-width:100%; display:block;}
h1,h2,h3,h4{margin:0; line-height:1.2;}
p{margin:0;}
ul{list-style:none; margin:0; padding:0;}
:focus-visible{outline:2px solid var(--cyan); outline-offset:2px; border-radius:4px;}
.zx-muted{color:var(--muted);}
.zx-container{max-width:1400px; margin:0 auto; padding:0 20px;}
@media(min-width:768px){ body{padding-bottom:0;} }

/* ===== fade-in utility ===== */
.zx-fade-in{animation:fadeIn .5s ease both;}
@keyframes fadeIn{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);}}
@media(prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* ===== Buttons ===== */
.zx-btn{
  display:inline-flex; align-items:center; gap:8px; border:none; border-radius:999px;
  padding:13px 24px; font-weight:700; font-size:14px; letter-spacing:.03em; transition:transform .2s, box-shadow .2s;
}
.zx-btn i{width:18px; height:18px;}
.zx-btn-primary{background:linear-gradient(135deg,var(--purple),#a855f7); color:#fff; box-shadow:0 0 0 rgba(139,92,246,.5);}
.zx-btn-primary:hover{ box-shadow:0 0 24px rgba(139,92,246,.6); transform:translateY(-2px); }
.zx-btn-ghost{background:rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.12);}
.zx-btn-ghost:hover{background:rgba(255,255,255,.12);}
.zx-icon-btn{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:#fff; width:40px; height:40px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;}
.zx-icon-btn:hover{background:rgba(255,255,255,.14);}
.zx-icon-btn i{width:18px; height:18px;}
.zx-icon-btn.active{ color:var(--lime); border-color:var(--lime); }

/* ===== Header ===== */
.zx-header{ position:sticky; top:0; z-index:100; background:rgba(8,9,13,.85); backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.06); }
.zx-header-inner{ max-width:1400px; margin:0 auto; display:flex; align-items:center; gap:16px; padding:12px 20px; height:var(--header-h); }
.zx-logo{ display:flex; align-items:center; gap:8px; font-weight:800; letter-spacing:.04em; flex-shrink:0;}
.zx-logo-mark{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--purple),var(--cyan)); }
.zx-logo-mark i{width:20px; height:20px; color:#fff;}
.zx-logo-text span{color:var(--cyan);}
.zx-search-desktop{ display:none; flex:1; max-width:420px; align-items:center; gap:8px; background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:999px; padding:9px 16px; }
.zx-search-desktop i{width:18px; height:18px; color:var(--muted);}
.zx-search-desktop input{ flex:1; background:transparent; border:none; color:#fff; outline:none; font-size:14px; }
.zx-nav-desktop{ display:none; align-items:center; gap:24px; margin-left:auto; font-weight:600; font-size:14px; color:var(--muted); }
.zx-nav-desktop a{ padding:6px 2px; border-bottom:2px solid transparent; transition:color .2s, border-color .2s; }
.zx-nav-desktop a:hover, .zx-nav-desktop a.active{ color:#fff; border-color:var(--purple); }
.zx-header-actions{ display:flex; align-items:center; gap:10px; margin-left:auto; }
@media(min-width:1024px){
  .zx-search-desktop{display:flex;}
  .zx-nav-desktop{display:flex; margin-left:24px;}
  .zx-header-actions{margin-left:0;}
  .zx-search-toggle{display:none;}
}
.zx-search-mobile{ max-height:0; overflow:hidden; transition:max-height .25s ease; border-bottom:1px solid rgba(255,255,255,.06); }
.zx-search-mobile.open{ max-height:70px; }
.zx-search-mobile form{ display:flex; align-items:center; gap:8px; padding:10px 16px; background:var(--bg-secondary); }
.zx-search-mobile input{ flex:1; background:transparent; border:none; color:#fff; outline:none; font-size:15px; }
.zx-search-mobile i{ color:var(--muted); width:18px; height:18px; }
.zx-search-mobile button{ background:none; border:none; color:var(--muted); }

/* ===== Mobile category rail ===== */
.zx-mobile-cats{ display:flex; gap:8px; overflow-x:auto; padding:10px 16px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.zx-mobile-cats::-webkit-scrollbar{display:none;}
@media(min-width:1024px){ #mobile-categories{display:none;} }
.zx-chip{ flex-shrink:0; display:inline-flex; align-items:center; gap:6px; background:var(--card); border:1px solid rgba(255,255,255,.08); color:var(--muted); padding:9px 16px; border-radius:999px; font-size:13px; font-weight:600; white-space:nowrap; transition:.2s;}
.zx-chip i{width:14px; height:14px;}
.zx-chip:hover{ color:#fff; border-color:var(--purple); background:var(--card-elevated); }

/* ===== Bottom nav ===== */
.zx-bottom-nav{ position:fixed; bottom:0; left:0; right:0; z-index:100; display:flex; background:rgba(16,18,26,.95); backdrop-filter:blur(10px); border-top:1px solid rgba(255,255,255,.08); height:var(--bottomnav-h); }
.zx-bottom-nav a{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:var(--muted); font-size:11px; font-weight:600; }
.zx-bottom-nav a i{width:20px; height:20px;}
.zx-bottom-nav a.active{ color:var(--cyan); }
@media(min-width:768px){ .zx-bottom-nav{display:none;} }

/* ===== Section headings ===== */
.zx-section{ padding:40px 0; }
.zx-section-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:20px; gap:12px; flex-wrap:wrap; }
.zx-section-head h2{ font-size:24px; font-weight:800; letter-spacing:.02em; }
.zx-section-head p{ color:var(--muted); font-size:14px; margin-top:4px; }
.zx-section-link{ color:var(--cyan); font-weight:600; font-size:14px; display:inline-flex; align-items:center; gap:4px; }
@media(min-width:768px){ .zx-section-head h2{font-size:30px;} }

/* ===== Hero ===== */
.zx-hero{ position:relative; margin:16px auto 0; max-width:1400px; padding:0 0; }
@media(min-width:768px){ .zx-hero{padding:20px 20px 0;} }
.zx-hero-track{ display:flex; transition:transform .6s cubic-bezier(.65,0,.35,1); border-radius:0; overflow:hidden; }
@media(min-width:768px){ .zx-hero-track{border-radius:24px;} }
.zx-hero-slide{ min-width:100%; position:relative; padding:60px 20px 60px; min-height:420px; display:flex; align-items:flex-end; overflow:hidden; }
@media(min-width:768px){ .zx-hero-slide{min-height:500px; padding:60px 60px;} }
.zx-hero-shape{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; }
.zx-hero-shape.s1{ width:300px; height:300px; top:-80px; right:-60px; background:var(--cyan); }
.zx-hero-shape.s2{ width:260px; height:260px; bottom:-100px; left:-60px; background:var(--purple); }
.zx-hero-content{ position:relative; z-index:2; max-width:640px; animation:heroMove 8s ease-in-out infinite alternate; }
@keyframes heroMove{ from{transform:translateY(0);} to{transform:translateY(-6px);} }
.zx-hero-kicker{ text-transform:uppercase; font-size:12px; font-weight:700; letter-spacing:.15em; color:var(--lime); margin-bottom:10px; }
.zx-hero-content h1{ font-size:32px; font-weight:900; margin-bottom:12px; }
@media(min-width:768px){ .zx-hero-content h1{font-size:48px;} }
.zx-hero-sub{ color:#dcdfe8; font-size:15px; margin-bottom:14px; display:block; }
.zx-hero-tag{ display:inline-flex; align-items:center; gap:8px; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.15); padding:6px 14px; border-radius:999px; font-size:13px; font-weight:700; margin-bottom:12px;}
.zx-hero-tag i{width:14px; height:14px;}
.zx-hero-desc{ display:none; }
.zx-hero-actions{ display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; }
.zx-hero-dots{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:3; }
.zx-dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.35); border:none; padding:0; transition:.2s; }
.zx-dot.active{ background:var(--cyan); width:22px; border-radius:6px; }
.zx-hero-arrow{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.15); color:#fff; width:38px; height:38px; border-radius:50%; display:none; align-items:center; justify-content:center; z-index:3; }
.zx-hero-arrow.prev{left:16px;} .zx-hero-arrow.next{right:16px;}
@media(min-width:768px){ .zx-hero-arrow{display:flex;} }

/* ===== Art thumbnails (procedural) ===== */
.zx-art{ position:relative; width:100%; height:100%; overflow:hidden; border-radius:inherit; display:flex; align-items:center; justify-content:center; }
.zx-art-shape{ position:absolute; border-radius:50%; filter:blur(30px); }
.zx-art-shape.s1{ width:60%; height:60%; top:-20%; left:-15%; background:rgba(255,255,255,.15); }
.zx-art-shape.s2{ width:50%; height:50%; bottom:-20%; right:-15%; background:rgba(0,0,0,.25); }
.zx-art-icon{ width:38%; height:38%; color:rgba(255,255,255,.85); filter:drop-shadow(0 6px 14px rgba(0,0,0,.4)); position:relative; z-index:2; }
.zx-art.big .zx-art-icon{ width:26%; height:26%; }

.art-1{background:linear-gradient(135deg,#8B5CF6,#22D3EE);}
.art-2{background:linear-gradient(135deg,#22D3EE,#151823);}
.art-3{background:linear-gradient(160deg,#A3E635,#10121A);}
.art-4{background:linear-gradient(140deg,#8B5CF6,#151823);}
.art-5{background:linear-gradient(120deg,#22D3EE,#8B5CF6);}
.art-6{background:linear-gradient(150deg,#F97316,#151823);}
.art-7{background:linear-gradient(135deg,#EC4899,#151823);}
.art-8{background:linear-gradient(160deg,#8B5CF6,#A3E635);}
.art-9{background:linear-gradient(135deg,#10121A,#8B5CF6);}
.art-10{background:linear-gradient(140deg,#22D3EE,#A3E635);}
.art-11{background:linear-gradient(150deg,#EF4444,#151823);}
.art-12{background:linear-gradient(120deg,#8B5CF6,#F97316);}

/* ===== Category tiles (large) ===== */
.zx-cat-tiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media(min-width:640px){ .zx-cat-tiles{grid-template-columns:repeat(3,1fr);} }
@media(min-width:1024px){ .zx-cat-tiles{grid-template-columns:repeat(4,1fr);} }
@media(min-width:1280px){ .zx-cat-tiles{grid-template-columns:repeat(6,1fr);} }
.zx-cat-tile{ background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:22px 16px; display:flex; flex-direction:column; align-items:flex-start; gap:8px; transition:transform .2s, border-color .2s, background .2s; text-align:left; width:100%; }
.zx-cat-tile i{ width:26px; height:26px; color:var(--cyan); }
.zx-cat-tile h3{ font-size:15px; font-weight:700; }
.zx-cat-tile span{ font-size:12px; color:var(--muted); }
.zx-cat-tile:hover, .zx-cat-tile.active{ transform:translateY(-4px); border-color:var(--purple); background:var(--card-elevated); box-shadow:var(--shadow); }

/* ===== Standard Game Card ===== */
.zx-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media(min-width:640px){ .zx-grid{grid-template-columns:repeat(3,1fr); gap:18px;} }
@media(min-width:1024px){ .zx-grid{grid-template-columns:repeat(4,1fr);} }
@media(min-width:1440px){ .zx-grid{grid-template-columns:repeat(6,1fr);} }

.zx-card{ background:var(--card); border-radius:var(--radius); overflow:hidden; border:1px solid rgba(255,255,255,.06); cursor:pointer; transition:transform .25s, box-shadow .25s, border-color .25s; animation:fadeIn .4s ease both; }
.zx-card:hover{ transform:translateY(-6px); box-shadow:0 16px 34px rgba(139,92,246,.25); border-color:rgba(139,92,246,.4); }
.zx-card-thumb{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.zx-card-thumb .zx-art{ transition:transform .4s ease; }
.zx-card:hover .zx-card-thumb .zx-art{ transform:scale(1.08); }
.zx-card-thumb::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.55), transparent 50%); opacity:0; transition:opacity .25s; }
.zx-card:hover .zx-card-thumb::after{ opacity:1; }
.zx-play-overlay{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.7); width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.16); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.3); color:#fff; display:flex; align-items:center; justify-content:center; opacity:0; transition:.25s; z-index:3; }
.zx-play-overlay i{width:20px; height:20px;}
.zx-card:hover .zx-play-overlay, .zx-card:focus-within .zx-play-overlay{ opacity:1; transform:translate(-50%,-50%) scale(1); }
@media(hover:none){ .zx-play-overlay{ opacity:1; transform:translate(-50%,-50%) scale(.85); width:40px; height:40px; background:rgba(0,0,0,.45);} }
.zx-card-body{ padding:12px 14px 14px; position:relative; }
.zx-card-body h3, .zx-card-body h4{ font-size:15px; font-weight:700; margin-bottom:2px; }
.zx-card-meta{ display:flex; align-items:center; gap:10px; margin-top:8px; font-size:12px; }
.zx-cat-pill{ position:absolute; top:-30px; right:12px; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.15); font-size:10px; font-weight:700; padding:4px 9px; border-radius:999px; color:#fff; }
.zx-rating{ display:inline-flex; align-items:center; gap:4px; color:var(--lime); font-weight:700; font-size:13px; }
.zx-star-icon{ width:14px; height:14px; fill:var(--lime); }
.zx-players{ display:inline-flex; align-items:center; gap:4px; color:var(--muted); font-size:12px; }
.zx-players i{width:13px; height:13px;}
.zx-badge{ position:absolute; top:8px; left:8px; z-index:3; font-size:10px; font-weight:800; padding:4px 9px; border-radius:999px; letter-spacing:.04em; }
.badge-new{ background:var(--lime); color:#08090D; }
.badge-trend{ background:rgba(0,0,0,.5); color:#fb923c; top:8px; right:8px; left:auto; display:flex; align-items:center; justify-content:center; padding:5px; }
.badge-trend i{width:13px; height:13px;}
.zx-fav-btn{ position:absolute; top:8px; right:8px; z-index:4; width:32px; height:32px; border-radius:50%; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.2); color:#fff; display:flex; align-items:center; justify-content:center; }
.zx-fav-btn i{width:15px; height:15px;}
.zx-fav-btn.active{ color:#fb7185; background:rgba(0,0,0,.6); }
.zx-fav-btn.active i{ fill:#fb7185; }
.zx-fav-btn.pop{ animation:heartPop .35s ease; }
@keyframes heartPop{ 0%{transform:scale(1);} 40%{transform:scale(1.4);} 100%{transform:scale(1);} }

/* compact variant */
.zx-card-compact .zx-card-thumb{ aspect-ratio:1/1; }
.zx-card-compact .zx-card-body{ padding:10px 10px 12px; }

/* ===== Horizontal card ===== */
.zx-h-card{ display:flex; align-items:center; gap:14px; background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius-sm); padding:10px; cursor:pointer; transition:.2s; position:relative; }
.zx-h-card:hover{ border-color:var(--purple); background:var(--card-elevated); }
.zx-h-thumb{ width:76px; height:76px; border-radius:12px; overflow:hidden; flex-shrink:0; position:relative; }
.zx-h-body{ flex:1; min-width:0; }
.zx-h-body h3{ font-size:14px; font-weight:700; }
.zx-h-meta{ display:flex; gap:10px; margin-top:6px; font-size:12px; }

/* ===== Ranking card ===== */
.zx-rank-list{ display:flex; flex-direction:column; gap:10px; }
.zx-rank-card{ display:grid; grid-template-columns:36px 60px 1fr auto; align-items:center; gap:14px; background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius-sm); padding:10px 14px; cursor:pointer; transition:.2s; }
.zx-rank-card:hover{ border-color:var(--cyan); background:var(--card-elevated); }
.zx-rank-num{ font-size:20px; font-weight:900; color:transparent; -webkit-text-stroke:1.5px var(--purple); }
.zx-rank-thumb{ width:60px; height:60px; border-radius:10px; overflow:hidden; }
.zx-rank-info h3{ font-size:14px; font-weight:700; }
.zx-rank-info p{ font-size:12px; color:var(--muted); }
.zx-rank-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; font-size:12px; }
@media(max-width:479px){
  .zx-rank-card{grid-template-columns:28px 50px 1fr; }
  .zx-rank-meta{display:none;}
}

/* ===== Featured card ===== */
.zx-featured-card{ display:flex; flex-direction:column; background:linear-gradient(160deg, var(--card-elevated), var(--card)); border:1px solid rgba(139,92,246,.25); border-radius:24px; overflow:hidden; box-shadow:var(--shadow); }
@media(min-width:768px){ .zx-featured-card{flex-direction:row; min-height:380px;} }
.zx-featured-art{ position:relative; min-height:220px; }
@media(min-width:768px){ .zx-featured-art{width:45%; min-height:auto;} }
.zx-featured-body{ padding:24px; display:flex; flex-direction:column; gap:12px; flex:1; }
@media(min-width:768px){ .zx-featured-body{padding:44px;} }
.zx-eyebrow{ display:inline-flex; align-items:center; gap:6px; color:var(--lime); font-weight:800; font-size:12px; letter-spacing:.1em; }
.zx-eyebrow i{width:14px;height:14px;}
.zx-featured-body h3{ font-size:26px; font-weight:900; }
@media(min-width:768px){ .zx-featured-body h3{font-size:36px;} }
.zx-featured-body p{ color:#c9cddb; font-size:14px; max-width:520px; }
.zx-featured-meta{ display:flex; gap:16px; align-items:center; }
.zx-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.zx-tag{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); padding:5px 12px; border-radius:999px; font-size:12px; font-weight:600; color:#e5e7eb; }
.zx-featured-actions{ display:flex; gap:12px; margin-top:8px; flex-wrap:wrap; }

/* ===== Detail page ===== */
.zx-detail{ max-width:1200px; margin:0 auto; padding:24px 20px 40px; }
.zx-detail-wrap{ display:flex; flex-direction:column; gap:24px; background:var(--card); border-radius:24px; overflow:hidden; border:1px solid rgba(255,255,255,.06); }
@media(min-width:900px){ .zx-detail-wrap{flex-direction:row;} }
.zx-detail-art{ min-height:260px; position:relative; }
@media(min-width:900px){ .zx-detail-art{width:42%; min-height:auto;} }
.zx-detail-body{ padding:24px; display:flex; flex-direction:column; gap:12px; flex:1;}
@media(min-width:900px){ .zx-detail-body{padding:40px;} }
.zx-detail-body h1{ font-size:28px; font-weight:900; }
@media(min-width:768px){ .zx-detail-body h1{font-size:38px;} }
.zx-detail-meta{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.zx-detail-desc{ color:#c9cddb; font-size:15px; max-width:640px; }
.zx-detail-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }

/* ===== Player ===== */
.zx-player-section{ max-width:1200px; margin:0 auto; padding:0 20px 40px; display:none; }
.zx-player-section.open{ display:block; animation:fadeIn .4s ease both; }
.zx-player{ border-radius:20px; overflow:hidden; border:1px solid rgba(255,255,255,.08); background:var(--card); }
.zx-player-frame{ position:relative; aspect-ratio:16/9; width:100%; display:flex; align-items:center; justify-content:center; }
.zx-player-mock{ position:relative; z-index:2; text-align:center; color:#fff; display:flex; flex-direction:column; align-items:center; gap:10px; }
.zx-player-mock i{ width:56px; height:56px; opacity:.85; }
.zx-player-mock p{ font-weight:600; font-size:14px; color:rgba(255,255,255,.85); }
.zx-loading-bar{ width:180px; height:5px; background:rgba(255,255,255,.15); border-radius:99px; overflow:hidden; display:block; }
.zx-loading-bar span{ display:block; width:40%; height:100%; background:var(--cyan); border-radius:99px; animation:loadMove 1.6s ease-in-out infinite; }
@keyframes loadMove{ 0%{transform:translateX(-100%);} 100%{transform:translateX(350%);} }
.zx-player-fullscreen{ position:absolute; top:14px; right:14px; z-index:3; width:38px; height:38px; border-radius:50%; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.2); color:#fff; display:flex; align-items:center; justify-content:center; }
.zx-player-bar{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; flex-wrap:wrap; gap:10px; }
.zx-player-title h2{ font-size:18px; font-weight:800; }
.zx-player-actions{ display:flex; gap:10px; }

/* ===== Explore filters ===== */
.zx-explore-head{ padding:24px 20px 0; max-width:1400px; margin:0 auto; }
.zx-explore-search{ display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:12px 18px; margin-bottom:16px; }
.zx-explore-search i{ color:var(--muted); width:18px; height:18px; flex-shrink:0; }
.zx-explore-search input{ flex:1; background:transparent; border:none; outline:none; color:#fff; font-size:15px; }
.zx-filters{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:14px; }
@media(min-width:640px){ .zx-filters{grid-template-columns:repeat(4,1fr);} }
.zx-filters select{ width:100%; background:var(--card); color:#fff; border:1px solid rgba(255,255,255,.08); padding:11px 14px; border-radius:10px; font-size:13px; font-weight:600; appearance:none; }
.zx-results-count{ color:var(--muted); font-size:13px; margin-bottom:16px; font-weight:600; }

/* ===== Categories page ===== */
.zx-categories-head{ padding:32px 20px 10px; max-width:1400px; margin:0 auto; }
.zx-cat-results{ background:var(--bg-secondary); padding:30px 0 50px; margin-top:20px; }

/* ===== Favorites page ===== */
.zx-empty-page{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:80px 20px; gap:14px; }
.zx-empty-page i{ width:64px; height:64px; color:var(--muted); }
.zx-empty-page h2{ font-size:22px; font-weight:800; }
.zx-empty-page p{ color:var(--muted); max-width:320px; }
.zx-empty{ grid-column:1/-1; display:flex; flex-direction:column; align-items:center; padding:60px 20px; text-align:center; gap:8px; color:var(--muted); }
.zx-empty i{ width:44px; height:44px; }

/* ===== Toast ===== */
.zx-toast-root{ position:fixed; bottom:80px; left:50%; transform:translateX(-50%); z-index:1000; display:flex; flex-direction:column; gap:8px; align-items:center; }
@media(min-width:768px){ .zx-toast-root{bottom:24px;} }
.zx-toast{ display:flex; align-items:center; gap:8px; background:var(--card-elevated); border:1px solid rgba(255,255,255,.15); padding:12px 20px; border-radius:999px; box-shadow:var(--shadow); opacity:0; transform:translateY(20px); transition:.3s; font-size:13px; font-weight:600; }
.zx-toast.show{ opacity:1; transform:translateY(0); }
.zx-toast i{ width:16px; height:16px; color:var(--lime); }
.zx-toast-success i{ color:#fb7185; fill:#fb7185; }

/* ===== Footer ===== */
.zx-footer{ background:var(--bg-secondary); border-top:1px solid rgba(255,255,255,.06); margin-top:40px; padding-top:40px; }
.zx-footer-top{ max-width:1400px; margin:0 auto; padding:0 20px 30px; display:grid; grid-template-columns:1fr; gap:30px; }
@media(min-width:768px){ .zx-footer-top{grid-template-columns:1.6fr 1fr 1fr 1fr;} }
.zx-footer-brand p{ color:var(--muted); margin-top:10px; font-size:13px; }
.zx-footer-col h4{ font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:#fff; margin-bottom:12px; }
.zx-footer-col a{ display:block; color:var(--muted); font-size:14px; padding:6px 0; transition:.2s; }
.zx-footer-col a:hover{ color:var(--cyan); }
.zx-footer-bottom{ text-align:center; padding:18px 20px; border-top:1px solid rgba(255,255,255,.06); color:var(--muted); font-size:12px; }

/* ===== Skeleton shimmer (utility, optional use) ===== */
.zx-skeleton{ background:linear-gradient(90deg, var(--card) 25%, var(--card-elevated) 50%, var(--card) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:var(--radius); }
@keyframes shimmer{ from{background-position:200% 0;} to{background-position:-200% 0;} }

/* prevent horizontal overflow globally */
.zx-container, .zx-section, section{ max-width:100%; }