@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;700&family=Vazirmatn:wght@100;300;400;700;900&display=swap');

:root {
    --bg-dark: #050505;
    --primary: #06b6d4;
    --secondary: #a855f7;
    --glass-border: rgba(255, 255, 255, 0.08);
    --content-max: 1200px;
    --content-gutter: 24px;
}

/* --- Auth (login/signup) page --- */
.auth-page {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    position: relative;
    --orb-cyan: rgba(34, 211, 238, 0.7);
    --orb-purple: rgba(168, 85, 247, 0.65);
    background: radial-gradient(1100px 700px at 8% 16%, rgba(34, 211, 238, 0.32), transparent 58%), radial-gradient(900px 620px at 88% 18%, rgba(168, 85, 247, 0.32), transparent 62%), radial-gradient(800px 600px at 50% 90%, rgba(59, 130, 246, 0.18), transparent 70%), linear-gradient(135deg, #02040b 0%, #0a1222 52%, #04060f 100%);
    overflow: hidden;
}

body.auth-page {
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

    body.auth-page *,
    body.auth-page *::before,
    body.auth-page *::after {
        box-sizing: inherit;
    }

.auth-page * {
    font-family: 'Vazirmatn', sans-serif;
}

.auth-page::before,
.auth-page::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 20% 80% 70% 30% / 30% 60% 40% 70%;
    filter: blur(60px);
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
    animation: authGlowFloat 16s ease-in-out infinite;
}

.auth-page::before {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.65), rgba(34, 211, 238, 0.08));
    top: -140px;
    right: -120px;
}

.auth-page::after {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.65), rgba(168, 85, 247, 0.08));
    bottom: -160px;
    left: -100px;
    animation-delay: -7s;
}

@keyframes authGlowFloat {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        transform: translate(26px, -22px) rotate(6deg);
    }

    100% {
        transform: translate(-18px, 18px) rotate(-4deg);
    }
}

html[data-theme="light"] .auth-page {
    --orb-cyan: rgba(34, 211, 238, 0.45);
    --orb-purple: rgba(168, 85, 247, 0.4);
    background: radial-gradient(circle at 10% 20%, rgba(6, 182, 212, 0.18), transparent 45%), radial-gradient(circle at 80% 10%, rgba(168, 85, 247, 0.2), transparent 50%), radial-gradient(700px 500px at 50% 90%, rgba(59, 130, 246, 0.12), transparent 70%), linear-gradient(135deg, #f5f7fb 0%, #e9edf7 50%, #f5f7fb 100%);
}

    html[data-theme="light"] .auth-page::before {
        background: linear-gradient(135deg, rgba(34, 211, 238, 0.45), rgba(34, 211, 238, 0.05));
    }

    html[data-theme="light"] .auth-page::after {
        background: linear-gradient(135deg, rgba(168, 85, 247, 0.45), rgba(168, 85, 247, 0.05));
    }

.auth-orbits {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

    .auth-orbits::before {
        content: "";
        position: absolute;
        inset: -30% -10%;
        background: conic-gradient(from 180deg at 50% 50%, rgba(34, 211, 238, 0.18), transparent 35%, rgba(168, 85, 247, 0.2), transparent 65%);
        filter: blur(60px);
        opacity: 0.55;
        mix-blend-mode: screen;
        animation: auroraSweep 26s ease-in-out infinite;
    }

    .auth-orbits::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.06), transparent 40%), radial-gradient(circle at 80% 60%, rgba(255, 255, 255, 0.05), transparent 45%), radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0.04), transparent 50%);
        opacity: 0.5;
        animation: dustDrift 20s ease-in-out infinite alternate;
    }

.auth-constellation {
    position: absolute;
    inset: -6% -6%;
    width: 112%;
    height: 112%;
    opacity: 0.9;
    filter: drop-shadow(0 0 12px rgba(4, 231, 255, 0.4)) drop-shadow(0 0 22px rgba(122, 29, 255, 0.3));
}

.constellation-group {
    transform-origin: 50% 50%;
}

.tri {
    fill: rgba(255, 255, 255, 0.06);
    stroke: rgba(255, 255, 255, 0.18);
    stroke-width: 1.2;
    filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.35));
    transform-box: fill-box;
    transform-origin: center;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.tri-2,
.tri-4,
.tri-6 {
    stroke: rgba(255, 255, 255, 0.2);
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.35));
}

.tri-1 {
    animation: triDriftA 18s ease-in-out infinite;
}

.tri-2 {
    animation: triDriftB 22s ease-in-out infinite;
}

.tri-3 {
    animation: triDriftC 20s ease-in-out infinite;
}

.tri-4 {
    animation: triDriftD 26s ease-in-out infinite;
}

.tri-5 {
    animation: triDriftE 19s ease-in-out infinite;
}

.tri-6 {
    animation: triDriftF 24s ease-in-out infinite;
}

.tri-7 {
    animation: triDriftG 21s ease-in-out infinite;
}

.tri-8 {
    animation: triDriftH 23s ease-in-out infinite;
}

.tri-9 {
    animation: triDriftI 17s ease-in-out infinite;
}

.tri-10 {
    animation: triDriftJ 25s ease-in-out infinite;
}

@keyframes triDriftA {
    0% {
        transform: translate(-40px, 20px) rotate(-2deg);
        opacity: 0.35;
    }

    50% {
        transform: translate(60px, -40px) rotate(2deg);
        opacity: 0.7;
    }

    100% {
        transform: translate(-40px, 20px) rotate(-2deg);
        opacity: 0.35;
    }
}

@keyframes triDriftB {
    0% {
        transform: translate(30px, -30px) rotate(1deg);
        opacity: 0.4;
    }

    50% {
        transform: translate(-70px, 50px) rotate(-2deg);
        opacity: 0.75;
    }

    100% {
        transform: translate(30px, -30px) rotate(1deg);
        opacity: 0.4;
    }
}

@keyframes triDriftC {
    0% {
        transform: translate(-20px, -40px) rotate(2deg);
        opacity: 0.35;
    }

    50% {
        transform: translate(80px, 30px) rotate(-1.5deg);
        opacity: 0.7;
    }

    100% {
        transform: translate(-20px, -40px) rotate(2deg);
        opacity: 0.35;
    }
}

@keyframes triDriftD {
    0% {
        transform: translate(50px, 10px) rotate(-1deg);
        opacity: 0.4;
    }

    50% {
        transform: translate(-80px, -50px) rotate(2deg);
        opacity: 0.75;
    }

    100% {
        transform: translate(50px, 10px) rotate(-1deg);
        opacity: 0.4;
    }
}

@keyframes triDriftE {
    0% {
        transform: translate(-60px, 30px) rotate(1.5deg);
        opacity: 0.35;
    }

    50% {
        transform: translate(70px, -60px) rotate(-2deg);
        opacity: 0.7;
    }

    100% {
        transform: translate(-60px, 30px) rotate(1.5deg);
        opacity: 0.35;
    }
}

@keyframes triDriftF {
    0% {
        transform: translate(20px, 50px) rotate(-1.5deg);
        opacity: 0.4;
    }

    50% {
        transform: translate(-60px, -40px) rotate(2deg);
        opacity: 0.75;
    }

    100% {
        transform: translate(20px, 50px) rotate(-1.5deg);
        opacity: 0.4;
    }
}

@keyframes triDriftG {
    0% {
        transform: translate(-30px, -20px) rotate(1deg);
        opacity: 0.35;
    }

    50% {
        transform: translate(60px, 60px) rotate(-2deg);
        opacity: 0.7;
    }

    100% {
        transform: translate(-30px, -20px) rotate(1deg);
        opacity: 0.35;
    }
}

@keyframes triDriftH {
    0% {
        transform: translate(40px, -10px) rotate(-2deg);
        opacity: 0.4;
    }

    50% {
        transform: translate(-70px, 40px) rotate(2deg);
        opacity: 0.75;
    }

    100% {
        transform: translate(40px, -10px) rotate(-2deg);
        opacity: 0.4;
    }
}

@keyframes triDriftI {
    0% {
        transform: translate(-20px, 40px) rotate(2deg);
        opacity: 0.35;
    }

    50% {
        transform: translate(70px, -50px) rotate(-2deg);
        opacity: 0.7;
    }

    100% {
        transform: translate(-20px, 40px) rotate(2deg);
        opacity: 0.35;
    }
}

@keyframes triDriftJ {
    0% {
        transform: translate(50px, -50px) rotate(-1.5deg);
        opacity: 0.4;
    }

    50% {
        transform: translate(-80px, 30px) rotate(2deg);
        opacity: 0.75;
    }

    100% {
        transform: translate(50px, -50px) rotate(-1.5deg);
        opacity: 0.4;
    }
}

.starfield .star {
    fill: rgba(255, 255, 255, 0.65);
    animation: starTwinkle 3.6s ease-in-out infinite;
}

.starfield .star-2,
.starfield .star-5,
.starfield .star-8,
.starfield .star-11 {
    animation-duration: 4.6s;
    opacity: 0.45;
}

.starfield .star-3,
.starfield .star-6,
.starfield .star-9,
.starfield .star-12 {
    animation-duration: 5.2s;
    opacity: 0.35;
}

.starfield {
    animation: starfieldDrift 34s linear infinite;
    transform-origin: 50% 50%;
}

@keyframes starTwinkle {

    0%, 100% {
        opacity: 0.25;
        transform: scale(0.9);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.25);
    }
}

@keyframes starfieldDrift {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    100% {
        transform: translate(-40px, 30px) rotate(2deg);
    }
}

@keyframes auroraSweep {
    0% {
        transform: translate(-6%, 2%) rotate(0deg);
        opacity: 0.35;
    }

    50% {
        transform: translate(6%, -2%) rotate(8deg);
        opacity: 0.6;
    }

    100% {
        transform: translate(-4%, 4%) rotate(-6deg);
        opacity: 0.4;
    }
}

@keyframes dustDrift {
    0% {
        transform: translate(0, 0);
        opacity: 0.3;
    }

    100% {
        transform: translate(18px, -12px);
        opacity: 0.55;
    }
}

html[data-theme="light"] .auth-orbits::before {
    opacity: 0.35;
}

html[data-theme="light"] .auth-orbits::after {
    opacity: 0.35;
    background: radial-gradient(circle at 20% 30%, rgba(14, 116, 144, 0.12), transparent 40%), radial-gradient(circle at 80% 60%, rgba(168, 85, 247, 0.1), transparent 45%), radial-gradient(circle at 50% 80%, rgba(14, 116, 144, 0.1), transparent 50%);
}

html[data-theme="light"] .starfield .star {
    fill: rgba(14, 116, 144, 0.7);
    opacity: 0.6;
}

html[data-theme="light"] .starfield .star-2,
html[data-theme="light"] .starfield .star-5,
html[data-theme="light"] .starfield .star-8,
html[data-theme="light"] .starfield .star-11 {
    opacity: 0.5;
}

html[data-theme="light"] .starfield .star-3,
html[data-theme="light"] .starfield .star-6,
html[data-theme="light"] .starfield .star-9,
html[data-theme="light"] .starfield .star-12 {
    opacity: 0.42;
}

html[data-theme="light"] .starfield .star-4,
html[data-theme="light"] .starfield .star-7,
html[data-theme="light"] .starfield .star-10,
html[data-theme="light"] .starfield .star-13,
html[data-theme="light"] .starfield .star-16,
html[data-theme="light"] .starfield .star-19,
html[data-theme="light"] .starfield .star-22 {
    opacity: 0.48;
}

html[data-theme="light"] .starfield .star-14,
html[data-theme="light"] .starfield .star-17,
html[data-theme="light"] .starfield .star-20 {
    opacity: 0.36;
}

html[data-theme="light"] .starfield .star-15,
html[data-theme="light"] .starfield .star-18,
html[data-theme="light"] .starfield .star-21 {
    opacity: 0.32;
}

html[data-theme="light"] .auth-constellation {
    opacity: 0.7;
    filter: drop-shadow(0 0 10px rgba(6, 182, 212, 0.25)) drop-shadow(0 0 14px rgba(168, 85, 247, 0.2));
}

html[data-theme="light"] .tri {
    fill: rgba(255, 255, 255, 0.4);
    stroke: rgba(15, 23, 42, 0.18);
}

html[data-theme="light"] .auth-row a {
    color: #0f172a;
    text-shadow: 0 0 10px rgba(34, 211, 238, 0.25);
}

    html[data-theme="light"] .auth-row a::before {
        border-bottom-color: rgba(15, 23, 42, 0.3);
        opacity: 0.6;
    }

    html[data-theme="light"] .auth-row a::after {
        background: linear-gradient(90deg, rgba(6, 182, 212, 0.0), rgba(6, 182, 212, 0.9), rgba(168, 85, 247, 0.7));
    }

.auth-theme-toggle {
    position: fixed;
    top: 24px;
    inset-inline-end: 24px;
    z-index: 3;
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.25);
}

.auth-shell {
    width: min(1100px, 100%);
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(300px, 460px);
    gap: 48px;
    position: relative;
    z-index: 1;
}

.auth-shell-single {
    grid-template-columns: minmax(300px, 520px);
    justify-content: center;
}

.auth-intro {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.auth-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #22d3ee;
}

.auth-title {
    font-family: 'Chakra Petch', sans-serif;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.2;
    margin: 0;
    color: #f8fafc;
}

.auth-lead {
    font-size: 16px;
    color: #cbd5f5;
    max-width: 420px;
}

.auth-bullets {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.auth-bullet {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 16px;
    background: rgba(12, 14, 20, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.auth-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.auth-switch {
    margin-bottom: 8px;
}

.auth-switch {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 6px;
    border-radius: 999px;
    background: rgba(12, 14, 20, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

    .auth-switch::after {
        content: "";
        position: absolute;
        top: 6px;
        bottom: 6px;
        inset-inline-start: 6px;
        width: calc(50% - 6px);
        border-radius: 999px;
        background: linear-gradient(120deg, rgba(34, 211, 238, 0.8), rgba(168, 85, 247, 0.8));
        box-shadow: 0 0 20px rgba(34, 211, 238, 0.4);
        transition: transform 0.4s ease;
        z-index: 0;
    }

    .auth-switch.is-signup::after {
        transform: translateX(-100%);
    }

.auth-switch-btn {
    position: relative;
    z-index: 1;
    border: none;
    background: transparent;
    color: #e2e8f0;
    font-weight: 600;
    padding: 12px 16px;
    cursor: pointer;
    transition: color 0.3s ease;
}

    .auth-switch-btn.is-active {
        color: #050505;
    }

.auth-stack {
    position: relative;
    min-height: 540px;
    margin-top: 8px;
    --auth-back-x: -22px;
    --auth-back-y: -20px;
    --auth-back-rot: -2.8deg;
    --auth-sep-x: 68px;
    --auth-sep-y: 6px;
}

.auth-card {
    position: absolute;
    inset: 0;
    padding: 32px;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(9, 11, 18, 0.95));
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 40px rgba(34, 211, 238, 0.08);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    transform-origin: top left;
    transition: transform 0.9s cubic-bezier(0.22, 0.7, 0.2, 1), filter 0.9s ease, box-shadow 0.9s ease;
    will-change: transform;
    pointer-events: none;
}

.auth-stack.is-animating .auth-card {
    transition: none;
}

.auth-card::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 26px;
    padding: 1px;
    background: linear-gradient(120deg, rgba(34, 211, 238, 0.6), rgba(168, 85, 247, 0.6), transparent 60%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.7;
}


.auth-card.is-active {
    pointer-events: auto;
}

.auth-card-login {
    transform: translate(0, 0) rotate(0deg) scale(1);
    z-index: 2;
}

.auth-card-signup {
    transform: translate(var(--auth-back-x), var(--auth-back-y)) rotate(var(--auth-back-rot)) scale(0.98);
    z-index: 1;
    filter: blur(0.4px);
}

.auth-stack.is-signup .auth-card-login {
    transform: translate(var(--auth-back-x), var(--auth-back-y)) rotate(var(--auth-back-rot)) scale(0.98);
    z-index: 1;
    filter: blur(0.4px);
}

.auth-stack.is-signup .auth-card-signup {
    transform: translate(0, 0) rotate(0deg) scale(1);
    z-index: 2;
    filter: none;
}

.auth-stack.is-animating[data-anim="to-signup"] .auth-card-signup {
    animation: authCardEnter 1.05s cubic-bezier(0.22, 0.7, 0.2, 1);
    animation-fill-mode: both;
    z-index: 3;
    filter: none;
}

.auth-stack.is-animating[data-anim="to-signup"] .auth-card-login {
    animation: authCardExit 1.05s cubic-bezier(0.22, 0.7, 0.2, 1);
    animation-fill-mode: both;
    z-index: 2;
    filter: blur(0.4px);
}

.auth-stack.is-animating[data-anim="to-login"] .auth-card-login {
    animation: authCardEnter 1.05s cubic-bezier(0.22, 0.7, 0.2, 1);
    animation-fill-mode: both;
    z-index: 3;
    filter: none;
}

.auth-stack.is-animating[data-anim="to-login"] .auth-card-signup {
    animation: authCardExit 1.05s cubic-bezier(0.22, 0.7, 0.2, 1);
    animation-fill-mode: both;
    z-index: 2;
    filter: blur(0.4px);
}

@keyframes authCardEnter {
    0% {
        transform: translate(var(--auth-back-x), var(--auth-back-y)) rotate(var(--auth-back-rot)) scale(0.98);
    }

    42% {
        transform: translate(var(--auth-sep-x), var(--auth-sep-y)) rotate(1.6deg) scale(0.99);
    }

    100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
}

@keyframes authCardExit {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    42% {
        transform: translate(calc(var(--auth-sep-x) * -1), var(--auth-sep-y)) rotate(-1.8deg) scale(0.99);
    }

    100% {
        transform: translate(var(--auth-back-x), var(--auth-back-y)) rotate(var(--auth-back-rot)) scale(0.98);
    }
}


.auth-card h2 {
    margin: 0;
    font-size: 24px;
    color: #f8fafc;
}

.auth-card p {
    margin: 0;
    color: #94a3b8;
    font-size: 14px;
}

.auth-form {
    display: grid;
    gap: 14px;
}

.auth-field {
    display: grid;
    gap: 8px;
    font-size: 13px;
    color: #cbd5f5;
}

    .auth-field input {
        height: 46px;
        padding: 0 14px;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(8, 10, 16, 0.8);
        color: #e2e8f0;
        font-family: inherit;
        outline: none;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

        .auth-field input:focus {
            border-color: rgba(34, 211, 238, 0.6);
            box-shadow: 0 0 16px rgba(34, 211, 238, 0.25);
        }

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    color: #94a3b8;
}

    .auth-row a {
        color: #7dd3fc;
        text-decoration: none;
        font-weight: 600;
        letter-spacing: 0.02em;
        position: relative;
        padding-bottom: 4px;
        transition: color 0.3s ease, text-shadow 0.3s ease;
        text-shadow: 0 0 8px rgba(34, 211, 238, 0.2);
    }

        .auth-row a:hover {
            color: #e0f2fe;
            text-shadow: 0 0 12px rgba(56, 189, 248, 0.45);
        }

        .auth-row a:focus-visible {
            outline: 2px solid rgba(125, 211, 252, 0.45);
            outline-offset: 2px;
        }

        .auth-row a::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 2px;
            border-radius: 999px;
            background: linear-gradient(90deg, rgba(125, 211, 252, 0.0), rgba(125, 211, 252, 0.8), rgba(168, 85, 247, 0.6));
            transform-origin: left;
            transform: scaleX(0);
            transition: transform 0.35s ease;
        }

        .auth-row a:hover::after {
            transform: scaleX(1);
        }

        .auth-row a::before {
            content: "";
            position: absolute;
            inset: 0 0 -2px 0;
            border-bottom: 1px dashed rgba(255, 255, 255, 0.18);
            opacity: 0.45;
            transition: opacity 0.3s ease;
        }

        .auth-row a:hover::before {
            opacity: 0.85;
        }

    .auth-row label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

.auth-submit {
    height: 48px;
    border-radius: 16px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    color: #050505;
    background: linear-gradient(120deg, #22d3ee, #a855f7);
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.35);
    font-family: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .auth-submit:hover {
        transform: translateY(-1px);
        box-shadow: 0 0 30px rgba(168, 85, 247, 0.5);
    }

.auth-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    color: #94a3b8;
}

    .auth-footer a {
        color: #22d3ee;
        text-decoration: none;
    }

.auth-divider {
    height: 1px;
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
    margin: 6px 0 0;
}

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

    .auth-social button {
        height: 40px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(15, 18, 26, 0.8);
        color: #e2e8f0;
        cursor: pointer;
        font-family: inherit;
    }

@media (max-width: 980px) {
    .auth-shell {
        grid-template-columns: 1fr;
    }

    .auth-intro {
        text-align: center;
        align-items: center;
    }

    .auth-lead {
        max-width: 520px;
    }
}

@media (max-width: 640px) {
    .auth-stack {
        min-height: 560px;
    }

    .auth-card {
        padding: 24px;
    }
}

body {
    background-color: var(--bg-dark);
    font-family: 'Vazirmatn', sans-serif;
    color: #e2e8f0;
    overflow-x: hidden;
    /* از Tailwind می‌آمد؛ حالا اینجاست تا سایت به CDN بیرونی وابسته نباشد */
    min-height: 100vh;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: #06b6d4;
    color: #ffffff;
}

    body.no-scroll {
        overflow: hidden;
    }

html {
    scrollbar-color: rgba(34, 211, 238, 0.35) var(--bg-dark);
    scrollbar-width: thin;
    overflow-x: hidden;
}

body::-webkit-scrollbar {
    width: 10px;
}

body::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(34, 211, 238, 0.2), rgba(168, 85, 247, 0.2));
    border-radius: 0;
    border: 1px solid rgba(5, 6, 10, 0.9);
}

body:hover::-webkit-scrollbar-thumb,
body:active::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(34, 211, 238, 0.6), rgba(168, 85, 247, 0.6));
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.35);
}

body::-webkit-scrollbar-button,
body::-webkit-scrollbar-button:vertical:increment,
body::-webkit-scrollbar-button:vertical:decrement {
    width: 0;
    height: 0;
    display: none;
    background: transparent;
}

body::-webkit-scrollbar-corner {
    background: var(--bg-dark);
}

.font-tech {
    font-family: 'Chakra Petch', sans-serif;
}

/* --- نوار ناوبری آینده‌نگر --- */
.neo-nav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 70;
    background: linear-gradient(120deg, rgba(6, 182, 212, 0.08), rgba(168, 85, 247, 0.08));
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
    overflow: visible;
}

    .neo-nav::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 15% 50%, rgba(6, 182, 212, 0.35), transparent 55%), radial-gradient(circle at 85% 50%, rgba(168, 85, 247, 0.35), transparent 55%);
        opacity: 0.4;
        pointer-events: none;
    }

    .neo-nav::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.14), transparent 60%);
        transform: translateX(-140%);
        animation: navSweep 5.5s ease-in-out infinite;
        pointer-events: none;
        opacity: 0.7;
        z-index: 0;
    }

.neo-nav-inner {
    position: relative;
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 16px var(--content-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    z-index: 1;
}

.neo-left {
    display: flex;
    align-items: center;
    gap: 18px;
}

.neo-logo {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: #f8fafc;
    text-decoration: none;
    text-transform: uppercase;
}

    .neo-logo span {
        font-size: 24px;
        background: linear-gradient(120deg, #06b6d4, #a855f7);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .neo-logo em {
        font-style: normal;
        font-size: 12px;
        color: #94a3b8;
        text-transform: lowercase;
    }

.neo-links {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 15, 15, 0.35);
}

.neo-link {
    position: relative;
    font-size: 14px;
    color: #cbd5f5;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

    .neo-link::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: -8px;
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, #06b6d4, #a855f7);
        box-shadow: 0 0 12px rgba(6, 182, 212, 0.6);
        transition: width 0.35s ease;
    }

    .neo-link:hover,
    .neo-link.is-active {
        color: #ffffff;
    }

        .neo-link:hover::after,
        .neo-link.is-active::after {
            width: 100%;
        }

.neo-link-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    padding: 6px 0;
}

.neo-chevron {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.neo-dropdown {
    position: relative;
}

    .neo-dropdown:hover .neo-chevron {
        transform: rotate(180deg);
    }

.neo-dropdown-menu {
    position: absolute;
    top: calc(100% + 16px);
    right: 0;
    width: max-content;
    min-width: 520px;
    padding: 28px;
    display: grid;
    grid-template-columns: repeat(4, minmax(200px, 1fr));
    grid-auto-flow: row;
    gap: 26px;
    background: rgba(12, 14, 20, 0.96);
    border: none;
    border-radius: 26px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.65);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.35s ease;
    overflow: hidden auto;
    direction: rtl;
    max-height: min(70vh, 520px);
    z-index: 80;
}

.neo-dropdown:hover .neo-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    animation: neonGlow 3.5s linear infinite;
}

.neo-menu-title {
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.3s ease, text-shadow 0.3s ease;
}

    .neo-menu-title.cyan {
        color: #22d3ee;
    }

    .neo-menu-title.purple {
        color: #c084fc;
    }

    .neo-menu-title.orange {
        color: #e46c07;
    }

    .neo-menu-title.yellow {
        color: #dba908;
    }

.neo-menu-item {
    display: block;
    font-size: 15px;
    color: #e2e8f0;
    text-decoration: none;
    padding: 9px 0;
    transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
}

    .neo-menu-item:hover {
        color: #ffffff;
        transform: translateX(-8px) scale(1.02);
        text-shadow: 0 0 12px rgba(34, 211, 238, 0.55);
    }

.neo-menu-title:hover {
    transform: translateX(-6px) scale(1.02);
    text-shadow: 0 0 16px rgba(34, 211, 238, 0.7);
}

.neo-dropdown-menu::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 24px;
    padding: 2px;
    background: linear-gradient(120deg, rgba(34, 211, 238, 0.85), rgba(168, 85, 247, 0.85), rgba(251, 146, 60, 0.85));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0.85;
    pointer-events: none;
    display: none;
}

@keyframes neonGlow {

    0%, 100% {
        box-shadow: 0 25px 55px rgba(0, 0, 0, 0.55), 0 0 18px rgba(34, 211, 238, 0.25);
    }

    50% {
        box-shadow: 0 25px 55px rgba(0, 0, 0, 0.55), 0 0 28px rgba(168, 85, 247, 0.35);
    }
}

@keyframes navSweep {
    0% {
        transform: translateX(-140%);
    }

    55% {
        transform: translateX(140%);
    }

    100% {
        transform: translateX(140%);
    }
}

