:root{
  --bg:#12100d;
  --bg2:#181511;
  --s1:#1d1a15;
  --s2:#242019;
  --card:#1f1a14;
  --border:#30281d;
  --border-h:#463826;
  --a:#d7934a;
  --a2:#a96a2a;
  --a-soft:#ebc38c;
  --a-glow:rgba(215,147,74,.14);
  --g:#9fd18f;
  --r:#ef8e8e;
  --t1:#f2eee7;
  --t2:#d1c2ad;
  --t3:#a3937c;
  --rs:12px;
  --f:'DM Sans',system-ui,sans-serif;
  --m:'JetBrains Mono',monospace;
  --fd:'Space Grotesk',system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:
    radial-gradient(circle at 10% 12%, rgba(215,147,74,.11), transparent 18%),
    radial-gradient(circle at 84% 20%, rgba(118,92,54,.10), transparent 20%),
    linear-gradient(180deg, #12100d 0%, #0d0b09 100%);
  color:var(--t1);
  font-family:var(--f);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  min-height:100dvh;
  padding:
    max(0px, env(safe-area-inset-top))
    max(0px, env(safe-area-inset-right))
    max(0px, env(safe-area-inset-bottom))
    max(0px, env(safe-area-inset-left));
}
code{
  font-family:var(--m);
  font-size:.88em;
  color:var(--a-soft);
  background:rgba(153,194,122,.10);
  padding:2px 6px;
  border-radius:4px;
}

.app-shell{
  height:100%;
  display:flex;
  flex-direction:column;
  position:relative;
  min-height:100dvh;
  width:100%;
  max-width:100%;
}
.app-shell::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.55), transparent 78%);
}
.topbar{
  height:56px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 18px;
  background:rgba(18,16,13,.96);
  border-bottom:1px solid var(--border);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.02);
  backdrop-filter:blur(12px);
}
.topbar__left,.topbar__right{
  display:flex;
  align-items:center;
  gap:12px;
}
.topbar__left{
  flex:1;
  justify-content:center;
}
.topbar__right{
  flex-shrink:0;
}
.topbar__socials{
  display:flex;
  align-items:center;
  gap:8px;
}
.topbar__logo-link{
  display:flex;
  align-items:center;
  text-decoration:none;
  height:38px;
}
.topbar__logo-img{
  height:32px;
  width:auto;
  max-width:120px;
  object-fit:contain;
  filter:drop-shadow(0 6px 12px rgba(215,147,74,.12));
}
.topbar__brand{
  font:700 14px var(--fd);
  color:#e3c79f;
  letter-spacing:.04em;
}
.topbar__brand-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:14px;
  padding-left:14px;
  border-left:1px solid var(--border);
  position:relative;
}
.topbar__brand-wrap::before{
  content:"";
  position:absolute;
  left:-1px;
  top:8px;
  bottom:8px;
  width:1px;
  background:linear-gradient(180deg, transparent, rgba(215,147,74,.45), transparent);
}
.topbar__badge{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(215,147,74,.24);
  background:rgba(215,147,74,.10);
  color:var(--a-soft);
  font:600 11px var(--m);
  text-transform:uppercase;
  letter-spacing:.10em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.lang-toggle{
  height:36px;
  padding:0 12px;
  border-radius:8px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  color:var(--t2);
}

.tabs{display:flex;gap:4px}
.tabs__btn{
  height:38px;
  padding:0 14px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#b59f82;
  cursor:pointer;
  font:600 13px var(--f);
  transition:background-color .18s ease,color .18s ease,transform .18s ease;
}
.tabs__btn:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  color:#e1cfb3;
}
.tabs__btn.active{
  background:linear-gradient(180deg, rgba(215,147,74,.12), rgba(255,255,255,.02));
  color:var(--t1);
  box-shadow:inset 0 0 0 1px rgba(215,147,74,.10);
  position:relative;
}
.tabs__btn.active::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:6px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(215,147,74,0), rgba(235,195,140,.9), rgba(215,147,74,0));
}
.tabs__btn:active,.btn-gen:active,.btn-sm:active,.vc-btn:active{transform:translateY(1px)}

.page{display:none;flex:1;flex-direction:column;overflow:hidden}
.page--active{display:flex}
.layout{flex:1;display:flex;overflow:hidden;min-height:0}
.layout--center{
  justify-content:center;
  align-items:flex-start;
  padding:28px;
  overflow:auto;
}

.panel-left,.panel-right{
  background:var(--bg2);
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  min-width:0;
  position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
.panel-left{
  width:clamp(260px,19vw,330px);
  border-right:1px solid var(--border);
}
.panel-right{
  width:clamp(280px,20vw,360px);
  border-left:1px solid var(--border);
}
.panel-center{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.012);
}
.panel-center--empty{
  justify-content:center;
  align-items:center;
  padding:32px;
}
.panel-left__header{
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)),
    var(--bg);
  color:#dbc8a8;
  font:700 12px var(--m);
  text-transform:uppercase;
  letter-spacing:.08em;
  position:relative;
}
.panel-left__header::after{
  content:"";
  position:absolute;
  left:16px;
  bottom:0;
  width:54px;
  height:1px;
  background:linear-gradient(90deg, rgba(215,147,74,.45), transparent);
}
.panel-left__body{
  flex:1;
  overflow:auto;
  padding:14px;
}
.panel-right__section{
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  position:relative;
}
.panel-right__section--grow{
  flex:1;
  overflow:auto;
}
.panel-right__header{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  color:#dbc8a8;
  font:700 12px var(--m);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.header-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.header-icon{
  width:14px;
  height:14px;
  color:var(--a-soft);
  flex-shrink:0;
}
.header-trash{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  margin-left:6px;
  border-radius:8px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.024), rgba(255,255,255,.01)), var(--s2);
  color:var(--t3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
  cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.header-trash svg{
  width:13px;
  height:13px;
}
.header-trash:hover{
  color:#f0d3ab;
  border-color:rgba(215,147,74,.28);
  background:linear-gradient(180deg, rgba(215,147,74,.10), rgba(255,255,255,.01)), var(--s1);
}
.header-trash:active{
  transform:translateY(1px);
}
.panel-right__header::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg, rgba(215,147,74,.28), transparent 72%);
}
.panel-right__header small{
  color:var(--t3);
  font:600 10px var(--m);
  padding:3px 6px;
  border-radius:4px;
  background:rgba(215,147,74,.08);
  border:1px solid rgba(215,147,74,.08);
}

