html,
body {
    margin: 0;
    padding: 0;
    background: #efefef;
    color: #333;
    font-family: "Microsoft YaHei", Arial, sans-serif;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

a {
    color: inherit;
    text-decoration: none;
}

.history-page {
    max-width: 430px;
    margin: 0 auto;
    padding: 10px 8px 18px;
}

.history-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: linear-gradient(180deg, #6a6a6a 0%, #4a4a4a 100%);
    color: #fff;
}

.history-back {
    flex: none;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.history-year-switch {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 44px 0 10px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 2px;
}

.history-year-switch select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.history-year-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -7px;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(45deg);
}

.history-panel {
    margin-top: 8px;
    border: 2px solid #ff5b68;
    background: #f7f7f7;
}

.history-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    background: #fff;
    border-bottom: 1px solid #e4e4e4;
}

.history-tab {
    flex: 1;
    min-width: 20%;
    padding: 7px 4px;
    border-right: 1px solid #dcdcdc;
    background: linear-gradient(180deg, #6d6d6d 0%, #4a4a4a 100%);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    text-align: center;
    cursor: pointer;
}

.history-tab:last-child {
    border-right: 0;
}

.history-tab.is-active {
    background: linear-gradient(180deg, #ff8f3a 0%, #ff6e15 100%);
}

.history-controls {
    padding: 10px 10px 8px;
    background: #f2f2f2;
}

.history-control-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 12px;
    line-height: 1.6;
}

.history-control-row:last-child {
    margin-bottom: 0;
}

.history-control-label {
    flex: none;
    color: #ff7b00;
    font-weight: 700;
    white-space: nowrap;
}

.history-options {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
}

.history-checkbox,
.history-radio {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #777;
    white-space: nowrap;
}

.history-checkbox input,
.history-radio input {
    margin: 0;
}

.history-helper-link {
    color: #ffb500;
    font-weight: 700;
}

.history-body {
    padding-top: 8px;
}

.history-empty {
    padding: 18px 10px;
    border: 1px solid #d9d9d9;
    background: #fff;
    color: #666;
    font-size: 14px;
    text-align: center;
}

.history-record {
    margin-bottom: 8px;
    border: 1px solid #d8d8d8;
    background: #fff;
}

.history-record.is-target {
    border-color: #ff7a1f;
    box-shadow: 0 0 0 2px rgba(255, 122, 31, 0.18);
}

.history-record-title {
    padding: 7px 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f1f1f1 100%);
    color: #888;
    font-size: 13px;
}

