/* -
   Zinn Hub Payment Wizard - Frontend CSS v1.0.8
   Dark theme: #fdfcf5 bg, #fffdf7 card, #b8860b/#b8860b gold accents
   - */

/* - Root scope - */
.zh-pw-wizard *,
.zh-pw-ledger-wrap * {
    box-sizing: border-box;
}

.zh-pw-wizard,
.zh-pw-ledger-wrap {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #3d3d3d;
    max-width: 860px;
    margin: 30px auto !important;
}

/* - Wizard shell - */
.zh-pw-wizard {
    background: #fdfcf5;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(184, 134, 11, 0.15);
}

/* - Topbar (step indicator) - */
.zh-pw-wizard-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 28px;
    background: rgba(184,134,11,0.10);
    border-bottom: 1px solid rgba(184,134,11,0.12);
}

.zh-pw-step-indicator {
    font-size: 12px;
    color: #8a6410;
    background: rgba(184,134,11,0.18);
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid rgba(184,134,11,0.40);
}

/* - Footer (Return to Dashboard) - */
.zh-pw-wizard-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 32px;
    background: rgba(0,0,0,0.3);
    border-top: 1px solid rgba(184,134,11,0.15);
}

.zh-pw-back-link {
    font-size: 13px;
    color: #6a6a6a;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
    cursor: pointer;
}
.zh-pw-back-link:hover { color: #b8860b; }

/* - Step body - */
.zh-pw-step-body,
.zh-pw-step {
    padding: 28px 32px 32px;
    background: #fdfcf5;
    min-height: 320px;
}

/* - Step header - */
.zh-pw-step-header {
    margin-bottom: 24px;
}
.zh-pw-step-header h2,
.zh-pw-step-body h2 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
}
.zh-pw-step-header p,
.zh-pw-step-intro {
    color: #6a6a6a;
    font-size: 15px;
    margin: 0;
    line-height: 1.6;
}
.zh-pw-step-header-complete {
    text-align: center;
    padding-bottom: 8px;
}
.zh-pw-complete-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

