/* =============================================
   WM-Tippspiel 2026 – Global Styles
   Based on PACE Design System with WM-Akzente
   ============================================= */

/* --- CSS Variables --- */
:root {
	/* PACE Brand */
	--brand: #059669;
	--brand-700: #047857;
	--brand-50: #ecfdf5;
	--ring: #a7f3d0;

	/* WM 2026 Palette */
	--wm-primary: #1a472a;
	--wm-primary-light: #2d6b42;
	--wm-accent: #c8a415;
	--wm-accent-light: #e8c84a;
	--wm-secondary: #1e3a5f;
	--wm-secondary-light: #2d5a8f;

	/* Surfaces & Text */
	--bg: #f8fafb;
	--bg-dark: #0b1020;
	--surface: #ffffff;
	--surface-hover: #f0fdf4;
	--txt: #0f172a;
	--txt-light: #475569;
	--txt-muted: #94a3b8;
	--border: #e2e8f0;
	--border-light: #f1f5f9;

	/* Scoring Colors */
	--exact: #059669;
	--diff: #d97706;
	--tendency: #3b82f6;
	--wrong: #ef4444;

	/* Layout */
	--maxw: 1100px;
	--radius: 12px;
	--radius-sm: 8px;
	--radius-xs: 4px;
	--shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	--shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);

	/* Transitions */
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--txt);
	background: var(--bg);
	line-height: 1.6;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
}
main { flex: 1; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

/* --- Container --- */
.wm-container {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 2rem 1.5rem;
}

/* --- Navigation --- */
.wm-nav {
	background: var(--wm-primary);
	color: white;
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
.wm-nav__inner {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 1.5rem;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.wm-nav__brand {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: white;
	text-decoration: none;
	font-weight: 700;
	font-size: 1.1rem;
}
.wm-nav__brand:hover { text-decoration: none; }
.wm-nav__logo { height: 1.5rem; width: 1.5rem; vertical-align: middle; }

.wm-nav__year { color: var(--wm-accent); }
.wm-nav__actions { display: flex; align-items: center; gap: 0.75rem; }
.wm-nav__actions .btn { white-space: nowrap; }
.wm-nav__burger {
	display: none;
	background: none;
	border: none;
	color: white;
	font-size: 1.5rem;
	cursor: pointer;
	padding: 0.25rem;
	line-height: 1;
}
.wm-nav__user {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.8);
	padding-right: 0.75rem;
	margin-right: 0.25rem;
	border-right: 1px solid rgba(255, 255, 255, 0.25);
}
.wm-nav__user strong { color: white; }

/* --- Buttons --- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.625rem 1.25rem;
	font-size: 0.9375rem;
	font-weight: 600;
	border-radius: var(--radius-sm);
	border: 2px solid transparent;
	cursor: pointer;
	transition: all 0.2s var(--ease);
	text-decoration: none;
	line-height: 1.4;
}
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--primary {
	background: var(--brand);
	color: white;
	border-color: var(--brand);
}
.btn--primary:hover:not(:disabled) {
	background: var(--brand-700);
	border-color: var(--brand-700);
}
.btn--outline {
	background: transparent;
	color: var(--brand);
	border-color: var(--brand);
}
.btn--outline:hover:not(:disabled) {
	background: var(--brand-50);
}
.btn--outline-white {
	background: transparent;
	color: white;
	border-color: rgba(255, 255, 255, 0.5);
}
.btn--outline-white:hover { background: rgba(255, 255, 255, 0.1); border-color: white; }
.btn--danger {
	background: var(--wrong, #c0392b);
	color: white;
	border-color: var(--wrong, #c0392b);
}
.btn--danger:hover:not(:disabled) {
	background: #a93226;
	border-color: #a93226;
}
.btn--whatsapp {
	background: #25D366;
	color: white;
	border-color: #25D366;
}
.btn--whatsapp:hover:not(:disabled) {
	background: #1da851;
	border-color: #1da851;
}
.btn--sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
.btn--lg { padding: 0.875rem 2rem; font-size: 1.0625rem; }
.btn--full { width: 100%; }
.btn .spinner {
	width: 1em; height: 1em;
	border: 2px solid rgba(255,255,255,0.3);
	border-top-color: white;
	border-radius: 50%;
	animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Page Loading Skeleton --- */
@keyframes shimmer {
	0% { background-position: -400px 0; }
	100% { background-position: 400px 0; }
}
.wm-skeleton { display: flex; flex-direction: column; gap: 0.5rem; }
.wm-skeleton[hidden] { display: none; }
.wm-skeleton__bone {
	background: linear-gradient(90deg, var(--border-light) 25%, #e2e8f0 37%, var(--border-light) 63%);
	background-size: 800px 100%;
	animation: shimmer 1.5s ease infinite;
	border-radius: var(--radius-sm);
}
.wm-skeleton__row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	background: var(--surface);
	border-radius: var(--radius-sm);
}
.wm-skeleton__row .wm-skeleton__bone--flag { width: 1.25rem; height: 0.9rem; border-radius: 2px; flex-shrink: 0; }
.wm-skeleton__row .wm-skeleton__bone--text { height: 0.875rem; flex: 1; max-width: 8rem; }
.wm-skeleton__row .wm-skeleton__bone--score { width: 2rem; height: 1.5rem; border-radius: var(--radius-xs); }
.wm-skeleton__row .wm-skeleton__bone--sep { width: 0.5rem; height: 0.875rem; }
.wm-skeleton__row .wm-skeleton__bone--time { width: 4.5rem; height: 0.75rem; }
.wm-skeleton__row .wm-skeleton__bone--points { width: 2.5rem; height: 2rem; border-radius: var(--radius-xs); }
.wm-skeleton__header {
	height: 2.25rem;
	border-radius: var(--radius-sm);
}
.wm-skeleton__table-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.625rem 1rem;
	border-bottom: 1px solid var(--border-light);
}
.wm-skeleton__table-row .wm-skeleton__bone--rank { width: 1.5rem; height: 1rem; }
.wm-skeleton__table-row .wm-skeleton__bone--name { height: 1rem; flex: 1; max-width: 10rem; }
.wm-skeleton__table-row .wm-skeleton__bone--num { width: 2.5rem; height: 1rem; }
.wm-skeleton__tabs {
	display: flex; gap: 0.5rem;
	padding: 0.25rem 0; margin-bottom: 0.5rem;
}
.wm-skeleton__tabs .wm-skeleton__bone--tab { width: 5rem; height: 2rem; border-radius: 999px; }
.wm-loading[hidden] { display: none; }

/* --- Forms --- */
.wm-field {
	margin-bottom: 1rem;
}
.wm-field label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 0.375rem;
	color: var(--txt);
}
.wm-field input,
.wm-field select {
	width: 100%;
	padding: 0.625rem 0.875rem;
	font-size: 0.9375rem;
	border: 2px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--txt);
	transition: border-color 0.2s var(--ease);
}
.wm-field input:focus,
.wm-field select:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--ring);
}
.wm-field input:read-only {
	background: var(--border-light);
	color: var(--txt-light);
}
.wm-field__hint {
	display: block;
	font-size: 0.75rem;
	color: var(--txt-muted, #888);
	margin-top: 0.25rem;
}
.wm-field--checkbox {
	margin-bottom: 1rem;
}
.wm-field--checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--txt-light);
	cursor: pointer;
	line-height: 1.4;
}
.wm-field--checkbox input[type="checkbox"] {
	width: auto;
	margin-top: 0.15rem;
	flex-shrink: 0;
}
.wm-credential__email-sent {
	font-size: 0.875rem;
	color: var(--exact, #059669);
	text-align: center;
	margin: 0.75rem 0;
}

/* --- Status Messages --- */
.wm-status {
	margin: 0.75rem 0;
	padding: 0;
	font-size: 0.875rem;
	min-height: 1.5em;
}
.wm-status--error { color: var(--wrong); }
.wm-status--success { color: var(--exact); }
.wm-status--info { color: var(--txt-light); }
.wm-hint {
	font-size: 0.8125rem;
	color: var(--txt-light);
	text-align: center;
	margin-top: 0.75rem;
}

/* --- Modal --- */
.wm-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s var(--ease), visibility 0.25s;
}
.wm-modal[aria-hidden="false"] {
	opacity: 1;
	visibility: visible;
}
.wm-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
}
.wm-modal__dialog {
	position: relative;
	background: var(--surface);
	border-radius: var(--radius);
	padding: 2rem;
	max-width: 480px;
	width: 90%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: var(--shadow-lg);
	transform: translateY(20px);
	transition: transform 0.25s var(--ease);
}
.wm-modal[aria-hidden="false"] .wm-modal__dialog {
	transform: translateY(0);
}
.wm-modal__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	background: none;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
	color: var(--txt-muted);
	line-height: 1;
	padding: 0.25rem;
}
.wm-modal__close:hover { color: var(--txt); }
.wm-modal h2 { margin-bottom: 1.25rem; font-size: 1.25rem; }
.wm-modal__warning {
	color: var(--wrong, #c0392b);
	font-size: 0.875rem;
	margin: 0.75rem 0 1.25rem;
}
.wm-modal__actions {
	display: flex;
	gap: 0.75rem;
	justify-content: flex-end;
}
.wm-modal__actions--spread {
	justify-content: space-between;
	flex-wrap: nowrap;
}
@media (max-width: 480px) {
	.wm-modal__actions--spread {
		flex-direction: column;
	}
	.wm-modal__actions--spread .btn { width: 100%; }
}

/* --- Credential Display --- */
.wm-credential {
	margin: 1rem 0;
	padding: 1rem;
	background: var(--brand-50);
	border-radius: var(--radius-sm);
	border: 1px solid var(--ring);
}
.wm-credential label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--txt-light);
	display: block;
	margin-bottom: 0.375rem;
}
.wm-credential__value {
	font-size: 2rem;
	font-weight: 700;
	font-family: 'Courier New', monospace;
	letter-spacing: 0.2em;
	color: var(--wm-primary);
	text-align: center;
	padding: 0.5rem;
}
.wm-credential__hint {
	font-size: 0.8125rem;
	color: var(--txt-light);
	margin-top: 0.5rem;
}

