:root {
  --bg:#f6f7fb;
  --text:#111827;
  --muted:#6b7280;
  --panel:#ffffff;
  --panel-2:#fafafa;
  --line:#e5e7eb;
  --nav:#ffffff;
  --subnav:#f3f4f6;
}

.r4 { border-radius:4px; }
.r4 img { border-radius:4px; }

input, select, textarea { border:1px solid #ef4444; }
input:focus, select:focus, textarea:focus {
  outline:none;
  box-shadow:0 0 0 2px rgba(239,68,68,.15);
  border-color:#dc2626;
}

.header {
  background:var(--nav);
}

.nav-bar {
  width:100%;
  background:var(--nav);
  border-top:0;
  border-bottom:1px solid var(--line);
  height:64px;
  display:flex;
  align-items:center;
}

.nav-list { display:flex; align-items:center; white-space:nowrap; }
.nav-item { position:relative; display:flex; align-items:center; }

.nav-link {
  display:inline-flex;
  align-items:center;
  padding:0 15px;
  height:64px;
  font-weight:700;
  color:#1f2937;
  letter-spacing:.1px;
  transition:color .15s ease;
}

.nav-item + .nav-item::before {
  content:"|";
  color:#9ca3af;
  opacity:.85;
  margin:0 10px 0 6px;
}

.nav-link:hover { color:#dc2626; }
.nav-link.is-active { color:#b91c1c; }

.nav-link[data-badge] { position:relative; }
.nav-link[data-badge="0"]::after { display:none; }
.nav-link[data-badge]::after {
  content:attr(data-badge);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:6px;
  padding:0 6px;
  min-width:20px;
  height:18px;
  border-radius:4px;
  background:#ef4444;
  color:#fff;
  font-size:12px;
  font-weight:700;
  line-height:1;
  box-shadow:0 0 0 1px rgba(0,0,0,.06) inset;
}

.card {
  background:var(--panel);
  border:1px solid var(--line);
  transition:transform .12s ease, box-shadow .12s ease;
}
.card:hover {
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  transform:translateY(-1px);
}
.card-title { color:#111827; }
.card-title:hover { color:#dc2626; }

.section-head {
  background:#ffffff;
  border:1px solid var(--line);
}

.banner-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:5px;
  justify-items:center;
  width:100%;
  margin-bottom:20px;
}

.banner {
  display:grid;
  place-items:center;
  width:100%;
  border:1px solid rgba(0,0,0,0.08);
  background:#dfdfdf;
  text-decoration:none;
  color:#111;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.banner:hover {
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(0,0,0,0.10);
  border-color:rgba(0,0,0,0.12);
}
.banner__label {
  font-size:14px;
  font-weight:700;
  letter-spacing:-0.2px;
}

@media (min-width:1024px) {
  .banner-grid {
    grid-template-columns:repeat(4, 336px);
    gap:5px;
    justify-content:center;
  }
  .banner {
    width:336px;
    height:100px;
    aspect-ratio:auto;
  }
}

.thin-scroll::-webkit-scrollbar { height:8px; width:8px; }
.thin-scroll::-webkit-scrollbar-thumb { background:#c9ccd3; }
.thin-scroll::-webkit-scrollbar-track { background:transparent; }

.breadcrumb a { color:#6b7280; }
.breadcrumb a:hover { color:#111827; }

.list-card {
  background:var(--panel);
  border:1px solid var(--line);
}

.pager a {
  border:1px solid var(--line);
  background:#fff;
}
.pager a:hover { border-color:#ef4444; }

.panel {
  background:var(--panel);
  border:1px solid var(--line);
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.6rem .9rem;
  border:1px solid #d1d5db;
  background:#fff;
  color:#111827;
  border-radius:4px;
  transition:all .12s ease;
}
.btn:hover { background:#f9fafb; }
.btn.brand { border-color:#b91c1c; background:#dc2626; color:#fff; }
.btn.brand:hover { background:#b91c1c; }

.cmt-item { border-top:1px solid var(--line); padding-top:1rem; margin-top:1rem; }
.cmt-children { margin-left:2.5rem; }