/* ================= NEXT ONE BRANDED CUSTOMIZE PANEL: white, black and brand red ================= */
:root{--accent:#C8102E}
.panel,body.popped{--panel:#ffffff;--line:rgba(0,0,0,.12);--accent:#C8102E;--muted:#5f6670;--text:#141416}
.panel{background:#fff;color:#141416;border:1px solid rgba(0,0,0,.2);box-shadow:0 18px 50px rgba(0,0,0,.5);backdrop-filter:none;-webkit-backdrop-filter:none;overflow:hidden}
body.popped{background:#ececee;color:#141416}
/* header: black band with the brand stripe and N mark */
.panel__head{background:#0b0b0c;color:#fff;border-bottom:0;box-shadow:inset 0 -4px 0 #C8102E,inset 0 -7px 0 #fff;padding-bottom:18px}
.panel__head h2{color:#fff;display:flex;align-items:center;gap:10px}
.panel__head h2::before{content:"";flex:0 0 auto;width:34px;height:22px;background:var(--nmark) center/contain no-repeat}
.panel__head p{color:#c9ccd1}
.pback{background:rgba(255,255,255,.12);color:#fff}
.pback:hover{background:#C8102E}
.pside{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff}
.pside:hover{background:#C8102E;border-color:#C8102E}
.panel__body{background:#fff}
/* menu */
.pitem{background:#fff;border:1px solid rgba(0,0,0,.12);color:#141416;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.pitem:hover{background:#fff6f7;border-color:#C8102E}
.pitem strong{color:#0b0b0c}
.pitem small{color:#5f6670}
.pitem em{color:#C8102E}
.pitem__go{color:#C8102E}
.pitem:focus-visible,.pback:focus-visible,.pside:focus-visible{outline:2px solid #C8102E;outline-offset:2px}
/* sections */
.panel .field h3,.panel .subh,.panel .feat-group h4,.panel .hol h4{color:#0b0b0c}
.panel .field h3::before{content:"";display:inline-block;width:10px;height:3px;background:#C8102E;margin-right:8px;vertical-align:middle;align-self:center}
.panel .field h3 span{color:#141416}
.panel .help,.panel .field .help,.panel small,.panel .hol__when,.panel .card__meta,.panel .combo{color:#5f6670}
.panel .chip{background:#f4f4f5;border:1px solid rgba(0,0,0,.1);color:#141416}
.panel .chip small{color:#6b7178}
.panel .chip:hover{background:#ebebed;border-color:rgba(0,0,0,.2)}
.panel .chip[aria-pressed="true"]{background:#C8102E;border-color:#C8102E;color:#fff;box-shadow:0 2px 8px rgba(200,16,46,.3)}
.panel .chip[aria-pressed="true"] small{color:rgba(255,255,255,.85)}
.panel .text,.panel .card__notes,.panel textarea,.panel input[type=text]{background:#fff;border:1px solid rgba(0,0,0,.18);color:#141416}
.panel .text:focus,.panel .card__notes:focus{border-color:#C8102E;outline:2px solid rgba(200,16,46,.25)}
.panel .card__name{color:#141416}
.panel .card__name:focus{background:#fff}
.panel .btn{background:#f4f4f5;border:1px solid rgba(0,0,0,.14);color:#141416}
.panel .btn:hover{background:#e7e7ea}
.panel .btn--accent{background:#C8102E;border-color:#C8102E;color:#fff}
.panel .btn--accent:hover{background:#a50d26}
.panel .btn--save{background:#0b0b0c;border-color:#0b0b0c;color:#fff}
.panel .btn--save:hover{background:#26262a}
.panel .btn.is-danger{border-color:#C8102E;color:#C8102E;background:#fff6f7}
.panel .histbar,.panel .panel__foot{background:#f6f6f7;border-top:1px solid rgba(0,0,0,.08)}
.panel .histbar + .panel__foot{border-top:0}
.panel .hbtn small{background:rgba(0,0,0,.08);color:#333}
.panel .hbtn:not(:disabled):hover{background:#e7e7ea}
.panel .tune{border-color:rgba(0,0,0,.1);background:#fafafa}
.panel .tune summary{color:#141416}
.panel .slider label{color:#141416}
.panel .slider label output{color:#C8102E}
.panel .slider .reset1{color:#C8102E}
.panel input[type=range],.panel input[type=checkbox]{accent-color:#C8102E}
.panel .miniswitch{color:#141416}
.panel .feat{border-bottom:1px solid rgba(0,0,0,.08)}
.panel .feat .sw{background:#d5d7db}
.panel .feat .sw::after{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.panel .feat>input:checked + .sw{background:#C8102E}
.panel .feat>input:checked + .sw::after{background:#fff}
.panel .upload,.panel .upload-btn{border:1.5px dashed rgba(0,0,0,.3);background:#fafafa;color:#141416}
.panel .upload:hover{border-color:#C8102E;background:#fff6f7}
.panel .setup{background:#fff6f7;border:1px solid rgba(200,16,46,.3)}
.panel .combo{background:#f4f4f5;border:1px solid rgba(0,0,0,.1)}
.panel .card{background:#fff;border:1px solid rgba(0,0,0,.12)}
.panel .star{color:#cfd2d6}
.panel .star.is-on{color:#C8102E}
.panel .card__final{background:#C8102E;color:#fff}
.panel .tab__count{background:#C8102E;color:#fff}
.panel .mkitem,.panel .lgfile,.panel .bsw{background:#fafafa;border:1px solid rgba(0,0,0,.1)}
.panel .mkempty{color:#6b7178}
.panel .linkbtn{color:#C8102E}
.panel .mknum{background:#C8102E;color:#fff}
.panel .mkamt{color:#5f6670}
.panel .lgsw button{border:2px solid rgba(0,0,0,.18)}
.panel .lgsw button.auto{background:#f4f4f5;color:#141416}
.panel .lgsw button[aria-pressed="true"]{border-color:#C8102E;box-shadow:0 0 0 2px #fff,0 0 0 4px #C8102E}
.panel .bsw span{border:1px solid rgba(0,0,0,.2)}
.panel .bsw b{color:#141416}
.panel .blogo{background:#0b0b0c;border:2px solid #0b0b0c;color:#fff}
.panel .blogo small{color:#e6e6e8}
.panel .blogo[aria-pressed="true"]{border-color:#C8102E;box-shadow:0 0 0 2px #fff,0 0 0 4px #C8102E}
.panel .theme{background:#fafafa;border:1px solid rgba(0,0,0,.1);color:#141416}
.panel .theme:hover{background:#f1f1f3}
.panel .theme.is-on{border-color:#C8102E;background:#fff6f7}
.panel .preset,.panel .swatch input{border-color:rgba(0,0,0,.2)}
.panel .swatch{color:#5f6670}
.panel .status{color:#5f6670}
.panel ::-webkit-scrollbar{width:10px}.panel ::-webkit-scrollbar-thumb{background:#d0d2d6;border-radius:6px;border:2px solid #fff}
/* pop-out window bar */
.popbar{background:#0b0b0c;color:#c9ccd1;border-bottom:0;box-shadow:inset 0 -3px 0 #C8102E}
.popbar .btn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff}
.popbar .btn:hover{background:#C8102E;border-color:#C8102E}
.popmsg{color:#e6e6e8}.popmsg b{color:#ff4a63}
/* buttons on the scene and the notices */
.toggle,.mkfloat{background:#0b0b0c;border:1px solid rgba(255,255,255,.14);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.toggle:hover,.mkfloat:hover{background:#C8102E;border-color:#C8102E}
.toggle i{background:#C8102E;box-shadow:0 0 10px #C8102E}
.toggle:hover i{background:#fff;box-shadow:none}
.mkfloat span{color:#ff4a63}.mkfloat:hover span{color:#fff}
.toast{background:rgba(11,11,12,.94);border-left-color:#C8102E}
.toast b{color:#ff4a63}
.mkpop{background:#fff;color:#141416;border:1px solid rgba(0,0,0,.2)}
.mkpop__lead{color:#5f6670}
.mkpop .chip{background:#f4f4f5;border:1px solid rgba(0,0,0,.1);color:#141416}
.mkpop .chip:hover{border-color:#C8102E}
.mkpop .text{background:#fff;border:1px solid rgba(0,0,0,.18);color:#141416}
.mkpop .btn{background:#f4f4f5;border:1px solid rgba(0,0,0,.14);color:#141416}
.mkpop .btn--accent{background:#C8102E;border-color:#C8102E;color:#fff}
.mkhint{border-color:#C8102E}
.panel .field h3{justify-content:flex-start;align-items:center}
.panel .field h3 span{margin-left:auto}
.panel .field h3::before{margin-right:0}
/* popped out: the scene has no buttons on it; Circle to change lives in the pop-out bar */
body.panel-popped .toggle,body.panel-popped .mkfloat{display:none!important}
.popbar{position:sticky;top:0;z-index:5}
.popbar .popcircle{background:#C8102E;border-color:#C8102E;color:#fff;font-weight:700;padding:9px 14px}
.popbar .popcircle span{font-size:15px}
.popbar .popcircle:hover{background:#a50d26}

/* ================= CLIENT PRESETS ================= */
.presetgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:6px}
body.popped .presetgrid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.preset-card{display:flex;flex-direction:column;gap:4px;padding:0 0 9px;border:1px solid rgba(0,0,0,.14);border-radius:10px;background:#fff;text-align:left;cursor:pointer;overflow:hidden;color:#141416;transition:border-color .15s,box-shadow .15s,transform .15s}
.preset-card:hover{border-color:#C8102E;box-shadow:0 6px 18px rgba(200,16,46,.18);transform:translateY(-1px)}
.preset-card[aria-pressed="true"]{border-color:#C8102E;box-shadow:0 0 0 2px #C8102E}
.preset-card__img{position:relative;display:block;aspect-ratio:16/9;background:#0b0b0c}
.preset-card__img img{width:100%;height:100%;object-fit:cover;display:block}
.preset-card__img b{position:absolute;left:6px;top:6px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#C8102E;color:#fff;font:700 12px/22px var(--body);text-align:center}
.preset-card strong{padding:0 9px;font-size:13.5px;line-height:1.25}
.preset-card small{padding:0 9px;font-size:11.5px;line-height:1.35;color:#5f6670}
.presenter{position:absolute;z-index:31;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:6px;border-radius:999px;
  background:rgba(11,11,12,.92);border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 30px rgba(0,0,0,.55),inset 0 -2px 0 #C8102E;color:#fff;max-width:calc(100% - 24px)}
.presenter[hidden]{display:none}
.presenter__txt{display:flex;flex-direction:column;align-items:center;min-width:0;padding:0 10px;line-height:1.2}
.presenter__txt span{font:700 10.5px var(--body);letter-spacing:.2em;color:#ff4a63}
.presenter__txt strong{font:700 14px var(--body);white-space:nowrap}
.presenter__txt small{font-size:11px;color:#c9ccd1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.presenter__btn{width:38px;height:38px;flex:0 0 auto;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;font-size:14px;cursor:pointer}
.presenter__btn:hover{background:#C8102E}
.presenter__play{background:#C8102E}
.presenter__x{width:30px;height:30px;font-size:12px;background:transparent;color:#9aa0a6}
body.panel-open .presenter{left:calc(50% - 200px)}
body.panel-left.panel-open .presenter{left:calc(50% + 200px)}
@media (max-width:700px){.presenter{bottom:64px}.presenter__txt small{display:none}body.panel-open .presenter{left:50%}}
.panel .bpnote{margin-top:10px;padding:8px 10px;border-left:3px solid #C8102E;background:#fff6f7;color:#141416}
.panel .bpnote[hidden]{display:none}
#bpBack[hidden]{display:none}

/* ================= CLEANER CUSTOMIZE MENU ================= */
.panel .pmenu{gap:4px;margin-top:2px}
.panel .pgroup{list-style:none;margin:16px 2px 4px;font:800 11px var(--body);letter-spacing:.2em;text-transform:uppercase;color:#8a9097;display:flex;align-items:center;gap:8px}
.panel .pgroup:first-child{margin-top:6px}
.panel .pgroup::after{content:"";flex:1;height:1px;background:rgba(0,0,0,.1)}
.panel .pitem{display:grid;grid-template-columns:38px 1fr 16px;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid transparent;background:#f6f6f7;box-shadow:none}
.panel .pitem:hover{background:#fff;border-color:#C8102E;box-shadow:0 4px 14px rgba(200,16,46,.12)}
.panel .pitem__ic{width:38px;height:38px;border-radius:10px;background:#0b0b0c;display:grid;place-items:center;transition:background .15s}
.panel .pitem:hover .pitem__ic{background:#C8102E}
.panel .pitem__ic svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.panel #tab-presets .pitem__ic svg,.panel #tab-saved .pitem__ic svg,.panel #tab-brand .pitem__ic svg{fill:#fff;stroke:none}
.panel #tab-presets .pitem__ic,.panel #tab-brand .pitem__ic{background:#C8102E}
.panel .pitem__txt{gap:1px}
.panel .pitem strong{font-size:14.5px}
.panel .pitem small{font-size:12px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.panel .pitem em{margin-top:3px;justify-self:start;display:inline-block;max-width:100%;padding:1px 8px;border-radius:999px;background:rgba(200,16,46,.08);color:#a50d26;font-size:11.5px}
.panel .pitem__go{font-size:20px;color:#b5b9be}
.panel .pitem:hover .pitem__go{color:#C8102E}
body.popped .pmenu:not([hidden]){display:grid!important;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:6px 12px}
body.popped .pgroup{grid-column:1/-1}
/* player section */
.panel .psec{margin-top:6px;padding:14px;border-radius:12px;background:#f8f8f9;border:1px solid rgba(0,0,0,.07)}
.panel .pl-only[hidden]{display:none}
.panel #plFeat .feat{padding:8px 0}
.panel .shadeticks{display:flex;justify-content:space-between;font-size:11px;color:#8a9097;margin-top:2px}
.panel #pShade{accent-color:#0b0b0c}
.miniswitch[hidden],.feat[hidden]{display:none!important}
.panel .turnsw{margin:4px 0 12px;padding:12px;border-radius:10px;background:#0b0b0c;color:#fff}
.panel .turnsw small{color:#c9ccd1}
.panel .turnsw input{accent-color:#C8102E}
.panel #pShadeRow[hidden]{display:none}
.panel #pDetailRow[hidden]{display:none}