/* ============================================
   PDF to Word Converter - pdf-to-word.css
   Prefix: ptw-  (avoids custom_styles.css conflicts)
   Dark Mode Support | Light Mode Default
   ============================================ */

/* Load order: custom_styles.css first, then this file - tool styles win */

:root {
    --ptw-transition: 0.25s;
    --ptw-primary: #e64e4e;
    --ptw-primary-light: rgba(230, 78, 78, 0.12);
    --ptw-primary-dark: #c43c3c;
    --ptw-accent: #3399cc;
    --ptw-success: #339966;
    --ptw-success-light: rgba(51, 153, 102, 0.12);
    --ptw-warning: #f59e0b;
    --ptw-warning-light: rgba(245, 158, 11, 0.12);
    --ptw-danger: #e64e4e;
    --ptw-danger-light: rgba(230, 78, 78, 0.1);
    --ptw-bg: #fef7f7;
    --ptw-bg-elevated: #ffffff;
    --ptw-bg-secondary: #f1f5f9;
    --ptw-bg-tertiary: #e2e8f0;
    --ptw-text: #1e293b;
    --ptw-text-secondary: #475569;
    --ptw-text-muted: #64748b;
    --ptw-border: #e8d4d4;
    --ptw-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --ptw-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
    --ptw-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
    --ptw-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1);
    --ptw-shadow-primary: 0 4px 14px rgba(230,78,78,0.25);
    --ptw-shadow-primary-hover: 0 6px 20px rgba(230,78,78,0.35);
    --ptw-radius-sm: 6px;
    --ptw-radius-md: 12px;
    --ptw-radius-lg: 16px;
    --ptw-radius-xl: 24px;
    --ptw-radius-full: 9999px;
}

[data-theme="dark"] {
    --ptw-primary: #f87171;
    --ptw-primary-light: rgba(248, 113, 113, 0.15);
    --ptw-primary-dark: #e64e4e;
    --ptw-accent: #60a5fa;
    --ptw-success: #4ade80;
    --ptw-success-light: rgba(74, 222, 128, 0.15);
    --ptw-warning: #fbbf24;
    --ptw-warning-light: rgba(251, 191, 36, 0.15);
    --ptw-danger: #f87171;
    --ptw-danger-light: rgba(248, 113, 113, 0.15);
    --ptw-bg: #0f172a;
    --ptw-bg-elevated: #1e293b;
    --ptw-bg-secondary: #334155;
    --ptw-bg-tertiary: #475569;
    --ptw-text: #f1f5f9;
    --ptw-text-secondary: #cbd5e1;
    --ptw-text-muted: #94a3b8;
    --ptw-border: #334155;
    --ptw-shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --ptw-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4);
    --ptw-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.4);
    --ptw-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.5);
    --ptw-shadow-primary: 0 4px 14px rgba(248,113,113,0.2);
    --ptw-shadow-primary-hover: 0 6px 20px rgba(248,113,113,0.3);
}

/* ── Container ─────────────────────────────────────── */
.tool-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
}

/* ── Header ─────────────────────────────────────────── */
.tool-header {
    text-align: center;
    margin-bottom: 2rem;
}

.tool-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.ptw-tool-icon-wrapper {
    width: 64px;
    height: 64px;
    background: var(--ptw-primary);
    border-radius: var(--ptw-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: var(--ptw-shadow-primary);
    flex-shrink: 0;
    transition: background-color var(--ptw-transition), box-shadow var(--ptw-transition);
}
.ptw-tool-icon-wrapper svg,
.ptw-tool-icon-wrapper i { width: 28px; height: 28px; }

.ptw-tool-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    margin: 0;
    color: var(--ptw-primary);
    letter-spacing: -0.02em;
}

.ptw-tool-description {
    font-size: 1.1rem;
    color: var(--ptw-text-secondary);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.7;
}
.ptw-tool-description a { color: var(--ptw-primary); text-decoration: none; font-weight: 500; }
.ptw-tool-description a:hover { text-decoration: underline; }

