@font-face {
  font-family: "Poppins";
  src: url("./fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

h1 {
  font-family: "Poppins-Black";
  font-size: 28pt;
  font-weight: 800;
}


/* ---------- Dark theme tokens ---------- */
:root{
  --bg-00: #151515;
  --bg-01: #1c1c1c;
  --bg-02: #252525;
  --bg-03: #2f2f2f;
  --line-01: #383838;
  --line-02: #4a4a4a;
  --text-00: #f2f2f2;
  --text-01: #d7d7d7;
  --accent-ok: #1d7f4a;   /* symmetry on */
  --accent-ok-2: #23965a; /* hover */
  --shadow-01: 0 2px 10px rgba(0,0,0,.28);
}

/* ---------- Toolbar shell ---------- */
.preview-canvas-wrap{ position:relative; }

.paint-toolbar{
  position:absolute; top:12px; left:12px;
  display:flex; gap:8px; align-items:center;
  background: rgba(20,20,20,.72);
  border: 1px solid var(--line-01);
  border-radius: 8px;
  padding: 6px;
  box-shadow: var(--shadow-01);
  backdrop-filter: blur(4px);
}

/* ---------- Icon buttons ---------- */
.btn-icon{
  width: 34px; height: 34px;
  display: inline-grid; place-items: center;
  font-size: 16px; line-height: 1;
  color: var(--text-00);
  background: var(--bg-03);
  border: 1px solid var(--line-01);
  border-radius: 6px;
  cursor: pointer;
  transition:
    background-color .15s ease,
    border-color .15s ease,
    transform .05s ease,
    filter .15s ease;
}

/* gentle lighten like your template row */
.btn-icon:hover{
  background: #3a3a3a;       /* slightly lighter */
  border-color: var(--line-02);
  filter: brightness(1.05);
}

.btn-icon:active{ transform: translateY(1px); }

/* symmetry ON state */
.btn-icon.on{
  background: var(--accent-ok);
  border-color: #27b36a;
}
.btn-icon.on:hover{
  background: var(--accent-ok-2);
  border-color: #2fc77e;
}

.html {
  background: #000000;
}

/* src/tattoo/tattoo.css */
.tattoo-app { display: grid; grid-template-columns: 360px 1fr; gap: 16px; width: 100%; height: 100%; }


.row.between { display: flex; justify-content: space-between; align-items: center; }
.section { margin: 12px 0; }
.button { display: inline-block; padding: 8px 12px; background: #454545; color:#8e8e8e; border-radius:10px; cursor:pointer; transition: background-color 0.25s ease-in-out;}
.button:hover { display: inline-block; padding: 8px 12px; background: #111; color:#8e8e8e; border-radius:10px; cursor:pointer; }

.export-ghost { background: #807922; border: 1px solid #000000; padding: 6px 10px; border-radius:3px; }
.export-ghost :hover { background: #3dd03a; border: 1px solid #000000; padding: 6px 10px; border-radius:3px; }
.danger { background: #b40000; color: #fff; border: none; padding: 8px 12px; border-radius: 3px; }
.thumb-wrap { margin-top:8px; border:1px solid #eee; border-radius:3px; overflow:hidden; }
.thumb { width:100%; display:block; }
.label { font-size: 12px; color:#a3a3a3; margin-bottom: 6px; }
.check { display:block; margin: 4px 0; }
.swatches { display:flex; gap:8px; flex-wrap:wrap; }
.swatch { width:22px; height:22px; border-radius:50%; border:1px solid rgba(0,0,0,0.1); cursor:pointer; }
.only-mobile { display:none; }
@media (max-width: 1024px) {
  .tattoo-app { grid-template-columns: 1fr; }
  .only-mobile { display:inline-block; }
}
/* app frame */
.tattoo-app { width: 100%; height: 100%; }
.tattoo-header { padding: 8px 12px; }
.tattoo-layout {
  display: grid;
  grid-template-columns: 500px 1fr;  /* left panel width */
  gap: 16px;
  width: 100%;
  margin-top:15px;
  height: calc(100vh - 25px);        /* header ~64px; adjust if needed */
}

/* left panel */
.tattoo-left {
  border: 1px solid #000000;
  border-radius: 10px;
  background: #343434;
  padding: 12px;
  overflow: auto;
  max-height: calc(100vh - 0vh);    /* keep it scrollable, not huge */
}

/* right pane fills */
.tattoo-right {
  min-height: calc(100vh - 80px);
}


.tattoo-left .thumb {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* responsive: stack on narrow screens */
@media (max-width: 1024px) {
  .tattoo-layout { grid-template-columns: 1fr; }
}
/* Make the root just a block container */
.tattoo-app {
    display: block;        /* ⬅ overrides any previous grid */
    width: 100%;
    height: 100%;
    background: #242424;
  }
  
 

  
  /* Stack on narrow screens */
  @media (max-width: 1024px) {
    .tattoo-layout { grid-template-columns: 1fr; }
  }
/* Perfect circular swatches */
.swatches {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
  }
  
  .swatch {
    /* remove default button sizing that makes ovals */
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(0,0,0,0.12);
    box-sizing: border-box;
    padding: 0;            /* ⬅ no padding */
    margin: 0;
  
    /* force a square, then round */
    width: 28px;
    height: 28px;
    aspect-ratio: 1 / 1;   /* guards against layout quirks */
    border-radius: 50%;
  
    /* visuals */
    cursor: pointer;
    display: inline-block;
    background: #ccc;      /* overwritten inline */
  }
  
  .swatch:focus {
    outline: 2px solid #111;   /* keyboard focus ring */
    outline-offset: 2px;
  }
  
  .swatch.is-selected {
    box-shadow: 0 0 0 2px #111 inset;
  }
    
  /* src/tattoo/tattoo.css */


  /* Make preview the collapsible region */
  .preview-collapse {
    transition: max-height 300ms ease, opacity 300ms ease;
  }
  

  /* Preview structure */
  .preview-root {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #000000;
  }
  .preview-topbar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding: 8px 10px;
    background: #676767;
    backdrop-filter: blur(6px);
    border-bottom: 1px solid #000000;
  }
  .preview-canvas-wrap { flex: 1; min-height: 0; }
  
  /* ---------- Mobile bottom drawer ---------- */
@media (max-width: 768px) {
    .tattoo-layout {
      position: relative;
      display: block;
    }
  
    .tattoo-right {
      position: relative;
      height: calc(100vh - 64px);          /* adjust to your header height */
      overflow: hidden;
    }
  
    .preview-topbar {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
        padding: 8px 0 0 10px;
        background: rgba(255,255,255,0.95);
        backdrop-filter: blur(6px);
        border-bottom: 1px solid #eee;
      }

    /* Drawer */
    .tattoo-left {
      position: absolute;
      left: 0;
      right: 0;
      bottom: env(safe-area-inset-bottom, 0); /* keep off OS home bar */
      z-index: 10;
  
      background: #fff;
      box-shadow: 0 -12px 30px rgba(0,0,0,0.16);
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
  
      /* slide animation */
      --lp-offset: 0;
      transform: translateY(var(--lp-offset));
      transition: transform 280ms ease;
  
      max-height: 40vh;                    /* drawer height */
      overflow: auto;
      margin: 0;                           /* prevents the “cut off” look */
      padding-bottom: max(56px, env(safe-area-inset-bottom, 0)); /* room above tab */
    }
  
    /* Closed: keep only ~40px visible for the tab area */
    .tattoo-left.closed {
      --lp-offset: calc(100% - 40px);      /* tighter than 44px → no header clipping */
    }
  
    /* TAB (appears when drawer is closed) */
    .overlay-tab {
      position: absolute;
      left: 50%;
      bottom: 12px;
      transform: translateX(-50%);
      z-index: 11;
  
      height: 38px;
      padding: 0 14px;
      border-radius: 30px;
      background: #111;
      color: #fff;
      border: none;
      font-weight: 600;
      line-height: 38px;
      white-space: nowrap;
      box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    }
  
    /* HANDLE (shown when drawer is open) */
    .drawer-handle {
      position: sticky;
      top: 0;                 /* sticks to the top of the drawer as you scroll it */
      z-index: 2;
      display: flex;
      justify-content: center;
      padding-top: 8px;
      padding-bottom: 6px;
      background: linear-gradient(#ffffff, #ffffff); /* solid to hide content underneath */
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
    }
    .drawer-handle .handle-pill {
      height: 34px;
      padding: 0 14px;
      border-radius: 3px;
      border: 1px solid #e5e5e5;
      background: #fff;
      color: #111;
      font-weight: 600;
      line-height: 34px;
      box-shadow: 0 6px 14px rgba(0,0,0,0.08);
    }
  
    .only-mobile { display: block !important; }
  }
  
  @media (min-width: 769px){
    .only-mobile { display: none !important; }
  }
  


  /* --- smaller mobile drawer --- */
@media (max-width: 768px){
  .tattoo-left { max-height: 50vh; }   /* was 78–80vh */
}

/* --- mobile part chip strip --- */
@media (max-width: 768px){
  .part-strip {
    display: flex;
    gap: 8px;
    padding: 6px 8px 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

}
/* Chip strip inside the left panel */
.part-strip.in-panel {
    display: flex;
    gap: 8px;
    padding: 6px 0 2px;
    flex-wrap: wrap;       /* wrap nicely in the panel */
  }
  
  .part-chip {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #000000;
    background: #454545;
    color: #8e8e8e;
    font-weight: 600;
    font-size: 13px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    white-space: nowrap;
    transition: background-color 0.25s ease-in-out;
  }
  
  .part-chip:hover {
    background: #111;
  }
  
  .part-chip.on {
    background: #111;
    color: #fff;
    border-color: #111;
  }
  .layers-list { display: flex; flex-direction: column; gap: 8px; }
.layer-row {
  display: grid;
  grid-template-columns: 28px 1fr 110px minmax(120px,1fr) minmax(120px,1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid #eee;
  border-radius: 3px;
  background: #fff;
}
.layer-name { width: 100%; padding: 6px 8px; border: 1px solid #000000; border-radius: 3px; }
.slider-col { display: grid; grid-template-rows: auto auto; align-items: center; }
.slider-col .mini { font-size: 11px; color: #666; margin-bottom: 2px; }

.icon { width: 100px; height: 28px; border-radius: 3px; border: 1px solid #e5e5e5; background: #fafafa; }
.icon.eye.on { background: #0f172a; border-color: #0f172a; }
.icon.eye::after { content: "👁"; font-size: 14px; }
.icon.up::after { content: "↑"; }
.icon.down::after { content: "↓"; }
.icon.trash::after { content: "✕"; }
.icon:disabled { opacity: 0.4; }

@media (max-width: 768px) {
  .layer-row {
    grid-template-columns: 28px 1fr 100px 1fr;
    grid-template-rows: auto auto;
  }
  .blend { grid-column: 3 / 4; }
  .slider-col:nth-of-type(4) { grid-column: 1 / -1; }
  .slider-col:nth-of-type(5) { grid-column: 1 / -1; }
}
/* tattoo.css */

/* Panel sizing */

  


  /* tattoo.css */

.decal-editor .uv-wrap canvas{
    image-rendering: auto; /* crisp guides/scans */
  }
  .decal-editor label{
    font-size: 12px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .decal-editor input[type="range"]{
    width: 140px;
  }


/* highlight selected layer */
.layer-row.is-selected { outline: 2px solid #1a1a1a; border-radius: 3px; }

/* editor canvas holder (DecalEditor uses .uv-editor) */
.uv-editor { width: 100%; aspect-ratio: 1 / 1; border-radius: 3px; overflow: hidden; background:#f6f6f6; }

.layer-card {
    background:#fd6d6d6f;
    border:1px solid #ddd;
    border-radius:10px;
    padding:8px 12px;
    margin-bottom:12px;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .layer-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .layer-controls {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
  }
  .layer-controls .slider {
    flex:1 1 100%;
  }
  
  .layers-list { margin-top: 10px; }



.layer-name {
  flex: 1;
  min-width: 0;
  font: inherit;
  padding: 6px 8px;
  border: 1px solid #111;
  background:#8e8e8e;
  border-radius: 3px;
}

.layer-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.layer-controls .control {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.layer-controls .flex-1 { flex: 1 1 140px; }

.layer-controls input[type="range"] { width: 100%; }

.order {
  margin-left: auto;
  display: flex;
  gap: 6px;
  align-items: center;
}

.icon.eye.on { filter: none; opacity: 1; }
/* --- PATCH: tidy buttons, icons, panel width, overflow, and card layout --- */

/* Buttons */

  .ghost {
    background: #454545; color:#8e8e8e; border: 1px solid #000000;
    padding: 6px 10px; border-radius: 10px; font-weight: 600;
  }

  .ghos:hover {
    background: #111; color:#8e8e8e; border: 1px solid #000000;
    padding: 6px 10px; border-radius: 10px; font-weight: 600;
  }
  

  

  
  /* Icons (eye/up/down/trash) */
  .icon {
    width:80px; height: 28px;
    display: grid; place-items: center;  /* center the glyph */
    border-radius: 63px; border: 1px solid #e5e5e5;
    background: #fafafa; color: #111;   /* ensure visible by default */
    line-height: 0; font-size: 14px;
  }
  .icon::after { color: inherit; }       /* emoji inherits color */
  .icon.eye.on {
    background: #111; color:#fff; border-color:#111;
  }
  
  /* Layer cards (ensure consistent spacing) */
  .layers-list { margin-top: 10px; display:flex; flex-direction:column; gap: 10px; }
  .layer-card {
    background: #1b1b1b; border: 1px solid #000000; border-radius: 12px;
    padding: 10px 12px; display:flex; flex-direction:column; gap: 10px;
  }
  .layer-head { display:flex; align-items:center; justify-content:space-between; gap: 8px; }
  .layer-name {
    flex: 1; min-width: 0; padding: 6px 8px;
    border: 1px solid #ddd; border-radius: 8px; font: inherit;
  }
  .layer-controls { display:flex; align-items:center; flex-wrap:wrap; gap: 12px; }
  .layer-controls .control { display:flex; flex-direction:column; gap: 6px; }
  .layer-controls .flex-1 { flex: 1 1 140px; }
  .layer-controls input[type="range"] { width: 100%; }
  .order { margin-left:auto; display:flex; gap: 6px; align-items:center; }
  
  /* Swatches (keep perfectly round) */
  .swatch {
    appearance:none; -webkit-appearance:none; padding:0; margin:0;
    width: 28px; height: 28px; aspect-ratio: 1 / 1; border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.12);
  }
  
::-webkit-scrollbar {
  width: 10px; /* Adjust width as needed */
  background-color: #333; /* Dark background for the scrollbar track */
}
/* Style the scrollbar thumb (the draggable handle) */
::-webkit-scrollbar-thumb {
  background-color: #555; /* Darker color for the thumb */
  border-radius: 5px; /* Rounded corners for the thumb */
}

  @media (max-width: 1024px){ .tattoo-layout { grid-template-columns: 1fr; } }
  
  /* small chips for UV template buttons */
.uv-templates {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.uv-templates .chip {
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid #000000;
  background: #454545;
  color: #8e8e8e;
  font-weight: 600;
  font-size: 12px;
  transition: background-color 0.25s ease-in-out;
}

.uv-templates :hover {

  background: #111;
}

.uv-templates .chip.ghost {
  background: #111; color: #fff; border-color: #111;
}
/* ensure consistent vertical rhythm inside the left panel */
/* ---------- Left panel: single source of truth ---------- */


/* Ensure inner sections don't make their own scrollbars */
.left-panel .section,
.left-panel .layers-list,
.left-panel .layer-card,
.left-panel .uv-editor,
.left-panel .uv-stage{
  overflow: visible !important;
  max-width: 100% !important;
}

/* Square editor with CONTAIN’d guide (no stretch squish) */
.uv-editor{
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #f6f6f6;
}
.uv-editor::before{ content:""; display:block; padding-top:100%; }
.uv-stage{
  position:absolute; inset:0;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain; /* keep guide proportions; calibration handles the rest */
  cursor:grab;
}
.uv-stage:active{ cursor:grabbing; }
.uv-stage img{
  position:absolute; left:50%; top:50%;
  transform-origin:center center;
  user-select:none; pointer-events:none;
  max-width:80%; max-height:80%;
}

/* Sticky Clear-all footer that never overlaps content */
.clear-footer{
  position: absolute;
  bottom: 12px;
  z-index: 1;
  padding: 10px 0 6px;
  
}
.clear-footer .danger{ width:100%; display:block; }



/* ===== GLOBAL LAYOUT (final overrides) ===== */
html, body, #root {
  height: 100%;
  overflow: hidden;   
  background: #262626 !important;
        /* ← stop page scroll */
}

/* Your two-column grid fills the viewport */

/* Left panel: the ONLY scroller */
.left-panel {
  width: 450px; min-width: 460px; max-width: 460px;
  
  overflow-y: auto;         /* ← one vertical scrollbar here */
  overflow-x: hidden;
  padding-bottom: 12px;    /* room above Clear All sticky footer */
}

/* Right side never creates a scrollbar */
.tattoo-right, .preview-root, .preview-canvas-wrap {
  height: 100%;
  overflow: hidden;  
  background: #262626;       /* ← prevent a 2nd scrollbar */
}

/* UV editor stays square; no inner scrollbars */
.uv-editor { position: relative; width: 100%; border-radius: 12px; overflow: hidden; background:#f6f6f6; }
.uv-editor::before { content:""; display:block; padding-top:100%; }
.uv-stage { position:absolute; inset:0; background-position:center; background-repeat:no-repeat; background-size:contain; cursor:grab; }
.uv-stage:active { cursor:grabbing; }


/* Crosshair while painting */
.painting-on canvas { cursor: crosshair !important; }


/* force UV layer images to fill the editor */
.uv-editor img {
  max-width: 100% !important;
  max-height: 100% !important;
}

/* ====== DARK THEME CORE ====== */
:root {
  --bg: #1b1f24;
  --panel: #20252b;
  --panel-2: #1f2329;
  --panel-3: #262b32;
  --text: #e7ebf0;
  --muted: #a7b0bb;
  --border: #0c0f12;
  --shadow: rgba(0,0,0,.35);

  --btn-bg: #2a2f36;
  --btn-bg-hover: #313740;
  --btn-border: #111417;

  --chip-bg: #23282f;
  --chip-on: #323942;

  --accent: #22c55e;    /* symmetry ON */
  --danger: #ef4444;    /* clear */
  --primary: #0ea5e9;   /* save/upload if you want */
}

/* Layout panes */
.preview-root,
.left-panel { color: var(--text); }
.left-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 2px 10px var(--shadow), inset 0 1px 0 rgba(255,255,255,.02);
}
.preview-canvas-wrap {
  background: #2b2f35;
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

/* ====== Button system (labels and buttons unified) ====== */
.button, .btn, button, .chip, .part-chip {
  font: 500 13px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.button, .btn, .chip, .part-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 92px;                 /* <- fixes the narrow buttons */
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--btn-border) !important;
  background: var(--btn-bg) !important;
  color: var(--text) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
  transition: background .12s ease, border-color .12s ease, transform .05s ease;
  cursor: pointer;
}
.button:hover, .btn:hover, .chip:hover, .part-chip:hover {
  background: var(--btn-bg-hover) !important;
  border-color: #1a1f24 !important;
}
.button:active, .btn:active, .chip:active, .part-chip:active { transform: translateY(1px); }

/* “ghost” version */
.button.ghost, .btn-ghost, .chip.ghost, .export-ghost {
  background: var(--chip-bg) !important;
  min-width: 92px;
}

/* Danger & primary accents */
.btn-danger { background: #3a2222 !important; border-color: #4a1f1f !important; }
.btn-danger:hover { background: #4a2626 !important; }
.btn-primary { background: #0e3b55 !important; border-color: #0b2b3e !important; }
.btn-primary:hover { background: #124561 !important; }

/* Topbar buttons look like the rest */
.preview-topbar .btn,
.preview-topbar button { margin-right: 8px; }

/* ====== Paint toolbar (symmetry/undo/redo) ====== */
.paint-toolbar {
  position: absolute; top: 12px; left: 12px;
  display: flex; gap: 8px;
  padding: 10px;
  border-radius: 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px var(--shadow), inset 0 1px 0 rgba(255,255,255,.03);
  z-index: 50;
}
.tt-btn.tt-icon {
  width: 36px; height: 36px; min-width: 36px; padding: 0;
  border-radius: 10px;
  background: var(--btn-bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--btn-border) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.tt-btn.tt-icon:hover { background: var(--btn-bg-hover) !important; border-color: #1a1f24 !important; }
.tt-btn.tt-icon[data-active="true"] {
  background: var(--accent) !important;
  border-color: #166534 !important;
  color: #0b1410 !important;
}

/* Don’t show keyboard focus ring on the paint toolbar buttons */
.tt-btn:focus,
.tt-btn:focus-visible { outline: none !important; box-shadow: none !important; }

/* While actually painting (body.painting-on is already toggled), kill stray focus */
body.painting-on *:focus { outline: none !important; }

/* ====== Chips (parts/templates) ====== */
.part-chip, .chip {
  min-width: 84px;
  height: 32px;
  border-radius: 8px;
  background: var(--chip-bg) !important;
}
.part-chip.on { background: var(--chip-on) !important; }

/* ====== Skin swatches (use inline CSS var) ====== */
.swatches { display: flex; gap: 8px; }
.swatches .swatch {
  width: 22px; height: 22px; border-radius: 50%;
  background-color: var(--swatch) !important;
  border: 1px solid var(--border) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
  cursor: pointer;
}
.swatches .swatch.is-selected { outline: 2px solid rgba(255,255,255,.25); outline-offset: 2px; }

/* ====== Panels/sections/labels ====== */
.section { background: transparent; border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.section + .section { margin-top: 12px; }
.label { font-size: 12px; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; }

/* Inputs/sliders in left panel */
.left-panel input[type="range"] { width: 100%; }

/* ================================
   Make ALL buttons match paint pills
   (scoped to .tattoo-app)
   ================================ */

.tattoo-app {
  --btn-bg: #1b1c1e;
  --btn-bg-hover: #252b38;
  --btn-bg-active: #0c0c0c;
  --btn-border: #2d3442;
  --btn-radius: 8px;
  --btn-height: 36px;
  --ink: #ffffff;
}

/* Generic buttons: text buttons, chips, “ghosts”, etc. */
.tattoo-app .btn,
.tattoo-app .button,
.tattoo-app .chip,
.tattoo-app .part-chip,
.tattoo-app .export-ghost,
.tattoo-app .preview-topbar button,
.tattoo-app .left-panel .row .button,
.tattoo-app .left-panel .section .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-height);
  padding: 0 12px;
  background: var(--btn-bg) !important;
  color: var(--ink) !important;
  border: 1px solid var(--btn-border) !important;
  border-radius: var(--btn-radius) !important;
  line-height: 1;
  gap: .5rem;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, transform .05s ease;
  box-shadow: none !important;
}

.tattoo-app .btn:hover,
.tattoo-app .button:hover,
.tattoo-app .chip:hover,
.tattoo-app .part-chip:hover,
.tattoo-app .export-ghost:hover,
.tattoo-app .preview-topbar button:hover {
  background: var(--btn-bg-hover) !important;
}

.tattoo-app .btn:active,
.tattoo-app .button:active,
.tattoo-app .chip:active,
.tattoo-app .part-chip:active,
.tattoo-app .export-ghost:active,
.tattoo-app .preview-topbar button:active {
  background: var(--btn-bg-active) !important;
  transform: translateY(1px);
}

/* Icon pill (your symmetry/undo/redo) stays fixed-size */
.tattoo-app .paint-toolbar .btn-icon {
  width: var(--btn-height);
  height: var(--btn-height);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: var(--btn-radius);
  color: var(--ink);
}
.tattoo-app .paint-toolbar .btn-icon:hover { background: var(--btn-bg-hover); }
.tattoo-app .paint-toolbar .btn-icon:active { background: var(--btn-bg-active); transform: translateY(1px); }
/* keep the green ON state you already liked */
.tattoo-app .paint-toolbar .btn-icon.on {
  background: linear-gradient(180deg, #20e18e, #17b76f) !important;
  border-color: #0d8f58 !important;
  color: #052d1b !important;
  box-shadow: 0 0 0 1px rgba(25,195,125,.28) inset, 0 4px 12px rgba(25,195,125,.22);
}

/* Kill weird widths (some old rules force min-width/inline) */
.tattoo-app button,
.tattoo-app .button,
.tattoo-app .chip,
.tattoo-app .part-chip {
  min-width: 0;
}

/* Keep skin swatches circular and clickable (no change to look) */
.tattoo-app .swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.tattoo-app .swatch {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid var(--btn-border);
  box-shadow: none;
}
.tattoo-app .swatch.is-selected {
  outline: 3px solid rgba(0, 0, 0, 1);
  outline-offset: 2px;
}

/* Prevent green browser focus ring while painting with D/E */
body.painting-on .tattoo-app button:focus,
body.painting-on .tattoo-app button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
/* attach UV editor visually to its layer */
.layers-panel .layer-card { display:flex; flex-direction:column; gap:10px; }
.layers-panel .layer-card.is-open { outline: 1px solid rgba(255,255,255,.06); }
.layers-panel .layer-body { padding: 8px; border-radius: 8px; background: rgba(0,0,0,.06); }

/* put in your CSS */
.morph-panel {
  position: absolute;
  left: 24px;
  top: 72px;
  width: 300px;
  padding: 10px;
}
.morph-row {
  display: grid;
  grid-template-columns: 1fr 140px;
  gap: 10px;
  align-items: center;
  margin: 6px 0;
}
.morph-name { font-size: 12px; opacity: 0.85; }
/* === OVERRIDES (place at the very end of tattoo-ui.css) === */

/* Left panel: wider, symmetric padding, no horizontal scroll */
.tt-panel.left-panel {
  width: 450px !important;                 /* tweak as you like */
  padding-left: 14px !important;
  padding-right: 14px !important;
  padding-bottom: 12px !important;
  overflow-x: hidden !important;
  gap: 0px!important;
}

.tt-panel.left-panel .section,
.tt-panel.left-panel .tt-panel {
  margin-bottom: 10px !important;          /* tighter vertical rhythm */
}

/* Make left panel content not cause overflow */
.tt-panel.left-panel * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Layout: stretch both columns to the bottom */
.preview-root {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  padding-bottom: 0px !important;         /* small bottom breathing room */
}

/* Tighten the gap under the top toolbar */
.preview-root .tt-toolbar {
  margin-bottom: 1px !important;
}

/* Right side: remove the “black band”, fill space, rounded bottom corners */
.tt-panel.preview-canvas-wrap {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: #222 !important;             /* darker frame */
  border-radius: 0 0 12px 12px !important; /* rounded bottom corners */
  overflow: hidden !important;             /* clip canvas to radius */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

/* Ensure Canvas fills wrapper completely */
.tt-panel.preview-canvas-wrap > canvas,
.tt-panel.preview-canvas-wrap > div {
  height: 100% !important;
  width: 100% !important;
  display: block !important;
}

/* Optional: slightly tighter spacing in the morph dock to match new rhythm */
.overlay-dock { gap: 6px !important; }
.overlay-dock .overlay-toolbar { padding: 6px 8px !important; width: 300px;}

/* somewhere in your global CSS */
.swatch{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: var(--swatch, #888); /* fallback prevents “blank” */
  cursor: pointer;
}
.swatch.is-selected{
  outline: 2px solid #fff;
  outline-offset: 0;
}

/* optional highlight on selected swatch */
.swatch.is-selected {
  outline: 2px solid #fff;
  box-shadow: 0 0 0 3px #111, 0 0 0 5px #00ffff;
}

/* in src/tattoo/tattoo.css or tattoo-ui.css */
.tattoo-right { position: relative; }

/* Ensure the right-hand canvas section lays out correctly */
.tattoo-app .preview-root { display: flex; flex-direction: column; min-height: 0; }
.tattoo-app .preview-canvas-wrap {
  position: relative;          /* anchor for overlays */
  min-height: 64vh;            /* give it a body; adjust as you like */
  height: 100%;
}
.tattoo-app .tattoo-right { position: relative; min-height: 0; }/* -----------------------------------------
   Tattoo App UI – scoped + layered
   ----------------------------------------- */
   @layer reset, base, components, utilities;

   /* ====== RESET (only inside the app scope) ====== */
   @layer reset {
     .tattoo-app, .tattoo-app * { box-sizing: border-box; }
     .tattoo-app button, .tattoo-app input, .tattoo-app select, .tattoo-app textarea {
       font: 200;
       font-weight: 100;
       color: inherit;
     }
     .tattoo-app button { background: none; border: none; padding: 0; }
     .tattoo-app img { max-width: 100%; display: block; }
   }
   
   /* ====== BASE (design tokens + core) ====== */
   @layer base {
     .tattoo-app.theme-dark {
       --bg-app:         #12161c;
       --bg-panel:       #161a21;
       --bg-panel-2:     #1b1f26;
       --bg-elev:        #171c24;
       --fg:             #e9eef7;
       --fg-dim:         #b9c2cf;
       --border:         #2a2f3b;     /* kills #e5e7eb */
       --border-in:      #0f141a;
       --shadow-lg:      0 8px 24px rgba(0,0,0,.35);
       --shadow-sm:      0 2px 8px rgba(0,0,0,.35);
   
       --accent:         #407554;     /* primary */
       --success:        #22c55e;
       --warning:        #f59e0b;
       --danger:         #ef4444;
   
       --btn-bg:         #203028;
       --btn-hover:      #232a35;
       --btn-active:     #11161d;
   
       --radius-lg:      14px;
       --radius-md:      10px;
       --radius-sm:      8px;
   
       --focus:          color-mix(in srgb, var(--accent) 65%, white 0%);
     }
   
     .tattoo-app {
       color: var(--fg);
       background: var(--bg-app);
     }
   
     /* Panels / containers */
     .tattoo-app .tt-panel{
       background: var(--bg-panel);
       border: 1px solid var(--border);
       border-radius: var(--radius-lg);
       box-shadow: var(--shadow-lg), inset 0 1px 0 var(--border-in);
     }
   
     .tattoo-app .tt-toolbar{
       background: var(--bg-panel-2);
       border: 1px solid var(--border);
       border-radius: var(--radius-lg);
       box-shadow: var(--shadow-sm), inset 0 1px 0 var(--border-in);
       padding: 6px;
       padding-right: 20px;
       display: inline-flex;
       gap: 8px;
     }
   
     /* Inputs */
     .tattoo-app input[type="text"],
     .tattoo-app input[type="number"],
     .tattoo-app input[type="color"],
     .tattoo-app select,
     .tattoo-app textarea{
       background: var(--bg-panel-2);
       color: var(--fg);
       border: 1px solid var(--border);
       border-radius: var(--radius-md);
       padding: 8px 10px;
       outline: none;
       box-shadow: inset 0 1px 0 var(--border-in);
     }
     .tattoo-app input:focus,
     .tattoo-app select:focus,
     .tattoo-app textarea:focus {
       border-color: var(--focus);
     }
   
     /* Sliders */
     .tattoo-app input[type="range"]{
       width: 100%;
       appearance: none;
       height: 4px;
       background: var(--bg-panel-2);
       border-radius: 999px;
       outline: none;
       border: 1px solid var(--border);
     }
     .tattoo-app input[type="range"]::-webkit-slider-thumb{
       appearance: none;
       width: 16px; height: 16px;
       border-radius: 50%;
       background: var(--fg);
       border: 1px solid var(--border);
       box-shadow: 0 1px 3px rgba(0,0,0,.4);
       cursor: pointer;
     }
   }
   
   /* ====== COMPONENTS (buttons, chips, trays) ====== */
   @layer components {
     /* Buttons */
     .tattoo-app .tt-btn{
       -webkit-tap-highlight-color: transparent;
       appearance: none;
       border: 1px solid var(--border);
       background: var(--btn-bg);
       color: var(--fg);
       border-radius: var(--radius-md);
       padding: 10px 14px;
       font: 500 14px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
       display: inline-flex;
       align-items: center;
       gap: 8px;
       height: 38px;
       cursor: pointer;
       box-shadow: var(--shadow-sm), inset 0 1px 0 var(--border-in);
       transition: background .15s ease, border-color .15s ease, transform .05s ease, box-shadow .15s ease;
     }
     .tattoo-app .tt-btn:hover{ background: var(--btn-hover); border-color: color-mix(in srgb, var(--border) 70%, white 30%); }
     .tattoo-app .tt-btn:active{ background: var(--btn-active); transform: translateY(1px); }
     .tattoo-app .tt-btn:focus-visible{ outline: 2px solid var(--focus); outline-offset: 2px; }
   
     .tattoo-app .tt-btn--icon{
       width: 40px; height: 40px; padding: 0; justify-content: center;
       border-radius: 12px;
     }
     .tattoo-app .tt-btn svg{ width: 18px; height: 18px; fill: currentColor; }
   
     /* Accents (outline style text color) */
     .tattoo-app .tt-btn--primary{ color: var(--accent); }
     .tattoo-app .tt-btn--success{ color: var(--success); }
     .tattoo-app .tt-btn--warning{ color: var(--warning); }
     .tattoo-app .tt-btn--danger{  color: var(--danger);  }
   
     /* Solid variants */
     .tattoo-app .tt-btn--fill-primary{
       background: color-mix(in srgb, var(--accent) 24%, var(--btn-bg) 76%); color: white;
     }
     .tattoo-app .tt-btn--fill-primary:hover{
       background: color-mix(in srgb, var(--accent) 34%, var(--btn-bg) 66%);
     }
     .tattoo-app .tt-btn--fill-danger{
       background: color-mix(in srgb, var(--danger) 28%, var(--btn-bg) 72%); color: white;
     }
     .tattoo-app .tt-btn--fill-danger:hover{
       background: color-mix(in srgb, var(--danger) 38%, var(--btn-bg) 62%);
     }
   
     /* Toggled state (e.g., symmetry on) */
     .tattoo-app .tt-btn.is-active{
       border-color: color-mix(in srgb, var(--success) 55%, var(--border) 45%);
       box-shadow:
         0 2px 10px rgba(0,0,0,.38),
         inset 0 1px 0 color-mix(in srgb, var(--success) 45%, var(--border-in) 55%);
     }
   
     /* Button groups (tray) */
     .tattoo-app .tt-btn-group{
       display: inline-flex;
       gap: 8px;
       padding: 6px;
       border-radius: 14px;
       background: var(--bg-panel-2);
       border: 1px solid var(--border);
       box-shadow: var(--shadow-lg), inset 0 1px 0 var(--border-in);
     }
   
     /* Chips (Parts/Templates) */
     .tattoo-app .tt-chip{
       background: var(--bg-panel-2);
       color: var(--fg);
       border: 1px solid var(--border);
       border-radius: 8px;
       padding: 6px 10px;
       font-weight: 200;
       font-size: 10pt;
       cursor: pointer;
       transition: background .15s ease, border-color .15s ease;
     }
     .tattoo-app .tt-chip:hover{ background: var(--btn-hover); }
     .tattoo-app .tt-chip.is-active{
       border-color: var(--focus);
       color: color-mix(in srgb, var(--fg) 85%, var(--accent) 15%);
       background: #111 !important;
     }
   
     /* Small labels / headers */
     .tattoo-app .tt-section-title{
       font-weight: 300;
       font-size: 12px;
       letter-spacing: .02em;
       color: var(--fg-dim);
       text-transform: uppercase;
     }
   }
   
   /* ====== UTILITIES ====== */
   @layer utilities {
     .tattoo-app .tt-row{ display: flex; gap: 8px; align-items: center; }
     .tattoo-app .tt-col{ display: flex; flex-direction: column; gap: 8px; }
     .tattoo-app .tt-grow{ flex: 1 1 auto; }
     .tattoo-app .tt-right{ margin-left: auto; }
     .tattoo-app .tt-muted{ color: var(--fg-dim); }
     .tattoo-app .tt-pad-s{ padding: 6px; }
     .tattoo-app .tt-pad-m{ padding: 10px; }
     .tattoo-app .tt-pad-l{ padding: 16px; }
   }

   /* === Grey-on-grey theme override ======================================= */
.tattoo-app.theme-dark {
    --bg:            #262626;   /* page */
    --panel:         #2b2b2b;   /* panels / canvas wrapper */
    --panel-2:       #000000;   /* inner blocks, cards */
    --elev:          #1f1f1f;   /* button group backing */
    --text:          #878787;
    --muted:         #bdbdbd;
  
    /* subtle dark borders instead of #e5e7eb */
    --border:        rgba(255,255,255,0.08);
    --border-2:      rgba(255,255,255,0.10);
  
    /* button surfaces */
    --btn:           #2f2f2f;
    --btn-hover:     #383838;   /* gentle lighten */
    --btn-active:    #3f3f3f;
    --btn-border:    rgba(255,255,255,0.08);
  
    /* icon button group plate */
    --group-bg:      #1f1f1f;
    --group-stroke:  rgba(255,255,255,0.06);
  
    /* semantic fills (kept muted) */
    --primary:       #3a86ff;   /* used rarely; stays saturated */
    --danger:        #cc4a4a;
    --success:       #54b27a;
  
    background: var(--bg);
    color: var(--text);
  }
  
  /* Panels / canvas area */
  .preview-canvas-wrap,
  .left-panel,
  .tt-panel {
    background: var(--panel);
    border: 1px solid var(--border);
    box-shadow: none;
  }
  
  /* Top toolbar */
  .tt-toolbar {
    background: var(--panel);
    border: 1px solid var(--border);
  }
  
  /* Button base */
  .tt-btn {
    background: var(--btn);
    border: 1px solid var(--btn-border);
    color: var(--text);
    transition: background .12s ease, border-color .12s ease, transform .05s ease;
  }
  .tt-btn:hover      { background: var(--btn-hover); }
  .tt-btn:active     { background: var(--btn-active); transform: translateY(1px); }
  .tt-btn[disabled]  { opacity: .4; cursor: not-allowed; }
  
  /* Filled variants (still in grey family unless semantic) */
  .tt-btn--fill-primary { background: var(--primary); border-color: transparent; color: #fff; }
  .tt-btn--fill-danger  { background: var(--danger);  border-color: transparent; color: #fff; }
  .tt-btn--fill-primary:hover { filter: brightness(1.05); }
  .tt-btn--fill-danger:hover  { filter: brightness(1.05); }
  
  /* Icon buttons & groups (the little rounded squares) */
  .tt-btn-group {
    display: inline-flex;
    padding: 8px;
    gap: 8px;
    border-radius: 12px;
    background: var(--group-bg);
    border: 1px solid var(--group-stroke);
    box-shadow: 0 1px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.03);
  }
  .tt-btn--icon {
    width: 36px; height: 36px;
    display: inline-grid; place-items: center;
    background: var(--btn);
    border-radius: 10px;
  }
  .tt-btn--icon svg { width: 18px; height: 18px; fill: #eaeaea; opacity: .9; }
  .tt-btn--icon:hover svg { opacity: 1; }
  .tt-btn--icon.is-active { outline: 2px solid rgba(255,255,255,.09); }
  
  /* Chips / small pills */
  .tt-chip {
    background: var(--panel-2);
    border: 1px solid var(--border-2);
    color: var(--text);
  }
  .tt-chip:hover { background: var(--btn-hover); }
  
  /* Remove any leftover light outlines from older utility classes */
  .btn, .button, .chip, .ghost {
    border-color: var(--btn-border) !important;
    background: var(--btn) !important;
    color: var(--text) !important;
  }
  .btn:hover, .button:hover, .chip:hover, .ghost:hover {
    background: var(--btn-hover) !important;
  }
  
  /* Divider between left panel and preview */
  .preview-root .preview-canvas-wrap {
    border-left: 1px solid var(--border);
  }
  
  /* Sliders, inputs (optional, stay grey) */
  input[type="range"]::-webkit-slider-runnable-track { background: #3a3a3a; }
  input[type="range"]::-webkit-slider-thumb { background: #6a6a6a; border: 1px solid var(--border-2); }

  /* ===== CONSOLIDATED DARK GREY SYSTEM (final overrides) ================== */
/* palette (kept neutral, not blue/teal) */
.tattoo-app,
.tattoo-app.theme-dark {
  --bg:           #262626;
  --panel:        #2b2b2b;
  --panel-2:      #303030;
  --text:         #e8e8e8;
  --muted:        #bdbdbd;

  --border:       rgba(255,255,255,.08);
  --border-2:     rgba(255,255,255,.10);

  --btn:          #2f2f2f;
  --btn-hover:    #393939;
  --btn-active:   #3f3f3f;
  --btn-border:   rgba(255,255,255,.08);

  --group-bg:     #1f1f1f;
  --group-stroke: rgba(255,255,255,.06);

  --danger:       #cc4a4a;
  --primary:      #3a86ff;
}

/* layout surfaces */
.left-panel,
.preview-canvas-wrap,
.section,
.tt-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  /* kill any inherited inset/raised effects */
  box-shadow: none !important;
  outline: none !important;
}

/* divider between panes */
.preview-root .preview-canvas-wrap { border-left: 1px solid var(--border); }

/* headings (Parts / Templates / Layers) */
.section .label {
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 10px;
}

/* section rhythm (consistent vertical spacing) */
.section { padding: 12px 12px; }
.section > * + * { margin-top: 8px; }

/* general “group” rows inside sections */
.part-strip.in-panel,
.uv-templates,
.row,
.swatches { gap: 8px; display: flex; flex-wrap: wrap; }

/* ===== Buttons unify ===================================================== */
/* normalize any legacy .btn/.button/.chip/.ghost/.part-chip/.export-ghost */
button,
.btn, .button, .chip, .ghost, .part-chip, .export-ghost {
  background: var(--btn) !important;
  color: var(--text) !important;
  border: 1px solid var(--btn-border) !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  font: 500 13px system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
  box-shadow: none !important;        /* removes inset look */
  transition: background .12s ease, border-color .12s ease, transform .05s ease;
}
button:hover,
.btn:hover, .button:hover, .chip:hover, .ghost:hover, .part-chip:hover, .export-ghost:hover {
  background: var(--btn-hover) !important;
}
button:active { transform: translateY(1px); }

/* “ghost” variant still grey-on-grey (transparent would look patchy) */
.btn-ghost, .button.ghost, .chip.ghost {
  background: var(--panel-2) !important;
  border-color: var(--border-2) !important;
}
.btn-ghost:hover { background: var(--btn-hover) !important; }

/* semantic fills (keep subtle, use sparingly) */
.btn-danger, .danger { background: var(--danger) !important; color: #fff !important; border-color: transparent !important; }
.btn-primary { background: var(--primary) !important; color: #fff !important; border-color: transparent !important; }
.btn-danger:hover, .danger:hover,
.btn-primary:hover { filter: brightness(1.05); }

/* small chips/pills (parts/templates) */
.part-chip, .chip {
  padding: 6px 10px !important;
  background: var(--panel-2) !important;
  border-color: var(--border-2) !important;
}
.part-chip.on { outline: 2px solid rgba(255,255,255,.08); }

/* paint toolbar (sym/undo/redo) */
.paint-toolbar {
  position: absolute; top: 10px; left: 14px;
  padding: 8px; gap: 8px; display: inline-flex;
  background: var(--group-bg);
  border: 1px solid var(--group-stroke);
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
}
.btn-icon {
  width: 36px; height: 36px; display: grid; place-items: center;
  background: var(--btn); border: 1px solid var(--btn-border);
  border-radius: 10px; color: #eee;
}
.btn-icon:hover { background: var(--btn-hover); }
.btn-icon.on { outline: 2px solid rgba(255,255,255,.09); }

/* swatches */
.swatches .swatch {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--border-2);
}
.swatch.is-selected { outline: 2px solid rgba(255,255,255,.18); }

/* sliders (dark tracks) */
input[type="range"]::-webkit-slider-runnable-track { background: #3a3a3a; height: 4px; border-radius: 4px; }
input[type="range"]::-webkit-slider-thumb { background: #6a6a6a; border: 1px solid var(--border-2); width: 14px; height: 14px; border-radius: 50%; margin-top: -5px; }

/* kill any stray light borders coming from legacy utilities */
button, .btn, .button, .chip, .ghost, .part-chip, .export-ghost { border-color: var(--btn-border) !important; }




/* === FORCE FIXES (place at the very end of your CSS) =================== */

/* 1) Skin tone swatches: show their inline background color again */
#root .left-panel .swatches button.swatch {
   
    border: 1px solid var(--border-2, #2b2b2b) !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    box-shadow: none !important;
    outline: none !important;
  }
  #root .left-panel .swatches button.swatch.is-selected {
    outline: 5px solid #111 !important;
    outline-offset: 0 !important;
  }
  

  /* 2) Paint color chip (input[type=color]) should display its color cleanly */
  #root input[type="color"].color-chip,
  #root .guide-toolbar input[type="color"],
  #root .left-panel input[type="color"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 36px !important;
    height: 24px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    background: none !important;
    border: 1px solid var(--border-2, #2b2b2b) !important;
    box-shadow: none !important;
  }
  #root input[type="color"].color-chip::-webkit-color-swatch-wrapper,
  #root .guide-toolbar input[type="color"]::-webkit-color-swatch-wrapper,
  #root .left-panel input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0 !important;
  }
  #root input[type="color"].color-chip::-webkit-color-swatch,
  #root .guide-toolbar input[type="color"]::-webkit-color-swatch,
  #root .left-panel input[type="color"]::-webkit-color-swatch {
    border: none !important;
    border-radius: 6px !important;
  }
  
  /* 3) Small action buttons inside layer rows: consistent sizing */
  #root .layers-panel .btn-icon,
  #root .layers-panel .mini,
  #root .layers-panel .icon-btn,
  #root .layers-panel .row > button.icon,
  #root .layers-panel .row > button[title*="up"],
  #root .layers-panel .row > button[title*="down"],
  #root .layers-panel .row > button[title*="edit"],
  #root .layers-panel .row > button[title*="delete"] {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 8px !important;
  }
  
  /* 4) Remove “inset” look that’s sneaking in */
  #root .left-panel .section,
  #root .layers-panel .layer-card,
  #root .paint-toolbar,
  #root .btn,
  #root .button,
  #root .chip,
  #root .part-chip {
    box-shadow: none !important;
    outline: none !important;
  }
  
  /* 5) Layers section header spacing to match other sections */
  #root .left-panel .section .label + * {
    margin-top: 10px !important;
  }



  /* ===== Dark theme tune-up (scoped) ===== */
.tattoo-app {
    --bg-0: #191a1c;
    --bg-1: #1f2124;
    --panel: #25272b;
    --panel-2: #2b2e33;
  
    /* unified dark borders (kills the #e5e7eb look) */
    --border-1: #0d0e10;
    --border-2: #202327;
    --btn-border: var(--border-2);
  
    --text-1: #f2f2f2;
    --text-2: #c8cbd0;
  }
  
  /* Panels / sections */
  .tattoo-app .left-panel .section {
    background: var(--panel);
    border: 1px solid var(--border-2) !important;
    box-shadow: none !important;
  }
  
  /* Labels (make “Layers” match “Parts/Templates”) */
  .tattoo-app .left-panel .section .label {
    font-size: 12px;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--text-2);
    opacity: .85;
    margin: 0 0 8px 0;
  }
  
  /* Buttons/chips – unify look & borders */
  .tattoo-app .btn,
  .tattoo-app .button,
  .tattoo-app .chip,
  .tattoo-app .part-chip,
  .tattoo-app .btn-ghost,
  .tattoo-app .export-ghost,
  .tattoo-app button {
    background: var(--panel-2);
    color: var(--text-1);
    border: 1px solid var(--btn-border) !important;
    box-shadow: none !important;
    transition: background .12s ease, border-color .12s ease, transform .05s ease;
  }
  
  .tattoo-app .btn:hover,
  .tattoo-app .button:hover,
  .tattoo-app .chip:hover,
  .tattoo-app .part-chip:hover {
    background: #31343a;
    border-color: var(--border-1) !important;
  }
  
  /* Paint toolbar buttons (stay consistent) */
  .tattoo-app .paint-toolbar .btn-icon {
    background: var(--panel-2);
    border: 1px solid var(--btn-border) !important;
    box-shadow: none !important;
  }
  .tattoo-app .paint-toolbar .btn-icon:hover {
    background: #31343a;
    border-color: var(--border-1) !important;
  }
  
  /* ===== Skin swatches — use CSS var fed from inline style ===== */
  .tattoo-app .left-panel .swatches .swatch {
    /* IMPORTANT: do not set any background elsewhere; use the var here */
    background: var(--swatch) !important;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--border-2) !important;
    box-shadow: none !important;
    padding: 0;
  }
  
  .tattoo-app .left-panel .swatches .swatch.is-selected {
    outline: 2px solid rgba(255,255,255,.18);
    outline-offset: 0;
  }
  
  /* Kill any lingering “inset” look from old rules */
  .tattoo-app .left-panel .section,
  .tattoo-app .left-panel .section * {
    box-shadow: none !important;
  }
  
  /* Tighten spacing under the “Layers” header */
  .tattoo-app .left-panel .section:has(.label) { padding-top: 10px; }
  .tattoo-app .left-panel .section .label + * { margin-top: 6px; }

  /* =========================
   Buttons: dark, unified, scoped
   ========================= */
.tattoo-app .btn,
.tattoo-app .button,
.tattoo-app .chip,
.tattoo-app .part-chip,
.tattoo-app .paint-toolbar .btn-icon {
  -webkit-appearance: none;
  appearance: none;
  background: var(--panel-2);
  color: var(--text-1);
  border: 1px solid var(--btn-border) !important;
  box-shadow: none !important;
  border-radius: 8px;
  padding: 8px 10px;
  font: 500 13px/1.1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .05s ease, color .12s ease;
}
.tattoo-app .btn:hover,
.tattoo-app .button:hover,
.tattoo-app .chip:hover,
.tattoo-app .part-chip:hover,
.tattoo-app .paint-toolbar .btn-icon:hover {
  background: #31343a;
  border-color: var(--border-1) !important;
}

/* size for icon-only buttons (sym / undo / redo) */
.tattoo-app .paint-toolbar .btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  font-size: 18px;
  border-radius: 10px;
}

/* brand accents */
.tattoo-app {
  --accent: #22c55e;    /* green (sym on) */
  --accent-ghost: #1d3c2a;
  --danger: #ef4444;
  --primary: #2563eb;
}

/* primary/danger variations if you use them elsewhere */
.tattoo-app .btn.btn-primary { background: var(--primary); border-color: #1742a0 !important; }
.tattoo-app .btn.btn-primary:hover { background: #1f56c4; }
.tattoo-app .btn.btn-danger  { background: var(--danger);  border-color: #7f1d1d !important; }
.tattoo-app .btn.btn-danger:hover { background: #d93c3c; }

/* ghost variant stays dark */
.tattoo-app .btn-ghost,
.tattoo-app .button.ghost,
.tattoo-app .chip.ghost {
  background: var(--panel);
  border-color: var(--border-2) !important;
}

/* =========================
   Symmetry "active" state
   ========================= */
/* support both class 'on' and aria-pressed="true" */
.tattoo-app .paint-toolbar .btn-icon.on,
.tattoo-app .paint-toolbar .btn-icon[aria-pressed="true"] {
  background: var(--accent) !important;
  color: #0b1410 !important;
  border-color: #166534 !important;
}
.tattoo-app .paint-toolbar .btn-icon.on:hover,
.tattoo-app .paint-toolbar .btn-icon[aria-pressed="true"]:hover {
  background: #2bd16a !important;
  border-color: #14532d !important;
}

/* reduce any lingering light outlines around buttons */
.tattoo-app .btn:focus,
.tattoo-app .button:focus,
.tattoo-app .chip:focus,
.tattoo-app .part-chip:focus,
.tattoo-app .paint-toolbar .btn-icon:focus {
  outline: 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,.06) inset !important;
}

/* Nuclear specificity so old rules can't win */
.tattoo-app .paint-toolbar .btn-icon.btn-icon,
.tattoo-app .btn.btn,
.tattoo-app .button.button,
.tattoo-app .chip.chip,
.tattoo-app .part-chip.part-chip {
  background: var(--panel-2) !important;
  color: var(--text-1) !important;
  border: 1px solid var(--btn-border) !important;
  box-shadow: none !important;
  transition: background .12s ease, border-color .12s ease, color .12s ease, transform .05s ease;
}
.tattoo-app .paint-toolbar .btn-icon.btn-icon:hover,
.tattoo-app .btn.btn:hover,
.tattoo-app .button.button:hover,
.tattoo-app .chip.chip:hover,
.tattoo-app .part-chip.part-chip:hover {
  background: #31343a !important;
  border-color: var(--border-1) !important;
}

.layers-panel .layer-card { display:flex; flex-direction:column; gap:10px; }
.layers-panel .layer-card.is-open { outline: 1px solid rgba(255,255,255,.06); }
.layers-panel .layer-body { padding: 8px; border-radius: 8px; background: rgba(0,0,0,.06); }

/* layers header fit */
.layers-panel .layer-head {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 8px;
  align-items: center;
}
.layers-panel .order { display: inline-flex; gap: 6px; }
.layers-panel .layer-controls {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}
.layers-panel .opacity-readout { width: 42px; text-align: right; font-size: 12px; opacity: .8; }


/* Floating morph dock */
.morph-dock {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 280px;
  z-index: 6;              /* above canvas & toolbar */
  pointer-events: auto;
}

/* Morph card */
.morph-panel {
  background: rgba(22, 22, 22, 0.88);
  backdrop-filter: blur(6px);
  border: 1px solid #2b2b2b;
  border-radius: 10px;
  padding: 12px;
  color: #e8e8e8;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
  user-select: none;
  left: 1px;
}

.morph-panel .tt-section-title {
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #bfbfbf;
  margin-bottom: 8px;
}

/* Rows + slider look */
.morph-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}

.morph-name {
  flex: 0 0 42%;
  font-size: 12px;
  color: #cfcfcf;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.morph-row input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  background: #404040;
  border-radius: 999px;
  outline: none;
}
.morph-row input[type="range"]::-webkit-slider-thumb,
.morph-row input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #18b36b;
  border: 2px solid #0d7845;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  cursor: pointer;
}
.morph-row input[type="range"]::-moz-range-track {
  height: 4px;
  background: #404040;
  border-radius: 999px;
}
.morph-row input[type="range"]:hover::-webkit-slider-thumb { filter: brightness(1.05); }
.morph-row input[type="range"]:active::-webkit-slider-thumb { transform: scale(0.96); }

/* Keep toolbar from overlapping the morph card (desktop) */
.preview-canvas-wrap .paint-toolbar {
  left: 312px; /* 280 + 12 + ~20 breathing room */
}

/* Symmetry "on" styling (your JS toggles data-active) */
.paint-toolbar .tt-btn.tt-icon[data-active="true"] {
  background: #18b36b;
  color: #0a4428;
  border-color: #0d7845;
}

/* Mobile tweak */
@media (max-width: 768px) {
  .morph-dock { width: 240px; top: 8px; left: 8px; }
  .preview-canvas-wrap .paint-toolbar { left: 260px; top: 8px; bottom: auto; }
  .morph-name { flex-basis: 38%; }
}

.overlay-toolbar { cursor: grab; }
.overlay-toolbar:active { cursor: grabbing; }I

/* Symmetry active state */
.paint-toolbar .tt-btn.tt-icon[data-active="true"] {
  background: #2ecc71;
  color: #fff;
}

/* add to src/tattoo/tattoo.css (or tattoo-ui.css) */
.left-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;              /* matches your inline style */
  min-width: 0;           /* fix Flexbox overflow issues */
  max-height: 100%;
  overflow: auto;         /* let the panel scroll instead of overlap */
}

.left-panel .section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.left-panel .label {
  font-weight: 600;
  opacity: 0.9;
}
.tattoo-layout { min-height: 0; }
.tattoo-right  { min-height: 0; overflow: hidden; }
.layers-panel .layers-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.layer-card {
  border: 1px solid #2b2b2b;
  border-radius: 10px;
  background: rgba(22,22,22,0.88);
  color: #e8e8e8;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
  overflow: hidden;
}

.layer-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
}

.layer-head .layer-name {
  flex: 1;
  min-width: 0;
  background: rgba(0,0,0,0.25);
  border: 1px solid #333;
  border-radius: 6px;
  padding: 6px 8px;
  color: #fff;
}

.layer-head .order {
  display: flex;
  gap: 6px;
  align-items: center;
}

.layer-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 8px 6px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.layer-controls .ctrl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.layer-controls .slider {
  min-width: 180px;
}

.layer-controls .val {
  opacity: 0.8;
  font-size: 12px;
}

.layer-body {
  padding: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.layer-body .row {
  display: flex;
  align-items: center;
}

/* Newest comment pulse */
.incoming-flash {
  position: relative;
}
.incoming-flash::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(255, 208, 0, 0.75);
  animation: cmtFlash 900ms ease-out forwards;
}

@keyframes cmtFlash {
  0%   { box-shadow: 0 0 0 0 rgba(255, 208, 0, 0.75); }
  60%  { box-shadow: 0 0 0 10px rgba(255, 208, 0, 0); }
  100% { box-shadow: none; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .incoming-flash::after { animation-duration: 0ms; }
}

.mention-chip {
  display: inline-block;
  background: rgba(255, 208, 0, 0.15);
  color: #ffd000;
  font-weight: 500;
  padding: 0 4px;
  border-radius: 4px;
}

.mention-chip:hover {
  background: rgba(255, 208, 0, 0.25);
}

/* Keeps the flash we added earlier */
.incoming-flash {
  position: relative;
}
.incoming-flash::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(255, 208, 0, 0.75);
  animation: cmtFlash 900ms ease-out forwards;
}

@keyframes cmtFlash {
  0%   { box-shadow: 0 0 0 0 rgba(255, 208, 0, 0.75); }
  60%  { box-shadow: 0 0 0 10px rgba(255, 208, 0, 0); }
  100% { box-shadow: none; }
}

/* in tattoo-ui.css or equivalent */
.layer-card { scroll-margin: 16px; }

/* Make sure the preview side can host absolutely positioned children */
.tattoo-right {
  position: relative;
}

/* Floating auth button (top-right) */
.auth-fab {
  position: absolute;
  top: 220px;
  right: 40px;
  z-index: 20;

  /* Let clicks pass through the container, but be handled by the button */
  pointer-events: none;
}
.auth-fab > * {
  pointer-events: auto;
}

/* Optional polish to match your dark theme if AuthButton renders a <button> */
.auth-fab .tt-btn,
.auth-fab button {
  backdrop-filter: blur(6px);
  background: rgba(24, 24, 24, 0.7);
  border: 1px solid #2b2b2b;
  color: #e8e8e8;
  border-radius: 10px;
  padding: 8px 12px;
  width:120px;
}

/* Slightly larger target on mobile */
@media (max-width: 768px) {
  .auth-fab {
    top: 10px;
    right: 10px;
  }
  .auth-fab .tt-btn,
  .auth-fab button {
    padding: 10px 14px;
  }
}/* =========================
   FONT: Poppins (UI)
   ========================= */
   @font-face {
    font-family: "Poppins";
    src: url("/assets/Poppins-Regular-CTKNfV9P.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  canvas {
    touch-action: none; /* 1-finger rotate, 2-finger pan/dolly */
    -webkit-user-select: none;
    user-select: none;
  }

#root { height: 100%; }
  
  :root{
    --brand-green:      #22c55e; /* emerald 500 */
    --brand-green-600:  #16a34a; /* hover */
    --brand-green-700:  #15803d; /* active/pressed */
    --ink:              #111827; /* text */
    --muted-border:     #e5e7eb;
  }

  .hud-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 12px;
    background: #158f95;               /* teal band */
    color: #fff;
    font-weight: 800;
    letter-spacing: .04em;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 10px 30px rgba(0,0,0,.22), 0 2px 0 rgba(0,0,0,.08) inset;
    cursor: pointer;
    transition: transform .15s ease, filter .15s ease;
  }
  .hud-cta:hover { transform: translateY(-1px); filter: brightness(1.05); }
  @media (max-width: 768px) {
    .hud-cta { padding: 12px 18px; font-size: 14px; border-radius: 10px; }
  }
  
  /* =========================
     ROOT VARS & BASE
     ========================= */
  :root {
    --ui-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  
    /* Desktop sizes */
    --swatch: 30px;
    --decal-col: 4;
    --decal-pad: 6px;
  
    /* Mobile sizes */
    --swatch-m: 28px;
    --decal-w-m: 112px;
    --decal-h-m: 118px;
  
    /* Mobile panel heights (bottom sheet) */
    --panel-open: 56dvh;
    --panel-peek: 56px;
  }
  
  html, body, #root { height: 100%; background: #ffffff; }
  html, body {
    font-family: var(--ui-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  canvas { display: block; }
  
  /* Ensure key UI pieces inherit font */
  .container, header, .customizer, .section--container,
  button, .decal-name, .actions, .selection-summary { font-family: inherit; }


  canvas { background-color: #fff !important; }
  /* put this in your stylesheet */


  .product-card {
  position: relative;
  overflow: hidden;
}

.product-card .hover-cta {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  background: rgba(17,24,39,0.85);
  color: #fff;
  padding: 8px 12px;
  border-radius: 0px;
  font-weight: 700;
  font-size: 11px;
  opacity: 0;
  transition: opacity .15s ease-out, transform .15s ease-out;
  pointer-events: none;
}

@media (hover:hover) and (pointer:fine) {
  .product-card:hover .hover-cta {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.02);
  }
}
  /* =========================
     DESKTOP PANEL (left column)
     ========================= */
  .container {
    position: fixed;
    z-index: 10;
    top: 0; left: 0;
    width: 360px;
    height: 100vh;
    background: #ffffffcc;
    backdrop-filter: blur(6px);
    border-right: 1px solid #eee;
    display: flex;
    flex-direction: column;
  }
  .container > section {
    flex: 1;
    display: flex;
    min-height: 0;
    flex-direction: column;

    .product-card {
      position: relative;
      overflow: hidden;
    }
    
    .product-card .hover-customize {
      position: absolute;
      left: 50%;
      bottom: 10px;
      transform: translateX(-50%) translateY(12px);
      display: inline-flex;
      gap: 8px;
      align-items: center;
      padding: 8px 20px;
      border-radius: 0px;
      font-weight: 700;
      font-size: 11px;
      background: #22c55e;      /* tweak to your brand color */
      color: #0b2816;           /* tweak text color to match */
      box-shadow: 0 10px 24px rgba(0,0,0,.22);
      border: 1px solid rgba(255,255,255,.15);
      opacity: 0;
      pointer-events: none;     /* only clickable on hover */
      transition: transform .18s ease, opacity .18s ease;
    }
    
    .product-card {
      position: relative;
      overflow: hidden;
    }
    
    .product-card .hover-customize {
      position: absolute;
      left: 50%;
      bottom: 0px;
      transform: translateX(-50%) translateY(12px);
      display: inline-flex;
      gap: 8px;
      align-items: center;
      padding: 8px 20px;
      border-radius: 0px;
      font-weight: 700;
      background: #bc68bc;       /* adjust to taste */
      color: #ffffff;
      box-shadow: 0 10px 24px rgba(0,0,0,.22);
      border: 1px solid rgba(255,255,255,.15);
      opacity: 0;
      pointer-events: none;
      transition: transform .18s ease, opacity .18s ease;
    }
    
    .hud-cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 22px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.18);
      background: linear-gradient(180deg, #1fb3b7 0%, #169aa0 100%);
      color: #f7fafc;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
      box-shadow:
        0 14px 28px rgba(0,0,0,.22),
        0 3px 6px rgba(0,0,0,.12);
      transform: translateY(0);
      transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
      cursor: pointer;
      user-select: none;
    }
    
    .hud-cta:hover {
      transform: translateY(-2px);
      box-shadow:
        0 18px 36px rgba(0,0,0,.26),
        0 6px 12px rgba(0,0,0,.16);
      filter: brightness(1.04);
    }
    
    .hud-cta:active {
      transform: translateY(0);
      filter: brightness(.98);
    }
    
    @media (max-width: 768px) {
      .hud-cta {
        padding: 12px 18px;
        border-radius: 10px;
        letter-spacing: .035em;
      }
    }


    /* Only reveal when the selected card is hovered (desktop) */
    .product-card.active:hover .hover-customize {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
      pointer-events: auto;
    }
    
    /* Mobile: always show for active (no hover) */
    @media (max-width: 768px) {
      .product-card.active .hover-customize {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
      }
    }
    .product-card:hover .hover-customize,
    .product-card.active .hover-customize {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
      pointer-events: auto;      /* becomes clickable on hover (or when active) */
    }
    
    /* Optional: always show on mobile (no hover) */
    @media (max-width: 768px) {
      .product-card .hover-customize {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
      }
    }

/* Intro search bar: mobile collapsed, desktop always visible */
.intro-search {
  display: none;
  padding: 10px 16px;
  border-bottom: 1px solid #eee;
  background: #fff;
  gap: 8px;
  align-items: center;
}
.intro-search input[type="search"] {
  appearance: none;
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  color: #111;
  background: #fff;
}
.intro-search .clear {
  margin-left: 8px;
  border: 1px solid #f60010;
  border-radius: 10px;
  background: #f9fafb;
  color: #111;
  padding: 8px 10px;
}

/* When open (mobile) */
.intro-search.open { display: grid; grid-template-columns: 1fr auto; }

/* Desktop: always show search (ignore toggled state) */
@media (min-width: 769px) {
  .intro-search { display: grid; grid-template-columns: 1fr auto; }
  .search-toggle { display: none !important; }
}

/* Mobile header search icon */
.search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #111827;
  color: #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}


/* Tattoo

/* Layout */
.tattoo-root { height: 100vh; display: flex; flex-direction: column; }
.tattoo-header {
  height: 56px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px; border-bottom: 1px solid #e5e7eb; background: #fff;
}
.tattoo-header .title { font-weight: 700; color: #0f172a; }
.tabs { display: flex; gap: 8px; }
.tab {
  background: #0f172a; color: #fff; border: none; padding: 8px 12px; border-radius: 10px; cursor: pointer;
  opacity: .6;
}
.tab.active { opacity: 1; }

.tattoo-main {
  flex: 1; display: grid; gap: 12px; padding: 12px;
  grid-template-columns: minmax(280px, 520px) 1fr;
}
@media (max-width: 900px) {
  .tattoo-main { grid-template-columns: 1fr; }
}

.pane {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column;
}
.pane-empty { flex: 1; display: grid; place-items: center; color: #6b7280; }

/* UV editor */
.uv-editor { display: flex; flex-direction: column; height: 100%; }
.uv-toolbar { display: flex; gap: 8px; padding: 10px; border-bottom: 1px solid #e5e7eb; }
.btn { border: 1px solid #e5e7eb; background: #000000; padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.btn.primary { background: #0ea5a4; border-color: #0ea5a4; color: #fff; }
.uv-canvas-wrap { flex: 1; display: grid; place-items: center; background: #f3f4f6; }
.uv-canvas-wrap canvas {
  max-width: 100%; max-height: 100%;
  box-shadow: 0 8px 30px rgba(0,0,0,.15); border-radius: 10px; background: #fff;
}

/* Preview */
.preview-root, .preview-root canvas { width: 100%; height: 100%; display: block; }

/* Tattoo



/* Optional: “no results” text */
.no-results {
  grid-column: 1 / -1;
  color: #6b7280;
  font-size: 14px;
  padding: 6px 2px 12px;
}

.intro-desc { font-size: 14px; line-height: 1.45; color: #111827; }
.intro-desc strong { font-weight: 700; }
.intro-desc em { font-style: italic; }
.intro-desc .desc-title { display:block; font-size: 17px; font-weight: 900; margin: 2px 0 6px; }
.intro-desc .desc-big   { display:block; font-size: 16px;  font-weight: 700; margin: 4px 0; }
.intro-desc .desc-note  { font-weight: 600; color: #374151; }
    
  }
  .panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    background: transparent;
  }
  .header-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .section--container, .customizer {
    flex: 1 1 auto;
    padding: 16px;
    overflow-y: auto;
  }
  .support--content p { margin-top: 0; line-height: 1.6; }
  
  .panel-header .header-actions { display:flex; gap:8px; align-items:center; }

  .panel-visibility {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    background: #111827;
    color: #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
  }
  
  .panel-visibility .btn-text { line-height: 1; }
  
  .reset-fab {
    position: fixed;
    right: 14px;
    top: calc(env(safe-area-inset-top) + 12px);
    z-index: 15;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: none;
    border-radius: 9999px;
    background: #111827;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  }
  
  .reset-fab .fab-text { line-height: 1; }
  
  /* Mobile: icon-only to stay compact */
  @media (max-width: 768px) {
    .reset-fab { padding: 10px; }
    .reset-fab .fab-text { display: none; }
  }
  
  .area-picker .seg{
    position: relative;
    padding: 8px 12px;
    border: 1px solid var(--muted-border);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font-weight: 600;
    transition: border-color 140ms, background 140ms, color 140ms, box-shadow 140ms, transform 80ms;
  }
  
  .area-picker .seg:hover{
    border-color: #9ca3af;
  }
  
  .area-picker .seg:focus-visible{
    outline: 2px solid var(--brand-green);
    outline-offset: 2px;
  }
  
  /* ✅ Selected (Front/Back/All) — GREEN fill */
 /* was: .area-picker .seg.active, .area-picker .seg[data-selected="true"] */
.area-picker .seg[aria-pressed="true"]{
  background: var(--brand-green);
  color:#fff;
  border-color: var(--brand-green);
  box-shadow: 0 6px 18px rgba(34,197,94,0.35);
}
.area-picker .seg[aria-pressed="true"]:hover{
  background: var(--brand-green-600);
  border-color: var(--brand-green-600);
}
.area-picker .seg[aria-pressed="true"]::after{ transform: scaleX(1); }
  
  /* Subtle underline accent for selected */
  .area-picker .seg::after{
    content:"";
    position:absolute;
    left:12px; right:12px; bottom:6px;
    height:3px; border-radius:2px;
    background: currentColor;
    opacity: .35;
    transform: scaleX(0);
    transition: transform 160ms ease;
  }
  .area-picker .seg.active::after,
  .area-picker .seg[data-selected="true"]::after{ transform: scaleX(1); }

/* color dots */
.color-options .circle.selected{
  outline: 3px solid var(--brand-green);
  outline-offset: 2px;
  box-shadow: 0 4px 12px rgba(34,197,94,.35);
}

/* variant pills */
.product-pill.active{
  border-color: var(--brand-green);
  box-shadow: 0 6px 18px rgba(34,197,94,.25);
}
.product-pill.active span{
  color: var(--brand-green-700);
  font-weight: 700;
}

  /* Buttons */
  button {
    cursor: pointer;
    border: none;
    color: white;
    background: #111827;
    padding: 12px 14px;
    border-radius: 10px;
    font-weight: 600;
   
  }

  /* Back button */
  .back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    background: #111827;
    color: #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
  }
  .back-btn svg { width: 18px; height: 18px; }
  /* =========================
   SUBMIT MINI-FORM (pretty)
   ========================= */
.submit-card {
  margin: 12px 0;
  padding: 14px;
  background: #fff;
  border: 1px solid #e5e7eb;           /* slate-200 */
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.submit-card .row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.submit-card label {
  font-size: 12px;
  font-weight: 600;
  color: #111827;                       /* gray-900 */
  letter-spacing: .01em;
  opacity: .85;
}

.submit-card input,
.submit-card textarea {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  color: #111827;
  font: inherit;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-sizing: border-box;
}

.submit-card textarea {
  min-height: 90px;
  resize: vertical;
  line-height: 1.4;
}

.submit-card input::placeholder,
.submit-card textarea::placeholder {
  color: #9ca3af;                       /* gray-400 */
}

.submit-card input:focus,
.submit-card textarea:focus {
  border-color: #111827;
  box-shadow: 0 0 0 3px rgba(17,24,39,.08);
}

/* Buttons row inside the card */
.submit-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}

.submit-actions .btn {
  background: #0f172a;                  /* slate-900 */
  color: #fff;
  border: none;
  padding: 12px 14px;
  font-weight: 700;
  border-radius: 12px;
}

.submit-actions .btn:hover {
  filter: brightness(.97);
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .submit-card { padding: 12px; border-radius: 12px; }
  .submit-card input, .submit-card textarea { border-radius: 12px; }
  .submit-actions { gap: 10px; }
}

  /* Header Show/Hide button */
  .panel-visibility {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-weight: 700;
    background: #111827;
    color: #fff;
    border: none;
    border-radius: 9999px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
  }
  .panel-visibility .toggle-icon { margin-right: 2px; }
  .panel-visibility .btn-badge {
    position: absolute;
    top: -6px; right: -6px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 9999px;
    background: #ef4444; color: #fff;
    font-size: 11px; line-height: 18px;
    text-align: center;
    border: 2px solid rgba(255,255,255,0.9);
  }
  
  /* =========================
     SELECTION SUMMARY
     ========================= */
  .selection-summary {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 12px;
    background: #fff;
    font-size: small;
  }
  .selection-swatch {
    display: inline-block;
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 1px solid #d1d5db;
  }
  
  /* ---- Compact product blurb ---- */
  .product-blurb { position: relative; margin: 8px 0 12px; }
  .product-blurb p {
    white-space: pre-line;
    color: #374151;
    font-size: 12px;
    line-height: 1.35;
    margin: 0;
  }
/* Category accordion */
.category-list { display: grid; gap: 12px; }
.category-header .chev { transition: transform 160ms ease; }
.category-header .chev.rot { transform: rotate(180deg); }

.intro-bottom-cta { margin-top:10px; }

/* Intro toolbar + search */
.intro-toolbar .search-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; background: #111827; color: #fff; }
.intro-search-desktop { display: none; }
@media (min-width: 769px) {
  .intro-search { display: none !important; }      /* hide mobile field */
  .intro-search-desktop { display: flex; }         /* show desktop field */
  .md\\:hidden { display: none !important; }
}

  

  @media (min-width: 769px) { .product-blurb .moreless { display: none; } }
  @media (max-width: 768px) {
    .product-blurb:not(.expanded) p {
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .product-blurb:not(.expanded)::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: 28px; height: 22px;
      pointer-events: none;
      background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 80%);
    }
    .product-blurb .moreless {
      display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600;
      color: #111827; background: #f3f4f6; border: 1px solid #e5e7eb;
      border-radius: 9999px; padding: 6px 10px;
    }
  }
  
  /* =========================
     COLORS
     ========================= */
  .color-options {
    display: grid;
    grid-template-columns: repeat(8, var(--swatch));
    gap: 8px;
    margin-bottom: 14px;
  }
  .color-options .circle {
    padding: 0 !important;
    width: var(--swatch);
    height: var(--swatch);
    min-width: var(--swatch);
    min-height: var(--swatch);
    aspect-ratio: 1 / 1;
    border-radius: 50% !important;
    border: 1px solid #d1d5db;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
  }
  .circle.selected { outline: 2px solid #111827; outline-offset: 2px; }
  
  /* =========================
     DECALS
     ========================= */
  .decals--container {
    display: grid;
    grid-template-columns: repeat(var(--decal-col), 1fr);
    gap: 8px;
    margin-bottom: 14px;
  }
  .decal {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: var(--decal-pad);
    display: grid;
    place-items: center;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
  }
  .decal img { max-width: 100%; max-height: 56px; object-fit: contain; }
  .decal-name { font-size: 11px; text-align: center; margin-top: 4px; color: #111; }
  .decal.selected {
    border-color: #111827;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    transform: translateY(-1px);
  }
  .decal:focus-visible,
  .color-options .circle:focus-visible {
    outline: 2px solid #111827; outline-offset: 2px;
  }
  
  /* =========================
     ACTIONS
     ========================= */
  .actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .share { background: #111827; }
  .exit  { background: #374151; }
  
  /* =========================
     PRODUCT PICKER GRID (Intro)
     ========================= */
  .product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0 14px;
  }
  .product-card {
    display: grid;
    grid-template-rows: auto 1fr;
    place-items: center;
    gap: 8px;
    padding: 10px;
    background: #fff;
    color: #111;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.04) inset;
    transition: box-shadow 140ms ease, border-color 140ms ease, transform 120ms ease;
  }
  .product-card img {
    width: 100%; max-width: 92px; aspect-ratio: 1 / 1; object-fit: contain;
  }
  .product-card .label { font-size: 12px; text-align: center; }
  .product-card.active {
    border-color: #111827;
    box-shadow: 0 8px 20px rgba(0,0,0,0.10);
    transform: translateY(-1px);
  }
  @media (max-width: 420px) {
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  
  /* =========================
     VARIANT PILLS (Customizer)
     ========================= */
  .product-options {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 0 2px 6px 2px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .product-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    background: #fff;
    color: #111;
    white-space: nowrap;
    scroll-snap-align: start;
  }
  .product-pill img { width: 24px; height: 24px; object-fit: contain; }
  .product-pill.active {
    border-color: #111827;
    background: #f9fafb;
    box-shadow: 0 1px 0 rgba(0,0,0,0.06) inset;
  }
  
  /* =========================
     MOBILE BOTTOM SHEET
     ========================= */
  @media (max-width: 768px) {
    .container {
      position: fixed;
      top: auto !important; left: 0; right: 0;
      bottom: calc(env(safe-area-inset-bottom) + 0px);
      width: 100vw;
      height: auto; max-height: var(--panel-open);
      background: #fffffff0;
      border-right: none; border-top: 1px solid #eee;
      backdrop-filter: blur(6px);
      transform: translateY(0);
      transition: transform 220ms ease;
      overflow: hidden;
      z-index: 10;
      display: flex; flex-direction: column;
    }
    .container.panel-collapsed {
      transform: translateY(calc(100% - var(--panel-peek)));
    }
    .panel-header {
      position: sticky; top: 0; z-index: 1;
      background: #fffffff0; backdrop-filter: blur(6px);
      padding: 10px 30px; border-bottom: 1px solid #eee;
    }
    .container > section {
      flex: 1 1 auto; min-height: 0;
      display: flex; flex-direction: column;
    }
    .section--container, .customizer {
      flex: 1 1 auto;
      padding: 12px 30px;
      overflow-y: auto;
      padding-bottom: calc(14px + env(safe-area-inset-bottom) + 16px);
    }
  
    /* Colors → horizontal chips */
    .color-options {
      display: flex; flex-wrap: nowrap; gap: 10px;
      margin: 0 0 12px 0; padding: 0 2px 6px 2px;
      overflow-x: auto; -webkit-overflow-scrolling: touch;
      scroll-snap-type: x proximity;
    }
    .color-options .circle {
      width: var(--swatch-m); height: var(--swatch-m);
      min-width: var(--swatch-m); min-height: var(--swatch-m);
      flex: 0 0 var(--swatch-m); scroll-snap-align: start;
    }
    .color-options::-webkit-scrollbar { height: 6px; }
    .color-options::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
  
    /* Decals → horizontal carousel */
    .decals--container {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: var(--decal-w-m);
      gap: 10px;
      margin: 0 0 12px 0;
      padding: 0 2px 6px 2px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
    }
    .decal {
      width: var(--decal-w-m);
      height: var(--decal-h-m);
      scroll-snap-align: start;
      padding: 8px;
      border-radius: 10px;
    }
    .decal img { max-height: 64px; }
    .decal-name { font-size: 11px; }
  
    /* Smaller summary margin */
    .selection-summary { margin-bottom: 10px; }
  
    /* Sticky export row at bottom of sheet */
    .export-row {
      position: sticky;
      bottom: calc(env(safe-area-inset-bottom) + 0px);
      background: #fff;
      padding: 8px 0 6px;
      z-index: 2;
      border-top: 1px solid #eee;
    }
  }
  
  /* Remove old floating toggles entirely */
  .hud-toggle, .panel-toggle { display: none !important; }
  
  /* Mobile: compact one-line summary */
  @media (max-width: 768px) {
    .selection-summary {
      padding: 6px 8px; margin-bottom: 8px;
      align-items: center; gap: 8px;
    }
    .selection-summary .selection-swatch {
      width: 14px; height: 14px; border-width: 1px;
    }
    .selection-summary .selection-text {
      display: flex; align-items: center; gap: 6px;
      font-size: 12px; line-height: 1.1; min-width: 0; flex: 1 1 auto;
    }
    .selection-summary .selection-text strong { display: none; }
    .selection-summary .selection-text > div {
      display: inline-block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .selection-summary .selection-text > div + div::before {
      content: "•"; margin: 0 6px; color: #9ca3af;
    }
  
    /* Edge-fade (hidden by default; enable if desired) */
    .scroll-edge-fade { position: relative; }
    .scroll-edge-fade::before,
    .scroll-edge-fade::after {
      content: ""; position: sticky; top: 0; width: 18px; height: 100%;
      pointer-events: none; z-index: 1; display: none;
    }
    .color-options.scroll-edge-fade::before,
    .color-options.scroll-edge-fade::after,
    .decals--container.scroll-edge-fade::before,
    .decals--container.scroll-edge-fade::after {
      display: block;
    }
    .scroll-edge-fade::before {
      left: 0;
      background: linear-gradient(to right, #fffffff0 0%, rgba(255,255,255,0.66) 45%, transparent 100%);
    }
    .scroll-edge-fade::after {
      float: right; right: 0;
      background: linear-gradient(to left, #fffffff0 0%, rgba(255,255,255,0.66) 45%, transparent 100%);
    }
  }
  /* src/index.css */
canvas { touch-action: none; }  /* only the canvas area; your UI still scrolls */

/* Intro description smaller on mobile */
@media (max-width: 768px) {
  .intro-desc { font-size: 12px; line-height: 1.35; }
}

/* Header actions row */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.panel-visibility, .start-customize {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-weight: 700;
  border: none;
  border-radius: 9999px;
  background: #111827;
  color: #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}
.start-customize { background: #0f766e; } /* teal-ish to stand out */

/* Badge inside header button (only shows when hidden) */
.panel-visibility .btn-badge {
  position: absolute;
  transform: translate(10px, -10px);
  min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 9999px;
  background: #ef4444; color: #fff;
  font-size: 11px; line-height: 18px;
  border: 2px solid rgba(255,255,255,0.9);
}

/* Product grid for Intro */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 12px 0 14px;
}
@media (min-width: 769px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}
.product-card {
  display: grid;
  place-items: center;
  gap: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  padding: 10px;
}
.product-card img { width: 88px; height: 88px; object-fit: contain; }
.product-card .label { font-size: 12px; color: #111; }
.product-card.active { border-color: #111827; box-shadow: 0 6px 16px rgba(0,0,0,0.12); }

/* Hide the bottom Intro button on phones (header button replaces it) */
@media (max-width: 768px) {
  .intro-bottom-cta { display: none; }
}
/* Mobile-only helper */
.mobile-only { display: none !important; }
@media (max-width: 768px) {
  .mobile-only { display: inline-flex !important; }
}

/* Belt & suspenders: never show the old floating pills on desktop */
@media (min-width: 769px) {
  .hud-toggle,
  .panel-toggle { display: none !important; }
}
/* Mobile-only helper */
.mobile-only { display: none !important; }
@media (max-width: 768px) {
  .mobile-only { display: inline-flex !important; }
}

/* Also hide the old floating pills on desktop, just in case */
@media (min-width: 769px) {
  .hud-toggle,
  .panel-toggle { display: none !important; }
}

/* Collapsed submit row */
.submit-collapsed {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.submit-collapsed .btn.primary { background: #111827; color: #fff; }

/* Submit form (expanded) — keeps your existing styles, just ensure nice spacing */
.submit-card {
  margin: 10px 0 6px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}
.submit-card .row { display: grid; gap: 6px; margin-bottom: 10px; }
.submit-card label { font-size: 12px; color: #111827; opacity: 0.8; }
.submit-card input,
.submit-card textarea {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  color: #111;
  background: #fff;
}
.submit-actions { display: grid; grid-template-columns: auto auto; gap: 8px; }

@media (max-width: 768px) {
  .submit-card { border-radius: 12px; padding: 12px; }
  .submit-card input, .submit-card textarea { border-radius: 12px; }
}
/* Catalog accordion */
.catalog { display: grid; gap: 10px;padding-bottom: 10px; }

.cat {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  overflow: clip;
}

.cat-header {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  background: #f9fafb;
  color: #111;
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid #e5e7eb;
  cursor: pointer;
}
.cat-header .cat-title { font-weight: 700; }
.cat-header .chev { transition: transform 180ms ease; }
.cat.open .cat-header .chev { transform: rotate(180deg); }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
}

/* Reuse your product-card look (compatible with current product grid styles) */
.product-card {
  display: grid;
  gap: 6px;
  place-items: center;
  text-align: center;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px;
  background: #fff;
}
.product-card img { width: 100%; max-width: 140px; aspect-ratio: 1/1; object-fit: contain; }
.product-card .label { font-size: 12px; color: #111; font-weight: 600; }
.product-card.active { border-color: #111827; box-shadow: 0 6px 16px rgba(0,0,0,0.08); }

/* Mobile: 2-up grid inside a category */
@media (max-width: 768px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
}


/* === Tattoo app layout (fixed heights) === */
.tattoo-root { min-height: 100%; display: flex; flex-direction: column; }

.tattoo-header {
  height: 56px; display: flex; align-items: center; gap: 12px;
  padding: 0 12px; border-bottom: 1px solid #e5e7eb; background: #fff;
}
.tattoo-header .title { font-weight: 700; color: #0f172a; }
.tabs { display: flex; gap: 8px; }
.tab {
  background: #0f172a; color: #fff; border: none; padding: 8px 12px;
  border-radius: 10px; cursor: pointer; opacity: .6;
}
.tab.active { opacity: 1; }

.tattoo-main {
  flex: 1; min-height: 560px; /* <- ensures preview is visible */
  display: grid; gap: 12px; padding: 12px;
  grid-template-columns: minmax(320px, 520px) 1fr;
}
@media (max-width: 900px) { .tattoo-main { grid-template-columns: 1fr; } }

.pane {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  overflow: hidden; display: flex; flex-direction: column; min-height: 520px;
}
.pane-empty { flex: 1; display: grid; place-items: center; color: #6b7280; }

/* UV editor */
.uv-editor { display: flex; flex-direction: column; height: 100%; }
.uv-toolbar { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; border-bottom: 1px solid #e5e7eb; }
.btn { border: 1px solid #e5e7eb; background: #0f172a; color: #fff; padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.btn.primary { background: #0ea5a4; border-color: #0ea5a4; }

.uv-canvas-wrap { flex: 1; display: grid; place-items: center; background: #f3f4f6; }
.uv-canvas-wrap canvas {
  max-width: 100%; max-height: 100%;
  box-shadow: 0 8px 30px rgba(0,0,0,.15); border-radius: 10px; background: #fff;
}

/* Preview pane must have height */
.preview-root { flex: 1; min-height: 100%; }
.preview-root canvas { width: 100% !important; height: 100% !important; display: block; }

/* already in your styles.css, but add/tweak these lines */
.uv-canvas-wrap canvas {
  width: min(92%, 720px);  /* scales down visually */
  height: auto;
  image-rendering: auto;
}

.tattoo-grid { display: grid; grid-template-columns: 380px 1fr; gap: 16px; height: calc(100vh - 60px); }
@media (max-width: 1024px) { .tattoo-grid { grid-template-columns: 1fr; } }
.tattoo-preview, .tattoo-preview canvas { width: 100%; height: 100%; display: block; }

/* src/tattoo/tattoo.css */
.tattoo-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 16px;
  height: calc(100vh - 60px);
}
@media (max-width: 1024px) {
  .tattoo-grid { grid-template-columns: 1fr; }
}
.left-pane { min-width: 340px; }
.right-pane, .right-pane canvas { width: 100%; height: 100%; display: block; }