/* =========================================================
   zhonghuijie · 赤铜胶片 Domain zhonghuijie (layout-safe pass)
   Keep brand look, restore alignment with template grid
   ========================================================= */
:root {
  --zhonghuijie-ink: #1a2430;
  --zhonghuijie-ink-soft: #3d4a59;
  --zhonghuijie-mute: #6b7785;
  --zhonghuijie-paper: #f4f6f3;
  --zhonghuijie-paper-2: #f6f8f8;
  --zhonghuijie-surface: #ffffff;
  --zhonghuijie-line: #cfd7ca;
  --zhonghuijie-copper: #61be21;
  --zhonghuijie-copper-deep: #418513;
  --zhonghuijie-copper-soft: #ecf2e8;
  --zhonghuijie-teal: #20a09f;
  --zhonghuijie-teal-soft: #e2eded;
  --zhonghuijie-amber: #38cd27;
  --zhonghuijie-footer: #241225;
  --zhonghuijie-footer-2: #361f37;
  --zhonghuijie-radius: 6px;
  --zhonghuijie-radius-lg: 10px;
  --zhonghuijie-shadow: 0 8px 24px rgba(26, 36, 48, 0.08);
  --zhonghuijie-font: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --zhonghuijie-display: "Noto Serif SC", "Songti SC", "Noto Sans SC", serif;
}

html {
  color-scheme: light;
}

body {
  font-family: var(--zhonghuijie-font) !important;
  background: var(--zhonghuijie-paper) !important;
  color: var(--zhonghuijie-ink);
}

.zhonghuijie-shell.bg-gray-100,
.zhonghuijie-shell {
  background:
    radial-gradient(900px 360px at 10% -8%, rgba(184, 92, 56, 0.1), transparent 55%),
    radial-gradient(720px 300px at 90% 0%, rgba(31, 111, 120, 0.08), transparent 50%),
    linear-gradient(180deg, #eef3f6 0%, var(--zhonghuijie-paper) 42%, #e4ebf0 100%) !important;
  color: var(--zhonghuijie-ink);
}

.zhonghuijie-shell .fixed.inset-0.overflow-hidden.pointer-events-none {
  opacity: 0.28;
  filter: saturate(0.5) hue-rotate(-12deg);
}

.zhonghuijie-shell .fixed.inset-0 .bg-blue-400 { background: var(--zhonghuijie-copper) !important; opacity: 0.1 !important; }
.zhonghuijie-shell .fixed.inset-0 .bg-purple-400 { background: var(--zhonghuijie-teal) !important; opacity: 0.1 !important; }
.zhonghuijie-shell .fixed.inset-0 .bg-pink-400 { background: var(--zhonghuijie-amber) !important; opacity: 0.1 !important; }

.zhonghuijie-shell .min-h-screen.bg-gray-100 {
  background: transparent !important;
}

/* ========== HEADER ========== */
.zhonghuijie-shell > header,
.zhonghuijie-shell header.sticky {
  background: rgba(247, 249, 251, 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--zhonghuijie-line);
  box-shadow: none !important;
  /* top accent without breaking sticky height math */
  box-shadow: inset 0 3px 0 0 var(--zhonghuijie-copper) !important;
}

.zhonghuijie-shell > header::before,
.zhonghuijie-shell header.zhonghuijie-header::before {
  content: none !important;
  display: none !important;
}

.zhonghuijie-shell > header .h-16 {
  height: 4rem !important;
}

.zhonghuijie-shell > header a > span.text-xl {
  font-family: var(--zhonghuijie-display);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--zhonghuijie-ink) !important;
  white-space: nowrap;
}

.zhonghuijie-shell > header .text-blue-600,
.zhonghuijie-shell > header svg.text-blue-600 {
  color: var(--zhonghuijie-copper) !important;
}

.zhonghuijie-shell > header .bg-red-500 {
  background: var(--zhonghuijie-teal) !important;
}

.zhonghuijie-shell > header nav a,
.zhonghuijie-shell > header nav button {
  color: var(--zhonghuijie-ink-soft) !important;
  font-weight: 500;
}

.zhonghuijie-shell > header nav a.text-blue-600,
.zhonghuijie-shell > header nav a.font-semibold {
  color: var(--zhonghuijie-copper) !important;
}

.zhonghuijie-shell > header nav a:hover,
.zhonghuijie-shell > header nav button:hover {
  color: var(--zhonghuijie-copper) !important;
}

