@import url("tool-shell.css");
:root{--accent:#f472b6}
.brand-mark{background:linear-gradient(140deg,#ec4899,#7c59e9)}
.preview-card{padding:18px;border:1px solid #d8dde4;border-radius:15px;background:#fbfcff;color:#1f2937}
.google-title{font-size:20px;color:#1a0dab;line-height:1.3}
.google-url{margin:4px 0;color:#188038;font-size:13px;overflow-wrap:anywhere}
.google-desc{font-size:14px;line-height:1.5;color:#4b5563}
.social-preview{background:#fff;color:#202124;border:1px solid #d8dde4;border-radius:12px;overflow:hidden}
.social-art{height:150px;background:linear-gradient(135deg,#dfecff,#f6eaff);display:grid;place-items:center;color:#5473a6;font-weight:800}
.social-copy{padding:12px}
.social-copy b{display:block}
.social-copy small{color:#697386}
.counter{font-size:11px;color:#a9b7ca;text-align:right}
.counter.over{color:#ff9eaa}
.code-output{font:12px/1.55 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.preview-stack{display:grid;gap:12px}