/* ============================================
   PSD to PNG Converter - ptp- prefixed styles
   Light default / dark via [data-theme="dark"]
   ============================================ */

:root {
    --ptp-primary:        #3399cc;
    --ptp-primary-light:  rgba(51,153,204,0.12);
    --ptp-primary-dark:   #2980b9;
    --ptp-success:        #339966;
    --ptp-success-light:  rgba(51,153,102,0.12);
    --ptp-danger:         #e64e4e;
    --ptp-danger-light:   rgba(230,78,78,0.12);
    --ptp-warning:        #f59e0b;
    --ptp-warning-light:  rgba(245,158,11,0.12);

    --ptp-bg:             #f0f9ff;
    --ptp-bg-el:          #ffffff;
    --ptp-bg-sec:         #f1f5f9;
    --ptp-bg-ter:         #e2e8f0;

    --ptp-text:           #1e293b;
    --ptp-text-sec:       #475569;
    --ptp-text-muted:     #64748b;

    --ptp-border:         #bae6fd;
    --ptp-border-light:   #e2e8f0;

    --ptp-shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
    --ptp-shadow-md:  0 4px 6px -1px rgba(0,0,0,0.1);
    --ptp-shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.1);
    --ptp-shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.1);
    --ptp-shadow-pri: 0 4px 14px rgba(51,153,204,0.25);
    --ptp-shadow-pho: 0 6px 20px rgba(51,153,204,0.35);

    --ptp-radius-sm:   6px;
    --ptp-radius-md:   12px;
    --ptp-radius-lg:   16px;
    --ptp-radius-xl:   24px;
    --ptp-radius-full: 9999px;
    --ptp-speed:       0.25s;

    --ptp-checker-a: #f0f0f0;
    --ptp-checker-b: #e0e0e0;
}

[data-theme="dark"] {
    --ptp-primary:        #60a5fa;
    --ptp-primary-light:  rgba(96,165,250,0.15);
    --ptp-primary-dark:   #3399cc;
    --ptp-success:        #4ade80;
    --ptp-success-light:  rgba(74,222,128,0.15);
    --ptp-danger:         #f87171;
    --ptp-danger-light:   rgba(248,113,113,0.15);
    --ptp-warning:        #fbbf24;
    --ptp-warning-light:  rgba(251,191,36,0.15);

    --ptp-bg:             #0f172a;
    --ptp-bg-el:          #1e293b;
    --ptp-bg-sec:         #334155;
    --ptp-bg-ter:         #475569;

    --ptp-text:           #f1f5f9;
    --ptp-text-sec:       #cbd5e1;
    --ptp-text-muted:     #94a3b8;

    --ptp-border:         #334155;
    --ptp-border-light:   #475569;

    --ptp-shadow-sm:  0 1px 3px rgba(0,0,0,0.3);
    --ptp-shadow-md:  0 4px 6px -1px rgba(0,0,0,0.4);
    --ptp-shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.4);
    --ptp-shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.5);
    --ptp-shadow-pri: 0 4px 14px rgba(96,165,250,0.2);
    --ptp-shadow-pho: 0 6px 20px rgba(96,165,250,0.3);

    --ptp-checker-a: #334155;
    --ptp-checker-b: #475569;
}

/* ---- Layout ---- */
.ptp-container { max-width: 1000px; margin: 0 auto; padding: 2rem; }

.ptp-header { text-align: center; margin-bottom: 2rem; }

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

.ptp-icon-wrap {
    width: 60px; height: 60px;
    background: var(--ptp-primary);
    border-radius: var(--ptp-radius-lg);
    display: flex; align-items: center; justify-content: center;
    color: #fff; flex-shrink: 0;
    box-shadow: var(--ptp-shadow-pri);
}
.ptp-icon-wrap i, .ptp-icon-wrap svg { width: 28px; height: 28px; }

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

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

/* ---- Main card ---- */
.ptp-main {
    background: var(--ptp-bg-el);
    border-radius: var(--ptp-radius-xl);
    border: 1px solid var(--ptp-border);
    box-shadow: var(--ptp-shadow-xl);
    overflow: visible !important;
    margin-bottom: 2rem;
    transition: background var(--ptp-speed), border-color var(--ptp-speed);
}

/* ---- Upload ---- */
.ptp-upload-section { padding: 3rem; }

.ptp-upload-area {
    border: 2px dashed var(--ptp-border);
    border-radius: var(--ptp-radius-lg);
    padding: 3.5rem 2rem;
    text-align: center; cursor: pointer;
    background: var(--ptp-bg-sec);
    transition: all 0.3s ease;
    position: relative; overflow: hidden;
}
.ptp-upload-area::before {
    content: ''; position: absolute; inset: 0;
    background: var(--ptp-primary-light); opacity: 0; transition: opacity 0.3s;
}
.ptp-upload-area:hover, .ptp-upload-area.dragover {
    border-color: var(--ptp-primary);
    transform: translateY(-2px); box-shadow: var(--ptp-shadow-md);
}
.ptp-upload-area:hover::before, .ptp-upload-area.dragover::before { opacity: 1; }
.ptp-upload-content { position: relative; z-index: 1; }

