.tool-page {
  background: #f5f6fa;
}

.tool-page .site-header {
  background: rgba(255,255,255,.96);
}

.tool-page-main {
  padding-bottom: 90px;
}

.tool-breadcrumb {
  padding: 24px 0 0;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #697489;
  font-size: 10px;
  font-weight: 700;
}

.tool-breadcrumb a {
  color: #7251f5;
}

.tool-detail-hero {
  padding: 54px 0 46px;
}

.tool-detail-grid {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  align-items: center;
  gap: 56px;
}

.tool-detail-copy .section-tag {
  color: #7251f5;
}

.tool-detail-copy h1 {
  max-width: 820px;
  margin: 14px 0 0;
  color: #0d1f38;
  font-size: clamp(44px,6vw,76px);
  line-height: 1.08;
  letter-spacing: -.045em;
}

.tool-detail-copy > p {
  max-width: 760px;
  margin: 22px 0 0;
  color: #5b677b;
  font-size: 16px;
  line-height: 2;
}

.tool-detail-points {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.tool-detail-points span {
  padding: 9px 13px;
  border: 1px solid #dfe3ec;
  border-radius: 999px;
  background: #fff;
  color: #2f3b50;
  font-size: 9px;
  font-weight: 800;
}

.tool-detail-visual {
  min-height: 310px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(145deg,#18162f,#3e258a);
  box-shadow: 0 28px 70px rgba(59,42,128,.2);
}

.tool-detail-visual::before,
.tool-detail-visual::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(201,244,91,.14);
}

.tool-detail-visual::before { width: 250px; height: 250px; inset: -100px auto auto -70px; }
.tool-detail-visual::after { width: 180px; height: 180px; inset: auto -45px -75px auto; }

.tool-detail-icon {
  width: 132px;
  height: 132px;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  border-radius: 34px;
  background: #c9f45b;
  color: #0d1f38;
  font-size: 58px;
  font-weight: 900;
  box-shadow: 16px 16px 0 rgba(114,81,245,.85);
}

.tool-detail-visual b {
  position: absolute;
  inset: auto auto 24px 24px;
  z-index: 1;
  color: #fff;
  font-size: 10px;
}

.tool-workspace {
  padding: 0;
}

.tool-page .tool-workspace .section-head,
.tool-page .video-section > .section-head {
  display: none;
}

.tool-page .tools-section,
.tool-page .video-section {
  padding: 0;
  background: transparent;
}

.tool-page .tool-menu,
.tool-page .video-tool-menu {
  display: none;
}

.tool-page .studio,
.tool-page .video-studio {
  border-color: #d9deea;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(34,42,69,.12);
}

.tool-page .studio-body,
.tool-page .video-body {
  padding: 38px;
}

.tool-page .video-section .video-studio {
  color: #0d1f38;
}

.tool-about-section {
  padding: 76px 0 0;
}

.tool-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.tool-info-card {
  padding: 34px;
  border: 1px solid #dfe3ec;
  border-radius: 20px;
  background: #fff;
}

.tool-info-card h2 {
  margin: 0;
  color: #0d1f38;
  font-size: 27px;
}

.tool-info-card p {
  margin: 14px 0 0;
  color: #5d687b;
  font-size: 12px;
  line-height: 2;
}

.tool-steps {
  margin-top: 22px;
  display: grid;
  gap: 12px;
}

.tool-steps div {
  padding: 14px;
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 12px;
  border-radius: 12px;
  background: #f5f3ff;
}

.tool-steps span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #7251f5;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.tool-steps b {
  color: #26344a;
  font-size: 11px;
}

.tool-page .site-footer {
  margin-top: 0;
}

@media (max-width: 900px) {
  .tool-detail-grid,
  .tool-about-grid { grid-template-columns: 1fr; }
  .tool-detail-visual { min-height: 250px; }
}

@media (max-width: 680px) {
  .tool-detail-hero { padding: 35px 0 32px; }
  .tool-detail-copy h1 { font-size: 44px; }
  .tool-detail-copy > p { font-size: 14px; }
  .tool-detail-visual { min-height: 210px; border-radius: 20px; }
  .tool-detail-icon { width: 105px; height: 105px; border-radius: 28px; font-size: 45px; }
  .tool-page .studio-body,
  .tool-page .video-body { padding: 20px 13px; }
  .tool-info-card { padding: 24px 20px; }
}

