.hero-grid {
    background-image:
        radial-gradient(circle at 20% 20%, rgba(34, 197, 94, 0.15), transparent 35%),
        radial-gradient(circle at 80% 0%, rgba(59, 130, 246, 0.12), transparent 30%);
}

.upload-zone.dragover {
    border-color: rgb(34 197 94);
    background: rgba(34, 197, 94, 0.08);
}

.loading-spinner {
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: rgb(34 197 94);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.plan-canvas {
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}

.sketch-canvas {
    display: block;
    cursor: crosshair;
    border-radius: 0.75rem;
    background-color: #0f172a;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 16px 16px;
}

.sketch-canvas.eraser-mode {
    cursor: cell;
}

@media print {
    nav, footer, .no-print { display: none !important; }
}