/* ── Error Box ───────────────────────────────────────── */
.ptw-error-box {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--ptw-danger-light);
    border: 1px solid var(--ptw-danger);
    border-radius: var(--ptw-radius-md);
    margin-bottom: 1.5rem;
    animation: ptwFadeIn 0.3s ease;
}
.ptw-error-box > i { color: var(--ptw-danger); flex-shrink: 0; margin-top: 2px; }
.ptw-error-content { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; }
.ptw-error-content span { font-size: 0.95rem; color: var(--ptw-text); }
.ptw-error-contact { font-size: 0.875rem; color: var(--ptw-text-secondary); }
.ptw-error-contact a { color: var(--ptw-primary); text-decoration: none; font-weight: 500; }
.ptw-error-contact a:hover { text-decoration: underline; }
.ptw-error-close {
    background: none; border: none; cursor: pointer;
    color: var(--ptw-text-muted); padding: 0.2rem; flex-shrink: 0;
    border-radius: var(--ptw-radius-sm); transition: color 0.2s;
}
.ptw-error-close:hover { color: var(--ptw-danger); }

/* ── Main Tool Area ──────────────────────────────────── */
/* Override custom_styles.css overflow: hidden */
.ptw-tool-main {
    background: var(--ptw-bg-elevated);
    border-radius: var(--ptw-radius-xl);
    box-shadow: var(--ptw-shadow-xl);
    overflow: visible !important;
    border: 1px solid var(--ptw-border);
    margin-bottom: 2rem;
    transition: background-color var(--ptw-transition), border-color var(--ptw-transition), box-shadow var(--ptw-transition);
}

/* ── Upload Section ──────────────────────────────────── */
.ptw-upload-section { padding: 3rem; }
.ptw-upload-area {
    border: 2px dashed var(--ptw-border);
    border-radius: var(--ptw-radius-lg);
    padding: 4rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--ptw-bg-secondary);
    position: relative;
    overflow: hidden;
}
.ptw-upload-area::before {
    content: '';
    position: absolute; inset: 0;
    background: var(--ptw-primary-light);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.ptw-upload-area:hover,
.ptw-upload-area.dragover {
    border-color: var(--ptw-primary);
    background: var(--ptw-bg);
    transform: translateY(-2px);
    box-shadow: var(--ptw-shadow-md);
}
.ptw-upload-area:hover::before,
.ptw-upload-area.dragover::before { opacity: 0.5; }
.ptw-upload-content { position: relative; z-index: 1; }
.ptw-upload-icon { color: var(--ptw-primary); margin-bottom: 1.5rem; transition: transform 0.3s ease; }
.ptw-upload-area:hover .ptw-upload-icon { transform: translateY(-5px); }
.ptw-upload-title { font-size: 1.5rem; font-weight: 600; color: var(--ptw-text); margin: 0 0 0.5rem; }
.ptw-upload-subtitle { color: var(--ptw-text-secondary); margin: 0 0 1rem; font-size: 1rem; }
.ptw-file-types { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem; }
.ptw-file-type-badge {
    background: var(--ptw-bg-tertiary);
    color: var(--ptw-text-secondary);
    padding: 0.35rem 0.85rem;
    border-radius: var(--ptw-radius-full);
    font-size: 0.8rem; font-weight: 600;
    transition: background-color var(--ptw-transition), color var(--ptw-transition);
}
.ptw-file-type-badge.ptw-pdf { background: var(--ptw-primary-light); color: var(--ptw-primary); }
.ptw-file-type-badge.ptw-docx { background: rgba(51,153,204,0.15); color: var(--ptw-accent); }
.ptw-upload-hint {
    display: inline-flex; align-items: center; gap: 0.5rem;
    color: var(--ptw-text-muted); font-size: 0.875rem;
}

/* ── Editor Section ──────────────────────────────────── */
.ptw-editor-section { animation: ptwFadeIn 0.4s ease; }
.ptw-files-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.25rem 2rem;
    border-bottom: 1px solid var(--ptw-border);
    background: var(--ptw-bg-secondary);
    transition: background-color var(--ptw-transition), border-color var(--ptw-transition);
}
.ptw-files-header-left {
    display: flex; align-items: center; gap: 0.75rem;
    font-weight: 600; color: var(--ptw-text); min-width: 0;
}
.ptw-files-header-left svg,
.ptw-files-header-left i { color: var(--ptw-primary); flex-shrink: 0; }
.ptw-files-header-left .ptw-file-size { color: var(--ptw-text-muted); font-weight: 400; font-size: 0.9rem; }
.ptw-btn-text {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 0.75rem; border: none; background: transparent;
    color: var(--ptw-danger); font-size: 0.9rem; font-weight: 500;
    cursor: pointer; border-radius: var(--ptw-radius-md); transition: all 0.2s ease;
}
.ptw-btn-text:hover { background: var(--ptw-danger-light); }

