:root{--primary:#4f46e5;--dark:#0f172a}*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f5f7fb;color:#111827}.nav{background:var(--dark);color:white;padding:16px 24px;display:flex;justify-content:space-between;align-items:center}.nav a{color:white;text-decoration:none;margin:0 8px}.container{max-width:1150px;margin:auto;padding:24px}.hero{background:linear-gradient(135deg,#111827,#4f46e5);color:white;border-radius:28px;padding:70px 30px;text-align:center}.hero h1{font-size:54px;margin:0 0 12px}.btn{display:inline-block;background:var(--primary);color:white;text-decoration:none;border:0;border-radius:12px;padding:12px 18px;margin:4px;cursor:pointer}.btn.light{background:#e5e7eb;color:#111}.btn.danger{background:#dc2626}.card{background:white;border-radius:18px;padding:20px;margin-bottom:18px;box-shadow:0 10px 30px #0000000d}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}.input{width:100%;padding:13px;border:1px solid #d1d5db;border-radius:12px;margin:7px 0}.muted{color:#6b7280}.qr{width:180px;border:1px solid #e5e7eb;border-radius:14px;padding:8px;background:white}.preview{aspect-ratio:9/16;background:linear-gradient(180deg,#333,#999);border-radius:18px;position:relative;overflow:hidden;color:white;text-align:center}.frameBox{position:absolute;left:6%;right:6%;bottom:7%;border:4px solid var(--accent,#f59e0b);border-radius:22px;background:#0007;padding:18px}