.dgi-prediction { padding: 30px 0 78px; }
.dgi-prediction-nav { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 16px; }
.dgi-prediction-nav a { min-width: 0; padding: 12px; color: var(--dgi-muted); border: 1px solid var(--dgi-border); border-radius: 13px; background: var(--dgi-surface); text-align: center; text-decoration: none; font-weight: 850; }
.dgi-prediction-nav a.is-active { color: #10101a; border-color: transparent; background: linear-gradient(135deg,var(--dgi-accent),#ffd46a); }
.dgi-prediction-grid { display: grid; grid-template-columns: 1.32fr .68fr; gap: 16px; }
.dgi-prediction-card { min-width: 0; padding: clamp(20px,3vw,30px); border: 1px solid var(--dgi-border); border-radius: 21px; background: linear-gradient(145deg,rgba(25,33,58,.96),rgba(12,17,32,.98)); box-shadow: 0 18px 54px rgba(0,0,0,.23); }
.dgi-prediction-card--primary { grid-row: span 2; background: radial-gradient(circle at 82% 10%,rgba(108,75,255,.28),transparent 45%),linear-gradient(145deg,rgba(25,33,58,.98),rgba(12,17,32,.98)); }
.dgi-prediction-card--history { grid-column: 1/-1; }
.dgi-prediction-label { margin-bottom: 9px; color: var(--dgi-muted); font-size: .78rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.dgi-period { color: var(--dgi-text); font-size: clamp(1.25rem,3vw,2.15rem); font-weight: 950; overflow-wrap: anywhere; }
.dgi-period--next { color: var(--dgi-cyan); font-size: clamp(1rem,2vw,1.35rem); }
.dgi-number-balls { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.dgi-number-balls span { display: grid; place-items: center; width: clamp(58px,8vw,78px); aspect-ratio: 1; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: white; background: radial-gradient(circle at 30% 25%,#c5b8ff 0,#7657ff 32%,#3e249e 70%,#171b36 100%); box-shadow: inset -8px -10px 22px rgba(0,0,0,.35),0 14px 28px rgba(108,75,255,.22); font-size: clamp(1.55rem,4vw,2.25rem); font-weight: 950; }
.dgi-signal-row { display: flex; flex-wrap: wrap; gap: 10px; }
.dgi-signal-row span { padding: 8px 13px; border: 1px solid var(--dgi-border); border-radius: 999px; background: rgba(8,11,22,.55); font-weight: 850; }
.dgi-signal-row .is-red { color: #fff; border-color: rgba(255,95,120,.5); background: rgba(255,95,120,.16); }
.dgi-signal-row .is-green { color: #fff; border-color: rgba(56,217,150,.5); background: rgba(56,217,150,.16); }
.dgi-signal-row .is-violet { color: #fff; border-color: rgba(155,108,255,.5); background: rgba(155,108,255,.16); }
.dgi-score { display: flex; justify-content: space-between; gap: 12px; margin-top: 23px; color: var(--dgi-muted); }
.dgi-score strong { color: var(--dgi-accent); }
.dgi-score-track { height: 9px; margin-top: 8px; border-radius: 999px; background: rgba(255,255,255,.09); overflow: hidden; }
.dgi-score-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--dgi-primary),var(--dgi-cyan)); transition: width .35s ease; }
.dgi-microcopy, .dgi-prediction-card p { margin: 14px 0 0; color: var(--dgi-muted); font-size: .88rem; line-height: 1.6; }
.dgi-clock, .dgi-countdown { display: block; margin: 2px 0 21px; color: var(--dgi-text); font-size: clamp(1.55rem,4vw,2.4rem); line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dgi-countdown { color: var(--dgi-accent); }
.dgi-prediction-card--history ol { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding: 0; list-style: none; }
.dgi-prediction-card--history li { min-width: 0; padding: 13px; border: 1px solid var(--dgi-border); border-radius: 12px; background: rgba(8,11,22,.5); color: var(--dgi-muted); font-size: .86rem; overflow-wrap: anywhere; }
.dgi-prediction-card--history li strong { display: block; color: var(--dgi-text); }
.dgi-prediction-quick { padding-top: 0; }
.dgi-prediction-quick .dgi-prediction-nav { margin-bottom: 0; }
@media (max-width: 780px) {
	.dgi-prediction-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
	.dgi-prediction-card--primary,.dgi-prediction-card--history { grid-column: 1/-1; grid-row: auto; }
}
@media (max-width: 640px) {
	.dgi-prediction-nav,.dgi-prediction-grid,.dgi-prediction-card--history ol { grid-template-columns: minmax(0,1fr); }
	.dgi-prediction-nav { gap: 7px; }
	.dgi-prediction-nav a { padding: 10px; }
	.dgi-prediction-card,.dgi-prediction-card--primary,.dgi-prediction-card--history { grid-column: auto; }
	.dgi-number-balls { justify-content: center; }
}