/* ── Settings Panel ──────────────────────────────────── */
.ptw-settings-panel { padding: 2rem; }
.ptw-panel-header { margin-bottom: 1.5rem; }
.ptw-panel-header h3 {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 1.1rem; font-weight: 600; color: var(--ptw-text); margin: 0;
}
.ptw-panel-header h3 svg,
.ptw-panel-header h3 i { color: var(--ptw-primary); }
.ptw-settings-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 2rem; margin-bottom: 1.5rem;
}
.ptw-settings-column { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.ptw-section-label {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.9rem; font-weight: 600; color: var(--ptw-text); margin-bottom: 0.75rem;
}
.ptw-section-label svg,
.ptw-section-label i { color: var(--ptw-primary); width: 16px; height: 16px; }

/* Mode Toggle */
.ptw-mode-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.ptw-mode-btn {
    display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
    padding: 1rem; border: 2px solid var(--ptw-border); border-radius: var(--ptw-radius-md);
    background: var(--ptw-bg-elevated); cursor: pointer; transition: all 0.2s ease; text-align: center;
}
.ptw-mode-btn svg,
.ptw-mode-btn i { color: var(--ptw-text-muted); transition: color 0.2s ease; }
.ptw-mode-btn .ptw-mode-label { font-weight: 600; font-size: 0.95rem; color: var(--ptw-text); }
.ptw-mode-btn .ptw-mode-desc { font-size: 0.75rem; color: var(--ptw-text-muted); }
.ptw-mode-btn:hover { border-color: var(--ptw-primary); }
.ptw-mode-btn.active { border-color: var(--ptw-primary); background: var(--ptw-primary-light); }
.ptw-mode-btn.active svg,
.ptw-mode-btn.active i { color: var(--ptw-primary); }

/* OCR Section */
.ptw-ocr-section {
    padding: 1rem 1.25rem;
    background: var(--ptw-bg-secondary);
    border-radius: var(--ptw-radius-md);
    margin-bottom: 1.5rem;
    transition: background-color var(--ptw-transition);
}
.ptw-toggle-label { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; }
.ptw-toggle-label input[type="checkbox"] { display: none; }
.ptw-toggle-switch {
    position: relative; width: 44px; height: 24px;
    background: var(--ptw-border); border-radius: var(--ptw-radius-full);
    transition: all 0.3s ease; flex-shrink: 0;
}
.ptw-toggle-switch::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px; background: white;
    border-radius: 50%; transition: all 0.3s ease; box-shadow: var(--ptw-shadow-sm);
}
.ptw-toggle-label input:checked + .ptw-toggle-switch { background: var(--ptw-primary); }
.ptw-toggle-label input:checked + .ptw-toggle-switch::after { transform: translateX(20px); }
.ptw-toggle-text { display: flex; flex-direction: column; gap: 0.1rem; }
.ptw-toggle-text strong { font-size: 0.95rem; color: var(--ptw-text); }
.ptw-toggle-text small { font-size: 0.8rem; color: var(--ptw-text-muted); }

/* Quality Info */
.ptw-quality-info {
    display: flex; gap: 0.75rem; padding: 1rem;
    background: var(--ptw-success-light);
    border-radius: var(--ptw-radius-md);
    border: 1px solid var(--ptw-border);
    transition: background-color var(--ptw-transition);
}
.ptw-quality-info .ptw-info-icon { color: var(--ptw-success); flex-shrink: 0; }
.ptw-quality-info .ptw-info-text { font-size: 0.9rem; color: var(--ptw-text-secondary); line-height: 1.5; }

/* Action Bar */
.ptw-action-bar {
    display: flex; justify-content: flex-end; gap: 1rem;
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--ptw-border);
    background: var(--ptw-bg-secondary);
    transition: background-color var(--ptw-transition), border-color var(--ptw-transition);
}

