/* Spider-Man theme — isolated so other themes remain unchanged. */
html[data-theme="spiderman"] {
    --primary: #d71920;
    --primary-2: #0b4f9c;
    --accent: #f5c542;
    --panel-border: rgba(11, 79, 156, .25);
    --spider-red: #d71920;
    --spider-blue: #073b78;
    --spider-ink: #081526;
}

html[data-theme="spiderman"] body {
    background-color: #eef4fb;
    background-image:
        linear-gradient(rgba(5,16,32,.52), rgba(5,16,32,.64)),
        url("spiderman-city-horizontal.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

html[data-theme="spiderman"][data-mode="dark"] body {
    background-color: #07121f;
    background-image:
        linear-gradient(rgba(2,9,20,.72), rgba(2,9,20,.8)),
        url("spiderman-city-horizontal.jpg");
}

html[data-theme="spiderman"] .sidebar {
    background: linear-gradient(180deg, #06182c 0%, #082f59 58%, #071a30 100%);
    border-right-color: rgba(255,255,255,.08);
    box-shadow: 8px 0 28px rgba(3, 18, 36, .2);
}

html[data-theme="spiderman"] .brand,
html[data-theme="spiderman"] .brand small,
html[data-theme="spiderman"] .nav-link,
html[data-theme="spiderman"] .shopify-status {
    color: #fff;
}

html[data-theme="spiderman"] .nav-link {
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.025);
}

html[data-theme="spiderman"] .nav-link:hover {
    background: rgba(255,255,255,.1);
    transform: translateX(3px);
}

html[data-theme="spiderman"] .nav-link.active {
    background: linear-gradient(135deg, #f02b31, #b70f18);
    border-color: rgba(255,255,255,.52);
    box-shadow: 0 8px 22px rgba(215,25,32,.3), inset 0 0 0 1px rgba(255,255,255,.13);
}

html[data-theme="spiderman"] .nav-icon {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.18);
}

html[data-theme="spiderman"] .panel,
html[data-theme="spiderman"] .stat-card,
html[data-theme="spiderman"] .card {
    background: color-mix(in srgb, var(--surface) 95%, transparent);
    border-color: var(--panel-border);
    box-shadow: 0 12px 34px rgba(8, 36, 70, .09);
}

html[data-theme="spiderman"] main > header h1,
html[data-theme="spiderman"] main > header p {
    color: #fff;
    text-shadow: 0 2px 9px rgba(0,0,0,.65);
}

html[data-theme="spiderman"] .primary,
html[data-theme="spiderman"] .filter-form button,
html[data-theme="spiderman"] button[type="submit"]:not(.danger-button):not(.delete-button) {
    background: linear-gradient(135deg, #e9272f, #bd1019);
    border-color: #b70f18;
    color: #fff;
    box-shadow: 0 7px 18px rgba(215,25,32,.22);
}

/* A small web grips the upper-right corner of every interactive button. */
html[data-theme="spiderman"] button::after,
html[data-theme="spiderman"] .primary::after,
html[data-theme="spiderman"] .secondary-button::after,
html[data-theme="spiderman"] .nav-link::after {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: 21px;
    height: 21px;
    opacity: .58;
    pointer-events: none;
    background:
        linear-gradient(45deg, transparent 47%, currentColor 49% 52%, transparent 54%),
        repeating-radial-gradient(circle at 100% 0, transparent 0 4px, currentColor 5px 6px);
    color: rgba(255,255,255,.72);
}

html[data-theme="spiderman"] button,
html[data-theme="spiderman"] .primary,
html[data-theme="spiderman"] .secondary-button,
html[data-theme="spiderman"] .nav-link { position: relative; }

html[data-theme="spiderman"] .secondary-button::after,
html[data-theme="spiderman"] .mode-toggle::after { color: rgba(11,79,156,.55); }

html[data-theme="spiderman"] .secondary-button,
html[data-theme="spiderman"] .mode-toggle {
    border-color: rgba(11,79,156,.3);
    box-shadow: 0 5px 16px rgba(11,79,156,.1);
}

html[data-theme="spiderman"] .theme-garland {
    height: 8px;
    background:
        radial-gradient(circle, #f5c542 0 3px, transparent 4px) 0 0 / 34px 8px repeat-x,
        linear-gradient(90deg, #d71920, #0b4f9c, #d71920);
    box-shadow: 0 2px 10px rgba(215,25,32,.35);
}

html[data-theme="spiderman"] .spider-corner {
    position: fixed;
    top: 46px;
    width: 150px;
    height: 150px;
    z-index: 4;
    pointer-events: none;
    opacity: .2;
    background:
        repeating-radial-gradient(circle at top left, transparent 0 24px, currentColor 25px 26px),
        linear-gradient(45deg, transparent 49%, currentColor 50% 51%, transparent 52%);
    color: var(--spider-blue);
}

html[data-theme="spiderman"] .spider-left { left: 247px; }
html[data-theme="spiderman"] .spider-right { right: 0; transform: scaleX(-1); }

html[data-theme="spiderman"] .spider-mask-float {
    position: fixed;
    right: 36px;
    bottom: 24px;
    width: 66px;
    height: 66px;
    z-index: 6;
    pointer-events: none;
    filter: drop-shadow(0 7px 8px rgba(0,0,0,.2));
    animation: spiderFloat 3.4s ease-in-out infinite;
}

html[data-theme="spiderman"] .spider-hanging {
    position: fixed;
    right: 115px;
    top: 47px;
    z-index: 7;
    font-size: 28px;
    transform-origin: 50% -45px;
    animation: spiderSwing 3s ease-in-out infinite;
    pointer-events: none;
}

html[data-theme="spiderman"] .spider-swinger {
    position: fixed;
    left: 260px;
    top: 72px;
    width: 84px;
    z-index: 9;
    pointer-events: none;
    transform-origin: 300px -160px;
    filter: drop-shadow(0 8px 9px rgba(0,0,0,.38));
    animation: spiderCrossScreen 9s ease-in-out infinite;
}

html[data-theme="spiderman"] .spider-swing-line {
    position: fixed;
    left: 49%;
    top: 0;
    width: 1px;
    height: 155px;
    z-index: 8;
    background: rgba(232,242,252,.6);
    transform-origin: top;
    animation: spiderRopeSwing 9s ease-in-out infinite;
    pointer-events: none;
}

html[data-theme="spiderman"] .spider-upside-down {
    position: fixed;
    right: 72px;
    top: 90px;
    width: 62px;
    z-index: 8;
    pointer-events: none;
    transform: rotate(180deg);
    transform-origin: 50% -70px;
    filter: drop-shadow(0 7px 8px rgba(0,0,0,.4));
    animation: spiderUpside 4.4s ease-in-out infinite;
}

html[data-theme="spiderman"] .spider-upside-down::before { content: ""; }

/* Prevent leftover Tet/Christmas decorations while previewing Spider-Man. */
html[data-theme="spiderman"] .hanging-banner,
html[data-theme="spiderman"] .theme-lantern,
html[data-theme="spiderman"] .tet-branch,
html[data-theme="spiderman"] .tet-envelope,
html[data-theme="spiderman"] .tet-banh,
html[data-theme="spiderman"] .tet-cloud,
html[data-theme="spiderman"] .xmas-sticker-tree,
html[data-theme="spiderman"] .xmas-candy,
html[data-theme="spiderman"] .xmas-sock,
html[data-theme="spiderman"] .xmas-snowman { display: none !important; }

html[data-theme="spiderman"] .spider-hanging::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 24px;
    width: 1px;
    height: 48px;
    background: rgba(20,30,40,.55);
}

html[data-theme="spiderman"] .spider-header-mark {
    position: fixed;
    top: 48px;
    left: calc(50% + 123px);
    transform: translateX(-50%);
    z-index: 8;
    display: grid;
    grid-template-columns: 42px auto;
    grid-template-rows: auto auto;
    column-gap: 9px;
    align-items: center;
    color: #fff;
    padding: 7px 16px 7px 10px;
    border-radius: 0 0 15px 15px;
    background: linear-gradient(135deg, rgba(7,59,120,.96), rgba(215,25,32,.96));
    border: 1px solid rgba(255,255,255,.65);
    box-shadow: 0 8px 20px rgba(7,31,61,.22);
    transform-origin: 50% -24px;
    animation: spiderHeaderSwing 4.2s ease-in-out infinite;
    pointer-events: none;
}

html[data-theme="spiderman"] .spider-header-mark img {
    grid-row: 1 / 3;
    width: 40px;
    height: 40px;
}

html[data-theme="spiderman"] .spider-header-mark strong {
    font-size: 13px;
    letter-spacing: .1em;
    line-height: 1.1;
}

html[data-theme="spiderman"] .spider-header-mark small {
    font-size: 8px;
    letter-spacing: .18em;
    opacity: .82;
}

html[data-theme="spiderman"] .spider-wire {
    position: absolute;
    top: -25px;
    left: 50%;
    width: 1px;
    height: 25px;
    background: rgba(20,30,40,.65);
}

html[data-theme="spiderman"] .spider-particle {
    position: fixed;
    z-index: 2;
    pointer-events: none;
    opacity: .2;
    color: var(--spider-blue);
    animation: spiderDrift 8s linear infinite;
}

html[data-theme="spiderman"] .spider-ripple {
    position: absolute;
    width: 14px;
    height: 14px;
    margin: -7px;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    transform: scale(0);
    pointer-events: none;
    animation: spiderRipple .58s ease-out forwards;
}

html[data-theme="spiderman"] button[data-spider-ripple="1"] { position: relative; overflow: hidden; }

.theme-preview.spiderman,
.season-preview.spiderman {
    background:
        radial-gradient(circle at 72% 20%, rgba(255,255,255,.14), transparent 24%),
        linear-gradient(135deg, #071d35 0 47%, #b8121a 48% 100%);
    color: #fff;
}

.theme-preview.spiderman::after,
.season-preview.spiderman::after {
    content: "🕷️  🕸️  🔴  🔵";
    letter-spacing: .45em;
}

html[data-theme="spiderman"] .login-card {
    background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(235,243,252,.97));
    border: 1px solid rgba(11,79,156,.25);
    box-shadow: 0 26px 70px rgba(4,30,59,.24), 0 0 0 5px rgba(215,25,32,.05);
}

@keyframes spiderFloat { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(3deg); } }
@keyframes spiderSwing { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes spiderHeaderSwing { 0%,100% { transform: translateX(-50%) rotate(-1.3deg); } 50% { transform: translateX(-50%) rotate(1.3deg); } }
@keyframes spiderDrift { 0% { transform: translateY(20px) rotate(0); } 50% { transform: translateY(-25px) rotate(15deg); } 100% { transform: translateY(20px) rotate(0); } }
@keyframes spiderRipple { to { transform: scale(14); opacity: 0; } }
@keyframes spiderCrossScreen {
    0%,100% { left: 260px; top: 68px; transform: rotate(-18deg) scale(.9); }
    45%,55% { left: calc(72vw - 40px); top: 150px; transform: rotate(18deg) scale(1.05); }
}
@keyframes spiderRopeSwing {
    0%,100% { transform: rotate(47deg); height: 210px; }
    50% { transform: rotate(-43deg); height: 205px; }
}
@keyframes spiderUpside { 0%,100% { transform: translateY(-24px) rotate(180deg) rotate(-3deg); } 50% { transform: translateY(45px) rotate(180deg) rotate(3deg); } }

html[data-motion="0"] .spider-mask-float,
html[data-motion="0"] .spider-hanging,
html[data-motion="0"] .spider-header-mark,
html[data-motion="0"] .spider-particle { animation: none !important; }
html[data-motion="0"] .spider-swinger,
html[data-motion="0"] .spider-swing-line,
html[data-motion="0"] .spider-upside-down { animation: none !important; }

/* Removed moving Spider-Man figures; retain only webs, mask and particles. */
html[data-theme="spiderman"] .spider-swinger,
html[data-theme="spiderman"] .spider-swing-line,
html[data-theme="spiderman"] .spider-upside-down,
html[data-theme="spiderman"] .spider-hanging { display: none !important; }

@media (max-width: 980px) {
    html[data-theme="spiderman"] .spider-header-mark { left: 58%; transform: translateX(-50%) scale(.88); }
    html[data-theme="spiderman"] .spider-left { left: 0; }
}

@media (max-width: 680px) {
    html[data-theme="spiderman"] .spider-header-mark { display: none; }
    html[data-theme="spiderman"] .spider-corner { width: 90px; height: 90px; }
    html[data-theme="spiderman"] .spider-mask-float { width: 48px; height: 48px; right: 14px; bottom: 14px; }
}