/* Skin Builder */
.sb-hero { padding: 2.5rem 0 1rem; }
.sb-hero h1 { margin-bottom: .4rem; }
.sb-privacy { display: inline-flex; gap: .5rem; align-items: center; margin-top: .6rem; padding: .45rem .8rem; border: 1px solid rgba(139, 227, 166, .4); border-radius: 999px; color: var(--ok); font-size: .92rem; background: rgba(139, 227, 166, .07); }
.sb { margin-bottom: 2rem; scroll-margin-top: 1rem; }
.sb-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin: 1rem 0; }
.sb-tabs button { flex: 1 1 140px; padding: .7rem .9rem; border-radius: 8px; border: 2px solid var(--line); background: var(--panel); color: var(--text); font-weight: 700; cursor: pointer; font-size: 1rem; }
.sb-tabs button b { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-right: .4rem; border-radius: 50%; background: var(--line); color: var(--white); font-size: .9rem; }
.sb-tabs button.is-on { border-color: var(--accent); color: var(--white); background: var(--panel-2); }
.sb-tabs button.is-on b { background: var(--accent-2); }
.sb-grid { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 820px) { .sb-grid { grid-template-columns: 1fr; } .sb-preview { position: static !important; } }
.sb-preview { position: sticky; top: 1rem; background: radial-gradient(circle at 50% 35%, #3a2160, #140b22 70%); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem; }
.sb-preview canvas#sb-3d { display: block; width: 100%; cursor: grab; touch-action: none; }
.sb-preview .sb-ctrl { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; justify-content: center; padding: .5rem .2rem .2rem; font-size: .9rem; color: var(--text-dim); }
.sb-preview select, .sb-panel select, .sb-panel input[type=text] { background: #120b1f; color: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: .45rem .5rem; font-size: .95rem; }
.sb-panel { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem 1.3rem; min-width: 0; }
.sb-panel h2 { font-size: 1.4rem; margin: 0 0 .5rem; }
.sb-panel h3 { font-size: 1.1rem; margin: 1.3rem 0 .5rem; color: var(--white); }
.sb-panel p { color: var(--text-dim); margin: .3rem 0 .6rem; }
.sb-card { border: 1px solid var(--line); border-radius: 8px; padding: .9rem 1rem 1rem; margin-bottom: 1rem; background: rgba(13, 8, 24, .35); }
.sb-card > h3:first-child { margin-top: 0; }
.sb-file { display: inline-flex; }
.sb-file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sb-file input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.sb-crop { position: relative; margin: .8rem 0; user-select: none; max-width: 100%; }
.sb-crop canvas { display: block; max-width: 100%; border-radius: 6px; }
.sb-box { position: absolute; border: 3px solid #ffd27a; box-shadow: 0 0 0 2000px rgba(0, 0, 0, .45); cursor: move; touch-action: none; }
.sb-box::after { content: "Face here"; position: absolute; top: -1.6rem; left: 0; font-size: .8rem; font-weight: 700; color: #ffd27a; white-space: nowrap; }
.sb-crop { overflow: hidden; }
.sb-handle { position: absolute; right: -12px; bottom: -12px; width: 24px; height: 24px; border-radius: 50%; background: #ffd27a; border: 3px solid #1a1028; cursor: nwse-resize; }
.sb-row { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; margin: .5rem 0; }
.sb-row label { display: inline-flex; gap: .4rem; align-items: center; color: var(--text); }
.sb-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .6rem; }
.sb-tile { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .6rem .3rem .5rem; border-radius: 8px; border: 2px solid var(--line); background: #140c22; color: var(--text); cursor: pointer; font-weight: 700; font-size: .85rem; }
.sb-tile:hover { border-color: var(--accent-2); }
.sb-tile.is-on { border-color: var(--accent); box-shadow: 0 0 14px rgba(232, 139, 255, .35); }
.sb-tile canvas { image-rendering: pixelated; height: 96px; width: auto; }
.sb-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem .8rem; }
.sb-colors label { display: flex; align-items: center; gap: .5rem; font-size: .95rem; }
.sb-colors input[type=color] { width: 44px; height: 34px; border: 1px solid var(--line); border-radius: 6px; background: none; padding: 0; cursor: pointer; }
.sb-tools { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .6rem; }
.sb-tools button { padding: .45rem .75rem; min-height: 40px; border-radius: 6px; border: 2px solid var(--line); background: #140c22; color: var(--text); cursor: pointer; font-weight: 700; }
.sb-tools button.is-on { border-color: var(--accent); color: var(--white); background: var(--panel-2); }
.sb-editwrap { display: grid; grid-template-columns: 1fr; gap: .6rem; }
#sb-edit { width: 100%; max-width: 560px; aspect-ratio: 1; image-rendering: pixelated; background: #1a1328; border: 1px solid var(--line); border-radius: 6px; touch-action: none; cursor: crosshair; display: block; }
#sb-coords { min-height: 1.3em; font-size: .85rem; color: var(--text-dim); }
.sb-swatches { display: flex; flex-wrap: wrap; gap: .3rem; }
.sb-sw { width: 28px; height: 28px; border-radius: 5px; border: 2px solid rgba(255, 255, 255, .25); cursor: pointer; padding: 0; }
#sb-swatch-now { width: 34px; height: 34px; border-radius: 6px; border: 2px solid var(--white); display: inline-block; }
#sb-mini { image-rendering: pixelated; height: 128px; width: auto; display: block; margin: 0 auto .6rem; }
.sb-steps { padding-left: 1.2rem; color: var(--text); }
.sb-steps li { margin: .35rem 0; }
.sb-note { font-size: .88rem; color: var(--text-dim); }
.sb-after { border: 1px solid rgba(139, 227, 166, .45); background: rgba(139, 227, 166, .06); border-radius: 8px; padding: .9rem 1rem; margin-top: 1rem; }
/* Gallery */
.gal-bar { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; justify-content: space-between; margin: 1rem 0; }
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; }
.gal-card { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .7rem .8rem; text-align: center; }
.gal-card h3 { font-size: 1rem; margin: .4rem 0 .5rem; color: var(--white); word-break: break-word; }
.gal-art { display: block; width: 100%; min-height: 200px; background: radial-gradient(circle at 50% 40%, #3a2160, #140c22 75%); border: 0; border-radius: 8px; cursor: pointer; padding: .5rem 0; }
.gal-art canvas { image-rendering: pixelated; height: 184px; width: auto; }
.gal-row { display: flex; gap: .35rem; justify-content: center; flex-wrap: wrap; }
.gal-like, .gal-btn { padding: .4rem .65rem; min-height: 36px; border-radius: 6px; border: 1px solid var(--line); background: #140c22; color: var(--text); font-weight: 700; font-size: .9rem; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.gal-like.is-on { color: #ff7aa8; border-color: #ff7aa8; }
.gal-btn:hover, .gal-like:hover { border-color: var(--accent); color: var(--white); }
.gal-dialog { background: var(--panel); color: var(--text); border: 1px solid var(--accent-2); border-radius: var(--radius); padding: 1rem 1.2rem; max-width: 420px; }
.gal-dialog::backdrop { background: rgba(5, 2, 12, .75); }
.gal-dialog h2 { margin: 0 0 .5rem; text-align: center; }
.gal-dialog canvas { display: block; margin: 0 auto .6rem; }
.sb-share { margin-top: 1.4rem; position: relative; }
/* ---------- phones & small tablets ---------- */
.sb-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0 .6rem; }
.sb-chips button { padding: .5rem .75rem; min-height: 40px; border-radius: 999px; border: 2px solid var(--line); background: #140c22; color: var(--text); font-weight: 700; cursor: pointer; }
.sb-chips button.is-on { border-color: var(--accent); background: var(--panel-2); color: var(--white); }
@media (max-width: 820px) {
  .sb-hero { padding: 1.2rem 0 .4rem; }
  .sb-hero h1 { font-size: 1.7rem; }
  .sb-hero .lead { font-size: 1rem; }
  .sb-tabs { position: sticky; top: 0; z-index: 30; margin: .6rem -1.25rem .6rem; padding: .45rem 1.25rem; background: rgba(13, 8, 24, .96); backdrop-filter: blur(6px); flex-wrap: nowrap; gap: .3rem; }
  .sb-tabs button { flex: 1 1 0; padding: .55rem .2rem; font-size: .85rem; min-width: 0; }
  .sb-tabs button b { width: 1.3rem; height: 1.3rem; margin: 0 .25rem 0 0; font-size: .75rem; }
  .sb-panel { scroll-margin-top: 70px; padding: .8rem .75rem 1rem; }
  .sb-preview { display: grid; grid-template-columns: 50% 1fr; align-items: center; gap: .2rem .4rem; padding: .4rem; }
  .sb-preview canvas#sb-3d { width: auto; grid-row: 1 / span 2; justify-self: center; touch-action: pan-y; }
  .sb-preview .sb-ctrl { flex-direction: column; align-items: flex-start; gap: .45rem; padding: .2rem 0; font-size: .95rem; }
  .sb-preview .sb-ctrl label { min-height: 32px; display: inline-flex; align-items: center; gap: .4rem; }
  .sb-preview input[type=checkbox], .sb-preview input[type=radio], .sb-panel input[type=checkbox], .sb-panel input[type=radio] { width: 20px; height: 20px; }
  .sb-card { padding: .75rem .75rem .85rem; }
  .sb-tiles { grid-template-columns: repeat(3, 1fr); gap: .45rem; }
  .sb-tile canvas { height: 84px; }
  .sb-tools { gap: .35rem; }
  .sb-tools button { flex: 1 1 calc(33% - .35rem); min-height: 44px; }
  .sb-sw { width: 34px; height: 34px; }
  .sb-row { gap: .5rem .8rem; }
  .sb-row select, .sb-panel input[type=text] { min-height: 40px; font-size: 16px; }
  #sb-edit { max-width: 100%; }
  .sb-handle { width: 34px; height: 34px; right: -17px; bottom: -17px; }
  .sb-panel .btn-row .btn, .sb-file .btn { width: 100%; }
  .sb-file { display: flex; }
  .sb-colors { grid-template-columns: repeat(2, 1fr); }
  .sb-colors input[type=color] { width: 52px; height: 40px; }
}

/* ---------- paint mode switch, 3D painting, try-on ---------- */
.sb-seg { display: inline-flex; border: 2px solid var(--line); border-radius: 8px; overflow: hidden; }
.sb-seg button { padding: .5rem .85rem; min-height: 42px; background: #140c22; color: var(--text); border: 0; font-weight: 700; cursor: pointer; }
.sb-seg button + button { border-left: 2px solid var(--line); }
.sb-seg button.is-on { background: var(--accent-2); color: var(--white); }
.sb-pmode { margin: 0 0 .7rem; }
.sb-turn { min-width: 44px; min-height: 42px; border-radius: 8px; border: 2px solid var(--line); background: #140c22; color: var(--white); font-size: 1.2rem; cursor: pointer; }
.paint3d #sb-3d { cursor: crosshair; touch-action: none !important; outline: 2px dashed rgba(232, 139, 255, .5); outline-offset: -2px; border-radius: 6px; }
.sb-tryon select { max-width: 100%; }
@media (max-width: 820px) {
  .sb-preview canvas#sb-3d { grid-row: 1 / span 3; }
  .paint3d .sb-preview { position: sticky !important; top: 62px; z-index: 20; box-shadow: 0 8px 18px rgba(0, 0, 0, .55); }
  .sb-pmode { display: flex; } .sb-pmode button { flex: 1; }
}

/* ---------- floating undo / redo ---------- */
.sb-editwrap { position: relative; max-width: 560px; }
.sb-preview { position: relative; }
.sb-float { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; z-index: 5; }
.sb-fbtn { min-height: 44px; min-width: 44px; padding: .35rem .8rem; border-radius: 999px; background: rgba(20, 12, 34, .92); border: 2px solid var(--accent); color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.sb-fbtn:disabled { opacity: .35; border-color: var(--line); cursor: default; }
.sb-preview .sb-float { display: none; }
.paint3d .sb-preview .sb-float { display: flex; }
.sb-tools button:disabled { opacity: .4; cursor: default; }