/* ============================================================
   Passport Manager — PRO SKIN v1.0
   طبقة تصميم احترافية فقط. لا تغيّر أي منطق أو وظيفة أو API.
   تُحمَّل بعد التصميم الأصلي فتُعيد تعريف المظهر فقط.
   ============================================================ */

/* ---------- 1) لوحة ألوان مصقولة ---------- */
:root{
  --bg-deep:        #070912;
  --bg-surface:     #0B0F1A;
  --bg-elevated:    #111726;
  --bg-hover:       #171F31;
  --bg-input:       #0E1421;

  --accent-gold:    #E0BC55;
  --gold-soft:      #C9A84C;
  --gold-dim:       rgba(224,188,85,.10);
  --gold-glow:      rgba(224,188,85,.22);

  --accent-blue:    #4C8DFF;
  --blue-soft:      #7BAAFF;
  --blue-dim:       rgba(76,141,255,.10);

  --accent-teal:    #1FBF9E;
  --teal-dim:       rgba(31,191,158,.10);

  --accent-red:     #F05252;
  --red-dim:        rgba(240,82,82,.10);

  --accent-green:   #17C964;
  --green-dim:      rgba(23,201,100,.10);

  --text-primary:   #EDF1F7;
  --text-secondary: #9AA7BC;
  --text-muted:     #6B7A90;
  --text-disabled:  #46536A;

  --border-subtle:  rgba(154,167,188,.07);
  --border-medium:  rgba(154,167,188,.13);
  --border-strong:  rgba(154,167,188,.22);

  --radius-sm: 9px;
  --radius-md: 13px;
  --radius-lg: 18px;
  --radius-xl: 26px;

  --shadow-sm:  0 1px 2px rgba(0,0,0,.5);
  --shadow-md:  0 6px 20px rgba(0,0,0,.45), 0 0 0 1px var(--border-subtle);
  --shadow-lg:  0 18px 48px rgba(0,0,0,.55), 0 0 0 1px var(--border-subtle);
  --shadow-gold:0 0 24px rgba(224,188,85,.13);
}

/* ---------- 2) الخلفية والطباعة ---------- */
body{
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(76,141,255,.075), transparent 62%),
    radial-gradient(1200px 720px at 88% -12%, rgba(224,188,85,.030), transparent 66%),
    radial-gradient(800px 700px at 50% 108%, rgba(31,191,158,.045), transparent 60%),
    var(--bg-deep) !important;
  color: var(--text-primary);
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
}
body::before{ opacity: .45; }
body::after { opacity: .3; }

/* ---------- 3) الهيدر: زجاجي ثابت بحدّ سفلي رفيع ---------- */
.header{
  position: sticky; top: 0; z-index: 60;
  background: linear-gradient(180deg, rgba(11,15,26,.94), rgba(11,15,26,.78)) !important;
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-bottom: 1px solid var(--border-medium) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 12px 34px rgba(0,0,0,.42);
  padding: 12px 26px !important;
  min-height: 66px;
}

/* الشعار */
.logo-mark{
  background: linear-gradient(145deg, rgba(224,188,85,.20), rgba(224,188,85,.04)) !important;
  border: 1px solid rgba(224,188,85,.42) !important;
  box-shadow: 0 0 0 4px rgba(224,188,85,.055), 0 8px 22px rgba(0,0,0,.45);
  border-radius: 12px !important;
}
.logo-name{
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 17.5px !important;
  letter-spacing: .015em;
  color: #F6F8FB;
}
.logo-sub{
  font-size: 9.5px !important;
  letter-spacing: .26em !important;
  color: var(--accent-gold) !important;
  opacity: .82;
  font-weight: 600;
}

/* أزرار التنقل */
.hnav-btn{
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  padding: 9px 14px !important;
  transition: all .18s cubic-bezier(.4,0,.2,1);
  background: transparent !important;
}
.hnav-btn:hover{
  color: var(--text-primary) !important;
  background: rgba(154,167,188,.07) !important;
  border-color: var(--border-subtle) !important;
  transform: translateY(-1px);
}
.hnav-btn.active{
  color: #12161F !important;
  background: linear-gradient(180deg, #F0CE6E, #D9B44E) !important;
  border-color: rgba(224,188,85,.9) !important;
  box-shadow: 0 6px 18px rgba(224,188,85,.26), 0 1px 0 rgba(255,255,255,.28) inset;
  font-weight: 700 !important;
}
.hnav-btn.active svg{ stroke: #12161F !important; }

/* مؤشر LIVE */
.live-txt{ letter-spacing: .2em !important; font-weight: 700 !important; font-size: 10px !important; }

/* ---------- 4) الصفحات والمساحة ---------- */
.app{ max-width: 1480px; margin: 0 auto; padding: 0 22px 64px; }
.page{ padding-top: 30px !important; }
.page.active{ animation: proRise .38s cubic-bezier(.22,1,.36,1); }
@keyframes proRise{ from{opacity:0; transform:translateY(7px)} to{opacity:1;transform:none} }

/* ---------- 5) العناوين ---------- */
.section-title{
  font-size: 12px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  font-weight: 700 !important;
  display: flex; align-items: center; gap: 12px;
}
.section-title::after{
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--border-medium), transparent);
}

