/* Zukatra — mobile-first investor app theme */
:root {
    --zk-primary: #2E7D32;
    --zk-primary-light: #4CAF50;
    --zk-primary-dark: #1B5E20;
    --zk-bg: #f4f6f5;
    --zk-surface: #ffffff;
    --zk-surface-elevated: #ffffff;
    --zk-card: #ffffff;
    --zk-text: #121a14;
    --zk-muted: #66736a;
    --zk-border: #e4ebe5;
    --zk-radius: 14px;
    --zk-radius-sm: 10px;
    --zk-radius-lg: 18px;
    --zk-space: 8px;
    --zk-nav-height: 64px;
    --zk-header-height: 56px;
    --zk-shell-max: 480px;
    --zk-shell-gap: 16px;
    --zk-shell-radius: 20px;
    --zk-shell-shadow-float: 0 20px 50px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .05);
    --zk-shadow: 0 1px 2px rgba(18, 26, 20, .04), 0 6px 18px rgba(18, 26, 20, .05);
    --zk-shadow-sm: 0 1px 2px rgba(18, 26, 20, .04);
    --zk-focus: 0 0 0 3px color-mix(in srgb, var(--zk-primary) 28%, transparent);
    --zk-font: 'Source Sans 3', system-ui, sans-serif;
    --zk-font-display: 'Outfit', 'Source Sans 3', system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* Default: app fills the viewport (mobile-first) */
body.zk-body {
    margin: 0;
    font-family: var(--zk-font);
    background: var(--zk-bg);
    color: var(--zk-text);
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 100dvh;
    padding: 0;
}

.zk-app-shell {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    min-height: 0;
    margin: 0;
    background: var(--zk-bg);
    position: relative;
    border-radius: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: none;
}

.zk-header {
    background: linear-gradient(135deg, var(--zk-primary) 0%, var(--zk-primary-dark) 100%);
    color: #fff;
    padding: 10px 12px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 14px color-mix(in srgb, var(--zk-primary-dark) 35%, transparent);
    animation: zk-fade-down .35s ease-out;
    flex-shrink: 0;
    border-radius: 0;
}

/* Large screens: framed phone on dark surround */
@media (min-width: 768px) {
    body.zk-body {
        background:
            radial-gradient(ellipse 70% 45% at 50% -8%, color-mix(in srgb, var(--zk-primary) 28%, #0c1410), transparent 55%),
            linear-gradient(165deg, #0e1612 0%, #151c18 45%, #1a1f1c 100%);
        align-items: center;
        justify-content: center;
        padding: var(--zk-shell-gap);
    }

    .zk-app-shell {
        width: min(var(--zk-shell-max), calc(100vw - var(--zk-shell-gap) * 2));
        height: calc(100dvh - var(--zk-shell-gap) * 2);
        max-height: 920px;
        border-radius: var(--zk-shell-radius);
        box-shadow: var(--zk-shell-shadow-float);
    }

    .zk-header {
        border-radius: var(--zk-shell-radius) var(--zk-shell-radius) 0 0;
    }
}

.zk-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--zk-font-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -.02em;
}

.zk-logo { height: 28px; width: auto; }

.zk-header-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    text-decoration: none;
    padding: 0;
    line-height: 1;
    transition: background .15s, transform .12s;
}

.zk-header-icon-btn:hover,
.zk-header-icon-btn:focus {
    background: rgba(255, 255, 255, .24);
    color: #fff;
}

.zk-header-icon-btn:active { transform: scale(.94); }

.zk-header-icon-btn i { font-size: 1.1rem; }

.zk-header-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #e53935;
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--zk-primary) 70%, #000);
}

.zk-header-investor {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border-radius: 999px;
    padding: 4px 10px 4px 4px;
    font-size: .75rem;
    font-weight: 600;
    transition: background .15s;
}

.zk-header-investor:hover { background: rgba(255, 255, 255, .24); color: #fff; }

.zk-header-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--zk-primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
}

.zk-header-investor-label { line-height: 1; }

.zk-balance-badge {
    font-size: .78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: .45em .75em;
    border-radius: 999px;
    background: rgba(255, 255, 255, .95) !important;
    color: var(--zk-primary-dark) !important;
    box-shadow: var(--zk-shadow-sm);
    animation: zk-fade-in .45s ease-out .1s both;
}

.zk-pwa-install-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .72rem;
    font-weight: 700;
    padding: .35em .7em;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .16);
    color: #fff;
    line-height: 1.2;
}

.zk-pwa-install-btn:hover,
.zk-pwa-install-btn:focus {
    background: rgba(255, 255, 255, .28);
    border-color: rgba(255, 255, 255, .8);
    color: #fff;
}

.zk-main {
    padding: 16px 16px calc(var(--zk-nav-height) + 18px);
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    animation: zk-page-enter .4s ease-out;
}

.pb-nav { padding-bottom: calc(var(--zk-nav-height) + 20px) !important; }

.zk-bottom-nav {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    max-width: none;
    height: calc(var(--zk-nav-height) + env(safe-area-inset-bottom, 0));
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--zk-border);
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    z-index: 200;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0));
    box-shadow: 0 -6px 24px rgba(18, 26, 20, .06);
}

.zk-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--zk-muted);
    font-size: .62rem;
    font-weight: 600;
    gap: 2px;
    padding: 8px 12px;
    border-radius: 12px;
    transition: color .2s, background .2s, transform .15s;
    min-width: 56px;
    position: relative;
}

.zk-nav-item i {
    font-size: 1.3rem;
    transition: transform .2s;
}

.zk-nav-item.active {
    color: var(--zk-primary);
    background: color-mix(in srgb, var(--zk-primary) 12%, transparent);
    font-weight: 700;
}

.zk-nav-item.active i {
    transform: translateY(-1px);
}

.zk-nav-item.active::after {
    content: '';
    position: absolute;
    top: 2px;
    width: 16px;
    height: 3px;
    border-radius: 2px;
    background: var(--zk-primary);
}

.zk-nav-item:hover {
    color: var(--zk-primary);
}

/* Off-canvas drawer */
.zk-offcanvas {
    --bs-offcanvas-width: min(300px, 86vw);
    border-radius: 0 var(--zk-radius-lg) var(--zk-radius-lg) 0;
}

.zk-offcanvas .offcanvas-header {
    border-bottom: 1px solid var(--zk-border);
    padding: 14px 16px;
}

.zk-offcanvas-logo {
    height: 28px;
    width: auto;
}

.zk-drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.zk-drawer-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: var(--zk-radius-sm);
    text-decoration: none;
    color: var(--zk-text);
    font-weight: 600;
    font-size: .9rem;
    background: transparent;
    transition: background .15s, color .15s;
}

.zk-drawer-link i {
    font-size: 1.15rem;
    color: var(--zk-muted);
    width: 1.25rem;
    text-align: center;
}

.zk-drawer-link:hover,
.zk-drawer-link.active {
    background: color-mix(in srgb, var(--zk-primary) 10%, transparent);
    color: var(--zk-primary);
}

.zk-drawer-link:hover i,
.zk-drawer-link.active i {
    color: var(--zk-primary);
}

.zk-drawer-promo {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border-radius: var(--zk-radius);
    background: linear-gradient(135deg, var(--zk-primary) 0%, var(--zk-primary-dark) 100%);
    color: #fff;
}

.zk-drawer-promo-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
    color: #ffd54f;
}

.zk-drawer-promo-btn {
    font-weight: 700;
    border-radius: 999px;
    color: var(--zk-primary-dark) !important;
}

/* Cards & stats */
.zk-card {
    background: var(--zk-card);
    border-radius: var(--zk-radius);
    border: 1px solid var(--zk-border);
    box-shadow: var(--zk-shadow-sm);
    margin-bottom: 12px;
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
}

.zk-card.card-body {
    padding: 1rem;
}

.zk-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.zk-stat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.zk-stat-row > .zk-stat-card {
    min-width: 0;
    overflow: hidden;
}

.zk-stat-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--zk-surface-elevated);
    border: 1px solid var(--zk-border);
    border-radius: var(--zk-radius);
    padding: 12px;
    box-shadow: var(--zk-shadow-sm);
    container-type: inline-size;
}

.zk-stat-card > div:not(.zk-stat-icon) {
    flex: 1;
    min-width: 0;
}

.zk-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--zk-primary) 14%, #fff);
    color: var(--zk-primary);
    font-size: 1.15rem;
}

.zk-stat-icon-earn {
    background: color-mix(in srgb, var(--zk-primary) 10%, #fff8e7);
    color: #c79100;
}

.zk-stat {
    background: var(--zk-card);
    border-radius: var(--zk-radius);
    padding: 14px 12px;
    text-align: center;
    border: 1px solid var(--zk-border);
    box-shadow: var(--zk-shadow-sm);
}

.zk-stat-value {
    font-family: var(--zk-font-display);
    font-size: clamp(0.7rem, 9cqi, 1.05rem);
    font-weight: 700;
    color: var(--zk-text);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.zk-stat-label {
    font-size: .68rem;
    color: var(--zk-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    margin-bottom: 2px;
}

/* Home dashboard */
.zk-home {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Ops row: mining timer + Deposit/Withdraw CTAs (single horizontal card) */
.zk-home-ops {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) auto;
    gap: 8px;
    align-items: stretch;
    margin-bottom: 12px;
    padding: 8px;
    background: var(--zk-surface);
    border: 1.5px solid color-mix(in srgb, var(--zk-primary) 55%, var(--zk-border));
    border-radius: var(--zk-radius);
    box-shadow: var(--zk-shadow-sm);
}

.zk-home-ops.is-actions-only {
    grid-template-columns: 1fr;
}

.zk-mining-bar,
.zk-mining-card {
    background: var(--zk-surface);
    color: var(--zk-text);
    border-radius: var(--zk-radius);
    padding: 16px;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
    border: 1.5px solid color-mix(in srgb, var(--zk-primary) 55%, var(--zk-border));
    box-shadow: var(--zk-shadow-sm);
    text-align: center;
}

.zk-home-mining.zk-mining-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    text-align: center;
    padding: 8px 10px;
    margin: 0;
    min-height: 100%;
    border: 1px solid var(--zk-border);
    border-radius: 8px;
    background: var(--zk-surface);
    box-shadow: none;
}

.zk-home-mining-copy {
    min-width: 0;
    width: 100%;
}

.zk-mining-card-label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--zk-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 4px;
}

.zk-home-mining .zk-mining-card-label {
    font-size: .58rem;
    margin-bottom: 0;
    letter-spacing: .04em;
}

.zk-mining-timer {
    font-family: var(--zk-font-display);
    font-size: 2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .08em;
    color: var(--zk-primary);
    line-height: 1.15;
}

.zk-home-mining .zk-mining-timer {
    font-size: 1.35rem;
    letter-spacing: .05em;
    margin: 2px 0 0;
}

.zk-mining-card.is-active .zk-mining-timer {
    animation: zk-pulse-soft 2s ease-in-out infinite;
}

.zk-mining-status {
    color: var(--zk-muted);
    margin-top: 4px;
}

.zk-home-mining .zk-mining-status {
    margin-top: 0;
    font-size: .65rem;
    line-height: 1.2;
}

.zk-home-sq-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    min-width: 148px;
    align-self: stretch;
}

.zk-home-ops.is-actions-only .zk-home-sq-actions {
    min-width: 0;
}

.zk-home-sq-action {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 100%;
    padding: .55rem 12px;
    text-decoration: none;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--zk-primary);
    border: 1px solid var(--zk-primary);
    border-radius: 8px;
    box-shadow: none;
    transition: background .15s, border-color .15s, transform .12s;
}

.zk-home-sq-action:hover,
.zk-home-sq-action:focus {
    color: #fff;
    background: var(--zk-primary-dark);
    border-color: var(--zk-primary-dark);
}

.zk-home-sq-action:active {
    transform: scale(.98);
}

