/* ==========================================================================
   Café Theme — Compact, Professional, Modern-only (uses :has, :is, min())
   Layout: TOOLS (left) • CUP/CANVAS (center) • LAYERS (right)
   Canvas logical size = 1604x917 (>=300 DPI for ~5"x2.5"). UI scales down via CSS.
   ========================================================================== */

/* =========================
   0) Theme Variables
   ========================= */
:root{
  /* Core sizing */
  --gap:16px;
  --save-load-w:96px;
  --tools-w:320px;
  --layers-w:320px;
  --sticky-top:12px;

  /* Canvas sizing (logical pixels; CSS scale keeps on-screen size compact) */
  --canvas-max:785px;           /* on-screen cap so initial load stays compact */
  --canvas-aspect:1.748;
  --canvas-base-w:1604px;      /* logical canvas width for 300 DPI */
  --canvas-base-h:917px;       /* logical canvas height for 300 DPI */
  --canvas-scale:1;            /* CSS transform scale applied by JS */

  /* Radius / borders / shadow */
  --r-sm:6px;
  --r-md:8px;
  --b1:1px solid;
  --b2:2px solid;
  --sh-sm:0 1px 2px rgba(0,0,0,.06);
  --sh-md:0 4px 8px rgba(62,39,35,.15);

  /* Café palette */
  --coffee-dark:#3e2723;
  --coffee-medium:#6b4f4f;
  --coffee-light:#d8c3a5;
  --coffee-cream:#f5f0e6;
  --coffee-accent:#c19a6b;
  --coffee-hover:#b08968;

  /* Section header accents */
  --section-header-1:#5e4438;
  --section-header-2:#684c3f;
  --section-header-3:#725345;
  --section-header-4:#7c5a4b;
  --section-header-locked:#59403b;

  /* Derived */
  --border-accent:#bfa584;
  --border-strong:#8c5c3b;
  --panel-bg:var(--coffee-light);
  --card-bg:var(--coffee-cream);
  --focus-ring:rgba(193,154,107,.28);

  /* Page cap for centering */
  --page-max: calc(
    var(--save-load-w) +
    var(--tools-w) +
    var(--canvas-max) +
    var(--layers-w) +
    var(--save-load-w) +
    4 * var(--gap)
  );
}

/* =========================
   1) Body Background
   ========================= */
*,*::before,*::after{
  box-sizing:border-box;
}

body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  font-family:"Poppins","Arial",sans-serif;
  color:var(--coffee-dark);
  background:linear-gradient(135deg,#f5f0e6,#ede0d4,#d8c3a5,#c19a6b);
  background-size:400% 400%;
  animation:cafeDrift 18s ease-in-out infinite;
}
@keyframes cafeDrift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@media (prefers-reduced-motion:reduce){ body{animation:none} }

/* Loading screen overlay */
body.loading-active{
  overflow:hidden;
}

/* Hide the tour UI while the loading curtain is active so it never peeks above */
body.loading-active .tg-dialog,
body.loading-active .tourguide-dialog,
body.loading-active .tg-overlay,
body.loading-active .tourguide-overlay,
body.loading-active .tg-backdrop,
body.loading-active .tg-highlight{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

#loading-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(circle at 20% 30%, rgba(40, 50, 90, 0.85), rgba(20, 22, 40, 0.9)),
    linear-gradient(135deg, rgba(25, 30, 60, 0.9), rgba(10, 10, 25, 0.95));

  background-size: 200% 200%; /* IMPORTANT for animation visibility */
  animation: gradientShift 10s ease-in-out infinite alternate;

  backdrop-filter: blur(4px);
  z-index: 2147483000;
  transition: opacity .4s ease, visibility .4s ease;
}

.loading-shell{
  width:100%;
  min-height:320px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:32px;
  box-sizing:border-box;
}

/* Gently moves the gradients around */
@keyframes gradientShift {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}


/* Gently moves the gradients around */
@keyframes gradientShift {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}