/* Buttons */
.ptw-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.5rem; padding: 0.875rem 1.75rem;
    border-radius: var(--ptw-radius-full);
    font-size: 1rem; font-weight: 600;
    cursor: pointer; transition: all 0.2s ease;
    text-decoration: none; border: none;
}
.ptw-btn svg, .ptw-btn i { width: 18px; height: 18px; }
.ptw-btn-primary {
    background: var(--ptw-primary); color: white;
    box-shadow: var(--ptw-shadow-primary);
}
.ptw-btn-primary:hover {
    background: var(--ptw-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--ptw-shadow-primary-hover);
}
.ptw-btn-secondary {
    background: var(--ptw-bg-elevated); color: var(--ptw-text);
    border: 1px solid var(--ptw-border);
}
.ptw-btn-secondary:hover { background: var(--ptw-bg); border-color: var(--ptw-text-muted); }

/* Processing Overlay - position fixed, OUTSIDE tool-main */
.ptw-processing-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9000;
}
.ptw-processing-content {
    background: var(--ptw-bg-elevated);
    padding: 2.25rem 2rem 2rem;
    border-radius: var(--ptw-radius-xl);
    text-align: center;
    max-width: 380px;
    width: 92%;
    box-shadow: var(--ptw-shadow-xl);
    border: 1px solid var(--ptw-border);
    transition: background-color var(--ptw-transition);
}

/* Stage dots row */
.ptw-stages-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

/* Individual stage dot */
.ptw-stage-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}
.ptw-stage-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--ptw-bg-secondary);
    border: 2px solid var(--ptw-border);
    display: flex; align-items: center; justify-content: center;
    color: var(--ptw-text-muted);
    transition: all 0.35s ease;
}
.ptw-stage-icon i,
.ptw-stage-icon svg { width: 14px; height: 14px; }
.ptw-stage-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--ptw-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: color 0.35s ease;
    white-space: nowrap;
}

/* Connector between dots */
.ptw-stage-connector {
    width: 28px; height: 2px;
    background: var(--ptw-border);
    flex-shrink: 0;
    margin-bottom: 1.1rem;
    transition: background-color 0.35s ease;
}

/* Active */
.ptw-stage-dot.active .ptw-stage-icon {
    background: var(--ptw-primary-light);
    border-color: var(--ptw-primary);
    color: var(--ptw-primary);
    animation: ptwStagePulse 1.2s ease-in-out infinite;
}
.ptw-stage-dot.active .ptw-stage-label { color: var(--ptw-primary); }

/* Done */
.ptw-stage-dot.done .ptw-stage-icon {
    background: rgba(51,153,102,0.15);
    border-color: var(--ptw-success);
    color: var(--ptw-success);
    animation: none;
}
.ptw-stage-dot.done .ptw-stage-label { color: var(--ptw-success); }

/* Connector fills when left stage is done */
.ptw-stage-dot.done + .ptw-stage-connector { background: var(--ptw-success); }

@keyframes ptwStagePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(230,78,78,0.35); }
    50%       { box-shadow: 0 0 0 6px rgba(230,78,78,0); }
}
[data-theme="dark"] .ptw-stage-dot.active .ptw-stage-icon {
    animation-name: ptwStagePulseDark;
}
@keyframes ptwStagePulseDark {
    0%, 100% { box-shadow: 0 0 0 0 rgba(248,113,113,0.35); }
    50%       { box-shadow: 0 0 0 6px rgba(248,113,113,0); }
}

.ptw-processing-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ptw-text);
    margin: 0 0 1rem;
    min-height: 1.4em;
    transition: color var(--ptw-transition);
}
.ptw-progress-bar-container {
    height: 8px; background: var(--ptw-border);
    border-radius: var(--ptw-radius-full); overflow: hidden; margin-bottom: 0.6rem;
}
.ptw-progress-bar { height: 100%; background: var(--ptw-primary); width: 0%; transition: width 0.3s ease; }
.ptw-progress-text {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ptw-text-muted);
    margin: 0;
}

