/* ==========================================================================
   app.css — "Ultimate" design system (synthesis of mockups A/C + legacy tokens)
   The single stylesheet of the app. Legacy tt-theme.css rules that are still
   referenced live in the "PORTED FROM tt-theme.css" section at the bottom.
   ========================================================================== */
/* ================= TOKENS ================= */
:root {
	--canvas: #f4f5f7;
	--pane: #ffffff;
	--pane-2: #f7f8fa;
	--border: #e6e8ec;
	--border-strong: #d3d7de;
	--ink: #16181d;
	--muted: #6b7280;
	--faint: #9aa1ac;
	--accent: #f97316;
	--accent-soft: #fff1e6;
	--accent-ink: #c2570c;
	/* Keyboard focus ring (WCAG 1.4.11, 3:1). Legacy --accent (#f97316)
	   undershoots 3:1 on light surfaces, so the focus indicator uses this
	   darker accessible orange. Dark/editorial themes override below. */
	--focus-ring: #c2410c;
	--win: #22c55e;
	--win-soft: #e8f8ee;
	--win-ink: #15803d;
	--loss: #ef4444;
	--loss-soft: #fdecec;
	--loss-ink: #b91c1c;
	--amber: #f59e0b;
	--amber-soft: #fef5e2;
	--amber-ink: #9a3412;
	--info-soft: #eff6ff;
	--info-ink: #1e40af;
	--r8: 8px;
	--r12: 12px;
	--shadow: 0 8px 24px rgba(22, 24, 29, 0.08);
	--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
html.tt-color-dark {
	--focus-ring: var(--accent);
	--canvas: #101216;
	--pane: #171a1f;
	--pane-2: #1c2027;
	--border: #272b33;
	--border-strong: #363c47;
	--ink: #e8eaee;
	--muted: #9aa1ac;
	--faint: #6b7280;
	--accent-soft: #3a2412;
	--accent-ink: #fb923c;
	--win-soft: #12281a;
	--win-ink: #4ade80;
	--loss-soft: #331416;
	--loss-ink: #f87171;
	--amber-soft: #33270e;
	--amber-ink: #fbbf24;
	--info-soft: #16233d;
	--info-ink: #93c5fd;
	--shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ---- Dark-mode leak fixes (dark audit) ----
   Scoped overrides for the ported legacy rules (see "PORTED FROM tt-theme.css"
   at the bottom) with hard-coded light values that bypass the token system. */
/* Ported dark .pill.active reuses --accent-ink, which the token system
   above redefines to a light orange -> orange text on orange pill. */
html.tt-color-dark .pill.active {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--canvas);
}
html.tt-color-dark a.pill.active {
	color: var(--canvas);
}
/* Inline TTR/K inputs (player page) fall back to native white. */
html.tt-color-dark .inline-form .inline-input {
	background: var(--canvas);
	border-color: var(--border-strong);
	color: var(--ink);
}
/* Player draft list / rows / add panel are hard-coded #fff in the ported rules. */
html.tt-color-dark .player-draft-list,
html.tt-color-dark .player-draft-row,
html.tt-color-dark .player-add-panel {
	background: var(--pane);
	border-color: var(--border-strong);
	color: var(--ink);
}
/* File inputs keep native light chrome in dark mode. */
html.tt-color-dark .form-control input[type="file"] {
	background: var(--canvas);
	border-color: var(--border-strong);
	color: var(--muted);
}
html.tt-color-dark input[type="file"]::file-selector-button {
	background: var(--pane);
	border: 1px solid var(--border-strong);
	border-radius: var(--r8);
	color: var(--ink);
	padding: 3px 10px;
	margin-right: 8px;
	font: inherit;
}
/* TTR delta colors are hard-coded light-theme hexes in the ported rules. */
html.tt-color-dark .delta.up {
	color: var(--win-ink);
}
html.tt-color-dark .delta.down {
	color: var(--loss-ink);
}
/* Live pages now run on html.tt-color-dark (applied by theme.js before paint)
   instead of a body-level class; these ported-rule overrides follow the dark
   token scope. */
html.tt-color-dark .matrix tr:nth-child(1) td.rank {
	color: var(--accent-ink);
}
html.tt-color-dark .sample.win .o {
	color: var(--win-ink);
}
html.tt-color-dark .sample.loss .o {
	color: var(--loss-ink);
}
html.tt-color-dark .mc-sum {
	background: var(--amber-soft);
	border-color: var(--amber);
}

* {
	box-sizing: border-box;
}
html,
body {
	height: 100%;
}
body {
	margin: 0;
	background: var(--canvas);
	color: var(--ink);
	font:
		14px / 1.45 -apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		"Helvetica Neue",
		Arial,
		sans-serif;
	-webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4,
p {
	margin: 0;
}
button {
	font: inherit;
	color: inherit;
	background: none;
	border: none;
	cursor: pointer;
}
input,
select,
textarea {
	font: inherit;
	color: inherit;
}
a {
	color: var(--accent-ink);
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
kbd {
	font: 600 10.5px var(--mono);
	color: var(--muted);
	background: var(--canvas);
	border: 1px solid var(--border);
	border-bottom-width: 2px;
	border-radius: 5px;
	padding: 1px 5px;
}
.num {
	font-variant-numeric: tabular-nums;
}
.micro {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--muted);
}
[hidden] {
	display: none !important;
}
:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 1px;
}

/* ================= SHARED THEME PICKER (two-axis appearance menu) ===========
   Structural rules shared by every shell (app rail, public Live, player
   cockpit). Colors, borders, and shadows are expressed through the surface
   tokens so the same rules read correctly in both Legacy and Editorial
   appearances; Editorial-only typography/radius differences live in
   editorial.css. The per-shell trigger class (.apprail-btn / .theme-toggle)
   is styled where those classes are defined; here we style the picker
   container, the popup, and the choice buttons.
   ========================================================================== */
.theme-picker {
	position: relative;
	display: inline-flex;
}
[data-theme-icon] {
	line-height: 1;
}
.theme-trigger-label {
	white-space: nowrap;
}
.theme-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 60;
	min-width: 224px;
	max-width: min(88vw, 320px);
	padding: 8px 10px 12px;
	background: var(--pane);
	border: 1px solid var(--border);
	border-radius: var(--r12);
	box-shadow: var(--shadow);
	color: var(--ink);
}
/* Explicit guard: the popup carries the [hidden] attribute until opened. The
   global [hidden] rule above already hides it; this is belt-and-braces so a
   future override can't accidentally reveal a closed menu. */
.theme-menu[hidden] {
	display: none;
}
.theme-menu fieldset {
	border: none;
	padding: 0;
	margin: 0;
}
.theme-menu fieldset + fieldset {
	margin-top: 10px;
}
.theme-menu legend {
	padding: 0;
	margin: 2px 0 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--faint);
}
.theme-choice-row {
	display: flex;
	gap: 6px;
}
.theme-choice {
	flex: 1 1 0;
	min-height: 34px;
	padding: 6px 10px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--muted);
	background: var(--pane-2);
	border: 1px solid var(--border);
	border-radius: var(--r8);
	cursor: pointer;
}
.theme-choice:hover {
	background: var(--canvas);
	color: var(--ink);
}
.theme-choice:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 1px;
}
/* Selected radio state (aria-checked="true" is synced by theme.js). Uses
   the strong --ink/--pane inversion rather than --accent so the selected
   label stays high-contrast in every appearance×color (white-on-accent would
   undershoot 4.5:1 under the Legacy accent). */
.theme-choice[aria-checked="true"] {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--pane);
}
.theme-picker [data-theme-trigger]:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 1px;
}
/* Bottom-anchored triggers (desktop rail feet, mobile menu sheets): these
   shells pin the trigger to the bottom of the viewport, so the default
   top-anchored popup drops OUTSIDE the window — the reported 2026-08-11 bug
   where the menu appeared in the bottom-left corner and theme switching was
   impossible. Open upward instead. The narrow left-edge desktop rails also
   flip the horizontal anchor so the popup grows rightward into the visible
   content area rather than past the left screen edge. */
.apprail .theme-menu,
.admin-rail .theme-menu,
.menu-sheet .theme-menu {
	top: auto;
	bottom: calc(100% + 6px);
}
.apprail .theme-menu,
.admin-rail .theme-menu {
	left: 0;
	right: auto;
}
/* In the mobile sheet the picker spans the row so its popup can take the
   full row width above the trigger. No small-screen width override exists for
   .theme-menu: absolute insets anchor to the picker, not the viewport (a past
   left/right: 8px rule squeezed the 34px public toggle's popup to ~18px), so
   width stays guarded by min-width + max-width: min(88vw, 320px) on the base
   rule. */
.menu-sheet .theme-picker {
	display: flex;
	width: 100%;
}
/* The public ``.theme-toggle`` is a fixed 34px icon button (grid-centered),
   but the shared theme_menu() always renders a visible
   ``.theme-trigger-label`` ("Darstellung") inside it. That label can never
   fit a 34px box and overflows past the viewport edge at EVERY width, clipping
   the trigger (measured: live label right=416 / player=426 at 390px; live
   right=1466 at 1440px). Visually hide the label (clipped, not
   ``display:none``) so the trigger is a tappable 34px icon at every viewport
   while the aria-hidden icon button keeps its full accessible name. Scoped to
   ``.theme-toggle`` (public Live/player) only; the app-rail (``.apprail-btn``)
   and auth (``.btn``) triggers are untouched. */
.theme-toggle .theme-trigger-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@keyframes app-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
	}
	70% {
		box-shadow: 0 0 0 7px rgba(239, 68, 68, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
	}
}

/* ================= APP SHELL ================= */
.shell {
	display: flex;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
}

/* ---- Icon rail (desktop) ---- */
.apprail {
	width: 60px;
	flex: none;
	background: var(--pane);
	border-right: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 8px 0;
	gap: 4px;
}
.apprail-btn {
	position: relative;
	width: 52px;
	padding: 6px 0 5px;
	border-radius: var(--r8);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	color: var(--muted);
	text-decoration: none;
}
.apprail-btn:hover {
	background: var(--canvas);
	color: var(--ink);
	text-decoration: none;
}
.apprail-btn svg {
	width: 19px;
	height: 19px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.apprail-btn .rl {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	text-align: center;
}
.apprail-btn.active {
	background: var(--accent-soft);
	color: var(--accent-ink);
}
.apprail-btn.active::before {
	content: "";
	position: absolute;
	left: -4px;
	top: 8px;
	bottom: 8px;
	width: 3px;
	border-radius: 2px;
	background: var(--accent);
}
.apprail-btn.disabled {
	opacity: 0.38;
	pointer-events: none;
}
.apprail .spacer {
	flex: 1;
}
.apprail-foot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.avatar {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--ink);
	color: var(--pane);
	display: grid;
	place-items: center;
	font-size: 11px;
	font-weight: 700;
}

/* ---- Main column ---- */
.maincol {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.content {
	flex: 1;
	min-height: 0;
	overflow: auto;
}
.wrap-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 22px 28px 40px;
}
.wrap-inner.fluid {
	max-width: none;
}
@media (max-width: 768px) {
	.wrap-inner {
		padding: 14px 14px 32px;
	}
}

/* ---- Context strip ---- */
.strip {
	position: relative;
	height: 44px;
	flex: none;
	background: var(--pane);
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 16px;
}
.ctx-switch {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 13.5px;
	padding: 4px 8px;
	border-radius: var(--r8);
	color: var(--ink);
	max-width: 46vw;
}
.ctx-switch:hover {
	background: var(--canvas);
	text-decoration: none;
}
.ctx-switch .dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--win);
	flex: none;
}
.ctx-switch .nm {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ctx-switch .car {
	color: var(--faint);
	font-size: 11px;
}
.ctx-meta {
	color: var(--muted);
	font-size: 12.5px;
	white-space: nowrap;
}
.strip .right {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 10px;
}
.cmdk-hint {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--faint);
	font-size: 12px;
	border: 1px solid var(--border);
	border-radius: var(--r8);
	padding: 3px 8px;
}
.cmdk-hint:hover {
	color: var(--muted);
	background: var(--canvas);
}

/* tournament switcher dropdown */
.switcher {
	position: absolute;
	top: 46px;
	left: 12px;
	z-index: 60;
	width: 320px;
	background: var(--pane);
	border: 1px solid var(--border);
	border-radius: var(--r12);
	box-shadow: var(--shadow);
	padding: 6px;
	display: none;
}
.switcher.open {
	display: block;
}
.switcher .micro {
	padding: 6px 10px 4px;
}
.sw-item {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	text-align: left;
	padding: 9px 10px;
	border-radius: var(--r8);
	color: var(--ink);
	text-decoration: none;
}
.sw-item:hover {
	background: var(--canvas);
	text-decoration: none;
}
.sw-item .nm {
	font-weight: 650;
	font-size: 13px;
}
.sw-item .mt {
	font-size: 11.5px;
	color: var(--muted);
}
.sw-item.sel {
	background: var(--accent-soft);
}
.sw-item.sel .nm {
	color: var(--accent-ink);
}
.strip-progress {
	position: absolute;
	left: 0;
	bottom: -1px;
	height: 2px;
	background: var(--accent);
	transition: width 0.3s ease;
}

/* ---- Mobile tab bar ---- */
.tabbar {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 70;
	height: 56px;
	background: var(--pane);
	border-top: 1px solid var(--border);
	padding-bottom: env(safe-area-inset-bottom);
}
.tabbar-btn {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	color: var(--muted);
	text-decoration: none;
	position: relative;
}
.tabbar-btn svg {
	width: 20px;
	height: 20px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.tabbar-btn .tl {
	font-size: 10px;
	font-weight: 600;
}
.tabbar-btn.active {
	color: var(--accent-ink);
}
.tabbar-btn.disabled {
	opacity: 0.38;
	pointer-events: none;
}
.tabbar-btn .badge {
	position: absolute;
	top: 4px;
	right: calc(50% - 20px);
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: var(--amber);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	display: grid;
	place-items: center;
}

/* ---- Mobile menu sheet ---- */
.menu-sheet {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: none;
}
.menu-sheet.open {
	display: block;
}
.menu-sheet .backdrop {
	position: absolute;
	inset: 0;
	background: rgba(5, 8, 12, 0.45);
}
.menu-sheet .sheet {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--pane);
	border-top: 1px solid var(--border);
	border-radius: 16px 16px 0 0;
	padding: 8px 12px calc(16px + env(safe-area-inset-bottom));
}
.menu-sheet .grab {
	width: 38px;
	height: 4px;
	border-radius: 2px;
	background: var(--border-strong);
	margin: 2px auto 10px;
}
.menu-item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	text-align: left;
	padding: 12px 10px;
	border-radius: var(--r8);
	color: var(--ink);
	text-decoration: none;
	font-size: 14.5px;
	font-weight: 600;
}
.menu-item:hover {
	background: var(--canvas);
	text-decoration: none;
}
.menu-item svg {
	width: 19px;
	height: 19px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
	color: var(--muted);
}
.menu-item .sub {
	margin-left: auto;
	font-size: 12px;
	color: var(--muted);
	font-weight: 500;
}

/* ================= BUTTONS ================= */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	border: 1px solid var(--border);
	background: var(--pane);
	color: var(--ink);
	border-radius: var(--r8);
	padding: 7px 14px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.btn:hover {
	background: var(--canvas);
	text-decoration: none;
}
.btn.primary {
	background: #c2410c;
	border-color: #c2410c;
	color: #fff;
}
.btn.primary:hover {
	background: #9a3412;
}
.btn.ghost {
	border-color: transparent;
	background: transparent;
	color: var(--muted);
}
.btn.ghost:hover {
	background: var(--canvas);
	color: var(--ink);
}
.btn.danger {
	background: var(--loss);
	border-color: var(--loss);
	color: #fff;
}
.btn.danger:hover {
	filter: brightness(0.95);
}
.btn.danger-outline {
	border-color: var(--loss);
	color: var(--loss-ink);
	background: var(--pane);
}
.btn.small {
	padding: 4px 10px;
	font-size: 12px;
}
.btn:disabled,
.btn.disabled {
	opacity: 0.45;
	cursor: not-allowed;
	background: var(--canvas);
}
.btn:disabled:hover,
.btn.disabled:hover {
	background: var(--canvas);
}

/* ================= ALERTS / TOASTS ================= */
.alert {
	display: block;
	border: 1px solid var(--border);
	border-left: 4px solid var(--muted);
	background: var(--pane);
	border-radius: var(--r8);
	padding: 10px 14px;
	font-size: 13px;
	color: var(--ink);
}
.alert.info {
	border-left-color: var(--info-ink);
	background: var(--info-soft);
}
.alert.success {
	border-left-color: var(--win);
	background: var(--win-soft);
}
.alert.warning {
	border-left-color: var(--amber);
	background: var(--amber-soft);
}
.alert.error {
	border-left-color: var(--loss);
	background: var(--loss-soft);
}
.flash-toast {
	position: fixed;
	top: 12px;
	right: 12px;
	z-index: 200;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 360px;
}
.flash-toast .alert {
	box-shadow: var(--shadow);
	cursor: pointer;
}

/* ================= MODAL (checkbox hack — single system) ================= */
.modal-toggle {
	position: fixed;
	opacity: 0;
	pointer-events: none;
}
.modal {
	position: fixed;
	inset: 0;
	z-index: 150;
	display: grid;
	place-items: center;
	background: rgba(5, 8, 12, 0.45);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
	padding: 16px;
}
.modal-toggle:checked + .modal {
	opacity: 1;
	pointer-events: auto;
}
.modal-box {
	background: var(--pane);
	border: 1px solid var(--border);
	border-radius: var(--r12);
	box-shadow: var(--shadow);
	width: 100%;
	max-width: 32rem;
	padding: 20px;
	max-height: calc(100vh - 48px);
	overflow: auto;
}
.modal-box.wide {
	max-width: 42rem;
}
.modal-title {
	font-size: 16px;
	font-weight: 750;
}
.modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 16px;
}

/* ================= STATUS PILLS / TAGS ================= */
.spill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--canvas);
	color: var(--muted);
	border: 1px solid var(--border);
}
.spill.win,
.spill.laufend {
	background: var(--win-soft);
	color: var(--win-ink);
	border-color: transparent;
}
.spill.loss {
	background: var(--loss-soft);
	color: var(--loss-ink);
	border-color: transparent;
}
.spill.amber,
.spill.offen,
.spill.entwurf {
	background: var(--amber-soft);
	color: var(--amber-ink);
	border-color: transparent;
}
.spill.live {
	background: var(--loss);
	color: #fff;
	border-color: transparent;
}
.spill.live .pulse {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #fff;
	animation: app-pulse 1.6s infinite;
}

/* ================= FORMS (base) ================= */
.form-control {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-bottom: 12px;
}
.form-control label {
	font-size: 12px;
	font-weight: 600;
	color: var(--muted);
}
.form-control input,
.form-control select,
.form-control textarea,
input.inp,
select.inp,
textarea.inp {
	border: 1px solid var(--border-strong);
	background: var(--pane);
	color: var(--ink);
	border-radius: var(--r8);
	padding: 7px 10px;
	font-size: 13.5px;
}
.form-control input:focus,
.form-control select:focus,
.form-control textarea:focus,
input.inp:focus,
select.inp:focus,
textarea.inp:focus {
	outline: 2px solid var(--focus-ring);
	outline-offset: 0;
	border-color: var(--accent);
}
.form-error {
	color: var(--loss-ink);
	font-size: 12.5px;
}

