:root{
      --bg:#f4f6fb;
      --panel:#ffffff;
      --text:#0f172a;
      --muted:#6b7280;
      --border:#e5e7eb;
      --brand:#06b6d4;
      --brand-soft:#22d3ee;
      --brand-dark:#0e7490;
      --accent:#22c55e;
      --danger:#ef4444;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:'Cairo',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
      background:radial-gradient(circle at top,#e0f2fe,#eff6ff 40%,#e5e7eb 80%);
      color:var(--text);
      min-height:100vh;
      display:flex;
      flex-direction:column;
    }
    /* ===== 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;
}

    main{
      flex:1;
      padding:2rem 1.25rem 2.5rem;
      max-width:1100px;
      margin:0 auto;
    }
    h1,h2,h3{margin:0;font-weight:900}
    h2{
      font-size:1.6rem;
      margin-bottom:.4rem;
      text-align:center;
      background:linear-gradient(135deg,#0f172a,#0ea5e9);
      -webkit-background-clip:text;
      color:transparent;
    }
          p.desc{
      text-align:center;
      max-width:780px;
      margin:.35rem auto 1.7rem;
      color:var(--muted);
      font-size:.96rem;
      line-height:1.8;
    }

    .tool-box{
      background:radial-gradient(circle at top left,#e0f2fe,#ffffff 55%);
      border-radius:1.5rem;
      padding:1.4rem 1.4rem 2rem;
      box-shadow:
        0 18px 45px -28px rgba(15,23,42,.55),
        0 0 0 1px rgba(148,163,184,.35);
      border:1px solid rgba(148,163,184,.4);
    }

    .controls{
      display:flex;
      justify-content:space-between;
      gap:1.25rem;
      flex-wrap:wrap;
      align-items:flex-start;
      margin-bottom:1.1rem;
    }
    .counter{
      font-weight:800;
      font-size:.98rem;
      color:#0f172a;
    }
    .selected-count{
      margin-top:.15rem;
      font-size:.85rem;
      color:#4f46e5;
    }
    .hint{
      margin-top:.3rem;
      font-size:.78rem;
      color:#6b7280;
    }
    .error-tip{
      margin-top:.35rem;
      font-size:.82rem;
      color:#b91c1c;
      display:none;
    }
    .error-tip.active{display:block}

    .inline-controls{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
      align-items:center;
      justify-content:flex-end;
    }
    .range-input{
      display:flex;
      align-items:center;
      gap:.3rem;
      font-size:.8rem;
      color:#111827;
    }
    .range-input input{
      border-radius:999px;
      border:1px solid rgba(148,163,184,.7);
      padding:.25rem .75rem;
      font-size:.8rem;
      min-width:150px;
      background:rgba(255,255,255,.9);
      color:#111827;
    }
    .range-input input:focus{
      outline:none;
      box-shadow:0 0 0 1px #0ea5e9;
      border-color:#0ea5e9;
    }

    .btn{
      border-radius:999px;
      border:1px solid transparent;
      padding:.45rem .95rem;
      font-size:.85rem;
      font-weight:700;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      font-family:inherit;
      white-space:nowrap;
    }
    .btn.primary{
      background:linear-gradient(135deg,#06b6d4,#0ea5e9,#6366f1);
      color:#0f172a;
      box-shadow:0 14px 30px -18px rgba(37,99,235,.9);
    }
    .btn.primary:disabled{
      opacity:.4;
      cursor:not-allowed;
      box-shadow:none;
    }
    .btn.ghost{
      background:#f9fafb;
      border-color:#e5e7eb;
      color:#111827;
    }
    .btn.ghost:disabled{
      opacity:.4;
      cursor:not-allowed;
    }

    .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 #39c4ff40,0 0 80px -10px rgba(6,182,212,.35) inset;pointer-events:none}
    .dropzone .stripe{position:absolute;inset:0;opacity:.10;background-image: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;scroll-snap-align:center;display:flex;flex-direction:column;cursor:pointer;
      transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    }
    .preview-item:hover{
      transform:translateY(-2px);
      box-shadow:0 10px 20px -10px rgba(15,23,42,.35);
      border-color:#a5b4fc;
    }
    .preview-item img{
      width:100%;height:190px;object-fit:cover;
      border-radius:.8rem .8rem 0 0;background:#e2e8f0;
    }
    .preview-label{
      display:block;padding:.4rem .55rem .6rem;
      font-size:.86rem;font-weight:700;color:#111827;
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    }
    .preview-head{
      position:absolute;inset-inline:6px;top:6px;display:flex;justify-content:space-between;gap:.25rem;
      pointer-events:none;
    }
    .preview-head > *{pointer-events:auto}

    .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:#0f172a;color:#e5e7eb;font-weight:800;border-radius:10px;padding:2px 8px;font-size:12px}
    .selected-count{font-size:.9rem;color:var(--muted)}

    /* لوحة الجودة */
    .quality-panel{
      margin-top:1rem;
      padding:.75rem 1rem;
      border-radius:.8rem;
      background:rgba(15,23,42,.02);
      border:1px dashed rgba(148,163,184,.6);
      display:none;
      align-items:center;
      justify-content:space-between;
      flex-wrap:wrap;
      gap:.75rem;
      font-size:.85rem;
      color:var(--muted);
    }
    .quality-panel strong{
      color:#0f172a;
      font-size:.9rem;
    }
    .quality-options{
      display:flex;
      flex-wrap:wrap;
      gap:.6rem;
    }
    .quality-options label{
      display:flex;
      align-items:center;
      gap:.25rem;
      padding:.25rem .6rem;
      border-radius:999px;
      background:#f9fafb;
      border:1px solid rgba(148,163,184,.55);
      cursor:pointer;
    }
    .quality-options input{
      accent-color:var(--brand);
    }
    [data-theme="dark"] .quality-panel{
      background:rgba(15,23,42,.8);
      border-color:#1f2937;
    }
    [data-theme="dark"] .quality-options label{
      background:#020617;
      border-color:#1f2937;
      color:#e5e7eb;
    }

    .actions{
      margin-top:1rem;
      display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;
    }
    .download{
      display:none;margin-top:1.2rem;text-align:center;
    }
    .download.active{display:block}
    .download a{
      display:inline-block;
      border-radius:1rem;
      padding:.75rem 1.4rem;
      font-weight:800;
      font-size:.95rem;
      background:linear-gradient(135deg,#0ea5e9,#22c55e);
      color:#022c22;
      text-decoration:none;
      box-shadow:0 16px 35px -22px rgba(16,185,129,.85);
    }

    .suggest{
      display:none;margin-top:1.8rem;
      gap:1rem;
      grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    }
    .suggest.active{display:grid}
    .card{
      border-radius:1rem;
      padding:1.1rem 1rem 1.2rem;
      background:radial-gradient(circle at top,#eff6ff,#e0f2fe);
      border:1px solid rgba(148,163,184,.5);
      box-shadow:0 10px 25px -18px rgba(15,23,42,.4);
    }
    .card h3{margin:.1rem 0 .7rem;font-size:1rem}
    .card a{
      display:inline-flex;align-items:center;justify-content:center;
      padding:.45rem .9rem;
      border-radius:.8rem;
      text-decoration:none;
      font-weight:700;
      font-size:.86rem;
      background:#0f172a;
      color:#e5e7eb;
    }

    .progress{
      position:fixed;inset:0;background:rgba(15,23,42,.82);
      display:flex;align-items:center;justify-content:center;z-index:40;
      opacity:0;pointer-events:none;transition:opacity .25s ease;
    }
    .progress.active{opacity:1;pointer-events:auto}
    .ring{
      width:170px;height:170px;border-radius:50%;
      background:conic-gradient(from -90deg,#06b6d4 0%,#e5e7eb 0%);
      display:grid;place-items:center;
      box-shadow:0 18px 45px -25px rgba(0,0,0,.85);
    }
    .ring::before{
      content:"";width:132px;height:132px;border-radius:50%;
      background:radial-gradient(circle at top,#0f172a,#020617);
      box-shadow:0 0 0 1px rgba(148,163,184,.35) inset;
    }
    .pct{
      position:absolute;
      font-weight:900;
      font-size:2.1rem;
      color:#e5e7eb;
    }

    footer{
      padding:1rem 1.5rem 1.8rem;
      text-align:center;
      font-size:.8rem;
      color:#6b7280;
    }

    [data-theme="dark"]{
      --bg:#020617;
      --panel:#020617;
      --text:#e5e7eb;
      --muted:#9ca3af;
      --border:#1f2937;
      --brand-dark:#22d3ee;
    }
    [data-theme="dark"] body{
      background:radial-gradient(circle at top,#020617,#020617 45%,#020617 100%);
    }
    [data-theme="dark"] .tool-box{
      background:radial-gradient(circle at top left,#020617,#020617 50%);
      border-color:#1f2937;
      box-shadow:
        0 22px 40px -28px rgba(0,0,0,.95),
        0 0 0 1px rgba(15,23,42,.9);
    }
    [data-theme="dark"] .dropzone{
      background:radial-gradient(circle at top,#020617,#020617 70%);
      border-color:#111827;
    }
    [data-theme="dark"] .preview-item{
      background:#020617;
      border-color:#1f2937;
      box-shadow:0 10px 25px -16px rgba(0,0,0,.9);
    }
    [data-theme="dark"] .preview-label{color:#e5e7eb}
    [data-theme="dark"] header{background:rgba(15,23,42,.96)}
    [data-theme="dark"] .btn.ghost{
      background:#020617;
      border-color:#1f2937;
      color:#e5e7eb;
    }
    [data-theme="dark"] .card{
      background:radial-gradient(circle at top,#020617,#020617 70%);
      border-color:#1f2937;
    }
    [data-theme="dark"] .range-input input{
      background:#020617;
      color:#e5e7eb;
      border-color:#1f2937;
    }

    @media (max-width:768px){
      main{padding:1.6rem .9rem 2.2rem}
      .controls{flex-direction:column;align-items:flex-start}
      .inline-controls{justify-content:flex-start}
      .preview-item{flex:0 0 140px}
      .preview-item img{height:170px}
    }
    /* ===================== 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;
  }
}
/* ============= تبويبات المحتوى (حول الأداة / الاستخدام / 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; /* موبايل: الهيدر أعلى شوي */
  }
}