:root{--bg:#0e0f13;--card:#171923;--muted:#9aa3b2;--text:#eef2ff;--brand:#7c3aed}
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,Segoe UI,Roboto}
.container{max-width:1100px;margin:0 auto;padding:20px}
.topbar{background:#10121a;border-bottom:1px solid #23263a}
.topbar .brand{color:#fff;text-decoration:none;font-weight:700}
.topbar nav a{color:#cbd5e1;margin-left:16px;text-decoration:none}
.hero{padding:40px 0}
.btn{display:inline-block;background:var(--brand);color:#fff;padding:10px 16px;border-radius:12px;text-decoration:none;border:0}
.btn.ghost{background:transparent;border:1px solid #3b3f53}
.grid{display:grid;gap:16px}
.grid.weavers{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.card{background:var(--card);border:1px solid #202336;border-radius:16px;overflow:hidden;padding:12px}
.card img{width:100%;height:160px;object-fit:cover;border-radius:12px}
.form{display:grid;gap:12px}
.form.grid2{grid-template-columns:repeat(2,1fr)} .form.grid2 .full{grid-column:1/-1}
input,select,textarea{width:100%;padding:10px;border-radius:12px;border:1px solid #2a2e44;background:#0f1220;color:#e2e8f0}
label{display:grid;gap:6px}
.error{color:#ff8e8e}
.muted{color:#9aa3b2}
.design{width:100%;max-width:520px;border-radius:16px;border:1px solid #2a2e44}
.footer{border-top:1px solid #23263a;padding:20px 0;color:#a8b0bf}