/* 3D Skin Viewer & Editor — every rule scoped under #tool, colours from the site tokens. */
#tool .se{container-type:inline-size;display:flex;flex-direction:column;gap:14px;font:15px/1.5 var(--fb);color:var(--ink)}
#tool .se *{box-sizing:border-box}
#tool .se-card{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:14px}
#tool .se-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
#tool .se-row-tight{gap:6px}
#tool .se-sp{flex:1 1 auto}
#tool .se-div{width:1px;height:26px;background:var(--line);margin:0 2px}
#tool .se-top .se-row{gap:8px}
#tool .se-msg{margin:10px 0 0;color:var(--soft);font-size:14px;min-height:1.5em}
#tool .se-msg.se-bad{color:var(--ink);font-weight:600}
#tool.se-drop .se{outline:3px dashed var(--go);outline-offset:6px;border-radius:18px}

/* buttons */
#tool .go{border:0;cursor:pointer}
#tool .go svg{flex:none}
#tool .se-open{position:relative;overflow:hidden}
#tool .se-open input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
#tool .se-open:focus-within{outline:2px solid var(--go2);outline-offset:2px}
#tool .se-save{margin-left:auto}
#tool .se-btn,#tool .se-chip{min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:10px;
  background:var(--soft-bg);color:var(--ink);font:600 14px var(--fb);cursor:pointer}
#tool .se-chip{border-radius:99px;min-height:36px;padding:0 12px;font-size:13.5px}
#tool .se-chip[aria-pressed=true]{background:var(--chip);color:var(--go);border-color:var(--go)}
#tool .se-ib{display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--line);
  border-radius:10px;background:var(--soft-bg);color:var(--ink);cursor:pointer}
#tool .se-ib[aria-pressed=true]{background:var(--chip);color:var(--go);border-color:var(--go)}
#tool .se-ib:disabled{opacity:.4;cursor:default}
#tool button:focus-visible{outline:2px solid var(--go);outline-offset:2px}

/* segmented pickers */
#tool .se-seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--soft-bg)}
#tool .se-seg button{flex:1 1 0;min-height:38px;padding:0 8px;border:0;border-right:1px solid var(--line);background:none;
  color:var(--soft);font:600 13.5px var(--fb);cursor:pointer;white-space:nowrap}
#tool .se-seg button:last-child{border-right:0}
#tool .se-seg button[aria-pressed=true]{background:var(--go);color:#fff}
#tool .se-seg-sm{flex:none}
#tool .se-seg-sm button{min-height:34px;padding:0 12px}
#tool [hidden]{display:none!important}

/* layout: stacked on phones, side by side when the column is wide */
#tool .se-grid{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@container (min-width:680px){#tool .se-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* 3D */
#tool .se-view{display:flex;flex-direction:column;gap:10px}
#tool .se-stage{position:relative;width:100%;aspect-ratio:5/6;max-height:460px;border-radius:12px;
  background:radial-gradient(circle at 50% 40%,var(--chip),var(--soft-bg) 70%);overflow:hidden}
#tool .se-3d{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
#tool .se-3d.se-painting{cursor:crosshair}
#tool .se-stage-msg{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:20px;text-align:center;
  color:var(--soft);font-size:14px;pointer-events:none}
#tool .se-stage-off .se-3d{display:none}
#tool .se-stage-tools{position:absolute;top:8px;right:8px;display:flex;flex-direction:column;gap:6px}
#tool .se-stage-tools .se-ib{width:36px;height:36px;background:var(--card)}
#tool .se-stage-off .se-stage-tools{display:none}
#tool .se-ctl{display:flex;flex-direction:column;gap:8px}
#tool .se-note{margin:0;color:var(--soft);font-size:13px}

/* paint */
#tool .se-paint{display:flex;flex-direction:column;gap:10px}
#tool .se-tools{flex-wrap:nowrap;gap:4px}
#tool .se-tools .se-ib{flex:1 1 0;width:auto;min-width:30px;max-width:44px}
#tool .se-tools .se-div{flex:none}
#tool .se-ib-sm{width:34px;height:34px}
#tool .se-colors{flex-wrap:nowrap;align-items:flex-start}
#tool .se-cur{position:relative;flex:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--line);
  background:var(--se-c,#1f8a61);cursor:pointer;box-shadow:inset 0 0 0 3px var(--card)}
#tool .se-cur input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
#tool .se-sw{display:flex;flex-wrap:wrap;gap:5px}
#tool .se-sw button{width:26px;height:26px;padding:0;border:1px solid var(--line);border-radius:7px;background:var(--se-c);cursor:pointer}
#tool .se-sw button[aria-pressed=true]{outline:2px solid var(--go);outline-offset:1px}
#tool .se-lbl{font-size:12.5px;color:var(--soft);margin-right:2px}
#tool .se-scroll{width:100%;max-width:520px;margin:0 auto;overflow:auto;border-radius:10px;border:1px solid var(--line);
  overscroll-behavior:contain;max-height:78vh}
#tool .se-pix{position:relative;width:100%;aspect-ratio:1/1;
  background-color:var(--card);
  background-image:conic-gradient(var(--soft-bg) 25%,transparent 0 50%,var(--soft-bg) 0 75%,transparent 0);
  background-size:calc(100% / 32) calc(100% / 32)}
#tool .se-pix canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#tool .se-tex{image-rendering:pixelated;image-rendering:crisp-edges}
#tool .se-ov{touch-action:none;cursor:crosshair}
#tool .se-under{justify-content:space-between}
#tool .se-where{flex:1 1 140px;font-size:12.5px;color:var(--soft);text-align:right;min-height:1.4em}

@media (max-width:420px){
  #tool .se-card{padding:12px}
  #tool .se-save{margin-left:0}
  #tool .se-seg button{font-size:12.5px;padding:0 5px}
}