/* G4 only: keep shared ball colors, branding, and theme variables. */
.g4-guide .page-shell, .g4-guide .guide-article > *, .g4-guide .page-title-card > div { min-width: 0; }
.g4-guide .page-title-card { padding: 16px 0; }
.g4-guide .guide-article,
.g4-guide.dark .guide-article {
  background: transparent; border: 0; box-shadow: none; backdrop-filter: none;
  padding: 0; gap: 32px; min-width: 0; overflow-wrap: anywhere;
}
.g4-guide h1, .g4-guide h2, .g4-guide h3 { overflow-wrap: anywhere; }
.g4-guide .guide-article h2 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); line-height: 1.4; }
.g4-guide .guide-article p { color: var(--text); }
.g4-guide .g4-lead { max-width: 42rem; font-size: 1.08rem; }
.g4-guide .g4-lead strong { color: var(--pickle-dark); }
.g4-guide .g4-visual { min-width: 0; display: grid; gap: 16px; }
.g4-guide .guide-body-card {
  display: grid; min-width: 0; gap: inherit; padding: 20px;
  border-radius: var(--radius-lg); background: var(--surface);
}
.g4-guide .guide-body-card > * { min-width: 0; }
.g4-guide .g4-example-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.g4-guide .g4-example-heading a { color: var(--pickle-dark); font-size: .9rem; font-weight: 700; }
.g4-guide .g4-draw-meta { font-variant-numeric: tabular-nums; }
.g4-guide .g4-winning { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 0; }
.g4-guide .g4-winning .lotto-ball { width: 54px; height: 54px; flex: 0 0 54px; font-size: 1.2rem; }
.g4-guide .g4-bonus { font-size: .92rem; }
.g4-guide .g4-example-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 4px; }
.g4-guide figure { margin: 0; min-width: 0; }
.g4-guide .g4-ratio-card { padding: 22px; border-radius: var(--radius-md); background: var(--surface-strong); }
.g4-guide .g4-ratio-card figcaption { font-size: 1rem; font-weight: 800; }
.g4-guide .g4-ratio { display: flex; align-items: start; justify-content: center; gap: 24px; padding: 16px 0; line-height: 1.1; }
.g4-guide .g4-ratio > strong { display: grid; justify-items: center; gap: 8px; font-size: 2.8rem; font-weight: 900; }
.g4-guide .g4-ratio > span { font-size: 2rem; padding-top: 6px; color: var(--pickle-dark); }
.g4-guide .g4-ratio small { font-size: .9rem; font-weight: 600; }
.g4-guide .g4-split-bar { display: flex; height: 8px; border-radius: 6px; overflow: hidden; background: var(--line); }
.g4-guide .g4-split-bar span:first-child { background: var(--pickle-dark); }
.g4-guide .g4-split-bar span:last-child { background: var(--accent); }
.g4-guide .g4-group-list { display: grid; gap: 6px; margin-top: 16px; }
.g4-guide .g4-number-group { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: .88rem; line-height: 1.5; }
.g4-guide .g4-number-group strong { font-weight: 700; }
.g4-guide .g4-number-group span { font-variant-numeric: tabular-nums; }
.g4-guide .g4-legend { font-size: .88rem; line-height: 1.6; }
.g4-guide .g4-definitions { display: grid; gap: 10px; padding-block: 20px; border-block: 1px solid var(--line); }
.g4-guide .g4-definitions p { font-size: .94rem; line-height: 1.7; }
.g4-guide .g4-definitions strong { color: var(--pickle-dark); }
.g4-guide .g4-statistics { gap: 18px; }
.g4-guide .g4-periods { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.g4-guide .g4-periods legend { padding: 0; margin-bottom: 10px; font-size: .9rem; font-weight: 700; }
.g4-guide .g4-period-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.g4-guide .g4-period-input + label { display: grid; place-items: center; text-align: center; min-height: 44px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; line-height: 1.4; }
.g4-guide .g4-period-input:checked + label { border-color: var(--pickle-dark); background: var(--surface-strong); font-weight: 800; box-shadow: inset 0 -3px 0 var(--pickle-dark); }
.g4-guide .g4-period-input:focus-visible + label, .g4-guide .g4-table-scroll:focus-visible, .g4-guide summary:focus-visible { outline: 3px solid var(--pickle-dark); outline-offset: 3px; }
.g4-guide .g4-panels { grid-column: 1 / -1; min-width: 0; }
.g4-guide .g4-period-panel { display: none; }
.g4-guide #g4-period-10:checked ~ .g4-panels [data-period="10"],
.g4-guide #g4-period-30:checked ~ .g4-panels [data-period="30"],
.g4-guide #g4-period-50:checked ~ .g4-panels [data-period="50"],
.g4-guide #g4-period-all:checked ~ .g4-panels [data-period="all"] { display: grid; gap: 14px; padding-top: 12px; }
.g4-guide .g4-period-summary { font-size: .94rem; font-weight: 700; color: var(--pickle-dark); }
.g4-guide .g4-axis-note { font-size: .88rem; line-height: 1.6; }
.g4-guide .g4-bars { display: grid; gap: 16px; list-style: none; margin: 14px 0 6px; padding: 0; }
.g4-guide .g4-bar-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: .94rem; line-height: 1.5; }
.g4-guide .g4-bar-heading strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.g4-guide .g4-bar-heading strong span { font-weight: 500; }
.g4-guide .g4-bar-track { height: 18px; background: var(--surface-strong); border-radius: 5px; margin-top: 7px; overflow: hidden; }
.g4-guide .g4-bar-track span { display: block; height: 100%; background: var(--pickle-dark); border-radius: 4px; }
.g4-guide .g4-table-details { min-width: 0; border-block: 1px solid var(--line); margin-top: 6px; }
.g4-guide .g4-table-details summary { cursor: pointer; padding: 16px 4px; min-height: 48px; font-size: .95rem; font-weight: 700; }
.g4-guide .g4-table-details summary::marker { color: var(--pickle-dark); }
.g4-guide .g4-table-details summary small { margin-left: 8px; font-size: .85rem; font-weight: 500; }
.g4-guide .g4-table-details[open] summary { color: var(--pickle-dark); }
.g4-guide .g4-table-scroll { min-width: 0; max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 14px; }
.g4-guide table { min-width: 480px; font-size: .94rem; }
.g4-guide caption { white-space: normal; font-size: .98rem; line-height: 1.6; }
.g4-guide caption small { display: block; font-size: .86rem; font-weight: 500; }
.g4-guide td { font-variant-numeric: tabular-nums; }
.g4-guide .g4-period-note { font-size: .88rem; line-height: 1.6; padding-bottom: 16px; }
.g4-guide .g4-observation { font-size: .94rem; }
.g4-guide .g4-reading { display: grid; gap: 22px; }
.g4-guide .g4-reading > div { display: grid; gap: 8px; }
.g4-guide .g4-reading h3 { font-size: 1.03rem; line-height: 1.5; }
.g4-guide .g4-reading p { font-size: .96rem; line-height: 1.75; }
.g4-guide .g4-caution { border-left: 3px solid var(--pickle-dark); padding-left: 16px; }
.g4-guide .related-guides { display: grid; gap: 12px; padding-top: 22px; border-top: 1px solid var(--line); }
.g4-guide .related-guides ul { display: flex; flex-wrap: wrap; gap: 12px 24px; padding: 0; margin: 0; list-style: none; }
.g4-guide .related-guides a { color: var(--pickle-dark); font-weight: 700; }
.g4-guide .g4-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 600px) {
  .g4-guide .guide-article { gap: 26px; }
  .g4-guide .g4-winning { gap: 8px; }
  .g4-guide .g4-winning .lotto-ball { width: 44px; height: 44px; flex-basis: 44px; font-size: 1rem; }
  .g4-guide .g4-example-summary { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .g4-guide .g4-ratio-card { padding: 18px 20px; }
  .g4-guide .g4-ratio { padding: 12px 0; }
  .g4-guide .g4-group-list { margin-top: 12px; }
  .g4-guide .g4-periods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g4-guide th, .g4-guide td { padding: 10px; }
}
@media (max-width: 300px) {
  .g4-guide .brand { max-width: 100%; }
  .g4-guide .brand span { min-width: 0; overflow-wrap: anywhere; }
  .g4-guide .brand strong { white-space: normal; overflow-wrap: anywhere; }
  .g4-guide .header-actions { flex-wrap: wrap; gap: 4px 8px; }
  .g4-guide .header-nav-link { white-space: normal; }
  .g4-guide .g4-ratio-card { padding: 14px 12px; }
  .g4-guide .g4-ratio { gap: 14px; }
  .g4-guide .g4-ratio > strong { font-size: 2.3rem; }
  .g4-guide .g4-period-input + label { padding: 6px 4px; }
  .g4-guide .bottom-actions .soft-button { min-width: 0; max-width: 100%; }
}
@media (forced-colors: active) {
  .g4-guide .g4-bar-track span, .g4-guide .g4-split-bar span:first-child { background: Highlight; forced-color-adjust: none; }
  .g4-guide .g4-split-bar span:last-child { background: GrayText; forced-color-adjust: none; }
  .g4-guide .g4-period-input:checked + label { outline: 2px solid Highlight; }
}
@media print {
  .g4-guide table { min-width: 0; }
  .g4-guide .g4-period-panel { display: grid; gap: 14px; break-inside: avoid; }
  .g4-guide .g4-period-input + label { display: none; }
  .g4-guide .g4-table-scroll { overflow: visible; }
  .g4-guide th, .g4-guide td { white-space: normal; }
}