:root {--p:#28a745;--br:#ddd;--ta-border:#9ca3af}
.tabs-container {margin:12px 0}
.tab-nav {display:flex;flex-wrap:wrap;gap:6px;padding:8px;background:#f9f9f9;border:1px solid var(--br);border-radius:6px;justify-content:center}
.tab-button {padding:6px 12px;border:1px solid var(--br);background:#fff;color:#333;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500}
.tab-button:hover {border-color:var(--p);color:var(--p)}
.tab-button.active {background:var(--p);border-color:var(--p);color:#fff}
.tab-content {display:none}
.tab-content.active {display:block}
.ppi-out-row {display:flex;gap:12px;align-items:stretch;margin-top:4px}
.ppi-out-row .ppi-bar {display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;border:none;margin:0;overflow:visible}
.ppi-out-row .ppi-bar .ppi-ta {flex:1 1 auto;min-height:100px;width:100%;box-sizing:border-box;resize:vertical}
.ppi-out-actions {display:flex;flex-direction:column;gap:8px;flex-shrink:0;justify-content:center;align-self:stretch;min-width:88px}
.ppi-out-actions .btn {width:100%;box-sizing:border-box}
.ppi-bar {display:flex;border:1px solid var(--br);border-radius:6px;overflow:hidden;margin-bottom:0;align-items:stretch;flex:1;min-width:0}
.ppi-ta {flex:1;min-width:0;border:1px solid #d0d5dd;border-radius:6px;padding:12px 14px;font-size:14px;background:#fff;color:#333;min-height:220px;resize:vertical;line-height:1.45;width:100%;box-sizing:border-box}
.ppi-ta:focus {outline:none;border-color:var(--p);box-shadow:0 0 0 1px rgba(40,167,69,.25)}
.ppi-field {border:1px solid var(--br);border-radius:8px;padding:8px 18px 18px;background:#fff;margin-bottom:12px}
.ppi-field:first-of-type {margin-top:0}
.ppi-field legend {font-size:15px;font-weight:600;color:#333;padding:0 10px}
.ppi-opts {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 16px;margin-top:8px;font-size:14px;color:#333;align-items:start}
.ppi-opts label {display:flex;align-items:flex-start;gap:8px;cursor:pointer;margin:0;font-weight:400;min-width:0}
.ppi-opts input[type="radio"] {margin-top:3px;flex-shrink:0}
.ppi-input-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 16px;margin-top:8px}
.ppi-input-row {display:flex;align-items:stretch;border:1px solid var(--br);border-radius:6px;overflow:hidden;background:#fff}
.ppi-input-row:focus-within {border-color:var(--p);box-shadow:0 0 0 1px rgba(40,167,69,.25)}
.ppi-il {background:var(--p);color:#fff;padding:8px 12px;font-weight:500;flex-shrink:0;display:flex;align-items:center;justify-content:center;white-space:nowrap;min-width:88px}
.ppi-in {border:none;flex:1;padding:8px 12px;font-size:14px;min-width:0;background:transparent;color:#333;box-sizing:border-box}
.ppi-in:focus {outline:none}
.ppi-input-row .btn {flex-shrink:0;border-radius:0;margin:0}
.my-card .btn-success:hover,.my-card .btn-success:focus {background:#218838;border-color:#1e7e34;color:#fff}
.ppi-alert {padding:10px 14px;border-radius:6px;border:1px solid var(--br);font-size:14px;line-height:1.5;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.ppi-alert > i {flex-shrink:0;line-height:1;display:inline-flex;align-items:center;justify-content:center;font-size:1.1em}
.ppi-alert > span {flex:1;min-width:0}
.ppi-alert-warn {background:#fff8e6;border-color:#e6d5a8;color:#6b5a2a}
.ppi-alert-info {background:#e8f4ff;border-color:#a8c8e6;color:#1a5270}
.ppi-demo {text-align:center;margin-top:12px}
.ppi-demo img {max-width:640px;border-radius:6px;border:1px solid var(--br);vertical-align:middle}
.ppi-head-note {font-weight:600;color:#333}
.ppi-hint {font-size:13px;margin:8px 0 0;line-height:1.5;color:#555}
.tag-option {display:flex;align-items:flex-start;gap:8px;cursor:pointer;margin:0;font-weight:400}
.tag-option .tag-text {line-height:1.45}
.ppi-input-cell {min-width:0}
.io-black-mode {--ta-border:#4d5256}
.io-black-mode .ppi-field {background:#2c2e2f;border-color:#404548}
.io-black-mode .ppi-field legend {color:#e8e8e8}
.io-black-mode .ppi-opts {color:#e2e4e5}
.io-black-mode .ppi-ta {background:#32363a;color-scheme:dark;color:#e8eaec;border-color:#4d5256}
.io-black-mode .ppi-ta:focus {box-shadow:0 0 0 1px rgba(40,167,69,.45)}
.io-black-mode .tab-nav {background:#32363a;border-color:#4d5256}
.io-black-mode .tab-button {background:#2c2e2f;border-color:#4d5256;color:#e8eaec}
.io-black-mode .tab-button:hover {border-color:var(--p);color:#fff}
.io-black-mode .ppi-input-row {background:#32363a;border-color:#4d5256}
.io-black-mode .ppi-in {color:#e8eaec}
.io-black-mode .ppi-head-note {color:#e8eaec}
.io-black-mode .ppi-hint {color:#b0b4b6}
.io-black-mode .tag-option .tag-text {color:#e2e4e5}
.io-black-mode .ppi-alert-warn {background:#3d3520;border-color:#6b5a2a;color:#f0e6c8}
.io-black-mode .ppi-alert-info {background:#1e3a4a;border-color:#3d6a8a;color:#c8e0f0}