: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;color:color:var(--muted);35rem auto 1.7remfont-size:.96rem;line-height:1.8;}
    .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)
    }

    /* في البداية فقط الدروبزون */
    .tool-box:not(.has-file) .controls,
    .tool-box:not(.has-file) .sign-box,
    .tool-box:not(.has-file) #previewBar,
    .tool-box:not(.has-file) .actions,
    .tool-box:not(.has-file) #downloadBox,
    .tool-box:not(.has-file) #suggestBox {
      display:none;
    }

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

    .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}
    .btn.sm{padding:.45rem .8rem;font-size:.8rem;border-radius:.7rem}

    .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: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{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)}

    /* صندوق التوقيع */
    .sign-box{
      margin-top:1rem;
      padding:1rem 1.2rem;
      border-radius:var(--radius-lg);
      border:1px dashed rgba(15,23,42,.12);
      background:linear-gradient(135deg,rgba(6,182,212,.04),rgba(147,51,234,.03));
    }
    .sign-header{
      display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.6rem;
    }
    .sign-header h3{margin:0;font-size:1rem;font-weight:800;color:var(--brand-dark);}
    .sign-size{display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--muted);}
    .sign-size input[type="range"]{width:160px;}
    .sign-body{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;}
    .sign-left{flex:1 1 260px;min-width:260px;}
    .sign-right{flex:1 1 180px;min-width:180px;}

    .sign-tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.6rem;}
    .sign-tab{
      border:none;border-radius:999px;padding:.4rem .9rem;font-size:.85rem;
      cursor:pointer;background:#e2e8f0;color:#0f172a;font-weight:700;
    }
    .sign-tab.active{
      background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff;
    }

    #sigCanvas{
      width:100%;max-width:100%;
      border-radius:.75rem;border:1px solid var(--border);
      background:rgba(15,23,42,.02);
      touch-action:none;
    }
    .sig-actions{margin-top:.4rem;display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;}

    .sign-panel{display:none;font-size:.85rem;color:var(--muted);margin-top:.4rem;}
    .sign-panel.active{display:block;}
    .camera-wrap{display:flex;flex-direction:column;gap:.4rem;}
    #sigVideo{
      width:100%;max-width:100%;
      border-radius:.75rem;border:1px solid var(--border);
      background:#000;
    }

    .sign-preview{font-size:.85rem;color:var(--muted);margin-top:.3rem;}
    .sign-preview-box{margin-top:.35rem;display:flex;align-items:center;gap:.6rem;}
    #sigPreviewImg{
      max-width:160px;max-height:80px;
      border-radius:.5rem;border:1px dashed rgba(148,163,184,.8);
      padding:.25rem;background:#f8fafc;display:none;
    }

    
    .sig-opacity-row{
      margin-top:.5rem;
      display:flex;
      align-items:center;
      gap:.5rem;
      font-size:.85rem;
      color:var(--muted);
    }
    .sig-opacity-row label{
      font-weight:700;
      color:var(--text);
      white-space:nowrap;
    }
    .sig-opacity-row input[type="range"]{
      flex:1;
    }