.history-record.is-target .history-record-title {
    background: linear-gradient(180deg, #fff1df 0%, #ffe0b9 100%);
    color: #b55500;
}

.history-record-title .issue {
    color: #0b79d0;
    font-weight: 700;
}

.history-record-box {
    padding: 8px 4px 6px;
}

.history-ball-list,
.history-meta-list,
.history-mini-ball-list {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.history-ball-list {
    margin-bottom: 4px;
}

.history-ball-item,
.history-meta-item {
    width: 13%;
    text-align: center;
}

.history-ball {
    width: 42px;
    height: 42px;
    margin: 0 auto 3px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #202020;
    font-size: 22px;
    font-weight: 700;
    line-height: 42px;
}

.ball-red {
    background-image: url("../kj1/r.png");
}

.ball-blue {
    background-image: url("../kj1/b.png");
}

.ball-green {
    background-image: url("../kj1/g.png");
}

.history-ball-text {
    font-size: 12px;
    line-height: 1.2;
    color: #444;
}

.history-plus,
.history-meta-plus {
    width: 7%;
    padding-top: 5px;
    color: #d8d8d8;
    font-size: 38px;
    font-weight: 700;
    text-align: center;
}

.history-meta-row {
    margin-top: 3px;
}

.history-meta-item {
    font-size: 11px;
    line-height: 1.25;
    color: #7c7c7c;
}

.history-meta-row.is-plain-special .history-meta-item {
    color: #ff8c00;
    font-weight: 700;
}

.history-meta-row.is-zodiac .history-meta-item {
    color: #666;
}

.history-meta-row.is-wave-size .history-meta-item {
    color: #777;
}

.history-meta-row.is-odd-even .history-meta-item {
    color: #888;
}

.history-meta-row.is-family .history-meta-item {
    color: #777;
}

.history-row-summary {
    margin-top: 4px;
    padding-right: 2px;
    color: #c58300;
    font-size: 11px;
    font-weight: 700;
    text-align: right;
}

.meta-accent {
    color: #f59b00;
    font-weight: 700;
}

.meta-red {
    color: #d93025;
}

.meta-blue {
    color: #0b79d0;
}

.meta-green {
    color: #21923a;
}

.meta-jin {
    color: #d39c10;
}

.meta-mu {
    color: #24953a;
}

.meta-shui {
    color: #0c78d2;
}

.meta-huo {
    color: #e1372a;
}

.meta-tu {
    color: #8b5d2e;
}

.history-trend-card,
.history-zodiac-card,
.history-date-card,
.history-stats-card {
    margin-bottom: 8px;
    border: 1px solid #d8d8d8;
    background: #fff;
}

.history-trend-head,
.history-zodiac-head,
.history-date-head,
.history-stats-head {
    padding: 8px 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%);
    color: #666;
    font-size: 13px;
    font-weight: 700;
}

.history-trend-options {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 10px 0;
    background: #fff;
}

.history-trend-options-label {
    flex: none;
    color: #ff7b00;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.8;
    white-space: nowrap;
}

.history-trend-options-list {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
}

.history-trend-option {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #777;
    font-size: 11px;
    line-height: 1.6;
    white-space: nowrap;
}

.history-trend-option input {
    width: 12px;
    height: 12px;
    margin: 0;
    border: 1px solid #b8b8b8;
    border-radius: 50%;
    appearance: none;
    background: #fff;
    box-shadow: inset 0 0 0 2px #fff;
}

.history-trend-option input:checked {
    border-color: #2688e7;
    background: #2688e7;
}

.history-trend-option.is-active {
    color: #1c86e5;
    font-weight: 700;
}

.history-trend-box,
.history-zodiac-box,
.history-date-box,
.history-stats-box {
    padding: 8px 10px;
}

.history-trend-scroll {
    overflow-x: auto;
}

.history-trend-table {
    min-width: 1280px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 11px;
    text-align: center;
}

.history-trend-table th,
.history-trend-table td {
    border: 1px solid #e2e2e2;
    padding: 2px 1px;
    vertical-align: top;
    background: #fff;
}

.history-trend-table th {
    background: #fff8c6;
    color: #444;
    font-weight: 700;
}

.history-trend-table .trend-head-fixed,
.history-trend-table .trend-head-special {
    background: linear-gradient(180deg, #fff3a2 0%, #ffe46b 100%);
}

.history-trend-table .trend-head-col {
    background: #fffdf0;
}

.history-trend-table .trend-issue {
    color: #0b79d0;
    font-weight: 700;
}

.history-trend-table .trend-date {
    color: #777;
}

.history-trend-cell {
    color: #cfcfcf;
}

.history-trend-cell.is-hit {
    background: #fff;
}

.history-trend-cell.is-special {
    background: #fff5f5;
}

.history-trend-ball {
    width: 28px;
    height: 28px;
    margin: 0 auto 2px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #202020;
    font-size: 16px;
    font-weight: 700;
    line-height: 28px;
}

.history-trend-ball-hit {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.history-trend-note {
    min-height: 22px;
    color: #a6a6a6;
    font-size: 10px;
    line-height: 1.15;
}

.history-trend-index {
    height: 28px;
    color: #d8d8d8;
    font-size: 11px;
    line-height: 28px;
}

.history-mini-ball-list {
    align-items: center;
}

.history-mini-ball {
    width: 32px;
    height: 32px;
    margin: 0 auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #202020;
    font-size: 18px;
    font-weight: 700;
    line-height: 32px;
}

.history-mini-ball-item {
    width: 13%;
    text-align: center;
}

.history-mini-plus {
    width: 7%;
    color: #d8d8d8;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
}

.history-date-group {
    padding: 8px 0;
    border-bottom: 1px solid #ececec;
}

.history-date-group:last-child {
    border-bottom: 0;
}

.history-date-label {
    margin-bottom: 6px;
    color: #555;
    font-size: 13px;
    font-weight: 700;
}

.history-date-issues {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.history-date-issue {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 14px;
    background: #f4f4f4;
    font-size: 12px;
}

.history-date-toolbar {
    display: grid;
    grid-template-columns: 32px 1fr 32px auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.history-date-nav {
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: #f3f3f3;
    color: #666;
    font-size: 22px;
    line-height: 28px;
    cursor: pointer;
}

.history-date-toolbar-label {
    color: #666;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.history-date-now {
    color: #666;
    font-size: 12px;
    white-space: nowrap;
}

.history-date-actions {
    margin-bottom: 8px;
    text-align: center;
}

.history-date-today {
    padding: 6px 18px;
    border: 0;
    background: #f4f4f4;
    color: #666;
    font-size: 13px;
    cursor: pointer;
}

.history-calendar-week,
.history-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.history-calendar-week div {
    padding: 7px 0;
    background: #1ca1e9;
    border-right: 1px solid #fff;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.history-calendar-week div:last-child {
    border-right: 0;
}

.history-calendar-cell {
    min-height: 66px;
    padding: 6px 3px;
    border-right: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    background: #fff;
    text-align: center;
}

.history-calendar-cell.is-muted {
    color: #c8c8c8;
    background: #fbfbfb;
}

.history-calendar-cell.is-open {
    background: #79b6f7;
    color: #fff;
}

.history-calendar-cell.is-festival .history-calendar-note {
    color: #e4352f;
    font-weight: 700;
}

.history-calendar-cell.is-open.is-red {
    background: #ff8a8a;
}

.history-calendar-cell.is-open.is-blue {
    background: #79b6f7;
}

.history-calendar-cell.is-open.is-green {
    background: #7fcd89;
}

.history-calendar-day {
    margin-bottom: 2px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
}

.history-calendar-issue {
    min-height: 14px;
    margin-bottom: 2px;
    color: inherit;
    font-size: 10px;
    line-height: 1.2;
}

.history-calendar-note {
    font-size: 11px;
    line-height: 1.25;
}

.history-attr-grid,
.history-stats-grid,
.history-compare-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.history-attr-item,
.history-stats-item,
.history-compare-item {
    padding: 8px;
    border: 1px solid #ececec;
    border-radius: 6px;
    background: #fafafa;
}

.history-attr-item strong,
.history-stats-item strong,
.history-compare-item strong {
    display: block;
    margin-bottom: 4px;
    color: #444;
    font-size: 13px;
}

.history-attr-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.history-tag {
    display: inline-block;
    padding: 3px 7px;
    border-radius: 12px;
    background: #fff;
    color: #666;
    font-size: 12px;
}

.history-tag.issue {
    background: #fff4de;
    color: #c57800;
}

.history-stats-value {
    color: #f08b00;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
}

.history-stats-sub {
    color: #888;
    font-size: 12px;
}

.history-stats-icons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}

.history-stats-icon {
    text-align: center;
}

.history-stats-icon span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-bottom: 4px;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

.history-stats-icon em {
    display: block;
    color: #666;
    font-size: 12px;
    font-style: normal;
}

.icon-wave {
    background: linear-gradient(180deg, #f8c53a 0%, #f34b8f 100%);
}

.icon-zodiac {
    background: linear-gradient(180deg, #ff9d37 0%, #ff5d15 100%);
}

.icon-five {
    background: linear-gradient(180deg, #ff5f6d 0%, #ffb347 100%);
}

.icon-count {
    background: linear-gradient(180deg, #ff6996 0%, #ffb31a 100%);
}

.history-stats-sections {
    margin-top: 10px;
    border-top: 1px solid #ececec;
}

.history-stats-row {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid #ececec;
}

.history-stats-row:last-child {
    border-bottom: 0;
}

.history-stats-row-label {
    color: #666;
    font-size: 14px;
    text-align: center;
}

.history-stats-row-balls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.history-ball-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 26px;
}

.history-text-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 4px 10px;
    border-radius: 13px;
    background: #f6f6f6;
    color: #666;
    font-size: 12px;
    line-height: 1.2;
}

.history-text-chip.is-soft {
    background: #f3f3f3;
}

.history-text-chip.is-highlight {
    background: #fff2d8;
    color: #ca7a00;
    font-weight: 700;
}

.history-helper-modal {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: none;
}

.history-helper-modal.is-open {
    display: block;
}

.history-helper-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.history-helper-dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(100% - 26px);
    max-width: 400px;
    max-height: 78vh;
    padding: 12px;
    overflow: auto;
    border-radius: 10px;
    transform: translate(-50%, -50%);
    background: #fff;
}

.history-helper-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.history-helper-head h3 {
    margin: 0;
    font-size: 17px;
}

.history-helper-close {
    padding: 0;
    border: 0;
    background: transparent;
    color: #999;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.history-helper-tips {
    margin-bottom: 10px;
    color: #666;
    font-size: 12px;
    line-height: 1.7;
}

.history-helper-tips p {
    margin: 0 0 4px;
}

@media (max-width: 390px) {
    .history-year-switch {
        font-size: 22px;
    }

    .history-tab {
        font-size: 12px;
    }

    .history-ball,
    .history-ball-item,
    .history-meta-item {
        width: 12.8%;
    }

    .history-ball {
        width: 38px;
        height: 38px;
        font-size: 20px;
        line-height: 38px;
    }

    .history-ball-text {
        font-size: 11px;
    }

    .history-date-toolbar {
        grid-template-columns: 28px 1fr 28px;
    }

    .history-date-now {
        grid-column: 1 / -1;
        text-align: right;
    }
}