/* roulang page: index */
:root {
      --bg: #070810;
      --bg-soft: #0d1020;
      --panel: rgba(14, 16, 28, 0.84);
      --panel-strong: rgba(18, 21, 38, 0.96);
      --text: #f5f7fb;
      --muted: #a7afc6;
      --line: rgba(255, 255, 255, 0.10);
      --line-strong: rgba(255, 255, 255, 0.16);
      --brand-1: #ff4d7d;
      --brand-2: #ffb347;
      --brand-3: #36d1ff;
      --brand-4: #42d392;
      --warn: #ffcc66;
      --radius-lg: 26px;
      --radius-md: 20px;
      --radius-sm: 16px;
      --shadow: 0 28px 90px rgba(0, 0, 0, 0.40);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      color: var(--text);
      background:
        radial-gradient(1200px 650px at 15% -10%, rgba(255, 77, 125, 0.22), transparent 56%),
        radial-gradient(900px 540px at 100% 0%, rgba(54, 209, 255, 0.14), transparent 50%),
        radial-gradient(1000px 720px at 50% 110%, rgba(255, 179, 71, 0.12), transparent 56%),
        linear-gradient(180deg, #070810 0%, #090b14 55%, #070810 100%);
      font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
      line-height: 1.65;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.24), transparent 92%);
      opacity: 0.34;
    }

    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 20%, transparent 80%, rgba(255, 255, 255, 0.02));
      opacity: 0.5;
    }

    a,
    button,
    input {
      -webkit-tap-highlight-color: transparent;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

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

    button,
    input,
    textarea,
    select {
      font: inherit;
    }

    ::selection {
      background: rgba(255, 77, 125, 0.28);
      color: #fff;
    }

    .container-shell {
      width: min(1180px, calc(100% - 2rem));
      margin-inline: auto;
    }

    .panel {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(18, 21, 38, 0.88), rgba(11, 13, 24, 0.78));
      box-shadow: var(--shadow);
      border-radius: var(--radius-lg);
      backdrop-filter: blur(18px);
    }

    .panel::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 22%, transparent 78%, rgba(255, 255, 255, 0.06));
      opacity: 0.8;
    }

    .card {
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: linear-gradient(180deg, rgba(21, 24, 42, 0.96), rgba(12, 15, 26, 0.92));
      border-radius: 22px;
      transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
    }

    .card:hover {
      transform: translateY(-4px);
      border-color: rgba(255, 255, 255, 0.18);
      box-shadow: 0 26px 58px rgba(0, 0, 0, 0.32);
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 0.38rem;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.10);
      padding: 0.38rem 0.74rem;
      background: rgba(255, 255, 255, 0.05);
      color: #dce2f4;
      font-size: 0.82rem;
      line-height: 1;
      white-space: nowrap;
    }

    .badge-hot {
      background: rgba(255, 77, 125, 0.16);
      border-color: rgba(255, 77, 125, 0.28);
      color: #ffd4df;
    }

    .badge-warm {
      background: rgba(255, 179, 71, 0.15);
      border-color: rgba(255, 179, 71, 0.28);
      color: #ffe2b8;
    }

    .badge-cyan {
      background: rgba(54, 209, 255, 0.13);
      border-color: rgba(54, 209, 255, 0.24);
      color: #cff4ff;
    }

    .badge-mint {
      background: rgba(66, 211, 146, 0.13);
      border-color: rgba(66, 211, 146, 0.24);
      color: #d9ffe9;
    }

    .btn-primary,
    .btn-secondary,
    .btn-ghost {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      min-height: 48px;
      padding: 0.78rem 1.1rem;
      border-radius: 999px;
      border: 1px solid transparent;
      font-weight: 600;
      letter-spacing: 0;
      transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease, opacity 180ms ease;
      white-space: nowrap;
    }

    .btn-primary {
      color: #140812;
      background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
      box-shadow: 0 18px 34px rgba(255, 77, 125, 0.24);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 22px 40px rgba(255, 77, 125, 0.28);
    }

    .btn-primary:active {
      transform: translateY(0);
    }

    .btn-secondary {
      color: #f4f7fb;
      border-color: rgba(255, 255, 255, 0.14);
      background: rgba(255, 255, 255, 0.05);
    }

    .btn-secondary:hover {
      border-color: rgba(255, 255, 255, 0.22);
      background: rgba(255, 255, 255, 0.08);
      transform: translateY(-1px);
    }

    .btn-ghost {
      color: #d8def0;
      background: transparent;
      border-color: transparent;
    }

    .btn-ghost:hover {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.10);
    }

    .btn-primary:focus-visible,
    .btn-secondary:focus-visible,
    .btn-ghost:focus-visible,
    .chip:focus-visible,
    input:focus-visible,
    summary:focus-visible,
    a:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(54, 209, 255, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    }

    .btn-primary:disabled,
    .btn-secondary:disabled,
    .btn-ghost:disabled,
    .is-loading {
      opacity: 0.62;
      cursor: wait;
      transform: none;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 0.42rem;
      min-height: 38px;
      padding: 0.48rem 0.88rem;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.11);
      background: rgba(255, 255, 255, 0.04);
      color: #dbe2f5;
      transition: background 180ms ease, border-color 180ms ease, transform 180ms ease, color 180ms ease;
      white-space: nowrap;
    }

    .chip:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.16);
      transform: translateY(-1px);
    }

    .chip[aria-pressed="true"],
    .chip.is-active {
      background: linear-gradient(135deg, rgba(255, 77, 125, 0.20), rgba(255, 179, 71, 0.16));
      border-color: rgba(255, 77, 125, 0.28);
      color: #fff;
    }

    .nav-scroll::-webkit-scrollbar,
    .chip-scroll::-webkit-scrollbar {
      height: 8px;
    }

    .nav-scroll::-webkit-scrollbar-thumb,
    .chip-scroll::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.16);
      border-radius: 999px;
    }

    .section-title {
      font-size: clamp(1.35rem, 2.1vw, 2rem);
      line-height: 1.15;
      letter-spacing: 0;
    }

    .section-desc {
      color: var(--muted);
      max-width: 60ch;
    }

    .step-track::after {
      content: "";
      position: absolute;
      left: 1.1rem;
      right: 1.1rem;
      top: 1.55rem;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
      pointer-events: none;
    }

    details summary::-webkit-details-marker {
      display: none;
    }

    .faq-item[open] {
      border-color: rgba(255, 255, 255, 0.16);
      box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
    }

    .faq-icon {
      transition: transform 180ms ease;
    }

    .faq-item[open] .faq-icon {
      transform: rotate(180deg);
    }

    .progress-bar {
      height: 0.55rem;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.08);
    }

    .progress-fill {
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--brand-1), var(--brand-2), var(--brand-3));
      box-shadow: 0 0 18px rgba(255, 77, 125, 0.18);
    }

    .tag-wall {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .fade-bottom {
      -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent);
      mask-image: linear-gradient(180deg, #000 72%, transparent);
    }

    @media (max-width: 1024px) {
      .container-shell {
        width: min(1180px, calc(100% - 1.4rem));
      }
    }

    @media (max-width: 768px) {
      .section-title {
        font-size: 1.4rem;
      }

      .panel {
        border-radius: 22px;
      }
    }

    @media (max-width: 520px) {
      .btn-primary,
      .btn-secondary,
      .btn-ghost {
        width: 100%;
      }

      .chip {
        min-height: 36px;
      }
    }

/* roulang page: category1 */
:root{
  --bg:#070810;
  --bg-soft:#0c1020;
  --panel:rgba(13,18,32,.78);
  --panel-strong:rgba(16,22,40,.92);
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.14);
  --text:#e5e7eb;
  --muted:#9ca3af;
  --soft:#cbd5e1;
  --rose:#fb7185;
  --coral:#f97316;
  --gold:#f59e0b;
  --moss:#10b981;
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(251,113,133,.22), transparent 60%),
    radial-gradient(900px 500px at 92% 8%, rgba(245,158,11,.16), transparent 55%),
    linear-gradient(180deg, #05060b 0%, #090b14 42%, #070810 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity:.22;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.72), transparent 88%);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
::selection{background:rgba(251,113,133,.28);color:#fff}
.container-shell{
  width:min(100%, 1240px);
  margin-inline:auto;
  padding-inline:1rem;
}
@media (min-width:640px){
  .container-shell{padding-inline:1.5rem;}
}
@media (min-width:1024px){
  .container-shell{padding-inline:2rem;}
}
.nav-scroll{
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.18) transparent;
}
.nav-scroll::-webkit-scrollbar{height:6px}
.nav-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px}
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft, 0 18px 60px rgba(0,0,0,.30));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.panel-strong{
  background:var(--panel-strong);
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow-soft, 0 18px 60px rgba(0,0,0,.30));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.card-surface{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-xl);
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.card-surface:hover{
  transform: translateY(-3px);
  border-color:rgba(251,113,133,.35);
  box-shadow: 0 22px 60px rgba(0,0,0,.30);
}
.card-cover{
  background:
    linear-gradient(135deg, rgba(251,113,133,.95), rgba(249,115,22,.88) 48%, rgba(245,158,11,.86)),
    linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,0));
}
.card-cover-alt{
  background:
    linear-gradient(135deg, rgba(249,115,22,.92), rgba(251,113,133,.80) 52%, rgba(16,185,129,.70));
}
.card-cover-dark{
  background:
    linear-gradient(135deg, rgba(12,16,32,.95), rgba(39,39,42,.86));
}
.btn-primary,
.btn-secondary,
.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  border-radius:18px;
  padding:.78rem 1rem;
  font-weight:600;
  line-height:1;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, opacity .2s ease;
  border:1px solid transparent;
  outline:none;
}
.btn-primary{
  color:#fff;
  background:linear-gradient(135deg, #fb7185, #f97316 52%, #f59e0b);
  box-shadow: 0 14px 34px rgba(249,115,22,.22);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 18px 42px rgba(249,115,22,.28)}
.btn-primary:active{transform:translateY(0)}
.btn-secondary{
  color:#fff;
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.10);
}
.btn-secondary:hover{background:rgba(255,255,255,.08);border-color:rgba(251,113,133,.30)}
.btn-ghost{
  color:#dbe3ee;
  background:transparent;
  border-color:rgba(255,255,255,.08);
}
.btn-ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost:focus-visible,
.chip:focus-visible,
input:focus-visible,
textarea:focus-visible{
  box-shadow:0 0 0 3px rgba(251,113,133,.22);
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  border-radius:999px;
  padding:.7rem .95rem;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:#d8e0ea;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, color .2s ease;
  white-space:nowrap;
}
.chip:hover{
  border-color:rgba(251,113,133,.34);
  background:rgba(251,113,133,.09);
  color:#fff;
  transform:translateY(-1px);
}
.chip.is-active{
  background:linear-gradient(135deg, rgba(251,113,133,.18), rgba(249,115,22,.15));
  border-color:rgba(251,113,133,.46);
  color:#fff;
  box-shadow:0 10px 30px rgba(251,113,133,.12);
}
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:.28rem .55rem;
  font-size:.72rem;
  font-weight:700;
  line-height:1;
  border:1px solid transparent;
}
.badge-hot{
  color:#fff;
  background:rgba(251,113,133,.18);
  border-color:rgba(251,113,133,.34);
}
.badge-warm{
  color:#fff;
  background:rgba(245,158,11,.18);
  border-color:rgba(245,158,11,.34);
}
.badge-soft{
  color:#d8e0ea;
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.10);
}
.section-kicker{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:#f8c9d2;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
}
.section-title{
  color:#fff;
  font-size:clamp(1.4rem, 2vw, 2rem);
  line-height:1.15;
  font-weight:800;
  letter-spacing:0;
}
.section-lead{
  color:var(--muted);
  font-size:.98rem;
}
.metric{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  padding:1rem;
}
.metric-num{
  font-size:1.45rem;
  font-weight:800;
  color:#fff;
  line-height:1.1;
}
.metric-label{
  margin-top:.2rem;
  color:var(--muted);
  font-size:.82rem;
}
.progress-track{
  width:100%;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.progress-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--rose), var(--coral), var(--gold));
  box-shadow:0 0 24px rgba(249,115,22,.26);
}
.faq-item{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  border-radius:22px;
  overflow:hidden;
}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  padding:1rem 1.1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  color:#fff;
  font-weight:700;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary span:last-child{
  color:#cbd5e1;
  transition:transform .2s ease;
}
.faq-item[open] summary span:last-child{transform:rotate(45deg)}
.faq-body{
  padding:0 1.1rem 1rem;
  color:var(--muted);
  font-size:.95rem;
}
.footer-link{
  color:#9ca3af;
  transition:color .2s ease;
}
.footer-link:hover{color:#fff}
input.search-field{
  width:100%;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:#fff;
  padding:.92rem 1rem;
  outline:none;
}
input.search-field::placeholder{color:#7f8a99}

/* roulang page: category2 */
:root{
  --bg: #05060b;
  --bg-soft: #0a0d16;
  --surface: rgba(12, 16, 28, .86);
  --surface-2: rgba(16, 21, 37, .94);
  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);
  --text: #e2e8f0;
  --muted: #94a3b8;
  --soft: #cbd5e1;
  --rose: #fb7185;
  --gold: #f59e0b;
  --cyan: #22d3ee;
  --shadow: 0 18px 60px rgba(3, 7, 18, .42);
  --radius: 24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  background:
    linear-gradient(180deg, rgba(251,113,133,.08), rgba(251,113,133,0) 20%),
    linear-gradient(135deg, rgba(245,158,11,.08), rgba(245,158,11,0) 32%),
    linear-gradient(180deg, #05060b 0%, #070a13 52%, #05060b 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.04) 0, rgba(255,255,255,0) 38%),
    linear-gradient(225deg, rgba(34,211,238,.05) 0, rgba(34,211,238,0) 28%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0, rgba(255,255,255,.015) 1px, transparent 1px, transparent 120px);
  opacity:.85;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
::selection{background:rgba(251,113,133,.35);color:#fff}
.container-shell{
  width:min(1280px, calc(100% - 2rem));
  margin-inline:auto;
}
.no-scrollbar::-webkit-scrollbar{display:none}
.no-scrollbar{scrollbar-width:none}
.shadow-soft{box-shadow:var(--shadow)}
.card-shell,
.card{
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(18,24,40,.92), rgba(11,14,24,.92));
  box-shadow:var(--shadow);
  backdrop-filter: blur(18px);
}
.panel{
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(15,20,34,.82), rgba(8,11,18,.92));
  backdrop-filter: blur(18px);
}
.btn-primary,
.btn-secondary,
.btn-ghost,
.chip,
.badge,
.filter-btn,
.page-btn,
.select-field,
.search-field{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border-radius:999px;
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease, opacity .18s ease;
}
.btn-primary{
  border:1px solid rgba(251,113,133,.45);
  background:linear-gradient(135deg, rgba(251,113,133,1), rgba(245,158,11,1));
  color:#fff;
  box-shadow:0 14px 34px rgba(251,113,133,.24);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 18px 40px rgba(251,113,133,.28)}
.btn-secondary{
  border:1px solid var(--border-strong);
  background:rgba(255,255,255,.05);
  color:#f8fafc;
}
.btn-secondary:hover{transform:translateY(-1px);border-color:rgba(251,113,133,.35);background:rgba(251,113,133,.08)}
.btn-ghost{
  border:1px solid transparent;
  background:transparent;
  color:#e2e8f0;
}
.btn-ghost:hover{transform:translateY(-1px);background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.06)}
.btn-primary:active,.btn-secondary:active,.btn-ghost:active,.chip:active,.filter-btn:active,.page-btn:active{transform:translateY(0)}
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost:focus-visible,
.chip:focus-visible,
.filter-btn:focus-visible,
.page-btn:focus-visible,
.search-field:focus-visible,
.select-field:focus-visible,
input:focus-visible{
  outline:2px solid rgba(34,211,238,.55);
  outline-offset:2px;
}
.chip{
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  color:#dbe4ef;
  padding:.72rem 1rem;
}
.chip:hover{border-color:rgba(251,113,133,.32);background:rgba(251,113,133,.08);transform:translateY(-1px)}
.chip.is-active{
  background:linear-gradient(135deg, rgba(251,113,133,.96), rgba(245,158,11,.92));
  border-color:transparent;
  color:#fff;
  box-shadow:0 14px 26px rgba(251,113,133,.18);
}
.badge{
  padding:.34rem .62rem;
  font-size:.75rem;
  line-height:1;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.06);
  color:#dbe4ef;
}
.badge-hot{background:rgba(251,113,133,.18);border-color:rgba(251,113,133,.35);color:#ffd3da}
.badge-warm{background:rgba(245,158,11,.16);border-color:rgba(245,158,11,.34);color:#ffe8ba}
.badge-cyan{background:rgba(34,211,238,.14);border-color:rgba(34,211,238,.32);color:#cbfbff}
.badge-soft{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08);color:#d7e0eb}
.badge-rose{background:rgba(251,113,133,.12);border-color:rgba(251,113,133,.22);color:#ffd1d9}
.filter-btn{
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.04);
  color:#dbe4ef;
  padding:.55rem .95rem;
}
.filter-btn:hover{border-color:rgba(251,113,133,.3);background:rgba(251,113,133,.08)}
.filter-btn.is-active{
  background:linear-gradient(135deg, rgba(251,113,133,.95), rgba(245,158,11,.9));
  border-color:transparent;
  color:#fff;
}
.page-btn{
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  color:#e2e8f0;
  padding:.7rem 1rem;
}
.page-btn:hover{background:rgba(255,255,255,.07);border-color:rgba(251,113,133,.28)}
.page-btn[disabled]{
  opacity:.45;
  cursor:not-allowed;
}
.search-field,
.select-field{
  width:100%;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(6,10,18,.65);
  color:#f8fafc;
  padding:.9rem 1rem;
}
.search-field::placeholder{color:#7c8aa0}
.select-field{
  appearance:none;
  padding-right:2.4rem;
}
.section-band{
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}
.grid-card{
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg, rgba(12,16,28,.95), rgba(9,12,20,.95));
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 16px 38px rgba(3,7,18,.28);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.grid-card:hover{
  transform:translateY(-2px);
  border-color:rgba(251,113,133,.28);
  box-shadow:0 18px 44px rgba(3,7,18,.36);
}
.grid-card .thumb{
  position:relative;
  min-height:120px;
  overflow:hidden;
  background:
    linear-gradient(135deg, rgba(251,113,133,.28), rgba(245,158,11,.12) 58%, rgba(34,211,238,.12)),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
}
.grid-card .thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,.3) 100%);
}
.grid-card .thumb-band{
  position:absolute;
  inset:18px 18px auto 18px;
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
}
.grid-card .body{
  padding:1rem;
}
.line-clamp-2{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
summary{
  list-style:none;
}
summary::-webkit-details-marker{display:none}
details{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  border-radius:20px;
  overflow:hidden;
}
details[open]{
  border-color:rgba(251,113,133,.28);
  background:rgba(251,113,133,.05);
}
details summary{
  cursor:pointer;
  padding:1rem 1.1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  color:#f8fafc;
}
details .faq-body{
  padding:0 1.1rem 1rem 1.1rem;
  color:#cbd5e1;
  line-height:1.75;
}
.metric{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  border-radius:22px;
  padding:1rem;
}
.progress-track{
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
}
.progress-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(251,113,133,.95), rgba(245,158,11,.95), rgba(34,211,238,.9));
}
@media (max-width: 767px){
  .container-shell{width:min(100% - 1rem, 1280px)}
}