.settings-bar{
  padding:14px 18px 12px;
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.015);
  position:relative;
}
.settings-bar::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:-1px;
  height:1px;
  background:linear-gradient(90deg, rgba(215,147,74,.24), transparent 70%);
}
.settings-grid{
  display:flex;
  gap:12px;
  align-items:flex-end;
  min-width:0;
}
.field{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.field--narrow{flex:.45}
.field label{
  color:#d8c5a5;
  font:600 12px var(--m);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.field input,.field__fake{
  height:40px;
  padding:0 12px;
  border-radius:var(--rs);
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), var(--s1);
  color:var(--t1);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025), 0 0 0 1px rgba(0,0,0,.04);
}
.field__fake{display:flex;align-items:center}

.preview-strip{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:8px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), var(--s1);
  border:1px solid var(--border);
  font:500 13px var(--m);
}
.preview-strip__id{color:var(--a-soft)}
.preview-strip__model{color:var(--t2)}
.preview-strip i{width:14px;height:1px;background:var(--border-h)}

.preview-strip__id,
.preview-strip__model{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.drop-area{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:var(--rs);
  border:1px dashed var(--border-h);
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.008)),
    rgba(255,255,255,.01);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.drop-area input{position:absolute;inset:0;opacity:0}
.drop-area--compact{margin-top:10px}
.drop-area--block{margin-top:18px;min-height:132px}
.drop-area--secondary{
  margin-top:8px;
  border-style:solid;
}
.drop-area__icon{
  width:38px;
  height:38px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:rgba(215,147,74,.10);
  border:1px solid rgba(215,147,74,.14);
  color:var(--a-soft);
  font:700 22px var(--fd);
  flex-shrink:0;
}
.drop-area__icon--small{width:30px;height:30px;font-size:18px}
.drop-area__text{margin:0;color:#f1dfc4;font-weight:700}
.drop-area__hint{margin:2px 0 0;color:#c7b28f;font-size:12px}

.variant-combo{
  margin-top:10px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(215,147,74,.18);
  background:
    linear-gradient(180deg, rgba(215,147,74,.08), rgba(255,255,255,.012)),
    var(--s1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 12px 24px rgba(0,0,0,.08);
}
.variant-combo__head{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.variant-combo__title{
  margin:0;
  color:#f2e2c7;
  font:700 13px var(--f);
  letter-spacing:.01em;
}
.variant-combo__copy{
  margin:3px 0 0;
  color:#ceb899;
  font-size:12px;
  line-height:1.55;
}
.variant-combo__actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:12px;
}
.variant-combo__btn{
  height:34px;
  border-radius:10px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)), var(--s2);
  color:#e1cfb3;
  font:700 12px var(--f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.variant-combo__btn:hover{
  border-color:rgba(215,147,74,.28);
  color:#f3e1c6;
}
.variant-combo__btn:active{
  transform:translateY(1px);
}
.variant-combo__btn--primary{
  background:linear-gradient(180deg, rgba(215,147,74,.16), rgba(255,255,255,.015)), var(--s2);
  color:#f4e4ca;
  border-color:rgba(215,147,74,.24);
}

.file-list,.variant-list,.meta-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.file-item,.variant-row,.meta-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.008)), var(--s1);
  min-width:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018), 0 8px 18px rgba(0,0,0,.06);
}
.file-item--active{
  border-color:rgba(215,147,74,.22);
  background:rgba(215,147,74,.08);
}
.file-item__type{
  width:44px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(255,255,255,.04);
  color:#d6c19b;
  font:700 11px var(--m);
}
.file-item__body,.variant-row>div{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.file-item__body strong,.variant-row strong{font-size:13px}
.file-item__body span,.variant-row span{font-size:12px;color:#c6b291}
.file-item__body strong,
.file-item__body span,
.variant-row strong,
.variant-row span,
.icon-box strong,
.icon-box p,
.hint-box,
.msg{
  overflow-wrap:anywhere;
}
.variant-row{justify-content:space-between}
.variant-row input{accent-color:var(--a)}
.variant-list--dense .variant-row{justify-content:flex-start}
.variant-list--dense .variant-row > div{
  width:100%;
}

.info-box,.hint-box,.empty-state,.center-card{
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), var(--s1);
  border-radius:14px;
  box-shadow:0 12px 24px rgba(0,0,0,.08);
}
.info-box{
  margin-top:12px;
  padding:12px;
}
.info-box svg,
.notice-box svg{
  width:18px;
  height:18px;
  flex-shrink:0;
}
.info-box__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
  color:#ddcaab;
  font:700 12px var(--m);
  text-transform:uppercase;
}
.info-box__head b{color:var(--g)}
.chip-row{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  padding:6px 8px;
  border-radius:999px;
  border:1px solid rgba(215,147,74,.16);
  background:rgba(215,147,74,.08);
  color:var(--a-soft);
  font-size:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.hint-box{
  padding:10px 12px;
  color:#e0ccb0;
  line-height:1.55;
}

.viewer{
  flex:1;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 20%, rgba(215,147,74,.08), transparent 18%),
    radial-gradient(circle at 78% 84%, rgba(255,184,107,.04), transparent 18%),
    linear-gradient(180deg, #12100d 0%, #0c0a08 100%);
}
.viewer::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 16%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.008), rgba(255,255,255,.008) 1px, transparent 1px, transparent 3px);
  opacity:.45;
}
.viewer__stats{
  position:absolute;
  top:14px;
  left:14px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  color:#bca88c;
  font:500 12px var(--m);
}
.viewer__stats b{color:var(--a-soft)}
.viewer__stats span{
  padding:6px 9px;
  border-radius:999px;
  background:rgba(14,13,11,.62);
  border:1px solid rgba(255,255,255,.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.viewer__placeholder{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  isolation:isolate;
}
.viewer__placeholder::before{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(215,147,74,.09), transparent 62%);
  filter:blur(18px);
  z-index:-1;
}
.viewer__mesh{
  width:210px;
  height:210px;
  border-radius:24px;
  background:linear-gradient(135deg, rgba(215,147,74,.28), rgba(255,255,255,.05));
  transform:perspective(900px) rotateX(55deg) rotateZ(42deg);
  box-shadow:0 30px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08);
}
.viewer__placeholder p{margin:0;color:#bca88c}
.viewer__controls{
  position:absolute;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  display:flex;
  gap:4px;
  padding:5px;
  border-radius:10px;
  background:rgba(10,13,11,.86);
  border:1px solid var(--border);
  box-shadow:0 20px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.03);
}
.vc-btn{
  height:34px;
  padding:0 12px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#ccb998;
  font-weight:600;
}
.vc-btn--active{
  background:linear-gradient(180deg, rgba(215,147,74,.16), rgba(255,255,255,.02));
  color:var(--a-soft);
  box-shadow:inset 0 0 0 1px rgba(215,147,74,.10);
}
.vc-sep{width:1px;background:var(--border);margin:4px 0}

