@import url('/css/fonts.css');
@import url('/css/icons.css');

:root {
  --bg:#f7f7fa; --bg-2:#fff; --bg-3:#f0f0f5;
  --accent:#d97706; --accent-2:#ea580c; --accent-soft:#fef3c7;
  --text:#1a1a24; --text-dim:#6b6b7b;
  --border:#e5e5ec; --border-strong:#d0d0da;
  --radius:12px;
  --shadow-sm:0 1px 3px rgba(20,20,40,.06);
  --shadow-md:0 6px 20px rgba(20,20,40,.08);
  --shadow-accent:0 8px 24px rgba(217,119,6,.18);
}
[data-theme="dark"] {
  --bg:#0f0f17; --bg-2:#1a1a26; --bg-3:#232330;
  --accent:#fbbf24; --accent-2:#f59e0b; --accent-soft:#3a2e10;
  --text:#ececf0; --text-dim:#9a9aa8;
  --border:#2a2a3a; --border-strong:#3a3a4a;
  --shadow-sm:0 1px 3px rgba(0,0,0,.3);
  --shadow-md:0 6px 20px rgba(0,0,0,.4);
  --shadow-accent:0 8px 24px rgba(251,191,36,.25);
}
* { box-sizing:border-box; margin:0; padding:0; }
body {
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--text);
  min-height:100vh; line-height:1.6;
  transition:background .3s, color .3s;
  background-image:
    radial-gradient(circle at 15% 0%, rgba(217,119,6,.06), transparent 45%),
    radial-gradient(circle at 85% 100%, rgba(234,88,12,.05), transparent 45%);
  background-attachment:fixed;
}
.container { max-width:1200px; margin:0 auto; padding:0 20px; }

/* ============ HEADER ============ */
.header {
  background:color-mix(in srgb, var(--bg-2) 92%, transparent);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  position:relative;
  z-index:100;
}
.header .container {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 20px; gap:20px;
}
.logo {
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--text);
  font-weight:700; font-size:20px; letter-spacing:.5px;
  font-family:'Unbounded','Inter',sans-serif;
}
.logo-icon {
  color:var(--accent); font-size:24px;
  filter:drop-shadow(0 2px 6px rgba(217,119,6,.35));
}
.logo em { color:var(--accent); font-style:normal; }
.header nav { display:flex; align-items:center; gap:20px; }
.header nav a {
  color:var(--text-dim); text-decoration:none;
  font-weight:500; transition:color .2s;
}
.header nav a:hover { color:var(--accent); }
.header nav a.active { color:var(--accent); font-weight:600; }
.icon-btn {
  background:transparent; border:1px solid var(--border-strong);
  color:var(--text-dim); width:36px; height:36px;
  border-radius:8px; cursor:pointer; font-size:16px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:all .2s;
}
.icon-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }

.search-wrap { flex:1; min-width:200px; max-width:400px; position:relative; }
.search-input {
  width:100%; padding:10px 40px 10px 16px;
  background:var(--bg); border:1px solid var(--border-strong);
  border-radius:24px; color:var(--text); font-size:14px;
  transition:border-color .2s, box-shadow .2s;
}
.search-input:focus {
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.search-btn {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:transparent; border:none; cursor:pointer;
  font-size:16px; color:var(--text-dim); padding:6px 10px;
}
.search-btn:hover { color:var(--accent); }

/* ============ BURGER ============ */
.burger {
  display:none;
  background:transparent;
  border:1px solid var(--border-strong);
  color:var(--text);
  width:40px; height:40px;
  border-radius:8px;
  cursor:pointer;
  font-size:20px;
  align-items:center;
  justify-content:center;
  transition:all .2s;
  flex-shrink:0;
}
.burger:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.burger.open { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }

.mobile-nav {
  display:none;
  flex-direction:column;
  gap:4px;
  padding:12px 20px 20px;
  border-top:1px solid var(--border);
  background:var(--bg-2);
}
.mobile-nav.open { display:flex; }
.mobile-nav a {
  color:var(--text); text-decoration:none; font-weight:600;
  padding:12px 14px; border-radius:8px;
  transition:background .2s, color .2s;
  display:flex; align-items:center; gap:10px;
}
.mobile-nav a:hover { background:var(--accent-soft); color:var(--accent); }
.mobile-nav .mobile-divider { height:1px; background:var(--border); margin:8px 0; }

/* ============ HERO ============ */
.hero { padding:60px 0 40px; text-align:center; }
.hero h1 {
  font-size:clamp(26px, 4.5vw, 44px); font-weight:800;
  line-height:1.2; margin-bottom:16px; letter-spacing:-.5px;
  font-family:'Unbounded','Inter',sans-serif;
}
.hero h1 span {
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p { color:var(--text-dim); font-size:17px; max-width:720px; margin:0 auto; }

/* ============ FILTERS ============ */
.filters {
  display:flex; flex-direction:column; gap:12px;
  margin:32px 0 24px; padding:20px;
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
}
.filter-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.filter-label {
  font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:1px; color:var(--text-dim); min-width:80px;
}
.chip {
  padding:6px 14px; background:var(--bg-3);
  border:1px solid var(--border); border-radius:20px;
  color:var(--text-dim); font-size:13px; font-weight:600;
  cursor:pointer; transition:all .2s; text-decoration:none;
  display:inline-block;
}
.chip:hover { border-color:var(--accent); color:var(--accent); }
.chip.active {
  background:var(--accent-soft); color:var(--accent);
  border-color:var(--accent);
}

/* ============ SECTION TITLES ============ */
.section-title {
  font-size:22px; font-weight:800; margin:40px 0 20px;
  letter-spacing:-.3px; display:flex; align-items:center; gap:10px;
}
.section-title .count {
  font-size:14px; font-weight:600; color:var(--text-dim);
}

/* ============ GRID ============ */
.grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:24px; padding-bottom:40px;
}
.featured-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(360px, 1fr));
  gap:24px; padding-bottom:20px;
}
.featured-grid .card {
  border:2px solid var(--accent);
  box-shadow:0 8px 30px rgba(217,119,6,.15);
}