/* ---------- 6) بطاقات الإحصاء ---------- */
.stats-row{ gap: 16px !important; }
.stat-card{
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, rgba(23,31,49,.92), rgba(11,15,26,.92)) !important;
  border: 1px solid var(--border-medium) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md);
  padding: 20px 22px !important;
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s, border-color .22s;
  overflow: hidden;
}
.stat-card:hover{
  transform: translateY(-3px);
  border-color: rgba(224,188,85,.30) !important;
  box-shadow: 0 22px 46px rgba(0,0,0,.52), 0 0 0 1px rgba(224,188,85,.14);
}
.stat-card::before{
  content:''; position:absolute; inset:0 0 auto 0; height:2px;
  background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
  opacity: .75;
}
.stat-val{
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: #F7F9FC !important;
  line-height: 1.1;
}
.stat-lbl{
  font-size: 11px !important;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  font-weight: 600;
  margin-top: 6px;
}
.stat-icon{
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(224,188,85,.09);
  border: 1px solid rgba(224,188,85,.22);
  color: var(--accent-gold);
}

/* ---------- 7) البطاقات ---------- */
.card{
  background: linear-gradient(170deg, rgba(17,23,38,.96), rgba(10,14,24,.96)) !important;
  border: 1px solid var(--border-medium) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.card-head{
  padding: 17px 22px !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  background: rgba(255,255,255,.012);
}
.card-head-title{
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .05em;
  color: var(--text-primary) !important;
}
.card-body{ padding: 22px !important; }

/* ---------- 8) الأزرار ---------- */
.btn{
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  letter-spacing: .015em;
  padding: 10px 17px !important;
  border: 1px solid var(--border-medium) !important;
  background: rgba(154,167,188,.06) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
  transition: all .17s cubic-bezier(.4,0,.2,1);
}
.btn:hover{
  background: rgba(154,167,188,.12) !important;
  border-color: var(--border-strong) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
.btn:active{ transform: translateY(0) scale(.985); }

.btn.gold, .btn.primary{
  background: linear-gradient(180deg, #F0CE6E, #D6B04B) !important;
  color: #10141C !important;
  border-color: rgba(224,188,85,.85) !important;
  box-shadow: 0 8px 22px rgba(224,188,85,.22), 0 1px 0 rgba(255,255,255,.3) inset;
}
.btn.gold:hover, .btn.primary:hover{ filter: brightness(1.06); }

.btn.teal{
  background: rgba(31,191,158,.12) !important;
  color: #4FE3C0 !important;
  border-color: rgba(31,191,158,.34) !important;
}
.btn.teal:hover{ background: rgba(31,191,158,.20) !important; }

.btn.red{
  background: rgba(240,82,82,.10) !important;
  color: #FF8585 !important;
  border-color: rgba(240,82,82,.30) !important;
}
.btn.red:hover{ background: rgba(240,82,82,.18) !important; }

.btn.ghost{ background: transparent !important; border-color: var(--border-subtle) !important; }

.btn.xs{ padding: 5px 9px !important; font-size: 11px !important; border-radius: 8px !important; }
.btn.sm{ padding: 7px 12px !important; font-size: 11.5px !important; border-radius: 9px !important; }

/* ---------- 9) الحقول ---------- */
input[type=text], input[type=date], input[type=number], input[type=password],
input[type=email], input[type=tel], select, textarea{
  background: var(--bg-input) !important;
  border: 1px solid var(--border-medium) !important;
  border-radius: 10px !important;
  color: var(--text-primary) !important;
  padding: 11px 13px !important;
  font-size: 13px !important;
  font-family: inherit;
  transition: border-color .16s, box-shadow .16s, background .16s;
}
input:focus, select:focus, textarea:focus{
  outline: none !important;
  border-color: rgba(224,188,85,.55) !important;
  box-shadow: 0 0 0 3px rgba(224,188,85,.11) !important;
  background: #0F1624 !important;
}
input::placeholder{ color: var(--text-disabled) !important; }
.form-field label, .form-field label span{
  font-size: 11px !important;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  font-weight: 600;
}

/* ---------- 10) الجداول ---------- */
.table-wrap{
  border: 1px solid var(--border-medium) !important;
  border-radius: var(--radius-md) !important;
  background: rgba(8,11,19,.55);
  overflow: auto;
}
table{ border-collapse: separate !important; border-spacing: 0 !important; width: 100%; }
thead th{
  background: #0F1626 !important;
  color: var(--text-muted) !important;
  font-size: 10.5px !important;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 700 !important;
  padding: 13px 15px !important;
  border-bottom: 1px solid var(--border-medium) !important;
  white-space: nowrap;
}
tbody td{
  padding: 12px 15px !important;
  font-size: 13px !important;
  border-bottom: 1px solid rgba(154,167,188,.05) !important;
  color: var(--text-secondary);
  vertical-align: middle;
}
tbody tr{ transition: background .14s; }
tbody tr:hover td{ background: rgba(224,188,85,.035); }
tbody tr:last-child td{ border-bottom: none !important; }

/* ---------- 11) الشارات ---------- */
.badge{
  border-radius: 7px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .05em;
  padding: 4px 9px !important;
  border: 1px solid transparent;
  display: inline-flex; align-items: center;
}
.badge-gold{ background: rgba(224,188,85,.13) !important; color: #EFD48B !important; border-color: rgba(224,188,85,.30) !important; }
.badge-teal{ background: rgba(31,191,158,.12) !important; color: #55E5C3 !important; border-color: rgba(31,191,158,.30) !important; }
.badge-red { background: rgba(240,82,82,.12) !important; color: #FF8F8F !important; border-color: rgba(240,82,82,.30) !important; }
.badge-blue{ background: rgba(76,141,255,.12) !important; color: #8FBAFF !important; border-color: rgba(76,141,255,.30) !important; }

/* ---------- 12) قوائم المدن والوكلاء ---------- */
.city-list-row{
  background: linear-gradient(165deg, rgba(23,31,49,.85), rgba(11,15,26,.85)) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  padding: 15px 18px !important;
  transition: all .18s cubic-bezier(.4,0,.2,1);
}
.city-list-row:hover{
  border-color: rgba(224,188,85,.28) !important;
  transform: translateX(3px);
  box-shadow: 0 10px 26px rgba(0,0,0,.38);
}
.city-icon{
  border-radius: 11px !important;
  background: rgba(224,188,85,.10) !important;
  border: 1px solid rgba(224,188,85,.26) !important;
  color: var(--accent-gold) !important;
  font-weight: 700;
}
.city-name{ font-size: 14px !important; font-weight: 600 !important; color: var(--text-primary) !important; letter-spacing: -.01em; }
.city-meta{ font-size: 11.5px !important; color: var(--text-muted) !important; }

/* ---------- 13) تبويبات الفلترة ---------- */
.filter-tabs{ gap: 9px !important; }
.ftab{
  border-radius: 9px !important;
  border: 1px solid var(--border-subtle) !important;
  background: rgba(154,167,188,.045) !important;
  color: var(--text-secondary) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  padding: 8px 15px !important;
  transition: all .16s;
}
.ftab:hover{ border-color: var(--border-strong) !important; color: var(--text-primary) !important; }
.ftab.active{
  background: rgba(224,188,85,.14) !important;
  border-color: rgba(224,188,85,.45) !important;
  color: #F2D992 !important;
  box-shadow: 0 0 0 3px rgba(224,188,85,.07);
}

/* ---------- 14) الحالات الفارغة ---------- */
.empty-state{
  padding: 56px 24px !important;
  color: var(--text-muted) !important;
  font-size: 13px;
}
.empty-state svg{ opacity: .32; margin-bottom: 12px; }

/* ---------- 15) النوافذ (Modals) ---------- */
.modal-overlay, [id$="-overlay"]{
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  background: rgba(4,6,12,.74) !important;
}
.modal, .modal-box, .modal-content{
  background: linear-gradient(170deg, #131A2A, #0A0E18) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: 0 40px 90px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.modal-title{ font-family:'Playfair Display',Georgia,serif; font-size: 20px !important; letter-spacing: .01em; }
.modal-eyebrow{ color: var(--accent-gold) !important; letter-spacing: .2em !important; font-size: 9.5px !important; font-weight: 700; text-transform: uppercase; }
.modal-sep{ border-color: var(--border-subtle) !important; }

/* ---------- 16) التمرير ---------- */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background: rgba(154,167,188,.18);
  border-radius: 20px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover{ background: rgba(224,188,85,.34); background-clip: content-box; }
*{ scrollbar-width: thin; scrollbar-color: rgba(154,167,188,.22) transparent; }

/* ---------- 17) منطقة إسقاط الملفات ---------- */
.dropzone, .drop-area, #drop-zone{
  border: 1.5px dashed rgba(224,188,85,.32) !important;
  border-radius: var(--radius-lg) !important;
  background: rgba(224,188,85,.028) !important;
  transition: all .2s;
}
.dropzone:hover, .drop-area:hover{
  border-color: rgba(224,188,85,.6) !important;
  background: rgba(224,188,85,.06) !important;
}

/* ---------- 18) استجابة الشاشات ---------- */
@media (max-width: 1100px){
  .app{ padding: 0 14px 48px; }
  .header{ padding: 10px 14px !important; flex-wrap: wrap; gap: 10px; }
  .stats-row{ grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px){
  .stats-row{ grid-template-columns: 1fr !important; }
  .stat-val{ font-size: 25px !important; }
  .logo-name{ font-size: 15px !important; }
  .hnav-btn{ padding: 8px 10px !important; font-size: 12px !important; }
}

/* ---------- 19) تفاصيل اللمسة الأخيرة ---------- */
::selection{ background: rgba(224,188,85,.28); color: #fff; }
:focus-visible{ outline: 2px solid rgba(224,188,85,.5); outline-offset: 2px; }

/* ---------- 20) إصلاح امتلاء الحقول داخل النوافذ ---------- */
/* النافذة العريضة تحتاج مساحة أكبر لعمودين مريحين */
.modal.modal-wide{ width: 700px !important; max-width: 96vw !important; }

/* الشبكات الداخلية في النوافذ: منع تمدد الأعمدة فوق حدود النافذة */
.modal div[style*="grid-template-columns:1fr 1fr"],
.modal div[style*="grid-template-columns: 1fr 1fr"]{
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 14px 14px !important;
}
.modal input, .modal select, .modal textarea{ min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; }
.modal div[style*="display:flex"]{ min-width: 0; }
.modal label{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* منع أي تمركز أفقي يقطع محتوى النافذة */
.modal{ overflow-x: hidden !important; }

/* زر المسح المحلي في نموذج الإضافة: يبدو إجراءً ثانويًا مقصودًا */
#pr-scan-btn{ margin-top: 14px !important; }

/* ---------- 21) أساس الصفحة + الجوال ---------- */
/* لون أساس الصفحة حتى لا يظهر شريط التمرير فاتحًا على الجوال */
html{ background: var(--bg-deep) !important; }

@media (max-width: 640px){
  .stat-card{ padding: 18px 16px !important; }
  .stat-val{ font-size: 27px !important; line-height: 1.1 !important; }
  .stat-lbl{ font-size: 10px !important; }
  .header{ position: sticky; }
}

/* ============================================================
   22) APP SHELL — PROFESSIONAL LAYOUT (sidebar + workspace)
   نفس الوظائف، تغيير التخطيط البصري فقط.
   ============================================================ */

/* [FIX] .app يشغل العرض الكامل ويترك مساحة الشريط الجانبي */
.app{ padding: 0 0 64px 262px !important; max-width: none !important; margin: 0 !important; }

/* --- الشريط الجانبي --- */
.header{
  position: fixed !important;
  left: 0; top: 0; bottom: 0;
  width: 262px !important;
  height: 100vh !important;
  min-height: 0 !important;
  padding: 22px 16px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  border-bottom: none !important;
  border-right: 1px solid var(--border-medium) !important;
  background: linear-gradient(185deg, #0C111D 0%, #080B14 60%, #070A12 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 1px 0 0 rgba(255,255,255,.02) inset, 14px 0 42px rgba(0,0,0,.42);
  z-index: 300;
  overflow-y: auto;
  overflow-x: hidden;
}

/* العلامة */
.header .logo{
  display: flex; align-items: center; gap: 12px;
  padding: 0 4px 20px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.header .logo-mark{
  width: 42px !important; height: 42px !important;
  border-radius: 13px !important;
  flex-shrink: 0;
}
.header .logo-name{ font-size: 16.5px !important; line-height: 1.25; }
.header .logo-sub{ margin-top: 3px; color: var(--accent-gold) !important; opacity: .78; }

/* التنقل: عمودي */
.header-center{
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 10px 0 0 !important;
  flex-shrink: 0;
}
.header .hnav-btn{
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 11px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  font-size: 13.2px !important;
  font-weight: 500 !important;
  text-align: left;
  color: var(--text-secondary) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  position: relative;
  transform: none !important;
}
.header .hnav-btn svg{ width: 16px !important; height: 16px !important; flex-shrink: 0; opacity: .85; }
.header .hnav-btn:hover{
  background: rgba(154,167,188,.06) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
  transform: none !important;
}
.header .hnav-btn.active{
  background: linear-gradient(90deg, rgba(224,188,85,.16), rgba(224,188,85,.04)) !important;
  color: #F4DC9A !important;
  border-color: rgba(224,188,85,.26) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
  font-weight: 700 !important;
}
.header .hnav-btn.active svg{ stroke: var(--accent-gold) !important; opacity: 1; }
.header .hnav-btn.active::before{
  content: ''; position: absolute; left: -16px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #F2D57E, #C9A84C);
  box-shadow: 0 0 12px rgba(224,188,85,.55);
}

/* التصدير/الاستيراد أسفل التنقل */
.header-center-extra{
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

/* أسفل الشريط: مؤشرات + LIVE */
.header-right{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 12px !important;
  margin-top: auto !important;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.hstats{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 6px !important;
  padding: 11px 8px !important;
  background: rgba(154,167,188,.045) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 12px !important;
  width: 100%;
}
.hstat{ text-align: center; min-width: 0; }
.hstat-val{
  font-size: 16px !important; font-weight: 800 !important;
  color: #F3F6FA !important; line-height: 1.15;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.hstat-lbl{
  font-size: 8px !important; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted) !important; font-weight: 700; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.live-pill{
  justify-content: center !important;
  width: 100%;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  background: rgba(23,201,100,.09) !important;
  border: 1px solid rgba(23,201,100,.24) !important;
}
.live-txt{ font-size: 9.5px !important; color: #57E39A !important; }

/* --- مساحة العمل --- */
.content{
  margin: 0 !important;
  max-width: 1500px !important;
  width: 100% !important;
  padding: 30px 38px 72px !important;
}

/* عنوان الصفحة داخل مساحة العمل */
#page-extractor::before,
#page-addform::before,
#page-manager::before{
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: #F7F9FC;
  margin-bottom: 4px;
  line-height: 1.2;
}
#page-extractor::before{ content: 'Dashboard'; }
#page-addform::before{ content: 'New Record'; }
#page-manager::before{ content: 'Records'; }

/* --- بطاقات المؤشرات: تخطيط أفقي احترافي --- */
.stats-row{ gap: 18px !important; margin-bottom: 30px !important; }
.stat-card{
  display: grid !important;
  grid-template-columns: 46px minmax(0,1fr) auto;
  grid-template-rows: auto;
  column-gap: 16px;
  align-items: center;
  padding: 20px 22px !important;
  border-radius: 16px !important;
  background: linear-gradient(160deg, rgba(24,32,50,.92), rgba(11,15,25,.94)) !important;
  border: 1px solid var(--border-medium) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.34), 0 1px 0 rgba(255,255,255,.03) inset;
}
.stat-card::before{
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(224,188,85,.55), transparent) !important;
  opacity: .55 !important;
}
.stat-icon{
  grid-row: 1;
  grid-column: 1;
  width: 46px !important; height: 46px !important;
  border-radius: 13px !important;
  background: linear-gradient(150deg, rgba(224,188,85,.16), rgba(224,188,85,.05)) !important;
  border: 1px solid rgba(224,188,85,.26) !important;
  color: var(--accent-gold) !important;
  display: flex; align-items: center; justify-content: center;
}
.stat-icon svg{ width: 19px; height: 19px; }
.stat-val{
  grid-column: 2; grid-row: 1;
  font-size: 32px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  margin: 0 !important;
  letter-spacing: -.03em !important;
  font-variant-numeric: tabular-nums;
  color: #F7F9FC !important;
}
.stat-lbl{
  grid-column: 3; grid-row: 1;
  margin: 0 !important;
  font-size: 10px !important;
  letter-spacing: .13em !important;
  text-align: right !important;
  line-height: 1.4 !important;
  max-width: 160px;
  color: var(--text-muted) !important;
  font-weight: 700 !important;
}

/* --- استجابة --- */
@media (max-width: 1024px){
  .header{
    position: sticky !important;
    width: auto !important;
    height: auto !important;
    left: auto; right: auto; bottom: auto;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 10px !important;
    padding: 10px 14px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border-medium) !important;
    overflow: visible;
  }
  .header .logo{ border-bottom: none; padding: 0; margin: 0; }
  .header-center{
    flex-direction: row !important;
    padding: 0 !important;
    gap: 4px !important;
    overflow-x: auto;
  }
  .header .hnav-btn{ width: auto !important; padding: 8px 11px !important; }
  .header .hnav-btn.active::before{ display: none; }
  .header-center-extra{
    flex-direction: row !important;
    margin: 0; padding: 0; border: none;
    gap: 4px !important;
  }
  .header-right{
    flex-direction: row !important;
    align-items: center !important;
    margin-top: 0 !important;
    padding-top: 0;
    border-top: none;
    gap: 10px !important;
    margin-left: auto;
  }
  .hstats{ width: auto; padding: 7px 10px !important; }
  .live-pill{ width: auto !important; padding: 6px 12px !important; }
  .app{ padding: 0 0 48px 0 !important; }
  .content{ margin: 0 !important; padding: 22px 16px 56px !important; max-width: none !important; }
  #page-extractor::before, #page-addform::before, #page-manager::before{ font-size: 23px; }
}

@media (max-width: 640px){
  .stats-row{ grid-template-columns: 1fr !important; }
  .hstats{ display: none !important; }

  /* مدخلات نافذة التعديل: عمود واحد على الجوال */
  .modal-wide > div[style*="display:flex"]{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }
  .modal-wide > div[style*="display:flex"] > div:first-child{
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px !important;
  }
  .modal-wide > div[style*="display:flex"] > div[style*="display:grid"]{
    grid-template-columns: 1fr !important;
  }
  .modal-wide input[type="date"]{ width: 100% !important; }
  .modal-wide .btn{ min-height: 40px; }

  /* تمكين التمرير داخل النافذة على الشاشات القصيرة */
  .modal-overlay{
    align-items: flex-start !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 16px 12px 32px !important;
    box-sizing: border-box;
  }
  .modal-overlay .modal{
    margin: 0 auto !important;
    max-height: none !important;
    flex: 0 0 auto;
  }
}

/* ---------- 23) منطقة السحب والإفلات: ارتفاع متوازن ---------- */
#upzone{
  min-height: 318px !important;
  padding: 36px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}
#upzone .uico{ margin-bottom: 6px !important; }
@media (max-width: 1024px){
  #upzone{ min-height: 240px !important; padding: 26px 18px !important; }
}
@media (max-width: 640px){
  #upzone{ min-height: 190px !important; padding: 22px 14px !important; }
}

/* ---------- 24) عنوان صفحة الوكلاء ---------- */
body:has(.hnav-btn[onclick*="gotoAgents"].active) #page-manager::before{ content: 'Agents'; }

/* ── Users → cities drill-down (data-driven, matches the gold language) ── */
.grp-strip { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; }
.grp-strip-left { display:flex; align-items:center; gap:12px; }
.grp-avatar { width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  font-weight:800; font-size:17px; color:#0B0E17;
  background:linear-gradient(135deg,#D4AF37,#EFDCA0); box-shadow:0 6px 18px rgba(212,175,55,.22); }
.grp-strip-name { font-size:15px; font-weight:700; color:var(--text-primary); letter-spacing:.02em; }
.grp-strip-meta { font-size:11px; color:var(--text-muted); margin-top:3px; }
.grp-cities { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.grp-city { text-align:left; padding:15px 15px 13px; border-radius:13px; cursor:pointer;
  background:var(--bg-elevated); border:1px solid var(--border-subtle);
  font-family:inherit; transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.grp-city:hover { transform:translateY(-2px); border-color:rgba(212,175,55,.55);
  box-shadow:0 10px 26px rgba(0,0,0,.38); }
.grp-city-name { display:block; font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-secondary); }
.grp-city-count { display:block; font-family:'JetBrains Mono',monospace; font-size:27px;
  font-weight:800; line-height:1.1; margin-top:7px; color:var(--accent-gold); }
.grp-city-meta { display:block; font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-muted); margin-top:3px; font-weight:600; }
.grp-city.is-empty .grp-city-count { color:var(--text-muted); opacity:.5; }
@media (max-width:900px) { .grp-cities { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .grp-cities { grid-template-columns:1fr; } }

.city-btn-sub { display:block; font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-muted); margin-top:4px; font-weight:600; }
.city-sub-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;
  margin:-10px 0 20px; }
.city-sub-grid .city-btn { padding:11px 6px; font-size:11px; letter-spacing:.06em; }
@media (max-width:560px) { .city-sub-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* empty registry user row (no records yet) */
.city-list-row.is-zero{opacity:.72}
.city-list-row.is-zero .city-icon{background:rgba(255,255,255,.04);border-style:dashed;color:#8b96a8}
.city-list-row.is-zero:hover{opacity:1}

/* ── city-first users view ─────────────────────────────── */
.sec-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:24px 0 12px}
.sec-head:first-of-type{margin-top:16px}
.sec-title{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--accent-gold)}
.sec-sub{font-size:11px;color:var(--text-muted);letter-spacing:.02em}
.city-owner{display:inline-block;margin-top:10px;padding:2px 7px;border-radius:6px;font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);color:var(--text-muted)}
.team-list{display:flex;flex-direction:column;gap:9px}
.city-btn-sub{display:block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted);margin-top:3px}
/* compact city tiles on phones */
@media (max-width:560px){
  .grp-cities{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px}
  .grp-city{padding:12px 12px 10px}
  .grp-city-count{font-size:22px}
  .city-owner{margin-top:7px}
  .sec-head{margin:18px 0 10px}
}





/* ===== DESTINATIONS BOARD (v2) ===== */

/* ============================================================
   DESTINATIONS BOARD — cities only, no owner/user layer
   ============================================================ */
.dest-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:2px 2px 16px; border-bottom:1px solid var(--border-subtle); margin-bottom:18px;
}
.dest-head-l{ min-width:0; }
.dest-kicker{ font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--text-muted); font-weight:700; }
.dest-h1{
  display:flex; align-items:center; gap:9px; margin-top:7px;
  font-size:23px; font-weight:800; letter-spacing:-.01em; color:var(--text-primary); line-height:1.15;
}
.dest-h1::before{
  content:''; width:6px; height:6px; border-radius:50%; flex-shrink:0;
  background:var(--acc,var(--accent-gold)); box-shadow:0 0 10px var(--acc,var(--accent-gold));
}
.dest-sub{ font-size:11.5px; color:var(--text-secondary); margin-top:6px; }
.dest-chips{ display:flex; gap:7px; flex-wrap:wrap; }
.dest-chip{
  display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:999px;
  background:var(--bg-elevated); border:1px solid var(--border-subtle);
}
.dest-chip b{ font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:700; color:var(--accent-gold); }
.dest-chip-lbl{ font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); font-weight:700; }
.dest-dot{ width:10px; height:10px; border-radius:50%; margin-bottom:7px; box-shadow:0 0 14px currentColor; }
.dest-head-r{ display:flex; align-items:center; gap:12px; }
.dest-orb-lg{ width:34px; height:34px; border-radius:11px; font-size:14px; }

.dest-tools{ display:flex; gap:10px; margin-bottom:14px; align-items:center; }
.dest-search{ position:relative; display:flex; align-items:center; flex:1; max-width:320px; }
.dest-search-ico{ position:absolute; left:11px; display:flex; color:var(--text-muted); pointer-events:none; }
.dest-search input{
  width:100%; padding:9px 12px 9px 32px; background:var(--bg-input);
  border:1px solid var(--border-subtle); border-radius:9px; color:var(--text-primary);
  font-size:12px; font-family:'Inter',sans-serif; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.dest-search input::placeholder{ color:var(--text-disabled); }
.dest-search input:focus{ border-color:var(--accent-gold); box-shadow:0 0 0 3px var(--gold-dim); }

.dest-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.dest-tile{
  position:relative; display:flex; flex-direction:column; gap:10px;
  text-align:left; padding:14px 15px 12px; border-radius:14px; cursor:pointer; overflow:hidden;
  background:var(--bg-elevated); border:1px solid var(--border-subtle);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.dest-tile::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(115% 85% at 0% 0%, var(--acc-soft,rgba(224,188,85,.10)), transparent 62%);
}
.dest-tile:hover{
  transform:translateY(-2px); border-color:var(--acc-line,rgba(224,188,85,.3));
  box-shadow:0 14px 30px rgba(0,0,0,.45); background:var(--bg-hover);
}
.dest-tile:active{ transform:translateY(0); }
.dest-tile-top{ display:flex; align-items:center; justify-content:space-between; }
.dest-orb{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:27px; height:27px; border-radius:9px; font-size:12px; font-weight:800;
  color:var(--acc,var(--accent-gold)); background:var(--acc-soft,rgba(224,188,85,.12));
  border:1px solid var(--acc-line,rgba(224,188,85,.3));
}
.dest-orb-sm{ width:24px; height:24px; border-radius:8px; font-size:11px; }
.dest-share{ font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-muted); letter-spacing:.02em; }
.dest-city{ font-size:11.5px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--text-primary); }
.dest-rec{ display:flex; align-items:baseline; gap:7px; }
.dest-num{ font-family:'JetBrains Mono',monospace; font-size:23px; font-weight:700; line-height:1; color:var(--acc,var(--accent-gold)); }
.dest-unit{ font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); }
.dest-tile.is-empty .dest-num{ color:var(--text-disabled); }
.dest-track{ display:block; height:3px; border-radius:999px; background:rgba(255,255,255,.10); overflow:hidden; margin-top:1px; }
.dest-track i{ display:block; height:100%; border-radius:999px; background:var(--acc,var(--accent-gold)); opacity:.85; transition:width .4s ease; }
.dest-tile.is-empty{ opacity:.55; border-style:dashed; }
.dest-tile.is-empty:hover{ opacity:.85; }
.dest-none{ display:none; padding:22px 0 6px; text-align:center; font-size:11.5px; color:var(--text-muted); }

.dest-other-row{
  display:flex; align-items:center; gap:12px; width:100%; margin-top:12px; padding:12px 15px;
  border-radius:13px; cursor:pointer; text-align:left;
  background:var(--bg-surface); border:1px dashed var(--border-medium);
  transition:border-color .18s, background .18s;
}
.dest-other-row:hover{ border-color:var(--border-strong); background:var(--bg-elevated); }
.dest-other-txt{ flex:1; min-width:0; }
.dest-other-title{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-secondary); }
.dest-other-meta{ font-size:10px; color:var(--text-muted); margin-top:3px; }
.dest-other-count{ font-family:'JetBrains Mono',monospace; font-size:15px; font-weight:700; color:var(--text-secondary); }

@media (max-width:1180px){
  .dest-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  .dest-head{ gap:12px; padding-bottom:13px; margin-bottom:14px; }
  .dest-h1{ font-size:19px; }
  .dest-sub{ font-size:10.5px; }
  .dest-chip{ padding:5px 9px; }
  .dest-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .dest-tile{ padding:11px 11px 10px; gap:8px; border-radius:12px; }
  .dest-city{ font-size:10.5px; letter-spacing:.1em; }
  .dest-num{ font-size:19px; }
  .dest-share{ font-size:9px; }
  .dest-search{ max-width:none; }
}

/* compact KPI row on phones for the Destinations page */
@media (max-width:560px){
  #page-manager .stats-row{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:7px !important; margin-bottom:16px !important; }
  #page-manager .stat-card{ grid-template-columns:1fr !important; grid-template-rows:auto auto auto !important; row-gap:5px; align-items:start; padding:10px !important; border-radius:12px !important; }
  #page-manager .stat-icon{ grid-column:1; grid-row:1; width:24px !important; height:24px !important; border-radius:7px !important; }
  #page-manager .stat-icon svg{ width:13px !important; height:13px !important; }
  #page-manager .stat-val{ grid-column:1; grid-row:2; font-size:19px !important; }
  #page-manager .stat-lbl{ grid-column:1; grid-row:3; text-align:left !important; font-size:8px !important; letter-spacing:.09em !important; line-height:1.3 !important; }
  .dest-head{ align-items:flex-start; }
  .dest-head-r{ width:100%; justify-content:space-between; }
  .dest-chips{ flex-wrap:wrap; }
}

/* ===== MOBILE HEADER OVERFLOW FIX (v3) ===== */
@media (max-width: 760px){
  html, body{ overflow-x: hidden; }
  .header-center{
    min-width: 0 !important; max-width: 100% !important; flex: 1 1 auto !important;
    overflow-x: auto !important; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .header-center::-webkit-scrollbar{ display: none; }
  .header .hnav-btn{ flex: 0 0 auto !important; white-space: nowrap; }
  .header-center-extra{
    min-width: 0 !important; max-width: 100% !important; flex: 0 1 auto !important;
    overflow-x: auto !important; scrollbar-width: none;
  }
  .header-center-extra::-webkit-scrollbar{ display: none; }
}

/* ---------- 25) SCAN PASSPORT — منطقة المسح الاحترافية (Extractor) — نسخة مضغوطة ---------- */
#page-extractor .upload-wrap{
  background:linear-gradient(180deg,var(--bg-elevated) 0%,var(--bg-surface) 100%);
  border:1px solid var(--border-subtle);
}
#page-extractor .upload-head{
  padding:13px 20px;
  background:linear-gradient(90deg,rgba(212,175,55,.06),transparent 55%);
}
.scan-head-l{ min-width:0; }
.scan-kicker{
  font-size:9px; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:3px;
}
.scan-head-title{
  font-family:'Playfair Display',serif; font-size:16px; font-weight:700;
  color:var(--text-primary); letter-spacing:.01em; line-height:1.2;
}
.scan-head-title::after{
  content:''; display:inline-block; width:26px; height:2px; margin-left:10px;
  vertical-align:middle; border-radius:2px;
  background:linear-gradient(90deg,var(--accent-gold),transparent);
}

/* الصندوق: تخطيط أفقي واحد — أيقونة | عنوان+وصف | شرائح */
#page-extractor .upload-zone{
  min-height:0 !important;
  margin:14px !important;
  padding:20px 24px !important;
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  grid-template-rows:auto auto !important;
  align-items:center !important; justify-items:start !important;
  column-gap:18px !important; row-gap:1px !important;
  text-align:left !important; flex-direction:row !important;
  background:
    radial-gradient(520px 150px at 10% 0%, rgba(212,175,55,.05), transparent 70%),
    var(--bg-elevated) !important;
  border:1.5px dashed rgba(212,175,55,.28) !important;
  border-radius:14px !important;
  transition:border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}
#page-extractor .upload-zone:hover{
  border-color:rgba(212,175,55,.62) !important;
  background:
    radial-gradient(520px 170px at 10% 0%, rgba(212,175,55,.09), transparent 70%),
    linear-gradient(180deg, rgba(212,175,55,.03), transparent 45%),
    var(--bg-elevated) !important;
  transform:translateY(-1px);
  box-shadow:0 10px 30px rgba(0,0,0,.32);
}
#page-extractor .upload-zone::before{ display:none; }

/* زوايا الماسح الضوئي */
.scan-corner{
  position:absolute; width:16px; height:16px; pointer-events:none; z-index:2;
  border:1.5px solid rgba(212,175,55,.45); opacity:.8;
  transition:opacity .25s ease, border-color .25s ease;
}
.scan-corner.tl{ top:8px; left:8px; border-right:none; border-bottom:none; border-radius:6px 0 0 0; }
.scan-corner.tr{ top:8px; right:8px; border-left:none; border-bottom:none; border-radius:0 6px 0 0; }
.scan-corner.bl{ bottom:8px; left:8px; border-right:none; border-top:none; border-radius:0 0 0 6px; }
.scan-corner.br{ bottom:8px; right:8px; border-left:none; border-top:none; border-radius:0 0 6px 0; }
#page-extractor .upload-zone:hover .scan-corner,
#page-extractor .upload-zone.scan-drag .scan-corner{ opacity:1; border-color:var(--accent-gold); }

/* خط المسح المتحرك */
.scan-line{
  position:absolute; left:12px; right:12px; top:10px; height:1.5px; border-radius:2px;
  background:linear-gradient(90deg, transparent, rgba(212,175,55,.65), transparent);
  box-shadow:0 0 10px rgba(212,175,55,.35);
  opacity:0; pointer-events:none; z-index:1;
  animation:scanSweep 5.2s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes scanSweep{
  0%{ top:10px; opacity:0; }
  14%{ opacity:.5; }
  50%{ top:calc(100% - 12px); opacity:.45; }
  64%{ opacity:0; }
  100%{ top:10px; opacity:0; }
}
@media (prefers-reduced-motion:reduce){ .scan-line{ animation:none; opacity:0; } }

/* أيقونة الجواز */
#page-extractor .uico{
  grid-column:1 !important; grid-row:1 / span 2 !important;
  width:52px; height:52px; border-radius:14px;
  background:linear-gradient(160deg,rgba(212,175,55,.16),rgba(212,175,55,.05));
  border:1px solid rgba(212,175,55,.35);
  box-shadow:0 6px 18px rgba(0,0,0,.3), inset 0 0 0 1px rgba(212,175,55,.06);
  margin:0 !important; position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  transition:transform .25s ease, box-shadow .25s ease;
}
#page-extractor .upload-zone:hover .uico,
#page-extractor .upload-zone.scan-drag .uico{
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 10px 26px rgba(212,175,55,.14), 0 0 0 1px rgba(212,175,55,.2);
}
#page-extractor .uico svg{ width:24px; height:24px; color:var(--accent-gold); }

