/* ============ Pattern Studio — bauhaus theme ============ */
/* Form follows function: primary colors (red/blue/green), basic
   geometric shapes, rigid grid, 2px black rules, zero radius,
   no shadows, uppercase sans-serif display type. */
:root{
  /* surfaces — dark charcoal poster board */
  --paper:#16181D;
  --card:#1E2128;
  --panel:#262A33;
  /* ink */
  --ink:#F2F4F8;
  --ink-soft:#C8CDD6;
  --muted:#8A92A0;
  /* rules — bright 2px rule on dark ground */
  --line:#F2F4F8;
  --line-soft:#3A404C;
  /* primary-color accents — red/blue/green triad, used bold */
  --accent:#E11D2E;   /* red   */
  --accent-deep:#C41526;
  --blue:#2E7DFF;     /* blue  */
  --green:#00C853;    /* green (geometric blocks + hover bg) */
  --ink-inverse:#16181D;
  /* bauhaus forbids soft shadows and radii */
  --shadow:none;
  --shadow-lift:none;
  --radius:0;
  --font-display:'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-ui:'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:14px;
  line-height:1.45;
  min-height:100vh;
}
/* geometric field: flat primary-color shapes locked to the page edge,
   the signature bauhaus composition (circle / triangle / half-square) */
body::before{
  content:'';
  position:fixed; inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 96vw 4vh, transparent 64px, #E11D2E 65px, #E11D2E 96px, transparent 97px),
    linear-gradient(135deg, transparent 49.9%, #2E7DFF 50%, #2E7DFF 62px, transparent 63px) 0 100%/100% 180px no-repeat,
    linear-gradient(0deg, #00C853 0 46px, transparent 47px) 100% 100%/64px 100% no-repeat;
  opacity:1;
}
header, main, .modal, .toast{position:relative; z-index:1}

h1,h2,h3{font-family:var(--font-display); margin:0; text-transform:uppercase; letter-spacing:.02em}
button{font-family:var(--font-ui)}
:focus-visible{outline:3px solid var(--blue); outline-offset:2px}
.hidden{display:none !important}
::selection{background:var(--accent); color:var(--card)}

/* ============ Top bar ============ */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding:16px 28px;
  background:var(--paper);
  border-bottom:3px solid var(--ink);
  position:sticky; top:0; z-index:20;
}
.brand{display:flex; align-items:center; gap:14px}
.brand canvas{
  background:var(--card);
  border:2px solid var(--ink);
  border-radius:0;
}
.brand h1{font-size:23px; font-weight:800; letter-spacing:.02em}
.brand p{margin:1px 0 0; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.actions{display:flex; gap:10px; flex-wrap:wrap}

/* ============ Buttons ============ */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px;
  border:2px solid var(--ink);
  background:var(--card);
  color:var(--ink);
  border-radius:0;
  font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  cursor:pointer;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.btn:hover{background:var(--green); border-color:var(--ink); color:var(--ink)}
.btn:active{background:var(--accent); color:var(--card)}
.btn.primary{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.btn.primary:hover{background:var(--accent); border-color:var(--accent); color:var(--card)}
.btn.small{padding:6px 11px; font-size:11px}
.btn.full{width:100%; justify-content:center; margin-top:10px}
kbd{
  font:700 10px/1 var(--font-ui);
  border:2px solid var(--ink);
  border-radius:0;
  padding:2px 5px;
  background:var(--card);
  color:var(--ink);
}
.primary kbd{border-color:var(--paper); background:transparent; color:var(--paper)}
.link-btn{
  border:none; background:none; cursor:pointer;
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent);
  text-decoration:underline; text-underline-offset:2px;
  padding:0;
}
.link-btn:hover{color:var(--blue)}

/* ============ Layout ============ */
.layout{
  display:grid;
  grid-template-columns:296px minmax(0,1fr) 248px;
  gap:20px;
  padding:22px 28px 40px;
  max-width:1720px;
  margin:0 auto;
  align-items:start;
}
.panel{
  background:var(--card);
  border:2px solid var(--ink);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}
.controls{position:sticky; top:86px; max-height:calc(100vh - 110px); overflow-y:auto; scrollbar-width:thin}
.controls::-webkit-scrollbar{width:8px}
.controls::-webkit-scrollbar-thumb{background:var(--ink); border-radius:0}

/* ============ Control groups ============ */
.ctl-group{padding:14px 0; border-bottom:2px solid var(--ink)}
.ctl-group:first-child{padding-top:2px}
.ctl-group:last-child{border-bottom:none; padding-bottom:4px}
.ctl-group h2{
  font-size:11px; font-family:var(--font-ui); font-weight:800;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink);
  margin-bottom:12px;
  display:flex; justify-content:space-between; align-items:center;
}

/* motif picker */
.motif-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.motif-btn{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:8px 4px 6px;
  background:var(--panel);
  border:2px solid var(--ink);
  border-radius:0;
  cursor:pointer;
  transition:background .12s, border-color .12s;
}
.motif-btn:hover{background:var(--green)}
.motif-btn canvas{width:100%; max-width:44px; height:auto}
.motif-btn span{font-size:10px; font-weight:700; letter-spacing:.04em; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.motif-btn.active{border-color:var(--ink); background:var(--accent); box-shadow:inset 0 0 0 2px var(--card)}

/* layout picker */
.layout-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.layout-btn{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:8px 4px 6px;
  background:var(--panel);
  border:2px solid var(--ink);
  border-radius:0;
  cursor:pointer;
  color:var(--ink);
  transition:background .12s, border-color .12s;
}
.layout-btn:hover{background:var(--green)}
.layout-btn svg{width:100%; max-width:52px; height:32px}
.layout-btn span{font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase}
.layout-btn.active{border-color:var(--ink); background:var(--blue); color:var(--card); box-shadow:inset 0 0 0 2px var(--card)}

/* palette picker */
.palette-list{display:flex; flex-direction:column; gap:7px}
.palette-row{
  display:flex; align-items:center; gap:10px;
  width:100%;
  padding:7px 9px;
  background:var(--panel);
  border:2px solid var(--ink);
  border-radius:0;
  cursor:pointer;
  transition:background .12s, border-color .12s;
  text-align:left;
}
.palette-row:hover{background:var(--green)}
.palette-row.active{border-color:var(--ink); background:var(--green); box-shadow:inset 0 0 0 2px var(--ink)}
.pal-bg{width:26px; height:26px; border-radius:0; border:2px solid var(--ink); flex:none}
.pal-dots{display:flex; gap:4px; flex:none}
.pal-dots i{width:12px; height:12px; border-radius:0; border:2px solid var(--ink); display:block}
.pal-name{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* color inputs */
.color-inputs{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.color-field label{display:block; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin-bottom:4px}
input[type=color]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:34px;
  border:2px solid var(--ink);
  border-radius:0;
  background:var(--card);
  padding:2px;
  cursor:pointer;
}
input[type=color]::-webkit-color-swatch-wrapper{padding:2px}
input[type=color]::-webkit-color-swatch{border:none; border-radius:0}
input[type=color]::-moz-color-swatch{border:none; border-radius:0}

/* sliders */
.slider-row{margin-bottom:13px}
.slider-head{display:flex; justify-content:space-between; margin-bottom:4px}
.slider-head label{font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink)}
.slider-head .val{font-size:11px; font-weight:800; color:var(--accent-deep); font-variant-numeric:tabular-nums}
input[type=range]{width:100%; accent-color:var(--accent); cursor:pointer; height:22px}
.seed-row{display:flex; align-items:center; gap:8px; margin-top:2px}
.seed-row label{font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink)}
.seed-row input{
  width:100%; min-width:0;
  padding:6px 9px;
  border:2px solid var(--ink);
  border-radius:0;
  background:var(--card);
  font:700 12px var(--font-ui);
  color:var(--ink);
}
.seed-row input:focus{border-color:var(--blue); outline:none}

/* toggles — square Bauhaus switch */
.toggle{
  display:flex; align-items:center; justify-content:space-between;
  padding:7px 0;
  cursor:pointer;
  font-size:13px; font-weight:600; color:var(--ink);
}
.toggle input{position:absolute; opacity:0; pointer-events:none}
.switch{
  width:38px; height:22px; border-radius:0;
  background:var(--card);
  border:2px solid var(--ink);
  position:relative; flex:none;
  transition:background .15s;
}
.switch::after{
  content:'';
  position:absolute; top:2px; left:2px;
  width:14px; height:14px; border-radius:0;
  background:var(--ink);
  transition:transform .15s;
}
.toggle input:checked + .switch{background:var(--blue); border-color:var(--ink)}
.toggle input:checked + .switch::after{transform:translateX(16px); background:var(--card)}
.toggle input:focus-visible + .switch{outline:3px solid var(--blue); outline-offset:2px}

/* ============ Stage & tabs ============ */
.stage{min-width:0}
.tabs{
  display:inline-flex; gap:2px;
  background:var(--card);
  border:2px solid var(--ink);
  padding:3px;
  border-radius:0;
  margin-bottom:18px;
}
.tab{
  border:2px solid transparent; background:none;
  padding:8px 20px;
  border-radius:0;
  font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink);
  cursor:pointer;
  transition:background .15s, color .15s;
}
.tab:hover{background:var(--green)}
.tab.active{background:var(--ink); color:var(--paper); border-color:var(--ink)}

