/* roulang page: index */
:root{
      --ink:#17131c;
      --night:#211a27;
      --night-2:#2b2030;
      --paper:#f5f1ec;
      --paper-2:#ebe3dc;
      --white:#fffaf6;
      --muted:#867d82;
      --line:rgba(38,25,37,.14);
      --line-light:rgba(255,250,246,.16);
      --accent:#c65563;
      --accent-dark:#9f394a;
      --coral:#e38b68;
      --olive:#8b9b78;
      --radius:16px;
      --shadow:0 16px 42px rgba(27,17,28,.10);
      --ease:all .22s ease;
      --container:1220px;
    }
    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;line-height:1.7}
    a{color:inherit;text-decoration:none}
    a:hover{color:var(--accent)}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    :focus-visible{outline:3px solid rgba(227,139,104,.65);outline-offset:3px}
    .container{width:min(100% - 40px,var(--container));margin:auto}
    .site-header{position:sticky;top:0;z-index:20;background:rgba(33,26,39,.94);border-bottom:1px solid var(--line-light);transition:var(--ease)}
    .nav-shell{min-height:78px;display:flex;align-items:center;gap:30px}
    .brand{display:flex;align-items:center;gap:12px;color:var(--white);min-width:245px}
    .brand-mark{width:34px;height:34px;border:1px solid var(--coral);display:grid;place-items:center;color:var(--coral);font-weight:800;border-radius:10px;font-size:13px}
    .brand-name{font-size:16px;font-weight:800;letter-spacing:.03em;line-height:1.25}
    .brand-name small{display:block;color:#c3b5bd;font-size:10px;letter-spacing:.14em;font-weight:500;margin-top:3px}
    .nav-links{display:flex;align-items:center;gap:7px;margin-left:auto}
    .nav-links a{color:#d9cfd4;padding:9px 14px;border-radius:9px;font-size:14px;transition:var(--ease)}
    .nav-links a:hover,.nav-links a.active{background:rgba(255,250,246,.09);color:var(--white)}
    .nav-links a.active{box-shadow:inset 0 -2px var(--coral)}
    .status-pill,.tag{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:99px;padding:4px 10px;font-size:12px;white-space:nowrap}
    .status-pill{color:#dbc7cb;border-color:var(--line-light)}
    .status-dot{width:6px;height:6px;background:var(--olive);border-radius:50%}
    .btn-main,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 19px;border-radius:10px;font-size:14px;font-weight:700;transition:var(--ease);border:1px solid transparent}
    .btn-main{background:var(--accent);color:var(--white)}
    .btn-main:hover{background:var(--accent-dark);color:#fff;transform:translateY(-2px)}
    .btn-ghost{border-color:rgba(255,250,246,.3);color:var(--white)}
    .btn-ghost:hover{border-color:var(--coral);color:var(--coral)}
    .nav-toggle{display:none;background:transparent;color:var(--white);border:1px solid var(--line-light);border-radius:8px;padding:7px 10px}
    .hero{background:var(--night);color:var(--white);padding:94px 0 86px;position:relative;overflow:hidden}
    .hero::after{content:"";position:absolute;width:360px;height:360px;border:1px solid rgba(227,139,104,.18);border-radius:50%;right:-100px;top:-110px}
    .eyebrow{color:var(--coral);font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;margin-bottom:20px}
    h1,h2,h3{margin:0;font-weight:850;letter-spacing:-.045em;line-height:1.13}
    h1{font-size:clamp(42px,6vw,76px);max-width:760px}
    h1 em{color:var(--coral);font-style:normal}
    .hero-copy{max-width:640px;color:#cfc3ca;font-size:17px;margin:25px 0 30px}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
    .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center}
    .index-board{border:1px solid var(--line-light);border-radius:var(--radius);padding:22px;background:rgba(255,250,246,.045);box-shadow:0 20px 60px rgba(0,0,0,.16)}
    .board-top{display:flex;justify-content:space-between;border-bottom:1px solid var(--line-light);padding-bottom:16px;color:#cfc3ca;font-size:12px}
    .board-title{font-size:20px;font-weight:800;color:var(--white);margin:19px 0}
    .board-row{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--line-light)}
    .board-no{color:var(--coral);font-weight:800;font-size:12px}
    .board-line{height:8px;background:#574650;border-radius:4px;flex:1;overflow:hidden}
    .board-line i{display:block;height:100%;background:var(--coral);border-radius:4px}
    .board-state{color:#c3d0ba;font-size:12px}
    .metrics{background:var(--night-2);color:var(--white);padding:22px 0}
    .metric-grid{display:grid;grid-template-columns:repeat(4,1fr)}
    .metric{padding:8px 28px;border-right:1px solid var(--line-light)}
    .metric:first-child{padding-left:0}.metric:last-child{border:0}
    .metric strong{display:block;font-size:32px;line-height:1.15;color:var(--coral)}
    .metric span{font-size:13px;color:#ded1d5}.metric small{display:block;color:#9f9198;font-size:11px;margin-top:4px}
    .section{padding:100px 0}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:38px}
    .section-head h2{font-size:clamp(30px,4vw,48px);max-width:560px}
    .section-head p{max-width:450px;color:var(--muted);margin:0;font-size:15px}
    .matrix{display:grid;grid-template-columns:1.35fr .8fr .8fr;grid-template-rows:auto auto;gap:16px}
    .matrix-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:27px;min-height:190px;position:relative;transition:var(--ease)}
    .matrix-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow)}
    .matrix-card.main-card{grid-row:span 2;background:var(--night);color:var(--white);min-height:396px;overflow:hidden}
    .matrix-card.main-card::before{content:"字幕 / 索引 / 标签";position:absolute;right:-12px;bottom:32px;color:rgba(255,250,246,.08);font-size:36px;font-weight:900;transform:rotate(-14deg)}
    .card-number{color:var(--accent);font-size:12px;font-weight:800;letter-spacing:.12em}
    .matrix-card h3{font-size:24px;margin:17px 0 10px}
    .matrix-card p{color:var(--muted);font-size:14px;margin:0;max-width:330px}
    .main-card p{color:#cbbdc5}.card-link{position:absolute;bottom:24px;right:25px;color:var(--accent);font-weight:700;font-size:13px}
    .main-card .card-link{color:var(--coral)}
    .tag{margin-top:22px;color:var(--accent-dark);background:#f7e8e4;border:0}
    .comparison{background:var(--paper-2)}
    .compare-grid{display:grid;grid-template-columns:1fr 80px 1fr;align-items:stretch;gap:20px}
    .compare-panel{background:var(--white);border-radius:var(--radius);padding:30px;border:1px solid var(--line)}
    .compare-panel.good{border-top:3px solid var(--accent)}
    .compare-label{font-size:12px;color:var(--muted);letter-spacing:.1em;font-weight:800}
    .compare-panel h3{font-size:25px;margin:12px 0 23px}
    .compare-list{padding:0;margin:0;list-style:none}
    .compare-list li{padding:12px 0;border-top:1px solid var(--line);font-size:14px;display:flex;gap:10px}
    .compare-list li::before{content:"—";color:var(--accent);font-weight:800}
    .arrow-mid{display:grid;place-items:center;color:var(--accent);font-size:34px}
    .faq-wrap{max-width:900px;margin:auto}
    .faq-item{border-top:1px solid var(--line)}
    .faq-item:last-child{border-bottom:1px solid var(--line)}
    .faq-btn{width:100%;min-height:70px;border:0;background:transparent;text-align:left;display:flex;justify-content:space-between;align-items:center;font-weight:750;color:var(--ink);padding:0;font-size:16px}
    .faq-btn span{color:var(--accent);font-size:22px;transition:var(--ease)}
    .faq-btn[aria-expanded=true] span{transform:rotate(45deg)}
    .faq-answer{color:var(--muted);font-size:14px;padding:0 45px 22px 0}
    .feedback{background:var(--night);color:var(--white);padding:80px 0}
    .feedback-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
    .feedback h2{font-size:clamp(32px,4vw,52px)}
    .feedback-copy{color:#cfc3ca;margin-top:18px;max-width:420px}
    .form-label{font-size:13px;color:#d8cbd0;margin-bottom:7px}
    .form-control,.form-select{background:rgba(255,250,246,.07);border:1px solid var(--line-light);color:var(--white);border-radius:9px;min-height:48px}
    .form-control:focus,.form-select:focus{background:rgba(255,250,246,.1);color:var(--white);border-color:var(--coral);box-shadow:0 0 0 3px rgba(227,139,104,.16)}
    .form-select option{color:var(--ink)}
    textarea.form-control{min-height:120px;resize:vertical}
    .form-note{color:#9f9198;font-size:12px;margin-top:14px}
    .form-status{display:none;color:#c3d0ba;font-size:13px;margin-top:13px}
    .site-footer{background:var(--ink);color:#cfc3ca;padding:46px 0 25px}
    .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding-bottom:35px;border-bottom:1px solid var(--line-light)}
    .footer-brand{color:var(--white);font-weight:800;font-size:18px}
    .footer-text{color:#968990;font-size:13px;max-width:350px;margin-top:12px}
    .footer-title{color:var(--white);font-size:13px;font-weight:800;margin-bottom:14px}
    .footer-links{display:flex;flex-direction:column;gap:8px;font-size:13px;color:#aa9da3}
    .footer-links a:hover{color:var(--coral)}
    .copyright{padding-top:21px;color:#80737b;font-size:12px;display:flex;justify-content:space-between;gap:20px}
    .section-index{font-size:12px;color:var(--accent);font-weight:800;letter-spacing:.14em}
    @media (max-width:1199px){.hero-grid{gap:35px}.matrix{grid-template-columns:1.2fr 1fr}.matrix-card.main-card{grid-row:span 2}}
    @media (max-width:991px){
      .nav-shell{min-height:70px}.brand{min-width:auto}.nav-toggle{display:block;margin-left:auto}.nav-links{display:none;position:absolute;top:70px;left:20px;right:20px;background:var(--night-2);padding:14px;border:1px solid var(--line-light);border-radius:12px;flex-direction:column;align-items:stretch}.nav-links.show{display:flex}.nav-links a{text-align:center}.status-pill{display:none}
      .hero{padding:70px 0}.hero-grid,.feedback-grid{grid-template-columns:1fr}.index-board{max-width:620px}.metric{padding:8px 15px}.matrix{grid-template-columns:1fr 1fr}.matrix-card.main-card{grid-column:span 2;grid-row:auto;min-height:280px}.section{padding:75px 0}
    }
    @media (max-width:767px){
      .container{width:min(100% - 28px,var(--container))}.hero-copy{font-size:15px}.metric-grid{grid-template-columns:1fr 1fr;row-gap:20px}.metric{border:0;padding:4px 10px}.metric:nth-child(odd){padding-left:0}.metric strong{font-size:27px}.section-head{display:block}.section-head p{margin-top:15px}.compare-grid{grid-template-columns:1fr;gap:10px}.arrow-mid{height:25px;transform:rotate(90deg)}.feedback-grid{gap:35px}.footer-grid{grid-template-columns:1fr 1fr;gap:28px}.footer-grid>div:first-child{grid-column:span 2}.copyright{display:block}.copyright span{display:block;margin-top:7px}
    }
    @media (max-width:575px){
      h1{font-size:42px}.hero-actions .btn-main,.hero-actions .btn-ghost{width:100%}.matrix{display:block}.matrix-card{margin-bottom:13px;min-height:175px}.matrix-card.main-card{min-height:275px}.footer-grid{grid-template-columns:1fr}.footer-grid>div:first-child{grid-column:auto}
    }
    @media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* roulang page: category2 */
:root{
 --ink:#17131c;
 --night:#211a27;
 --night-2:#2b2030;
 --paper:#f5f1ec;
 --paper-2:#ebe3dc;
 --white:#fffaf6;
 --muted:#867d82;
 --line:rgba(38,25,37,.14);
 --line-light:rgba(255,250,246,.16);
 --accent:#c65563;
 --accent-dark:#9f394a;
 --coral:#e38b68;
 --olive:#8b9b78;
 --success:#667b5b;
 --danger:#a74250;
 --radius:16px;
 --radius-sm:10px;
 --shadow:0 16px 42px rgba(27,17,28,.10);
 --ease:all .22s ease;
 --container:1220px;
}
*,
*::before,
*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;
 background:var(--paper);
 color:var(--ink);
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
 font-size:16px;
 line-height:1.7;
 letter-spacing:0;
 -webkit-font-smoothing:antialiased;
}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none;transition:var(--ease)}
a:hover{color:var(--accent)}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;letter-spacing:0}
button{cursor:pointer}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{font-weight:800;line-height:1.18;letter-spacing:0}
ul{margin-top:0}
::selection{background:var(--accent);color:var(--white)}
:focus-visible{outline:3px solid rgba(227,139,104,.55);outline-offset:3px}
.container{width:min(calc(100% - 40px),var(--container));max-width:none;margin-inline:auto}
.skip-link{
 position:fixed;left:16px;top:-60px;z-index:100;
 padding:10px 16px;background:var(--white);color:var(--ink);
 border-radius:8px;box-shadow:var(--shadow);
}
.skip-link:focus{top:14px}
.site-header{
 position:sticky;top:0;z-index:50;
 background:rgba(33,26,39,.96);
 border-bottom:1px solid var(--line-light);
 transition:var(--ease);
 backdrop-filter:saturate(125%) blur(8px);
}
.site-header.scrolled{box-shadow:0 10px 28px rgba(18,12,20,.2)}
.nav-shell{min-height:78px;display:flex;align-items:center;gap:30px}
.brand{display:flex;align-items:center;gap:12px;color:var(--white);min-width:245px}
.brand:hover{color:var(--white)}
.brand-mark{
 width:34px;height:34px;flex:0 0 34px;
 border:1px solid var(--coral);display:grid;place-items:center;
 color:var(--coral);font-weight:800;border-radius:10px;font-size:13px;
}
.brand-name{font-size:16px;font-weight:800;line-height:1.25;white-space:nowrap}
.brand-name small{
 display:block;color:#c3b5bd;font-size:10px;
 letter-spacing:.14em;font-weight:500;margin-top:3px;
}
.nav-links{display:flex;align-items:center;gap:7px;margin-left:auto}
.nav-links a{
 color:#d9cfd4;padding:9px 14px;border-radius:9px;
 font-size:14px;transition:var(--ease);white-space:nowrap;
}
.nav-links a:hover,.nav-links a.active{background:rgba(255,250,246,.09);color:var(--white)}
.nav-links a.active{box-shadow:inset 0 -2px var(--coral)}
.status-pill,.tag{
 display:inline-flex;align-items:center;gap:6px;
 border:1px solid var(--line);border-radius:99px;
 padding:4px 10px;font-size:12px;white-space:nowrap;
}
.status-pill{color:#dbc7cb;border-color:var(--line-light)}
.status-dot{
 width:7px;height:7px;border-radius:50%;
 background:var(--olive);box-shadow:0 0 0 4px rgba(139,155,120,.12);
}
.btn-main,.btn-ghost,.btn-light,.btn-line{
 display:inline-flex;align-items:center;justify-content:center;gap:10px;
 min-height:46px;padding:0 19px;border-radius:10px;
 font-size:14px;font-weight:700;transition:var(--ease);
 border:1px solid transparent;text-align:center;
}
.btn-main{background:var(--accent);color:var(--white)}
.btn-main:hover{background:var(--accent-dark);color:#fff;transform:translateY(-2px)}
.btn-main:active{transform:translateY(0)}
.btn-ghost{border-color:rgba(255,250,246,.3);color:var(--white)}
.btn-ghost:hover{border-color:var(--coral);color:var(--coral)}
.btn-light{background:var(--white);color:var(--night)}
.btn-light:hover{background:var(--coral);color:var(--night);transform:translateY(-2px)}
.btn-line{border-color:var(--line);color:var(--ink);background:transparent}
.btn-line:hover{border-color:var(--accent);color:var(--accent);background:var(--white)}
.nav-links .btn-main{color:var(--white);padding-inline:17px}
.nav-links .btn-main:hover{background:var(--accent-dark);color:var(--white)}
.nav-toggle{
 display:none;background:transparent;color:var(--white);
 border:1px solid var(--line-light);border-radius:8px;
 min-width:48px;min-height:42px;padding:7px 10px;
}
.nav-toggle:hover{border-color:var(--coral);color:var(--coral)}
.update-hero{
 position:relative;overflow:hidden;
 background:var(--night);color:var(--white);
 padding:74px 0 0;
}
.update-hero::before{
 content:"";
 position:absolute;inset:0;pointer-events:none;
 background:
 linear-gradient(rgba(255,250,246,.035) 1px,transparent 1px),
 linear-gradient(90deg,rgba(255,250,246,.035) 1px,transparent 1px);
 background-size:72px 72px;
 mask-image:linear-gradient(to bottom,black,transparent 78%);
}
.update-hero::after{
 content:"02";
 position:absolute;right:4%;top:28px;
 color:rgba(255,250,246,.045);font-size:220px;
 line-height:1;font-weight:900;pointer-events:none;
}
.breadcrumbs{
 position:relative;z-index:1;display:flex;align-items:center;
 gap:9px;color:#a99ba3;font-size:13px;margin-bottom:30px;
}
.breadcrumbs a:hover{color:var(--coral)}
.breadcrumbs span[aria-current]{color:#e5dbe0}
.hero-title-wrap{position:relative;z-index:1;max-width:930px}
.eyebrow{
 color:var(--coral);font-size:12px;font-weight:800;
 letter-spacing:.18em;margin-bottom:18px;
}
.update-hero h1{
 max-width:920px;margin:0;
 font-size:clamp(38px,6vw,76px);
 overflow-wrap:anywhere;
}
.update-hero h1 em{color:var(--coral);font-style:normal}
.hero-copy{
 max-width:730px;color:#cfc3ca;font-size:17px;
 margin:24px 0 29px;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:48px}
.route-choices{
 position:relative;z-index:2;
 display:grid;grid-template-columns:repeat(3,1fr);
 gap:1px;background:var(--line-light);
 border:1px solid var(--line-light);border-bottom:0;
}
.route-card{
 min-height:155px;padding:24px;
 background:var(--night-2);color:var(--white);
 display:flex;flex-direction:column;justify-content:space-between;
 transition:var(--ease);
}
.route-card:hover{background:#332638;color:var(--white)}
.route-card.recommended{
 background:var(--paper);color:var(--ink);
 box-shadow:inset 0 4px var(--accent);
}
.route-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.route-number{font-size:12px;color:var(--coral);font-weight:800}
.route-badge{
 border-radius:99px;padding:3px 9px;
 background:rgba(198,85,99,.13);color:var(--accent);
 font-size:11px;font-weight:700;
}
.route-card h2{font-size:20px;margin:18px 0 5px}
.route-card p{margin:0;color:#bcaeb6;font-size:13px}
.route-card.recommended p{color:var(--muted)}
.route-link{font-size:13px;font-weight:750;color:var(--coral);margin-top:17px}
.route-card.recommended .route-link{color:var(--accent-dark)}
.section{padding:94px 0}
.section-alt{background:var(--paper-2)}
.section-dark{background:var(--night);color:var(--white)}
.section-head{
 display:flex;justify-content:space-between;align-items:end;
 gap:32px;margin-bottom:38px;
}
.section-kicker{
 display:block;color:var(--accent);font-size:12px;
 font-weight:800;margin-bottom:13px;
}
.section-head h2{font-size:clamp(30px,4vw,48px);max-width:640px;margin:0}
.section-head p{max-width:470px;color:var(--muted);margin:0;font-size:15px}
.section-dark .section-head p{color:#b5a7af}
.status-band{
 display:grid;grid-template-columns:1.3fr repeat(3,.7fr);
 border:1px solid var(--line);background:var(--white);
 border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
}
.status-cell{
 min-height:116px;padding:22px 24px;
 border-right:1px solid var(--line);
 display:flex;flex-direction:column;justify-content:center;
}
.status-cell:last-child{border-right:0}
.status-cell.primary{background:var(--night);color:var(--white)}
.status-label{font-size:12px;color:var(--muted);margin-bottom:9px}
.primary .status-label{color:#b8abb2}
.status-value{font-size:22px;font-weight:800;line-height:1.25}
.status-note{font-size:12px;color:var(--muted);margin-top:5px}
.state-inline{display:flex;align-items:center;gap:8px}
.state-mark{width:9px;height:9px;border-radius:50%;background:var(--olive)}
.update-timeline{position:relative;margin-top:42px}
.update-timeline::before{
 content:"";position:absolute;left:123px;top:17px;bottom:25px;
 width:1px;background:var(--line);
}
.timeline-row{
 display:grid;grid-template-columns:95px 56px 1fr;
 align-items:start;position:relative;margin-bottom:18px;
}
.timeline-period{font-size:13px;font-weight:800;padding-top:20px;color:var(--accent-dark)}
.timeline-point{
 width:13px;height:13px;border-radius:50%;
 background:var(--paper);border:3px solid var(--accent);
 margin:22px auto 0;z-index:2;
}
.timeline-card{
 background:var(--white);border:1px solid var(--line);
 border-radius:var(--radius);padding:24px 26px;
 display:grid;grid-template-columns:1fr auto;
 gap:20px;align-items:center;transition:var(--ease);
}
.timeline-card:hover{
 transform:translateX(4px);border-color:rgba(198,85,99,.55);
 box-shadow:var(--shadow);
}
.timeline-card h3{font-size:20px;margin-bottom:7px}
.timeline-card p{font-size:14px;color:var(--muted);margin:0;max-width:680px}
.timeline-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.tag{margin:0;color:var(--accent-dark);background:#f7e8e4;border:0}
.tag.neutral{background:var(--paper-2);color:#695f64}
.tag.ready{background:#e8eee3;color:#57694e}
.timeline-action{
 width:44px;height:44px;display:grid;place-items:center;
 border:1px solid var(--line);border-radius:10px;
 font-size:20px;color:var(--accent);
}
.timeline-action:hover{background:var(--accent);border-color:var(--accent);color:var(--white)}
.filter-panel{
 display:grid;grid-template-columns:1fr 1.35fr;
 gap:48px;align-items:start;
}
.filter-intro h2{font-size:clamp(30px,4vw,47px);margin-bottom:18px}
.filter-intro p{color:var(--muted);max-width:480px}
.filter-note{
 border-left:3px solid var(--accent);padding:11px 0 11px 18px;
 color:#655c61;font-size:13px;margin-top:27px;
}
.tag-groups{display:grid;gap:22px}
.tag-group{
 background:var(--white);border:1px solid var(--line);
 border-radius:var(--radius);padding:23px;
}
.tag-group-title{
 display:flex;justify-content:space-between;align-items:center;
 gap:12px;font-size:14px;font-weight:800;margin-bottom:15px;
}
.tag-group-title small{color:var(--muted);font-weight:500}
.tag-cloud{display:flex;flex-wrap:wrap;gap:9px}
.filter-chip{
 appearance:none;border:1px solid var(--line);background:var(--paper);
 color:#5d5359;border-radius:99px;padding:8px 13px;
 font-size:13px;transition:var(--ease);min-height:38px;
}
.filter-chip:hover,.filter-chip.active{
 background:var(--night);border-color:var(--night);color:var(--white);
}
.filter-chip:active{transform:scale(.98)}
.filter-result{
 min-height:27px;margin-top:14px;color:var(--accent-dark);
 font-size:13px;font-weight:700;
}
.topic-track{
 display:grid;grid-template-columns:repeat(3,minmax(300px,1fr));
 gap:18px;overflow-x:auto;padding:4px 3px 24px;
 scrollbar-color:var(--accent) rgba(255,250,246,.12);
}
.topic-card{
 position:relative;min-height:340px;padding:28px;
 border:1px solid var(--line-light);border-radius:var(--radius);
 background:var(--night-2);overflow:hidden;
 display:flex;flex-direction:column;transition:var(--ease);
}
.topic-card::before{
 content:attr(data-index);position:absolute;right:16px;top:4px;
 color:rgba(255,250,246,.06);font-size:108px;font-weight:900;
 line-height:1;
}
.topic-card::after{
 content:"00:00:00  /  CN-SUB  /  INDEX";
 position:absolute;left:28px;right:28px;bottom:75px;
 padding:12px 0;border-top:1px solid var(--line-light);
 border-bottom:1px solid var(--line-light);
 color:#847680;font-size:10px;letter-spacing:.15em;
}
.topic-card:hover{transform:translateY(-5px);border-color:var(--coral)}
.topic-card .tag{align-self:flex-start;position:relative;z-index:1}
.topic-card h3{
 position:relative;z-index:1;font-size:26px;
 margin:25px 0 12px;max-width:260px;
}
.topic-card p{position:relative;z-index:1;color:#b9abb3;font-size:14px;max-width:290px}
.topic-card a{
 position:absolute;left:28px;bottom:26px;
 color:var(--coral);font-size:13px;font-weight:800;z-index:2;
}
.topic-card a:hover{color:var(--white)}
.topic-caption{color:#958890;font-size:12px;margin-top:14px}
.notice-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:60px;align-items:start}
.notice-panel{
 background:var(--white);border:1px solid var(--line);
 border-radius:var(--radius);padding:28px;
 box-shadow:var(--shadow);
}
.notice-panel h2{font-size:28px;margin-bottom:14px}
.notice-panel p{font-size:14px;color:var(--muted)}
.notice-list{list-style:none;padding:0;margin:22px 0 0}
.notice-list li{
 position:relative;padding:13px 0 13px 23px;
 border-top:1px solid var(--line);font-size:13px;
}
.notice-list li::before{
 content:"";position:absolute;left:2px;top:21px;
 width:8px;height:8px;border:2px solid var(--olive);border-radius:50%;
}
.faq-wrap{max-width:760px}
.faq-wrap h2{font-size:clamp(30px,4vw,44px);margin-bottom:24px}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-btn{
 width:100%;min-height:70px;border:0;background:transparent;
 text-align:left;display:flex;justify-content:space-between;
 align-items:center;gap:20px;font-weight:750;color:var(--ink);
 padding:0;font-size:16px;
}
.faq-btn:hover{color:var(--accent-dark)}
.faq-btn .faq-icon{color:var(--accent);font-size:22px;transition:var(--ease)}
.faq-btn[aria-expanded=true] .faq-icon{transform:rotate(45deg)}
.faq-answer{color:var(--muted);font-size:14px;padding:0 45px 22px 0}
.cta-section{padding:86px 0;background:var(--accent);color:var(--white)}
.cta-grid{
 display:grid;grid-template-columns:1fr auto;
 gap:50px;align-items:center;
}
.cta-grid h2{font-size:clamp(32px,4vw,52px);max-width:650px;margin-bottom:13px}
.cta-grid p{color:#f4dfe2;max-width:680px;margin:0}
.cta-actions{display:flex;gap:11px;flex-wrap:wrap;justify-content:flex-end}
.feedback-box{
 margin-top:34px;padding-top:28px;border-top:1px solid rgba(255,250,246,.25);
 display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;
}
.field-wrap label{display:block;font-size:12px;color:#f6e4e7;margin-bottom:6px}
.field-wrap input,.field-wrap select{
 width:100%;min-height:48px;border:1px solid rgba(255,250,246,.38);
 border-radius:9px;background:rgba(255,250,246,.1);
 color:var(--white);padding:0 13px;
}
.field-wrap input::placeholder{color:#efd5da}
.field-wrap select option{color:var(--ink);background:var(--white)}
.field-wrap input:focus,.field-wrap select:focus{
 outline:0;border-color:var(--white);
 box-shadow:0 0 0 3px rgba(255,250,246,.18);
}
.feedback-status{
 grid-column:1/-1;min-height:22px;margin:0;
 color:#fff1f3;font-size:12px;
}
.site-footer{background:var(--night);color:var(--white);padding:66px 0 25px}
.footer-grid{
 display:grid;grid-template-columns:1.5fr .75fr .75fr;
 gap:70px;padding-bottom:45px;
}
.footer-brand{font-size:20px;font-weight:850;margin-bottom:13px}
.footer-text{max-width:430px;color:#ab9ea5;font-size:13px;margin:0}
.footer-title{font-size:13px;font-weight:800;color:var(--coral);margin-bottom:15px}
.footer-links{display:flex;flex-direction:column;gap:9px}
.footer-links a{color:#b9adb3;font-size:13px}
.footer-links a:hover{color:var(--white);padding-left:3px}
.copyright{
 border-top:1px solid var(--line-light);padding-top:22px;
 display:flex;justify-content:space-between;gap:20px;
 color:#80737b;font-size:11px;
}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.reveal.visible{opacity:1;transform:none}
@media (max-width:1199.98px){
 .nav-shell{gap:18px}
 .brand{min-width:225px}
 .nav-links{gap:2px}
 .nav-links a{padding-inline:10px}
 .status-pill{display:none}
 .topic-track{grid-template-columns:repeat(3,minmax(285px,1fr))}
}
@media (max-width:991.98px){
 .container{width:min(calc(100% - 32px),var(--container))}
 .nav-shell{min-height:70px;position:relative}
 .nav-toggle{display:block;margin-left:auto}
 .nav-links{
  display:none;position:absolute;left:-16px;right:-16px;top:70px;
  padding:14px 16px 20px;background:var(--night);
  border-top:1px solid var(--line-light);
  box-shadow:0 20px 32px rgba(18,12,20,.26);
  flex-direction:column;align-items:stretch;
 }
 .nav-links.open{display:flex}
 .nav-links a{min-height:45px;display:flex;align-items:center}
 .nav-links .btn-main{justify-content:center;margin-top:5px}
 .update-hero{padding-top:58px}
 .route-choices{grid-template-columns:1fr}
 .route-card{min-height:130px}
 .section{padding:76px 0}
 .status-band{grid-template-columns:1fr 1fr}
 .status-cell{border-bottom:1px solid var(--line)}
 .status-cell:nth-child(2){border-right:0}
 .status-cell:nth-child(3),.status-cell:nth-child(4){border-bottom:0}
 .filter-panel,.notice-grid{grid-template-columns:1fr;gap:38px}
 .topic-track{grid-template-columns:repeat(3,310px)}
 .cta-grid{grid-template-columns:1fr}
 .cta-actions{justify-content:flex-start}
 .footer-grid{grid-template-columns:1.3fr .7fr .7fr;gap:35px}
}
@media (max-width:767.98px){
 .brand-name{font-size:14px}
 .brand-name small{font-size:9px}
 .update-hero::after{font-size:130px;top:65px}
 .hero-copy{font-size:15px}
 .section-head{display:block}
 .section-head p{margin-top:16px}
 .timeline-row{grid-template-columns:1fr}
 .update-timeline::before{left:6px;top:0}
 .timeline-period{padding:0 0 8px 25px}
 .timeline-point{position:absolute;left:0;top:1px;margin:0}
 .timeline-card{margin-left:25px;grid-template-columns:1fr}
 .timeline-action{width:100%;height:42px}
 .notice-grid{gap:32px}
 .cta-section{padding:68px 0}
 .feedback-box{grid-template-columns:1fr}
 .feedback-box .btn-light{width:100%}
 .footer-grid{grid-template-columns:1fr 1fr}
 .footer-grid>div:first-child{grid-column:1/-1}
 .copyright{flex-direction:column;gap:7px}
}
@media (max-width:575.98px){
 .container{width:min(calc(100% - 24px),var(--container))}
 .brand{min-width:0}
 .brand-name{max-width:205px;white-space:normal}
 .nav-links{left:-12px;right:-12px}
 .update-hero{padding-top:42px}
 .breadcrumbs{margin-bottom:22px}
 .update-hero h1{font-size:38px}
 .hero-actions{display:grid}
 .hero-actions a{width:100%}
 .route-card{padding:20px}
 .section{padding:62px 0}
 .section-head h2,.filter-intro h2{font-size:31px}
 .status-band{grid-template-columns:1fr}
 .status-cell,.status-cell:nth-child(2),.status-cell:nth-child(3){
  border-right:0;border-bottom:1px solid var(--line);
 }
 .status-cell:last-child{border-bottom:0}
 .timeline-card{padding:20px}
 .tag-group{padding:19px}
 .topic-track{grid-template-columns:repeat(3,84vw)}
 .topic-card{min-height:330px}
 .notice-panel{padding:22px}
 .faq-btn{font-size:15px;min-height:74px}
 .faq-answer{padding-right:10px}
 .cta-actions{display:grid}
 .cta-actions a{width:100%}
 .footer-grid{grid-template-columns:1fr}
 .footer-grid>div:first-child{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{
  animation-duration:.01ms!important;
  animation-iteration-count:1!important;
  transition-duration:.01ms!important;
 }
 .reveal{opacity:1;transform:none}
}

/* roulang page: category1 */
:root{
 --ink:#17131c;
 --night:#211a27;
 --night-2:#2b2030;
 --paper:#f5f1ec;
 --paper-2:#ebe3dc;
 --white:#fffaf6;
 --muted:#867d82;
 --line:rgba(38,25,37,.14);
 --line-light:rgba(255,250,246,.16);
 --accent:#c65563;
 --accent-dark:#9f394a;
 --coral:#e38b68;
 --olive:#8b9b78;
 --success:#748766;
 --danger:#b64b59;
 --radius:16px;
 --radius-sm:10px;
 --shadow:0 16px 42px rgba(27,17,28,.10);
 --shadow-soft:0 8px 24px rgba(27,17,28,.07);
 --ease:all .22s ease;
 --container:1220px;
}
*,
*::before,
*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;
 background:var(--paper);
 color:var(--ink);
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
 font-size:16px;
 line-height:1.7;
 -webkit-font-smoothing:antialiased;
}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none;transition:var(--ease)}
a:hover{color:var(--accent)}
img{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
::selection{background:rgba(198,85,99,.22);color:var(--ink)}
:focus-visible{outline:3px solid rgba(227,139,104,.42);outline-offset:3px}
.container{width:min(calc(100% - 40px),var(--container));max-width:none;margin-inline:auto}

/* Header */
.site-header{
 position:sticky;
 top:0;
 z-index:1000;
 background:rgba(33,26,39,.96);
 border-bottom:1px solid var(--line-light);
 transition:var(--ease);
}
.site-header.scrolled{box-shadow:0 10px 28px rgba(20,13,22,.18)}
.nav-shell{min-height:78px;display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:center;gap:12px;color:var(--white);min-width:245px}
.brand:hover{color:var(--white)}
.brand-mark{
 width:34px;
 height:34px;
 flex:0 0 34px;
 border:1px solid var(--coral);
 display:grid;
 place-items:center;
 color:var(--coral);
 font-weight:800;
 border-radius:10px;
 font-size:13px;
}
.brand-name{font-size:16px;font-weight:800;line-height:1.25}
.brand-name small{
 display:block;
 color:#c3b5bd;
 font-size:10px;
 font-weight:500;
 margin-top:3px;
}
.status-pill,.tag{
 display:inline-flex;
 align-items:center;
 gap:6px;
 border:1px solid var(--line);
 border-radius:99px;
 padding:4px 10px;
 font-size:12px;
 white-space:nowrap;
}
.status-pill{color:#dbc7cb;border-color:var(--line-light)}
.status-dot{
 width:7px;
 height:7px;
 border-radius:50%;
 background:var(--olive);
 box-shadow:0 0 0 4px rgba(139,155,120,.13);
}
.nav-links{display:flex;align-items:center;gap:7px;margin-left:auto}
.nav-links a{
 color:#d9cfd4;
 padding:9px 14px;
 border-radius:9px;
 font-size:14px;
 transition:var(--ease);
}
.nav-links a:hover,.nav-links a.active{background:rgba(255,250,246,.09);color:var(--white)}
.nav-links a.active{box-shadow:inset 0 -2px var(--coral)}
.nav-links .btn-main{color:var(--white);padding-inline:18px}
.nav-links .btn-main:hover{background:var(--accent-dark)}
.nav-toggle{
 display:none;
 margin-left:auto;
 background:transparent;
 color:var(--white);
 border:1px solid var(--line-light);
 border-radius:8px;
 min-height:42px;
 padding:7px 12px;
}

/* Buttons and labels */
.btn-main,.btn-ghost,.btn-light{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:10px;
 min-height:46px;
 padding:0 19px;
 border-radius:10px;
 font-size:14px;
 font-weight:700;
 border:1px solid transparent;
 transition:var(--ease);
}
.btn-main{background:var(--accent);color:var(--white)}
.btn-main:hover{background:var(--accent-dark);color:#fff;transform:translateY(-2px)}
.btn-main:active,.btn-light:active,.btn-ghost:active{transform:translateY(0)}
.btn-ghost{border-color:rgba(255,250,246,.3);color:var(--white)}
.btn-ghost:hover{border-color:var(--coral);color:var(--coral)}
.btn-light{background:var(--white);border-color:var(--line);color:var(--ink)}
.btn-light:hover{border-color:var(--accent);color:var(--accent-dark);transform:translateY(-2px)}
.btn-main:disabled,.btn-light:disabled{opacity:.55;cursor:not-allowed;transform:none}
.tag{color:var(--accent-dark);background:#f7e8e4;border:0}
.tag.olive{color:#526344;background:#e7ecdf}
.tag.neutral{color:#665d62;background:#ece6e2}

/* Breadcrumb */
.breadcrumb-band{background:var(--night);border-bottom:1px solid var(--line-light)}
.breadcrumb-wrap{
 min-height:54px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:20px;
 color:#bcaeb6;
 font-size:13px;
}
.breadcrumb-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.breadcrumb-links a:hover{color:var(--coral)}
.page-state{display:flex;align-items:center;gap:8px;color:#d9cfd4}

/* Category hero */
.category-hero{
 background:var(--night);
 color:var(--white);
 padding:66px 0 76px;
 position:relative;
 overflow:hidden;
}
.category-hero::after{
 content:"SUBTITLE INDEX";
 position:absolute;
 right:-20px;
 bottom:-32px;
 color:rgba(255,250,246,.035);
 font-size:104px;
 line-height:1;
 font-weight:900;
 pointer-events:none;
}
.category-hero-grid{
 position:relative;
 z-index:1;
 display:grid;
 grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr);
 gap:72px;
 align-items:center;
}
.eyebrow{
 color:var(--coral);
 font-size:12px;
 font-weight:800;
 margin-bottom:18px;
}
.category-hero h1{
 margin:0;
 max-width:760px;
 font-size:clamp(40px,5.2vw,68px);
 line-height:1.12;
 font-weight:850;
}
.category-hero h1 strong{display:block;color:var(--coral);font-weight:850}
.hero-copy{
 max-width:680px;
 margin:24px 0 29px;
 color:#cfc3ca;
 font-size:17px;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.filter-state{
 background:rgba(255,250,246,.055);
 border:1px solid var(--line-light);
 border-radius:var(--radius);
 padding:25px;
 box-shadow:inset 0 1px rgba(255,255,255,.04);
}
.state-head{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:16px;
 padding-bottom:18px;
}
.state-title{font-size:18px;font-weight:800}
.state-code{color:#a99aa3;font-size:12px}
.state-row{
 display:grid;
 grid-template-columns:92px 1fr auto;
 gap:14px;
 align-items:center;
 min-height:54px;
 border-top:1px solid var(--line-light);
 font-size:13px;
}
.state-row span:first-child{color:#a99aa3}
.state-value{color:var(--white);font-weight:700}
.state-check{color:#b7c6aa}
.state-progress{
 height:5px;
 border-radius:5px;
 overflow:hidden;
 background:rgba(255,250,246,.09);
 margin-top:18px;
}
.state-progress span{display:block;width:76%;height:100%;background:var(--coral)}

/* Shared section */
.section{padding:92px 0}
.section-paper{background:var(--paper)}
.section-soft{background:var(--paper-2)}
.section-dark{background:var(--night);color:var(--white)}
.section-head{
 display:flex;
 justify-content:space-between;
 align-items:end;
 gap:28px;
 margin-bottom:36px;
}
.section-kicker{color:var(--accent-dark);font-size:12px;font-weight:800;margin-bottom:9px}
.section-head h2{
 margin:0;
 max-width:650px;
 font-size:clamp(30px,4vw,48px);
 line-height:1.18;
 font-weight:820;
}
.section-head p{max-width:470px;margin:0;color:var(--muted);font-size:15px}

/* Filters */
.filter-toolbar{
 display:grid;
 grid-template-columns:minmax(260px,1.25fr) repeat(2,minmax(155px,.55fr)) auto;
 gap:12px;
 align-items:end;
 background:var(--white);
 border:1px solid var(--line);
 border-radius:var(--radius);
 padding:18px;
 box-shadow:var(--shadow-soft);
}
.field-label{display:block;margin-bottom:7px;color:#61585d;font-size:12px;font-weight:700}
.search-box{position:relative}
.search-box::before{
 content:"⌕";
 position:absolute;
 left:15px;
 top:50%;
 transform:translateY(-50%);
 color:var(--accent);
 font-size:22px;
 line-height:1;
}
.filter-control{
 width:100%;
 min-height:48px;
 border:1px solid var(--line);
 border-radius:9px;
 background:#fbf8f5;
 color:var(--ink);
 padding:0 14px;
 transition:var(--ease);
}
.search-box .filter-control{padding-left:44px}
.filter-control:hover{border-color:rgba(198,85,99,.45)}
.filter-control:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(198,85,99,.12);background:#fff}
.quick-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:17px}
.filter-chip{
 border:1px solid var(--line);
 background:transparent;
 color:#5e555b;
 border-radius:99px;
 padding:7px 13px;
 font-size:12px;
 transition:var(--ease);
}
.filter-chip:hover,.filter-chip.active{border-color:var(--accent);background:#f7e8e4;color:var(--accent-dark)}
.filter-result{margin-top:15px;color:var(--muted);font-size:13px}

/* Index layout */
.index-layout{display:grid;grid-template-columns:minmax(0,1fr) 286px;gap:28px;align-items:start}
.index-list{display:grid;gap:12px}
.index-item{
 display:grid;
 grid-template-columns:62px minmax(0,1fr) auto;
 gap:19px;
 align-items:center;
 background:var(--white);
 border:1px solid var(--line);
 border-radius:var(--radius-sm);
 padding:20px;
 transition:var(--ease);
}
.index-item:hover{border-color:rgba(198,85,99,.62);box-shadow:var(--shadow-soft);transform:translateX(3px)}
.index-number{
 width:44px;
 height:44px;
 display:grid;
 place-items:center;
 border-radius:9px;
 background:var(--night);
 color:var(--coral);
 font-size:12px;
 font-weight:800;
}
.index-content h3{margin:0 0 5px;font-size:19px;font-weight:800}
.index-content p{margin:0;color:var(--muted);font-size:13px}
.index-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:11px}
.index-action{
 width:42px;
 height:42px;
 display:grid;
 place-items:center;
 border:1px solid var(--line);
 border-radius:9px;
 color:var(--accent);
 font-size:19px;
}
.index-item:hover .index-action{background:var(--accent);border-color:var(--accent);color:#fff}
.side-panel{
 position:sticky;
 top:101px;
 background:var(--night);
 color:var(--white);
 border-radius:var(--radius);
 padding:23px;
}
.side-title{font-size:18px;font-weight:800;margin-bottom:18px}
.side-block{padding:17px 0;border-top:1px solid var(--line-light)}
.side-block:first-of-type{padding-top:0;border-top:0}
.side-label{color:#a99aa3;font-size:11px;margin-bottom:8px}
.side-value{font-size:14px;font-weight:700}
.side-links{display:grid;gap:5px}
.side-links a{
 display:flex;
 justify-content:space-between;
 gap:12px;
 color:#d5cad0;
 padding:7px 0;
 font-size:13px;
}
.side-links a:hover{color:var(--coral)}
.no-results{
 display:none;
 background:var(--white);
 border:1px dashed rgba(198,85,99,.5);
 border-radius:var(--radius);
 padding:30px;
 color:var(--muted);
 text-align:center;
}

/* Featured */
.featured-grid{
 display:grid;
 grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);
 grid-template-rows:1fr 1fr;
 gap:16px;
}
.feature-card{
 position:relative;
 overflow:hidden;
 background:var(--white);
 border:1px solid var(--line);
 border-radius:var(--radius);
 padding:26px;
 min-height:188px;
 transition:var(--ease);
}
.feature-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow)}
.feature-card.large{
 grid-row:1 / span 2;
 min-height:392px;
 background:var(--night);
 color:var(--white);
 display:flex;
 flex-direction:column;
 justify-content:flex-end;
}
.subtitle-visual{
 position:absolute;
 inset:0;
 pointer-events:none;
 overflow:hidden;
}
.timecode{
 position:absolute;
 top:27px;
 left:28px;
 color:var(--coral);
 font-size:12px;
 font-weight:800;
}
.caption-line{
 position:absolute;
 left:28px;
 height:7px;
 border-radius:5px;
 background:rgba(255,250,246,.12);
}
.caption-line.one{top:84px;width:64%}
.caption-line.two{top:106px;width:43%}
.caption-line.three{top:145px;width:77%;background:rgba(227,139,104,.2)}
.caption-line.four{top:167px;width:54%}
.visual-grid{
 position:absolute;
 right:-24px;
 top:26px;
 width:190px;
 height:190px;
 border:1px solid rgba(255,250,246,.08);
 transform:rotate(10deg);
}
.visual-grid::before,.visual-grid::after{
 content:"";
 position:absolute;
 inset:32px;
 border:1px solid rgba(227,139,104,.18);
}
.visual-grid::after{inset:64px}
.feature-copy{position:relative;z-index:1}
.feature-card h3{margin:10px 0 8px;font-size:25px;font-weight:800}
.feature-card.large h3{font-size:34px;max-width:480px}
.feature-card p{margin:0;color:var(--muted);font-size:14px}
.feature-card.large p{color:#cbbdc5;max-width:520px}
.feature-card .card-link{
 display:inline-flex;
 align-items:center;
 gap:8px;
 margin-top:20px;
 color:var(--accent-dark);
 font-size:13px;
 font-weight:800;
}
.feature-card.large .card-link{color:var(--coral)}

/* Steps */
.steps-line{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.step-item{position:relative;padding:27px 24px 0 0}
.step-item::before{
 content:"";
 position:absolute;
 width:9px;
 height:9px;
 border-radius:50%;
 background:var(--accent);
 top:-5px;
 left:0;
 box-shadow:0 0 0 6px var(--paper);
}
.step-number{color:var(--accent-dark);font-size:12px;font-weight:800}
.step-item h3{margin:10px 0 7px;font-size:18px;font-weight:800}
.step-item p{margin:0;color:var(--muted);font-size:13px;max-width:240px}

/* FAQ */
.faq-wrap{max-width:920px;margin:auto}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-btn{
 width:100%;
 min-height:72px;
 border:0;
 background:transparent;
 color:var(--ink);
 text-align:left;
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:24px;
 padding:0;
 font-size:16px;
 font-weight:750;
}
.faq-btn:hover{color:var(--accent-dark)}
.faq-icon{color:var(--accent);font-size:22px;transition:var(--ease)}
.faq-btn[aria-expanded="true"] .faq-icon{transform:rotate(45deg)}
.faq-answer{padding:0 48px 23px 0;color:var(--muted);font-size:14px}

/* Feedback CTA */
.feedback-panel{
 position:relative;
 overflow:hidden;
 display:grid;
 grid-template-columns:.85fr 1.15fr;
 gap:60px;
 background:var(--night);
 color:var(--white);
 border-radius:var(--radius);
 padding:52px;
}
.feedback-panel::after{
 content:"";
 position:absolute;
 right:-90px;
 bottom:-120px;
 width:280px;
 height:280px;
 border:1px solid rgba(227,139,104,.18);
 border-radius:50%;
}
.feedback-copy,.feedback-form{position:relative;z-index:1}
.feedback-copy h2{margin:0 0 18px;font-size:clamp(30px,4vw,46px);line-height:1.2;font-weight:820}
.feedback-copy p{color:#cfc3ca;margin:0;max-width:420px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.form-label{font-size:13px;color:#d8cbd0;margin-bottom:7px}
.form-control,.form-select{
 background:rgba(255,250,246,.07);
 border:1px solid var(--line-light);
 color:var(--white);
 border-radius:9px;
 min-height:48px;
}
.form-control::placeholder{color:#92858d}
.form-control:focus,.form-select:focus{
 background:rgba(255,250,246,.1);
 color:var(--white);
 border-color:var(--coral);
 box-shadow:0 0 0 3px rgba(227,139,104,.16);
}
.form-select option{color:var(--ink)}
textarea.form-control{min-height:112px;resize:vertical}
.form-note{color:#9f9198;font-size:12px;margin:13px 0 0}
.form-status{display:none;color:#c3d0ba;font-size:13px;margin-top:13px}
.invalid-note{display:none;color:#f0a4aa;font-size:12px;margin-top:6px}

/* Footer */
.site-footer{background:#18131b;color:#c8bcc3;padding:62px 0 24px;border-top:1px solid var(--line-light)}
.footer-grid{display:grid;grid-template-columns:1.5fr .7fr .7fr;gap:60px;padding-bottom:42px}
.footer-brand{color:var(--white);font-size:19px;font-weight:800;margin-bottom:13px}
.footer-text{max-width:460px;margin:0;color:#988b93;font-size:13px}
.footer-title{color:var(--white);font-size:13px;font-weight:800;margin-bottom:14px}
.footer-links{display:grid;gap:8px}
.footer-links a{color:#a99ca4;font-size:13px}
.footer-links a:hover{color:var(--coral);transform:translateX(2px)}
.copyright{
 display:flex;
 justify-content:space-between;
 gap:20px;
 border-top:1px solid var(--line-light);
 padding-top:22px;
 color:#766b72;
 font-size:12px;
}

/* Responsive */
@media (max-width:1199.98px){
 .nav-shell{gap:18px}
 .status-pill{display:none}
 .nav-links a{padding-inline:10px}
 .category-hero-grid{gap:42px}
 .section{padding:80px 0}
}
@media (max-width:991.98px){
 .nav-shell{min-height:70px;flex-wrap:wrap;padding-block:10px}
 .nav-toggle{display:block}
 .nav-links{
  display:none;
  order:4;
  width:100%;
  margin:0;
  padding:10px 0 6px;
  border-top:1px solid var(--line-light);
  flex-direction:column;
  align-items:stretch;
 }
 .nav-links.show{display:flex}
 .nav-links a{min-height:44px;display:flex;align-items:center;padding:10px 12px}
 .nav-links .btn-main{margin-top:4px}
 .category-hero-grid{grid-template-columns:1fr;gap:36px}
 .category-hero h1{max-width:720px}
 .filter-state{max-width:650px}
 .filter-toolbar{grid-template-columns:1fr 1fr}
 .filter-toolbar .search-field{grid-column:1 / -1}
 .index-layout{grid-template-columns:1fr}
 .side-panel{position:static;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
 .side-title{grid-column:1 / -1;margin:0}
 .side-block{border-top:0;padding:0}
 .steps-line{grid-template-columns:repeat(2,1fr);gap:36px 0}
 .feedback-panel{grid-template-columns:1fr;gap:36px}
 .footer-grid{grid-template-columns:1.2fr .8fr .8fr;gap:30px}
}
@media (max-width:767.98px){
 .container{width:min(calc(100% - 28px),var(--container))}
 .brand{min-width:0}
 .brand-name{font-size:14px}
 .brand-name small{font-size:9px}
 .breadcrumb-wrap{align-items:flex-start;flex-direction:column;justify-content:center;padding:12px 0;gap:4px}
 .category-hero{padding:50px 0 60px}
 .category-hero::after{font-size:60px}
 .category-hero h1{font-size:42px}
 .hero-copy{font-size:15px}
 .section{padding:68px 0}
 .section-head{display:block;margin-bottom:28px}
 .section-head p{margin-top:14px}
 .filter-toolbar{grid-template-columns:1fr}
 .filter-toolbar .search-field{grid-column:auto}
 .index-item{grid-template-columns:48px minmax(0,1fr);padding:17px;gap:13px}
 .index-action{grid-column:2;width:auto;height:auto;justify-content:start;border:0;font-size:13px}
 .index-action::before{content:"进入分类 ";font-weight:700}
 .featured-grid{grid-template-columns:1fr;grid-template-rows:auto}
 .feature-card.large{grid-row:auto;min-height:350px}
 .feature-card{min-height:180px}
 .side-panel{grid-template-columns:1fr}
 .side-title{grid-column:auto}
 .side-block{padding-top:14px;border-top:1px solid var(--line-light)}
 .feedback-panel{padding:35px 25px}
 .form-grid{grid-template-columns:1fr}
 .footer-grid{grid-template-columns:1fr 1fr}
 .footer-grid>div:first-child{grid-column:1 / -1}
 .copyright{flex-direction:column;gap:5px}
}
@media (max-width:575.98px){
 .container{width:min(calc(100% - 22px),var(--container))}
 .brand-mark{width:31px;height:31px;flex-basis:31px}
 .brand-name{max-width:215px}
 .category-hero h1{font-size:36px}
 .hero-actions{display:grid;grid-template-columns:1fr}
 .hero-actions a{width:100%}
 .filter-state{padding:19px}
 .state-row{grid-template-columns:76px 1fr}
 .state-check{grid-column:2}
 .section{padding:58px 0}
 .section-head h2{font-size:31px}
 .quick-tags{flex-wrap:nowrap;overflow-x:auto;padding-bottom:5px}
 .filter-chip{flex:0 0 auto}
 .index-number{width:40px;height:40px}
 .index-item{grid-template-columns:40px minmax(0,1fr)}
 .feature-card.large h3{font-size:28px}
 .steps-line{grid-template-columns:1fr;gap:30px}
 .feedback-panel{padding:30px 19px}
 .footer-grid{grid-template-columns:1fr}
 .footer-grid>div:first-child{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation:none!important;transition:none!important}
}