/* roulang page: index */
:root {
  --bg: oklch(0.13 0.01 255);
  --surface: oklch(0.18 0.01 255);
  --border: oklch(0.26 0.01 255);
  --accent: oklch(0.64 0.22 28);
  --accent2: oklch(0.60 0.25 340);
  --text: oklch(0.94 0.01 255);
  --muted: oklch(0.60 0.01 255);
  --radius-card: 16px;
  --radius-btn: 8px;
  --radius-tag: 4px;
  --shadow-card: 0 2px 12px oklch(0 0 0 / 0.4);
  --shadow-card-hover: 0 8px 28px oklch(0 0 0 / 0.6);
  --font: 'PingFang SC','Noto Sans SC','Microsoft YaHei',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.6;font-size:16px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{cursor:pointer;font-family:var(--font)}

.container{max-width:1280px;margin:0 auto;padding:0 24px}
@media(min-width:1024px){.container{padding:0 48px}}

/* NAV */
header{position:sticky;top:0;z-index:100;background:var(--surface);border-bottom:1px solid var(--border)}
nav{display:flex;align-items:center;gap:32px;height:64px}
.nav-logo{display:flex;flex-direction:column;line-height:1.1;flex-shrink:0}
.nav-logo span:first-child{font-size:1.1rem;font-weight:800;color:var(--accent)}
.nav-logo span:last-child{font-size:0.65rem;color:var(--muted)}
.nav-links{display:flex;align-items:center;gap:4px;flex:1}
.nav-links a,.nav-links button{background:none;border:none;color:var(--muted);font-size:0.9rem;padding:8px 12px;border-radius:6px;transition:color 0.15s,background 0.15s;white-space:nowrap}
.nav-links a:hover,.nav-links button:hover,.nav-links a.active{color:var(--text);background:var(--border)}
.nav-links a.active{color:var(--accent)}
.nav-right{display:flex;align-items:center;gap:12px;margin-left:auto}
.btn-primary{background:var(--accent);color:#fff;border:none;padding:9px 20px;border-radius:var(--radius-btn);font-weight:700;font-size:0.875rem;transition:filter 0.15s,transform 0.15s}
.btn-primary:hover{filter:brightness(1.1);transform:scale(1.02)}
.btn-outline{background:transparent;color:var(--accent);border:1.5px solid var(--accent);padding:8px 18px;border-radius:var(--radius-btn);font-weight:600;font-size:0.875rem;transition:background 0.15s,color 0.15s}
.btn-outline:hover{background:var(--accent);color:#fff}
.search-btn{background:none;border:none;color:var(--muted);padding:8px;border-radius:6px;transition:color 0.15s}
.search-btn:hover{color:var(--text)}
.hamburger{display:none;background:none;border:none;color:var(--text);padding:8px;flex-direction:column;gap:5px}
.hamburger span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform 0.2s}

/* MEGA PANEL */
.mega-wrap{position:relative}
.mega-panel{display:none;position:absolute;top:calc(100% + 8px);left:0;width:480px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 32px oklch(0 0 0 / 0.5);padding:20px;z-index:200}
.mega-panel.open{display:flex;gap:20px}
.mega-col{flex:1}
.mega-col h4{font-size:0.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:10px}
.mega-link{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:6px;font-size:0.875rem;color:var(--muted);transition:color 0.15s,background 0.15s;border-left:2px solid transparent}
.mega-link:hover{color:var(--accent);background:var(--border);border-left-color:var(--accent)}
.mega-card{background:var(--bg);border-radius:10px;overflow:hidden;margin-bottom:10px}
.mega-thumb{height:72px;background:linear-gradient(135deg,oklch(0.25 0.08 28),oklch(0.20 0.05 340))}
.mega-card-info{padding:8px 10px;font-size:0.8rem;color:var(--muted)}

/* MOBILE DRAWER */
.mobile-drawer{display:none;position:fixed;inset:0;background:var(--surface);z-index:300;flex-direction:column;padding:24px}
.mobile-drawer.open{display:flex}
.drawer-close{align-self:flex-end;background:none;border:none;color:var(--text);font-size:1.5rem;margin-bottom:20px}
.drawer-links{display:flex;flex-direction:column;gap:4px}
.drawer-links a{padding:12px 16px;border-radius:8px;font-size:1rem;color:var(--text);transition:background 0.15s}
.drawer-links a:hover{background:var(--border)}
.drawer-links a.active{color:var(--accent)}

/* HERO */
.hero{background:linear-gradient(135deg,var(--bg) 0%,oklch(0.10 0.02 28) 100%);padding:72px 0 80px}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.hero-badge{display:inline-block;background:oklch(0.64 0.22 28 / 0.15);color:var(--accent);border:1px solid oklch(0.64 0.22 28 / 0.3);padding:4px 12px;border-radius:20px;font-size:0.8rem;font-weight:600;margin-bottom:20px}
.hero h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:800;line-height:1.15;letter-spacing:-0.02em;margin-bottom:20px}
.hero h1 em{color:var(--accent);font-style:normal}
.hero-desc{font-size:1rem;color:var(--muted);line-height:1.7;margin-bottom:32px;max-width:480px}
.hero-ctas{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.hero-trust{font-size:0.8rem;color:var(--muted)}
.hero-trust strong{color:var(--accent)}

/* RIGHTS MATRIX */
.rights-matrix{background:var(--surface);border-radius:var(--radius-card);padding:24px;border:1px solid var(--border)}
.rights-matrix h3{font-size:0.85rem;color:var(--muted);margin-bottom:16px;font-weight:600}
.rights-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.rights-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;background:var(--bg);border-radius:10px;text-align:center}
.rights-icon{font-size:1.4rem}
.rights-label{font-size:0.72rem;color:var(--muted);line-height:1.3}

/* SECTION COMMON */
section{padding:80px 0}
@media(max-width:768px){section{padding:48px 0}}
.section-header{text-align:center;margin-bottom:48px}
.section-header h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:700;margin-bottom:12px}
.section-header p{color:var(--muted);font-size:0.95rem;max-width:560px;margin:0 auto;line-height:1.7}

