*{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 */
.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. */