.zk-home-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.zk-home-section-link {
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--zk-primary);
    white-space: nowrap;
}

.zk-home-section-link:hover {
    color: var(--zk-primary-dark);
}

.zk-home-portfolio {
    margin-top: 4px;
    margin-bottom: 14px;
}

.zk-home-how {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin: 4px 0 8px;
    padding: 8px;
    border: none;
    background: transparent;
    color: var(--zk-muted);
    font-size: .8rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, var(--zk-muted) 40%, transparent);
}

.zk-home-how:hover {
    color: var(--zk-primary);
    text-decoration-color: var(--zk-primary);
}

/* Legacy circular actions / mini strip (unused on home; keep for safety) */
.zk-circle-actions {
    display: flex;
    justify-content: center;
    gap: 28px;
    margin-bottom: 16px;
}

.zk-circle-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--zk-text);
    font-size: .78rem;
    font-weight: 600;
}

.zk-circle-action-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--zk-primary) 12%, #fff);
    color: var(--zk-primary);
    font-size: 1.4rem;
    border: 1px solid color-mix(in srgb, var(--zk-primary) 22%, var(--zk-border));
    box-shadow: var(--zk-shadow-sm);
    transition: transform .15s, background .15s, box-shadow .15s;
}

.zk-circle-action:hover { color: var(--zk-text); }

.zk-circle-action:hover .zk-circle-action-icon {
    background: color-mix(in srgb, var(--zk-primary) 18%, #fff);
    transform: translateY(-1px);
}

.zk-circle-action:active .zk-circle-action-icon {
    transform: scale(.94);
}

.zk-mini-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}

.zk-mini-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    background: var(--zk-surface);
    border: 1px solid var(--zk-border);
    border-radius: var(--zk-radius-sm);
    padding: 10px 6px;
    min-width: 0;
    overflow: hidden;
    container-type: inline-size;
    color: var(--zk-text);
}

.zk-mini-item > i {
    font-size: 1.25rem;
    color: var(--zk-primary);
    flex-shrink: 0;
    line-height: 1;
}

.zk-mini-label {
    display: block;
    font-size: .58rem;
    color: var(--zk-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    line-height: 1.2;
}

.zk-mini-item strong {
    font-size: clamp(0.62rem, 8cqi, .74rem);
    font-variant-numeric: tabular-nums;
    color: var(--zk-text);
    display: block;
    max-width: 100%;
    min-width: 0;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.zk-mini-cta {
    background: color-mix(in srgb, var(--zk-primary) 8%, #fff);
    border-color: color-mix(in srgb, var(--zk-primary) 25%, var(--zk-border));
}

.zk-mini-cta strong { color: var(--zk-primary); }

.zk-promo-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}

.zk-promo-tile {
    display: block;
    min-width: 0;
    border-radius: var(--zk-radius-sm);
    overflow: hidden;
    background: #0b3d2e;
    aspect-ratio: 1 / 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    transition: transform .15s ease, box-shadow .15s ease;
}

.zk-promo-tile:active {
    transform: scale(.98);
}

.zk-promo-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Referral */
.zk-referral-panel {
    background: var(--zk-surface);
    border: 1px solid var(--zk-border);
    border-radius: var(--zk-radius);
    padding: 12px;
    margin-bottom: 14px;
}

.zk-referral-headline {
    font-size: .82rem;
    font-weight: 700;
    color: var(--zk-text);
    margin: 0 0 10px;
    line-height: 1.35;
}

.zk-referral-bar {
    background: transparent;
    border-radius: var(--zk-radius-sm);
    padding: 0;
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    border: none;
}

.zk-referral-input {
    flex: 1;
    font-size: .75rem;
    border: 1px solid var(--zk-border);
    border-radius: var(--zk-radius-sm);
    padding: 10px 12px;
    background: color-mix(in srgb, var(--zk-bg) 80%, #fff);
    color: var(--zk-text);
    min-width: 0;
}

.zk-referral-input:focus {
    outline: none;
    border-color: var(--zk-primary);
    box-shadow: var(--zk-focus);
}

.zk-copy-btn {
    flex-shrink: 0;
    min-width: 64px;
    font-weight: 700;
}

.zk-share-row {
    margin-top: 12px;
}

.zk-share-label {
    display: block;
    font-size: .72rem;
    color: var(--zk-muted);
    font-weight: 600;
    margin-bottom: 8px;
}

.zk-share-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.zk-share-chip {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--zk-primary) 8%, #fff);
    color: var(--zk-primary);
    border: 1px solid color-mix(in srgb, var(--zk-primary) 18%, var(--zk-border));
    text-decoration: none;
    font-size: 1rem;
    transition: transform .12s, background .15s;
    cursor: pointer;
}

.zk-share-chip:hover {
    background: color-mix(in srgb, var(--zk-primary) 16%, #fff);
    color: var(--zk-primary);
    transform: translateY(-1px);
}

/* Quick actions (legacy / secondary pages) */
.zk-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.zk-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--zk-text);
    background: var(--zk-card);
    border-radius: var(--zk-radius);
    padding: 12px 4px;
    font-size: .65rem;
    font-weight: 600;
    border: 1px solid var(--zk-border);
    box-shadow: var(--zk-shadow-sm);
    transition: transform .15s, border-color .15s, box-shadow .15s;
}

.zk-action-btn i {
    font-size: 1.4rem;
    color: var(--zk-primary);
    margin-bottom: 4px;
}

.zk-action-btn:hover {
    border-color: color-mix(in srgb, var(--zk-primary) 40%, var(--zk-border));
    color: var(--zk-text);
}

.zk-action-btn:active { transform: scale(.96); }

/* Tutorial banner — only style visible/transitioning slides (do not override Bootstrap display:none) */
.zk-tutorial-block .carousel-item.active,
.zk-tutorial-block .carousel-item-next,
.zk-tutorial-block .carousel-item-prev,
.zk-tutorial-block .carousel-item-start,
.zk-tutorial-block .carousel-item-end {
    display: flex;
    justify-content: center;
}

.zk-tutorial-banner {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    border-radius: var(--zk-radius);
    overflow: hidden;
    aspect-ratio: 2.8 / 1;
    max-height: 108px;
    background: linear-gradient(135deg, var(--zk-primary), var(--zk-primary-dark));
}

.zk-tutorial-banner img,
.zk-tutorial-banner-fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.zk-tutorial-banner-fallback {
    min-height: 80px;
    background: linear-gradient(135deg, var(--zk-primary), var(--zk-primary-dark));
}

.zk-tutorial-banner-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    background: linear-gradient(90deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .25) 70%, transparent);
    color: #fff;
    padding: 10px 14px;
    text-align: left;
}

.zk-tutorial-play {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--zk-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

.zk-tutorial-banner-title {
    font-family: var(--zk-font-display);
    font-weight: 700;
    font-size: .78rem;
    text-transform: none;
    letter-spacing: -.01em;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.zk-tutorial-slide {
    background: linear-gradient(135deg, var(--zk-primary), var(--zk-primary-dark));
    min-height: 120px;
    border-radius: var(--zk-radius);
}

.zk-carousel .carousel-control-prev-icon,
.zk-carousel .carousel-control-next-icon {
    filter: invert(1);
}

/* Ticker */
.zk-ticker-wrap {
    overflow: hidden;
    background: linear-gradient(90deg, var(--zk-primary-dark), color-mix(in srgb, var(--zk-primary) 85%, #000));
    color: #fff;
    border-radius: var(--zk-radius-sm);
    padding: 8px 0;
    margin-bottom: 14px;
    container-type: inline-size;
    container-name: zk-ticker;
}

.zk-ticker {
    display: flex;
    width: max-content;
    white-space: nowrap;
    will-change: transform;
    animation: zk-ticker 24s linear infinite;
}

.zk-ticker-group {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-around;
    box-sizing: border-box;
    min-width: 100%;
    min-width: 100cqw;
    padding-inline-end: 2rem;
}

.zk-ticker-item {
    flex: 0 0 auto;
    padding: 0 24px;
    font-size: .75rem;
    font-weight: 500;
}

.zk-ticker-wrap:hover .zk-ticker {
    animation-play-state: paused;
}

@keyframes zk-ticker {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

/* Segmented market tabs */
.zk-segmented {
    display: flex;
    background: color-mix(in srgb, var(--zk-primary) 8%, #fff);
    border: 1px solid var(--zk-border);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
}

.zk-segmented-item {
    flex: 1;
    text-align: center;
    text-decoration: none;
    color: var(--zk-muted);
    font-size: .8rem;
    font-weight: 600;
    padding: 8px 10px;
    border-radius: 999px;
    transition: background .15s, color .15s, box-shadow .15s;
}

.zk-segmented-item:hover {
    color: var(--zk-primary);
}

.zk-segmented-item.active {
    background: var(--zk-primary);
    color: #fff;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--zk-primary) 35%, transparent);
}

.zk-market-section {
    margin-bottom: 14px;
}

/* Horizontal market package cards */
.zk-market-card {
    display: flex;
    gap: 10px;
    background: var(--zk-surface);
    border: 1px solid var(--zk-border);
    border-radius: var(--zk-radius);
    padding: 8px;
    margin-bottom: 8px;
    box-shadow: none;
}

.zk-market-card-media {
    position: relative;
    width: 60px;
    flex-shrink: 0;
    border-radius: var(--zk-radius-sm);
    overflow: hidden;
    background: color-mix(in srgb, var(--zk-primary) 8%, #fff);
    align-self: stretch;
    min-height: 60px;
}

.zk-market-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.zk-market-card-placeholder {
    width: 100%;
    height: 100%;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--zk-primary);
    font-size: 1.35rem;
}

.zk-market-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: .52rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
    padding: 2px 5px;
    border-radius: 999px;
}

.zk-market-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.zk-market-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.zk-market-card-title {
    font-family: var(--zk-font-display);
    font-size: .84rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    color: var(--zk-text);
}

.zk-market-qty {
    font-size: .62rem;
    font-weight: 700;
    color: var(--zk-muted);
    background: var(--zk-bg);
    border-radius: 999px;
    padding: 2px 6px;
    white-space: nowrap;
}

.zk-market-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.zk-market-metric {
    min-width: 0;
    padding: 4px 5px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--zk-bg) 80%, #fff);
}

.zk-market-metric-label {
    display: block;
    font-size: .54rem;
    color: var(--zk-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.zk-market-metric-value {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--zk-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zk-market-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
}

.zk-market-price {
    font-family: var(--zk-font-display);
    font-weight: 700;
    font-size: .88rem;
    color: var(--zk-primary);
    font-variant-numeric: tabular-nums;
}

.zk-invest-btn {
    min-width: 68px;
    font-weight: 700;
    border-radius: var(--zk-radius-sm) !important;
    padding: .3rem .75rem !important;
}

.zk-invest-btn:active {
    transform: scale(.96);
}

/* Active miner cards */
.zk-active-miner-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.zk-active-miner,
.zk-inv-list-card {
    position: relative;
    background: var(--zk-surface);
    border: 1px solid var(--zk-border);
    border-radius: var(--zk-radius);
    box-shadow: none;
    padding: 12px;
    overflow: hidden;
}

.zk-active-miner::before,
.zk-inv-list-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--zk-primary-light), var(--zk-primary-dark));
    border-radius: 3px 0 0 3px;
}

.zk-active-miner.is-completed::before,
.zk-inv-list-card.is-completed::before {
    background: #78909c;
}

.zk-active-miner.is-cancelled::before,
.zk-inv-list-card.is-cancelled::before {
    background: #c62828;
}

.zk-active-miner-head,
.zk-inv-list-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.zk-active-miner-identity,
.zk-inv-list-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.zk-active-miner-icon,
.zk-inv-list-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--zk-primary) 12%, #fff);
    color: var(--zk-primary);
    font-size: 1rem;
    border: 1px solid color-mix(in srgb, var(--zk-primary) 20%, var(--zk-border));
}

.zk-active-miner-name,
.zk-inv-list-name {
    font-family: var(--zk-font-display);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0;
    line-height: 1.2;
    color: var(--zk-text);
}

.zk-active-miner-meta,
.zk-inv-list-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
    font-size: .72rem;
    color: var(--zk-muted);
    font-variant-numeric: tabular-nums;
}