.neo-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.neo-center {
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.neo-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(20, 24, 36, 0.8);
    width: 100%;
    max-width: 520px;
    transition: max-width 0.4s ease, box-shadow 0.4s ease;
    overflow: hidden;
    position: relative;
}

    .neo-search input {
        width: 100%;
        opacity: 1;
        border: none;
        background: transparent;
        color: #e2e8f0;
        font-size: 12px;
        outline: none;
        transition: width 0.4s ease, opacity 0.4s ease;
    }

    .neo-search.is-open {
        box-shadow: 0 0 22px rgba(251, 146, 60, 0.55), 0 0 36px rgba(139, 92, 246, 0.45), 0 0 0 1px rgba(251, 146, 60, 0.9);
        overflow: visible;
    }

        .neo-search.is-open::after {
            content: "";
            position: absolute;
            inset: -4px;
            border-radius: 999px;
            padding: 2px;
            box-sizing: border-box;
            background: linear-gradient(90deg, #fb923c, #f59e0b, #f43f5e, #8b5cf6, #22d3ee, #a855f7, #fb923c);
            background-size: 800% 100%;
            -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
            filter: drop-shadow(0 0 26px rgba(251, 146, 60, 0.9)) drop-shadow(0 0 40px rgba(139, 92, 246, 0.8));
            animation: neonShift 4.5s linear infinite;
            pointer-events: none;
        }

@keyframes neonShift {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

.neo-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #cbd5f5;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .neo-icon-btn svg {
        width: 18px;
        height: 18px;
    }

    .neo-icon-btn:hover {
        color: #ffffff;
        border-color: rgba(6, 182, 212, 0.6);
        box-shadow: 0 0 16px rgba(6, 182, 212, 0.4);
    }

.neo-cart {
    position: relative;
}

.neo-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: linear-gradient(120deg, #06b6d4, #a855f7);
    color: #0b0b0e;
    font-family: 'Chakra Petch', sans-serif;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.6);
}

.neo-profile {
    position: relative;
}

.neo-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(168, 85, 247, 0.5);
    padding: 2px;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .neo-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

    .neo-avatar:hover {
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 0 16px rgba(168, 85, 247, 0.5);
    }

.neo-profile-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 14px);
    width: 190px;
    background: rgba(9, 9, 12, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 10px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

    .neo-profile-menu.show-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

.neo-profile-head {
    padding: 8px 6px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 6px;
}

    .neo-profile-head p {
        font-size: 11px;
        color: #94a3b8;
    }

    .neo-profile-head strong {
        font-size: 13px;
        color: #f8fafc;
    }

.neo-profile-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 6px;
    font-size: 13px;
    text-decoration: none;
    color: #cbd5f5;
    border-radius: 10px;
    transition: background 0.3s ease, color 0.3s ease;
}

    .neo-profile-item:hover {
        background: rgba(6, 182, 212, 0.12);
        color: #22d3ee;
    }

    .neo-profile-item.danger:hover {
        background: rgba(239, 68, 68, 0.12);
        color: #f87171;
    }

.neo-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
}

.neo-scanline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.9), rgba(168, 85, 247, 0.9), transparent);
    animation: scanline 4s linear infinite;
    opacity: 0.7;
}

.neo-burger {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

    .neo-burger span {
        width: 18px;
        height: 2px;
        background: #cbd5f5;
        transition: transform 0.3s ease;
    }

.neo-mobile {
    position: fixed;
    inset: 0;
    background: rgba(5, 6, 10, 0.92);
    z-index: 120;
    display: flex;
    min-height: 100vh;
    height: 100vh;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

    .neo-mobile.mobile-menu-active {
        opacity: 1;
        pointer-events: auto;
    }

.neo-mobile-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(360px, 90vw);
    height: 100vh;
    min-height: 100vh;
    background: #111827 !important;
    opacity: 1;
    z-index: 1;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: -30px 0 70px rgba(0, 0, 0, 0.7);
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    transform: translateX(100%);
    transition: transform 0.45s ease;
    overflow: hidden;
}

.neo-mobile.mobile-menu-active .neo-mobile-panel {
    transform: translateX(0);
}

.neo-close {
    align-self: flex-end;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: #e2e8f0;
    display: grid;
    place-items: center;
    cursor: pointer;
}

    .neo-close svg {
        width: 18px;
        height: 18px;
    }

.neo-mobile-top {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.neo-mobile-title {
    font-family: 'Chakra Petch', sans-serif;
    font-size: 22px;
    color: #ffffff;
}

.neo-mobile-sub {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 4px;
}

.neo-mobile-link {
    color: #e2e8f0;
    text-decoration: none;
    font-size: 16px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .neo-mobile-link:hover {
        color: #22d3ee;
        border-color: rgba(6, 182, 212, 0.6);
        box-shadow: 0 0 16px rgba(6, 182, 212, 0.25);
    }

.neo-mobile-submenu {
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, rgba(10, 14, 24, 0.98), rgba(8, 10, 18, 0.98));
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    padding: 20px;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 14px;
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s ease, opacity 0.35s ease;
    box-shadow: inset 0 0 40px rgba(34, 211, 238, 0.08);
}

    .neo-mobile-submenu.is-open {
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
        animation: neonGlow 3.5s linear infinite;
    }

    .neo-mobile-submenu::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 18px;
        padding: 2px;
        background: linear-gradient(120deg, rgba(34, 211, 238, 0.7), rgba(168, 85, 247, 0.7), rgba(251, 146, 60, 0.7));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
        opacity: 0.8;
        pointer-events: none;
    }

.neo-mobile-submenu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    font-size: 14px;
}

.neo-mobile-back {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5f5;
    border-radius: 10px;
    padding: 6px 10px;
    cursor: pointer;
}

.neo-mobile-submenu-body {
    overflow-y: auto;
    padding-right: 4px;
    padding-bottom: 16px;
    display: grid;
    gap: 8px;
    direction: ltr;
    scrollbar-width: thin;
    scrollbar-color: rgba(34, 211, 238, 0.45) rgba(10, 12, 20, 0.98);
    cursor: grab;
    touch-action: pan-y;
    max-height: calc(100vh - 140px);
}

    .neo-mobile-submenu-body.is-dragging {
        cursor: grabbing;
    }

    .neo-mobile-submenu-body > * {
        direction: rtl;
    }

    .neo-mobile-submenu-body::-webkit-scrollbar {
        width: 8px;
    }

    .neo-mobile-submenu-body::-webkit-scrollbar-track {
        background: rgba(10, 12, 20, 0.98);
        border-radius: 0;
    }

    .neo-mobile-submenu-body::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, rgba(34, 211, 238, 0.45), rgba(168, 85, 247, 0.45));
        border-radius: 0;
        border: 1px solid rgba(5, 6, 10, 0.9);
        box-shadow: 0 0 8px rgba(34, 211, 238, 0.35);
    }

    .neo-mobile-submenu-body::-webkit-scrollbar-button,
    .neo-mobile-submenu-body::-webkit-scrollbar-button:vertical:increment,
    .neo-mobile-submenu-body::-webkit-scrollbar-button:vertical:decrement {
        width: 0;
        height: 0;
        display: none;
        background: transparent;
    }

.neo-submenu-title {
    font-size: 18px;
    color: #e2e8f0;
    text-decoration: none;
    padding: 12px 12px 10px;
    border-radius: 12px;
    background: linear-gradient(120deg, rgba(34, 211, 238, 0.14), rgba(168, 85, 247, 0.14));
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.neo-submenu-item {
    color: #d1d5db;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

    .neo-submenu-item:hover,
    .neo-submenu-title:hover {
        color: #ffffff;
        transform: translateX(-6px) scale(1.02);
        box-shadow: 0 0 18px rgba(34, 211, 238, 0.45), 0 0 26px rgba(168, 85, 247, 0.35);
        border-color: rgba(34, 211, 238, 0.6);
    }

.neo-submenu-title::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(120deg, #22d3ee, #a855f7);
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.7);
    animation: pulseDot 1.8s ease-in-out infinite;
}

@keyframes pulseDot {

    0%, 100% {
        transform: scale(1);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.3);
        opacity: 1;
    }
}

.neo-mobile-caret {
    transition: transform 0.3s ease;
    font-size: 14px;
}

.neo-mobile-accordion.is-open .neo-mobile-caret {
    transform: rotate(180deg);
}

.neo-mobile-cta {
    margin-top: auto;
    padding: 12px 16px;
    border-radius: 14px;
    border: none;
    color: #0b0b0e;
    font-weight: 700;
    background: linear-gradient(120deg, #06b6d4, #a855f7);
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(6, 182, 212, 0.3);
}

@keyframes scanline {
    0% {
        transform: translateX(-40%);
    }

    100% {
        transform: translateX(40%);
    }
}

@media (max-width: 900px) {
    .neo-links {
        display: none;
    }

    .neo-burger {
        display: flex;
    }
}

@media (max-width: 640px) {
    .neo-nav-inner {
        padding: 12px 16px;
        flex-wrap: nowrap;
        row-gap: 0;
    }

    .neo-actions {
        gap: 8px;
        order: 3;
    }

    .neo-left {
        order: 1;
    }

    .neo-center {
        display: flex;
        order: 2;
        width: auto;
        justify-content: center;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .neo-search {
        max-width: none;
        width: 40px;
        height: 40px;
        padding: 0;
        justify-content: center;
        background: rgba(20, 24, 36, 0.8);
    }

        .neo-search input {
            position: absolute;
            top: calc(100% + 12px);
            left: 50%;
            transform: translateX(-50%);
            width: min(92vw, 360px);
            padding: 12px 14px;
            border-radius: 18px;
            background: rgba(10, 12, 20, 0.92);
            border: 1px solid rgba(255, 255, 255, 0.12);
            box-shadow: 0 18px 38px rgba(0, 0, 0, 0.45);
            opacity: 0;
            pointer-events: none;
            z-index: 80;
        }

        .neo-search.is-open input {
            opacity: 1;
            pointer-events: auto;
        }

    .neo-icon-btn {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 640px) {
    [data-theme="light"] .neo-search input {
        background: #ffffff;
        border-color: rgba(15, 23, 42, 0.12);
        box-shadow: 0 18px 38px rgba(15, 23, 42, 0.18);
        color: #0f172a;
    }
}

/* --- افکت‌های شیشه‌ای و نئون --- */
.glass {
    background: rgba(10, 10, 10, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
}

.glass-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    transition: all 0.4s ease;
}

/* --- مگامنو مدرن --- */
.mega-menu {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: translateY(15px);
    opacity: 0;
    visibility: hidden;
}

.group:hover .mega-menu {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

/* --- سرچ بار متحرک --- */
#search-wrapper {
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
    width: 0;
    opacity: 0;
}

.search-active #search-wrapper {
    width: 220px;
    opacity: 1;
}

/* --- وضعیت باز شدن پروفایل و منوی موبایل --- */
#profile-dropdown.show-dropdown {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}


/* --- انیمیشن‌ها --- */
@keyframes floating {

    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(1deg);
    }
}

.animate-float {
    animation: floating 6s ease-in-out infinite;
}

.text-gradient-anim {
    background: linear-gradient(90deg, var(--primary), #ffffff, var(--secondary), var(--primary));
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShine 5s linear infinite;
}

@keyframes textShine {
    to {
        background-position: 200% center;
    }
}

.hover-glow:hover {
    border-color: rgba(6, 182, 212, 0.5);
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.2);
    transform: translateY(-5px);
}

.btn-neon {
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    position: relative;
    transition: 0.3s;
    z-index: 1;
}

    .btn-neon:hover {
        box-shadow: 0 0 25px rgba(6, 182, 212, 0.5);
        transform: scale(1.03);
    }

/* Ambient Lights */
.ambient-light {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.3;
    z-index: -1;
}

.light-blue {
    background: var(--primary);
    width: 400px;
    height: 400px;
    top: -100px;
    right: -100px;
}

.light-purple {
    background: var(--secondary);
    width: 500px;
    height: 500px;
    bottom: 0;
    left: -100px;
}

/* --- صفحه اصلی فروشگاهی --- */
.page {
    padding-top: 88px;
}

.container {
    width: 100% !important;
    max-width: var(--content-max) !important;
    margin: 0 auto;
    padding: 0 var(--content-gutter) !important;
}

.full-bleed {
    width: 100%;
}

.section {
    padding: 80px 0;
}

.section-dark {
    background: rgba(7, 8, 12, 0.8);
}

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 36px;
}

.section-dark .section-head {
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(34, 211, 238, 0.35);
    box-shadow: 0 1px 0 rgba(168, 85, 247, 0.25);
}

.section-head h2 {
    font-size: 28px;
    color: #f8fafc;
}

.section-head p {
    color: #94a3b8;
    max-width: 420px;
}

.section-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.section-dark .section-actions {
    flex-wrap: nowrap;
    white-space: nowrap;
}

.pill {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: #cbd5f5;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .pill.active,
    .pill:hover {
        border-color: rgba(6, 182, 212, 0.6);
        color: #ffffff;
        box-shadow: 0 0 14px rgba(6, 182, 212, 0.35);
    }

/* --- Products page layout --- */
.products-page {
    position: relative;
}

.products-layout {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
}

.filters-mobile-trigger {
    display: none;
    width: 100%;
}

.filters-toggle-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(12, 14, 22, 0.7);
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

    .filters-toggle-btn svg {
        width: 18px;
        height: 18px;
    }

    .filters-toggle-btn.is-open {
        border-color: rgba(34, 211, 238, 0.6);
        box-shadow: 0 0 18px rgba(34, 211, 238, 0.25);
    }

.filters-panel {
    width: min(320px, 100%);
    flex: 0 0 320px;
    position: sticky;
    top: 110px;
    animation: panelIn 0.6s ease;
}

.filter-card {
    background: rgba(12, 14, 22, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 20px;
    display: grid;
    gap: 18px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}

    .filter-card::before {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: 24px;
        padding: 1px;
        background: linear-gradient(135deg, rgba(34, 211, 238, 0.35), rgba(168, 85, 247, 0.35), rgba(251, 146, 60, 0.25));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
        opacity: 0.8;
        pointer-events: none;
    }

.filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

    .filter-head h3 {
        font-size: 18px;
        color: #f8fafc;
    }

.filter-clear {
    border: none;
    background: linear-gradient(120deg, #f43f5e, #fb7185);
    color: #fff1f2;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .filter-clear:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 26px rgba(244, 63, 94, 0.35);
    }

    .filter-clear::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.4), transparent 60%);
        transform: translateX(-120%);
        animation: ctaSweep 2.8s ease-in-out infinite;
    }

.filter-group h4 {
    font-size: 14px;
    color: #e2e8f0;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .filter-group h4::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #22d3ee;
        box-shadow: 0 0 10px rgba(34, 211, 238, 0.6);
    }

.filter-cat {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
}

.filter-cat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.filter-main {
    flex: 1;
}

.filter-toggle {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #cbd5f5;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

    .filter-toggle svg {
        width: 16px;
        height: 16px;
        transition: transform 0.3s ease;
    }

    .filter-toggle.is-open svg {
        transform: rotate(180deg);
    }

    .filter-toggle:hover {
        color: #ffffff;
        border-color: rgba(34, 211, 238, 0.5);
    }

.filter-sublist {
    display: grid;
    gap: 6px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-4px);
    transition: max-height 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}

    .filter-sublist.is-open {
        max-height: 260px;
        opacity: 1;
        transform: translateY(0);
    }

.filter-sub {
    margin-right: 12px;
}

.filter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #cbd5f5;
    margin-bottom: 8px;
    cursor: pointer;
    transition: color 0.3s ease;
    padding: 6px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

    .filter-option input {
        accent-color: #22d3ee;
        width: 14px;
        height: 14px;
    }

    .filter-option:hover {
        color: #ffffff;
        border-color: rgba(34, 211, 238, 0.4);
        box-shadow: 0 0 14px rgba(34, 211, 238, 0.2);
    }

.rating-stars {
    color: #fbbf24;
    font-size: 13px;
    letter-spacing: 1px;
}

.rating-text {
    color: inherit;
}

.price-summary {
    color: #cbd5f5;
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.range-slider {
    position: relative;
    height: 18px;
    margin: 10px 0 6px;
}

.range-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 6px;
    border-radius: 999px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.35);
}

.range-fill {
    position: absolute;
    top: 50%;
    height: 6px;
    border-radius: 999px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, #22d3ee, #a855f7);
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.35);
    left: 0;
    right: 0;
}


.range-slider input[type="range"] {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    width: 100%;
    height: 6px;
    transform: translateY(-50%);
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

    .range-slider input[type="range"][data-range="min"] {
        z-index: 2;
    }

    .range-slider input[type="range"][data-range="max"] {
        z-index: 3;
    }

    .range-slider input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #22d3ee;
        box-shadow: 0 0 12px rgba(34, 211, 238, 0.6);
        cursor: pointer;
        pointer-events: auto;
        border: none;
    }

    .range-slider input[type="range"]::-moz-range-thumb {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #22d3ee;
        box-shadow: 0 0 12px rgba(34, 211, 238, 0.6);
        border: none;
        cursor: pointer;
        pointer-events: auto;
    }

.price-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.price-field {
    display: grid;
    gap: 6px;
    font-size: 11px;
    color: #94a3b8;
    width: 100%;
}

    .price-field input {
        width: 100%;
        padding: 10px 12px;
        border-radius: 14px;
        border: 1px solid rgba(34, 211, 238, 0.35);
        background: rgba(12, 14, 22, 0.8);
        color: #e2e8f0;
        font-size: 12px;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

        .price-field input:focus {
            border-color: rgba(34, 211, 238, 0.8);
            box-shadow: 0 0 16px rgba(34, 211, 238, 0.35);
            outline: none;
        }

.price-sep {
    color: #94a3b8;
    font-size: 12px;
    padding-top: 18px;
}

.price-inputs span {
    color: #94a3b8;
    font-size: 12px;
}



.products-content {
    flex: 1;
    display: grid;
    gap: 18px;
}

.products-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: nowrap;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(12, 14, 22, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    animation: fadeUp 0.6s ease;
    position: relative;
    overflow: hidden;
}

    .products-toolbar::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, transparent 30%, rgba(34, 211, 238, 0.1), transparent 60%);
        transform: translateX(-120%);
        animation: toolbarSweep 4.2s ease-in-out infinite;
        pointer-events: none;
    }

.toolbar-right,
.toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

.toolbar-right {
    flex: 1;
    min-width: 0;
}

.result-count {
    color: #f8fafc;
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 0 16px rgba(34, 211, 238, 0.18);
}

.sort-label {
    font-size: 13px;
    color: #94a3b8;
    letter-spacing: 0.3px;
}

.quick-filters {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.quick-chip {
    border-radius: 999px;
    padding: 7px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #e2e8f0;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

    .quick-chip::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.2), transparent 60%);
        transform: translateX(-120%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .quick-chip.is-active,
    .quick-chip:hover {
        color: #ffffff;
        border-color: rgba(34, 211, 238, 0.6);
        box-shadow: 0 0 18px rgba(34, 211, 238, 0.35);
        transform: translateY(-1px);
    }

        .quick-chip:hover::after,
        .quick-chip.is-active::after {
            opacity: 1;
            animation: ctaSweep 2.8s ease-in-out infinite;
        }

.chip-icon {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #22d3ee;
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.7);
    flex: 0 0 auto;
}

.sort-control {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #cbd5f5;
    font-size: 12px;
}

    .sort-control select {
        padding: 8px 10px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(12, 14, 22, 0.7);
        color: #e2e8f0;
    }

.view-toggle {
    display: flex;
    gap: 6px;
}

.view-btn {
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: #cbd5f5;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .view-btn.is-active,
    .view-btn:hover {
        color: #ffffff;
        border-color: rgba(34, 211, 238, 0.5);
    }

@keyframes panelIn {
    0% {
        opacity: 0;
        transform: translateY(16px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toolbarSweep {
    0% {
        transform: translateX(-120%);
    }

    60% {
        transform: translateX(120%);
    }

    100% {
        transform: translateX(120%);
    }
}

.hero {
    position: relative;
    padding: 80px 0 60px;
    overflow: hidden;
}

.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.35;
    z-index: 0;
}

.hero-glow-cyan {
    width: 420px;
    height: 420px;
    background: #06b6d4;
    top: -120px;
    right: 60px;
}

.hero-glow-purple {
    width: 520px;
    height: 520px;
    background: #a855f7;
    bottom: -180px;
    left: 40px;
}

.hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    align-items: center;
}

.hero-content h1 {
    font-size: clamp(32px, 4vw, 54px);
    color: #ffffff;
    margin: 12px 0 16px;
    line-height: 1.2;
}

    .hero-content h1 span {
        color: #22d3ee;
    }

.hero-content p {
    color: #9ca3af;
    line-height: 1.8;
    margin-bottom: 24px;
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(6, 182, 212, 0.35);
    background: rgba(6, 182, 212, 0.08);
    color: #22d3ee;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22d3ee;
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.8);
    animation: pulse 1.6s infinite;
}

.hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.btn-primary,
.btn-ghost,
.btn-mini {
    border: none;
    cursor: pointer;
    font-weight: 700;
    border-radius: 14px;
    padding: 12px 20px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-primary {
    background: linear-gradient(120deg, #06b6d4, #a855f7);
    color: #0b0f1c;
    box-shadow: 0 12px 30px rgba(6, 182, 212, 0.4);
}

.btn-ghost {
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-mini {
    padding: 8px 14px;
    font-size: 12px;
    background: rgba(6, 182, 212, 0.15);
    color: #22d3ee;
}

    .btn-mini:hover,
    .btn-primary:hover {
        transform: translateY(-2px);
    }

.hero-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}

.meta-card {
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 15, 20, 0.6);
}

    .meta-card h4 {
        margin: 0 0 6px;
        font-size: 14px;
        color: #f8fafc;
    }

    .meta-card p {
        margin: 0;
        font-size: 12px;
        color: #9ca3af;
    }

.hero-slider {
    position: relative;
    border-radius: 28px;
    padding: 28px;
    background: rgba(10, 12, 20, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    min-height: 420px;
    overflow: hidden;
}

.hero-slide {
    position: absolute;
    inset: 28px;
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    transition: all 0.5s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

    .hero-slide.is-active {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

.hero-slider .hero-slide img {
    max-height: 220px;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(6, 182, 212, 0.35));
}

.hero-slide-info {
    display: grid;
    gap: 8px;
}

.tag {
    align-self: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(6, 182, 212, 0.15);
    color: #22d3ee;
    font-size: 11px;
    border: 1px solid rgba(6, 182, 212, 0.35);
}

    .tag.purple {
        background: rgba(168, 85, 247, 0.2);
        color: #d8b4fe;
        border-color: rgba(168, 85, 247, 0.4);
    }

.hero-controls {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
}

.ctrl-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    cursor: pointer;
}

.hero-dots {
    display: flex;
    gap: 6px;
}

.hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: none;
    cursor: pointer;
}

    .hero-dot.is-active {
        background: #22d3ee;
        box-shadow: 0 0 10px rgba(6, 182, 212, 0.6);
    }

.trust-strip {
    padding: 24px 0;
    background: rgba(10, 12, 18, 0.7);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* =========================================================================
   نوار اعلان بالای صفحه
   -------------------------------------------------------------------------
   رنگ هر نوار از یک کلاس تم می‌آید که فقط سه متغیر را عوض می‌کند، پس افزودن
   رنگ تازه یعنی چند خط، نه یک بلوک کامل.
   ========================================================================= */
.promo-bar {
    position: relative;
    --promo-a: #22d3ee;
    --promo-b: #a855f7;
    --promo-ink: #0b0f1c;
    padding: 14px 0;
    background: linear-gradient(120deg,
        color-mix(in srgb, var(--promo-a) 18%, transparent),
        color-mix(in srgb, var(--promo-b) 20%, transparent));
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

    .promo-bar.is-hidden {
        display: none;
    }

.promo-purple {
    --promo-a: #a855f7;
    --promo-b: #6366f1;
    --promo-ink: #ffffff;
}

.promo-sky {
    --promo-a: #38bdf8;
    --promo-b: #0ea5e9;
    --promo-ink: #0b0f1c;
}

.promo-emerald {
    --promo-a: #10b981;
    --promo-b: #22d3ee;
    --promo-ink: #0b0f1c;
}

.promo-amber {
    --promo-a: #f59e0b;
    --promo-b: #f97316;
    --promo-ink: #0b0f1c;
}

.promo-rose {
    --promo-a: #f43f5e;
    --promo-b: #ec4899;
    --promo-ink: #ffffff;
}

.promo-slate {
    --promo-a: #64748b;
    --promo-b: #334155;
    --promo-ink: #ffffff;
}

.promo-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.promo-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.promo-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.promo-badge {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: var(--promo-ink);
    background: linear-gradient(120deg, var(--promo-a), var(--promo-b));
    box-shadow: 0 10px 20px color-mix(in srgb, var(--promo-a) 35%, transparent);
    white-space: nowrap;
}

.promo-bar p {
    margin: 0;
    color: #e2e8f0;
    font-size: 14px;
}

.promo-timer {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #e2e8f0;
    font-size: 12px;
}

    .promo-timer[hidden] {
        display: none;
    }

.countdown-unit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .countdown-unit[hidden] {
        display: none;
    }

.countdown-digit {
    display: inline-flex;
    min-width: 34px;
    justify-content: center;
    padding: 6px 8px;
    border-radius: 10px;
    background: rgba(9, 11, 18, 0.8);
    border: 1px solid color-mix(in srgb, var(--promo-a) 30%, transparent);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* دکمه‌ی اعلان: همان رنگ تم، تا نوار یکدست بماند */
.promo-cta {
    padding: 7px 16px;
    border-radius: 999px;
    background: linear-gradient(120deg, var(--promo-a), var(--promo-b));
    color: var(--promo-ink);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .promo-cta:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px color-mix(in srgb, var(--promo-a) 35%, transparent);
    }

.promo-close {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(10, 12, 20, 0.6);
    color: #e2e8f0;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

    .promo-close:hover {
        border-color: color-mix(in srgb, var(--promo-a) 60%, transparent);
    }

/* روی گوشی، شمارنده و دکمه باید در یک ردیف جا شوند، وگرنه نوار سه ردیف می‌شود */
@media (max-width: 480px) {
    .promo-timer {
        gap: 4px;
    }

    .countdown-digit {
        min-width: 28px;
        padding: 5px 6px;
        font-size: 11px;
    }

    .countdown-unit small {
        font-size: 10px;
    }

    .promo-cta {
        padding: 6px 12px;
    }

    /* روی گوشی، ضربدر یک ردیف کامل می‌گرفت؛ گوشه‌ی نوار جای بهتری است */
    .promo-close {
        position: absolute;
        top: 10px;
        inset-inline-end: 12px;
        width: 28px;
        height: 28px;
    }
}

.mega-slider {
    padding: 26px 0 18px;
}

.mega-slider-inner {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    aspect-ratio: 16 / 6;
    height: auto;
    min-height: 0;
    touch-action: pan-y;
}

.mega-slider .hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    transition: all 0.6s ease;
    height: 100%;
    width: 100%;
}

.mega-slider-inner.is-dragging .hero-slide.is-active {
    transition: none;
}

.mega-slider-inner.drag-left .hero-slide.is-active {
    transform: translateX(-6%) scale(0.99);
    opacity: 0.7;
}

.mega-slider-inner.drag-right .hero-slide.is-active {
    transform: translateX(6%) scale(0.99);
    opacity: 0.7;
}

.mega-slider .hero-slide.is-active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.mega-slide {
    border-radius: 30px;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(10, 12, 20, 0.7);
    position: relative;
}

    .mega-slide::after {
        content: "";
        position: absolute;
        inset: 0;
        background: none;
        z-index: 1;
    }

.mega-slide-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(1.15);
    z-index: 0;
    max-height: none;
}

.mega-slide-content,
.mega-slide-media {
    position: relative;
    z-index: 1;
}

.mega-slide-content {
    display: grid;
    gap: 14px;
}

    .mega-slide-content h2 {
        font-size: clamp(28px, 4vw, 44px);
        color: #ffffff;
        line-height: 1.2;
    }

    .mega-slide-content p {
        color: #cbd5f5;
        max-width: 520px;
    }

.slide-tag {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(6, 182, 212, 0.2);
    color: #22d3ee;
    font-size: 12px;
    width: fit-content;
    border: 1px solid rgba(6, 182, 212, 0.5);
}

    .slide-tag.purple {
        background: rgba(168, 85, 247, 0.2);
        color: #d8b4fe;
        border-color: rgba(168, 85, 247, 0.5);
    }

    .slide-tag.emerald {
        background: rgba(16, 185, 129, 0.2);
        color: #6ee7b7;
        border-color: rgba(16, 185, 129, 0.45);
    }

.slide-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.slide-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    color: #94a3b8;
    font-size: 12px;
}


.mega-slider .hero-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(5, 6, 10, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.12);
    z-index: 2;
}

.mega-slider .hero-controls {
    position: absolute;
    inset: 0;
    /* قالب، این نوار را وسط‌چین کرده بود؛ اینجا تمام عرض اسلاید را می‌گیرد */
    transform: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    /* فقط خود دکمه‌ها کلیک می‌گیرند تا جلوی لینک اسلاید را نگیرند */
    pointer-events: none;
    z-index: 3;
}

    .mega-slider .hero-controls .ctrl-btn {
        width: 46px;
        height: 46px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        border: 1px solid rgba(34, 211, 238, 0.4);
        /* کمی تیره، وگرنه روی تصویر روشن دیده نمی‌شود */
        background: rgba(8, 10, 16, 0.42);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        box-shadow: 0 0 18px rgba(34, 211, 238, 0.22), inset 0 0 18px rgba(168, 85, 247, 0.14);
        color: #e2e8f0;
        cursor: pointer;
        pointer-events: auto;
        /* در حالت عادی کم‌رنگ است و با نزدیک شدن نشانگر پررنگ می‌شود */
        opacity: 0.45;
        transition: opacity 0.35s ease, transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
    }

        .mega-slider .hero-controls .ctrl-btn svg {
            width: 20px;
            height: 20px;
        }

    .mega-slider-inner:hover .hero-controls .ctrl-btn {
        opacity: 0.85;
    }

    /* روی لمسی چیزی به نام hover نیست، پس دکمه نباید منتظر آن بماند */
    @media (hover: none) {
        .mega-slider .hero-controls .ctrl-btn {
            width: 38px;
            height: 38px;
            opacity: 0.8;
        }
    }

    .mega-slider .hero-controls .ctrl-btn:hover,
    .mega-slider .hero-controls .ctrl-btn:focus-visible {
        opacity: 1;
        transform: scale(1.08);
        border-color: rgba(34, 211, 238, 0.75);
        box-shadow: 0 0 26px rgba(34, 211, 238, 0.45), inset 0 0 22px rgba(168, 85, 247, 0.22);
        outline: none;
    }

/* لایه‌ی تزئینی روی اسلاید فقط برای دیده‌شدن است و نباید جلوی کلیک را بگیرد */
.mega-slide::after {
    pointer-events: none;
}

/* لینک، تمام سطح اسلاید را می‌پوشاند و زیر دکمه‌ها و نقطه‌ها می‌ماند */
.mega-slide-link {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 1;
    -webkit-user-drag: none;
}

.mega-slide-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
    background: rgba(10, 12, 20, 0.7);
}

    .mega-slide-empty h2 {
        margin: 0;
        padding: 20px;
        text-align: center;
        font-size: 2rem;
        font-weight: 900;
        color: #e0fbc4;
        text-shadow: 0 0 10px rgba(57, 255, 20, 0.8), 0 0 30px rgba(57, 255, 20, 0.5);
    }

.section-link {
    color: #22d3ee;
    text-decoration: none;
    font-size: 13px;
}

.section-link-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: #0b0f1c;
    background: linear-gradient(120deg, #22d3ee, #a855f7, #fb923c);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 12px 28px rgba(6, 182, 212, 0.35);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    white-space: nowrap;
}

    .section-link-cta::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, rgba(255, 255, 255, 0.35), transparent 45%);
        transform: translateX(-120%);
        animation: ctaSweep 2.8s ease-in-out infinite;
    }

    .section-link-cta:hover {
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 18px 36px rgba(6, 182, 212, 0.45);
    }

