:root {
  --green-900: #0f3f2b;
  --green-700: #116c43;
  --green-500: #3f9665;
  --green-100: #dceee4;
  --red: #e43d30;
  --gold: #f5cf4b;
  --panel: #c6dfc1;
  --panel-2: #e8f2e5;
  --line: #7ca889;
  --ink: #172c22;
  --muted: #5d715f;
  --field: #f8fbff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  background:
    linear-gradient(180deg, rgba(15, 63, 43, 0.18), transparent 260px),
    repeating-linear-gradient(90deg, rgba(17, 108, 67, 0.05) 0 1px, transparent 1px 42px),
    #eef5eb;
}

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

.app-shell {
  width: min(1480px, calc(100vw - 24px));
  margin: 0 auto;
  padding: 16px 0 32px;
}

.titlebar {
  min-height: 92px;
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  color: #fff;
  background: linear-gradient(100deg, var(--green-900), var(--green-700) 62%, #9b231f);
  border: 2px solid #e8f7ed;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 18px 50px rgba(15, 63, 43, 0.18);
}

.brand-mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  color: var(--green-900);
  background: var(--gold);
  border: 3px solid #fff;
  border-radius: 50%;
  font-size: 28px;
  font-weight: 900;
}

.titlebar p,
.titlebar h1 {
  margin: 0;
}

.titlebar p {
  color: #d9f4e6;
  font-size: 14px;
}

.titlebar h1 {
  margin-top: 4px;
  font-size: 34px;
  letter-spacing: 0;
}

.vip-box {
  display: grid;
  grid-template-columns: auto 150px auto;
  align-items: center;
  gap: 8px;
}

.vip-box span {
  color: var(--gold);
  font-weight: 800;
}

.main-grid {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 12px;
  align-items: start;
}

.draw-panel,
.tool-panel {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.draw-panel {
  padding: 14px;
}

.panel-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.panel-title h2,
.panel-title p,
h3 {
  margin: 0;
}

.panel-title p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.button-stack,
.action-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tool-button {
  min-height: 34px;
  padding: 0 14px;
  color: var(--ink);
  background: linear-gradient(#ffffff, #dfe9dc);
  border: 1px solid #6f9479;
  border-radius: 3px;
  cursor: pointer;
}

.tool-button.primary {
  color: #fff;
  background: linear-gradient(#e95447, #b8251f);
  border-color: #9b231f;
}

input,
select,
textarea {
  width: 100%;
  min-height: 32px;
  color: var(--ink);
  background: var(--field);
  border: 1px solid #91a79b;
  border-radius: 2px;
}

input,
select {
  padding: 0 8px;
}

textarea {
  padding: 9px;
  resize: vertical;
}

.latest-card {
  min-height: 124px;
  padding: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--green-700), #1d8b58);
  border: 1px solid #0c4a30;
}

.latest-card span,
.latest-card small {
  color: #e5f8ec;
}

.balls {
  display: flex;
  gap: 8px;
  margin: 14px 0;
}

.balls b {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--red);
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 24px;
}

.draw-table {
  max-height: 680px;
  overflow: auto;
  margin-top: 12px;
  background: #fff;
  border: 1px solid var(--line);
}

.draw-row {
  display: grid;
  grid-template-columns: 70px 92px repeat(5, 38px);
  min-height: 34px;
  align-items: center;
  border-bottom: 1px solid #d1e2d4;
}

.draw-row.group-line {
  border-top: 3px solid var(--red);
}

.draw-row span,
.draw-row em,
.draw-row b {
  min-height: 34px;
  display: grid;
  place-items: center;
  border-right: 1px solid #c2d7c8;
}

.draw-row em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}

.draw-row b {
  color: var(--red);
  font-size: 19px;
}

.tabs {
  display: flex;
  gap: 0;
  padding: 8px 8px 0;
  background: #d7ead2;
  border-bottom: 1px solid var(--line);
}

.tab {
  min-width: 92px;
  min-height: 34px;
  background: linear-gradient(#ffffff, #d8e5d5);
  border: 1px solid var(--line);
  border-bottom: 0;
  cursor: pointer;
}

.tab.active {
  background: var(--panel);
  outline: 1px dotted var(--green-900);
  outline-offset: -5px;
}

.tab.locked {
  color: #8b9388;
}

.tab.locked::after {
  content: " VIP";
  color: var(--red);
  font-size: 11px;
}

.tool-layout {
  display: grid;
  grid-template-columns: minmax(540px, 1fr) 470px;
  gap: 10px;
  padding: 10px;
}

.left-board,
.right-board {
  min-width: 0;
}

.control-strip {
  display: grid;
  grid-template-columns: 150px 100px 1fr 1fr;
  gap: 10px;
  padding: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}

label {
  color: #234232;
  font-size: 13px;
}

.tab-page {
  display: none;
  min-height: 460px;
  margin-top: 10px;
  padding: 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}

.tab-page.active {
  display: block;
}

.tab-page h3 {
  margin-bottom: 10px;
  color: #123f2c;
}

.position-matrix {
  display: grid;
  gap: 7px;
}

.pos-row {
  display: grid;
  grid-template-columns: 42px repeat(4, minmax(80px, 1fr));
  gap: 7px;
  align-items: center;
}

.position-matrix.compact .pos-row {
  grid-template-columns: 42px 1fr 1fr;
}

.pos-row strong {
  text-align: center;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 12px;
}

.pair-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(105px, 1fr));
  gap: 8px;
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.check-grid label {
  display: flex;
  align-items: center;
  gap: 7px;
}

.check-grid input {
  width: 16px;
  min-height: 16px;
}

.hint {
  margin: 12px 0 0;
  color: #b8251f;
  font-size: 13px;
}

.box {
  margin-bottom: 10px;
  padding: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}

.box h3 {
  margin-bottom: 7px;
}

#conditionText {
  min-height: 126px;
}

#resultItems {
  min-height: 248px;
  line-height: 1.8;
}

.result-counts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

.result-counts span {
  padding: 9px;
  background: #fff;
  border: 1px solid #a8bbaa;
}

.result-counts b {
  color: var(--red);
  font-size: 22px;
}

.pattern-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pattern-stats span {
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #a8bbaa;
}

.pattern-stats b {
  margin-right: 8px;
  color: var(--red);
}

.vip-notice {
  min-height: 54px;
  margin: 10px 0 0;
  padding: 10px;
  color: #b8251f;
  background: #f4f0d8;
  border: 1px solid #d1be73;
}

.shake {
  animation: shake 0.35s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

@media (max-width: 1120px) {
  .main-grid,
  .tool-layout {
    grid-template-columns: 1fr;
  }

  .draw-row {
    grid-template-columns: 74px 96px repeat(5, 1fr);
  }
}

@media (max-width: 720px) {
  .app-shell {
    width: min(100vw - 12px, 1480px);
  }

  .titlebar,
  .vip-box,
  .control-strip,
  .form-grid,
  .pair-grid,
  .check-grid {
    grid-template-columns: 1fr;
  }

  .titlebar h1 {
    font-size: 25px;
  }

  .tabs {
    overflow-x: auto;
  }

  .pos-row,
  .position-matrix.compact .pos-row {
    grid-template-columns: 1fr;
  }
}