.ptp-upload-icon { color: var(--ptp-primary); margin-bottom: 1.25rem; transition: transform 0.3s; }
.ptp-upload-icon i, .ptp-upload-icon svg { width: 56px; height: 56px; }
.ptp-upload-area:hover .ptp-upload-icon { transform: translateY(-4px); }

.ptp-upload-title { font-size: 1.4rem; font-weight: 600; color: var(--ptp-text); margin: 0 0 0.4rem; }
.ptp-upload-sub { color: var(--ptp-text-sec); margin: 0 0 1rem; }

.ptp-badges { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem; }
.ptp-badge {
    background: var(--ptp-primary-light); color: var(--ptp-primary);
    padding: 0.3rem 0.8rem; border-radius: var(--ptp-radius-full);
    font-size: 0.8rem; font-weight: 600;
}

.ptp-upload-hint { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ptp-text-muted); font-size: 0.85rem; }
.ptp-upload-hint i, .ptp-upload-hint svg { width: 14px; height: 14px; }

/* ---- Editor ---- */
.ptp-editor-section { background: var(--ptp-bg-el); }

.ptp-files-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 2rem;
    background: var(--ptp-bg-sec);
    border-bottom: 1px solid var(--ptp-border);
}
.ptp-files-header-left { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--ptp-text); }
.ptp-files-header-left i, .ptp-files-header-left svg { color: var(--ptp-primary); width: 20px; height: 20px; }

.ptp-btn-text {
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: none; border: none; color: var(--ptp-primary);
    font-weight: 600; font-size: 0.9rem; cursor: pointer;
    padding: 0.5rem 0.75rem; border-radius: var(--ptp-radius-md);
    transition: background 0.2s;
}
.ptp-btn-text:hover { background: var(--ptp-primary-light); }
.ptp-btn-text i, .ptp-btn-text svg { width: 16px; height: 16px; }

/* ---- Files grid ---- */
.ptp-files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem; padding: 1.5rem 2rem;
    max-height: 340px; overflow-y: auto;
    border-bottom: 1px solid var(--ptp-border);
}

.ptp-file-item {
    display: flex; flex-direction: column; align-items: center;
    padding: 0.9rem;
    background: var(--ptp-bg-sec);
    border: 1px solid var(--ptp-border);
    border-radius: var(--ptp-radius-md);
    position: relative; transition: all 0.2s; min-width: 0;
}
.ptp-file-item:hover { border-color: var(--ptp-primary); transform: translateY(-2px); box-shadow: var(--ptp-shadow-md); }

/* Feature 3: preview area - shows canvas or fallback icon */
.ptp-file-preview {
    width: 80px; height: 80px;
    border-radius: var(--ptp-radius-sm);
    background: var(--ptp-bg-ter);
    border: 1px solid var(--ptp-border);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 0.7rem; overflow: hidden;
    position: relative;
}
.ptp-file-preview canvas {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
}
.ptp-file-preview i, .ptp-file-preview svg { color: var(--ptp-primary); width: 30px; height: 30px; }

/* Analyzing spinner inside preview */
.ptp-file-preview.analyzing::after {
    content: '';
    position: absolute; inset: 0;
    background: var(--ptp-bg-ter);
    display: flex; align-items: center; justify-content: center;
}
.ptp-preview-spinner {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--ptp-bg-ter);
}
.ptp-preview-spinner::after {
    content: ''; width: 22px; height: 22px;
    border: 2px solid var(--ptp-border);
    border-top-color: var(--ptp-primary);
    border-radius: 50%;
    animation: ptp-spin 0.8s linear infinite;
}