/* COMPARE TABLE */
.compare-section{background:oklch(0.15 0.01 255)}
.compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.compare-table{width:100%;min-width:600px;border-collapse:collapse}
.compare-table th{padding:20px 16px;text-align:center;font-weight:700;font-size:0.95rem;border-bottom:1px solid var(--border)}
.compare-table th.recommended{border:2px solid var(--accent);border-bottom:none;border-radius:12px 12px 0 0;background:oklch(0.64 0.22 28 / 0.08);position:relative}
.rec-badge{display:inline-block;background:var(--accent);color:#fff;font-size:0.7rem;padding:2px 8px;border-radius:10px;margin-bottom:6px}
.price{font-size:1.4rem;font-weight:800;color:var(--accent);display:block;margin-top:4px}
.price-sub{font-size:0.75rem;color:var(--muted);font-weight:400}
.compare-table td{padding:14px 16px;text-align:center;border-bottom:1px solid var(--border);font-size:0.875rem;color:var(--muted)}
.compare-table td:first-child{text-align:left;color:var(--text);font-weight:500}
.compare-table td.recommended{border-left:2px solid var(--accent);border-right:2px solid var(--accent);background:oklch(0.64 0.22 28 / 0.04)}
.compare-table tr:last-child td.recommended{border-bottom:2px solid var(--accent);border-radius:0 0 12px 12px}
.check{color:var(--accent);font-size:1rem}
.cross{color:var(--muted);opacity:0.4}
.compare-cta-row td{padding:20px 16px;border-bottom:none}

/* TIER CARDS */
.tier-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tier-card{background:var(--surface);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-card);transition:transform 0.18s,box-shadow 0.18s}
.tier-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}
.tier-stripe{height:4px}
.tier-stripe.free{background:var(--muted)}
.tier-stripe.std{background:var(--accent)}
.tier-stripe.pro{background:linear-gradient(90deg,var(--accent),var(--accent2))}
.tier-body{padding:24px}
.tier-icon{font-size:2rem;margin-bottom:12px}
.tier-name{font-size:1.1rem;font-weight:700;margin-bottom:16px}
.tier-bullets{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.tier-bullets li{display:flex;align-items:flex-start;gap:8px;font-size:0.875rem;color:var(--muted)}
.tier-bullets li::before{content:'✦';color:var(--accent);flex-shrink:0;margin-top:1px}

/* CONTENT CARDS */
.content-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.content-card{background:var(--surface);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-card);transition:transform 0.18s,box-shadow 0.18s}
.content-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}
.content-thumb{aspect-ratio:16/9;position:relative;overflow:hidden}
.thumb-bg{width:100%;height:100%;display:block}
.content-tag{position:absolute;top:10px;left:10px;background:var(--accent);color:#fff;font-size:0.7rem;padding:3px 8px;border-radius:var(--radius-tag);font-weight:600}
.lock-badge{position:absolute;top:10px;right:10px;background:oklch(0 0 0 / 0.6);color:#fff;font-size:0.7rem;padding:3px 8px;border-radius:var(--radius-tag);display:flex;align-items:center;gap:4px}
.content-info{padding:14px}
.content-title{font-size:0.9rem;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:8px}
.content-meta{font-size:0.75rem;color:var(--muted)}

/* PREVIEW CTA */
.preview-cta{text-align:center;margin-top:32px}
.preview-cta a{color:var(--accent);font-size:0.9rem;font-weight:600;border-bottom:1px solid oklch(0.64 0.22 28 / 0.4);padding-bottom:2px;transition:border-color 0.15s}
.preview-cta a:hover{border-color:var(--accent)}

/* STATS BAR */
.stats-bar{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:40px 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat-num{font-size:2rem;font-weight:800;color:var(--accent);display:block}
.stat-label{font-size:0.85rem;color:var(--muted);margin-top:4px}

/* TESTIMONIALS */
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.testi-card{background:var(--surface);border-radius:var(--radius-card);padding:20px;border:1px solid var(--border)}
.testi-stars{color:var(--accent);font-size:0.9rem;margin-bottom:10px}
.testi-text{font-size:0.875rem;color:var(--muted);line-height:1.7;margin-bottom:14px}
.testi-author{display:flex;align-items:center;gap:10px}
.testi-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:0.8rem;font-weight:700;color:#fff;flex-shrink:0}
.testi-name{font-size:0.85rem;font-weight:600}
.testi-sub{font-size:0.75rem;color:var(--muted)}

/* FAQ */
.faq-list{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:4px}
.faq-item{background:var(--surface);border-radius:10px;overflow:hidden;border:1px solid var(--border)}
.faq-q{width:100%;background:none;border:none;color:var(--text);text-align:left;padding:18px 20px;font-size:0.95rem;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;transition:background 0.15s}
.faq-q:hover{background:var(--border)}
.faq-icon{color:var(--accent);font-size:1.2rem;flex-shrink:0;transition:transform 0.2s;line-height:1}
.faq-a{max-height:0;overflow:hidden;transition:max-height 0.2s ease}
.faq-a-inner{padding:0 20px 16px;font-size:0.875rem;color:var(--muted);line-height:1.7}
.faq-item.open .faq-icon{transform:rotate(45deg)}

/* CTA SECTION */
.cta-section{background:linear-gradient(135deg,oklch(0.64 0.22 28 / 0.12),oklch(0.60 0.25 340 / 0.08));border-top:1px solid var(--border);padding:80px 0;text-align:center}
.cta-section h2{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;margin-bottom:16px}
.cta-section p{color:var(--muted);font-size:1rem;margin-bottom:36px}
.cta-btns{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.cta-note{font-size:0.78rem;color:var(--muted)}

/* FOOTER */
footer{background:oklch(0.10 0.01 255);border-top:1px solid var(--border);padding:56px 0 32px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.footer-brand span{font-size:1.1rem;font-weight:800;color:var(--accent);display:block;margin-bottom:10px}
.footer-brand p{font-size:0.85rem;color:var(--muted);line-height:1.7}
.footer-col h4{font-size:0.8rem;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:14px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.footer-col ul li a{font-size:0.85rem;color:var(--muted);transition:color 0.15s}
.footer-col ul li a:hover{color:var(--accent)}
.footer-bottom{border-top:1px solid var(--border);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-bottom p{font-size:0.8rem;color:var(--muted)}

/* RESPONSIVE */
@media(max-width:1024px){
  .content-grid{grid-template-columns:repeat(2,1fr)}
  .tier-cards{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .testimonials-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .hero-inner{grid-template-columns:1fr}
  .nav-links{display:none}
  .hamburger{display:flex}
  .tier-cards{grid-template-columns:1fr;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding-bottom:8px}
  .tier-card{min-width:280px;scroll-snap-align:start}
  .testimonials-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .content-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
  .hero-ctas{flex-direction:column;align-items:flex-start}
  .cta-btns{flex-direction:column;align-items:center}
  .footer-bottom{flex-direction:column;text-align:center}
}

/* roulang page: category2 */
:root {
  --bg: oklch(0.13 0.01 255);
  --surface: oklch(0.18 0.01 255);
  --border: oklch(0.26 0.01 255);
  --accent: oklch(0.64 0.22 28);
  --accent2: oklch(0.60 0.25 340);
  --text: oklch(0.94 0.01 255);
  --muted: oklch(0.60 0.01 255);
  --radius-card: 16px;
  --radius-btn: 8px;
  --radius-tag: 4px;
  --shadow-card: 0 2px 12px oklch(0 0 0 / 0.4);
  --font: 'PingFang SC','Noto Sans SC','Microsoft YaHei',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.6;font-size:16px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:var(--font);cursor:pointer}

.container{max-width:1280px;margin:0 auto;padding:0 24px}
@media(min-width:1024px){.container{padding:0 48px}}

/* NAV */
header{position:sticky;top:0;z-index:100;background:var(--surface);border-bottom:1px solid var(--border)}
nav.container{display:flex;align-items:center;gap:24px;height:64px}
.nav-logo{display:flex;flex-direction:column;line-height:1.1;text-decoration:none}
.nav-logo span:first-child{font-size:1.1rem;font-weight:800;color:var(--accent)}
.nav-logo span:last-child{font-size:0.65rem;color:var(--muted)}
.nav-links{display:flex;align-items:center;gap:4px;flex:1}
.nav-links a{color:var(--muted);font-size:0.9rem;padding:8px 12px;border-radius:6px;transition:color 150ms,background 150ms}
.nav-links a:hover,.nav-links a.active{color:var(--text);background:oklch(0.22 0.01 255)}
.nav-links a.active{color:var(--accent)}
.mega-wrap{position:relative}
.mega-panel{display:none;position:absolute;top:calc(100% + 8px);left:0;width:480px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 32px oklch(0 0 0 / 0.5);padding:20px;gap:20px;grid-template-columns:1fr 1fr}
.mega-panel.open{display:grid}
.mega-col h4{font-size:0.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:10px}
.mega-link{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;font-size:0.875rem;color:var(--muted);transition:color 150ms,background 150ms;border-left:2px solid transparent}
.mega-link:hover{color:var(--accent);background:oklch(0.22 0.01 255);border-left-color:var(--accent)}
.mega-card{display:flex;gap:10px;align-items:center;padding:8px;border-radius:8px;background:oklch(0.22 0.01 255);margin-bottom:8px}
.mega-thumb{width:56px;height:40px;border-radius:6px;background:linear-gradient(135deg,oklch(0.25 0.08 28),oklch(0.20 0.05 340));flex-shrink:0}
.mega-card-info{font-size:0.8rem;color:var(--muted)}
.nav-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.search-btn{background:none;border:none;color:var(--muted);padding:8px;border-radius:6px;display:flex;align-items:center;transition:color 150ms}
.search-btn:hover{color:var(--text)}
.btn-primary{background:var(--accent);color:#fff;padding:9px 20px;border-radius:var(--radius-btn);font-weight:700;font-size:0.875rem;border:none;transition:filter 150ms,transform 150ms;white-space:nowrap}
.btn-primary:hover{filter:brightness(1.1);transform:scale(1.02)}
.btn-outline{background:transparent;color:var(--accent);padding:9px 20px;border-radius:var(--radius-btn);font-weight:700;font-size:0.875rem;border:1.5px solid var(--accent);transition:background 150ms,color 150ms}
.btn-outline:hover{background:var(--accent);color:#fff}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:8px}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:transform 200ms}
@media(max-width:639px){
  .nav-links{display:none}
  .hamburger{display:flex}
}
.mobile-drawer{display:none;position:fixed;inset:0;background:var(--surface);z-index:200;padding:24px;flex-direction:column;gap:8px;overflow-y:auto}
.mobile-drawer.open{display:flex}
.drawer-close{align-self:flex-end;background:none;border:none;color:var(--muted);font-size:1.5rem;cursor:pointer;margin-bottom:8px}
.mobile-drawer a{color:var(--text);font-size:1rem;padding:12px 16px;border-radius:8px;display:block}
.mobile-drawer a:hover{background:oklch(0.22 0.01 255)}

/* CATEGORY HERO */
.cat-hero{padding:40px 0 32px;border-bottom:1px solid var(--border)}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:0.8rem;color:var(--muted);margin-bottom:16px}
.breadcrumb a{color:var(--muted);transition:color 150ms}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb span{color:var(--border)}
.cat-hero-inner{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cat-hero h1{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;letter-spacing:-0.02em;line-height:1.2}
.cat-hero h1 em{color:var(--accent);font-style:normal}
.cat-hero p{color:var(--muted);font-size:0.9rem;margin-top:10px;max-width:520px;line-height:1.7}
.filter-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.filter-tag{padding:6px 14px;border-radius:20px;font-size:0.8rem;border:1px solid var(--border);color:var(--muted);cursor:pointer;transition:all 150ms;background:none}
.filter-tag:hover,.filter-tag.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* MAIN LAYOUT */
.cat-body{padding:40px 0 60px}
.cat-layout{display:grid;grid-template-columns:1fr 280px;gap:40px;align-items:start}
@media(max-width:1023px){.cat-layout{grid-template-columns:1fr}}

/* CARDS */
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1023px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:639px){.card-grid{grid-template-columns:1fr}}

.vcard{background:var(--surface);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-card);transition:transform 180ms ease,box-shadow 180ms ease;border-top:4px solid var(--accent2)}
.vcard:hover{transform:translateY(-4px);box-shadow:0 8px 24px oklch(0 0 0 / 0.55)}
.vcard-thumb{aspect-ratio:16/9;position:relative;overflow:hidden}
.vcard-thumb-inner{width:100%;height:100%}
.vcard-body{padding:12px}
.vcard-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.tag{display:inline-block;padding:2px 8px;border-radius:var(--radius-tag);font-size:0.7rem;font-weight:600;background:var(--accent2);color:#fff}
.tag-region{background:oklch(0.30 0.06 200)}
.vcard-title{font-size:0.9rem;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:8px}
.vcard-meta{display:flex;align-items:center;justify-content:space-between;font-size:0.75rem;color:var(--muted)}
.heat{display:flex;align-items:center;gap:4px}
.heat::before{content:'🔥';font-size:0.7rem}

/* PAGINATION */
.pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:36px}
.page-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-btn);border:1px solid var(--border);background:none;color:var(--muted);font-size:0.875rem;cursor:pointer;transition:all 150ms}
.page-btn:hover{border-color:var(--accent);color:var(--accent)}
.page-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.page-btn.arrow{font-size:1rem}

/* SIDEBAR */
.sidebar{display:flex;flex-direction:column;gap:20px}
@media(max-width:1023px){.sidebar{order:2;margin-top:0}}
.sidebar-block{background:var(--surface);border-radius:var(--radius-card);padding:20px;border:1px solid var(--border)}
.sidebar-block h3{font-size:0.85rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:14px}
.hot-list{list-style:none;display:flex;flex-direction:column;gap:4px}
.hot-list li a{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:6px;font-size:0.875rem;color:var(--muted);transition:all 150ms}
.hot-list li a:hover{background:oklch(0.22 0.01 255);color:var(--text)}
.hot-list li a.current{color:var(--accent);font-weight:600}
.hot-num{font-size:0.75rem;background:oklch(0.22 0.01 255);padding:2px 7px;border-radius:10px}
.sidebar-cta{background:linear-gradient(135deg,oklch(0.22 0.12 28),oklch(0.18 0.08 340));border-radius:var(--radius-card);padding:20px;text-align:center;border:1px solid oklch(0.30 0.08 28)}
.sidebar-cta p{font-size:0.8rem;color:var(--muted);margin:8px 0 14px;line-height:1.5}
.sidebar-cta strong{font-size:1rem;color:var(--text);display:block}

/* FAQ */
.faq-section{padding:60px 0}
.section-header{text-align:center;margin-bottom:40px}
.section-header h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:700;letter-spacing:-0.01em}
.section-header h2 em{color:var(--accent);font-style:normal}
.section-header p{color:var(--muted);font-size:0.9rem;margin-top:8px}
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
.faq-item{background:var(--surface);border-radius:12px;border:1px solid var(--border);overflow:hidden}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:none;border:none;color:var(--text);font-size:0.95rem;font-weight:600;text-align:left;cursor:pointer;gap:12px;transition:background 150ms}
.faq-q:hover{background:oklch(0.20 0.01 255)}
.faq-icon{color:var(--accent);font-size:1.2rem;flex-shrink:0;transition:transform 200ms;line-height:1}
.faq-a{max-height:0;overflow:hidden;transition:max-height 200ms ease}
.faq-a-inner{padding:0 20px 16px;color:var(--muted);font-size:0.9rem;line-height:1.7}
.faq-item.open .faq-icon{transform:rotate(45deg)}

/* CTA SECTION */
.cta-section{padding:64px 0;background:linear-gradient(135deg,oklch(0.16 0.06 28 / 0.6),oklch(0.14 0.04 340 / 0.4));border-top:1px solid var(--border)}
.cta-inner{text-align:center;max-width:600px;margin:0 auto}
.cta-inner h2{font-size:clamp(1.5rem,3.5vw,2.2rem);font-weight:800;letter-spacing:-0.02em;margin-bottom:12px}
.cta-inner h2 em{color:var(--accent);font-style:normal}
.cta-inner p{color:var(--muted);font-size:0.95rem;margin-bottom:28px}
.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta-note{font-size:0.75rem;color:var(--muted);margin-top:16px}

/* FOOTER */
footer{background:oklch(0.10 0.01 255);border-top:1px solid var(--border);padding:48px 0 24px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
@media(max-width:767px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:479px){.footer-grid{grid-template-columns:1fr}}
.footer-brand span{font-size:1rem;font-weight:800;color:var(--accent);display:block;margin-bottom:10px}
.footer-brand p{font-size:0.8rem;color:var(--muted);line-height:1.7}
.footer-col h4{font-size:0.8rem;font-weight:700;color:var(--text);margin-bottom:12px;text-transform:uppercase;letter-spacing:0.05em}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.footer-col ul li a{font-size:0.85rem;color:var(--muted);transition:color 150ms}
.footer-col ul li a:hover{color:var(--accent)}
.footer-bottom{border-top:1px solid var(--border);padding-top:20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:0.8rem;color:var(--muted)}

/* roulang page: category1 */
:root {
  --bg: oklch(0.13 0.01 255);
  --surface: oklch(0.18 0.01 255);
  --border: oklch(0.26 0.01 255);
  --accent: oklch(0.64 0.22 28);
  --accent2: oklch(0.60 0.25 340);
  --text: oklch(0.94 0.01 255);
  --muted: oklch(0.60 0.01 255);
  --radius-card: 16px;
  --radius-btn: 8px;
  --radius-tag: 4px;
  --shadow-card: 0 2px 12px oklch(0 0 0 / 0.4);
  --font: 'PingFang SC','Noto Sans SC','Microsoft YaHei',sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.6;font-size:16px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:var(--font);cursor:pointer}

.container{max-width:1280px;margin:0 auto;padding:0 24px}
@media(min-width:1024px){.container{padding:0 48px}}

/* NAV */
header{position:sticky;top:0;z-index:100;background:var(--surface);border-bottom:1px solid var(--border)}
nav.container{display:flex;align-items:center;gap:24px;height:64px}
.nav-logo{display:flex;flex-direction:column;line-height:1.1;margin-right:8px}
.nav-logo span:first-child{font-size:1.1rem;font-weight:800;color:var(--accent)}
.nav-logo span:last-child{font-size:0.65rem;color:var(--muted)}
.nav-links{display:flex;align-items:center;gap:4px;flex:1}
.nav-links a{color:var(--muted);font-size:0.9rem;padding:8px 12px;border-radius:6px;transition:color 150ms,background 150ms}
.nav-links a:hover,.nav-links a.active{color:var(--text);background:oklch(0.26 0.01 255 / 0.5)}
.nav-links a.active{color:var(--accent)}
.mega-wrap{position:relative}
.mega-panel{display:none;position:absolute;top:calc(100% + 8px);left:0;width:480px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 32px oklch(0 0 0 / 0.5);padding:20px;gap:20px}
.mega-panel.open{display:flex}
.mega-col{flex:1;display:flex;flex-direction:column;gap:6px}
.mega-col h4{font-size:0.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:6px}
.mega-link{font-size:0.875rem;color:var(--muted);padding:6px 8px;border-radius:6px;border-left:2px solid transparent;transition:color 120ms,border-color 120ms,background 120ms}
.mega-link:hover{color:var(--accent);border-left-color:var(--accent);background:oklch(0.22 0.01 255)}
.mega-card{display:flex;gap:10px;align-items:center;padding:8px;border-radius:8px;background:oklch(0.22 0.01 255)}
.mega-thumb{width:56px;height:40px;border-radius:6px;background:linear-gradient(135deg,oklch(0.30 0.10 28),oklch(0.22 0.05 255));flex-shrink:0}
.mega-card-info{font-size:0.8rem;color:var(--muted)}
.nav-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.search-btn{background:none;border:none;color:var(--muted);padding:8px;border-radius:6px;display:flex;align-items:center;transition:color 150ms}
.search-btn:hover{color:var(--text)}
.btn-primary{background:var(--accent);color:#fff;padding:9px 20px;border-radius:var(--radius-btn);font-weight:700;font-size:0.875rem;border:none;transition:filter 150ms,transform 150ms;white-space:nowrap}
.btn-primary:hover{filter:brightness(1.1);transform:scale(1.02)}
.btn-outline{background:transparent;color:var(--accent);padding:9px 20px;border-radius:var(--radius-btn);font-weight:700;font-size:0.875rem;border:1.5px solid var(--accent);transition:background 150ms,color 150ms;white-space:nowrap}
.btn-outline:hover{background:var(--accent);color:#fff}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:8px}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:transform 200ms}
@media(max-width:639px){
  .nav-links,.nav-right .btn-primary,.nav-right .search-btn{display:none}
  .hamburger{display:flex}
}
.mobile-drawer{display:none;position:fixed;inset:0;background:var(--surface);z-index:200;flex-direction:column;padding:24px;gap:16px;overflow-y:auto}
.mobile-drawer.open{display:flex}
.drawer-close{align-self:flex-end;background:none;border:none;color:var(--text);font-size:1.5rem;cursor:pointer}
.mobile-drawer a{color:var(--text);font-size:1.1rem;padding:12px 0;border-bottom:1px solid var(--border)}

/* CATEGORY HERO */
.cat-hero{padding:48px 0 36px;border-bottom:1px solid var(--border)}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:0.8rem;color:var(--muted);margin-bottom:16px}
.breadcrumb a{color:var(--muted);transition:color 120ms}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb span{color:var(--border)}
.cat-hero-inner{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cat-hero-text h1{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;line-height:1.2;letter-spacing:-0.02em;margin-bottom:10px}
.cat-hero-text h1 em{color:var(--accent);font-style:normal}
.cat-hero-text p{color:var(--muted);font-size:0.95rem;max-width:520px}
.filter-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.filter-tag{padding:6px 14px;border-radius:20px;font-size:0.8rem;border:1px solid var(--border);color:var(--muted);cursor:pointer;transition:border-color 150ms,color 150ms,background 150ms}
.filter-tag:hover,.filter-tag.active{border-color:var(--accent);color:var(--accent);background:oklch(0.64 0.22 28 / 0.1)}

/* LAYOUT */
.cat-body{padding:48px 0}
.cat-layout{display:grid;grid-template-columns:1fr 280px;gap:40px;align-items:start}
@media(max-width:1023px){.cat-layout{grid-template-columns:1fr}}

/* CARD GRID */
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:1023px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:639px){.card-grid{grid-template-columns:1fr}}

.content-card{background:var(--surface);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-card);transition:transform 180ms ease,box-shadow 180ms ease;border-top:4px solid var(--accent)}
.content-card:hover{transform:translateY(-4px);box-shadow:0 8px 28px oklch(0 0 0 / 0.55)}
.card-thumb{aspect-ratio:16/9;background:linear-gradient(135deg,oklch(0.28 0.08 28),oklch(0.20 0.04 255));position:relative}
.card-thumb-2{background:linear-gradient(135deg,oklch(0.25 0.10 340),oklch(0.18 0.03 255))}
.card-thumb-3{background:linear-gradient(135deg,oklch(0.30 0.06 60),oklch(0.20 0.04 28))}
.card-thumb-4{background:linear-gradient(135deg,oklch(0.22 0.08 255),oklch(0.28 0.10 28))}
.card-thumb-5{background:linear-gradient(135deg,oklch(0.26 0.12 28),oklch(0.18 0.06 340))}
.card-thumb-6{background:linear-gradient(135deg,oklch(0.24 0.05 255),oklch(0.30 0.08 60))}
.card-thumb-7{background:linear-gradient(135deg,oklch(0.28 0.10 340),oklch(0.22 0.06 28))}
.card-thumb-8{background:linear-gradient(135deg,oklch(0.20 0.06 28),oklch(0.26 0.08 255))}
.card-body{padding:14px}
.card-tag{display:inline-block;background:var(--accent);color:#fff;font-size:0.7rem;font-weight:700;padding:2px 8px;border-radius:var(--radius-tag);margin-bottom:8px}
.card-title{font-size:0.9rem;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:8px}
.card-meta{display:flex;align-items:center;justify-content:space-between;font-size:0.75rem;color:var(--muted)}
.card-heat{display:flex;align-items:center;gap:4px}
.card-heat::before{content:'🔥';font-size:0.7rem}

/* PAGINATION */
.pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:40px}
.page-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-btn);border:1px solid var(--border);background:none;color:var(--muted);font-size:0.875rem;cursor:pointer;transition:background 150ms,color 150ms,border-color 150ms}
.page-btn:hover{border-color:var(--accent);color:var(--accent)}
.page-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.page-arrow{padding:0 12px;width:auto}

/* SIDEBAR */
.sidebar{display:flex;flex-direction:column;gap:24px}
@media(max-width:1023px){.sidebar{order:2}}
.sidebar-block{background:var(--surface);border-radius:var(--radius-card);padding:20px;border:1px solid var(--border)}
.sidebar-block h3{font-size:0.9rem;font-weight:700;margin-bottom:14px;color:var(--text)}
.sidebar-cats{display:flex;flex-direction:column;gap:4px}
.sidebar-cat-link{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:6px;font-size:0.875rem;color:var(--muted);transition:color 150ms,background 150ms;border-left:2px solid transparent}
.sidebar-cat-link:hover{color:var(--accent);background:oklch(0.22 0.01 255);border-left-color:var(--accent)}
.sidebar-cat-link.active{color:var(--accent);border-left-color:var(--accent)}
.sidebar-cat-count{font-size:0.75rem;color:var(--muted)}
.sidebar-cta{background:linear-gradient(135deg,oklch(0.64 0.22 28 / 0.15),oklch(0.60 0.25 340 / 0.10));border:1px solid oklch(0.64 0.22 28 / 0.3);border-radius:var(--radius-card);padding:20px;text-align:center}
.sidebar-cta h3{font-size:1rem;font-weight:700;margin-bottom:8px}
.sidebar-cta p{font-size:0.8rem;color:var(--muted);margin-bottom:14px;line-height:1.5}
.sidebar-cta .btn-primary{width:100%;display:block;text-align:center;padding:10px}

/* FOOTER */
footer{background:oklch(0.10 0.01 255);border-top:1px solid var(--border);padding:48px 0 24px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
@media(max-width:767px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:479px){.footer-grid{grid-template-columns:1fr}}
.footer-brand span{font-size:1rem;font-weight:800;color:var(--accent);display:block;margin-bottom:10px}
.footer-brand p{font-size:0.8rem;color:var(--muted);line-height:1.7}
.footer-col h4{font-size:0.8rem;font-weight:700;color:var(--text);margin-bottom:12px;text-transform:uppercase;letter-spacing:0.06em}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.footer-col ul li a{font-size:0.8rem;color:var(--muted);transition:color 150ms}
.footer-col ul li a:hover{color:var(--accent)}
.footer-bottom{border-top:1px solid var(--border);padding-top:20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.footer-bottom p{font-size:0.75rem;color:var(--muted)}