/* ============================================================
   Nexo Hub — style.css  v9
   Theme: Clean modern. Dark = deep slate. Light = warm white.
   No neon, no glow orbs, no shimmer spam. Just good design.
   ============================================================ */

/* ── DESIGN TOKENS ──────────────────────────────────────────── */
:root {
  /* Dark theme (default) */
  --bg:        #0f1117;
  --bg2:       #151821;
  --bg3:       #1c2030;
  --surface:   #1c2030;
  --surface2:  #232840;
  --border:    rgba(255,255,255,0.07);
  --border2:   rgba(255,255,255,0.12);
  --text:      #e8eaf0;
  --text2:     #9ba3b8;
  --muted:     #5c6478;
  --accent:    #4f7fff;
  --accent-hover: #6b91ff;
  --accent-dim:   rgba(79,127,255,0.12);
  --accent-dim2:  rgba(79,127,255,0.2);
  --tag-free:  #22c55e;
  --tag-paid:  #f59e0b;
  --radius:    10px;
  --radius-lg: 14px;
  --hdr:       60px;
  --nav:       48px;
  --font-d:    'Inter', system-ui, sans-serif;
  --font-m:    'Inter', system-ui, sans-serif;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.6);
}

[data-theme="light"] {
  --bg:        #f7f8fc;
  --bg2:       #eef0f7;
  --bg3:       #e5e7f0;
  --surface:   #ffffff;
  --surface2:  #f0f2fb;
  --border:    rgba(0,0,0,0.08);
  --border2:   rgba(0,0,0,0.13);
  --text:      #111827;
  --text2:     #4b5563;
  --muted:     #9ca3af;
  --accent:    #3b6ef5;
  --accent-hover: #2a5ce0;
  --accent-dim:   rgba(59,110,245,0.10);
  --accent-dim2:  rgba(59,110,245,0.18);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
}