.icon-box{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--s1);
}
.icon-box__thumb{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(215,147,74,.10);
  color:var(--a-soft);
  font:700 16px var(--fd);
}
.icon-box p{margin:3px 0 0;color:var(--t3);font-size:12px}
.social-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:0;
  height:36px;
  padding:0 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.01)), var(--s2);
  color:#d2c0a1;
  text-decoration:none;
  font:600 12px var(--f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.social-pill--top{
  height:32px;
  padding:0 10px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.01)), var(--s1);
}
.social-pill svg{
  width:14px;
  height:14px;
  flex-shrink:0;
  color:var(--a-soft);
}
.social-pill:hover{
  color:var(--t1);
  border-color:rgba(215,147,74,.24);
  background:linear-gradient(180deg, rgba(215,147,74,.10), rgba(255,255,255,.01)), var(--s1);
}
.social-pill:active{
  transform:translateY(1px);
}

.btn-sm,.btn-gen,.lang-toggle{
  font-family:var(--f);
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.btn-sm{
  flex:1;
  height:34px;
  border-radius:10px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)), var(--s2);
  color:var(--t2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.btn-sm:hover,.lang-toggle:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)), var(--s1);
  color:var(--t1);
}

.meta-row{justify-content:space-between}
.meta-row span{color:var(--t2);font-size:12px}
.meta-row b{font:700 14px var(--fd);color:#f0d3ab}
.toggle-pill{
  min-width:46px;
  height:28px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--border-h);
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)), var(--s2);
  color:var(--t2);
  font:700 11px var(--m);
  text-transform:uppercase;
  letter-spacing:.06em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  cursor:pointer;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.toggle-pill:hover{
  color:var(--t1);
  border-color:rgba(215,147,74,.30);
}
.toggle-pill:active{
  transform:translateY(1px);
}
.toggle-pill--on{
  border-color:rgba(215,147,74,.34);
  background:linear-gradient(180deg, rgba(215,147,74,.22), rgba(255,255,255,.02));
  color:#f7dfba;
  box-shadow:inset 0 0 0 1px rgba(215,147,74,.10), 0 6px 18px rgba(215,147,74,.12);
}

