:root {
    --kelp-primary: #11993A;
    --kelp-primary-soft: rgba(17, 153, 58, .12);
    --kelp-primary-hover: #0d7a2e;
    --kelp-bg: #f6f8f7;
    --kelp-surface: #ffffff;
    --kelp-ink: #111827;
    --kelp-muted: #6b7280;
    --kelp-border: rgba(17, 24, 39, .10);
    --kelp-radius: 1rem;
    --kelp-radius-lg: 1.5rem;
    --kelp-radius-full: 9999px;
    --kelp-shadow: 0 10px 30px -12px rgba(17, 153, 58, .28);
}

.kelp-card {
    background: var(--kelp-surface);
    border: 1px solid var(--kelp-border);
    border-radius: var(--kelp-radius-lg);
    padding: 18px;
    box-shadow: var(--kelp-shadow);
}

.kelp-btn {
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    border: 0;
    border-radius: var(--kelp-radius-full);
    padding: 9px 18px;
    background: var(--kelp-primary);
    color: #fff;
    transition: background .15s, transform .15s;
}

.kelp-btn:hover { background: var(--kelp-primary-hover); }
.kelp-btn:active { transform: translateY(1px); }
.kelp-btn:disabled { opacity: .45; cursor: not-allowed; }

.kelp-btn--ghost {
    background: var(--kelp-primary-soft);
    color: var(--kelp-primary);
}

.kelp-label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--kelp-muted);
}

.kelp-stat {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--kelp-primary);
}

.kelp-muted {
    color: var(--kelp-muted);
    font-size: .85rem;
}