/* ================= ⌘K COMMAND BAR ================= */
.cmdk {
	position: fixed;
	inset: 0;
	z-index: 180;
	display: none;
}
.cmdk.open {
	display: block;
}
.cmdk .backdrop {
	position: absolute;
	inset: 0;
	background: rgba(5, 8, 12, 0.45);
}
.cmdk .panel {
	position: relative;
	margin: 12vh auto 0;
	width: min(520px, calc(100vw - 32px));
	background: var(--pane);
	border: 1px solid var(--border);
	border-radius: var(--r12);
	box-shadow: var(--shadow);
	overflow: hidden;
}
.cmdk input {
	width: 100%;
	border: none;
	border-bottom: 1px solid var(--border);
	background: var(--pane);
	padding: 14px 16px;
	font-size: 15px;
	color: var(--ink);
}
.cmdk input:focus {
	outline: none;
}
.cmdk .list {
	max-height: 320px;
	overflow: auto;
	padding: 6px;
}
.cmdk .cmd {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	text-align: left;
	padding: 9px 10px;
	border-radius: var(--r8);
	color: var(--ink);
	font-size: 13.5px;
}
.cmdk .cmd .hint {
	margin-left: auto;
	color: var(--faint);
	font-size: 11.5px;
}
.cmdk .cmd.sel,
.cmdk .cmd:hover {
	background: var(--accent-soft);
	color: var(--accent-ink);
}
.cmdk .empty {
	padding: 18px;
	text-align: center;
	color: var(--muted);
	font-size: 13px;
}

/* ================= RESPONSIVE SHELL ================= */
@media (max-width: 768px) {
	.apprail {
		display: none;
	}
	.tabbar {
		display: flex;
	}
	.content {
		padding-bottom: calc(56px + env(safe-area-inset-bottom) + 16px);
	}
	.strip {
		padding: 0 10px;
		gap: 8px;
	}
	.ctx-meta {
		display: none;
	}
	.cmdk-hint {
		display: none;
	}
}

/* ================= NO-SIDEBAR (auth / legal) ================= */
.plain-topbar {
	height: 52px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 20px;
	background: var(--pane);
	border-bottom: 1px solid var(--border);
}
.plain-topbar .brand {
	font-weight: 800;
	font-size: 15px;
	color: var(--ink);
}
.plain-topbar .brand small {
	display: block;
	font-size: 10px;
	font-weight: 600;
	color: var(--muted);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.plain-topbar .right {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 10px;
}
.plain-wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 24px 20px 60px;
}

/* brand dot used in topbar/switcher */
.brand-dot {
	color: var(--accent);
}

/* ================= USER MENU (rail foot) ================= */
.usermenu {
	position: relative;
}
.usermenu summary {
	list-style: none;
	cursor: pointer;
}
.usermenu summary::-webkit-details-marker {
	display: none;
}
.usermenu-pop {
	position: absolute;
	bottom: 38px;
	left: -4px;
	z-index: 90;
	min-width: 150px;
	background: var(--pane);
	border: 1px solid var(--border);
	border-radius: var(--r8);
	box-shadow: var(--shadow);
	padding: 8px;
}
.usermenu-pop .um-name {
	font-size: 12px;
	font-weight: 700;
	color: var(--muted);
	padding: 2px 6px 6px;
}
.usermenu-pop a {
	display: block;
	padding: 7px 6px;
	border-radius: 6px;
	color: var(--ink);
	font-size: 13px;
	font-weight: 600;
}
.usermenu-pop a:hover {
	background: var(--canvas);
	text-decoration: none;
}

/* ================= MATRIX: MASTER-DETAIL (Phase 2) ================= */
.md {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}
.md-list {
	background: var(--pane);
	border: 1px solid var(--border);
	border-radius: var(--r12);
	overflow: hidden;
}
.md-filter {
	display: flex;
	gap: 4px;
	padding: 8px;
	border-bottom: 1px solid var(--border);
}
.mdf-btn {
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 600;
	border-radius: 999px;
	color: var(--muted);
}
.mdf-btn:hover {
	background: var(--canvas);
}
.mdf-btn.on {
	background: var(--accent-soft);
	color: var(--accent-ink);
}
.md-row {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--border);
	color: var(--ink);
}
.md-row:last-child {
	border-bottom: none;
}
.md-row:hover {
	background: var(--canvas);
}
.md-row.sel {
	background: var(--accent-soft);
	box-shadow: inset 3px 0 0 var(--accent);
}
.md-row .md-t {
	font: 700 11px var(--mono);
	color: var(--muted);
	width: 26px;
	flex: none;
}
.md-row .md-names {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
	font-size: 13px;
}
.md-row .md-score {
	font-weight: 700;
	font-size: 13px;
}
.md-row.open .md-score {
	color: var(--amber-ink);
}
.md-row.done .md-score {
	color: var(--win-ink);
}
.md-detail {
	min-width: 0;
}
.md-detail-head {
	background: var(--pane);
	border: 1px solid var(--border);
	border-radius: var(--r12) var(--r12) 0 0;
	border-bottom: none;
}
.md-detail .md-entry {
	background: var(--pane);
	border: 1px solid var(--border);
	border-radius: 0 0 var(--r12) var(--r12);
	padding: 12px;
}
.rcards.md-active .rcard {
	display: none;
}
.rcards.md-active .rcard.sel {
	display: block;
}
/* Begegnungen master-detail: one pairings panel per round */
.beg-round {
	background: var(--pane);
	border: 1px solid var(--border);
	border-radius: var(--r12);
	padding: 12px;
}
.beg-round[hidden] {
	display: none;
}
/* Spieler master-detail: one player card per player */
.player-card {
	background: var(--pane);
	border: 1px solid var(--border);
	border-radius: var(--r12);
	padding: 12px;
}
.player-card[hidden] {
	display: none;
}
.player-card .pc-section {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 11px 16px;
	border-top: 1px solid var(--border);
}
.player-card .pc-label {
	font-size: 11px;
	font-weight: 700;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.player-card .pc-form {
	padding: 11px 16px;
	border-top: 1px solid var(--border);
}
.md-row .md-platz {
	font: 800 15px var(--mono);
	color: var(--muted);
	width: 26px;
	flex: none;
}
.spieler-head h2 {
	margin: 0 0 2px;
	font-size: 15px;
	font-weight: 800;
}
.md-detail .matrix-foot {
	border-top: none;
	padding: 8px 4px 0;
}
.matrix-fold {
	margin-top: 16px;
}
.matrix-fold > summary {
	cursor: pointer;
	font-size: 13px;
	font-weight: 700;
	color: var(--muted);
	padding: 8px 0;
	user-select: none;
}
.matrix-fold > summary:hover {
	color: var(--ink);
}
@media (max-width: 1100px) {
	.md {
		grid-template-columns: 1fr;
	}
}

/* ================= QUICK-SCORE (Phase 2) ================= */
.qs-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 8px;
	margin-bottom: 12px;
}
.qs-btn {
	padding: 10px 0;
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	border: 1px solid var(--border-strong);
	border-radius: var(--r8);
	background: var(--pane);
	color: var(--ink);
}
.qs-btn:hover {
	background: var(--canvas);
}
.qs-btn.sel {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}
.mcard .qs-grid {
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
.mcard .qs-btn {
	min-height: 56px;
	font-size: 17px;
}

/* ================= PHASE 3: LIST ROWS & HAIRLINE SECTIONS ================= */
/* Generic row list (dashboard tournaments, export options, review rows) */
.tlist {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.trow {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--pane);
	border: 1px solid var(--border);
	border-radius: var(--r12);
	padding: 12px 16px;
}
.trow .tr-main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.trow .tr-head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.trow .tr-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
	text-decoration: none;
}
a.tr-title:hover {
	color: var(--accent-ink);
	text-decoration: none;
}
.trow .tr-meta {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	font-size: 12px;
	color: var(--muted);
}
.trow .tr-bar {
	height: 4px;
	max-width: 240px;
	background: var(--canvas);
	border: 1px solid var(--border);
	border-radius: 4px;
	overflow: hidden;
}
.trow .tr-bar i {
	display: block;
	height: 100%;
	background: var(--accent);
}
.trow .tr-bar i.fertig {
	background: var(--win);
}
.trow .tr-bar i.entwurf {
	background: var(--faint);
}
.trow .tr-side {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}
.trow .tr-date {
	font-size: 12px;
	color: var(--muted);
	white-space: nowrap;
}
.trow .tr-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	flex-wrap: wrap;
}
.trow.disabled {
	opacity: 0.55;
}
@media (max-width: 720px) {
	.trow {
		flex-direction: column;
		align-items: stretch;
	}
	.trow .tr-side {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* Screen header (page title + subtitle) and simple vertical page flow */
.screen-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 16px;
}
.screen-head h1 {
	font-size: 19px;
	font-weight: 750;
}
.screen-head .sub {
	color: var(--muted);
	font-size: 12.5px;
}
.page-flow {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.page-flow > .screen-head {
	margin-bottom: 0;
}
.action-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* Hairline section / panel — replaces nested cards */
.hsection {
	background: var(--pane);
	border: 1px solid var(--border);
	border-radius: var(--r12);
}
.hs-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--border);
}
.hs-head .hs-ico {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	flex: none;
	display: grid;
	place-items: center;
	background: var(--accent-soft);
	color: var(--accent-ink);
}
.hs-head .hs-ico svg {
	width: 18px;
	height: 18px;
}
.hs-head h2 {
	font-size: 15px;
	font-weight: 700;
}
.hs-head p {
	font-size: 12px;
	color: var(--muted);
	margin-top: 2px;
}
.hs-head .right {
	margin-left: auto;
}
.hs-body {
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* click-TT: selectable tournament rows */
.ct-list {
	display: flex;
	flex-direction: column;
}
.ct-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 8px;
	border-bottom: 1px solid var(--border);
	border-radius: var(--r8);
	cursor: pointer;
}
.ct-row:last-child {
	border-bottom: none;
}
.ct-row:hover {
	background: var(--canvas);
}
.ct-row.sel {
	background: var(--accent-soft);
	box-shadow: inset 3px 0 0 var(--accent);
}
.ct-row .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.ct-radio {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	flex: none;
	border: 2px solid var(--border-strong);
	display: grid;
	place-items: center;
}
.ct-row.sel .ct-radio {
	border-color: var(--accent);
}
.ct-row.sel .ct-radio::after {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--accent);
}
.ct-main {
	flex: 1;
	min-width: 0;
}
.ct-title {
	font-size: 13.5px;
	font-weight: 650;
	color: var(--ink);
	overflow-wrap: anywhere;
}
.ct-meta {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 2px;
	font-size: 12px;
	color: var(--muted);
}

/* click-TT: credentials banner */
.creds-ok {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border: 1px solid var(--border);
	border-left: 3px solid var(--win);
	border-radius: var(--r8);
	background: var(--win-soft);
	color: var(--win-ink);
	font-size: 12.5px;
}
.creds-ok .re {
	margin-left: auto;
}
.status-line {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.status-check {
	width: 15px;
	height: 15px;
	border-radius: 4px;
	background: var(--win);
	position: relative;
	flex: none;
}
.status-check::after {
	content: "";
	width: 7px;
	height: 4px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	position: absolute;
	left: 3px;
	top: 4px;
	transform: rotate(-45deg);
}

/* click-TT: autofill preview */
.autofill {
	border-top: 1px dashed var(--border-strong);
	padding-top: 12px;
}
.autofill .lab {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--faint);
	margin-bottom: 10px;
}
.autofill .fields {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
.autofill .f {
	font-size: 12px;
}
.autofill .f .k {
	color: var(--muted);
	margin-bottom: 2px;
}
.autofill .f .v {
	color: var(--ink);
	font-weight: 600;
}
@media (max-width: 640px) {
	.autofill .fields {
		grid-template-columns: 1fr;
	}
}

/* click-TT: upload report */
.clicktt-result-status {
	display: flex;
	align-items: center;
	gap: 14px;
}
.row-ico {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	flex: none;
	display: grid;
	place-items: center;
	font-size: 18px;
	background: var(--win-soft);
	color: var(--win-ink);
}
.row-main {
	flex: 1;
	min-width: 0;
}
.row-title {
	font-weight: 700;
	font-size: 14.5px;
}
.row-meta {
	font-size: 12px;
	color: var(--muted);
	margin-top: 1px;
}
.report {
	border: 1px solid var(--border);
	border-radius: var(--r8);
}
.report.success {
	background: var(--win-soft);
	border-color: transparent;
}
.report.info {
	background: var(--info-soft);
	border-color: transparent;
}
.report-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 12px;
	font-size: 13px;
}
.report-label {
	font-weight: 600;
	color: var(--muted);
	flex: none;
}
.report-value {
	flex: 1;
	word-break: break-word;
}
@media (max-width: 640px) {
	.clicktt-result-status {
		align-items: flex-start;
		flex-wrap: wrap;
	}
}

/* Auth card */
.auth-card {
	max-width: 380px;
	margin: 56px auto 0;
	background: var(--pane);
	border: 1px solid var(--border);
	border-radius: var(--r12);
	padding: 26px;
	box-shadow: var(--shadow);
}
.auth-card h1 {
	margin: 0 0 16px;
	font-size: 19px;
}
.auth-card .hint {
	font-size: 12px;
	color: var(--muted);
	margin-top: 4px;
}
.auth-link {
	color: var(--accent-ink);
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
}
.auth-link:hover {
	text-decoration: underline;
}

/* QR modal content (checkbox-hack modal system) */
.qr-modal-code {
	display: grid;
	place-items: center;
	padding: 16px;
	border: 1px solid var(--border);
	border-radius: var(--r12);
	background: #fff;
}
.qr-modal-code .share-qr {
	width: min(72vw, 300px);
	max-width: 300px;
	height: auto;
}

/* ================= PHASE 4: PUBLIC LIVE (EVENT MODE) & PLAYER COCKPIT =================
   Standalone public pages (/live/{token}, /p/{token}) — no app shell.
   They run on the shell tokens (html.tt-color-dark = dark "event mode"; the theme
   toggle persists in localStorage 'tt-live-theme').
   ========================================================================== */

body.live-body {
	background: var(--canvas);
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

/* ---- Shared bits (dots, brand, empty) ---- */
.live-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex: none;
	background: var(--accent);
	box-shadow: 0 0 10px rgba(249, 115, 22, 0.55);
	animation: lv-pulse 1.6s ease-in-out infinite;
}
@keyframes lv-pulse {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.45;
		transform: scale(0.78);
	}
}
@keyframes lv-spin {
	to {
		transform: rotate(360deg);
	}
}
.live-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 800;
	font-size: 16px;
}
.live-brand small {
	display: block;
	font-size: 10px;
	font-weight: 600;
	color: var(--faint);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.live-brand-centered {
	justify-content: center;
	margin-bottom: 18px;
}
.live-empty {
	padding: 20px;
	text-align: center;
	color: var(--faint);
	font-size: 13px;
}

/* ================= PUBLIC LIVE — SCOREBOARD (Mockup B) =================
   Öffentliches Live-Dashboard (/live/{token}): Shell-Tokens,
   Dark = Default via html.tt-color-dark. View-Umschaltung Scoreboard ↔ Kreuztabelle
   per Checkbox-Hack (#viewSel), damit der SSE-Replace keinen JS-State braucht.
   ========================================================================== */
.live-page {
	min-height: 100vh;
	min-height: 100dvh;
	background: var(--canvas);
	color: var(--ink);
}

/* ---- View-Umschaltung (Checkbox-Hack, SSE-sicher) ---- */
.view-sel {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
#viewSel:checked ~ .page-wrap .view-scoreboard {
	display: none;
}
#viewSel:not(:checked) ~ .page-wrap .view-tabelle {
	display: none;
}
#viewSel:not(:checked) ~ .page-wrap .seg .seg-scoreboard,
#viewSel:checked ~ .page-wrap .seg .seg-tabelle {
	background: var(--accent-soft);
	color: var(--accent-ink);
}

/* ---- Top bar ---- */
.live-page .topbar {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 52px;
	padding: 0 20px;
	background: color-mix(in srgb, var(--pane) 88%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border);
}
.live-page .brand {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 15px;
}
.live-page .brand .dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--accent);
}
.live-page .brand .brand-dim {
	color: var(--faint);
	font-weight: 500;
}
.live-page .topbar .spacer {
	flex: 1;
}
.live-page .spill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border-radius: 99px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: var(--accent-soft);
	color: var(--accent-ink);
}
.live-page .spill .pulse,
.live-page .meta-pill .pulse,
.live-page .bigcard .state .pulse {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
	animation: pulse 1.6s infinite;
}
.live-page .bigcard .state .pulse {
	width: 8px;
	height: 8px;
	background: var(--win);
}
@keyframes pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.35;
	}
}
.live-page .theme-toggle {
	width: 34px;
	height: 34px;
	border-radius: var(--r8);
	border: 1px solid var(--border);
	display: grid;
	place-items: center;
	color: var(--muted);
	font-size: 15px;
	background: none;
	cursor: pointer;
	font: inherit;
}
.live-page .theme-toggle:hover {
	background: var(--pane-2);
	color: var(--ink);
}

/* ---- Hero: Titel + Meta + Segmented Control ---- */
.live-page .hero {
	padding: 30px 24px 8px;
	max-width: 1440px;
	margin: 0 auto;
}
.live-page .hero .kicker {
	color: var(--accent-ink);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.live-page .hero h1 {
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 4px 0 14px;
}
.live-page .hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.live-page .meta-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 13px;
	border-radius: 99px;
	font-size: 13px;
	font-weight: 600;
	background: var(--pane);
	border: 1px solid var(--border);
	color: var(--muted);
}
.live-page .meta-pill.hot {
	background: var(--accent-soft);
	border-color: transparent;
	color: var(--accent-ink);
}
.live-page .seg {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	margin-top: 16px;
	background: var(--pane);
	border: 1px solid var(--border);
	border-radius: 99px;
}
.live-page .seg .seg-label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 18px;
	border-radius: 99px;
	font-size: 14px;
	font-weight: 700;
	color: var(--faint);
	cursor: pointer;
}
.live-page .seg .seg-label:hover {
	color: var(--ink);
}

/* ---- Layout / Views ---- */
.live-page .main {
	max-width: 1440px;
	margin: 0 auto;
	padding: 10px 24px 80px;
	display: grid;
	gap: 34px;
}
.live-page .view {
	display: grid;
	gap: 34px;
}
.live-page .section-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.live-page .section-head h2 {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.01em;
}
.live-page .section-head .sub {
	font-size: 13px;
	color: var(--faint);
}
.live-page .live-empty {
	color: var(--faint);
}