.bottom-bar{
  padding:12px 18px;
  display:flex;
  align-items:center;
  gap:12px;
  border-top:1px solid var(--border);
  background:var(--bg2);
}
.btn-gen{
  height:44px;
  padding:0 20px;
  border:0;
  border-radius:12px;
  background:linear-gradient(135deg, var(--a), var(--a2));
  color:#1d1308;
  font-weight:700;
  box-shadow:0 16px 34px rgba(215,147,74,.18), inset 0 1px 0 rgba(255,255,255,.16);
}
.btn-gen:hover{
  filter:brightness(1.03);
}
.btn-gen--secondary{
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)), var(--s2);
  color:var(--t1);
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.msg{
  flex:1;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--s1);
  color:var(--t2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.msg--ok{
  border-color:rgba(143,209,165,.18);
  background:rgba(143,209,165,.08);
  color:var(--g);
}
.msg--ok::before{
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  margin-right:10px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 10px rgba(159,209,143,.45);
}
.aside-note{
  margin-top:12px;
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:10px 12px;
  border-radius:10px;
  border:1px dashed rgba(215,147,74,.18);
  background:rgba(215,147,74,.05);
  color:#c2af91;
  font-size:12px;
  line-height:1.55;
}
.aside-note__icon{
  width:14px;
  height:14px;
  color:var(--a-soft);
  flex-shrink:0;
  margin-top:1px;
}

.empty-state{
  max-width:640px;
  padding:24px;
}
.empty-state__eyebrow{
  margin:0 0 8px;
  color:var(--a-soft);
  font:600 12px var(--m);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.empty-state h2{
  margin:0 0 10px;
  font:700 34px/1 var(--fd);
  letter-spacing:-.04em;
}
.empty-state p{
  margin:0;
  color:var(--t2);
  line-height:1.7;
}

.center-card{
  width:min(760px, 100%);
  padding:22px;
  box-shadow:0 28px 48px rgba(0,0,0,.18);
}
.center-card--wide{width:min(920px,100%)}
.center-card__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
  color:var(--t2);
  font:700 12px var(--m);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.bottom-actions{margin-top:18px}
.tutorial-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.tutorial-step{
  display:flex;
  gap:12px;
  padding:14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--s2);
}
.tutorial-step b{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(215,147,74,.12);
  color:var(--a-soft);
  flex-shrink:0;
}

.topbar__left,
.settings-grid,
.preview-strip,
.viewer__stats,
.viewer__controls,
.bottom-bar,
.panel-right__header,
.center-card__header{
  min-width:0;
}

.topbar__brand,
.tabs__btn,
.panel-left__header,
.panel-right__header,
.field label,
.empty-state h2{
  text-wrap:balance;
}

.hint-box,
.empty-state p,
.tutorial-step p{
  line-height:1.65;
}

@media (min-width:1280px){
  body{
    padding:8px;
    overflow:hidden;
  }
  .app-shell{
    min-height:calc(100dvh - 16px);
    border:1px solid rgba(255,255,255,.035);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 28px 60px rgba(0,0,0,.18);
  }
  .panel-right{
    width:clamp(300px,22vw,390px);
  }
  .panel-left{
    width:clamp(270px,20vw,340px);
  }
}

@media (min-width:1280px) and (max-width:1599px){
  body{
    font-size:11.5px;
    padding:4px;
  }
  .app-shell{
    min-height:calc(100dvh - 8px);
    border-radius:12px;
  }
  .topbar{
    min-height:44px;
    padding:0 10px;
    gap:8px;
  }
  .topbar__left,.topbar__right{
    gap:8px;
  }
  .topbar__logo-img{
    height:24px;
  }
  .topbar__brand{
    font-size:12px;
  }
  .topbar__badge{
    padding:4px 7px;
    font-size:9px;
  }
  .lang-toggle{
    height:28px;
    padding:0 8px;
    font-size:11px;
  }
  .tabs__btn{
    height:28px;
    padding:0 9px;
    font-size:11px;
  }
  .panel-left{
    width:212px;
  }
  .panel-right{
    width:250px;
  }
  .panel-left__header,
  .panel-right__header,
  .field label{
    font-size:9px;
  }
  .panel-left__body,
  .panel-right__section{
    padding:8px 10px;
  }
  .settings-bar{
    padding:8px 10px 7px;
  }
  .field input,
  .field__fake{
    height:30px;
    font-size:11px;
  }
  .preview-strip{
    margin-top:6px;
    padding:5px 8px;
    font-size:10px;
  }
  .drop-area,
  .variant-combo,
  .icon-box,
  .info-box,
  .hint-box,
  .file-item,
  .variant-row,
  .meta-row{
    padding:7px 8px;
  }
  .drop-area__icon{
    width:28px;
    height:28px;
    font-size:16px;
  }
  .drop-area__icon--small{
    width:22px;
    height:22px;
    font-size:13px;
  }
  .viewer{
    min-height:460px;
  }
  .viewer__mesh{
    width:148px;
    height:148px;
  }
  .viewer__stats{
    top:8px;
    left:8px;
    gap:6px;
  }
  .viewer__stats span{
    padding:4px 7px;
    font-size:10px;
  }
  .viewer__controls{
    bottom:10px;
    padding:3px;
  }
  .vc-btn{
    height:26px;
    padding:0 8px;
    font-size:10px;
  }
  .toggle-pill{
    min-width:38px;
    height:22px;
    padding:0 8px;
    font-size:9px;
  }
  .bottom-bar{
    padding:8px 10px;
    gap:8px;
  }
  .btn-gen{
    height:32px;
    padding:0 12px;
    font-size:11px;
  }
  .msg{
    padding:7px 8px;
    font-size:11px;
  }
}
.tutorial-step strong{display:block;margin-bottom:4px}
.tutorial-step p{margin:0;color:var(--t2);line-height:1.6}

@media(max-width:900px){
  html,body{overflow:auto}
  body{
    padding:
      max(0px, env(safe-area-inset-top))
      max(0px, env(safe-area-inset-right))
      max(16px, env(safe-area-inset-bottom))
      max(0px, env(safe-area-inset-left));
  }
  .layout{flex-direction:column;overflow:visible}
  .panel-left,.panel-right{width:100%;border:0;border-bottom:1px solid var(--border)}
  .panel-right{border-top:1px solid var(--border)}
  .panel-left__body,.panel-right__section,.settings-bar{padding:12px}
  .panel-right__section--grow{overflow:visible}
  .bottom-bar,.settings-grid,.tutorial-list{flex-direction:column;grid-template-columns:1fr}
  .topbar{height:auto;padding:12px;align-items:flex-start;flex-direction:column}
  .topbar__left{width:100%;flex-wrap:wrap;justify-content:flex-start}
  .topbar__right{width:100%;justify-content:space-between;flex-wrap:wrap}
  .topbar__brand-wrap{margin-left:0;padding-left:0;border-left:0}
  .topbar__brand{display:none}
  .topbar__socials{order:3;width:100%;justify-content:flex-start}
  .tabs{width:100%;padding-bottom:2px}
  .tabs__btn{height:36px;padding:0 12px}
  .viewer{min-height:320px}
  .viewer__controls{
    width:calc(100% - 24px);
    justify-content:flex-start;
    overflow:auto hidden;
    padding:6px;
  }
  .bottom-bar{
    position:sticky;
    bottom:0;
    z-index:10;
  }
  .btn-gen,.btn-gen--secondary,.msg{width:100%}
}

@media (min-width:1360px){
  body{font-size:13px}
  .topbar{height:52px;padding:0 14px}
  .tabs__btn{height:34px;padding:0 12px;font-size:12px}
  .panel-left{width:clamp(250px,18vw,320px)}
  .panel-right{width:clamp(280px,19vw,350px)}
  .panel-left__header,
  .panel-right__header,
  .field label{font-size:11px}
  .panel-left__body,
  .panel-right__section{padding:12px}
  .settings-bar{padding:12px 14px 10px}
  .field input,
  .field__fake{height:36px;font-size:13px}
  .preview-strip{padding:7px 10px;font-size:12px}
  .drop-area{padding:10px 12px}
  .btn-sm{height:32px;font-size:12px}
  .btn-gen{height:40px}
}

@media(max-width:640px){
  body{font-size:13px}
  .topbar{gap:10px}
  .topbar__logo-img{height:28px}
  .topbar__badge{padding:5px 9px;font-size:10px}
  .lang-toggle{height:32px;padding:0 10px}
  .tabs__btn{font-size:12px}
  .panel-left__header,
  .panel-right__header,
  .field label,
  .center-card__header{font-size:11px}
  .drop-area,
  .variant-combo,
  .icon-box,
  .info-box,
  .hint-box,
  .file-item,
  .variant-row,
  .meta-row{padding:10px}
  .viewer{min-height:280px}
  .viewer__mesh{width:156px;height:156px;border-radius:18px}
  .viewer__stats{top:10px;left:10px;gap:8px}
  .viewer__stats span{padding:5px 8px;font-size:11px}
  .toggle-pill{min-width:42px;height:26px;padding:0 10px}
  .variant-combo__actions,.tutorial-list{grid-template-columns:1fr}
}

@media (min-width:1500px){
  .topbar{padding:0 18px}
  .viewer{min-height:760px}
}

@media (min-width:1650px) and (min-height:900px){
  body{
    font-size:14px;
    padding:8px;
    overflow:hidden;
  }
  .app-shell{
    min-height:calc(100dvh - 16px);
    border-radius:18px;
  }
  .topbar{
    min-height:58px;
    padding:0 18px;
  }
  .panel-left{
    width:clamp(248px,15vw,300px);
  }
  .panel-right{
    width:clamp(278px,16vw,340px);
  }
  .settings-bar{
    padding:14px 18px 12px;
  }
  .field input,
  .field__fake{
    height:42px;
  }
  .viewer{
    min-height:820px;
  }
  .viewer__mesh{
    width:228px;
    height:228px;
  }
  .bottom-bar{
    padding:12px 18px;
  }
}

@media (min-width:3200px){
  body{font-size:15px;padding:24px;overflow:auto}
  .app-shell{
    max-width:2280px;
    min-height:calc(100dvh - 48px);
    margin:0 auto;
    border:1px solid rgba(255,255,255,.04);
    border-radius:20px;
    box-shadow:0 40px 90px rgba(0,0,0,.24);
  }
  .topbar{min-height:64px}
  .tabs__btn{height:42px;padding:0 18px;font-size:14px}
  .panel-left{width:360px}
  .panel-right{width:400px}
  .settings-bar{padding:18px 22px 16px}
  .field input,.field__fake{height:46px;font-size:14px}
  .viewer{min-height:860px}
  .viewer__mesh{width:260px;height:260px}
  .btn-gen{height:48px;padding:0 24px}
  .toggle-pill{height:30px}
}

@media (min-width:1280px) and (max-width:1700px) and (max-height:1100px){
  body{
    padding:0;
    overflow:hidden;
  }
  .app-shell{
    width:100%;
    min-height:100dvh;
    border-radius:0;
    border-left:0;
    border-right:0;
    box-shadow:none;
  }
}

@media (orientation:landscape) and (max-width:900px){
  .viewer{min-height:260px}
}

/* Actual app aliases */
body{
  display:flex;
  flex-direction:column;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.55), transparent 78%);
}
.page.active{display:flex}
.topbar,.page.active,.site-footer{width:100%}

