/* ==========================================================================
   SVG to PDF - 2026-10-23 rebuild
   Everything scoped to .s2p. Accent: red (PDF tools). Light by default,
   [data-theme="dark"] overrides at the end. No 3-4px accent borders.
   ========================================================================== */

.s2p {
    --s2p-accent: #e64e4e;
    --s2p-accent-dark: #c93c3c;
    --s2p-accent-soft: rgba(230, 78, 78, 0.10);
    --s2p-accent-line: rgba(230, 78, 78, 0.35);
    --s2p-green: #339966;
    --s2p-blue: #3399cc;
    --s2p-card: var(--card-bg, #fff);
    --s2p-elev: var(--bg-elevated, #fff);
    --s2p-soft: var(--card-tertiary, #f1f5f9);
    --s2p-line: var(--border-color, #e0e0e0);
    --s2p-text: var(--text-primary, #333);
    --s2p-text2: var(--text-secondary, #555);
    --s2p-muted: var(--text-muted, #666);
    --s2p-stage: #eef1f5;
    --s2p-radius: 14px;
    --tool-accent: var(--s2p-accent);
    max-width: 1100px;
}

.s2p [hidden] { display: none !important; }

/* ---------- header ---------- */
.s2p .tool-description { max-width: 900px; }
.s2p-title-icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--s2p-accent); color: #fff; flex-shrink: 0;
}
.s2p-title-icon svg { width: 24px; height: 24px; }

/* ---------- shared bits ---------- */
.s2p-h {
    display: flex; align-items: center; gap: 8px; margin: 0;
    font-size: .95rem; font-weight: 700; color: var(--s2p-text);
}
.s2p-h svg { width: 18px; height: 18px; color: var(--s2p-accent); flex-shrink: 0; }
.s2p-caption {
    display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--s2p-muted);
}
.s2p-mt { margin-top: 12px; }
.s2p-small { font-size: .82rem !important; }

.s2p-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 20px; border-radius: 10px; border: 1px solid transparent;
    font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer; text-decoration: none;
    transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.s2p-btn svg { width: 18px; height: 18px; }
.s2p-btn:active { transform: translateY(1px); }
.s2p-btn-go { background: var(--s2p-accent); color: #fff; }
.s2p-btn-go:hover { background: var(--s2p-accent-dark); color: #fff; }
.s2p-btn-go:disabled { opacity: .55; cursor: not-allowed; }
.s2p-btn-ghost { background: var(--s2p-card); border-color: var(--s2p-line); color: var(--s2p-text); }
.s2p-btn-ghost:hover { border-color: var(--s2p-accent); color: var(--s2p-accent); }
.s2p-btn.s2p-small { min-height: 34px; padding: 0 12px; }

.s2p-link-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 4px;
    border: 0; background: none; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 600;
    color: var(--s2p-accent);
}
.s2p-link-btn svg { width: 16px; height: 16px; }
.s2p-link-btn:hover { text-decoration: underline; }

.s2p-input {
    width: 100%; min-height: 38px; padding: 6px 10px; border-radius: 8px;
    border: 1px solid var(--s2p-line); background: var(--input-bg, #fff); color: var(--s2p-text);
    font: inherit; font-size: .92rem; box-sizing: border-box;
}
.s2p-input:focus { outline: none; border-color: var(--s2p-accent); box-shadow: 0 0 0 3px var(--s2p-accent-soft); }

/* ---------- 1. upload ---------- */
.s2p-upload {
    background: var(--s2p-card); border: 1px solid var(--s2p-line); border-radius: 20px;
    padding: 20px; margin-bottom: 1.5rem;
}
.s2p-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    min-height: 230px; padding: 28px 18px; border-radius: 16px; cursor: pointer;
    border: 2px dashed var(--s2p-accent-line); background: var(--s2p-accent-soft);
    transition: border-color .15s, background .15s;
}
.s2p-drop:hover, .s2p-drop:focus-visible, .s2p-drop.drag {
    border-color: var(--s2p-accent); background: rgba(230, 78, 78, 0.15); outline: none;
}
.s2p-drop-icon {
    width: 64px; height: 64px; border-radius: 50%; margin-bottom: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--s2p-accent); color: #fff;
}
.s2p-drop-icon svg { width: 30px; height: 30px; }
.s2p-drop-title { margin: 0 0 6px; font-size: 1.25rem; font-weight: 800; color: var(--s2p-text); }
.s2p-drop-sub { margin: 0; font-size: .93rem; color: var(--s2p-text2); }
.s2p-drop-link { color: var(--s2p-accent); font-weight: 700; text-decoration: underline; }
.s2p-upload-extra { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 12px; }
.s2p-upload-note {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 8px 0 0; font-size: .82rem; color: var(--s2p-muted);
}
.s2p-upload-note svg { width: 14px; height: 14px; color: var(--s2p-green); }

.s2p-paste { margin-top: 14px; padding: 14px; border-radius: 12px; background: var(--s2p-soft); border: 1px solid var(--s2p-line); }
.s2p-paste .s2p-h { margin-bottom: 8px; }
.s2p-textarea {
    width: 100%; box-sizing: border-box; resize: vertical; min-height: 120px; padding: 10px 12px;
    border-radius: 8px; border: 1px solid var(--s2p-line); background: var(--input-bg, #fff); color: var(--s2p-text);
    font: .85rem/1.45 Consolas, Monaco, monospace;
}
.s2p-textarea:focus { outline: none; border-color: var(--s2p-accent); box-shadow: 0 0 0 3px var(--s2p-accent-soft); }
.s2p-paste-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }

/* ---------- 2. editor ---------- */
.s2p-editor { margin-bottom: 1.5rem; }
.s2p-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.s2p-panel {
    min-width: 0; background: var(--s2p-card); border: 1px solid var(--s2p-line);
    border-radius: 20px; padding: 18px;
}
.s2p-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.s2p-page-label {
    padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700;
    background: var(--s2p-accent-soft); color: var(--s2p-accent); white-space: nowrap;
}

/* live page preview */
.s2p-stage {
    position: relative; height: 380px; border-radius: 14px; background: var(--s2p-stage);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.s2p-page {
    position: relative; background: #fff; box-shadow: 0 6px 22px rgba(15, 23, 42, .16), 0 1px 3px rgba(15, 23, 42, .12);
}
.s2p-page.transparent {
    background-color: #fff;
    background-image: linear-gradient(45deg, #e9edf2 25%, transparent 25%), linear-gradient(-45deg, #e9edf2 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e9edf2 75%), linear-gradient(-45deg, transparent 75%, #e9edf2 75%);
    background-size: 14px 14px; background-position: 0 0, 0 7px, 7px -7px, -7px 0;
}
.s2p-margin-guide { position: absolute; border: 1px dashed rgba(230, 78, 78, .55); pointer-events: none; }
.s2p-art { position: absolute; display: block; max-width: none; pointer-events: none; }
.s2p-preview-meta { margin: 10px 0 0; font-size: .84rem; color: var(--s2p-text2); text-align: center; min-height: 1.3em; }

.s2p-warns { margin-top: 10px; display: grid; gap: 8px; }
.s2p-warn {
    display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px;
    font-size: .85rem; line-height: 1.45; color: var(--s2p-text);
    background: rgba(245, 158, 11, .10); border: 1px solid rgba(245, 158, 11, .35);
}
.s2p-warn.info { background: rgba(51, 153, 204, .08); border-color: rgba(51, 153, 204, .3); }
.s2p-warn svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; color: #d97706; }
.s2p-warn.info svg { color: var(--s2p-blue); }
.s2p-warn button { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--s2p-accent); cursor: pointer; text-decoration: underline; }

/* file strip */
.s2p-strip-head { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 8px; }
.s2p-strip {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px;
    max-height: 236px; overflow-y: auto; padding: 2px;
}
.s2p-thumb {
    position: relative; min-width: 0; padding: 6px; border-radius: 10px; cursor: pointer;
    background: var(--s2p-soft); border: 1px solid var(--s2p-line); text-align: center;
    transition: border-color .15s, box-shadow .15s, opacity .15s;
}
.s2p-thumb:hover { border-color: var(--s2p-accent-line); }
.s2p-thumb.on { border-color: var(--s2p-accent); box-shadow: 0 0 0 2px var(--s2p-accent-soft); }
.s2p-thumb.dragging { opacity: .4; }
.s2p-thumb.drop-before { box-shadow: -3px 0 0 var(--s2p-accent); }
.s2p-thumb-img {
    height: 56px; display: flex; align-items: center; justify-content: center;
    background: #fff; border-radius: 6px; overflow: hidden;
}
.s2p-thumb-img img { max-width: 100%; max-height: 100%; display: block; }
.s2p-thumb-name { display: block; margin-top: 5px; font-size: .7rem; color: var(--s2p-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s2p-thumb-num {
    position: absolute; top: 3px; left: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--s2p-accent); color: #fff; font-size: .68rem; font-weight: 800; line-height: 18px;
}
.s2p-thumb-warn { position: absolute; top: 3px; right: 24px; width: 18px; height: 18px; border-radius: 50%; background: #f59e0b; color: #fff; display: flex; align-items: center; justify-content: center; }
.s2p-thumb-warn svg { width: 11px; height: 11px; }
.s2p-thumb-x {
    position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; padding: 0;
    display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer;
    background: rgba(15, 23, 42, .65); color: #fff; opacity: 0; transition: opacity .15s;
}
.s2p-thumb:hover .s2p-thumb-x, .s2p-thumb:focus-within .s2p-thumb-x, .s2p-thumb.on .s2p-thumb-x { opacity: 1; }
.s2p-thumb-x svg { width: 11px; height: 11px; }
.s2p-strip-hint { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: .8rem; color: var(--s2p-muted); }
.s2p-strip-hint svg { width: 14px; height: 14px; }

/* ---------- settings ---------- */
.s2p-presets { margin-bottom: 14px; }
.s2p-presets-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.s2p-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.s2p-chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px;
    border: 1px solid var(--s2p-line); background: var(--s2p-card); color: var(--s2p-text2);
    font: inherit; font-size: .83rem; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.s2p-chip svg { width: 14px; height: 14px; }
.s2p-chip:hover { border-color: var(--s2p-accent); color: var(--s2p-accent); }
.s2p-chip.on { background: var(--s2p-accent); border-color: var(--s2p-accent); color: #fff; }
.s2p-chip-x { display: inline-flex; margin-right: -4px; padding: 2px; border-radius: 50%; opacity: .7; }
.s2p-chip-x:hover { opacity: 1; background: rgba(0, 0, 0, .12); }
.s2p-chip-x svg { width: 12px; height: 12px; }
.s2p-preset-save { display: flex; gap: 6px; margin-top: 8px; }

.s2p-block {
    background: var(--s2p-elev); border: 1px solid var(--s2p-line); border-radius: 12px;
    padding: 14px; margin-bottom: 14px;
}
.s2p-block > .s2p-h { margin-bottom: 10px; }
.s2p-sizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.s2p-size {
    min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px 8px;
    border-radius: 10px; border: 1px solid var(--s2p-line); background: var(--s2p-card); color: var(--s2p-text);
    font: inherit; cursor: pointer; transition: border-color .15s, background .15s;
}
.s2p-size svg { width: 18px; height: 18px; color: var(--s2p-muted); margin-bottom: 2px; }
.s2p-size-label { font-size: .86rem; font-weight: 700; }
.s2p-size small { font-size: .68rem; color: var(--s2p-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.s2p-size:hover { border-color: var(--s2p-accent-line); }
.s2p-size.on { border-color: var(--s2p-accent); background: var(--s2p-accent-soft); }
.s2p-size.on svg, .s2p-size.on .s2p-size-label { color: var(--s2p-accent); }

.s2p-custom { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.s2p-custom label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 90px; min-width: 0; font-size: .78rem; font-weight: 600; color: var(--s2p-muted); }
.s2p-x { padding-bottom: 9px; color: var(--s2p-muted); }

/* segmented controls + quick chips */
.s2p-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.s2p-seg button, .s2p-quick button {
    flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 38px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--s2p-line);
    background: var(--s2p-card); color: var(--s2p-text); font: inherit; font-size: .86rem; font-weight: 600;
    cursor: pointer; transition: border-color .15s, background .15s, color .15s; white-space: nowrap;
}
.s2p-seg button svg { width: 15px; height: 15px; flex-shrink: 0; }
.s2p-seg button:hover, .s2p-quick button:hover { border-color: var(--s2p-accent-line); }
.s2p-seg button.on, .s2p-quick button.on { border-color: var(--s2p-accent); background: var(--s2p-accent-soft); color: var(--s2p-accent); }
.s2p-seg button:disabled { opacity: .45; cursor: not-allowed; }
.s2p-seg-sm button { flex: 0 0 auto; min-height: 32px; font-size: .8rem; }
.s2p-quick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.s2p-num-chip { display: flex; align-items: center; gap: 4px; min-width: 0; }
.s2p-num-chip .s2p-input { min-height: 38px; padding: 4px 6px; text-align: center; }
.s2p-num-chip span { font-size: .78rem; color: var(--s2p-muted); }
.s2p-num-chip.on .s2p-input { border-color: var(--s2p-accent); background: var(--s2p-accent-soft); }

.s2p-swatch { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .2); flex-shrink: 0; }
.s2p-swatch-none {
    background-color: #fff;
    background-image: linear-gradient(45deg, #cbd5e1 25%, transparent 25%), linear-gradient(-45deg, #cbd5e1 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #cbd5e1 75%), linear-gradient(-45deg, transparent 75%, #cbd5e1 75%);
    background-size: 6px 6px; background-position: 0 0, 0 3px, 3px -3px, -3px 0;
}
.s2p-color { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; font-size: .86rem; font-family: Consolas, Monaco, monospace; color: var(--s2p-text2); }
.s2p-color input[type="color"] { width: 44px; height: 32px; padding: 2px; border: 1px solid var(--s2p-line); border-radius: 8px; background: var(--s2p-card); cursor: pointer; }

.s2p-field { display: block; }
.s2p-input-suffix { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.s2p-input-suffix span { font-size: .88rem; color: var(--s2p-muted); }

/* collapsed option rows */
.s2p-adv { border: 1px solid var(--s2p-line); border-radius: 12px; overflow: hidden; background: var(--s2p-elev); }
.s2p-row + .s2p-row { border-top: 1px solid var(--s2p-line); }
.s2p-row-head {
    width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 14px; border: 0; background: none; color: var(--s2p-text); font: inherit; text-align: left; cursor: pointer;
}
.s2p-row-head:hover { background: var(--s2p-soft); }
.s2p-row-head:focus-visible { outline: 2px solid var(--s2p-accent); outline-offset: -2px; }
.s2p-row-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.s2p-row-left > svg { width: 18px; height: 18px; color: var(--s2p-accent); flex-shrink: 0; }
.s2p-row-text { display: flex; flex-direction: column; min-width: 0; }
.s2p-row-title { font-size: .92rem; font-weight: 700; }
.s2p-row-hint { font-size: .78rem; color: var(--s2p-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s2p-row-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.s2p-value {
    padding: 3px 9px; border-radius: 999px; font-size: .76rem; font-weight: 700; white-space: nowrap;
    background: var(--s2p-soft); border: 1px solid var(--s2p-line); color: var(--s2p-text2);
}
.s2p-chev { width: 16px; height: 16px; color: var(--s2p-muted); transition: transform .2s; }
.s2p-row.open .s2p-chev { transform: rotate(180deg); }
.s2p-row.open .s2p-row-head, .s2p-row.open .s2p-row-body { background: var(--s2p-soft); }
.s2p-row-body { padding: 4px 14px 14px; }

.s2p-summary {
    display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 10px 12px; border-radius: 10px;
    background: var(--s2p-soft); font-size: .82rem; color: var(--s2p-text2);
}
.s2p-summary span { display: inline-flex; align-items: center; gap: 5px; }
.s2p-summary svg { width: 14px; height: 14px; color: var(--s2p-accent); }
.s2p-summary span + span::before { content: "·"; margin-right: 6px; color: var(--s2p-muted); }
.s2p-actions { display: flex; gap: 10px; margin-top: 14px; }
.s2p-actions .s2p-btn-go { flex: 1; }

/* ---------- overlay (ring logo loader) ---------- */
.s2p-overlay {
    position: fixed; inset: 0; z-index: 9000; background: rgba(0, 0, 0, .6);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.s2p-overlay-card {
    width: 100%; max-width: 360px; min-width: 0; padding: 28px 24px; border-radius: 18px; text-align: center;
    background: var(--s2p-card); border: 1px solid var(--s2p-line);
}
.s2p-loader {
    display: block; width: 72px; height: 72px; margin: 0 auto 1rem; overflow: visible;
    --cico-outer: #f2534e; --cico-outer-soft: #f8d3d1; --cico-mid: #31ae77; --cico-mid-soft: #d0e7dd; --cico-inner: #2b9edb;
}
.s2p-loader circle { fill: none; stroke-width: 72; transform-box: fill-box; transform-origin: center; }
.s2p-loader .bp { stroke: var(--cico-outer-soft); }
.s2p-loader .gp { stroke: var(--cico-mid-soft); }
.s2p-loader .b { stroke: var(--cico-outer); stroke-linecap: round; stroke-dasharray: 35.3 100; animation: s2pSpinL 1.3s linear infinite; }
.s2p-loader .g { stroke: var(--cico-mid); stroke-linecap: round; stroke-dasharray: 75.8 100; animation: s2pSpinR 2.1s linear infinite; }
.s2p-loader .r { stroke: var(--cico-inner); animation: s2pBreathe 1.3s ease-in-out infinite; }
@keyframes s2pSpinL { from { transform: rotate(117deg); } to { transform: rotate(-243deg); } }
@keyframes s2pSpinR { from { transform: rotate(36deg); } to { transform: rotate(396deg); } }
@keyframes s2pBreathe { 50% { transform: scale(0.9); } }
.s2p-overlay-title { margin: 0 0 12px; font-weight: 800; font-size: 1.05rem; color: var(--s2p-text); }
.s2p-progress { height: 8px; border-radius: 999px; overflow: hidden; background: var(--s2p-soft); }
.s2p-progress-fill { height: 100%; width: 0; background: var(--s2p-accent); border-radius: 999px; transition: width .2s; }
.s2p-overlay-status { margin: 10px 0 0; font-size: .85rem; color: var(--s2p-text2); }

/* ---------- 3. result ---------- */
.s2p-result {
    background: var(--s2p-card); border: 1px solid var(--s2p-line); border-radius: 20px;
    padding: 22px; margin-bottom: 1.5rem;
}
.s2p-result-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.s2p-result-icon {
    width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; background: var(--s2p-green); color: #fff;
}
.s2p-result-icon svg { width: 26px; height: 26px; }
.s2p .s2p-result-title { margin: 0; padding: 0; border: 0; font-size: 1.3rem; font-weight: 800; color: var(--s2p-text); }
.s2p-result-sub { margin: 2px 0 0; font-size: .9rem; color: var(--s2p-text2); }
.s2p-result-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.s2p-res {
    min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px;
    background: var(--s2p-elev); border: 1px solid var(--s2p-line);
}
.s2p-res-page {
    height: 130px; border-radius: 8px; background: var(--s2p-stage);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.s2p-res-paper { position: relative; background: #fff; box-shadow: 0 2px 8px rgba(15, 23, 42, .15); }
.s2p-res-paper img { position: absolute; display: block; max-width: none; }
.s2p-res-stack { position: absolute; inset: 0; transform: translate(5px, -5px); background: #fff; box-shadow: 0 2px 6px rgba(15, 23, 42, .12); z-index: -1; }
.s2p-res-name { font-size: .88rem; font-weight: 700; color: var(--s2p-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s2p-res-meta { display: flex; flex-wrap: wrap; gap: 5px; font-size: .76rem; color: var(--s2p-muted); }
.s2p-badge { padding: 2px 8px; border-radius: 999px; font-size: .7rem; font-weight: 700; }
.s2p-badge.vector { background: rgba(51, 153, 102, .12); color: var(--s2p-green); }
.s2p-badge.image { background: rgba(51, 153, 204, .12); color: var(--s2p-blue); }
.s2p-res .s2p-btn { min-height: 36px; font-size: .86rem; padding: 0 12px; }
.s2p-result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.s2p-next { margin: 14px 0 0; font-size: .88rem; color: var(--s2p-text2); }

.s2p-error {
    margin-bottom: 1.5rem; padding: 12px 16px; border-radius: 12px; font-size: .92rem; line-height: 1.5;
    background: rgba(230, 78, 78, .08); border: 1px solid rgba(230, 78, 78, .35); color: var(--s2p-text);
}
.s2p-error a { color: var(--s2p-accent); font-weight: 700; }

.s2p-measure { position: absolute; left: -100000px; top: 0; width: 1px; height: 1px; overflow: hidden; }

/* ---------- info content ---------- */
.s2p-info .info-card {
    background: var(--s2p-elev); border: 1px solid var(--s2p-line); border-radius: var(--s2p-radius);
    padding: 1.4rem 1.5rem; margin-bottom: 1.25rem;
}
.s2p-info .info-card h2 { display: flex; align-items: center; gap: 10px; margin-top: 0; font-size: 1.3rem; color: var(--s2p-text); }
.s2p-info .info-card h2 svg { width: 22px; height: 22px; color: var(--s2p-accent); flex-shrink: 0; }
.s2p-info p, .s2p-info li { line-height: 1.65; color: var(--s2p-text2); }
.s2p-info a { color: var(--s2p-accent); font-weight: 600; }
.s2p-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 12px 0; }
.s2p-card { padding: 14px; border-radius: 12px; background: var(--s2p-soft); border: 1px solid var(--s2p-line); }
.s2p-card p { margin: 0; font-size: .92rem; }
.s2p-card .s2p-card-title { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-weight: 800; color: var(--s2p-text); }
.s2p-card-title svg { width: 17px; height: 17px; color: var(--s2p-accent); }
.s2p-list { padding-left: 1.2rem; }
.s2p-list li { margin-bottom: .4rem; }
.s2p-table-wrap { overflow-x: auto; margin: 12px 0; border: 1px solid var(--s2p-line); border-radius: 10px; }
.s2p-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.s2p-table th, .s2p-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--s2p-line); color: var(--s2p-text2); }
.s2p-table th { background: var(--s2p-soft); color: var(--s2p-text); font-weight: 700; }
.s2p-table tr:last-child td { border-bottom: 0; }
.s2p-table td:first-child { font-weight: 700; color: var(--s2p-text); }
.s2p-help { margin: 14px 0 0; font-size: .9rem; }

/* ---------- dark mode ---------- */
[data-theme="dark"] .s2p {
    --s2p-stage: #0f172a;
    --s2p-accent-soft: rgba(230, 78, 78, 0.16);
}
[data-theme="dark"] .s2p-loader { --cico-outer-soft: rgba(242, 83, 78, 0.22); --cico-mid-soft: rgba(49, 174, 119, 0.22); }
[data-theme="dark"] .s2p-page { box-shadow: 0 6px 22px rgba(0, 0, 0, .55); }
[data-theme="dark"] .s2p-chip-x:hover { background: rgba(255, 255, 255, .15); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
    .s2p-grid { grid-template-columns: minmax(0, 1fr); }
    .s2p-stage { height: 320px; }
}
@media (max-width: 560px) {
    .s2p-upload, .s2p-panel, .s2p-result { padding: 14px; border-radius: 16px; }
    .s2p-sizes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
    .s2p-size small { display: none; }
    .s2p-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .s2p-stage { height: 260px; }
    .s2p-cards { grid-template-columns: minmax(0, 1fr); }
    .s2p-actions { flex-direction: column-reverse; }
    .s2p-seg button { flex: 1 1 calc(50% - 6px); }
}
/* global mobile rules stretch buttons to full width - keep the small inline ones inline */
.s2p .s2p-chip, .s2p .s2p-link-btn, .s2p .s2p-warn button, .s2p .s2p-thumb-x {
    width: auto !important; max-width: 100%; display: inline-flex !important; flex: 0 0 auto;
}
.s2p .s2p-warn button { display: inline !important; }
.s2p-strip-head .s2p-h, .s2p-panel-head .s2p-h { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
    .s2p-loader .b { animation-duration: 4s; }
    .s2p-loader .g { animation-duration: 6s; }
    .s2p-loader .r { animation: none; }
}