:root { --accent: #007b78; --canvas: #f4f8f8; }
.topline { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 24px; }
.topline h1 { font-size: clamp(38px, 6vw, 64px); letter-spacing: -.06em; margin-bottom: 8px; }
.upload { display: grid; min-width: 360px; gap: 12px; padding: 18px; box-shadow: none; }
.upload input { max-width: 100%; font-size: 13px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }
.stat { box-shadow: none; }
.stat strong { font-size: 30px; }
.stat .positive { color: #14965a; }
.stat .negative { color: #da3c4e; }
.stat .topic { color: #007b78; font-size: 19px; line-height: 1.2; }
.dashboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.list-card, .sentiment-card, .reviews-card { padding: 22px; box-shadow: none; }
.card-title { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.card-title h2, .sentiment-card h2 { margin: 0; font-size: 20px; }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot.green { background: #19a763; }.dot.red { background: #df4051; }.dot.teal { background: #007b78; }
.topic-list { display: grid; gap: 13px; margin-top: 20px; }
.topic-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.topic-row span { font-size: 14px; }
.topic-row strong { font-size: 13px; }
.bar { grid-column: 1 / -1; height: 7px; overflow: hidden; background: #eef0f2; border-radius: 8px; }
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--bar, #19a763); }
.check-list { display: grid; gap: 12px; margin-top: 18px; }
.check { display: flex; gap: 10px; align-items: start; font-size: 14px; line-height: 1.4; }
.check::before { content: "✓"; flex: 0 0 auto; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 7px; color: #fff; background: #007b78; font-size: 12px; font-weight: 900; }
.sentiment-card { grid-column: 1 / 2; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.legend { display: grid; gap: 8px; margin-top: 20px; font-size: 13px; }
.legend span { display: flex; gap: 8px; align-items: center; }
.legend i { width: 10px; height: 10px; border-radius: 50%; }
.green-bg { background: #19a763; }.gray-bg { background: #b7bdc8; }.red-bg { background: #df4051; }
.donut { --positive: 0; --neutral: 0; width: 132px; aspect-ratio: 1; flex: 0 0 auto; display: grid; place-items: center; align-content: center; border-radius: 50%; background: radial-gradient(circle, white 0 54%, transparent 55%), conic-gradient(#19a763 0 calc(var(--positive) * 1%), #b7bdc8 0 calc((var(--positive) + var(--neutral)) * 1%), #df4051 0); font-weight: 900; font-size: 25px; }
.donut small { font-size: 11px; color: var(--muted); font-weight: 600; }
.reviews-card { grid-column: 2 / -1; }
.review-rows { display: grid; gap: 9px; margin-top: 18px; }
.review-row { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: start; padding: 11px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.4; }
.sentiment { padding: 5px 7px; border-radius: 8px; text-align: center; font-size: 11px; font-weight: 900; }
.sentiment.positive { color: #087a42; background: #e5f7ed; }
.sentiment.negative { color: #b6293a; background: #fdecef; }
.sentiment.neutral { color: #626a77; background: #f0f1f3; }
.empty { color: #999faa; font-size: 14px; }
@media (max-width: 950px) { .stats-grid { grid-template-columns: 1fr 1fr; } .dashboard { grid-template-columns: 1fr 1fr; } .recommendations { grid-column: 1 / -1; } .sentiment-card { grid-column: 1 / -1; } .reviews-card { grid-column: 1 / -1; } }
@media (max-width: 650px) { .topline { align-items: stretch; flex-direction: column; } .upload { min-width: 0; } .stats-grid, .dashboard { grid-template-columns: 1fr; } .recommendations, .sentiment-card, .reviews-card { grid-column: auto; } }