.topbar__sep,.topbar__spacer{display:none}
.lang-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
}
.lang-toggle__opt{font:600 12px var(--f);transition:color .18s ease}
.lang-toggle__opt.active{color:var(--t1)}
.lang-toggle__sep{color:var(--t3)}

.settings-bar__fields{
  display:flex;
  gap:12px;
  align-items:flex-end;
  min-width:0;
}
.sf{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.sf--narrow{flex:.45}
.sf__label{
  display:block;
  color:#d8c5a5;
  font:600 12px var(--m);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.sf__label small{font-size:10px}
.sf__input,.sf__select,.model-fmt,.adv-opt__num{
  height:40px;
  width:100%;
  min-width:0;
  padding:0 12px;
  border-radius:var(--rs);
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), var(--s1);
  color:var(--t1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025), 0 0 0 1px rgba(0,0,0,.04);
  outline:none;
}
.sf__input::placeholder{color:var(--t3)}
.sf__select{
  appearance:none;
  cursor:pointer;
  padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23a3937c' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
}
.sf__input:focus,.sf__select:focus,.adv-opt__num:focus{border-color:rgba(215,147,74,.30);box-shadow:0 0 0 3px rgba(215,147,74,.10)}

.preview-strip{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:8px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), var(--s1);
  border:1px solid var(--border);
  font:500 13px var(--m);
}
.preview-strip__id,.preview-strip__model{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.preview-strip svg{color:var(--t4);flex-shrink:0}

.drop-area--compact{
  margin-top:10px;
  position:relative;
}
.drop-area__icon-sm{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  flex-shrink:0;
  border-radius:10px;
  color:var(--a-soft);
  background:rgba(215,147,74,.10);
  border:1px solid rgba(215,147,74,.12);
  font:700 18px var(--fd);
}
.drop-area__icon-sm--plus{
  font-size:18px;
  line-height:1;
}
.drop-area__text-sm{
  margin:0;
  color:#f1dfc4;
  font-size:14px;
  font-weight:700;
}
.drop-area__hint-sm{
  margin:2px 0 0;
  color:#c7b28f;
  font-size:12px;
  line-height:1.5;
}
.drop-area--compact input[type="file"]{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}

.file-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}
.file-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)), var(--s1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
  cursor:pointer;
}
.file-item:hover{border-color:rgba(215,147,74,.22)}
.file-item.active{
  border-color:rgba(215,147,74,.30);
  background:linear-gradient(180deg, rgba(215,147,74,.09), rgba(255,255,255,.01)), var(--s1);
}
.file-item__icon{
  min-width:42px;
  height:32px;
  display:grid;
  place-items:center;
  padding:0 8px;
  border-radius:9px;
  background:rgba(255,255,255,.04);
  color:#d6c19b;
  font:700 11px var(--m);
  letter-spacing:.08em;
}
.file-item__body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.file-item__name{
  color:var(--t1);
  font:600 13px var(--m);
  line-height:1.35;
  overflow-wrap:anywhere;
}
.file-item__meta{
  color:var(--t3);
  font-size:11px;
  line-height:1.3;
}
.file-item__size{
  color:#e6d0aa;
  font:700 12px var(--m);
  white-space:nowrap;
}
.file-item__x{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:7px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--t2);
  font:700 12px var(--m);
  cursor:pointer;
  flex-shrink:0;
}
.file-item__x:hover{
  color:var(--t1);
  border-color:rgba(215,147,74,.24);
  background:rgba(215,147,74,.10);
}