.ptp-file-name {
    font-weight: 600; font-size: 0.78rem; color: var(--ptp-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%; text-align: center;
}
.ptp-file-size { font-size: 0.7rem; color: var(--ptp-text-muted); text-align: center; }

/* Feature 7: mini info badges under each file */
.ptp-file-info-row {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 3px; margin-top: 4px;
}
.ptp-file-info-chip {
    font-size: 0.62rem; padding: 1px 5px;
    background: var(--ptp-primary-light);
    color: var(--ptp-primary);
    border-radius: 3px; font-weight: 600;
    white-space: nowrap;
}

.ptp-file-remove {
    position: absolute; top: 5px; right: 5px;
    width: 20px; height: 20px; border: none; border-radius: 50%;
    background: var(--ptp-danger-light); color: var(--ptp-danger);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: scale(0.8); transition: all 0.2s;
}
.ptp-file-remove i, .ptp-file-remove svg { width: 11px; height: 11px; }
.ptp-file-item:hover .ptp-file-remove { opacity: 1; transform: scale(1); }
.ptp-file-remove:hover { background: var(--ptp-danger); color: #fff; }

/* ---- Feature 7: PSD Info Bar ---- */
.ptp-psd-info-bar {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 0.75rem; padding: 0.75rem 2rem;
    background: var(--ptp-primary-light);
    border-bottom: 1px solid var(--ptp-border);
}
.ptp-psd-info-title {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.82rem; font-weight: 600; color: var(--ptp-primary);
    white-space: nowrap;
}
.ptp-psd-info-title i, .ptp-psd-info-title svg { width: 14px; height: 14px; }
.ptp-psd-info-items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ptp-psd-info-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.25rem 0.65rem;
    background: var(--ptp-bg-el); border: 1px solid var(--ptp-border);
    border-radius: var(--ptp-radius-full);
    font-size: 0.78rem; font-weight: 500; color: var(--ptp-text-sec);
}
.ptp-psd-info-chip i, .ptp-psd-info-chip svg { color: var(--ptp-primary); width: 12px; height: 12px; }

/* ---- Settings ---- */
.ptp-settings-panel { padding: 2rem; }

.ptp-panel-header { margin-bottom: 1.5rem; }
.ptp-panel-header h3 {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 1.05rem; font-weight: 600; color: var(--ptp-text); margin: 0;
}
.ptp-panel-header h3 i, .ptp-panel-header h3 svg { color: var(--ptp-primary); width: 20px; height: 20px; }

.ptp-settings-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 2rem; margin-bottom: 1.5rem; min-width: 0;
}
.ptp-settings-col { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.ptp-setting-group { display: flex; flex-direction: column; }

.ptp-section-label {
    display: flex; align-items: center; gap: 0.45rem;
    font-size: 0.875rem; font-weight: 600; color: var(--ptp-text);
    margin-bottom: 0.7rem;
}
.ptp-section-label i, .ptp-section-label svg { color: var(--ptp-primary); width: 16px; height: 16px; }

.ptp-setting-hint { font-size: 0.78rem; color: var(--ptp-text-muted); margin: 0.4rem 0 0; line-height: 1.4; }

/* ---- Feature 1: Layer mode - 3 buttons ---- */
.ptp-mode-toggle { display: grid; gap: 0.6rem; }
.ptp-mode-3 { grid-template-columns: repeat(3, 1fr); }

.ptp-mode-btn {
    display: flex; flex-direction: column; align-items: center; gap: 0.28rem;
    padding: 0.85rem 0.5rem;
    border: 2px solid var(--ptp-border);
    border-radius: var(--ptp-radius-md);
    background: var(--ptp-bg-el); cursor: pointer;
    transition: all 0.2s; text-align: center;
}
.ptp-mode-btn i, .ptp-mode-btn svg { color: var(--ptp-text-muted); width: 18px; height: 18px; transition: color 0.2s; }
.ptp-mode-label { font-weight: 600; font-size: 0.82rem; color: var(--ptp-text); line-height: 1.2; }
.ptp-mode-desc { font-size: 0.68rem; color: var(--ptp-text-muted); line-height: 1.2; }
.ptp-mode-btn:hover { border-color: var(--ptp-primary); }
.ptp-mode-btn.active { border-color: var(--ptp-primary); background: var(--ptp-primary-light); }
.ptp-mode-btn.active i, .ptp-mode-btn.active svg { color: var(--ptp-primary); }

.ptp-layer-notice {
    display: flex; align-items: flex-start; gap: 0.4rem;
    margin-top: 0.6rem; padding: 0.6rem 0.85rem;
    background: var(--ptp-warning-light);
    border-radius: var(--ptp-radius-sm);
    font-size: 0.78rem; color: var(--ptp-text-sec); line-height: 1.4;
}
.ptp-layer-notice i, .ptp-layer-notice svg { color: var(--ptp-warning); width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }

/* ---- Feature 2: Transparency + color picker ---- */
.ptp-trans-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.45rem; }
.ptp-option-card { cursor: pointer; position: relative; }
.ptp-option-card input { position: absolute; opacity: 0; pointer-events: none; }
.ptp-option-inner {
    display: flex; flex-direction: column; align-items: center; gap: 0.28rem;
    padding: 0.6rem 0.3rem;
    border: 2px solid var(--ptp-border);
    border-radius: var(--ptp-radius-md);
    background: var(--ptp-bg-el);
    font-size: 0.72rem; font-weight: 500; color: var(--ptp-text-sec);
    transition: all 0.2s;
}
.ptp-option-inner i, .ptp-option-inner svg { color: var(--ptp-text-muted); width: 16px; height: 16px; }
.ptp-option-card:hover .ptp-option-inner { border-color: var(--ptp-primary); }
.ptp-option-card.active .ptp-option-inner,
.ptp-option-card input:checked + .ptp-option-inner {
    border-color: var(--ptp-primary); background: var(--ptp-primary-light);
}
.ptp-option-card.active .ptp-option-inner i,
.ptp-option-card input:checked + .ptp-option-inner i { color: var(--ptp-primary); }

/* Color picker row */
.ptp-color-row {
    display: flex; align-items: center; gap: 0.75rem;
    margin-top: 0.6rem; padding: 0.7rem 0.9rem;
    background: var(--ptp-bg-sec);
    border-radius: var(--ptp-radius-md);
    border: 1px solid var(--ptp-border);
    flex-wrap: wrap;
}
.ptp-color-label {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: 0.82rem; font-weight: 500; color: var(--ptp-text-sec);
    flex-shrink: 0;
}
.ptp-color-label i, .ptp-color-label svg { color: var(--ptp-primary); width: 14px; height: 14px; }
.ptp-color-inputs { display: flex; align-items: center; gap: 0.5rem; }
.ptp-color-swatch {
    width: 36px; height: 36px;
    border: 2px solid var(--ptp-border);
    border-radius: var(--ptp-radius-sm);
    padding: 1px; cursor: pointer;
    background: none;
}
.ptp-color-hex {
    width: 80px; padding: 0.4rem 0.55rem;
    border: 1px solid var(--ptp-border);
    border-radius: var(--ptp-radius-md);
    background: var(--ptp-bg-el); color: var(--ptp-text);
    font-size: 0.85rem; font-family: monospace;
    transition: border-color 0.2s;
}
.ptp-color-hex:focus { outline: none; border-color: var(--ptp-primary); }

