.pi-tool .pi-panels{margin: 0 -8px}.pi-tool [class*='col-']{padding: 0 8px}.pi-input-panel,.pi-output-panel,.pi-facts-panel{height: 100%}.pi-facts-panel{margin-top: 16px}.pi-panel-header{display: flex;align-items: center;justify-content: space-between;gap: 12px;flex-wrap: wrap}.pi-body{display: flex;flex-direction: column}.pi-presets{display: flex;flex-wrap: wrap;gap: 6px}.pi-preset{min-width: 52px}.pi-action-row{margin-bottom: 10px}.pi-action-row .btn{width: 100%}.pi-note{display: flex;align-items: flex-start;gap: 8px;padding: 10px 12px;border-radius: 8px;background: rgba(13,148,136,0.06);border: 1px solid rgba(13,148,136,0.25);font-size: 12.5px;line-height: 1.55;color: var(--text-secondary,#5f6b7a)}[data-theme='dark'] .pi-note{background: rgba(13,148,136,0.12)}.pi-note i{color: #0f766e;font-size: 15px;margin-top: 1px}.pi-empty{display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 10px;min-height: 220px;border: 1px dashed var(--border-color,#dde1e6);border-radius: 8px;color: var(--text-secondary,#5f6b7a);text-align: center;padding: 20px}.pi-empty i{font-size: 44px;opacity: 0.45}.pi-empty p{margin: 0;font-size: 13px;max-width: 400px;line-height: 1.6}.pi-empty.hidden{display: none}.pi-result{display: flex;flex-direction: column;gap: 12px}.pi-result.hidden{display: none}.pi-preview{font-family: Consolas,Menlo,monospace;font-size: 22px;font-weight: 700;color: #0f766e;letter-spacing: 0.5px;background: linear-gradient(135deg,rgba(13,148,136,0.08),rgba(45,212,191,0.14));border: 1px solid rgba(13,148,136,0.3);border-radius: 8px;padding: 12px 16px;word-break: break-all}[data-theme='dark'] .pi-preview{color: #5eead4}.pi-textarea{font-family: Consolas,Menlo,monospace;font-size: 13px;resize: vertical;line-height: 1.55;min-height: 130px}.pi-stats{display: flex;gap: 10px;flex-wrap: wrap}.pi-stat{flex: 1 1 120px;min-width: 110px;padding: 10px 12px;border-radius: 8px;background: linear-gradient(135deg,rgba(13,148,136,0.08),rgba(45,212,191,0.14));border: 1px solid rgba(13,148,136,0.25)}.pi-stat-label{display: block;font-size: 10.5px;text-transform: uppercase;letter-spacing: 0.3px;color: var(--text-secondary,#5f6b7a)}.pi-stat-value{display: block;font-size: 14.5px;font-weight: 700;margin-top: 3px;color: var(--text-primary,#212529);font-family: Consolas,Menlo,monospace}.pi-result .result-toolbar{display: flex;align-items: center;justify-content: space-between;gap: 14px;flex-wrap: wrap}.pi-meta-stack{display: flex;align-items: center;gap: 10px;flex-wrap: wrap;min-width: 0}.pi-meta{font-size: 12px;color: var(--text-secondary,#5f6b7a);font-family: Consolas,Menlo,monospace}.pi-output-actions{display: flex;gap: 8px;flex-wrap: wrap}.pi-facts{display: flex;flex-direction: column;gap: 8px}.pi-fact{display: flex;gap: 12px;padding: 8px 10px;border-radius: 6px;background: var(--bg-subtle,#f8f9fa)}[data-theme='dark'] .pi-fact{background: rgba(255,255,255,0.04)}.pi-fact-k{flex: 0 0 84px;font-size: 12px;font-weight: 700;text-transform: uppercase;letter-spacing: 0.3px;color: #0f766e}[data-theme='dark'] .pi-fact-k{color: #5eead4}.pi-fact-v{flex: 1;font-size: 12.5px;line-height: 1.5;color: var(--text-primary,#212529)}.pi-message{display: flex;align-items: flex-start;gap: 8px;font-size: 13px;line-height: 1.5;border-radius: 8px;padding: 10px 12px;margin-top: 16px;transition: opacity 0.25s ease}.pi-message.is-fading{opacity: 0}.pi-message.hidden{display: none}.pi-msg-error{background: rgba(220,53,69,0.08);border: 1px solid rgba(220,53,69,0.35);color: #c0392b}.pi-msg-success{background: rgba(40,167,69,0.08);border: 1px solid rgba(40,167,69,0.35);color: #1e7e34}.pi-msg-info{background: rgba(13,148,136,0.08);border: 1px solid rgba(13,148,136,0.35);color: #0f766e}[data-theme='dark'] .pi-msg-success{background: rgba(40,167,69,0.14);color: #7ddc95}[data-theme='dark'] .pi-msg-error{background: rgba(220,53,69,0.14);color: #f19aa0}[data-theme='dark'] .pi-msg-info{background: rgba(13,148,136,0.14);color: #5eead4}@media (max-width: 991px){.pi-panels [class*='col-']{margin-bottom: 16px}}@media (max-width: 575px){.pi-result .result-toolbar{flex-direction: column;align-items: stretch}.pi-output-actions .btn{flex: 1}.pi-fact{flex-direction: column;gap: 4px}}