.zk-active-miner-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--zk-muted) 55%, transparent);
}

.zk-active-miner-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--zk-primary) 12%, #fff);
    color: var(--zk-primary-dark);
    border: 1px solid color-mix(in srgb, var(--zk-primary) 22%, transparent);
}

.zk-active-miner-status--completed {
    background: #eceff1;
    color: #546e7a;
    border-color: #cfd8dc;
}

.zk-active-miner-status--cancelled {
    background: #fdecea;
    color: #b71c1c;
    border-color: #ffcdd2;
}

.zk-active-miner-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--zk-primary-light);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--zk-primary-light) 55%, transparent);
    animation: zk-status-pulse 1.8s ease-out infinite;
}

.zk-active-miner-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 8px;
}

.zk-active-miner-metric {
    background: color-mix(in srgb, var(--zk-bg) 70%, #fff);
    border: 1px solid var(--zk-border);
    border-radius: var(--zk-radius-sm);
    padding: 8px 10px;
    min-width: 0;
    overflow: hidden;
    container-type: inline-size;
}

.zk-active-miner-metric-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--zk-muted);
    margin-bottom: 3px;
}

.zk-active-miner-metric-label i {
    font-size: .68rem;
    opacity: .85;
}

.zk-active-miner-metric-value {
    display: block;
    font-family: var(--zk-font-display);
    font-size: clamp(0.72rem, 11cqi, .9rem);
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--zk-text);
    line-height: 1.15;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.zk-active-miner-metric-value.is-earn {
    color: var(--zk-primary);
}

.zk-active-miner-metric-sub {
    display: block;
    margin-top: 4px;
    font-size: .62rem;
    line-height: 1.3;
}

.zk-active-miner-details,
.zk-maturity-note-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 10px;
    border-radius: var(--zk-radius-sm);
    background: color-mix(in srgb, var(--zk-bg) 55%, #fff);
    border: 1px solid var(--zk-border);
}

.zk-active-miner-detail,
.zk-maturity-note-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.zk-active-miner-detail-label,
.zk-maturity-note-label {
    font-size: .7rem;
    color: var(--zk-muted);
    font-weight: 500;
}

.zk-active-miner-detail-value,
.zk-maturity-note-value {
    font-size: .76rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--zk-text);
    text-align: right;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.zk-active-miner-detail-value.is-strong,
.zk-maturity-note-value.is-strong {
    font-family: var(--zk-font-display);
    font-weight: 700;
    color: var(--zk-primary-dark);
}

.zk-active-miner-timer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: var(--zk-radius-sm);
    background: var(--zk-bg);
    border: 1px dashed color-mix(in srgb, var(--zk-primary) 28%, var(--zk-border));
}

.zk-active-miner-timer-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .7rem;
    font-weight: 600;
    color: var(--zk-muted);
}

.zk-active-miner-timer-value {
    font-family: var(--zk-font-display);
    font-size: .9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    color: var(--zk-primary);
}

.zk-active-miner-cashout {
    margin-top: 8px;
}

.zk-maturity-note {
    margin-top: 2px;
}

.zk-maturity-note-line {
    font-size: .75rem;
    color: var(--zk-muted);
    margin-bottom: 8px;
}

.zk-inv-list-card .zk-maturity-note {
    margin-top: 10px;
}