/* ---- Feature 4: Output format ---- */
.ptp-fmt-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.ptp-fmt-btn {
    display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
    padding: 0.75rem 0.5rem;
    border: 2px solid var(--ptp-border);
    border-radius: var(--ptp-radius-md);
    background: var(--ptp-bg-el); cursor: pointer; transition: all 0.2s;
}
.ptp-fmt-ext { font-size: 0.95rem; font-weight: 700; color: var(--ptp-text); }
.ptp-fmt-sub { font-size: 0.65rem; color: var(--ptp-text-muted); text-align: center; line-height: 1.3; }
.ptp-fmt-btn:hover { border-color: var(--ptp-primary); }
.ptp-fmt-btn.active { border-color: var(--ptp-primary); background: var(--ptp-primary-light); }
.ptp-fmt-btn.active .ptp-fmt-ext { color: var(--ptp-primary); }

.ptp-fmt-note {
    display: flex; align-items: flex-start; gap: 0.4rem;
    margin-top: 0.6rem; padding: 0.55rem 0.8rem;
    background: var(--ptp-warning-light);
    border-radius: var(--ptp-radius-sm);
    font-size: 0.78rem; color: var(--ptp-text-sec); line-height: 1.4;
}
.ptp-fmt-note i, .ptp-fmt-note svg { color: var(--ptp-warning); width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }

/* ---- Sliders ---- */
.ptp-slider-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.4rem; }
.ptp-slider {
    flex: 1; height: 8px; border-radius: var(--ptp-radius-full);
    background: var(--ptp-bg-ter);
    -webkit-appearance: none; appearance: none; cursor: pointer;
    accent-color: var(--ptp-primary);
}
.ptp-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--ptp-bg-el); border: 3px solid var(--ptp-primary);
    cursor: pointer; box-shadow: var(--ptp-shadow-md); transition: transform 0.15s;
}
.ptp-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.ptp-slider::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--ptp-bg-el); border: 3px solid var(--ptp-primary); cursor: pointer;
}
.ptp-slider-val {
    min-width: 40px; padding: 0.4rem 0.65rem;
    background: var(--ptp-primary); color: #fff;
    border-radius: var(--ptp-radius-md);
    font-weight: 700; text-align: center; font-size: 0.9rem;
}
.ptp-slider-labels { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--ptp-text-muted); }

/* ---- Feature 6: DPI ---- */
.ptp-dpi-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.45rem; margin-bottom: 0.65rem; }
.ptp-dpi-btn {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 0.6rem 0.3rem;
    border: 2px solid var(--ptp-border);
    border-radius: var(--ptp-radius-md);
    background: var(--ptp-bg-el); cursor: pointer; transition: all 0.2s;
}
.ptp-dpi-val { font-size: 0.95rem; font-weight: 700; color: var(--ptp-text); }
.ptp-dpi-lbl { font-size: 0.62rem; color: var(--ptp-text-muted); }
.ptp-dpi-btn:hover { border-color: var(--ptp-primary); }
.ptp-dpi-btn.active { border-color: var(--ptp-primary); background: var(--ptp-primary-light); }
.ptp-dpi-btn.active .ptp-dpi-val { color: var(--ptp-primary); }

.ptp-dpi-custom { margin-top: 0; }

/* ---- Custom pct / DPI inputs ---- */
.ptp-custom-pct {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.85rem; color: var(--ptp-text-sec);
    margin-top: 0.5rem;
}
.ptp-num-input {
    width: 64px; padding: 0.4rem 0.5rem;
    border: 1px solid var(--ptp-border);
    border-radius: var(--ptp-radius-md);
    background: var(--ptp-bg-el); color: var(--ptp-text);
    font-size: 0.88rem; text-align: center; transition: border-color 0.2s;
}
.ptp-num-input:focus { outline: none; border-color: var(--ptp-primary); }

/* ---- Toggles ---- */
.ptp-toggle-label {
    display: flex; align-items: center; gap: 0.65rem;
    cursor: pointer; font-size: 0.9rem; color: var(--ptp-text); user-select: none;
}
.ptp-toggle-label input[type="checkbox"] { display: none !important; }
.ptp-toggle-switch {
    position: relative; width: 44px; height: 24px;
    background: var(--ptp-border); border-radius: var(--ptp-radius-full);
    flex-shrink: 0; transition: background 0.2s;
}
.ptp-toggle-switch::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px; background: #fff; border-radius: 50%;
    transition: transform 0.2s; box-shadow: var(--ptp-shadow-sm);
}
.ptp-toggle-label input:checked + .ptp-toggle-switch { background: var(--ptp-primary); }
.ptp-toggle-label input:checked + .ptp-toggle-switch::after { transform: translateX(20px); }
.ptp-toggle-sm { font-size: 0.85rem; }
.ptp-toggle-switch-sm { width: 36px; height: 20px; }
.ptp-toggle-switch-sm::after { width: 16px; height: 16px; }
.ptp-toggle-sm input:checked + .ptp-toggle-switch-sm::after { transform: translateX(16px); }

