.tcv-vip-prediction-shell { padding: clamp(42px, 7vw, 86px) 0; }
.tcv-vip-prediction-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .7fr); gap: clamp(28px, 5vw, 64px); align-items: center; margin-bottom: 28px; }
.tcv-vip-prediction-intro__media img { width: 100%; border: 1px solid var(--tcv-vip-border); border-radius: 24px; box-shadow: var(--tcv-vip-shadow); }
.tcv-vip-prediction-dashboard { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 18px; min-width: 0; }
.tcv-vip-prediction-card { min-width: 0; padding: clamp(20px, 3vw, 34px); border: 1px solid var(--tcv-vip-border); border-radius: var(--tcv-vip-radius); background: linear-gradient(145deg, rgba(21,55,61,.96), rgba(8,29,34,.94)); box-shadow: 0 18px 52px rgba(0,9,13,.22); overflow: hidden; }
.tcv-vip-prediction-card--period { grid-row: span 2; background: radial-gradient(circle at 80% 10%, rgba(215,108,203,.15), transparent 18rem), linear-gradient(145deg, rgba(244,185,66,.12), rgba(12,37,43,.95)); }
.tcv-vip-prediction-label { margin: 0 0 8px; color: var(--tcv-vip-muted); font-size: .78rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.tcv-vip-period-id { display: block; max-width: 100%; margin-bottom: 26px; color: var(--tcv-vip-text); font-size: clamp(1rem, 2.5vw, 1.55rem); font-weight: 900; overflow-wrap: anywhere; }
.tcv-vip-countdown { margin: 8px 0 26px; color: var(--tcv-vip-primary); font-size: clamp(3.2rem, 9vw, 7.8rem); font-weight: 950; line-height: .92; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.tcv-vip-next-period { padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); }
.tcv-vip-number-balls { display: flex; flex-wrap: wrap; gap: clamp(12px, 2vw, 20px); margin: 18px 0 28px; }
.tcv-vip-number-ball { display: inline-grid; place-items: center; flex: 0 0 auto; width: clamp(66px, 10vw, 96px); aspect-ratio: 1; border: 3px solid rgba(255,255,255,.22); border-radius: 50%; background: radial-gradient(circle at 32% 24%, #fff8d9, var(--tcv-vip-primary) 30%, #c66c2b 72%); color: #17211d; font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 950; box-shadow: inset -11px -15px 22px rgba(89,32,6,.28), 0 16px 28px rgba(0,0,0,.26); }
.tcv-vip-reference-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tcv-vip-reference-box { min-width: 0; padding: 16px; border-radius: 14px; background: rgba(255,255,255,.055); }
.tcv-vip-reference-value { display: block; color: var(--tcv-vip-text); font-size: clamp(1.05rem, 2.4vw, 1.45rem); font-weight: 900; overflow-wrap: anywhere; }
.tcv-vip-reference-value.is-red { color: #ff8177; }
.tcv-vip-reference-value.is-green { color: #62e1af; }
.tcv-vip-reference-value.is-violet { color: #e395ef; }
.tcv-vip-score-note { margin-top: 18px; color: var(--tcv-vip-muted); font-size: .88rem; }
.tcv-vip-history-card { grid-column: 1 / -1; }
.tcv-vip-table-wrap { max-width: 100%; overflow-x: auto; border-radius: 14px; }
.tcv-vip-history { width: 100%; min-width: 680px; border-collapse: collapse; }
.tcv-vip-history th, .tcv-vip-history td { padding: 14px; border-bottom: 1px solid rgba(255,255,255,.08); text-align: left; }
.tcv-vip-history th { color: var(--tcv-vip-primary); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.tcv-vip-mini-balls { display: inline-flex; gap: 5px; }
.tcv-vip-mini-balls b { display: inline-grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--tcv-vip-primary); color: #17211d; font-size: .78rem; }
.tcv-vip-colour-dot { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; }
.tcv-vip-colour-dot.is-red { background: #ff8177; }
.tcv-vip-colour-dot.is-green { background: #62e1af; }
.tcv-vip-colour-dot.is-violet { background: #e395ef; }
.tcv-vip-prediction-dashboard.is-round-change .tcv-vip-number-ball { animation: tcv-vip-ball-arrive .45s ease both; }
@keyframes tcv-vip-ball-arrive { from { transform: scale(.86) rotate(-7deg); opacity: .4; } to { transform: none; opacity: 1; } }

@media (max-width: 880px) {
  .tcv-vip-prediction-intro, .tcv-vip-prediction-dashboard { grid-template-columns: 1fr 1fr; }
  .tcv-vip-prediction-intro__copy, .tcv-vip-prediction-intro__media, .tcv-vip-history-card { grid-column: 1 / -1; }
  .tcv-vip-prediction-card--period { grid-row: auto; grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .tcv-vip-prediction-intro, .tcv-vip-prediction-dashboard, .tcv-vip-reference-grid { grid-template-columns: 1fr; }
  .tcv-vip-prediction-intro__copy, .tcv-vip-prediction-intro__media, .tcv-vip-history-card, .tcv-vip-prediction-card--period { grid-column: auto; }
  .tcv-vip-number-balls { justify-content: center; flex-wrap: nowrap; }
  .tcv-vip-number-ball { width: min(25vw, 82px); }
  .tcv-vip-countdown { font-size: clamp(3rem, 19vw, 5.4rem); }
}

@media (max-width: 340px) {
  .tcv-vip-prediction-card { padding: 16px; }
  .tcv-vip-number-balls { gap: 7px; }
  .tcv-vip-number-ball { width: 70px; font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tcv-vip-prediction-dashboard.is-round-change .tcv-vip-number-ball { animation: none; }
}