:root{
  --bg:#0b1220; --card:#0f1b33; --txt:#eaf0ff; --muted:#a9b7d6;
  --pri:#3b82f6; --br:rgba(255,255,255,.10);
  --red:rgba(239,68,68,.18); --redb:rgba(239,68,68,.35);
  --ok:rgba(34,197,94,.14); --okb:rgba(34,197,94,.32);
  --warn:rgba(245,158,11,.16); --warnb:rgba(245,158,11,.30);
  --shadow: 0 12px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box;font-family:system-ui,Segoe UI,Tahoma,Arial}
body{margin:0;background:var(--bg);color:var(--txt)}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:22px}
header.top{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-bottom:1px solid var(--br);position:sticky;top:0;background:linear-gradient(180deg, rgba(11,18,32,.96), rgba(11,18,32,.88));backdrop-filter:blur(10px);z-index:5}

.brand{display:flex;gap:12px;align-items:center}
.logo{width:48px;height:48px;object-fit:contain}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;border-radius:12px;border:1px solid var(--br);
  background:rgba(255,255,255,.03); transition:.15s; cursor:pointer
}
.btn:hover{transform:translateY(-1px);border-color:rgba(59,130,246,.35)}
.btn.primary{background:var(--pri);border-color:transparent;color:#fff}
.btn.small{padding:7px 10px;border-radius:10px;font-size:13px}
.btn.ghost{opacity:.88}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;margin-top:14px}
.card{background:var(--card);border:1px solid var(--br);border-radius:16px;overflow:hidden;transition:.2s;box-shadow:0 0 0 rgba(0,0,0,0)}
.card:hover{transform:translateY(-2px);border-color:rgba(59,130,246,.35)}
.card-body{padding:14px}
.card-media{height:140px;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center}
.card-media img{width:100%;height:100%;object-fit:cover}
.placeholder{opacity:.7}

h1,h2,h3{margin:0}
.muted{color:var(--muted);margin-top:6px;line-height:1.6}

.form{
  background:var(--card);border:1px solid var(--br);border-radius:16px;
  padding:16px; margin-top:14px; box-shadow:var(--shadow)
}
.form label{display:block;margin:10px 0 6px;color:var(--muted);font-size:14px}
.form input,.form textarea,.form select{
  width:100%;padding:11px 12px;border-radius:12px;border:1px solid var(--br);
  background:rgba(255,255,255,.035);color:var(--txt);outline:none;
  transition:.15s
}
.form input:focus,.form textarea:focus,.form select:focus{
  border-color:rgba(59,130,246,.55);
  box-shadow:0 0 0 3px rgba(59,130,246,.16);
}

/* ✅ تحسين القوائم المنسدلة بشكل مريح */
.form select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(234,240,255,.9) 50%),
    linear-gradient(135deg, rgba(234,240,255,.9) 50%, transparent 50%);
  background-position:
    calc(18px) calc(50% - 2px),
    calc(12px) calc(50% - 2px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:42px; /* مكان السهم */
}

/* ✅ الأهم: نخلي الـ options كمان دارك */
select, option{
  background-color:#0e1830;
  color:var(--txt);
}
option{
  padding:12px; /* بعض المتصفحات بتتجاهلها بس مش هتضر */
}

/* ✅ لو القائمة اتفتحت في ويندوز وظهرت بيضا: ده يقللها */
select:focus option{
  background-color:#0e1830;
  color:var(--txt);
}

/* badges */
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--br);background:rgba(255,255,255,.03);font-size:13px}
.badge.ok{background:var(--ok);border-color:var(--okb)}
.badge.warn{background:var(--warn);border-color:var(--warnb)}
.badge.err{background:var(--red);border-color:var(--redb)}

.row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

.table{
  width:100%;border-collapse:separate;border-spacing:0;
  margin-top:14px;background:var(--card);border:1px solid var(--br);
  border-radius:16px;overflow:hidden;box-shadow:var(--shadow)
}
.table th,.table td{padding:12px;border-bottom:1px solid var(--br);text-align:right;vertical-align:top}
.table thead th{background:rgba(255,255,255,.03);color:rgba(234,240,255,.95);font-weight:600}
.table tr:hover td{background:rgba(255,255,255,.02)}