/* ---- Resize ---- */
.ptp-resize-options {
    padding: 0.9rem; background: var(--ptp-bg-sec);
    border-radius: var(--ptp-radius-md); margin-top: 0.5rem;
}
.ptp-resize-tabs { display: flex; gap: 0.5rem; margin-bottom: 0.9rem; }
.ptp-resize-tab {
    flex: 1; padding: 0.45rem 0.75rem;
    border: 1px solid var(--ptp-border); border-radius: var(--ptp-radius-md);
    background: var(--ptp-bg-el); color: var(--ptp-text);
    font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.2s;
}
.ptp-resize-tab:hover { border-color: var(--ptp-primary); }
.ptp-resize-tab.active { background: var(--ptp-primary); border-color: var(--ptp-primary); color: #fff; }

.ptp-pct-presets { display: flex; gap: 0.4rem; margin-bottom: 0.65rem; flex-wrap: wrap; }
.ptp-pct-btn {
    padding: 0.4rem 0.75rem; border: 1px solid var(--ptp-border);
    border-radius: var(--ptp-radius-md); background: var(--ptp-bg-el);
    color: var(--ptp-text); font-size: 0.82rem; font-weight: 500;
    cursor: pointer; transition: all 0.2s;
}
.ptp-pct-btn:hover { border-color: var(--ptp-primary); }
.ptp-pct-btn.active { background: var(--ptp-primary); border-color: var(--ptp-primary); color: #fff; }

.ptp-dim-row { display: flex; align-items: flex-end; gap: 0.65rem; margin-bottom: 0.65rem; }
.ptp-dim-group { flex: 1; }
.ptp-dim-group label { display: block; font-size: 0.78rem; color: var(--ptp-text-muted); margin-bottom: 0.3rem; }
.ptp-dim-input {
    width: 100%; padding: 0.5rem 0.6rem;
    border: 1px solid var(--ptp-border); border-radius: var(--ptp-radius-md);
    background: var(--ptp-bg-el); color: var(--ptp-text);
    font-size: 0.88rem; transition: border-color 0.2s;
}
.ptp-dim-input:focus { outline: none; border-color: var(--ptp-primary); }
.ptp-dim-input::placeholder { color: var(--ptp-text-muted); }
.ptp-dim-link { padding: 0.5rem; color: var(--ptp-primary); }
.ptp-dim-link i, .ptp-dim-link svg { width: 16px; height: 16px; }
.ptp-aspect-label {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.83rem; color: var(--ptp-text-sec); cursor: pointer;
}
.ptp-aspect-label input { accent-color: var(--ptp-primary) !important; width: 16px !important; height: 16px !important; margin: 0 !important; }

/* ---- Info note ---- */
.ptp-info-note {
    display: flex; gap: 0.65rem; align-items: flex-start;
    padding: 0.9rem 1.1rem; background: var(--ptp-primary-light);
    border-radius: var(--ptp-radius-md);
}
.ptp-info-note i, .ptp-info-note svg { color: var(--ptp-primary); width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.ptp-info-note span { font-size: 0.88rem; color: var(--ptp-text-sec); line-height: 1.5; }

/* ---- Action bar ---- */
.ptp-action-bar {
    display: flex; justify-content: flex-end; gap: 1rem;
    padding: 1.25rem 2rem; border-top: 1px solid var(--ptp-border);
    background: var(--ptp-bg-sec);
}

/* ---- Buttons ---- */
.ptp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.8rem 1.6rem; border-radius: var(--ptp-radius-full);
    font-size: 0.95rem; font-weight: 600; cursor: pointer; border: none;
    text-decoration: none; transition: all 0.2s; line-height: 1;
}
.ptp-btn i, .ptp-btn svg { width: 18px; height: 18px; }
.ptp-btn-primary { background: var(--ptp-primary); color: #fff; box-shadow: var(--ptp-shadow-pri); }
.ptp-btn-primary:hover { background: var(--ptp-primary-dark); transform: translateY(-2px); box-shadow: var(--ptp-shadow-pho); }
.ptp-btn-secondary { background: var(--ptp-bg-el); color: var(--ptp-text); border: 1px solid var(--ptp-border); }
.ptp-btn-secondary:hover { background: var(--ptp-bg-sec); border-color: var(--ptp-text-muted); }
/* Feature 9: ICO button - uses red accent */
.ptp-btn-ico {
    background: #e64e4e; color: #fff; white-space: nowrap;
    box-shadow: 0 4px 14px rgba(230,78,78,0.25);
}
.ptp-btn-ico:hover { background: #c73d3d; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(230,78,78,0.35); }

/* ---- Processing overlay ---- */
.ptp-processing-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.65); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center; z-index: 9000;
}
.ptp-processing-card {
    background: var(--ptp-bg-el); border: 1px solid var(--ptp-border);
    border-radius: var(--ptp-radius-xl); padding: 2.25rem 2.5rem;
    min-width: 340px; max-width: 400px;
    text-align: center; box-shadow: var(--ptp-shadow-xl);
}

/* Stage dots */
.ptp-stages { display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; }
.ptp-stage { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ptp-stage span { font-size: 0.7rem; color: var(--ptp-text-muted); font-weight: 500; white-space: nowrap; }
.ptp-stage-dot {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--ptp-bg-sec); border: 2px solid var(--ptp-border);
    display: flex; align-items: center; justify-content: center;
    color: var(--ptp-text-muted); transition: all 0.4s;
}
.ptp-stage-dot i, .ptp-stage-dot svg { width: 18px; height: 18px; }
.ptp-stage.active .ptp-stage-dot { background: var(--ptp-primary-light); border-color: var(--ptp-primary); color: var(--ptp-primary); }
.ptp-stage.active span { color: var(--ptp-primary); font-weight: 600; }
.ptp-stage.done .ptp-stage-dot { background: var(--ptp-success-light); border-color: var(--ptp-success); color: var(--ptp-success); }
.ptp-stage.done span { color: var(--ptp-success); }
.ptp-stage-line { width: 28px; height: 2px; background: var(--ptp-border); margin-bottom: 20px; flex-shrink: 0; transition: background 0.4s; }
.ptp-stage-line.done { background: var(--ptp-success); }

.ptp-progress-wrap { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem; }
.ptp-progress-bar-track { flex: 1; height: 8px; background: var(--ptp-bg-ter); border-radius: var(--ptp-radius-full); overflow: hidden; }
.ptp-progress-bar { height: 100%; background: var(--ptp-primary); width: 0%; border-radius: var(--ptp-radius-full); transition: width 0.3s ease; }
.ptp-progress-pct { font-size: 0.9rem; font-weight: 700; color: var(--ptp-text); min-width: 38px; text-align: right; }
.ptp-processing-msg { font-size: 0.88rem; color: var(--ptp-text-muted); margin: 0; min-height: 1.3em; }

/* ---- Results ---- */
.ptp-results-section { padding: 2.5rem; text-align: center; }
.ptp-results-header { margin-bottom: 2rem; }
.ptp-success-icon {
    width: 68px; height: 68px; background: var(--ptp-success); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; color: #fff;
}
.ptp-success-icon i, .ptp-success-icon svg { width: 34px; height: 34px; }
.ptp-results-header h2 { font-size: 1.7rem; color: var(--ptp-text); margin: 0 0 0.4rem; }
.ptp-results-header p { color: var(--ptp-text-muted); margin: 0; }

.ptp-converted-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 1rem; margin-bottom: 2rem; text-align: left;
}
.ptp-converted-item {
    display: flex; flex-direction: column; padding: 0.9rem;
    background: var(--ptp-bg-sec); border: 1px solid var(--ptp-border);
    border-radius: var(--ptp-radius-md); transition: all 0.2s;
}
.ptp-converted-item:hover { border-color: var(--ptp-primary); box-shadow: var(--ptp-shadow-md); }

.ptp-converted-preview {
    width: 100%; height: 96px; border-radius: var(--ptp-radius-sm);
    background-image: linear-gradient(45deg,var(--ptp-checker-a) 25%,transparent 25%),
        linear-gradient(-45deg,var(--ptp-checker-a) 25%,transparent 25%),
        linear-gradient(45deg,transparent 75%,var(--ptp-checker-a) 75%),
        linear-gradient(-45deg,transparent 75%,var(--ptp-checker-a) 75%);
    background-size: 12px 12px;
    background-position: 0 0,0 6px,6px -6px,-6px 0;
    background-color: var(--ptp-checker-b);
    overflow: hidden; display: flex; align-items: center; justify-content: center;
    margin-bottom: 0.7rem; border: 1px solid var(--ptp-border);
}
.ptp-converted-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }

