.weekly-page.record-page,
.weekly-page.year-page {
  background: linear-gradient(135deg, #3a3a3a 0%, #3f3f3f 50%, #353535 100%) !important;
}

.record-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 12px 15px;
  gap: 8px;
  flex-wrap: wrap;
}
.record-nav a {
  padding: 10px 18px;
  background: linear-gradient(135deg, #d36305 0%, #ff8a2a 100%);
  color: #fff !important;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: clamp(0.68rem, 2.6vw, 0.85rem);
  box-shadow: 0 3px 8px rgba(211,99,5,.3);
  border: 1px solid rgba(255,255,255,.1);
}
.record-nav a:hover {
  background: linear-gradient(135deg, #ff8a2a 0%, #d36305 100%);
  transform: translateY(-1px);
}
@media (max-width: 480px) {
  .record-nav a { padding: 8px 10px; }
}

.record-page .result353,
.year-page .result353 {
  text-align: center;
  margin: 8px 12px 12px;
  font-size: clamp(1.1rem, 4.6vw, 1.65rem);
  font-weight: 900;
  letter-spacing: 1px;
  color: #ffb05b;
  text-transform: uppercase;
  font-family: "Times New Roman", Times, serif;
  text-shadow: 0 0 5px #d36305, 0 0 12px #d36305, 0 0 20px #ff8a2a;
}
@media (max-width: 480px) {
  .record-page .result353,
  .year-page .result353 { letter-spacing: 0; }
}

.record-page .seo-intro {
  max-width: 950px;
  margin: 10px auto 16px;
  padding: 0 16px;
  color: #ddd;
  font-size: clamp(0.85rem, 3.2vw, 1.05rem);
  line-height: 1.7;
  text-align: center;
}

.export-btn {
  display: inline-block;
  margin: 0 0 10px;
  padding: 8px 14px;
  border: 0;
  border-radius: 4px;
  background: linear-gradient(135deg, #d36305, #ff8a2a);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.record-mix {
  width: 100%;
  max-width: 980px;
  margin: 20px auto;
  padding: 0 8px;
  box-sizing: border-box;
}
.record-mix .monthly-chart {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
  background: linear-gradient(135deg, #1a0f0f 0%, #2a1a1a 100%);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0,0,0,.4);
  border: 2px solid #3a2a1a;
}
.record-mix .monthly-chart.mix-cols-6 { min-width: 0; }
.record-mix .chart-header {
  background: linear-gradient(135deg, #d36305 0%, #ff8a2a 100%);
  text-align: center;
  padding: 15px;
}
.record-mix .chart-title1 {
  color: #fff;
  font-size: clamp(0.8rem, 3.2vw, 1.25rem);
  font-weight: 700;
  margin: 0 0 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0,0,0,.5);
}
.record-mix .chart-subtitle {
  color: #ffd700;
  font-size: clamp(0.75rem, 2.8vw, 1rem);
  font-weight: 600;
  margin: 0;
}
.record-mix .column-header {
  color: #ffb05b;
  padding: 12px 8px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  font-size: clamp(0.65rem, 2.6vw, 0.9rem);
  background: linear-gradient(135deg, #2a1a1a 0%, #3a2a2a 100%);
  border-bottom: 2px solid #d36305;
  border-right: 1px solid #3a2a2a;
}
.record-mix .column-header.focused-column {
  background: linear-gradient(135deg, #ffd700, #ffc107) !important;
  color: #000 !important;
  font-weight: 900;
  text-shadow: none;
  box-shadow: inset 0 0 8px rgba(255,255,255,.8);
}
.record-mix .date-cell {
  color: #ffb05b;
  padding: 10px 8px;
  text-align: center;
  font-weight: 600;
  font-size: clamp(0.78rem, 3.2vw, 1.05rem);
  background: rgba(0,0,0,.2);
  border-right: 1px solid #3a2a2a;
  border-bottom: 1px solid #3a2a2a;
}
.record-mix .result-cell {
  color: #fff;
  padding: 10px 8px;
  text-align: center;
  font-weight: 700;
  font-size: clamp(0.78rem, 3.2vw, 1.05rem);
  border-right: 1px solid #3a2a2a;
  border-bottom: 1px solid #3a2a2a;
  background: rgba(255,255,255,.05);
  cursor: pointer;
  text-shadow: 0 0 5px rgba(255,255,255,.3);
}
.record-mix .result-cell.focused-column {
  background: rgba(255, 215, 0, .08);
}
.record-mix .result-cell.missing {
  color: #ff6b6b;
  opacity: .85;
  cursor: default;
  pointer-events: none;
}
.record-mix .doubled {
  color: #FF7F7F;
  font-weight: 900;
  font-size: clamp(0.85rem, 3.5vw, 1.2rem);
}
.record-mix .nav-row {
  background: linear-gradient(135deg, #1a0f0f 0%, #2a1a1a 100%);
  border-top: 3px solid #d36305;
}
.record-mix .nav-cell {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
.record-mix .month-nav-btn {
  display: block;
  width: 100%;
  padding: 18px 10px;
  font-size: clamp(0.72rem, 3vw, 1.1rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-align: center;
  color: #ffb05b !important;
  background: linear-gradient(135deg, rgba(211,99,5,.2) 0%, rgba(211,99,5,.4) 100%);
}
.record-mix .month-nav-btn:hover {
  background: linear-gradient(135deg, #d36305, #ff8a2a);
  color: #fff !important;
}
.record-mix .month-nav-btn.prev-btn { border-right: 2px solid #d36305; }
.record-mix .month-nav-btn.next-btn { border-left: 2px solid #d36305; }
.record-mix .month-nav-btn.disabled {
  pointer-events: none;
  opacity: .5;
  background: linear-gradient(135deg, #555 0%, #777 100%);
  color: #ccc !important;
}
.record-mix .user-marked {
  background: linear-gradient(135deg, #ffd700, #ffc107) !important;
  color: #000 !important;
  font-weight: 900;
  box-shadow: 0 0 15px rgba(255,215,0,.9), inset 0 0 8px rgba(255,255,255,.8);
  border-radius: 4px;
}
@media (max-width: 768px) {
  .record-nav { margin: 8px 6px 12px; gap: 6px; }
  .record-page .seo-intro { padding: 0 10px; }
  .record-mix .column-header { padding: 10px 6px; font-size: 12px; }
  .record-mix .date-cell, .record-mix .result-cell { padding: 6px 4px; font-size: 17px; }
  .record-mix .doubled { font-size: 19px; }
  .record-mix .month-nav-btn { padding: 15px 8px; letter-spacing: 0; }
}
@media (max-width: 480px) {
  .record-mix .column-header { padding: 8px 4px; font-size: 13px; }
  .record-mix .date-cell, .record-mix .result-cell { padding: 4px 2px; font-size: 16px; }
}

.year-wrap {
  margin: 20px auto;
  max-width: 1100px;
  padding: 15px 8px;
  background: linear-gradient(135deg, #1a0f0f, #2a1a1a);
  border-radius: 4px;
  border: 2px solid #3a2a1a;
  box-sizing: border-box;
}
.year-wrap .chart-title {
  text-align: center;
  color: #ffb05b;
  font-size: clamp(0.95rem, 3.8vw, 1.5rem);
  font-weight: bold;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 2px solid #d36305;
}
.year-wrap .chart-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
  background: rgba(0,0,0,.3);
  border-radius: 4px;
  overflow: hidden;
}
.year-wrap .chart-table th {
  background: linear-gradient(135deg, #d36305, #ff8a2a);
  color: #fff;
  padding: 8px 4px;
  font-weight: bold;
  font-size: clamp(0.7rem, 2.4vw, 0.85rem);
}
.year-wrap .chart-table td {
  padding: 8px 4px;
  text-align: center;
  border: 1px solid #3a2a1a;
  background: rgba(255,255,255,.05);
  font-size: clamp(0.7rem, 2.4vw, 0.85rem);
  font-weight: bold;
}
.year-wrap .chart-table .date-cell {
  background: rgba(211,99,5,.2);
  color: #ffb05b;
  font-weight: bold;
  font-size: clamp(0.65rem, 2.2vw, 0.8rem);
}
.year-wrap .chart-table .number-cell { color: #fff; }
.year-wrap .chart-table .number-cell.doubled {
  background: linear-gradient(135deg, red, #b01f1f) !important;
  color: #fff !important;
  font-weight: 900 !important;
  border-radius: 4px;
  font-size: clamp(0.7rem, 2.4vw, 0.9rem) !important;
}
@media (max-width: 640px) {
  .year-wrap { padding: 10px 4px; overflow-x: visible; }
  .year-wrap .chart-table { min-width: 0; width: 100%; table-layout: fixed; }
  .year-wrap .chart-table th,
  .year-wrap .chart-table td { padding: 6px 1px; font-size: 11px; }
}

.record-seo {
  margin: 22px auto 30px;
  max-width: 900px;
  padding: 20px 18px;
  background: radial-gradient(circle at top left, #2c1a1a, #140b0b 60%);
  border-radius: 4px;
  border: 1px solid #3a2a2a;
  color: #f5e2c8;
  line-height: 1.7;
}
.record-seo h2 {
  font-size: clamp(0.95rem, 3.5vw, 1.25rem);
  margin: 6px 0 10px;
  color: #ffb05b;
  text-transform: uppercase;
}
.record-seo p { margin: 6px 0 10px; font-size: clamp(0.85rem, 3.1vw, 1rem); }