.comp-detect{
  margin-top:12px;
  padding:12px;
  border-radius:var(--rs);
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)), var(--s1);
}
.comp-detect__header{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  color:#dbc8a8;
  font:700 12px var(--m);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.comp-detect__chips{display:flex;flex-wrap:wrap;gap:8px}
.comp-detect__opts{margin-top:10px}
.comp-chip{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(215,147,74,.16);
  background:rgba(215,147,74,.08);
  color:#efc785;
  font:600 11px var(--m);
}
.comp-opt{display:flex;align-items:center;gap:8px}
.comp-opt__label{color:var(--t2);font-size:12px;font-weight:600}
.field__select--sm{
  width:auto;
  min-width:110px;
  height:32px;
  padding:0 30px 0 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), var(--s2);
  color:var(--t1);
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%23a3937c' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
}

.opt-tag{
  color:var(--t3);
  font:600 10px var(--m);
  padding:3px 6px;
  border-radius:4px;
  background:rgba(215,147,74,.08);
  border:1px solid rgba(215,147,74,.08);
}
.mode-badge{
  color:var(--a-soft);
  font:700 10px var(--m);
  padding:3px 6px;
  border-radius:4px;
  border:1px solid rgba(215,147,74,.14);
  background:rgba(215,147,74,.10);
}

.variant-combo{margin-top:0}
.variant-tree{margin-top:10px;display:flex;flex-direction:column;gap:10px;flex:1;overflow:auto}
.var-folder{
  overflow:hidden;
}
.var-folder__header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
}
.var-folder__toggle{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border:0;
  background:transparent;
  color:var(--t4);
  cursor:pointer;
  flex-shrink:0;
  transition:transform .18s ease;
}
.var-folder__toggle.open{transform:rotate(90deg)}
.var-folder__check{accent-color:var(--a);width:15px;height:15px;flex-shrink:0}
.var-folder__name{
  flex:1;
  min-width:0;
  color:var(--t1);
  font:700 13px var(--f);
  overflow-wrap:anywhere;
}
.var-folder__badge{
  padding:3px 6px;
  border-radius:999px;
  background:rgba(215,147,74,.08);
  border:1px solid rgba(215,147,74,.14);
  color:var(--a-soft);
  font:600 10px var(--m);
  text-transform:uppercase;
}
.var-folder__count{color:var(--t2);font-size:12px;white-space:nowrap}
.var-folder__files{
  display:none;
  padding:0 14px 12px 44px;
  border-top:1px solid var(--border);
}
.var-folder__files.open{display:block}
.var-file{
  padding-top:8px;
  color:var(--t2);
  font:500 12px var(--m);
  overflow-wrap:anywhere;
}
.batch-total{
  margin-top:10px;
  color:var(--g);
  font:600 12px var(--m);
}

