@media (min-width: 761px) {
  body {
    overflow-x: hidden !important;
  }

  main.framework-page {
    width: min(1180px, calc(100vw - 24px)) !important;
    max-width: none !important;
    padding: 12px 0 18px !important;
    display: grid !important;
    gap: 12px !important;
  }

  .framework-topbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    align-items: stretch !important;
    margin: 0 !important;
  }

  .top-title {
    margin-top: 4px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    display: none !important;
  }

  .top-latest-draw {
    min-width: 0 !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }

  .top-latest-draw .top-latest-main {
    grid-template-columns: minmax(150px, 220px) minmax(128px, max-content) minmax(240px, 1fr) max-content !important;
    gap: 12px !important;
    min-width: 0 !important;
  }

  .top-shape-banner {
    border-radius: 8px !important;
    padding: 8px 10px !important;
  }

  .top-latest-meta {
    min-width: 0 !important;
  }

  .latest-balls {
    min-width: 0 !important;
    flex-wrap: nowrap !important;
  }

  .top-mode-action {
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  .top-lottery-display {
    display: none !important;
  }

  .top-lottery-select {
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    width: auto !important;
    min-width: 132px !important;
    max-width: none !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    border: 1px solid #d7e0ea !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #25313d !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
    pointer-events: auto !important;
  }

  .top-settings-btn.small,
  .top-theme-btn.small {
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 8px !important;
  }

  .framework-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: start !important;
    min-width: 0 !important;
  }

  .framework-column {
    display: grid !important;
    gap: 12px !important;
    min-width: 0 !important;
  }

  .framework-grid > .framework-column:first-child,
  .framework-grid > .framework-column:last-child {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: initial !important;
    justify-self: stretch !important;
  }

  .framework-column > .panel,
  .core-panel,
  .road-shell {
    min-width: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }

  .panel.road-shell {
    padding: 10px !important;
    border: 1px solid #dfe7ee !important;
    background: #ffffff !important;
  }

  .road-panel,
  .road-panel-main,
  .heat-road-panel {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .road-title {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    align-items: center !important;
    margin-bottom: 8px !important;
  }

  .road-title h2 {
    display: none !important;
  }

  .road-controls {
    display: grid !important;
    grid-template-columns: 96px repeat(5, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  .mobile-road-limit {
    display: block !important;
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    border: 1px solid #d7e0ea !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    color: #25313d !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  .mobile-road-view {
    display: inline-flex !important;
  }

  .road-controls > label,
  .road-controls [data-road-limit],
  .road-controls [data-road-mode],
  .road-controls [data-heat-metric],
  .road-controls [data-apply-road-combo],
  .road-controls input#roadLimit {
    display: none !important;
  }

  .road-quick {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
  }

  .road-chart,
  .road-panel-main .road-chart,
  .heat-road-panel .road-chart {
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .road-table,
  .heat-road-table {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 70px 136px 42px repeat(10, minmax(0, 1fr)) !important;
    border-color: #e3ebf2 !important;
    background: #ffffff !important;
  }

  .road-head,
  .road-issue,
  .road-draw,
  .road-size,
  .road-cell {
    min-height: 36px !important;
    border-color: #e3ebf2 !important;
  }

  .road-table .road-draw span,
  .heat-road-table .road-draw span {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    flex: 0 0 22px !important;
    font-size: 13px !important;
  }

  .road-dot {
    width: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
  }

  .core-panel {
    display: grid !important;
    gap: 12px !important;
    padding: 12px !important;
    overflow: visible !important;
    border-color: #dfe7ee !important;
    background: #ffffff !important;
  }

  .framework-column:first-child {
    order: 1 !important;
  }

  .framework-column:last-child {
    order: 2 !important;
  }

  #dragonTigerShell,
  #omissionShell {
    display: none !important;
  }

  .core-panel .core-recos {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .core-recos[data-draw-size="3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .core-recos > .combo-focus-wrap {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .core-recos > .repeat-compact-board,
  .core-recos > .omission-board,
  .core-recos > .triple-omission-board {
    min-width: 0 !important;
    width: 100% !important;
  }

  .combo-focus-tabhead {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    align-items: start !important;
  }

  .combo-focus-tabbar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  .combo-focus-tab-actions {
    display: none !important;
  }

  .triple-card-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .triple-focus-card {
    min-width: 0 !important;
    min-height: 82px !important;
    border-radius: 8px !important;
  }

  .triple-focus-card-main,
  .triple-focus-card-bottom {
    min-width: 0 !important;
  }

  .triple-focus-card-line {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .repeat-compact-board .repeat-compact-grid,
  .omission-board .triple-omission-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .core-group {
    display: grid !important;
    align-content: start !important;
    gap: 8px !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .core-group.one,
  .core-group.pair,
  .core-group.triple,
  .core-group.quad-code,
  .core-group.five-code,
  .core-group.size-code {
    grid-column: auto !important;
  }

  .core-group.one {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .core-group.pair,
  .core-group.triple {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .core-group.quad-code,
  .core-group.five-code,
  .core-group.size-code {
    grid-template-columns: 1fr !important;
  }

  .core-group-title {
    grid-column: 1 / -1 !important;
    min-height: 22px !important;
  }

  .core-group-title strong {
    font-size: 13px !important;
  }

  .recommend-card,
  .core-group.one .recommend-card,
  .kill-card {
    min-height: 64px !important;
    height: 64px !important;
    padding: 6px !important;
    border-radius: 8px !important;
  }

  .recommend-balls,
  .kill-card strong {
    gap: 5px !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
  }

  .recommend-balls span,
  .core-group.one .recommend-balls span,
  .core-group.triple .recommend-balls span,
  .core-group.five-code .recommend-balls span,
  .kill-card strong i {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    font-size: 15px !important;
  }

  .core-group.one .recommend-balls span {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    font-size: 17px !important;
  }

  .core-group.five-code .recommend-balls span {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    font-size: 13px !important;
  }

  .kill-panel {
    display: grid !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  .kill-cards {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .kill-group {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  .kill-toolbar {
    display: grid !important;
    grid-template-columns: 220px minmax(0, 1fr) 148px !important;
    gap: 12px !important;
    align-items: start !important;
    overflow: visible !important;
  }

  .kill-toolbar-block {
    min-width: 0 !important;
  }

  .kill-digit-list {
    display: grid !important;
    grid-template-columns: repeat(5, 36px) !important;
    gap: 7px !important;
    width: auto !important;
  }

  .kill-digit {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
  }

  .kill-shape-block .kill-options {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(78px, 1fr)) !important;
    gap: 8px !important;
  }

  .kill-shape-block .kill-toggle {
    min-width: 0 !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 8px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  .kill-summary {
    display: grid !important;
    gap: 6px !important;
    align-content: start !important;
    min-width: 0 !important;
  }

  .kill-summary span {
    white-space: normal !important;
  }

  #copyKillCombos,
  .kill-copy {
    width: 100% !important;
    max-width: none !important;
    min-height: 36px !important;
    padding: 0 10px !important;
  }

  .verify-history-panel {
    max-height: 520px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .verify-history-head.compact-verify-head,
  .verify-history-row.compact-verify-row {
    grid-template-columns: var(--verify-issue-width, 88px) var(--verify-draw-width, 148px) minmax(0, 1fr) !important;
    gap: var(--verify-main-gap, 8px) !important;
    min-height: 58px !important;
    padding: 7px 8px !important;
  }

  .verify-balls {
    display: grid !important;
    grid-template-columns: repeat(5, var(--verify-ball-size, 22px)) !important;
    gap: var(--verify-ball-gap, 4px) !important;
    justify-content: start !important;
    align-items: center !important;
  }

  .verify-ball {
    width: var(--verify-ball-size, 22px) !important;
    height: var(--verify-ball-size, 22px) !important;
    min-width: var(--verify-ball-size, 22px) !important;
    font-size: 12px !important;
  }

  .verify-result-grid {
    display: grid !important;
    grid-template-columns: var(--verify-result-columns, 26px 38px 54px 78px 90px 76px 68px 34px) !important;
    gap: var(--verify-result-gap, 4px) !important;
    align-items: center !important;
    justify-content: end !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .verify-result-grid > span {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 3px !important;
    min-width: 0 !important;
  }

  .verify-result-grid > span:nth-child(4),
  .verify-result-grid > span:nth-child(5),
  .verify-result-grid > span:nth-child(7),
  .verify-result-grid > span:nth-child(8) {
    flex-wrap: nowrap !important;
  }

  .verify-combo-chip {
    min-height: 23px !important;
    padding: 3px 5px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .verify-combo-chip.slim,
  .verify-combo-chip.size-chip {
    min-width: 30px !important;
    text-align: center !important;
  }
}

@media (min-width: 761px) and (max-width: 1320px) {
  main.framework-page {
    width: min(1180px, calc(100vw - 18px)) !important;
  }

  .framework-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .core-panel .core-recos {
    gap: 8px !important;
  }

  .recommend-balls span,
  .core-group.one .recommend-balls span,
  .core-group.triple .recommend-balls span,
  .kill-card strong i {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    font-size: 14px !important;
  }

  .core-group.five-code .recommend-balls span {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    font-size: 12px !important;
  }

  .kill-toolbar {
    grid-template-columns: 210px minmax(0, 1fr) 128px !important;
  }

  .kill-shape-block .kill-options {
    grid-template-columns: repeat(4, minmax(68px, 1fr)) !important;
  }
}

@media (min-width: 1500px) {
  .framework-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .road-table,
  .heat-road-table {
    grid-template-columns: 76px 150px 46px repeat(10, minmax(0, 1fr)) !important;
  }

  .verify-history-head.compact-verify-head,
  .verify-history-row.compact-verify-row {
    min-height: 64px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .verify-ball {
    font-size: 14px !important;
  }

  .verify-combo-chip {
    min-height: 27px !important;
    padding: 4px 8px !important;
    font-size: 15px !important;
  }
}