/* btn-loading spinner — used by setButtonLoading() in core.js */
@keyframes ti-spin{to{transform:rotate(360deg)}}
button.btn-loading,a.btn-loading{position:relative;color:transparent;pointer-events:none}
button.btn-loading::after,a.btn-loading::after{content:'';position:absolute;width:14px;height:14px;top:50%;left:50%;margin:-7px 0 0 -7px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:ti-spin .6s linear infinite}

/* score-badge variants — used by renderScoreCard() in core.js */
.score-badge{display:inline-flex;align-items:center;justify-content:center;padding:3px 10px;border-radius:20px;font-size:13px;font-weight:700;background:var(--accent);color:#fff}
.score-badge--low{background:var(--danger)}
.score-badge--med{background:var(--warning);color:#111}
.score-badge--high{background:var(--success)}

/* diff viewer layout — used in template-improver diff card */
.diff-container{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.diff-side h4{margin:0 0 8px;font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}
.diff-side pre{margin:0;padding:12px;background:var(--bg);border:1px solid var(--border);border-radius:8px;font-size:11px;line-height:1.5;overflow:auto;max-height:300px;color:var(--text-primary);white-space:pre-wrap;word-break:break-word}
@media(max-width:640px){.diff-container{grid-template-columns:1fr}}

/* radio-pill — used in template-improver intensity selector */
.radio-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid var(--border);border-radius:20px;cursor:pointer;font-size:13px;color:var(--text-secondary);transition:all .15s;user-select:none}
.radio-pill:hover{border-color:var(--accent);color:var(--text-primary)}
.radio-pill:has(input:checked){border-color:var(--accent);background:var(--accent-muted);color:var(--text-primary);font-weight:600}
.radio-pill input[type=radio]{display:none}

/* checkbox-label — used in template-improver component toggles */
.checkbox-label{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-secondary);cursor:pointer;user-select:none}
.checkbox-label input[type=checkbox]{width:14px;height:14px;cursor:pointer;accent-color:var(--accent)}

/* alert component */
.alert{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-radius:var(--radius-md);font-size:13px;line-height:1.5;border:1px solid transparent;margin-bottom:12px}
.alert-danger{background:var(--danger-muted);border-color:var(--danger);color:var(--danger)}
.alert-success{background:var(--success-muted);border-color:var(--success);color:var(--success)}
.alert-warning{background:var(--warning-muted);border-color:var(--warning);color:var(--warning)}
.alert-info{background:var(--info-muted);border-color:var(--info);color:var(--info)}

/* input validation states */
.field.is-error{border-color:var(--danger);box-shadow:0 0 0 3px rgba(239,68,68,.12)}
.field.is-success{border-color:var(--success);box-shadow:0 0 0 3px rgba(34,197,94,.12)}
.field-error-msg{font-size:11px;color:var(--danger);margin-top:4px}

/* utility classes */
.hidden{display:none}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:640px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* standard subtab navigation */
.subtab-nav{display:flex;gap:4px;flex-wrap:nowrap;overflow-x:auto;margin-bottom:16px;padding-bottom:2px}
.subtab-btn{padding:7px 16px;border:1px solid var(--border);border-radius:20px;background:transparent;color:var(--text-muted);font-size:13px;cursor:pointer;white-space:nowrap;transition:all .15s}
.subtab-btn:hover{border-color:var(--accent);color:var(--text-primary)}
.subtab-btn.active{background:var(--accent-muted);border-color:var(--accent);color:var(--text-primary);font-weight:600}
.subtab-content{display:none}.subtab-content.active{display:block}

/* === HTML Improver v2 === */
.hi-progress{display:flex;gap:4px;margin-bottom:16px;flex-wrap:wrap}
.hi-progress-stage{padding:5px 10px;border-radius:16px;font-size:11px;font-weight:600;background:var(--bg-secondary);color:var(--text-muted);border:1px solid var(--border);transition:all .2s}
.hi-progress-stage.active{background:var(--accent-muted);border-color:var(--accent);color:var(--accent);animation:hi-pulse 1.2s infinite}
.hi-progress-stage.done{background:rgba(52,199,89,.12);border-color:rgba(52,199,89,.3);color:#34c759}
@keyframes hi-pulse{0%,100%{opacity:1}50%{opacity:.6}}
.hi-output-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:12px}
.hi-output-tab{padding:6px 14px;border:1px solid var(--border);border-radius:20px;background:transparent;color:var(--text-muted);font-size:12px;cursor:pointer;transition:all .15s;white-space:nowrap}
.hi-output-tab:hover{border-color:var(--accent);color:var(--text-primary)}
.hi-output-tab.active{background:var(--accent-muted);border-color:var(--accent);color:var(--text-primary);font-weight:600}
.hi-output-panel{display:none}.hi-output-panel.active{display:block}
.hi-qa-summary{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.hi-qa-grade{font-size:1.4rem;font-weight:800;color:var(--accent)}
.hi-qa-table{width:100%;border-collapse:collapse;font-size:12px}
.hi-qa-table th,.hi-qa-table td{padding:6px 8px;border-bottom:1px solid var(--border);text-align:left}
.hi-qa-table th{font-weight:600;color:var(--text-secondary);font-size:11px;text-transform:uppercase}
.hi-qa-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:10px;font-weight:700}
.hi-qa-badge--pass{background:rgba(52,199,89,.15);color:#34c759}
.hi-qa-badge--fail{background:rgba(255,59,48,.15);color:#ff3b30}
.hi-qa-badge--warn{background:rgba(255,149,0,.15);color:#ff9500}
.hi-qa-empty{color:var(--text-muted);font-size:13px;padding:16px 0}
.hi-history-list{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow-y:auto}
.hi-history-item{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border:1px solid var(--border);border-radius:8px;font-size:12px;transition:border-color .15s}
.hi-history-item:hover{border-color:var(--accent)}
.hi-history-info{display:flex;flex-direction:column;gap:2px}
.hi-history-meta{color:var(--text-muted);font-size:11px}
.hi-history-actions{display:flex;gap:4px}
.hi-history-empty{color:var(--text-muted);font-size:13px;padding:8px 0}