.canvas-gen-root {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    background: var(--generation-panel);
    color: var(--generation-text);
    pointer-events: none;
}

.canvas-gen-spinner {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 2px solid var(--generation-stroke);
    border-top-color: var(--generation-active);
    border-radius: 50%;
    animation: canvas-gen-spin 1s linear infinite;
}

.canvas-gen-number { font-size: 14px; line-height: 1; font-variant-numeric: tabular-nums; }
.canvas-gen-caption { color: var(--generation-muted); font-size: 10px; line-height: 1.3; white-space: nowrap; }
.canvas-gen-caption time { font-variant-numeric: tabular-nums; }
.canvas-gen-compact { gap: 7px; }
.canvas-gen-compact .canvas-gen-spinner { width: 26px; height: 26px; }
.canvas-gen-compact .canvas-gen-number { font-size: 12px; }
.canvas-gen-waiting .canvas-gen-spinner { animation: none; border-top-color: var(--generation-stroke); }

@keyframes canvas-gen-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .canvas-gen-spinner { animation: none; }
}