.zhonghuijie-shell > header nav a.font-semibold {
  box-shadow: inset 0 -2px 0 0 var(--zhonghuijie-copper);
}

.zhonghuijie-shell > header .absolute.left-0.mt-2.w-64 {
  border: 1px solid var(--zhonghuijie-line);
  border-radius: var(--zhonghuijie-radius) !important;
  box-shadow: var(--zhonghuijie-shadow) !important;
  background: var(--zhonghuijie-surface) !important;
}

.zhonghuijie-shell > header .absolute.left-0.mt-2 a:hover {
  background: var(--zhonghuijie-copper-soft) !important;
  color: var(--zhonghuijie-copper-deep) !important;
}

.zhonghuijie-header-search input {
  background: var(--zhonghuijie-surface) !important;
  border: 1px solid var(--zhonghuijie-line) !important;
  border-radius: 999px !important;
  color: var(--zhonghuijie-ink);
}

.zhonghuijie-header-search input:focus {
  outline: none !important;
  border-color: var(--zhonghuijie-copper) !important;
  box-shadow: 0 0 0 3px rgba(184, 92, 56, 0.16) !important;
}

.zhonghuijie-header-search__icon {
  color: var(--zhonghuijie-mute) !important;
}

/* ========== HERO (home) ========== */
/* Keep section full-bleed; DO NOT shrink the max-w-7xl rail */
.zhonghuijie-shell main > .min-h-screen > .relative.z-10 > section.bg-gradient-to-r.from-blue-600:first-of-type,
.zhonghuijie-shell section.zhonghuijie-hero {
  position: relative;
  overflow: hidden;
  color: #fff !important;
  padding: 3.25rem 0 3rem !important;
  background:
    linear-gradient(115deg, rgba(20, 28, 38, 0.9) 0%, rgba(20, 28, 38, 0.7) 48%, rgba(184, 92, 56, 0.5) 100%),
    url("/img/1.jpg") center/cover no-repeat !important;
  border-bottom: 3px solid var(--zhonghuijie-copper);
}

.zhonghuijie-shell main > .min-h-screen > .relative.z-10 > section.bg-gradient-to-r.from-blue-600:first-of-type::before,
.zhonghuijie-shell section.zhonghuijie-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-12deg, transparent 0 16px, rgba(255, 255, 255, 0.025) 16px 17px);
  pointer-events: none;
}

