*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#05040a;--bg2:#0a0713;--panel-rgb:17,13,31;--panel2-rgb:9,7,18;--line:rgba(149,104,255,.22);--line-soft:rgba(255,255,255,.075);--text:#f6f1ff;--sub:#b8adc9;--muted:#817592;--primary:#7c3cff;--secondary:#2a174f;--danger:#ff4f7d;--good:#54ffb7;--bg-image:url("assets/default-background.jpg");--bg-opacity:.38;--bg-blur:10px;--bg-dim:.58;--bg-hue:0deg;--glass-alpha:.78}
html{font-size:17px}
body{min-height:100vh;background:linear-gradient(140deg,var(--bg),var(--bg2));font-family:"Segoe UI",Montserrat,Arial,sans-serif;color:var(--text);overflow-x:hidden;font-weight:800}
body.light{--bg:#f4f0ff;--bg2:#faf8ff;--panel-rgb:255,255,255;--panel2-rgb:247,243,255;--line:rgba(90,62,180,.18);--line-soft:rgba(0,0,0,.08);--text:#151020;--sub:#5c536b;--muted:#786d86;--bg-dim:.18;--glass-alpha:.70}
.wallpaper{position:fixed;inset:-28px;background-image:var(--bg-image);background-size:cover;background-position:center;opacity:var(--bg-opacity);filter:blur(var(--bg-blur)) saturate(1.08) hue-rotate(var(--bg-hue));transform:scale(1.04);z-index:0;pointer-events:none;transition:.25s ease}
body.bg-off .wallpaper{opacity:0}.wallpaper-tint{position:fixed;inset:0;background:radial-gradient(circle at 14% 16%,color-mix(in srgb,var(--primary) 25%,transparent),transparent 34%),linear-gradient(rgba(0,0,0,var(--bg-dim)),rgba(0,0,0,var(--bg-dim)));z-index:0;pointer-events:none}
.app{position:relative;z-index:1;display:flex;min-height:100vh;padding:16px;gap:16px}
.glass{background:linear-gradient(145deg,rgba(var(--panel-rgb),var(--glass-alpha)),rgba(var(--panel2-rgb),calc(var(--glass-alpha) - .06)));border:1px solid var(--line);box-shadow:0 22px 70px rgba(0,0,0,.48),0 0 42px color-mix(in srgb,var(--primary) 18%,transparent),inset 0 1px 0 rgba(255,255,255,.045);backdrop-filter:blur(24px) saturate(145%);-webkit-backdrop-filter:blur(24px) saturate(145%)}
.glass-soft{background:rgba(var(--panel-rgb),.52);border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.04);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.sidebar{width:205px;min-width:205px;border-radius:18px;padding:14px;height:calc(100vh - 32px);position:sticky;top:16px;display:flex;flex-direction:column;gap:14px}
.brand{display:flex;align-items:center;gap:10px;padding:8px 6px 14px;border-bottom:1px solid var(--line-soft)}.brand-mark{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--secondary),var(--primary));color:white;font-weight:1000;font-size:14px;box-shadow:0 0 28px color-mix(in srgb,var(--primary) 40%,transparent)}.brand h1{font-size:17px;letter-spacing:1.1px;font-weight:1000}.brand p{font-size:9px;color:var(--muted);letter-spacing:.8px;margin-top:2px}
.tabs{display:grid;gap:9px;align-content:start}.nav{height:46px;border:1px solid var(--line-soft);border-radius:10px;background:rgba(255,255,255,.032);color:var(--sub);display:flex;align-items:center;gap:10px;padding:0 12px;cursor:pointer;transition:.16s ease;font-weight:1000}.nav b{font-size:12px;letter-spacing:.4px}.nav:hover{transform:translateY(-1px);border-color:var(--line);color:var(--text)}.nav.active{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 31%,transparent),color-mix(in srgb,var(--secondary) 38%,transparent));color:var(--text);border-color:var(--line);box-shadow:0 0 30px color-mix(in srgb,var(--primary) 18%,transparent)}
.tab-shape{width:18px;height:18px;background:var(--text);box-shadow:0 0 16px rgba(255,255,255,.28);display:block;flex:0 0 auto}.shape-dashboard{border-radius:5px;clip-path:polygon(0 0,45% 0,45% 45%,0 45%,0 0,55% 0,100% 0,100% 45%,55% 45%,55% 0,0 55%,45% 55%,45% 100%,0 100%,0 55%,55% 55%,100% 55%,100% 100%,55% 100%,55% 55%)}.shape-upload{clip-path:polygon(50% 0,88% 38%,66% 38%,66% 100%,34% 100%,34% 38%,12% 38%)}.shape-appearance{border-radius:50%;clip-path:polygon(50% 0,61% 30%,95% 35%,68% 55%,78% 90%,50% 70%,22% 90%,32% 55%,5% 35%,39% 30%)}.shape-docs{border-radius:4px;clip-path:polygon(12% 0,72% 0,88% 16%,88% 100%,12% 100%)}
.main{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px}.topbar{min-height:86px;border-radius:18px;padding:20px 24px;display:flex;align-items:center;justify-content:space-between}.topbar h2{font-size:30px;font-weight:1000;letter-spacing:.2px}.topbar p{color:var(--sub);font-size:14px;margin-top:5px}.top-actions{display:flex;gap:8px}.lang{width:46px;height:38px;border-radius:10px;border:1px solid var(--line-soft);background:rgba(255,255,255,.045);color:var(--sub);font-weight:1000;cursor:pointer}.lang.active{background:linear-gradient(135deg,var(--secondary),var(--primary));color:white;box-shadow:0 0 24px color-mix(in srgb,var(--primary) 25%,transparent)}
.page{display:none}.page.active{display:block}.dashboard-stack,.uploader-grid,.docs-stack{width:100%;display:flex;flex-direction:column;gap:16px}
.status-hero{border-radius:18px;padding:22px;display:flex;align-items:center;gap:18px;width:100%}.avatar-box{position:relative;width:82px;height:82px;flex:0 0 auto}#avatarImg,#avatarFallback{width:82px;height:82px;border-radius:18px;border:1px solid rgba(255,255,255,.13);object-fit:cover}#avatarImg{display:none}#avatarFallback{display:grid;place-items:center;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 24%,transparent),rgba(var(--panel2-rgb),.90));font-size:22px;font-weight:1000;color:var(--text)}#dot{position:absolute;right:-2px;bottom:-2px;width:18px;height:18px;border-radius:50%;background:var(--danger);border:3px solid var(--bg2)}#dot.on{background:var(--good);box-shadow:0 0 16px color-mix(in srgb,var(--good) 45%,transparent)}
.status-info{flex:1;min-width:0}.badge,.mini{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;font-size:11px;font-weight:1000;letter-spacing:.5px;background:rgba(255,255,255,.055);color:var(--sub);border:1px solid var(--line-soft)}.badge.good{color:var(--good);border-color:color-mix(in srgb,var(--good) 25%,transparent);background:color-mix(in srgb,var(--good) 8%,transparent)}.badge.bad{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 24%,transparent);background:color-mix(in srgb,var(--danger) 8%,transparent)}.status-info h3{font-size:27px;margin-top:9px;font-weight:1000}.status-info p{font-size:14px;color:var(--sub);margin-top:4px}
.logout-btn,.primary,.ghost,.danger,.input-action button{border:0;border-radius:12px;height:48px;padding:0 18px;color:white;font-weight:1000;letter-spacing:.5px;cursor:pointer;transition:.16s ease}.logout-btn,.danger{background:linear-gradient(135deg,var(--danger),#8d1738);box-shadow:0 0 24px color-mix(in srgb,var(--danger) 20%,transparent)}.primary{background:linear-gradient(135deg,var(--secondary),var(--primary));box-shadow:0 0 28px color-mix(in srgb,var(--primary) 28%,transparent)}.ghost,.input-action button{background:rgba(255,255,255,.055);border:1px solid var(--line);color:var(--text)}button:hover{transform:translateY(-1px);filter:brightness(1.08)}button:disabled{opacity:.55;cursor:not-allowed;transform:none}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;width:100%}.stat{border-radius:16px;padding:18px;text-align:left}.stat span{display:block;color:var(--sub);font-size:12px;text-transform:uppercase;letter-spacing:.8px}.stat b{font-size:38px;margin-top:4px;display:block;font-weight:1000}
.card{border-radius:18px;padding:22px}.login-card{width:100%;max-width:none;margin:0}.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.center-head{text-align:left;display:block}.card-head h2,.card h2{font-size:24px;font-weight:1000}.card-head p,.doc-sub{color:var(--sub);font-size:14px;margin-top:5px}
.single-form{display:grid;gap:13px;width:100%;max-width:none;margin:0}label{display:block;color:var(--sub);font-size:12px;text-transform:uppercase;letter-spacing:.75px;font-weight:1000;margin-bottom:8px}input,select,textarea{width:100%;border:1px solid var(--line);outline:none;border-radius:12px;background:rgba(255,255,255,.052);color:var(--text);min-height:50px;padding:0 14px;font-size:15px;font-weight:900;box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}input[type=color]{height:50px;padding:4px}input[type=range]{accent-color:var(--primary)}select.native-hidden{display:none!important}.input-action{display:grid;grid-template-columns:1fr 88px;gap:8px}.wide{width:100%;margin-top:4px}
.upload-hero{display:grid;grid-template-columns:minmax(420px,1.05fr) minmax(390px,.92fr);gap:16px;align-items:stretch}.preview-side,.status-side{min-width:0}.pick-row,.actions{display:flex;gap:10px;flex-wrap:wrap}.big-actions button{min-width:180px}.file-name{margin-top:14px;font-size:15px;font-weight:1000}.file-meta,#statusText{color:var(--sub);font-size:14px;margin-top:5px}.preview-frame{width:100%;aspect-ratio:16/9;max-height:430px;background:#030208;border-radius:18px;border:1px solid var(--line);margin:16px 0 0;display:grid;place-items:center;overflow:hidden}.preview{width:100%;height:100%;object-fit:contain;background:#030208;display:block}
.status-side{border-radius:18px;padding:18px;display:flex;flex-direction:column;justify-content:space-between}.status-side h3{font-size:20px;font-weight:1000;margin-bottom:14px}.status-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.status-grid div{padding:15px;border-radius:14px;background:rgba(255,255,255,.045);border:1px solid var(--line-soft)}.status-grid span{display:block;color:var(--sub);font-size:11px;text-transform:uppercase}.status-grid b{font-size:26px;margin-top:3px;display:block}.percent-bar{height:14px;background:rgba(255,255,255,.075);border-radius:999px;overflow:hidden;margin:18px 0 10px;border:1px solid var(--line-soft)}#progressBar{height:100%;width:0;background:linear-gradient(90deg,var(--secondary),var(--primary));box-shadow:0 0 24px color-mix(in srgb,var(--primary) 55%,transparent);transition:width .2s}
.config-panel{margin-top:18px;padding:18px;border-radius:16px;border:1px solid var(--line-soft);background:rgba(255,255,255,.034)}.config-panel h3{font-size:21px;font-weight:1000;margin-bottom:14px;text-align:left}.config-two,.appearance-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.config-column{padding:16px;border:1px solid var(--line-soft);border-radius:14px;background:rgba(255,255,255,.025)}.config-column h4{font-size:16px;margin-bottom:13px}.config-item{display:flex;flex-direction:column;gap:8px;align-items:stretch;margin-bottom:12px}.config-item label{margin:0}
.output-card{position:relative;top:0}.code{height:560px;resize:vertical;padding:16px;font-family:Consolas,ui-monospace,monospace;font-size:14px;line-height:1.55;background:rgba(4,3,10,.80);border-radius:14px}.hidden-output{display:none}
.appearance-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px}.preview-card h2{margin-bottom:16px}.theme-preview{min-height:260px;border-radius:16px;border:1px solid var(--line-soft);padding:20px;background:rgba(255,255,255,.035)}.preview-window{border-radius:16px;padding:20px;display:grid;gap:12px}.preview-line{height:16px;border-radius:999px;background:rgba(255,255,255,.12)}.preview-line.strong{width:72%;background:linear-gradient(90deg,var(--secondary),var(--primary))}
.docs-card{display:grid;gap:14px}.docs-card h3{font-size:18px}.docs-card p{color:var(--sub);line-height:1.6}.docs-card pre{background:rgba(0,0,0,.34);border:1px solid var(--line-soft);border-radius:12px;padding:14px;overflow:auto;color:var(--text)}
.custom-dropdown{position:relative}.custom-button{height:50px;width:100%;border-radius:12px;border:1px solid color-mix(in srgb,var(--primary) 34%,transparent);background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 10%,rgba(255,255,255,.035)),rgba(255,255,255,.045));color:var(--text);display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:15px;font-weight:1000;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 0 18px color-mix(in srgb,var(--primary) 9%,transparent)}.custom-button:after{content:"";width:8px;height:8px;border-right:2px solid var(--text);border-bottom:2px solid var(--text);transform:rotate(45deg);opacity:.8}.custom-options{position:absolute;left:0;right:0;top:calc(100% + 7px);max-height:220px;overflow:auto;border-radius:12px;background:linear-gradient(145deg,rgba(var(--panel-rgb),.98),color-mix(in srgb,var(--secondary) 26%,rgba(var(--panel2-rgb),.96)));border:1px solid color-mix(in srgb,var(--primary) 45%,transparent);box-shadow:0 18px 45px rgba(0,0,0,.36);padding:6px;z-index:60;display:none;backdrop-filter:blur(18px)}.custom-dropdown.open .custom-options{display:block}.custom-option{padding:12px;border-radius:9px;color:var(--sub);cursor:pointer;font-size:14px;font-weight:900}.custom-option:hover,.custom-option.active{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 25%,transparent),color-mix(in srgb,var(--secondary) 35%,transparent));color:var(--text)}
*::-webkit-scrollbar{width:8px;height:8px}*::-webkit-scrollbar-track{background:rgba(255,255,255,.03);border-radius:999px}*::-webkit-scrollbar-thumb{background:linear-gradient(var(--secondary),var(--primary));border-radius:999px}*{scrollbar-width:thin;scrollbar-color:var(--primary) rgba(255,255,255,.03)}
.toast-root{position:fixed;right:22px;bottom:22px;z-index:999;display:grid;gap:10px;pointer-events:none}.toast{min-width:280px;max-width:410px;display:flex;gap:10px;align-items:center;padding:14px;border-radius:14px;background:rgba(var(--panel-rgb),.92);border:1px solid var(--line);box-shadow:0 20px 60px rgba(0,0,0,.45);backdrop-filter:blur(18px);transform:translateX(24px);opacity:0;transition:.22s ease;pointer-events:auto}.toast.show{transform:translateX(0);opacity:1}.toast i{width:10px;height:10px;border-radius:50%;background:var(--primary);box-shadow:0 0 18px var(--primary)}.toast.success i{background:var(--good)}.toast.error i{background:var(--danger)}.toast span{font-size:13px;font-weight:900;flex:1}.toast-count{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--text);font-size:10px;font-weight:1000;background:conic-gradient(var(--primary) var(--toast-pct,100%),rgba(255,255,255,.12) 0);box-shadow:0 0 18px color-mix(in srgb,var(--primary) 28%,transparent);position:relative;flex:0 0 auto}.toast-count:after{content:"";position:absolute;inset:4px;border-radius:50%;background:rgba(var(--panel-rgb),.92)}.toast-count b{position:relative;z-index:1;font-size:10px}body.light .toast-count:after{background:rgba(255,255,255,.92)}
@media(max-width:1120px){.upload-hero,.config-two,.appearance-grid{grid-template-columns:1fr}.preview-frame{max-height:none}.status-side{min-height:unset}}
@media(max-width:900px){.app{flex-direction:column}.sidebar{width:100%;min-width:0;height:auto;position:relative;top:0}.tabs{grid-template-columns:repeat(4,1fr)}.stat-row{grid-template-columns:repeat(2,1fr)}.status-hero{align-items:flex-start}}