/* --- Copy Field --- */
.wm-copy-field {
	display: flex;
	gap: 0.5rem;
}
.wm-copy-field input {
	flex: 1;
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	border: 2px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--border-light);
	color: var(--txt);
	font-family: monospace;
}

/* --- Credential Actions (email / print) --- */
.wm-credential-actions {
	margin: 1.25rem 0;
	padding: 1rem;
	border: 1px dashed var(--border);
	border-radius: var(--radius-sm);
	background: var(--bg);
}
.wm-credential-actions__label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--txt-light);
	margin: 0 0 0.625rem;
}
.wm-credential-actions__email {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}
.wm-credential-actions__input {
	flex: 1;
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	border: 2px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--txt);
}
.wm-credential-actions__input:focus {
	border-color: var(--ring);
	outline: none;
}
.wm-credential-actions .btn--outline {
	margin-top: 0.5rem;
}

/* --- Success Icon --- */
.wm-success-icon {
	width: 3rem; height: 3rem;
	background: var(--brand);
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 auto 1rem;
}

/* --- Badge --- */
.wm-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0.625rem;
	font-size: 0.75rem;
	font-weight: 600;
	border-radius: 999px;
	background: var(--brand-50);
	color: var(--brand);
}
.wm-badge--creator {
	background: #fef3c7;
	color: #92400e;
}
.wm-badge--admin {
	background: #dbeafe;
	color: #1e40af;
}

