/* roulang page: index */
:root {
      --ink: #241921;
      --muted: #776a72;
      --berry: #6b203f;
      --berry-dark: #3b172b;
      --coral: #e98772;
      --cream: #f8f1ed;
      --paper: #fffdfb;
      --panel: #f2e8e6;
      --line: #e5d8d6;
      --soft-line: rgba(107,32,63,.12);
      --shadow: 0 18px 50px rgba(58,23,43,.10);
      --radius: 16px;
      --container: 1200px;
    }
    *,*::before,*::after { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body {
      margin:0;
      color:var(--ink);
      background:var(--cream);
      font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
      line-height:1.7;
      -webkit-font-smoothing:antialiased;
    }
    a { color:inherit; text-decoration:none; transition:.22s ease; }
    button,input,select,textarea { font:inherit; }
    button { cursor:pointer; border:0; }
    img { max-width:100%; display:block; }
    .container { width:min(var(--container),calc(100% - 40px)); margin:0 auto; }
    .site-header { padding:22px 0 0; }
    .nav-panel {
      display:flex; align-items:center; gap:18px; padding:13px;
      background:var(--berry-dark); border:1px solid rgba(255,255,255,.12);
      border-radius:20px; box-shadow:var(--shadow); color:#fff;
    }
    .brand { display:flex; align-items:center; gap:12px; min-width:250px; }
    .brand-mark {
      width:42px; height:42px; border-radius:13px; display:grid; place-items:center;
      color:var(--berry-dark); background:var(--coral); font-weight:800; font-size:18px;
    }
    .brand strong { display:block; font-size:15px; letter-spacing:.02em; line-height:1.3; }
    .brand small { color:#d6bbc4; font-size:11px; }
    .nav-links { display:flex; gap:7px; flex:1; }
    .nav-link {
      position:relative; padding:10px 13px; border:1px solid transparent;
      border-radius:12px; color:#ddcbd1; font-size:13px; white-space:nowrap;
    }
    .nav-link:hover,.nav-link:focus-visible { color:#fff; background:rgba(255,255,255,.08); }
    .nav-link.active { color:#fff; border-color:rgba(233,135,114,.55); background:rgba(233,135,114,.12); }
    .nav-link.active::after { content:""; width:5px; height:5px; border-radius:50%; background:var(--coral); position:absolute; right:8px; top:7px; }
    .nav-cta,.btn-primary {
      display:inline-flex; align-items:center; justify-content:center; gap:8px;
      min-height:44px; padding:0 18px; border-radius:12px; background:var(--coral);
      color:var(--berry-dark); font-weight:700; font-size:13px; transition:.22s ease;
    }
    .nav-cta:hover,.btn-primary:hover { background:#f3a08e; transform:translateY(-2px); box-shadow:0 10px 20px rgba(233,135,114,.22); }
    .btn-secondary {
      display:inline-flex; align-items:center; justify-content:center; min-height:44px;
      padding:0 18px; border-radius:12px; border:1px solid var(--soft-line); color:var(--berry);
      background:#fff; font-weight:700; font-size:13px;
    }
    .btn-secondary:hover { border-color:var(--coral); background:#fff8f5; transform:translateY(-2px); }
    :focus-visible { outline:3px solid rgba(233,135,114,.65); outline-offset:3px; }
    .hero { padding:54px 0 72px; }
    .hero-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:28px; align-items:stretch; }
    .hero-copy { padding:30px 0 20px; }
    .eyebrow,.section-kicker {
      display:inline-flex; align-items:center; gap:8px; color:var(--berry);
      font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
    }
    .eyebrow::before { content:""; width:24px; height:2px; background:var(--coral); }
    h1,h2,h3,p { margin-top:0; }
    h1 { margin:17px 0 20px; max-width:680px; color:var(--berry-dark); font-size:clamp(38px,5vw,68px); line-height:1.1; letter-spacing:-.045em; }
    .hero-copy p { max-width:650px; color:var(--muted); font-size:16px; }
    .hero-actions { display:flex; flex-wrap:wrap; gap:11px; margin-top:28px; }
    .hero-note { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; color:var(--muted); font-size:12px; }
    .note-pill,.chip,.status {
      display:inline-flex; align-items:center; gap:6px; border-radius:999px;
      padding:5px 10px; background:#fff; border:1px solid var(--line); font-size:11px;
    }
    .dot { width:7px; height:7px; border-radius:50%; background:#80a878; display:inline-block; }
    .hero-console {
      position:relative; overflow:hidden; padding:24px; border-radius:22px;
      color:#fff; background:var(--berry-dark); box-shadow:var(--shadow);
    }
    .hero-console::before { content:""; position:absolute; width:220px; height:220px; border:1px solid rgba(233,135,114,.24); border-radius:50%; right:-70px; top:-80px; }
    .console-head { display:flex; justify-content:space-between; align-items:center; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.13); }
    .console-head strong { font-size:15px; }
    .console-head span { color:#d9b8c4; font-size:11px; }
    .console-feature { margin:22px 0; padding:20px; border:1px solid rgba(255,255,255,.14); border-radius:16px; background:rgba(255,255,255,.05); }
    .abstract-media { height:132px; border-radius:12px; background:linear-gradient(135deg,#7d3658 0%,#422037 55%,#241522 100%); position:relative; overflow:hidden; }
    .abstract-media::after { content:""; position:absolute; width:90px; height:90px; border:1px solid rgba(255,210,199,.4); border-radius:50%; right:25px; top:22px; box-shadow:0 0 0 16px rgba(233,135,114,.08),0 0 0 32px rgba(233,135,114,.05); }
    .media-label { position:absolute; left:14px; bottom:12px; font-size:11px; color:#ffe7e0; }
    .console-row { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-top:15px; }
    .console-row small { color:#cdb2bc; font-size:11px; }
    .console-row b { color:#fff; font-size:13px; }
    .progress { height:5px; margin-top:15px; border-radius:9px; background:rgba(255,255,255,.12); overflow:hidden; }
    .progress i { display:block; width:72%; height:100%; background:var(--coral); border-radius:9px; }
    .section { padding:72px 0; }
    .section-head { display:flex; align-items:end; justify-content:space-between; gap:25px; margin-bottom:26px; }
    .section-head h2 { margin:8px 0 0; color:var(--berry-dark); font-size:clamp(26px,3vw,38px); line-height:1.2; letter-spacing:-.03em; }
    .section-head p { max-width:510px; color:var(--muted); margin:0; font-size:14px; }
    .metrics { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); overflow:hidden; box-shadow:0 8px 25px rgba(58,23,43,.05); }
    .metric { padding:24px; border-right:1px solid var(--line); }
    .metric:last-child { border-right:0; }
    .metric strong { display:block; color:var(--berry-dark); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:30px; line-height:1; }
    .metric span { display:block; margin:10px 0 5px; font-weight:800; font-size:14px; }
    .metric small { color:var(--muted); font-size:12px; }
    .matrix { display:grid; grid-template-columns:1.25fr .75fr .75fr; gap:16px; }
    .card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 8px 25px rgba(58,23,43,.05); transition:.22s ease; }
    .card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:#d9b1ad; }
    .matrix-main { padding:28px; grid-row:span 2; background:var(--berry-dark); color:#fff; }
    .matrix-main h3 { color:#fff; font-size:25px; margin:18px 0 10px; }
    .matrix-main p { color:#d8bec8; font-size:14px; }
    .matrix-main .arrow { display:inline-flex; margin-top:26px; color:var(--coral); font-weight:800; font-size:13px; }
    .matrix-side { padding:22px; }
    .matrix-side h3 { color:var(--berry-dark); font-size:17px; margin:12px 0 6px; }
    .matrix-side p { color:var(--muted); font-size:12px; margin-bottom:14px; }
    .mini-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:var(--berry); background:#f7e4df; font-weight:800; }
    .compare { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
    .compare-card { padding:26px; }
    .compare-card.featured { background:var(--berry-dark); color:#fff; }
    .compare-card h3 { color:var(--berry-dark); margin:10px 0 4px; font-size:20px; }
    .compare-card.featured h3 { color:#fff; }
    .compare-card p { color:var(--muted); font-size:13px; }
    .compare-card.featured p { color:#d8bec8; }
    .compare-list { list-style:none; padding:0; margin:20px 0; display:grid; gap:11px; }
    .compare-list li { display:flex; justify-content:space-between; gap:15px; padding-bottom:10px; border-bottom:1px solid var(--line); color:var(--muted); font-size:13px; }
    .featured .compare-list li { border-color:rgba(255,255,255,.13); color:#d8bec8; }
    .compare-list b { color:var(--berry); }
    .featured .compare-list b { color:var(--coral); }
    .faq-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:28px; }
    .faq-intro { padding:28px; background:var(--berry-dark); border-radius:var(--radius); color:#fff; }
    .faq-intro h2 { color:#fff; font-size:28px; line-height:1.25; }
    .faq-intro p { color:#d8bec8; font-size:13px; }
    .faq-list { display:grid; gap:10px; }
    details { background:var(--paper); border:1px solid var(--line); border-radius:13px; padding:17px 20px; }
    summary { cursor:pointer; color:var(--berry-dark); font-weight:800; font-size:14px; }
    details p { color:var(--muted); font-size:13px; margin:12px 0 0; }
    .form-shell { display:grid; grid-template-columns:1fr .7fr; gap:18px; padding:28px; background:var(--paper); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); }
    .form-shell h2 { color:var(--berry-dark); font-size:28px; margin-bottom:8px; }
    .form-shell > div > p { color:var(--muted); font-size:13px; }
    .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px; }
    label { display:block; color:var(--berry-dark); font-size:12px; font-weight:800; }
    input,select,textarea { width:100%; margin-top:7px; padding:12px 13px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); outline:none; font-size:13px; }
    input:focus,select:focus,textarea:focus { border-color:var(--coral); box-shadow:0 0 0 3px rgba(233,135,114,.15); }
    textarea { min-height:96px; resize:vertical; }
    .full { grid-column:1/-1; }
    .form-side { padding:22px; border-radius:15px; background:var(--panel); border:1px solid var(--line); }
    .form-side h3 { color:var(--berry-dark); font-size:17px; }
    .form-side ul { list-style:none; padding:0; margin:18px 0 0; display:grid; gap:13px; }
    .form-side li { display:flex; gap:10px; color:var(--muted); font-size:12px; }
    .form-side li b { color:var(--berry); }
    .submit-row { display:flex; align-items:center; gap:14px; margin-top:16px; }
    .form-hint { color:var(--muted); font-size:11px; }
    .age-strip { margin-top:18px; padding:17px 20px; border-left:4px solid var(--coral); background:#fff7f3; color:#6b5358; border-radius:10px; font-size:12px; }
    footer { padding:34px 0 28px; background:var(--berry-dark); color:#d8bec8; }
    .footer-grid { display:flex; justify-content:space-between; gap:30px; align-items:start; }
    .footer-brand strong { display:block; color:#fff; font-size:15px; margin-bottom:8px; }
    .footer-brand p { max-width:430px; font-size:12px; margin:0; }
    .footer-links { display:flex; gap:18px; flex-wrap:wrap; font-size:12px; }
    .footer-links a:hover { color:var(--coral); }
    .copyright { padding-top:24px; margin-top:24px; border-top:1px solid rgba(255,255,255,.12); font-size:11px; color:#b996a4; }
    .searchbar { display:flex; gap:8px; max-width:600px; margin:30px auto 0; padding:7px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 10px 28px rgba(58,23,43,.08); }
    .searchbar input { margin:0; border:0; box-shadow:none; }
    @media (max-width:1024px) { .brand{min-width:205px}.nav-links{overflow-x:auto}.matrix{grid-template-columns:1fr 1fr}.matrix-main{grid-row:auto;grid-column:1/-1}.faq-layout,.form-shell{grid-template-columns:1fr}.hero-grid{grid-template-columns:1fr  .85fr} }
    @media (max-width:768px) { .container{width:min(100% - 28px,var(--container))}.nav-panel{align-items:flex-start;flex-wrap:wrap}.brand{flex:1}.nav-cta{order:3;width:100%}.nav-links{order:2;flex-basis:100%}.hero{padding:38px 0 50px}.hero-grid{grid-template-columns:1fr}.hero-copy{padding-top:5px}h1{font-size:43px}.metrics{grid-template-columns:1fr 1fr}.metric:nth-child(2){border-right:0}.metric{border-bottom:1px solid var(--line)}.metric:nth-last-child(-n+2){border-bottom:0}.compare{grid-template-columns:1fr}.section{padding:52px 0}.section-head{display:block}.section-head p{margin-top:12px}.form-grid{grid-template-columns:1fr}.full{grid-column:auto}.footer-grid{display:block}.footer-links{margin-top:22px} }
    @media (max-width:520px) { .brand strong{font-size:13px}.nav-link{font-size:12px;padding:9px 10px}.hero-actions .btn-primary,.hero-actions .btn-secondary{width:100%}h1{font-size:36px}.metrics{display:flex;overflow-x:auto}.metric{min-width:165px;border-bottom:0}.matrix{grid-template-columns:1fr}.matrix-main{grid-column:auto}.submit-row{display:block}.submit-row .btn-primary{width:100%;margin-bottom:10px}.searchbar{display:block;background:transparent;border:0;box-shadow:none;padding:0}.searchbar input{border:1px solid var(--line);margin-bottom:8px}.searchbar .btn-primary{width:100%} }

/* roulang page: category2 */
:root {
      --ink:#241921;
      --muted:#776a72;
      --berry:#6b203f;
      --berry-dark:#3b172b;
      --coral:#e98772;
      --cream:#f8f1ed;
      --paper:#fffdfb;
      --panel:#f2e8e6;
      --line:#e5d8d6;
      --soft-line:rgba(107,32,63,.12);
      --shadow:0 18px 50px rgba(58,23,43,.10);
      --radius:16px;
      --container:1200px;
    }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body {
      margin:0;
      color:var(--ink);
      background:var(--cream);
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
      line-height:1.7;
      -webkit-font-smoothing:antialiased;
    }
    a { color:inherit; text-decoration:none; transition:.22s ease; }
    button,input,select,textarea { font:inherit; }
    button { cursor:pointer; border:0; }
    img { max-width:100%; display:block; }
    table { width:100%; border-collapse:collapse; }
    .container { width:min(var(--container),calc(100% - 40px)); margin:0 auto; }
    .site-header { padding:22px 0 0; }
    .nav-panel {
      display:flex; align-items:center; gap:18px; padding:13px;
      background:var(--berry-dark); border:1px solid rgba(255,255,255,.12);
      border-radius:20px; box-shadow:var(--shadow); color:#fff;
    }
    .brand { display:flex; align-items:center; gap:12px; min-width:250px; }
    .brand-mark {
      width:42px; height:42px; border-radius:13px; display:grid; place-items:center;
      color:var(--berry-dark); background:var(--coral); font-weight:800; font-size:18px;
    }
    .brand strong { display:block; font-size:15px; letter-spacing:.02em; line-height:1.3; }
    .brand small { color:#d6bbc4; font-size:11px; }
    .nav-links { display:flex; gap:7px; flex:1; }
    .nav-link {
      position:relative; padding:10px 13px; border:1px solid transparent;
      border-radius:12px; color:#ddcbd1; font-size:13px; white-space:nowrap;
    }
    .nav-link:hover,.nav-link:focus-visible { color:#fff; background:rgba(255,255,255,.08); }
    .nav-link.active { color:#fff; border-color:rgba(233,135,114,.55); background:rgba(233,135,114,.12); }
    .nav-link.active::after {
      content:""; width:5px; height:5px; border-radius:50%; background:var(--coral);
      position:absolute; right:8px; top:7px;
    }
    .nav-cta,.btn-primary {
      display:inline-flex; align-items:center; justify-content:center; gap:8px;
      min-height:44px; padding:0 18px; border-radius:12px; background:var(--coral);
      color:var(--berry-dark); font-weight:700; font-size:13px; transition:.22s ease;
    }
    .nav-cta:hover,.btn-primary:hover { background:#f3a08e; transform:translateY(-2px); box-shadow:0 10px 20px rgba(233,135,114,.22); }
    .nav-cta:focus-visible,.btn-primary:focus-visible,.btn-secondary:focus-visible,.chip:focus-visible,.nav-link:focus-visible { outline:3px solid rgba(233,135,114,.45); outline-offset:3px; }
    .btn-secondary {
      display:inline-flex; align-items:center; justify-content:center; min-height:44px;
      padding:0 18px; border-radius:12px; border:1px solid var(--soft-line); color:var(--berry);
      background:#fff; font-weight:700; font-size:13px;
    }
    .btn-secondary:hover { border-color:var(--coral); background:#fff8f5; transform:translateY(-2px); }
    .hero { padding:52px 0 42px; }
    .summary-panel {
      display:grid; grid-template-columns:1.15fr .85fr; gap:26px; padding:32px;
      border-radius:22px; background:var(--berry-dark); color:#fff; box-shadow:var(--shadow);
      position:relative; overflow:hidden;
    }
    .summary-panel:after {
      content:""; position:absolute; width:330px; height:330px; border:1px solid rgba(233,135,114,.2);
      border-radius:50%; right:-120px; top:-160px; box-shadow:0 0 0 28px rgba(233,135,114,.04),0 0 0 58px rgba(233,135,114,.03);
    }
    .eyebrow,.section-kicker {
      display:inline-flex; align-items:center; gap:8px; color:var(--coral);
      font-size:12px; font-weight:800; letter-spacing:.1em;
    }
    .eyebrow:before { content:""; width:24px; height:2px; background:var(--coral); }
    h1,h2,h3,p { margin-top:0; }
    h1 { margin:16px 0 15px; font-size:clamp(32px,5vw,58px); line-height:1.12; letter-spacing:-.045em; }
    .summary-copy p { max-width:650px; color:#d8bec8; font-size:15px; }
    .hero-actions { display:flex; flex-wrap:wrap; gap:11px; margin-top:26px; }
    .summary-panel .btn-secondary { background:transparent; border-color:rgba(255,255,255,.25); color:#fff; }
    .summary-panel .btn-secondary:hover { background:rgba(255,255,255,.1); border-color:var(--coral); }
    .summary-board {
      position:relative; z-index:1; padding:22px; border:1px solid rgba(255,255,255,.14);
      border-radius:17px; background:rgba(255,255,255,.055); align-self:stretch;
    }
    .board-top,.board-row { display:flex; justify-content:space-between; align-items:center; gap:16px; }
    .board-top { padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.12); }
    .board-top strong { font-size:15px; }
    .board-top span,.board-row small { color:#cdb2bc; font-size:11px; }
    .board-row { padding:15px 0; border-bottom:1px solid rgba(255,255,255,.1); }
    .board-row:last-child { border-bottom:0; padding-bottom:0; }
    .state { display:inline-flex; align-items:center; gap:6px; color:#ffd5c9; font-size:12px; }
    .state i,.dot { width:7px; height:7px; border-radius:50%; background:var(--coral); display:inline-block; }
    .state.muted i { background:#b89ea8; }
    .section { padding:52px 0; }
    .section-head { display:flex; align-items:end; justify-content:space-between; gap:25px; margin-bottom:24px; }
    .section-head h2 { margin:8px 0 0; color:var(--berry-dark); font-size:clamp(25px,3vw,38px); line-height:1.2; letter-spacing:-.03em; }
    .section-head p { max-width:520px; color:var(--muted); margin:0; font-size:14px; }
    .chip-row { display:flex; flex-wrap:wrap; gap:9px; margin:22px 0 26px; }
    .chip {
      background:var(--paper); color:var(--muted); padding:8px 14px; font-size:12px;
      transition:.2s ease;
    }
    .chip:hover,.chip.selected { background:var(--berry); color:#fff; border-color:var(--berry); }
    .content-layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr); gap:22px; align-items:start; }
    .result-stack { display:grid; gap:13px; }
    .result-card {
      display:grid; grid-template-columns:145px minmax(0,1fr) auto; gap:20px; align-items:center;
      padding:16px; background:var(--paper); border:1px solid var(--line); border-radius:16px;
      transition:.22s ease;
    }
    .result-card:hover { transform:translateX(4px); border-color:#d9b1ad; box-shadow:var(--shadow); }
    .thumb {
      height:94px; border-radius:12px; position:relative; overflow:hidden;
      background:linear-gradient(135deg,#8c4864,#472137 58%,#241522);
    }
    .thumb:after { content:""; position:absolute; width:58px; height:58px; border:1px solid rgba(255,222,213,.6); border-radius:50%; right:16px; top:17px; box-shadow:0 0 0 11px rgba(233,135,114,.11); }
    .thumb span { position:absolute; left:10px; bottom:8px; color:#ffe8df; font-size:10px; z-index:1; }
    .result-card h3 { margin:0 0 5px; color:var(--berry-dark); font-size:17px; line-height:1.35; }
    .result-card p { margin:0; color:var(--muted); font-size:12px; }
    .meta-line { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
    .tag,.status {
      padding:4px 9px; font-size:10px; border-radius:999px; background:var(--panel);
      color:var(--berry); border:1px solid var(--line);
    }
    .tag.ready { color:#8b493d; background:#fff0eb; border-color:#f1c2b7; }
    .tag.archive { color:#756a70; background:#f2eeee; }
    .result-card .arrow-link { color:var(--berry); font-size:12px; font-weight:800; white-space:nowrap; }
    .result-card .arrow-link:hover { color:var(--coral); }
    .side-column { display:grid; gap:16px; }
    .side-card { padding:22px; background:var(--paper); border:1px solid var(--line); border-radius:16px; box-shadow:0 8px 25px rgba(58,23,43,.04); }
    .side-card.dark { background:var(--berry-dark); color:#fff; }
    .side-card h3 { margin:0 0 8px; color:var(--berry-dark); font-size:18px; }
    .side-card.dark h3 { color:#fff; }
    .side-card p { margin:0; color:var(--muted); font-size:13px; }
    .side-card.dark p { color:#d8bec8; }
    .status-list { display:grid; gap:15px; margin-top:18px; }
    .status-item { display:flex; justify-content:space-between; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--line); font-size:12px; }
    .status-item:last-child { border-bottom:0; padding-bottom:0; }
    .status-item span { color:var(--muted); }
    .progress { height:6px; border-radius:99px; background:#eadfdd; overflow:hidden; margin-top:7px; }
    .progress b { display:block; height:100%; width:76%; background:var(--coral); border-radius:inherit; }
    .info-band { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
    .info-cell { background:var(--paper); padding:20px; }
    .info-cell strong { display:block; color:var(--berry-dark); font-size:22px; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
    .info-cell span { color:var(--muted); font-size:12px; }
    .faq-grid { display:grid; grid-template-columns:.78fr 1.22fr; gap:22px; }
    .faq-intro { padding:26px; border-radius:16px; background:var(--panel); }
    .faq-intro h2 { color:var(--berry-dark); font-size:27px; line-height:1.25; }
    .faq-intro p { color:var(--muted); font-size:14px; }
    .faq-list { display:grid; gap:10px; }
    details { background:var(--paper); border:1px solid var(--line); border-radius:13px; padding:16px 18px; }
    summary { cursor:pointer; color:var(--berry-dark); font-weight:700; font-size:14px; }
    details p { margin:12px 0 0; color:var(--muted); font-size:13px; }
    .cta {
      display:flex; justify-content:space-between; align-items:center; gap:24px; padding:30px;
      background:var(--berry); color:#fff; border-radius:20px; box-shadow:var(--shadow);
    }
    .cta h2 { margin:0 0 7px; font-size:28px; line-height:1.25; }
    .cta p { margin:0; color:#ead2d9; font-size:13px; max-width:650px; }
    .cta .btn-primary { background:var(--coral); }
    footer { padding:42px 0 28px; margin-top:26px; background:var(--berry-dark); color:#fff; }
    .footer-grid { display:flex; justify-content:space-between; gap:30px; padding-bottom:25px; }
    .footer-brand { max-width:500px; }
    .footer-brand strong { font-size:16px; }
    .footer-brand p { margin:10px 0 0; color:#cdb2bc; font-size:12px; }
    .footer-links { display:flex; flex-wrap:wrap; gap:15px 22px; align-content:start; }
    .footer-links a { color:#decbd2; font-size:12px; }
    .footer-links a:hover { color:var(--coral); }
    .copyright { padding-top:20px; border-top:1px solid rgba(255,255,255,.13); color:#b99da8; font-size:11px; }
    @media (max-width:1024px) {
      .brand { min-width:220px; }
      .content-layout { grid-template-columns:1fr; }
      .side-column { grid-template-columns:repeat(2,1fr); }
    }
    @media (max-width:768px) {
      .container { width:min(var(--container),calc(100% - 28px)); }
      .nav-panel { flex-wrap:wrap; }
      .brand { flex:1 0 100%; }
      .nav-links { order:3; width:100%; overflow-x:auto; padding-bottom:2px; }
      .nav-cta { margin-left:auto; }
      .summary-panel { grid-template-columns:1fr; padding:24px; }
      .hero { padding-top:34px; }
      .section { padding:40px 0; }
      .section-head,.cta { align-items:flex-start; flex-direction:column; }
      .info-band { grid-template-columns:repeat(2,1fr); }
      .faq-grid { grid-template-columns:1fr; }
      .side-column { grid-template-columns:1fr 1fr; }
    }
    @media (max-width:520px) {
      h1 { font-size:34px; }
      .result-card { grid-template-columns:86px minmax(0,1fr); gap:13px; }
      .result-card .arrow-link { grid-column:2; }
      .thumb { height:74px; }
      .thumb:after { width:42px; height:42px; right:10px; top:15px; }
      .info-cell { padding:15px; }
      .info-cell strong { font-size:18px; }
      .side-column { grid-template-columns:1fr; }
      .hero-actions .btn-primary,.hero-actions .btn-secondary,.cta .btn-primary { width:100%; }
      .footer-grid { flex-direction:column; }
    }

/* roulang page: category1 */
:root {
 --ink: #241921;
 --muted: #776a72;
 --berry: #6b203f;
 --berry-dark: #3b172b;
 --coral: #e98772;
 --cream: #f8f1ed;
 --paper: #fffdfb;
 --panel: #f2e8e6;
 --line: #e5d8d6;
 --soft-line: rgba(107,32,63,.12);
 --shadow: 0 18px 50px rgba(58,23,43,.10);
 --shadow-soft: 0 8px 25px rgba(58,23,43,.05);
 --radius: 16px;
 --radius-lg: 22px;
 --container: 1200px;
 --success: #3f735c;
 --warning: #a66239;
 --inactive: #8d7e86;
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
 margin:0;
 color:var(--ink);
 background:var(--cream);
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
 line-height:1.7;
 -webkit-font-smoothing:antialiased;
 overflow-x:hidden;
}
body::before {
 content:"";
 position:fixed;
 inset:0 0 auto;
 height:360px;
 z-index:-1;
 pointer-events:none;
 background:
  radial-gradient(circle at 78% 14%,rgba(233,135,114,.13),transparent 24%),
  linear-gradient(180deg,rgba(107,32,63,.04),transparent);
}
a { color:inherit; text-decoration:none; transition:.22s ease; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; border:0; }
button:disabled { cursor:not-allowed; opacity:.48; transform:none!important; box-shadow:none!important; }
img,svg { max-width:100%; display:block; }
fieldset { margin:0; padding:0; border:0; min-width:0; }
table { border-collapse:collapse; width:100%; }
::selection { color:#fff; background:var(--berry); }
:focus-visible { outline:3px solid rgba(233,135,114,.5); outline-offset:3px; }
.container { width:min(var(--container),calc(100% - 40px)); margin:0 auto; }
.site-header { padding:22px 0 0; }
.nav-panel {
 display:flex;
 align-items:center;
 gap:18px;
 padding:13px;
 color:#fff;
 background:var(--berry-dark);
 border:1px solid rgba(255,255,255,.12);
 border-radius:20px;
 box-shadow:var(--shadow);
}
.brand { display:flex; align-items:center; gap:12px; min-width:250px; }
.brand-mark {
 width:42px;
 height:42px;
 flex:0 0 42px;
 display:grid;
 place-items:center;
 color:var(--berry-dark);
 background:var(--coral);
 border-radius:13px;
 font-size:18px;
 font-weight:800;
}
.brand strong { display:block; font-size:15px; letter-spacing:.02em; line-height:1.3; }
.brand small { display:block; color:#d6bbc4; font-size:11px; }
.nav-links { display:flex; gap:7px; flex:1; }
.nav-link {
 position:relative;
 padding:10px 13px;
 color:#ddcbd1;
 border:1px solid transparent;
 border-radius:12px;
 font-size:13px;
 white-space:nowrap;
}
.nav-link:hover,.nav-link:focus-visible { color:#fff; background:rgba(255,255,255,.08); }
.nav-link:active { transform:translateY(1px); }
.nav-link.active {
 color:#fff;
 border-color:rgba(233,135,114,.55);
 background:rgba(233,135,114,.12);
}
.nav-link.active::after {
 content:"";
 position:absolute;
 right:8px;
 top:7px;
 width:5px;
 height:5px;
 border-radius:50%;
 background:var(--coral);
}
.nav-cta,.btn-primary,.btn-secondary,.btn-dark {
 min-height:44px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:8px;
 padding:0 18px;
 border-radius:12px;
 font-size:13px;
 font-weight:700;
 transition:transform .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.nav-cta,.btn-primary { color:var(--berry-dark); background:var(--coral); }
.nav-cta:hover,.btn-primary:hover {
 background:#f3a08e;
 transform:translateY(-2px);
 box-shadow:0 10px 20px rgba(233,135,114,.22);
}
.btn-secondary {
 color:var(--berry);
 background:#fff;
 border:1px solid var(--soft-line);
}
.btn-secondary:hover { border-color:var(--coral); background:#fff8f5; transform:translateY(-2px); }
.btn-dark { color:#fff; background:var(--berry-dark); border:1px solid var(--berry-dark); }
.btn-dark:hover { background:var(--berry); transform:translateY(-2px); box-shadow:0 10px 24px rgba(59,23,43,.18); }
.btn-primary:active,.btn-secondary:active,.btn-dark:active,.nav-cta:active { transform:translateY(0); }

.compact-hero { padding:48px 0 40px; }
.breadcrumb {
 display:flex;
 flex-wrap:wrap;
 align-items:center;
 gap:8px;
 margin-bottom:20px;
 color:var(--muted);
 font-size:12px;
}
.breadcrumb a:hover { color:var(--berry); }
.breadcrumb span[aria-hidden="true"] { color:#b9a9ae; }
.console-shell {
 display:grid;
 grid-template-columns:minmax(0,1.16fr) minmax(330px,.84fr);
 overflow:hidden;
 color:#fff;
 background:var(--berry-dark);
 border:1px solid rgba(255,255,255,.12);
 border-radius:24px;
 box-shadow:var(--shadow);
}
.console-copy { padding:42px; position:relative; }
.console-copy::before {
 content:"";
 position:absolute;
 left:0;
 top:0;
 width:5px;
 height:100%;
 background:var(--coral);
}
.eyebrow,.section-kicker {
 display:inline-flex;
 align-items:center;
 gap:8px;
 color:var(--berry);
 font-size:12px;
 font-weight:800;
 letter-spacing:.1em;
}
.console-copy .eyebrow { color:#f4aa99; }
.eyebrow::before,.section-kicker::before {
 content:"";
 width:24px;
 height:2px;
 background:var(--coral);
}
.console-copy h1 {
 max-width:760px;
 margin:14px 0 16px;
 font-size:clamp(34px,5vw,58px);
 line-height:1.08;
 letter-spacing:-.045em;
}
.console-copy > p { max-width:720px; margin:0; color:#d9c2cb; font-size:15px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:11px; margin-top:26px; }
.console-copy .btn-secondary { color:#fff; background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); }
.console-copy .btn-secondary:hover { background:rgba(255,255,255,.12); border-color:var(--coral); }
.filter-block {
 margin-top:30px;
 padding-top:24px;
 border-top:1px solid rgba(255,255,255,.13);
}
.filter-title { display:flex; justify-content:space-between; gap:12px; margin-bottom:12px; font-size:12px; color:#cfb7c0; }
.filter-group,.quick-chips { display:flex; flex-wrap:wrap; gap:9px; }
.filter-chip {
 display:inline-flex;
 align-items:center;
 gap:7px;
 min-height:38px;
 padding:0 13px;
 color:#dbc8cf;
 background:rgba(255,255,255,.06);
 border:1px solid rgba(255,255,255,.14);
 border-radius:999px;
 font-size:12px;
 transition:.2s ease;
}
.filter-chip::before {
 content:"";
 width:6px;
 height:6px;
 border:1px solid currentColor;
 border-radius:50%;
}
.filter-chip:hover { color:#fff; border-color:rgba(233,135,114,.65); }
.filter-chip.selected {
 color:#fff;
 background:rgba(233,135,114,.17);
 border-color:var(--coral);
}
.filter-chip.selected::before { border-color:var(--coral); background:var(--coral); }
.refresh-panel {
 min-width:0;
 padding:30px;
 background:#2d1827;
 border-left:1px solid rgba(255,255,255,.1);
}
.preview-cover {
 position:relative;
 min-height:188px;
 overflow:hidden;
 padding:20px;
 border:1px solid rgba(255,255,255,.12);
 border-radius:17px;
 background:
  radial-gradient(circle at 72% 32%,rgba(233,135,114,.28),transparent 20%),
  linear-gradient(135deg,#7d3658 0%,#422037 56%,#241522 100%);
}
.preview-cover::after {
 content:"";
 position:absolute;
 right:22px;
 top:24px;
 width:88px;
 height:88px;
 border:1px solid rgba(255,220,211,.35);
 border-radius:50%;
 box-shadow:0 0 0 16px rgba(233,135,114,.08),0 0 0 32px rgba(233,135,114,.04);
}
.preview-status {
 position:relative;
 z-index:1;
 display:inline-flex;
 align-items:center;
 gap:7px;
 padding:5px 10px;
 color:#ffe5de;
 background:rgba(35,15,28,.52);
 border:1px solid rgba(255,255,255,.15);
 border-radius:999px;
 font-size:11px;
}
.status-dot {
 width:7px;
 height:7px;
 display:inline-block;
 flex:0 0 auto;
 border-radius:50%;
 background:var(--coral);
 box-shadow:0 0 0 4px rgba(233,135,114,.14);
}
.cover-copy { position:absolute; z-index:1; left:20px; right:20px; bottom:18px; }
.cover-copy small { color:#dfc4cd; font-size:11px; }
.cover-copy strong { display:block; margin-top:3px; font-size:18px; }
.countdown {
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:8px;
 margin-top:14px;
}
.time-box {
 padding:12px 8px;
 text-align:center;
 background:rgba(255,255,255,.05);
 border:1px solid rgba(255,255,255,.11);
 border-radius:12px;
}
.time-box b {
 display:block;
 color:#fff;
 font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
 font-size:23px;
 line-height:1.2;
}
.time-box span { color:#bfa9b2; font-size:10px; }
.refresh-meta {
 display:flex;
 justify-content:space-between;
 gap:12px;
 margin:15px 0;
 color:#cdb5be;
 font-size:11px;
}
.remind-button {
 width:100%;
 min-height:42px;
 color:#fff;
 background:rgba(255,255,255,.08);
 border:1px solid rgba(255,255,255,.16);
 border-radius:11px;
 font-size:12px;
 font-weight:700;
 transition:.2s ease;
}
.remind-button:hover { background:rgba(233,135,114,.16); border-color:var(--coral); }
.remind-button.selected { color:var(--berry-dark); background:var(--coral); border-color:var(--coral); }

.notice-strip { padding:0 0 36px; }
.age-notice {
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:20px;
 padding:17px 20px;
 background:var(--paper);
 border:1px solid var(--line);
 border-radius:var(--radius);
 box-shadow:var(--shadow-soft);
}
.notice-copy { display:flex; align-items:flex-start; gap:13px; }
.notice-icon {
 width:38px;
 height:38px;
 flex:0 0 38px;
 display:grid;
 place-items:center;
 color:var(--berry);
 background:var(--panel);
 border-radius:11px;
 font-weight:900;
}
.notice-copy strong { display:block; font-size:14px; }
.notice-copy p { margin:2px 0 0; color:var(--muted); font-size:12px; }
.age-confirmed { color:var(--success)!important; border-color:rgba(63,115,92,.25)!important; background:#f5faf7!important; }

.section { padding:70px 0; }
.section.alt { background:rgba(255,253,251,.52); border-top:1px solid rgba(107,32,63,.06); border-bottom:1px solid rgba(107,32,63,.06); }
.section-head {
 display:flex;
 align-items:flex-end;
 justify-content:space-between;
 gap:25px;
 margin-bottom:26px;
}
.section-head h2 {
 margin:8px 0 0;
 color:var(--berry-dark);
 font-size:clamp(27px,3.4vw,40px);
 line-height:1.18;
 letter-spacing:-.035em;
}
.section-head p { max-width:540px; margin:0; color:var(--muted); font-size:14px; }
.result-counter {
 display:inline-flex;
 align-items:center;
 gap:8px;
 padding:7px 12px;
 color:var(--berry);
 background:#fff;
 border:1px solid var(--line);
 border-radius:999px;
 font-size:11px;
 white-space:nowrap;
}
.index-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:22px; align-items:start; }
.index-main { min-width:0; }
.feature-result {
 display:grid;
 grid-template-columns:240px minmax(0,1fr) auto;
 gap:24px;
 align-items:center;
 padding:18px;
 background:var(--berry-dark);
 border:1px solid rgba(255,255,255,.1);
 border-radius:19px;
 color:#fff;
 box-shadow:var(--shadow);
}
.media-placeholder {
 position:relative;
 min-height:150px;
 overflow:hidden;
 background:
  linear-gradient(125deg,rgba(233,135,114,.28),transparent 50%),
  linear-gradient(145deg,#753453,#291622);
 border:1px solid rgba(255,255,255,.12);
 border-radius:14px;
}
.media-placeholder::before {
 content:"";
 position:absolute;
 inset:18px;
 border:1px solid rgba(255,255,255,.12);
 border-radius:50%;
 transform:translateX(35%);
}
.play-symbol {
 position:absolute;
 left:50%;
 top:50%;
 width:46px;
 height:46px;
 display:grid;
 place-items:center;
 transform:translate(-50%,-50%);
 color:var(--berry-dark);
 background:var(--coral);
 border-radius:50%;
 box-shadow:0 9px 24px rgba(0,0,0,.2);
}
.play-symbol svg { width:17px; height:17px; margin-left:2px; }
.result-tags { display:flex; flex-wrap:wrap; gap:7px; }
.badge,.status,.chip {
 display:inline-flex;
 align-items:center;
 gap:6px;
 width:max-content;
 padding:5px 10px;
 border:1px solid var(--line);
 border-radius:999px;
 background:#fff;
 color:var(--muted);
 font-size:11px;
}
.feature-result .badge { color:#e3cbd4; background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.13); }
.badge.available { color:var(--success); background:#f2f8f4; border-color:rgba(63,115,92,.2); }
.badge.updating { color:var(--warning); background:#fff7f1; border-color:rgba(166,98,57,.2); }
.badge.archived { color:var(--inactive); background:#f5f2f3; }
.feature-copy h3 { margin:12px 0 7px; font-size:22px; line-height:1.3; }
.feature-copy p { margin:0; color:#d5bec7; font-size:13px; }
.feature-meta { display:flex; flex-wrap:wrap; gap:14px; margin-top:15px; color:#c1a9b2; font-size:11px; }
.feature-action { min-width:124px; }
.feature-action .btn-primary { width:100%; }
.content-list { display:grid; gap:12px; margin-top:14px; }
.content-item {
 display:grid;
 grid-template-columns:110px minmax(0,1fr) auto;
 gap:17px;
 align-items:center;
 padding:15px;
 background:var(--paper);
 border:1px solid var(--line);
 border-radius:15px;
 box-shadow:0 5px 18px rgba(58,23,43,.035);
 transition:.22s ease;
}
.content-item:hover { border-color:#d9b1ad; transform:translateY(-2px); box-shadow:var(--shadow-soft); }
.item-thumb {
 position:relative;
 min-height:78px;
 overflow:hidden;
 background:
  radial-gradient(circle at 68% 38%,rgba(233,135,114,.23),transparent 22%),
  linear-gradient(135deg,#68405a,#342231);
 border-radius:11px;
}
.item-thumb::after {
 content:"";
 position:absolute;
 left:12px;
 bottom:10px;
 width:28px;
 height:3px;
 border-radius:3px;
 background:var(--coral);
 box-shadow:34px 0 0 rgba(255,255,255,.28);
}
.item-copy { min-width:0; }
.item-topline { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.item-copy h3 { margin:7px 0 3px; color:var(--berry-dark); font-size:16px; line-height:1.35; }
.item-copy p { margin:0; color:var(--muted); font-size:12px; }
.item-meta { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; color:#94858c; font-size:10px; }
.item-action {
 display:flex;
 flex-direction:column;
 align-items:flex-end;
 gap:8px;
 min-width:92px;
}
.text-link { color:var(--berry); font-size:12px; font-weight:800; }
.text-link:hover { color:#a54d5a; transform:translateX(2px); }
.hidden-result { display:none; }
.empty-state {
 display:none;
 padding:34px;
 margin-top:14px;
 text-align:center;
 color:var(--muted);
 background:var(--paper);
 border:1px dashed #cfbdc2;
 border-radius:var(--radius);
}
.empty-state strong { display:block; color:var(--berry-dark); font-size:16px; }
.empty-state p { margin:5px 0 0; font-size:12px; }

.side-panel {
 position:sticky;
 top:18px;
 padding:21px;
 background:var(--paper);
 border:1px solid var(--line);
 border-radius:var(--radius);
 box-shadow:var(--shadow-soft);
}
.side-panel h3 { margin:0 0 4px; color:var(--berry-dark); font-size:17px; }
.side-panel > p { margin:0 0 17px; color:var(--muted); font-size:12px; }
.side-stats { display:grid; gap:10px; }
.side-stat {
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:12px;
 padding:12px 0;
 border-bottom:1px solid var(--line);
}
.side-stat:last-child { border-bottom:0; }
.side-stat span { color:var(--muted); font-size:12px; }
.side-stat b { font-size:12px; }
.progress {
 height:6px;
 overflow:hidden;
 margin:15px 0 7px;
 background:var(--panel);
 border-radius:999px;
}
.progress span { display:block; width:72%; height:100%; background:var(--coral); border-radius:inherit; }
.side-caption { color:#94858c; font-size:10px; }
.side-links { display:grid; gap:8px; margin-top:18px; }
.side-link {
 display:flex;
 justify-content:space-between;
 gap:10px;
 padding:11px 12px;
 color:var(--berry);
 background:#faf5f3;
 border:1px solid var(--line);
 border-radius:11px;
 font-size:12px;
 font-weight:700;
}
.side-link:hover { background:#fff4ef; border-color:var(--coral); }

.featured-band {
 display:grid;
 grid-template-columns:1.05fr .95fr;
 overflow:hidden;
 background:var(--berry-dark);
 border-radius:22px;
 box-shadow:var(--shadow);
}
.band-copy { padding:36px; color:#fff; }
.band-copy h2 { margin:10px 0 12px; font-size:clamp(27px,4vw,42px); line-height:1.15; }
.band-copy p { max-width:560px; margin:0; color:#d5bdc6; font-size:14px; }
.band-results { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:18px; background:rgba(255,255,255,.035); }
.band-card {
 display:flex;
 flex-direction:column;
 justify-content:space-between;
 min-height:156px;
 padding:18px;
 background:rgba(255,255,255,.06);
 border:1px solid rgba(255,255,255,.13);
 border-radius:14px;
 transition:.2s ease;
}
.band-card:hover { background:rgba(255,255,255,.1); border-color:rgba(233,135,114,.55); transform:translateY(-2px); }
.band-card small { color:#c9aeb8; font-size:10px; }
.band-card strong { display:block; margin:8px 0; color:#fff; font-size:15px; }
.band-card span { color:var(--coral); font-size:11px; font-weight:800; }

.load-panel {
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:20px;
 margin-top:20px;
 padding:17px 19px;
 background:var(--paper);
 border:1px solid var(--line);
 border-radius:14px;
}
.load-info { min-width:0; flex:1; }
.load-info > div:first-child { display:flex; justify-content:space-between; gap:12px; font-size:11px; color:var(--muted); }
.load-bar { height:7px; overflow:hidden; margin-top:9px; background:var(--panel); border-radius:99px; }
.load-bar span { display:block; width:62%; height:100%; background:var(--berry); border-radius:inherit; transition:width .35s ease; }
.pagination { display:flex; align-items:center; gap:6px; }
.page-button {
 min-width:36px;
 height:36px;
 display:grid;
 place-items:center;
 color:var(--muted);
 background:#fff;
 border:1px solid var(--line);
 border-radius:10px;
 font-size:11px;
 transition:.2s ease;
}
.page-button:hover { color:var(--berry); border-color:var(--coral); }
.page-button.active { color:#fff; background:var(--berry); border-color:var(--berry); }

.rules-grid { display:grid; grid-template-columns:.82fr 1.18fr; gap:24px; align-items:start; }
.rules-card {
 position:sticky;
 top:18px;
 padding:29px;
 color:#fff;
 background:var(--berry-dark);
 border-radius:20px;
 box-shadow:var(--shadow);
}
.rules-card h2 { margin:12px 0 10px; font-size:29px; line-height:1.2; }
.rules-card p { color:#d4bbc5; font-size:13px; }
.rule-list { list-style:none; display:grid; gap:10px; margin:22px 0 0; padding:0; }
.rule-list li {
 display:flex;
 gap:10px;
 align-items:flex-start;
 padding-top:10px;
 border-top:1px solid rgba(255,255,255,.11);
 color:#ead8de;
 font-size:12px;
}
.rule-list b {
 width:21px;
 height:21px;
 flex:0 0 21px;
 display:grid;
 place-items:center;
 color:var(--berry-dark);
 background:var(--coral);
 border-radius:7px;
 font-size:10px;
}
.faq-list { display:grid; gap:11px; }
.faq-item {
 overflow:hidden;
 background:var(--paper);
 border:1px solid var(--line);
 border-radius:14px;
 transition:.2s ease;
}
.faq-item:hover { border-color:#d9b1ad; }
.faq-question {
 width:100%;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:16px;
 padding:18px 20px;
 text-align:left;
 color:var(--berry-dark);
 background:transparent;
 font-size:14px;
 font-weight:800;
}
.faq-icon {
 width:27px;
 height:27px;
 flex:0 0 27px;
 display:grid;
 place-items:center;
 color:var(--berry);
 background:var(--panel);
 border-radius:8px;
 transition:.22s ease;
}
.faq-answer {
 max-height:0;
 overflow:hidden;
 color:var(--muted);
 transition:max-height .28s ease;
}
.faq-answer p { margin:0; padding:0 20px 19px; font-size:13px; }
.faq-item.open .faq-answer { max-height:180px; }
.faq-item.open .faq-icon { color:#fff; background:var(--berry); transform:rotate(45deg); }

.cta-section { padding:24px 0 74px; }
.cta-panel {
 display:grid;
 grid-template-columns:minmax(0,1fr) auto;
 gap:28px;
 align-items:center;
 padding:34px;
 background:var(--paper);
 border:1px solid var(--line);
 border-radius:22px;
 box-shadow:var(--shadow);
}
.cta-panel h2 { margin:8px 0 8px; color:var(--berry-dark); font-size:clamp(26px,3.5vw,38px); line-height:1.2; }
.cta-panel p { max-width:680px; margin:0; color:var(--muted); font-size:13px; }
.cta-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }

footer { padding:45px 0 28px; color:#fff; background:var(--berry-dark); }
.footer-grid { display:grid; grid-template-columns:1fr auto; gap:40px; align-items:start; }
.footer-brand strong { font-size:17px; }
.footer-brand p { max-width:600px; margin:9px 0 0; color:#cdb5be; font-size:12px; }
.footer-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:9px 17px; max-width:430px; }
.footer-links a { color:#dbc7ce; font-size:12px; }
.footer-links a:hover { color:var(--coral); }
.copyright {
 margin-top:28px;
 padding-top:18px;
 color:#a98f99;
 border-top:1px solid rgba(255,255,255,.1);
 font-size:11px;
}

@media (max-width:1024px) {
 .nav-panel { flex-wrap:wrap; }
 .brand { flex:1; }
 .nav-links { order:3; width:100%; overflow-x:auto; padding-top:3px; scrollbar-width:none; }
 .nav-links::-webkit-scrollbar { display:none; }
 .console-shell { grid-template-columns:1fr; }
 .refresh-panel { border-left:0; border-top:1px solid rgba(255,255,255,.1); }
 .refresh-panel { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:center; }
 .countdown { margin-top:0; }
 .index-layout { grid-template-columns:minmax(0,1fr) 245px; }
 .feature-result { grid-template-columns:190px minmax(0,1fr); }
 .feature-action { grid-column:2; }
 .featured-band { grid-template-columns:1fr; }
}
@media (max-width:768px) {
 .container { width:min(100% - 28px,var(--container)); }
 .site-header { padding-top:14px; }
 .nav-panel { gap:10px; padding:11px; border-radius:16px; }
 .brand { min-width:0; }
 .brand strong { font-size:13px; }
 .nav-cta { display:none; }
 .nav-link { flex:0 0 auto; }
 .compact-hero { padding:36px 0 30px; }
 .console-copy { padding:30px 25px; }
 .refresh-panel { grid-template-columns:1fr; padding:24px; }
 .section { padding:54px 0; }
 .section-head { align-items:flex-start; flex-direction:column; gap:12px; }
 .age-notice { align-items:flex-start; flex-direction:column; }
 .index-layout { grid-template-columns:1fr; }
 .side-panel { position:relative; top:auto; }
 .feature-result { grid-template-columns:160px minmax(0,1fr); }
 .content-item { grid-template-columns:92px minmax(0,1fr); }
 .item-action { grid-column:2; flex-direction:row; align-items:center; justify-content:space-between; }
 .rules-grid { grid-template-columns:1fr; }
 .rules-card { position:relative; top:auto; }
 .cta-panel { grid-template-columns:1fr; }
 .cta-actions { justify-content:flex-start; }
 .footer-grid { grid-template-columns:1fr; }
 .footer-links { justify-content:flex-start; }
}
@media (max-width:520px) {
 .container { width:min(100% - 20px,var(--container)); }
 .brand-mark { width:38px; height:38px; flex-basis:38px; }
 .brand small { display:none; }
 .nav-links { display:grid; grid-template-columns:repeat(3,max-content); }
 .nav-link { padding:9px 11px; font-size:12px; }
 .console-copy { padding:27px 20px; }
 .console-copy h1 { font-size:35px; }
 .hero-actions,.cta-actions { display:grid; grid-template-columns:1fr; }
 .hero-actions a,.cta-actions a { width:100%; }
 .filter-group { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
 .filter-group::-webkit-scrollbar { display:none; }
 .filter-chip { flex:0 0 auto; }
 .preview-cover { min-height:170px; }
 .section { padding:46px 0; }
 .feature-result { grid-template-columns:1fr; gap:15px; }
 .feature-action { grid-column:auto; }
 .feature-action .btn-primary { width:100%; }
 .content-item { grid-template-columns:76px minmax(0,1fr); gap:12px; padding:12px; }
 .item-thumb { min-height:70px; }
 .item-action { grid-column:1 / -1; }
 .band-copy { padding:28px 22px; }
 .band-results { grid-template-columns:1fr; }
 .load-panel { align-items:stretch; flex-direction:column; }
 .pagination { justify-content:center; }
 .cta-panel { padding:27px 21px; }
}
@media (prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}