.helmi-cust-btn {
    appearance: none;
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid #D1D5DB;
    background: #fff;
    color: #111827;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.helmi-cust-btn:hover {
    border-color: var(--primary, #0D7A4F);
    color: var(--primary, #0D7A4F);
    transform: translateY(-1px);
}
.helmi-cust-btn.is-on {
    border-color: var(--primary, #0D7A4F);
    background: color-mix(in srgb, var(--primary, #0D7A4F) 12%, #fff);
    color: var(--primary, #0D7A4F);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #0D7A4F) 18%, transparent);
}
.helmi-cust-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483600;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: helmiCustFade .22s ease;
}
.helmi-cust-modal.hidden { display: none !important; }
@keyframes helmiCustFade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes helmiCustPop {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes helmiCustRowIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes helmiCustShimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
.helmi-cust-card {
    position: relative;
    width: min(420px, 100%);
    background:
        radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--primary, #0D7A4F) 10%, transparent), transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #fbfcfb 100%);
    border: 1px solid #E5E7EB;
    border-radius: 18px;
    padding: 20px 20px 16px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
    max-height: min(90vh, 760px);
    overflow: auto;
    animation: helmiCustPop .28s cubic-bezier(.2,.8,.2,1);
}
.helmi-cust-card.is-account {
    width: min(720px, 100%);
}
@media (min-width: 768px) {
    .helmi-cust-card.is-account {
        width: min(760px, 100%);
        padding: 24px 28px 22px;
    }
}
.helmi-cust-x {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255,255,255,.7);
    border-radius: 10px;
    cursor: pointer;
    color: #6B7280;
    font-size: 1.35rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.helmi-cust-x:hover { background: #F3F4F6; color: #111827; transform: rotate(90deg); }
.helmi-cust-card h3 { margin: 0 36px 6px 0; font-size: 1.12rem; letter-spacing: -0.01em; }
.helmi-cust-card.is-account h3 { font-size: 1.22rem; }
.helmi-cust-card p { margin: 0 0 10px; color: #6B7280; font-size: 0.86rem; line-height: 1.4; }
.helmi-cust-intro {
    margin: 0 0 12px;
    padding: 10px 12px;
    background: linear-gradient(120deg, color-mix(in srgb, var(--primary, #0D7A4F) 8%, #fff), #fff 60%);
    border: 1px solid color-mix(in srgb, var(--primary, #0D7A4F) 18%, #E5E7EB);
    border-radius: 12px;
    color: #374151;
    font-size: 0.78rem;
    line-height: 1.45;
}
.helmi-cust-intro-sm { margin-bottom: 10px; }
.helmi-cust-card label { display: block; font-size: 0.75rem; font-weight: 600; margin: 0 0 3px; color: #4B5563; }
.helmi-cust-card input {
    width: 100%;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 8px 11px;
    font: inherit;
    font-size: 0.88rem;
    margin-bottom: 0;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.helmi-cust-card input:focus {
    outline: none;
    border-color: var(--primary, #0D7A4F);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #0D7A4F) 18%, transparent);
}
.helmi-cust-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.helmi-cust-actions-sm { margin: 10px 0 6px; }
.helmi-cust-msg { font-size: 0.82rem; margin: 0 0 8px; }
.helmi-cust-msg-sm { font-size: 0.75rem; margin: 0 0 6px; color: #6B7280; }
.helmi-cust-msg.is-ok { color: #0D7A4F; }
.helmi-cust-msg.is-err { color: #B91C1C; }
.helmi-cust-wallet { margin-top: 6px; }
.helmi-cust-sec { margin-top: 14px; }
.helmi-cust-sec h4 {
    margin: 0 0 8px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.helmi-cust-cols {
    display: grid;
    gap: 12px;
}
@media (min-width: 560px) {
    .helmi-cust-cols { grid-template-columns: 1fr 1fr; }
}
.helmi-cust-table-wrap {
    border: 1px solid #E8EBE9;
    border-radius: 12px;
    overflow: auto;
    max-height: 220px;
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.helmi-cust-table-wrap.is-purchases { max-height: 280px; }
.helmi-cust-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.74rem;
    line-height: 1.35;
}
.helmi-cust-table th,
.helmi-cust-table td {
    padding: 7px 8px;
    border-bottom: 1px solid #F1F5F3;
    text-align: left;
    vertical-align: middle;
}
.helmi-cust-table thead th {
    background: linear-gradient(180deg, #F8FAF9, #F3F6F4);
    font-weight: 650;
    color: #6B7280;
    position: sticky;
    top: 0;
    z-index: 1;
}
.helmi-cust-table tbody tr {
    animation: helmiCustRowIn .35s ease both;
    transition: background .18s ease;
}
.helmi-cust-table tbody tr:nth-child(1) { animation-delay: .02s; }
.helmi-cust-table tbody tr:nth-child(2) { animation-delay: .05s; }
.helmi-cust-table tbody tr:nth-child(3) { animation-delay: .08s; }
.helmi-cust-table tbody tr:nth-child(4) { animation-delay: .11s; }
.helmi-cust-table tbody tr:nth-child(5) { animation-delay: .14s; }
.helmi-cust-table tbody tr:nth-child(n+6) { animation-delay: .16s; }
.helmi-cust-table tbody tr:hover { background: color-mix(in srgb, var(--primary, #0D7A4F) 6%, #fff); }
.helmi-cust-table tr:last-child td,
.helmi-cust-table tr:last-child th { border-bottom: none; }
.helmi-cust-table td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.helmi-cust-table code {
    font-size: 0.7rem;
    background: #F3F4F6;
    padding: 1px 5px;
    border-radius: 5px;
}
.helmi-cust-sub { color: #9CA3AF; font-size: 0.66rem; margin-top: 1px; }
.helmi-cust-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: #EEF2F0;
    color: #374151;
    white-space: nowrap;
}
.helmi-cust-pill.is-shop { background: #E8F5EE; color: #0D7A4F; }
.helmi-cust-pill.is-gift,
.helmi-cust-pill.is-gift_order { background: #FEF3C7; color: #92400E; }
.helmi-cust-pill.is-course { background: #E0E7FF; color: #3730A3; }
.helmi-cust-pill.is-event { background: #FCE7F3; color: #9D174D; }
.helmi-cust-pill.is-booking { background: #E0F2FE; color: #075985; }
.helmi-cust-status {
    display: inline-block;
    font-size: 0.64rem;
    font-weight: 600;
    color: #6B7280;
}
.helmi-cust-status.is-paid,
.helmi-cust-status.is-confirmed,
.helmi-cust-status.is-completed,
.helmi-cust-status.is-active { color: #0D7A4F; }
.helmi-cust-status.is-pending,
.helmi-cust-status.is-unpaid { color: #B45309; }
.helmi-cust-status.is-cancelled,
.helmi-cust-status.is-failed,
.helmi-cust-status.is-refunded { color: #B91C1C; }
.helmi-cust-link {
    appearance: none;
    border: 1px solid color-mix(in srgb, var(--primary, #0D7A4F) 30%, #E5E7EB);
    background: color-mix(in srgb, var(--primary, #0D7A4F) 8%, #fff);
    color: var(--primary, #0D7A4F);
    font: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 999px;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.helmi-cust-link:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--primary, #0D7A4F) 14%, #fff);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--primary, #0D7A4F) 18%, transparent);
}
.helmi-cust-receipt-card {
    border: 1px solid #E8EBE9;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
    animation: helmiCustPop .3s ease;
}
.helmi-cust-receipt-head {
    padding: 14px 16px;
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--primary, #0D7A4F) 16%, #fff), #fff 70%);
    border-bottom: 1px solid #E8EBE9;
}
.helmi-cust-receipt-head strong { display: block; font-size: 0.95rem; }
.helmi-cust-receipt-head span { color: #6B7280; font-size: 0.78rem; }
.helmi-cust-receipt th { width: 38%; color: #6B7280; font-weight: 600; }
.helmi-cust-receipt td { font-weight: 500; color: #111827; }
.helmi-cust-table-wrap:has(.helmi-cust-receipt) { max-height: none; border: none; border-radius: 0; }
.helmi-cust-empty {
    padding: 18px 12px;
    text-align: center;
    color: #9CA3AF;
    font-size: 0.78rem;
    background:
        linear-gradient(90deg, #f8faf9, #eef5f1, #f8faf9);
    background-size: 200% 100%;
    animation: helmiCustShimmer 2.8s linear infinite;
    border-radius: 12px;
    border: 1px dashed #D1D5DB;
}
.helmi-cust-grid {
    display: grid;
    gap: 10px;
}
.helmi-cust-grid-sm { margin-bottom: 2px; }
@media (min-width: 640px) {
    .helmi-cust-grid.is-two {
        grid-template-columns: 1fr 1fr;
    }
}
.helmi-header-tools,
.studio-header-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}
.helmi-cust-card .helmi-btn {
    appearance: none;
    border-radius: 10px;
    border: 1px solid #D1D5DB;
    background: #fff;
    padding: 8px 12px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.helmi-cust-card .helmi-btn:hover { transform: translateY(-1px); }
.helmi-cust-card .helmi-btn-primary {
    background: var(--primary, #0D7A4F);
    border-color: var(--primary, #0D7A4F);
    color: #fff;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--primary, #0D7A4F) 28%, transparent);
}
.helmi-cust-card .helmi-btn-secondary { color: #111827; }
.helmi-cust-card .helmi-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
    .helmi-cust-modal,
    .helmi-cust-card,
    .helmi-cust-table tbody tr,
    .helmi-cust-receipt-card,
    .helmi-cust-empty,
    .helmi-cust-btn,
    .helmi-cust-x,
    .helmi-cust-link,
    .helmi-cust-card .helmi-btn {
        animation: none !important;
        transition: none !important;
    }
}