/* ============================================================================
   AURIX WORKSHOP — theme overlay
   Loads after style.css. Dark futuristic UI: electric blue/violet accent
   (no red brand color), glass surfaces, soft glow, pill controls, big type,
   wave loader, pricing. Reuses existing selectors/hooks — no logic changes.
   ============================================================================ */

:root{
    /* Re-point the brand accent from red to electric blue/violet */
    --neon:        #6d8bff;
    --neon-2:      #8a6cff;
    --neon-bright: #9db0ff;
    --neon-deep:   #3a55d6;
    --neon-glow:   rgba(109,139,255,.5);
    --neon-soft:   rgba(109,139,255,.12);
    --line-neon:   rgba(109,139,255,.4);

    /* Keep ONE dim functional red only for destructive actions */
    --danger:    #e0566a;
    --danger-bg: rgba(224,86,106,.10);

    --glass:        rgba(13,19,30,.55);
    --glass-2:      rgba(18,26,40,.62);
    --glass-line:   rgba(255,255,255,.08);
    --glass-line-2: rgba(255,255,255,.14);
    --glass-hi:     rgba(255,255,255,.05);
    --cool:         rgba(109,139,255,.22);
    --cool-soft:    rgba(109,139,255,.10);
    --r-card:       16px;
    --r-card-lg:    22px;
}

/* Fail-safe: content must never depend on JS to be visible.
   Overrides the [data-reveal]{opacity:0} hide so a script hiccup
   can never blank the page. JS reveal becomes a no-op enhancement. */
[data-reveal]{opacity:1!important;transform:none!important}

/* Atmosphere ------------------------------------------------------------- */
.bg-base{
    background:
        radial-gradient(ellipse 80% 60% at 50% 100%, rgba(60,90,200,.16), transparent 60%),
        radial-gradient(ellipse 60% 50% at 50% 0%, rgba(30,40,70,.32), transparent 70%),
        linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 60%, #03040a 100%);
}
.bg-base::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:
        radial-gradient(60% 50% at 50% -10%, var(--cool-soft), transparent 60%),
        radial-gradient(40% 40% at 85% 110%, rgba(138,108,255,.07), transparent 70%);
}