/* ---- Jetzt am Tisch: dominante Live-Cards ---- */
.live-page .live-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}
.live-page .bigcard {
	position: relative;
	overflow: hidden;
	background: var(--pane);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 22px 20px 20px;
	box-shadow: var(--shadow);
}
.live-page .bigcard::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: var(--accent);
}
.live-page .bigcard .b-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
}
.live-page .bigcard .b-head .tisch {
	font-weight: 800;
	font-size: 15px;
}
.live-page .bigcard .b-head .state {
	margin-left: auto;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--win-ink);
	display: flex;
	align-items: center;
	gap: 6px;
}
.live-page .b-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 12px;
}
.live-page .b-row .p {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.live-page .b-row .p.r {
	text-align: right;
}
.live-page .b-row .p .nm {
	font-weight: 700;
	font-size: 20px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.live-page .b-row .p .q {
	font-size: 12.5px;
	color: var(--faint);
	font-family: var(--mono);
}
.live-page .b-row .p.lead .nm {
	color: var(--accent-ink);
}
.live-page .b-row .score {
	font-family: var(--mono);
	font-weight: 800;
	font-size: 46px;
	line-height: 1;
}

/* ---- Neueste Ergebnisse: Kartenraster ---- */
.live-page .res-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}
.live-page .rcard {
	position: relative;
	background: var(--pane);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 18px 20px;
	display: grid;
	gap: 10px;
}
.live-page .rcard:hover {
	border-color: var(--border-strong);
}
.live-page .rcard .r-top {
	display: flex;
	align-items: center;
	gap: 8px;
}
.live-page .rcard .r-top .rnd {
	padding: 3px 9px;
	border-radius: 7px;
	background: var(--pane-2);
	border: 1px solid var(--border);
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 700;
	color: var(--muted);
}
.live-page .rcard .r-top .ago {
	margin-left: auto;
	font-size: 12px;
	color: var(--faint);
}
.live-page .rcard .r-names {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.live-page .rcard .r-names .w {
	font-weight: 800;
	font-size: 20px;
}
.live-page .rcard .r-names .l {
	font-size: 15px;
	color: var(--muted);
}
.live-page .rcard .r-score {
	font-family: var(--mono);
	font-weight: 800;
	font-size: 38px;
	line-height: 1;
	color: var(--win-ink);
}
.live-page .rcard .tip {
	left: 50%;
}
.live-page .rcard:hover .tip {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}
/* erste Kartenreihe: Tooltip nach unten klappen */
.live-page .rcard.tip-down .tip {
	bottom: auto;
	top: calc(100% + 8px);
}
.live-page .rcard.tip-down .tip::after {
	top: auto;
	bottom: 100%;
	border-top-color: transparent;
	border-bottom-color: var(--ink);
}
html.tt-color-dark .rcard.tip-down .tip::after {
	border-bottom-color: #e8eaee;
}

/* ---- Tooltip-Basis (.tip-Pattern aus Mockup B) ---- */
.live-page .tip {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 8px);
	transform: translateX(-50%) translateY(4px);
	min-width: 190px;
	padding: 10px 12px;
	border-radius: var(--r8);
	background: var(--ink);
	color: var(--canvas);
	font-size: 12px;
	text-align: left;
	line-height: 1.5;
	opacity: 0;
	pointer-events: none;
	transition:
		opacity 0.15s,
		transform 0.15s;
	box-shadow: var(--shadow);
	z-index: 30;
}
.live-page .tip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: var(--ink);
}
.live-page .tip .t-title {
	font-weight: 700;
	margin-bottom: 3px;
}
.live-page .tip .t-sets {
	font-family: var(--mono);
	letter-spacing: 0.02em;
}
.live-page .tip .t-meta {
	color: var(--faint);
	font-size: 11px;
	margin-top: 3px;
}
html.tt-color-dark .tip {
	background: #e8eaee;
	color: #16181d;
}
html.tt-color-dark .tip::after {
	border-top-color: #e8eaee;
}
html.tt-color-dark .tip .t-meta {
	color: #6b7280;
}

/* ---- Kreuztabelle (sekundär, eigene View) ---- */
.live-page .panel {
	background: var(--pane);
	border: 1px solid var(--border);
	border-radius: var(--r12);
	overflow: hidden;
}
.live-page .panel-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	padding: 13px 16px;
	border-bottom: 1px solid var(--border);
}
.live-page .panel-head h2 {
	font-size: 16px;
	font-weight: 700;
}
.live-page .panel-head .sub {
	font-size: 13px;
	color: var(--faint);
}
.live-page .panel-foot {
	padding: 10px 16px;
	border-top: 1px solid var(--border);
	font-size: 12px;
	color: var(--faint);
}

.live-page .matrix-scroll {
	overflow: auto;
	max-height: 640px;
}
.live-page table.matrix {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	min-width: 640px;
	font-size: 14px;
}
.live-page .matrix th,
.live-page .matrix td {
	padding: 8px 12px;
	border: 0;
	border-bottom: 1px solid var(--border);
	white-space: nowrap;
	text-align: left;
	vertical-align: middle;
}
.live-page .matrix thead th {
	position: sticky;
	top: 0;
	z-index: 3;
	background: var(--pane);
	color: var(--faint);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--border-strong);
}
/* Dark-Fix: sticky cells ziehen die Panel-Farbe, nicht die Legacy-Light-Werte. */
.live-page .matrix th.s,
.live-page .matrix td.s {
	position: sticky;
	z-index: 2;
	background: var(--pane);
}
.live-page .matrix thead th.s {
	z-index: 4;
}
.live-page .matrix tbody tr:hover td {
	background: var(--pane-2);
}
.live-page .matrix tbody tr:hover td.s {
	background: var(--pane-2);
}
.live-page .matrix td.rank {
	color: var(--faint);
	font-family: var(--mono);
	font-size: 13px;
}
.live-page .matrix tbody tr.leader td.rank {
	color: var(--accent-ink);
	font-weight: 700;
}
.live-page .matrix td.num,
.live-page .matrix th.num {
	text-align: right;
	font-family: var(--mono);
	font-variant-numeric: tabular-nums;
	color: var(--muted);
}
.live-page .matrix td.num.strong {
	color: var(--ink);
	font-weight: 700;
}
.live-page .matrix td.ttr {
	color: var(--muted);
	font-size: 13px;
}
.live-page .matrix th.rhead {
	text-align: center;
	min-width: 86px;
}
.live-page .matrix th.rhead.now {
	color: var(--accent-ink);
}
.live-page .matrix th.rhead.done {
	color: var(--faint);
}
.live-page .public-player-link {
	appearance: none;
	border: 0;
	background: transparent;
	padding: 0;
	color: var(--ink);
	font: inherit;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	text-align: left;
}
.live-page .public-player-link:hover,
.live-page .public-player-link:focus-visible {
	color: var(--accent-ink);
	outline: none;
}

/* Zellen-Chips + Hover-Tooltip mit Satzpunkten */
.live-page .cell {
	position: relative;
	text-align: center;
	cursor: default;
}
.live-page .cell .chip {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	font-family: var(--mono);
	max-width: 110px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	border: 0;
}
.live-page .cell.win .chip {
	background: var(--win-soft);
	color: var(--win-ink);
}
.live-page .cell.loss .chip {
	background: var(--loss-soft);
	color: var(--loss-ink);
}
.live-page .cell.open .chip {
	background: var(--amber-soft);
	color: var(--amber-ink);
}
.live-page .cell.bye .chip {
	background: var(--pane-2);
	color: var(--faint);
}
.live-page .cell.future .chip {
	background: none;
	color: var(--faint);
}
.live-page .cell:hover .tip {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}
/* erste Zeile: Tooltip nach unten klappen */
.live-page .matrix tbody tr:first-child .cell .tip {
	bottom: auto;
	top: calc(100% + 8px);
}
.live-page .matrix tbody tr:first-child .cell .tip::after {
	top: auto;
	bottom: 100%;
	border-top-color: transparent;
	border-bottom-color: var(--ink);
}
html.tt-color-dark .matrix tbody tr:first-child .cell .tip::after {
	border-bottom-color: #e8eaee;
}

.live-page .legend {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	padding: 10px 16px;
	border-top: 1px solid var(--border);
	font-size: 12px;
	color: var(--muted);
}
.live-page .legend .sample {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.live-page .legend .sw {
	width: 10px;
	height: 10px;
	border-radius: 3px;
}
.live-page .legend .sw.win {
	background: var(--win-soft);
	outline: 1px solid var(--win-ink);
}
.live-page .legend .sw.loss {
	background: var(--loss-soft);
	outline: 1px solid var(--loss-ink);
}
.live-page .legend .sw.open {
	background: var(--amber-soft);
	outline: 1px solid var(--amber-ink);
}
.live-page .legend .sw.bye {
	background: var(--pane-2);
	outline: 1px solid var(--border-strong);
}

.live-page .footer {
	text-align: center;
	padding: 18px;
	font-size: 12px;
	color: var(--faint);
}

/* ---- Mobile: gleiches Markup, einspaltig ---- */
@media (max-width: 900px) {
	.live-page .hero {
		padding: 22px 16px 4px;
	}
	.live-page .hero h1 {
		font-size: 25px;
	}
	.live-page .main {
		padding: 8px 14px 70px;
		gap: 26px;
	}
	.live-page .view {
		gap: 26px;
	}
	/* laufende Tische zuerst, eine Spalte */
	.live-page .live-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.live-page .b-row .score {
		font-size: 44px;
	}
	.live-page .b-row .p .nm {
		font-size: 18px;
	}
	/* Ergebnisraster: 2 Spalten */
	.live-page .res-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
	.live-page .rcard .r-names .w {
		font-size: 17px;
	}
	.live-page .rcard .r-score {
		font-size: 30px;
	}
	.live-page .matrix .col-name {
		min-width: 120px;
	}
	.live-page .matrix td.ttr,
	.live-page .matrix th.col-ttr {
		display: none;
	} /* mobil: QTTR/TTR raus */
	.live-page .tip {
		display: none;
	} /* mobil: keine Hover-Tooltips */
	/* Segmented-Control bleibt oben sichtbar */
	.live-page .seg {
		position: sticky;
		top: 60px;
		z-index: 20;
	}
}
@media (max-width: 520px) {
	.live-page .res-grid {
		grid-template-columns: 1fr;
	} /* sehr schmal: 1 Spalte */
	.live-page .seg .seg-label {
		padding: 7px 13px;
		font-size: 13px;
	}
	.live-page .section-head h2 {
		font-size: 20px;
	}
	.live-page .bigcard {
		padding: 18px 16px 16px;
	}
	.live-page .b-row {
		gap: 6px;
	}
	.live-page .b-row .score {
		font-size: 36px;
	}
	.live-page .b-row .p .nm {
		font-size: 15.5px;
	}
	.live-page .b-row .p .q {
		font-size: 11.5px;
	}
}

/* Leader-Balken: erste Zeile der öffentlichen Kreuztabelle (nur public-live;
   die Admin-Matrix bekommt nie die Klasse .leader) */
.public-live-matrix tbody tr.leader .col-rank,
.public-live-matrix table.matrix tbody tr.leader td:first-child {
	box-shadow: inset 3px 0 0 var(--accent);
}

/* ================= PLAYER DRAWER (bottom sheet on mobile) ================= */
.public-player-drawer {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: none;
}
.public-player-drawer.open {
	display: block;
}
.public-player-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(5, 8, 12, 0.55);
}
.public-player-sheet {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(560px, calc(100vw - 32px));
	max-height: min(720px, calc(100vh - 32px));
	overflow: auto;
	background: var(--pane);
	color: var(--ink);
	border: 1px solid var(--border);
	border-radius: 18px;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
	padding: 20px;
}
.sheet-grab {
	display: none;
	width: 38px;
	height: 4px;
	border-radius: 2px;
	background: var(--border-strong);
	margin: 0 auto 14px;
}
.public-player-sheet-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 16px;
}
.public-player-sheet-title {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}
.public-player-sheet-head h2 {
	margin: 0;
	font-size: 19px;
	font-weight: 800;
}
.public-player-sheet-head p {
	margin: 3px 0 0;
	color: var(--muted);
	font-size: 13px;
}
.public-player-place {
	font-size: 40px;
	font-weight: 800;
	color: var(--accent);
	line-height: 1;
}
.public-player-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 18px;
}
.public-player-stats span {
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 10px 12px;
	background: var(--pane-2);
	color: var(--faint);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
}
.public-player-stats b {
	display: block;
	color: var(--ink);
	font-size: 17px;
	letter-spacing: 0;
}
.public-player-sheet h3 {
	margin: 0 0 8px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--faint);
}
.public-player-results {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.public-player-result {
	display: grid;
	grid-template-columns: 72px 1fr auto;
	gap: 10px;
	align-items: center;
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 9px 12px;
	background: var(--pane-2);
	font-size: 13px;
}
.public-player-result-round {
	color: var(--faint);
	font-size: 12px;
	font-weight: 700;
}
.public-player-result-opponent {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.public-player-result-score {
	font-weight: 800;
}
.public-player-result.win .public-player-result-score,
.public-player-result.bye .public-player-result-score {
	color: var(--win-ink);
}
.public-player-result.loss .public-player-result-score {
	color: var(--loss-ink);
}
.public-player-result.empty {
	display: block;
	color: var(--faint);
	background: none;
	border: none;
}
body.public-player-drawer-open {
	overflow: hidden;
}
@media (max-width: 768px) {
	.public-player-sheet {
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		transform: none;
		width: 100%;
		max-height: 82vh;
		max-height: 82dvh;
		border-radius: 20px 20px 0 0;
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
		padding: 10px 20px calc(20px + env(safe-area-inset-bottom));
	}
	.sheet-grab {
		display: block;
	}
	.public-player-result {
		grid-template-columns: 60px 1fr auto;
	}
}

/* ================= UNAVAILABLE PAGES ================= */
.live-unavailable {
	min-height: 100vh;
	min-height: 100dvh;
	display: grid;
	place-items: center;
	padding: 24px;
}
.live-unavailable-card {
	max-width: 460px;
	width: 100%;
	background: var(--pane);
	border: 1px solid var(--border);
	border-radius: var(--r12);
	box-shadow: var(--shadow);
	padding: 28px;
	text-align: center;
}
.live-unavailable-card h1 {
	margin: 0 0 10px;
	font-size: 22px;
	font-weight: 800;
}
.live-unavailable-card p {
	color: var(--muted);
	font-size: 14px;
	margin: 0 0 16px;
}
.live-unavailable-list {
	text-align: left;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.6;
	margin: 0 0 20px;
	padding-left: 20px;
}
.live-unavailable-foot {
	font-size: 12px;
	color: var(--faint);
	border-top: 1px solid var(--border);
	padding-top: 16px;
	margin-top: 4px;
}

/* .pc-label: einzige noch referenzierte Klasse des alten Player-Cockpits —
   wird von der Admin-Turnierseite (Runden-Historie) genutzt. */
.pc-label {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--faint);
}

/* ================= PLAYER COCKPIT v2 (/p/{token}, Mockup 2026-08-02) =================
   Mobile-first Spieler-Cockpit: Inhaltsspalte max 480px, auf Desktop zentriert
   auf gedämpftem Canvas mit Card-Rahmen. Shell-Tokens + html.tt-color-dark (Light =
   Default, Toggle speichert explizit in localStorage 'tt-live-theme').
   --p-on-accent: Kontrast-Text auf Accent-Flächen (Konvention wie .btn.primary).
   ========================================================================== */
.player-body {
	--p-on-accent: #fff;
}

/* ---- Desktop-Stage: zentrierte Spalte mit Card-Optik ---- */
.player-body .pstage {
	max-width: 480px;
	margin: 22px auto 48px;
	background: var(--pane);
	border: 1px solid var(--border);
	border-radius: 28px;
	overflow: hidden;
	box-shadow:
		0 0 0 8px color-mix(in srgb, var(--pane-2) 70%, transparent),
		0 30px 70px rgba(22, 24, 29, 0.16);
}
html.tt-color-dark .player-body .pstage {
	box-shadow:
		0 0 0 8px rgba(255, 255, 255, 0.03),
		0 30px 70px rgba(0, 0, 0, 0.55);
}

/* ---- Kompakter Header ---- */
.player-body .phead {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 11px 16px;
	background: color-mix(in srgb, var(--pane) 88%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border);
}
.player-body .phead .brand {
	display: flex;
	align-items: center;
	gap: 7px;
	font-weight: 700;
	font-size: 14px;
	min-width: 0;
}
.player-body .phead .brand .dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--accent);
	flex: none;
}
.player-body .phead .brand .tname {
	font-weight: 600;
	font-size: 12.5px;
	color: var(--muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.player-body .phead .spacer {
	flex: 1;
}
.player-body .phead .spill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	padding: 3px 10px;
	border-radius: 99px;
	border: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: var(--accent-soft);
	color: var(--accent-ink);
}
.player-body .phead .spill .pulse,
.player-body .meta-pill .pulse,
.player-body .badge .pulse {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
	animation: pulse 1.6s infinite;
}
.player-body .badge .pulse {
	width: 6px;
	height: 6px;
	background: var(--amber);
}
.player-body .theme-toggle {
	width: 34px;
	height: 34px;
	border-radius: var(--r8);
	flex: none;
	border: 1px solid var(--border);
	display: grid;
	place-items: center;
	color: var(--muted);
	font-size: 15px;
}
.player-body .theme-toggle:hover {
	background: var(--pane-2);
	color: var(--ink);
}

/* ---- Gruß-Strip ---- */
.player-body .greet {
	padding: 16px 16px 14px;
	border-bottom: 1px solid var(--border);
}
.player-body .greet .hi {
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -0.02em;
}
.player-body .greet .stats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 9px;
}
.player-body .meta-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 99px;
	font-size: 12px;
	font-weight: 600;
	background: var(--pane-2);
	border: 1px solid var(--border);
	color: var(--muted);
}
.player-body .meta-pill.hot {
	background: var(--accent-soft);
	border-color: transparent;
	color: var(--accent-ink);
}
.player-body .meta-pill .b {
	color: var(--ink);
	font-family: var(--mono);
	font-weight: 700;
}
.player-body .meta-pill.hot .b {
	color: var(--accent-ink);
}
.player-body .meta-pill .b.up {
	color: var(--win-ink);
}
.player-body .meta-pill .b.down {
	color: var(--loss-ink);
}

/* ---- Panel-Basis ---- */
.player-body .panel {
	border-bottom: 1px solid var(--border);
}
.player-body .panel.panel-last {
	border-bottom: 0;
}
.player-body .panel-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 13px 16px 0;
}
.player-body .panel-head h2 {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
}
.player-body .panel-head .sub {
	font-size: 12px;
	color: var(--faint);
}
.player-body .pbody {
	padding: 12px 16px 16px;
	font-size: 13px;
	color: var(--muted);
}
.player-body .pbody p {
	margin: 0;
}
.player-body .pbody .form-error {
	margin: 0 0 8px;
}
.player-body .live-empty {
	padding: 18px 16px;
	text-align: center;
	color: var(--faint);
	font-size: 13px;
}

/* ---- Dein Spiel: Hero-Card ---- */
.player-body .hero-card {
	margin: 12px 16px 16px;
	border: 1px solid var(--border-strong);
	border-radius: var(--r12);
	padding: 14px 14px 12px;
	background: var(--pane-2);
}
.player-body .hero-card .hc-top {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}
.player-body .hero-card .hc-top .tbl {
	font-weight: 700;
	font-size: 12px;
}
.player-body .badge {
	margin-left: auto;
	padding: 3px 10px;
	border-radius: 99px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--amber-soft);
	color: var(--amber-ink);
}
.player-body .versus {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 10px;
}
.player-body .versus .p {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}
.player-body .versus .p.r {
	text-align: right;
}
.player-body .versus .p .nm {
	font-weight: 700;
	font-size: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.player-body .versus .p .q {
	font-size: 11px;
	color: var(--faint);
	font-family: var(--mono);
}
.player-body .versus .p.me .nm {
	color: var(--accent-ink);
}
.player-body .versus .vs {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--pane);
	border: 1px solid var(--border);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.05em;
	color: var(--faint);
}
.player-body .hero-card .hc-meta {
	margin-top: 11px;
	padding-top: 9px;
	border-top: 1px dashed var(--border);
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: var(--muted);
}
.player-body .hero-card.hero-idle {
	text-align: center;
}
.player-body .hero-card.hero-idle .idle {
	margin: 0;
	font-size: 13px;
	color: var(--muted);
}

