/* ==================================================================
 * Drooa Tools — أنماط قسم الأدوات
 * ------------------------------------------------------------------
 * يُحمَّل في صفحات الأدوات فقط. متغيّرات الهوية تأخذ قيم القالب إن
 * كانت معرّفة، وإلا تسقط على قيم دروع الافتراضية.
 * ================================================================== */

/* ------------------------------------------------------------------
 * أرضية القسم
 * القالب الأب يترك خلفية الصفحة بيضاء، وقوالب المنصات الأخرى تضبط
 * خلفيتها الداكنة بنفسها داخل كل قالب. لذلك نرسم أرضيتنا صراحةً بدل
 * الاعتماد على وراثة لا وجود لها — وإلا صار النص الأبيض على أبيض.
 * ------------------------------------------------------------------ */
body.drooa-tools-page{
  background:#0D0620;
}

.dt-main{
  background:#0D0620;
  --dt-gold:#C89B3C;
  --dt-gold-2:#E0B95F;
  --dt-bg:var(--bg-darkest,#0D0620);
  --dt-panel:var(--bg-dark,#190B33);
  --dt-panel-2:#1F0F3E;
  --dt-line:rgba(200,155,60,0.22);
  --dt-line-2:rgba(255,255,255,0.08);
  --dt-tx:rgba(255,255,255,0.86);
  --dt-tx-2:rgba(255,255,255,0.60);
  --dt-tx-3:rgba(255,255,255,0.40);
  --dt-ok:#4CC48A;
  --dt-err:#E8837A;
  --dt-r:14px;

  direction:rtl;
  text-align:right;
  color:var(--dt-tx);
  font-family:'Segoe UI',Tahoma,Arial,'Helvetica Neue',sans-serif;
  padding:26px 0 70px;
  line-height:1.9;
}

.dt-wrap{max-width:940px;margin:0 auto;padding:0 18px;}
.dt-main *,.dt-main *::before,.dt-main *::after{box-sizing:border-box;}
.dt-i{flex:0 0 auto;vertical-align:middle;}

/* ---------- مسار التنقل ---------- */
.dt-crumbs{font-size:13px;color:var(--dt-tx-3);margin:0 0 18px;display:flex;gap:8px;flex-wrap:wrap;}
.dt-crumbs a{color:var(--dt-tx-2);text-decoration:none;}
.dt-crumbs a:hover{color:var(--dt-gold);}

/* ---------- الترويسة ---------- */
.dt-head{margin:0 0 26px;}
.dt-badge{
  display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;
  color:var(--dt-gold);background:rgba(200,155,60,0.10);
  border:1px solid var(--dt-line);border-radius:20px;padding:5px 13px;margin:0 0 14px;
}
.dt-main h1{
  font-size:clamp(25px,4vw,36px);line-height:1.45;font-weight:800;
  color:#fff;margin:0 0 10px;
}
.dt-tagline{font-size:16.5px;color:var(--dt-tx-2);margin:0 0 18px;max-width:66ch;}
.dt-trust{list-style:none;display:flex;flex-wrap:wrap;gap:9px 18px;padding:0;margin:0;}
.dt-trust li{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--dt-tx-2);}
.dt-trust .dt-i{color:var(--dt-gold);}

/* ---------- لوحة الأداة ---------- */
.dt-app{
  background:var(--dt-panel);border:1px solid var(--dt-line);border-radius:18px;
  padding:22px;margin:0 0 42px;
}

.dt-drop{
  position:relative;border:2px dashed var(--dt-line);border-radius:var(--dt-r);
  background:rgba(255,255,255,0.02);padding:38px 20px;text-align:center;cursor:pointer;
  transition:border-color .18s ease,background .18s ease;
}
.dt-drop:hover,.dt-drop:focus-visible{border-color:var(--dt-gold);background:rgba(200,155,60,0.06);outline:none;}
.dt-drop.is-over{border-color:var(--dt-gold-2);background:rgba(200,155,60,0.10);}
.dt-drop-in{display:flex;flex-direction:column;align-items:center;gap:9px;pointer-events:none;}
.dt-drop-in .dt-i{color:var(--dt-gold);}
.dt-drop-in strong{font-size:16px;color:#fff;font-weight:700;}
.dt-drop-hint{font-size:12.5px;color:var(--dt-tx-3);}
.dt-input-file{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;}

/* ---------- الرسائل ---------- */
.dt-msg{
  margin:16px 0 0;padding:12px 15px;border-radius:10px;font-size:14px;line-height:1.75;
  border:1px solid var(--dt-line-2);background:rgba(255,255,255,0.03);
}
.dt-msg.is-err{border-color:rgba(232,131,122,0.4);background:rgba(232,131,122,0.10);color:#F3B7B1;}
.dt-msg.is-ok{border-color:rgba(76,196,138,0.35);background:rgba(76,196,138,0.10);color:#9FE3C1;}
.dt-msg .dt-link{margin-inline-start:10px;}

/* ---------- قائمة الملفات ---------- */
.dt-files{margin:18px 0 0;}
.dt-files-head{display:flex;justify-content:space-between;align-items:center;margin:0 0 10px;font-size:13.5px;color:var(--dt-tx-2);}
.dt-link{
  background:none;border:0;color:var(--dt-gold);font:inherit;font-size:13px;font-weight:700;
  cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px;
}
.dt-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;}
.dt-item{
  display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:11px;
  background:var(--dt-panel-2);border:1px solid var(--dt-line-2);cursor:grab;
}
.dt-item.is-drag{opacity:.45;}
.dt-item.is-target{border-color:var(--dt-gold);}
.dt-item-n{
  flex:0 0 auto;width:25px;height:25px;border-radius:7px;background:rgba(200,155,60,0.14);
  color:var(--dt-gold);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.dt-item-thumb{flex:0 0 auto;width:38px;height:46px;border-radius:6px;object-fit:cover;background:rgba(0,0,0,.3);border:1px solid var(--dt-line-2);}
.dt-item-b{flex:1 1 auto;min-width:0;}
.dt-item-name{display:block;font-size:14px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dt-item-meta{display:block;font-size:12px;color:var(--dt-tx-3);direction:ltr;text-align:right;}
.dt-item-x{
  flex:0 0 auto;background:none;border:0;color:var(--dt-tx-3);font-size:19px;line-height:1;
  cursor:pointer;padding:4px 6px;border-radius:6px;
}
.dt-item-x:hover{color:var(--dt-err);background:rgba(232,131,122,0.10);}
.dt-hint{font-size:12.5px;color:var(--dt-tx-3);margin:10px 0 0;}

/* ---------- الخيارات ---------- */
.dt-options{margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--dt-line-2);}
.dt-opt-title{font-size:15px;font-weight:700;color:#fff;margin:0 0 14px;}
.dt-opt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px 20px;}
.dt-opt.is-hidden{display:none;}
.dt-opt-label{display:block;font-size:13.5px;font-weight:600;color:var(--dt-tx);margin:0 0 7px;}
.dt-field{
  width:100%;padding:10px 12px;border-radius:9px;font:inherit;font-size:14px;
  background:var(--dt-panel-2);color:#fff;border:1px solid var(--dt-line);
}
.dt-field:focus{outline:2px solid var(--dt-gold);outline-offset:1px;}
select.dt-field{appearance:none;background-image:none;}
.dt-radios{display:flex;flex-direction:column;gap:7px;}
.dt-radio,.dt-check{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--dt-tx-2);cursor:pointer;line-height:1.7;}
.dt-radio input,.dt-check input{margin:5px 0 0;accent-color:var(--dt-gold);flex:0 0 auto;}
.dt-opt-help{font-size:12px;color:var(--dt-tx-3);margin:7px 0 0;line-height:1.7;}

/* ---------- التنفيذ ---------- */
.dt-run{margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--dt-line-2);}
.dt-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 30px;border-radius:11px;border:1px solid transparent;
  font:inherit;font-size:15.5px;font-weight:700;cursor:pointer;text-decoration:none;
}
.dt-btn-go{background:var(--dt-gold);color:#160A2E;}
.dt-btn-go:hover{background:var(--dt-gold-2);}
.dt-btn-go:disabled{opacity:.55;cursor:not-allowed;}
.dt-btn-ghost{background:transparent;color:var(--dt-gold);border-color:var(--dt-line);}
.dt-btn-ghost:hover{background:rgba(200,155,60,0.08);}
.dt-btn-dl{background:rgba(76,196,138,0.14);color:#8FE0B8;border-color:rgba(76,196,138,0.35);font-size:14px;padding:10px 20px;}
.dt-btn-dl:hover{background:rgba(76,196,138,0.22);}

.dt-progress{margin:16px 0 0;display:flex;align-items:center;gap:12px;}
.dt-bar{flex:1 1 auto;height:7px;border-radius:5px;background:rgba(255,255,255,0.08);overflow:hidden;}
.dt-bar span{display:block;height:100%;width:0;background:var(--dt-gold);border-radius:5px;transition:width .2s ease;}
.dt-progress-txt{font-size:12.5px;color:var(--dt-tx-2);white-space:nowrap;font-variant-numeric:tabular-nums;}

/* ---------- النتائج ---------- */
.dt-results{margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--dt-line-2);}
.dt-results-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 14px;}
.dt-results-head strong{font-size:15.5px;color:var(--dt-ok);}
.dt-results-actions{display:flex;align-items:center;gap:14px;}
.dt-out{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;}
.dt-out li{
  display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:11px;
  background:var(--dt-panel-2);border:1px solid var(--dt-line-2);
}
.dt-out img{width:44px;height:52px;object-fit:cover;border-radius:6px;background:rgba(0,0,0,.3);}
.dt-out .dt-item-b{flex:1 1 auto;min-width:0;}
.dt-out a.dt-dl{color:var(--dt-gold);font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;}
.dt-out a.dt-dl:hover{text-decoration:underline;}
.dt-save{font-size:12px;color:var(--dt-ok);}

.dt-noscript{
  margin:16px 0 0;padding:14px 16px;border-radius:10px;font-size:14px;
  border:1px solid rgba(232,131,122,0.35);background:rgba(232,131,122,0.08);color:#F3B7B1;
}

/* ---------- أقسام المحتوى ---------- */
.dt-sec{margin:0 0 42px;}
.dt-main h2{font-size:21px;font-weight:800;color:#fff;margin:0 0 12px;line-height:1.55;}
.dt-main h3{font-size:16px;font-weight:700;color:#fff;margin:0 0 6px;}
.dt-lede{font-size:16px;color:var(--dt-tx-2);margin:0 0 16px;max-width:68ch;}

.dt-steps{counter-reset:dts;list-style:none;padding:0;margin:0;}
.dt-steps li{
  counter-increment:dts;position:relative;padding-inline-start:40px;margin:0 0 14px;
  font-size:15.5px;color:var(--dt-tx);max-width:68ch;
}
.dt-steps li::before{
  content:counter(dts);position:absolute;inset-inline-start:0;top:3px;
  width:26px;height:26px;border-radius:8px;background:rgba(200,155,60,0.14);
  color:var(--dt-gold);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;
}

.dt-feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;}
.dt-feat{background:var(--dt-panel);border:1px solid var(--dt-line-2);border-radius:var(--dt-r);padding:18px;}
.dt-feat .dt-i{color:var(--dt-gold);margin:0 0 10px;}
.dt-feat h3{font-size:15px;margin:0 0 5px;}
.dt-feat p{font-size:13.5px;color:var(--dt-tx-2);margin:0;line-height:1.8;}

.dt-privacy{
  display:flex;gap:16px;align-items:flex-start;
  background:linear-gradient(180deg,rgba(200,155,60,0.07),rgba(200,155,60,0.02));
  border:1px solid var(--dt-line);border-radius:var(--dt-r);padding:22px;
}
.dt-privacy .dt-i{color:var(--dt-gold);margin-top:3px;}
.dt-privacy h2{font-size:18px;margin:0 0 9px;}
.dt-privacy p{font-size:14.5px;color:var(--dt-tx-2);margin:0 0 10px;max-width:70ch;}
.dt-privacy p:last-child{margin:0;}
.dt-verify{font-size:13.5px;color:var(--dt-tx-3);}
.dt-verify kbd{
  font-family:ui-monospace,Menlo,monospace;font-size:12px;padding:2px 6px;border-radius:4px;
  background:rgba(255,255,255,0.08);border:1px solid var(--dt-line-2);
}

.dt-article h2{font-size:20px;margin:30px 0 10px;}
.dt-article h2:first-child{margin-top:0;}
.dt-article p{font-size:15.5px;color:var(--dt-tx-2);margin:0 0 14px;max-width:70ch;line-height:1.95;}
.dt-article ul,.dt-article ol{margin:0 0 16px;padding-inline-start:22px;max-width:70ch;}
.dt-article li{font-size:15px;color:var(--dt-tx-2);margin:0 0 8px;line-height:1.9;}
.dt-article strong{color:#fff;font-weight:700;}
.dt-article code{
  font-family:ui-monospace,Menlo,monospace;font-size:13px;padding:2px 7px;border-radius:5px;
  background:rgba(255,255,255,0.07);border:1px solid var(--dt-line-2);color:var(--dt-gold-2);direction:ltr;display:inline-block;
}

.dt-faq{display:flex;flex-direction:column;gap:9px;}
.dt-faq details{background:var(--dt-panel);border:1px solid var(--dt-line-2);border-radius:11px;overflow:hidden;}
.dt-faq summary{
  padding:14px 17px;font-size:15px;font-weight:700;color:#fff;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.dt-faq summary::-webkit-details-marker{display:none;}
.dt-faq summary::after{content:'+';color:var(--dt-gold);font-size:19px;font-weight:400;flex:0 0 auto;}
.dt-faq details[open] summary::after{content:'−';}
.dt-faq details>div{padding:0 17px 15px;font-size:14.5px;color:var(--dt-tx-2);line-height:1.9;max-width:70ch;}

.dt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:13px;}
.dt-card{
  display:flex;flex-direction:column;gap:6px;padding:17px;text-decoration:none;
  background:var(--dt-panel);border:1px solid var(--dt-line-2);border-radius:var(--dt-r);
  transition:border-color .18s ease,transform .18s ease;
}
.dt-card:hover{border-color:var(--dt-gold);transform:translateY(-2px);}
.dt-card-ico{color:var(--dt-gold);}
.dt-card strong{font-size:15px;color:#fff;}
.dt-card-d{font-size:12.5px;color:var(--dt-tx-3);line-height:1.75;}

.dt-cta{
  background:linear-gradient(180deg,rgba(200,155,60,0.10),rgba(200,155,60,0.02));
  border:1px solid var(--dt-line);border-radius:18px;padding:26px;text-align:center;
}
.dt-cta h2{font-size:19px;margin:0 0 9px;}
.dt-cta p{font-size:15px;color:var(--dt-tx-2);margin:0 auto 18px;max-width:62ch;}
.dt-cta-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.dt-cta-links .dt-btn{font-size:14px;padding:11px 22px;}

.dt-missing{text-align:center;padding:60px 20px;}
.dt-missing h1{margin-bottom:10px;}
.dt-missing p{color:var(--dt-tx-2);margin-bottom:20px;}

/* ---------- الجوال ---------- */
@media (max-width:640px){
  .dt-app{padding:16px;border-radius:14px;}
  .dt-drop{padding:28px 14px;}
  .dt-main h1{font-size:24px;}
  .dt-main h2{font-size:19px;}
  .dt-privacy{flex-direction:column;gap:12px;padding:18px;}
  .dt-btn-go{width:100%;}
  .dt-results-head{flex-direction:column;align-items:flex-start;}
}

@media (prefers-reduced-motion:reduce){
  .dt-main *{transition:none !important;animation:none !important;}
}