/* ── RESET ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body {
  background:var(--bg); color:var(--text);
  font-family:var(--font-m); min-height:100vh;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}

/* ── SUBTLE BACKGROUND TEXTURE ──────────────────────────────── */
.noise-overlay {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  opacity:.4;
}
.grid-bg {
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.grid-bg::before, .grid-bg::after {
  content:''; position:absolute; border-radius:50%; filter:blur(80px);
  opacity:.06; will-change:transform;
}
.grid-bg::before {
  width:420px; height:420px; top:-10%; left:8%;
  background:var(--accent);
  animation:driftSlow 22s ease-in-out infinite;
}
.grid-bg::after {
  width:380px; height:380px; bottom:-12%; right:6%;
  background:#22c55e;
  animation:driftSlow2 26s ease-in-out infinite;
}
[data-theme="light"] .grid-bg::before,
[data-theme="light"] .grid-bg::after { opacity:.04 }
@media(max-width:680px){ .grid-bg::before,.grid-bg::after{ display:none } }
@media(prefers-reduced-motion:reduce){
  .grid-bg::before,.grid-bg::after{ animation:none }
}

/* ── KEYFRAMES ──────────────────────────────────────────────── */
@keyframes fadeIn   { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@keyframes cardIn   { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
@keyframes dotPulse { 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes cc-bump  { 0%{transform:scale(1)} 45%{transform:scale(1.3)} 100%{transform:scale(1)} }
@keyframes slideDown   { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
@keyframes popScale    { 0%{transform:scale(.92);opacity:0} 60%{transform:scale(1.02)} 100%{transform:scale(1);opacity:1} }
@keyframes logoSpin    { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes underlineGrow { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes shakeNo     { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
@keyframes ripple      { from{transform:scale(0);opacity:.5} to{transform:scale(2.6);opacity:0} }
@keyframes float-y     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
@keyframes spinSlow    { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes drawCheck   { from{stroke-dashoffset:24} to{stroke-dashoffset:0} }
@keyframes countUp     { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }
@keyframes shimmerSweep{ 0%{background-position:-150% 0} 100%{background-position:250% 0} }
@keyframes heroEnter   { from{opacity:0;transform:translateY(16px) scale(.98)} to{opacity:1;transform:none} }
@keyframes menuSlide   { from{transform:translateX(24px);opacity:0} to{transform:none;opacity:1} }
@keyframes barFill     { from{width:0} to{width:var(--fill,100%)} }
@keyframes wiggle      { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-3deg)} 75%{transform:rotate(3deg)} }
@keyframes breathe     { 0%,100%{opacity:.6} 50%{opacity:1} }
@keyframes driftSlow   { 0%{transform:translate(0,0)} 50%{transform:translate(6px,-8px)} 100%{transform:translate(0,0)} }
@keyframes driftSlow2  { 0%{transform:translate(0,0)} 50%{transform:translate(-8px,6px)} 100%{transform:translate(0,0)} }
@keyframes haloPulse   { 0%,100%{box-shadow:0 0 0 0 var(--accent-dim)} 50%{box-shadow:0 0 0 6px transparent} }
@keyframes faviconIdle { 0%,100%{transform:rotate(0)} 50%{transform:rotate(4deg)} }
@keyframes glintSweep  { 0%{transform:translateX(-120%) skewX(-15deg)} 100%{transform:translateX(220%) skewX(-15deg)} }
@keyframes borderGlow  { 0%,100%{border-color:var(--border)} 50%{border-color:var(--border2)} }

/* ── HEADER ─────────────────────────────────────────────────── */
.header {
  position:sticky; top:0; z-index:100;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  animation:fadeIn .3s ease both;
}
.header::after { display:none } /* no rainbow underline */
.header-inner {
  max-width:1440px; margin:0 auto; padding:0 24px;
  height:var(--hdr);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}

/* ── LOGO ───────────────────────────────────────────────────── */
.logo {
  display:flex; align-items:center; gap:9px;
  text-decoration:none;
  font-family:var(--font-d); font-weight:800; font-size:1.1rem;
  letter-spacing:-.03em; white-space:nowrap; flex-shrink:0;
  color:var(--text);
}
.logo-img {
  width:32px; height:32px; border-radius:8px;
  object-fit:cover; border:1px solid var(--border2);
  aspect-ratio:1; transition:transform .4s cubic-bezier(.34,1.56,.64,1), border-color .2s;
}
.logo:hover .logo-img { transform:rotate(-8deg) scale(1.08); border-color:var(--accent) }
.logo-text {
  color:var(--text);
  margin:0; padding:0; font:inherit; line-height:1;
  /* no gradient animation */
  -webkit-text-fill-color:unset;
  background:none;
}

/* ── HEADER CONTROLS ────────────────────────────────────────── */
.header-controls {
  display:flex; align-items:center; gap:10px;
  flex:1; max-width:520px;
}
.search-wrap { position:relative; flex:1; display:flex; align-items:center }
.search-icon {
  position:absolute; left:11px; color:var(--muted);
  pointer-events:none; transition:color .2s; flex-shrink:0;
}
.search-wrap:focus-within .search-icon { color:var(--accent) }
.search-wrap input {
  width:100%; background:var(--surface); border:1px solid var(--border2);
  color:var(--text); font-family:var(--font-m); font-size:.875rem;
  padding:8px 42px 8px 34px; border-radius:var(--radius); outline:none;
  transition:border-color .2s, box-shadow .25s, background .2s;
}
.search-wrap input::placeholder { color:var(--muted); transition:opacity .2s }
.search-wrap input:focus::placeholder { opacity:.5 }
.search-wrap input:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-dim);
  background:var(--surface2);
}
.search-wrap kbd {
  position:absolute; right:9px;
  background:var(--bg3); border:1px solid var(--border2);
  color:var(--muted); font-family:var(--font-m); font-size:.66rem;
  padding:2px 5px; border-radius:4px; pointer-events:none;
  transition:opacity .2s;
}
.search-wrap:focus-within kbd { opacity:0 }

.site-count {
  font-size:.7rem; color:var(--muted);
  white-space:nowrap; font-family:var(--font-m);
  padding:5px 10px; background:var(--surface);
  border:1px solid var(--border); border-radius:100px;
  transition:color .3s;
}
.site-count.updated { color:var(--accent); animation:popScale .3s cubic-bezier(.34,1.56,.64,1) }

.random-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; flex-shrink:0;
  background:var(--surface); border:1px solid var(--border2);
  border-radius:var(--radius); cursor:pointer; font-size:1rem;
  transition:background .2s, border-color .2s, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.random-btn:hover { background:var(--surface2); border-color:var(--accent); transform:rotate(-12deg) scale(1.08) }
.random-btn:active { transform:rotate(10deg) scale(.9) }
.random-btn.rolling { animation:diceRoll .5s ease }
@keyframes diceRoll { 0%{transform:rotate(0)} 25%{transform:rotate(-25deg) scale(1.1)} 50%{transform:rotate(20deg) scale(1.15)} 75%{transform:rotate(-10deg) scale(1.05)} 100%{transform:rotate(0) scale(1)} }

.submit-nav-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 14px;
  background:var(--accent); border:none;
  border-radius:var(--radius); color:#fff;
  font-family:var(--font-m); font-size:.75rem; font-weight:600;
  text-decoration:none; white-space:nowrap;
  transition:background .2s, transform .15s, box-shadow .2s;
}
.submit-nav-btn:hover {
  background:var(--accent-hover);
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
}
.submit-nav-btn:active { transform:translateY(0) scale(.96) }
.submit-nav-btn:hover .submit-nav-icon { animation:wiggle .4s ease }
.submit-nav-icon { font-size:.9rem; line-height:1; display:inline-block }

/* ── CAT NAV ─────────────────────────────────────────────────── */
.cat-nav {
  position:sticky; top:var(--hdr); z-index:90;
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; overflow:hidden;
  animation:fadeIn .3s .05s ease both;
}
.cat-nav-inner {
  flex:1; display:flex; gap:4px; overflow-x:auto;
  scrollbar-width:none; padding:8px 10px; scroll-behavior:smooth;
}
.cat-nav-inner::-webkit-scrollbar { display:none }
.cat-nav::before,.cat-nav::after {
  content:''; position:absolute; top:0; bottom:0; width:40px; pointer-events:none; z-index:1;
}
.cat-nav::before { left:36px; background:linear-gradient(to right,var(--bg2),transparent) }
.cat-nav::after  { right:36px; background:linear-gradient(to left, var(--bg2),transparent) }
.cat-nav.at-start::before { opacity:0 }
.cat-nav.at-end::after    { opacity:0 }

.cat-scroll-btn {
  flex-shrink:0; width:30px; height:30px;
  background:var(--surface); border:1px solid var(--border2);
  color:var(--text2); font-size:1rem; border-radius:8px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  margin:0 4px; z-index:2;
  transition:background .18s, border-color .18s, color .18s, transform .15s;
}
.cat-scroll-btn:hover { background:var(--surface2); border-color:var(--accent); color:var(--accent); transform:scale(1.08) }
.cat-scroll-btn:active { transform:scale(.92) }
.cat-scroll-btn:disabled { opacity:.2; pointer-events:none }

.cat-btn {
  background:transparent; border:1px solid transparent;
  color:var(--text2); font-family:var(--font-m); font-size:.73rem; font-weight:500;
  padding:5px 12px; border-radius:var(--radius); cursor:pointer;
  white-space:nowrap; flex-shrink:0; position:relative;
  transition:background .16s, color .16s, border-color .16s, transform .15s;
}
.cat-btn:hover { background:var(--surface); border-color:var(--border2); color:var(--text); transform:translateY(-1px) }
.cat-btn:active { transform:translateY(0) scale(.97) }
.cat-btn.active {
  background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600;
  animation:popScale .25s cubic-bezier(.34,1.56,.64,1);
}
.cat-btn-fav { color:#f59e0b !important }
.cat-btn-fav:hover { background:rgba(245,158,11,0.1) !important; border-color:rgba(245,158,11,0.3) !important }
.cat-btn-fav.active { background:rgba(245,158,11,0.15) !important; border-color:#f59e0b !important; color:#f59e0b !important }
.cat-btn-recent { color:#06b6d4 !important }
.cat-btn-recent:hover { background:rgba(6,182,212,0.1) !important; border-color:rgba(6,182,212,0.3) !important }
.cat-btn-recent.active { background:rgba(6,182,212,0.15) !important; border-color:#06b6d4 !important; color:#06b6d4 !important }

/* ── MAIN ───────────────────────────────────────────────────── */
.main {
  position:relative; z-index:1;
  max-width:1440px; margin:0 auto;
  padding:28px 24px 80px;
}
.section-label {
  font-family:var(--font-d); font-size:.65rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  margin:0 0 16px; display:flex; align-items:center; gap:10px;
  animation:fadeIn .3s ease both;
}
.section-label::after { content:''; flex:1; height:1px; background:var(--border) }

/* ── FILTER BAR (replaces sort buttons) ─────────────────────── */
.filter-bar {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:20px; padding:10px 14px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg);
  animation:slideDown .3s .05s ease both;
}
.filter-bar-label {
  font-size:.7rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
  white-space:nowrap; flex-shrink:0;
}
.filter-select {
  appearance:none; -webkit-appearance:none;
  background:var(--bg2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235c6478' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
  border:1px solid var(--border2); border-radius:var(--radius);
  color:var(--text); font-family:var(--font-m); font-size:.78rem; font-weight:500;
  padding:6px 30px 6px 11px; cursor:pointer; outline:none;
  transition:border-color .18s, box-shadow .18s, transform .15s;
  min-width:140px;
}
.filter-select:hover { border-color:var(--accent); transform:translateY(-1px) }
.filter-select:active { transform:translateY(0) scale(.98) }
.filter-select:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim) }
.filter-sep { width:1px; height:20px; background:var(--border2); flex-shrink:0 }
.filter-drag-hint {
  margin-left:auto; font-size:.7rem; color:var(--muted);
  font-weight:500; display:none; white-space:nowrap;
}
.filter-drag-hint.visible { display:inline }
.clear-recents-btn {
  margin-left:auto; padding:5px 12px; border-radius:var(--radius);
  background:transparent; border:1px solid var(--border2);
  color:var(--muted); font-family:var(--font-m); font-size:.72rem; font-weight:500;
  cursor:pointer; transition:border-color .18s, color .18s, transform .15s;
}
.clear-recents-btn:hover { border-color:#ef4444; color:#ef4444; transform:translateY(-1px) }
.clear-recents-btn:active { transform:translateY(0) scale(.96) }

/* ── CARDS GRID ─────────────────────────────────────────────── */
.cards-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(272px,1fr));
  gap:12px; align-items:stretch;
  animation:fadeIn .35s ease both;
}

/* ── CARD ───────────────────────────────────────────────────── */
.card-wrap { position:relative; display:flex; flex-direction:column; height:100% }
.card-wrap--fav>.card { border-color:rgba(245,158,11,0.3) !important }

.card {
  position:relative;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:16px 16px 44px;
  cursor:pointer; text-decoration:none;
  display:flex; flex-direction:column; gap:7px;
  overflow:hidden; height:100%;
  opacity:0; animation:cardIn .3s ease both;
  transition:transform .2s ease, border-color .2s, box-shadow .2s, background .2s;
}
/* Left colour stripe */
.card::before {
  content:''; position:absolute; top:0; left:0; bottom:0; width:3px;
  background:var(--card-color, var(--accent));
  opacity:0; transition:opacity .2s;
  border-radius:var(--radius-lg) 0 0 var(--radius-lg);
}
.card:hover {
  transform:translateY(-3px);
  background:var(--surface2);
  border-color:var(--border2);
  box-shadow:var(--shadow-md);
}
.card:hover::before { opacity:1 }
.card:active { transform:translateY(-1px) }

/* Stagger */
.card:nth-child(1){animation-delay:.02s}.card:nth-child(2){animation-delay:.04s}
.card:nth-child(3){animation-delay:.06s}.card:nth-child(4){animation-delay:.08s}
.card:nth-child(5){animation-delay:.10s}.card:nth-child(6){animation-delay:.12s}
.card:nth-child(7){animation-delay:.14s}.card:nth-child(8){animation-delay:.16s}
.card:nth-child(9){animation-delay:.18s}.card:nth-child(10){animation-delay:.20s}
.card:nth-child(11){animation-delay:.22s}.card:nth-child(12){animation-delay:.24s}
.card:nth-child(n+13){animation-delay:.26s}

.card-top { display:flex; align-items:center; justify-content:space-between; gap:8px }
.card-favicon {
  width:20px; height:20px; border-radius:5px; object-fit:cover; flex-shrink:0;
  background:var(--bg3); transition:transform .2s;
}
.card:hover .card-favicon { transform:scale(1.08) }
.card-name {
  font-family:var(--font-d); font-weight:600; font-size:.9rem;
  color:var(--text); flex:1; line-height:1.3; transition:color .18s;
}
.card-arrow {
  color:var(--muted); font-size:.85rem; flex-shrink:0;
  transition:transform .2s, color .2s;
}
.card:hover .card-arrow { transform:translate(3px,-3px); color:var(--accent) }
.card-desc {
  font-size:.75rem; color:var(--text2); line-height:1.65; flex:1;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.card-footer { display:flex; flex-wrap:wrap; gap:4px; margin-top:3px }

/* Tags */
.tag {
  --tag-bg:#6b7280;
  display:inline-flex; align-items:center;
  font-size:.6rem; font-family:var(--font-m); font-weight:600; letter-spacing:.03em;
  padding:2px 7px; border-radius:100px; white-space:nowrap;
  background:color-mix(in srgb,var(--tag-bg) 12%,transparent);
  color:color-mix(in srgb,var(--tag-bg) 80%,white 50%);
  border:1px solid color-mix(in srgb,var(--tag-bg) 25%,transparent);
  transition:transform .18s, background .18s;
}
.card:hover .tag { transform:translateY(-1px) }
[data-theme="light"] .tag {
  background:color-mix(in srgb,var(--tag-bg) 10%,transparent);
  color:color-mix(in srgb,var(--tag-bg) 70%,black 30%);
}

/* ── HEALTH / UPTIME BADGE ─────────────────────────────────────── */
.health-badge {
  display:inline-flex; align-items:center; gap:3px;
  font-size:.6rem; font-family:var(--font-m); font-weight:600; letter-spacing:.03em;
  padding:2px 7px; border-radius:100px; white-space:nowrap; cursor:default;
  background:rgba(239,68,68,0.1); color:#ef4444; border:1px solid rgba(239,68,68,0.3);
}
.card-wrap--down>.card { border-color:rgba(239,68,68,0.25) !important }

/* ── FAVOURITES ─────────────────────────────────────────────── */
.fav-btn {
  display:inline-flex; align-items:center; gap:4px;
  padding:5px 11px;
  background:var(--bg3); border:1px solid var(--border2); border-radius:100px;
  font-size:.65rem; font-family:var(--font-m); font-weight:600;
  cursor:pointer; color:var(--muted);
  transition:all .18s, transform .15s cubic-bezier(.34,1.56,.64,1);
}
.fav-btn:hover { background:rgba(245,158,11,0.12); border-color:rgba(245,158,11,0.4); color:#f59e0b; transform:scale(1.04) }
.fav-btn:active { transform:scale(.92) }
.fav-btn--active { background:rgba(245,158,11,0.08); border-color:rgba(245,158,11,0.3); color:#f59e0b; animation:popScale .3s cubic-bezier(.34,1.56,.64,1) }
.fav-btn--active:hover { background:rgba(245,158,11,0.04); border-color:rgba(245,158,11,0.15); color:var(--muted) }

/* Pinned header */
.pinned-header {
  display:flex; align-items:center; gap:8px;
  padding:0 2px 12px;
  font-family:var(--font-m); font-size:.68rem; font-weight:700;
  letter-spacing:.1em; color:#f59e0b; text-transform:uppercase;
  animation:fadeIn .3s ease both;
}
.pinned-header span:first-child { display:inline-block; animation:wiggle 3.5s ease-in-out infinite }
.pinned-header-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px;
  background:rgba(245,158,11,0.1); border:1px solid rgba(245,158,11,0.25);
  border-radius:100px; font-size:.6rem; color:#f59e0b;
}
.grid-divider-cell { grid-column:1/-1; padding:8px 0 16px }
.grid-divider { position:relative; border-top:1px solid var(--border); text-align:center }
.grid-divider span {
  position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  background:var(--bg); padding:0 12px;
  font-size:.6rem; font-family:var(--font-m); letter-spacing:.12em; color:var(--muted); text-transform:uppercase;
}

/* ── EMPTY STATE ─────────────────────────────────────────────── */
.empty-state { text-align:center; padding:80px 20px; color:var(--muted); animation:cardIn .3s ease both }
.empty-icon { font-size:2.5rem; margin-bottom:14px; opacity:.3; animation:float-y 2.6s ease-in-out infinite }
.empty-state p { font-size:.85rem }

/* ── LOAD MORE ───────────────────────────────────────────────── */
.load-more-wrap { display:flex; justify-content:center; padding:28px 24px 12px }
.load-more-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 24px; background:var(--surface); border:1px solid var(--border2);
  border-radius:100px; color:var(--text);
  font-family:var(--font-m); font-size:.78rem; font-weight:500;
  cursor:pointer; transition:border-color .2s, background .2s, transform .15s, box-shadow .2s;
}
.load-more-btn:hover {
  border-color:var(--accent); background:var(--surface2);
  transform:translateY(-2px); box-shadow:var(--shadow-sm);
}
.load-more-btn:active { transform:translateY(0) scale(.98) }
.load-more-count { transition:transform .2s }
.load-more-btn:hover .load-more-count { transform:scale(1.08) }
.load-more-count {
  font-size:.66rem; color:var(--accent);
  background:var(--accent-dim); border:1px solid var(--accent-dim2);
  border-radius:100px; padding:2px 7px;
}

/* ── FOOTER ──────────────────────────────────────────────────── */
.footer {
  position:relative; z-index:1; border-top:1px solid var(--border);
  padding:16px 24px; max-width:1440px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:10px; font-size:.72rem; color:var(--muted);
}
.footer code {
  background:var(--bg3); border:1px solid var(--border);
  padding:1px 6px; border-radius:4px; font-family:var(--font-m); color:var(--accent);
}

/* ── SCROLLBAR ───────────────────────────────────────────────── */
::-webkit-scrollbar { width:4px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px }
::-webkit-scrollbar-thumb:hover { background:var(--accent) }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media(max-width:680px) {
  .header-inner { padding:0 14px }
  .header-controls { max-width:none }
  .search-wrap kbd { display:none }
  .site-count { display:none }
  .submit-nav-label { display:none }
  .submit-nav-btn { padding:7px 10px }
  .main { padding:18px 12px 56px }
  .cards-grid { grid-template-columns:1fr; gap:9px }
  .footer { flex-direction:column; text-align:center }
  .filter-bar { gap:8px }
  .filter-select { min-width:120px; font-size:.75rem }
}

/* ── THEME TOGGLE ────────────────────────────────────────────── */
.theme-toggle {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  background:var(--surface); border:1px solid var(--border2);
  border-radius:var(--radius); cursor:pointer; color:var(--text2);
  flex-shrink:0; transition:background .2s, border-color .2s, color .2s, transform .15s;
  position:relative; overflow:hidden;
}
.theme-toggle:hover { background:var(--surface2); border-color:var(--accent); color:var(--accent); transform:translateY(-1px) }
.theme-toggle:active { transform:translateY(0) scale(.88) rotate(15deg) }
.theme-icon { position:absolute; transition:opacity .3s, transform .4s cubic-bezier(.34,1.56,.64,1); display:flex }
.theme-icon-dark  { opacity:1;  transform:rotate(0deg) scale(1) }
.theme-icon-light { opacity:0;  transform:rotate(90deg) scale(.4) }
[data-theme="light"] .theme-icon-dark  { opacity:0;  transform:rotate(-90deg) scale(.4) }
[data-theme="light"] .theme-icon-light { opacity:1;  transform:rotate(0deg) scale(1) }

/* ── HEADER RIGHT ────────────────────────────────────────────── */
.header-right { display:flex; align-items:center; gap:8px; flex-shrink:0; margin-left:10px }

/* ── HAMBURGER ───────────────────────────────────────────────── */
.hamburger {
  display:inline-flex; flex-direction:column; justify-content:center;
  align-items:center; gap:4px; width:34px; height:34px;
  background:var(--surface); border:1px solid var(--border2);
  border-radius:var(--radius); cursor:pointer; padding:8px;
  flex-shrink:0; transition:background .2s, border-color .2s, transform .15s; position:relative; z-index:201;
}
.hamburger:hover { background:var(--surface2); border-color:var(--accent); transform:translateY(-1px) }
.hamburger:active { transform:translateY(0) scale(.9) }
.ham-bar {
  display:block; width:16px; height:1.5px;
  background:var(--text2); border-radius:2px;
  transform-origin:center;
  transition:transform .28s ease, opacity .22s, width .22s;
}
.hamburger.is-open .ham-bar:nth-child(1) { transform:translateY(5.5px) rotate(45deg) }
.hamburger.is-open .ham-bar:nth-child(2) { opacity:0; width:0 }
.hamburger.is-open .ham-bar:nth-child(3) { transform:translateY(-5.5px) rotate(-45deg) }

/* ── NAV OVERLAY ─────────────────────────────────────────────── */
.nav-overlay {
  position:fixed; inset:0; z-index:198;
  background:rgba(0,0,0,0.4); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.nav-overlay.is-open { opacity:1; pointer-events:auto }

/* ── NAV MENU PANEL ──────────────────────────────────────────── */
.nav-menu {
  position:fixed; top:0; right:0;
  width:min(280px,88vw); height:100vh;
  background:var(--bg2); border-left:1px solid var(--border2);
  z-index:200; display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.25,.46,.45,.94);
  box-shadow:var(--shadow-lg);
  padding-top:calc(var(--hdr) + 8px);
}
.nav-menu.is-open { transform:translateX(0) }
.nav-menu-inner { display:flex; flex-direction:column; flex:1; padding:14px 0 20px; overflow-y:auto }
.nav-menu-links { display:flex; flex-direction:column; gap:1px; padding:0 10px }
.nav-menu.is-open .nav-link {
  animation:menuSlide .35s ease both;
}
.nav-menu.is-open .nav-link:nth-child(1){animation-delay:.04s}
.nav-menu.is-open .nav-link:nth-child(2){animation-delay:.08s}
.nav-menu.is-open .nav-link:nth-child(3){animation-delay:.12s}
.nav-menu.is-open .nav-link:nth-child(4){animation-delay:.16s}
.nav-menu.is-open .nav-link:nth-child(5){animation-delay:.20s}
.nav-link {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:var(--radius);
  font-family:var(--font-m); font-size:.83rem; font-weight:500;
  color:var(--text2); text-decoration:none;
  transition:background .16s, color .16s, transform .15s, padding-left .16s;
}
.nav-link:hover { background:var(--surface); color:var(--text); padding-left:18px }
.nav-link:active { transform:scale(.97) }
.nav-link--active { background:var(--accent-dim); color:var(--accent); font-weight:600 }
#adminNavLink { margin-top:8px; padding-top:14px; border-top:1px solid var(--border) }
.nav-menu-footer {
  padding:14px 24px; margin-top:auto;
  border-top:1px solid var(--border);
  font-size:.68rem; color:var(--muted); font-family:var(--font-m);
}
.nav-menu-footer code {
  background:var(--bg3); border:1px solid var(--border);
  padding:1px 5px; border-radius:4px; color:var(--accent);
}

/* ── CLICK COUNTER ───────────────────────────────────────────── */
.click-count {
  display:inline-flex; align-items:center; gap:4px;
  font-size:.58rem; font-family:var(--font-m); color:var(--muted);
  background:transparent; border:1px solid var(--border);
  border-radius:100px; padding:2px 7px; margin-top:6px;
  white-space:nowrap; transition:color .2s, border-color .2s;
  user-select:none; width:fit-content;
}
.card:hover .click-count { color:var(--accent); border-color:var(--accent-dim2) }
.cc-bump { animation:cc-bump .28s ease }

/* ── FOOTER NAV ──────────────────────────────────────────────── */
.footer-nav { display:flex; gap:14px }
.footer-nav a { color:var(--muted); text-decoration:none; font-size:.72rem; transition:color .18s }
.footer-nav a:hover { color:var(--accent) }

/* ── DRAG & DROP ─────────────────────────────────────────────── */
.card-wrap[draggable="true"] { cursor:grab }
.card-wrap[draggable="true"]:active { cursor:grabbing }
.card-wrap.drag-over {
  outline:2px dashed var(--accent); outline-offset:3px; border-radius:var(--radius-lg);
}
.card-wrap.dragging { opacity:.3; transform:scale(.97); transition:opacity .15s, transform .15s }
.drag-handle {
  position:absolute; top:10px; right:10px;
  width:20px; height:20px;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:.8rem; cursor:grab;
  opacity:0; transition:opacity .2s; z-index:4;
  border-radius:5px; background:var(--bg3); border:1px solid var(--border2);
  line-height:1; user-select:none;
}
/* ── CARD ACTIONS ROW (fav + info — always visible, no overlap) ─ */
.card-actions {
  display:flex; align-items:center; gap:6px;
  padding:8px 12px 10px; margin-top:auto;
  border-top:1px solid var(--border);
}
.card-wrap[draggable="true"] .card-actions { padding-left:38px }

/* ── INFO BUTTON ─────────────────────────────────────────────── */
.info-btn {
  display:inline-flex; align-items:center; gap:4px; margin-left:auto;
  height:26px; padding:0 10px;
  background:var(--bg3); border:1px solid var(--border2); border-radius:100px;
  font-size:.72rem; font-family:var(--font-m); font-weight:600;
  cursor:pointer; color:var(--muted);
  transition:all .18s;
}
.info-btn::before { content:'ⓘ'; font-size:.85rem; font-weight:400; }
.info-btn:hover { background:var(--accent-dim); border-color:var(--accent); color:var(--accent) }
.info-btn:active { transform:scale(.92) }

/* ── TOAST ───────────────────────────────────────────────────── */
.toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(12px);
  background:var(--accent); color:#fff; padding:10px 22px;
  border-radius:100px; font-family:var(--font-m); font-size:.82rem; font-weight:500;
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s cubic-bezier(.34,1.56,.64,1);
  z-index:999; box-shadow:var(--shadow-md); white-space:nowrap;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0) }
.toast.error { background:#ef4444 }

/* ── LOADING SPINNER (shared) ───────────────────────────────── */
.loading-spin {
  display:inline-block; width:20px; height:20px;
  border:2.5px solid var(--border2); border-top-color:var(--accent);
  border-radius:50%; animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg) } }

/* ── SITE DETAIL MODAL ──────────────────────────────────────── */
.detail-overlay {
  position:fixed; inset:0; z-index:300;
  background:rgba(0,0,0,.55); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.detail-overlay.show { opacity:1; pointer-events:auto }

.detail-modal {
  position:fixed; top:50%; left:50%; z-index:301;
  width:min(560px, 92vw); max-height:85vh; overflow-y:auto;
  background:var(--surface); border:1px solid var(--border2);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  opacity:0; pointer-events:none;
  transform:translate(-50%,-46%) scale(.96);
  transition:opacity .25s, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.detail-modal.show { opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1) }

.detail-close {
  position:absolute; top:14px; right:14px; z-index:5;
  width:30px; height:30px; border-radius:100px;
  background:var(--bg3); border:1px solid var(--border2); color:var(--text2);
  font-size:.85rem; cursor:pointer;
  transition:background .18s, color .18s, transform .15s;
}
.detail-close:hover { background:var(--accent-dim); color:var(--accent); transform:rotate(90deg) }

.detail-body { padding:32px; }
.detail-loading { display:flex; justify-content:center; padding:60px 0; }

.detail-header { display:flex; align-items:center; gap:14px; margin-bottom:18px; padding-right:30px; }
.detail-favicon { width:44px; height:44px; border-radius:10px; flex-shrink:0; background:var(--bg3); }
.detail-title-wrap { flex:1; min-width:0; }
.detail-name { font-family:var(--font-d); font-size:1.25rem; font-weight:800; letter-spacing:-.02em; margin-bottom:2px; }
.detail-cat-badge {
  display:inline-flex; align-items:center; gap:4px;
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding:3px 10px; border-radius:100px; background:var(--accent-dim); color:var(--accent);
}
.detail-health-badge {
  display:inline-flex; align-items:center; gap:4px; margin-left:6px;
  font-size:.66rem; font-weight:600; letter-spacing:.01em;
  padding:3px 9px; border-radius:100px; cursor:default;
}
.detail-health-badge--up { background:rgba(34,197,94,0.1); color:#22c55e; border:1px solid rgba(34,197,94,0.25) }
.detail-health-badge--down { background:rgba(239,68,68,0.1); color:#ef4444; border:1px solid rgba(239,68,68,0.3) }
.detail-health-badge--unknown { background:var(--surface2); color:var(--muted); border:1px solid var(--border2) }
.detail-desc { font-size:.88rem; color:var(--text2); line-height:1.75; margin-bottom:18px; }
.detail-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:22px; }

.detail-visit-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:13px; border-radius:var(--radius);
  background:var(--accent); color:#fff; border:none;
  font-family:var(--font-m); font-size:.88rem; font-weight:700;
  text-decoration:none; cursor:pointer; margin-bottom:14px;
  transition:background .18s, transform .15s;
}
.detail-visit-btn:hover { background:var(--accent-hover); transform:translateY(-1px) }
.detail-visit-btn:active { transform:translateY(0) scale(.98) }

.detail-action-row { display:flex; gap:8px; margin-bottom:24px; }
.detail-action-btn {
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:9px; border-radius:var(--radius);
  background:var(--surface2); border:1px solid var(--border2); color:var(--text2);
  font-family:var(--font-m); font-size:.78rem; font-weight:600; cursor:pointer;
  transition:border-color .18s, color .18s, transform .15s;
}
.detail-action-btn:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-1px) }
.detail-action-btn.danger:hover { border-color:#ef4444; color:#ef4444 }

.detail-section-label {
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); margin-bottom:10px;
}
.similar-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.similar-card {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius);
  text-decoration:none; transition:border-color .18s, transform .15s;
}
.similar-card:hover { border-color:var(--accent); transform:translateY(-1px) }
.similar-card-favicon { width:20px; height:20px; border-radius:5px; flex-shrink:0; background:var(--bg3); }
.similar-card-name { font-size:.78rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── REPORT FORM (inside modal) ──────────────────────────────── */
.report-form { display:none; margin-top:18px; padding-top:18px; border-top:1px solid var(--border); }
.report-form.show { display:block; animation:fadeIn .25s ease both; }
.report-reason-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:10px; }
.report-reason-btn {
  padding:8px 10px; border-radius:var(--radius); text-align:left;
  background:var(--surface2); border:1px solid var(--border2); color:var(--text2);
  font-family:var(--font-m); font-size:.75rem; cursor:pointer;
  transition:border-color .18s, color .18s;
}
.report-reason-btn:hover { border-color:var(--accent); color:var(--text) }
.report-reason-btn.selected { border-color:var(--accent); background:var(--accent-dim); color:var(--accent); font-weight:600 }
.report-note {
  width:100%; box-sizing:border-box; background:var(--bg2); border:1px solid var(--border2);
  border-radius:var(--radius); color:var(--text); font-family:var(--font-m); font-size:.8rem;
  padding:9px 12px; resize:vertical; min-height:60px; margin-bottom:10px;
}
.report-submit-btn {
  width:100%; padding:10px; border-radius:var(--radius);
  background:#ef4444; color:#fff; border:none;
  font-family:var(--font-m); font-size:.82rem; font-weight:700; cursor:pointer;
  transition:opacity .18s, transform .15s;
}
.report-submit-btn:hover { opacity:.88 }
.report-submit-btn:disabled { opacity:.5; cursor:not-allowed }
.report-success { text-align:center; padding:20px 0; color:#22c55e; font-size:.85rem; font-weight:600; }

/* ── USER PREFERENCE OVERRIDES ───────────────────────────────── */
/* Compact cards mode — tighter cards, less padding */
.compact-cards .card { padding:12px 14px 10px }
.compact-cards .card-desc { -webkit-line-clamp:2; font-size:.75rem; margin-bottom:6px; }
.compact-cards .card-top { margin-bottom:4px }

/* Disable ambient background animations */
.no-animations .ambient-bg,
.no-animations .particle,
.no-animations .grid-bg { animation:none !important; opacity:.05 !important }