* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		body {
			background-color: #0A0F14;
			font-family: 'Inter', sans-serif;
			color: #E8EDF3;
			font-size: 14px;
			line-height: 1.4;
		}

		.app {
			max-width: 1400px;
			margin: 0 auto;
			padding: 1.5rem;
		}

		:root {
			--bg: #0A0F14;
			--card: #131923;
			--card-hover: #18202B;
			--border: rgba(255, 255, 255, 0.06);
			--text: #E8EDF3;
			--muted: #7E8D9F;
			--accent: #4A8FE5;
			--accent-glow: rgba(74, 143, 229, 0.2);
			--online: #5DC99C;
			--fresh: #E5B84A;
			--warning-yellow: #F5B041;
			--danger-red: #E67E7E;
			--sponsor-gold: #F5B041;
		}

		.top-row {
			display: flex;
			gap: 1rem;
			margin-bottom: 1.5rem;
			flex-wrap: wrap;
		}

		.quick-filters-panel {
			flex: 2;
			min-width: 280px;
			background: linear-gradient(135deg, rgba(26, 37, 53, 0.8) 0%, rgba(19, 25, 35, 0.9) 100%);
			border: 1px solid rgba(74, 143, 229, 0.3);
			border-radius: 12px;
			padding: 0.8rem 1rem;
			backdrop-filter: blur(4px);
		}

		.creators-panel {
			width: 220px;
			flex-shrink: 0;
			background: linear-gradient(135deg, rgba(26, 37, 53, 0.7) 0%, rgba(19, 25, 35, 0.85) 100%);
			border: 1px solid rgba(74, 143, 229, 0.3);
			border-radius: 12px;
			padding: 0.8rem 1rem;
			backdrop-filter: blur(4px);
			display: flex;
			flex-direction: column;
		}

		.panel-title {
			font-size: 11px;
			font-weight: 800;
			text-transform: uppercase;
			letter-spacing: 0.8px;
			color: #5A7A9F;
			margin-bottom: 0.75rem;
			display: flex;
			align-items: center;
			gap: 0.5rem;
		}

		.quick-filters-panel .panel-title::before {
			content: '⚡';
			font-size: 12px;
		}

		.creators-panel .panel-title {
			justify-content: center;
			color: #5A7A9F;
		}

		.creators-panel .panel-title::before {
			display: none;
		}

		.quick-buttons {
			display: flex;
			flex-wrap: wrap;
			gap: 0.6rem;
		}

		.quick-btn {
			background: linear-gradient(135deg, #1A2535 0%, #131923 100%);
			border: 1px solid rgba(74, 143, 229, 0.5);
			color: #B8D0FF;
			font-size: 11px;
			font-weight: 700;
			text-transform: uppercase;
			padding: 0.4rem 0.8rem;
			border-radius: 6px;
			cursor: pointer;
			transition: 0.2s;
		}

		.quick-btn:hover {
			background: linear-gradient(135deg, #2A3A50 0%, #1A2535 100%);
			border-color: var(--accent);
			color: white;
			transform: translateY(-1px);
		}

		.quick-btn.active {
			background: var(--accent);
			border-color: var(--accent);
			color: #0A0F14;
		}

		.creators-carousel {
			position: relative;
			height: 76px;
			overflow: hidden;
		}

		.creators-track {
			position: relative;
			width: 100%;
			height: 76px;
		}

		.creator-card {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 100%;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background: linear-gradient(135deg, #1A2535 0%, #131923 100%);
			border: 1px solid rgba(74, 143, 229, 0.5);
			border-radius: 8px;
			padding: 0.5rem 0.3rem;
			text-align: center;
			cursor: pointer;
			transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
			opacity: 0;
			transform: scale(0.95);
			pointer-events: none;
			width: 100%;
			will-change: opacity, transform;
		}

		.creator-card.active {
			opacity: 1;
			transform: scale(1);
			pointer-events: auto;
		}

		.creator-card:hover {
			border-color: var(--accent);
		}

		.creator-card.active:hover {
			transform: scale(1);
		}

		.creator-name {
			font-size: 15px;
			font-weight: 800;
			color: var(--text);
			margin-bottom: 0.25rem;
			letter-spacing: 0.3px;
			white-space: nowrap;
			overflow-x: hidden;
			text-overflow: ellipsis;
		}

		.creator-platform {
			font-size: 9px;
			font-weight: 700;
			text-transform: uppercase;
			letter-spacing: 0.4px;
		}

		.creator-card-partner .creator-plus {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 22px;
			height: 22px;
			margin: 0 auto 0.15rem;
			border: 1px dashed rgba(74, 143, 229, 0.45);
			border-radius: 50%;
			font-size: 14px;
			font-weight: 300;
			color: #4A8FE5;
			line-height: 1;
			flex-shrink: 0;
		}

		.creator-card-partner:hover .creator-plus {
			border-color: rgba(74, 143, 229, 0.65);
			color: #6BA3F0;
		}

		.creator-card-partner .creator-name {
			font-size: 11px;
			line-height: 1.2;
			margin-bottom: 0.15rem;
		}

		.creator-card[data-color="0"] {
			border-color: #5A7A9F;
		}

		.creator-card[data-color="0"] .creator-platform {
			color: #5A7A9F;
		}

		.creator-card[data-color="1"] {
			border-color: #7B68AE;
		}

		.creator-card[data-color="1"] .creator-platform {
			color: #7B68AE;
		}

		.creator-card[data-color="2"] {
			border-color: #4A8FE5;
		}

		.creator-card[data-color="2"] .creator-platform {
			color: #4A8FE5;
		}

		.creator-card[data-color="3"] {
			border-color: #5DC99C;
		}

		.creator-card[data-color="3"] .creator-platform {
			color: #5DC99C;
		}

		.creator-card[data-color="4"] {
			border-color: #E5B84A;
		}

		.creator-card[data-color="4"] .creator-platform {
			color: #E5B84A;
		}

		.creator-card[data-color="5"] {
			border-color: #E67E7E;
		}

		.creator-card[data-color="5"] .creator-platform {
			color: #E67E7E;
		}

		.creator-card[data-color="6"] {
			border-color: #6A8DAB;
		}

		.creator-card[data-color="6"] .creator-platform {
			color: #6A8DAB;
		}

		.creator-card[data-color="7"] {
			border-color: #BB8FCE;
		}

		.creator-card[data-color="7"] .creator-platform {
			color: #BB8FCE;
		}

		.creator-card[data-color="8"] {
			border-color: #F5B041;
		}

		.creator-card[data-color="8"] .creator-platform {
			color: #F5B041;
		}

		.creator-card[data-color="9"] {
			border-color: #8BB8FF;
		}

		.creator-card[data-color="9"] .creator-platform {
			color: #8BB8FF;
		}

		.search-row {
			margin-bottom: 1rem;
		}

		.search-input {
			width: 100%;
			background: var(--card);
			border: 1px solid var(--border);
			border-radius: 5px;
			padding: 0.8rem 1rem;
			font-family: 'Inter', sans-serif;
			font-size: 14px;
			color: var(--text);
		}

		.search-input:focus {
			outline: none;
			border-color: var(--accent);
			box-shadow: 0 0 0 2px var(--accent-glow);
		}

		.control-bar {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 0.5rem;
			margin-bottom: 0.75rem;
			background: rgba(19, 25, 35, 0.5);
			padding: 0.5rem 0.75rem;
			border-radius: 6px;
			border: 1px solid var(--border);
		}

		.filter-pill {
			background: var(--card);
			border: 1px solid var(--border);
			color: var(--text);
			font-size: 11px;
			font-weight: 600;
			padding: 0.4rem 0.9rem;
			border-radius: 5px;
			cursor: pointer;
			white-space: nowrap;
			text-transform: uppercase;
		}

		.filter-pill:hover {
			border-color: var(--accent);
			color: var(--accent);
			background: var(--card-hover);
		}

		.filter-pill.active {
			background: var(--accent);
			border-color: var(--accent);
			color: #0A0F14;
		}

		/* ТУМБЛЕР в стиле filter-pill с анимацией скольжения */
		.view-toggle {
			display: inline-flex;
			background: var(--card);
			border: 1px solid var(--border);
			border-radius: 5px;
			padding: 0;
			position: relative;
		}

		.toggle-option {
			background: transparent;
			border: none;
			color: var(--muted);
			font-size: 11px;
			font-weight: 600;
			text-transform: uppercase;
			padding: 0.4rem 0.9rem;
			cursor: pointer;
			transition: color 0.2s ease;
			z-index: 2;
			position: relative;
		}

		.toggle-option.active {
			color: #0A0F14;
		}

		.toggle-option:not(.active):hover {
			color: var(--accent);
		}

		.toggle-slider {
			position: absolute;
			top: 0;
			bottom: 0;
			width: 50%;
			background: var(--accent);
			border-radius: 5px;
			transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
			z-index: 1;
		}

		.reset-btn {
			background: rgba(230, 126, 126, 0.15);
			border: 1px solid rgba(230, 126, 126, 0.4);
			color: #E67E7E;
			font-size: 11px;
			font-weight: 500;
			padding: 0.4rem 0.9rem;
			border-radius: 5px;
			cursor: pointer;
			margin-left: auto;
		}

		.reset-btn:hover {
			background: rgba(230, 126, 126, 0.3);
			border-color: #E67E7E;
			color: #FF9E9E;
		}

		.active-filters {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 0.5rem;
			margin-bottom: 1.5rem;
			padding: 0.4rem 0;
			min-height: 42px;
		}

		.filter-tag {
			display: inline-flex;
			align-items: center;
			gap: 0.4rem;
			background: rgba(74, 143, 229, 0.15);
			border: 1px solid rgba(74, 143, 229, 0.4);
			border-radius: 5px;
			padding: 0.2rem 0.6rem 0.2rem 0.8rem;
			font-size: 11px;
			font-weight: 500;
			color: #B8D0FF;
			cursor: pointer;
		}

		.filter-tag:hover {
			background: rgba(74, 143, 229, 0.3);
			border-color: var(--accent);
		}

		.filter-tag .remove {
			font-size: 12px;
			font-weight: 700;
			color: #7E8D9F;
			background: none;
			border: none;
			padding: 0 2px;
			cursor: pointer;
		}

		.filter-tag .remove:hover {
			color: #E67E7E;
		}

		.dropdown-container {
			position: relative;
			display: inline-block;
		}

		.dropdown-panel {
			position: absolute;
			top: 100%;
			left: 0;
			background: var(--card);
			border: 1px solid var(--border);
			border-radius: 5px;
			padding: 0.5rem;
			min-width: 150px;
			z-index: 100;
			margin-top: 0.3rem;
			display: none;
			flex-direction: column;
			gap: 0.25rem;
			box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
		}

		.dropdown-panel.open {
			display: flex;
		}

		.dropdown-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 1rem;
			padding: 0.4rem 0.8rem;
			font-size: 11px;
			color: var(--muted);
			cursor: pointer;
			border-radius: 4px;
		}

		.dropdown-item .item-label {
			flex: 1;
		}

		.dropdown-item .item-count {
			font-size: 10px;
			font-weight: 600;
			color: var(--muted);
			min-width: 1.2em;
			text-align: right;
			opacity: 0.85;
		}

		.dropdown-item:hover {
			background: rgba(74, 143, 229, 0.1);
			color: var(--accent);
		}

		.dropdown-item:hover .item-count {
			color: var(--accent);
		}

		.dropdown-item.active {
			color: var(--accent);
			background: rgba(74, 143, 229, 0.08);
		}

		.dropdown-item.active .item-count {
			color: var(--accent);
		}

		.dropdown-item.disabled {
			opacity: 0.45;
			cursor: default;
		}

		.dropdown-item.disabled:hover {
			background: transparent;
			color: var(--muted);
		}

		.dropdown-item.disabled .item-count {
			color: #7E8D9F;
		}

		.server-grid {
			display: grid;
			grid-template-columns: repeat(12, 1fr);
			gap: 1rem;
		}

		.server-card {
			background: var(--card);
			border: 1px solid var(--border);
			border-radius: 6px;
			padding: 0.8rem 0.9rem;
			grid-column: span 3;
			display: flex;
			flex-direction: column;
			position: relative;
			min-height: 165px;
		}

		.server-card:hover {
			background: var(--card-hover);
			border-color: var(--accent);
		}

		.sponsor-card {
			border: 1.5px solid var(--sponsor-gold);
			background: linear-gradient(135deg, rgba(26, 37, 53, 0.95) 0%, rgba(19, 25, 35, 1) 100%);
		}

		.sponsor-card:hover {
			border-color: #FFD700;
			box-shadow: 0 0 10px rgba(245, 176, 65, 0.3);
		}

		.server-card--navigable {
			cursor: pointer;
		}

		.server-card-stretch {
			position: absolute;
			inset: 0;
			z-index: 1;
			border-radius: inherit;
		}

		.server-card--navigable .card-name,
		.server-card--navigable .online-row,
		.server-card--navigable .card-badges {
			position: relative;
			z-index: 0;
		}

		.table-row--navigable,
		.sponsor-row--navigable {
			cursor: pointer;
		}

		.table-row--navigable:hover,
		.sponsor-row--navigable:hover {
			background: rgba(245, 176, 65, 0.06);
		}

		.table-name-link {
			color: inherit;
			text-decoration: none;
		}

		.table-name-link:hover {
			color: var(--accent);
			text-decoration: underline;
		}

		.copy-corner {
			position: absolute;
			top: 8px;
			right: 8px;
			width: 22px;
			height: 22px;
			background: transparent;
			border: none;
			cursor: pointer;
			z-index: 2;
		}

		.copy-corner::before {
			content: '';
			position: absolute;
			width: 12px;
			height: 16px;
			border: 1.5px solid #7E8D9F;
			border-radius: 3px;
			top: 2px;
			left: 2px;
			opacity: 0.7;
		}

		.copy-corner::after {
			content: '';
			position: absolute;
			width: 12px;
			height: 16px;
			border: 1.5px solid #9ca3af;
			border-radius: 3px;
			background: #1e293b;
			top: 5px;
			left: 7px;
		}

		.copy-corner:hover::before {
			top: 0;
			left: 0;
			border-color: var(--accent);
		}

		.copy-corner:hover::after {
			top: 6px;
			left: 8px;
			border-color: var(--accent);
			background: #0f172a;
		}

		.copy-corner.copied::after {
			border-color: #5DC99C;
			background: #1a3a2a;
		}

		.copy-corner.copied::before {
			border-color: #5DC99C;
		}

		.card-name {
			font-weight: 600;
			font-size: 0.85rem;
			margin-bottom: 0.4rem;
			padding-right: 24px;
		}

		.online-row {
			display: flex;
			align-items: baseline;
			justify-content: space-between;
			flex-wrap: wrap;
			gap: 0.4rem;
			margin-bottom: 0.5rem;
		}

		.online-slots {
			display: flex;
			align-items: baseline;
			gap: 0.2rem;
		}

		.online-number {
			font-size: 1.2rem;
			font-weight: 700;
		}

		.slots-divider,
		.slots-max {
			font-size: 0.9rem;
			font-weight: 500;
			color: var(--muted);
		}

		.online-normal {
			color: var(--online);
		}

		.online-warning {
			color: var(--warning-yellow);
		}

		.online-danger {
			color: var(--danger-red);
		}

		.wipe-age-inline {
			font-size: 10px;
			font-weight: 700;
			color: var(--fresh);
			background: rgba(229, 184, 74, 0.15);
			padding: 0.15rem 0.5rem;
			border-radius: 4px;
			white-space: nowrap;
			text-transform: uppercase;
		}

		.card-badges {
			display: flex;
			flex-wrap: wrap;
			gap: 0.4rem;
			margin-top: 0.4rem;
			min-height: 55px;
			align-content: flex-start;
		}

		.badge {
			background: linear-gradient(135deg, #1A2535 0%, #131923 100%);
			border: 1px solid rgba(74, 143, 229, 0.5);
			color: #B8D0FF;
			font-size: 9px;
			font-weight: 700;
			padding: 0.2rem 0.6rem;
			border-radius: 5px;
			text-transform: uppercase;
		}

		.badge-region {
			border-color: rgba(74, 143, 229, 0.6);
			color: #8BB8FF;
		}

		.badge-wipe {
			border-color: rgba(229, 184, 74, 0.6);
			color: #E5B84A;
		}

		.badge-rates {
			border-color: rgba(245, 176, 65, 0.6);
			color: #F5B041;
		}

		.badge-limit {
			border-color: rgba(92, 201, 156, 0.6);
			color: #5DC99C;
		}

		.badge-mods {
			border-color: rgba(126, 141, 159, 0.55);
			color: #9EABB8;
		}

		.list-view {
			display: none;
		}

		.list-view.active {
			display: block;
		}

		.server-table {
			width: 100%;
			border-collapse: collapse;
		}

		.server-table th {
			text-align: left;
			padding: 0.6rem 0.4rem;
			font-size: 16.5px;
			font-weight: 600;
			color: var(--muted);
			border-bottom: 1px solid var(--border);
		}

		.server-table td {
			padding: 0.6rem 0.4rem;
			border-bottom: 1px solid var(--border);
			font-size: 18px;
			vertical-align: middle;
		}

		.sponsor-row td:first-child {
			border-left: 2px solid var(--sponsor-gold);
		}

		.sponsor-row .table-name {
			color: var(--sponsor-gold);
			font-weight: 700;
		}

		.table-name {
			font-weight: 500;
		}

		.table-online {
			font-weight: 600;
		}

		.table-wipe-age {
			font-size: 13.5px;
			color: var(--fresh);
			display: inline-block;
			margin-left: 0.3rem;
			background: rgba(229, 184, 74, 0.1);
			padding: 0.1rem 0.3rem;
			border-radius: 4px;
			text-transform: uppercase;
			font-weight: 700;
		}

		.table-badges {
			display: flex;
			gap: 0.3rem;
			flex-wrap: wrap;
		}

		.table-badge {
			background: linear-gradient(135deg, #1A2535 0%, #131923 100%);
			border: 1px solid rgba(74, 143, 229, 0.5);
			border-radius: 5px;
			padding: 0.22rem 0.75rem;
			font-size: 12px;
			font-weight: 600;
			color: #B8D0FF;
			white-space: nowrap;
			text-transform: uppercase;
		}

		.table-badge.badge-mods {
			border-color: rgba(126, 141, 159, 0.55);
			color: #9EABB8;
		}

		.table-copy-icon {
			background: transparent;
			border: none;
			cursor: pointer;
			width: 24px;
			height: 24px;
			position: relative;
		}

		.table-copy-icon::before {
			content: '';
			position: absolute;
			width: 12px;
			height: 16px;
			border: 1.5px solid #7E8D9F;
			border-radius: 3px;
			top: 2px;
			left: 2px;
		}

		.table-copy-icon::after {
			content: '';
			position: absolute;
			width: 12px;
			height: 16px;
			border: 1.5px solid #9ca3af;
			border-radius: 3px;
			background: #1e293b;
			top: 5px;
			left: 7px;
		}

		.table-copy-icon:hover::before {
			top: 0;
			left: 0;
			border-color: var(--accent);
		}

		.table-copy-icon:hover::after {
			top: 6px;
			left: 8px;
			border-color: var(--accent);
		}

		.table-copy-icon.copied::after {
			border-color: #5DC99C;
			background: #1a3a2a;
		}

		@media (max-width: 1000px) {
			.server-card {
				grid-column: span 4;
			}
		}

		@media (max-width: 850px) {
			.control-bar {
				flex-wrap: wrap;
				border-radius: 6px;
				padding: 0.75rem;
			}

			.reset-btn {
				margin-left: 0;
			}

			.server-card {
				grid-column: span 6;
			}

			.top-row {
				flex-direction: column;
			}

			.creators-panel {
				width: 100%;
			}
		}

		@media (max-width: 550px) {
			.server-card {
				grid-column: span 12;
			}
		}

		/* Телефоны и узкие планшеты */
		@media (max-width: 700px) {
			.app {
				padding: 1rem;
				padding-left: max(1rem, env(safe-area-inset-left, 0px));
				padding-right: max(1rem, env(safe-area-inset-right, 0px));
			}

			.search-input {
				font-size: 16px;
				padding: 0.75rem 0.9rem;
			}

			.filter-pill,
			.toggle-option,
			.reset-btn,
			.quick-btn,
			.dropdown-item {
				min-height: 44px;
				-webkit-tap-highlight-color: transparent;
			}

			.filter-pill,
			.toggle-option,
			.reset-btn {
				display: inline-flex;
				align-items: center;
				justify-content: center;
			}

			.control-bar {
				gap: 0.4rem;
				padding: 0.6rem;
			}

			.view-toggle {
				flex: 1 1 100%;
			}

			.view-toggle .toggle-option {
				flex: 1;
				text-align: center;
			}

			.reset-btn {
				margin-left: 0;
				flex: 1 1 auto;
			}

			.quick-buttons {
				gap: 0.45rem;
			}

			.dropdown-panel {
				max-width: min(280px, calc(100vw - 2rem));
			}

			.copy-corner {
				width: 44px;
				height: 44px;
				top: 4px;
				right: 4px;
			}

			.table-copy-icon {
				width: 44px;
				height: 44px;
			}

			.list-view.active {
				overflow-x: auto;
				-webkit-overflow-scrolling: touch;
				margin: 0 calc(-1 * max(1rem, env(safe-area-inset-left, 0px)));
				padding: 0 max(1rem, env(safe-area-inset-left, 0px));
			}

			.server-table {
				min-width: 580px;
			}

			.server-table th {
				font-size: 13px;
			}

			.server-table td {
				font-size: 14px;
			}
		}

		@media (max-width: 400px) {
			.creators-panel {
				width: 100%;
			}

			.filter-pill {
				font-size: 10px;
				padding: 0.4rem 0.65rem;
			}
		}