/* Blockfitlab "Neo" theme. Loaded after the other stylesheets. Dark by default, light on request.
   One purple, one gold, soft glow instead of hard outlines. The pixel font stays for the logo, the hero headline and small labels. */
:root {
  --bg: #0b0a1f; --bg2: #121030; --surface: #17143a; --ink: #f5f3ff; --ink2: #dcd7f7; --muted: #b0aadb;
  --line: rgba(255,255,255,.16); --soft-line: rgba(255,255,255,.12);
  --grape: #8e74ff; --grape-ink: #ffffff; --sun: #ffc83d; --coral: #ff6b70; --mint: #2ad8ab; --sky: #55c3ff;
  --err: #ff8089; --ok: #3ee0b4; --focus: #7fd4ff; --check-a: #1d1946; --check-b: #26215a;
  --shadow: 0 12px 32px -14px rgba(124,92,255,.6); --shadow-sm: 0 4px 14px -6px rgba(124,92,255,.5);
  --radius: 18px; --radius-sm: 12px; color-scheme: dark;
  --f-display: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif; --f-pixel: "Pixelify Sans", Figtree, system-ui, sans-serif;
  --page-glow: rgba(124,92,255,.35); --page-glow2: rgba(124,92,255,.14); --card-a: rgba(255,255,255,.06); --card-b: rgba(255,255,255,.02); --header: rgba(11,10,31,.74);
}
:root[data-theme="light"] {
  --bg: #f6f4ff; --bg2: #ece8ff; --surface: #ffffff; --ink: #17143a; --ink2: #2e2a5c; --muted: #54507c;
  --line: rgba(23,20,58,.16); --soft-line: rgba(23,20,58,.12);
  --grape: #5a3de0; --grape-ink: #ffffff; --focus: #2f8fe0; --check-a: #ffffff; --check-b: #e6e1f7; --err: #c62839; --ok: #0d8b6b;
  --shadow: 0 12px 30px -16px rgba(90,61,224,.45); --shadow-sm: 0 4px 12px -6px rgba(90,61,224,.35); color-scheme: light;
  --page-glow: rgba(124,92,255,.18); --page-glow2: rgba(124,92,255,.07); --card-a: rgba(255,255,255,.9); --card-b: rgba(255,255,255,.7); --header: rgba(246,244,255,.8);
}
body { background: radial-gradient(900px 520px at 85% -5%, var(--page-glow), transparent 60%), radial-gradient(700px 480px at 0% 30%, var(--page-glow2), transparent 60%), var(--bg); background-attachment: fixed; }
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.02em; }
.hero h1 { font-family: var(--f-pixel); font-weight: 700; letter-spacing: 0; background: linear-gradient(180deg, var(--ink) 35%, color-mix(in srgb, var(--grape) 70%, var(--ink)) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kicker, .badge, .gbadge, .hw-count span, .hw-strip strong { font-family: var(--f-pixel); letter-spacing: .02em; }
.site-header { background: var(--header); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); }
.btn { border: 1px solid var(--line); border-radius: 14px; box-shadow: none; transition: transform .12s ease, box-shadow .18s ease, filter .18s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); } .btn:active { transform: translateY(1px); box-shadow: none; }
.btn.primary { background: linear-gradient(180deg, #7a5cf5, #5b3de0); color: #fff; border-color: rgba(255,255,255,.22); box-shadow: 0 10px 26px -10px rgba(124,92,255,.9), inset 0 1px 0 rgba(255,255,255,.3); }
.btn.sun { background: linear-gradient(180deg, #ffd55c, #ffb91f); color: #2a1a00; border-color: rgba(255,255,255,.35); box-shadow: 0 10px 26px -12px rgba(255,185,31,.85), inset 0 1px 0 rgba(255,255,255,.5); }
.btn.ghost { background: transparent; border-color: var(--soft-line); box-shadow: none; }
.btn.danger { background: linear-gradient(180deg, #ff7f83, #f0545a); color: #2a0a0c; }
.card, .stage-card, .gcard, .tpl, .order, .design { background: linear-gradient(180deg, var(--card-a), var(--card-b)); border: 1px solid var(--line); box-shadow: var(--shadow); }
.card.flat { box-shadow: none; }
.stage-card { border-radius: 26px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--grape) 40%, transparent), 0 30px 80px -34px rgba(124,92,255,.9); }
.kicker { background: color-mix(in srgb, var(--grape) 20%, transparent); color: color-mix(in srgb, var(--grape) 55%, var(--ink)); border: 1px solid color-mix(in srgb, var(--grape) 55%, transparent); box-shadow: none; }
.badge { border: 1px solid var(--line); } .badge.sun, .badge.mint, .badge.pop, .badge.grape { border-color: transparent; }
.band { background: color-mix(in srgb, var(--ink) 4%, transparent); border-block: 1px solid var(--line); }
.hero { background: none; } .hw-on .hero { background: none; }
input, select, textarea { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; }
a { color: var(--grape); }
.tab, .chip, .seg button { border-color: var(--line); }
.joinbar { border: 1px dashed var(--line); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.gcard:hover { transform: translateY(-3px); }
/* quieter Halloween strip: one gold accent instead of orange */
.hw-strip { background: color-mix(in srgb, var(--sun) 9%, var(--bg)); border-bottom: 1px solid color-mix(in srgb, var(--sun) 35%, transparent); color: var(--ink); }
.hw-strip strong { color: var(--sun); } .hw-count span { background: color-mix(in srgb, var(--ink) 7%, transparent); border: 1px solid color-mix(in srgb, var(--sun) 45%, transparent); color: var(--ink); } .hw-count small { color: var(--muted); }
.hw-strip a { background: linear-gradient(180deg, #ffd55c, #ffb91f); color: #2a1a00; }
.hw-float i { opacity: .22; }
/* 3D viewers: spotlight, glowing pedestal, soft floor shadow, gentle idle bob */
.try-viewer, .sk-viewer {
  background: radial-gradient(ellipse 34% 4.5% at 50% 94%, rgba(0,0,0,.5), transparent 75%), radial-gradient(ellipse 46% 7% at 50% 95%, color-mix(in srgb, var(--grape) 70%, transparent), transparent 72%),
    radial-gradient(ellipse 75% 85% at 50% 6%, color-mix(in srgb, var(--grape) 34%, transparent), transparent 70%), var(--bg2);
  border: 1px solid var(--line); border-radius: 18px;
}
.sk-scene { animation: skbob 3.2s ease-in-out infinite; }
@keyframes skbob { 0%, 100% { margin-top: 0; } 50% { margin-top: -5px; } }
@media (prefers-reduced-motion: reduce) { .sk-scene { animation: none; } }
:root[data-theme="light"] .hw-strip strong { color: #8a5200; } :root[data-theme="light"] .hw-count span { border-color: #c98a1a; color: var(--ink); }
:root[data-theme="light"] .kicker { color: var(--grape); }

/* Style library browser */
.sty-bar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: .4rem 0; } .sty-bar input { flex: 1 1 200px; min-width: 0; }
.sty-cats { display: flex; gap: .4rem; overflow-x: auto; padding: .3rem 0 .6rem; scrollbar-width: thin; } .sty-chip { flex: 0 0 auto; white-space: nowrap; padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 700 .8rem var(--f-body); cursor: pointer; }
.sty-chip.on { background: linear-gradient(135deg, var(--brand, #7a4dff), var(--brand2, #19c6e6)); color: #fff; border-color: transparent; }
.sty-grid { max-height: 52vh; overflow-y: auto; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } .sty-grid .tpl-ph { height: 120px; width: 60%; border-radius: 8px; background: var(--bg2); } .sty-grid .tpl-thumb { max-height: 120px; }
.sty-grid .tpl span { text-align: center; line-height: 1.15; }

/* homepage spacing + section dividers */
.hero { padding-bottom: clamp(12px, 2.5vw, 28px); }
section.wrap.section { position: relative; padding-block: clamp(28px, 4.5vw, 56px); }
section.wrap.section::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent); }
.sty-home { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; } .sty-home a { padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--card-a), var(--card-b)); color: var(--ink); font: 700 .85rem var(--f-body); text-decoration: none; transition: transform .15s, border-color .15s; } .sty-home a:hover { transform: translateY(-2px); border-color: var(--sun); }

.lx-prev { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin: .8rem 0; } .lx-prev .tpl-thumb { height: 110px; }
.tpl.luxe { border-color: #ffd23f; box-shadow: 0 0 0 1px #ffd23f55, 0 0 18px #ffd23f33; } .tpl.luxe span { color: var(--ink); }
.sty-chip.on[data-id="luxe"] { background: linear-gradient(135deg, #ffd23f, #ff8a3d); color: #2a1a00; }
.luxe-promo { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 1.2rem; padding: 1.2rem; border-color: #ffd23f66; background: linear-gradient(135deg, #ffd23f14, transparent 60%), linear-gradient(180deg, var(--card-a), var(--card-b)); } .luxe-promo > div { flex: 1 1 320px; min-width: 0; }

/* more breathing room in text */
body { letter-spacing: .012em; word-spacing: .05em; }
p, li { line-height: 1.65; }
h1, h2, h3, h4 { letter-spacing: .004em; line-height: 1.18; }
.hero h1 { letter-spacing: 0; }
.price, .plan .price { letter-spacing: .005em; }
.btn, .tab, .chip, .sty-chip, .sty-home a, .tpl span, .pill { letter-spacing: .02em; }
.badge, .kicker { display: inline-block; margin-bottom: .6rem; }
.luxe-promo h3 { margin-top: .2rem; }
.luxe-promo p { margin-bottom: 0; max-width: 60ch; }
.ticks li { line-height: 1.55; padding-block: .1em; }
.plan .muted + .ticks, .plan h3 + .price { margin-top: .3rem; }
.sty-home { gap: .6rem; }
.pricing + p { margin-top: 1.4rem; }
.pricing { gap: 1.2rem; }
.plan { padding: 1.5rem; }
.plan .btn { margin-top: 1rem; }