.zhonghuijie-shell main > .min-h-screen > .relative.z-10 > section.bg-gradient-to-r.from-blue-600:first-of-type > .max-w-7xl,
.zhonghuijie-shell section.zhonghuijie-hero > .max-w-7xl {
  position: relative;
  z-index: 1;
  text-align: left !important;
  display: block;
  min-height: 0;
  /* keep template rail: max-w-7xl + horizontal padding */
  width: 100%;
  max-width: 80rem; /* matches Tailwind max-w-7xl */
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.zhonghuijie-shell section.zhonghuijie-hero .zhonghuijie-hero__copy {
  max-width: 40rem;
}

.zhonghuijie-shell main > .min-h-screen > .relative.z-10 > section.bg-gradient-to-r.from-blue-600:first-of-type h1,
.zhonghuijie-shell section.zhonghuijie-hero h1 {
  font-family: var(--zhonghuijie-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem) !important;
  line-height: 1.2 !important;
  margin-bottom: 0.85rem !important;
  max-width: 18ch;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.zhonghuijie-shell main > .min-h-screen > .relative.z-10 > section.bg-gradient-to-r.from-blue-600:first-of-type p,
.zhonghuijie-shell section.zhonghuijie-hero p {
  color: rgba(255, 245, 238, 0.9) !important;
  max-width: 34rem;
  font-size: 1rem !important;
  line-height: 1.65;
  margin-bottom: 1.35rem !important;
}

.zhonghuijie-shell main > .min-h-screen > .relative.z-10 > section.bg-gradient-to-r.from-blue-600:first-of-type .flex.justify-center,
.zhonghuijie-shell section.zhonghuijie-hero .flex.justify-center {
  justify-content: flex-start !important;
}

.zhonghuijie-shell main > .min-h-screen > .relative.z-10 > section.bg-gradient-to-r.from-blue-600:first-of-type a.bg-white,
.zhonghuijie-shell section.zhonghuijie-hero a.bg-white {
  background: var(--zhonghuijie-copper) !important;
  color: #fff !important;
  border-radius: var(--zhonghuijie-radius) !important;
  box-shadow: 0 6px 16px rgba(184, 92, 56, 0.3);
}

.zhonghuijie-shell main > .min-h-screen > .relative.z-10 > section.bg-gradient-to-r.from-blue-600:first-of-type a.bg-white:hover,
.zhonghuijie-shell section.zhonghuijie-hero a.bg-white:hover {
  background: var(--zhonghuijie-copper-deep) !important;
}

.zhonghuijie-shell main > .min-h-screen > .relative.z-10 > section.bg-gradient-to-r.from-blue-600:first-of-type a.border-white,
.zhonghuijie-shell section.zhonghuijie-hero a.border-white {
  border-color: rgba(255, 255, 255, 0.75) !important;
  border-radius: var(--zhonghuijie-radius) !important;
  color: #fff !important;
  background: transparent !important;
}

.zhonghuijie-shell main > .min-h-screen > .relative.z-10 > section.bg-gradient-to-r.from-blue-600:first-of-type a.border-white:hover,
.zhonghuijie-shell section.zhonghuijie-hero a.border-white:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

/* COPPER REEL mark only on home hero (avoid double mark) */
.zhonghuijie-shell section.zhonghuijie-hero .zhonghuijie-hero__copy::after,
.zhonghuijie-shell main > .min-h-screen > .relative.z-10 > section.bg-gradient-to-r.from-blue-600:first-of-type > .max-w-7xl:not(:has(.zhonghuijie-hero__copy))::after {
  content: "COPPER REEL";
  display: block;
  margin-top: 1.1rem;
  font-family: var(--zhonghuijie-display);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  color: rgba(255, 236, 220, 0.5);
}

.zhonghuijie-shell section.zhonghuijie-hero > .max-w-7xl:has(.zhonghuijie-hero__copy)::after {
  content: none !important;
  display: none !important;
}

/* ========== CATEGORY / OTHER BANNERS ========== */
.zhonghuijie-shell section.bg-gradient-to-r.from-blue-600:not(.zhonghuijie-hero) {
  background: linear-gradient(120deg, #1c2733 0%, #2a3a3d 55%, #8f4224 100%) !important;
  border-bottom: 3px solid var(--zhonghuijie-copper);
  padding-top: 2.25rem !important;
  padding-bottom: 2.25rem !important;
}

.zhonghuijie-shell section.bg-gradient-to-r.from-blue-600:not(.zhonghuijie-hero)::before,
.zhonghuijie-shell section.bg-gradient-to-r.from-blue-600:not(.zhonghuijie-hero)::after {
  content: none !important;
  display: none !important;
}

.zhonghuijie-shell section.bg-gradient-to-r.from-blue-600:not(.zhonghuijie-hero) > .max-w-7xl {
  display: block !important;
  min-height: 0 !important;
  text-align: left !important;
}

.zhonghuijie-shell section.bg-gradient-to-r.from-blue-600:not(.zhonghuijie-hero) h1 {
  font-family: var(--zhonghuijie-display);
  letter-spacing: 0.03em;
}

/* ========== SECTION CHROME ========== */
.zhonghuijie-shell main section.py-8.bg-white,
.zhonghuijie-shell main section.bg-white.shadow-sm {
  background: transparent !important;
  box-shadow: none !important;
  padding-top: 2.25rem !important;
  padding-bottom: 2.25rem !important;
}

.zhonghuijie-shell main section.py-12 {
  padding-top: 2.75rem !important;
  padding-bottom: 2.75rem !important;
}

.zhonghuijie-shell main section.py-12.bg-gray-100,
.zhonghuijie-shell main section.bg-gradient-to-r.from-purple-50 {
  background: var(--zhonghuijie-paper-2) !important;
}

.zhonghuijie-shell h2.text-2xl,
.zhonghuijie-shell h2.text-3xl {
  font-family: var(--zhonghuijie-display);
  letter-spacing: 0.03em;
  color: var(--zhonghuijie-ink) !important;
}

/* Only section titles: accent under the heading text, not a left bar on the whole flex row */
.zhonghuijie-shell main section h2.text-2xl {
  position: relative;
  padding-bottom: 0.15rem;
}

.zhonghuijie-shell main section .flex.items-center > svg.h-6.w-6,
.zhonghuijie-shell main section .flex.items-center > .h-6.w-6 {
  color: var(--zhonghuijie-copper) !important;
  flex-shrink: 0;
}

.zhonghuijie-shell main section a.text-blue-600.hover\:text-blue-700,
.zhonghuijie-shell main section .flex.items-center.justify-between > a.text-blue-600 {
  color: var(--zhonghuijie-teal) !important;
  font-weight: 600;
  white-space: nowrap;
}

.zhonghuijie-shell main section a.text-blue-600.hover\:text-blue-700:hover {
  color: var(--zhonghuijie-copper) !important;
}

.zhonghuijie-shell .text-yellow-500,
.zhonghuijie-shell .text-red-500,
.zhonghuijie-shell .text-green-500 {
  color: var(--zhonghuijie-copper) !important;
}

/* ========== CATEGORY TILES ========== */
.zhonghuijie-cat-grid {
  gap: 0.85rem !important;
}

@media (min-width: 1280px) {
  .zhonghuijie-cat-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

.zhonghuijie-cat-grid > a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 5.5rem;
  background: var(--zhonghuijie-surface) !important;
  border: 1px solid var(--zhonghuijie-line) !important;
  border-radius: var(--zhonghuijie-radius) !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.zhonghuijie-cat-grid > a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 2px;
  border-radius: 2px;
  background: var(--zhonghuijie-copper);
  opacity: 0.85;
}

.zhonghuijie-cat-grid > a:hover {
  transform: translateY(-2px);
  border-color: rgba(184, 92, 56, 0.55) !important;
  box-shadow: var(--zhonghuijie-shadow);
}

.zhonghuijie-cat-grid > a .text-blue-500,
.zhonghuijie-cat-grid > a svg {
  color: var(--zhonghuijie-teal) !important;
}

.zhonghuijie-cat-grid > a .text-gray-700,
.zhonghuijie-cat-grid > a .text-sm {
  color: var(--zhonghuijie-ink) !important;
  font-weight: 600;
}

/* ========== VIDEO CARDS ========== */
.zhonghuijie-grid-3,
.zhonghuijie-grid-4 {
  align-items: stretch;
}

.zhonghuijie-grid-3 > div.bg-white,
.zhonghuijie-grid-4 > div.bg-white,
.zhonghuijie-video-related-grid > div.bg-white {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--zhonghuijie-surface) !important;
  border: 1px solid var(--zhonghuijie-line);
  border-radius: var(--zhonghuijie-radius-lg) !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.zhonghuijie-grid-3 > div.bg-white:hover,
.zhonghuijie-grid-4 > div.bg-white:hover,
.zhonghuijie-video-related-grid > div.bg-white:hover {
  transform: translateY(-3px);
  border-color: rgba(184, 92, 56, 0.4);
  box-shadow: var(--zhonghuijie-shadow) !important;
}

.zhonghuijie-grid-3 > div.bg-white > .p-4,
.zhonghuijie-grid-4 > div.bg-white > .p-4,
.zhonghuijie-video-related-grid > div.bg-white > .p-4 {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.zhonghuijie-grid-3 .aspect-video,
.zhonghuijie-grid-4 .aspect-video,
.zhonghuijie-video-related-grid .aspect-video {
  background: #0f1620;
}

.zhonghuijie-grid-3 .absolute.top-2.right-2.bg-yellow-500,
.zhonghuijie-grid-4 .absolute.top-2.right-2.bg-yellow-500,
.zhonghuijie-video-related-grid .absolute.top-2.right-2.bg-yellow-500 {
  top: 0.55rem !important;
  right: 0.55rem !important;
  left: auto !important;
  background: var(--zhonghuijie-copper) !important;
  border-radius: 4px !important;
  padding: 0.15rem 0.4rem !important;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
}

.zhonghuijie-grid-3 .p-4 > a.font-semibold,
.zhonghuijie-grid-4 .p-4 > a.font-semibold,
.zhonghuijie-video-related-grid .p-4 > a.font-semibold {
  color: var(--zhonghuijie-ink) !important;
  font-weight: 700;
}

.zhonghuijie-grid-3 .p-4 > a.font-semibold:hover,
.zhonghuijie-grid-4 .p-4 > a.font-semibold:hover {
  color: var(--zhonghuijie-copper) !important;
}

.zhonghuijie-shell .zhonghuijie-grid-3 a.bg-blue-100.text-blue-600,
.zhonghuijie-shell .zhonghuijie-grid-4 a.bg-blue-100.text-blue-600,
.zhonghuijie-shell .zhonghuijie-video-related-grid a.bg-blue-100.text-blue-600 {
  background: var(--zhonghuijie-teal-soft) !important;
  color: var(--zhonghuijie-teal) !important;
  border-radius: 4px !important;
}

/* ========== WHY US ========== */
.zhonghuijie-shell section.py-12.bg-white .w-16.h-16.rounded-full {
  border-radius: var(--zhonghuijie-radius) !important;
  background: var(--zhonghuijie-copper-soft) !important;
}

.zhonghuijie-shell section.py-12.bg-white .bg-blue-100,
.zhonghuijie-shell section.py-12.bg-white .bg-green-100,
.zhonghuijie-shell section.py-12.bg-white .bg-purple-100 {
  background: var(--zhonghuijie-copper-soft) !important;
}

.zhonghuijie-shell section.py-12.bg-white .text-blue-600,
.zhonghuijie-shell section.py-12.bg-white .text-green-600,
.zhonghuijie-shell section.py-12.bg-white .text-purple-600 {
  color: var(--zhonghuijie-copper) !important;
}

/* ========== CATEGORY LIST ========== */
.zhonghuijie-shell .bg-white.rounded-lg.shadow-sm {
  background: var(--zhonghuijie-surface) !important;
  border: 1px solid var(--zhonghuijie-line);
  border-radius: var(--zhonghuijie-radius-lg) !important;
  box-shadow: none !important;
}

.zhonghuijie-shell .bg-white.rounded-lg.shadow-md.flex.flex-row {
  background: var(--zhonghuijie-surface) !important;
  border: 1px solid var(--zhonghuijie-line);
  border-radius: var(--zhonghuijie-radius-lg) !important;
  box-shadow: none !important;
  overflow: hidden;
}

.zhonghuijie-category-list-cover-wrap {
  border-right: 1px solid var(--zhonghuijie-line);
}

.zhonghuijie-pagination-link {
  border-color: var(--zhonghuijie-line) !important;
  color: var(--zhonghuijie-ink) !important;
  border-radius: var(--zhonghuijie-radius) !important;
  background: var(--zhonghuijie-surface);
}

.zhonghuijie-pagination-link:hover {
  background: var(--zhonghuijie-copper-soft) !important;
  border-color: var(--zhonghuijie-copper) !important;
  color: var(--zhonghuijie-copper-deep) !important;
}

/* ========== PLAY ========== */
.zhonghuijie-video-body {
  background: transparent !important;
}

.zhonghuijie-player-card {
  background: var(--zhonghuijie-footer) !important;
  border: 1px solid #243140;
  border-radius: var(--zhonghuijie-radius-lg) !important;
  box-shadow: 0 14px 32px rgba(20, 28, 38, 0.22) !important;
  overflow: hidden;
}

.zhonghuijie-player__retry {
  background: var(--zhonghuijie-copper) !important;
}

.zhonghuijie-player__retry:hover {
  background: var(--zhonghuijie-copper-deep) !important;
}

.zhonghuijie-slider::-webkit-slider-thumb {
  background: var(--zhonghuijie-copper) !important;
}

.zhonghuijie-shell .zhonghuijie-video-layout > div > .bg-white,
.zhonghuijie-shell aside .bg-white {
  background: var(--zhonghuijie-surface) !important;
  border: 1px solid var(--zhonghuijie-line);
  border-radius: var(--zhonghuijie-radius-lg) !important;
  box-shadow: none !important;
}

.zhonghuijie-shell .bg-red-600 {
  background: var(--zhonghuijie-copper) !important;
}

.zhonghuijie-shell .hover\:bg-red-700:hover {
  background: var(--zhonghuijie-copper-deep) !important;
}

.zhonghuijie-side-rec-item:hover {
  background: var(--zhonghuijie-copper-soft) !important;
}

.zhonghuijie-side-rec-item:hover .zhonghuijie-side-rec-title {
  color: var(--zhonghuijie-copper-deep) !important;
}

.zhonghuijie-side-rec-title {
  color: var(--zhonghuijie-ink) !important;
}

/* ========== FOOTER ========== */
.zhonghuijie-shell > footer,
.zhonghuijie-shell footer.zhonghuijie-footer {
  background: linear-gradient(180deg, var(--zhonghuijie-footer-2), var(--zhonghuijie-footer)) !important;
  color: #e7eef3 !important;
  box-shadow: inset 0 3px 0 0 var(--zhonghuijie-copper);
}

.zhonghuijie-shell > footer::before,
.zhonghuijie-shell footer.zhonghuijie-footer::before {
  content: none !important;
  display: none !important;
}

.zhonghuijie-footer-grid {
  gap: 2rem !important;
}

.zhonghuijie-shell footer .text-xl.font-bold {
  font-family: var(--zhonghuijie-display);
  letter-spacing: 0.04em;
}

.zhonghuijie-shell footer .text-blue-400,
.zhonghuijie-shell footer svg.text-blue-400 {
  color: #e0a07a !important;
}

.zhonghuijie-shell footer a.text-gray-300:hover,
.zhonghuijie-shell footer .hover\:text-blue-400:hover {
  color: #f0c3a8 !important;
}

.zhonghuijie-shell footer .border-gray-800 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.zhonghuijie-ababseo {
  background: rgba(184, 92, 56, 0.16) !important;
  border-color: rgba(184, 92, 56, 0.35) !important;
  border-radius: var(--zhonghuijie-radius) !important;
}

.zhonghuijie-ababseo__icon {
  background: linear-gradient(135deg, var(--zhonghuijie-copper), var(--zhonghuijie-amber)) !important;
  border-radius: var(--zhonghuijie-radius) !important;
}

.zhonghuijie-ababseo__text {
  background: linear-gradient(90deg, #f0c3a8, #f6d59a, #9fd4d8) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* Motion: subtle, no layout thrash */
@media (prefers-reduced-motion: no-preference) {
  .zhonghuijie-cat-grid > a,
  .zhonghuijie-grid-3 > div.bg-white,
  .zhonghuijie-grid-4 > div.bg-white,
  .zhonghuijie-grid-3 > article.bg-white,
  .zhonghuijie-grid-4 > article.bg-white {
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  }
}

.zhonghuijie-shell a:focus-visible,
.zhonghuijie-shell button:focus-visible,
.zhonghuijie-shell input:focus-visible {
  outline: 2px solid var(--zhonghuijie-copper) !important;
  outline-offset: 2px;
}

.zhonghuijie-shell .text-gray-900 { color: var(--zhonghuijie-ink) !important; }
.zhonghuijie-shell .text-gray-700 { color: var(--zhonghuijie-ink-soft) !important; }
.zhonghuijie-shell .text-gray-600 { color: var(--zhonghuijie-mute) !important; }

.zhonghuijie-not-found-title {
  background: linear-gradient(90deg, var(--zhonghuijie-copper), var(--zhonghuijie-teal)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* Cross-platform / a11y polish */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}

.zhonghuijie-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--zhonghuijie-copper);
  color: #fff;
  border-radius: var(--zhonghuijie-radius);
}

.zhonghuijie-skip:focus {
  left: 0.75rem;
  top: 0.75rem;
}

.zhonghuijie-header nav a.is-active,
.zhonghuijie-nav-scroll__link.is-active {
  color: var(--zhonghuijie-copper) !important;
  font-weight: 600;
}

.zhonghuijie-nav-scroll {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 0 0.65rem;
  margin: 0 -0.15rem;
}

.zhonghuijie-nav-scroll::-webkit-scrollbar {
  display: none;
}

.zhonghuijie-nav-scroll__link {
  flex: 0 0 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--zhonghuijie-line);
  border-radius: 999px;
  background: var(--zhonghuijie-surface);
  color: var(--zhonghuijie-ink-soft);
  font-size: 0.875rem;
  text-decoration: none;
}

.zhonghuijie-nav-scroll__link:hover {
  border-color: var(--zhonghuijie-copper);
  color: var(--zhonghuijie-copper);
}

@media (min-width: 768px) {
  .zhonghuijie-nav-scroll {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zhonghuijie-shell *,
  .zhonghuijie-shell *::before,
  .zhonghuijie-shell *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Mobile polish */
@media (max-width: 767px) {
  .zhonghuijie-shell > header a > span.text-xl {
    font-size: 1.05rem;
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .zhonghuijie-shell section.zhonghuijie-hero {
    padding: 2.25rem 0 2rem !important;
  }

  .zhonghuijie-shell .zhonghuijie-hero .px-8.py-3 {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* domain variant 2: teal accent cards */
.zhonghuijie-shell.theme-zhonghuijie article.bg-white.rounded-lg {
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.07) !important;
  border-bottom: 3px solid var(--zhonghuijie-teal);
}
.zhonghuijie-shell.theme-zhonghuijie .zhonghuijie-hero { clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); }