.tool-panel { max-width: 760px; margin: 0 auto; padding: 28px; border: 1px solid var(--seo-hairline); border-radius: var(--seo-radius); background: var(--seo-paper); box-shadow: 0 12px 30px -22px rgba(0, 0, 0, .45); }
.tool-panel label { display: block; margin-bottom: 8px; font-weight: 700; }
.tool-panel textarea, .tool-panel input, .tool-panel select { width: 100%; border: 1px solid var(--seo-hairline); border-radius: 10px; padding: 12px; color: var(--seo-ink); background: var(--seo-canvas); font: inherit; }
.tool-panel textarea { min-height: 130px; resize: vertical; }
.tool-secondary-label { display: block; margin-top: 16px; }
.tool-secondary-label span { color: var(--seo-ink-soft); font-weight: 400; }
.tool-controls { display: flex; align-items: end; gap: 14px; margin-top: 16px; }
.tool-count { width: 150px; }
.tool-error { margin: 14px 0 0; color: #b42318; font-size: .9rem; }
.tool-empty { margin: 20px 0 0; color: var(--seo-ink-soft); text-align: center; }
.tool-results { display: grid; gap: 14px; margin-top: 24px; scroll-margin-top: 90px; }
.tool-result-card { display: grid; grid-template-columns: 42px 1fr; gap: 16px; padding: 22px; border: 1px solid var(--seo-hairline); border-radius: 14px; background: var(--seo-paper); }
.tool-result-number { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; font-weight: 800; background: linear-gradient(135deg, var(--seo-primary), var(--seo-secondary)); }
.tool-result-card h3 { margin: 0 0 6px; font-size: 1.2rem; }
.tool-result-card p { margin: 0; color: var(--seo-ink-soft); }
.tool-angle-list { margin-top: 14px; font-size: .9rem; }
.tool-angle-list strong { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.tool-angle-list ul { display: grid; gap: 5px; margin: 8px 0 0; padding-left: 18px; color: var(--seo-ink-soft); }
.tool-hook-card { align-items: start; }
.tool-hook-card .tool-result-number { font-size: .8rem; }
.tool-hook-content > p { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--seo-ink); }
.tool-hook-audience { display: block; margin-top: 10px; color: var(--seo-ink-soft); font-size: .85rem; }
.tool-copy-button { margin-top: 14px; border: 1px solid var(--seo-hairline); border-radius: 8px; padding: 7px 11px; color: var(--seo-primary); background: var(--seo-paper); cursor: pointer; font: inherit; font-size: .82rem; font-weight: 700; }
.tool-copy-button:hover { border-color: var(--seo-primary); }
.tool-idea-card h3 { margin: 8px 0 6px; font-size: 1.08rem; }
.tool-idea-card p { margin: 0; color: var(--seo-ink-soft); }
.tool-idea-meta { color: var(--seo-primary); font-size: .76rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
[contenteditable="true"]:focus { outline: 2px solid color-mix(in srgb, var(--seo-primary) 45%, transparent); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 640px) { .tool-panel { padding: 20px; } .tool-controls { align-items: stretch; flex-direction: column; } .tool-count { width: 100%; } }