.ptp-converted-name {
    font-weight: 600; font-size: 0.82rem; color: var(--ptp-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0.2rem;
}
.ptp-converted-meta {
    display: flex; flex-direction: column; gap: 2px;
    font-size: 0.72rem; color: var(--ptp-text-muted); margin-bottom: 0.65rem;
}
.ptp-converted-dl {
    display: flex; align-items: center; justify-content: center; gap: 0.3rem;
    padding: 0.45rem; background: var(--ptp-primary); color: #fff;
    border-radius: var(--ptp-radius-md); text-decoration: none;
    font-size: 0.78rem; font-weight: 600; transition: background 0.2s;
}
.ptp-converted-dl:hover { background: var(--ptp-primary-dark); }
.ptp-converted-dl i, .ptp-converted-dl svg { width: 13px; height: 13px; }

.ptp-results-stats {
    display: flex; justify-content: center; align-items: center;
    gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.ptp-stat { text-align: center; }
.ptp-stat-label { display: block; font-size: 0.75rem; color: var(--ptp-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.2rem; }
.ptp-stat-value { font-size: 1.2rem; font-weight: 700; color: var(--ptp-text); }
.ptp-stat-hl .ptp-stat-value { color: var(--ptp-primary); }
.ptp-stat-arrow { color: var(--ptp-text-muted); }
.ptp-stat-arrow i, .ptp-stat-arrow svg { width: 20px; height: 20px; }

.ptp-conversion-info { margin-bottom: 1.25rem; }
.ptp-info-badge {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    background: var(--ptp-bg-sec); border-radius: var(--ptp-radius-full);
    font-size: 0.82rem; color: var(--ptp-text-sec); margin: 0.2rem;
}
.ptp-info-badge i, .ptp-info-badge svg { color: var(--ptp-primary); width: 13px; height: 13px; }

/* Feature 9: ICO CTA */
.ptp-ico-cta {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    margin-bottom: 1.5rem; padding: 1rem 1.25rem;
    background: rgba(230,78,78,0.08);
    border: 1px solid rgba(230,78,78,0.25);
    border-radius: var(--ptp-radius-lg);
    text-align: left;
}
.ptp-ico-cta > i, .ptp-ico-cta > svg { color: #e64e4e; width: 22px; height: 22px; flex-shrink: 0; }
.ptp-ico-cta-text { flex: 1; min-width: 0; }
.ptp-ico-cta-text strong { display: block; color: var(--ptp-text); font-size: 0.95rem; margin-bottom: 0.15rem; }
.ptp-ico-cta-text span { font-size: 0.85rem; color: var(--ptp-text-sec); line-height: 1.4; }

.ptp-results-actions { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

/* ---- Error ---- */
.ptp-error {
    background: var(--ptp-danger-light); border: 1px solid var(--ptp-danger);
    color: var(--ptp-danger); padding: 1rem 1.25rem;
    border-radius: var(--ptp-radius-md); margin: 1.25rem;
    font-size: 0.9rem; line-height: 1.5;
}
.ptp-error a { color: var(--ptp-danger); font-weight: 600; }

/* ---- Related ---- */
.ptp-related {
    display: flex; align-items: center; flex-wrap: wrap; gap: 1rem;
    padding: 1.1rem 1.4rem; background: var(--ptp-bg-el);
    border-radius: var(--ptp-radius-lg); border: 1px solid var(--ptp-border);
    margin-bottom: 2rem; box-shadow: var(--ptp-shadow-sm);
}
.ptp-related-label { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.88rem; color: var(--ptp-text); white-space: nowrap; }
.ptp-related-label i, .ptp-related-label svg { color: var(--ptp-primary); width: 16px; height: 16px; }
.ptp-related-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ptp-related-link {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.45rem 0.9rem; background: var(--ptp-bg-sec);
    border-radius: var(--ptp-radius-full); color: var(--ptp-text-sec);
    text-decoration: none; font-size: 0.85rem; font-weight: 500;
    border: 1px solid var(--ptp-border); transition: all 0.2s;
}
.ptp-related-link i, .ptp-related-link svg { width: 14px; height: 14px; }
.ptp-related-link:hover { background: var(--ptp-primary); color: #fff; border-color: var(--ptp-primary); transform: translateY(-1px); }

/* ---- Info sections ---- */
.ptp-info-sections { display: flex; flex-direction: column; gap: 1.5rem; }
.ptp-info-card { background: var(--ptp-bg-el); border: 1px solid var(--ptp-border); border-radius: var(--ptp-radius-xl); padding: 2rem; }
.ptp-info-card h2 {
    display: flex; align-items: center; gap: 0.65rem;
    font-size: 1.25rem; color: var(--ptp-text); margin: 0 0 1.5rem;
}
.ptp-info-card h2 i, .ptp-info-card h2 svg { color: var(--ptp-primary); width: 22px; height: 22px; }

.ptp-steps { counter-reset: ptp-step; list-style: none; padding: 0; margin: 0; }
.ptp-steps li { position: relative; padding-left: 3rem; margin-bottom: 1rem; counter-increment: ptp-step; color: var(--ptp-text-sec); line-height: 1.6; }
.ptp-steps li::before { content: counter(ptp-step); position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; background: var(--ptp-primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.85rem; }
.ptp-steps li:not(:last-child)::after { content: ''; position: absolute; left: calc(1rem - 1px); top: 2rem; bottom: 0; width: 2px; background: var(--ptp-primary-light); }
.ptp-steps li:last-child { margin-bottom: 0; }
.ptp-steps li a { color: var(--ptp-primary); text-decoration: none; }
.ptp-steps li a:hover { text-decoration: underline; }

.ptp-tip {
    display: flex; align-items: flex-start; gap: 0.65rem;
    margin-top: 1.25rem; padding: 0.9rem 1.1rem;
    background: var(--ptp-warning-light); border-radius: var(--ptp-radius-md);
    font-size: 0.88rem; color: var(--ptp-text-sec); line-height: 1.6;
}
.ptp-tip i, .ptp-tip svg { color: var(--ptp-warning); flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }
.ptp-tip a { color: var(--ptp-primary); font-weight: 600; text-decoration: none; }
.ptp-tip a:hover { text-decoration: underline; }

.ptp-format-grid { display: flex; flex-direction: column; gap: 1rem; }
.ptp-format-item { display: flex; align-items: flex-start; gap: 1rem; }
.ptp-format-tag {
    flex-shrink: 0; padding: 0.3rem 0.8rem; border-radius: var(--ptp-radius-full);
    font-size: 0.82rem; font-weight: 600; color: #fff; white-space: nowrap; margin-top: 2px;
}
.ptp-tag-psd     { background: #31a8ff; }
.ptp-tag-png     { background: var(--ptp-primary); }
.ptp-tag-jpg     { background: #f59e0b; }
.ptp-tag-webp    { background: #339966; }
.ptp-tag-flatten { background: var(--ptp-primary); }
.ptp-tag-visible { background: #9b59b6; }
.ptp-tag-each    { background: #e64e4e; }

.ptp-format-item p { margin: 0; color: var(--ptp-text-sec); line-height: 1.6; font-size: 0.9rem; }
.ptp-format-item p a { color: var(--ptp-primary); text-decoration: none; }
.ptp-format-item p a:hover { text-decoration: underline; }

.ptp-benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 1.25rem; }
.ptp-benefit { display: flex; gap: 0.9rem; align-items: flex-start; }
.ptp-benefit-icon { width: 40px; height: 40px; background: var(--ptp-primary-light); border-radius: var(--ptp-radius-md); display: flex; align-items: center; justify-content: center; color: var(--ptp-primary); flex-shrink: 0; }
.ptp-benefit-icon i, .ptp-benefit-icon svg { width: 19px; height: 19px; }
.ptp-benefit h4 { margin: 0 0 0.2rem; font-size: 0.95rem; color: var(--ptp-text); }
.ptp-benefit p { margin: 0; font-size: 0.85rem; color: var(--ptp-text-sec); line-height: 1.5; }
.ptp-benefit p a { color: var(--ptp-primary); text-decoration: none; }
.ptp-benefit p a:hover { text-decoration: underline; }

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 0.65rem; }
.faq-item { border: 1px solid var(--ptp-border); border-radius: var(--ptp-radius-md); overflow: hidden; }
.faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0.95rem 1.2rem; background: var(--ptp-bg-sec); border: none; cursor: pointer; font-size: 0.95rem; font-weight: 500; color: var(--ptp-text); text-align: left; transition: background 0.2s; }
.faq-question:hover { background: var(--ptp-bg-ter); }
.faq-question i, .faq-question svg { flex-shrink: 0; color: var(--ptp-primary); width: 18px; height: 18px; transition: transform 0.3s; }
.faq-item.open .faq-question i, .faq-item.open .faq-question svg { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-item.open .faq-answer { max-height: 350px; }
.faq-answer p { padding: 0.95rem 1.2rem; margin: 0; color: var(--ptp-text-sec); line-height: 1.7; border-top: 1px solid var(--ptp-border); background: var(--ptp-bg-el); font-size: 0.9rem; }
.faq-answer a { color: var(--ptp-primary); text-decoration: none; }
.faq-answer a:hover { text-decoration: underline; }

/* ---- Animations ---- */
@keyframes ptp-spin { to { transform: rotate(360deg); } }
@keyframes ptp-fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.ptp-editor-section, .ptp-results-section { animation: ptp-fadeIn 0.35s ease; }
.ptp-psd-info-bar { animation: ptp-fadeIn 0.3s ease; }

/* ---- Responsive ---- */
@media (max-width: 860px) { .ptp-settings-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
    .ptp-container { padding: 1rem; }
    .ptp-upload-section { padding: 1.5rem; }
    .ptp-upload-area { padding: 2.5rem 1.25rem; }
    .ptp-files-grid { grid-template-columns: repeat(auto-fill, minmax(110px,1fr)); padding: 1rem 1.25rem; }
    .ptp-mode-3 { grid-template-columns: repeat(3, 1fr); }
    .ptp-trans-options { grid-template-columns: repeat(4, 1fr); }
    .ptp-dpi-presets { grid-template-columns: repeat(4, 1fr); }
    .ptp-settings-panel { padding: 1.25rem; }
    .ptp-action-bar { flex-direction: column; padding: 1rem; }
    .ptp-btn { width: 100%; }
    .ptp-results-section { padding: 1.5rem 1rem; }
    .ptp-converted-grid { grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); }
    .ptp-results-stats { flex-direction: column; }
    .ptp-stat-arrow { transform: rotate(90deg); }
    .ptp-results-actions { flex-direction: column; }
    .ptp-results-actions .ptp-btn { width: 100%; }
    .ptp-related { flex-direction: column; align-items: flex-start; }
    .ptp-info-card { padding: 1.25rem; }
    .ptp-format-item { flex-direction: column; gap: 0.4rem; }
    .ptp-benefits-grid { grid-template-columns: 1fr; }
    .ptp-processing-card { min-width: 290px; padding: 1.5rem; }
    .ptp-ico-cta { flex-direction: column; align-items: flex-start; }
    .ptp-ico-cta .ptp-btn-ico { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
    .ptp-title-row { flex-direction: column; gap: 0.75rem; }
    .ptp-mode-3 { grid-template-columns: 1fr; }
    .ptp-trans-options { grid-template-columns: repeat(2, 1fr); }
    .ptp-dpi-presets { grid-template-columns: repeat(2, 1fr); }
    .ptp-fmt-btns { grid-template-columns: 1fr; }
    .ptp-dim-row { flex-direction: column; }
    .ptp-dim-link { transform: rotate(90deg); }
    .ptp-converted-grid { grid-template-columns: 1fr 1fr; }
    .ptp-stage-line { width: 16px; }
    .ptp-psd-info-bar { padding: 0.75rem 1rem; }
}

/* Scrollbar */
.ptp-files-grid::-webkit-scrollbar { width: 6px; }
.ptp-files-grid::-webkit-scrollbar-track { background: var(--ptp-bg-sec); border-radius: 3px; }
.ptp-files-grid::-webkit-scrollbar-thumb { background: var(--ptp-text-muted); border-radius: 3px; }

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