:root{
  --bg:#07060d; --ink:#e8e6ff; --pink:#ff2e88; --cyan:#21e6ff; --line:rgba(255,255,255,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;background:var(--bg);color:var(--ink);
  font-family:Inter,system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
body{background:radial-gradient(120% 80% at 50% -10%,#1a0b2e 0%,#07060d 55%)}

.top{text-align:center;padding:22px 16px 6px}
.logo{font-family:Anton,sans-serif;font-size:clamp(34px,9vw,60px);letter-spacing:3px;color:#fff;text-shadow:0 0 22px var(--pink)}
.logo span{color:var(--cyan);text-shadow:0 0 22px var(--cyan)}
.tag{opacity:.7;font-size:13px;letter-spacing:2px;text-transform:uppercase;margin-top:2px}

.wrap{max-width:1000px;margin:0 auto;padding:14px 16px 50px;display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:start}
.panel{display:flex;flex-direction:column;gap:14px;background:rgba(20,16,30,.55);
  border:1px solid var(--line);border-radius:16px;padding:18px;backdrop-filter:blur(6px)}
.panel label{display:flex;flex-direction:column;gap:6px;font-size:12px;opacity:.85;letter-spacing:1px;text-transform:uppercase}
.panel input[type=text],.panel input:not([type=color]){background:#0c0a14;color:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-size:15px;font-family:inherit;outline:none}
.panel input[type=color]{width:100%;height:42px;background:#0c0a14;border:1px solid var(--line);border-radius:10px;padding:4px}
.row{display:flex;gap:14px;flex-wrap:wrap}
.chk{display:flex;flex-direction:row !important;align-items:center;gap:8px !important;text-transform:none !important;opacity:1 !important;font-size:14px}
.chk input{width:18px;height:18px;accent-color:var(--pink)}
.btns{display:flex;flex-direction:column;gap:10px;margin-top:4px}
button{font-family:inherit;cursor:pointer;border:none;border-radius:12px;padding:13px;font-size:15px;font-weight:700;letter-spacing:1px;transition:transform .1s,filter .15s}
button:active{transform:scale(.97)}
.ghost{background:rgba(255,255,255,.07);color:#fff;border:1px solid var(--line)}
.solid{background:linear-gradient(90deg,var(--pink),#ff7ab8);color:#0a0610;box-shadow:0 0 24px rgba(255,46,136,.5)}
.solid:hover,.ghost:hover{filter:brightness(1.08)}

.stage{display:flex;flex-direction:column;align-items:center}
#cv{width:100%;max-width:500px;aspect-ratio:600/750;border-radius:18px;border:1px solid var(--line);
  box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 40px rgba(33,230,255,.12);background:#000}
.hint{opacity:.7;font-size:12px;letter-spacing:1px;text-transform:uppercase;margin:16px 0 8px}
.templates{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:520px}
.tpl{width:96px;border:2px solid transparent;border-radius:12px;overflow:hidden;background:#0c0a14;cursor:pointer;padding:0;position:relative}
.tpl.active{border-color:var(--cyan);box-shadow:0 0 16px rgba(33,230,255,.5)}
.tpl img{width:100%;height:120px;object-fit:cover;display:block;background:#15121f}
.tpl span{position:absolute;left:0;right:0;bottom:0;font-size:11px;font-weight:700;padding:3px;text-align:center;background:rgba(0,0,0,.6)}

.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(10px);
  background:rgba(20,16,30,.9);border:1px solid var(--line);color:#fff;padding:9px 16px;border-radius:30px;font-size:13px;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:9}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:760px){ .wrap{grid-template-columns:1fr} .stage{order:-1} }