@keyframes zk-status-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--zk-primary-light) 45%, transparent); }
    70% { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* Legacy package cards */
.zk-package-card {
    border-radius: var(--zk-radius);
    overflow: hidden;
    background: var(--zk-card);
    margin-bottom: 10px;
    border: 1px solid var(--zk-border);
    box-shadow: var(--zk-shadow-sm);
}

.zk-package-card .card-img-top {
    height: 100px;
    object-fit: cover;
    background: linear-gradient(135deg, color-mix(in srgb, var(--zk-primary) 12%, #fff), color-mix(in srgb, var(--zk-primary) 22%, #fff));
}

.zk-package-card .card-body {
    padding: 14px;
}

.zk-badge-hot { background: #e64a19; }
.zk-badge-new { background: #1976D2; }
.zk-badge-popular { background: #7B1FA2; }
.zk-badge-best_value { background: var(--zk-primary); }

/* FAB + Connect With Us sheet */
.zk-fab {
    position: absolute;
    bottom: calc(var(--zk-nav-height) + 16px);
    right: 16px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 6px 20px rgba(37, 211, 102, .4);
    z-index: 150;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
}

.zk-fab:hover {
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(37, 211, 102, .45);
}

.zk-support-modal .modal-dialog {
    margin: 1rem auto;
}

.zk-invest-modal .modal-dialog {
    margin: 1rem auto auto;
    max-width: calc(100% - 2rem);
}

@media (max-width: 576px) {
    .zk-invest-modal .modal-dialog {
        margin-top: 0.75rem;
    }
}

.zk-support-sheet {
    border: none;
    border-radius: var(--zk-radius-lg);
    box-shadow: var(--zk-shadow);
    overflow: hidden;
}

.zk-support-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--zk-radius-sm);
    margin-bottom: 6px;
    background: color-mix(in srgb, var(--zk-bg) 70%, #fff);
    border: 1px solid var(--zk-border);
    transition: background .15s;
}

.zk-support-row:last-child { margin-bottom: 0; }

.zk-support-row:hover {
    background: color-mix(in srgb, var(--zk-primary) 8%, #fff);
}

.zk-support-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    background: #e8f5e9;
    color: #2e7d32;
}

.zk-support-icon-whatsapp { background: #e8f8ef; color: #25d366; }
.zk-support-icon-telegram { background: #e8f4fc; color: #229ed9; }
.zk-support-icon-email { background: #f3eef8; color: #7b1fa2; }
.zk-support-icon-phone { background: #fff3e0; color: #ef6c00; }

.zk-support-row-body { flex: 1; min-width: 0; }

.zk-support-link:hover {
    background: color-mix(in srgb, var(--zk-primary) 8%, #fff);
}

/* Category tabs (legacy) */
.zk-tabs .nav-link {
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--zk-muted);
    padding: 6px 14px;
    border: 1px solid transparent;
}

.zk-tabs .nav-link:hover {
    color: var(--zk-primary);
}

.zk-tabs .nav-link.active {
    background: var(--zk-primary);
    color: #fff;
}

/* Guest auth — brand-first */
body.zk-guest-body {
    margin: 0;
    font-family: var(--zk-font);
    min-height: 100vh;
    min-height: 100dvh;
    color: var(--zk-text);
    background:
        radial-gradient(ellipse 90% 55% at 50% -15%, color-mix(in srgb, var(--zk-primary-light) 45%, transparent), transparent 55%),
        radial-gradient(circle at 85% 80%, color-mix(in srgb, var(--zk-primary) 22%, transparent), transparent 40%),
        linear-gradient(165deg, var(--zk-primary-dark) 0%, #0a1f12 45%, #0d1510 100%);
    -webkit-font-smoothing: antialiased;
}

.zk-guest-wrap {
    max-width: 420px;
    margin: 0 auto;
    width: 100%;
    animation: zk-page-enter .45s ease-out;
}

.zk-auth-card {
    border-radius: 16px !important;
    max-width: 400px;
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .28) !important;
    backdrop-filter: blur(8px);
}

.zk-auth-brand {
    text-align: center;
    margin-bottom: 1.5rem;
}

.zk-auth-brand-name {
    font-family: var(--zk-font-display);
    font-weight: 700;
    font-size: 1.85rem;
    letter-spacing: -.03em;
    color: var(--zk-primary);
    line-height: 1.15;
    margin: 0;
}

.zk-auth-brand-tagline {
    color: var(--zk-muted);
    font-size: .875rem;
    margin: .4rem 0 0;
}

.zk-auth-logo {
    max-height: 56px;
    width: auto;
    margin-bottom: .65rem;
}

.zk-auth-card .form-label {
    font-weight: 600;
    font-size: .875rem;
    color: var(--zk-text);
}

.zk-auth-card .form-control,
.zk-auth-card .form-select {
    border-radius: var(--zk-radius-sm);
    border-color: var(--zk-border);
    padding: .6rem .85rem;
}

.zk-auth-card .form-control:focus,
.zk-auth-card .form-select:focus {
    border-color: var(--zk-primary);
    box-shadow: var(--zk-focus);
}

.zk-form-control,
.form-control:focus,
.form-select:focus {
    border-color: var(--zk-primary);
    box-shadow: var(--zk-focus);
}

.zk-main .form-control,
.zk-main .form-select {
    border-radius: var(--zk-radius-sm);
    border-color: var(--zk-border);
    padding: .6rem .85rem;
}

.zk-main .form-label {
    margin-bottom: .4rem;
}

.btn-zk-primary {
    background: var(--zk-primary);
    border-color: var(--zk-primary);
    color: #fff;
    font-weight: 600;
    border-radius: var(--zk-radius-sm);
    padding: .55rem 1.1rem;
    transition: background .15s, border-color .15s, transform .1s;
}

.btn-zk-primary:hover,
.btn-zk-primary:focus {
    background: var(--zk-primary-dark);
    border-color: var(--zk-primary-dark);
    color: #fff;
}

.btn-zk-primary:active {
    transform: scale(.98);
}

.btn-outline-success {
    --bs-btn-color: var(--zk-primary);
    --bs-btn-border-color: var(--zk-primary);
    --bs-btn-hover-bg: var(--zk-primary);
    --bs-btn-hover-border-color: var(--zk-primary);
    --bs-btn-active-bg: var(--zk-primary-dark);
    --bs-btn-active-border-color: var(--zk-primary-dark);
}

/* ===== Daily WhatsApp Tasks ===== */
.zk-tasks-page {
    margin: -16px -16px 0;
    padding: 0 16px 8px;
}

.zk-tasks-hero {
    margin: 0 -16px 12px;
    padding: 18px 20px 8px;
    text-align: center;
    background: color-mix(in srgb, var(--zk-primary) 8%, #f4faf5);
}

.zk-tasks-hero-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    color: #fff;
    background: #25d366;
    box-shadow:
        0 0 0 8px color-mix(in srgb, #25d366 16%, transparent),
        0 6px 16px color-mix(in srgb, #25d366 30%, transparent);
}

.zk-tasks-hero-title {
    font-family: var(--zk-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--zk-primary-dark);
    margin: 0;
    line-height: 1.25;
}

.zk-tasks-welcome {
    background: #fff;
    border: 1px solid #d0d5d2;
    border-radius: 10px;
    padding: 14px 14px 12px;
    margin-bottom: 14px;
    text-align: center;
}

.zk-tasks-welcome-line {
    font-size: .95rem;
    font-weight: 700;
    color: var(--zk-text);
    margin-bottom: 4px;
}

.zk-tasks-welcome-sub {
    font-size: .82rem;
    font-weight: 600;
    color: #c62828;
    margin-bottom: 10px;
}

.zk-tasks-welcome-offer {
    margin: 0 0 10px;
    font-size: .92rem;
    font-weight: 700;
    color: var(--zk-text);
    line-height: 1.35;
}

.zk-tasks-welcome-offer strong {
    font-weight: 800;
}

.zk-tasks-countdown {
    margin: 0;
    font-size: .86rem;
    font-weight: 700;
    color: #d32f2f;
    font-variant-numeric: tabular-nums;
}

.zk-tasks-countdown-val {
    font-variant-numeric: tabular-nums;
}

.zk-tasks-instructions {
    margin-bottom: 14px;
}

.zk-tasks-instructions-banner {
    display: inline-block;
    background: #ffeb3b;
    color: #111;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    padding: 4px 10px;
    margin-bottom: 8px;
    border-radius: 2px;
}

.zk-tasks-instructions-lead {
    margin: 0 0 10px;
    font-size: .86rem;
    font-weight: 700;
    color: #d32f2f;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.zk-tasks-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.zk-tasks-steps li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .82rem;
    line-height: 1.4;
    color: var(--zk-text);
}

.zk-tasks-step-num {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 700;
    color: #fff;
    background: var(--zk-primary);
    margin-top: 1px;
}

.zk-tasks-reward {
    color: #d32f2f;
    font-weight: 800;
}

.zk-tasks-instructions-divider {
    height: 2px;
    margin-top: 12px;
    background: color-mix(in srgb, var(--zk-primary) 55%, #fff);
    border-radius: 999px;
}

.zk-tasks-progress-block {
    margin-bottom: 14px;
}

.zk-tasks-progress-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.zk-tasks-progress-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 700;
    color: #fff;
    background: var(--zk-primary-dark);
}

.zk-tasks-progress-caption {
    font-size: .8rem;
    font-weight: 600;
    color: #555;
}

.zk-tasks-squares {
    display: flex;
    gap: 6px;
}

.zk-tasks-square {
    flex: 1;
    max-width: 44px;
    height: 14px;
    border-radius: 2px;
    background: #e8efc8;
}

.zk-tasks-square.is-filled {
    background: #4caf7a;
}

.zk-tasks-template {
    background: #fff;
    border: 1px solid var(--zk-border);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

.zk-tasks-template-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.zk-tasks-template-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--zk-primary) 14%, #fff);
    color: var(--zk-primary);
    font-size: 1.1rem;
}

.zk-tasks-template-title {
    font-size: .92rem;
    font-weight: 700;
    color: var(--zk-text);
    line-height: 1.2;
}

.zk-tasks-template-hint {
    font-size: .72rem;
    font-weight: 600;
    color: var(--zk-primary-dark);
    margin-top: 2px;
}

.zk-tasks-template-body {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f3f6f4;
    border: 1px dashed #9aa89f;
    font-size: .8rem;
    line-height: 1.45;
    color: var(--zk-muted);
    white-space: pre-wrap;
    word-break: break-word;
}

.zk-tasks-copy-btn {
    border-radius: 10px !important;
    padding: .55rem 1.1rem !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    background: var(--zk-primary-dark) !important;
    border: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.zk-tasks-copy-btn:hover,
.zk-tasks-copy-btn:focus {
    color: #fff !important;
    filter: brightness(.96);
}

.zk-tasks-earn-line {
    margin: 0 0 8px;
    font-size: .9rem;
    font-weight: 700;
    color: #d32f2f;
}

.zk-tasks-earn-line strong {
    font-weight: 800;
}

.zk-tasks-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.zk-tasks-section-title {
    font-family: var(--zk-font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--zk-primary-dark);
    margin: 0;
}

.zk-tasks-section-timer {
    font-size: .78rem;
    font-weight: 700;
    color: #d32f2f;
    white-space: nowrap;
}

.zk-tasks-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.zk-tasks-list .zk-stagger-item {
    animation-delay: calc(var(--zk-stagger, 0) * .05s);
}

.zk-task-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px 12px 10px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--zk-border);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .04);
    transition: border-color .15s, box-shadow .15s, transform .12s;
}

.zk-task-item.is-invite:active,
.zk-task-item.is-verify:active {
    transform: scale(.99);
}

.zk-task-item.is-done {
    background: color-mix(in srgb, var(--zk-primary) 6%, #fff);
    border-color: color-mix(in srgb, var(--zk-primary) 22%, var(--zk-border));
    opacity: 1;
}

.zk-task-item.is-verify {
    border-color: color-mix(in srgb, #f9a825 45%, var(--zk-border));
    box-shadow: 0 2px 12px color-mix(in srgb, #f9a825 14%, transparent);
}

.zk-task-item.is-locked {
    opacity: .72;
}

.zk-task-slot {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--zk-font-display);
    font-size: .85rem;
    font-weight: 700;
    color: var(--zk-primary-dark);
    background: #d8efe0;
}

.zk-task-item.is-done .zk-task-slot {
    color: #fff;
    background: var(--zk-primary);
}

.zk-task-item.is-verify .zk-task-slot {
    color: #5d4037;
    background: #ffe082;
}

.zk-task-main {
    flex: 1;
    min-width: 0;
}

.zk-task-phone {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .92rem;
    font-weight: 700;
    color: var(--zk-text);
    line-height: 1.2;
}

.zk-task-phone i {
    color: #25d366;
    font-size: 1.05rem;
}

.zk-task-item.is-done .zk-task-phone {
    color: var(--zk-muted);
}

.zk-task-meta {
    margin-top: 2px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--zk-muted);
}

.zk-task-action {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.zk-task-btn {
    border-radius: 999px !important;
    padding: .4rem .95rem !important;
    font-size: .75rem !important;
    font-weight: 600 !important;
    border: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.zk-task-btn-invite {
    color: #fff !important;
    background: #1ebe57 !important;
    box-shadow: 0 2px 8px color-mix(in srgb, #25d366 30%, transparent);
}

.zk-task-btn-invite:hover,
.zk-task-btn-invite:focus {
    color: #fff !important;
    filter: brightness(.96);
}

.zk-task-btn-verify {
    color: #fff !important;
    background: var(--zk-primary) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--zk-primary) 28%, transparent);
}

.zk-task-btn-verify:hover,
.zk-task-btn-verify:focus {
    color: #fff !important;
    filter: brightness(.96);
}

.zk-task-reopen {
    font-size: .68rem;
    font-weight: 600;
    color: #1ebe57;
    text-decoration: none;
}

.zk-task-reopen:hover,
.zk-task-reopen:focus {
    color: #128c3a;
    text-decoration: underline;
}

.zk-task-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: .28rem .7rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
}

.zk-task-badge-done {
    color: var(--zk-primary-dark);
    background: color-mix(in srgb, var(--zk-primary) 16%, #fff);
}

.zk-task-badge-locked {
    color: var(--zk-muted);
    background: color-mix(in srgb, var(--zk-muted) 12%, #fff);
}

.zk-tasks-empty {
    text-align: center;
    padding: 28px 16px;
    background: #fff;
    border: 1px dashed var(--zk-border);
    border-radius: 12px;
    color: var(--zk-muted);
    font-size: .85rem;
}

.zk-tasks-empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 10px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--zk-primary) 10%, #fff);
    color: var(--zk-primary);
    font-size: 1.35rem;
}

.zk-task-done { opacity: .6; }

/* Notification inbox */
.zk-notif-inbox {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.zk-notif-toolbar {
    margin: 0;
}

.zk-notif-mark-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: .7rem 1rem;
    border: 1px solid color-mix(in srgb, var(--zk-primary) 35%, var(--zk-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--zk-primary) 8%, #fff);
    color: var(--zk-primary-dark);
    font-family: var(--zk-font);
    font-size: .82rem;
    font-weight: 700;
    line-height: 1;
    transition: background .15s, border-color .15s, transform .12s;
}

.zk-notif-mark-all:hover,
.zk-notif-mark-all:focus-visible {
    background: color-mix(in srgb, var(--zk-primary) 14%, #fff);
    border-color: color-mix(in srgb, var(--zk-primary) 50%, var(--zk-border));
    outline: none;
}

.zk-notif-mark-all:active {
    transform: scale(.98);
}

.zk-notif-mark-all i {
    font-size: 1.05rem;
}

.zk-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: var(--zk-card);
    border: 1px solid var(--zk-border);
    border-radius: var(--zk-radius);
    box-shadow: var(--zk-shadow-sm);
    position: relative;
    overflow: hidden;
    animation: zk-page-enter .35s ease-out both;
}

.zk-notif-item.is-unread {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--zk-notif-accent, var(--zk-primary)) 14%, transparent) 0, transparent 28%),
        var(--zk-card);
    border-color: color-mix(in srgb, var(--zk-notif-accent, var(--zk-primary)) 28%, var(--zk-border));
    box-shadow: var(--zk-shadow);
}

.zk-notif-item.is-unread::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--zk-notif-accent, var(--zk-primary));
}

.zk-notif-item.is-read {
    opacity: .88;
}

.zk-notif-item.is-read .zk-notif-title {
    font-weight: 600;
}

.zk-notif-tone-primary { --zk-notif-accent: var(--zk-primary); }
.zk-notif-tone-success { --zk-notif-accent: #2e7d32; }
.zk-notif-tone-info { --zk-notif-accent: #1976d2; }
.zk-notif-tone-warning { --zk-notif-accent: #c77700; }
.zk-notif-tone-danger { --zk-notif-accent: #c62828; }

.zk-notif-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--zk-notif-accent, var(--zk-primary)) 14%, #fff);
    color: var(--zk-notif-accent, var(--zk-primary));
    font-size: 1.1rem;
    line-height: 1;
}

.zk-notif-item.is-read .zk-notif-icon {
    background: color-mix(in srgb, var(--zk-muted) 10%, #fff);
    color: var(--zk-muted);
}

.zk-notif-body {
    min-width: 0;
    flex: 1;
}

.zk-notif-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.zk-notif-title {
    margin: 0;
    font-family: var(--zk-font-display);
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--zk-text);
    line-height: 1.25;
}

.zk-notif-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--zk-notif-accent, var(--zk-primary));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--zk-notif-accent, var(--zk-primary)) 22%, transparent);
}

.zk-notif-text {
    margin: 0 0 8px;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--zk-muted);
}

.zk-notif-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: .72rem;
    color: color-mix(in srgb, var(--zk-muted) 85%, #fff);
}

.zk-notif-read-btn {
    border: none;
    background: color-mix(in srgb, var(--zk-primary) 10%, #fff);
    color: var(--zk-primary-dark);
    font-size: .72rem;
    font-weight: 700;
    padding: .35rem .7rem;
    border-radius: 999px;
    line-height: 1;
    transition: background .15s, transform .12s;
}

.zk-notif-read-btn:hover,
.zk-notif-read-btn:focus-visible {
    background: color-mix(in srgb, var(--zk-primary) 18%, #fff);
    outline: none;
}

.zk-notif-read-btn:active {
    transform: scale(.96);
}

.zk-notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 36px 20px;
    background: var(--zk-card);
    border: 1px dashed var(--zk-border);
    border-radius: var(--zk-radius);
}

.zk-notif-empty-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    background: color-mix(in srgb, var(--zk-primary) 10%, #fff);
    color: var(--zk-primary);
    font-size: 1.35rem;
}

.zk-notif-empty-title {
    margin: 0 0 4px;
    font-family: var(--zk-font-display);
    font-size: .95rem;
    font-weight: 700;
    color: var(--zk-text);
}

.zk-notif-empty-text {
    margin: 0;
    font-size: .8rem;
    color: var(--zk-muted);
    max-width: 240px;
    line-height: 1.4;
}

.zk-flash {
    font-size: .85rem;
    border-radius: var(--zk-radius-sm);
}

.zk-section-title {
    font-family: var(--zk-font-display);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.01em;
    margin-bottom: .5rem;
    color: var(--zk-text);
}

.zk-page-heading {
    font-family: var(--zk-font-display);
    font-weight: 700;
    letter-spacing: -.02em;
}

.zk-img-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--zk-radius-sm);
}

.zk-asset-frame {
    width: 100%;
    height: 420px;
    border: 0;
    border-radius: var(--zk-radius);
}

.zk-inline-sm { font-size: .85rem; }

/* Stagger entrance on home */
.zk-stagger-item {
    animation: zk-page-enter .45s ease-out both;
}

.zk-home .zk-stagger-item:nth-child(1) { animation-delay: .02s; }
.zk-home .zk-stagger-item:nth-child(2) { animation-delay: .06s; }
.zk-home .zk-stagger-item:nth-child(3) { animation-delay: .1s; }
.zk-home .zk-stagger-item:nth-child(4) { animation-delay: .14s; }
.zk-home .zk-stagger-item:nth-child(5) { animation-delay: .18s; }
.zk-home .zk-stagger-item:nth-child(6) { animation-delay: .22s; }
.zk-home .zk-stagger-item:nth-child(7) { animation-delay: .26s; }
.zk-home .zk-stagger-item:nth-child(8) { animation-delay: .3s; }

/* Motion */
@keyframes zk-fade-down {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes zk-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes zk-page-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes zk-pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: .88; }
}

