:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.1rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3rem);
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
  --radius-sm: .5rem; --radius-md: .8rem; --radius-lg: 1rem; --radius-xl: 1.25rem; --radius-full: 999px;
  --color-bg: #f5f7fd;
  --color-surface: #f5f7fd;
  --color-surface-2: #ffffff;
  --color-surface-3: #e9e2da;
  --color-border: rgba(40,37,29,.12);
  --color-grid: rgba(0,0,0,.08);
  --color-text: #231f19;
  --color-text-muted: #726b62;
  --color-text-faint: #9a938b;
  --color-primary: #000000;
  --color-primary-2: #e1e1e1;
  --color-success: #00a120;
  --color-danger: #8f2f4f;
  --shadow-sm: 0 1px 2px rgba(20, 14, 8, 0.06);
  --shadow-md: 0 10px 25px rgba(20, 14, 8, 0.08);
  --shadow-lg: 0 20px 50px rgba(20, 14, 8, 0.14);
  --transition: 180ms cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:none;text-size-adjust:none;scroll-behavior:smooth}
body{min-height:100dvh;font-family: 'Jost', sans-serif;line-height:1.6;background:var(--color-bg);color:var(--color-text)}
img,canvas,svg{display:block;max-width:100%}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
input[type="range"]{width:100%}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}
.app-shell{max-width:1170px;margin-inline:auto;padding:var(--space-4);display:grid;gap:var(--space-4)}
.topbar{height: 60px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);backdrop-filter:blur(12px)}
.brand img{max-height: 33px;}
.brand-copy h1{font-size:var(--text-xl);line-height:1.05}
.brand-copy p{font-size:var(--text-sm);color:var(--color-text-muted)}
.top-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.uppercase {text-transform: uppercase; text-decoration: none}
.icon-btn,.btn{min-height:24px;padding:.25rem 0.8rem;border-radius:var(--radius-full);border:1px solid var(--color-border);background:var(--color-surface);transition:transform var(--transition),background var(--transition),border-color var(--transition),box-shadow var(--transition)}
.btn-primary{background:var(--color-primary);color:white;border-color:transparent;box-shadow:var(--shadow-sm)}
.btn-success{background:var(--color-success);color:white;border-color:transparent;box-shadow:var(--shadow-sm)}
.btn:hover,.icon-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);}
.workspace{display:grid;grid-template-columns: minmax(380px, 520px) minmax(0,1fr);gap:var(--space-4);}
.panel{background:color-mix(in srgb, var(--color-surface) 90%, transparent);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);overflow:hidden}
.editor-layout{display:grid;grid-template-rows:auto auto 1fr;min-height:100%}
.panel-head{padding:var(--space-3);display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);border-bottom:1px solid var(--color-border);background:var(--color-surface)}

