/* content-readiness-analyzer.css */
.hero { padding: 80px 20px 40px; text-align: center; }
.hero-c { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; }

/* Input Row */
.url-row { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; justify-content: center; }
.url-input { flex: 1; min-width: 280px; padding: 16px 24px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; color: #fff; font-size: 1.05rem; outline: none; transition: border 0.3s; }
.url-input:focus { border-color: #55efc4; }
.analyze-btn { background: #55efc4; color: #000; border: none; padding: 16px 36px; border-radius: 12px; font-size: 1.05rem; font-weight: 700; cursor: pointer; transition: all 0.3s; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; box-shadow: 0 4px 15px rgba(85, 239, 196, 0.3); }
.analyze-btn:hover { background: #00b894; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(85, 239, 196, 0.4); }
.analyze-btn svg { width: 20px; height: 20px; }

/* Loading State */
.lo { display: none; margin-top: 30px; }
.lo.on { display: block; }
.spinner { width: 50px; height: 50px; border: 4px solid rgba(85, 239, 196, 0.2); border-top-color: #55efc4; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 20px; }
@keyframes spin { 100% { transform: rotate(360deg); } }
.ltx { font-size: 1.1rem; color: var(--t2); font-weight: 500; margin-bottom: 12px; }
.progress-bar { width: 100%; max-width: 400px; height: 6px; background: rgba(255,255,255,0.05); border-radius: 3px; margin: 0 auto; overflow: hidden; position: relative; }
.progress-fill { height: 100%; background: #55efc4; width: 0%; transition: width 0.3s ease; box-shadow: 0 0 10px #55efc4; }

/* Results */
.results { display: none; padding: 40px 20px 100px; }
.results.on { display: block; }
.mb-40 { margin-bottom: 40px; }

/* Score Card */
.score-card { background: rgba(255,255,255,0.02); border: 1px solid rgba(85, 239, 196, 0.2); border-radius: 16px; padding: 30px; display: flex; align-items: center; gap: 30px; }
.score-circle { position: relative; width: 100px; height: 100px; flex-shrink: 0; }
.score-circle svg { width: 100px; height: 100px; transform: rotate(-90deg); }
.score-circle circle { fill: none; stroke-width: 8; stroke-linecap: round; }
.score-circle .bg { stroke: rgba(255,255,255,0.05); }
.score-circle .fg { stroke: #55efc4; stroke-dasharray: 283; stroke-dashoffset: 283; transition: stroke-dashoffset 1.5s ease; }
.score-val { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 800; }
.score-info h2 { font-size: 1.5rem; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.score-info p { color: var(--t2); font-size: 1rem; line-height: 1.6; }
.badge-grade { font-size: 0.9rem; padding: 4px 10px; border-radius: 20px; background: rgba(255,255,255,0.1); color: #fff; font-weight: 600; text-transform: uppercase; }

/* Cards */
.scards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.sc { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 24px; text-align: center; transition: transform 0.3s; }
.sc:hover { transform: translateY(-4px); background: rgba(255,255,255,0.03); }
.sc .lb { font-size: 1.05rem; font-weight: 600; margin-bottom: 12px; color: var(--t2); }
.sc .vl { font-size: 2.5rem; font-weight: 800; margin-bottom: 8px; }
.sc .sb { font-size: 0.85rem; color: var(--t3); }

/* Data Grid */
.dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.dc { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 24px; }
.dc h3 { margin-bottom: 20px; display: flex; align-items: center; gap: 10px; font-size: 1.1rem; }
.dc h3 .dot { width: 10px; height: 10px; border-radius: 50%; }

/* Table */
.at { width: 100%; border-collapse: collapse; }
.at th { text-align: left; padding: 12px; border-bottom: 2px solid rgba(255,255,255,0.1); color: var(--t3); font-size: 0.85rem; text-transform: uppercase; }
.at td { padding: 12px; border-bottom: 1px solid rgba(255,255,255,0.05); color: var(--t2); font-size: 0.95rem; }

/* Insights List */
.insights-list { display: flex; flex-direction: column; gap: 12px; }
.insight-item { padding: 16px; border-radius: 12px; background: rgba(255,255,255,0.03); border-left: 4px solid var(--border); display: flex; align-items: flex-start; gap: 12px; }
.insight-item.good { border-left-color: #55efc4; }
.insight-item.warn { border-left-color: #fdcb6e; }
.insight-item.bad { border-left-color: #ff7675; }
.insight-icon { font-size: 1.2rem; }
.insight-text h4 { font-size: 1rem; margin-bottom: 4px; }
.insight-text p { font-size: 0.85rem; color: var(--t2); line-height: 1.5; }

@media (max-width: 768px) {
    .url-row { flex-direction: column; }
    .analyze-btn { width: 100%; justify-content: center; }
    .score-card { flex-direction: column; text-align: center; }
    .score-info h2 { justify-content: center; }
    .scards { grid-template-columns: 1fr; }
    .dgrid { grid-template-columns: 1fr; }
}