@keyframes ctaSweep {
    0% {
        transform: translateX(-120%);
    }

    60% {
        transform: translateX(120%);
    }

    100% {
        transform: translateX(120%);
    }
}

.deal-row-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.deal-wrap {
    position: relative;
    padding: 28px;
    border-radius: 28px;
    border: 2px solid transparent;
    background: linear-gradient(120deg, rgba(10, 12, 20, 0.85), rgba(10, 12, 20, 0.85)) padding-box, linear-gradient(90deg, #22d3ee, #a855f7, #fb923c, #f97316, #f43f5e, #22d3ee) border-box;
    background-size: 100% 100%, 600% 100%;
    overflow: hidden;
}

    .deal-wrap::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 30px;
        padding: 2px;
        background: linear-gradient(90deg, #22d3ee, #a855f7, #fb923c, #f97316, #f43f5e, #22d3ee);
        background-size: 600% 100%;
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
        animation: neonFlow 6s ease-in-out infinite;
        pointer-events: none;
    }

    .deal-wrap::before {
        display: none;
    }

@keyframes neonFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.deal-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top, rgba(34, 211, 238, 0.08), transparent 60%);
    opacity: 0.7;
    pointer-events: none;
}

.deal-wrap {
    animation: neonFlow 6s ease-in-out infinite;
    box-shadow: 0 0 24px rgba(34, 211, 238, 0.35), 0 0 40px rgba(168, 85, 247, 0.25);
}

    .deal-wrap > * {
        position: relative;
        z-index: 1;
    }

.deal-card {
    position: relative;
    padding: 20px;
    border-radius: 20px;
    background: rgba(12, 14, 22, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: grid;
    gap: 10px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.is-clickable {
    cursor: pointer;
}

    .is-clickable:focus-visible {
        outline: 2px solid rgba(34, 211, 238, 0.8);
        outline-offset: 3px;
    }

.price-stack {
    display: grid;
    gap: 4px;
    justify-items: center;
}

.price-old {
    font-size: 12px;
    color: #94a3b8;
    text-decoration: line-through;
}

.price-new {
    font-size: 16px;
    font-weight: 700;
    color: #f8fafc;
}

.price-animated {
    animation: pricePulse 2.6s ease-in-out infinite;
}

@keyframes pricePulse {

    0%, 100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-2px) scale(1.03);
    }
}

.deal-card img {
    border-radius: 16px;
    height: 150px;
    object-fit: cover;
}

.deal-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 34px rgba(6, 182, 212, 0.25);
}

.deal-card img {
    height: 140px;
    object-fit: contain;
    margin: 0 auto;
}

.deal-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    background: rgba(6, 182, 212, 0.2);
    color: #22d3ee;
    border: 1px solid rgba(6, 182, 212, 0.4);
}

.deal-card.purple .deal-badge {
    background: rgba(168, 85, 247, 0.2);
    color: #d8b4fe;
    border-color: rgba(168, 85, 247, 0.5);
}

.deal-card.lime .deal-badge {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.5);
}

.deal-card.coral .deal-badge {
    background: rgba(251, 113, 133, 0.2);
    color: #fecdd3;
    border-color: rgba(251, 113, 133, 0.5);
}

.deal-card.amber .deal-badge {
    background: rgba(251, 191, 36, 0.2);
    color: #fde68a;
    border-color: rgba(251, 191, 36, 0.5);
}

.category-grid-main {
    grid-template-columns: repeat(3, 1fr);
}

.category-media {
    height: 140px;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

    .category-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: saturate(1.1);
    }

.category-card.accent-cyan {
    box-shadow: inset 0 0 0 1px rgba(6, 182, 212, 0.25);
}

.category-card.accent-purple {
    box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.25);
}

.category-card.accent-lime {
    box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.25);
}

.category-card.accent-amber {
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.25);
}

.category-card.accent-coral {
    box-shadow: inset 0 0 0 1px rgba(251, 113, 133, 0.25);
}

.category-card.accent-ice {
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.25);
}

.why-us {
    position: relative;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.why-card {
    padding: 24px;
    border-radius: 20px;
    background: rgba(12, 14, 22, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: grid;
    gap: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .why-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 32px rgba(6, 182, 212, 0.2);
    }

.why-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: transparent;
    display: grid;
    place-items: center;
    font-size: 30px;
    margin: 0 auto;
    transition: transform 0.4s ease;
    transform-origin: center;
}

.why-card:hover .why-icon,
.why-card:active .why-icon,
.why-card:focus-within .why-icon {
    animation: iconSpin 1.4s ease-in-out 1;
}

@keyframes iconSpin {
    0% {
        transform: rotate(0deg) scale(1);
    }

    60% {
        transform: rotate(720deg) scale(1.08);
    }

    100% {
        transform: rotate(720deg) scale(1);
    }
}

.story-strip {
    padding: 26px 0 10px;
}

.story-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(120px, 1fr);
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
}

    .story-row::-webkit-scrollbar {
        display: none;
    }

.story-item {
    display: grid;
    gap: 8px;
    justify-items: center;
    text-align: center;
    color: #cbd5f5;
    font-size: 12px;
}

    .story-item img {
        width: 74px;
        height: 74px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid rgba(6, 182, 212, 0.6);
        box-shadow: 0 0 18px rgba(6, 182, 212, 0.4);
    }

.quick-access {
    padding: 30px 0 10px;
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.quick-card {
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(12, 14, 22, 0.75);
    display: flex;
    gap: 12px;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .quick-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 30px rgba(6, 182, 212, 0.2);
    }

.quick-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(6, 182, 212, 0.2);
    display: grid;
    place-items: center;
    font-size: 20px;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    text-align: center;
}

.trust-item {
    padding: 10px;
    color: #cbd5f5;
    font-size: 13px;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.category-card {
    padding: 24px;
    border-radius: 20px;
    background: rgba(12, 14, 22, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.category-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(6, 182, 212, 0.15);
    margin-bottom: 12px;
    font-size: 18px;
}

.deal-day {
    padding-top: 40px;
}

.deal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    align-items: center;
}

.deal-highlight {
    padding: 28px;
    border-radius: 24px;
    background: linear-gradient(140deg, rgba(6, 182, 212, 0.2), rgba(10, 12, 20, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: grid;
    gap: 16px;
}

.deal-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(6, 182, 212, 0.2);
    color: #22d3ee;
    font-size: 12px;
    width: fit-content;
}

.deal-timer {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

    .deal-timer div {
        display: grid;
        place-items: center;
        min-width: 70px;
        padding: 10px 12px;
        border-radius: 14px;
        background: rgba(12, 14, 22, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .deal-timer strong {
        font-size: 18px;
        color: #f8fafc;
    }

    .deal-timer span {
        font-size: 11px;
        color: #9ca3af;
    }

.deal-product {
    padding: 26px;
    border-radius: 24px;
    background: rgba(12, 14, 22, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: grid;
    place-items: center;
    gap: 14px;
    text-align: center;
}

    .deal-product img {
        width: min(220px, 70%);
        filter: drop-shadow(0 20px 35px rgba(6, 182, 212, 0.35));
    }

.deal-progress {
    display: grid;
    gap: 8px;
    color: #cbd5f5;
    font-size: 12px;
}

    .deal-progress .bar {
        width: 100%;
        height: 8px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        overflow: hidden;
    }

        .deal-progress .bar div {
            width: 70%;
            height: 100%;
            background: linear-gradient(120deg, #22d3ee, #a855f7);
            box-shadow: 0 0 14px rgba(6, 182, 212, 0.5);
        }

.flash-scroll {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(200px, 1fr);
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

    .flash-scroll::-webkit-scrollbar {
        display: none;
    }

.flash-card {
    scroll-snap-align: start;
    padding: 18px;
    border-radius: 20px;
    background: rgba(12, 14, 22, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: grid;
    gap: 10px;
    text-align: center;
    min-height: 260px;
}

    .flash-card img {
        height: 140px;
        object-fit: contain;
        margin: 0 auto;
    }

.category-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(6, 182, 212, 0.2);
}

.category-card h3 {
    color: #f8fafc;
    margin: 0 0 8px;
}

.category-card span {
    color: #9ca3af;
    font-size: 13px;
}

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

@media (max-width: 900px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* برای گوشی‌های موبایل */
@media (max-width: 640px) {
    .product-grid {
        grid-template-columns: 1fr;
    }
}

.products-loading {
    margin-top: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 16px;
    background: linear-gradient(130deg, rgba(6, 182, 212, 0.12), rgba(12, 14, 22, 0.85), rgba(168, 85, 247, 0.16));
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
    font-size: 14px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.22), 0 0 40px rgba(168, 85, 247, 0.18);
    animation: glowPulse 2.8s ease-in-out infinite;
}

    .products-loading[aria-busy="false"] {
        opacity: 0.6;
    }

    .products-loading::before {
        content: "";
        position: absolute;
        inset: -30% -60% auto;
        height: 200%;
        background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.18), transparent 60%);
        transform: translateX(-80%);
        animation: loadingSweep 6.4s ease-in-out infinite;
        pointer-events: none;
    }

.loading-spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.22);
    border-top-color: #22d3ee;
    animation: spin 0.9s linear infinite;
    box-shadow: 0 0 14px rgba(34, 211, 238, 0.6);
}

.loading-text {
    letter-spacing: -0.01em;
    font-size: 15px;
    font-weight: 600;
    animation: loadingTextPulse 2s ease-in-out infinite;
}

.products-sentinel {
    height: 1px;
    width: 100%;
}

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

@keyframes glowPulse {

    0%, 100% {
        box-shadow: 0 0 18px rgba(6, 182, 212, 0.18), 0 0 34px rgba(168, 85, 247, 0.15);
    }

    50% {
        box-shadow: 0 0 26px rgba(6, 182, 212, 0.32), 0 0 50px rgba(168, 85, 247, 0.28);
    }
}

@keyframes loadingSweep {
    0% {
        transform: translateX(-80%);
    }

    46% {
        transform: translateX(120%);
    }

    50% {
        transform: translateX(-80%);
    }

    96% {
        transform: translateX(120%);
    }

    100% {
        transform: translateX(120%);
    }
}

@keyframes loadingTextPulse {

    0%, 100% {
        opacity: 0.85;
        text-shadow: 0 0 10px rgba(34, 211, 238, 0.45);
    }

    50% {
        opacity: 1;
        text-shadow: 0 0 12px rgba(34, 211, 238, 0.6), 0 0 18px rgba(168, 85, 247, 0.5);
    }
}

@keyframes loadingTextPulseLight {

    0%, 100% {
        opacity: 0.75;
        text-shadow: 0 0 8px rgba(14, 116, 144, 0.25);
    }

    50% {
        opacity: 1;
        text-shadow: 0 0 12px rgba(14, 116, 144, 0.35), 0 0 16px rgba(147, 51, 234, 0.28);
    }
}

.product-card {
    position: relative;
    padding: 20px;
    border-radius: 20px;
    background: rgba(12, 14, 22, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: grid;
    gap: 12px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .product-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 40px rgba(6, 182, 212, 0.2);
    }

    .product-card img {
        height: 160px;
        object-fit: contain;
        margin: 0 auto;
    }

.badge {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(6, 182, 212, 0.2);
    color: #22d3ee;
    font-size: 10px;
    border: 1px solid rgba(6, 182, 212, 0.3);
}

    /* رنگ‌هایی که پنل برای نشان محصول پیشنهاد می‌دهد؛ پایه‌ی .badge فیروزه‌ای است */
    .badge.purple {
        background: rgba(168, 85, 247, 0.2);
        color: #d8b4fe;
        border-color: rgba(168, 85, 247, 0.4);
    }

    .badge.blue {
        background: rgba(37, 99, 235, 0.2);
        color: #93c5fd;
        border-color: rgba(37, 99, 235, 0.4);
    }

    .badge.emerald {
        background: rgba(16, 185, 129, 0.2);
        color: #6ee7b7;
        border-color: rgba(16, 185, 129, 0.4);
    }

    .badge.yellow {
        background: rgba(250, 204, 21, 0.2);
        color: #fde68a;
        border-color: rgba(250, 204, 21, 0.4);
    }

    .badge.orange {
        background: rgba(249, 115, 22, 0.2);
        color: #fdba74;
        border-color: rgba(249, 115, 22, 0.4);
    }

    .badge.red {
        background: rgba(239, 68, 68, 0.2);
        color: #fca5a5;
        border-color: rgba(239, 68, 68, 0.4);
    }

    .badge.pink {
        background: rgba(236, 72, 153, 0.2);
        color: #f9a8d4;
        border-color: rgba(236, 72, 153, 0.4);
    }

    .badge.slate {
        background: rgba(71, 85, 105, 0.25);
        color: #cbd5e1;
        border-color: rgba(71, 85, 105, 0.5);
    }

/* بارگذاری بی‌نهایت: خطای دریافت */
.infinite-error {
    grid-column: 1 / -1;
    width: 100%;
    padding: 24px 0;
    text-align: center;
}

    .infinite-error span {
        display: block;
        margin-bottom: 12px;
        color: #f87171;
    }

.price {
    color: #f8fafc;
    font-weight: 700;
}

.rating {
    color: #fbbf24;
}

/* --- Product detail page --- */
.product-detail-page {
    position: relative;
}

.pd-hero {
    padding-top: 40px;
}

.pd-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 18px;
}

    .pd-breadcrumbs a {
        color: #7dd3fc;
        text-decoration: none;
        transition: color 0.3s ease;
    }

        .pd-breadcrumbs a:hover {
            color: #e0f2fe;
        }

.pd-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 32px;
    align-items: start;
}

.pd-gallery {
    display: grid;
    gap: 16px;
}

.pd-media {
    position: relative;
    padding: 24px;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(140deg, rgba(10, 14, 24, 0.95), rgba(7, 10, 18, 0.75));
    box-shadow: 0 20px 50px rgba(6, 182, 212, 0.12);
    overflow: hidden;
}

    .pd-media::after {
        content: "";
        position: absolute;
        inset: 16% 10% auto 10%;
        height: 60%;
        background: radial-gradient(circle, rgba(34, 211, 238, 0.2), transparent 70%);
        filter: blur(40px);
        opacity: 0.8;
        z-index: 0;
    }

    .pd-media img {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 380px;
        object-fit: contain;
    }

.pd-media-img {
    transition: opacity 0.35s ease, transform 0.35s ease;
    will-change: opacity, transform;
}

    .pd-media-img.is-swapping {
        opacity: 0.2;
        transform: translateY(6px) scale(0.98);
    }

.pd-badge {
    position: absolute;
    top: 18px;
    left: 18px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(6, 182, 212, 0.18);
    color: #67e8f9;
    font-size: 11px;
    border: 1px solid rgba(6, 182, 212, 0.4);
    z-index: 2;
}

.pd-thumbs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.pd-thumb {
    border-radius: 14px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(8, 12, 20, 0.7);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

    .pd-thumb img {
        width: 100%;
        height: 60px;
        object-fit: contain;
    }

    .pd-thumb.is-active,
    .pd-thumb:hover {
        border-color: rgba(34, 211, 238, 0.6);
        box-shadow: 0 0 20px rgba(34, 211, 238, 0.2);
        transform: translateY(-2px);
    }

.pd-summary {
    display: grid;
    gap: 18px;
}

.pd-kicker {
    color: #67e8f9;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pd-title {
    font-size: 32px;
    color: #f8fafc;
    margin: 0;
}

.pd-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    font-size: 13px;
    color: #94a3b8;
}

.pd-divider {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
}

.pd-stock.is-in {
    color: #22c55e;
    font-weight: 600;
}

.pd-lead {
    color: #cbd5f5;
    line-height: 1.9;
}

.pd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pd-chip {
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #cbd5f5;
    font-size: 12px;
}

.pd-buy-card {
    padding: 30px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(10, 14, 24, 0.88);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    display: grid;
    gap: 18px;
    min-height: 260px;
}

.pd-price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.pd-discount {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(244, 63, 94, 0.18);
    color: #fda4af;
    border: 1px solid rgba(244, 63, 94, 0.4);
    font-size: 12px;
}

.pd-price {
    font-size: 24px;
    font-weight: 700;
    color: #f8fafc;
}

.pd-price-old {
    color: #94a3b8;
    text-decoration: line-through;
    font-size: 13px;
}

.pd-ship {
    color: #94a3b8;
    font-size: 12px;
}

.pd-qty {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .pd-qty button {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.04);
        color: #e2e8f0;
        cursor: pointer;
        transition: transform 0.3s ease, border-color 0.3s ease;
    }

    .pd-qty span {
        min-width: 24px;
        text-align: center;
        color: #e2e8f0;
        font-weight: 600;
    }

    .pd-qty button:hover {
        transform: translateY(-1px);
        border-color: rgba(34, 211, 238, 0.5);
    }

.pd-cta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

    .pd-cta:has(:only-child) {
        grid-template-columns: 1fr;
    }

.pd-btn {
    height: 46px;
    border-radius: 14px;
    border: 1px solid transparent;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .pd-btn.primary {
        background: linear-gradient(90deg, rgba(34, 211, 238, 0.9), rgba(168, 85, 247, 0.9));
        color: #0b1120;
        box-shadow: 0 12px 28px rgba(34, 211, 238, 0.25);
    }

        .pd-btn.primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 18px 36px rgba(34, 211, 238, 0.35);
        }

    .pd-btn.ghost {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.16);
        color: #e2e8f0;
    }

        .pd-btn.ghost:hover {
            transform: translateY(-2px);
            border-color: rgba(34, 211, 238, 0.35);
        }

.pd-quick {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    font-size: 12px;
    color: #94a3b8;
}

    .pd-quick span {
        padding: 8px 10px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.04);
        text-align: center;
    }

.pd-panels {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 24px;
}

.pd-panel {
    padding: 24px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(10, 12, 20, 0.75);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    display: grid;
    gap: 16px;
}

    .pd-panel h3 {
        margin: 0;
        color: #f8fafc;
        font-size: 18px;
    }

    .pd-panel p {
        color: #cbd5f5;
        line-height: 1.9;
        margin: 0;
    }

.pd-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.pd-feature {
    padding: 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    font-size: 13px;
}

.pd-specs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

    .pd-specs li {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding-bottom: 10px;
        border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
        color: #cbd5f5;
        font-size: 13px;
    }

    .pd-specs span {
        color: #94a3b8;
    }

.pd-review-track {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 12px; /* فضای بیشتر برای نمایش اسکرول‌بار */
    /* scroll-behavior: smooth; (حذف شد تا با جاوااسکریپت تداخل نداشته باشد) */
    cursor: grab;
    touch-action: pan-y;
    /* تنظیمات اسکرول‌بار برای فایرفاکس */
    scrollbar-width: thin;
    scrollbar-color: rgba(34, 211, 238, 0.4) rgba(10, 12, 20, 0.4);
}

    .pd-review-track.is-dragging {
        cursor: grabbing;
    }

    /* استایل‌های اختصاصی اسکرول‌بار برای کروم و سافاری - تم دارک */
    .pd-review-track::-webkit-scrollbar {
        height: 6px; /* ضخامت ظریف برای اسکرول افقی */
        display: block; /* لغو دستور مخفی‌سازی قبلی */
    }

    .pd-review-track::-webkit-scrollbar-track {
        background: rgba(10, 12, 20, 0.4);
        border-radius: 10px;
    }

    .pd-review-track::-webkit-scrollbar-thumb {
        background: linear-gradient(90deg, rgba(34, 211, 238, 0.4), rgba(168, 85, 247, 0.4));
        border-radius: 10px;
    }

        .pd-review-track::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(90deg, rgba(34, 211, 238, 0.6), rgba(168, 85, 247, 0.6));
        }

html[data-theme="light"] .pd-review-track {
    scrollbar-color: rgba(14, 116, 144, 0.4) rgba(241, 245, 249, 0.8);
}

    html[data-theme="light"] .pd-review-track::-webkit-scrollbar-track {
        background: rgba(241, 245, 249, 0.8);
    }

    html[data-theme="light"] .pd-review-track::-webkit-scrollbar-thumb {
        background: linear-gradient(90deg, rgba(14, 116, 144, 0.4), rgba(147, 51, 234, 0.4));
    }


.pd-review-card {
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(12, 14, 22, 0.8);
    display: grid;
    gap: 10px;
    color: #cbd5f5;
    min-width: 260px;
    flex: 0 0 280px;
}

.pd-review-loader {
    min-width: 220px;
    flex: 0 0 220px;
    border-radius: 18px;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    background: rgba(10, 12, 20, 0.65);
    display: grid;
    align-content: center;
    gap: 10px;
    padding: 18px;
    color: #94a3b8;
    font-size: 12px;
    text-align: center;
}

html[data-theme="light"] .pd-review-loader {
    border-color: rgba(15, 23, 42, 0.18);
    background: rgba(255, 255, 255, 0.9);
    color: #64748b;
}

    html[data-theme="light"] .pd-review-loader .loader-line {
        background: linear-gradient(90deg, rgba(14, 116, 144, 0.12), rgba(168, 85, 247, 0.2), rgba(14, 116, 144, 0.12));
    }

.pd-review-loader .loader-line {
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(34, 211, 238, 0.12), rgba(168, 85, 247, 0.25), rgba(34, 211, 238, 0.12));
    background-size: 200% 100%;
    animation: pdLoaderShine 1.6s ease-in-out infinite;
}

    .pd-review-loader .loader-line.short {
        width: 60%;
        margin: 0 auto;
    }

.pd-review-sentinel {
    width: 1px;
    flex: 0 0 1px;
}

.pd-review-card strong {
    color: #f8fafc;
}

.pd-faq {
    position: relative;
}

.pd-faq-grid {
    display: grid;
    gap: 14px;
}

.pd-faq-item {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(12, 14, 22, 0.8);
    overflow: hidden;
}

.pd-faq-toggle {
    width: 100%;
    background: transparent;
    border: none;
    color: #f8fafc;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    cursor: pointer;
    transition: color 0.3s ease;
}

    .pd-faq-toggle:hover {
        color: #67e8f9;
    }

.pd-faq-icon {
    width: 26px;
    height: 26px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    display: grid;
    place-items: center;
    font-weight: 700;
    color: #67e8f9;
    transition: transform 0.3s ease, color 0.3s ease;
}

.pd-faq-body {
    max-height: 0;
    overflow: hidden;
    padding: 0 18px;
    color: #cbd5f5;
    line-height: 1.8;
    transition: max-height 0.35s ease, padding 0.35s ease;
}

.pd-faq-item.is-open .pd-faq-body {
    max-height: 140px;
    padding: 0 18px 16px;
}

.pd-faq-item.is-open .pd-faq-icon {
    transform: rotate(45deg);
    color: #f9a8d4;
}

.pd-media,
.pd-thumb,
.pd-buy-card,
.pd-panel,
.pd-review-card,
.pd-review-loader,
.pd-form,
.product-detail-page .product-card {
    position: relative;
    animation: neoGlowPulse 6s ease-in-out infinite;
}

    .pd-media::before,
    .pd-thumb::before,
    .pd-buy-card::before,
    .pd-panel::before,
    .pd-review-card::before,
    .pd-review-loader::before,
    .pd-form::before,
    .product-detail-page .product-card::before {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        border: 1px solid rgba(34, 211, 238, 0.35);
        box-shadow: 0 0 18px rgba(34, 211, 238, 0.18), 0 0 26px rgba(168, 85, 247, 0.12);
        opacity: 0.75;
        pointer-events: none;
        animation: neoGlowDrift 10s ease-in-out infinite;
    }

