:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f6f6f8;background:#08080b;color-scheme:dark;--panel:#111116;--line:#292932;--muted:#858590;--purple:#8b5cf6}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 15% -10%,rgba(139,92,246,.15),transparent 27%),#070709}.three-header{height:70px;display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid #202027;background:rgba(9,9,13,.92);backdrop-filter:blur(16px);position:sticky;top:0;z-index:30}.three-header img{width:38px;height:38px;border-radius:11px}.three-header small{display:block;font-size:8px;letter-spacing:.18em;color:#757580}.three-header strong{font-size:19px}.three-header em{font-style:normal;font-size:8px;background:#8b5cf6;border-radius:999px;padding:3px 6px;margin-left:5px}.back,.head-btn{border:1px solid #2d2d35;background:#15151b;color:#fff;border-radius:11px;text-decoration:none}.back{width:38px;height:38px;display:grid;place-items:center;font-size:20px}.head-btn{margin-left:auto;padding:9px 11px}.three-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;min-height:calc(100vh - 70px)}.viewer-wrap{padding:12px 14px 18px;min-width:0}.viewer-topline{height:32px;display:flex;align-items:center;gap:10px;color:#858590;font-size:11px}.pill{font-size:8px;letter-spacing:.12em;font-weight:900;background:#1b1825;color:#bea9ff;padding:5px 8px;border-radius:999px;border:1px solid #342b4c}.viewer{position:relative;height:calc(100vh - 190px);min-height:510px;overflow:hidden;border:1px solid #292934;border-radius:26px;background:radial-gradient(circle at 50% 38%,#1a1a22,#0b0b0f 63%);box-shadow:0 35px 100px #0008}.viewer canvas{display:block;width:100%;height:100%;touch-action:none}.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:#8b8b96;z-index:5;pointer-events:none}.loading strong{color:#e7e7eb}.loading span{font-size:10px}.spinner{width:32px;height:32px;border-radius:50%;border:3px solid #282833;border-top-color:#8b5cf6;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.viewer-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}.big-mode{height:52px;border-radius:14px;border:1px solid #2c2c35;background:#15151b;color:#9999a4;font-weight:800}.big-mode span{margin-left:5px}.big-mode.active{background:#f3f3f4;color:#09090a;border-color:#f3f3f4}.gesture-hint{text-align:center;color:#686874;font-size:10px;padding-top:7px}.three-controls{border-left:1px solid #202027;background:#09090c;padding:12px;overflow:auto}.three-panel{background:var(--panel);border:1px solid var(--line);border-radius:17px;padding:13px;margin-bottom:10px}.section-title{font-size:9px;letter-spacing:.14em;color:#767682;font-weight:900;margin-bottom:10px}.upload,.secondary,.save{display:block;width:100%;border:1px solid #303039;background:#17171d;color:#f5f5f5;border-radius:12px;padding:11px;font-weight:800;text-align:center;cursor:pointer}.upload.primary,.save{background:#f4f4f5;color:#09090a;border-color:#f4f4f5}.field{width:100%;border:1px solid #2d2d36;background:#17171d;color:#fff;border-radius:11px;padding:10px;margin-top:8px}.tattoo-preview{height:94px;border:1px dashed #33333e;border-radius:12px;margin-top:9px;display:grid;place-items:center;overflow:hidden;color:#6f6f79;font-size:10px;background:#0d0d12}.tattoo-preview img{max-width:100%;max-height:100%;object-fit:contain}.instruction{font-size:11px;line-height:1.45;color:#92929e;background:#15151b;border-radius:11px;padding:10px}.control{margin:12px 0}.control label{display:flex;justify-content:space-between;font-size:10px;color:#94949f;margin-bottom:5px}.control b{color:#e1e1e6}input[type=range]{width:100%;accent-color:#8b5cf6}.touch-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:9px}.touch-grid div{background:#15151b;border-radius:11px;padding:10px}.touch-grid b,.touch-grid span{display:block}.touch-grid b{font-size:11px}.touch-grid span{font-size:9px;color:#80808c;margin-top:3px}.danger{color:#ff9ca6}.mini-note{font-size:9px;color:#686874;line-height:1.45;margin:9px 2px 0}@media(max-width:880px){.three-layout{grid-template-columns:1fr}.viewer-wrap{padding:7px}.viewer{height:58vh;min-height:430px;border-radius:20px}.three-controls{border-left:0;border-top:1px solid #202027;padding-bottom:30px}.three-header{height:62px;padding:0 8px}.head-btn{font-size:10px}.viewer-topline{padding:0 4px}}@media(max-width:480px){.viewer{height:55vh;min-height:390px}.three-header strong{font-size:16px}.three-header img,.back{width:34px;height:34px}.touch-grid{grid-template-columns:1fr 1fr}}
.head-btns{margin-left:auto;display:flex;gap:8px;align-items:center}
.camera-presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.preset-btn{border:1px solid #303039;background:#15151b;color:#fff;border-radius:12px;padding:10px 12px;font-weight:800}.preset-btn:hover{border-color:#8b5cf6}.preset-btn.active{background:#f4f4f5;color:#09090a}@media(max-width:700px){.camera-presets{justify-content:center}.preset-btn{flex:1 1 calc(50% - 6px)}}

/* V8.3.2 — only compact body controls added; V8.2 layout preserved */
.compact-body-switch{
  display:grid;
  grid-template-columns:1fr 1fr 1.15fr;
  gap:6px;
  margin-bottom:9px;
}
.mini-switch,.mini-skin{
  min-height:36px;
  border:1px solid #303039;
  background:#17171d;
  color:#fff;
  border-radius:10px;
  font-size:10px;
  font-weight:800;
}
.mini-switch.active{
  background:#f4f4f5;
  color:#09090a;
  border-color:#f4f4f5;
}
.mini-skin{padding:0 7px}


/* V9 True Human Mesh — isolated 3D page only */
.mesh-mode-switch{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin:0 0 8px;
}
.true-mesh-note{
  margin:0 0 10px;
  padding:7px 9px;
  border:1px solid #2f2b3c;
  border-radius:10px;
  background:#15121d;
  color:#bba8e8;
  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
  text-align:center;
}
.true-mesh-switch .mini-switch:disabled{
  opacity:.38;
  cursor:not-allowed;
}
.viewer.true-mesh::after{
  content:"TRUE MESH";
  position:absolute;
  top:14px;right:14px;
  z-index:4;
  padding:5px 8px;
  border:1px solid #3a3348;
  background:rgba(12,10,17,.75);
  color:#cdbdff;
  border-radius:999px;
  font-size:8px;
  letter-spacing:.14em;
  font-weight:900;
  pointer-events:none;
}
.mesh-source{
  margin-top:8px;
  color:#62626d;
  font-size:8px;
  line-height:1.45;
}


/* V9.3 — TV-style pixel censor; no fake 3D clothing geometry */
.groin-censor{
  position:absolute;
  left:0;
  top:0;
  z-index:8;
  display:none;
  pointer-events:none;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  border-radius:4px;
  box-shadow:0 0 0 1px rgba(255,255,255,.05);
}

/* V12.2 3D Pro Dock */
.three-pro-dock{display:flex;flex-direction:column;gap:6px;overflow:hidden}.three-dock-title{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 5px 0}.three-dock-title span{color:#a78bfa;font-size:8px;font-weight:1000;letter-spacing:.17em}.three-dock-title strong{font-size:9px;color:#777783}.three-dock-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.three-dock-tab{min-width:0;height:48px;border:1px solid #292932;background:#15151b;color:#858590;border-radius:11px;font-size:15px;font-weight:900}.three-dock-tab span{display:block;font-size:7px;margin-top:2px}.three-dock-tab.active{background:#f4f4f5;border-color:#f4f4f5;color:#09090a}.three-dock-content{min-height:0;flex:1;background:#111116;border:1px solid #292932;border-radius:15px;overflow:hidden}.three-dock-panel{display:none;height:100%;padding:11px;overflow:hidden}.three-dock-panel.active{display:block}.three-inline-actions,.three-mode-mini{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}.three-inline-actions .secondary,.three-mode-mini .secondary{padding:9px 6px;font-size:9px}.active-mini{border-color:#8b5cf6!important;color:#d9cdff!important;background:#241d34!important}.three-look-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:8px}.three-look-preset{border:1px solid #303039;background:#17171d;color:#a4a4ae;border-radius:10px;padding:8px 4px;font-size:8px;font-weight:900}.three-look-preset.active{border-color:#8b5cf6;background:#261e3b;color:#fff}.compact-instruction{margin-top:8px;padding:8px;font-size:9px}.dock-camera-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:9px 0}.dock-camera-presets .preset-btn{font-size:8px;padding:8px 3px}.three-pro-dock .tattoo-preview{height:112px}.three-pro-dock .control{margin:10px 0}.three-pro-dock .field{margin-top:6px}.three-pro-dock .true-mesh-note{margin:8px 0}
@media(min-width:881px){.three-layout{height:calc(100dvh - 70px);min-height:0;grid-template-columns:minmax(0,1fr) 320px;overflow:hidden}.viewer-wrap{height:100%;min-height:0;display:grid;grid-template-rows:32px minmax(0,1fr) auto auto;padding:10px 12px;overflow:hidden}.viewer{height:auto;min-height:0}.three-controls{height:100%;min-height:0;padding:10px;overflow:hidden}}
@media(max-width:880px){.three-header{height:58px}.three-layout{height:calc(100dvh - 58px);min-height:0;display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;overflow:hidden}.viewer-wrap{min-height:0;padding:5px;display:grid;grid-template-rows:27px minmax(0,1fr) auto auto;overflow:hidden}.viewer{height:auto;min-height:250px;border-radius:17px}.viewer-actions{margin-top:5px;gap:5px}.big-mode{height:40px;font-size:10px}.gesture-hint{padding-top:4px;font-size:8px}.three-controls{height:auto;max-height:265px;border-left:0;border-top:1px solid #202027;padding:5px;overflow:hidden}.three-dock-title{display:none}.three-dock-tabs{gap:2px}.three-dock-tab{height:37px;font-size:12px}.three-dock-tab span{font-size:6px}.three-dock-content{border-radius:12px}.three-dock-panel{padding:7px}.three-pro-dock .tattoo-preview{height:72px}.three-pro-dock .control{margin:5px 0}.three-pro-dock .control label{margin-bottom:2px;font-size:8px}.three-look-presets{margin-bottom:4px}.three-look-preset{padding:6px 2px;font-size:7px}.compact-instruction{display:none}.dock-camera-presets{margin:5px 0}.dock-camera-presets .preset-btn{padding:6px 2px}.three-pro-dock .true-mesh-note{display:none}}


/* V12.3 — visual 3D sticker browser */
.three-sticker-browser-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:8px 1px 5px;
}
.three-sticker-browser-head strong{
  font-size:8px;
  letter-spacing:.15em;
  color:#aaa0ca;
}
.three-sticker-browser-head span{
  font-size:8px;
  color:#676773;
}
.three-sticker-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:5px;
  max-height:196px;
  overflow:auto;
  overscroll-behavior:contain;
  padding:2px;
  scrollbar-width:thin;
}
.three-sticker-card{
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:1/1;
  min-width:0;
  border:1px solid #292932;
  border-radius:10px;
  background:#eeeae3;
  padding:4px;
  cursor:pointer;
  overflow:hidden;
}
.three-sticker-card img{
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
}
.three-sticker-card.active{
  border:2px solid #9c79ff;
  box-shadow:0 0 0 2px rgba(139,92,246,.15);
}
.three-sticker-card .sticker-check{
  position:absolute;
  right:4px;
  top:4px;
  display:none;
  place-items:center;
  width:17px;
  height:17px;
  border-radius:50%;
  background:#8b5cf6;
  color:white;
  font-size:9px;
  font-weight:1000;
}
.three-sticker-card.active .sticker-check{display:grid}
.three-sticker-select{margin-top:6px}
.selected-preview-label{
  margin:8px 1px 4px;
  color:#686875;
  font-size:7px;
  font-weight:900;
  letter-spacing:.15em;
}
.selected-tattoo-preview{
  background:#eeeae3!important;
  height:104px!important;
}
.selected-tattoo-preview img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

@media(max-width:880px){
  .three-sticker-browser-head{margin:3px 0}
  .three-sticker-grid{
    display:flex;
    gap:5px;
    max-height:none;
    overflow-x:auto;
    overflow-y:hidden;
    padding:2px 1px 4px;
  }
  .three-sticker-card{
    flex:0 0 67px;
    width:67px;
    height:67px;
    aspect-ratio:auto;
  }
  .three-sticker-select{display:none}
  .selected-preview-label{display:none}
  .selected-tattoo-preview{
    position:absolute;
    width:66px;
    height:66px!important;
    right:8px;
    top:50px;
    z-index:3;
    border:1px solid #363640;
    box-shadow:0 6px 18px rgba(0,0,0,.35);
  }
  .three-dock-panel[data-three-panel="tattoo"]{
    position:relative;
  }
  .three-dock-panel[data-three-panel="tattoo"] .three-inline-actions{
    margin-right:72px;
  }
}