:root{
  --primary:#111;
  --secondary:#f1c40f; /* yellow */
  --text:#222;
  --bg:#fff;
  --muted:#666;
  --chip:#f6f6f6;
  --radius:12px;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;color:var(--text);background:var(--bg)}
.container{padding:16px}
.site-header{background:#fff;position:sticky;top:0;border-bottom:1px solid #eee;z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;max-width:1000px;margin:0 auto}
.brand{font-weight:700;text-decoration:none;color:#000}
.nav-links{display:flex;gap:12px;align-items:center}
.nav-links a{padding:8px 12px;border-radius:999px;text-decoration:none;color:#000;background:transparent}
.nav-links a:hover{background:#fafafa}
.nav-toggle{display:none;border:0;background:var(--secondary);color:#000;padding:8px 12px;border-radius:8px;font-size:18px}
@media(max-width:720px){
  .nav-links{display:none;flex-direction:column;position:absolute;left:0;right:0;top:56px;background:#fff;border-bottom:1px solid #eee;padding:8px}
  .nav-links.open{display:flex}
  .nav-toggle{display:block}
}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;border:1px solid #e6e6e6;background:var(--secondary);color:#000;text-decoration:none;font-weight:600;cursor:pointer}
.btn-secondary{background:#fff}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid{grid-template-columns:1fr}}
.card{border:1px solid #eee;border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:10px;background:#fff}
.card .title{font-weight:700}
.meta{font-size:14px;color:var(--muted)}
.row{display:flex;flex-wrap:wrap;gap:8px}
.time-chip{background:var(--chip);padding:6px 10px;border-radius:999px;font-size:12px}
.iconbar{display:flex;gap:10px;margin-top:6px}
.iconbar a,.iconbar button{border:1px solid #eee;background:#fff;border-radius:10px;padding:8px 10px;cursor:pointer;text-decoration:none;color:#000}
.iconbar a:hover,.iconbar button:hover{background:#fafafa}
.copy-badge{font-size:12px;color:var(--muted)}
.searchbar{display:flex;gap:8px;margin-bottom:12px}
.searchbar input,.searchbar select{padding:10px;border:1px solid #ddd;border-radius:10px}


/* THEME EXTENSIONS */

html{ color-scheme: dark light }
html[data-theme="dark"]{
  --primary:#e0e0e0;
  --secondary:#f1c40f;
  --text:#eaeaea;
  --bg:#0b0b0f;
  --muted:#a2a2a2;
  --chip:#1b1b20;
}
html[data-theme="light"]{
  --primary:#111;
  --secondary:#caa10a;
  --text:#222;
  --bg:#ffffffcc;
  --muted:#555;
  --chip:#f6f6f6cc;
}
/* Light mode transparent gradient background that fades down */
html[data-theme="light"] body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;color:var(--text);background:var(--bg)}
/* Dark mode subtle vignette */
html[data-theme="dark"] body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;color:var(--text);background:var(--bg)}


.logo{height:40px;display:block}
.site-header{position:sticky;top:0;z-index:10;border-bottom:1px solid rgba(255,255,255,0.08);background:transparent;backdrop-filter:saturate(140%) blur(6px)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 16px;max-width:1100px;margin:0 auto}
.menu{list-style:none;display:flex;gap:14px;margin:0;padding:0;flex-wrap:wrap}
.nav-link{color:var(--text);text-decoration:none;padding:8px 10px;border-radius:8px}
.nav-link:hover{background:rgba(255,255,255,0.08)}
.brand{display:flex;align-items:center;gap:10px}


.hero{padding:40px 16px 10px}
.search-wrap{max-width:820px;margin:0 auto;text-align:center;display:grid;gap:10px}
.hero h1{margin:0;font-size:clamp(22px,3vw,34px);line-height:1.2;color:var(--primary)}
.sub{color:var(--muted);margin:0 0 10px}
.panel{border:1px solid rgba(255,255,255,0.12);background:rgba(0,0,0,0.25);border-radius:14px;padding:14px}
html[data-theme="light"] .panel{background:rgba(255,255,255,0.5);border-color:rgba(0,0,0,0.08)}
.search-row{display:flex;gap:10px;justify-content:center}
.input,.select{padding:12px 12px;border:1px solid rgba(255,255,255,0.15);background:rgba(0,0,0,0.2);color:var(--text);border-radius:10px;min-width:260px}
html[data-theme="light"] .input, html[data-theme="light"] .select{background:rgba(255,255,255,0.6);border-color:rgba(0,0,0,0.12)}
.filters{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.btn{padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.2);background:transparent;color:var(--text);cursor:pointer}
.btn:hover{background:rgba(255,255,255,0.08)}
.hint{font-size:14px;color:var(--muted)}
.grid{padding:16px}
.card{background:rgba(255,255,255,0.06)}
html[data-theme="light"] .card{background:#fff}
.iconbar a,.iconbar button{background:transparent; color: #caa10a;}


/* === Responsive Nav & Theme Toggle Enhancements === */
:root{
  --header-bg: rgba(255,255,255,0.7);
  --header-border: rgba(0,0,0,0.08);
}

html[data-theme="dark"]{
  --bg:#0b0b0c;
  --text:#f1f1f1;
  --muted:#9aa0a6;
  --chip:#141417;
  --header-bg: rgba(0,0,0,0.5);
  --header-border: rgba(255,255,255,0.12);
}

.site-header{
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: saturate(160%) blur(8px);
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
}

.nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; max-width:1100px; margin:0 auto; }
.brand{ font-weight:700; text-decoration:none; color:var(--text); font-size:18px; }
.menu{ list-style:none; margin:0; padding:0; display:flex; gap:16px; }
.menu a{ text-decoration:none; color:var(--text); padding:8px 10px; border-radius:10px; }
.menu a:hover{ background: rgba(127,127,127,0.15); }

.nav-controls{ display:flex; align-items:center; gap:8px; }
.icon-btn{ border:1px solid var(--header-border); background:#caa10a; color:var(--text); padding:8px; border-radius:12px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.icon-btn:hover{ background: #caa00ac4; }
.icon{ width:18px; height:18px; display:block; }

/* Show only relevant theme icon */
html[data-theme="dark"] .icon.sun{ display:none; }
html[data-theme="dark"] .icon.moon{ display:block; }
html[data-theme="light"] .icon.sun{ display:block; }
html[data-theme="light"] .icon.moon{ display:none; }

/* Hamburger */
.hamburger{ width:35px; height:35px; position:relative; }
.hamburger .bar{ display:block; width:20px; height:2px; background:var(--text); margin:3px auto; border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
body.menu-open .hamburger .bar:nth-child(1){ transform: translateY(5px) rotate(45deg); }
body.menu-open .hamburger .bar:nth-child(2){ opacity:0; }
body.menu-open .hamburger .bar:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu{ display:none; border-bottom:1px solid var(--header-border); background: #caa00a5d; }
body.menu-open .mobile-menu{ display:block; }
.mobile-menu .menu{ flex-direction:column; gap:6px; padding:10px 16px; }
.desktop{ display:flex; }

/* Responsive rules */
@media (max-width: 820px){
  .desktop{ display:none; }
  .hamburger{ display:inline-flex; }
}
@media (min-width: 821px){
  .mobile-menu{ display:none !important; }
  .hamburger{ display:none; }
}

/* Footer centered */
.site-footer{ padding:28px 16px; text-align:center; display:flex; align-items:center; justify-content:center; border-top:1px solid var(--header-border); background:transparent; }
.site-footer p{ margin:0; color:var(--muted); }

/* Minor container improvements */
.container{ max-width:1100px; margin:0 auto; padding:16px; }

.time-chip.muted{opacity:.7;filter:saturate(.6);}