/* roulang page: index */
:root{

  --primary:#3D2E6E;

  --deep:#1C1734;

  --ink:#2A2440;

  --soft:#6E6586;

  --bg:#F6F2FB;

  --accent:#E8485E;

  --gold:#F6C453;

  --line:#E3DAEE;

  --white:#fff;

  --radius:18px;

  --radius-sm:10px;

  --shadow:0 14px 38px rgba(55,42,90,.12);

  --shadow-lg:0 22px 50px rgba(35,25,65,.18);

  --container-w:1200px

}

*,*::before,*::after{box-sizing:border-box}

body{margin:0;font-family:'PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;font-size:16px;line-height:1.72;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}

img{max-width:100%;display:block}

a{color:var(--primary);text-decoration:none}

a:hover{color:#243a5e}

h1,h2,h3,h4{line-height:1.32;color:var(--deep);margin:0 0 .5em;font-weight:800}

p{margin:0 0 1em}

li{list-style:none}

button{font-family:inherit}

.grid-container{max-width:var(--container-w)}

.hide{display:none!important}

.sr-only{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden;white-space:nowrap}

.site-header{position:sticky;top:0;z-index:100;background:rgba(28,23,52,.97);box-shadow:0 4px 22px rgba(12,8,28,.22)}

.header-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px}

.logo a{display:inline-flex;align-items:center;gap:10px;font-size:22px;font-weight:800;color:#fff}

.logo-mark{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:13px;background:linear-gradient(145deg,#6c4d9e,#3D2E6E);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}

.logo-mark svg{width:17px;height:17px;fill:#fff}

.main-nav{display:flex;align-items:center;gap:6px;margin-left:auto}

.nav-item{display:block;padding:10px 16px;border-radius:999px;color:#D8D0EA;font-weight:600;font-size:15px;transition:background .2s,color .2s}

.nav-item:hover{background:rgba(255,255,255,.1);color:#fff}

.nav-item.active{background:rgba(232,72,94,.18);color:#fff;box-shadow:inset 0 0 0 1px rgba(232,72,94,.25)}

.header-actions{display:flex;align-items:center;gap:14px}

.header-search{display:flex;align-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding-left:9px;min-width:190px;transition:border .2s,background .2s}

.header-search:focus-within{background:rgba(255,255,255,.16);border-color:rgba(246,196,83,.6)}

.header-search svg{width:15px;height:15px;fill:#C9BFDF;flex:0 0 auto}

.header-search input{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;font-size:14px;padding:8px 0 8px 7px;line-height:1.2}

.header-search input::placeholder{color:#A79ABE}

.header-search button{background:0;border:0;padding:8px 12px 8px 2px;line-height:1}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:15px;line-height:1;padding:0 24px;height:44px;border-radius:999px;border:0;transition:transform .18s,box-shadow .18s,background .18s,color .18s;text-align:center;white-space:nowrap;cursor:pointer}

.btn-primary{background:var(--accent);color:#fff;box-shadow:0 10px 24px rgba(232,72,94,.3)}

.btn-primary:hover{background:#c93a50;color:#fff;transform:translateY(-2px)}

.btn-dark{background:var(--primary);color:#fff}

.btn-ghost-light{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.32);color:#fff}

.btn-ghost-light:hover{background:rgba(255,255,255,.14);color:#fff}

.btn-light{background:var(--gold);color:#33233c}

.btn-light:hover{background:#f9d05f;color:#33233c}

.btn-sm{height:38px;padding:0 18px;font-size:14px}

.btn-block{width:100%}

.menu-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.17);color:#fff;font-size:22px}

.menu-toggle svg{width:19px;height:19px;fill:#fff}

/* 分类页头 */

.category-hero{background:var(--bg);padding:42px 0 36px;border-bottom:1px solid #ECE4F4}

.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--soft);margin-bottom:21px}

.breadcrumb span{color:#B6A5C8}

.breadcrumb a{color:var(--primary);font-weight:600}

.category-hero h1{font-size:34px;color:var(--deep);max-width:820px;margin-bottom:12px}

.category-hero .lead{font-size:16px;color:var(--soft);max-width:860px;line-height:1.8;margin-bottom:0}

.filter-strip{background:#fff;border-bottom:1px solid rgba(227,218,238,.65);padding:17px 0}

.filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:9px}

.filter-row .label{font-size:13px;font-weight:700;color:var(--soft);margin-right:6px}

.filter-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:#fff;color:#6E6586;border-radius:999px;padding:7px 15px;font-size:13px;font-weight:600;transition:all .2s;cursor:pointer}

.filter-chip:hover{border-color:#B59BD0;color:var(--primary);transform:translateY(-1px)}

.filter-chip.active{background:var(--primary);border-color:var(--primary);color:#fff}

.feed-wrap{padding:48px 0 30px}

.listing-card{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:row;transition:box-shadow .24s,transform .2s;margin-bottom:20px}

.listing-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}

.listing-media{flex:0 0 278px;min-height:190px;background:#f1e8f6;overflow:hidden}

.listing-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s}

.listing-card:hover .listing-media img{transform:scale(1.04)}

.listing-body{flex:1;padding:24px 24px 19px;display:flex;flex-direction:column}

.listing-meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-bottom:10px;font-size:12px;color:#A79ABE}

.listing-meta .dot{width:4px;height:4px;border-radius:50%;background:#D4C2E0;display:inline-block}

.listing-body h2{font-size:20px;line-height:1.45;margin-bottom:8px}

.listing-body h2 a{color:var(--ink)}

.listing-body h2 a:hover{color:var(--accent)}

.listing-summary{font-size:15px;line-height:1.72;color:var(--soft);margin-bottom:14px}

.listing-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}

.listing-tags a{font-size:12px;color:#8f78ab;background:#F5F0FA;border-radius:999px;padding:5px 12px;font-weight:600}

.listing-tags a:hover{background:var(--primary);color:#fff}

.spotlight-card{background:var(--deep);border-radius:22px;color:#fff;padding:28px 28px;margin:12px 0 32px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}

.spotlight-card .spot-copy{flex:1 1 300px}

.spotlight-card h3{color:#fff;font-size:20px;margin-bottom:9px}

.spotlight-card p{color:#ccbfde;font-size:15px;line-height:1.75;margin-bottom:0}

.spotlight-card .btn{flex:0 0 auto}

.side-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;margin-bottom:20px;box-shadow:0 8px 20px rgba(80,60,140,.05)}

.side-title{font-size:15px;font-weight:800;margin-bottom:12px;display:flex;align-items:center;gap:8px}

.side-title::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--gold);display:inline-block}

.side-search{display:flex;align-items:center;gap:8px;background:#F5F0FA;border:1px solid var(--line);border-radius:999px;padding:2px 2px 2px 13px}

.side-search svg{width:14px;height:14px;fill:#9e89bc;flex:0 0 auto}

.side-search input{flex:1;border:0;background:0;outline:0;padding:8px 0;font-size:14px;min-width:0}

.side-search button{border:0;background:var(--primary);color:#fff;height:34px;padding:0 14px;border-radius:999px;font-size:12px;font-weight:700}

.tag-cloud{display:flex;flex-wrap:wrap;gap:7px}

.tag-cloud a{display:inline-block;padding:6px 13px;background:#F5F0FA;color:#8F78AB;font-size:13px;border-radius:999px;font-weight:600;transition:background .2s,color .2s}

.tag-cloud a:hover{background:var(--accent);color:#fff}

.side-pick{display:flex;gap:11px;border-top:1px dashed #Eadff2;padding-top:12px;margin-top:10px;align-items:center}

.side-pick img{width:104px;height:68px;object-fit:cover;border-radius:12px}

.side-pick strong{display:block;line-height:1.5;font-size:14px}

.side-pick span{color:#B09EC3;font-size:12px}

/* FAQ分类 */

.faq-section{padding:60px 0;background:#fff}

.faq-title{font-size:28px;margin-bottom:18px}

.faq-wrap{max-width:920px}

.faq-item{background:#fff;border:1px solid var(--line);border-radius:18px;margin-bottom:12px;overflow:hidden}

.faq-item summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;padding:19px 22px;font-weight:700;font-size:16px;color:var(--deep);transition:background .2s}

.faq-item summary::-webkit-details-marker{display:none}

.faq-item summary::marker{display:none}

.faq-item summary:hover{background:#FBF8FD}

.faq-arrow{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:#F1EAF8;color:var(--primary);display:inline-flex;align-items:center;justify-content:center;font-size:17px;transition:transform .25s,background .25s}

.faq-item[open] .faq-arrow{transform:rotate(45deg);background:var(--accent);color:#fff}

.faq-answer{padding:0 22px 20px;border-top:1px dashed #F0E7F6;margin-left:22px;margin-right:22px;padding-top:14px;padding-left:0;padding-right:0;line-height:1.85;color:var(--soft);font-size:15px}

/* 页脚 */

.site-footer{background:var(--deep);color:#BBB0D0;padding-top:56px}

.footer-grid{padding-bottom:36px}

.footer-brand p{font-size:14px;line-height:1.8;margin-top:16px;color:#AFA1C7;max-width:300px}

.footer-h4{color:#fff;font-size:15px;margin-bottom:14px}

.footer-links li{margin-bottom:9px}

.footer-links a{color:#CFC2DF;font-size:14px;transition:color .2s}

.footer-links a:hover{color:var(--gold)}

.update-note{font-size:14px;color:#AFA1C7;padding:13px 17px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(255,255,255,.04);line-height:1.75}

.update-note b{color:#fff}

.footer-meta{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;font-size:13px;color:#8f83a6;text-align:center}

.sticky-cta{position:fixed;left:50%;bottom:18px;z-index:99;transform:translateX(-50%);width:min(760px,calc(100% - 36px));display:flex;align-items:center;gap:14px;background:rgba(28,23,52,.96);color:#fff;border:1px solid rgba(246,196,83,.3);border-radius:999px;padding:10px 12px 10px 24px;box-shadow:0 20px 45px rgba(20,12,45,.4);transition:opacity .3s,visibility .3s,transform .3s}

.sticky-cta.is-hidden{opacity:0;visibility:hidden;transform:translateX(-50%) translateY(20px);pointer-events:none}

.sticky-cta p{margin:0;flex:1;font-size:14px;font-weight:600;color:#F4F0FA}

.sticky-close{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.08);color:#C9BFDF;border:0;font-size:15px;display:flex;align-items:center;justify-content:center;cursor:pointer}

.sticky-close:hover{background:rgba(255,255,255,.2);color:#fff}

@media screen and (min-width:640px) and (max-width:1023px){

  .header-bar{min-height:66px}

  .category-hero h1{font-size:30px}

  .listing-card{flex-direction:column}

  .listing-media{flex:none;width:100%;height:220px}

  .feed-wrap{padding-top:36px}

  .footer-grid{gap:30px 0}

}

@media screen and (max-width:639px){

  .menu-toggle{display:inline-flex}

  .header-search{display:none}

  .header-cta{display:none}

  .header-bar{min-height:62px}

  .main-nav{display:none;position:fixed;left:0;right:0;top:62px;background:#221b43;border-top:1px solid rgba(255,255,255,.08);padding:14px 18px 22px;flex-direction:column;align-items:stretch}

  .main-nav.is-open{display:flex}

  .main-nav .nav-item{text-align:center;padding:12px;border-radius:12px}

  .hero{padding:64px 0 104px}

  .category-hero{padding:30px 0 26px}

  .category-hero h1{font-size:26px}

  .category-hero .lead{font-size:15px}

  .filter-strip{padding:13px 0}

  .filter-row{gap:8px}

  .filter-chip{padding:6px 12px;font-size:12px}

  .feed-wrap{padding:34px 0 26px}

  .listing-card{flex-direction:column}

  .listing-media{flex:none;width:100%;height:190px}

  .listing-media img{height:100%;object-fit:cover}

  .listing-body{padding:20px 18px}

  .listing-body h2{font-size:19px}

  .listing-tags{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}

  .listing-tags a{flex:none}

  .spotlight-card{padding:22px 18px}

  .spotlight-card .btn{width:100%}

  .faq-title{font-size:24px}

  .faq-item summary{padding:16px;font-size:15px}

  .faq-answer{padding-left:16px;padding-right:0;margin-left:12px;margin-right:12px}

  .side-card{padding:16px}

  .footer-grid{padding-bottom:20px}

  .footer-meta{font-size:12px;line-height:1.8}

  .sticky-cta{border-radius:18px;bottom:10px;padding:8px 8px 8px 16px}

  .sticky-cta p{font-size:12px}

  .sticky-cta .btn{padding:0 12px;height:36px;font-size:13px}

}

/* roulang page: category1 */
:root{
 --primary:#3D2E6E;
 --deep:#1C1734;
 --ink:#2A2440;
 --soft:#6E6586;
 --bg:#F6F2FB;
 --accent:#E8485E;
 --gold:#F6C453;
 --line:#E3DAEE;
 --white:#fff;
 --radius:18px;
 --radius-sm:10px;
 --shadow:0 14px 38px rgba(55,42,90,.12);
 --shadow-lg:0 22px 50px rgba(35,25,65,.18);
 --container-w:1200px
}
*{box-sizing:border-box}
body{margin:0;font-family:'PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;font-size:16px;line-height:1.72;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:var(--primary);text-decoration:none}
a:hover{color:#c93a50}
button{font-family:inherit}
.grid-container{max-width:var(--container-w)}
::selection{background:#F6C453;color:#1C1734}
a:focus-visible,button:focus-visible,input:focus-visible,.accordion-title:focus-visible{outline:3px solid rgba(232,72,94,.45);outline-offset:2px}

/* header */
.site-header{position:sticky;top:0;z-index:100;background:rgba(28,23,52,.97);box-shadow:0 4px 22px rgba(12,8,28,.22)}
.header-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px;position:relative;flex-wrap:wrap}
.logo{display:inline-flex;align-items:center;gap:10px;font-size:22px;font-weight:800;color:#fff}
.logo-mark{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:13px;background:linear-gradient(145deg,#6c4d9e,#3D2E6E);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.logo-mark svg{width:17px;height:17px;fill:#fff}
.main-nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav-item{display:block;padding:10px 16px;border-radius:999px;color:#D8D0EA;font-weight:600;font-size:15px;transition:background .2s,color .2s}
.nav-item:hover{background:rgba(255,255,255,.1);color:#fff}
.nav-item.active{background:rgba(232,72,94,.18);color:#fff;box-shadow:inset 0 0 0 1px rgba(232,72,94,.25)}
.header-actions{display:flex;align-items:center;gap:14px}
.header-search{display:flex;align-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding-left:9px;min-width:190px;transition:border .2s,background .2s}
.header-search:focus-within{background:rgba(255,255,255,.16);border-color:rgba(246,196,83,.6)}
.header-search svg{width:15px;height:15px;fill:#C9BFDF;flex:0 0 auto}
.header-search input{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;font-size:14px;padding:8px 0 8px 7px;line-height:1.2}
.header-search input::placeholder{color:#A79ABE}
.header-search button{background:0;border:0;padding:8px 12px 8px 2px;line-height:1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:15px;line-height:1;padding:0 24px;height:44px;border-radius:999px;border:0;transition:transform .18s,box-shadow .18s,background .18s,color .18s;text-align:center;white-space:nowrap;cursor:pointer}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 10px 24px rgba(232,72,94,.3)}
.btn-primary:hover{background:#c93a50;color:#fff;transform:translateY(-2px)}
.btn-dark{background:var(--primary);color:#fff}
.btn-dark:hover{background:#2e2260;color:#fff;transform:translateY(-2px)}
.btn-ghost-light{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.32);color:#fff}
.btn-ghost-light:hover{background:rgba(255,255,255,.14);color:#fff;transform:translateY(-2px)}
.btn-light{background:var(--gold);color:#33233c}
.btn-light:hover{background:#f9d05f;color:#33233c;transform:translateY(-2px)}
.btn-sm{height:38px;padding:0 18px;font-size:14px}
.header-cta{margin-left:4px}
.search-icon-mobile{display:none;width:42px;height:42px;align-items:center;justify-content:center;border-radius:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.17);color:#fff}
.search-icon-mobile svg{width:17px;height:17px;fill:#fff}
.menu-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.17);color:#fff;font-size:22px}
.menu-toggle svg{width:19px;height:19px;fill:#fff}

/* hero / intro */
.category-hero{background:var(--bg);padding:42px 0 36px;border-bottom:1px solid #ECE4F4}
.breadcrumb{display:flex;align-items:center;gap:10px;font-size:13px;color:#7d6b96;margin-bottom:20px}
.breadcrumb a{color:var(--primary);font-weight:600}
.breadcrumb .sep{color:#CBB7D8}
.category-hero h1{font-size:34px;color:var(--deep);max-width:820px;margin-bottom:12px;line-height:1.42;letter-spacing:-.5px}
.category-hero .lead{font-size:16px;color:var(--soft);max-width:860px;line-height:1.8;margin-bottom:0}
.category-main{padding:36px 0 70px;background:var(--bg)}
.filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:30px}
.filter-row .label{font-size:13px;font-weight:700;color:var(--soft);margin-right:6px}
.filter-chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:#fff;color:#6E6586;border-radius:999px;padding:7px 15px;font-size:13px;font-weight:600;transition:all .2s;cursor:pointer}
.filter-chip:hover{border-color:#B59BD0;color:var(--primary);transform:translateY(-1px)}
.filter-chip.active{background:var(--primary);border-color:var(--primary);color:#fff}

/* left list */
.list-head{margin-bottom:20px}
.list-kicker{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:800;color:var(--primary);background:#EFE6F6;padding:5px 13px;border-radius:999px;margin-bottom:10px}
.list-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.list-head h2{font-size:24px;color:var(--deep);margin:0}
.listing-card{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:row;transition:box-shadow .24s,transform .2s;margin-bottom:20px}
.listing-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.listing-media{flex:0 0 278px;min-height:190px;background:#f1e8f6;overflow:hidden;position:relative}
.listing-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.listing-card:hover .listing-media img{transform:scale(1.04)}
.listing-media .play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(28,23,52,0),rgba(28,23,52,.38))}
.listing-media .play-overlay svg{width:44px;height:44px;fill:rgba(255,255,255,.92);filter:drop-shadow(0 4px 10px rgba(0,0,0,.2))}
.listing-body{flex:1;padding:24px 24px 19px;display:flex;flex-direction:column}
.listing-meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-bottom:10px;font-size:12px;color:#A79ABE}
.listing-meta .dot{width:4px;height:4px;border-radius:50%;background:#D4C2E0;display:inline-block}
.listing-body h3{font-size:20px;line-height:1.5;margin-bottom:8px}
.listing-body h3 a{color:var(--ink)}
.listing-body h3 a:hover{color:var(--accent)}
.listing-summary{font-size:15px;line-height:1.72;color:var(--soft);margin-bottom:14px}
.listing-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.listing-tags span{font-size:12px;color:#8f78ab;background:#F5F0FA;border-radius:999px;padding:5px 12px;font-weight:600}
.listing-tags a{font-size:12px;color:#8f78ab;background:#F5F0FA;border-radius:999px;padding:5px 12px;font-weight:600}
.listing-tags a:hover{background:var(--primary);color:#fff}

/* spotlight */
.spotlight-card{background:var(--deep);border-radius:22px;color:#fff;padding:28px 28px;margin:4px 0 30px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;position:relative;overflow:hidden}
.spotlight-card::after{content:"▶";position:absolute;font-size:130px;right:-16px;bottom:-32px;color:rgba(246,196,83,.08);line-height:1;pointer-events:none}
.spotlight-card .spot-copy{flex:1 1 300px;position:relative;z-index:1}
.spotlight-card .spot-tag{display:inline-flex;align-items:center;font-size:12px;font-weight:700;color:#fff;background:rgba(246,196,83,.2);border:1px solid rgba(246,196,83,.5);border-radius:999px;padding:4px 11px;margin-bottom:12px}
.spotlight-card h3{color:#fff;font-size:21px;line-height:1.5;margin-bottom:9px}
.spotlight-card p{color:#ccbfde;font-size:15px;line-height:1.75;margin-bottom:0;max-width:640px}
.spotlight-card .btn{flex:0 0 auto;position:relative;z-index:1}

/* side */
.category-aside{padding-left:8px}
.side-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:19px;margin-bottom:20px;box-shadow:0 8px 20px rgba(80,60,140,.05)}
.side-title{font-size:16px;font-weight:800;margin-bottom:13px;display:flex;align-items:center;gap:8px}
.side-title::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--gold);display:inline-block}
.side-search{display:flex;align-items:center;gap:8px;background:#F5F0FA;border:1px solid var(--line);border-radius:999px;padding:3px 3px 3px 14px;transition:border .2s}
.side-search:focus-within{border-color:#B59BD0}
.side-search svg{width:15px;height:15px;fill:#A79ABE;flex:0 0 auto}
.side-search input{flex:1;min-width:0;border:0;background:0;outline:0;font-size:14px;color:var(--ink);padding:8px 0}
.side-search button{flex:0 0 auto;height:32px;padding:0 15px;border-radius:999px;border:0;background:var(--primary);color:#fff;font-size:13px;font-weight:700;cursor:pointer}
.side-search button:hover{background:#2e2260}
.tag-cloud{display:flex;flex-wrap:wrap;gap:8px}
.tag-cloud a{font-size:13px;color:#6E6586;border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 12px;font-weight:600;transition:all .2s}
.tag-cloud a:hover{background:var(--primary);border-color:var(--primary);color:#fff}
.trend-list{list-style:none;margin:0;padding:0}
.trend-list li{padding:0}
.trend-list a{display:block;padding:11px 0;border-bottom:1px solid #F0E9F6;color:var(--ink);font-size:14px;line-height:1.65;transition:color .2s,padding-left .2s}
.trend-list a:hover{color:var(--accent);padding-left:6px}
.trend-list li:last-child a{border-bottom:0}
.trend-rank{color:var(--accent);font-weight:800;font-size:13px;margin-right:7px}

/* faq */
.faq-section{padding:64px 0 58px;background:#fff;border-top:1px solid #ECE4F4}
.faq-section .section-head{text-align:center;max-width:680px;margin:0 auto 42px}
.faq-section .section-head .eyebrow{color:var(--primary);font-weight:800;letter-spacing:.06em;font-size:14px}
.faq-section .section-head h2{font-size:30px;color:var(--deep);margin:8px 0 10px}
.faq-section .section-head p{color:var(--soft);font-size:16px}
.faq-accordion{max-width:860px;margin:0 auto;list-style:none}
.faq-accordion .accordion-item{background:#fff;border:1px solid var(--line);border-radius:17px;margin-bottom:14px;overflow:hidden;transition:box-shadow .2s}
.faq-accordion .accordion-item.is-active{border-color:#c9b8dd;box-shadow:0 10px 24px rgba(70,45,110,.06)}
.faq-accordion .accordion-title{background:#fff;border:0;color:var(--ink);font-weight:700;font-size:16px;line-height:1.6;padding:16px 44px 16px 18px;position:relative;display:block}
.faq-accordion .accordion-title:hover,.faq-accordion .accordion-item.is-active .accordion-title{background:#FBF8FE}
.faq-accordion .accordion-title::after{content:"\f067";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;top:50%;right:18px;transform:translateY(-50%);width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#F5F0FA;color:var(--primary);font-size:12px;transition:transform .2s}
.faq-accordion .accordion-item.is-active .accordion-title::after{content:"\f068";transform:translateY(-50%) rotate(180deg)}
.faq-accordion .accordion-content{background:#FBF8FE;padding:0 20px 18px;border-top:0}

/* cta */
.cta-deep{background-color:var(--deep);background-image:url(/assets/images/backpic/back-2.jpg);background-size:cover;background-position:center;position:relative;padding:86px 0}
.cta-deep::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,23,52,.96),rgba(48,35,90,.84));pointer-events:none}
.cta-card{position:relative;z-index:2;text-align:center;max-width:830px;margin:0 auto}
.cta-card h2{color:#fff;font-size:31px;line-height:1.45;margin:0 0 12px}
.cta-card p{color:#ccc1df;font-size:16px;line-height:1.8;margin:0 0 28px}
.cta-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}

/* footer */
.site-footer{background:var(--deep);color:#B5A8CE;padding:52px 0 0;font-size:14px;line-height:1.8}
.footer-grid{padding-bottom:30px}
.footer-brand p{max-width:380px;color:#A99DBE;margin:15px 0 0;line-height:1.75}
.footer-brand .logo{color:#fff;font-size:21px}
.footer-h4{color:#fff;font-size:15px;font-weight:700;letter-spacing:.02em;margin:4px 0 14px}
.footer-links{list-style:none;margin:0;padding:0}
.footer-links li{margin-bottom:6px}
.footer-links a{color:#B5A8CE;transition:color .2s}
.footer-links a:hover{color:var(--gold)}
.update-note{color:#A99DBE;font-size:14px;line-height:1.75;background:rgba(255,255,255,.03);border-left:3px solid var(--accent);padding-left:14px}
.footer-meta{background:rgba(0,0,0,.22);color:#7C6F96;text-align:center;padding:17px 20px;font-size:13px;line-height:1.6}
.footer-meta a{color:#8F81A8;font-weight:600}
.footer-meta a:hover{color:#fff}

/* responsive */
@media screen and (max-width:1024px){
 .header-search{min-width:140px}
 .nav-item{padding:9px 11px;font-size:14px}
 .category-hero h1{font-size:30px}
 .listing-media{flex-basis:220px}
 .spotlight-card h3{font-size:19px}
}
@media screen and (max-width:900px){
 .menu-toggle{display:flex}
 .header-bar{gap:14px;padding-bottom:8px}
 .main-nav{display:none;width:100%;order:5;background:rgba(20,15,40,.98);border-radius:16px;padding:8px;gap:2px;margin:0}
 body.nav-open .main-nav{display:flex;flex-direction:column}
 .main-nav .nav-item{width:100%;text-align:left;border-radius:10px;padding:11px 14px}
 .header-actions{margin-left:auto}
 .logo{margin-right:auto}
 .search-icon-mobile{display:flex}
 .header-search{display:none;width:100%;margin:0 0 8px;min-width:0}
 body.search-open .header-search{display:flex}
 .category-aside{padding-left:0;margin-top:8px}
}
@media screen and (max-width:640px){
 .category-hero{padding:28px 0 24px}
 .category-hero h1{font-size:25px}
 .category-hero .lead{font-size:15px}
 .category-main{padding:28px 0 48px}
 .filter-row{gap:7px;margin-bottom:22px}
 .filter-chip{padding:6px 12px;font-size:12px}
 .list-head h2{font-size:21px}
 .listing-card{flex-direction:column}
 .listing-media{flex-basis:auto;min-height:150px}
 .listing-body{padding:17px 18px 14px}
 .listing-body h3{font-size:18px}
 .spotlight-card{padding:22px 20px}
 .spotlight-card h3{font-size:18px}
 .spotlight-card p{font-size:14px}
 .btn{padding:0 19px;font-size:14px}
 .faq-section .section-head h2{font-size:26px}
 .cta-card h2{font-size:25px}
 .cta-actions .btn{width:100%}
 .footer-grid .cell{margin-bottom:26px}
}