.pd-form {
    display: grid;
    gap: 12px;
    padding: 20px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(10, 12, 20, 0.7);
}

    .pd-form input,
    .pd-form textarea {
        padding: 12px 14px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(8, 10, 16, 0.8);
        color: #e2e8f0;
        font-family: inherit;
    }

    .pd-form textarea {
        min-height: 120px;
        resize: vertical;
    }

    .pd-form button {
        height: 44px;
        border-radius: 12px;
        border: none;
        background: linear-gradient(90deg, rgba(34, 211, 238, 0.9), rgba(168, 85, 247, 0.9));
        color: #0b1120;
        font-weight: 600;
        cursor: pointer;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

        .pd-form button:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 28px rgba(34, 211, 238, 0.25);
        }

.pd-reveal {
    animation: pdFadeUp 0.9s cubic-bezier(0.22, 0.7, 0.2, 1) both;
}

.pd-delay-1 {
    animation-delay: 0.1s;
}

.pd-delay-2 {
    animation-delay: 0.2s;
}

.pd-delay-3 {
    animation-delay: 0.3s;
}

.pd-delay-4 {
    animation-delay: 0.4s;
}

@keyframes pdFadeUp {
    0% {
        opacity: 0;
        transform: translateY(18px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pdLoaderShine {
    0% {
        background-position: 0% 50%;
        opacity: 0.5;
    }

    50% {
        background-position: 100% 50%;
        opacity: 0.9;
    }

    100% {
        background-position: 0% 50%;
        opacity: 0.5;
    }
}

@keyframes neoGlowPulse {

    0%, 100% {
        filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.12));
    }

    50% {
        filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.22));
    }
}

@keyframes neoGlowDrift {

    0%, 100% {
        opacity: 0.6;
        box-shadow: 0 0 16px rgba(34, 211, 238, 0.18), 0 0 24px rgba(168, 85, 247, 0.12);
    }

    50% {
        opacity: 0.9;
        box-shadow: 0 0 24px rgba(34, 211, 238, 0.28), 0 0 34px rgba(168, 85, 247, 0.2);
    }
}

@media (max-width: 1024px) {

    .pd-layout,
    .pd-panels {
        grid-template-columns: 1fr;
    }

    .pd-media img {
        height: 320px;
    }
}

@media (max-width: 720px) {
    .pd-thumbs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pd-cta {
        grid-template-columns: 1fr;
    }

    .pd-quick {
        grid-template-columns: 1fr;
    }
}

.promo {
    padding-top: 40px;
}

.promo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.promo-card {
    padding: 28px;
    border-radius: 22px;
    background: linear-gradient(140deg, rgba(6, 182, 212, 0.15), rgba(15, 15, 24, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.banner-wall {
    padding-top: 20px;
}

.banner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

/* --- Cart page --- */
.cart-page {
    position: relative;
}

.cart-hero {
    padding-top: 40px;
}

.cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

    .cart-header h1 {
        margin: 0;
        font-size: 32px;
        color: #f8fafc;
    }

    .cart-header p {
        color: #94a3b8;
        margin: 6px 0 0;
    }

.cart-steps {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cart-step {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #cbd5f5;
    font-size: 12px;
    transition: transform 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

    .cart-step.is-active {
        border-color: rgba(34, 211, 238, 0.55);
        color: #e0f2fe;
        box-shadow: 0 0 18px rgba(34, 211, 238, 0.25);
        transform: translateY(-1px);
    }

    .cart-step.is-complete {
        border-color: rgba(167, 243, 208, 0.5);
        color: #d1fae5;
        box-shadow: 0 0 16px rgba(16, 185, 129, 0.2);
    }

.cart-content {
    padding-top: 20px;
}

.checkout-flow {
    padding-top: 20px;
}

.checkout-panels {
    display: grid;
    gap: 28px;
}

.checkout-panel {
    display: none;
    gap: 24px;
    animation: checkoutIn 0.65s ease both;
}

    .checkout-panel.is-active {
        display: grid;
    }

.cart-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: 24px;
    align-items: start;
}

.checkout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: 24px;
    align-items: start;
}

.checkout-stack {
    display: grid;
    gap: 18px;
}

.cart-items {
    display: grid;
    gap: 16px;
}

.cart-item,
.cart-note,
.cart-summary {
    position: relative;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(10, 12, 20, 0.75);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    animation: neoGlowPulse 6s ease-in-out infinite;
}

    .cart-item::before,
    .cart-note::before,
    .cart-summary::before {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        border: 1px solid rgba(34, 211, 238, 0.35);
        box-shadow: 0 0 18px rgba(34, 211, 238, 0.18), 0 0 26px rgba(168, 85, 247, 0.12);
        opacity: 0.75;
        pointer-events: none;
        animation: neoGlowDrift 10s ease-in-out infinite;
    }

.cart-item {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) auto;
    gap: 18px;
    padding: 18px;
    align-items: center;
}

    .cart-item img {
        width: 100%;
        height: 110px;
        object-fit: contain;
    }

.cart-item-info h3 {
    margin: 0 0 8px;
    color: #f8fafc;
    font-size: 18px;
}

.cart-item-info p {
    margin: 0;
    color: #94a3b8;
    font-size: 13px;
}

.cart-item-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.cart-badge {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(34, 211, 238, 0.18);
    color: #67e8f9;
    border: 1px solid rgba(34, 211, 238, 0.35);
    font-size: 11px;
}

    .cart-badge.ghost {
        background: rgba(255, 255, 255, 0.05);
        color: #cbd5f5;
        border-color: rgba(255, 255, 255, 0.1);
    }

.cart-item-actions {
    display: grid;
    gap: 10px;
    justify-items: end;
}

.cart-qty {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .cart-qty button {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.04);
        color: #e2e8f0;
        cursor: pointer;
        transition: transform 0.3s ease, border-color 0.3s ease;
    }

    .cart-qty span {
        min-width: 24px;
        text-align: center;
        color: #e2e8f0;
        font-weight: 600;
    }

    .cart-qty button:hover {
        transform: translateY(-1px);
        border-color: rgba(34, 211, 238, 0.5);
    }

.cart-price {
    display: grid;
    gap: 4px;
    text-align: left;
}

    .cart-price strong {
        color: #f8fafc;
    }

.cart-remove {
    background: none;
    border: none;
    color: #fda4af;
    cursor: pointer;
    font-size: 12px;
}

.cart-note {
    padding: 18px;
    display: grid;
    gap: 14px;
}

    .cart-note h3 {
        margin: 0 0 6px;
        color: #f8fafc;
    }

    .cart-note p {
        margin: 0;
        color: #94a3b8;
    }

.cart-coupon {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

    .cart-coupon input {
        height: 42px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(8, 10, 16, 0.8);
        color: #e2e8f0;
        padding: 0 12px;
        font-family: inherit;
    }

    .cart-coupon button {
        height: 42px;
        border-radius: 12px;
        border: none;
        background: linear-gradient(90deg, rgba(34, 211, 238, 0.9), rgba(168, 85, 247, 0.9));
        color: #0b1120;
        font-weight: 600;
        cursor: pointer;
    }

.cart-summary {
    padding: 20px;
    display: grid;
    gap: 14px;
    position: sticky;
    top: 100px;
}

    .cart-summary h2 {
        margin: 0;
        color: #f8fafc;
    }

.cart-summary-row {
    display: flex;
    justify-content: space-between;
    color: #cbd5f5;
    font-size: 13px;
}

    .cart-summary-row strong {
        color: #f8fafc;
    }

    .cart-summary-row .discount {
        color: #fda4af;
    }

.cart-summary-total {
    padding-top: 12px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    color: #f8fafc;
    font-weight: 700;
}

.cart-checkout {
    height: 48px;
    border-radius: 14px;
    border: none;
    background: linear-gradient(90deg, rgba(34, 211, 238, 0.9), rgba(168, 85, 247, 0.9));
    color: #0b1120;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(34, 211, 238, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .cart-checkout:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 36px rgba(34, 211, 238, 0.35);
    }

.cart-guard {
    font-size: 12px;
    color: #94a3b8;
    text-align: center;
}

.cart-trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

    .cart-trust span {
        padding: 8px 10px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.04);
        color: #cbd5f5;
        text-align: center;
        font-size: 12px;
    }

.checkout-card {
    position: relative;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(10, 12, 20, 0.75);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
    padding: 20px;
    overflow: hidden;
}

    .checkout-card::before {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        border: 1px solid rgba(34, 211, 238, 0.3);
        box-shadow: 0 0 18px rgba(34, 211, 238, 0.18), 0 0 22px rgba(168, 85, 247, 0.12);
        opacity: 0.65;
        pointer-events: none;
    }

.checkout-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

    .checkout-head h2 {
        margin: 0;
        color: #f8fafc;
        font-size: 20px;
    }

    .checkout-head p {
        margin: 6px 0 0;
        color: #94a3b8;
        font-size: 13px;
    }

.checkout-pill {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(34, 211, 238, 0.12);
    color: #67e8f9;
    border: 1px solid rgba(34, 211, 238, 0.3);
    font-size: 11px;
    white-space: nowrap;
}

.neo-btn {
    height: 44px;
    padding: 0 18px;
    border-radius: 12px;
    border: 1px solid transparent;
    cursor: pointer;
    font-weight: 600;
    font-family: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

    .neo-btn.primary {
        background: linear-gradient(90deg, rgba(34, 211, 238, 0.9), rgba(168, 85, 247, 0.9));
        color: #0b1120;
        box-shadow: 0 12px 28px rgba(34, 211, 238, 0.25);
    }

        .neo-btn.primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 18px 36px rgba(34, 211, 238, 0.35);
        }

    .neo-btn.ghost {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.12);
        color: #e2e8f0;
    }

.neo-form {
    display: grid;
    gap: 14px;
}

    .neo-form label {
        display: grid;
        gap: 8px;
        color: #cbd5f5;
        font-size: 13px;
    }

    .neo-form input,
    .neo-form textarea {
        width: 100%;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(8, 10, 16, 0.8);
        color: #e2e8f0;
        padding: 10px 12px;
        font-family: inherit;
        resize: vertical;
    }

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.address-card,
.payment-card {
    position: relative;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    padding: 14px 16px;
    display: grid;
    gap: 6px;
    cursor: pointer;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

    .address-card.is-active,
    .payment-card.is-active {
        border-color: rgba(34, 211, 238, 0.5);
        box-shadow: 0 12px 26px rgba(34, 211, 238, 0.22);
        transform: translateY(-2px);
    }

    .address-card input,
    .payment-card input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

.address-title,
.payment-title {
    color: #f8fafc;
    font-weight: 600;
}

.address-body,
.payment-sub,
.address-meta {
    color: #94a3b8;
    font-size: 12px;
}

.payment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.checkout-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.checkout-recap {
    display: grid;
    gap: 8px;
    color: #cbd5f5;
    font-size: 13px;
}

    .checkout-recap strong {
        color: #f8fafc;
        font-weight: 600;
    }

.cart-upsell {
    padding-top: 10px;
}

.cart-reveal {
    animation: cartFade 0.9s cubic-bezier(0.22, 0.7, 0.2, 1) both;
}

.cart-delay-1 {
    animation-delay: 0.1s;
}

.cart-delay-2 {
    animation-delay: 0.2s;
}

.cart-delay-3 {
    animation-delay: 0.3s;
}

@keyframes cartFade {
    0% {
        opacity: 0;
        transform: translateY(18px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes checkoutIn {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.98);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 1024px) {
    .cart-grid {
        grid-template-columns: 1fr;
    }

    .cart-summary {
        position: static;
    }

    .checkout-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .cart-item {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .cart-item-actions {
        justify-items: center;
    }

    .cart-price {
        text-align: center;
    }

    .cart-coupon {
        grid-template-columns: 1fr;
    }

    .cart-trust {
        grid-template-columns: 1fr;
    }

    .checkout-actions {
        flex-direction: column;
    }

    .checkout-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --- Profile page --- */
.profile-page {
    position: relative;
}

.profile-hero {
    padding-top: 40px;
}

.profile-header {
    display: grid;
}

.profile-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    padding: 28px;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(140deg, rgba(10, 14, 24, 0.95), rgba(7, 10, 18, 0.75));
    box-shadow: 0 30px 60px rgba(6, 182, 212, 0.16);
    position: relative;
    overflow: hidden;
    animation: neoGlowPulse 7s ease-in-out infinite;
}

    .profile-card::after {
        content: "";
        position: absolute;
        inset: 12% 18% auto 18%;
        height: 70%;
        background: radial-gradient(circle, rgba(34, 211, 238, 0.18), transparent 70%);
        filter: blur(50px);
        opacity: 0.7;
        pointer-events: none;
    }

.profile-avatar {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 0 24px rgba(34, 211, 238, 0.25);
}

.profile-avatar-input {
    display: none;
}

.profile-avatar-btn {
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

    .profile-avatar-btn::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.0), rgba(15, 23, 42, 0.6));
        opacity: 0;
        transition: opacity 0.3s ease;
    }

.profile-avatar-hint {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(34, 211, 238, 0.2);
    color: #67e8f9;
    font-size: 10px;
    border: 1px solid rgba(34, 211, 238, 0.35);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.profile-avatar-btn:hover::after,
.profile-avatar-btn:hover .profile-avatar-hint {
    opacity: 1;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-status {
    position: absolute;
    bottom: -6px;
    right: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.18);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.4);
    font-size: 10px;
}

.profile-info {
    display: grid;
    gap: 10px;
    color: #cbd5f5;
    z-index: 1;
}

    .profile-info h1 {
        margin: 0;
        font-size: 28px;
        color: #f8fafc;
    }

    .profile-info p {
        margin: 0;
        color: #94a3b8;
    }

.profile-kicker {
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #67e8f9;
}

.profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

    .profile-tags span {
        padding: 6px 10px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.04);
        font-size: 12px;
        color: #cbd5f5;
    }

.profile-actions {
    display: grid;
    gap: 10px;
    align-content: start;
    z-index: 1;
}

.profile-btn {
    height: 44px;
    border-radius: 14px;
    border: 1px solid transparent;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .profile-btn.primary {
        background: linear-gradient(90deg, rgba(34, 211, 238, 0.9), rgba(168, 85, 247, 0.9));
        color: #0b1120;
        box-shadow: 0 12px 28px rgba(34, 211, 238, 0.25);
    }

        .profile-btn.primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 18px 36px rgba(34, 211, 238, 0.35);
        }

    .profile-btn.ghost {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.16);
        color: #e2e8f0;
    }

        .profile-btn.ghost:hover {
            transform: translateY(-2px);
            border-color: rgba(34, 211, 238, 0.35);
        }

    .profile-btn.mini {
        height: 38px;
        border-radius: 12px;
        background: rgba(34, 211, 238, 0.16);
        color: #67e8f9;
        border: 1px solid rgba(34, 211, 238, 0.3);
    }

.profile-content {
    padding-top: 10px;
}

.profile-edit {
    margin-top: 18px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(10, 12, 20, 0.7);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
    transition: max-height 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
}

    .profile-edit.is-open {
        max-height: 420px;
        opacity: 1;
        transform: translateY(0);
    }

.profile-edit-form {
    display: grid;
    gap: 12px;
    padding: 20px;
    color: #cbd5f5;
}

    .profile-edit-form label {
        display: grid;
        gap: 8px;
        font-size: 12px;
    }

    .profile-edit-form input,
    .profile-edit-form select {
        height: 44px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(8, 10, 16, 0.8);
        color: #e2e8f0;
        font-family: inherit;
        padding: 0 12px;
    }

.profile-edit-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 6px;
}

.profile-grid {
    display: grid;
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: 24px;
}

.profile-side {
    display: grid;
    gap: 18px;
}

.profile-menu {
    display: grid;
    gap: 10px;
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(10, 12, 20, 0.75);
}

.profile-link {
    height: 42px;
    border-radius: 14px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.04);
    color: #cbd5f5;
    cursor: pointer;
    transition: transform 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

    .profile-link.is-active,
    .profile-link:hover {
        border-color: rgba(34, 211, 238, 0.45);
        color: #e0f2fe;
        transform: translateY(-1px);
    }

.profile-wallet {
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(10, 12, 20, 0.75);
    display: grid;
    gap: 10px;
    color: #cbd5f5;
}

    .profile-wallet h3 {
        margin: 0;
        color: #f8fafc;
    }

    .profile-wallet p {
        font-size: 20px;
        margin: 0;
    }

.profile-main {
    display: grid;
    gap: 22px;
}

.profile-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.profile-metric {
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(10, 12, 20, 0.7);
    text-align: center;
    color: #cbd5f5;
}

    .profile-metric h4 {
        margin: 0;
        font-size: 24px;
        color: #f8fafc;
    }

.profile-order-list {
    display: grid;
    gap: 12px;
}

.profile-order-card {
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(10, 12, 20, 0.7);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #cbd5f5;
}

    .profile-order-card h3 {
        margin: 0 0 6px;
        color: #f8fafc;
        font-size: 16px;
    }

    .profile-order-card span {
        font-size: 12px;
        color: #94a3b8;
    }

.profile-order-meta {
    display: grid;
    gap: 6px;
    text-align: left;
}

    .profile-order-meta .status {
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 11px;
        text-align: center;
        border: 1px solid transparent;
    }

        .profile-order-meta .status.success {
            background: rgba(34, 197, 94, 0.16);
            color: #86efac;
            border-color: rgba(34, 197, 94, 0.35);
        }

        .profile-order-meta .status.warning {
            background: rgba(251, 191, 36, 0.16);
            color: #fde68a;
            border-color: rgba(251, 191, 36, 0.35);
        }

        .profile-order-meta .status.info {
            background: rgba(56, 189, 248, 0.16);
            color: #bae6fd;
            border-color: rgba(56, 189, 248, 0.35);
        }

.profile-notes {
    display: grid;
    gap: 14px;
}

.profile-alerts {
    display: grid;
    gap: 12px;
}

.profile-alert {
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(10, 12, 20, 0.7);
    color: #cbd5f5;
}

    .profile-alert strong {
        display: block;
        margin-bottom: 6px;
        color: #f8fafc;
    }

.profile-reveal {
    animation: profileFade 0.9s cubic-bezier(0.22, 0.7, 0.2, 1) both;
}

.profile-delay-1 {
    animation-delay: 0.1s;
}

.profile-delay-2 {
    animation-delay: 0.2s;
}

.profile-delay-3 {
    animation-delay: 0.3s;
}

@keyframes profileFade {
    0% {
        opacity: 0;
        transform: translateY(18px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1024px) {
    .profile-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .profile-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .profile-metrics {
        grid-template-columns: 1fr;
    }

    .profile-order-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .profile-order-meta {
        text-align: right;
        width: 100%;
    }
}

.banner-card {
    padding: 26px;
    border-radius: 22px;
    min-height: 180px;
    display: grid;
    gap: 10px;
    align-content: end;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(12, 14, 22, 0.85);
}

.banner-cyan {
    background: linear-gradient(140deg, rgba(6, 182, 212, 0.2), rgba(10, 12, 20, 0.9));
}

.banner-purple {
    background: linear-gradient(140deg, rgba(168, 85, 247, 0.2), rgba(10, 12, 20, 0.9));
}

.banner-dark {
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.08), rgba(10, 12, 20, 0.9));
}

.promo-card.alt {
    background: linear-gradient(140deg, rgba(168, 85, 247, 0.2), rgba(15, 15, 24, 0.9));
}

.promo-card h3 {
    color: #ffffff;
    margin-bottom: 10px;
}

.promo-card p {
    color: #9ca3af;
    margin-bottom: 16px;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.feature-card {
    padding: 24px;
    border-radius: 18px;
    background: rgba(10, 12, 20, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

    .feature-card h4 {
        color: #f8fafc;
        margin-bottom: 10px;
    }

    .feature-card p {
        color: #9ca3af;
        margin-bottom: 12px;
    }

    .feature-card span {
        color: #22d3ee;
        font-size: 13px;
    }

.review-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.review-card {
    padding: 24px;
    border-radius: 18px;
    background: rgba(12, 14, 22, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #d1d5db;
}

    .review-card span {
        display: block;
        margin-top: 14px;
        color: #94a3b8;
        font-size: 13px;
    }

.brand-strip {
    padding: 30px 0 10px;
}

.brand-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 18px;
    align-items: center;
    opacity: 0.8;
}

    .brand-row img {
        width: 100%;
        max-height: 40px;
        object-fit: contain;
        filter: grayscale(100%) brightness(1.3);
    }

.app-download {
    padding-top: 40px;
}

.app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    align-items: center;
}

.app-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.app-mock {
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.45);
}

    .app-mock img {
        width: 100%;
        display: block;
        object-fit: cover;
        filter: saturate(1.2);
    }

.magazine {
    padding-bottom: 90px;
}

.mag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

.mag-card {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(12, 14, 22, 0.85);
    display: grid;
    gap: 12px;
}

    .mag-card img {
        width: 100%;
        height: 160px;
        object-fit: cover;
    }

    .mag-card h3 {
        color: #f8fafc;
        font-size: 16px;
        margin: 0 0 6px;
    }

    .mag-card span {
        color: #94a3b8;
        font-size: 12px;
        padding-bottom: 16px;
        display: block;
    }

.newsletter {
    padding: 70px 0 90px;
}

.newsletter-box {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(120deg, rgba(6, 182, 212, 0.12), rgba(168, 85, 247, 0.12));
    position: relative;
    overflow: hidden;
}

    .newsletter-box::before {
        content: "";
        position: absolute;
        inset: -40% 20% auto -20%;
        height: 200px;
        background: radial-gradient(circle, rgba(6, 182, 212, 0.35), transparent 70%);
        opacity: 0.6;
    }

    .newsletter-box::after {
        content: "";
        position: absolute;
        inset: auto -20% -40% 20%;
        height: 220px;
        background: radial-gradient(circle, rgba(168, 85, 247, 0.35), transparent 70%);
        opacity: 0.6;
    }

    .newsletter-box > * {
        position: relative;
        z-index: 1;
    }

.newsletter-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

    .newsletter-form input {
        padding: 12px 16px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        background: rgba(12, 14, 22, 0.7);
        color: #e2e8f0;
        min-width: 220px;
    }

    .newsletter-form button {
        padding: 12px 20px;
        border-radius: 12px;
        border: none;
        background: linear-gradient(120deg, #06b6d4, #a855f7);
        color: #0b0f1c;
        font-weight: 700;
        cursor: pointer;
    }

.site-footer {
    padding: 64px 0 28px;
    background: linear-gradient(180deg, rgba(7, 8, 12, 0.95), rgba(5, 6, 10, 1));
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
}

    .site-footer::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.8), rgba(168, 85, 247, 0.8), transparent);
    }

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
    margin-bottom: 28px;
}

    .footer-grid h3,
    .footer-grid h4 {
        color: #ffffff;
        margin-bottom: 14px;
        font-size: 16px;
        letter-spacing: 0.2px;
    }

    .footer-grid p,
    .footer-grid a {
        color: #94a3b8;
        text-decoration: none;
        display: block;
        margin-bottom: 10px;
        font-size: 14px;
        line-height: 1.8;
    }

        .footer-grid a:hover {
            color: #ffffff;
        }

.footer-bottom {
    text-align: center;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.8;
}

@keyframes pulse {

    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.4);
        opacity: 0.6;
    }
}

@media (max-width: 768px) {
    .mega-slider-inner {
        aspect-ratio: 16 / 7;
    }

    .promo-bar-inner {
        justify-content: center;
        text-align: center;
    }

    .promo-right {
        width: 100%;
        justify-content: center;
    }


    .category-grid-main {
        grid-template-columns: repeat(2, 1fr);
    }

    .deal-grid,
    .app-grid {
        grid-template-columns: 1fr;
    }

    .quick-card {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 540px) {
    .mega-slider-inner {
        aspect-ratio: 16 / 8;
    }
}

@media (max-width: 768px) {
    :root {
        --content-gutter: 16px;
    }
}

@media (max-width: 640px) {
    .page {
        padding-top: 78px;
    }

    .section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-actions,
    .section-dark .section-actions {
        flex-wrap: wrap;
        white-space: normal;
    }

    .section-link-cta {
        width: 100%;
        justify-content: center;
        white-space: normal;
        text-align: center;
    }

    .hero-grid {
        grid-template-columns: 1fr;
    }

    .category-grid-main {
        grid-template-columns: 1fr;
    }

    .mega-slider .hero-dots {
        bottom: 8px;
        padding: 4px 10px;
        transform: translateX(-50%) translateY(0);
    }

    .mega-slider {
        padding-bottom: 32px;
    }

    .promo-bar-inner,
    .promo-left,
    .promo-right {
        justify-content: center;
        text-align: center;
        width: 100%;
    }
}

/* --- Theme toggle + light mode overrides --- */
.neo-theme .icon-sun {
    display: none;
}

[data-theme="light"] .neo-theme .icon-sun {
    display: block;
}

[data-theme="light"] .neo-theme .icon-moon {
    display: none;
}

html[data-theme="light"] {
    color-scheme: light;
    background-color: #f4f6fb;
}

    html[data-theme="light"] body {
        background-color: #f4f6fb;
        color: #0f172a;
    }

html[data-theme="light"] {
    scrollbar-color: rgba(14, 116, 144, 0.35) #e8ecf2;
}

    html[data-theme="light"] body::-webkit-scrollbar,
    html[data-theme="light"] body::-webkit-scrollbar-track,
    html[data-theme="light"] body::-webkit-scrollbar-track-piece,
    html[data-theme="light"]::-webkit-scrollbar,
    html[data-theme="light"]::-webkit-scrollbar-track,
    html[data-theme="light"]::-webkit-scrollbar-track-piece {
        background: #e8ecf2;
    }

    html[data-theme="light"] body::-webkit-scrollbar-thumb,
    html[data-theme="light"]::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, rgba(14, 116, 144, 0.4), rgba(147, 51, 234, 0.35));
        border: 1px solid rgba(148, 163, 184, 0.5);
    }

    html[data-theme="light"] body:hover::-webkit-scrollbar-thumb,
    html[data-theme="light"] body:active::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, rgba(14, 116, 144, 0.7), rgba(147, 51, 234, 0.6));
        box-shadow: 0 0 12px rgba(14, 116, 144, 0.3);
    }

    html[data-theme="light"] body::-webkit-scrollbar-corner,
    html[data-theme="light"]::-webkit-scrollbar-corner {
        background: #e8ecf2;
    }