.tab-page{animation:fadeUp .25s ease}
@keyframes fadeUp{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* tile view */
#page-tile{
  display:grid;
  grid-template-columns:minmax(0,1fr) 240px;
  gap:18px;
  align-items:start;
}
.card{
  background:var(--card);
  border:2px solid var(--ink);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
}
.card h3{font-size:13px; font-weight:800; letter-spacing:.1em; margin-bottom:12px}
.tile-stage{padding:14px}
.tile-stage canvas{
  display:block; width:100%; height:auto;
  border-radius:0;
  border:2px solid var(--ink);
}
.tile-side{display:flex; flex-direction:column; gap:18px}
.tile-side canvas{display:block; width:100%; height:auto; border-radius:0; border:2px solid var(--ink)}
.tips ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
.tips li{font-size:12px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:8px}

/* product view */
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px,1fr));
  gap:18px;
}
.product-card{
  background:var(--card);
  border:2px solid var(--ink);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.product-card:hover{background:var(--green); border-color:var(--ink)}
.product-card canvas{display:block; width:100%; height:auto; border-radius:0; border:2px solid var(--ink); background:var(--paper)}
.product-foot{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:12px; gap:8px;
}
.product-foot h3{font-size:13px; font-weight:800; letter-spacing:.06em}
.open-btn{
  border:2px solid var(--ink); background:var(--card);
  border-radius:0; padding:5px 11px;
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink);
  cursor:pointer; white-space:nowrap;
  transition:background .12s, color .12s;
}
.open-btn:hover{background:var(--ink); color:var(--paper)}
.product-card:hover .open-btn{border-color:var(--ink); color:var(--ink)}