/* V20 Simple Appearance overrides */
.appearance-simple{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.simple-appearance-controls{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 16px;
}
.simple-appearance-controls .config-item{
  margin-bottom:0;
}
.simple-appearance-controls .slider-item{
  grid-column:1 / -1;
}
.simple-appearance-controls input[type="range"]{
  width:100%;
  min-height:34px;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}
.simple-appearance-controls input[type="hidden"]{
  display:none;
}
@media(max-width:900px){
  .simple-appearance-controls{
    grid-template-columns:1fr;
  }
  .simple-appearance-controls .slider-item{
    grid-column:auto;
  }
}


/* V21 CONFIG + ACTION FIX */
.page{
  padding-bottom:34px;
}
.card.glass{
  overflow:visible;
}
.config-panel{
  margin-bottom:18px;
}
.config-two{
  align-items:start;
}
.config-column{
  overflow:visible;
}
.config-item input,
.config-item textarea,
.config-item select,
.single-form input,
.input-action input{
  border-color:color-mix(in srgb,var(--primary) 26%,var(--line-soft));
  background:
    linear-gradient(145deg,
      color-mix(in srgb,var(--secondary) 16%,rgba(255,255,255,.035)),
      rgba(255,255,255,.045)
    );
  color:var(--text);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 0 0 color-mix(in srgb,var(--primary) 0%,transparent);
}
.config-item input:focus,
.config-item textarea:focus,
.single-form input:focus,
.input-action input:focus{
  border-color:color-mix(in srgb,var(--primary) 58%,var(--line));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 20px color-mix(in srgb,var(--primary) 12%,transparent);
}
.custom-button{
  border-color:color-mix(in srgb,var(--primary) 38%,var(--line-soft)) !important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb,var(--secondary) 22%,rgba(255,255,255,.045)),
      color-mix(in srgb,var(--primary) 8%,rgba(255,255,255,.035))
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 0 20px color-mix(in srgb,var(--primary) 10%,transparent) !important;
}
.custom-options{
  background:
    linear-gradient(145deg,
      rgba(var(--panel-rgb),.98),
      color-mix(in srgb,var(--secondary) 22%,rgba(var(--panel2-rgb),.97))
    ) !important;
  border-color:color-mix(in srgb,var(--primary) 42%,var(--line-soft)) !important;
}
.custom-option:hover,
.custom-option.active{
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--primary) 24%,transparent),
      color-mix(in srgb,var(--secondary) 32%,transparent)
    ) !important;
  color:var(--text) !important;
}
.big-actions{
  position:relative;
  z-index:5;
  margin-top:18px;
  padding:16px;
  border-radius:16px;
  border:1px solid var(--line-soft);
  background:
    linear-gradient(145deg,
      rgba(var(--panel-rgb),.42),
      rgba(var(--panel2-rgb),.34)
    );
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.big-actions button{
  min-width:190px;
  height:52px;
}
.uploader-grid > .card:first-child{
  padding-bottom:24px;
}
.output-card{
  margin-bottom:40px;
}
@media(max-width:900px){
  .big-actions button{
    flex:1 1 100%;
  }
}


/* V25 Discord Auto Redirect / V35 API Tutorial */
.discord-gate{
  position:fixed;
  inset:0;
  z-index:2000;
  display:none;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at 20% 20%, color-mix(in srgb,var(--primary) 20%,transparent), transparent 34%),
    rgba(0,0,0,.62);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}