/* Results Section */
.ptw-results-section { padding: 2.5rem; text-align: center; animation: ptwFadeIn 0.4s ease; }
.ptw-results-header { margin-bottom: 2rem; }
.ptw-success-icon {
    width: 72px; height: 72px;
    background: var(--ptw-success);
    border-radius: var(--ptw-radius-full);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.25rem; color: white;
    transition: background-color var(--ptw-transition);
}
.ptw-success-icon svg, .ptw-success-icon i { width: 36px; height: 36px; }
.ptw-results-header h2 { font-size: 1.75rem; color: var(--ptw-text); margin: 0 0 0.5rem; }
.ptw-results-header p { color: var(--ptw-text-muted); margin: 0; }
.ptw-result-file {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.25rem;
    background: var(--ptw-bg-secondary);
    border-radius: var(--ptw-radius-lg); margin-bottom: 1.5rem; text-align: left;
    transition: background-color var(--ptw-transition);
}
.ptw-result-file-icon {
    width: 56px; height: 56px;
    background: var(--ptw-primary-light);
    border-radius: var(--ptw-radius-md);
    display: flex; align-items: center; justify-content: center;
    color: var(--ptw-primary); flex-shrink: 0;
}
.ptw-result-file-info { flex: 1; min-width: 0; }
.ptw-result-file-name {
    font-weight: 600; color: var(--ptw-text); font-size: 1rem;
    margin-bottom: 0.25rem; display: block;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ptw-result-file-meta { font-size: 0.875rem; color: var(--ptw-text-muted); }
.ptw-separator { margin: 0 0.4rem; }
.ptw-btn-download { flex-shrink: 0; }
.ptw-results-actions {
    display: flex; justify-content: center; gap: 1rem; margin-bottom: 1.5rem;
}
.ptw-results-tip {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--ptw-warning-light);
    border-radius: var(--ptw-radius-full);
    font-size: 0.9rem; color: var(--ptw-text-secondary);
}
.ptw-results-tip svg, .ptw-results-tip i { color: var(--ptw-warning); flex-shrink: 0; }
.ptw-results-tip a { color: var(--ptw-primary); text-decoration: none; font-weight: 500; }
.ptw-results-tip a:hover { text-decoration: underline; }

/* Related Tools */
.ptw-related-tools {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--ptw-bg-elevated);
    border-radius: var(--ptw-radius-xl);
    margin-bottom: 2rem;
    border: 1px solid var(--ptw-border);
    box-shadow: var(--ptw-shadow-sm);
    transition: background-color var(--ptw-transition), border-color var(--ptw-transition);
}
.ptw-related-label {
    display: flex; align-items: center; gap: 0.5rem;
    font-weight: 600; color: var(--ptw-text); font-size: 0.9rem;
}
.ptw-related-label svg, .ptw-related-label i { color: var(--ptw-primary); }
.ptw-related-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ptw-related-link {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    background: var(--ptw-bg-secondary);
    border-radius: var(--ptw-radius-full);
    color: var(--ptw-text-secondary); text-decoration: none;
    font-size: 0.875rem; font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid var(--ptw-border);
}
.ptw-related-link:hover {
    background: var(--ptw-primary); color: white;
    border-color: var(--ptw-primary); transform: translateY(-2px);
}

/* Info Sections */
.ptw-info-sections { display: flex; flex-direction: column; gap: 1.5rem; }
.ptw-info-card {
    background: var(--ptw-bg-elevated);
    border-radius: var(--ptw-radius-xl);
    padding: 2rem;
    border: 1px solid var(--ptw-border);
    transition: background-color var(--ptw-transition), border-color var(--ptw-transition);
}
.ptw-info-card h2 {
    display: flex; align-items: center; gap: 0.75rem;
    font-size: 1.3rem; color: var(--ptw-text); margin: 0 0 1.5rem;
}
.ptw-info-card h2 svg, .ptw-info-card h2 i { color: var(--ptw-primary); }

/* Steps List */
.ptw-steps-list {
    counter-reset: step; list-style: none; padding: 0; margin: 0;
}
.ptw-steps-list li {
    position: relative; padding-left: 3.25rem; margin-bottom: 1rem;
    counter-increment: step; color: var(--ptw-text-secondary); line-height: 1.6;
}
.ptw-steps-list li:not(:last-child)::after {
    content: ''; position: absolute;
    left: calc(1rem - 1px); top: 2rem; bottom: 0;
    width: 2px; background: var(--ptw-primary-light);
}
.ptw-steps-list li::before {
    content: counter(step); position: absolute;
    left: 0; top: 0; width: 2rem; height: 2rem;
    background: var(--ptw-primary); color: white;
    border-radius: var(--ptw-radius-full);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 0.875rem; z-index: 1;
}
.ptw-steps-list li:last-child { margin-bottom: 0; }
.ptw-steps-list a { color: var(--ptw-primary); text-decoration: none; }
.ptw-steps-list a:hover { text-decoration: underline; }
.ptw-steps-tip {
    display: flex; align-items: flex-start; gap: 0.75rem;
    margin-top: 1.5rem; padding: 1rem 1.25rem;
    background: var(--ptw-warning-light);
    border-radius: var(--ptw-radius-md);
    font-size: 0.9rem; color: var(--ptw-text-secondary); line-height: 1.6;
}
.ptw-steps-tip svg, .ptw-steps-tip i { color: var(--ptw-warning); flex-shrink: 0; margin-top: 0.1rem; }
.ptw-steps-tip a { color: var(--ptw-primary); text-decoration: none; }
.ptw-steps-tip a:hover { text-decoration: underline; }

