@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#090706;--panel:#15100d;--panel2:#1d1712;--text:#f6f1ea;--muted:#a79a8e;--accent:#ffb45a;--line:rgba(255,255,255,.13);--gold:var(--accent)}
*{box-sizing:border-box}
button,input{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
.lab-page{min-height:100vh;padding:0 22px 24px}
.lab-header{max-width:1480px;margin:auto;height:74px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:18px}
.lab-brand{display:flex;align-items:center;gap:11px;font-size:21px;font-weight:900;letter-spacing:-.05em;white-space:nowrap}
.lab-mark{width:38px;height:38px;border:1px solid var(--accent);border-radius:50%;display:grid;place-items:center;color:var(--accent);font-size:11px}
.lab-header-center{display:flex;flex-direction:column;align-items:center;gap:3px}
.lab-eyebrow{color:var(--accent);font-size:10px;letter-spacing:.2em;font-weight:800}
.lab-header-note{color:var(--muted);font-size:11px}
.lab-back{font-size:12px;color:var(--muted);white-space:nowrap}
.lab-back span{color:var(--accent);margin-left:5px}
.lab-layout{max-width:1480px;margin:24px auto 0;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.lab-stage-card,.lab-controls{border:1px solid var(--line);background:rgba(17,22,20,.9)}
.lab-stage-card{min-width:0;overflow:hidden}
.stage-topline{height:52px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.06)}
.stage-kicker{font-size:10px;color:var(--muted);letter-spacing:.18em}
.stage-kicker i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:8px;box-shadow:0 0 12px var(--accent)}
.text-button{border:0;background:transparent;color:var(--muted);font-size:11px;padding:8px}
.text-button:hover{color:var(--accent)}
.view-tabs{height:48px;display:flex;justify-content:center;align-items:center;gap:5px;background:#17120f;border-bottom:1px solid rgba(255,255,255,.04)}
.view-tab{background:transparent;border:1px solid transparent;color:var(--muted);padding:8px 13px;font-size:11px}
.view-tab.active,.view-tab:hover{border-color:rgba(185,166,91,.65);color:var(--text);background:rgba(185,166,91,.08)}
.model-viewport{height:min(66vw,690px);min-height:470px;position:relative;background:radial-gradient(ellipse at 50% 48%,#20241f 0%,#1b1e1a 38%,#151815 100%);overflow:hidden;touch-action:pan-y}
.model-viewport canvas{display:block;width:100%;height:100%;outline:none;touch-action:none}
.model-viewport[data-mode="place"] canvas{cursor:crosshair}
.model-loading,.model-error{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;background:rgba(16,20,17,.7);z-index:2;text-align:center;padding:24px}
.model-loading b,.model-error b{font-size:14px}
.model-loading small,.model-error span{font-size:11px;color:var(--muted);max-width:290px;line-height:1.6}
.loader-orbit{width:38px;height:38px;border:1px solid rgba(255,180,90,.2);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:8px}
@keyframes spin{to{transform:rotate(360deg)}}
.model-error[hidden],.model-loading[hidden]{display:none}
.small-outline{background:transparent;border:1px solid var(--accent);color:var(--accent);padding:9px 14px;font-size:11px;margin-top:8px}
.stage-bottomline{height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-top:1px solid rgba(255,255,255,.07);color:var(--muted);font-size:10px;gap:12px}
.zoom-controls{display:flex;gap:5px}
.zoom-controls button{width:32px;height:30px;background:transparent;border:1px solid var(--line);color:var(--text);font-size:18px;line-height:1}
.zoom-controls button:hover{border-color:var(--accent);color:var(--accent)}
.stage-status{padding:11px 18px;border-top:1px solid rgba(255,255,255,.06);font-size:10px;color:var(--gold);min-height:36px}
.lab-controls{padding:0 19px}
.control-section{display:grid;grid-template-columns:20px minmax(0,1fr);gap:9px;padding:22px 0;border-bottom:1px solid var(--line)}
.section-number{font-size:9px;letter-spacing:.12em;color:var(--gold);padding-top:3px}
.section-content h2{font-size:14px;font-weight:700;margin:0 0 16px;letter-spacing:-.02em}
.section-title-row{display:flex;align-items:center;justify-content:space-between}
.count-pill{border:1px solid var(--line);border-radius:999px;padding:4px 8px;font-size:9px;color:var(--muted)}
.gender-switch,.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:3px;border:1px solid var(--line);background:#0d0907}
.gender-button,.mode-button{border:1px solid transparent;background:transparent;color:var(--muted);padding:10px 7px;font-size:10px}
.gender-button.active,.mode-button.active{background:#2a211a;color:var(--text);border-color:rgba(185,166,91,.45)}
.skin-heading{display:flex;justify-content:space-between;align-items:center;margin:17px 0 10px;font-size:10px}
.skin-heading small{color:var(--muted)}
.skin-swatches{display:flex;gap:10px;align-items:center}
.skin-swatch{width:20px;height:20px;border-radius:50%;border:2px solid rgba(0,0,0,.3);background:var(--swatch);padding:0;outline:1px solid transparent;outline-offset:3px}
.skin-swatch.active{outline-color:var(--gold)}
.upload-zone{height:108px;border:1px dashed rgba(185,166,91,.55);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:rgba(185,166,91,.025);cursor:pointer;transition:.2s}
.upload-zone:hover{background:rgba(255,180,90,.04);border-color:var(--accent)}
.upload-zone input{display:none}
.upload-icon{font-size:24px;line-height:1;color:var(--gold)}
.upload-zone b{font-size:11px;font-weight:700}
.upload-zone small{font-size:9px;color:var(--muted)}
.check-line{display:flex;align-items:center;gap:8px;font-size:10px;margin:12px 0 8px;cursor:pointer}
.check-line input{accent-color:var(--accent);width:14px;height:14px}
.helper-note{font-size:9px;line-height:1.6;color:var(--muted);margin:8px 0 0}
.sketch-list{display:grid;gap:7px;margin-top:12px}
.empty-sketches{border:1px solid rgba(255,255,255,.06);padding:12px;text-align:center;color:#778078;font-size:9px}
.sketch-item{display:grid;grid-template-columns:40px minmax(0,1fr) 24px;gap:9px;align-items:center;border:1px solid var(--line);padding:6px;background:#100c0a}
.sketch-item.active{border-color:rgba(255,180,90,.6);background:rgba(255,180,90,.045)}
.sketch-thumb{width:40px;height:40px;object-fit:contain;background:#222722}
.sketch-name{font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.sketch-meta{font-size:8px;color:var(--muted);margin-top:3px}
.sketch-select,.sketch-delete{border:0;background:transparent;color:var(--muted);padding:5px}
.sketch-select:hover,.sketch-delete:hover{color:var(--accent)}
.mode-switch{margin-bottom:8px}
.mode-help{margin-bottom:11px}
.range-control{margin:16px 0}
.range-control>div{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.range-control label{font-size:10px;color:#cbd2cc}
.range-control output{font-size:9px;color:var(--muted)}
.range-control input{width:100%;accent-color:var(--accent);height:4px;cursor:pointer}
.remove-button{width:100%;border:1px solid rgba(255,100,100,.25);background:transparent;color:#d78b8b;padding:9px;font-size:9px;margin-top:3px}
.remove-button:disabled{opacity:.35;cursor:not-allowed}
.lab-actions{padding:18px 0 20px;display:grid;gap:8px}
.primary-action,.secondary-action{width:100%;padding:13px 12px;font-weight:800;font-size:11px;border-radius:2px}
.primary-action{background:var(--accent);border:1px solid var(--accent);color:#0a0d09}
.secondary-action{background:transparent;border:1px solid var(--line);color:var(--text)}
.primary-action:hover,.secondary-action:hover{transform:translateY(-1px)}
.primary-action:disabled,.secondary-action:disabled{opacity:.4;cursor:not-allowed;transform:none}
.lab-actions p{font-size:9px;color:var(--muted);line-height:1.55;margin:5px 0 0}
.lab-footer{max-width:1480px;margin:18px auto 0;border-top:1px solid var(--line);padding:14px 0;display:flex;justify-content:space-between;color:#69756c;font-size:9px;letter-spacing:.12em}
@media(max-width:1050px){.lab-layout{grid-template-columns:minmax(0,1fr) 310px}.model-viewport{height:620px;min-height:440px}}
@media(max-width:780px){.lab-page{padding:0 12px 18px}.lab-header{height:62px}.lab-brand{font-size:18px}.lab-mark{width:32px;height:32px}.lab-header-center{display:none}.lab-layout{display:flex;flex-direction:column;margin-top:12px;gap:10px}.lab-stage-card,.lab-controls{width:100%}.model-viewport{height:62vh;min-height:380px;max-height:620px}.lab-controls{padding:0 14px}.control-section{padding:18px 0}.lab-footer{font-size:8px}.stage-bottomline{padding:0 12px;font-size:9px}.stage-topline{padding:0 12px}}
@media(max-width:420px){.model-viewport{height:55vh;min-height:340px}.view-tab{padding:8px 9px;font-size:10px}.lab-back{font-size:10px}.stage-status{font-size:9px}.lab-footer span:last-child{display:none}}

/* TON 618 LAB — Plasma Amber identity */
:root{--gold:var(--accent)}
html,body{background:#080706}
body{position:relative;isolation:isolate;background:radial-gradient(ellipse at 78% 0%,rgba(255,180,90,.075),transparent 32%),radial-gradient(ellipse at 12% 50%,rgba(42,75,95,.09),transparent 38%),#080706}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.34;background-image:radial-gradient(1px 1px at 8% 17%,rgba(255,255,255,.8) 50%,transparent 100%),radial-gradient(1px 1px at 31% 29%,rgba(255,180,90,.8) 50%,transparent 100%),radial-gradient(1px 1px at 57% 12%,rgba(255,255,255,.7) 50%,transparent 100%),radial-gradient(1px 1px at 82% 27%,rgba(255,255,255,.75) 50%,transparent 100%);background-size:370px 290px}
.lab-header{background:rgba(8,6,5,.55);backdrop-filter:blur(16px);border-color:rgba(255,180,90,.16)}
.lab-mark{box-shadow:0 0 18px rgba(255,180,90,.1)}
.lab-stage-card,.lab-controls{background:rgba(15,11,8,.9);border-color:rgba(255,180,90,.15);border-radius:16px;overflow:hidden}
.view-tabs{background:#17120f}
.view-tab.active,.view-tab:hover,.gender-button.active,.mode-button.active{border-color:rgba(255,180,90,.55);color:var(--text);background:rgba(255,180,90,.09)}
.model-viewport{background:radial-gradient(ellipse at 50% 42%,#2a1d14 0%,#17110d 42%,#090706 100%)}
.stage-status{color:var(--accent)}
.section-number,.upload-icon{color:var(--accent)}
.upload-zone{border-color:rgba(255,180,90,.42);background:rgba(255,180,90,.025)}
.skin-swatch.active{outline-color:var(--accent)}
.lab-footer{border-color:rgba(255,180,90,.15)}
@media(max-width:780px){.lab-header{background:rgba(8,6,5,.76)}}


/* TON 618 — static native cursor: browser owns pointer coordinates, no JS tracking */
:root, :root * { cursor: url("assets/ton618-cursor.png") 16 16, auto !important; }
a, button, input, select, textarea, label, [role="button"], [data-cursor="interactive"] {
  cursor: url("assets/ton618-cursor.png") 16 16, pointer !important;
}
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="search"], input[type="url"], textarea, [contenteditable="true"] {
  cursor: text !important;
}
button:disabled, input:disabled, select:disabled, textarea:disabled {
  cursor: not-allowed !important;
}

.background-select {
  width: 100%;
  min-height: 34px;
  margin-top: 6px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #100c0a;
  color: var(--text);
  font: inherit;
  font-size: 10px;
  outline: none;
}
.background-select:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}

.lab-brand{gap:10px}
.lab-logo{display:block;width:82px;height:58px;object-fit:contain;object-position:center;border-radius:6px;background:#000}
.lab-brand-name{display:inline-block}
@media(max-width:780px){.lab-logo{width:72px;height:52px}}