/* style.css */
:root{
  --bg:#f7f7fb;
  --card:#ffffff;
  --text:#222;
  --muted:#666;
  --primary:#0d6efd;
  --accent:#6c757d;
  --radius:14px;
}

*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  font-family:"Tajawal",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  background:var(--bg); color:var(--text);
}
h1{
  text-align:center; margin:1rem 0 1.25rem; font-size:1.6rem;
}
.logo{display:flex; justify-content:center; margin:1rem 0 0.25rem}
.logo img{height:48px; width:auto}

.platform-link{
  display:inline-block; padding:0.5rem 0.75rem; border-radius:999px;
  background:#fff; color:#222; text-decoration:none; border:1px solid #eee;
}

.container{
  max-width:1100px; margin:0.75rem auto; padding:1rem;
  background:var(--card); border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(0,0,0,.05);
}

form label{display:block; margin:.5rem 0 .25rem; color:#333; font-weight:700}
.req{color:#e11}
input,select,textarea{
  width:100%; padding:.6rem .75rem; border-radius:10px;
  border:1px solid #e6e6ef; background:#fff; color:#222; outline:none;
}
input:focus,select:focus,textarea:focus{border-color:#b9c6ff; box-shadow:0 0 0 3px rgba(13,110,253,.08)}

.grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media(max-width:900px){.grid{grid-template-columns:1fr}}

.colors{display:flex; gap:1rem}
.colors > div{flex:1}

.checkbox{display:flex; align-items:center; gap:.5rem; margin:.6rem 0}

.tips{
  margin-top:.75rem; padding:.75rem; border:1px dashed #ddd; border-radius:10px; color:#444; background:#fafafa;
}

.preview{
  margin-top:1rem; padding:1rem; border-radius:10px; background:#fcfcff; border:1px solid #eef1ff; min-height:160px;
  overflow:auto;
}

.actions{
  max-width:1100px; margin:1rem auto 1.5rem; display:flex; gap:.6rem; align-items:center; justify-content:center;
}

.copy-btn,.download-btn{
  border:0; cursor:pointer; padding:.8rem 1.2rem; border-radius:12px; font-weight:700;
}
.copy-btn{background:var(--primary); color:#fff}
.download-btn{background:#111; color:#fff}

.toast{
  min-width:160px; text-align:center; padding:.4rem .7rem; border-radius:999px; background:#e9f7ef; color:#176b3a;
  opacity:0; transition:opacity .25s ease; font-size:.95rem;
}

footer{ text-align:center; color:var(--muted); margin-bottom:1rem; }