/* ============================================================
   Gradient Lines Background — Reusable animated background
   Supports both light and dark themes via [data-bs-theme]
   Usage: Add class "gradient-lines-bg" to any container element
   ============================================================ */

.gradient-lines-bg {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    transition: background 0.5s ease;
}

/* Light theme */
.gradient-lines-bg {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(99,102,241,0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(236,72,153,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 80%, rgba(34,211,238,0.06) 0%, transparent 50%),
        linear-gradient(135deg, #f0f2ff 0%, #fafbff 40%, #f5f0fa 70%, #eef4ff 100%);
}

/* Dark theme */
[data-bs-theme="dark"] .gradient-lines-bg {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(99,102,241,0.12) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 20%, rgba(236,72,153,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 80%, rgba(34,211,238,0.08) 0%, transparent 50%),
        linear-gradient(135deg, #07080d 0%, #0e1019 40%, #100c16 70%, #080b13 100%);
}

/* Canvas layer */
.gradient-lines-bg .gradient-lines-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Content above canvas */
.gradient-lines-bg > *:not(.gradient-lines-canvas) {
    position: relative;
    z-index: 1;
}