:root{
      --brand:#06b6d4; --accent:#9333ea; --brand-dark:#0e7490;
      --bg:#f8fafc; --panel:#ffffff; --text:#0f172a; --muted:#64748b; --border:#cbd5e1;
      --radius-xl: 1.2rem; --radius-lg: 1rem; --radius-md: .8rem;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;font-family:"Cairo",sans-serif;background:var(--bg);color:var(--text);
      display:flex;flex-direction:column;min-height:100vh
    }
    header{
      background:#fff8;backdrop-filter:blur(10px);position:sticky;top:0;z-index:10;
      display:flex;align-items:center;gap:1rem;justify-content:space-between;
      padding:.8rem 1.5rem;box-shadow:0 2px 8px rgba(0,0,0,.1)
    }
    header h1{margin:0;font-size:1.2rem;font-weight:900;color:var(--brand-dark)}
    main{flex:1;display:flex;flex-direction:column;align-items:center;padding:2rem 1rem}
    h2{font-weight:900;font-size:1.8rem;color:var(--brand-dark);margin:0 0 .5rem;text-align:center}
    p.desc{
      text-align:center;
      max-width:780px;
      margin:.35rem auto 1.7rem;
      color:var(--muted);
      font-size:.96rem;
      line-height:1.8;
    }
    /* ===== FikraLab Header ===== */

.fl-header{
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;

  padding: .9rem 1.3rem;
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0,0,0,0.08);

  font-family: 'Cairo', sans-serif;
}