/* ---- Ergebnis-Eingabe ---- */
.player-body .entry {
	padding: 12px 16px 16px;
}
.player-body .entry .form-error {
	margin: 0 0 10px;
}
.player-body .quick {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}
.player-body .quick .pq {
	padding: 13px 0;
	border-radius: var(--r8);
	border: 1px solid var(--border-strong);
	background: var(--pane);
	font-family: var(--mono);
	font-weight: 800;
	font-size: 16px;
	letter-spacing: 0.03em;
	color: var(--ink);
}
.player-body .quick .pq:hover {
	background: var(--pane-2);
}
.player-body .quick .pq.sel {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--p-on-accent);
	box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent);
}
.player-body .pexp {
	margin-top: 10px;
}
.player-body .pexp .px-toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 10px 0;
	border-radius: var(--r8);
	border: 1px dashed var(--border-strong);
	color: var(--muted);
	font-size: 12.5px;
	font-weight: 600;
}
.player-body .pexp .px-toggle:hover {
	color: var(--ink);
	background: var(--pane-2);
}
.player-body .pexp .px-toggle .chev {
	font-size: 11px;
	transition: transform 0.15s;
}
.player-body .pexp.open .px-toggle .chev {
	transform: rotate(180deg);
}
.player-body .pexp .px-body {
	display: none;
	margin-top: 12px;
}
.player-body .pexp.open .px-body {
	display: block;
}
.player-body .px-label {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--faint);
	letter-spacing: 0.04em;
	margin-bottom: 6px;
}
/* GROSSER, sauberer Satz-Input: solide Fläche, klare Kontur, Luft im Feld */
.player-body .px-input {
	height: 56px;
	width: 100%;
	padding: 0 14px;
	background: var(--pane);
	border: 1px solid var(--border-strong);
	border-radius: var(--r8);
	color: var(--ink);
	font-family: var(--mono);
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.player-body .px-input::placeholder {
	color: var(--faint);
	font-size: 14px;
}
.player-body .px-input:focus {
	outline: 2px solid var(--focus-ring);
	outline-offset: 1px;
	border-color: var(--accent);
}
.player-body .phint {
	margin: 9px 0 0;
	font-size: 11px;
	color: var(--faint);
	text-align: center;
}
.player-body .psubmit {
	width: 100%;
	margin-top: 14px;
	padding: 15px 0;
	border-radius: var(--r12);
	background: var(--accent);
	color: var(--p-on-accent);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.02em;
	box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent);
}
.player-body .psubmit:hover {
	filter: brightness(1.05);
}
.player-body .psubmit.danger {
	background: var(--loss-soft);
	color: var(--loss-ink);
	border: 1px solid var(--loss);
	box-shadow: none;
}
.player-body .pactions {
	display: flex;
	gap: 8px;
	margin-top: 14px;
}
.player-body .pactions form {
	flex: 1;
	display: flex;
}
.player-body .pactions .psubmit {
	margin-top: 0;
}
.player-body .pwaiting {
	display: flex;
	align-items: center;
	gap: 12px;
}
.player-body .pwaiting p {
	margin: 0;
}
.player-body .pspinner {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 3px solid var(--amber-soft);
	border-top-color: var(--amber);
	animation: lv-spin 0.9s linear infinite;
}

/* ---- Deine Ergebnisse ---- */
.player-body .presults {
	display: grid;
}
.player-body .pritem {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
	padding: 11px 16px;
	border-top: 1px solid var(--border);
}
.player-body .pritem .prnd {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	display: grid;
	place-items: center;
	background: var(--pane-2);
	border: 1px solid var(--border);
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 700;
	color: var(--muted);
}
.player-body .pritem .pinfo {
	min-width: 0;
	font-size: 13px;
}
.player-body .pritem .pinfo .popp {
	font-weight: 650;
}
.player-body .pritem .pinfo .psets {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--muted);
	margin-top: 1px;
}
.player-body .chip {
	display: inline-block;
	padding: 4px 9px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 700;
	font-family: var(--mono);
	background: var(--pane-2);
	color: var(--muted);
}
.player-body .chip.win {
	background: var(--win-soft);
	color: var(--win-ink);
}
.player-body .chip.loss {
	background: var(--loss-soft);
	color: var(--loss-ink);
}

/* ---- Deine Umgebung (Mini-Rangliste) ---- */
.player-body .pranklist {
	display: grid;
}
.player-body .prrow {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr) auto auto;
	gap: 10px;
	align-items: center;
	padding: 10px 16px;
	border-top: 1px solid var(--border);
	font-size: 13px;
}
.player-body .prrow .rk {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--faint);
}
.player-body .prrow .nm {
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.player-body .prrow .q {
	font-size: 11px;
	color: var(--faint);
	font-family: var(--mono);
}
.player-body .prrow .rec {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--muted);
}
.player-body .prrow.me {
	background: var(--accent-soft);
}
.player-body .prrow.me .rk,
.player-body .prrow.me .nm {
	color: var(--accent-ink);
	font-weight: 800;
}
.player-body .prrow.me .rec {
	color: var(--accent-ink);
	font-weight: 700;
}

/* ---- Footer ---- */
.player-body .foot {
	text-align: center;
	padding: 14px 16px 18px;
	font-size: 11px;
	color: var(--faint);
}
.player-body .foot .foot-link {
	display: inline-block;
	margin-left: 6px;
	color: var(--faint);
	text-decoration: underline;
}
.player-body .foot .foot-link:hover {
	color: var(--muted);
}

/* ---- Mobile (≤900px): Vollbild, kein Frame ---- */
@media (max-width: 900px) {
	.player-body .pstage {
		max-width: none;
		margin: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		min-height: 100vh;
	}
}

/* ---------------- Mobile: round stepper + entry hints ---------------- */
@media (max-width: 768px) {
	.m-appbar .m-stepper {
		margin-left: auto;
		display: flex;
		align-items: center;
		gap: 4px;
		max-width: 48vw;
		overflow-x: auto;
		padding: 2px;
		scrollbar-width: none;
	}
	.m-appbar .m-stepper::-webkit-scrollbar {
		display: none;
	}
	.m-stepper .pill {
		flex: none;
		padding: 3px 9px;
		font-size: 11px;
		font-weight: 700;
		line-height: 1.4;
	}
	.mcard .mc-next-open {
		margin-top: 6px;
		font-size: 11px;
		color: var(--muted);
	}
}

/* ==========================================================================
   PORTED FROM tt-theme.css (Task 9 — tt-theme.css eliminated)
   Legacy rules still referenced by the app and the QR print page.
   Tokens are namespaced as --lt-* so these rules resolve exactly as they did
   under tt-theme.css, independent of the app.css token system above.
   ========================================================================== */

/* The standalone QR print page historically rendered with tt-theme.css only,
   which has no reset: no border-box, no body font, no margin/padding resets.
   Scope that environment here so the page renders exactly as before now that
   it loads the full app.css.
   NOTE: .landing-body was removed from this shim — the landing page was
   redesigned ("Vereinsheft", see the landing block further down) and its new
   CSS is written on a clean reset basis instead. */
.qr-print-body {
	font: initial;
	height: auto; /* undo html,body{height:100%}: print layout is sized by the body box */
	-webkit-font-smoothing: auto;
}
html:has(> body.qr-print-body) {
	height: auto; /* the propagated body background is sized by the html box */
}
.qr-print-body h1,
.qr-print-body h2,
.qr-print-body h3,
.qr-print-body h4,
.qr-print-body p {
	margin: revert;
}
.qr-print-body,
.qr-print-body *,
.qr-print-body *::before,
.qr-print-body *::after {
	box-sizing: content-box;
}

:root {
	--lt-bg: #f4f5f7;
	--lt-surface: #ffffff;
	--lt-ink: #16181d;
	--lt-muted: #6b7280;
	--lt-faint: #9aa1ab;
	--lt-line: #e6e8ec;
	--lt-line-strong: #d3d7de;
	--lt-accent: #f97316;
	--lt-accent-ink: #fff;
	--lt-accent-soft: #fff1e6;
	--lt-accent-text: #b4530a;
	--lt-win: #22c55e;
	--lt-win-bg: #f0fdf4;
	--lt-loss: #ef4444;
	--lt-loss-bg: #fef2f2;
	--lt-open-bg: #fff7ed;
	--lt-open-border: #fed7aa;
	--lt-open-text: #9a3412;
	--lt-open-text-strong: #c2410c;
	--lt-future: #fafbfc;
	--lt-bye-bg: #fef3c7;
	--lt-bye: #92400e;
	--lt-info-bg: #eff6ff;
	--lt-info: #1e40af;
	--lt-success-bg: #dcfce7;
	--lt-success: #15803d;
	--lt-warning-bg: #fef3c7;
	--lt-warning: #92400e;
	--lt-error-bg: #fee2e2;
	--lt-error: #b91c1c;
	--lt-shadow:
		0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.04);
	--lt-shadow-md: 0 4px 14px rgba(16, 24, 40, 0.08);
	--lt-shadow-lg:
		0 12px 32px rgba(16, 24, 40, 0.18), 0 4px 12px rgba(16, 24, 40, 0.08);
	--lt-radius: 12px;
	--lt-radius-sm: 10px;
}

/* ===== Dark theme ===== */

html.tt-color-dark {
	--lt-bg: #0b0d12;
	--lt-surface: #14171f;
	--lt-ink: #f2f4f8;
	--lt-muted: #9aa2b2;
	--lt-faint: #6b7285;
	--lt-line: #242936;
	--lt-line-strong: #303544;
	--lt-accent: #fb923c;
	--lt-accent-ink: #10121a;
	--lt-accent-soft: rgba(251, 146, 60, 0.15);
	--lt-accent-text: #fdba74;
	--lt-win: #4ade80;
	--lt-win-bg: rgba(74, 222, 128, 0.12);
	--lt-loss: #f87171;
	--lt-loss-bg: rgba(248, 113, 113, 0.12);
	--lt-open-bg: rgba(251, 146, 60, 0.12);
	--lt-open-border: rgba(251, 146, 60, 0.45);
	--lt-open-text: #fdba74;
	--lt-open-text-strong: #ffedd5;
	--lt-future: rgba(255, 255, 255, 0.03);
	--lt-bye-bg: rgba(250, 204, 21, 0.12);
	--lt-bye: #facc15;
	--lt-info-bg: rgba(96, 165, 250, 0.12);
	--lt-info: #60a5fa;
	--lt-success-bg: rgba(74, 222, 128, 0.12);
	--lt-success: #4ade80;
	--lt-warning-bg: rgba(250, 204, 21, 0.12);
	--lt-warning: #facc15;
	--lt-error-bg: rgba(248, 113, 113, 0.12);
	--lt-error: #f87171;
	--lt-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25);
	--lt-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.45);
	--lt-shadow-lg:
		0 12px 32px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);
}

html.tt-color-dark .matrix thead th {
	background: #1a1e28;
}

html.tt-color-dark .matrix th.s,
html.tt-color-dark .matrix td.s {
	background: #14171f;
}

html.tt-color-dark .matrix tbody tr:hover td.s {
	background: #1c2030;
}

html.tt-color-dark .matrix tbody tr:hover td {
	background: #1a1e28;
}

html.tt-color-dark .pbar {
	background: #262b38;
}

html.tt-color-dark .m-tab {
	background: #1a1e28;
}

html.tt-color-dark .m-tab.on {
	background: var(--lt-ink);
	color: #10121a;
}

html.tt-color-dark .m-tab.on .badge {
	background: var(--lt-accent);
	color: var(--lt-accent-ink);
}

html.tt-color-dark .rrow {
	background: var(--lt-surface);
}

html.tt-color-dark .rrow.r1 {
	border-color: var(--lt-accent);
}

html.tt-color-dark .rr-rank {
	background: #242936;
}

html.tt-color-dark .rrow.r1 .rr-rank {
	background: var(--lt-accent);
	color: var(--lt-accent-ink);
}

html.tt-color-dark input.big,
html.tt-color-dark .inp {
	background: #0f1218;
	border-color: var(--lt-line-strong);
	color: var(--lt-ink);
}

html.tt-color-dark .inp:focus {
	outline-color: var(--lt-accent);
	border-color: var(--lt-accent);
}

html.tt-color-dark .form-control input[type="text"],
html.tt-color-dark .form-control input[type="email"],
html.tt-color-dark .form-control input[type="password"],
html.tt-color-dark .form-control input[type="date"],
html.tt-color-dark .form-control input[type="search"],
html.tt-color-dark .form-control input[type="number"],
html.tt-color-dark .form-control textarea,
html.tt-color-dark .form-control select {
	background: #0f1218;
	border-color: var(--lt-line-strong);
	color: var(--lt-ink);
}

html.tt-color-dark .form-control input:focus,
html.tt-color-dark .form-control textarea:focus,
html.tt-color-dark .form-control select:focus {
	outline-color: var(--lt-accent);
	border-color: var(--lt-accent);
}

html.tt-color-dark .filter-bar input[type="search"],
html.tt-color-dark .filter-bar input[type="date"],
html.tt-color-dark .search input {
	background: #0f1218;
	border-color: var(--lt-line-strong);
	color: var(--lt-ink);
}

html.tt-color-dark .summary {
	background: rgba(251, 146, 60, 0.1);
	border-color: rgba(251, 146, 60, 0.3);
}

html.tt-color-dark .btn:hover {
	background: #242936;
	color: var(--lt-ink);
}

html.tt-color-dark .btn.ghost:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--lt-ink);
}

html.tt-color-dark .btn.danger-outline:hover {
	background: rgba(248, 113, 113, 0.15);
}

/* ---------------- Topbar (dashboard / tournament) ---------------- */

.topbar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}

.topbar h1 {
	margin: 0;
	font-size: 21px;
	letter-spacing: -0.02em;
}

.topbar .sub {
	color: var(--lt-muted);
	font-size: 13px;
	margin-top: 3px;
}

.topbar .sub b {
	color: var(--lt-ink);
	font-weight: 600;
}

.topbar .breadcrumb {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--lt-muted);
	margin-top: 2px;
}

.topbar .breadcrumb a {
	color: var(--lt-muted);
	text-decoration: none;
}

.topbar .breadcrumb a:hover {
	color: var(--lt-accent-text);
	text-decoration: underline;
}

.topbar .breadcrumb .bc-sep {
	color: var(--lt-faint);
}

.actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* ---------------- Buttons ---------------- */

.btn.danger-outline:hover {
	background: var(--lt-error-bg);
}

.btn[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
	box-shadow: none;
}

.btn[disabled]:hover {
	background: var(--lt-surface);
	filter: none;
}

.round-actions {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.round-action.btn.small {
	padding: 4px 10px;
	font-size: 11px;
	line-height: 1.2;
	border-radius: 7px;
}

.matrix-card.round-card .matrix-scroll {
	overflow: visible;
}

.round-card .matrix {
	table-layout: fixed;
}

.round-card .matrix td {
	height: 36px;
}

.round-card .matrix th:nth-child(1),
.round-card .matrix td:nth-child(1) {
	width: 52px;
}

.round-card .matrix th:nth-child(2),
.round-card .matrix td:nth-child(2) {
	width: 35%;
	min-width: 120px;
}

.round-card .matrix th:nth-child(3),
.round-card .matrix td:nth-child(3) {
	width: 35%;
	min-width: 120px;
}

.round-card .matrix th:nth-child(4),
.round-card .matrix td:nth-child(4) {
	width: 72px;
}

.round-card .matrix th:nth-child(5),
.round-card .matrix td:nth-child(5) {
	width: auto;
	white-space: nowrap;
}

.progress {
	font-size: 12px;
	color: var(--lt-muted);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.pbar {
	width: 120px;
	height: 6px;
	background: #e9ebef;
	border-radius: 6px;
	overflow: hidden;
}

.pbar i {
	display: block;
	height: 100%;
	background: var(--lt-accent);
}

/* ---------------- Dashboard ---------------- */

.bar-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.bar-row h2 {
	margin: 0;
	font-size: 16px;
}

.search {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--lt-line-strong);
	background: var(--lt-surface);
	border-radius: 9px;
	padding: 7px 11px;
	min-width: 220px;
	max-width: 320px;
}

.search input {
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 13px;
	outline: none;
	width: 100%;
}

.search .ic {
	color: var(--lt-faint);
	font-size: 15px;
}

.status.laufend {
	background: var(--lt-accent-soft);
	color: var(--lt-accent-text);
}

.status.fertig {
	background: var(--lt-win-bg);
	color: var(--lt-win);
}

.status.entwurf {
	background: #eef0f3;
	color: #4b5563;
}

/* ---------------- Modals ---------------- */

.result-modal-head {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 16px;
}

.result-modal-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.result-modal-title-row .modal-title {
	margin-bottom: 0;
}

.result-modal-mode-row {
	display: flex;
	justify-content: flex-start;
}

.modal-error {
	color: #b91c1c;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 13px;
	margin-bottom: 12px;
}

.validation-list {
	list-style: disc;
	padding-left: 1.2em;
	font-size: 13px;
	color: var(--lt-ink);
}

.validation-list li {
	margin-bottom: 6px;
}

html.tt-color-dark .validation-list {
	color: var(--lt-ink);
}

/* ---------------- Flash / Error ---------------- */

.flash-toast .alert.info {
	border-left: 4px solid var(--lt-info);
}

.flash-toast .alert.success {
	border-left: 4px solid var(--lt-success);
}

.flash-toast .alert.warning {
	border-left: 4px solid var(--lt-warning);
}

.flash-toast .alert.error {
	border-left: 4px solid var(--lt-error);
	color: var(--lt-error);
}

/* ---------------- Round pills ---------------- */

.roundnav {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}

.pill {
	border: 1px solid var(--lt-line);
	background: var(--lt-surface);
	border-radius: 999px;
	padding: 6px 13px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--lt-muted);
	display: inline-flex;
	gap: 6px;
	align-items: center;
	text-decoration: none;
}

.pill.done {
	color: var(--lt-win);
}

.pill.done .mk {
	color: var(--lt-win);
}

.pill.active {
	background: var(--lt-ink);
	border-color: var(--lt-ink);
	color: #fff;
}

.pill.locked {
	opacity: 0.55;
	cursor: not-allowed;
}

.roundnav .sep {
	color: var(--lt-faint);
	margin: 0 6px;
}

/* ---------------- Matrix ---------------- */

.matrix-card {
	background: var(--lt-surface);
	border: 1px solid var(--lt-line);
	border-radius: var(--lt-radius);
	box-shadow: var(--lt-shadow);
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.matrix-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 13px 16px;
	border-bottom: 1px solid var(--lt-line);
	gap: 16px;
	flex-wrap: wrap;
}

.matrix-head h2 {
	margin: 0;
	font-size: 14px;
}

.matrix-scroll {
	overflow: auto;
}

table.matrix {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	font-size: 13px;
}

.matrix th,
.matrix td {
	padding: 0 11px;
	height: 42px;
	border-bottom: 1px solid var(--lt-line);
	border-right: 1px solid var(--lt-line);
	white-space: nowrap;
}