body.discord-locked .discord-gate{display:grid}
body.discord-locked .app{
  filter:blur(10px) brightness(.6);
  pointer-events:none;
  user-select:none;
}
.discord-card{
  width:min(620px,100%);
  border-radius:22px;
  padding:32px;
  text-align:center;
}
.discord-icon{
  width:74px;
  height:74px;
  border-radius:22px;
  margin:0 auto 18px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--secondary),var(--primary));
  color:white;
  font-size:22px;
  font-weight:1000;
  box-shadow:0 0 42px color-mix(in srgb,var(--primary) 40%,transparent);
}
.discord-card h1{
  font-size:32px;
  font-weight:1000;
  margin-bottom:10px;
}
.discord-card p{
  color:var(--sub);
  line-height:1.55;
  font-size:15px;
  margin-bottom:18px;
}
.discord-user-box{
  margin:12px 0 18px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.045);
  color:var(--text);
  font-weight:1000;
}
.discord-actions{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.discord-actions button{
  min-width:170px;
}
.discord-card small{
  display:block;
  color:var(--muted);
  margin-top:16px;
  font-weight:800;
}

/* V25: no Discord gate UI; users are redirected directly to Discord OAuth or invite. */


/* V35 API Key Tutorial Panel */
.api-help{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px;
  border-radius:14px;
  margin:-2px 0 2px;
}
.api-help-copy b{
  display:block;
  font-size:15px;
  font-weight:1000;
  color:var(--text);
}
.api-help-copy p{
  margin-top:4px;
  color:var(--sub);
  font-size:13px;
  line-height:1.45;
}
.api-help .ghost{
  min-width:160px;
  height:44px;
  flex:0 0 auto;
}
.field-note{
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
  margin-top:-2px;
  font-weight:800;
}
.link-button{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border-radius:12px;
  padding:0 18px;
  font-weight:1000;
  letter-spacing:.5px;
}
.guide-backdrop{
  position:fixed;
  inset:0;
  z-index:3000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:
    radial-gradient(circle at 20% 18%, color-mix(in srgb,var(--primary) 28%,transparent), transparent 34%),
    rgba(0,0,0,.70);
  backdrop-filter:blur(18px) saturate(145%);
  -webkit-backdrop-filter:blur(18px) saturate(145%);
}
.guide-backdrop.open{
  display:flex;
}
body.guide-open{
  overflow:hidden;
}
.guide-window{
  width:min(1100px,100%);
  max-height:92vh;
  overflow:hidden;
  border-radius:22px;
  display:flex;
  flex-direction:column;
}
.guide-head{
  padding:24px 26px 18px;
  display:flex;
  justify-content:space-between;
  gap:18px;
  border-bottom:1px solid var(--line-soft);
}
.guide-kicker{
  display:inline-flex;
  min-height:26px;
  align-items:center;
  padding:0 10px;
  border-radius:999px;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.8px;
  color:var(--good);
  border:1px solid color-mix(in srgb,var(--good) 22%,transparent);
  background:color-mix(in srgb,var(--good) 8%,transparent);
}
.guide-head h2{
  font-size:30px;
  font-weight:1000;
  margin-top:10px;
}
.guide-head p{
  color:var(--sub);
  margin-top:6px;
  line-height:1.5;
}
.guide-close{
  width:46px;
  height:46px;
  border:1px solid var(--line);
  border-radius:13px;
  background:rgba(255,255,255,.055);
  color:var(--text);
  font-size:30px;
  line-height:1;
  font-weight:900;
  cursor:pointer;
  flex:0 0 auto;
}
.guide-body{
  padding:22px 26px 26px;
  overflow:auto;
}
.guide-alert{
  border:1px solid color-mix(in srgb,var(--danger) 28%,var(--line-soft));
  background:color-mix(in srgb,var(--danger) 8%,rgba(255,255,255,.035));
  border-radius:16px;
  padding:14px 16px;
  margin-bottom:16px;
}
.guide-alert b{
  color:var(--text);
  font-size:15px;
  font-weight:1000;
}
.guide-alert p{
  color:var(--sub);
  margin-top:4px;
  line-height:1.55;
  font-size:13px;
}
.guide-grid{
  display:grid;
  grid-template-columns:minmax(330px,.9fr) minmax(420px,1.1fr);
  gap:16px;
  align-items:start;
}
.guide-steps{
  display:grid;
  gap:11px;
}
.guide-step{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:12px;
  padding:14px;
  border-radius:16px;
  border:1px solid var(--line-soft);
  background:rgba(255,255,255,.035);
}
.guide-step span{
  width:42px;
  height:42px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--secondary),var(--primary));
  color:white;
  font-weight:1000;
  box-shadow:0 0 22px color-mix(in srgb,var(--primary) 22%,transparent);
}
.guide-step b{
  font-size:15px;
  font-weight:1000;
  color:var(--text);
}
.guide-step p{
  margin-top:4px;
  color:var(--sub);
  line-height:1.55;
  font-size:13px;
}
.guide-shot{
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.24);
  padding:12px;
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}
.guide-shot img{
  width:100%;
  display:block;
  border-radius:12px;
  border:1px solid var(--line-soft);
}
.guide-shot figcaption{
  color:var(--muted);
  font-size:12px;
  margin-top:10px;
  font-weight:900;
}
.guide-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.api-docs-card .actions{
  margin-top:12px;
}
@media(max-width:980px){
  .guide-grid{
    grid-template-columns:1fr;
  }
  .api-help{
    align-items:stretch;
    flex-direction:column;
  }
  .api-help .ghost{
    width:100%;
  }
  .guide-head{
    padding:20px;
  }
  .guide-body{
    padding:18px 20px 22px;
  }
}


