/* roulang page: index */
:root {
      --bg: #fff8ef;
      --bg-soft: #fffdf8;
      --surface: #ffffff;
      --surface-warm: #fff3e6;
      --primary: #ff7a45;
      --primary-dark: #e85d2b;
      --primary-soft: #ffe1d2;
      --secondary: #38b48b;
      --secondary-soft: #dff7ef;
      --accent: #7c5cff;
      --accent-soft: #ece7ff;
      --text: #241b16;
      --muted: #74675f;
      --light: #a09288;
      --border: #f0dfcf;
      --danger: #e5484d;
      --warning: #f5a524;
      --success: #16a36b;
      --shadow-sm: 0 8px 22px rgba(123, 70, 35, .08);
      --shadow-md: 0 18px 42px rgba(123, 70, 35, .13);
      --shadow-lg: 0 28px 68px rgba(123, 70, 35, .18);
      --radius-sm: 12px;
      --radius: 20px;
      --radius-lg: 30px;
      --container: 1160px;
      --nav-h: 74px;
      --ease: cubic-bezier(.2, .8, .2, 1);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 8% 8%, rgba(255, 122, 69, .18), transparent 28%),
        radial-gradient(circle at 82% 12%, rgba(124, 92, 255, .12), transparent 30%),
        linear-gradient(180deg, #fff8ef 0%, #fffdf8 42%, #fff8ef 100%);
      line-height: 1.72;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      padding-bottom: 0;
    }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    button, input { font: inherit; }
    button { cursor: pointer; }
    ::selection { background: var(--primary-soft); color: var(--primary-dark); }
    :focus-visible { outline: 3px solid rgba(255, 122, 69, .36); outline-offset: 3px; }

    .container { width: min(100% - 36px, var(--container)); margin: 0 auto; }
    .skip-link { position: absolute; left: 16px; top: -80px; padding: 10px 14px; background: var(--text); color: #fff; border-radius: 999px; z-index: 1000; transition: top .2s var(--ease); }
    .skip-link:focus { top: 16px; }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 60;
      height: var(--nav-h);
      background: rgba(255, 253, 248, .88);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(240, 223, 207, .78);
    }
    .nav-wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
    .logo {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-weight: 900;
      letter-spacing: -.03em;
      color: var(--text);
      white-space: nowrap;
    }
    .logo-mark {
      width: 42px;
      height: 42px;
      border-radius: 15px;
      display: grid;
      place-items: center;
      color: #fff;
      background: linear-gradient(135deg, var(--primary), #ffb257 58%, var(--accent));
      box-shadow: 0 10px 22px rgba(255, 122, 69, .26);
      font-weight: 900;
    }
    .logo-text { font-size: 18px; }
    .desktop-nav { display: flex; align-items: center; gap: 8px; }
    .nav-link {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 10px 14px;
      border-radius: 999px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
      transition: color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
    }
    .nav-link:hover { color: var(--primary-dark); background: rgba(255, 122, 69, .09); transform: translateY(-1px); }
    .nav-link.active { color: var(--primary-dark); background: var(--primary-soft); }
    .nav-link:active { transform: translateY(0) scale(.98); }
    .nav-action {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      border-radius: 999px;
      background: var(--text);
      color: #fff;
      font-size: 14px;
      font-weight: 800;
      box-shadow: var(--shadow-sm);
      transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
    }
    .nav-action:hover { background: #3a2a22; transform: translateY(-2px); box-shadow: var(--shadow-md); }
    .nav-action:active { transform: translateY(0) scale(.98); }

    main { overflow: hidden; }
    section { position: relative; padding: 76px 0; }
    .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
    .section-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: var(--secondary-soft); color: #08724f; font-weight: 800; font-size: 13px; }
    .section-title { margin: 12px 0 0; font-size: clamp(28px, 4vw, 42px); line-height: 1.18; letter-spacing: -.045em; }
    .section-desc { max-width: 650px; margin: 12px 0 0; color: var(--muted); font-size: 16px; }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 46px;
      padding: 12px 18px;
      border: 0;
      border-radius: 999px;
      font-weight: 900;
      transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease);
      user-select: none;
    }
    .btn-primary { background: linear-gradient(135deg, var(--primary), #ff9c5c); color: #fff; box-shadow: 0 16px 28px rgba(255, 122, 69, .28); }
    .btn-primary:hover { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); transform: translateY(-2px); box-shadow: var(--shadow-md); }
    .btn-secondary { background: #fff; color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
    .btn-secondary:hover { border-color: var(--primary); color: var(--primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
    .btn-ghost { background: rgba(255,255,255,.58); color: var(--primary-dark); border: 1px solid rgba(255,122,69,.22); }
    .btn-ghost:hover { background: var(--primary-soft); transform: translateY(-2px); }
    .btn:active { transform: translateY(0) scale(.98); }
    .btn[disabled], .btn.disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

    .badge, .chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 13px;
      font-weight: 800;
      white-space: nowrap;
    }
    .badge { background: var(--primary-soft); color: var(--primary-dark); }
    .chip { background: #fff; border: 1px solid var(--border); color: var(--muted); }
    .chip.hot { border-color: rgba(255,122,69,.35); color: var(--primary-dark); background: #fff6ef; }
    .chip.ok { border-color: rgba(22,163,107,.22); color: var(--success); background: #effaf5; }

    .hero { padding: 56px 0 66px; }
    .hero-shell {
      min-height: 560px;
      border-radius: 36px;
      padding: clamp(28px, 5vw, 58px);
      background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,243,230,.94)),
        radial-gradient(circle at 18% 18%, rgba(255, 178, 87, .45), transparent 32%),
        radial-gradient(circle at 85% 30%, rgba(124, 92, 255, .18), transparent 28%);
      border: 1px solid rgba(240, 223, 207, .86);
      box-shadow: var(--shadow-lg);
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      gap: 38px;
      align-items: center;
    }
    .hero-copy { max-width: 620px; }
    .hero h1 {
      margin: 16px 0 18px;
      font-size: clamp(38px, 6vw, 72px);
      line-height: 1.02;
      letter-spacing: -.07em;
    }
    .hero-intro { margin: 0; color: var(--muted); font-size: clamp(16px, 2vw, 19px); max-width: 590px; }
    .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
    .hero-data { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 30px; }
    .data-pill { padding: 16px; border-radius: 20px; background: rgba(255,255,255,.72); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
    .data-pill strong { display: block; font-size: 24px; line-height: 1.1; }
    .data-pill span { color: var(--muted); font-size: 13px; font-weight: 700; }

    .hero-board {
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
      align-self: stretch;
    }
    .progress-card, .tier-card, .mini-matrix {
      border-radius: 28px;
      background: rgba(255,255,255,.82);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
      padding: 22px;
    }
    .progress-card { display: grid; grid-template-columns: 148px 1fr; gap: 22px; align-items: center; }
    .ring {
      width: 148px;
      height: 148px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: conic-gradient(var(--primary) 0 72%, var(--primary-soft) 72% 100%);
      position: relative;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
    }
    .ring::after { content: ""; position: absolute; inset: 14px; background: #fffdf8; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--border); }
    .ring span { position: relative; z-index: 1; font-size: 28px; font-weight: 950; color: var(--primary-dark); }
    .progress-card h2, .tier-card h2, .mini-matrix h2 { margin: 0 0 8px; font-size: 20px; line-height: 1.25; }
    .progress-card p, .tier-card p, .mini-matrix p { margin: 0; color: var(--muted); font-size: 14px; }
    .tier-list { display: grid; gap: 10px; margin-top: 16px; }
    .tier-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px; border-radius: 16px; background: #fff8f0; border: 1px solid rgba(240,223,207,.75); }
    .tier-row strong { font-size: 14px; }
    .tier-row span { color: var(--muted); font-size: 13px; }
    .matrix-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
    .matrix-item { padding: 13px 10px; text-align: center; border-radius: 16px; background: var(--accent-soft); color: #4c37b5; font-weight: 900; font-size: 13px; }

    .countdown { background: linear-gradient(180deg, rgba(255,253,248,0), rgba(255,243,230,.66)); }
    .count-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 22px; align-items: stretch; }
    .count-panel, .timeline-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-sm); }
    .count-boxes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 20px 0; }
    .count-box { padding: 16px 8px; border-radius: 18px; background: var(--text); color: #fff; text-align: center; }
    .count-box strong { display: block; font-size: 26px; line-height: 1.1; }
    .count-box span { color: rgba(255,255,255,.74); font-size: 12px; }
    .progress-line { height: 12px; border-radius: 999px; background: var(--primary-soft); overflow: hidden; }
    .progress-line i { display: block; height: 100%; width: 68%; background: linear-gradient(90deg, var(--primary), var(--secondary)); border-radius: inherit; }
    .timeline { display: grid; gap: 14px; }
    .timeline-item { display: grid; grid-template-columns: 92px 1fr auto; gap: 14px; align-items: center; padding: 14px; border-radius: 18px; border: 1px solid var(--border); background: #fffdf8; }
    .timeline-time { font-weight: 950; color: var(--primary-dark); }
    .timeline-item p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }

    .directory { padding-top: 72px; }
    .directory-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 24px; align-items: start; }
    .directory-card { position: sticky; top: 96px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); padding: 26px; box-shadow: var(--shadow-sm); }
    .directory-card ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
    .directory-card li { display: flex; align-items: center; gap: 10px; color: var(--muted); }
    .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 5px var(--primary-soft); flex: 0 0 auto; }
    .directory-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .entry-card { border-radius: 24px; padding: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
    .entry-card:hover { transform: translateY(-4px); border-color: rgba(255,122,69,.42); box-shadow: var(--shadow-md); }
    .entry-icon { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; font-size: 22px; background: var(--surface-warm); margin-bottom: 14px; }
    .entry-card h3 { margin: 0 0 8px; font-size: 19px; }
    .entry-card p { margin: 0 0 15px; color: var(--muted); font-size: 14px; }
    .entry-meta { display: flex; flex-wrap: wrap; gap: 8px; }

    .value-strip { display: grid; grid-template-columns: 1.08fr .92fr; gap: 22px; align-items: stretch; }
    .value-main { border-radius: var(--radius-lg); padding: 30px; background: linear-gradient(135deg, #231a14, #3a2a22); color: #fff; box-shadow: var(--shadow-lg); }
    .value-main .section-kicker { background: rgba(255,255,255,.12); color: #ffe5d7; }
    .value-main p { color: rgba(255,255,255,.75); }
    .value-list { display: grid; gap: 12px; margin-top: 24px; }
    .value-item { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; padding: 14px; border-radius: 18px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
    .value-item b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: var(--primary); }
    .value-item strong { display: block; }
    .value-item span { color: rgba(255,255,255,.7); font-size: 14px; }
    .benefit-stack { display: grid; gap: 16px; }
    .benefit-card { padding: 22px; border-radius: 24px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
    .benefit-card h3 { margin: 0 0 8px; }
    .benefit-card p { margin: 0; color: var(--muted); }

    .watch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .watch-card { border-radius: 24px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
    .watch-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
    .cover { min-height: 128px; padding: 16px; display: flex; align-items: flex-start; justify-content: space-between; background: linear-gradient(135deg, var(--primary-soft), #fff5cc); position: relative; overflow: hidden; }
    .cover::after { content: ""; position: absolute; right: -28px; bottom: -28px; width: 92px; height: 92px; border-radius: 28px; background: rgba(255,255,255,.48); transform: rotate(16deg); }
    .cover-num { font-size: 34px; font-weight: 950; color: rgba(232,93,43,.25); }
    .watch-body { padding: 18px; }
    .watch-body h3 { margin: 0 0 8px; font-size: 18px; }
    .watch-body p { margin: 0 0 14px; color: var(--muted); font-size: 14px; }
    .card-link { display: inline-flex; color: var(--primary-dark); font-weight: 900; font-size: 14px; }
    .card-link:hover { text-decoration: underline; text-underline-offset: 4px; }

    .news-layout { display: grid; grid-template-columns: 1fr 340px; gap: 22px; }
    .news-list, .recommend-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm); }
    .news-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
    .news-list a { display: grid; grid-template-columns: 110px 1fr auto; gap: 14px; align-items: center; padding: 16px; border-radius: 18px; transition: background .2s var(--ease), transform .2s var(--ease); }
    .news-list a:hover { background: #fff6ef; transform: translateX(3px); }
    .news-date { color: var(--primary-dark); font-weight: 900; }
    .news-title { font-weight: 850; }
    .news-note { color: var(--muted); font-size: 14px; }
    .recommend-box h3 { margin: 0 0 14px; }
    .tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; }

    .subscribe-card { display: grid; grid-template-columns: 1fr 420px; gap: 26px; align-items: center; border-radius: 34px; padding: clamp(24px, 4vw, 42px); background: linear-gradient(135deg, #fff, #fff0e4); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
    .remind-form { display: grid; gap: 12px; padding: 18px; border-radius: 26px; background: rgba(255,255,255,.72); border: 1px solid var(--border); }
    .input-group { display: grid; gap: 8px; }
    .input-group label { font-weight: 850; font-size: 14px; }
    .input-group input { width: 100%; border: 1px solid var(--border); border-radius: 16px; padding: 13px 14px; background: #fff; color: var(--text); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
    .input-group input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(255,122,69,.12); outline: none; }
    .input-hint { color: var(--muted); font-size: 13px; }
    .switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
    .switch { width: 52px; height: 30px; border-radius: 999px; background: var(--primary); position: relative; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
    .switch::after { content: ""; width: 24px; height: 24px; position: absolute; right: 3px; top: 3px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
    .form-state { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .state-box { padding: 10px; border-radius: 14px; background: #fffdf8; border: 1px dashed var(--border); font-size: 13px; color: var(--muted); }

    .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .step-card { position: relative; padding: 22px; border-radius: 24px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
    .step-num { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: #4c37b5; font-weight: 950; margin-bottom: 16px; }
    .step-card h3 { margin: 0 0 8px; }
    .step-card p { margin: 0; color: var(--muted); font-size: 14px; }

    .archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .archive-card { min-height: 180px; padding: 22px; border-radius: 26px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; justify-content: space-between; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
    .archive-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
    .archive-card h3 { margin: 0 0 8px; }
    .archive-card p { margin: 0; color: var(--muted); font-size: 14px; }
    .archive-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

    .faq-wrap { display: grid; grid-template-columns: .78fr 1.22fr; gap: 24px; align-items: start; }
    .faq-side { padding: 26px; border-radius: var(--radius-lg); background: var(--surface-warm); border: 1px solid var(--border); }
    .faq-side p { color: var(--muted); }
    .faq-list { display: grid; gap: 12px; }
    details { border-radius: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); overflow: hidden; }
    summary { list-style: none; cursor: pointer; padding: 18px 20px; font-weight: 900; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
    summary::-webkit-details-marker { display: none; }
    summary::after { content: "+"; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-dark); flex: 0 0 auto; }
    details[open] summary::after { content: "−"; }
    details p { margin: 0; padding: 0 20px 20px; color: var(--muted); }

    .cta-final { padding-bottom: 92px; }
    .cta-box { border-radius: 34px; padding: clamp(26px, 5vw, 50px); background: linear-gradient(135deg, var(--primary), #ffb257); color: #fff; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; box-shadow: var(--shadow-lg); }
    .cta-box h2 { margin: 0 0 8px; font-size: clamp(28px, 4vw, 44px); line-height: 1.15; letter-spacing: -.04em; }
    .cta-box p { margin: 0; color: rgba(255,255,255,.84); max-width: 690px; }
    .cta-box .btn-secondary { border: 0; }

    .site-footer { background: #241b16; color: rgba(255,255,255,.78); padding: 46px 0 30px; }
    .footer-grid { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 26px; }
    .footer-brand { color: #fff; font-size: 20px; font-weight: 950; margin-bottom: 10px; }
    .footer-grid p { margin: 0; color: rgba(255,255,255,.66); }
    .footer-col h3 { margin: 0 0 12px; color: #fff; font-size: 16px; }
    .footer-links { display: grid; gap: 9px; }
    .footer-links a { color: rgba(255,255,255,.68); transition: color .2s var(--ease), transform .2s var(--ease); }
    .footer-links a:hover { color: #fff; transform: translateX(2px); }
    .copyright { margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: rgba(255,255,255,.56); font-size: 13px; }

    .mobile-tabs { display: none; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70; padding: 8px; border-radius: 24px; background: rgba(255,253,248,.92); border: 1px solid var(--border); box-shadow: 0 18px 42px rgba(36,27,22,.18); backdrop-filter: blur(18px); }
    .mobile-tabs a { flex: 1; min-height: 52px; display: grid; place-items: center; gap: 2px; border-radius: 18px; color: var(--muted); font-size: 12px; font-weight: 850; }
    .mobile-tabs a i { font-style: normal; font-size: 18px; line-height: 1; }
    .mobile-tabs a.active { color: var(--primary-dark); background: var(--primary-soft); }
    .mobile-tabs a:hover { background: #fff6ef; }

    .empty-state, .error-state, .loading-state { display: none; padding: 20px; border-radius: 20px; border: 1px dashed var(--border); background: #fffdf8; color: var(--muted); }

    @media (max-width: 1024px) {
      :root { --nav-h: 68px; }
      .hero-shell, .count-grid, .directory-layout, .value-strip, .subscribe-card, .faq-wrap { grid-template-columns: 1fr; }
      .directory-card { position: static; }
      .watch-grid, .steps { grid-template-columns: repeat(2, 1fr); }
      .news-layout { grid-template-columns: 1fr; }
      .archive-grid { grid-template-columns: repeat(2, 1fr); }
      .progress-card { max-width: 620px; }
      .cta-box { grid-template-columns: 1fr; }
    }

    @media (max-width: 768px) {
      body { padding-bottom: 88px; }
      .container { width: min(100% - 28px, var(--container)); }
      section { padding: 54px 0; }
      .desktop-nav, .nav-action { display: none; }
      .mobile-tabs { display: flex; }
      .logo-text { font-size: 16px; }
      .hero { padding-top: 30px; }
      .hero-shell { border-radius: 26px; padding: 24px; min-height: auto; }
      .hero-data, .count-boxes, .directory-grid, .form-state { grid-template-columns: 1fr; }
      .progress-card { grid-template-columns: 1fr; }
      .ring { width: 132px; height: 132px; }
      .timeline-item { grid-template-columns: 1fr; align-items: start; }
      .section-head { display: block; }
      .news-list a { grid-template-columns: 1fr; gap: 6px; }
      .footer-grid { grid-template-columns: 1fr; }
      .copyright { display: grid; }
    }

    @media (max-width: 520px) {
      .hero h1 { font-size: 38px; }
      .hero-ctas .btn, .cta-box .btn { width: 100%; }
      .matrix-grid, .watch-grid, .steps, .archive-grid { grid-template-columns: 1fr; }
      .cover { min-height: 110px; }
      .subscribe-card { padding: 20px; border-radius: 26px; }
      .count-panel, .timeline-panel, .directory-card, .faq-side { padding: 20px; border-radius: 24px; }
      .mobile-tabs { left: 8px; right: 8px; bottom: 8px; }
    }

/* roulang page: category1 */
:root{
      --bg:#fff9f2;
      --bg-soft:#fff4e8;
      --surface:#ffffff;
      --surface-2:#fff8f0;
      --surface-3:#fff1e1;
      --text:#2c241e;
      --muted:#7a6c61;
      --line:#ead8c8;
      --line-strong:#ddbfa2;
      --primary:#ff7a45;
      --primary-2:#ff9a63;
      --accent:#20b8a8;
      --accent-2:#89dccf;
      --warning:#f3b34d;
      --shadow:0 18px 48px rgba(104,70,39,.10);
      --shadow-soft:0 10px 28px rgba(104,70,39,.08);
      --radius-xl:28px;
      --radius-lg:22px;
      --radius-md:16px;
      --radius-sm:12px;
      --space-1:6px;
      --space-2:10px;
      --space-3:14px;
      --space-4:18px;
      --space-5:24px;
      --space-6:32px;
      --space-7:44px;
      --space-8:60px;
      --container:1180px;
    }
    *,*::before,*::after{box-sizing:border-box;}
    html{scroll-behavior:smooth;}
    body{
      margin:0;
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at top left, rgba(255,154,99,.16), transparent 22%),
        radial-gradient(circle at right top, rgba(32,184,168,.11), transparent 18%),
        linear-gradient(180deg, #fffdf9 0%, var(--bg) 40%, #fff8f0 100%);
      line-height:1.7;
      letter-spacing:.01em;
      overflow-x:hidden;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
      padding-bottom:0;
    }
    img{max-width:100%;display:block;}
    a{color:inherit;text-decoration:none;}
    button,input,select,textarea{
      font:inherit;
      color:inherit;
    }
    button{
      cursor:pointer;
      border:0;
      background:none;
    }
    :focus-visible{
      outline:3px solid rgba(255,122,69,.28);
      outline-offset:3px;
    }
    .container{
      width:min(var(--container), calc(100% - 32px));
      margin:0 auto;
    }
    .site-header{
      position:sticky;
      top:0;
      z-index:80;
      backdrop-filter:saturate(180%) blur(18px);
      background:rgba(255,249,242,.82);
      border-bottom:1px solid rgba(234,216,200,.78);
    }
    .nav-wrap{
      min-height:74px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:10px 0;
    }
    .logo{
      display:inline-flex;
      align-items:center;
      gap:12px;
      min-width:0;
      font-weight:800;
      letter-spacing:.02em;
    }
    .logo-mark{
      width:42px;
      height:42px;
      display:grid;
      place-items:center;
      border-radius:14px;
      color:#fff;
      background:linear-gradient(135deg, var(--primary), #ff9964 58%, #ffb07e);
      box-shadow:0 10px 24px rgba(255,122,69,.28);
      flex:0 0 auto;
    }
    .logo-text{
      font-size:1.02rem;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .desktop-nav{
      display:flex;
      align-items:center;
      gap:8px;
      padding:6px;
      border:1px solid var(--line);
      border-radius:999px;
      background:rgba(255,255,255,.75);
      box-shadow:var(--shadow-soft);
    }
    .nav-link{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:11px 16px;
      border-radius:999px;
      color:var(--muted);
      font-weight:700;
      transition:transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
    }
    .nav-link:hover{
      background:var(--surface-2);
      color:var(--text);
      transform:translateY(-1px);
    }
    .nav-link.active{
      background:linear-gradient(135deg, rgba(255,122,69,.14), rgba(255,154,99,.24));
      color:var(--text);
      box-shadow:inset 0 0 0 1px rgba(255,122,69,.18);
    }
    .nav-action{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:46px;
      padding:0 18px;
      border-radius:999px;
      color:#fff;
      font-weight:800;
      background:linear-gradient(135deg, var(--primary), #ff9964);
      box-shadow:0 12px 28px rgba(255,122,69,.28);
      transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
      flex:0 0 auto;
    }
    .nav-action:hover{
      transform:translateY(-2px);
      box-shadow:0 16px 34px rgba(255,122,69,.33);
      filter:saturate(1.03);
    }

    main{
      padding:28px 0 86px;
    }

    .hero-section{
      padding:10px 0 22px;
    }
    .hero-frame{
      display:grid;
      grid-template-columns:minmax(0,1.35fr) minmax(320px,.95fr);
      gap:22px;
      align-items:stretch;
    }
    .hero-copy,
    .hero-profile-card,
    .panel-card,
    .countdown-card,
    .subscribe-card,
    .cta-card{
      border:1px solid var(--line);
      border-radius:var(--radius-xl);
      background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,250,244,.94));
      box-shadow:var(--shadow);
    }
    .hero-copy{
      padding:32px;
      position:relative;
      overflow:hidden;
    }
    .hero-copy::before{
      content:"";
      position:absolute;
      inset:auto -70px -60px auto;
      width:180px;
      height:180px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(255,154,99,.22), rgba(255,154,99,0) 70%);
      pointer-events:none;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      border-radius:999px;
      background:rgba(32,184,168,.10);
      color:#146d63;
      font-weight:700;
      font-size:.92rem;
      margin-bottom:14px;
    }
    .breadcrumb{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      color:var(--muted);
      font-size:.95rem;
      margin-bottom:10px;
    }
    .breadcrumb span{
      color:var(--line-strong);
    }
    .hero-title{
      margin:0;
      font-size:clamp(2rem, 4.4vw, 3.55rem);
      line-height:1.08;
      letter-spacing:-.03em;
    }
    .hero-subtitle{
      margin:16px 0 0;
      font-size:1.05rem;
      color:var(--muted);
      max-width:42rem;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:24px;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:48px;
      padding:0 18px;
      border-radius:999px;
      font-weight:800;
      transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
      border:1px solid transparent;
    }
    .btn-primary{
      color:#fff;
      background:linear-gradient(135deg, var(--primary), #ff9b67);
      box-shadow:0 14px 30px rgba(255,122,69,.28);
    }
    .btn-primary:hover{
      transform:translateY(-2px);
      box-shadow:0 18px 38px rgba(255,122,69,.34);
    }
    .btn-secondary{
      color:var(--text);
      background:var(--surface);
      border-color:var(--line);
      box-shadow:var(--shadow-soft);
    }
    .btn-secondary:hover{
      transform:translateY(-2px);
      border-color:rgba(255,122,69,.35);
      background:var(--surface-2);
    }
    .btn:active{
      transform:translateY(0);
    }
    .btn[disabled],
    button[disabled]{
      opacity:.55;
      cursor:not-allowed;
      transform:none !important;
      box-shadow:none !important;
    }
    .hero-points{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:12px;
      list-style:none;
      padding:0;
      margin:22px 0 0;
    }
    .hero-points li{
      display:flex;
      align-items:flex-start;
      gap:10px;
      padding:14px 15px;
      border-radius:18px;
      background:linear-gradient(180deg, rgba(255,248,241,.88), rgba(255,255,255,.82));
      border:1px solid rgba(234,216,200,.86);
      color:var(--text);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
    }
    .hero-points li::before{
      content:"";
      width:10px;
      height:10px;
      margin-top:6px;
      border-radius:50%;
      background:linear-gradient(135deg, var(--accent), var(--primary));
      box-shadow:0 0 0 4px rgba(32,184,168,.12);
      flex:0 0 auto;
    }

    .hero-profile-card{
      padding:18px;
      display:flex;
      flex-direction:column;
      gap:16px;
    }
    .profile-cover{
      position:relative;
      min-height:230px;
      border-radius:24px;
      overflow:hidden;
      background:
        radial-gradient(circle at 25% 20%, rgba(255,255,255,.9), rgba(255,255,255,0) 26%),
        linear-gradient(135deg, #ffd9b9 0%, #ffe8d1 35%, #f8b48b 100%);
      border:1px solid rgba(255,255,255,.54);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
    }
    .profile-cover::before,
    .profile-cover::after{
      content:"";
      position:absolute;
      border-radius:50%;
      filter:blur(2px);
    }
    .profile-cover::before{
      width:126px;
      height:126px;
      background:rgba(255,255,255,.42);
      left:-22px;
      top:18px;
    }
    .profile-cover::after{
      width:200px;
      height:200px;
      background:rgba(255,122,69,.16);
      right:-42px;
      bottom:-30px;
    }
    .profile-top{
      position:absolute;
      inset:18px 18px auto 18px;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
    }
    .profile-avatar{
      width:64px;
      height:64px;
      border-radius:22px;
      display:grid;
      place-items:center;
      color:#fff;
      font-size:1.4rem;
      font-weight:900;
      background:linear-gradient(135deg, var(--primary), #ff9b67);
      box-shadow:0 16px 32px rgba(255,122,69,.34);
      flex:0 0 auto;
    }
    .profile-badges{
      display:flex;
      flex-wrap:wrap;
      justify-content:flex-end;
      gap:8px;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:6px;
      min-height:32px;
      padding:0 11px;
      border-radius:999px;
      font-size:.88rem;
      font-weight:700;
      border:1px solid rgba(255,255,255,.52);
      background:rgba(255,255,255,.72);
      color:#6a4a32;
      box-shadow:0 8px 20px rgba(104,70,39,.08);
    }
    .profile-bottom{
      position:absolute;
      inset:auto 18px 18px 18px;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .profile-name{
      font-size:1.18rem;
      font-weight:900;
      letter-spacing:.01em;
    }
    .profile-desc{
      margin:0;
      color:#694f3d;
      font-size:.98rem;
      max-width:28ch;
    }
    .profile-meta{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:10px;
    }
    .stat-card{
      padding:14px 15px;
      border-radius:18px;
      background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,248,242,.9));
      border:1px solid rgba(234,216,200,.88);
      box-shadow:var(--shadow-soft);
    }
    .stat-num{
      display:block;
      font-size:1.2rem;
      font-weight:900;
      line-height:1.1;
    }
    .stat-label{
      display:block;
      margin-top:4px;
      color:var(--muted);
      font-size:.88rem;
    }

    .countdown-strip{
      padding:18px 0 6px;
    }
    .countdown-card{
      padding:24px;
    }
    .section-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:16px;
      margin-bottom:18px;
    }
    .section-title{
      margin:0;
      font-size:1.45rem;
      line-height:1.2;
      letter-spacing:-.02em;
    }
    .section-desc{
      margin:8px 0 0;
      color:var(--muted);
      max-width:60ch;
      font-size:.98rem;
    }
    .mini-label{
      display:inline-flex;
      align-items:center;
      gap:8px;
      min-height:34px;
      padding:0 12px;
      border-radius:999px;
      font-weight:700;
      color:#146d63;
      background:rgba(32,184,168,.11);
      border:1px solid rgba(32,184,168,.16);
      flex:0 0 auto;
    }
    .countdown-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:12px;
      margin-top:16px;
    }
    .countdown-step{
      padding:18px 16px;
      border-radius:20px;
      background:linear-gradient(180deg, rgba(255,250,244,.92), rgba(255,255,255,.98));
      border:1px solid rgba(234,216,200,.9);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
    }
    .countdown-step strong{
      display:block;
      font-size:1.08rem;
      margin-bottom:6px;
    }
    .countdown-step p{
      margin:0;
      color:var(--muted);
      font-size:.95rem;
    }
    .progress-shell{
      margin-top:18px;
      padding:14px;
      border-radius:18px;
      background:rgba(255,248,241,.9);
      border:1px solid rgba(234,216,200,.9);
    }
    .progress-track{
      position:relative;
      height:12px;
      border-radius:999px;
      overflow:hidden;
      background:#f1e4d6;
    }
    .progress-bar{
      position:absolute;
      inset:0;
      width:72%;
      border-radius:inherit;
      background:linear-gradient(90deg, var(--accent), var(--primary));
      box-shadow:0 10px 24px rgba(255,122,69,.26);
    }
    .progress-note{
      display:flex;
      justify-content:space-between;
      gap:12px;
      margin-top:10px;
      color:var(--muted);
      font-size:.92rem;
      flex-wrap:wrap;
    }

    .panel-card{
      padding:24px;
      margin-top:22px;
    }
    .filter-top{
      display:grid;
      grid-template-columns:minmax(0,1.2fr) auto;
      gap:16px;
      align-items:end;
      margin-bottom:16px;
    }
    .search-group{
      display:grid;
      grid-template-columns:minmax(0,1fr) 180px;
      gap:12px;
    }
    .field{
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .field span{
      font-size:.92rem;
      color:var(--muted);
      font-weight:700;
    }
    .input,
    .select{
      width:100%;
      min-height:48px;
      border-radius:16px;
      border:1px solid var(--line);
      background:var(--surface);
      color:var(--text);
      padding:0 16px;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
      transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
    }
    .input::placeholder{
      color:#9a8e84;
    }
    .input:hover,
    .select:hover{
      border-color:rgba(255,122,69,.34);
    }
    .input:focus,
    .select:focus{
      outline:none;
      border-color:rgba(255,122,69,.58);
      box-shadow:0 0 0 4px rgba(255,122,69,.11);
    }
    .chip-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:18px;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:40px;
      padding:0 14px;
      border-radius:999px;
      border:1px solid var(--line);
      background:linear-gradient(180deg, #fff, #fff8f0);
      color:var(--text);
      font-weight:700;
      transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .chip:hover{
      transform:translateY(-1px);
      border-color:rgba(255,122,69,.32);
      box-shadow:var(--shadow-soft);
    }
    .chip.active{
      border-color:rgba(255,122,69,.38);
      background:linear-gradient(135deg, rgba(255,122,69,.12), rgba(255,154,99,.18));
      box-shadow:0 12px 24px rgba(255,122,69,.12);
    }
    .state-note{
      margin-top:16px;
      padding:14px 16px;
      border-radius:16px;
      background:rgba(32,184,168,.08);
      border:1px dashed rgba(32,184,168,.22);
      color:#18675f;
      font-size:.94rem;
    }

    .grid-section{
      padding:8px 0 0;
    }
    .entry-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0,1fr));
      gap:16px;
      margin-top:18px;
    }
    .entry-card{
      display:flex;
      flex-direction:column;
      min-height:100%;
      overflow:hidden;
      border-radius:24px;
      border:1px solid rgba(234,216,200,.92);
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,250,243,.96));
      box-shadow:var(--shadow-soft);
      transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
    .entry-card:hover{
      transform:translateY(-4px);
      box-shadow:0 18px 40px rgba(104,70,39,.14);
      border-color:rgba(255,122,69,.30);
    }
    .entry-cover{
      position:relative;
      min-height:150px;
      padding:16px;
      background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.88), rgba(255,255,255,0) 26%),
        linear-gradient(135deg, #ffe9cf 0%, #ffd4ae 38%, #ffb57f 100%);
    }
    .entry-cover.alt{
      background:
        radial-gradient(circle at 80% 18%, rgba(255,255,255,.82), rgba(255,255,255,0) 28%),
        linear-gradient(135deg, #d8fff6 0%, #9de9db 43%, #55c8bb 100%);
    }
    .entry-cover.alt2{
      background:
        radial-gradient(circle at 16% 22%, rgba(255,255,255,.84), rgba(255,255,255,0) 25%),
        linear-gradient(135deg, #ffe4ef 0%, #ffc2d6 40%, #ff8fba 100%);
    }
    .entry-cover.alt3{
      background:
        radial-gradient(circle at 84% 24%, rgba(255,255,255,.85), rgba(255,255,255,0) 24%),
        linear-gradient(135deg, #ffeec0 0%, #ffd277 42%, #f5a94a 100%);
    }
    .entry-rank{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:42px;
      height:42px;
      padding:0 10px;
      border-radius:16px;
      background:rgba(255,255,255,.72);
      color:#6d3d1a;
      font-weight:900;
      box-shadow:0 12px 24px rgba(104,70,39,.10);
    }
    .entry-cover .cover-chip{
      position:absolute;
      right:14px;
      top:14px;
    }
    .entry-cover .cover-chip .badge{
      background:rgba(255,255,255,.78);
      border-color:rgba(255,255,255,.66);
    }
    .entry-body{
      padding:18px 18px 16px;
      display:flex;
      flex-direction:column;
      gap:12px;
      flex:1 1 auto;
    }
    .entry-title{
      margin:0;
      font-size:1.05rem;
      line-height:1.35;
      letter-spacing:-.01em;
    }
    .entry-tags{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      min-height:28px;
      padding:0 10px;
      border-radius:999px;
      font-size:.82rem;
      font-weight:700;
      color:#8b5f30;
      background:#fff5e8;
      border:1px solid #efd9c0;
    }
    .entry-desc{
      margin:0;
      color:var(--muted);
      font-size:.94rem;
      min-height:3.6em;
    }
    .entry-footer{
      margin-top:auto;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .mini-status{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      color:var(--muted);
      font-size:.88rem;
    }
    .mini-status span{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 10px;
      border-radius:999px;
      background:var(--surface-2);
      border:1px solid rgba(234,216,200,.86);
    }
    .entry-action{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:44px;
      padding:0 16px;
      border-radius:14px;
      background:linear-gradient(135deg, rgba(255,122,69,.14), rgba(255,154,99,.22));
      color:var(--text);
      font-weight:800;
      border:1px solid rgba(255,122,69,.18);
      transition:transform .2s ease, background .2s ease, border-color .2s ease;
    }
    .entry-action:hover{
      transform:translateY(-1px);
      border-color:rgba(255,122,69,.36);
      background:linear-gradient(135deg, rgba(255,122,69,.2), rgba(255,154,99,.28));
    }

    .subscribe-section{
      padding:26px 0 0;
    }
    .subscribe-card{
      padding:24px;
    }
    .subscribe-wrap{
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(340px,.95fr);
      gap:18px;
      align-items:stretch;
    }
    .subscribe-copy h2,
    .faq-section h2,
    .cta-card h2{
      margin:0;
      font-size:1.45rem;
      line-height:1.2;
      letter-spacing:-.02em;
    }
    .subscribe-copy p,
    .cta-card p{
      margin:12px 0 0;
      color:var(--muted);
    }
    .reminder-points{
      margin:18px 0 0;
      padding:0;
      list-style:none;
      display:grid;
      gap:10px;
    }
    .reminder-points li{
      position:relative;
      padding:0 0 0 20px;
      color:#5f4d41;
    }
    .reminder-points li::before{
      content:"";
      position:absolute;
      left:0;
      top:.78em;
      width:8px;
      height:8px;
      border-radius:50%;
      background:linear-gradient(135deg, var(--accent), var(--primary));
      transform:translateY(-50%);
    }
    .subscribe-form{
      display:grid;
      gap:14px;
      padding:18px;
      border-radius:22px;
      background:linear-gradient(180deg, rgba(255,250,244,.98), rgba(255,255,255,.96));
      border:1px solid rgba(234,216,200,.94);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.74);
    }
    .switch-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:14px 15px;
      border-radius:16px;
      background:#fff;
      border:1px solid var(--line);
    }
    .switch-row input{
      appearance:none;
      width:48px;
      height:28px;
      border-radius:999px;
      position:relative;
      background:#e8d7c7;
      border:1px solid #d5c0ad;
      transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
      flex:0 0 auto;
    }
    .switch-row input::before{
      content:"";
      position:absolute;
      width:22px;
      height:22px;
      top:2px;
      left:2px;
      border-radius:50%;
      background:#fff;
      box-shadow:0 6px 16px rgba(104,70,39,.18);
      transition:transform .2s ease;
    }
    .switch-row input:checked{
      background:linear-gradient(135deg, var(--accent), #2dcab8);
      border-color:rgba(32,184,168,.35);
      box-shadow:0 0 0 4px rgba(32,184,168,.1);
    }
    .switch-row input:checked::before{
      transform:translateX(20px);
    }
    .switch-text{
      display:flex;
      flex-direction:column;
      gap:2px;
    }
    .switch-text strong{
      font-size:1rem;
    }
    .switch-text span{
      font-size:.9rem;
      color:var(--muted);
    }
    .subscribe-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:2px;
    }

    .faq-section{
      padding:28px 0 0;
    }
    .faq-box{
      margin-top:16px;
      border-radius:var(--radius-xl);
      border:1px solid var(--line);
      background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,250,244,.95));
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .faq-item{
      border-top:1px solid rgba(234,216,200,.8);
    }
    .faq-item:first-child{
      border-top:0;
    }
    .faq-item summary{
      list-style:none;
      cursor:pointer;
      padding:20px 22px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      font-weight:800;
    }
    .faq-item summary::-webkit-details-marker{display:none;}
    .faq-item summary::after{
      content:"+";
      width:30px;
      height:30px;
      display:grid;
      place-items:center;
      border-radius:10px;
      background:var(--surface-2);
      color:var(--text);
      border:1px solid var(--line);
      flex:0 0 auto;
    }
    .faq-item[open] summary::after{
      content:"−";
      background:rgba(255,122,69,.12);
      border-color:rgba(255,122,69,.24);
    }
    .faq-item p{
      margin:0;
      padding:0 22px 20px;
      color:var(--muted);
    }

    .cta-section{
      padding:28px 0 0;
    }
    .cta-card{
      padding:24px;
      background:
        radial-gradient(circle at top right, rgba(255,122,69,.12), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,248,240,.96));
    }
    .cta-wrap{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      flex-wrap:wrap;
    }
    .related-links{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:16px;
    }
    .related-links a{
      display:inline-flex;
      align-items:center;
      min-height:38px;
      padding:0 14px;
      border-radius:999px;
      border:1px solid var(--line);
      background:#fff;
      box-shadow:var(--shadow-soft);
      font-weight:700;
      color:var(--text);
      transition:transform .2s ease, border-color .2s ease, background .2s ease;
    }
    .related-links a:hover{
      transform:translateY(-1px);
      border-color:rgba(255,122,69,.34);
      background:var(--surface-2);
    }

    .site-footer{
      margin-top:36px;
      padding:30px 0 18px;
      border-top:1px solid rgba(234,216,200,.8);
      background:linear-gradient(180deg, rgba(255,248,240,.4), rgba(255,247,239,.96));
    }
    .footer-grid{
      display:grid;
      grid-template-columns:minmax(0,1.2fr) repeat(2, minmax(0,.8fr));
      gap:18px;
      align-items:start;
    }
    .footer-brand{
      font-size:1.15rem;
      font-weight:900;
      margin-bottom:10px;
    }
    .site-footer p{
      margin:0;
      color:var(--muted);
      max-width:34rem;
    }
    .footer-col h3{
      margin:0 0 12px;
      font-size:1rem;
    }
    .footer-links{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .footer-links a{
      color:var(--muted);
      transition:color .2s ease, transform .2s ease;
    }
    .footer-links a:hover{
      color:var(--text);
      transform:translateX(2px);
    }
    .copyright{
      display:flex;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      padding-top:18px;
      margin-top:20px;
      border-top:1px solid rgba(234,216,200,.8);
      color:var(--muted);
      font-size:.92rem;
    }

    .mobile-tabbar{
      display:none;
    }

    .skeleton-row{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:12px;
      margin-top:14px;
    }
    .skeleton-card{
      min-height:88px;
      border-radius:18px;
      background:linear-gradient(90deg, #f1e3d6 0%, #f8efe7 45%, #f1e3d6 100%);
      background-size:200% 100%;
      animation:shine 1.8s ease infinite;
      border:1px solid rgba(234,216,200,.75);
    }
    @keyframes shine{
      0%{background-position:0 0}
      100%{background-position:200% 0}
    }

    @media (max-width: 1100px){
      .hero-frame,
      .subscribe-wrap,
      .footer-grid{
        grid-template-columns:1fr;
      }
      .entry-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
      }
      .filter-top{
        grid-template-columns:1fr;
      }
      .search-group{
        grid-template-columns:1fr 170px;
      }
    }
    @media (max-width: 860px){
      .nav-wrap{
        flex-wrap:wrap;
      }
      .desktop-nav{
        order:3;
        width:100%;
        justify-content:flex-start;
        overflow:auto;
        padding:6px;
        scrollbar-width:none;
      }
      .desktop-nav::-webkit-scrollbar{display:none;}
      .nav-action{
        margin-left:auto;
      }
      .hero-points{
        grid-template-columns:1fr;
      }
      .countdown-grid{
        grid-template-columns:1fr;
      }
      .profile-meta{
        grid-template-columns:1fr;
      }
      .skeleton-row{
        grid-template-columns:1fr;
      }
      .footer-grid{
        gap:26px;
      }
    }
    @media (max-width: 740px){
      main{
        padding-top:20px;
        padding-bottom:94px;
      }
      .hero-copy,
      .hero-profile-card,
      .panel-card,
      .countdown-card,
      .subscribe-card,
      .cta-card{
        border-radius:24px;
      }
      .entry-grid{
        grid-template-columns:1fr;
      }
      .section-head{
        flex-direction:column;
        align-items:flex-start;
      }
      .search-group{
        grid-template-columns:1fr;
      }
      .subscribe-actions{
        flex-direction:column;
      }
      .btn{
        width:100%;
      }
      .related-links{
        display:grid;
        grid-template-columns:repeat(2, minmax(0,1fr));
      }
      .desktop-nav{
        order:2;
      }
      .nav-action{
        order:1;
      }
      .desktop-nav{
        width:100%;
      }
      .site-footer{
        padding-bottom:92px;
      }
      .mobile-tabbar{
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:90;
        display:grid;
        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:10px;
        padding:10px 12px calc(10px + env(safe-area-inset-bottom));
        background:rgba(255,250,244,.92);
        backdrop-filter:blur(18px);
        border-top:1px solid rgba(234,216,200,.86);
        box-shadow:0 -12px 28px rgba(104,70,39,.08);
      }
      .mobile-tab{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:8px;
        min-height:52px;
        padding:0 14px;
        border-radius:18px;
        background:#fff;
        border:1px solid var(--line);
        color:var(--muted);
        font-weight:800;
      }
      .mobile-tab svg{
        width:18px;
        height:18px;
        flex:0 0 auto;
      }
      .mobile-tab.active{
        background:linear-gradient(135deg, rgba(255,122,69,.14), rgba(255,154,99,.22));
        color:var(--text);
        border-color:rgba(255,122,69,.28);
      }
    }
    @media (max-width: 520px){
      .container{
        width:min(var(--container), calc(100% - 22px));
      }
      .hero-copy,
      .hero-profile-card,
      .panel-card,
      .countdown-card,
      .subscribe-card,
      .cta-card{
        padding:18px;
      }
      .hero-title{
        font-size:2rem;
      }
      .hero-subtitle,
      .section-desc{
        font-size:.96rem;
      }
      .logo-text{
        max-width:11rem;
      }
      .nav-link{
        padding:10px 13px;
        font-size:.95rem;
      }
      .related-links{
        grid-template-columns:1fr;
      }
      .mobile-tabbar{
        grid-template-columns:repeat(2, minmax(0,1fr));
      }
    }