.matrix thead th {
	position: sticky;
	top: 0;
	background: #fbfbfd;
	z-index: 3;
	font-size: 11px;
	font-weight: 600;
	color: var(--lt-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	height: 34px;
}

.matrix th.rhead {
	text-align: center;
	font-size: 12px;
}

.matrix th.rhead.done {
	color: var(--lt-ink);
}

.matrix th.rhead.now {
	color: var(--lt-accent);
}

.matrix tbody tr:hover td {
	background: #fafbff;
}

.matrix td.rank {
	font-weight: 700;
	color: var(--lt-muted);
	text-align: center;
	width: 46px;
}

.matrix tr:nth-child(1) td.rank {
	color: #b4530a;
}

.matrix td.name {
	font-weight: 600;
	width: 188px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.matrix td.ttr {
	color: var(--lt-muted);
	text-align: right;
	width: 56px;
}

.matrix th.s,
.matrix td.s {
	position: sticky;
	z-index: 2;
	background: #fbfbfd;
}

.matrix td.s {
	background: var(--lt-surface);
}

.matrix tbody tr:hover td.s {
	background: #f4f6fb;
}

.col-rank {
	left: 0;
}

.col-name {
	left: 46px;
}

.col-ttr {
	left: 234px;
}

.matrix thead th.col-rank,
.matrix thead th.col-name,
.matrix thead th.col-ttr {
	z-index: 4;
}

.matrix th:last-child,
.matrix td:last-child {
	border-right: 0;
}

.matrix td.num {
	text-align: center;
	color: var(--lt-muted);
	width: 48px;
}

.matrix td.num.strong {
	color: var(--lt-ink);
	font-weight: 700;
}

.cell {
	text-align: center;
	width: 108px;
	cursor: pointer;
	padding: 4px 6px;
}

.cell .chip {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	border-radius: 7px;
	padding: 3px 9px;
	justify-content: center;
	line-height: 1.1;
}

.cell .opp {
	font-size: 12px;
	font-weight: 600;
	max-width: 74px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cell .sets {
	font-size: 13px;
	font-weight: 800;
}

#matrix .matrix-head {
	padding: 10px 14px;
}

#matrix table.matrix {
	font-size: 12.5px;
}

#matrix .matrix th,
#matrix .matrix td {
	padding: 0 8px;
	height: 32px;
}

#matrix .matrix thead th {
	font-size: 10px;
	height: 28px;
}

#matrix .cell {
	width: 94px;
	padding: 2px 4px;
}

#matrix .cell .chip {
	padding: 2px 7px;
	gap: 5px;
}

#matrix .cell .opp {
	font-size: 11px;
	max-width: 62px;
}

#matrix .cell .sets {
	font-size: 12px;
}

.cell.win .chip {
	background: var(--lt-win-bg);
}

.cell.win .opp {
	color: var(--lt-win);
}

.cell.win .sets {
	color: var(--lt-win);
}

.cell.loss .chip {
	background: var(--lt-loss-bg);
}

.cell.loss .opp {
	color: var(--lt-loss);
}

.cell.loss .sets {
	color: var(--lt-loss);
}

.cell.open .chip {
	background: var(--lt-open-bg);
	border: 1px dotted var(--lt-open-border);
}

.cell.open .opp {
	color: var(--lt-open-text);
}

.cell.open .sets {
	color: var(--lt-open-text-strong);
}

.cell.future {
	background: var(--lt-future);
	cursor: default;
}

.cell.bye {
	cursor: default;
}

.cell.bye .chip {
	background: var(--lt-bye-bg);
	border: 1px dashed #f59e0b;
}

.cell.bye .opp {
	color: var(--lt-bye);
}

.cell.editing .chip {
	box-shadow: inset 0 0 0 1px var(--lt-accent-soft);
}

.cell-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.legend {
	display: flex;
	gap: 14px;
	font-size: 11.5px;
	color: var(--lt-muted);
	flex-wrap: wrap;
	align-items: center;
}

.legend > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.sample {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	border-radius: 6px;
	padding: 2px 7px;
	min-width: 34px;
	justify-content: center;
}

.sample .o {
	font-size: 11px;
	font-weight: 600;
}

.sample .s {
	font-size: 12px;
	font-weight: 800;
}

.sample.win {
	background: var(--lt-win-bg);
}

.sample.win .o {
	color: #3f8f5b;
}

.sample.win .s {
	color: var(--lt-win);
}

.sample.loss {
	background: var(--lt-loss-bg);
}

.sample.loss .o {
	color: #b5565b;
}

.sample.loss .s {
	color: var(--lt-loss);
}

.sample.open {
	background: var(--lt-open-bg);
	border: 1px dashed var(--lt-open-border);
}

.sample.open .o {
	color: var(--lt-open-text);
}

.sample.open .s {
	color: var(--lt-open-text-strong);
}

.sample.bye {
	background: var(--lt-bye-bg);
	border: 1px dashed #f59e0b;
}

.sample.bye .o {
	color: var(--lt-bye);
}

.sample.fut {
	background: var(--lt-future);
	border: 1px dashed var(--lt-line-strong);
	min-width: 34px;
	height: 16px;
}

.matrix-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 11px 16px;
	border-top: 1px solid var(--lt-line);
	font-size: 12px;
	color: var(--lt-muted);
	gap: 12px;
	flex-wrap: wrap;
}

/* ---------------- Rail ---------------- */

.rail-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 11px 13px;
	border-bottom: 1px solid var(--lt-line);
	flex-shrink: 0;
}

.rh-t {
	font-weight: 700;
	font-size: 14px;
}

.rh-s {
	font-size: 11.5px;
	color: var(--lt-muted);
	margin-top: 1px;
}

.rcard {
	background: var(--pane);
	border: 1px solid var(--border);
	border-radius: var(--r12);
	overflow: hidden;
}

.rcard .c-top {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	border-bottom: 1px solid var(--border);
	font-size: 11px;
	color: var(--muted);
}

.rcard .c-body {
	padding: 16px 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.qs-label {
	margin-bottom: 8px;
}

.rcard .qs-grid {
	margin-bottom: 0;
}

.rcard.done .c-top {
	background: var(--win-soft);
}

.c-top .tisch {
	font-weight: 700;
	color: var(--ink);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 10.5px;
}

.c-top .ok {
	margin-left: auto;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--win-soft);
	color: var(--win-ink);
}

.rcard.done .c-top .ok {
	background: var(--pane);
}

.c-top .now {
	margin-left: auto;
	color: var(--accent-ink);
	font-weight: 700;
}

.c-top .now2 {
	margin-left: auto;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--amber-soft);
	color: var(--amber-ink);
}

.c-top .x {
	cursor: pointer;
	color: var(--lt-faint);
	font-size: 15px;
	line-height: 1;
	margin-left: 4px;
}

.c-line .res {
	font-weight: 800;
	margin: 0 6px;
	color: var(--lt-ink);
	font-size: 14px;
}

.rcard .versus {
	margin: 0;
}

.versus {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 5px;
}

.side {
	text-align: center;
}

.side .nm {
	font-weight: 700;
	font-size: 12px;
	line-height: 1.3;
	min-height: 2.6em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.side .rt {
	font-size: 10px;
	color: var(--lt-muted);
}

.vs {
	color: var(--lt-faint);
	font-weight: 700;
	font-size: 11px;
}

.side.a .nm {
	color: var(--lt-ink);
}

.side.b .nm {
	color: var(--lt-accent);
}

.sets-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 11px;
}

.sets-table th,
.sets-table td {
	text-align: center;
	padding: 4px 2px;
	border-bottom: 1px solid var(--lt-line);
}

.sets-table th {
	font-size: 9px;
	text-transform: uppercase;
	color: var(--lt-muted);
	font-weight: 600;
}

.sets-table .pn {
	font-weight: 600;
	color: var(--lt-muted);
	text-align: left;
	padding-left: 2px;
}

.inp {
	width: 38px;
	text-align: center;
	border: 1px solid var(--lt-line-strong);
	border-radius: 5px;
	height: 24px;
	font: inherit;
	font-size: 11px;
	font-weight: 600;
	color: var(--lt-ink);
	background: #fff;
}

.inp:focus {
	outline: 2px solid var(--lt-accent);
	border-color: var(--lt-accent);
}

/* Set & game score inputs: big enough to read two digits; spinners hidden */
.sets-table .inp {
	width: 64px;
	height: 36px;
	font-size: 14px;
	appearance: textfield;
	-moz-appearance: textfield;
}

.sets-table .inp::-webkit-outer-spin-button,
.sets-table .inp::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.quick-games .inp {
	width: 56px;
	height: 36px;
	font-size: 13px;
}

.inp.big {
	width: 56px;
	height: 44px;
	font-size: 16px;
}

.summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.summary .big {
	order: 2;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.summary .big .a,
.summary .big .b {
	color: var(--lt-muted);
}

.summary .tag {
	order: 1;
	font-size: 13px;
	color: var(--muted);
	font-weight: 600;
}

.rail-foot {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	border-top: 1px solid var(--lt-line);
	font-size: 11px;
	color: var(--lt-muted);
	line-height: 1.4;
	flex-shrink: 0;
}

.rail-head-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.input-mode-seg {
	display: inline-flex;
	background: #f0f1f4;
	border-radius: 7px;
	padding: 2px;
}

.input-mode-seg button {
	border: 0;
	background: transparent;
	font-size: 11px;
	padding: 3px 8px;
	border-radius: 5px;
	cursor: pointer;
	color: var(--lt-muted);
}

.input-mode-seg button.on {
	background: #fff;
	color: var(--lt-ink);
	box-shadow: var(--lt-shadow);
}

html.tt-color-dark .input-mode-seg {
	background: #1f232e;
}

html.tt-color-dark .input-mode-seg button.on {
	background: #2a2f3c;
	color: var(--lt-ink);
}

.hidden {
	display: none !important;
}

.mode-body {
	animation: fadeIn 0.12s ease;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

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

.quick-row label {
	font-size: 10.5px;
	color: var(--lt-muted);
	font-weight: 600;
}

.quick-row .final-score {
	width: 58px;
	text-align: center;
}

.quick-games {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px;
}

.quick-games .game {
	font-size: 10.5px;
	padding: 4px 5px;
}

.rcard .form-control label {
	font-size: 10.5px;
	color: var(--lt-muted);
	font-weight: 600;
	display: block;
	margin-bottom: 3px;
}

.rcard .compact-text {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* ---------------- Forms ---------------- */

.form-control input[type="text"],
.form-control input[type="email"],
.form-control input[type="password"],
.form-control input[type="date"],
.form-control input[type="search"],
.form-control input[type="number"] {
	width: 100%;
	border: 1px solid var(--lt-line-strong);
	border-radius: 8px;
	padding: 8px 10px;
	font: inherit;
	font-size: 13px;
	color: var(--lt-ink);
	background: #fff;
}

.form-control input:disabled,
.form-control textarea:disabled,
.form-control select:disabled {
	background: var(--fill);
	color: var(--lt-muted);
	cursor: not-allowed;
	opacity: 0.85;
}

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

.form-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 18px;
}

.player-builder {
	border: 1px solid var(--lt-line);
	border-radius: 12px;
	padding: 12px;
	background: color-mix(in srgb, var(--fill) 55%, #fff);
}

.player-builder-head {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.player-draft-list {
	border: 1px dashed var(--lt-line-strong);
	border-radius: 10px;
	background: #fff;
	margin-bottom: 10px;
	min-height: 48px;
	overflow: hidden;
}

.player-draft-list.scrollable {
	max-height: min(320px, 38vh);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.player-empty {
	color: var(--lt-muted);
	font-size: 13px;
	padding: 14px;
}

.player-draft-table {
	display: grid;
	gap: 1px;
	background: var(--lt-line);
}

.player-draft-row {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(64px, auto)) auto;
	align-items: center;
	gap: 8px;
	padding: 8px;
	background: #fff;
	font-size: 12px;
}

.player-draft-name {
	font-weight: 700;
	color: var(--lt-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.player-add-panel {
	margin-top: 10px;
	border: 1px solid var(--lt-line-strong);
	border-radius: 12px;
	padding: 12px;
	background: #fff;
	box-shadow: var(--lt-shadow);
}

.player-add-panel.hidden {
	display: none;
}

@media (max-width: 640px) {
	.player-draft-row {
		grid-template-columns: 1fr 1fr;
	}
	.player-draft-name {
		grid-column: 1 / -1;
	}
}

.help-callout {
	background: var(--lt-info-bg);
	border: 1px solid var(--lt-info);
	border-radius: 9px;
	padding: 12px 14px;
	color: var(--lt-info);
	font-size: 13px;
}

.max-w-3xl {
	max-width: 48rem;
}

/* ---------------- Print (@page for QR print page) ---------------- */

@page {
	size: A4 portrait;
	margin: 8mm;
}

/* ---------------- Utility ---------------- */

.text-muted {
	color: var(--lt-muted);
}

.text-sm {
	font-size: 12px;
}

.text-xs {
	font-size: 11px;
}

.font-semibold {
	font-weight: 600;
}

.font-bold {
	font-weight: 700;
}

.flex {
	display: flex;
}

.items-center {
	align-items: center;
}

.justify-between {
	justify-content: space-between;
}

.gap-2 {
	gap: 8px;
}

.mt-2 {
	margin-top: 8px;
}

.w-full {
	width: 100%;
}

.mx-auto {
	margin-left: auto;
	margin-right: auto;
}

.text-center {
	text-align: center;
}

.space-y-2 > * + * {
	margin-top: 8px;
}

.space-y-4 > * + * {
	margin-top: 16px;
}

.space-y-6 > * + * {
	margin-top: 24px;
}

.mb-2 {
	margin-bottom: 8px;
}

.mb-4 {
	margin-bottom: 16px;
}

/* Card / table helpers used by edit & final-results screens */

.tag {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 6px;
	background: var(--lt-accent-soft);
	color: var(--lt-accent-text);
	font-size: 12px;
	font-weight: 600;
}

.tag.success {
	background: var(--lt-success-bg);
	color: var(--lt-success);
}

.tag.error {
	background: var(--lt-error-bg);
	color: var(--lt-error);
}

.tag.warning {
	background: var(--lt-warning-bg);
	color: var(--lt-warning);
}

.tag.info {
	background: var(--lt-info-bg);
	color: var(--lt-info);
}

.tag.large {
	padding: 6px 12px;
	font-size: 13px;
}

/* ---------------- Mobile tournament view ---------------- */

.mobile-view {
	display: none;
}

@media (max-width: 768px) {
	.matrix-topbar,
	.roundnav,
	.matrix-md,
	.matrix-fold {
		display: none !important;
	}
	.mobile-view {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background: var(--lt-bg);
	}
	.m-appbar {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 10px 14px 12px;
		background: var(--lt-surface);
		border-bottom: 1px solid var(--lt-line);
	}
	.m-appbar .m-menu {
		font-size: 22px;
		color: var(--lt-muted);
		width: 26px;
		cursor: pointer;
	}
	.m-appbar .m-title {
		font-weight: 800;
		font-size: 15px;
		line-height: 1.15;
	}
	.m-appbar .m-sub {
		font-size: 12px;
		color: var(--lt-muted);
	}
	.m-appbar .m-round-nav {
		margin-left: auto;
		display: inline-flex;
		align-items: center;
		gap: 4px;
		background: var(--lt-accent);
		color: #fff;
		border-radius: 999px;
		padding: 2px;
	}
	.m-appbar .m-round {
		font-weight: 800;
		font-size: 12px;
		padding: 2px 8px;
	}
	.m-appbar .m-rnav-btn {
		display: grid;
		place-items: center;
		width: 22px;
		height: 22px;
		border-radius: 50%;
		color: #fff;
		text-decoration: none;
		font-size: 16px;
		line-height: 1;
	}
	.m-appbar .m-rnav-btn.disabled {
		opacity: 0.5;
	}
	.m-tabs {
		display: flex;
		background: var(--lt-surface);
		padding: 8px 14px;
		gap: 6px;
		border-bottom: 1px solid var(--lt-line);
	}
	.m-tab {
		flex: 1;
		text-align: center;
		padding: 9px 0;
		border-radius: 9px;
		font-weight: 700;
		font-size: 13px;
		color: var(--lt-muted);
		background: #f4f5f7;
		cursor: pointer;
		border: 0;
		font: inherit;
	}
	.m-tab.on {
		background: var(--lt-ink);
		color: #fff;
	}
	.m-tab .badge {
		display: inline-grid;
		place-items: center;
		background: var(--lt-accent);
		color: #fff;
		font-size: 10px;
		min-width: 16px;
		height: 16px;
		border-radius: 999px;
		padding: 0 4px;
		margin-left: 4px;
		font-weight: 800;
	}
	.m-tab.on .badge {
		background: #fff;
		color: var(--lt-ink);
	}
	.m-body {
		flex: 1;
		overflow: auto;
		padding: 12px 12px 16px;
	}
	.m-mini {
		font-size: 12px;
		color: var(--lt-muted);
		text-align: center;
		margin-bottom: 10px;
	}
	.m-mini b {
		color: var(--lt-ink);
		font-weight: 600;
	}
	.rrow {
		display: flex;
		align-items: center;
		gap: 9px;
		background: var(--lt-surface);
		border: 1px solid var(--lt-line);
		border-radius: 11px;
		padding: 9px 11px;
		margin-bottom: 6px;
		box-shadow: var(--lt-shadow);
	}
	.rrow.r1 {
		border-color: var(--lt-accent);
	}
	.rrow.r3 .rr-rank {
		background: #fde68a;
		color: #92400e;
	}
	.rr-rank {
		width: 24px;
		height: 24px;
		border-radius: 7px;
		display: grid;
		place-items: center;
		font-weight: 800;
		font-size: 13px;
		background: #eef0f3;
		color: var(--lt-muted);
		font-variant-numeric: tabular-nums;
	}
	.rrow.r1 .rr-rank {
		background: var(--lt-accent);
		color: #fff;
	}
	.rr-name {
		flex: 1;
		font-weight: 600;
		font-size: 14px;
	}
	.rr-name small {
		display: block;
		font-weight: 500;
		color: var(--lt-faint);
		font-size: 11px;
	}
	.rr-s {
		font-weight: 800;
		font-size: 16px;
		width: 22px;
		text-align: center;
		font-variant-numeric: tabular-nums;
	}
	.rr-b {
		font-size: 11px;
		color: var(--lt-muted);
		width: 22px;
		text-align: center;
		font-variant-numeric: tabular-nums;
	}
	.form-dots {
		display: inline-flex;
		gap: 3px;
	}
	.form-dots .dot {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		display: inline-block;
	}
	.dot.d-w {
		background: var(--lt-win);
	}
	.dot.d-l {
		background: var(--lt-loss);
	}
	.dot.d-f {
		background: var(--lt-bye);
	}
	.mcard {
		background: var(--pane);
		border: 1px solid var(--border);
		border-radius: var(--r12);
		padding: 14px 16px;
		margin-bottom: 10px;
	}
	.mcard.active {
		border-left: 3px solid var(--accent);
	}
	.mcard.done {
		background: var(--win-soft);
	}
	.mcard.open {
		cursor: pointer;
	}
	.mc-top {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 7px;
	}
	.mc-tisch {
		font-weight: 800;
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: 0.05em;
	}
	.mc-ok {
		margin-left: auto;
		font-size: 11px;
		font-weight: 700;
		color: var(--lt-win);
	}
	.mc-offen {
		margin-left: auto;
		font-size: 11px;
		font-weight: 600;
		color: var(--lt-muted);
	}
	.mc-vs,
	.mc-line {
		font-size: 14px;
		margin-bottom: 8px;
	}
	.mc-vs .v,
	.mc-line .v {
		color: var(--lt-muted);
		margin: 0 5px;
	}
	.mc-line .res {
		font-weight: 800;
		margin: 0 5px;
		font-size: 15px;
		color: var(--lt-muted);
	}
	.mcard .setrows {
		display: none;
	}
	.mcard.active .setrows {
		display: block;
	}
	.setrow {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 7px;
	}
	.sr-n {
		flex: 1;
		font-size: 12px;
		color: var(--lt-muted);
		font-weight: 600;
	}
	.sr-dp {
		color: var(--lt-faint);
		font-weight: 800;
	}
	input.big {
		width: 58px;
		height: 42px;
		border: 1.5px solid var(--lt-line-strong);
		border-radius: 9px;
		background: #fff;
		text-align: center;
		font: inherit;
		font-size: 17px;
		font-weight: 700;
		color: var(--lt-ink);
		font-variant-numeric: tabular-nums;
	}
	input.big:focus {
		outline: 2.5px solid var(--lt-accent);
		border-color: var(--lt-accent);
	}
	.mc-sum {
		display: none;
		align-items: center;
		justify-content: space-between;
		background: #fff7ed;
		border: 1px solid #fed7aa;
		border-radius: 10px;
		padding: 9px 12px;
		margin: 4px 0 11px;
	}
	.mcard.active .mc-sum {
		display: flex;
	}
	.big-score {
		font-size: 20px;
		font-weight: 800;
		letter-spacing: -0.02em;
		font-variant-numeric: tabular-nums;
	}
	.win-tag {
		font-size: 11.5px;
		font-weight: 700;
		color: var(--lt-accent-text);
	}
	.mcard .mode-body {
		margin-bottom: 6px;
	}
	.mcard .mode-body.hidden {
		display: none;
	}
	.mcard .sets-table {
		display: none;
	}
	.mcard.active .sets-table {
		display: table;
		width: 100%;
	}
	.mcard .sets-table th {
		font-size: 11px;
		color: var(--lt-muted);
		padding: 4px 2px;
	}
	.mcard .sets-table td {
		padding: 5px 2px;
	}
	.mcard .quick-row {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 10px;
	}
	.mcard .quick-row label {
		font-size: 12px;
		color: var(--lt-muted);
		font-weight: 600;
	}
	.mcard .quick-games {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 6px;
	}
	.mcard .form-control label {
		font-size: 12px;
		color: var(--lt-muted);
		font-weight: 600;
		display: block;
		margin-bottom: 5px;
	}
	.mcard .compact-text {
		width: 100%;
		font-family:
			ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	}
	.m-bottom {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 11px 14px;
		background: var(--lt-surface);
		border-top: 1px solid var(--lt-line);
		font-size: 12px;
		color: var(--lt-muted);
	}
	.m-bottom b {
		color: var(--lt-ink);
	}
	.m-bottom .pbar {
		flex: 1;
		height: 5px;
		background: #eef0f3;
		border-radius: 5px;
		overflow: hidden;
	}
	.m-bottom .pbar i {
		display: block;
		height: 100%;
		background: var(--lt-accent);
	}
	.m-pane {
		display: none;
	}
	.m-pane.on {
		display: block;
	}
	.mcard .mc-vs {
		display: none;
	}
	.mcard.active .mc-vs {
		display: block;
	}
	.mcard.active .mc-line {
		display: none;
	}
	.mobile-rail-foot {
		padding: 8px 0 16px;
	}
	.mobile-rail-foot .btn {
		width: 100%;
	}
	.m-mini-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		flex-wrap: wrap;
	}
}

/* ---------------- Empty state ---------------- */

.empty-state {
	background: var(--lt-surface);
	border: 1.5px dashed var(--lt-line-strong);
	border-radius: var(--lt-radius);
	padding: 48px 24px;
	text-align: center;
	color: var(--lt-muted);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.empty-state .empty-title {
	font-weight: 700;
	font-size: 16px;
	color: var(--lt-ink);
}

/* ---------------- Vereinsheft webfonts (self-hosted, OFL) ----------------
   Zilla Slab (headlines), Karla (body), IBM Plex Mono (data/tables),
   Caveat (marginalia, used sparingly). Served from /static/fonts — no
   Google Fonts CDN in production (GDPR). */

@font-face {
	font-family: "Zilla Slab";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("fonts/zilla-slab-600.woff2") format("woff2");
}
@font-face {
	font-family: "Zilla Slab";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/zilla-slab-700.woff2") format("woff2");
}
@font-face {
	font-family: "Karla";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/karla-400.woff2") format("woff2");
}
@font-face {
	font-family: "Karla";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/karla-700.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("fonts/ibm-plex-mono-600.woff2") format("woff2");
}
@font-face {
	font-family: "Caveat";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("fonts/caveat-600.woff2") format("woff2");
}

/* ---------------- Landing page / marketing pages ("Vereinsheft") ----------------
   Port of design mockup C "Vereinsheft" (mockups/design-mockups-2026-08-07/).
   Handmade zine: warm cream paper with noise, table-tennis green, ball
   orange, hand-drawn underlines, sticker badges, stamps, polaroids.
   EVERYTHING is scoped under .landing-body / .marketing-legal-body so
   nothing leaks into the app shell, which shares this stylesheet.
   Written on a clean reset basis: .landing-body is intentionally not part
   of the legacy compat shim (see "PORTED FROM tt-theme.css"). */

.landing-body,
.marketing-legal-body {
	--vh-paper: #faf3e3;
	--vh-paper-deep: #f3ead2;
	--vh-ink: #2e2519;
	--vh-ink-soft: #5c4f3c;
	--vh-green: #1d6b45;
	--vh-green-deep: #14502f;
	--vh-orange: #f26b1d;
	--vh-orange-ink: #b34a08;
	--vh-line: #d9cba6;
	--vh-card: #fffdf7;
	--vh-slab: "Zilla Slab", Georgia, "Times New Roman", serif;
	--vh-sans:
		"Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--vh-mono:
		"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--vh-hand: "Caveat", "Segoe Script", "Comic Sans MS", cursive;
	height: auto; /* undo html,body{height:100%}: page grows with content */
	margin: 0;
	background: var(--vh-paper);
	color: var(--vh-ink);
	font-family: var(--vh-sans);
	font-size: 17px;
	line-height: 1.6;
}

html:has(> body.landing-body),
html:has(> body.marketing-legal-body) {
	height: auto; /* the propagated body background is sized by the html box */
	scroll-behavior: smooth;
}

/* feine Papier-Noise über allem */
.landing-body::before,
.marketing-legal-body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 1000;
	opacity: 0.05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.landing-body ::selection,
.marketing-legal-body ::selection {
	background: var(--vh-orange);
	color: var(--vh-paper);
}

.landing-body a,
.marketing-legal-body a {
	color: var(--vh-green-deep);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}
.landing-body a:hover,
.marketing-legal-body a:hover {
	color: var(--vh-orange-ink);
}
.landing-body a:focus-visible,
.landing-body button:focus-visible,
.landing-body summary:focus-visible,
.marketing-legal-body a:focus-visible,
.marketing-legal-body button:focus-visible,
.marketing-legal-body summary:focus-visible {
	outline: 3px solid var(--vh-orange);
	outline-offset: 3px;
	border-radius: 2px;
}
.landing-body img,
.marketing-legal-body img {
	max-width: 100%;
	height: auto;
	display: block;
}

.vh-wrap {
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 24px;
}

.landing-body h1,
.landing-body h2,
.landing-body h3,
.marketing-legal-body h1,
.marketing-legal-body h2,
.marketing-legal-body h3 {
	font-family: var(--vh-slab);
	font-weight: 700;
	line-height: 1.12;
	color: var(--vh-ink);
}
.landing-body h1 {
	font-size: clamp(2.1rem, 5.2vw, 3.6rem);
	letter-spacing: -0.01em;
}
.marketing-legal-body h1 {
	font-size: clamp(1.9rem, 4.6vw, 3rem);
	letter-spacing: -0.01em;
}
.landing-body h2 {
	font-size: clamp(1.7rem, 3.6vw, 2.5rem);
}
.marketing-legal-body h2 {
	font-size: clamp(1.5rem, 3vw, 2.1rem);
}
.landing-body h3,
.marketing-legal-body h3 {
	font-size: 1.35rem;
}

.vh-hand {
	font-family: var(--vh-hand);
	font-weight: 600;
	color: var(--vh-orange-ink);
}

/* handgezogene Unterstreichung */
.vh-uline {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath d='M4 9 C 36 4, 66 12, 98 7 C 130 3, 160 11, 196 6 C 214 4, 228 7, 236 8' fill='none' stroke='%23f26b1d' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 0.32em;
	padding-bottom: 0.18em;
}
.vh-uline-green {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath d='M4 9 C 36 4, 66 12, 98 7 C 130 3, 160 11, 196 6 C 214 4, 228 7, 236 8' fill='none' stroke='%231d6b45' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 0.32em;
	padding-bottom: 0.18em;
}

/* ============ Heft-Kopf / Masthead ============ */
.vh-masthead {
	border-bottom: 3px double var(--vh-ink);
	padding: 18px 0 14px;
	background: var(--vh-paper);
}
.landing-body .vh-masthead {
	position: sticky;
	top: 0;
	z-index: 50;
}
.vh-masthead .vh-wrap {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}
.landing-brand {
	font-family: var(--vh-slab);
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--vh-ink);
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
}
.landing-brand:hover {
	color: var(--vh-ink);
}
.landing-brand .dot {
	flex: 0 0 auto;
	display: inline-flex;
}
.landing-brand small {
	font-family: var(--vh-mono);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--vh-ink-soft);
	display: block;
	line-height: 1.2;
}
.vh-ausgabe {
	font-family: var(--vh-mono);
	font-size: 0.72rem;
	color: var(--vh-ink-soft);
	border: 1.5px dashed var(--vh-line);
	padding: 4px 10px;
	border-radius: 3px;
	white-space: nowrap;
}
.landing-links {
	display: flex;
	gap: 18px;
	align-items: center;
	flex-wrap: wrap;
}
.landing-links a {
	color: var(--vh-ink);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
	border-bottom: 2px solid transparent;
}
.landing-links a:hover {
	border-bottom-color: var(--vh-orange);
	color: var(--vh-ink);
}
.landing-nav-actions {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-left: auto;
}
.vh-masthead .landing-links + .landing-nav-actions {
	margin-left: 0;
}
.vh-masthead .landing-links {
	margin-left: auto;
}

/* Buttons (class names shared with the app shell; restyled only in scope) */
.landing-body .btn,
.marketing-legal-body .btn {
	display: inline-block;
	font-family: var(--vh-sans);
	font-weight: 800;
	font-size: 1rem;
	text-decoration: none;
	cursor: pointer;
	border: none;
	padding: 13px 26px;
	border-radius: 4px;
	transition:
		transform 0.15s ease,
		box-shadow 0.15s ease;
}
.landing-body .btn.primary,
.marketing-legal-body .btn.primary {
	background: var(--vh-orange);
	color: var(--vh-ink); /* AA: 4.95:1 on orange */
	box-shadow: 3px 3px 0 var(--vh-ink);
	border: 2px solid var(--vh-ink);
	transform: rotate(-1deg);
}
.landing-body .btn.primary:hover,
.marketing-legal-body .btn.primary:hover {
	transform: rotate(0deg) translate(-1px, -1px);
	box-shadow: 5px 5px 0 var(--vh-ink);
	color: var(--vh-ink);
}
.landing-body .btn.ghost,
.landing-body .btn:not(.primary),
.marketing-legal-body .btn.ghost,
.marketing-legal-body .btn:not(.primary) {
	background: transparent;
	color: var(--vh-green-deep);
	border: 2px solid var(--vh-green);
	box-shadow: 2px 2px 0 rgba(29, 107, 69, 0.35);
	font-weight: 700;
}
.landing-body .btn.ghost:hover,
.landing-body .btn:not(.primary):hover,
.marketing-legal-body .btn.ghost:hover,
.marketing-legal-body .btn:not(.primary):hover {
	background: rgba(29, 107, 69, 0.08);
	color: var(--vh-green-deep);
}
.landing-body .btn.small,
.marketing-legal-body .btn.small {
	padding: 9px 18px;
	font-size: 0.92rem;
}

/* ============ Abschnitts-Bausteine ============ */
.vh-sec-label {
	font-family: var(--vh-mono);
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--vh-orange-ink);
	margin: 0 0 10px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.vh-sec-label::after {
	content: "";
	flex: 1;
	max-width: 60px;
	border-top: 2px dotted var(--vh-orange);
}
.vh-sec-head {
	max-width: 46em;
	margin-bottom: 40px;
}
.vh-sec-head p {
	margin: 14px 0 0;
	color: var(--vh-ink-soft);
	font-size: 1.08rem;
}
.vh-kicker {
	font-family: var(--vh-mono);
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vh-green-deep);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
}
.vh-kicker::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--vh-orange);
	display: inline-block;
}

/* ============ Hero ============ */
.landing-hero {
	padding: 64px 0 40px;
	position: relative;
}
.landing-hero-grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 56px;
	align-items: start;
}
.landing-hero h1 {
	margin: 0 0 22px;
}
.landing-lead {
	font-size: 1.18rem;
	color: var(--vh-ink-soft);
	max-width: 34em;
	margin: 0 0 28px;
}
.landing-actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	align-items: center;
}
.landing-hero .landing-actions {
	margin-bottom: 26px;
}
.landing-hero-note {
	font-size: 0.9rem;
	color: var(--vh-ink-soft);
	margin: 0;
}
.landing-hero-note .vh-hand {
	font-size: 1.25rem;
	margin-left: 6px;
}

.landing-sticker-row {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 34px;
}
.landing-sticker {
	font-family: var(--vh-mono);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.05em;
	padding: 8px 14px;
	border: 2px solid var(--vh-ink);
	border-radius: 999px;
	background: var(--vh-paper);
	box-shadow: 2px 2px 0 var(--vh-ink);
	white-space: nowrap;
	color: var(--vh-ink);
}
.landing-sticker-orange {
	background: var(--vh-orange);
	transform: rotate(-2deg);
}
.landing-sticker-green {
	background: var(--vh-green);
	color: var(--vh-paper);
	border-color: var(--vh-green-deep);
	box-shadow: 2px 2px 0 var(--vh-green-deep);
	transform: rotate(1.5deg);
}
.landing-sticker-plain {
	transform: rotate(-1deg);
	background: var(--vh-paper-deep);
}

/* Polaroid mit Klebeband-Ecken */
.landing-hero-media {
	position: relative;
	padding-top: 44px;
}
.landing-polaroid {
	background: var(--vh-card);
	padding: 14px 14px 52px;
	border: 1px solid #e5dcc4;
	box-shadow:
		0 2px 4px rgba(46, 37, 25, 0.12),
		0 14px 30px rgba(46, 37, 25, 0.14);
	position: relative;
	margin: 0;
	transform: rotate(1.8deg);
	transition: transform 0.25s ease;
}
.landing-polaroid:hover {
	transform: rotate(0.6deg);
}
.landing-polaroid img {
	border: 1px solid #e5dcc4;
}
.landing-polaroid figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	text-align: center;
	font-family: var(--vh-hand);
	font-size: 1.35rem;
	color: var(--vh-ink-soft);
	font-weight: 600;
}
.vh-tape::before,
.vh-tape::after {
	content: "";
	position: absolute;
	width: 96px;
	height: 28px;
	background: linear-gradient(
		100deg,
		rgba(233, 213, 154, 0.35),
		rgba(240, 224, 170, 0.75) 40%,
		rgba(233, 213, 154, 0.4)
	);
	box-shadow: 0 1px 3px rgba(46, 37, 25, 0.18);
	opacity: 0.9;
	z-index: 3;
}
.vh-tape::before {
	top: -13px;
	left: 8%;
	transform: rotate(-5deg);
}
.vh-tape::after {
	top: -11px;
	right: 6%;
	transform: rotate(4deg);
}

/* hand-Pfeil mit Randnotiz */
.landing-arrow-note {
	position: absolute;
	left: -24px;
	top: -34px;
	transform: rotate(-5deg);
	width: 170px;
	text-align: center;
	pointer-events: none;
	z-index: 6;
}
.landing-arrow-note .vh-hand {
	font-size: 1.3rem;
	line-height: 1.15;
	display: block;
}
.landing-arrow-note svg {
	display: block;
	margin: 2px auto 0;
}

/* Laminierter Ranglisten-Zettel */
.landing-slip {
	background: var(--vh-card);
	border: 1px solid #e5dcc4;
	box-shadow:
		0 2px 3px rgba(46, 37, 25, 0.1),
		0 10px 22px rgba(46, 37, 25, 0.12);
	padding: 20px 22px 22px;
	transform: rotate(-1.4deg);
	margin-top: 44px;
	position: relative;
}
.landing-slip-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	border-bottom: 2px solid var(--vh-ink);
	padding-bottom: 8px;
	margin-bottom: 10px;
}
.landing-slip-head h3 {
	font-size: 1.1rem;
	margin: 0;
}
.landing-slip-head .landing-runde {
	font-family: var(--vh-mono);
	font-size: 0.75rem;
	color: var(--vh-orange-ink);
	font-weight: 700;
}
.landing-rangliste {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--vh-mono);
	font-size: 0.86rem;
}
.landing-rangliste th {
	text-align: left;
	font-weight: 600;
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--vh-ink-soft);
	border-bottom: 1.5px solid var(--vh-line);
	padding: 5px 6px;
}
.landing-rangliste td {
	padding: 6px;
	border-bottom: 1px dashed var(--vh-line);
}
.landing-rangliste tr:last-child td {
	border-bottom: none;
}
.landing-rangliste .rk {
	color: var(--vh-ink-soft);
	width: 2em;
}
.landing-rangliste .bilanz {
	font-weight: 700;
	text-align: right;
}
.landing-rangliste .ttr {
	text-align: right;
	color: var(--vh-ink-soft);
}
.landing-rangliste td.hl {
	color: var(--vh-green-deep);
	font-weight: 700;
}

/* ============ Landing-Abschnitte ============ */
.landing-section {
	padding: 64px 0;
}

/* Positionierung */
.landing-posi {
	background: var(--vh-paper-deep);
	border-top: 2px solid var(--vh-line);
	border-bottom: 2px solid var(--vh-line);
}
.landing-posi-inner {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 40px;
	align-items: center;
}
.landing-posi h2 {
	max-width: 18em;
	margin: 0;
}
.landing-posi p {
	color: var(--vh-ink-soft);
	margin: 12px 0 0;
	max-width: 40em;
}
.landing-hand-big {
	font-family: var(--vh-hand);
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--vh-green-deep);
	transform: rotate(-2deg);
	text-align: right;
	max-width: 220px;
	line-height: 1.2;
	margin: 0;
}