.alert{
  padding:10px 12px;border-radius:14px;margin-top:14px;
  border:1px solid var(--br);background:rgba(255,255,255,.04)
}
.alert.err{background:var(--red);border-color:var(--redb)}

.req{color:#ef4444}
.q{
  border:1px solid var(--br);border-radius:14px;padding:12px;margin-top:10px;
  background:rgba(255,255,255,.02)
}
.check,.radio{display:flex;gap:10px;align-items:center;margin:8px 0}
.check input,.radio input{transform:scale(1.05)}

hr.sep{border:none;border-top:1px solid var(--br);margin:14px 0}

/* Layout جديد للأدمن */
.admin-wrap{display:grid;grid-template-columns:320px 1fr;gap:14px;align-items:start}
@media (max-width: 980px){
  .admin-wrap{grid-template-columns:1fr}
}
.panel{
  background:var(--card);border:1px solid var(--br);border-radius:16px;
  padding:16px; box-shadow:var(--shadow)
}
.panel h3{margin:0 0 6px 0}
.kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width: 980px){ .kpi{grid-template-columns:1fr} }
.kpi .box{background:rgba(255,255,255,.03);border:1px solid var(--br);border-radius:14px;padding:12px}
.kpi .num{font-size:20px;font-weight:700;margin-top:6px}
/* =========================================================
   ADMIN UI UPGRADE (Cards / List / Icons / RTL)
   - Paste at the END of style.css
   ========================================================= */

/* 1) Typography / spacing */
.container { max-width: 1280px; }
h1,h2,h3{ letter-spacing:.2px }
.muted{ opacity:.9 }

/* 2) Top header polishing */
header.top{
  border-bottom:1px solid rgba(255,255,255,.08);
}
header.top .row .btn{
  background:rgba(255,255,255,.03);
}
header.top .row .btn.primary{
  background:var(--pri);
}

/* 3) Generic panels & sections */
.panel, .form, .table{
  border-radius:18px !important;
}
.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
}
.form{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
}
hr.sep{
  border-top:1px solid rgba(255,255,255,.10);
}

/* 4) Better buttons */
.btn{
  border-color:rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}
.btn:hover{
  box-shadow:0 12px 28px rgba(0,0,0,.28);
}
.btn.primary{
  box-shadow:0 12px 26px rgba(59,130,246,.22);
}

/* 5) Badge upgrades */
.badge{
  border:1px solid rgba(255,255,255,.10) !important;
  background:rgba(255,255,255,.03) !important;
  padding:7px 10px !important;
  font-weight:600;
}
.badge.ok{ background:rgba(34,197,94,.14)!important; border-color:rgba(34,197,94,.28)!important; }
.badge.warn{ background:rgba(245,158,11,.16)!important; border-color:rgba(245,158,11,.30)!important; }
.badge.err{ background:rgba(239,68,68,.16)!important; border-color:rgba(239,68,68,.30)!important; }

/* 6) ADMIN: Toolbar (search + view switch) */
.admin-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:12px;
  margin-top:14px;
}
.admin-toolbar .left, .admin-toolbar .right{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.admin-search{
  width:min(420px, 100%);
  position:relative;
}
.admin-search input{
  width:100%;
  padding-right:42px;
}
.admin-search:before{
  content:"🔎";
  position:absolute; right:14px; top:50%;
  transform:translateY(-50%);
  opacity:.85;
}

/* view toggle pills */
.view-pills{
  display:flex; gap:8px; background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px; padding:6px;
}
.view-pills button{
  border:0; background:transparent; color:var(--txt);
  padding:8px 12px; border-radius:999px; cursor:pointer;
  opacity:.85;
}
.view-pills button.active{
  background:rgba(59,130,246,.22);
  opacity:1;
}

/* 7) FORMS: cards grid + list */
.forms-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:14px;
  margin-top:14px;
}
.form-card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
  transition:.18s;
  position:relative;
}
.form-card:hover{
  transform:translateY(-2px);
  border-color:rgba(59,130,246,.35);
}
.form-card .head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  padding:14px 14px 10px;
}
.form-card .title{
  display:flex; align-items:flex-start; gap:10px;
}
.form-card .title .icon{
  width:38px; height:38px; border-radius:12px;
  display:grid; place-items:center;
  background:rgba(59,130,246,.18);
  border:1px solid rgba(59,130,246,.22);
  flex:0 0 auto;
}
.form-card .title h3{ margin:0; font-size:18px; }
.form-card .meta{ color:var(--muted); font-size:13px; margin-top:4px; line-height:1.5; }
.form-card .chips{
  display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end;
}
.form-card .body{
  padding:0 14px 12px;
}
.form-card .stats{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
.form-card .stat{
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:10px;
}
.form-card .stat .k{ color:var(--muted); font-size:12px; }
.form-card .stat .v{ font-size:18px; font-weight:800; margin-top:4px; }
.form-card .foot{
  display:flex; gap:8px; justify-content:space-between; align-items:center;
  padding:12px 14px;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.10);
}
.form-card .actions{
  display:flex; gap:8px; flex-wrap:wrap;
}
.form-card .link{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12px;
  opacity:.9;
  border:1px dashed rgba(255,255,255,.18);
  padding:6px 10px;
  border-radius:999px;
}