[data-theme="light"] .neo-nav {
    background: linear-gradient(120deg, rgba(14, 116, 144, 0.12), rgba(147, 51, 234, 0.08));
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

    [data-theme="light"] .neo-nav::before {
        opacity: 0.18;
    }

[data-theme="light"] .neo-logo {
    color: #0f172a;
}

    [data-theme="light"] .neo-logo em {
        color: #64748b;
    }

[data-theme="light"] .neo-links {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .neo-link {
    color: #475569;
}

    [data-theme="light"] .neo-link:hover,
    [data-theme="light"] .neo-link.is-active {
        color: #0f172a;
    }

    [data-theme="light"] .neo-link::after {
        background: linear-gradient(90deg, #0891b2, #9333ea);
        box-shadow: 0 0 12px rgba(14, 116, 144, 0.35);
    }

[data-theme="light"] .neo-search {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(15, 23, 42, 0.1);
}

    [data-theme="light"] .neo-search input {
        color: #0f172a;
    }

        [data-theme="light"] .neo-search input::placeholder {
            color: #64748b;
        }

[data-theme="light"] .neo-icon-btn {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(15, 23, 42, 0.1);
    color: #475569;
}

    [data-theme="light"] .neo-icon-btn:hover {
        color: #0f172a;
        border-color: rgba(14, 116, 144, 0.45);
        box-shadow: 0 0 16px rgba(14, 116, 144, 0.25);
    }

[data-theme="light"] .neo-dropdown-menu {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.18);
}

[data-theme="light"] .neo-menu-title {
    border-bottom-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .neo-menu-item {
    color: #0f172a;
}

    [data-theme="light"] .neo-menu-item:hover {
        text-shadow: 0 0 10px rgba(14, 116, 144, 0.25);
    }

[data-theme="light"] .auth-page {
    background: radial-gradient(circle at 10% 20%, rgba(14, 116, 144, 0.18), transparent 45%), radial-gradient(circle at 80% 10%, rgba(147, 51, 234, 0.22), transparent 50%), linear-gradient(135deg, #f8fafc, #eef2ff 55%, #f1f5f9 100%);
}

[data-theme="light"] .auth-title {
    color: #0f172a;
}

[data-theme="light"] .auth-lead {
    color: #475569;
}

[data-theme="light"] .auth-bullet {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(15, 23, 42, 0.08);
    color: #1f2937;
}

[data-theme="light"] .auth-switch {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .auth-switch-btn {
    color: #475569;
}

    [data-theme="light"] .auth-switch-btn.is-active {
        color: #f8fafc;
    }

[data-theme="light"] .auth-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.95));
    border-color: rgba(148, 163, 184, 0.35);
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.15), 0 0 30px rgba(14, 116, 144, 0.08);
}

    [data-theme="light"] .auth-card h2 {
        color: #0f172a;
    }

    [data-theme="light"] .auth-card p,
    [data-theme="light"] .auth-row,
    [data-theme="light"] .auth-footer {
        color: #64748b;
    }

[data-theme="light"] .auth-field {
    color: #475569;
}

    [data-theme="light"] .auth-field input {
        background: rgba(248, 250, 252, 0.9);
        border-color: rgba(148, 163, 184, 0.45);
        color: #0f172a;
    }

        [data-theme="light"] .auth-field input:focus {
            border-color: rgba(14, 116, 144, 0.7);
            box-shadow: 0 0 0 2px rgba(14, 116, 144, 0.2), 0 0 16px rgba(14, 116, 144, 0.25);
        }

[data-theme="light"] .auth-social button {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(148, 163, 184, 0.4);
    color: #1f2937;
}

[data-theme="light"] .neo-profile-menu {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15);
}

[data-theme="light"] .neo-profile-head p {
    color: #64748b;
}

[data-theme="light"] .neo-profile-head strong {
    color: #0f172a;
}

[data-theme="light"] .neo-profile-item {
    color: #475569;
}

[data-theme="light"] .neo-mobile {
    background: rgba(241, 245, 249, 0.92);
}

[data-theme="light"] .neo-mobile-panel {
    background: #ffffff !important;
    border-left: 1px solid rgba(15, 23, 42, 0.12);
    box-shadow: -20px 0 45px rgba(15, 23, 42, 0.2);
}

[data-theme="light"] .neo-close {
    border-color: rgba(15, 23, 42, 0.12);
    background: rgba(15, 23, 42, 0.04);
    color: #0f172a;
}

[data-theme="light"] .neo-mobile-top {
    border-bottom-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .neo-mobile-title {
    color: #0f172a;
}

[data-theme="light"] .neo-mobile-sub {
    color: #64748b;
}

[data-theme="light"] .neo-mobile-link {
    color: #0f172a;
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.1);
}

    [data-theme="light"] .neo-mobile-link:hover {
        color: #0891b2;
        box-shadow: 0 0 16px rgba(14, 116, 144, 0.2);
    }

[data-theme="light"] .neo-mobile-submenu {
    background: linear-gradient(140deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.98));
    border-left-color: rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .neo-mobile-submenu-head {
    border-bottom-color: rgba(15, 23, 42, 0.1);
    color: #0f172a;
}

[data-theme="light"] .neo-mobile-back {
    border-color: rgba(15, 23, 42, 0.12);
    background: rgba(15, 23, 42, 0.04);
    color: #475569;
}

html[data-theme="light"] .neo-burger {
    background: rgba(15, 23, 42, 0.08);
    border-color: rgba(15, 23, 42, 0.18);
}

    html[data-theme="light"] .neo-burger span {
        background: #334155;
    }

[data-theme="light"] .neo-submenu-title {
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .neo-submenu-item {
    color: #475569;
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .section-head h2 {
    color: #0f172a;
}

[data-theme="light"] .section-head p {
    color: #64748b;
}

[data-theme="light"] .pill {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.1);
    color: #475569;
}

    [data-theme="light"] .pill.active,
    [data-theme="light"] .pill:hover {
        border-color: rgba(14, 116, 144, 0.4);
        color: #0f172a;
        box-shadow: 0 0 12px rgba(14, 116, 144, 0.2);
    }

[data-theme="light"] .section-dark {
    background: #f1f5f9;
}

[data-theme="light"] .trust-strip {
    background: #eef2f7;
    border-top-color: rgba(15, 23, 42, 0.08);
    border-bottom-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .promo-bar {
    background: linear-gradient(120deg,
        color-mix(in srgb, var(--promo-a) 14%, transparent),
        color-mix(in srgb, var(--promo-b) 14%, transparent));
    border-bottom-color: rgba(15, 23, 42, 0.08);
}

    [data-theme="light"] .promo-bar p,
    [data-theme="light"] .promo-timer {
        color: #0f172a;
    }

        [data-theme="light"] .countdown-digit {
            background: rgba(255, 255, 255, 0.85);
            border-color: color-mix(in srgb, var(--promo-a) 35%, transparent);
            color: #0f172a;
        }

[data-theme="light"] .promo-close {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(15, 23, 42, 0.15);
    color: #0f172a;
}

[data-theme="light"] .mega-slide {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(15, 23, 42, 0.1);
}

    [data-theme="light"] .mega-slide::after {
        background: none;
    }

[data-theme="light"] .mega-slide-content h2 {
    color: #0f172a;
}

[data-theme="light"] .mega-slide-content p,
[data-theme="light"] .slide-meta {
    color: #64748b;
}

[data-theme="light"] .slide-tag {
    background: rgba(14, 116, 144, 0.12);
    color: #0e7490;
    border-color: rgba(14, 116, 144, 0.35);
}

    [data-theme="light"] .slide-tag.purple {
        background: rgba(147, 51, 234, 0.12);
        color: #7e22ce;
        border-color: rgba(147, 51, 234, 0.35);
    }

    [data-theme="light"] .slide-tag.emerald {
        background: rgba(16, 185, 129, 0.12);
        color: #047857;
        border-color: rgba(16, 185, 129, 0.35);
    }

[data-theme="light"] .mega-slider .hero-dots {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .hero-dot {
    background: rgba(100, 116, 139, 0.4);
}

    [data-theme="light"] .hero-dot.is-active {
        background: #0891b2;
        box-shadow: 0 0 10px rgba(14, 116, 144, 0.35);
    }

[data-theme="light"] .ctrl-btn,
[data-theme="light"] .mega-slider .hero-controls .ctrl-btn {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(8, 145, 178, 0.35);
    box-shadow: 0 0 18px rgba(8, 145, 178, 0.15), inset 0 0 18px rgba(147, 51, 234, 0.08);
    color: #0f172a;
}

    [data-theme="light"] .mega-slider .hero-controls .ctrl-btn:hover,
    [data-theme="light"] .mega-slider .hero-controls .ctrl-btn:focus-visible {
        background: rgba(255, 255, 255, 0.85);
        border-color: rgba(8, 145, 178, 0.7);
        box-shadow: 0 0 26px rgba(8, 145, 178, 0.35), inset 0 0 22px rgba(147, 51, 234, 0.16);
    }

[data-theme="light"] .section-link {
    color: #0891b2;
}

html[data-theme="light"] .section-link-cta {
    color: #0f172a;
    background: linear-gradient(120deg, #38bdf8, #a78bfa, #fdba74);
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 12px 28px rgba(14, 116, 144, 0.25);
}

html[data-theme="light"] .filter-card,
html[data-theme="light"] .products-toolbar {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .filter-head h3,
html[data-theme="light"] .filter-group h4,
html[data-theme="light"] .result-count {
    color: #0f172a;
}

html[data-theme="light"] .filter-clear,
html[data-theme="light"] .quick-chip,
html[data-theme="light"] .view-btn {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.12);
    color: #475569;
}

html[data-theme="light"] .filter-clear {
    background: linear-gradient(120deg, #fb7185, #f43f5e);
    color: #fff1f2;
    border-color: transparent;
    box-shadow: 0 12px 24px rgba(244, 63, 94, 0.25);
}

html[data-theme="light"] .filter-option {
    background: rgba(15, 23, 42, 0.03);
    border-color: rgba(15, 23, 42, 0.08);
}

    html[data-theme="light"] .filter-option:hover {
        color: #0f172a;
        border-color: rgba(14, 116, 144, 0.35);
        box-shadow: 0 0 14px rgba(14, 116, 144, 0.18);
    }

html[data-theme="light"] .filter-option,
html[data-theme="light"] .sort-control {
    color: #475569;
}

    html[data-theme="light"] .price-field input,
    html[data-theme="light"] .sort-control select {
        background: rgba(255, 255, 255, 0.95);
        border-color: rgba(14, 116, 144, 0.45);
        color: #0f172a;
    }

html[data-theme="light"] .filter-head {
    border-bottom-color: rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .filter-group h4::before {
    background: #0891b2;
    box-shadow: 0 0 10px rgba(14, 116, 144, 0.4);
}

html[data-theme="light"] .price-summary {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.12);
    color: #334155;
}

html[data-theme="light"] .range-track {
    background: rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .range-fill {
    background: linear-gradient(90deg, #0891b2, #a855f7);
    box-shadow: 0 0 10px rgba(14, 116, 144, 0.25);
}

html[data-theme="light"] .range-slider input[type="range"]::-webkit-slider-thumb {
    background: #0891b2;
    box-shadow: 0 0 12px rgba(14, 116, 144, 0.4);
}

html[data-theme="light"] .range-slider input[type="range"]::-moz-range-thumb {
    background: #0891b2;
    box-shadow: 0 0 12px rgba(14, 116, 144, 0.4);
}


html[data-theme="light"] .price-field,
html[data-theme="light"] .price-sep {
    color: #64748b;
}

html[data-theme="light"] .filter-toggle {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.12);
    color: #475569;
}

html[data-theme="light"] .products-toolbar {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(15, 23, 42, 0.1);
}

html[data-theme="light"] .result-count {
    color: #0f172a;
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 0 16px rgba(14, 116, 144, 0.18);
}

html[data-theme="light"] .sort-label {
    color: #64748b;
}

html[data-theme="light"] .quick-chip {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.12);
    color: #334155;
}

    html[data-theme="light"] .quick-chip.is-active,
    html[data-theme="light"] .quick-chip:hover {
        color: #0f172a;
        border-color: rgba(14, 116, 144, 0.45);
        box-shadow: 0 0 18px rgba(14, 116, 144, 0.25);
    }

html[data-theme="light"] .chip-icon {
    background: #0891b2;
    box-shadow: 0 0 10px rgba(14, 116, 144, 0.5);
}

html[data-theme="light"] .products-loading {
    background: linear-gradient(130deg, rgba(14, 116, 144, 0.12), rgba(255, 255, 255, 0.95), rgba(147, 51, 234, 0.12));
    border-color: rgba(15, 23, 42, 0.12);
    color: #0f172a;
    box-shadow: 0 0 18px rgba(14, 116, 144, 0.18), 0 0 32px rgba(147, 51, 234, 0.16);
}

    html[data-theme="light"] .products-loading::before {
        background: linear-gradient(120deg, transparent 35%, rgba(14, 116, 144, 0.28), transparent 60%);
    }

html[data-theme="light"] .loading-spinner {
    border-color: rgba(15, 23, 42, 0.18);
    border-top-color: #0891b2;
    box-shadow: 0 0 12px rgba(14, 116, 144, 0.35);
}

html[data-theme="light"] .loading-text {
    animation: loadingTextPulseLight 2s ease-in-out infinite;
}


@media (max-width: 1024px) {
    .products-layout {
        flex-direction: column;
    }

    .filters-mobile-trigger {
        display: flex;
    }

    .filters-panel {
        width: 100%;
        position: static;
        display: none;
        animation: fadeUp 0.35s ease;
    }

        .filters-panel.is-open {
            display: block;
        }
}

@media (max-width: 720px) {
    .products-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .toolbar-right {
        flex-wrap: wrap;
        width: 100%;
    }

    .quick-filters {
        flex-wrap: wrap;
        white-space: normal;
        row-gap: 6px;
    }

    .quick-chip {
        font-size: 11px;
        padding: 6px 10px;
    }

    .sort-label {
        font-size: 12px;
    }

    .products-loading {
        gap: 10px;
        padding: 12px 14px;
    }

    .loading-text {
        font-size: 13px;
        white-space: nowrap;
    }
}

[data-theme="light"] .glass,
[data-theme="light"] .glass-card {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .btn-ghost {
    background: rgba(15, 23, 42, 0.04);
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .btn-mini {
    background: rgba(14, 116, 144, 0.12);
    color: #0e7490;
}

[data-theme="light"] .meta-card {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(15, 23, 42, 0.1);
}

    [data-theme="light"] .meta-card h4 {
        color: #0f172a;
    }

    [data-theme="light"] .meta-card p {
        color: #64748b;
    }

[data-theme="light"] .deal-card,
[data-theme="light"] .why-card,
[data-theme="light"] .quick-card,
[data-theme="light"] .category-card,
[data-theme="light"] .flash-card,
[data-theme="light"] .product-card,
[data-theme="light"] .promo-card,
[data-theme="light"] .banner-card,
[data-theme="light"] .feature-card,
[data-theme="light"] .review-card,
[data-theme="light"] .mag-card,
[data-theme="light"] .deal-highlight,
[data-theme="light"] .deal-product {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .pd-media,
[data-theme="light"] .pd-panel,
[data-theme="light"] .pd-buy-card,
[data-theme="light"] .pd-review-card,
[data-theme="light"] .pd-form {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .pd-media::before,
html[data-theme="light"] .pd-thumb::before,
html[data-theme="light"] .pd-buy-card::before,
html[data-theme="light"] .pd-panel::before,
html[data-theme="light"] .pd-review-card::before,
html[data-theme="light"] .pd-review-loader::before,
html[data-theme="light"] .pd-form::before,
html[data-theme="light"] .product-detail-page .product-card::before {
    border-color: rgba(14, 116, 144, 0.4);
    box-shadow: 0 0 16px rgba(14, 116, 144, 0.18), 0 0 22px rgba(147, 51, 234, 0.14);
    opacity: 0.65;
}

[data-theme="light"] .pd-media::after {
    background: radial-gradient(circle, rgba(14, 116, 144, 0.16), transparent 70%);
}

[data-theme="light"] .pd-title,
[data-theme="light"] .pd-panel h3,
[data-theme="light"] .pd-review-card strong {
    color: #0f172a;
}

[data-theme="light"] .pd-lead,
[data-theme="light"] .pd-panel p,
[data-theme="light"] .pd-review-card,
[data-theme="light"] .pd-specs li {
    color: #475569;
}

[data-theme="light"] .pd-chip,
[data-theme="light"] .pd-feature,
[data-theme="light"] .pd-quick span,
[data-theme="light"] .pd-thumb {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.1);
    color: #475569;
}

[data-theme="light"] .pd-form input,
[data-theme="light"] .pd-form textarea {
    background: rgba(248, 250, 252, 0.95);
    border-color: rgba(148, 163, 184, 0.4);
    color: #0f172a;
}

html[data-theme="light"] .pd-faq-item {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(15, 23, 42, 0.1);
}

html[data-theme="light"] .pd-faq-toggle {
    color: #0f172a;
}

html[data-theme="light"] .pd-faq-body {
    color: #475569;
}

html[data-theme="light"] .pd-faq-icon {
    border-color: rgba(15, 23, 42, 0.14);
    color: #0e7490;
}

html[data-theme="light"] .profile-card,
html[data-theme="light"] .profile-menu,
html[data-theme="light"] .profile-wallet,
html[data-theme="light"] .profile-metric,
html[data-theme="light"] .profile-order-card,
html[data-theme="light"] .profile-alert {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .profile-info,
html[data-theme="light"] .profile-wallet,
html[data-theme="light"] .profile-metric,
html[data-theme="light"] .profile-order-card,
html[data-theme="light"] .profile-alert {
    color: #475569;
}

    html[data-theme="light"] .profile-info h1,
    html[data-theme="light"] .profile-wallet h3,
    html[data-theme="light"] .profile-metric h4,
    html[data-theme="light"] .profile-order-card h3,
    html[data-theme="light"] .profile-alert strong {
        color: #0f172a;
    }

    html[data-theme="light"] .profile-info p,
    html[data-theme="light"] .profile-order-card span {
        color: #64748b;
    }

html[data-theme="light"] .profile-card {
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.98), rgba(226, 232, 240, 0.9));
    box-shadow: 0 26px 50px rgba(14, 116, 144, 0.12);
}

    html[data-theme="light"] .profile-card::after {
        background: radial-gradient(circle, rgba(14, 116, 144, 0.18), transparent 70%);
    }

html[data-theme="light"] .profile-tags span,
html[data-theme="light"] .profile-link {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.12);
    color: #475569;
}

html[data-theme="light"] .profile-link {
    background: rgba(15, 23, 42, 0.05);
}

    html[data-theme="light"] .profile-link.is-active,
    html[data-theme="light"] .profile-link:hover {
        color: #0f172a;
        border-color: rgba(14, 116, 144, 0.45);
        box-shadow: 0 10px 20px rgba(14, 116, 144, 0.12);
    }

html[data-theme="light"] .profile-btn.ghost {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.12);
    color: #0f172a;
}

html[data-theme="light"] .profile-btn.mini {
    background: rgba(14, 116, 144, 0.12);
    color: #0e7490;
    border-color: rgba(14, 116, 144, 0.3);
}

html[data-theme="light"] .profile-btn.primary {
    background: linear-gradient(90deg, rgba(14, 116, 144, 0.9), rgba(147, 51, 234, 0.85));
    color: #ffffff;
    box-shadow: 0 14px 30px rgba(14, 116, 144, 0.22);
}

html[data-theme="light"] .profile-btn.ghost {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.14);
    color: #0f172a;
}

html[data-theme="light"] .profile-avatar {
    border-color: rgba(14, 116, 144, 0.25);
    box-shadow: 0 0 20px rgba(14, 116, 144, 0.18);
}

html[data-theme="light"] .profile-status {
    background: rgba(34, 197, 94, 0.16);
    color: #15803d;
    border-color: rgba(34, 197, 94, 0.35);
}

html[data-theme="light"] .cart-header h1 {
    color: #0f172a;
}

html[data-theme="light"] .cart-header p {
    color: #64748b;
}

html[data-theme="light"] .cart-step {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.12);
    color: #475569;
}

    html[data-theme="light"] .cart-step.is-active {
        border-color: rgba(14, 116, 144, 0.45);
        color: #0f172a;
        box-shadow: 0 0 18px rgba(14, 116, 144, 0.2);
    }

    html[data-theme="light"] .cart-step.is-complete {
        border-color: rgba(34, 197, 94, 0.4);
        color: #14532d;
        box-shadow: 0 0 16px rgba(34, 197, 94, 0.18);
    }

html[data-theme="light"] .cart-item,
html[data-theme="light"] .cart-note,
html[data-theme="light"] .cart-summary {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
}

    html[data-theme="light"] .cart-item::before,
    html[data-theme="light"] .cart-note::before,
    html[data-theme="light"] .cart-summary::before {
        border-color: rgba(14, 116, 144, 0.35);
        box-shadow: 0 0 16px rgba(14, 116, 144, 0.18), 0 0 22px rgba(147, 51, 234, 0.14);
        opacity: 0.6;
    }

    html[data-theme="light"] .cart-item-info h3,
    html[data-theme="light"] .cart-note h3,
    html[data-theme="light"] .cart-summary h2,
    html[data-theme="light"] .cart-summary-row strong,
    html[data-theme="light"] .cart-summary-total {
        color: #0f172a;
    }

    html[data-theme="light"] .cart-item-info p,
    html[data-theme="light"] .cart-note p,
    html[data-theme="light"] .cart-summary-row,
    html[data-theme="light"] .cart-guard {
        color: #64748b;
    }

html[data-theme="light"] .cart-badge.ghost {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.12);
    color: #475569;
}

html[data-theme="light"] .cart-qty button {
    background: rgba(15, 23, 42, 0.06);
    border-color: rgba(15, 23, 42, 0.12);
    color: #0f172a;
}

html[data-theme="light"] .cart-qty span {
    color: #0f172a;
}

html[data-theme="light"] .cart-price strong {
    color: #0f172a;
}

html[data-theme="light"] .cart-coupon input {
    background: rgba(248, 250, 252, 0.95);
    border-color: rgba(148, 163, 184, 0.4);
    color: #0f172a;
}

html[data-theme="light"] .cart-trust span {
    background: rgba(15, 23, 42, 0.04);
    color: #475569;
}

html[data-theme="light"] .checkout-card {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
}

    html[data-theme="light"] .checkout-card::before {
        border-color: rgba(14, 116, 144, 0.3);
        box-shadow: 0 0 16px rgba(14, 116, 144, 0.18), 0 0 22px rgba(147, 51, 234, 0.14);
        opacity: 0.55;
    }

html[data-theme="light"] .checkout-head h2 {
    color: #0f172a;
}

html[data-theme="light"] .checkout-head p {
    color: #64748b;
}

html[data-theme="light"] .checkout-pill {
    background: rgba(14, 116, 144, 0.16);
    color: #0e7490;
    border-color: rgba(14, 116, 144, 0.35);
}

html[data-theme="light"] .neo-btn.ghost {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.12);
    color: #0f172a;
}

html[data-theme="light"] .neo-form label {
    color: #475569;
}

html[data-theme="light"] .neo-form input,
html[data-theme="light"] .neo-form textarea {
    background: rgba(248, 250, 252, 0.95);
    border-color: rgba(148, 163, 184, 0.4);
    color: #0f172a;
}

html[data-theme="light"] .address-card,
html[data-theme="light"] .payment-card {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.12);
}

    html[data-theme="light"] .address-card.is-active,
    html[data-theme="light"] .payment-card.is-active {
        border-color: rgba(14, 116, 144, 0.45);
        box-shadow: 0 12px 24px rgba(14, 116, 144, 0.2);
    }

html[data-theme="light"] .address-title,
html[data-theme="light"] .payment-title {
    color: #0f172a;
}

html[data-theme="light"] .address-body,
html[data-theme="light"] .payment-sub,
html[data-theme="light"] .address-meta,
html[data-theme="light"] .checkout-recap {
    color: #64748b;
}

    html[data-theme="light"] .checkout-recap strong {
        color: #0f172a;
    }

html[data-theme="light"] .profile-status {
    background: rgba(34, 197, 94, 0.16);
    color: #15803d;
    border-color: rgba(34, 197, 94, 0.35);
}

html[data-theme="light"] .profile-edit {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(15, 23, 42, 0.1);
}

html[data-theme="light"] .profile-edit-form {
    color: #475569;
}

    html[data-theme="light"] .profile-edit-form input,
    html[data-theme="light"] .profile-edit-form select {
        background: rgba(248, 250, 252, 0.95);
        border-color: rgba(148, 163, 184, 0.4);
        color: #0f172a;
    }

html[data-theme="light"] .profile-avatar-hint {
    background: rgba(14, 116, 144, 0.18);
    color: #0e7490;
    border-color: rgba(14, 116, 144, 0.35);
}

html[data-theme="light"] .pd-price {
    color: #0f172a;
}

html[data-theme="light"] .pd-price-old,
html[data-theme="light"] .pd-ship {
    color: #64748b;
}

html[data-theme="light"] .pd-discount {
    background: rgba(244, 63, 94, 0.12);
    color: #be123c;
    border-color: rgba(244, 63, 94, 0.3);
}

html[data-theme="light"] .pd-qty button {
    background: rgba(15, 23, 42, 0.06);
    border-color: rgba(15, 23, 42, 0.12);
    color: #0f172a;
}

html[data-theme="light"] .pd-qty span {
    color: #0f172a;
}

html[data-theme="light"] .pd-btn.primary {
    background: linear-gradient(90deg, rgba(34, 211, 238, 0.9), rgba(168, 85, 247, 0.9));
    color: #0b1120;
    box-shadow: 0 12px 28px rgba(34, 211, 238, 0.25);
}

[data-theme="light"] .pd-btn.ghost {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.12);
    color: #0f172a;
}

html[data-theme="light"] .filters-toggle-btn {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(15, 23, 42, 0.12);
    color: #1e293b;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .banner-cyan {
    background: linear-gradient(140deg, rgba(14, 116, 144, 0.15), rgba(255, 255, 255, 0.95));
}

[data-theme="light"] .banner-purple {
    background: linear-gradient(140deg, rgba(147, 51, 234, 0.15), rgba(255, 255, 255, 0.95));
}

[data-theme="light"] .banner-dark,
[data-theme="light"] .promo-card,
[data-theme="light"] .promo-card.alt {
    background: linear-gradient(140deg, rgba(15, 23, 42, 0.06), rgba(255, 255, 255, 0.95));
}