/* Ablauf */
.landing-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}
.landing-step {
	background: var(--vh-card);
	border: 2px solid var(--vh-ink);
	border-radius: 6px;
	padding: 26px 20px 22px;
	position: relative;
	box-shadow: 4px 4px 0 rgba(46, 37, 25, 0.16);
	margin: 0;
}
.landing-step:nth-child(odd) {
	transform: rotate(-0.7deg);
}
.landing-step:nth-child(even) {
	transform: rotate(0.7deg);
}
.landing-step .landing-stepnum {
	width: 52px;
	height: 52px;
	margin-bottom: 14px;
	display: block;
}
.landing-step h3 {
	font-size: 1.12rem;
	margin: 0 0 8px;
}
.landing-step p {
	font-size: 0.94rem;
	color: var(--vh-ink-soft);
	margin: 0;
}
.landing-steptag {
	position: absolute;
	top: -12px;
	right: 14px;
	font-family: var(--vh-mono);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	background: var(--vh-orange);
	color: var(--vh-ink);
	border: 2px solid var(--vh-ink);
	border-radius: 999px;
	padding: 3px 10px;
	transform: rotate(2deg);
}

/* Funktionen (4 Stories) */
.landing-story {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 52px;
	align-items: center;
	padding: 44px 0;
	border-top: 2px dashed var(--vh-line);
	margin: 0;
}
.landing-story:first-of-type {
	border-top: none;
}
.landing-story-flip .landing-story-media {
	order: 2;
}
.landing-story .landing-polaroid {
	max-width: 520px;
}
.landing-story-flip .landing-polaroid {
	transform: rotate(-1.8deg);
}
.landing-story-flip .landing-polaroid:hover {
	transform: rotate(-0.6deg);
}
.landing-story-kicker {
	font-family: var(--vh-mono);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vh-green-deep);
	margin: 0 0 8px;
}
.landing-story h3 {
	font-size: 1.65rem;
	margin: 0 0 14px;
}
.landing-story p {
	color: var(--vh-ink-soft);
	margin: 0 0 18px;
	max-width: 32em;
}
.landing-benefits {
	list-style: none;
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
}
.landing-benefits li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 0.98rem;
}
.landing-benefits li svg {
	flex: 0 0 auto;
	margin-top: 3px;
}

/* Trust — die Platte */
.landing-platte {
	background: var(--vh-green);
	background-image:
		linear-gradient(rgba(250, 243, 227, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(250, 243, 227, 0.05) 1px, transparent 1px);
	background-size: 36px 36px;
	color: var(--vh-paper);
	position: relative;
	border-top: 6px solid var(--vh-green-deep);
	border-bottom: 6px solid var(--vh-green-deep);
}
.landing-platte::before {
	/* Mittellinie der Platte */
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 4px;
	background: rgba(250, 243, 227, 0.5);
}
.landing-platte h2 {
	color: var(--vh-paper);
	margin: 0;
}
.landing-platte .vh-sec-label {
	color: #ffd9b8;
}
.landing-platte .vh-sec-label::after {
	border-top-color: #ffd9b8;
}
.landing-trust-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	position: relative;
}
.landing-trust-card {
	background: var(--vh-paper);
	color: var(--vh-ink);
	border-radius: 6px;
	padding: 28px 26px;
	box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.28);
	border: 2px solid var(--vh-ink);
	margin: 0;
}
.landing-trust-card:nth-child(1) {
	transform: rotate(-0.8deg);
}
.landing-trust-card:nth-child(2) {
	transform: rotate(0.8deg);
}
.landing-trust-card h3 {
	margin: 0 0 10px;
	display: flex;
	gap: 10px;
	align-items: center;
	font-size: 1.2rem;
}
.landing-trust-card h3 svg {
	flex: 0 0 auto;
}
.landing-trust-card p {
	color: var(--vh-ink-soft);
	font-size: 0.97rem;
	margin: 0;
}
.landing-ehrlich {
	margin: 34px 0 0;
	position: relative;
	font-size: 0.95rem;
	color: #e8f2ea;
	border: 2px dashed rgba(250, 243, 227, 0.55);
	border-radius: 6px;
	padding: 18px 22px;
	background: rgba(0, 0, 0, 0.14);
}
.landing-ehrlich strong {
	color: #fff;
}
.landing-ehrlich .vh-hand {
	color: #ffcf9e;
	font-size: 1.3rem;
}

/* Preise */
.landing-preis-inner {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 48px;
	align-items: center;
}
.landing-preis-sticker {
	width: 210px;
	height: 210px;
	border-radius: 50%;
	background: var(--vh-orange);
	border: 3px solid var(--vh-ink);
	box-shadow: 5px 5px 0 rgba(46, 37, 25, 0.25);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transform: rotate(-5deg);
	text-align: center;
	color: var(--vh-ink);
}
.landing-preis-betrag {
	font-family: var(--vh-slab);
	font-weight: 700;
	font-size: 3.4rem;
	line-height: 1;
}
.landing-preis-zeile {
	font-family: var(--vh-mono);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-top: 8px;
	max-width: 130px;
	line-height: 1.4;
}
.landing-preis-copy h2 {
	margin: 0 0 14px;
}
.landing-preis-copy p {
	color: var(--vh-ink-soft);
	max-width: 38em;
	margin: 0 0 12px;
}
.landing-preis-copy .vh-hand {
	font-size: 1.45rem;
	color: var(--vh-orange-ink);
}

/* FAQ */
.landing-faq {
	background: var(--vh-paper-deep);
	border-top: 2px solid var(--vh-line);
}
.landing-faq-list {
	display: grid;
	gap: 14px;
	max-width: 820px;
}
.landing-faq-item {
	background: var(--vh-card);
	border: 2px solid var(--vh-ink);
	border-radius: 6px;
	box-shadow: 3px 3px 0 rgba(46, 37, 25, 0.14);
}
.landing-faq-item:nth-child(odd) {
	transform: rotate(-0.3deg);
}
.landing-faq-item:nth-child(even) {
	transform: rotate(0.3deg);
}
.landing-faq-item summary {
	list-style: none;
	cursor: pointer;
	padding: 18px 22px;
	font-family: var(--vh-slab);
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--vh-ink);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}
.landing-faq-item summary::-webkit-details-marker {
	display: none;
}
.landing-faq-plus {
	font-family: var(--vh-hand);
	font-size: 1.7rem;
	color: var(--vh-orange-ink);
	flex: 0 0 auto;
	transition: transform 0.2s ease;
	line-height: 1;
}
.landing-faq-item[open] summary .landing-faq-plus {
	transform: rotate(45deg);
}
.landing-faq-answer {
	color: var(--vh-ink-soft);
	font-size: 0.98rem;
	border-top: 1.5px dashed var(--vh-line);
	padding: 14px 0 0;
	margin: 0 22px 20px;
}
.landing-faq-answer p {
	margin: 0;
}

/* Final CTA */
.landing-final {
	text-align: center;
	padding: 80px 0;
}
.landing-final .vh-sec-label {
	justify-content: center;
}
.landing-final .vh-sec-label::after {
	display: none;
}
.landing-final h2 {
	margin: 0 0 16px;
}
.landing-final p {
	color: var(--vh-ink-soft);
	max-width: 36em;
	margin: 0 auto 30px;
}
.landing-final .btn.primary,
.series-final .btn.primary {
	font-size: 1.1rem;
	padding: 16px 34px;
}
.landing-final .vh-hand {
	display: block;
	font-size: 1.5rem;
	margin-top: 26px;
	transform: rotate(-1.5deg);
}

/* ============ Footer ============ */
.landing-footer {
	border-top: 3px double var(--vh-ink);
	padding: 34px 0 44px;
	background: var(--vh-paper-deep);
}
.landing-foot-grid {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}
.landing-foot-grid .landing-brand {
	font-size: 1.2rem;
}
.landing-foot-links {
	display: flex;
	gap: 8px 20px;
	flex-wrap: wrap;
	font-size: 0.92rem;
}
.landing-foot-links a {
	color: var(--vh-ink);
	text-decoration: none;
	border-bottom: 1.5px solid var(--vh-line);
}
.landing-foot-links a:hover {
	border-bottom-color: var(--vh-orange);
	color: var(--vh-ink);
}
.landing-foot-meta {
	font-family: var(--vh-mono);
	font-size: 0.75rem;
	color: var(--vh-ink-soft);
	margin: 14px 0 0;
}
.landing-foot-hand {
	font-family: var(--vh-hand);
	font-size: 1.25rem;
	color: var(--vh-ink-soft);
	transform: rotate(-1deg);
}

/* ============ Serien-Seite (/turnierserien) ============ */
.series-head {
	padding: 56px 0 12px;
}
.series-head .series-lead {
	font-size: 1.12rem;
	color: var(--vh-ink-soft);
	max-width: 44em;
	margin: 18px 0 0;
}
.series-head .series-lead + .series-lead {
	margin-top: 12px;
}
.series-back {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 26px;
	font-family: var(--vh-hand);
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--vh-orange-ink);
	text-decoration: none;
	transform: rotate(-1deg);
}
.series-back:hover {
	color: var(--vh-green-deep);
}
.series-back svg {
	flex: 0 0 auto;
}
.series-section {
	padding: 44px 0;
}
.series-intro {
	color: var(--vh-ink-soft);
	max-width: 44em;
	margin: 12px 0 30px;
}
.series-section h2 {
	margin: 0;
}

/* Stempel */
.vh-stamp {
	display: inline-block;
	font-family: var(--vh-mono);
	font-weight: 700;
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border: 2.5px solid currentColor;
	border-radius: 5px;
	padding: 4px 10px 3px;
	transform: rotate(-4deg);
	position: relative;
	white-space: nowrap;
}
.vh-stamp::after {
	content: "";
	position: absolute;
	inset: 2px;
	border: 1px dashed currentColor;
	border-radius: 3px;
	opacity: 0.6;
}
.vh-stamp-ok {
	color: var(--vh-green-deep);
	background: rgba(29, 107, 69, 0.07);
}
.vh-stamp-plan {
	color: var(--vh-orange-ink);
	background: rgba(242, 107, 29, 0.07);
	transform: rotate(3deg);
}

/* Abgetippte Tabellen */
.series-sheet {
	background: var(--vh-card);
	border: 2px solid var(--vh-ink);
	border-radius: 6px;
	box-shadow: 5px 5px 0 rgba(46, 37, 25, 0.15);
	padding: 26px 26px 22px;
	position: relative;
}
.series-sheet-l {
	transform: rotate(-0.4deg);
}
.series-sheet-r {
	transform: rotate(0.4deg);
}
.series-sheet-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	border-bottom: 2.5px solid var(--vh-ink);
	padding-bottom: 12px;
	margin-bottom: 6px;
}
.series-sheet-head h3 {
	font-size: 1.3rem;
	margin: 0;
}
.series-sheet-head .vh-hand {
	font-size: 1.35rem;
	transform: rotate(-2deg);
}
.series-typed {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--vh-mono);
	font-size: 0.9rem;
}
.series-typed th {
	text-align: left;
	font-weight: 600;
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--vh-ink-soft);
	border-bottom: 1.5px solid var(--vh-line);
	padding: 8px 10px 8px 0;
}
.series-typed td {
	padding: 11px 10px 11px 0;
	border-bottom: 1px dashed var(--vh-line);
	vertical-align: middle;
}
.series-typed tr:last-child td {
	border-bottom: none;
}
.series-typed .serie {
	font-weight: 700;
	color: var(--vh-ink);
}
.series-typed .verband {
	white-space: nowrap;
}
.series-typed .land {
	color: var(--vh-ink-soft);
}
.series-typed .sys {
	font-size: 0.8rem;
	color: var(--vh-ink-soft);
}
.series-typed .sys b {
	color: var(--vh-green-deep);
}
.series-note {
	font-size: 0.95rem;
	color: var(--vh-ink-soft);
	margin: 14px 0 0;
	border-top: 1.5px dashed var(--vh-line);
	padding-top: 12px;
}
.series-note .vh-hand {
	font-size: 1.25rem;
}

/* Kompatibilität */
.series-komp {
	background: var(--vh-paper-deep);
	border-top: 2px solid var(--vh-line);
	border-bottom: 2px solid var(--vh-line);
}
.series-komp-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-top: 28px;
}
.series-komp-card {
	background: var(--vh-card);
	border: 2px solid var(--vh-ink);
	border-radius: 6px;
	padding: 22px 20px;
	box-shadow: 4px 4px 0 rgba(46, 37, 25, 0.14);
	position: relative;
	margin: 0;
}
.series-komp-card:nth-child(1) {
	transform: rotate(-0.6deg);
}
.series-komp-card:nth-child(2) {
	transform: rotate(0.5deg);
}
.series-komp-card:nth-child(3) {
	transform: rotate(-0.4deg);
}
.series-komp-num {
	font-family: var(--vh-mono);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	background: var(--vh-green);
	color: var(--vh-paper);
	border-radius: 999px;
	display: inline-block;
	padding: 3px 12px;
	margin-bottom: 12px;
}
.series-komp-card h3 {
	font-size: 1.08rem;
	margin: 0 0 8px;
}
.series-komp-card p {
	font-size: 0.93rem;
	color: var(--vh-ink-soft);
	margin: 0;
}
.series-final {
	text-align: center;
	padding: 64px 0;
}
.series-final .vh-sec-label {
	justify-content: center;
}
.series-final .vh-sec-label::after {
	display: none;
}
.series-final h2 {
	margin: 0 0 14px;
}
.series-final p {
	color: var(--vh-ink-soft);
	max-width: 36em;
	margin: 0 auto 28px;
}
.series-final .vh-hand {
	display: block;
	font-size: 1.45rem;
	margin-top: 24px;
	transform: rotate(-1.5deg);
}

/* ============ Legal-Seiten (/kontakt, /datenschutz, /impressum) ============
   Same Vereinsheft look, class names kept (.plain-topbar, .legal-page, ...).
   Base .plain-topbar/.plain-wrap rules for the app shell live above and stay
   untouched — these overrides only apply on the marketing shell. */
.marketing-legal-body .plain-topbar {
	height: auto;
	padding: 18px 24px 14px;
	background: var(--vh-paper);
	border-bottom: 3px double var(--vh-ink);
}
.marketing-legal-body .plain-topbar .brand {
	font-family: var(--vh-slab);
	font-weight: 700;
	font-size: 1.4rem;
	color: var(--vh-ink);
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 10px;
}
.marketing-legal-body .plain-topbar .brand:hover {
	color: var(--vh-ink);
}
.marketing-legal-body .plain-topbar .brand small {
	font-family: var(--vh-mono);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--vh-ink-soft);
}
.marketing-legal-body .plain-topbar .brand-dot {
	display: inline-flex;
	flex: 0 0 auto;
}
.marketing-legal-body .plain-wrap {
	max-width: 1180px;
	padding: 24px 20px 60px;
}
.marketing-legal-body .legal-page {
	max-width: 760px;
	margin: 40px auto;
	background: var(--vh-card);
	border: 2px solid var(--vh-ink);
	border-radius: 6px;
	box-shadow: 5px 5px 0 rgba(46, 37, 25, 0.15);
}
.marketing-legal-body .legal-page-body {
	padding: 30px 28px;
	display: grid;
	gap: 14px;
}
.marketing-legal-body .legal-page h1 {
	margin: 0;
	font-size: clamp(1.9rem, 4.6vw, 2.6rem);
	letter-spacing: -0.01em;
}
.marketing-legal-body .legal-page h2 {
	margin: 8px 0 0;
	font-size: 1.2rem;
}
.marketing-legal-body .legal-page p {
	margin: 0;
	color: var(--vh-ink-soft);
	line-height: 1.65;
}
.marketing-legal-body .legal-page a {
	color: var(--vh-green-deep);
	font-weight: 700;
}
.marketing-legal-body .legal-page a:hover {
	color: var(--vh-orange-ink);
}
.marketing-legal-body .legal-kicker {
	font-family: var(--vh-mono);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--vh-green-deep) !important;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.marketing-legal-body .legal-kicker::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--vh-orange);
	display: inline-block;
}
.marketing-legal-body .legal-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	padding-top: 14px;
	margin-top: 6px;
	border-top: 1.5px dashed var(--vh-line);
	font-weight: 700;
	font-size: 0.92rem;
}
.marketing-legal-body .legal-nav a {
	color: var(--vh-ink);
	text-decoration: none;
	border-bottom: 1.5px solid var(--vh-line);
}
.marketing-legal-body .legal-nav a:hover {
	border-bottom-color: var(--vh-orange);
	color: var(--vh-ink);
}
.marketing-legal-body .legal-nav span {
	color: var(--vh-line);
}

/* ============ Responsive ============ */
@media (max-width: 1020px) {
	.landing-hero-grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.landing-arrow-note {
		display: none;
	}
	.landing-hero-media {
		max-width: 560px;
		padding-top: 10px;
	}
	.landing-steps {
		grid-template-columns: 1fr 1fr;
	}
	.landing-story {
		grid-template-columns: 1fr;
		gap: 34px;
	}
	.landing-story-flip .landing-story-media {
		order: 0;
	}
	.landing-story .landing-polaroid {
		margin: 0 auto;
	}
	.landing-trust-grid {
		grid-template-columns: 1fr;
	}
	.landing-posi-inner {
		grid-template-columns: 1fr;
	}
	.landing-hand-big {
		text-align: left;
		max-width: none;
	}
	.landing-preis-inner {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}
	.landing-preis-copy p {
		margin-left: auto;
		margin-right: auto;
	}
	.series-komp-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 760px) {
	/* abgetippte Tabelle wird zur Karten-Liste */
	.series-typed,
	.series-typed thead,
	.series-typed tbody,
	.series-typed tr,
	.series-typed td {
		display: block;
	}
	.series-typed thead {
		position: absolute;
		left: -9999px;
	}
	.series-typed tr {
		border-bottom: 2px solid var(--vh-ink);
		padding: 12px 0;
	}
	.series-typed tr:last-child {
		border-bottom: none;
	}
	.series-typed td {
		border-bottom: none;
		padding: 3px 0;
	}
	.series-typed td::before {
		content: attr(data-label);
		display: block;
		font-family: var(--vh-mono);
		font-size: 0.64rem;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--vh-ink-soft);
	}
	.series-typed td.cell-serie::before {
		content: none;
	}
	.series-typed .serie {
		font-size: 1.02rem;
	}
	.series-sheet {
		padding: 20px 16px 18px;
	}
	.vh-stamp {
		transform: rotate(-2deg);
		margin-top: 4px;
	}
	.vh-stamp-plan {
		transform: rotate(2deg);
	}
}