/* V36 Brand + Tutorial readability fix */
.brand-logo{
  width:58px;
  height:58px;
  object-fit:contain;
  display:block;
  border-radius:14px;
  background:#000;
  box-shadow:0 0 26px color-mix(in srgb,var(--primary) 28%,transparent);
  border:1px solid rgba(255,255,255,.14);
  flex:0 0 auto;
}
.brand{
  gap:14px;
}
.brand-title,
.logo-title,
.app-title{
  letter-spacing:.2px;
}
.brand-subtitle,
.logo-subtitle,
.app-subtitle{
  text-transform:uppercase;
  letter-spacing:1.2px;
}
.guide-window{
  width:min(1180px,calc(100vw - 44px));
}
.guide-grid.guide-grid-stacked{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}
.guide-grid-stacked .guide-steps{
  grid-template-columns:repeat(2,minmax(280px,1fr));
  gap:12px;
}
.guide-grid-stacked .guide-shot-large{
  width:100%;
  max-width:none;
}
.guide-shot-large{
  padding:16px;
}
.guide-shot-large img{
  width:100%;
  max-height:none;
  object-fit:contain;
  image-rendering:auto;
}
.guide-shot-large figcaption{
  font-size:13px;
}
@media(max-width:900px){
  .guide-grid-stacked .guide-steps{
    grid-template-columns:1fr;
  }
  .brand-logo{
    width:50px;
    height:50px;
  }
}

/* V37 browser tab logo/title polish */
.brand-logo{
  background:#000;
  object-fit:contain;
}


/* V38 Transparent XS logo + theme glow */
.brand-logo{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  object-fit:contain !important;
  box-shadow:none !important;
  filter:
    drop-shadow(0 0 8px color-mix(in srgb,var(--primary) 70%, transparent))
    drop-shadow(0 0 18px color-mix(in srgb,var(--secondary) 50%, transparent))
    drop-shadow(0 0 32px color-mix(in srgb,var(--primary) 28%, transparent));
  transition:filter .25s ease, transform .25s ease;
}
.brand:hover .brand-logo{
  transform:translateY(-1px) scale(1.03);
  filter:
    drop-shadow(0 0 12px color-mix(in srgb,var(--primary) 85%, transparent))
    drop-shadow(0 0 26px color-mix(in srgb,var(--secondary) 60%, transparent))
    drop-shadow(0 0 44px color-mix(in srgb,var(--primary) 34%, transparent));
}
.guide-actions .primary.link-button,
.api-docs-card .primary.link-button{
  white-space:nowrap;
}


/* V39 remove manual user id + web edition polish */
.brand p{
  text-transform:uppercase;
  letter-spacing:1.4px;
}


/* V40 privacy + right-side collision + corner fix */
*{
  box-sizing:border-box;
}
input,
textarea,
select,
button{
  max-width:100%;
}
input#groupId{
  color:var(--text) !important;
  background:rgba(255,255,255,.075) !important;
}
.input-action,
.actions,
.row-actions,
.top-actions,
.card-actions,
.toolbar,
.form-actions{
  min-width:0;
}
.input-action{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
}
.input-action input{
  min-width:0;
}
.panel,
.card,
.glass,
.glass-soft,
.dropdown-panel,
.select-panel,
.custom-options,
.menu,
.popover,
.guide-window{
  border-radius:18px;
  overflow:hidden;
}
.custom-select,
.select-wrap,
.dropdown,
.fake-select{
  min-width:0;
  max-width:100%;
}
.custom-select button,
.select-wrap button,
.dropdown button,
.fake-select button{
  width:100%;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  border-radius:14px;
}
.custom-options,
.dropdown-panel,
.select-panel,
.menu,
.popover{
  right:0;
  left:auto;
  max-width:min(520px,calc(100vw - 32px));
  border:1px solid var(--line);
  box-shadow:0 22px 70px rgba(0,0,0,.45);
}
button{
  white-space:nowrap;
}
@media(max-width:900px){
  .input-action{
    grid-template-columns:1fr;
  }
  .actions,
  .row-actions,
  .top-actions,
  .card-actions,
  .toolbar,
  .form-actions{
    flex-wrap:wrap;
  }
}


/* V41 tutorial click/layer fix */
.api-help,
.api-docs-card,
.api-help *,
.api-docs-card *{
  pointer-events:auto !important;
}
#openApiGuideBtn,
#openApiGuideBtnDocs,
.open-api-guide-trigger{
  position:relative;
  z-index:25;
  cursor:pointer;
  pointer-events:auto !important;
}
.guide-backdrop{
  z-index:99999 !important;
}
.guide-window{
  border-radius:22px !important;
  overflow:hidden !important;
}
.guide-close,
.close-api-guide-trigger{
  cursor:pointer;
  pointer-events:auto !important;
}


/* V43 restore UI + clean dropdown theme */
.config-item:has(#manualGroupId),
#manualGroupId{
  display:none !important;
}
select,
.custom-select > button,
.select-wrap > button,
.dropdown > button,
.fake-select > button{
  width:100% !important;
  min-height:52px;
  border-radius:15px !important;
  border:1px solid color-mix(in srgb,var(--primary) 38%,var(--line)) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--surface) 88%,var(--primary) 7%),
      color-mix(in srgb,var(--surface-2) 86%,var(--secondary) 7%)) !important;
  color:var(--text) !important;
  font-weight:900;
}
select option{
  background:#171021;
  color:#f6f0ff;
}
.dropdown-panel,
.custom-options,
.select-panel,
.menu,
.popover{
  width:100% !important;
  min-width:100% !important;
  left:0 !important;
  right:auto !important;
  border-radius:16px !important;
  overflow:hidden !important;
  border:1px solid color-mix(in srgb,var(--primary) 36%,var(--line)) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--surface) 92%,var(--primary) 6%),
      color-mix(in srgb,var(--surface-2) 90%,var(--secondary) 5%)) !important;
  box-shadow:
    0 22px 70px rgba(0,0,0,.48),
    0 0 28px color-mix(in srgb,var(--primary) 16%,transparent) !important;
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
}
.input-action,
.actions,
.big-actions,
.card-actions,
.toolbar{
  min-width:0;
  flex-wrap:wrap;
}
button{
  white-space:nowrap;
}
.panel,
.card,
.glass,
.glass-soft,
.guide-window{
  border-radius:18px;
  overflow:hidden;
}