/* Pill controls ---------------------------------------------------------- */
.btn{
    border-radius:var(--r-pill);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    transition:transform .22s var(--ease-out),border-color .22s var(--ease-out),
        box-shadow .22s var(--ease-out),color .22s var(--ease-out);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{
    background:linear-gradient(180deg, rgba(109,139,255,.18), rgba(109,139,255,.05));
    box-shadow:0 0 0 1px rgba(109,139,255,.28) inset, 0 8px 28px rgba(109,139,255,.2);
}
.btn-primary:hover{
    box-shadow:0 0 0 1px rgba(157,176,255,.55) inset, 0 10px 34px rgba(109,139,255,.34);
}
.btn-soft{
    border:1px solid transparent;background:#f4f5f7;color:#0b0f14;text-shadow:none;
    box-shadow:0 8px 28px rgba(0,0,0,.35);
}
.btn-soft::before{display:none}
.btn-soft:hover{background:#fff;color:#0b0f14;box-shadow:0 12px 36px rgba(0,0,0,.45)}
.btn-soft svg{stroke:currentColor}

/* Glass + auth card ------------------------------------------------------ */
.glass{
    background:var(--glass);backdrop-filter:blur(18px) saturate(120%);
    -webkit-backdrop-filter:blur(18px) saturate(120%);
    border:1px solid var(--glass-line);border-radius:var(--r-card-lg);
    box-shadow:0 0 0 1px var(--glass-hi) inset, 0 30px 80px -30px rgba(0,0,0,.8);
}
.auth-card{
    background:var(--glass-2)!important;backdrop-filter:blur(20px) saturate(120%);
    -webkit-backdrop-filter:blur(20px) saturate(120%);
    border:1px solid var(--glass-line)!important;border-radius:var(--r-card-lg);
    box-shadow:0 0 0 1px var(--glass-hi) inset, 0 1px 0 var(--glass-line-2) inset,
        0 40px 90px -30px rgba(0,0,0,.85), 0 0 60px -20px var(--cool);
}
.auth-card input[type="text"],
.auth-card input[type="password"],
.auth-card input[type="email"]{border-radius:12px}
.auth-title{
    font-size:clamp(34px,6vw,52px);line-height:1.02;letter-spacing:-.03em;
    background:linear-gradient(180deg,#fff 0%,#c6cdd6 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
}
.auth-title .neon{-webkit-text-fill-color:var(--neon-bright);color:var(--neon-bright)}

/* Wave loader ------------------------------------------------------------ */
.loader{gap:22px;background:radial-gradient(60% 50% at 50% 45%, rgba(109,139,255,.07), transparent 70%), var(--bg)}
.wave-loader{display:flex;align-items:center;justify-content:center;gap:6px;height:40px}
.wave-loader span{width:6px;height:18px;border-radius:3px;background:var(--fg);
    transform-origin:center;animation:waveScale 1s ease-in-out infinite}
.wave-loader span:nth-child(1){animation-delay:0s}
.wave-loader span:nth-child(2){animation-delay:.1s}
.wave-loader span:nth-child(3){animation-delay:.2s}
.wave-loader span:nth-child(4){animation-delay:.3s}
.wave-loader span:nth-child(5){animation-delay:.4s}
@keyframes waveScale{0%,100%{transform:scaleY(1);opacity:.65}50%{transform:scaleY(1.9);opacity:1}}
@media(prefers-reduced-motion:reduce){.wave-loader span{animation:none}}

/* Pricing ---------------------------------------------------------------- */
.pricing{position:relative;z-index:1;padding:clamp(48px,8vw,96px) 20px;text-align:center}
.pricing-inner{max-width:1120px;margin:0 auto}
.pricing-eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.34em;
    text-transform:uppercase;color:var(--fg-3);margin-bottom:14px}
.pricing-title{font-family:var(--font-display);font-weight:800;font-size:clamp(40px,8vw,84px);
    line-height:.98;letter-spacing:-.035em;
    background:linear-gradient(180deg,#fff 0%,#aeb6c0 120%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
.pricing-sub{color:var(--fg-2);font-size:clamp(15px,2.4vw,19px);margin:16px auto 0;max-width:620px}

.pricing-toggle-input{position:absolute;opacity:0;pointer-events:none}
.pricing-toggle{display:inline-flex;align-items:center;gap:2px;margin:30px auto 0;padding:5px;
    border-radius:var(--r-pill);background:var(--glass-2);border:1px solid var(--glass-line);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);cursor:pointer;user-select:none}
.pricing-toggle span{padding:8px 22px;border-radius:var(--r-pill);font-size:14px;color:var(--fg-2);
    transition:color .2s var(--ease-out),background .2s var(--ease-out)}
.pricing-toggle .opt-month{background:var(--surface-2);color:var(--fg)}
.pricing-toggle .opt-year{background:transparent}
.pricing-toggle-input:checked ~ .pricing-toggle .opt-month{background:transparent;color:var(--fg-2)}
.pricing-toggle-input:checked ~ .pricing-toggle .opt-year{background:var(--surface-2);color:var(--fg)}

.price-yearly{display:none}
.pricing-toggle-input:checked ~ .pricing-grid .price-monthly{display:none}
.pricing-toggle-input:checked ~ .pricing-grid .price-yearly{display:inline}

.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;
    text-align:left;align-items:start}
.price-card{position:relative;padding:30px 28px;border-radius:var(--r-card-lg);
    background:var(--glass);border:1px solid var(--glass-line);
    backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%);
    box-shadow:0 0 0 1px var(--glass-hi) inset, 0 30px 70px -34px rgba(0,0,0,.85);
    transition:transform .28s var(--ease-out),border-color .28s var(--ease-out),box-shadow .28s var(--ease-out)}
.price-card:hover{transform:translateY(-6px);border-color:var(--glass-line-2);
    box-shadow:0 0 0 1px var(--glass-hi) inset, 0 40px 90px -34px rgba(0,0,0,.9), 0 0 50px -24px var(--cool)}
.price-card--featured{border-color:rgba(109,139,255,.4);background:var(--glass-2);
    box-shadow:0 0 0 1px rgba(109,139,255,.14) inset, 0 36px 90px -34px rgba(0,0,0,.9), 0 0 70px -28px var(--neon-glow)}
.price-card--featured::before{content:"";position:absolute;inset:-1px -1px auto -1px;height:2px;
    border-radius:var(--r-card-lg) var(--r-card-lg) 0 0;
    background:linear-gradient(90deg,transparent,var(--neon-bright),transparent)}

.price-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
    display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:var(--r-pill);
    background:var(--surface-2);border:1px solid var(--glass-line-2);font-family:var(--font-mono);
    font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg);white-space:nowrap;
    box-shadow:0 8px 24px rgba(0,0,0,.5)}