[data-theme="light"] .category-media {
    border-color: rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .why-icon,
[data-theme="light"] .quick-icon,
[data-theme="light"] .category-icon {
    background: rgba(14, 116, 144, 0.12);
}

[data-theme="light"] .story-item,
[data-theme="light"] .trust-item {
    color: #64748b;
}

[data-theme="light"] .category-card h3,
[data-theme="light"] .product-card h3,
[data-theme="light"] .promo-card h3,
[data-theme="light"] .feature-card h4,
[data-theme="light"] .mag-card h3 {
    color: #0f172a;
}

[data-theme="light"] .category-card span,
[data-theme="light"] .promo-card p,
[data-theme="light"] .feature-card p,
[data-theme="light"] .review-card span,
[data-theme="light"] .mag-card span,
[data-theme="light"] .deal-timer span,
[data-theme="light"] .deal-progress {
    color: #64748b;
}

[data-theme="light"] .price,
[data-theme="light"] .deal-timer strong {
    color: #0f172a;
}

html[data-theme="light"] .price-old {
    color: #94a3b8;
}

html[data-theme="light"] .price-new {
    color: #0f172a;
}

html[data-theme="light"] .is-clickable:focus-visible {
    outline-color: rgba(14, 116, 144, 0.7);
}

[data-theme="light"] .review-card {
    color: #475569;
}

[data-theme="light"] .deal-timer div {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .deal-progress .bar {
    background: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .badge {
    background: #e0f2fe;
    color: #0c4a6e;
    border-color: #7dd3fc;
    box-shadow: 0 8px 18px rgba(14, 116, 144, 0.2);
}

    [data-theme="light"] .badge.purple {
        background: #f3e8ff;
        color: #6b21a8;
        border-color: #c4b5fd;
        box-shadow: 0 8px 18px rgba(126, 34, 206, 0.2);
    }

[data-theme="light"] .deal-badge {
    background: #e0f2fe;
    color: #0c4a6e;
    border-color: #7dd3fc;
    box-shadow: 0 8px 18px rgba(14, 116, 144, 0.2);
}

/* --- UI kit page --- */
.ui-page {
    background: radial-gradient(1200px 700px at 10% 10%, rgba(34, 211, 238, 0.16), transparent 60%), radial-gradient(900px 600px at 90% 10%, rgba(168, 85, 247, 0.18), transparent 55%), linear-gradient(180deg, #05070f 0%, #090c16 60%, #0b0f1d 100%);
    color: #e2e8f0;
}

.ui-topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    backdrop-filter: blur(14px);
    background: rgba(7, 9, 16, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ui-topbar-inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 18px var(--content-gutter);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: center;
}

.ui-brand {
    font-size: 20px;
    font-weight: 700;
    display: inline-flex;
    gap: 6px;
    color: #f8fafc;
}

    .ui-brand em {
        font-style: normal;
        color: #67e8f9;
    }

.ui-topbar p {
    margin: 0;
    color: #94a3b8;
    font-size: 13px;
}

.ui-topbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.ui-icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #e2e8f0;
    display: grid;
    place-items: center;
    cursor: pointer;
    position: relative;
}

    .ui-icon-btn svg {
        width: 18px;
        height: 18px;
    }

    .ui-icon-btn .icon-sun {
        opacity: 0;
        position: absolute;
    }

html[data-theme="light"] .ui-icon-btn .icon-sun {
    opacity: 1;
}

html[data-theme="light"] .ui-icon-btn .icon-moon {
    opacity: 0;
}

.ui-main {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 32px var(--content-gutter) 80px;
    display: grid;
    gap: 36px;
}

.ui-hero {
    position: relative;
    border-radius: 28px;
    padding: 40px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(12, 16, 26, 0.7);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35);
}

.ui-hero-content {
    position: relative;
    z-index: 1;
    max-width: 560px;
    display: grid;
    gap: 16px;
}

.ui-hero h1 {
    margin: 0;
    font-size: 36px;
    color: #f8fafc;
}

.ui-hero p {
    margin: 0;
    color: #94a3b8;
}

.ui-hero-actions {
    display: inline-flex;
    gap: 12px;
    flex-wrap: wrap;
}

.ui-hero-glow {
    position: absolute;
    inset: -30% 20% auto auto;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.35), rgba(168, 85, 247, 0.15), transparent 70%);
    filter: blur(20px);
    animation: uiGlowFloat 12s ease-in-out infinite;
}

.ui-section {
    display: grid;
    gap: 18px;
}

.ui-section-head h2 {
    margin: 0;
    color: #f8fafc;
    font-size: 22px;
}

.ui-section-head p {
    margin: 6px 0 0;
    color: #94a3b8;
}

.ui-grid {
    display: grid;
    gap: 16px;
}

.ui-grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.ui-grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.ui-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.ui-span-2 {
    grid-column: span 2;
}

.ui-btn {
    height: 46px;
    padding: 0 18px;
    border-radius: 14px;
    border: 1px solid transparent;
    cursor: pointer;
    font-weight: 600;
    font-family: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

    .ui-btn.primary {
        background: linear-gradient(90deg, rgba(34, 211, 238, 0.92), rgba(168, 85, 247, 0.9));
        color: #0b1120;
        box-shadow: 0 14px 30px rgba(34, 211, 238, 0.25);
    }

    .ui-btn.ghost {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.12);
        color: #e2e8f0;
    }

    .ui-btn.outline {
        background: transparent;
        border-color: rgba(34, 211, 238, 0.5);
        color: #67e8f9;
    }

    .ui-btn.glow {
        background: rgba(34, 211, 238, 0.15);
        border-color: rgba(34, 211, 238, 0.5);
        color: #f8fafc;
        box-shadow: 0 0 18px rgba(34, 211, 238, 0.22);
    }

    .ui-btn.pill {
        border-radius: 999px;
        background: rgba(168, 85, 247, 0.18);
        color: #f5d0fe;
        border-color: rgba(168, 85, 247, 0.45);
    }

    .ui-btn.danger {
        background: rgba(248, 113, 113, 0.18);
        color: #fecaca;
        border-color: rgba(248, 113, 113, 0.45);
    }

    .ui-btn:hover {
        transform: translateY(-2px);
    }

.ui-link {
    color: #67e8f9;
    text-decoration: none;
    position: relative;
    font-weight: 600;
}

    .ui-link::after {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        bottom: -6px;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, rgba(34, 211, 238, 0), rgba(34, 211, 238, 0.9), rgba(168, 85, 247, 0.7));
        opacity: 0;
        transform: scaleX(0.6);
        transition: all 0.3s ease;
    }

    .ui-link:hover::after {
        opacity: 1;
        transform: scaleX(1);
    }

    .ui-link.muted {
        color: #94a3b8;
    }

.ui-field {
    display: grid;
    gap: 8px;
    color: #cbd5f5;
    font-size: 13px;
}

.ui-input {
    height: 46px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(8, 10, 16, 0.8);
    color: #e2e8f0;
    padding: 0 14px;
    font-family: inherit;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

    .ui-input:focus {
        outline: none;
        border-color: rgba(34, 211, 238, 0.6);
        box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15);
    }

    .ui-input.ui-select,
    .ui-input.ui-textarea {
        height: auto;
        padding: 12px 14px;
    }

.ui-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #cbd5f5;
    font-size: 13px;
}

    .ui-check input {
        width: 18px;
        height: 18px;
        border-radius: 6px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        appearance: none;
        background: rgba(255, 255, 255, 0.04);
        display: grid;
        place-items: center;
    }

        .ui-check input::after {
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 4px;
            background: #67e8f9;
            transform: scale(0);
            transition: transform 0.2s ease;
        }

        .ui-check input:checked::after {
            transform: scale(1);
        }

    .ui-check.radio input {
        border-radius: 999px;
    }

        .ui-check.radio input::after {
            border-radius: 999px;
        }

.ui-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: #cbd5f5;
    font-size: 13px;
}

    .ui-switch input {
        display: none;
    }

.ui-switch-track {
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    transition: background 0.3s ease;
}

    .ui-switch-track::after {
        content: "";
        position: absolute;
        inset: 3px 3px auto auto;
        width: 20px;
        height: 20px;
        border-radius: 999px;
        background: #94a3b8;
        transition: transform 0.3s ease, background 0.3s ease;
    }

.ui-switch input:checked + .ui-switch-track {
    background: rgba(34, 211, 238, 0.25);
}

    .ui-switch input:checked + .ui-switch-track::after {
        transform: translateX(-20px);
        background: #67e8f9;
    }

.ui-badge {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(34, 211, 238, 0.18);
    color: #67e8f9;
    border: 1px solid rgba(34, 211, 238, 0.3);
    font-size: 11px;
}

    .ui-badge.purple {
        background: rgba(168, 85, 247, 0.2);
        color: #f5d0fe;
        border-color: rgba(168, 85, 247, 0.35);
    }

    .ui-badge.green {
        background: rgba(34, 197, 94, 0.2);
        color: #bbf7d0;
        border-color: rgba(34, 197, 94, 0.35);
    }

.ui-chip {
    padding: 6px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
    font-size: 12px;
}

    .ui-chip.muted {
        color: #94a3b8;
    }

.ui-alert {
    position: relative;
    border-radius: 16px;
    padding: 14px 16px;
    display: grid;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
}

    .ui-alert::before {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        top: 10px;
        bottom: 10px;
        width: 4px;
        border-radius: 999px;
        background: rgba(34, 211, 238, 0.6);
    }

    .ui-alert.success {
        border-color: rgba(34, 197, 94, 0.4);
        color: #bbf7d0;
    }

    .ui-alert.warning {
        border-color: rgba(248, 113, 113, 0.4);
        color: #fecaca;
    }

    .ui-alert.info {
        border-color: rgba(56, 189, 248, 0.4);
        color: #bae6fd;
    }

    .ui-alert.purple {
        border-color: rgba(168, 85, 247, 0.45);
        color: #f5d0fe;
    }

    .ui-alert.gradient {
        border-color: rgba(34, 211, 238, 0.4);
        color: #e2e8f0;
        background: linear-gradient(120deg, rgba(34, 211, 238, 0.12), rgba(168, 85, 247, 0.12));
    }

    .ui-alert.glow {
        border-color: rgba(248, 113, 113, 0.45);
        color: #fecaca;
        box-shadow: 0 0 24px rgba(248, 113, 113, 0.2);
    }

    .ui-alert.success::before {
        background: rgba(34, 197, 94, 0.6);
    }

    .ui-alert.warning::before {
        background: rgba(248, 113, 113, 0.6);
    }

    .ui-alert.info::before {
        background: rgba(56, 189, 248, 0.6);
    }

    .ui-alert.purple::before {
        background: rgba(168, 85, 247, 0.6);
    }

    .ui-alert.gradient::before {
        background: linear-gradient(180deg, rgba(34, 211, 238, 0.8), rgba(168, 85, 247, 0.8));
    }

    .ui-alert.glow::before {
        background: rgba(248, 113, 113, 0.7);
    }

.ui-tabs {
    border-radius: 20px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(10, 12, 20, 0.65);
    display: grid;
    gap: 12px;
}

.ui-tab-triggers {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}

    .ui-tab-triggers button {
        padding: 8px 14px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.04);
        color: #cbd5f5;
        cursor: pointer;
    }

        .ui-tab-triggers button.is-active {
            border-color: rgba(34, 211, 238, 0.5);
            color: #e0f2fe;
            box-shadow: 0 0 14px rgba(34, 211, 238, 0.22);
        }

.ui-tab-panels {
    color: #cbd5f5;
    font-size: 13px;
}

.ui-tab-panel {
    display: none;
}

    .ui-tab-panel.is-active {
        display: block;
    }

.ui-accordion {
    display: grid;
    gap: 12px;
}

.ui-accordion-item {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    padding: 12px 16px;
    overflow: hidden;
}

.ui-accordion-trigger {
    width: 100%;
    background: none;
    border: none;
    color: #e2e8f0;
    font-weight: 600;
    cursor: pointer;
    text-align: right;
    padding: 8px 0;
}

.ui-accordion-body {
    color: #94a3b8;
    font-size: 13px;
}

.ui-accordion-item.is-open .ui-accordion-body {
    max-height: 140px;
}

.ui-card {
    border-radius: 20px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(10, 12, 20, 0.7);
    display: grid;
    gap: 10px;
}

    .ui-card.glass {
        background: rgba(255, 255, 255, 0.04);
    }

    .ui-card.highlight {
        background: linear-gradient(135deg, rgba(34, 211, 238, 0.18), rgba(168, 85, 247, 0.18));
    }

    .ui-card h3 {
        margin: 0;
        color: #f8fafc;
    }

    .ui-card p {
        margin: 0;
        color: #94a3b8;
        font-size: 13px;
    }

.ui-metric {
    color: #67e8f9;
    font-weight: 600;
}

.ui-spinner {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: #67e8f9;
    animation: uiSpin 0.8s linear infinite;
}

.ui-spinner-middle {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    width: 100%;
}

.ui-dots {
    display: inline-flex;
    gap: 6px;
}

    .ui-dots span {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: #67e8f9;
        animation: uiDots 1s ease-in-out infinite;
    }

        .ui-dots span:nth-child(2) {
            animation-delay: 0.2s;
        }

        .ui-dots span:nth-child(3) {
            animation-delay: 0.4s;
        }

.ui-ring {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: conic-gradient(from 90deg, rgba(34, 211, 238, 0.9), rgba(168, 85, 247, 0.2), rgba(34, 211, 238, 0.9));
    mask: radial-gradient(circle, transparent 55%, #000 56%);
    animation: uiSpin 1.2s linear infinite;
}

.ui-progress {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

    .ui-progress span {
        display: block;
        height: 100%;
        background: linear-gradient(90deg, rgba(34, 211, 238, 0.95), rgba(168, 85, 247, 0.9));
        animation: uiProgress 3s ease-in-out infinite;
    }

.ui-skeleton {
    height: 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
    background-size: 200% 100%;
    animation: uiShimmer 1.4s ease infinite;
}

    .ui-skeleton.short {
        width: 60%;
    }

.ui-toast {
    position: fixed;
    bottom: 24px;
    inset-inline-end: 24px;
    padding: 14px 18px;
    border-radius: 16px;
    background: rgba(10, 12, 20, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    display: grid;
    gap: 6px;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

    .ui-toast.inline {
        position: relative;
        inset: auto;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .ui-toast.success {
        border-color: rgba(34, 197, 94, 0.4);
        background: rgba(12, 24, 20, 0.9);
    }

    .ui-toast.info {
        border-color: rgba(56, 189, 248, 0.4);
        background: rgba(8, 16, 28, 0.9);
    }

    .ui-toast.purple {
        border-color: rgba(168, 85, 247, 0.45);
        background: rgba(18, 10, 28, 0.9);
    }

.ui-toast-stack {
    display: grid;
    gap: 10px;
}

.ui-toast.is-show {
    opacity: 1;
    transform: translateY(0);
}

.ui-modal {
    position: fixed;
    inset: 0;
    display: none;
    place-items: center;
    z-index: 20;
}

    .ui-modal.is-open {
        display: grid;
    }

.ui-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 6, 12, 0.6);
    backdrop-filter: blur(6px);
}

.ui-modal-card {
    position: relative;
    z-index: 1;
    width: min(420px, 90%);
    border-radius: 20px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(10, 12, 20, 0.92);
    display: grid;
    gap: 14px;
    animation: uiModalPop 0.55s ease;
}

    .ui-modal-card.glass {
        background: rgba(12, 18, 28, 0.7);
        border-color: rgba(34, 211, 238, 0.35);
        box-shadow: 0 18px 40px rgba(34, 211, 238, 0.18);
        backdrop-filter: blur(14px);
        animation: uiModalFloat 0.6s ease;
    }

    .ui-modal-card.wide {
        width: min(640px, 92%);
        animation: uiModalSlide 0.55s ease;
    }

.ui-modal-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 180px);
    gap: 16px;
    align-items: center;
}

.ui-modal-side {
    border-radius: 16px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.18), rgba(168, 85, 247, 0.2));
    display: grid;
    gap: 10px;
    text-align: center;
    color: #f8fafc;
}

    .ui-modal-side strong {
        font-size: 18px;
    }

.ui-modal-list {
    margin: 12px 0 0;
    padding: 0 16px 0 0;
    display: grid;
    gap: 8px;
    color: #cbd5f5;
    font-size: 13px;
}

.ui-modal-card h3 {
    margin: 0;
    color: #f8fafc;
}

.ui-modal-card p {
    margin: 0;
    color: #94a3b8;
    font-size: 13px;
}

.ui-swal {
    position: fixed;
    inset: 0;
    display: none;
    place-items: center;
    z-index: 30;
}

    .ui-swal.is-open {
        display: grid;
    }

.ui-swal-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top, rgba(34, 211, 238, 0.12), transparent 50%), rgba(4, 6, 12, 0.7);
    backdrop-filter: blur(6px);
    animation: uiSwalFade 0.35s ease;
}

.ui-swal-card {
    position: relative;
    z-index: 1;
    width: min(420px, 92%);
    border-radius: 22px;
    padding: 26px 24px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(10, 12, 20, 0.95);
    display: grid;
    gap: 12px;
    text-align: center;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35);
    animation: uiSwalIn 0.45s ease;
}

    .ui-swal-card h3 {
        margin: 0;
        color: #f8fafc;
        font-size: 20px;
    }

    .ui-swal-card p {
        margin: 0;
        color: #94a3b8;
        font-size: 13px;
    }

.ui-swal-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    margin: 0 auto;
    color: #0b1120;
    position: relative;
}

    .ui-swal-icon svg {
        width: 28px;
        height: 28px;
    }

.ui-swal-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 6px;
}

.ui-swal-card.success .ui-swal-icon {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.95), rgba(16, 185, 129, 0.85));
    box-shadow: 0 12px 30px rgba(34, 197, 94, 0.25);
}

.ui-swal-card.warning .ui-swal-icon {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.95), rgba(245, 158, 11, 0.85));
    box-shadow: 0 12px 30px rgba(245, 158, 11, 0.25);
}

.ui-swal-card.danger .ui-swal-icon {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.95), rgba(244, 63, 94, 0.85));
    box-shadow: 0 12px 30px rgba(244, 63, 94, 0.25);
}

.ui-swal-card.success {
    border-color: rgba(34, 197, 94, 0.35);
}

.ui-swal-card.warning {
    border-color: rgba(245, 158, 11, 0.35);
}

.ui-swal-card.danger {
    border-color: rgba(244, 63, 94, 0.35);
}

.ui-swal.is-closing .ui-swal-card {
    animation: uiSwalOut 0.25s ease forwards;
}

.ui-swal.is-closing .ui-swal-backdrop {
    animation: uiSwalFadeOut 0.25s ease forwards;
}

@keyframes uiGlowFloat {

    0%, 100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-20px, 14px);
    }
}

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

@keyframes uiDots {

    0%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }

    50% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

