/* ---------- Base ---------- */
:root{
  --bg: #090b10;
  --card: rgba(255,255,255,0.06);
  --stroke: rgba(255,255,255,0.14);
  --text: #e9edf2;
  --muted: #b9c0cb;

  --brand: #550fb3;   /* قريب من #b21d66 */
  --brand-2: #9213f3; /* أفتح شوية */
  --good: #52e28a;
  --bad: #ff6b6b;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;
}

*{box-sizing:border-box}
html,body{height:100%}

/* Shell: بدون سكرول افتراضيًا */
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  color:var(--text);
  background:
    radial-gradient(900px 600px at 18% -8%, #2a1620 0%, transparent 60%),
    radial-gradient(800px 600px at 100% 0%, #2c1823 0%, transparent 60%),
    var(--bg);
  display:grid;
  grid-template-rows:auto auto 1fr auto; /* topbar, hero, content, footer */
  min-height:100dvh;
  overflow:hidden;
}
@media (max-height:640px){ body{overflow-y:auto} }

/* Decorative orbs */
.orb{
  position:fixed; inset:auto; z-index:-1; filter:blur(60px); opacity:.35; pointer-events:none;
  width:320px; height:320px; border-radius:50%;
}
.orb-a{ background:linear-gradient(120deg,var(--brand), var(--brand-2)); top:-110px; left:-70px; }
.orb-b{ background:linear-gradient(120deg,#b92a6c, #ff88bb); right:-110px; bottom:-110px; }

/* ---------- Topbar (centered row) ---------- */
.topbar{
  display:flex; align-items:center; justify-content:center;
  gap:12px; padding:12px clamp(16px,3vw,32px); flex-wrap:wrap;
}
/* Hide duplicated left box (not deleting element) */
.brand{ display:none; }

/* user + actions in one line */
.userbox{display:flex; align-items:center; gap:10px}
.topbar__actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap}

/* Buttons */
.btn{
  appearance:none; border:1px solid var(--stroke); background:transparent; color:var(--text);
  padding:10px 14px; border-radius:12px; font-weight:600; letter-spacing:.2px; cursor:pointer;
  transition:.2s ease; backdrop-filter:saturate(120%) blur(6px);
}
.btn:hover{transform:translateY(-1px); border-color:#ffffff22}
.btn.primary,
.btn.action{
background: #52e28a;
color:#0e0f12; border-color:transparent;
}
.btn.ghost{border-color:transparent; background:rgba(255,255,255,.06); color:#e9d0dc}
.pulse{position:relative; overflow:hidden}
.pulse::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(280px 280px at var(--x,50%) var(--y,50%), rgba(255,255,255,.22), transparent 45%);
  opacity:0; transition:opacity .25s ease;
}
.pulse:hover::after{opacity:1}

/* ---------- Hero ---------- */
.hero{display:grid; place-items:center; text-align:center; padding:8px 16px 0}
.logo-hero{height:66px; width:auto; object-fit:contain; margin-bottom:6px}
.hero__title{margin:0; font-weight:800; letter-spacing:.2px; font-size:clamp(22px,3vw,30px)}
.hero__subtitle{margin:6px 0 0; color:var(--muted); font-size:14px}

/* ---------- Card (قريب من العناوين) ---------- */
.wrap{
  display:grid; place-items:start center;
  padding:0 16px; align-content:start;
}
.card{
  width:min(980px, 92vw);
  border-radius:var(--radius);
  background:var(--card);
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
  margin-top:10px;
}
.card--glass{backdrop-filter: blur(10px) saturate(120%);}
.card__body{display:grid; grid-template-columns:1fr auto; gap:10px; padding:16px; border-bottom:1px solid var(--stroke)}
@media (max-width:700px){
  .card__body{grid-template-columns:1fr;}
  .btn.action{width:100%}
}

/* Inputs */
.field{width:100%}
.field input{
  width:100%; padding:14px 16px; border-radius:12px;
  background:rgba(255,255,255,.07); border:1px solid var(--stroke); outline:none; color:var(--text);
  transition:.2s ease; font-size:15px;
}
.field input::placeholder{color:#cdb1bd}
.field input:focus{border-color:#de5f9966; box-shadow:0 0 0 4px #a11f5f22}

/* ---------- Progress ---------- */
.progress{padding:12px 16px 16px}
.hidden{display:none}
.progress__row + .progress__row{margin-top:12px}
.progress__label{font-weight:600; color:#ffd1e4; margin-bottom:6px; letter-spacing:.2px}
.progress__bar{position:relative; height:12px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden; border:1px solid var(--stroke)}
.bar{position:absolute; inset:0 100% 0 0; background:linear-gradient(90deg, var(--brand-2) 0%, var(--brand) 100%); box-shadow: inset 0 0 12px rgba(222,95,153,.22); border-radius:inherit; width:0%; transition:width .35s cubic-bezier(.2,.8,.2,1)}
.bar--alt{background:linear-gradient(90deg, #ff9ec9 0%, #b3326f 100%); box-shadow: inset 0 0 12px rgba(255,158,201,.22)}
.progress__meta{display:flex; gap:10px; align-items:center; margin-top:6px; color:#d7b6c6; font-size:13px}
.dot{opacity:.55}

/* ---------- Drawer (History) ---------- */
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(520px, 92vw);
  background:rgba(10,12,18,.8); backdrop-filter: blur(12px) saturate(130%);
  border-left:1px solid var(--stroke);
  transform:translateX(100%);
  opacity:0; visibility:hidden;
  transition:transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s ease, visibility .35s;
  z-index:40; box-shadow:-20px 0 40px rgba(0,0,0,.35);
}
.drawer.open{ transform:translateX(0); opacity:1; visibility:visible; }
.drawer__header{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--stroke);}
.drawer__title{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px}
.logo-sm{height:22px; width:auto; object-fit:contain; display:block; border-radius:0}
.drawer__content{padding:12px 14px 20px; height:100%; overflow:auto; animation: contentFade .5s ease both .1s;}
@keyframes contentFade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

.item{
  padding:12px 10px; margin:8px 0; border:1px solid var(--stroke); border-radius:12px;
  background:rgba(255,255,255,.04);
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.item:hover{ transform:translateY(-2px); background:rgba(255,255,255,.06); border-color:#ff86bb44 }
.item a{ color:#ffd1e4; text-decoration:none; font-weight:600 }
.item a:hover{ text-decoration:underline }

/* ---------- Footer ---------- */
.site-footer{
  display:grid; place-items:center;
  padding:12px 22px 18px;
  color:var(--muted);
}
.footer-links{display:flex; justify-content:center; align-items:center; gap:10px; font-size:13px}
.footer-links a{color:#ffd1e4; text-decoration:none}
.footer-links a:hover{text-decoration:underline}
.footer-divider{border:none; height:1px; background:var(--stroke); margin:8px auto; width:200px}
.credits{font-size:12px; text-align:center; opacity:.9}
/* === Center all middle content vertically without changing HTML === */
body{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  overflow-x:hidden;              /* زي ما هو */
  overflow-y:hidden;              /* بدون سكرول افتراضي */
}

.topbar{ flex:0 0 auto; }         /* يثبت الشريط فوق */
.site-footer{ flex:0 0 auto; }    /* يثبت الفوتر تحت */

/* الوسط: خلي الـHero يزق لتحت، والـWrap يزق لفوق — فيتقابلوا في النص */
.hero{ margin-top:auto; }
.wrap{ margin-bottom:auto; }

/* مسافات صغيرة علشان يبانوا قريبين من بعض */
.hero{ padding-top:8px; padding-bottom:6px; }
.card{ margin-top:10px; }

/* لو الشاشة قصيرة جدًا نسمح بسكرول عشان ما يتقصش حاجة */
@media (max-height: 640px){
  body{ overflow-y:auto; }
  .hero{ margin-top:24px; }
  .wrap{ margin-bottom:24px; }
}
/* Success message style */
.result.success {
  background-color: #e8f9f0;       /* أخضر فاتح */
  border: 1px solid #34c759;       /* أخضر iOS */
  color: #065f2f;                  /* أخضر غامق للنص */
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  animation: fadeIn 0.4s ease-out;
}

/* Success icon */
.result.success::before {
  content: "✅";
  font-size: 16px;
}

/* Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}