.czub-button {
    --czub-color: #2563eb;
    --czub-soft: #eff6ff;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100%;
    min-height: 32px;
    margin: 8px 0 !important;
    padding: 3px 16px;
    border: 1px solid var(--czub-color) !important;
    border-radius: 8px;
    background: var(--czub-background, var(--czub-color)) !important;
    color: #fff !important;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-decoration: none !important;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition: filter 120ms ease;
}

.czub-button:hover {
    filter: brightness(0.92);
    text-decoration: none !important;
}

.czub-button:focus-visible {
    outline: 3px solid #93c5fd !important;
    outline-offset: 3px;
}

.czub-blue { --czub-color: #2563eb; --czub-soft: #eff6ff; }
.czub-green { --czub-color: #15803d; --czub-soft: #f0fdf4; }
.czub-orange { --czub-color: #c2410c; --czub-soft: #fff7ed; }
.czub-red { --czub-color: #b91c1c; --czub-soft: #fef2f2; }
.czub-purple { --czub-color: #7e22ce; --czub-soft: #faf5ff; }
.czub-gray { --czub-color: #475569; --czub-soft: #f1f5f9; }
.czub-teal { --czub-color: #0f766e; --czub-soft: #f0fdfa; }
.czub-pink { --czub-color: #be185d; --czub-soft: #fdf2f8; }
.czub-ocean { --czub-color: #1d4ed8; --czub-background: linear-gradient(110deg, #1d4ed8, #0e7490); --czub-soft: #eff6ff; }
.czub-violet { --czub-color: #4338ca; --czub-background: linear-gradient(110deg, #1d4ed8, #7e22ce); --czub-soft: #eef2ff; }
.czub-berry { --czub-color: #7e22ce; --czub-background: linear-gradient(110deg, #7e22ce, #be185d); --czub-soft: #faf5ff; }
.czub-coral { --czub-color: #be123c; --czub-background: linear-gradient(110deg, #be185d, #c2410c); --czub-soft: #fff1f2; }
.czub-sunset { --czub-color: #c2410c; --czub-background: linear-gradient(110deg, #b91c1c, #b45309); --czub-soft: #fff7ed; }
.czub-forest { --czub-color: #15803d; --czub-background: linear-gradient(110deg, #0f766e, #3f6212); --czub-soft: #f0fdf4; }
.czub-aurora { --czub-color: #0f766e; --czub-background: linear-gradient(110deg, #0f766e, #4338ca); --czub-soft: #f0fdfa; }
.czub-midnight { --czub-color: #334155; --czub-background: linear-gradient(110deg, #334155, #6b21a8); --czub-soft: #f5f3ff; }
.czub-shape-square { border-radius: 0; }
.czub-shape-rounded { border-radius: 8px; }
.czub-shape-pill { border-radius: 999px; }
.czub-variant-outline { background: transparent !important; color: var(--czub-color) !important; }
.czub-variant-soft { background: var(--czub-soft) !important; color: var(--czub-color) !important; border-color: transparent !important; }
.czub-size-small { min-height: 32px; }
.czub-size-normal { min-height: 48px; }
.czub-size-large { min-height: 64px; }

.czub-invalid {
    color: #b91c1c;
}

@media (prefers-reduced-motion: reduce) {
    .czub-button { transition: none; }
}

/* Heights use classes so ordinary author content retains them after saving. */
.czub-height-32 { min-height: 32px !important; }
.czub-height-33 { min-height: 32px !important; }
.czub-height-34 { min-height: 32px !important; }
.czub-height-35 { min-height: 32px !important; }
.czub-height-36 { min-height: 32px !important; }
.czub-height-37 { min-height: 32px !important; }
.czub-height-38 { min-height: 32px !important; }
.czub-height-39 { min-height: 32px !important; }
.czub-height-40 { min-height: 48px !important; }
.czub-height-41 { min-height: 48px !important; }
.czub-height-42 { min-height: 48px !important; }
.czub-height-43 { min-height: 48px !important; }
.czub-height-44 { min-height: 48px !important; }
.czub-height-45 { min-height: 48px !important; }
.czub-height-46 { min-height: 48px !important; }
.czub-height-47 { min-height: 48px !important; }
.czub-height-48 { min-height: 48px !important; }
.czub-height-49 { min-height: 48px !important; }
.czub-height-50 { min-height: 48px !important; }
.czub-height-51 { min-height: 48px !important; }
.czub-height-52 { min-height: 48px !important; }
.czub-height-53 { min-height: 48px !important; }
.czub-height-54 { min-height: 48px !important; }
.czub-height-55 { min-height: 48px !important; }
.czub-height-56 { min-height: 64px !important; }
.czub-height-57 { min-height: 64px !important; }
.czub-height-58 { min-height: 64px !important; }
.czub-height-59 { min-height: 64px !important; }
.czub-height-60 { min-height: 64px !important; }
.czub-height-61 { min-height: 64px !important; }
.czub-height-62 { min-height: 64px !important; }
.czub-height-63 { min-height: 64px !important; }
.czub-height-64 { min-height: 64px !important; }
.czub-height-65 { min-height: 64px !important; }
.czub-height-66 { min-height: 64px !important; }
.czub-height-67 { min-height: 64px !important; }
.czub-height-68 { min-height: 64px !important; }
.czub-height-69 { min-height: 64px !important; }
.czub-height-70 { min-height: 64px !important; }
.czub-height-71 { min-height: 64px !important; }
.czub-height-72 { min-height: 64px !important; }
.czub-height-73 { min-height: 64px !important; }
.czub-height-74 { min-height: 64px !important; }
.czub-height-75 { min-height: 64px !important; }
.czub-height-76 { min-height: 64px !important; }
.czub-height-77 { min-height: 64px !important; }
.czub-height-78 { min-height: 64px !important; }
.czub-height-79 { min-height: 64px !important; }
.czub-height-80 { min-height: 64px !important; }
.czub-height-81 { min-height: 64px !important; }
.czub-height-82 { min-height: 64px !important; }
.czub-height-83 { min-height: 64px !important; }
.czub-height-84 { min-height: 64px !important; }
.czub-height-85 { min-height: 64px !important; }
.czub-height-86 { min-height: 64px !important; }
.czub-height-87 { min-height: 64px !important; }
.czub-height-88 { min-height: 64px !important; }
.czub-height-89 { min-height: 64px !important; }
.czub-height-90 { min-height: 64px !important; }
.czub-height-91 { min-height: 64px !important; }
.czub-height-92 { min-height: 64px !important; }
.czub-height-93 { min-height: 64px !important; }
.czub-height-94 { min-height: 64px !important; }
.czub-height-95 { min-height: 64px !important; }
.czub-height-96 { min-height: 64px !important; }
.czub-height-97 { min-height: 64px !important; }
.czub-height-98 { min-height: 64px !important; }
.czub-height-99 { min-height: 64px !important; }
.czub-height-100 { min-height: 64px !important; }
.czub-height-101 { min-height: 64px !important; }
.czub-height-102 { min-height: 64px !important; }
.czub-height-103 { min-height: 64px !important; }
.czub-height-104 { min-height: 64px !important; }
.czub-height-105 { min-height: 64px !important; }
.czub-height-106 { min-height: 64px !important; }
.czub-height-107 { min-height: 64px !important; }
.czub-height-108 { min-height: 64px !important; }
.czub-height-109 { min-height: 64px !important; }
.czub-height-110 { min-height: 64px !important; }
.czub-height-111 { min-height: 64px !important; }
.czub-height-112 { min-height: 64px !important; }
.czub-height-113 { min-height: 64px !important; }
.czub-height-114 { min-height: 64px !important; }
.czub-height-115 { min-height: 64px !important; }
.czub-height-116 { min-height: 64px !important; }
.czub-height-117 { min-height: 64px !important; }
.czub-height-118 { min-height: 64px !important; }
.czub-height-119 { min-height: 64px !important; }
.czub-height-120 { min-height: 64px !important; }