/* Оболочка мастерской. Стили самого баннера живут в engine.js —
   здесь только интерфейс. Тёмная неоновая гамма под макет. */

:root{
  --bg:#0d0620;
  --bg2:#150a2e;
  --line:rgba(255,255,255,.10);
  --txt:#f2ecff;
  --dim:#a293c4;
  --neon:#ff2d9e;
  --ice:#7fe6ff;
  --ok:#3ddc84;
  --pad:14px;
  --safe-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{
  background:var(--bg);color:var(--txt);
  font:15px/1.4 Montserrat,-apple-system,system-ui,sans-serif;
  display:flex;flex-direction:column;
}
button,input,select{font:inherit;color:inherit;background:none;border:0;outline:0}
/* id-правила ниже перебивают display:none браузера, поэтому говорим явно */
[hidden]{display:none!important}
button{cursor:pointer}

/* ---------- заставка и отказ ---------- */
#boot,#denied{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;background:var(--bg);text-align:center;padding:32px}
.spark{width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle,var(--neon),transparent 70%);
  animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(.75);opacity:.55}50%{transform:scale(1.15);opacity:1}}
.boot-t{letter-spacing:.22em;text-transform:uppercase;font-size:13px;color:var(--dim)}
.boot-s{font-size:12px;color:var(--dim);opacity:.6;min-height:1em}
#denied .lock{font-size:52px}
#denied h2{font-size:20px;font-weight:800}
#denied p{color:var(--dim);max-width:340px;line-height:1.5}

/* ---------- шапка ---------- */
#app{flex:1;display:flex;flex-direction:column;min-height:0}
#topbar{display:flex;align-items:center;gap:6px;padding:8px var(--pad);
  border-bottom:1px solid var(--line);flex:none}
#name{flex:1;min-width:0;font-weight:700;font-size:15px;padding:6px 8px;border-radius:8px}
#name:focus{background:rgba(255,255,255,.07)}
.ico{width:38px;height:38px;border-radius:10px;font-size:17px;color:var(--dim);flex:none}
.ico:active{background:rgba(255,255,255,.09)}
.ico[disabled]{opacity:.25}

/* ---------- сцена ---------- */
#stagewrap{position:relative;flex:1;min-height:0;display:flex;align-items:center;
  justify-content:center;overflow:hidden;
  background:repeating-conic-gradient(#120829 0% 25%,#0d0620 0% 50%) 50%/22px 22px}
#stagepad{position:relative}
#stage{transform-origin:top left;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.hint{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:11px;
  color:var(--dim);opacity:.75;pointer-events:none;padding:0 12px}

#sel{position:absolute;top:8px;left:50%;transform:translateX(-50%);display:flex;gap:6px;
  background:rgba(13,6,32,.92);border:1px solid var(--line);border-radius:12px;padding:5px}
#sel button{font-size:12px;padding:7px 11px;border-radius:8px;color:var(--txt)}
#sel button:active{background:rgba(255,255,255,.1)}

/* ---------- вкладки ---------- */
#tabs{display:flex;flex:none;border-top:1px solid var(--line);background:var(--bg2)}
#tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:9px 2px;color:var(--dim);font-size:10px;letter-spacing:.03em}
#tabs button i{font-style:normal;font-size:17px;line-height:1}
#tabs button.on{color:var(--neon)}
#tabs button.on i{filter:drop-shadow(0 0 8px var(--neon))}

/* ---------- панель ---------- */
#panel{flex:none;height:38vh;min-height:210px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:12px var(--pad) calc(18px + var(--safe-b));background:var(--bg2);
  border-top:1px solid var(--line)}

.grp{margin-bottom:16px}
.grp>h3{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
  margin-bottom:9px}

/* ползунок */
.row{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.row>label{flex:none;width:104px;font-size:12px;color:var(--dim)}
.row .val{flex:none;width:44px;text-align:right;font-size:12px;
  font-variant-numeric:tabular-nums;color:var(--ice)}
input[type=range]{flex:1;-webkit-appearance:none;height:26px;background:none}
input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--neon) var(--p,50%),rgba(255,255,255,.16) var(--p,50%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;
  margin-top:-9.5px;border-radius:50%;background:#fff;box-shadow:0 0 10px var(--neon)}

/* поле ввода */
.fld{margin-bottom:10px}
.fld label{display:block;font-size:11px;color:var(--dim);margin-bottom:4px;letter-spacing:.05em}
.fld input,.fld textarea{width:100%;padding:10px 12px;border-radius:10px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);font-size:14px}
.fld input:focus,.fld textarea:focus{border-color:var(--neon)}

/* переключатель */
.tgl{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--line)}
.tgl:last-child{border-bottom:0}
.tgl span{font-size:13px}
.sw{width:46px;height:27px;border-radius:14px;background:rgba(255,255,255,.16);
  position:relative;flex:none;transition:background .16s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:#fff;transition:transform .16s}
.sw.on{background:var(--neon)}
.sw.on::after{transform:translateX(19px)}

/* кнопки */
.btn{display:block;width:100%;padding:13px;border-radius:12px;font-weight:700;font-size:14px;
  background:rgba(255,255,255,.08);margin-bottom:9px;text-align:center}
.btn:active{transform:scale(.985)}
.btn.hot{background:linear-gradient(135deg,var(--neon),#a24bff);
  box-shadow:0 6px 22px rgba(255,45,158,.42)}
.btn.gh{border:1px solid var(--line);background:none;color:var(--dim);font-weight:600}
.btn[disabled]{opacity:.45;pointer-events:none}

/* плитки шаблонов */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:9px}
.tile{border:1px solid var(--line);border-radius:13px;padding:12px;text-align:left;
  background:rgba(255,255,255,.04)}
.tile.on{border-color:var(--neon);background:rgba(255,45,158,.13)}
.tile b{display:block;font-size:14px;margin-bottom:3px}
.tile small{display:block;color:var(--dim);font-size:11px;line-height:1.35}

/* галерея фотографий */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px}
.gal figure{position:relative;aspect-ratio:1;border-radius:9px;overflow:hidden;
  border:2px solid transparent}
.gal figure.off{opacity:.28}
.gal figure.on{border-color:var(--neon)}
.gal img{width:100%;height:100%;object-fit:cover;display:block}

.note{font-size:11px;color:var(--dim);line-height:1.5;margin-top:8px}
.note b{color:var(--ice);font-weight:600}

#toast{position:fixed;left:50%;bottom:calc(20px + var(--safe-b));transform:translateX(-50%);
  z-index:400;background:rgba(20,10,44,.97);border:1px solid var(--line);
  padding:11px 18px;border-radius:12px;font-size:13px;max-width:88vw;text-align:center;
  box-shadow:0 8px 30px rgba(0,0,0,.5)}