*{box-sizing:border-box}
:root{
  color-scheme:dark;
  --bg:#0f1117;
  --panel:#171a22;
  --card:#1d212b;
  --border:rgba(255,255,255,.09);
  --muted:#aeb7c9;
  --accent:#7b91ff;
}
html,body{margin:0;min-height:100%;font-family:Arial,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;background:var(--bg);color:#fff}
button,input{font:inherit}
.app{min-height:100vh;display:grid;grid-template-columns:360px 1fr}
.panel{padding:24px;background:var(--panel);border-right:1px solid var(--border);overflow:auto}
.brand h1{margin:0 0 7px;font-size:23px}
.brand p{margin:0 0 25px;color:var(--muted);font-size:13px}
.control-group{margin-bottom:22px}
.section-title{display:block;margin-bottom:10px;font-size:14px;font-weight:700}
.template-list{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.template-btn{padding:7px;border:1px solid var(--border);border-radius:13px;background:#202530;color:#fff;cursor:pointer;transition:.16s}
.template-btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.22)}
.template-btn.active{border-color:#91a3ff;box-shadow:0 0 0 2px rgba(123,145,255,.17)}
.template-btn img{width:100%;aspect-ratio:1;object-fit:contain;display:block;border-radius:9px}
.template-btn span{display:block;margin-top:6px;font-size:11px;white-space:nowrap}
input[type=text],input[type=file]{width:100%;border:1px solid var(--border);border-radius:10px;background:#202530;color:#fff;padding:10px}
.slider-row{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:9px;margin:8px 0}
.slider-row span{font-size:12px;color:#c6cddd}
.slider-row input{width:100%}
.actions{display:grid;grid-template-columns:1fr 1.15fr;gap:10px}
button{border:0;border-radius:10px;padding:12px 14px;background:#2b3140;color:#fff;font-weight:700;cursor:pointer}
button.primary{background:var(--accent)}
button:disabled{opacity:.45;cursor:wait}
.status{font-size:12px;color:var(--muted);margin:8px 0 0;min-height:16px}
.progress-bar{height:5px;border-radius:99px;background:#252b38;overflow:hidden}
.progress-bar>div{height:100%;width:0;background:#8ca0ff;transition:width .1s linear}
.preview-area{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px}
.preview-shell{padding:22px;background:var(--card);border:1px solid var(--border);border-radius:20px;box-shadow:0 18px 45px rgba(0,0,0,.28)}
#previewCanvas{
  width:min(76vw,420px);height:auto;aspect-ratio:1;display:block;border-radius:14px;
  background-color:#17191f;
  background-image:linear-gradient(45deg,#242833 25%,transparent 25%),
                   linear-gradient(-45deg,#242833 25%,transparent 25%),
                   linear-gradient(45deg,transparent 75%,#242833 75%),
                   linear-gradient(-45deg,transparent 75%,#242833 75%);
  background-size:24px 24px;
  background-position:0 0,0 12px,12px -12px,-12px 0;
}
.hint{color:var(--muted);font-size:12px;margin:13px 0 0}
@media(max-width:820px){
  .app{grid-template-columns:1fr}
  .panel{border-right:0;border-bottom:1px solid var(--border)}
  .preview-area{padding:24px}
}