/* V44 dropdown scroll fix */
.custom-dropdown{
  position:relative;
  width:100%;
  min-width:0;
}
.custom-dropdown.open{
  z-index:5000;
}
.custom-dropdown.open .custom-options{
  display:block !important;
}
.custom-options,
.dropdown-panel,
.select-panel,
.menu,
.popover{
  overflow-x:hidden !important;
  overflow-y:auto !important;
  max-height:min(380px, 46vh) !important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--primary) 80%,#ffffff 8%) color-mix(in srgb,var(--surface) 78%,#000 18%);
  padding:7px !important;
}
.custom-options::-webkit-scrollbar,
.dropdown-panel::-webkit-scrollbar,
.select-panel::-webkit-scrollbar,
.menu::-webkit-scrollbar,
.popover::-webkit-scrollbar{
  width:10px;
}
.custom-options::-webkit-scrollbar-track,
.dropdown-panel::-webkit-scrollbar-track,
.select-panel::-webkit-scrollbar-track,
.menu::-webkit-scrollbar-track,
.popover::-webkit-scrollbar-track{
  background:color-mix(in srgb,var(--surface) 82%,#000 18%);
  border-radius:999px;
}
.custom-options::-webkit-scrollbar-thumb,
.dropdown-panel::-webkit-scrollbar-thumb,
.select-panel::-webkit-scrollbar-thumb,
.menu::-webkit-scrollbar-thumb,
.popover::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--primary),var(--secondary));
  border-radius:999px;
  border:2px solid color-mix(in srgb,var(--surface) 84%,#000 16%);
}
.custom-option{
  min-height:42px;
  display:flex;
  align-items:center;
  gap:8px;
  white-space:normal;
  word-break:break-word;
}
.custom-option:first-child{
  border-top-left-radius:11px;
  border-top-right-radius:11px;
}
.custom-option:last-child{
  border-bottom-left-radius:11px;
  border-bottom-right-radius:11px;
}


/* V45 finishing: every big background follows the selected theme */
:root{
  --theme-bg-1: color-mix(in srgb, var(--primary) 22%, #05030b 78%);
  --theme-bg-2: color-mix(in srgb, var(--secondary) 18%, #05030b 82%);
  --theme-bg-3: color-mix(in srgb, var(--primary) 9%, #05030b 91%);
  --theme-card-1: color-mix(in srgb, var(--surface) 86%, var(--primary) 8%);
  --theme-card-2: color-mix(in srgb, var(--surface-2) 86%, var(--secondary) 7%);
  --theme-panel-border: color-mix(in srgb, var(--primary) 36%, var(--line));
}

html,
body{
  background:
    radial-gradient(circle at 18% 8%, color-mix(in srgb,var(--primary) 28%,transparent), transparent 34%),
    radial-gradient(circle at 86% 10%, color-mix(in srgb,var(--secondary) 20%,transparent), transparent 36%),
    radial-gradient(circle at 60% 92%, color-mix(in srgb,var(--primary) 15%,transparent), transparent 40%),
    linear-gradient(135deg, var(--theme-bg-1), #05030b 45%, var(--theme-bg-2)) !important;
  background-attachment:fixed !important;
}

/* kill fixed red/green/yellow glow leftovers */
body::before,
body::after,
.app::before,
.app::after,
.shell::before,
.shell::after,
.main::before,
.main::after,
.dashboard::before,
.dashboard::after{
  pointer-events:none;
}

/* Main surfaces */
.app,
.shell,
.layout,
.main,
.dashboard,
.content,
.page,
.workspace,
.upload-panel,
.settings-panel,
.status-panel,
.preview-panel,
.result-panel,
.output-panel,
.docs-card,
.card,
.glass,
.glass-soft,
.panel{
  border-color:var(--theme-panel-border) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--theme-card-1) 88%, transparent),
      color-mix(in srgb,var(--theme-card-2) 78%, transparent)) !important;
  box-shadow:
    0 24px 90px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.045),
    0 0 42px color-mix(in srgb,var(--primary) 10%, transparent) !important;
}

/* Upload status/stat boxes from screenshot */
.stat,
.status-stat,
.progress-card,
.upload-status,
.uploadStatus,
#uploadStatus,
.status-grid > *,
.stats-grid > *,
.metric,
.metric-card{
  border-color:color-mix(in srgb,var(--primary) 28%,var(--line)) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--surface) 90%, var(--primary) 7%),
      color-mix(in srgb,var(--surface-2) 86%, var(--secondary) 6%)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 0 22px color-mix(in srgb,var(--primary) 7%,transparent) !important;
}

/* Video/preview area should not be plain gray */
.video-preview,
.preview,
.preview-box,
.preview-card,
.media-preview,
.player-preview,
.video-box,
video{
  background:
    radial-gradient(circle at 50% 28%, color-mix(in srgb,var(--primary) 16%,transparent), transparent 45%),
    linear-gradient(135deg,
      color-mix(in srgb,var(--surface) 88%, #000 12%),
      color-mix(in srgb,var(--surface-2) 86%, var(--secondary) 8%)) !important;
  border-color:color-mix(in srgb,var(--primary) 30%,var(--line)) !important;
}

/* Progress bars */
.progress,
.progress-bar,
.bar,
.track,
.progress-track{
  background:color-mix(in srgb,var(--surface-2) 78%,#000 18%) !important;
  border-color:color-mix(in srgb,var(--primary) 28%,var(--line)) !important;
}
.progress > *,
.progress-bar > *,
.bar > *,
.fill,
.progress-fill{
  background:linear-gradient(90deg,var(--primary),var(--secondary)) !important;
  box-shadow:0 0 22px color-mix(in srgb,var(--primary) 38%,transparent) !important;
}

/* Status pill */
.badge,
.pill,
.status-pill,
.state-pill{
  background:color-mix(in srgb,var(--primary) 12%, var(--surface) 88%) !important;
  border-color:color-mix(in srgb,var(--primary) 32%,var(--line)) !important;
  color:var(--text) !important;
}

/* Right native browser-looking scrollbar also theme-ish */
*{
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--primary) 88%,#fff 6%) color-mix(in srgb,var(--surface) 80%,#000 20%);
}
*::-webkit-scrollbar{
  width:10px;
  height:10px;
}
*::-webkit-scrollbar-track{
  background:color-mix(in srgb,var(--surface) 82%,#000 18%);
}
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--primary),var(--secondary));
  border-radius:999px;
  border:2px solid color-mix(in srgb,var(--surface) 86%,#000 14%);
}

/* Avoid ugly white/gray browser autofill backgrounds */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color:var(--text) !important;
  box-shadow:0 0 0 1000px color-mix(in srgb,var(--surface) 86%,var(--primary) 8%) inset !important;
  transition:background-color 9999s ease-in-out 0s;
}


/* V46 final upload pipeline + UI polish */

