:root{--custom-accent:#ff6a2a;--custom-glow:#173354}
body{background:radial-gradient(circle at 75% -5%,var(--custom-glow),transparent 34%),var(--bg)}
html[data-custom-background="midnight"] body{background:var(--bg)}
html[data-custom-background="grid"] body{background:linear-gradient(90deg,#ffffff08 1px,transparent 1px),linear-gradient(#ffffff07 1px,transparent 1px),radial-gradient(circle at 76% -4%,var(--custom-glow),transparent 37%),var(--bg);background-size:64px 64px,64px 64px,auto,auto}
.brand>span:last-child span,.eyebrow{color:var(--custom-accent)}
.nav-item.active{box-shadow:inset 3px 0 var(--custom-accent)}
.nav-item:hover,.nav-item.active{background:color-mix(in srgb,var(--custom-accent) 12%,#101c2e)}
.primary-btn{background:var(--custom-accent)}
.sidebar{background:color-mix(in srgb,var(--custom-glow) 17%,#07101bea)}
.panel{background:linear-gradient(180deg,color-mix(in srgb,var(--custom-glow) 17%,#0e1b2b),#0a1522)}
.connect-btn:hover{border-color:var(--custom-accent)}
.custom-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px;max-width:1280px}.custom-feature,.custom-celebration{grid-column:1/-1}.custom-card{position:relative;overflow:hidden;border:1px solid #29415a;border-radius:18px;background:linear-gradient(150deg,color-mix(in srgb,var(--custom-glow) 36%,#101c2b),#0a1522 80%);box-shadow:0 18px 44px #0003;padding:28px}.custom-feature:before{content:"";position:absolute;right:-110px;top:-150px;width:420px;height:420px;border-radius:50%;background:color-mix(in srgb,var(--custom-accent) 11%,transparent);filter:blur(30px);pointer-events:none}.custom-card-heading{display:flex;justify-content:space-between;align-items:start;gap:20px;position:relative}.custom-kicker{color:var(--custom-accent);font:800 .69rem Inter,sans-serif;letter-spacing:.16em}.custom-card h2{margin:7px 0;font:900 2rem 'Barlow Condensed',sans-serif;text-transform:uppercase}.custom-card p{margin:0;color:#a4b2c4;line-height:1.5;font-size:.84rem}.custom-deco{color:var(--custom-accent);font-size:3.2rem;line-height:1}.custom-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:26px}.custom-options button{cursor:pointer;text-align:left;color:#edf3fb;border:1px solid #334a62;border-radius:13px;background:#0b1726;padding:11px;transition:transform .16s,border-color .16s,box-shadow .16s}.custom-options button:hover{transform:translateY(-3px)}.custom-options button[aria-pressed="true"]{border-color:var(--custom-accent);box-shadow:0 0 0 1px var(--custom-accent),0 12px 28px #0004}.custom-options strong,.custom-options small{display:block}.custom-options strong{margin-top:10px;font-size:.83rem}.custom-options small{margin-top:4px;color:#8295a9;font-size:.68rem}.custom-swatch{display:grid;place-items:center;height:80px;border-radius:9px;background:radial-gradient(circle at 70% 25%,var(--swatch-glow),#091321 72%)}.custom-swatch i{width:37px;height:37px;border-radius:50%;background:var(--swatch);box-shadow:0 0 27px var(--swatch)}.custom-backgrounds{grid-template-columns:repeat(3,1fr)}.custom-background-art{display:block;height:93px;border-radius:8px;background:radial-gradient(circle at 75% 0%,var(--custom-glow),#07101c 75%)}.custom-background-midnight .custom-background-art{background:#07101c}.custom-background-grid .custom-background-art{background:linear-gradient(90deg,#ffffff16 1px,transparent 1px),linear-gradient(#ffffff16 1px,transparent 1px),#0d1a2a;background-size:19px 19px}.custom-images{display:flex;flex-wrap:wrap;gap:13px;margin:24px 0}.custom-image{position:relative;width:130px;min-height:136px;border:1px solid #344b63;border-radius:13px;background:#0a1625;padding:10px;text-align:center}.custom-image img{width:88px;height:88px;object-fit:contain;border-radius:9px}.custom-image span{display:block;margin-top:5px;color:#bdcad8;font-size:.68rem}.custom-image button{position:absolute;right:3px;top:3px;width:25px;height:25px;border:1px solid #58718b;border-radius:50%;background:#11243a;color:white;cursor:pointer}.custom-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.custom-actions button,.custom-upload{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 15px;border:1px solid #57718c;border-radius:9px;background:#16273a;color:#fff;font-size:.8rem;font-weight:800;cursor:pointer}.custom-upload{background:var(--custom-accent);border-color:var(--custom-accent)}.custom-upload.disabled{opacity:.45;pointer-events:none}.custom-card .custom-status{min-height:1.3em;margin-top:12px;color:#a6e4cf}.custom-card .custom-note{font-size:.7rem;color:#8191a5}
@media(max-width:900px){.custom-grid{grid-template-columns:1fr}.custom-feature,.custom-celebration{grid-column:auto}}@media(max-width:620px){.custom-card{padding:20px}.custom-options{grid-template-columns:repeat(2,1fr)}.custom-backgrounds{grid-template-columns:repeat(3,1fr);gap:7px}.custom-backgrounds button{padding:7px}.custom-background-art{height:58px}.custom-backgrounds strong{font-size:.68rem}.custom-backgrounds small{font-size:.6rem}}
/* Atmospheric scenes sit behind the content; cards remain opaque for legibility. */
body{background:var(--bg)}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.44;background:radial-gradient(ellipse at 75% -8%,var(--custom-glow),transparent 60%)}
html[data-custom-intensity="cinematic"] body::before{opacity:.9}
.app-shell{position:relative;z-index:1}
html[data-custom-background="lights"] body::before{background:radial-gradient(ellipse 8% 3% at 11% 5%,#e8f4ff 0%,#d6e8ff66 30%,transparent 85%),radial-gradient(ellipse 8% 3% at 87% 4%,#e8f4ff 0%,#d6e8ff66 30%,transparent 85%),linear-gradient(119deg,transparent 4%,#a9d5ff10 11%,transparent 26%),linear-gradient(62deg,transparent 70%,#a9d5ff12 82%,transparent 97%),radial-gradient(ellipse 70% 36% at 50% 0%,#5f91b735,transparent),linear-gradient(180deg,#12263b80,transparent 65%)}
html[data-custom-background="film"] body::before{background:radial-gradient(circle at 73% 3%,#c4b48555,transparent 24%),repeating-linear-gradient(112deg,transparent 0 119px,#a8b8c80c 120px 121px,transparent 122px 245px),repeating-linear-gradient(22deg,transparent 0 153px,#a8b8c80b 154px 155px,transparent 156px 290px),radial-gradient(ellipse at 79% 27%,#8e9cba24,transparent 60%)}
html[data-custom-background="turf"] body::before{background:repeating-linear-gradient(0deg,transparent 0 91px,#d6ffe512 92px 93px,transparent 94px 186px),repeating-linear-gradient(90deg,transparent 0 20%,#b5e8ca0b 20.2%,transparent 20.4% 40%),radial-gradient(ellipse 110% 70% at 55% -5%,#21594772,transparent 70%)}
html[data-custom-background="team"] body::before{background:radial-gradient(ellipse 65% 55% at 77% 4%,color-mix(in srgb,var(--active-team,var(--custom-accent)) 64%,transparent),transparent 80%),radial-gradient(ellipse 55% 48% at 8% 85%,color-mix(in srgb,var(--active-team,var(--custom-accent)) 24%,transparent),transparent 80%)}
.custom-backgrounds{grid-template-columns:repeat(2,minmax(0,1fr))}
.custom-background-art{height:76px}
.custom-background-lights .custom-background-art{background:radial-gradient(ellipse at 18% 0%,#f3f8ff,transparent 20%),radial-gradient(ellipse at 80% 0%,#f3f8ff,transparent 20%),linear-gradient(180deg,#203d59,#07101c)}
.custom-background-film .custom-background-art{background:radial-gradient(circle at 75% 5%,#988d6c,transparent 45%),repeating-linear-gradient(35deg,transparent 0 28px,#71819b3b 29px 30px),#101924}
.custom-background-turf .custom-background-art{background:repeating-linear-gradient(0deg,transparent 0 25px,#a8d7bd3a 26px 27px),linear-gradient(135deg,#143a31,#07151c)}
.custom-background-team .custom-background-art{background:radial-gradient(circle at 76% 14%,var(--active-team,var(--custom-accent)),transparent 55%),#0b1523}
.custom-intensity{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid #314459}
.custom-intensity>span{color:#97a9ba;font-size:.65rem;font-weight:800;letter-spacing:.12em}
.custom-intensity>div{display:flex;padding:3px;border:1px solid #354c65;border-radius:10px;background:#081421}
.custom-intensity button{border:0;border-radius:7px;background:transparent;color:#a9b7c8;padding:9px 12px;font-size:.73rem;font-weight:800;cursor:pointer}
.custom-intensity button[aria-pressed="true"]{background:color-mix(in srgb,var(--custom-accent) 23%,#16283b);color:#fff;box-shadow:0 2px 9px #0004}
@media(max-width:620px){.custom-backgrounds{grid-template-columns:repeat(2,minmax(0,1fr))}.custom-backgrounds strong{font-size:.78rem}.custom-background-art{height:67px}.custom-intensity{align-items:flex-start;flex-direction:column}}