.viewer-inline{
  position:relative;
  flex:1;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 54%, rgba(215,147,74,.08), transparent 20%),
    linear-gradient(180deg, rgba(255,255,255,.008), rgba(0,0,0,.02)),
    #0f0c09;
}
.viewer-inline::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 28%),
    radial-gradient(circle at 50% 52%, rgba(235,195,140,.05), transparent 14%);
}
.viewer-placeholder,.viewer-loading{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  color:var(--t2);
  text-align:center;
}
.viewer-placeholder p{margin:0;max-width:40ch;line-height:1.6}
.viewer-stats{
  position:absolute;
  top:16px;
  left:16px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  z-index:4;
  pointer-events:none;
}
.viewer-stat{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(215,147,74,.10);
  background:rgba(16,12,9,.72);
  color:var(--t2);
  font:600 12px var(--m);
  backdrop-filter:blur(8px);
}
.viewer-stat b{color:#f2d6a8}
.viewer-loading .spin{
  width:34px;
  height:34px;
  border:3px solid rgba(255,255,255,.08);
  border-top-color:var(--a);
  border-radius:50%;
  animation:spin .75s linear infinite;
}

@keyframes spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
.viewer-controls{
  position:absolute;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border-radius:12px;
  border:1px solid rgba(215,147,74,.14);
  background:rgba(16,12,9,.82);
  backdrop-filter:blur(10px);
  z-index:5;
}
.vc-btn.active{
  background:rgba(215,147,74,.12);
  color:#f8deaf;
  box-shadow:inset 0 0 0 1px rgba(215,147,74,.16);
}
.vc-sep{
  width:1px;
  align-self:stretch;
  background:rgba(215,147,74,.14);
  margin:2px 4px;
}

.icon-box__label{display:block;color:var(--t1);font-weight:700}
.icon-box small{display:block;color:var(--t2)}

.adv-opts{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.adv-opt{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border-radius:var(--rs);
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)), var(--s1);
}
.adv-opt__info{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.adv-opt__name{color:var(--t1);font-size:13px;font-weight:700}
.adv-opt__desc{color:var(--t2);font-size:11px;line-height:1.45}
.adv-opt__num{
  width:54px;
  height:32px;
  padding:0;
  text-align:center;
  font:600 12px var(--m);
  color:var(--a-soft);
}
.toggle{
  position:relative;
  width:58px;
  height:30px;
  display:inline-flex;
  flex-shrink:0;
}
.toggle input{position:absolute;inset:0;opacity:0;cursor:pointer}
.toggle__slider{
  position:absolute;
  inset:0;
  border-radius:999px;
  border:1px solid rgba(215,147,74,.16);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), var(--s2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
  transition:all .18s ease;
}
.toggle__slider::before{
  content:"Off";
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  color:var(--t2);
  font:700 10px var(--m);
  letter-spacing:.06em;
}
.toggle__slider::after{
  content:"";
  position:absolute;
  left:3px;
  top:3px;
  width:22px;
  height:22px;
  border-radius:999px;
  background:#b89b70;
  box-shadow:0 2px 8px rgba(0,0,0,.28);
  transition:transform .18s ease, background-color .18s ease;
}
.toggle input:checked + .toggle__slider{
  border-color:rgba(215,147,74,.34);
  background:linear-gradient(180deg, rgba(215,147,74,.20), rgba(255,255,255,.01)), var(--s1);
}
.toggle input:checked + .toggle__slider::before{
  content:"On";
  right:auto;
  left:12px;
  color:#fff1df;
}
.toggle input:checked + .toggle__slider::after{
  transform:translateX(30px);
  background:#f0c58b;
}
.adv-opt::after{
  content:attr(data-tooltip-false);
  position:absolute;
  left:50%;
  bottom:calc(100% + 8px);
  transform:translateX(-50%);
  width:220px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--border-h);
  background:#17140f;
  color:var(--t2);
  font-size:11px;
  line-height:1.5;
  text-align:center;
  opacity:0;
  pointer-events:none;
  box-shadow:0 22px 50px rgba(0,0,0,.28);
  transition:opacity .18s ease, transform .18s ease;
  z-index:20;
}
.adv-opt:hover::after{
  opacity:1;
  transform:translateX(-50%) translateY(-2px);
}
.adv-opt:has(input:checked)::after{content:attr(data-tooltip-true)}

.bottom-bar{
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 18px;
  border-top:1px solid var(--border);
  background:rgba(24,21,17,.96);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.btn-gen{
  min-width:210px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:14px;
  border:1px solid rgba(215,147,74,.24);
  background:linear-gradient(180deg, rgba(215,147,74,.22), rgba(215,147,74,.12)), var(--s2);
  color:#fff0dd;
  text-decoration:none;
  padding:0 16px;
  overflow:hidden;
}
.btn-gen svg{
  width:16px;
  height:16px;
  flex-shrink:0;
}
.btn-gen--dl{
  min-width:0;
  max-width:320px;
  background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.01)), var(--s2);
  color:var(--t1);
  border-color:rgba(215,147,74,.16);
}
.btn-gen__label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:700;
}
.btn-gen--dl:hover{
  border-color:rgba(215,147,74,.28);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), var(--s2);
}
.prog{
  flex:1;
  min-width:140px;
  height:4px;
  display:none;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.06);
}
.prog.on{display:block}
.msg{
  flex:1;
  min-width:220px;
  min-height:40px;
  padding:0 14px;
  display:none;
  border-radius:12px;
  line-height:1.45;
}
.msg.ok,.msg.err{display:flex;align-items:center}

.batch-items{display:flex;flex-direction:column;gap:10px;margin-top:10px;overflow:auto}
.b-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
}
.b-item__badge{
  display:inline-flex;
  align-items:center;
  padding:3px 6px;
  border-radius:999px;
  border:1px solid rgba(215,147,74,.16);
  background:rgba(215,147,74,.08);
  color:var(--a-soft);
  font:600 10px var(--m);
  text-transform:uppercase;
}
.b-item__name{flex:1;min-width:0;color:var(--t1);font:600 12px var(--m);overflow-wrap:anywhere}
.b-item__id,.b-item__arr,.b-item__meta{color:var(--t2);font-size:12px}
.batch-center-empty{
  flex:1;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:32px;
}

.convert-card .btn-gen,.convert-card .btn-gen--dl{width:100%;margin-top:12px}

.notice-stack{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:14px;
}

.notice-box{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), var(--s1);
  color:var(--t2);
  line-height:1.6;
}

.notice-box svg{
  flex-shrink:0;
  margin-top:1px;
}

.notice-box span{
  min-width:0;
}

.notice-box strong{
  color:var(--t1);
}

.notice-box a{
  color:var(--a-soft);
  text-decoration:none;
}

.notice-box a:hover{
  color:#f3d6a6;
}

.notice-box--warn{
  border-color:rgba(215,147,74,.18);
  background:linear-gradient(180deg, rgba(215,147,74,.10), rgba(255,255,255,.01)), var(--s1);
}

.notice-box--warn svg{
  color:var(--a);
}

