/* WATERMARK TOOL */
    .watermark-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
      gap: 18px;
    }

    .wm-upload {
      display: block;
      width: 100%;
      min-height: 170px;
      border: 2px dashed #cbd5e1;
      border-radius: 12px;
      padding: 28px;
      text-align: center;
      background: #f8fafc;
      cursor: pointer;
      transition: .15s;
    }

    .wm-upload:focus-within,
    .wm-upload:hover {
      border-color: #2563eb;
      background: #eff6ff;
    }

    .wm-upload input {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }

    .wm-upload-icon {
      font-size: 34px;
      display: block;
      margin-bottom: 8px;
    }

    .wm-file-list {
      margin-top: 14px;
      display: grid;
      gap: 8px;
    }

    .wm-file {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 12px;
      border: 1px solid #e5e9f0;
      border-radius: 9px;
      background: #fff;
    }

    .wm-file-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 13px;
    }

    .wm-file-size {
      color: #6b7280;
      font-size: 11px;
      margin-left: 5px;
    }

    .wm-remove {
      border: 0;
      background: #fee2e2;
      color: #991b1b;
      border-radius: 7px;
      padding: 6px 9px;
      cursor: pointer;
      font-weight: 700;
      flex: 0 0 auto;
    }

    .wm-settings {
      display: grid;
      gap: 13px;
    }

    .wm-settings .field input[type="range"] {
      padding: 0;
      border: 0;
    }

    .wm-range-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .wm-range-row input[type="range"] {
      flex: 1;
      min-width: 110px;
    }

    .wm-range-row .wm-number-input {
      width: 78px;
      flex: 0 0 78px;
      padding: 8px 9px;
      text-align: center;
    }

    .wm-range-value {
      min-width: 55px;
      text-align: right;
      font-size: 12px;
      font-weight: 700;
      color: #475569;
    }

    .wm-color-row {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    .wm-color-row input[type="color"] {
      width: 52px;
      height: 40px;
      padding: 3px;
      cursor: pointer;
    }

    .wm-preview {
      min-height: 150px;
      display: grid;
      place-items: center;
      background:
        linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
        linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
        linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
      background-size: 22px 22px;
      background-position: 0 0, 0 11px, 11px -11px, -11px 0;
      border: 1px solid #e5e9f0;
      border-radius: 10px;
      overflow: hidden;
      position: relative;
    }

    #wmPreviewText {
      font-weight: 800;
      white-space: nowrap;
      user-select: none;
    }

    .wm-progress {
      margin-top: 14px;
      display: none;
    }

    .wm-progress.show {
      display: block;
    }

    .wm-progress-bar {
      height: 9px;
      background: #e5e7eb;
      border-radius: 999px;
      overflow: hidden;
    }

    .wm-progress-fill {
      width: 0;
      height: 100%;
      background: #2563eb;
      transition: width .15s;
    }

    .wm-result {
      margin-top: 14px;
      display: none;
    }

    .wm-result.show {
      display: block;
    }

    .wm-result-list {
      display: grid;
      gap: 7px;
      margin-top: 10px;
    }

    .wm-result-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 9px 11px;
      border: 1px solid #e5e9f0;
      border-radius: 8px;
      background: #fff;
      font-size: 12px;
    }

    .wm-status {
      font-size: 12px;
      color: #6b7280;
      margin-top: 8px;
    }


    .wm-tool-divider {
      height: 18px;
    }

    .wm-preview-page {
      width: 100%;
      max-width: 360px;
      margin: 0 auto;
      background: #fff;
      border: 1px solid #cbd5e1;
      border-radius: 4px;
      box-shadow: 0 8px 24px #0001;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      aspect-ratio: 210 / 297;
      min-height: 250px;
    }

    .wm-preview-page.landscape {
      aspect-ratio: 297 / 210;
      min-height: 210px;
    }

    .wm-preview-page.a3 { max-width: 390px; }
    .wm-preview-page.a5 { max-width: 300px; }
    .wm-preview-page.letter { aspect-ratio: 8.5 / 11; }
    .wm-preview-page.legal { aspect-ratio: 8.5 / 14; }

    .wm-preview-page #wmPreviewText {
      font-weight: 800;
      white-space: nowrap;
      user-select: none;
      display: inline-block;
      transform-origin: center center;
      line-height: 1;
    }