.sig-text-fields{
      margin-top:.5rem;
      font-size:.85rem;
      color:var(--muted);
      display:flex;
      flex-direction:column;
      gap:.45rem;
    }
    .sig-text-fields label{
      display:block;
      margin-bottom:.15rem;
      font-weight:700;
      color:var(--text);
    }
    .sig-text-fields input[type="text"]{
      width:100%;
      padding:.5rem .7rem;
      border-radius:.6rem;
      border:1px solid var(--border);
      font-family:"Cairo",sans-serif;
    }
    .sig-text-row{
      display:grid;
      grid-template-columns:1.4fr 1.2fr 1.1fr;
      gap:.6rem;
      align-items:center;
    }
    .sig-text-row select,
    .sig-text-row input[type="range"],
    .sig-text-row input[type="color"]{
      width:100%;
    }
    .sig-text-row input[type="color"]{
      padding:0;
      height:2.3rem;
      border-radius:.6rem;
      border:1px solid var(--border);
      background:#fff;
    }

    /* لون للرسم */
    .sig-draw-row{
      margin-top:.35rem;
      display:flex;
      align-items:center;
      gap:.5rem;
      font-size:.85rem;
    }
    .sig-draw-row label{
      font-weight:700;
      color:var(--text);
    }
    .sig-draw-row input[type="color"]{
      width:2.4rem;
      height:2.4rem;
      border-radius:.6rem;
      border:1px solid var(--border);
      padding:0;
      background:#fff;
    }

    /* معاينة موضع التوقيع */
    .position-preview-box{
      margin-top:1rem;
      border-radius:.75rem;
      border:1px solid var(--border);
      background:#02061705;
      padding:.6rem;
      display:none;
    }
    .position-preview-title{
      font-size:.83rem;
      font-weight:700;
      color:var(--muted);
      margin-bottom:.35rem;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:.4rem;
    }
    .position-controls{
      display:flex;
      gap:.35rem;
      align-items:center;
    }
    .position-controls select{
      min-width:140px;
      padding:.25rem .5rem;
      border-radius:.5rem;
      border:1px solid var(--border);
      font-size:.8rem;
    }
    .rotate-control{
      display:flex;
      align-items:center;
      gap:.35rem;
      font-size:.8rem;
    }
    .rotate-control label{
      white-space:nowrap;
      color:var(--muted);
    }
    .rotate-control input[type="range"]{
      width:120px;
    }

    .position-preview-inner{
      position:relative;
      width:100%;
      padding-top:140%;
      border-radius:.6rem;
      overflow:hidden;
      background:#e2e8f0;
    }
    .position-preview-inner img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
    }
    .pos-preview-sig{
      position:absolute;
      font-weight:800;
      color:#0f172a;
      pointer-events:auto;
      font-size:14px;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:.2rem .45rem;
      border-radius:.45rem;
      background:linear-gradient(135deg,rgba(248,250,252,.9),rgba(241,245,249,.95));
      box-shadow:0 4px 10px -4px rgba(15,23,42,.6);
      cursor:grab;
      min-width:70px;
      min-height:32px;
      border:1px dashed rgba(15,23,42,.35);
    }
    .pos-preview-sig:active{cursor:grabbing;}
    #posSigImg {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: none;
  object-fit: contain;
}

    #posSigText{white-space:nowrap;}
    .pos-resize-handle{
      position:absolute;
      width:14px;
      height:14px;
      border-radius:4px;
      border:2px solid rgba(15,23,42,.7);
      background:#f1f5f9;
      box-shadow:0 0 0 1px rgba(15,23,42,.18);
    }
    .pos-resize-handle.corner-tl{top:-7px;left:-7px;cursor:nwse-resize;}
    .pos-resize-handle.corner-tr{top:-7px;right:-7px;cursor:nesw-resize;}
    .pos-resize-handle.corner-bl{bottom:-7px;left:-7px;cursor:nesw-resize;}
    .pos-resize-handle.corner-br{bottom:-7px;right:-7px;cursor:nwse-resize;}

    [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}
    [data-theme="dark"] #sigCanvas{background:#020617;}
    [data-theme="dark"] #sigVideo{border-color:#1f2937;}
    [data-theme="dark"] .sign-box{background:linear-gradient(135deg,rgba(15,23,42,.96),rgba(15,23,42,.98));border-color:#1f2937;}
    [data-theme="dark"] #sigPreviewImg{background:#020617;border-color:#1f2937;}
    [data-theme="dark"] .sig-text-fields input[type="text"],
    [data-theme="dark"] .sig-text-row input[type="color"],
    [data-theme="dark"] .sig-draw-row input[type="color"]{
      background:#020617;border-color:#1f2937;color:#e5e7eb;
    }
    [data-theme="dark"] .position-preview-inner{background:#020617;}
    [data-theme="dark"] .pos-preview-sig{
      background:linear-gradient(135deg,rgba(15,23,42,.95),rgba(15,23,42,.98));
      color:#f9fafb;
      box-shadow:0 6px 14px -6px rgba(0,0,0,.9);
      border-color:rgba(148,163,184,.7);
    }
    [data-theme="dark"] .pos-resize-handle{
      background:#020617;
      border-color:rgba(148,163,184,.9);
      box-shadow:0 0 0 1px rgba(15,23,42,1);
    }

    @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}
      .sign-body{flex-direction:column;}
      .sign-right{width:100%;}
      .sig-text-row{
        grid-template-columns:1fr 1fr;
        grid-auto-rows:auto;
      }
    }
    @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}
      .sig-text-row{grid-template-columns:1fr;}
    }
    @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}
    }
    /* ===== 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;
}
/* ============= تبويبات المحتوى ============= */
.tool-info{
  margin-top:1.8rem;
  padding:1.2rem;
  border-radius:1rem;
  background:var(--panel);
  border:1px solid var(--border);
}

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

.tool-tab-button{
  border-radius:999px;
  border:1px solid var(--border);
  background:#f9fafb;
  padding:.45rem 1rem;
  font-size:.85rem;
  font-weight:700;
  cursor:pointer;
  color:var(--text);
  font-family:"Cairo", sans-serif;
}

.tool-tab-button.active{
  background:linear-gradient(135deg,#06b6d4,#0ea5e9);
  color:#022c22;
  border-color:#0ea5e9;
  box-shadow:0 10px 20px -18px rgba(6,182,212,.5);
}

.tool-tab-panel{
  display:none;
  font-size:.92rem;
  line-height:1.85;
}

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

.tool-tab-panel details{
  background:#f1f5f9;
  padding:.55rem .7rem;
  margin-bottom:.55rem;
  border-radius:.7rem;
  border:1px solid var(--border);
}

[data-theme="dark"] .tool-info{
  background:#0f172a;
}

[data-theme="dark"] .tool-tab-button{
  background:#1e293b;
  border-color:#334155;
  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:#1e293b;
  border-color:#334155;
}