.notice-box--info{
  border-color:rgba(159,209,143,.16);
  background:linear-gradient(180deg, rgba(159,209,143,.08), rgba(255,255,255,.01)), var(--s1);
}

.notice-box--info svg{
  color:var(--g);
}

@media (min-width:1280px){
  body{padding:6px}
  .topbar{border-radius:20px 20px 0 0}
  .page.active{
    border-left:1px solid var(--border);
    border-right:1px solid var(--border);
    background:rgba(15,12,9,.74);
  }
  .site-footer{
    border-left:1px solid var(--border);
    border-right:1px solid var(--border);
    border-bottom:1px solid var(--border);
    border-radius:0 0 20px 20px;
  }
}

@media (min-width:1280px) and (max-width:1700px) and (max-height:1100px){
  body{padding:0}
}

@media(max-width:900px){
  body{zoom:1!important}
  .page.active{
    border-left:0;
    border-right:0;
  }
  .site-footer{
    border-left:0;
    border-right:0;
    border-radius:0;
  }
}

/* Sitewide completion pass */
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.prog__bar{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--a), #f0c58b, var(--a2));
  animation:slide 1.3s ease-in-out infinite;
}

.sf__hint{
  display:block;
  color:var(--t2);
  font-size:12px;
  line-height:1.5;
  margin-top:6px;
}

.btn-sm--accent{
  border-color:rgba(215,147,74,.34);
  background:linear-gradient(180deg, rgba(215,147,74,.20), rgba(215,147,74,.10)), var(--s2);
  color:#fff0dd;
}

.info-box--sm{
  padding:12px 14px;
  font-size:13px;
}

.convert-url-row{
  display:flex;
  align-items:flex-end;
  gap:10px;
}

.sb-section{
  margin-bottom:18px;
  padding-bottom:18px;
  border-bottom:1px solid var(--border);
}
.sb-section:last-child{
  margin-bottom:0;
  padding-bottom:0;
  border-bottom:0;
}
.sb-section__header{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}

.convert-card{
  width:min(100%, 860px);
  padding:26px;
  border-radius:22px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)), var(--bg2);
  box-shadow:0 22px 50px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.03);
}
.convert-card .btn-gen,
.convert-card .btn-gen--dl{
  width:100%;
  margin-top:12px;
}

.notice-box{
  margin-top:14px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  border-radius:var(--rs);
  line-height:1.55;
}
.notice-box--warn{
  border:1px solid rgba(239,142,142,.18);
  background:rgba(239,142,142,.08);
  color:#f0d3d3;
}
.notice-box--warn svg,
.notice-box--warn strong{color:#efb0b0}
.notice-box--info{
  border:1px solid rgba(215,147,74,.16);
  background:rgba(215,147,74,.08);
  color:var(--t2);
}
.notice-box--info svg{color:var(--a-soft)}
.notice-box a{
  color:var(--a-soft);
  font-weight:700;
  text-decoration:underline;
}

.tut-container{
  width:min(100%, 920px);
  padding-bottom:40px;
}
.tut-hero{
  margin:0 0 28px;
  color:#edd6b0;
  font:700 clamp(28px, 4vw, 42px) var(--fd);
  letter-spacing:-.03em;
  line-height:1.08;
  text-wrap:balance;
}
.tut-steps,
.tut-faq{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.tut-step{
  display:flex;
  gap:16px;
  padding:18px;
  border-radius:18px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)), var(--bg2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.tut-step__num{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  flex-shrink:0;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(215,147,74,.22), rgba(215,147,74,.10));
  color:#fff0dd;
  font:700 15px var(--fd);
}
.tut-step__body{min-width:0}
.tut-step__body h3{
  margin:0 0 6px;
  color:var(--t1);
  font:700 18px var(--fd);
}
.tut-step__body p{
  margin:0;
  color:var(--t2);
  line-height:1.7;
}
.tut-faq-title{
  margin:30px 0 12px;
  color:#edd6b0;
  font:700 22px var(--fd);
}
.tut-faq__item{
  border-radius:16px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)), var(--bg2);
  overflow:hidden;
}
.tut-faq__item summary{
  list-style:none;
  display:flex;
  align-items:center;
  gap:10px;
  padding:16px 18px;
  color:var(--t1);
  font-weight:700;
  cursor:pointer;
}
.tut-faq__item summary::-webkit-details-marker{display:none}
.tut-faq__item summary::before{
  content:"▸";
  color:var(--a-soft);
  transition:transform .18s ease;
}
.tut-faq__item[open] summary::before{transform:rotate(90deg)}
.tut-faq__item p{
  margin:0;
  padding:0 18px 18px;
  color:var(--t2);
  line-height:1.7;
}

.footer__socials{
  display:flex;
  gap:10px;
}
.footer__copy{
  margin:0;
  color:var(--t3);
  font-size:12px;
  letter-spacing:.04em;
}

.site-footer{
  display:none !important;
}

.viewer-stat--name code{
  font-size:12px;
  color:#f0d3ab;
  background:transparent;
  padding:0;
}

@media(max-width:900px){
  .convert-url-row{
    flex-direction:column;
  }
  .tut-step{
    flex-direction:column;
  }
}

.page.active,.page.page--active{display:flex}

.app-shell{overflow:hidden}

body[data-vp="fhd-compact"]{
  zoom:.78;
  padding:0 !important;
}

body[data-vp="fhd-compact"] .app-shell{
  width:calc(100% / .78);
  min-height:calc(100dvh / .78);
  border-radius:0;
  border-left:0;
  border-right:0;
  box-shadow:none;
}

body[data-vp="desktop-2k"]{
  zoom:1;
}

body[data-vp="desktop-2k"] .app-shell{
  width:100%;
  min-height:calc(100dvh - 16px);
}