.price-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--neon-bright);
    box-shadow:0 0 8px var(--neon-glow)}

.price-name{font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--fg)}
.price-value{display:flex;align-items:baseline;gap:10px;margin:16px 0 4px}
.price-amount{font-family:var(--font-display);font-size:clamp(38px,6vw,52px);font-weight:800;
    letter-spacing:-.03em;color:#fff}
.price-per{color:var(--fg-3);font-size:14px}
.price-for{color:var(--fg-2);font-size:14px;margin-bottom:22px}
.price-features{list-style:none;display:flex;flex-direction:column;gap:14px;margin:0 0 26px}
.price-features li{display:flex;align-items:center;gap:11px;color:var(--fg);font-size:14.5px}
.price-features svg{flex:none;width:17px;height:17px;stroke:var(--fg-2);fill:none;
    stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.price-card--featured .price-features svg{stroke:var(--neon-bright)}
.price-card .btn{width:100%;height:46px;font-size:11px}

/* Responsive ------------------------------------------------------------- */
@media(max-width:920px){
    .pricing-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
    .price-card--featured{order:-1}
}
@media(max-width:480px){
    .pricing{padding-inline:16px}
    .price-card{padding:26px 22px}
}

/* ============================================================================
   Global lightning background + glass for shared components (all pages)
   ============================================================================ */
.bg-lightning{
    position:fixed;
    top:0;left:0;
    width:100vw;height:100vh;
    z-index:0;
    pointer-events:none;
    opacity:.22;                 /* subtle on dashboards */
    -webkit-mask-image:radial-gradient(120% 80% at 50% -10%, #000 30%, transparent 75%);
            mask-image:radial-gradient(120% 80% at 50% -10%, #000 30%, transparent 75%);
}
body.is-auth .bg-lightning{      /* prominent on login/register */
    opacity:.6;
    -webkit-mask-image:radial-gradient(75% 75% at 50% 35%, #000 35%, transparent 80%);
            mask-image:radial-gradient(75% 75% at 50% 35%, #000 35%, transparent 80%);
}
@media (prefers-reduced-motion: reduce){ .bg-lightning{ opacity:.12 } }

/* Cards → glass */
.card{
    background:var(--glass)!important;
    border:1px solid var(--glass-line)!important;
    border-radius:var(--r-card);
    backdrop-filter:blur(16px) saturate(120%);
    -webkit-backdrop-filter:blur(16px) saturate(120%);
    box-shadow:0 0 0 1px var(--glass-hi) inset, 0 24px 60px -34px rgba(0,0,0,.85);
    transition:transform .26s var(--ease-out),border-color .26s var(--ease-out),box-shadow .26s var(--ease-out);
}
.card:hover{
    transform:translateY(-3px);
    border-color:var(--glass-line-2)!important;
    box-shadow:0 0 0 1px var(--glass-hi) inset, 0 34px 80px -34px rgba(0,0,0,.9), 0 0 50px -28px var(--cool);
}
.card-pad-lg{ border-radius:var(--r-card-lg) }

/* Inputs → rounded glass fields */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select{
    border-radius:12px;
    background:rgba(255,255,255,.03)!important;
    border:1px solid var(--glass-line)!important;
    transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out), background .2s var(--ease-out);
}
input:focus,textarea:focus,select:focus{
    border-color:rgba(109,139,255,.55)!important;
    box-shadow:0 0 0 3px rgba(109,139,255,.16)!important;
    background:rgba(255,255,255,.05)!important;
}

/* Pills, stats, modal, popups → glass + rounded */
.pill{ border-radius:var(--r-pill); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px) }
.stat{
    border-radius:14px;
    background:var(--glass)!important;
    border:1px solid var(--glass-line)!important;
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.stat:hover{ border-color:var(--glass-line-2)!important; transform:translateY(-2px) }
.modal{
    border-radius:var(--r-card-lg)!important;
    background:var(--glass-2)!important;
    border:1px solid var(--glass-line)!important;
    backdrop-filter:blur(22px) saturate(120%);-webkit-backdrop-filter:blur(22px) saturate(120%);
    box-shadow:0 0 0 1px var(--glass-hi) inset, 0 40px 100px -30px rgba(0,0,0,.9);
}
.modal-backdrop{ backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px) }
.color-popup,.ctx-menu{
    border-radius:14px!important;
    background:var(--glass-2)!important;
    border:1px solid var(--glass-line)!important;
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.toast{
    border-radius:14px!important;
    background:var(--glass-2)!important;
    border:1px solid var(--glass-line)!important;
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}

/* Sidebar + topbar → translucent glass rails */
.sidebar{
    background:rgba(8,11,18,.6)!important;
    border-right:1px solid var(--glass-line)!important;
    backdrop-filter:blur(20px) saturate(120%);-webkit-backdrop-filter:blur(20px) saturate(120%);
}
.topbar{
    background:rgba(8,11,18,.45)!important;
    border-bottom:1px solid var(--glass-line)!important;
    backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%);
}
.nav-item{ border-radius:12px }
.nav-item.current{ background:rgba(109,139,255,.12) }
.user-card{ border-radius:14px }

/* Builds hero heading scales up a touch */
.hero-title,.hero-main h1{ letter-spacing:-.03em }

/* Keep content above the lightning */
.shell,.sidebar,.page,.auth-wrap{ position:relative; z-index:1 }

/* ============================================================================
   Fine elements inside builds / admin / profile
   ============================================================================ */
.script-row,.preset-row{
    border-radius:12px;
    background:rgba(255,255,255,.02);
    border:1px solid var(--glass-line)!important;
    transition:transform .2s var(--ease-out),border-color .2s var(--ease-out),background .2s var(--ease-out);
}
.script-row:hover,.preset-row:hover{
    transform:translateY(-2px);
    border-color:var(--glass-line-2)!important;
    background:rgba(255,255,255,.04);
}
.def-row{ border-radius:10px }
.def-row:hover{ background:rgba(255,255,255,.03) }

.search-input{
    border-radius:var(--r-pill)!important;
    background:rgba(255,255,255,.03)!important;
    border:1px solid var(--glass-line)!important;
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.search-input:hover{ border-color:var(--glass-line-2)!important }
.search-input:focus-within{
    border-color:rgba(109,139,255,.55)!important;
    box-shadow:0 0 0 3px rgba(109,139,255,.16)!important;
}
.search-input .search-ico{ color:var(--neon-bright) }

.fav-btn{ border-radius:10px; border:1px solid var(--glass-line); transition:.2s }
.fav-btn:hover{ transform:translateY(-1px) }

.ctx-item{ border-radius:9px }
.check input[type="checkbox"]{ border-radius:6px }

.script-editor textarea,
textarea.script-editor{ border-radius:12px }

.notice{
    border-radius:12px;
    background:var(--glass)!important;
    border:1px solid var(--glass-line)!important;
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.empty{
    border-radius:var(--r-card);
    background:rgba(255,255,255,.015);
    border:1px dashed var(--glass-line);
}

.card-head{ border-bottom:1px solid var(--glass-line) }
.build-card,.build-card-head{ border-radius:var(--r-card) }
.build-card{
    background:var(--glass)!important;
    border:1px solid var(--glass-line)!important;
    backdrop-filter:blur(16px) saturate(120%);-webkit-backdrop-filter:blur(16px) saturate(120%);
    transition:transform .26s var(--ease-out),border-color .26s var(--ease-out),box-shadow .26s var(--ease-out);
}
.build-card:hover{
    transform:translateY(-3px);
    border-color:var(--glass-line-2)!important;
    box-shadow:0 30px 70px -34px rgba(0,0,0,.9), 0 0 50px -28px var(--cool);
}

/* Buttons used at small size keep the pill shape consistently */
.btn-sm{ border-radius:var(--r-pill) }
.icon-btn{ border-radius:10px }