/* v22 — premium independent tool pages */
.tool-page{background:radial-gradient(circle at 7% 9%,rgba(114,81,245,.09),transparent 28%),radial-gradient(circle at 93% 18%,rgba(201,244,91,.13),transparent 24%),#f7f8fc}
.tool-page-main{overflow:hidden}
.tool-breadcrumb{font-size:12px;padding-top:22px}.tool-breadcrumb b{color:#29354a}.tool-breadcrumb span{color:#a7afbd}
.tool-detail-hero{padding:26px 0 34px}
.tool-detail-grid{position:relative;padding:clamp(28px,4vw,54px);border:1px solid rgba(216,220,232,.9);border-radius:32px;background:rgba(255,255,255,.88);box-shadow:0 24px 65px rgba(31,40,71,.09);backdrop-filter:blur(12px)}
.tool-detail-grid:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(120deg,rgba(114,81,245,.05),transparent 38%,rgba(201,244,91,.07))}
.tool-detail-copy,.tool-detail-visual{position:relative;z-index:1}.tool-detail-copy .section-tag{display:inline-flex;padding:8px 12px;border-radius:999px;background:#f0ecff;font-size:11px;font-weight:900;letter-spacing:.04em}.tool-detail-copy h1{font-size:clamp(40px,5.2vw,67px)}.tool-detail-copy>p{font-size:17px;line-height:1.9}.tool-detail-points span{padding:10px 14px;font-size:11px;box-shadow:0 5px 14px rgba(28,39,67,.04)}
.tool-hero-actions{margin-top:27px;display:flex;flex-wrap:wrap;gap:10px}.tool-hero-actions a{min-height:50px;padding:0 20px;display:flex;align-items:center;justify-content:center;gap:12px;border:1px solid #d9ddea;border-radius:12px;background:#fff;color:#27364d;text-decoration:none;font-size:13px;font-weight:900}.tool-hero-actions a:first-child{border-color:#7251f5;background:#171632;color:#fff;box-shadow:0 12px 25px rgba(23,22,50,.2)}.tool-hero-actions a:hover{transform:translateY(-2px)}
.tool-detail-visual{min-height:330px}.tool-detail-icon{transform:rotate(-4deg);transition:.3s transform}.tool-detail-grid:hover .tool-detail-icon{transform:rotate(0) scale(1.04)}
.tool-assurance-strip{margin-bottom:18px;padding:14px 18px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border:1px solid #e0e3ec;border-radius:18px;background:#fff;box-shadow:0 12px 30px rgba(33,43,72,.06)}.tool-assurance-strip>div{display:flex;align-items:center;gap:11px;padding:7px 10px}.tool-assurance-strip>div+div{border-inline-start:1px solid #e7e9ef}.tool-assurance-strip>div>span{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:11px;background:#f0ecff;color:#7152e8;font-weight:900}.tool-assurance-strip p{margin:0}.tool-assurance-strip b,.tool-assurance-strip small{display:block}.tool-assurance-strip b{color:#26344a;font-size:12px}.tool-assurance-strip small{margin-top:2px;color:#778195;font-size:9px;font-weight:700}
.tool-page .studio,.tool-page .video-studio{border-radius:26px;box-shadow:0 30px 75px rgba(30,39,68,.13)}
.tool-about-section{padding-top:82px}.tool-info-card{position:relative;overflow:hidden;border-color:#e0e3ec;border-radius:24px;box-shadow:0 14px 35px rgba(31,40,70,.06)}.tool-info-card:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(#7251f5,#c9f45b)}[dir="rtl"] .tool-info-card:before{inset:0 0 0 auto}.tool-info-card h2{font-size:30px}.tool-info-card p{font-size:14px}.tool-steps div{padding:16px;background:linear-gradient(105deg,#f4f1ff,#fafbff)}.tool-steps b{font-size:13px}
.tool-related-section{padding:72px 0 92px}.tool-related-head{margin-bottom:22px;display:flex;align-items:end;justify-content:space-between;gap:20px}.tool-related-head span{color:#7251f5;font-size:10px;font-weight:900;letter-spacing:.12em}.tool-related-head h2{margin:5px 0 0;color:#15243a;font-size:clamp(28px,3.5vw,42px)}.tool-related-head>a{color:#6045ce;font-size:12px;font-weight:900;text-decoration:none}.tool-related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.tool-related-grid>a{min-height:118px;padding:18px;display:grid;grid-template-columns:58px 1fr auto;align-items:center;gap:15px;border:1px solid #e0e3ec;border-radius:18px;background:#fff;color:inherit;text-decoration:none;box-shadow:0 12px 30px rgba(32,42,72,.05);transition:.2s transform,.2s box-shadow,.2s border-color}.tool-related-grid>a:hover{transform:translateY(-4px);border-color:#bdb1ef;box-shadow:0 19px 42px rgba(56,44,112,.11)}.tool-related-grid>a>span{width:58px;height:58px;display:grid;place-items:center;border-radius:17px;background:linear-gradient(145deg,#eee9ff,#f8f7ff);color:#684be0;font-size:25px;font-weight:900}.tool-related-grid b,.tool-related-grid small{display:block}.tool-related-grid b{color:#1d2d44;font-size:15px}.tool-related-grid small{margin-top:5px;color:#727d8f;font-size:10px;line-height:1.6}.tool-related-grid>a>i{color:#7251f5;font-size:20px;font-style:normal}
@media(max-width:900px){.tool-detail-grid{gap:30px}.tool-assurance-strip{grid-template-columns:1fr}.tool-assurance-strip>div+div{border-inline-start:0;border-top:1px solid #e7e9ef}.tool-related-grid{grid-template-columns:1fr}}
@media(max-width:680px){.tool-detail-grid{padding:24px 18px;border-radius:22px}.tool-detail-copy h1{font-size:38px}.tool-detail-copy>p{font-size:15px}.tool-hero-actions a{width:100%}.tool-assurance-strip{padding:10px}.tool-related-head{align-items:start;flex-direction:column}.tool-related-grid>a{grid-template-columns:50px 1fr auto;padding:14px}.tool-related-grid>a>span{width:50px;height:50px}.tool-related-grid small{font-size:9px}}

/* v23 — premium workspace redesign */
.tool-page .studio,
.tool-page .video-studio{
  position:relative;
  overflow:visible;
  border:1px solid rgba(114,81,245,.16);
  border-radius:30px;
  background:rgba(255,255,255,.92);
  box-shadow:0 34px 90px rgba(35,31,82,.13),0 2px 0 rgba(255,255,255,.9) inset;
}
.tool-page .studio::before,
.tool-page .video-studio::before{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:-1;
  border-radius:31px;
  background:linear-gradient(135deg,rgba(114,81,245,.24),rgba(255,255,255,0) 36%,rgba(201,244,91,.24));
  filter:blur(16px);
  opacity:.55;
  pointer-events:none;
}
.tool-page .studio-body,
.tool-page .video-body{
  padding:clamp(26px,3.4vw,44px);
}
.tool-page .studio-title,
.tool-page .video-studio-title{
  position:relative;
  align-items:center;
  margin-bottom:26px;
  padding-bottom:22px;
  border-bottom:1px solid #ececf5;
}
.tool-page .studio-title::after,
.tool-page .video-studio-title::after{
  content:"";
  position:absolute;
  inset:auto 0 -1px auto;
  width:110px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,#7251f5,#9f7cff,#c9f45b);
}
.tool-page .studio-title small,
.tool-page .video-studio-title small{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#7251f5!important;
  font-size:11px!important;
  font-weight:900!important;
}
.tool-page .studio-title small::before,
.tool-page .video-studio-title small::before{
  content:"✦";
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#f0ecff;
  color:#7251f5;
  font-size:11px;
}
.tool-page .studio-title h3,
.tool-page .video-studio-title h3{
  margin-top:8px!important;
  color:#101d33;
  font-size:clamp(28px,3.1vw,42px)!important;
  line-height:1.2;
  letter-spacing:-.025em;
}
.tool-page .studio-title p,
.tool-page .video-studio-title p{
  max-width:720px;
  margin-top:8px!important;
  color:#7b8496!important;
  font-size:13px!important;
  line-height:1.75;
}
.tool-page .free-chip{
  min-width:100px;
  min-height:38px;
  padding:0 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid rgba(137,191,37,.34);
  border-radius:999px;
  background:linear-gradient(180deg,#d8ff78,#baf14c);
  color:#203015;
  font-size:11px!important;
  font-weight:950;
  box-shadow:0 8px 20px rgba(134,190,43,.22);
}
.tool-page .free-chip::before{content:"✓";font-size:10px}

.tool-page .dropzone,
.tool-page .video-dropzone{
  position:relative;
  min-height:390px;
  padding:38px 22px;
  overflow:hidden;
  border:1.5px dashed #c9c7ea;
  border-radius:24px;
  background:
    radial-gradient(circle at 50% 35%,rgba(114,81,245,.08),transparent 25%),
    linear-gradient(180deg,#fbfbff 0%,#f8f9fd 100%);
  transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease,background .22s ease;
}
.tool-page .dropzone::before,
.tool-page .video-dropzone::before{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(255,255,255,.9);
  border-radius:18px;
  pointer-events:none;
}
.tool-page .dropzone:hover,
.tool-page .video-dropzone:hover,
.tool-page .dropzone.dragging,
.tool-page .video-dropzone.dragging{
  border-color:#8f75f7;
  transform:translateY(-2px);
  background:linear-gradient(180deg,#faf8ff,#f5f3ff);
  box-shadow:0 22px 52px rgba(73,55,150,.12);
}
.tool-page .drop-content,
.tool-page .video-drop-content{
  position:relative;
  z-index:1;
  max-width:560px;
}
.tool-page .upload-icon,
.tool-page .video-upload-icon{
  width:82px;
  height:82px;
  border-radius:24px;
  background:linear-gradient(145deg,#6b44ef,#7e57f6);
  color:#fff;
  font-size:40px;
  box-shadow:0 14px 30px rgba(96,67,221,.27),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .25s ease,box-shadow .25s ease;
}
.tool-page .dropzone:hover .upload-icon,
.tool-page .video-dropzone:hover .video-upload-icon{
  transform:translateY(-4px) rotate(3deg);
  box-shadow:0 20px 36px rgba(96,67,221,.34),inset 0 1px 0 rgba(255,255,255,.35);
}
.tool-page .drop-content strong,
.tool-page .video-drop-content strong{
  margin-top:25px!important;
  color:#17243a;
  font-size:20px!important;
  line-height:1.55;
}
.tool-page .drop-content small,
.tool-page .video-drop-content small{
  max-width:430px;
  margin-top:9px!important;
  color:#8a91a0!important;
  font-size:12px!important;
  line-height:1.7;
}
.tool-page .drop-content b,
.tool-page .video-drop-content b{
  min-height:46px;
  margin-top:22px!important;
  padding:0 22px!important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:linear-gradient(135deg,#6b44ef,#7b55f5)!important;
  color:#fff;
  font-size:12px!important;
  font-weight:900;
  box-shadow:0 10px 24px rgba(106,69,231,.22);
}

.tool-page .editor,
.tool-page .video-editor{
  gap:22px;
}
.tool-page .preview-panel,
.tool-page .controls-panel,
.tool-page .video-preview-panel,
.tool-page .video-controls-panel{
  overflow:hidden;
  border:1px solid #e1e4ed;
  border-radius:20px;
  background:#fff;
  box-shadow:0 12px 30px rgba(35,44,72,.05);
}
.tool-page .canvas-stage,
.tool-page .video-canvas-stage{
  border-radius:18px 18px 0 0;
}
.tool-page .image-stats{
  background:#fbfcff;
}
.tool-page .image-stats div{
  padding:16px 10px;
}
.tool-page .image-stats span{
  color:#8991a1;
  font-size:10px;
  font-weight:800;
}
.tool-page .image-stats strong{
  margin-top:6px;
  color:#17243a;
  font-size:12px;
}
.tool-page .controls-panel,
.tool-page .video-controls-panel{
  padding:24px;
}
.tool-page .file-row,
.tool-page .video-file-row{
  padding:14px;
  border:1px solid #ececf4;
  border-radius:14px;
  background:#fafaff;
}
.tool-page .control-list,
.tool-page .video-control-list{
  gap:18px;
}
.tool-page .control-list input:not([type="checkbox"]):not([type="range"]),
.tool-page .control-list select,
.tool-page .control-list textarea,
.tool-page .video-control-list input:not([type="checkbox"]):not([type="range"]),
.tool-page .video-control-list select,
.tool-page .video-control-list textarea{
  border:1px solid #dfe2eb!important;
  border-radius:12px!important;
  background:#fbfcff!important;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.tool-page .control-list input:focus,
.tool-page .control-list select:focus,
.tool-page .control-list textarea:focus,
.tool-page .video-control-list input:focus,
.tool-page .video-control-list select:focus,
.tool-page .video-control-list textarea:focus{
  outline:none;
  border-color:#947bf5!important;
  background:#fff!important;
  box-shadow:0 0 0 4px rgba(114,81,245,.10)!important;
}
.tool-page .process-btn,
.tool-page .video-process-btn,
.tool-page .download-btn,
.tool-page .video-download-btn{
  min-height:56px;
  border-radius:14px!important;
  border:0!important;
  box-shadow:0 12px 26px rgba(24,29,61,.14);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.tool-page .process-btn,
.tool-page .video-process-btn{
  background:linear-gradient(135deg,#171632,#25214b)!important;
}
.tool-page .download-btn,
.tool-page .video-download-btn{
  background:linear-gradient(135deg,#c9f45b,#b2ea39)!important;
}
.tool-page .process-btn:hover,
.tool-page .video-process-btn:hover,
.tool-page .download-btn:hover,
.tool-page .video-download-btn:hover{
  transform:translateY(-2px);
  filter:saturate(1.06);
  box-shadow:0 16px 32px rgba(24,29,61,.18);
}
.tool-page .privacy-line,
.tool-page .video-privacy-line{
  margin-top:16px!important;
  padding:11px 12px;
  border-radius:10px;
  background:#f7f8fc;
  color:#758095!important;
}
.tool-page .tool-message.visible,
.tool-page .video-message.visible{
  border:1px solid #ffd7cc;
  border-radius:12px;
  background:#fff6f3;
  font-size:12px!important;
}

@media(max-width:680px){
  .tool-page .studio,
  .tool-page .video-studio{border-radius:22px}
  .tool-page .studio-body,
  .tool-page .video-body{padding:22px 14px}
  .tool-page .studio-title,
  .tool-page .video-studio-title{align-items:flex-start;gap:14px}
  .tool-page .free-chip{min-width:auto;min-height:34px;padding:0 12px}
  .tool-page .dropzone,
  .tool-page .video-dropzone{min-height:320px;padding:28px 14px;border-radius:18px}
  .tool-page .upload-icon,
  .tool-page .video-upload-icon{width:70px;height:70px;border-radius:20px;font-size:34px}
  .tool-page .drop-content strong,
  .tool-page .video-drop-content strong{font-size:17px!important}
  .tool-page .controls-panel,
  .tool-page .video-controls-panel{padding:17px 14px}
}

/* ===== NUJIZ WATERMARK MODE UI ===== */

.watermark-mode-box{
  margin:18px 0;
  padding:16px;
  background:#f8f7ff;
  border:1px solid #ddd7ff;
  border-radius:16px;
}

.watermark-mode-title{
  font-weight:800;
  font-size:15px;
  margin-bottom:12px;
  color:#111827;
}

.watermark-mode-options{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
}

.watermark-mode-card{
  min-height:82px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 6px;
  border:1px solid #ddd7f1;
  border-radius:13px;
  background:#fff;
  cursor:pointer;
  text-align:center;
  font-weight:700;
  font-size:13px;
  transition:.2s ease;
}

.watermark-mode-card:hover{
  border-color:#7547f5;
  transform:translateY(-1px);
}

.watermark-mode-card.active{
  border:2px solid #7547f5;
  background:#f2edff;
  box-shadow:0 5px 16px rgba(117,71,245,.12);
}

.watermark-mode-card input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.wm-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:9px;
  background:#ede7ff;
  color:#6d3ff2;
  font-size:19px;
}

.watermark-extra-options,
.watermark-grid-options{
  margin-top:12px;
  padding:12px;
  border-radius:12px;
  background:#fff;
  border:1px solid #e5e1f5;
}

.watermark-grid-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.watermark-extra-options[hidden],
.watermark-grid-options[hidden]{
  display:none !important;
}

.watermark-extra-options label,
.watermark-grid-options label{
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:13px;
  font-weight:700;
}

.watermark-extra-options input,
.watermark-grid-options input{
  width:100%;
  min-height:42px;
  padding:8px 10px;
  border:1px solid #ddd7f1;
  border-radius:10px;
  background:#fff;
  font:inherit;
}

@media(max-width:600px){
  .watermark-mode-options{
    grid-template-columns:1fr;
  }

  .watermark-mode-card{
    min-height:60px;
    flex-direction:row;
  }

  .watermark-grid-options{
    grid-template-columns:1fr;
  }
}

/* ===== IMAGE TOOLS START BUTTON WHITE TEXT ===== */

body:has(#image-tools) .process-btn,
body:has(#image-tools) .process-btn *,
body:has(#image-tools) .btn-primary,
body:has(#image-tools) .btn-primary *,
body:has(#image-tools) #processButton,
body:has(#image-tools) #processButton *,
body:has(#image-tools) .tool-actions .btn-primary,
body:has(#image-tools) .tool-actions .btn-primary * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* منع أي حالة disabled/hover من تحويل النص إلى داكن */
body:has(#image-tools) .process-btn:disabled,
body:has(#image-tools) .process-btn:disabled *,
body:has(#image-tools) #processButton:disabled,
body:has(#image-tools) #processButton:disabled * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* ===== VIDEO + PDF TOOLS START BUTTON WHITE TEXT ===== */

/* VIDEO */
body:has([data-video-studio]) .process-btn,
body:has([data-video-studio]) .process-btn *,
body:has([data-video-studio]) #processButton,
body:has([data-video-studio]) #processButton *,
body:has([data-video-studio]) .btn-primary,
body:has([data-video-studio]) .btn-primary *,
body:has([data-video-studio]) .video-process-btn,
body:has([data-video-studio]) .video-process-btn * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* PDF */
body:has(.pdf-drop) .process-btn,
body:has(.pdf-drop) .process-btn *,
body:has(.pdf-drop) #processButton,
body:has(.pdf-drop) #processButton *,
body:has(.pdf-drop) .btn-primary,
body:has(.pdf-drop) .btn-primary *,
body:has(.pdf-drop) .pdf-process-btn,
body:has(.pdf-drop) .pdf-process-btn *,
body:has(.pdf-file-input) .process-btn,
body:has(.pdf-file-input) .process-btn *,
body:has(.pdf-file-input) #processButton,
body:has(.pdf-file-input) #processButton * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Disabled / Hover */
body:has([data-video-studio]) .process-btn:disabled,
body:has([data-video-studio]) .process-btn:disabled *,
body:has([data-video-studio]) #processButton:disabled,
body:has([data-video-studio]) #processButton:disabled *,
body:has(.pdf-drop) .process-btn:disabled,
body:has(.pdf-drop) .process-btn:disabled *,
body:has(.pdf-drop) #processButton:disabled,
body:has(.pdf-drop) #processButton:disabled *,
body:has(.pdf-file-input) .process-btn:disabled,
body:has(.pdf-file-input) .process-btn:disabled *,
body:has(.pdf-file-input) #processButton:disabled,
body:has(.pdf-file-input) #processButton:disabled * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* ===== PDF START BUTTON BLACK TEXT ===== */

/* PDF buttons — override previous white rule */
body:has(.pdf-drop) .process-btn,
body:has(.pdf-drop) .process-btn *,
body:has(.pdf-drop) #processButton,
body:has(.pdf-drop) #processButton *,
body:has(.pdf-drop) .btn-primary,
body:has(.pdf-drop) .btn-primary *,
body:has(.pdf-drop) .pdf-process-btn,
body:has(.pdf-drop) .pdf-process-btn *,

body:has(.pdf-file-input) .process-btn,
body:has(.pdf-file-input) .process-btn *,
body:has(.pdf-file-input) #processButton,
body:has(.pdf-file-input) #processButton *,
body:has(.pdf-file-input) .btn-primary,
body:has(.pdf-file-input) .btn-primary * {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* Hover + Disabled */
body:has(.pdf-drop) .process-btn:hover,
body:has(.pdf-drop) .process-btn:hover *,
body:has(.pdf-drop) .process-btn:disabled,
body:has(.pdf-drop) .process-btn:disabled *,
body:has(.pdf-drop) #processButton:hover,
body:has(.pdf-drop) #processButton:hover *,
body:has(.pdf-drop) #processButton:disabled,
body:has(.pdf-drop) #processButton:disabled *,

body:has(.pdf-file-input) .process-btn:hover,
body:has(.pdf-file-input) .process-btn:hover *,
body:has(.pdf-file-input) .process-btn:disabled,
body:has(.pdf-file-input) .process-btn:disabled *,
body:has(.pdf-file-input) #processButton:hover,
body:has(.pdf-file-input) #processButton:hover *,
body:has(.pdf-file-input) #processButton:disabled,
body:has(.pdf-file-input) #processButton:disabled * {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}


/* ===== IMAGE TOOLS HERO CTA WHITE TEXT FINAL ===== */

/* زر استخدم الأداة الآن في صفحات أدوات الصور */
body:has(#image-tools) .tool-hero-actions a:first-child,
body:has(#image-tools) .tool-hero-actions a:first-child *,
body:has([data-image-studio]) .tool-hero-actions a:first-child,
body:has([data-image-studio]) .tool-hero-actions a:first-child *,
body:has(.studio[data-image-studio]) .tool-hero-actions a:first-child,
body:has(.studio[data-image-studio]) .tool-hero-actions a:first-child * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* hover / focus / visited */
body:has(#image-tools) .tool-hero-actions a:first-child:hover,
body:has(#image-tools) .tool-hero-actions a:first-child:focus,
body:has(#image-tools) .tool-hero-actions a:first-child:visited,
body:has(#image-tools) .tool-hero-actions a:first-child:hover *,
body:has(#image-tools) .tool-hero-actions a:first-child:focus *,
body:has(#image-tools) .tool-hero-actions a:first-child:visited * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* ===== VIDEO TOOLS HERO CTA WHITE TEXT FINAL ===== */

body:has([data-video-studio]) .tool-hero-actions a:first-child,
body:has([data-video-studio]) .tool-hero-actions a:first-child *,
body:has(.video-ai-wrap) .tool-hero-actions a:first-child,
body:has(.video-ai-wrap) .tool-hero-actions a:first-child *,
body:has(.video-ai-hero) .tool-hero-actions a:first-child,
body:has(.video-ai-hero) .tool-hero-actions a:first-child *,
body:has(.video-info) .tool-hero-actions a:first-child,
body:has(.video-info) .tool-hero-actions a:first-child * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* hover / focus / visited */
body:has([data-video-studio]) .tool-hero-actions a:first-child:hover,
body:has([data-video-studio]) .tool-hero-actions a:first-child:focus,
body:has([data-video-studio]) .tool-hero-actions a:first-child:visited,
body:has([data-video-studio]) .tool-hero-actions a:first-child:hover *,
body:has([data-video-studio]) .tool-hero-actions a:first-child:focus *,
body:has([data-video-studio]) .tool-hero-actions a:first-child:visited *,
body:has(.video-ai-wrap) .tool-hero-actions a:first-child:hover,
body:has(.video-ai-wrap) .tool-hero-actions a:first-child:focus,
body:has(.video-ai-wrap) .tool-hero-actions a:first-child:visited,
body:has(.video-ai-wrap) .tool-hero-actions a:first-child:hover *,
body:has(.video-ai-wrap) .tool-hero-actions a:first-child:focus *,
body:has(.video-ai-wrap) .tool-hero-actions a:first-child:visited * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* ===== SMART IMAGE ENHANCEMENT V3 UI ===== */

.smart-presets{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin:12px 0;
}

.smart-preset{
  border:1px solid #ddd7f3;
  background:#fff;
  border-radius:11px;
  padding:9px 8px;
  font-weight:700;
  cursor:pointer;
  transition:.2s ease;
}

.smart-preset:hover{
  border-color:#7048f5;
}

.smart-preset.active{
  background:#f0ebff;
  border-color:#7048f5;
  color:#5d38d8;
}

.before-after-wrap{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  background:#eee;
  user-select:none;
}

.before-after-wrap canvas{
  display:block;
  width:100%;
  height:auto;
}

.before-after-after{
  position:absolute;
  inset:0;
  overflow:hidden;
  width:50%;
}

.before-after-after canvas{
  position:absolute;
  inset:0;
  width:100%;
  max-width:none;
}

.before-after-line{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:2px;
  background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.15);
  transform:translateX(-1px);
  pointer-events:none;
}

.before-after-handle{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:42px;
  height:42px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 5px 18px rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  pointer-events:none;
}

.before-after-slider{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:ew-resize;
}

.before-after-label{
  position:absolute;
  top:10px;
  padding:5px 8px;
  border-radius:8px;
  background:rgba(0,0,0,.58);
  color:#fff;
  font-size:12px;
  font-weight:700;
  z-index:5;
}

.before-after-label.before{
  left:10px;
}

.before-after-label.after{
  right:10px;
}

@media(max-width:650px){
  .smart-presets{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* ===== SMART IMAGE BEFORE/AFTER V4 ===== */

.before-after-wrap{
    position:relative !important;
    width:100%;
    overflow:hidden !important;
    border-radius:14px;
}

/* الصورة المحسنة الحقيقية */
.before-after-wrap > #previewCanvas{
    display:block !important;
    position:relative !important;
    width:100% !important;
    height:auto !important;
    z-index:1;
}

/* الصورة الأصلية فوق النتيجة */
.before-after-before{
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:50%;
    overflow:hidden;
    z-index:2;
    pointer-events:none;
}

.before-after-before canvas{
    position:absolute;
    left:0;
    top:0;
    height:100%;
    max-width:none !important;
    object-fit:contain;
}

.before-after-line{
    position:absolute;
    left:50%;
    top:0;
    bottom:0;
    width:2px;
    background:#ffffff;
    box-shadow:0 0 0 1px rgba(0,0,0,.18);
    z-index:4;
    pointer-events:none;
}

.before-after-handle{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:42px;
    height:42px;
    border-radius:50%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 6px 20px rgba(0,0,0,.22);
    z-index:5;
    pointer-events:none;
    color:#17213b;
}

.before-after-slider{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    opacity:0 !important;
    cursor:ew-resize;
    z-index:6;
}


/* ===== BEFORE / AFTER PERFECT ALIGNMENT V5 ===== */

.before-after-wrap{
    position:relative !important;
    overflow:hidden !important;
    width:100% !important;
}

/* الصورة المحسنة */
.before-after-wrap > #previewCanvas{
    display:block !important;
    width:100% !important;
    height:auto !important;
    position:relative !important;
    z-index:1 !important;
}

/*
 * صورة "قبل" تبقى بنفس مساحة الصورة المحسنة بالكامل.
 * لا نصغر عرضها عند تحريك السلايدر.
 */
.before-after-before{
    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    overflow:hidden !important;

    clip-path:inset(0 50% 0 0);

    z-index:2 !important;
    pointer-events:none !important;
}

.before-after-before canvas{
    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    max-width:none !important;
    max-height:none !important;

    object-fit:fill !important;

    margin:0 !important;
    padding:0 !important;

    transform:none !important;
}

/* الخط الفاصل */
.before-after-line{
    position:absolute !important;
    top:0 !important;
    bottom:0 !important;
    left:50%;

    width:2px !important;
    transform:translateX(-1px);

    background:#fff !important;
    box-shadow:0 0 0 1px rgba(0,0,0,.18);

    z-index:4 !important;
}

/* مقبض السحب */
.before-after-handle{
    position:absolute !important;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%) !important;

    z-index:5 !important;
}

/* منطقة السحب */
.before-after-slider{
    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    opacity:0 !important;
    cursor:ew-resize !important;

    z-index:6 !important;
}


/* ===== SMART BACKGROUND REMOVAL V2 UI ===== */

.bg-smart-box{
  margin:12px 0 16px;
  padding:14px;
  border:1px solid #ddd8f6;
  border-radius:14px;
  background:#faf9ff;
}

.bg-smart-title{
  display:block;
  margin-bottom:8px;
  font-weight:800;
  color:#17213b;
}

.bg-smart-box select{
  width:100%;
  min-height:44px;
  border:1px solid #ddd7ef;
  border-radius:10px;
  padding:8px 10px;
  background:#fff;
  font:inherit;
}

.bg-smart-help{
  margin:9px 0 0;
  font-size:12px;
  line-height:1.7;
  color:#6f7588;
}

.bg-ai-precision{
  margin:12px 0;
  padding:12px;
  background:#faf9ff;
  border:1px solid #ddd8f6;
  border-radius:12px;
}

.bg-ai-precision label{
  display:block;
  margin-bottom:7px;
  font-weight:800;
}

.bg-ai-precision select{
  width:100%;
  min-height:43px;
  border:1px solid #ddd7ef;
  border-radius:9px;
  background:#fff;
  padding:8px 10px;
  font:inherit;
}

/* ===== NUJIZ PALETTE ACTION BUTTONS ===== */

#nujizPaletteActions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    width:100%;
    margin-top:10px;
}

.nujiz-palette-action{
    min-height:48px;
    border-radius:12px;
    padding:10px 12px;
    border:1px solid #dad4f8;
    cursor:pointer;
    font-family:inherit;
    font-size:13px;
    font-weight:800;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.nujiz-palette-action:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(45,32,100,.10);
}

.nujiz-palette-action.copy{
    background:#ffffff;
    color:#2d2460;
}

.nujiz-palette-action.download{
    background:#baff3c;
    color:#11182b;
}

@media(max-width:600px){

    #nujizPaletteActions{
        grid-template-columns:1fr;
    }
}


/* ===== NUJIZ ADVANCED HIDE IMAGE PART ===== */

#nujizHidePro{
    margin:14px 0;
    padding:14px;
    border:1px solid #ddd7ff;
    border-radius:14px;
    background:#fbfaff;
}

.nujiz-hide-title{
    font-size:14px;
    font-weight:900;
    color:#171936;
    margin-bottom:6px;
}

.nujiz-hide-help{
    font-size:11px;
    line-height:1.8;
    color:#70758a;
    margin-bottom:13px;
}

.nujiz-hide-label{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:12px;
    font-weight:800;
    color:#292d48;
    margin:10px 0 6px;
}

.nujiz-hide-select{
    width:100%;
    min-height:43px;
    border:1px solid #dddff0;
    border-radius:10px;
    background:#fff;
    padding:8px 12px;
    font-family:inherit;
    font-weight:700;
}

.nujiz-hide-range{
    width:100%;
    accent-color:#704cff;
}

.nujiz-region-count{
    margin:12px 0;
    padding:9px;
    border-radius:9px;
    background:#f1edff;
    color:#55428c;
    text-align:center;
    font-size:11px;
    font-weight:800;
}

.nujiz-hide-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
}

.nujiz-hide-actions button{
    min-height:39px;
    border:1px solid #ded9f6;
    border-radius:9px;
    background:#fff;
    color:#29284b;
    font-family:inherit;
    font-size:11px;
    font-weight:800;
    cursor:pointer;
}

.nujiz-hide-actions button:hover{
    background:#f4f1ff;
}

#nujizHideStatus{
    min-height:18px;
    margin-top:9px;
    text-align:center;
    color:#5b4a8c;
    font-size:11px;
    font-weight:800;
}

#nujizHideOverlay{
    user-select:none;
    -webkit-user-select:none;
}

@media(max-width:600px){
    .nujiz-hide-actions{
        grid-template-columns:1fr 1fr;
    }
}

/* NUJIZ BEFORE / AFTER LABELS - WHITE TEXT */
.before-after-label,
.before-after-label.before,
.before-after-label.after,
.before-after-label *,
.before-after-label.before *,
.before-after-label.after * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

/* =========================================================
   NUJIZ COMPRESS IMAGE - PROFESSIONAL SIZE CARDS
   ========================================================= */

body[data-tool-id="compress"] .compress-live-stats{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px !important;
    margin:18px 0 16px !important;
    direction:inherit;
}

body[data-tool-id="compress"] .compress-live-stats > div{
    position:relative !important;
    min-width:0 !important;
    padding:15px 10px 13px !important;
    border:1px solid #e8e6f4 !important;
    border-radius:16px !important;
    text-align:center !important;
    overflow:hidden !important;
    box-shadow:0 8px 24px rgba(31,24,78,.06) !important;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease !important;
}

/* Original size */
body[data-tool-id="compress"] .compress-live-stats > div:nth-child(1){
    background:
        linear-gradient(180deg,#f4f8ff 0%,#edf5ff 100%) !important;
    border-color:#dce9ff !important;
}

/* Estimated size */
body[data-tool-id="compress"] .compress-live-stats > div:nth-child(2){
    background:
        linear-gradient(180deg,#f8f4ff 0%,#f2edff 100%) !important;
    border-color:#e5dcff !important;
}

/* Saving */
body[data-tool-id="compress"] .compress-live-stats > div:nth-child(3){
    background:
        linear-gradient(180deg,#f1fff5 0%,#e9faef 100%) !important;
    border-color:#d6f2df !important;
}

body[data-tool-id="compress"] .compress-live-stats > div:hover{
    transform:translateY(-2px) !important;
    box-shadow:0 12px 30px rgba(31,24,78,.09) !important;
}

/* circular icon */
body[data-tool-id="compress"] .compress-live-stats > div::before{
    content:"" !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:32px !important;
    height:32px !important;

    margin:0 auto 9px !important;

    border-radius:50% !important;

    font-size:15px !important;
    font-weight:900 !important;
    line-height:1 !important;
}

body[data-tool-id="compress"] .compress-live-stats > div:nth-child(1)::before{
    content:"▣" !important;
    color:#3278e8 !important;
    background:#dceaff !important;
}

body[data-tool-id="compress"] .compress-live-stats > div:nth-child(2)::before{
    content:"↓" !important;
    color:#6848ef !important;
    background:#e4dbff !important;
}

body[data-tool-id="compress"] .compress-live-stats > div:nth-child(3)::before{
    content:"%" !important;
    color:#159957 !important;
    background:#d6f5e2 !important;
}

/* labels */
body[data-tool-id="compress"] .compress-live-stats span{
    display:block !important;
    margin:0 0 6px !important;
    color:#596174 !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1.45 !important;
}

/* values */
body[data-tool-id="compress"] .compress-live-stats b{
    display:block !important;
    margin:0 !important;

    color:#17152d !important;
    font-size:17px !important;
    font-weight:900 !important;
    line-height:1.35 !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

/* special value colours */
body[data-tool-id="compress"] .compress-live-stats > div:nth-child(2) b{
    color:#6440e8 !important;
}

body[data-tool-id="compress"] .compress-live-stats > div:nth-child(3) b{
    color:#11884d !important;
    font-size:20px !important;
}

/* Mobile */
@media(max-width:600px){

    body[data-tool-id="compress"] .compress-live-stats{
        grid-template-columns:1fr !important;
        gap:8px !important;
    }

    body[data-tool-id="compress"] .compress-live-stats > div{
        display:grid !important;
        grid-template-columns:38px 1fr auto !important;
        grid-template-rows:auto !important;
        align-items:center !important;
        gap:10px !important;

        padding:12px 14px !important;
        text-align:start !important;
    }

    body[data-tool-id="compress"] .compress-live-stats > div::before{
        grid-column:1 !important;
        margin:0 !important;
    }

    body[data-tool-id="compress"] .compress-live-stats span{
        grid-column:2 !important;
        margin:0 !important;
        font-size:12px !important;
    }

    body[data-tool-id="compress"] .compress-live-stats b{
        grid-column:3 !important;
        margin:0 !important;
        text-align:end !important;
        font-size:15px !important;
    }

    body[data-tool-id="compress"] .compress-live-stats > div:nth-child(3) b{
        font-size:17px !important;
    }
}

/* ==================================================
   NUJIZ MANUAL CROP
   ================================================== */

.crop-selector{
  position:absolute;
  display:none;
  box-sizing:border-box;
  border:2px solid #7650f5;
  border-radius:10px;
  cursor:move;
  z-index:20;
  touch-action:none;

  box-shadow:
    0 0 0 9999px rgba(10,15,30,.42),
    0 8px 25px rgba(70,45,180,.25);
}

.crop-selector.visible{
  display:block;
}

.crop-selector::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(255,255,255,.55);
  border-radius:8px;
  pointer-events:none;
}

.crop-grid{
  position:absolute;
  pointer-events:none;
  background:rgba(255,255,255,.55);
}

.crop-grid-v{
  top:0;
  bottom:0;
  width:1px;
}

.crop-grid-v.v1{left:33.333%}
.crop-grid-v.v2{left:66.666%}

.crop-grid-h{
  left:0;
  right:0;
  height:1px;
}

.crop-grid-h.h1{top:33.333%}
.crop-grid-h.h2{top:66.666%}

.crop-handle{
  position:absolute;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#fff;
  border:3px solid #7650f5;
  box-shadow:0 2px 8px rgba(30,20,70,.22);
}

.crop-handle.nw{
  left:-9px;
  top:-9px;
  cursor:nwse-resize;
}

.crop-handle.ne{
  right:-9px;
  top:-9px;
  cursor:nesw-resize;
}

.crop-handle.sw{
  left:-9px;
  bottom:-9px;
  cursor:nesw-resize;
}

.crop-handle.se{
  right:-9px;
  bottom:-9px;
  cursor:nwse-resize;
}

.crop-manual-note{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin:12px 0 15px;
  padding:13px 14px;
  border-radius:13px;
  background:#f5f2ff;
  border:1px solid #e8e0ff;
}

.crop-manual-note b{
  color:#271d59;
  font-size:14px;
}

.crop-manual-note span{
  color:#6b6680;
  font-size:12px;
  line-height:1.7;
}

@media(max-width:700px){
  .crop-handle{
    width:20px;
    height:20px;
  }

  .crop-handle.nw{
    left:-11px;
    top:-11px;
  }

  .crop-handle.ne{
    right:-11px;
    top:-11px;
  }

  .crop-handle.sw{
    left:-11px;
    bottom:-11px;
  }

  .crop-handle.se{
    right:-11px;
    bottom:-11px;
  }
}