#loading-screen.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.loading-card{
  background:rgba(245,240,230,0.9);
  padding:24px 28px;
  border-radius:var(--r-md);
  box-shadow:var(--sh-md);
  text-align:center;
  max-width:360px;
  width:90%;
  border:var(--b2) rgba(255,255,255,0.6);
}

.loading-spinner{
  width:48px;
  height:48px;
  margin:0 auto 12px;
  border-radius:50%;
  border:4px solid rgba(62,39,35,0.25);
  border-top-color:var(--coffee-dark);
  animation:spin 1s linear infinite;
}

.loading-title{
  margin:0 0 6px;
  font-size:1.1rem;
  font-weight:700;
  color:var(--coffee-dark);
}

.loading-subtext{
  margin:0;
  color:#4a3b33;
  font-size:.95rem;
  line-height:1.4;
}

@keyframes spin{
  to{transform:rotate(360deg)}
}

/* =========================
   2) App Layout Grid
   ========================= */
#editor-container{
  display:grid;
  grid-template-columns:
    minmax(80px, var(--save-load-w))
    minmax(260px, var(--tools-w))
    minmax(0, var(--canvas-max))
    minmax(260px, var(--layers-w))
    minmax(80px, var(--save-load-w));
  grid-template-rows:auto auto 1fr auto; /* cup • switcher • canvas • locked */
  grid-template-areas:
    "save tools cup    layers ."
    "save tools switch layers ."
    "save tools canvas layers ."
    "save tools canvas locked .";
  column-gap:var(--gap);
  row-gap:var(--gap);
  align-items:start;

  /* centered page */
  justify-content:center;
  justify-items:stretch;
  margin-inline:auto;
  max-width:var(--page-max);
  width:100%;
  padding-left:0;
  padding-inline:clamp(8px, 2vw, 24px);
}
#save-and-load-bar{grid-area:save}
#tools-container{grid-area:tools}
#cup3d{grid-area:cup}
#editor-container .canvas-switcher-above{grid-area:switch}
#canvas-container{grid-area:canvas}

.cup-switcher-target {
  display: block;
  position: relative;
  width: 100%;
  grid-area: cup;
}

.canvas-container-target {
  display: block;
  position: relative;
  width: 100%;
  grid-area: canvas;
  min-height: calc(var(--canvas-base-h) * var(--canvas-scale) + 36px);
}
#layer-manager{grid-area:layers}
#locked-layers-container{grid-area:locked}

/* =========================
   3) 3D Cup — EXACT width match with canvas
   ========================= */
#cup3d{
  justify-self:start;
  width:100%;                  /* fill center column */
  max-width:min(var(--canvas-max), 100%); /* hard cap = canvas cap */
  min-height:360px;
  margin:0;
}

/* =========================
   4) Canvas Area — logical 1604x917 (scaled to fit)
   ========================= */
#canvas-container{
  position:relative;
  justify-self:start;
  width:min(calc(var(--canvas-base-w) * var(--canvas-scale)), 100%);
  height:calc(var(--canvas-base-h) * var(--canvas-scale));
  min-height:calc(var(--canvas-base-h) * var(--canvas-scale));
  max-width:100%;
  margin:0 auto;
}
#canvas-container canvas{
  display:block;
  width:100%;
  max-width:var(--canvas-base-w);
  height:100%;
  background:transparent;
  border:var(--b2) var(--coffee-medium);
  border-radius:var(--r-sm);
}
#templateCanvasFront,#templateCanvasBack,
#canvasFront,#canvasBack{
  position:absolute; inset:0;
}
#templateCanvasFront,#templateCanvasBack{z-index:1}
#canvasFront,#canvasBack{z-index:2}

#front-canvas-wrap,
#back-canvas-wrap{
  width:calc(var(--canvas-base-w) * var(--canvas-scale));
  height:calc(var(--canvas-base-h) * var(--canvas-scale));
  max-width:100%;
  max-height:100%;
  margin:0 auto;
}

