:root{--bg:#0b0c10;--card:#121318;--muted:#c9d1d9;--accent:#7b5df9;--border:#1f2430;--r:16px}
*{box-sizing:border-box}html{direction:rtl}
body{margin:0;background:linear-gradient(180deg,#0b0c10,#11131a);color:var(--muted);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
.container{width:min(1150px,92%);margin:24px auto}
h1{margin:0 0 12px 0}
.grid{display:grid;gap:16px;grid-template-columns:1fr .9fr 1.1fr}
@media(max-width:1100px){.grid{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:14px}
.small{font-size:12px;opacity:.8}
.templates{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.item{border:1px solid #22283a;border-radius:12px;overflow:hidden;background:#0e1118}
.item img{width:100%;aspect-ratio:16/10;object-fit:cover}
.item .pad{padding:8px}
.item .row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.badge{font-size:11px;background:#1b2030;border:1px solid #2a3142;padding:2px 8px;border-radius:999px}
.btn{cursor:pointer;border:none;border-radius:10px;padding:8px 10px;background:#202636;color:#e6edf3;border:1px solid #2b3344}
.btn.primary{background:linear-gradient(135deg,#7b5df9,#5d89f9);border:0}
.form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form .full{grid-column:1/-1}
label{font-size:12px;opacity:.85}
input,textarea,select{width:100%;background:#0c0f16;border:1px solid #20283a;border-radius:10px;color:#e6edf3;padding:10px}
textarea{min-height:84px}
#previewWrap{border:1px dashed #31384a;border-radius:12px;overflow:hidden;background:#0c0f16;height:420px}
#preview{width:100%;height:100%;border:0}
.code{font-family:ui-monospace,Menlo,Consolas,monospace;background:#0d1117;border:1px solid #1f2430;border-radius:6px;padding:2px 6px}