/* favorites */
.favorites{position:sticky; top:86px; max-height:calc(100vh - 110px); overflow-y:auto; scrollbar-width:thin}
.fav-title{font-size:11px; font-family:var(--font-ui); font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); margin-bottom:12px}
#favList{display:flex; flex-direction:column; gap:8px}
.fav-empty{
  border:2px dashed var(--ink);
  border-radius:0;
  padding:26px 14px;
  text-align:center;
  font-size:12px; font-weight:600;
  color:var(--muted);
  line-height:2;
}
.fav-item{
  display:flex; align-items:center; gap:11px;
  padding:8px;
  border:2px solid var(--ink);
  border-radius:0;
  background:var(--card);
  cursor:pointer;
  transition:background .12s, border-color .12s;
}
.fav-item:hover{background:var(--green); border-color:var(--ink)}
.fav-item canvas{width:56px; height:56px; border-radius:0; border:2px solid var(--ink); flex:none}
.fav-meta{min-width:0; flex:1}
.fav-name{font-size:12px; font-weight:800; letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fav-sub{font-size:11px; font-weight:600; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fav-del{
  border:2px solid var(--ink); background:var(--card); cursor:pointer;
  font-size:14px; font-weight:800; line-height:1; color:var(--ink);
  width:26px; height:26px; border-radius:0; flex:none;
  transition:background .12s, color .12s;
}
.fav-del:hover{background:var(--accent); color:var(--card)}

/* modal */
.modal{
  position:fixed; inset:0; z-index:50;
  background:rgba(17,17,17,.6);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  animation:fadeUp .18s ease;
}
.modal-card{
  background:var(--card);
  border:3px solid var(--ink);
  border-radius:0;
  box-shadow:var(--shadow-lift);
  padding:20px;
  width:min(92vw, 660px);
  max-height:92vh;
  overflow-y:auto;
}
.modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.modal-head h3{font-size:17px; font-weight:800; letter-spacing:.06em}
.modal-card canvas{display:block; width:100%; height:auto; border-radius:0; border:2px solid var(--ink)}
.modal-foot{margin-top:16px; display:flex; justify-content:flex-end}

/* toast — a flat primary-color bar */
.toast{
  position:fixed; bottom:26px; left:50%;
  transform:translate(-50%, 12px);
  background:var(--ink); color:var(--paper);
  padding:11px 20px;
  border-radius:0;
  border:2px solid var(--ink);
  font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  box-shadow:var(--shadow-lift);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  z-index:60;
}
.toast.show{opacity:1; transform:translate(-50%, 0)}

/* ============ Responsive ============ */
@media (max-width:1240px){
  .layout{grid-template-columns:280px minmax(0,1fr)}
  .favorites{grid-column:1 / -1; position:static; max-height:none}
  #favList{flex-direction:row; flex-wrap:wrap}
  .fav-item{width:220px}
}
@media (max-width:920px){
  .layout{grid-template-columns:1fr; padding:16px}
  .controls{position:static; max-height:none}
  #page-tile{grid-template-columns:1fr}
  .tile-side{flex-direction:row; flex-wrap:wrap}
  .tile-side .card{flex:1 1 200px}
  .topbar{padding:14px 16px}
}