/* العنوان والوصف */
#page-extractor .upload-title{
  grid-column:2 !important; grid-row:1 !important;
  font-family:'Playfair Display',serif; font-size:16px; font-weight:700;
  color:var(--text-primary); letter-spacing:.01em; line-height:1.25;
  margin:0 0 2px !important; z-index:2;
}
#page-extractor .upload-sub{
  grid-column:2 !important; grid-row:2 !important;
  font-size:11.5px; color:var(--text-muted); line-height:1.55; z-index:2;
  max-width:none; margin:0 !important;
}
#page-extractor .upload-sub .scan-browse{
  color:var(--accent-gold); font-weight:600;
  text-decoration:underline; text-decoration-color:rgba(212,175,55,.4); text-underline-offset:3px;
}

/* شرائح الميزات — عمود على يمين الصندوق */
#page-extractor .scan-chips{
  grid-column:3 !important; grid-row:1 / span 2 !important;
  display:flex !important; flex-wrap:nowrap !important; gap:6px; justify-content:flex-end !important; align-items:center;
  margin:0; max-width:none !important; position:relative; z-index:2;
}
.scan-chip{
  display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border-radius:999px;
  background:rgba(255,255,255,.03); border:1px solid var(--border-subtle);
  font-size:8.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-secondary); white-space:nowrap; line-height:1;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.scan-chip svg{ width:10px; height:10px; color:var(--accent-gold); opacity:.85; flex-shrink:0; }