/* .panel-head p{font-size:var(--text-sm);color:var(--color-text-muted);max-width:40ch} */
.editor-stage-wrap{padding:var(--space-5);border-bottom:1px solid var(--color-border);display:grid;gap:var(--space-4)}
.editor-stage{position:relative;background:var(--color-surface-3);min-height:420px;display:grid;place-items:center;overflow:hidden}
.preview-grid{position:absolute;inset:0;background-image:linear-gradient(to right, var(--color-grid) 1px, transparent 1px),linear-gradient(to bottom, var(--color-grid) 1px, transparent 1px);background-size:24px 24px;pointer-events:none}
.tile-inner{position:absolute;inset:0;overflow:hidden}
.editor-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.empty-state{padding:var(--space-5);display:grid;gap:var(--space-2);text-align:center;color:var(--color-text-muted);font-size:var(--text-xs)}
.chip-row{display:flex;flex-wrap:wrap;gap:var(--space-1); margin: auto 0;}
.format-chip{min-height:20px;padding:.5rem .8rem;border-radius:var(--radius-full);background:var(--color-primary-2);border:1px solid var(--color-border);font-size:var(--text-xs)}
.format-chip.active{background:var(--color-primary-2);border-color:color-mix(in srgb,var(--color-primary) 50%, var(--color-border));color:var(--color-primary);font-weight:700}
.format-chip img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  display: block;
  opacity: 0.6;
  transition: opacity var(--transition);
}
.format-chip.active img {
  opacity: 1;
  /* filter: invert(30%) sepia(80%) saturate(400%) hue-rotate(150deg); */
}
.quick-chip{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-1);border-radius:var(--radius-md);border:2px solid transparent;background:none;cursor:pointer;transition:border-color var(--transition);}
.quick-chip:hover:not(.active){border-color:var(--color-border);}
.quick-chip.active{border-color:var(--color-primary);}
.quick-chip.active span{color:var(--color-primary);font-weight:600;}
.chip-preview{width:64px;height:64px;object-fit:cover;border-radius:var(--radius-sm);display:block;pointer-events:none;}
.quick-chip span{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1;white-space:nowrap;}
.controls{padding:var(--space-5);overflow:auto;display:grid;gap:var(--space-5);align-content:start}
.group{display:grid;gap:var(--space-3)}
.group h3{font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted)}
.field-grid{display:grid;gap:var(--space-2);}
.field-grid-2cols{grid-template-columns: 1fr 1fr;}
.field{display:grid;gap:.35rem; margin-top: 10px;}
.field label{display:flex;justify-content:space-between;gap:var(--space-4);font-size:var(--text-sm);font-weight:400}
.field output{color:var(--color-text-muted);font-variant-numeric:tabular-nums}
.field input[type="range"]{-webkit-appearance:none;appearance:none;height:8px;border-radius:999px;background:linear-gradient(-90deg,var(--color-primary),color-mix(in srgb,var(--color-primary) 20%, transparent));outline:none}
.field input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--color-surface);border:2px solid var(--color-primary);box-shadow:var(--shadow-sm)}
.field input[type="checkbox"]{width:18px;height:18px;accent-color:var(--color-primary)}
.toolbar-inline{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
.upload-box{display:grid;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-lg);border:1px dashed color-mix(in srgb,var(--color-primary) 32%, var(--color-border));background:linear-gradient(180deg,color-mix(in srgb,var(--color-primary-2) 80%, transparent), transparent)}
.upload-box input{width:100%; margin: auto; text-align: center;}
.simulator-layout{display:grid;grid-template-rows:auto auto 1fr;min-height:100%}
.sim-stage{opacity: 0; display: none; position:absolute;min-height:420px;background:radial-gradient(circle at top, rgba(116,178,186,.16), transparent 30%),linear-gradient(180deg,#d7d1ca,#b7afa6 46%, #8e8479 100%)}
#threeCanvas{width:100%;height:100%;display:block; min-height:420px}
.sim-overlay{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto;pointer-events:none}
.sim-card{padding:var(--space-4);max-width:360px;pointer-events:auto;}
.sim-footer{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-top:1px solid var(--color-border)}
.stat-row{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.stat-pill{padding:.55rem .8rem;border-radius:var(--radius-full);background:var(--color-surface-2);border:1px solid var(--color-border);font-size:var(--text-xs);color:var(--color-text-muted)}
.toggle{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text-muted)}
.footer-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.hidden-canvas{display:none}
.hint{font-size:var(--text-xs);color:var(--color-text-muted)}
.action-bar{display:flex;flex-wrap:wrap;gap:var(--space-2); margin-left: auto; margin-top: 24px;}

.upload-box.drag-over {
  border-color: var(--accent, #6c8ebf);
  background: color-mix(in srgb, var(--accent, #6c8ebf) 8%, transparent);
  cursor: copy;
}

@media (max-width: 1200px){
  .controls{max-height:none; padding: var(--space-8);}

  /* ── Sticky simulator on mobile ─────────────────────────────── */
  .workspace {
    /* Stack rows: simulator on top, editor below */
    grid-template-columns:1fr;
    grid-template-rows: auto 1fr;
    align-items: start;         /* prevent children from stretching */
  }

  .simulator-layout {
    position: sticky;
    top: var(--space-2);        /* sticks to the top of the viewport */
    z-index: 1;                /* stays above the scrolling editor */
  }

  .editor-layout {
    /* Scrolls naturally behind the sticky simulator */
    position: relative;
    z-index: 10;
    padding-top: 8px;
  }
  .editor-layout::before {
    content: '';
    position: sticky;
    top: 0;
    display: block;
    width: 60px;
    height: 6px;
    margin: 12px auto;
    border-radius: 4px;
    background: var(--color-text-muted, #ccc);
    opacity: 0.6;
  }
  .brand img{max-height: 24px;}
  .top-actions{font-size: var(--text-xs)}
}

@media (max-width: 720px){
  .app-shell{padding:var(--space-3)}
  .topbar{padding:var(--space-3);}
  .sim-card{margin:var(--space-4);max-width:none}
}

.view-toggle{
  display:inline-flex;
  gap:var(--space-2);
  padding:var(--space-1);
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  border-radius:var(--radius-full);
}

.view-chip{
  min-height:20px;
  padding:0.5rem 0.8rem;
  font-size: var(--text-xs);
  border-radius:var(--radius-full);
  background:transparent;
  color:var(--color-text-muted);
}

.view-chip.active{
  background:var(--color-primary);
  color:var(--color-primary);font-weight:700;
  background:var(--color-primary-2);border-color:color-mix(in srgb,var(--color-primary) 50%, var(--color-border));
}

.bg-tools {
  display: grid;
  gap: var(--space-3);
}

.color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.color-swatch {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  display: grid;
  place-items: center;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.color-swatch:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.color-swatch.active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.swatch {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.swatch-transparent {
  background:
    linear-gradient(45deg, #d8d8d8 25%, transparent 25%, transparent 75%, #d8d8d8 75%),
    linear-gradient(45deg, #d8d8d8 25%, transparent 25%, transparent 75%, #d8d8d8 75%);
  background-position: 0 0, 6px 6px;
  background-size: 12px 12px;
  background-color: #ffffff;
}