/* ============================================================
   Hockey Tipping Plugin — Styles
   Shared between admin and public
   ============================================================ */

:root {
	--ht-navy:      #0b1e3d;
	--ht-blue:      #003f8a;
	--ht-ice:       #cce8f9;
	--ht-red:       #c8102e;
	--ht-gold:      #d4af37;
	--ht-silver:    #a8a9ad;
	--ht-bronze:    #cd7f32;
	--ht-white:     #ffffff;
	--ht-light:     #f4f7fc;
	--ht-border:    #d0dce8;
	--ht-text:      #1a2a3a;
	--ht-muted:     #6b7a8d;
	--ht-success:   #1a7f45;
	--ht-warning:   #b45309;
	--ht-error:     #c8102e;
	--ht-radius:    8px;
	--ht-shadow:    0 2px 8px rgba(11,30,61,.12);
}

/* ============================================================
   ADMIN STYLES
   ============================================================ */

.ht-admin {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.ht-admin h1 {
	color: var(--ht-navy) !important;
	border-bottom: 3px solid var(--ht-red);
	padding-bottom: 8px;
}

/* Cards row */
.ht-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 20px 0;
}

.ht-card {
	background: var(--ht-white);
	border: 1px solid var(--ht-border);
	border-radius: var(--ht-radius);
	padding: 16px 20px;
	min-width: 160px;
	box-shadow: var(--ht-shadow);
}

.ht-card__label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--ht-muted) !important;
	margin-bottom: 4px;
}

.ht-card__value {
	font-size: 28px;
	font-weight: 700;
	color: var(--ht-navy) !important;
	line-height: 1;
}

.ht-card__sub {
	font-size: 12px;
	color: var(--ht-muted) !important;
	margin-top: 4px;
}

.ht-card-wide {
	background: var(--ht-white);
	border: 1px solid var(--ht-border);
	border-radius: var(--ht-radius);
	padding: 20px 24px;
	margin-bottom: 20px;
	box-shadow: var(--ht-shadow);
}