/* =========================
   4.1) Switchers (shared styles)
   - Makes the top Front/Back switch look like the in-canvas template selector.
   - Uses aria-pressed / .active / .is-active for selected state.
   ========================= */

/* containers */
:where(.canvas-switcher-above, #canvas-container .canvas-switcher){
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:.5rem !important;
  width:100% !important;
  max-width:var(--canvas-max) !important;
  margin:0 auto !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

/* keep the in-canvas one sticky */
#canvas-container .canvas-switcher{
  position:sticky; top:var(--sticky-top);
  z-index:3; margin-top:1px!important; padding-top:1px!important;
}

/* base buttons */
:where(.canvas-switcher-above, #canvas-container .canvas-switcher) button{
  -webkit-tap-highlight-color:transparent;
  appearance:none;
  position:relative;
  height:auto;
  padding:8px 14px;
  border-radius:var(--r-sm);
  border:1px solid var(--coffee-accent);
  box-sizing:border-box;
  background:var(--coffee-cream);
  color:var(--coffee-dark);
  font:600 1.05rem/1 "Poppins","Arial",sans-serif;
  cursor:pointer;
  transition:background-color .25s ease, color .25s ease, transform .12s ease, box-shadow .2s ease;
}

/* hover */
:where(.canvas-switcher-above, #canvas-container .canvas-switcher) button:hover{
  background:var(--coffee-hover);
  color:#fff;
  transform:scale(1.05);
}

/* selected state (aria or utility classes) */
:where(.canvas-switcher-above, #canvas-container .canvas-switcher) button[aria-pressed="true"],
:where(.canvas-switcher-above, #canvas-container .canvas-switcher) button.active,
:where(.canvas-switcher-above, #canvas-container .canvas-switcher) button.is-active{
  background:var(--coffee-medium);
  color:var(--coffee-cream);
  border:1px solid var(--coffee-medium);
}

/* unselected state */
:where(.canvas-switcher-above, #canvas-container .canvas-switcher) button[aria-pressed="false"]{
  background:var(--coffee-cream);
  color:var(--coffee-dark);
  border:1px solid var(--coffee-accent);
}

/* defensive: remove any “segmented/pill group” remnants */
:where(.canvas-switcher-above, #canvas-container .canvas-switcher) button + button::before{ content:none !important; }
:where(.canvas-switcher-above, #canvas-container .canvas-switcher) button{ box-shadow:none !important; }

/* =========================
   5.5) Save & Load Bar (far left)
   ========================= */
#save-and-load-bar{
  position:sticky; top:var(--sticky-top);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  width:var(--save-load-w);
  padding:14px 10px 18px;
  background:var(--panel-bg);
  border:1.5px solid var(--coffee-accent);
  border-radius:var(--r-md);
  box-shadow:0 4px 8px rgba(62,39,35,.18);
}

.save-load-title{
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--coffee-medium);
  text-align:center;
}

.save-load-btn{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:10px 8px;
  border-radius:12px;
  border:1px solid var(--border-strong);
  background:var(--coffee-cream);
  color:var(--coffee-dark);
  font-size:.75rem;
  font-weight:600;
  text-align:center;
  line-height:1.15;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease;
}

.save-load-btn:hover{
  background:var(--coffee-hover);
  color:#fff;
  box-shadow:var(--sh-md);
  transform:translateY(-1px);
}

.save-load-btn:focus{
  outline:none;
  box-shadow:0 0 0 3px var(--focus-ring), var(--sh-md);
}

.save-load-btn:active{
  transform:translateY(0);
}

.save-load-icon{
  font-size:1.45rem;
  line-height:1;
}

.save-load-label{
  font-size:.72rem;
  letter-spacing:.01em;
}

/* =========================
   6) Tools Panel (Left, compact)
   ========================= */
#tools-container{
  position:sticky; top:var(--sticky-top);
  width:var(--tools-w);
  max-height:calc(100vh - (var(--sticky-top) + 12px));
  overflow:auto hidden;
  background:var(--panel-bg);
  border-right:1.5px solid var(--coffee-accent);
  border-radius:var(--r-md);
  box-shadow:0 4px 8px rgba(62,39,35,.18);
  scrollbar-width:thin;
  scrollbar-color:var(--coffee-medium) var(--panel-bg);
}
#tools-container::-webkit-scrollbar{width:8px}
#tools-container::-webkit-scrollbar-thumb{
  background:var(--coffee-medium); border-radius:6px; border:2px solid var(--panel-bg)
}
#tools-container::-webkit-scrollbar-thumb:hover{background:var(--coffee-hover)}