/* list view */
.forms-list{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.form-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:12px 14px;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}
.form-row .left{
  display:flex; align-items:center; gap:12px; min-width:0;
}
.form-row .ico{
  width:40px;height:40px;border-radius:14px;
  display:grid;place-items:center;
  background:rgba(59,130,246,.18);
  border:1px solid rgba(59,130,246,.22);
}
.form-row .txt{ min-width:0; }
.form-row .txt .name{
  font-weight:800;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.form-row .txt .sub{
  color:var(--muted); font-size:13px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.form-row .right{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end;
}
.form-row .right .actions{ display:flex; gap:8px; }

/* 8) Fallback: make existing table look better (if you still use <table>) */
.table{
  border:1px solid rgba(255,255,255,.10) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)) !important;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}
.table thead th{
  background:rgba(255,255,255,.03) !important;
}
.table td, .table th{
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}

/* 9) Questions list (inside edit page) */
.q{
  border-radius:16px !important;
  border-color:rgba(255,255,255,.10) !important;
}
.q label{ font-weight:700 }
.q:hover{ border-color:rgba(59,130,246,.30) !important; }

/* 10) Responsive */
@media (max-width: 980px){
  .form-card .stats{ grid-template-columns:1fr; }
  .form-row{ align-items:flex-start; }
}
.responses-full{ width:100%; max-width:100%; margin-top:14px; }
.responses-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; width:100%; }
@media (max-width:1200px){ .responses-grid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:900px){ .responses-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .responses-grid{ grid-template-columns:1fr;} }

.resp-card{ background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.10); border-radius:18px; box-shadow:0 12px 30px rgba(0,0,0,.22);
  overflow:hidden; display:flex; flex-direction:column; min-height:220px; }
.resp-head{ padding:12px; border-bottom:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; gap:8px; }
.resp-id,.resp-meta{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03); font-size:12px; }
.chip.ghost{ opacity:.82 }
.mono{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }

.resp-body{ padding:12px; display:flex; flex-direction:column; gap:10px; }
.resp-qa{ border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); border-radius:14px; padding:10px; }
.resp-qa .k{ color:var(--muted); font-size:12px; margin-bottom:6px; line-height:1.4; }
.resp-qa .v{ font-weight:650; line-height:1.6; word-break:break-word; }

.resp-foot{ margin-top:auto; padding:12px; border-top:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.10); display:flex; justify-content:space-between; align-items:center; gap:10px; }

.qa{ border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.02); border-radius:14px; padding:10px; margin:8px 0; }
.qa .q{ font-weight:800; margin:0 0 6px 0; }
.qa .a{ line-height:1.6; }