/* Badges */
.ht-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.ht-badge--upcoming  { background: #e2e8f0 !important; color: #475569 !important; }
.ht-badge--open      { background: #dcfce7 !important; color: #166534 !important; }
.ht-badge--closed    { background: #fef3c7 !important; color: #92400e !important; }
.ht-badge--completed { background: #dbeafe !important; color: #1e40af !important; }
.ht-badge--pending   { background: #f1f5f9 !important; color: #64748b !important; }
.ht-badge--approved  { background: #dcfce7 !important; color: #166534 !important; }
.ht-badge--rejected  { background: #fee2e2 !important; color: #991b1b !important; }

/* Two-column layout */
.ht-two-col {
	display: flex;
	gap: 24px;
	align-items: flex-start;
}

.ht-panel {
	background: var(--ht-white);
	border: 1px solid var(--ht-border);
	border-radius: var(--ht-radius);
	padding: 20px;
	box-shadow: var(--ht-shadow);
	flex: 1;
	min-width: 0;
}

.ht-selected-row {
	background: var(--ht-ice) !important;
}

/* Notices */
.ht-notice {
	border-radius: var(--ht-radius);
	padding: 12px 16px;
	margin: 12px 0;
}

.ht-notice--info    { background: #e0f2fe !important; border-left: 4px solid #0284c7 !important; color: #0c4a6e !important; }
.ht-notice--warning { background: #fef3c7 !important; border-left: 4px solid #d97706 !important; color: #78350f !important; }
.ht-notice--error   { background: #fee2e2 !important; border-left: 4px solid #dc2626 !important; color: #7f1d1d !important; }
.ht-notice--success { background: #dcfce7 !important; border-left: 4px solid #16a34a !important; color: #14532d !important; }

.ht-result {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	color: var(--ht-blue) !important;
}

/* Rank indicators */
.ht-rank {
	display: inline-flex;
	width: 26px; height: 26px;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 13px;
}

.ht-rank--1 { background: var(--ht-gold);   color: #1a0a00 !important; }
.ht-rank--2 { background: var(--ht-silver); color: #1a1a1a !important; }
.ht-rank--3 { background: var(--ht-bronze); color: #ffffff !important; }

.ht-row--last td { background: #fff7ed !important; }
.ht-row--mid  td { background: #f0fdf4 !important; }

/* ============================================================
   PUBLIC FRONTEND STYLES
   ============================================================ */

.ht-wrap {
	max-width: 900px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--ht-text) !important;
}

/* Headings */
.ht-wrap h2 {
	font-size: 1.5rem;
	color: var(--ht-navy) !important;
	margin: 0 0 4px;
}

.ht-subtitle {
	color: var(--ht-muted) !important;
	margin: 0 0 16px;
	font-size: 0.95rem;
}

/* Buttons — !important guards against theme overrides */
.ht-btn {
	display: inline-block;
	padding: 10px 24px;
	border-radius: var(--ht-radius) !important;
	font-size: 0.95rem !important;
	font-weight: 600 !important;
	cursor: pointer;
	border: 2px solid transparent !important;
	transition: background .15s, color .15s, border-color .15s, opacity .15s;
	text-decoration: none !important;
	line-height: 1.4;
}

.ht-btn:hover { opacity: .9; }

.ht-btn--primary {
	background: var(--ht-red) !important;
	color: #ffffff !important;
	border-color: var(--ht-red) !important;
}
.ht-btn--primary:hover {
	background: #a50d25 !important;
	border-color: #a50d25 !important;
	color: #ffffff !important;
	opacity: 1;
}

.ht-btn--secondary {
	background: var(--ht-navy) !important;
	color: #ffffff !important;
	border-color: var(--ht-navy) !important;
}
.ht-btn--secondary:hover {
	background: var(--ht-blue) !important;
	border-color: var(--ht-blue) !important;
	color: #ffffff !important;
	opacity: 1;
}

/* Form elements */
.ht-form {
	display: block;
}

.ht-form-row {
	margin-bottom: 20px;
}

.ht-label {
	display: flex !important;
	align-items: center;
	gap: 10px;
	font-weight: 600 !important;
	margin-bottom: 8px;
	color: #0b1e3d !important;
}

.ht-select, .ht-input {
	width: 100%;
	padding: 9px 12px;
	border: 1.5px solid var(--ht-border) !important;
	border-radius: var(--ht-radius) !important;
	font-size: 0.95rem !important;
	font-family: inherit !important;
	color: #1a2a3a !important;
	background: #ffffff !important;
	background-color: #ffffff !important;
	box-sizing: border-box;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
}

.ht-select:focus, .ht-input:focus {
	outline: none !important;
	border-color: var(--ht-blue) !important;
	box-shadow: 0 0 0 3px rgba(0,63,138,.15) !important;
}

/* Placeholder text — readable but clearly secondary */
.ht-input::placeholder,
.ht-select::placeholder {
	color: #9aabb8 !important;
	opacity: 1 !important;
}

/* Points badge */
.ht-pts-badge {
	display: inline-block;
	background: var(--ht-navy);
	color: var(--ht-white) !important;
	font-size: 12px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 999px;
}

.ht-scoring-legend {
	font-size: 0.85rem;
	color: var(--ht-muted) !important;
	margin-bottom: 16px;
}

.ht-pts {
	background: var(--ht-gold);
	color: var(--ht-navy) !important;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 999px;
}

/* ---- Round cards ---- */
.ht-card-wide.ht-round {
	background: var(--ht-white);
	border: 1px solid var(--ht-border);
	border-top: 4px solid var(--ht-navy);
	border-radius: var(--ht-radius);
	padding: 20px 24px;
	margin-bottom: 24px;
	box-shadow: var(--ht-shadow);
}

.ht-round-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

/* Matchup grid */
.ht-matchups-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
	margin-bottom: 20px;
}

.ht-matchup-card {
	background: var(--ht-light);
	border: 1px solid var(--ht-border);
	border-radius: var(--ht-radius);
	padding: 14px;
	position: relative;
}

.ht-matchup-card.ht-matchup--result {
	border-color: var(--ht-blue);
}

/* ── Incomplete card highlight (submit validation) ───────── */
.ht-matchup-card.ht-matchup--error {
	border-color: #ef4444;
	border-width: 2px;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.ht-matchup-conf {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--ht-muted) !important;
	margin-bottom: 10px;
	font-weight: 600;
}

/* Team radio buttons */
.ht-team-picker {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 14px;
}

.ht-team-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border: 2px solid var(--ht-border);
	border-radius: var(--ht-radius);
	cursor: pointer;
	background: var(--ht-white);
	transition: border-color .15s, background .15s;
}

.ht-team-option:hover {
	border-color: var(--ht-blue);
	background: #eef4ff;
}

.ht-team-option input[type="radio"] {
	accent-color: var(--ht-red);
	width: 16px;
	height: 16px;
}

.ht-team-option input[type="radio"]:checked + .ht-team-name {
	font-weight: 700;
	color: #166534 !important;
}

.ht-team-option:has(input:checked) {
	border-color: #22c55e;
	background: #f0fdf4;
}

/* Keep green even when the card is in missing-team error state */
.ht-missing-team .ht-team-option:has(input:checked) {
	border-color: #22c55e !important;
	background: #f0fdf4 !important;
}

/* Red: all unselected team buttons when team pick is missing — placed after all
   other team-option rules so cascade order also works in our favour */
.ht-matchup-card.ht-missing-team .ht-team-option {
	border-color: #ef4444 !important;
	background: #fef2f2 !important;
}
.ht-matchup-card.ht-missing-team .ht-team-option:has(input:checked) {
	border-color: #22c55e !important;
	background: #f0fdf4 !important;
}

.ht-team-name {
	font-size: 0.9rem;
	color: var(--ht-text) !important;
}

.ht-team-seed {
	display: block;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #888;
	margin-top: 1px;
}

/* Upset bonus label shown on underdog team in active tipping form */
.ht-upset-bonus {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	color: #d97706;
	margin-top: 3px;
	letter-spacing: .02em;
}

/* Upset result banner shown in read-only card when underdog won */
.ht-upset-badge {
	background: #fef3c7;
	border: 1px solid #f59e0b;
	border-radius: 6px;
	color: #92400e;
	font-size: 0.8rem;
	font-weight: 700;
	padding: 4px 10px;
	margin-bottom: 8px;
	text-align: center;
}

.ht-vs {
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	color: var(--ht-muted) !important;
	text-transform: uppercase;
}

/* Games picker */
.ht-games-picker {
	border-top: 1px solid var(--ht-border);
	padding-top: 10px;
}

.ht-games-picker .ht-label {
	font-size: 12px;
	color: var(--ht-muted) !important;
	margin-bottom: 6px;
}

.ht-games-options {
	display: flex;
	gap: 6px;
}

.ht-games-option {
	display: flex;
	align-items: center;
	gap: 0;
}

.ht-games-option input[type="radio"] {
	display: none;
}

.ht-games-option span {
	display: inline-flex;
	width: 38px;
	height: 38px;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--ht-border);
	border-radius: var(--ht-radius);
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	background: var(--ht-white);
	color: var(--ht-text) !important;
	transition: all .15s;
}

.ht-games-option input:checked + span {
	background: #22c55e;
	border-color: #22c55e;
	color: #fff !important;
}

.ht-games-option span:hover {
	border-color: var(--ht-blue);
	background: var(--ht-ice);
	color: var(--ht-navy) !important;
}

/* Red: all unselected games buttons when series-length is missing — placed after
   all other games-option rules so cascade order also works in our favour */
.ht-matchup-card.ht-missing-games .ht-games-option span {
	border-color: #ef4444 !important;
	background: #fef2f2 !important;
	color: #dc2626 !important;
}
/* Keep selected game green even inside an error card */
.ht-matchup-card.ht-missing-games .ht-games-option input:checked + span {
	background: #22c55e !important;
	border-color: #22c55e !important;
	color: #fff !important;
}

/* Saved indicator */
.ht-saved-indicator {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 11px;
	color: var(--ht-success) !important;
	font-weight: 600;
}

/* Form actions */
.ht-form-actions {
	padding-top: 8px;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.ht-form-msg {
	font-size: 0.9rem;
	font-weight: 600;
}

.ht-form-msg.success { color: var(--ht-success) !important; }
.ht-form-msg.error   { color: var(--ht-error) !important; }

/* Read-only matchup result display */
.ht-matchup-teams {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.ht-matchup-teams .ht-winner {
	font-weight: 700;
	color: var(--ht-success) !important;
}

.ht-my-pick {
	font-size: 0.9rem;
	margin-bottom: 8px;
	color: var(--ht-text) !important;
}

.ht-actual-result {
	font-size: 0.85rem;
	color: var(--ht-muted) !important;
}

.ht-correct { color: var(--ht-success) !important; }
.ht-wrong   { color: var(--ht-error) !important; }
.ht-pending { color: var(--ht-muted) !important; font-style: italic; }

.ht-pts-earned {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ht-navy) !important;
	margin-top: 4px;
}

.ht-no-pick {
	color: var(--ht-muted) !important;
	font-style: italic;
	font-size: 0.9rem;
}

/* ---- Standings ---- */
.ht-standings-wrap { max-width: 760px; }

.ht-prize-summary-heading {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--ht-muted);
	margin: 20px 0 0;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.ht-prize-summary {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}

.ht-prize-item {
	flex: 1;
	min-width: 130px;
	border-radius: var(--ht-radius);
	padding: 14px;
	text-align: center;
}

.ht-prize--gold   { background: #fef9e7; border: 2px solid var(--ht-gold); }
.ht-prize--silver { background: #f8f9fa; border: 2px solid var(--ht-silver); }
.ht-prize--bronze { background: #fdf5eb; border: 2px solid var(--ht-bronze); }
.ht-prize--round  { background: #f0f6ff; border: 2px solid var(--ht-blue); }

.ht-prize-label  { font-size: 12px; font-weight: 600; color: var(--ht-muted) !important; margin-bottom: 4px; }
.ht-prize-amount { font-size: 1.4rem; font-weight: 700; color: var(--ht-navy) !important; }
.ht-prize-winner { font-size: 0.8rem; color: var(--ht-muted) !important; margin-top: 4px; }

.ht-table-wrap {
	overflow-x: auto;
	margin-left: -24px;
	margin-right: -24px;
}

.ht-standings-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.ht-standings-table th {
	background: var(--ht-navy);
	color: var(--ht-white) !important;
	padding: 10px 14px;
	text-align: left;
	font-weight: 600;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.ht-standings-table td {
	padding: 9px 14px;
	border-bottom: 1px solid var(--ht-border);
	color: var(--ht-text) !important;
}

.ht-standings-table tr:last-child td { border-bottom: none; }
.ht-standings-table tr:nth-child(even) td { background: var(--ht-light); }
.ht-standings-table th.ht-col-rank,
.ht-standings-table td.ht-col-rank,
.ht-standings-table th.ht-col-pts,
.ht-standings-table td.ht-col-pts { text-align: center; }

.ht-row--first td  { background: #fef9e7 !important; font-weight: 700; }
.ht-row--second td { background: #f8f9fa !important; }
.ht-row--third td  { background: #fdf5eb !important; }
.ht-row--mid td    { background: #f0fdf4 !important; }
.ht-row--last td   { background: #fff7ed !important; }
.ht-row--me td     { outline: 2px solid var(--ht-blue); }

.ht-you {
	font-size: 11px;
	color: var(--ht-blue) !important;
	font-weight: 600;
}

.ht-badge-round {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	background: var(--ht-blue);
	color: #fff;
	border-radius: 999px;
	padding: 1px 6px;
	margin-left: 5px;
	vertical-align: middle;
	letter-spacing: .02em;
}

.ht-badge-repick {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	background: #e8a000;
	color: #fff;
	border-radius: 999px;
	padding: 1px 6px;
	margin-left: 5px;
	vertical-align: middle;
	letter-spacing: .02em;
}

.ht-repick-section {
	border-top: 3px solid #e8a000;
	margin-top: 20px;
}

.ht-standings-note {
	font-size: 0.82rem;
	color: var(--ht-muted) !important;
	margin-top: 12px;
}
.ht-live-indicator {
	font-size: 0.75rem;
	color: var(--ht-muted);
	text-align: right;
	margin: 0 0 8px;
	opacity: 0.7;
}

/* ---- My Picks ---- */
.ht-mypicks-wrap { max-width: 760px; }

.ht-summary-bar {
	display: flex;
	gap: 24px;
	background: var(--ht-navy);
	border-radius: var(--ht-radius);
	padding: 16px 24px;
	margin-bottom: 24px;
}

.ht-summary-label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: rgba(255,255,255,.65) !important;
	margin-bottom: 4px;
}

.ht-summary-value {
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--ht-white) !important;
	line-height: 1;
}

.ht-mypicks-section {
	background: var(--ht-white);
	border: 1px solid var(--ht-border);
	border-radius: var(--ht-radius);
	padding: 18px 20px;
	margin-bottom: 16px;
	box-shadow: var(--ht-shadow);
}

.ht-mypicks-section h3 {
	margin: 0 0 12px;
	font-size: 1.1rem;
	color: var(--ht-navy) !important;
	border-bottom: 2px solid var(--ht-red);
	padding-bottom: 6px;
}

.ht-picks-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

@media (max-width: 540px) {
	.ht-picks-grid { grid-template-columns: 1fr; }
}

.ht-pick-item {
	background: var(--ht-light);
	border-radius: var(--ht-radius);
	padding: 14px;
}

.ht-pick-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--ht-muted) !important;
	margin-bottom: 4px;
}

.ht-pick-value {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--ht-navy) !important;
}

.ht-pick-team {
	font-size: 0.85rem;
	color: var(--ht-muted) !important;
}

.ht-pick-result {
	margin-top: 6px;
	font-size: 0.85rem;
	font-weight: 600;
}

.ht-pick-result.correct { color: var(--ht-success) !important; }
.ht-pick-result.wrong   { color: var(--ht-error) !important; }
.ht-pick-result.pending { color: var(--ht-muted) !important; }

/* Tips list (my picks) */
.ht-tips-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 12px;
}

.ht-tip-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 10px 12px;
	border-radius: var(--ht-radius);
	border: 1px solid var(--ht-border);
	font-size: 0.9rem;
	color: var(--ht-text) !important;
}

.ht-tip--correct { background: #f0fdf4; border-color: #86efac; }
.ht-tip--wrong   { background: #fef2f2; border-color: #fca5a5; }
.ht-tip--pending { background: var(--ht-light); }

.ht-tip-matchup {
	font-weight: 600;
	min-width: 180px;
	color: var(--ht-text) !important;
}

.ht-tip-pick  { color: var(--ht-muted) !important; }
.ht-tip-label { font-size: 11px; text-transform: uppercase; color: var(--ht-muted) !important; }

.ht-tip-outcome {
	margin-left: auto;
	font-weight: 600;
	color: var(--ht-text) !important;
}

.ht-tip-pts {
	display: inline-block;
	margin-left: 8px;
	background: var(--ht-navy);
	color: var(--ht-white) !important;
	font-size: 11px;
	padding: 2px 7px;
	border-radius: 999px;
}

.ht-round-summary {
	font-size: 0.9rem;
	color: var(--ht-muted) !important;
	text-align: right;
}

/* Pre-tournament section */
.ht-pretournament {
	border-top: 4px solid var(--ht-gold) !important;
}

.ht-current-picks {
	margin-top: 20px;
	border-top: 1px solid var(--ht-border);
	padding-top: 16px;
}

.ht-current-picks h3 {
	margin: 0 0 12px;
	font-size: 1rem;
	color: var(--ht-navy) !important;
}

/* Register page */
.ht-register {
	text-align: center;
	max-width: 500px;
	margin: 0 auto;
}

/* ---- Signup / Promo page ---- */
.ht-signup-wrap { max-width: 860px; margin: 0 auto; }

/* Hero */
.ht-promo-hero {
	background: var(--ht-navy);
	color: var(--ht-white);
	border-radius: var(--ht-radius);
	padding: 48px 36px;
	text-align: center;
	margin-bottom: 32px;
}
.ht-promo-hero h1 {
	font-size: 2rem;
	color: var(--ht-white) !important;
	margin: 8px 0 12px;
}
.ht-promo-hero__badge {
	display: inline-block;
	background: var(--ht-red);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 20px;
	margin-bottom: 8px;
}
.ht-promo-hero__sub {
	font-size: 1.05rem;
	opacity: .88;
	max-width: 600px;
	margin: 0 auto 20px;
	line-height: 1.6;
}
.ht-promo-hero__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 24px;
	font-size: 0.9rem;
	opacity: .85;
}
.ht-promo-hero__meta span::before { content: ''; }

/* Promo sections */
.ht-promo-section {
	background: var(--ht-white);
	border: 1px solid var(--ht-border);
	border-radius: var(--ht-radius);
	padding: 32px;
	margin-bottom: 24px;
}
.ht-promo-section--register { border-top: 4px solid var(--ht-red); }
.ht-promo-section h2 {
	font-size: 1.3rem;
	color: var(--ht-navy) !important;
	margin: 0 0 16px;
}
.ht-promo-intro {
	color: var(--ht-muted);
	margin: -8px 0 20px;
	font-size: 0.95rem;
}

/* How-it-works steps */
.ht-promo-steps { display: flex; flex-direction: column; gap: 16px; }
.ht-promo-step {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}
.ht-promo-step__num {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--ht-navy);
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ht-promo-step strong { display: block; color: var(--ht-navy); margin-bottom: 2px; }
.ht-promo-step p { margin: 0; font-size: 0.9rem; color: var(--ht-muted); }

/* Scoring table */
.ht-promo-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}
.ht-promo-table th {
	background: var(--ht-navy);
	color: #fff;
	padding: 8px 12px;
	text-align: left;
	font-weight: 600;
}
.ht-promo-table td { padding: 8px 12px; border-bottom: 1px solid var(--ht-border); }
.ht-promo-table th:first-child,
.ht-promo-table td:first-child { padding-left: 10px; }
.ht-promo-table tr:last-child td { border-bottom: none; }
.ht-pts-badge--bonus { background: #e8f5e9; color: #1a7f45 !important; }
.ht-pts-badge--upset { background: #fff7ed; color: #c2410c !important; }

/* Note box */
.ht-promo-note {
	background: var(--ht-light);
	border-left: 4px solid var(--ht-blue);
	padding: 12px 16px;
	border-radius: 0 var(--ht-radius) var(--ht-radius) 0;
	font-size: 0.85rem;
	color: var(--ht-muted);
	margin-top: 16px;
}
.ht-promo-note--upset {
	background: #fff7ed;
	border-left-color: #f97316;
}

/* Prizes grid */
.ht-promo-prizes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 12px;
	margin: 20px 0 16px;
}
.ht-promo-prize {
	border: 2px solid var(--ht-border);
	border-radius: var(--ht-radius);
	padding: 16px 12px;
	text-align: center;
}
.ht-promo-prize--gold   { border-color: var(--ht-gold);   background: #fffdf0; }
.ht-promo-prize--silver { border-color: var(--ht-silver); background: #f8f8f8; }
.ht-promo-prize--bronze { border-color: var(--ht-bronze); background: #fdf5ee; }
.ht-promo-prize--round  { border-color: var(--ht-blue);   background: #f0f6ff; }
.ht-promo-prize__icon   { font-size: 1.8rem; margin-bottom: 6px; }
.ht-promo-prize__label  { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ht-navy); margin-bottom: 6px; }
.ht-promo-prize__pct    { font-size: 1.2rem; font-weight: 700; color: var(--ht-navy); }
.ht-promo-prize__est    { font-size: 0.8rem; color: var(--ht-muted); margin-top: 2px; }

.ht-signup-card {
	background: var(--ht-white);
	border: 1px solid var(--ht-border);
	border-top: 4px solid var(--ht-navy);
	border-radius: var(--ht-radius);
	padding: 28px 32px;
	box-shadow: var(--ht-shadow);
}

.ht-signup-header {
	text-align: center;
	margin-bottom: 20px;
}

.ht-signup-header h2 {
	margin: 0 0 6px;
}

/* Square Web Payments card container — Square injects an iframe here.
   No padding: the iframe fills the full content box, so padding would
   shrink the clickable area and misalign the card fields. */
.ht-square-card-container {
	border: 1px solid var(--ht-border);
	border-radius: var(--ht-radius);
	background: var(--ht-white);
	min-height: 90px;
	position: relative;
}

/* The iframe Square injects must fill the container and be interactive */
.ht-square-card-container iframe {
	display: block !important;
	width: 100% !important;
	min-height: 90px !important;
	border: 0 !important;
	pointer-events: auto !important;
}

.ht-entry-fee-notice {
	background: var(--ht-light);
	border: 1px solid var(--ht-border);
	border-radius: var(--ht-radius);
	padding: 10px 14px;
	font-size: 0.9rem;
	color: var(--ht-muted) !important;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.ht-form-row--half {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.ht-field-hint {
	font-size: 12px;
	color: #6b7a8d !important;
	margin: 4px 0 0;
}

.ht-required {
	color: var(--ht-red) !important;
}

.ht-btn--full {
	width: 100%;
	text-align: center;
	padding: 13px;
	margin-top: 8px;
}

/* Two-step signup indicator */
.ht-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-bottom: 20px;
	font-size: 0.88rem;
	color: var(--ht-muted);
}

.ht-step {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
	color: var(--ht-muted);
}

.ht-step--active {
	color: var(--ht-navy);
	font-weight: 700;
}

.ht-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ht-border);
	color: var(--ht-muted);
	font-size: 11px;
	font-weight: 700;
}

.ht-step--active .ht-step__num {
	background: var(--ht-navy);
	color: var(--ht-white);
}

.ht-step-divider {
	color: var(--ht-border);
}

.ht-step2-summary {
	background: var(--ht-light);
	border: 1px solid var(--ht-border);
	border-radius: var(--ht-radius);
	padding: 12px 16px;
	margin-bottom: 18px;
	font-size: 0.9rem;
}

/* Ghost / secondary button */
.ht-btn--ghost {
	background: transparent;
	border: 1px solid var(--ht-border);
	color: var(--ht-muted) !important;
}

.ht-btn--ghost:hover {
	background: var(--ht-light);
	color: var(--ht-navy) !important;
}

.ht-signup-login {
	text-align: center;
	font-size: 0.88rem;
	color: var(--ht-muted) !important;
	margin-top: 14px;
}

.ht-signup-login a {
	color: var(--ht-blue) !important;
}

/* Responsive */
@media (max-width: 640px) {
	.ht-matchups-grid { grid-template-columns: 1fr; }
	.ht-two-col { flex-direction: column; }
	.ht-prize-summary { flex-direction: column; }
	.ht-round-header { flex-direction: column; }
	.ht-tip-row { flex-direction: column; align-items: flex-start; }
	.ht-tip-outcome { margin-left: 0; }
	.ht-form-row--half { grid-template-columns: 1fr; }
	.ht-signup-card { padding: 20px 18px; }

	/* Dashboard mobile */
	.ht-db-hero { flex-direction: column; gap: 16px; padding: 20px 18px; }
	.ht-db-hero__stats { justify-content: flex-start; gap: 16px; }
	.ht-db-tabs {
		gap: 0;
		border-radius: 0;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none; /* Firefox */
		flex-wrap: nowrap;
		padding-bottom: 0;
	}
	.ht-db-tabs::-webkit-scrollbar { display: none; } /* Chrome/Safari */
	.ht-db-tab {
		flex: 0 0 auto;
		font-size: 0.82rem;
		padding: 10px 14px;
		white-space: nowrap;
	}
	.ht-db-stat__value { font-size: 1.5rem; }
}

/* ============================================================
   PAGE TEMPLATES  (full-width wrapper used by ht-dashboard.php
   and ht-signup.php in /templates/)
   ============================================================ */

/**
 * The outer wrapper sits directly inside <body> after get_header().
 * We use negative margin + 100vw to break out of any theme content container
 * and span the full viewport width.
 */
.ht-page-template .site-content,
.ht-page-template #content,
.ht-page-template .content-area,
.ht-page-template #primary {
	/* Remove max-width and padding imposed by most themes. */
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

.ht-page-template-wrap {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Signup template: centred card on a light background */
.ht-page-template-wrap--signup {
	background: var(--ht-light);
	min-height: 60vh;
	padding: 48px 16px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

/* Dashboard template: full width, light background */
.ht-page-template-wrap .ht-dashboard {
	width: 100%;
	max-width: 100%;
	padding: 0 0 60px;
}

/* Hero bar spans full width */
.ht-page-template-wrap .ht-db-hero {
	border-radius: 0;
}

/* Tab nav and panels: constrain readable width but allow background to bleed */
.ht-page-template-wrap .ht-db-tabs {
	border-radius: 0;
	padding-left: 24px;
}

.ht-page-template-wrap .ht-db-panel {
	border-left: none;
	border-right: none;
	border-radius: 0;
	padding: 32px 24px;
}

/* Centred helper for login/error notices on template pages */
.ht-page-center {
	max-width: 640px;
	margin: 60px auto;
	padding: 0 16px;
}

@media (max-width: 600px) {
	.ht-page-template-wrap--signup { padding: 24px 12px; }
	.ht-page-template-wrap .ht-db-panel { padding: 20px 16px; }
	.ht-page-template-wrap .ht-db-tabs { padding-left: 12px; }
}

/* ============================================================
   DASHBOARD  [ht_dashboard]
   ============================================================ */

.ht-dashboard { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

/* Season selector bar */
.ht-season-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	padding: 8px 14px;
	background: #f0f4ff;
	border: 1px solid #c7d3f0;
	border-radius: 8px;
	flex-wrap: wrap;
}
.ht-season-bar__label {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--ht-muted) !important;
	white-space: nowrap;
}
.ht-season-bar__tabs {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.ht-season-tab {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: none;
	background: #fff;
	border: 1px solid #c7d3f0;
	color: var(--ht-primary) !important;
	transition: all 0.15s, color 0.15s;
}
.ht-season-tab:hover {
	background: var(--ht-primary) !important;
	color: red !important;
	border-color: var(--ht-primary) !important;
}
.ht-season-tab.is-active {
	background: var(--ht-gold) !important;
	color: #1a1a2e !important;
	border-color: var(--ht-gold) !important;
	font-size: 0.9rem !important;
	font-weight: 800 !important;
	padding: 6px 16px !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}
.ht-season-tab__live {
	color: #4ade80;
	font-size: 0.65rem;
}

/* Upcoming season promo banner */
.ht-season-promo {
	background: linear-gradient(135deg, #1e3a5f 0%, #0f2744 100%);
	border-left: 4px solid var(--ht-gold);
	border-radius: 8px;
	padding: 16px 20px;
	margin-bottom: 16px;
	color: #fff;
}
.ht-season-promo__content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.ht-season-promo__text {
	font-size: 0.95rem;
	line-height: 1.5;
}
.ht-season-promo__text strong {
	display: block;
	font-size: 1.05rem;
	margin-bottom: 2px;
	color: var(--ht-gold);
}
.ht-season-promo__cta {
	white-space: nowrap;
	flex-shrink: 0;
}

/* Hero bar */
.ht-db-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	background: var(--ht-navy);
	color: var(--ht-white) !important;
	border-radius: var(--ht-radius) var(--ht-radius) 0 0;
	padding: 24px 28px;
	border-bottom: 4px solid var(--ht-red);
}

.ht-db-hero__welcome {
	font-size: 1rem;
	opacity: .85;
	margin-bottom: 4px;
	color: var(--ht-white) !important;
}
.ht-db-hero__welcome strong { color: var(--ht-white) !important; }

.ht-db-hero__comp {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--ht-white) !important;
}

.ht-db-hero__stats {
	display: flex;
	gap: 24px;
	flex-shrink: 0;
}

.ht-db-stat {
	text-align: center;
	background: rgba(255,255,255,.08);
	border-radius: 8px;
	padding: 10px 18px;
	min-width: 70px;
}

.ht-db-stat__value {
	font-size: 1.8rem;
	font-weight: 800;
	line-height: 1;
	color: var(--ht-white) !important;
}

.ht-db-stat__of {
	font-size: .9rem;
	opacity: .65;
	font-weight: 400;
	color: var(--ht-white) !important;
}

.ht-db-stat__label {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	opacity: .65;
	margin-top: 3px;
	color: var(--ht-white) !important;
}

.ht-db-stat--deadline .ht-db-stat__value { color: #ffd166 !important; }

/* Tab nav */
.ht-db-tabs {
	display: flex;
	gap: 2px;
	background: var(--ht-light);
	border: 1px solid var(--ht-border);
	border-top: none;
	padding: 8px 12px 0;
}

.ht-db-tab {
	position: relative;
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	padding: 10px 20px 12px;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--ht-muted) !important;
	cursor: pointer;
	border-radius: 4px 4px 0 0;
	transition: color .15s, background .15s;
	display: flex;
	align-items: center;
	gap: 6px;
}

.ht-db-tab:hover {
	color: var(--ht-navy) !important;
	background: rgba(11,30,61,.05);
}

.ht-db-tab.is-active {
	color: var(--ht-navy) !important;
	border-bottom-color: var(--ht-red);
	background: var(--ht-white);
}

/* Badge on Submit Picks tab */
.ht-db-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--ht-red);
	color: #fff !important;
	font-size: 0.7rem;
	font-weight: 700;
	border-radius: 99px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	line-height: 1;
}

/* Panels */
.ht-db-panel {
	background: var(--ht-white);
	border: 1px solid var(--ht-border);
	border-top: none;
	border-radius: 0 0 var(--ht-radius) var(--ht-radius);
	padding: 24px;
	min-height: 200px;
	color: var(--ht-text) !important;
	overflow: hidden;
}

.ht-db-panel--hidden { display: none; }

/* Dashboard: logout button in hero */
.ht-db-logout {
	flex-shrink: 0;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255,255,255,.1);
	color: rgba(255,255,255,.8) !important;
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 6px;
	padding: 7px 14px;
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: none;
	transition: background .15s, color .15s;
}
.ht-db-logout:hover {
	background: var(--ht-red);
	color: #fff !important;
	border-color: var(--ht-red);
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */

.ht-page-template-wrap--login {
	background: var(--ht-navy);
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 16px;
}

.ht-login-card {
	background: var(--ht-white);
	border-radius: 12px;
	box-shadow: 0 8px 40px rgba(0,0,0,.35);
	padding: 40px 36px;
	width: 100%;
	max-width: 420px;
}

.ht-login-header {
	text-align: center;
	margin-bottom: 28px;
}

.ht-login-puck {
	font-size: 2.5rem;
	margin-bottom: 8px;
}

.ht-login-title {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--ht-navy) !important;
	margin: 0 0 4px;
	line-height: 1.2;
}

.ht-login-subtitle {
	color: var(--ht-muted) !important;
	font-size: 0.88rem;
	margin: 0;
}

.ht-login-row-inline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 4px 0 16px;
	font-size: 0.85rem;
}

.ht-login-remember {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--ht-text) !important;
	cursor: pointer;
}

.ht-login-forgot {
	color: var(--ht-blue) !important;
	text-decoration: none;
	white-space: nowrap;
}
.ht-login-forgot:hover { text-decoration: underline; }

.ht-login-signup-link {
	text-align: center;
	margin: 20px 0 0;
	font-size: 0.88rem;
	color: var(--ht-muted) !important;
}
.ht-login-signup-link a { color: var(--ht-blue) !important; text-decoration: none; font-weight: 600; }
.ht-login-signup-link a:hover { text-decoration: underline; }

/* ============================================================
   ACCOUNT TAB
   ============================================================ */

.ht-account-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}

.ht-account-section h3 {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ht-navy) !important;
	margin: 0 0 16px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--ht-border);
}

.ht-btn--outline {
	background: transparent !important;
	border: 2px solid currentColor !important;
}

.ht-btn--danger {
	color: var(--ht-error) !important;
	background: transparent !important;
	border-color: var(--ht-error) !important;
}
.ht-btn--danger:hover {
	background: var(--ht-error) !important;
	color: #fff !important;
	border-color: var(--ht-error) !important;
	opacity: 1;
}

/* ---- Picks Ledger ---- */
.ht-ledger-rules {
	background: var(--ht-light);
	border: 1px solid var(--ht-border);
	border-radius: var(--ht-radius);
	padding: 20px 24px;
	margin-top: 20px;
	margin-bottom: 8px;
}
.ht-ledger-rules__title {
	margin: 0 0 16px;
	font-size: 1rem;
	color: var(--ht-dark);
}
.ht-ledger-rules__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: start;
}
.ht-ledger-prizes {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.ht-ledger-prizes .ht-prize-item {
	flex: 1;
	min-width: 80px;
}
.ht-prize-pct {
	font-size: 0.72rem;
	color: var(--ht-muted);
	margin-top: 2px;
}
@media (max-width: 700px) {
	.ht-ledger-rules__body { grid-template-columns: 1fr; }
}

#ht-panel-ledger .ht-table-wrap {
	margin-left: 0;
	margin-right: 0;
	border-radius: var(--ht-radius);
	border: 1px solid var(--ht-border);
}
.ht-ledger-table th {
	font-size: 0.78rem !important;
	text-align: center !important;
	vertical-align: bottom;
	line-height: 1.3;
}
.ht-ledger-table th:first-child { text-align: left !important; padding-left: 10px !important; }
.ht-ledger-table td { text-align: center !important; vertical-align: middle; }
.ht-ledger-table td:first-child { text-align: left !important; padding-left: 10px !important; }
.ht-ledger-table td.ht-tip--correct { background: #f0fdf4 !important; }
.ht-ledger-table td.ht-tip--wrong   { background: #fef2f2 !important; }

.ht-account-logout {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--ht-border);
}

@media (max-width: 640px) {
	.ht-account-grid { grid-template-columns: 1fr; gap: 24px; }
	.ht-login-card { padding: 28px 20px; }
	.ht-login-row-inline { flex-direction: column; align-items: flex-start; gap: 8px; }
	.ht-db-logout { font-size: 0.75rem; padding: 6px 10px; }
}