/* ============ CARD ============ */
.card {
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
  transition:transform .25s, border-color .25s, box-shadow .25s;
  display:flex; flex-direction:column; box-shadow:var(--shadow-sm);
}
.card:hover {
  transform:translateY(-4px); border-color:var(--accent);
  box-shadow:var(--shadow-md), 0 0 0 3px var(--accent-soft);
}
.card-image {
  height:180px; background:linear-gradient(135deg, var(--bg-3), var(--bg-2));
  background-size:cover; background-position:center;
  position:relative; border-bottom:1px solid var(--border);
}
.card-image::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, color-mix(in srgb, var(--bg-2) 70%, transparent), transparent 50%);
  pointer-events:none;
}
.card-body { padding:20px; flex:1; display:flex; flex-direction:column; }
.card h3 {
  font-size:18px; margin-bottom:10px; color:var(--text);
  line-height:1.35; font-weight:700;
}
.card h3 a { color:inherit; text-decoration:none; transition:color .2s; }
.card h3 a:hover { color:var(--accent); }

.badges { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.badge {
  background:var(--bg-3); border:1px solid var(--border);
  color:var(--text-dim); padding:3px 10px;
  border-radius:20px; font-size:12px; font-weight:600;
}
.badge.accent {
  color:var(--accent); background:var(--accent-soft);
  border-color:rgba(217,119,6,.25);
}
.badge.timer { background:#fee2e2; color:#dc2626; border-color:#fecaca; }
.badge.dead { background:#fee2e2; color:#991b1b; border-color:#fecaca; }
[data-theme="dark"] .badge.timer { background:#3f1d1d; color:#fca5a5; border-color:#7f1d1d; }
[data-theme="dark"] .badge.dead { background:#3f1d1d; color:#fca5a5; border-color:#7f1d1d; }

.card .excerpt {
  color:var(--text-dim); font-size:14px; flex:1;
  margin-bottom:16px; line-height:1.6;
}
.card .meta {
  display:flex; justify-content:space-between; align-items:center;
  font-size:12px; color:var(--text-dim);
  padding-top:12px; border-top:1px solid var(--border);
}
.card .read-more {
  color:var(--accent); text-decoration:none;
  font-weight:600; transition:color .2s;
}
.card .read-more:hover { color:var(--accent-2); }

/* ============ COUNTDOWN ============ */
.countdown {
  display:flex; gap:6px; margin:10px 0;
  font-family:'Consolas',monospace;
}
.cd-unit {
  flex:1; text-align:center; padding:6px 4px;
  background:var(--bg-3); border:1px solid var(--border);
  border-radius:6px;
}
.cd-num { font-size:16px; font-weight:800; color:var(--accent); line-height:1; }
.cd-lbl { font-size:9px; color:var(--text-dim); text-transform:uppercase; margin-top:2px; }

.countdown-full {
  display:flex; gap:8px; margin:24px 0; padding:20px;
  background:linear-gradient(135deg, var(--accent-soft), var(--bg-3));
  border:1px solid var(--border); border-radius:var(--radius);
}
.cd-unit-lg {
  flex:1; text-align:center; padding:12px 8px;
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:8px;
}
.cd-num-lg { font-size:28px; font-weight:800; color:var(--accent); line-height:1; }
.cd-lbl-lg { font-size:11px; color:var(--text-dim); text-transform:uppercase; margin-top:4px; letter-spacing:1px; }

/* ============ EMPTY ============ */
.empty {
  text-align:center; padding:80px 20px; color:var(--text-dim);
  grid-column:1/-1;
}
.empty h2 { font-size:24px; margin-bottom:12px; color:var(--text); }

/* ============ BUTTONS ============ */
.btn {
  display:inline-block; padding:12px 24px;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff; text-decoration:none; border-radius:8px;
  font-weight:700; border:none; cursor:pointer;
  transition:transform .2s, box-shadow .2s, filter .2s;
  font-size:14px; box-shadow:var(--shadow-sm);
}
.btn:hover {
  transform:translateY(-2px); box-shadow:var(--shadow-accent);
  filter:brightness(1.05);
}
.btn.outline {
  background:var(--bg-2); border:1px solid var(--border-strong);
  color:var(--text); box-shadow:var(--shadow-sm);
}
.btn.outline:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.btn.danger { background:#dc2626; color:#fff; }
.btn.danger:hover { background:#b91c1c; }
.btn.small { padding:6px 12px; font-size:12px; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* ============ SEO text ============ */
.seo-text {
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--radius); padding:28px 32px;
  margin:40px 0; box-shadow:var(--shadow-sm);
}
.seo-text h2 { font-size:20px; margin:20px 0 10px; }
.seo-text h3 { font-size:16px; margin:16px 0 8px; }
.seo-text p, .seo-text li { color:var(--text-dim); font-size:14px; line-height:1.75; }
.seo-text ul { margin:10px 0 10px 20px; }

/* ============ FOOTER ============ */
.footer {
  border-top:1px solid var(--border); padding:28px 0;
  color:var(--text-dim); font-size:14px;
  margin-top:60px; background:var(--bg-2);
}
.footer-inner {
  display:flex; justify-content:space-between; align-items:center;
  gap:20px; flex-wrap:wrap;
}
.footer-nav { display:flex; gap:20px; flex-wrap:wrap; }
.footer-nav a { color:var(--text-dim); text-decoration:none; transition:color .2s; }
.footer-nav a:hover { color:var(--accent); }

/* ============ TO TOP ============ */
.to-top {
  position:fixed; bottom:24px; right:24px; width:48px; height:48px;
  border-radius:50%; border:none;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff; font-size:22px; font-weight:700; cursor:pointer;
  box-shadow:var(--shadow-md); opacity:0; visibility:hidden;
  transform:translateY(20px);
  transition:opacity .25s, transform .25s, visibility .25s;
  z-index:90;
}
.to-top.show { opacity:1; visibility:visible; transform:translateY(0); }

/* ============ COOKIE ============ */
.cookie-bar {
  position:fixed; left:20px; right:20px; bottom:20px;
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px 20px;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; box-shadow:0 12px 40px rgba(20,20,40,.15);
  z-index:95; opacity:0; transform:translateY(20px);
  transition:opacity .3s, transform .3s; flex-wrap:wrap;
  max-width:1200px; margin:0 auto;
}
.cookie-bar.show { opacity:1; transform:translateY(0); }
.cookie-text { flex:1; font-size:14px; min-width:200px; }
.cookie-text a { color:var(--accent); text-decoration:underline; }
.cookie-actions { display:flex; gap:10px; flex-shrink:0; }

/* ============ RESPONSIVE ============ */
@media (max-width:768px) {
  .header nav { display:none; }
  .search-wrap { display:none; }
  .burger { display:inline-flex; }
  .header .container { padding:12px 16px; }
  .logo { font-size:18px; }
}
@media (max-width:600px) {
  .hero { padding:40px 0 20px; }
  .footer-inner { flex-direction:column; text-align:center; }
  .cookie-bar { flex-direction:column; align-items:stretch; left:12px; right:12px; bottom:12px; }
  .cookie-actions { justify-content:flex-end; }
  .to-top { bottom:100px; }
  .filter-label { min-width:auto; width:100%; }
  .seo-text { padding:20px; }
}