/* =========================
   7) Section Headers (unified tone)
   ========================= */
#tools-container h3{
  cursor:pointer; margin:0; padding:.5rem .75rem;
  background:var(--section-header-1); color:var(--coffee-cream);
  border-radius:var(--r-sm);
  font-size:16px; font-weight:600;
  transition:background .25s ease, color .25s ease, transform .15s ease;
}
#tools-container .pro-tools-section h3{ margin-bottom:8px; }
#tools-container h3:nth-of-type(2){ background:var(--section-header-2) }
#tools-container h3:nth-of-type(3){ background:var(--section-header-3) }
#tools-container h3:nth-of-type(4){ background:var(--section-header-4) }
#tools-container h3:hover{ background:var(--coffee-hover); color:var(--coffee-dark); transform:translateY(-1px) }

/* =========================
   8) Accordion Content
   ========================= */
#tools-container .accordion-content,
#tools-container>div{
  display:none; overflow:hidden;
  padding-block:.4rem; background:var(--panel-bg);
  border-top:var(--b1) var(--coffee-accent);
}
#tools-container h3+div{ padding:8px 10px; margin-left:2px }

/* =========================
   9) Buttons & Inputs
   ========================= */
#tools-container :is(button,input[type="text"],input[type="file"],select){
  background:var(--coffee-accent); color:var(--coffee-dark);
  border:1px solid var(--border-strong);
  padding:6px 12px; margin:3px 0; font-size:14px; border-radius:5px; cursor:pointer;
  transition:background-color .2s ease, color .2s ease, transform .1s ease;
}
#alignment-tools button{ width:100%; }
#tools-container button:hover,
#tools-container :is(input[type="file"],select):hover{ background:var(--coffee-hover); color:#fff }
#tools-container button:active{ transform:scale(.97) }

.pro-tools-toggle{
  position:fixed;
  top:12px;
  right:16px;
  z-index:1200;
  background:var(--coffee-accent);
  color:var(--coffee-dark);
  border:1px solid var(--border-strong);
  padding:8px 14px;
  border-radius:var(--r-md);
  font-weight:700;
  box-shadow:var(--sh-md);
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, color .2s ease;
}
.pro-tools-toggle:hover{ background:var(--coffee-hover); color:#fff; transform:translateY(-1px); }
.pro-tools-toggle:active{ transform:translateY(0); }
.pro-tools-section{ display:none; }
body.pro-tools-active #tools-container .pro-tools-section{ display:block !important; }

#tools-container :is(input[type="text"],input[type="file"],select,textarea){
  background:var(--coffee-cream); color:var(--coffee-dark);
  border:1.25px solid var(--border-accent); border-radius:7px;
  padding:8px 10px; line-height:1.15; cursor:text; box-sizing:border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), var(--sh-sm);
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
#tools-container :is(input[type="text"],input[type="file"],select,textarea):hover{ background:#fffdf8 }
#tools-container :is(input[type="text"],input[type="file"],select,textarea):focus{
  outline:none; background:#fff; border-color:var(--coffee-medium); box-shadow:0 0 0 3px var(--focus-ring)
}
#tools-container :is(input,textarea)::placeholder{ color:#8b6f63; opacity:.9 }