@media (max-width: 640px) {
	.landing-body,
	.marketing-legal-body {
		font-size: 16px;
	}
	.landing-section {
		padding: 48px 0;
	}
	.landing-hero {
		padding: 44px 0 28px;
	}
	.landing-steps {
		grid-template-columns: 1fr;
	}
	.vh-ausgabe {
		display: none;
	}
	.vh-masthead .vh-wrap {
		gap: 12px;
	}
	.landing-links {
		margin-left: 0;
		width: 100%;
		justify-content: flex-start;
		gap: 14px;
	}
	.landing-nav-actions {
		margin-left: 0;
	}
	.landing-sticker {
		font-size: 0.72rem;
		padding: 7px 11px;
	}
	.landing-polaroid {
		transform: rotate(0.8deg);
		padding: 10px 10px 46px;
	}
	.landing-story-flip .landing-polaroid {
		transform: rotate(-0.8deg);
	}
	.vh-tape::before,
	.vh-tape::after {
		width: 70px;
		height: 22px;
	}
	.landing-slip {
		padding: 16px 14px 18px;
	}
	.landing-rangliste {
		font-size: 0.78rem;
	}
	.landing-rangliste th,
	.landing-rangliste td {
		padding: 5px 4px;
	}
	.landing-preis-sticker {
		width: 180px;
		height: 180px;
	}
	.landing-preis-betrag {
		font-size: 2.8rem;
	}
	.landing-faq-item summary {
		font-size: 1.02rem;
		padding: 16px 18px;
	}
	.landing-faq-answer {
		margin: 0 18px 18px;
	}
	.series-section {
		padding: 36px 0;
	}
	.series-head {
		padding: 40px 0 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html:has(> body.landing-body),
	html:has(> body.marketing-legal-body) {
		scroll-behavior: auto;
	}
	.landing-body *,
	.landing-body *::before,
	.landing-body *::after,
	.marketing-legal-body *,
	.marketing-legal-body *::before,
	.marketing-legal-body *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* ---------------- Score tooltip ---------------- */

.score-tip {
	position: relative;
	cursor: help;
}

.score-tip::after {
	content: attr(data-games);
	position: absolute;
	top: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	background: var(--lt-ink);
	color: var(--lt-surface);
	padding: 5px 10px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s;
	z-index: 100001;
}

.matrix tbody tr:last-child .score-tip::after {
	top: auto;
	bottom: calc(100% + 6px);
}

.score-tip:hover::after {
	opacity: 1;
}

/* ---------------- Modal view mode ---------------- */

.inline {
	display: inline-block;
}

.tag.small {
	padding: 1px 6px;
	font-size: 11px;
}

.view-mode .mode-body {
	opacity: 0.75;
}

/* ---------------- Overview filters ---------------- */

.filter-bar {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	flex-wrap: wrap;
}

.filter-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.filter-group label {
	font-size: 12px;
	color: var(--lt-muted);
	font-weight: 500;
}

.filter-bar input[type="search"] {
	min-width: 220px;
}

.filter-bar input[type="date"] {
	min-width: 150px;
}

/* ---------------- QTTR / live TTR (DTTR) ---------------- */

.ttr-live {
	font-weight: 700;
	color: var(--lt-ink);
}

.delta {
	font-size: 11px;
	font-weight: 700;
	margin-left: 2px;
	padding: 0 4px;
	border-radius: 4px;
}

.delta.up {
	color: #15803d;
}

.delta.down {
	color: #b91c1c;
}

.inline-form {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex-wrap: nowrap;
}

.inline-form .inline-input {
	padding: 2px 4px;
	font-size: 12px;
	border: 1px solid var(--border, #ccc);
	border-radius: 4px;
}

.inline-form .hint {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 11px;
	color: var(--lt-muted, #888);
}

.inline-form .hint input[type="checkbox"] {
	margin: 0;
}

.muted {
	color: var(--lt-muted, #888);
}

/* Live & QR admin settings */

.live-settings-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.player-link-list {
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: var(--lt-line);
	border: 1px solid var(--lt-line);
	border-radius: 9px;
	overflow: hidden;
	margin-top: 12px;
}

.player-link-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	background: var(--lt-surface);
	flex-wrap: wrap;
}

.player-link-row.empty {
	justify-content: center;
	padding: 14px;
}

.player-link-name {
	font-weight: 600;
	font-size: 13.5px;
}

.player-link-name-button {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--lt-accent);
	padding: 0;
	cursor: pointer;
	text-align: left;
}

.player-link-name-button:hover,
.player-link-name-button:focus-visible {
	text-decoration: underline;
}

.player-link-path {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 12px;
	color: var(--lt-muted);
	overflow-wrap: anywhere;
}

.player-share-row {
	display: grid;
	grid-template-columns: 74px 1fr;
	gap: 12px;
	align-items: center;
}

.player-share-qr {
	display: grid;
	place-items: center;
	padding: 6px;
	border: 1px solid var(--lt-line);
	border-radius: 12px;
	background: #fff;
}

.player-share-qr .share-qr {
	max-width: 58px;
}

.qr-image-button {
	appearance: none;
	border: 0;
	background: transparent;
	padding: 0;
	cursor: pointer;
	display: grid;
	place-items: center;
}

.qr-image-button:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--lt-accent) 55%, #fff);
	outline-offset: 4px;
	border-radius: 10px;
}

.player-share-main {
	min-width: 0;
}

.player-share-actions {
	margin-top: 8px;
}

@media (max-width: 760px) {
	.player-share-row {
		grid-template-columns: 58px 1fr;
	}
	.player-share-qr .share-qr {
		max-width: 46px;
	}
}

.share-center-panel {
	display: grid;
	grid-template-columns: minmax(120px, 180px) 1fr;
	gap: 18px;
	align-items: start;
	margin-top: 16px;
}

.share-qr-frame {
	display: grid;
	place-items: center;
	min-height: 148px;
	padding: 12px;
	border: 1px solid var(--lt-line);
	border-radius: 18px;
	background: #fff;
}

.share-qr {
	width: 100%;
	max-width: 160px;
	height: auto;
	display: block;
}

.share-center-copy {
	min-width: 0;
}

.share-label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--lt-muted);
	margin-bottom: 6px;
}

.share-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.share-message {
	margin: 12px 0 0;
	padding: 10px 12px;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	border-radius: 12px;
	background: var(--lt-bg);
	color: var(--lt-ink);
	font-size: 13px;
}

@media (max-width: 760px) {
	.share-center-panel {
		grid-template-columns: 1fr;
	}
	.share-qr {
		max-width: 220px;
	}
}

/* Printable player-link cards */

.qr-print-body {
	margin: 0;
	padding: 24px;
	background: #fff;
	color: #111;
	font-family:
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
		sans-serif;
	font-size: 13px;
	line-height: 1.4;
}

.qr-print-header {
	text-align: center;
	margin-bottom: 24px;
}

.qr-print-header h1 {
	margin: 0 0 6px;
	font-size: 24px;
	font-weight: 800;
}

.qr-print-header p {
	margin: 0;
	color: #555;
	font-size: 13px;
}

.qr-print-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
	max-width: 1200px;
	margin: 0 auto;
}

.qr-print-card {
	background: #fff;
	border: 1.5px solid #111;
	border-radius: 8px;
	padding: 14px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	break-inside: avoid;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.qr-print-name {
	font-size: 16px;
	font-weight: 700;
	color: #111;
}

.qr-print-tournament {
	font-size: 11px;
	color: #64748b;
	margin-bottom: 4px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.qr-print-code {
	display: grid;
	place-items: center;
	margin: 10px 0;
}

.qr-print-code .share-qr {
	width: 132px;
	max-width: 100%;
	height: auto;
}

.qr-print-url {
	margin: 0;
	padding: 10px;
	background: #f4f4f5;
	border: 1px solid #d4d4d8;
	border-radius: 6px;
	overflow-wrap: break-word;
	word-break: break-all;
}

.qr-print-url code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 11.5px;
	color: #111;
}

.qr-print-hint {
	font-size: 11px;
	color: #555;
}

@media print {
	.qr-print-body {
		padding: 0;
		background: #fff;
		color: #000;
	}
	.qr-print-card {
		box-shadow: none;
		border-color: #000;
		padding: 10px;
	}
	.qr-print-url {
		background: #fff;
		border-color: #000;
	}
	.qr-print-url code {
		color: #000;
	}
	.qr-print-hint {
		color: #333;
	}
}

/* ========================================================================== 
   Owner console ("Ultimate" admin shell). Scoped rules reusing existing tokens.
   --surface is mapped to the design-system --pane token (no duplicate colors).
   ========================================================================== */
.admin-shell {
	min-height: 100dvh;
	display: grid;
	grid-template-columns: 62px 1fr;
	background: var(--canvas);
}
.admin-rail {
	background: var(--pane);
	border-right: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 8px 6px;
	gap: 4px;
}
.admin-rail-link {
	width: 100%;
	min-height: 44px;
	border-radius: var(--r8);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 6px 4px;
	color: var(--muted);
	font-size: 10px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	line-height: 1.1;
}
.admin-rail-link svg {
	width: 19px;
	height: 19px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.admin-rail-link .rl {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	text-align: center;
}
.admin-rail-link:hover {
	background: var(--canvas);
	color: var(--ink);
}
.admin-rail-link.active {
	background: var(--accent-soft);
	color: var(--accent-ink);
}
.admin-rail .spacer {
	flex: 1;
}
/* The desktop rail foot reuses the global .apprail-foot/.apprail-btn/.usermenu
   tokens (defined once above) so the owner console shares the player shell's
   theme toggle + user menu instead of a parallel system. */
.admin-workspace {
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.admin-strip {
	min-height: 48px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 16px;
	background: var(--pane);
	border-bottom: 1px solid var(--border);
}
.admin-strip .eyebrow {
	display: block;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--faint);
}
.admin-strip strong {
	font-size: 15px;
}
.admin-strip .owner-scope {
	color: var(--accent-ink);
	background: var(--accent-soft);
	border-radius: var(--r8);
	padding: 4px 8px;
	font-size: 11px;
	font-weight: 700;
}
.admin-strip .right {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 10px;
}
.admin-strip .btn {
	margin-left: auto;
}
.admin-main {
	min-width: 0;
	padding: 16px;
}
.admin-main h1 {
	margin: 0 0 4px;
	font-size: 22px;
}
.admin-main > div > header p {
	margin: 0 0 16px;
	color: var(--muted);
}
.admin-metrics {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	background: var(--pane);
	border: 1px solid var(--border);
	border-radius: var(--r12);
}
.admin-metrics > div {
	padding: 12px;
	border-right: 1px solid var(--border);
}
.admin-metrics > div:last-child {
	border-right: 0;
}
.admin-metrics > div strong {
	display: block;
	font-size: 22px;
}
.admin-metrics > div span {
	display: block;
	font-size: 11px;
	color: var(--muted);
}
.admin-section {
	margin-top: 24px;
	background: var(--pane);
	border: 1px solid var(--border);
	border-radius: var(--r12);
}
.admin-section-title {
	margin: 0;
	padding: 12px 16px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--faint);
	border-bottom: 1px solid var(--border);
}
.admin-rows {
	list-style: none;
	margin: 0;
	padding: 0;
}
.admin-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 16px;
	border-bottom: 1px solid var(--border);
}
.admin-row:last-child {
	border-bottom: 0;
}
.admin-row-title {
	font-weight: 700;
}
.admin-row-meta {
	color: var(--muted);
	font-size: 12px;
}
.admin-row.empty {
	color: var(--faint);
	justify-content: center;
	font-style: italic;
}
.admin-tabbar {
	display: none;
}
@media (max-width: 768px) {
	/* Block flow with a pinned, fixed bottom tabbar. The tabbar is taken out of
     flow so the shell reserves space for it (tabbar height + safe-area inset)
     and content is never hidden behind the navigation. */
	.admin-shell {
		display: block;
		padding-bottom: calc(64px + env(safe-area-inset-bottom));
	}
	.admin-rail {
		display: none;
	}
	.admin-strip {
		min-height: 44px;
		padding: 0 12px;
	}
	.admin-strip .owner-scope {
		max-width: 110px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.admin-main {
		padding: 12px;
	}
	.admin-tabbar {
		position: fixed;
		inset: auto 0 0;
		z-index: 70;
		display: flex;
		justify-content: space-around;
		min-height: 58px;
		padding: 6px;
		padding-bottom: env(safe-area-inset-bottom);
		background: var(--pane);
		border-top: 1px solid var(--border);
	}
	.admin-tabbar-link {
		color: var(--muted);
		font-size: 11px;
		font-weight: 700;
		text-decoration: none;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2px;
		padding: 6px 10px;
		border-radius: var(--r8);
	}
	.admin-tabbar-link svg {
		width: 20px;
		height: 20px;
		stroke: currentColor;
		fill: none;
		stroke-width: 1.7;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
	.admin-tabbar-link .tl {
		font-size: 10px;
		font-weight: 600;
	}
	.admin-tabbar-link.active {
		color: var(--accent-ink);
		background: var(--accent-soft);
	}
	/* Mobile master-detail: one pane at a time. A selected detail hides the
     list; an unselected detail (the empty placeholder) is hidden so only the
     list renders. Touch targets keep the 8px rhythm and 44px+ heights. */
	.admin-master-detail {
		display: block;
	}
	.admin-list-pane.detail-selected {
		display: none;
	}
	.admin-detail-pane:not(.selected) {
		display: none;
	}
	.admin-metrics {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.admin-metrics > div:nth-child(3n) {
		border-right: 0;
	}
}
/* Phone-width confirmation modal action targets stay >=44px tall so they remain
   usable touch targets at 390px. Scoped to the admin shell; the app-wide .btn
   sizing is untouched on player/public surfaces. */
@media (max-width: 480px) {
	.admin-shell .modal-actions .btn {
		min-height: 44px;
	}
}

/* ---------- Owner console: user master-detail (Task 6) --------------------
   Token-based rules reusing the Ultimate palette. One hairline separates the
   two panes and the rows; no row shadows and no card-in-card nesting.
   Desktop keeps a searchable collection beside a detail pane; at and below the
   shared 1100px breakpoint the panes stack so collection/detail become
   separate screens on tablet and mobile.
   ------------------------------------------------------------------------ */
.admin-master-detail {
	display: grid;
	grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}
.admin-list-pane {
	background: var(--pane);
	border: 1px solid var(--border);
	border-radius: var(--r12);
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.admin-list-search {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px;
	border-bottom: 1px solid var(--border);
}
.admin-list-search input[type="search"] {
	flex: 1 1 160px;
	min-width: 0;
	border: 1px solid var(--border);
	border-radius: var(--r8);
	padding: 7px 10px;
	background: var(--canvas);
	color: var(--ink);
}
.admin-list-search select {
	border: 1px solid var(--border);
	border-radius: var(--r8);
	padding: 7px 8px;
	background: var(--canvas);
	color: var(--ink);
}
.admin-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.admin-list-row {
	border-bottom: 1px solid var(--border);
}
.admin-list-row:last-child {
	border-bottom: 0;
}
.admin-list-row-link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	gap: 2px 12px;
	padding: 10px 12px;
	text-decoration: none;
	color: var(--ink);
}
.admin-list-row-link:hover {
	background: var(--canvas);
}
.admin-list-row-title {
	grid-column: 1;
	grid-row: 1;
	font-weight: 700;
}
.admin-list-row-meta {
	grid-column: 1;
	grid-row: 2;
	color: var(--muted);
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.admin-list-row .admin-status {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
}
.admin-list-row.active > .admin-list-row-link {
	background: var(--accent-soft);
	color: var(--accent-ink);
}
.admin-list-row.active > .admin-list-row-link .admin-list-row-meta {
	color: var(--accent-ink);
	opacity: 0.85;
}
.admin-list-row.empty {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 12px;
	color: var(--faint);
	font-style: italic;
}
.admin-reset {
	color: var(--accent-ink);
	font-style: normal;
	font-weight: 700;
	text-decoration: none;
}
.admin-reset:hover {
	text-decoration: underline;
}
.admin-status {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 700;
	border-radius: var(--r8);
	padding: 3px 8px;
	background: var(--canvas);
	color: var(--muted);
	border: 1px solid var(--border);
}
.admin-status.active {
	color: var(--accent-ink);
	background: var(--accent-soft);
	border-color: transparent;
}
.admin-status.suspended {
	color: var(--loss-ink);
	background: var(--loss-soft);
	border-color: transparent;
}
.admin-status.finished {
	color: var(--faint);
	background: var(--canvas);
}
.admin-status.running {
	color: var(--accent-ink);
	background: var(--accent-soft);
	border-color: transparent;
}
.admin-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 12px;
	border-top: 1px solid var(--border);
}
.admin-page-link {
	color: var(--accent-ink);
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	border-radius: var(--r8);
	padding: 6px 10px;
}
.admin-page-link:hover {
	background: var(--accent-soft);
}
.admin-page-link[aria-disabled="true"] {
	color: var(--faint);
	pointer-events: none;
}
.admin-page-info {
	color: var(--muted);
	font-size: 12px;
}
.admin-detail-pane {
	background: var(--pane);
	border: 1px solid var(--border);
	border-radius: var(--r12);
	padding: 16px;
	min-width: 0;
}
.admin-detail-empty {
	display: grid;
	place-items: center;
	text-align: center;
	min-height: 200px;
}
.admin-detail-placeholder {
	color: var(--faint);
	margin: 0;
}
.admin-detail-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}
.admin-back {
	color: var(--accent-ink);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}
.admin-back:hover {
	text-decoration: underline;
}
.admin-detail-title {
	margin: 0;
	font-size: 18px;
}
.admin-facts {
	display: grid;
	grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
	gap: 6px 16px;
	margin: 0 0 20px;
}
.admin-facts dt {
	color: var(--faint);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.admin-facts dd {
	margin: 0;
	font-weight: 600;
	word-break: break-word;
}
.admin-detail-block {
	margin-bottom: 20px;
}
.admin-detail-block-title {
	margin: 0 0 8px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--faint);
}
.admin-detail-rows {
	list-style: none;
	margin: 0 0 4px;
	padding: 0;
	border-top: 1px solid var(--border);
}
.admin-detail-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--border);
}
.admin-detail-row:last-child {
	border-bottom: 0;
}
.admin-detail-row-title {
	font-weight: 700;
}
.admin-detail-row-meta {
	color: var(--muted);
	font-size: 12px;
}
.admin-empty-note {
	color: var(--faint);
	font-style: italic;
	margin: 0;
}
.admin-user-action {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--border);
}
.admin-owner-notice {
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
}
.admin-owner-notice p {
	margin: 0;
	color: var(--muted);
	font-size: 13px;
}
@media (max-width: 1100px) {
	/* Tablet: keep the collection list usable at a compact width instead of
     stacking fully (no additional breakpoint; the 768px rule takes over below). */
	.admin-master-detail {
		grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
	}
}
@media (max-width: 768px) {
	.admin-list-row-link {
		grid-template-columns: minmax(0, 1fr) auto;
	}
	.admin-facts {
		grid-template-columns: 1fr;
	}
	.admin-facts dt {
		margin-top: 8px;
	}
	.admin-facts dt:first-child {
		margin-top: 0;
	}
}

/* ---------- Owner console: tournament danger-zone + guarded delete (Task 7) -
   The Gefahrenzone block frames the read-only detail with a visually distinct
   destructive action. The modal error keeps the same loss palette used by the
   suspend/reactivate confirmation. The impact summary is plain prose so it
   stays legible without card-in-card nesting.
   ------------------------------------------------------------------------ */
.admin-danger-zone {
	margin-top: 8px;
	padding-top: 16px;
	border-top: 1px solid var(--loss-soft);
}
.admin-danger-note {
	margin: 0 0 12px;
	color: var(--muted);
	font-size: 13px;
}
.modal-error {
	margin: 8px 0 0;
	color: var(--loss-ink);
	background: var(--loss-soft);
	border-radius: var(--r8);
	padding: 8px 10px;
	font-size: 13px;
	font-weight: 600;
}
.modal-box label[for$="-name"] {
	display: block;
	margin: 12px 0 4px;
	font-size: 13px;
	font-weight: 600;
}
.modal-box input[name="confirmation_name"] {
	width: 100%;
	border: 1px solid var(--border);
	border-radius: var(--r8);
	padding: 8px 10px;
	background: var(--canvas);
	color: var(--ink);
}