*{box-sizing:border-box}
:root{--bg:#0f1115;--panel:#151922;--line:rgba(255,255,255,.08);--text:#edf1f7;--muted:#a9b5cb;--accent:#d11522;--accent2:#ff7a18;--success:#1faa69;--shadow:0 18px 55px rgba(0,0,0,.35);--radius:22px}
html,body{margin:0;background:radial-gradient(circle at top right, rgba(209,21,34,.12), transparent 22%),radial-gradient(circle at top left, rgba(255,122,24,.10), transparent 20%),var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}
.app{max-width:1360px;margin:0 auto;padding:18px}
.topbar{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 16px;margin-bottom:18px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}
.topbar h1{margin:0;font-size:22px}.topbar p{margin:4px 0 0;color:var(--muted);font-size:13px}
.admin-link{display:inline-block;padding:10px 14px;border-radius:12px;text-decoration:none;color:#fff;background:#232a39}
.layout{display:grid;grid-template-columns:360px minmax(0,1fr);gap:18px}
.panel{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.panel-header{padding:16px 18px 10px;border-bottom:1px solid rgba(255,255,255,.05)}
.panel-header h2{margin:0;font-size:17px}.panel-header p{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.45}
.panel-body{padding:16px 18px 18px}.field{margin-bottom:14px}
label{display:block;margin-bottom:7px;font-size:13px;font-weight:700}
input[type=text],input[type=password],textarea{width:100%;padding:12px 13px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:#10151f;color:#fff}
input[type=range]{width:100%;accent-color:var(--accent)}
.btn,.file-btn{appearance:none;border:0;border-radius:14px;padding:12px 14px;font-weight:700;font-size:14px;cursor:pointer;color:#fff;background:linear-gradient(135deg,var(--accent),#9f0e18);box-shadow:0 10px 24px rgba(209,21,34,.24);text-align:center;display:inline-block;text-decoration:none;width:100%}
.btn.secondary,.file-btn.secondary{background:#232a39;box-shadow:none}
.btn.success{background:linear-gradient(135deg,#18a463,#12794a);box-shadow:0 10px 24px rgba(24,164,99,.24)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.hidden-input{display:none}
.progress{width:100%;height:10px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;margin-top:8px}
.progress>span{display:block;width:0%;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .2s ease}
.status{margin-top:8px;color:var(--muted);font-size:12px;line-height:1.5;white-space:pre-wrap}.status.good{color:#8ce6ba}.status.bad{color:#ff9ea5}
.template-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.template-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:8px;cursor:pointer}
.template-card.active{outline:2px solid rgba(209,21,34,.8);background:rgba(209,21,34,.09)}
.template-preview{width:100%;aspect-ratio:4/5;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.06);background:#111;margin-bottom:8px}
.template-preview img{width:100%;height:100%;object-fit:cover;display:block}.template-title{font-size:12px;text-align:center;font-weight:700}
.section-title{margin:18px 0 10px;font-size:13px;font-weight:800;text-transform:uppercase;color:#d8e0f0}
.preview-shell{padding:18px;display:flex;justify-content:center;align-items:center}
.preview-stage{width:min(100%,620px);aspect-ratio:4/5;background:#0c1016;border-radius:18px;border:1px solid rgba(255,255,255,.07);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35)}
#previewCanvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab;background:#dfe6f2}#previewCanvas.dragging{cursor:grabbing}
.footer-text{margin-top:20px;text-align:center;color:#aaa;font-size:12px;padding:10px 0}
@media (max-width:900px){.layout{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}.topbar{flex-direction:column;align-items:flex-start}}