#text-input{ background:linear-gradient(180deg,#fff,var(--coffee-cream)) }
#qr-input{
  background:#fff; border-color:#b48c6b; box-shadow:inset 0 1px 0 rgba(255,255,255,.7), var(--sh-sm)
}
#qr-input:focus{ box-shadow:0 0 0 3px rgba(122,81,64,.22) }
#text-input,#qr-input{ width:100% }

#qr-code-tools{
  background:#d7bea8; border:1px solid #b48c6b; border-radius:var(--r-sm);
  padding:10px 12px; margin:8px 6px 12px; box-shadow:inset 0 1px 2px rgba(0,0,0,.08);
}
#qr-code-tools .qr-header{ font-weight:600; font-size:.95rem; margin-bottom:6px; color:#3e2b1f }
#qr-code-tools .qr-content{ display:flex; flex-direction:column }
#qr-code-tools .qr-content input{
  width:100%; padding:7px; border:1px solid #b48c6b; border-radius:4px; margin-bottom:8px; font-size:.92rem; outline:none;
}
#qr-code-tools .qr-content button{
  align-self:flex-start; background:#b48c6b; color:#fff; border:none; border-radius:4px; padding:7px 12px;
  cursor:pointer; font-weight:600; transition:background-color .2s ease-in-out;
}
#qr-code-tools .qr-content button:hover{ background:#a07756 }

#alignment-tools .alignment-grid{
  display:grid;
  gap:6px;
  grid-template-columns:repeat(3,1fr);
  margin-top:6px;
}
#alignment-tools .alignment-note{
  margin:8px 2px 0;
  font-size:12px;
  color:#4a3b33;
}

/* =========================
   10) Recolor Panel — polished card
   ========================= */
.recolor-card{
  background:linear-gradient(180deg,#fff,var(--coffee-cream));
  border:1px solid var(--border-accent);
  border-radius:var(--r-sm);
  padding:10px 12px;
  margin:8px 6px 12px;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.7), var(--sh-sm);
}
.recolor-card:hover{ box-shadow:inset 0 1px 2px rgba(255,255,255,.85), 0 2px 4px rgba(0,0,0,.06) }

.recolor-header{
  display:flex; align-items:center; gap:.5rem;
  font-weight:600; font-size:.95rem; color:#3e2b1f;
  margin:0 0 8px;
  letter-spacing:.01em;
}
.recolor-header::before{
  content:"🎨";
  font-size:1.05rem;
  transform:translateY(1px);
}

.recolor-row{
  display:flex; align-items:center; gap:.75rem;
}

.recolor-row label{
  font-size:.92rem;
  color:var(--coffee-dark);
  font-weight:600;
  min-width:54px;
  user-select:none;
}

/* Larger, tactile color picker */
#assetColorPicker{
  inline-size:48px;
  block-size:34px;
  padding:0;
  border:1.5px solid var(--border-strong);
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), 0 1px 2px rgba(0,0,0,.08);
  transition:border-color .2s ease, box-shadow .2s ease, transform .06s ease;
}
#assetColorPicker:hover{
  box-shadow:inset 0 0 0 1px var(--coffee-hover), 0 2px 4px rgba(0,0,0,.10);
}
#assetColorPicker:active{ transform:scale(.98) }
#assetColorPicker:focus{
  outline:none;
  border-color:var(--coffee-medium);
  box-shadow:0 0 0 3px var(--focus-ring), inset 0 1px 0 rgba(255,255,255,.7);
}

/* Make the inner swatch clean and rounded */
#assetColorPicker::-webkit-color-swatch-wrapper{ padding:0; border-radius:8px }
#assetColorPicker::-webkit-color-swatch{ border:none; border-radius:8px }
#assetColorPicker::-moz-color-swatch{ border:none; border-radius:8px }

/* =========================
   14) Layer Manager / Locked Layers (Right)
   ========================= */
#layer-manager,
#locked-layers-container {
  position: sticky;
  padding: 12px;
  border: var(--b2) var(--coffee-accent);
  border-radius: var(--r-md);
  background: var(--panel-bg);
  box-shadow: var(--sh-md);
  width: var(--layers-w);
  overflow: auto;
}

