:root{
  --bg:#0b1220;
  --card:#0f1b33;
  --card2:#0c172d;
  --text:#e8eefc;
  --muted:#a7b6d6;
  --line:#1d2c4d;
  --btn:#20355f;
  --btn2:#0f254a;
  --danger:#ff6b6b;
  --ok:#2ee59d;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Kufi Arabic", "Noto Sans Arabic", sans-serif;
  background: radial-gradient(1200px 700px at 70% 0%, #14254a 0%, var(--bg) 50%);
  color:var(--text);
}
a{color:inherit}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 16px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(15,27,51,.9), rgba(15,27,51,.2));
  position:sticky; top:0; backdrop-filter: blur(10px);
  z-index:10;
}
.brand .title{font-size:22px; font-weight:800; letter-spacing:.2px}
.brand .sub{font-size:12px; color:var(--muted); margin-top:4px}
.actions{display:flex; gap:10px; align-items:center}
.container{max-width:1100px; margin:0 auto; padding:14px 12px 28px}
.card{
  background:linear-gradient(180deg, var(--card), var(--card2));
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
.controls{padding:14px}
.row{display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-bottom:12px}
@media (max-width:760px){ .row{grid-template-columns:1fr} .actions{gap:8px} .brand .title{font-size:18px}}
.field{display:flex; flex-direction:column; gap:8px}
.field span{font-size:13px; color:var(--muted)}
.field input, .field select{
  height:44px; padding:0 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#0a1430;
  color:var(--text);
  outline:none;
}
.field input:focus, .field select:focus{border-color:#2f4c86}
.hint{color:var(--muted); font-size:11px; line-height:1.3}
.btn{
  height:44px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, var(--btn), var(--btn2));
  color:var(--text);
  cursor:pointer;
  font-weight:700;
}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.6; cursor:not-allowed}
.btn-ghost{background:transparent}
.field-inline{display:flex; justify-content:flex-end}
.grid-wrap{margin-top:14px}
.status{color:var(--muted); padding:14px 6px}
.grid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
@media (max-width:980px){ .grid{grid-template-columns: repeat(2,1fr)}}
@media (max-width:620px){ .grid{grid-template-columns:1fr}}
.item{
  padding:14px;
  display:flex; flex-direction:column; gap:10px;
}
.item .head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.item .name{font-weight:900; font-size:16px}
.badge{
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid var(--line);
  color:var(--muted);
  background:rgba(0,0,0,.18);
  white-space:nowrap;
}
.badge.ok{border-color:rgba(46,229,157,.4); color:var(--ok)}
.badge.no{border-color:rgba(255,107,107,.4); color:var(--danger)}
.meta{display:grid; grid-template-columns:1fr 1fr; gap:8px; color:var(--muted); font-size:13px}
.meta b{color:var(--text)}
.item .actions{display:flex; gap:8px; flex-wrap:wrap}
.note{margin-top:14px; padding:14px}
.note-title{font-weight:900; margin-bottom:8px}
.banner{
  margin-top:14px;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(255,107,107,.35);
  background:rgba(255,107,107,.08);
}
.banner.hidden{display:none}
.banner-title{font-weight:900; margin-bottom:8px}
.banner-details{
  margin:0;
  white-space:pre-wrap;
  color:#ffd1d1;
  background:rgba(0,0,0,.2);
  border:1px solid rgba(255,255,255,.08);
  padding:10px;
  border-radius:12px;
  max-height:260px;
  overflow:auto;
}
.banner-actions{display:flex; gap:10px; margin-top:10px; flex-wrap:wrap}
.modal-back{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  padding:14px;
  z-index:30;
}
.modal-back.hidden{display:none}
.modal{max-width:720px; width:100%; padding:14px}
.modal-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px}
.modal-title{font-weight:900; font-size:18px}
.modal-sub{color:var(--muted); font-size:12px; margin-top:3px}
.modal-msg{margin-top:10px; color:var(--muted)}
.footer{padding:18px 12px; text-align:center; color:var(--muted); font-size:12px}

textarea{width:100%;resize:vertical;min-height:40px}

.img{margin-top:10px;border-radius:12px;overflow:hidden;border:1px solid var(--border);} .img img{width:100%;height:auto;display:block}