/* roulang page: index */
:root{
  --color-bg:#1e1a18;
  --color-surface:#272220;
  --color-surface-2:#2f2926;
  --color-border:#3d3531;
  --color-accent:#d4813a;
  --color-accent-dim:#a8672f;
  --color-accent-warm:#c0442a;
  --color-text-body:#e8e2dd;
  --color-text-muted:#948b84;
  --color-text-heading:#f7f3ef;
  --radius-card:0.75rem;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--color-bg);color:var(--color-text-body);font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;line-height:1.75;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;}
h1,h2,h3,h4{color:var(--color-text-heading);line-height:1.2;margin:0;}
p{margin:0;}
.btn-primary{background:var(--color-accent);color:#fff;border-radius:0.5rem;font-weight:600;transition:all .15s ease;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:none;cursor:pointer;}
.btn-primary:hover{background:var(--color-accent-dim);transform:scale(1.05);}
.btn-primary:active{transform:scale(.95);}
.btn-primary:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;}
.btn-ghost{border:1px solid var(--color-accent);color:var(--color-accent);border-radius:0.5rem;font-weight:600;background:transparent;transition:all .15s ease;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.btn-ghost:hover{background:var(--color-accent);color:#fff;}
.btn-ghost:active{transform:scale(.95);}
.btn-ghost:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;}
.nav-link{color:var(--color-text-muted);font-size:.875rem;transition:color .15s ease;padding:.35rem .15rem;}
.nav-link:hover{color:var(--color-accent);}
.nav-link.active{color:var(--color-accent);font-weight:600;}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;}
.card:hover{border-color:rgba(212,129,58,.6);box-shadow:0 4px 18px rgba(0,0,0,.35);}
.badge{display:inline-flex;align-items:center;gap:.3rem;border:1px solid rgba(212,129,58,.4);border-radius:9999px;padding:.2rem .7rem;font-size:.75rem;color:var(--color-text-body);}
.badge-warm{border-color:rgba(192,68,42,.6);color:#e8917d;}
.bubble{border-radius:1rem;background:var(--color-surface);border:1px solid rgba(212,129,58,.3);box-shadow:0 4px 14px rgba(0,0,0,.3);padding:.75rem;animation:floaty 4s ease-in-out infinite;}
.bubble:nth-child(2){animation-delay:1.3s;}
.bubble:nth-child(3){animation-delay:2.4s;}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
.faq-item .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-item.open .faq-a{max-height:400px;}
.faq-item .chev{transition:transform .3s ease;}
.faq-item.open .chev{transform:rotate(180deg);}
.faq-q{width:100%;background:none;border:none;color:var(--color-text-heading);cursor:pointer;text-align:left;}
.faq-q:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:.4rem;}
.avatar{border-radius:9999px;display:inline-block;border:2px solid var(--color-bg);}
.divider{height:1px;background:var(--color-border);border:none;margin:0;}
.news-link{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--color-border);color:var(--color-text-body);transition:color .15s ease;}
.news-link:hover{color:var(--color-accent);}
.news-link:last-child{border-bottom:none;}
.stars svg{width:16px;height:16px;fill:var(--color-accent);}
.compare-table th,.compare-table td{padding:.9rem 1rem;text-align:left;border-bottom:1px solid var(--color-border);font-size:.9rem;}
.compare-table th{color:var(--color-text-heading);}
.compare-table td{color:var(--color-text-muted);}
.compare-table .yes{color:var(--color-accent);font-weight:600;}
@media (prefers-reduced-motion:reduce){
  .bubble{animation:none;}
  .btn-primary:hover,.btn-primary:active,.btn-ghost:active{transform:none;}
  .faq-item .faq-a,.faq-item .chev{transition:none;}
  html{scroll-behavior:auto;}
}

/* roulang page: category1 */
:root {
  --color-bg: oklch(18% 0.012 40);
  --color-surface: oklch(24% 0.014 38);
  --color-border: oklch(32% 0.01 38);
  --color-accent: oklch(62% 0.18 55);
  --color-accent-dim: oklch(50% 0.10 55);
  --color-accent-warm: oklch(52% 0.20 28);
  --color-text-body: oklch(88% 0.008 40);
  --color-text-muted: oklch(58% 0.008 40);
  --color-text-heading: oklch(96% 0.005 40);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--color-bg);color:var(--color-text-body);font-family:system-ui,'PingFang SC','Microsoft YaHei',sans-serif;line-height:1.75;min-height:100vh}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{cursor:pointer;font-family:inherit}

/* Nav */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in oklch,var(--color-bg) 90%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--color-border)}
.nav-link{font-size:.875rem;color:var(--color-text-muted);transition:color .15s}
.nav-link:hover{color:var(--color-accent)}
.nav-link.active{color:var(--color-accent);font-weight:600}