/* Native video controls must not be clipped by card/layout */
.preview-side{
  position:relative;
  z-index:3;
  overflow:visible !important;
}
.status-side{
  position:relative;
  z-index:2;
}
.preview-frame{
  overflow:visible !important;
  border-radius:18px !important;
  padding:0 !important;
  margin-bottom:22px !important;
  background:
    radial-gradient(circle at 50% 25%, color-mix(in srgb,var(--primary) 15%,transparent), transparent 46%),
    color-mix(in srgb,#000 88%,var(--primary) 6%) !important;
}
.preview-frame video,
video.preview,
#videoPreview{
  position:relative;
  z-index:4;
  border-radius:16px !important;
  background:#000 !important;
  outline:1px solid color-mix(in srgb,var(--primary) 34%,var(--line));
  box-shadow:
    0 18px 55px rgba(0,0,0,.38),
    0 0 28px color-mix(in srgb,var(--primary) 12%,transparent);
}
.upload-hero{
  align-items:start !important;
  overflow:visible !important;
}
.uploader-grid,
.card.glass,
.config-panel,
.config-column{
  overflow:visible !important;
}

/* Dropdown background follows Appearance blur/glass/theme, not fixed opaque color */
.custom-options,
.dropdown-panel,
.select-panel,
.menu,
.popover{
  background:
    linear-gradient(145deg,
      rgba(var(--panel-rgb), calc(var(--glass-alpha) + .16)),
      color-mix(in srgb,var(--secondary) 24%,rgba(var(--panel2-rgb), calc(var(--glass-alpha) + .10)))) !important;
  backdrop-filter:blur(calc(var(--bg-blur) + 14px)) saturate(155%) !important;
  -webkit-backdrop-filter:blur(calc(var(--bg-blur) + 14px)) saturate(155%) !important;
  border-color:color-mix(in srgb,var(--primary) 46%,var(--line)) !important;
  box-shadow:
    0 24px 80px rgba(0,0,0,.52),
    0 0 34px color-mix(in srgb,var(--primary) 18%,transparent),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.custom-button{
  background:
    linear-gradient(145deg,
      rgba(var(--panel-rgb), calc(var(--glass-alpha) - .10)),
      color-mix(in srgb,var(--primary) 8%,rgba(var(--panel2-rgb), calc(var(--glass-alpha) - .12)))) !important;
  backdrop-filter:blur(calc(var(--bg-blur) + 6px)) saturate(145%);
  -webkit-backdrop-filter:blur(calc(var(--bg-blur) + 6px)) saturate(145%);
}

/* Keep upload status readable but theme-matched */
.status-side,
.status-grid div{
  background:
    linear-gradient(135deg,
      color-mix(in srgb,rgba(var(--panel-rgb),var(--glass-alpha)) 88%,var(--primary) 7%),
      color-mix(in srgb,rgba(var(--panel2-rgb),var(--glass-alpha)) 86%,var(--secondary) 8%)) !important;
}
.percent-bar{
  background:color-mix(in srgb,rgba(var(--panel2-rgb),.82) 84%,#000 16%) !important;
}
#progressBar{
  background:linear-gradient(90deg,var(--secondary),var(--primary)) !important;
}


/* V47 upload timing polish */
.status-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.status-grid div{
  min-width:0;
}
#sideElapsed,
#sideEta{
  font-variant-numeric:tabular-nums;
}
.toast{
  max-width:min(560px,calc(100vw - 32px));
}
.toast b,
.toast p{
  overflow-wrap:anywhere;
}


/* V48 Client Heavy Mode note */
.client-heavy-note{
  margin:0 0 14px;
  padding:13px 14px;
  border-radius:15px;
  border:1px solid color-mix(in srgb,var(--primary) 32%,var(--line));
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--primary) 10%,transparent),
      color-mix(in srgb,var(--secondary) 7%,transparent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.client-heavy-note b{
  display:block;
  color:var(--text);
  font-size:14px;
  font-weight:1000;
}
.client-heavy-note p{
  margin-top:5px;
  color:var(--sub);
  font-size:12px;
  line-height:1.45;
}


/* V49 remove broken note panel + engine selector */
.client-heavy-note{
  display:none !important;
}
.engine-config .field-note{
  margin-top:8px;
  color:var(--sub);
  font-size:12px;
  line-height:1.45;
  overflow-wrap:anywhere;
}
#engineMode{
  width:100%;
}


/* V50 focus keepalive + universal dropdown theme fix */
.focus-note{
  color:color-mix(in srgb,var(--good) 80%,var(--sub)) !important;
}
body:not(.light) select,
body:not(.light) option{
  background:#10091b !important;
  color:#f8f2ff !important;
}
select,
.custom-button,
.custom-select > button,
.select-wrap > button,
.dropdown > button,
.fake-select > button,
[data-dropdown] > button{
  width:100% !important;
  min-height:52px !important;
  border-radius:15px !important;
  border:1px solid color-mix(in srgb,var(--primary) 42%,var(--line)) !important;
  background:
    linear-gradient(145deg,
      rgba(var(--panel-rgb), calc(var(--glass-alpha) + .02)),
      color-mix(in srgb,var(--primary) 9%,rgba(var(--panel2-rgb), calc(var(--glass-alpha) + .01)))) !important;
  color:var(--text) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 0 20px color-mix(in srgb,var(--primary) 9%,transparent) !important;
  backdrop-filter:blur(calc(var(--bg-blur) + 6px)) saturate(145%) !important;
  -webkit-backdrop-filter:blur(calc(var(--bg-blur) + 6px)) saturate(145%) !important;
}
.custom-dropdown,
.custom-select,
.select-wrap,
.dropdown,
.fake-select,
[data-dropdown]{
  position:relative !important;
  width:100% !important;
}
.custom-options,
.dropdown-panel,
.select-panel,
.menu,
.popover{
  width:100% !important;
  min-width:100% !important;
  max-height:min(380px, 46vh) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  left:0 !important;
  right:auto !important;
  border-radius:16px !important;
  padding:7px !important;
  border:1px solid color-mix(in srgb,var(--primary) 45%,var(--line)) !important;
  background:
    linear-gradient(145deg,
      rgba(var(--panel-rgb), calc(var(--glass-alpha) + .22)),
      color-mix(in srgb,var(--secondary) 20%,rgba(var(--panel2-rgb), calc(var(--glass-alpha) + .16)))) !important;
  backdrop-filter:blur(calc(var(--bg-blur) + 14px)) saturate(160%) !important;
  -webkit-backdrop-filter:blur(calc(var(--bg-blur) + 14px)) saturate(160%) !important;
  box-shadow:
    0 26px 84px rgba(0,0,0,.55),
    0 0 34px color-mix(in srgb,var(--primary) 18%,transparent),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
  scrollbar-width:thin;
  scrollbar-color:var(--primary) color-mix(in srgb,var(--surface) 84%,#000 16%);
}
.custom-option,
.dropdown-panel button,
.select-panel button,
.menu button,
.popover button{
  border-radius:11px !important;
  color:var(--text) !important;
  background:transparent !important;
}
.custom-option:hover,
.dropdown-panel button:hover,
.select-panel button:hover,
.menu button:hover,
.popover button:hover{
  background:color-mix(in srgb,var(--primary) 18%,transparent) !important;
}


/* V51 TRUE DROPDOWN THEME FIX
   No fixed purple/black option colors. Every dropdown state follows Appearance theme variables. */
:root{
  --dd-bg-a: color-mix(in srgb, rgba(var(--panel-rgb), var(--glass-alpha)) 86%, var(--primary) 10%);
  --dd-bg-b: color-mix(in srgb, rgba(var(--panel2-rgb), var(--glass-alpha)) 84%, var(--secondary) 12%);
  --dd-bg-open-a: color-mix(in srgb, rgba(var(--panel-rgb), calc(var(--glass-alpha) + .18)) 82%, var(--primary) 14%);
  --dd-bg-open-b: color-mix(in srgb, rgba(var(--panel2-rgb), calc(var(--glass-alpha) + .16)) 82%, var(--secondary) 16%);
  --dd-border: color-mix(in srgb, var(--primary) 46%, var(--line));
  --dd-border-focus: color-mix(in srgb, var(--primary) 70%, #ffffff 5%);
  --dd-hover: color-mix(in srgb, var(--primary) 18%, transparent);
  --dd-active-a: color-mix(in srgb, var(--primary) 34%, transparent);
  --dd-active-b: color-mix(in srgb, var(--secondary) 28%, transparent);
  --dd-shadow: color-mix(in srgb, var(--primary) 22%, transparent);
}

body.light{
  --dd-bg-a: color-mix(in srgb, rgba(var(--panel-rgb), var(--glass-alpha)) 88%, var(--primary) 6%);
  --dd-bg-b: color-mix(in srgb, rgba(var(--panel2-rgb), var(--glass-alpha)) 88%, var(--secondary) 5%);
  --dd-bg-open-a: color-mix(in srgb, rgba(var(--panel-rgb), calc(var(--glass-alpha) + .18)) 88%, var(--primary) 8%);
  --dd-bg-open-b: color-mix(in srgb, rgba(var(--panel2-rgb), calc(var(--glass-alpha) + .16)) 88%, var(--secondary) 6%);
  --dd-hover: color-mix(in srgb, var(--primary) 12%, transparent);
  --dd-active-a: color-mix(in srgb, var(--primary) 22%, transparent);
  --dd-active-b: color-mix(in srgb, var(--secondary) 14%, transparent);
}

select,
.custom-button,
.custom-select > button,
.select-wrap > button,
.dropdown > button,
.fake-select > button,
[data-dropdown] > button,
[data-theme-button="true"]{
  appearance:none !important;
  -webkit-appearance:none !important;
  width:100% !important;
  min-height:52px !important;
  border-radius:15px !important;
  border:1px solid var(--dd-border) !important;
  background:
    linear-gradient(145deg, var(--dd-bg-a), var(--dd-bg-b)) !important;
  color:var(--text) !important;
  font-weight:1000 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 18px color-mix(in srgb,var(--primary) 10%,transparent) !important;
  backdrop-filter:blur(calc(var(--bg-blur) + 6px)) saturate(145%) !important;
  -webkit-backdrop-filter:blur(calc(var(--bg-blur) + 6px)) saturate(145%) !important;
}

select:focus,
.custom-button:focus,
.custom-button:focus-visible,
.custom-dropdown.open .custom-button,
[data-theme-button="true"]:focus,
[data-theme-button="true"]:focus-visible{
  outline:none !important;
  border-color:var(--dd-border-focus) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb,var(--primary) 20%,transparent),
    0 0 28px var(--dd-shadow),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.custom-button::after,
[data-theme-button="true"]::after{
  border-color:var(--text) !important;
  opacity:.86 !important;
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--primary) 44%,transparent));
}