/* Modal */
.media-modal{ position:fixed; inset:0; display:none; z-index:9999; }
.media-modal.open{ display:block; }
.media-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(6px); }
.media-sheet{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(1100px, 94vw); max-height:86vh;
  background:linear-gradient(180deg, rgba(15,27,51,.96), rgba(11,18,32,.96));
  border:1px solid rgba(255,255,255,.10); border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.50);
  overflow:hidden; display:flex; flex-direction:column;
}
.media-top{ padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.media-title{ font-weight:900; font-size:16px; }
.media-grid{ padding:14px; overflow:auto; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
@media (max-width:900px){ .media-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .media-grid{ grid-template-columns:1fr;} }
.media-item{ border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.02); border-radius:16px; overflow:hidden; }
.media-item img, .media-item video{ width:100%; height:260px; object-fit:cover; display:block; background:#000; }
.media-cap{ padding:10px; color:var(--muted); font-size:12px; word-break:break-word; }
/* =========================================================
   RESPONSES PRO UI (No Sensitive Data)
   - Wide table + horizontal scroll
   - Media icon only (left)
   - Truncation + accordion details
   - Cards improved + modal loader
   ========================================================= */

.table-shell{
  width:100%;
  overflow-x:auto;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  box-shadow:0 12px 30px rgba(0,0,0,.25);
  margin-top:14px;
}
.table-wide{
  min-width:1200px; /* يخلي الجدول أعرض من الشاشة */
  width:100%;
}
.table-wide .qcol{
  min-width:240px;
}
.qcell{
  max-width:280px;
}
.cell-text{
  display:block;
  max-width:280px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.col-media{ width:110px; text-align:center; }
.col-expand{ width:90px; text-align:center; }
.col-num{ width:140px; }

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:var(--txt);
  cursor:pointer;
  transition:.15s;
}
.icon-btn:hover{
  border-color:rgba(59,130,246,.35);
  transform:translateY(-1px);
}

.pill{
  display:inline-flex;
  min-width:22px; height:22px;
  align-items:center; justify-content:center;
  padding:0 7px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(59,130,246,.18);
  font-size:12px;
  font-weight:800;
}

.reg-pill{
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  font-weight:800;
}

/* Accordion details */
.row-detail td{ padding:0 !important; }
.detail-box{
  padding:14px;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.14);
}
.detail-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:12px;
}
.detail-title{
  font-weight:900;
}
.detail-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}
@media (max-width: 900px){
  .detail-grid{ grid-template-columns:1fr; }
}
.detail-item{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
  border-radius:16px;
  padding:12px;
}
.detail-item .k{
  color:var(--muted);
  font-size:12px;
  margin-bottom:6px;
}
.detail-item .v{
  line-height:1.7;
  word-break:break-word;
}

/* Cards view */
.responses-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:14px;
  width:100%;
  margin-top:14px;
}
@media (max-width:1200px){ .responses-grid{ grid-template-columns:repeat(3,1fr);} }
@media (max-width:900px){ .responses-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .responses-grid{ grid-template-columns:1fr;} }

.resp-card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  box-shadow:0 12px 30px rgba(0,0,0,.22);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.resp-head{
  padding:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.resp-id{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.resp-body{
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.resp-qa{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  border-radius:16px;
  padding:10px;
}
.resp-qa .k{
  color:var(--muted);
  font-size:12px;
  margin-bottom:6px;
}
.resp-qa .v{
  line-height:1.7;
  word-break:break-word;
}
.resp-foot{
  margin-top:auto;
  padding:12px;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.10);
}

/* Modal + loader */
.media-modal{ position:fixed; inset:0; display:none; z-index:9999; }
.media-modal.open{ display:block; }
.media-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(6px); }
.media-sheet{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(1100px, 94vw); max-height:86vh;
  background:linear-gradient(180deg, rgba(15,27,51,.96), rgba(11,18,32,.96));
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.50);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.media-top{
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.media-title{ font-weight:900; font-size:16px; }

.media-grid{
  padding:14px;
  overflow:auto;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
}
@media (max-width:900px){ .media-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .media-grid{ grid-template-columns:1fr;} }

.media-item{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
  border-radius:16px;
  overflow:hidden;
  position:relative;
  min-height:260px;
}
.media-item img, .media-item video{
  width:100%;
  height:260px;
  object-fit:cover;
  display:block;
  background:#000;
}

.loader{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  gap:10px;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(2px);
}
.spin{
  width:44px; height:44px;
  border-radius:999px;
  border:4px solid rgba(255,255,255,.18);
  border-top-color:rgba(59,130,246,.95);
  animation: sp 1s linear infinite;
}
@keyframes sp { to { transform: rotate(360deg); } }