.scan-chip-ai{ color:var(--accent-gold); background:var(--gold-dim); border-color:rgba(212,175,55,.3); }
#page-extractor .upload-zone:hover .scan-chip{ border-color:var(--border-medium); }
#page-extractor .upload-zone:hover .scan-chip-ai{ border-color:rgba(212,175,55,.5); }

/* حالة السحب النشط */
#page-extractor .upload-zone.scan-drag{
  border-color:var(--accent-gold) !important;
  background:
    radial-gradient(520px 170px at 10% 0%, rgba(212,175,55,.12), transparent 70%),
    var(--bg-elevated) !important;
  box-shadow:0 0 0 4px var(--gold-dim), 0 12px 32px rgba(0,0,0,.32);
  transform:scale(1.004);
}

/* الشاشات المتوسطة: الشرائح تنزل تحت النص */
@media (max-width:1100px){
  #page-extractor .upload-zone{
    grid-template-columns:auto minmax(0,1fr) !important;
    grid-template-rows:auto auto auto !important;
    row-gap:2px !important;
  }
  #page-extractor .uico{ grid-column:1 !important; grid-row:1 / span 2 !important; align-self:start !important; }
  #page-extractor .scan-chips{
    grid-column:1 / -1 !important; grid-row:3 !important; justify-content:flex-start !important;
    max-width:none !important; margin-top:10px !important; flex-wrap:wrap !important;
  }
}

