/* 无水印视频图片提取 /tools/wmat
   整屏工具布局，颜色统一走站点 CSS 变量，自动跟随明暗主题 */

body.page-wmat-full .app { max-width: 100%; }
body.page-wmat-full .main-content { max-width: 100%; border-right: 0; }

.wm-page { max-width: 100%; margin: 0; padding: 20px 24px 64px; }

/* ===== 头部 ===== */
.wm-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.wm-hero-icon { width: 52px; height: 52px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 14%, var(--bg-secondary)); display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0; }
.wm-hero-text h1 { font-size: 22px; font-weight: 800; color: var(--text-primary); margin: 0 0 2px; }
.wm-hero-text p { font-size: 13px; color: var(--text-secondary); margin: 0; }

/* 提示条 */
.wm-note { font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); background: color-mix(in srgb, var(--accent) 8%, var(--bg-secondary)); border: 1px solid var(--border-color); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }

/* ===== 输入区 ===== */
.wm-input-row { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.wm-input { flex: 1 1 420px; padding: 12px 16px; font-size: 15px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-secondary); color: var(--text-primary); outline: none; }
.wm-input:focus { border-color: var(--accent); }
.wm-btn { padding: 11px 26px; border-radius: 12px; border: 1px solid var(--accent); background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.wm-btn:hover { opacity: .92; }
.wm-btn:disabled { opacity: .55; cursor: not-allowed; }
.wm-btn-ghost { padding: 11px 14px; border-radius: 12px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; font-size: 15px; }
.wm-btn-ghost:hover { color: var(--accent); border-color: var(--accent); }

/* 平台标签 */
.wm-platforms { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.wm-plabel { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); margin-right: 2px; }
.wm-pill { font-size: 12.5px; padding: 4px 12px; border-radius: 999px; background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-secondary); }
.wm-pill-more { font-size: 12px; opacity: .8; }

/* ===== 结果区 ===== */
.wm-result { min-height: 120px; }
.wm-empty { text-align: center; padding: 56px 16px; color: var(--text-secondary); }
.wm-empty-ico { font-size: 40px; margin-bottom: 8px; }
.wm-empty p { font-size: 14px; margin: 0; }

.wm-loading { text-align: center; padding: 56px 16px; color: var(--text-secondary); font-size: 14px; }
.wm-loading .wm-spin { display: inline-block; width: 26px; height: 26px; border: 3px solid color-mix(in srgb, var(--accent) 30%, transparent); border-top-color: var(--accent); border-radius: 50%; animation: wm-spin 0.8s linear infinite; margin-bottom: 12px; }
@keyframes wm-spin { to { transform: rotate(360deg); } }

.wm-error { text-align: center; padding: 40px 16px; color: var(--text-primary); }
.wm-error .wm-err-ico { font-size: 34px; margin-bottom: 8px; }
.wm-error p { font-size: 14px; color: var(--text-secondary); margin: 0 0 4px; }
.wm-error .wm-err-tip { font-size: 12.5px; color: var(--text-secondary); opacity: .85; }
.wm-error .wm-err-link { margin-top: 12px; }
.wm-error .wm-err-link a { display: inline-block; font-size: 13px; font-weight: 600; color: var(--accent); padding: 7px 16px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px; text-decoration: none; }
.wm-error .wm-err-link a:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* 结果卡片 */
.wm-card { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 16px; padding: 18px; margin-bottom: 16px; }
.wm-card-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.wm-thumb { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; background: var(--bg-hover); flex-shrink: 0; }
.wm-card-meta { flex: 1; min-width: 0; }
.wm-badge { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, var(--bg-primary)); color: var(--accent); margin-bottom: 8px; }
.wm-card-title { font-size: 16px; font-weight: 700; color: var(--text-primary); line-height: 1.45; margin: 0 0 6px; word-break: break-word; }
.wm-card-author { font-size: 13px; color: var(--text-secondary); }
.wm-card-note { font-size: 12.5px; color: var(--text-secondary); background: var(--bg-hover); border-radius: 8px; padding: 8px 12px; margin: 10px 0 0; line-height: 1.6; }

/* 视频预览 */
.wm-video-wrap { margin-bottom: 14px; }
.wm-video { width: 100%; max-height: 520px; border-radius: 12px; background: #000; display: block; }
.wm-quality { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.wm-quality label { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); }
.wm-select { padding: 7px 12px; border-radius: 8px; font-size: 13px; border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-primary); outline: none; cursor: pointer; max-width: 100%; }

/* 操作按钮 */
.wm-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.wm-dl { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid var(--accent); background: var(--accent); color: #fff; }
.wm-dl:hover { opacity: .92; }
.wm-dl-ghost { background: var(--bg-primary); color: var(--accent); border-color: var(--border-color); }
.wm-link { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-secondary); }
.wm-link:hover { color: var(--accent); border-color: var(--accent); }

/* 图片网格 */
.wm-img-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin-top: 6px; }
.wm-img-cell { position: relative; border-radius: 12px; overflow: hidden; background: var(--bg-hover); border: 1px solid var(--border-color); }
.wm-img-cell img { width: 100%; display: block; aspect-ratio: 1 / 1; object-fit: cover; }
.wm-img-cell .wm-img-dl { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.6); color: #fff; border: 0; border-radius: 8px; padding: 5px 10px; font-size: 12px; cursor: pointer; }
.wm-img-cell .wm-img-dl:hover { background: var(--accent); }

.wm-section-title { font-size: 13.5px; font-weight: 700; color: var(--text-secondary); margin: 4px 0 10px; display: flex; align-items: center; gap: 8px; }
.wm-section-title .wm-count { font-weight: 400; color: var(--text-secondary); opacity: .8; }

/* ===== 响应式 ===== */
@media (max-width: 768px) {
    .wm-page { padding: 14px 12px 56px; }
    .wm-hero-text h1 { font-size: 19px; }
    .wm-input { flex: 1 1 100%; }
    .wm-btn { flex: 1 1 auto; }
    .wm-card-head { flex-direction: column; }
    .wm-thumb { width: 72px; height: 72px; }
    .wm-img-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}