/* ===== setup.html style block 01: block-01 ===== */
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&family=Bebas+Neue&display=swap');
*{box-sizing:border-box;margin:0;padding:0;}
body{background:#0f0f1e;color:var(--text);font-family:'Courier Prime',monospace;min-height:100vh;display:flex;justify-content:center;padding:40px 0;}
/* FILMSTRIP */
.filmstrip{display:flex;width:100%;max-width:860px;min-height:100vh;}
.sprocket{width:52px;background:#0f0f1e;border-right:3px solid #0f0f1e;display:flex;flex-direction:column;gap:0;padding:12px 0;flex-shrink:0;}
.sprocket.right{border-right:none;border-left:3px solid #000;}
.hole{width:22px;height:16px;background:#000;border-radius:3px;border:1.5px solid #222;margin:6px auto;flex-shrink:0;}
.cell{flex:1;background:#0f0f1e;border-left:4px solid #0f0f1e;border-right:4px solid #0f0f1e;padding:0 0 60px 0;}
.cell-header{border-bottom:1px solid #3a3a55;padding:20px 32px 16px;display:flex;justify-content:space-between;align-items:center;}
.frame-num{font-size:10px;color:#aaa;letter-spacing:0.1em;}
h1{font-family:'Bebas Neue',sans-serif;font-size:3rem;letter-spacing:0.08em;text-align:center;padding:28px 32px 6px;color:var(--text);}
.subtitle{text-align:center;color:#ccc;font-size:12px;letter-spacing:0.15em;text-transform:uppercase;padding-bottom:24px;border-bottom:1px solid #1a1a1a;}
.edit-banner{background:#1a1a1a;border-bottom:1px solid #3a3a55;padding:12px 32px;font-size:11px;color:#aaa;letter-spacing:0.05em;display:none;}
.edit-banner.visible{display:block;}
/* PROGRESS BAR */
.progress-bar{padding:20px 32px;border-bottom:1px solid #1a1a1a;background:#0d0d0d;}
.progress-steps{display:flex;align-items:center;gap:0;}
.progress-step{display:flex;align-items:center;flex:1;}
.step-circle{width:28px;height:28px;border-radius:50%;border:2px solid #333;display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:14px;color:#555;flex-shrink:0;transition:all 0.3s;}
.step-circle.active{border-color:#fff;color:var(--text);}
.step-circle.done{border-color:#fff;background:#fff;color:#000;}
.step-label{font-size:9px;letter-spacing:0.15em;text-transform:uppercase;color:#555;margin-left:8px;transition:color 0.3s;}
.step-label.active{color:#bbb;}
.step-label.done{color:#aaa;}
.step-connector{flex:1;height:1px;background:#222;margin:0 8px;transition:background 0.3s;}
.step-connector.done{background:#555;}
/* STEPS */
.wizard-step{display:none;padding:20px 32px;}
.wizard-step.active{display:block;}
.section-title{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:#bbb;margin-bottom:16px;display:flex;align-items:center;gap:10px;}
.section-title::after{content:'';flex:1;height:1px;background:#444;}
/* INPUTS */
.input-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
input[type=password],input[type=text],select{background:#0f0f1e;border:1px solid #3a3a55;color:var(--text);font-family:'Courier Prime',monospace;font-size:14px;padding:10px 14px;border-radius:4px;flex:1;min-width:200px;outline:none;transition:border-color 0.2s;width:100%;}
input:focus,select:focus{border-color:#999;}
.input-hint{font-size:11px;color:#bbb;margin-top:6px;letter-spacing:0.03em;}
.field-block{margin-bottom:20px;}
.field-label{font-size:11px;color:#ccc;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:8px;}
.badge{font-size:9px;padding:2px 6px;border-radius:2px;letter-spacing:0.1em;}
.badge-required{background:#1a1a1a;border:1px solid #c0392b;color:#e74c3c;}
.badge-optional{background:#1a1a1a;border:1px solid #333;color:#999;}
.info-box{margin-top:10px;padding:12px 16px;background:#13132a;border:1px solid #3a3a55;border-radius:4px;font-size:12px;color:#ccc;line-height:1.6;}
.info-box a{color:var(--text);text-decoration:underline;text-underline-offset:3px;}
.info-box strong{color:var(--text);}
.collapsible-link{margin-top:10px;font-size:11px;color:#aaa;cursor:pointer;text-decoration:underline;text-underline-offset:3px;display:inline-block;}
.collapsible-link:hover{color:var(--text);}
.verify-btn{background:#1a0a35;border:1px solid #7B2FFF;color:#a890ff;font-family:"Courier Prime",monospace;font-size:11px;padding:8px 12px;cursor:pointer;border-radius:6px;white-space:nowrap;transition:all 0.15s;flex-shrink:0;font-weight:600;}
.verify-btn:hover{background:#2a1045;border-color:#a890ff;color:var(--text);}
.verify-result{font-size:11px;margin-top:6px;display:none;}
.verify-result.ok{display:block;color:#2ecc71;}
.verify-result.fail{display:block;color:#e74c3c;}
.collapsible-content{display:none;margin-top:12px;padding:16px;background:#0f0f1e;border:1px solid #3a3a55;border-radius:4px;font-size:12px;color:#ccc;line-height:1.8;}
.collapsible-content.open{display:block;}
.divider{height:1px;background:#1a1a1a;margin:20px 0;}
.error-msg{color:#e74c3c;font-size:12px;margin-top:8px;display:none;scroll-margin-bottom:110px;}
.error-msg.visible{display:block;}
/* RETURNING USER */
.returning-toggle{font-size:11px;color:#aaa;cursor:pointer;text-decoration:underline;text-underline-offset:3px;display:inline-block;margin-top:4px;}
.returning-toggle:hover{color:var(--text);}
.returning-box{display:none;margin-top:12px;}
.returning-box.open{display:block;}
.returning-row{display:flex;gap:10px;flex-wrap:wrap;}
.load-btn{background:transparent;border:1px solid #444;color:#ccc;font-family:'Courier Prime',monospace;font-size:13px;padding:10px 16px;cursor:pointer;border-radius:4px;white-space:nowrap;transition:all 0.15s;}
.load-btn:hover{border-color:#999;color:var(--text);}
/* NAV BUTTONS */
.nav-btns{display:flex;justify-content:space-between;align-items:center;margin-top:32px;padding-top:20px;border-top:1px solid #1a1a1a;}
.nav-btn{background:transparent;border:1px solid #444;color:#bbb;font-family:'Courier Prime',monospace;font-size:13px;padding:10px 24px;cursor:pointer;border-radius:4px;transition:all 0.15s;letter-spacing:0.05em;}
.nav-btn:hover{border-color:#999;color:var(--text);}
.nav-btn.primary{background:#fff;color:#000;border-color:#fff;font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:0.1em;padding:10px 32px;}
.nav-btn.primary:hover{opacity:0.85;}
.nav-btn:disabled{opacity:0.3;cursor:not-allowed;}
/* PRESETS */
.presets-grid{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;}
.preset-btn{background:transparent;border:1px solid #333;color:#ccc;font-family:'Courier Prime',monospace;font-size:12px;padding:10px 18px;border-radius:3px;cursor:pointer;transition:all 0.15s;text-align:left;flex:1;min-width:150px;}
.preset-btn:hover{border-color:#aaa;color:var(--text);}
.preset-btn .preset-name{display:block;font-weight:700;font-size:13px;color:var(--text);margin-bottom:3px;}
.preset-btn .preset-desc{display:block;font-size:10px;color:#aaa;letter-spacing:0.05em;line-height:1.4;}
.preset-btn.active{border-color:#fff;background:#1a1a1a;}
.coll-action-btn{border-style:dashed !important;border-color:rgba(123,47,255,.4) !important;position:relative;}
.coll-action-btn:hover{border-style:solid !important;border-color:var(--violet) !important;background:rgba(123,47,255,.08) !important;}
.coll-action-btn.just-added{animation:collJustAdded .6s ease;}
@keyframes collJustAdded{
0%{background:rgba(52,211,153,.25);border-color:#34d399 !important;}
100%{background:transparent;}
}
.coll-card-flash{animation:collCardFlash 1.1s ease;}
@keyframes collCardFlash{
0%{box-shadow:0 0 0 3px rgba(123,47,255,.6);background:rgba(123,47,255,.08);}
100%{box-shadow:0 0 0 0px transparent;background:transparent;}
}
/* CATALOG CONTROLS */
.catalog-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:20px;}
.search-box{flex:1;min-width:180px;background:#0f0f1e;border:1px solid #3a3a55;color:var(--text);font-family:'Courier Prime',monospace;font-size:13px;padding:8px 14px;border-radius:4px;outline:none;transition:border-color 0.2s;width:auto;}
.search-box:focus{border-color:#999;}
.search-box::placeholder{color:#aaa;}
.global-btn{background:transparent;border:1px solid #444;color:#bbb;font-family:'Courier Prime',monospace;font-size:11px;padding:8px 14px;border-radius:3px;cursor:pointer;letter-spacing:0.05em;transition:all 0.15s;white-space:nowrap;}
.global-btn:hover{border-color:#999;color:var(--text);}
/* CATEGORIES */
.category{margin-bottom:4px;padding:10px 12px;border-bottom:none;background:#14142a;border-radius:10px;border:1px solid #2a2a45;}
.category:last-child{border-bottom:none;}
.category.hidden{display:none;}
.cat-header{display:flex;align-items:center;margin-bottom:0;cursor:pointer;padding:6px 0;user-select:none;min-height:28px;}
.cat-header:hover .cat-title{color:var(--text);}
.cat-chevron{font-size:10px;color:#555;transition:transform 0.2s;margin-left:8px;flex-shrink:0;}
.cat-chevron.open{transform:rotate(180deg);}
.pills-wrap{display:none;padding-top:6px;}
.pills-wrap.open{display:block;margin-top:4px;}
.cat-title{ font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:#bbb; display:flex; align-items:center; gap:8px; flex:1;}
.cat-icon{font-size:13px;}
.cat-count{font-size:10px;color:#aaa;margin-left:4px;}
.select-all{
font-size:10px;
color:#999;
cursor:pointer;
letter-spacing:0.1em;
text-transform:uppercase;
flex-shrink:0;
}
.select-all:hover{color:var(--text);}
.pills{display:flex;flex-wrap:wrap;gap:8px;}
.pill{background:transparent;border:1px solid #333;color:#ccc;font-family:'Courier Prime',monospace;font-size:13.5px;font-weight:500;padding:7px 14px;border-radius:4px;cursor:pointer;transition:all 0.15s;user-select:none;letter-spacing:0.02em;}
.pill:hover{border-color:#aaa;color:var(--text);}
.pill.selected{background:#fff;border-color:#fff;color:#000;font-weight:700;}
.pill.hidden{display:none;}
/* SUB-CATEGORIES */
.sub-category{margin:4px 0 10px 0;border-left:2px solid #222;padding-left:12px;}
.sub-cat-header{display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;user-select:none;}
.sub-cat-header:hover .sub-cat-title{color:var(--text);}
.sub-cat-chevron{font-size:9px;color:#555;transition:transform 0.2s;flex-shrink:0;}
.sub-cat-chevron.open{transform:rotate(180deg);}
.sub-cat-title{font-size:10px;letter-spacing:0.15em;text-transform:uppercase;color:#aaa;flex:1;}
.sub-select-all{font-size:9px;color:#999;cursor:pointer;letter-spacing:0.1em;text-transform:uppercase;flex-shrink:0;margin-left:auto;}
.sub-select-all:hover{color:var(--text);}
.sub-pills{display:flex;flex-wrap:wrap;gap:8px;padding:8px 0 4px 0;}
/* COUNTER BAR */
.counter-bar{position:sticky;bottom:0;background:#111;border-top:1px solid #3a3a55;padding:14px 32px;display:flex;align-items:center;justify-content:space-between;z-index:10;}
.count-display{font-size:11px;color:#bbb;letter-spacing:0.1em;}
.count-num{color:var(--text);font-size:20px;font-family:'Bebas Neue',sans-serif;}
.next-btn{background:#fff;color:#000;border:none;font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:0.1em;padding:10px 28px;cursor:pointer;border-radius:3px;transition:opacity 0.15s;}
.next-btn:hover{opacity:0.85;}
.next-btn:disabled{opacity:0.3;cursor:not-allowed;}
/* RESULT */
.result-section{margin-top:24px;padding:20px;background:#0f0f1e;border:1px solid #3a3a55;border-radius:6px;}
.result-label{font-size:10px;color:#bbb;letter-spacing:0.2em;text-transform:uppercase;margin-bottom:10px;}
.url-display{font-size:12px;color:var(--text);word-break:break-all;margin-bottom:14px;padding:10px;background:#13132a;border:1px solid #222;border-radius:4px;}
.result-btns{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.rbtn{padding:10px 22px;border-radius:4px;font-family:'Courier Prime',monospace;font-size:13px;cursor:pointer;border:1px solid #444;background:transparent;color:#ccc;transition:all 0.15s;text-decoration:none;display:inline-block;}
.rbtn:hover{border-color:#999;color:var(--text);}
.rbtn.primary{background:#fff;color:#000;border-color:#fff;font-weight:700;}
.rbtn.primary:hover{opacity:0.85;}
.token-save{padding:12px;background:#13132a;border:1px solid #1a1a1a;border-radius:4px;font-size:11px;color:#aaa;line-height:1.8;}
.token-save span{color:#ccc;}
.loading{text-align:center;padding:20px;color:#aaa;font-size:12px;letter-spacing:0.1em;display:none;}
.loading.visible{display:block;}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:#0f0f1e;}
::-webkit-scrollbar-thumb{background:#333;border-radius:2px;}
@media (max-width: 900px){
body{
padding:16px 0;
}
.filmstrip{
max-width:100%;
}
.sprocket{
width:34px;
}
.cell{
min-width:0;
}
.cell-header,
.progress-bar,
.wizard-step,
.counter-bar{
padding-left:16px !important;
padding-right:16px !important;
}
h1{
font-size:2.2rem;
padding-left:16px;
padding-right:16px;
}
}
@media (max-width: 700px){
.sprocket{
width:24px;
}
.hole{
width:14px;
height:12px;
margin:5px auto;
}
.step-label{
font-size:8px;
letter-spacing:0.08em;
}
.step-connector{
margin:0 4px;
}
.catalog-controls,
.nav-btns,
.builder-actions,
.result-btns,
.builder-header{
display:flex;
flex-direction:column !important;
align-items:stretch !important;
gap:10px !important;
}
.catalog-controls > *,
.nav-btns > *,
.builder-actions > *,
.result-btns > *{
width:100% !important;
min-width:0 !important;
}
.counter-bar{
flex-wrap:wrap;
gap:12px;
align-items:stretch;
}
.counter-bar > *{
width:100%;
}
.next-btn,
.nav-btn.primary,
.nav-btn,
.global-btn,
.rbtn,
.search-box{
width:100%;
min-width:0 !important;
box-sizing:border-box;
}
⚡ Recommended: Use Ultra MAX Lite on mobile, Nuvio, or older devices for the smoothest experience.
.step2-preset-grid{
grid-template-columns:1fr !important;
}
.result-section{
overflow:hidden;
}
}
@media (max-width: 520px){
.sprocket{
display:none;
}
.cell{
border-left:none !important;
border-right:none !important;
padding-left:12px !important;
padding-right:12px !important;
}
.wizard-step{
padding-left:4px !important;
padding-right:4px !important;
}
.filmstrip{
max-width:100%;
}
.sprocket{
width:18px;
}
.cell{
border-left:2px solid #000;
border-right:2px solid #000;
}
.cell-header{
padding-top:14px !important;
padding-bottom:12px !important;
}
h1{
font-size:1.7rem;
line-height:1;
padding-top:20px;
}
.progress-bar{
padding-top:14px !important;
padding-bottom:14px !important;
}
.wizard-step{
padding-top:18px !important;
padding-bottom:18px !important;
}
input[type=password],input[type=text],select{
min-width:0 !important;
}
}
@media (max-width: 700px){
#presetsPanel > div:last-child{
display:grid !important;
grid-template-columns:1fr !important;
gap:10px !important;
}
#presetsPanel .preset-btn{
width:100% !important;
min-width:0 !important;
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
text-align:left !important;
white-space:normal !important;
line-height:1.4 !important;
padding:12px 14px !important;
overflow-wrap:anywhere;
}
#presetsPanel .preset-btn br{
display:none;
}
#presetsPanel{
overflow:hidden;
}
}
@media (max-width: 700px){
#presetsPanel > div:last-child{
display:grid !important;
grid-template-columns:1fr !important;
gap:10px !important;
}
}
@media (min-width: 701px) and (max-width: 1024px){
#presetsPanel > div:last-child{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:12px !important;
}
}
@media (min-width: 1025px){
#presetsPanel > div:last-child{
display:grid !important;
grid-template-columns:1fr 1fr 1fr !important;
gap:14px !important;
}
}
#presetsPanel .preset-btn{
width:100% !important;
min-width:0 !important;
white-space:normal !important;
line-height:1.35 !important;
text-align:left !important;
padding:12px 14px !important;
}
/* Step 1 clean rebuild */
.step-1 .field-block{
margin-bottom: 18px;
}
.step-1 .field-label{
display:flex;
align-items:center;
gap:8px;
}
.step-1 .badge-optional{
opacity:0.55;
}
.step-1 .input-hint{
color:#8a8a8a;
font-size:11px;
line-height:1.6;
margin-top:8px;
}
.step-1 .info-box{
background:#0d0d0d;
border-color:#222;
}
.step-1 .returning-wrap{
margin-top:26px;
padding-top:18px;
border-top:1px solid #1a1a1a;
}
.step-1 .returning-toggle{
display:inline-block;
color:#aaa;
font-size:11px;
letter-spacing:0.04em;
}
.step-1 .returning-toggle:hover{
color:var(--text);
}
@media (max-width:700px){
.step-1 .field-block{
margin-bottom:16px;
}
}
/* Step 1 Pro Layout */
.step1-zone{
margin:18px 0 22px;
padding:14px 16px;
border:1px solid #222;
background:#0c0c0c;
border-radius:6px;
}
.step1-zone-title{
font-family:'Bebas Neue',sans-serif;
font-size:18px;
letter-spacing:.12em;
color:var(--text);
margin-bottom:10px;
}
.step1-zone-sub{
font-size:11px;
color:#8e8e8e;
line-height:1.5;
margin-bottom:14px;
}
.step1-enhance{
border-color:#1b1b1b;
background:#0f0f1e;
}
.step1-enhance .step1-zone-title{
color:#d6d6d6;
}
@media (max-width:700px){
.step1-zone{
padding:12px;
margin:14px 0 18px;
}
}
.banner-msg{
position:fixed;
top:18px;
left:50%;
transform:translateX(-50%);
z-index:9999;
min-width:280px;
max-width:90%;
padding:14px 18px;
border-radius:10px;
font-size:13px;
line-height:1.5;
box-shadow:0 10px 30px rgba(0,0,0,.45);
border:1px solid #222;
background:#0d0d0d;
color:var(--text);
animation:fadeIn .2s ease;
}
.banner-success{border-color:#2f6b3b;}
.banner-error{border-color:#7b2e2e;}
@keyframes fadeIn{
from{opacity:0;transform:translateX(-50%) translateY(-8px);}
to{opacity:1;transform:translateX(-50%) translateY(0);}
}
.page1-section-label{
margin:28px 0 8px;
font-size:22px;
font-weight:700;
letter-spacing:.03em;
color:var(--text);
}
.page1-section-label.optional{
color:#d0d0d0;
}
.page1-section-help{
color:#8d8d8d;
font-size:12px;
line-height:1.6;
margin-bottom:14px;
}
.howto-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.72);
z-index:99999;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
overscroll-behavior:contain;
}
.howto-card{
width:min(760px,96vw);
max-height:88vh;
overflow:auto;
background:#13132a;
border:1px solid #3a3a55;
border-radius:14px;
padding:24px;
}
.howto-card h2{
margin:0 0 12px;
color:var(--text);
font-size:30px;
}
.howto-card h3{
margin:18px 0 8px;
color:var(--text);
font-size:16px;
}
.howto-card p,
.howto-card li{
color:#bcbcbc;
line-height:1.65;
font-size:13px;
}
.howto-card ul{
padding-left:20px;
}
.howto-close{
float:right;
border:0;
border-radius:8px;
padding:8px 12px;
font-weight:700;
cursor:pointer;
}
.support-modal-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.72);
z-index:99999;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
overscroll-behavior:contain;
}
.support-modal-card{
width:min(480px,96vw);
max-height:88vh;
overflow:auto;
background:var(--card);
border:1px solid var(--border2);
border-radius:14px;
padding:24px;
box-shadow:0 12px 40px rgba(0,0,0,.4);
}
.support-modal-card h2{
margin:0 0 4px;
color:var(--text);
font-size:20px;
}
.support-modal-intro{
color:var(--text2,var(--muted));
font-size:12px;
line-height:1.5;
margin:0 0 18px;
}
.support-close{
float:right;
border:0;
background:transparent;
color:var(--text);
border-radius:8px;
padding:6px 10px;
font-weight:700;
font-size:18px;
cursor:pointer;
}
.support-field{
margin-bottom:14px;
}
.support-field label{
display:block;
color:var(--text);
font-size:12px;
font-weight:600;
margin-bottom:6px;
}
.support-field input[type="text"],
.support-field input[type="email"],
.support-field textarea{
width:100%;
box-sizing:border-box;
background:var(--input-bg,var(--bg2));
border:1px solid var(--border2);
color:var(--text);
font-family:inherit;
font-size:13px;
padding:10px 12px;
border-radius:10px;
resize:vertical;
}
.support-field textarea{
min-height:120px;
line-height:1.5;
}
.support-field input:focus,
.support-field textarea:focus{
outline:none;
border-color:var(--violet2,var(--violet));
}
.support-field-hint{
color:var(--muted);
font-size:11px;
margin-top:4px;
}
.support-honeypot{
position:absolute;
left:-9999px;
width:1px;
height:1px;
overflow:hidden;
}
.support-status{
min-height:18px;
font-size:12px;
margin:4px 0 14px;
}
.support-status.is-sending{ color:var(--muted); }
.support-status.is-success{ color:#3ddc84; }
.support-status.is-error{ color:#FF3D5A; }
.support-modal-actions{
display:flex;
gap:10px;
justify-content:flex-end;
flex-wrap:wrap;
}
.support-btn{
font-family:inherit;
font-size:13px;
font-weight:700;
padding:11px 20px;
border-radius:12px;
cursor:pointer;
transition:opacity .2s;
border:none;
}
.support-btn:disabled{
opacity:.6;
cursor:not-allowed;
}
.support-btn-cancel{
background:var(--hover);
border:1px solid var(--border2);
color:var(--text);
}
.support-btn-send{
background:linear-gradient(135deg,var(--violet),var(--coral));
color:#fff;
}
@media (max-width:520px){
.support-modal-card{
padding:18px;
width:100%;
max-height:92vh;
}
.support-modal-actions{
flex-direction:column-reverse;
}
.support-btn{
width:100%;
text-align:center;
}
}
.step-1 .field-block{
border-radius:10px;
}
.step-1 .field-block:nth-of-type(1),
.step-1 .field-block:nth-of-type(2),
.step-1 .field-block:nth-of-type(3){
border:1px solid #2f2f2f;
background:#121212;
padding:16px;
}
.optional-shell{
margin-top:24px;
padding:14px;
border:1px solid #232323;
border-radius:12px;
background:#111;
}
.optional-toggle{
width:100%;
text-align:left;
background:none;
border:0;
color:var(--text);
font-size:18px;
font-weight:700;
cursor:pointer;
padding:0;
}
.optional-sub{
color:#aaa;
font-size:12px;
margin:8px 0 14px;
}
.api-key-hero{
border:1px solid #3a3a3a !important;
background:linear-gradient(180deg,#151515,#0e0e0e) !important;
box-shadow:0 0 0 1px rgba(255,255,255,.04), 0 12px 35px rgba(0,0,0,.25);
padding:18px !important;
border-radius:12px !important;
}
.api-key-note{
margin-top:10px;
color:#aaa;
font-size:12px;
line-height:1.6;
}
.api-key-actions{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-top:10px;
}
.api-key-actions a{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 12px;
border-radius:8px;
border:1px solid #333;
color:var(--text);
text-decoration:none;
font-size:12px;
background:#111;
}
.api-key-actions a.primary{
background:#fff;
color:#000;
border-color:#fff;
font-weight:700;
}
/* Lite / Advanced builder mode */
body.lite-mode #step-2 .cat-header,
body.lite-mode #step-2 .pills {
display: none !important;
}
body.lite-mode #step-2 .catalog-section .cat-header,
body.lite-mode #step-2 #quickpicks {
display: flex !important;
}
.builder-mode-box {
border: 1px solid #3a3a55;
background: #080808;
padding: 14px;
margin: 16px 0 18px 0;
border-radius: 8px;
}
.builder-mode-title {
font-weight: 700;
color: var(--text);
margin-bottom: 6px;
}
.builder-mode-help {
color: #aaa;
font-size: 12px;
line-height: 1.5;
margin-bottom: 12px;
}
.builder-mode-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.builder-mode-btn {
padding: 10px 14px;
border: 1px solid #333;
background: #111;
color: #ddd;
border-radius: 6px;
cursor: pointer;
}
.builder-mode-btn.active {
background: #fff;
color: #000;
}
.quick-v3 { margin:20px 0; }
/* ── STEP 1 OVERHAUL ── */
.optional-shell {
background: var(--card);
border: 1px solid var(--border2);
border-radius: 16px;
overflow: hidden;
margin-top: 16px;
}
.optional-toggle {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 16px 20px;
background: transparent;
border: none;
color: var(--text);
font-family: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
text-align: left;
transition: background .15s;
}
.optional-toggle:hover { background: var(--hover); }
.optional-sub {
font-size: 11px;
color: var(--muted);
padding: 0 20px 14px;
margin-top: -8px;
}
.field-block {
background: var(--surface-soft);
border: 1px solid var(--border);
border-radius: 12px;
padding: 16px;
margin-bottom: 12px;
}
.field-block:last-child { margin-bottom: 0; }
.quick-v3-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.quick-card {
padding:20px 16px;
border:1px solid var(--border2);
border-radius:16px;
background:linear-gradient(135deg,var(--card),rgba(255,255,255,.02));
color:var(--text);
cursor:pointer;
text-align:left;
transition:all .2s;
position:relative;
overflow:hidden;
}
.quick-card::before {
content:'';
position:absolute;
inset:0;
opacity:0;
transition:opacity .2s;
}
.quick-card:nth-child(1)::before { background:linear-gradient(135deg,rgba(123,47,255,.15),transparent); }
.quick-card:nth-child(2)::before { background:linear-gradient(135deg,rgba(255,94,91,.15),transparent); }
.quick-card:nth-child(3)::before { background:linear-gradient(135deg,rgba(99,102,241,.15),transparent); }
.quick-card:nth-child(4)::before { background:linear-gradient(135deg,rgba(0,210,160,.15),transparent); }
.quick-card:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,0,0,.4); }
.quick-card:nth-child(1):hover { border-color:var(--violet); }
.quick-card:nth-child(2):hover { border-color:#FF5E5B; }
.quick-card:nth-child(3):hover { border-color:#6366f1; }
.quick-card:nth-child(4):hover { border-color:#00d2a0; }
.quick-card:hover::before { opacity:1; }
.quick-card.active { border-color:var(--violet); box-shadow:0 0 0 2px rgba(123,47,255,.2); }
.quick-icon { font-size:1.8rem; margin-bottom:10px; display:block; position:relative; z-index:1; }
.quick-title { font-family:'Bebas Neue',sans-serif; font-size:1.2rem; letter-spacing:.04em; color:var(--text); margin-bottom:4px; position:relative; z-index:1; }
.quick-desc { font-size:11px; color:var(--muted); line-height:1.5; position:relative; z-index:1; }
.quick-v3-summary { font-size:12px; color:var(--muted); margin:14px 0; padding:12px 16px; background: var(--surface-soft); border:1px solid var(--border); border-radius:10px; line-height:1.6; min-height:40px; }
.quick-v3-actions { display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
/* Quick Setup v3 separation */
body.quick-v3-mode #setupFormStart,
body.quick-v3-mode .setup-form,
body.quick-v3-mode .quick-start,
body.quick-v3-mode .required-setup,
body.quick-v3-mode .optional-enhancements {
display: none !important;
}
/* Quick Setup v3 hard separation */
body.quick-v3-mode #advancedBuilderContainer {
display: none !important;
}
body.quick-v3-mode #advancedBackBar {
display: none !important;
}
/* HARD Quick Setup isolation */
body.quick-v3-mode #step-1 > *:not(#quickSetupV3) {
display: none !important;
}
body.quick-v3-mode #quickSetupV3 {
display: block !important;
margin-top: 32px !important;
}
#quickSetupV3 textarea {
width: 100% !important;
min-height: 90px !important;
box-sizing: border-box !important;
display: block !important;
margin-top: 10px !important;
}
#quickSetupV3 input[type="text"] {
width: 100% !important;
box-sizing: border-box !important;
}
/* Hide advanced Stream Bridge while Quick Setup is active */
body.quick-v3-mode #streamBridgeSection,
body.quick-v3-mode .stream-bridge-section {
display: none !important;
}
body.quick-v3-mode #advancedStreamBridgeBlock {
display: none !important;
}
/* Ultra MAX clean step flow */
#quickSetupV3,
#advancedBackBar {
display:none !important;
}
#advancedBuilderContainer {
display:block !important;
}
.stream-wizard-card{
margin-top:14px;
padding:18px;
border:1px solid rgba(255,255,255,.12);
border-radius:14px;
background:rgba(255,255,255,.035);
}
.stream-wizard-row{
display:flex;
gap:10px;
align-items:center;
margin-top:12px;
}
.stream-wizard-row input{
flex:1;
min-width:0;
padding:12px;
background:#151515;
color:var(--text);
border:1px solid #333;
border-radius:10px;
}
.stream-wizard-result{
margin-top:12px;
}
.stream-ok,.stream-error,.stream-checking,.stream-added{
padding:12px;
border-radius:12px;
background: var(--surface-soft);
border:1px solid rgba(255,255,255,.12);
}
.stream-ok{border-color:rgba(0,255,170,.35);}
.stream-error{border-color:rgba(255,80,80,.45);}
.stream-added{margin-top:10px;border-color:rgba(0,255,170,.35);}
.stream-type-pill{
display:inline-block;
margin:4px 4px 0 0;
padding:4px 8px;
border-radius:999px;
background:rgba(255,255,255,.12);
font-size:11px;
}
.pretty-stream-list{margin-top:12px;}
.pretty-stream-card{
margin:10px 0;
padding:12px 14px;
border-radius:14px;
background:rgba(255,255,255,.07);
border:1px solid rgba(0,255,170,.28);
}
.pretty-stream-head{
display:flex;
justify-content:space-between;
gap:10px;
align-items:center;
font-weight:800;
}
.pretty-stream-url{
margin-top:6px;
font-size:11px;
opacity:.65;
word-break:break-word;
}
.pretty-stream-actions{
margin-top:10px;
display:flex;
gap:8px;
}
.pretty-stream-btn{
padding:7px 10px;
border-radius:9px;
border:1px solid rgba(255,255,255,.18);
background:rgba(255,255,255,.1);
color:var(--text);
cursor:pointer;
}
.pretty-stream-btn.danger{
border-color:rgba(255,80,80,.5);
}
.pretty-stream-pill{
font-size:11px;
padding:4px 8px;
border-radius:999px;
background:rgba(0,255,170,.18);
}
.pretty-stream-rename{
margin-top:10px;
display:grid;
gap:5px;
}
.pretty-stream-rename > span{
color:var(--muted);
font-size:9px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
}
.pretty-stream-rename input{
width:100%;
min-width:0;
box-sizing:border-box;
padding:8px 10px;
border:1px solid var(--border2);
border-radius:9px;
background:var(--bg2);
color:var(--text);
font-size:12px;
}
.pretty-stream-catalogs{
margin-top:10px;
padding:9px 10px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
border:1px solid rgba(96,165,250,.18);
border-radius:10px;
background:rgba(96,165,250,.055);
color:#b9d6ff;
font-size:10px;
}
.pretty-stream-btn:disabled{
opacity:.42;
cursor:not-allowed;
}
.pretty-stream-btn.catalog-install{
flex:0 0 auto;
border-color:rgba(96,165,250,.35);
color:#b9d6ff;
}
.stream-filter-hint{
margin-top:8px;
color:var(--muted);
font-size:10px;
line-height:1.5;
}
.stream-filter-grid{
margin-top:14px;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
.stream-filter-field{
min-width:0;
display:grid;
gap:6px;
}
.stream-filter-field > span{
color:var(--muted);
font-size:10px;
font-weight:750;
letter-spacing:.06em;
text-transform:uppercase;
}
.stream-filter-field select{
width:100%;
min-width:0;
box-sizing:border-box;
padding:9px 10px;
border:1px solid var(--border2);
border-radius:8px;
background:var(--bg2,#1a1a2e);
color:var(--text);
font-size:12px;
}
.stream-filter-field-wide{
grid-column:1 / -1;
}
.stream-notice-toggle{
margin-top:12px;
padding:10px 11px;
display:flex;
align-items:flex-start;
gap:9px;
border:1px solid var(--border2);
border-radius:10px;
background:var(--surface-soft);
cursor:pointer;
}
.stream-notice-toggle input{
width:16px;
height:16px;
margin-top:2px;
flex:0 0 16px;
}
.stream-notice-toggle strong{
display:block;
color:var(--text);
font-size:12px;
}
.stream-notice-toggle small{
display:block;
margin-top:3px;
color:var(--muted);
font-size:10px;
line-height:1.45;
}
@media(max-width:700px){
.stream-wizard-row{flex-direction:column;align-items:stretch;}
.stream-filter-grid{grid-template-columns:1fr;}
.stream-filter-field-wide{grid-column:auto;}
.pretty-stream-catalogs{
align-items:stretch;
flex-direction:column;
}
.pretty-stream-btn.catalog-install{width:100%;}
}
/* Guided Setup Accordion */
.guided-setup{
margin:18px 0 24px;
}
.guided-card{
border:1px solid rgba(255,255,255,.12);
border-radius:16px;
background:rgba(255,255,255,.035);
margin:12px 0;
overflow:hidden;
}
.guided-head{
width:100%;
border:0;
background: var(--surface-soft);
color:var(--text);
padding:15px 16px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
cursor:pointer;
text-align:left;
}
.guided-title{
font-weight:800;
letter-spacing:.04em;
}
.guided-sub{
margin-top:4px;
color:#aaa;
font-size:12px;
line-height:1.4;
}
.guided-badge{
font-size:11px;
border:1px solid rgba(255,255,255,.18);
border-radius:999px;
padding:4px 8px;
color:#bbb;
white-space:nowrap;
}
.guided-card.complete .guided-badge{
border-color:rgba(0,255,170,.35);
color:#bfffe8;
}
.guided-body{
display:none;
padding:16px;
}
.guided-card.open .guided-body{
display:block;
}
.guided-actions{
display:flex;
justify-content:flex-end;
gap:10px;
margin-top:16px;
}
.guided-next{
padding:10px 16px;
border-radius:10px;
border:1px solid rgba(255,255,255,.18);
background:#fff;
color:#000;
font-weight:800;
cursor:pointer;
}
.guided-next:disabled{
opacity:.35;
cursor:not-allowed;
}
.guided-skip{
padding:10px 16px;
border-radius:10px;
border:1px solid rgba(255,255,255,.18);
background:rgba(255,255,255,.08);
color:var(--text);
cursor:pointer;
}
.guided-hidden-original{
display:none !important;
}
/* Guided Page 2 + 3 */
.guided-page-card{
border:1px solid rgba(255,255,255,.12);
border-radius:16px;
background:rgba(255,255,255,.035);
padding:16px;
margin:14px 0;
min-width:0;
box-sizing:border-box;
}
.guided-page-title{
font-size:18px;
font-weight:900;
letter-spacing:.04em;
color:var(--text);
margin-bottom:6px;
}
.guided-page-help{
color:#aaa;
font-size:12px;
line-height:1.55;
margin-bottom:14px;
}
.guided-page-step{
display:inline-flex;
align-items:center;
gap:8px;
border:1px solid rgba(255,255,255,.16);
border-radius:999px;
padding:5px 10px;
font-size:11px;
color:#bbb;
margin-bottom:10px;
}
.guided-soft-divider{
height:1px;
background:rgba(255,255,255,.08);
margin:16px 0;
}
/* Step 2 guided accordion */
.step2-accordion-card{
border:1px solid #2a2a45;
border-radius:16px;
background:#14142a;
margin:6px 0;
overflow:hidden;
}
.step2-accordion-head{
width:100%;
border:0;
background:#1a1a35;
color:var(--text);
padding:15px 16px;
display:flex;
justify-content:space-between;
align-items:center;
cursor:pointer;
text-align:left;
}
.step2-accordion-title{
font-weight:900;
letter-spacing:.04em;
}
.step2-accordion-help{
margin-top:4px;
color:#aaa;
font-size:12px;
}
.step2-accordion-body{
display:none;
padding:16px;
}
.step2-accordion-card.open .step2-accordion-body{
display:block;
}
.step2-accordion-badge{
font-size:11px;
border:1px solid rgba(255,255,255,.18);
border-radius:999px;
padding:4px 8px;
color:#bbb;
}
/* Hide legacy guided blocks when accordion is active */
#step2Accordion ~ .guided-page-card,
#step2Accordion ~ .section-title,
#step2Accordion ~ .step2-preset-grid,
#step2Accordion ~ .catalog-controls,
#step2Accordion ~ .category{
display:none !important;
}
/* SAFE STEP 3 ACCORDION */
.step3-safe {
border:1px solid #3a3a55;
border-radius:10px;
margin-bottom:12px;
overflow:hidden;
}
.step3-safe-head {
padding:14px;
cursor:pointer;
display:flex;
justify-content:space-between;
align-items:center;
background:#111;
}
.step3-safe-body {
display:none;
padding:10px;
}
.step3-safe.open .step3-safe-body {
display:block;
}
/* Final action panel */
#step-4 .nav-btns{
display:grid !important;
grid-template-columns:1fr;
gap:12px;
margin-top:24px;
padding:16px;
border:1px solid rgba(255,255,255,.12);
border-radius:18px;
background:rgba(255,255,255,.035);
}
#step-4 .nav-btns button{
width:100%;
min-height:62px;
border-radius:14px !important;
white-space:normal !important;
line-height:1.2 !important;
font-size:13px !important;
}
#step-4 #genBtn{
min-height:78px;
font-size:16px !important;
box-shadow:0 0 24px rgba(255,255,255,.10);
}
#step-4 .final-note{
display:flex;
align-items:center;
justify-content:center;
text-align:center;
min-height:62px;
padding:10px;
border:1px dashed rgba(255,255,255,.18);
border-radius:14px;
color:#aaa !important;
}
@media(min-width:760px){
#step-4 .nav-btns{
grid-template-columns:.8fr 1.25fr 1.25fr 1.25fr 1fr 1.45fr;
align-items:stretch;
}
}
/* Final hero action layout */
#step-4 .nav-btns{
display:flex !important;
flex-direction:column !important;
gap:14px !important;
margin-top:28px !important;
padding:18px !important;
border:1px solid rgba(255,255,255,.12) !important;
border-radius:18px !important;
background:rgba(255,255,255,.035) !important;
}
#step-4 .final-launch-note{
text-align:center;
color:#aaa;
font-size:11px;
letter-spacing:.08em;
text-transform:uppercase;
}
#step-4 #genBtn{
width:100% !important;
min-height:86px !important;
border-radius:18px !important;
font-size:17px !important;
letter-spacing:.09em !important;
box-shadow:0 0 28px rgba(255,255,255,.14) !important;
}
#step-4 .final-export-row{
display:grid;
grid-template-columns:1fr;
gap:10px;
}
#step-4 .final-export-row button{
width:100% !important;
min-height:58px !important;
border-radius:14px !important;
font-size:12px !important;
opacity:.88;
}
#step-4 .final-back-row{
display:flex;
justify-content:flex-start;
}
#step-4 .final-back-row button{
min-height:46px !important;
width:auto !important;
min-width:120px !important;
opacity:.7;
}
@media(min-width:760px){
#step-4 .final-export-row{
grid-template-columns:repeat(3,1fr);
}
}
/* Final launch polish */
#step-4 #genBtn{
background:linear-gradient(135deg,#ffffff,#dcdcdc) !important;
color:#000 !important;
font-weight:800 !important;
letter-spacing:.12em !important;
transition:transform .2s ease, box-shadow .2s ease !important;
}
#step-4 #genBtn:hover{
transform:translateY(-2px);
box-shadow:0 0 40px rgba(255,255,255,.25) !important;
}
#step-4 #genBtn:active{
transform:scale(.98);
box-shadow:0 0 12px rgba(255,255,255,.15) !important;
}
#step-4 .final-export-row{
margin-top:6px;
padding-top:12px;
border-top:1px solid rgba(255,255,255,.08);
}
#step-4 .final-export-row button{
background: var(--surface-soft) !important;
border:1px solid rgba(255,255,255,.12) !important;
}
#step-4 .final-export-row button.primary{
background:rgba(255,255,255,.9) !important;
color:#000 !important;
}
#step-4 .final-back-row{
margin-top:10px;
opacity:.6;
}
#step-4 .final-back-row button{
border:1px solid rgba(255,255,255,.15) !important;
background:transparent !important;
}
#step-4 .final-launch-note{
font-size:12px !important;
color:#bbb !important;
letter-spacing:.12em !important;
}
/* Generate button animation */
@keyframes ultraPulse {
0% { box-shadow:0 0 18px rgba(255,255,255,.12); }
50% { box-shadow:0 0 42px rgba(255,255,255,.35); }
100% { box-shadow:0 0 18px rgba(255,255,255,.12); }
}
@keyframes ultraSpin {
to { transform:rotate(360deg); }
}
#step-4 #genBtn{
position:relative;
overflow:hidden;
animation:ultraPulse 2.2s ease-in-out infinite;
}
#step-4 #genBtn.generating{
pointer-events:none;
opacity:.92;
}
#step-4 #genBtn.generating::before{
content:"";
width:18px;
height:18px;
border:3px solid rgba(0,0,0,.25);
border-top-color:#000;
border-radius:50%;
display:inline-block;
margin-right:10px;
vertical-align:-4px;
animation:ultraSpin .8s linear infinite;
}
#step-4 #genBtn.generated{
animation:none;
background:linear-gradient(135deg,#dfffe8,#ffffff) !important;
}
/* Mobile responsive polish */
@media(max-width:700px){
body{
overflow-x:hidden;
}
.container,
.main,
.wizard,
.content{
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
}
.wizard-step{
padding:18px 14px !important;
}
.progress-bar{
gap:6px !important;
padding:10px 8px !important;
}
.step-label{
font-size:8px !important;
letter-spacing:.08em !important;
}
.step-circle{
width:24px !important;
height:24px !important;
min-width:24px !important;
font-size:11px !important;
}
.step-connector{
min-width:22px !important;
}
.quick-v3-grid,
.step2-preset-grid,
.guided-tools-grid{
grid-template-columns:1fr !important;
}
.input-row,
.stream-wizard-row,
.catalog-controls,
.builder-actions,
.result-btns{
flex-direction:column !important;
align-items:stretch !important;
}
input,
select,
textarea,
button,
.nav-btn,
.global-btn,
.verify-btn{
max-width:100% !important;
box-sizing:border-box !important;
}
.nav-btn,
.global-btn,
.verify-btn{
min-height:44px !important;
}
.catalog-controls input,
.search-box{
width:100% !important;
}
.pills{
display:flex !important;
flex-wrap:wrap !important;
gap:8px !important;
}
.pill{
max-width:100% !important;
white-space:normal !important;
line-height:1.25 !important;
padding:8px 10px !important;
}
.builder-header{
flex-direction:column !important;
align-items:stretch !important;
}
.builder-actions{
display:grid !important;
grid-template-columns:1fr !important;
gap:8px !important;
}
.result-section{
padding:14px !important;
}
.stream-wizard-card{
padding:14px !important;
}
.pretty-stream-actions{
flex-direction:column !important;
}
.pretty-stream-btn{
width:100% !important;
min-height:42px !important;
}
#step-4 .final-export-row{
grid-template-columns:1fr !important;
}
#step-4 #genBtn{
min-height:76px !important;
}
#step-4 .final-back-row button{
width:100% !important;
}
#counterBar{
left:8px !important;
right:8px !important;
bottom:8px !important;
width:auto !important;
border-radius:14px !important;
}
.count-display{
font-size:10px !important;
}
.url-display,
#resultToken{
font-size:11px !important;
word-break:break-all !important;
}
}
@media(max-width:420px){
h1,
.hero-title{
font-size:32px !important;
}
.section-title{
font-size:14px !important;
}
.quick-card,
.guided-card,
.guided-page-card,
.step2-accordion-card{
border-radius:14px !important;
}
#step-4 .nav-btns{
padding:12px !important;
}
}
/* Stream Wizard preset choices */
.stream-choice-grid{
display:grid;
grid-template-columns:1fr;
gap:10px;
margin:12px 0 14px;
}
.stream-choice-card{
border:1px solid rgba(255,255,255,.14);
border-radius:14px;
background:rgba(255,255,255,.045);
color:var(--text);
padding:14px;
text-align:left;
cursor:pointer;
}
.stream-choice-card:hover{
border-color:rgba(255,255,255,.32);
background:rgba(255,255,255,.075);
}
.stream-choice-title{
font-weight:900;
margin-bottom:4px;
}
.stream-choice-help{
color:#aaa;
font-size:12px;
line-height:1.45;
}
.stream-choice-card.active{
border-color:rgba(0,255,170,.45);
box-shadow:0 0 18px rgba(0,255,170,.08);
}
@media(min-width:760px){
.stream-choice-grid{
grid-template-columns:repeat(3,1fr);
}
}
/* Stream Provider Grid */
.stream-provider-grid{
display:grid;
grid-template-columns:1fr;
gap:10px;
margin:12px 0 14px;
}
.stream-provider{
border:1px solid rgba(255,255,255,.14);
border-radius:14px;
padding:14px;
background: var(--surface-soft);
cursor:pointer;
color:var(--text);
text-align:left;
}
.stream-provider:hover{
border-color:rgba(255,255,255,.35);
background:rgba(255,255,255,.08);
}
.stream-provider.active{
border-color:rgba(0,255,170,.5);
box-shadow:0 0 18px rgba(0,255,170,.08);
}
.stream-provider-title{
font-weight:900;
}
.stream-provider-desc{
font-size:12px;
color:#aaa;
margin-top:4px;
line-height:1.4;
}
.stream-helper{
margin-top:10px;
font-size:12px;
color:#aaa;
}
@media(min-width:700px){
.stream-provider-grid{
grid-template-columns:repeat(2,1fr);
}
}
@media(min-width:1100px){
.stream-provider-grid{
grid-template-columns:repeat(3,1fr);
}
}
.stream-provider.added{
border-color:rgba(0,255,170,.65)!important;
background:rgba(0,255,170,.10)!important;
box-shadow:0 0 0 1px rgba(0,255,170,.25), 0 0 22px rgba(0,255,170,.10);
}
.stream-provider-added{
margin-top:8px;
display:inline-block;
font-size:11px;
padding:4px 8px;
border-radius:999px;
background:rgba(0,255,170,.16);
color:#bfffe8;
border:1px solid rgba(0,255,170,.35);
}
/* Stream setup link cards */
.stream-provider.external-link{
border-color:rgba(255,255,255,.18);
}
.stream-provider.external-link .stream-provider-desc::after{
content:" ↗";
opacity:.8;
}
.stream-setup-help{
margin:12px 0 14px;
padding:12px 14px;
border:1px solid rgba(255,255,255,.12);
border-radius:14px;
background:rgba(255,255,255,.045);
color:#bbb;
font-size:12px;
line-height:1.6;
}
.lang-label { display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--border2);border-radius:8px;cursor:pointer;font-size:13px;user-select:none;min-width:0;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.lang-label:hover { background:var(--hover); }
.lang-label input { cursor:pointer; }
@media (max-width: 700px){
}
/* ULTRAMAX SETUP MODE SELECTOR START */
.um-mode-chooser {
margin-bottom: 26px;
}
.um-mode-chooser.hidden {
display: none;
}
.um-mode-intro {
margin-bottom: 18px;
padding: 18px 20px;
border: 1px solid var(--border2);
border-radius: 18px;
background:
radial-gradient(
circle at 15% 0%,
rgba(123,47,255,.14),
transparent 42%
),
var(--card);
}
.um-mode-kicker {
margin-bottom: 6px;
color: var(--violet2);
font-size: 10px;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
}
.um-mode-title {
margin-bottom: 7px;
color: var(--text);
font-size: 1.35rem;
font-weight: 800;
}
.um-mode-copy {
color: var(--muted);
font-size: 13px;
line-height: 1.55;
}
.um-mode-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.um-mode-card {
min-height: 168px;
padding: 20px 17px;
border: 1px solid var(--border2);
border-radius: 18px;
background:
linear-gradient(
155deg,
rgba(255,255,255,.055),
rgba(255,255,255,.018)
);
color: var(--text);
font: inherit;
text-align: left;
cursor: pointer;
transition:
transform .18s ease,
border-color .18s ease,
background .18s ease;
}
.um-mode-card:hover {
transform: translateY(-2px);
border-color: var(--mode-colour);
background:
linear-gradient(
155deg,
color-mix(
in srgb,
var(--mode-colour) 14%,
transparent
),
rgba(255,255,255,.02)
);
}
.um-mode-icon {
width: 46px;
height: 46px;
margin-bottom: 17px;
display: grid;
place-items: center;
border-radius: 14px;
background: var(--mode-colour);
font-size: 22px;
box-shadow:
0 10px 28px
color-mix(
in srgb,
var(--mode-colour) 28%,
transparent
);
}
.um-mode-name {
margin-bottom: 6px;
font-size: 15px;
font-weight: 800;
}
.um-mode-desc {
color: var(--muted);
font-size: 11px;
line-height: 1.5;
}
.um-mode-reopen {
display: none;
margin-bottom: 18px;
}
.um-mode-reopen.visible {
display: block;
}
@media (max-width: 720px) {
.um-mode-grid {
grid-template-columns: 1fr;
}
.um-mode-card {
min-height: auto;
display: grid;
grid-template-columns: 48px 1fr;
column-gap: 14px;
align-items: center;
}
.um-mode-icon {
grid-row: 1 / 3;
margin: 0;
}
.um-mode-name,
.um-mode-desc {
grid-column: 2;
}
}
/* ULTRAMAX SETUP MODE SELECTOR END */
/* ULTRAMAX ROUTE CHOOSER VISIBILITY FIX START */
body.um-route-choosing #step1Toolbar,
body.um-route-choosing #returningBox,
body.um-route-choosing #quickSetupV3,
body.um-route-choosing #advancedBackBar,
body.um-route-choosing #advancedBuilderContainer {
display: none !important;
}
body.um-route-choosing #umModeChooser {
display: block !important;
}
body:not(.um-route-choosing) #umModeChooser.hidden {
display: none !important;
}
/* ULTRAMAX ROUTE CHOOSER VISIBILITY FIX END */
/* Collection folder row labels */
.folder-row-entry {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
padding: 7px 9px;
background: #0d0d1a;
border: 1px solid #252544;
border-radius: 6px;
}
.folder-row-label {
display: block;
flex: 1 1 auto;
min-width: 0;
color: #e8e8f0;
font-size: 12px;
line-height: 1.35;
overflow-wrap: anywhere;
}
.folder-row-remove {
flex: 0 0 auto;
}
/* ===== setup.html style block 02: block-02 ===== */
.um-app-mode .um-sidebar-nav { display: none !important; }
.um-app-mode #step1Toolbar { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
.um-app-mode #step1Toolbar > button { width: 100% !important; justify-content: center !important; }
.um-app-mode #step1Toolbar > div { position: relative !important; width: 100% !important; }
.um-app-mode #step1Toolbar > div > button { width: 100% !important; justify-content: center !important; }
.um-app-mode #toolsMenu { left: 0 !important; right: 0 !important; width: 100% !important; }
.um-app-mode #nuvio-qr-card { display: none !important; }
.um-app-mode .s2-layout { grid-template-columns: 1fr !important; }
.um-app-mode .s2-preview-col { display: none !important; }
.um-app-mode .s2-preview-fab { display: flex !important; }
/* Force mobile layout structure regardless of Request-Desktop-Site viewport spoofing */
.um-app-mode .um-app { flex-direction: column !important; }
.um-app-mode .um-sidebar { width: 100% !important; min-width: unset !important; height: auto !important; position: sticky !important; top: 0 !important; flex-direction: row !important; border-right: none !important; border-bottom: 1px solid var(--border) !important; z-index: 100 !important; }
.um-app-mode .um-sidebar-footer { display: none !important; }
.um-app-mode .wizard-step { padding: 16px !important; }
.um-app-mode .um-step-header { padding: 16px !important; }
.um-app-mode .um-toolbar { padding: 10px 16px !important; gap: 8px !important; }
.um-app-mode .um-toolbar-label { display: none !important; }
.um-app-mode .um-fields-grid { grid-template-columns: 1fr !important; }
.um-app-mode .um-sidebar-footer { display: none !important; }
.um-app-mode .um-sidebar-logo { flex: 1 !important; width: 100% !important; text-align: center !important; padding: 24px 16px !important; border: none !important; }
.um-app-mode .um-logo-link { font-size: 2rem !important; letter-spacing: .06em !important; }
.um-app-mode #step1BackHome { display: flex !important; justify-content: center !important; align-items: center !important; text-align: center !important; width: 100% !important; }
.um-app-mode .s2-preview-fab, .um-app-mode #summaryBtn { display: none !important; }
.um-app-mode .s2-app-summary-btn, .um-app-mode .s2-app-preview-btn { display: flex !important; align-items: center; justify-content: center; }
.um-app-mode #step-2 .nav-btns { flex-wrap: wrap !important; gap: 8px !important; }
.um-app-mode #step-2 .nav-btns > * { flex: 1 1 auto !important; }
.um-app-mode .s2ab { padding: 9px 16px !important; font-size: 12px !important; border-radius: 10px !important; font-weight: 700 !important; }
.um-app-mode .s2ab-clear { background: rgba(255,61,90,.12) !important; }
.um-app-mode .s2ab-hide, .um-app-mode .s2ab-unhide { background: var(--surface-soft) !important; border-color: rgba(255,255,255,.15) !important; }
.um-app-mode .s2-showall { border-style: solid !important; background: var(--surface-soft) !important; padding: 13px 16px !important; font-size: 13px !important; font-weight: 600 !important; }
.um-app-mode .s2-presets-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.um-app-mode .s2-presets-grid > *,
.um-app-mode .s2-preset,
.um-app-mode .s2-builder-col,
.um-app-mode .wizard-step,
.um-app-mode .um-main {
min-width: 0 !important;
max-width: 100% !important;
}
html.um-app-mode,
html.um-app-mode body {
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
@media (max-width: 430px) {
.um-app-mode .s2-presets-grid {
grid-template-columns: 1fr !important;
}
}
.um-app-mode .s2-builder-col { padding-right: 0 !important; }
.um-app-mode .s2-layout, .um-app-mode .s2-builder-col, .um-app-mode .s2-presets-grid { width: 100% !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box !important; }
.um-app-mode .s2-layout {
margin-left: 0 !important;
min-width: 0 !important;
overflow: hidden !important;
}
.um-app-mode.s3-app-detail-mode .coll-sticky-bar { display: none !important; }
.um-app-mode.s3-app-detail-mode .coll-card.coll-collapsed { display: none !important; }
.um-app-mode.s3-app-detail-mode .s3-sticky-presets { display: none !important; }
.um-app-mode #pushToNuvioCard { grid-column: 1 / -1 !important; }
/* Folder editor cleanup — CSS only, overrides inline styles, no JS/template changes */
.um-app-mode .coll-card-header, .um-app-mode .folder-header { flex-wrap: wrap !important; }
.um-app-mode .coll-card-title, .um-app-mode .folder-title { flex-basis: 100% !important; order: 1; }
.um-app-mode .coll-card-meta, .um-app-mode .folder-meta { flex-basis: 100% !important; order: 2; margin-top: 2px; }
.um-app-mode .coll-card-actions, .um-app-mode .folder-actions { flex-basis: 100% !important; order: 3; flex-wrap: wrap !important; margin-top: 8px; }
.um-app-mode .folder-body { padding: 14px !important; gap: 14px !important; }
.um-app-mode .folder-body > div:nth-child(1) { grid-template-columns: 1fr !important; gap: 14px !important; }
.um-app-mode .folder-body > div:nth-child(2) { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
.um-app-mode .s2-presets-grid > *:last-child:nth-child(odd) { grid-column: 1 / -1 !important; }
.s2-presets-grid > *:last-child:nth-child(odd) { grid-column: 1 / -1 !important; }
.s2-presets-grid > *:last-child:nth-child(odd) .s2-preset-strip { justify-content: center !important; }
.s2-presets-grid > *:last-child:nth-child(odd) .s2-preset-body { text-align: center !important; }
.um-app-mode .s2-presets-grid > *:last-child:nth-child(odd) .s2-preset-strip { justify-content: center !important; }
.um-app-mode .s2-presets-grid > *:last-child:nth-child(odd) .s2-preset-body { text-align: center !important; }
.um-app-mode .optional-toggle, .um-app-mode .optional-sub { display: none !important; }
.opt-subsection {
background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
border: 1px solid var(--border2); border-radius: 14px;
margin-bottom: 10px; overflow: hidden;
}
.opt-subsection summary {
list-style: none; cursor: pointer; padding: 14px 16px;
font-size: 14px; font-weight: 700; color: var(--text);
display: flex; align-items: center; gap: 10px;
position: relative;
}
.opt-subsection summary::-webkit-details-marker { display: none; }
.opt-subsection summary::after {
content: '›'; position: absolute; right: 16px; font-size: 20px; color: var(--muted);
transform: rotate(90deg); transition: transform .2s;
}
.opt-subsection[open] > summary::after { transform: rotate(270deg); }
.opt-subsection > *:not(summary) { padding: 0 16px 16px; }
.opt-subsection[open] > summary { border-bottom: 1px solid var(--border2); margin-bottom: 14px; }
/* ===== setup.html style block 03: ultramax-theme-mode ===== */
/* ── Light theme: semantic token re-definition ──
Overriding the custom properties themselves (rather than hardcoding
colours per selector) means every rule elsewhere in the file that
already reads var(--card), var(--text), var(--border), etc. re-themes
automatically. Violet stays the primary accent and coral the secondary
accent per Ultra MAX branding; neutrals are soft violet-tinted rather
than generic grey. */
body.light-mode {
--bg: #f6f4fd;
--bg2: #ece6fb;
--card: #ffffff;
--card2: #f8f5ff;
--surface-soft: rgba(123,47,255,.05);
--hover: rgba(123,47,255,.08);
--input-bg: #f8f6ff;
--modal-bg: #ffffff;
--border: #e3ddf5;
--border2: #c9bdec;
--divider: #ece5fa;
--text: #1d1b2e;
--text2: #4a4560;
--muted: #5c5675;
--faint: #6f6989;
--violet-strong: #5B1FBF;
--shadow: rgba(76,29,149,.14);
/* --code-bg intentionally NOT overridden: code/output preview panels
stay dark in light mode for readability (see exception list). */
background: var(--bg) !important;
color: var(--text) !important;
}
/* Landing headline uses a background-clip gradient (see bare `h1` rule)
that fades to white for dark mode — invisible on a light page, so
light mode swaps it for a violet → coral gradient instead. */
body.light-mode h1 {
background: linear-gradient(135deg, var(--violet) 40%, var(--coral)) !important;
}
body.light-mode .cell,
body.light-mode .field-block,
body.light-mode .category,
body.light-mode .guided-card,
body.light-mode .step2-accordion-card,
body.light-mode .info-box,
body.light-mode .landing-panel,
body.light-mode .optional-shell,
body.light-mode .stream-wizard-card,
body.light-mode #customCatalogModal > div {
background: var(--card) !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
body.light-mode .section-title,
body.light-mode .field-label,
body.light-mode .cat-title,
body.light-mode .step2-accordion-title,
body.light-mode .guided-title,
body.light-mode strong {
color: var(--text) !important;
}
body.light-mode p,
body.light-mode .input-hint,
body.light-mode .quick-hint,
body.light-mode .guided-sub,
body.light-mode .guided-page-help,
body.light-mode .step2-accordion-help,
body.light-mode .page1-section-help {
color: var(--text2) !important;
}
body.light-mode input,
body.light-mode textarea,
body.light-mode select {
background: var(--input-bg) !important;
color: var(--text) !important;
border-color: var(--border2) !important;
}
body.light-mode .pill,
body.light-mode .global-btn,
body.light-mode .nav-btn,
body.light-mode .builder-mode-btn,
body.light-mode .quick-card,
body.light-mode .preset-btn {
background: var(--input-bg) !important;
color: var(--text) !important;
border-color: var(--border2) !important;
}
/* Selected/active/primary state: violet accent with white text, never a
plain black slab. */
body.light-mode .nav-btn.primary,
body.light-mode .global-btn:hover,
body.light-mode .pill.selected,
body.light-mode .quick-card.active,
body.light-mode .builder-mode-btn.active,
body.light-mode .rbtn.primary,
body.light-mode .step-circle.done {
background: var(--violet) !important;
color: #fff !important;
border-color: var(--violet) !important;
}
body.light-mode .progress-bar {
background: var(--card) !important;
border-color: var(--border) !important;
}
/* Sidebar nav: base label/number colour, hover, active state and the
step-number opacity dimming were all tuned for a dark rail and read as
near-invisible on the light one. */
body.light-mode .um-nav-item {
color: var(--muted) !important;
}
body.light-mode .um-nav-num {
opacity: 0.75 !important;
}
body.light-mode .um-nav-item.active .um-nav-num {
opacity: 1 !important;
}
body.light-mode .um-nav-check {
border-color: var(--border2) !important;
}
body.light-mode .step-circle {
border-color: var(--border2) !important;
color: var(--muted) !important;
}
body.light-mode .step-circle.active {
border-color: var(--violet) !important;
color: var(--violet) !important;
}
body.light-mode .step-label {
color: var(--muted) !important;
}
body.light-mode .step-label.active {
color: var(--text) !important;
}
body.light-mode .step-label.done {
color: var(--text2) !important;
}
body.light-mode .rbtn {
border-color: var(--border2) !important;
color: var(--text2) !important;
background: transparent !important;
}
body.light-mode .rbtn:hover {
border-color: var(--violet) !important;
color: var(--violet) !important;
}
/* "Optional" badges were dimmed an extra 45% specifically in Step 1 for
a dark backdrop; on the light page that stacks with --muted and drops
well under WCAG AA. */
body.light-mode .step-1 .badge-optional {
opacity: 1 !important;
}
body.light-mode .cat-count {
opacity: 1 !important;
}
/* Step 2 compact category cards (#step-2 .s2-cat-*): descriptions,
counts, chevron and selected-count were all white-tinted translucent
colours designed to sit on a dark card — invisible on the light one. */
body.light-mode #step-2 .s2-cat-sub {
color: var(--muted) !important;
}
body.light-mode #step-2 .s2-cat-tot {
color: var(--muted) !important;
}
body.light-mode #step-2 .s2-cat-sel {
color: var(--violet-strong) !important;
}
body.light-mode #step-2 .s2-cat-chev {
color: var(--muted) !important;
background: var(--surface-soft) !important;
}
body.light-mode #step-2 .s2-cat.s2-open .s2-cat-chev {
color: var(--violet-strong) !important;
background: rgba(123,47,255,.14) !important;
}
body.light-mode #step-2 .s2-cat-badge {
background: var(--surface-soft) !important;
border-color: var(--border2) !important;
}
body.light-mode #step-2 .s2-cat-icon {
border-color: var(--border2) !important;
}
body.light-mode #step-2 .s2-cat-prog {
background: var(--divider) !important;
}
body.light-mode #step-2 .s2-cat-pills {
background: var(--surface-soft) !important;
border-top-color: var(--border) !important;
}
body.light-mode #step-2 .s2-search-card {
border-color: var(--border2) !important;
background:
radial-gradient(circle at 4% 20%, rgba(123,47,255,.06), transparent 34%),
var(--card) !important;
}
body.light-mode #step-2 #s2SearchInput::placeholder {
color: var(--muted) !important;
}
/* "Manage selected catalogues" cards (Show all rows / Reorder rows /
Custom rows / Merged Catalogs) — subtitles, chevrons and notes all
used translucent white designed for a dark card. */
body.light-mode #step-2 .s2-showall,
body.light-mode #step-2 .s2-tool-panel-head {
border-color: var(--border2) !important;
background: var(--card) !important;
}
body.light-mode #step-2 .s2-showall-sub,
body.light-mode #step-2 .s2-tool-panel-sub,
body.light-mode #step-2 .s2-tool-panel-note,
body.light-mode #step-2 .s2-raw-label,
body.light-mode #step-2 .s2-nav-card-sub,
body.light-mode #step-2 .s2-selection-sub {
color: var(--muted) !important;
}
body.light-mode #step-2 .s2-showall-arrow,
body.light-mode #step-2 .s2-tool-panel-chev {
color: var(--muted) !important;
background: var(--surface-soft) !important;
}
body.light-mode #step-2 .s2-showall-icon,
body.light-mode #step-2 .s2-tool-panel-icon {
border-color: var(--border2) !important;
}
body.light-mode #step-2 .s2-tool-panel-body,
body.light-mode #step-2 .s2-raw {
background: var(--surface-soft) !important;
border-color: var(--border2) !important;
}
/* Bottom nav cards (nav-card / selection-card): base text was hardcoded
white, subtitles translucent white — both invisible on a light card. */
body.light-mode #step-2 .s2-nav-card,
body.light-mode #step-2 .s2-selection-card {
color: var(--text) !important;
border-color: var(--border2) !important;
background: var(--card) !important;
}
body.light-mode #step-2 .s2-nav-card-next {
background: linear-gradient(135deg, var(--violet), var(--coral)) !important;
border-color: var(--violet) !important;
}
body.light-mode #step-2 .s2-nav-card-next .s2-nav-card-title,
body.light-mode #step-2 .s2-nav-card-next .s2-nav-card-sub {
color: #fff !important;
}
body.light-mode #step-2 .s2-bottom-nav {
border-top-color: var(--border) !important;
}
/* Final review/check panel was a fixed near-black gradient regardless
of theme — the one true "dark island" called out in feedback. */
body.light-mode #step-2 .s2-review-zone {
background: var(--card) !important;
border-color: var(--border2) !important;
box-shadow: 0 18px 48px var(--shadow) !important;
}
body.light-mode #step-2 .s2-review-sub {
color: var(--text2) !important;
}
body.light-mode #step-2 .s2-step-summary-btn {
border-color: var(--border2) !important;
}
body.light-mode #step-2 .s2-step-summary-sub {
color: var(--text2) !important;
}
body.light-mode #step-2 .s2-step-preview-btn {
color: var(--violet-strong) !important;
}
body.light-mode #step-2 .s2-step-preview-count {
background: var(--surface-soft) !important;
}
/* Finalise/Generate (#step-4) summary cards: every card in the stack
hardcodes a near-black gradient with !important, plus translucent
white labels/values that fail badly once the card is no longer dark. */
body.light-mode #step-4 > .result-section,
body.light-mode #step-4 > .result-section:first-of-type,
body.light-mode #step-4 > .result-section:nth-of-type(2),
body.light-mode #step-4 #s4Stack > div:not(.final-export-row):not(.final-back-row) {
background: var(--card) !important;
border-color: var(--border2) !important;
box-shadow: 0 15px 40px var(--shadow) !important;
}
body.light-mode .result-label,
body.light-mode #step-4 .result-label {
color: var(--muted) !important;
}
body.light-mode #step-4 > .result-section:first-of-type > div:last-child {
color: var(--text2) !important;
}
body.light-mode #step-4 > .result-section:first-of-type strong {
color: var(--text) !important;
}
body.light-mode #step-4 > .result-section:nth-of-type(2) > div:nth-child(2) > div {
background: var(--surface-soft) !important;
border-color: var(--border2) !important;
color: var(--muted) !important;
}
body.light-mode #step-4 > .result-section:nth-of-type(2) strong {
color: var(--violet-strong) !important;
}
body.light-mode #step-4 #finalHint {
background: rgba(52,211,153,.08) !important;
color: var(--text2) !important;
}
/* Collections (#step-3): presets, view-mode cards, the search/action
toolbar and the empty state were an entirely dark, fixed-colour
island regardless of theme. Poster art inside preset strips is left
dark on purpose (artwork exception); everything else adapts. */
body.light-mode #step-3 .s3-label,
body.light-mode #step-3 #presetsPanel > p {
color: var(--muted) !important;
}
body.light-mode #step-3 .s3-preset-card {
background: var(--card) !important;
border-color: var(--border2) !important;
}
body.light-mode #step-3 .s3-preset-card:hover {
border-color: var(--violet2) !important;
background: var(--card) !important;
}
body.light-mode #step-3 .s3-preset-add {
color: var(--violet-strong) !important;
}
body.light-mode #step-3 .s3-viewmode-card {
background: var(--card) !important;
border-color: var(--border2) !important;
}
body.light-mode #step-3 .s3-viewmode-card.active {
border-color: var(--violet) !important;
background: rgba(123,47,255,.07) !important;
}
body.light-mode #step-3 .s3-viewmode-icon {
color: var(--text) !important;
}
body.light-mode #step-3 .s3-viewmode-desc {
color: var(--muted) !important;
}
body.light-mode #step-3 .coll-sticky-bar {
background: var(--card) !important;
border-color: var(--border2) !important;
}
body.light-mode #step-3 .coll-search {
background: var(--input-bg) !important;
border-color: var(--border2) !important;
color: var(--text) !important;
}
body.light-mode #step-3 .coll-search::placeholder {
color: var(--muted) !important;
}
body.light-mode #step-3 .coll-sticky-bar .nav-btn:not(.primary) {
background: var(--input-bg) !important;
border-color: var(--border2) !important;
color: var(--text2) !important;
}
body.light-mode #step-3 #empty-state {
background: var(--surface-soft) !important;
border-color: var(--border2) !important;
}
body.light-mode #step-3 .s3-empty-arrow {
color: var(--violet-strong) !important;
}
body.light-mode #step-3 .s3-empty-text {
color: var(--muted) !important;
}
/* Existing collection/folder cards: an ID-scoped ruleset added later
for #step-3 sits at equal-or-higher CSS specificity than the
already-tokenized base .coll-card rules, so it silently wins and
keeps every collection/folder card, header and body permanently
dark regardless of theme. */
body.light-mode #step-3 .coll-card,
body.light-mode #step-3 .collection-card {
background: var(--card) !important;
border-color: var(--border2) !important;
}
body.light-mode #step-3 .coll-card:hover {
border-color: var(--violet2) !important;
}
body.light-mode #step-3 .folder-card {
background: var(--card2) !important;
border-color: var(--border2) !important;
}
body.light-mode #step-3 .folder-summary {
background: var(--surface-soft) !important;
}
body.light-mode #step-3 .folder-body {
background: var(--surface-soft) !important;
border-top-color: var(--border) !important;
}
body.light-mode #step-3 .collection-body {
border-top-color: var(--border) !important;
}
body.light-mode #step-3 .collection-subsection {
background: var(--surface-soft) !important;
border-color: var(--border2) !important;
}
#themeToggle {
position:fixed;
right:14px;
bottom:14px;
z-index:9998;
padding:10px 12px;
border-radius:999px;
border:1px solid #444;
background:#111;
color:var(--text);
font-weight:800;
cursor:pointer;
box-shadow:0 10px 30px rgba(0,0,0,.35);
}
body.light-mode #themeToggle {
background: var(--card);
color: var(--violet);
border-color: var(--border2);
box-shadow: 0 10px 30px var(--shadow);
}
/* ===== setup.html style block 04: atlas-poster-section-clean-v2 ===== */
.poster-provider-block{
padding:14px 0;
border-bottom:1px solid #2a2a45;
}
.poster-provider-block:last-child{
border-bottom:0;
}
.poster-provider-label{
display:flex;
align-items:center;
gap:8px;
font-size:12px;
letter-spacing:.14em;
text-transform:uppercase;
color:#ddd;
margin-bottom:8px;
font-weight:800;
}
.poster-provider-block input{
width:100% !important;
box-sizing:border-box !important;
margin:0 !important;
}
.poster-key-link{
display:inline-block;
margin-top:8px;
font-size:12px;
color:#ddd !important;
text-decoration:underline;
opacity:.9;
}
.poster-key-link:hover{opacity:1;}
/* ===== setup.html style block 05: block-05 ===== */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&display=swap');
:root {
--bg: #080810;
--bg2: #111122;
--card: #14142a;
--card2: #1a1a2e;
--border: #2a2a45;
--border2: #2a2a45;
--violet: #7B2FFF;
--violet2: #9B5FFF;
--coral: #FF3D5A;
--green: #00d2a0;
--white: #ffffff;
--muted: #9898bb;
--text: #e0e0f0;
--danger: #e74c3c;
--success: #2ecc71;
/* Semantic surface/text tokens. Some of these (--faint, --text2,
--hover, --accent) were already referenced throughout the file via
var(--x) with no definition anywhere — an invalid-at-computed-value
custom property silently drops the declaration, so this also fixes
those latent no-op styles, not just light mode. */
--surface-soft: rgba(255,255,255,.04);
--hover: rgba(255,255,255,.05);
--input-bg: var(--bg2);
--modal-bg: var(--card2);
--text2: #c9c9dd;
--faint: #6a6a8a;
--divider: rgba(255,255,255,.08);
--shadow: rgba(0,0,0,.45);
--code-bg: #0b0b0f;
--accent: var(--violet);
/* Accessible violet for TEXT sitting on a pale violet-tinted surface
(e.g. selected sidebar item) — in dark mode this is identical to
--violet2; light mode overrides it to a much deeper violet since
--violet2 fails WCAG contrast against pale tints. */
--violet-strong: var(--violet2);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: var(--bg);
color: var(--text);
font-family: 'Inter', sans-serif;
min-height: 100vh;
display: flex;
justify-content: center;
padding: 0 0 80px;
}
/* ── FILMSTRIP → CLEAN CONTAINER ── */
.filmstrip {
display: flex;
width: 100%;
max-width: 900px;
min-height: 100vh;
flex-direction: row;
}
.sprocket {
width: 14px;
background: var(--bg2);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 0;
padding: 80px 0 20px;
flex-shrink: 0;
opacity: 0.4;
}
.sprocket.right {
border-right: none;
border-left: 1px solid var(--border);
}
.hole {
width: 8px;
height: 10px;
background: var(--bg);
border-radius: 2px;
border: 1px solid var(--border);
margin: 5px auto;
flex-shrink: 0;
}
.cell {
flex: 1;
background: var(--bg);
border-left: none;
border-right: none;
padding: 0 0 80px 0;
min-width: 0;
}
.cell-header {
border-bottom: 1px solid var(--border);
padding: 16px 32px 14px;
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(123, 47, 255, 0.04);
}
.frame-num {
font-size: 10px;
color: var(--muted);
letter-spacing: 0.12em;
font-weight: 500;
text-transform: uppercase;
}
h1 {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(2.2rem, 6vw, 3.5rem);
letter-spacing: 0.06em;
text-align: center;
padding: 28px 32px 6px;
color: var(--text);
background: linear-gradient(135deg, #fff 40%, var(--violet2));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.subtitle {
text-align: center;
color: var(--muted);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
padding-bottom: 20px;
border-bottom: 1px solid var(--border);
font-weight: 500;
}
.edit-banner {
background: rgba(123, 47, 255, 0.08);
border-bottom: 1px solid rgba(123, 47, 255, 0.2);
padding: 10px 32px;
font-size: 12px;
color: var(--violet2);
letter-spacing: 0.04em;
display: none;
}
.edit-banner.visible { display: block; }
/* ── PROGRESS BAR ── */
.progress-bar {
padding: 20px 32px;
border-bottom: 1px solid var(--border);
background: var(--bg2);
}
.progress-steps { display: flex; align-items: center; gap: 0; }
.progress-step { display: flex; align-items: center; flex: 1; }
.step-circle {
width: 30px; height: 30px;
border-radius: 50%;
border: 2px solid var(--border2);
display: flex; align-items: center; justify-content: center;
font-family: 'Bebas Neue', sans-serif;
font-size: 18px;
color: var(--muted);
flex-shrink: 0;
transition: all 0.3s;
}
.step-circle.active {
border-color: var(--violet);
color: var(--violet2);
box-shadow: 0 0 12px rgba(123, 47, 255, 0.3);
}
.step-circle.done {
border-color: var(--violet);
background: var(--violet);
color: #fff;
}
.step-label {
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--muted);
margin-left: 8px;
font-weight: 600;
transition: color 0.3s;
}
.step-label.active { color: var(--violet2); }
.step-label.done { color: var(--muted); }
.step-connector {
flex: 1;
height: 1px;
background: var(--border);
margin: 0 8px;
transition: background 0.3s;
}
.step-connector.done { background: var(--violet); opacity: 0.4; }
/* ── WIZARD STEPS ── */
.wizard-step { display: none; padding: 28px 32px; }
.wizard-step.active { display: block; }
.section-title {
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
}
.section-title::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
/* ── INPUTS ── */
.input-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
input[type=password], input[type=text], select, textarea {
background: var(--card);
border: 1px solid var(--border2);
color: var(--text);
font-family: 'Inter', sans-serif;
font-size: 14px;
padding: 11px 14px;
border-radius: 8px;
flex: 1;
min-width: 200px;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
width: 100%;
}
input:focus, select:focus, textarea:focus {
border-color: var(--violet);
box-shadow: 0 0 0 3px rgba(123, 47, 255, 0.12);
}
.input-hint { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.field-block { margin-bottom: 20px; }
.field-label {
font-size: 11px;
color: var(--text);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
}
.badge {
font-size: 9px;
padding: 2px 7px;
border-radius: 100px;
letter-spacing: 0.08em;
font-weight: 600;
}
.badge-required {
background: rgba(255, 61, 90, 0.1);
border: 1px solid rgba(255, 61, 90, 0.3);
color: #ff7088;
}
.badge-optional {
background: var(--surface-soft);
border: 1px solid var(--border2);
color: var(--muted);
}
.info-box {
margin-top: 10px;
padding: 12px 16px;
background: var(--card);
border: 1px solid var(--border2);
border-radius: 8px;
font-size: 12px;
color: var(--muted);
line-height: 1.65;
}
.info-box a { color: var(--violet2); text-decoration: none; }
.info-box a:hover { text-decoration: underline; }
.info-box strong { color: var(--text); }
.collapsible-link {
margin-top: 10px;
font-size: 11px;
color: var(--muted);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
display: inline-block;
}
.collapsible-link:hover { color: var(--text); }
.verify-btn {
background: transparent;
border: 1px solid var(--border2);
color: var(--muted);
font-family: 'Inter', sans-serif;
font-size: 12px;
padding: 8px 14px;
cursor: pointer;
border-radius: 8px;
white-space: nowrap;
transition: all 0.15s;
flex-shrink: 0;
font-weight: 500;
}
.verify-btn:hover { border-color: var(--violet); color: var(--violet2); }
.verify-result { font-size: 11px; margin-top: 6px; display: none; }
.verify-result.ok { display: block; color: var(--success); }
.verify-result.fail { display: block; color: var(--danger); }
.collapsible-content {
display: none;
margin-top: 12px;
padding: 16px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 8px;
font-size: 12px;
color: var(--muted);
line-height: 1.8;
}
.collapsible-content.open { display: block; }
.divider { height: 1px; background: var(--border); margin: 20px 0; }
.error-msg { color: var(--danger); font-size: 12px; margin-top: 8px; display: none; scroll-margin-bottom: 110px; }
.error-msg.visible { display: block; }
/* ── RETURNING USER ── */
.returning-toggle {
font-size: 12px; color: var(--muted); cursor: pointer;
text-decoration: underline; text-underline-offset: 3px;
display: inline-block; margin-top: 4px;
}
.returning-toggle:hover { color: var(--text); }
.returning-box { display: none; margin-top: 12px; }
.returning-box.open { display: block; }
.returning-row { display: flex; gap: 10px; flex-wrap: wrap; }
.load-btn {
background: transparent;
border: 1px solid var(--border2);
color: var(--muted);
font-family: 'Inter', sans-serif;
font-size: 13px;
padding: 10px 16px;
cursor: pointer;
border-radius: 8px;
white-space: nowrap;
transition: all 0.15s;
font-weight: 500;
}
.load-btn:hover { border-color: var(--violet); color: var(--violet2); }
/* ── NAV BUTTONS ── */
.nav-btns {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 32px;
padding-top: 20px;
border-top: 1px solid var(--border);
}
.nav-btn {
background: transparent;
border: 1px solid var(--border2);
color: var(--muted);
font-family: 'Inter', sans-serif;
font-size: 13px;
padding: 10px 24px;
cursor: pointer;
border-radius: 8px;
transition: all 0.15s;
letter-spacing: 0.04em;
font-weight: 500;
}
.nav-btn:hover { border-color: var(--violet); color: var(--violet2); }
.nav-btn.primary {
background: var(--violet);
color: #fff;
border-color: var(--violet);
font-family: 'Bebas Neue', sans-serif;
font-size: 17px;
letter-spacing: 0.1em;
padding: 10px 32px;
box-shadow: 0 0 20px rgba(123, 47, 255, 0.3);
}
.nav-btn.primary:hover { background: var(--violet2); box-shadow: 0 0 28px rgba(123, 47, 255, 0.5); }
.nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
/* ── PRESETS ── */
.presets-grid { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.preset-btn {
background: var(--card);
border: 1px solid var(--border2);
color: var(--muted);
font-family: 'Inter', sans-serif;
font-size: 12px;
padding: 12px 16px;
border-radius: 10px;
cursor: pointer;
transition: all 0.15s;
text-align: left;
flex: 1;
min-width: 150px;
}
.preset-btn:hover { border-color: var(--violet); color: var(--text); }
.preset-btn .preset-name {
display: block;
font-weight: 700;
font-size: 13px;
color: var(--text);
margin-bottom: 3px;
}
.preset-btn .preset-desc {
display: block;
font-size: 10px;
color: var(--muted);
letter-spacing: 0.04em;
line-height: 1.4;
}
.preset-btn.active {
border-color: var(--violet);
background: rgba(123, 47, 255, 0.1);
box-shadow: 0 0 14px rgba(123, 47, 255, 0.15);
}
.preset-btn.active .preset-name { color: var(--violet2); }
/* ── CATALOG CONTROLS ── */
.catalog-controls {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 20px;
}
.search-box {
flex: 1;
min-width: 180px;
background: var(--card);
border: 1px solid var(--border2);
color: var(--text);
font-family: 'Inter', sans-serif;
font-size: 13px;
padding: 9px 14px;
border-radius: 8px;
outline: none;
transition: border-color 0.2s;
width: auto;
}
.search-box:focus { border-color: var(--violet); }
.search-box::placeholder { color: var(--muted); }
.global-btn {
background: transparent;
border: 1px solid var(--border2);
color: var(--muted);
font-family: 'Inter', sans-serif;
font-size: 11px;
padding: 8px 14px;
border-radius: 8px;
cursor: pointer;
letter-spacing: 0.04em;
transition: all 0.15s;
white-space: nowrap;
font-weight: 500;
}
.global-btn:hover { border-color: var(--violet); color: var(--violet2); }
/* ── CATEGORIES ── */
.category {
margin-bottom: 4px;
padding: 10px 12px;
border-bottom: none;
background: #14142a;
border-radius: 10px;
border: 1px solid #2a2a45;
}
.category:last-child { border-bottom: none; }
.category.hidden { display: none; }
.cat-header {
display: flex;
align-items: center;
margin-bottom: 0;
cursor: pointer;
padding: 6px 0;
user-select: none;
min-height: 28px;
}
.cat-header:hover .cat-title { color: var(--text); }
.cat-chevron {
font-size: 10px;
color: var(--muted);
transition: transform 0.2s;
margin-left: 8px;
flex-shrink: 0;
}
.cat-chevron.open { transform: rotate(180deg); }
.pills-wrap { display: none; padding-top: 6px; }
.pills-wrap.open { display: block; margin-top: 4px; }
.cat-title {
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
display: flex;
align-items: center;
gap: 8px;
flex: 1;
font-weight: 600;
}
.cat-icon { font-size: 13px; }
.cat-count { font-size: 10px; color: var(--muted); margin-left: 4px; opacity: 0.6; }
.select-all {
font-size: 10px;
color: var(--muted);
cursor: pointer;
letter-spacing: 0.1em;
text-transform: uppercase;
flex-shrink: 0;
font-weight: 600;
}
.select-all:hover { color: var(--violet2); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
background: transparent;
border: 1px solid var(--border2);
color: var(--muted);
font-family: 'Inter', sans-serif;
font-size: 12px;
padding: 5px 12px;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s;
user-select: none;
letter-spacing: 0.02em;
font-weight: 500;
}
.pill:hover { border-color: var(--violet); color: var(--text); }
.pill.selected {
background: var(--violet);
border-color: var(--violet);
color: #fff;
font-weight: 600;
}
.pill.hidden { display: none; }
/* ── SUB-CATEGORIES ── */
.sub-category {
margin: 4px 0 10px 0;
border-left: 2px solid var(--border);
padding-left: 12px;
}
.sub-cat-header {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
cursor: pointer;
user-select: none;
}
.sub-cat-header:hover .sub-cat-title { color: var(--text); }
.sub-cat-chevron {
font-size: 9px;
color: var(--muted);
transition: transform 0.2s;
flex-shrink: 0;
}
.sub-cat-chevron.open { transform: rotate(180deg); }
.sub-cat-title {
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--muted);
flex: 1;
font-weight: 600;
}
.sub-select-all {
font-size: 9px;
color: var(--muted);
cursor: pointer;
letter-spacing: 0.1em;
text-transform: uppercase;
flex-shrink: 0;
margin-left: auto;
font-weight: 600;
}
.sub-select-all:hover { color: var(--violet2); }
.sub-pills { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0 4px 0; }
/* ── COUNTER BAR ── */
.counter-bar {
position: sticky;
bottom: 0;
background: rgba(8, 8, 16, 0.92);
backdrop-filter: blur(16px);
border-top: 1px solid var(--border);
padding: 14px 32px;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 10;
}
.count-display { font-size: 11px; color: var(--muted); letter-spacing: 0.1em; }
.count-num { color: var(--violet2); font-size: 22px; font-family: 'Bebas Neue', sans-serif; }
.next-btn {
background: var(--violet);
color: #fff;
border: none;
font-family: 'Bebas Neue', sans-serif;
font-size: 18px;
letter-spacing: 0.1em;
padding: 10px 28px;
cursor: pointer;
border-radius: 8px;
transition: all 0.15s;
box-shadow: 0 0 20px rgba(123, 47, 255, 0.3);
}
.next-btn:hover { background: var(--violet2); box-shadow: 0 0 28px rgba(123, 47, 255, 0.5); }
.next-btn:disabled { opacity: 0.3; cursor: not-allowed; box-shadow: none; }
/* ── RESULT ── */
.result-section {
margin-top: 24px;
padding: 20px;
background: var(--card);
border: 1px solid var(--border2);
border-radius: 12px;
}
.result-label {
font-size: 10px;
color: var(--muted);
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: 10px;
font-weight: 600;
}
.url-display {
font-size: 12px;
color: var(--text);
word-break: break-all;
margin-bottom: 14px;
padding: 10px 12px;
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 8px;
font-family: 'Inter', monospace;
}
.result-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.rbtn {
padding: 10px 22px;
border-radius: 8px;
font-family: 'Inter', sans-serif;
font-size: 13px;
cursor: pointer;
border: 1px solid var(--border2);
background: transparent;
color: var(--muted);
transition: all 0.15s;
text-decoration: none;
display: inline-block;
font-weight: 500;
}
.rbtn:hover { border-color: var(--violet); color: var(--violet2); }
.rbtn.primary {
background: var(--violet);
color: #fff;
border-color: var(--violet);
font-weight: 600;
box-shadow: 0 0 20px rgba(123, 47, 255, 0.3);
}
.rbtn.primary:hover { background: var(--violet2); }
.token-save {
padding: 12px;
background: var(--bg2);
border: 1px solid var(--border);
border-radius: 8px;
font-size: 11px;
color: var(--muted);
line-height: 1.8;
}
.token-save span { color: var(--text); }
.loading { text-align: center; padding: 20px; color: var(--muted); font-size: 12px; letter-spacing: 0.1em; display: none; }
.loading.visible { display: block; }
/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
/* ── BANNER MESSAGES ── */
.banner-msg {
position: fixed;
top: 18px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
min-width: 280px;
max-width: 90%;
padding: 14px 18px;
border-radius: 12px;
font-size: 13px;
line-height: 1.5;
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
border: 1px solid var(--border2);
background: var(--card2);
color: var(--text);
animation: fadeIn .2s ease;
}
.banner-success { border-color: rgba(0, 210, 160, 0.4); background: rgba(0,210,160,0.06); }
.banner-error { border-color: rgba(255, 61, 90, 0.4); background: rgba(255,61,90,0.06); }
@keyframes fadeIn {
from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* ── STEP 1 ZONES ── */
.step1-zone {
margin: 18px 0 22px;
padding: 16px;
border: 1px solid var(--border2);
background: var(--card);
border-radius: 12px;
}
.step1-zone-title {
font-family: 'Bebas Neue', sans-serif;
font-size: 18px;
letter-spacing: .1em;
color: var(--text);
margin-bottom: 8px;
}
.step1-zone-sub {
font-size: 12px;
color: var(--muted);
line-height: 1.55;
margin-bottom: 14px;
}
.step1-enhance {
border-color: var(--border);
background: var(--bg2);
}
.step1-enhance .step1-zone-title { color: var(--text); }
.page1-section-label {
margin: 28px 0 8px;
font-size: 20px;
font-weight: 700;
letter-spacing: .02em;
color: var(--text);
}
.page1-section-label.optional { color: var(--text); }
.page1-section-help {
color: var(--muted);
font-size: 12px;
line-height: 1.6;
margin-bottom: 14px;
}
.step-1 .field-block { margin-bottom: 18px; }
.step-1 .field-label { display: flex; align-items: center; gap: 8px; }
.step-1 .badge-optional { opacity: 0.55; }
.step-1 .input-hint { color: var(--muted); font-size: 12px; line-height: 1.6; margin-top: 8px; }
.step-1 .info-box { background: var(--card); border-color: var(--border2); }
.step-1 .returning-wrap { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border); }
.step-1 .field-block:nth-of-type(1),
.step-1 .field-block:nth-of-type(2),
.step-1 .field-block:nth-of-type(3) {
border: 1px solid var(--border2);
background: var(--card);
padding: 16px;
border-radius: 12px;
}
.api-key-hero {
border: 1px solid rgba(123,47,255,0.25) !important;
background: linear-gradient(180deg, rgba(123,47,255,0.06), var(--card)) !important;
padding: 18px !important;
border-radius: 12px !important;
}
.api-key-note { margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.api-key-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.api-key-actions a {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 12px;
border-radius: 8px;
border: 1px solid var(--border2);
color: var(--text);
text-decoration: none;
font-size: 12px;
background: var(--card);
transition: all 0.15s;
}
.api-key-actions a:hover { border-color: var(--violet); color: var(--violet2); }
.api-key-actions a.primary {
background: var(--violet);
color: #fff;
border-color: var(--violet);
font-weight: 700;
}
.optional-shell {
margin-top: 24px;
padding: 14px;
border: 1px solid var(--border2);
border-radius: 12px;
background: var(--card);
}
.optional-toggle {
width: 100%;
text-align: left;
background: none;
border: 0;
color: var(--text);
font-size: 17px;
font-weight: 700;
cursor: pointer;
padding: 0;
}
.optional-sub { color: var(--muted); font-size: 12px; margin: 8px 0 14px; }
/* ── BUILDER MODE ── */
.builder-mode-box {
border: 1px solid var(--border2);
background: var(--card);
padding: 14px;
margin: 16px 0 18px 0;
border-radius: 10px;
}
.builder-mode-title { font-weight: 700; color: var(--text); margin-bottom: 6px; }
.builder-mode-help { color: var(--muted); font-size: 12px; line-height: 1.5; margin-bottom: 12px; }
.builder-mode-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.builder-mode-btn {
padding: 10px 14px;
border: 1px solid var(--border2);
background: var(--bg2);
color: var(--text);
border-radius: 8px;
cursor: pointer;
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 500;
transition: all 0.15s;
}
.builder-mode-btn:hover { border-color: var(--violet); color: var(--violet2); }
.builder-mode-btn.active { background: var(--violet); color: #fff; border-color: var(--violet); }
/* ── QUICK SETUP V3 ── */
.quick-v3 {
margin: 20px 0;
padding: 20px;
border: 1px solid var(--border2);
border-radius: 14px;
background: var(--card);
}
.quick-v3-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.quick-card {
padding: 15px;
border: 1px solid var(--border2);
border-radius: 10px;
background: var(--bg2);
color: var(--text);
cursor: pointer;
transition: all 0.15s;
text-align: left;
}
.quick-card:hover { border-color: var(--violet); background: rgba(123,47,255,0.06); }
/* ── STREAM WIZARD ── */
.stream-wizard-card {
margin-top: 14px;
padding: 18px;
border: 1px solid var(--border2);
border-radius: 14px;
background: var(--card);
}
.stream-wizard-row {
display: flex;
gap: 10px;
align-items: center;
margin-top: 12px;
}
.stream-wizard-row input {
flex: 1;
min-width: 0;
padding: 12px;
background: var(--bg2);
color: var(--text);
border: 1px solid var(--border2);
border-radius: 10px;
}
.stream-wizard-result { margin-top: 12px; }
.stream-ok, .stream-error, .stream-checking, .stream-added {
padding: 12px;
border-radius: 10px;
background: var(--card);
border: 1px solid var(--border2);
}
.stream-ok { border-color: rgba(0,210,160,0.35); }
.stream-error { border-color: rgba(255,61,90,0.45); }
.stream-added { margin-top: 10px; border-color: rgba(0,210,160,0.35); }
.stream-type-pill {
display: inline-block;
margin: 4px 4px 0 0;
padding: 4px 8px;
border-radius: 100px;
background: rgba(255,255,255,0.08);
font-size: 11px;
}
.pretty-stream-list { margin-top: 12px; }
.pretty-stream-card {
margin: 10px 0;
padding: 12px 14px;
border-radius: 12px;
background: var(--card2);
border: 1px solid rgba(0,210,160,0.25);
}
.pretty-stream-head {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
font-weight: 700;
}
.pretty-stream-url { margin-top: 6px; font-size: 11px; opacity: .65; word-break: break-word; }
.pretty-stream-actions { margin-top: 10px; display: flex; gap: 8px; }
.pretty-stream-btn {
padding: 7px 10px;
border-radius: 8px;
border: 1px solid var(--border2);
background: var(--bg2);
color: var(--text);
cursor: pointer;
font-family: 'Inter', sans-serif;
transition: all 0.15s;
}
.pretty-stream-btn:hover { border-color: var(--violet); }
.pretty-stream-btn.danger { border-color: rgba(255,61,90,0.4); }
.pretty-stream-btn.danger:hover { border-color: var(--coral); color: var(--coral); }
.pretty-stream-pill {
font-size: 11px;
padding: 4px 8px;
border-radius: 100px;
background: rgba(0,210,160,0.12);
color: #7fffd4;
}
/* ── GUIDED SETUP ── */
.guided-setup { margin: 18px 0 24px; }
.guided-card {
border: 1px solid var(--border2);
border-radius: 14px;
background: var(--card);
margin: 12px 0;
overflow: hidden;
}
.guided-head {
width: 100%;
border: 0;
background: rgba(255,255,255,0.02);
color: var(--text);
padding: 15px 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
cursor: pointer;
text-align: left;
transition: background 0.15s;
}
.guided-head:hover { background: rgba(123,47,255,0.06); }
.guided-title { font-weight: 700; letter-spacing: .03em; color: var(--text); }
.guided-sub { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.guided-badge {
font-size: 11px;
border: 1px solid var(--border2);
border-radius: 100px;
padding: 4px 8px;
color: var(--muted);
white-space: nowrap;
}
.guided-card.complete .guided-badge {
border-color: rgba(0,210,160,0.35);
color: #7fffd4;
}
.guided-body { display: none; padding: 16px; }
.guided-card.open .guided-body { display: block; }
.guided-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.guided-next {
padding: 10px 18px;
border-radius: 10px;
border: none;
background: var(--violet);
color: #fff;
font-weight: 700;
cursor: pointer;
font-family: 'Inter', sans-serif;
transition: all 0.15s;
}
.guided-next:hover { background: var(--violet2); }
.guided-next:disabled { opacity: .35; cursor: not-allowed; }
.guided-skip {
padding: 10px 18px;
border-radius: 10px;
border: 1px solid var(--border2);
background: transparent;
color: var(--muted);
cursor: pointer;
font-family: 'Inter', sans-serif;
transition: all 0.15s;
}
.guided-skip:hover { border-color: var(--violet); color: var(--violet2); }
.guided-hidden-original { display: none !important; }
/* ── GUIDED PAGE CARDS ── */
.guided-page-card {
border: 1px solid var(--border2);
border-radius: 14px;
background: var(--card);
padding: 16px;
margin: 14px 0;
}
.guided-page-title { font-size: 18px; font-weight: 800; letter-spacing: .03em; color: var(--text); margin-bottom: 6px; }
.guided-page-help { color: var(--muted); font-size: 12px; line-height: 1.55; margin-bottom: 14px; }
.guided-page-step {
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid var(--border2);
border-radius: 100px;
padding: 5px 10px;
font-size: 11px;
color: var(--muted);
margin-bottom: 10px;
}
.guided-soft-divider { height: 1px; background: var(--border); margin: 16px 0; }
/* ── STEP 2 ACCORDION ── */
.step2-accordion-card {
border: 1px solid #2a2a45;
border-radius: 14px;
background: #14142a;
margin: 6px 0;
overflow: hidden;
}
.step2-accordion-head {
width: 100%;
border: 0;
background: rgba(255,255,255,0.02);
color: var(--text);
padding: 15px 16px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
text-align: left;
transition: background 0.15s;
}
.step2-accordion-head:hover { background: rgba(123,47,255,0.06); }
.step2-accordion-title { font-weight: 800; letter-spacing: .03em; color: var(--text); }
.step2-accordion-help { margin-top: 4px; color: var(--muted); font-size: 12px; }
.step2-accordion-body { display: none; padding: 16px; }
.step2-accordion-card.open .step2-accordion-body { display: block; }
.step2-accordion-badge {
font-size: 11px;
border: 1px solid var(--border2);
border-radius: 100px;
padding: 4px 8px;
color: var(--muted);
}
/* step2Accordion bypass — all content renders directly */
/* ── STEP 3 SAFE ── */
.step3-safe {
border: 1px solid var(--border2);
border-radius: 10px;
margin-bottom: 12px;
overflow: hidden;
}
.step3-safe-head {
padding: 14px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
background: var(--card);
color: var(--text);
transition: background 0.15s;
}
.step3-safe-head:hover { background: rgba(123,47,255,0.06); }
.step3-safe-body { display: none; padding: 10px; }
.step3-safe.open .step3-safe-body { display: block; }
/* ── STEP 4 FINAL ── */
#step-4 .nav-btns {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
margin-top: 28px !important;
padding: 18px !important;
border: 1px solid var(--border2) !important;
border-radius: 18px !important;
background: var(--card) !important;
}
#step-4 .final-launch-note {
text-align: center;
color: var(--muted);
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
}
#step-4 #genBtn {
width: 100% !important;
min-height: 86px !important;
border-radius: 16px !important;
font-size: 17px !important;
letter-spacing: .1em !important;
background: linear-gradient(135deg, var(--violet), var(--coral)) !important;
color: #fff !important;
font-weight: 800 !important;
border: none !important;
box-shadow: 0 0 32px rgba(123,47,255,0.35) !important;
transition: transform .2s ease, box-shadow .2s ease !important;
animation: genPulse 2.2s ease-in-out infinite;
}
#step-4 #genBtn:hover {
transform: translateY(-2px);
box-shadow: 0 0 48px rgba(123,47,255,0.55) !important;
}
#step-4 #genBtn:active { transform: scale(.98); }
#step-4 .final-export-row {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin-top: 6px;
padding-top: 12px;
border-top: 1px solid var(--border);
}
#step-4 .final-export-row button {
width: 100% !important;
min-height: 58px !important;
border-radius: 12px !important;
font-size: 12px !important;
background: var(--bg2) !important;
border: 1px solid var(--border2) !important;
color: var(--muted) !important;
}
#step-4 .final-export-row button:hover { border-color: var(--violet) !important; color: var(--violet2) !important; }
#step-4 .final-export-row button.primary {
background: rgba(123,47,255,0.15) !important;
border-color: rgba(123,47,255,0.4) !important;
color: var(--violet2) !important;
}
#step-4 .final-back-row { display: flex; justify-content: flex-start; margin-top: 10px; opacity: .6; }
#step-4 .final-back-row button {
min-height: 46px !important;
width: auto !important;
min-width: 120px !important;
border: 1px solid var(--border2) !important;
background: transparent !important;
color: var(--muted) !important;
}
@keyframes genPulse {
0%, 100% { box-shadow: 0 0 24px rgba(123,47,255,0.3); }
50% { box-shadow: 0 0 48px rgba(123,47,255,0.55), 0 0 24px rgba(255,61,90,0.2); }
}
@keyframes ultraSpin { to { transform: rotate(360deg); } }
#step-4 #genBtn.generating { pointer-events: none; opacity: .92; }
#step-4 #genBtn.generating::before {
content: "";
width: 18px; height: 18px;
border: 3px solid rgba(255,255,255,.25);
border-top-color: #fff;
border-radius: 50%;
display: inline-block;
margin-right: 10px;
vertical-align: -4px;
animation: ultraSpin .8s linear infinite;
}
#step-4 #genBtn.generated {
animation: none;
background: linear-gradient(135deg, #00d2a0, #7B2FFF) !important;
}
/* ── HOW TO OVERLAY ── */
.howto-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.75);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.howto-card {
width: min(760px, 100%);
max-height: calc(100vh - 40px);
overflow-x: hidden;
overflow-y: auto;
box-sizing: border-box;
background: #13132a;
border: 1px solid var(--border2);
border-radius: 18px;
padding: 0 24px 28px;
box-shadow: 0 24px 70px rgba(0,0,0,.52), 0 0 34px rgba(123,47,255,.10);
overscroll-behavior: contain;
}
.guide-modal-header {
position: relative;
display: flex;
align-items: center;
min-height: 76px;
padding: 18px 58px 14px 0;
border-bottom: 1px solid rgba(255,255,255,.075);
}
.howto-card .guide-modal-title {
margin: 0;
color: var(--text);
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(24px, 4vw, 30px);
line-height: 1.08;
letter-spacing: .055em;
}
.howto-close {
position: absolute;
top: 16px;
right: 0;
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid var(--border2);
border-radius: 12px;
cursor: pointer;
background: var(--bg2);
color: var(--text);
font: inherit;
font-size: 24px;
line-height: 1;
}
.guide-modal-intro {
margin: 16px 0;
color: var(--muted);
font-size: 14px;
line-height: 1.55;
}
.guide-sections {
display: grid;
gap: 10px;
}
.guide-section {
padding: 14px 15px;
border: 1px solid rgba(255,255,255,.07);
border-radius: 12px;
background: rgba(255,255,255,.025);
}
.howto-card .guide-section-title {
margin: 0 0 6px;
color: var(--text);
font-size: 15px;
line-height: 1.35;
}
.guide-section-copy,
.guide-support-copy {
margin: 0;
color: var(--muted);
font-size: 13px;
line-height: 1.6;
}
.guide-section-copy + .guide-section-copy {
margin-top: 7px;
}
.guide-link,
.guide-support-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
box-sizing: border-box;
margin-top: 10px;
border-radius: 10px;
color: #c8afff;
font-size: 12px;
font-weight: 800;
text-decoration: none;
}
.guide-link {
padding: 8px 12px;
border: 1px solid rgba(168,144,255,.35);
background: rgba(123,47,255,.09);
}
.guide-support-card {
margin-top: 14px;
padding: 15px;
border: 1px solid rgba(255,155,96,.25);
border-radius: 13px;
background: rgba(255,126,91,.055);
}
.howto-card .guide-support-title {
margin: 0 0 6px;
color: var(--text);
font-size: 15px;
}
.guide-support-button {
padding: 8px 14px;
border: 1px solid rgba(255,155,96,.35);
background: rgba(255,94,91,.13);
color: #ffc0a6;
}
.guide-modal-footer {
padding-top: 16px;
}
.guide-start-button {
width: 100%;
min-height: 48px;
}
.howto-card a:focus-visible,
.howto-card button:focus-visible {
outline: 3px solid var(--violet2);
outline-offset: 2px;
}
@media (max-width: 520px) {
.howto-overlay {
align-items: flex-start;
padding: 10px;
}
.howto-card {
max-height: calc(100vh - 20px);
padding: 0 14px calc(28px + env(safe-area-inset-bottom));
border-radius: 15px;
}
.guide-modal-header {
min-height: 68px;
padding-right: 52px;
}
.guide-modal-title {
font-size: 24px;
}
.guide-section {
padding: 12px;
}
}
.um-app-mode .howto-overlay {
align-items: flex-start;
padding-bottom: calc(96px + env(safe-area-inset-bottom));
}
.um-app-mode .howto-card {
max-height: calc(100vh - 116px - env(safe-area-inset-bottom));
padding-bottom: calc(32px + env(safe-area-inset-bottom));
}
/* ── STREAM CHOICE + PROVIDER GRIDS ── */
.stream-choice-grid {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin: 12px 0 14px;
}
.stream-choice-card {
border: 1px solid var(--border2);
border-radius: 12px;
background: var(--card);
color: var(--text);
padding: 14px;
text-align: left;
cursor: pointer;
transition: all 0.15s;
}
.stream-choice-card:hover { border-color: var(--violet); background: rgba(123,47,255,0.06); }
.stream-choice-title { font-weight: 800; margin-bottom: 4px; }
.stream-choice-help { color: var(--muted); font-size: 12px; line-height: 1.45; }
.stream-choice-card.active { border-color: rgba(0,210,160,.45); box-shadow: 0 0 18px rgba(0,210,160,.08); }
.stream-provider-grid {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin: 12px 0 14px;
}
.stream-provider {
border: 1px solid var(--border2);
border-radius: 12px;
padding: 14px;
background: var(--card);
cursor: pointer;
color: var(--text);
text-align: left;
transition: all 0.15s;
}
.stream-provider:hover { border-color: var(--violet); background: rgba(123,47,255,0.06); }
.stream-provider.active { border-color: rgba(0,210,160,.5); box-shadow: 0 0 18px rgba(0,210,160,.08); }
.stream-provider.added {
border-color: rgba(0,210,160,.65) !important;
background: rgba(0,210,160,.08) !important;
}
.stream-provider-title { font-weight: 800; }
.stream-provider-desc { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.stream-provider-added {
margin-top: 8px;
display: inline-block;
font-size: 11px;
padding: 4px 8px;
border-radius: 100px;
background: rgba(0,210,160,.12);
color: #7fffd4;
border: 1px solid rgba(0,210,160,.3);
}
.stream-helper { margin-top: 10px; font-size: 12px; color: var(--muted); }
.stream-provider.external-link { border-color: var(--border2); }
.stream-provider.external-link .stream-provider-desc::after { content: " ↗"; opacity: .8; }
.stream-setup-help {
margin: 12px 0 14px;
padding: 12px 14px;
border: 1px solid var(--border2);
border-radius: 12px;
background: var(--card);
color: var(--muted);
font-size: 12px;
line-height: 1.6;
}
/* ── QUICK MODE ISOLATION ── */
body.quick-v3-mode #step-1 > *:not(#quickSetupV3) { display: none !important; }
body.quick-v3-mode #quickSetupV3 { display: block !important; margin-top: 32px !important; }
body.quick-v3-mode #advancedBuilderContainer { display: none !important; }
body.quick-v3-mode #advancedBackBar { display: none !important; }
body.quick-v3-mode #streamBridgeSection,
body.quick-v3-mode .stream-bridge-section { display: none !important; }
body.quick-v3-mode #advancedStreamBridgeBlock { display: none !important; }
body.lite-mode #step-2 .cat-header,
body.lite-mode #step-2 .pills { display: none !important; }
body.lite-mode #step-2 .catalog-section .cat-header,
body.lite-mode #step-2 #quickpicks { display: flex !important; }
#quickSetupV3, #advancedBackBar { display: none !important; }
#advancedBuilderContainer { display: block !important; }
#quickSetupV3 textarea {
width: 100% !important; min-height: 90px !important;
box-sizing: border-box !important; display: block !important; margin-top: 10px !important;
}
#quickSetupV3 input[type="text"] { width: 100% !important; box-sizing: border-box !important; }
/* ── RESPONSIVE ── */
@media (max-width: 900px) {
body { padding: 0; }
.filmstrip { max-width: 100%; }
.sprocket { width: 10px; }
.cell-header, .progress-bar, .wizard-step, .counter-bar { padding-left: 16px !important; padding-right: 16px !important; }
h1 { font-size: 2.2rem; padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 700px) {
.sprocket { width: 6px; }
.hole { width: 4px; height: 8px; margin: 4px auto; }
.step-label { font-size: 8px; letter-spacing: .08em; }
.step-connector { margin: 0 4px; }
.catalog-controls, .nav-btns, .builder-actions, .result-btns, .builder-header { display: flex; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
.catalog-controls > *, .nav-btns > *, .builder-actions > *, .result-btns > * { width: 100% !important; min-width: 0 !important; }
.counter-bar { flex-wrap: wrap; gap: 12px; align-items: stretch; }
.counter-bar > * { width: 100%; }
.next-btn, .nav-btn.primary, .nav-btn, .global-btn, .rbtn, .search-box { width: 100%; min-width: 0 !important; box-sizing: border-box; }
.step2-preset-grid { grid-template-columns: 1fr !important; }
.result-section { overflow: hidden; }
body { overflow-x: hidden; }
.wizard-step { padding: 18px 14px !important; }
.progress-bar { gap: 6px !important; padding: 10px 8px !important; }
.step-circle { width: 24px !important; height: 24px !important; min-width: 24px !important; font-size: 11px !important; }
.step-connector { min-width: 22px !important; }
.quick-v3-grid, .guided-tools-grid { grid-template-columns: 1fr !important; }
.input-row, .stream-wizard-row { flex-direction: column !important; align-items: stretch !important; }
input, select, textarea, button, .nav-btn, .global-btn, .verify-btn { max-width: 100% !important; box-sizing: border-box !important; }
.nav-btn, .global-btn, .verify-btn { min-height: 44px !important; }
.pills { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
.pill { max-width: 100% !important; white-space: normal !important; line-height: 1.25 !important; padding: 8px 10px !important; }
.builder-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; }
.result-section { padding: 14px !important; }
.stream-wizard-card { padding: 14px !important; }
.pretty-stream-actions { flex-direction: column !important; }
.pretty-stream-btn { width: 100% !important; min-height: 42px !important; }
#step-4 .final-export-row { grid-template-columns: 1fr !important; }
#step-4 #genBtn { min-height: 76px !important; }
#step-4 .final-back-row button { width: 100% !important; }
#counterBar { left: 8px !important; right: 8px !important; bottom: 8px !important; width: auto !important; border-radius: 14px !important; }
.count-display { font-size: 10px !important; }
.url-display, #resultToken { font-size: 11px !important; word-break: break-all !important; }
.stream-wizard-row { flex-direction: column; align-items: stretch; }
}
@media (max-width: 520px) {
.sprocket { width: 4px; }
.cell { border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
h1 { font-size: 1.8rem; line-height: 1; padding-top: 20px; }
}
@media (max-width: 420px) {
h1 { font-size: 32px !important; }
.step2-accordion-card, .guided-card, .guided-page-card { border-radius: 12px !important; }
#step-4 .nav-btns { padding: 12px !important; }
}
@media (min-width: 701px) and (max-width: 1024px) {
#presetsPanel > div:last-child { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
.stream-provider-grid { grid-template-columns: repeat(2,1fr); }
.stream-choice-grid { grid-template-columns: repeat(2,1fr); }
}
@media (min-width: 1025px) {
#presetsPanel > div:last-child { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 14px !important; }
.stream-provider-grid { grid-template-columns: repeat(3,1fr); }
.stream-choice-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 700px) {
#presetsPanel > div:last-child { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
#presetsPanel .preset-btn { width: 100% !important; min-width: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; white-space: normal !important; line-height: 1.4 !important; padding: 12px 14px !important; overflow-wrap: anywhere; }
#presetsPanel .preset-btn br { display: none; }
#presetsPanel { overflow: hidden; }
}
#presetsPanel .preset-btn { width: 100% !important; min-width: 0 !important; white-space: normal !important; line-height: 1.35 !important; text-align: left !important; padding: 12px 14px !important; }
@media (min-width: 760px) {
#step-4 .final-export-row { grid-template-columns: repeat(3,1fr); }
}
@media (prefers-reduced-motion: reduce) {
#step-4 #genBtn { animation: none; }
}
/* ===== setup.html style block 06: block-06 ===== */
/* ═══════════════════════════════════════════════════
ULTRA MAX — SIDEBAR LAYOUT + NEW COMPONENTS
═══════════════════════════════════════════════════ */
/* ── APP SHELL ── */
.um-app {
display: flex;
min-height: 100vh;
width: 100%;
max-width: 1440px;
margin: 0 auto;
}
body {
display: block !important;
padding: 0 !important;
}
/* ── SIDEBAR ── */
.um-sidebar {
width: 220px;
min-width: 220px;
background: var(--bg2);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
flex-shrink: 0;
z-index: 50;
}
.um-sidebar-logo {
padding: 24px 20px 20px;
border-bottom: 1px solid var(--border);
}
.um-logo-link {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.4rem;
letter-spacing: 0.08em;
color: var(--text);
text-decoration: none;
display: block;
}
.um-logo-link span {
background: linear-gradient(135deg, var(--violet), var(--coral));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.um-sidebar-nav {
flex: 1;
padding: 16px 12px;
display: flex;
flex-direction: column;
gap: 4px;
}
.um-nav-item {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 12px;
border-radius: 10px;
border: none;
background: transparent;
color: var(--muted);
cursor: pointer;
text-align: left;
font-family: 'Inter', sans-serif;
transition: all 0.15s;
position: relative;
}
.um-nav-item:hover {
background: var(--hover);
color: var(--text);
}
.um-nav-item.active {
background: rgba(123, 47, 255, 0.12);
color: var(--violet-strong);
}
.um-nav-item.active::before {
content: '';
position: absolute;
left: 0;
top: 20%;
bottom: 20%;
width: 3px;
background: var(--violet);
border-radius: 0 3px 3px 0;
}
.um-nav-num {
font-family: 'Bebas Neue', sans-serif;
font-size: 0.95rem;
letter-spacing: 0.1em;
opacity: 0.5;
flex-shrink: 0;
width: 24px;
}
.um-nav-item.active .um-nav-num { opacity: 1; }
.um-nav-label {
font-size: 13px;
font-weight: 600;
flex: 1;
}
.um-nav-check {
width: 18px;
height: 18px;
border-radius: 50%;
border: 1.5px solid var(--border2);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
transition: all 0.2s;
}
.um-nav-check.done {
background: var(--violet);
border-color: var(--violet);
color: white;
}
.um-nav-check.done::after { content: '✓'; }
.um-sidebar-footer {
padding: 16px;
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 8px;
}
.um-kofi-btn {
display: block;
text-align: center;
padding: 10px;
background: #FF5E5B;
color: white;
border-radius: 8px;
text-decoration: none;
font-size: 13px;
font-weight: 600;
transition: opacity 0.2s;
}
.um-kofi-btn:hover { opacity: 0.9; }
.um-reddit-link {
display: block;
text-align: center;
color: var(--muted);
text-decoration: none;
font-size: 12px;
transition: color 0.2s;
}
.um-reddit-link:hover { color: var(--text); }
/* ── MAIN CONTENT ── */
.um-main {
flex: 1;
min-width: 0;
padding: 0;
}
/* ── STEP HEADER ── */
.um-step-header {
padding: 36px 40px 24px;
border-bottom: 1px solid var(--border);
background: linear-gradient(180deg, rgba(123,47,255,0.04) 0%, transparent 100%);
}
.um-step-eyebrow {
font-family: 'Bebas Neue', sans-serif;
font-size: 0.85rem;
letter-spacing: 0.2em;
color: var(--violet);
margin-bottom: 6px;
}
.um-step-header h1 {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(2rem, 4vw, 3rem);
letter-spacing: 0.06em;
text-align: left;
padding: 0;
color: var(--text);
-webkit-text-fill-color: var(--text);
background: none;
margin-bottom: 6px;
}
.um-step-sub {
color: var(--muted);
font-size: 13px;
letter-spacing: 0.04em;
}
/* ── SECTION LABEL ── */
.um-section-label {
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
font-weight: 700;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 10px;
}
.um-section-label::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
/* ── TOOLBAR ── */
.um-toolbar {
margin: 0;
padding: 14px 40px;
background: var(--bg2);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.um-toolbar-label {
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--muted);
font-weight: 700;
white-space: nowrap;
flex-shrink: 0;
}
.um-toolbar-btns {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.um-tool-btn {
background: transparent;
border: 1px solid var(--border2);
color: var(--muted);
font-family: 'Inter', sans-serif;
font-size: 11px;
padding: 6px 12px;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s;
font-weight: 500;
white-space: nowrap;
}
.um-tool-btn:hover { border-color: var(--violet); color: var(--violet2); }
/* ── CONTENT PADDING ── */
.wizard-step { padding: 28px 40px; }
/* ── CARD ── */
.um-card {
background: linear-gradient(135deg, var(--card), rgba(255,255,255,.01));
border: 1px solid var(--border2);
border-radius: 16px;
padding: 22px;
margin-bottom: 4px;
transition: border-color .3s, box-shadow .3s, transform .2s;
position: relative;
animation: cardSlideIn .4s ease both;
}
.um-card:nth-child(2) { animation-delay: .1s; }
.um-card:nth-child(3) { animation-delay: .2s; }
@keyframes cardSlideIn {
from { opacity:0; transform:translateY(12px); }
to { opacity:1; transform:translateY(0); }
}
.um-card:hover {
border-color: rgba(123,47,255,.4);
box-shadow: 0 8px 32px rgba(123,47,255,.1), 0 2px 8px rgba(0,0,0,.3);
transform: translateY(-1px);
}
.um-card.api-key-hero {
border-left: 3px solid var(--violet);
padding-left: 20px;
}
/* Glowing input focus */
#step-1 input:focus {
border-color: var(--violet) !important;
box-shadow: 0 0 0 3px rgba(123,47,255,.15) !important;
outline: none;
}
/* Ambient glow behind required section */
.um-fields-grid {
position: relative;
}
.um-fields-grid::before {
content: '';
position: absolute;
top: -40px; left: 50%;
transform: translateX(-50%);
width: 300px; height: 200px;
background: radial-gradient(circle, rgba(123,47,255,.08), transparent 70%);
pointer-events: none;
z-index: 0;
}
.um-card-title {
font-weight: 700;
color: var(--text);
margin-bottom: 12px;
font-size: 15px;
}
/* ── FIELDS GRID ── */
.um-fields-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 16px;
}
/* ── TORBOX CARD ── */
.um-torbox-card {
margin-top: 20px;
padding: 20px;
background: linear-gradient(135deg, rgba(123,47,255,0.08), rgba(255,61,90,0.06));
border: 1px solid rgba(123,47,255,0.25);
border-radius: 14px;
}
.um-torbox-inner {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 16px;
}
.um-torbox-icon { flex-shrink: 0; }
.um-torbox-icon img { width: 40px; height: 40px; border-radius: 10px; display: block; }
.um-torbox-title {
font-weight: 700;
color: var(--text);
font-size: 15px;
margin-bottom: 4px;
}
.um-torbox-desc {
font-size: 13px;
color: var(--muted);
line-height: 1.6;
}
.um-torbox-desc strong { color: var(--violet2); }
.um-torbox-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--violet);
color: white;
padding: 12px 20px;
border-radius: 10px;
text-decoration: none;
font-size: 13px;
font-weight: 700;
transition: all 0.2s;
box-shadow: 0 0 20px rgba(123,47,255,0.25);
}
.um-torbox-btn:hover {
background: var(--violet2);
box-shadow: 0 0 32px rgba(123,47,255,0.4);
transform: translateY(-1px);
}
/* ── KEEP WIZARD STEP DISPLAY LOGIC ── */
.wizard-step { display: none; }
.wizard-step.active { display: block; }
/* Override old progress bar — hidden, sidebar replaces it */
.progress-bar { display: none; }
/* ── RESPONSIVE ── */
@media (max-width: 900px) {
.um-sidebar {
width: 180px;
min-width: 180px;
}
.wizard-step { padding: 20px 20px; }
.um-step-header { padding: 24px 20px 16px; }
.um-toolbar { padding: 12px 20px; }
}
@media (max-width: 700px) {
.um-app { flex-direction: column; }
.um-sidebar {
width: 100%;
min-width: unset;
height: auto;
position: sticky;
top: 0;
flex-direction: row;
border-right: none;
border-bottom: 1px solid var(--border);
z-index: 100;
}
.um-sidebar-logo { padding: 12px 16px; border-bottom: none; border-right: 1px solid var(--border); }
.um-logo-link { font-size: 1.1rem; }
.um-sidebar-nav {
flex: 1;
flex-direction: row;
padding: 8px;
gap: 4px;
overflow-x: auto;
}
.um-nav-item {
flex-direction: column;
align-items: center;
gap: 2px;
padding: 8px 10px;
min-width: 60px;
text-align: center;
}
.um-nav-item::before { display: none; }
.um-nav-num { width: auto; font-size: 0.8rem; }
.um-nav-label { font-size: 10px; }
.um-nav-check { display: none; }
.um-sidebar-footer { display: none; }
.wizard-step { padding: 16px; }
.um-step-header { padding: 16px; }
.um-toolbar { padding: 10px 16px; gap: 8px; }
.um-toolbar-label { display: none; }
.um-fields-grid { grid-template-columns: 1fr; }
}
/* ===== setup.html style block 07: block-07 ===== */
/* ULTRA MAX DESKTOP WORKSPACE REPAIR */
@media (min-width: 901px) {
.um-app {
max-width: 1600px;
transition: max-width .22s ease;
}
.um-sidebar {
transition:
width .22s ease,
min-width .22s ease;
}
.um-main {
transition: width .22s ease;
}
/* Sidebar toggle */
.um-sidebar-toggle {
position: absolute;
top: 78px;
right: -15px;
z-index: 90;
width: 30px;
height: 30px;
display: grid;
place-items: center;
border: 1px solid rgba(123,47,255,.45);
border-radius: 50%;
background: #12121d;
color: #c8afff;
font-family: inherit;
font-size: 15px;
line-height: 1;
cursor: pointer;
box-shadow:
0 5px 18px rgba(0,0,0,.45),
0 0 16px rgba(123,47,255,.12);
transition:
transform .2s ease,
background .2s ease,
border-color .2s ease;
}
.um-sidebar-toggle:hover {
background: #1b1530;
border-color: #9d68ff;
transform: scale(1.06);
}
/* Collapsed desktop sidebar */
body.um-sidebar-collapsed .um-sidebar {
width: 76px;
min-width: 76px;
}
body.um-sidebar-collapsed .um-sidebar-logo {
padding: 24px 8px 20px;
text-align: center;
}
body.um-sidebar-collapsed .um-logo-link {
font-size: 0;
}
body.um-sidebar-collapsed .um-logo-link::before {
content: 'UM';
font-family: 'Bebas Neue', sans-serif;
font-size: 1.25rem;
letter-spacing: .08em;
color: var(--text);
}
body.um-sidebar-collapsed .um-sidebar-nav {
padding-left: 8px;
padding-right: 8px;
}
body.um-sidebar-collapsed .um-nav-item {
justify-content: center;
gap: 0;
padding-left: 8px;
padding-right: 8px;
}
body.um-sidebar-collapsed .um-nav-label,
body.um-sidebar-collapsed .um-nav-check,
body.um-sidebar-collapsed .um-sidebar-footer {
display: none;
}
body.um-sidebar-collapsed .um-nav-num {
width: auto;
opacity: .78;
text-align: center;
}
body.um-sidebar-collapsed .um-nav-item.active .um-nav-num {
opacity: 1;
color: #c8afff;
}
body.um-sidebar-collapsed .um-sidebar-toggle {
transform: rotate(180deg);
}
body.um-sidebar-collapsed .um-sidebar-toggle:hover {
transform: rotate(180deg) scale(1.06);
}
/* Step 2 heading actions */
#step-2 .um-step-header {
position: relative;
padding-right: 250px;
}
.s2-step-preview-btn {
position: absolute;
top: 36px;
right: 40px;
min-height: 42px;
padding: 0 17px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid rgba(123,47,255,.48);
border-radius: 11px;
background:
linear-gradient(
135deg,
rgba(123,47,255,.22),
rgba(255,61,90,.08)
);
color: #e1d5ff;
font-family: inherit;
font-size: 12px;
font-weight: 750;
cursor: pointer;
box-shadow:
0 8px 24px rgba(0,0,0,.22),
0 0 20px rgba(123,47,255,.1);
transition:
transform .18s ease,
border-color .18s ease,
background .18s ease;
}
.s2-step-preview-btn:hover {
transform: translateY(-1px);
border-color: #a978ff;
background:
linear-gradient(
135deg,
rgba(123,47,255,.32),
rgba(255,61,90,.12)
);
}
.s2-step-preview-count {
min-width: 22px;
padding: 2px 6px;
border-radius: 999px;
background: rgba(255,255,255,.09);
color: var(--text);
font-size: 10px;
text-align: center;
}
/* Permanently remove the old desktop side preview */
.s2-preview-col {
display: none !important;
}
.s2-layout {
display: block !important;
}
.s2-builder-col {
width: 100%;
max-width: none;
padding-right: 0 !important;
}
/* Improve preset proportions on wider screens */
.s2-presets-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.s2-preset:last-child {
grid-column: span 3;
}
}
@media (min-width: 1180px) {
.s2-presets-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.s2-preset:last-child {
grid-column: span 4;
}
}
@media (max-width: 1050px) and (min-width: 901px) {
#step-2 .um-step-header {
padding-right: 40px;
}
.s2-step-preview-btn {
position: static;
margin-top: 16px;
}
}
/* ===== setup.html style block 08: block-08 ===== */
/* ULTRA MAX COMPACT STEP RAIL POLISH */
@media (min-width:901px) {
/*
Fixed compact desktop sidebar.
Mobile and app layouts remain governed by their existing rules.
*/
.um-sidebar {
width: 86px !important;
min-width: 86px !important;
overflow: visible;
}
.um-sidebar-logo {
padding: 24px 8px 22px;
text-align: center;
}
.um-logo-link {
font-size: 0;
}
.um-logo-link::before {
content: 'UM';
display: inline-block;
font-family: 'Bebas Neue', sans-serif;
font-size: 1.35rem;
letter-spacing: .12em;
background:
linear-gradient(
135deg,
#ffffff,
#a978ff 55%,
#ff5470
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.um-sidebar-toggle {
display: none !important;
}
.um-sidebar-footer,
.um-nav-label,
.um-nav-check {
display: none !important;
}
.um-sidebar-nav {
position: relative;
flex: 1;
justify-content: flex-start;
gap: 22px;
padding: 34px 12px 24px;
}
/*
Vertical timeline behind the step numbers.
*/
.um-sidebar-nav::before {
content: '';
position: absolute;
top: 57px;
bottom: 57px;
left: 50%;
width: 2px;
background:
linear-gradient(
to bottom,
rgba(123,47,255,.08),
rgba(123,47,255,.42),
rgba(255,61,90,.12)
);
transform: translateX(-50%);
border-radius: 999px;
box-shadow:
0 0 18px rgba(123,47,255,.14);
}
.um-nav-item {
position: relative;
z-index: 2;
width: 54px;
min-height: 54px;
margin: 0 auto;
padding: 0;
display: grid;
place-items: center;
border: 1px solid rgba(255,255,255,.07);
border-radius: 17px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.035),
rgba(255,255,255,.012)
);
color: rgba(255,255,255,.38);
box-shadow:
0 8px 24px rgba(0,0,0,.14);
transition:
transform .22s ease,
color .22s ease,
border-color .22s ease,
background .22s ease,
box-shadow .22s ease;
}
.um-nav-item:hover {
color: #d8c8ff;
border-color: rgba(123,47,255,.42);
background:
linear-gradient(
145deg,
rgba(123,47,255,.16),
rgba(255,61,90,.05)
);
transform: translateX(3px) scale(1.04);
}
.um-nav-item.active {
color: #fff;
border-color: rgba(157,104,255,.82);
background:
linear-gradient(
145deg,
rgba(123,47,255,.38),
rgba(255,61,90,.14)
);
box-shadow:
0 10px 30px rgba(0,0,0,.30),
0 0 0 3px rgba(123,47,255,.12),
0 0 30px rgba(123,47,255,.30);
animation:
umStepArrive .52s cubic-bezier(.22,1,.36,1);
}
.um-nav-item.active::before {
left: -12px;
top: 50%;
bottom: auto;
width: 4px;
height: 28px;
transform: translateY(-50%);
border-radius: 999px;
background:
linear-gradient(
to bottom,
#a978ff,
#7b2fff,
#ff4f70
);
box-shadow:
0 0 18px rgba(123,47,255,.75);
animation:
umStepMarker .46s ease-out;
}
.um-nav-item.active::after {
content: '';
position: absolute;
inset: -7px;
border: 1px solid rgba(157,104,255,.20);
border-radius: 21px;
pointer-events: none;
animation:
umStepRing .7s ease-out;
}
.um-nav-num {
width: auto;
font-family: 'Bebas Neue', sans-serif;
font-size: 1.05rem;
letter-spacing: .12em;
opacity: 1;
text-align: center;
transition:
transform .22s ease,
text-shadow .22s ease;
}
.um-nav-item.active .um-nav-num {
transform: scale(1.12);
text-shadow:
0 0 14px rgba(255,255,255,.52),
0 0 22px rgba(123,47,255,.72);
}
@keyframes umStepArrive {
0% {
opacity: .65;
transform: translateX(-7px) scale(.90);
}
55% {
transform: translateX(3px) scale(1.07);
}
100% {
opacity: 1;
transform: translateX(0) scale(1);
}
}
@keyframes umStepMarker {
from {
opacity: 0;
transform:
translateY(-50%)
scaleY(.25);
}
to {
opacity: 1;
transform:
translateY(-50%)
scaleY(1);
}
}
@keyframes umStepRing {
from {
opacity: .9;
transform: scale(.78);
}
to {
opacity: 0;
transform: scale(1.18);
}
}
/*
Main preview action styled more like the Step 1 choice cards.
*/
.s2-step-preview-btn {
min-width: 230px;
min-height: 58px;
padding: 8px 14px 8px 10px;
justify-content: flex-start;
gap: 11px;
border: 1px solid rgba(123,47,255,.52);
border-radius: 15px;
background:
radial-gradient(
circle at 10% 15%,
rgba(166,107,255,.25),
transparent 42%
),
linear-gradient(
135deg,
rgba(123,47,255,.17),
rgba(255,61,90,.055)
);
box-shadow:
0 12px 32px rgba(0,0,0,.24),
inset 0 1px 0 rgba(255,255,255,.055);
color: var(--text);
overflow: hidden;
}
.s2-step-preview-btn::before {
content: '📺';
width: 38px;
height: 38px;
display: grid;
place-items: center;
flex: 0 0 38px;
border: 1px solid rgba(255,255,255,.10);
border-radius: 11px;
background:
linear-gradient(
145deg,
rgba(123,47,255,.42),
rgba(255,61,90,.18)
);
font-size: 17px;
box-shadow:
0 7px 18px rgba(0,0,0,.24);
}
.s2-step-preview-btn > span:first-child {
flex: 1;
text-align: left;
font-size: 12px;
font-weight: 750;
}
/*
Hide the original emoji because the new icon tile supplies it.
*/
.s2-step-preview-btn > span:first-child {
font-size: 0;
}
.s2-step-preview-btn > span:first-child::after {
content: 'Preview Nuvio Home';
font-size: 12px;
}
.s2-step-preview-count {
min-width: 34px;
padding: 5px 8px;
border: 1px solid rgba(255,255,255,.08);
background: rgba(255,255,255,.07);
font-size: 11px;
font-weight: 800;
}
.s2-step-preview-btn:hover {
transform: translateY(-2px);
border-color: #a978ff;
background:
radial-gradient(
circle at 10% 15%,
rgba(166,107,255,.34),
transparent 44%
),
linear-gradient(
135deg,
rgba(123,47,255,.25),
rgba(255,61,90,.09)
);
box-shadow:
0 16px 38px rgba(0,0,0,.30),
0 0 28px rgba(123,47,255,.16);
}
/*
The old duplicate preview class must never appear on desktop.
*/
.s2-desktop-preview-btn {
display: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.um-nav-item,
.um-nav-item::before,
.um-nav-item::after,
.um-nav-num {
animation: none !important;
transition: none !important;
}
}
/* ===== setup.html style block 09: block-09 ===== */
/* ULTRA MAX STEP 2 ACTION BAR */
.s2-preset-toolbar {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
}
.s2-preset-toolbar-title {
flex: 1;
min-width: 160px;
margin-bottom: 0 !important;
}
.s2-home-actions {
display: flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;
justify-content: flex-end;
}
.s2-home-action {
min-height: 38px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
border: 1px solid rgba(255,255,255,.11);
border-radius: 10px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.045),
rgba(255,255,255,.015)
);
color: rgba(255,255,255,.72);
font-family: inherit;
font-size: 11px;
font-weight: 650;
white-space: nowrap;
cursor: pointer;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025);
transition:
transform .18s ease,
color .18s ease,
border-color .18s ease,
background .18s ease,
box-shadow .18s ease;
}
.s2-home-action:hover {
transform: translateY(-1px);
color: #e5d9ff;
border-color: rgba(157,104,255,.55);
background:
linear-gradient(
145deg,
rgba(123,47,255,.17),
rgba(255,255,255,.025)
);
box-shadow:
0 7px 18px rgba(0,0,0,.20),
0 0 18px rgba(123,47,255,.08);
}
.s2-home-action-icon {
width: 23px;
height: 23px;
display: grid;
place-items: center;
border-radius: 7px;
background: rgba(123,47,255,.13);
font-size: 12px;
}
.s2-home-action-danger {
color: #ff8295;
border-color: rgba(255,61,90,.30);
background:
linear-gradient(
145deg,
rgba(255,61,90,.09),
rgba(255,255,255,.012)
);
}
.s2-home-action-danger .s2-home-action-icon {
background: rgba(255,61,90,.14);
}
.s2-home-action-danger:hover {
color: #ff9cac;
border-color: rgba(255,61,90,.62);
background:
linear-gradient(
145deg,
rgba(255,61,90,.17),
rgba(255,255,255,.018)
);
box-shadow:
0 7px 18px rgba(0,0,0,.20),
0 0 20px rgba(255,61,90,.08);
}
/* Two matching cards at the top of Step 2 */
.s2-step-top-actions {
display: flex;
align-items: stretch;
gap: 10px;
margin-top: 17px;
}
.s2-step-summary-btn {
min-width: 190px;
min-height: 58px;
padding: 8px 14px 8px 10px;
display: inline-flex;
align-items: center;
gap: 11px;
border: 1px solid rgba(255,255,255,.12);
border-radius: 15px;
background:
radial-gradient(
circle at 10% 15%,
rgba(96,165,250,.18),
transparent 42%
),
linear-gradient(
135deg,
rgba(96,165,250,.10),
rgba(123,47,255,.06)
);
color: var(--text);
font-family: inherit;
cursor: pointer;
box-shadow:
0 12px 32px rgba(0,0,0,.20),
inset 0 1px 0 rgba(255,255,255,.045);
transition:
transform .18s ease,
border-color .18s ease,
box-shadow .18s ease;
}
.s2-step-summary-btn:hover {
transform: translateY(-2px);
border-color: rgba(96,165,250,.58);
box-shadow:
0 15px 36px rgba(0,0,0,.27),
0 0 24px rgba(96,165,250,.09);
}
.s2-step-summary-icon {
width: 38px;
height: 38px;
display: grid;
place-items: center;
flex: 0 0 38px;
border: 1px solid rgba(255,255,255,.09);
border-radius: 11px;
background:
linear-gradient(
145deg,
rgba(96,165,250,.30),
rgba(123,47,255,.15)
);
font-size: 17px;
}
.s2-step-summary-copy {
display: flex;
flex-direction: column;
gap: 3px;
text-align: left;
}
.s2-step-summary-title {
font-size: 12px;
font-weight: 760;
}
.s2-step-summary-sub {
color: rgba(255,255,255,.46);
font-size: 10px;
}
/* The old floating Summary control is no longer needed */
#summaryBtn {
display: none !important;
}
@media (max-width:1100px) {
.s2-preset-toolbar {
align-items: flex-start;
flex-direction: column;
}
.s2-home-actions {
width: 100%;
justify-content: flex-start;
}
}
@media (max-width:700px) {
.s2-home-actions {
display: grid;
grid-template-columns: 1fr;
}
.s2-home-action {
width: 100%;
justify-content: flex-start;
}
.s2-step-top-actions {
display: none;
}
}
/* ===== setup.html style block 10: block-10 ===== */
/* ULTRA MAX STEP 2 CENTRED WORKSPACE */
@media (min-width:901px) {
/*
Keep Step 2 broad, but prevent the content from sticking
to the left edge of the available workspace.
*/
#step-2 {
max-width: 1320px;
margin: 0 auto;
}
#step-2 .um-step-header {
padding-left: 36px;
padding-right: 36px;
}
#step-2 .s2-layout {
width: 100%;
max-width: 1240px;
margin: 0 auto;
}
#step-2 .s2-builder-col {
width: 100%;
}
/*
Top action cards form one centred control row.
*/
#step-2 .s2-step-top-actions {
justify-content: flex-start;
width: 100%;
max-width: 620px;
}
#step-2 .s2-step-summary-btn,
#step-2 .s2-step-preview-btn {
flex: 1 1 0;
min-width: 0;
max-width: 300px;
}
/*
Preset heading and bulk controls align as one proper toolbar.
*/
#step-2 .s2-preset-toolbar {
display: grid;
grid-template-columns: minmax(180px, 1fr) auto;
align-items: center;
gap: 18px;
margin-top: 4px;
margin-bottom: 16px;
}
#step-2 .s2-preset-toolbar-title {
min-width: 0;
}
#step-2 .s2-home-actions {
justify-content: flex-end;
}
/*
Even responsive preset grid.
No special full-width final tile.
*/
#step-2 .s2-presets-grid {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
align-items: stretch;
}
#step-2 .s2-preset,
#step-2 .s2-preset:last-child {
grid-column: auto !important;
width: 100%;
min-width: 0;
min-height: 138px;
display: flex;
flex-direction: column;
}
#step-2 .s2-preset-strip {
height: 66px;
flex: 0 0 66px;
}
#step-2 .s2-preset-strip img {
min-width: 0;
flex: 1 1 0;
object-fit: cover;
}
#step-2 .s2-preset-body {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 66px;
}
/*
Keep the category section aligned to the same workspace.
*/
#step-2 .s2-cats,
#step-2 #s2SearchInput,
#step-2 .s2-showall,
#step-2 #s2Raw,
#step-2 [style*="REORDER ROWS"],
#step-2 [style*="CUSTOM ROWS"] {
max-width: 100%;
}
}
@media (min-width:1280px) {
#step-2 .s2-presets-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (min-width:1500px) {
#step-2 .s2-presets-grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
@media (max-width:1100px) and (min-width:901px) {
#step-2 {
max-width: 100%;
}
#step-2 .s2-preset-toolbar {
grid-template-columns: 1fr;
}
#step-2 .s2-home-actions {
justify-content: flex-start;
}
#step-2 .s2-presets-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width:700px) {
#step-2 .s2-presets-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
#step-2 .s2-preset {
min-height: 126px;
}
}
/* ===== setup.html style block 11: block-11 ===== */
/* ULTRA MAX STEP 2 TRUE CENTRE */
@media (min-width:901px) {
/*
Centre the introduction and primary actions.
*/
#step-2 .um-step-header {
text-align: center;
}
#step-2 .um-step-eyebrow,
#step-2 .um-step-header h1,
#step-2 .um-step-sub {
text-align: center;
}
#step-2 .s2-step-top-actions {
width: 100%;
max-width: none;
justify-content: center;
margin-left: auto;
margin-right: auto;
}
#step-2 .s2-step-summary-btn,
#step-2 .s2-step-preview-btn {
flex: 0 1 300px;
width: 300px;
max-width: 300px;
}
/*
Centre the preset heading and home controls.
*/
#step-2 .s2-preset-toolbar {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 13px;
margin-top: 8px;
margin-bottom: 18px;
}
#step-2 .s2-preset-toolbar-title {
width: 100%;
min-width: 0;
text-align: center;
}
#step-2 .s2-preset-toolbar-title::before {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
#step-2 .s2-preset-toolbar-title::after {
flex: 1;
}
#step-2 .s2-home-actions {
width: 100%;
justify-content: center;
}
/*
A centred wrapping layout means incomplete rows are
centred instead of starting at the left edge.
*/
#step-2 .s2-presets-grid {
display: flex !important;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: 12px;
width: 100%;
}
#step-2 .s2-preset,
#step-2 .s2-preset:last-child {
grid-column: auto !important;
flex: 0 1 calc((100% - 24px) / 3);
width: calc((100% - 24px) / 3);
max-width: 310px;
min-width: 190px;
}
/*
Everything now sits in the centre when it is alone.
*/
#step-2 .s2-preset:last-child {
margin-left: 0;
margin-right: 0;
}
/*
Fine-tuning remains wide and practical.
*/
#step-2 .s2-section-label:not(.s2-preset-toolbar-title) {
text-align: left;
}
}
@media (min-width:1400px) {
#step-2 .s2-preset,
#step-2 .s2-preset:last-child {
flex-basis: calc((100% - 36px) / 4);
width: calc((100% - 36px) / 4);
max-width: 285px;
}
}
/* Keep the category divider evenly spaced between presets and search. */
#step-2 .s2-presets-grid + .s2-fine-tune-label {
margin-top: 24px;
margin-bottom: 24px;
}
@media (max-width:1100px) and (min-width:901px) {
#step-2 .s2-preset,
#step-2 .s2-preset:last-child {
flex-basis: calc((100% - 12px) / 2);
width: calc((100% - 12px) / 2);
max-width: 320px;
}
}
/* ===== setup.html style block 12: block-12 ===== */
/* ULTRA MAX BULK ACTION CARDS */
#step-2 .s2-home-actions {
width: 100%;
max-width: 900px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-left: auto;
margin-right: auto;
}
#step-2 .s2-home-action-card {
min-width: 0;
min-height: 62px;
padding: 9px 13px 9px 10px;
display: flex;
align-items: center;
gap: 11px;
border: 1px solid rgba(123,47,255,.34);
border-radius: 15px;
background:
radial-gradient(
circle at 8% 12%,
rgba(166,107,255,.18),
transparent 42%
),
linear-gradient(
135deg,
rgba(123,47,255,.105),
rgba(255,255,255,.018)
);
color: var(--text);
font-family: inherit;
text-align: left;
cursor: pointer;
overflow: hidden;
box-shadow:
0 10px 28px rgba(0,0,0,.20),
inset 0 1px 0 rgba(255,255,255,.045);
transition:
transform .18s ease,
border-color .18s ease,
background .18s ease,
box-shadow .18s ease;
}
#step-2 .s2-home-action-card:hover {
transform: translateY(-2px);
border-color: rgba(166,107,255,.72);
background:
radial-gradient(
circle at 8% 12%,
rgba(166,107,255,.28),
transparent 44%
),
linear-gradient(
135deg,
rgba(123,47,255,.18),
rgba(255,255,255,.026)
);
box-shadow:
0 14px 34px rgba(0,0,0,.28),
0 0 26px rgba(123,47,255,.11);
}
#step-2 .s2-home-action-card-icon {
width: 40px;
height: 40px;
display: grid;
place-items: center;
flex: 0 0 40px;
border: 1px solid rgba(255,255,255,.10);
border-radius: 11px;
background:
linear-gradient(
145deg,
rgba(123,47,255,.40),
rgba(255,61,90,.12)
);
font-size: 17px;
box-shadow:
0 7px 18px rgba(0,0,0,.22);
}
#step-2 .s2-home-action-card-copy {
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
#step-2 .s2-home-action-card-title {
color: var(--text);
font-size: 12px;
font-weight: 760;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#step-2 .s2-home-action-card-sub {
color: rgba(255,255,255,.45);
font-size: 10px;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#step-2 .s2-home-action-card-danger {
border-color: rgba(255,61,90,.34);
background:
radial-gradient(
circle at 8% 12%,
rgba(255,61,90,.16),
transparent 42%
),
linear-gradient(
135deg,
rgba(255,61,90,.09),
rgba(255,255,255,.014)
);
}
#step-2 .s2-home-action-card-danger .s2-home-action-card-icon {
background:
linear-gradient(
145deg,
rgba(255,61,90,.38),
rgba(123,47,255,.10)
);
}
#step-2 .s2-home-action-card-danger:hover {
border-color: rgba(255,90,112,.75);
background:
radial-gradient(
circle at 8% 12%,
rgba(255,61,90,.25),
transparent 44%
),
linear-gradient(
135deg,
rgba(255,61,90,.16),
rgba(255,255,255,.02)
);
box-shadow:
0 14px 34px rgba(0,0,0,.28),
0 0 26px rgba(255,61,90,.10);
}
@media (max-width:1100px) and (min-width:701px) {
#step-2 .s2-home-actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 620px;
}
#step-2 .s2-home-action-card:last-child {
grid-column: 1 / -1;
width: calc(50% - 5px);
justify-self: center;
}
}
@media (max-width:700px) {
#step-2 .s2-home-actions {
grid-template-columns: 1fr;
max-width: 100%;
}
#step-2 .s2-home-action-card {
width: 100%;
}
}
/* ===== setup.html style block 13: block-13 ===== */
/* ULTRA MAX STEP 2 UNIFIED CONTROLS */
/* Search */
#step-2 .s2-search-card {
min-height: 56px;
padding: 8px 15px;
display: flex;
align-items: center;
gap: 11px;
border: 1px solid rgba(123,47,255,.28);
border-radius: 15px;
background:
radial-gradient(
circle at 4% 20%,
rgba(123,47,255,.15),
transparent 34%
),
linear-gradient(
135deg,
rgba(123,47,255,.07),
rgba(255,255,255,.018)
);
box-shadow:
0 10px 26px rgba(0,0,0,.16),
inset 0 1px 0 rgba(255,255,255,.035);
transition:
border-color .18s ease,
box-shadow .18s ease,
transform .18s ease;
}
#step-2 .s2-search-card:focus-within {
transform: translateY(-1px);
border-color: rgba(166,107,255,.76);
box-shadow:
0 14px 34px rgba(0,0,0,.22),
0 0 0 3px rgba(123,47,255,.11),
0 0 24px rgba(123,47,255,.10);
}
#step-2 .s2-search-icon {
width: 34px;
height: 34px;
display: grid;
place-items: center;
flex: 0 0 34px;
border-radius: 10px;
background: rgba(123,47,255,.15);
font-size: 15px;
}
#step-2 #s2SearchInput {
width: 100%;
min-width: 0;
padding: 0;
border: none !important;
outline: none !important;
background: transparent !important;
box-shadow: none !important;
color: var(--text);
font-family: inherit;
font-size: 13px;
}
#step-2 #s2SearchInput::placeholder {
color: rgba(255,255,255,.38);
}
/* Category cards */
#step-2 .s2-cats {
gap: 10px;
}
#step-2 .s2-cat {
position: relative;
overflow: hidden;
border: 1px solid rgba(123,47,255,.24);
border-radius: 16px;
background:
radial-gradient(
circle at 2% 15%,
rgba(123,47,255,.10),
transparent 32%
),
linear-gradient(
135deg,
rgba(123,47,255,.055),
rgba(255,255,255,.016)
);
box-shadow:
0 8px 24px rgba(0,0,0,.15),
inset 0 1px 0 rgba(255,255,255,.025);
transition:
transform .18s ease,
border-color .18s ease,
box-shadow .18s ease,
background .18s ease;
}
#step-2 .s2-cat:hover {
transform: translateY(-1px);
border-color: rgba(157,104,255,.56);
box-shadow:
0 12px 30px rgba(0,0,0,.22),
0 0 22px rgba(123,47,255,.075);
}
#step-2 .s2-cat.s2-open {
border-color: rgba(157,104,255,.72);
background:
radial-gradient(
circle at 2% 10%,
rgba(123,47,255,.18),
transparent 38%
),
linear-gradient(
135deg,
rgba(123,47,255,.09),
rgba(255,255,255,.018)
);
box-shadow:
0 14px 36px rgba(0,0,0,.24),
0 0 28px rgba(123,47,255,.09);
}
#step-2 .s2-cat-head {
min-height: 64px;
padding: 10px 15px;
gap: 12px;
}
#step-2 .s2-cat-icon {
width: 40px;
height: 40px;
display: grid;
place-items: center;
flex: 0 0 40px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 11px;
background:
linear-gradient(
145deg,
rgba(123,47,255,.28),
rgba(255,61,90,.07)
);
font-size: 18px;
box-shadow:
0 7px 18px rgba(0,0,0,.20);
}
#step-2 .s2-cat-name {
color: var(--text);
font-size: 13px;
font-weight: 760;
}
#step-2 .s2-cat-sub {
margin-top: 3px;
color: rgba(255,255,255,.42);
font-size: 10px;
}
#step-2 .s2-cat-badge {
padding: 5px 9px;
border: 1px solid rgba(255,255,255,.07);
border-radius: 999px;
background: rgba(255,255,255,.045);
}
#step-2 .s2-cat-sel {
font-size: 11px;
color: #b991ff;
}
#step-2 .s2-cat-tot {
font-size: 9px;
color: rgba(255,255,255,.32);
}
#step-2 .s2-cat-chev {
width: 26px;
height: 26px;
display: grid;
place-items: center;
margin-left: 5px;
border-radius: 8px;
background: rgba(255,255,255,.045);
color: rgba(255,255,255,.42);
transition:
transform .25s cubic-bezier(.22,1,.36,1),
background .18s ease,
color .18s ease;
}
#step-2 .s2-cat.s2-open .s2-cat-chev {
transform: rotate(180deg);
background: rgba(123,47,255,.18);
color: #cbb6ff;
}
#step-2 .s2-cat-prog {
height: 3px;
background: rgba(255,255,255,.035);
}
#step-2 .s2-cat-prog-bar {
border-radius: 999px;
background:
linear-gradient(
90deg,
#7b2fff,
#ae72ff,
#ff5470
);
box-shadow:
0 0 14px rgba(123,47,255,.42);
}
#step-2 .s2-cat-pills {
padding: 14px 15px 16px;
border-top: 1px solid rgba(255,255,255,.045);
background: rgba(0,0,0,.10);
}
#step-2 .s2-pill {
min-height: 34px;
padding: 6px 11px;
border-color: rgba(255,255,255,.09);
border-radius: 10px;
background: rgba(255,255,255,.025);
transition:
transform .16s ease,
border-color .16s ease,
background .16s ease,
color .16s ease;
}
#step-2 .s2-pill:hover {
transform: translateY(-1px);
border-color: rgba(157,104,255,.60);
background: rgba(123,47,255,.11);
}
#step-2 .s2-pill.s2-sel {
border-color: rgba(157,104,255,.70);
background:
linear-gradient(
135deg,
rgba(123,47,255,.25),
rgba(255,61,90,.05)
);
box-shadow:
0 0 0 2px rgba(123,47,255,.07);
}
#step-2 .s2-cat-btn {
min-height: 34px;
padding: 0 12px;
border-radius: 9px;
background: rgba(255,255,255,.025);
font-weight: 650;
}
/* Show all */
#step-2 .s2-showall {
min-height: 64px;
padding: 10px 14px;
margin-top: 12px;
display: flex;
align-items: center;
gap: 12px;
border: 1px solid rgba(123,47,255,.24);
border-radius: 16px;
background:
radial-gradient(
circle at 2% 18%,
rgba(123,47,255,.13),
transparent 35%
),
rgba(255,255,255,.018);
color: var(--text);
box-shadow:
0 8px 24px rgba(0,0,0,.14);
transition:
transform .18s ease,
border-color .18s ease,
box-shadow .18s ease;
}
#step-2 .s2-showall:hover {
transform: translateY(-2px);
border-color: rgba(157,104,255,.62);
box-shadow:
0 13px 32px rgba(0,0,0,.22),
0 0 24px rgba(123,47,255,.08);
}
#step-2 .s2-showall-icon {
width: 40px;
height: 40px;
display: grid;
place-items: center;
flex: 0 0 40px;
border-radius: 11px;
background: rgba(123,47,255,.18);
font-size: 17px;
}
#step-2 .s2-showall-copy {
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
gap: 3px;
text-align: left;
}
#step-2 .s2-showall-title {
color: var(--text);
font-size: 12px;
font-weight: 760;
}
#step-2 .s2-showall-sub {
color: rgba(255,255,255,.42);
font-size: 10px;
}
#step-2 .s2-showall-arrow {
width: 30px;
height: 30px;
display: grid;
place-items: center;
border-radius: 9px;
background: rgba(255,255,255,.045);
color: rgba(255,255,255,.55);
font-size: 22px;
}
/* Reorder and Custom panels */
#step-2 .s2-tool-panel {
margin-top: 14px;
}
#step-2 .s2-tool-panel-head {
width: 100%;
min-height: 68px;
padding: 10px 14px;
display: flex;
align-items: center;
gap: 12px;
border: 1px solid rgba(123,47,255,.24);
border-radius: 16px;
background:
radial-gradient(
circle at 2% 15%,
rgba(123,47,255,.13),
transparent 34%
),
linear-gradient(
135deg,
rgba(123,47,255,.06),
rgba(255,255,255,.016)
);
color: var(--text);
font-family: inherit;
text-align: left;
cursor: pointer;
box-shadow:
0 8px 24px rgba(0,0,0,.15);
transition:
transform .18s ease,
border-color .18s ease,
box-shadow .18s ease;
}
#step-2 .s2-tool-panel-head:hover {
transform: translateY(-2px);
border-color: rgba(157,104,255,.62);
box-shadow:
0 13px 32px rgba(0,0,0,.22),
0 0 24px rgba(123,47,255,.08);
}
#step-2 .s2-tool-panel-icon {
width: 42px;
height: 42px;
display: grid;
place-items: center;
flex: 0 0 42px;
border-radius: 12px;
background:
linear-gradient(
145deg,
rgba(123,47,255,.32),
rgba(255,61,90,.08)
);
font-size: 18px;
}
#step-2 .s2-tool-panel-copy {
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
#step-2 .s2-tool-panel-title {
color: var(--text);
font-size: 12px;
font-weight: 760;
letter-spacing: .02em;
}
#step-2 .s2-tool-panel-sub {
color: rgba(255,255,255,.42);
font-size: 10px;
}
#step-2 .s2-tool-panel-chev {
width: 30px;
height: 30px;
display: grid;
place-items: center;
border-radius: 9px;
background: rgba(255,255,255,.045);
color: rgba(255,255,255,.45);
font-size: 10px;
transition:
transform .24s cubic-bezier(.22,1,.36,1),
background .18s ease;
}
#step-2 .s2-tool-panel-body {
margin-top: 8px;
padding: 15px;
border: 1px solid rgba(123,47,255,.20);
border-radius: 15px;
background:
linear-gradient(
135deg,
rgba(123,47,255,.045),
rgba(255,255,255,.012)
);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025);
}
#step-2 .s2-tool-panel-note {
margin-bottom: 12px;
color: rgba(255,255,255,.44);
font-size: 11px;
line-height: 1.5;
}
#step-2 .s2-reorder-list {
display: flex;
flex-direction: column;
gap: 7px;
}
/* Warning */
#step-2 .s2-warning-card {
margin-top: 16px;
padding: 13px 15px;
display: flex;
align-items: flex-start;
gap: 11px;
border: 1px solid rgba(255,184,0,.28);
border-radius: 14px;
background:
linear-gradient(
135deg,
rgba(255,184,0,.10),
rgba(255,255,255,.012)
);
color: #e8ba4c;
font-size: 11px;
line-height: 1.5;
}
#step-2 .s2-warning-icon {
font-size: 17px;
flex: 0 0 auto;
}
#step-2 .s2-all-hidden-warning {
margin: 0 0 18px;
padding: 16px;
border-color: rgba(255,184,0,.42);
align-items: center;
flex-wrap: wrap;
}
#step-2 .s2-all-hidden-warning-copy {
flex: 1 1 280px;
min-width: 0;
}
#step-2 .s2-all-hidden-warning-title {
color: #ffd36a;
font-size: 13px;
font-weight: 750;
}
#step-2 .s2-all-hidden-warning-text {
margin-top: 3px;
color: rgba(255,255,255,.72);
font-size: 11px;
line-height: 1.55;
}
#step-2 .s2-all-hidden-warning-actions {
display: flex;
flex: 0 1 auto;
gap: 8px;
flex-wrap: wrap;
}
#step-2 .s2-all-hidden-warning-btn {
min-height: 42px;
padding: 9px 13px;
border: 1px solid rgba(255,211,106,.38);
border-radius: 9px;
background: var(--surface-soft);
color: var(--text);
font: inherit;
font-size: 11px;
font-weight: 700;
cursor: pointer;
}
#step-2 .s2-all-hidden-warning-btn.primary {
background: rgba(255,184,0,.18);
border-color: rgba(255,211,106,.58);
color: #ffe29a;
}
#step-2 .s2-all-hidden-warning-btn:focus-visible {
outline: 3px solid var(--violet2);
outline-offset: 3px;
}
@media (max-width: 620px) {
#step-2 .s2-all-hidden-warning-actions {
width: 100%;
}
#step-2 .s2-all-hidden-warning-btn {
flex: 1 1 150px;
}
}
/* Bottom navigation */
#step-2 .s2-bottom-nav {
display: grid;
grid-template-columns: minmax(170px, 1fr) minmax(190px, 1fr) minmax(210px, 1fr);
gap: 10px;
margin-top: 24px;
padding-top: 20px;
}
#step-2 .s2-nav-card,
#step-2 .s2-selection-card {
min-height: 68px;
padding: 10px 13px;
display: flex;
align-items: center;
gap: 11px;
border: 1px solid rgba(123,47,255,.26);
border-radius: 16px;
background:
linear-gradient(
135deg,
rgba(123,47,255,.07),
rgba(255,255,255,.016)
);
color: #fff;
font-family: inherit;
box-shadow:
0 9px 26px rgba(0,0,0,.16);
}
#step-2 .s2-nav-card {
cursor: pointer;
transition:
transform .18s ease,
border-color .18s ease,
box-shadow .18s ease;
}
#step-2 .s2-nav-card:hover {
transform: translateY(-2px);
border-color: rgba(157,104,255,.66);
box-shadow:
0 14px 34px rgba(0,0,0,.24),
0 0 24px rgba(123,47,255,.08);
}
#step-2 .s2-nav-card-next {
justify-content: flex-end;
border-color: rgba(123,47,255,.58);
background:
radial-gradient(
circle at 92% 20%,
rgba(166,107,255,.25),
transparent 44%
),
linear-gradient(
135deg,
rgba(123,47,255,.24),
rgba(255,61,90,.08)
);
}
#step-2 .s2-nav-card-icon {
width: 40px;
height: 40px;
display: grid;
place-items: center;
flex: 0 0 40px;
border-radius: 11px;
background: rgba(123,47,255,.18);
font-size: 18px;
}
#step-2 .s2-nav-card-copy,
#step-2 .s2-selection-copy {
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
text-align: left;
}
#step-2 .s2-nav-card-title,
#step-2 .s2-selection-title {
color: var(--text);
font-size: 12px;
font-weight: 760;
}
#step-2 .s2-nav-card-sub,
#step-2 .s2-selection-sub {
color: rgba(255,255,255,.42);
font-size: 10px;
}
#step-2 .s2-selection-card {
justify-content: center;
}
#step-2 .s2-selection-number {
min-width: 46px;
height: 46px;
padding: 0 10px;
display: grid;
place-items: center;
border-radius: 13px;
background:
linear-gradient(
145deg,
rgba(123,47,255,.38),
rgba(255,61,90,.12)
);
color: #fff;
font-size: 15px;
font-weight: 800;
box-shadow:
0 7px 18px rgba(0,0,0,.20);
}
@media (max-width:900px) {
#step-2 .s2-bottom-nav {
grid-template-columns: 1fr;
}
#step-2 .s2-selection-card {
order: -1;
}
}
@media (prefers-reduced-motion: reduce) {
#step-2 .s2-search-card,
#step-2 .s2-cat,
#step-2 .s2-pill,
#step-2 .s2-showall,
#step-2 .s2-tool-panel-head,
#step-2 .s2-nav-card {
transition: none !important;
transform: none !important;
}
}
/* ===== setup.html style block 14: block-14 ===== */
/* ULTRA MAX STEP 2 MANAGE SECTION */
#step-2 .s2-manage-section {
position: relative;
margin-top: 18px;
padding-top: 18px;
}
#step-2 .s2-manage-section::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: min(100%, 880px);
height: 1px;
transform: translateX(-50%);
background:
linear-gradient(
90deg,
transparent,
rgba(123,47,255,.38),
rgba(255,255,255,.13),
rgba(123,47,255,.38),
transparent
);
}
#step-2 .s2-manage-label {
justify-content: center;
margin-bottom: 15px;
text-align: center;
color: rgba(255,255,255,.58);
}
#step-2 .s2-manage-label::before,
#step-2 .s2-manage-label::after {
content: '';
flex: 1;
max-width: 210px;
height: 1px;
background: rgba(255,255,255,.08);
}
#step-2 .s2-manage-grid {
width: 100%;
max-width: 900px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 11px;
}
#step-2 .s2-manage-item {
margin-top: 0;
}
#step-2 .s2-manage-section .s2-showall,
#step-2 .s2-manage-section .s2-tool-panel-head {
min-height: 72px;
}
#step-2 .s2-manage-section .s2-showall,
#step-2 .s2-manage-section .s2-tool-panel-head {
border-color: rgba(96,165,250,.20);
background:
radial-gradient(
circle at 3% 18%,
rgba(96,165,250,.12),
transparent 34%
),
linear-gradient(
135deg,
rgba(96,165,250,.045),
rgba(123,47,255,.035),
rgba(255,255,255,.012)
);
}
#step-2 .s2-manage-section .s2-showall:hover,
#step-2 .s2-manage-section .s2-tool-panel-head:hover {
border-color: rgba(96,165,250,.52);
box-shadow:
0 14px 34px rgba(0,0,0,.23),
0 0 26px rgba(96,165,250,.07);
}
#step-2 .s2-manage-section .s2-showall-icon,
#step-2 .s2-manage-section .s2-tool-panel-icon {
background:
linear-gradient(
145deg,
rgba(96,165,250,.28),
rgba(123,47,255,.19)
);
}
#step-2 .s2-raw {
margin-top: 9px;
padding: 15px;
border: 1px solid rgba(96,165,250,.17);
border-radius: 15px;
background:
linear-gradient(
135deg,
rgba(96,165,250,.025),
rgba(123,47,255,.025),
rgba(255,255,255,.01)
);
}
#step-2 .s2-raw-label {
margin-bottom: 12px;
color: rgba(255,255,255,.55);
font-size: 10px;
font-weight: 760;
letter-spacing: .16em;
text-transform: uppercase;
}
#step-2 .s2-manage-section .s2-tool-panel-body {
border-color: rgba(96,165,250,.15);
background:
linear-gradient(
135deg,
rgba(96,165,250,.024),
rgba(123,47,255,.022),
rgba(255,255,255,.01)
);
}
@media (min-width:1100px) {
#step-2 .s2-manage-grid {
grid-template-columns: repeat(3, minmax(0,1fr));
align-items: start;
}
#step-2 .s2-manage-item {
min-width: 0;
}
#step-2 .s2-manage-section .s2-showall,
#step-2 .s2-manage-section .s2-tool-panel-head {
height: 100%;
min-height: 88px;
}
#step-2 .s2-manage-section .s2-showall-copy,
#step-2 .s2-manage-section .s2-tool-panel-copy {
gap: 4px;
}
/*
Expanded tools need the whole row rather than being trapped
inside a narrow third-width column.
*/
#step-2 .s2-manage-item:has(.s2-raw[style*="block"]),
#step-2 .s2-manage-item:has(.s2-tool-panel-body[style*="block"]) {
grid-column: 1 / -1;
}
}
@media (max-width:700px) {
#step-2 .s2-manage-section {
margin-top: 16px;
padding-top: 16px;
}
#step-2 .s2-manage-grid {
max-width: none;
}
}
/* ===== setup.html style block 15: block-15 ===== */
/* ULTRA MAX STEP 2 REVIEW FOOTER */
#step-2 .s2-review-zone {
width: min(100%, 760px);
margin: 34px auto 18px;
padding: 22px;
border: 1px solid rgba(123,47,255,.24);
border-radius: 20px;
background:
radial-gradient(
circle at 50% 0%,
rgba(123,47,255,.12),
transparent 52%
),
linear-gradient(
145deg,
rgba(18,16,36,.88),
rgba(8,8,16,.96)
);
box-shadow:
0 18px 48px rgba(0,0,0,.25),
inset 0 1px 0 rgba(255,255,255,.035);
}
#step-2 .s2-review-heading {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 17px;
}
#step-2 .s2-review-kicker {
color: var(--violet2);
font-size: 9px;
font-weight: 800;
letter-spacing: .18em;
text-transform: uppercase;
}
#step-2 .s2-review-title {
margin-top: 5px;
color: var(--text);
font-family: 'Bebas Neue', sans-serif;
font-size: 24px;
letter-spacing: .07em;
}
#step-2 .s2-review-sub {
max-width: 500px;
margin-top: 4px;
color: rgba(255,255,255,.46);
font-size: 11px;
line-height: 1.55;
}
#step-2 .s2-review-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
width: 100%;
}
#step-2 .s2-review-actions .s2-step-summary-btn,
#step-2 .s2-review-actions .s2-step-preview-btn {
width: 100%;
max-width: none;
min-width: 0;
min-height: 64px;
margin: 0;
}
#step-2 .s2-review-actions .s2-step-preview-btn {
position: static !important;
inset: auto !important;
}
/*
Compact navigation beneath the review controls.
*/
#step-2 .s2-bottom-nav {
display: grid;
grid-template-columns:
minmax(150px, .72fr)
minmax(190px, .9fr)
minmax(220px, 1.15fr);
align-items: stretch;
gap: 10px;
width: min(100%, 760px);
margin: 0 auto;
padding-top: 16px;
border-top: 1px solid rgba(255,255,255,.07);
}
#step-2 .s2-bottom-nav .s2-nav-card,
#step-2 .s2-bottom-nav .s2-selection-card {
min-width: 0;
min-height: 62px;
margin: 0;
}
#step-2 .s2-bottom-nav .s2-selection-card {
justify-content: center;
background:
linear-gradient(
145deg,
rgba(123,47,255,.08),
rgba(255,255,255,.012)
);
border-color: rgba(123,47,255,.18);
}
#step-2 .s2-bottom-nav .s2-selection-number {
width: 38px;
height: 38px;
flex: 0 0 38px;
display: grid;
place-items: center;
border-radius: 11px;
background: rgba(123,47,255,.18);
}
#step-2 .s2-bottom-nav .s2-nav-card-next {
background:
radial-gradient(
circle at 90% 10%,
rgba(255,61,90,.14),
transparent 48%
),
linear-gradient(
135deg,
rgba(123,47,255,.30),
rgba(123,47,255,.16)
);
}
@media (max-width:700px) {
#step-2 .s2-review-zone {
width: 100%;
margin-top: 28px;
padding: 16px;
border-radius: 17px;
}
#step-2 .s2-review-actions {
grid-template-columns: 1fr;
}
/*
Override the earlier rule that hid the old top actions on mobile.
*/
#step-2 .s2-review-actions .s2-step-summary-btn,
#step-2 .s2-review-actions .s2-step-preview-btn {
display: flex;
}
}
/* ===== setup.html style block 16: block-16 ===== */
/*
.s2-bottom-nav's 3-column desktop grid has explicit px minimums
(150 + 190 + 220 + 2x10 gap = 580px) that don't fit inside its own
container once .s2-layout gives up the 300px preview column at
<=900px but this nav hasn't collapsed yet (it only used to collapse
at <=700px) — a ~200px dead zone where the grid overflows its box.
Matching this breakpoint to .s2-layout's 900px closes that gap.
*/
@media (max-width:900px) {
#step-2 .s2-bottom-nav {
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
}
#step-2 .s2-bottom-nav .s2-selection-card {
grid-column: 1 / -1;
grid-row: 1;
}
#step-2 .s2-bottom-nav .s2-nav-card-back {
grid-column: 1;
grid-row: 2;
}
#step-2 .s2-bottom-nav .s2-nav-card-next {
grid-column: 2;
grid-row: 2;
}
#step-2 .s2-bottom-nav .s2-nav-card-copy {
min-width: 0;
}
#step-2 .s2-bottom-nav .s2-nav-card-sub {
display: none;
}
#step-2 .s2-bottom-nav > .guided-page-card {
grid-column: 2;
grid-row: 2;
padding: 10px 13px;
min-width: 0;
}
#step-2 .s2-bottom-nav > .guided-page-card .guided-page-step,
#step-2 .s2-bottom-nav > .guided-page-card .guided-page-title,
#step-2 .s2-bottom-nav > .guided-page-card .guided-page-help {
display: none;
}
}
/* ===== setup.html style block 17: block-17 ===== */
/* ULTRA MAX PREVIEW DEVICE SWITCH */
#s2Modal .s2-modal-toolbar {
position: fixed;
z-index: 10014;
top: 0;
left: 0;
right: 0;
min-height: 62px;
padding: 9px 13px;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
background:
linear-gradient(
to bottom,
rgba(5,5,10,.86),
rgba(5,5,10,.28),
transparent
);
}
#s2Modal .s2-preview-device-switch {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px;
border: 1px solid rgba(255,255,255,.12);
border-radius: 13px;
background: rgba(13,13,22,.80);
backdrop-filter: blur(18px);
box-shadow:
0 10px 28px rgba(0,0,0,.30);
pointer-events: auto;
}
#s2Modal .s2-preview-device-btn {
min-height: 36px;
padding: 0 13px;
border: 1px solid transparent;
border-radius: 9px;
background: transparent;
color: rgba(255,255,255,.52);
font-family: inherit;
font-size: 11px;
font-weight: 720;
cursor: pointer;
transition:
color .16s ease,
border-color .16s ease,
background .16s ease,
box-shadow .16s ease;
}
#s2Modal .s2-preview-device-btn:hover {
color: #fff;
background: rgba(255,255,255,.055);
}
#s2Modal .s2-preview-device-btn.active {
border-color: rgba(156,102,255,.55);
background:
linear-gradient(
135deg,
rgba(123,47,255,.36),
rgba(123,47,255,.18)
);
color: #fff;
box-shadow:
0 0 18px rgba(123,47,255,.18);
}
#s2Modal .s2-modal-close {
position: absolute;
top: 10px;
right: 12px;
pointer-events: auto;
}
/* Mobile preview keeps the current layout */
#s2Modal.s2-preview-mode-mobile .s2-modal-sheet {
max-width: 520px;
margin: 0 auto;
border-left: 1px solid rgba(255,255,255,.035);
border-right: 1px solid rgba(255,255,255,.035);
box-shadow:
0 0 70px rgba(0,0,0,.50);
}
#s2Modal.s2-preview-mode-mobile .s2nm-hero {
height: min(82vh, 760px);
}
/* Desktop / Nuvio TV-style presentation */
#s2Modal.s2-preview-mode-desktop {
background: #07070c !important;
}
#s2Modal.s2-preview-mode-desktop .s2-modal-sheet {
max-width: none;
width: 100%;
margin: 0;
}
#s2Modal.s2-preview-mode-desktop .s2nm-shell {
min-height: 100vh;
padding-bottom: 70px;
}
#s2Modal.s2-preview-mode-desktop .s2nm-hero {
height: min(72vh, 780px);
min-height: 520px;
border-radius: 0;
}
#s2Modal.s2-preview-mode-desktop .s2nm-hero-image {
inset: 0;
transform: none;
background-position: center 22%;
background-size: cover;
filter:
saturate(.92)
brightness(.78);
}
#s2Modal.s2-preview-mode-desktop .s2nm-hero-shade {
background:
linear-gradient(
90deg,
rgba(7,7,12,.92) 0%,
rgba(7,7,12,.68) 28%,
rgba(7,7,12,.22) 62%,
rgba(7,7,12,.12) 100%
),
linear-gradient(
to bottom,
rgba(7,7,12,.04) 25%,
rgba(7,7,12,.42) 72%,
#07070c 100%
);
}
#s2Modal.s2-preview-mode-desktop .s2nm-hero-fade {
height: 260px;
background:
linear-gradient(
to bottom,
transparent,
#07070c
);
}
#s2Modal.s2-preview-mode-desktop .s2nm-hero-content {
left: clamp(46px, 6vw, 110px);
right: auto;
bottom: clamp(54px, 8vh, 100px);
width: min(560px, 48vw);
align-items: flex-start;
text-align: left;
}
#s2Modal.s2-preview-mode-desktop .s2nm-title {
font-size: clamp(44px, 5vw, 76px);
line-height: .98;
}
#s2Modal.s2-preview-mode-desktop .s2nm-meta {
justify-content: flex-start;
font-size: 13px;
}
#s2Modal.s2-preview-mode-desktop .s2nm-details-btn {
min-width: 150px;
min-height: 46px;
margin-top: 18px;
padding: 0 22px;
font-size: 13px;
}
#s2Modal.s2-preview-mode-desktop .s2nm-indicators {
justify-content: flex-start;
}
#s2Modal.s2-preview-mode-desktop .s2nm-shelves {
position: relative;
z-index: 3;
margin-top: -46px;
padding:
0
clamp(42px, 5.5vw, 100px);
}
#s2Modal.s2-preview-mode-desktop .s2nm-shelf {
margin-bottom: 40px;
}
#s2Modal.s2-preview-mode-desktop .s2nm-shelf-title {
font-size: 21px;
}
#s2Modal.s2-preview-mode-desktop .s2nm-shelf-accent {
width: 70px;
height: 4px;
}
#s2Modal.s2-preview-mode-desktop .s2nm-cards {
gap: 14px;
overflow: hidden;
}
#s2Modal.s2-preview-mode-desktop .s2nm-card {
width: clamp(150px, 13vw, 210px);
flex: 0 0 clamp(150px, 13vw, 210px);
}
#s2Modal.s2-preview-mode-desktop .s2nm-poster {
border-radius: 12px;
}
#s2Modal.s2-preview-mode-desktop .s2nm-card-title {
margin-top: 8px;
font-size: 13px;
}
#s2Modal.s2-preview-mode-desktop .s2nm-card-year {
font-size: 11px;
}
#s2Modal.s2-preview-mode-desktop .s2nm-more {
max-width: 900px;
margin: 28px auto 0;
font-size: 13px;
}
@media (max-width:899px) {
#s2Modal .s2-preview-device-switch {
position: absolute;
left: 10px;
}
#s2Modal .s2-preview-device-btn {
padding: 0 10px;
}
#s2Modal.s2-preview-mode-desktop .s2nm-hero {
min-height: 430px;
}
#s2Modal.s2-preview-mode-desktop .s2nm-hero-content {
left: 24px;
right: 24px;
width: auto;
}
#s2Modal.s2-preview-mode-desktop .s2nm-shelves {
padding: 0 20px;
}
}
/* ===== setup.html style block 18: block-18 ===== */
/* ULTRA MAX STEP 1 VISUAL POLISH */
/* ---------------------------------------------------------
Core Step 1 spacing
--------------------------------------------------------- */
#step-1 {
--s1-blue: #60a5fa;
--s1-green: #34d399;
--s1-gold: #f6c453;
--s1-coral: #ff5c74;
max-width: 1320px;
margin-left: auto;
margin-right: auto;
}
#step-1 #advancedBuilderContainer {
padding-bottom: 32px;
}
/* ---------------------------------------------------------
Setup toolbar
--------------------------------------------------------- */
#step-1 #step1Toolbar {
width: 100%;
margin: 0 0 26px !important;
display: grid !important;
grid-template-columns:
minmax(150px, 1fr)
minmax(150px, 1fr)
minmax(130px, .8fr)
auto;
align-items: stretch !important;
gap: 10px !important;
}
#step-1 #step1Toolbar > button,
#step-1 #step1Toolbar > div > button {
position: relative;
width: 100%;
min-width: 0;
min-height: 62px;
padding: 11px 15px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
border: 1px solid rgba(255,255,255,.11) !important;
border-radius: 15px !important;
background:
radial-gradient(
circle at 8% 14%,
rgba(123,47,255,.15),
transparent 43%
),
linear-gradient(
145deg,
rgba(255,255,255,.052),
rgba(255,255,255,.014)
) !important;
color: var(--text) !important;
font-family: inherit !important;
font-size: 12px !important;
font-weight: 750 !important;
line-height: 1.25 !important;
box-shadow:
0 10px 28px rgba(0,0,0,.20),
inset 0 1px 0 rgba(255,255,255,.035);
cursor: pointer;
overflow: hidden;
transition:
transform .18s ease,
border-color .18s ease,
background .18s ease,
box-shadow .18s ease,
opacity .18s ease !important;
}
#step-1 #step1Toolbar > button:hover,
#step-1 #step1Toolbar > div > button:hover {
opacity: 1 !important;
transform: translateY(-2px);
border-color: rgba(156,102,255,.52) !important;
box-shadow:
0 14px 34px rgba(0,0,0,.27),
0 0 24px rgba(123,47,255,.08);
}
/* New Setup */
#step-1 #step1Toolbar > button:first-of-type {
border-color: rgba(255,92,116,.40) !important;
background:
radial-gradient(
circle at 7% 10%,
rgba(255,255,255,.18),
transparent 34%
),
linear-gradient(
135deg,
rgba(123,47,255,.94),
rgba(255,61,90,.88)
) !important;
box-shadow:
0 13px 32px rgba(123,47,255,.20),
0 0 25px rgba(255,61,90,.10);
}
/* Load Token */
#step-1 #step1Toolbar > button:nth-of-type(2) {
border-color: rgba(96,165,250,.25) !important;
background:
radial-gradient(
circle at 8% 15%,
rgba(96,165,250,.17),
transparent 40%
),
linear-gradient(
145deg,
rgba(96,165,250,.08),
rgba(123,47,255,.035)
) !important;
}
/* Save */
#step-1 #step1Toolbar > button:nth-of-type(3) {
border-color: rgba(52,211,153,.22) !important;
background:
radial-gradient(
circle at 8% 15%,
rgba(52,211,153,.14),
transparent 40%
),
linear-gradient(
145deg,
rgba(52,211,153,.065),
rgba(255,255,255,.012)
) !important;
}
#step-1 #step1Toolbar > div {
position: relative !important;
margin-left: 0 !important;
}
#step-1 #step1Toolbar > div > button {
min-width: 104px;
justify-content: center !important;
}
/* More menu */
#step-1 #toolsMenu {
top: calc(100% + 10px) !important;
right: 0 !important;
min-width: 220px !important;
padding: 8px !important;
border: 1px solid rgba(123,47,255,.28) !important;
border-radius: 16px !important;
background:
radial-gradient(
circle at 90% 0%,
rgba(123,47,255,.12),
transparent 45%
),
rgba(13,13,23,.97) !important;
backdrop-filter: blur(22px);
box-shadow:
0 22px 54px rgba(0,0,0,.48),
inset 0 1px 0 rgba(255,255,255,.04) !important;
}
#step-1 #toolsMenu > button,
#step-1 #toolsMenu > a {
min-height: 42px;
margin-bottom: 2px;
padding: 10px 12px !important;
border: 1px solid transparent !important;
border-radius: 10px !important;
transition:
background .15s ease,
border-color .15s ease,
transform .15s ease !important;
}
#step-1 #toolsMenu > button:hover,
#step-1 #toolsMenu > a:hover {
transform: translateX(2px);
border-color: rgba(123,47,255,.19) !important;
background: rgba(123,47,255,.09) !important;
}
/* ---------------------------------------------------------
Required field cards
--------------------------------------------------------- */
#step-1 #tile-content-password,
#step-1 #tile-content-mdblist {
position: relative;
min-height: 216px;
padding: 20px !important;
border: 1px solid rgba(123,47,255,.20) !important;
border-radius: 18px !important;
background:
radial-gradient(
circle at 8% 8%,
rgba(123,47,255,.10),
transparent 42%
),
linear-gradient(
145deg,
rgba(20,18,39,.92),
rgba(12,12,24,.96)
) !important;
box-shadow:
0 16px 42px rgba(0,0,0,.22),
inset 0 1px 0 rgba(255,255,255,.035);
overflow: hidden;
transition:
transform .18s ease,
border-color .18s ease,
box-shadow .18s ease;
}
#step-1 #tile-content-password:hover,
#step-1 #tile-content-mdblist:hover {
transform: translateY(-2px);
border-color: rgba(156,102,255,.40) !important;
box-shadow:
0 20px 48px rgba(0,0,0,.28),
0 0 24px rgba(123,47,255,.06);
}
#step-1 #tile-content-password::before,
#step-1 #tile-content-mdblist::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background:
linear-gradient(
to bottom,
transparent,
var(--s1-blue),
var(--violet),
transparent
);
opacity: .65;
}
#step-1 #tile-content-mdblist::before {
background:
linear-gradient(
to bottom,
transparent,
var(--s1-green),
var(--violet),
transparent
);
}
#step-1 #tile-content-password .field-label,
#step-1 #tile-content-mdblist .field-label {
margin-bottom: 13px;
color: rgba(255,255,255,.78);
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
/* ---------------------------------------------------------
Inputs and verification buttons
--------------------------------------------------------- */
#step-1 input[type="text"],
#step-1 input[type="password"],
#step-1 select {
min-height: 44px;
border: 1px solid rgba(255,255,255,.10) !important;
border-radius: 11px !important;
background:
linear-gradient(
145deg,
rgba(7,7,15,.82),
rgba(18,17,34,.86)
) !important;
color: #fff !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025);
transition:
border-color .17s ease,
box-shadow .17s ease,
background .17s ease;
}
#step-1 input[type="text"]:focus,
#step-1 input[type="password"]:focus,
#step-1 select:focus {
outline: none;
border-color: rgba(156,102,255,.62) !important;
box-shadow:
0 0 0 3px rgba(123,47,255,.10),
0 0 22px rgba(123,47,255,.07);
}
#step-1 #tile-content-password button[onclick*="togglePass"] {
width: 32px;
height: 32px;
right: 6px !important;
display: grid;
place-items: center;
border: 1px solid rgba(255,255,255,.07) !important;
border-radius: 9px !important;
background: rgba(255,255,255,.035) !important;
opacity: .68;
transition:
opacity .15s ease,
background .15s ease;
}
#step-1 #tile-content-password button[onclick*="togglePass"]:hover {
opacity: 1;
background: rgba(123,47,255,.12) !important;
}
#step-1 .verify-btn {
min-height: 44px;
padding: 0 16px !important;
border: 1px solid rgba(123,47,255,.38) !important;
border-radius: 11px !important;
background:
linear-gradient(
135deg,
rgba(123,47,255,.28),
rgba(123,47,255,.13)
) !important;
color: #e9ddff !important;
font-size: 11px !important;
font-weight: 800 !important;
box-shadow:
0 9px 22px rgba(0,0,0,.18);
transition:
transform .16s ease,
border-color .16s ease,
box-shadow .16s ease;
}
#step-1 .verify-btn:hover {
transform: translateY(-1px);
border-color: rgba(176,135,255,.68) !important;
box-shadow:
0 12px 28px rgba(0,0,0,.25),
0 0 18px rgba(123,47,255,.09);
}
/* MDBList CTA */
#step-1 .api-key-actions a.primary {
min-height: 42px;
padding: 0 16px !important;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(123,47,255,.34) !important;
border-radius: 11px !important;
background:
linear-gradient(
135deg,
rgba(123,47,255,.86),
rgba(139,60,255,.66)
) !important;
color: #fff !important;
box-shadow:
0 12px 28px rgba(123,47,255,.15);
transition:
transform .16s ease,
box-shadow .16s ease;
}
#step-1 .api-key-actions a.primary:hover {
transform: translateY(-2px);
box-shadow:
0 15px 34px rgba(123,47,255,.24);
}
/* ---------------------------------------------------------
Optional Enhancements and Streams shells
--------------------------------------------------------- */
#step-1 #optionalEnhancementsShell,
#step-1 #advancedStreamBridgeBlock > .optional-shell {
position: relative;
margin-top: 22px !important;
border: 1px solid rgba(123,47,255,.20);
border-radius: 18px;
background:
radial-gradient(
circle at 7% 0%,
rgba(123,47,255,.09),
transparent 38%
),
linear-gradient(
145deg,
rgba(18,17,35,.94),
rgba(11,11,22,.97)
);
box-shadow:
0 16px 42px rgba(0,0,0,.20),
inset 0 1px 0 rgba(255,255,255,.035);
overflow: hidden;
}
#step-1 #advancedStreamBridgeBlock > .optional-shell {
border-color: rgba(246,196,83,.18);
background:
radial-gradient(
circle at 7% 0%,
rgba(246,196,83,.075),
transparent 38%
),
linear-gradient(
145deg,
rgba(18,17,35,.94),
rgba(11,11,22,.97)
);
}
#step-1 .optional-toggle {
width: 100%;
min-height: 60px;
padding: 14px 17px !important;
display: flex;
align-items: center;
gap: 9px;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--text) !important;
font-size: 13px !important;
font-weight: 800 !important;
text-align: left;
cursor: pointer;
transition:
background .17s ease,
color .17s ease;
}
#step-1 .optional-toggle:hover {
background: rgba(123,47,255,.07) !important;
}
#step-1 #advancedStreamBridgeBlock .optional-toggle:hover {
background: rgba(246,196,83,.055) !important;
}
#step-1 .optional-sub {
margin-top: -11px;
padding: 0 17px 15px !important;
color: rgba(255,255,255,.40) !important;
font-size: 10px !important;
}
/* ---------------------------------------------------------
Accordion cards
--------------------------------------------------------- */
#step-1 .opt-subsection {
margin: 0 14px 10px;
border: 1px solid rgba(255,255,255,.085) !important;
border-radius: 14px !important;
background:
linear-gradient(
145deg,
rgba(255,255,255,.032),
rgba(255,255,255,.009)
) !important;
overflow: hidden;
transition:
transform .17s ease,
border-color .17s ease,
background .17s ease,
box-shadow .17s ease;
}
#step-1 .opt-subsection:hover {
transform: translateY(-1px);
border-color: rgba(123,47,255,.28) !important;
background:
linear-gradient(
145deg,
rgba(123,47,255,.06),
rgba(255,255,255,.012)
) !important;
}
#step-1 .opt-subsection[open] {
border-color: rgba(123,47,255,.32) !important;
background:
radial-gradient(
circle at 5% 0%,
rgba(123,47,255,.08),
transparent 38%
),
linear-gradient(
145deg,
rgba(255,255,255,.035),
rgba(255,255,255,.009)
) !important;
box-shadow:
0 12px 30px rgba(0,0,0,.15);
}
#step-1 .opt-subsection summary {
min-height: 56px;
padding: 13px 48px 13px 15px !important;
display: flex;
align-items: center;
color: rgba(255,255,255,.84) !important;
font-size: 12px !important;
font-weight: 760 !important;
cursor: pointer;
}
#step-1 .opt-subsection summary::after {
right: 15px !important;
width: 28px;
height: 28px;
display: grid;
place-items: center;
border: 1px solid rgba(255,255,255,.07);
border-radius: 9px;
background: rgba(255,255,255,.032);
color: rgba(255,255,255,.46);
transform-origin: center;
}
#step-1 .opt-subsection[open] > summary {
margin-bottom: 13px !important;
border-bottom-color:
rgba(123,47,255,.16) !important;
}
#step-1 .opt-subsection[open] > summary::after {
color: #d9c7ff;
border-color: rgba(123,47,255,.28);
background: rgba(123,47,255,.10);
}
#step-1 .opt-subsection > *:not(summary) {
padding-left: 16px !important;
padding-right: 16px !important;
}
/* ---------------------------------------------------------
Inner option cards
--------------------------------------------------------- */
#step-1 .field-block,
#step-1 #posterProvidersBlock,
#step-1 #streamsSectionBody > .um-card {
border-radius: 13px;
}
#step-1 #streamsSectionBody {
padding: 4px 14px 14px;
}
#step-1 #streamsSectionBody > .um-card {
border-color: rgba(246,196,83,.12) !important;
background:
linear-gradient(
145deg,
rgba(246,196,83,.025),
rgba(255,255,255,.012)
) !important;
}
/* ---------------------------------------------------------
TorBox card
--------------------------------------------------------- */
#step-1 .um-torbox-card {
position: relative;
margin-top: 22px;
padding: 18px !important;
border: 1px solid rgba(255,61,90,.20) !important;
border-radius: 18px !important;
background:
radial-gradient(
circle at 3% 16%,
rgba(52,211,153,.09),
transparent 30%
),
radial-gradient(
circle at 94% 12%,
rgba(255,61,90,.10),
transparent 38%
),
linear-gradient(
145deg,
rgba(20,13,27,.94),
rgba(12,10,20,.97)
) !important;
box-shadow:
0 17px 44px rgba(0,0,0,.22),
inset 0 1px 0 rgba(255,255,255,.035);
overflow: hidden;
}
#step-1 .um-torbox-icon {
width: 48px;
height: 48px;
border: 1px solid rgba(52,211,153,.20);
border-radius: 14px;
background:
linear-gradient(
145deg,
rgba(52,211,153,.17),
rgba(123,47,255,.08)
);
box-shadow:
0 10px 26px rgba(0,0,0,.20);
}
#step-1 .um-torbox-title {
font-size: 14px !important;
}
#step-1 .um-torbox-desc {
max-width: 760px;
line-height: 1.55 !important;
}
#step-1 .um-torbox-btn {
min-height: 44px;
padding: 0 17px !important;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(123,47,255,.42) !important;
border-radius: 11px !important;
background:
linear-gradient(
135deg,
rgba(123,47,255,.93),
rgba(139,60,255,.72)
) !important;
color: #fff !important;
font-weight: 800 !important;
box-shadow:
0 12px 29px rgba(123,47,255,.18);
transition:
transform .17s ease,
box-shadow .17s ease;
}
#step-1 .um-torbox-btn:hover {
transform: translateY(-2px);
box-shadow:
0 16px 36px rgba(123,47,255,.27);
}
/* ---------------------------------------------------------
Final destination controls
--------------------------------------------------------- */
#step-1 .s1-final-nav {
width: 100%;
margin-top: 32px !important;
padding-top: 20px !important;
display: flex !important;
align-items: stretch !important;
justify-content: flex-end !important;
gap: 11px !important;
border-top: 1px solid rgba(255,255,255,.075) !important;
}
#step-1 .s1-final-nav .nav-btn {
min-height: 66px;
border-radius: 15px !important;
}
#step-1 .s1-final-nav .nav-btn.primary {
position: relative;
min-width: 280px;
padding: 13px 54px 13px 18px !important;
display: flex;
align-items: center;
justify-content: flex-start;
border: 1px solid rgba(156,102,255,.52) !important;
background:
radial-gradient(
circle at 92% 18%,
rgba(255,255,255,.18),
transparent 36%
),
linear-gradient(
135deg,
rgba(123,47,255,.96),
rgba(124,43,255,.73)
) !important;
color: var(--text) !important;
font-size: 14px !important;
font-weight: 820 !important;
letter-spacing: .04em !important;
box-shadow:
0 15px 38px rgba(123,47,255,.23),
0 0 28px rgba(123,47,255,.10);
overflow: hidden;
}
#step-1 .s1-final-nav .nav-btn.primary::after {
content: '→';
position: absolute;
right: 15px;
width: 34px;
height: 34px;
display: grid;
place-items: center;
border: 1px solid rgba(255,255,255,.16);
border-radius: 10px;
background: rgba(255,255,255,.10);
font-size: 16px;
transition:
transform .17s ease,
background .17s ease;
}
#step-1 .s1-final-nav .nav-btn.primary:hover {
opacity: 1 !important;
transform: translateY(-2px);
background:
radial-gradient(
circle at 92% 18%,
rgba(255,255,255,.22),
transparent 36%
),
linear-gradient(
135deg,
rgba(137,63,255,.98),
rgba(123,47,255,.79)
) !important;
box-shadow:
0 19px 44px rgba(123,47,255,.31),
0 0 34px rgba(123,47,255,.13);
}
#step-1 .s1-final-nav .nav-btn.primary:hover::after {
transform: translateX(3px);
background: rgba(255,255,255,.15);
}
/* ---------------------------------------------------------
Responsive behaviour
--------------------------------------------------------- */
@media (max-width:900px) {
#step-1 #step1Toolbar {
grid-template-columns:
repeat(3, minmax(0, 1fr));
}
#step-1 #step1Toolbar > div {
grid-column: 1 / -1;
}
#step-1 #step1Toolbar > div > button {
min-height: 48px;
}
}
@media (max-width:700px) {
#step-1 #step1Toolbar {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 8px !important;
}
#step-1 #step1Toolbar > button,
#step-1 #step1Toolbar > div > button {
min-height: 54px;
padding: 10px 12px !important;
}
#step-1 #step1Toolbar > button:nth-of-type(3) {
grid-column: 1;
}
#step-1 #step1Toolbar > div {
grid-column: 2;
}
#step-1 #toolsMenu {
position: fixed !important;
left: 14px !important;
right: 14px !important;
top: auto !important;
bottom: 14px !important;
min-width: 0 !important;
}
#step-1 #tile-content-password,
#step-1 #tile-content-mdblist {
min-height: 0;
padding: 16px !important;
}
#step-1 .opt-subsection {
margin-left: 10px;
margin-right: 10px;
}
#step-1 #streamsSectionBody {
padding-left: 10px;
padding-right: 10px;
}
#step-1 .um-torbox-card {
padding: 15px !important;
}
#step-1 .um-torbox-inner {
align-items: flex-start;
}
#step-1 .um-torbox-btn {
width: 100%;
margin-top: 13px;
}
#step-1 .s1-final-nav {
flex-direction: column-reverse !important;
align-items: stretch !important;
}
#step-1 .s1-final-nav .nav-btn,
#step-1 .s1-final-nav .nav-btn.primary {
width: 100%;
min-width: 0;
}
}
@media (prefers-reduced-motion: reduce) {
#step-1 *,
#step-1 *::before,
#step-1 *::after {
transition: none !important;
animation: none !important;
}
}
/* ===== setup.html style block 19: block-19 ===== */
/* ULTRA MAX STEP 3 SAFE CSS REWORK */
#step-3 {
--s3-purple: #9b6cff;
--s3-blue: #60a5fa;
--s3-green: #34d399;
--s3-gold: #f6c453;
max-width: 1320px;
margin-inline: auto;
padding-bottom: 40px;
}
/* Hide the duplicate compact preset clone.
The full preset gallery remains untouched. */
#step-3 #s3StickyPresets {
display: none !important;
}
/* Header spacing */
#step-3 > .um-step-header {
padding-bottom: 18px !important;
}
/* Main preset area */
#step-3 #presetsPanel {
position: relative;
margin-bottom: 24px !important;
padding: 20px;
border: 1px solid rgba(123,47,255,.20);
border-radius: 20px;
background:
radial-gradient(
circle at 50% 0%,
rgba(123,47,255,.10),
transparent 48%
),
linear-gradient(
145deg,
rgba(18,17,35,.95),
rgba(9,9,19,.98)
);
box-shadow:
0 18px 46px rgba(0,0,0,.24),
inset 0 1px 0 rgba(255,255,255,.035);
}
/* Section labels */
#step-3 .s3-label {
margin-bottom: 13px;
display: flex;
align-items: center;
gap: 10px;
color: rgba(255,255,255,.48);
font-size: 9px;
font-weight: 800;
letter-spacing: .17em;
text-transform: uppercase;
}
#step-3 .s3-label::after {
height: 1px;
background:
linear-gradient(
90deg,
rgba(123,47,255,.34),
rgba(255,255,255,.04)
);
}
#step-3 #presetsPanel > p {
max-width: 720px;
margin-bottom: 18px !important;
color: rgba(255,255,255,.43) !important;
font-size: 11px !important;
line-height: 1.65 !important;
}
/* Preset grid */
#step-3 #s3PresetsGrid {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 12px;
}
#step-3 .s3-preset-card {
position: relative;
min-width: 0;
border: 1px solid rgba(255,255,255,.09);
border-radius: 16px;
background:
linear-gradient(
145deg,
rgba(24,22,47,.96),
rgba(13,12,27,.99)
);
box-shadow:
0 11px 28px rgba(0,0,0,.21),
inset 0 1px 0 rgba(255,255,255,.025);
overflow: hidden;
cursor: pointer;
transition:
transform .18s ease,
border-color .18s ease,
box-shadow .18s ease,
background .18s ease;
}
#step-3 .s3-preset-card:hover {
transform: translateY(-3px);
border-color: rgba(156,102,255,.57);
background:
radial-gradient(
circle at 8% 92%,
rgba(123,47,255,.12),
transparent 44%
),
linear-gradient(
145deg,
rgba(28,24,55,.98),
rgba(14,13,29,.99)
);
box-shadow:
0 17px 40px rgba(0,0,0,.31),
0 0 26px rgba(123,47,255,.09);
}
#step-3 .s3-preset-card:active {
transform: translateY(-1px) scale(.995);
}
/* Poster strips */
#step-3 .s3-preset-strip {
position: relative;
height: 82px;
display: flex;
gap: 2px;
background:
radial-gradient(
circle at 25% 40%,
rgba(123,47,255,.20),
transparent 45%
),
linear-gradient(
135deg,
rgba(32,26,63,.94),
rgba(13,12,27,.98)
);
overflow: hidden;
}
#step-3 .s3-preset-strip::after {
content: '';
position: absolute;
inset: auto 0 0;
height: 35px;
background:
linear-gradient(
to bottom,
transparent,
rgba(12,11,25,.88)
);
pointer-events: none;
}
#step-3 .s3-preset-strip img {
flex: 1 1 0;
width: 25%;
min-width: 0;
height: 100%;
object-fit: cover;
color: transparent;
font-size: 0;
text-indent: -9999px;
background:
linear-gradient(
145deg,
rgba(123,47,255,.16),
rgba(255,255,255,.025)
);
transition:
transform .3s ease,
filter .3s ease,
opacity .3s ease;
}
#step-3 .s3-preset-card:hover
.s3-preset-strip img {
transform: scale(1.045);
filter: saturate(1.08) contrast(1.03);
}
/* Preset card copy */
#step-3 .s3-preset-body {
position: relative;
min-height: 70px;
padding: 10px 13px 12px;
}
#step-3 .s3-preset-icon {
width: 29px;
height: 29px;
margin-right: 7px;
display: inline-grid;
place-items: center;
border: 1px solid rgba(255,255,255,.075);
border-radius: 9px;
background:
linear-gradient(
145deg,
rgba(123,47,255,.28),
rgba(255,61,90,.10)
);
box-shadow:
0 7px 18px rgba(0,0,0,.22);
font-size: 13px;
vertical-align: middle;
}
#step-3 .s3-preset-name {
display: inline;
color: var(--text);
font-size: 12px;
font-weight: 790;
vertical-align: middle;
}
#step-3 .s3-preset-add {
margin-top: 7px;
padding-left: 36px;
color: rgba(195,166,255,.80);
font-size: 9px;
font-weight: 760;
}
#step-3 .s3-preset-add::after {
content: ' →';
}
#step-3 .s3-preset-card.just-added {
animation: s3SafeAdded .75s ease;
}
@keyframes s3SafeAdded {
0% {
box-shadow:
0 0 0 0 rgba(52,211,153,0);
}
35% {
border-color: rgba(52,211,153,.70);
box-shadow:
0 0 0 4px rgba(52,211,153,.12),
0 0 32px rgba(52,211,153,.19);
}
100% {
box-shadow:
0 11px 28px rgba(0,0,0,.21);
}
}
/* Display Style panel.
Targets the direct wrapper containing the view-mode grid. */
#step-3 #s3ViewModeGrid {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 10px;
margin-bottom: 26px;
padding: 16px;
border: 1px solid rgba(96,165,250,.16);
border-radius: 18px;
background:
radial-gradient(
circle at 50% 0%,
rgba(96,165,250,.075),
transparent 50%
),
linear-gradient(
145deg,
rgba(17,16,34,.94),
rgba(9,9,18,.98)
);
box-shadow:
0 15px 38px rgba(0,0,0,.20),
inset 0 1px 0 rgba(255,255,255,.03);
}
#step-3 .s3-viewmode-card {
position: relative;
min-height: 94px;
padding: 15px 13px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,.09);
border-radius: 15px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.038),
rgba(255,255,255,.009)
);
cursor: pointer;
transition:
transform .18s ease,
border-color .18s ease,
background .18s ease,
box-shadow .18s ease;
}
#step-3 .s3-viewmode-card:hover {
transform: translateY(-2px);
border-color: rgba(96,165,250,.43);
}
#step-3 .s3-viewmode-card.active {
border-color: rgba(156,102,255,.78);
background:
radial-gradient(
circle at 50% 0%,
rgba(123,47,255,.20),
transparent 58%
),
linear-gradient(
145deg,
rgba(123,47,255,.11),
rgba(255,255,255,.012)
);
box-shadow:
0 0 0 2px rgba(123,47,255,.10),
0 12px 30px rgba(0,0,0,.20),
0 0 27px rgba(123,47,255,.09);
}
#step-3 .s3-viewmode-card.active::after {
content: '✓';
position: absolute;
top: 9px;
right: 9px;
width: 21px;
height: 21px;
display: grid;
place-items: center;
border: 1px solid rgba(255,255,255,.08);
border-radius: 7px;
background: rgba(123,47,255,.31);
color: var(--text);
font-size: 10px;
font-weight: 900;
}
#step-3 .s3-viewmode-icon {
margin-bottom: 8px;
color: rgba(255,255,255,.86);
font-size: 23px;
}
#step-3 .s3-viewmode-name {
color: var(--text);
font-size: 12px;
font-weight: 770;
}
#step-3 .s3-viewmode-desc {
margin-top: 3px;
color: rgba(255,255,255,.40);
font-size: 9px;
}
/* Collection toolbar */
#step-3 .coll-sticky-bar {
position: relative !important;
top: auto !important;
margin: 3px 0 14px !important;
padding: 14px !important;
display: grid !important;
grid-template-columns:
minmax(160px,.75fr)
minmax(220px,1fr)
auto
auto;
align-items: center;
gap: 9px;
border: 1px solid rgba(123,47,255,.18);
border-radius: 17px;
background:
radial-gradient(
circle at 100% 0%,
rgba(123,47,255,.09),
transparent 43%
),
rgba(14,13,27,.95);
box-shadow:
0 14px 37px rgba(0,0,0,.21),
inset 0 1px 0 rgba(255,255,255,.03);
backdrop-filter: blur(18px);
}
#step-3 .coll-sticky-bar .s3-label {
margin: 0 !important;
}
#step-3 .coll-search {
width: 100%;
min-height: 44px;
border: 1px solid rgba(255,255,255,.10) !important;
border-radius: 11px !important;
background:
linear-gradient(
145deg,
rgba(6,6,13,.76),
rgba(16,15,31,.80)
) !important;
color: #fff !important;
transition:
border-color .17s ease,
box-shadow .17s ease;
}
#step-3 .coll-search:focus {
outline: none;
border-color: rgba(156,102,255,.62) !important;
box-shadow:
0 0 0 3px rgba(123,47,255,.10);
}
#step-3 .coll-sticky-bar .nav-btn {
min-height: 44px;
padding: 0 15px !important;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 11px !important;
font-size: 11px !important;
font-weight: 770;
}
#step-3 .coll-sticky-bar .nav-btn.primary {
border-color: rgba(156,102,255,.52) !important;
background:
linear-gradient(
135deg,
rgba(123,47,255,.93),
rgba(143,64,255,.75)
) !important;
color: #fff !important;
box-shadow:
0 11px 28px rgba(123,47,255,.19);
}
/* Existing collection cards */
#step-3 #collections-list {
display: flex;
flex-direction: column;
gap: 12px;
}
#step-3 .coll-card {
border: 1px solid rgba(255,255,255,.09);
border-radius: 17px;
background:
linear-gradient(
145deg,
rgba(20,18,39,.95),
rgba(11,11,22,.99)
);
box-shadow:
0 13px 34px rgba(0,0,0,.21);
overflow: hidden;
transition:
border-color .18s ease,
transform .18s ease,
box-shadow .18s ease;
}
#step-3 .coll-card:hover {
transform: translateY(-1px);
border-color: rgba(156,102,255,.41);
box-shadow:
0 17px 42px rgba(0,0,0,.28),
0 0 24px rgba(123,47,255,.065);
}
/* Empty state */
#step-3 #empty-state {
min-height: 235px;
padding: 32px 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px dashed rgba(123,47,255,.24);
border-radius: 19px;
background:
radial-gradient(
circle at 50% 40%,
rgba(123,47,255,.08),
transparent 49%
),
rgba(255,255,255,.008);
}
#step-3 .s3-empty-arrow {
margin-bottom: 8px;
color: rgba(156,102,255,.73);
font-size: 20px;
}
#step-3 .s3-empty-icon {
margin-bottom: 10px;
font-size: 38px;
opacity: .45;
}
#step-3 .s3-empty-text {
max-width: 470px;
color: rgba(255,255,255,.45);
font-size: 11px;
line-height: 1.72;
text-align: center;
}
/* Existing bottom navigation, restyled without markup changes */
#step-3 > .nav-btns {
width: min(100%, 820px);
margin: 30px auto 0 !important;
padding-top: 18px;
display: grid !important;
grid-template-columns: repeat(2,minmax(0,1fr));
align-items: stretch !important;
gap: 10px !important;
border-top: 1px solid rgba(255,255,255,.075);
}
#step-3 > .nav-btns > .nav-btn,
#step-3 > .nav-btns > .count-display {
min-width: 0;
min-height: 66px;
border: 1px solid rgba(255,255,255,.10);
border-radius: 15px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.041),
rgba(255,255,255,.010)
);
box-shadow:
0 11px 29px rgba(0,0,0,.18);
}
#step-3 > .nav-btns > .count-display,
#step-3 > .nav-btns > #nuvioPreviewBtn {
grid-column: 1 / -1;
}
#step-3 > .nav-btns > #nuvioPreviewBtn {
position: static !important;
width: 100%;
margin: 0 0 4px;
justify-self: stretch;
}
#step-3 > .nav-btns > .nav-btn {
padding: 10px 15px !important;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,.76);
font-size: 11px !important;
font-weight: 780;
transition:
transform .18s ease,
border-color .18s ease,
box-shadow .18s ease;
}
#step-3 > .nav-btns > .nav-btn:hover {
transform: translateY(-2px);
border-color: rgba(156,102,255,.47);
box-shadow:
0 15px 36px rgba(0,0,0,.25);
}
#step-3 > .nav-btns > .nav-btn.primary {
border-color: rgba(156,102,255,.43) !important;
background:
radial-gradient(
circle at 90% 10%,
rgba(255,61,90,.14),
transparent 44%
),
linear-gradient(
135deg,
rgba(123,47,255,.34),
rgba(123,47,255,.16)
) !important;
color: var(--text) !important;
box-shadow:
0 14px 34px rgba(123,47,255,.14);
}
#step-3 > .nav-btns > .nav-btn.primary:hover {
border-color: rgba(176,135,255,.71) !important;
box-shadow:
0 18px 41px rgba(123,47,255,.23);
}
#step-3 > .nav-btns > .count-display {
padding: 9px 14px;
display: flex !important;
align-items: center;
justify-content: center;
gap: 5px;
border-color: rgba(123,47,255,.19);
background:
linear-gradient(
145deg,
rgba(123,47,255,.075),
rgba(255,255,255,.009)
);
}
#step-3 > .nav-btns
.count-display #collCount,
#step-3 > .nav-btns
.count-display #folderCount {
min-width: 35px;
height: 35px;
padding: 0 8px;
display: inline-grid;
place-items: center;
border-radius: 10px;
background:
linear-gradient(
145deg,
rgba(123,47,255,.25),
rgba(123,47,255,.10)
);
color: #d9c5ff !important;
font-size: 18px !important;
}
/* Responsive */
@media (max-width:1100px) {
#step-3 #s3PresetsGrid {
grid-template-columns:
repeat(2,minmax(0,1fr));
}
#step-3 .coll-sticky-bar {
grid-template-columns:
repeat(2,minmax(0,1fr));
}
#step-3 .coll-sticky-bar .s3-label,
#step-3 .coll-sticky-bar .coll-search {
grid-column: 1 / -1;
}
}
@media (max-width:700px) {
#step-3 {
padding-bottom: 90px !important;
}
.um-app-mode #step-3 {
padding-bottom: 210px !important;
}
#step-3 #presetsPanel {
padding: 14px;
border-radius: 17px;
}
#step-3 #s3PresetsGrid {
grid-template-columns:
repeat(2,minmax(0,1fr));
gap: 9px;
}
#step-3 .s3-preset-strip {
height: 61px;
}
#step-3 .s3-preset-body {
min-height: 64px;
padding: 9px 10px 10px;
}
#step-3 .s3-preset-add {
padding-left: 0;
}
#step-3 #s3ViewModeGrid {
grid-template-columns: 1fr;
padding: 12px;
}
#step-3 .s3-viewmode-card {
min-height: 64px;
flex-direction: row;
justify-content: flex-start;
gap: 12px;
text-align: left;
}
#step-3 .s3-viewmode-icon {
margin: 0;
}
#step-3 .coll-sticky-bar {
grid-template-columns:
repeat(2,minmax(0,1fr));
padding: 12px !important;
}
#step-3 .coll-sticky-bar .nav-btn {
width: 100%;
}
#step-3 > .nav-btns {
grid-template-columns:
repeat(2,minmax(0,1fr));
}
#step-3 > .nav-btns > .count-display {
grid-column: 1 / -1;
grid-row: 1;
}
#step-3 > .nav-btns > #nuvioPreviewBtn {
grid-column: 1 / -1;
grid-row: 2;
}
#step-3 > .nav-btns > .nav-btn:not(.primary) {
grid-column: 1;
grid-row: 3;
}
#step-3 > .nav-btns > .nav-btn.primary {
grid-column: 2;
grid-row: 3;
}
}
@media (max-width:430px) {
#step-3 #s3PresetsGrid {
grid-template-columns: 1fr;
}
#step-3 .coll-sticky-bar {
grid-template-columns: 1fr;
}
#step-3 .coll-sticky-bar .s3-label,
#step-3 .coll-sticky-bar .coll-search {
grid-column: 1;
}
}
@media (prefers-reduced-motion:reduce) {
#step-3 *,
#step-3 *::before,
#step-3 *::after {
animation: none !important;
transition: none !important;
}
}
/* ===== setup.html style block 20: block-20 ===== */
/* ULTRA MAX STEP 3 FINISHING FIXES */
/*
The preview control belongs to Step 2 only.
Hide both possible implementations everywhere else.
*/
#s2StepPreviewBtn,
.s2-preview-fab {
display: none !important;
}
body:has(#step-2.active) #s2StepPreviewBtn {
display: flex !important;
}
body:has(#step-2.active) .s2-preview-fab {
display: flex !important;
}
/*
Graceful preset artwork fallback.
JavaScript adds .s3-img-failed when an image cannot load.
*/
#step-3 .s3-preset-strip img.s3-img-failed {
opacity: 1 !important;
background:
radial-gradient(
circle at 50% 32%,
rgba(156,102,255,.30),
transparent 40%
),
linear-gradient(
150deg,
rgba(123,47,255,.24),
rgba(31,25,61,.90) 52%,
rgba(12,11,25,.98)
) !important;
border-right:
1px solid rgba(255,255,255,.045);
object-fit: contain;
}
#step-3 .s3-preset-strip img.s3-img-failed:nth-child(2) {
background:
radial-gradient(
circle at 50% 35%,
rgba(96,165,250,.24),
transparent 42%
),
linear-gradient(
150deg,
rgba(75,64,145,.32),
rgba(20,18,43,.96)
) !important;
}
#step-3 .s3-preset-strip img.s3-img-failed:nth-child(3) {
background:
radial-gradient(
circle at 50% 35%,
rgba(255,61,90,.18),
transparent 42%
),
linear-gradient(
150deg,
rgba(105,45,112,.28),
rgba(19,16,39,.97)
) !important;
}
#step-3 .s3-preset-strip img.s3-img-failed:nth-child(4) {
background:
radial-gradient(
circle at 50% 35%,
rgba(52,211,153,.16),
transparent 42%
),
linear-gradient(
150deg,
rgba(52,90,112,.24),
rgba(16,15,34,.98)
) !important;
}
/* ===== setup.html style block 21: block-21 ===== */
/* ULTRA MAX STEP 4 FINAL SHOWROOM */
#step-4 {
max-width: 1320px;
margin-inline: auto;
padding: 25px 0 44px;
}
/* Hide unrelated floating preview while finalising */
body:has(#step-4.active) #nuvioPreviewBtn,
body:has(#step-4.active) #s2StepPreviewBtn,
body:has(#step-4.active) .s2-preview-fab {
display: none !important;
}
/* Finalise heading */
#step-4 > .section-title {
margin: 0 0 18px;
padding-bottom: 12px;
display: flex;
align-items: center;
gap: 10px;
border-bottom: 1px solid rgba(255,255,255,.075);
color: rgba(255,255,255,.52);
font-size: 10px;
font-weight: 800;
letter-spacing: .17em;
text-transform: uppercase;
}
/* Top information panels */
#step-4 > .result-section {
position: relative;
margin-bottom: 14px !important;
padding: 18px !important;
border: 1px solid rgba(123,47,255,.18) !important;
border-radius: 18px !important;
background:
radial-gradient(
circle at 100% 0%,
rgba(123,47,255,.08),
transparent 44%
),
linear-gradient(
145deg,
rgba(20,18,40,.95),
rgba(11,11,23,.99)
) !important;
box-shadow:
0 15px 40px rgba(0,0,0,.22),
inset 0 1px 0 rgba(255,255,255,.035);
}
#step-4 > .result-section:first-of-type {
border-color: rgba(96,165,250,.18) !important;
background:
radial-gradient(
circle at 100% 0%,
rgba(96,165,250,.075),
transparent 44%
),
linear-gradient(
145deg,
rgba(18,19,39,.96),
rgba(10,11,22,.99)
) !important;
}
#step-4 > .result-section:nth-of-type(2) {
border-color: rgba(52,211,153,.16) !important;
}
#step-4 .result-label {
margin-bottom: 12px;
color: rgba(255,255,255,.50) !important;
font-size: 9px !important;
font-weight: 820 !important;
letter-spacing: .16em !important;
text-transform: uppercase;
}
/* Instruction text */
#step-4 > .result-section:first-of-type
> div:last-child {
color: rgba(255,255,255,.51) !important;
font-size: 11px !important;
line-height: 1.72 !important;
}
#step-4 > .result-section:first-of-type strong {
color: rgba(255,255,255,.88) !important;
}
/* Summary converted into a compact dashboard */
#step-4 > .result-section:nth-of-type(2)
> div:nth-child(2) {
display: grid;
grid-template-columns:
repeat(5,minmax(0,1fr));
gap: 8px;
line-height: 1.3 !important;
}
#step-4 > .result-section:nth-of-type(2)
> div:nth-child(2) > div {
min-height: 66px;
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
border: 1px solid rgba(255,255,255,.075);
border-radius: 12px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.032),
rgba(255,255,255,.008)
);
color: rgba(255,255,255,.42);
font-size: 9px;
text-align: center;
}
#step-4 > .result-section:nth-of-type(2)
strong {
display: block;
color: #d8c4ff !important;
font-family: 'Bebas Neue',sans-serif;
font-size: 20px;
letter-spacing: .03em;
}
#step-4 #finalHint {
margin-top: 12px !important;
padding: 10px 12px;
border: 1px solid rgba(52,211,153,.12);
border-radius: 11px;
background: rgba(52,211,153,.035);
color: rgba(255,255,255,.43) !important;
font-size: 10px !important;
line-height: 1.55 !important;
}
/* Generate setup call-to-action */
#step-4 #genBtn {
position: relative;
min-height: 70px;
margin: 3px 0 18px !important;
padding: 14px 64px 14px 20px !important;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,.23) !important;
border-radius: 17px !important;
background:
radial-gradient(
circle at 8% 50%,
rgba(31,224,198,.62),
transparent 35%
),
radial-gradient(
circle at 90% 25%,
rgba(255,255,255,.18),
transparent 35%
),
linear-gradient(
120deg,
#13c9ba,
#5d71f5 57%,
#832dff
) !important;
color: var(--text) !important;
font-family: 'Bebas Neue',sans-serif !important;
font-size: 18px !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
box-shadow:
0 18px 46px rgba(77,84,255,.27),
0 0 34px rgba(123,47,255,.13),
inset 0 1px 0 rgba(255,255,255,.22);
overflow: hidden;
transition:
transform .18s ease,
box-shadow .18s ease,
filter .18s ease;
}
#step-4 #genBtn::after {
content: '→';
position: absolute;
right: 17px;
width: 38px;
height: 38px;
display: grid;
place-items: center;
border: 1px solid rgba(255,255,255,.20);
border-radius: 12px;
background: rgba(255,255,255,.11);
font-family: inherit;
font-size: 18px;
}
#step-4 #genBtn:hover {
transform: translateY(-2px);
filter: brightness(1.06);
box-shadow:
0 22px 54px rgba(77,84,255,.34),
0 0 40px rgba(123,47,255,.18);
}
#step-4 #loading {
margin: 0 0 16px;
padding: 13px;
border: 1px solid rgba(123,47,255,.19);
border-radius: 12px;
background: rgba(123,47,255,.06);
color: rgba(255,255,255,.62);
text-align: center;
}
/* Generated result workspace */
#step-4 #resultBox {
margin-top: 4px;
}
#step-4 #s4Stack {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
#step-4 #s4Stack > div:not(.final-export-row):not(.final-back-row) {
position: relative;
min-width: 0;
padding: 18px !important;
border: 1px solid rgba(123,47,255,.20) !important;
border-radius: 18px !important;
background:
radial-gradient(
circle at 100% 0%,
rgba(123,47,255,.09),
transparent 42%
),
linear-gradient(
145deg,
rgba(19,17,39,.96),
rgba(10,10,22,.99)
) !important;
box-shadow:
0 15px 38px rgba(0,0,0,.22),
inset 0 1px 0 rgba(255,255,255,.03);
}
#step-4 #pushToNuvioCard {
border-color: rgba(52,211,153,.20) !important;
background:
radial-gradient(
circle at 100% 0%,
rgba(52,211,153,.08),
transparent 44%
),
linear-gradient(
145deg,
rgba(13,29,27,.94),
rgba(10,16,18,.99)
) !important;
}
#step-4 #nuvio-qr-card {
border-color: rgba(96,165,250,.21) !important;
background:
radial-gradient(
circle at 100% 0%,
rgba(96,165,250,.09),
transparent 44%
),
linear-gradient(
145deg,
rgba(14,22,37,.95),
rgba(9,13,23,.99)
) !important;
}
/* Result inputs and URL */
#step-4 .url-display,
#step-4 input[type="email"],
#step-4 input[type="password"] {
min-height: 43px;
border: 1px solid rgba(255,255,255,.10) !important;
border-radius: 10px !important;
background:
linear-gradient(
145deg,
rgba(5,5,12,.72),
rgba(16,15,30,.84)
) !important;
color: #fff !important;
}
#step-4 .url-display {
padding: 11px 12px !important;
overflow-wrap: anywhere;
}
#step-4 input:focus {
outline: none;
border-color: rgba(156,102,255,.62) !important;
box-shadow:
0 0 0 3px rgba(123,47,255,.10);
}
/* Result buttons */
#step-4 #resultBox .nav-btn,
#step-4 #resultBox .rbtn,
#step-4 #nuvio-qr-toggle {
min-height: 42px;
padding: 0 14px !important;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,.10) !important;
border-radius: 10px !important;
background:
linear-gradient(
145deg,
rgba(255,255,255,.045),
rgba(255,255,255,.012)
) !important;
color: rgba(255,255,255,.69) !important;
font-family: inherit;
font-size: 10px !important;
font-weight: 760 !important;
text-decoration: none;
cursor: pointer;
transition:
transform .17s ease,
border-color .17s ease,
box-shadow .17s ease;
}
#step-4 #resultBox .nav-btn.primary,
#step-4 #resultBox .rbtn.primary,
#step-4 #nuvio-login-btn,
#step-4 #nuvio-confirm-btn {
border-color: rgba(156,102,255,.48) !important;
background:
linear-gradient(
135deg,
rgba(123,47,255,.94),
rgba(139,54,255,.72)
) !important;
color: #fff !important;
box-shadow:
0 10px 25px rgba(123,47,255,.17);
}
#step-4 #resultBox button:hover,
#step-4 #resultBox a:hover {
transform: translateY(-1px);
border-color: rgba(156,102,255,.52) !important;
}
/* QR block */
#step-4 #nuvio-qr-code {
max-width: 100%;
padding: 12px !important;
box-shadow:
0 14px 38px rgba(0,0,0,.30);
}
#step-4 #nuvio-qr-code img,
#step-4 #nuvio-qr-code canvas {
max-width: 100%;
height: auto !important;
}
/* Token card */
#step-4 #s4Stack > div:has(#tokenDisplayNew) {
margin-bottom: 12px !important;
padding: 16px 18px !important;
border: 1px solid rgba(123,47,255,.45) !important;
border-radius: 16px !important;
background:
radial-gradient(
circle at 100% 0%,
rgba(123,47,255,.22),
transparent 55%
),
linear-gradient(
135deg,
rgba(123,47,255,.18),
rgba(255,61,90,.07)
) !important;
box-shadow:
0 8px 28px rgba(123,47,255,.20);
}
#step-4 #tokenDisplayNew {
color: var(--text) !important;
font-size: 18px !important;
text-shadow:
0 0 18px rgba(123,47,255,.35);
}
#step-4 #s4Stack > div:has(#tokenDisplayNew)
button {
min-height: 40px;
border-radius: 10px !important;
}
/* Recovery email card */
#step-4 #s4Stack > div:has(#recoveryEmail) {
margin-bottom: 12px !important;
padding: 16px !important;
border: 1px solid rgba(96,165,250,.16) !important;
border-radius: 15px !important;
background:
radial-gradient(
circle at 100% 0%,
rgba(96,165,250,.07),
transparent 46%
),
linear-gradient(
145deg,
rgba(16,19,34,.95),
rgba(10,11,20,.99)
) !important;
}
#step-4 #registerEmailBtn {
min-height: 42px;
border: 1px solid rgba(156,102,255,.46) !important;
border-radius: 10px !important;
background:
linear-gradient(
135deg,
rgba(123,47,255,.93),
rgba(139,54,255,.72)
) !important;
box-shadow:
0 10px 25px rgba(123,47,255,.17);
}
/* Extra exports */
#step-4 .final-export-row {
display: grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap: 10px !important;
margin-bottom: 12px !important;
}
#step-4 .final-export-row .nav-btn {
min-height: 58px;
border: 1px solid rgba(255,255,255,.09) !important;
border-radius: 14px !important;
background:
linear-gradient(
145deg,
rgba(255,255,255,.035),
rgba(255,255,255,.009)
) !important;
color: rgba(255,255,255,.65) !important;
font-size: 11px !important;
font-weight: 770;
}
/* Final back control */
#step-4 .final-back-row {
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid rgba(255,255,255,.075);
}
#step-4 .final-back-row .nav-btn {
min-width: 190px;
min-height: 52px;
border: 1px solid rgba(255,255,255,.10) !important;
border-radius: 13px !important;
background:
linear-gradient(
145deg,
rgba(255,255,255,.035),
rgba(255,255,255,.008)
) !important;
color: rgba(255,255,255,.60) !important;
}
/* Mobile */
@media (max-width:900px) {
#step-4 > .result-section:nth-of-type(2)
> div:nth-child(2) {
grid-template-columns:
repeat(3,minmax(0,1fr));
}
}
@media (max-width:700px) {
#step-4 {
padding-top: 18px;
}
#step-4 > .result-section {
padding: 15px !important;
border-radius: 16px !important;
}
#step-4 > .result-section:nth-of-type(2)
> div:nth-child(2) {
grid-template-columns:
repeat(2,minmax(0,1fr));
}
#step-4 #genBtn {
min-height: 66px;
padding-left: 14px !important;
font-size: 16px !important;
}
#step-4 .final-export-row {
grid-template-columns: 1fr !important;
}
#step-4 .s4-input-row {
flex-direction: column;
}
#step-4 #registerEmailBtn {
width: 100%;
}
#step-4 .final-back-row .nav-btn {
width: 100%;
}
}
@media (max-width:430px) {
#step-4 > .result-section:nth-of-type(2)
> div:nth-child(2) {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion:reduce) {
#step-4 *,
#step-4 *::before,
#step-4 *::after {
animation: none !important;
transition: none !important;
}
}
/* ===== setup.html style block 22: ultramax-native-layout-polish ===== */
/* ULTRA MAX NATIVE LAYOUT POLISH */
/*
Keep the successful WebView viewport repair, but make the native
Step 2 layout compact and deliberate.
*/
html.um-app-mode,
html.um-app-mode body {
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
/* Allow content to clear the fixed native bottom navigation. */
.um-app-mode .wizard-step {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
padding-left: 16px !important;
padding-right: 16px !important;
padding-bottom: 150px !important;
}
/* Compact two-column preset layout on native phones. */
.um-app-mode .s2-presets-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
}
.um-app-mode .s2-presets-grid > * {
grid-column: auto !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
.um-app-mode .s2-preset {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
overflow: hidden !important;
}
.um-app-mode .s2-preset-strip {
height: 64px !important;
min-height: 64px !important;
overflow: hidden !important;
}
.um-app-mode .s2-preset-strip img {
width: 25% !important;
min-width: 0 !important;
height: 64px !important;
object-fit: cover !important;
}
.um-app-mode .s2-preset-body {
min-width: 0 !important;
padding: 12px !important;
text-align: left !important;
}
.um-app-mode .s2-preset-name {
font-size: 13px !important;
line-height: 1.2 !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
}
.um-app-mode .s2-preset-count {
font-size: 11px !important;
margin-top: 4px !important;
}
/*
Keep Everything full-width because it represents the complete setup.
*/
.um-app-mode .s2-presets-grid > *:last-child {
grid-column: 1 / -1 !important;
}
.um-app-mode .s2-presets-grid > *:last-child .s2-preset-body {
text-align: center !important;
}
/* Remove browser-style floating controls from the native shell. */
.um-app-mode #themeToggle {
display: none !important;
}
/* Final review section should not look like a vacant billboard. */
.um-app-mode .s2-review-zone {
padding: 22px 16px !important;
margin-top: 24px !important;
}
.um-app-mode .s2-review-heading {
padding: 0 !important;
min-height: 0 !important;
}
.um-app-mode .s2-review-sub {
max-width: 320px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Arrange native actions as a predictable two-column block. */
.um-app-mode #step-2 .s2-bottom-nav {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
width: 100% !important;
max-width: 100% !important;
align-items: stretch !important;
}
.um-app-mode #step-2 .s2-bottom-nav > * {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
}
/* Row count spans the full width above navigation actions. */
.um-app-mode #step-2 .s2-selection-card {
grid-column: 1 / -1 !important;
order: 1 !important;
}
/* Primary navigation row. */
.um-app-mode #step-2 .s2-nav-card-back {
grid-column: 1 !important;
order: 2 !important;
}
.um-app-mode #step-2 .s2-nav-card-next {
grid-column: 2 !important;
order: 3 !important;
}
/* Secondary actions sit beneath Back and Collections. */
.um-app-mode #step-2 .s2-app-summary-btn {
grid-column: 1 !important;
order: 4 !important;
}
.um-app-mode #step-2 .s2-app-preview-btn {
grid-column: 2 !important;
order: 5 !important;
}
.um-app-mode #step-2 .s2-app-summary-btn,
.um-app-mode #step-2 .s2-app-preview-btn {
min-height: 54px !important;
padding: 12px !important;
border-radius: 14px !important;
}
/* Prevent long category text from pushing controls outside the card. */
.um-app-mode .s2-cat-info,
.um-app-mode .s2-cat-name,
.um-app-mode .s2-cat-sub {
min-width: 0 !important;
}
.um-app-mode .s2-cat-sub {
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
/* Very narrow WebViews still retain two compact columns. */
@media (max-width: 430px) {
.um-app-mode .s2-presets-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
.um-app-mode .s2-preset-strip,
.um-app-mode .s2-preset-strip img {
height: 56px !important;
min-height: 56px !important;
}
.um-app-mode .s2-preset-body {
padding: 10px !important;
}
.um-app-mode .s2-preset-name {
font-size: 12px !important;
}
}
/* ===== setup.html style block 23: ULTRAMAX_TV_FOCUS_LAYER ===== */
/*
* Android TV / Fire TV remote focus layer.
* Keeps focused controls visible and unmistakable. Gated to html.um-tv-input
* so the highlight only appears on TV, not on phones/tablets.
*/
html.um-tv-input :where(
button,
input,
select,
textarea,
a[href],
[tabindex]:not([tabindex="-1"]),
[role="button"]
):focus-visible {
outline: 4px solid #ffffff !important;
outline-offset: 4px !important;
box-shadow:
0 0 0 7px rgba(123, 47, 255, 0.92),
0 0 30px rgba(123, 47, 255, 0.78) !important;
position: relative;
z-index: 30;
}
html.um-tv-input :where(
.s1-tile,
.s3-sticky-toggle,
.s3-preset-card,
.s3-viewmode-card,
.s2-preset,
.s2-pill,
.s2-cat-head,
.cat-header,
.sub-cat-header,
.coll-card-header,
.folder-header,
.sum-section-title,
.um-kbd-toggle
):focus-visible {
transform: scale(1.025);
}
/* Toggle switches built from a visually-hidden checkbox (0x0, opacity:0)
need the glow on the visible track span instead — an outline on a
zero-size element is invisible to a D-pad user. */
html.um-tv-input input[type="checkbox"]:focus-visible + span {
outline: 4px solid #ffffff !important;
outline-offset: 2px !important;
box-shadow:
0 0 0 7px rgba(123, 47, 255, 0.92),
0 0 30px rgba(123, 47, 255, 0.78) !important;
border-radius: 24px;
}
@media (pointer: coarse), (hover: none) {
:where(
button,
[role="button"],
.s1-tile,
.s3-preset-card,
.s3-viewmode-card,
.s2-preset
) {
min-height: 48px;
}
}
/* ===== setup.html style block 24: ultramax-step2-ordered-grid ===== */
/* ULTRA MAX STEP 2 ORDERED CATALOG GRID */
/*
* Two equal columns keep matching movie and series rows together.
* The layout is intentionally retained on mobile, where the current
* catalogue labels comfortably fit side by side.
*/
#step-2 .s2-cat-pills {
display: none;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
gap: 9px;
}
#step-2 .s2-cat.s2-open .s2-cat-pills {
display: grid;
}
/* Equal-sized catalogue choices */
#step-2 .s2-cat-pills > .s2-pill {
width: 100%;
min-width: 0;
min-height: 42px;
margin: 0;
padding: 8px 10px;
display: flex;
align-items: center;
gap: 6px;
box-sizing: border-box;
line-height: 1.22;
text-align: left;
white-space: normal;
overflow-wrap: anywhere;
}
/* Keep the media icon compact and aligned */
#step-2 .s2-pill-type {
flex: 0 0 auto;
margin-left: 2px;
}
/* Keep the hidden control available without distorting each tile */
#step-2 .s2-pill-hidden-cb {
flex: 0 0 auto;
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 8px;
white-space: nowrap;
opacity: .46;
}
#step-2 .s2-pill:hover .s2-pill-hidden-cb,
#step-2 .s2-pill.s2-sel .s2-pill-hidden-cb,
#step-2 .s2-pill.s2-hidden .s2-pill-hidden-cb {
opacity: .82;
}
/* Row settings (sort & filter) button — same subtle-by-default,
highlight-on-hover language as the hidden-toggle control above */
#step-2 .s2-pill-settings-btn {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
margin-left: 5px;
padding: 0;
border: 1px solid rgba(255,255,255,.09);
border-radius: 6px;
background: var(--surface-soft);
color: var(--muted);
opacity: .55;
cursor: pointer;
transition: opacity .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}
#step-2 .s2-pill-settings-btn svg {
width: 11px;
height: 11px;
display: block;
}
#step-2 .s2-pill-settings-btn:hover {
opacity: 1;
border-color: rgba(157,104,255,.60);
background: rgba(123,47,255,.16);
color: var(--violet2);
}
#step-2 .s2-pill-settings-btn.s2-pill-settings-active {
opacity: 1;
border-color: rgba(157,104,255,.55);
background: rgba(123,47,255,.22);
color: var(--violet2);
}
/* Select all and Clear belong on their own full-width footer */
#step-2 .s2-cat-actions {
grid-column: 1 / -1;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 8px;
margin-top: 4px;
padding-top: 11px;
border-top: 1px solid rgba(255,255,255,.055);
}
/* The power-user raw catalogue list gets the same tidy geometry */
#step-2 #s2RawPills {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
gap: 9px;
}
#step-2 #s2RawPills > .s2-pill {
width: 100%;
min-width: 0;
min-height: 42px;
margin: 0;
padding: 8px 10px;
display: flex;
align-items: center;
gap: 6px;
box-sizing: border-box;
line-height: 1.22;
text-align: left;
white-space: normal;
overflow-wrap: anywhere;
}
/* Very narrow screens need a little breathing room */
@media (max-width: 370px) {
#step-2 .s2-cat-pills,
#step-2 #s2RawPills {
gap: 7px;
}
#step-2 .s2-cat-pills > .s2-pill,
#step-2 #s2RawPills > .s2-pill {
min-height: 40px;
padding: 7px 8px;
font-size: 10px;
}
#step-2 .s2-pill-hidden-cb {
font-size: 7px;
}
}
/* ===== setup.html style block 25: ultramax-light-theme-final-pass ===== */
/*
* Ultra MAX light-mode final component pass.
*
* This block intentionally lives after the component CSS so later dark-mode
* component rules cannot override the semantic light-theme tokens.
*/
/* =========================================================
STEP 1: REQUIRED CARDS AND NUVIO ACCOUNT
========================================================= */
body.light-mode #step-1 #tile-content-password,
body.light-mode #step-1 #tile-content-mdblist,
body.light-mode #step-1 #step1NuvioPanel,
body.light-mode #step-1 .step1-nuvio-panel,
body.light-mode #step-1 .step1-required-main > .um-card,
body.light-mode #step-1 .step1-required-grid > .um-card {
background: var(--card) !important;
color: var(--text) !important;
border-color: var(--border2) !important;
box-shadow:
0 12px 30px var(--shadow),
inset 0 1px 0 rgba(255,255,255,.75) !important;
}
body.light-mode #step-1 #tile-content-password::before,
body.light-mode #step-1 #tile-content-mdblist::before {
opacity: .12 !important;
}
body.light-mode #step-1 .mobile-setup-card-title,
body.light-mode #step-1 .um-card-title,
body.light-mode #step-1 .step1-zone-title,
body.light-mode #step-1 .step1-nuvio-heading,
body.light-mode #step-1 .step1-nuvio-heading label,
body.light-mode #step-1 .step1-nuvio-login label,
body.light-mode #step-1 .nuvio-connected-panel label {
color: var(--text) !important;
}
body.light-mode #step-1 .mobile-setup-card-summary,
body.light-mode #step-1 .step1-zone-sub,
body.light-mode #step-1 .step1-nuvio-copy,
body.light-mode #step-1 .step1-nuvio-heading p,
body.light-mode #step-1 .step1-nuvio-status,
body.light-mode #step-1 .step1-nuvio-remember {
color: var(--text2) !important;
}
body.light-mode #step-1 .mobile-setup-card-state,
body.light-mode #step-1 .step1-nuvio-badge,
body.light-mode #step-1 .mobile-setup-card-badge {
background: var(--surface-soft) !important;
color: var(--violet-strong) !important;
border-color: var(--border2) !important;
}
body.light-mode #step-1 #step1NuvioEmail,
body.light-mode #step-1 #step1NuvioPassword,
body.light-mode #step-1 #step1NuvioProfile,
body.light-mode #step-1 #password,
body.light-mode #step-1 #confirmPassword,
body.light-mode #step-1 #mdblistKey {
background: var(--input-bg) !important;
color: var(--text) !important;
border-color: var(--border2) !important;
-webkit-text-fill-color: var(--text) !important;
box-shadow: none !important;
}
body.light-mode #step-1 #tile-content-password button[onclick*="togglePass"] {
background: var(--surface-soft) !important;
color: var(--text2) !important;
border-color: var(--border) !important;
}
/* =========================================================
OPTIONAL SECTIONS, POSTER KEYS AND INTEGRATIONS
========================================================= */
body.light-mode .opt-subsection,
body.light-mode .poster-provider-block,
body.light-mode .poster-provider-block input,
body.light-mode .poster-provider-block select,
body.light-mode #betterPostersStyle,
body.light-mode .nuvio-account-summary,
body.light-mode .nuvio-connected-panel {
background: var(--card) !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
body.light-mode .opt-subsection > summary {
background: var(--card2) !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
body.light-mode .opt-subsection[open] > summary {
background: var(--surface-soft) !important;
}
body.light-mode .poster-provider-label,
body.light-mode .poster-provider-label span,
body.light-mode .opt-subsection .field-label {
color: var(--text) !important;
}
body.light-mode .poster-provider-block {
border-bottom-color: var(--divider) !important;
}
/* =========================================================
STREAMS
========================================================= */
body.light-mode #advancedStreamBridgeBlock,
body.light-mode #advancedStreamBridgeBlock .optional-shell,
body.light-mode #advancedStreamBridgeBlock .stream-wizard-card,
body.light-mode #advancedStreamBridgeBlock .sf-field-row,
body.light-mode #advancedStreamBridgeBlock .stream-provider,
body.light-mode #advancedStreamBridgeBlock .external-link {
background: var(--card) !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
body.light-mode #debridService,
body.light-mode #debridApiKey,
body.light-mode #streamMinSizeGb,
body.light-mode #debridMaxSizeGb,
body.light-mode #streamSortMode,
body.light-mode #streamWizardUrl,
body.light-mode #streamFormatNameTemplate,
body.light-mode #streamFormatTitleTemplate {
background: var(--input-bg) !important;
color: var(--text) !important;
border-color: var(--border2) !important;
}
body.light-mode #advancedStreamBridgeBlock .sf-preset-btn {
background: var(--card2) !important;
color: var(--text) !important;
border-color: var(--border2) !important;
}
body.light-mode #advancedStreamBridgeBlock .sf-preset-btn.active {
background: var(--surface-soft) !important;
color: var(--violet-strong) !important;
border-color: var(--violet) !important;
}
/*
* Intentionally dark display previews.
* These simulate stream output rather than ordinary setup controls.
*/
body.light-mode #streamFormatPreview,
body.light-mode .sf-preview,
body.light-mode #streamFormatCheatsheet {
background: #0d0d14 !important;
color: #eeeeF6 !important;
border-color: #3a3a55 !important;
}
body.light-mode #streamFormatPreview strong,
body.light-mode #streamFormatCheatsheet strong,
body.light-mode #streamFormatCheatsheet code {
color: #ffffff !important;
}
/* TorBox remains a branded dark banner, but its copy must remain readable. */
body.light-mode .um-torbox-card,
body.light-mode .um-torbox-wrap {
color: #f5f1ff !important;
}
body.light-mode .um-torbox-title {
color: #ffffff !important;
}
body.light-mode .um-torbox-desc {
color: #d5cfea !important;
}
/* =========================================================
STEP 2: REVIEW AREA AND MANAGEMENT CONTROLS
========================================================= */
body.light-mode #step-2 .s2-review-zone {
background: var(--card) !important;
color: var(--text) !important;
border-color: var(--border2) !important;
box-shadow: 0 16px 38px var(--shadow) !important;
}
body.light-mode #step-2 .s2-review-title,
body.light-mode #step-2 .s2-review-kicker {
color: var(--text) !important;
}
body.light-mode #step-2 .s2-review-sub {
color: var(--text2) !important;
}
body.light-mode #step-2 .s2-review-actions .s2-step-summary-btn,
body.light-mode #step-2 .s2-review-actions .s2-step-preview-btn,
body.light-mode #step-2 .s2-tool-panel,
body.light-mode #step-2 .s2-nav-card,
body.light-mode #step-2 .s2-bottom-nav > * {
background: var(--card2) !important;
color: var(--text) !important;
border-color: var(--border2) !important;
}
body.light-mode #step-2 .s2-review-actions .s2-step-preview-btn {
background: var(--surface-soft) !important;
color: var(--violet-strong) !important;
border-color: var(--violet) !important;
}
/* =========================================================
STEP 3: COLLECTION PRESETS AND DISPLAY STYLE
========================================================= */
body.light-mode #step-3 .s3-presets-grid,
body.light-mode #step-3 .s3-viewmode-grid,
body.light-mode #step-3 .collection-bottom-area,
body.light-mode #step-3 .collection-bottom-actions {
color: var(--text) !important;
}
body.light-mode #step-3 .s3-preset-card {
background: var(--card) !important;
color: var(--text) !important;
border-color: var(--border2) !important;
box-shadow: 0 10px 24px var(--shadow) !important;
}
body.light-mode #step-3 .s3-preset-card:hover {
background: var(--card2) !important;
border-color: var(--violet2) !important;
}
body.light-mode #step-3 .s3-preset-body {
background: var(--card) !important;
}
body.light-mode #step-3 .s3-preset-name {
color: var(--text) !important;
}
body.light-mode #step-3 .s3-preset-add {
color: var(--violet-strong) !important;
}
body.light-mode #step-3 .s3-viewmode-grid {
background: var(--card) !important;
border-color: var(--border2) !important;
}
body.light-mode #step-3 .s3-viewmode-card {
background: var(--card2) !important;
color: var(--text) !important;
border-color: var(--border2) !important;
}
body.light-mode #step-3 .s3-viewmode-card:hover {
background: var(--surface-soft) !important;
border-color: var(--violet2) !important;
}
body.light-mode #step-3 .s3-viewmode-card.active {
background: rgba(123,47,255,.10) !important;
color: var(--violet-strong) !important;
border-color: var(--violet) !important;
}
body.light-mode #step-3 .s3-viewmode-name,
body.light-mode #step-3 .s3-viewmode-icon {
color: var(--text) !important;
}
body.light-mode #step-3 .s3-viewmode-card.active .s3-viewmode-name,
body.light-mode #step-3 .s3-viewmode-card.active .s3-viewmode-icon {
color: var(--violet-strong) !important;
}
body.light-mode #step-3 .s3-viewmode-desc {
color: var(--text2) !important;
}
body.light-mode #step-3 .collection-card,
body.light-mode #step-3 .folder-card,
body.light-mode #step-3 .collection-summary,
body.light-mode #step-3 .folder-summary,
body.light-mode #step-3 .collection-body,
body.light-mode #step-3 .collection-subsection,
body.light-mode #step-3 .collection-row-item {
background: var(--card) !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
body.light-mode #step-3 .collection-subsection-header,
body.light-mode #step-3 .collection-action-button,
body.light-mode #step-3 .collection-add-row input,
body.light-mode #step-3 .collection-add-row select,
body.light-mode #step-3 .coll-search {
background: var(--input-bg) !important;
color: var(--text) !important;
border-color: var(--border2) !important;
}
/* =========================================================
LIGHT-MODE PLACEHOLDERS AND MUTED COPY
========================================================= */
body.light-mode input::placeholder,
body.light-mode textarea::placeholder {
color: var(--faint) !important;
opacity: 1 !important;
}
body.light-mode .mobile-setup-card-summary,
body.light-mode .s3-viewmode-desc,
body.light-mode .collection-meta,
body.light-mode .collection-subsection-summary,
body.light-mode .collection-rows-empty {
color: var(--text2) !important;
}
/* Preserve dark simulations and previews. */
body.light-mode .s2-nuvio,
body.light-mode #s2Modal,
body.light-mode #nuvioPreviewModal,
body.light-mode .fusion-preview-dialog {
color-scheme: dark;
}
/* ===== setup.html style block 26: ultramax-light-theme-contrast-finish ===== */
/* =========================================================
LIGHT MODE: FINAL CONTRAST AND CONTROL CONSISTENCY
========================================================= */
/* Accordion and optional-section headings */
body.light-mode .opt-subsection > summary,
body.light-mode .optional-shell > summary,
body.light-mode #step-1 .opt-subsection > summary,
body.light-mode #step-1 .optional-shell > summary {
background:
linear-gradient(
135deg,
rgba(123,47,255,.075),
rgba(255,61,90,.025)
) !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
body.light-mode .opt-subsection > summary *,
body.light-mode .optional-shell > summary *,
body.light-mode .opt-subsection > summary span,
body.light-mode .optional-shell > summary span {
color: var(--text) !important;
-webkit-text-fill-color: var(--text) !important;
}
body.light-mode .opt-subsection > summary::after,
body.light-mode .optional-shell > summary::after {
color: var(--violet-strong) !important;
}
/* Ensure secondary summary text remains distinguishable */
body.light-mode #integrationsSummary,
body.light-mode .s4-card-summary,
body.light-mode summary .optional-sub,
body.light-mode summary .summary-status {
color: var(--text2) !important;
-webkit-text-fill-color: var(--text2) !important;
}
/* Ordinary Step 1 controls must be light, not preview-dark */
body.light-mode #googleAiKey,
body.light-mode #metadataLanguage,
body.light-mode #language,
body.light-mode #rpdbKey,
body.light-mode #tpKey,
body.light-mode #fanartKey,
body.light-mode #omdbKey,
body.light-mode #betterPostersStyle,
body.light-mode #betterPostersManualUrl,
body.light-mode #animePresentationMode,
body.light-mode #animePresentation,
body.light-mode #maxRating,
body.light-mode #debridService,
body.light-mode #debridApiKey {
background: var(--input-bg) !important;
color: var(--text) !important;
-webkit-text-fill-color: var(--text) !important;
border-color: var(--border2) !important;
box-shadow: none !important;
color-scheme: light !important;
}
/* Catch equivalent controls whose exact IDs differ */
body.light-mode #step-1 .opt-subsection input:not([type="checkbox"]):not([type="radio"]),
body.light-mode #step-1 .opt-subsection textarea,
body.light-mode #step-1 .opt-subsection select,
body.light-mode #step-1 .optional-shell input:not([type="checkbox"]):not([type="radio"]),
body.light-mode #step-1 .optional-shell textarea,
body.light-mode #step-1 .optional-shell select {
background: var(--input-bg) !important;
color: var(--text) !important;
-webkit-text-fill-color: var(--text) !important;
border-color: var(--border2) !important;
color-scheme: light !important;
}
/* Placeholder contrast */
body.light-mode #step-1 .opt-subsection input::placeholder,
body.light-mode #step-1 .opt-subsection textarea::placeholder,
body.light-mode #step-1 .optional-shell input::placeholder,
body.light-mode #step-1 .optional-shell textarea::placeholder {
color: var(--faint) !important;
-webkit-text-fill-color: var(--faint) !important;
opacity: 1 !important;
}
/* Verify/check buttons should remain branded and readable */
body.light-mode #step-1 .verify-btn {
background: linear-gradient(
135deg,
var(--violet),
var(--coral)
) !important;
color: #fff !important;
border-color: transparent !important;
}
/* Collection preset surrounding panel */
body.light-mode #step-3 .s3-presets-shell,
body.light-mode #step-3 .s3-quick-start,
body.light-mode #step-3 .s3-preset-section,
body.light-mode #step-3 .s3-presets-grid-wrapper,
body.light-mode #step-3 #s3PresetsGrid {
background: var(--card) !important;
color: var(--text) !important;
border-color: var(--border2) !important;
}
/* Some builds place the dark background on a parent near the grid */
body.light-mode #step-3 .s3-presets-grid {
background: transparent !important;
}
/* Quick-start labels above collection cards */
body.light-mode #step-3 .s3-label,
body.light-mode #step-3 .s3-quick-start-title,
body.light-mode #step-3 .s3-quick-start-desc {
color: var(--text2) !important;
}
/* Keep real dark previews deliberately dark */
body.light-mode #streamFormatPreview,
body.light-mode .sf-preview,
body.light-mode #streamFormatCheatsheet,
body.light-mode .s2-nuvio,
body.light-mode #s2Modal,
body.light-mode #nuvioPreviewModal,
body.light-mode .fusion-preview-dialog,
body.light-mode .um-torbox-card,
body.light-mode .um-torbox-wrap {
color-scheme: dark !important;
}
/* ===== setup.html style block 27: ultramax-stream-bridge-app-header-fix ===== */
/*
* The generic app layout hides legacy optional section headings.
* Streams still uses that heading as its actual accordion control,
* so restore it only inside the Stream Bridge card.
*/
html.um-app-mode #advancedStreamBridgeBlock .optional-toggle,
body.um-app-mode #advancedStreamBridgeBlock .optional-toggle {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
html.um-app-mode #advancedStreamBridgeBlock .optional-sub,
body.um-app-mode #advancedStreamBridgeBlock .optional-sub {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
html.um-app-mode #advancedStreamBridgeBlock #streamsSectionBody,
body.um-app-mode #advancedStreamBridgeBlock #streamsSectionBody {
visibility: visible !important;
opacity: 1 !important;
}
/* ===== setup.html style block 28: ULTRAMAX_STEP2_NESTED_V1 ===== */
/* Ultra MAX Step 2 nested category groups */
#step-2 .s2-child-category{
position:relative;
grid-column:1/-1;
width:calc(100% - 8px);
margin-left:8px;
border:1px solid var(--border2);
border-radius:11px;
background:rgba(255,255,255,.014);
overflow:hidden;
}
#step-2 .s2-child-category::before{
content:'';
position:absolute;
left:0;
top:9px;
bottom:9px;
width:2px;
border-radius:2px;
background:linear-gradient(
180deg,
rgba(123,47,255,.55),
rgba(123,47,255,.08)
);
pointer-events:none;
}
#step-2 .s2-child-head{
width:100%;
display:flex;
align-items:center;
gap:9px;
padding:9px 11px 9px 14px;
border:0;
background:transparent;
color:var(--text);
font:inherit;
text-align:left;
cursor:pointer;
}
#step-2 .s2-child-head:hover{
background:rgba(123,47,255,.055);
}
#step-2 .s2-child-icon{
width:26px;
flex:0 0 26px;
text-align:center;
font-size:17px;
}
#step-2 .s2-child-info{
min-width:0;
flex:1;
display:flex;
flex-direction:column;
}
#step-2 .s2-child-name{
font-size:11px;
font-weight:700;
color:var(--text);
}
#step-2 .s2-child-sub{
margin-top:1px;
font-size:9px;
color:var(--muted);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
#step-2 .s2-child-count{
flex-shrink:0;
font-size:9px;
color:var(--faint);
}
#step-2 .s2-child-selected{
color:var(--violet2);
font-weight:700;
}
#step-2 .s2-child-chev{
flex-shrink:0;
margin-left:2px;
font-size:9px;
color:var(--faint);
transition:transform .18s ease;
}
#step-2 .s2-child-category.s2-child-open
> .s2-child-head .s2-child-chev{
transform:rotate(180deg);
}
#step-2 .s2-child-body{
display:none;
padding:0 10px 10px;
grid-template-columns:1fr;
gap:8px;
}
#step-2 .s2-child-category.s2-child-open
> .s2-child-body{
display:grid;
}
@media(min-width:700px){
#step-2 .s2-child-body{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
/* ===== setup.html style block 29: block-29 ===== */
/* UltraPlay+ verified cosmetic supporter state. No Ultra MAX feature gating is attached to this state. */
.um-playplus-badge{display:inline-flex;align-items:center;justify-content:center;gap:4px;margin-top:8px;padding:4px 8px;border:1px solid rgba(169,120,255,.62);border-radius:999px;background:linear-gradient(135deg,rgba(123,47,255,.28),rgba(65,214,255,.12));color:#f6f1ff;font-family:'Courier Prime',monospace;font-size:8px;font-weight:700;line-height:1;letter-spacing:.12em;white-space:nowrap;box-shadow:0 0 18px rgba(123,47,255,.18),inset 0 1px 0 rgba(255,255,255,.08)}
.um-playplus-badge::before{content:'✦';color:#b995ff;font-size:9px;filter:drop-shadow(0 0 5px rgba(169,120,255,.55))}
.um-playplus-badge[hidden]{display:none!important}
html.um-playplus-active .um-playplus-badge{border-color:rgba(196,161,255,.82);background:linear-gradient(135deg,rgba(124,58,237,.46),rgba(56,189,248,.18));box-shadow:0 0 0 1px rgba(255,255,255,.035),0 0 24px rgba(139,92,246,.30),0 0 42px rgba(56,189,248,.10),inset 0 1px 0 rgba(255,255,255,.12);animation:um-playplus-badge-pulse 3.4s ease-in-out infinite}
html.um-playplus-active .um-sidebar-logo img,html.um-playplus-active .um-sidebar-logo svg{filter:drop-shadow(0 0 10px rgba(139,92,246,.24)) drop-shadow(0 0 22px rgba(56,189,248,.08))}
@keyframes um-playplus-badge-pulse{0%,100%{transform:translateY(0);box-shadow:0 0 0 1px rgba(255,255,255,.035),0 0 20px rgba(139,92,246,.24),0 0 36px rgba(56,189,248,.08),inset 0 1px 0 rgba(255,255,255,.12)}50%{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(255,255,255,.05),0 0 30px rgba(139,92,246,.38),0 0 50px rgba(56,189,248,.14),inset 0 1px 0 rgba(255,255,255,.14)}}
@media (min-width:901px){.um-sidebar-logo .um-playplus-badge{margin-left:auto;margin-right:auto}}
@media (max-width:700px){.um-sidebar-logo{display:flex;flex-direction:column;align-items:center;justify-content:center}.um-playplus-badge{margin-top:4px;padding:3px 6px;font-size:7px;letter-spacing:.08em}}
.um-app-mode .um-playplus-badge{margin:7px auto 0!important}
.um-playplus-splash{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at 50% 42%,rgba(92,63,180,.22),rgba(4,6,15,.62) 48%,rgba(4,6,15,.78));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .32s ease}
.um-playplus-splash.is-visible{opacity:1}
.um-playplus-splash-card{width:min(440px,calc(100vw - 34px));display:flex;align-items:center;gap:16px;padding:20px 21px;border:1px solid rgba(180,147,255,.36);border-radius:22px;background:linear-gradient(145deg,rgba(20,18,40,.97),rgba(8,11,24,.96));box-shadow:0 30px 90px rgba(0,0,0,.52),0 0 48px rgba(124,58,237,.16),inset 0 1px 0 rgba(255,255,255,.07);transform:translateY(12px) scale(.965);transition:transform .38s cubic-bezier(.2,.8,.2,1)}
.um-playplus-splash.is-visible .um-playplus-splash-card{transform:translateY(0) scale(1)}
.um-playplus-splash-mark{display:grid;place-items:center;flex:0 0 58px;width:58px;height:58px;border:1px solid rgba(188,156,255,.44);border-radius:17px;background:radial-gradient(circle at 35% 30%,rgba(196,181,253,.34),rgba(124,58,237,.22) 48%,rgba(56,189,248,.08));color:#d9c8ff;font-size:25px;text-shadow:0 0 16px rgba(167,139,250,.66);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 0 28px rgba(124,58,237,.15)}
.um-playplus-splash-copy{min-width:0}
.um-playplus-splash-kicker{margin-bottom:4px;color:#9e8bdc;font-family:'Courier Prime',monospace;font-size:9px;font-weight:700;letter-spacing:.16em}
.um-playplus-splash-title{color:#fff;font-size:22px;font-weight:900;line-height:1.08;letter-spacing:-.02em}
.um-playplus-splash-detail{margin-top:6px;color:#9ca4bd;font-size:12px;line-height:1.4}
@media (max-width:520px){.um-playplus-splash-card{gap:13px;padding:17px}.um-playplus-splash-mark{flex-basis:50px;width:50px;height:50px;border-radius:15px;font-size:21px}.um-playplus-splash-title{font-size:19px}}
@media (prefers-reduced-motion:reduce){html.um-playplus-active .um-playplus-badge{animation:none}.um-playplus-splash,.um-playplus-splash-card{transition:none}}
/* ===== setup.html style block 30: block-30 ===== */
.s1-tile {
background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
border: 1px solid var(--border); border-radius: 20px; padding: 22px 16px;
display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
cursor: pointer; min-height: 140px; justify-content: center;
}
.s1-tile:active { border-color: var(--tile-clr); }
.s1-tile-badge {
width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
background: var(--tile-clr);
background: linear-gradient(140deg, var(--tile-clr), color-mix(in srgb, var(--tile-clr) 60%, black));
}
.s1-tile-badge svg { width: 24px; height: 24px; }
.s1-tile-name { font-size: 14px; font-weight: 700; color: var(--text); }
.s1-tile-status { font-size: 11px; color: var(--muted); }
.s1-tile-wide { grid-column: 1 / -1; flex-direction: row; text-align: left; min-height: auto; padding: 16px 18px; gap: 14px; justify-content: flex-start; }
.s1-tile-wide .s1-tile-badge { width: 40px; height: 40px; flex-shrink: 0; }
.s1-tile-wide .s1-tile-badge svg { width: 20px; height: 20px; }
/* ===== setup.html style block 31: step1-required-nuvio-layout ===== */
.step1-required-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 16px;
width: 100%;
min-width: 0;
}
.step1-required-main {
display: grid;
gap: 16px;
min-width: 0;
}
.step1-required-main > .um-card,
.step1-required-grid > .um-card {
margin: 0;
}
.mobile-setup-card-header { display: none; }
.mobile-setup-card-body { display: block; }
.password-reset-inline {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,.075);
}
.password-reset-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.nuvio-card {
position: relative;
min-width: 0;
padding: 20px !important;
border: 1px solid rgba(96,165,250,.24) !important;
border-radius: 18px !important;
background:
radial-gradient(circle at 92% 7%, rgba(96,165,250,.10), transparent 42%),
linear-gradient(145deg, rgba(20,18,39,.92), rgba(12,12,24,.96)) !important;
box-shadow: 0 16px 42px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.035);
overflow: hidden;
}
.nuvio-card::before {
content: '';
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: linear-gradient(to bottom, transparent, #60a5fa, var(--violet), transparent);
opacity: .7;
}
.nuvio-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
}
.nuvio-card-title {
display: flex;
align-items: flex-start;
gap: 11px;
min-width: 0;
}
.nuvio-card-title .um-card-title { margin: 1px 0 0; }
.nuvio-card-icon {
display: grid;
place-items: center;
flex: 0 0 36px;
width: 36px;
height: 36px;
border-radius: 11px;
background: linear-gradient(145deg, #60a5fa, var(--violet));
color: #fff;
font-size: 15px;
font-weight: 900;
box-shadow: 0 8px 20px rgba(96,165,250,.18);
}
.step1-nuvio-heading p,
.step1-nuvio-copy {
color: var(--muted);
font-size: 12px;
line-height: 1.5;
margin: 5px 0 12px;
}
.step1-nuvio-badge {
flex: 0 0 auto;
border: 1px solid var(--border2);
border-radius: 999px;
color: var(--muted);
background: rgba(255,255,255,.035);
font-size: 10px;
font-weight: 800;
padding: 5px 9px;
white-space: nowrap;
}
.step1-nuvio-status {
min-height: 18px;
color: var(--muted);
font-size: 12px;
line-height: 1.45;
margin: 8px 0;
}
.step1-nuvio-status:empty { min-height: 0; margin: 4px 0; }
.step1-nuvio-status[data-kind="error"] { color: #ff7b8d; }
.step1-nuvio-status[data-kind="success"] { color: #5ee6a8; }
.nuvio-form-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 7px 10px;
min-width: 0;
}
.step1-nuvio-panel [hidden] {
display: none !important;
}
.nuvio-form-grid label,
.nuvio-account-summary > label {
color: var(--muted);
font-size: 11px;
font-weight: 750;
}
.nuvio-login-form > .step1-nuvio-copy {
grid-column: 1 / -1;
margin-top: 0;
}
.nuvio-form-grid input,
.nuvio-account-summary select {
width: 100%;
min-width: 0;
box-sizing: border-box;
}
#step-1 #step1NuvioEmail,
#step-1 #step1NuvioPassword,
#step-1 #step1NuvioProfile {
min-height: 42px;
border: 1px solid rgba(255,255,255,.10) !important;
border-radius: 11px !important;
background: linear-gradient(145deg, rgba(7,7,15,.82), rgba(18,17,34,.86)) !important;
color: #fff !important;
-webkit-text-fill-color: #fff;
caret-color: #fff;
box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
#step-1 #step1NuvioEmail:-webkit-autofill,
#step-1 #step1NuvioEmail:-webkit-autofill:hover,
#step-1 #step1NuvioEmail:-webkit-autofill:focus,
#step-1 #step1NuvioPassword:-webkit-autofill,
#step-1 #step1NuvioPassword:-webkit-autofill:hover,
#step-1 #step1NuvioPassword:-webkit-autofill:focus {
-webkit-text-fill-color: #fff !important;
caret-color: #fff;
-webkit-box-shadow: 0 0 0 1000px #0d0c1b inset !important;
box-shadow: 0 0 0 1000px #0d0c1b inset !important;
transition: background-color 9999s ease-out 0s;
}
.step1-nuvio-remember {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 8px;
margin-top: 3px;
color: var(--muted);
font-size: 11px;
font-weight: 500 !important;
}
.step1-nuvio-remember input {
width: 15px !important;
min-height: 15px;
flex: 0 0 15px;
}
.nuvio-actions {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: stretch;
gap: 8px;
margin-top: 10px;
width: 100%;
}
.nuvio-actions .nav-btn {
width: 100%;
min-width: 0;
min-height: 44px;
height: 100%;
padding: 7px 11px !important;
border-radius: 9px;
font-size: 11px;
line-height: 1.2;
text-align: center;
white-space: normal;
}
.nuvio-login-actions {
grid-column: 1 / -1;
grid-template-columns: minmax(0, 1fr) auto;
width: 100%;
}
.nuvio-login-actions .primary { width: 100%; }
.nuvio-disconnect { color: #ff8a9b !important; }
.nuvio-account-summary {
padding: 12px;
border: 1px solid rgba(255,255,255,.075);
border-radius: 13px;
background: rgba(255,255,255,.025);
}
.step1-nuvio-panel button:focus-visible,
.step1-nuvio-panel input:focus-visible,
.step1-nuvio-panel select:focus-visible {
outline: 3px solid var(--violet2);
outline-offset: 2px;
}
@media (min-width: 900px) {
html:not(.um-app-mode) .step1-required-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
gap: 16px;
}
html:not(.um-app-mode) .step1-required-main {
display: contents;
}
html:not(.um-app-mode) #tile-content-password {
grid-column: 1;
}
html:not(.um-app-mode) #tile-content-mdblist {
grid-column: 2;
}
html:not(.um-app-mode) #tile-content-password,
html:not(.um-app-mode) #tile-content-mdblist {
align-self: stretch;
display: flex;
flex-direction: column;
height: 100%;
box-sizing: border-box;
}
html:not(.um-app-mode) .step1-required-grid > .nuvio-card {
grid-column: 1 / -1;
}
html:not(.um-app-mode) .nuvio-connected-panel {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr);
column-gap: 18px;
align-items: end;
}
html:not(.um-app-mode) .nuvio-connected-panel > label,
html:not(.um-app-mode) .nuvio-connected-panel > select,
html:not(.um-app-mode) .nuvio-connected-panel > .step1-nuvio-copy {
grid-column: 1;
}
html:not(.um-app-mode) .nuvio-connected-panel > .nuvio-actions {
grid-column: 2;
grid-row: 1 / 4;
align-self: end;
margin-top: 0;
}
html:not(.um-app-mode) .nuvio-card { align-self: start; }
}
@media (max-width: 899px) and (pointer: coarse), (max-width: 899px) and (hover: none) {
.step1-required-grid { grid-template-columns: minmax(0, 1fr); }
.mobile-setup-card {
padding: 0 !important;
min-height: 0 !important;
scroll-margin-bottom: 140px;
overflow: hidden;
}
.mobile-setup-card:hover {
transform: none !important;
}
.mobile-setup-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
min-width: 0;
min-height: 74px;
padding: 13px 15px;
border: 0;
background: transparent;
color: var(--text);
font: inherit;
text-align: left;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.mobile-setup-card-heading {
display: flex;
align-items: center;
gap: 11px;
min-width: 0;
}
.mobile-setup-card-heading > span:last-child {
display: grid;
gap: 3px;
min-width: 0;
}
.mobile-setup-card-icon {
display: grid;
place-items: center;
flex: 0 0 36px;
width: 36px;
height: 36px;
border-radius: 11px;
background: rgba(123,47,255,.14);
color: var(--text);
font-size: 15px;
font-weight: 850;
}
.mobile-setup-card-title {
color: var(--text);
font-size: 13px;
font-weight: 800;
}
.mobile-setup-card-summary {
max-width: 32ch;
overflow: hidden;
color: var(--muted);
font-size: 10px;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
.mobile-setup-card-meta {
display: grid;
grid-template-columns: auto 18px;
align-items: center;
justify-items: end;
gap: 5px 8px;
flex: 0 0 auto;
}
.mobile-setup-card-badge,
.mobile-setup-card-state {
grid-column: 1;
border-radius: 999px;
font-size: 9px;
font-weight: 800;
line-height: 1;
white-space: nowrap;
}
.mobile-setup-card-badge {
padding: 4px 7px;
border: 1px solid rgba(255,61,90,.32);
color: #ff8a9b;
background: rgba(255,61,90,.07);
}
.mobile-setup-card-state {
color: var(--muted);
}
.mobile-setup-card-chevron {
grid-column: 2;
grid-row: 1 / span 2;
color: var(--muted);
font-size: 18px;
line-height: 1;
transform: rotate(0deg);
transition: transform .18s ease;
}
.mobile-setup-card-body { display: none; }
.mobile-setup-card.is-open > .mobile-setup-card-body {
display: block;
padding: 4px 15px 16px;
}
.mobile-setup-card.is-open > .mobile-setup-card-header {
border-bottom: 1px solid rgba(255,255,255,.065);
}
.mobile-setup-card.is-open > .mobile-setup-card-header .mobile-setup-card-chevron {
transform: rotate(180deg);
}
.mobile-setup-card.is-complete .mobile-setup-card-state,
.mobile-setup-card.is-connected .mobile-setup-card-state {
color: #5ee6a8;
}
.mobile-setup-card.is-error .mobile-setup-card-state {
color: #ff8a9b;
}
.mobile-setup-card-body > .field-label,
.mobile-setup-card-body > .nuvio-card-header {
display: none;
}
.password-reset-row {
flex-wrap: wrap;
}
#advancedBuilderContainer {
padding-bottom: calc(128px + env(safe-area-inset-bottom));
}
}
@media(max-width:640px) {
.step1-nuvio-actions .nav-btn.primary { width:100%; }
}
@media (max-width: 520px) {
.step1-required-grid,
.step1-required-main { gap: 12px; }
.nuvio-card { padding: 16px !important; }
.nuvio-card-header { gap: 9px; }
.nuvio-card-title { gap: 9px; }
.nuvio-card-icon {
flex-basis: 32px;
width: 32px;
height: 32px;
border-radius: 10px;
}
.nuvio-form-grid { grid-template-columns: minmax(0, 1fr); }
.nuvio-form-grid label,
.nuvio-form-grid input { grid-column: 1; }
.step1-nuvio-remember,
.nuvio-login-actions { grid-column: 1; }
.nuvio-actions {
grid-template-columns: repeat(3, minmax(0, 1fr));
width: 100%;
gap: 6px;
}
.nuvio-actions .nav-btn {
width: 100%;
min-height: 44px !important;
padding-inline: 6px !important;
font-size: 10px;
}
.nuvio-login-actions {
grid-template-columns: minmax(0, 1fr) auto;
}
.nuvio-login-actions #step1NuvioLoginCancel { width: auto; }
}
.um-app-mode .mobile-setup-card {
padding: 0 !important;
min-height: 0 !important;
scroll-margin-bottom: 140px;
overflow: hidden;
}
.um-app-mode .mobile-setup-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
min-width: 0;
min-height: 74px;
padding: 13px 15px;
border: 0;
background: transparent;
color: var(--text);
font: inherit;
text-align: left;
cursor: pointer;
touch-action: manipulation;
}
.um-app-mode .mobile-setup-card-heading {
display: flex;
align-items: center;
gap: 11px;
min-width: 0;
}
.um-app-mode .mobile-setup-card-heading > span:last-child {
display: grid;
gap: 3px;
min-width: 0;
}
.um-app-mode .mobile-setup-card-icon {
display: grid;
place-items: center;
flex: 0 0 36px;
width: 36px;
height: 36px;
border-radius: 11px;
background: rgba(123,47,255,.14);
font-size: 15px;
font-weight: 850;
}
.um-app-mode .mobile-setup-card-title {
color: var(--text);
font-size: 13px;
font-weight: 800;
}
.um-app-mode .mobile-setup-card-summary {
display: block;
max-width: 32ch;
overflow: hidden;
color: var(--muted);
font-size: 10px;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
.um-app-mode .mobile-setup-card-meta {
display: grid;
grid-template-columns: auto 18px;
align-items: center;
justify-items: end;
gap: 5px 8px;
flex: 0 0 auto;
}
.um-app-mode .mobile-setup-card-badge,
.um-app-mode .mobile-setup-card-state {
grid-column: 1;
border-radius: 999px;
font-size: 9px;
font-weight: 800;
line-height: 1;
white-space: nowrap;
}
.um-app-mode .mobile-setup-card-badge {
padding: 4px 7px;
border: 1px solid rgba(255,61,90,.32);
color: #ff8a9b;
background: rgba(255,61,90,.07);
}
.um-app-mode .mobile-setup-card-state { color: var(--muted); }
.um-app-mode .mobile-setup-card-chevron {
grid-column: 2;
grid-row: 1 / span 2;
color: var(--muted);
font-size: 18px;
line-height: 1;
transition: transform .18s ease;
}
.um-app-mode .mobile-setup-card-body { display: none; }
.um-app-mode .mobile-setup-card.is-open > .mobile-setup-card-body {
display: block;
padding: 4px 15px 16px;
}
.um-app-mode .mobile-setup-card.is-open > .mobile-setup-card-header {
border-bottom: 1px solid rgba(255,255,255,.065);
}
.um-app-mode .mobile-setup-card.is-open > .mobile-setup-card-header .mobile-setup-card-chevron {
transform: rotate(180deg);
}
.um-app-mode .mobile-setup-card.is-complete .mobile-setup-card-state,
.um-app-mode .mobile-setup-card.is-connected .mobile-setup-card-state {
color: #5ee6a8;
}
.um-app-mode .mobile-setup-card.is-error .mobile-setup-card-state { color: #ff8a9b; }
.um-app-mode .mobile-setup-card-body > .field-label,
.um-app-mode .mobile-setup-card-body > .nuvio-card-header { display: none; }
.um-app-mode #advancedBuilderContainer {
padding-bottom: calc(128px + env(safe-area-inset-bottom));
}
/* ===== setup.html style block 32: block-32 ===== */
#pictoriumOptions .pictorium-subsection{margin:0 0 10px;border:1px solid var(--border2);border-radius:11px;background:rgba(123,47,255,.035);overflow:hidden}
#pictoriumOptions .pictorium-subsection>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;cursor:pointer;list-style:none;font-size:12px;font-weight:700;color:var(--text);user-select:none}
#pictoriumOptions .pictorium-subsection>summary::-webkit-details-marker{display:none}
#pictoriumOptions .pictorium-subsection>summary:after{content:'＋';font-size:15px;color:var(--accent);font-weight:700}
#pictoriumOptions .pictorium-subsection[open]>summary:after{content:'−'}
#pictoriumOptions .pictorium-subsection-body{padding:0 12px 12px}
#pictoriumOptions input[type="text"],#pictoriumOptions input[type="number"],#pictoriumOptions select{box-sizing:border-box;background:linear-gradient(180deg,rgba(34,25,55,.98),rgba(21,17,36,.98));color:var(--text);border:1px solid rgba(164,92,255,.34);border-radius:8px;padding:8px 10px;outline:none;transition:border-color .18s,box-shadow .18s}
#pictoriumOptions input[type="text"]:focus,#pictoriumOptions input[type="number"]:focus,#pictoriumOptions select:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(123,47,255,.14)}
#pictoriumOptions input[type="checkbox"]{accent-color:var(--accent)}
.pictorium-slider-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:10px}
.pictorium-slider-card{padding:10px 11px;border:1px solid var(--border2);border-radius:10px;background:rgba(123,47,255,.045)}
.pictorium-slider-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;font-size:10px;color:var(--text2)}
.pictorium-number-wrap{display:flex;align-items:center;min-width:80px;border:1px solid rgba(164,92,255,.35);border-radius:8px;background:rgba(123,47,255,.12);overflow:hidden}
#pictoriumOptions .pictorium-number-wrap input[type="number"]{width:56px;min-width:0;padding:4px 4px 4px 7px;border:0;border-radius:0;background:transparent;box-shadow:none;text-align:right;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.pictorium-number-unit{padding:0 6px 0 2px;font-size:10px;font-weight:700;color:var(--accent2,#ff2f92)}
.pictorium-range{--fill:50%;width:100%;height:5px;appearance:none;-webkit-appearance:none;border-radius:999px;outline:none;background:linear-gradient(90deg,var(--accent,#7B2FFF) 0%,#ff2f92 var(--fill),rgba(255,255,255,.13) var(--fill),rgba(255,255,255,.13) 100%)}
.pictorium-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#9b5cff,#ff2f92);border:2px solid #fff;box-shadow:0 0 0 3px rgba(123,47,255,.20),0 2px 8px rgba(0,0,0,.35);cursor:pointer}
.pictorium-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#9b5cff,#ff2f92);border:2px solid #fff;box-shadow:0 0 0 3px rgba(123,47,255,.20),0 2px 8px rgba(0,0,0,.35);cursor:pointer}
.pictorium-toggle-row{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text);margin:10px 0}
.pictorium-muted{font-size:10px;color:var(--text2);line-height:1.45}
/* ===== setup.html style block 33: block-33 ===== */
.sf-preset-btn { background:var(--card,#12121e); border:1px solid var(--border2); border-radius:10px; padding:10px 8px; cursor:pointer; text-align:left; transition:all .15s; font-family:inherit; }
.sf-preset-btn:hover { border-color:var(--violet2); }
.sf-preset-btn.sf-active { border-color:var(--violet); box-shadow:0 0 0 2px rgba(123,47,255,.25); background:rgba(123,47,255,.08); }
.sf-preset-name { font-size:12px; font-weight:700; color:var(--text,#fff); margin-bottom:2px; }
.sf-preset-sub { font-size:10px; color:var(--muted); }
.sf-field-list { display:flex; flex-direction:column; gap:6px; }
.sf-field-row { display:flex; align-items:center; gap:8px; background: var(--surface-soft); border:1px solid var(--border2); border-radius:8px; padding:8px 10px; cursor:grab; user-select:none; }
.sf-field-row.sf-ghost { opacity:.35; background:rgba(123,47,255,.15); }
.sf-field-drag { color:var(--faint); font-size:13px; flex-shrink:0; }
.sf-field-label { flex:1; font-size:12px; color:var(--text,#fff); }
.sf-preview { background:#0d0d0d; border:1px solid #3a3a55; border-radius:10px; padding:12px 14px; font-size:12px; color:#ddd; line-height:1.6; white-space:pre-wrap; min-height:20px; }
/* ===== setup.html style block 34: block-34 ===== */
/* Step 2 new layout */
.s2-layout { display:grid; grid-template-columns:1fr 300px; gap:0; min-width:0; }
@media(max-width:900px){ .s2-layout { grid-template-columns:1fr; } .s2-preview-col { display:none !important; } .s2-preview-fab { display:flex !important; } }
/* Grid items default to min-width:auto, which refuses to shrink
below their content's min-content width — without this, a wide
descendant (e.g. the bulk-action cards row) forces the whole
column past the viewport instead of wrapping/stacking. */
.s2-builder-col { padding-right:20px; min-width:0; box-sizing:border-box; }
.s2-preview-col { position:sticky; top:70px; align-self:start; background:var(--bg2); border:1px solid var(--border2); border-radius:16px; overflow:hidden; min-width:0; }
/* Presets */
.s2-section-label { font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; display:flex; align-items:center; gap:10px; }
.s2-section-label::after { content:''; flex:1; height:1px; background:var(--border); }
.s2-presets-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; margin-bottom:18px; }
.s2-preset {
background:var(--card); border:1px solid var(--border2); border-radius:14px;
overflow:hidden; cursor:pointer; transition:all .2s; position:relative;
}
.s2-preset:hover { border-color:var(--violet2); transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,0,0,.4); }
.s2-preset.s2-active { border-color:var(--violet); box-shadow:0 0 0 2px rgba(123,47,255,.25); }
.s2-preset-strip { height:52px; overflow:hidden; display:flex; gap:2px; background:var(--bg2); }
.s2-preset-strip img { height:100%; width:40px; object-fit:cover; flex-shrink:0; }
.s2-preset-skeleton-cell {
height:100%;
width:40px;
flex-shrink:0;
background:
linear-gradient(
90deg,
rgba(255,255,255,.04) 25%,
rgba(255,255,255,.12) 37%,
rgba(255,255,255,.04) 63%
);
background-size:400% 100%;
animation:s2PresetSkeletonShimmer 1.2s ease-in-out infinite;
}
@keyframes s2PresetSkeletonShimmer {
0% { background-position:100% 0; }
100% { background-position:0 0; }
}
.s2-preset-body { padding:9px 12px 11px; }
.s2-preset-icon { font-size:1rem; display:block; margin-bottom:3px; }
.s2-preset-name { font-weight:700; font-size:12px; color:var(--text); margin-bottom:2px; }
.s2-preset-count { font-size:10px; color:var(--violet2); font-weight:600; }
.s2-preset-tick { position:absolute; top:6px; right:6px; width:16px; height:16px; border-radius:50%; background:var(--violet); display:none; align-items:center; justify-content:center; font-size:9px; color:#fff; }
.s2-preset.s2-active .s2-preset-tick { display:flex; }
@keyframes s2Pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.02);box-shadow:0 0 20px rgba(123,47,255,.3);} }
/* Category cards */
.s2-cats { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.s2-cat { background:var(--card); border:1px solid var(--border2); border-radius:14px; overflow:hidden; transition:border-color .2s; }
.s2-cat:hover { border-color:rgba(123,47,255,.2); }
.s2-cat-prog { height:2px; background:var(--border); }
.s2-cat-prog-bar { height:100%; background:linear-gradient(90deg,var(--violet),var(--violet2)); transition:width .3s; }
.s2-cat-head { display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; user-select:none; }
.s2-cat-icon { font-size:1.2rem; width:28px; text-align:center; flex-shrink:0; }
.s2-cat-info { flex:1; min-width:0; }
.s2-cat-name { font-weight:700; font-size:13px; color:var(--text); }
.s2-cat-sub { font-size:10px; color:var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.s2-cat-badge { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.s2-cat-sel { font-size:12px; font-weight:700; color:var(--violet2); }
.s2-cat-tot { font-size:10px; color:var(--faint); }
.s2-cat-chev { color:var(--faint); font-size:10px; transition:transform .2s; margin-left:4px; }
.s2-cat.s2-open .s2-cat-chev { transform:rotate(180deg); }
.s2-cat-pills { display:none; padding:10px 14px 14px; grid-template-columns:1fr; gap:8px; }
.s2-cat.s2-open .s2-cat-pills { display:grid; }
.s2-cat-actions { display:flex; gap:6px; width:100%; margin-top:2px; grid-column:1/-1; }
.s2-cat-btn { background:transparent; border:1px solid var(--border2); color:var(--muted); font-size:10px; padding:3px 9px; border-radius:6px; cursor:pointer; font-family:inherit; transition:all .15s; }
.s2-cat-btn:hover { border-color:var(--violet2); color:var(--violet2); }
.s2-cat-btn.danger:hover { border-color:var(--coral); color:var(--coral); }
/* Shared compact catalogue rows */
.catalog-compact-list{display:grid;grid-template-columns:1fr;gap:8px}
#step-2 .s2-cat-pills>.catalog-compact-item{display:block;width:100%;min-width:0;min-height:0;margin:0;padding:7px 8px;box-sizing:border-box;background: var(--surface-soft);border:1px solid var(--border2);border-radius:10px;color:var(--muted);cursor:pointer;user-select:none;white-space:normal;transition:opacity .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease}
.catalog-compact-item:hover{border-color:var(--violet2);color:var(--text)}
.catalog-compact-item:not(.s2-sel){opacity:.76}
.catalog-compact-item:not(.s2-sel):hover{opacity:1}
.catalog-compact-item.s2-sel{background:rgba(123,47,255,.14);border-color:var(--violet);color:var(--text);box-shadow:0 0 0 1px rgba(123,47,255,.4),0 0 14px rgba(123,47,255,.16);opacity:1}
.catalog-compact-item.s2-hidden{opacity:.72}
.catalog-compact-item.s2-sel.s2-hidden{opacity:.82}
.catalog-compact-check{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--border2);color:transparent;font-size:10px;font-weight:700;line-height:1;transition:all .15s ease;background:transparent}
.catalog-compact-item.s2-sel .catalog-compact-check{background:linear-gradient(135deg,#7b2fff,#ff3d5a);border-color:transparent;color:#fff}
.catalog-compact-main{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;min-width:0}
.catalog-compact-identity{display:flex;align-items:center;gap:8px;min-width:0}
.catalog-compact-icon{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;border-radius:7px;background:rgba(123,47,255,.12);font-size:12px}
.catalog-compact-copy{display:grid;gap:2px;min-width:0}
.catalog-compact-title{display:-webkit-box;min-width:0;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;overflow-wrap:anywhere;font-size:11px;font-weight:700;line-height:1.25}
.catalog-compact-meta{display:flex;align-items:center;gap:4px;font-size:9px;color:var(--muted)}
.catalog-compact-meta span+span::before{content:'·';margin-right:4px;color:var(--faint)}
.catalog-compact-actions{display:flex;align-items:stretch;justify-content:flex-end;gap:4px}
.catalog-compact-actions.merged-row-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,270px);gap:8px}
.catalog-compact-actions.merged-row-actions.merged-row-actions-protected{grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,180px)}
.merged-row-actions .catalog-compact-action{min-height:42px}
.merged-row-actions .catalog-compact-action svg{width:16px;height:16px}
.catalog-compact-action{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:40px;min-height:40px;padding:5px 7px;border:1px solid var(--border2);border-radius:7px;background: var(--surface-soft);color:var(--text);font:inherit;font-size:9px;font-weight:700;cursor:pointer;white-space:nowrap}
.catalog-compact-action svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.catalog-compact-action:focus-visible{outline:2px solid var(--violet2);outline-offset:2px}
.catalog-compact-settings.s2-pill-settings-active{border-color:var(--violet);background:rgba(123,47,255,.25);color:#d8c8ff}
.catalog-compact-delete{border-color:rgba(255,61,90,.34);background:rgba(255,61,90,.08);color:var(--coral)}
.catalog-compact-hidden-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
@media(min-width:700px){.s2-cat-pills,.catalog-compact-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:430px){.catalog-compact-main{grid-template-columns:1fr}.catalog-compact-actions{justify-content:stretch}.catalog-compact-actions.merged-row-actions,.catalog-compact-actions.merged-row-actions.merged-row-actions-protected{width:100%}.catalog-compact-action{flex:1 1 0;padding-inline:5px}.merged-row-actions .catalog-compact-action{min-width:0;min-height:42px;padding-inline:4px;font-size:8.5px}}
.s2-reorder-ghost { opacity:0.4; background:rgba(123,47,255,.2) !important; border-color:var(--violet) !important; }
.s2-reorder-ghost { opacity:0.4; background:rgba(123,47,255,.2) !important; }
/* Show all button */
.s2-showall { display:flex; align-items:center; gap:8px; width:100%; background:transparent; border:1px dashed var(--border2); border-radius:10px; padding:10px 14px; color:var(--muted); font-size:12px; cursor:pointer; margin-top:4px; transition:all .2s; font-family:inherit; }
.s2-showall:hover { border-color:var(--violet2); color:var(--violet2); }
/* Preview panel */
.s2-preview-header { padding:12px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.s2-preview-title { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.s2-nuvio { background:#0a0a14; }
/* This simulates the Nuvio app's own (always-dark) home screen, so
its chrome intentionally uses fixed colours rather than the
page's light/dark theme tokens — see light-mode design notes. */
.s2-nuvio-bar { background:#0b0b0f; border-bottom:1px solid rgba(255,255,255,.08); padding:9px 12px; display:flex; align-items:center; justify-content:space-between; }
.s2-nuvio-tabs { display:flex; gap:12px; }
.s2-nuvio-tab { font-size:9px; font-weight:600; color:#6a6a8a; }
.s2-nuvio-tab.active { color:#e0e0f0; border-bottom:1.5px solid #7B2FFF; padding-bottom:1px; }
.s2-nuvio-logo { font-family:'Bebas Neue',sans-serif; font-size:12px; letter-spacing:.08em; color:#e0e0f0; }
.s2-nuvio-rows { padding:10px; }
.s2-nuvio-row { margin-bottom:12px; }
.s2-nuvio-row-label { font-size:8px; font-weight:700; color:#e0e0f0; margin-bottom:5px; letter-spacing:.04em; }
.s2-nuvio-posters { display:flex; gap:4px; overflow:hidden; }
.s2-nuvio-poster { width:40px; height:60px; border-radius:4px; background:#2a2a45; flex-shrink:0; overflow:hidden; }
.s2-nuvio-poster img { width:100%; height:100%; object-fit:cover; display:block; }
.s2-nuvio-empty { text-align:center; padding:28px 16px; }
.s2-nuvio-empty-icon { font-size:1.8rem; opacity:.2; margin-bottom:6px; }
.s2-nuvio-empty-text { font-size:10px; color:#6a6a8a; line-height:1.6; }
.s2-preview-stats { padding:10px 16px; border-top:1px solid var(--border); }
.s2-stat-row { display:flex; justify-content:space-between; margin-bottom:5px; }
.s2-stat-row:last-child { margin-bottom:0; }
.s2-stat-label { font-size:10px; color:var(--muted); }
.s2-stat-val { font-size:10px; font-weight:700; color:var(--text); }
.s2-perf { font-size:9px; font-weight:700; padding:2px 6px; border-radius:100px; }
.s2-perf-ex { background:rgba(0,210,160,.15); color:#00d2a0; }
.s2-perf-gd { background:rgba(255,184,0,.15); color:#ffb800; }
.s2-perf-hv { background:rgba(255,61,90,.15); color:#FF3D5A; }
.catalog-preview-shell{display:none;min-width:0;margin:0 0 16px;border:1px solid var(--border2);border-radius:12px;background:var(--card);overflow:hidden}
.catalog-preview-header{width:100%;min-height:44px;display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border:0;background:rgba(123,47,255,.08);color:var(--text);font:inherit;font-size:11px;font-weight:750;cursor:pointer}
.catalog-preview-header:focus-visible{outline:2px solid var(--violet2);outline-offset:-3px}
.catalog-preview-chevron{transition:transform .18s ease}
.catalog-preview-shell:not(.is-collapsed) .catalog-preview-chevron{transform:rotate(180deg)}
.catalog-preview-body{display:block;max-height:55vh;overflow:auto;background:#08080d}
.catalog-preview-shell.is-collapsed .catalog-preview-body,
.catalog-preview-shell.is-suspended{display:none!important}
@media(max-width:900px), (display-mode:standalone){
.catalog-preview-shell{display:block}
.s2-preview-fab{display:none!important}
.catalog-preview-body .s2nm-hero{height:230px;min-height:230px}
.catalog-preview-body .s2nm-shelves{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
}
.um-app-mode .catalog-preview-shell{display:block}
.um-app-mode .s2-preview-fab{display:none!important}
/* Nuvio Mobile preview, based on the current open-source layout */
@media(min-width:901px){
.s2-layout{
display:block;
}
.s2-builder-col{
width:100%;
padding-right:0;
}
.s2-preview-col{
display:none !important;
}
.s2-desktop-preview-btn{
display:inline-flex;
}
}
.s2-desktop-preview-btn{
display:none;
align-items:center;
justify-content:center;
gap:8px;
min-height:38px;
padding:0 15px;
border:1px solid rgba(123,47,255,.45);
border-radius:10px;
background:rgba(123,47,255,.12);
color:#d8c8ff;
font-family:inherit;
font-size:12px;
font-weight:700;
cursor:pointer;
transition:
background .18s ease,
border-color .18s ease,
transform .18s ease;
}
.s2-desktop-preview-btn:hover{
background:rgba(123,47,255,.2);
border-color:#9c66ff;
transform:translateY(-1px);
}
.s2-preview-col{
background:#08080d;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(0,0,0,.45);
}
.s2-preview-header{
background:#0d0d14;
}
.s2-nuvio{
background:#08080d;
overflow:hidden;
}
.s2-nuvio-bar{
display:none !important;
}
.s2-nuvio-rows{
padding:0;
overflow:hidden;
}
.s2nm-shell{
position:relative;
background:#08080d;
color:#e0e0f0;
overflow:hidden;
}
.s2nm-hero{
position:relative;
height:430px;
min-height:360px;
max-height:760px;
overflow:hidden;
border-radius:0 0 28px 28px;
background:#101018;
}
.s2nm-hero-image{
position:absolute;
inset:-7%;
background-position:center;
background-size:cover;
transform:scale(1.14);
filter:saturate(.92);
}
.s2nm-hero-shade{
position:absolute;
inset:0;
background:
linear-gradient(
to bottom,
rgba(8,8,13,.02) 0%,
rgba(8,8,13,.12) 32%,
rgba(8,8,13,.34) 56%,
rgba(8,8,13,.78) 82%,
#08080d 100%
);
}
.s2nm-hero-fade{
position:absolute;
left:0;
right:0;
bottom:0;
height:220px;
background:linear-gradient(
to bottom,
transparent,
#08080d
);
}
.s2nm-hero-content{
position:absolute;
left:24px;
right:24px;
bottom:16px;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
z-index:2;
}
.s2nm-title{
/* Sits over the Nuvio-style hero preview image/backdrop — fixed
white regardless of theme, like the rest of this preview. */
width:100%;
color:#fff;
font-size:28px;
line-height:1.06;
font-weight:900;
letter-spacing:-.035em;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
text-overflow:ellipsis;
}
.s2nm-meta{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:8px;
margin-top:12px;
color:rgba(255,255,255,.9);
font-size:12px;
line-height:1;
font-weight:600;
}
.s2nm-dot{
width:4px;
height:4px;
border-radius:50%;
background:rgba(255,255,255,.7);
flex:0 0 auto;
}
.s2nm-details{
display:inline-flex;
align-items:center;
justify-content:center;
margin-top:14px;
min-height:44px;
padding:0 28px;
border-radius:40px;
background:#fff;
color:#08080d;
font-size:13px;
font-weight:800;
box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.s2nm-indicators{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
margin-top:12px;
}
.s2nm-indicator{
width:8px;
height:8px;
border-radius:999px;
background:rgba(255,255,255,.38);
}
.s2nm-indicator.active{
width:32px;
background:rgba(255,255,255,.92);
}
.s2nm-shelves{
padding:22px 0 24px;
background:#08080d;
}
.s2nm-shelf{
margin-bottom:28px;
}
.s2nm-shelf:last-child{
margin-bottom:0;
}
.s2nm-shelf-header{
display:flex;
align-items:center;
gap:12px;
padding:0 16px;
}
.s2nm-shelf-title-wrap{
flex:1;
min-width:0;
}
.s2nm-shelf-title{
color:#f7f7fb;
font-size:18px;
line-height:1.2;
font-weight:700;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.s2nm-accent{
width:60px;
height:4px;
margin-top:6px;
border-radius:999px;
background:#7b2fff;
}
.s2nm-view-all{
width:32px;
height:32px;
flex:0 0 32px;
display:grid;
place-items:center;
border-radius:12px;
background:#17171f;
color:rgba(255,255,255,.56);
font-size:22px;
line-height:1;
}
.s2nm-rail{
display:flex;
gap:10px;
overflow-x:auto;
overflow-y:hidden;
padding:14px 16px 4px;
scrollbar-width:none;
scroll-snap-type:x proximity;
}
.s2nm-rail::-webkit-scrollbar{
display:none;
}
.s2nm-card{
width:126px;
flex:0 0 126px;
scroll-snap-align:start;
}
.s2nm-poster{
width:126px;
aspect-ratio:.675;
border-radius:12px;
overflow:hidden;
background:#17171f;
box-shadow:0 4px 14px rgba(0,0,0,.28);
}
.s2nm-poster img{
width:100%;
height:100%;
display:block;
object-fit:cover;
}
.s2nm-card-title{
margin-top:6px;
color:#f5f5f8;
font-size:12px;
line-height:1.2;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.s2nm-card-detail{
margin-top:3px;
color:rgba(255,255,255,.48);
font-size:10px;
line-height:1.2;
}
.s2nm-more{
padding:0 16px 10px;
color:rgba(255,255,255,.38);
font-size:11px;
text-align:center;
}
.s2nm-empty{
min-height:430px;
display:grid;
place-items:center;
padding:30px;
text-align:center;
background:#08080d;
}
.s2nm-empty-icon{
font-size:42px;
margin-bottom:12px;
}
.s2nm-empty-title{
color:#e0e0f0;
font-size:17px;
font-weight:800;
margin-bottom:6px;
}
.s2nm-empty-copy{
color:rgba(255,255,255,.48);
font-size:12px;
line-height:1.5;
}
#s2Modal{
z-index:10010 !important;
background:#08080d !important;
backdrop-filter:none !important;
}
#s2Modal > .s2-modal-sheet{
position:absolute;
inset:0;
max-height:none;
overflow-y:auto;
padding:0;
border-radius:0;
background:#08080d;
}
.s2-modal-toolbar{
position:fixed;
top:calc(12px + env(safe-area-inset-top,0px));
right:14px;
z-index:10030;
}
.s2-modal-close{
width:42px;
height:42px;
display:grid;
place-items:center;
border:1px solid rgba(255,255,255,.16);
border-radius:50%;
background:rgba(10,10,16,.72);
color:#fff;
font-size:20px;
cursor:pointer;
backdrop-filter:blur(12px);
box-shadow:0 6px 22px rgba(0,0,0,.35);
}
body.s2-preview-open{
overflow:hidden;
}
body.s2-preview-open #umBackToTop{
display:none !important;
}
@media(max-width:600px){
#s2Modal .s2nm-hero{
height:82vh;
min-height:360px;
max-height:760px;
}
#s2Modal .s2nm-title{
font-size:32px;
}
#s2Modal .s2nm-meta{
font-size:13px;
}
#s2Modal .s2nm-shelf-title{
font-size:20px;
}
}
@media(min-width:901px){
.s2-preview-col .s2nm-hero{
height:360px;
min-height:360px;
}
.s2-preview-col .s2nm-title{
font-size:23px;
}
.s2-preview-col .s2nm-meta{
font-size:10px;
}
.s2-preview-col .s2nm-details{
min-height:38px;
padding:0 22px;
font-size:11px;
}
.s2-preview-col .s2nm-shelf-title{
font-size:14px;
}
.s2-preview-col .s2nm-card{
width:92px;
flex-basis:92px;
}
.s2-preview-col .s2nm-poster{
width:92px;
border-radius:9px;
}
.s2-preview-col .s2nm-card-title{
font-size:10px;
}
.s2-preview-col .s2nm-card-detail{
font-size:9px;
}
}
/* FAB */
.s2-preview-fab { display:none; position:fixed; bottom:80px; right:16px; z-index:150; background:linear-gradient(135deg,var(--violet),var(--coral)); border:none; border-radius:100px; padding:10px 18px; color:#fff; font-size:12px; font-weight:700; cursor:pointer; box-shadow:0 6px 24px rgba(123,47,255,.4); align-items:center; gap:6px; font-family:inherit; }
/* Raw pills section */
.s2-raw { display:none; margin-top:16px; }
.s2-raw-pills { display:flex; flex-wrap:wrap; gap:6px; max-height:400px; overflow-y:auto; padding:4px; }
.merged-list{display:grid;gap:10px;margin-bottom:12px}
.merged-row,.merged-editor{border:1px solid var(--border2);border-radius:12px;background:var(--card);padding:12px}
.merged-row{display:flex;align-items:center;gap:10px}
.merged-row-copy{flex:1;min-width:0}
.merged-row-title{font-weight:750;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.merged-row-meta{font-size:11px;color:var(--muted);margin-top:3px}
.merged-actions{display:flex;gap:6px;flex-wrap:wrap}
.merged-row-actions-panel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,270px);gap:8px}
.merged-row-actions-panel.merged-row-actions-protected{grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,180px)}
.merged-btn{min-height:38px;border:1px solid var(--border2);border-radius:8px;background: var(--surface-soft);color:var(--text);padding:7px 11px;cursor:pointer}
.merged-btn:focus-visible{outline:2px solid var(--violet2);outline-offset:2px}
.merged-btn.primary{background:var(--violet);border-color:var(--violet);color:#fff;font-weight:700}
.merged-btn.danger{border-color:rgba(255,61,90,.34);color:var(--coral)}
.merged-row-actions-panel .merged-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:42px;padding:6px 7px;font-size:10px;font-weight:700}
.merged-row-actions-panel .merged-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.merged-fields{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px}
.merged-field{display:grid;gap:5px;color:var(--muted);font-size:11px}
.merged-field-help{display:block;color:var(--muted);font-size:10px;line-height:1.35}
.merged-field input,.merged-field select{width:100%;min-height:42px;background:var(--bg2);border:1px solid var(--border2);border-radius:8px;color:var(--text);padding:9px}
.merged-source-list{display:grid;gap:7px;margin:12px 0}
.merged-source{display:flex;align-items:center;gap:8px;padding:9px;border:1px solid var(--border2);border-radius:8px}
.merged-source-name{flex:1;min-width:0}
.merged-picker-search-card{position:sticky;top:0;z-index:3;margin:12px 0 8px;padding:10px;border:1px solid var(--border2);border-radius:10px;background:var(--card)}
.merged-search-field{font-size:12px;font-weight:700;color:var(--text)}
.merged-search-field input{margin-top:4px;font-size:14px}
.merged-picker-count{font-size:11px;color:var(--muted);margin-top:6px}
.merged-picker-results{max-height:320px;overflow-y:auto;overflow-x:hidden;display:grid;gap:5px;margin-top:6px;overscroll-behavior:contain;scroll-padding-bottom:72px;-webkit-overflow-scrolling:touch}
.merged-picker-option{text-align:left;width:100%;display:flex;justify-content:space-between;gap:10px}
.merged-error{color:var(--coral);font-size:11px;min-height:16px;margin-top:8px}
.merged-remove-confirm{position:fixed;inset:0;z-index:999999;display:grid;place-items:center;padding:18px;background:rgba(5,5,14,.82)}
.merged-remove-confirm[hidden]{display:none}
.merged-remove-confirm-card{width:min(440px,100%);padding:20px;border:1px solid var(--border2);border-radius:15px;background:var(--card2);box-shadow:0 22px 70px rgba(0,0,0,.58)}
.merged-remove-confirm-card h3{margin:0 0 9px;color:var(--text);font-size:18px}
.merged-remove-confirm-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.6}
.merged-remove-confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px}
.merged-remove-confirm-actions .merged-btn{min-height:44px}
#step-2 .s2-selected-management{margin:18px 0 10px;scroll-margin-bottom:130px}
#step-2 .s2-selected-management .s2-all-hidden-warning{margin-bottom:12px}
#step-2 .s2-selected-management .s2-home-actions{max-width:none;margin:0;align-items:stretch}
#step-2 .s2-selected-management .s2-home-action-card{height:100%;min-height:78px}
#step-2 .s2-selected-management .s2-home-action-card-title,
#step-2 .s2-selected-management .s2-home-action-card-sub{white-space:normal;overflow:visible;text-overflow:clip}
@media(min-width:901px){#step-2 .s2-selected-management .s2-home-actions{grid-template-columns:repeat(3,minmax(0,1fr))}}
#step-2 .s2-preset-toolbar{margin-top:24px;margin-bottom:20px}
@media(max-width:700px){.merged-fields{grid-template-columns:1fr}.merged-row{align-items:flex-start;flex-wrap:wrap}.merged-row-actions-panel,.merged-row-actions-panel.merged-row-actions-protected{flex:1 1 100%;width:100%}.merged-row-actions-panel .merged-btn{min-height:42px;padding-inline:4px;font-size:9px}.merged-picker-results{max-height:min(46vh,360px);padding-bottom:72px}#step-2 .s2-selected-management{padding-bottom:12px}#step-2 .s2-selected-management .s2-home-actions{grid-template-columns:1fr}#step-2 .s2-selected-management .s2-home-action-card{min-height:72px}}
/* ===== setup.html style block 35: block-35 ===== */
.install-status-card{
border:1px solid var(--border2);
background:var(--card);
border-radius:14px;
padding:14px 16px;
margin-bottom:16px;
border-left:3px solid var(--violet);
}
.install-status-head{ display:flex; align-items:flex-start; gap:10px; }
.install-status-icon{ font-size:20px; line-height:1; flex-shrink:0; margin-top:1px; }
.install-status-copy{ min-width:0; flex:1; }
.install-status-title{ font-size:14px; font-weight:600; color:var(--text); }
.install-status-desc{ font-size:12px; color:var(--muted); margin-top:3px; line-height:1.5; }
.install-status-reasons{
list-style:none; margin:8px 0 0; padding:0 0 0 30px;
font-size:12px; color:var(--muted); line-height:1.7;
}
.install-status-reasons:empty{ display:none; }
.install-status-reasons li{ position:relative; }
.install-status-reasons li::before{
content:"•"; position:absolute; left:-14px; opacity:.6;
}
.install-status-reasons li.install-status-reason-hidden{ display:none; }
.install-status-reasons li.install-status-more{ color:var(--muted); opacity:.8; cursor:default; }
.install-status-toggle{
display:none; margin:8px 0 0 30px; background:none; border:none; padding:0;
font-family:inherit; font-size:12px; color:var(--violet2); cursor:pointer;
text-decoration:underline; text-underline-offset:2px;
}
.install-status-action{
font-size:12px; font-weight:600; margin-top:10px; padding-left:30px; color:var(--text);
}
.install-status-card[data-status="first-install"]{ border-left-color:var(--violet); }
.install-status-card[data-status="first-install"] .install-status-action{ color:var(--violet2); }
.install-status-card[data-status="no-reinstall"]{ border-left-color:#4caf50; }
.install-status-card[data-status="no-reinstall"] .install-status-action{ color:#5ee6a8; }
.install-status-card[data-status="refresh-recommended"]{ border-left-color:#ffb74d; }
.install-status-card[data-status="refresh-recommended"] .install-status-action{ color:#ffb74d; }
.install-status-card[data-status="reinstall-required"]{ border-left-color:var(--coral); }
.install-status-card[data-status="reinstall-required"] .install-status-action{ color:#ff8a9b; }
body.light-mode .install-status-card{ background:var(--card); border-color:var(--border2); box-shadow:var(--shadow); }
body.light-mode .install-status-title{ color:var(--text); }
/* ===== setup.html style block 36: block-36 ===== */
@keyframes um-warm-spin{to{transform:rotate(360deg)}}
/* ===== setup.html style block 37: block-37 ===== */
.s4-card-header{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;user-select:none;}
.s4-chev{transition:transform .18s ease;color:var(--muted);font-size:11px;flex-shrink:0;}
.s4-chev.s4-open{transform:rotate(180deg);}
.s4-card-summary{font-size:11px;color:var(--faint);font-weight:400;text-transform:none;letter-spacing:0;}
#step-4 .step3-top-nav{margin:18px 0 22px!important}
#step-4 .step3-instructions,
#step-4 .step3-summary{margin-top:0!important;margin-bottom:18px!important}
#step-4 #genBtn{margin-bottom:18px!important}
#step-4 #resultBox{padding-bottom:24px}
#step-4 #s4Stack{gap:16px!important}
.step3-instruction-copy{color:#ccc;font-size:12px;line-height:1.65}
.step3-instruction-copy>p:first-child{margin:0 0 16px}
.step3-instruction-copy section{padding:12px 0;border-top:1px solid rgba(255,255,255,.07)}
.step3-instruction-copy section strong{display:block;color:var(--text);margin-bottom:5px}
.step3-instruction-copy section p{margin:3px 0}
.step3-instruction-note{margin:12px 0 0!important;padding-top:12px;border-top:1px solid rgba(123,47,255,.24);color:var(--violet2);font-weight:700}
#step-4 .step3-export-section{min-width:0}
.step3-export-heading{margin-bottom:12px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.step3-export-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.step3-export-card{display:grid;grid-template-columns:46px minmax(0,1fr) auto auto;align-items:center;gap:12px;min-width:0;min-height:92px;padding:14px;border:1px solid rgba(123,47,255,.25);border-radius:15px;background:linear-gradient(145deg,rgba(123,47,255,.11),rgba(255,255,255,.025));color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:transform .17s ease,border-color .17s ease,background .17s ease}
.step3-export-card:hover{transform:translateY(-2px);border-color:rgba(156,102,255,.62);background:linear-gradient(145deg,rgba(123,47,255,.18),rgba(255,255,255,.035))}
.step3-export-card:active{transform:scale(.99)}
.step3-export-card:focus-visible{outline:2px solid var(--violet2);outline-offset:3px}
.step3-export-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,var(--violet),#9c66ff);color:#fff;font-size:21px;font-weight:800;box-shadow:0 8px 22px rgba(123,47,255,.24)}
.step3-export-icon.csv{background:linear-gradient(135deg,#0f9f7f,#31d0aa);box-shadow:0 8px 22px rgba(49,208,170,.17)}
.step3-export-content{display:grid;gap:4px;min-width:0}
.step3-export-title{color:var(--text);font-size:13px;font-weight:800}
.step3-export-description{color:var(--muted);font-size:10px;line-height:1.45;overflow-wrap:anywhere}
.step3-export-format{padding:4px 7px;border:1px solid rgba(255,255,255,.11);border-radius:999px;color:var(--violet2);font-size:9px;font-weight:800;letter-spacing:.08em}
.step3-export-action{color:var(--violet2);font-size:18px}
@media(max-width:700px){
#step-4 .step3-top-nav{margin:14px 0 18px!important}
#step-4 .step3-top-nav .nav-btn{min-height:42px;white-space:normal}
#step-4 #resultBox{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
.step3-export-grid{grid-template-columns:1fr}
.step3-export-card{min-height:82px;padding:12px;grid-template-columns:42px minmax(0,1fr) auto auto}
.step3-export-icon{width:42px;height:42px}
}
@media(max-width:390px){
.step3-export-card{gap:9px}
.step3-export-format{padding:3px 6px}
}
/* ===== setup.html style block 38: block-38 ===== */
#fusionPreviewModal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:9999;align-items:center;justify-content:center;padding:16px;overflow:hidden}
.fusion-preview-dialog{background:#101119;border:1px solid rgba(255,255,255,.13);border-radius:18px;max-width:1080px;width:100%;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 28px 90px rgba(0,0,0,.6)}
.fusion-preview-header{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid #2a2a45;flex-shrink:0;background:rgba(16,17,25,.97);z-index:2}
.fusion-preview-close{background: rgba(255,255,255,.06);border:1px solid transparent;border-radius:9px;color:#9898bb;font-size:20px;cursor:pointer;line-height:1;padding:8px;min-width:40px;min-height:40px}
.fusion-preview-tabs{display:flex;gap:4px;padding:8px 18px 0;border-bottom:1px solid #2a2a45;flex-shrink:0;background:#101119}
.fusion-preview-tab{appearance:none;background:transparent;border:0;border-bottom:2px solid transparent;color:#9898bb;font:600 12px inherit;padding:10px 12px;cursor:pointer;min-height:40px}
.fusion-preview-tab[aria-selected="true"]{color:#e0e0f0;border-bottom-color:#00d2a0}
.fusion-preview-scroll{min-width:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.fusion-preview-panel{padding:16px 18px 22px;min-width:0}
.fusion-preview-notice,.fusion-preview-warning{border-radius:10px;padding:9px 12px;font-size:11px;line-height:1.45;margin-bottom:14px}
.fusion-preview-notice{color:#b9c1cc;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}
.fusion-preview-warning{color:#ffd28a;background:rgba(255,172,65,.1);border:1px solid rgba(255,172,65,.28)}
.fusion-widget{min-width:0;margin:0 0 24px}
.fusion-widget:last-child{margin-bottom:0}
.fusion-widget-title{font-size:15px;font-weight:750;color:#e0e0f0;margin-bottom:3px}
.fusion-widget-meta{font-size:10px;color:#6a6a8a;margin-bottom:10px}
.fusion-tile-rail{display:flex;align-items:flex-start;gap:12px;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;padding:2px 2px 12px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x}
.fusion-tile{flex:0 0 auto;width:220px;min-width:0;scroll-snap-align:start}
.fusion-tile[data-aspect="poster"]{width:150px}
.fusion-tile[data-aspect="square"]{width:160px}
.fusion-tile-art{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:11px;background:linear-gradient(145deg,#242735,#151720);border:1px solid rgba(255,255,255,.09)}
.fusion-tile[data-aspect="poster"] .fusion-tile-art{aspect-ratio:2/3}
.fusion-tile[data-aspect="square"] .fusion-tile-art{aspect-ratio:1}
.fusion-tile-art img{position:relative;z-index:2;display:block;width:100%;height:100%;object-fit:cover}
.fusion-tile-fallback{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 25% 15%,rgba(123,47,255,.35),transparent 47%),linear-gradient(145deg,#25283a,#151722);color:rgba(255,255,255,.7);font:700 12px inherit;letter-spacing:.12em}
.fusion-source-badge{position:absolute;z-index:3;right:7px;bottom:7px;padding:4px 7px;border-radius:100px;background:rgba(7,8,13,.88);color:#e8ebef;font-size:9px;font-weight:700;backdrop-filter:blur(5px)}
.fusion-tile-title{color:#f4f5f7;font-size:11px;font-weight:650;line-height:1.35;margin-top:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fusion-tile-kind{color:var(--faint);font-size:9px;margin-top:2px;text-transform:capitalize}
.fusion-structure-widget{margin-bottom:14px}
.fusion-structure-row{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid var(--border);font-size:11px}
.fusion-json-toggle{cursor:pointer;padding:10px 0}
#fusionRawJsonBody{display:none;margin-top:8px;max-height:320px;overflow:auto;background:rgba(0,0,0,.3);border-radius:8px;padding:10px;font-size:10px;color:var(--muted);white-space:pre-wrap;word-break:break-all}
.fusion-skeleton{height:150px;border-radius:12px;background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.09) 45%,rgba(255,255,255,.04) 65%);background-size:240% 100%;animation:fusionShimmer 1.25s infinite;margin-bottom:12px}
@keyframes fusionShimmer{to{background-position:-240% 0}}
.fusion-preview-tab:focus-visible,.fusion-preview-close:focus-visible,.fusion-tile-rail:focus-visible,.fusion-tile:focus-visible{outline:3px solid #00d2a0;outline-offset:2px}
@media(max-width:600px){
#fusionPreviewModal{padding:8px}
.fusion-preview-dialog{max-height:94vh;border-radius:14px}
.fusion-preview-panel{padding:13px 12px 18px}
.fusion-preview-tabs,.fusion-preview-header{padding-left:12px;padding-right:12px}
.fusion-tile{width:170px}.fusion-tile[data-aspect="poster"]{width:125px}.fusion-tile[data-aspect="square"]{width:130px}
}
@media(prefers-reduced-motion:reduce){.fusion-skeleton{animation:none}}
/* ===== setup.html style block 39: block-39 ===== */
@keyframes s2SkelShimmer { 0%{background-position:100% 0;} 100%{background-position:-100% 0;} }
/* ===== setup.html style block 40: block-40 ===== */
html.catalog-override-modal-open,
html.catalog-override-modal-open body { overflow: hidden !important; }
#catalogOverrideModal { z-index:1000001 !important; overflow:auto; overscroll-behavior:contain; }
#catalogOverrideModal > .catalog-override-sheet { max-height:calc(100dvh - 36px); overflow-y:auto; }
/* ===== setup.html style block 41: block-41 ===== */
.coll-sticky-bar{position:sticky;top:0;z-index:50;background:var(--bg,#0a0a0a);padding:12px 0 10px;border-bottom:1px solid #1e1e1e;margin-bottom:16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.coll-search{flex:1;min-width:180px;padding:9px 14px;background:#111;color:var(--text);border:1px solid #3a3a55;border-radius:8px;font-size:13px;}
/* ── STEP 3 COLLECTION CARDS ── */
.coll-card{
background:var(--card);
border:1px solid var(--border2);
border-radius:16px;
margin-bottom:12px;
overflow:hidden;
transition:border-color .2s, box-shadow .2s;
}
.coll-card:hover{ border-color:rgba(123,47,255,.3); box-shadow:0 4px 24px rgba(0,0,0,.3); }
.coll-card-header{
display:flex;align-items:center;gap:12px;
padding:14px 16px;cursor:pointer;user-select:none;
position:relative;
}
.coll-card-header:hover{background: var(--hover);}
.coll-card-thumb{
width:72px;height:44px;object-fit:cover;
border-radius:8px;flex-shrink:0;
box-shadow:0 2px 12px rgba(0,0,0,.4);
}
.coll-card-thumb-empty{
width:72px;height:44px;border-radius:8px;
background:linear-gradient(135deg,var(--border2),var(--border));
flex-shrink:0;display:flex;align-items:center;justify-content:center;
font-size:1.2rem;opacity:.4;
}
.coll-card-title{flex:1;font-size:15px;font-weight:700;color:var(--text);}
.coll-card-meta{font-size:11px;color:var(--muted);margin-top:2px;}
.coll-card-actions{display:flex;gap:6px;flex-shrink:0;}
.coll-card-body{
padding:0 16px 16px;
border-top:1px solid var(--border);
}
/* ── FOLDER BLOCKS ── */
.folder-block{
border:1px solid var(--border);
border-radius:12px;
margin-top:10px;
overflow:hidden;
transition:border-color .15s;
}
.folder-block:hover{ border-color:var(--border2); }
.folder-header{
display:flex;align-items:center;gap:10px;
padding:10px 14px;
background: var(--surface-soft);
cursor:pointer;user-select:none;
transition:background .15s;
}
.folder-header:hover{background: var(--hover);}
.folder-thumb{
width:48px;height:30px;object-fit:cover;
border-radius:5px;flex-shrink:0;
box-shadow:0 1px 8px rgba(0,0,0,.3);
}
.folder-thumb-empty{
width:48px;height:30px;border-radius:5px;
background:linear-gradient(135deg,var(--border2),var(--border));
flex-shrink:0;display:flex;align-items:center;justify-content:center;
font-size:.9rem;opacity:.4;
}
.folder-title{flex:1;font-size:13px;font-weight:600;color:var(--text);}
.folder-meta{font-size:10px;color:var(--muted);}
.folder-actions{display:flex;gap:4px;}
.folder-body{
padding:12px 14px;
border-top:1px solid var(--border);
background:rgba(0,0,0,.2);
}
/* ── DRAG & ROW ITEMS ── */
.drag-handle{cursor:grab;color:var(--faint);font-size:16px;padding:0 4px;flex-shrink:0;transition:color .15s;display:inline-flex;align-items:center;justify-content:center;}
.drag-handle svg{display:block;width:10px;height:16px;}
.drag-handle:hover{color:var(--muted);}
.drag-handle:hover svg{color:var(--violet2);}
.drag-handle:active{cursor:grabbing;}
.sortable-ghost{opacity:0.3;}
.row-item{
display:flex;justify-content:space-between;align-items:center;
gap:8px;padding:6px 0;
border-bottom:1px solid rgba(255,255,255,.04);
}
.row-item:last-child{border-bottom:none;}
@media(max-width:600px){
.coll-card-header { padding:10px 12px; }
.folder-body { padding:8px !important; }
.coll-card-thumb { width:56px; height:32px; }
}
.row-item > div:first-child {
flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.row-item button { flex-shrink:0; }
/* ── S3 PRESET CARDS ── */
.s3-presets-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
gap:8px;
margin-bottom:0;
}
.s3-preset-card{
background:var(--card);border:1px dashed rgba(123,47,255,.35);
border-radius:14px;overflow:hidden;cursor:pointer;
transition:all .2s;position:relative;
}
.s3-preset-card:hover{
border-style:solid;border-color:var(--violet);
transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.4);
}
.s3-preset-card.just-added{
animation:s3CardFlash .6s ease;
}
.s3-preset-card.provider-unavailable{
opacity:.42;
cursor:not-allowed;
filter:grayscale(.8);
}
.s3-preset-card.provider-unavailable .s3-preset-add{
color:var(--muted);
}
@keyframes s3CardFlash{
0%{border-color:#00d2a0;background:rgba(0,210,160,.1);}
100%{border-color:rgba(123,47,255,.35);background:transparent;}
}
.s3-preset-strip{height:40px;overflow:hidden;display:flex;gap:2px;background:var(--bg2);}
.s3-preset-strip img{height:100%;flex:1;min-width:0;object-fit:cover;}
.s3-preset-body{padding:6px 8px 8px;}
.s3-preset-icon{font-size:.85rem;display:inline;margin-right:4px;}
.s3-preset-name{font-weight:700;font-size:11px;color:var(--text);display:inline;}
.s3-preset-add{font-size:9px;color:var(--violet2);font-weight:600;margin-top:2px;}
/* Sticky presets panel */
.s3-sticky-presets {
position:sticky;
top:60px;
z-index:50;
background:var(--bg);
border-bottom:1px solid var(--border);
margin:-1px -24px 24px;
padding:10px 16px;
transition:all .2s;
}
.s3-sticky-toggle {
display:flex;align-items:center;justify-content:space-between;
cursor:pointer;user-select:none;
}
.s3-sticky-label {
font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--muted);display:flex;align-items:center;gap:8px;
}
.s3-sticky-chev { color:var(--faint);font-size:10px;transition:transform .2s; }
.s3-sticky-presets.s3-open .s3-sticky-chev { transform:rotate(180deg); }
.s3-sticky-grid { display:none;margin-top:10px; }
.s3-sticky-presets.s3-open .s3-sticky-grid { display:flex;flex-wrap:wrap;gap:8px; }
/* Override preset card style in sticky — make them chips */
.s3-sticky-grid .s3-preset-card {
border-radius:100px !important;
overflow:visible !important;
display:flex !important;
align-items:center !important;
width:auto !important;
}
.s3-sticky-grid .s3-preset-strip { display:none !important; }
.s3-sticky-grid .s3-preset-body {
padding:6px 14px !important;
display:flex;align-items:center;gap:6px;
}
.s3-sticky-grid .s3-preset-icon { display:inline !important; font-size:.85rem; }
.s3-sticky-grid .s3-preset-name { display:inline !important; font-size:12px; }
.s3-sticky-grid .s3-preset-add { display:none !important; }
/* ── S3 VIEW MODE CARDS ── */
.s3-viewmode-grid{display:flex;gap:10px;flex-wrap:wrap;}
.s3-viewmode-card{
flex:1;min-width:100px;
background:var(--card);border:1px solid var(--border2);
border-radius:12px;padding:14px 12px;cursor:pointer;
transition:all .2s;text-align:center;
}
.s3-viewmode-card:hover{border-color:var(--violet2);}
.s3-viewmode-card.active{border-color:var(--violet);background:rgba(123,47,255,.08);}
.s3-viewmode-icon{font-size:1.6rem;margin-bottom:6px;display:block;}
.s3-viewmode-name{font-size:12px;font-weight:700;color:var(--text);}
.s3-viewmode-desc{font-size:10px;color:var(--muted);margin-top:2px;}
/* ── S3 SECTION LABELS ── */
.s3-label{
font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--muted);margin-bottom:14px;
display:flex;align-items:center;gap:10px;
}
.s3-label::after{content:'';flex:1;height:1px;background:var(--border);}
/* ── S3 EMPTY STATE ── */
.s3-empty{
text-align:center;padding:48px 24px;
border:1px dashed var(--border2);border-radius:16px;
background:rgba(255,255,255,.01);
}
.s3-empty-icon{font-size:3rem;margin-bottom:12px;opacity:.25;}
.s3-empty-text{font-size:13px;color:var(--muted);line-height:1.8;}
.s3-empty-arrow{font-size:1.5rem;color:var(--violet2);margin-bottom:8px;animation:bounceUp 2s ease-in-out infinite;}
@keyframes bounceUp{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
/* ===== setup.html style block 42: block-42 ===== */
#previewTabs::-webkit-scrollbar{display:none;}
#previewContent::-webkit-scrollbar{width:3px;}
#previewContent::-webkit-scrollbar-track{background:transparent;}
#previewContent::-webkit-scrollbar-thumb{background:#222;border-radius:4px;}
.ptile{background:#111;border-radius:10px;overflow:hidden;flex-shrink:0;position:relative;}
.ptile-shimmer{background:linear-gradient(90deg,#111 25%,#1a1a1a 50%,#111 75%);background-size:200% 100%;animation:pshimmer 1.8s infinite;}
@keyframes pshimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* ===== setup.html style block 43: block-43 ===== */
.sum-section{margin-bottom:24px;}
.sum-section-title{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#7B2FFF;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid #1a1a1a;}
.sum-row{display:flex;align-items:flex-start;justify-content:space-between;padding:7px 0;border-bottom:1px solid #0f0f0f;gap:12px;}
.sum-row-label{font-size:12px;color:#666;flex-shrink:0;width:110px;}
.sum-row-value{font-size:12px;color:#e8e8f0;text-align:right;word-break:break-word;}
.sum-catalog-pill{display:inline-block;background:#1a1a2e;border:1px solid #2a2a45;border-radius:20px;padding:3px 10px;font-size:11px;color:#c8c8e0;margin:2px;}
.sum-empty{font-size:12px;color:#333;font-style:italic;}
.sum-folder{background:#0f0f0f;border-radius:8px;padding:10px;margin-bottom:8px;}
.sum-folder-name{font-size:12px;font-weight:700;color:var(--text);margin-bottom:6px;}
.sum-folder-rows{font-size:11px;color:#666;}
/* ===== setup.html style block 44: block-44 ===== */
.um-build-bottom-nav {
display: none;
}
html.um-app-mode .um-build-bottom-nav,
body.um-app-mode .um-build-bottom-nav {
display: flex;
}
.um-build-bottom-nav {
position: fixed;
left: 12px;
right: 12px;
bottom: calc(12px + env(safe-area-inset-bottom));
z-index: 999999;
height: 64px;
align-items: center;
justify-content: space-around;
padding: 6px 8px;
background: rgba(12, 10, 25, 0.96);
border: 1px solid rgba(155, 95, 255, 0.30);
border-radius: 20px;
box-shadow:
0 14px 45px rgba(0, 0, 0, 0.50),
0 0 30px rgba(123, 47, 255, 0.11);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.um-build-bottom-nav a {
min-width: 64px;
min-height: 48px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
border-radius: 14px;
color: #8888aa;
text-decoration: none;
font-family: Inter, Arial, sans-serif;
font-size: 10px;
font-weight: 700;
}
.um-build-bottom-nav a.active {
color: #9b5fff;
background: rgba(123, 47, 255, 0.10);
}
.um-build-bottom-nav a:active {
color: var(--text);
background: rgba(123, 47, 255, 0.18);
}
.um-build-bottom-nav svg {
width: 21px;
height: 21px;
}
html.um-app-mode body,
body.um-app-mode {
padding-bottom:
calc(96px + env(safe-area-inset-bottom)) !important;
}
/* Keep the builder theme button above the navigation */
html.um-app-mode #themeToggle,
body.um-app-mode #themeToggle {
bottom:
calc(86px + env(safe-area-inset-bottom)) !important;
}
/* ===== setup.html style block 45: block-45 ===== */
#umBackToTop,
#umGoToBottom {
position: fixed;
left: 18px;
bottom: 18px;
z-index: 9996;
display: flex;
align-items: center;
gap: 8px;
min-height: 54px;
padding: 13px 20px;
border: 1px solid rgba(155, 95, 255, 0.45);
border-radius: 999px;
background: rgba(18, 18, 31, 0.94);
color: #f4f1ff;
font: 700 14px/1 'Inter', sans-serif;
letter-spacing: 0.02em;
box-shadow:
0 8px 28px rgba(0, 0, 0, 0.42),
0 0 20px rgba(123, 47, 255, 0.16);
backdrop-filter: blur(12px);
cursor: pointer;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(14px);
transition:
opacity 0.22s ease,
transform 0.22s ease,
visibility 0.22s ease,
border-color 0.18s ease,
background 0.18s ease;
}
#umGoToBottom {
right: 18px;
left: auto;
}
#umBackToTop.visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
#umGoToBottom.visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
#umBackToTop:hover,
#umBackToTop:focus-visible,
#umGoToBottom:hover,
#umGoToBottom:focus-visible {
background: rgba(123, 47, 255, 0.24);
border-color: rgba(155, 95, 255, 0.9);
outline: 3px solid rgba(155, 95, 255, 0.28);
outline-offset: 3px;
}
#umBackToTop .um-top-arrow {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, #7b2fff, #ff3d5a);
color: #fff;
font-size: 14px;
line-height: 1;
}
#umGoToBottom .um-top-arrow {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, #7b2fff, #ff3d5a);
color: #fff;
font-size: 14px;
line-height: 1;
}
@media (max-width: 600px) {
#umBackToTop,
#umGoToBottom {
left: 12px;
bottom: 12px;
min-width: 56px;
min-height: 56px;
padding: 12px 14px;
}
#umBackToTop .um-top-label {
display: none;
}
#umGoToBottom .um-top-label {
display: none;
}
#umGoToBottom {
right: 12px;
left: auto;
}
}
html.um-app-mode #umBackToTop,
body.um-app-mode #umBackToTop,
html.native-app #umBackToTop,
body.native-app #umBackToTop {
bottom: calc(118px + env(safe-area-inset-bottom, 0px));
left: 18px;
z-index: 10020;
}
html.um-app-mode #umGoToBottom,
body.um-app-mode #umGoToBottom,
html.native-app #umGoToBottom,
body.native-app #umGoToBottom {
right: 18px;
bottom: calc(118px + env(safe-area-inset-bottom, 0px));
left: auto;
z-index: 10020;
}
@media (prefers-reduced-motion: reduce) {
#umBackToTop,
#umGoToBottom {
transition: none;
}
}
/* ===== setup.html style block 46: ultramax-native-review-actions-style ===== */
/* ULTRA MAX NATIVE REVIEW ACTIONS */
.um-app-mode .s2-review-zone {
padding: 24px 18px !important;
}
.um-app-mode .s2-review-actions {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
width: 100% !important;
margin-top: 20px !important;
}
.um-app-mode .s2-review-actions .s2-app-summary-btn,
.um-app-mode .s2-review-actions .s2-app-preview-btn {
display: flex !important;
width: 100% !important;
min-width: 0 !important;
min-height: 56px !important;
margin: 0 !important;
padding: 12px !important;
border-radius: 14px !important;
align-items: center !important;
justify-content: center !important;
}
.um-app-mode #step-2 .s2-bottom-nav {
margin-top: 14px !important;
}
.um-app-mode #step-2 .s2-bottom-nav .s2-app-summary-btn,
.um-app-mode #step-2 .s2-bottom-nav .s2-app-preview-btn {
display: none !important;
}
/* ===== setup.html style block 47: ultramax-light-theme-contrast-final-cascade ===== */
/* =========================================================
LIGHT MODE: FINAL CONTRAST AND CONTROL CONSISTENCY
========================================================= */
/* Accordion and optional-section headings */
body.light-mode .opt-subsection > summary,
body.light-mode .optional-shell > summary,
body.light-mode #step-1 .opt-subsection > summary,
body.light-mode #step-1 .optional-shell > summary {
background:
linear-gradient(
135deg,
rgba(123,47,255,.075),
rgba(255,61,90,.025)
) !important;
color: var(--text) !important;
border-color: var(--border) !important;
}
body.light-mode .opt-subsection > summary *,
body.light-mode .optional-shell > summary *,
body.light-mode .opt-subsection > summary span,
body.light-mode .optional-shell > summary span {
color: var(--text) !important;
-webkit-text-fill-color: var(--text) !important;
}
body.light-mode .opt-subsection > summary::after,
body.light-mode .optional-shell > summary::after {
color: var(--violet-strong) !important;
}
/* Ensure secondary summary text remains distinguishable */
body.light-mode #integrationsSummary,
body.light-mode .s4-card-summary,
body.light-mode summary .optional-sub,
body.light-mode summary .summary-status {
color: var(--text2) !important;
-webkit-text-fill-color: var(--text2) !important;
}
/* Ordinary Step 1 controls must be light, not preview-dark */
body.light-mode #googleAiKey,
body.light-mode #metadataLanguage,
body.light-mode #language,
body.light-mode #rpdbKey,
body.light-mode #tpKey,
body.light-mode #fanartKey,
body.light-mode #omdbKey,
body.light-mode #betterPostersStyle,
body.light-mode #betterPostersManualUrl,
body.light-mode #animePresentationMode,
body.light-mode #animePresentation,
body.light-mode #maxRating,
body.light-mode #debridService,
body.light-mode #debridApiKey {
background: var(--input-bg) !important;
color: var(--text) !important;
-webkit-text-fill-color: var(--text) !important;
border-color: var(--border2) !important;
box-shadow: none !important;
color-scheme: light !important;
}
/* Catch equivalent controls whose exact IDs differ */
body.light-mode #step-1 .opt-subsection input:not([type="checkbox"]):not([type="radio"]),
body.light-mode #step-1 .opt-subsection textarea,
body.light-mode #step-1 .opt-subsection select,
body.light-mode #step-1 .optional-shell input:not([type="checkbox"]):not([type="radio"]),
body.light-mode #step-1 .optional-shell textarea,
body.light-mode #step-1 .optional-shell select {
background: var(--input-bg) !important;
color: var(--text) !important;
-webkit-text-fill-color: var(--text) !important;
border-color: var(--border2) !important;
color-scheme: light !important;
}
/* Placeholder contrast */
body.light-mode #step-1 .opt-subsection input::placeholder,
body.light-mode #step-1 .opt-subsection textarea::placeholder,
body.light-mode #step-1 .optional-shell input::placeholder,
body.light-mode #step-1 .optional-shell textarea::placeholder {
color: var(--faint) !important;
-webkit-text-fill-color: var(--faint) !important;
opacity: 1 !important;
}
/* Verify/check buttons should remain branded and readable */
body.light-mode #step-1 .verify-btn {
background: linear-gradient(
135deg,
var(--violet),
var(--coral)
) !important;
color: #fff !important;
border-color: transparent !important;
}
/* Collection preset surrounding panel */
body.light-mode #step-3 .s3-presets-shell,
body.light-mode #step-3 .s3-quick-start,
body.light-mode #step-3 .s3-preset-section,
body.light-mode #step-3 .s3-presets-grid-wrapper,
body.light-mode #step-3 #s3PresetsGrid {
background: var(--card) !important;
color: var(--text) !important;
border-color: var(--border2) !important;
}
/* Some builds place the dark background on a parent near the grid */
body.light-mode #step-3 .s3-presets-grid {
background: transparent !important;
}
/* Quick-start labels above collection cards */
body.light-mode #step-3 .s3-label,
body.light-mode #step-3 .s3-quick-start-title,
body.light-mode #step-3 .s3-quick-start-desc {
color: var(--text2) !important;
}
/* Keep real dark previews deliberately dark */
body.light-mode #streamFormatPreview,
body.light-mode .sf-preview,
body.light-mode #streamFormatCheatsheet,
body.light-mode .s2-nuvio,
body.light-mode #s2Modal,
body.light-mode #nuvioPreviewModal,
body.light-mode .fusion-preview-dialog,
body.light-mode .um-torbox-card,
body.light-mode .um-torbox-wrap {
color-scheme: dark !important;
}
/* ===== setup.html style block 48: ultramax-light-theme-final-surfaces-v1 ===== */
/* =========================================================
FINAL LIGHT-MODE SURFACE OVERRIDES
Exact selectors, deliberately placed after all older rules.
========================================================= */
/* Step 1: More menu */
body.light-mode #step-1 #toolsMenu {
background:
radial-gradient(
circle at 90% 0%,
rgba(123,47,255,.08),
transparent 46%
),
rgba(255,255,255,.985) !important;
color: var(--text) !important;
border-color: var(--border2) !important;
box-shadow:
0 20px 48px rgba(76,29,149,.18),
inset 0 1px 0 rgba(255,255,255,.90) !important;
color-scheme: light !important;
}
body.light-mode #step-1 #toolsMenu > button,
body.light-mode #step-1 #toolsMenu > a {
background: transparent !important;
color: var(--text) !important;
-webkit-text-fill-color: var(--text) !important;
border-color: transparent !important;
}
body.light-mode #step-1 #toolsMenu > button *,
body.light-mode #step-1 #toolsMenu > a * {
color: inherit !important;
-webkit-text-fill-color: inherit !important;
}
body.light-mode #step-1 #toolsMenu > button:hover,
body.light-mode #step-1 #toolsMenu > a:hover {
background: var(--surface-soft) !important;
color: var(--violet-strong) !important;
-webkit-text-fill-color: var(--violet-strong) !important;
border-color: rgba(123,47,255,.22) !important;
}
body.light-mode #step-1 #toolsMenu hr,
body.light-mode #step-1 #toolsMenu .divider {
background: var(--divider) !important;
border-color: var(--divider) !important;
}
/* Preserve the destructive Clear action without making it unreadable. */
body.light-mode #step-1 #toolsMenu > button:last-child {
color: #b4233c !important;
-webkit-text-fill-color: #b4233c !important;
}
body.light-mode #step-1 #toolsMenu > button:last-child:hover {
background: rgba(220,38,38,.07) !important;
border-color: rgba(220,38,38,.20) !important;
}
/* Step 4 in the UI, internally #step-3: Quick Start preset panel */
body.light-mode #step-3 #presetsPanel {
background:
radial-gradient(
circle at 50% 0%,
rgba(123,47,255,.075),
transparent 50%
),
linear-gradient(
145deg,
#ffffff,
#f8f5ff
) !important;
color: var(--text) !important;
border-color: var(--border2) !important;
box-shadow:
0 18px 42px rgba(76,29,149,.14),
inset 0 1px 0 rgba(255,255,255,.95) !important;
color-scheme: light !important;
}
/* Quick Start heading */
body.light-mode #step-3 #presetsPanel .s3-label {
color: var(--text2) !important;
-webkit-text-fill-color: var(--text2) !important;
}
body.light-mode #step-3 #presetsPanel .s3-label::after {
background:
linear-gradient(
90deg,
rgba(123,47,255,.30),
var(--divider)
) !important;
}
/* Quick Start explanatory copy */
body.light-mode #step-3 #presetsPanel > p {
color: var(--text2) !important;
-webkit-text-fill-color: var(--text2) !important;
}
/* Cards remain light while poster artwork stays untouched. */
body.light-mode #step-3 #presetsPanel .s3-preset-card {
background: var(--card) !important;
color: var(--text) !important;
border-color: var(--border2) !important;
}
body.light-mode #step-3 #presetsPanel .s3-preset-body {
background: var(--card) !important;
color: var(--text) !important;
}
body.light-mode #step-3 #presetsPanel .s3-preset-name {
color: var(--text) !important;
-webkit-text-fill-color: var(--text) !important;
}
body.light-mode #step-3 #presetsPanel .s3-preset-add {
color: var(--violet-strong) !important;
-webkit-text-fill-color: var(--violet-strong) !important;
}
/* ===== setup.html style block 50: step4-density-refinement ===== */
/* Step 4 collection editor density — intentionally scoped to the collection builder. */
#step-3 #s3ViewModeGrid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
padding:10px;
}
#step-3 .s3-viewmode-card {
min-height:68px;
padding:9px 12px;
border-radius:12px;
}
#step-3 .s3-viewmode-icon { font-size:18px; margin-bottom:3px; }
#step-3 .s3-viewmode-card.active::after { top:6px; right:6px; width:18px; height:18px; }
#step-3 .coll-sticky-bar {
grid-template-columns:minmax(130px,.45fr) minmax(220px,1fr) auto auto auto !important;
gap:8px !important;
margin-bottom:12px !important;
padding:10px !important;
}
#step-3 .coll-sticky-bar .coll-search { min-height:42px; }
#step-3 .coll-sticky-bar .nav-btn { min-height:42px; padding:0 12px !important; }
#step-3 #collections-list { gap:12px; }
#step-3 .collection-card {
margin:0;
border-radius:14px;
background:linear-gradient(145deg,rgba(28,25,55,.92),rgba(17,16,35,.95));
box-shadow:0 8px 22px rgba(0,0,0,.16);
}
#step-3 .collection-summary,
#step-3 .folder-summary {
width:100%;
border:0;
color:inherit;
font:inherit;
text-align:left;
}
#step-3 .collection-card {
position:relative;
}
#step-3 .collection-drag-handle {
position:absolute;
z-index:5;
left:12px;
top:16px;
width:24px;
height:44px;
cursor:grab;
pointer-events:auto;
touch-action:none;
user-select:none;
-webkit-user-select:none;
-webkit-touch-callout:none;
}
#step-3 .collection-drag-handle:active {
cursor:grabbing;
}
#step-3 .collection-drag-spacer {
width:24px;
height:1px;
}
#step-3 .collection-summary {
min-height:76px;
display:grid;
grid-template-columns:24px 64px minmax(0,1fr) 28px;
align-items:center;
gap:10px;
padding:10px 12px;
background:transparent;
}
#step-3 .collection-thumbnail {
width:64px;
height:44px;
border-radius:8px;
object-fit:cover;
}
#step-3 .collection-summary-content,
#step-3 .folder-summary-content {
display:flex;
min-width:0;
flex-direction:column;
gap:3px;
}
#step-3 .collection-title {
display:-webkit-box;
overflow:hidden;
font-size:14px;
line-height:1.3;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
#step-3 .collection-meta { margin:0; }
#step-3 .collection-chevron,
#step-3 .folder-chevron,
#step-3 .collection-subsection-chevron {
display:grid;
width:28px;
height:28px;
place-items:center;
color:var(--muted);
font-size:22px;
transition:transform .18s ease;
}
#step-3 .collection-card.is-expanded > .collection-summary .collection-chevron,
#step-3 .folder-card.is-expanded > .folder-summary .folder-chevron,
#step-3 .collection-subsection.is-expanded .collection-subsection-chevron { transform:rotate(90deg); }
#step-3 .collection-summary:focus-visible,
#step-3 .folder-summary:focus-visible,
#step-3 .collection-subsection-header:focus-visible,
#step-3 .collection-action-button:focus-visible,
#step-3 .collection-row-remove:focus-visible,
#step-3 .tile-shape-segments button:focus-visible {
outline:2px solid var(--violet2);
outline-offset:-3px;
}
#step-3 .collection-body {
display:flex;
flex-direction:column;
gap:12px;
padding:12px;
border-top:1px solid rgba(255,255,255,.07);
}
#step-3 .collection-action-toolbar {
display:flex;
gap:8px;
}
#step-3 .collection-action-button {
min-height:42px;
flex:0 1 auto;
padding:7px 13px;
}
#step-3 .collection-action-remove {
border-color:rgba(255,75,105,.38) !important;
background:rgba(255,61,90,.10) !important;
color:#ff9aaa !important;
}
#step-3 .folder-card {
margin:0;
border-color:rgba(255,255,255,.08);
background:rgba(20,18,45,.55);
}
#step-3 .folder-summary {
min-height:62px;
display:grid;
grid-template-columns:24px 48px minmax(0,1fr) 28px;
align-items:center;
gap:9px;
padding:8px 10px;
background:rgba(255,255,255,.018);
}
#step-3 .folder-thumbnail { width:48px; height:34px; object-fit:cover; }
#step-3 .folder-body {
display:flex;
flex-direction:column;
gap:10px;
padding:10px !important;
border-top:1px solid rgba(255,255,255,.07);
background:rgba(20,18,45,.42);
}
#step-3 .folder-action-toolbar { display:flex; justify-content:flex-end; gap:8px; }
#step-3 .folder-action-toolbar .global-btn { min-height:42px; padding:6px 14px; }
#step-3 .collection-subsection {
overflow:hidden;
border:1px solid rgba(148,125,255,.15);
border-radius:10px;
background:rgba(37,31,70,.48);
}
#step-3 .collection-subsection-header {
width:100%;
min-height:52px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:8px 10px;
border:0;
background:transparent;
color:var(--text);
font:inherit;
text-align:left;
cursor:pointer;
}
#step-3 .collection-subsection-header > span:first-child { display:flex; min-width:0; flex-direction:column; gap:2px; }
#step-3 .collection-subsection-summary { overflow:hidden; color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
#step-3 .collection-subsection-body {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
padding:10px;
border-top:1px solid rgba(255,255,255,.06);
}
#step-3 .visual-control {
min-width:0;
padding:10px;
border-radius:9px;
background:rgba(255,255,255,.025);
}
#step-3 .tile-shape-control { grid-column:1/-1; }
#step-3 .visual-control-label {
display:block;
margin-bottom:7px;
color:var(--muted);
font-size:10px;
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
}
#step-3 .visual-preview {
width:100%;
height:112px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:8px;
border-radius:8px;
object-fit:cover;
background:rgba(255,255,255,.025);
color:var(--muted);
font-size:11px;
}
#step-3 .compact-file-control { display:flex; min-width:0; gap:6px; }
#step-3 .compact-file-control input,
#step-3 .collection-add-row input,
#step-3 .collection-add-row select {
min-width:0;
min-height:42px;
border:1px solid rgba(255,255,255,.10);
border-radius:8px;
background:rgba(13,12,29,.62);
color:var(--text);
padding:7px 9px;
}
#step-3 .compact-file-control input { flex:1; }
#step-3 .compact-file-control .global-btn { min-height:42px; }
#step-3 .collection-hero-backdrop { grid-column:1/-1; }
#step-3 .collection-hero-helper {
display:block;
margin:-2px 0 8px;
color:var(--muted);
font-size:10px;
line-height:1.4;
}
#step-3 .collection-hero-preview {
height:124px;
aspect-ratio:16/7;
object-fit:cover;
}
#step-3 .collection-hero-empty {
min-height:44px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:8px;
border:1px dashed rgba(255,255,255,.10);
border-radius:8px;
color:var(--muted);
font-size:11px;
}
#step-3 .collection-hero-clear {
border-color:rgba(255,75,105,.30) !important;
color:#ff9aaa !important;
}
#step-3 .focus-gif-toggle {
min-height:32px;
display:flex;
align-items:center;
gap:8px;
cursor:pointer;
}
#step-3 .focus-gif-toggle strong { margin-right:auto; font-size:12px; }
#step-3 .focus-gif-toggle span { color:var(--muted); font-size:11px; }
#step-3 .focus-gif-toggle input { width:18px; height:18px; accent-color:var(--violet); }
#step-3 .focus-gif-enabled { margin-top:8px; }
#step-3 .tile-shape-segments { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
#step-3 .tile-shape-segments button {
min-height:42px;
border:1px solid rgba(255,255,255,.10);
border-radius:8px;
background:rgba(255,255,255,.025);
color:var(--muted);
cursor:pointer;
}
#step-3 .tile-shape-segments button.is-selected {
border-color:var(--violet);
background:rgba(123,47,255,.15);
color:#d9c5ff;
}
#step-3 .collection-rows {
padding:10px;
border-radius:10px;
background:rgba(20,18,45,.44);
}
#step-3 .collection-rows-heading { display:flex; justify-content:space-between; margin-bottom:7px; color:var(--muted); font-size:11px; text-transform:uppercase; }
#step-3 .collection-row-list { display:flex; flex-direction:column; gap:5px; }
#step-3 .collection-row-item {
min-height:44px;
padding:3px 4px 3px 10px;
border:0;
border-radius:8px;
background:rgba(255,255,255,.035);
}
#step-3 .collection-row-title {
display:-webkit-box;
overflow:hidden;
line-height:1.35;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
#step-3 .collection-row-remove {
width:40px;
height:40px;
padding:0;
border:0 !important;
background:transparent !important;
color:#ff9aaa !important;
}
#step-3 .collection-rows-empty { padding:10px; color:var(--muted); font-size:11px; text-align:center; }
#step-3 .collection-add-row {
display:grid;
grid-template-columns:minmax(160px,1fr) minmax(150px,.7fr) auto;
gap:8px;
margin-top:8px;
}
#step-3 .collection-add-row .global-btn { min-height:42px; white-space:nowrap; }
@media (max-width:1100px) {
#step-3 .coll-sticky-bar { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
#step-3 .coll-sticky-bar .s3-label,
#step-3 .coll-sticky-bar .coll-search { grid-column:1/-1; }
}
@media (max-width:700px) {
#step-3 { padding-bottom:calc(132px + env(safe-area-inset-bottom)) !important; }
.um-app-mode #step-3 { padding-bottom:calc(210px + env(safe-area-inset-bottom)) !important; }
#step-3 #s3ViewModeGrid { grid-template-columns:repeat(3,minmax(0,1fr)); padding:8px; }
#step-3 .s3-viewmode-card { min-height:54px; padding:7px 4px; flex-direction:column; gap:1px; text-align:center; }
#step-3 .s3-viewmode-icon { margin:0; font-size:16px; }
#step-3 .s3-viewmode-desc { font-size:8px; }
#step-3 .coll-sticky-bar { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
#step-3 .coll-sticky-bar .s3-label,
#step-3 .coll-sticky-bar .coll-search { grid-column:1/-1; }
#step-3 .coll-sticky-bar .nav-btn.primary { grid-column:1/-1; }
#step-3 .collection-action-toolbar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
#step-3 .collection-action-button { width:100%; }
#step-3 .collection-subsection-body { grid-template-columns:1fr; }
#step-3 .tile-shape-control { grid-column:auto; }
#step-3 .collection-add-row { grid-template-columns:minmax(0,1fr) auto; }
#step-3 .collection-row-search { grid-column:1/-1; width:100%; }
#step-3 .collection-summary { min-height:76px; }
}
@media (max-width:430px) {
#step-3 .coll-sticky-bar { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
#step-3 .coll-sticky-bar .s3-label,
#step-3 .coll-sticky-bar .coll-search,
#step-3 .coll-sticky-bar .nav-btn.primary { grid-column:1/-1; }
#step-3 .collection-summary { grid-template-columns:20px 56px minmax(0,1fr) 26px; gap:8px; padding:9px 8px; }
#step-3 .collection-thumbnail { width:56px; height:42px; }
#step-3 .collection-body { padding:10px 8px; }
#step-3 .folder-summary { grid-template-columns:20px 42px minmax(0,1fr) 24px; gap:7px; padding:7px 8px; }
#step-3 .folder-thumbnail { width:42px; height:32px; }
#step-3 .compact-file-control { flex-direction:column; }
#step-3 .compact-file-control .global-btn { width:100%; }
}
/* ===== setup.html style block 51: step4-nuvio-all-profiles-hero ===== */
#step-3 .collection-add-action {
border-color:rgba(123,47,255,.30) !important;
background:rgba(123,47,255,.08) !important;
color:#d9c5ff !important;
}
#step-3 .collection-bottom-area {
display:grid !important;
grid-template-columns:minmax(0,1fr) auto !important;
align-items:center;
gap:12px;
padding-bottom:16px;
}
#step-3 .collection-bottom-actions {
display:grid;
grid-template-columns:repeat(2,minmax(150px,1fr));
gap:8px;
}
#step-3 .collection-bottom-actions .nav-btn {
min-height:44px;
margin:0;
}
.nuvio-collection-hero-preview {
min-height:112px;
display:flex;
align-items:flex-end;
margin-bottom:12px;
padding:18px;
border-radius:12px;
background-position:center;
background-size:cover;
box-shadow:inset 0 -45px 55px rgba(0,0,0,.25);
}
.nuvio-collection-hero-preview strong {
/* Overlaid on a cover-image background — stays fixed white regardless of
theme, matched by the text-shadow for legibility over artwork. */
color:#fff;
font-size:18px;
text-shadow:0 2px 12px rgba(0,0,0,.8);
}
@media(max-width:700px){
#step-3 .coll-sticky-bar {
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
#step-3 .coll-sticky-bar .s3-label,
#step-3 .coll-sticky-bar .coll-search,
#step-3 .collection-add-action { grid-column:1/-1; }
#step-3 .collection-import-action { grid-column:1/-1; width:max-content !important; }
#step-3 .collection-add-action { width:100%; min-height:44px !important; }
#step-3 .collection-bottom-area { grid-template-columns:1fr !important; }
#step-3 .collection-bottom-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
#step-3 .collection-hero-preview { height:112px; }
}
@media(max-width:360px){
#step-3 .collection-bottom-actions .nav-btn { padding:8px 6px; font-size:11px; }
}
/* ===== setup.html style block 52: step4-action-polish ===== */
#step-3 .step4-action {
min-width:0;
box-sizing:border-box;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
border-radius:10px;
font-family:inherit;
font-size:12px;
font-weight:700;
letter-spacing:normal;
line-height:1.2;
text-align:center;
}
#step-3 .step4-action-secondary {
border-color:rgba(123,47,255,.30) !important;
background:rgba(42,29,82,.72) !important;
color:#ddd2ff !important;
box-shadow:none !important;
}
#step-3 .step4-action:focus-visible {
outline:2px solid var(--violet2);
outline-offset:2px;
}
#step-3 .collection-import-action {
min-height:50px !important;
width:100%;
padding:0 16px !important;
cursor:pointer;
}
#step-3 .coll-sticky-bar {
gap:10px !important;
margin-bottom:16px !important;
}
#step-3 .collection-add-action {
min-height:50px !important;
padding:0 16px !important;
}
#step-3 .collection-bottom-area {
margin-top:18px !important;
}
#step-3 .step4-action-row {
width:min(100%,420px);
grid-template-columns:repeat(2,minmax(0,1fr));
justify-self:end;
gap:10px;
}
#step-3 .collection-bottom-actions .nav-btn {
width:100%;
min-width:0;
min-height:50px !important;
height:50px;
padding:9px 8px;
font-size:12px;
white-space:nowrap;
}
@media(max-width:700px){
#step-3 {
padding-bottom:calc(210px + env(safe-area-inset-bottom)) !important;
}
#step-3 .collection-import-action {
grid-column:1/-1;
width:100% !important;
}
#step-3 .collection-add-action {
grid-column:1/-1;
width:100%;
}
#step-3 .coll-sticky-bar {
gap:10px !important;
margin-bottom:16px !important;
}
#step-3 .collection-bottom-area {
gap:16px;
padding-bottom:18px;
}
#step-3 .step4-action-row {
width:100%;
justify-self:stretch;
}
}
@media(max-width:360px){
#step-3 .collection-bottom-actions .nav-btn {
min-height:48px !important;
height:48px;
padding:8px 4px;
font-size:10.5px;
}
}
/* ===== setup.html style block 53: collection-row-layout-fix ===== */
/* Prevent global/mobile button rules crushing collection row labels */
.folder-row-entry {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 42px !important;
align-items: center !important;
gap: 8px !important;
width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
padding: 8px 10px !important;
}
.folder-row-label {
display: block !important;
min-width: 0 !important;
width: auto !important;
color: #e8e8f0 !important;
font-size: 13px !important;
line-height: 1.35 !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
word-break: normal !important;
}
.folder-row-remove,
button.folder-row-remove,
.folder-row-entry .global-btn.folder-row-remove {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 42px !important;
min-width: 42px !important;
max-width: 42px !important;
height: 42px !important;
min-height: 42px !important;
padding: 0 !important;
margin: 0 !important;
flex: none !important;
justify-self: end !important;
align-self: center !important;
}
/* ===== setup.html style block 54: ultramax-light-theme-final-controls-v1 ===== */
/*
* Final light-mode control pass.
* Kept deliberately late in setup.html so older inline and component
* rules cannot restore dark input/select backgrounds.
*/
/* Standard form controls */
body.light-mode #step-1 input:not([type="checkbox"]):not([type="radio"]),
body.light-mode #step-1 textarea,
body.light-mode #step-1 select,
body.light-mode #step-2 input:not([type="checkbox"]):not([type="radio"]),
body.light-mode #step-2 textarea,
body.light-mode #step-2 select,
body.light-mode #step-3 input:not([type="checkbox"]):not([type="radio"]),
body.light-mode #step-3 textarea,
body.light-mode #step-3 select,
body.light-mode #step-4 input:not([type="checkbox"]):not([type="radio"]),
body.light-mode #step-4 textarea,
body.light-mode #step-4 select {
background: #fbfaff !important;
background-color: #fbfaff !important;
color: #1d1b2e !important;
border-color: #cfc4eb !important;
box-shadow: none !important;
-webkit-text-fill-color: #1d1b2e !important;
color-scheme: light !important;
}
body.light-mode input::placeholder,
body.light-mode textarea::placeholder {
color: #77708d !important;
opacity: 1 !important;
-webkit-text-fill-color: #77708d !important;
}
/* Explicit controls visible in tester screenshots */
body.light-mode #googleAiKey,
body.light-mode #rpdbKey,
body.light-mode #tpKey,
body.light-mode #fanartKey,
body.light-mode #omdbKey,
body.light-mode #betterPostersManualUrl,
body.light-mode #betterPostersStyle,
body.light-mode #metadataLanguage,
body.light-mode #animePresentationMode,
body.light-mode #maxAgeRating,
body.light-mode #debridService,
body.light-mode #debridApiKey,
body.light-mode #streamMinSizeGb,
body.light-mode #debridMaxSizeGb,
body.light-mode #streamSortMode,
body.light-mode #streamWizardUrl,
body.light-mode #streamFormatNameTemplate,
body.light-mode #streamFormatTitleTemplate {
background: #fbfaff !important;
background-color: #fbfaff !important;
color: #1d1b2e !important;
border-color: #cfc4eb !important;
-webkit-text-fill-color: #1d1b2e !important;
color-scheme: light !important;
}
/* Select option popup colours */
body.light-mode select option {
background: #ffffff !important;
color: #1d1b2e !important;
}
/* Optional-section headers */
body.light-mode .opt-subsection,
body.light-mode .optional-shell,
body.light-mode .step1-zone {
background: #ffffff !important;
border-color: #ddd4f1 !important;
}
body.light-mode .opt-subsection > summary,
body.light-mode .opt-subsection summary,
body.light-mode .optional-shell summary {
background: linear-gradient(
135deg,
rgba(123,47,255,.055),
rgba(255,61,90,.025)
) !important;
color: #28223c !important;
-webkit-text-fill-color: #28223c !important;
border-color: #e3dcf3 !important;
}
body.light-mode .opt-subsection summary *,
body.light-mode .optional-shell summary * {
color: inherit !important;
-webkit-text-fill-color: inherit !important;
}
/* Toolbar More menu */
body.light-mode #toolsMenu {
background: #ffffff !important;
border-color: #d9d0ee !important;
box-shadow: 0 16px 44px rgba(67,42,115,.18) !important;
}
body.light-mode #toolsMenu button,
body.light-mode #toolsMenu a {
color: #29243a !important;
-webkit-text-fill-color: #29243a !important;
}
body.light-mode #toolsMenu button:hover,
body.light-mode #toolsMenu a:hover {
background: rgba(123,47,255,.08) !important;
}
/* Collection Quick Start should belong to light mode */
body.light-mode #step-3 .s3-quick-start,
body.light-mode #step-3 .s3-presets-shell,
body.light-mode #step-3 .s3-preset-section,
body.light-mode #step-3 .s3-presets-container {
background: #ffffff !important;
color: #1d1b2e !important;
border-color: #d9d0ee !important;
}
body.light-mode #step-3 .s3-preset-card {
background: #ffffff !important;
color: #1d1b2e !important;
border-color: #d5caec !important;
}
body.light-mode #step-3 .s3-preset-body {
background: #ffffff !important;
}
body.light-mode #step-3 .s3-preset-name {
color: #201b31 !important;
-webkit-text-fill-color: #201b31 !important;
}
body.light-mode #step-3 .s3-preset-add {
color: #6528c8 !important;
-webkit-text-fill-color: #6528c8 !important;
}
/* Light stream configuration shell */
body.light-mode #advancedStreamBridgeBlock,
body.light-mode #advancedStreamBridgeBlock .field-block,
body.light-mode #advancedStreamBridgeBlock .stream-wizard-card,
body.light-mode #advancedStreamBridgeBlock .sf-field-row {
background: #ffffff !important;
color: #1d1b2e !important;
border-color: #ded6ef !important;
}
/*
* Intentional dark exceptions:
* - formatted stream output preview
* - Nuvio device preview
* - Fusion preview
* - TorBox promotional banner
*/
body.light-mode #streamFormatPreview,
body.light-mode .sf-preview {
background: #0d0d14 !important;
color: #eeeeF7 !important;
-webkit-text-fill-color: #eeeeF7 !important;
border-color: #343246 !important;
color-scheme: dark !important;
}
/* ===== setup.html style block 55: ultramax-light-theme-final-ui-fixes ===== */
/* ── Asset Library modal (outer wrapper in this document) ──
* The image grid/filter tabs themselves live in the /assets iframe
* document (backend-rendered, same-origin) and are re-themed at runtime
* by applyAssetLibraryLightMode() injecting a matching