.custom-dropdown,
.custom-select,
.select-wrap,
.dropdown,
.fake-select,
[data-dropdown],
[data-theme-dropdown="true"]{
  position:relative !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}

.custom-dropdown.open,
[data-theme-dropdown="true"].open{
  z-index:7000 !important;
}

.custom-options,
.dropdown-panel,
.select-panel,
.menu,
.popover,
[data-theme-menu="true"]{
  width:100% !important;
  min-width:100% !important;
  max-height:min(390px, 48vh) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  left:0 !important;
  right:auto !important;
  top:calc(100% + 8px) !important;
  border-radius:16px !important;
  padding:7px !important;
  border:1px solid var(--dd-border) !important;
  background:
    linear-gradient(145deg, var(--dd-bg-open-a), var(--dd-bg-open-b)) !important;
  color:var(--text) !important;
  backdrop-filter:blur(calc(var(--bg-blur) + 16px)) saturate(165%) !important;
  -webkit-backdrop-filter:blur(calc(var(--bg-blur) + 16px)) saturate(165%) !important;
  box-shadow:
    0 26px 90px rgba(0,0,0,.55),
    0 0 34px var(--dd-shadow),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--primary) color-mix(in srgb, var(--dd-bg-open-b) 88%, #000 12%);
}

.custom-options::-webkit-scrollbar,
.dropdown-panel::-webkit-scrollbar,
.select-panel::-webkit-scrollbar,
.menu::-webkit-scrollbar,
.popover::-webkit-scrollbar{
  width:10px;
}

.custom-options::-webkit-scrollbar-track,
.dropdown-panel::-webkit-scrollbar-track,
.select-panel::-webkit-scrollbar-track,
.menu::-webkit-scrollbar-track,
.popover::-webkit-scrollbar-track{
  background:color-mix(in srgb,var(--dd-bg-open-b) 86%,#000 14%);
  border-radius:999px;
}

.custom-options::-webkit-scrollbar-thumb,
.dropdown-panel::-webkit-scrollbar-thumb,
.select-panel::-webkit-scrollbar-thumb,
.menu::-webkit-scrollbar-thumb,
.popover::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--primary),var(--secondary)) !important;
  border-radius:999px;
  border:2px solid color-mix(in srgb,var(--dd-bg-open-b) 84%,#000 16%);
}

.custom-option,
.dropdown-panel button,
.select-panel button,
.menu button,
.popover button{
  min-height:42px !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:10px 12px !important;
  border-radius:11px !important;
  border:1px solid transparent !important;
  color:var(--sub) !important;
  background:transparent !important;
  font-weight:950 !important;
  white-space:normal !important;
  word-break:break-word !important;
}

.custom-option:hover,
.custom-option:focus,
.dropdown-panel button:hover,
.select-panel button:hover,
.menu button:hover,
.popover button:hover{
  color:var(--text) !important;
  border-color:color-mix(in srgb,var(--primary) 24%,transparent) !important;
  background:var(--dd-hover) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045) !important;
}