/* الجوال: نفس التخطيط الأفقي بحجم أصغر */
@media (max-width:640px){
  #page-extractor .upload-head{ padding:11px 16px; }
  #page-extractor .upload-zone{
    grid-template-columns:auto minmax(0,1fr) !important;
    grid-template-rows:auto auto auto !important;
    justify-items:start !important; text-align:left !important;
    align-items:start !important;
    column-gap:12px !important; row-gap:2px !important;
    padding:16px 14px !important; margin:12px !important; min-height:0 !important;
  }
  #page-extractor .uico{
    grid-column:1 !important; grid-row:1 / span 2 !important;
    width:42px; height:42px; border-radius:12px; margin:2px 0 0 !important;
    align-self:start !important;
  }
  #page-extractor .uico svg{ width:19px; height:19px; }
  #page-extractor .upload-title{ grid-column:2 !important; grid-row:1 !important; font-size:14px; margin:0 0 2px !important; }
  #page-extractor .upload-sub{ grid-column:2 !important; grid-row:2 !important; font-size:10.5px; line-height:1.45; }
  #page-extractor .scan-chips{
    grid-column:1 / -1 !important; grid-row:3 !important; justify-content:flex-start !important;
    max-width:100% !important; gap:5px; margin-top:10px !important; flex-wrap:wrap !important;
  }
  .scan-chip{ padding:4px 7px; font-size:8px; letter-spacing:.06em; }
  .scan-head-title{ font-size:14px; }
  .scan-head-title::after{ width:20px; margin-left:8px; }
  .scan-corner{ width:13px; height:13px; }
}