/* =========================================================================
   History (buyhis / buyotp / topuphis) — unified modern list
   Theme-aware via --fp-* and --main/--sub variables.
   ========================================================================= */

.hx{
    --hx-r-lg: 20px;
    --hx-r-md: 14px;
    --hx-r-sm: 10px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 6px 0 20px;
}
.hx *{ box-sizing: border-box; }

/* ---------- Shell / Header ---------- */
.hx-card{
    background: var(--fp-surface, #fff);
    border: 1px solid var(--fp-border, #e6e8ec);
    border-radius: var(--hx-r-lg);
    padding: 18px 20px;
    box-shadow: var(--fp-shadow-sm);
    color: var(--fp-text, #0f172a);
    animation: hx-opacity .3s ease both;
}
.hx-head{
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    margin-bottom: 14px;
}
.hx-title{
    display: flex; align-items: center; gap: 10px;
    font-size: 1.08rem; font-weight: 800;
    color: var(--fp-text, #0f172a); margin: 0;
}
.hx-title .hx-ico{
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--main, #4f46e5) 14%, transparent);
    color: var(--main, #4f46e5);
}
.hx-subtitle{ font-size: .82rem; color: var(--fp-text-muted, #6b7280); margin: 2px 0 0; }
.hx-pills{ display: flex; gap: 8px; flex-wrap: wrap; }
.hx-pill{
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: var(--fp-surface-alt, var(--fp-surface));
    border: 1px solid var(--fp-border, #e6e8ec);
    color: var(--fp-text-muted, #6b7280);
    font-size: .78rem; font-weight: 700; white-space: nowrap;
}
.hx-pill.success{
    color:#065f46; background: color-mix(in srgb, #10b981 14%, transparent);
    border-color: color-mix(in srgb, #10b981 35%, transparent);
}
.hx-pill.primary{
    color: var(--main, #4f46e5);
    background: color-mix(in srgb, var(--main, #4f46e5) 12%, transparent);
    border-color: color-mix(in srgb, var(--main, #4f46e5) 35%, transparent);
}
:root[data-theme="dark"] .hx-pill.success{ color:#6ee7b7; }

/* ---------- Toolbar (search + filter) ---------- */
.hx-toolbar{
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    margin-bottom: 12px;
}
.hx-search{
    flex: 1 1 220px; position: relative;
}
.hx-search input{
    width: 100%;
    background: var(--fp-surface-alt, var(--fp-surface));
    color: var(--fp-text, #0f172a);
    border: 1px solid var(--fp-border, #e6e8ec);
    border-radius: var(--hx-r-sm);
    padding: 9px 14px 9px 38px;
    font-size: .9rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.hx-search input::placeholder{ color: var(--fp-text-subtle, #8a93a4); }
.hx-search input:focus{
    outline: 0;
    border-color: var(--main, #4f46e5);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--main, #4f46e5) 15%, transparent);
}
.hx-search i{
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: var(--fp-text-muted, #6b7280); font-size: .88rem;
}
.hx-filter{
    display: flex; gap: 6px; flex-wrap: wrap;
    background: var(--fp-surface-alt, var(--fp-surface));
    border: 1px solid var(--fp-border, #e6e8ec);
    border-radius: var(--hx-r-sm);
    padding: 4px;
}
.hx-filter button{
    border: 0; background: transparent;
    padding: 7px 12px; border-radius: 8px;
    font-size: .82rem; font-weight: 700;
    color: var(--fp-text-muted, #6b7280);
    cursor: pointer; transition: all .15s ease;
}
.hx-filter button:hover{ color: var(--fp-text, #0f172a); }
.hx-filter button.active{
    background: var(--main, #4f46e5); color: #fff;
    box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--main, #4f46e5) 60%, transparent);
}

/* ---------- Row list ---------- */
.hx-list{ display: flex; flex-direction: column; gap: 10px; }
.hx-row{
    background: var(--fp-surface, #fff);
    border: 1px solid var(--fp-border, #e6e8ec);
    border-radius: var(--hx-r-md);
    padding: 14px 16px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    position: relative;
    overflow: hidden;
    animation: hx-fade .3s ease both;
}
.hx-row::after{
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--main, #4f46e5);
    opacity: 0;
    transition: opacity .18s ease;
}
.hx-row:hover{
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--main, #4f46e5) 45%, var(--fp-border));
    box-shadow: 0 8px 22px -14px color-mix(in srgb, var(--main, #4f46e5) 55%, transparent);
}
.hx-row:hover::after{ opacity: 1; }

/* Status side colors */
.hx-row.is-success::after{ background: #10b981; }
.hx-row.is-fail::after{ background: #ef4444; }
.hx-row.is-pending::after{ background: #f59e0b; }
.hx-row.is-success:hover{ border-color: color-mix(in srgb, #10b981 45%, var(--fp-border)); box-shadow: 0 8px 22px -14px rgba(16,185,129,.55); }
.hx-row.is-fail:hover{    border-color: color-mix(in srgb, #ef4444 45%, var(--fp-border)); box-shadow: 0 8px 22px -14px rgba(239,68,68,.55); }
.hx-row.is-pending:hover{ border-color: color-mix(in srgb, #f59e0b 45%, var(--fp-border)); box-shadow: 0 8px 22px -14px rgba(245,158,11,.55); }

/* Thumb */
.hx-thumb{
    width: 54px; height: 54px; flex: none;
    border-radius: 12px; object-fit: cover;
    background: var(--fp-surface-alt, var(--fp-surface));
    border: 1px solid var(--fp-border, #e6e8ec);
}
.hx-thumb-fallback{
    width: 54px; height: 54px; flex: none;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--main, #4f46e5) 12%, transparent);
    color: var(--main, #4f46e5); font-size: 1.25rem;
}

/* Main text */
.hx-main{ min-width: 0; }
.hx-name{
    font-size: .98rem; font-weight: 700; color: var(--fp-text, #0f172a);
    margin: 0 0 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hx-meta{
    display: flex; gap: 6px 14px; flex-wrap: wrap;
    font-size: .78rem; color: var(--fp-text-muted, #6b7280);
}
.hx-meta .hx-mono{ font-family: ui-monospace, Menlo, Consolas, monospace; }
.hx-meta span{ display: inline-flex; align-items: center; gap: 5px; }

/* Right block */
.hx-right{
    display: flex; flex-direction: column; align-items: flex-end;
    gap: 6px; flex: none;
}

/* Status chip */
.hx-chip{
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 999px;
    font-size: .74rem; font-weight: 800; white-space: nowrap;
    border: 1px solid transparent;
}
.hx-chip.success{ color:#065f46; background: color-mix(in srgb, #10b981 15%, transparent); border-color: color-mix(in srgb, #10b981 38%, transparent); }
.hx-chip.fail   { color:#991b1b; background: color-mix(in srgb, #ef4444 14%, transparent); border-color: color-mix(in srgb, #ef4444 38%, transparent); }
.hx-chip.pending{ color:#92400e; background: color-mix(in srgb, #f59e0b 16%, transparent); border-color: color-mix(in srgb, #f59e0b 38%, transparent); }
.hx-chip.info   { color: var(--main, #4f46e5); background: color-mix(in srgb, var(--main, #4f46e5) 12%, transparent); border-color: color-mix(in srgb, var(--main, #4f46e5) 32%, transparent); }
.hx-chip.neutral{ color: var(--fp-text-muted, #6b7280); background: var(--fp-surface-alt, var(--fp-surface)); border-color: var(--fp-border, #e6e8ec); }
:root[data-theme="dark"] .hx-chip.success{ color:#6ee7b7; }
:root[data-theme="dark"] .hx-chip.fail{ color:#fca5a5; }
:root[data-theme="dark"] .hx-chip.pending{ color:#fcd34d; }
.hx-chip.pending i.spin{ animation: hx-spin 1.1s linear infinite; }

/* Price */
.hx-price{
    font-weight: 800; font-size: 1rem; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 4px;
}
.hx-price.neg{ color: #b91c1c; }
.hx-price.pos{ color: #065f46; }
:root[data-theme="dark"] .hx-price.neg{ color:#fca5a5; }
:root[data-theme="dark"] .hx-price.pos{ color:#6ee7b7; }

/* Action button */
.hx-btn{
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--fp-border, #e6e8ec);
    background: var(--fp-surface, #fff);
    color: var(--fp-text, #0f172a);
    border-radius: var(--hx-r-sm);
    padding: 7px 14px;
    font-size: .8rem; font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
}
.hx-btn:hover:not(:disabled){
    border-color: var(--main, #4f46e5); color: var(--main, #4f46e5);
    background: color-mix(in srgb, var(--main, #4f46e5) 6%, transparent);
}
.hx-btn.primary{
    background: linear-gradient(135deg, var(--main, #4f46e5), var(--sub, #7c3aed));
    color: #fff; border-color: transparent;
}
.hx-btn.primary:hover{ filter: brightness(.93); color: #fff; }
.hx-btn:disabled{ opacity: .5; cursor: not-allowed; }

/* ---------- Empty ---------- */
.hx-empty{
    text-align: center; padding: 52px 24px;
    color: var(--fp-text-muted, #6b7280);
}
.hx-empty i{
    font-size: 2.6rem; margin-bottom: 10px;
    color: var(--fp-text-subtle, #8a93a4);
    display: inline-block;
}
.hx-empty-t{ font-weight: 700; color: var(--fp-text, #0f172a); font-size: 1rem; margin: 4px 0 4px; }
.hx-empty-d{ font-size: .85rem; }

/* ---------- Pagination ---------- */
.hx-pager{
    display: flex; gap: 10px; align-items: center; justify-content: space-between;
    flex-wrap: wrap; margin-top: 14px;
}
.hx-pager-info{ font-size: .82rem; color: var(--fp-text-muted, #6b7280); font-weight: 600; }
.hx-pager-btns{ display: flex; gap: 6px; flex-wrap: wrap; }
.hx-pg{
    background: var(--fp-surface, #fff);
    border: 1px solid var(--fp-border, #e6e8ec);
    color: var(--fp-text, #0f172a);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: .82rem; font-weight: 700; cursor: pointer;
    transition: all .15s ease;
    display: inline-flex; align-items: center; gap: 5px;
    min-width: 36px; justify-content: center;
}
.hx-pg:hover:not(:disabled){
    background: color-mix(in srgb, var(--main, #4f46e5) 10%, transparent);
    border-color: var(--main, #4f46e5); color: var(--main, #4f46e5);
}
.hx-pg:disabled{ opacity: .4; cursor: not-allowed; }
.hx-pg.active{
    background: linear-gradient(135deg, var(--main, #4f46e5), var(--sub, #7c3aed));
    color: #fff; border-color: transparent;
    box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--main, #4f46e5) 60%, transparent);
}

/* ---------- Animations ---------- */
@keyframes hx-opacity{
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes hx-fade{
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes hx-spin{ to { transform: rotate(360deg); } }

/* ---------- Responsive ---------- */
@media (max-width: 640px){
    .hx-card{ padding: 14px 12px; border-radius: 16px; }
    .hx-row{
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        padding: 12px 14px;
        gap: 10px 12px;
    }
    .hx-right{
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-top: 8px;
        border-top: 1px dashed var(--fp-border, #e6e8ec);
        width: 100%;
    }
    .hx-thumb, .hx-thumb-fallback{ width: 46px; height: 46px; }
    .hx-name{ font-size: .92rem; white-space: normal; }
    .hx-meta{ font-size: .74rem; }
    .hx-title{ font-size: 1rem; }
    .hx-head{ flex-direction: column; align-items: flex-start; }
    .hx-pager-info{ width: 100%; text-align: center; }
    .hx-pager-btns{ width: 100%; justify-content: center; }
}