/* --- Tables --- */
.wm-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}
.wm-table th {
	padding: 0.75rem 0.5rem;
	text-align: left;
	font-weight: 600;
	color: var(--txt-light);
	border-bottom: 2px solid var(--border);
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.wm-table td {
	padding: 0.75rem 0.5rem;
	border-bottom: 1px solid var(--border-light);
}
.wm-table tbody tr:hover {
	background: var(--surface-hover);
}
.wm-table tr.wm-table__me {
	background: var(--brand-50);
	font-weight: 600;
}

/* --- Round Tabs --- */
.wm-round-tabs {
	display: flex;
	gap: 0.25rem;
	margin: 1.5rem 0;
	padding-bottom: 0.25rem;
	flex-wrap: wrap;
}
.wm-round-tabs::-webkit-scrollbar { display: none; }
.wm-round-tab {
	padding: 0.5rem 1rem;
	font-size: 0.8125rem;
	font-weight: 600;
	border: 2px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface);
	color: var(--txt-light);
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.2s var(--ease);
}
.wm-round-tab:hover { border-color: var(--brand); color: var(--brand); }
.wm-round-tab--active {
	background: var(--wm-primary);
	color: white;
	border-color: var(--wm-primary);
}
.wm-round-tab--locked {
	opacity: 0.5;
	cursor: not-allowed;
}

/* --- Phase Tabs (Navigation) --- */
.wm-phase-tabs {
	display: flex;
	gap: 0.5rem;
	margin: 1.5rem 0;
}
.wm-phase-tab {
	padding: 0.625rem 1.25rem;
	font-size: 0.9375rem;
	font-weight: 600;
	border-radius: var(--radius-sm);
	border: 2px solid var(--border);
	color: var(--txt-light);
	text-decoration: none;
	transition: all 0.2s var(--ease);
}
.wm-phase-tab:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.wm-phase-tab--active {
	background: var(--wm-primary);
	color: white;
	border-color: var(--wm-primary);
}

/* --- Page Header --- */
.wm-page-header {
	margin-bottom: 1.5rem;
}
.wm-page-header h1 {
	font-size: 1.75rem;
	font-weight: 800;
	color: var(--wm-primary);
}

