:root{--bg:#f8fafc;--card:#fff;--muted:#6b7280;--accent:#2563eb}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial}
body{background:var(--bg);color:#111827}
.container{max-width:1100px;margin:0 auto;padding:1rem}
.header{background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,0.04);border-bottom:1px solid #eef2f7}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:0.5rem 0.9rem;border-radius:8px;border:none;cursor:pointer}
.card{background:var(--card);padding:1rem;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,0.04);border:1px solid #f0f4f8}
.tabs{display:flex;gap:0.5rem;flex-wrap:wrap;margin-top:1rem}
.tab{background:#fff;padding:0.5rem 0.8rem;border-radius:999px;box-shadow:0 1px 2px rgba(0,0,0,0.03);cursor:pointer}
.tab.active{background:#eef2ff;color:var(--accent)}
.input, select, textarea{width:100%;padding:0.6rem;border:1px solid #e6edf3;border-radius:8px}
.row{display:flex;gap:0.5rem;align-items:center}
.small{font-size:0.85rem;color:var(--muted)}
.preview-canvas{display:block;width:100%;height:auto;max-width:680px;border-radius:8px;border:1px solid #E6E9EE;background:white}
.fab{position:fixed;right:20px;bottom:24px;width:64px;height:64px;border-radius:999px;background:#10b981;color:white;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(16,185,129,0.18)}