/* CORRECTED index.css: FINAL Layout and Toolbar Fixes */
*{box-sizing:border-box}
:root{
  --bg:#f6f7f9;--panel:#ffffff;--muted:#e2e5ea;--text:#1a1d21;--accent:#d5677a;
  --canvas-bg:#f8f1e8;--brand:#d8847c;
  --hoop-dark:#59585b;--hoop-mid:#bdb8b3;--hoop-light:#efe6de;--clamp:#dbdbdb;--clamp-dot:#e9ada6;
}
:root[data-theme="dark"], html[data-theme="dark"]{
  --bg:#0f1216;--panel:#171b21;--muted:#242a33;--text:#e6e8eb;--accent:#ff9bb0;
  --canvas-bg:#f8f1e8;
}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.4 system-ui,Segoe UI,Roboto,Helvetica,Arial;overflow-x:hidden;}
body.editor-page,body.preview-page,body.qe-page{overflow:hidden;}
body.landing-page{min-height:100dvh;display:flex;flex-direction:column;}
button,label{cursor:pointer}
button{border:1px solid var(--muted);background:var(--panel);color:var(--text);padding:.5rem .6rem;border-radius:.6rem;transition:background .2s ease,color .2s ease,box-shadow .2s ease;}
:root[data-theme="dark"] button{background:#1b212a;}
button:focus{outline:2px solid var(--accent)}
input,select{background:var(--panel);color:var(--text);border:1px solid var(--muted);border-radius:.35rem;padding:.25rem .4rem}
:root[data-theme="dark"] input,:root[data-theme="dark"] select{background:#10141a;color:#e6e8eb}
.icon-btn{display:inline-grid;place-items:center;min-width:32px;min-height:32px;padding:0}

.app-header{display:flex;flex-wrap: wrap; justify-content:space-between;align-items:center;padding:.6rem 1rem;border-bottom:1px solid var(--muted);background:var(--panel);position:sticky;top:0;z-index:20; gap: 0.5rem;}
.brand{display:flex;align-items:center;gap:.5rem}
a.brand{color:inherit;text-decoration:none}
.brand img{width:28px;height:28px;border-radius:6px}
.brand-name{font-weight:700;letter-spacing:.4px}
.app-header .actions{display:flex;gap:.5rem;align-items:center; flex-wrap: wrap; justify-content: flex-end;}
.app-header .upload span{display:inline-block;border:1px dashed var(--muted);padding:.45rem .6rem;border-radius:.6rem}

.header-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  color: color-mix(in srgb, #04060f 92%, var(--panel));
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 78%, #ffffff 22%),
    color-mix(in srgb, var(--accent) 58%, #ffffff 42%));
  box-shadow: 0 14px 22px color-mix(in srgb, var(--accent) 32%, transparent);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

:root[data-theme="dark"] .header-pill,
html[data-theme="dark"] .header-pill {
  color: #f7f8ff;
  box-shadow: 0 14px 22px color-mix(in srgb, var(--accent) 28%, transparent);
}

.header-pill:hover,
.header-pill:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 18px 28px color-mix(in srgb, var(--accent) 38%, transparent);
}

.header-pill:active {
  transform: scale(0.98);
  box-shadow: 0 10px 18px color-mix(in srgb, var(--accent) 28%, transparent);
}

.app-main{
  display:grid;
  grid-template-columns:minmax(220px,280px) 1fr;
  gap:0;
  height:calc(100dvh - 60px);
  overflow:hidden;
}

.toolbar{
  height: 100%;
  display:flex;
  flex-direction:column;
  justify-content:start;
  gap:.75rem;
  border-right:1px solid var(--muted);
  background:var(--panel);
  padding:10px;
  overflow:hidden;
  min-height:0;
}

.tool-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem; flex-shrink: 0;}
.tool-row .tool.active{background:var(--accent);color:var(--bg)} 

.scrollable-toolbar-content {
  flex-grow: 1;
  overflow-y: auto;
  padding-right: 5px;
  min-height: 0;
}
.tool-settings{display:grid;gap:.6rem; flex-shrink: 0; min-height: 0;}
.settings-group.hidden{display:none}
.settings-group button{margin-right:.35rem;margin-bottom:.35rem}
.settings-group .hint{font-size:.75rem;opacity:.7;margin:0}

.font-upload {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.85rem;
}

.font-upload input {
  width: 100%;
}

.bg-status {
  margin-top: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  font-size: 0.8rem;
}

.hoop-size{border-top:1px solid var(--muted);padding-top:.75rem;display:flex;flex-direction:column;gap:.5rem; flex-shrink: 0;} 

.custom-size-inputs{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap:.35rem;
  align-items:center;
  margin-bottom: 0.5rem;
}
.custom-size-inputs input { width: 100%; }
.custom-size-inputs span { text-align: center; }
#custom-apply { width: 100%; grid-column: 1 / -1; }

.hoop-overlay-hidden { display: none !important; }

.canvas-wrap{position:relative;display:flex;flex-direction:column;height:100%;min-width:0; overflow: hidden;}

#canvas-container{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  padding: clamp(24px, 5vh, 60px);
  overflow: hidden;
}

.status {
  padding: .5rem 1rem;
  background: var(--panel);
  border-top: 1px solid var(--muted);
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  align-items: center;
  flex-shrink: 0;
}

.status .toggle-hoop {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  white-space: nowrap;
}

.status .toggle-hoop input {
  accent-color: var(--accent);
}

.loading.hidden { display: none; }
.loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  z-index: 20;
}

