:root {
    --history-blue: #1769b0;
    --history-blue-soft: #eaf3fc;
    --history-text: #172033;
    --history-muted: #64748b;
    --history-line: #dce6f1;
    --history-surface: #ffffff;
}

.history-page {
    padding-top: 32px;
    padding-bottom: 52px;
}

.history-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.history-heading > div:first-child {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.history-heading-icon {
    display: inline-grid;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    place-items: center;
    border-radius: 8px;
    color: var(--history-blue);
    background: var(--history-blue-soft);
}

.history-heading h1 {
    margin: 0;
    color: var(--history-text);
    font-size: 1.45rem;
    font-weight: 750;
}

.history-heading p {
    margin: 4px 0 0;
    color: var(--history-muted);
    font-size: 0.88rem;
}

.history-primary-action,
.tool-history-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 15px;
    border-radius: 7px;
    color: #fff;
    background: var(--history-blue);
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.history-primary-action:hover,
.tool-history-link:hover { color: #fff; background: #115a99; }

.tool-history-link { min-height: 0; margin-top: 5px; padding: 4px 8px; font-size: 0.72rem; }

.history-current-balance {
    min-width: 180px;
    padding-left: 18px;
    border-left: 1px solid var(--history-line);
    text-align: right;
}
.history-current-balance span { display: block; color: var(--history-muted); font-size: 0.75rem; }
.history-current-balance strong { color: var(--history-blue); font-size: 1.08rem; }

.history-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 16px;
    padding: 5px;
    border: 1px solid var(--history-line);
    border-radius: 8px;
    background: var(--history-surface);
}

.history-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    border-radius: 6px;
    color: #516078;
    font-size: 0.84rem;
    font-weight: 650;
    text-decoration: none;
}
.history-nav a:hover { color: var(--history-blue); background: #f4f8fc; }
.history-nav a.active { color: var(--history-blue); background: var(--history-blue-soft); }

.history-filter,
.history-panel {
    overflow: hidden;
    margin-bottom: 16px;
    border: 1px solid var(--history-line);
    border-radius: 8px;
    background: var(--history-surface);
}

.history-filter summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 16px;
    color: #344258;
    cursor: pointer;
    list-style: none;
    font-size: 0.86rem;
    font-weight: 700;
}
.history-filter summary::-webkit-details-marker { display: none; }
.history-filter summary > span { display: flex; align-items: center; gap: 8px; }
.history-filter[open] summary > .ui-icon { transform: rotate(180deg); }