/* Buttons */
.btn-primary{background:var(--color-accent);color:#fff;border-radius:.5rem;padding:.5rem 1.25rem;font-weight:600;font-size:.875rem;transition:background .15s,transform .15s;border:none;display:inline-flex;align-items:center;gap:.375rem}
.btn-primary:hover{background:var(--color-accent-dim);transform:scale(1.05)}
.btn-primary:active{transform:scale(.95)}
.btn-primary:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-outline{background:var(--color-surface);border:1px solid var(--color-accent);color:var(--color-accent);border-radius:.5rem;padding:.5rem 1.5rem;font-weight:500;font-size:.875rem;transition:background .15s,color .15s,transform .15s}
.btn-outline:hover{background:var(--color-accent);color:#fff;transform:scale(1.03)}
.btn-outline:active{transform:scale(.97)}
.btn-outline:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

/* Badge / chip */
.badge{display:inline-flex;align-items:center;border-radius:9999px;padding:.2rem .65rem;font-size:.75rem;font-weight:500;border:1px solid color-mix(in oklch,var(--color-accent) 40%,transparent);color:var(--color-text-muted)}
.badge.active-chip{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}
.chip{display:inline-flex;align-items:center;border-radius:9999px;padding:.25rem .75rem;font-size:.8125rem;border:1px solid var(--color-border);color:var(--color-text-muted);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.chip:hover{border-color:var(--color-accent);color:var(--color-accent)}
.chip.active{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}
.chip:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

/* Cards */
.content-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:.75rem;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.content-card:hover{border-color:color-mix(in oklch,var(--color-accent) 60%,transparent);box-shadow:0 4px 16px color-mix(in oklch,var(--color-accent) 10%,transparent)}
.card-cover{aspect-ratio:16/9;background:var(--color-border);display:flex;align-items:center;justify-content:center;font-size:.875rem;font-weight:600;color:var(--color-text-muted);padding:1rem;text-align:center}
.card-body{padding:1rem}
.card-title{font-size:1rem;font-weight:600;color:var(--color-text-heading);margin-bottom:.5rem;line-height:1.4}
.card-desc{font-size:.8125rem;color:var(--color-text-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:.75rem}
.card-cta{font-size:.8125rem;color:var(--color-accent);transition:text-decoration .15s}
.card-cta:hover{text-decoration:underline}

/* Filter bar */
.filter-bar{position:sticky;top:3.5rem;z-index:40;background:color-mix(in oklch,var(--color-bg) 90%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--color-border)}

/* Floating CTA */
.float-cta{position:fixed;bottom:0;left:0;right:0;z-index:40;background:color-mix(in oklch,var(--color-bg) 95%,transparent);backdrop-filter:blur(8px);border-top:1px solid var(--color-border);padding:.75rem 1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}

/* Hero bar */
.page-hero{background:var(--color-surface);border-bottom:1px solid var(--color-border)}

/* Select */
select{background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-body);border-radius:.5rem;padding:.375rem .75rem;font-size:.875rem;font-family:inherit;cursor:pointer;transition:border-color .15s}
select:focus{border-color:var(--color-accent);outline:none}

/* Footer */
.site-footer{background:var(--color-surface);border-top:1px solid var(--color-border)}

/* Mobile nav overlay */
#mobile-menu{display:none;position:fixed;inset:0;z-index:60;background:var(--color-surface);flex-direction:column;padding:1.5rem}
#mobile-menu.open{display:flex}

@media(max-width:767px){
  .float-cta .cta-text{display:none}
  .float-cta .btn-primary{flex:1;justify-content:center}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* roulang page: category2 */
:root {
  --color-bg: oklch(18% 0.012 40);
  --color-surface: oklch(24% 0.014 38);
  --color-border: oklch(32% 0.01 38);
  --color-accent: oklch(62% 0.18 55);
  --color-accent-dim: oklch(50% 0.10 55);
  --color-accent-warm: oklch(52% 0.20 28);
  --color-text-body: oklch(88% 0.008 40);
  --color-text-muted: oklch(58% 0.008 40);
  --color-text-heading: oklch(96% 0.005 40);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--color-bg);color:var(--color-text-body);font-family:'PingFang SC','Microsoft YaHei',system-ui,sans-serif;line-height:1.75;min-height:100vh;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{cursor:pointer;border:none;background:none;font:inherit;}

/* Nav */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in oklch,var(--color-bg) 90%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--color-border);}
.nav-link{font-size:.875rem;color:var(--color-text-muted);transition:color .15s;}
.nav-link:hover{color:var(--color-accent);}
.nav-link.active{color:var(--color-accent);font-weight:600;}
.btn-primary{background:var(--color-accent);color:#fff;border-radius:.5rem;padding:.5rem 1rem;font-size:.875rem;font-weight:600;transition:background .15s,transform .15s;display:inline-flex;align-items:center;gap:.375rem;}
.btn-primary:hover{background:var(--color-accent-dim);transform:scale(1.05);}
.btn-primary:active{transform:scale(.95);}
.btn-primary:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;}
.btn-primary:disabled{opacity:.4;cursor:not-allowed;}
.btn-outline{background:var(--color-surface);border:1px solid var(--color-accent);color:var(--color-accent);border-radius:.5rem;padding:.5rem 1.5rem;font-weight:600;transition:background .15s,color .15s,transform .15s;}
.btn-outline:hover{background:var(--color-accent);color:#fff;transform:scale(1.03);}
.btn-outline:active{transform:scale(.97);}
.btn-outline:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;}

/* Category Hero */
.cat-hero{background:var(--color-surface);border-bottom:1px solid var(--color-border);}

/* Filter bar */
.filter-bar{position:sticky;top:3.5rem;z-index:40;background:color-mix(in oklch,var(--color-bg) 90%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--color-border);}
.chip{border:1px solid var(--color-border);border-radius:9999px;padding:.25rem .75rem;font-size:.8125rem;color:var(--color-text-muted);cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
.chip:hover{border-color:var(--color-accent);color:var(--color-accent);}
.chip.active{background:var(--color-accent);color:#fff;border-color:var(--color-accent);}
.chip:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;}

/* List card */
.list-card{display:flex;gap:1rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:.75rem;padding:1rem;transition:border-color .15s,box-shadow .15s;}
.list-card:hover{border-color:color-mix(in oklch,var(--color-accent) 60%,transparent);box-shadow:0 2px 12px color-mix(in oklch,var(--color-accent) 10%,transparent);}
.list-card-cover{flex-shrink:0;width:160px;height:90px;border-radius:.5rem;background:var(--color-bg);display:flex;align-items:center;justify-content:center;font-size:.75rem;color:var(--color-text-muted);text-align:center;padding:.5rem;border:1px solid var(--color-border);}
.list-card-body{flex:1;min-width:0;}
.badge{display:inline-block;border-radius:9999px;padding:.125rem .625rem;font-size:.75rem;font-weight:500;}
.badge-accent{background:color-mix(in oklch,var(--color-accent) 15%,transparent);color:var(--color-accent);border:1px solid color-mix(in oklch,var(--color-accent) 30%,transparent);}
.badge-warm{background:color-mix(in oklch,var(--color-accent-warm) 15%,transparent);color:var(--color-accent-warm);border:1px solid color-mix(in oklch,var(--color-accent-warm) 30%,transparent);}
.badge-muted{background:color-mix(in oklch,var(--color-border) 60%,transparent);color:var(--color-text-muted);border:1px solid var(--color-border);}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.link-accent{color:var(--color-accent);font-size:.875rem;transition:text-decoration .1s;}
.link-accent:hover{text-decoration:underline;}

/* Sidebar */
.sidebar-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:.75rem;padding:1.25rem;}
.sidebar-title{font-size:.875rem;font-weight:600;color:var(--color-text-heading);margin-bottom:.75rem;}
.tag-cloud{display:flex;flex-wrap:wrap;gap:.5rem;}
.latest-item{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem;padding:.5rem 0;border-bottom:1px solid var(--color-border);}
.latest-item:last-child{border-bottom:none;}

/* Bubble */
.bubble{background:var(--color-surface);border:1px solid color-mix(in oklch,var(--color-accent) 30%,transparent);border-radius:1rem;padding:.75rem;box-shadow:0 2px 12px rgba(0,0,0,.3);}
@keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.float-anim{animation:floatY 4s ease-in-out infinite;}
@media(prefers-reduced-motion:reduce){.float-anim{animation:none;}.btn-primary,.btn-outline{transition:none;}.list-card{transition:none;}.chip{transition:none;}}

/* Floating CTA */
.floating-cta{position:fixed;bottom:0;left:0;right:0;z-index:40;background:color-mix(in oklch,var(--color-bg) 95%,transparent);backdrop-filter:blur(8px);border-top:1px solid var(--color-border);padding:.75rem 1rem;}

/* Mobile nav */
.mobile-menu{display:none;position:fixed;inset:0;z-index:60;background:var(--color-surface);flex-direction:column;padding:1.5rem;}
.mobile-menu.open{display:flex;}

/* Pagination */
.page-btn{background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-muted);border-radius:.5rem;padding:.375rem .75rem;font-size:.875rem;transition:border-color .15s,color .15s;}
.page-btn:hover{border-color:var(--color-accent);color:var(--color-accent);}
.page-btn.active{background:var(--color-accent);border-color:var(--color-accent);color:#fff;}
.page-btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;}

@media(max-width:767px){
  .list-card-cover{width:100px;height:64px;}
  .filter-bar{top:3.5rem;}
}
@media(max-width:519px){
  .list-card{flex-direction:column;}
  .list-card-cover{width:100%;height:140px;}
}