:root {
	/* Phase 0: globale Sci-Fi Redesign Tokens */
	--ui-bg-space: #020408;
	--ui-bg-vignette: #050a15;
	--ui-accent-cyan: #bfefff;
	--ui-accent-blue: #4facfe;
	--ui-alert-orange: #ff8c00;
	--ui-glass-fill: rgba(10, 20, 30, 0.4);
	--ui-glass-border: 1px solid rgba(255, 255, 255, 0.1);
	--ui-panel-topbar-grad: linear-gradient(90deg, transparent 0%, rgba(191, 239, 255, 0.85) 35%, rgba(79, 172, 254, 0.9) 50%, rgba(191, 239, 255, 0.85) 65%, transparent 100%);
	--color-primary: #2d3748;
	--color-accent: #D97707;
	--color-accent-hover: #D97707;
	--header-bg: rgba(255, 255, 255, 0.70);
	--card-bg: rgba(255, 255, 255, 0.60);
	--card-radius: 8px;
	--panel-left-width: 70px;
	--scanline-color: transparent;
	--space-2: 2px;
	--space-3: 3px;
	--space-4: 4px;
	--space-6: 6px;
	--space-8: 8px;
	--space-10: 10px;
	--space-12: 12px;
	--space-16: 16px;
	--space-20: 20px;
	--space-28: 28px;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	/* Zentrale Tile-/Cube-Konfiguration fuer Bau, Tech, Hangar und Defense */
	--ng-tile-cube-width: 175px;
	--ng-tile-cube-aspect: 8 / 6; /* Seitenverhaeltnis Breite : Hoehe, also z. B. 200px breit und 175px hoch */
	--ng-defense-columns-gap: 25px; /* Horizontaler Abstand zwischen den drei Defense-Gruppen */
	/* Typo-Skala: 5 verbindliche Größen */
	--fs-h1:    30px; /* Seitentitel */
	--fs-h2:    20px; /* Widget-/Modal-Titel */
	--fs-h3:    14px; /* Abschnitts-Titel */
	--fs-body:  12px; /* Fließtext, Labels, Buttons */
	--fs-micro:  8px; /* Badges, Mini-Labels */
	/* Aliase für Abwärtskompatibilität (werden schrittweise entfernt) */
	--fs-8:  var(--fs-micro);
	--fs-10: 10px; /* Kompakt-Variante für mobile Tiles */
	--fs-12: var(--fs-body);
	--fs-14: var(--fs-h3);
	--fs-16: var(--fs-h3);
	--fs-18: var(--fs-h2);
	--fs-20: var(--fs-h2);
	--bevel-sm: 0px;
	--bevel-lg: 0px;
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--t-fast: 120ms;
	--t-mid: 200ms;
}

@font-face {
	font-family: 'GeneraleStation';
	src: url('/fonts/GeneraleStation.woff2') format('woff2'), url('/fonts/GeneraleStation.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* ===================== HEADING SYSTEM ===================== */
/* h1: Seitenüberschriften – mind. 30px, GeneraleStation, weiß */
h1 {
	font-family: 'GeneraleStation', var(--font-body);
	font-size: var(--fs-h1);
	font-weight: 400;
	color: var(--ui-accent-cyan);
	margin: 0 0 var(--space-16);
	letter-spacing: 1px;
	line-height: 1.2;
}

/* h2: Abschnitts-/Widget-Titel */
h2 {
	font-family: 'GeneraleStation', var(--font-body);
	font-size: var(--fs-h2);
	font-weight: 400;
	color: var(--ui-accent-cyan);
	margin: 0 0 var(--space-12);
	letter-spacing: 0.8px;
	line-height: 1.3;
}

/* h3: Unterabschnitts-Titel */
h3 {
	font-family: 'GeneraleStation', var(--font-body);
	font-size: var(--fs-h3);
	font-weight: 400;
	color: var(--ui-accent-cyan);
	margin: 0 0 var(--space-8);
	letter-spacing: 0.5px;
	line-height: 1.4;
}

@media (prefers-reduced-motion: no-preference) {
	.ng-tile .ng-tile-title, .ng-tile .ng-tile-progress-wrap, .ng-tile .ng-live-eta, .ng-cube-face .ng-face-title, .ng-cube-face .ng-face-row, .ng-cube-face .ng-face-btn {
		position: relative;
		z-index: 3;
	}
}

.ng-city-admin-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-8);
}

.ng-city-admin-switch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-12);
	font-family: var(--font-body);
	color: var(--ui-accent-cyan);
}

.ng-city-admin-switch-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 36px;
	border: 1px solid var(--ui-accent-cyan);
	background: rgba(255, 255, 255, 0.1);
	color: var(--ui-accent-cyan);
	cursor: pointer;
	border-radius: 12px;
	font-size: 22px;
	transition: background var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}

.ng-city-admin-switch-btn:hover {
	border-color: var(--ui-accent-cyan);
	background: rgba(255, 255, 255, 0.06);
}

.ng-city-admin-switch-label {
	min-width: 140px;
	text-align: center;
	font-size: var(--fs-h3);
	line-height: 1.2;
}

.ng-city-image-actions {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	flex-wrap: wrap;
}

* {
	box-sizing: border-box;
}

[hidden] {
	display: none !important;
}

input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	margin: 0;
	border: 1px solid #D97707;
	border-radius: 3px;
	background-color: transparent !important;
	display: inline-grid;
	place-content: center;
	cursor: pointer;
}

input[type="checkbox"]::before {
	content: "";
	width: 10px;
	height: 10px;
	transform: scale(0);
	transition: transform 120ms ease-in-out;
	background-color: #D97707;
}

input[type="checkbox"]:checked::before {
	transform: scale(1);
}

input[type="radio"]:not(:checked) {
	background-color: transparent !important;
}

input[type="radio"] {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	margin: 0;
	border: 1px solid #D97707;
	border-radius: 50%;
	background-color: transparent !important;
	display: inline-grid;
	place-content: center;
	cursor: pointer;
}

input[type="radio"]::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	transform: scale(0);
	transition: transform 120ms ease-in-out;
	background-color: #D97707;
}

input[type="radio"]:checked::before {
	transform: scale(1);
}

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}

body.ui-reboot {
	background: var(--ui-accent-cyan);
	color: var(--ui-accent-cyan);
	font-family: var(--font-body);
	font-size: var(--fs-12);
	min-height: 0;
	display: block;
}

body.ui-reboot.ng-shell {
	background-color: var(--ui-bg-space);
	background-image: radial-gradient(circle at 50% 42%, rgba(79, 172, 254, 0.12) 0%, rgba(79, 172, 254, 0.06) 28%, rgba(5, 10, 21, 0.22) 58%, var(--ui-bg-vignette) 100%);
	background-repeat: no-repeat;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   GAME LAYOUT (ng-game-layout)
   Vollflächig, kein Scroll, Globe als fixer Hintergrund hinter allem.
   Nur aktiv wenn body.ng-game-layout (gesetzt in ng_start.php).

   WICHTIG: Alle Selektoren verwenden body.ui-reboot.ng-shell.ng-game-layout
   als Präfix (Spezifität 0,5,1+), um höher-spezifische Basis-Regeln wie
   body.ui-reboot.ng-shell .ui-shell .ui-center-hero (0,4,1) sicher zu überschreiben.
   ═══════════════════════════════════════════════════════════════ */

/* Body: kein Scroll, schwarzer Hintergrund, Globe füllt den Viewport */
body.ui-reboot.ng-shell.ng-game-layout {
	/* Dashboard auf ca. 80% der bisherigen UI-Groesse skalieren */
	--panel-left-width: 56px;
	--card-radius: 6.4px;
	--space-2: 1.6px;
	--space-3: 2.4px;
	--space-4: 3.2px;
	--space-6: 4.8px;
	--space-8: 6.4px;
	--space-10: 8px;
	--space-12: 9.6px;
	--space-16: 12.8px;
	--space-20: 16px;
	--space-28: 22.4px;
	--fs-h1: 24px;
	--fs-h2: 16px;
	--fs-h3: 11.2px;
	--fs-body: 9.6px;
	--fs-micro: 6.4px;
	--fs-10: 8px;
	overflow: hidden;
	height: 100vh;
	width: 100vw;
	background-image: none;
	background-color: #000;
}

/* Shell: vollflächig, kein Margin/Radius/Schatten, Flex-Column statt Grid */
body.ui-reboot.ng-shell.ng-game-layout .ui-shell.ui-shell--modules {
	position: relative;
	margin: 0;
	width: 100%;
	height: 100vh;
	min-height: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Header schwebt über Globe (z-index > Globe z-index 0) */
body.ui-reboot.ng-shell.ng-game-layout .ui-shell .hud-header {
	flex: 0 0 auto;
	position: relative;
	z-index: 10;
}

/* Footer (Ticker) auf null kollabieren */
body.ui-reboot.ng-shell.ng-game-layout .ui-shell .ui-ticker {
	flex: 0 0 auto;
	max-height: 0;
	overflow: hidden;
	padding: 0;
	margin: 0;
}

/* Center-Hero: restliche Höhe einnehmen, kein Padding */
body.ui-reboot.ng-shell.ng-game-layout .ui-shell .ui-center-hero {
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
	padding: 0;
	height: auto;
	display: flex;
	flex-direction: column;
}

/* Mission-Control: Flex-Höhe weitergeben */
body.ui-reboot.ng-shell.ng-game-layout .ui-shell .ui-center-hero > #ng-mission-control, body.ui-reboot.ng-shell.ng-game-layout .ui-shell .ui-center-hero > .ng-mission-control {
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	margin-top: 0;
	padding-top: 0;
}

/* Sections-Frame: kein Rahmen/Hintergrund/Padding, Flex-Höhe weitergeben */
body.ui-reboot.ng-shell.ng-game-layout .ui-shell .ui-center-hero .ui-frame.ui-frame--heavy.ng-sections-frame {
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: transparent;
	border: none;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
	margin: 0;
}

/* Sections-Tabs: halbtransparent, schwebt über Globe (beats body.ui-reboot .ui-frame--heavy.ng-sections-frame .ng-sections-tabs at 0,5,1) */
body.ui-reboot.ng-shell.ng-game-layout .ui-frame.ui-frame--heavy.ng-sections-frame .ng-sections-tabs {
	flex: 0 0 auto;
	background: rgba(5, 10, 21, 0.78);
	backdrop-filter: blur(14px) saturate(1.2);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	border-bottom: 1px solid rgba(79, 172, 254, 0.18);
	position: relative;
	z-index: 5;
	margin: 0;
	padding: var(--space-4) var(--space-12);
}

/* Sections-Slider: kein Extra-Padding im Game-Layout (beats body.ui-reboot .ng-sections-slider.ui-frame.ui-frame--ghost at 0,4,1) */

/* Frame-Body: kein Scroll/Padding, Flex-Höhe weitergeben */
body.ui-reboot.ng-shell.ng-game-layout .ui-shell .ui-center-hero .ui-frame.ui-frame--heavy.ng-sections-frame > .ui-frame__body {
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* ng-shell-center: Flex-Höhe weitergeben */
body.ui-reboot.ng-shell.ng-game-layout .ng-shell-center {
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Tile-Dashboard: kein Gap, Flex-Höhe weitergeben */
body.ui-reboot.ng-shell.ng-game-layout #ng-tile-dashboard, body.ui-reboot.ng-shell.ng-game-layout .ng-tile-dashboard {
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
	display: flex !important;
	flex-direction: column;
	gap: 0;
}

/* Gridmatrix-Header: verstecken (leeres Div, nimmt sonst Platz weg) */
body.ui-reboot.ng-shell.ng-game-layout .ng-gridmatrix-header {
	display: none;
}

/* Dashboard-Scene: restlicher Raum, Clipping-Grenze für Grid */
body.ui-reboot.ng-shell.ng-game-layout .ng-dashboard-scene {
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
	position: relative;
}

/* Grid-Stack: liegt über Globe, transparent, Cards sind einzeln klickbar */
body.ui-reboot.ng-shell.ng-game-layout .ng-dashboard-scene .ng-cityview-dashboard.grid-stack {
	min-height: 0;
}

body.ui-reboot .ui-frame.ui-frame--heavy.ng-sections-frame {
	position: relative;
	z-index: 100;
	overflow: visible;
}

body.ui-reboot .ui-frame.ui-frame--heavy.ng-sections-frame > .ui-frame__body {
	overflow-y: visible;
}

body.ui-reboot .ui-frame.ui-frame--heavy.ng-sections-frame::before {
	display: none;
}

body.ui-reboot .ui-frame.ui-frame--heavy.ng-sections-frame .ng-dashboard-cleanup {
	position: absolute;
	top: var(--space-8);
	right: var(--space-8);
	z-index: 5;
	min-width: 38px;
	height: 32px;
	padding: 0 var(--space-8);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

body.ui-reboot .ui-frame.ui-frame--heavy.ng-sections-frame .ng-sections-tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	gap: var(--space-8);
	padding: var(--space-4) var(--space-12);
	padding-top: calc(var(--space-4) + 6px);
	margin: 0 auto var(--space-4);
	width: 100%;
}

body.ui-reboot .ui-frame.ui-frame--heavy.ng-sections-frame .ng-sections-tabs > .tab[data-section="defense"] {
	align-self: stretch;
	min-width: 64px;
	padding-left: var(--space-16);
	padding-right: var(--space-16);
}

body.ui-reboot .ui-frame.ui-frame--heavy.ng-sections-frame .ng-sections-tabs > .tab[data-section="defense"] > i {
	font-size: var(--fs-12);
}

.ui-shell {
	position: relative;
	isolation: isolate;
	min-height: 0;
	display: grid;
	grid-template-areas: 'header header''left center''ticker ticker';
	grid-template-columns: var(--panel-left-width, 320px) 1fr;
	grid-template-rows: auto 1fr auto;
	gap: var(--space-12);
}

body.ui-reboot.ng-shell .ui-shell {
	flex: 0 0 auto;
	min-height: fit-content;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto auto;
	grid-template-areas: 'header' 'center' 'dock';
	gap: 0;
	overflow: visible;
	width: 100%;
	position: relative;
}

body.ui-reboot.ng-shell .ui-shell.ui-shell--modules {
    background: linear-gradient(180deg, rgba(2, 4, 8, 0.88) 0%, rgba(5, 10, 21, 0.9) 100%);
    margin: 25px;
    width: calc(100% - 50px);
    min-height: fit-content;
    border-radius: 20px;
    box-shadow: 0 0 60px 16px rgba(0, 0, 0, 0.55), 0 0 28px rgba(79, 172, 254, 0.16);
}

body.ui-reboot.ng-shell .ui-shell .dock {
	grid-area: dock;
	position: fixed;
	left: 50%;
	bottom: clamp(12px, 2vh, 24px);
	transform: translateX(-50%);
	width: auto;
	min-width: 0;
	max-width: calc(100vw - 24px);
	height: auto;
	max-height: none;
	min-height: 0;
	overflow: visible;
	display: flex;
	justify-content: center;
	z-index: 950;
	pointer-events: none;
}

body.ui-reboot.ng-shell .ui-shell .hud-header {
	grid-area: header;
}

body.ui-reboot.ng-shell .ui-shell .ui-center-hero {
	grid-area: center;
	min-height: 0;
	height: auto;
	overflow: visible;
	overflow-x: visible;
	padding: 12px 16px 24px;
	margin: 0;
}

body.ui-reboot.ng-shell .ui-shell .ui-center-hero > #ng-mission-control, body.ui-reboot.ng-shell .ui-shell .ui-center-hero > .ng-mission-control {
	margin-top: 0;
	padding-top: 0;
}

body.ui-reboot.ng-shell .ui-shell .ui-center-hero .ui-frame.ui-frame--heavy.ng-sections-frame {
	margin-top: 0;
	padding: 8px;
}

body.ui-reboot.ng-shell .ui-shell .ui-center-hero .ui-frame.ui-frame--heavy.ng-sections-frame > .ui-frame__body {
	padding-top: 0;
	margin-top: 0;
	overflow: visible;
	max-height: none;
}

.ui-shell > * {
	position: relative;
	z-index: 1;
}

.ui-frame {
	position: relative;
	padding: var(--space-8);
	overflow: hidden;
}

.ui-frame::before, .ui-frame::after {
	display: none;
}

.ui-frame__title {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	font-family: var(--font-body);
	font-size: var(--fs-12);
	color: var(--color-primary);
	
	margin-bottom: var(--space-8);
	margin-left: var(--bevel-sm);
	margin-right: var(--bevel-sm);
	padding-top: var(--space-4);
	text-transform: uppercase;
}

.ui-frame.ui-frame--heavy .ui-frame__title {
	padding-bottom: 10px;
	margin-bottom: 10px;
	margin-left: calc(var(--bevel-lg) + 4px);
	margin-right: calc(var(--bevel-lg) + 4px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.ui-frame.ui-frame--heavy {
	display: flex;
	flex-direction: column;
	min-height: 0;
	position: relative;
	isolation: isolate;
}

.ui-frame.ui-frame--heavy > .ui-frame__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.ui-frame.ui-frame--heavy::before {
	content: none;
	display: none;
}

.ui-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	padding: 8px 16px;
	background: rgba(255, 255, 255, 0);
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 12px;
	color: var(--ui-accent-cyan);
	font-family: var(--font-body);
	font-size: var(--fs-12);
	
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--t-fast), border-color var(--t-fast);
	width: auto;
	align-self: flex-start;
	justify-self: start;
}

.ui-btn:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: var(--ui-accent-cyan);
}

.ui-btn:active {
	transform: translateY(1px);
	background: rgba(255, 255, 255, 0.06);
}

.ui-btn.is-accent {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.ui-btn.is-accent:hover {
	background: rgba(217, 119, 6, 0.15);
}

.ui-btn.is-danger {
	border-color: var(--ui-alert-orange);
	color: var(--ui-alert-orange);
}

.ui-btn.is-danger:hover {
	background: rgba(255, 85, 51, 0.15);
}

.ng-jump-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	padding: 6px 10px;
	min-width: 38px;
	height: 32px;
	background: rgba(255, 255, 255, 0);
	border: 1px solid var(--ui-accent-cyan);
	border-radius: var(--card-radius);
	color: var(--ui-accent-cyan);
	font: 500 10px/1 var(--font-display);
	
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--t-fast), border-color var(--t-fast);
}

.ng-jump-btn:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: var(--ui-accent-cyan);
}

.ng-jump-btn:active {
	transform: translateY(1px);
	background: rgba(255, 255, 255, 0.06);
}

.ng-modal-toplist .ng-table th,
.ng-modal-toplist .ng-table td {
	vertical-align: middle;
	text-align: center;
}

.ng-modal-toplist .ng-table td.ng-toplist-alliance-cell {
	text-align: center;
}

.ng-toplist-alliance-cell {
	text-align: left;
	white-space: nowrap;
}

.ng-toplist-player-info {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	text-decoration: none;
}

.ng-toplist-player-info:hover {
	color: var(--ui-accent-cyan);
}

.ng-toplist-inactive td {
	opacity: 0.35;
	filter: grayscale(0.6);
}

.ng-modal-toplist .ng-table td.ng-toplist-rank--top {
	font-size: var(--fs-16);
	color: var(--color-accent);
	font-weight: 700;
}

.ng-modal-toplist .ng-table tr.ng-toplist-rank--top td {
	font-size: var(--fs-16);
	color: var(--color-accent);
	font-weight: 700;
}

.ng-modal-toplist .ng-table tr.ng-toplist-rank--first td {
	font-size: var(--fs-18);
}

.ng-toplist-player-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.ng-toplist-alliance-info {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: inherit;
	text-decoration: none;
}

.ng-toplist-alliance-info:hover {
	color: var(--ui-accent-cyan);
}

.ng-toplist-alliance-pic {
	width: 28px;
	height: 28px;
	object-fit: cover;
	flex-shrink: 0;
}

.ng-toplist-alliance-tag {
	font-size: var(--fs-12);
	color: var(--ui-accent-cyan);
	font-weight: 600;
}

.ng-toplist-alliance-name {
	font-size: var(--fs-12);
}

.ui-form {
	display: grid;
	gap: var(--space-12);
}

.ui-field {
	display: grid;
	gap: var(--space-4);
}

.ui-field__label {
	font-family: var(--font-body);
	

	font-size: var(--fs-12);
	text-transform: uppercase;
}

.ui-input {
	width: 100%;
	padding: 8px 12px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 12px;
	color: var(--ui-accent-cyan);
	font-family: var(--font-body);
	font-size: var(--fs-12);
	letter-spacing: 0;
}

.ui-input:focus, .ng-input:focus, .ng-textarea:focus, .landing-input:focus {
	outline: none;
	border-color: var(--color-accent);
}

.ui-actions {
	display: flex;
	gap: var(--space-8);
	justify-content: flex-end;
}

.ng-modal__inner .ng-building-item .ng-building-image {
	flex: 0 0 125px;
	width: 125px;
	height: 125px;
}

.ui-stack {
	display: grid;
	gap: var(--space-12);
}

body.ui-reboot .ng-tile-dashboard.ui-stack, body.ui-reboot #ng-tile-dashboard.ui-stack {
	display: grid;
	gap: var(--space-8);
}

.ui-gap-8 {
	gap: var(--space-8);
}

.ui-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-12);
}

.ui-table th, .ui-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--ui-accent-cyan);
	color: var(--ui-accent-cyan);
	text-align: left;
}

.ui-table th {

	text-transform: uppercase;
	
	font-family: var(--font-body);
}

.ui-table tr:nth-child(2n) {
	background: rgba(255, 255, 255, 0);
}

.ui-table .is-right {
	text-align: right;
}

.ui-table .is-center {
	text-align: center;
}

.ui-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
	padding: 4px 8px;
	border: 1px solid var(--ui-accent-cyan);
	background: rgba(255, 255, 255, 0.1);
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12);
	text-transform: uppercase;
	
}

.ui-link {
	color: var(--color-primary);
	text-decoration: none;
}

.ui-link:hover {
	text-decoration: underline;
}

body.ui-reboot a, body.ui-reboot a:visited, body.ui-reboot a:hover, body.ui-reboot a:focus, body.ui-reboot a:active {
	text-decoration: none;
}

.ng-building-link, .ng-building-link:visited {
	color: inherit;
}

.dock {
	position: relative;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	height: auto;
	max-height: none;
	margin: 0;
	border-radius: 12px 12px 0 0;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding: 0;
	overflow: visible;
	z-index: 200;
	transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hud-header {
	grid-area: header;
}

body.ui-reboot #ng-comm-fullview-content {
	opacity: 1;
	transition: opacity 260ms var(--ease);
}

.dock.ui-stack {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: var(--space-12);
	padding: var(--space-8);
}

.dock .ui-frame::before {
	border-color: rgba(255, 255, 255, 0.08);
}

.ui-section-label {
	font-family: var(--font-body);
	letter-spacing: 0.7px;
	color: var(--color-primary);
	font-size: var(--fs-12);
	margin-bottom: var(--space-8);
}

.ui-log strong {
	color: var(--ui-accent-cyan);
}

.ui-log__line {
	display: block;
	margin-bottom: 4px;
}

.ng-cityview-card {
	background: var(--ui-glass-fill);
	border: var(--ui-glass-border);
	border-radius: var(--card-radius);
	padding: 0;
	overflow: hidden;
	position: relative;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 18px rgba(0,0,0,.28);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: box-shadow var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}

.ng-cityview-card:hover {
	border-color: var(--ui-accent-cyan);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.34), 0 0 14px rgba(191, 239, 255,.18);
}

.ng-cityview-card::before, .ng-cityview-card::after {
	content: '';
	display: block;
	position: absolute;
	pointer-events: none;
}

.ng-cityview-card::before {
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--ui-panel-topbar-grad);
	box-shadow: 0 0 10px rgba(191, 239, 255,.55), 0 0 20px rgba(79,172,254,.35);
	z-index: 2;
}

.ng-cityview-card::after {
	inset: 0;
	border-radius: inherit;
	border: 1px solid rgba(191, 239, 255,.08);
	z-index: 1;
}

.ng-cityview-card-title > div {
	width: 100%;
	text-align: center;
}

.ng-cityview-card-title .ng-card-drag-handle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

.ng-cityview-card-title .ng-card-drag-handle i {
	font-size: var(--fs-12);
}

.ng-tiles-grid, .ng-build-tiles-grid, .ng-defense-tiles-grid {
	position: relative;
	overflow: hidden;
}

.ng-cityview-card.ng-tiles-card {
	border-radius: var(--card-radius);
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	border-color: rgba(255, 255, 255, 0.1);
	padding: 6px;
}

.ng-cityview-card ::placeholder, .ng-tiles-card ::placeholder, .ng-tile ::placeholder, .ng-cube-face ::placeholder {
	color: rgba(255, 255, 255, 0.72);
	opacity: 1;
}

.ng-cityview-card.ng-tiles-card .ng-tiles-grid, .ng-cityview-card.ng-tiles-card .ng-build-tiles-grid, .ng-cityview-card.ng-tiles-card .ng-defense-tiles-grid {
	background: transparent;
	border: 0;
	padding-top: var(--space-12);
	padding-bottom: var(--space-12);
}

body.ui-reboot .ng-cityview-card.ng-tiles-card .ng-tiles-grid {
	grid-template-columns: repeat(auto-fit, var(--ng-tile-cube-width));
	gap: var(--space-12);
	justify-content: center;
}

body.ui-reboot .ng-cityview-card.ng-tiles-card .ng-build-tiles-grid, body.ui-reboot .ng-cityview-card.ng-tiles-card .ng-defense-tiles-grid {
	gap: var(--space-16);
}

body.ui-reboot .ng-cityview-card.ng-tiles-card.ng-tiles-card--defense .ng-defense-tiles-grid {
	grid-template-columns: repeat(auto-fit, minmax(var(--ng-tile-cube-width), 1fr));
	gap: var(--space-12);
	justify-content: stretch;
}

body.ui-reboot .ng-build-tiles-grid.ng-build-tiles-grid--grouped {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	padding-top: var(--space-12);
	padding-bottom: var(--space-12);
}

body.ui-reboot .ng-build-groups-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-12);
}

body.ui-reboot .ng-build-group-card {
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-sizing: border-box;
    width: fit-content;
    max-width: 100%;
    align-self: center;
    justify-self: center;
}

body.ui-reboot .ng-tech-group-card {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: fit-content;
    max-width: 100%;
    align-self: center;
    justify-self: center;
}

body.ui-reboot .ng-hangar-group-card {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: fit-content;
    max-width: 100%;
    align-self: center;
    justify-self: center;
}

body.ui-reboot .ng-build-group-title {
	color: var(--ui-accent-cyan);
	font-family: var(--font-body);
	font-size: var(--fs-12);
	
	letter-spacing: 0.8px;
	text-transform: uppercase;
	margin-top: 4px;
}

body.ui-reboot h3.ng-build-group-title.ng-build-group-title--center {
	margin: 4px 0 0;
	color: var(--ui-accent-cyan);
	font-family: 'GeneraleStation', var(--font-body);
	font-size: var(--fs-12);
	font-weight: 400;
	letter-spacing: 0.8px;
	line-height: 1.3;
	text-transform: uppercase;
	text-align: center;
	border: none;
	background: transparent;
}

body.ui-reboot .ng-build-group-title--center {
	text-align: center;
}

body.ui-reboot .ng-build-row {
	display: grid;
	gap: var(--space-12);
	justify-content: center;
}

body.ui-reboot .ng-build-row--prod {
	grid-template-columns: repeat(4, minmax(0, var(--ng-panel-cube-width)));
}

body.ui-reboot .ng-build-row--pair {
	grid-template-columns: repeat(2, minmax(0, var(--ng-panel-cube-width)));
}

body.ui-reboot .ng-build-row--trio {
	grid-template-columns: repeat(3, minmax(0, var(--ng-panel-cube-width)));
}

body.ui-reboot .ng-panel-cube-grid {
	display: grid;
	gap: var(--space-12);
	justify-content: center;
	--ng-panel-cube-width: var(--ng-tile-cube-width);
	--ng-panel-cube-aspect: var(--ng-tile-cube-aspect);
}

body.ui-reboot .ng-panel-cube {
	width: min(100%, var(--ng-panel-cube-width));
	max-width: var(--ng-panel-cube-width);
	height: auto;
	aspect-ratio: var(--ng-panel-cube-aspect);
	position: relative;
}

body.ui-reboot .ng-build-row .ng-tile {
	width: min(100%, var(--ng-panel-cube-width, var(--ng-tile-cube-width)));
	max-width: var(--ng-panel-cube-width, var(--ng-tile-cube-width));
	height: auto;
	aspect-ratio: var(--ng-panel-cube-aspect, var(--ng-tile-cube-aspect));
	position: relative;
}

body.ui-reboot .ng-tile-grid-tech.ng-tech-tiles-grid--grouped {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	margin-top: 0;
}

body.ui-reboot .ng-tech-row--3 {
	grid-template-columns: repeat(3, var(--ng-panel-cube-width));
}

body.ui-reboot .ng-tech-row--4 {
	grid-template-columns: repeat(4, var(--ng-panel-cube-width));
}

body.ui-reboot .ng-tech-row--2 {
	grid-template-columns: repeat(2, var(--ng-panel-cube-width));
}

body.ui-reboot .ng-tech-row .ng-tile {
	width: min(100%, var(--ng-panel-cube-width, var(--ng-tile-cube-width)));
	max-width: var(--ng-panel-cube-width, var(--ng-tile-cube-width));
	height: auto;
	aspect-ratio: var(--ng-panel-cube-aspect, var(--ng-tile-cube-aspect));
	position: relative;
}

body.ui-reboot .ng-hangar-tiles-grid.ng-hangar-tiles-grid--grouped {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	padding: 0;
}

body.ui-reboot .ng-hangar-row--4 {
	grid-template-columns: repeat(4, minmax(0, var(--ng-panel-cube-width)));
}

body.ui-reboot .ng-hangar-row--3 {
	grid-template-columns: repeat(3, minmax(0, var(--ng-panel-cube-width)));
}

body.ui-reboot .ng-hangar-row .ng-tile {
	width: min(100%, var(--ng-panel-cube-width, var(--ng-tile-cube-width)));
	max-width: var(--ng-panel-cube-width, var(--ng-tile-cube-width));
	height: auto;
	aspect-ratio: var(--ng-panel-cube-aspect, var(--ng-tile-cube-aspect));
	position: relative;
}

body.ui-reboot .ng-cityview-card.ng-tiles-card.ng-tiles-card--defense {
	width: 100%;
	max-width: none;
}

.ng-defense-tiles-header {
	display: flex;
	justify-content: center;
	gap: var(--space-16);
	padding: 8px 0 12px;
	margin-bottom: 4px;
	color: var(--ui-accent-cyan);
}

.ng-defense-columns {
	display: grid;
	grid-template-columns: repeat(3, max-content);
	gap: var(--ng-defense-columns-gap);
	justify-content: center;
	align-items: start;
}

.ng-defense-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 0;
    width: fit-content;
    max-width: 100%;
    justify-self: center;
}

.ng-defense-column-title {
	margin: 0;
	padding: 0 8px;
	text-align: center;
	
	letter-spacing: 0.9px;
	text-transform: uppercase;
	color: var(--ui-accent-cyan);
}

.ng-defense-tiles-grid--stacked {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-12);
	justify-items: center;
}

.ng-defense-tiles-grid--stacked .ng-tile {
	width: min(100%, var(--ng-panel-cube-width, var(--ng-tile-cube-width)));
	max-width: var(--ng-panel-cube-width, var(--ng-tile-cube-width));
}

.ng-defense-column:nth-child(1) .ng-defense-column-title {
	color: var(--ui-accent-cyan);
}

.ng-defense-column:nth-child(2) .ng-defense-column-title {
	color: var(--ui-accent-cyan);
}

.ng-defense-column:nth-child(3) .ng-defense-column-title {
	color: var(--color-accent);
}

@media (max-width: 980px) {
	.ng-defense-columns {
		grid-template-columns: 1fr;
	}
}

.ng-defense-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
}

.ng-defense-stat-value {
	color: var(--ui-accent-cyan);
	text-shadow: 0 0 8px rgba(255, 255, 255, 0.10);
}

.ng-defense-stat-label {
	font-size: var(--fs-12);
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--ui-accent-cyan);
}

.ng-tile-footer {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 3;
	background: var(--ui-glass-fill);
	padding: 2px 6px;
	color: var(--ui-accent-cyan);
	text-align: center;
	
	backdrop-filter: blur(2px);
	pointer-events: none;
	white-space: nowrap;
}

body.ui-reboot .ng-tile-title {
	background: transparent;
	color: var(--ui-accent-cyan);
	font-family: var(--font-body);
	font-size: var(--fs-12);
	
	letter-spacing: 0.8px;
	text-transform: uppercase;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55), 0 0 10px var(--ui-accent-cyan);
}

body.ui-reboot .ng-city-coords, body.ui-reboot .ng-header-player-name, body.ui-reboot .ng-radar-clock, body.ui-reboot #ng-rb-iridium-h, body.ui-reboot #ng-rb-holzium-h, body.ui-reboot #ng-rb-water-h, body.ui-reboot #ng-rb-oxygen-h, body.ui-reboot .ng-cityview-card-title {
	font-family: 'GeneraleStation', var(--font-body) !important;
}

body.ui-reboot .ng-cityview-card.ng-tiles-card.ng-tiles-card--defense .ng-tile-title {
	display: inline-grid;
	grid-template-columns: max-content max-content;
	align-items: center;
	justify-content: center;
	column-gap: 0;
	padding-inline: 8px;
}

body.ui-reboot .ng-cityview-card.ng-tiles-card.ng-tiles-card--defense .ng-defense-title-amount {
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	min-width: 28px;
	font-size: 1.72em;
	line-height: 1;
	letter-spacing: 0;
	font-weight: 700;
	color: var(--ui-accent-cyan);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55), 0 0 12px rgba(255, 255, 255, 0.22);
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
	text-align: right;
	justify-self: end;
	padding-right: 0;
}

body.ui-reboot .ng-cityview-card.ng-tiles-card.ng-tiles-card--defense .ng-defense-title-copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	justify-self: start;
	text-align: center;
	line-height: 1.05;
	gap: 1px;
}

body.ui-reboot .ng-cityview-card.ng-tiles-card.ng-tiles-card--defense .ng-defense-title-line {
	display: block;
	text-align: center;
	white-space: nowrap;
}

body.ui-reboot .ng-cityview-card.ng-tiles-card.ng-tiles-card--defense .ng-defense-title-line--prefix {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 0;
	font-size: 0.72em;
	color: rgba(255, 255, 255, 0.88);
}

body.ui-reboot .ng-cityview-card.ng-tiles-card.ng-tiles-card--defense .ng-defense-title-char {
	display: block;
	flex: 0 0 auto;
}

body.ui-reboot .ng-cityview-card.ng-tiles-card.ng-tiles-card--defense .ng-defense-title-line--accent {
	font-size: 1.08em;
	letter-spacing: 1.8px;
	font-weight: 700;
	color: var(--ui-accent-cyan);
}

body.ui-reboot .ng-tile-grid-tech.ng-tech-tiles-grid--grouped .ng-tile-title[data-title-layout="tech"] {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-inline: 8px;
	text-align: center;
}

body.ui-reboot .ng-tile-grid-tech.ng-tech-tiles-grid--grouped .ng-tech-title-copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1.05;
	gap: 1px;
}

body.ui-reboot .ng-tile-grid-tech.ng-tech-tiles-grid--grouped .ng-tech-title-line {
	display: block;
	text-align: center;
	white-space: nowrap;
}

body.ui-reboot .ng-tile-grid-tech.ng-tech-tiles-grid--grouped .ng-tech-title-line--prefix {
	font-size: 0.72em;
	color: rgba(255, 255, 255, 0.88);
	letter-spacing: 1px;
}

body.ui-reboot .ng-tile-grid-tech.ng-tech-tiles-grid--grouped .ng-tech-title-line--accent {
	font-size: 1.08em;
	letter-spacing: 1.8px;
	font-weight: 700;
	color: var(--ui-accent-cyan);
}

body.ui-reboot .ng-hangar-tiles-grid.ng-hangar-tiles-grid--grouped .ng-tile-title[data-title-layout="transport"] {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-inline: 8px;
	text-align: center;
}

body.ui-reboot .ng-hangar-tiles-grid.ng-hangar-tiles-grid--grouped .ng-tech-title-copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1.05;
	gap: 1px;
}

body.ui-reboot .ng-hangar-tiles-grid.ng-hangar-tiles-grid--grouped .ng-tech-title-line {
	display: block;
	text-align: center;
	white-space: nowrap;
}

body.ui-reboot .ng-hangar-tiles-grid.ng-hangar-tiles-grid--grouped .ng-tech-title-line--prefix {
	font-size: 0.72em;
	color: rgba(255, 255, 255, 0.88);
	letter-spacing: 1px;
}

body.ui-reboot .ng-hangar-tiles-grid.ng-hangar-tiles-grid--grouped .ng-tech-title-line--accent {
	font-size: 1.08em;
	letter-spacing: 1.8px;
	font-weight: 700;
	color: var(--ui-accent-cyan);
}

.ng-cityview-card:is(.ng-grid-flotten, .ng-grid-radar, .ng-grid-flotten-incoming) .ng-flight-list:is([data-role="flight-list-incoming"], .ui-log).ng-flight-list--has-incoming {
	color: var(--ui-alert-orange);
	animation: ngHostileBlink 1s ease-in-out infinite;
}

@keyframes ngHostileBlink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.3; }
}

.ng-cityview-card.ng-grid-flotten .ng-flight-card, .ng-cityview-card.ng-grid-flotten-outgoing .ng-flight-card, .ng-cityview-card.ng-grid-flotten-incoming .ng-flight-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-12);
	padding: 6px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.20);
}

.ng-cityview-card.ng-grid-flotten .ng-flight-card:last-child, .ng-cityview-card.ng-grid-flotten-outgoing .ng-flight-card:last-child, .ng-cityview-card.ng-grid-flotten-incoming .ng-flight-card:last-child {
	border-bottom: 0;
}

.ng-cityview-card.ng-grid-flotten .ng-flight-title, .ng-cityview-card.ng-grid-flotten-outgoing .ng-flight-title, .ng-cityview-card.ng-grid-flotten-incoming .ng-flight-title {
	flex: 1 1 auto;
	min-width: 0;
	white-space: normal;
	overflow-wrap: anywhere;
}

.ng-cityview-card.ng-grid-flotten .ng-flight-countdown, .ng-cityview-card.ng-grid-flotten-outgoing .ng-flight-countdown, .ng-cityview-card.ng-grid-flotten-incoming .ng-flight-countdown {
	flex: 0 0 auto;
	white-space: normal;
	font-size: var(--fs-12);
}

.ng-cityview-card:is(.ng-grid-flotten, .ng-grid-flotten-incoming) .ng-flight-card.incoming :is(.ng-flight-title, .ng-flight-countdown) {
	color: var(--ui-alert-orange);
}

.ng-player-avatar.ng-player-avatar--icon {
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.30);
}

.ng-player-avatar.ng-player-avatar--icon i {
	font-size: var(--fs-12);
	color: var(--color-primary);
}

@keyframes ngCityStaticNoiseShift {
	0% {
		background-position: 0 0, 18px 12px, -12px 20px, 14px -10px, 6px 8px, -8px 14px, 10px -6px, -6px 11px, 12px 5px, -10px -8px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
	}
	13% {
		background-position: -4px 3px, 10px -6px, -6px 10px, 9px -8px, 4px 7px, -5px 9px, 8px -3px, -3px 8px, 10px 2px, -8px -5px, 0 0, 0 0, 0 0, 0 0, 0 -4px, 0 2px;
	}
	29% {
		background-position: -9px 6px, 11px -8px, 9px 14px, -10px 7px, -6px 10px, 10px -5px, -11px 4px, 8px -9px, -7px 12px, 6px 10px, 0 0, 0 0, 0 0, 0 0, 0 -8px, 0 4px;
	}
	47% {
		background-position: 7px -5px, -11px 7px, 4px -10px, 6px 13px, 11px -6px, -10px 3px, 5px 11px, -8px -5px, 9px -7px, -6px 4px, 0 0, 0 0, 0 0, 0 0, 0 7px, 0 -4px;
	}
	58% {
		background-position: 11px -7px, -14px 9px, 6px -12px, 8px 16px, 14px -8px, -12px 4px, 7px 13px, -10px -6px, 11px -10px, -8px 6px, 0 0, 0 0, 0 0, 0 0, 0 10px, 0 -6px;
	}
	74% {
		background-position: -14px -10px, 7px 16px, -8px 6px, 16px -5px, -10px -4px, 9px 12px, -9px 8px, 12px 4px, -6px -11px, 10px -7px, 0 0, 0 0, 0 0, 0 0, 0 -12px, 0 8px;
	}
	88% {
		background-position: 3px 9px, -7px -4px, 9px 6px, -4px -9px, 6px 4px, -8px -6px, 6px -3px, -5px 6px, 4px 8px, -9px 3px, 0 0, 0 0, 0 0, 0 0, 0 4px, 0 -3px;
	}
	100% {
		background-position: 6px 13px, -9px -6px, 12px 8px, -6px -12px, 8px 6px, -11px -8px, 9px -5px, -7px 9px, 6px 11px, -12px 5px, 0 0, 0 0, 0 0, 0 0, 0 6px, 0 -4px;
	}
}

@keyframes ngCityStaticNoisePulse {
	0% {
		opacity: 0.56;
	}
	9% {
		opacity: 0.6;
	}
	17% {
		opacity: 0.5;
	}
	26% {
		opacity: 0.64;
	}
	33% {
		opacity: 0.54;
	}
	46% {
		opacity: 0.68;
	}
	57% {
		opacity: 0.52;
	}
	71% {
		opacity: 0.62;
	}
	84% {
		opacity: 0.48;
	}
	100% {
		opacity: 0.58;
	}
}

.ng-cityview-dashboard.grid-stack, .ng-dashboard-gridstack.grid-stack {
	display: block;
	position: relative;
	width: 100%;
	min-height: 280px;
	overflow: visible;
}

/* Innerhalb der Scene: Grid-Container liegt über Globe (z-index:1),
   Klicks im leeren Bereich fallen durch zur Globe darunter */
.ng-dashboard-scene .ng-cityview-dashboard.grid-stack {
	z-index: 1;
	pointer-events: none;
	background: transparent;
}

.ng-dashboard-scene .ng-cityview-dashboard.grid-stack .grid-stack-item {
	pointer-events: auto;
}

body.ui-reboot.ng-shell .ng-cityview-dashboard.grid-stack {
	display: block;
}

.ng-cityview-dashboard.grid-stack > .ng-dashboard-gridstack {
	width: 100%;
	min-width: 100%;
}

body.ui-reboot.ng-shell .ng-cityview-dashboard.grid-stack > .ng-dashboard-gridstack {
	grid-column: 1 / -1;
}

.ng-dashboard-gridstack.grid-stack {
	width: 100%;
	min-width: 100%;
}
body.ui-reboot.ng-shell .ng-dashboard-gridstack.grid-stack .ng-cityview-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	padding: 8px;
	box-sizing: border-box;
	grid-column: auto;
	grid-row: auto;
}

.ng-cityview-dashboard.grid-stack .grid-stack-item, .ng-dashboard-gridstack.grid-stack .grid-stack-item {
	position: absolute;
	padding: 0;
	background: transparent;
	box-sizing: border-box;
}

.ng-dashboard-gridstack.grid-stack .grid-stack-item[gs-x="0"], .ng-dashboard-gridstack.grid-stack .grid-stack-item:not([gs-x])[data-gs-x="0"] {
	left: 0%;
}

.ng-dashboard-gridstack.grid-stack .grid-stack-item[gs-x="1"], .ng-dashboard-gridstack.grid-stack .grid-stack-item:not([gs-x])[data-gs-x="1"] {
	left: 8.3333333%;
}

.ng-dashboard-gridstack.grid-stack .grid-stack-item[gs-x="2"], .ng-dashboard-gridstack.grid-stack .grid-stack-item:not([gs-x])[data-gs-x="2"] {
	left: 16.6666667%;
}

.ng-dashboard-gridstack.grid-stack .grid-stack-item[gs-x="3"], .ng-dashboard-gridstack.grid-stack .grid-stack-item:not([gs-x])[data-gs-x="3"] {
	left: 25%;
}

.ng-dashboard-gridstack.grid-stack .grid-stack-item[gs-x="4"], .ng-dashboard-gridstack.grid-stack .grid-stack-item:not([gs-x])[data-gs-x="4"] {
	left: 33.3333333%;
}

.ng-dashboard-gridstack.grid-stack .grid-stack-item[gs-x="5"], .ng-dashboard-gridstack.grid-stack .grid-stack-item:not([gs-x])[data-gs-x="5"] {
	left: 41.6666667%;
	}

.ng-dashboard-gridstack.grid-stack .grid-stack-item[gs-x="6"], .ng-dashboard-gridstack.grid-stack .grid-stack-item:not([gs-x])[data-gs-x="6"] {
	left: 50%;
	}

.ng-dashboard-gridstack.grid-stack .grid-stack-item[gs-x="7"], .ng-dashboard-gridstack.grid-stack .grid-stack-item:not([gs-x])[data-gs-x="7"] {
	left: 58.3333333%;
	}

.ng-dashboard-gridstack.grid-stack .grid-stack-item[gs-x="8"], .ng-dashboard-gridstack.grid-stack .grid-stack-item:not([gs-x])[data-gs-x="8"] {
	left: 66.6666667%;
	}

.ng-dashboard-gridstack.grid-stack .grid-stack-item[gs-x="9"], .ng-dashboard-gridstack.grid-stack .grid-stack-item:not([gs-x])[data-gs-x="9"] {
	left: 75%;
	}

.ng-dashboard-gridstack.grid-stack .grid-stack-item[gs-x="10"], .ng-dashboard-gridstack.grid-stack .grid-stack-item:not([gs-x])[data-gs-x="10"] {
	left: 83.3333333%;
	}

.ng-dashboard-gridstack.grid-stack .grid-stack-item[gs-x="11"], .ng-dashboard-gridstack.grid-stack .grid-stack-item:not([gs-x])[data-gs-x="11"] {
	left: 91.6666667%;
}

.ng-dashboard-gridstack.grid-stack .grid-stack-item[gs-w="1"], .ng-dashboard-gridstack.grid-stack .grid-stack-item:not([gs-w])[data-gs-w="1"] {
	width: 8.3333333%;
}

.ng-dashboard-gridstack.grid-stack .grid-stack-item[gs-w="2"], .ng-dashboard-gridstack.grid-stack .grid-stack-item:not([gs-w])[data-gs-w="2"] {
	width: 16.6666667%;
}

.ng-dashboard-gridstack.grid-stack .grid-stack-item[gs-w="3"], .ng-dashboard-gridstack.grid-stack .grid-stack-item:not([gs-w])[data-gs-w="3"] {
	width: 25%;
}

.ng-dashboard-gridstack.grid-stack .grid-stack-item[gs-w="4"], .ng-dashboard-gridstack.grid-stack .grid-stack-item:not([gs-w])[data-gs-w="4"] {
	width: 33.3333333%;
}

.ng-dashboard-gridstack.grid-stack .grid-stack-item[gs-w="5"], .ng-dashboard-gridstack.grid-stack .grid-stack-item:not([gs-w])[data-gs-w="5"] {
	width: 41.6666667%;
}

.ng-dashboard-gridstack.grid-stack .grid-stack-item[gs-w="6"], .ng-dashboard-gridstack.grid-stack .grid-stack-item:not([gs-w])[data-gs-w="6"] {
	width: 50%;
}

.ng-dashboard-gridstack.grid-stack .grid-stack-item[gs-w="7"], .ng-dashboard-gridstack.grid-stack .grid-stack-item:not([gs-w])[data-gs-w="7"] {
	width: 58.3333333%;
}

.ng-dashboard-gridstack.grid-stack .grid-stack-item[gs-w="8"], .ng-dashboard-gridstack.grid-stack .grid-stack-item:not([gs-w])[data-gs-w="8"] {
	width: 66.6666667%;
}

.ng-dashboard-gridstack.grid-stack .grid-stack-item[gs-w="9"], .ng-dashboard-gridstack.grid-stack .grid-stack-item:not([gs-w])[data-gs-w="9"] {
	width: 75%;
}

.ng-dashboard-gridstack.grid-stack .grid-stack-item[gs-w="10"], .ng-dashboard-gridstack.grid-stack .grid-stack-item:not([gs-w])[data-gs-w="10"] {
	width: 83.3333333%;
}

.ng-dashboard-gridstack.grid-stack .grid-stack-item[gs-w="11"], .ng-dashboard-gridstack.grid-stack .grid-stack-item:not([gs-w])[data-gs-w="11"] {
	width: 91.6666667%;
}

.ng-dashboard-gridstack.grid-stack .grid-stack-item[gs-w="12"], .ng-dashboard-gridstack.grid-stack .grid-stack-item:not([gs-w])[data-gs-w="12"] {
	width: 100%;
}

.ng-cityview-dashboard.grid-stack .grid-stack-item-content, .ng-dashboard-gridstack.grid-stack .grid-stack-item-content {
	width: 100%;
	height: 100%;
	display: block;
	padding: 4px;
	margin: 0;
	box-sizing: border-box;
	border-radius: var(--card-radius);
	overflow: hidden;
}

body.ui-reboot.ng-shell .ng-dashboard-gridstack.grid-stack .grid-stack-item-content > .ng-cityview-card {
	height: 100%;
	border-radius: inherit;
	margin: 0;
}

body.ui-reboot.ng-shell .ng-dashboard-gridstack.grid-stack .grid-stack-item-content > .ng-cityview-card:is(.ng-grid-citymap, .ng-grid-radar) {
	background: transparent;
	border: 0;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

body.ui-reboot.ng-shell .ng-dashboard-gridstack.grid-stack .grid-stack-item-content > .ng-cityview-card.ng-grid-radar {
	background: transparent;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

body.ui-reboot.ng-shell .ng-dashboard-gridstack.grid-stack .grid-stack-item-content > .ng-cityview-card:is(.ng-grid-citymap, .ng-grid-radar):hover {
	border-color: transparent;
	box-shadow: none;
}

body.ui-reboot.ng-shell .ng-dashboard-gridstack.grid-stack .grid-stack-item-content > .ng-cityview-card:is(.ng-grid-citymap, .ng-grid-radar)::before, body.ui-reboot.ng-shell .ng-dashboard-gridstack.grid-stack .grid-stack-item-content > .ng-cityview-card:is(.ng-grid-citymap, .ng-grid-radar)::after {
	content: none;
	display: none;
}

body.ui-reboot.ng-shell .ng-dashboard-gridstack.grid-stack .ng-header-radar-mini {
	border: 0;
	padding: 6px;
	position: relative;
	width: min(240px, 100%);
	height: auto;
	aspect-ratio: 1 / 1;
	min-height: 0;
	max-height: none;
	min-width: 0;
	max-width: 240px;
	margin: 0 auto;
	box-sizing: border-box;
	border-radius: 50%;
	align-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.ng-cityview-card.ng-grid-radar .ng-header-radar-mini.ng-radar-canvas-wrap {
	position: relative;
	border-radius: 50%;
	overflow: hidden;
	isolation: isolate;
	filter: brightness(0.84) contrast(0.94);
	box-shadow: inset 0 0 18px rgba(16, 185, 129, 0.08), inset 0 0 40px rgba(0, 0, 0, 0.38);
}

.ng-cityview-card.ng-grid-radar .ng-header-radar-mini.ng-radar-canvas-wrap .ng-radar-canvas {
	border-radius: 0;
	filter: brightness(1.08) contrast(1.06) saturate(1.03);
}

.ng-cityview-card.ng-grid-radar .ng-header-radar-mini.ng-radar-canvas-wrap::before,
.ng-cityview-card.ng-grid-radar .ng-header-radar-mini.ng-radar-canvas-wrap::after {
	content: '';
	display: block;
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	z-index: 4;
}

.ng-cityview-card.ng-grid-radar .ng-header-radar-mini.ng-radar-canvas-wrap .ng-radar-canvas,
.ng-cityview-card.ng-grid-radar .ng-header-radar-mini.ng-radar-canvas-wrap canvas {
	position: relative;
	z-index: 1;
}

.ng-cityview-card.ng-grid-radar .ng-header-radar-mini.ng-radar-canvas-wrap::before {
	/* CRT-Look: dichte gruene Zeilen + eine helle Scanlinie, die von oben nach unten wandert. */
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(120, 255, 188, 0) 47%, rgba(170, 255, 214, 0.82) 50%, rgba(120, 255, 188, 0) 53%, rgba(0, 0, 0, 0) 100%),
		repeating-linear-gradient(0deg, rgba(0, 0, 0, 0) 0 1px, rgba(32, 255, 138, 0.08) 1px 2px, rgba(0, 0, 0, 0) 2px 4px),
		repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 3px, rgba(34, 197, 94, 0.07) 3px 4px, rgba(0, 0, 0, 0) 4px 8px),
		linear-gradient(0deg, rgba(8, 44, 24, 0.2), rgba(12, 76, 40, 0.12)),
		radial-gradient(circle at 28% 36%, rgba(34, 255, 142, 0.08) 0 18%, transparent 42%),
		radial-gradient(circle at 72% 64%, rgba(16, 185, 129, 0.06) 0 14%, transparent 40%);
	mix-blend-mode: screen;
	filter: brightness(1.08) contrast(1.04);
	opacity: 0.24;
	background-size: 100% 100%, 100% 4px, 10px 100%, 100% 100%, 100% 100%, 100% 100%;
	background-repeat: no-repeat, repeat, repeat, no-repeat, no-repeat, no-repeat;
	animation: ngRadarNoiseShift 4.8s linear infinite, ngRadarNoiseFlicker 6.2s ease-in-out infinite, ngRadarScanlineSweep 8.8s linear infinite;
}

.ng-cityview-card.ng-grid-radar .ng-header-radar-mini.ng-radar-canvas-wrap::after {
	/* Deutlicher Glitch: horizontale Slice-Stoerungen und harte Unterbrechungen. */
	background:
		repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 5px, rgba(110, 255, 190, 0.09) 5px 6px, rgba(0, 0, 0, 0) 6px 12px),
		linear-gradient(90deg, rgba(120, 255, 188, 0) 0 22%, rgba(120, 255, 188, 0.18) 28%, rgba(120, 255, 188, 0) 36%, rgba(120, 255, 188, 0) 100%);
	mix-blend-mode: lighten;
	opacity: 0.4;
	animation: ngRadarGlitchSlice 3.2s steps(1, end) infinite, ngRadarGlitchDrop 3.8s steps(1, end) infinite, ngGlitch 9.4s steps(1, end) infinite;
}

body.ui-reboot.ng-shell .ng-dashboard-gridstack.grid-stack .ng-cityview-card > .ng-cityview-card-title {
	flex: 0 0 auto;
}

.ng-coord-row.ng-row-occupied:is(.ng-row-protected, .ng-row-unattackable):not(.ng-row-player) {
	color: var(--ui-alert-orange);
}

.ng-coord-row.ng-row-occupied:is(.ng-row-protected, .ng-row-unattackable):not(.ng-row-player) :is(a, span, i) {
	color: inherit;
}

.ng-page-coordinates .ng-coord-embed {
	max-width: var(--ng-content-max-width);
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.ng-coord-embed-navwrap {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) 56px;
	gap: var(--space-8);
	align-items: stretch;
}

.ng-coord-embed-navbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	min-width: 56px;
	min-height: 56px;
	padding: 0;
	text-decoration: none;
	color: var(--ui-accent-cyan);
	background: transparent;
	border: 0;
	}

.ng-coord-embed-navbtn:hover {
	color: var(--ui-accent-cyan);
}

.ng-page-coordinates .ng-coord-shell {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-12);
	max-width: var(--ng-content-max-width);
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

.ng-page-coordinates .ng-coord-main {
	min-width: 0;
}

.ng-page-coordinates .ng-coord-table, .ng-coord-embed .ng-coord-table, #ng-comm-fullview-content .ng-coord-table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	table-layout: fixed;
	border-radius: 12px;
	overflow: hidden;
}

.ng-page-coordinates .ng-coord-table thead th, .ng-coord-embed .ng-coord-table thead th, #ng-comm-fullview-content .ng-coord-table thead th {
	text-align: left;
	font-family: var(--font-body);
	font-size: var(--fs-12);
	
	color: var(--ui-accent-cyan);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	padding: 8px 8px;
}

.ng-coord-table .ng-coord-link {
	color: var(--ui-accent-cyan);
	text-decoration: none;
	cursor: pointer;
	transition: color 0.15s ease;
}
.ng-coord-table .ng-coord-link:hover {
	color: var(--accent, #5ab8ff);
	text-decoration: underline;
}

.ng-page-coordinates .ng-coord-table tbody td {
	padding: 6px 8px;
	vertical-align: middle;
	border-bottom: 1px solid rgba(0, 0, 0, 0.20);
}

.ng-page-coordinates .ng-col-actions, .ng-coord-embed .ng-col-actions {
	text-align: center;
	display: flex;
	justify-content: center;
	gap: 2px;
}

.ng-col-actions .ng-terminal-action i {
	font-size: var(--fs-12);
}

.ng-col-actions .ng-terminal-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	text-decoration: none;
	color: var(--ui-accent-cyan);
}

a.ng-terminal-action:hover {
	opacity: 0.8;
}

a.ng-terminal-action:visited {
	color: inherit;
}

a.ng-terminal-action.ng-action-transport {
	background: rgba(34, 197, 94, 0.2);
	border-radius: 4px;
}
a.ng-terminal-action.ng-action-transport:hover {
	background: rgba(34, 197, 94, 0.35);
}
a.ng-terminal-action.ng-action-transport i {
	color: #22c55e;
}

a.ng-terminal-action.ng-action-attack {
	background: rgba(220, 38, 38, 0.15);
	border-radius: 4px;
}
a.ng-terminal-action.ng-action-attack:hover {
	background: rgba(220, 38, 38, 0.3);
}
a.ng-terminal-action.ng-action-attack i {
	color: #ef4444;
}

a.ng-terminal-action.ng-action-spy {
	background: rgba(234, 179, 8, 0.15);
	border-radius: 4px;
}
a.ng-terminal-action.ng-action-spy:hover {
	background: rgba(234, 179, 8, 0.3);
}
a.ng-terminal-action.ng-action-spy i {
	color: #eab308;
}

a.ng-terminal-action.ng-action-colonize {
	background: rgba(59, 130, 246, 0.15);
	border-radius: 4px;
}
a.ng-terminal-action.ng-action-colonize:hover {
	background: rgba(59, 130, 246, 0.3);
}
a.ng-terminal-action.ng-action-colonize i {
	color: #3b82f6;
}

span.ng-terminal-action.ng-action-disabled {
	opacity: 0.2;
	cursor: default;
	pointer-events: none;
}
span.ng-terminal-action.ng-action-disabled i {
	color: rgba(255, 255, 255, 0.4);
}

.ng-page-coordinates .ng-coord-table tbody tr:nth-child(even) {
	background: rgba(255, 255, 255, 0);
}

.ng-page-coordinates .ng-coord-main-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-10);
	flex-wrap: wrap;
}
.ng-cityview-card.ng-grid-radar {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	overflow: hidden;
}

/* ── Globe-Hintergrund (außerhalb des card-grid, S.H.I.E.L.D.-Style) ── */
.ng-dashboard-scene {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* Globe füllt den gesamten Viewport als fixer Hintergrund hinter allem */
.ng-galaxy-background {
	position: fixed;
	inset: 0;
	z-index: 0;
	background-color: #020408;
	background-image: url('/pics/nebulabgtwo.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	pointer-events: auto;
}

.ng-galaxy-background::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(circle at 100% 100%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.98) 23%, rgba(0, 0, 0, 0.78) 38%, rgba(0, 0, 0, 0.42) 46%, rgba(0, 0, 0, 0.14) 58%, rgba(0, 0, 0, 0) 70%);
	z-index: 1;
}

.ng-galaxy-background .ng-galaxy-canvas {
	position: absolute;
	inset: 0;
}

.ng-galaxy-background .ng-galaxy-tooltip {
	position: absolute;
	z-index: 5;
	pointer-events: none;
}

body.ui-reboot.ng-shell .ng-galaxy-tooltip.ng-galaxy-tooltip--overlay {
	position: fixed;
	z-index: 2147483647;
	pointer-events: none;
}

.ng-galaxy-tooltip.ng-galaxy-tooltip--overlay::before, .ng-galaxy-tooltip.ng-galaxy-tooltip--overlay::after, .ng-galaxy-tooltip.ng-galaxy-tooltip--overlay .ng-gx-card::before, .ng-galaxy-tooltip.ng-galaxy-tooltip--overlay .ng-gx-card::after {
	content: none;
	display: none;
}

body.ui-reboot.ng-shell .ng-galaxy-tooltip.ng-galaxy-tooltip--overlay .ng-gx-card {
	width: 300px;
	display: grid;
	grid-template-columns: 92px 1fr;
	gap: var(--space-12);
	padding: 12px;
	color: var(--ui-accent-cyan);
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(16px) saturate(1.2);
	-webkit-backdrop-filter: blur(16px) saturate(1.2);
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 0 40px rgba(255, 255, 255, 0.03);
	}

body.ui-reboot.ng-shell .ng-galaxy-tooltip.ng-galaxy-tooltip--overlay .ng-gx-card__body {
	min-width: 0;
	display: grid;
	gap: var(--space-8);
}

body.ui-reboot.ng-shell .ng-galaxy-tooltip.ng-galaxy-tooltip--overlay .ng-gx-card__row--top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-12);
}

body.ui-reboot.ng-shell .ng-galaxy-tooltip.ng-galaxy-tooltip--overlay .ng-gx-card__title {
	font-size: var(--fs-12);
	color: var(--ui-accent-cyan);
	white-space: normal;
}

body.ui-reboot.ng-shell .ng-galaxy-tooltip.ng-galaxy-tooltip--overlay .ng-gx-card__badge {
	font-size: var(--fs-12);
	padding: 2px 7px;
	border: 1px solid var(--ui-accent-cyan);
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.9);
	white-space: nowrap;
	border-radius: 12px;
}

body.ui-reboot.ng-shell .ng-galaxy-tooltip.ng-galaxy-tooltip--overlay .ng-gx-card__meta {
	display: grid;
	gap: var(--space-6);
}

body.ui-reboot.ng-shell .ng-galaxy-tooltip.ng-galaxy-tooltip--overlay .ng-gx-card__kv {
	display: grid;
	grid-template-columns: 82px 1fr;
	align-items: start;
	column-gap: var(--space-12);
	font-size: var(--fs-12);
}

body.ui-reboot.ng-shell .ng-galaxy-tooltip.ng-galaxy-tooltip--overlay .ng-gx-card__kv .k {
	color: var(--ui-accent-cyan);
	white-space: nowrap;
}

body.ui-reboot.ng-shell .ng-galaxy-tooltip.ng-galaxy-tooltip--overlay .ng-gx-card__kv .v {
	color: var(--ui-accent-cyan);
	text-align: left;
	min-width: 0;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	overflow-wrap: anywhere;
}

body.ui-reboot.ng-shell .ng-galaxy-tooltip.ng-galaxy-tooltip--overlay .ng-alliance-tag {
	color: var(--ui-accent-cyan);
	margin-left: 6px;
}

body.ui-reboot.ng-shell .ng-galaxy-tooltip.ng-galaxy-tooltip--overlay .ng-gx-card__img {
	width: 92px;
	height: 72px;
	overflow: hidden;
	border: 1px solid var(--ui-accent-cyan);
	background: rgba(255, 255, 255, 0.04);
	border-radius: 10px;
}

body.ui-reboot.ng-shell .ng-galaxy-tooltip.ng-galaxy-tooltip--overlay .ng-gx-card__img img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	display: block;
	opacity: 0.92;
}

body.ui-reboot.ng-shell .ng-galaxy-tooltip.ng-galaxy-tooltip--overlay .ng-gx-card__img--empty {
	background: rgba(255, 255, 255, 0.04);
}

/* Fallback-Tooltip-Stile wenn der Tooltip noch im Globe-Hintergrund liegt (kein Overlay) */
.ng-galaxy-background .ng-gx-card {
	width: 260px;
	display: grid;
	grid-template-columns: 92px 1fr;
	gap: var(--space-12);
	padding: 10px;
	color: var(--ui-accent-cyan);
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(16px) saturate(1.2);
	-webkit-backdrop-filter: blur(16px) saturate(1.2);
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 0 40px rgba(255, 255, 255, 0.03);
	}

.ng-galaxy-background .ng-gx-card::before, .ng-galaxy-background .ng-gx-card::after {
	content: none;
	display: none;
}

.ng-galaxy-background .ng-gx-card__img {
	width: 92px;
	height: 72px;
	overflow: hidden;
	border: 1px solid var(--ui-accent-cyan);
	background: rgba(255, 255, 255, 0.04);
	border-radius: 10px;
}

.ng-galaxy-background .ng-gx-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ng-galaxy-background .ng-gx-card__img--empty {
	background: rgba(255, 255, 255, 0.04);
}

.ng-galaxy-background .ng-gx-card__body {
	min-width: 0;
}

.ng-galaxy-background .ng-gx-card__row--top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-12);
}

.ng-galaxy-background .ng-gx-card__title {
	font-size: var(--fs-12);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ng-galaxy-background .ng-gx-card__badge {
	font-size: var(--fs-12);
	padding: 2px 6px;
	border: 1px solid var(--ui-accent-cyan);
	background: rgba(255, 255, 255, 0.08);
	white-space: nowrap;
	border-radius: 12px;
}

.ng-galaxy-background .ng-gx-card__meta {
	margin-top: 8px;
	display: grid;
	gap: var(--space-6);
}

.ng-galaxy-background .ng-gx-card__kv {
	display: flex;
	justify-content: space-between;
	gap: var(--space-12);
	font-size: var(--fs-12);
}

.ng-galaxy-background .ng-gx-card__kv .k {
	color: var(--card-bg);
	white-space: nowrap;
}

.ng-galaxy-background .ng-gx-card__kv .v {
	color: var(--ui-accent-cyan);
	text-align: right;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ng-galaxy-background .ng-galaxy-status {
	font-size: var(--fs-12);
	color: var(--header-bg);
}

.ng-cityview-card.ng-grid-radar > .ui-stack.ui-gap-8 {
	flex: 1 1 0;
	min-height: 0;
	overflow: auto;
	align-items: center;
	text-align: center;
}

.ng-cityview-card:is(.ng-grid-radar, .ng-grid-flotten-outgoing, .ng-grid-flotten-incoming, .ng-grid-flights) > .ui-stack.ui-gap-8 > div {
	width: 100%;
}

.ng-cityview-card:is(.ng-grid-flotten-outgoing, .ng-grid-flotten-incoming, .ng-grid-flights) > .ui-stack.ui-gap-8 {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.ng-airport-layout .ng-fleet-item {
	padding-bottom: 10px;
}

.ng-airport-layout .ng-fleet-item > .ng-fleet-input {
	margin-top: auto;
}

.ng-cityview-skyline {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-6);
}

.ng-cityview-sky {
	background: transparent;
	border: none;
	padding: 4px 2px;
	text-align: center;
}

.ng-empty-state {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--fs-12);
    color: var(--ui-accent-cyan);
}

.ng-empty-text {
	text-align: center;
	font-family: var(--font-body);
}

.ng-cityview-card:is(.ng-active-jobs-card, .ng-grid-flotten-outgoing, .ng-grid-flotten-incoming) .ng-empty-text {
	width: 100%;
	font-size: var(--fs-11);
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.72);
	letter-spacing: 0.01em;
	text-wrap: balance;
}

.ng-header-radar-mini::before {
	content: none;
}

.ng-header-radar-mini::after {
	content: none;
}

.ng-header-radar-mini.ng-crt-surface {
	position: relative;
	overflow: hidden;
	border-radius: inherit;
	background-color: transparent;
}

.ng-header-radar-mini.ng-crt-surface::before {
	content: none;
}

.ng-header-radar-mini.ng-crt-surface::after {
	content: none;
}

@keyframes ngRadarScanLine{
	0% {
		transform: translateY(-110%);
	}
	100% {
		transform: translateY(110%);
	}
}

.ng-header-radar-mini .ng-radar-canvas {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 0;
	filter: none;
	font-family: 'GeneraleStation', var(--font-body);
	z-index: 2;
}

.ng-header-radar-mini .ng-radar-live {
	position: absolute;
	top: 50%;
	left: 50%;
	right: auto;
	transform: translate(-50%, -50%);
	z-index: 6;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1.05;
	padding: 2px 6px;
	font-family: 'GeneraleStation', var(--font-body);
	font-size: var(--fs-12);
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: rgba(154, 222, 226, 0.78);
	background: rgba(2, 14, 12, 0.2);
	text-shadow: 0 0 6px rgba(191, 239, 255, 0.28);
	isolation: isolate;
	filter: none;
	animation: ngRadarLiveJitter 3.8s steps(1, end) infinite, ngRadarLiveSkew 4.2s steps(1, end) infinite;
}

.ng-header-radar-mini .ng-radar-live #ng-radar-clock {
	font-family: inherit;
	position: relative;
	z-index: 2;
	color: rgba(170, 234, 238, 0.8);
	text-shadow: -0.4px 0 rgba(255, 80, 80, 0.14), 0.4px 0 rgba(80, 255, 200, 0.16), 0 0 5px rgba(191, 239, 255, 0.3);
	animation: ngRadarClockSlice 7.9s steps(1, end) infinite -1.3s, ngRadarClockNudge 11.7s steps(1, end) infinite -4.1s, ngRadarClockChromatic 13.1s linear infinite -2.8s;
}

.ng-header-radar-mini .ng-radar-live::before {
	content: none;
	display: none;
}

.ng-header-radar-mini .ng-radar-live::after {
	content: 'LIVE';
	display: block;
	margin-top: 3px;
	position: relative;
	z-index: 2;
	font-size: var(--fs-10);
	letter-spacing: 1px;
	color: rgba(154, 222, 226, 0.72);
	text-shadow: -0.5px 0 rgba(255, 90, 90, 0.2), 0.5px 0 rgba(90, 255, 210, 0.22), 0 0 6px rgba(191, 239, 255, 0.26);
	animation: ngRadarLiveDotBlink 2.8s steps(1, end) infinite, ngRadarLiveTextGlitch 5.2s steps(1, end) infinite;
}

@keyframes ngRadarLiveDotBlink{
	0%, 55% {
		opacity: 1;
	}
	56%, 100% {
		opacity: 0.15;
	}
}

@keyframes ngRadarLiveJitter {
	0%, 100% { transform: translate(-50%, -50%) translateX(0); }
	18% { transform: translate(-50%, -50%) translateX(-1px); }
	19% { transform: translate(-50%, -50%) translateX(1px); }
	37% { transform: translate(-50%, -50%) translateX(-0.5px); }
	38% { transform: translate(-50%, -50%) translateX(0.5px); }
	62% { transform: translate(-50%, -50%) translateX(-1.5px); }
	63% { transform: translate(-50%, -50%) translateX(1px); }
}

@keyframes ngRadarLiveSkew {
	0%, 100% { transform: translate(-50%, -50%) skewX(0deg); }
	14% { transform: translate(-50%, -50%) skewX(-3deg); }
	15% { transform: translate(-50%, -50%) skewX(2deg); }
	43% { transform: translate(-50%, -50%) skewX(-2deg); }
	44% { transform: translate(-50%, -50%) skewX(1.5deg); }
	72% { transform: translate(-50%, -50%) skewX(-2.5deg); }
	73% { transform: translate(-50%, -50%) skewX(2deg); }
}

@keyframes ngRadarLiveTextGlitch {
	0%, 100% { transform: translateX(0); clip-path: inset(0 0 0 0); }
	12% { transform: translateX(-1px); clip-path: inset(16% 0 52% 0); }
	13% { transform: translateX(1px); clip-path: inset(54% 0 20% 0); }
	29% { transform: translateX(-0.5px); clip-path: inset(0 0 0 0); }
	30% { transform: translateX(0.5px); clip-path: inset(72% 0 6% 0); }
	51% { transform: translateX(-1px); clip-path: inset(26% 0 44% 0); }
	52% { transform: translateX(0); clip-path: inset(0 0 0 0); }
}

@keyframes ngRadarClockSlice {
	0%, 100% { clip-path: inset(0 0 0 0); }
	11% { clip-path: inset(0 0 0 0); }
	12% { clip-path: inset(20% 0 48% 0); }
	13% { clip-path: inset(0 0 0 0); }
	36% { clip-path: inset(0 0 0 0); }
	37% { clip-path: inset(64% 0 8% 0); }
	38% { clip-path: inset(0 0 0 0); }
	79% { clip-path: inset(0 0 0 0); }
	80% { clip-path: inset(32% 0 36% 0); }
	81% { clip-path: inset(0 0 0 0); }
}

@keyframes ngRadarClockNudge {
	0%, 100% { transform: translateX(0); }
	18% { transform: translateX(0); }
	19% { transform: translateX(-0.5px); }
	20% { transform: translateX(0.5px); }
	21% { transform: translateX(0); }
	58% { transform: translateX(0); }
	59% { transform: translateX(-1px); }
	60% { transform: translateX(0); }
	92% { transform: translateX(0.5px); }
	93% { transform: translateX(0); }
}

@keyframes ngRadarClockChromatic {
	0%, 100% {
		text-shadow: -0.5px 0 rgba(255, 80, 80, 0.18), 0.5px 0 rgba(80, 255, 200, 0.2), 0 0 6px rgba(191, 239, 255, 0.42);
	}
	29% {
		text-shadow: 0 0 rgba(255, 80, 80, 0), 0 0 rgba(80, 255, 200, 0), 0 0 5px rgba(191, 239, 255, 0.38);
	}
	63% {
		text-shadow: -0.5px 0 rgba(255, 80, 80, 0.2), 0.5px 0 rgba(80, 255, 200, 0.22), 0 0 7px rgba(191, 239, 255, 0.44);
	}
	84% {
		text-shadow: -0.2px 0 rgba(255, 80, 80, 0.16), 0.2px 0 rgba(80, 255, 200, 0.18), 0 0 6px rgba(191, 239, 255, 0.4);
	}
}

@keyframes ngRadarLiveInterference {
	0% { opacity: 0.34; background-position: 0 0, 0 0; }
	25% { opacity: 0.58; background-position: 0 6px, 10px 0; }
	50% { opacity: 0.2; background-position: 0 12px, -8px 0; }
	75% { opacity: 0.5; background-position: 0 4px, 6px 0; }
	100% { opacity: 0.34; background-position: 0 0, 0 0; }
}

.ng-radar-canvas {
	display: block;
}

.ng-cityview-dashboard.grid-stack .grid-stack-item.ui-draggable-dragging, .ng-dashboard-gridstack.grid-stack .grid-stack-item.ui-draggable-dragging {
	z-index: 50;
}

body.ng-dashboard-dragging .ng-dashboard-gridstack.grid-stack::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(to right, var(--ui-accent-cyan) 1px, transparent 1px),linear-gradient(to bottom, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
	background-size: calc(100% / 12) 80px;
	opacity: 1;
	mix-blend-mode: normal;
	border-radius: var(--card-radius);
}

body.ng-dashboard-dragging .ng-dashboard-gridstack.grid-stack .grid-stack-item > .grid-stack-item-content, body.ng-dashboard-dragging .ng-cityview-dashboard.grid-stack .grid-stack-item > .grid-stack-item-content {
	position: relative;
}

body.ng-dashboard-dragging .ng-dashboard-gridstack.grid-stack .grid-stack-item > .grid-stack-item-content::after, body.ng-dashboard-dragging .ng-cityview-dashboard.grid-stack .grid-stack-item > .grid-stack-item-content::after {
	content: '';
	position: absolute;
	inset: 2px;
	pointer-events: none;
	border: 1px solid var(--ui-accent-cyan);
	border-radius: var(--card-radius);
	}

body.ng-dashboard-dragging .ng-cityview-dashboard.grid-stack .grid-stack-placeholder > .placeholder-content, .ng-dashboard-gridstack.grid-stack .grid-stack-placeholder > .placeholder-content {
	border: 2px dashed rgba(59, 130, 246, 0.40);
	background: rgba(59, 130, 246, 0.06);
	border-radius: var(--card-radius);
	position: relative;
	inset: 0;
}

body.ng-dashboard-dragging .ng-cityview-dashboard.grid-stack .grid-stack-placeholder > .placeholder-content::after, .ng-dashboard-gridstack.grid-stack .grid-stack-placeholder > .placeholder-content::after {
	content: none;
}

.ng-system-message-body {
	margin-top: 8px;
	padding: 12px;
	background: rgba(255, 255, 255, 0.45);
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 12px;
}

.ng-system-message-body a {
	color: var(--color-primary);
	text-decoration: none;
	transition: all 0.2s ease;
}

.ng-system-message-body a:hover {
	color: var(--ui-accent-cyan);
	text-shadow: 0 0 8px var(--color-primary);
}

.ng-action-cell {
	white-space: nowrap;
	display: flex;
	gap: var(--space-6);
	align-items: center;
	flex-wrap: wrap;
}

a.ng-tab, .ng-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	padding: var(--space-8) var(--space-16);
	min-height: 32px;
	background: rgba(255, 255, 255, 0);
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 12px;

	font-family: var(--font-body);
	font-size: var(--fs-12);
	
	
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

a.ng-tab:hover, .ng-tab:hover {
	background: rgba(255, 255, 255, 0);
	border-color: rgba(255, 255, 255, 0.12);
	color: var(--ui-accent-cyan);
}

a.ng-tab.active, .ng-tab.active {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.15);
	color: var(--color-primary);
	text-shadow: 0 0 8px rgba(255, 255, 255, 0.20);
}

.ng-alliance-section {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 12px;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding: var(--space-12);
	margin-bottom: var(--space-8);
	color: var(--ui-accent-cyan);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
	transition: border-color .3s;
}

.ng-alliance-section:hover {
	border-color: rgba(255, 255, 255, 0.15);
}

.ng-alliance-content {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.ng-alliance-section:last-child {
	margin-bottom: 0;
}

.ng-board-post-form {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ng-board-post-form .ng-form-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	width: 100%;
}

.ng-board-post-form .ng-form-group label {
	display: block;
}

.ng-board-post-form .ng-input, .ng-board-post-form .ng-textarea {
	width: 100%;
}

.ng-board-post-form form {
	width: 100%;
}

@media (min-width: 800px) {
	.ng-board-post-form {
		min-width: 800px;
	}
}

.ng-board-messages {
	width: 100%;
}

.ng-alliance-section > form {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ng-alliance-section form > .ng-form-group {
	max-width: 500px;
	width: 100%;
	text-align: center;
}

.ng-alliance-section form > .ng-form-group .ng-input {
	text-align: center;
}

.ng-alliance-section .ng-textarea {
	max-width: 500px;
	width: 100%;
}

.ng-alliance-report-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-6);
	align-items: end;
}

.ng-alliance-report-filters .ng-input, .ng-alliance-report-filters select.ng-input {
	width: auto;
}

.ng-alliance-report-filters .ng-form-group {
	margin-bottom: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.ng-alliance-report-actions {
	display: flex;
	align-items: flex-end;
}

.ng-alliance-application-message {
	padding: 14px;
	background: rgba(255, 255, 255, 0);
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 12px;
	margin: 10px 0;
}

.ng-alliance-application-title {
	color: var(--ui-accent-cyan);
	margin: 0 0 14px 0;
}

.ng-alliance-application-text {
	font-size: var(--fs-12);
	margin-bottom: 14px;
}

.ng-alliance-application-actions {
	display: flex;
	gap: var(--space-12);
	flex-wrap: wrap;
}

.ng-alliance-application-link {
	display: inline-block;
	padding: 10px 20px;
	background: rgba(217, 119, 6, 0.12);
	border: 1px solid rgba(217, 119, 6, 0.4);
	color: var(--color-accent, #D97706);
	text-decoration: none;
	border-radius: 8px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: background .2s, border-color .2s;
}

.ng-alliance-application-link:hover {
	background: rgba(217, 119, 6, 0.25);
	border-color: rgba(217, 119, 6, 0.6);
}

.ng-alliance-application-note {
	font-size: var(--fs-12);
	color: var(--ui-accent-cyan);
	margin-top: 14px;
}

.ng-alliance-overview {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.ng-alliance-crest-admin {
	display: grid;
	gap: var(--space-10);
	padding: var(--space-8);
	border: 1px solid var(--ui-accent-cyan);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
	border-radius: 16px;
}

.ng-alliance-crest-layout {
	display: grid;
	grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
	gap: var(--space-10);
	align-items: start;
}

.ng-alliance-crest-preview-panel {
	display: grid;
	gap: var(--space-8);
	justify-items: center;
}

.ng-alliance-crest-frame {
	width: min(300px, 100%);
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
	padding: 20px;
	border: 1px solid var(--ui-accent-cyan);
	background:
		radial-gradient(circle at top, rgba(255, 255, 255, 0.14), transparent 42%),
		linear-gradient(180deg, rgba(8, 14, 22, 0.92), rgba(17, 25, 34, 0.92));
	border-radius: 18px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 40px rgba(0, 0, 0, 0.22);
}

.ng-alliance-crest-frame svg {
	width: 100%;
	height: 100%;
	display: block;
}

.ng-alliance-crest-meta {
	display: grid;
	gap: var(--space-4);
	justify-items: center;
	text-align: center;
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12);
}

.ng-alliance-crest-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-6);
}

.ng-alliance-crest-button {
	appearance: none;
	border: 1px solid var(--ui-accent-cyan);
	background: rgba(255, 255, 255, 0.05);
	color: var(--ui-accent-cyan);
	padding: 10px 14px;
	border-radius: 10px;
	font-family: var(--font-body);
	font-size: var(--fs-12);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.ng-alliance-crest-button:hover, .ng-alliance-crest-button:focus-visible {
	background: rgba(255, 255, 255, 0.10);
	border-color: rgba(255, 255, 255, 0.24);
	transform: translateY(-1px);
	outline: none;
}

.ng-alliance-crest-button.is-primary {
	background: linear-gradient(180deg, rgba(194, 138, 63, 0.34), rgba(113, 73, 24, 0.38));
	border-color: rgba(225, 180, 92, 0.46);
}

.ng-alliance-crest-controls {
	display: grid;
	gap: var(--space-8);
}

.ng-alliance-crest-progress {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-6);
}

.ng-alliance-crest-kpi, .ng-alliance-crest-next {
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid var(--ui-accent-cyan);
	background: rgba(255, 255, 255, 0.03);
}

.ng-alliance-crest-kpi-label {
	display: block;
	font-size: var(--fs-11);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ui-accent-cyan);
	margin-bottom: 6px;
}

.ng-alliance-crest-kpi-value {
	display: block;
	font-size: var(--fs-18);
	color: var(--ui-accent-cyan);
	font-weight: 600;
}

.ng-alliance-crest-next {
	grid-column: 1 / -1;
	display: grid;
	gap: 8px;
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12);
}

.ng-alliance-crest-next strong {
	color: var(--ui-accent-cyan);
	font-weight: 600;
}

/* Hinweistext: Wie sammelt eine Allianz Spenden? */
.ng-alliance-crest-howto {
	font-size: var(--fs-11);
	line-height: 1.4;
	opacity: 0.85;
}

.ng-alliance-crest-howto em {
	font-style: normal;
	color: var(--ui-accent-cyan);
	font-weight: 600;
}

/* Tier-Badge fuer die Anzeige in Listen, Headern und Profilen */
.ng-alliance-tier-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px;
	border-radius: 999px;
	border: 1px solid var(--ui-accent-cyan);
	background: rgba(0, 0, 0, 0.35);
	color: var(--ui-accent-cyan);
	font-size: var(--fs-11);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ng-alliance-tier-badge[data-tier="forged"] {
	border-color: #c0c8d2;
	color: #d6dde6;
}

.ng-alliance-tier-badge[data-tier="ascendant"] {
	border-color: #8de0b7;
	color: #b9f2d4;
}

.ng-alliance-tier-badge[data-tier="sovereign"] {
	border-color: #f0c15d;
	color: #fbe39c;
}

.ng-alliance-crest-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ng-alliance-crest-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--ui-accent-cyan);
	color: var(--ui-accent-cyan);
	font-size: var(--fs-11);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ng-alliance-crest-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-8);
}

.ng-alliance-crest-field {
	display: grid;
	gap: 8px;
}

.ng-alliance-crest-field label {
	font-size: var(--fs-11);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ui-accent-cyan);
}

.ng-alliance-crest-select {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var(--ui-accent-cyan);
	background: rgba(7, 12, 19, 0.82);
	color: var(--ui-accent-cyan);
	font-family: var(--font-body);
	font-size: var(--fs-14);
}

.ng-alliance-crest-select:focus {
	outline: none;
	border-color: rgba(234, 192, 118, 0.46);
	box-shadow: 0 0 0 3px rgba(194, 138, 63, 0.16);
}

.ng-alliance-crest-status {
	min-height: 20px;
	font-size: var(--fs-12);
	color: var(--ui-accent-cyan);
}

.ng-alliance-crest-status.is-error {
	color: #ff918d;
}

.ng-alliance-crest-status.is-success {
	color: #9ce39b;
}

.ng-alliance-crest-hint {
	font-size: var(--fs-12);
	color: var(--ui-accent-cyan);
	line-height: 1.5;
}

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

	.ng-alliance-crest-progress, .ng-alliance-crest-grid {
		grid-template-columns: 1fr;
	}
}

.ng-alliance-image-frame {
	width: 300px;
	height: 300px;
	position: relative;
	border: 1px solid var(--ui-accent-cyan);
	background: rgba(0, 0, 0, 0.50);
	cursor: pointer;
	overflow: hidden;
}

.ng-alliance-image-frame:focus {
	outline: none;
	border-color: rgba(255, 255, 255, 0.40);
}

.ng-alliance-image-preview {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.ng-alliance-image-placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--font-body);
	font-size: var(--fs-12);
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--ui-accent-cyan);
}

.ng-alliance-image-status {
	font-size: var(--fs-12);
	color: var(--header-bg);
	min-height: 14px;
}

.ng-alliance-header {
	display: flex;
	gap: var(--space-4);
	flex-wrap: wrap;
}

.ng-alliance-image-display {
	display: flex;
	justify-content: center;
	padding: var(--space-8) 0;
}

.ng-alliance-image-overview {
	max-width: 300px;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.ng-alliance-image-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(300px, 100%);
	min-height: 220px;
	padding: var(--space-12);
	border: 1px solid var(--ui-accent-cyan);
	background: rgba(255, 255, 255, 0.03);
	color: var(--ui-accent-cyan);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-align: center;
}

.ng-alliance-stats {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.ng-alliance-member-cell {
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
}

.ng-alliance-list-cell {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
}

.ng-alliance-crest-small, .ng-alliance-crest-small-empty {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	flex-shrink: 0;
}

.ng-alliance-crest-small {
	object-fit: cover;
	background: rgba(255, 255, 255, 0.04);
}

.ng-alliance-crest-small-empty {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.03);
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12);
	text-transform: uppercase;
}

.ng-avatar-small {
	width: 32px;
	height: 32px;
	object-fit: cover;
	border: none;
}

.ng-stat-item {
	display: flex;
	gap: var(--space-8);
	align-items: baseline;
	border: none;
	background: transparent;
	border-radius: 12px;
	padding: 12px 14px;
	flex-direction: column;
}

.ng-stat-label {

	font-size: var(--fs-12);
	text-transform: uppercase;
	
	min-width: 100px;
}

.ng-stat-value {
	color: var(--ui-accent-cyan);
	
}

.ng-info-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-6);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 12px;
	margin-bottom: var(--space-4);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.ng-info-item:last-child {
	margin-bottom: 0;
}

.ng-info-label {

	font-size: var(--fs-12);
	margin-left: var(--space-2);
}

.ng-info-value {
	color: var(--ui-accent-cyan);
}

.ng-application-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-16);
	padding: 16px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 12px;
	margin-bottom: 12px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	transition: border-color .3s;
}

.ng-application-item:hover {
	border-color: rgba(255, 255, 255, 0.15);
}

.ng-application-item:last-child {
	margin-bottom: 0;
}

.ng-application-info {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 150px;
}

.ng-application-name {
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12);
}

.ng-application-date {

	font-size: var(--fs-12);
}

.ng-application-text {
	flex: 1;
	min-width: 200px;
	color: var(--color-dim, #ffffff);
	font-size: var(--fs-12);
	padding: 8px 16px;
	background: rgba(255, 255, 255, 0.02);
	border-radius: 12px;
	border-left: 3px solid rgba(217, 119, 6, 0.3);
}

.ng-application-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-12);
	margin-left: auto;
}

.ng-inline-form {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
}

.ng-reject-form .ng-input {
	min-width: 150px;
}

.ng-no-data {
	padding: 40px 20px;
	text-align: center;
	color: var(--ui-accent-cyan);
	font-style: italic;
	font-size: var(--fs-body);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.ng-table-container {
	overflow-x: auto;
}

.ng-data-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-12);
}

.ng-data-table th, .ng-data-table td {
	padding: var(--space-2) var(--space-3);
	text-align: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0);
}

.ng-data-table th {
	color: var(--color-primary);
	
	font-size: var(--fs-12);
	text-transform: uppercase;
	
	background: rgba(255, 255, 255, 0);
}

.ng-data-table tbody tr:hover {
	background: rgba(255, 255, 255, 0);
}

.ng-alliance-content .ng-data-table, .ng-alliance-content .ng-coord-table, .ng-alliance-content .ng-alliance-members-table, .ng-alliance-content div.ng-alliance-members-table, .ng-alliance-section .ng-data-table {
	width: auto;
	margin: 0 auto;
}

.ng-alliance-content > .ng-alliance-overview > .ng-alliance-header > .ng-alliance-stats > .ng-stat-item:first-child {
	flex-direction: row;
	justify-content: center;
	align-items: baseline;
}

.ng-alliance-content > .ng-alliance-overview > .ng-alliance-header > .ng-alliance-stats > .ng-stat-item:first-child .ng-stat-label {
	font-size: var(--fs-12);
	text-align: right;
}

.ng-alliance-content > .ng-alliance-overview > .ng-alliance-header > .ng-alliance-stats > .ng-stat-item:first-child .ng-stat-value {
	font-size: var(--fs-12);
}

.ng-alliance-content .ng-stat-item-members, .ng-alliance-content .ng-stat-item-members .ng-stat-value {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ng-alliance-content .ng-data-table th, .ng-alliance-content .ng-data-table td, .ng-alliance-content .ng-coord-table th, .ng-alliance-content .ng-coord-table td, .ng-alliance-content .ng-alliance-members-table th, .ng-alliance-content .ng-alliance-members-table td, .ng-alliance-section .ng-data-table th, .ng-alliance-section .ng-data-table td {
	padding: 4px 14px;
	white-space: nowrap;
}

/* Allianz-Seite – Card-Design (wie Skills) */
.ng-alliance-content .ng-data-table th, .ng-alliance-section .ng-data-table th {
	color: var(--color-dim, #ffffff);
	font-size: var(--fs-body);
	text-transform: uppercase;
	letter-spacing: .5px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ng-alliance-content .ng-data-table tbody tr:hover, .ng-alliance-section .ng-data-table tbody tr:hover {
	background: rgba(255, 255, 255, 0.04);
}

.ng-alliance-content .ng-data-table tbody td, .ng-alliance-section .ng-data-table tbody td {
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.ng-alliance-section label, .ng-alliance-section .ng-section-title, .ng-alliance-section strong, .ng-alliance-content label, .ng-alliance-content strong {
	color: var(--ui-accent-cyan);
}

.ng-alliance-section .ng-section-title {
	padding-bottom: var(--space-6);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	margin-bottom: var(--space-12);
	color: var(--color-dim, #ffffff);
	letter-spacing: .5px;
}

.ng-alliance-section .ng-text-muted, .ng-alliance-content .ng-text-muted {
	color: var(--color-dim, #ffffff);
}

.ng-alliance-content .ng-link, .ng-alliance-section .ng-link {
	color: var(--color-accent);
}

.ng-alliance-content .ng-link:hover, .ng-alliance-section .ng-link:hover {
	color: var(--ui-accent-cyan);
}

.ng-alliance-relations {
	color: var(--ui-accent-cyan);
}

.ng-alliance-content .ng-stat-label {
	color: var(--color-dim, #ffffff);
	font-size: var(--fs-body);
	letter-spacing: .5px;
}

.ng-alliance-content .ng-stat-value {
	font-size: var(--fs-body);
	font-weight: 600;
	color: var(--ui-accent-cyan);
}

/* Board-Nachrichten als Cards */
.ng-alliance-content .ng-board-message {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 12px;
	padding: var(--space-12);
	margin-bottom: var(--space-8);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	transition: border-color .3s;
}

.ng-alliance-content .ng-board-message:hover {
	border-color: rgba(255, 255, 255, 0.15);
}

.ng-alliance-content .ng-message-header {
	padding-bottom: var(--space-6);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	margin-bottom: var(--space-6);
}

.ng-alliance-content .ng-message-time, .ng-alliance-content .ng-message-author {
	color: var(--color-dim, #ffffff);
	font-size: var(--fs-11, .7rem);
}

.ng-alliance-content .ng-message-subject {
	color: var(--ui-accent-cyan);
	font-weight: 600;
}

.ng-alliance-content .ng-message-content {
	color: var(--color-dim, #ffffff);
	font-size: var(--fs-12);
	line-height: 1.6;
}

.ng-table-wrapper {
	width: 100%;
	overflow-x: auto;
}

.ng-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-12);
}

.ng-table th, .ng-table td {
	padding: 10px 12px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ng-table tbody th {
	width: 44%;
	color: var(--color-primary);
	font-family: var(--font-body);
	font-size: var(--fs-12);
	
	text-transform: uppercase;
	background: rgba(255, 255, 255, 0);
}

.ng-table thead th {
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	font-family: 'GeneraleStation', var(--font-body);
}

.ng-table tbody tr:hover {
	background: rgba(255, 255, 255, 0);
}

.ng-text-right {
	text-align: right;
}

.ng-terminal-box {
	width: 100%;
	border: 1px solid var(--ui-accent-cyan);
	background: var(--ui-glass-fill);
}

.ng-terminal-box--wide {
	max-width: 980px;
	margin: 0 auto;
}

.ng-terminal-header {
	padding: 12px 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 55%, rgba(59, 130, 246, 0) 100%);
}

.ng-terminal-header h1 {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-12);
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--color-primary);
}

.ng-terminal-lead {
	margin: 0 0 var(--space-8) 0;
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12);
}

.ng-button {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	padding: 8px 16px;
	background: rgba(255, 255, 255, 0);
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 12px;
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12);
	
	cursor: pointer;
	transition: all 0.2s ease;
	text-decoration: none;
	white-space: nowrap;
}

.ng-button:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: var(--color-primary);
	}

.ng-button-primary {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.ng-button-primary:hover {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
	}

.ng-button-danger {
	background: rgba(220, 38, 38, 0.15);
	border-color: rgba(220, 38, 38, 0.50);
	color: var(--ui-alert-orange);
}

.ng-button-danger:hover {
	background: rgba(220, 38, 38, 0.25);
	border-color: var(--ui-alert-orange);
	}

.ng-input {
	padding: 8px 12px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 12px;
	color: var(--ui-accent-cyan);
	font-family: var(--font-body);
	font-size: var(--fs-12);
	transition: all 0.2s ease;
}

.ng-textarea {
	width: 100%;
	min-height: 100px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 12px;
	color: var(--ui-accent-cyan);
	font-family: var(--font-body);
	font-size: var(--fs-12);
	resize: vertical;
	transition: all 0.2s ease;
}

.ng-textarea::placeholder, .ng-input::placeholder, .ng-form-input::placeholder, .ng-form-textarea::placeholder, .ng-stat-input::placeholder, .ng-coord-field::placeholder, .ng-select-wide::placeholder, .ng-filter-select::placeholder, input::placeholder, textarea::placeholder {
	color: rgba(255, 255, 255, 0.72);
	opacity: 1;
}

.ng-flex {
	display: flex;
}

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

.ng-gap-6 {
	gap: var(--space-6);
}

.ng-gap-10 {
	gap: var(--space-12);
}

.ng-inline-block {
	display: inline-block;
}

.ng-text-left {
	text-align: left;
}

.ng-error-message {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3);
	background: rgba(220, 38, 38, 0.15);
	border: 1px solid rgba(220, 38, 38, 0.30);
	color: var(--ui-alert-orange);
}

.ng-success-message {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3);
	border-radius: 12px;

}

.ng-link {
	color: var(--color-primary);
	text-decoration: none;
	transition: all 0.2s ease;
}

.ng-link:hover {
	color: var(--ui-accent-cyan);
	text-shadow: 0 0 8px var(--color-primary);
}

.landing-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: calc(100vh - 200px);
	padding: var(--space-20);
	text-align: center;
}

@keyframes logoGlow{
	0%, 100% {
		text-shadow: 0 0 30px rgba(255, 255, 255, 0.15), 0 0 60px rgba(255, 255, 255, 0.08);
	}
	50% {
		text-shadow: 0 0 40px rgba(255, 255, 255, 0.40), 0 0 80px rgba(255, 255, 255, 0.12);
	}
}

.landing-form {
	display: grid;
	gap: var(--space-16);
}

.landing-input-group {
	position: relative;
}

.landing-input-group label, .landing-input-group-label {
	display: block;
	font-family: var(--font-body);
	font-size: var(--fs-12);

	letter-spacing: 1px;
	margin-bottom: var(--space-4);
	text-transform: uppercase;
}

.landing-input {
	width: 100%;
	padding: var(--space-12) var(--space-16);
	background: transparent;
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 12px;
	color: #fff;
	font-family: var(--font-body);
	font-size: var(--fs-12);
	transition: all 0.2s ease;
}

.landing-input:-webkit-autofill, .landing-input:-webkit-autofill:hover, .landing-input:-webkit-autofill:focus, .landing-select:-webkit-autofill, .landing-select:-webkit-autofill:hover, .landing-select:-webkit-autofill:focus {
	-webkit-text-fill-color: #fff;
	-webkit-box-shadow: 0 0 0 1000px transparent inset;
	box-shadow: 0 0 0 1000px transparent inset;
	transition: background-color 5000s ease-in-out 0s;
}

.landing-input::placeholder {

	opacity: 0.6;
}

.landing-submit {
	width: 100%;
	padding: var(--space-16);
	background: transparent;
	border: 2px solid #ffffff;
	color: #ffffff;
	font-family: var(--font-body);
	font-size: var(--fs-12);
	letter-spacing: 2px;
	cursor: pointer;
	transition: all 0.3s ease;
	text-transform: uppercase;
}

.landing-submit:hover {
	background: transparent;
	transform: translateY(-2px);
}

.landing-submit:active {
	transform: translateY(0);
}

.landing-error {
	background: transparent;
	border: 1px solid rgba(255, 85, 51, 0.5);
	color: var(--ui-alert-orange);
	padding: var(--space-12);
	margin-bottom: var(--space-16);
	font-family: var(--font-body);
	font-size: var(--fs-12);
	display: flex;
	align-items: center;
	gap: var(--space-8);
}

.landing-divider {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	margin: var(--space-16) 0;
}

.landing-divider::before, .landing-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--ui-accent-cyan), transparent);
}

.landing-divider span {
	font-family: var(--font-body);
	font-size: var(--fs-12);

	letter-spacing: 1px;
}

.landing-alt-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-12);
}

.landing-alt-btn {
	padding: var(--space-12);
	background: rgba(255, 255, 255, 0);
	border: none;
	color: var(--ui-accent-cyan);
	font-family: var(--font-body);
	font-size: var(--fs-12);
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	transition: all 0.2s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
}

.landing-alt-btn i {
	font-size: var(--fs-12);
	color: var(--color-primary);
}

.landing-alt-btn:hover {
	background: rgba(255, 255, 255, 0);
}

.landing-alt-btn.is-primary {
	grid-column: 1 / -1;
	background: transparent;
}

.landing-alt-btn.is-primary i {
	color: var(--color-accent);
}

.landing-alt-btn.is-primary:hover {
	background: transparent;
}

.landing-terminal-line {
	margin-bottom: var(--space-4);
}

.landing-terminal-prompt {
	color: var(--color-primary);
}

.landing-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: var(--space-12) var(--space-20);
	display: flex;
	justify-content: center;
	gap: var(--space-20);
}

.landing-footer a {
	font-family: var(--font-body);
	font-size: var(--fs-12);

	text-decoration: none;
	letter-spacing: 1px;
	transition: color 0.2s ease;
}

.landing-footer a:hover {
	color: var(--color-primary);
}

/* ===================== REGISTER PAGE ===================== */

.landing-register-panel {
	width: min(600px, 95vw);
	position: relative;
	padding: 32px;
}

.landing-register-title {
	font-family: var(--font-body);
	font-size: var(--fs-14);
	font-weight: 600;
	color: var(--ui-accent-cyan);
	letter-spacing: 1px;
	margin-bottom: var(--space-20);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.landing-register-title i {
	font-size: 1.2em;
	color: var(--color-accent);
}

.landing-form-section {
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 12px;
	padding: 20px;
	background: rgba(255, 255, 255, 0.04);
}

.landing-form-section-title {
	font-family: var(--font-body);
	font-size: var(--fs-12);
	font-weight: 600;
	color: var(--ui-accent-cyan);
	letter-spacing: 0.5px;
	margin-bottom: var(--space-16);
	display: flex;
	align-items: center;
	gap: 8px;
}

.landing-form-section-title i {
	font-size: 1.1em;
	color: var(--color-accent);
}

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

@media (max-width: 500px) {
	.landing-form-row {
		grid-template-columns: 1fr;
	}
}

.landing-select {
	width: 100%;
	padding: var(--space-12) var(--space-16);
	background: transparent;
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 12px;
	color: #fff;
	font-family: var(--font-body);
	font-size: var(--fs-12);
	transition: all 0.2s ease;
	cursor: pointer;
}

.landing-select:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(217, 119, 7, 0.15);
}

.landing-select option {
	background: #555;
	color: var(--ui-accent-cyan);
}

.landing-input:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(217, 119, 7, 0.15);
}

.landing-date-row {
	display: grid;
	grid-template-columns: 1fr 1.5fr 1fr;
	gap: 8px;
}

@media (max-width: 500px) {
	.landing-date-row {
		grid-template-columns: 1fr;
	}
}

.landing-password-container {
	position: relative;
	display: flex;
}

.landing-password-container .landing-input {
	padding-right: 44px;
}

.landing-password-toggle {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	color: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	padding: 4px 8px;
	font-size: 1.1em;
	transition: color 0.2s ease;
}

.landing-password-toggle:hover {
	color: var(--color-accent);
}

.landing-checkbox-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.landing-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: var(--fs-12);
	color: rgba(255, 255, 255, 0.7);
}

.landing-checkbox input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-top: 1px;
	accent-color: var(--color-accent);
	cursor: pointer;
}

.landing-checkbox a {
	color: var(--color-accent);
}

.landing-checkbox a:hover {
	text-decoration: underline;
}

.landing-error-item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 6px;
}

.landing-error-item:last-child {
	margin-bottom: 0;
}

.landing-success {
	background: rgba(34, 197, 94, 0.12);
	border: 1px solid rgba(34, 197, 94, 0.35);
	border-radius: 8px;
	color: #4ade80;
	padding: 20px;
	margin-bottom: var(--space-16);
	font-family: var(--font-body);
	font-size: var(--fs-14);
	text-align: center;
}

.landing-success i {
	font-size: 2em;
	display: block;
	margin-bottom: 10px;
}

.landing-back-link {
	display: flex;
	justify-content: center;
	margin-top: var(--space-12);
}

.landing-back-btn {
	padding: var(--space-12) var(--space-20);
	background: transparent;
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 8px;
	color: var(--ui-accent-cyan);
	font-family: var(--font-body);
	font-size: var(--fs-12);
	font-weight: 500;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-decoration: none;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	gap: 8px;
}

.landing-back-btn i {
	color: var(--color-accent);
}

.landing-back-btn:hover {
	background: rgba(255, 255, 255, 0.05);
	border-color: var(--color-accent);
}

@media (max-width: 600px) {
	.landing-register-panel {
		padding: 20px;
	}
	.landing-form-section {
		padding: 16px;
	}
}

/* ===================== END REGISTER PAGE ===================== */

.ng-comm-fullview-content .ui-frame {
	background: var(--ui-glass-fill);
	border: 1px solid rgba(30, 58, 63, 0.5);
	border-radius: 12px;
	margin-bottom: 16px;
}

.ng-comm-fullview-content .ui-frame__title {
	font-size: var(--fs-12);
	background: transparent;
}

.ng-comm-fullview-content {
	position: relative;
	background: transparent;
	border: 0;
	color: var(--ui-accent-cyan);
}

#ng-comm-fullview {
	background: transparent;
	border: 0;
}

.ng-tech-tree-shell::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(0deg, var(--scanline-color) 0, var(--scanline-color) 1px, transparent 1px, transparent 3px);
	opacity: 0.6;
	pointer-events: none;
	mix-blend-mode: screen;
}

.ng-tech-tree-shell::after {
	content: '';
	position: absolute;
	left: var(--space-12);
	right: var(--space-12);
	top: var(--space-12);
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--ui-accent-cyan	), transparent);
	opacity: 0.8;
	pointer-events: none;
}

.ng-tech-tree-shell > * {
	position: relative;
	z-index: 1;
}

.ng-tech-tree-shell {
	position: relative;
	min-height: min(72vh, 720px);
	width: 100%;
	background: var(--ui-accent-cyan);
	border: 1px solid var(--ui-accent-cyan);
	overflow: hidden;
}

.ng-tech-tree-grid-toolbar {
	display: flex;
	justify-content: flex-end;
	padding: 6px 8px;
	position: relative;
	z-index: 3;
}

.ng-tech-tree-save-btn {
	padding: 4px 14px;
	font-family: var(--font-body);
	font-size: var(--fs-12);
	color: var(--ui-accent-cyan);
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid var(--ui-accent-cyan);
	cursor: pointer;
	transition: background 200ms, border-color 200ms;
}

.ng-tech-tree-save-btn:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.20);
}

.ng-tech-tree-save-btn.is-saved {
	border-color: rgba(255, 255, 255, 0.40);
	color: var(--ui-accent-cyan);
}

.ng-tech-tree-grid.grid-stack {
	position: relative;
	width: 100%;
	min-height: 420px;
}

.ng-tech-tree-grid-wrap .ng-tech-tree__canvas {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	pointer-events: none;
}

.ng-tech-tree-grid .grid-stack-item {
	z-index: 20;
}

.ng-tech-tree-grid .grid-stack-item-content {
	overflow: hidden;
}

.ng-tech-tree-card {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, 0.65);
	border: 1px solid var(--ui-accent-cyan);
	}

.ng-tech-tree-card.is-built {
	border-color: rgba(59, 130, 246, 0.35);
}

.ng-tech-tree-card.is-available {
	border-color: rgba(217, 119, 6, 0.55);
}

.ng-tech-tree-card.is-locked {
	border-color: rgba(255, 85, 51, 0.55);
	background: var(--card-bg);
}

.ng-tech-tree-card__title {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: 2px 4px 2px;
	color: var(--ui-accent-cyan);
	font-family: var(--font-body);
	font-size: var(--fs-12);
	
	cursor: grab;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ng-tech-tree-card__body {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-2);
	padding: 0 4px 4px;
	min-height: 0;
	overflow: hidden;
}

.ng-tech-tree-card__img {
	width: 100%;
	height: 100%;
	border: 1px solid var(--ui-accent-cyan);
	background: var(--ui-glass-fill);
	object-fit: cover;
}

.ng-tech-tree-card__req {
	display: flex;
	flex-direction: column;
	gap: 0px;
	font-family: var(--font-body);
	font-size: var(--fs-12);
	color: var(--header-bg);
	overflow: hidden;
}

.ng-tech-tree-card__req .is-missing {
	color: rgba(255, 85, 51, 0.7);
}

.ng-tech-tree__edge {
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
	fill: none;
	stroke-linecap: square;
	stroke-linejoin: miter;
}

.ng-tech-tree__edge--base {
	stroke: rgba(255, 255, 255, 0.06);
}

.ng-tech-tree__edge--req {
	stroke: rgba(217, 119, 6, 0.55);
	stroke-dasharray: 2.2 1.6;
}

.ng-tech-tree__edge.is-met {
	stroke-opacity: 0.85;
}

.ng-tech-tree__edge.is-missing {
	stroke-opacity: 0.95;
}

.ng-tech-tree__port {
	stroke: none;
	filter: drop-shadow(0 0 2px currentColor);
}

.ng-tech-tree__port--out {
	fill: rgba(59, 130, 246, 0.60);
}

.ng-tech-tree__port--in {
	fill: rgba(217, 119, 6, 0.80);
}

.ng-tech-tree__port.is-met {
	fill: rgba(57, 255, 146, 0.85);
}

.ng-tech-tree__port.is-missing {
	fill: rgba(255, 85, 51, 0.9);
}

.ng-tech-tree__card {
	fill: rgba(255, 255, 255, 0.65);
	stroke: rgba(255, 255, 255, 0.06);
	stroke-width: 1.1;
	vector-effect: non-scaling-stroke;
}

.ng-tech-tree__card--building {
	stroke: rgba(255, 255, 255, 0.08);
}

.ng-tech-tree__card--tech {
	stroke: rgba(255, 255, 255, 0.06);
}

.ng-tech-tree__card.is-built {
	stroke: rgba(59, 130, 246, 0.35);
}

.ng-tech-tree__card.is-available {
	stroke: rgba(217, 119, 6, 0.45);
}

.ng-tech-tree__card.is-locked {
	stroke: rgba(255, 85, 51, 0.45);
	fill: rgba(255, 255, 255, 0.45);
}

.ng-tech-tree__card-img {
	opacity: 0.95;
}

.ng-tech-tree__card-req {
	fill: var(--header-bg);
	font-family: var(--font-body);
	font-size: 0.9px;
	
	text-anchor: start;
	dominant-baseline: hanging;
	pointer-events: none;
}

.ng-tech-tree__card-req tspan.is-met {
	fill: rgba(59, 130, 246, 0.70);
}

.ng-tech-tree__card-req tspan.is-missing {
	fill: rgba(255, 85, 51, 0.92);
}

.ng-tech-tree__legend {
	position: absolute;
	right: var(--space-12);
	bottom: var(--space-12);
	background: var(--ui-glass-fill);
	border: 1px solid var(--ui-accent-cyan);
	padding: var(--space-8) var(--space-12);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.ng-tech-tree__legend-title {
	font-family: var(--font-body);
	letter-spacing: 0.8px;
	color: var(--color-primary);
	margin-bottom: var(--space-8);
}

.ng-tech-tree__legend-row {
	display: grid;
	grid-template-columns: 14px 1fr;
	align-items: center;
	gap: var(--space-8);

	margin-bottom: 6px;
}

.ng-tech-tree__legend-dot {
	width: 10px;
	height: 10px;
	border: 1px solid var(--ui-accent-cyan);
	background: var(--ui-accent-cyan);
	display: inline-block;
}

.ng-tech-tree__legend-dot.is-built {
	border-color: rgba(59, 130, 246, 0.35);
}

.ng-tech-tree__legend-dot.is-available {
	border-color: rgba(217, 119, 6, 0.45);
}

.ng-tech-tree__legend-dot.is-locked {
	border-color: rgba(255, 85, 51, 0.45);
}

.ng-tech-tree__legend-line {
	height: 2px;
	width: 14px;
	display: inline-block;
	background: rgba(255, 255, 255, 0.06);
}

.ng-tech-tree__legend-line.is-req {
	background: rgba(217, 119, 6, 0.55);
}

.ng-comm-fullview-content .ng-trade-shell {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--space-16);
	background: var(--ui-accent-cyan);
	border: 1px solid var(--ui-accent-cyan);
	}

.ng-comm-fullview-content .ng-trade-shell::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(0deg, var(--scanline-color) 0, var(--scanline-color) 1px, transparent 1px, transparent 3px);
	opacity: 0.6;
	pointer-events: none;
	mix-blend-mode: screen;
}

.ng-comm-fullview-content .ng-trade-shell::after {
	content: '';
	position: absolute;
	left: var(--space-12);
	right: var(--space-12);
	top: var(--space-12);
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--ui-accent-cyan), transparent);
	opacity: 0.8;
	pointer-events: none;
}

.ng-comm-fullview-content .ng-trade-shell > * {
	position: relative;
	z-index: 1;
}

.ng-comm-fullview-content .ng-center-panel--trade {
	display: grid;
	gap: var(--space-16);
}

.ng-comm-fullview-content .ng-trade-shell .ng-widget {
	background: var(--ui-accent-cyan);
	border: 1px solid var(--ui-accent-cyan);
	padding: var(--space-16);
	}

.ng-comm-fullview-content .ng-trade-shell .ng-widget-title {
	margin: 0 0 var(--space-12);
	font-family: var(--font-body);
	font-size: var(--fs-12);
	text-transform: uppercase;
	letter-spacing: 1px;

	border-bottom: 1px solid var(--ui-accent-cyan);
	padding-bottom: var(--space-8);
}

.ng-comm-fullview-content .ng-preference-sections, #ng-spa-content .ng-preference-sections {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-16);
}

.ng-widget-title:has(.ng-pref-tabs) {
	display: flex;
	align-items: center;
}

.ng-pref-tabs {
	display: inline-flex;
	gap: 0;
	margin-left: auto;
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 12px;
	overflow: hidden;
}

.ng-pref-tab {
	padding: 4px 12px;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: rgba(127, 176, 171, 0.6);
	text-decoration: none;
	transition: all 0.2s ease;
	cursor: pointer;
	background: transparent;
}

.ng-pref-tab:hover {
	color: var(--color-primary, #e0e0e8);
	background: rgba(255, 255, 255, 0);
}

.ng-pref-tab.is-active {
	color: var(--color-primary, #e0e0e8);
	background: rgba(255, 255, 255, 0.1);
	text-shadow: 0 0 6px rgba(255, 255, 255, 0.08);
}

.ng-pref-tab + .ng-pref-tab {
	border-left: 1px solid rgba(255, 255, 255, 0.06);
}

.ng-comm-fullview-content .ng-pref-block.ng-widget, #ng-spa-content .ng-pref-block.ng-widget {
	border: 1px solid var(--ui-accent-cyan);
	padding: var(--space-16);
}

.ng-comm-fullview-content .ng-pref-form, #ng-spa-content .ng-pref-form {
	display: grid;
	gap: var(--space-10);
}

.ng-pref-form {
	display: grid;
	gap: var(--space-12);
}

.ng-comm-fullview-content .ng-pref-form label, #ng-spa-content .ng-pref-form label {
	text-transform: uppercase;
	

}

.ng-comm-fullview-content .ng-pref-inline, #ng-spa-content .ng-pref-inline {
	color: var(--ui-accent-cyan);
}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-info {
	display: grid;
	gap: var(--space-8);
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-stat {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-8);
	padding: var(--space-8) var(--space-12);
	background: var(--ui-accent-cyan);
	border: 1px solid var(--ui-accent-cyan);
}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-label {
	text-transform: uppercase;
	
}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-value {
	font-family: var(--font-body);
	color: var(--ui-accent-cyan);
}

.ng-comm-fullview-content .ng-trade-shell .ng-status-active {
	color: var(--color-primary);
}

.ng-comm-fullview-content .ng-trade-shell .ng-market-prices {
	display: grid;
	gap: var(--space-8);
}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-history-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--space-12);
}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-history-card {
	display: grid;
	gap: var(--space-10);
	padding: var(--space-12);
	background: var(--ui-accent-cyan);
	border: 1px solid var(--ui-accent-cyan);
}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-history-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-8);
}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-history-name {
	color: var(--ui-accent-cyan);
	font-family: var(--font-body);
	font-size: var(--fs-12);
	text-transform: uppercase;
}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-history-state {
	font-size: var(--fs-12);
	text-transform: uppercase;
	color: var(--ui-accent-cyan);
}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-history-chart {
	width: 100%;
	height: 72px;
	display: block;
	overflow: visible;
}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-history-gridline {
	stroke: rgba(255, 255, 255, 0.14);
	stroke-width: 1;
}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-history-line {
	fill: none;
	stroke: rgba(255, 255, 255, 0.92);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.16));
}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-history-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-8);
	font-size: var(--fs-12);
	color: var(--ui-accent-cyan);
}

.ng-comm-fullview-content .ng-trade-shell .ng-price-header, .ng-comm-fullview-content .ng-trade-shell .ng-price-row {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr 0.8fr;
	gap: var(--space-8);
	align-items: center;
}

.ng-comm-fullview-content .ng-trade-shell .ng-price-header {
	padding-bottom: var(--space-8);
	border-bottom: 1px solid var(--ui-accent-cyan);
	
	text-transform: uppercase;
}

.ng-comm-fullview-content .ng-trade-shell .ng-price-row {
	padding: var(--space-8) 0;
	border-bottom: 1px solid var(--ui-accent-cyan);
}

.ng-comm-fullview-content .ng-trade-shell .ng-trend-up {
	color: var(--color-primary);
}

.ng-comm-fullview-content .ng-trade-shell .ng-trend-down {
	color: var(--ui-alert-orange);
}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-form {
	display: grid;
	gap: var(--space-16);
	grid-template-columns: 1fr;
	grid-template-areas: "buy""sell""fleet""actions";
}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-panel {
	background: var(--ui-accent-cyan);
	border: 1px solid var(--ui-accent-cyan);
	padding: var(--space-12);
	}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-panel--buy {
	grid-area: buy;
}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-panel--sell {
	grid-area: sell;
}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-panel--fleet {
	grid-area: fleet;
}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-panel--actions {
	grid-area: actions;
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	padding: var(--space-8) var(--space-12);
}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-factor {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 180px;
}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-action-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-12);
	flex-wrap: wrap;
	width: 100%;
}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-action-buttons {
	display: flex;
	gap: var(--space-8);
	flex-wrap: wrap;
}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-alert {
	width: 100%;
	padding: var(--space-8) var(--space-12);
	border: 1px solid var(--ui-accent-cyan);
	background: var(--ui-accent-cyan);
	font-size: var(--fs-12);
	text-transform: uppercase;
	

}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-alert--success {
	border-color: var(--ui-accent-cyan);
	color: var(--color-primary);
}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-alert--error {
	border-color: rgba(255, 85, 51, 0.5);
	color: var(--ui-alert-orange);
}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-factor-label {
	text-transform: uppercase;
	

}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-factor-value {
	font-family: var(--font-body);
	color: var(--color-primary);
}

.ng-comm-fullview-content .ng-trade-shell .ng-section-title {
	font-family: var(--font-body);
	text-transform: uppercase;
	letter-spacing: 0.8px;

	margin-bottom: var(--space-12);
}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-group {
	display: grid;
	gap: var(--space-8);
	margin-bottom: var(--space-12);
}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-resource-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: var(--space-8);
	margin-bottom: var(--space-12);
}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-resource-btn {
	background: var(--ui-accent-cyan);
	border: 1px solid var(--ui-accent-cyan);
	color: var(--ui-accent-cyan);
	font-family: var(--font-body);
	font-size: var(--fs-12);
	text-transform: uppercase;
	
	padding: var(--space-8) var(--space-12);
	cursor: pointer;
	transition: border-color var(--t-mid), box-shadow var(--t-mid), color var(--t-mid);
}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-resource-btn.is-active, .ng-comm-fullview-content .ng-trade-shell .ng-trade-resource-btn:hover {
	border-color: var(--ui-accent-cyan);
	color: var(--color-primary);
	}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-limit {
	font-size: var(--fs-12);

	text-transform: uppercase;
	
}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-costs {
	display: grid;
	gap: var(--space-8);
}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-cost-row {
	display: grid;
	grid-template-columns: 1fr auto auto auto;
	align-items: center;
	gap: var(--space-12);
	padding: var(--space-8) var(--space-12);
	background: var(--ui-accent-cyan);
	border: 1px solid var(--ui-accent-cyan);
	cursor: pointer;
}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-cost-row.is-active {
	border-color: var(--ui-accent-cyan);
	}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-cost-row.is-disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-cost-label {
	font-family: var(--font-body);
	font-size: var(--fs-12);
	color: var(--color-primary);
	text-transform: uppercase;
	
}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-cost-value {
	font-family: var(--font-body);
	font-size: var(--fs-12);
	color: var(--ui-accent-cyan);
	min-width: 90px;
	text-align: right;
}

.ng-comm-fullview-content .ng-trade-shell .ng-trade-cost-meta {
	font-size: var(--fs-12);

	text-transform: uppercase;
	
	min-width: 110px;
	text-align: right;
}

.ng-comm-fullview-content .ng-trade-shell .ng-form-label {
	font-size: var(--fs-12);
	text-transform: uppercase;
	

}

.ng-comm-fullview-content .ng-trade-shell .ng-form-select, .ng-comm-fullview-content .ng-trade-shell .ng-form-input {
	width: 100%;
	padding: var(--space-8) var(--space-12);
	background: var(--ui-accent-cyan);
	border: 1px solid var(--ui-accent-cyan);
	color: var(--ui-accent-cyan);
	font-family: var(--font-body);
}

.ng-comm-fullview-content .ng-trade-shell .ng-form-select:focus, .ng-comm-fullview-content .ng-trade-shell .ng-form-input:focus {
	outline: 1px solid var(--color-primary);
	border-color: var(--ui-accent-cyan);
	}

.ng-comm-fullview-content .ng-trade-shell .ng-fleet-list {
	display: grid;
	gap: var(--space-8);
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.ng-comm-fullview-content .ng-trade-shell .ng-fleet-item {
	background: var(--ui-accent-cyan);
	border: 1px solid var(--ui-accent-cyan);
	padding: var(--space-8) var(--space-12);
}

.ng-comm-fullview-content .ng-trade-shell .ng-fleet-name {
	font-family: var(--font-body);
	font-size: var(--fs-12);
	color: var(--color-primary);
	margin-bottom: var(--space-4);
}

.ng-comm-fullview-content .ng-trade-shell .ng-fleet-count, .ng-comm-fullview-content .ng-trade-shell .ng-fleet-capacity {
	font-size: var(--fs-12);

}

.ng-comm-fullview-content .ng-trade-shell .ng-no-data {
	padding: var(--space-12);
	border: 1px dashed var(--ui-accent-cyan);

	text-align: center;
}

.ng-comm-fullview-content .ng-trade-shell .ng-system-status {
	display: grid;
	gap: var(--space-8);
}

.ng-comm-fullview-content .ng-trade-shell .ng-status-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-8) var(--space-12);
	background: var(--ui-accent-cyan);
	border: 1px solid var(--ui-accent-cyan);
}

.ng-modal-body .ng-trade-shell, .ng-modal-card .ng-trade-shell {
	max-width: none;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.ng-modal-body .ng-trade-shell::before, .ng-modal-body .ng-trade-shell::after, .ng-modal-card .ng-trade-shell::before, .ng-modal-card .ng-trade-shell::after {
	display: none;
}

.ng-modal-body .ng-trade-shell .ng-widget, .ng-modal-card .ng-trade-shell .ng-widget {
	background: linear-gradient(180deg, rgba(10, 20, 30, 0.62), rgba(8, 16, 26, 0.46));
	border: 1px solid rgba(79, 172, 254, 0.22);
	color: var(--ui-accent-cyan);
	margin: 4px 0;
}

.ng-modal-body .ng-trade-shell .ng-widget-title, .ng-modal-card .ng-trade-shell .ng-widget-title, .ng-modal-body .ng-trade-shell .ng-trade-label, .ng-modal-card .ng-trade-shell .ng-trade-label, .ng-modal-body .ng-trade-shell .ng-trade-factor-label, .ng-modal-card .ng-trade-shell .ng-trade-factor-label, .ng-modal-body .ng-trade-shell .ng-trade-limit, .ng-modal-card .ng-trade-shell .ng-trade-limit, .ng-modal-body .ng-trade-shell .ng-trade-cost-meta, .ng-modal-card .ng-trade-shell .ng-trade-cost-meta, .ng-modal-body .ng-trade-shell .ng-form-label, .ng-modal-card .ng-trade-shell .ng-form-label, .ng-modal-body .ng-trade-shell .ng-fleet-count, .ng-modal-card .ng-trade-shell .ng-fleet-count, .ng-modal-body .ng-trade-shell .ng-fleet-capacity, .ng-modal-card .ng-trade-shell .ng-fleet-capacity, .ng-modal-body .ng-trade-shell .ng-no-data, .ng-modal-card .ng-trade-shell .ng-no-data, .ng-modal-body .ng-trade-shell .ng-price-header, .ng-modal-card .ng-trade-shell .ng-price-header, .ng-modal-body .ng-trade-shell .ng-price-row, .ng-modal-card .ng-trade-shell .ng-price-row {
	color: rgba(79, 172, 254, 0.82);
}

.ng-modal-body .ng-trade-shell .ng-trade-stat, .ng-modal-card .ng-trade-shell .ng-trade-stat, .ng-modal-body .ng-trade-shell .ng-trade-panel, .ng-modal-card .ng-trade-shell .ng-trade-panel, .ng-modal-body .ng-trade-shell .ng-trade-cost-row, .ng-modal-card .ng-trade-shell .ng-trade-cost-row, .ng-modal-body .ng-trade-shell .ng-fleet-item, .ng-modal-card .ng-trade-shell .ng-fleet-item, .ng-modal-body .ng-trade-shell .ng-status-item, .ng-modal-card .ng-trade-shell .ng-status-item, .ng-modal-body .ng-trade-shell .ng-system-status, .ng-modal-card .ng-trade-shell .ng-system-status, .ng-modal-body .ng-trade-shell .ng-trade-alert, .ng-modal-card .ng-trade-shell .ng-trade-alert {
	background: rgba(10, 20, 30, 0.58);
	border-color: rgba(79, 172, 254, 0.2);
	color: var(--ui-accent-cyan);
}

.ng-modal-body .ng-trade-shell .ng-trade-resource-btn, .ng-modal-card .ng-trade-shell .ng-trade-resource-btn, .ng-modal-body .ng-trade-shell .ng-form-select, .ng-modal-card .ng-trade-shell .ng-form-select, .ng-modal-body .ng-trade-shell .ng-form-input, .ng-modal-card .ng-trade-shell .ng-form-input {
	background: rgba(8, 16, 26, 0.72);
	border-color: rgba(79, 172, 254, 0.24);
	color: var(--ui-accent-cyan);
}

.ng-modal-body .ng-trade-shell .ng-trade-resource-btn.is-active, .ng-modal-body .ng-trade-shell .ng-trade-resource-btn:hover, .ng-modal-card .ng-trade-shell .ng-trade-resource-btn.is-active, .ng-modal-card .ng-trade-shell .ng-trade-resource-btn:hover, .ng-modal-body .ng-trade-shell .ng-trade-cost-row.is-active, .ng-modal-card .ng-trade-shell .ng-trade-cost-row.is-active {
	background: rgba(191, 239, 255, 0.16);
	border-color: var(--ui-accent-cyan);
	color: var(--ui-accent-cyan);
}

.ng-modal-body .ng-trade-shell .ng-trade-cost-label, .ng-modal-card .ng-trade-shell .ng-trade-cost-label, .ng-modal-body .ng-trade-shell .ng-fleet-name, .ng-modal-card .ng-trade-shell .ng-fleet-name, .ng-modal-body .ng-trade-shell .ng-trade-history-name, .ng-modal-card .ng-trade-shell .ng-trade-history-name, .ng-modal-body .ng-trade-shell .ng-trade-history-meta, .ng-modal-card .ng-trade-shell .ng-trade-history-meta, .ng-modal-body .ng-trade-shell .ng-trade-history-state, .ng-modal-card .ng-trade-shell .ng-trade-history-state, .ng-modal-body .ng-trade-shell .ng-trade-factor-value, .ng-modal-card .ng-trade-shell .ng-trade-factor-value, .ng-modal-body .ng-trade-shell .ng-status-active, .ng-modal-card .ng-trade-shell .ng-status-active, .ng-modal-body .ng-trade-shell .ng-trend-up, .ng-modal-card .ng-trade-shell .ng-trend-up {
	color: var(--ui-accent-cyan);
}

.ng-modal-body .ng-trade-shell .ng-trade-history-card, .ng-modal-card .ng-trade-shell .ng-trade-history-card {
	background: rgba(10, 20, 30, 0.58);
	border-color: rgba(79, 172, 254, 0.2);
}

.ng-modal-body .ng-trade-shell .ng-trade-history-gridline, .ng-modal-card .ng-trade-shell .ng-trade-history-gridline {
	stroke: rgba(79, 172, 254, 0.24);
}

.ng-modal-body .ng-trade-shell .ng-trade-history-line, .ng-modal-card .ng-trade-shell .ng-trade-history-line {
	stroke: rgba(191, 239, 255, 0.92);
}

.hud-header {
	position: relative;
	z-index: 1000;
	isolation: isolate;
	overflow: visible;
}

.hud-header > * {
	position: relative;
	z-index: 1;
}

body.ui-reboot .hud-header {
    display: flex;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    justify-content: stretch;
    height: 115px;
		background: transparent;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body.ui-reboot .hud-header > .ui-hud-top-row {
	grid-column: 3;
	justify-self: end;
	align-self: center;
	flex: 0 0 auto;
	width: fit-content;
	max-width: none;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-width: 0;
	gap: var(--space-8);
	margin-left: 0;
	border-radius: 14px;
}

body.ui-reboot .hud-header > .ui-hud-micro {
	grid-column: 2;
	justify-self: center;
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	gap: var(--space-8);
	margin-left: auto;
	margin-right: auto;
	padding: 0 24px;
	overflow: hidden;
	border-radius: 14px;
}

body.ui-reboot .hud-header > .ng-header-top-left {
	grid-column: 1;
	justify-self: start;
	align-self: center;
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	min-width: 0;
	height: 100%;
	overflow: visible;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-left: 0;
}

body.ui-reboot .hud-header .ui-hud-comm-tabs {
	background: transparent;
	border: 0;
	padding-left: 0;
	padding-right: 0;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	height: 100%;
}

body.ui-reboot #ng-second-header-page-tabs {
	width: 100%;
	justify-content: center;
}

body.ui-reboot .hud-header .ui-hud-comm-tabs .tab:hover, body.ui-reboot .hud-header .ui-hud-comm-tabs .ng-comm-tab-btn:hover, body.ui-reboot .hud-header .ui-hud-comm-tabs .ng-city-switcher-btn:hover {
	background: none;
	color: inherit;
}

body.ui-reboot .hud-header .ui-hud-comm-tabs .tab.is-active, body.ui-reboot .hud-header .ui-hud-comm-tabs .tab.is-active:visited, body.ui-reboot .hud-header .ui-hud-comm-tabs .ng-comm-tab-btn.is-active, body.ui-reboot .hud-header .ui-hud-comm-tabs .ng-city-switcher-btn.is-active {
	color: inherit;
	text-shadow: none;
}

body.ui-reboot #ng-second-header-page-tabs .tab {
	border-radius: 12px;
	padding: var(--space-8) var(--space-16);
	font-size: var(--fs-12);
	background: transparent;
	position: relative;
	overflow: visible;
	border: 0;
	color: var(--color-accent);
	font-family: var(--font-body);
	
	text-transform: uppercase;
	text-decoration: none;
	transition: all 0.2s ease;
	cursor: pointer;
	white-space: nowrap;
}

body.ui-reboot #ng-second-header-page-tabs .tab::before {
	content: '';
	border: 0;
}

body.ui-reboot #ng-second-header-page-tabs .tab .ng-tab-label {
	display: inline;
}

body.ui-reboot #ng-second-header-page-tabs .tab > i {
	display: none;
}

body.ui-reboot #ng-second-header-page-tabs .tab:hover {
	background: var(--ng-tab-accent-hover);
}

body.ui-reboot #ng-second-header-page-tabs .tab.is-active {
	background: var(--ng-tab-accent-active);
	color: var(--color-accent);
	text-shadow: 0 0 8px var(--ng-tab-accent-active-glow);
	}

body.ui-reboot #ng-second-header-page-tabs .tab.is-active > i {
	color: var(--color-accent);
}

body.ui-reboot .ng-header-top-left .ui-hud-micro-item .k {
	font-size: var(--fs-12);
}

body.ui-reboot .ng-header-top-left .ui-hud-micro-item .v {
	font-size: var(--fs-12);
}

.ng-hud-stats-btn {
	display: inline-flex;
	align-items: center;
	gap: 0;
	background: transparent;
	border: none;
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12);
	padding: 2px;
	cursor: pointer;
	transition: color 0.2s ease;
}

.ng-hud-stats-btn:hover {
	color: var(--color-primary);
}

.ui-hud-micro {
	display: flex;
	gap: var(--space-12);
	align-items: center;
	justify-content: center;
	align-content: center;
	flex-wrap: nowrap;
	min-width: 0;
	min-height: 32px;
}

body.ui-reboot .ui-hud-micro {
	position: relative;
	overflow: visible;
}

.ui-hud-micro-group {
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	text-align: center;
}

.ui-hud-micro-item {
	display: grid;
	grid-template-areas:"label label""icon value""prod prod";
	grid-template-columns: auto 1fr;
	justify-items: center;
	align-items: center;
	gap: 0;
	padding: 0;
	border: none;
	position: relative;
	min-width: 0;
	white-space: normal;
	width: auto;
	text-align: center;
}

.ui-hud-micro-item .ui-hud-res-icon {
	grid-area: icon;
	font-size: var(--fs-16);
	color: var(--ui-accent-cyan);
	opacity: 1;
	margin-right: 2px;
	width: 1em;
	text-align: center;
	display: inline-block;
	justify-self: end;
}

.ui-hud-micro-item:hover {
	border-color: rgba(255, 255, 255, 0.12);
}

.ui-hud-micro-item .k {
	grid-area: label;
	color: var(--ui-accent-cyan);
	font-family: var(--font-body);
	font-size: var(--fs-12);
	
	text-transform: uppercase;
	text-align: center;
	display: block;
}

.ui-hud-micro-item .v {
	grid-area: value;
	color: var(--ui-accent-cyan);
	font-family: var(--font-body);
	font-size: var(--fs-12);
	justify-self: start;
	display: block;
}

.ui-hud-micro-item:hover .v {
	color: var(--ui-accent-cyan);
}

.ui-hud-micro-item.is-alert {
	border-color: rgba(217, 119, 6, 0.55);
	background: rgba(217, 119, 6, 0.04);
}

.ui-hud-micro-item.is-alert .k, .ui-hud-micro-item.is-alert .v {
	color: var(--color-accent);
}

.ui-hud-res-meter-fill::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.20) 25%, rgba(255, 255, 255, 0.40) 50%, rgba(255, 255, 255, 0.20) 75%, transparent 100%);
	animation: hud-res-shimmer 2.5s ease-in-out infinite;
}

@keyframes hud-res-shimmer{
	0% {
		left: -100%;
	}
	100% {
		left: 100%;
	}
}

.ui-hud-micro-group[data-group="depot"] {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	column-gap: var(--space-10);
	row-gap: var(--space-4);
	border: none;
	padding: 4px 10px;
	position: relative;
}

.ui-hud-micro-group[data-group="depot"] .ui-hud-res-meter {
	grid-column: 1 / -1;
}

.ui-hud-micro-group[data-group="depot"] .ui-hud-micro-item {
	padding-bottom: 0;
	width: 100%;
}

.ui-hud-micro-group[data-group="depot"] .ui-hud-micro-item .k {
	font-size: var(--fs-8);
}

.ui-hud-micro-group[data-group="depot"] .ui-hud-micro-item:nth-of-type(1), .ui-hud-micro-group[data-group="depot"] .ui-hud-micro-item:nth-of-type(2), .ui-hud-micro-group[data-group="depot"] .ui-hud-micro-item:nth-of-type(3) {
	justify-items: center;
	text-align: center;
}

.ui-hud-micro-group[data-group="oxygen"] {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	row-gap: var(--space-4);
	border: none;
	padding: 4px 10px;
	position: relative;
}

.ui-hud-micro-group[data-group="oxygen"] .ui-hud-res-meter {
	grid-column: 1 / -1;
}

.ui-hud-micro-group[data-group="oxygen"] .ui-hud-micro-item {
	padding-bottom: 0;
	width: 100%;
	justify-items: center;
	text-align: center;
}

.ui-hud-micro-group[data-group="oxygen"] .ui-hud-micro-item .k {
	font-size: var(--fs-8);
}

.header-avatar {
	width: 64px;
	height: 64px;
	border: none;
	overflow: visible;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background: transparent;
	flex-shrink: 0;
}

.header-avatar.ng-crt-avatar {
	position: relative;
	max-height: 122px;
	animation: crtScanDrift 18s linear infinite,crtFlicker 3.6s steps(42, end) infinite,crtJitter 4s steps(16, end) infinite;
}

.header-avatar.ng-crt-avatar::before, .header-avatar.ng-crt-avatar::after {
	content: none;
	display: none;
}

.header-avatar img {
	width: 100%;
	height: 100%;
	max-height: 122px;
	object-fit: cover;
	display: block;
	border-radius: 12px;
}

.ui-hud-prod.is-negative {
	color: var(--ui-alert-orange);
}

.ng-city-image-preview-img {
	max-width: 200px;
	max-height: 150px;
	border: 1px solid var(--ui-accent-cyan);
}

.ng-city-switcher-list {
	padding: 4px;
	background: transparent;
}

.ui-hud-comm-tabs .ng-city-switcher {
	width: auto;
	justify-content: flex-end;
}

.ui-hud-comm-tabs .ng-city-switcher-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	padding: 0 12px;
	min-width: 44px;
	height: 44px;
	border: none;
	border-radius: 12px;
	background: none;
	color: var(--ui-accent-blue);
	font: 500 10px/1 var(--font-display);
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
	appearance: none;
	-webkit-appearance: none;
}

.ui-hud-comm-tabs .ng-city-switcher-btn.is-main-city, .ui-hud-comm-tabs .ng-city-switcher-btn.is-main-city:hover {
	border: none;
	background: none;
	box-shadow: none;
	}

.ui-hud-comm-tabs .ng-city-switcher-btn i {
	font-size: var(--fs-20);
	color: inherit;
}

.ng-city-switcher-btn .ng-city-icon-colony {
	font-size: var(--fs-20);
}

.ng-city-switcher-btn .ng-city-icon-colony {
	display: none;
}

.ng-city-switcher-btn:not(.is-main-city) .ng-city-icon-colony {
	display: inline;
}

body.ui-reboot .hud-header .ng-city-switcher-actions .ng-city-coords {
	font-size: var(--fs-20);
	
}

body.ui-reboot .hud-header .ng-city-switcher-actions .ng-city-switcher-btn .ng-city-icon-colony, body.ui-reboot .hud-header .ng-city-switcher-actions .ng-city-switcher-btn .ri-arrow-down-s-line {
	font-size: var(--fs-20);
}

.ui-hud-comm-tabs .ng-comm-tab-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	padding: 0 12px;
	min-width: 44px;
	height: 44px;
	border: none;
	border-radius: 12px;
	background: none;
	color: var(--ui-accent-blue);
	font: 500 10px/1 var(--font-display);
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
	appearance: none;
	-webkit-appearance: none;
}

.ui-hud-comm-tabs .ng-comm-tab-btn:hover {
	background: none;
	border: none;
	box-shadow: none;
	transform: none;
	color: inherit;
}

.ui-hud-comm-tabs .ng-comm-tab-btn.is-active {
	background: none;
	border: none;
	box-shadow: none;
	color: inherit;
}

.ui-hud-comm-tabs .ng-comm-tab-btn i {
	font-size: var(--fs-20);
	color: inherit;
}

.ui-hud-comm-tabs .ng-comm-tab-btn:hover i, .ui-hud-comm-tabs .ng-comm-tab-btn:focus-visible i, .ui-hud-comm-tabs .ng-comm-tab-btn.is-active i, .ui-hud-comm-tabs .ng-city-switcher-btn:hover i, .ui-hud-comm-tabs .ng-city-switcher-btn:focus-visible i, .ui-hud-comm-tabs .ng-city-switcher-btn.is-active i {
	color: var(--ui-accent-cyan);
	filter: drop-shadow(0 0 6px rgba(191, 239, 255, 0.7));
}

.ui-hud-comm-tabs .ng-comm-tab-btn span {
	display: inline;
	white-space: nowrap;
}

.ng-comm-tab-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
	padding: 6px 10px;
	background: transparent;
	border: none;
	color: var(--ui-accent-cyan);
	cursor: pointer;
	transition: all 0.2s ease;
}

@keyframes ng-unread-pulse{
	0%, 100% {
		opacity: 1;
		transform: scale(1);
		}
	50% {
		opacity: 0.7;
		transform: scale(1.15);
		}
}

.hud-header {
    align-items: center;
    padding: 0 50px;
    color: var(--ui-accent-cyan);
}

.hud-header a, .hud-header a:visited, .hud-header a:hover, .hud-header a:active {
	color: inherit;
}

.ui-nav-tabs.ng-page-tabs {
	justify-content: center;
}

body.ui-reboot .ui-nav-tabs a.tab, body.ui-reboot .ui-nav-tabs a.tab:visited, body.ui-reboot .ui-nav-tabs a.tab:hover, body.ui-reboot .ui-nav-tabs a.tab:active, body.ui-reboot .ui-nav-tabs a.tab:focus {
	text-decoration: none;
}

body.ui-reboot .ui-nav-tabs.ng-sections-tabs > a.tab, body.ui-reboot .ui-nav-tabs.ng-sections-tabs > a.tab:visited {
	display: flex;
	align-items: center;
	justify-content: center;
}

body.ui-reboot .ui-nav-tabs.ng-sections-tabs > a.tab > i {
	display: block;
}

.ui-nav-tabs .tab.is-active {
	border-color: var(--color-primary);
	}

.ui-nav-tabs .tab::before, .ui-nav-tabs .tab::after {
	content: '';
	position: absolute;
	inset: 2px;
	pointer-events: none;
}

.ui-nav-tabs .tab::before {
	border: none;
	}

.ui-nav-tabs .tab::after {
	inset: 0;
	background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.10), transparent 60%),linear-gradient(225deg, rgba(255, 255, 255, 0.06), transparent 60%),linear-gradient(45deg, rgba(255, 255, 255, 0.08), transparent 60%),linear-gradient(315deg, rgba(255, 255, 255, 0.04), transparent 60%);
	background-size: 10px 10px;
	background-repeat: no-repeat;
	background-position: top left, top right, bottom left, bottom right;
}

body.ui-reboot .ui-nav-tabs.ng-sections-tabs .tab[data-comm-view="trade"], body.ui-reboot .ui-nav-tabs.ng-sections-tabs .tab[data-comm-view="techtree"] {
	border: none;
	background: transparent;
	}

body.ui-reboot .ui-nav-tabs.ng-sections-tabs .tab[data-comm-view="trade"]::before, body.ui-reboot .ui-nav-tabs.ng-sections-tabs .tab[data-comm-view="trade"]::after, body.ui-reboot .ui-nav-tabs.ng-sections-tabs .tab[data-comm-view="techtree"]::before, body.ui-reboot .ui-nav-tabs.ng-sections-tabs .tab[data-comm-view="techtree"]::after {
	content: none;
}

.ng-widget {
	border-radius: 12px;
	padding: 16px;
	backdrop-filter: blur(8px);
	min-height: auto;
	height: auto;
}

.ng-widget-title {
	color: var(--ui-accent-cyan, #ffffff);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--ui-accent-cyan, rgba(255, 255, 255, 0.06));
	font-size: var(--fs-10);
	font-family: 'GeneraleStation', var(--font-body);
}

/* h2-Elemente mit .ng-widget-title übernehmen h2-Größe */
h2.ng-widget-title {
	font-size: var(--fs-h2);
	letter-spacing: 0.8px;
	font-weight: 400;
}

/* Divs mit --with-nav bleiben bei 12px (enthalten Block-Kinder) */
div.ng-widget-title--with-nav {
	font-size: var(--fs-12);
}

.ng-center-panel {
	max-width: 1200px;
	margin: 0 auto;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 12px;
	backdrop-filter: blur(40px) saturate(1.4);
	-webkit-backdrop-filter: blur(40px) saturate(1.4);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
	color: var(--ui-accent-cyan);
}

.ng-page-airport .ng-center-panel.ng-embed-inner, .ng-page-airport .ng-center-panel.ng-airport-wide {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: var(--space-6) var(--space-8);
}

body.ui-reboot .ng-root-grid {
	max-width: none;
	width: 100%;
	padding: 0;
	margin: 0;
	display: block;
	background: var(--ui-glass-fill);
}

.dock, .hud-header, .ng-shell-center {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.ng-progress-fill-dyn {
	background: var(--color-primary);
}

.ng-progress-container {
	display: flex;
	align-items: center;
	margin-bottom: 2px;
}

.ng-progress-fill {
	height: 14px;
	background-color: rgba(59, 130, 246, 0.60);
	margin: 0px;
}

.dock .ng-dock-panel {
	position: static;
	inset: auto;
	transform: none;
	opacity: 1;
	width: auto;
	max-width: 100%;
	pointer-events: auto;
	grid-area: auto;
	align-self: center;
}

.dock .ng-dock-content {
	width: auto;
}

.ui-center-hero::before, .ui-center-hero::after {
	display: none;
}

.ng-building-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-12);
	min-width: 0;
	padding: var(--space-12);
}

.ng-building-item.ng-defense-item {
	border: none;
}

.ng-building-header {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: var(--space-8);
	flex-wrap: wrap;
	width: 100%;
	margin-bottom: 4px;
}

.ng-building-type {
	font-family: var(--font-body);
	font-size: var(--fs-12);
	
	text-transform: uppercase;
	color: var(--color-primary);
}

.ng-building-level, .ng-building-time {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-body);
	font-size: var(--fs-12);

	white-space: nowrap;
}

.ng-building-level > span:first-child {
	color: var(--ui-accent-cyan);
	
}

.ng-building-level > span:first-child::before {
	content: 'Level ';

	
}

.ng-building-level > span + span, .ng-building-time .ng-building-status {
	color: var(--ui-accent-cyan);
}

.ng-build-available {
	color: var(--ui-accent-cyan);
	text-shadow: 0 0 4px #000;
	
}

.ng-building-resources {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 14px;
}

.ng-building-resources .ng-resource-item {
	border: none;
	background: none;
	border-radius: 12px;
	padding: 2px 0;
	gap: 0;
}

.ng-building-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-8);
	flex-wrap: wrap;
}

.ng-modal__header {
	position: relative;
	text-align: center;
	padding: var(--space-8) var(--space-12);
}

.ng-modal__inner .ng-widget-title, .ng-modal__inner .ng-building-header {
	display: none;
}

.ng-modal__inner .ng-widget {
	background: none;
	border: none;
	border-radius: 12px;
	padding: 0;
	margin-bottom: 0;
	backdrop-filter: none;
	}

.ng-modal__inner .ng-center-panel {
	max-width: none;
	padding: 0;
	margin: 0;
}

.ng-modal__inner .ng-embed-inner {
	padding: 0;
	margin: 0;
}

.ng-modal__title {
	text-align: center;
	margin: 0 0 2px 0;
}

.ng-modal__subtitle {
	font-size: var(--fs-12);
	color: var(--ui-accent-cyan);
	min-height: 16px;
}

.ng-modal__close {
	position: absolute;
	top: var(--space-8);
	right: var(--space-8);
	background: none;
	color: var(--ui-accent-cyan);
	border: none;
	padding: 0px;
	border-radius: 12px;
}

.ng-modal__close:hover {
	color: var(--ui-accent-cyan);
}

.ng-modal__body h3, .ng-modal__body h4 {
	margin: var(--space-8) 0 var(--space-4) 0;
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12);
	text-transform: uppercase;
	
}

.ng-modal__body p {
	margin: var(--space-4) 0;
}

.ng-terminal-feed::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(0deg,rgba(0, 0, 0, 0) 0px,rgba(0, 0, 0, 0) 2px,rgba(0, 255, 170, 0.05) 3px,rgba(0, 0, 0, 0) 4px);
	opacity: 0.45;
	mix-blend-mode: screen;
	animation: ngScan 6s linear infinite;
}

.ng-term-line {
	white-space: pre;
}

.ng-feed-fade-in {
	opacity: 0;
	animation: ngFadeIn 0.22s ease forwards, ngFlicker 1.1s ease-out 0.22s 1;
}

.ng-inline-countdown {
	color: var(--ui-accent-cyan);
	text-shadow: 0 0 6px #008fd6;
}

.ng-spinner-inline {
	display: inline-block;
	min-width: 1ch;
	margin-left: 6px;
	color: var(--ui-accent-cyan);
}

.ng-glitch-line {
	position: relative;
	text-shadow: -1px 0 rgba(255, 255, 255, 0.35), 1px 0 rgba(0, 255, 170, 0.35);
	animation: ngGlitch 0.9s steps(1, end) 1;
}

.ng-terminal-feed.ng-glitch::after {
	content: '';
	position: absolute;
	inset: -2px;
	pointer-events: none;
	background: repeating-linear-gradient(180deg,rgba(0, 0, 0, 0) 0,rgba(53, 255, 167, 0.08) 2px,rgba(0, 0, 0, 0) 4px);
	mix-blend-mode: screen;
	opacity: 0.18;
	animation: ngGlitchBars 2s linear infinite;
}

@keyframes ngFadeIn {
	to {
		opacity: 1;
	}
}

@keyframes ngFlicker {
	0% {
		filter: brightness(1);
	}
	25% {
		filter: brightness(1.25);
	}
	45% {
		filter: brightness(0.9);
	}
	60% {
		filter: brightness(1.1);
	}
	100% {
		filter: brightness(1);
	}
}

@keyframes ngScan {
	0% {
		transform: translateY(-100%);
	}
	100% {
		transform: translateY(100%);
	}
}

@keyframes ngGlitch {
	0% {
		transform: translate(0, 0);
	}
	10% {
		transform: translate(-1px, 0);
	}
	20% {
		transform: translate(1px, 0);
	}
	30% {
		transform: translate(-0.5px, 0);
	}
	40% {
		transform: translate(0.5px, 0);
	}
	100% {
		transform: translate(0, 0);
	}
}

@keyframes ngGlitchBars {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: 0 40px;
	}
}

@media (max-width: 1024px) {
	.ng-modal__inner {
		width: 100%;
	}
}

@media (max-width: 640px) {
	.ng-modal__inner {
		width: 100%;
	}
}

.ng-building-item .ng-building-image {
	flex: 0 0 92px;
	width: 92px;
	height: 92px;
	object-fit: cover;
	display: block;
	border: 1px solid var(--ui-accent-cyan);
}

.ng-building-item .ng-building-info, .ng-building-item .ng-defense-info, .ng-building-item .ng-hangar-main {
	flex: 1 1 auto;
	min-width: 0;
}

.ng-defense-resources {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--space-8);
}

.ng-defense-resources .ng-resource-item {
	width: auto;
	display: flex;
	align-items: center;
	min-height: 34px;
	padding: 6px 10px;
	border: none;
	background: none;
	font-family: var(--font-body);
	font-size: var(--fs-12);
	
	color: var(--ui-accent-cyan);
}

.ng-defense-mainrow {
	display: flex;
	gap: var(--space-12);
	align-items: flex-start;
	justify-content: space-between;
}

.ng-defense-col {
	flex: 1 1 auto;
	min-width: 0;
}

.ng-defense-controls {
	flex: 0 0 auto;
}

.ng-defense-actions {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	flex-wrap: wrap;
}

.ng-action-btn {
	min-height: 34px;
	min-width: 34px;
	padding: 0 10px;
	border: 1px solid var(--ui-accent-cyan);
	background: rgba(255, 255, 255, 0);
	color: var(--ui-accent-cyan);
	font-family: var(--font-body);
	letter-spacing: 0.8px;
	text-transform: uppercase;
}

.ng-action-btn.ng-btn-disabled, .ng-action-btn:disabled {
	opacity: 0.45;
}

.ng-input-number {
	min-height: 34px;
	width: 64px;
	padding: 0 10px;
	border: 1px solid var(--ui-accent-cyan);
	background: var(--ui-glass-fill);
	color: var(--ui-accent-cyan);
	font-family: var(--font-body);
}

.ng-main-sections-bar {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	padding: .5rem 1rem;
	margin-bottom: .75rem;
	align-items: center;
	width: 100%;
}

.ng-main-sections-bar .ng-section-trigger {
	position: relative;
	cursor: pointer;
	transition: transform .25s ease, box-shadow .25s ease;
	outline: none;
	border: 0;
	background: #111;
	color: var(--ui-accent-cyan);
	min-height: 120px;
}

.ng-tile-building-active .ng-tile-progress-wrap {
	opacity: 1;
}

.ng-tile-tech.is-researching .ng-tile-progress-wrap, .ng-tile-tech[data-researching="1"] .ng-tile-progress-wrap {
	opacity: 1;
}

.ng-tile-progress-wrap {
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 10px;
	height: 8px;
	background: rgba(0, 0, 0, 0.30);
	border: 1px solid #3a332b;
	border-radius: 12px;
	overflow: hidden;
	}

.ng-tile-progress-label {
	position: absolute;
	left: 50%;
	bottom: -18px;
	transform: translateX(-50%);
	text-align: center;
}

.ng-tile-progress-bar {
	position: absolute;
	inset: 0;
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, #7cb3ff, #c6e2ff);
	transition: width .25s linear;
}

.ng-tile .ng-live-eta {
	top: auto;
	bottom: 18px;
	transform: translate(-50%, 0);
}

.ng-tile-cube .ng-tile-progress-wrap {
	z-index: 10;
}

/* Status-Badge auf der Front-Face (Seite 1): zeigt "Bau läuft" / "Forschung läuft" ohne Klick */
.ng-face-front-status {
	position: absolute;
	bottom: 24px;
	left: 0;
	right: 0;
	text-align: center;
	font-size: var(--fs-12, 12px);
	color: var(--ui-accent-cyan);
	pointer-events: none;
	z-index: 11;
}

.ng-face-front-status[hidden] {
	display: none;
}

.ng-tile-tech .ng-tile-progress-bar {
	background: linear-gradient(90deg, #7cb3ff, #c6e2ff);
	}

.ng-tile-delayed {
	filter: saturate(.4) brightness(.85);
}

.ng-defense-progress-wrap {
	position: relative;
	margin: 6px 0 8px;
	width: 100%;
	height: 8px;
	background: rgba(0, 0, 0, 0.30);
	border: 1px solid #3a332b;
	border-radius: 12px;
	overflow: hidden;
	}

.ng-defense-progress-bar {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, #7cb3ff, #c6e2ff);
	transition: width .25s linear;
}

.ng-defense-progress-bar {
	background: linear-gradient(90deg, #c89d3a, #f1d17b);
}

.ng-defense-progress-bar span {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	font-size: var(--fs-12);
	
	color: var(--ui-accent-cyan);
	font-family: var(--font-body);
	letter-spacing: .5px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.40);
}

.ng-live-eta {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.50);
	padding: 6px 12px 6px;
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 12px;
	font-size: var(--fs-12);
	
	letter-spacing: .5px;
	color: var(--ui-accent-cyan);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.70);
	backdrop-filter: blur(3px);
}

.ng-live-pending {
	position: absolute;
	bottom: 6px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(40, 40, 40, .75);
	padding: 2px 8px 2px;
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 12px;
	letter-spacing: .5px;
	color: var(--ui-accent-cyan);
	}

.ng-main-sections-bar .ng-section-trigger:active {
	transform: scale(.97);
}

.ng-main-sections-bar .ng-tile.ng-tile-system .ng-tile-bg {
	position: absolute;
	inset: 0;
	background-image: var(--ng-tile-bg);
	background-size: cover;
	background-position: center;
	transition: transform .4s ease, filter .3s ease;
	filter: brightness(0.7) saturate(0.9);
}

.ng-main-sections-bar .ng-tile.ng-tile-system:hover .ng-tile-bg {
	filter: brightness(0.85) saturate(1.1);
	transform: scale(1.03);
}

.ng-main-sections-bar .ng-tile.ng-tile-system::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg,transparent,rgba(59, 130, 246, 0.50),rgba(59, 130, 246, 0.80),rgba(59, 130, 246, 0.50),transparent);
	z-index: 2;
	opacity: 0;
	transition: opacity .3s ease;
}

.ng-main-sections-bar .ng-tile.ng-tile-system:hover::after {
	opacity: 1;
}

.ng-main-sections-bar .ng-tile-building:hover .ng-tile-bg {
	filter: none;
}

.ng-main-sections-bar .ng-tile.ng-tile-system .ng-tile-title {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	display: block;
	padding: 12px 14px;
	font-family: var(--font-body);
	font-size: var(--fs-12);
	
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--ui-accent-cyan);
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.80);
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.60));
}

.ng-main-sections-bar .ng-tile.ng-tile-system:hover .ng-tile-title {
	color: var(--color-accent);
}

.ng-main-sections-bar .ng-tile.ng-tile-system .ng-tile-corner {
	position: absolute;
	width: 12px;
	height: 12px;
	z-index: 3;
	pointer-events: none;
}

.ng-main-sections-bar .ng-tile.ng-tile-system:hover .ng-tile-corner {
	border-color: rgba(59, 130, 246, 0.90);
}

.ng-main-sections-bar .ng-tile.ng-tile-system.has-no-image .ng-tile-bg {
	background: none;
	opacity: 1;
}

.ng-main-sections-bar .ng-tile.ng-tile-system .ng-tile-img-missing {
	position: absolute;
	right: 6px;
	top: 6px;
	z-index: 1;
	border: 1px solid #333;
	border-radius: 12px;
	padding: 0 6px;
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12);
}

.ng-sections-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
	touch-action: pan-y pinch-zoom;
	height: 0;
	transition: height .45s cubic-bezier(.32,.72,.24,1);
}

.ng-section-panel {
	flex: 0 0 100%;
	opacity: .35;
	transition: opacity .4s ease;
}

.ng-section-panel.is-active {
	opacity: 1;
}

.ng-tiles-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--space-20);
	padding: 0 5% 24px;
}

.ng-build-tiles-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--ng-tile-cube-width), 1fr));
	gap: var(--space-16);
	padding: 0 5%;
}

.ng-build-tiles-grid .ng-tile-building.ng-tile-cube, .ng-section-panel .ng-tile-building.ng-tile-cube, .ng-tiles-grid .ng-tile-building.ng-tile-cube, .ng-tiles-grid .ng-tile-tech, .ng-tiles-grid .ng-tile-defense, .ng-tiles-grid .ng-tile-hangar {
	width: min(100%, var(--ng-tile-cube-width));
	max-width: var(--ng-tile-cube-width);
	height: auto;
	aspect-ratio: var(--ng-tile-cube-aspect);
}

.ng-sections-pagination {
	display: flex;
	justify-content: center;
	gap: .5rem;
	margin: .5rem 0 1.25rem;
}

.ng-panel-error {
	background: rgba(220, 38, 38, 0.08);
	color: var(--ui-accent-cyan);
	padding: 1rem;
	border: 1px solid #752d2d;
	border-radius: 12px;
	font-size: var(--fs-h3);
}

.ng-sections-placeholder {
	text-align: center;
	color: var(--ui-accent-cyan);
}

.ng-sections-slider.is-hidden-initial {
	display: none;
}

.ng-tile-cube {
	position: relative;
	perspective: 900px;
	perspective-origin: 50% 50%;
	transform: translateZ(0);
}

.ng-tile.ng-tile-cube {
	align-items: stretch;
	justify-content: stretch;
	overflow: visible;
}

.ng-tile-cube .ng-cube-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	will-change: transform;
	pointer-events: none;
	flex: 0 0 100%;
	min-width: 100%;
	transition: transform .55s cubic-bezier(.32, .72, .24, 1);
}

.ng-tile-cube[data-cube-step="0"] .ng-cube-inner {
	transform: translateZ(calc(var(--cube-half, 0px) * -1)) rotateY(0deg);
}

.ng-tile-cube[data-cube-step="1"] .ng-cube-inner {
	transform: translateZ(calc(var(--cube-half, 0px) * -1)) rotateY(-90deg);
}

.ng-tile-cube[data-cube-step="2"] .ng-cube-inner {
	transform: translateZ(calc(var(--cube-half, 0px) * -1)) rotateY(-180deg);
}

.ng-tile-cube[data-cube-step="3"] .ng-cube-inner {
	transform: translateZ(calc(var(--cube-half, 0px) * -1)) rotateY(-270deg);
}

.ng-cube-face {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	transform: translateZ(0);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 6px;
	box-sizing: border-box;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 12px;
	box-shadow: 0 0 30px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 40px rgba(255, 255, 255, 0.03);
}

.ng-tile-cube[data-cube-step="0"] .ng-cube-face.ng-face-front, .ng-tile-cube[data-cube-step="1"] .ng-cube-face.ng-face-actions, .ng-tile-cube[data-cube-step="2"] .ng-cube-face.ng-face-info, .ng-tile-cube[data-cube-step="3"] .ng-cube-face.ng-face-extra {
	pointer-events: auto;
}

.ng-cube-face.ng-face-front {
	align-items: stretch;
	justify-content: flex-start;
	padding-top: 6px;
	position: relative;
	transform: rotateY(0deg) translateZ(var(--cube-half, 0px));
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

.ng-cube-face.ng-face-front .ng-tile-title {
	margin-top: 0;
	align-self: flex-start;
}

.ng-tile-cube > .ng-header-avatar-level.ng-tile-cube-metric {
	top: -10px;
	right: -12px;
	min-width: 34px;
	height: 34px;
	padding: 0 8px;
	color: #1f2937;
	z-index: 20;
}

.ng-tile-cube > .ng-header-avatar-level.ng-tile-cube-metric strong {
	color: inherit;
	font-size: 18px;
}

.ng-tile-cube > .ng-header-avatar-level.ng-tile-cube-metric[data-digits="3"] strong {
	font-size: 16px;
}

.ng-tile-cube > .ng-header-avatar-level.ng-tile-cube-metric[data-digits="4"] strong, .ng-tile-cube > .ng-header-avatar-level.ng-tile-cube-metric[data-digits="5"] strong {
	font-size: 14px;
}

.ng-tile-cube[data-cube-step="1"] .ng-tile-progress-wrap, .ng-tile-cube[data-cube-step="2"] .ng-tile-progress-wrap, .ng-tile-cube[data-cube-step="3"] .ng-tile-progress-wrap, .ng-tile-cube[data-cube-step="1"] .ng-live-eta, .ng-tile-cube[data-cube-step="2"] .ng-live-eta, .ng-tile-cube[data-cube-step="3"] .ng-live-eta {
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
}

.ng-tile-cube[data-cube-step="0"] .ng-tile-progress-wrap, .ng-tile-cube[data-cube-step="0"] .ng-live-eta {
	opacity: 1;
	transition: opacity .25s ease;
}

.ng-cube-face .ng-face-title {
	font-size: var(--fs-12);
	
	letter-spacing: .5px;
	margin-bottom: 4px;
	color: var(--ui-accent-cyan);
	text-align: center;
}

.ng-cube-face .ng-face-row {
	font-size: var(--fs-12);
	margin: 2px 0;
	color: var(--ui-accent-cyan);
	text-align: center;
}

.ng-cube-face .ng-face-btn {
	margin-top: 6px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid var(--ui-accent-cyan);
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12);
	padding: 4px 10px;
	border-radius: 12px;
	cursor: pointer;
	letter-spacing: .5px;
	text-transform: uppercase;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background .2s, border-color .2s;
}

.ng-cube-face .ng-face-btn:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.5);
}

.ng-cube-face .ng-cost {
    display: inline-block;
    letter-spacing: .4px;
}

.ng-cube-face .ng-cost.ng-ir {
	color: var(--ui-accent-cyan);
}

.ng-cube-face .ng-cost.ng-hz {
	color: var(--ui-accent-cyan);
}

.ng-cube-face .ng-cost.ng-o2 {
	color: var(--ui-accent-cyan);
}

.ng-cube-face .ng-face-time {
	color: var(--ui-accent-cyan);
}

.ng-face-skeleton {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-6);
	padding: 4px 0;
}

.ng-face-skeleton .ng-skel-line.short {
	width: 55%;
}

.ng-cube-face.ng-face-actions {
	transform: rotateY(90deg) translateZ(var(--cube-half, 0px));
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--ui-accent-cyan);
	box-shadow: 0 0 30px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 0 60px rgba(255, 255, 255, 0.04);
}

.ng-cube-face.ng-face-info {
	transform: rotateY(180deg) translateZ(var(--cube-half, 0px));
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--ui-accent-cyan);
	box-shadow: 0 0 30px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 0 60px rgba(255, 255, 255, 0.04);
}

.ng-cube-face.ng-face-extra {
	transform: rotateY(270deg) translateZ(var(--cube-half, 0px));
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--ui-accent-cyan);
	box-shadow: 0 0 30px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 0 60px rgba(255, 255, 255, 0.04);
}

.ng-tile-cube .ng-cube-inner .ng-cube-face form {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.ng-tile-cube .ng-cube-inner .ng-cube-face form button {
	width: auto;
}

.ng-section-panel[data-section="build"], .ng-section-panel[data-section="tech"], .ng-section-panel[data-section="defense"], .ng-section-panel[data-section="hangar"], .ng-section-panel[data-section="airport"] {
	position: relative;
}

.ng-section-panel[data-section="build"] .ng-section-panel-inner, .ng-section-panel[data-section="tech"] .ng-section-panel-inner, .ng-section-panel[data-section="defense"] .ng-section-panel-inner, .ng-section-panel[data-section="hangar"] .ng-section-panel-inner, .ng-section-panel[data-section="airport"] .ng-section-panel-inner {
	position: relative;
	min-height: 140px;
}

.ng-section-panel[data-section="airport"] .ng-section-panel-inner {
	animation: none;
	transform: none;
}

.ng-section-panel[data-section="build"] .ng-tile-bg, .ng-section-panel[data-section="tech"] .ng-tile-bg, .ng-section-panel[data-section="defense"] .ng-tile-bg, .ng-section-panel[data-section="hangar"] .ng-tile-bg {
	animation: none;
}

.ng-section-panel[data-section="build"] .ng-tile .ng-tile-bg::after, .ng-section-panel[data-section="tech"] .ng-tile .ng-tile-bg::after, .ng-section-panel[data-section="defense"] .ng-tile .ng-tile-bg::after, .ng-section-panel[data-section="hangar"] .ng-tile .ng-tile-bg::after {
	animation: none;
}

.ng-section-panel[data-section="build"] .ng-cube-face .ng-face-front, .ng-section-panel[data-section="tech"] .ng-cube-face .ng-face-front, .ng-section-panel[data-section="defense"] .ng-cube-face .ng-face-front, .ng-section-panel[data-section="hangar"] .ng-cube-face .ng-face-front {
	animation: none;
}

.ng-tile-grid-tech {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--space-20);
	margin-top: .5rem;
}

.ng-tile-tech {
	position: relative;
	border: 1px solid var(--ui-accent-cyan);
	height: 175px;
	width: 200px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	overflow: hidden;
}

.ng-tile-tech:not(.is-expensive):not(.ng-tile-inactive) {
	background: var(--card-bg);
}

.ng-tile-tech .ng-tile-title {
	background: var(--ui-glass-fill);
	font-size: var(--fs-12);
	padding: 4px 6px 4px;
	color: var(--ui-accent-cyan);
	letter-spacing: .5px;
	text-align: center;
	z-index: 2;
	position: relative;
}

.ng-tile-tech.is-researching {
	border-color: #ff8a33;
	}

.ng-tile-locked-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	padding: 6px 8px;
	text-align: center;
}

.ng-tile-locked-overlay__reqs {
	font-size: var(--fs-12);
	color: var(--clr-accent-red, #ff4d4d);
}

.ng-tile-tech:focus {
	outline: 2px solid var(--color-accent);
	outline-offset: 0;
}

.ng-tile-tech .ng-tile-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	filter: none;
	transition: none;
	z-index: 0;
}

.ng-tile-tech.has-no-image:not(.is-expensive):not(.ng-tile-inactive) {
	background: var(--card-bg);
}

.ng-tile-tech.has-no-image .ng-tile-bg {
	display: none;
}

.ng-tile-tech.has-no-image:before {
	content: "?";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 34px;
	color: var(--ui-accent-cyan);
	
	opacity: .35;
}

.ng-tile-img-missing {
	position: absolute;
	top: 4px;
	left: 4px;
	z-index: 6;
	background: rgba(0, 0, 0, 0.50);
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12);
	
	padding: 2px 4px 4px;
	border: 1px solid rgba(255,157,123,.4);
	border-radius: 12px;
	letter-spacing: .5px;
	backdrop-filter: blur(2px);
	}

.ng-tile.has-no-image .ng-tile-bg {
	display: none;
}

.ng-tile.has-no-image {
	background: var(--card-bg);
}

.ng-tile.has-no-image::before {
	content: "?";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 34px;
	color: var(--ui-accent-cyan);
	
	opacity: .35;
}

.dock-container {
	position: relative;
}

.dock-container .ng-tile {
	position: relative;
	padding-top: 24px;
	align-items: flex-start;
}

.dock-container .ng-tile .ng-tile-title {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 5;
	margin: 0;
}

.dock-container .ng-tile.ng-tile-small {
	padding-top: 20px;
}

.dock-container .ng-tile.ng-tile-small .ng-tile-title {
	font-size: var(--fs-12);
}

.ng-tile {
	position: relative;
	width: 200px;
	height: 175px;
	overflow: hidden;
	cursor: pointer;
	padding: 0;
	outline: none;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	isolation: isolate;
	z-index: 0;
	font-family: var(--font-body);
	transition: border-color .25s, filter .25s, transform .25s;
}

.ng-tiles-grid .ng-tile:hover, .ng-build-tiles-grid .ng-tile:hover, .ng-defense-tiles-grid .ng-tile:hover, .ng-tiles-grid .ng-tile:focus-within, .ng-build-tiles-grid .ng-tile:focus-within, .ng-defense-tiles-grid .ng-tile:focus-within {
	z-index: 5;
}

.ng-tile-small {
	width: 150px;
	height: 125px;
}

.ng-tile-small .ng-tile-title {
	font-size: var(--fs-12);
	padding: 2px 4px 4px;
}

.ng-tile-large {
	width: 248px;
	height: 248px;
}

.ng-tile-large .ng-tile-title {
	font-size: var(--fs-12);
	letter-spacing: 1px;
	padding: 6px 8px 8px;
}

.ng-tile-tech.is-researching .ng-tile-bg {
	filter: none;
}

.ng-tech-complete-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.80);
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12);
	letter-spacing: .5px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s ease;
	z-index: 6;
	text-align: center;
	padding: 4px;
}

.ng-tech-complete-overlay.is-visible {
	opacity: 1;
	pointer-events: auto;
}

.ng-face-form .ng-face-btn {
	cursor: pointer;
}

.ng-tech-complete-inner {
	background: rgba(40, 50, 60, .55);
	padding: 6px 8px;
	border: 1px solid #ffb366;
	border-radius: 12px;
	}

.ng-tech-timer {
	display: block;
	margin-top: 4px;
	font-size: var(--fs-12);
	
	color: var(--ui-accent-cyan);
	letter-spacing: .5px;
	font-family: var(--font-body);
}

.ng-tile-tech .ng-tile-title .ng-tech-timer {
	display: block;
}

.ng-unit-timer {
	display: block;
	margin-top: 4px;
	font-size: var(--fs-12);
	letter-spacing: .5px;
	font-family: var(--font-body);
	color: var(--ui-accent-cyan);
	text-shadow: 0 0 4px rgba(0, 160, 255, 0.35);
}

.ng-tile-system.is-active-defense .ng-unit-timer {
	color: var(--ui-accent-cyan);
	text-shadow: 0 0 4px rgba(217, 119, 6, 0.35);
}

.ng-tile::before, .ng-cube-face .ng-face-front::before {
	content: none;
	display: none;
}

.ng-tile .ng-tile-bg::before, .ng-cube-face.ng-face-front .ng-tile-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	background-image: repeating-linear-gradient(0deg,var(--scanline-color) 0,var(--scanline-color) 2px,transparent 2px,transparent 4px);
	opacity: 0.75;
	mix-blend-mode: normal;
	background-position: 0 0;
	animation: ngScanlinesDown 6s linear infinite;
}

.ng-tile-bg::before, .ng-tile-bg::after {
	pointer-events: none;
}

.ng-tile:is(.ng-tile-building,.ng-tile-tech,.ng-tile-defense,.ng-tile-hangar) .ng-tile-bg {
	opacity: 1;
}

.ng-tile:is(.ng-tile-building,.ng-tile-tech,.ng-tile-defense,.ng-tile-hangar) .ng-tile-bg::before, .ng-tile:is(.ng-tile-building,.ng-tile-tech,.ng-tile-defense,.ng-tile-hangar) .ng-tile-bg::after {
	content: none;
}

.ng-tile:is(.ng-tile-building,.ng-tile-tech,.ng-tile-defense,.ng-tile-hangar)[data-affordable="1"]:not(.ng-tile-inactive):not(.is-locked):not(.is-expensive) .ng-tile-bg, .ng-tile:is(.ng-tile-building,.ng-tile-tech,.ng-tile-defense,.ng-tile-hangar)[data-building="1"] .ng-tile-bg, .ng-tile.ng-tile-tech[data-researching="1"] .ng-tile-bg {
	background-color: rgba(0, 0, 0, 0.55);
	filter: contrast(1.08) saturate(0.92) brightness(0.92);
	opacity: 1;
	animation: crtScanDrift 18s linear infinite,crtFlicker 3.6s steps(42, end) infinite;
}

.ng-tile:is(.ng-tile-building,.ng-tile-tech,.ng-tile-defense,.ng-tile-hangar)[data-affordable="1"]:not(.ng-tile-inactive):not(.is-locked):not(.is-expensive) .ng-tile-bg::before, .ng-tile:is(.ng-tile-building,.ng-tile-tech,.ng-tile-defense,.ng-tile-hangar)[data-building="1"] .ng-tile-bg::before, .ng-tile.ng-tile-tech[data-researching="1"] .ng-tile-bg::before {
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	border-radius: inherit;
	background-image: radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.22) 0 0.95px, transparent 1.25px),radial-gradient(circle at 78% 34%, rgba(255, 255, 255, 0.18) 0 0.95px, transparent 1.3px),radial-gradient(circle at 28% 74%, rgba(255, 255, 255, 0.16) 0 1.05px, transparent 1.35px),radial-gradient(circle at 66% 82%, rgba(255, 255, 255, 0.20) 0 0.95px, transparent 1.25px),radial-gradient(circle at 46% 56%, rgba(255, 255, 255, 0.13) 0 0.8px, transparent 1.15px),radial-gradient(circle at 84% 14%, rgba(255, 255, 255, 0.14) 0 0.8px, transparent 1.15px),radial-gradient(circle at 12% 62%, rgba(255, 255, 255, 0.12) 0 0.75px, transparent 1.1px),radial-gradient(circle at 58% 10%, rgba(255, 255, 255, 0.13) 0 0.75px, transparent 1.1px),radial-gradient(circle at 72% 58%, rgba(255, 255, 255, 0.11) 0 0.75px, transparent 1.1px),radial-gradient(circle at 32% 32%, rgba(255, 255, 255, 0.10) 0 0.7px, transparent 1px),radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.26), transparent 22%),radial-gradient(circle at 78% 72%, rgba(255, 255, 255, 0.18), transparent 20%),repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0.08) 1px, rgba(0, 0, 0, 0.06) 1px, rgba(0, 0, 0, 0.06) 2px),repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0.04) 1px, transparent 1px, transparent 2px),repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0, rgba(255, 255, 255, 0.018) 1px, transparent 1px, transparent 5px),linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 14%, rgba(0, 0, 0, 0.09) 32%, rgba(255, 255, 255, 0.05) 48%, rgba(0, 0, 0, 0.11) 74%, rgba(255, 255, 255, 0.025) 100%);
	background-repeat: no-repeat;
	background-size: 14px 14px, 16px 16px, 18px 18px, 15px 15px, 12px 12px, 13px 13px, 11px 11px, 12px 12px, 13px 13px, 10px 10px, 160px 160px, 220px 220px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
	background-position: 0 0, 18px 12px, -12px 20px, 14px -10px, 6px 8px, -8px 14px, 10px -6px, -6px 11px, 12px 5px, -10px -8px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
	opacity: 0.58;
	mix-blend-mode: normal;
	filter: contrast(2.2) brightness(1.22) saturate(0.9);
	animation: ngCityStaticNoiseShift 1.73s steps(7, end) infinite, ngCityStaticNoisePulse 6.41s steps(9, end) infinite;
}

.ng-tile:is(.ng-tile-building,.ng-tile-tech,.ng-tile-defense,.ng-tile-hangar)[data-affordable="1"]:not(.ng-tile-inactive):not(.is-locked):not(.is-expensive) .ng-tile-bg::after, .ng-tile:is(.ng-tile-building,.ng-tile-tech,.ng-tile-defense,.ng-tile-hangar)[data-building="1"] .ng-tile-bg::after, .ng-tile.ng-tile-tech[data-researching="1"] .ng-tile-bg::after {
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3;
	border-radius: inherit;
	background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0.26) 68%, rgba(0, 0, 0, 0.50) 84%, rgba(0, 0, 0, 0.78) 100%),repeating-linear-gradient(0deg,var(--scanline-color) 0,var(--scanline-color) 2px,transparent 2px,transparent 4px);
	opacity: 0.68;
	mix-blend-mode: normal;
	background-position: 0 0;
	animation: ngScanlinesDown 14s linear infinite;
}

.ng-tile:is(.ng-tile-building,.ng-tile-tech,.ng-tile-defense,.ng-tile-hangar)[data-affordable="1"]:not(.ng-tile-inactive):not(.is-locked):not(.is-expensive) .ng-tile-bg .ng-crt-vhs-layer, .ng-tile:is(.ng-tile-building,.ng-tile-tech,.ng-tile-defense,.ng-tile-hangar)[data-building="1"] .ng-tile-bg .ng-crt-vhs-layer, .ng-tile.ng-tile-tech[data-researching="1"] .ng-tile-bg .ng-crt-vhs-layer {
	display: block;
	z-index: 4;
	border-radius: inherit;
	opacity: 0.34;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 22%, rgba(255, 255, 255, 0.045) 48%, transparent 74%),linear-gradient(90deg, rgba(255, 0, 80, 0.08), transparent 35%, rgba(0, 180, 255, 0.08) 72%, transparent 100%),repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.03) 2px, rgba(0, 0, 0, 0.04) 2px, rgba(0, 0, 0, 0.04) 4px);
	mix-blend-mode: screen;
	animation: ngScanlinesDown 9s linear infinite;
}

.ng-tile:is(.ng-tile-building,.ng-tile-tech,.ng-tile-defense,.ng-tile-hangar)[data-affordable="1"]:not(.ng-tile-inactive):not(.is-locked):not(.is-expensive) .ng-tile-bg .ng-crt-testcard-layer, .ng-tile:is(.ng-tile-building,.ng-tile-tech,.ng-tile-defense,.ng-tile-hangar)[data-building="1"] .ng-tile-bg .ng-crt-testcard-layer, .ng-tile.ng-tile-tech[data-researching="1"] .ng-tile-bg .ng-crt-testcard-layer {
	display: block;
	z-index: 5;
	border-radius: inherit;
	opacity: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(220, 220, 220, 0.25)),repeating-linear-gradient(90deg, rgba(255, 0, 0, 0.18) 0, rgba(255, 0, 0, 0.18) 12.5%, rgba(0, 255, 255, 0.18) 12.5%, rgba(0, 255, 255, 0.18) 25%, rgba(0, 255, 0, 0.18) 25%, rgba(0, 255, 0, 0.18) 37.5%, rgba(255, 255, 0, 0.18) 37.5%, rgba(255, 255, 0, 0.18) 50%, rgba(255, 0, 255, 0.18) 50%, rgba(255, 0, 255, 0.18) 62.5%, rgba(0, 0, 255, 0.18) 62.5%, rgba(0, 0, 255, 0.18) 75%, rgba(255, 255, 255, 0.18) 75%, rgba(255, 255, 255, 0.18) 87.5%, rgba(0, 0, 0, 0.18) 87.5%, rgba(0, 0, 0, 0.18) 100%);
	animation: none;
}

.ng-tile:is(.ng-tile-building,.ng-tile-tech,.ng-tile-defense,.ng-tile-hangar)[data-affordable="1"]:not(.ng-tile-inactive):not(.is-locked):not(.is-expensive) .ng-tile-bg .ng-crt-testcard-layer.is-flashing, .ng-tile:is(.ng-tile-building,.ng-tile-tech,.ng-tile-defense,.ng-tile-hangar)[data-building="1"] .ng-tile-bg .ng-crt-testcard-layer.is-flashing, .ng-tile.ng-tile-tech[data-researching="1"] .ng-tile-bg .ng-crt-testcard-layer.is-flashing {
	animation: ngTestcardFlash 0.18s steps(12, end) 1;
}

.ng-crt-vhs-layer, .ng-crt-testcard-layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ng-tile:hover .ng-tile-bg {
	filter: none;
}

.ng-tile:nth-child(3n) .ng-tile-bg::before {
	animation-delay: -2s, .3s;
}

.ng-tile:nth-child(4n) .ng-tile-bg::before {
	animation-delay: -4s, .6s;
}

.ng-tile:nth-child(5n) .ng-tile-bg::before {
	animation-delay: -6s, .9s;
}

.ng-tile:nth-child(3n+2) .ng-tile-bg::after {
	animation-delay: .4s, -3s, 0s;
}

.ng-tile:nth-child(4n+1) .ng-tile-bg::after {
	animation-delay: .8s, -5s, 2s;
}

.ng-tile:nth-child(5n+3) .ng-tile-bg::after {
	animation-delay: 1.2s, -7s, 1s;
}

.ng-tile:focus {
	border-color: #464543;
}

.ng-tile-disabled .ng-tile-bg {
	filter: grayscale(1) brightness(.5) !important;
}

.ng-tile-disabled {
	cursor: not-allowed;
}

.ng-tile-title, .ng-tile .ng-tile-title {
	position: relative;
	z-index: 3;
	background: var(--ui-glass-fill);
	width: 100%;
	text-align: center;
	font-family: var(--font-body);
	font-size: var(--fs-12);
	padding: 4px 6px 6px;
	color: var(--ui-accent-cyan);
	letter-spacing: .5px;
}

.ng-tile-corner {
	position: absolute;
	font-size: var(--fs-12);
	padding: 2px 4px;
	color: var(--ui-accent-cyan);
	z-index: 2;
	pointer-events: none;
	backdrop-filter: blur(2px);
}

.ng-tile-corner-br {
	bottom: 30px;
	right: 3px;
}

.ng-tile-building .ng-live-badge {
	font-family: var(--font-body);
	backdrop-filter: blur(2px);
}

.ng-tile-building .ng-live-eta {
	font-family: var(--font-body);
	letter-spacing: .5px;
	backdrop-filter: blur(2px);
	text-align: center;
}

.ng-tile-missing-hint {
	position: absolute;
	left: 50%;
	top: -8px;
	transform: translate(-50%, -100%);
	background: rgba(255, 255, 255, 0.90);
	color: var(--ui-accent-cyan);
	border: 1px solid var(--ui-accent-cyan);
	padding: 6px 10px;
	border-radius: 12px;
	font-size: var(--fs-12);
	white-space: nowrap;
	z-index: 200;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease, transform .15s ease;
}

.ng-tile-missing-hint.show {
	opacity: 1;
	transform: translate(-50%, -110%);
}

/* Tile-Modals nutzen jetzt ng-modal-backdrop Pattern - alte Regeln obsolet */
/*
.ng-tile-overlay.active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.ng-tile-popups-root {
	position: fixed;
	inset: 0;
	z-index: 15010;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 24px 40px;
	gap: 0;
}

.ng-tile-popups-root.active {
	pointer-events: none;
}

.ng-tile-popups-root .ng-tile-modal,.ng-tile-popups-root .ng-modal {
	pointer-events: auto;
	margin: 0;
	transform: scale(.94);
	opacity: 0;
	transition: transform .28s ease, opacity .28s ease;
	width: min(420px, calc(100vw - 32px));
	max-width: 420px;
	max-height: calc(100vh - 64px);
}

.ng-tile-popups-root.active .ng-tile-modal,.ng-tile-popups-root.active .ng-modal {
	transform: scale(1);
	opacity: 1;
}

.ng-tile-modal {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	backdrop-filter: blur(40px) saturate(1.4);
	-webkit-backdrop-filter: blur(40px) saturate(1.4);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
	position: relative;
	z-index: 10002;
}

.ng-tile-modal>* {
	position: relative;
	z-index: 2;
}
*/

.ng-tile-modal .ng-terminal-static {
	text-align: left;
}

.ng-tile-modal .ng-terminal-content {
	scrollbar-width: thin;
}

.ng-tile-modal .ng-terminal-content::-webkit-scrollbar {
	width: 10px;
}

.ng-tile-modal .ng-terminal-content::-webkit-scrollbar-thumb {
	background: var(--ui-accent-cyan);
	border-radius: 12px;
}

.ng-tile-modal .ng-terminal-content::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 0, 0, 0.30);
}

.ng-tile:focus-visible {
	outline: 2px solid #1e3a3f;
	outline-offset: 2px;
}

.ng-mission-control {
	min-height: fit-content;
	height: auto;
	overflow: visible;
}

.ng-mission-control .ui-frame--heavy {
	position: relative;
	z-index: 1;
}

.ng-cityview {
	color: var(--ui-accent-cyan);
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
}

.ng-cityview-alerts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
	margin: 0 0 12px;
}

.ng-cityview-alert {
	background: rgba(60, 20, 10, .22);
	border: 1px solid rgba(217, 119, 6, 0.30);
	border-radius: 12px;
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12);
	letter-spacing: .4px;
	padding: 8px 10px;
}

.ng-cityview-res-grid {
	display: grid;
	gap: var(--space-12);
	grid-template-columns: 1fr;
}

.ng-cityview-res {
	background: transparent;
	border: none;
	padding: 6px 0;
}

.ng-cityview-res:last-child {
	border-bottom: none;
}

.ng-cityview-res-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-12);
}

.ng-cityview-res-name {
	
	letter-spacing: .3px;
	font-family: var(--font-body);
	font-size: var(--fs-12);
	color: var(--ui-accent-cyan);
}

.ng-cityview-res-now {
	font-variant-numeric: tabular-nums;
	font-family: var(--font-body);
	font-size: var(--fs-12);
	color: var(--ui-accent-cyan);
}

.ng-cityview-res-meta {
	display: flex;
	gap: var(--space-12);
	flex-wrap: wrap;
	margin-top: 4px;
}

.ng-cityview-kv {
	letter-spacing: .2px;
	font-family: var(--font-body);
	font-size: var(--fs-12);
	color: var(--ui-accent-cyan);
}

.ng-cityview-meter {
	height: 4px;
	background: rgba(40, 50, 60, 0.5);
	border: none;
	border-radius: 12px;
	overflow: hidden;
	margin-top: 6px;
}

.ng-cityview-meter-fill {
	height: 100%;
	width: 0;
	background: var(--color-accent);
	transition: width .4s ease;
}

.ng-cityview-res.is-warn .ng-cityview-meter-fill {
	background: var(--color-accent);
}

.ng-cityview-res.is-full .ng-cityview-meter-fill {
	background: var(--ui-alert-orange);
}

.ng-cityview-skylabel {
	display: flex;
	justify-content: center;
	gap: var(--space-6);
	margin-top: 6px;
	font-variant-numeric: tabular-nums;
}

.ng-cityview-skykey {

	font-size: var(--fs-12);
	
	
}

.ng-cityview-skylvl {
	color: var(--ui-accent-cyan);
	
}

.ng-cityview-skyname {
	margin-top: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ng-cityview-upgrades {
	display: grid;
	gap: var(--space-12);
}

.ng-cityview-upgrade {
	background: rgba(0, 0, 0, 0.80);
	border: 1px solid rgba(42,46,50,.9);
	border-radius: 12px;
	padding: 10px;
}

.ng-cityview-upgrade.is-active {
	border-color: rgba(255, 179, 87, .7);
	}

.ng-cityview-upgrade.is-active.is-ready {
	border-color: rgba(255, 179, 87, .7);
	}

.ng-cityview-upgrade.is-ready {
	border-color: rgba(84,212,154,.55);
}

.ng-cityview-upgrade.is-locked {
	border-color: rgba(111,137,149,.45);
}

.ng-cityview-upgrade-main {
	display: flex;
	justify-content: space-between;
	gap: var(--space-12);
}

.ng-cityview-upgrade-name {
	color: var(--ui-accent-cyan);
	
	letter-spacing: .3px;
}

.ng-cityview-upgrade-to {
	color: var(--ui-accent-cyan);
	font-variant-numeric: tabular-nums;
}

.ng-cityview-upgrade-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
	margin-top: 8px;
	align-items: center;
}

.ng-cityview-tag {
	border-radius: 12px;
	font-size: var(--fs-12);
	letter-spacing: .7px;
	padding: 4px 8px;
	border: 1px solid rgba(42,46,50,.9);
	color: var(--ui-accent-cyan);
	background: var(--ui-glass-fill);
}

.ng-cityview-tag.is-running {
	border-color: rgba(255,179,87,.55);
	color: var(--ui-accent-cyan);
}

.ng-cityview-tag.is-req {
	border-color: rgba(111,137,149,.45);
	color: var(--ui-accent-cyan);
}

.ng-cityview-tag.is-missing {
	border-color: rgba(217, 119, 6, 0.55);
	color: var(--ui-accent-cyan);
}

.ng-cityview-tag.is-ok {
	border-color: rgba(84,212,154,.45);
	color: var(--ui-accent-cyan);
}

.ng-cityview-cost {
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12);
	font-variant-numeric: tabular-nums;
}

.ng-cityview-note {
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12);
	margin-top: 10px;
}

.ng-active-jobs-card {
	position: relative;
}

.ng-active-jobs-card.is-active {
	animation: none;
	min-height: 320px;
}

.ng-active-jobs-card.is-active::after {
	content: '';
	position: absolute;
	inset: 0;
	padding: 0px;
	border-radius: 12px;
	border: 1px solid rgba(191, 239, 255, 0.34);
	background: linear-gradient(90deg, transparent 0%, rgba(191, 239, 255, 0.06) 25%, rgba(191, 239, 255, 0.22) 50%, rgba(79, 172, 254, 0.12) 75%, transparent 100%);
	background-size: 200% 100%;
	animation: ng-card-border-shimmer 2.5s ease-in-out infinite;
	pointer-events: none;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	-webkit-mask-composite: xor;
}

.ng-active-jobs-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: 4px;
}

.ng-active-job-item:hover {
	background: rgba(10, 20, 30, 0.58);
	box-shadow: inset 0 0 0 1px rgba(79,172,254,0.22);
}

.ng-active-job-item[data-job-type="build"] {
	border-left: none;
}

.ng-active-job-item[data-job-type="tech"] {
	border-left: none;
}

.ng-active-job-item[data-job-type="defense"] {
	border-left: none;
}

.ng-active-job-item[data-job-type="plane"] {
	border-left: none;
}

.ng-job-info {
	flex: 1;
	min-width: 0;
}

.ng-job-amount {
	background: transparent;
	border-radius: 12px;
	
	margin-left: 6px;
	padding: 0;
}

.ng-job-timer {
	align-items: center;
	background: transparent;
	border: none;
	display: flex;
	flex-shrink: 0;
	padding: 0;
}

.ng-active-job-item.is-done {
	opacity: 0.5;
}

/* Quick-Build Buttons in aktiver Job-Card */
.ng-job-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.ng-job-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 1px solid rgba(79,172,254,0.34);
	border-radius: 4px;
	background: rgba(10,20,30,0.45);
	color: rgba(79,172,254,0.78);
	cursor: pointer;
	padding: 0;
	font-size: var(--fs-h3);
	transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}

.ng-job-btn:hover:not(:disabled) {
	background: rgba(10,20,30,0.7);
	color: var(--ui-accent-cyan);
	border-color: var(--ui-accent-cyan);
	box-shadow: 0 0 8px rgba(191, 239, 255,0.32);
}

.ng-job-btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

.ng-job-btn-repeat:hover:not(:disabled) {
	color: var(--ui-accent-cyan);
	border-color: var(--ui-accent-cyan);
}

.ng-job-btn-cancel:hover:not(:disabled) {
	color: var(--ui-alert-orange);
	border-color: var(--ui-alert-orange);
}

.ng-job-btn.is-loading {
	opacity: 0.5;
	pointer-events: none;
}

.ng-job-btn.is-loading i::before {
	content: "\eb2e";
	animation: spin-loading 0.8s linear infinite;
}

@keyframes spin-loading {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* Job-Feedback Toast */

/* Neue/entfernte Job-Items Animation */
.ng-active-job-item.is-new {
	opacity: 0;
	transform: translateX(20px);
	transition: opacity 0.3s, transform 0.3s;
}

.ng-active-job-item.is-removing {
	opacity: 0;
	transform: translateX(-20px);
	transition: opacity 0.3s, transform 0.3s;
	max-height: 0;
	overflow: hidden;
	padding: 0;
	margin: 0;
	border: 0;
	transition: opacity 0.3s, transform 0.3s, max-height 0.3s 0.1s, padding 0.3s 0.1s;
}

.tab.is-defense-active {
	position: relative;
	overflow: visible;
	z-index: 0;
}

.tab.is-defense-active::before {
	content: '';
	position: absolute;
	inset: 0;
	padding: 0px;
	border-radius: 12px;
	border: 1px solid var(--ui-accent-cyan);
	background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.04) 25%, rgba(59, 130, 246, 0.15) 50%, rgba(255, 255, 255, 0.04) 75%, transparent 100%);
	background-size: 200% 100%;
	animation: ng-card-border-shimmer 2.5s ease-in-out infinite;
	pointer-events: none;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	-webkit-mask-composite: xor;
	z-index: 1;
}

@keyframes ng-card-border-shimmer {
	0% {
		background-position: -100% 0;
	}
	100% {
		background-position: 100% 0;
	}
}

.ng-job-timer.is-finishing .ng-timer-value {
	color: var(--ui-accent-cyan);
}

.ng-airport-layout {
	align-items: start;
	display: grid;
	column-gap: var(--space-12);
	row-gap: var(--space-12);
	position: relative;
	isolation: isolate;
	padding-bottom: 75px;
	grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.6fr) minmax(0, 0.7fr);
	grid-template-areas: "left fleet mission""selected fleet mission";
}

.ng-airport-col {
	border-radius: 12px;
	padding: 8px;
	position: relative;
	z-index: 1;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--ui-accent-cyan);
}

.ng-airport-col::before, .ng-airport-col::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 12px;
	pointer-events: none;
}

.ng-airport-col::before {
	border: 1px solid var(--ui-accent-cyan);
	opacity: 0.85;
}

.ng-airport-col::after {
	opacity: 0.55;
	background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0), transparent 55%);
	background-size: 140% 140%;
	background-position: center;
	background-repeat: no-repeat;
}

.ng-airport-col.col-fleet {
	grid-area: fleet;
}

.ng-airport-col.col-selected {
	grid-area: selected;
}

.ng-airport-col.col-mission {
	grid-area: mission;
}

.ng-airport-col.col-launch {
	grid-column: 1 / -1;
}

.ng-airport-stack {
	grid-area: left;
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.ng-airport-fleet-stack {
	grid-area: fleet;
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.ng-airport-stack .ng-airport-col {
	margin: 0;
}

.ng-airport-fleet-stack .ng-airport-col {
	margin: 0;
}

.ng-airport-mission-stack {
	grid-area: mission;
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.ng-airport-mission-stack .ng-airport-col {
	margin: 0;
}

.ng-airport-col h3 {
	align-items: center;
	color: var(--ui-accent-cyan);
	display: flex;
	font-family: 'GeneraleStation', var(--font-body);
	font-size: var(--fs-12);
	gap: var(--space-8);
	letter-spacing: 1px;
	margin: 0 0 14px;
}

.ng-airport-col h3:before {
	background: var(--color-accent);
	border-radius: 12px;
	content: "";
	height: 6px;
	width: 6px;
}

.ng-fleet-grid {
	--thumb: 78px;
	display: grid;
	gap: var(--space-12);
	grid-template-columns: repeat(3, minmax(0, var(--ng-panel-cube-width)));
}

.ng-fleet-item {
	border: none;
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.30);
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	overflow: hidden;
	padding: 12px 12px 14px;
	position: relative;
	transition: background .25s, border-color .25s, transform .25s;
	min-height: 0;
	aspect-ratio: var(--ng-panel-cube-aspect, 8 / 7);
	animation: crtScanDrift 18s linear infinite, crtFlicker 3.6s steps(42, end) infinite;
}

.ng-fleet-item:before {
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 4;
	border-radius: inherit;
	background-image: radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.22) 0 0.95px, transparent 1.25px),radial-gradient(circle at 78% 34%, rgba(255, 255, 255, 0.18) 0 0.95px, transparent 1.3px),radial-gradient(circle at 28% 74%, rgba(255, 255, 255, 0.16) 0 1.05px, transparent 1.35px),radial-gradient(circle at 66% 82%, rgba(255, 255, 255, 0.20) 0 0.95px, transparent 1.25px),radial-gradient(circle at 46% 56%, rgba(255, 255, 255, 0.13) 0 0.8px, transparent 1.15px),radial-gradient(circle at 84% 14%, rgba(255, 255, 255, 0.14) 0 0.8px, transparent 1.15px),radial-gradient(circle at 12% 62%, rgba(255, 255, 255, 0.12) 0 0.75px, transparent 1.1px),radial-gradient(circle at 58% 10%, rgba(255, 255, 255, 0.13) 0 0.75px, transparent 1.1px),radial-gradient(circle at 72% 58%, rgba(255, 255, 255, 0.11) 0 0.75px, transparent 1.1px),radial-gradient(circle at 32% 32%, rgba(255, 255, 255, 0.10) 0 0.7px, transparent 1px),radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.26), transparent 22%),radial-gradient(circle at 78% 72%, rgba(255, 255, 255, 0.18), transparent 20%),repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0.08) 1px, rgba(0, 0, 0, 0.06) 1px, rgba(0, 0, 0, 0.06) 2px),repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0.04) 1px, transparent 1px, transparent 2px),repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0, rgba(255, 255, 255, 0.018) 1px, transparent 1px, transparent 5px),linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 14%, rgba(0, 0, 0, 0.09) 32%, rgba(255, 255, 255, 0.05) 48%, rgba(0, 0, 0, 0.11) 74%, rgba(255, 255, 255, 0.025) 100%);
	background-repeat: no-repeat;
	background-size: 14px 14px, 16px 16px, 18px 18px, 15px 15px, 12px 12px, 13px 13px, 11px 11px, 12px 12px, 13px 13px, 10px 10px, 160px 160px, 220px 220px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
	background-position: 0 0, 18px 12px, -12px 20px, 14px -10px, 6px 8px, -8px 14px, 10px -6px, -6px 11px, 12px 5px, -10px -8px, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
	opacity: 0.58;
	mix-blend-mode: normal;
	filter: contrast(2.2) brightness(1.22) saturate(0.9);
	animation: ngCityStaticNoiseShift 1.73s steps(7, end) infinite, ngCityStaticNoisePulse 6.41s steps(9, end) infinite;
}

.ng-fleet-item:hover {
	border-color: rgba(59, 130, 246, 0.40);
	transform: translateY(-3px);
}

.ng-fleet-item:hover:before {
	opacity: 0.72;
}

.ng-fleet-image-thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.ng-fleet-item:after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0.26) 68%, rgba(0, 0, 0, 0.50) 84%, rgba(0, 0, 0, 0.78) 100%),repeating-linear-gradient(0deg, var(--scanline-color) 0, var(--scanline-color) 2px, transparent 2px, transparent 4px);
	opacity: 0.68;
	mix-blend-mode: normal;
	background-position: 0 0;
	animation: ngScanlinesDown 14s linear infinite;
	z-index: 1;
	pointer-events: none;
}

.ng-fleet-item:hover .ng-fleet-image-thumb {
	filter: brightness(1) saturate(1);
	transform: scale(1.03);
}

.ng-fleet-item > .ng-fleet-name, .ng-fleet-item > .ng-fleet-available, .ng-fleet-item > .ng-fleet-input, .ng-fleet-item > .ng-fleet-actions-row {
	position: relative;
	z-index: 2;
}

.ng-fleet-name {
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12);
	
	letter-spacing: .5px;
	margin-top: 4px;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.60);
}

.ng-fleet-available {
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12);
	letter-spacing: .5px;
	text-align: center;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.50);
	flex: 1 1 auto;
}

.ng-fleet-input {
	display: grid;
	grid-template-columns: 36px minmax(72px, 1fr) 36px;
	gap: var(--space-6);
	margin-top: 6px;
	align-items: stretch;
	justify-content: center;
	justify-items: center;
	padding: 0 var(--space-8) var(--space-8);
}

.ng-fleet-input-field {
	width: 100%;
	font-size: var(--fs-12);
	padding: 6px 4px;
	text-align: center;
	min-width: 72px;
	max-width: 92px;
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(59, 130, 246, 0.20);
	border-radius: 12px;
	color: var(--ui-accent-cyan);
}

.ng-fleet-actions-row {
	margin-top: 6px;
	display: flex;
	justify-content: center;
}

.ng-fleet-item .ng-button-small {
	background: rgba(0, 0, 0, 0.50);
	border: 1px solid rgba(59, 130, 246, 0.12);
	border-radius: 12px;
	color: var(--ui-accent-cyan);
	cursor: pointer;
	font-size: var(--fs-12);
	letter-spacing: .5px;
	padding: 4px 8px;
}

.ng-button-ghost {
	border: 1px solid rgba(59, 130, 246, 0.12);
	border-radius: 12px;
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12);
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.ng-button-ghost:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.ng-button-ghost:hover {
	background: rgba(0, 0, 0, 0.90);
	border-color: rgba(59, 130, 246, 0.40);
}

.ng-fleet-minus, .ng-fleet-plus {
	min-width: 36px;
}

.ng-fleet-item .ng-button-small:hover {
	background: rgba(0, 0, 0, 0.90);
	border-color: rgba(59, 130, 246, 0.40);
}

.ng-mission-select {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-12);
	margin: 4px 0 10px;
	font-size: var(--fs-12);
}

.ng-mission-option {
	align-items: center;
	cursor: pointer;
	display: grid;
	grid-template-columns: 16px 1fr;
	gap: var(--space-8);
	padding: 8px 12px;
	position: relative;
	color: var(--ui-accent-cyan);
}

.ng-mission-option input {
	justify-self: center;
	accent-color: var(--color-accent);
	cursor: pointer;
}

.ng-mission-option:hover {
	background: rgba(0, 0, 0, 0.90);
	border-color: rgba(59, 130, 246, 0.40);
}

.ng-mission-option.ng-mission-blocked {
	opacity: 0.3;
	pointer-events: none;
	cursor: not-allowed;
}

.ng-alert-warning {
	background: rgba(220, 38, 38, 0.15);
	border: 1px solid rgba(220, 38, 38, 0.45);
	color: rgba(255, 180, 180, 0.95);
	padding: 8px 12px;
	border-radius: 12px;
	font-size: var(--fs-12);
	margin: 8px auto 0;
	box-shadow: inset 0 1px 0 rgba(255, 100, 100, 0.1);
	display: table;
	text-align: center;
}

#attack-options, #transport-options {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	margin-top: 6px;
}

.ng-attack-option, .ng-transport-option {
	align-items: center;
	display: flex;
	font-size: var(--fs-12);
	gap: var(--space-8);
	letter-spacing: .5px;
	padding: 8px 10px;
	color: var(--ui-accent-cyan);
}

.ng-plunder-order {
	padding: 4px 10px 8px;
}

.ng-plunder-order__label {
	font-size: var(--fs-12);
	letter-spacing: .5px;
	color: var(--clr-text-muted, #000000);
	text-transform: uppercase;
}

.ng-plunder-order__list {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.ng-plunder-order__item {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	padding: 4px 8px;
	font-size: var(--fs-12);
	letter-spacing: .5px;
	color: var(--clr-text, #000000);
	background: rgba(255, 255, 255, 0);
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 12px;
	cursor: grab;
	user-select: none;
	touch-action: none;
	transition: background .15s, border-color .15s;
}

.ng-plunder-order__item:active, .ng-plunder-order__item.is-dragging {
	background: rgba(59, 130, 246, 0.10);
	border-color: rgba(59, 130, 246, 0.30);
	cursor: grabbing;
}

.ng-plunder-order__name {
	flex: 1;
}

.ng-plunder-order__btn {
	font-size: var(--fs-12);
	color: var(--clr-text-muted, #000000);
	cursor: pointer;
	padding: 2px 4px;
	transition: color .15s;
}

.ng-plunder-order__btn:hover {
	color: var(--clr-accent, var(--color-accent));
}

.ng-transport-grid {
	display: grid;
	gap: var(--space-12);
	grid-template-columns: 1fr;
	margin-bottom: 8px;
}

.ng-fleet-summary {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-6);
	margin-bottom: var(--space-6);
}

.ng-fleet-summary-stat {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-4);
}

.ng-fleet-summary-label {
	letter-spacing: 1px;
	color: var(--ui-accent-cyan);
}

.ng-fleet-summary-value {
	
	color: var(--ui-accent-cyan);
}

.ng-fleet-selected-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	min-height: 120px;
	align-items: center;
}

.ng-fleet-selected-list.is-empty {
	color: var(--ui-accent-cyan);
	letter-spacing: .4px;
}

.ng-fleet-selected-item {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 8px 10px;
	border: 1px solid var(--ui-accent-cyan);
	background: rgba(255, 255, 255, 0.06);
	border-radius: 12px;
	text-align: center;
}

.ng-fleet-selected-label {
	color: var(--ui-accent-cyan);
	letter-spacing: .4px;
}

.ng-transport-item {
	align-items: center;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 12px;
	display: flex;
	gap: var(--space-8);
	padding: 8px 10px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.ng-transport-item label {
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12);
	letter-spacing: .5px;
	min-width: 72px;
}

.ng-transport-item .ng-transport-input {
	flex: 0 0 auto;
	width: 10ch;
	font-size: var(--fs-12);
	padding: 4px 6px;
	text-align: right;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 12px;
	color: var(--ui-accent-cyan);
}

.ng-transport-item .ng-button-small {
	font-size: var(--fs-12);
	padding: 4px 8px;
}

.ng-stats-grid {
	display: grid;
	gap: var(--space-12);
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

.ng-airport-col.col-mission .ng-stat-item label i {
	display: none;
}

.ng-stat-item:hover {
	border-color: transparent;
	}

.ng-stat-item label {
	align-items: center;
	color: var(--ui-accent-cyan);
	display: flex;
	font-size: var(--fs-12);
	gap: var(--space-6);
	letter-spacing: .5px;
}

.ng-stat-item .ng-icon-xl {
	font-size: var(--fs-12);
	color: var(--color-accent);
}

.ng-airport-mission-stack .ng-stat-item label {
	width: 100%;
	justify-content: center;
	text-align: center;
}

.ng-airport-mission-stack .ng-stat-label {
	display: block;
	text-align: center;
	width: 100%;
}

.ng-airport-mission-stack .ng-stat-item {
	align-items: center;
}

.ng-stat-input {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 12px;
	color: var(--ui-accent-cyan);
	font-family: var(--font-body);
	font-size: var(--fs-12);
	padding: 6px 8px;
	text-align: center;
}

.ng-coord-field {
	text-align: center;
	width: 70px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 12px;
	color: var(--ui-accent-cyan);
	font-family: var(--font-body);
	font-size: var(--fs-12);
	padding: 6px 4px;
}

.ng-coord-field:focus {
	border-color: rgba(255, 255, 255, 0.4);
	outline: none;
	background: rgba(255, 255, 255, 0.12);
}

.ng-coord-field::-webkit-outer-spin-button, .ng-coord-field::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.ng-coord-field[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.ng-coords-inline {
	align-items: center;
	background: transparent;
	border: none;
	border-radius: 12px;
	display: flex;
	font-variant-numeric: tabular-nums;
	gap: var(--space-4);
	justify-content: center;
	padding: 10px 14px;
}

.ng-coord-field, .ng-coords-inline .ng-coord-field {
	font-size: var(--fs-14);
	letter-spacing: 1px;
	padding: 8px 6px;
	text-align: center;
	width: 64px;
}

.ng-coords-inline .ng-coord-field-mid {
	width: 80px;
}

.ng-coord-sep {
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12);
	
	padding: 0 2px;
}

.ng-coord-or-label {
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12);
	
	text-align: center;
	margin: 8px 0 2px;
}

.ng-coord-select-row {
	display: flex;
	margin-top: 10px;
	gap: var(--space-12);
	width: max-content;
	margin-left: auto;
	margin-right: auto;
}

.ng-coord-select-row .ng-select-wide {
	min-width: 320px;
}

.ng-coord-avatar {
	width: 24px;
	height: 24px;
	max-width: 24px;
	max-height: 24px;
	display: inline-block;
	border-radius: 12px;
	border: 1px solid rgba(59, 130, 246, 0.30);
	object-fit: cover;
	vertical-align: middle;
	margin-right: 6px;
	flex-shrink: 0;
	background: rgba(0, 0, 0, 0.80);
}

.ng-disabled-user {
	opacity: 0.5;
	font-style: italic;
}

.ng-alliance-tag {
	color: var(--ui-accent-cyan);
	font-size: 0.9em;
	margin-left: 4px;
}

.ng-select-wide {
	flex: 1;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 12px;
	color: var(--ui-accent-cyan);
	font-family: var(--font-body);
	font-size: var(--fs-12);
	padding: 8px 10px;
}

.ng-select-wide:focus {
	border-color: var(--color-accent);
	outline: none;
	background: rgba(255, 255, 255, 0.90);
}

.ng-section {
	margin-bottom: 16px;
}

.ng-section:last-child {
	margin-bottom: 0;
}

.ng-sub-options {
	margin-top: 12px;
	padding: 12px;
}

.ng-fleet-item-disabled {
	opacity: 0.4;
	filter: grayscale(1) brightness(0.55);
	pointer-events: none;
}

.ng-fleet-item-disabled::before {
	opacity: 0.15 !important;
	animation: none !important;
}

.ng-fleet-item-disabled::after {
	background-image: linear-gradient(rgba(0,0,0,0.70), rgba(0,0,0,0.70)) !important;
	animation: none !important;
	opacity: 1 !important;
}

.ng-fleet-item-disabled .ng-fleet-input-field {
	background: rgba(0, 0, 0, 0.50);
	cursor: not-allowed;
}

.ng-fleet-item-disabled .ng-button-ghost, .ng-fleet-item-disabled .ng-button-small {
	opacity: 0.4;
	cursor: not-allowed;
}

.ng-btn-disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

.ng-launch-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-12);
}

.ng-launch-section #startbutton {
	align-self: center;
	margin-left: auto;
	margin-right: auto;
}

.ng-launch-summary {
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12);
	
	display: inline-block;
}

.ng-launch-table {
	border-collapse: collapse;
	text-align: left;
}

.ng-launch-table td {
	padding: 2px 6px;
	vertical-align: top;
}

.ng-launch-table td:first-child {
	color: var(--ui-accent-cyan);
	white-space: nowrap;
	padding-right: 10px;
}

.ng-launch-summary .ng-launch-target {
	color: var(--color-primary, #e0e0e8);
	
}

.ng-launch-summary .ng-launch-ally {
	color: var(--color-accent);
	font-size: var(--fs-12);
}

.ng-fleet-narrative {
	background: var(--ui-glass-fill);
	border: 1px solid rgba(59, 130, 246, 0.15);
	border-radius: 12px;
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12);
	
	padding: 12px 14px;
}

.ng-mission-attack {
	color: var(--ui-alert-orange, #ff5533);
	
}

.ng-mission-transport {
	color: var(--ui-accent-cyan);
}

.ng-mission-spy {
	color: var(--ui-accent-cyan);
}

.ng-mission-colonize {
	color: var(--color-accent);
}

.ng-mission-option:has(input:checked) label {
	color: var(--color-accent);
	
}

.ng-spa-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 300px;
	padding: 40px;
	gap: var(--space-16);
}

.ng-spa-loading-spinner {
	width: 32px;
	height: 32px;
	border: 2px solid rgba(255,255,255,0.15);
	border-top-color: var(--color-accent, #00e5ff);
	border-radius: 50%;
	animation: spin-loading 0.8s linear infinite;
}

.ng-spa-loading-text {
	font-size: var(--fs-12);
	color: var(--ui-accent-cyan);
	text-transform: uppercase;
	opacity: 0.7;
}

#ng-spa-content {
	position: relative;
	z-index: 5;
}

.ng-spa-error {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 300px;
	padding: 40px;
	gap: var(--space-16);
	text-align: center;
}

.ng-spa-error-icon {
	font-size: 48px;
	color: var(--ui-accent-cyan);
	opacity: 0.8;
}

.ng-spa-error-title {
	font-size: var(--fs-12);
	color: var(--ui-accent-cyan);
	text-transform: uppercase;
}

.ng-spa-error-text {
	font-size: var(--fs-12);
	color: var(--ui-accent-cyan);
	max-width: 400px;
}

.ng-spa-error .ng-button {
	margin-top: 16px;
}

#ng-sections-area {
	position: relative;
	z-index: 10;
}

.ui-frame--heavy #ng-sections-area .ng-sections-slider {
	margin-top: 0;
}

#ng-mission-control {
	display: block;
	position: relative;
	z-index: 1;
}

.ui-center-hero.is-loading {
	opacity: 0.5;
	pointer-events: none;
}

.ng-comm-tab-btn:hover {
	background: transparent;
	border-color: transparent;
	color: var(--ui-accent-cyan);
	transform: translateY(-1px);
}

.ng-comm-tab-btn.is-active {
	background: transparent;
	color: var(--ui-accent-cyan);
}

.ng-comm-tab-btn i {
	font-size: var(--fs-12);
}

.ng-comm-tab-btn span {
	display: inline;
}

.ng-comm-fullview-content {
	flex: 1;
	overflow-y: visible;
	overflow-x: hidden;
	padding: 16px;
	font-size: var(--fs-12);
	min-height: fit-content;
	height: auto;
}

.ng-comm-fullview-content::-webkit-scrollbar {
	width: 8px;
}

.ng-comm-fullview-content::-webkit-scrollbar-track {
	background: var(--ui-glass-fill);
}

.ng-comm-fullview-content::-webkit-scrollbar-thumb {
	background: rgba(59, 130, 246, 0.30);
	border-radius: 12px;
}

.ng-comm-fullview-content::-webkit-scrollbar-thumb:hover {
	background: rgba(59, 130, 246, 0.50);
}

.ng-comm-fullview-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-12);
}

.ng-comm-fullview-content th, .ng-comm-fullview-content td {
	padding: 10px 4px;
	text-align: center;
	border-bottom: 1px solid rgba(30, 58, 63, 0.4);
}

.ng-comm-fullview-content th {
	background: var(--ui-glass-fill);
	color: var(--ui-accent-cyan);
	
	text-transform: uppercase;
	font-size: var(--fs-12);
	
}

.ng-comm-fullview-content tr:hover {
	background: rgba(59, 130, 246, 0.04);
}

.ng-comm-fullview-content a {

	text-decoration: none;
}

.ng-comm-fullview-content a:hover {
	color: var(--ui-accent-cyan);
	text-decoration: underline;
}

.ng-alliance-members {
	width: 100%;
}

.ng-member-avatar-cell {
	width: 50px;
	padding: 6px 8px;
	vertical-align: middle;
}

.ng-member-avatar {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	border: 2px solid #444;
	background: #222;
}

.ng-player-profile {
	background: var(--header-bg);
	border-radius: 12px;
	padding: 24px;
	color: var(--ui-accent-cyan);
	max-width: 500px;
	margin: 0 auto;
}

.ng-player-profile__info h2 {
	margin: 0 0 8px 0;
	font-family: 'GeneraleStation', var(--font-body);
	font-size: var(--fs-h2);
	color: var(--ui-accent-cyan);
}

.ng-player-profile__info p {
	margin: 0;
	font-size: var(--fs-12);
	color: var(--ui-accent-cyan);
}

.ng-widget-title--with-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-12);
}

.ng-widget-title__nav {
	display: inline-flex;
	align-items: center;
	gap: var(--space-28);
	flex-wrap: wrap;
	justify-content: flex-end;
}

.ng-widget-title__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-6);
	color: var(--color-dim, #ffffff);
	font-size: var(--fs-12);
	text-decoration: none;
	font-family: 'GeneraleStation', var(--font-body);
}

.ng-widget-title__link:hover {
	color: var(--ui-accent-cyan);
}

.ng-widget-title__link.is-active {
	color: var(--ui-accent-cyan);
	pointer-events: none;
	cursor: default;
}

.ng-message-tab {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	padding: var(--space-8) var(--space-16);
	min-height: 32px;
	background: rgba(255, 255, 255, 0);
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 12px;

	font-family: var(--font-body);
	font-size: var(--fs-12);
	
	text-transform: uppercase;
	
	text-decoration: none;
	transition: all 0.2s ease;
	cursor: pointer;
	white-space: nowrap;
	position: relative;
}

.ng-message-tab::before, .ng-message-tab::after {
	content: '';
	position: absolute;
	inset: 2px;
	pointer-events: none;
}

.ng-message-tab::before {
	border: 1px solid var(--ui-accent-cyan);
	}

.ng-message-tab::after {
	inset: 0;
	background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.10), transparent 60%),linear-gradient(225deg, rgba(255, 255, 255, 0.06), transparent 60%),linear-gradient(45deg, rgba(255, 255, 255, 0.08), transparent 60%),linear-gradient(315deg, rgba(255, 255, 255, 0.04), transparent 60%);
	background-size: 10px 10px;
	background-repeat: no-repeat;
	background-position: top left, top right, bottom left, bottom right;
}

.ng-message-tab:hover {
	background: rgba(255, 255, 255, 0);
	border-color: rgba(255, 255, 255, 0.12);
	color: var(--ui-accent-cyan);
}

.ng-message-tab.active {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.15);
	color: var(--color-primary);
	text-shadow: 0 0 8px rgba(255, 255, 255, 0.20);
}

.ng-tab-label {
	
	text-transform: uppercase;
	
	position: relative;
	z-index: 1;
}

.ng-message-tab > * {
	position: relative;
	z-index: 1;
}

.ng-message-section {
	background: var(--ui-glass-fill);
	border: 1px solid rgba(59, 130, 246, 0.12);
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 16px;
}

.ng-section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-12);
	margin-bottom: 16px;
	padding-bottom: 12px;
}

.ng-section-title i {
	font-size: var(--fs-12);
	opacity: 0.8;
}

.ng-section-controls {
	display: flex;
	gap: var(--space-12);
	flex-wrap: wrap;
}

.ng-filter-select {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 12px;
	color: var(--ui-accent-cyan);
	font-family: var(--font-body);
	font-size: var(--fs-12);
	padding: 6px 10px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.ng-filter-select:hover, .ng-filter-select:focus {
	border-color: var(--color-accent);
	outline: none;
	background: rgba(255, 255, 255, 0.90);
}

.ng-filter-select option {
	background: rgba(255, 255, 255, 0.90);
	color: var(--ui-accent-cyan);
}

.ng-message-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.ng-message-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-12);
	padding: 12px;
	border: 1px solid rgba(59, 130, 246, 0.10);
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.2s ease;
	position: relative;
}

.ng-message-actions {
	display: flex;
	flex-direction: row;
	gap: var(--space-12);
	flex-shrink: 0;
	margin-top: 16px;
	padding-top: 12px;
}

.ng-msg-action-btn {
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(30, 40, 55, 0.6);
	border: 1px solid rgba(59, 130, 246, 0.20);
	border-radius: 12px;
	color: var(--ui-accent-cyan);
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: var(--fs-12);
}

.ng-msg-action-btn:hover {
	background: rgba(59, 130, 246, 0.15);
	border-color: rgba(59, 130, 246, 0.40);
	color: var(--ui-accent-cyan);
}

.ng-msg-action-btn.ng-msg-mark-read:hover {
	background: rgba(100, 200, 100, 0.15);
	border-color: rgba(100, 200, 100, 0.4);
	color: var(--ui-accent-cyan);
}

.ng-msg-action-btn.ng-msg-reply:hover {
	background: rgba(59, 130, 246, 0.15);
	border-color: rgba(59, 130, 246, 0.40);
	color: var(--color-accent);
}

.ng-msg-action-btn.ng-msg-delete:hover {
	background: rgba(255, 100, 100, 0.15);
	border-color: rgba(255, 100, 100, 0.4);
	color: var(--ui-accent-cyan);
}

.ng-quick-reply-form {
	background: rgba(0, 0, 0, 0.90);
	border: 1px solid rgba(59, 130, 246, 0.30);
	border-radius: 12px;
	padding: 16px;
	margin-top: 16px;
	}

.ng-quick-reply-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(59, 130, 246, 0.20);
}

.ng-quick-reply-title {
	font-family: var(--font-body);
	font-size: var(--fs-12);
	color: var(--ui-accent-cyan);
}

.ng-quick-reply-title strong {
	color: var(--ui-accent-cyan);
}

.ng-quick-reply-close {
	background: none;
	border: none;
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12);
	cursor: pointer;
	padding: 0 4px;
}

.ng-quick-reply-close:hover {
	color: var(--ui-accent-cyan);
}

.ng-quick-reply-form .ng-form-row {
	margin-bottom: 12px;
}

.ng-quick-reply-form .ng-form-row label {
	display: block;
	font-family: var(--font-body);
	font-size: var(--fs-12);
	color: var(--ui-accent-cyan);
	margin-bottom: 4px;
	text-transform: uppercase;
}

.ng-quick-reply-form .ng-input, .ng-quick-reply-form .ng-textarea {
	width: 100%;
	padding: 8px 10px;
}

.ng-quick-reply-form .ng-input:focus, .ng-quick-reply-form .ng-textarea:focus {
	outline: none;
	border-color: rgba(59, 130, 246, 0.50);
	}

.ng-quick-reply-form .ng-textarea {
	resize: vertical;
	min-height: 80px;
}

.ng-quick-reply-form .ng-form-actions {
	display: flex;
	gap: var(--space-12);
	justify-content: flex-end;
}

.ng-message-avatar {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	border: 2px solid rgba(59, 130, 246, 0.30);
	object-fit: cover;
	flex-shrink: 0;
	background: rgba(0, 0, 0, 0.80);
}

.ng-message-item:hover .ng-message-avatar {
	border-color: rgba(59, 130, 246, 0.60);
}

.ng-message-item:hover {
	background: rgba(59, 130, 246, 0.08);
	border-color: rgba(59, 130, 246, 0.25);
	transform: translateX(4px);
}

.ng-message-item.unread {
	background: rgba(59, 130, 246, 0.10);
	border-left: 3px solid var(--color-accent);
}

.ng-message-item.unread:hover {
	background: rgba(59, 130, 246, 0.15);
}

.ng-message-checkbox {
	flex-shrink: 0;
	padding-top: 2px;
}

.ng-message-checkbox input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--color-accent);
	cursor: pointer;
}

.ng-message-content {
	flex: 1;
	min-width: 0;
}

.ng-message-header {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	flex-wrap: wrap;
	margin-bottom: 6px;
}

.ng-message-time {
	font-family: var(--font-body);
	font-size: var(--fs-12);
	color: var(--ui-accent-cyan);
}

.ng-message-type {
	font-family: var(--font-body);
	font-size: var(--fs-12);
	
	padding: 2px 6px;
	border-radius: 12px;
	text-transform: uppercase;
}

.ng-message-type.ng-type-attack {
	background: rgba(255, 100, 100, 0.2);
	color: var(--ui-accent-cyan);
	border: 1px solid rgba(255, 100, 100, 0.3);
}

.ng-message-type.ng-type-defense {
	background: rgba(100, 200, 255, 0.2);
	color: var(--ui-accent-cyan);
	border: 1px solid rgba(100, 200, 255, 0.3);
}

.ng-message-type.ng-type-transport {
	background: rgba(100, 255, 150, 0.2);
	color: var(--ui-accent-cyan);
	border: 1px solid rgba(100, 255, 150, 0.3);
}

.ng-message-type.ng-type-scan {
	background: rgba(200, 150, 255, 0.2);
	color: var(--ui-accent-cyan);
	border: 1px solid rgba(200, 150, 255, 0.3);
}

.ng-message-city {
	font-family: var(--font-body);
	font-size: var(--fs-12);
	color: var(--ui-accent-cyan);
}

.ng-message-subject {
	font-family: var(--font-body);
	font-size: var(--fs-12);
	color: var(--ui-accent-cyan);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ng-message-item.unread .ng-message-subject {
	color: var(--ui-accent-cyan);
	
}

.ng-message-details {
	display: flex;
	gap: var(--space-16);
	margin-top: 6px;
	flex-wrap: wrap;
}

.ng-detail {
	font-family: var(--font-body);
	font-size: var(--fs-12);
	color: var(--ui-accent-cyan);
}

.ng-meta-sender-row {
	display: flex;
	align-items: flex-start;
	gap: var(--space-12);
	margin-bottom: 12px;
}

.ng-sender-avatar {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	border: 2px solid rgba(59, 130, 246, 0.40);
	object-fit: cover;
	flex-shrink: 0;
	background: rgba(0, 0, 0, 0.80);
	}

.ng-meta-sender-info {
	flex: 1;
	min-width: 0;
}

.ng-meta-sender-info .ng-meta-row {
	font-family: var(--font-body);
	font-size: var(--fs-12);
	color: var(--ui-accent-cyan);
	margin-bottom: 4px;
}

.ng-meta-sender-info .ng-meta-row:last-child {
	margin-bottom: 0;
}

.ng-meta-sender-info .ng-meta-row strong {
	color: var(--ui-accent-cyan);
}

.ng-meta-label {
	color: var(--ui-accent-cyan);
}

.ng-meta-value {
	color: var(--ui-accent-cyan);
}

.ng-inline-muted {
	color: var(--ui-accent-cyan);
	font-size: 0.9em;
}

.ng-private-message {
	background: var(--ui-glass-fill);
	border: 1px solid rgba(59, 130, 246, 0.15);
	border-radius: 12px;
	padding: 16px;
}

.ng-message-meta {
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

.ng-content-header {
	font-family: var(--font-body);
	font-size: var(--fs-12);
	color: var(--ui-accent-cyan);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 8px;
}

.ng-content-body {
	font-family: var(--font-body);
	font-size: var(--fs-12);
	color: var(--ui-accent-cyan);
	white-space: pre-wrap;
	word-break: break-word;
}

.ng-action-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-6);
	padding: 10px 20px;
	background: rgba(255, 255, 255, 0);
	border: 1px solid var(--ui-accent-cyan, rgba(255, 255, 255, 0.20));
	border-radius: 12px;
	color: var(--color-primary, #e0e0e8);
	font-family: var(--font-body);
	font-size: var(--fs-12);
	cursor: pointer;
	transition: all 0.2s ease;
	
	text-transform: uppercase;
}

.ng-action-button:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: var(--color-accent);
	color: var(--color-accent);
	}

.ng-action-button.ng-danger {
	border-color: rgba(220, 38, 38, 0.60);
	color: var(--ui-alert-orange, #ff5533);
}

.ng-action-button.ng-danger:hover {
	background: rgba(220, 38, 38, 0.20);
	border-color: var(--ui-accent-cyan);
	}

.ng-action-button.ng-primary {
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(79, 195, 247, 0.15));
	border-color: var(--color-accent);
	color: var(--color-accent);
	border: 1px solid rgba(59, 130, 246, 0.50);
	padding: 12px 24px;
	font-size: var(--fs-12);
	
	display: flex;
	align-items: center;
	gap: var(--space-8);
}

.ng-action-button.ng-primary:hover {
	background: rgba(59, 130, 246, 0.35);
	}

.ng-no-data-icon {
	font-size: 48px;
	opacity: 0.4;
	margin-bottom: 16px;
}

.ng-no-data-text {
	font-family: var(--font-body);
	font-size: var(--fs-12);
	text-transform: uppercase;
	letter-spacing: 1px;
}

.ng-reply-form {
	background: rgba(0, 0, 0, 0.90);
	border: 1px solid rgba(59, 130, 246, 0.20);
	border-radius: 12px;
	padding: 20px;
}

.ng-form-header {
	font-family: var(--font-body);
	font-size: var(--fs-12);
	
	color: var(--ui-accent-cyan);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

.ng-form-row {
	margin-bottom: 14px;
}

.ng-form-label {
	display: flex;
	font-family: var(--font-body);
	font-size: var(--fs-12);
	
	color: var(--ui-accent-cyan);
	text-transform: uppercase;
	
	margin-bottom: 8px;
	align-items: center;
	gap: var(--space-6);
}

.ng-form-input, .ng-form-textarea {
	width: 100%;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 12px;
	color: var(--ui-accent-cyan);
	font-family: var(--font-body);
	font-size: var(--fs-12);
	padding: 10px 12px;
	box-sizing: border-box;
	transition: all 0.2s ease;
}

.ng-form-input:focus, .ng-form-textarea:focus {
	outline: none;
	border-color: var(--color-accent);
	background: rgba(255, 255, 255, 0.90);
}

.ng-form-textarea {
	min-height: 120px;
	resize: vertical;
}

.ng-form-actions {
	display: flex;
	gap: var(--space-12);
	justify-content: flex-end;
	align-items: center;
	margin-top: 16px;
}

/* Inline-Status-Hinweis fuer Allianz-Speichern (AJAX) */
.ng-alliance-save-flash {
	display: inline-block;
	min-height: 1em;
	font-size: var(--fs-12);
	letter-spacing: 0.04em;
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
	color: var(--ui-accent-cyan);
}

.ng-alliance-save-flash.is-visible {
	opacity: 1;
}

.ng-alliance-save-flash.is-error {
	color: #ff6b6b;
}

.ng-compose-form {
	background: rgba(0, 0, 0, 0.80);
	border: 1px solid rgba(59, 130, 246, 0.15);
	border-radius: 12px;
	padding: 20px;
}

.ng-form-group {
	margin-bottom: 16px;
}

.ng-form-label i {
	font-size: var(--fs-12);
	opacity: 0.7;
}

.ng-recipient-search {
	position: relative;
}

.ng-recipient-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 1);
	border: 1px solid rgba(59, 130, 246, 0.30);
	border-top: none;
	border-radius: 12px;
	max-height: 320px;
	overflow-y: auto;
	z-index: 100000;
	display: none;
	}

.ng-recipient-dropdown::-webkit-scrollbar {
	width: 6px;
}

.ng-recipient-dropdown::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.50);
}

.ng-recipient-dropdown::-webkit-scrollbar-thumb {
	background: rgba(59, 130, 246, 0.30);
	border-radius: 12px;
}

.ng-player-option {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	padding: 12px 14px;
	cursor: pointer;
	transition: all 0.15s ease;
	border-bottom: 1px solid rgba(59, 130, 246, 0.08);
}

.ng-player-option:last-child {
	border-bottom: none;
}

.ng-player-option:hover {
	background: rgba(59, 130, 246, 0.15);
}

.ng-player-option.ng-no-results {
	color: var(--ui-accent-cyan);
	font-style: italic;
	cursor: default;
	justify-content: center;
}

.ng-player-option.ng-no-results:hover {
	background: transparent;
}

.ng-player-avatar {
	width: 60px;
	height: 60px;
	border-radius: 12px;
	border: 2px solid var(--ui-accent-cyan, rgba(255, 255, 255, 0.20));
	object-fit: cover;
	flex-shrink: 0;
	background: rgba(0, 0, 0, 0.80);
}

.ng-player-option:hover .ng-player-avatar {
	border-color: var(--color-accent);
}

.ng-player-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.ng-player-name {
	font-family: var(--font-body);
	font-size: var(--fs-12);
	
	color: var(--ui-accent-cyan, #e0e0e8);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 4px;
}

.ng-player-option:hover .ng-player-name {
	color: var(--color-accent);
}

.ng-player-alliance {
	font-family: var(--font-body);
	font-size: var(--fs-12);
	text-transform: uppercase;
	
}

.ng-player-points {
	font-family: var(--font-body);
	font-size: var(--fs-12);
	color: var(--ui-accent-cyan);
	white-space: nowrap;
	background: rgba(59, 130, 246, 0.10);
	padding: 4px 8px;
	border-radius: 12px;
	border: 1px solid rgba(59, 130, 246, 0.20);
}

.ng-selected-recipient {
	margin-top: 8px;
}

.ng-selected-player {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	padding: 10px 14px;
	background: rgba(59, 130, 246, 0.10);
	border: 1px solid rgba(59, 130, 246, 0.30);
	border-radius: 12px;
}

.ng-selected-player .ng-player-avatar {
	width: 40px;
	height: 40px;
	border-color: var(--color-accent);
}

.ng-selected-player .ng-player-name {
	font-size: var(--fs-12);
	color: var(--color-accent);
}

.ng-remove-recipient {
	background: rgba(220, 38, 38, 0.20);
	border: 1px solid rgba(220, 38, 38, 0.40);
	border-radius: 12px;
	color: var(--ui-accent-cyan);
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	margin-left: auto;
}

.ng-remove-recipient:hover {
	background: rgba(220, 38, 38, 0.35);
	border-color: var(--ui-accent-cyan);
}

.ng-remove-recipient i {
	font-size: var(--fs-12);
}

.ng-compose-status {
	margin-top: 16px;
	padding: 12px 16px;
	border-radius: 12px;
	font-family: var(--font-body);
	font-size: var(--fs-12);
	text-align: center;
}

.ng-status-info {
	background: rgba(59, 130, 246, 0.15);
	border: 1px solid rgba(59, 130, 246, 0.30);
	color: var(--color-accent);
}

.ng-status-success {
	background: rgba(76, 175, 80, 0.15);
	color: var(--ui-accent-cyan);
}

.ng-status-error {
	background: rgba(220, 38, 38, 0.15);
	color: var(--ui-accent-cyan);
}

/* .ng-start-status-flash entfernt – ersetzt durch NG_UI.showToast */

.ng-action-button.ng-primary:hover:not(:disabled) {
	background: linear-gradient(135deg, rgba(59, 130, 246, 0.35), rgba(79, 195, 247, 0.25));
	transform: translateY(-1px);
}

.ng-action-button.ng-primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.ng-grid-system {
	grid-area: system;
}

.ng-combat-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	max-height: 320px;
	overflow-y: auto;
}

.ng-combat-list-time {
	flex: 0 0 auto;
	white-space: nowrap;
	font-family: var(--font-body);
}

.ng-combat-list-body {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-align: center;
}

.ng-combat-list::-webkit-scrollbar {
	width: 4px;
}

.ng-combat-list::-webkit-scrollbar-track {
	background: transparent;
}

.ng-combat-list::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.06);
	border-radius: 12px;
}

.ng-combat-reports-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.ng-combat-report-item {
	padding: 6px 8px;
	background: rgba(220, 38, 38, 0.10);
	border: 1px solid rgba(220, 38, 38, 0.30);
	border-radius: 12px;
	animation: ngCombatReportPulse 2s ease-in-out infinite;
}

.ng-combat-report-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	background: var(--ui-alert-orange);
	color: var(--ui-accent-cyan);
	border-radius: 12px;
	font-size: var(--fs-12);
	
	flex-shrink: 0;
}

@keyframes ngCombatReportPulse{
	0%, 100% {
		background: rgba(220, 38, 38, 0.10);
		border-color: rgba(220, 38, 38, 0.30);
	}
	50% {
		background: rgba(220, 38, 38, 0.15);
		border-color: rgba(220, 38, 38, 0.50);
	}
}

.ng-combat-modal-backdrop.is-open {
	opacity: 1;
}

.ng-combat-modal-backdrop.is-open .ng-combat-modal-card {
	transform: scale(1);
}

.ng-combat-modal-header {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 10px;
	text-align: center;
}

.ng-combat-modal-title {
	margin: 0;
	font-family: 'GeneraleStation', var(--font-body);
	font-size: var(--fs-12);
	color: var(--color-primary, #e0e0e8);
	text-transform: uppercase;
}

h2.ng-combat-modal-title {
	font-size: var(--fs-h2);
	font-weight: 400;
}

.ng-combat-modal-close {
	background: none;
	border: none;
	font-size: var(--fs-12);
	cursor: pointer;
	padding: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.2s ease, transform 0.2s ease;
	position: absolute;
	right: 20px;
}

.ng-combat-modal-close:hover {
	color: var(--color-primary, #e0e0e8);
	transform: scale(1.1);
}

.ng-combat-modal-body {
	padding: 6px;
	overflow-y: auto;
	flex: 1;
}

.ng-combat-modal-body::-webkit-scrollbar {
	width: 8px;
}

.ng-combat-modal-body::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.30);
	border-radius: 12px;
}

.ng-combat-modal-body::-webkit-scrollbar-thumb {
	background: var(--color-primary, #e0e0e8);
	border-radius: 12px;
	opacity: 0.5;
}

.ng-combat-modal-body::-webkit-scrollbar-thumb:hover {
	background: var(--ui-accent-cyan, rgba(59, 130, 246, 0.60));
}

.ng-combat-report {
	color: var(--ui-accent-cyan, #e0e0e8);
	font-family: var(--font-body);
}

.ng-report-top {
	margin-bottom: 24px;
}

.ng-report-meta {
	display: flex;
	gap: var(--space-16);
	justify-content: center;
	padding: 6px;
	border-radius: 12px;
	margin-bottom: 0;
}

.ng-report-meta > div {
	display: flex;
	gap: var(--space-8);
	align-items: center;
}

.ng-header-label {
	font-size: var(--fs-12);
	text-transform: uppercase;
}

.ng-header-value {
	font-size: var(--fs-12);
	
	color: var(--ui-accent-cyan, #e0e0e8);
}

.ng-mission-scan {
	color: var(--color-accent, #ffb347);
	
}

.ng-report-flags {
	display: flex;
	gap: var(--space-8);
	flex-wrap: wrap;
}

.ng-flag {
	padding: 4px 12px;
	border-radius: 12px;
	font-size: var(--fs-12);
	text-transform: uppercase;
}

.ng-flag-protect {
	background: rgba(217, 119, 6, 0.15);
	color: var(--color-accent, #ffb347);
	border: 1px solid rgba(217, 119, 6, 0.30);
}

.ng-flag-shield {
	background: rgba(255, 255, 255, 0.1);
	color: var(--color-primary, #e0e0e8);
	border: 1px solid var(--ui-accent-cyan, rgba(255, 255, 255, 0.08));
}

.ng-flag-colonize {
	background: rgba(220, 38, 38, 0.15);
	color: var(--ui-alert-orange, #ff5533);
	border: 1px solid rgba(220, 38, 38, 0.30);
}

.ng-report-error {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	padding: 16px;
	background: rgba(220, 38, 38, 0.10);
	border: 1px solid rgba(220, 38, 38, 0.30);
	border-radius: 12px;
	margin-bottom: 24px;
}

.ng-error-icon {
	font-size: var(--fs-12);
	color: var(--ui-alert-orange, #ff5533);
}

.ng-error-text {
	flex: 1;
	color: var(--ui-alert-orange, #ff5533);
	
}

.ng-combat-2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-16);
	margin-bottom: 24px;
}

.ng-col {
	background: rgba(0, 0, 0, 0.30);
	border: 1px solid var(--ui-accent-cyan, rgba(255, 255, 255, 0.08));
	border-radius: 12px;
	padding: 16px;
}

.ng-col-role {
	font-size: var(--fs-12);
	
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--ui-accent-cyan);
	margin-bottom: 12px;
	font-family: var(--font-body);
}

.ng-loss-red {
	color: var(--ui-accent-cyan);
}

.ng-loss-none {
	color: var(--ui-accent-cyan);
}

.ng-col-left {
	border-left: 3px solid var(--ui-alert-orange, #ff5533);
}

.ng-col-right {
	border-left: 3px solid var(--color-primary, #e0e0e8);
}

.ng-col-header {
	display: flex;
	gap: var(--space-12);
	align-items: center;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--ui-accent-cyan, rgba(255, 255, 255, 0.08));
}

.ng-player-meta {
	flex: 1;
}

.ng-player-city {
	font-size: var(--fs-12);
	margin-bottom: 6px;
}

.ng-chip-alliance {
	display: inline-block;
	padding: 2px 8px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid var(--ui-accent-cyan, rgba(255, 255, 255, 0.08));
	border-radius: 12px;
	color: var(--color-primary, #e0e0e8);
	
}

.ng-losses-col {
	margin-top: 12px;
}

.ng-losses-title {
	font-size: var(--fs-12);
	text-transform: uppercase;
	color: var(--ui-accent-cyan);
	margin-bottom: 12px;
}

.ng-losses-empty {
	padding: 12px;
	text-align: center;
	font-style: italic;
	font-size: var(--fs-12);
}

.ng-losses-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.ng-losses-item {
	display: grid;
	grid-template-columns: 40px 1fr auto;
	gap: var(--space-8);
	align-items: center;
	padding: 3px;
	background: rgba(0, 0, 0, 0.50);
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 8px;
	transition: all 0.2s ease;
}

.ng-losses-item:hover {
	background: rgba(0, 0, 0, 0.50);
	border-color: var(--ui-accent-cyan, rgba(255, 255, 255, 0.08));
}

.ng-losses-icon-wrap {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.50);
	border-radius: 12px;
	border: 1px solid var(--ui-accent-cyan, rgba(255, 255, 255, 0.08));
}

.ng-losses-icon {
	max-width: 32px;
	max-height: 32px;
	object-fit: contain;
}

.ng-losses-name {
	font-size: var(--fs-12);
	
	color: var(--ui-accent-cyan, #e0e0e8);
}

.ng-losses-values {
	font-size: var(--fs-12);
	font-family: var(--font-body);
}

.ng-losses-values strong {
	color: var(--ui-alert-orange, #ff5533);
	
}

.ng-report-resources {
	padding: 16px;
	background: rgba(0, 0, 0, 0.30);
	border: 1px solid var(--ui-accent-cyan, rgba(255, 255, 255, 0.08));
	border-radius: 12px;
	margin-bottom: 24px;
}

.ng-resources-title {
	font-size: var(--fs-12);
	text-transform: uppercase;
	color: var(--color-primary, #e0e0e8);
	margin-bottom: 12px;
}

.ng-resources-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-12);
}

.ng-resource-item {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: 12px;
	background: rgba(0, 0, 0, 0.50);
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 12px;
}

.ng-resource-name {
	font-size: var(--fs-12);
	text-transform: uppercase;
}

.ng-resource-value {
	font-size: var(--fs-12);
	
	color: var(--color-primary, #e0e0e8);
	font-family: var(--font-body);
}

.ng-report-actions {
	display: flex;
	gap: var(--space-12);
	justify-content: flex-end;
}

/* KW badges & winner/loser styles */
.ng-col-kw {
	font-size: var(--fs-12);
	
	letter-spacing: 0;
	text-transform: none;
}

.ng-col-kw i {
	font-size: 0.85em;
	vertical-align: baseline;
	color: var(--color-accent, #ffb347);
}

.ng-badge--winner {
	background: rgba(34, 197, 94, 0.15);
	color: var(--ui-accent-cyan);
	border: 1px solid rgba(34, 197, 94, 0.35);
}

.ng-badge--loser {
	background: rgba(220, 38, 38, 0.15);
	color: var(--ui-accent-cyan);
	border: 1px solid rgba(220, 38, 38, 0.35);
}

.ng-col--winner {
	border-left-color: var(--ui-accent-cyan);
	}

.ng-col--loser {
	border-left-color: var(--ui-accent-cyan);
	}

.ng-losses-kw {
	font-size: var(--fs-12);
	
	white-space: nowrap;
}

.ng-losses-kw i {
	font-size: 0.85em;
	color: var(--color-accent, #ffb347);
}

/* Battle analysis section */
.ng-battle-analysis {
	padding: 16px;
	background: rgba(0, 0, 0, 0.30);
	border: 1px solid var(--ui-accent-cyan, rgba(255, 255, 255, 0.08));
	border-radius: 12px;
	margin-bottom: 24px;
}

.ng-analysis-title {
	font-size: var(--fs-12);
	text-transform: uppercase;
	color: var(--color-primary, #e0e0e8);
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: var(--space-8);
}

.ng-analysis-title i {
	color: var(--color-accent, #ffb347);
}

.ng-analysis-labels {
	display: flex;
	justify-content: space-between;
	margin-bottom: 6px;
	font-size: var(--fs-12);
	text-transform: uppercase;
}

.ng-analysis-att-label {
	color: var(--ui-accent-cyan);
}

.ng-analysis-def-label {
	color: var(--color-primary, #e0e0e8);
}

.ng-analysis-bar {
	display: flex;
	height: 10px;
	border-radius: 5px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.40);
	margin-bottom: 16px;
}

.ng-analysis-bar-att {
	background: linear-gradient(90deg, #ff5533, #ff7755);
	height: 100%;
	transition: width 0.6s ease;
}

.ng-analysis-bar-def {
	background: linear-gradient(90deg, #6688cc, #88aaee);
	height: 100%;
	transition: width 0.6s ease;
}

.ng-analysis-prob {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	margin-bottom: 12px;
	font-size: var(--fs-12);
}

.ng-analysis-prob-value {
	
	font-family: var(--font-body);
	font-size: var(--fs-12);
}

.ng-prob-high {
	color: var(--ui-accent-cyan);
}

.ng-prob-low {
	color: var(--ui-accent-cyan);
}

.ng-analysis-summary {
	font-size: var(--fs-12);
	padding: 12px;
	background: rgba(0, 0, 0, 0.30);
	border-radius: 8px;
	border: 1px solid var(--ui-accent-cyan);
}

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

.ng-log-time {
	color: rgba(255, 255, 255, 0.72);
	font-size: var(--fs-12);
	min-width: 70px;
	flex-shrink: 0;
}

.ng-log-message {
	color: var(--ui-accent-cyan);
	flex: 1;
	padding-top: 0px;
}

@media (max-width: 600px) {
	.ng-city-admin-title {
		flex-direction: column;
		align-items: center;
	}
	.ng-city-admin-switch {
		width: 100%;
		justify-content: center;
	}
	.ng-city-admin-switch-label {
		min-width: 0;
		flex: 1;
		text-align: center;
	}
	.ng-city-image-actions {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 900px) {
	.ui-shell {
		grid-template-areas: 'header''center''dock''ticker';
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}
	.dock {
		width: 100%;
	}
	body.ui-reboot .hud-header {
		flex-wrap: nowrap;
	}
	
}

@media (min-width: 980px) {
	.ng-page-coordinates .ng-coord-shell {
		grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
		align-items: start;
	}
}

@media (max-width: 600px) {
	.landing-alt-actions {
		grid-template-columns: 1fr;
	}
	
	
}

@media (min-width: 900px) {
	.ng-comm-fullview-content .ng-preference-sections, #ng-spa-content .ng-preference-sections {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 860px) {
	.ng-comm-fullview-content .ng-trade-shell .ng-trade-form {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "buy sell""fleet sell""actions actions";
	}
}

@media (max-width: 720px) {
	.ng-comm-fullview-content .ng-trade-shell .ng-trade-action-row {
		flex-direction: column;
		align-items: flex-start;
	}
	.ng-comm-fullview-content .ng-trade-shell .ng-trade-action-buttons {
		width: 100%;
	}
	.ng-comm-fullview-content .ng-trade-shell .ng-trade-action-buttons .ng-button {
		flex: 1 1 0;
	}
	.ng-comm-fullview-content .ng-trade-shell .ng-trade-cost-row {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "label value""meta button";
		row-gap: var(--space-8);
	}
	.ng-comm-fullview-content .ng-trade-shell .ng-trade-cost-label {
		grid-area: label;
	}
	.ng-comm-fullview-content .ng-trade-shell .ng-trade-cost-value {
		grid-area: value;
		text-align: right;
	}
	.ng-comm-fullview-content .ng-trade-shell .ng-trade-cost-meta {
		grid-area: meta;
		text-align: left;
	}
	.ng-comm-fullview-content .ng-trade-shell .ng-trade-cost-row .ng-button {
		grid-area: button;
		justify-self: end;
	}
	.ng-comm-fullview-content .ng-trade-shell .ng-price-header {
		display: none;
	}
	.ng-comm-fullview-content .ng-trade-shell .ng-price-row {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "name name""stock buy""sell trend";
		row-gap: var(--space-8);
		padding: var(--space-12) 0;
	}
	.ng-comm-fullview-content .ng-trade-shell .ng-price-row .ng-price-col {
		display: grid;
		gap: var(--space-4);
		font-size: var(--fs-12);
	}
	.ng-comm-fullview-content .ng-trade-shell .ng-price-row .ng-price-col::before {
		content: '';
		font-size: var(--fs-12);
		text-transform: uppercase;
		

	}
	.ng-comm-fullview-content .ng-trade-shell .ng-price-row .ng-price-col:nth-child(1) {
		grid-area: name;
		font-size: var(--fs-12);
	}
	.ng-comm-fullview-content .ng-trade-shell .ng-price-row .ng-price-col:nth-child(1)::before {
		content: 'Ressource';
	}
	.ng-comm-fullview-content .ng-trade-shell .ng-price-row .ng-price-col:nth-child(2) {
		grid-area: stock;
	}
	.ng-comm-fullview-content .ng-trade-shell .ng-price-row .ng-price-col:nth-child(2)::before {
		content: 'Bestand';
	}
	.ng-comm-fullview-content .ng-trade-shell .ng-price-row .ng-price-col:nth-child(3) {
		grid-area: buy;
	}
	.ng-comm-fullview-content .ng-trade-shell .ng-price-row .ng-price-col:nth-child(3)::before {
		content: 'Kaufpreis';
	}
	.ng-comm-fullview-content .ng-trade-shell .ng-price-row .ng-price-col:nth-child(4) {
		grid-area: sell;
	}
	.ng-comm-fullview-content .ng-trade-shell .ng-price-row .ng-price-col:nth-child(4)::before {
		content: 'Verkaufspreis';
	}
	.ng-comm-fullview-content .ng-trade-shell .ng-price-row .ng-price-col:nth-child(5) {
		grid-area: trend;
	}
	.ng-comm-fullview-content .ng-trade-shell .ng-price-row .ng-price-col:nth-child(5)::before {
		content: 'Trend';
	}
}

@media (max-width: 1400px) {
	.ui-hud-comm-tabs .ng-comm-tab-btn span {
		display: none;
	}
	.ui-hud-comm-tabs .ng-comm-tab-btn {
		min-width: 44px;
		padding: 0 10px;
	}
	.ui-hud-comm-tabs .ng-city-switcher-btn {
		min-width: 44px;
		padding: 0 10px;
	}
}

@media (min-width: 1920px) {
	
	
	
	.ui-hud-micro-item {
		padding: 6px 10px;
		gap: var(--space-6);
	}
	.ui-hud-micro-item .k {
		font-size: var(--fs-12);
	}
	.ui-hud-micro-item .v {
		font-size: var(--fs-12);
	}
	.ui-hud-micro-item .ui-hud-res-icon {
		font-size: var(--fs-12);
	}
	.header-avatar {
		width: 67px;
		height: 67px;
	}
}

@media (min-width: 2560px) {
	
	
	
	.ui-hud-micro-item {
		padding: 10px 14px;
	}
	.ui-hud-micro-item .k {
		font-size: var(--fs-12);
	}
	.ui-hud-micro-item .v {
		font-size: var(--fs-12);
	}
	.ui-hud-micro-item .ui-hud-res-icon {
		font-size: var(--fs-12);
	}
	.header-avatar {
		width: 86px;
		height: 86px;
	}
}

@media (min-width: 3840px) {
	
	
	.ui-hud-micro-item {
		padding: 12px 16px;
		gap: var(--space-8);
	}
	.ui-hud-micro-item .k {
		font-size: var(--fs-12);
	}
	.header-avatar {
		width: 115px;
		height: 115px;
	}
}

@media (max-width: 520px) {
	.ng-building-item {
		flex-direction: column;
	}
	.ng-building-item .ng-building-image {
		width: 100%;
		height: 140px;
	}
	.ng-defense-mainrow {
		flex-direction: column;
	}
}

@media (max-width: 960px) {
	.ng-main-sections-bar {
		align-items: stretch;
	}
	
}

@media (min-width:1200px) {
	.ng-build-tiles-grid, .ng-tiles-grid {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	}
}

@media (prefers-reduced-motion:reduce) {
	.ng-tile-cube .ng-cube-inner {
		transition: none;
	}
}

@media (min-width:1200px) {
	.ng-tile-grid-tech {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	}
}

@media (max-width:1100px) {
	.ng-tile-large {
		width: 220px;
		height: 220px;
	}
}

@media (max-width:900px) {
	
	.ng-tile-large {
		width: 100%;
	}
}

@media (max-width:600px) {
	.ng-tile-large {
		height: 190px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ng-tile::before, .ng-cube-face .ng-face-front::before {
		animation: none;
	}
}

@media (max-width:1400px) {
	.ng-airport-layout {
		column-gap: var(--space-12);
		row-gap: var(--space-12);
	}
}

@media (max-width:1150px) {
	.ng-airport-layout {
		grid-template-columns: 1fr;
		grid-template-areas: "left""selected""fleet""mission";
	}
}

@media (max-width:600px) {
	.ng-fleet-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width:400px) {
	.ng-fleet-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width:560px) {
	.ng-transport-grid {
		grid-template-columns: 1fr;
	}
}

/* ===================== TABLET LAYOUT (769px – 1024px) ===================== */
/* iPad Portrait 768px, iPad Landscape 1024px, iPad Pro Portrait 1024px       */
@media (max-width: 1024px) and (min-width: 769px) {
	/* --- Font-Sizes: etwas kleiner für Tablet --- */
	:root {
		--fs-14: 12px;
		--fs-16: 13px;
		--fs-18: 15px;
		--fs-20: 16px;
	}

	/* --- Shell: reduzierte Margins --- */
	body.ui-reboot.ng-shell .ui-shell.ui-shell--modules {
		margin: 12px;
		width: calc(100% - 24px);
		border-radius: 14px;
	}

	/* --- Center Hero: weniger Padding --- */
	body.ui-reboot.ng-shell .ui-shell .ui-center-hero {
		padding: 8px 10px 16px;
	}

	/* --- Dashboard GridStack: kleinere cellHeight per CSS --- */
	/* Die JS-cellHeight wird per matchMedia überschrieben, hier CSS-Fallbacks */
	.ng-dashboard-gridstack.grid-stack {
		min-height: 200px;
	}

	/* --- Card-Titles: kompakter --- */
	.ng-cityview-card-title {
		font-size: var(--fs-12);
		margin-bottom: 6px;
		padding-left: 10px;
		padding-right: 10px;
	}

	/* --- Cards: weniger Padding --- */
	body.ui-reboot.ng-shell .ng-dashboard-gridstack.grid-stack .ng-cityview-card {
		padding: 6px;
	}

	/* --- CityMap: begrenzte Höhe --- */
	#city-map, .ng-cityview-card.ng-grid-citymap #city-map {
		max-height: 360px;
		overflow: hidden;
		background-size: contain;
		background-position: center center;
	}

	/* --- Radar: kleiner --- */
	.ng-header-radar-mini, .ng-header-radar.ng-radar-canvas-wrap.ng-header-radar-mini {
		max-width: 160px;
	}

	/* --- Header: kompaktere Elemente --- */
	.hud-header, body.ui-reboot .hud-header {
		padding: 6px 10px;
		gap: 4px;
	}
	body.ui-reboot .hud-header > .ui-hud-micro {
		gap: 8px;
		padding: 4px 8px;
	}
	.ui-hud-micro-item .k, .ui-hud-micro-item .v {
		font-size: var(--fs-8);
	}
	.ui-hud-micro-item .ui-hud-res-icon {
		font-size: var(--fs-10);
	}

	/* --- Sections-Tabs: kompakter --- */
	.ui-nav-tabs .tab, .ui-nav-tabs .ng-comm-tab-btn {
		font-size: var(--fs-10);
		padding: 4px 6px;
	}

	/* --- Tiles (Build/Tech/Hangar/Defense): kompakter --- */
	.ng-tile-title, .ng-tile .ng-tile-title {
		font-size: var(--fs-10);
	}
	/* --- Combat-Reports: kompakter --- */
	.ng-combat-list-item {
		min-height: 36px;
		padding: 1px 4px;
	}

	/* --- Flotten: font-size --- */
	

	/* --- Jobs-Card: kompakter --- */
	
}

/* ===================== MOBILE LAYOUT (max-width: 768px) ===================== */
@media (max-width: 768px) {
	:root {
		--fs-h1: 24px;
		--fs-h2: 16px;
		--fs-h3: 13px;
		--fs-body: 12px;
		--fs-micro: 8px;
		/* Aliase mitskalen */
		--fs-14: 13px;
		--fs-16: 13px;
		--fs-18: 16px;
		--fs-20: 16px;
	}
	/* --- Grid: Left panel entfernen, volle Breite --- */
	body.ui-reboot.ng-shell .ui-shell, .ui-shell, .ui-shell.ui-shell--modules {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		grid-template-areas: 'header' 'center';
		gap: var(--space-8);
	}
	body.ui-reboot.ng-shell .ui-shell.ui-shell--modules {
		margin: 0;
		width: 100%;
		min-height: fit-content;
		border-radius: 0;
	}
	/* --- Header: kompakt, Burger-Menu sichtbar --- */
	.hud-header, body.ui-reboot .hud-header, body.ui-reboot.ng-shell .ui-shell .hud-header {
		grid-area: header;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		flex-wrap: wrap;
		padding: 6px 8px;
		gap: 4px;
		grid-template-columns: auto 1fr auto;
	}
	/* Ressourcen-Leiste auf mobile: zentriert mit Abstand */
	body.ui-reboot .hud-header > .ui-hud-micro {
		grid-column: 1 / -1;
		order: 10;
		width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		justify-content: center;
		gap: 12px;
		padding: 8px 12px;
		margin: 8px 0;
		-webkit-overflow-scrolling: touch;
	}
	body.ui-reboot .hud-header > .ui-hud-top-row {
		grid-column: 3;
	}
	body.ui-reboot .hud-header > .ng-header-top-left {
		grid-column: 1;
	}
	/* --- Center: Volle Breite, kein Sidebar-Abstand --- */
	body.ui-reboot.ng-shell .ui-shell .ui-center-hero {
		grid-area: center;
		padding: 8px 8px 16px;
		margin: 0;
		width: 100%;
		max-width: 100%;
		overflow-x: hidden;
	}
	body.ui-reboot.ng-shell .ui-shell .ui-center-hero .ui-frame.ui-frame--heavy.ng-sections-frame {
		padding: 4px;
	}
	/* --- Dashboard Grid: Cards einzeln untereinander (kein GridStack) --- */
	body.ui-reboot.ng-shell .ng-cityview-dashboard.grid-stack, body.ui-reboot.ng-shell .ng-dashboard-gridstack.grid-stack {
		display: flex !important;
		flex-direction: column !important;
		gap: 8px;
		min-height: 0;
		height: auto !important;
		position: static !important;
	}
	/* GridStack-Items (falls doch gewrapt) auf volle Breite + static */
	body.ui-reboot.ng-shell .ng-dashboard-gridstack.grid-stack > .grid-stack-item, body.ui-reboot.ng-shell .ng-cityview-dashboard.grid-stack > .grid-stack-item {
		position: static !important;
		width: 100% !important;
		height: auto !important;
		left: auto !important;
		top: auto !important;
	}
	body.ui-reboot.ng-shell .ng-dashboard-gridstack.grid-stack > .grid-stack-item > .grid-stack-item-content {
		position: static !important;
		width: 100% !important;
		height: auto !important;
		overflow: visible !important;
	}
	/* Reine Section-Cards (wenn GridStack nicht initialisiert) */
	body.ui-reboot.ng-shell .ng-cityview-dashboard.grid-stack > .ng-cityview-card, body.ui-reboot.ng-shell .ng-cityview-dashboard.grid-stack > section {
		position: static !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0;
		flex-shrink: 0;
	}
	/* ng-shell-center und Tile-Dashboard volle Breite */
	.ng-shell-center, .ng-tile-dashboard {
		width: 100% !important;
		max-width: 100% !important;
		padding: 0;
	}
	/* Radar Card: Keine Überlappung */
	.ng-cityview-card.ng-grid-radar {
		overflow: hidden;
	}
	/* Radar-Mini-Container braucht eine explizite Höhe, da der Canvas innen position:absolute hat */
	.ng-header-radar-mini, .ng-header-radar.ng-radar-canvas-wrap.ng-header-radar-mini {
		position: relative !important;
		width: 100% !important;
		max-width: 200px;
		aspect-ratio: 1 / 1;
		margin: 0 auto;
		border-radius: 50%;
		overflow: hidden;
		box-sizing: border-box;
	}
	.ng-header-radar.ng-radar-canvas-wrap {
		max-height: 220px;
	}

	/* ---- Mobile Card-Reihenfolge ---- */
	.ng-cityview-card.ng-active-jobs-card { order: 1; }
	.ng-cityview-card.ng-grid-flotten-outgoing { order: 3; }
	.ng-cityview-card.ng-grid-combat-reports { order: 4; }
	.ng-cityview-card.ng-grid-citymap { order: 5; }
	.ng-cityview-card.ng-grid-radar { order: 6; }
	.ng-cityview-card.ng-grid-flotten-incoming { order: 7; }

	/* City Map: Höhe begrenzen + sichtbar machen */
	#city-map, .ng-cityview-card.ng-grid-citymap #city-map {
		position: relative;
		width: 100%;
		min-height: 180px;
		max-height: 280px;
		overflow: hidden;
		flex: 0 0 auto;
		aspect-ratio: 862 / 615;
		background-size: contain;
		background-position: center center;
	}
	/* Globe-Hintergrund auf Mobile: volle Breite, feste Hoehe */
	.ng-galaxy-background {
		position: relative !important;
		width: 100% !important;
		height: 240px !important;
		order: 8;
	}
	.ng-galaxy-background .ng-galaxy-canvas {
		position: absolute !important;
		inset: 0;
	}
	/* Türme/Flugzeuge/Schild-Overlay im CityMap ausblenden */
	.ng-citymap-info-tr {
		display: none !important;
	}
	/* Section Panels: volle Breite */
	.ng-sections-area, .ng-sections-slider, .ng-sections-track, .ng-section-panel {
		width: 100% !important;
		max-width: 100% !important;
	}

	body.ui-reboot.ng-shell .ng-dashboard-gridstack.grid-stack, body.ui-reboot.ng-shell .ng-cityview-dashboard.grid-stack, .ng-dashboard-gridstack.grid-stack, .ng-cityview-dashboard.grid-stack {
		display: flex !important;
		flex-direction: column !important;
		gap: var(--space-8);
		min-height: auto;
		height: auto !important;
		position: static !important;
	}
	body.ui-reboot.ng-shell .ng-dashboard-gridstack.grid-stack .grid-stack-item, body.ui-reboot.ng-shell .ng-cityview-dashboard.grid-stack .grid-stack-item, .ng-dashboard-gridstack.grid-stack .grid-stack-item, .ng-cityview-dashboard.grid-stack .grid-stack-item {
		position: static !important;
		width: 100% !important;
		left: auto !important;
		top: auto !important;
		height: auto !important;
		min-height: 0;
		padding: 0;
		margin-bottom: var(--space-4);
	}
	body.ui-reboot.ng-shell .ng-dashboard-gridstack.grid-stack .grid-stack-item-content, body.ui-reboot.ng-shell .ng-cityview-dashboard.grid-stack .grid-stack-item-content, .ng-dashboard-gridstack.grid-stack .grid-stack-item-content, .ng-cityview-dashboard.grid-stack .grid-stack-item-content {
		position: static !important;
		height: auto !important;
		min-height: 0;
		width: 100% !important;
		overflow: visible !important;
	}
	body.ui-reboot.ng-shell .ng-dashboard-gridstack.grid-stack .ng-cityview-card, body.ui-reboot.ng-shell .ng-cityview-dashboard.grid-stack > .ng-cityview-card, body.ui-reboot.ng-shell .ng-cityview-dashboard.grid-stack > section {
		position: static !important;
		height: auto !important;
		min-height: 0;
		width: 100% !important;
	}
	body.ui-reboot.ng-shell .ng-dashboard-gridstack.grid-stack .grid-stack-item-content > .ng-cityview-card {
		height: auto;
	}
	body.ui-reboot.ng-shell .ng-dashboard-gridstack.grid-stack .ng-cityview-card > .ng-cityview-card-content, body.ui-reboot.ng-shell .ng-dashboard-gridstack.grid-stack .ng-cityview-card > .ng-cityview-card-body, body.ui-reboot.ng-shell .ng-dashboard-gridstack.grid-stack .ng-cityview-card .ui-log {
		overflow: visible;
		max-height: none;
	}
	.ng-card-drag-handle {
		display: none;
	}
	body.ui-reboot .hud-header {
		height: auto;
		min-height: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--space-4);
	}
	
	
	
	body.ui-reboot .hud-header .ui-hud-comm-tabs {
		height: auto;
		padding: 0;
	}
	
	
	
	
	
	
	.ui-nav-tabs.ng-sections-tabs {
		display: contents;
	}
	
	
	body.ui-reboot .hud-header > .ng-header-top-left {
		width: 100%;
		padding: var(--space-4);
	}
	
	.ui-hud-top-row {
		padding: 2px 0;
		gap: var(--space-4);
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}
	
	
	
	
	.ui-hud-micro-group[data-group="depot"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-4) var(--space-8);
	}
	
	body.ui-reboot .ng-header-top-left .ui-hud-micro-item .k {
		font-size: var(--fs-12);
	}
	body.ui-reboot .ng-header-top-left .ui-hud-micro-item .v {
		font-size: var(--fs-12);
	}
	.ui-hud-micro-item .ui-hud-res-icon {
		font-size: var(--fs-12);
	}
	.ui-hud-prod {
		font-size: var(--fs-12);
	}
	.ui-hud-res-meter-label {
		font-size: var(--fs-12);
	}
	.ui-shell {
		grid-template-areas: 'header''center''left''ticker';
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}
	body.ui-reboot {
		overflow-x: hidden;
	}
	.ng-main-sections-bar {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	
	#ng-second-header-page-tabs {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		flex-wrap: nowrap;
	}
	body.ui-reboot #ng-second-header-page-tabs .tab {
		padding: var(--space-4) var(--space-8);
		font-size: var(--fs-12);
		flex-shrink: 0;
	}
	.ng-cityview-card.ng-tiles-card {
		padding: 4px;
		max-width: 100%;
	}
	.ng-cityview-card.ng-tiles-card.ng-tiles-card--defense {
		width: 100%;
		max-width: none;
	}
	.ng-cityview-card.ng-tiles-card .ng-tiles-grid, .ng-cityview-card.ng-tiles-card .ng-build-tiles-grid, .ng-cityview-card.ng-tiles-card .ng-defense-tiles-grid {
		padding-top: var(--space-8);
		padding-bottom: var(--space-8);
	}
	
	body.ui-reboot .ng-build-groups-grid {
		grid-template-columns: 1fr;
	}
	
	
	body.ui-reboot .ng-build-row .ng-tile, body.ui-reboot .ng-tech-row .ng-tile, body.ui-reboot .ng-hangar-row .ng-tile, body.ui-reboot .ng-panel-cube {
		width: 100%;
		max-width: none;
	}
	.ng-tile-footer {
		padding: 2px 4px;
		font-size: var(--fs-12);
	}
	body.ui-reboot .ng-tile-title {
		font-size: var(--fs-12);
		
	}
	.ng-defense-tiles-header {
		gap: var(--space-12);
		padding: 4px 0 8px;
		margin-bottom: 2px;
	}
	.ng-defense-stat-value {
		font-size: var(--fs-12);
	}
	.ng-defense-stat-label {
		font-size: var(--fs-12);
		letter-spacing: 0.8px;
	}
	body.ui-reboot .ng-build-group-title {
		font-size: var(--fs-12);
	}

	.ng-comm-tab-btn span {
		display: none;
	}
	.ng-comm-tab-btn {
		padding: 10px 12px;
	}

	.ng-combat-2col {
		grid-template-columns: 1fr;
	}
	.ng-report-meta {
		flex-direction: column;
		gap: var(--space-8);
	}
	.ng-resources-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ng-coord-embed .ng-coord-embed-navwrap {
		grid-template-columns: 32px minmax(0, 1fr) 32px;
		gap: var(--space-4);
	}
	.ng-coord-embed .ng-coord-embed-navbtn {
		width: 32px;
		min-width: 32px;
		min-height: 32px;
	}
	.ng-coord-embed .ng-coord-embed-navbtn i {
		font-size: var(--fs-12);
	}
	.ng-coord-embed .ng-coord-table, .ng-page-coordinates .ng-coord-table {
		table-layout: auto;
		font-size: var(--fs-12);
	}
	.ng-coord-embed .ng-coord-table thead th, .ng-page-coordinates .ng-coord-table thead th {
		font-size: var(--fs-12);
		padding: 4px 2px;
		
	}
	.ng-coord-embed .ng-coord-table tbody td, .ng-page-coordinates .ng-coord-table tbody td {
		font-size: var(--fs-12);
		padding: 4px 2px;
	}
	.ng-coord-embed .ng-coord-avatar, .ng-page-coordinates .ng-coord-avatar {
		width: 18px;
		height: 18px;
		margin-right: 2px;
	}
	.ng-coord-embed .ng-col-name, .ng-page-coordinates .ng-col-name, .ng-coord-embed .ng-col-owner, .ng-page-coordinates .ng-col-owner {
		max-width: 80px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.ng-coord-embed .ng-col-actions .ng-terminal-action, .ng-page-coordinates .ng-col-actions .ng-terminal-action {
		width: 24px;
		height: 24px;
	}
	.ng-coord-embed .ng-col-actions .ng-terminal-action i, .ng-page-coordinates .ng-col-actions .ng-terminal-action i {
		font-size: var(--fs-12);
	}
	
	.ng-coord-embed .ng-alliance-tag, .ng-page-coordinates .ng-alliance-tag {
		font-size: var(--fs-12);
	}
	.ng-quick-jump .ng-input-group {
		gap: var(--space-4);
	}
	.ng-quick-jump .ng-coord-field {
		width: 48px;
		font-size: var(--fs-12);
		padding: 4px 6px;
	}
	.ng-quick-jump .ng-jump-btn {
		font-size: var(--fs-12);
		padding: 4px 8px;
	}
	.ng-page-coordinates .ng-coord-shell {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}
	
	.ng-page-coordinates .ng-coord-main-header {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-4);
	}
}

@media (orientation: portrait) {
	body.ui-reboot.ng-shell .ui-shell .dock, .ng-dock-panel {
		display: none !important;
	}

	.ng-burger-menu-btn {
		display: flex !important;
	}

	body.ui-reboot.ng-shell .ui-shell .ui-center-hero {
		padding-bottom: 8px;
	}
}

@media (orientation: landscape) {
	body.ui-reboot.ng-shell .ui-shell .dock {
		display: flex !important;
	}

	.ng-dock-panel {
		display: flex !important;
	}

	.ng-burger-menu-btn {
		display: none !important;
	}
}

@media (max-width: 600px) {
	.ng-alliance-members-table thead {
		display: none;
	}
	.ng-alliance-members-table, .ng-alliance-members-table tbody, .ng-alliance-members-table tr, .ng-alliance-members-table td {
		display: block;
		width: 100%;
	}
	.ng-alliance-members-table tr {
		padding: var(--space-6) 0;
		border-bottom: 1px solid rgba(0, 0, 0, 0.20);
	}
	.ng-alliance-members-table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-8);
		padding: 6px 0;
	}
	.ng-alliance-members-table td::before {
		content: attr(data-label);
		font-family: var(--font-body);
		font-size: var(--fs-12);
		

		text-transform: uppercase;
	}
	.ng-alliance-member-cell {
		justify-content: flex-end;
		text-align: right;
		gap: var(--space-6);
	}
}

@media (max-width: 480px) {
	.ui-hud-micro-group[data-group="depot"] {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 2px var(--space-4);
	}
	body.ui-reboot .ng-header-top-left .ui-hud-micro-item .k {
		font-size: var(--fs-12);
	}
	body.ui-reboot .ng-header-top-left .ui-hud-micro-item .v {
		font-size: var(--fs-12);
	}
	.ui-hud-micro-item .ui-hud-res-icon {
		font-size: var(--fs-12);
	}
	.ui-hud-prod {
		font-size: var(--fs-12);
	}
	.ng-cityview-card-title {
		font-size: var(--fs-12);
		margin-bottom: var(--space-4);
		padding-left: 0;
		padding-right: 0;
	}
	.ng-coord-embed .ng-col-points, .ng-page-coordinates .ng-col-points {
		display: none;
	}
	.ng-coord-embed .ng-col-name, .ng-page-coordinates .ng-col-name, .ng-coord-embed .ng-col-owner, .ng-page-coordinates .ng-col-owner {
		max-width: 60px;
	}
	.ng-coord-embed .ng-coord-table tbody td, .ng-page-coordinates .ng-coord-table tbody td {
		font-size: var(--fs-12);
		padding: 2px 2px;
	}
	.ng-coord-embed .ng-coord-table thead th, .ng-page-coordinates .ng-coord-table thead th {
		font-size: var(--fs-12);
		padding: 2px 2px;
	}
}

*, *::before, *::after {
	box-sizing: border-box;
	text-shadow: none;
}

body.ui-reboot, body.ui-reboot.ng-shell {
	background-color: var(--ui-bg-space);
	background-image: radial-gradient(circle at 50% 42%, rgba(79, 172, 254, 0.12) 0%, rgba(79, 172, 254, 0.06) 28%, rgba(5, 10, 21, 0.22) 58%, var(--ui-bg-vignette) 100%);
	background-repeat: no-repeat;
	background-attachment: fixed;
	color: var(--ui-accent-cyan);
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
	margin: 0;
	padding: 0;
	min-height: 0;
}

.ng-crt-surface::before, .ng-crt-surface::after, .ng-crt-curved::before, .ng-crt-curved::after {
	display: none;
}

.header-avatar.ng-crt-avatar, .ng-crt-surface, .ng-crt-curved {
	animation: none;
}
.ng-dock-panel {
    width: auto;
    min-width: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    max-width: 100%;
    height: auto;
    max-height: none;
    min-height: 0;
    display: flex;
    flex-direction: row;
    border: var(--ui-glass-border);
    border-radius: 16px;
    padding: 4px 12px;
    box-sizing: border-box;
    overflow: visible;
    align-self: center;
    background: linear-gradient(155deg, rgba(10, 20, 30, 0.78), rgba(6, 12, 22, 0.68));
    backdrop-filter: blur(12px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.48), 0 0 26px rgba(79, 172, 254, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.ng-dock-content {
	display: flex;
	flex-direction: row;
	flex: 0 1 auto;
	height: auto;
	min-height: 0;
	padding: 0;
}

.ng-dock-panel .ng-dock-section {
	background: transparent;
	border: none;
	display: flex;
	flex-direction: row;
	flex: 0 1 auto;
	min-height: 0;
	padding: 0;
	margin: 0;
}

.ng-dock-panel .ng-dock-section::before, .ng-dock-panel .ng-dock-section::after, .ng-dock-panel .hud-divider {
	display: none;
}

.ng-dock-panel .ui-frame__body {
	display: flex;
	flex-direction: row;
	flex: 0 1 auto;
	min-height: 0;
	padding: 0;
}

.ng-dock-nav {
	display: flex;
	flex-direction: row;
	flex: 0 1 auto;
	min-height: 0;
}

.ng-dock-nav-list {
	display: flex;
	flex-direction: row;
	flex: 0 1 auto;
	align-items: center;
	gap: 4px;
	height: auto;
	max-height: none;
	overflow-y: visible;
	overflow-x: visible;
	scrollbar-width: none;
	padding: 0;
	margin: 0;
	list-style: none;
}

.ng-dock-nav-list::-webkit-scrollbar {
	display: none;
}

.ng-dock-nav-list li {
	width: 46px;
	height: 46px;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ng-dock-nav-list li.ui-nav-tabs.ng-sections-tabs {
	display: flex;
	width: 46px;
	height: 46px;
	flex: 0 0 auto;
	gap: 0;
	align-items: center;
	justify-content: center;
}

.ng-dock-nav-list li .ng-dock-link {
	width: 44px;
	height: 44px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	border-radius: 12px;
	background: none;
	border: none;
	color: var(--ui-accent-blue);
	transition: transform 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
	cursor: pointer;
	text-decoration: none;
}

.ng-dock-nav-list li .ng-dock-link.tab, .ng-dock-nav-list li .ng-dock-link.tab-group__item {
	width: 44px;
	height: 44px;
	padding: 0;
	gap: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ng-dock-nav-list li .ng-dock-link i {
	font-size: var(--fs-20);
	color: inherit;
}

.ng-dock-panel .ng-dock-nav-list li .ng-dock-link:hover, .ng-dock-panel .ng-dock-nav-list li .ng-dock-link:focus-visible {
	background: none;
	border: none;
	box-shadow: none;
	transform: none;
	color: inherit;
}

.ng-dock-panel .ng-dock-nav-list li .ng-dock-link:hover i, .ng-dock-panel .ng-dock-nav-list li .ng-dock-link:focus-visible i {
	color: var(--ui-accent-cyan);
	filter: drop-shadow(0 0 6px rgba(191, 239, 255, 0.7));
}

.ng-dock-nav-list li .ng-dock-link.tab::before, .ng-dock-nav-list li .ng-dock-link.tab::after {
	display: none;
}

.ng-dock-panel .ng-dock-nav-list li .ng-dock-link.tab.is-active, .ng-dock-panel .ng-dock-nav-list li .ng-dock-link.tab-group__item.is-active {
	background: none;
	border: none;
	box-shadow: none;
	color: inherit;
}

.ng-dock-panel .ng-dock-nav-list li .ng-dock-link.tab.is-active i, .ng-dock-panel .ng-dock-nav-list li .ng-dock-link.tab-group__item.is-active i {
	color: var(--ui-accent-cyan);
	filter: drop-shadow(0 0 5px rgba(191, 239, 255, 0.6));
}

.ng-dock-admin {
	margin-left: auto;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ng-dock-admin + .ng-dock-logout {
	margin-left: 6px;
}

.ng-dock-logout {
	margin-left: auto;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ng-dock-logout .ng-dock-link {
    color: rgba(79, 172, 254, 0.84);
}

.ng-dock-nav-list li.ng-dock-logout .ng-dock-link, .ng-dock-nav-list li.ng-dock-logout .ng-dock-link i {
    color: rgba(79, 172, 254, 0.84);
}

.ng-dock-panel .ng-dock-nav-list li.ng-dock-logout .ng-dock-link:hover {
	background: none;
	border: none;
	box-shadow: none;
	color: inherit;
}

.ng-dock-panel .ng-dock-nav-list li.ng-dock-logout .ng-dock-link:hover i {
	color: var(--ui-accent-cyan);
	filter: drop-shadow(0 0 6px rgba(191, 239, 255, 0.7));
}

.ng-dock-logout .ng-dock-link i {
	font-size: var(--fs-12);
	color: inherit;
}

.ng-dock-panel .ng-dock-section[data-section="city-stats"], .ng-dock-panel .ng-dock-section[data-section="resource-diagnostics"] {
	display: none;
}

.hud-header, .hud-header {
	grid-area: header;
	z-index: 1000;
}

.hud-header::before, .hud-header::after {
	display: none;
}

.ng-header-avatar-right, .ng-header-top-left .header-avatar.ng-header-avatar-right {
	display: flex;
	flex-shrink: 0;
	align-self: center;
	width: 80px;
	height: 96px;
	min-height: 96px;
	border-radius: 10px;
	overflow: visible;
	border: 1px solid rgba(96,165,250,.32);
	align-items: center;
	justify-content: center;
	cursor: pointer;
	margin-left: 0;
	margin-right: 10px;
	position: relative;
	animation: ng-hud-avatar-ring 4s ease-in-out infinite;
	box-shadow: 0 8px 28px rgba(0,0,0,.55);
}

.ng-header-avatar-level {
    position: absolute;
    top: -12px;
    right: -18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 4px;
    border-radius: 12px;
    background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
    border: 3px solid rgba(15, 23, 42, 0.8);
    box-shadow: 0 10px 22px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.35);
    color: #1f2937;
    font-weight: 900;
    line-height: 1;
    transform: rotate(22deg);
    z-index: 3;
    pointer-events: none;
}

.ng-header-avatar-level strong {
	color: inherit;
	font-size: 20px;
	font-weight: 900;
	letter-spacing: -.03em;
	text-shadow: 0 1px 0 rgba(255,255,255,.24);
}

.ng-header-avatar-right img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
}

.ui-hud-comm-tabs {
	gap: var(--space-8);
	margin-top: 0;
	flex-wrap: nowrap;
	justify-content: flex-end;
	background: transparent;
	border: none;
	height: 100%;
	display: flex;
	align-items: center;
	width: 100%;
}

.ng-sections-tabs .tab, .ng-sections-tabs .tab-group__item {
	height: 44px;
	padding: 0 12px;
	border-radius: 12px;
	background: none;
	border: none;
	color: var(--ui-accent-blue);
	font-size: var(--fs-12);
	font-family: var(--font-body);
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-6);
	white-space: nowrap;
}

.ng-sections-tabs .tab:hover {
	background: none;
	color: inherit;
}

.ng-sections-tabs .tab.is-active, .ng-sections-tabs .tab-group__item.is-active {
	background: none;
	color: inherit;
}

.ng-sections-tabs .tab > i, .ng-sections-tabs .tab-group__item > i {
	font-size: var(--fs-20);
	color: inherit;
}

.ng-sections-tabs {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	width: auto;
	justify-content: center;
}

.tab.is-build-active::after, .tab.is-tech-active::after, .tab.is-defense-active::after, .tab.is-hangar-active::after {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 12px;
	background: var(--color-accent);
	flex-shrink: 0;
	animation: none;
	}

.ng-header-primary, .ng-header-top-left, body.ui-reboot .hud-header > .ng-header-primary, body.ui-reboot .hud-header > .ng-header-top-left {
	flex: 0 0 auto;
	width: max-content;
	max-width: none;
	min-width: max-content;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--space-8);
	padding-right: 0;
	overflow: visible;
}

.ng-header-top-left .ng-header-avatar-tools {
	order: 1;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: var(--space-10);
	row-gap: 0;
	width: 100%;
	flex-shrink: 0;
}

.ng-header-top-left .ng-header-avatar-tools > .header-avatar.ng-header-avatar-right {
	grid-column: 1;
	grid-row: 1;
	align-self: center;
}

.ng-header-top-left .ng-header-avatar-side {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
	display: grid;
	grid-template-rows: auto auto auto;
	row-gap: 4px;
	align-items: start;
}

.ng-header-top-left .ng-header-avatar-icons {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--space-8);
	flex-wrap: nowrap;
}

.ng-header-top-left .ng-header-avatar-icons > .ng-missions-icon {
	width: 40px;
	height: 40px;
}

.ng-header-top-left .ng-header-level-row {
	justify-content: flex-start;
	width: 100%;
}

.ng-header-primary.ng-header-top-left,
body.ui-reboot .hud-header > .ng-header-primary.ng-header-top-left {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 18px 12px 24px;
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(10,20,30,.76) 0%, rgba(7,13,23,.66) 100%);
	border: var(--ui-glass-border);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px rgba(3,8,18,.34), 0 0 14px rgba(191, 239, 255,.12);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	min-width: 230px;
	max-width: 340px;
	height: auto;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.ui-hud-top-row {
	justify-content: flex-start;
	padding: 4px 8px 2px;
	flex: 0 0 auto;
	width: fit-content;
	display: flex;
	align-items: center;
	flex-shrink: 0;
	height: auto;
	gap: var(--space-8);
}

.ng-header-player-link {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	width: auto;
	max-width: 100%;
	text-decoration: none;
	color: var(--ui-accent-cyan);
	line-height: 1.2;
	position: relative;
	z-index: 1;
}

.ng-header-player-name {
	display: block;
	max-width: 100%;
	width: 100%;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	letter-spacing: .01em;
	color: var(--ui-accent-cyan);
	text-shadow: 0 0 8px rgba(191, 239, 255,.18);
	text-align: right;
}

.ng-header-player-alli {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	max-width: 100%;
	width: 100%;
	min-width: 0;
	gap: 8px;
	margin-top: 0;
	font-size: 11px;
	line-height: 1.25;
	color: var(--ui-accent-blue);
	letter-spacing: .03em;
	text-align: right;
}

.ng-header-player-alli-text {
	display: block;
	min-width: 0;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: right;
}

.ng-header-alliance-crest {
	width: 22px;
	height: 22px;
	object-fit: cover;
	flex-shrink: 0;
}

@media (max-width: 768px) {
	.ng-header-primary.ng-header-top-left {
		min-width: 0;
		max-width: min(100%, 290px);
		padding: 11px 14px 10px 18px;
		gap: 6px;
	}

	.ng-header-top-left .ng-header-avatar-tools {
		column-gap: var(--space-6);
	}

	.ng-header-top-left .ng-header-avatar-icons {
		gap: var(--space-4);
	}

	.ng-header-top-left .ng-header-avatar-icons > .ng-missions-icon {
		width: 40px;
		height: 40px;
	}

	.ng-header-top-left .header-avatar.ng-header-avatar-right {
		width: 52px;
		height: 52px;
	}

	.ng-header-player-name {
		font-size: 13px;
	}

	.ng-header-player-alli {
		gap: 6px;
		font-size: 10px;
	}

	.ng-header-alliance-crest {
		width: 20px;
		height: 20px;
	}

	.ng-header-avatar-level {
		top: -8px;
		right: -8px;
		min-width: 36px;
		height: 36px;
		padding: 0 8px;
		border-radius: 11px;
	}

	.ng-header-avatar-level strong {
		font-size: 17px;
	}

	.ng-header-level-row {
		gap: var(--space-4);
	}
}

@media (max-width: 480px) {
	.ng-header-primary.ng-header-top-left {
		max-width: min(100%, 236px);
		padding: 9px 12px 9px 14px;
		border-radius: 12px;
	}

	.ng-header-top-left .ng-header-avatar-tools {
		column-gap: 4px;
	}

	.ng-header-top-left .ng-header-avatar-icons {
		gap: 2px;
	}

	.ng-header-top-left .ng-header-avatar-icons > .ng-missions-icon {
		width: 36px;
		height: 36px;
	}

	.ng-header-top-left .header-avatar.ng-header-avatar-right {
		width: 46px;
		height: 46px;
	}

	.ng-header-player-link {
		gap: 3px;
	}

	.ng-header-player-name {
		font-size: 12px;
	}

	.ng-header-player-alli {
		font-size: 9px;
		gap: 5px;
	}

	.ng-header-alliance-crest {
		width: 18px;
		height: 18px;
		border-radius: 5px;
	}

	.ng-header-avatar-level {
		top: -6px;
		right: -6px;
		min-width: 30px;
		height: 30px;
		padding: 0 7px;
		border-radius: 10px;
	}

	.ng-header-avatar-level strong {
		font-size: 14px;
	}

	.ng-header-xp-label, .ng-header-xp-pct {
		font-size: 9px;
	}
}

.ng-city-switcher-actions {
	height: auto;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	width: max-content;
}

.ng-city-admin-icon {
	align-self: center;
}

.ng-city-admin-resources-wrap {
	display: flex;
	justify-content: center;
	margin: 0 0 var(--space-16);
	padding-top: var(--space-8);
}

.ng-city-admin-resources-grid {
    width: min(100%, 720px);
}

.ng-city-switcher {
	position: relative;
	display: flex;
	align-items: stretch;
	justify-content: center;
	width: max-content;
	overflow: visible;
}
.ng-city-switcher-btn {
	gap: var(--space-6);
	background: none;
	border: none;
	border-radius: 12px;
	transition: transform 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
	height: 44px;
	padding: 0 12px;
	color: var(--ui-accent-blue);
	font-family: var(--font-body);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
}
.ng-city-switcher-btn:hover {
	background: none;
	color: inherit;
}

.ui-hud-micro-item .k {
	grid-area: label;
	color: rgba(79, 172, 254, 0.74);
	font-size: var(--fs-8);
	font-weight: 400;
	text-transform: uppercase;
	display: block;
}

.ui-hud-micro-item .v {
	grid-area: value;
	color: var(--ui-accent-cyan);
	font-size: var(--fs-16);
	font-weight: 700;
	display: block;
}

.ui-hud-prod {
	grid-area: prod;
	display: block;
	color: var(--ui-accent-blue);
	white-space: nowrap;
}

.ui-hud-micro-group .ui-hud-res-meter, body.ui-reboot .hud-header .ui-hud-res-meter {
	display: block;
	width: 100%;
	flex: 0 0 100%;
	align-self: stretch;
	margin: 0;
}

body.ui-reboot .hud-header .ui-hud-res-meter {
	position: relative;
	overflow: visible;
}
.ui-hud-res-meter {
	width: 100%;
	position: relative;
	margin-top: 4px;
	height: 3px;
	border-radius: 12px;
	background: var(--ui-glass-fill);
	overflow: visible;
	border: none;
	min-width: 40px;
}
.ui-hud-res-meter-fill {
	width: 0;
	position: relative;
	overflow: hidden;
	height: 100%;
	border-radius: 12px;
	background: var(--color-accent);
	transition: width 0.5s ease;
}
.ui-hud-res-meter-label {
	display: block;
	position: relative;
	top: auto;
	right: auto;
	text-align: center;
	text-transform: uppercase;
	font-size: var(--fs-8);
	color: var(--ui-accent-cyan, #8fa4b8);
	margin-top: 3px;
	line-height: 1.2;
}

.ui-hud-res-meter.is-warn .ui-hud-res-meter-fill {
	background: var(--ui-alert-orange);
}

.ui-hud-res-meter.is-full .ui-hud-res-meter-fill {
	background: var(--ui-alert-orange);
}
.ui-center-hero {
	grid-area: center;
	min-width: 0;
	width: 100%;
	position: relative;
	min-height: 0;
	overflow: visible;
	overflow-x: visible;
	outline: none;
	transition: opacity 0.15s ease-out;
	padding: 12px 16px;
	background: transparent;
	overflow-y: visible;
}

.ui-frame, .ui-frame--heavy, .ui-frame.ui-frame--heavy {
	background: transparent;
	border: none;
	border-radius: var(--card-radius);
}

.ui-frame__body {
	background: transparent;
	padding: 0;
}

.ng-dashboard-gridstack.grid-stack .grid-stack-placeholder > .placeholder-content {
	border: 2px dashed rgba(59, 130, 246, 0.45);
	background: rgba(59, 130, 246, 0.06);
	border-radius: var(--card-radius);
	}

.ng-dashboard-gridstack.grid-stack .grid-stack-placeholder > .placeholder-content::after {
	content: none;
}

body.ng-dashboard-dragging .ng-dashboard-gridstack.grid-stack::before {
	background-image:linear-gradient(to right, rgba(0, 0, 0, 0.06) 1px, transparent 1px),linear-gradient(to bottom, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
	background-size: calc(100% / 12) 80px;
	opacity: 1;
	mix-blend-mode: normal;
}

body.ng-dashboard-dragging .ng-dashboard-gridstack.grid-stack .grid-stack-item > .grid-stack-item-content::after {
	border: 1px solid var(--ui-accent-cyan);
	border-radius: var(--card-radius);
	}

.ng-dashboard-gridstack.grid-stack .grid-stack-item-content, .ng-dashboard-gridstack.grid-stack .grid-stack-item-content > .ng-cityview-card, .ng-dashboard-gridstack.grid-stack .ng-cityview-card {
	border-radius: var(--card-radius);
}

.ng-dashboard-gridstack.grid-stack .ng-cityview-card > :first-child {
	border-top-left-radius: var(--card-radius);
	border-top-right-radius: var(--card-radius);
}

.ng-dashboard-gridstack.grid-stack .ng-cityview-card > :last-child {
	border-bottom-left-radius: var(--card-radius);
	border-bottom-right-radius: var(--card-radius);
}

.ng-dashboard-gridstack.grid-stack .ng-cityview-card {
	border-radius: inherit;
}

.ng-cityview-card, .ng-tiles-card {
	border-radius: var(--card-radius);
	overflow: hidden;
}

.ng-dashboard-gridstack.grid-stack .ng-cityview-card.ng-grid-citymap, .ng-cityview-card.ng-grid-citymap {
	padding: 0;
	background: transparent;
	position: relative;
}

.ng-cityview-card.ng-grid-citymap #city-map {
	background: transparent;
	position: relative;
}

.ng-cityview-card.ng-grid-citymap > .ng-cityview-card-title {
	padding: 0;
	margin-bottom: 12px;
}

.ng-cityview-card.ng-grid-citymap > .ng-cityview-card-title .ng-card-drag-handle {
	left: 0;
}

.ng-citymap-info-tl, .ng-citymap-info-tr, .ng-citymap-info-br, .ng-citymap-info-bl {
	position: absolute;
	z-index: 100;
	pointer-events: none;
}

.ng-citymap-info-tl {
	top: 10px;
	left: 12px;
	opacity: 1;
}

.ng-citymap-info-tl .ng-citymap-info-line {
	font-size: 15px;
	line-height: 1.2;
}

.ng-citymap-info-tr {
    right: 20px;
    display: grid;
    grid-template-columns: auto auto;
    justify-items: end;
    opacity: 1;
}

.ng-citymap-info-tr .ng-citymap-info-line {
	display: contents;
}

.ng-citymap-info-tr .ng-citymap-info-line .k {
	text-align: right;
}

.ng-citymap-info-tr .ng-citymap-info-line .v {
	text-align: right;
}

.ng-citymap-info-br {
	bottom: 20px;
	right: 20px;
	text-align: right;
}

.ng-citymap-info-bl {
	bottom: 20px;
	left: 20px;
}

body.ui-reboot .ng-cityview-card.ng-grid-citymap :is(.ng-citymap-info-tl, .ng-citymap-info-tr) .ng-citymap-info-line {
	font-size: var(--fs-12);
	line-height: 1.5;
	color: var(--ui-accent-cyan);
	font-family: 'Roboto Mono', 'Inter', var(--font-body);
	font-weight: 700;
	text-shadow: 0 0 10px rgba(191, 239, 255, 0.42);
	white-space: nowrap;
}

body.ui-reboot .ng-cityview-card.ng-grid-citymap :is(.ng-citymap-info-tl, .ng-citymap-info-tr) .ng-citymap-info-line .k {
	color: var(--ui-accent-cyan);
	font-weight: 500;
	letter-spacing: 0.03em;
}

body.ui-reboot .ng-cityview-card.ng-grid-citymap :is(.ng-citymap-info-tl, .ng-citymap-info-tr) .ng-citymap-info-line .v {
	color: var(--ui-accent-cyan);
	font-weight: 700;
	margin-left: 4px;
}

body.ui-reboot .ng-cityview-card.ng-grid-citymap :is(.ng-citymap-info-tl, .ng-citymap-info-tr) .ng-citymap-info-line i {
	color: var(--ui-accent-cyan);
}

body.ui-reboot .ng-cityview-card.ng-grid-citymap .ng-citymap-info-tr .ng-citymap-info-line {
	font-size: var(--fs-10);
	line-height: 1.35;
}

body.ui-reboot .ng-cityview-card.ng-grid-citymap .ng-citymap-info-tr .ng-citymap-info-line .k,
body.ui-reboot .ng-cityview-card.ng-grid-citymap .ng-citymap-info-tr .ng-citymap-info-line .v,
body.ui-reboot .ng-cityview-card.ng-grid-citymap .ng-citymap-info-tr .ng-citymap-info-line i {
	font-size: var(--fs-10);
}

.ng-cityview-card-title {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 4px 0;
	position: relative;
	padding-left: 20px;
	padding-right: 20px;
	width: 100%;
	text-align: center;
	gap: var(--space-8);
	color: var(--ui-accent-blue);
	font-size: var(--fs-12);
	text-transform: uppercase;
	font-family: 'GeneraleStation', var(--font-body);
	margin-bottom: 12px;
	border: none;
	background: transparent;
	padding: 0;
	color: transparent;
	text-shadow: none;
}

/* h3-Elemente mit .ng-cityview-card-title: explizite Groesse + gedaempfte Darstellung */
h3.ng-cityview-card-title {
	font-size: var(--fs-12);
	font-weight: 500;
	letter-spacing: 0.8px;
	opacity: 0.82;
}

.ng-cityview-card-title .ng-card-drag-handle i {
	color: var(--ui-accent-cyan);
}

.grid-stack {
	background: transparent;
}

.grid-stack > .grid-stack-item > .grid-stack-item-content {
	border-radius: var(--card-radius);
	overflow: hidden;
	background: transparent;
	border: none;
	}

.ng-build-row {
	gap: var(--space-16);
}

.ng-tile, body.ui-reboot .ng-build-row .ng-tile, body.ui-reboot .ng-tech-row .ng-tile, body.ui-reboot .ng-hangar-row .ng-tile {
	border-radius: 12px;
	border: 1px solid var(--ui-accent-cyan);
}

.ng-tile:not(.ng-tile-cube), body.ui-reboot .ng-build-row .ng-tile:not(.ng-tile-cube), body.ui-reboot .ng-tech-row .ng-tile:not(.ng-tile-cube), body.ui-reboot .ng-hangar-row .ng-tile:not(.ng-tile-cube) {
	overflow: hidden;
}

.ng-tile::before, .ng-tile::after {
	display: none;
}

.ng-tile-bg {
	border-radius: 12px;
	opacity: 0.3;
}

.ng-tile:hover, body.ui-reboot .ng-build-row .ng-tile:hover {
	border-color: rgba(255, 255, 255, 0.4);
	transform: translateY(-2px);
	}

.ng-tile-inactive, .ng-tile.ng-tile-inactive {
	opacity: 1;
}

.ng-tile-inactive .ng-tile-bg {
	filter: brightness(.25) grayscale(.6);
}

.ng-tile-inactive .ng-tile-title {
	opacity: .7;
}

.ng-build-group-title, .ng-build-group-title--center {
	font-size: var(--fs-12);
	
	text-transform: uppercase;
	
	color: rgba(255, 255, 255, 0.72);
	font-family: var(--font-body);
	border: none;
	background: transparent;
}

h3.ng-build-group-title.ng-build-group-title--center {
	margin: 0;
	color: var(--ui-accent-cyan);
	font-family: 'GeneraleStation', var(--font-body);
	font-size: var(--fs-12);
	font-weight: 400;
	letter-spacing: 0.8px;
	line-height: 1.3;
	text-transform: uppercase;
	text-align: center;
}

.ng-cityview-kv.is-negative {
	font-size: var(--fs-12);
	color: var(--ui-alert-orange);
}
.ng-cityview-skybar {
	position: relative;
	width: 15px;
	height: 58px;
	margin-left: auto;
	margin-right: auto;
	border: none;
	overflow: hidden;
	background: var(--ui-accent-cyan);
	border-radius: 12px;
}
.ng-cityview-skyfill {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 10%;
	transition: height .4s ease;
	z-index: 2;
	background: var(--color-accent);
	border-radius: 12px;
}

.ng-active-job-item {
	position: relative;
	width: 100%;
	background: transparent;
	border: none;
	gap: var(--space-12);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
}

.ng-active-job-item:last-child {
	border-bottom: none;
}
.ng-job-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--fs-12);
	color: var(--ui-accent-cyan);
}

.ng-job-amount {
	font-size: var(--fs-12);
	color: var(--ui-accent-blue);
	
}
.ng-timer-value {
	font-variant-numeric: tabular-nums;
	font-size: var(--fs-12);
	color: var(--ui-accent-cyan);
	font-weight: 700;
	font-family: var(--font-body);
}

.ng-radar-canvas-wrap::before, .ng-radar-canvas-wrap::after {
	display: none;
}

.ng-combat-list-item {
    display: flex;
    align-items: stretch;
    font-size: var(--fs-12);
    gap: 4px;
    transition: background 0.15s;
    padding: 1px 5px;
    min-height: 42px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--ui-accent-cyan);
    margin-bottom: 4px;
    overflow: hidden;
}

.ng-combat-list-item:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.2);
}
.ng-combat-list-item.is-unread {
	border-left: 3px solid var(--ui-alert-orange);
	background: rgba(220, 38, 38, 0.06);
}

.ng-combat-list-body {
	flex: 0 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	color: #fff;
}

.ng-combat-list-row {
	display: flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ng-combat-icon {
	flex: 0 0 auto;
	font-size: var(--fs-body);
	width: 14px;
	text-align: center;
}

.ng-combat-icon--att {
	color: rgba(255, 100, 100, 0.9);
}

.ng-combat-icon--def {
	color: rgba(100, 180, 255, 0.9);
}

.ng-combat-ally-tag {
	color: #fff;
	font-size: var(--fs-12);
	flex: 0 0 auto;
}

.ng-combat-ally-name {
	color: #fff;
	font-size: var(--fs-12);
	flex: 0 0 auto;
}

.ng-combat-player {
	color: #fff;
	font-size: var(--fs-12);
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 0 0 auto;
}

.ng-combat-coords {
	color: #fff;
	font-size: var(--fs-12);
	flex: 0 0 auto;
}

.ng-combat-list-meta {
	flex: 0 0 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 4px;
}

.ng-combat-list-time {
	color: rgba(255, 255, 255, 0.4);
	font-size: var(--fs-12);
	white-space: nowrap;
}

.ng-combat-list-badge {
	flex: 0 0 auto;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid var(--ui-accent-cyan);
	color: rgba(255, 255, 255, 0.9);
	border-radius: 12px;
	font-size: 9px;
	padding: 1px 5px;
	letter-spacing: 0.5px;
}
/* Alte tile-overlay nicht mehr benoetigt - tile-modals nutzen ng-modal-backdrop */
/*
.ng-tile-overlay {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	z-index: 15000;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: all .3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.30);
	backdrop-filter: blur(4px);
}
*/

/* Alle Modal-Cards einheitlich */
.ng-modal-card, .ng-modal-frame {
	background: linear-gradient(155deg, rgba(10, 20, 30, 0.82), rgba(6, 12, 22, 0.72));
	border: var(--ui-glass-border);
	border-radius: 14px;
	backdrop-filter: blur(20px) saturate(1.25);
	-webkit-backdrop-filter: blur(20px) saturate(1.25);
	box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5), 0 0 28px rgba(79, 172, 254, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08);
	color: var(--ui-accent-cyan);
}

/* .ng-tile-modal::before,.ng-tile-modal::after { display: none; } */

.ng-modal-backdrop {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	z-index: 10000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.24s ease;
	background: radial-gradient(circle at 50% 35%, rgba(7, 14, 26, 0.35), rgba(2, 6, 12, 0.82));
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.ng-modal-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

.ng-modal-backdrop .ng-modal-card, .ng-modal-backdrop .ng-modal {
	width: min(420px, calc(100vw - 32px));
	max-width: 420px;
	max-height: calc(100vh - 64px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform: translateY(10px) scale(0.97);
	transition: transform 0.24s ease, opacity 0.24s ease;
	background: linear-gradient(155deg, rgba(10, 20, 30, 0.82), rgba(6, 12, 22, 0.72));
	border: var(--ui-glass-border);
	border-radius: 14px;
	backdrop-filter: blur(20px) saturate(1.25);
	-webkit-backdrop-filter: blur(20px) saturate(1.25);
	box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5), 0 0 28px rgba(79, 172, 254, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08);
	color: var(--ui-accent-cyan);
}

.ng-modal-backdrop.is-open .ng-modal-card, .ng-modal-backdrop.is-open .ng-modal {
	transform: translateY(0) scale(1);
}

/* Sections-Modals (Allianzen, Bau, Hangar usw.): fixe 95%-Größe, kein Resize beim Tab-Wechsel */
.ng-modal-card.ng-modal-large {
	width: 95vw;
	max-width: 95vw;
	height: 95vh;
	max-height: 95vh;
	display: flex;
	flex-direction: column;
}

/* Topliste: 95% Breite und Höhe, fixe Größe beim Tab-Wechsel */
.ng-modal-card.ng-modal-toplist {
	width: 95vw;
	max-width: 95vw;
	height: 95vh;
	max-height: 95vh;
	display: flex;
	flex-direction: column;
}

.ng-modal-card.ng-modal-toplist #ng-spa-content {
	flex: 1 1 0;
	overflow-y: auto;
	min-height: 0;
}

/* Topliste: ng-center-panel und ng-widget ohne künstliche Breitenbegrenzung */
.ng-modal-card.ng-modal-toplist .ng-center-panel {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.ng-modal-card.ng-modal-toplist .ng-widget {
	margin: 0;
	width: 100%;
	box-sizing: border-box;
}

@media (orientation: portrait) {
	.ng-modal-card.ng-modal-large {
		width: 95vw;
		max-width: 95vw;
		height: 95vh;
		max-height: 95vh;
	}
}

@media (orientation: landscape) and (max-width: 900px) {
	.ng-modal-card.ng-modal-large {
		width: 95vw;
		max-width: 95vw;
		height: 95vh;
		max-height: 95vh;
	}
}

.ng-modal-header-row {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	gap: var(--space-12);
	background: linear-gradient(180deg, rgba(191, 239, 255, 0.12), rgba(7, 14, 26, 0.2));
	border-bottom: 1px solid rgba(191, 239, 255, 0.24);
}

.ng-modal-title {
	flex: 1 1 auto;
	text-align: center;
	padding: 0 52px;
	color: var(--ui-accent-cyan);
	letter-spacing: 0.04em;
}

.ng-modal-header-row .ng-modal-close-btn {
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
}

.ng-modal-header-row .ng-pref-tabs {
	margin-right: 60px;
	flex-shrink: 1;
}

.ng-modal-body {
	padding: 20px;
	overflow: auto;
	background: transparent;
	color: var(--ui-accent-cyan);
	flex: 1 1 0;
	min-height: 0;
}

.ng-modal-backdrop .ng-modal-close-btn, .ng-modal__close {
	color: rgba(79, 172, 254, 0.86);
	border: 1px solid rgba(79, 172, 254, 0.24);
	background: rgba(8, 16, 28, 0.6);
	border-radius: 10px;
	transition: color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.ng-modal-backdrop .ng-modal-close-btn:hover, .ng-modal__close:hover {
	color: var(--ui-accent-cyan);
	border-color: var(--ui-accent-cyan);
	box-shadow: 0 0 14px rgba(191, 239, 255, 0.24);
}

.ng-modal-body :is(input, textarea, select), .ng-modal-card :is(input, textarea, select) {
	background: rgba(8, 16, 26, 0.72);
	border: 1px solid rgba(79, 172, 254, 0.24);
	color: var(--ui-accent-cyan);
}

.ng-modal-body :is(input, textarea, select):focus, .ng-modal-card :is(input, textarea, select):focus {
	border-color: var(--ui-accent-cyan);
	box-shadow: 0 0 0 2px rgba(191, 239, 255, 0.12);
}

.ng-modal-body .ng-widget, .ng-modal-card .ng-widget, .ng-center-panel .ng-widget {
	background: linear-gradient(180deg, rgba(10, 20, 30, 0.62), rgba(8, 16, 26, 0.46));
	border: 1px solid rgba(79, 172, 254, 0.22);
	color: var(--ui-accent-cyan);
	margin:4px;
}

.ng-modal-body .ng-center-panel, .ng-modal-card .ng-center-panel, .ng-modal-body .ng-center-panel > div, .ng-modal-card .ng-center-panel > div {
	background: rgba(8, 16, 26, 0.56);
	border-color: rgba(79, 172, 254, 0.2);
	color: var(--ui-accent-cyan);
}

/* Settings modal: remove extra translucent overlap layer */
.ng-modal-body .ng-preference-sections, .ng-modal-card .ng-preference-sections {
	background: transparent !important;
}

.ng-modal-body .ng-pref-block.ng-widget, .ng-modal-card .ng-pref-block.ng-widget {
	border: 1px solid rgba(79, 172, 254, 0.22);
	background: rgba(10, 20, 30, 0.58);
}

.ng-modal-body .ng-widget-title, .ng-modal-card .ng-widget-title, .ng-modal-body label, .ng-modal-card label, .ng-modal-body .ng-pref-inline, .ng-modal-card .ng-pref-inline, .ng-modal-body .ng-inline-muted, .ng-modal-card .ng-inline-muted, .ng-modal-body strong, .ng-modal-card strong {
	color: var(--ui-accent-cyan);
}

.ng-modal-body .ng-alliance-content, .ng-modal-card .ng-alliance-content, .ng-modal-body .ng-alliance-section, .ng-modal-card .ng-alliance-section, .ng-modal-body .ng-alliance-content p, .ng-modal-card .ng-alliance-content p, .ng-modal-body .ng-alliance-section p, .ng-modal-card .ng-alliance-section p, .ng-modal-body .ng-alliance-content .ng-info-box, .ng-modal-card .ng-alliance-content .ng-info-box, .ng-modal-body .ng-alliance-section .ng-info-box, .ng-modal-card .ng-alliance-section .ng-info-box, .ng-modal-body .ng-center-panel .ng-widget, .ng-modal-card .ng-center-panel .ng-widget {
	text-align: center;
}

.ng-modal-body .ng-pref-tabs, .ng-modal-card .ng-pref-tabs {
	border-color: rgba(79, 172, 254, 0.22);
	background: rgba(8, 16, 26, 0.62);
}

.ng-modal-body .ng-pref-tab, .ng-modal-card .ng-pref-tab {
	color: var(--ui-accent-blue);
}

.ng-modal-body .ng-pref-tab:hover, .ng-modal-card .ng-pref-tab:hover {
	color: var(--ui-accent-cyan);
	background: rgba(191, 239, 255, 0.1);
}

.ng-modal-body .ng-pref-tab.is-active, .ng-modal-card .ng-pref-tab.is-active {
	color: var(--ui-accent-cyan);
	background: rgba(191, 239, 255, 0.18);
}

.ng-modal-body .ui-btn.ui-btn-ghost, .ng-modal-card .ui-btn.ui-btn-ghost {
	background: rgba(8, 16, 26, 0.62);
	border-color: rgba(79, 172, 254, 0.24);
	color: var(--ui-accent-cyan);
}

.ng-modal-body .ui-btn.ui-btn-ghost:hover, .ng-modal-card .ui-btn.ui-btn-ghost:hover {
	background: rgba(191, 239, 255, 0.14);
	border-color: var(--ui-accent-cyan);
}

.ng-modal-body .ng-alert, .ng-modal-card .ng-alert {
	background: rgba(10, 20, 30, 0.58);
	border-color: rgba(79, 172, 254, 0.2);
	color: var(--ui-accent-cyan);
}

.ng-modal__inner {
	box-sizing: border-box;
	width: 100%;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	font-family: var(--font-body);
	background: transparent;
	border: none;
	border-radius: 12px;
}

.ng-modal__footer {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	background: transparent;
	padding: 12px 20px;
}

.ng-modal-header-row, .ng-modal__header {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	padding: 14px 20px;
	background: rgba(255, 255, 255, 0.05);
}

.ng-modal-title, .ng-modal__title {
	font-size: var(--fs-h2);
	font-weight: 400;
	color: var(--ui-accent-cyan);
	font-family: 'GeneraleStation', var(--font-body);
	letter-spacing: 0.5px;
	margin: 0;
	line-height: 1.3;
}

.ng-modal-close-btn {
	width: 32px;
	height: 32px;
	border-radius: 12px;
	border: none;
	background: none;
	color: var(--ui-accent-cyan);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 22px;
}

.ng-modal-close-btn:hover {
	background: var(--ui-glass-fill);
	color: var(--ui-accent-cyan);
}

/* ── Tile-Modal Backdrop ── */
.ng-tile-backdrop {
	z-index: 15000;
}

/* ── City-Switcher Modal ── */
.ng-city-modal-backdrop {
	z-index: 15001;
}

.ng-city-modal {
	width: min(420px, calc(100vw - 32px));
	max-width: 420px;
	max-height: calc(100vh - 64px);
}

.ng-city-modal .ng-modal-header-row {
	padding: 14px 20px;
}

.ng-city-modal .ng-modal-body {
	background: transparent;
}

.ng-city-modal .ng-modal-header-row .ng-modal-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.ng-city-modal .ng-modal-header-row .ng-modal-title i {
	color: var(--color-accent);
}

.ng-city-modal-body {
	padding: 8px !important;
}

.ng-city-modal-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ng-city-modal-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 10px;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease;
	background: transparent;
}

.ng-city-modal-item:hover {
	background: rgba(255, 255, 255, 0.08);
}

.ng-city-modal-item:active {
	transform: scale(0.98);
}

.ng-city-modal-item.is-active {
	background: rgba(59, 130, 246, 0.12);
	border: 1px solid rgba(59, 130, 246, 0.25);
}

.ng-city-modal-item:not(.is-active) {
	border: 1px solid transparent;
}

.ng-city-modal-item-icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--fs-h3);
	color: var(--ui-accent-cyan);
	flex-shrink: 0;
}

.ng-city-modal-item.is-active .ng-city-modal-item-icon {
	background: rgba(59, 130, 246, 0.18);
	color: var(--color-accent);
}

.ng-city-modal-item-info {
	flex: 1;
	min-width: 0;
}

.ng-city-modal-item-coords {
	font-family: var(--font-body);
	color: var(--color-accent);
	font-size: var(--fs-12);
}

.ng-city-modal-item-name {
	color: var(--ui-accent-cyan);
	font-size: var(--fs-11);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ng-city-modal-item-badge {
	font-size: var(--fs-micro);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 3px 8px;
	border-radius: 6px;
	background: rgba(59, 130, 246, 0.15);
	color: var(--color-accent);
	flex-shrink: 0;
}

.ng-city-modal-loading {
	padding: 24px;
	text-align: center;
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12);
}

.ng-city-modal-loading i {
	margin-right: 6px;
}

.ng-modal__body {
	flex: 1 1 auto;
	overflow: auto;
	min-height: 0;
	font-size: var(--fs-12);
	color: var(--ui-accent-cyan);
	padding: 20px;
}

.ui-btn, .ng-button {
	font-family: var(--font-body);
	border-radius: 12px;
	
	letter-spacing: 0;
	text-transform: none;
	transition: all 0.15s ease;
	padding: 8px 16px;
	border: 1px solid var(--ui-accent-cyan);
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12);
	cursor: pointer;
	width: auto;
	align-self: flex-start;
	justify-self: start;
}

.ui-btn:hover, .ng-button:hover {
	background: var(--ui-accent-cyan);
}

.ng-button-primary {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--ui-accent-cyan);
}

.ng-button-primary:hover {
	background: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
}

#ng-comm-fullview-content .ng-pref-form, #ng-spa-content .ng-pref-form, .ng-pref-form {
	gap: var(--space-12);
}

#ng-comm-fullview-content .ng-pref-form .ui-btn, #ng-spa-content .ng-pref-form .ui-btn, .ng-pref-form .ui-btn {
	margin-top: 6px;
}

.ng-pref-avatar-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-12);
	padding: 12px 0 8px;
}

.ng-pref-avatar-box .ui-btn {
	align-self: center;
}

.ng-pref-avatar-image {
	width: 128px;
	height: 128px;
	border-radius: 16px;
	object-fit: cover;
	border: 1px solid var(--ui-accent-cyan);
	background: var(--header-bg);
}

.ng-input, .ui-input, input[type="text"], input[type="number"], input[type="password"], input[type="email"], select, textarea {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 12px;
	color: var(--ui-accent-cyan);
	font-family: var(--font-body);
	padding: 8px 12px;
	font-size: var(--fs-12);
}

.ng-input:focus, input:focus, select:focus, textarea:focus {
	border-color: var(--color-accent);
	outline: none;
	}

.ng-table th, table th {
	font-size: var(--fs-12);
	
	text-transform: uppercase;
	

	padding: 8px 12px;
	border-bottom: 1px solid var(--ui-accent-cyan);
	background: transparent;
}

.ng-table td, table td {
	padding: 8px 12px;
	font-size: var(--fs-12);
	color: rgba(255, 255, 255, 0.88);
	background: transparent;
}

.ng-table tr:hover td {
	background: rgba(0, 0, 0, 0);
}

::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--ui-glass-fill);
}

.ui-ticker {
	display: none;
}

.hud-edge {
	display: none;
}

.ng-sections-slider, .ng-section-panel, .ng-section-panel-inner {
	background: transparent;
}

.ng-section-panel-inner .ng-cityview-card.ng-tiles-card, body.ui-reboot .ng-section-panel-inner .ng-cityview-card.ng-tiles-card {
	margin-left: auto;
	margin-right: auto;
}

.hud-glow::before, .hud-glow::after, [class*="hud-glow"]::before, [class*="hud-glow"]::after {
	display: none;
}

.hud-divider {
	background: var(--ui-glass-fill);
	height: 1px;
	border: none;
}

.hud-data-row {
	text-align: center;
}

.hud-data-row__label {
	font-family: var(--font-body);
	font-size: var(--fs-12);

	letter-spacing: 0;
}
.ui-log {
	font-size: var(--fs-12);
	color: var(--ui-accent-cyan);
	font-family: var(--font-body);
	border: none;
	background: transparent;
}
.ng-combat-modal-backdrop {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	opacity: 0;
	transition: opacity 0.2s ease;
	background: rgba(0, 0, 0, 0.30);
	backdrop-filter: blur(4px);
}
.ng-combat-modal-card {
	max-width: 90vw;
	max-height: 90vh;
	width: 1200px;
	display: flex;
	flex-direction: column;
	transform: scale(0.95);
	transition: transform 0.2s ease;
	background: #656565;
	border: 1px solid rgba(0, 0, 0, 0.10);
	border-radius: 12px;
}
.ng-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 12px;
	font-size: var(--fs-12);
	vertical-align: middle;
	margin-left: 8px;
}

.ng-badge-capital {
	background: rgba(59, 130, 246, 0.12);
	color: var(--color-accent-hover);
	border: 1px solid rgba(59, 130, 246, 0.20);
}

.ng-badge-colony {
	background: var(--ui-glass-fill);
	color: rgba(255, 255, 255, 0.82);
	border: 1px solid var(--ui-accent-cyan);
}

.landing-logo {
	font-size: clamp(2.5rem, 8vw, 5rem);
	text-transform: uppercase;
	margin-bottom: var(--space-8);
	text-shadow: 0 0 30px rgba(255, 255, 255, 0.15), 0 0 60px rgba(255, 255, 255, 0.08);
	animation: logoGlow 3s ease-in-out infinite;
	font-family: var(--font-body);
	color: var(--ui-accent-cyan);
	letter-spacing: 4px;
}

.landing-logo span {
	color: var(--color-accent);
	opacity: 1;
}
.landing-tagline {
	font-size: var(--fs-12);
	margin-bottom: var(--space-28);
	font-family: var(--font-body);
	letter-spacing: 1px;
}
.landing-login-panel {
	width: min(480px, 90vw);
	position: relative;
	padding: 32px;
}
.landing-login-panel::before {
	content: '';
	position: absolute;
	inset: 3px;
	border: 1px solid var(--ui-accent-cyan);
	pointer-events: none;
	display: none;
}

a {
	color: var(--color-accent);
	text-decoration: none;
}

a:hover {
	color: var(--color-accent-hover);
}
.ng-terminal-feed {
	font-size: var(--fs-12);
	overflow: auto;
	position: relative;
	border-radius: 12px;
	padding: 10px;
	border: none;
}
.ng-section-title {
	text-transform: uppercase;
	margin: 0 0 12px;
	padding-bottom: var(--space-2);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: var(--space-8);
	font-size: var(--fs-12);
	color: var(--ui-accent-cyan);
	font-family: 'GeneraleStation', var(--font-body);
	letter-spacing: 0;
	border: none;
	margin-bottom: 8px;
}

/* h3-Elemente mit .ng-section-title übernehmen h3-Größe */
h3.ng-section-title {
	font-size: var(--fs-h3);
	letter-spacing: 0.5px;
	font-weight: 400;
}

.ng-font-12 {
	font-size: var(--fs-12);
	font-family: var(--font-body);
}

:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* ===================== BURGER MENU ===================== */
/* Standard: Burger versteckt auf Desktop */
.ng-burger-menu-btn {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: none;
	border-radius: 12px;
	color: var(--ui-accent-blue);
	font-size: var(--fs-h2);
	cursor: pointer;
	transition: transform 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
	appearance: none;
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
	z-index: 1010;
	flex-shrink: 0;
}
.ng-burger-menu-btn i {
	font-size: var(--fs-20);
	color: inherit;
}
.ng-burger-menu-btn:hover, .ng-burger-menu-btn:active, .ng-burger-menu-btn:focus-visible {
	background: none;
	border: none;
	box-shadow: none;
	transform: none;
	color: inherit;
}
.ng-burger-menu-btn:hover i, .ng-burger-menu-btn:active i, .ng-burger-menu-btn:focus-visible i {
	color: var(--ui-accent-cyan);
	filter: drop-shadow(0 0 6px rgba(191, 239, 255, 0.7));
}

/* Mobile Overlay-Navigation */
.ng-mobile-nav-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0,0,0,0.6);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity 0.25s ease;
}
.ng-mobile-nav-overlay.is-open {
	display: block;
	opacity: 1;
}
.ng-mobile-nav-panel {
	position: absolute;
	top: 0;
	left: 0;
	width: min(280px, 80vw);
	height: 100%;
	background: linear-gradient(180deg, #555 0%, #333 100%);
	box-shadow: 4px 0 20px rgba(0,0,0,0.3);
	display: flex;
	flex-direction: column;
	padding: 16px 12px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transform: translateX(-100%);
	transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.ng-mobile-nav-overlay.is-open .ng-mobile-nav-panel {
	transform: translateX(0);
}
.ng-mobile-nav-close {
	align-self: flex-end;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 6px;
	color: #fff;
	font-size: 18px;
	cursor: pointer;
	margin-bottom: 12px;
}
.ng-mobile-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.ng-mobile-nav-list a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	color: #fff;
	text-decoration: none;
	font-family: var(--font-body);
	font-size: var(--fs-h3);
	border-radius: 6px;
	transition: background 0.15s ease;
}
.ng-mobile-nav-list a:hover, .ng-mobile-nav-list a:active {
	background: rgba(255,255,255,0.12);
}
.ng-mobile-nav-list a i {
	font-size: 18px;
	width: 24px;
	text-align: center;
	flex-shrink: 0;
}
.ng-mobile-nav-list a.is-active {
	background: rgba(255,255,255,0.15);
	font-weight: 600;
}

#city-map {
	border-radius: 12px;
	overflow: hidden;
}
.ng-main-sections-bar .ng-tile.ng-tile-system {
	position: relative;
	display: block;
	flex: 0 0 min(100%, 320px);
	width: min(100%, 320px);
	height: auto;
	aspect-ratio: 16 / 9;
	min-height: 0;
	overflow: hidden;
	color: var(--ui-accent-cyan);
	text-align: left;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
	border-radius: 12px;
	border: 1px solid rgba(0, 0, 0, 0.06);
	background: var(--card-bg);
}

.ng-main-sections-bar .ng-tile.ng-tile-system:hover {
	border-color: rgba(255, 255, 255, 0.40);
	transform: translateY(-2px);
}
.ng-main-sections-bar .ng-tile.ng-tile-system::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,transparent 0%,transparent 40%,rgba(0, 0, 0, 0.70) 70%,rgba(0, 0, 0, 0.90) 100%);
	z-index: 1;
	pointer-events: none;
	display: none;
}
body.ui-reboot.ng-shell .ng-root-grid {
	display: contents;
	background: none;
}

/* ============================================================
 *  TUTORIAL MODAL
 * ============================================================ */
.ng-tutorial-backdrop {
	position: fixed;
	inset: 0;
	z-index: 99000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0);
	backdrop-filter: blur(0);
	transition: background .35s ease, backdrop-filter .35s ease;
	opacity: 0;
	pointer-events: none;
}
.ng-tutorial-backdrop.is-visible {
	opacity: 1;
	pointer-events: auto;
	background: rgba(0,0,0,.65);
	backdrop-filter: blur(12px) saturate(1.2);
}
.ng-tutorial-backdrop.is-closing {
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
}

.ng-tutorial-card {
	--tutorial-progress: 0%;
	position: relative;
	width: min(680px, 92vw);
	max-height: 85vh;
	display: flex;
	flex-direction: column;
	background: rgba(255,255,255,.06);
	border: 1px solid var(--ui-accent-cyan, rgba(255,255,255,.12));
	border-radius: 16px;
	backdrop-filter: blur(40px) saturate(1.4);
	box-shadow: 0 8px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
	color: var(--ui-accent-cyan, #e8e8e8);
	overflow: hidden;
	transform: translateY(24px) scale(.97);
	transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.ng-tutorial-backdrop.is-visible .ng-tutorial-card {
	transform: translateY(0) scale(1);
}
/* Progress bar at top of card */
.ng-tutorial-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0;
	width: var(--tutorial-progress, 0%);
	height: 3px;
	background: var(--color-accent, #D97706);
	transition: width .3s ease;
	z-index: 1;
}

.ng-tutorial-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px 12px;
	border-bottom: 1px solid var(--ui-accent-cyan, rgba(255,255,255,.08));
}
.ng-tutorial-title {
	font-family: var(--font-heading, var(--font-body, 'Rajdhani', sans-serif));
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: #fff;
}
.ng-tutorial-progress {
	font-size: .78rem;
	color: rgba(255,255,255,.45);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ng-tutorial-body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 20px 24px 16px;
	font-size: .92rem;
	line-height: 1.65;
}
.ng-tutorial-body p {
	margin: 0 0 .75em;
}
.ng-tutorial-body p:last-child {
	margin-bottom: 0;
}
.ng-tutorial-body code {
	background: rgba(255,255,255,.1);
	padding: 1px 6px;
	border-radius: 4px;
	font-size: .88em;
}
.ng-tutorial-body strong {
	color: #fff;
}
.ng-tutorial-body em {
	color: var(--color-accent, #D97706);
	font-style: normal;
}

.ng-tutorial-list {
	margin: .5em 0 1em 1.2em;
	padding: 0;
	list-style: disc;
}
.ng-tutorial-list--numbered {
	list-style: decimal;
}
.ng-tutorial-list li {
	margin-bottom: .35em;
}
.ng-tutorial-list--compact li {
	margin-bottom: .15em;
	font-size: .88rem;
}

.ng-tutorial-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 20px;
	margin: .5em 0 1em;
}
@media (max-width: 500px) {
	.ng-tutorial-columns { grid-template-columns: 1fr; }
}

.ng-tutorial-subtitle {
	font-size: .82rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--color-accent, #D97706);
	margin: .6em 0 .25em;
}

.ng-tutorial-hint {
	background: rgba(217,119,6,.1);
	border-left: 3px solid var(--color-accent, #D97706);
	padding: 10px 14px;
	border-radius: 0 8px 8px 0;
	font-size: .86rem;
	margin: 1em 0 .5em;
	color: rgba(255,255,255,.85);
}

.ng-tutorial-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 24px 16px;
	border-top: 1px solid var(--ui-accent-cyan, rgba(255,255,255,.08));
}
.ng-tutorial-btn {
	min-width: 110px;
}
.ng-tutorial-btn--skip {
	margin-left: auto;
	margin-right: auto;
	opacity: .6;
	font-size: .84rem;
}
.ng-tutorial-btn--skip:hover { opacity: 1; }
.ng-tutorial-btn--next {
	background: var(--color-accent, #D97706);
	color: var(--ui-accent-cyan);
	border-color: var(--color-accent, #D97706);
	font-weight: 600;
}
.ng-tutorial-btn--next:hover {
	background: #f59e0b;
	border-color: #f59e0b;
}

/* Scrollbar inside tutorial body */
.ng-tutorial-body::-webkit-scrollbar { width: 6px; }
.ng-tutorial-body::-webkit-scrollbar-track { background: transparent; }
.ng-tutorial-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }
.ng-tutorial-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.25); }

/* ============================================================
 *  MISSIONS / XP / LEVEL SYSTEM
 * ============================================================ */

/* --- Header: Mission Icon --- */
.ng-missions-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 12px;
	border: none;
	background: none;
	appearance: none;
	-webkit-appearance: none;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
	flex-shrink: 0;
}
.ng-missions-icon:hover, .ng-missions-icon:focus-visible {
	background: none;
	border: none;
	box-shadow: none;
	transform: none;
}
.ng-missions-icon i {
	font-size: var(--fs-20);
	color: var(--ui-accent-blue);
}
.ng-missions-icon:hover i, .ng-missions-icon:focus-visible i {
	color: var(--ui-accent-cyan);
	filter: drop-shadow(0 0 6px rgba(191, 239, 255, 0.7));
}
@keyframes ng-mission-pulse {
	0%,100% { opacity: 1; }
	50% { opacity: .5; }
}
.ng-missions-badge-count {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: var(--color-accent, #D97706);
	color: var(--ui-accent-cyan);
	font-size: .65rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* Header Level + XP-Zeile */
.ng-header-level-row {
	display: flex;
	align-items: center;
	gap: var(--space-6);
	width: 100%;
}
.ng-header-xp-label {
	font-size: 10px;
	color: var(--ui-accent-cyan);
	white-space: nowrap;
	flex-shrink: 0;
	text-transform: uppercase;
	letter-spacing: .08em;
}
.ng-header-xp-bar {
	flex: 1;
	height: 4px;
	background: rgba(255,255,255,.10);
	border-radius: 3px;
	overflow: hidden;
}
.ng-header-xp-fill {
	height: 100%;
	background: linear-gradient(90deg, #3b82f6 0%, var(--color-accent) 100%);
	border-radius: 3px;
	transition: width .6s ease;
	min-width: 0;
}
.ng-header-xp-pct {
	font-size: 10px;
	color: var(--ui-accent-cyan);
	flex-shrink: 0;
	min-width: 2.8em;
	text-align: right;
}

/* Dock SP notification badge */
.ng-dock-sp-badge {
	position: absolute;
	top: -5px;
	right: -5px;
	min-width: 18px;
	height: 18px;
	line-height: 18px;
	text-align: center;
	font-size: var(--fs-micro);
	font-weight: 700;
	color: #fff;
	background: linear-gradient(135deg, #D97706, #b45309);
	border-radius: 9px;
	padding: 0 5px;
	box-shadow: 0 0 8px rgba(217,119,6,.7), 0 0 14px rgba(217,119,6,.3);
	pointer-events: none;
	z-index: 1;
	border: 1px solid rgba(255,255,255,.15);
	animation: ng-sp-dock-pulse 2s ease-in-out infinite;
}
@keyframes ng-sp-dock-pulse {
	0%, 100% { box-shadow: 0 0 6px rgba(217,119,6,.6), 0 0 10px rgba(217,119,6,.2); }
	50%       { box-shadow: 0 0 12px rgba(217,119,6,.9), 0 0 20px rgba(217,119,6,.4); }
}

/* ═══════════════════════════════════════════════════
   SCI-FI HUD CHROME – Animationen & Dekor
   ═══════════════════════════════════════════════════ */

/* Avatar-Scan: wandernder Lichtkegel nur ueber dem Avatar */
@keyframes ng-hud-avatar-scan {
	0%   { background-position: 160% 0; opacity: 0; }
	12%  { opacity: .95; }
	88%  { opacity: .95; }
	100% { background-position: -160% 0; opacity: 0; }
}

/* Avatar-Leuchtring: pulsierender Box-Shadow */
@keyframes ng-hud-avatar-ring {
	0%, 100% { box-shadow: 0 0 0 0 rgba(96,165,250,0),    0 8px 28px rgba(0,0,0,.55); }
	50%       { box-shadow: 0 0 0 4px rgba(96,165,250,.15), 0 0 22px rgba(96,165,250,.30), 0 8px 28px rgba(0,0,0,.55); }
}

/* Ecken-Brackets: sanftes Pulsieren */
@keyframes ng-hud-corner-fade {
	0%, 100% { opacity: 0.35; }
	50%       { opacity: 0.80; }
}

/* ── HUD-Dekorationsebene (nur Unterkante) ── */
.ng-hud-chrome {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}

/* Header-Scan deaktiviert: Scan laeuft jetzt nur noch auf dem Avatar. */
.ng-hud-chrome::before {
	display: none;
}

/* Leuchtende Unterkante */
.ng-hud-chrome::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 6%;
	right: 6%;
	height: 1px;
	background: linear-gradient(90deg,
		transparent            0%,
		rgba(96,165,250,.55)  25%,
		rgba(96,165,250,.90)  50%,
		rgba(96,165,250,.55)  75%,
		transparent           100%);
	box-shadow: 0 0 10px rgba(96,165,250,.45), 0 0 24px rgba(96,165,250,.15);
}

/* ── Avatar: äußerer Leuchtring ── */
.ng-header-avatar-right::before {
	content: '';
	position: absolute;
	inset: -5px;
	border-radius: 14px;
	border: 1px solid rgba(96,165,250,.18);
	pointer-events: none;
	animation: ng-hud-corner-fade 4.5s ease-in-out infinite 1.5s;
}

/* ── Avatar: wandernder Scan-Reflex ── */
.ng-header-avatar-right::after {
	content: '';
	position: absolute;
	inset: 1px;
	border-radius: 9px;
	pointer-events: none;
	z-index: 2;
	background: linear-gradient(90deg,
		transparent 0%,
		transparent 46%,
		rgba(96,165,250,.08) 49%,
		rgba(96,165,250,.24) 50%,
		rgba(96,165,250,.08) 51%,
		transparent 54%,
		transparent 100%);
	background-size: 220% 100%;
	background-position: 160% 0;
	animation: ng-hud-avatar-scan 6.2s ease-in-out infinite;
}

.ng-header-top-left::after {
	content: '';
	position: absolute;
	bottom: 7px;
	left: 7px;
	width: 16px;
	height: 16px;
	border-bottom: 1px solid rgba(96,165,250,.36);
	border-left:   1px solid rgba(96,165,250,.36);
	border-bottom-left-radius: 4px;
	pointer-events: none;
}

/* --- Missions Modal --- */
.ng-missions-modal {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* XP progress bar */
.ng-missions-xp-bar-wrap {
	margin-bottom: 4px;
}
.ng-missions-xp-info {
	display: flex;
	justify-content: space-between;
	font-size: .82rem;
	color: rgba(255,255,255,.6);
	margin-bottom: 6px;
}
.ng-missions-xp-bar {
	height: 6px;
	background: rgba(255,255,255,.08);
	border-radius: 3px;
	overflow: hidden;
}
.ng-missions-xp-fill {
	height: 100%;
	background: var(--color-accent, #D97706);
	border-radius: 3px;
	transition: width .4s ease;
}

/* Tabs */
.ng-missions-tabs {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid var(--ui-accent-cyan, rgba(255,255,255,.08));
	padding-bottom: 0;
}
.ng-missions-tab {
	background: none;
	border: none;
	color: rgba(255,255,255,.5);
	font-size: .85rem;
	font-weight: 500;
	padding: 8px 16px;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition: color .2s, border-color .2s;
}
.ng-missions-tab:hover { color: rgba(255,255,255,.8); }
.ng-missions-tab.is-active {
	color: #fff;
	border-color: var(--color-accent, #D97706);
}

/* Section titles */
.ng-missions-section-title {
	font-size: .82rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--color-accent, #D97706);
	margin-bottom: 8px;
}

/* Mission entry */
.ng-missions-entry {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	background: rgba(255,255,255,.03);
	border: 1px solid var(--ui-accent-cyan, rgba(255,255,255,.06));
	border-radius: 8px;
	margin-bottom: 6px;
	transition: background .2s;
}
.ng-missions-entry:hover { background: rgba(255,255,255,.06); }
.ng-missions-entry.is-clickable {
	cursor: pointer;
}
.ng-missions-entry.is-clickable:hover {
	background: rgba(245, 158, 11, .10);
	border-color: rgba(245, 158, 11, .35);
}
.ng-missions-entry.is-clickable:active {
	transform: translateY(1px);
}
.ng-missions-entry.is-completed {
	opacity: .55;
}
.ng-missions-entry.is-completed .ng-missions-entry-title {
	text-decoration: line-through;
}
.ng-missions-entry-icon {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255,255,255,.06);
	flex-shrink: 0;
}
.ng-missions-entry-icon i { font-size: 1rem; color: rgba(255,255,255,.6); }
.ng-missions-entry.is-completed .ng-missions-entry-icon i { color: #22c55e; }
.ng-missions-entry-info {
	flex: 1 1 auto;
	min-width: 0;
}
.ng-missions-entry-title {
	font-size: .88rem;
	font-weight: 500;
	color: #fff;
}
.ng-missions-entry-desc {
	font-size: .76rem;
	color: rgba(255,255,255,.45);
	margin-top: 2px;
}
.ng-missions-entry-right {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
.ng-missions-entry-xp {
	font-size: .82rem;
	font-weight: 600;
	color: var(--color-accent, #D97706);
	white-space: nowrap;
}
.ng-missions-entry.is-completed .ng-missions-entry-xp {
	color: #22c55e;
}
.ng-missions-action-btn {
	font-size: .76rem;
	padding: 4px 10px;
}

/* Progress bar inside mission entry */
.ng-missions-entry-progress-bar {
	height: 4px;
	background: rgba(255,255,255,.08);
	border-radius: 2px;
	margin-top: 6px;
	overflow: hidden;
}
.ng-missions-entry-progress-fill {
	height: 100%;
	background: var(--color-accent, #D97706);
	border-radius: 2px;
	transition: width .3s ease;
}
.ng-missions-entry-progress-text {
	font-size: .7rem;
	color: rgba(255,255,255,.4);
	margin-top: 2px;
}

/* Reward rows */
.ng-missions-rewards-section {
	background: rgba(217,119,6,.06);
	border: 1px solid rgba(217,119,6,.2);
	border-radius: 10px;
	padding: 12px 14px;
}
.ng-missions-reward-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 0;
}
.ng-missions-reward-row + .ng-missions-reward-row {
	border-top: 1px solid rgba(255,255,255,.06);
}
.ng-missions-reward-level {
	font-weight: 600;
	font-size: .85rem;
	color: #60a5fa;
	min-width: 65px;
}
.ng-missions-reward-res {
	flex: 1;
	font-size: .78rem;
	color: rgba(255,255,255,.6);
}
.ng-missions-reward-res i {
	margin-right: 2px;
}
.ng-missions-claim-btn {
	font-size: .76rem;
	padding: 4px 12px;
	background: var(--color-accent, #D97706) !important;
	color: #000 !important;
	border-color: var(--color-accent, #D97706) !important;
	font-weight: 600;
}
.ng-missions-claim-btn:hover {
	background: #f59e0b !important;
}

/* Empty state */
.ng-missions-empty {
	padding: 24px;
	text-align: center;
	color: rgba(255,255,255,.35);
	font-size: .88rem;
}

/* Locked tab */
.ng-missions-tab.is-locked {
	opacity: .45;
	cursor: not-allowed;
}
/* Completed tab (Anfänger geschafft) */
.ng-missions-tab.is-completed {
	opacity: .5;
	color: rgba(255,255,255,.35);
}
.ng-missions-tab.is-completed.is-active {
	opacity: .65;
	color: rgba(255,255,255,.5);
	border-color: rgba(34, 197, 94, .4);
}
.ng-missions-tab.is-completed i {
	color: #22c55e;
	margin-right: 2px;
}

/* Locked notice (daily/weekly wenn Anfänger nicht fertig) */
.ng-missions-locked-notice {
	padding: 32px 24px;
	text-align: center;
	color: rgba(255,255,255,.5);
	font-size: .95rem;
	line-height: 1.6;
}
.ng-missions-locked-notice i {
	font-size: 1.3em;
	vertical-align: -2px;
	margin-right: 6px;
}

/* Hint unter Anfängermissionen */
.ng-missions-hint {
	padding: 12px 16px;
	text-align: center;
	color: rgba(255,255,255,.35);
	font-size: .82rem;
	border-top: 1px solid rgba(255,255,255,.06);
	margin-top: 8px;
}
.ng-missions-info-banner {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 8px;
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.08);
	color: rgba(255,255,255,.45);
	font-size: .8rem;
	margin-bottom: 4px;
}
.ng-missions-info-banner i {
	font-size: 1rem;
	color: rgba(255,255,255,.3);
	flex-shrink: 0;
}

/* --- XP Diary --- */
.ng-xp-diary { display: flex; flex-direction: column; gap: 12px; }
.ng-xp-diary-list { display: flex; flex-direction: column; gap: 2px; }
.ng-xp-diary-entry {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 6px;
	background: rgba(255,255,255,.02);
}
.ng-xp-diary-entry:nth-child(odd) { background: rgba(255,255,255,.04); }
.ng-xp-diary-amount {
	font-weight: 600;
	color: var(--color-accent, #D97706);
	min-width: 60px;
	font-size: .85rem;
}
.ng-xp-diary-reason {
	flex: 1;
	font-size: .82rem;
	color: rgba(255,255,255,.7);
}
.ng-xp-diary-time {
	font-size: .72rem;
	color: rgba(255,255,255,.35);
	white-space: nowrap;
}
.ng-xp-diary-more {
	text-align: center;
	font-size: .78rem;
	color: rgba(255,255,255,.3);
	padding: 8px;
}

/* --- Globales Toast-System (ng-ui-toast) --- */
.ng-ui-toast {
	position: fixed;
	top: 24px;
	left: 50%;
	transform: translateX(-50%) translateY(-20px);
	z-index: 99500;
	padding: 10px 24px;
	border-radius: 10px;
	background: rgba(255,255,255,.1);
	backdrop-filter: blur(20px) saturate(1.3);
	border: 1px solid var(--ui-accent-cyan, rgba(255,255,255,.12));
	color: #fff;
	font-size: .88rem;
	font-weight: 500;
	opacity: 0;
	transition: opacity .35s, transform .35s;
	pointer-events: none;
}
.ng-ui-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}
.ng-ui-toast.is-success { border-color: #22c55e; }
.ng-ui-toast.is-error { border-color: #ef4444; }
/* Zweizeiliger Toast (mit Titel) */
.ng-ui-toast-title {
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: rgba(255,255,255,.6);
	margin-bottom: 2px;
}
.ng-ui-toast-body {
	color: rgba(255,255,255,.9);
}

/* ====================================================================
 *  ARTIFACT FRAGMENT REWARD
 * ==================================================================== */
.ng-artifact-reward {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 24px 16px;
	position: relative;
	overflow: hidden;
}
.ng-artifact-reward__glow {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 220px;
	height: 220px;
	transform: translate(-50%, -60%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(120,80,255,.35) 0%, rgba(120,80,255,0) 70%);
	animation: ng-artifact-pulse 2.5s ease-in-out infinite;
	pointer-events: none;
	z-index: 0;
}
@keyframes ng-artifact-pulse {
	0%, 100% { opacity: .5; transform: translate(-50%, -60%) scale(1); }
	50% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); }
}
.ng-artifact-reward__icon {
	position: relative;
	z-index: 1;
	width: 120px;
	height: 120px;
	margin-bottom: 18px;
	border-radius: 18px;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(120,80,255,.4);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 30px rgba(120,80,255,.3), 0 0 60px rgba(120,80,255,.15);
	animation: ng-artifact-float 3s ease-in-out infinite;
}
@keyframes ng-artifact-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}
.ng-artifact-reward__icon img {
	width: 80px;
	height: 80px;
	object-fit: contain;
	filter: drop-shadow(0 0 8px rgba(120,80,255,.5));
}
.ng-artifact-reward__text {
	position: relative;
	z-index: 1;
}
.ng-artifact-reward__amount {
	font-size: 1.1rem;
	color: #e0d4ff;
	margin: 0 0 6px;
}
.ng-artifact-reward__amount strong {
	color: #a78bfa;
	font-size: 1.25rem;
}
.ng-artifact-reward__name {
	font-size: 1.3rem;
	font-weight: 700;
	color: #fff;
	margin: 0 0 10px;
	text-shadow: 0 0 12px rgba(120,80,255,.5);
}
.ng-artifact-reward__hint {
	font-size: .8rem;
	color: rgba(255,255,255,.45);
	margin: 0;
}
.ng-artifact-reward__subtitle {
	position: relative;
	z-index: 1;
	font-size: .9rem;
	color: rgba(255,255,255,.65);
	margin: 0 0 12px;
}
/* Daily variant – golden tint */
.ng-artifact-reward.is-daily .ng-artifact-reward__glow {
	background: radial-gradient(circle, rgba(255,180,40,.35) 0%, rgba(255,180,40,0) 70%);
}
.ng-artifact-reward.is-daily .ng-artifact-reward__icon {
	border-color: rgba(255,180,40,.45);
	box-shadow: 0 0 30px rgba(255,180,40,.3), 0 0 60px rgba(255,180,40,.15);
	animation: ng-artifact-scalein .6s cubic-bezier(.34,1.56,.64,1) both, ng-artifact-float 3s ease-in-out .6s infinite;
}
.ng-artifact-reward.is-daily .ng-artifact-reward__icon img {
	filter: drop-shadow(0 0 8px rgba(255,180,40,.5));
}
.ng-artifact-reward.is-daily .ng-artifact-reward__amount strong {
	color: #fbbf24;
}
.ng-artifact-reward.is-daily .ng-artifact-reward__name {
	text-shadow: 0 0 12px rgba(255,180,40,.5);
}
@keyframes ng-artifact-scalein {
	0% { transform: scale(0) rotate(-15deg); opacity: 0; }
	100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ====================================================================
 *  LEVEL-UP MODAL (Commander-Beförderung)
 * ==================================================================== */
.ng-levelup-modal {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 32px 20px 24px;
	overflow: hidden;
}
.ng-levelup-modal__glow {
	position: absolute;
	inset: -40px;
	background: radial-gradient(circle, rgba(96,165,250,.30) 0%, rgba(96,165,250,0) 65%);
	pointer-events: none;
	animation: ng-levelup-pulse 2.5s ease-in-out infinite;
}
.ng-levelup-modal__stars {
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(1.5px 1.5px at 15% 20%, rgba(255,255,255,.7), transparent),
		radial-gradient(1px 1px at 75% 30%, rgba(255,255,255,.5), transparent),
		radial-gradient(1.5px 1.5px at 45% 80%, rgba(255,255,255,.6), transparent),
		radial-gradient(1px 1px at 85% 70%, rgba(255,255,255,.4), transparent),
		radial-gradient(1px 1px at 25% 60%, rgba(255,255,255,.5), transparent);
	pointer-events: none;
	animation: ng-levelup-twinkle 3s ease-in-out infinite;
}
.ng-levelup-modal__rank {
	position: relative;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border: 3px solid rgba(96,165,250,.5);
	background: linear-gradient(135deg, rgba(30,58,138,.6), rgba(59,130,246,.25));
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 40px rgba(96,165,250,.35), 0 0 80px rgba(96,165,250,.15);
	animation: ng-levelup-scalein .7s cubic-bezier(.34,1.56,.64,1) both;
	margin-bottom: 18px;
}
.ng-levelup-modal__level-num {
	font-size: 2.6rem;
	font-weight: 800;
	color: #93c5fd;
	text-shadow: 0 0 20px rgba(96,165,250,.7);
	line-height: 1;
}
.ng-levelup-modal__title {
	font-size: 1.5rem;
	font-weight: 700;
	color: #e0e7ff;
	margin-bottom: 6px;
	animation: ng-levelup-fadein .5s ease .3s both;
}
.ng-levelup-modal__subtitle {
	font-size: 1rem;
	color: rgba(255,255,255,.7);
	margin-bottom: 16px;
	animation: ng-levelup-fadein .5s ease .5s both;
}
.ng-levelup-modal__sp {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: .95rem;
	font-weight: 600;
	color: #fbbf24;
	background: linear-gradient(135deg, rgba(251,191,36,.12), rgba(217,119,6,.08));
	border: 1px solid rgba(251,191,36,.35);
	border-radius: 10px;
	padding: 10px 20px;
	margin-bottom: 12px;
	box-shadow: 0 0 16px rgba(251,191,36,.12), inset 0 0 8px rgba(251,191,36,.05);
	animation: ng-levelup-fadein .5s ease .7s both;
}
.ng-levelup-modal__sp .ng-sp-icon {
	width: 56px;
	height: 56px;
	top: 0;
	animation: ng-sp-pulse 1.8s ease-in-out infinite;
	filter: drop-shadow(0 0 12px rgba(251,191,36,.95)) drop-shadow(0 0 28px rgba(217,119,6,.6));
}
.ng-sp-video {
	display: block;
	width: 120px;
	height: 120px;
	object-fit: contain;
	filter: drop-shadow(0 0 14px rgba(251,191,36,.9)) drop-shadow(0 0 30px rgba(217,119,6,.55));
	border-radius: 8px;
	flex-shrink: 0;
}
.ng-levelup-modal__next {
	font-size: .8rem;
	color: rgba(255,255,255,.4);
	animation: ng-levelup-fadein .5s ease .9s both;
}
@keyframes ng-levelup-scalein {
	0% { transform: scale(0); opacity: 0; }
	100% { transform: scale(1); opacity: 1; }
}
@keyframes ng-levelup-fadein {
	0% { opacity: 0; transform: translateY(10px); }
	100% { opacity: 1; transform: translateY(0); }
}
@keyframes ng-levelup-pulse {
	0%, 100% { opacity: .6; }
	50% { opacity: 1; }
}
@keyframes ng-levelup-twinkle {
	0%, 100% { opacity: .4; }
	50% { opacity: .8; }
}

/* ====================================================================
 *  ARTIFACT LAB (Inventar & Crafting)
 * ==================================================================== */
.ng-modal-body:has(.ng-artifacts-lab) {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.ng-artifacts-lab {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 800px;
}
.ng-artifacts-lab .ng-artifacts-grid {
	width: 100%;
}
.ng-artifacts-lab__intro {
	font-size: .85rem;
	color: rgba(255,255,255,.55);
	margin: 0 0 16px;
	text-align: center;
}
.ng-artifacts-lab__hint {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 20px;
	padding: 10px 14px;
	border-radius: 8px;
	background: rgba(96,165,250,.08);
	border: 1px solid rgba(96,165,250,.20);
	font-size: .82rem;
	color: rgba(255,255,255,.65);
	line-height: 1.5;
	text-align: left;
}
.ng-artifacts-lab__hint i {
	flex-shrink: 0;
	font-size: 1rem;
	color: #60a5fa;
	margin-top: 1px;
}
.ng-artifacts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
}
.ng-artifact-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 18px 14px;
	border-radius: 14px;
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.08);
	transition: border-color .3s, box-shadow .3s;
}
.ng-artifact-card:hover {
	border-color: rgba(120,80,255,.35);
}
.ng-artifact-card.is-crafted {
	border-color: rgba(120,80,255,.5);
	box-shadow: 0 0 20px rgba(120,80,255,.15);
}
.ng-artifact-card__img {
	position: relative;
	width: 150px;
	height: 150px;
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ng-artifact-card__img img {
	width: 150px;
	height: 150px;
	object-fit: contain;
	border-radius: 12px;
}
@media (max-width: 480px) {
	.ng-artifact-card__img {
		width: 90px;
		height: 90px;
	}
	.ng-artifact-card__img img {
		width: 90px;
		height: 90px;
	}
}
.ng-artifact-card.is-crafted .ng-artifact-card__img img {
	filter: drop-shadow(0 0 10px rgba(120,80,255,.5));
}
.ng-artifact-card:not(.is-crafted) .ng-artifact-card__img img {
	filter: grayscale(.5) opacity(.6);
}
.ng-artifact-card__active-badge {
	position: absolute;
	bottom: -4px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(120,80,255,.85);
	color: #fff;
	font-size: .6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: 2px 8px;
	border-radius: 6px;
	white-space: nowrap;
}
.ng-artifact-card__info {
	text-align: center;
	width: 100%;
}
.ng-artifact-card__name {
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
	margin: 0 0 4px;
}
.ng-artifact-card__desc {
	font-size: .78rem;
	color: rgba(255,255,255,.5);
	margin: 0 0 10px;
	line-height: 1.3;
}
.ng-artifact-card__status.is-active {
	color: #a78bfa;
	font-size: .85rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
}
.ng-artifact-card__progress-wrap {
	margin-bottom: 10px;
}
.ng-artifact-card__progress-bar {
	height: 6px;
	border-radius: 3px;
	background: rgba(255,255,255,.08);
	overflow: hidden;
	margin-bottom: 4px;
}
.ng-artifact-card__progress-fill {
	height: 100%;
	border-radius: 3px;
	background: linear-gradient(90deg, #7c3aed, #a78bfa);
	transition: width .4s ease;
}
.ng-artifact-card__progress-text {
	font-size: .72rem;
	color: rgba(255,255,255,.45);
}
.ng-artifact-craft-btn {
	width: 100%;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: .82rem;
	font-weight: 600;
	border: 1px solid rgba(255,255,255,.12);
	background: rgba(255,255,255,.06);
	color: rgba(255,255,255,.4);
	cursor: not-allowed;
	transition: all .3s;
}
.ng-artifact-craft-btn.is-ready {
	cursor: pointer;
	background: linear-gradient(135deg, rgba(120,80,255,.25), rgba(167,139,250,.15));
	border-color: rgba(120,80,255,.5);
	color: #e0d4ff;
	box-shadow: 0 0 12px rgba(120,80,255,.2);
	animation: ng-craft-glow 2s ease-in-out infinite;
}
.ng-artifact-craft-btn.is-ready:hover {
	background: linear-gradient(135deg, rgba(120,80,255,.4), rgba(167,139,250,.25));
	box-shadow: 0 0 20px rgba(120,80,255,.35);
}
@keyframes ng-craft-glow {
	0%,100% { box-shadow: 0 0 12px rgba(120,80,255,.2); }
	50% { box-shadow: 0 0 20px rgba(120,80,255,.4); }
}

/* Header: spezialisierte Statusregeln fuer .ng-missions-icon */
.ng-city-admin-icon:hover i, .ng-city-admin-icon:focus-visible i {
	color: var(--ui-accent-cyan);
}
.ng-header-coordinates-icon:hover i, .ng-header-coordinates-icon:focus-visible i, .ng-header-coordinates-icon.has-open i {
	color: var(--ui-accent-cyan);
}
.ng-header-unread-dot {
	position: absolute;
	top: -2px;
	right: -1px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #ef4444;
	border: 2px solid rgba(8,14,24,.95);
	box-shadow: 0 0 10px rgba(239,68,68,.5);
}
.ng-alliance-icon.has-open i {
	color: var(--ui-accent-cyan);
	animation: none;
}

/* Dreiteiliger Header als Sci-Fi-HUD: getrennte Inseln mit versetzten Leitspuren. */
@media (min-width: 769px) {
	body.ui-reboot .hud-header {
		/* Funktion: Gesamthoehe des 3D-Kabelkoerpers. Beispiel: 24px */
		--ng-hud-connector-cable-height: 24px;
		/* Funktion: Oberes/unteres Inset des Kabelkoerpers innerhalb der Spur. Beispiel: 5px */
		--ng-hud-connector-body-inset-y: 5px;
		/* Funktion: Dicke des animierten Datenkerns. Beispiel: 2px */
		--ng-hud-connector-core-thickness: 2px;
		/* Funktion: Standardlaenge am Kabelanfang (Startseite), negativ verlaengert nach aussen. Beispiel: -30px */
		--ng-hud-connector-body-overlap-start: -30px;
		/* Funktion: Standardlaenge am Kabelende (Zielseite), negativ verlaengert nach aussen. Beispiel: -30px */
		--ng-hud-connector-body-overlap-end: -30px;
		/* Funktion: Standardlaenge des Datenkerns am Kabelanfang. Beispiel: -26px */
		--ng-hud-connector-core-overlap-start: -26px;
		/* Funktion: Standardlaenge des Datenkerns am Kabelende. Beispiel: -26px */
		--ng-hud-connector-core-overlap-end: -26px;
		/* Funktion: Spezielle Anfangslaenge links am Andockpunkt (kleiner = ragt weniger in den linken Block). Beispiel: -14px */
		--ng-hud-connector-left-body-overlap-start: -14px;
		/* Funktion: Spezielle Anfangslaenge des Datenkerns links am Andockpunkt. Beispiel: -10px */
		--ng-hud-connector-left-core-overlap-start: -10px;
		/* Funktion: Vertikaler Versatz nur fuer das linke Verbindungsstueck. Beispiel: -6px */
		--ng-hud-connector-left-shift-y: -6px;
		/* Funktion: Geschwindigkeit des Datenflusses (groesser = langsamer). Beispiel: 3.6s */
		--ng-hud-connector-flow-speed: 3.6s;
		/* Funktion: Geschwindigkeit des Pulses (groesser = langsamer). Beispiel: 2.9s */
		--ng-hud-connector-pulse-speed: 2.9s;

		display: grid;
		grid-template-columns: minmax(245px, max-content) minmax(56px, 1fr) minmax(360px, 640px) minmax(56px, 1fr) minmax(260px, max-content);
		align-items: center;
		gap: 0;
		height: 132px;
		padding: 12px clamp(24px, 4vw, 56px);
		background: transparent;
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		overflow: visible;
	}

	body.ui-reboot .hud-header > .ng-hud-chrome {
		display: none;
	}

	body.ui-reboot .hud-header::before,
	body.ui-reboot .hud-header::after {
		content: none;
		display: none;
	}

	body.ui-reboot .hud-header > .ng-hud-connector {
		position: relative;
		align-self: center;
		justify-self: stretch;
		grid-row: 1;
		z-index: 1;
		pointer-events: none;
		height: var(--ng-hud-connector-cable-height);
		width: 100%;
		min-width: 56px;
		opacity: 0.96;
		filter: drop-shadow(0 3px 7px rgba(3, 8, 18, 0.42)) drop-shadow(0 0 8px rgba(79, 172, 254, 0.26));
	}

	body.ui-reboot .hud-header > .ng-hud-connector::before,
	body.ui-reboot .hud-header > .ng-hud-connector::after {
		content: '';
		position: absolute;
		pointer-events: none;
	}

	body.ui-reboot .hud-header > .ng-hud-connector::before {
		top: var(--ng-hud-connector-body-inset-y);
		bottom: var(--ng-hud-connector-body-inset-y);
		left: var(--ng-hud-connector-body-overlap-start);
		right: var(--ng-hud-connector-body-overlap-end);
		border-radius: 999px;
		background:
			linear-gradient(180deg, rgba(214, 241, 255, 0.44) 0%, rgba(214, 241, 255, 0.08) 28%, rgba(7, 14, 23, 0.18) 52%, rgba(3, 8, 16, 0.48) 100%),
			linear-gradient(90deg, rgba(191, 239, 255, 0.8) 0 18px, transparent 18px calc(100% - 18px), rgba(191, 239, 255, 0.8) calc(100% - 18px) 100%),
			linear-gradient(90deg, rgba(205, 243, 255, 0.84), rgba(79, 172, 254, 0.78) 44%, rgba(37, 99, 235, 0.56) 62%, rgba(191, 239, 255, 0.76));
		background-size: 100% 100%, 100% 100%, 100% 100%;
		box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.26), inset 0 -2px 3px rgba(2, 6, 12, 0.56), 0 0 10px rgba(191, 239, 255, 0.24), 0 0 16px rgba(79, 172, 254, 0.16);
	}

	body.ui-reboot .hud-header > .ng-hud-connector::after {
		left: var(--ng-hud-connector-core-overlap-start);
		right: var(--ng-hud-connector-core-overlap-end);
		top: 50%;
		height: var(--ng-hud-connector-core-thickness);
		border-radius: 999px;
		transform: translateY(-50%);
		background:
			repeating-linear-gradient(90deg, rgba(191, 239, 255, 0) 0 18px, rgba(191, 239, 255, 0.9) 18px 24px, rgba(79, 172, 254, 0.76) 24px 28px, rgba(191, 239, 255, 0) 28px 48px),
			repeating-linear-gradient(90deg, rgba(191, 239, 255, 0) 0 22px, rgba(217, 119, 6, 0.44) 22px 25px, rgba(79, 172, 254, 0.54) 25px 30px, rgba(191, 239, 255, 0) 30px 54px),
			linear-gradient(90deg, rgba(191, 239, 255, 0.12), rgba(191, 239, 255, 0.56), rgba(79, 172, 254, 0.48), rgba(191, 239, 255, 0.12));
		background-size: 156px 100%, 210px 100%, 100% 100%;
		box-shadow: 0 0 5px rgba(191, 239, 255, 0.26), 0 0 9px rgba(79, 172, 254, 0.16);
		animation: ng-hud-dataflow-bidir var(--ng-hud-connector-flow-speed) linear infinite, ng-hud-dataflow-pulse var(--ng-hud-connector-pulse-speed) ease-in-out infinite;
	}

	body.ui-reboot .hud-header > .ng-hud-connector--left {
		grid-column: 2;
		transform: translateY(var(--ng-hud-connector-left-shift-y));
	}

	body.ui-reboot .hud-header > .ng-hud-connector--left::before {
		left: var(--ng-hud-connector-left-body-overlap-start);
	}

	body.ui-reboot .hud-header > .ng-hud-connector--left::after {
		left: var(--ng-hud-connector-left-core-overlap-start);
	}

	body.ui-reboot .hud-header > .ng-hud-connector--right {
		grid-column: 4;
		transform: scaleX(-1);
	}

	body.ui-reboot .hud-header > .ng-header-primary.ng-header-top-left,
	body.ui-reboot .hud-header > .ui-hud-micro,
	body.ui-reboot .hud-header > .ui-hud-top-row {
		position: relative;
		z-index: 2;
		border: 1px solid rgba(191, 239, 255, 0.2);
		background:
			linear-gradient(135deg, rgba(191, 239, 255, 0.11), transparent 22%),
			linear-gradient(180deg, rgba(10, 20, 30, 1), rgba(5, 10, 21, 1));
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(79, 172, 254, 0.16), 0 16px 34px rgba(0, 0, 0, 0.38), 0 0 22px rgba(79, 172, 254, 0.13);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		overflow: visible;
	}

	body.ui-reboot .hud-header > .ng-header-primary.ng-header-top-left {
		grid-column: 1;
		justify-self: start;
		align-self: center;
		min-width: 250px;
		max-width: 360px;
		height: 125px;
		padding: 10px 22px 10px 18px;
		background:
			linear-gradient(135deg, rgba(191, 239, 255, 0.11), transparent 22%),
			linear-gradient(180deg, rgba(10, 20, 30, 1), rgba(5, 10, 21, 1));
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(79, 172, 254, 0.16), 14px 0 24px rgba(79, 172, 254, 0.15), 0 16px 34px rgba(0, 0, 0, 0.38), 0 0 22px rgba(79, 172, 254, 0.13);
	}

	body.ui-reboot .hud-header > .ui-hud-micro {
		grid-column: 3;
		grid-row: 1;
		justify-self: center;
		align-self: baseline;
		width: min(100%, 640px);
		max-width: none;
		height: 90px;
		border: 1px solid rgba(191, 239, 255, 0.2);
		background:
			linear-gradient(135deg, rgba(191, 239, 255, 0.11), transparent 22%),
			linear-gradient(180deg, rgba(10, 20, 30, 1), rgba(5, 10, 21, 1));
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(79, 172, 254, 0.16), -18px 16px 28px rgba(79, 172, 254, 0.11), 18px 20px 28px rgba(79, 172, 254, 0.1), 0 16px 34px rgba(0, 0, 0, 0.38), 0 0 22px rgba(79, 172, 254, 0.13);
	}

	body.ui-reboot .hud-header > .ui-hud-top-row {
		grid-column: 5;
		grid-row: 1;
		justify-self: end;
		align-self: center;
		height: 66px;
		padding: 10px 14px 10px 18px;
		gap: var(--space-8);
		transform: translateY(-8px);
		background:
			linear-gradient(135deg, rgba(191, 239, 255, 0.11), transparent 22%),
			linear-gradient(180deg, rgba(10, 20, 30, 1), rgba(5, 10, 21, 1));
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(79, 172, 254, 0.16), -14px 0 24px rgba(79, 172, 254, 0.15), 0 16px 34px rgba(0, 0, 0, 0.38), 0 0 22px rgba(79, 172, 254, 0.13);
	}

	body.ui-reboot .hud-header > .ui-hud-micro .ui-hud-micro-group {
		position: relative;
		min-height: 75px;
		padding: 0;
	}

	body.ui-reboot .hud-header > .ui-hud-micro .ui-hud-res-meter {
		height: 5px;
		background: rgba(2, 4, 8, 0.72);
		border: 1px solid rgba(191, 239, 255, 0.16);
		box-shadow: inset 0 0 8px rgba(79, 172, 254, 0.16);
	}

	body.ui-reboot .hud-header > .ui-hud-top-row .ng-missions-icon,
	body.ui-reboot .hud-header > .ui-hud-top-row .ng-burger-menu-btn,
	body.ui-reboot .hud-header > .ui-hud-top-row .ng-city-switcher-btn {
		width: 42px;
		height: 42px;
		border-radius: 8px;
		background: linear-gradient(180deg, rgba(79, 172, 254, 0.11), rgba(2, 4, 8, 0.16));
		border: 1px solid rgba(79, 172, 254, 0.18);
		box-shadow: inset 0 0 12px rgba(79, 172, 254, 0.08);
	}

	body.ui-reboot .hud-header > .ui-hud-top-row .ng-city-switcher-btn {
		width: auto;
		min-width: 104px;
		padding: 0 12px;
	}

	body.ui-reboot .hud-header > .ui-hud-top-row .ng-missions-icon:hover,
	body.ui-reboot .hud-header > .ui-hud-top-row .ng-burger-menu-btn:hover,
	body.ui-reboot .hud-header > .ui-hud-top-row .ng-city-switcher-btn:hover,
	body.ui-reboot .hud-header > .ui-hud-top-row .ng-missions-icon:focus-visible,
	body.ui-reboot .hud-header > .ui-hud-top-row .ng-burger-menu-btn:focus-visible,
	body.ui-reboot .hud-header > .ui-hud-top-row .ng-city-switcher-btn:focus-visible {
		background: linear-gradient(180deg, rgba(191, 239, 255, 0.16), rgba(79, 172, 254, 0.09));
		border-color: rgba(191, 239, 255, 0.34);
		box-shadow: inset 0 0 16px rgba(191, 239, 255, 0.12), 0 0 18px rgba(79, 172, 254, 0.18);
		color: var(--ui-accent-cyan);
	}
}

@keyframes ng-hud-chrome-drift {
	0% { background-position: 0 0, 0 0, 0 0; opacity: 0.58; }
	50% { opacity: 0.84; }
	100% { background-position: 0 0, 72px 0, 0 31px; opacity: 0.58; }
}

@keyframes ng-hud-dataflow-bidir {
	0% { background-position: 0 50%, 0 50%, 0 50%; }
	100% { background-position: 168px 50%, -210px 50%, 0 50%; }
}

@keyframes ng-hud-dataflow-pulse {
	0%, 100% { opacity: 0.72; }
	50% { opacity: 1; }
}

@keyframes ng-hud-dataflow-dropout {
	0%, 12%, 29%, 46%, 68%, 100% { opacity: 1; }
	13% { opacity: 0.18; }
	14% { opacity: 0.92; }
	30% { opacity: 0; }
	31% { opacity: 0.86; }
	47% { opacity: 0.24; }
	48% { opacity: 0.98; }
	69% { opacity: 0.35; }
	70% { opacity: 1; }
}

@keyframes ng-hud-dataflow-jitter {
	0%, 100% { transform: translateY(-50%) translateX(0); }
	10% { transform: translateY(-50%) translateX(-1px); }
	20% { transform: translateY(-50%) translateX(1px); }
	30% { transform: translateY(-50%) translateX(-0.5px); }
	40% { transform: translateY(-50%) translateX(0.5px); }
}

@keyframes ngRadarNoiseShift {
	0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
	100% { background-position: 0 0, 0 22px, 30px 0, 0 0, 8px -6px, -6px 7px; }
}

@keyframes ngRadarNoiseFlicker {
	0%, 20%, 45%, 70%, 100% { opacity: 0.34; }
	21% { opacity: 0.26; }
	46% { opacity: 0.22; }
	71% { opacity: 0.3; }
}

@keyframes ngRadarScanlineSweep {
	0% { background-position: 0 -30px, 0 0, 0 0, 0 0, 0 0, 0 0; }
	100% { background-position: 0 calc(100% + 30px), 0 0, 0 0, 0 0, 0 0, 0 0; }
}

@keyframes ngRadarGlitchSlice {
	0%, 100% { transform: translateX(0); clip-path: inset(0 0 0 0); }
	16% { transform: translateX(-2px); clip-path: inset(8% 0 66% 0); }
	17% { transform: translateX(2px); clip-path: inset(52% 0 24% 0); }
	34% { transform: translateX(0); clip-path: inset(0 0 0 0); }
	49% { transform: translateX(2px); clip-path: inset(22% 0 58% 0); }
	50% { transform: translateX(-2px); clip-path: inset(68% 0 8% 0); }
	68% { transform: translateX(0); clip-path: inset(0 0 0 0); }
}

@keyframes ngRadarGlitchDrop {
	0%, 20%, 39%, 63%, 100% { opacity: 0.18; }
	21% { opacity: 0.08; }
	22% { opacity: 0.2; }
	40% { opacity: 0.02; }
	41% { opacity: 0.18; }
	64% { opacity: 0.1; }
	65% { opacity: 0.18; }
}

@media (max-width: 768px) {
	body.ui-reboot .hud-header > .ng-hud-connector {
		display: none;
	}

	body.ui-reboot .hud-header > .ng-header-primary.ng-header-top-left,
	body.ui-reboot .hud-header > .ui-hud-micro,
	body.ui-reboot .hud-header > .ui-hud-top-row {
		border: 1px solid rgba(191, 239, 255, 0.18);
		background: linear-gradient(180deg, rgba(10, 20, 30, 0.86), rgba(5, 10, 21, 0.7));
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 22px rgba(0, 0, 0, 0.26);
		border-radius: 8px;
	}
}

/* ====================================================================
 *  ADMIN GODMODE BUTTONS
 * ==================================================================== */
.ng-godmode-btn {
	background: #b91c1c;
	color: #fff;
	border: 1px solid #f87171;
	border-radius: 4px;
	padding: 2px 8px;
	font-size: 0.7rem;
	font-weight: 700;
	cursor: pointer;
	margin-left: 6px;
	white-space: nowrap;
	transition: background 0.15s, box-shadow 0.15s;
}
.ng-godmode-btn:hover:not(:disabled) {
	background: #dc2626;
	box-shadow: 0 0 8px rgba(248, 113, 113, 0.6);
}
.ng-godmode-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ====================================================================
 *  ADMIN DEBUG BAR (Level-Up / Test-Trigger, nur fuer Admins sichtbar)
 * ==================================================================== */
.ng-admin-debug-bar {
	position: fixed;
	bottom: 24px;
	left: 24px;
	z-index: 9800;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.ng-admin-debug-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: rgba(15, 10, 30, 0.88);
	border: 1px solid rgba(167, 139, 250, 0.45);
	border-radius: 6px;
	color: #c4b5fd;
	font-size: 0.72rem;
	font-weight: 600;
	cursor: pointer;
	backdrop-filter: blur(8px);
	transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
	white-space: nowrap;
	box-shadow: 0 0 8px rgba(139, 92, 246, 0.2);
	line-height: 1.4;
}
.ng-admin-debug-btn i {
	font-size: 1rem;
	color: #a78bfa;
}
.ng-admin-debug-btn:hover {
	background: rgba(139, 92, 246, 0.2);
	border-color: #a78bfa;
	box-shadow: 0 0 16px rgba(139, 92, 246, 0.5);
	color: #ede9fe;
}
.ng-admin-debug-btn:hover i {
	color: #ddd6fe;
}

/* ====================================================================
 *  TERMINAL LOG MODAL – gleiche Glass-/Token-Sprache wie NG-Modals
 *  (Lesbarkeit + holografisches HUD; Terminal-Charakter bleibt erhalten)
 * ==================================================================== */
.ng-terminal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 99000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	transition: opacity 0.24s ease, background 0.24s ease, backdrop-filter 0.24s ease;
	opacity: 0;
	pointer-events: none;
}
.ng-terminal-backdrop.is-visible {
	opacity: 1;
	pointer-events: auto;
	background: radial-gradient(circle at 50% 35%, rgba(7, 14, 26, 0.35), rgba(2, 6, 12, 0.82));
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.ng-terminal-backdrop.is-closing {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.24s ease;
}

.ng-terminal-card {
	position: relative;
	width: min(1060px, 95vw);
	max-height: 90vh;
	display: flex;
	flex-direction: row;
	background: linear-gradient(155deg, rgba(10, 20, 30, 0.88), rgba(6, 12, 22, 0.78));
	border: var(--ui-glass-border);
	border-radius: 14px;
	backdrop-filter: blur(20px) saturate(1.25);
	-webkit-backdrop-filter: blur(20px) saturate(1.25);
	box-shadow:
		0 16px 44px rgba(0, 0, 0, 0.5),
		0 0 28px rgba(79, 172, 254, 0.14),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
	color: var(--ui-accent-cyan);
	overflow: hidden;
	transform: translateY(12px) scale(0.97);
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
}

/* ─── Sidebar (Tabs links) ─── */
.ng-terminal-sidebar {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	width: 150px;
	position: relative;
	z-index: 2;
	border-right: 1px solid rgba(191, 239, 255, 0.18);
	background: linear-gradient(180deg, rgba(8, 16, 26, 0.72), rgba(6, 12, 20, 0.55));
	overflow-y: auto;
	scrollbar-width: none;
}
.ng-terminal-sidebar::-webkit-scrollbar { display: none; }

/* ─── Main content area ─── */
.ng-terminal-main {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	position: relative;
	z-index: 2;
	overflow: hidden;
	background: linear-gradient(180deg, rgba(6, 12, 22, 0.35), rgba(4, 10, 18, 0.2));
}
.ng-terminal-backdrop.is-visible .ng-terminal-card {
	transform: translateY(0) scale(1);
}

/* Dezentes Scanline-Overlay (Terminal-Feeling, weniger „eigenes Theme“) */
.ng-terminal-card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		0deg,
		transparent,
		transparent 2px,
		rgba(0, 0, 0, 0.04) 2px,
		rgba(0, 0, 0, 0.04) 4px
	);
	pointer-events: none;
	z-index: 1;
	border-radius: 14px;
}

/* ─── Header ─── */
.ng-terminal-header {
	border-bottom: 1px solid rgba(191, 239, 255, 0.22);
	background: linear-gradient(180deg, rgba(191, 239, 255, 0.1), rgba(7, 14, 26, 0.15));
}
.ng-terminal-title-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
}
.ng-terminal-title-icon {
	font-size: 1.3rem;
	color: var(--ui-accent-cyan);
	filter: drop-shadow(0 0 8px rgba(191, 239, 255, 0.35));
}
.ng-terminal-title {
	font-family: 'Roboto Mono', 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ui-accent-cyan);
	text-shadow: 0 0 12px rgba(191, 239, 255, 0.25);
	flex: 1;
}
.ng-terminal-close {
	background: rgba(8, 16, 28, 0.6);
	border: 1px solid rgba(79, 172, 254, 0.24);
	border-radius: 10px;
	color: rgba(79, 172, 254, 0.86);
	font-size: 1.1rem;
	cursor: pointer;
	padding: 4px 10px;
	transition: color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.ng-terminal-close:hover {
	color: var(--ui-accent-cyan);
	border-color: var(--ui-accent-cyan);
	box-shadow: 0 0 14px rgba(191, 239, 255, 0.22);
}

/* ─── Tabs (vertical in sidebar) ─── */
.ng-terminal-tabs {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 8px 0;
}

.ng-terminal-tab {
	background: transparent;
	border: none;
	border-left: 3px solid transparent;
	color: rgba(79, 172, 254, 0.62);
	font-family: 'Roboto Mono', 'JetBrains Mono', 'Fira Code', monospace;
	font-size: 0.7rem;
	font-weight: 500;
	padding: 8px 12px;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
	letter-spacing: 0.02em;
	text-align: left;
	display: flex;
	align-items: center;
	gap: 6px;
}
.ng-terminal-tab:hover {
	color: var(--ui-accent-cyan);
	background: rgba(191, 239, 255, 0.06);
}
.ng-terminal-tab.is-active {
	color: var(--ui-accent-cyan);
	background: rgba(191, 239, 255, 0.1);
	border-left-color: var(--ui-accent-cyan);
	text-shadow: 0 0 10px rgba(191, 239, 255, 0.2);
}
.ng-terminal-tab i {
	font-size: 0.75rem;
	margin-right: 2px;
}

/* ─── Status Bar ─── */
.ng-terminal-status {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 20px;
	font-family: 'Roboto Mono', 'JetBrains Mono', 'Fira Code', monospace;
	font-size: 0.7rem;
	color: var(--ui-accent-blue);
	border-bottom: 1px solid rgba(191, 239, 255, 0.12);
	letter-spacing: 0.03em;
}
.ng-terminal-status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(79, 172, 254, 0.45);
	flex-shrink: 0;
	transition: background 0.3s ease, box-shadow 0.3s ease;
}
.ng-terminal-status-dot.is-online {
	background: #4ade80;
	box-shadow: 0 0 8px rgba(74, 222, 128, 0.45);
}
.ng-terminal-status-dot.is-loading {
	background: var(--ui-alert-orange);
	animation: ng-terminal-blink 1s ease-in-out infinite;
}
.ng-terminal-status-dot.is-error {
	background: #f43f5e;
}
@keyframes ng-terminal-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: .3; }
}

/* ─── Body / Output ─── */
.ng-terminal-body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 12px 16px;
	min-height: 200px;
	max-height: calc(90vh - 200px);
}
.ng-terminal-body::-webkit-scrollbar { width: 6px; }
.ng-terminal-body::-webkit-scrollbar-track { background: transparent; }
.ng-terminal-body::-webkit-scrollbar-thumb {
	background: rgba(191, 239, 255, 0.2);
	border-radius: 3px;
}

.ng-terminal-output {
	font-family: 'Roboto Mono', 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
	font-size: 0.78rem;
	line-height: 1.7;
}

/* ─── Log Lines ─── */
.ng-terminal-line {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 2px 6px;
	border-radius: 3px;
	transition: background 0.1s ease;
	flex-wrap: wrap;
}
.ng-terminal-line:hover {
	background: rgba(191, 239, 255, 0.05);
}
.ng-terminal-line.is-active {
	background: rgba(191, 239, 255, 0.08);
	border-left: 2px solid var(--ui-accent-cyan);
	padding-left: 4px;
}
.ng-terminal-line.is-unread {
	background: rgba(255, 140, 0, 0.08);
	border-left: 2px solid var(--ui-alert-orange);
	padding-left: 4px;
}

.ng-terminal-line__time {
	color: rgba(79, 172, 254, 0.65);
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
	min-width: 38px;
}
.ng-terminal-line__type {
	font-weight: 700;
	font-size: 0.72rem;
	flex-shrink: 0;
	min-width: 42px;
}
.ng-terminal-line__col-name {
	color: var(--ui-accent-cyan);
	font-weight: 500;
	flex-shrink: 0;
}
.ng-terminal-line__col-detail {
	color: var(--ui-accent-blue);
	font-size: 0.74rem;
	flex-shrink: 0;
}
.ng-terminal-line__col-action {
	color: rgba(79, 172, 254, 0.5);
	font-size: 0.72rem;
	margin-left: auto;
	text-align: right;
	flex-shrink: 0;
}
.ng-terminal-line__col-action i {
	font-size: .8rem;
	vertical-align: -1px;
}

/* ─── Date Separator ─── */
.ng-terminal-date-sep {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 10px 0 6px;
	padding: 0 4px;
}
.ng-terminal-date-sep__line {
	flex: 1;
	height: 1px;
	background: rgba(191, 239, 255, 0.18);
}
.ng-terminal-date-sep__text {
	font-family: 'Roboto Mono', 'JetBrains Mono', 'Fira Code', monospace;
	font-size: 0.68rem;
	color: rgba(79, 172, 254, 0.75);
	letter-spacing: 0.06em;
	white-space: nowrap;
}

/* ─── Empty State ─── */
.ng-terminal-empty {
	text-align: center;
	color: rgba(79, 172, 254, 0.45);
	padding: 40px 20px;
	font-family: 'Roboto Mono', 'JetBrains Mono', 'Fira Code', monospace;
	font-size: 0.82rem;
}

/* ─── Counter ─── */
.ng-terminal-counter {
	font-family: 'Roboto Mono', 'JetBrains Mono', 'Fira Code', monospace;
	font-size: 0.68rem;
	color: rgba(79, 172, 254, 0.5);
	text-align: right;
	padding: 6px 16px 10px;
	border-top: 1px solid rgba(191, 239, 255, 0.12);
	letter-spacing: 0.03em;
}

/* ─── Responsive ─── */
@media (max-width: 640px) {
	.ng-terminal-card {
		width: 100vw;
		max-height: 100vh;
		border-radius: 0;
		flex-direction: column;
	}
	.ng-terminal-card::after {
		border-radius: 0;
	}
	.ng-terminal-sidebar {
		width: auto;
		flex-direction: row;
		border-right: none;
		border-bottom: 1px solid rgba(191, 239, 255, 0.18);
		overflow-x: auto;
	}
	.ng-terminal-tabs {
		flex-direction: row;
		padding: 4px 8px;
		gap: 2px;
	}
	.ng-terminal-tab {
		border-left: none;
		border-bottom: 2px solid transparent;
		padding: 4px 8px;
		font-size: .62rem;
	}
	.ng-terminal-tab.is-active {
		border-left-color: transparent;
		border-bottom-color: var(--ui-accent-cyan);
	}
	.ng-terminal-line {
		font-size: .72rem;
		gap: 4px;
	}
}

/* ====================================================================
 *  GAME INFO MODAL
 * ==================================================================== */
.ng-game-info-modal {
	display: flex;
	flex-direction: row;
	gap: 0;
	max-height: 70vh;
	overflow: hidden;
}
.ng-info-tabs {
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-right: 1px solid rgba(255,255,255,.08);
	border-bottom: none;
	flex-shrink: 0;
	padding: 4px 0;
	overflow-y: auto;
	min-width: 140px;
}
.ng-info-tab {
	background: none;
	border: none;
	color: rgba(255,255,255,.5);
	font-size: .82rem;
	font-weight: 500;
	padding: 9px 14px;
	cursor: pointer;
	border-left: 3px solid transparent;
	border-bottom: none;
	transition: color .2s, border-color .2s, background .2s;
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	text-align: left;
}
.ng-info-tab:hover { color: rgba(255,255,255,.8); background: rgba(255,255,255,.03); }
.ng-info-tab.is-active {
	color: #fff;
	border-left-color: var(--color-accent, #D97706);
	background: rgba(255,255,255,.05);
}
.ng-info-panel {
	padding: 8px 16px;
	overflow-y: auto;
	flex: 1;
	min-width: 0;
}
.ng-info-section {
	margin-bottom: 24px;
}
.ng-info-h3 {
	font-size: .9rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--color-accent, #D97706);
	margin: 0 0 10px;
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(255,255,255,.06);
}
.ng-info-formula {
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 6px;
	padding: 10px 14px;
	font-family: var(--font-mono, monospace);
	font-size: .82rem;
	color: rgba(255,255,255,.85);
	margin: 8px 0;
	line-height: 1.5;
}
.ng-info-formula sup {
	font-size: .7em;
	vertical-align: super;
}
.ng-info-note {
	font-size: .78rem;
	color: rgba(255,255,255,.45);
	margin: 6px 0 10px;
	line-height: 1.4;
}
.ng-info-list {
	list-style: none;
	padding: 0;
	margin: 8px 0;
}
.ng-info-list li {
	padding: 4px 0 4px 16px;
	position: relative;
	font-size: .82rem;
	color: rgba(255,255,255,.7);
}
.ng-info-list li::before {
	content: '›';
	position: absolute;
	left: 0;
	color: var(--color-accent, #D97706);
	font-weight: bold;
}
.ng-info-tbl {
	width: 100%;
	border-collapse: collapse;
	font-size: .78rem;
	margin: 6px 0;
}
.ng-info-tbl th {
	text-align: left;
	padding: 6px 10px;
	font-weight: 600;
	color: rgba(255,255,255,.6);
	text-transform: uppercase;
	font-size: .72rem;
	letter-spacing: .03em;
	border-bottom: 1px solid rgba(255,255,255,.1);
	white-space: nowrap;
}
.ng-info-tbl td {
	padding: 5px 10px;
	color: rgba(255,255,255,.78);
	border-bottom: 1px solid rgba(255,255,255,.04);
	white-space: nowrap;
}
.ng-info-tbl tbody tr:hover td {
	background: rgba(255,255,255,.03);
}
.ng-info-tbl td:first-child {
	color: rgba(255,255,255,.9);
	font-weight: 500;
}
@media (max-width: 600px) {
	.ng-game-info-modal { flex-direction: column; max-height: 60vh; }
	.ng-info-tabs { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); min-width: 0; gap: 0; padding: 0; overflow-y: visible; }
	.ng-info-tab { padding: 6px 8px; font-size: .75rem; border-left: none; border-bottom: 2px solid transparent; white-space: normal; }
	.ng-info-tab.is-active { border-left-color: transparent; border-bottom-color: var(--color-accent, #D97706); background: none; }
	.ng-info-panel { padding: 8px 0; }
	.ng-info-tbl { font-size: .7rem; }
	.ng-info-tbl th, .ng-info-tbl td { padding: 4px 6px; }
}

/* ================================================================
 *  COMMANDER SKILL-TREE (Phase 5)
 * ================================================================ */

/* Skillpoint-Bild: Inline-Icon als Ersatz für Text-Abkürzung "SP" */
.ng-sp-icon {
    display: inline-block;
    width: 28px;
    height: 28px;
    vertical-align: middle;
    object-fit: contain;
    filter: drop-shadow(0 0 5px rgba(217, 119, 6, .85)) drop-shadow(0 0 10px rgba(217, 119, 6, .4));
    animation: ng-sp-pulse 2.4s ease-in-out infinite;
    position: relative;
    top: -1px;
}
.ng-sp-icon--sm {
    width: 22px;
    height: 22px;
}
.ng-sp-icon--lg {
    width: 44px;
    height: 44px;
    filter: drop-shadow(0 0 8px rgba(217, 119, 6, .9)) drop-shadow(0 0 18px rgba(217, 119, 6, .5));
}
@keyframes ng-sp-pulse {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(217, 119, 6, .75)) drop-shadow(0 0 8px rgba(217, 119, 6, .3)); }
    50%       { filter: drop-shadow(0 0 8px rgba(217, 119, 6, 1))   drop-shadow(0 0 16px rgba(217, 119, 6, .6)); }
}

.ng-skills-sp-badge {
    float: right;
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    border-radius: 0;
    padding: 4px 4px 0 0;
    box-shadow: none;
}
.ng-skills-sp-badge__icon-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
    /* ↕ Vertikale Position des gesamten Badge-Icons anpassen: */
    top: -16px; /* negativer Wert = nach oben, positiver = nach unten */
}
.ng-skills-sp-badge .ng-sp-icon {
    width: 64px;  /* ← Icon-Breite hier ändern */
    height: 64px; /* ← Icon-Höhe hier ändern (immer gleich wie width) */
    top: 0;
    animation: none;
    filter: drop-shadow(0 0 8px rgba(217, 119, 6, .9));
}
.ng-skills-sp-badge__count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--color-accent, #D97706);
    color: var(--ui-accent-cyan);
    font-size: .65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}

.ng-skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 8px;
}

.ng-skill-card {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow .3s, border-color .3s;
}
.ng-skill-card:hover { border-color: rgba(255,255,255,.15); }
.ng-skill-card.is-maxed { border-color: rgba(217, 119, 6, .3); }
.ng-skill-card--glow {
    animation: ng-skill-glow .9s ease-out;
}
@keyframes ng-skill-glow {
    0%   { box-shadow: 0 0 0 0 rgba(217, 119, 6, .6); }
    40%  { box-shadow: 0 0 20px 4px rgba(217, 119, 6, .35); }
    100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0); }
}

.ng-skill-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ng-skill-card__icon {
    font-size: 1.6rem;
    color: var(--color-accent, #D97706);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(217, 119, 6, .1);
    border-radius: 10px;
    flex-shrink: 0;
}
.ng-skill-card__titles { display: flex; flex-direction: column; gap: 2px; }
.ng-skill-card__name {
    font-size: var(--fs-13, .85rem);
    font-weight: 600;
    color: var(--color-primary, #e0e0e8);
    letter-spacing: .5px;
}
.ng-skill-card__cat {
    font-size: var(--fs-10, .65rem);
    color: var(--color-dim, #ffffff);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ng-skill-card__desc {
    font-size: var(--fs-11, .7rem);
    color: var(--color-dim, #ffffff);
    line-height: 1.5;
    margin: 0;
}

.ng-skill-card__progress { display: flex; flex-direction: column; gap: 6px; }
.ng-skill-card__bar {
    height: 6px;
    background: rgba(255,255,255,.06);
    border-radius: 3px;
    overflow: hidden;
}
.ng-skill-card__bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent, #D97706), #f59e0b);
    border-radius: 3px;
    transition: width .4s ease;
}
.ng-skill-card__level {
    font-size: var(--fs-11, .7rem);
    color: var(--color-dim, #ffffff);
    text-align: right;
}

.ng-skill-card__bonus {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.ng-skill-card__bonus-val {
    font-size: var(--fs-12, .78rem);
    font-weight: 600;
    color: #34d399;
}
.ng-skill-card__bonus-val.dim { color: var(--color-dim, #ffffff); font-weight: 400; }
.ng-skill-card__bonus-next {
    font-size: var(--fs-10, .65rem);
    color: var(--color-dim, #ffffff);
}

.ng-skill-card__btn {
    margin-top: auto;
    padding: 8px 16px;
    border: 1px solid rgba(217, 119, 6, .4);
    border-radius: 8px;
    background: rgba(217, 119, 6, .12);
    color: var(--color-accent, #D97706);
    font-size: var(--fs-11, .7rem);
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, border-color .2s;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* SP-Kosten-Icon im Upgrade-Button: Zahl schwebt oben rechts über dem Bild */
.ng-sp-cost-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
    flex-shrink: 0;
}
.ng-sp-cost-wrap .ng-sp-icon {
    width: 28px;
    height: 28px;
    top: 0;
    animation: none;
    filter: drop-shadow(0 0 5px rgba(217, 119, 6, .8));
}
.ng-skill-card__btn:hover:not(.is-disabled) {
    background: rgba(217, 119, 6, .25);
    border-color: rgba(217, 119, 6, .6);
}
.ng-skill-card__btn.is-disabled {
    opacity: .4;
    cursor: not-allowed;
}

@media (max-width: 600px) {
    .ng-skills-grid { grid-template-columns: 1fr; gap: 12px; }
    .ng-skill-card { padding: 14px; }
}

/* ===================================================================
   Alliance Megaprojekt (Phase 6)
   =================================================================== */

.ng-goal-widget {
    padding: 20px;
    margin-bottom: var(--space-12, 12px);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--ui-accent-cyan);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
    transition: border-color .3s;
}

.ng-goal-widget:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.ng-goal-loading {
    text-align: center;
    padding: 20px;
    color: var(--color-dim, #ffffff);
    font-size: var(--fs-12, .78rem);
}

.ng-goal-error {
    text-align: center;
    padding: var(--space-12, 12px);
    color: var(--ui-alert-orange);
    font-size: var(--fs-12, .78rem);
}

.ng-goal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-12, 12px);
    padding-bottom: var(--space-8, 8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-wrap: wrap;
    gap: var(--space-8, 8px);
}

.ng-goal-title {
    font-size: var(--fs-13, .85rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
	color: #fff;
}

.ng-goal-title i {
    margin-right: var(--space-4, 4px);
    color: var(--color-accent, #D97706);
}

.ng-goal-timer {
    font-size: var(--fs-11, .7rem);
    font-variant-numeric: tabular-nums;
    color: var(--color-dim, #ffffff);
    white-space: nowrap;
}

.ng-goal-timer i {
    margin-right: 2px;
}

/* Progress Bar */
.ng-goal-progress-wrap {
    margin-bottom: var(--space-12, 12px);
}

.ng-goal-progress-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}

.ng-goal-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent, #D97706), #f59e0b);
    border-radius: 3px;
    transition: width .4s ease;
    min-width: 0;
}

.ng-goal-progress-fill.is-complete {
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
}

.ng-goal-progress-label {
    text-align: right;
    font-size: var(--fs-11, .7rem);
    color: var(--color-dim, #ffffff);
    margin-top: var(--space-4, 4px);
    font-variant-numeric: tabular-nums;
}

/* Donate Form */
.ng-goal-donate-form {
    display: flex;
    gap: var(--space-8, 8px);
    align-items: center;
    margin-bottom: var(--space-8, 8px);
}

.ng-goal-donate-form .ng-input {
    flex: 1;
    max-width: 200px;
}

.ng-goal-donate-form .ng-button {
    border: 1px solid rgba(217, 119, 6, .4);
    border-radius: 8px;
    background: rgba(217, 119, 6, .12);
    color: var(--color-accent, #D97706);
    font-weight: 600;
    font-size: var(--fs-11, .7rem);
}

.ng-goal-donate-form .ng-button:hover {
    background: rgba(217, 119, 6, .25);
    border-color: rgba(217, 119, 6, .6);
}

/* Hinweistext unterhalb des Spenden-Eingabefelds (Mindestmenge).
   Standardmaessig ausgeblendet, wird per .is-visible bei Verstoss eingeblendet.
   visibility:hidden + height:0 verhindert einen Layout-Sprung. */
.ng-goal-donate-hint {
    font-size: var(--fs-11, .7rem);
    color: var(--color-danger, #f87171);
    margin-bottom: var(--space-12, 12px);
    line-height: 1.5;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    margin-top: 0;
}
.ng-goal-donate-hint.is-visible {
    visibility: visible;
    height: auto;
    margin-top: 4px;
}

.ng-goal-my-contrib {
    font-size: var(--fs-11, .7rem);
    color: var(--color-dim, #ffffff);
    margin-bottom: var(--space-12, 12px);
}

.ng-goal-my-contrib strong {
    color: var(--ui-accent-cyan);
}

/* Completion Message */
.ng-goal-complete-msg {
    text-align: center;
    padding: var(--space-12, 12px);
    background: rgba(52, 211, 153, 0.08);
    border: 1px solid rgba(52, 211, 153, 0.2);
    border-radius: 12px;
    color: #34d399;
    font-weight: 600;
    font-size: var(--fs-12, .78rem);
    margin-bottom: var(--space-12, 12px);
}

.ng-goal-complete-msg i {
    margin-right: var(--space-4, 4px);
}

/* Leaderboard */
.ng-goal-leaderboard {
    margin-top: var(--space-12, 12px);
    padding-top: var(--space-12, 12px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ng-goal-lb-title {
    font-size: var(--fs-10, .65rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-dim, #ffffff);
    margin-bottom: var(--space-8, 8px);
}

.ng-goal-table {
    font-size: var(--fs-11, .7rem);
    width: 100%;
    border-collapse: collapse;
}

.ng-goal-table th {
    color: var(--color-dim, #ffffff);
    font-size: var(--fs-10, .65rem);
    text-transform: uppercase;
    letter-spacing: .5px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-weight: 600;
}

.ng-goal-table td {
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--ui-accent-cyan);
}

.ng-goal-table td:last-child, .ng-goal-table th:last-child {
    text-align: right;
}

.ng-goal-top3 td {
    color: var(--color-accent, #D97706);
    font-weight: 600;
}

.ng-input-error {
    border-color: var(--ui-alert-orange) !important;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);
}

/* Info Button */
.ng-goal-info-btn {
    background: none;
    border: none;
    color: var(--ui-accent-cyan);
    cursor: pointer;
    font-size: var(--fs-14, 14px);
    padding: 2px 6px;
    margin-left: var(--space-4, 4px);
    border-radius: 50%;
    transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
    vertical-align: middle;
    line-height: 1;
}
.ng-goal-info-btn:hover {
    color: var(--color-accent);
    background: rgba(217, 119, 7, 0.12);
}

/* Info-Modal-Inhalt des Megaprojekts \u2013 nutzt das Standard-NG_UI-Modal,
   daher reichen Selektoren auf den Inhalts-Wrapper .ng-goal-info. */
.ng-goal-info p {
    margin: 0 0 var(--space-12, 12px);
    line-height: 1.6;
}
.ng-goal-info h4 {
    font-size: var(--fs-13, 13px);
    font-weight: 700;
    margin: var(--space-12, 12px) 0 var(--space-4, 4px);
    color: var(--color-accent);
}
.ng-goal-info h4 i {
    margin-right: 4px;
}
.ng-goal-info ul {
    margin: 0 0 var(--space-8, 8px);
    padding-left: 20px;
}
.ng-goal-info li {
    margin-bottom: var(--space-4, 4px);
    line-height: 1.6;
}

@media (max-width: 600px) {
    .ng-goal-header { flex-direction: column; align-items: flex-start; }
    .ng-goal-donate-form .ng-input { max-width: 100%; }
}

/* ==========================================================================
   Avatar-Modal – Auswahl-System
   ========================================================================== */

.ng-avatar-modal-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 50% 35%, rgba(7, 14, 26, 0.35), rgba(2, 6, 12, 0.82));
    z-index: 1100;
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.24s ease, visibility 0.24s ease;
}
.ng-avatar-modal-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.ng-avatar-modal {
    display: flex;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%) scale(0.97);
    width: min(720px, 95vw);
    max-height: 90vh;
    overflow: hidden;
    flex-direction: column;
    background: linear-gradient(155deg, rgba(10, 20, 30, 0.82), rgba(6, 12, 22, 0.72));
    border: var(--ui-glass-border);
    border-radius: 14px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5), 0 0 28px rgba(79, 172, 254, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    z-index: 1101;
    color: var(--ui-accent-cyan);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s ease;
}
.ng-avatar-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.ng-avatar-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(191, 239, 255, 0.24);
    background: linear-gradient(180deg, rgba(191, 239, 255, 0.12), rgba(7, 14, 26, 0.2));
    flex-shrink: 0;
}
.ng-avatar-modal-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ui-accent-cyan);
    margin: 0;
}
.ng-avatar-modal-close {
    background: none;
    border: none;
    color: rgba(79, 172, 254, 0.86);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    transition: color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    border: 1px solid rgba(79, 172, 254, 0.24);
    background: rgba(8, 16, 28, 0.6);
    border-radius: 10px;
}
.ng-avatar-modal-close:hover {
    color: var(--ui-accent-cyan);
    border-color: var(--ui-accent-cyan);
    box-shadow: 0 0 14px rgba(191, 239, 255, 0.24);
}

/* Tabs */
.ng-avatar-tabs {
    display: flex;
    border-bottom: 1px solid var(--color-border, #2a3a40);
    flex-shrink: 0;
}
.ng-avatar-tab {
    flex: 1;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 16px;
    color: var(--color-text-muted, #6e7681);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.ng-avatar-tab:hover { color: var(--color-text, #c9d1d9); }
.ng-avatar-tab.is-active {
    color: var(--color-accent, #7dd3c0);
    border-bottom-color: var(--color-accent, #7dd3c0);
}

/* Modal Body */
.ng-avatar-modal-body {
    overflow-y: auto;
    flex: 1;
    padding: 16px 20px;
}

.ng-avatar-modal-footer {
    padding: 10px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: var(--fs-12);
    color: var(--ui-accent-cyan);
    text-align: center;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}
.ng-avatar-tab-panel { display: none; }
.ng-avatar-tab-panel.is-active { display: block; }

/* Avatar-Grid */
.ng-avatar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
}
.ng-avatar-item {
    position: relative;
    cursor: pointer;
    border-radius: 6px;
    border: 2px solid transparent;
    overflow: hidden;
    transition: border-color 0.15s, transform 0.1s;
    background: var(--color-bg-card, #161b22);
}
.ng-avatar-item:hover { border-color: var(--color-accent, #7dd3c0); transform: scale(1.02); }
.ng-avatar-item.is-current { border-color: var(--color-accent, #7dd3c0); box-shadow: 0 0 0 2px rgba(125, 211, 192, 0.3); }

.ng-avatar-item-img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.ng-avatar-flavor {
    padding: 6px 8px;
    font-size: 0.72rem;
    color: var(--color-text-muted, #6e7681);
    line-height: 1.4;
}
.ng-avatar-level-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.7);
    color: var(--color-accent, #7dd3c0);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 3px;
}

.ng-avatar-loading, .ng-avatar-empty, .ng-avatar-error {
    padding: 24px;
    text-align: center;
    color: var(--color-text-muted, #6e7681);
    font-size: 0.9rem;
}
.ng-avatar-error { color: #ef4444; }

.ng-avatar-select-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid #ef4444;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 0.85rem;
    color: #ef4444;
    margin-bottom: 12px;
}

/* ==========================================================================
   Level-Up Toast – Avatar freigeschaltet
   ========================================================================== */

.ng-avatar-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--color-bg-panel, #0d1117);
    border: 1px solid var(--color-accent, #7dd3c0);
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    z-index: 1200;
    opacity: 0;
    transform: translateX(120%);
    transition: opacity 0.35s ease, transform 0.35s ease;
    max-width: 300px;
}
.ng-avatar-toast.is-visible {
    opacity: 1;
    transform: translateX(0);
}
.ng-avatar-toast__img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--color-border, #2a3a40);
    flex-shrink: 0;
}
.ng-avatar-toast__text { flex: 1; }
.ng-avatar-toast__title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-accent, #7dd3c0);
}
.ng-avatar-toast__subtitle {
    font-size: 0.78rem;
    color: var(--color-text-muted, #6e7681);
    margin-top: 2px;
}

/* ==========================================================================
   Tutorial-Dock-Badge (orangener Punkt)
   ========================================================================== */

/* ==========================================================================
   Avatar-Auswahl in Einstellungen (Tab "Avatar")
   ========================================================================== */

.ng-pref-avatar-select {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    padding: 4px 0 12px;
}

/* ══════════════════════════════════════════════════════
 *  NACHRICHTEN-MODAL
 * ══════════════════════════════════════════════════════ */

/* Tab-Leiste im Modal-Header */
.ng-msg-tabs {
	display: flex;
	gap: 4px;
	flex: 1;
	margin: 0 12px 0 0;
}
.ng-msg-tab {
	padding: 5px 12px;
	border-radius: 8px;
	border: 1px solid transparent;
	background: transparent;
	color: rgba(255,255,255,.5);
	font-size: var(--fs-body);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 5px;
	transition: background .2s, color .2s, border-color .2s;
	white-space: nowrap;
}
.ng-msg-tab:hover {
	background: rgba(255,255,255,.06);
	color: var(--ui-accent-cyan);
}
.ng-msg-tab.is-active {
	background: rgba(96,165,250,.12);
	border-color: rgba(96,165,250,.35);
	color: #60a5fa;
}
.ng-msg-tab-compose.is-active {
	background: rgba(167,139,250,.12);
	border-color: rgba(167,139,250,.35);
	color: #a78bfa;
}
.ng-msg-tab-combat.is-active {
	background: rgba(220,38,38,.12);
	border-color: rgba(220,38,38,.35);
	color: #f87171;
}

/* Lade-Indicator */
.ng-msg-modal-loading {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 40px;
	color: rgba(255,255,255,.4);
	gap: 8px;
	font-size: var(--fs-h3);
}

/* Nachrichtenliste */
.ng-msg-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.ng-msg-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	border-radius: 8px;
	background: rgba(255,255,255,.03);
	border: 1px solid rgba(255,255,255,.06);
	cursor: pointer;
	transition: background .2s, border-color .2s;
}
.ng-msg-item:hover {
	background: rgba(96,165,250,.08);
	border-color: rgba(96,165,250,.20);
}
.ng-msg-item.is-unread {
	border-left: 3px solid #60a5fa;
}
.ng-msg-item.ng-msg-item-deleted {
	opacity: 0;
	transform: translateX(20px);
	transition: opacity .3s, transform .3s;
	pointer-events: none;
}
.ng-msg-item-main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}
.ng-msg-item-name {
	font-size: var(--fs-body);
	font-weight: 600;
	color: var(--ui-accent-cyan);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ng-msg-item-subject {
	font-size: 11px;
	color: rgba(255,255,255,.5);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ng-msg-item-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
.ng-msg-unread-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #60a5fa;
	flex-shrink: 0;
}
.ng-msg-item-time {
	font-size: 11px;
	color: rgba(255,255,255,.35);
	white-space: nowrap;
}
.ng-msg-delete-btn {
	border: none;
	background: transparent;
	color: rgba(255,255,255,.3);
	cursor: pointer;
	padding: 4px 6px;
	border-radius: 6px;
	font-size: 14px;
	transition: color .2s, background .2s;
	display: flex;
	align-items: center;
}
.ng-msg-delete-btn:hover {
	color: #f87171;
	background: rgba(248,113,113,.12);
}

/* Leer-Zustand */
.ng-msg-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 40px;
	color: rgba(255,255,255,.35);
	font-size: var(--fs-h3);
}

/* Fehler */
.ng-msg-error {
	padding: 20px;
	color: #f87171;
	text-align: center;
}

.ng-msg-combat-summary {
	margin-bottom: 10px;
	padding: 8px 12px;
	border-radius: 10px;
	background: rgba(220,38,38,.08);
	border: 1px solid rgba(220,38,38,.18);
	color: #fca5a5;
	font-size: var(--fs-body);
}

.ng-msg-combat-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ng-msg-combat-item {
	width: 100%;
	text-align: left;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	cursor: pointer;
	transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.ng-msg-combat-item:hover {
	transform: translateY(-1px);
	border-color: rgba(220,38,38,.45);
	background: rgba(220,38,38,.14);
}

.ng-msg-combat-main {
	min-width: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ng-msg-combat-label {
	font-size: var(--fs-body);
	font-weight: 600;
	color: var(--ui-accent-cyan);
}

.ng-msg-combat-meta {
	font-size: var(--fs-12);
	color: rgba(255,255,255,.62);
}

.ng-msg-combat-new {
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(220,38,38,.14);
	border: 1px solid rgba(220,38,38,.28);
	color: #fca5a5;
	font-size: var(--fs-12);
	font-weight: 600;
	white-space: nowrap;
}

/* Pager */
.ng-msg-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 16px;
}
.ng-msg-pager-info {
	font-size: var(--fs-body);
	color: rgba(255,255,255,.45);
}

/* Zurück-Button in Detail-Ansicht */
.ng-msg-back-btn {
	border: none;
	background: transparent;
	color: rgba(255,255,255,.5);
	cursor: pointer;
	padding: 6px 0 12px 0;
	font-size: var(--fs-body);
	display: flex;
	align-items: center;
	gap: 5px;
	transition: color .2s;
}
.ng-msg-back-btn:hover { color: var(--ui-accent-cyan); }

/* Detail-Nachricht */
.ng-msg-detail { width: 100%; }

/* ── Verfassen ── */
.ng-msg-compose-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
}
.ng-msg-compose-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.ng-msg-compose-field-grow {
	flex: 1;
	min-height: 0;
}
.ng-msg-compose-label {
	font-size: 11px;
	color: rgba(255,255,255,.5);
	text-transform: uppercase;
	letter-spacing: .05em;
}
.ng-msg-compose-input {
	width: 100%;
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 8px;
	padding: 8px 12px;
	color: var(--ui-accent-cyan);
	font-size: var(--fs-body);
	outline: none;
	transition: border-color .2s;
	box-sizing: border-box;
}
.ng-msg-compose-input:focus {
	border-color: rgba(96,165,250,.5);
}
.ng-msg-compose-textarea {
	width: 100%;
	flex: 1;
	min-height: 120px;
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 8px;
	padding: 10px 12px;
	color: var(--ui-accent-cyan);
	font-size: var(--fs-body);
	outline: none;
	resize: vertical;
	transition: border-color .2s;
	box-sizing: border-box;
	font-family: inherit;
}
.ng-msg-compose-textarea:focus {
	border-color: rgba(96,165,250,.5);
}
.ng-msg-compose-actions {
	display: flex;
	gap: 8px;
}
.ng-msg-compose-status {
	padding: 8px 12px;
	border-radius: 8px;
	font-size: var(--fs-body);
}

/* Empfänger-Suche */
.ng-recipient-wrap { position: relative; }
.ng-msg-recipient-dropdown {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 1000;
	background: #1e2130;
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 8px;
	list-style: none;
	margin: 0;
	padding: 4px;
	max-height: 220px;
	overflow-y: auto;
}
.ng-msg-dropdown-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 10px;
	border-radius: 6px;
	cursor: pointer;
	font-size: var(--fs-body);
	color: var(--ui-accent-cyan);
	transition: background .15s;
}
.ng-msg-dropdown-item:hover { background: rgba(96,165,250,.12); }
.ng-msg-dropdown-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
}
.ng-msg-dropdown-group {
	padding: 6px 10px 2px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(255,255,255,.35);
	cursor: default;
	pointer-events: none;
	list-style: none;
}
.ng-msg-dropdown-group:not(:first-child) {
	border-top: 1px solid rgba(255,255,255,.07);
	margin-top: 4px;
	padding-top: 8px;
}
.ng-msg-tag {
	color: rgba(255,255,255,.45);
	font-size: 11px;
}
.ng-msg-dropdown-empty {
	padding: 10px;
	color: rgba(255,255,255,.4);
	font-size: var(--fs-body);
	text-align: center;
}
.ng-msg-selected-player {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	background: rgba(96,165,250,.08);
	border: 1px solid rgba(96,165,250,.25);
	border-radius: 8px;
}
.ng-msg-selected-name {
	flex: 1;
	font-size: var(--fs-body);
	color: var(--ui-accent-cyan);
}
.ng-msg-remove-recipient {
	border: none;
	background: transparent;
	color: rgba(255,255,255,.4);
	cursor: pointer;
	padding: 2px 4px;
	border-radius: 4px;
	font-size: 16px;
	line-height: 1;
	transition: color .2s;
}
.ng-msg-remove-recipient:hover { color: #f87171; }

@media (max-width: 480px) {
	.ng-msg-tabs { gap: 2px; }
	.ng-msg-tab { padding: 4px 8px; font-size: 11px; }
	.ng-msg-tab i { display: none; }
}

/* ==========================================================================
   Phase 9 Feinschliff: Modal-Content ohne Legacy-Grau
   - Trade-Shell + Preferences in Modals
   - Coord-Info/Profile in Modals
   ========================================================================== */
body.ui-reboot .ng-modal-backdrop .ng-center-panel, body.ui-reboot .ng-modal-backdrop .ng-center-panel > div, body.ui-reboot .ng-modal-backdrop .ng-center-panel .ng-widget, body.ui-reboot .ng-modal-backdrop .ng-center-panel .ng-pref-block.ng-widget {
	background: rgba(8, 16, 26, 0.58);
	border: 1px solid rgba(79, 172, 254, 0.22);
	color: var(--ui-accent-cyan);
}

body.ui-reboot .ng-modal-backdrop .ng-center-panel .ng-widget-title, body.ui-reboot .ng-modal-backdrop .ng-center-panel label, body.ui-reboot .ng-modal-backdrop .ng-center-panel .ng-pref-inline, body.ui-reboot .ng-modal-backdrop .ng-center-panel .ng-inline-muted {
	color: rgba(79, 172, 254, 0.82);
}

body.ui-reboot .ng-modal-backdrop .ng-center-panel .ng-pref-tabs {
	border-color: rgba(79, 172, 254, 0.22);
	background: rgba(8, 16, 26, 0.62);
}

body.ui-reboot .ng-modal-backdrop .ng-center-panel .ng-pref-tab {
	color: var(--ui-accent-blue);
}

body.ui-reboot .ng-modal-backdrop .ng-center-panel .ng-pref-tab:hover, body.ui-reboot .ng-modal-backdrop .ng-center-panel .ng-pref-tab.is-active {
	color: var(--ui-accent-cyan);
	background: rgba(191, 239, 255, 0.14);
}

body.ui-reboot .ng-modal-backdrop .ng-trade-shell .ng-trade-stat, body.ui-reboot .ng-modal-backdrop .ng-trade-shell .ng-trade-panel, body.ui-reboot .ng-modal-backdrop .ng-trade-shell .ng-trade-cost-row, body.ui-reboot .ng-modal-backdrop .ng-trade-shell .ng-fleet-item, body.ui-reboot .ng-modal-backdrop .ng-trade-shell .ng-status-item, body.ui-reboot .ng-modal-backdrop .ng-trade-shell .ng-system-status, body.ui-reboot .ng-modal-backdrop .ng-trade-shell .ng-trade-alert, body.ui-reboot .ng-modal-backdrop .ng-trade-shell .ng-trade-history-card {
	background: rgba(8, 16, 26, 0.58);
	border-color: rgba(79, 172, 254, 0.22);
	color: var(--ui-accent-cyan);
}

body.ui-reboot .ng-modal-backdrop .ng-trade-shell .ng-trade-label, body.ui-reboot .ng-modal-backdrop .ng-trade-shell .ng-trade-factor-label, body.ui-reboot .ng-modal-backdrop .ng-trade-shell .ng-trade-limit, body.ui-reboot .ng-modal-backdrop .ng-trade-shell .ng-trade-cost-meta, body.ui-reboot .ng-modal-backdrop .ng-trade-shell .ng-form-label, body.ui-reboot .ng-modal-backdrop .ng-trade-shell .ng-fleet-count, body.ui-reboot .ng-modal-backdrop .ng-trade-shell .ng-fleet-capacity, body.ui-reboot .ng-modal-backdrop .ng-trade-shell .ng-no-data, body.ui-reboot .ng-modal-backdrop .ng-trade-shell .ng-price-header, body.ui-reboot .ng-modal-backdrop .ng-trade-shell .ng-price-row {
	color: rgba(79, 172, 254, 0.84);
}

body.ui-reboot .ng-modal-backdrop .ng-trade-shell .ng-trade-value, body.ui-reboot .ng-modal-backdrop .ng-trade-shell .ng-trade-cost-value, body.ui-reboot .ng-modal-backdrop .ng-trade-shell .ng-trade-cost-label, body.ui-reboot .ng-modal-backdrop .ng-trade-shell .ng-fleet-name, body.ui-reboot .ng-modal-backdrop .ng-trade-shell .ng-trade-history-name, body.ui-reboot .ng-modal-backdrop .ng-trade-shell .ng-trade-history-state, body.ui-reboot .ng-modal-backdrop .ng-trade-shell .ng-trade-factor-value {
	color: var(--ui-accent-cyan);
}

body.ui-reboot .ng-modal-backdrop .ng-trade-shell .ng-trade-history-gridline {
	stroke: rgba(79, 172, 254, 0.24);
}

body.ui-reboot .ng-modal-backdrop .ng-trade-shell .ng-trade-history-line {
	stroke: rgba(191, 239, 255, 0.92);
}

body.ui-reboot .ng-modal-backdrop#ng-coord-info-modal .ng-player-profile {
	background: rgba(8, 16, 26, 0.62);
	border: 1px solid rgba(79, 172, 254, 0.22);
	color: var(--ui-accent-cyan);
}

body.ui-reboot .ng-modal-backdrop#ng-coord-info-modal .ng-player-profile__info p {
	color: var(--ui-accent-blue);
}

/* ==========================================================================
   Phase 10: Grid/Tile Runtime-States (Drag/Resize/Placeholder/Locked/Warning)
   ========================================================================== */
body.ng-dashboard-dragging .ng-dashboard-gridstack.grid-stack::before {
	background-image:
		linear-gradient(to right, rgba(79, 172, 254, 0.26) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(191, 239, 255, 0.08) 1px, transparent 1px);
	background-size: calc(100% / 12) 80px;
	opacity: 0.9;
}

.ng-cityview-dashboard.grid-stack .grid-stack-item.ui-draggable-dragging, .ng-dashboard-gridstack.grid-stack .grid-stack-item.ui-draggable-dragging {
	z-index: 70;
	filter: drop-shadow(0 0 14px rgba(191, 239, 255, 0.24));
}

.ng-cityview-dashboard.grid-stack .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content > .ng-cityview-card, .ng-dashboard-gridstack.grid-stack .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content > .ng-cityview-card {
	border-color: var(--ui-accent-cyan);
	box-shadow: 0 0 22px rgba(191, 239, 255, 0.24), 0 14px 30px rgba(0, 0, 0, 0.5);
}

body.ng-dashboard-dragging .ng-cityview-dashboard.grid-stack .grid-stack-placeholder > .placeholder-content, .ng-dashboard-gridstack.grid-stack .grid-stack-placeholder > .placeholder-content {
	border: 2px dashed rgba(191, 239, 255, 0.5);
	background: rgba(191, 239, 255, 0.1);
	box-shadow: inset 0 0 0 1px rgba(79, 172, 254, 0.2), 0 0 18px rgba(191, 239, 255, 0.2);
}

.grid-stack .ui-resizable-handle {
	background: rgba(8, 16, 26, 0.72);
	border: 1px solid rgba(79, 172, 254, 0.24);
	border-radius: 8px;
}

.grid-stack .ui-resizable-handle:hover {
	border-color: var(--ui-accent-cyan);
	box-shadow: 0 0 10px rgba(191, 239, 255, 0.2);
}

body.ui-reboot .ng-tile-system.is-locked, body.ui-reboot .ng-tile-building.is-locked, body.ui-reboot .ng-tile-tech.is-locked {
	border-color: rgba(255, 140, 0, 0.42);
	box-shadow: inset 0 0 0 1px rgba(255, 140, 0, 0.2);
}

body.ui-reboot .ng-tile-system.is-locked .ng-tile-locked-overlay, body.ui-reboot .ng-tile-building.is-locked .ng-tile-locked-overlay, body.ui-reboot .ng-tile-tech.is-locked .ng-tile-locked-overlay {
	background: linear-gradient(180deg, rgba(14, 20, 28, 0.78), rgba(10, 16, 24, 0.66));
	color: rgba(79, 172, 254, 0.86);
	border: 1px solid rgba(255, 140, 0, 0.28);
}

body.ui-reboot .ng-tile-system.is-researching, body.ui-reboot .ng-tile-system.is-active-hangar, body.ui-reboot .ng-tile-system.is-active-defense, body.ui-reboot .ng-tile-building.ng-tile-building-active {
	border-color: var(--ui-accent-cyan);
	box-shadow: 0 0 16px rgba(191, 239, 255, 0.18), inset 0 0 0 1px rgba(79, 172, 254, 0.16);
}

/* is-busy: anderer Cube der gleichen Section baut gerade – ausgegraut und nicht anklickbar */
.ng-tile-cube.is-busy {
	opacity: 0.4;
	filter: saturate(0.2);
	pointer-events: none;
	cursor: default;
}

.ng-tile-cube.is-busy .ng-cube-face {
	pointer-events: none;
}

body.ui-reboot .ng-tile-system.ng-tile-inactive[data-premise-missing="1"], body.ui-reboot .ng-tile-building.ng-tile-inactive[data-premise-missing="1"], body.ui-reboot .ng-tile-tech.ng-tile-inactive[data-premise-missing="1"] {
	border-color: rgba(255, 140, 0, 0.44);
	box-shadow: inset 0 0 0 1px rgba(255, 140, 0, 0.18);
}

/* ==========================================================================
   Utility-Klassen (Phase 6a) - ersetzen Inline-Styles in PHP/JS-Dateien.
   Strikt einzige Quelle der Wahrheit: keine Wiederholung in modules/*.css.
   ========================================================================== */

/* Sichtbarkeit: per Konvention darf .ng-hidden NICHT durch Spezifitaet
   ueberschrieben werden -> einzige dokumentierte !important-Ausnahme. */
.ng-hidden {
    display: none !important;
}

/* Semantische Textfarben (wiederkehrender Inline-Style style="color:...;") */
.ng-text-danger  { color: var(--ng-color-danger,  #ff5050); }
.ng-text-success { color: var(--ng-color-success, #4caf50); }
.ng-text-warning { color: var(--ng-color-warning, #ff8c00); }
.ng-text-muted   { color: var(--ng-color-muted,   #888); }

/* Inline-Aktion (kleine Aktions-Links neben Listentexten) */
.ng-inline-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    cursor: pointer;
}

/* Flex-Container Helfer */
.ng-flex     { display: flex; }
.ng-flex-col { display: flex; flex-direction: column; }

/* Phase 6e-2: Body-Scroll-Lock fuer Mobile-Burger-Menu (ng_header.php).
   Saubere Alternative zum frueheren Inline-Style 'overflow:hidden' in JS. */
.ng-body-no-scroll { overflow: hidden; }