:root {
  --order-green: #16ad59;
  --order-green-dark: #0d8e47;
  --order-ink: #202b40;
  --order-muted: #8b9099;
  --order-line: #dfe3e8;
  --order-canvas: #f2f3f4;
  --order-paper: #ffffff;
  --order-shadow: 0 24px 65px rgb(30 50 42 / 10%);
  color: var(--order-ink);
  background: var(--order-canvas);
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; background: var(--order-canvas); }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  display: block;
  color: var(--order-ink);
  background: var(--order-canvas);
}
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.global-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 82px;
  border-bottom: 1px solid #e1e4e8;
  background: rgb(255 255 255 / 96%);
  backdrop-filter: blur(16px);
}

.global-header-inner {
  width: min(100% - 48px, 1940px);
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.product-mark {
  display: flex;
  align-items: center;
  gap: 18px;
  color: #0c0d0f;
  text-decoration: none;
}

.product-mark strong {
  font-size: 31px;
  font-weight: 950;
  font-style: italic;
  letter-spacing: -2.4px;
  line-height: 1;
  transform: skew(-7deg);
}

.product-mark i {
  width: 1px;
  height: 32px;
  background: #d5d8dd;
}

.product-mark span {
  color: #2a3549;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .2px;
}

.header-actions { display: flex; align-items: center; gap: 36px; }
.header-actions a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #242933;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
.help-mark {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1.8px solid #2f3b4d;
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
}
.locale-mark {
  width: 34px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid #e1e4e8;
  border-radius: 4px;
  color: #3d4655;
  font-size: 13px;
  font-weight: 700;
  background: #fff;
}
.user-entry { display: inline-flex; align-items: center; gap: 7px; }
.header-actions .user-entry a {
  height: 36px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  color: #354052;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.header-actions .user-entry a.user-primary { color: #fff; background: var(--order-green); }

.site-shell {
  width: min(1180px, calc(100% - 48px));
  min-height: calc(100vh - 82px);
  margin: 0 auto;
  overflow: visible;
  color: var(--order-ink);
  background: transparent;
  box-shadow: none;
}

.lottery-tabs {
  position: relative;
  width: min(650px, 90%);
  height: 132px;
  margin: 36px auto 16px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.lottery-tabs::before {
  content: "";
  position: absolute;
  left: 25%;
  right: 25%;
  top: 27px;
  height: 3px;
  background: #16181b;
}

.lottery-tabs button {
  position: relative;
  z-index: 1;
  height: 104px;
  min-width: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  border: 0;
  border-radius: 0;
  color: #111316;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
  background: transparent;
  box-shadow: none;
}

.lottery-tabs .step-index {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 3px solid #111316;
  border-radius: 50%;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  background: #111316;
  box-shadow: 0 0 0 7px var(--order-canvas);
  transition: .18s ease;
}

body[data-lottery] .lottery-tabs button.active {
  color: #111316;
  background: transparent;
  box-shadow: none;
}

body[data-lottery] .lottery-tabs button.active .step-index {
  border-color: var(--order-green);
  color: var(--order-green);
  background: #fff;
}

.lottery-tabs button:hover .step-index {
  transform: translateY(-2px);
  box-shadow: 0 0 0 7px var(--order-canvas), 0 7px 18px rgb(20 30 40 / 12%);
}

.lottery-tabs button:focus-visible { outline: none; }
.lottery-tabs button:focus-visible .step-index { outline: 3px solid rgb(22 173 89 / 20%); outline-offset: 4px; }

.workspace-card {
  position: relative;
  margin: 0 auto 54px;
  padding: 38px;
  border: 1px solid #e6e9ec;
  border-radius: 15px;
  background: #fff;
  box-shadow:
    0 0 58px rgb(114 185 80 / 12%),
    34px 18px 70px rgb(75 170 185 / 8%),
    var(--order-shadow);
}

.page-intro {
  min-height: 142px;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid var(--order-line);
  border-radius: 12px;
  color: var(--order-ink);
  background: #fff;
  box-shadow: none;
}

.intro-copy small {
  display: block;
  margin-bottom: 8px;
  color: var(--order-green);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.1px;
}

.intro-copy h1 {
  margin: 0;
  color: var(--order-ink);
  font-size: 28px;
  font-weight: 750;
  letter-spacing: .2px;
  line-height: 1.3;
}

.intro-copy p {
  margin: 8px 0 0;
  color: var(--order-muted);
  font-size: 15px;
}

.service-status {
  min-width: 132px;
  height: 40px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid #bde7ce;
  border-radius: 999px;
  color: #177b45;
  font-size: 13px;
  font-weight: 700;
  background: #f2fbf6;
}

.service-status i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--order-green);
  box-shadow: 0 0 0 5px rgb(22 173 89 / 10%);
}

.quick-links {
  height: auto;
  margin: 22px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: none;
  gap: 10px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.quick-links button {
  position: relative;
  height: 46px;
  min-width: 0;
  padding: 0 12px;
  overflow: hidden;
  border: 1px solid var(--order-line);
  border-radius: 8px;
  color: #475164;
  font-size: 13px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  box-shadow: none;
  transition: .16s ease;
}

.quick-links button::before { display: none; }
.quick-links button:hover,
.quick-links button.active {
  border-color: var(--order-green);
  color: var(--order-green-dark);
  background: #f3fbf6;
  box-shadow: none;
  transform: none;
}
.quick-links button:focus-visible { outline: 3px solid rgb(22 173 89 / 14%); outline-offset: 1px; }

.draw-card {
  margin: 0 0 24px;
  padding: 0 26px 22px;
  overflow: hidden;
  border: 1px solid var(--order-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}

.draw-card > h2 {
  min-height: 92px;
  height: auto;
  margin: 0 -26px 0;
  padding: 20px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 0;
  border-bottom: 1px solid #e7eaed;
  border-radius: 0;
  color: var(--order-ink);
  font-size: 24px;
  font-weight: 750;
  letter-spacing: 0;
  background: #fff;
}

.draw-card > h2 small {
  margin-bottom: 7px;
  color: var(--order-green);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2.5px;
}

.draw-meta {
  min-height: 56px;
  padding: 12px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #737a86;
  font-size: 13px;
}
.draw-meta > span:first-child { margin-right: auto; color: #273247; font-weight: 700; }
.draw-meta button {
  height: 32px;
  padding: 0 13px;
  border: 1px solid var(--order-line);
  border-radius: 7px;
  color: #394357;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  background: #fff;
}
.draw-meta button:hover { border-color: var(--order-green); color: var(--order-green-dark); }

.result-row {
  width: 100%;
  padding: 18px 0 22px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 14px;
}

.result-item {
  min-width: 0;
  min-height: 104px;
  padding: 14px 5px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid #e0e4e8;
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
}
.result-item:last-child { border-color: #bde7ce; background: #f8fdf9; }
.result-ball {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 5px solid #cfd4da;
  border-radius: 50%;
  color: #222c3d;
  font-size: 17px;
  font-weight: 800;
  background: #fff;
  box-shadow: none;
}
.result-ball.color-red { border-color: #f05252; }
.result-ball.color-blue { border-color: #4285d4; }
.result-ball.color-green { border-color: var(--order-green); }
.result-item small { color: #7f8691; font-size: 11px; white-space: nowrap; }

.draw-footer {
  min-height: 48px;
  padding: 14px 0 0;
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 1px solid #e7eaed;
  color: #667080;
  font-size: 13px;
}
.draw-footer > span { margin-right: auto; }
.draw-footer time { margin-left: 5px; color: var(--order-green-dark); font-weight: 800; }
.draw-footer button {
  min-width: 92px;
  height: 36px;
  padding: 0 15px;
  border: 0;
  border-radius: 7px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  background: var(--order-green);
  box-shadow: none;
}
.draw-footer button:hover { background: var(--order-green-dark); }

.archive-content { padding: 0; background: transparent; }
.archive-section,
.source-panel {
  margin: 0 0 20px;
  overflow: hidden;
  border: 1px solid var(--order-line);
  border-radius: 11px;
  background: #fff;
  box-shadow: none;
  scroll-margin-top: 96px;
}

.archive-heading,
body[data-lottery] .source-panel-heading {
  min-height: 58px;
  height: auto;
  margin: 0;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  border: 0;
  border-bottom: 1px solid #e4e7eb;
  color: #263146;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.5;
  background: #fff;
  box-shadow: inset 4px 0 0 var(--order-green);
}

.archive-row,
.detail-row,
.kill-grid-row,
.odd-row {
  border-bottom: 1px solid #edf0f2;
  color: #4d5667;
  background: #fff;
}
.archive-row:last-child,
.detail-row:last-child,
.kill-grid-row:last-child,
.odd-row:last-child { border-bottom: 0; }
.archive-row:nth-child(odd),
.detail-row:nth-child(odd),
.kill-grid-row:nth-child(odd),
.odd-row:nth-child(odd) { background: #fafbfb; }

.archive-row {
  min-height: 46px;
  padding: 9px 16px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 82px;
  align-items: center;
  font-size: 13px;
  line-height: 26px;
}
.archive-row .issue,
.detail-top > span:first-child,
.odd-row > span:first-child { color: #7b838e; font-weight: 650; }
.archive-row .main-copy strong,
.red-copy,
.detail-row .detail-title,
.odd-row .odd-name { color: #283347; font-weight: 750; }
.archive-row .result { text-align: right; }
.open-mark {
  width: 23px;
  height: 23px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #bde7ce;
  border-radius: 50%;
  color: var(--order-green-dark);
  font-size: 11px;
  background: #f1fbf5;
}
.result-value { color: var(--order-green-dark); font-weight: 750; }

.detail-row { padding: 10px 16px; font-size: 13px; line-height: 24px; }
.detail-row .detail-top { display: grid; grid-template-columns: 58px minmax(0, 1fr) 82px; }
.detail-row .detail-top > span:last-child { text-align: right; }
.detail-row .detail-title .blue-copy { color: #48789f; }
.detail-lines { padding: 4px 0 0 58px; color: #707987; line-height: 23px; }
.detail-lines span { display: block; }

.kill-grid-row { padding: 10px 16px; font-size: 12px; }
.kill-grid-row .kill-values,
.kill-grid-row .kill-results { display: grid; grid-template-columns: 62px repeat(4, 1fr); gap: 6px; }
.kill-grid-row .kill-values span { color: #3e485a; }
.kill-grid-row .kill-values span:first-child,
.kill-grid-row .kill-results span:first-child { color: #7b838e; }
.kill-grid-row .kill-results { margin-top: 4px; color: var(--order-green-dark); }
.odd-row { padding: 10px 16px; display: grid; grid-template-columns: 62px 1fr 120px 82px; font-size: 12px; }

body[data-lottery] .source-panel-heading {
  justify-content: space-between;
  cursor: default;
}
.source-history-panel > summary { cursor: pointer; list-style: none; }
.source-history-panel > summary::-webkit-details-marker { display: none; }
.source-history-panel > summary::after {
  content: "+";
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--order-line);
  border-radius: 50%;
  color: #667080;
  font-size: 18px;
  background: #fff;
}
.source-history-panel[open] > summary::after { content: "−"; }
.source-panel-heading small {
  display: block;
  margin-bottom: 3px;
  color: var(--order-green);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.8px;
}
.source-panel-heading h2 { margin: 0; color: #263146; font-size: 15px; font-weight: 750; }
.source-panel-heading > span { margin-left: auto; margin-right: 12px; color: #8a9099; font-size: 12px; }
.source-recent-list { padding: 0 18px; }
.source-draw-row {
  min-height: 104px;
  padding: 14px 0;
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  align-items: center;
  border-bottom: 1px solid #edf0f2;
}
.source-draw-row:last-child { border-bottom: 0; }
.source-draw-title { color: #5d6675; font-size: 13px; font-weight: 700; }
.source-ball-row,
.history-ball-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(50px, 1fr));
  gap: 10px;
  overflow: visible;
  border: 0;
  background: transparent;
}
.source-ball-row .history-ball-card,
.history-ball-card {
  width: 100%;
  height: 72px;
  padding: 7px 3px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #e0e4e8;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
}
.history-ball-card.special { border-color: #bde7ce; background: #f6fcf8; }
.source-ball-row .history-number,
.history-number {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  border: 4px solid #d1d6dc;
  border-radius: 50%;
  color: #222c3d;
  font-size: 13px;
  font-weight: 800;
  background: #fff;
}
.history-number.color-red { border-color: #f05252; }
.history-number.color-blue { border-color: #4285d4; }
.history-number.color-green { border-color: var(--order-green); }
.source-ball-row .history-ball-card small,
.history-ball-card small { margin-top: 5px; color: #7f8691; font-size: 10px; line-height: 1; white-space: nowrap; }

.source-gallery-grid {
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  background: #fff;
}
.source-gallery-card {
  min-width: 0;
  padding: 0 0 12px;
  overflow: hidden;
  display: block;
  border: 1px solid #e0e4e8;
  border-radius: 9px;
  color: #2f394b;
  text-align: left;
  cursor: pointer;
  background: #fff;
  box-shadow: none;
  transition: .16s ease;
}
.source-gallery-card:hover { border-color: #a9dcbc; transform: translateY(-2px); box-shadow: 0 10px 24px rgb(30 50 42 / 9%); }
.source-gallery-card img { width: 100%; aspect-ratio: 4 / 3; display: block; object-fit: cover; background: #f0f1f2; }
.source-gallery-card span,
.source-gallery-card small { display: block; margin: 0 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-gallery-card span { margin-top: 11px; font-size: 13px; font-weight: 700; }
.source-gallery-card small { margin-top: 4px; color: #9298a1; font-size: 11px; }
.source-disclaimer { margin: -7px 0 20px; color: #9298a1; font-size: 11px; text-align: center; }

.history-page {
  width: min(1180px, calc(100% - 48px));
  min-height: calc(100vh - 82px);
  margin: 0 auto;
  padding-bottom: 44px;
  color: var(--order-ink);
  background: transparent;
  box-shadow: none;
}
.history-header {
  position: sticky;
  top: 82px;
  z-index: 20;
  height: 68px;
  margin: 0;
  display: grid;
  place-items: center;
  border-bottom: 1px solid #e1e4e8;
  color: var(--order-ink);
  background: rgb(255 255 255 / 97%);
  box-shadow: none;
}
.history-header h1 { margin: 0; color: var(--order-ink); font-size: 19px; font-weight: 750; letter-spacing: .2px; }
.history-back { left: 18px; top: 16px; width: 36px; height: 36px; border: 1px solid var(--order-line); border-radius: 8px; background: #fff; }
.history-back svg { width: 18px; stroke: #2d3748; }
.history-toolbar {
  margin: 28px 0 18px;
  padding: 22px;
  border: 1px solid var(--order-line);
  border-radius: 11px;
  background: #fff;
  box-shadow: none;
}
.history-toolbar h2 { margin: 0 0 16px; color: var(--order-ink); font-size: 20px; font-weight: 750; }
.history-toolbar h2 span { color: var(--order-green-dark); }
.history-actions { display: flex; gap: 10px; }
.history-year-buttons { min-width: 0; display: flex; flex: 1; gap: 9px; overflow-x: auto; }
.history-actions button {
  min-width: 58px;
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--order-line);
  border-radius: 7px;
  color: #667080;
  cursor: pointer;
  background: #fff;
}
.history-actions .year-button.active { border-color: var(--order-green); color: #fff; background: var(--order-green); box-shadow: none; }
.history-results { padding: 0; }
.history-draw {
  margin: 0 0 14px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--order-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
}
.history-draw h3 { margin: 0; padding: 15px 18px; border-bottom: 1px solid #e7eaed; color: #2a3447; font-size: 15px; font-weight: 750; }
.history-draw .history-ball-row { min-height: 96px; height: auto; padding: 12px 18px; }
.history-empty,
.system-loading { padding: 30px; border: 1px solid var(--order-line); border-radius: 10px; color: #7d8490; text-align: center; background: #fff; box-shadow: none; }

.info-dialog,
.gallery-dialog {
  width: min(920px, calc(100% - 30px));
  max-width: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid #dfe3e8;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 30px 90px rgb(20 30 45 / 25%);
}
.info-dialog::backdrop,
.gallery-dialog::backdrop { background: rgb(23 29 38 / 55%); backdrop-filter: blur(3px); }
.dialog-titlebar,
.gallery-dialog-bar { min-height: 60px; padding: 0 20px; display: flex; align-items: center; border-bottom: 1px solid #e4e7eb; color: #273247; background: #fff; }
.dialog-titlebar h2,
.gallery-dialog-bar strong { margin: 0; font-size: 16px; font-weight: 750; }
.dialog-titlebar button,
.gallery-dialog-bar button { width: 34px; height: 34px; margin-left: auto; border: 1px solid var(--order-line); border-radius: 8px; color: #5d6675; cursor: pointer; background: #fff; }
.dialog-content { padding: 20px; color: #495365; background: #fff; }
.gallery-dialog > img { width: 100%; max-height: calc(100vh - 100px); display: block; object-fit: contain; background: #f1f2f3; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 100;
  padding: 11px 17px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  background: rgb(31 42 57 / 94%);
  box-shadow: 0 12px 30px rgb(20 30 45 / 20%);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: .2s ease;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 30;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  background: var(--order-green);
  box-shadow: 0 10px 24px rgb(22 173 89 / 25%);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: .2s ease;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; transform: none; }

@media (max-width: 900px) {
  .workspace-card { padding: 26px; }
  .quick-links { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .source-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .source-ball-row, .history-ball-row { gap: 6px; }
}

@media (max-width: 680px) {
  .global-header { height: 64px; }
  .global-header-inner { width: calc(100% - 28px); }
  .product-mark { gap: 11px; }
  .product-mark strong { font-size: 22px; letter-spacing: -1.7px; }
  .product-mark i { height: 25px; }
  .product-mark span { max-width: 118px; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
  .header-actions { gap: 14px; }
  .header-actions a { font-size: 13px; }
  .locale-mark { width: 30px; height: 23px; }
  .header-actions .user-entry a { height: 32px; padding: 0 8px; font-size: 11px; }

  .site-shell { width: 100%; min-height: calc(100vh - 64px); }
  .lottery-tabs { width: calc(100% - 34px); height: 112px; margin: 24px auto 8px; }
  .lottery-tabs::before { top: 23px; height: 2px; }
  .lottery-tabs button { height: 90px; gap: 11px; font-size: 12px; }
  .lottery-tabs .step-index { width: 42px; height: 42px; border-width: 2px; font-size: 14px; box-shadow: 0 0 0 6px var(--order-canvas); }

  .workspace-card { margin: 0 10px 28px; padding: 14px; border-radius: 12px; }
  .page-intro { min-height: 116px; padding: 20px; gap: 12px; }
  .intro-copy small { font-size: 8px; letter-spacing: 1.5px; }
  .intro-copy h1 { font-size: 22px; }
  .intro-copy p { font-size: 12px; }
  .service-status { min-width: 104px; height: 34px; padding: 0 10px; font-size: 11px; }

  .quick-links { margin: 14px 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .quick-links button { height: 40px; font-size: 12px; }
  .draw-card { margin-bottom: 14px; padding: 0 10px 12px; }
  .draw-card > h2 { min-height: 76px; margin-inline: -10px; padding: 15px 10px; font-size: 20px; }
  .draw-meta { min-height: 52px; gap: 7px; font-size: 11px; }
  .draw-meta button { height: 29px; padding: 0 8px; font-size: 10px; }
  .result-row { gap: 4px; padding: 10px 0 14px; }
  .result-item { min-height: 78px; padding: 8px 1px 6px; gap: 5px; border-radius: 7px; }
  .result-ball { width: 36px; height: 36px; border-width: 4px; font-size: 13px; }
  .result-item small { font-size: 9px; }
  .draw-footer { align-items: flex-start; gap: 8px; font-size: 10px; line-height: 19px; }
  .draw-footer button { min-width: 72px; height: 31px; padding: 0 9px; font-size: 10px; }

  .archive-section, .source-panel { margin-bottom: 14px; }
  .archive-heading, body[data-lottery] .source-panel-heading { min-height: 52px; padding: 12px; font-size: 13px; }
  .archive-row { grid-template-columns: 52px minmax(0, 1fr) 68px; min-height: 42px; padding: 7px 9px; font-size: 11px; line-height: 24px; }
  .detail-row { padding: 8px 9px; font-size: 11px; }
  .detail-row .detail-top { grid-template-columns: 46px minmax(0, 1fr) 68px; }
  .detail-lines { padding-left: 46px; line-height: 21px; }
  .kill-grid-row { padding: 8px 9px; font-size: 10px; }
  .kill-grid-row .kill-values, .kill-grid-row .kill-results { grid-template-columns: 50px repeat(4, 1fr); gap: 3px; }
  .odd-row { grid-template-columns: 48px 1fr 88px 65px; padding: 8px 9px; font-size: 10px; }

  .source-recent-list { padding: 0 9px; }
  .source-draw-row { min-height: 90px; padding: 10px 0; display: block; }
  .source-draw-title { margin: 0 0 8px 2px; font-size: 11px; }
  .source-ball-row, .history-ball-row { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .source-ball-row .history-ball-card, .history-ball-card { height: 62px; padding-inline: 1px; }
  .source-ball-row .history-number, .history-number { width: 31px; height: 31px; border-width: 3px; font-size: 11px; }
  .source-ball-row .history-ball-card small, .history-ball-card small { font-size: 8px; }
  .source-gallery-grid { padding: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .source-gallery-card span, .source-gallery-card small { margin-inline: 9px; }
  .source-gallery-card span { font-size: 11px; }

  .history-page { width: 100%; min-height: calc(100vh - 64px); }
  .history-header { top: 64px; height: 56px; }
  .history-header h1 { font-size: 16px; }
  .history-back { left: 10px; top: 10px; }
  .history-toolbar { margin: 14px 10px 10px; padding: 14px; }
  .history-toolbar h2 { font-size: 17px; }
  .history-results { padding: 0 10px; }
  .history-draw h3 { padding: 11px 10px; font-size: 12px; }
  .history-draw .history-ball-row { min-height: 78px; padding: 9px 7px; }
  .back-to-top { right: 14px; bottom: 16px; }
}

@media (max-width: 560px) {
  .product-mark i,
  .product-mark > span { display: none; }
}

@media (max-width: 380px) {
  .header-actions a { font-size: 0; gap: 0; }
  .help-mark { font-size: 12px; }
  .locale-mark { display: none; }
  .workspace-card { margin-inline: 7px; padding: 10px; }
  .page-intro { padding: 16px 14px; }
  .service-status { min-width: 96px; padding-inline: 8px; }
  .result-ball { width: 33px; height: 33px; }
}