.custom-option.active,
.custom-option[aria-selected="true"]{
  color:var(--text) !important;
  border-color:color-mix(in srgb,var(--primary) 46%,transparent) !important;
  background:
    linear-gradient(135deg, var(--dd-active-a), var(--dd-active-b)) !important;
  box-shadow:
    0 0 18px color-mix(in srgb,var(--primary) 16%,transparent),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* Native select fallback option colors: use CSS variables instead of hardcoded purple.
   Browser dropdown popups have limited styling support, but this removes old hardcoded colors. */
select option{
  background-color:rgb(var(--panel-rgb)) !important;
  color:var(--text) !important;
}

body.light select option{
  background-color:rgb(var(--panel-rgb)) !important;
  color:var(--text) !important;
}

/* Remove old hardcoded-looking gray/white autofill from dropdown-ish controls too */
select:-webkit-autofill{
  -webkit-text-fill-color:var(--text) !important;
  box-shadow:0 0 0 1000px var(--dd-bg-a) inset !important;
}


/* V52 TRUE THEME SURFACE FIX
   Fixes old hardcoded dark-blue/purple panels by deriving every surface from active theme. */
:root{
  --surface:var(--theme-surface, #120d20);
  --surface-2:var(--theme-surface-2, #0d0a16);
  --panel-solid:rgb(var(--panel-rgb));
  --panel2-solid:rgb(var(--panel2-rgb));
  --surface-glass-a:rgba(var(--panel-rgb), var(--glass-alpha));
  --surface-glass-b:rgba(var(--panel2-rgb), calc(var(--glass-alpha) - .05));
  --theme-ring:color-mix(in srgb,var(--primary) 42%,var(--line));
  --theme-soft:color-mix(in srgb,var(--primary) 10%,transparent);
  --theme-soft-2:color-mix(in srgb,var(--secondary) 13%,transparent);
}

html,
body{
  background:
    radial-gradient(circle at 18% 8%, color-mix(in srgb,var(--primary) 30%,transparent), transparent 34%),
    radial-gradient(circle at 86% 12%, color-mix(in srgb,var(--secondary) 24%,transparent), transparent 38%),
    linear-gradient(135deg,var(--bg),#050308 48%,var(--bg2)) !important;
}

/* Theme overlay should never inject stale blue/purple */
.wallpaper-tint{
  background:
    radial-gradient(circle at 14% 16%,color-mix(in srgb,var(--primary) 26%,transparent),transparent 34%),
    radial-gradient(circle at 86% 84%,color-mix(in srgb,var(--secondary) 20%,transparent),transparent 38%),
    linear-gradient(rgba(0,0,0,var(--bg-dim)),rgba(0,0,0,var(--bg-dim))) !important;
}

/* Main layout and panels */
.glass,
.glass-soft,
.sidebar,
.topbar,
.card,
.panel,
.page-card,
.dashboard-stack > *,
.status-hero,
.login-card,
.upload-card,
.output-card,
.docs-card,
.config-panel,
.config-column,
.status-side,
.preview-side,
.appearance-card,
.preview-card,
.theme-preview,
.main,
.toast{
  border-color:var(--theme-ring) !important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb,var(--panel-solid) 86%,var(--primary) 7%),
      color-mix(in srgb,var(--panel2-solid) 86%,var(--secondary) 8%)) !important;
  box-shadow:
    0 22px 70px rgba(0,0,0,.46),
    0 0 42px color-mix(in srgb,var(--primary) 13%,transparent),
    inset 0 1px 0 rgba(255,255,255,.045) !important;
  backdrop-filter:blur(calc(var(--bg-blur) + 14px)) saturate(150%) !important;
  -webkit-backdrop-filter:blur(calc(var(--bg-blur) + 14px)) saturate(150%) !important;
}

body.light .glass,
body.light .glass-soft,
body.light .sidebar,
body.light .topbar,
body.light .card,
body.light .panel,
body.light .config-panel,
body.light .config-column,
body.light .status-side,
body.light .preview-side{
  box-shadow:
    0 18px 55px rgba(26,18,54,.13),
    0 0 32px color-mix(in srgb,var(--primary) 10%,transparent),
    inset 0 1px 0 rgba(255,255,255,.65) !important;
}

/* Upload status/progress boxes from screenshots */
.status-grid div,
.stat,
.metric,
.metric-card,
.status-stat,
.progress-card,
.upload-status,
.uploadStatus,
#uploadStatus,
.stats-grid > *,
.status-grid > *{
  border-color:color-mix(in srgb,var(--primary) 36%,var(--line)) !important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb,var(--surface) 84%,var(--primary) 10%),
      color-mix(in srgb,var(--surface-2) 84%,var(--secondary) 10%)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 0 24px color-mix(in srgb,var(--primary) 9%,transparent) !important;
}

/* Input/select/dropdown closed state */
input,
textarea,
select,
.custom-button,
.custom-select > button,
.select-wrap > button,
.dropdown > button,
.fake-select > button,
[data-theme-button="true"]{
  border-color:color-mix(in srgb,var(--primary) 42%,var(--line)) !important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb,var(--surface) 86%,var(--primary) 9%),
      color-mix(in srgb,var(--surface-2) 86%,var(--secondary) 9%)) !important;
  color:var(--text) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 0 16px color-mix(in srgb,var(--primary) 8%,transparent) !important;
}

/* Remove gray fixed preview/video area */
.preview-frame,
.video-preview,
.preview,
.preview-box,
.preview-card,
.media-preview,
.player-preview,
.video-box,
#videoPreview,
video{
  border-color:color-mix(in srgb,var(--primary) 36%,var(--line)) !important;
  background:
    radial-gradient(circle at 50% 28%,color-mix(in srgb,var(--primary) 13%,transparent),transparent 46%),
    linear-gradient(145deg,
      color-mix(in srgb,var(--surface) 82%,#000 18%),
      color-mix(in srgb,var(--surface-2) 82%,var(--secondary) 10%)) !important;
}

/* Progress and tracks */
.percent-bar,
.progress,
.progress-bar,
.bar,
.track,
.progress-track{
  border-color:color-mix(in srgb,var(--primary) 32%,var(--line)) !important;
  background:
    linear-gradient(90deg,
      color-mix(in srgb,var(--surface-2) 86%,#000 14%),
      color-mix(in srgb,var(--surface) 82%,var(--secondary) 8%)) !important;
}
#progressBar,
.progress > *,
.progress-bar > *,
.bar > *,
.fill,
.progress-fill{
  background:linear-gradient(90deg,var(--secondary),var(--primary)) !important;
  box-shadow:0 0 24px color-mix(in srgb,var(--primary) 46%,transparent) !important;
}

/* Dropdown open state: no hardcoded blue/purple residue */
.custom-options,
.dropdown-panel,
.select-panel,
.menu,
.popover,
[data-theme-menu="true"]{
  border-color:color-mix(in srgb,var(--primary) 48%,var(--line)) !important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb,var(--panel-solid) 78%,var(--primary) 14%),
      color-mix(in srgb,var(--panel2-solid) 78%,var(--secondary) 16%)) !important;
  color:var(--text) !important;
  box-shadow:
    0 26px 90px rgba(0,0,0,.55),
    0 0 36px color-mix(in srgb,var(--primary) 20%,transparent),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.custom-option,
.dropdown-panel button,
.select-panel button,
.menu button,
.popover button{
  color:var(--sub) !important;
  background:transparent !important;
}
.custom-option:hover,
.custom-option:focus,
.dropdown-panel button:hover,
.select-panel button:hover,
.menu button:hover,
.popover button:hover{
  color:var(--text) !important;
  border-color:color-mix(in srgb,var(--primary) 28%,transparent) !important;
  background:color-mix(in srgb,var(--primary) 20%,transparent) !important;
}
.custom-option.active,
.custom-option[aria-selected="true"]{
  color:var(--text) !important;
  border-color:color-mix(in srgb,var(--primary) 50%,transparent) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--primary) 34%,transparent),
      color-mix(in srgb,var(--secondary) 30%,transparent)) !important;
}

/* Native option fallback */
select option{
  background-color:var(--surface) !important;
  color:var(--text) !important;
}

/* Sidebar/nav should follow theme too */
.nav,
.lang,
.ghost,
.primary,
button{
  border-color:color-mix(in srgb,var(--primary) 36%,var(--line)) !important;
}
.nav.active,
.nav:hover,
.lang.active,
.primary{
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--primary) 44%,transparent),
      color-mix(in srgb,var(--secondary) 34%,transparent)) !important;
  color:#fff !important;
  box-shadow:0 0 26px color-mix(in srgb,var(--primary) 22%,transparent) !important;
}
.ghost{
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--surface) 78%,var(--primary) 8%),
      color-mix(in srgb,var(--surface-2) 78%,var(--secondary) 8%)) !important;
}

/* Browser autofill and number spinner area */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color:var(--text) !important;
  box-shadow:0 0 0 1000px color-mix(in srgb,var(--surface) 86%,var(--primary) 8%) inset !important;
}
input[type="number"]{
  color-scheme:dark;
}
body.light input[type="number"]{
  color-scheme:light;
}

/* Scrollbars */
*{
  scrollbar-color:var(--primary) color-mix(in srgb,var(--surface-2) 82%,#000 18%);
}
*::-webkit-scrollbar-track{
  background:color-mix(in srgb,var(--surface-2) 82%,#000 18%) !important;
}
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--primary),var(--secondary)) !important;
}


/* V53 Discord direct authorize flow */
.toast-root{
  z-index:120000 !important;
}