@keyframes uiShimmer {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

@keyframes uiProgress {
    0% {
        filter: brightness(0.8);
    }

    50% {
        filter: brightness(1.1);
    }

    100% {
        filter: brightness(0.8);
    }
}

@keyframes uiModalPop {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes uiModalSlide {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes uiModalFloat {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes uiSwalIn {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.9);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes uiSwalOut {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(10px) scale(0.92);
    }
}

@keyframes uiSwalFade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes uiSwalFadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

html[data-theme="light"] .ui-page {
    background: radial-gradient(1000px 600px at 10% 10%, rgba(14, 116, 144, 0.2), transparent 60%), radial-gradient(900px 600px at 90% 10%, rgba(147, 51, 234, 0.18), transparent 55%), linear-gradient(180deg, #f5f7fb 0%, #eef2f8 60%, #f6f8fb 100%);
    color: #0f172a;
}

html[data-theme="light"] .ui-topbar {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(15, 23, 42, 0.1);
}

html[data-theme="light"] .ui-brand,
html[data-theme="light"] .ui-section-head h2,
html[data-theme="light"] .ui-hero h1,
html[data-theme="light"] .ui-card h3 {
    color: #0f172a;
}

html[data-theme="light"] .ui-topbar p,
html[data-theme="light"] .ui-section-head p,
html[data-theme="light"] .ui-hero p,
html[data-theme="light"] .ui-card p,
html[data-theme="light"] .ui-field,
html[data-theme="light"] .ui-accordion-body,
html[data-theme="light"] .ui-tab-panels {
    color: #64748b;
}

html[data-theme="light"] .ui-icon-btn,
html[data-theme="light"] .ui-btn.ghost,
html[data-theme="light"] .ui-tab-triggers button,
html[data-theme="light"] .ui-tabs,
html[data-theme="light"] .ui-accordion-item,
html[data-theme="light"] .ui-card {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .ui-btn.outline {
    border-color: rgba(14, 116, 144, 0.5);
    color: #0e7490;
    background: rgba(14, 116, 144, 0.06);
}

html[data-theme="light"] .ui-btn.glow {
    background: rgba(14, 116, 144, 0.12);
    border-color: rgba(14, 116, 144, 0.45);
    color: #0f172a;
    box-shadow: 0 12px 26px rgba(14, 116, 144, 0.18);
}

html[data-theme="light"] .ui-input {
    background: rgba(248, 250, 252, 0.95);
    border-color: rgba(148, 163, 184, 0.4);
    color: #0f172a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

html[data-theme="light"] .ui-check input {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(148, 163, 184, 0.5);
}

    html[data-theme="light"] .ui-check input::after {
        background: #0e7490;
    }

html[data-theme="light"] .ui-switch-track {
    background: rgba(15, 23, 42, 0.1);
}

html[data-theme="light"] .ui-switch input:checked + .ui-switch-track {
    background: rgba(14, 116, 144, 0.25);
}

html[data-theme="light"] .ui-switch-track::after {
    background: #64748b;
}

html[data-theme="light"] .ui-switch input:checked + .ui-switch-track::after {
    background: #0e7490;
}

html[data-theme="light"] .ui-badge {
    background: #e0f2fe;
    color: #0c4a6e;
    border-color: #7dd3fc;
}

    html[data-theme="light"] .ui-badge.purple {
        background: #f3e8ff;
        color: #6b21a8;
        border-color: #c4b5fd;
    }

    html[data-theme="light"] .ui-badge.green {
        background: #dcfce7;
        color: #166534;
        border-color: #86efac;
    }

html[data-theme="light"] .ui-chip {
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
    border: 1px solid rgba(14, 116, 144, 0.18);
}

html[data-theme="light"] .ui-alert {
    background: rgba(255, 255, 255, 0.95);
    color: #0f172a;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1);
}

    html[data-theme="light"] .ui-alert.success {
        border-color: rgba(34, 197, 94, 0.35);
        color: #166534;
    }

    html[data-theme="light"] .ui-alert.warning {
        border-color: rgba(248, 113, 113, 0.35);
        color: #9f1239;
    }

    html[data-theme="light"] .ui-alert.info {
        border-color: rgba(56, 189, 248, 0.35);
        color: #0c4a6e;
    }

    html[data-theme="light"] .ui-alert.purple {
        border-color: rgba(168, 85, 247, 0.35);
        color: #6b21a8;
    }

    html[data-theme="light"] .ui-alert.gradient {
        color: #0f172a;
    }

    html[data-theme="light"] .ui-alert.glow {
        color: #9f1239;
    }

html[data-theme="light"] .ui-tab-triggers button.is-active {
    border-color: rgba(14, 116, 144, 0.45);
    color: #0f172a;
    box-shadow: 0 0 14px rgba(14, 116, 144, 0.18);
    background: rgba(14, 116, 144, 0.12);
}

html[data-theme="light"] .ui-card.highlight {
    background: linear-gradient(135deg, rgba(14, 116, 144, 0.15), rgba(147, 51, 234, 0.14));
}

html[data-theme="light"] .ui-spinner {
    border-color: rgba(15, 23, 42, 0.12);
    border-top-color: #0e7490;
}

html[data-theme="light"] .ui-dots span {
    background: #0e7490;
}

html[data-theme="light"] .ui-ring {
    background: conic-gradient(from 90deg, rgba(14, 116, 144, 0.9), rgba(147, 51, 234, 0.2), rgba(14, 116, 144, 0.9));
}

html[data-theme="light"] .ui-progress {
    background: rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .ui-skeleton {
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.06), rgba(15, 23, 42, 0.14), rgba(15, 23, 42, 0.06));
}

html[data-theme="light"] .ui-toast,
html[data-theme="light"] .ui-modal-card,
html[data-theme="light"] .ui-hero {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(15, 23, 42, 0.12);
    color: #0f172a;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .ui-swal-card {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(15, 23, 42, 0.12);
    color: #0f172a;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.16);
}

    html[data-theme="light"] .ui-swal-card p {
        color: #64748b;
    }

html[data-theme="light"] .ui-swal-backdrop {
    background: radial-gradient(circle at top, rgba(14, 116, 144, 0.12), transparent 50%), rgba(248, 250, 252, 0.8);
}

html[data-theme="light"] .ui-swal-card.success {
    border-color: rgba(34, 197, 94, 0.35);
}

html[data-theme="light"] .ui-swal-card.warning {
    border-color: rgba(245, 158, 11, 0.35);
}

html[data-theme="light"] .ui-swal-card.danger {
    border-color: rgba(244, 63, 94, 0.35);
}

html[data-theme="light"] .ui-toast.success {
    background: #ecfdf3;
    border-color: #86efac;
    color: #166534;
    box-shadow: 0 16px 30px rgba(34, 197, 94, 0.18);
}

html[data-theme="light"] .ui-toast.info {
    background: #e0f2fe;
    border-color: #7dd3fc;
    color: #0c4a6e;
    box-shadow: 0 16px 30px rgba(56, 189, 248, 0.18);
}

html[data-theme="light"] .ui-toast.purple {
    background: #f5f3ff;
    border-color: #c4b5fd;
    color: #5b21b6;
    box-shadow: 0 16px 30px rgba(147, 51, 234, 0.18);
}

html[data-theme="light"] .ui-modal-card.glass {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(14, 116, 144, 0.25);
}

html[data-theme="light"] .ui-modal-side {
    background: linear-gradient(135deg, rgba(14, 116, 144, 0.16), rgba(147, 51, 234, 0.14));
    color: #0f172a;
}

html[data-theme="light"] .ui-modal-list {
    color: #475569;
}

html[data-theme="light"] .ui-btn.pill {
    background: rgba(147, 51, 234, 0.12);
    border-color: rgba(147, 51, 234, 0.35);
    color: #6b21a8;
}

html[data-theme="light"] .ui-btn.danger {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.35);
    color: #9f1239;
}

html[data-theme="light"] .ui-link {
    color: #0e7490;
}

html[data-theme="light"] .ui-hero-glow {
    opacity: 0.4;
}

@media (max-width: 900px) {
    .ui-topbar-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .ui-topbar-actions {
        justify-content: center;
    }
}

@media (max-width: 700px) {
    .ui-hero {
        padding: 28px;
    }

    .ui-span-2 {
        grid-column: span 1;
    }

    .ui-modal-split {
        grid-template-columns: 1fr;
    }

    .ui-swal-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

[data-theme="light"] .deal-card.purple .deal-badge {
    background: #f3e8ff;
    color: #6b21a8;
    border-color: #c4b5fd;
    box-shadow: 0 8px 18px rgba(126, 34, 206, 0.2);
}

[data-theme="light"] .deal-card.lime .deal-badge {
    background: #dcfce7;
    color: #166534;
    border-color: #86efac;
    box-shadow: 0 8px 18px rgba(22, 101, 52, 0.18);
}

[data-theme="light"] .deal-card.coral .deal-badge {
    background: #ffe4e6;
    color: #9f1239;
    border-color: #fda4af;
    box-shadow: 0 8px 18px rgba(159, 18, 57, 0.18);
}

[data-theme="light"] .deal-card.amber .deal-badge {
    background: #fef3c7;
    color: #92400e;
    border-color: #fcd34d;
    box-shadow: 0 8px 18px rgba(146, 64, 14, 0.18);
}

[data-theme="light"] .newsletter-form input {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(15, 23, 42, 0.12);
    color: #0f172a;
}

    [data-theme="light"] .newsletter-form input::placeholder {
        color: #94a3b8;
    }

[data-theme="light"] .site-footer {
    background: linear-gradient(180deg, #f8fafc, #f1f5f9);
    border-top-color: rgba(15, 23, 42, 0.08);
}

    [data-theme="light"] .site-footer::before {
        background: linear-gradient(90deg, transparent, rgba(14, 116, 144, 0.6), rgba(147, 51, 234, 0.6), transparent);
    }

[data-theme="light"] .footer-grid h3,
[data-theme="light"] .footer-grid h4 {
    color: #0f172a;
}

[data-theme="light"] .footer-grid p,
[data-theme="light"] .footer-grid a,
[data-theme="light"] .footer-bottom {
    color: #64748b;
}

    [data-theme="light"] .footer-grid a:hover {
        color: #0f172a;
    }

[data-theme="light"] .deal-wrap {
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.95)) padding-box, linear-gradient(90deg, #0ea5e9, #7c3aed, #fb923c, #f97316, #f43f5e, #0ea5e9) border-box;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
}

    [data-theme="light"] .deal-wrap::after {
        background: radial-gradient(circle at top, rgba(14, 116, 144, 0.08), transparent 60%);
    }

[data-theme="light"] .neo-mobile-submenu-body {
    scrollbar-color: rgba(14, 116, 144, 0.45) rgba(226, 232, 240, 0.9);
}

    [data-theme="light"] .neo-mobile-submenu-body::-webkit-scrollbar-track {
        background: rgba(226, 232, 240, 0.9);
    }

    [data-theme="light"] .neo-mobile-submenu-body::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, rgba(14, 116, 144, 0.5), rgba(147, 51, 234, 0.45));
        border: 1px solid rgba(148, 163, 184, 0.6);
        box-shadow: 0 0 8px rgba(14, 116, 144, 0.25);
    }

html[data-theme="light"] .ui-btn.ghost {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.12);
    color: #0f172a;
    box-shadow: none;
}

html[data-theme="light"] .ui-tab-triggers button:not(.is-active),
html[data-theme="light"] .ui-accordion-trigger {
    color: #475569;
}

    html[data-theme="light"] .ui-tab-triggers button:not(.is-active):hover,
    html[data-theme="light"] .ui-accordion-trigger:hover {
        color: #0f172a;
    }

html[data-theme="light"] .pd-quick span {
    background: rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.12);
    color: #334155;
}

.pd-rating-select {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 8px;
    color: #cbd5f5;
    font-size: 13px;
}

html[data-theme="light"] .pd-rating-select {
    color: #475569;
}

.rating-stars-input {
    display: flex;
    gap: 6px;
}

.pd-form .rating-star {
    background: transparent !important;
    box-shadow: none !important;
    border: none;
    height: auto;
    color: rgba(255, 255, 255, 0.15);
    font-size: 28px;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    transition: transform 0.2s ease;
}

html[data-theme="light"] .pd-form .rating-star {
    color: rgba(15, 23, 42, 0.15);
}

.pd-form .rating-star:hover {
    transform: scale(1.15);
    background: transparent !important;
    box-shadow: none !important;
}

.rating-star.is-active {
    color: #fbbf24;
    text-shadow: 0 0 12px rgba(251, 191, 36, 0.4);
}

html[data-theme="light"] .rating-star.is-active {
    color: #f59e0b;
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

.rating-stars-input:hover .rating-star {
    color: rgba(255, 255, 255, 0.15);
    text-shadow: none;
}

html[data-theme="light"] .rating-stars-input:hover .rating-star {
    color: rgba(15, 23, 42, 0.15);
}

.rating-stars-input:hover .rating-star.is-hovered {
    color: #fbbf24;
    text-shadow: 0 0 12px rgba(251, 191, 36, 0.4);
}

html[data-theme="light"] .rating-stars-input:hover .rating-star.is-hovered {
    color: #f59e0b;
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

.infinite-scroll-pause {
    grid-column: 1 / -1;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 32px 0;
}

.btn-infinite-more {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(120deg, #06b6d4, #a855f7);
    color: #0b0f1c;
    box-shadow: 0 10px 28px rgba(6, 182, 212, 0.4);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

    .btn-infinite-more::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.45), transparent 60%);
        transform: translateX(-120%);
        animation: ctaSweep 2.8s ease-in-out infinite;
    }

    .btn-infinite-more:hover {
        transform: translateY(-3px) scale(1.03);
        box-shadow: 0 16px 36px rgba(168, 85, 247, 0.55), 0 0 20px rgba(6, 182, 212, 0.5);
    }

    .btn-infinite-more:active {
        transform: translateY(-1px) scale(0.99);
    }

html[data-theme="light"] .btn-infinite-more {
    background: linear-gradient(120deg, #38bdf8, #a78bfa, #fdba74);
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 12px 28px rgba(14, 116, 144, 0.3);
}

    html[data-theme="light"] .btn-infinite-more:hover {
        box-shadow: 0 18px 36px rgba(147, 51, 234, 0.35), 0 0 22px rgba(14, 116, 144, 0.4);
    }

.products-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 20px;
    border-radius: 20px;
    border: 1px dashed rgba(255, 255, 255, 0.16);
    background: rgba(12, 14, 22, 0.6);
    color: #cbd5e1;
    text-align: center;
}

html[data-theme="light"] .products-empty {
    border-color: rgba(15, 23, 42, 0.16);
    background: rgba(255, 255, 255, 0.7);
    color: #334155;
}

.pd-stock.is-low {
    color: #fbbf24;
    font-weight: 600;
}

.pd-stock.is-out {
    color: #f87171;
    font-weight: 600;
}

.pd-btn:disabled,
.pd-btn:disabled:hover {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
    box-shadow: none;
}

.pd-panel p + p {
    margin-top: 10px;
}

/* --- Cart page and add-to-cart form --- */
.pd-add-form {
    display: contents;
}

.pd-added {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(34, 197, 94, 0.35);
    background: rgba(34, 197, 94, 0.12);
    color: #bbf7d0;
    font-size: 13px;
}

    .pd-added a {
        color: #67e8f9;
        margin-right: 6px;
    }

.cart-step {
    display: inline-flex;
    align-items: center;
}

    .cart-step.is-disabled {
        opacity: 0.45;
    }

.cart-item-info h3 a {
    color: inherit;
    text-decoration: none;
}

    .cart-item-info h3 a:hover {
        color: #67e8f9;
    }

/* پس‌زمینه هم باید عوض شود، وگرنه نشان قرمز روی زمینه‌ی فیروزه‌ای می‌نشیند */
.cart-badge.warning {
    background: rgba(248, 113, 113, 0.16);
    border-color: rgba(248, 113, 113, 0.45);
    color: #fca5a5;
}

.cart-guard.warning {
    color: #fca5a5;
}

.cart-qty button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.cart-checkout:disabled,
.cart-checkout:disabled:hover {
    cursor: not-allowed;
    opacity: 0.55;
    transform: none;
    box-shadow: none;
}

.cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 56px 20px;
    border-radius: 20px;
    border: 1px dashed rgba(255, 255, 255, 0.16);
    background: rgba(12, 14, 22, 0.6);
    color: #cbd5e1;
    text-align: center;
}

html[data-theme="light"] .cart-empty {
    border-color: rgba(15, 23, 42, 0.16);
    background: rgba(255, 255, 255, 0.7);
    color: #334155;
}

html[data-theme="light"] .pd-added {
    border-color: rgba(22, 163, 74, 0.35);
    background: rgba(34, 197, 94, 0.14);
    color: #166534;
}

/* --- Login and register pages --- */
/* Both cards share one grid cell: they stay exactly the same size (like two sheets of paper) while the
   stack still grows to fit the taller form. */
.auth-stack {
    display: grid;
}

.auth-card {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
}

a.auth-switch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.auth-error {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(248, 113, 113, 0.4);
    background: rgba(248, 113, 113, 0.12);
    color: #fca5a5;
    font-size: 13px;
}

    .auth-error p {
        margin: 0;
    }

.auth-form .validation-message {
    color: #fca5a5;
    font-size: 12px;
    margin-top: -10px;
}

.auth-form .invalid {
    border-color: rgba(248, 113, 113, 0.6);
}

html[data-theme="light"] .auth-error {
    border-color: rgba(220, 38, 38, 0.35);
    background: rgba(248, 113, 113, 0.15);
    color: #b91c1c;
}

/* The sign-out button sits inside a form but must look like the other menu items */
.neo-profile-logout {
    display: contents;
}

button.neo-profile-item {
    width: 100%;
    background: none;
    border: none;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

/* --- Auth page performance ---
   The background is built from large blurred layers and an animated SVG. Filters on moving elements are
   re-rendered every frame, which is what made this page stutter. */

/* Each moving layer gets its own GPU layer, so its blur is rasterized once instead of per frame */
.auth-page::before,
.auth-page::after,
.auth-orbits::before,
.auth-orbits::after,
.starfield,
.constellation-group {
    will-change: transform;
}

/* Keeps the browser from repainting the whole page for the background animation */
.auth-orbits {
    contain: layout paint;
}

/* Two drop-shadows over the whole animated SVG, plus one per triangle, were the most expensive part.
   The glow is kept with brighter strokes instead. */
.auth-constellation {
    filter: none;
}

.tri,
.tri-2,
.tri-4,
.tri-6 {
    filter: none;
    stroke-width: 1.5;
}

.tri {
    stroke: rgba(255, 255, 255, 0.3);
}

    .tri-2,
    .tri-4,
    .tri-6 {
        stroke: rgba(196, 181, 253, 0.38);
    }

/* A slightly lighter backdrop blur: the same frosted look, but cheaper while the cards move */
.auth-card {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

@media (prefers-reduced-motion: reduce) {
    .auth-page::before,
    .auth-page::after,
    .auth-orbits::before,
    .auth-orbits::after,
    .starfield,
    .starfield .star,
    .constellation-group,
    .tri,
    .auth-card {
        animation: none !important;
        transition: none !important;
    }
}

/* --- Header account button --- */
.neo-avatar svg {
    width: 20px;
    height: 20px;
    margin: auto;
    color: #cbd5f5;
}

.neo-avatar-initial {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-weight: 700;
    color: #0b1120;
    background: linear-gradient(120deg, #22d3ee, #a855f7);
}

/* The checkout button is a link while the visitor is not signed in */
a.cart-checkout {
    display: grid;
    place-items: center;
    text-decoration: none;
}

.neo-mobile-logout {
    display: contents;
}

/* --- Signing in with a mobile number --- */

/* Two ways into the same account, sitting at the top of the sign-in card */
.auth-modes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 5px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(8, 10, 16, 0.6);
}

.auth-mode {
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.3s ease, background 0.3s ease;
}

    .auth-mode:hover {
        color: #e0f2fe;
    }

    .auth-mode.is-active {
        color: #050505;
        background: linear-gradient(120deg, #22d3ee, #a855f7);
    }

.auth-hint {
    font-size: 12px;
    color: #94a3b8;
    text-align: center;
}

.auth-note {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(34, 211, 238, 0.35);
    background: rgba(34, 211, 238, 0.1);
    color: #a5f3fc;
    font-size: 13px;
}

.auth-phone {
    color: #e0f2fe;
    font-weight: 700;
}

/* The verification screen stands alone: one card, no flip */
.auth-panel-single {
    width: min(440px, 100%);
    margin-inline: auto;
}

.auth-card-verify {
    text-align: center;
}

    .auth-card-verify .auth-form,
    .auth-card-verify .auth-field {
        text-align: right;
    }

/* The ring empties as the code runs out; only stroke-dashoffset moves, so it stays cheap */
.auth-timer {
    position: relative;
    width: 132px;
    height: 132px;
    margin: 2px auto;
    display: grid;
    place-content: center;
    gap: 2px;
    text-align: center;
}

.auth-timer-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.auth-timer-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 6;
}

.auth-timer-progress {
    fill: none;
    stroke: #22d3ee;
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.3s linear, stroke 0.3s ease;
}

.auth-timer-value {
    font-size: 26px;
    font-weight: 700;
    color: #f8fafc;
    direction: ltr;
}

.auth-timer-label {
    font-size: 11px;
    color: #94a3b8;
}

.auth-timer.is-expired .auth-timer-progress {
    stroke: rgba(248, 113, 113, 0.75);
}

.auth-timer.is-expired .auth-timer-value {
    font-size: 16px;
    color: #fca5a5;
}

/* One wide box with spaced digits: it autofills from the SMS and needs no extra scripting */
.auth-field-code input {
    height: 58px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.6em;
    text-indent: 0.6em;
}

.auth-resend {
    display: grid;
}

.auth-link-btn {
    border: none;
    background: none;
    color: #7dd3fc;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px;
}

    .auth-link-btn:disabled,
    .auth-link-btn.is-waiting {
        color: #64748b;
        cursor: default;
    }

.auth-back {
    font-size: 12px;
    color: #94a3b8;
    text-decoration: none;
}

    .auth-back:hover {
        color: #e0f2fe;
    }

/* --- Pop-up asked for right where the order is placed --- */
.neo-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 20px;
}

/* No script needed to hold the page still while the pop-up is open */
html:has(.neo-modal) {
    overflow: hidden;
}

.neo-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.neo-modal-panel {
    position: relative;
    width: min(440px, 100%);
    padding: 28px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(140deg, rgba(15, 23, 42, 0.96), rgba(9, 11, 18, 0.98));
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    display: grid;
    gap: 14px;
    animation: neoModalIn 0.28s ease;
}

@keyframes neoModalIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.neo-modal-panel h2 {
    margin: 0;
    font-size: 20px;
    color: #f8fafc;
}

.neo-modal-lead {
    margin: 0;
    font-size: 13px;
    color: #94a3b8;
    line-height: 1.9;
}

.neo-modal-close {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5f5;
}

    .neo-modal-close svg {
        width: 16px;
        height: 16px;
    }

.neo-modal-form {
    display: grid;
    gap: 12px;
}

.neo-modal-actions {
    display: grid;
    gap: 10px;
    margin-top: 4px;
}

.neo-modal-cancel {
    text-align: center;
    font-size: 12px;
    color: #94a3b8;
    text-decoration: none;
}

/* --- Profile --- */

/* Stands in for a picture that has not been uploaded yet */
.profile-avatar-initial {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 40px;
    font-weight: 700;
    color: #0b1120;
    background: linear-gradient(120deg, #22d3ee, #a855f7);
}

.profile-phone {
    direction: ltr;
    text-align: right;
    letter-spacing: 0.08em;
}

.profile-tags span.is-warning {
    border-color: rgba(251, 191, 36, 0.45);
    background: rgba(251, 191, 36, 0.12);
    color: #fcd34d;
}

.profile-edit-card {
    padding: 4px 0;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(10, 12, 20, 0.7);
}

    .profile-edit-card .section-head {
        padding: 18px 20px 0;
    }

    /* One button, so it should not stretch across the whole row */
    .profile-edit-card .profile-edit-actions {
        grid-template-columns: minmax(160px, 220px);
    }

    .profile-edit-card input:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

.profile-field-note {
    font-size: 11px;
    color: #64748b;
}

.profile-alert-line {
    margin: 0;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid rgba(251, 191, 36, 0.4);
    background: rgba(251, 191, 36, 0.1);
    color: #fcd34d;
    font-size: 13px;
}

.profile-saved {
    margin: 0;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.12);
    color: #86efac;
    font-size: 13px;
}

.profile-menu a.profile-link,
.profile-menu span.profile-link {
    display: grid;
    place-items: center;
    text-decoration: none;
}

@media (max-width: 860px) {
    .profile-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .profile-card {
        grid-template-columns: minmax(0, 1fr);
        text-align: center;
        justify-items: center;
    }

    .profile-phone {
        text-align: center;
    }
}

/* --- Light theme for the blocks above --- */
html[data-theme="light"] .auth-modes {
    border-color: rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.7);
}

html[data-theme="light"] .auth-mode {
    color: #475569;
}

html[data-theme="light"] .auth-timer-track {
    stroke: rgba(15, 23, 42, 0.1);
}

html[data-theme="light"] .auth-timer-value {
    color: #0f172a;
}

html[data-theme="light"] .auth-note {
    background: rgba(8, 145, 178, 0.12);
    color: #0e7490;
}

html[data-theme="light"] .neo-modal-panel {
    border-color: rgba(15, 23, 42, 0.12);
    background: linear-gradient(140deg, #ffffff, #f1f5f9);
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.18);
}

    html[data-theme="light"] .neo-modal-panel h2 {
        color: #0f172a;
    }

html[data-theme="light"] .neo-modal-close {
    border-color: rgba(15, 23, 42, 0.12);
    color: #334155;
}

html[data-theme="light"] .profile-edit-card {
    border-color: rgba(15, 23, 42, 0.1);
    background: rgba(255, 255, 255, 0.9);
}

    html[data-theme="light"] .profile-edit-card .section-head h2 {
        color: #0f172a;
    }

/* --- Profile page: the template's card, carrying the fields this shop actually has --- */

/* Buttons in the profile are links as well, so they keep the same look */
a.profile-btn {
    display: grid;
    place-items: center;
    text-decoration: none;
}

/* The template closed this panel with max-height, which needs a guessed pixel number and clips a
   longer form. A 0fr -> 1fr grid row animates the same way and always ends at the real height. */
.profile-edit {
    display: grid;
    grid-template-rows: 0fr;
    max-height: none;
    transition: grid-template-rows 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
}

    .profile-edit.is-open {
        grid-template-rows: 1fr;
        max-height: none;
    }

    .profile-edit > * {
        min-height: 0;
        overflow: hidden;
    }

.profile-edit-message {
    margin: 20px 20px 0;
}

.profile-logout {
    display: contents;
}

.profile-link.danger {
    color: #fca5a5;
}

    .profile-link.danger:hover {
        border-color: rgba(248, 113, 113, 0.45);
        color: #fecaca;
    }

/* Ordering arrives with the checkout step; until then the section says so plainly */
.profile-order-empty {
    display: grid;
    justify-items: center;
    gap: 14px;
    padding: 28px;
    border-radius: 18px;
    border: 1px dashed rgba(255, 255, 255, 0.14);
    background: rgba(10, 12, 20, 0.6);
    color: #94a3b8;
}

    .profile-order-empty p {
        margin: 0;
    }

    .profile-order-empty .profile-btn {
        padding-inline: 22px;
    }

html[data-theme="light"] .profile-order-empty {
    border-color: rgba(15, 23, 42, 0.16);
    background: rgba(255, 255, 255, 0.7);
    color: #475569;
}

/* --- Checkout, address book and orders --- */

.checkout-form {
    display: grid;
    gap: 16px;
}

/* A card inside a card would double the neon border, so the inner one stays flat */
.checkout-payment {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    box-shadow: none;
}

    .checkout-payment::before {
        display: none;
    }

.checkout-empty {
    margin: 0;
    padding: 18px;
    border-radius: 16px;
    border: 1px dashed rgba(255, 255, 255, 0.16);
    color: #94a3b8;
    text-align: center;
}

/* The address book lists cards rather than choices, so they do not look clickable */
.address-card.is-static {
    cursor: default;
}

    .address-card.is-static:hover {
        transform: none;
    }

.address-default {
    margin-inline-start: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-style: normal;
    color: #0b1120;
    background: linear-gradient(120deg, #22d3ee, #a855f7);
}

.address-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

    .address-actions .neo-btn {
        height: 36px;
        padding: 0 14px;
        font-size: 12px;
    }

    /* Each action posts on its own, and the form itself should not take up space */
    .address-actions form {
        display: contents;
    }

.neo-btn.danger {
    border-color: rgba(248, 113, 113, 0.4);
    background: rgba(248, 113, 113, 0.12);
    color: #fca5a5;
}

    .neo-btn.danger:hover {
        border-color: rgba(248, 113, 113, 0.7);
        color: #fecaca;
    }

/* An order row is a link to its own page */
.profile-order-card.is-link {
    text-decoration: none;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

    .profile-order-card.is-link:hover {
        transform: translateY(-2px);
        border-color: rgba(34, 211, 238, 0.45);
    }

.profile-order-meta strong {
    color: #f8fafc;
}

/* The quantity on a placed order is a fact, not a control */
.cart-qty.is-static {
    border: none;
    background: none;
    padding: 0;
    color: #cbd5f5;
    font-size: 13px;
}

.order-address {
    margin: 0;
    font-size: 14px;
    line-height: 2;
}

html[data-theme="light"] .checkout-empty {
    border-color: rgba(15, 23, 42, 0.16);
    color: #475569;
}

html[data-theme="light"] .checkout-payment {
    border-color: rgba(15, 23, 42, 0.1);
    background: rgba(255, 255, 255, 0.6);
}

html[data-theme="light"] .profile-order-meta strong {
    color: #0f172a;
}

/* --- Comments under a product --- */

/* The template laid reviews out as a sideways track; threads with answers read better as a list */
.pd-comment-list {
    display: grid;
    gap: 14px;
    margin-bottom: 22px;
}

.pd-comment-list .pd-review-card {
    width: auto;
    min-width: 0;
    display: grid;
    gap: 10px;
}

.pd-comment-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

    .pd-comment-head strong {
        color: #f8fafc;
    }

.pd-comment-badge {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    color: #86efac;
    background: rgba(34, 197, 94, 0.14);
    border: 1px solid rgba(34, 197, 94, 0.35);
}

.pd-comment-date {
    margin-inline-start: auto;
    font-size: 11px;
    color: #64748b;
}

.pd-comment-reply {
    justify-self: start;
    font-size: 12px;
    font-weight: 600;
    color: #7dd3fc;
    text-decoration: none;
}

    .pd-comment-reply:hover {
        color: #bae6fd;
    }

/* Answers sit under the comment they belong to, one level deep and no further */
.pd-comment-replies {
    display: grid;
    gap: 10px;
    padding-inline-start: 16px;
    border-inline-start: 2px solid rgba(34, 211, 238, 0.25);
}

.pd-comment-reply-card {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.pd-comment-empty {
    margin: 0 0 22px;
    padding: 18px;
    border-radius: 16px;
    border: 1px dashed rgba(255, 255, 255, 0.16);
    color: #94a3b8;
    text-align: center;
}

.pd-comment-more {
    display: flex;
    justify-content: center;
    margin-bottom: 22px;
}

.pd-comment-form {
    display: grid;
    gap: 12px;
}

    /* The reply form appears inside the card it answers, so it steps back from the thread */
    .pd-comment-form.is-reply {
        margin-top: 4px;
        padding: 14px;
        border-radius: 14px;
        background: rgba(34, 211, 238, 0.06);
        border: 1px solid rgba(34, 211, 238, 0.25);
    }

.pd-comment-form-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .pd-comment-form-head h3 {
        margin: 0;
        font-size: 16px;
        color: #f8fafc;
    }

.pd-comment-cancel {
    font-size: 12px;
    color: #94a3b8;
    text-decoration: none;
}

.pd-comment-guest {
    margin: 0;
    color: #94a3b8;
    font-size: 14px;
}

    .pd-comment-guest a {
        color: #7dd3fc;
        font-weight: 600;
    }

/* --- The heart that marks a product --- */
.neo-favorite {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: grid;
}

.neo-favorite-btn {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(8, 10, 16, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #cbd5f5;
    cursor: pointer;
    transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

    .neo-favorite-btn svg {
        width: 17px;
        height: 17px;
    }

    .neo-favorite-btn:hover {
        transform: translateY(-1px);
        border-color: rgba(244, 114, 182, 0.55);
        color: #f9a8d4;
    }

    /* A marked product wears a filled heart */
    .neo-favorite-btn.is-active {
        color: #f472b6;
        border-color: rgba(244, 114, 182, 0.55);
    }

        .neo-favorite-btn.is-active svg {
            fill: currentColor;
        }

/* On the product page the heart belongs in the flow of the buy card, not floating over it */
.pd-favorite {
    display: flex;
    justify-content: flex-start;
}

    .pd-favorite .neo-favorite {
        position: static;
    }

html[data-theme="light"] .pd-comment-head strong,
html[data-theme="light"] .pd-comment-form-head h3 {
    color: #0f172a;
}

html[data-theme="light"] .pd-comment-reply-card {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(15, 23, 42, 0.1);
}

html[data-theme="light"] .pd-comment-empty {
    border-color: rgba(15, 23, 42, 0.16);
    color: #475569;
}

html[data-theme="light"] .neo-favorite-btn {
    border-color: rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.8);
    color: #475569;
}

/* --- Discount code --- */

/* What the shop says back about the code that was typed */
.cart-coupon-message {
    margin: 8px 0 0;
    font-size: 12px;
}

    .cart-coupon-message.is-ok {
        color: #86efac;
    }

    /* یک خط ریز دیده نمی‌شد؛ حالا کادر و آیکون دارد */
    .cart-coupon-message.is-error {
        display: flex;
        align-items: center;
        gap: 7px;
        margin-top: 10px;
        padding: 9px 12px;
        border-radius: 11px;
        border: 1px solid rgba(248, 113, 113, 0.45);
        background: rgba(248, 113, 113, 0.12);
        color: #fca5a5;
        font-size: 12px;
        line-height: 1.8;
    }

        .cart-coupon-message.is-error::before {
            content: "!";
            flex: none;
            width: 17px;
            height: 17px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            font-size: 11px;
            font-weight: 700;
            background: rgba(248, 113, 113, 0.2);
            border: 1px solid rgba(248, 113, 113, 0.5);
        }

    .cart-coupon-message.is-ok {
        display: flex;
        align-items: center;
        gap: 7px;
        margin-top: 10px;
        padding: 9px 12px;
        border-radius: 11px;
        border: 1px solid rgba(34, 197, 94, 0.4);
        background: rgba(34, 197, 94, 0.12);
        font-size: 12px;
    }

/* Once a code is on the cart, the box shows the code itself instead of an empty field */
.cart-coupon-applied {
    display: grid;
    place-items: center;
    height: 42px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px dashed rgba(34, 211, 238, 0.5);
    background: rgba(34, 211, 238, 0.1);
    color: #a5f3fc;
    font-weight: 700;
    letter-spacing: 0.08em;
}

html[data-theme="light"] .cart-coupon-applied {
    border-color: rgba(8, 145, 178, 0.45);
    background: rgba(8, 145, 178, 0.1);
    color: #0e7490;
}

/* =========================================================================
   خطاهای اعتبارسنجی - یک شکل در همه‌ی فرم‌های سایت
   ========================================================================= */

.validation-message,
.validation-errors li,
.field-error {
    color: #f87171;
    font-size: 12px;
    line-height: 1.7;
}

.validation-message {
    margin: -6px 0 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

    /* نشانه‌ی کوچک قرمز، تا خطا حتی با یک نگاه گذرا هم دیده شود */
    .validation-message:not(:empty)::before {
        content: "!";
        flex: none;
        width: 15px;
        height: 15px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        font-size: 10px;
        font-weight: 700;
        color: #fca5a5;
        background: rgba(248, 113, 113, 0.16);
        border: 1px solid rgba(248, 113, 113, 0.45);
    }

    .validation-message:empty {
        display: none;
    }

.validation-errors {
    margin: 0;
    padding-inline-start: 18px;
}

/* خود فیلد هم قرمز می‌شود، نه فقط پیام زیرش */
input.invalid,
textarea.invalid,
select.invalid,
.neo-form .invalid,
.auth-form .invalid,
.checkout-card .invalid {
    border-color: rgba(248, 113, 113, 0.7);
    box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.25), 0 0 14px rgba(248, 113, 113, 0.12);
}

    input.invalid:focus,
    textarea.invalid:focus,
    select.invalid:focus {
        outline: none;
        border-color: #f87171;
        box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.45), 0 0 18px rgba(248, 113, 113, 0.2);
    }

/* فیلدی که درست پر شده، یک نشانه‌ی سبز ملایم می‌گیرد */
input.is-valid,
textarea.is-valid,
select.is-valid {
    border-color: rgba(34, 197, 94, 0.45);
}

html[data-theme="light"] .validation-message,
html[data-theme="light"] .validation-errors li,
html[data-theme="light"] .field-error {
    color: #dc2626;
}

html[data-theme="light"] .validation-message:not(:empty)::before {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.4);
}

/* =========================================================================
   پرداخت ناموفق و لغو شده - قرمز، تا با «در انتظار پرداخت» اشتباه نشود
   ========================================================================= */

.profile-order-meta .status.danger {
    background: rgba(248, 113, 113, 0.16);
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.4);
}

/* لغو کردن یک انتخاب است نه خطا، پس خاکستری می‌ماند و با «ناموفق» قاطی نمی‌شود */
.profile-order-meta .status.muted {
    background: rgba(148, 163, 184, 0.14);
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.32);
}

.profile-error-line {
    margin: 0;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid rgba(248, 113, 113, 0.45);
    background: rgba(248, 113, 113, 0.12);
    color: #fca5a5;
    font-size: 13px;
}

/* عنوان صفحه‌ی سفارش، خودِ وضعیت است؛ پس رنگ همان وضعیت را می‌گیرد */
.profile-status-title.success {
    color: #86efac;
}

.profile-status-title.warning {
    color: #fde68a;
}

.profile-status-title.danger {
    color: #f87171;
    text-shadow: 0 0 26px rgba(248, 113, 113, 0.35);
}

.profile-status-title.muted {
    color: #cbd5e1;
}

.profile-muted-line {
    margin: 0;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.32);
    background: rgba(148, 163, 184, 0.1);
    color: #cbd5e1;
    font-size: 13px;
}

