/* Shared styles for /tool/* pages */

.og-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.og-btn { padding: 10px 18px; border-radius: 8px; font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; transition: all .15s; border: 0; display: inline-flex; align-items: center; }
.og-btn-primary { background: #e94560; color: #fff; }
.og-btn-primary:hover { background: #d13050; }
.og-btn-ghost { background: transparent; color: var(--link-color); border: 1px solid var(--border-color); }
.og-btn-ghost:hover { border-color: var(--heading-color); }

.og-snippets { display: flex; flex-direction: column; gap: 12px; }
.og-snippet { border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; background: var(--card-bg); }
.og-snippet-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 14px; background: var(--border-color); font-size: 13px; font-weight: 600; color: var(--heading-color); }
.og-snippet-head > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.og-copy { background: var(--card-bg); border: 1px solid var(--border-color); color: var(--link-color); border-radius: 6px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; flex: 0 0 auto; transition: all .15s; font-family: inherit; line-height: 1.2; }
.og-copy:hover { background: var(--link-color); color: var(--bg-color); border-color: var(--link-color); }
.og-copy.ok { background: #10b981 !important; color: #fff !important; border-color: #10b981 !important; }
.og-snippet pre { margin: 0; padding: 12px 14px; font-size: 12.5px; font-family: Consolas, 'JetBrains Mono', monospace; overflow-x: auto; background: var(--bg-color); color: var(--text-color); white-space: pre-wrap; word-break: break-all; border: 0; border-radius: 0; }
.og-snippet-ai { border-color: var(--link-color); box-shadow: 0 0 0 1px var(--link-color) inset; }
.og-snippet-ai .og-snippet-head { background: var(--link-color); color: var(--bg-color); }
.og-snippet-ai .og-copy { background: var(--card-bg); color: var(--link-color); border-color: var(--card-bg); }
.og-snippet-ai pre { max-height: 260px; overflow-y: auto; font-family: inherit; font-size: 13px; line-height: 1.55; word-break: normal; overflow-wrap: break-word; }

.tpl-base { color: var(--subtext-color); }
.tpl-ph { font-weight: 700; padding: 1px 4px; border-radius: 3px; }
.tpl-ph-title,   .tpl-ph-size    { color: #b91c1c; background: rgba(239, 68, 68, .12); }
.tpl-ph-author,  .tpl-ph-bg      { color: #0369a1; background: rgba(14, 165, 233, .14); }
.tpl-ph-avatar,  .tpl-ph-fg      { color: #6d28d9; background: rgba(139, 92, 246, .14); }
.tpl-ph-website, .tpl-ph-text    { color: #047857; background: rgba(16, 185, 129, .14); }
.tpl-ph-theme,   .tpl-ph-pattern { color: #b45309; background: rgba(245, 158, 11, .16); }
.tpl-ph-format { color: #be185d; background: rgba(236, 72, 153, .14); }
.tpl-ph-showdims { color: #4338ca; background: rgba(99, 102, 241, .14); }
[data-theme="dark"] .tpl-ph-title,   [data-theme="dark"] .tpl-ph-size    { color: #fca5a5; background: rgba(239, 68, 68, .18); }
[data-theme="dark"] .tpl-ph-author,  [data-theme="dark"] .tpl-ph-bg      { color: #7dd3fc; background: rgba(14, 165, 233, .22); }
[data-theme="dark"] .tpl-ph-avatar,  [data-theme="dark"] .tpl-ph-fg      { color: #c4b5fd; background: rgba(139, 92, 246, .22); }
[data-theme="dark"] .tpl-ph-website, [data-theme="dark"] .tpl-ph-text    { color: #6ee7b7; background: rgba(16, 185, 129, .22); }
[data-theme="dark"] .tpl-ph-theme,   [data-theme="dark"] .tpl-ph-pattern { color: #fcd34d; background: rgba(245, 158, 11, .22); }
[data-theme="dark"] .tpl-ph-format { color: #f9a8d4; background: rgba(236, 72, 153, .22); }
[data-theme="dark"] .tpl-ph-showdims { color: #a5b4fc; background: rgba(99, 102, 241, .22); }
.tpl-legend { list-style: none; margin: 10px 0 0; padding: 12px 14px; background: var(--border-color); border-top: 1px solid var(--border-color); font-size: 12.5px; }
.tpl-legend li { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; color: var(--text-color); line-height: 1.5; }
.tpl-legend code { font-size: 12px; padding: 1px 5px; border-radius: 3px; background: var(--card-bg); color: var(--heading-color); }
.tpl-sw { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 2px; margin-top: 5px; align-self: flex-start; }

/* Chip-radio (segmented pill group) */
.chip-group { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-color); border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; background: var(--card-bg); color: var(--text-color); cursor: pointer; user-select: none; transition: border-color .15s, background .15s, color .15s; }
.chip:hover { border-color: var(--heading-color); }
.chip small { font-size: 11px; color: var(--subtext-color); font-weight: 400; }
.chip input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip:has(input:checked) { background: var(--heading-color); color: var(--bg-color); border-color: var(--heading-color); }
.chip:has(input:checked) small { color: var(--bg-color); opacity: .75; }