/* =========================================================
   Reusable Components
========================================================= */

.app-panel,
.statistic-card,
.dashboard-panel,
.quick-action-card {
    border: 1px solid var(--app-border);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(var(--app-primary-rgb), .045), transparent 55%),
        var(--app-surface);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .07);
}

.app-hover-card,
.statistic-card,
.quick-action-card {
    transition:
        border-color var(--app-transition),
        background var(--app-transition),
        box-shadow var(--app-transition),
        transform var(--app-transition);
}

.app-hover-card:hover,
.statistic-card:hover,
.quick-action-card:hover {
    border-color: rgba(var(--app-primary-rgb), .38);
    background:
        linear-gradient(145deg, rgba(var(--app-primary-rgb), .1), transparent 62%),
        var(--app-surface);
    box-shadow: 0 17px 38px rgba(var(--app-primary-rgb), .1);
    color: inherit;
    transform: translateY(-3px);
}

.app-gradient-button,
.balance-withdraw-button,
.referral-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 17px;
    border: 1px solid rgba(var(--app-secondary-rgb), .58);
    border-radius: 13px;
    background:
        linear-gradient(135deg,
            var(--app-primary-light),
            var(--app-primary) 52%,
            var(--app-primary-dark));
    box-shadow: 0 12px 27px rgba(var(--app-primary-rgb), .22);
    color: #fff;
    font-size: .76rem;
    font-weight: 750;
}

.app-gradient-button:hover,
.balance-withdraw-button:hover,
.referral-button:hover {
    border-color: var(--app-secondary);
    color: #fff;
    filter: brightness(1.07);
    transform: translateY(-2px);
}

.app-outline-button,
.balance-stake-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 17px;
    border: 1px solid var(--app-border-strong);
    border-radius: 13px;
    background: var(--app-surface);
    color: var(--app-text);
    font-size: .76rem;
    font-weight: 750;
}

.app-outline-button:hover,
.balance-stake-button:hover {
    border-color: rgba(var(--app-primary-rgb), .42);
    background: rgba(var(--app-primary-rgb), .09);
    color: var(--app-primary-light);
}