/* roulang page: index */
:root {
  --c-primary: #ED6A0C;
  --c-primary-light: #F25C05;
  --c-dark: #0A0A0A;
  --c-surface: #101010;
  --c-surface2: #181818;
  --c-paper: #F7F4EF;
  --c-line-dark: #262626;
  --c-line-light: #E7E5E4;
  --c-text-main: #171717;
  --c-text-muted: #57534E;
  --c-text-onDark: #F5F2EC;
  --c-text-onDarkMuted: #A8A29E;
  --radius-lg: 8px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 18px 40px rgba(0, 0, 0, 0.1);
}
html{
  scroll-behavior:smooth;
}
body{
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  background: #F7F4EF;
  color: #171717;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
*{
  box-sizing: border-box;
}
img{
  max-width: 100%;
  display: block;
}
button{
  font-family: inherit;
}
a{
  color: inherit;
  text-decoration: none;
}
::selection{
  background: rgba(237,106,12,0.22);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: 2px solid rgba(237,106,12,0.8);
  outline-offset: 3px;
}
.container-lg{
  max-width: 80rem;
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  font-weight: 600;
  text-transform: uppercase;
}
.eyebrow::before{
  content: "";
  width: 22px;
  height: 2px;
  background: currentColor;
}
.site-header{
  background: rgba(10,10,10,0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav-link{
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: #D6D3D1;
  padding: 0.5rem 0;
  transition: color 0.25s ease;
}
.nav-link:hover{
  color: #ffffff;
}
.nav-link.active{
  color: #ffffff;
}
.nav-link.active::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 2px;
  background: #ED6A0C;
  border-radius: 2px;
}
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.925rem;
  padding: 0.75rem 1.4rem;
  border: 1px solid transparent;
  transition: all 0.25s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary{
  background: #ED6A0C;
  color: #171717;
  border-color: #ED6A0C;
}
.btn-primary:hover{
  background: #F05E00;
  border-color: #F05E00;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(237,106,12,0.22);
}
.btn-dark{
  background: #171717;
  color: #F5F2EC;
  border-color: #171717;
}
.btn-dark:hover{
  background: #000000;
  transform: translateY(-1px);
}
.btn-solid-white{
  background: #ffffff;
  color: #171717;
  border-color: #ffffff;
}
.btn-solid-white:hover{
  background: #F5F2EC;
  transform: translateY(-1px);
}
.btn-ghost-light{
  background: transparent;
  color: #F5F2EC;
  border: 1px solid rgba(255,255,255,0.22);
}
.btn-ghost-light:hover{
  border-color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.05);
}
.btn-ghost-dark{
  background: transparent;
  color: #171717;
  border: 1px solid #D6D3D1;
}
.btn-ghost-dark:hover{
  background: rgba(0,0,0,0.04);
  border-color: #171717;
}
.hover-card{
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.hover-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}
.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible{
  opacity: 1;
  transform: translateY(0);
}
.accordion-body{
  display: none;
}
.accordion-item.open .accordion-body{
  display: block;
}
.accordion-item.open .accordion-arrow{
  transform: rotate(180deg);
}
.field{
  width: 100%;
  border: 1px solid #D6D3D1;
  background: #fff;
  border-radius: 12px;
  min-height: 48px;
  padding: 0.65rem 0.9rem;
  font-size: 0.925rem;
  color: #171717;
  transition: border-color 0.2s, box-shadow 0.2s;
}
textarea.field{
  min-height: 130px;
  resize: vertical;
}
.field:focus{
  outline: none;
  border-color: #ED6A0C;
  box-shadow: 0 0 0 4px rgba(237,106,12,0.14);
}
.mobile-bottom-nav{
  box-shadow: 0 -10px 30px rgba(0,0,0,0.18);
}
.mobile-tab{
  color:#A8A29E;
  transition:color .2s;
}
.mobile-tab.active{
  color:#ED6A0C;
}
.footer-title{
  color: #E7E5E4;
  font-weight: 600;
}
.footer-link{
  display: inline-block;
  font-size: 0.875rem;
  color: #A8A29E;
  transition: color 0.2s;
}
.footer-link:hover{
  color: #ffffff;
}
.stat-card{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 1.2rem 1rem;
  backdrop-filter: blur(6px);
}
.progress-line{
  height: 3px;
  width: 40px;
  background: #ED6A0C;
  border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *{
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal{
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 640px) {
  .container-lg{
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
.no-scrollbar::-webkit-scrollbar{
  display:none;
}
.no-scrollbar{
  scrollbar-width:none;
}

/* roulang page: category1 */
:root {
 --c-primary: #ED6A0C;
 --c-primary-light: #F25C05;
 --c-dark: #0A0A0A;
 --c-surface: #101010;
 --c-surface2: #181818;
 --c-paper: #F7F4EF;
 --c-line-dark: #262626;
 --c-line-light: #E7E5E4;
 --c-text-main: #171717;
 --c-text-muted: #57534E;
 --c-text-onDark: #F5F2EC;
 --c-text-onDarkMuted: #A8A29E;
 --radius-lg: 8px;
 --radius-xl: 16px;
 --radius-2xl: 24px;
 --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.06);
 --shadow-hover: 0 18px 40px rgba(0, 0, 0, 0.1);
}
html{
 scroll-behavior:smooth;
}
body{
 font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
 background: #F7F4EF;
 color: #171717;
 line-height: 1.7;
 text-rendering: optimizeLegibility;
 -webkit-font-smoothing: antialiased;
}
img{
 max-width: 100%;
 display: block;
}
button{
 font-family: inherit;
}
a{
 color: inherit;
 text-decoration: none;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
 outline: 2px solid rgba(237,106,12,0.8);
 outline-offset: 3px;
}
.container-lg{
 max-width: 80rem;
 margin: 0 auto;
 padding-left: 1.25rem;
 padding-right: 1.25rem;
}
.eyebrow{
 display: inline-flex;
 align-items: center;
 gap: 0.65rem;
 font-size: 0.75rem;
 letter-spacing: 0.15em;
 font-weight: 600;
 text-transform: uppercase;
}
.eyebrow::before{
 content: "";
 width: 22px;
 height: 2px;
 background: currentColor;
}
.site-header{
 background: rgba(10,10,10,0.96);
 backdrop-filter: blur(14px);
 -webkit-backdrop-filter: blur(14px);
 border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav-link{
 position: relative;
 display: inline-flex;
 align-items: center;
 font-size: 0.875rem;
 font-weight: 500;
 color: #D6D3D1;
 padding: 0.5rem 0;
 transition: color 0.25s ease;
}
.nav-link:hover{
 color: #ffffff;
}
.nav-link.active{
 color: #ffffff;
}
.nav-link.active::after{
 content: "";
 position: absolute;
 left: 0;
 bottom: -3px;
 width: 100%;
 height: 2px;
 background: #ED6A0C;
 border-radius: 2px;
}
.btn{
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 0.5rem;
 border-radius: 8px;
 font-weight: 600;
 font-size: 0.925rem;
 padding: 0.75rem 1.4rem;
 border: 1px solid transparent;
 transition: all 0.25s ease;
 cursor: pointer;
 white-space: nowrap;
}
.btn-primary{
 background: #ED6A0C;
 color: #171717;
 border-color: #ED6A0C;
}
.btn-primary:hover{
 background: #F05E00;
 border-color: #F05E00;
 transform: translateY(-1px);
 box-shadow: 0 10px 24px rgba(237,106,12,0.22);
}
.btn-ghost-light{
 background: transparent;
 color: #F5F2EC;
 border: 1px solid rgba(255,255,255,0.22);
}
.btn-ghost-light:hover{
 border-color: rgba(255,255,255,0.55);
 background: rgba(255,255,255,0.05);
}
.hover-card{
 transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.hover-card:hover{
 transform: translateY(-6px);
 box-shadow: var(--shadow-hover);
}
.accordion-body{
 display: none;
}
.accordion-item.open .accordion-body{
 display: block;
}
.accordion-item.open .accordion-arrow{
 transform: rotate(180deg);
}
.mobile-bottom-nav{
 box-shadow: 0 -10px 30px rgba(0,0,0,0.18);
}
.mobile-tab{
 color:#A8A29E;
 transition:color .2s;
}
.mobile-tab.active{
 color:#ED6A0C;
}
.footer-title{
 color: #E7E5E4;
 font-weight: 600;
}
.footer-link{
 display: inline-block;
 font-size: 0.875rem;
 color: #A8A29E;
 transition: color 0.2s;
}
.footer-link:hover{
 color: #ffffff;
}
.stat-card{
 background: rgba(255,255,255,0.05);
 border: 1px solid rgba(255,255,255,0.08);
 border-radius: 16px;
 padding: 1.2rem 1rem;
 backdrop-filter: blur(6px);
}

/* 分类页补充样式 */
.cat-breadcrumb-link{
 font-size: 0.8rem;
 color: #D6D3D1;
 transition: color 0.2s ease;
}
.cat-breadcrumb-link:hover{
 color: #ffffff;
}
.cat-breadcrumb-sep{
 margin: 0 0.4rem;
 color: #57534E;
}
.badge{
 display: inline-flex;
 align-items: center;
 gap: 0.3rem;
 border-radius: 6px;
 font-size: 0.72rem;
 font-weight: 600;
 padding: 0.2rem 0.55rem;
}
.badge-dark{
 background: rgba(0,0,0,0.62);
 color: #F5F2EC;
 border: 1px solid rgba(255,255,255,0.08);
}
.badge-orange{
 background: rgba(237,106,12,0.14);
 color: #C2410C;
 border: 1px solid rgba(237,106,12,0.25);
}
.filter-chip{
 display: inline-flex;
 align-items: center;
 gap: 0.45rem;
 padding: 0.52rem 0.95rem;
 border-radius: 999px;
 background: #ffffff;
 border: 1px solid #E7E5E4;
 font-size: 0.82rem;
 font-weight: 500;
 color: #57534E;
 transition: all 0.22s ease;
 white-space: nowrap;
}
.filter-chip:hover{
 border-color: #171717;
 color: #171717;
 transform: translateY(-1px);
}
.filter-chip.active{
 background: #ED6A0C;
 border-color: #ED6A0C;
 color: #171717;
 font-weight: 600;
}
.media-card{
 background: #ffffff;
 border: 1px solid #F0EDE8;
 border-radius: 16px;
 overflow: hidden;
 transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
 box-shadow: 0 2px 12px rgba(0,0,0,0.03);
}
.media-card:hover{
 transform: translateY(-6px);
 box-shadow: var(--shadow-hover);
 border-color: #E7E5E4;
}
.card-thumb{
 position: relative;
 overflow: hidden;
 aspect-ratio: 16 / 10;
 background: #E7E5E4;
}
.card-thumb img{
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.media-card:hover .card-thumb img{
 transform: scale(1.05);
}
.card-thumb::after{
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.05) 35%, rgba(0,0,0,0.66) 100%);
 pointer-events: none;
}
.play-mask{
 position: absolute;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(10,10,10,0.2);
 opacity: 0;
 transition: opacity 0.25s ease;
}
.media-card:hover .play-mask{
 opacity: 1;
}
.play-round{
 width: 46px;
 height: 46px;
 border-radius: 999px;
 background: rgba(255,255,255,0.92);
 color: #171717;
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 8px 24px rgba(0,0,0,0.3);
 transform: scale(0.9);
 transition: transform 0.25s ease;
}
.media-card:hover .play-round{
 transform: scale(1);
}
.page-number{
 width: 40px;
 height: 40px;
 border-radius: 10px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-size: 0.9rem;
 font-weight: 600;
 color: #57534E;
 border: 1px solid #E7E5E4;
 background: #ffffff;
 transition: all 0.2s ease;
}
.page-number:hover{
 border-color: #171717;
 color: #171717;
}
.page-number.current{
 background: #ED6A0C;
 border-color: #ED6A0C;
 color: #171717;
}
.faq-answer a{
 color: #ED6A0C;
 text-decoration: underline;
 text-underline-offset: 3px;
}
@media (prefers-reduced-motion: reduce){
 *{
   animation-duration: 0.001ms !important;
   transition-duration: 0.001ms !important;
   scroll-behavior: auto !important;
 }
}
@media (max-width: 640px){
 .container-lg{
   padding-left: 1rem;
   padding-right: 1rem;
 }
}