/* =========================================================================
   hx-modern.css — Shared modern history design for profile sub-pages
   Used by: buyhis, buyotp, topuphis (wrapper class .hx-mod)
   Mobile-app feel · minimal borders · gentle hairlines · token-aware
   ========================================================================= */

.hx-mod{
    --hxm-radius: 18px;
    --hxm-radius-sm: 12px;
    --hxm-divider: color-mix(in srgb, var(--fp-text, #0f172a) 7%, transparent);
    --hxm-row-hover: color-mix(in srgb, var(--main, #4f46e5) 4%, transparent);
}
:root[data-theme="dark"] .hx-mod{
    --hxm-divider: color-mix(in srgb, #ffffff 8%, transparent);
}

/* ===== Hero stats banner ===== */
.hx-mod .hx-hero{
    position: relative;
    margin: 0 0 16px;
    padding: 18px 18px 16px;
    border-radius: var(--hxm-radius);
    background: linear-gradient(135deg, var(--main, #4f46e5) 0%, var(--sub, #7c3aed) 100%);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 16px 36px -16px color-mix(in srgb, var(--main, #4f46e5) 50%, transparent);
}
.hx-mod .hx-hero::before{
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(28rem 28rem at 0% -10%, rgba(255,255,255,.18), transparent 60%),
        radial-gradient(20rem 20rem at 100% 110%, rgba(0,0,0,.16), transparent 60%);
    z-index: -1;
    pointer-events: none;
}
.hx-mod .hx-hero::after{
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 16px 16px;
    opacity: .35;
    pointer-events: none;
    z-index: -1;
}
.hx-mod .hx-hero-head{
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px;
}
.hx-mod .hx-hero-ico{
    width: 38px; height: 38px;
    border-radius: 12px;
    display: grid; place-items: center;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.32);
    font-size: 1rem;
    flex: none;
}
.hx-mod .hx-hero-text{ min-width: 0; flex: 1; }
.hx-mod .hx-hero-title{
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.005em;
    line-height: 1.25;
}
.hx-mod .hx-hero-sub{
    margin: 2px 0 0;
    font-size: .76rem;
    opacity: .82;
    line-height: 1.4;
}
.hx-mod .hx-hero-stats{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.hx-mod .hx-hero-stat{
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 12px;
    padding: 9px 10px 8px;
    text-align: center;
    min-width: 0;
    transition: background .18s ease, transform .18s ease;
}
.hx-mod .hx-hero-stat:hover{
    background: rgba(255,255,255,.2);
    transform: translateY(-1px);
}
.hx-mod .hx-hero-stat .v{
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hx-mod .hx-hero-stat .l{
    font-size: .68rem;
    opacity: .85;
    margin-top: 1px;
    letter-spacing: .02em;
}
.hx-mod .hx-hero-stat.is-success .v{ color: #d1fae5; }
.hx-mod .hx-hero-stat.is-warn .v{ color: #fde68a; }
.hx-mod .hx-hero-stat.is-info .v{ color: #bae6fd; }

/* ----- Outer ----- */
.hx-mod .hx-card{
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 4px 2px 8px !important;
    box-shadow: none !important;
}

/* ----- Header ----- */
.hx-mod .hx-head{
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 2px 14px;
    flex-wrap: wrap;
    background: transparent;
    padding: 0;
}
.hx-mod .hx-head > div:first-child{ min-width: 0; flex: 1 1 220px; }
.hx-mod .hx-title{
    margin: 0;
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -.01em;
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--fp-text, #0f172a);
}
.hx-mod .hx-ico{
    width: 36px; height: 36px;
    border-radius: 11px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--main, #4f46e5), var(--sub, #7c3aed));
    color: #fff;
    font-size: 0.95rem;
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--main, #4f46e5) 55%, transparent);
}
.hx-mod .hx-subtitle{
    margin: 4px 0 0;
    font-size: .82rem;
    color: var(--fp-text-muted, #64748b);
    line-height: 1.5;
}
.hx-mod .hx-pills{
    display: flex !important; gap: 6px; flex-wrap: wrap;
}
.hx-mod .hx-pill{
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .76rem; font-weight: 700;
    background: var(--fp-surface-alt, var(--fp-surface));
    border: 0 !important;
    color: var(--fp-text-muted, #64748b);
}
.hx-mod .hx-pill.primary{
    background: linear-gradient(135deg, var(--main, #4f46e5), var(--sub, #7c3aed));
    color: #fff;
}
.hx-mod .hx-pill.success{
    background: color-mix(in srgb, #10b981 14%, transparent);
    color: #047857;
}
:root[data-theme="dark"] .hx-mod .hx-pill.success{ color:#6ee7b7; }

/* ----- Toolbar / search / filter ----- */
.hx-mod .hx-toolbar{
    display: flex !important; gap: 10px; flex-wrap: wrap;
    align-items: center;
    margin: 0 0 12px !important;
    padding: 0 2px;
    background: transparent;
    border: 0;
}
.hx-mod .hx-search{
    position: relative;
    flex: 1 1 220px;
    min-width: 180px;
}
.hx-mod .hx-search i{
    position: absolute;
    left: 16px; top: 50%; transform: translateY(-50%);
    color: var(--fp-text-muted, #94a3b8);
    font-size: .92rem;
    pointer-events: none;
}
.hx-mod .hx-search input{
    width: 100%;
    height: 44px;
    padding: 0 16px 0 42px;
    border: 0 !important;
    background: var(--fp-surface-alt, var(--fp-surface)) !important;
    border-radius: 999px !important;
    font-size: 14.5px;
    color: var(--fp-text, #0f172a);
    outline: none;
    transition: background .15s ease, box-shadow .15s ease;
}
.hx-mod .hx-search input::placeholder{ color: var(--fp-text-muted, #94a3b8); }
.hx-mod .hx-search input:focus{
    background: var(--fp-surface, #fff) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--main, #4f46e5) 18%, transparent);
}
:root[data-theme="dark"] .hx-mod .hx-search input:focus{
    background: var(--fp-surface, #111827) !important;
}

.hx-mod .hx-filter{
    display: flex !important; gap: 6px; flex-wrap: wrap;
    background: transparent;
    border: 0; padding: 0;
}
.hx-mod .hx-filter button{
    background: var(--fp-surface-alt, var(--fp-surface)) !important;
    border: 0 !important;
    color: var(--fp-text-muted, #64748b) !important;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s ease;
}
.hx-mod .hx-filter button:hover{
    color: var(--fp-text, #0f172a) !important;
    background: color-mix(in srgb, var(--main, #4f46e5) 8%, transparent) !important;
}
.hx-mod .hx-filter button.active{
    background: linear-gradient(135deg, var(--main, #4f46e5), var(--sub, #7c3aed)) !important;
    color: #fff !important;
    box-shadow: 0 5px 12px -6px color-mix(in srgb, var(--main, #4f46e5) 55%, transparent);
}

/* ----- List — single rounded surface with hairline rows ----- */
.hx-mod .hx-list{
    display: flex !important; flex-direction: column;
    gap: 0 !important;
    background: var(--fp-surface, #fff);
    border-radius: var(--hxm-radius);
    overflow: hidden;
    box-shadow: 0 8px 24px -16px rgba(15,23,42,.12);
    border: 0 !important;
}
:root[data-theme="dark"] .hx-mod .hx-list{
    background: var(--fp-surface, #111827);
    box-shadow: 0 10px 30px -16px rgba(0,0,0,.45);
}

.hx-mod .hx-row{
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 14px 16px !important;
    display: grid !important;
    grid-template-columns: 52px 1fr auto;
    grid-template-areas: "thumb main right";
    align-items: center;
    gap: 12px 14px !important;
    position: relative;
    transition: background .15s ease;
    overflow: visible;
    transform: none !important;
}
.hx-mod .hx-row + .hx-row{
    border-top: 1px solid var(--hxm-divider) !important;
}
.hx-mod .hx-row:hover{
    background: var(--hxm-row-hover) !important;
    box-shadow: none !important;
}
.hx-mod .hx-row::after{ content: none !important; }
.hx-mod .hx-row.is-removing{
    opacity: 0;
    transform: translateY(-6px) scale(.985) !important;
    transition: opacity .35s ease, transform .35s ease, max-height .35s ease;
    max-height: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top-color: transparent !important;
    overflow: hidden;
}

/* Thumb */
.hx-mod .hx-thumb,
.hx-mod .hx-thumb-fallback{
    grid-area: thumb;
    width: 52px; height: 52px;
    border-radius: 13px;
    flex: none;
    border: 0 !important;
}
.hx-mod .hx-thumb{
    object-fit: cover;
    background: var(--fp-surface-alt, var(--fp-surface));
}
.hx-mod .hx-thumb-fallback{
    display: grid !important; place-items: center;
    background: linear-gradient(135deg, color-mix(in oklab, var(--main, #4f46e5) 14%, transparent), color-mix(in oklab, var(--sub, #7c3aed) 14%, transparent));
    color: var(--main, #4f46e5);
    font-size: 1.25rem;
}

/* Page-specific thumb tints */
.hx-mod-otp .hx-thumb-fallback{
    background: linear-gradient(135deg, color-mix(in oklab, #06b6d4 18%, transparent), color-mix(in oklab, #3b82f6 18%, transparent));
    color: #0284c7;
}
.hx-mod-topup .hx-thumb-fallback{
    background: linear-gradient(135deg, color-mix(in oklab, #10b981 18%, transparent), color-mix(in oklab, #22c55e 18%, transparent));
    color: #047857;
}
:root[data-theme="dark"] .hx-mod-otp .hx-thumb-fallback{ color:#7dd3fc; }
:root[data-theme="dark"] .hx-mod-topup .hx-thumb-fallback{ color:#6ee7b7; }

/* Main text */
.hx-mod .hx-main{ grid-area: main; min-width: 0; }
.hx-mod .hx-name{
    font-size: .96rem;
    font-weight: 700;
    color: var(--fp-text, #0f172a);
    margin: 0 0 3px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal !important;
}
.hx-mod .hx-meta{
    display: flex !important; gap: 4px 10px; flex-wrap: wrap;
    font-size: .74rem;
    color: var(--fp-text-muted, #94a3b8);
}
.hx-mod .hx-meta .hx-mono{
    font-family: ui-monospace, Menlo, Consolas, monospace !important;
    font-size: .72rem;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--fp-text-muted, #94a3b8) !important;
}
.hx-mod .hx-meta span{ display: inline-flex; align-items: center; gap: 4px; }
.hx-mod .hx-meta span i{ font-size: .68rem; opacity: .7; }

/* Right block (desktop) */
.hx-mod .hx-right{
    grid-area: right;
    display: flex !important;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    min-width: 180px;
    flex: none !important;
    width: auto !important;
    border-top: 0 !important;
    padding-top: 0 !important;
}
.hx-mod .hx-summary{
    display: flex !important; gap: 6px; align-items: center;
    flex-wrap: wrap; justify-content: flex-end;
}
.hx-mod .hx-chip{
    display: inline-flex !important; align-items: center; gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .72rem; font-weight: 800;
    border: 0 !important;
    white-space: nowrap;
}
.hx-mod .hx-chip.success{
    color:#047857 !important;
    background: color-mix(in srgb, #10b981 14%, transparent) !important;
}
.hx-mod .hx-chip.fail{
    color:#b91c1c !important;
    background: color-mix(in srgb, #ef4444 14%, transparent) !important;
}
.hx-mod .hx-chip.pending{
    color:#b45309 !important;
    background: color-mix(in srgb, #f59e0b 14%, transparent) !important;
}
.hx-mod .hx-chip.info{
    color: var(--main, #4f46e5) !important;
    background: color-mix(in srgb, var(--main, #4f46e5) 12%, transparent) !important;
}
.hx-mod .hx-chip.warn{
    color:#9a3412 !important;
    background: color-mix(in srgb, #f97316 16%, transparent) !important;
}
.hx-mod .hx-chip.neutral{
    color: var(--fp-text-muted, #64748b) !important;
    background: var(--fp-surface-alt, var(--fp-surface)) !important;
}
:root[data-theme="dark"] .hx-mod .hx-chip.success{ color:#6ee7b7 !important; }
:root[data-theme="dark"] .hx-mod .hx-chip.fail{ color:#fca5a5 !important; }
:root[data-theme="dark"] .hx-mod .hx-chip.pending{ color:#fcd34d !important; }
:root[data-theme="dark"] .hx-mod .hx-chip.warn{ color:#fdba74 !important; }
.hx-mod .hx-chip i.spin{ animation: hxm-spin 1s linear infinite; }
@keyframes hxm-spin{ to { transform: rotate(360deg); } }

/* Price */
.hx-mod .hx-price{
    font-weight: 800; font-size: .98rem; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.hx-mod .hx-price.neg{ color: #b91c1c; }
.hx-mod .hx-price.pos{ color: #047857; }
:root[data-theme="dark"] .hx-mod .hx-price.neg{ color:#fca5a5; }
:root[data-theme="dark"] .hx-mod .hx-price.pos{ color:#6ee7b7; }

/* Buttons — borderless pills */
.hx-mod .hx-btn{
    display: inline-flex !important;
    align-items: center; justify-content: center;
    gap: 6px;
    border-radius: 999px !important;
    padding: 8px 16px !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s ease, filter .15s ease, background .15s ease, opacity .15s ease;
    white-space: nowrap;
    border: 0 !important;
    background: var(--fp-surface-alt, var(--fp-surface)) !important;
    color: var(--fp-text, #0f172a) !important;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
}
:root[data-theme="dark"] .hx-mod .hx-btn{
    background: color-mix(in srgb, #ffffff 6%, transparent) !important;
    color: var(--fp-text, #f1f5f9) !important;
}
.hx-mod .hx-btn:hover:not(:disabled){
    background: color-mix(in srgb, var(--main, #4f46e5) 10%, transparent) !important;
    color: var(--main, #4f46e5) !important;
}
.hx-mod .hx-btn:active:not(:disabled){ transform: scale(.96); }
.hx-mod .hx-btn:disabled{ opacity: .5; cursor: not-allowed; }
.hx-mod .hx-btn.primary{
    background: linear-gradient(135deg, var(--main, #4f46e5), var(--sub, #7c3aed)) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--main, #4f46e5) 55%, transparent);
}
.hx-mod .hx-btn.primary:hover{ filter: brightness(1.05); color:#fff !important; }
.hx-mod .hx-btn-claim-new{
    background: linear-gradient(135deg, #f97316, #ef4444) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px -8px rgba(239,68,68,.5);
}
.hx-mod .hx-btn-claim-new:hover{ filter: brightness(1.06); color:#fff !important; }
.hx-mod .hx-btn-warn{
    background: linear-gradient(135deg, #f59e0b, #f97316) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px -8px rgba(245,158,11,.5);
}
.hx-mod .hx-btn-warn:hover{ filter: brightness(1.05); color:#fff !important; }

/* Claim status pills */
.hx-mod .hx-claim-link{
    position: relative;
    overflow: hidden;
    background: var(--fp-surface-alt, var(--fp-surface)) !important;
}
.hx-mod .hx-claim-link::before{
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 2px;
}
.hx-mod .hx-claim-link.is-pending{ background: color-mix(in srgb, #f59e0b 14%, transparent) !important; color: #b45309 !important; }
.hx-mod .hx-claim-link.is-pending::before{ background: #f59e0b; }
.hx-mod .hx-claim-link.is-replied{ background: color-mix(in srgb, #3b82f6 14%, transparent) !important; color: #1d4ed8 !important; }
.hx-mod .hx-claim-link.is-replied::before{ background: #3b82f6; }
.hx-mod .hx-claim-link.is-approved{ background: color-mix(in srgb, #10b981 14%, transparent) !important; color: #047857 !important; }
.hx-mod .hx-claim-link.is-approved::before{ background: #10b981; }
.hx-mod .hx-claim-link.is-rejected{ background: color-mix(in srgb, #ef4444 14%, transparent) !important; color: #b91c1c !important; }
.hx-mod .hx-claim-link.is-rejected::before{ background: #ef4444; }
.hx-mod .hx-claim-link.is-new_account{ background: color-mix(in srgb, #a855f7 14%, transparent) !important; color: #7e22ce !important; }
.hx-mod .hx-claim-link.is-new_account::before{ background: #a855f7; }
.hx-mod .hx-claim-link.is-banned{ background: color-mix(in srgb, #6b7280 14%, transparent) !important; color: #1f2937 !important; }
.hx-mod .hx-claim-link.is-banned::before{ background: #6b7280; }
.hx-mod .hx-claim-link.is-closed{ background: color-mix(in srgb, #94a3b8 14%, transparent) !important; color: #475569 !important; }
.hx-mod .hx-claim-link.is-closed::before{ background: #94a3b8; }

:root[data-theme="dark"] .hx-mod .hx-claim-link.is-pending{ color: #fcd34d !important; }
:root[data-theme="dark"] .hx-mod .hx-claim-link.is-replied{ color: #93c5fd !important; }
:root[data-theme="dark"] .hx-mod .hx-claim-link.is-approved{ color: #6ee7b7 !important; }
:root[data-theme="dark"] .hx-mod .hx-claim-link.is-rejected{ color: #fca5a5 !important; }
:root[data-theme="dark"] .hx-mod .hx-claim-link.is-new_account{ color: #d8b4fe !important; }
:root[data-theme="dark"] .hx-mod .hx-claim-link.is-banned{ color: #cbd5e1 !important; }
:root[data-theme="dark"] .hx-mod .hx-claim-link.is-closed{ color: #cbd5e1 !important; }

@keyframes hxm-pulse-dot{
    0%,100%{ opacity: 1; transform: scale(1); }
    50%    { opacity: .55; transform: scale(1.25); }
}
.hx-mod .hx-claim-link.is-pending::before,
.hx-mod .hx-claim-link.is-replied::before{
    animation: hxm-pulse-dot 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
    .hx-mod .hx-claim-link::before{ animation: none !important; }
}

/* Empty state */
.hx-mod .hx-empty{
    text-align: center;
    padding: 44px 20px !important;
    background: var(--fp-surface, #fff);
    border-radius: var(--hxm-radius);
    color: var(--fp-text-muted, #64748b);
    box-shadow: 0 8px 24px -16px rgba(15,23,42,.08);
}
:root[data-theme="dark"] .hx-mod .hx-empty{ background: var(--fp-surface, #111827); }
.hx-mod .hx-empty i{
    font-size: 2.4rem !important;
    opacity: .35;
    margin-bottom: 8px;
    display: block;
    color: var(--fp-text-muted, #64748b) !important;
}
.hx-mod .hx-empty-t{ font-weight: 800; font-size: 1rem; color: var(--fp-text, #0f172a); margin-top: 4px !important; }
.hx-mod .hx-empty-d{ font-size: .85rem; margin-top: 4px !important; }

/* Pager */
.hx-mod .hx-pager{
    display: flex !important; gap: 10px;
    align-items: center; justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 14px !important;
    padding: 0 2px;
}
.hx-mod .hx-pager-info{
    font-size: .78rem; color: var(--fp-text-muted, #94a3b8); font-weight: 600;
}
.hx-mod .hx-pager-btns{ display: flex; gap: 4px; flex-wrap: wrap; }
.hx-mod .hx-pg{
    background: var(--fp-surface-alt, var(--fp-surface)) !important;
    border: 0 !important;
    color: var(--fp-text, #0f172a) !important;
    border-radius: 10px;
    padding: 7px 12px;
    font-size: .82rem; font-weight: 700; cursor: pointer;
    min-width: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .15s ease;
}
.hx-mod .hx-pg:hover:not(:disabled){
    background: color-mix(in srgb, var(--main, #4f46e5) 12%, transparent) !important;
    color: var(--main, #4f46e5) !important;
}
.hx-mod .hx-pg:disabled{ opacity: .35; cursor: not-allowed; }
.hx-mod .hx-pg.active{
    background: linear-gradient(135deg, var(--main, #4f46e5), var(--sub, #7c3aed)) !important;
    color: #fff !important;
}

/* OTP-specific helper line */
.hx-mod .otp-api-line:empty{ display:none; }
.hx-mod .otp-api-line{
    color: var(--fp-text-muted, #94a3b8) !important;
    font-size: .7rem !important;
    width: 100%;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== Mobile (<640px) — edge-to-edge app feel ===== */
@media (max-width: 640px){
    .hx-mod{ font-feature-settings: "ss01"; }
    .hx-mod .hx-hero{
        padding: 14px 14px 12px;
        margin-bottom: 12px;
        border-radius: 16px;
    }
    .hx-mod .hx-hero-head{ margin-bottom: 11px; gap: 10px; }
    .hx-mod .hx-hero-ico{ width: 34px; height: 34px; border-radius: 10px; font-size: .9rem; }
    .hx-mod .hx-hero-title{ font-size: .94rem; }
    .hx-mod .hx-hero-sub{ font-size: .72rem; }
    .hx-mod .hx-hero-stats{ gap: 6px; }
    .hx-mod .hx-hero-stat{ padding: 8px 6px 7px; border-radius: 11px; }
    .hx-mod .hx-hero-stat .v{ font-size: 1rem; }
    .hx-mod .hx-hero-stat .l{ font-size: .62rem; }
    .hx-mod .hx-card{ padding: 0 !important; }
    .hx-mod .hx-head{ margin: 2px 4px 14px !important; gap: 8px; }
    .hx-mod .hx-title{ font-size: 1rem; gap: 9px !important; }
    .hx-mod .hx-ico{ width: 32px; height: 32px; border-radius: 10px; font-size: .88rem; }
    .hx-mod .hx-subtitle{ font-size: .78rem; line-height: 1.5; }
    .hx-mod .hx-pills{ width: 100%; gap: 5px; }
    .hx-mod .hx-pill{ font-size: .72rem; padding: 4px 10px; }

    .hx-mod .hx-toolbar{ flex-direction: column; align-items: stretch; gap: 8px; }
    .hx-mod .hx-search input{ height: 42px; font-size: 14px; }
    .hx-mod .hx-search i{ left: 14px; font-size: .88rem; }
    .hx-mod .hx-filter{
        overflow-x: auto; flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding: 2px 0;
        scrollbar-width: none;
        gap: 5px;
    }
    .hx-mod .hx-filter::-webkit-scrollbar{ display: none; }
    .hx-mod .hx-filter button{
        flex: 0 0 auto;
        padding: 7px 13px;
        font-size: .76rem;
    }

    .hx-mod .hx-list{ border-radius: 16px; }
    .hx-mod .hx-row{
        grid-template-columns: 46px 1fr !important;
        grid-template-areas:
            "thumb main"
            "right right" !important;
        padding: 13px 14px 11px !important;
        gap: 9px 11px !important;
    }
    .hx-mod .hx-row:hover{ background: transparent !important; }
    .hx-mod .hx-row:active{ background: var(--hxm-row-hover) !important; }
    .hx-mod .hx-thumb,
    .hx-mod .hx-thumb-fallback{ width: 46px !important; height: 46px !important; border-radius: 12px; }
    .hx-mod .hx-thumb-fallback{ font-size: 1.1rem; }
    .hx-mod .hx-name{
        font-size: .9rem !important;
        line-height: 1.35;
        font-weight: 700;
        margin: 0 0 2px !important;
        -webkit-line-clamp: 2;
        letter-spacing: -.005em;
    }
    .hx-mod .hx-meta{ font-size: .7rem; gap: 2px 9px; }
    .hx-mod .hx-meta .hx-mono{ font-size: .68rem; opacity: .85; }
    .hx-mod .otp-api-line{ font-size: .65rem !important; }

    .hx-mod .hx-right{
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 7px;
        align-items: stretch;
        min-width: 0 !important;
        padding-top: 9px !important;
        margin-top: 3px;
    }
    .hx-mod .hx-summary{
        grid-column: 1 / -1;
        justify-content: space-between;
        margin-bottom: 1px;
        gap: 6px;
    }
    .hx-mod .hx-chip{
        padding: 3px 9px;
        font-size: .68rem;
        gap: 4px;
    }
    .hx-mod .hx-chip i{ font-size: .68rem; }
    .hx-mod .hx-summary .hx-price{ font-size: .95rem; }

    .hx-mod .hx-btn{
        padding: 10px 10px !important;
        font-size: .78rem !important;
        min-height: 40px;
        border-radius: 12px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        gap: 5px;
        font-weight: 700 !important;
    }
    .hx-mod .hx-btn i{ flex-shrink: 0; font-size: .82rem; }

    /* topuphis — only 1 right-column item */
    .hx-mod-topup .hx-right{ grid-template-columns: 1fr; }

    /* Detail modal — mobile-tightened */
    #product_detail .modal-body .row{ --bs-gutter-x: .75rem; }
    #product_detail #image,
    #product_detail #otpModalImage{ width: 96px !important; height: 96px !important; }
    #product_detail #name,
    #product_detail #otpModalName{ font-size: 1rem !important; }
    #product_detail #details,
    #product_detail #otpModalDetails{ font-size: .82rem !important; padding: 10px 12px !important; }

    /* Empty state tighter */
    .hx-mod .hx-empty{ padding: 36px 18px !important; }
    .hx-mod .hx-empty i{ font-size: 2.1rem !important; }
    .hx-mod .hx-empty-t{ font-size: .96rem; }
    .hx-mod .hx-empty-d{ font-size: .8rem; }

    /* Pager tighter */
    .hx-mod .hx-pager{ margin-top: 12px !important; gap: 8px; }
    .hx-mod .hx-pager-info{ font-size: .72rem; }
    .hx-mod .hx-pg{ padding: 6px 10px; font-size: .76rem; min-width: 32px; }
}

/* Tiny phones (≤380px) */
@media (max-width: 380px){
    .hx-mod .hx-right:not(.hx-mod-topup .hx-right){ grid-template-columns: 1fr; }
    .hx-mod .hx-row{ padding: 12px 12px 10px !important; }
    .hx-mod .hx-name{ font-size: .88rem !important; }
}