/* --- Summary Stats --- */
.wm-summary {
	display: flex;
	gap: 1.5rem;
	margin-top: 1rem;
}
.wm-summary__item {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.wm-summary__value {
	font-size: 2rem;
	font-weight: 800;
	color: var(--wm-primary);
}
.wm-summary__label {
	font-size: 0.75rem;
	color: var(--txt-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* --- Footer --- */
.wm-footer {
	background: var(--wm-primary);
	color: rgba(255, 255, 255, 0.8);
	text-align: center;
	padding: 1.5rem;
	font-size: 0.875rem;
	margin-top: auto;
}
.wm-footer a { color: var(--wm-accent); }
.wm-footer__logos {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.5rem;
	margin-bottom: 0.75rem;
}
.wm-footer__logo {
	height: 28px;
	width: auto;
	background: rgba(255, 255, 255, 0.92);
	padding: 5px 12px;
	border-radius: 6px;
	transition: opacity 0.2s;
}
.wm-footer__logo:hover { opacity: 0.85; }
.wm-footer__legal {
	margin-top: 0.5rem;
	font-size: 0.75rem;
}
.wm-footer__legal a { color: rgba(255, 255, 255, 0.6); }
.wm-footer__about {
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.55);
	margin-top: 0.25rem;
}
.wm-footer__cta {
	margin-top: 0.5rem;
}
.wm-footer__cta a {
	display: inline-block;
	color: white;
	background: rgba(255, 255, 255, 0.12);
	padding: 0.4rem 1rem;
	border-radius: 6px;
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s;
}
.wm-footer__cta a:hover {
	background: rgba(255, 255, 255, 0.22);
}

/* --- Match Card (shared) --- */
.wm-match {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	transition: border-color 0.2s var(--ease);
}
.wm-match:hover { border-color: var(--brand); }
.wm-match--locked {
	opacity: 0.6;
	background: var(--border-light);
}
.wm-match__teams {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.wm-match__team {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	font-weight: 600;
	font-size: 0.875rem;
	min-width: 0;
}
.wm-match__team .fi { font-size: 1.25em; }
.wm-match__vs {
	font-size: 0.75rem;
	color: var(--txt-muted);
	font-weight: 600;
}
.wm-match__time {
	font-size: 0.75rem;
	color: var(--txt-muted);
	white-space: nowrap;
}
.wm-match__score {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}
.wm-match__score input {
	width: 3rem;
	padding: 0.375rem;
	text-align: center;
	font-size: 1rem;
	font-weight: 700;
	border: 2px solid var(--border);
	border-radius: var(--radius-xs);
	background: var(--surface);
}
.wm-match__score input:focus {
	outline: none;
	border-color: var(--brand);
}
.wm-match__score-sep {
	font-weight: 700;
	color: var(--txt-muted);
}
.wm-match__result {
	font-weight: 700;
	font-size: 1.125rem;
	min-width: 3rem;
	text-align: center;
}
.wm-match__points {
	min-width: 2.5rem;
	text-align: center;
	font-weight: 700;
	font-size: 0.875rem;
	padding: 0.25rem 0.5rem;
	border-radius: var(--radius-xs);
}
.wm-match__points--exact { background: #d1fae5; color: var(--exact); }
.wm-match__points--diff { background: #fef3c7; color: var(--diff); }
.wm-match__points--tendency { background: #dbeafe; color: var(--tendency); }
.wm-match__points--wrong { background: #fee2e2; color: var(--wrong); }

/* --- Accordion --- */
.wm-accordion {
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	margin-bottom: 0.5rem;
	overflow: hidden;
}
.wm-accordion__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1rem;
	background: var(--surface);
	cursor: pointer;
	user-select: none;
	font-weight: 700;
	transition: background 0.2s var(--ease);
}
.wm-accordion__header:hover { background: var(--surface-hover); }
.wm-accordion__chevron {
	transition: transform 0.2s var(--ease);
	font-size: 0.75rem;
}
.wm-accordion--open .wm-accordion__chevron {
	transform: rotate(180deg);
}
.wm-accordion__body {
	display: none;
	padding: 0.5rem 1rem 1rem;
}
.wm-accordion--open .wm-accordion__body {
	display: block;
}
.wm-accordion__actions {
	display: flex;
	gap: 0.5rem;
	justify-content: flex-end;
	padding-top: 0.5rem;
	flex-wrap: wrap;
}

/* --- Flag Icons Override --- */
.fi { line-height: 1; vertical-align: middle; }

/* --- Responsive --- */
@media (max-width: 768px) {
	.wm-nav__burger { display: block; }
	.wm-nav--has-menu .wm-nav__actions {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--wm-primary);
		flex-direction: column;
		padding: 0.5rem 1rem 1rem;
		gap: 0.375rem;
		box-shadow: 0 4px 12px rgba(0,0,0,0.2);
		z-index: 101;
	}
	.wm-nav--has-menu .wm-nav__actions .btn { width: 100%; justify-content: center; }
	.wm-nav--has-menu.wm-nav--open .wm-nav__actions { display: flex; }
	.wm-nav--has-menu .wm-nav__user { display: block; text-align: center; padding: 0.25rem 0 0.5rem; border-right: none; margin-right: 0; border-bottom: 1px solid rgba(255,255,255,0.15); margin-bottom: 0.25rem; }
	.wm-nav__inner { position: relative; }
	.wm-container { padding: 1rem; }
	.wm-match {
		flex-direction: column;
		align-items: stretch;
		gap: 0.375rem;
	}
	.wm-match__teams {
		display: flex;
		justify-content: center;
		gap: 0.5rem;
		flex-wrap: nowrap;
	}
	.wm-match__time {
		order: -1;
		text-align: center;
	}
	.wm-match__score {
		justify-content: center;
	}
	.wm-match__locked-badge {
		text-align: center;
	}
	.wm-summary { flex-wrap: wrap; gap: 1rem; }
	.wm-phase-tabs { flex-wrap: wrap; }
	.wm-table { font-size: 0.8125rem; }
	.wm-table__exact,
	.wm-table__diff,
	.wm-table__tendency { display: none; }
	.wm-page-header h1 { font-size: 1.375rem; }
	.wm-modal__dialog { padding: 1.25rem; }
	.wm-credential__value { font-size: 1.5rem; }
	.wm-round-tab { padding: 0.375rem 0.625rem; font-size: 0.75rem; }
}

@media (max-width: 480px) {
	.wm-nav__inner {
		padding: 0.5rem 0.75rem;
		min-height: 48px;
	}
	.wm-nav__brand { font-size: 0.95rem; }
	.btn--sm { padding: 0.3rem 0.5rem; font-size: 0.75rem; }
	.wm-container { padding: 0.75rem; }
	.wm-match { padding: 0.625rem 0.75rem; }
	.wm-match__team { font-size: 0.8125rem; }
	.wm-match__time { font-size: 0.6875rem; }
	.wm-phase-tabs { gap: 0.25rem; }
	.wm-phase-tab { padding: 0.5rem 0.75rem; font-size: 0.8125rem; }
	.wm-summary__value { font-size: 1.5rem; }
	.wm-footer { padding: 1rem; font-size: 0.8125rem; }
	.wm-toast__item { max-width: calc(100vw - 2rem); font-size: 0.8125rem; }
	.wm-toast { top: 0.75rem; right: 0.75rem; left: 0.75rem; }
	.wm-accordion__header { padding: 0.625rem 0.75rem; font-size: 0.875rem; }
	.wm-accordion__body { padding: 0.375rem 0.5rem 0.75rem; }
}

/* --- Toast Notification --- */
.wm-toast {
	position: fixed;
	top: 1.5rem;
	right: 1.5rem;
	z-index: 300;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	pointer-events: none;
}
.wm-toast__item {
	padding: 0.875rem 1.25rem;
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-lg);
	font-size: 0.9375rem;
	font-weight: 600;
	max-width: 380px;
	pointer-events: auto;
	animation: toast-in 0.3s var(--ease) forwards, toast-out 0.3s var(--ease) 4s forwards;
	opacity: 0;
	transform: translateX(100%);
}
.wm-toast__item--success {
	background: #d1fae5;
	color: var(--exact);
	border: 1px solid #a7f3d0;
}
.wm-toast__item--error {
	background: #fee2e2;
	color: var(--wrong);
	border: 1px solid #fca5a5;
}
.wm-toast__item--info {
	background: #dbeafe;
	color: var(--tendency);
	border: 1px solid #93c5fd;
}
@keyframes toast-in {
	from { opacity: 0; transform: translateX(100%); }
	to { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
	from { opacity: 1; transform: translateX(0); }
	to { opacity: 0; transform: translateX(100%); }
}

/* --- Print Styles --- */
@media print {
	.wm-nav, .wm-footer, .btn, .wm-nav__actions,
	.wm-phase-tabs, .wm-invite { display: none !important; }
	body { background: white; }
	.wm-table { font-size: 11pt; }
	.wm-table__exact,
	.wm-table__diff,
	.wm-table__tendency { display: table-cell !important; }
}