.rulebook-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 26px;
  align-items: end;
  margin-bottom: 14px;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-top: 4px solid #263f35;
  border-radius: 6px;
  background: var(--card);
}
.rulebook-hero h2 { margin-bottom: 9px; font-size: 26px; }
.rulebook-hero > div > p:last-child { max-width: 760px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.rulebook-stamp { display: grid; gap: 4px; padding-left: 18px; border-left: 1px solid var(--line); }
.rulebook-stamp small, .rulebook-stamp span { color: var(--muted); font-size: 9px; }
.rulebook-stamp b { color: #263f35; font-size: 17px; font-variant-numeric: tabular-nums; }
.rule-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 14px; border: 1px solid var(--line); border-radius: 6px; background: #f7f8f5; overflow: hidden; }
.rule-principles article { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: start; min-height: 58px; padding: 11px 13px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rule-principles article:nth-child(3n) { border-right: 0; }
.rule-principles article:nth-last-child(-n+3) { border-bottom: 0; }
.rule-principles b { color: #7b8a82; font-size: 9px; }
.rule-principles span { font-size: 10px; line-height: 1.55; }
.rulebook-tabs { position: sticky; top: 0; z-index: 12; display: flex; gap: 6px; margin-bottom: 22px; padding: 9px 0; background: rgba(238,240,238,.94); backdrop-filter: blur(9px); overflow-x: auto; }
.rulebook-tabs button { flex: none; padding: 7px 11px; font-size: 10px; }
.rulebook-tabs button.active { border-color: #263f35; background: #263f35; color: #fff; }
.rulebook-content { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 34px; }
.rule-section { min-width: 0; }
.rule-section-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 12px; padding-bottom: 9px; border-bottom: 1px solid #bec7c1; }
.rule-section-head span { color: var(--muted); font-size: 9px; text-align: right; }
.formal-rule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rule-card { position: relative; padding: 17px; border: 1px solid var(--line); border-left: 4px solid #66736c; border-radius: 6px; background: var(--card); }
.rule-card.a10 { border-left-color: #5d342a; }.rule-card.a13 { border-left-color: #d35d55; }.rule-card.a15 { border-left-color: #9f302d; }
.rule-card.a2 { border-left-color: #d7953f; }.rule-card.a2-strong { border-left-color: #b96726; }.rule-card.b { border-left-color: #3f7fbd; }.rule-card.c { border-left-color: #805eb3; }.rule-card.c-watch { border-left-color: #8b7b9f; }.rule-card.d { border-left-color: #2f766f; }
.rule-card.e1 { border-left-color: #65746d; }.rule-card.e2 { border-left-color: #2d6951; }.rule-card.e3 { border-left-color: #174d3a; }
.rule-card-head { display: flex; gap: 12px; align-items: flex-start; }
.rule-card-head h3 { margin: 0 0 5px; font-size: 15px; }
.rule-card-head p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.rule-code { display: grid; place-items: center; min-width: 46px; height: 34px; border: 1px solid currentColor; border-radius: 4px; color: #31463c; font-size: 14px; font-weight: 800; }
.rule-requirements { display: grid; gap: 7px; margin: 14px 0 0; padding: 0; list-style: none; }
.rule-requirements li { position: relative; padding-left: 14px; color: #37423d; font-size: 10px; line-height: 1.55; }
.rule-requirements li::before { content: ""; position: absolute; left: 0; top: .58em; width: 5px; height: 5px; border: 1px solid #6c7d73; border-radius: 50%; }
.rule-relation { display: grid; grid-template-columns: 60px 1fr; gap: 8px; margin-top: 14px; padding-top: 10px; border-top: 1px dashed #d9ddd9; font-size: 9px; line-height: 1.55; }
.rule-relation b { color: #5b6c63; }.rule-relation span { color: var(--muted); }
.intraday-rule-ladder { display: grid; grid-template-columns: repeat(5, minmax(170px, 1fr)); gap: 22px; overflow-x: auto; padding-bottom: 5px; }
.intraday-rule { position: relative; min-width: 170px; padding: 14px; border: 1px solid var(--line); border-top: 3px solid #9a793d; border-radius: 6px; background: var(--card); }
.intraday-rule.formal { border-top-color: #22664a; background: #f4f8f5; }
.stage-order { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; color: #778079; font-size: 9px; }
.stage-order i { display: block; width: 28px; height: 1px; background: #c8cec9; }
.stage-kind { flex: none; padding: 3px 5px; border-radius: 3px; background: #f2e7d2; color: #785b25; font-size: 8px; font-weight: 750; }
.formal .stage-kind { background: #dfeee6; color: #1f6848; }
.intraday-rule .rule-card-head { display: grid; gap: 8px; }
.intraday-rule .rule-card-head h3 { font-size: 12px; }
.stage-connector { position: absolute; right: -18px; top: 48%; color: #8c9690; }
.risk-rule-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.risk-rule-group { padding: 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.risk-rule-group > h3 { margin: 0 0 10px; color: #7f3b35; font-size: 12px; }
.risk-rule-group > div { display: grid; gap: 7px; }
.risk-rule-group article { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 9px; border: 1px solid #e5ddd9; border-radius: 5px; background: #faf6f4; }
.risk-rule-label { font-size: 10px; font-weight: 750; }.risk-rule-group code { color: #9a625c; font-size: 8px; }
.risk-rule-group p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.limit-rule-grid { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: 8px; }
.limit-rule { padding: 14px; border: 1px solid var(--line); border-top: 3px solid #6b776f; border-radius: 6px; background: var(--card); }
.limit-rule > b { font-size: 18px; }.limit-rule h3 { margin: 6px 0 9px; font-size: 11px; }.limit-rule p { min-height: 43px; margin: 0 0 9px; color: var(--muted); font-size: 9px; line-height: 1.55; }.limit-rule small { font-size: 8px; }
.limit-rule-5 { border-top-color: #8b3d34; }.limit-rule-10 { border-top-color: #315943; }.limit-rule-20 { border-top-color: #345f91; }.limit-rule-30 { border-top-color: #75548e; }.limit-rule-none { border-top-color: #8b6b31; }
.quality-rule-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.quality-rule { display: grid; grid-template-columns: 95px 1fr; gap: 15px; padding: 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.quality-rule > div { display: grid; align-content: center; justify-items: center; border-right: 1px solid var(--line); }
.quality-rule > div b { font-size: 34px; }.quality-rule > div span { color: var(--muted); font-size: 9px; }
.grade-a > div b { color: #1e6748; }.grade-b > div b { color: #3c6487; }.grade-c > div b { color: #8a6b34; }
.quality-rule .rule-requirements { margin: 0; align-content: center; }
.quality-score-note { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 9px; }
.quality-score-note > div { padding: 14px; border: 1px solid var(--line); border-radius: 6px; background: #f7f8f5; }
.quality-score-note h3 { margin: 0 0 8px; font-size: 11px; }.quality-score-note ul { margin: 0; padding-left: 16px; color: var(--muted); font-size: 9px; line-height: 1.7; }
.quality-score-note code { display: inline-flex; margin: 2px; padding: 4px 6px; border-radius: 4px; background: #e8ece9; color: #3a5548; font-size: 8px; }
.change-rule-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.change-rule-grid article { padding: 13px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.change-rule-grid b { font-size: 11px; }.change-rule-grid p { margin: 7px 0 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.external-rule-grid { display: grid; grid-template-columns: minmax(280px, 760px); }
.external-rule-grid .rule-card { border-left-color: #8a6a31; background: #fbf8f1; }
.e-backtest-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.e-backtest-kpis article { display: grid; gap: 5px; padding: 13px; border: 1px solid var(--line); border-top: 3px solid #2d6951; border-radius: 6px; background: var(--card); }
.e-backtest-kpis span, .e-backtest-kpis small { color: var(--muted); font-size: 9px; }
.e-backtest-kpis b { color: #244f3e; font-size: 18px; font-variant-numeric: tabular-nums; }
.e-backtest-table { min-width: 840px; }
.backtest-boundary { display: grid; grid-template-columns: 110px 1fr; gap: 14px; margin-top: 10px; padding: 12px 14px; border: 1px solid #d4ddd7; border-radius: 6px; background: #f4f8f5; font-size: 10px; line-height: 1.6; }
.backtest-boundary span { color: var(--muted); }

@media (max-width: 1200px) {
  .risk-rule-groups { grid-template-columns: repeat(2, 1fr); }
  .limit-rule-grid { grid-template-columns: repeat(3, 1fr); }
  .e-backtest-kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 850px) {
  .rulebook-hero { grid-template-columns: 1fr; padding: 18px; }
  .rulebook-stamp { padding: 12px 0 0; border: 0; border-top: 1px solid var(--line); }
  .rule-principles, .formal-rule-grid, .risk-rule-groups, .quality-rule-grid, .quality-score-note, .change-rule-grid { grid-template-columns: 1fr; }
  .rule-principles article, .rule-principles article:nth-child(3n), .rule-principles article:nth-last-child(-n+3) { border-right: 0; border-bottom: 1px solid var(--line); }
  .rule-principles article:last-child { border-bottom: 0; }
  .limit-rule-grid { grid-template-columns: repeat(2, 1fr); }
  .e-backtest-kpis { grid-template-columns: repeat(2, 1fr); }
  .rule-section-head { align-items: flex-start; flex-direction: column; gap: 5px; }
  .rule-section-head span { text-align: left; }
}
@media (max-width: 480px) {
  .limit-rule-grid { grid-template-columns: 1fr; }
  .quality-rule { grid-template-columns: 74px 1fr; }
}