/* العنوان: الآن أصبح على اليمين */
.fl-title{
  font-size: 1.3rem;
  font-weight: 900;
  margin: 0;
  white-space: nowrap;

  background: linear-gradient(135deg,#0ea5e9,#06b6d4,#6366f1);
  -webkit-background-clip: text;
  color: transparent;
}

/* الشعار في المنتصف تماماً */
.fl-logo{
  flex: 1;
  display: flex;
  justify-content: center;
}

.fl-logo img{
  width: 100px;
  height: 50px;
  border-radius: 12px;
  display: block;
}

/* اليسار: روابط + أيقونة */
.fl-nav{
  display: flex;
  align-items: center;
  gap: 12px;
}

.fl-nav a{
  text-decoration: none;
  font-size: .9rem;
  font-weight: 700;
  padding: .35rem .8rem;
  border-radius: 999px;

  color: #0f172a;
  background: rgba(255,255,255,.45);
}

.fl-nav a:hover{
  background: #06b6d4;
  color: #fff;
}

/* أيقونة الثيم */
.theme-icon{
  background: #e2e8f0;
  border: none;
  padding: .4rem .65rem;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
}

.theme-icon:hover{
  background: #cbd5e1;
}

/* الوضع الداكن (بدون JS فقط مظهر) */
[data-theme="dark"] .fl-header{
  background: rgba(15,23,42,0.85);
  border-bottom-color: rgba(255,255,255,.06);
}

[data-theme="dark"] .fl-title{
  background: linear-gradient(135deg,#22d3ee,#38bdf8,#818cf8);
  -webkit-background-clip: text;
  color: transparent;
}

[data-theme="dark"] .fl-nav a{
  background: rgba(255,255,255,0.1);
  color: #e5e7eb;
}

[data-theme="dark"] .theme-icon{
  background: #1f2937;
  color: #e5e7eb;
}


    /* ===================== Responsive Header (Mobile) ===================== */

@media (max-width: 768px){

  .fl-header{
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 1rem 1.1rem;
  }

  .fl-title{
    font-size: 1.1rem;
    text-align: center;
    white-space: normal;
  }

  .fl-logo{
    flex: unset;
    order: -1;
  }

  .fl-nav{
    gap: 10px;
  }

  .fl-nav a{
    padding: .25rem .55rem;
    font-size: .8rem;
  }

  .theme-icon{
    padding: .35rem .55rem;
    font-size: .95rem;
  }
}

    .tool-box{
      background:var(--panel);box-shadow:0 6px 20px -6px rgba(0,0,0,.15);
      border-radius:var(--radius-xl);padding:1.5rem;margin-top:2rem;width:min(100%,980px)
    }

    .controls{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;align-items:flex-start;margin-bottom:.8rem}
    .counter{font-size:.95rem;color:var(--muted)}
    .error-tip{display:none;margin-top:.4rem;color:#b91c1c;font-weight:700}
    .error-tip.active{display:block}
    .inline-controls{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
    .inline-controls button,
    .inline-controls .btn,
    .inline-controls .ghost,
    .range-input button,
    .range-input input,
    .btn,
    button {font-family: "Cairo", sans-serif !important;}
    .range-input{display:flex;gap:.4rem;align-items:center}
    .range-input input{
      padding:.6rem .8rem;border:1px solid var(--border);border-radius:var(--radius-md);
      font-family:"Cairo",sans-serif;min-width:220px
    }
    .hint{font-size:.8rem;color:#64748b}

    .dropzone{
      position:relative;border-radius:22px;padding:28px;min-height:220px;
      display:grid;place-items:center;text-align:center;overflow:hidden;
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
      border:1px solid rgba(2,6,23,.08)
    }
    .dropzone .neon{position:absolute;inset:10px;border-radius:18px;border:2px solid var(--brand);
      box-shadow:0 0 0 1px rgba(0,0,0,.04) inset,0 0 24px 0 #39c8e0,0 0 80px -10px rgba(6,182,212,.35) inset;pointer-events:none}
    .dropzone .stripe{position:absolute;inset:0;opacity:.10;background:repeating-linear-gradient(120deg, rgba(6,182,212,.15) 0 4px, transparent 4px 16px)}
    .dropzone .center{position:relative;z-index:1}
    .dropzone .icon{display:inline-grid;place-items:center;margin-bottom:12px}
    .dropzone .icon svg{width:96px;height:96px;filter:drop-shadow(0 10px 20px rgba(6,182,212,.18))}
    .dropzone .dz-title{font-weight:900;font-size:22px;margin:2px 0 6px;color:var(--brand-dark)}
    .dropzone .muted{color:var(--muted)}
    .dropzone .muted a{color:var(--brand);text-decoration:none}
    .dropzone .muted a:hover{text-decoration:underline}
    .dropzone .cap{margin-top:10px;color:var(--muted);font-size:12px}
    .dropzone.dragging{outline:3px dashed var(--accent)}
    .dropzone input{position:absolute;inset:0;opacity:0;cursor:pointer}

    /* شريط المعاينات — يدعم اللمس والتمرير الأفقي مع سناب */
    .preview-bar{
      display:flex;overflow-x:auto;gap:.8rem;margin-top:1rem;padding:.6rem;
      background:linear-gradient(90deg,#06b6d422,#9333ea22);border-radius:.8rem;
      scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch
    }
    .preview-bar::-webkit-scrollbar{height:10px}
    .preview-bar::-webkit-scrollbar-thumb{background:#94a3b8;border-radius:10px}
    .preview-item{
      flex:0 0 150px;background:#fff;border:1px solid var(--border);
      border-radius:.8rem;text-align:center;box-shadow:0 4px 8px -4px rgba(0,0,0,.15);
      position:relative;transition:.2s;display:flex;flex-direction:column;cursor:pointer;
      scroll-snap-align:center
    }
    .preview-item img{width:100%;height:190px;object-fit:cover;border-radius:.8rem .8rem 0 0;background:#e2e8f0}
    .preview-head{display:flex;justify-content:space-between;gap:.25rem;position:absolute;inset-inline:6px;top:6px}
    .preview-label{display:block;padding:.4rem;font-size:.85rem;font-weight:700;color:#334155;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .reorder{display:none}

    .actions{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:1rem}
    .btn{padding:.9rem 1.2rem;border:none;border-radius:1rem;font-weight:900;cursor:pointer;transition:.2s}
    .btn.primary{background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff}
    .btn.primary:hover{transform:scale(1.03);box-shadow:0 6px 18px -6px var(--accent)}
    .btn.ghost{background:#e2e8f0;color:#0f172a}
    .btn.ghost:hover{background:#cbd5e1}

    .progress{position:fixed;inset:0;background:#0b1220cc;display:none;align-items:center;justify-content:center;z-index:50;flex-direction:column;gap:1rem}
    .progress.active{display:flex}
    .ring{width:160px;height:160px;border-radius:50%;background:conic-gradient(var(--brand) 0%, #ffffff22 0%);display:grid;place-items:center;box-shadow:0 10px 30px -10px #0008}
    .ring::after{content:"";width:120px;height:120px;border-radius:50%;background:#0b1220}
    .pct{position:absolute;color:#fff;font-weight:900;font-size:2rem}

    .download{margin-top:1.2rem;display:none;text-align:center}
    .download.active{display:block}
    .download a{background:var(--brand-dark);color:#fff;padding:.95rem 1.5rem;border-radius:1rem;font-weight:900;text-decoration:none}
    .download a:hover{background:#9333ea}

    .suggest{display:none;margin-top:2rem}
    .suggest.active{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
    .card{background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff;border-radius:1rem;padding:1.2rem;box-shadow:0 8px 20px -6px rgba(0,0,0,.25)}
    .card a{background:#fff;color:#0e7490;border-radius:.7rem;padding:.6rem;text-align:center;font-weight:700;text-decoration:none}

    /* تحديد */
    .preview-item .select-dot{
      border:none;border-radius:50%;width:30px;height:30px;display:grid;place-items:center;
      font-size:15px;cursor:pointer;color:#fff;background:#0ea5e9cc;outline:1px solid rgba(255,255,255,.35)
    }
    .preview-item.selected{box-shadow:0 0 0 2px var(--brand) inset,0 6px 16px -6px rgba(6,182,212,.55);border-color:var(--brand)}
    .preview-item .badge{position:absolute;right:8px;top:8px;background:#111827cc;color:#fff;font-weight:800;border-radius:10px;padding:2px 8px;font-size:12px}
    .selected-count{font-size:.9rem;color:var(--muted)}

    /* تهيئة للوضع الليلي */
    [data-theme="dark"]{--bg:#0b1220;--panel:#0f172a;--text:#e2e8f0;--muted:#94a3b8;--border:#1f2937;--brand-dark:#22d3ee}
    [data-theme="dark"] header{background:#0b1220cc;box-shadow:0 2px 8px rgba(0,0,0,.6)}
    [data-theme="dark"] .tool-box{background:var(--panel)}
    [data-theme="dark"] .preview-item{background:#111827;border-color:#1f2937;box-shadow:0 4px 10px -4px rgba(0,0,0,.7)}
    [data-theme="dark"] .preview-label{color:#e2e8f0}
    [data-theme="dark"] .btn.ghost{background:#1f2937;color:#e2e8f0}
    [data-theme="dark"] .btn.ghost:hover{background:#334155}
    [data-theme="dark"] .card a{background:#0f172a;color:#e0f2fe}
    [data-theme="dark"] footer{color:#94a3b8}

    /* ——— الاستجابة للشاشات ——— */
    @media (max-width: 1024px){
      .tool-box{padding:1.25rem}
      .preview-item{flex-basis: 140px}
      .preview-item img{height:180px}
      .range-input input{min-width:200px}
    }
    @media (max-width: 768px){
      header{padding:.7rem 1rem}
      h2{font-size:1.5rem}
      .dropzone{min-height:200px}
      .preview-item{flex-basis: 130px}
      .preview-item img{height:170px}
      .inline-controls{gap:.4rem}
      .btn{padding:.85rem 1.1rem}
      .controls{gap:.6rem}
    }
    @media (max-width: 600px){
      .controls{flex-direction:column;align-items:stretch}
      .inline-controls{justify-content:space-between}
      .range-input{width:100%}
      .range-input input{flex:1;min-width:0}
      .btn{width:auto}
      .dropzone{padding:22px;min-height:180px}
      .preview-item{flex-basis: 120px}
      .preview-item img{height:160px}
    }
    @media (max-width: 420px){
      .preview-item{flex-basis: 110px}
      .preview-item img{height:150px}
      .preview-item .select-dot{width:34px;height:34px;font-size:16px}
      .btn{padding:.85rem 1rem}
      .dropzone .icon svg{width:84px;height:84px}
    }

    /* تقليل الحركة */
    @media (prefers-reduced-motion: reduce){
      *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
    }
    /* ============= تبويبات المحتوى (حول الأداة / الاستخدام / FAQ) ============= */
.tool-info{
  margin-top:1.6rem;
  padding:1.1rem 1rem 1.2rem;
  border-radius:1.2rem;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(148,163,184,.4);
}

.tool-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-bottom:.9rem;
}

.tool-tab-button{
  border-radius:999px;
  border:1px solid rgba(148,163,184,.7);
  background:#f9fafb;
  padding:.35rem .9rem;
  font-size:.85rem;
  font-weight:700;
  cursor:pointer;
  color:#0f172a;
  font-family: inherit; /* يمشي مع Cairo */
}

.tool-tab-button.active{
  background:linear-gradient(135deg,#06b6d4,#0ea5e9);
  border-color:#0ea5e9;
  color:#022c22;
  box-shadow:0 10px 22px -18px rgba(37,99,235,.7);
}

.tool-tab-panel{
  display:none;
  font-size:.9rem;
  line-height:1.9;
  color:#374151;
  scroll-margin-top: 120px; /* علشان الهيدر الستكي */
}

.tool-tab-panel.active{display:block;}

.tool-tab-panel h3{
  font-size:1rem;
  margin-bottom:.4rem;
}

.tool-tab-panel p{margin:.2rem 0 .6rem;}

.tool-tab-panel ul{
  margin:.3rem 1.2rem .8rem;
  padding:0;
}

.tool-tab-panel li{
  margin-bottom:.25rem;
}

.tool-tab-panel details{
  margin-bottom:.5rem;
  background:rgba(249,250,251,.95);
  border-radius:.6rem;
  padding:.45rem .7rem;
  border:1px solid rgba(209,213,219,.9);
}

.tool-tab-panel summary{
  cursor:pointer;
  font-weight:700;
  outline:none;
}

/* وضع داكن */
[data-theme="dark"] .tool-info{
  background:#020617;
  border-color:#1f2937;
}

[data-theme="dark"] .tool-tab-panel{
  color:#e5e7eb;
}

[data-theme="dark"] .tool-tab-button{
  background:#020617;
  border-color:#1f2937;
  color:#e5e7eb;
}

[data-theme="dark"] .tool-tab-button.active{
  background:linear-gradient(135deg,#06b6d4,#22c55e);
  color:#022c22;
}

[data-theme="dark"] .tool-tab-panel details{
  background:#020617;
  border-color:#1f2937;
}

@media (max-width:768px){
  .tool-tab-panel{
    scroll-margin-top: 200px; /* موبايل: الهيدر أعلى شوي */
  }
}