/* roulang page: index */
:root {
      --ink: #171927;
      --muted: #71758a;
      --soft: #f6f7fb;
      --line: #e7e8f0;
      --card: #ffffff;
      --primary: #e94d78;
      --primary-dark: #bd315b;
      --violet: #6d5ce7;
      --mint: #40bfa4;
      --gold: #f1b54a;
      --radius: 18px;
      --shadow: 0 18px 48px rgba(30, 34, 68, .10);
      --container: 1180px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: #fff;
      font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
      line-height: 1.75;
      font-size: 15px;
    }
    a { color: inherit; text-decoration: none; transition: .25s ease; }
    img { display: block; max-width: 100%; }
    button, input { font: inherit; }
    button { cursor: pointer; }
    :focus-visible { outline: 3px solid rgba(233, 77, 120, .35); outline-offset: 3px; }
    .container { width: min(100% - 40px, var(--container)); margin: 0 auto; }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--primary-dark);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .eyebrow::before {
      content: "";
      width: 22px;
      height: 3px;
      border-radius: 4px;
      background: var(--primary);
    }
    .section-head {
      max-width: 720px;
      margin-bottom: 34px;
    }
    .section-head h2 {
      margin: 10px 0 12px;
      font-size: clamp(25px, 3vw, 38px);
      line-height: 1.25;
      letter-spacing: 0;
    }
    .section-head p { margin: 0; color: var(--muted); }
    .topbar {
      padding: 8px 0;
      background: #1a1b2a;
      color: #dfe1ed;
      font-size: 12px;
    }
    .topbar .container {
      display: flex;
      justify-content: space-between;
      gap: 18px;
    }
    .site-header {
      position: sticky;
      top: 0;
      z-index: 20;
      background: rgba(255,255,255,.94);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(16px);
    }
    .nav-row {
      min-height: 76px;
      display: flex;
      align-items: center;
      gap: 24px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-width: 250px;
      font-weight: 900;
      font-size: 16px;
      line-height: 1.25;
    }
    .brand-mark {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      color: #fff;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--primary), var(--violet));
      box-shadow: 0 8px 18px rgba(233,77,120,.25);
      flex: 0 0 auto;
    }
    .search-box {
      position: relative;
      flex: 1;
      max-width: 520px;
    }
    .search-box i {
      position: absolute;
      left: 16px;
      top: 50%;
      color: var(--muted);
      transform: translateY(-50%);
    }
    .search-box input {
      width: 100%;
      height: 44px;
      padding: 0 18px 0 44px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--soft);
      box-shadow: none;
      color: var(--ink);
    }
    .search-box input:focus { border-color: var(--primary); background: #fff; }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-left: auto;
    }
    .nav-links a {
      padding: 9px 13px;
      border-radius: 10px;
      color: var(--muted);
      font-weight: 700;
      white-space: nowrap;
    }
    .nav-links a:hover, .nav-links a.active {
      color: var(--primary-dark);
      background: #fff0f4;
    }
    .nav-toggle { display: none; border: 0; background: transparent; color: var(--ink); font-size: 21px; }
    .hero {
      position: relative;
      overflow: hidden;
      padding: 54px 0 68px;
      background:
        radial-gradient(circle at 92% 8%, rgba(109,92,231,.18), transparent 29%),
        radial-gradient(circle at 10% 90%, rgba(233,77,120,.14), transparent 30%),
        #fff8fa;
    }
    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
      gap: 54px;
      align-items: center;
    }
    .hero h1 {
      max-width: 700px;
      margin: 16px 0 18px;
      font-size: clamp(34px, 5vw, 62px);
      line-height: 1.12;
      letter-spacing: 0;
    }
    .hero-copy {
      max-width: 680px;
      color: var(--muted);
      font-size: 17px;
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 46px;
      padding: 0 19px;
      border: 1px solid transparent;
      border-radius: 13px;
      font-weight: 800;
      transition: .25s ease;
    }
    .button.primary {
      color: #fff;
      background: var(--primary);
      box-shadow: 0 10px 20px rgba(233,77,120,.22);
    }
    .button.primary:hover { background: var(--primary-dark); transform: translateY(-2px); }
    .button.ghost { color: var(--ink); border-color: var(--line); background: #fff; }
    .button.ghost:hover { border-color: var(--primary); color: var(--primary-dark); transform: translateY(-2px); }
    .hero-panel {
      position: relative;
      padding: 24px;
      border: 1px solid rgba(255,255,255,.75);
      border-radius: 26px;
      background: linear-gradient(145deg, #22243a, #4c3f78);
      color: #fff;
      box-shadow: var(--shadow);
    }
    .hero-panel::after {
      content: "";
      position: absolute;
      right: 18px;
      bottom: 18px;
      width: 90px;
      height: 90px;
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 50%;
    }
    .panel-top { display: flex; justify-content: space-between; align-items: center; color: #dcd9f7; font-size: 13px; }
    .live-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 5px 9px;
      border-radius: 99px;
      color: #ffdbe5;
      background: rgba(233,77,120,.2);
      font-size: 12px;
    }
    .live-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff7194; }
    .hero-panel h2 { margin: 48px 0 10px; font-size: 25px; line-height: 1.35; }
    .hero-panel p { margin: 0; color: #d2d0e5; }
    .countdown {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 9px;
      margin-top: 24px;
    }
    .countdown div {
      padding: 12px 8px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 13px;
      background: rgba(255,255,255,.08);
      text-align: center;
    }
    .countdown strong { display: block; font-size: 24px; line-height: 1.1; }
    .countdown span { color: #c5c3d8; font-size: 11px; }
    section { padding: 82px 0; }
    .section-soft { background: var(--soft); }
    .section-pink { background: #fff4f7; }
    .value-grid, .feature-grid, .scenario-grid, .testimonial-grid, .article-grid {
      display: grid;
      gap: 18px;
    }
    .value-grid { grid-template-columns: repeat(3, 1fr); }
    .feature-grid { grid-template-columns: 1.1fr .9fr; align-items: stretch; }
    .scenario-grid { grid-template-columns: repeat(4, 1fr); }
    .testimonial-grid { grid-template-columns: repeat(3, 1fr); }
    .article-grid { grid-template-columns: repeat(3, 1fr); }
    .card {
      padding: 24px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--card);
      box-shadow: 0 8px 24px rgba(30,34,68,.04);
      transition: .25s ease;
    }
    .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
    .icon-box {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      margin-bottom: 16px;
      border-radius: 13px;
      color: var(--primary-dark);
      background: #ffe7ee;
      font-size: 18px;
    }
    .card h3 { margin: 0 0 9px; font-size: 19px; line-height: 1.35; }
    .card p { margin: 0; color: var(--muted); font-size: 14px; }
    .feature-main {
      min-height: 310px;
      padding: 34px;
      border-radius: 22px;
      background: linear-gradient(135deg, #fff, #f1efff);
      border: 1px solid #e6e1ff;
    }
    .feature-main h3 { max-width: 550px; margin: 14px 0; font-size: 31px; line-height: 1.3; }
    .feature-main p { max-width: 620px; color: var(--muted); }
    .tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
    .tag {
      display: inline-flex;
      align-items: center;
      padding: 5px 10px;
      border: 1px solid var(--line);
      border-radius: 99px;
      background: #fff;
      color: var(--muted);
      font-size: 12px;
    }
    .feature-side { display: grid; gap: 14px; }
    .metric {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 19px 20px;
      border-radius: 17px;
      background: #1e2032;
      color: #fff;
    }
    .metric small { color: #bfc1d3; }
    .metric strong { color: #ff8eaa; font-size: 27px; }
    .steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      border-top: 1px solid var(--line);
    }
    .step {
      position: relative;
      padding: 28px 30px 10px 0;
      border-right: 1px solid var(--line);
      margin-right: 30px;
    }
    .step:last-child { border-right: 0; margin-right: 0; }
    .step-num {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      margin-bottom: 15px;
      border-radius: 50%;
      color: #fff;
      background: var(--violet);
      font-weight: 900;
    }
    .step h3 { margin: 0 0 7px; font-size: 18px; }
    .step p { margin: 0; color: var(--muted); font-size: 14px; }
    .scenario-card {
      min-height: 170px;
      padding: 22px;
      border-radius: 18px;
      color: #fff;
      background: #272a41;
    }
    .scenario-card:nth-child(2) { background: #443566; }
    .scenario-card:nth-child(3) { background: #245b59; }
    .scenario-card:nth-child(4) { background: #754552; }
    .scenario-card h3 { margin: 0 0 8px; font-size: 18px; }
    .scenario-card p { margin: 0; color: #e6e7f0; font-size: 13px; }
    .channel-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
    .channel {
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
      text-align: center;
      font-weight: 800;
    }
    .channel i { display: block; margin-bottom: 8px; color: var(--primary); font-size: 21px; }
    .quote { position: relative; }
    .quote i { color: var(--primary); font-size: 20px; }
    .quote p { margin: 12px 0 20px; color: var(--ink); }
    .quote strong { font-size: 13px; }
    .quote span { display: block; color: var(--muted); font-size: 12px; }
    .trust-strip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-top: 28px;
    }
    .trust-item {
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
      color: var(--muted);
      text-align: center;
      font-size: 13px;
    }
    .trust-item i { margin-right: 7px; color: var(--mint); }
    .article-card { overflow: hidden; padding: 0; }
    .article-cover {
      height: 130px;
      display: flex;
      align-items: end;
      padding: 18px;
      color: #fff;
      background: linear-gradient(135deg, #dc527d, #6656d7);
      font-size: 12px;
    }
    .article-card:nth-child(2) .article-cover { background: linear-gradient(135deg, #327f75, #263b66); }
    .article-card:nth-child(3) .article-cover { background: linear-gradient(135deg, #b7793b, #8f3c5f); }
    .article-body { padding: 20px; }
    .article-body h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.4; }
    .article-body p { margin: 0; color: var(--muted); font-size: 13px; }
    .final-cta {
      padding: 58px 0;
      background: #1d1f31;
      color: #fff;
    }
    .cta-row { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
    .final-cta h2 { margin: 0 0 10px; font-size: 31px; }
    .final-cta p { max-width: 650px; margin: 0; color: #c9cad8; }
    .footer {
      padding: 46px 0 24px;
      background: #151622;
      color: #bfc1d2;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1fr;
      gap: 40px;
      padding-bottom: 30px;
      border-bottom: 1px solid rgba(255,255,255,.1);
    }
    .footer .brand { color: #fff; }
    .footer h3 { margin: 0 0 12px; color: #fff; font-size: 15px; }
    .footer p { margin: 14px 0 0; font-size: 13px; }
    .footer-links { display: grid; gap: 7px; font-size: 13px; }
    .footer-links a:hover { color: #fff; }
    .copyright {
      display: flex;
      justify-content: space-between;
      gap: 15px;
      padding-top: 20px;
      color: #888b9f;
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      .brand { min-width: 210px; }
      .hero-grid { gap: 30px; }
      .scenario-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
      .container { width: min(100% - 28px, var(--container)); }
      .topbar .container { display: block; text-align: center; }
      .topbar .container span:last-child { display: none; }
      .nav-row { min-height: 68px; flex-wrap: wrap; gap: 12px; }
      .brand { min-width: 0; flex: 1; font-size: 14px; }
      .search-box { order: 3; flex-basis: 100%; max-width: none; margin-bottom: 12px; }
      .nav-links { display: none; width: 100%; order: 4; padding-bottom: 12px; }
      .nav-links.open { display: flex; }
      .nav-toggle { display: block; }
      .site-header:has(.search-box) { padding-bottom: 0; }
      .hero { padding: 38px 0 48px; }
      .hero-grid, .feature-grid { grid-template-columns: 1fr; }
      .hero h1 { font-size: 38px; }
      section { padding: 58px 0; }
      .value-grid, .testimonial-grid, .article-grid { grid-template-columns: 1fr; }
      .steps { grid-template-columns: 1fr; }
      .step { border-right: 0; border-bottom: 1px solid var(--line); margin: 0; padding: 24px 0; }
      .step:last-child { border-bottom: 0; }
      .channel-list, .trust-strip { grid-template-columns: repeat(2, 1fr); }
      .cta-row { display: block; }
      .cta-row .button { margin-top: 22px; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .footer-grid > :first-child { grid-column: 1 / -1; }
    }
    @media (max-width: 520px) {
      .hero h1 { font-size: 32px; }
      .hero-copy { font-size: 15px; }
      .hero-actions .button { width: 100%; }
      .scenario-grid { grid-template-columns: 1fr; }
      .channel-list, .trust-strip { grid-template-columns: 1fr 1fr; }
      .feature-main { padding: 24px; }
      .feature-main h3 { font-size: 25px; }
      .footer-grid { grid-template-columns: 1fr; }
      .footer-grid > :first-child { grid-column: auto; }
      .copyright { display: block; }
      .copyright span { display: block; margin-top: 6px; }
    }

/* roulang page: category1 */
:root {
 --ink:#171927;--muted:#71758a;--soft:#f6f7fb;--line:#e7e8f0;--card:#fff;
 --primary:#e94d78;--primary-dark:#bd315b;--violet:#6d5ce7;--mint:#40bfa4;--gold:#f1b54a;
 --radius:18px;--shadow:0 18px 48px rgba(30,34,68,.10);--container:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:#fff;font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;line-height:1.75;font-size:15px}
a{color:inherit;text-decoration:none;transition:.25s ease}
img{display:block;max-width:100%}
button,input{font:inherit}
button{cursor:pointer}
.container{width:min(100% - 40px,var(--container));margin:0 auto}
:focus-visible{outline:3px solid rgba(233,77,120,.42);outline-offset:3px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--primary-dark);font-size:12px;font-weight:800;letter-spacing:.08em}
.eyebrow:before{content:"";width:22px;height:3px;border-radius:4px;background:var(--primary)}
.section-head{max-width:720px;margin-bottom:32px}
.section-head h2{margin:10px 0 12px;font-size:clamp(25px,3vw,38px);line-height:1.25}
.section-head p{margin:0;color:var(--muted)}
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.95);border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}
.nav-row{min-height:76px;display:flex;align-items:center;gap:24px}
.brand{display:inline-flex;align-items:center;gap:10px;min-width:250px;font-weight:900;font-size:16px;line-height:1.25}
.brand-mark{width:36px;height:36px;display:grid;place-items:center;color:#fff;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--violet));box-shadow:0 8px 18px rgba(233,77,120,.25);flex:0 0 auto}
.search-box{position:relative;flex:1;max-width:520px;margin:0}
.search-box i{position:absolute;left:16px;top:50%;color:var(--muted);transform:translateY(-50%)}
.search-box input{width:100%;height:44px;margin:0;padding:0 18px 0 44px;border:1px solid var(--line);border-radius:14px;background:var(--soft);box-shadow:none;color:var(--ink)}
.search-box input:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(233,77,120,.1)}
.nav-links{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav-links a{padding:9px 13px;border-radius:10px;color:var(--muted);font-weight:700;white-space:nowrap}
.nav-links a:hover,.nav-links a.active{color:var(--primary-dark);background:#fff0f4}
.nav-toggle{display:none;border:0;background:transparent;color:var(--ink);font-size:21px}
.hero{position:relative;overflow:hidden;padding:38px 0 44px;background:radial-gradient(circle at 92% 8%,rgba(109,92,231,.15),transparent 29%),radial-gradient(circle at 10% 90%,rgba(233,77,120,.12),transparent 30%),#fff8fa}
.breadcrumb{display:flex;gap:9px;align-items:center;color:var(--muted);font-size:13px;margin-bottom:24px}
.breadcrumb a:hover{color:var(--primary-dark)}
.page-intro{max-width:830px}
.page-intro h1{margin:10px 0 12px;font-size:clamp(32px,4.5vw,52px);line-height:1.16}
.page-intro p{max-width:790px;margin:0;color:var(--muted);font-size:16px}
.hero-summary{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px}
.badge{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid rgba(233,77,120,.14);border-radius:99px;background:#fff;color:var(--primary-dark);font-size:12px;font-weight:800}
main section{padding:64px 0}
main section.section-soft{background:var(--soft)}
main section.section-pink{background:#fff4f7}
.topic-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(265px,.55fr);gap:24px;align-items:start}
.topic-feature{overflow:hidden;border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:var(--shadow)}
.feature-art{position:relative;min-height:270px;padding:30px;display:flex;align-items:flex-end;overflow:hidden;color:#fff;background:linear-gradient(120deg,rgba(30,28,53,.80),rgba(89,46,97,.44)),url('https://images.unsplash.com/photo-1516589178581-6cd7833ae3b2?auto=format&fit=crop&w=1400&q=85') center 45%/cover}
.feature-art:after{content:"";position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(transparent,rgba(22,20,36,.72))}
.art-copy{position:relative;z-index:1;max-width:620px}
.art-copy h2{margin:10px 0;font-size:30px;line-height:1.3}
.art-copy p{max-width:560px;margin:0;color:rgba(255,255,255,.86)}
.topic-feature-body{padding:22px 26px}
.topic-tags{display:flex;flex-wrap:wrap;gap:8px}
.topic-tags span{padding:6px 10px;border-radius:8px;background:#f5f4fb;color:#625d80;font-size:12px;font-weight:700}
.topic-aside{padding:23px;border-radius:22px;background:#242337;color:#fff;box-shadow:var(--shadow)}
.topic-aside .live-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border-radius:99px;background:rgba(233,77,120,.2);color:#ffdbe5;font-size:12px}
.live-badge:before{content:"";width:7px;height:7px;border-radius:50%;background:#ff7194}
.topic-aside h3{margin:22px 0 10px;font-size:22px;line-height:1.4}
.topic-aside p{margin:0;color:#d2d0e5}
.aside-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.stat{padding:13px;border:1px solid rgba(255,255,255,.13);border-radius:13px;background:rgba(255,255,255,.06)}
.stat strong{display:block;font-size:20px;color:#fff}
.stat span{font-size:12px;color:#d2d0e5}
.category-shell{display:grid;grid-template-columns:220px minmax(0,1fr);gap:34px}
.category-rail{position:sticky;top:104px;align-self:start;padding:20px;border:1px solid var(--line);border-radius:16px;background:#fff}
.category-rail h3{margin:0 0 13px;font-size:16px}
.rail-list{display:grid;gap:5px}
.rail-list a{display:flex;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:9px;color:var(--muted);font-size:13px}
.rail-list a:hover,.rail-list a.selected{background:#fff0f4;color:var(--primary-dark)}
.rail-list small{color:#9a9bad}
.category-content{min-width:0}
.category-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid var(--line)}
.category-toolbar p{margin:0;color:var(--muted)}
.sort-label{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.category-card{display:flex;gap:16px;min-height:148px;padding:19px;border:1px solid var(--line);border-radius:16px;background:#fff;transition:.25s ease}
.category-card:hover{transform:translateY(-3px);border-color:#f1b5c6;box-shadow:0 14px 30px rgba(30,34,68,.08)}
.category-icon{width:46px;height:46px;display:grid;place-items:center;flex:0 0 auto;border-radius:14px;color:var(--primary-dark);background:#fff0f4;font-size:18px}
.category-card:nth-child(3n+2) .category-icon{color:#5d50c9;background:#f0efff}
.category-card:nth-child(3n) .category-icon{color:#198f78;background:#e9faf5}
.category-card h3{margin:0 0 5px;font-size:17px;line-height:1.4}
.category-card p{margin:0;color:var(--muted);font-size:13px}
.category-card .mini-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;color:#8a8da0;font-size:11px}
.mini-meta span{display:inline-flex;align-items:center;gap:5px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 19px;border:1px solid transparent;border-radius:13px;font-weight:800;transition:.25s ease}
.button.primary{color:#fff;background:var(--primary);box-shadow:0 10px 20px rgba(233,77,120,.22)}
.button.primary:hover{color:#fff;background:var(--primary-dark);transform:translateY(-2px)}
.button.ghost{color:var(--ink);border-color:var(--line);background:#fff}
.button.ghost:hover{border-color:var(--primary);color:var(--primary-dark);transform:translateY(-2px)}
.inline-more{margin-top:22px}
.editorial-band{display:grid;grid-template-columns:.8fr 1.2fr;gap:34px;align-items:center;padding:30px;border-radius:22px;background:linear-gradient(125deg,#26243a,#4e426f);color:#fff}
.editorial-band h2{margin:0 0 10px;font-size:26px;line-height:1.35}
.editorial-band p{margin:0;color:#d9d5e8}
.editorial-points{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.editorial-point{display:flex;gap:11px;align-items:flex-start;padding:13px;border:1px solid rgba(255,255,255,.14);border-radius:13px;background:rgba(255,255,255,.06)}
.editorial-point i{margin-top:4px;color:#ff9bb5}
.editorial-point span{font-size:13px;color:#f1eff8}
.keyword-board{display:flex;flex-wrap:wrap;gap:10px}
.keyword-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;color:#4f5265;font-weight:700}
.keyword-chip i{color:var(--primary)}
.keyword-chip:hover{border-color:#f0aac0;color:var(--primary-dark);box-shadow:0 7px 18px rgba(30,34,68,.06)}
.info-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.info-item{padding:20px 0;border-top:2px solid var(--primary)}
.info-item:nth-child(2){border-color:var(--violet)}
.info-item:nth-child(3){border-color:var(--mint)}
.info-item h3{margin:0 0 8px;font-size:17px}
.info-item p{margin:0;color:var(--muted);font-size:14px}
.notice{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border:1px solid #f3d8a6;border-radius:14px;background:#fffaf0;color:#6f5b35}
.notice i{margin-top:4px;color:#c18b22}
.closing{padding:30px;border-radius:20px;background:#fff0f4;display:flex;justify-content:space-between;align-items:center;gap:24px}
.closing h2{margin:0 0 6px;font-size:24px}
.closing p{margin:0;color:var(--muted)}
.footer{padding:50px 0 20px;background:#1a1b2a;color:#e8e8f0}
.footer-grid{display:grid;grid-template-columns:1.4fr .7fr .9fr;gap:40px;padding-bottom:32px}
.footer .brand{color:#fff}
.footer p{max-width:470px;margin:17px 0 0;color:#b9bbca;font-size:13px}
.footer h3{margin:0 0 13px;color:#fff;font-size:14px}
.footer-links{display:grid;gap:8px;color:#b9bbca;font-size:13px}
.footer-links a:hover{color:#ff9bb5}
.copyright{display:flex;justify-content:space-between;gap:16px;padding-top:17px;border-top:1px solid rgba(255,255,255,.12);color:#999caf;font-size:12px}
@media(max-width:1024px){
 .nav-row{gap:14px}.brand{min-width:215px;font-size:14px}
 .category-shell{grid-template-columns:190px minmax(0,1fr);gap:22px}
 .topic-layout{grid-template-columns:minmax(0,1.2fr) minmax(240px,.8fr)}
}
@media(max-width:768px){
 .container{width:min(100% - 32px,var(--container))}
 .nav-row{min-height:68px;flex-wrap:wrap;gap:10px;padding:10px 0}
 .brand{min-width:0;flex:1}
 .nav-toggle{display:block;order:2}
 .search-box{order:3;flex:0 0 100%;max-width:none}
 .nav-links{display:none;order:4;flex:0 0 100%;margin:0;padding:7px 0 2px;border-top:1px solid var(--line)}
 .site-header.menu-open .nav-links{display:flex}
 .hero{padding:29px 0 34px}
 main section{padding:48px 0}
 .topic-layout{grid-template-columns:1fr}
 .topic-aside{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;align-items:center}
 .topic-aside h3{margin:10px 0}
 .aside-stats{margin-top:0}
 .category-shell{grid-template-columns:1fr}
 .category-rail{position:static;padding:15px}
 .rail-list{display:flex;overflow-x:auto;padding-bottom:3px}
 .rail-list a{white-space:nowrap}
 .editorial-band{grid-template-columns:1fr}
 .info-list{grid-template-columns:1fr 1fr}
 .footer-grid{grid-template-columns:1fr 1fr}
 .footer-grid>div:first-child{grid-column:1/-1}
}
@media(max-width:520px){
 .container{width:min(100% - 28px,var(--container))}
 .brand{font-size:13px}.brand-mark{width:33px;height:33px}
 .page-intro h1{font-size:32px}
 .page-intro p{font-size:14px}
 .hero-summary{gap:7px}
 .badge{font-size:11px}
 .feature-art{min-height:250px;padding:22px}
 .art-copy h2{font-size:24px}
 .topic-feature-body{padding:18px}
 .topic-aside{display:block;padding:19px}
 .aside-stats{margin-top:18px}
 .category-grid{grid-template-columns:1fr}
 .category-card{min-height:0;padding:16px}
 .category-toolbar{align-items:flex-start;flex-direction:column}
 .editorial-band{padding:23px}
 .editorial-points{grid-template-columns:1fr}
 .info-list{grid-template-columns:1fr}
 .closing{align-items:flex-start;flex-direction:column;padding:23px}
 .footer-grid{grid-template-columns:1fr;gap:25px}
 .footer-grid>div:first-child{grid-column:auto}
 .copyright{flex-direction:column;gap:5px}
}