/* ==========================================================================
   APF — Controls THEME (tokens, dark glass, conic glows)
   Scope: .apf-common-box (no layout or component structure here)
   ========================================================================== */

.apf-common-box {
    /* ABG ? control tokens */
    --ctl-c1: rgb(var(--abg-c1,120,200,255));
    --ctl-c2: rgb(var(--abg-c2,140,100,255));
    --ctl-c3: rgb(var(--abg-c3, 80,255,200));
    /* Accent hues for neon effects */
    --hue1: 255; /* violet/indigo */
    --hue2: 222; /* cobalt/blue */
    /* Typography + colors */
    --text-high: #eaf2ff;
    --text-mid: rgba(234,242,255,.74);
    /* Surface + borders (dark glass) */
    --border: hsl(var(--hue2) 12% 20% / .75);
    --radius: 12px;
    --gap: 6px;
    /* Focus + primary */
    --primary: var(--ctl-c2);
    --focus-ring: color-mix(in oklch, var(--ctl-c2) 60%, transparent);
    --focus-ring-strong: color-mix(in oklch, var(--ctl-c2) 85%, transparent);
    /* Motion + gradients */
    --ease: cubic-bezier(.5,1,.89,1);
    --transition: .22s var(--ease);
    --ctl-gradient: linear-gradient(135deg, color-mix(in oklch, var(--ctl-c1) 92%, black), color-mix(in oklch, var(--ctl-c2) 92%, black));
    /* Glass layers */
    --glassA: linear-gradient(235deg, hsl(var(--hue1) 50% 10% / .75), hsl(var(--hue1) 50% 10% / 0) 33%);
    --glassB: linear-gradient( 45deg, hsl(var(--hue2) 50% 10% / .80), hsl(var(--hue2) 50% 10% / 0) 33%);
    --glassBase: linear-gradient(hsl(220deg 25% 6% / .66));
    /* Shadows */
    --drop-sm: 0 8px 18px hsl(var(--hue2) 50% 4% / .35);
    --drop-lg: 0 20px 36px hsl(var(--hue2) 50% 3% / .32);
}

    /* Optional theme toggles */
    .apf-common-box[data-theme="glass"] { /* stronger glass look */
        --glassBase: linear-gradient(hsl(220deg 25% 6% / .5));
    }

    /* Card skin (visual theme only) */
    .apf-common-box .apf-card {
        position: relative;
        color: var(--text-high);
        background-image: var(--glassA), var(--glassB), var(--glassBase);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: .9rem;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        box-shadow: var(--drop-sm);
        transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition), background var(--transition);
    }

        .apf-common-box .apf-card:hover {
            box-shadow: var(--drop-lg);
            transform: translateY(-1px);
        }

        /* Neon conic “ring” */
        .apf-common-box .apf-card::before,
        .apf-common-box .apf-card::after {
            content: "";
            position: absolute;
            inset: -10px;
            border-radius: calc(var(--radius) + 10px);
            pointer-events: none;
            mix-blend-mode: plus-lighter;
            filter: blur(10px) saturate(1.2);
            opacity: .55;
            transition: opacity var(--transition), filter var(--transition);
        }

        .apf-common-box .apf-card::before {
            background: conic-gradient( from -45deg at 22% 28% in oklch, transparent 0%, hsl(var(--hue1) 95% 60%) 12% 18%, transparent 26% 58%, hsl(var(--hue2) 95% 62%) 66% 74%, transparent 82% 100% );
            mask: radial-gradient(180% 140% at 50% 50%, #000 58%, transparent 62%);
        }

        .apf-common-box .apf-card::after {
            inset: -6px;
            border-radius: calc(var(--radius) + 6px);
            background: conic-gradient( from 135deg at 78% 72% in oklch, transparent 0% 12%, hsl(var(--hue2) 96% 68%) 18% 24%, transparent 30% 56%, hsl(var(--hue1) 96% 66%) 62% 70%, transparent 76% 100% );
            opacity: .35;
        }

        .apf-common-box .apf-card:hover::before {
            opacity: .82;
            filter: blur(9px) saturate(1.3);
        }

        .apf-common-box .apf-card:hover::after {
            opacity: .55;
        }

    /* Themed divider */
    .apf-common-box hr {
        height: 1px;
        border: 0;
        background: linear-gradient(90deg, transparent, hsl(var(--hue2) 16% 28% / .65) 12%, hsl(var(--hue1) 16% 28% / .65) 88%, transparent);
        opacity: .85;
    }

/* Optional pulsing glow */
@keyframes apfGlow {
    0%,100% {
        filter: blur(10px) saturate(1.15);
        opacity: .55;
    }

    50% {
        filter: blur(12px) saturate(1.35);
        opacity: .85;
    }
}

.apf-common-box.apf-theme--pulse .apf-card::before {
    animation: apfGlow 3.2s var(--ease) infinite;
}

.apf-common-box.apf-theme--pulse .apf-card::after {
    animation: apfGlow 4.0s var(--ease) infinite reverse;
}