:root{
  --bg:#0b1021; --muted:#9aa4c4; --text:#eaf0ff;
  --accent:#7aa2ff; --accent2:#7affb2; --danger:#ff7a7a; --radius:16px;
}
*{ box-sizing:border-box; font-family:"Cairo",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
body{
  margin:0;
  background:radial-gradient(1200px 700px at 70% 0%, #1a2a66 0%, var(--bg) 55%, #070a15 100%);
  color:var(--text);
  min-height:100vh;
  padding:24px;
}
.toplinks{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.toplinks a{ color:var(--text); text-decoration:none; font-size:13px; border:1px solid rgba(255,255,255,.14); padding:8px 10px; border-radius:10px; }
.wrap{
  width:min(1240px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:18px;
}
@media (max-width:980px){ .wrap{ grid-template-columns:1fr; } }
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  box-shadow:0 10px 40px rgba(0,0,0,.35);
  overflow:hidden;
}
.hd{ padding:18px; border-bottom:1px solid rgba(255,255,255,.08); }
.title{ margin:0; font-size:20px; font-weight:900; }
.body{ padding:18px; display:flex; flex-direction:column; gap:12px; }
label{ display:block; margin-bottom:6px; color:var(--muted); font-size:13px; }
input, textarea, select{
  width:100%; background:rgba(5,10,30,.6); color:var(--text);
  border:1px solid rgba(255,255,255,.12); border-radius:14px;
  padding:12px; outline:none; font-size:14px;
}
textarea{ min-height:140px; resize:vertical; line-height:1.8; white-space:pre-wrap; }
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media (max-width:520px){ .gallery{ grid-template-columns:repeat(2,1fr); } }
.thumb{
  position:relative; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18); cursor:pointer; aspect-ratio:9/16;
}
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumb.selected{ border-color:rgba(122,255,178,.70); box-shadow:0 0 0 3px rgba(122,255,178,.16); }
.thumb .label{
  position:absolute; right:10px; top:10px; font-size:12px; font-weight:900; padding:4px 10px;
  border-radius:999px; border:1px solid rgba(255,255,255,.16); background:rgba(0,0,0,.24);
}
.pills{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{
  cursor:pointer; user-select:none; padding:7px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18); color:rgba(255,255,255,.92); font-size:13px;
}
.actions{ display:flex; gap:10px; flex-wrap:wrap; }
button{
  cursor:pointer; border:none; border-radius:14px; padding:12px 14px; font-weight:800; font-size:14px;
  color:#081024; background:var(--accent);
}
button.ghost{ background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.16); }
.preview{ padding:18px; display:flex; flex-direction:column; gap:12px; }
.canvas-wrap{
  border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.18);
}
canvas{ width:100%; height:auto; display:block; }
.status{ color:var(--muted); font-size:13px; }