#layer-manager {
    top: var(--sticky-top);
    max-height: calc(100vh - (var(--sticky-top) + 24px));
    overflow: auto;
}

#locked-layers-container {
  top: calc(var(--sticky-top) + 50vh);
  max-height: calc(50vh - var(--sticky-top));
}

#locked-layers-container h3{
  margin:0;
  padding:.5rem .75rem;
  background:var(--section-header-locked);
  color:var(--coffee-cream);
  border-radius:var(--r-sm);
  font-size:16px;
  font-weight:600;
  letter-spacing:.01em;
}

#layer-manager h2 {
  text-align: center;
  margin: 0;
  padding: 5px 0;
  border-bottom: var(--b1) var(--coffee-accent);
  font-size: 1.1rem;
  color: var(--coffee-dark);
}

#layer-list li {
  margin: 5px 0;
  padding: 6px;
  border: var(--b1) var(--border-accent);
  cursor: move;
  background: var(--coffee-tan, #e8dfd8); /* darker neutral base */
  border-radius: 5px;
  transition: background 0.25s ease, transform 0.15s ease;
}

#layer-list li:hover {
  background: var(--coffee-cream, #f3ebe5); /* lighter on hover */
  transform: translateY(-1px);
}

#layer-list li.selected {
  background: var(--coffee-accent);
  color: #fff;
  border-left: 5px solid var(--coffee-medium);
  padding-left: 10px;
}

#layer-list .hidden-layer {
  display: none;
}


/* =========================
   15) Intentional Hides
   ========================= */
#locked-layers-container{ display:none!important }

/* =========================
   16) Edge-case cleanup
   ========================= */
#cup3d,#canvas-container{ margin:0 auto !important; padding:0!important }

/* =========================
   17) Responsive tweaks
   ========================= */
#tools-container .section:has(> button){
  display:flex; flex-wrap:wrap; row-gap:3px; column-gap:6px;
}
#tools-container .section:has(> button)>button{
  flex:1 1 calc(50% - 3px); box-sizing:border-box; white-space:nowrap;
}
#tools-container .section:has(> button)>#delete-btn{
  flex:1 1 100%;
}
@media (max-width:1600px){
  /* Drop the layer stacks below the tools column before the canvas/cup shrink. */
  #editor-container{
    grid-template-columns:
      minmax(80px, var(--save-load-w))
      minmax(260px, var(--tools-w))
      minmax(0, var(--canvas-max));

    grid-template-areas:
      "save tools cup"
      "save tools switch"
      "save tools canvas"
      "save layers canvas"
      "save locked canvas";
  }

  #layer-manager,
  #locked-layers-container{
    position:static;
  }
}
@media (max-width:560px){
  #tools-container .section:has(> button)>button{ flex:1 1 100% }
}

@media (max-width:1200px){
  #editor-container{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "cup"
      "switch"
      "canvas"
      "tools"
      "layers"
      "locked"
      "save";
    padding-inline:clamp(16px, 5vw, 32px);
    justify-items:center;
    max-width:calc(100vw - clamp(24px, 6vw, 48px));
  }

  /* Center each stacked panel so the column is balanced on small screens */
  #editor-container > *{
    width:min(100%, 720px);
    max-width:calc(100vw - clamp(32px, 8vw, 56px));
    justify-self:center;
  }

  #save-and-load-bar,
  #tools-container,
  #layer-manager,
  #locked-layers-container{
    position:static;
    max-height:none;
    width:100%;
    max-width:100%;
  }

  #tools-container,
  #layer-manager,
  #locked-layers-container{
    overflow:visible;
  }

  #cup3d{
    /* Keep the cup height consistent with the default size at this breakpoint */
    min-height:360px;
    justify-self:center;
  }

  #canvas-container{
    justify-self:center;
  }
}

@media (max-width:900px){
  :root{ --gap:12px; }
}

/* End of file */