.history-filter-body {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 12px;
    padding: 14px 16px 16px;
    border-top: 1px solid #edf2f7;
}
.history-filter-wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.history-filter-compact { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
.history-filter-body label { display: grid; gap: 5px; min-width: 0; }
.history-filter-body label > span { color: #536177; font-size: 0.72rem; font-weight: 700; }
.history-filter-body input,
.history-filter-body select {
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 11px;
    border: 1px solid #cfdbe8;
    border-radius: 6px;
    outline: 0;
    color: var(--history-text);
    background: #fff;
    font-size: 0.82rem;
}
.history-filter-body input:focus,
.history-filter-body select:focus { border-color: #6fa9da; box-shadow: 0 0 0 3px rgba(23, 105, 176, 0.09); }
.history-filter-actions { display: flex; align-items: end; gap: 8px; }
.history-filter-wide .history-filter-actions { grid-column: span 1; }
.history-filter-actions button,
.history-filter-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 13px;
    border: 0;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
}
.history-filter-actions button { color: #fff; background: var(--history-blue); }
.history-filter-actions a { color: #526177; background: #eef3f8; }

.history-panel > header {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    border-bottom: 1px solid var(--history-line);
}
.history-panel > header > div { display: flex; align-items: baseline; gap: 10px; }
.history-panel > header h2 { margin: 0; color: var(--history-text); font-size: 1rem; font-weight: 750; }
.history-panel > header span { color: var(--history-muted); font-size: 0.75rem; }
.history-table-wrap { overflow-x: auto; }
.history-table { width: 100%; border-collapse: collapse; color: #344258; font-size: 0.8rem; }
.history-table th { padding: 11px 14px; color: #526177; background: #f5f8fb; font-size: 0.68rem; font-weight: 750; text-transform: uppercase; white-space: nowrap; }
.history-table td { padding: 14px; border-top: 1px solid #edf2f7; vertical-align: top; }
.history-table tbody tr:first-child td { border-top: 0; }
.history-table tbody tr:hover { background: #fafcff; }
.history-table .is-refunded-row { background: #fffafa; }
.history-table time { display: grid; gap: 2px; white-space: nowrap; color: #3d4a5f; font-weight: 650; }
.history-table time small { color: var(--history-muted); font-weight: 500; }
.exchange-ledger th:nth-child(2) { width: 30%; }
.purchase-ledger th:nth-child(4) { width: 32%; }
.withdraw-ledger th:nth-child(2) { width: 25%; }
.balance-ledger th:nth-child(2) { width: 27%; }

.history-id,
.history-kind,
.history-money,
.history-product-meta,
.history-balance-values,
.withdraw-account { display: grid; gap: 3px; }
.history-id strong { color: var(--history-blue); font-size: 0.9rem; }
.history-id span,
.history-product-meta span,
.history-money span,
.history-money small,
.withdraw-account span,
.withdraw-account small { color: var(--history-muted); font-size: 0.73rem; }
.history-provider,
.history-source-title { display: block; margin-bottom: 5px; color: var(--history-text); font-size: 0.84rem; }
.history-muted { display: block; margin-top: 4px; color: var(--history-muted); font-size: 0.7rem; line-height: 1.35; }
.history-money strong { color: var(--history-text); font-size: 0.91rem; }
.history-money b { color: var(--history-blue); font-size: 0.76rem; }
.history-secret { display: grid; gap: 5px; }
.history-secret > span,
.delivered-card-list article > span,
.withdraw-account > span:nth-child(2) { display: grid; grid-template-columns: 42px minmax(0, 1fr) 25px; align-items: center; gap: 5px; color: var(--history-muted); font-size: 0.7rem; }
.withdraw-account > span:nth-child(2) { grid-template-columns: minmax(0, 1fr) 25px; }
.history-secret code,
.delivered-card-list code,
.withdraw-account code { overflow-wrap: anywhere; color: #8f3333; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; }
.withdraw-account code {
    min-width: 0;
    overflow-x: auto;
    overflow-wrap: normal;
    white-space: nowrap;
    scrollbar-width: none;
}
.withdraw-account code::-webkit-scrollbar { display: none; }
.withdraw-transfer-content {
    display: grid;
    gap: 4px;
    margin-top: 5px;
    padding-top: 7px;
    border-top: 1px dashed #d8e3ee;
}
.withdraw-transfer-content > span {
    color: #77869a;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
}
.withdraw-transfer-content > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 25px;
    align-items: center;
    gap: 5px;
}
.withdraw-transfer-content code {
    color: #315676;
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 650;
    line-height: 1.4;
    overflow: visible;
    overflow-wrap: anywhere;
    white-space: normal;
}
[data-history-copy] { display: inline-grid; width: 25px; height: 25px; padding: 0; place-items: center; border: 1px solid #d6e2ee; border-radius: 5px; color: var(--history-blue); background: #fff; }
[data-history-copy].is-copied { color: #087a55; border-color: #9edac5; background: #ecfaf4; }
.history-status { display: inline-flex; align-items: center; min-height: 27px; padding: 0 9px; border-radius: 999px; font-size: 0.69rem; font-weight: 750; white-space: nowrap; }
.history-status.is-success { color: #08724f; background: #def7ec; }
.history-status.is-pending { color: #8a5a00; background: #fff2c7; }
.history-status.is-danger { color: #ad2c2c; background: #fee8e7; }
.delivered-card-list { display: grid; gap: 7px; }
.delivered-card-list article { display: grid; gap: 4px; padding: 8px; border: 1px solid #dce9f5; border-radius: 6px; background: #f7fbff; }
.delivered-card-list article b { color: #344258; font-size: 0.72rem; }
.history-refund-note,
.history-wait-note { display: block; max-width: 260px; color: #a12d2d; font-size: 0.73rem; line-height: 1.45; }
.history-wait-note { color: #7b5b15; }
.history-kind { grid-template-columns: 32px minmax(0, 1fr); align-items: center; }
.history-kind > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 6px; color: var(--history-blue); background: var(--history-blue-soft); }
.history-kind strong { color: var(--history-text); font-size: 0.78rem; }
.history-kind small { color: var(--history-muted); font-size: 0.68rem; }
.history-change { white-space: nowrap; font-size: 0.86rem; }
.history-change.is-credit { color: #087a55; }
.history-change.is-debit { color: #c23d3d; }
.history-balance-values strong { color: var(--history-text); }

.history-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 13px 16px; border-top: 1px solid var(--history-line); }
.history-pagination a,
.history-pagination > span { display: inline-flex; min-height: 34px; align-items: center; gap: 4px; padding: 0 10px; border: 1px solid #d6e2ee; border-radius: 6px; color: #405068; background: #fff; font-size: 0.75rem; font-weight: 650; text-decoration: none; }
.history-pagination .history-page-count { border-color: transparent; color: var(--history-muted); }
.history-pagination .disabled { opacity: 0.45; }
.history-pagination .is-back { transform: rotate(180deg); }
.history-empty { display: grid; min-height: 230px; place-items: center; align-content: center; gap: 7px; padding: 30px; color: #90a0b4; text-align: center; }
.history-empty strong { color: #435168; font-size: 0.9rem; }
.history-empty span { font-size: 0.78rem; }

@media (min-width: 769px) {
    .history-filter:not([open]) > .history-filter-body { display: grid; }
    .history-filter summary > .ui-icon { display: none; }
}

@media (max-width: 768px) {
    .history-page { padding: 18px 12px 34px; }
    .history-heading { align-items: flex-start; gap: 10px; }
    .history-heading-icon { width: 40px; height: 40px; flex-basis: 40px; }
    .history-heading h1 { font-size: 1.12rem; }
    .history-heading p { display: none; }
    .history-primary-action { min-height: 38px; padding: 0 10px; font-size: 0.75rem; }
    .history-current-balance { min-width: 0; padding-left: 10px; }
    .history-current-balance strong { font-size: 0.88rem; white-space: nowrap; }
    .history-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
        padding: 4px;
    }
    .history-nav a {
        min-width: 0;
        min-height: 40px;
        gap: 6px;
        padding: 5px 8px;
        font-size: 0.75rem;
        line-height: 1.2;
        text-align: center;
    }
    .history-nav a .ui-icon { flex: 0 0 auto; }
    .history-filter summary { min-height: 45px; padding: 0 13px; }
    .history-filter-body,
    .history-filter-wide,
    .history-filter-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
    .history-filter-actions { grid-column: 1 / -1; }
    .history-filter-actions button,
    .history-filter-actions a { flex: 1; }
    .history-panel > header { min-height: 52px; padding: 0 13px; }
    .history-table-wrap { overflow: visible; }
    .history-table,
    .history-table tbody,
    .history-table tr,
    .history-table td { display: block; width: 100%; }
    .history-table thead { display: none; }
    .history-table tbody { padding: 9px; }
    .history-table tr { overflow: hidden; margin-bottom: 9px; border: 1px solid var(--history-line); border-radius: 7px; background: #fff; }
    .history-table tr:last-child { margin-bottom: 0; }
    .history-table td { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; padding: 10px 11px; border-top: 1px solid #edf2f7; }
    .history-table td:first-child { border-top: 0; }
    .history-table td::before {
        content: attr(data-label);
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        color: #7a8799;
        font-size: 0.67rem;
        font-weight: 700;
        text-transform: uppercase;
    }
    .history-table td > * { min-width: 0; grid-column: 2; }
    .history-cards-cell { grid-template-columns: 1fr !important; }
    .history-cards-cell::before,
    .history-cards-cell > * { grid-column: 1; grid-row: auto; }
    .history-cards-cell::before { margin-bottom: -3px; }
    .history-status { justify-self: start; }
    .history-secret { min-width: 0; }
    .history-secret > span,
    .delivered-card-list article > span { grid-template-columns: 42px minmax(0, 1fr) 28px; }
    .history-pagination { justify-content: space-between; padding: 11px; }
}

@media (max-width: 390px) {
    .history-heading > div:first-child { gap: 9px; }
    .history-primary-action .ui-icon { display: none; }
    .history-filter-body,
    .history-filter-wide,
    .history-filter-compact { grid-template-columns: 1fr; }
    .history-table td { grid-template-columns: 82px minmax(0, 1fr); }
}