.po-card{--po-surface: var(--sl-color-bg-nav);--po-text: var(--sl-color-white);--po-muted: var(--sl-color-gray-3);--po-accent: var(--sl-color-accent);--po-border: var(--sl-color-gray-5);--po-hover: var(--sl-color-gray-6);--po-correct: #4ade80;--po-correct-bg: #14532d;--po-correct-text: #bbf7d0;--po-wrong: #f87171;--po-wrong-bg: #7f1d1d;--po-wrong-text: #fecaca;color:var(--po-text);line-height:1.6;background:var(--po-surface);border:1px solid var(--po-border);border-radius:12px;padding:20px 22px;margin-bottom:16px}:root[data-theme=light] .po-card{--po-correct: #16a34a;--po-correct-bg: #dcfce7;--po-correct-text: #14532d;--po-wrong: #dc2626;--po-wrong-bg: #fee2e2;--po-wrong-text: #7f1d1d}.po-card *{box-sizing:border-box}.po-prompt{color:var(--po-muted);font-size:14px;margin:0 0 14px}.po-body>p{margin:0 0 14px}.po-body code:not(pre code){font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.9em;background:var(--po-hover);padding:1px 5px;border-radius:4px}.po-body .expressive-code{margin:0 0 14px}.po-console{background:#0d1117;color:#e6edf3;border:1px solid #30363d;border-radius:8px;overflow:hidden;margin-bottom:14px}.po-input{display:block;width:100%;padding:12px 14px;background:transparent;border:0;color:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:13.5px;line-height:1.55;resize:vertical;outline:none;white-space:pre;overflow:auto;tab-size:4;-moz-tab-size:4}.po-input::placeholder{color:#6e7681;font-style:italic}.po-input:disabled{cursor:default;opacity:.85}.po-feedback{margin-bottom:14px;border-radius:8px;border:1px solid transparent;overflow:hidden}.po-feedback[hidden]{display:none}.po-feedback-head{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:14px;font-weight:600}.po-feedback-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;color:#fff;font-size:12px;font-weight:800;line-height:1;flex-shrink:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.po-card[data-state=correct] .po-feedback{display:inline-flex;background:transparent;border-color:transparent;color:var(--po-correct);margin-bottom:0}.po-card[data-state=correct] .po-feedback-head{padding:0}.po-card[data-state=correct] .po-feedback-icon{background:var(--po-correct)}.po-card[data-state=correct] .po-feedback-icon:before{content:"✓"}.po-card[data-state=correct] .po-feedback-body,.po-card[data-state=correct] .po-actions{display:none}.po-card[data-state=wrong] .po-feedback{display:block;background:var(--po-hover);border-color:var(--po-border);color:var(--po-text)}.po-card[data-state=wrong] .po-feedback-head{color:var(--po-wrong)}.po-card[data-state=wrong] .po-feedback:has(.po-feedback-body:not([hidden])) .po-feedback-head{border-bottom:1px solid var(--po-border)}.po-feedback-body[hidden]{display:none}.po-card[data-state=wrong] .po-feedback-icon{background:var(--po-wrong)}.po-card[data-state=wrong] .po-feedback-icon:before{content:"✕"}.po-card[data-state=wrong] .po-feedback-body{padding:12px 14px;display:flex;flex-direction:column;gap:12px}.po-feedback-body .po-why{margin:0;font-size:14px;color:inherit}.po-feedback-body .po-why>:first-child{margin-top:0}.po-feedback-body .po-why>:last-child{margin-bottom:0}.po-feedback-body .po-why>p{margin:0}.po-feedback-body .po-why code:not(pre code){background:var(--po-surface);color:inherit}.po-feedback-expected{background:var(--po-surface);border:1px solid var(--po-border);border-radius:6px;padding:10px 12px}.po-expected-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;opacity:.85}.po-expected-code{margin:0;padding:0;background:transparent;border:0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:13.5px;line-height:1.55;color:inherit;white-space:pre-wrap;overflow-x:auto}.po-actions{display:flex;gap:8px;flex-wrap:wrap}.po-check{background:var(--po-accent);color:#fff;border:none;padding:10px 18px;border-radius:8px;font:inherit;font-weight:500;cursor:pointer;transition:opacity .15s}.po-check:hover:not(:disabled){opacity:.9}.po-check:disabled{opacity:.4;cursor:not-allowed}