.spinner {
  width: 34px;
  height: 34px;
  border: 4px solid #666;
  border-top-color: #ddd;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  margin-bottom: 8px;
}

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

#hoop-frame{
  position:relative;
  display: grid;
  place-items: center;
  width:auto;height:auto;
  --tO: 20px; --tM: 14px; --gap: 12px; --rI: 24px; --rM: 38px; --rO: 52px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  overflow: visible;
}
#hoop-frame > * {
  grid-area: 1 / 1;
}

#hoop-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:4;
  transform-origin: 0 0;
}
#hoop-overlay::before{
  content:""; position:absolute; inset: calc(-1 * (var(--tO) + var(--tM) + var(--gap))); z-index:0;
  border-radius: var(--rO); pointer-events:none;
  background: var(--hoop-dark);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.04),
    inset 0 0 0 calc(var(--tO) + var(--tM)) var(--hoop-mid),
    inset 0 0 0 var(--tO) var(--hoop-mid);
}
#hoop-overlay::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  inset: calc(-1 * (var(--tM) + var(--gap)));
  border-radius: var(--rM);
  background: transparent;
  box-shadow: 0 0 0 4px var(--hoop-light), inset 0 0 0 var(--gap) rgba(0,0,0,.15);
}
#hoop-overlay .clamp{
  position:absolute; right: calc(-1 * (var(--tO) + var(--tM)/2)); top:50%; transform:translateY(-50%);
  width:48px;height:168px;background:var(--clamp);border:2px solid #999;border-radius:4px;
  display:grid;place-items:center;z-index:10;
  box-shadow:0 2px 4px rgba(0,0,0,.2);pointer-events:none
}
#hoop-overlay .clamp .dot{width:18px;height:18px;background:var(--clamp-dot);border-radius:50%;box-shadow:inset 0 2px 0 rgba(255,255,255,.4)}

#hoop-frame .fabric-bg{
  width: 100%; height: 100%;
  border-radius:var(--rI); background:var(--canvas-bg);
  z-index:1; pointer-events:none;
  transform-origin: 0 0;
}

#hoop-frame .canvas-container {
  z-index: 5;
  width: 100% !important;
  height: 100% !important;
}
#hoop-frame .upper-canvas {
  touch-action: none;
}

/* --- NEW LAYER UI STYLES --- */
#layer-list{
  list-style:none;margin:0;padding:0;
  max-height:220px;overflow:auto;
  border:1px solid var(--muted);border-radius:.5rem;
  font-size: 0.9rem;
}
#layer-list li {
  padding: 0.4rem 0.6rem; 
  border-bottom: 1px solid var(--muted);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0.5rem;
}
#layer-list li:last-child { border-bottom: none; }
#layer-list li.active{
  background:var(--accent); 
  color: var(--bg); 
  font-weight: bold;
}
#layer-list li .layer-name {
  cursor: pointer;
  font-weight: bold;
}
#layer-list li .layer-controls {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
#layer-list li .layer-controls label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  font-size: 0.8rem;
}
#layer-list li .layer-controls select {
  padding: 0.1rem;
  font-size: 0.8rem;
  max-width: 100px;
}
#layer-list li .layer-controls span {
  opacity: 0.8;
}
/* --- END NEW STYLES --- */

