.video-watermark-page .tool-workbench {
  width: min(100% - 48px, 1440px);
}

.video-watermark-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) 420px;
  gap: 22px;
  align-items: start;
}

.video-watermark-stage,
.video-watermark-panel,
.video-import-card,
.video-preview-card,
.video-platform-note,
.video-export-card,
.video-stat-grid article {
  border: 1px solid rgba(120, 148, 204, .18);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 18px 46px rgba(44, 77, 140, .10);
}

.video-watermark-stage {
  display: grid;
  gap: 18px;
  border-radius: 24px;
  padding: 18px;
}

.video-import-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 92px;
  border-style: dashed;
  border-radius: 20px;
  padding: 18px 20px;
  background:
    linear-gradient(135deg, rgba(245, 249, 255, .92), rgba(255, 255, 255, .84)),
    radial-gradient(circle at 0% 0%, rgba(48, 112, 255, .12), transparent 34%);
}

.video-import-card.dragging {
  border-color: rgba(37, 110, 255, .55);
  background: #f3f8ff;
}

.video-import-card input {
  display: none;
}

.video-import-card div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.video-import-card b {
  color: #061433;
  font-size: 17px;
  letter-spacing: 0;
}

.video-import-card span {
  overflow: hidden;
  color: #66769d;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-import-card button,
.video-export-card button,
.video-export-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  border: 0;
  border-radius: 12px;
  padding: 0 18px;
  color: #fff;
  background: linear-gradient(135deg, #1767f2, #755cff);
  box-shadow: 0 14px 28px rgba(43, 100, 230, .24);
  font-size: 14px;
  font-weight: 760;
  text-decoration: none;
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.video-import-card button:hover,
.video-export-card button:hover,
.video-export-card a:hover {
  filter: saturate(1.04);
  box-shadow: 0 18px 34px rgba(43, 100, 230, .29);
  transform: translateY(-1px);
}

.video-export-card button:disabled {
  cursor: not-allowed;
  filter: grayscale(.25);
  opacity: .58;
  transform: none;
}

.video-preview-card {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 16px;
  border-radius: 22px;
  padding: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(245, 249, 255, .72));
}

.video-preview-card video {
  width: 100%;
  min-height: 220px;
  border-radius: 16px;
  background: #081225;
  object-fit: contain;
}

.video-canvas-wrap {
  position: relative;
  display: grid;
  min-height: 360px;
  overflow: hidden;
  place-items: center;
  border-radius: 18px;
  background:
    linear-gradient(45deg, rgba(99, 124, 172, .08) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(99, 124, 172, .08) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(99, 124, 172, .08) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(99, 124, 172, .08) 75%),
    #f7faff;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
  background-size: 24px 24px;
}

.video-canvas-wrap.empty {
  border: 1px dashed rgba(106, 132, 188, .32);
}

.video-canvas-wrap p {
  color: #7a88a8;
  font-size: 15px;
  font-weight: 760;
}

.video-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: contain;
}

.watermark-selection {
  position: absolute;
  z-index: 3;
  border: 2px solid rgba(41, 112, 255, .95);
  border-radius: 10px;
  background: rgba(41, 112, 255, .10);
  box-shadow: 0 0 0 999px rgba(6, 18, 45, .12), 0 12px 26px rgba(20, 60, 160, .20);
  cursor: move;
}

.watermark-selection::before {
  content: "水印区域";
  position: absolute;
  left: 10px;
  top: -30px;
  border-radius: 999px;
  padding: 5px 10px;
  color: #fff;
  background: rgba(18, 72, 190, .86);
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

.watermark-selection i {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #1767f2;
  box-shadow: 0 4px 12px rgba(23, 103, 242, .28);
}

.watermark-selection i[data-handle="nw"] { left: -7px; top: -7px; cursor: nwse-resize; }
.watermark-selection i[data-handle="ne"] { right: -7px; top: -7px; cursor: nesw-resize; }
.watermark-selection i[data-handle="sw"] { left: -7px; bottom: -7px; cursor: nesw-resize; }
.watermark-selection i[data-handle="se"] { right: -7px; bottom: -7px; cursor: nwse-resize; }

.video-watermark-dragging,
.video-watermark-dragging * {
  user-select: none;
}

.video-platform-note {
  display: grid;
  gap: 6px;
  border-radius: 18px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(242, 247, 255, .92), rgba(255, 255, 255, .86));
}

.video-platform-note strong {
  color: #0a1836;
  font-size: 15px;
}

.video-platform-note p {
  margin: 0;
  color: #65759a;
  font-size: 13px;
  line-height: 1.7;
}

.video-watermark-panel {
  position: sticky;
  top: 86px;
  display: grid;
  gap: 18px;
  border-radius: 24px;
  padding: 18px;
  background: rgba(255, 255, 255, .86);
}

.video-panel-section {
  display: grid;
  gap: 13px;
}

.video-panel-section h2 {
  margin: 0;
  color: #071431;
  font-size: 17px;
  letter-spacing: 0;
}

.video-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.video-mode-grid button {
  display: grid;
  gap: 5px;
  min-height: 78px;
  border: 1px solid rgba(109, 136, 195, .20);
  border-radius: 16px;
  padding: 13px;
  color: #273a64;
  background: rgba(248, 251, 255, .92);
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.video-mode-grid button:hover,
.video-mode-grid button.active {
  border-color: rgba(37, 110, 255, .55);
  background: linear-gradient(145deg, #f4f8ff, #fff);
  transform: translateY(-1px);
}

.video-mode-grid b {
  color: #081532;
  font-size: 14px;
}

.video-mode-grid span {
  color: #6b7898;
  font-size: 12px;
  line-height: 1.45;
}

.video-range {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 44px;
  gap: 10px;
  align-items: center;
  color: #52648e;
  font-size: 13px;
  font-weight: 720;
}

.video-range input {
  width: 100%;
  accent-color: #276cf4;
}

.video-range b {
  color: #0b1834;
  text-align: right;
}

.video-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.video-stat-grid article {
  display: grid;
  gap: 6px;
  border-radius: 16px;
  padding: 13px;
}

.video-stat-grid span {
  color: #6b7899;
  font-size: 12px;
  font-weight: 720;
}

.video-stat-grid b {
  overflow: hidden;
  color: #071431;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-export-card {
  display: grid;
  gap: 12px;
  border-radius: 18px;
  padding: 16px;
}

.video-export-card a {
  background: linear-gradient(135deg, #19b98f, #41d8c6);
}

.video-export-card p {
  margin: 0;
  color: #64749a;
  font-size: 13px;
  line-height: 1.65;
}

@media (max-width: 1120px) {
  .video-watermark-layout,
  .video-preview-card {
    grid-template-columns: 1fr;
  }
  .video-watermark-panel {
    position: static;
  }
}

@media (max-width: 680px) {
  .video-watermark-page .tool-workbench {
    width: min(100% - 28px, 1440px);
  }
  .video-watermark-stage,
  .video-watermark-panel {
    padding: 14px;
    border-radius: 18px;
  }
  .video-import-card {
    display: grid;
  }
  .video-mode-grid,
  .video-stat-grid {
    grid-template-columns: 1fr;
  }
  .video-canvas-wrap {
    min-height: 260px;
  }
}