/* ===== PDF→图片 工具专属样式（复用 default.css 设计令牌，跟随 body.dark） ===== */
.p2i-wrap { padding: 4px 0 8px; }
.p2i-drop {
    display: block; position: relative; text-align: center; cursor: pointer;
    border: 1.5px dashed var(--gk_color_border, #ccc); border-radius: var(--gk_radius_lg, 15px);
    padding: 34px 20px; background: var(--gk_color_bg_alt, #f3f4f6); color: var(--gk_color_text_muted, #666);
    transition: border-color var(--gk_duration_fast, .15s) var(--gk_ease, ease),
                background var(--gk_duration_fast, .15s) var(--gk_ease, ease);
}
.p2i-drop:hover { border-color: var(--gk_color_primary, #2276CC); background: var(--gk_color_primary_tint, #EFF6FF); }
.p2i-drop.p2i-drag { border-color: var(--gk_color_primary, #2276CC); background: var(--gk_color_primary_tint, #EFF6FF); }
.p2i-drop input[type=file] { display: none; }
.p2i-drop-ico { font-size: 40px; line-height: 1; margin-bottom: 10px; }
.p2i-drop-main { font-size: 15px; color: var(--gk_color_text, #333); }
.p2i-drop-main strong { color: var(--gk_color_primary, #2276CC); }
.p2i-file-info { margin-top: 8px; font-size: 12.5px; color: var(--gk_color_text_soft, #737373); }

/* 转换选项区 */
.p2i-options {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    margin-top: 16px; padding: 14px; background: var(--gk_color_bg_alt, #f3f4f6);
    border-radius: var(--gk_radius_md, 8px); border: 1px solid var(--gk_color_border_line, #e5e7eb);
}
.p2i-opt-group { display: flex; flex-direction: column; gap: 6px; }
.p2i-opt-group label { font-size: 12.5px; font-weight: 500; color: var(--gk_color_text, #333); }
.p2i-opt-hint { font-weight: 400; color: var(--gk_color_text_soft, #737373); font-size: 11.5px; }
.p2i-select, .p2i-input {
    padding: 7px 10px; border-radius: var(--gk_radius_sm, 6px);
    border: 1px solid var(--gk_color_border, #ccc); background: #fff;
    font-size: 13px; color: var(--gk_color_text, #333);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.p2i-select:focus, .p2i-input:focus {
    outline: none; border-color: var(--gk_color_primary, #2276CC);
    box-shadow: 0 0 0 3px rgba(34,118,204,.12);
}
.p2i-input::placeholder { color: var(--gk_color_text_soft, #999); }
.p2i-opt-pages { grid-column: span 3; }

.p2i-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }

/* 进度卡片 */
.p2i-progress { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--gk_color_border_line, #e5e7eb); }
.p2i-prog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.p2i-stage { position: relative; padding-left: 16px; font-size: 13.5px; font-weight: 500; color: var(--gk_color_text_muted, #666); }
.p2i-stage::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 7px; height: 7px; border-radius: 50%; background: var(--gk_color_primary, #2276CC);
    animation: p2i-pulse 1.6s ease-out infinite;
}
.p2i-stage.p2i-done::before { animation: none; background: var(--gk_color_accent_strong, #388E3C); }
@keyframes p2i-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,118,204,.45); } 70% { box-shadow: 0 0 0 7px rgba(34,118,204,0); } 100% { box-shadow: 0 0 0 0 rgba(34,118,204,0); } }
.p2i-pct { font-size: 18px; font-weight: 700; color: var(--gk_color_primary, #2276CC); font-variant-numeric: tabular-nums; }
.p2i-track { position: relative; height: 10px; border-radius: var(--gk_radius_pill, 30px); background: var(--gk_color_bg_alt, #f3f4f6); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.07); }
.p2i-bar { position: relative; height: 100%; width: 0%; border-radius: var(--gk_radius_pill, 30px); background: linear-gradient(90deg, #4C9BE8, var(--gk_color_primary, #2276CC)); transition: width .35s var(--gk_ease, ease); overflow: hidden; }
.p2i-bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent); animation: p2i-shimmer 1.3s linear infinite; }
.p2i-bar.p2i-done::after { animation: none; opacity: 0; }
@keyframes p2i-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.p2i-prog-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.p2i-msg { flex: 1; min-width: 180px; font-size: 13px; color: var(--gk_color_text_soft, #737373); }
.p2i-msg:empty { display: none; }
.p2i-msg.p2i-err { color: #C0392B; }
.p2i-msg.p2i-ok { color: var(--gk_color_accent_strong, #388E3C); }
/* 统一按钮：蓝色主题、自包含样式（不复用 default.css 的 .button/.secondary 绿色系，避免配色冲突与 display 打架） */
.p2i-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 8px 22px; border-radius: var(--gk_radius_pill, 30px); border: 1.5px solid transparent;
    font-size: 14px; font-weight: 500; line-height: 1.25; text-decoration: none; cursor: pointer;
    transition: background-color .18s var(--gk_ease, ease), border-color .18s var(--gk_ease, ease),
                box-shadow .18s var(--gk_ease, ease), transform .12s var(--gk_ease, ease), opacity .18s;
}
.p2i-btn-primary { background: var(--gk_color_primary, #2276CC); border-color: var(--gk_color_primary, #2276CC); color: #fff; }
.p2i-btn-primary:hover:not(:disabled) { background: var(--gk_color_primary_dark, #1B5FA6); border-color: var(--gk_color_primary_dark, #1B5FA6); box-shadow: 0 4px 12px rgba(34,118,204,.28); }
.p2i-btn-primary:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.p2i-btn-primary:disabled { opacity: .5; cursor: not-allowed; }
/* <a> 版按钮：default.css 的 a:link/a:hover/body.dark a（特异度 0,1,1）会盖过 .p2i-btn-primary（0,1,0），
   导致下载按钮文字发灰、悬停变蓝；这里用 a.p2i-btn-primary 提升特异度并锁定白色文字 */
a.p2i-btn-primary,
a.p2i-btn-primary:link,
a.p2i-btn-primary:visited,
a.p2i-btn-primary:hover,
a.p2i-btn-primary:active { color: #fff; opacity: 1; text-decoration: none; }
.p2i-btn-ghost { background: transparent; border-color: var(--gk_color_border, #ccc); color: var(--gk_color_primary, #2276CC); }
.p2i-btn-ghost:hover { border-color: var(--gk_color_primary, #2276CC); background: var(--gk_color_primary_tint, #EFF6FF); }
.p2i-btn.p2i-busy { opacity: .6; pointer-events: none; }
.p2i-notice { margin-top: 12px; padding: 10px 12px; border-radius: var(--gk_radius_md, 8px); background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; font-size: 12.5px; line-height: 1.65; }
.p2i-wrap [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .p2i-bar::after, .p2i-stage::before { animation: none; } }

/* 深色模式：告知条与轨道适配 */
body.dark .p2i-drop { background: var(--gk_color_dark_surface, #1F2937); border-color: var(--gk_color_dark_border, #3E4C59); }
body.dark .p2i-drop:hover, body.dark .p2i-drop.p2i-drag { background: var(--gk_color_dark_surface_h, #2D3748); }
body.dark .p2i-track { background: var(--gk_color_dark_surface, #1F2937); }
body.dark .p2i-progress { border-top-color: var(--gk_color_dark_border, #3E4C59); }
body.dark .p2i-notice { background: #3A2E12; border-color: #6B5320; color: #FCD34D; }
body.dark .p2i-btn-ghost { border-color: var(--gk_color_dark_border, #3E4C59); color: #7FB6EC; }
body.dark .p2i-btn-ghost:hover { background: rgba(34,118,204,.15); }
body.dark .p2i-options { background: var(--gk_color_dark_surface, #1F2937); border-color: var(--gk_color_dark_border, #3E4C59); }
body.dark .p2i-select, body.dark .p2i-input { background: var(--gk_color_dark_surface_h, #2D3748); border-color: var(--gk_color_dark_border, #3E4C59); color: #E5E7EB; }
body.dark .p2i-opt-group label { color: #E5E7EB; }

/* ===== 使用说明 & 工具特性（紧凑版：令牌化 + 暗色适配） ===== */
.p2i-info { margin-top: 16px; }
.p2i-card {
    padding: 12px 14px; margin-top: 12px;
    background: var(--gk_color_bg_alt, #f3f4f6);
    border: 1px solid var(--gk_color_border_line, #e5e7eb);
    border-radius: var(--gk_radius_md, 8px);
}
.p2i-card > h3 { margin: 0 0 10px; font-size: 13.5px; font-weight: 600; color: var(--gk_color_text, #333); }
/* 轻量变体：使用说明只给一层柔和背景，无边框，与下方带框的特性卡拉开主次 */
.p2i-card-plain {
    background: var(--gk_color_bg_alt, #f3f4f6);
    border: none; padding: 12px 14px; margin-top: 0;
    border-radius: var(--gk_radius_md, 8px);
}

/* 使用说明：纵向从上到下排，紧凑 */
.p2i-steps { display: grid; grid-template-columns: 1fr; gap: 8px; }
.p2i-step { display: flex; align-items: flex-start; gap: 8px; }
.p2i-step-num {
    flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--gk_color_primary, #2276CC); color: #fff; font-size: 11.5px; font-weight: 600;
}
.p2i-step-txt h4 { margin: 0; font-size: 13px; color: var(--gk_color_text, #333); }
.p2i-step-txt p { margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: var(--gk_color_text_muted, #666); }

/* 工具特性：4 宫格，紧凑 */
.p2i-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.p2i-feat {
    padding: 10px 12px; border-radius: var(--gk_radius_md, 8px);
    background: var(--gk_color_primary_tint, #EFF6FF);
    border: 1px solid var(--gk_color_border_line, #e5e7eb);
}
.p2i-feat-ico { font-size: 18px; line-height: 1; margin-bottom: 5px; }
.p2i-feat h4 { margin: 0 0 3px; font-size: 13px; color: var(--gk_color_primary, #2276CC); }
.p2i-feat p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--gk_color_text_soft, #737373); }

@media (max-width: 900px) {
    .p2i-options { grid-template-columns: 1fr 1fr; }
    .p2i-opt-pages { grid-column: span 2; }
    .p2i-feats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .p2i-options { grid-template-columns: 1fr; }
    .p2i-opt-pages { grid-column: span 1; }
    .p2i-feats { grid-template-columns: 1fr; }
}

/* 暗色模式 */
body.dark .p2i-card { background: var(--gk_color_dark_surface, #1F2937); border-color: var(--gk_color_dark_border, #3E4C59); }
body.dark .p2i-card > h3, body.dark .p2i-step-txt h4 { color: #E5E7EB; }
body.dark .p2i-feat { background: var(--gk_color_dark_surface_h, #2D3748); border-color: var(--gk_color_dark_border, #3E4C59); }
body.dark .p2i-feat h4 { color: #7FB6EC; }
body.dark .p2i-feat p { color: #9CA3AF; }