.form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--zn-member-text-secondary);
}

.secondary-button,
.primary-button,
.icon-button {
    border: 1px solid color-mix(in srgb, var(--zn-member-border) 78%, transparent);
    border-radius: 999px;
    cursor: pointer;
    transition:
        transform 0.16s ease,
        background 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease,
        box-shadow 0.16s ease;
}

.secondary-button {
    padding: 10px 12px;
    background: var(--zn-member-bg-surface-active);
    border-color: var(--zn-member-border);
    color: var(--zn-member-text-primary);
}

.primary-button {
    padding: 10px 14px;
    background: linear-gradient(180deg, var(--zn-member-primary), var(--zn-member-primary-hover));
    color: var(--zn-member-primary-text);
}

.icon-button {
    width: 34px;
    height: 34px;
    padding: 0;
    border-color: color-mix(in srgb, var(--zn-member-border) 76%, transparent);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
        color-mix(in srgb, var(--zn-member-bg-surface-active) 82%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
    font-size: 0.96rem;
}

.secondary-button:hover,
.primary-button:hover,
.icon-button:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--zn-member-accent-border-strong) 68%, transparent);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.024)),
        color-mix(in srgb, var(--zn-member-bg-surface-active) 92%, var(--zn-member-accent) 8%);
}