/* - Step nav buttons - */
.zh-pw-step-nav {
    display: flex;
    gap: 12px;
    margin-top: 28px;
    flex-wrap: wrap;
    align-items: center;
}
.zh-pw-step-nav-complete {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* - Buttons - */
.zh-pw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
    border: none;
    line-height: 1.4;
    font-family: inherit;
}
.zh-pw-btn-primary {
    background: linear-gradient(135deg, #b8860b 0%, #d4a84b 100%);
    color: #000 !important;
    font-weight: 700;
}
.zh-pw-btn-primary:hover { opacity: 0.9; transform: translateY(-1px); color: #000 !important; }
.zh-pw-btn-primary:active { transform: translateY(0); }
.zh-pw-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
/* Ensure <a> tags used as buttons also get correct colours */
a.zh-pw-btn-primary,
a.zh-pw-btn-primary:visited,
a.zh-pw-btn-primary:link {
    color: #000 !important;
    text-decoration: none;
}

.zh-pw-btn-secondary {
    background: rgba(184,134,11,0.15);
    color: #6a6a6a;
    border: 1px solid rgba(184,134,11,0.25);
}
.zh-pw-btn-secondary:hover { border-color: rgba(184,134,11,0.40); color: #3d3d3d; }

.zh-pw-btn-danger {
    background: rgba(220,38,38,0.1);
    color: #ef4444;
    font-size: 13px;
    padding: 8px 16px;
    border: 1px solid rgba(220,38,38,0.3);
}
.zh-pw-btn-danger:hover { background: rgba(220,38,38,0.2); }

.zh-pw-btn-link {
    background: none;
    border: none;
    color: #b8860b;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    font-family: inherit;
}

/* - Status cards grid (Step 1 overview) - */
.zh-pw-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

.zh-pw-status-card {
    background: #fffdf7;
    border: 1px solid rgba(184,134,11,0.15);
    border-radius: 12px;
    padding: 18px 16px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.15s;
}
.zh-pw-status-card:hover { border-color: rgba(184,134,11,0.4); transform: translateY(-2px); }
.zh-pw-status-card-connected { border-color: rgba(74,222,128,0.25); }
.zh-pw-status-card-pending   { border-color: rgba(251,191,36,0.3); }
.zh-pw-status-card-not-set   { border-color: rgba(239,68,68,0.2); }
.zh-pw-status-card-platform  { border-color: rgba(184,134,11,0.15); }
.zh-pw-status-card-set       { border-color: rgba(74,222,128,0.25); }

.zh-pw-status-card-icon { font-size: 28px; margin-bottom: 10px; }
.zh-pw-status-card-label {
    font-size: 11px;
    color: #6a6a6a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.zh-pw-status-card-value {
    font-size: 13px;
    font-weight: 600;
    color: #3d3d3d;
    margin-bottom: 8px;
}
.zh-pw-status-card-action {
    font-size: 12px;
    color: #b8860b;
    cursor: pointer;
    transition: color 0.15s;
}
.zh-pw-status-card:hover .zh-pw-status-card-action { color: #b8860b; }

/* - Badges - */
.zh-pw-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}
.zh-pw-badge-green  { background: rgba(74,222,128,0.12); color: #15803d; border: 1px solid rgba(74,222,128,0.25); }
.zh-pw-badge-amber  { background: rgba(251,191,36,0.1); color: #fbbf24; border: 1px solid rgba(251,191,36,0.25); }
.zh-pw-badge-blue   { background: rgba(37,99,235,0.10); color: #1d4ed8; border: 1px solid rgba(37,99,235,0.30); }
.zh-pw-badge-red    { background: rgba(239,68,68,0.1); color: #ef4444; border: 1px solid rgba(239,68,68,0.2); }

/* - Explainer cards (Step 1 bottom) - */
.zh-pw-explainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 24px;
}
.zh-pw-explainer-card {
    background: #fffdf7;
    border: 1px solid rgba(184,134,11,0.15);
    border-radius: 10px;
    padding: 16px;
}
.zh-pw-explainer-card h4 {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
    color: #b8860b;
}
.zh-pw-explainer-card p {
    margin: 0;
    font-size: 13px;
    color: #6a6a6a;
    line-height: 1.5;
}

/* - Toggle cards (Step 2/3 mode selection) - */
.zh-pw-toggle-cards {
    display: flex;
    gap: 14px;
    margin-bottom: 20px;
}
.zh-pw-toggle-card {
    flex: 1;
    background: #fffdf7;
    border: 2px solid #fdf8ec;
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}
.zh-pw-toggle-card:hover { border-color: rgba(184,134,11,0.4); }
.zh-pw-toggle-card.active {
    border-color: #b8860b;
    background: rgba(184,134,11,0.07);
    box-shadow: 0 0 0 1px rgba(184,134,11,0.15);
}
.zh-pw-toggle-card h3 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
}
.zh-pw-toggle-card p {
    margin: 0 0 10px;
    font-size: 13px;
    color: #6a6a6a;
    line-height: 1.5;
}
.zh-pw-toggle-perk {
    font-size: 12px;
    color: #15803d;
    font-weight: 600;
}

/* - Mode sections - */
.zh-pw-mode-section {
    margin-bottom: 16px;
}

/* - Info box - */
.zh-pw-info-box {
    background: rgba(96,165,250,0.06);
    border: 1px solid rgba(96,165,250,0.18);
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 14px;
    color: #93c5fd;
    line-height: 1.6;
    margin-bottom: 16px;
}
.zh-pw-info-box p { margin: 0 0 6px; }
.zh-pw-info-box p:last-child { margin: 0; }
.zh-pw-info-box a { color: #60a5fa; }

/* - Connected / Pending / Invite boxes - */
.zh-pw-connected-box {
    background: rgba(74,222,128,0.05);
    border: 1px solid rgba(74,222,128,0.2);
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 14px;
}
.zh-pw-connected-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}
.zh-pw-connected-tick {
    font-size: 20px;
    color: #15803d;
    line-height: 1;
    flex-shrink: 0;
}
.zh-pw-connected-header strong {
    color: #15803d;
    font-size: 15px;
    display: block;
    margin-bottom: 2px;
}
.zh-pw-connected-detail {
    font-size: 12px;
    color: #6a6a6a;
    margin-top: 2px;
}

.zh-pw-pending-box,
.zh-pw-invite-box {
    background: #fffdf7;
    border: 1px solid rgba(184,134,11,0.15);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 14px;
}
.zh-pw-pending-box h4,
.zh-pw-invite-box h4 {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
    color: #fbbf24;
}
.zh-pw-invite-box h4 { color: #b8860b; }
.zh-pw-pending-box p,
.zh-pw-invite-box p {
    font-size: 13px;
    color: #6a6a6a;
    margin: 0 0 14px;
    line-height: 1.5;
}
.zh-pw-pending-sub {
    font-size: 12px;
    color: #6a6a6a;
    margin-bottom: 14px !important;
}

/* - Capabilities section - */
.zh-pw-capabilities {
    border-top: 1px solid rgba(184,134,11,0.15);
    padding-top: 14px;
    margin-top: 14px;
}
.zh-pw-capabilities h4 {
    font-size: 13px;
    font-weight: 700;
    color: #6a6a6a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 10px;
}
.zh-pw-capabilities label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6a6a6a;
    margin-bottom: 6px;
    cursor: pointer;
}
.zh-pw-capabilities input[type=checkbox] { accent-color: #b8860b; }

/* - Fields - */
.zh-pw-field-group {
    margin-bottom: 20px;
}
.zh-pw-field-label,
.zh-pw-field label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #6a6a6a;
    margin-bottom: 7px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.zh-pw-input,
.zh-pw-select,
.zh-pw-field input[type=text],
.zh-pw-field input[type=email],
.zh-pw-field select,
.zh-pw-field textarea {
    width: 100%;
    background: #ffffff !important;
    border: 1px solid #fdf8ec;
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 14px;
    color: #3d3d3d !important;
    -webkit-text-fill-color: #3d3d3d !important;
    caret-color: #3d3d3d !important;
    transition: border-color 0.2s;
    font-family: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
/* Extra-high specificity for stubborn themes */
.zh-pw-wizard .zh-pw-input,
.zh-pw-wizard .zh-pw-field input[type=text],
.zh-pw-wizard .zh-pw-field input[type=email],
.zh-pw-wizard .zh-pw-field input[type=number],
.zh-pw-wizard .zh-pw-field input[type=password],
.zh-pw-wizard .zh-pw-field select,
.zh-pw-wizard .zh-pw-field textarea {
    background-color: #ffffff !important;
    color: #3d3d3d !important;
    -webkit-text-fill-color: #3d3d3d !important;
    caret-color: #3d3d3d !important;
}
/* Force colour even while typing / autofill */
.zh-pw-wizard .zh-pw-input:focus, .zh-pw-wizard .zh-pw-input:active,
.zh-pw-wizard .zh-pw-field input:focus, .zh-pw-wizard .zh-pw-field input:active,
.zh-pw-wizard .zh-pw-field textarea:focus, .zh-pw-wizard .zh-pw-field textarea:active {
    color: #3d3d3d !important;
    -webkit-text-fill-color: #3d3d3d !important;
    background: #ffffff !important;
}
/* Chrome autofill override */
.zh-pw-wizard .zh-pw-input:-webkit-autofill,
.zh-pw-wizard .zh-pw-field input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #3d3d3d !important;
    caret-color: #3d3d3d !important;
}

/* Force option colours - browsers render options with system styles otherwise */
.zh-pw-wizard select option,
.zh-pw-wizard .zh-pw-select option,
.zh-pw-wizard .zh-pw-field select option {
    background: #ffffff !important;
    color: #3d3d3d !important;
}
/* Fallback for browsers that ignore option colour: add a colour-scheme hint */
.zh-pw-wizard select,
.zh-pw-wizard .zh-pw-field select {
    color-scheme: dark;
}
.zh-pw-input:focus,
.zh-pw-select:focus,
.zh-pw-field input:focus,
.zh-pw-field select:focus,
.zh-pw-field textarea:focus {
    outline: none;
    border-color: #b8860b;
    box-shadow: 0 0 0 3px rgba(184,134,11,0.1);
}
.zh-pw-input.valid   { border-color: #16a34a; }
.zh-pw-input.invalid { border-color: #dc2626; }
.zh-pw-monospace { font-family: 'Courier New', Courier, monospace; font-size: 13px; }

.zh-pw-field-hint {
    font-size: 12px;
    color: #6a6a6a;
    margin-top: 5px;
    line-height: 1.4;
}
.zh-pw-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.zh-pw-optional-badge {
    display: inline-block;
    background: rgba(184,134,11,0.15);
    color: #6a6a6a;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

/* - Payout method cards - */
.zh-pw-method-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}
.zh-pw-method-card {
    background: #ffffff;
    border: 2px solid #ecd9a0;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(184,134,11,0.10);
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    min-width: 100px;
    position: relative;
}
.zh-pw-method-card:hover { border-color: rgba(184,134,11,0.4); }
.zh-pw-method-card.active {
    border-color: #b8860b;
    background: rgba(184,134,11,0.07);
}
.zh-pw-method-icon { font-size: 24px; margin-bottom: 6px; }
.zh-pw-method-label { font-size: 12px; font-weight: 600; color: #3d3d3d; }
.zh-pw-method-note { font-size: 10px; color: #6a6a6a; margin-top: 4px; line-height: 1.3; }
.zh-pw-method-card.active .zh-pw-method-label { color: #b8860b; }
.zh-pw-method-card.active .zh-pw-method-note { color: #b8860b; }

/* Disabled backup card (already selected as primary) */
.zh-pw-method-card.zh-pw-card-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    position: relative;
}
.zh-pw-card-disabled-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #8a6410;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(253,248,236,0.85);
    border-radius: 8px;
    padding: 4px;
    text-align: center;
    line-height: 1.3;
}

/* - Payout fields - */
.zh-pw-payout-fields { margin-bottom: 8px; }
.zh-pw-method-fields { padding: 16px 0; }

.zh-pw-backup-group {
    border-top: 1px solid rgba(184,134,11,0.15);
    padding-top: 24px;
    margin-top: 8px;
}

.zh-pw-security-note {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(184,134,11,0.12);
    border: 1px solid rgba(184,134,11,0.15);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 13px;
    color: #6a6a6a;
    margin-top: 20px;
}

.zh-pw-error-msg {
    background: rgba(220,38,38,0.08);
    border: 1px solid rgba(220,38,38,0.25);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: #ef4444;
    margin-top: 12px;
}

/* - Checkout preview (Step 5) - */
.zh-pw-checkout-preview {
    background: #fffdf7;
    border: 1px solid rgba(184,134,11,0.15);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
}
.zh-pw-preview-frame {
    padding: 20px;
}
.zh-pw-preview-title {
    font-size: 11px;
    font-weight: 700;
    color: #6a6a6a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}
.zh-pw-preview-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(184,134,11,0.15);
    border-radius: 8px;
    margin-bottom: 8px;
    background: rgba(184,134,11,0.12);
}
.zh-pw-preview-radio {
    color: #b8860b;
    font-size: 16px;
    flex-shrink: 0;
}
.zh-pw-preview-option-label {
    font-size: 14px;
    color: #3d3d3d;
    flex: 1;
}
.zh-pw-preview-badge-direct {
    font-size: 11px;
    font-weight: 700;
    background: rgba(74,222,128,0.1);
    color: #15803d;
    border: 1px solid rgba(74,222,128,0.2);
    padding: 2px 7px;
    border-radius: 10px;
}
.zh-pw-preview-badge-platform {
    font-size: 11px;
    font-weight: 700;
    background: rgba(96,165,250,0.08);
    color: #93c5fd;
    border: 1px solid rgba(96,165,250,0.18);
    padding: 2px 7px;
    border-radius: 10px;
}
.zh-pw-preview-summary {
    padding: 14px 20px;
    background: rgba(74,222,128,0.05);
    border-top: 1px solid rgba(74,222,128,0.1);
    font-size: 13px;
    color: #6a6a6a;
}
.zh-pw-preview-summary p { margin: 0; }

/* - Payout Summary Box (Step 5) - */
.zh-pw-payout-summary-box {
    background: #fdfcf5;
    border: 1px solid rgba(184,134,11,0.25);
    border-radius: 12px;
    padding: 22px 24px;
    margin: 24px 0;
}
.zh-pw-payout-summary-title {
    font-size: 16px;
    font-weight: 700;
    color: #b8860b;
    margin: 0 0 18px;
}
.zh-pw-payout-summary-row {
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.zh-pw-payout-summary-primary {
    background: rgba(184,134,11,0.08);
    border: 1px solid rgba(184,134,11,0.2);
}
.zh-pw-payout-summary-backup {
    background: rgba(96,165,250,0.05);
    border: 1px solid rgba(96,165,250,0.15);
}
.zh-pw-payout-summary-no-backup {
    background: rgba(184,134,11,0.05);
    border: 1px solid rgba(184,134,11,0.2);
}
.zh-pw-payout-summary-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #6a6a6a;
    margin-bottom: 4px;
}
.zh-pw-payout-summary-method {
    font-size: 15px;
    font-weight: 700;
    color: #3d3d3d;
    margin-bottom: 4px;
}
.zh-pw-payout-summary-detail {
    font-size: 13px;
    color: #6a6a6a;
    font-family: 'Courier New', monospace;
}
.zh-pw-payout-summary-note {
    font-size: 12px;
    color: #6a6a6a;
    margin-top: 8px;
    font-style: italic;
}
.zh-pw-payout-summary-note-advisory {
    color: #6a6a6a;
    font-style: normal;
    line-height: 1.5;
}
.zh-pw-payout-schedule {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(184,134,11,0.15);
    font-size: 13px;
    color: #6a6a6a;
    line-height: 1.5;
}
.zh-pw-payout-schedule-icon { font-size: 20px; flex-shrink: 0; }
.zh-pw-payout-schedule strong { color: #3d3d3d; }
.zh-pw-payout-summary-warn {
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.2);
    border-radius: 8px;
    padding: 14px 16px;
    color: #fca5a5;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* - Checklist (Step 6) - */
.zh-pw-checklist {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}
.zh-pw-checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(184,134,11,0.12);
}
.zh-pw-checklist-item:last-child { border-bottom: none; }
.zh-pw-checklist-icon { font-size: 20px; flex-shrink: 0; line-height: 1.4; }
.zh-pw-checklist-item strong { color: #3d3d3d; font-size: 15px; display: block; margin-bottom: 2px; }
.zh-pw-checklist-detail { font-size: 13px; color: #6a6a6a; }
.zh-pw-checklist-item.ok strong { color: #3d3d3d; }
.zh-pw-checklist-item.warn strong { color: #fbbf24; }

/* - Notices - */
.zh-pw-notice {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    margin-top: 16px;
    display: none;
    align-items: center;
    gap: 8px;
}
.zh-pw-notice.visible { display: flex; }
.zh-pw-notice.success { background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.3); color: #15803d; }
.zh-pw-notice.error   { background: rgba(220,38,38,0.1); border: 1px solid rgba(220,38,38,0.3); color: #ef4444; }
.zh-pw-notice.info    { background: rgba(96,165,250,0.08); border: 1px solid rgba(96,165,250,0.2); color: #93c5fd; }

/* - Spinner - */
.zh-pw-spinner {
    display: none;
    width: 16px; height: 16px;
    border: 2px solid rgba(184,134,11,0.30);
    border-top-color: #b8860b;
    border-radius: 50%;
    animation: zh-pw-spin 0.7s linear infinite;
    vertical-align: middle;
}
.zh-pw-loading .zh-pw-spinner { display: inline-block; }
@keyframes zh-pw-spin { to { transform: rotate(360deg); } }

/* - Platform notice - */
.zh-pw-platform-notice {
    padding: 32px;
    background: #fdfcf5;
}
.zh-pw-platform-notice-icon { font-size: 40px; text-align: center; margin-bottom: 16px; }
.zh-pw-platform-notice h2 {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
    margin: 0 0 10px;
}
.zh-pw-platform-notice p {
    font-size: 14px;
    color: #6a6a6a;
    text-align: center;
    margin: 0 0 20px;
    line-height: 1.6;
}
.zh-pw-platform-notice-actions {
    display: flex;
    justify-content: center;
}

/* - Stripe connect button - */
.zh-pw-stripe-connect-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #635BFF !important;
    color: #fff !important;
    font-weight: 600;
    font-size: 14px;
    padding: 11px 20px;
    border-radius: 8px;
    text-decoration: none !important;
    transition: opacity 0.2s;
}
.zh-pw-stripe-connect-btn:hover,
.zh-pw-stripe-connect-btn:visited,
.zh-pw-stripe-connect-btn:link,
.zh-pw-stripe-connect-btn:active { opacity: 0.85; color: #fff !important; text-decoration: none !important; }

/* -
   Vendor Ledger (My Payouts page)
   - */

.zh-pw-ledger-wrap {
    background: #fdfcf5;
    border-radius: 16px;
    border: 1px solid rgba(184, 134, 11, 0.3) !important;
    overflow: hidden;
    max-width: 860px;
    margin: 30px auto !important;
}

.zh-pw-ledger-inner {
    padding: 28px 32px 32px;
    overflow: hidden;
}

/* Hide unwanted scrollbars on ledger */
.zh-pw-ledger-wrap *::-webkit-scrollbar,
.zh-pw-ledger-inner::-webkit-scrollbar,
.zh-pw-ledger-tabs::-webkit-scrollbar {
    display: none;
}
.zh-pw-ledger-wrap *,
.zh-pw-ledger-inner,
.zh-pw-ledger-tabs {
    scrollbar-width: none;
}

/* - Ledger header - */
.zh-pw-ledger-header {
    margin-bottom: 24px;
}
.zh-pw-ledger-header h1 {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 4px;
}
.zh-pw-ledger-header p {
    color: #6a6a6a;
    font-size: 14px;
    margin: 0;
}

/* - Ledger summary cards - */
.zh-pw-ledger-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
.zh-pw-ledger-card {
    background: #fffdf7;
    border: 1px solid rgba(184,134,11,0.15);
    border-radius: 12px;
    padding: 18px;
    text-align: center;
}
.zh-pw-ledger-card-due   { border-color: rgba(184,134,11,0.3); }
.zh-pw-ledger-card-held  { border-color: rgba(96,165,250,0.2); }
.zh-pw-ledger-card-paid  { border-color: rgba(74,222,128,0.2); }
.zh-pw-ledger-card-icon  { font-size: 28px; margin-bottom: 8px; }
.zh-pw-ledger-card-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6a6a6a;
    margin-bottom: 6px;
}
.zh-pw-ledger-card-amount {
    font-size: 26px;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1;
    margin-bottom: 4px;
}
.zh-pw-ledger-card-due .zh-pw-ledger-card-amount { color: #b8860b; }
.zh-pw-ledger-card-paid .zh-pw-ledger-card-amount { color: #15803d; }
.zh-pw-ledger-card-sub {
    font-size: 12px;
    color: #6a6a6a;
}

/* - Infobar - */
.zh-pw-ledger-infobar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6a6a6a;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.zh-pw-infobar-sep { color: #ecd9a0; }
.zh-pw-ledger-setup-link { color: #b8860b; text-decoration: none; margin-left: auto; }
.zh-pw-ledger-setup-link:hover { color: #b8860b; }

/* - Notice bar - */
.zh-pw-ledger-notice {
    background: rgba(251,191,36,0.07);
    border: 1px solid rgba(251,191,36,0.2);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: #fbbf24;
    margin-bottom: 20px;
}
.zh-pw-ledger-notice a { color: #b8860b; }

/* - Tabs - */
.zh-pw-ledger-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid rgba(184,134,11,0.15);
    margin-bottom: 20px;
    overflow: hidden;
    flex-wrap: wrap;
}
.zh-pw-ledger-tab {
    background: none;
    border: none;
    padding: 11px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #6a6a6a;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: color 0.2s;
    text-decoration: none;
    display: inline-block;
    font-family: inherit;
}
.zh-pw-ledger-tab:hover { color: #3d3d3d; }
.zh-pw-ledger-tab.active {
    color: #b8860b;
    border-bottom-color: #b8860b;
}
.zh-pw-tab-count {
    display: inline-block;
    background: rgba(184,134,11,0.15);
    color: #6a6a6a;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 4px;
}
.zh-pw-ledger-tab.active .zh-pw-tab-count {
    background: rgba(184,134,11,0.15);
    color: #b8860b;
}

/* - Tab content - */
.zh-pw-ledger-tab-content { min-height: 120px; }

.zh-pw-ledger-tab-note {
    background: rgba(96,165,250,0.06);
    border: 1px solid rgba(96,165,250,0.15);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: #6a6a6a;
    margin-bottom: 16px;
}

.zh-pw-ledger-empty {
    text-align: center;
    padding: 40px 20px;
    color: #6a6a6a;
    font-size: 14px;
}

/* - Ledger table - */
.zh-pw-ledger-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.zh-pw-ledger-table thead th {
    padding: 10px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6a6a6a;
    border-bottom: 1px solid rgba(184,134,11,0.15);
}
.zh-pw-ledger-table tbody tr {
    border-bottom: 1px solid rgba(184,134,11,0.12);
    transition: background 0.15s;
}
.zh-pw-ledger-table tbody tr:hover { background: rgba(184,134,11,0.12); }
.zh-pw-ledger-table td {
    padding: 12px;
    color: #3d3d3d;
    vertical-align: middle;
}
.zh-pw-amount-col {
    font-variant-numeric: tabular-nums;
    color: #3d3d3d;
    font-weight: 600;
}
.zh-pw-ledger-total-row td {
    border-top: 2px solid rgba(184,134,11,0.25);
    font-weight: 700;
    color: #b8860b;
    font-size: 15px;
    padding: 14px 12px;
}

/* - Ledger footer (Return to Dashboard) - */
.zh-pw-ledger-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 32px;
    background: rgba(0,0,0,0.3);
    border-top: 1px solid rgba(184,134,11,0.15);
}

/* - Dashboard widget - */
.zh-pw-dashboard-widget {
    background: linear-gradient(135deg, #fffdf7 0%, #fdf8ec 100%);
    border: 1px solid rgba(184,134,11,0.2);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #3d3d3d;
}
.zh-pw-widget-title {
    font-size: 12px;
    font-weight: 700;
    color: #6a6a6a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}
.zh-pw-widget-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}
.zh-pw-widget-box { text-align: center; }
.zh-pw-widget-amount {
    font-size: 22px;
    font-weight: 800;
    color: #b8860b;
    line-height: 1;
    margin-bottom: 4px;
}
.zh-pw-widget-label {
    font-size: 11px;
    color: #6a6a6a;
}
.zh-pw-widget-link {
    display: block;
    text-align: center;
    font-size: 13px;
    color: #b8860b;
    text-decoration: none;
    padding-top: 12px;
    border-top: 1px solid rgba(184,134,11,0.12);
}
.zh-pw-widget-link:hover { color: #b8860b; }

/* - Responsive - */
@media (max-width: 640px) {
    .zh-pw-step, .zh-pw-step-body { padding: 20px; }
    .zh-pw-ledger-inner { padding: 20px; }
    .zh-pw-toggle-cards { flex-direction: column; }
    .zh-pw-explainer { grid-template-columns: 1fr; }
    .zh-pw-ledger-summary { grid-template-columns: 1fr; }
    .zh-pw-field-row { grid-template-columns: 1fr; }
    .zh-pw-btn-row, .zh-pw-step-nav { flex-direction: column; }
    .zh-pw-status-grid { grid-template-columns: 1fr 1fr; }
}

/* - Country search selector - */
.zh-pw-country-search-wrap {
    position: relative;
    z-index: 100;
}
.zh-pw-country-search-wrap.open {
    z-index: 10000;
}
.zh-pw-country-search-input {
    width: 100%;
    background: #ffffff !important;
    border: 1px solid #fdf8ec !important;
    border-radius: 8px;
    padding: 11px 40px 11px 14px;
    font-size: 14px;
    color: #3d3d3d !important;
    transition: border-color 0.2s;
    font-family: inherit;
    cursor: pointer;
    caret-color: #3d3d3d !important;
    -webkit-text-fill-color: #3d3d3d !important;
}
.zh-pw-country-search-input:focus,
.zh-pw-country-search-input:active,
.zh-pw-country-search-input:hover {
    outline: none !important;
    color: #3d3d3d !important;
    -webkit-text-fill-color: #3d3d3d !important;
    background: #ffffff !important;
    border-color: #b8860b;
    box-shadow: 0 0 0 3px rgba(184,134,11,0.1);
}
.zh-pw-country-search-input::placeholder { color: #6a6a6a; }

/* Ultra-high specificity country input overrides */
#zh-country-search,
.zh-pw-wizard #zh-country-search,
.zh-pw-step .zh-pw-country-search-input {
    background-color: #ffffff !important;
    color: #3d3d3d !important;
    -webkit-text-fill-color: #3d3d3d !important;
    caret-color: #3d3d3d !important;
}
#zh-country-search:focus,
.zh-pw-wizard #zh-country-search:focus {
    background-color: #ffffff !important;
    color: #3d3d3d !important;
    -webkit-text-fill-color: #3d3d3d !important;
}

/* ID-level nuclear override for ALL inputs inside wizard — beats any theme */
#zh-pw-wizard input,
#zh-pw-wizard input[type=text],
#zh-pw-wizard input[type=email],
#zh-pw-wizard input[type=number],
#zh-pw-wizard input[type=password],
#zh-pw-wizard textarea,
#zh-pw-wizard select {
    background-color: #ffffff !important;
    color: #3d3d3d !important;
    -webkit-text-fill-color: #3d3d3d !important;
    caret-color: #3d3d3d !important;
}
#zh-pw-wizard input:focus,
#zh-pw-wizard input:active,
#zh-pw-wizard textarea:focus,
#zh-pw-wizard textarea:active,
#zh-pw-wizard select:focus {
    background-color: #ffffff !important;
    color: #3d3d3d !important;
    -webkit-text-fill-color: #3d3d3d !important;
    caret-color: #3d3d3d !important;
    outline: none;
}
#zh-pw-wizard input:-webkit-autofill,
#zh-pw-wizard input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #3d3d3d !important;
    caret-color: #3d3d3d !important;
}
.zh-pw-country-dropdown-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #6a6a6a;
    font-size: 12px;
}
.zh-pw-country-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #b8860b;
    border-radius: 8px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 9999;
    display: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.zh-pw-country-dropdown.open { display: block; }
.zh-pw-country-option {
    padding: 10px 14px;
    color: #3d3d3d;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.15s;
}
.zh-pw-country-option:hover,
.zh-pw-country-option.highlighted {
    background: rgba(184,134,11,0.15);
    color: #b8860b;
}
.zh-pw-country-option.selected {
    background: rgba(184,134,11,0.1);
    color: #b8860b;
}
.zh-pw-country-no-results {
    padding: 10px 14px;
    color: #6a6a6a;
    font-size: 13px;
    font-style: italic;
}
/* Scrollbar styling for country dropdown */
.zh-pw-country-dropdown::-webkit-scrollbar { width: 6px; }
.zh-pw-country-dropdown::-webkit-scrollbar-track { background: #fdfcf5; }
.zh-pw-country-dropdown::-webkit-scrollbar-thumb { background: #ecd9a0; border-radius: 3px; }

/* - Select dropdown custom arrow (for crypto etc) - */
.zh-pw-select-wrap {
    position: relative;
}
.zh-pw-select-wrap::after {
    content: '-';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #6a6a6a;
    font-size: 14px;
}
.zh-pw-select-wrap .zh-pw-select,
.zh-pw-select-wrap select {
    padding-right: 36px;
}

/* - v1.0.8 FIXES - */

/* Fix: select <option> elements - dark background, light text.
   Browsers don't always inherit from the select, so we must be explicit.
   Note: Firefox/Chrome on Windows use OS rendering; the background/color
   on option is the most reliable cross-browser approach. */
.zh-pw-wizard select option,
.zh-pw-wizard .zh-pw-select option,
.zh-pw-wizard .zh-pw-field select option {
    background-color: #ffffff !important;
    color: #3d3d3d !important;
}

/* Fix: Stripe "Connect with Stripe -" button link text visibility.
   Theme <a> colour overrides were making it invisible / black-on-gold. */
.zh-pw-wizard .zh-pw-btn-primary,
.zh-pw-wizard .zh-pw-btn-primary:link,
.zh-pw-wizard .zh-pw-btn-primary:visited,
.zh-pw-wizard .zh-pw-btn-primary:hover,
.zh-pw-wizard .zh-pw-btn-primary:active,
.zh-pw-wizard a.zh-pw-btn-primary,
.zh-pw-wizard a.zh-pw-btn-primary:link,
.zh-pw-wizard a.zh-pw-btn-primary:visited,
.zh-pw-wizard a.zh-pw-btn-primary:hover {
    color: #000 !important;
    text-decoration: none !important;
}

/* Fix: method cards backup section - ensure consistent layout across all countries */
#zh-backup-method-cards .zh-pw-method-card {
    opacity: 1;
    transition: opacity 0.2s;
}
#zh-backup-method-cards .zh-pw-method-card.zh-unavailable {
    display: none;
}

/* Country search widget */
.zh-pw-country-search-wrap {
    position: relative;
    z-index: 100;
}
.zh-pw-country-search-wrap.open {
    z-index: 10000;
}
.zh-pw-country-search-input {
    width: 100%;
    background: #ffffff !important;
    border: 1px solid #fdf8ec !important;
    border-radius: 8px;
    padding: 11px 40px 11px 14px;
    font-size: 14px;
    color: #3d3d3d !important;
    transition: border-color 0.2s;
    font-family: inherit;
    cursor: pointer;
    caret-color: #3d3d3d !important;
    -webkit-text-fill-color: #3d3d3d !important;
}
.zh-pw-country-search-input:focus,
.zh-pw-country-search-input:active,
.zh-pw-country-search-input:hover {
    outline: none !important;
    color: #3d3d3d !important;
    -webkit-text-fill-color: #3d3d3d !important;
    background: #ffffff !important;
    border-color: #b8860b;
    box-shadow: 0 0 0 3px rgba(184,134,11,0.1);
}
.zh-pw-country-search-input::placeholder { color: #6a6a6a; }
.zh-pw-country-search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6a6a6a;
    pointer-events: none;
    font-size: 14px;
}
.zh-pw-country-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #b8860b;
    border-radius: 8px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 999;
    display: none;
    margin-top: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.zh-pw-country-dropdown.open { display: block; }
.zh-pw-country-option {
    padding: 10px 14px;
    font-size: 14px;
    color: #3d3d3d;
    cursor: pointer;
    transition: background 0.1s;
}
.zh-pw-country-option:hover,
.zh-pw-country-option.highlighted { background: rgba(184,134,11,0.15); color: #b8860b; }
.zh-pw-country-option.selected { background: rgba(184,134,11,0.1); color: #b8860b; font-weight: 600; }
.zh-pw-country-no-results { padding: 12px 14px; color: #6a6a6a; font-size: 13px; }

/* Hidden actual select (used for form submission) */
.zh-pw-country-hidden { display: none !important; }

/* ─── Fee Breakdown Rows (v1.0.38) ───────────────────────────────────── */
.zh-pw-expand-col { text-align: center; padding: 4px !important; }
.zh-pw-expand-btn {
    background: none; border: 1px solid rgba(184,134,11,0.40); cursor: pointer;
    font-size: 12px; color: #1a1a1a; padding: 3px 8px;
    line-height: 1.3; border-radius: 4px;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.zh-pw-expand-btn:hover { background: rgba(184,134,11,0.2); border-color: #b8860b; }

.zh-pw-breakdown-row td { padding: 0 !important; background: #faf8f3; }
.zh-pw-breakdown {
    padding: 10px 16px 10px 24px;
    border-left: 3px solid #b8860b;
    margin: 4px 0;
}
.zh-pw-breakdown-line {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 3px 0; font-size: 13px; color: #6a6a6a;
}
.zh-pw-breakdown-line.zh-pw-breakdown-deduction { color: #b8860b; }
.zh-pw-breakdown-line.zh-pw-breakdown-net {
    font-weight: 700; color: #0a7c00;
    border-top: 1px solid #ecd9a0; margin-top: 4px; padding-top: 6px;
}
.zh-pw-breakdown-line.zh-pw-breakdown-platform {
    font-weight: 600; color: #2271b1;
    border-top: 1px solid #ecd9a0; margin-top: 4px; padding-top: 6px;
}
.zh-pw-breakdown-line.zh-pw-breakdown-crypto { color: #6b21a8; }
.zh-pw-breakdown-line.zh-pw-breakdown-direct {
    font-style: italic; color: #6a6a6a;
}
.zh-pw-breakdown-note {
    font-size: 11px; color: #6a6a6a; margin-left: 6px; font-weight: 400;
}
.zh-pw-breakdown-amount { font-family: 'SF Mono', Consolas, monospace; font-size: 12px; }

/* ═══════════════════════════════════════════════════════════════════════════
 * v1.0.49 — Payout History: collapsible entries on the frontend ledger
 * Problem being solved:
 *   - Payout entries previously had zero styling and stacked flush against
 *     each other, making it hard to read where one ended and the next began.
 *   - Breakdown didn't show adjustments (fixed in PHP via build_payout_breakdown).
 * Design:
 *   - Each payout is now a <details>/<summary> card so vendors can collapse
 *     long histories and expand the ones they care about. The most recent
 *     entry auto-opens. Uses native HTML — no JS dependency.
 *   - Dark theme matching the rest of the ledger widget.
 * ═══════════════════════════════════════════════════════════════════════════ */

.zh-pw-payout-log-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.zh-pw-payout-log-entry {
    background: #fffdf7;
    border: 1px solid rgba(184, 134, 11, 0.25);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.15s ease;
}
.zh-pw-payout-log-entry:hover {
    border-color: rgba(184, 134, 11, 0.5);
}
.zh-pw-payout-log-entry[open] {
    border-color: rgba(184, 134, 11, 0.55);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.zh-pw-payout-log-entry.zh-pw-payout-log-forfeited {
    border-color: rgba(214, 54, 56, 0.35);
    opacity: 0.85;
}

.zh-pw-payout-log-summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    user-select: none;
}
.zh-pw-payout-log-summary::-webkit-details-marker { display: none; }
.zh-pw-payout-log-summary::marker { content: none; }

.zh-pw-payout-log-summary-main {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}
.zh-pw-payout-log-amount {
    font-size: 18px;
    font-weight: 700;
    color: #b8860b;
    font-variant-numeric: tabular-nums;
}
.zh-pw-payout-log-date {
    color: #6a6a6a;
    font-size: 13px;
}

.zh-pw-payout-log-summary-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.zh-pw-payout-log-method {
    font-size: 12px;
    color: #6a6a6a;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: rgba(184, 134, 11, 0.1);
    padding: 3px 9px;
    border-radius: 4px;
}
.zh-pw-payout-log-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 9px;
    border-radius: 4px;
}
.zh-pw-payout-log-badge-forfeit {
    background: rgba(214, 54, 56, 0.15);
    color: #fca5a5;
}
.zh-pw-payout-log-chevron {
    color: #6a6a6a;
    font-size: 14px;
    transition: transform 0.15s ease;
    display: inline-block;
}
.zh-pw-payout-log-entry[open] .zh-pw-payout-log-chevron {
    transform: rotate(180deg);
    color: #b8860b;
}

.zh-pw-payout-log-breakdown {
    padding: 6px 18px 14px;
    border-top: 1px solid rgba(184,134,11,0.12);
}
.zh-pw-payout-log-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    color: #3d3d3d;
    font-size: 14px;
    gap: 12px;
}
.zh-pw-payout-log-row > span:last-child {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.zh-pw-payout-log-row.zh-pw-payout-log-deduction {
    color: #6a6a6a;
    font-size: 13px;
}
.zh-pw-payout-log-row.zh-pw-payout-log-deduction > span:last-child {
    color: #f87171;
}
.zh-pw-payout-log-row.zh-pw-payout-log-credit {
    color: #6a6a6a;
    font-size: 13px;
}
.zh-pw-payout-log-row.zh-pw-payout-log-credit > span:last-child {
    color: #15803d;
}
.zh-pw-payout-log-row.zh-pw-payout-log-net {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid rgba(34, 197, 94, 0.25);
    font-weight: 700;
    font-size: 15px;
}
.zh-pw-payout-log-row.zh-pw-payout-log-net > span {
    color: #15803d;
}

.zh-pw-payout-log-meta {
    padding: 12px 18px 16px;
    border-top: 1px dashed rgba(184,134,11,0.15);
    background: rgba(0, 0, 0, 0.15);
    font-size: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.zh-pw-payout-log-meta-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.zh-pw-payout-log-meta-label {
    color: #6a6a6a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 10px;
    flex-shrink: 0;
    min-width: 70px;
}
.zh-pw-payout-log-meta-value {
    color: #6a6a6a;
    word-break: break-all;
}
.zh-pw-payout-log-meta-ref {
    font-family: 'SF Mono', Consolas, monospace;
    font-size: 11px;
}

@media (max-width: 600px) {
    .zh-pw-payout-log-summary {
        padding: 12px 14px;
        flex-wrap: wrap;
    }
    .zh-pw-payout-log-summary-main { width: 100%; }
    .zh-pw-payout-log-amount { font-size: 17px; }
    .zh-pw-payout-log-breakdown { padding: 4px 14px 12px; }
    .zh-pw-payout-log-meta { padding: 10px 14px 14px; }
}