:root{
  --bg:#0b1020; --card:#111735; --card-2:#0e1530; --muted:#9fb0d0;
  --accent:#6ee7e7; --accent-2:#a78bfa; --border:#202a55; --chip:#0f2440; --brand:#e2e9ff;
  --topbar-h: 64px;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0; background:linear-gradient(180deg, #0b1020 0%, #0a0d1a 100%); color:#e8eeff; font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; padding-bottom:72px; padding-top:calc(var(--topbar-h) + 16px);}
.shell{display:grid; grid-template-columns: 64px 1fr; gap:16px; min-height:100vh; padding:16px;}
.sidebar{ background:var(--card); border:1px solid var(--border); border-radius:20px; padding:8px; display:flex; flex-direction:column; gap:8px; align-self:start; max-height:320px; overflow:auto; width:64px; transition:width .18s ease; position:sticky; top:calc(var(--topbar-h) + 16px); z-index:20; }
.sidebar.hidden{ width:0; padding:0; border-width:0; overflow:hidden; }
.sidebar.expanded{ width:220px; }
.sb-nav{ width:100%; }
.sb-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.sb-item{}
.sb-link{ display:flex; align-items:center; gap:10px; text-decoration:none; color:#cdd6ff; padding:8px; border-radius:10px; border:1px solid transparent; }
.sb-link:hover{ background:rgba(110,231,231,.06); border-color:var(--border); }
.sb-ico{ width:32px; height:32px; border-radius:10px; border:1px dashed var(--border); background:linear-gradient(160deg, #0f1430 0%, #0b1020 100%); flex:0 0 32px; display:grid; place-items:center; }
.sb-svg{ width:18px; height:18px; fill:#cdd6ff; opacity:.9; }
.sb-label{ white-space:nowrap; overflow:hidden; max-width:0; transition:max-width .18s ease; opacity:.0; }
.sidebar.expanded .sb-label{ max-width:140px; opacity:1; }
.sidebar.collapsed:hover .sb-label{ max-width:140px; opacity:1; }

/* Hamburger */
.hamburger{ width:40px; height:40px; display:grid; place-items:center; background:transparent; border:1px solid var(--border); border-radius:10px; margin-right:8px; cursor:pointer; }
.hamburger span{ display:block; width:18px; height:2px; background:#cdd6ff; margin:3px 0; }
.topbar{ position:fixed; left:0; right:0; top:0; height:var(--topbar-h); display:flex; align-items:center; gap:16px; padding:12px 18px; background:var(--card); border-bottom:1px solid var(--border); z-index:100; }
.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.logo{ width:36px; height:36px; border-radius:12px; background: radial-gradient(120% 140% at 10% 10%, var(--accent) 0%, var(--accent-2) 60%, #1b1f45 100%); border:1px solid var(--border); box-shadow:0 0 24px rgba(167,139,250,.25) inset; }
.brand h1{margin:0; font-size:18px; letter-spacing:.3px; color:var(--brand); font-weight:800;}
.search{flex:1; max-width:560px; display:flex; align-items:center; gap:8px; background:var(--card-2); border:1px solid var(--border); padding:10px 12px; border-radius:14px;}
.search input{flex:1; background:transparent; border:0; color:#dfe7ff; outline:none; font:600 14px Poppins, sans-serif;}
.chip{font:600 12px/1 Poppins, sans-serif; color:var(--accent); background:var(--chip); border:1px solid var(--border); padding:8px 10px; border-radius:999px;}
.category-bar{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 16px; padding:4px 0;}
.category-bar .category-button{appearance:none; -webkit-appearance:none; border:1px solid var(--border); background:var(--card-2); color:#cdd6ff; font:600 13px Poppins, sans-serif; padding:8px 14px; border-radius:999px; cursor:pointer; transition:background .18s ease, border-color .18s ease, color .18s ease;}
.category-bar .category-button:hover{background:rgba(110,231,231,.08); border-color:rgba(110,231,231,.35);}
.category-bar .category-button[aria-pressed="true"],
.category-bar .category-button.is-active{background:rgba(110,231,231,.18); color:#e8eeff; border-color:rgba(110,231,231,.6); box-shadow:0 0 12px rgba(110,231,231,.18);}
.grid{display:grid; grid-template-columns: repeat(4, 1fr); gap:16px;}
.ad-slot{ margin:24px 0; }
.ad-slot ins.adsbygoogle{ display:block; }
@media (max-width: 1100px){ .grid{ grid-template-columns: repeat(3, 1fr);} }
@media (max-width: 820px){ .shell{grid-template-columns:1fr} .grid{ grid-template-columns: repeat(2, 1fr);} }
/* Mobile drawer behavior */
@media (max-width: 820px){
  .sidebar{ display:block; position:fixed; left:16px; top:calc(var(--topbar-h) + 8px); bottom:72px; height:auto; max-height:calc(100vh - var(--topbar-h) - 72px - 16px); z-index:60; transform:translateX(-120%); width:220px; }
  .sidebar.expanded{ transform:translateX(0); }
  .sidebar.collapsed:hover .sb-label{ max-width:0; opacity:1; } /* no hover expansion on mobile */
}
@media (max-width: 520px){ .grid{ grid-template-columns: 1fr; } }
.card{ position:relative; overflow:hidden; border-radius:18px; background:linear-gradient(160deg, var(--card) 0%, #0f1430 100%); border:1px solid var(--border); min-height:160px; cursor:pointer; display:flex; flex-direction:column; justify-content:flex-end; text-decoration:none; color:inherit;}
.card:hover{ outline:2px solid rgba(110,231,231,.2);} 
.card:focus-visible{ outline:2px solid var(--accent); outline-offset: 3px; }
.card .thumb{ position:absolute; inset:0; opacity:.75; background:
  radial-gradient(120% 120% at 0% 0%, rgba(110,231,231,.15) 0%, transparent 50%),
  radial-gradient(120% 120% at 100% 0%, rgba(167,139,250,.15) 0%, transparent 55%),
  var(--thumb-image, none);
  background-size: cover, cover, cover;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center, center, center;
}
.card .label{ position:absolute; top:10px; left:10px; background:rgba(110,231,231,.14); color:var(--accent); border:1px solid var(--border); font:800 11px/1 Poppins, sans-serif; padding:6px 8px; border-radius:999px; letter-spacing:.4px; }
.card .title{ position:relative; padding:14px; font-weight:700; letter-spacing:.2px; color:#edf3ff; text-shadow:0 2px 10px rgba(0,0,0,.35); }
.card .subtitle{ position:relative; padding:0 14px 14px; color:var(--muted); font-size:13px; }
.uc{ position:absolute; inset:auto 10px 10px 10px; display:flex; justify-content:center; align-items:center; border:1px dashed var(--border); border-radius:12px; padding:16px; color:var(--muted); background:rgba(17,23,53,.4);} 
/* CLS-safe promo card placeholder (avoid 'ad' in class names to bypass blockers) */
.slot-card{ min-height:250px; display:flex; align-items:center; justify-content:center; position:relative; }
.slot-card .slot-box{ width:100%; height:100%; border:1px dashed var(--border); border-radius:12px; display:flex; align-items:center; justify-content:center; color:#9fb0d0; font:600 14px Poppins, sans-serif; background:rgba(11,16,32,.35); }
.slot-card .slot-badge{ position:absolute; top:8px; right:8px; font:700 10px/1 Poppins, sans-serif; color:#9fb0d0; background:rgba(15,20,48,.7); border:1px solid var(--border); padding:4px 6px; border-radius:999px; letter-spacing:.2px; }

/* Footer */
.site-footer{ position:fixed; left:0; right:0; bottom:0; padding:10px 16px; border-top:1px solid var(--border); display:flex; gap:12px; align-items:center; justify-content:space-between; color:#9fb0d0; background:rgba(11,16,32,.9); backdrop-filter: blur(4px); z-index:50; }
.footer-nav{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.footer-nav .ft-link{ color:#9fb0d0; text-decoration:none; }
.footer-nav .ft-link:hover{ text-decoration:underline; }
.footer-nav .sep{ opacity:.5; }
.lang-switch{ display:flex; gap:6px; }
.lang-btn{ background:transparent; border:1px solid var(--border); color:#cdd6ff; padding:6px 10px; border-radius:8px; cursor:pointer; }
.lang-btn[aria-pressed="true"]{ background:rgba(110,231,231,.12); color:#e8eeff; }

/* Accessibility: focus outlines for interactive elements */
button:focus-visible, a:focus-visible, input:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Utility: visually hidden content */
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }