.title-preview{background:var(--bg-alt);border-radius:var(--radius-lg);padding:24px;margin-bottom:24px}
.title-preview h4{font-size:1rem;color:var(--primary);margin-bottom:16px}
.preview-serp{background:#fff;padding:16px;border-radius:var(--radius);max-width:600px}
.preview-serp-title{color:#1a0dab;font-size:18px;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.preview-serp-url{color:#006621;font-size:14px}
.score-circle{width:120px;height:120px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto 24px;position:relative}
.score-circle::before{content:'';position:absolute;inset:0;border-radius:50%;border:8px solid var(--border)}
.score-circle.excellent{background:linear-gradient(135deg,#38a169,#68d391)}
.score-circle.good{background:linear-gradient(135deg,#3182ce,#63b3ed)}
.score-circle.average{background:linear-gradient(135deg,#d69e2e,#f6e05e)}
.score-circle.poor{background:linear-gradient(135deg,#e53e3e,#fc8181)}
.score-value{font-size:2.5rem;font-weight:800;color:#fff}
.score-label{font-size:0.85rem;color:rgba(255,255,255,0.9)}
.length-bar{margin-bottom:24px}
.length-bar h4{font-size:1rem;color:var(--primary);margin-bottom:12px}
.bar-container{height:24px;background:var(--border);border-radius:12px;position:relative;overflow:hidden}
.bar-zones{display:flex;height:100%;position:absolute;width:100%}
.bar-zone{height:100%}
.bar-zone.short{width:30%;background:#fed7d7}
.bar-zone.optimal{width:50%;background:#c6f6d5}
.bar-zone.long{width:20%;background:#fefcbf}
.bar-indicator{position:absolute;top:-4px;width:4px;height:32px;background:var(--primary);border-radius:2px;transform:translateX(-50%);transition:left 0.3s}
.bar-labels{display:flex;justify-content:space-between;margin-top:8px;font-size:0.8rem;color:var(--text-light)}
.checks-list{margin-top:20px}
.checks-list h4{font-size:1rem;color:var(--primary);margin-bottom:12px}
.check-item{display:flex;align-items:center;gap:12px;padding:12px;background:var(--bg-alt);border-radius:var(--radius);margin-bottom:8px}
.check-item:last-child{margin-bottom:0}
.check-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.85rem;flex-shrink:0}
.check-icon.pass{background:#c6f6d5;color:#22543d}
.check-icon.fail{background:#fed7d7;color:#822727}
.check-icon.warn{background:#fefcbf;color:#744210}
.check-text{font-size:0.95rem;color:var(--text)}