/* Format Explanations */
.ptw-format-explanations { display: flex; flex-direction: column; gap: 1rem; }
.ptw-format-explain {
    padding: 1.25rem;
    background: var(--ptw-bg-secondary);
    border-radius: var(--ptw-radius-md);
    border: 1px solid var(--ptw-border);
    transition: background-color var(--ptw-transition);
}
.ptw-format-tag {
    display: inline-block; padding: 0.25rem 0.75rem;
    border-radius: var(--ptw-radius-full);
    font-size: 0.8rem; font-weight: 700; margin-bottom: 0.75rem;
}
.ptw-format-tag.ptw-docx-tag { background: var(--ptw-accent); color: white; }
.ptw-format-tag.ptw-doc-tag { background: var(--ptw-text-muted); color: white; }
.ptw-format-explain p { margin: 0; color: var(--ptw-text-secondary); line-height: 1.6; }
.ptw-format-explain a { color: var(--ptw-primary); text-decoration: none; }
.ptw-format-explain a:hover { text-decoration: underline; }

/* Use Cases Grid */
.ptw-use-cases-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ptw-use-case {
    display: flex; gap: 1rem; padding: 1.25rem;
    background: var(--ptw-bg-secondary);
    border-radius: var(--ptw-radius-md);
    border: 1px solid var(--ptw-border);
    transition: background-color var(--ptw-transition);
}
.ptw-use-case svg, .ptw-use-case i { color: var(--ptw-primary); flex-shrink: 0; margin-top: 0.1rem; }
.ptw-use-case strong { display: block; color: var(--ptw-text); margin-bottom: 0.25rem; }
.ptw-use-case p { margin: 0; font-size: 0.9rem; color: var(--ptw-text-secondary); line-height: 1.5; }

/* FAQ - uses global .faq-item pattern from _footer.php */
/* Only visual overrides for this card context */
.ptw-info-card .faq-question { background: var(--ptw-bg-secondary); color: var(--ptw-text); }
.ptw-info-card .faq-question:hover { background: var(--ptw-bg-tertiary); }
.ptw-info-card .faq-answer p {
    background: var(--ptw-bg-elevated);
    color: var(--ptw-text-secondary);
    border-top: 1px solid var(--ptw-border);
}
.ptw-info-card .faq-answer a { color: var(--ptw-primary); text-decoration: none; }
.ptw-info-card .faq-answer a:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 900px) {
    .ptw-settings-grid { grid-template-columns: 1fr; }
    .ptw-use-cases-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .tool-container { padding: 1rem; }
    .tool-title-row { gap: 0.75rem; }
    .ptw-tool-icon-wrapper { width: 50px; height: 50px; }
    .ptw-tool-icon-wrapper svg, .ptw-tool-icon-wrapper i { width: 24px; height: 24px; }
    .ptw-upload-section { padding: 2rem 1.5rem; }
    .ptw-upload-area { padding: 2.5rem 1.5rem; }
    .ptw-files-header { padding: 1rem 1.5rem; }
    .ptw-settings-panel { padding: 1.5rem; }
    .ptw-action-bar { flex-direction: column; padding: 1.5rem; }
    .ptw-action-bar .ptw-btn { width: 100%; }
    .ptw-results-section { padding: 2rem 1.5rem; }
    .ptw-result-file { flex-direction: column; text-align: center; }
    .ptw-result-file-info { text-align: center; }
    .ptw-results-actions { flex-direction: column; }
    .ptw-results-actions .ptw-btn { width: 100%; }
    .ptw-info-card { padding: 1.5rem; }
}
@media (max-width: 480px) {
    .tool-title-row { flex-direction: column; gap: 0.75rem; }
    .ptw-mode-toggle { grid-template-columns: 1fr; }
    .ptw-related-tools { flex-direction: column; align-items: flex-start; }
}

@keyframes ptwFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}