:root {
			--ink: #121936;
			--muted: #7b8196;
			--purple: #6d35e8;
			--purple-2: #8b5cf6;
			--soft: #f7f4ff;
			--line: #e8e2fb;
			--card: rgba(255, 255, 255, .86);
			--shadow: 0 18px 42px rgba(80, 48, 145, .12);
			--radius: 14px;
			--font: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, sans-serif;
		}
		* { box-sizing: border-box; }
		html, body {
			width: 100%;
			max-width: 100%;
			overflow-x: hidden;
		}
		body {
			margin: 0;
			font-family: var(--font);
			color: var(--ink);
			background:
				radial-gradient(circle at 8% 18%, rgba(109,53,232,.12), transparent 28%),
				radial-gradient(circle at 90% 12%, rgba(139,92,246,.12), transparent 24%),
				linear-gradient(180deg, #fbfaff 0%, #fff 48%, #fbfaff 100%);
		}
		a { color: inherit; text-decoration: none; }
		button, input, select { font: inherit; max-width: 100%; }
		.shell { width: min(1510px, calc(100% - 48px)); margin: 0 auto; }
		.topbar {
			position: sticky;
			top: 0;
			z-index: 20;
			background: rgba(255,255,255,.9);
			border-bottom: 1px solid rgba(124,97,185,.14);
			backdrop-filter: blur(16px);
		}
		.nav {
			height: 78px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 24px;
		}
		.brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
		.logo {
			width: 58px;
			height: 58px;
			border-radius: 50%;
			object-fit: contain;
			background: #fff;
			box-shadow: 0 8px 22px rgba(13, 20, 38, .1);
		}
		.brand h1 { margin: 0; font-size: 22px; color: #4f28c9; letter-spacing: -.03em; }
		.brand p { margin: 5px 0 0; color: var(--muted); font-weight: 600; font-size: 13px; }
		.actions { display: flex; align-items: center; gap: 22px; }
		.icon {
			width: 42px;
			height: 42px;
			border: 0;
			background: transparent;
			color: #151a2f;
			display: grid;
			place-items: center;
			position: relative;
			cursor: pointer;
		}
		.badge-dot {
			position: absolute;
			top: 5px;
			right: 4px;
			width: 18px;
			height: 18px;
			border-radius: 50%;
			background: var(--purple);
			color: #fff;
			font-size: 10px;
			display: grid;
			place-items: center;
			font-weight: 800;
		}
		.avatar { display: flex; align-items: center; gap: 9px; }
		.avatar span {
			width: 46px;
			height: 46px;
			border-radius: 50%;
			background: linear-gradient(135deg, #e9e2ff, #fff);
			display: grid;
			place-items: center;
			font-size: 22px;
		}
		.qr-btn {
			min-height: 48px;
			padding: 0 24px;
			border: 1px solid rgba(109,53,232,.5);
			background: #fff;
			color: var(--purple);
			border-radius: 8px;
			font-weight: 800;
			display: inline-flex;
			align-items: center;
			gap: 10px;
		}
		.page-head {
			display: grid;
			grid-template-columns: 1fr 760px;
			gap: 44px;
			align-items: end;
			padding: 38px 0 28px;
		}
		.title h2 {
			margin: 0;
			font-size: clamp(34px, 4vw, 52px);
			line-height: 1.08;
			letter-spacing: -.045em;
		}
		.title h2 span { color: var(--purple); }
		.title p {
			max-width: 620px;
			color: var(--muted);
			font-size: 17px;
			line-height: 1.8;
			margin: 14px 0 0;
		}
		.stats {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 14px;
		}
		.stat {
			min-height: 92px;
			background: var(--card);
			border: 1px solid rgba(109,53,232,.12);
			border-radius: 12px;
			box-shadow: var(--shadow);
			padding: 20px;
			display: flex;
			align-items: center;
			gap: 16px;
		}
		.stat-icon {
			width: 48px;
			height: 48px;
			border-radius: 50%;
			background: #eee8ff;
			color: var(--purple);
			display: grid;
			place-items: center;
			font-size: 22px;
			font-weight: 900;
		}
		.stat strong { display: block; font-size: 22px; margin-bottom: 4px; }
		.stat span { color: var(--muted); font-size: 13px; font-weight: 600; }
		.panel {
			background: rgba(255,255,255,.82);
			border: 1px solid rgba(109,53,232,.14);
			border-radius: var(--radius);
			box-shadow: var(--shadow);
			padding: 20px;
			margin-bottom: 36px;
		}
		.toolbar {
			display: grid;
			grid-template-columns: 290px 310px 180px 190px 190px 150px;
			gap: 14px;
			align-items: center;
			margin-bottom: 18px;
		}
		.search, .select, .refresh, .chip {
			min-height: 48px;
			border: 1px solid var(--line);
			background: #fff;
			border-radius: 8px;
			color: #42495d;
			font-weight: 700;
		}
		.search {
			display: flex;
			align-items: center;
			padding: 0 14px;
			gap: 10px;
		}
		.search input {
			border: 0;
			outline: 0;
			flex: 1;
			color: var(--ink);
		}
		.sport-switch {
			height: 48px;
			background: #fff;
			border: 1px solid var(--line);
			border-radius: 8px;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			padding: 4px;
			gap: 4px;
		}
		.chip {
			border: 0;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
		}
		.chip.active {
			background: linear-gradient(135deg, var(--purple), #5b22d6);
			color: #fff;
			box-shadow: 0 10px 22px rgba(109,53,232,.25);
		}
		.select {
			padding: 0 14px;
			outline: 0;
		}
		.refresh {
			border: 0;
			color: #fff;
			background: linear-gradient(135deg, var(--purple), #5725d6);
			box-shadow: 0 12px 24px rgba(109,53,232,.25);
			cursor: pointer;
		}
		.featured {
			display: grid;
			grid-template-columns: 305px 1fr 280px;
			gap: 26px;
			align-items: center;
			min-height: 164px;
			padding: 14px;
			border: 1px solid rgba(109,53,232,.16);
			border-radius: 13px;
			background:
				linear-gradient(105deg, rgba(255,255,255,.98), rgba(248,245,255,.9)),
				radial-gradient(circle at 72% 70%, rgba(109,53,232,.16), transparent 38%);
		}
		.hero-thumb, .court-thumb {
			position: relative;
			overflow: hidden;
			background: #201047;
		}
		.hero-thumb {
			height: 144px;
			border-radius: 8px;
		}
		.hero-thumb img, .court-thumb img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			filter: saturate(1.08) hue-rotate(10deg);
		}
		.hero-thumb::after, .court-thumb::after {
			content: "";
			position: absolute;
			inset: 0;
			background: linear-gradient(0deg, rgba(27,9,62,.34), transparent 62%);
		}
		.new-tag {
			position: absolute;
			top: 10px;
			left: 10px;
			z-index: 2;
			background: var(--purple);
			color: #fff;
			border-radius: 6px;
			padding: 5px 10px;
			font-size: 12px;
			font-weight: 800;
		}
		.play {
			position: absolute;
			left: 50%;
			top: 50%;
			z-index: 2;
			width: 58px;
			height: 58px;
			border-radius: 50%;
			transform: translate(-50%, -50%);
			border: 3px solid #fff;
			background: rgba(0,0,0,.24);
			color: #fff;
			display: grid;
			place-items: center;
			font-size: 20px;
		}
		.featured-copy small {
			color: var(--purple);
			font-weight: 900;
			font-size: 15px;
		}
		.featured-copy h3 {
			margin: 13px 0 10px;
			font-size: 22px;
			letter-spacing: -.03em;
		}
		.pill {
			display: inline-flex;
			min-height: 24px;
			align-items: center;
			padding: 0 10px;
			border-radius: 5px;
			background: #ece7ff;
			color: #5a35cf;
			font-size: 11px;
			font-weight: 900;
			text-transform: uppercase;
			margin-left: 8px;
		}
		.meta {
			display: flex;
			flex-wrap: wrap;
			gap: 22px;
			color: var(--muted);
			font-size: 14px;
			font-weight: 600;
			margin-bottom: 13px;
		}
		.featured-copy p { margin: 0; color: var(--muted); }
		.feature-actions {
			display: grid;
			gap: 10px;
		}
		.btn {
			min-height: 44px;
			border-radius: 7px;
			border: 1px solid rgba(109,53,232,.5);
			font-weight: 900;
			cursor: pointer;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 9px;
		}
		.btn-primary {
			color: #fff;
			border: 0;
			background: linear-gradient(135deg, var(--purple), #5725d6);
			box-shadow: 0 12px 24px rgba(109,53,232,.24);
		}
		.btn-outline {
			color: var(--purple);
			background: #fff;
		}
		.list-head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 26px 0 14px;
		}
		.list-head h3 { margin: 0; font-size: 18px; }
		.view-toggle {
			display: flex;
			gap: 6px;
			padding: 4px;
			border-radius: 7px;
			border: 1px solid var(--line);
			background: #fff;
		}
		.view-toggle button {
			min-height: 34px;
			padding: 0 12px;
			border: 0;
			border-radius: 6px;
			background: transparent;
			color: var(--muted);
			font-weight: 800;
		}
		.view-toggle .active { color: var(--purple); background: #f2ecff; }
		.court-grid {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			gap: 18px;
		}
		.court-card {
			border: 1px solid rgba(109,53,232,.13);
			border-radius: 11px;
			background: #fff;
			padding: 12px;
			box-shadow: 0 12px 28px rgba(80,48,145,.06);
		}
		.court-top {
			display: grid;
			grid-template-columns: 82px 1fr 22px;
			gap: 12px;
			align-items: start;
		}
		.court-thumb {
			width: 82px;
			height: 82px;
			border-radius: 8px;
		}
		.sport-label {
			display: inline-flex;
			align-items: center;
			min-height: 21px;
			padding: 0 9px;
			border-radius: 5px;
			background: #ece7ff;
			color: #6040da;
			font-size: 10px;
			font-weight: 900;
			text-transform: uppercase;
		}
		.court-card h4 {
			margin: 10px 0 8px;
			font-size: 16px;
			letter-spacing: -.02em;
		}
		.court-card p {
			margin: 0;
			color: var(--muted);
			font-size: 12px;
			line-height: 1.7;
			font-weight: 600;
		}
		.card-actions {
			display: grid;
			grid-template-columns: 1fr 44px;
			gap: 8px;
			margin-top: 12px;
		}
		.card-actions .btn {
			min-height: 34px;
			font-size: 12px;
		}
		.empty-help {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 12px;
			color: var(--muted);
			padding: 28px 0 8px;
			font-size: 13px;
		}
		.empty-help a { color: var(--purple); font-weight: 900; }
		@media (max-width: 1260px) {
			.page-head { grid-template-columns: 1fr; }
			.stats { grid-template-columns: repeat(2, 1fr); }
			.toolbar { grid-template-columns: 1fr 1fr; }
			.featured { grid-template-columns: 260px 1fr; }
			.feature-actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
			.court-grid { grid-template-columns: repeat(3, 1fr); }
		}
		@media (max-width: 760px) {
			.shell { width: min(100% - 28px, 1510px); }
			.nav { height: auto; padding: 12px 0; gap: 12px; }
			.actions { gap: 8px; }
			.actions .icon, .avatar { display: none; }
			.qr-btn { min-height: 42px; padding: 0 10px; font-size: 12px; }
			.logo { width: 48px; height: 48px; }
			.brand h1 { font-size: 18px; }
			.brand p { font-size: 11px; }
			.page-head { padding-top: 26px; }
			.stats, .toolbar, .featured, .feature-actions, .court-grid { grid-template-columns: 1fr; }
			.stat { min-height: 78px; padding: 15px; }
			.panel { padding: 14px; }
			.sport-switch { grid-template-columns: 1fr; }
			.featured { gap: 16px; }
			.hero-thumb { height: 190px; }
			.list-head { align-items: flex-start; flex-direction: column; }
			.court-top { grid-template-columns: 76px 1fr; }
			.court-top > span { display: none; }
			.court-thumb { width: 76px; height: 76px; }
		}