: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;
  }
  [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;
  }

  @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;
    }
  }

  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
  }

  .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);}

  .actions{
    margin-top:1rem;
    display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;
  }
  .download{
    margin-top:1.2rem;
    text-align:center;
    display:none;
  }
  .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;
  }
  [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;
  }

  /* ======== محتوى الأداة الغني (تبويبات) ======== */
  .tool-info{
    margin-top:1.8rem;
    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;
    font-family:inherit;
    color:#0f172a;
  }
  .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 {
  scroll-margin-top: 120px !important;
}

/* للهاتف المحمول */
@media (max-width: 768px){
  .tool-tab-panel {
    scroll-margin-top: 200px !important;
  }
}

  .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:radial-gradient(circle at top,#020617,#020617 70%);
    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){
    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}
  }