@keyframes zk-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .zk-header,
    .zk-balance-badge,
    .zk-main,
    .zk-guest-wrap,
    .zk-mining-timer,
    .zk-mining-card.is-active .zk-mining-timer,
    .zk-stagger-item,
    .zk-active-miner-pulse {
        animation: none !important;
    }

    .zk-ticker {
        animation: zk-ticker 36s linear infinite !important;
    }
}

@media (max-width: 360px) {
    .zk-market-metrics {
        grid-template-columns: repeat(2, 1fr);
    }

    .zk-mini-strip {
        gap: 6px;
    }

    .zk-mini-item {
        padding: 8px 4px;
    }

    .zk-mini-item > i {
        font-size: 1.1rem;
    }

    .zk-mini-label {
        font-size: .52rem;
    }

    .zk-promo-strip {
        gap: 6px;
    }

    .zk-header-investor-label { display: none !important; }
}

/* My Account — mockup layout + horizontal icon grid */
.zk-my {
    margin: -16px -16px 0;
    padding-bottom: 8px;
}

.zk-my-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 16px 28px;
    background:
        radial-gradient(circle at 12% 30%, color-mix(in srgb, var(--zk-primary-light) 35%, transparent) 0 2px, transparent 3px),
        radial-gradient(circle at 88% 55%, color-mix(in srgb, var(--zk-primary) 28%, transparent) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 40% 80%, color-mix(in srgb, var(--zk-primary-light) 22%, transparent) 0 1.5px, transparent 2.5px),
        linear-gradient(165deg, color-mix(in srgb, var(--zk-primary-light) 55%, #e8f5e9) 0%, color-mix(in srgb, var(--zk-primary) 18%, #f1f8f2) 100%);
    border-radius: 0 0 var(--zk-radius-lg) var(--zk-radius-lg);
}

.zk-my-avatar {
    position: relative;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--zk-primary) 12%, #fff);
    border: 2px solid color-mix(in srgb, var(--zk-primary) 35%, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
}

.zk-my-avatar-initial {
    font-family: var(--zk-font-display);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--zk-primary-dark);
}

.zk-my-avatar-cam {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--zk-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    border: 2px solid #fff;
}

.zk-my-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.zk-my-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: var(--zk-primary-dark);
    font-size: .72rem;
    font-weight: 600;
    box-shadow: var(--zk-shadow-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zk-my-chip i {
    color: var(--zk-primary);
    font-size: .75rem;
}

.zk-my-chip-muted {
    color: var(--zk-text);
}

.zk-my-chip-label {
    color: var(--zk-primary);
    font-weight: 700;
}

.zk-tx-filters {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.zk-tx-filters::-webkit-scrollbar {
    display: none;
}

.zk-tx-filter-chip {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: .35rem .75rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    color: var(--zk-muted);
    background: color-mix(in srgb, var(--zk-bg) 55%, #fff);
    border: 1px solid var(--zk-border);
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.zk-tx-filter-chip:hover {
    color: var(--zk-primary-dark);
    border-color: color-mix(in srgb, var(--zk-primary) 30%, var(--zk-border));
}

.zk-tx-filter-chip.active {
    color: #fff;
    background: var(--zk-primary);
    border-color: var(--zk-primary);
}

.zk-my-assets {
    margin: -14px 12px 10px;
    padding: 16px;
    background: var(--zk-surface);
    border-radius: var(--zk-radius-lg);
    box-shadow: var(--zk-shadow);
    border: 1px solid var(--zk-border);
    position: relative;
    z-index: 1;
    min-width: 0;
    overflow: hidden;
    container-type: inline-size;
}

.zk-my-assets-label {
    font-size: .78rem;
    color: var(--zk-muted);
    font-weight: 600;
}

.zk-my-assets-value {
    font-family: var(--zk-font-display);
    font-size: clamp(0.72rem, 11cqi, 1.65rem);
    font-weight: 700;
    color: var(--zk-primary);
    line-height: 1.15;
    margin: 2px 0 14px;
    font-variant-numeric: tabular-nums;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.zk-my-assets-actions {
    display: flex;
    gap: 10px;
}

.zk-my-pill {
    flex: 1;
    border-radius: 999px !important;
    font-weight: 700;
    padding: .55rem 1rem;
}

.zk-my-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    margin: 0 12px 10px;
    background: var(--zk-border);
    border-radius: var(--zk-radius);
    overflow: hidden;
    border: 1px solid var(--zk-border);
}

.zk-my-split-item {
    background: var(--zk-surface);
    padding: 12px 14px;
    text-align: center;
    min-width: 0;
    overflow: hidden;
    container-type: inline-size;
}

.zk-my-split-label {
    font-size: .7rem;
    color: var(--zk-muted);
    font-weight: 600;
    margin-bottom: 2px;
}

.zk-my-split-value {
    font-family: var(--zk-font-display);
    font-weight: 700;
    font-size: clamp(0.72rem, 11cqi, 1.05rem);
    color: var(--zk-text);
    font-variant-numeric: tabular-nums;
    max-width: 100%;
    min-width: 0;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.zk-my-quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 12px 14px;
    background: var(--zk-surface);
    border: 1px solid var(--zk-border);
    border-radius: var(--zk-radius);
    overflow: hidden;
}

.zk-my-quick-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 10px;
    text-decoration: none;
    color: var(--zk-text);
    font-size: .78rem;
    font-weight: 600;
    transition: background .15s;
}

.zk-my-quick-item:first-child {
    border-right: 1px solid var(--zk-border);
}

.zk-my-quick-item:hover {
    background: color-mix(in srgb, var(--zk-primary) 6%, #fff);
    color: var(--zk-primary-dark);
}

.zk-my-quick-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    flex-shrink: 0;
}

.zk-my-quick-icon-fund {
    background: color-mix(in srgb, var(--zk-primary) 14%, #fff);
    color: var(--zk-primary);
}

.zk-my-quick-icon-withdraw {
    background: #e8f1fb;
    color: #1976d2;
}

.zk-my-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 0 12px 14px;
    padding: 12px 10px;
    background: var(--zk-surface);
    border: 1px solid var(--zk-border);
    border-radius: var(--zk-radius);
}

.zk-my-grid-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
    min-height: 64px;
    padding: 8px 6px;
    border: none;
    border-radius: var(--zk-radius-sm);
    background: transparent;
    color: var(--zk-text);
    font-size: .65rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.zk-my-grid-item i {
    font-size: 1.15rem;
    color: var(--zk-primary);
    line-height: 1;
}

.zk-my-grid-item:hover,
.zk-my-grid-item:focus-visible {
    background: color-mix(in srgb, var(--zk-primary) 8%, #fff);
    color: var(--zk-primary-dark);
    outline: none;
}

.zk-my-grid-item.active {
    background: color-mix(in srgb, var(--zk-primary) 12%, #fff);
    color: var(--zk-primary-dark);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zk-primary) 28%, transparent);
}

.zk-my-grid-item-disabled {
    opacity: .55;
    cursor: not-allowed;
}

.zk-my-grid-item-danger i {
    color: #c62828;
}

.zk-my-grid-item-danger:hover {
    background: #fdecea;
    color: #b71c1c;
}

.zk-my-grid-logout {
    margin: 0;
    display: contents;
}

.zk-my-grid-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #d32f2f;
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.zk-my-grid-soon {
    font-size: .55rem;
    font-weight: 700;
    color: var(--zk-muted);
    text-transform: uppercase;
    letter-spacing: .02em;
}

#zk-pwa-installed-my i {
    color: var(--zk-primary);
}

@media (display-mode: standalone) {
    #zk-pwa-install-my {
        display: none !important;
    }

    #zk-pwa-installed-my {
        display: flex !important;
    }
}

.zk-my-panels {
    padding: 0 12px;
    scroll-margin-top: 8px;
}

/* My Account — settings panels */
.zk-settings-card {
    background: var(--zk-surface);
    border: 1px solid var(--zk-border);
    border-radius: var(--zk-radius-lg);
    box-shadow: var(--zk-shadow);
    padding: 16px;
    margin-bottom: 12px;
    animation: zk-fade-in .35s ease-out both;
}

.zk-settings-card + .zk-settings-card {
    animation-delay: .05s;
}

.zk-settings-card + .zk-settings-card + .zk-settings-card {
    animation-delay: .1s;
}

.zk-settings-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.zk-settings-head-grow {
    flex: 1;
    min-width: 0;
}

.zk-settings-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--zk-primary);
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--zk-primary) 14%, #fff), color-mix(in srgb, var(--zk-primary-light) 8%, #fff));
    border: 1px solid color-mix(in srgb, var(--zk-primary) 18%, transparent);
}

