* {
			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: 1rem 1.25rem 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);
			--fresh: #E5B84A;
			--sponsor-gold: #F5B041;
			--calendar-event: #5DC99C;
			--date-soon: #5DC99C;
			--date-soon-bg: rgba(93, 201, 156, 0.15);
			--date-soon-border: rgba(93, 201, 156, 0.45);
			--date-eternal: #9B8FD9;
			--date-eternal-bg: rgba(155, 143, 217, 0.15);
			--date-eternal-border: rgba(155, 143, 217, 0.45);
			--date-recent: #E5B84A;
			--date-recent-bg: rgba(229, 184, 74, 0.15);
			--date-recent-border: rgba(229, 184, 74, 0.45);
			--date-other: #7E8D9F;
			--date-other-bg: rgba(126, 141, 159, 0.12);
			--date-other-border: rgba(126, 141, 159, 0.35);
			--action-size: 26px;
		}

		.controls-layout {
			display: grid;
			grid-template-columns: 1fr 240px;
			gap: 1rem;
			align-items: stretch;
			margin-bottom: 0.75rem;
		}

		.controls-column {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			gap: 0.65rem;
			min-width: 0;
			min-height: 100%;
		}

		.quick-filters-panel {
			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);
		}

		.calendar-panel {
			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);
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			position: sticky;
			top: 0.5rem;
			align-self: stretch;
		}

		.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;
		}

		.calendar-panel .panel-title {
			margin-bottom: 0;
		}

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

		.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;
		}

		.search-row {
			flex-shrink: 0;
		}

		/* Календарь */
		.calendar-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 0.35rem;
			margin-bottom: 0.4rem;
		}

		.calendar-month-year {
			font-size: 11px;
			font-weight: 700;
			color: var(--text);
			white-space: nowrap;
			margin-bottom: 0.35rem;
		}

		.calendar-nav {
			display: flex;
			gap: 0.2rem;
			flex-shrink: 0;
		}

		.calendar-nav-btn {
			background: var(--card);
			border: 1px solid var(--border);
			color: var(--muted);
			width: 20px;
			height: 20px;
			border-radius: 4px;
			cursor: pointer;
			font-size: 10px;
			line-height: 1;
			transition: all 0.15s;
		}

		.calendar-nav-btn:hover {
			border-color: var(--accent);
			color: var(--accent);
		}

		.calendar-weekdays {
			display: grid;
			grid-template-columns: repeat(7, minmax(0, 1fr));
			text-align: center;
			margin-bottom: 0.25rem;
			gap: 2px;
		}

		.calendar-weekday {
			font-size: 9px;
			font-weight: 600;
			color: var(--muted);
			text-transform: uppercase;
			padding: 0;
			line-height: 1.2;
		}

		.calendar-days {
			display: grid;
			grid-template-columns: repeat(7, minmax(0, 1fr));
			gap: 2px;
		}

		.calendar-day {
			aspect-ratio: 1;
			min-height: 26px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(19, 25, 35, 0.6);
			border-radius: 4px;
			font-size: 10px;
			font-weight: 500;
			color: var(--muted);
			cursor: default;
			transition: all 0.15s;
			position: relative;
		}

		.calendar-day.has-event {
			cursor: pointer;
			color: var(--calendar-event);
			font-weight: 600;
		}

		.calendar-day.has-event:hover {
			background: var(--card-hover);
		}

		.calendar-day.today {
			background: rgba(74, 143, 229, 0.2);
			border: 1px solid var(--accent);
			color: var(--accent);
			font-weight: 700;
		}

		.calendar-day.has-event::after {
			content: '';
			position: absolute;
			bottom: 1px;
			width: 3px;
			height: 3px;
			background: var(--calendar-event);
			border-radius: 50%;
		}

		.calendar-day.other-month {
			opacity: 0.25;
			background: transparent;
		}

		.calendar-day.selected {
			background: rgba(74, 143, 229, 0.25);
			border: 1px solid var(--accent);
			color: var(--accent);
		}

		.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;
			background: rgba(19, 25, 35, 0.5);
			padding: 0.5rem 0.75rem;
			border-radius: 6px;
			border: 1px solid var(--border);
			flex-shrink: 0;
		}

		.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;
		}

		.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: 130px;
			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:hover {
			background: rgba(74, 143, 229, 0.1);
			color: var(--accent);
		}

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

		.dropdown-item-label {
			flex: 1;
			min-width: 0;
		}

		.dropdown-item-count {
			font-size: 10px;
			font-weight: 700;
			color: var(--muted);
			min-width: 1.25rem;
			text-align: right;
			font-variant-numeric: tabular-nums;
		}

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

		.dropdown-item.disabled {
			opacity: 0.35;
			cursor: not-allowed;
			pointer-events: none;
		}

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

		.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: 1rem;
			padding: 0.4rem 0;
			min-height: 42px;
		}

		.active-filters:empty::before {
			content: '';
			display: block;
			width: 100%;
			height: 0;
		}

		.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 .remove {
			font-size: 12px;
			font-weight: 700;
			color: #7E8D9F;
			background: none;
			border: none;
			padding: 0 2px;
			cursor: pointer;
		}

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

		.servers-container {
			display: flex;
			flex-direction: column;
			gap: 1.25rem;
		}

		.servers-top-row {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 1rem;
			align-items: start;
		}

		.server-group {
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
		}

		.server-group-title {
			font-size: 16.5px;
			font-weight: 800;
			text-transform: uppercase;
			letter-spacing: 0.9px;
			color: #5A7A9F;
			display: flex;
			align-items: center;
			gap: 0.5rem;
			padding-bottom: 0.25rem;
			border-bottom: 1px solid var(--border);
		}

		.server-group-title .count {
			font-size: 13.5px;
			font-weight: 600;
			color: var(--muted);
			background: rgba(255, 255, 255, 0.05);
			padding: 0.15rem 0.5rem;
			border-radius: 4px;
		}

		.server-group--soon .server-group-title {
			color: var(--date-soon);
		}

		.server-group--new .server-group-title {
			color: var(--date-recent);
		}

		.server-group--all .server-group-title {
			color: var(--date-other);
		}

		.server-group--full {
			width: 100%;
		}

		.server-cards-wrap {
			display: flex;
			flex-wrap: wrap;
			gap: 0.5rem;
			align-items: flex-start;
		}

		.server-card {
			--action-size: 24px;
			--card-min: 200px;
			flex: 1 1 var(--card-min);
			width: auto;
			min-width: min(var(--card-min), 100%);
			max-width: 100%;
			min-height: 0;
			background: var(--card);
			border: 1px solid var(--border);
			border-radius: 8px;
			padding: 0.34rem 0.55rem 0.36rem;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			gap: 0.22rem;
			position: relative;
			overflow: hidden;
			align-self: flex-start;
			height: auto;
			transition: border-color 0.15s ease, background 0.15s ease;
		}

		.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%);
		}

		/* Кнопка перехода */
		.server-link {
			width: var(--action-size);
			height: var(--action-size);
			display: flex;
			align-items: center;
			justify-content: center;
			background: transparent;
			border: 1.5px solid #5A7A9F;
			border-radius: 5px;
			color: #5A7A9F;
			font-size: 11px;
			cursor: pointer;
			transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
			text-decoration: none;
			box-sizing: border-box;
			flex-shrink: 0;
		}

		.server-link:hover {
			border-color: var(--accent);
			color: var(--accent);
			background: rgba(74, 143, 229, 0.1);
		}

		.server-link:active {
			transform: scale(0.96);
		}

		.link-icon {
			display: block;
			width: 13px;
			height: 13px;
		}

		.card-header {
			display: flex;
			align-items: center;
			gap: 0.4rem;
			flex-shrink: 0;
		}

		.card-name {
			font-weight: 700;
			font-size: 0.95rem;
			line-height: 1.25;
			flex: 1;
			min-width: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

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

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

		.server-card--navigable .card-badges {
			position: relative;
			z-index: 0;
		}

		.server-card--navigable .server-link {
			position: relative;
			z-index: 2;
		}

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

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

		.server-card .card-badges {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 0.4rem;
			min-width: 0;
			margin-top: 0;
		}

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

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

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

		/* List view */
		.list-view {
			display: none;
		}

		.list-view.active {
			display: block;
			overflow-x: auto;
		}

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

		.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);
		}

		.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: 4px;
			padding: 0.22rem 0.75rem;
			font-size: 12px;
			font-weight: 600;
			color: #B8D0FF;
			white-space: nowrap;
		}

		.table-link {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: var(--action-size);
			height: var(--action-size);
			box-sizing: border-box;
			background: transparent;
			border: 1.5px solid #5A7A9F;
			border-radius: 6px;
			color: #5A7A9F;
			font-size: 11px;
			cursor: pointer;
			transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
			text-decoration: none;
		}

		.table-link:hover {
			border-color: var(--accent);
			color: var(--accent);
			background: rgba(74, 143, 229, 0.1);
		}

		.table-actions {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			gap: 0.35rem;
		}

		.table-open-date {
			width: fit-content;
			max-width: 100%;
			height: var(--action-size);
			box-sizing: border-box;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			font-weight: 700;
			padding: 0 0.5rem;
			border-radius: 6px;
			border: 1.5px solid transparent;
			font-size: 15px;
			white-space: nowrap;
			line-height: 1;
			flex-shrink: 0;
		}

		.table-open-date.open-date--soon {
			color: var(--date-soon);
			background: var(--date-soon-bg);
			border-color: var(--date-soon-border);
		}

		.table-open-date.open-date--eternal {
			color: var(--date-eternal);
			background: var(--date-eternal-bg);
			border-color: var(--date-eternal-border);
		}

		.table-open-date.open-date--recent {
			color: var(--date-recent);
			background: var(--date-recent-bg);
			border-color: var(--date-recent-border);
		}

		.table-open-date.open-date--other {
			color: var(--date-other);
			background: var(--date-other-bg);
			border-color: var(--date-other-border);
		}

		.list-group-header td {
			font-size: 22.5px;
			font-weight: 800;
			text-transform: uppercase;
			letter-spacing: 0.75px;
			color: #5A7A9F;
			padding: 0.85rem 0.4rem 0.35rem;
			border-bottom: 1px solid var(--border);
			background: rgba(19, 25, 35, 0.35);
		}

		.list-group-header--soon td {
			color: var(--date-soon);
		}

		.list-group-header--new td {
			color: var(--date-recent);
		}

		.list-group-header--all td {
			color: var(--date-other);
		}

		.servers-empty {
			width: 100%;
			text-align: center;
			padding: 2rem;
			color: var(--muted);
		}

		/* SEO block */
		.seo-block {
			margin-top: 3rem;
			padding: 1.5rem;
			background: var(--card);
			border: 1px solid var(--border);
			border-radius: 12px;
		}

		.seo-block h2 {
			font-size: 1.2rem;
			margin-bottom: 1rem;
			color: var(--accent);
		}

		.seo-block h3 {
			font-size: 1rem;
			margin: 1rem 0 0.5rem;
		}

		.seo-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
			gap: 1rem;
			margin-top: 1rem;
		}

		.seo-card {
			background: rgba(255, 255, 255, 0.03);
			padding: 1rem;
			border-radius: 8px;
		}

		.seo-card p {
			font-size: 12px;
			color: var(--muted);
			margin-top: 0.3rem;
		}

		@media (max-width: 900px) {
			.servers-top-row {
				grid-template-columns: 1fr;
			}
		}

		@media (max-width: 900px) {
			.controls-layout {
				grid-template-columns: 1fr;
			}

			.controls-column {
				justify-content: flex-start;
				gap: 0.75rem;
			}

			.calendar-panel {
				position: static;
				align-self: stretch;
				width: 100%;
				max-width: 320px;
			}
		}

		/* Скоро / Новые / Все: единая сетка и оформление карточек */
		.servers-top-row .server-cards-wrap,
		.server-group--full .server-cards-wrap {
			display: grid;
			gap: 0.5rem;
			align-items: start;
		}

		/* Скоро / Новые: по 2 в колонке (4 в строке всего) */
		.servers-top-row .server-cards-wrap {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		/* Все сервера: 4 в строке — та же ширина карточки, что у верхних блоков */
		.server-group--full .server-cards-wrap {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}

		.servers-top-row .server-card,
		.server-group--full .server-card {
			--card-min: 0;
			--action-size: 26px;
			flex: none;
			width: 100%;
			min-width: 0;
			max-width: none;
			align-self: start;
			height: auto;
			padding: 0.45rem 0.65rem 0.48rem;
			gap: 0.3rem;
			display: flex;
			flex-direction: column;
			align-items: stretch;
		}

		.servers-top-row .card-header,
		.server-group--full .card-header {
			gap: 0.45rem;
		}

		.servers-top-row .card-name,
		.server-group--full .card-name {
			font-size: 1rem;
			line-height: 1.3;
			white-space: normal;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}


		@media (max-width: 900px) {
			.server-group--full .server-cards-wrap {
				grid-template-columns: repeat(2, minmax(0, 1fr));
			}
		}

		@media (max-width: 700px) {
			.servers-top-row .server-cards-wrap,
			.server-group--full .server-cards-wrap {
				grid-template-columns: 1fr;
			}

			.servers-top-row .server-card,
			.server-group--full .server-card {
				display: flex;
				flex-direction: column;
				align-items: stretch;
			}

		}

		/* Телефоны и узкие планшеты */
		@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,
			.calendar-nav-btn {
				min-height: 44px;
				-webkit-tap-highlight-color: transparent;
			}

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

			.calendar-nav-btn {
				width: 44px;
				height: 44px;
				font-size: 12px;
			}

			.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));
			}

			.calendar-panel {
				max-width: none;
			}

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

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

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

			.server-link,
			.table-actions a {
				min-width: 44px;
				min-height: 44px;
				display: inline-flex;
				align-items: center;
				justify-content: center;
			}
		}

		@media (max-width: 400px) {
			.filter-pill {
				font-size: 10px;
				padding: 0.4rem 0.65rem;
			}
		}