@charset "utf-8";

.container { max-width: 1100px; margin: 0px auto; display: flex; gap: 28px; align-items: flex-start; }

.left { flex: 1 1 0%; display: flex; gap: 18px; align-items: flex-start; }

.thumb { width: 72px; height: 54px; border-radius: 6px; overflow: hidden; background: rgb(17, 17, 17); border: 1px solid rgba(255, 255, 255, 0.06); flex-shrink: 0; }

.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.meta { flex: 1 1 0%; }

.badge { display: inline-block; background: rgba(0, 197, 139, 0.12); color: var(--accent); border-radius: 6px; padding: 4px 8px; font-size: 13px; margin-bottom: 6px; }

h1 { font-size: 28px; margin: 0px 0px 8px; font-weight: 700; color: rgb(243, 244, 246); }

.sub { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; margin-bottom: 8px; }

.stars { display: inline-flex; align-items: center; gap: 6px; }

.star { width: 92px; height: 18px; display: inline-block; }

.rating-num { font-weight: 700; color: rgb(209, 250, 229); }

.category { display: block; color: rgb(139, 149, 166); margin-bottom: 14px; text-decoration: none; }

.actions { display: flex; gap: 12px; }

.btn { padding: 10px 18px; border-radius: 999px; border: 0px; background: rgb(31, 41, 55); color: rgb(255, 255, 255); font-weight: 600; cursor: pointer; }

.btn.primary { background: linear-gradient(90deg, rgb(59, 130, 246), rgb(99, 102, 241)); box-shadow: rgba(99, 102, 241, 0.12) 0px 6px 18px; }

.btn.ghost { background: transparent; border: 1px solid rgba(255, 255, 255, 0.06); color: rgb(209, 213, 219); }

.right { width: 360px; background: linear-gradient(rgb(15, 23, 36), rgb(11, 18, 32)); border-radius: 14px; padding: 22px 20px; box-shadow: rgba(2, 6, 23, 0.6) 0px 8px 30px; border: 1px solid rgba(255, 255, 255, 0.03); }

.big-score { display: flex; gap: 16px; align-items: center; }

.score-num { font-size: 48px; font-weight: 800; color: rgb(238, 242, 255); line-height: 1; }

.score-meta { flex: 1 1 0%; }

.score-meta p { margin: 0px; }

.label { color: var(--muted); font-size: 13px; margin-bottom: 8px; }

.mini-stars { display: flex; align-items: center; gap: 8px; margin: 8px 0px; }

.mini-stars svg { width: 18px; height: 18px; }

.reviews { color: var(--muted); font-size: 13px; margin-top: 6px; }

.bars { margin-top: 14px; }

.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

.bar-label { width: 36px; font-size: 13px; color: var(--muted); }

.bar-track { flex: 1 1 0%; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }

.bar-fill { height: 100%; border-radius: 999px; background: gainsboro; }

.bar-val { width: 34px; text-align: right; font-size: 13px; color: var(--muted); }

@media (max-width: 880px) {
  .container { flex-direction: column; }
  .right { width: 100%; }
}