html[data-theme="light"] .profile-status-title.success {
    color: #15803d;
}

html[data-theme="light"] .profile-status-title.warning {
    color: #b45309;
}

html[data-theme="light"] .profile-status-title.danger {
    color: #b91c1c;
    text-shadow: none;
}

html[data-theme="light"] .profile-status-title.muted {
    color: #475569;
}

html[data-theme="light"] .profile-muted-line {
    border-color: rgba(100, 116, 139, 0.3);
    background: rgba(148, 163, 184, 0.14);
    color: #334155;
}

html[data-theme="light"] .profile-error-line {
    border-color: rgba(220, 38, 38, 0.35);
    background: rgba(248, 113, 113, 0.14);
    color: #b91c1c;
}

/* =========================================================================
   خبرنامه‌ی فوتر
   ========================================================================= */

/* فیلد و پیام خطایش با هم یک ستون می‌شوند تا دکمه کنارشان بماند */
.newsletter-field {
    display: grid;
    gap: 6px;
    align-content: start;
}

    .newsletter-field .validation-message {
        margin: 0;
    }

.newsletter-feedback {
    flex-basis: 100%;
    margin: 0;
    font-size: 12px;
}

.newsletter-done,
.newsletter-error {
    margin: 0;
    font-size: 12px;
}

.newsletter-done {
    color: #86efac;
}

.newsletter-error {
    color: #fca5a5;
}

.newsletter-form input.invalid {
    border-color: rgba(248, 113, 113, 0.7);
}

/* =========================================================================
   پیشنهادهای جستجو
   ========================================================================= */

.neo-suggest {
    position: absolute;
    top: calc(100% + 12px);
    inset-inline: 0;
    z-index: 60;
    max-height: 380px;
    overflow-y: auto;
    padding: 6px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(10, 12, 20, 0.96);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(34, 211, 238, 0.12);
}

    .neo-suggest[hidden] {
        display: none;
    }

.neo-suggest-item {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    text-decoration: none;
    color: #e2e8f0;
    transition: background 0.2s ease;
}

    .neo-suggest-item img {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        object-fit: cover;
        background: rgba(255, 255, 255, 0.04);
    }

    .neo-suggest-item:hover,
    .neo-suggest-item.is-active {
        background: rgba(34, 211, 238, 0.12);
    }

.neo-suggest-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

    .neo-suggest-text strong {
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .neo-suggest-text small {
        font-size: 11px;
        color: #64748b;
    }

.neo-suggest mark {
    background: none;
    color: #22d3ee;
    font-weight: 700;
}

.neo-suggest-price {
    display: grid;
    justify-items: end;
    gap: 3px;
    font-size: 12px;
    color: #cbd5f5;
    white-space: nowrap;
}

.neo-suggest-off {
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 10px;
    color: #fca5a5;
    background: rgba(248, 113, 113, 0.14);
    border: 1px solid rgba(248, 113, 113, 0.3);
}

.neo-suggest-all {
    display: block;
    margin-top: 4px;
    padding: 10px;
    border-radius: 12px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    color: #7dd3fc;
    background: rgba(255, 255, 255, 0.03);
}

    .neo-suggest-all:hover,
    .neo-suggest-all.is-active {
        background: rgba(34, 211, 238, 0.12);
    }

.neo-suggest-empty {
    margin: 0;
    padding: 16px 12px;
    text-align: center;
    font-size: 12px;
    color: #94a3b8;
}

    .neo-suggest-empty a {
        color: #7dd3fc;
        font-weight: 600;
    }

html[data-theme="light"] .neo-suggest {
    border-color: rgba(15, 23, 42, 0.1);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .neo-suggest-item {
    color: #0f172a;
}

html[data-theme="light"] .neo-suggest-price {
    color: #334155;
}

/* روی موبایل خود باکس جستجو یک دایره‌ی ۴۰ پیکسلی است و ورودی زیر آن شناور می‌شود؛
   فهرست هم باید زیر همان ورودی بنشیند، نه زیر دایره */
@media (max-width: 640px) {
    .neo-suggest {
        top: calc(100% + 64px);
        inset-inline: auto;
        left: 50%;
        transform: translateX(-50%);
        width: min(92vw, 360px);
    }
}

@media (max-width: 860px) {
    .neo-suggest {
        max-height: 60vh;
    }

    .neo-suggest-item {
        grid-template-columns: 40px 1fr;
    }

        .neo-suggest-item img {
            width: 40px;
            height: 40px;
        }

    .neo-suggest-price {
        grid-column: 2;
        justify-items: start;
        grid-auto-flow: column;
        align-items: center;
        gap: 6px;
    }
}

/* =========================================================================
   پیام‌های گوشه‌ی صفحه
   ========================================================================= */

.neo-toast-holder {
    position: fixed;
    inset-inline-start: 18px;
    bottom: 18px;
    z-index: 9000;
    display: grid;
    gap: 10px;
    width: min(360px, calc(100vw - 36px));
    pointer-events: none;
}

.neo-toast {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 10px;
    padding: 13px 15px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(12, 14, 22, 0.97);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
    color: #e2e8f0;
    font-size: 13px;
    line-height: 1.8;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.26s ease, transform 0.26s ease;
}

    .neo-toast.is-open {
        opacity: 1;
        transform: translateY(0);
    }

    .neo-toast.is-leaving {
        opacity: 0;
        transform: translateY(8px);
    }

    .neo-toast svg {
        width: 18px;
        height: 18px;
        margin-top: 2px;
        flex: none;
    }

.neo-toast-body {
    min-width: 0;
    word-break: break-word;
}

.neo-toast-close {
    border: none;
    background: none;
    color: inherit;
    opacity: 0.6;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}

    .neo-toast-close:hover {
        opacity: 1;
    }

/* پیام مهم تا وقتی تاییدش نکنند نمی‌رود */
.neo-toast-ack {
    align-self: center;
    padding: 6px 12px;
    border-radius: 9px;
    border: 1px solid currentColor;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

    .neo-toast-ack:hover {
        background: rgba(255, 255, 255, 0.08);
    }

.neo-toast-success {
    border-color: rgba(34, 197, 94, 0.4);
    color: #86efac;
}

.neo-toast-error {
    border-color: rgba(248, 113, 113, 0.45);
    color: #fca5a5;
}

.neo-toast-warning {
    border-color: rgba(251, 191, 36, 0.4);
    color: #fde68a;
}

.neo-toast-info {
    border-color: rgba(56, 189, 248, 0.4);
    color: #bae6fd;
}

html[data-theme="light"] .neo-toast {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
    color: #0f172a;
}

html[data-theme="light"] .neo-toast-success {
    color: #15803d;
}

html[data-theme="light"] .neo-toast-error {
    color: #b91c1c;
}

html[data-theme="light"] .neo-toast-warning {
    color: #b45309;
}

html[data-theme="light"] .neo-toast-info {
    color: #0369a1;
}

/* متن درون صفحه؛ وقتی جاوااسکریپت پیام را به گوشه برد، دیگر لازم نیست */
.neo-notice {
    margin: 0;
    padding: 11px 15px;
    border-radius: 12px;
    font-size: 13px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(148, 163, 184, 0.1);
    color: #cbd5e1;
}

    .neo-notice.is-handed-over {
        display: none;
    }

.neo-notice-success {
    border-color: rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.12);
    color: #86efac;
}

.neo-notice-error {
    border-color: rgba(248, 113, 113, 0.45);
    background: rgba(248, 113, 113, 0.12);
    color: #fca5a5;
}

.neo-notice-warning {
    border-color: rgba(251, 191, 36, 0.4);
    background: rgba(251, 191, 36, 0.12);
    color: #fde68a;
}

.neo-notice-info {
    border-color: rgba(56, 189, 248, 0.4);
    background: rgba(56, 189, 248, 0.1);
    color: #bae6fd;
}

@media (max-width: 640px) {
    .neo-toast-holder {
        inset-inline: 12px;
        bottom: 12px;
        width: auto;
    }
}

/* =========================================================================
   روند سفارش (صفحه‌ی سفارش مشتری)
   ========================================================================= */

.order-progress {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.order-step {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 8px;
    text-align: center;
    padding-top: 6px;
}

    /* خطی که هر مرحله را به مرحله‌ی قبل وصل می‌کند */
    .order-step::before {
        content: "";
        position: absolute;
        top: 24px;
        inset-inline-end: 50%;
        width: 100%;
        height: 2px;
        background: rgba(148, 163, 184, 0.22);
    }

    .order-step:first-child::before {
        display: none;
    }

    .order-step.is-done::before,
    .order-step.is-current::before {
        background: linear-gradient(90deg, #22d3ee, #a855f7);
    }

.order-step-dot {
    position: relative;
    z-index: 1;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid rgba(148, 163, 184, 0.3);
    background: #0b0f1a;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

    .order-step-dot svg {
        width: 17px;
        height: 17px;
    }

.order-step.is-done .order-step-dot {
    border-color: transparent;
    background: linear-gradient(120deg, #06b6d4, #a855f7);
    color: #06111f;
}

.order-step.is-current .order-step-dot {
    border-color: #22d3ee;
    color: #22d3ee;
    box-shadow: 0 0 0 5px rgba(34, 211, 238, 0.14);
}

.order-step-text strong {
    display: block;
    font-size: 13px;
    color: #94a3b8;
}

.order-step.is-done .order-step-text strong,
.order-step.is-current .order-step-text strong {
    color: #f8fafc;
}

.order-step-text small {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    color: #64748b;
    line-height: 1.7;
}

.order-progress.is-stopped {
    display: block;
}

.order-progress-stopped {
    margin: 0;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px dashed rgba(148, 163, 184, 0.35);
    color: #94a3b8;
    font-size: 13px;
}

html[data-theme="light"] .order-step-dot {
    background: #ffffff;
    color: #94a3b8;
}

html[data-theme="light"] .order-step.is-done .order-step-text strong,
html[data-theme="light"] .order-step.is-current .order-step-text strong {
    color: #0f172a;
}

@media (max-width: 720px) {
    .order-progress {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        gap: 0;
    }

    .order-step {
        grid-template-columns: 36px 1fr;
        justify-items: start;
        text-align: start;
        align-items: center;
        gap: 12px;
        padding: 9px 0;
    }

        /* روی موبایل خط، عمودی می‌شود */
        .order-step::before {
            top: auto;
            bottom: 50%;
            inset-inline-end: auto;
            inset-inline-start: 17px;
            width: 2px;
            height: 100%;
        }

    .order-step-text small {
        font-size: 11px;
    }
}

/* روش ارسال در تسویه */
.payment-note {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: #64748b;
    line-height: 1.8;
}

/* جای ثابت پیام خطا: چه خطایی باشد چه نباشد، ارتفاعش عوض نمی‌شود */
.field-error-slot {
    display: block;
    /* Exactly one line of the message, icon included, so showing one changes no height */
    min-height: 20px;
    margin-top: -2px;
}

    .field-error-slot .validation-message {
        margin: 0;
    }

/* در فرم‌های ورود، پیام سرور از قبل با فاصله‌ی منفی چیده شده بود */
.auth-form .field-error-slot {
    margin-top: -8px;
}

/* =========================================================================
   صفحه‌ی ۴۰۴
   ========================================================================= */

.notfound {
    min-height: 70vh;
    display: grid;
    place-items: center;
    padding: 60px 0 90px;
}

.notfound-inner {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    align-items: center;
    gap: 46px;
}

/* عدد ۴۰۴ با هاله‌ی نئونی، همان زبان بصری بقیه‌ی سایت */
.notfound-art {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 230px;
}

.notfound-code {
    position: relative;
    z-index: 2;
    font-size: clamp(88px, 16vw, 140px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 4px;
    background: linear-gradient(120deg, #22d3ee, #a855f7 60%, #f472b6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 26px rgba(34, 211, 238, 0.35));
}

.notfound-glow {
    position: absolute;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.22), transparent 68%);
    filter: blur(6px);
}

.notfound-ring {
    position: absolute;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    border: 1px dashed rgba(168, 85, 247, 0.4);
    animation: notfoundSpin 22s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .notfound-ring {
        animation: none;
    }
}

.notfound-body {
    display: grid;
    gap: 14px;
    justify-items: start;
}

.notfound-kicker {
    padding: 5px 13px;
    border-radius: 999px;
    border: 1px solid rgba(34, 211, 238, 0.35);
    background: rgba(34, 211, 238, 0.1);
    color: #67e8f9;
    font-size: 11px;
}

.notfound-body h1 {
    margin: 0;
    font-size: clamp(24px, 4vw, 34px);
}

.notfound-body > p {
    margin: 0;
    max-width: 52ch;
    color: #94a3b8;
    font-size: 14px;
    line-height: 2.1;
}

.notfound-search {
    display: flex;
    gap: 8px;
    width: min(100%, 440px);
    margin-top: 4px;
}

    .notfound-search input {
        flex: 1;
        min-width: 0;
        padding: 12px 16px;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(12, 14, 22, 0.75);
        color: #e2e8f0;
        font: inherit;
        font-size: 13px;
        outline: none;
    }

        .notfound-search input:focus {
            border-color: rgba(34, 211, 238, 0.55);
        }

    .notfound-search button {
        padding: 12px 22px;
        border: none;
        border-radius: 14px;
        background: linear-gradient(120deg, #06b6d4, #a855f7);
        color: #06111f;
        font: inherit;
        font-weight: 700;
        font-size: 13px;
        cursor: pointer;
    }

.notfound-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.notfound-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    font-size: 12px;
    color: #64748b;
}

    .notfound-links a {
        padding: 5px 12px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #cbd5e1;
        text-decoration: none;
        transition: border-color 0.25s ease, color 0.25s ease;
    }

        .notfound-links a:hover {
            border-color: rgba(34, 211, 238, 0.5);
            color: #67e8f9;
        }

/* همان صفحه، با رنگ هشدار: برای خطای سمت سرور */
.notfound-error .notfound-code {
    background: linear-gradient(120deg, #fb923c, #f43f5e 60%, #a855f7);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 26px rgba(244, 63, 94, 0.3));
}

.notfound-error .notfound-glow {
    background: radial-gradient(circle, rgba(244, 63, 94, 0.2), transparent 68%);
}

.notfound-error .notfound-ring {
    border-color: rgba(251, 146, 60, 0.4);
}

.notfound-error .notfound-kicker {
    border-color: rgba(244, 63, 94, 0.35);
    background: rgba(244, 63, 94, 0.1);
    color: #fda4af;
}

.notfound-trace {
    margin: 0;
    font-size: 12px;
    color: #64748b;
}

    .notfound-trace code {
        padding: 2px 8px;
        border-radius: 7px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.04);
        font-size: 11px;
        color: #cbd5e1;
    }

html[data-theme="light"] .notfound-error .notfound-kicker {
    border-color: rgba(190, 18, 60, 0.3);
    background: rgba(190, 18, 60, 0.08);
    color: #be123c;
}

html[data-theme="light"] .notfound-trace code {
    border-color: rgba(15, 23, 42, 0.14);
    background: rgba(15, 23, 42, 0.04);
    color: #334155;
}

html[data-theme="light"] .notfound-kicker {
    border-color: rgba(8, 145, 178, 0.35);
    background: rgba(8, 145, 178, 0.1);
    color: #0e7490;
}

html[data-theme="light"] .notfound-body > p {
    color: #475569;
}

html[data-theme="light"] .notfound-search input {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.14);
    color: #0f172a;
}

html[data-theme="light"] .notfound-links a {
    border-color: rgba(15, 23, 42, 0.14);
    color: #334155;
}

@media (max-width: 860px) {
    .notfound-inner {
        grid-template-columns: 1fr;
        gap: 22px;
        text-align: center;
        justify-items: center;
    }

    .notfound-body {
        justify-items: center;
    }

        .notfound-body > p {
            text-align: center;
        }

    .notfound-art {
        min-height: 190px;
    }

    .notfound-actions,
    .notfound-links {
        justify-content: center;
    }
}

/* =========================================================================
   نوار «مشکلی پیش آمد» بلیزور
   -------------------------------------------------------------------------
   نمایش و پنهان‌شدن خودِ div را بلیزور با style درون‌خطی انجام می‌دهد، پس
   چیدمان روی نوار داخلی است تا display:block فریم‌ورک آن را به‌هم نریزد.
   ========================================================================= */
#blazor-error-ui {
    display: none;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1200;
    padding: 12px;
}

.neo-error-strip {
    display: flex;
    align-items: center;
    gap: 14px;
    width: min(860px, 100%);
    margin: 0 auto;
    padding: 14px 18px;
    border-radius: 16px;
    border: 1px solid rgba(248, 113, 113, 0.32);
    background: rgba(12, 14, 22, 0.97);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 32px rgba(244, 63, 94, 0.12);
    color: #e2e8f0;
    animation: neoErrorRise 0.35s cubic-bezier(0.05, 0.89, 0.25, 1.02);
}

@keyframes neoErrorRise {
    from {
        transform: translateY(16px);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .neo-error-strip {
        animation: none;
    }
}

.neo-error-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(248, 113, 113, 0.35);
    background: rgba(248, 113, 113, 0.12);
    color: #fca5a5;
}

    .neo-error-icon svg {
        width: 22px;
        height: 22px;
    }

.neo-error-text {
    flex: 1;
    display: grid;
    gap: 2px;
    min-width: 0;
}

    .neo-error-text strong {
        font-size: 14px;
        color: #f8fafc;
    }

    .neo-error-text span {
        font-size: 12px;
        line-height: 1.9;
        color: #94a3b8;
    }

#blazor-error-ui .reload {
    flex: none;
    padding: 9px 18px;
    border-radius: 11px;
    background: linear-gradient(120deg, #06b6d4, #a855f7);
    color: #06111f;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    #blazor-error-ui .reload:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(34, 211, 238, 0.3);
    }

#blazor-error-ui .dismiss {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #cbd5e1;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.2s ease;
}

    #blazor-error-ui .dismiss:hover {
        border-color: rgba(248, 113, 113, 0.55);
    }

@media (max-width: 560px) {
    .neo-error-strip {
        flex-wrap: wrap;
        padding: 14px;
    }

    .neo-error-text {
        flex: 1 1 100%;
        order: 2;
    }

    #blazor-error-ui .reload {
        flex: 1;
        order: 3;
        text-align: center;
    }
}

/* تم روشن */
html[data-theme="light"] .neo-error-strip {
    background: #ffffff;
    border-color: rgba(190, 18, 60, 0.26);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.2);
    color: #0f172a;
}

    html[data-theme="light"] .neo-error-text strong {
        color: #0f172a;
    }

    html[data-theme="light"] .neo-error-text span {
        color: #475569;
    }

html[data-theme="light"] .neo-error-icon {
    border-color: rgba(190, 18, 60, 0.28);
    background: rgba(190, 18, 60, 0.08);
    color: #be123c;
}

html[data-theme="light"] #blazor-error-ui .dismiss {
    border-color: rgba(15, 23, 42, 0.16);
    color: #334155;
}

/* =========================================================================
   ستاره‌ها، رأی «مفید بود» و تصویر در نظرات
   ========================================================================= */
.neo-stars {
    position: relative;
    display: inline-block;
    direction: ltr;
    line-height: 1;
    font-size: 14px;
    letter-spacing: 2px;
    white-space: nowrap;
}

.neo-stars-empty {
    color: rgba(148, 163, 184, 0.35);
}

/* یک نوار از همان ستاره‌ها که به اندازه‌ی امتیاز بریده می‌شود؛ نیم‌ستاره هم درست درمی‌آید */
.neo-stars-full {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: #fbbf24;
}

.pd-rating-summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: #94a3b8;
}

    .pd-rating-summary strong {
        font-size: 14px;
        color: #f8fafc;
    }

/* انتخاب ستاره در فرم: ردیف راست‌به‌چپ، پس ستاره‌ها از ۵ به ۱ چیده می‌شوند */
.pd-star-pick {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 12px;
    color: #94a3b8;
}

    .pd-star-pick > div {
        display: flex;
        flex-direction: row;
        gap: 2px;
    }

.pd-star-option {
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    color: rgba(148, 163, 184, 0.35);
    transition: color 0.15s ease, transform 0.15s ease;
}

    .pd-star-option input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    /* با ماوس روی یک ستاره، خودش و هر ستاره‌ی سمت راستش (یعنی کوچک‌ترها) روشن می‌شوند */
    .pd-star-option:hover,
    .pd-star-option:hover ~ .pd-star-option,
    .pd-star-option:has(input:checked),
    .pd-star-option:has(input:checked) ~ .pd-star-option {
        color: #fbbf24;
    }

    .pd-star-option:hover {
        transform: scale(1.12);
    }

    .pd-star-option:has(input:focus-visible) {
        outline: 2px solid rgba(34, 211, 238, 0.6);
        outline-offset: 2px;
        border-radius: 4px;
    }

.pd-comment-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pd-helpful-form {
    display: inline-flex;
}

.pd-helpful {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: none;
    color: #94a3b8;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

    .pd-helpful:hover {
        border-color: rgba(34, 211, 238, 0.45);
        color: #cbd5e1;
    }

    .pd-helpful.is-voted {
        border-color: rgba(34, 211, 238, 0.6);
        background: rgba(34, 211, 238, 0.1);
        color: #67e8f9;
    }

    .pd-helpful b {
        font-variant-numeric: tabular-nums;
    }

.pd-review-shots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}

    .pd-review-shots img {
        width: 74px;
        height: 74px;
        object-fit: cover;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.12);
    }

[data-theme="light"] .neo-stars-empty {
    color: rgba(15, 23, 42, 0.2);
}

[data-theme="light"] .pd-rating-summary strong {
    color: #0f172a;
}

[data-theme="light"] .pd-helpful {
    border-color: rgba(15, 23, 42, 0.14);
    color: #475569;
}

[data-theme="light"] .pd-review-shots img {
    border-color: rgba(15, 23, 42, 0.12);
}

/* امتیاز و موجودی روی کارت محصول */
.product-card-rating {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #64748b;
}

.product-card-left {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(249, 115, 22, 0.14);
    border: 1px solid rgba(249, 115, 22, 0.3);
    color: #fdba74;
    font-size: 11px;
}

    .product-card-left.is-out {
        background: rgba(100, 116, 139, 0.16);
        border-color: rgba(100, 116, 139, 0.32);
        color: #cbd5e1;
    }

[data-theme="light"] .product-card-left {
    background: rgba(194, 65, 12, 0.08);
    border-color: rgba(194, 65, 12, 0.24);
    color: #c2410c;
}

    [data-theme="light"] .product-card-left.is-out {
        background: rgba(71, 85, 105, 0.08);
        border-color: rgba(71, 85, 105, 0.2);
        color: #475569;
    }

/* =========================================================================
   مقایسه محصولات
   ========================================================================= */
.pd-compare-form {
    margin-top: 10px;
}

.pd-compare {
    width: 100%;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: none;
    color: #cbd5e1;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

    .pd-compare:hover {
        border-color: rgba(34, 211, 238, 0.5);
        color: #e2e8f0;
    }

    .pd-compare.is-on {
        border-color: rgba(34, 211, 238, 0.65);
        background: rgba(34, 211, 238, 0.1);
        color: #67e8f9;
    }

.pd-compare-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    color: #67e8f9;
}

.compare-page {
    padding-top: 40px;
}

.compare-empty {
    padding: 40px 0;
    text-align: center;
    color: #94a3b8;
}

    .compare-empty a {
        margin-inline-start: 8px;
        color: #67e8f9;
    }

/* جدول از پهنای صفحه بیرون نمی‌زند؛ روی موبایل افقی اسکرول می‌شود */
.compare-wrap {
    overflow-x: auto;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
}

    .compare-table th,
    .compare-table td {
        padding: 12px 14px;
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        font-size: 13px;
        color: #cbd5e1;
        vertical-align: middle;
    }

    /* ستون اول همیشه دیده شود، حتی وقتی جدول را افقی می‌کشند */
    .compare-table tbody th {
        position: sticky;
        inset-inline-start: 0;
        background: rgba(10, 12, 20, 0.97);
        text-align: start;
        font-weight: 400;
        color: #94a3b8;
        font-size: 12px;
    }

.compare-corner {
    position: sticky;
    inset-inline-start: 0;
    background: rgba(10, 12, 20, 0.97);
}

.compare-product {
    display: grid;
    gap: 8px;
    justify-items: center;
    text-decoration: none;
    color: inherit;
}

    .compare-product img {
        width: 86px;
        height: 86px;
        object-fit: cover;
        border-radius: 12px;
    }

    .compare-product span {
        font-size: 12px;
        line-height: 1.8;
        max-width: 140px;
    }

.compare-drop {
    margin-top: 6px;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: none;
    color: #94a3b8;
    cursor: pointer;
}

.compare-price {
    font-weight: 700;
    color: #f8fafc;
}

.compare-yes {
    color: #34d399;
}

.compare-none {
    color: #64748b;
}

[data-theme="light"] .compare-wrap {
    border-color: rgba(15, 23, 42, 0.1);
}

    [data-theme="light"] .compare-table tbody th,
    [data-theme="light"] .compare-corner {
        background: #ffffff;
        color: #475569;
    }

    [data-theme="light"] .compare-table th,
    [data-theme="light"] .compare-table td {
        color: #0f172a;
        border-bottom-color: rgba(15, 23, 42, 0.08);
    }

    [data-theme="light"] .pd-compare {
        border-color: rgba(15, 23, 42, 0.14);
        color: #334155;
    }

/* انتخاب عکس در فرم نظر */
.pd-shot-pick {
    display: grid;
    gap: 6px;
    margin: 10px 0;
    font-size: 12px;
    color: #94a3b8;
}

    .pd-shot-pick input[type="file"] {
        font: inherit;
        font-size: 12px;
        color: #cbd5e1;
    }

    .pd-shot-pick small {
        color: #64748b;
    }