:root{
  --ink:#14151f;
  --panel:#1c1e2c;
  --border:#2c2f45;
  --paper:#f1ede4;
  --muted:#9a9cb5;
  --gold:#e7b84b;
  --gold-dim:#e7b84b33;
  --teal:#5fa8a2;
  --danger:#d97a6c;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:'Inter',sans-serif;
  height:100vh;
  overflow:hidden;
}
.app{ display:flex; flex-direction:column; height:100vh; }

/* ---- Top bar: brand, main-option tabs, generate/export actions ---- */
.topbar{
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:22px;
  padding:14px 24px;
  background:var(--panel);
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
.brand-compact{ display:flex; flex-direction:column; gap:1px; flex-shrink:0; }
.brand-compact h1{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:20px;
  margin:0;
  letter-spacing:-0.01em;
}
.brand-compact p{ margin:0; color:var(--muted); font-size:12px; }

.tabs{ display:flex; gap:6px; flex-wrap:wrap; flex:1; min-width:0; }
.tab-btn{
  font-family:'Inter',sans-serif;
  font-size:13.5px;
  font-weight:600;
  padding:9px 16px;
  border-radius:8px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
  white-space:nowrap;
}
.tab-btn:hover:not(:disabled){ color:var(--paper); border-color:var(--teal); }
.tab-btn.active{ background:var(--gold); color:#241c05; border-color:var(--gold); }
.tab-btn:disabled{ opacity:0.3; cursor:not-allowed; }

.topbar-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.topbar-actions .primary{ padding:11px 20px; font-size:14px; }
.topbar-actions .export-row{ display:flex; gap:6px; }
.topbar-actions .export-row button{ padding:11px 12px; font-size:13px; }

/* ---- Canvas: centered in the middle of the screen ---- */
.canvas-area{
  flex:1;
  min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}

/* ---- Sub options: detail controls for the active main tab, below the canvas ---- */
.sub-options{
  flex-shrink:0;
  max-height:38vh;
  background:var(--panel);
  border-top:1px solid var(--border);
  padding:20px 24px;
  overflow-y:auto;
}
.tab-panel{
  display:none;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:30px;
}
.tab-panel.active{ display:flex; }

.section{
  display:flex; flex-direction:column; gap:12px;
  width:250px; flex-shrink:0;
}
.section-title{ font-size:14px; font-weight:600; color:var(--paper); flex-shrink:0; }

.select{
  width:100%;
  padding:11px 12px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--ink);
  color:var(--paper);
  font-family:'Inter',sans-serif;
  font-size:14px;
}

.dropzone{
  border:1.5px dashed var(--border);
  border-radius:10px;
  padding:20px 16px;
  text-align:center;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.dropzone:hover, .dropzone.drag{ border-color:var(--gold); background:var(--gold-dim); }
.dropzone p{ margin:0; font-size:13.5px; color:var(--muted); }
.dropzone p.main{ color:var(--paper); font-size:14px; margin-bottom:4px; }
input[type="file"]{ display:none; }

.thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.thumbs.confirmed{ display:flex; flex-direction:column; gap:12px; }

.thumb{
  position:relative;
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--border);
}
.thumb:not(.thumb-confirmed){
  aspect-ratio:1/1;
  background:
    linear-gradient(45deg,#2a2c3e 25%,transparent 25%,transparent 75%,#2a2c3e 75%),
    linear-gradient(45deg,#2a2c3e 25%,transparent 25%,transparent 75%,#2a2c3e 75%);
  background-size:10px 10px;
  background-position:0 0,5px 5px;
  background-color:#20222f;
}
.thumb:not(.thumb-confirmed) img{ width:100%; height:100%; object-fit:contain; }
.thumb.thumb-confirmed{ display:flex; flex-direction:column; gap:10px; padding:10px; background:#20222f; }

.thumb-imgwrap{
  position:relative; width:100%; aspect-ratio:1/1; border-radius:6px; overflow:hidden;
  background:
    linear-gradient(45deg,#2a2c3e 25%,transparent 25%,transparent 75%,#2a2c3e 75%),
    linear-gradient(45deg,#2a2c3e 25%,transparent 25%,transparent 75%,#2a2c3e 75%);
  background-size:10px 10px; background-position:0 0,5px 5px; background-color:#20222f;
}
.thumb-imgwrap img{ width:100%; height:100%; object-fit:contain; }

.thumb button{
  position:absolute; top:3px; right:3px;
  width:18px; height:18px; border-radius:50%;
  border:none; background:rgba(20,21,31,0.85); color:var(--danger);
  font-size:12px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.thumb button:hover{ background:var(--danger); color:var(--ink); }

.thumb-controls{ display:flex; flex-direction:column; gap:8px; }
.thumb-controls .mini-row label{
  display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-bottom:4px;
}
.thumb-controls .mini-range{ height:3px; }

.confirmed-note{ font-size:12px; color:var(--teal); line-height:1.5; }

.color-row{ display:flex; gap:14px; }
.color-row label{
  display:flex; flex-direction:column; gap:6px;
  font-size:12.5px; color:var(--muted); flex:1;
}
.color-row input[type="color"]{
  width:100%; height:34px; border:1px solid var(--border);
  border-radius:7px; background:none; padding:2px; cursor:pointer;
}

.checkbox-row{
  display:flex; align-items:flex-start; gap:9px;
  font-size:12.5px; color:var(--muted); cursor:pointer; line-height:1.4;
}
.checkbox-row input[type="checkbox"]{
  width:16px; height:16px; margin-top:1px; accent-color:var(--gold); cursor:pointer; flex-shrink:0;
}

.number-input{
  width:100%; padding:9px 11px; border-radius:8px;
  border:1px solid var(--border); background:var(--ink); color:var(--paper);
  font-family:'Inter',sans-serif; font-size:14px;
}
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.preset-row{ display:flex; gap:8px; }
.preset-row button.chip{ flex:1; padding:8px 4px; font-size:13px; }

.output-info{
  font-size:12px; color:var(--muted); line-height:1.5;
  padding-top:2px; font-variant-numeric:tabular-nums;
}

.control{ display:flex; flex-direction:column; gap:6px; }
.control-label{ display:flex; justify-content:space-between; align-items:baseline; font-size:13.5px; }
.control-label span.name{ color:var(--paper); }
.control-label span.value{ color:var(--gold); font-variant-numeric:tabular-nums; }
.control-hint{ font-size:12px; color:var(--muted); margin-top:-2px; }

input[type="range"]{
  -webkit-appearance:none; width:100%; height:4px;
  border-radius:2px; background:var(--border); outline:none;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
  background:var(--gold); cursor:pointer; border:2px solid var(--ink);
}
input[type="range"]::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%;
  background:var(--gold); cursor:pointer; border:2px solid var(--ink);
}

button.primary, button.secondary{
  font-family:'Inter',sans-serif; font-size:14.5px; font-weight:600;
  padding:13px 16px; border-radius:9px; border:none; cursor:pointer;
  transition:transform .08s ease, opacity .15s ease;
}
button.primary{ background:var(--gold); color:#241c05; }
button.primary:hover{ transform:translateY(-1px); }
button.secondary{ background:transparent; border:1px solid var(--border); color:var(--paper); }
button.secondary:hover{ border-color:var(--teal); color:var(--teal); }
button.secondary:disabled{ opacity:0.35; cursor:not-allowed; }

.canvas-wrap{
  box-shadow:0 30px 60px rgba(0,0,0,0.45); border-radius:4px; overflow:hidden;
  max-width:100%; max-height:100%;
}
#patternCanvas{
  display:block; max-width:100%; max-height:100%;
  width:auto; height:auto;
  background:
    linear-gradient(45deg,#252739 25%,transparent 25%,transparent 75%,#252739 75%),
    linear-gradient(45deg,#252739 25%,transparent 25%,transparent 75%,#252739 75%);
  background-size:24px 24px; background-position:0 0,12px 12px;
  background-color:#1e2030;
}

@media (max-width: 860px){
  .topbar{ padding:12px 16px; gap:14px; }
  .brand-compact p{ display:none; }
  .tabs{ order:3; width:100%; overflow-x:auto; flex-wrap:nowrap; }
  .topbar-actions{ margin-left:auto; }
  .sub-options{ padding:16px; max-height:44vh; }
  .section{ width:210px; }
  .canvas-area{ padding:16px; }
}