.zk-settings-icon-link {
    color: #1565c0;
    background: linear-gradient(145deg, #e3f2fd, #f5f9fc);
    border-color: color-mix(in srgb, #1565c0 16%, transparent);
}

.zk-settings-icon-bell {
    color: #ef6c00;
    background: linear-gradient(145deg, #fff3e0, #fffaf5);
    border-color: color-mix(in srgb, #ef6c00 16%, transparent);
}

.zk-settings-icon-lock {
    color: #6a1b9a;
    background: linear-gradient(145deg, #f3e5f5, #faf7fb);
    border-color: color-mix(in srgb, #6a1b9a 14%, transparent);
}

.zk-settings-icon-pin {
    color: #c62828;
    background: linear-gradient(145deg, #ffebee, #fff8f8);
    border-color: color-mix(in srgb, #c62828 14%, transparent);
}

.zk-settings-title {
    font-family: var(--zk-font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--zk-text);
    margin: 0;
    line-height: 1.25;
}

.zk-settings-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.zk-settings-sub {
    margin: 3px 0 0;
    font-size: .78rem;
    color: var(--zk-muted);
    line-height: 1.35;
}

.zk-settings-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.zk-field {
    margin: 0;
}

.zk-field-label {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    color: var(--zk-muted);
    margin-bottom: 6px;
    letter-spacing: .01em;
}

.zk-field-input,
.zk-settings-form .form-control,
.zk-share-field-input {
    background: color-mix(in srgb, var(--zk-bg) 65%, #fff) !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    padding: .7rem .95rem !important;
    font-size: .92rem;
    color: var(--zk-text);
    transition: background .15s, border-color .15s, box-shadow .15s;
}

.zk-field-input:hover,
.zk-settings-form .form-control:hover,
.zk-share-field-input:hover {
    background: color-mix(in srgb, var(--zk-bg) 40%, #fff) !important;
}

.zk-field-input:focus,
.zk-settings-form .form-control:focus,
.zk-share-field-input:focus {
    background: #fff !important;
    border-color: var(--zk-primary) !important;
    box-shadow: var(--zk-focus) !important;
    outline: none;
}

.zk-field-input[readonly],
.zk-share-field-input[readonly] {
    color: var(--zk-text);
    cursor: default;
}

.zk-field-locked {
    position: relative;
}

.zk-field-locked .zk-field-input {
    padding-right: 2.5rem !important;
}

.zk-field-lock,
.zk-field-copy {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--zk-muted);
    font-size: .85rem;
    padding: 0;
}

.zk-field-copy {
    cursor: pointer;
    transition: background .15s, color .15s;
}

.zk-field-copy:hover,
.zk-field-copy:focus-visible {
    background: color-mix(in srgb, var(--zk-primary) 12%, #fff);
    color: var(--zk-primary);
    outline: none;
}

.zk-settings-submit {
    margin-top: 4px;
    border-radius: 12px !important;
    padding: .7rem 1.1rem !important;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.zk-share-field {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.zk-share-field-input {
    flex: 1;
    min-width: 0;
    font-size: .78rem !important;
    padding: .65rem .85rem !important;
}

.zk-share-field .btn {
    flex-shrink: 0;
    border-radius: 12px !important;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: .55rem .9rem;
}

.zk-settings-regen {
    margin-top: 10px;
}

.zk-btn-ghost {
    border: 1px solid var(--zk-border);
    background: transparent;
    color: var(--zk-muted);
    border-radius: 10px;
    font-weight: 600;
    font-size: .8rem;
    padding: .4rem .75rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s, color .15s, border-color .15s;
}

.zk-btn-ghost:hover,
.zk-btn-ghost:focus-visible {
    background: color-mix(in srgb, var(--zk-bg) 80%, #fff);
    color: var(--zk-text);
    border-color: color-mix(in srgb, var(--zk-muted) 35%, var(--zk-border));
    outline: none;
}

.zk-status-pill {
    display: inline-flex;
    align-items: center;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .2rem .55rem;
    border-radius: 999px;
    line-height: 1;
}

.zk-status-pill.is-on {
    color: var(--zk-primary-dark);
    background: color-mix(in srgb, var(--zk-primary) 14%, #fff);
}

.zk-status-pill.is-off {
    color: var(--zk-muted);
    background: color-mix(in srgb, var(--zk-bg) 90%, #fff);
}

.zk-settings-success {
    margin: 4px 0 0;
    font-size: .8rem;
    font-weight: 600;
    color: var(--zk-primary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 360px) {
    .zk-my-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .zk-share-field {
        flex-direction: column;
    }

    .zk-share-field .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===== Team referral hub ===== */
.zk-team-page {
    margin: -16px -16px 0;
    padding: 0 16px 8px;
}

.zk-team-hero {
    position: relative;
    margin: 0 -16px 16px;
    padding: 20px 20px 18px;
    text-align: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--zk-primary) 18%, #fff) 0%, transparent 42%),
        radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--zk-primary-light) 22%, #fff) 0%, transparent 40%),
        linear-gradient(180deg, color-mix(in srgb, var(--zk-primary) 14%, #fff) 0%, color-mix(in srgb, var(--zk-primary) 6%, #f4faf5) 55%, var(--zk-bg) 100%);
}

.zk-team-hero-deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .35;
    background-image:
        linear-gradient(color-mix(in srgb, var(--zk-primary) 12%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--zk-primary) 12%, transparent) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(180deg, #000 0%, transparent 90%);
}

.zk-team-gift {
    position: relative;
    z-index: 1;
    display: block;
    width: min(148px, 42vw);
    height: auto;
    margin: 0 auto 10px;
    animation: zk-team-gift-float 3.2s ease-in-out infinite;
}

@keyframes zk-team-gift-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.zk-team-hero-title {
    position: relative;
    z-index: 1;
    font-family: var(--zk-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--zk-primary-dark);
    margin: 0 0 4px;
    line-height: 1.25;
}

.zk-team-hero-id {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: .85rem;
    font-weight: 600;
    color: var(--zk-muted);
}

.zk-team-invite {
    background: #fff;
    border: 1px solid var(--zk-border);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 18px;
    box-shadow: 0 4px 18px color-mix(in srgb, var(--zk-primary) 8%, transparent);
}

.zk-team-invite-inner {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.zk-team-qr-wrap {
    flex-shrink: 0;
    padding: 4px;
    border: 1.5px solid var(--zk-primary);
    border-radius: 10px;
    background: #fff;
    align-self: center;
}

.zk-team-qr {
    display: block;
    width: 112px;
    height: 112px;
    border-radius: 4px;
}

.zk-team-invite-fields {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}

.zk-team-field-label {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    color: var(--zk-muted);
    margin-bottom: 4px;
}

.zk-team-field-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.zk-team-field-value {
    flex: 1;
    min-width: 0;
    font-size: .8rem;
    font-weight: 600;
    color: var(--zk-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zk-team-field-link {
    font-weight: 500;
    color: var(--zk-muted);
    font-size: .72rem;
}

.zk-team-copy-btn {
    flex-shrink: 0;
    border-radius: 999px !important;
    padding: .3rem .85rem !important;
    font-size: .75rem !important;
    background: linear-gradient(90deg, var(--zk-primary-light), var(--zk-primary)) !important;
    border: 0 !important;
}

.zk-team-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.zk-team-section-title {
    font-family: var(--zk-font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--zk-primary-dark);
    margin: 0;
}

.zk-team-pill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .35rem 1rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--zk-primary-light), var(--zk-primary));
    color: #fff !important;
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .1s, filter .15s;
}

.zk-team-pill-btn:hover,
.zk-team-pill-btn:focus {
    color: #fff !important;
    filter: brightness(.96);
}

.zk-team-pill-btn:active {
    transform: scale(.98);
}

.zk-team-stats {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 8px;
    background: color-mix(in srgb, var(--zk-primary) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--zk-primary) 18%, var(--zk-border));
    border-radius: 16px;
    padding: 14px 12px;
    margin-bottom: 12px;
    overflow: hidden;
}

.zk-team-stats-grid {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 10px;
}

.zk-team-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
    container-type: inline-size;
}

.zk-team-stat-label {
    font-size: .7rem;
    font-weight: 500;
    color: var(--zk-muted);
}

.zk-team-stat-value {
    font-size: clamp(0.72rem, 11cqi, .95rem);
    font-weight: 700;
    color: var(--zk-text);
    line-height: 1.15;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

.zk-team-stat-accent {
    color: var(--zk-primary-dark);
}

.zk-team-stats-art {
    flex-shrink: 0;
    width: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zk-team-orb {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, #a5d6a7, var(--zk-primary) 55%, var(--zk-primary-dark));
    box-shadow:
        0 0 0 6px color-mix(in srgb, var(--zk-primary) 12%, transparent),
        0 0 0 12px color-mix(in srgb, var(--zk-primary) 7%, transparent);
    animation: zk-team-orb-pulse 2.8s ease-in-out infinite;
}

@keyframes zk-team-orb-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

.zk-team-task-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: color-mix(in srgb, var(--zk-primary) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--zk-primary) 14%, var(--zk-border));
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 10px;
}

.zk-team-task-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #ffe082, #f9a825);
    color: #5d4037;
    font-size: 1.25rem;
    box-shadow: 0 2px 8px color-mix(in srgb, #f9a825 35%, transparent);
}

.zk-team-task-body {
    flex: 1;
    min-width: 0;
}

.zk-team-task-title {
    font-size: .92rem;
    font-weight: 700;
    color: var(--zk-text);
    line-height: 1.2;
}

.zk-team-task-sub {
    font-size: .75rem;
    font-weight: 600;
    color: var(--zk-primary);
    margin-top: 2px;
}

.zk-team-task-btn {
    flex-shrink: 0;
    border-radius: 999px !important;
    padding: .4rem .9rem !important;
    font-size: .75rem !important;
    background: linear-gradient(90deg, var(--zk-primary-light), var(--zk-primary)) !important;
    border: 0 !important;
    text-decoration: none;
    white-space: nowrap;
}

.zk-team-rates {
    margin-top: 18px;
}

.zk-team-rates-card {
    background: #fff;
    border: 1px solid var(--zk-border);
    border-radius: 16px;
    padding: 4px 14px;
    box-shadow: 0 4px 18px color-mix(in srgb, var(--zk-primary) 8%, transparent);
}

.zk-team-rate-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
}

.zk-team-rate-row.is-divided {
    border-bottom: 1px solid color-mix(in srgb, var(--zk-border) 80%, transparent);
}

.zk-team-rate-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.zk-team-rate-badge {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--zk-font-display);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--zk-primary-dark);
    background: color-mix(in srgb, var(--zk-primary) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--zk-primary) 18%, var(--zk-border));
}

.zk-team-rate-row:nth-child(2) .zk-team-rate-badge {
    background: color-mix(in srgb, var(--zk-primary) 8%, #fff);
    color: var(--zk-primary);
}

.zk-team-rate-row:nth-child(3) .zk-team-rate-badge {
    background: color-mix(in srgb, var(--zk-primary-dark) 8%, #fff);
    color: var(--zk-primary-dark);
}

.zk-team-rate-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.zk-team-rate-name {
    font-size: .9rem;
    font-weight: 700;
    color: var(--zk-text);
    line-height: 1.2;
}

.zk-team-rate-pct {
    font-size: .72rem;
    font-weight: 500;
    color: var(--zk-muted);
}

.zk-team-rate-amount {
    flex-shrink: 0;
    font-family: var(--zk-font-display);
    font-size: .95rem;
    font-weight: 700;
    color: var(--zk-muted);
    letter-spacing: -.01em;
}

.zk-team-rate-amount.is-earned {
    color: var(--zk-primary-dark);
}

.zk-team-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 .45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--zk-primary) 14%, #fff);
    color: var(--zk-primary-dark);
    font-size: .72rem;
    font-weight: 700;
    border: 1px solid color-mix(in srgb, var(--zk-primary) 20%, var(--zk-border));
}

.zk-team-downline {
    scroll-margin-top: 12px;
    margin-top: 18px;
}

.zk-team-member {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--zk-border);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 8px;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--zk-primary) 5%, transparent);
    transition: border-color .15s, box-shadow .15s, transform .12s;
}

.zk-team-member:active {
    transform: scale(.99);
}

.zk-team-member-avatar {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--zk-font-display);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    background: linear-gradient(145deg, var(--zk-primary-light), var(--zk-primary-dark));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--zk-primary) 28%, transparent);
}

.zk-team-member-body {
    flex: 1;
    min-width: 0;
}

.zk-team-member-name {
    font-size: .92rem;
    font-weight: 700;
    color: var(--zk-text);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zk-team-member-phone {
    margin-top: 2px;
    font-size: .75rem;
    font-weight: 500;
    color: var(--zk-muted);
    letter-spacing: .01em;
}

.zk-team-member-date {
    flex-shrink: 0;
    font-size: .7rem;
    font-weight: 600;
    color: var(--zk-muted);
    background: color-mix(in srgb, var(--zk-bg) 70%, #fff);
    border: 1px solid var(--zk-border);
    border-radius: 999px;
    padding: .28rem .65rem;
    white-space: nowrap;
}

.zk-team-empty {
    text-align: center;
    background: #fff;
    border: 1px dashed color-mix(in srgb, var(--zk-primary) 28%, var(--zk-border));
    border-radius: 16px;
    padding: 28px 18px;
}

.zk-team-empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: var(--zk-primary);
    background: color-mix(in srgb, var(--zk-primary) 12%, #fff);
}

.zk-team-empty-text {
    margin: 0;
    font-size: .82rem;
    font-weight: 500;
    color: var(--zk-muted);
    line-height: 1.4;
}

.zk-team-pagination {
    margin-top: 14px;
}

@media (prefers-reduced-motion: reduce) {
    .zk-team-gift,
    .zk-team-orb {
        animation: none !important;
    }

    .zk-team-member {
        transition: none;
    }
}

/* Funds (deposit / withdraw) */
.zk-deposit,
.zk-withdraw {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.zk-deposit .zk-stagger-item:nth-child(1),
.zk-withdraw .zk-stagger-item:nth-child(1) { animation-delay: .02s; }
.zk-deposit .zk-stagger-item:nth-child(2),
.zk-withdraw .zk-stagger-item:nth-child(2) { animation-delay: .06s; }
.zk-deposit .zk-stagger-item:nth-child(3),
.zk-withdraw .zk-stagger-item:nth-child(3) { animation-delay: .1s; }
.zk-deposit .zk-stagger-item:nth-child(4),
.zk-withdraw .zk-stagger-item:nth-child(4) { animation-delay: .14s; }
.zk-deposit .zk-stagger-item:nth-child(5),
.zk-withdraw .zk-stagger-item:nth-child(5) { animation-delay: .18s; }

.zk-funds-head {
    margin-bottom: 2px;
}

.zk-funds-sub {
    margin: 4px 0 0;
    font-size: .82rem;
    font-weight: 500;
    color: var(--zk-muted);
}

.zk-funds-balance {
    position: relative;
    overflow: hidden;
    min-width: 0;
    container-type: inline-size;
    padding: 18px 16px 14px;
    border-radius: var(--zk-radius-lg);
    background:
        radial-gradient(ellipse 80% 90% at 100% 0%, color-mix(in srgb, var(--zk-primary-light) 22%, transparent), transparent 55%),
        linear-gradient(160deg, #fff 0%, color-mix(in srgb, var(--zk-primary) 6%, #fff) 100%);
    border: 1px solid color-mix(in srgb, var(--zk-primary) 18%, var(--zk-border));
    box-shadow: var(--zk-shadow);
}

.zk-funds-balance-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.zk-funds-balance-top > div {
    min-width: 0;
    flex: 1;
}

.zk-funds-balance-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #fff;
    background: linear-gradient(145deg, var(--zk-primary-light), var(--zk-primary-dark));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--zk-primary) 35%, transparent);
}

.zk-funds-balance-icon-out {
    background: linear-gradient(145deg, #43a047, #1b5e20);
}

.zk-funds-balance-label {
    margin: 0;
    font-size: .78rem;
    font-weight: 600;
    color: var(--zk-muted);
}

.zk-funds-balance-value {
    margin-top: 2px;
    font-family: var(--zk-font-display);
    font-size: clamp(0.72rem, 11cqi, 1.55rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.15;
    color: var(--zk-primary-dark);
    font-variant-numeric: tabular-nums;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}

.zk-funds-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.zk-funds-chip {
    display: inline-flex;
    align-items: center;
    padding: .28rem .65rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--zk-muted);
    background: color-mix(in srgb, var(--zk-bg) 55%, #fff);
    border: 1px solid var(--zk-border);
}

.zk-funds-chip-rate,
.zk-funds-chip-fee {
    color: var(--zk-primary-dark);
    background: color-mix(in srgb, var(--zk-primary) 10%, #fff);
    border-color: color-mix(in srgb, var(--zk-primary) 22%, var(--zk-border));
}

.zk-deposit-instructions {
    padding: 16px;
    border-radius: var(--zk-radius-lg);
    background: var(--zk-surface);
    border: 1px solid color-mix(in srgb, var(--zk-primary) 28%, var(--zk-border));
    box-shadow: var(--zk-shadow-sm);
}

.zk-deposit-instructions-head {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.zk-deposit-instructions-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: var(--zk-primary);
    background: color-mix(in srgb, var(--zk-primary) 12%, #fff);
}

.zk-deposit-instructions-title {
    margin: 0;
    font-family: var(--zk-font-display);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--zk-text);
}

.zk-deposit-instructions-body {
    margin: 4px 0 0;
    font-size: .8rem;
    font-weight: 500;
    color: var(--zk-muted);
    line-height: 1.4;
}

.zk-deposit-dl {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border-radius: var(--zk-radius-sm);
    background: color-mix(in srgb, var(--zk-bg) 70%, #fff);
    border: 1px solid var(--zk-border);
}

.zk-deposit-dl + .zk-deposit-dl {
    margin-top: 8px;
}

.zk-deposit-dl-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.zk-deposit-dl-row.zk-deposit-dl-stack {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}

.zk-deposit-dl-row dt {
    margin: 0;
    font-size: .75rem;
    font-weight: 600;
    color: var(--zk-muted);
}

.zk-deposit-dl-row dd {
    margin: 0;
    font-size: .85rem;
    font-weight: 600;
    color: var(--zk-text);
    text-align: right;
    word-break: break-word;
}

.zk-deposit-dl-stack dd {
    text-align: left;
}

.zk-deposit-dl-em {
    font-family: var(--zk-font-display);
    font-weight: 700 !important;
    letter-spacing: -.01em;
    color: var(--zk-primary-dark) !important;
}

.zk-deposit-address {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem !important;
    font-weight: 600 !important;
    line-height: 1.45;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fff;
    border: 1px dashed color-mix(in srgb, var(--zk-primary) 30%, var(--zk-border));
}

.zk-deposit-instructions-foot {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--zk-border);
}

.zk-deposit-countdown {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 6px;
    font-size: .8rem;
    font-weight: 500;
}

.zk-deposit-countdown-val {
    font-family: var(--zk-font-display);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

.zk-deposit-poll {
    margin: 0;
    font-size: .8rem;
    font-weight: 500;
    color: var(--zk-muted);
}

.zk-funds-form {
    padding: 16px;
    border-radius: var(--zk-radius-lg);
    background: var(--zk-surface);
    border: 1px solid var(--zk-border);
    box-shadow: var(--zk-shadow-sm);
}

.zk-funds-field {
    margin-bottom: 16px;
}

.zk-funds-label {
    display: block;
    margin-bottom: .45rem;
    font-size: .8rem;
    font-weight: 700;
    color: var(--zk-text);
    letter-spacing: -.01em;
}

.zk-funds-amount-wrap {
    position: relative;
}

.zk-funds-amount {
    font-family: var(--zk-font-display) !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    letter-spacing: -.02em;
    padding: .85rem 1rem !important;
    border-radius: 12px !important;
    border: 1px solid var(--zk-border) !important;
    background: color-mix(in srgb, var(--zk-bg) 55%, #fff) !important;
    color: var(--zk-text);
    font-variant-numeric: tabular-nums;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.zk-funds-amount:focus {
    background: #fff !important;
    border-color: var(--zk-primary) !important;
    box-shadow: var(--zk-focus) !important;
}

.zk-funds-estimate {
    margin: 8px 0 0;
    font-size: .78rem;
    font-weight: 600;
    color: var(--zk-primary-dark);
}

.zk-funds-hint {
    margin: 6px 0 0;
    font-size: .72rem;
    font-weight: 500;
    color: var(--zk-muted);
    line-height: 1.35;
}

.zk-funds-control {
    border-radius: 12px !important;
    border-color: var(--zk-border) !important;
    background: color-mix(in srgb, var(--zk-bg) 40%, #fff) !important;
    padding: .7rem .9rem !important;
    font-weight: 500;
}

.zk-funds-control:focus {
    background: #fff !important;
    border-color: var(--zk-primary) !important;
    box-shadow: var(--zk-focus) !important;
}

.zk-funds-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    font-size: .82rem !important;
}

.zk-withdraw-summary {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 14px;
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--zk-primary) 8%, #fff), #fff);
    border: 1px solid color-mix(in srgb, var(--zk-primary) 18%, var(--zk-border));
}

.zk-withdraw-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--zk-muted);
}

.zk-withdraw-summary-row + .zk-withdraw-summary-row {
    margin-top: 8px;
}

.zk-withdraw-summary-row strong {
    font-family: var(--zk-font-display);
    font-size: .9rem;
    font-weight: 700;
    color: var(--zk-text);
    font-variant-numeric: tabular-nums;
}

.zk-withdraw-summary-net strong {
    color: var(--zk-primary-dark);
    font-size: 1rem;
}

.zk-withdraw-panel {
    margin-bottom: 16px;
    padding: 14px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--zk-bg) 55%, #fff);
    border: 1px solid var(--zk-border);
}

.zk-withdraw-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-family: var(--zk-font-display);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--zk-text);
}

.zk-withdraw-panel-title i {
    color: var(--zk-primary);
    font-size: 1rem;
}

.zk-funds-gateways {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.zk-funds-gateway {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1.5px solid var(--zk-border);
    background: color-mix(in srgb, var(--zk-bg) 40%, #fff);
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s, transform .12s;
}

.zk-funds-gateway:active {
    transform: scale(.99);
}

.zk-funds-gateway.is-selected {
    border-color: color-mix(in srgb, var(--zk-primary) 55%, var(--zk-border));
    background: color-mix(in srgb, var(--zk-primary) 8%, #fff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--zk-primary) 14%, transparent);
}

.zk-funds-gateway-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.zk-funds-gateway-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: var(--zk-primary);
    background: color-mix(in srgb, var(--zk-primary) 12%, #fff);
    transition: background .15s, color .15s;
}

.zk-funds-gateway.is-selected .zk-funds-gateway-icon {
    color: #fff;
    background: linear-gradient(145deg, var(--zk-primary-light), var(--zk-primary-dark));
}

.zk-funds-gateway-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.zk-funds-gateway-name {
    font-size: .9rem;
    font-weight: 700;
    color: var(--zk-text);
    line-height: 1.2;
    text-transform: capitalize;
}

.zk-funds-gateway-meta {
    font-size: .72rem;
    font-weight: 500;
    color: var(--zk-muted);
}

.zk-funds-gateway-check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    color: transparent;
    background: transparent;
    border: 1.5px solid var(--zk-border);
    transition: background .15s, border-color .15s, color .15s;
}

.zk-funds-gateway.is-selected .zk-funds-gateway-check {
    color: #fff;
    background: var(--zk-primary);
    border-color: var(--zk-primary);
}

.zk-funds-submit {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: .8rem 1.2rem !important;
    border-radius: 999px !important;
    font-size: .95rem;
    font-weight: 700;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--zk-primary) 28%, transparent);
}

.zk-funds-submit:hover,
.zk-funds-submit:focus {
    box-shadow: 0 8px 22px color-mix(in srgb, var(--zk-primary) 36%, transparent);
}

.zk-funds-recent {
    margin-top: 4px;
}

.zk-funds-recent-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.zk-funds-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.zk-funds-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--zk-card);
    border: 1px solid var(--zk-border);
    border-radius: 14px;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--zk-primary) 5%, transparent);
    transition: border-color .15s, box-shadow .15s, transform .12s;
}

.zk-funds-item:active {
    transform: scale(.99);
}

.zk-funds-item-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--zk-primary);
    background: color-mix(in srgb, var(--zk-primary) 12%, #fff);
}

.zk-funds-item-body {
    flex: 1;
    min-width: 0;
}

.zk-funds-item-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.zk-funds-item-gateway {
    font-size: .88rem;
    font-weight: 700;
    color: var(--zk-text);
    text-transform: capitalize;
    line-height: 1.2;
}

.zk-funds-item-sub {
    margin-top: 3px;
    font-size: .72rem;
    font-weight: 500;
    color: var(--zk-muted);
}

.zk-funds-status {
    display: inline-flex;
    align-items: center;
    padding: .18rem .55rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: lowercase;
    line-height: 1.2;
}

.zk-funds-status.is-approved {
    color: #1b5e20;
    background: color-mix(in srgb, #2e7d32 14%, #fff);
    border: 1px solid color-mix(in srgb, #2e7d32 28%, transparent);
}

.zk-funds-status.is-rejected {
    color: #b71c1c;
    background: color-mix(in srgb, #c62828 12%, #fff);
    border: 1px solid color-mix(in srgb, #c62828 24%, transparent);
}

.zk-funds-status.is-pending {
    color: #e65100;
    background: color-mix(in srgb, #ef6c00 12%, #fff);
    border: 1px solid color-mix(in srgb, #ef6c00 24%, transparent);
}

.zk-funds-item-side {
    flex-shrink: 0;
    text-align: right;
}

.zk-funds-item-amount {
    font-family: var(--zk-font-display);
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--zk-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.zk-funds-item-date {
    margin-top: 3px;
    font-size: .7rem;
    font-weight: 600;
    color: var(--zk-muted);
}

.zk-funds-pagination {
    margin-top: 12px;
}

.zk-funds-pagination .pagination {
    justify-content: center;
    gap: 6px;
    margin: 0;
}

.zk-funds-pagination .page-link {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .55rem;
    border-radius: 10px !important;
    border: 1px solid var(--zk-border);
    background: #fff;
    color: var(--zk-text);
    font-size: .82rem;
    font-weight: 600;
}

.zk-funds-pagination .page-item.active .page-link {
    background: var(--zk-primary);
    border-color: var(--zk-primary);
    color: #fff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--zk-primary) 30%, transparent);
}

.zk-funds-pagination .page-item.disabled .page-link {
    opacity: .45;
}

@media (prefers-reduced-motion: reduce) {
    .zk-funds-gateway,
    .zk-funds-item {
        transition: none;
    }
}
/* ── Competition / Win Million ── */
.zk-comp {
    margin: 0 -4px;
}

.zk-comp .zk-stagger-item:nth-child(1) { animation-delay: .02s; }
.zk-comp .zk-stagger-item:nth-child(2) { animation-delay: .06s; }
.zk-comp .zk-stagger-item:nth-child(3) { animation-delay: .1s; }
.zk-comp .zk-stagger-item:nth-child(4) { animation-delay: .14s; }
.zk-comp .zk-stagger-item:nth-child(5) { animation-delay: .18s; }
.zk-comp .zk-stagger-item:nth-child(6) { animation-delay: .22s; }

.zk-comp-hero {
    position: relative;
    margin: 0 -12px 18px;
    padding: 22px 20px 20px;
    text-align: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 20%, color-mix(in srgb, var(--zk-primary) 20%, #fff) 0%, transparent 44%),
        radial-gradient(circle at 86% 12%, color-mix(in srgb, #c9a227 28%, #fff) 0%, transparent 38%),
        linear-gradient(180deg, color-mix(in srgb, var(--zk-primary) 16%, #fff) 0%, color-mix(in srgb, var(--zk-primary) 6%, #f4faf5) 55%, var(--zk-bg) 100%);
}

.zk-comp-hero-deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .3;
    background-image:
        linear-gradient(color-mix(in srgb, var(--zk-primary) 12%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--zk-primary) 12%, transparent) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
}

.zk-comp-hero-icon {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    color: #fff;
    background: linear-gradient(145deg, #d4af37 0%, #b8860b 55%, #8a6914 100%);
    box-shadow:
        0 8px 22px color-mix(in srgb, #b8860b 40%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .35);
    animation: zk-comp-trophy-float 3s ease-in-out infinite;
}

@keyframes zk-comp-trophy-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.zk-comp-hero-title {
    position: relative;
    z-index: 1;
    font-family: var(--zk-font-display);
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--zk-primary-dark);
    margin: 0 0 6px;
    line-height: 1.2;
}

.zk-comp-hero-sub {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    max-width: 280px;
    font-size: .88rem;
    font-weight: 500;
    color: var(--zk-muted);
    line-height: 1.4;
}

.zk-comp-dates {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
}

.zk-comp-date-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .78);
    border: 1px solid color-mix(in srgb, var(--zk-primary) 18%, transparent);
    font-size: .68rem;
    font-weight: 600;
    color: var(--zk-primary-dark);
    line-height: 1.3;
    max-width: 100%;
}

.zk-comp-date-chip i {
    font-size: .75rem;
    opacity: .8;
    flex-shrink: 0;
}

.zk-comp-section {
    margin-bottom: 18px;
}

.zk-comp-section-head {
    margin-bottom: 10px;
    padding: 0 2px;
}

.zk-comp-section-title {
    font-family: var(--zk-font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--zk-text);
    margin: 0 0 2px;
}

.zk-comp-section-sub {
    margin: 0;
    font-size: .78rem;
    font-weight: 500;
    color: var(--zk-muted);
}

.zk-comp-steps {
    list-style: none;
    margin: 0;
    padding: 14px 14px 10px;
    background: var(--zk-card);
    border: 1px solid var(--zk-border);
    border-radius: var(--zk-radius);
    box-shadow: var(--zk-shadow-sm);
}

.zk-comp-step {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 0 0 14px;
    position: relative;
}

.zk-comp-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 28px;
    bottom: 0;
    width: 2px;
    background: color-mix(in srgb, var(--zk-primary) 18%, var(--zk-border));
}

.zk-comp-step:last-child {
    padding-bottom: 2px;
}

.zk-comp-step-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--zk-font-display);
    font-size: .78rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(145deg, var(--zk-primary-light), var(--zk-primary-dark));
    box-shadow: 0 3px 10px color-mix(in srgb, var(--zk-primary) 28%, transparent);
    position: relative;
    z-index: 1;
}

.zk-comp-step-text {
    flex: 1;
    padding-top: 4px;
    font-size: .84rem;
    font-weight: 500;
    color: var(--zk-text);
    line-height: 1.45;
}

.zk-comp-prizes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.zk-comp-prize {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    background: var(--zk-card);
    border: 1px solid var(--zk-border);
    border-radius: var(--zk-radius);
    box-shadow: var(--zk-shadow-sm);
    transition: border-color .15s, box-shadow .15s, transform .12s;
}

.zk-comp-prize.is-grand {
    border-color: color-mix(in srgb, #c9a227 45%, var(--zk-border));
    background:
        linear-gradient(135deg, color-mix(in srgb, #c9a227 8%, #fff) 0%, #fff 55%);
    box-shadow: 0 4px 16px color-mix(in srgb, #c9a227 12%, transparent);
}

.zk-comp-prize-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: var(--zk-primary);
    background: color-mix(in srgb, var(--zk-primary) 12%, #fff);
}

.zk-comp-prize.is-grand .zk-comp-prize-icon {
    color: #fff;
    background: linear-gradient(145deg, #d4af37, #b8860b);
    box-shadow: 0 4px 12px color-mix(in srgb, #b8860b 32%, transparent);
}

.zk-comp-prize-body {
    flex: 1;
    min-width: 0;
}

.zk-comp-prize-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 2px;
}

.zk-comp-prize-name {
    margin: 0;
    font-family: var(--zk-font-display);
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--zk-text);
    line-height: 1.25;
}

.zk-comp-prize-type {
    display: inline-flex;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: .02em;
    color: var(--zk-primary-dark);
    background: color-mix(in srgb, var(--zk-primary) 12%, #fff);
}

.zk-comp-prize-amount {
    font-family: var(--zk-font-display);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--zk-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.zk-comp-prize.is-grand .zk-comp-prize-amount {
    color: #9a7209;
}

.zk-comp-prize-meta {
    margin-top: 2px;
    font-size: .72rem;
    font-weight: 600;
    color: var(--zk-muted);
}

.zk-comp-prize-desc {
    margin: 6px 0 0;
    font-size: .78rem;
    font-weight: 500;
    color: var(--zk-muted);
    line-height: 1.4;
}

.zk-comp-reqs {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.zk-comp-req {
    padding: 12px 14px;
    background: var(--zk-card);
    border: 1px solid var(--zk-border);
    border-radius: var(--zk-radius);
    box-shadow: var(--zk-shadow-sm);
}

.zk-comp-req-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 6px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--zk-muted);
}

.zk-comp-req-label i {
    font-size: .85rem;
    color: var(--zk-primary);
}

.zk-comp-req-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.zk-comp-req-value {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: .84rem;
    font-weight: 500;
    color: var(--zk-text);
    line-height: 1.4;
    word-break: break-word;
}

.zk-comp-form {
    padding: 16px;
    background: var(--zk-card);
    border: 1px solid var(--zk-border);
    border-radius: var(--zk-radius);
    box-shadow: var(--zk-shadow-sm);
}

.zk-comp-form-field {
    margin-bottom: 14px;
}

.zk-comp-form-field .form-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--zk-text);
    margin-bottom: 6px;
}

.zk-comp-input-wrap {
    position: relative;
}

.zk-comp-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--zk-muted);
    font-size: 1.15rem;
    pointer-events: none;
    line-height: 1;
}

.zk-comp-input {
    padding-left: 40px !important;
    border-radius: 12px !important;
    border-color: var(--zk-border) !important;
    font-size: .9rem;
    min-height: 46px;
}

.zk-comp-input:focus {
    border-color: var(--zk-primary) !important;
    box-shadow: var(--zk-focus) !important;
}

.zk-comp-submit {
    min-height: 48px;
    font-weight: 700;
    font-size: .95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px !important;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--zk-primary) 28%, transparent);
}

.zk-comp-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 12px 14px;
    margin-bottom: 8px;
    background: var(--zk-card);
    border: 1px solid var(--zk-border);
    border-radius: 14px;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--zk-primary) 5%, transparent);
}

.zk-comp-entry-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: var(--zk-primary);
    background: color-mix(in srgb, var(--zk-primary) 12%, #fff);
}

.zk-comp-entry.is-rejected .zk-comp-entry-icon {
    color: #c62828;
    background: color-mix(in srgb, #c62828 10%, #fff);
}

.zk-comp-entry.is-winner .zk-comp-entry-icon {
    color: #fff;
    background: linear-gradient(145deg, #d4af37, #b8860b);
}

.zk-comp-entry.is-pending .zk-comp-entry-icon {
    color: #ef6c00;
    background: color-mix(in srgb, #ef6c00 12%, #fff);
}

.zk-comp-entry-body {
    flex: 1;
    min-width: 0;
}

.zk-comp-entry-link {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--zk-primary-dark);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.zk-comp-entry-link:hover {
    text-decoration: underline;
}

.zk-comp-entry-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.zk-comp-entry-meta time {
    font-size: .7rem;
    font-weight: 600;
    color: var(--zk-muted);
}

.zk-comp-status {
    display: inline-flex;
    align-items: center;
    padding: .16rem .55rem;
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: lowercase;
    line-height: 1.2;
}

.zk-comp-status.is-approved {
    color: #1b5e20;
    background: color-mix(in srgb, #2e7d32 14%, #fff);
    border: 1px solid color-mix(in srgb, #2e7d32 28%, transparent);
}

.zk-comp-status.is-rejected {
    color: #b71c1c;
    background: color-mix(in srgb, #c62828 12%, #fff);
    border: 1px solid color-mix(in srgb, #c62828 24%, transparent);
}

.zk-comp-status.is-pending {
    color: #e65100;
    background: color-mix(in srgb, #ef6c00 12%, #fff);
    border: 1px solid color-mix(in srgb, #ef6c00 24%, transparent);
}

.zk-comp-status.is-winner {
    color: #7a5c00;
    background: color-mix(in srgb, #c9a227 18%, #fff);
    border: 1px solid color-mix(in srgb, #c9a227 40%, transparent);
}

.zk-comp-entry-open {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--zk-muted);
    background: color-mix(in srgb, var(--zk-border) 60%, #fff);
    text-decoration: none;
    transition: background .15s, color .15s;
}

.zk-comp-entry-open:hover {
    color: var(--zk-primary);
    background: color-mix(in srgb, var(--zk-primary) 12%, #fff);
}

.zk-comp-empty {
    text-align: center;
    padding: 28px 16px;
    background: var(--zk-card);
    border: 1px dashed var(--zk-border);
    border-radius: var(--zk-radius);
    color: var(--zk-muted);
}

.zk-comp-empty i {
    font-size: 1.6rem;
    display: block;
    margin-bottom: 6px;
    opacity: .55;
}

.zk-comp-empty p {
    margin: 0;
    font-size: .84rem;
    font-weight: 500;
}

.zk-comp-pagination {
    margin-top: 12px;
}

.zk-comp-pagination .pagination {
    justify-content: center;
    gap: 6px;
    margin: 0;
}

.zk-comp-pagination .page-link {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .55rem;
    border-radius: 10px !important;
    border: 1px solid var(--zk-border);
    background: #fff;
    color: var(--zk-text);
    font-size: .82rem;
    font-weight: 600;
}

.zk-comp-pagination .page-item.active .page-link {
    background: var(--zk-primary);
    border-color: var(--zk-primary);
    color: #fff;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--zk-primary) 30%, transparent);
}

.zk-comp-pagination .page-item.disabled .page-link {
    opacity: .45;
}

@media (prefers-reduced-motion: reduce) {
    .zk-comp-hero-icon {
        animation: none;
    }

    .zk-comp-prize {
        transition: none;
    }
}