@media (max-width: 1100px) {
  body{overflow:auto;}
  .app-main{
    height:auto;
    min-height:calc(100dvh - 60px);
    overflow:auto;
  }
}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:grid;place-items:center;backdrop-filter:blur(3px)}
.modal.hidden{display:none}
.modal-card{width:min(90vw,400px);background:var(--panel);border-radius:.8rem;box-shadow:0 8px 16px rgba(0,0,0,.3);padding:1.2rem}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.modal-head h2{font-size:1.4rem;margin:0}
.modal-body .export-groups{display:grid;grid-template-columns:1fr;gap:1.5rem}
.modal-body .export-groups h3{font-size:1.1rem;margin-top:0;margin-bottom:.6rem}
.modal-body .export-groups button{display:inline-block;margin:.2rem;min-width:70px}
.modal-body .note{font-size:.85rem;color:#999;margin-top:1rem}

@media (max-width:900px){
  .app-main{grid-template-columns:1fr; height: calc(100dvh - 88px); }
  .toolbar{order:2;border-right:0;border-top:1px solid var(--muted); position: initial; }
  #canvas-container { padding: 30px; }
}

@media (max-width:700px){
  .app-header{flex-direction:column;align-items:flex-start;gap:0.75rem;}
  .app-header .actions{width:100%;justify-content:space-between;gap:0.5rem;}
  .tool-row{grid-template-columns:repeat(2,minmax(0,1fr));}
  .toolbar{padding:0.75rem;max-height:320px;overflow-y:auto;}
  .scrollable-toolbar-content{max-height:220px;}
  .status{flex-wrap:wrap;gap:0.5rem;justify-content:space-between;}
}

@media (max-width:540px){
  .app-header .actions{flex-direction:column;align-items:stretch;}
  .tool-row{grid-template-columns:repeat(1,minmax(0,1fr));}
  .toolbar{max-height:360px;}
  .status{flex-direction:column;align-items:flex-start;}
}

/* Landing page styles */
.landing-header { position: sticky; top: 0; }
.landing-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: clamp(2rem, 5vw, 4rem); padding: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 6vw, 5rem); }
.landing-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.landing-hero-text { display: flex; flex-direction: column; gap: 1.25rem; }
.landing-eyebrow { text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.8rem; color: var(--accent); margin: 0; }
.landing-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 0; line-height: 1.1; }
.landing-description { margin: 0; font-size: 1rem; max-width: 52ch; opacity: 0.82; }
.landing-cta { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.cta-card { display: grid; gap: 0.75rem; padding: 1.25rem; border-radius: 1rem; border: 1px solid var(--muted); background: var(--panel); text-decoration: none; color: inherit; box-shadow: 0 18px 40px -25px rgba(0,0,0,0.2); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.cta-card:hover, .cta-card:focus { transform: translateY(-4px); box-shadow: 0 24px 50px -30px rgba(0,0,0,0.25); }
.cta-card h2 { margin: 0; font-size: 1.4rem; }
.cta-card p { margin: 0; font-size: 0.95rem; opacity: 0.8; }
.cta-button { display: inline-flex; align-items: center; justify-content: center; padding: 0.55rem 0.85rem; border-radius: 999px; background: var(--accent); color: var(--panel); font-weight: 600; font-size: 0.95rem; width: fit-content; }
.landing-hero-media { display: flex; justify-content: center; }
.landing-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; width: min(480px, 100%); }
.gallery-card { margin: 0; padding: 0.75rem; border-radius: 1.25rem; border: 1px solid var(--muted); background: var(--panel); display: grid; gap: 0.65rem; box-shadow: 0 16px 30px -25px rgba(0,0,0,0.25); }
.gallery-image { border-radius: 0.9rem; padding-top: 68%; background-size: cover; background-position: center; position: relative; overflow: hidden; }
.gallery-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-image::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(255,255,255,0.65), rgba(255,255,255,0)); mix-blend-mode: screen; }
.gallery-image-one { background-image: radial-gradient(circle at 20% 20%, #ffd8e6, #f9c0cf, #f3a2b5); }
.gallery-image-two { background-image: linear-gradient(135deg, #ffe9a9, #fdd5c2, #f7b9f1); }
.gallery-image-three { background-image: linear-gradient(135deg, #c5e4ff, #d7c7ff, #ffdde4); }
.gallery-card figcaption { font-size: 0.85rem; text-align: center; opacity: 0.75; }
.landing-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.detail-card { padding: 1.15rem; border-radius: 1rem; background: var(--panel); border: 1px dashed var(--muted); text-align: left; box-shadow: 0 18px 40px -28px rgba(0,0,0,0.2); }
.detail-card h3 { margin: 0 0 0.4rem; font-size: 1.1rem; }
.detail-card p { margin: 0; font-size: 0.9rem; opacity: 0.8; }
.landing-footer { padding: 1.5rem; text-align: center; font-size: 0.85rem; color: rgba(26,29,33,0.7); }
:root[data-theme="dark"] .landing-footer { color: rgba(230,232,235,0.7); }

@media (max-width: 640px) {
  .landing-hero { grid-template-columns: 1fr; }
  .landing-main { padding: 1.5rem; }
  .landing-gallery { width: 100%; }
}