/* ── Appearance tab: preset cards & background effects ── */

/* Use --font-body / --font-heading CSS variables for preset font switching */
body {
    font-family: var(--font-body, 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

h1 {
    font-family: var(--font-heading, 'Orbitron', sans-serif);
}

/* ─── Preset grid ─── */

.ap-hint {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.ap-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

/* ─── Preset card (shared) ─── */

.ap-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--card-bg);
    cursor: pointer;
    transition: border-color var(--duration-normal) var(--ease-out),
                box-shadow var(--duration-normal) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.ap-card:hover {
    border-color: var(--text-muted);
    transform: translateY(-1px);
}

.ap-card.active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color),
                0 0 12px -2px color-mix(in srgb, var(--primary-color) 40%, transparent);
}

.ap-card.active::after {
    content: '\2713';
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--primary-color);
}

.ap-card-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.2;
}

.ap-card.active .ap-card-label {
    color: var(--primary-color);
}

/* ─── Style preset preview ─── */

.ap-card-preview {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-sm);
    border: 1px solid;
    padding: 8px 7px 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
}

.ap-card-accent {
    width: 24px;
    height: 4px;
    border-radius: 2px;
    margin-bottom: 2px;
}

.ap-card-lines {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ap-card-lines span {
    display: block;
    height: 2px;
    border-radius: 1px;
    width: 100%;
}

/* ─── Background effect preview ─── */

.ap-bg-preview {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
}

.ap-bg-preview-inner {
    position: absolute;
    inset: 0;
}

/* Mini previews for each effect type */
[data-effect="none"] .ap-bg-preview-inner {
    background: var(--bg-color);
}

[data-effect="noise"] .ap-bg-preview-inner {
    background: radial-gradient(ellipse at 30% 50%,
        color-mix(in srgb, var(--primary-color) 20%, var(--bg-color)) 0%,
        var(--bg-color) 70%);
    animation: ap-noise-shimmer 4s ease-in-out infinite alternate;
}

@keyframes ap-noise-shimmer {
    from { opacity: 0.7; }
    to   { opacity: 1; }
}

/* ── Aurora preview: horizontal gradient bands ── */
[data-effect="aurora"] .ap-bg-preview-inner {
    background:
        linear-gradient(180deg,
            transparent 0%,
            color-mix(in srgb, var(--primary-color) 18%, transparent) 25%,
            transparent 50%,
            color-mix(in srgb, var(--primary-color) 12%, transparent) 70%,
            transparent 100%);
    animation: ap-aurora-sway 6s ease-in-out infinite alternate;
}

@keyframes ap-aurora-sway {
    from { transform: translateX(-5%) scaleY(1); opacity: 0.8; }
    to   { transform: translateX(5%) scaleY(1.15); opacity: 1; }
}

/* ── Plasma preview: color blobs ── */
[data-effect="plasma"] .ap-bg-preview-inner {
    background:
        radial-gradient(circle at 30% 40%,
            color-mix(in srgb, var(--primary-color) 20%, transparent) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%,
            color-mix(in srgb, var(--primary-color) 15%, transparent) 0%, transparent 50%),
        radial-gradient(circle at 50% 20%,
            color-mix(in srgb, var(--primary-color) 12%, transparent) 0%, transparent 40%);
    animation: ap-plasma-cycle 5s ease-in-out infinite alternate;
}

@keyframes ap-plasma-cycle {
    from { transform: scale(1) rotate(0deg); }
    to   { transform: scale(1.1) rotate(3deg); }
}

/* ── Digital Rain preview: vertical lines ── */
[data-effect="rain"] .ap-bg-preview-inner {
    background:
        linear-gradient(180deg, var(--primary-color) 0%, transparent 60%) 10% 0 / 1px 70% no-repeat,
        linear-gradient(180deg, var(--primary-color) 0%, transparent 50%) 25% 20% / 1px 50% no-repeat,
        linear-gradient(180deg, var(--primary-color) 0%, transparent 60%) 40% 10% / 1px 60% no-repeat,
        linear-gradient(180deg, var(--primary-color) 0%, transparent 40%) 55% 30% / 1px 40% no-repeat,
        linear-gradient(180deg, var(--primary-color) 0%, transparent 55%) 70% 5% / 1px 55% no-repeat,
        linear-gradient(180deg, var(--primary-color) 0%, transparent 50%) 85% 15% / 1px 50% no-repeat;
    opacity: 0.4;
    animation: ap-rain-fall 3s linear infinite;
}

@keyframes ap-rain-fall {
    from { transform: translateY(-20%); }
    to   { transform: translateY(20%); }
}

/* ── Stars preview: scattered dots ── */
[data-effect="stars"] .ap-bg-preview-inner {
    background:
        radial-gradient(circle 1px at 15% 20%, #fff 0%, transparent 100%),
        radial-gradient(circle 1.5px at 40% 60%, var(--primary-color) 0%, transparent 100%),
        radial-gradient(circle 1px at 65% 30%, #fff 0%, transparent 100%),
        radial-gradient(circle 0.8px at 80% 70%, #fff 0%, transparent 100%),
        radial-gradient(circle 1.2px at 30% 85%, var(--primary-color) 0%, transparent 100%),
        radial-gradient(circle 0.7px at 55% 15%, #fff 0%, transparent 100%),
        radial-gradient(circle 1px at 90% 45%, #fff 0%, transparent 100%),
        radial-gradient(circle 0.9px at 10% 55%, #fff 0%, transparent 100%);
    opacity: 0.7;
    animation: ap-stars-twinkle 3s ease-in-out infinite alternate;
}

@keyframes ap-stars-twinkle {
    from { opacity: 0.5; }
    to   { opacity: 0.8; }
}

/* ── Warp preview: radial tunnel ── */
[data-effect="warp"] .ap-bg-preview-inner {
    background: radial-gradient(circle at 50% 50%,
        color-mix(in srgb, var(--primary-color) 20%, transparent) 0%,
        transparent 30%,
        color-mix(in srgb, var(--primary-color) 10%, transparent) 50%,
        transparent 70%,
        color-mix(in srgb, var(--primary-color) 6%, transparent) 90%);
    animation: ap-warp-pulse 4s ease-in-out infinite;
}

@keyframes ap-warp-pulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50%      { transform: scale(1.2); opacity: 1; }
}

[data-effect="grid"] .ap-bg-preview-inner {
    background-image:
        radial-gradient(circle, var(--text-muted) 0.5px, transparent 0.5px);
    background-size: 8px 8px;
    opacity: 0.5;
}

[data-effect="mesh"] .ap-bg-preview-inner {
    background:
        radial-gradient(ellipse at 20% 30%,
            color-mix(in srgb, var(--primary-color) 18%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 70%,
            color-mix(in srgb, var(--primary-color) 12%, transparent) 0%, transparent 60%);
}

[data-effect="scanlines"] .ap-bg-preview-inner {
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 2px,
        color-mix(in srgb, var(--text-muted) 10%, transparent) 2px,
        color-mix(in srgb, var(--text-muted) 10%, transparent) 3px
    );
}

/* ═══ Full-page background effects ═══
   Uses a dedicated <div id="bg-effect-layer"> (same pattern as the WebGL canvas).
   The active effect class (e.g. .bg-effect-grid) is set directly on the div.
   Shader effects use <canvas id="bg-effect-canvas"> instead. */

/* When a CSS/shader bg effect is active, make body transparent so the layer shows
   (mirrors [data-bg-anim="on"] body { background: transparent } in base.css) */
[data-bg-effect] body {
    background: transparent;
}

[data-bg-effect] header {
    background: transparent;
}

[data-bg-effect] header::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: color-mix(in srgb, var(--bg-color) 60%, transparent);
}

/* Card translucency for bg effects (match existing bg-anim behaviour) */
[data-bg-effect][data-theme="dark"] .card,
[data-bg-effect][data-theme="dark"] .template-card,
[data-bg-effect][data-theme="dark"] .add-device-card,
[data-bg-effect][data-theme="dark"] .dashboard-target {
    background: rgba(45, 45, 45, 0.92);
}

[data-bg-effect][data-theme="light"] .card,
[data-bg-effect][data-theme="light"] .template-card,
[data-bg-effect][data-theme="light"] .add-device-card,
[data-bg-effect][data-theme="light"] .dashboard-target {
    background: rgba(255, 255, 255, 0.88);
}

#bg-effect-layer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

#bg-effect-layer.bg-effect-grid,
#bg-effect-layer.bg-effect-mesh,
#bg-effect-layer.bg-effect-scanlines {
    display: block;
}

/* ── Grid: dot matrix ── */
#bg-effect-layer.bg-effect-grid {
    background-image:
        radial-gradient(circle 1.5px, var(--text-color) 0%, transparent 100%);
    background-size: 24px 24px;
    opacity: 0.18;
}

/* ── Gradient mesh: ambient blobs ── */
#bg-effect-layer.bg-effect-mesh {
    background:
        radial-gradient(ellipse 600px 400px at 15% 20%,
            color-mix(in srgb, var(--primary-color) 25%, transparent) 0%, transparent 100%),
        radial-gradient(ellipse 500px 500px at 85% 80%,
            color-mix(in srgb, var(--primary-color) 18%, transparent) 0%, transparent 100%),
        radial-gradient(ellipse 400px 300px at 60% 40%,
            color-mix(in srgb, var(--primary-color) 14%, transparent) 0%, transparent 100%);
    animation: bg-mesh-drift 20s ease-in-out infinite alternate;
}

@keyframes bg-mesh-drift {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-20px, 15px) scale(1.05); }
    100% { transform: translate(10px, -10px) scale(0.98); }
}

/* ── Scanlines: retro CRT ── */
#bg-effect-layer.bg-effect-scanlines {
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 3px,
        color-mix(in srgb, var(--text-muted) 8%, transparent) 3px,
        color-mix(in srgb, var(--text-muted) 8%, transparent) 4px
    );
}

/* ─── Mobile: 2-column grid ─── */
@media (max-width: 480px) {
    .ap-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}