/* ═══════════════════════════════════════════════════════════════
   RELOADED.CSS – Eigenstaendiges Stylesheet fuer das HUD-Cockpit-UI.
   Ersetzt design.css vollstaendig. Kein @import.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. CSS Custom Properties (Tokens) ── */
:root {
	--ui-bg-space: #020408;
	--ui-bg-vignette: #050a15;
	--ui-accent-cyan: #bfefff;
	--ui-accent-blue: #4facfe;
	--ui-alert-orange: #ff8c00;
	--ui-data-soft: #9fe8ff;
	--ui-glow-deep: #0b2a3d;
	--ui-radar-green: rgba(120, 220, 178, 0.55);
	--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;
	--badge-accent-bg: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 78%, #ffffff 22%) 0%, var(--color-accent) 100%);
	--badge-accent-color: #1f2937;
	--badge-accent-inset: inset 0 1px 0 rgba(255, 255, 255, 0.35);
	--badge-accent-shadow: 0 4px 12px rgba(0, 0, 0, 0.34), var(--badge-accent-inset);
	--badge-accent-border: rgba(15, 23, 42, 0.8);
	--badge-accent-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.24);
	--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: 'Orbitron';
	--font-display: var(--font-body);
	--font-heading: var(--font-body);
	--font-mono: var(--font-body);
	--font-terminal: 'Glass TTY VT220', 'Courier New', monospace;
	--fs-terminal-hud: 10px;
	--ng-tile-cube-width: 175px;
	--ng-tile-cube-aspect: 8 / 6;
	--ng-defense-columns-gap: 25px;
	--fs-h1: 30px;
	--fs-h2: 20px;
	--fs-h3: 14px;
	--fs-body: 12px;
	--fs-micro: 8px;
	--fs-8: var(--fs-micro);
	--fs-10: 10px;
	--fs-11: 11px;
	--fs-13: 13px;
	--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;
	/* HUD-spezifische Token */
	--hud-surface: rgba(6, 14, 24, 0.72);
	--hud-stroke: rgba(123, 214, 255, 0.22);
	--hud-stroke-soft: rgba(123, 214, 255, 0.12);
	--hud-glow: rgba(79, 172, 254, 0.16);
	--landing-login-corner-border: rgba(191, 239, 255, 0.5);
	--landing-footer-padding-y: var(--space-20);
	--ng-content-max-width: min(960px, 100%);
	/* Modal-Breiten: kompakt = Formulare/Verwaltung, default = SPA-Embed, wide/full = Tabellen/Kacheln */
	--ng-modal-width-compact: min(26rem, calc(100vw - 32px));
	--ng-modal-width-default: min(38rem, calc(100vw - 32px));
	--ng-modal-width-wide: min(52rem, calc(100vw - 32px));
	--ng-modal-width-full: min(68rem, calc(100vw - 32px));
	--ng-modal-width-airport: 95vw;
	--ng-modal-width-alliance: min(68rem, calc(100vw - 32px));
	--ng-modal-width-toplist: min(58rem, calc(100vw - 32px));
	--ng-modal-field-max: 20rem;
	--ng-modal-textarea-max: 28rem;
	/* Koordinaten-Tabelle: feste Spaltenbreiten (Modal breitet sich mit aus) */
	--ng-coord-col-coord: 3.25rem;
	--ng-coord-col-name: 8.5rem;
	--ng-coord-col-owner: 28rem;
	--ng-coord-col-points: 5.75rem;
	--ng-coord-col-actions: 8.25rem;
	--ng-coord-table-min: calc(
		var(--ng-coord-col-coord) + var(--ng-coord-col-name) + var(--ng-coord-col-owner) +
		var(--ng-coord-col-points) + var(--ng-coord-col-actions)
	);
	--ng-coord-embed-min: var(--ng-coord-table-min);
	/* Modals: heller, neutral-grau, weniger Blur (kein Blau-Stich in Flaechen) */
	--ng-modal-surface-top: rgba(48, 54, 60, 0.52);
	--ng-modal-surface-bottom: rgba(36, 40, 46, 0.44);
	--ng-modal-surface: linear-gradient(155deg, var(--ng-modal-surface-top), var(--ng-modal-surface-bottom));
	--ng-modal-backdrop-scrim: rgba(16, 18, 22, 0.38);
	--ng-modal-backdrop-scrim-edge: rgba(10, 12, 14, 0.5);
	--ng-modal-backdrop-blur: 3px;
	--ng-modal-card-blur: 6px;
	--ng-modal-card-saturate: 1.04;
	--ng-modal-border: 1px solid rgba(255, 255, 255, 0.14);
	--ng-modal-shadow: 0 14px 36px rgba(0, 0, 0, 0.34);
	--ng-modal-header-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
	--ng-modal-header-border: rgba(255, 255, 255, 0.12);
	--ng-modal-widget-bg: rgba(40, 44, 50, 0.38);
	--ng-modal-widget-border: rgba(255, 255, 255, 0.12);
	--ng-modal-panel-bg: rgba(38, 42, 48, 0.34);
	--ng-modal-input-bg: rgba(34, 38, 44, 0.48);
	--ng-modal-input-border: rgba(255, 255, 255, 0.16);
	--ng-modal-close-color: rgba(220, 228, 236, 0.9);
	--ng-modal-close-border: rgba(255, 255, 255, 0.18);
	--ng-modal-close-bg: rgba(34, 38, 44, 0.42);
	--ng-modal-label-muted: rgba(196, 206, 214, 0.78);
}

/* ── 2. Font Face ── */
@font-face {
	font-family: 'Orbitron';
	src: url('/fonts/Orbitron-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Bitmap-Terminal fuer HUD-Systemlog (kantig/pixelig) */
@font-face {
	font-family: 'Glass TTY VT220';
	src: url('/fonts/Glass_TTY_VT220.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* ── 3. Global Reset & Base ── */
* { box-sizing: border-box; }
[hidden] { display: none !important; }

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

h1 { font-family: 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 { font-family: 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 { font-family: 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; }

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--ui-accent-cyan); }

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

/* ── 4. Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(79, 172, 254, 0.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(79, 172, 254, 0.45); }

/* ── 5. Input-Elemente ── */
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); }

/* ── 6. UI-Framework-Klassen ── */
.ui-stack { display: grid; gap: var(--space-12); }
.ui-gap-8 { gap: var(--space-8); }
.ui-gap-12 { gap: var(--space-12); }
.ui-log strong { color: var(--ui-accent-cyan); }
.ui-log__line { display: block; margin-bottom: 4px; }
.ui-ticker { display: none; }

/* ═══════════════════════════════════════════════════════════════
   GAME LAYOUT (ng-game-layout)
   ═══════════════════════════════════════════════════════════════ */
body.ui-reboot.ng-shell.ng-game-layout {
	--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-Container ── */
.ui-shell {
	position: relative;
	isolation: isolate;
	min-height: 0;
}
.ui-shell > * { position: relative; z-index: 1; }

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: 0;
	width: 100%;
	min-height: fit-content;
	border-radius: 0;
	box-shadow: none;
}

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;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	gap: 0;
}

/* ── Header Area ── */
.hud-header { grid-area: header; position: relative; z-index: 1000; isolation: isolate; overflow: visible; }
.hud-header > * { position: relative; z-index: 1; }
.hud-header::before, .hud-header::after { display: none; }
body.ui-reboot.ng-shell .ui-shell .hud-header { grid-area: header; }
body.ui-reboot.ng-shell.ng-game-layout .ui-shell .hud-header { flex: 0 0 auto; position: relative; z-index: 10; }

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

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

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

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

/* ── UI Frame ── */
.ui-frame { position: relative; padding: var(--space-8); overflow: hidden; }

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::before { display: none; }
body.ui-reboot .ui-frame.ui-frame--heavy.ng-sections-frame > .ui-frame__body {
	overflow-y: visible;
}

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

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

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

/* ── Shell Center & Dashboard ── */
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;
}

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

body.ui-reboot.ng-shell.ng-game-layout .ng-gridmatrix-header { display: none; }

/* ── Dashboard Scene ── */
body.ui-reboot.ng-shell.ng-game-layout .ng-dashboard-scene {
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
	position: relative;
	min-height: calc(100vh - 8px);
	border-radius: 0;
}

/* Galaxie-Hintergrund mit Nebula-Bild */
.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;
}

/* Planet-Mouseover: Tooltip liegt als Overlay auf document.body (nicht .ng-galaxy-background) */
.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);
	font-weight: 600;
	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);
	margin-top: 0;
}

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: rgba(191, 239, 255, 0.65);
	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);
}

/* Im Game-Layout: Galaxy-Hintergrund hinter allem */
body.ui-reboot.ng-shell.ng-game-layout .ng-dashboard-scene > .ng-galaxy-background {
	position: absolute;
	inset: 0;
	z-index: 1;
}

body.ui-reboot.ng-shell.ng-game-layout .ng-dashboard-scene > .ng-galaxy-background .ng-galaxy-canvas,
body.ui-reboot.ng-shell.ng-game-layout .ng-dashboard-scene > .ng-galaxy-background .ng-galaxy-canvas canvas {
	width: 100%;
	height: 100%;
}

/* Vignette-Overlay auf dem Planeten-Hintergrund beibehalten */
body.ui-reboot.ng-shell.ng-game-layout .ng-dashboard-scene > .ng-galaxy-background::after {
	content: '';
	display: block;
}

/* Login-Seite: Globe-Variante */
body.ui-reboot.ng-shell:is(.ng-landing-page, .ng-register-page, .ng-guest-page) .ng-landing-logo-globe.ng-galaxy-background {
	position: absolute;
	inset: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: clamp(220px, 42vw, 420px);
	height: clamp(220px, 42vw, 420px);
	min-width: 0;
	min-height: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	border-radius: 50%;
	background: none;
	background-image: none;
	animation: landingLogoGlobeGlow 3s ease-in-out infinite;
}

@keyframes landingLogoGlobeGlow {
	0%, 100% { filter: drop-shadow(0 0 12px rgba(79, 172, 254, 0.28)); }
	50% { filter: drop-shadow(0 0 32px rgba(79, 172, 254, 0.55)); }
}

body.ui-reboot.ng-shell:is(.ng-landing-page, .ng-register-page, .ng-guest-page) .ng-landing-logo-globe.ng-galaxy-background::after {
	display: none;
}

body.ui-reboot.ng-shell:is(.ng-landing-page, .ng-register-page, .ng-guest-page) .ng-landing-logo-globe .ng-galaxy-canvas {
	position: absolute;
	inset: 0;
}

/* Galaxy-Karten (Koordinaten-Tooltips auf dem Planeten) */
.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: rgba(191, 239, 255, 0.6); 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: rgba(191, 239, 255, 0.5); }

/* ── Footer/Ticker ── */
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;
}

/* ═══════════════════════════════════════════════════════════════
   HUD OVERLAY – Das Cockpit
   ═══════════════════════════════════════════════════════════════ */
.ng-hud-overlay {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	filter: drop-shadow(0 0 18px var(--hud-glow));
}

.ng-hud-grid {
	display: grid;
	grid-template-columns: 340px 1fr 340px;
	grid-template-rows: 90px 1fr auto;
	height: 100%;
	width: 100%;
	gap: 0;
}

.ng-hud-interactive,
.ng-hud-interactive * {
	pointer-events: auto;
}

/* ── Grid-Platzierung: Viereck mit Loch in der Mitte ── */
.ng-hud-topbar { grid-column: 1 / 4; grid-row: 1; }
.ng-hud-column--left { grid-column: 1; grid-row: 2; }
.ng-hud-column--right { grid-column: 3; grid-row: 2; }
.ng-hud-center-stage { position: relative; grid-column: 2; grid-row: 2; pointer-events: none; z-index: 2; }
.ng-hud-bottombar { grid-column: 1 / 4; grid-row: 3; }

/* ── Nahtloses Viereck: KEIN border, KEIN shadow, KEINE Trennung ── */
.ng-hud-topbar,
.ng-hud-column--left,
.ng-hud-column--right,
.ng-hud-bottombar {
	position: relative;
	background: var(--hud-surface);
	border: 0;
	box-shadow: none;
	border-radius: 0;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* Bottom-Bar: Dock-Symbole zentriert */
.ng-hud-bottombar {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	min-height: 56px;
}

/* Keine Innenkanten-Linien (Pseudo-Elemente) zur Center-Stage */
.ng-hud-topbar::before,
.ng-hud-topbar::after,
.ng-hud-column--left::before,
.ng-hud-column--left::after,
.ng-hud-column--right::before,
.ng-hud-column--right::after,
.ng-hud-bottombar::before,
.ng-hud-bottombar::after {
	display: none;
	content: none;
}

/* Aeusserer Rahmen: vollstaendiges Viereck */
.ng-hud-overlay::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 11;
	border: 1px solid var(--hud-stroke);
}

/* Corner-Akzente am Rahmen der Center-Stage (Stadt/Planet) */
.ng-hud-center-stage .ng-hud-corner {
	position: absolute;
	width: 32px;
	height: 32px;
	pointer-events: none;
	z-index: 20;
	border-color: var(--ui-accent-cyan);
}
.ng-hud-center-stage .ng-hud-corner--tl { top: 0; left: 0; border-top: 2px solid var(--ui-accent-cyan); border-left: 2px solid var(--ui-accent-cyan); }
.ng-hud-center-stage .ng-hud-corner--tr { top: 0; right: 0; border-top: 2px solid var(--ui-accent-cyan); border-right: 2px solid var(--ui-accent-cyan); }
.ng-hud-center-stage .ng-hud-corner--bl { bottom: 0; left: 0; border-bottom: 2px solid var(--ui-accent-cyan); border-left: 2px solid var(--ui-accent-cyan); }
.ng-hud-center-stage .ng-hud-corner--br { bottom: 0; right: 0; border-bottom: 2px solid var(--ui-accent-cyan); border-right: 2px solid var(--ui-accent-cyan); }

/* Warn-Banderole: vertikaler Streifen am linken Rand der Topbar */
.ng-hud-topbar > .ng-hud-warn-banderole {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 8px;
	z-index: 15;
	background: repeating-linear-gradient(-45deg, #ffcc00, #ffcc00 6px, #111111 6px, #111111 12px);
	box-shadow: 0 0 8px rgba(255, 204, 0, 0.2);
	opacity: 0.55;
	pointer-events: none;
}

/* Alien-Schrift-Ticker am unteren Rand der Spalten */
.ng-hud-alien-ticker {
	margin-top: auto;
	padding: 6px 8px 4px;
	font-size: 9px;
	letter-spacing: 0.06em;
	line-height: 1.5;
	color: rgba(79, 172, 254, 0.25);
	font-family: var(--font-body);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	pointer-events: none;
	user-select: none;
}

.ng-hud-alien-ticker p {
	margin: 0;
	animation: hud-alien-scroll 22s linear infinite;
}

@keyframes hud-alien-scroll {
	0%   { transform: translateX(100%); }
	100% { transform: translateX(-100%); }
}

/* ── Spalten-Layout ── */
.ng-hud-column {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
	scrollbar-color: rgba(79, 172, 254, 0.2) transparent;
}

/* ═══════════════════════════════════════════════════════════════
   HEADER (Topbar-Inhalt)
   ═══════════════════════════════════════════════════════════════ */
.hud-header {
	align-items: center;
	padding: 0;
	color: var(--ui-accent-cyan);
}

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

/* Im HUD: Header nimmt volle Topbar-Breite, kein eigener Hintergrund */
.ng-hud-topbar .hud-header {
	margin: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	width: 100%;
	min-height: 100%;
	display: grid;
	/* auto: Spielerblock nur so breit wie Inhalt, nicht fix 340px */
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: stretch;
	gap: 0;
	padding: 0;
	height: 100%;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* ── Header: Linker Block (Spieler/Avatar) ── */
.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: auto;
	max-width: none;
	min-width: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: var(--space-8);
	padding-right: 0;
	overflow: visible;
}

.ng-hud-topbar .hud-header > .ng-header-primary.ng-header-top-left {
	grid-column: 1;
	border-right: 0;
	padding: 0 14px;
	min-width: 0;
	max-width: none;
	width: auto;
	overflow: visible;
	align-self: stretch;
}

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

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

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: 21.5rem;
	gap: var(--space-16);
	margin-left: auto;
	margin-right: auto;
	padding: 0 24px;
	overflow: hidden;
}

.ng-hud-topbar .hud-header > .ui-hud-micro {
	grid-column: 2;
	align-self: center;
	justify-self: center;
	display: flex;
	justify-content: center;
	gap: 16px;
	padding: 4px 14px;
	flex: 0 1 auto;
	min-width: 21.5rem;
	width: 100%;
	max-width: 100%;
}

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

.ui-hud-micro-group[data-group="depot"] {
	display: grid;
	/* Feste Spalten: kein Zusammenziehen bei schmalen Ressourcen-Zahlen */
	grid-template-columns: repeat(3, minmax(5.75rem, 5.75rem));
	align-items: start;
	column-gap: var(--space-12);
	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(5.75rem, 5.75rem);
	align-items: start;
	row-gap: var(--space-4);
	border: none;
	padding: 4px 10px;
	position: relative;
	min-width: 5.75rem;
}

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

.ui-hud-micro-item {
	display: grid;
	/* Label nur ueber der Wertespalte – sonst optisch links versetzt */
	grid-template-areas: ". label" "icon value" "prod prod";
	grid-template-columns: 1.25em minmax(10ch, 10ch);
	justify-items: center;
	align-items: center;
	gap: 0;
	padding: 0 2px;
	border: none;
	position: relative;
	min-width: 5.75rem;
	box-sizing: border-box;
}

.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 .k {
	grid-area: label;
	grid-column: 2;
	width: 100%;
	color: var(--ui-accent-cyan);
	font-family: var(--font-body);
	font-size: var(--fs-12);
	text-transform: uppercase;
	text-align: center;
	display: block;
	justify-self: center;
}

.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: center;
	display: block;
	min-width: 10ch;
	text-align: center;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.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-prod {
	grid-area: prod;
	font-size: var(--fs-micro);
	color: rgba(79, 172, 254, 0.72);
	text-align: center;
	min-width: 9ch;
	width: 100%;
	box-sizing: border-box;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}
.ui-hud-prod.is-negative { color: var(--ui-alert-orange); }

/* Ressourcen-Meter (Lager / Tank) */
.ui-hud-res-meter {
	position: relative;
	height: 16px;
	min-height: 16px;
	background: rgba(7, 14, 26, 0.72);
	border: 1px solid rgba(79, 172, 254, 0.28);
	border-radius: 4px;
	overflow: hidden;
	box-sizing: border-box;
}
.ui-hud-res-meter-fill {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	height: 100%;
	min-width: 0;
	background: linear-gradient(90deg, rgba(56, 140, 220, 0.92), rgba(140, 210, 255, 0.95));
	border-radius: inherit;
	transition: width 0.5s ease;
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.18);
}
.ui-hud-res-meter-fill::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
	animation: hud-res-shimmer 3s ease-in-out infinite;
	pointer-events: none;
}
.ui-hud-res-meter-label {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 6px;
	font-family: var(--font-body);
	font-size: var(--fs-10);
	font-weight: 600;
	line-height: 1;
	color: var(--ui-accent-cyan);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	text-shadow:
		0 0 6px rgba(7, 14, 26, 0.95),
		0 1px 2px rgba(7, 14, 26, 0.9),
		0 0 1px rgba(7, 14, 26, 1);
	pointer-events: none;
}
.ui-hud-res-meter.is-warn .ui-hud-res-meter-fill {
	background: linear-gradient(90deg, rgba(217, 119, 6, 0.95), rgba(255, 190, 60, 0.95));
}
.ui-hud-res-meter.is-warn .ui-hud-res-meter-label {
	color: #ffe8c8;
}
.ui-hud-res-meter.is-full .ui-hud-res-meter-fill {
	background: linear-gradient(90deg, rgba(220, 50, 70, 0.96), rgba(255, 120, 120, 0.96));
}
.ui-hud-res-meter.is-full .ui-hud-res-meter-label {
	color: #ffe4e8;
}

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

/* ── Header: Floating Widget (Radar + Buttons) ── */
body.ui-reboot .hud-header > .ui-hud-floating-widget {
	position: fixed;
	top: 18px;
	right: 18px;
	z-index: 1400;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: min(260px, calc(100vw - 24px));
	max-width: 260px;
	height: auto;
	padding: 12px 10px 10px;
	border-radius: 2px;
	border: 1px solid rgba(191, 239, 255, 0.24);
	background:
		linear-gradient(155deg, rgba(10, 20, 30, 0.78), rgba(6, 12, 22, 0.62)),
		rgba(2, 4, 8, 0.45);
	backdrop-filter: blur(18px) saturate(1.2);
	-webkit-backdrop-filter: blur(18px) saturate(1.2);
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), 0 0 20px rgba(79, 172, 254, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.ui-reboot .hud-header > .ui-hud-floating-widget::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(79, 172, 254, 0.12) 0%, transparent 42%),
		linear-gradient(180deg, rgba(191, 239, 255, 0.05) 0%, transparent 100%);
	mix-blend-mode: screen;
	opacity: 0.22;
}

body.ui-reboot .hud-header > .ui-hud-floating-widget > * { position: relative; z-index: 1; }

/* Im HUD: Floating Widget in die rechte obere Ecke (nur Buttons, Radar ist ausgelagert) */
.ng-hud-topbar .hud-header > .ui-hud-floating-widget {
	grid-column: 3;
	position: relative !important;
	top: auto;
	right: auto;
	width: auto;
	max-width: none;
	z-index: 20;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 6px 12px;
	height: 100%;
}

.ng-hud-topbar .hud-header > .ui-hud-floating-widget::before { display: none; }

/* Top-Row Buttons im HUD kompakt */
.ng-hud-topbar .hud-header > .ui-hud-floating-widget .ui-hud-top-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0;
	width: auto;
}

body.ui-reboot .hud-header > .ui-hud-floating-widget .ui-hud-top-row {
	justify-content: center;
	padding: 0;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-8);
}

body.ui-reboot .hud-header > .ui-hud-floating-widget .ui-hud-top-row .ng-missions-icon,
body.ui-reboot .hud-header > .ui-hud-floating-widget .ui-hud-top-row .ng-burger-menu-btn,
body.ui-reboot .hud-header > .ui-hud-floating-widget .ui-hud-top-row .ng-city-switcher-btn {
	width: 36px;
	height: 36px;
	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);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ui-accent-cyan);
	cursor: pointer;
	font-size: var(--fs-body);
}

body.ui-reboot .hud-header > .ui-hud-floating-widget .ui-hud-top-row .ng-missions-icon:hover,
body.ui-reboot .hud-header > .ui-hud-floating-widget .ui-hud-top-row .ng-burger-menu-btn:hover,
body.ui-reboot .hud-header > .ui-hud-floating-widget .ui-hud-top-row .ng-city-switcher-btn:hover {
	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);
}

body.ui-reboot .hud-header > .ui-hud-floating-widget .ui-hud-top-row .ng-city-switcher {
	flex: 0 1 auto;
	display: flex;
	justify-content: center;
}

body.ui-reboot .hud-header > .ui-hud-floating-widget .ui-hud-top-row .ng-city-switcher-btn {
	width: auto;
	min-width: 80px;
	max-width: 100%;
	padding: 0 10px;
}

/* Radar im Header AUSBLENDEN – wird in die rechte Spalte verschoben per JS */
.ng-hud-topbar .hud-header > .ui-hud-floating-widget .ng-header-radar-mini {
	display: none !important;
}

/* Chat-Platzhalter im HUD ausblenden */
.ng-hud-topbar .hud-header > .ui-hud-floating-widget .ui-hud-floating-widget__chat-placeholders {
	display: none !important;
}

body.ui-reboot .hud-header > .ui-hud-floating-widget .ui-hud-floating-widget__chat-placeholders {
	width: 100%;
	display: flex;
	justify-content: center;
	gap: 8px;
}

body.ui-reboot .hud-header > .ui-hud-floating-widget .ui-hud-floating-widget__chat-btn {
	width: 42px; height: 42px; border-radius: 10px;
	border: 1px solid rgba(79, 172, 254, 0.24);
	background: linear-gradient(180deg, rgba(79, 172, 254, 0.12), rgba(2, 4, 8, 0.22));
	color: var(--ui-accent-blue);
	display: inline-flex; align-items: center; justify-content: center;
	cursor: default;
}
body.ui-reboot .hud-header > .ui-hud-floating-widget .ui-hud-floating-widget__chat-btn i { font-size: 20px; line-height: 1; }

/* ── Radar Canvas ── */
body.ui-reboot .hud-header > .ui-hud-floating-widget .ng-header-radar-mini {
	position: relative;
	width: min(180px, 100%);
	max-width: 180px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

body.ui-reboot .hud-header > .ui-hud-floating-widget .ng-header-radar-mini.ng-radar-canvas-wrap {
	position: relative;
	border-radius: 50%;
	overflow: hidden;
	isolation: isolate;
	filter: brightness(0.94) contrast(1.00);
	box-shadow: inset 0 0 24px rgba(79, 172, 254, 0.09), inset 0 0 64px rgba(0, 0, 0, 0.30);
	-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 82%, rgba(0, 0, 0, 0.78) 92%, rgba(0, 0, 0, 0) 100%);
	mask-image: radial-gradient(circle at 50% 50%, #000 0 82%, rgba(0, 0, 0, 0.78) 92%, rgba(0, 0, 0, 0) 100%);
}

body.ui-reboot .hud-header > .ui-hud-floating-widget .ng-header-radar-mini.ng-radar-canvas-wrap .ng-radar-canvas {
	border-radius: 0;
	filter: brightness(1.02) contrast(1.0) saturate(1.0);
}

body.ui-reboot .hud-header > .ui-hud-floating-widget .ng-header-radar-mini.ng-radar-canvas-wrap::before,
body.ui-reboot .hud-header > .ui-hud-floating-widget .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;
}

body.ui-reboot .hud-header > .ui-hud-floating-widget .ng-header-radar-mini.ng-radar-canvas-wrap .ng-radar-canvas,
body.ui-reboot .hud-header > .ui-hud-floating-widget .ng-header-radar-mini.ng-radar-canvas-wrap canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}

body.ui-reboot .hud-header > .ui-hud-floating-widget .ng-header-radar-mini.ng-radar-canvas-wrap::before {
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(191, 239, 255, 0) 47%, rgba(191, 239, 255, 0.45) 50%, rgba(191, 239, 255, 0) 53%, rgba(0, 0, 0, 0) 100%),
		repeating-linear-gradient(0deg, rgba(0, 0, 0, 0) 0 1px, rgba(120, 220, 178, 0.04) 1px 2px, rgba(0, 0, 0, 0) 2px 4px),
		repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 3px, rgba(79, 172, 254, 0.04) 3px 4px, rgba(0, 0, 0, 0) 4px 8px),
		linear-gradient(0deg, rgba(11, 42, 61, 0.18), rgba(11, 42, 61, 0.10));
	mix-blend-mode: screen;
	opacity: 0.18;
	background-size: 100% 100%, 100% 4px, 10px 100%, 100% 100%;
	background-repeat: no-repeat, repeat, repeat, no-repeat;
}

body.ui-reboot .hud-header > .ui-hud-floating-widget .ng-header-radar-mini.ng-radar-canvas-wrap::after {
	background:
		repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 5px, rgba(191, 239, 255, 0.04) 5px 6px, rgba(0, 0, 0, 0) 6px 12px),
		linear-gradient(90deg, rgba(191, 239, 255, 0) 0 22%, rgba(191, 239, 255, 0.08) 28%, rgba(191, 239, 255, 0) 36%, rgba(191, 239, 255, 0) 100%);
	mix-blend-mode: lighten;
	opacity: 0.22;
}

/* Radar: Canvas fuellt Wrap, Uhrzeit + LIVE zentriert (wie design.css) */
.ng-header-radar-mini .ng-radar-canvas {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 0;
	filter: none;
	font-family: 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: 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;
	pointer-events: 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);
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.ng-header-radar-mini .ng-radar-live,
	.ng-header-radar-mini .ng-radar-live #ng-radar-clock,
	.ng-header-radar-mini .ng-radar-live::after {
		animation: none;
	}
}

/* ── Avatar ── */
.header-avatar {
	position: relative;
	width: 64px;
	height: 64px;
	border: none;
	overflow: visible;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ng-header-avatar-right, .ng-header-top-left .header-avatar.ng-header-avatar-right {
	display: flex;
	flex-shrink: 0;
	align-self: center;
	width: 56px;
	height: 56px;
	min-height: 56px;
	min-width: 56px;
	margin: 8px;
	border-radius: 10px;
	overflow: visible;
	border: 1px solid rgba(96, 165, 250, .32);
	align-items: center;
	position: relative;
}

.ng-header-avatar-right img.ng-player-avatar {
	width: 100%;
	height: 100%;
	border: none;
}

/* Spieler-Avatar – einheitlich (Referenz: Header-Rahmen, abgerundete Ecken) */
:root {
	--ng-player-avatar-radius: 10px;
	--ng-player-avatar-border: 1px solid rgba(96, 165, 250, 0.32);
	--ng-player-avatar-bg: rgba(0, 0, 0, 0.35);
}

img.ng-player-avatar {
	display: inline-block;
	vertical-align: middle;
	box-sizing: border-box;
	flex-shrink: 0;
	object-fit: cover;
	border-radius: var(--ng-player-avatar-radius);
	border: var(--ng-player-avatar-border);
	background: var(--ng-player-avatar-bg);
}

.ng-player-avatar--xs { width: 18px; height: 18px; max-width: 18px; max-height: 18px; }
.ng-player-avatar--sm { width: 24px; height: 24px; max-width: 24px; max-height: 24px; }
.ng-player-avatar--md { width: 28px; height: 28px; max-width: 28px; max-height: 28px; }
.ng-player-avatar--lg { width: 32px; height: 32px; max-width: 32px; max-height: 32px; }
.ng-player-avatar--xl { width: 40px; height: 40px; max-width: 40px; max-height: 40px; }
.ng-player-avatar--2xl { width: 48px; height: 48px; max-width: 48px; max-height: 48px; }
.ng-player-avatar--compose { width: 60px; height: 60px; max-width: 60px; max-height: 60px; }
.ng-player-avatar--profile { width: 120px; height: 120px; max-width: 200px; max-height: 200px; }

.ng-col-owner .ng-player-avatar--sm,
.ng-toplist-player-info .ng-player-avatar--md {
	margin-right: 6px;
}

.ng-message-item:hover .ng-player-avatar--xl {
	border-color: rgba(96, 165, 250, 0.55);
}

.ng-player-option:hover .ng-player-avatar--compose {
	border-color: rgba(96, 165, 250, 0.55);
}

.ng-selected-player .ng-player-avatar--compose {
	width: 40px;
	height: 40px;
	max-width: 40px;
	max-height: 40px;
}

/* Platzhalter (z. B. freier Sektor im Kampfbericht) */
.ng-player-avatar.ng-player-avatar--icon {
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ng-player-avatar-bg);
	border: var(--ng-player-avatar-border);
	border-radius: var(--ng-player-avatar-radius);
}

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

.ng-header-avatar-level {
    position: absolute;
    top: -12px;
    right: -18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 23px;
    padding: 6px;
    border-radius: 11px;
    background: var(--badge-accent-bg);
    color: var(--badge-accent-color);
    border: 1px solid var(--badge-accent-border);
    box-shadow: var(--badge-accent-shadow);
    z-index: 6;
    pointer-events: none;
}
.ng-header-avatar-level strong { color: inherit; font-size: 18px; font-weight: 900; letter-spacing: -.03em; text-shadow: var(--badge-accent-text-shadow); }

.ng-header-avatar-level strong {
    color: inherit;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: -.03em;
    text-shadow: var(--badge-accent-text-shadow);
}

.ng-hud-topbar .hud-header > .ng-header-primary .ng-header-avatar-tools > .header-avatar.ng-header-avatar-right {
	align-self: center;
	width: 75px;
	min-width: 75px;
	height: calc(100% - 16px);
	min-height: 0;
	max-height: calc(90px - 16px);
	margin: 8px;
	border-radius: 10px;
	overflow: visible;
	position: relative;
}

.ng-hud-topbar .hud-header > .ng-header-primary .ng-header-avatar-level {
    position: absolute;
    top: -7px;
    right: -11px;
    z-index: 8;
}

.ng-header-top-left .ng-header-avatar-tools {
	order: 1;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: 10px;
	row-gap: 0;
	width: auto;
	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;
	position: relative;
	overflow: visible;
}

.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: 3px;
	align-items: start;
}

.ng-header-player-link { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--ui-accent-cyan); }
.ng-header-player-link.is-disabled { opacity: 0.5; }
.ng-header-player-name { font-family: var(--font-body); font-size: var(--fs-h3); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ng-header-avatar-side .ng-header-player-alli { display: flex; align-items: center; gap: 4px; font-size: var(--fs-micro); color: rgba(191, 239, 255, 0.6); }
.ng-modal-title .ng-header-player-alli { display: flex; align-items: center; gap: 4px; color: var(--ui-accent-cyan); }
.ng-header-player-alli-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ng-header-alliance-crest { width: 14px; height: 14px; border-radius: 3px; }

.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: 32px; height: 32px; }

.ng-missions-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: transparent;
	border: 1px solid rgba(79, 172, 254, 0.18);
	color: var(--ui-accent-cyan);
	cursor: pointer;
	font-size: var(--fs-body);
	transition: background var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}

.ng-missions-icon:hover {
	background: rgba(191, 239, 255, 0.08);
	border-color: rgba(191, 239, 255, 0.3);
}

.ng-alliance-icon.has-open i {
	color: var(--ui-accent-cyan);
	animation: none;
}

.ng-missions-badge-count {
	position: absolute; top: -4px; right: -4px;
	min-width: 16px; height: 16px; padding: 0 4px;
	border-radius: 8px; font-size: .65rem; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
	background: var(--color-accent); color: #fff;
	animation: ng-mission-pulse 2s ease-in-out infinite;
}
@keyframes ng-mission-pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

.ng-header-top-left .ng-header-level-row {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
}

.ng-header-xp-label { font-size: var(--fs-micro); color: rgba(191, 239, 255, 0.5); }
.ng-header-xp-bar { flex: 1; height: 3px; background: rgba(79, 172, 254, 0.15); border-radius: 2px; overflow: hidden; }
.ng-header-xp-fill { height: 100%; background: var(--ui-accent-blue); border-radius: 2px; transition: width 0.3s ease; }
.ng-header-xp-pct { font-size: var(--fs-micro); color: rgba(191, 239, 255, 0.5); }

.ng-header-skills-mobile-only { display: none; }

/* ── HUD Chrome (Deko-Leuchtunterkante) – im Cockpit ausgeblendet ── */
.ng-hud-chrome {
	display: none;
}

/* ═══════════════════════════════════════════════════════════════
   LINKE SPALTE: Auth-Panel, Jobs, Terminal-Log
   ═══════════════════════════════════════════════════════════════ */
/* Cityview-Container im HUD */
.ng-cityview.ng-cityview-dashboard {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 0;
	flex: 1 1 auto;
}

/* Cards innerhalb der HUD-Spalten: transparent, keine eigene Box */
.ng-hud-column .ng-cityview-card {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 4px 0;
	position: relative;
	overflow: visible;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

.ng-hud-column .ng-cityview-card::before,
.ng-hud-column .ng-cityview-card::after { display: none !important; content: none !important; }

.ng-hud-column .ng-cityview-card:hover { border-color: transparent !important; box-shadow: none !important; }

.ng-hud-column .ng-cityview-card + .ng-cityview-card {
	border-top: 1px solid rgba(79, 172, 254, 0.06);
	padding-top: 10px;
}

/* Section-Titel im Terminal-Header-Stil (wie Login-Panel) */
.ng-hud-column .ng-cityview-card .ng-cityview-card-title {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	font-size: var(--fs-micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ui-accent-cyan);
	margin-bottom: 2px;
	background: linear-gradient(90deg, rgba(79, 172, 254, 0.10) 0%, transparent 60%);
	border-bottom: 1px solid rgba(79, 172, 254, 0.15);
	font-family: var(--font-body);
	font-weight: 600;
}

/* Terminal-Indikator vor dem Titel */
.ng-hud-column .ng-cityview-card .ng-cityview-card-title::before {
	content: '▸';
	color: rgba(79, 172, 254, 0.5);
	font-size: 10px;
	flex-shrink: 0;
}

/* ── Active Jobs Card ── */
.ng-active-jobs-card { min-height: 0; }
.ng-active-jobs-card:not(.is-active) .ng-cityview-card-title { color: rgba(191, 239, 255, 0.35); }

/* ── Terminal Feed (System-Log) = Login-Terminal-Panel im HUD ── */
.ng-hud-column .landing-login-panel.ng-hud-terminal-feed {
	width: 100%;
	max-width: 100%;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	margin-top: 6px;
}

.ng-cityview-dashboard > .ng-active-jobs-card + .ng-hud-terminal-feed {
	margin-top: 8px;
}

.ng-hud-terminal-feed .landing-login-terminal__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

.ng-hud-terminal-body {
	flex: 1 1 auto;
	min-height: 100px;
	max-height: 220px;
	padding: 10px 12px 8px;
	font-family: var(--font-terminal);
	font-size: var(--fs-terminal-hud);
	line-height: 1.3;
	letter-spacing: 0.02em;
	-webkit-font-smoothing: none;
	-moz-osx-font-smoothing: unset;
	font-smooth: never;
	text-rendering: geometricPrecision;
}

.ng-hud-terminal-body .ng-terminal-output,
.ng-hud-terminal-body .ng-terminal-line,
.ng-hud-terminal-body .ng-terminal-empty {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit;
}

.ng-hud-terminal-body .ng-terminal-line {
	padding: 2px 4px;
}

/* Remix-Icons im Log behalten ihre Icon-Schrift */
.ng-hud-terminal-body .ng-terminal-line__col-action i {
	font-family: 'remixicon';
	-webkit-font-smoothing: antialiased;
}

.landing-login-terminal__status.ng-hud-terminal-status {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px 8px;
}

.ng-hud-terminal-status .ng-terminal-status-dot {
	flex-shrink: 0;
}

/* HUD-Titel: h3-Groesse, aber ohne Login-clamp und mit weniger Letter-Spacing */
.ng-hud-terminal-feed .landing-login-terminal__header {
	padding: 8px 14px 0;
}

.ng-hud-terminal-feed .landing-login-terminal__header-row {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-8);
}

.ng-hud-terminal-feed .landing-login-terminal__title {
	font-size: var(--fs-h3);
	line-height: 1.3;
	letter-spacing: 0.24em;
	text-indent: 0.24em;
	text-shadow: 0 0 10px rgba(79, 172, 254, 0.28);
}

.ng-hud-terminal-feed .landing-login-terminal__title-text::before,
.ng-hud-terminal-feed .landing-login-terminal__title-text::after {
	font-size: inherit;
	letter-spacing: inherit;
}

.ng-terminal-status {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 2px;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	color: var(--ui-accent-blue);
}

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

.ng-terminal-body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 6px 8px;
	min-height: 100px;
	max-height: 220px;
	scrollbar-width: thin;
	scrollbar-color: rgba(79, 172, 254, 0.2) transparent;
	font-family: var(--font-body);
}

.ng-terminal-output {
	font-size: var(--fs-body);
	color: rgba(191, 239, 255, 0.7);
}

.ng-terminal-line {
	display: block;
	padding: 3px 6px;
	font-size: var(--fs-body);
	line-height: 1.55;
	color: rgba(191, 239, 255, 0.72);
	border-bottom: 1px solid rgba(79, 172, 254, 0.06);
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

.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 > span,
.ng-terminal-line__col-action i {
	display: inline;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	font-weight: inherit;
}

.ng-terminal-line__time {
	font-variant-numeric: tabular-nums;
}

.ng-terminal-line__col-action i {
	vertical-align: -1px;
}

.ng-terminal-empty { color: rgba(191, 239, 255, 0.35); font-style: italic; padding: 8px 0; }

/* ═══════════════════════════════════════════════════════════════
   RECHTE SPALTE: Radar, Angriffe, Flotten
   ═══════════════════════════════════════════════════════════════ */

/* Radar in der rechten Spalte – grosser Kreis */
.ng-hud-column--right .ng-hud-radar-container {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px 0;
}

.ng-hud-column--right .ng-hud-radar-container .ng-header-radar-mini {
	display: flex !important;
	width: 180px;
	height: 180px;
	min-width: 180px;
	min-height: 180px;
	margin: 0 auto;
	border-radius: 50%;
	border: 1px solid rgba(79, 172, 254, 0.3);
	box-shadow: inset 0 0 24px rgba(79, 172, 254, 0.25), 0 0 20px rgba(79, 172, 254, 0.15);
	overflow: hidden;
	background: rgba(8, 18, 30, 0.68);
	position: relative;
}

/* Radar-Effekte in der rechten Spalte (gleiche Deko wie vorher im Header) */
.ng-hud-radar-container .ng-header-radar-mini.ng-radar-canvas-wrap {
	position: relative;
	border-radius: 50%;
	overflow: hidden;
	isolation: isolate;
	filter: brightness(0.94) contrast(1.00);
	box-shadow: inset 0 0 24px rgba(79, 172, 254, 0.09), inset 0 0 64px rgba(0, 0, 0, 0.30);
	-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 82%, rgba(0, 0, 0, 0.78) 92%, rgba(0, 0, 0, 0) 100%);
	mask-image: radial-gradient(circle at 50% 50%, #000 0 82%, rgba(0, 0, 0, 0.78) 92%, rgba(0, 0, 0, 0) 100%);
}

.ng-hud-radar-container .ng-header-radar-mini.ng-radar-canvas-wrap .ng-radar-canvas,
.ng-hud-radar-container .ng-header-radar-mini.ng-radar-canvas-wrap canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	border-radius: 0;
	filter: brightness(1.02) contrast(1.0) saturate(1.0);
}

.ng-hud-radar-container .ng-header-radar-mini.ng-radar-canvas-wrap::before,
.ng-hud-radar-container .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-hud-radar-container .ng-header-radar-mini.ng-radar-canvas-wrap::before {
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(191, 239, 255, 0) 47%, rgba(191, 239, 255, 0.45) 50%, rgba(191, 239, 255, 0) 53%, rgba(0, 0, 0, 0) 100%),
		repeating-linear-gradient(0deg, rgba(0, 0, 0, 0) 0 1px, rgba(120, 220, 178, 0.04) 1px 2px, rgba(0, 0, 0, 0) 2px 4px),
		repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 3px, rgba(79, 172, 254, 0.04) 3px 4px, rgba(0, 0, 0, 0) 4px 8px),
		linear-gradient(0deg, rgba(11, 42, 61, 0.18), rgba(11, 42, 61, 0.10));
	mix-blend-mode: screen;
	opacity: 0.18;
	background-size: 100% 100%, 100% 4px, 10px 100%, 100% 100%;
	background-repeat: no-repeat, repeat, repeat, no-repeat;
}

.ng-hud-radar-container .ng-header-radar-mini.ng-radar-canvas-wrap::after {
	background:
		repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 5px, rgba(191, 239, 255, 0.04) 5px 6px, rgba(0, 0, 0, 0) 6px 12px),
		linear-gradient(90deg, rgba(191, 239, 255, 0) 0 22%, rgba(191, 239, 255, 0.08) 28%, rgba(191, 239, 255, 0) 36%, rgba(191, 239, 255, 0) 100%);
	mix-blend-mode: lighten;
	opacity: 0.22;
}

/* Flight-List / Fleet-Cards */
.ng-flight-list { font-size: var(--fs-body); }

.ng-flight-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-8);
	padding: 6px 0;
	border-bottom: 1px solid rgba(79, 172, 254, 0.08);
}
.ng-flight-card:last-child { border-bottom: 0; }

.ng-flight-title { flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.ng-flight-countdown { flex: 0 0 auto; font-size: var(--fs-12); color: rgba(191, 239, 255, 0.65); }

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

.ng-flight-list.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; } }

/* ── Dock (Navigation) in der HUD-Bottombar ── */
.ng-hud-bottombar .ng-hud-dock-container {
	margin: 0 auto;
	padding: 0;
	width: auto;
	max-width: 100%;
}

.ng-hud-bottombar .ng-hud-dock-container,
.ng-hud-bottombar .ng-hud-dock-container .ng-dock-panel,
.ng-hud-bottombar .ng-hud-dock-container .ng-dock-content,
.ng-hud-bottombar .ng-hud-dock-container .ng-dock-section,
.ng-hud-bottombar .ng-hud-dock-container .ui-frame__body,
.ng-hud-bottombar .ng-hud-dock-container .ng-dock-nav {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center;
	justify-content: center;
	min-height: 0;
	width: auto;
	max-width: 100%;
	position: static;
	inset: auto;
}

/* Icon-Leiste: zwingend horizontal (li.ng-sections-tabs liegt in .ng-sections-frame) */
.ng-hud-bottombar .ng-dock-nav-list {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	flex-flow: row nowrap !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0;
	list-style: none;
	margin: 0;
	width: auto !important;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
}

/* li-Wrapper: keine volle Breite von .ng-sections-frame .ng-sections-tabs */
.ng-hud-bottombar .ng-dock-nav-list > li,
.ng-hud-bottombar .ng-dock-nav-list > li.ui-nav-tabs,
.ng-hud-bottombar .ng-dock-nav-list > li.ng-sections-tabs,
.ng-hud-bottombar .ng-dock-nav-list > li.ng-dock-item,
.ng-hud-bottombar .ng-dock-nav-list > li.ng-dock-logout {
	display: flex !important;
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0;
	height: auto;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	background: transparent !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Icon-Buttons */
.ng-hud-bottombar .ng-dock-nav-list > li .ng-dock-link,
.ng-hud-bottombar .ng-dock-nav-list > li .ng-dock-link.tab,
.ng-hud-bottombar .ng-dock-nav-list > li .ng-dock-link.tab-group__item {
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	min-height: 44px !important;
	padding: 10px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: 0 !important;
	border-radius: 8px;
	background: rgba(79, 172, 254, 0.08);
	box-shadow: none;
	color: var(--ui-data-soft);
	cursor: pointer;
	text-decoration: none;
	font-size: inherit;
	line-height: 1;
	transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-mid) var(--ease);
}

.ng-hud-bottombar .ng-dock-nav-list > li .ng-dock-link::before,
.ng-hud-bottombar .ng-dock-nav-list > li .ng-dock-link::after { display: none !important; content: none !important; }

.ng-hud-bottombar .ng-dock-nav-list > li .ng-dock-link:hover {
	background: rgba(79, 172, 254, 0.16) !important;
	border: 0 !important;
	box-shadow: 0 0 12px rgba(79, 172, 254, 0.22);
	color: var(--ui-accent-cyan);
}

.ng-hud-bottombar .ng-dock-nav-list > li .ng-dock-link.is-active,
.ng-hud-bottombar .ng-dock-nav-list > li .ng-dock-link.tab.is-active,
.ng-hud-bottombar .ng-dock-nav-list > li .ng-dock-link.tab-group__item.is-active {
	background: rgba(79, 172, 254, 0.18) !important;
	border: 0 !important;
}

.ng-hud-bottombar .ng-dock-nav-list > li .ng-dock-link i {
	font-size: 20px !important;
	line-height: 1;
	color: inherit;
}

.ng-hud-bottombar .ng-dock-nav-list > li .ng-dock-link.is-active i {
	color: var(--ui-accent-cyan);
	filter: drop-shadow(0 0 5px rgba(191, 239, 255, 0.6));
}

.ng-hud-bottombar .ng-dock-panel .ng-dock-section::before,
.ng-hud-bottombar .ng-dock-panel .ng-dock-section::after,
.ng-hud-bottombar .ng-dock-panel .hud-divider { display: none; }

.ng-hud-bottombar .ng-dock-panel .ng-dock-section[data-section="city-stats"],
.ng-hud-bottombar .ng-dock-panel .ng-dock-section[data-section="resource-diagnostics"] { display: none; }

.ng-dock-logout .ng-dock-link,
.ng-dock-logout .ng-dock-link i { color: rgba(79, 172, 254, 0.84); }

/* ═══════════════════════════════════════════════════════════════
   CENTER STAGE: Stadt + Planet (transparent, keine Overlays)
   ═══════════════════════════════════════════════════════════════ */
.ng-hud-center-stage .ng-grid-citymap {
	position: absolute;
	left: 50%;
	top: 56%;
	width: min(620px, 56vw);
	height: min(430px, 52vh);
	transform: translate(-50%, -50%);
	z-index: 3;
	pointer-events: none;
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
}

.ng-hud-center-stage .ng-grid-citymap #city-map { height: 100%; min-height: 0; }

.ng-hud-center-stage,
.ng-hud-center-stage * {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

.ng-hud-center-stage .ng-grid-citymap,
.ng-hud-center-stage .ng-grid-citymap::before,
.ng-hud-center-stage .ng-grid-citymap::after,
.ng-hud-center-stage .ng-grid-citymap #city-map,
.ng-hud-center-stage .ng-grid-citymap #city-map::before,
.ng-hud-center-stage .ng-grid-citymap #city-map::after,
.ng-hud-center-stage .ng-grid-citymap #city-map canvas {
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	filter: none !important;
}

.ng-hud-center-stage .ng-grid-citymap > .ng-cityview-card-title,
.ng-hud-center-stage .ng-grid-citymap .ng-citymap-info-tl,
.ng-hud-center-stage .ng-grid-citymap .ng-citymap-info-tr,
.ng-hud-center-stage .ng-grid-citymap .ng-citymap-info-br,
.ng-hud-center-stage .ng-grid-citymap .ng-citymap-info-bl { display: none !important; }

.ng-hud-center-stage::before { display: none; }

/* ═══════════════════════════════════════════════════════════════
   SECTIONS AREA (Slider unten Mitte)
   ═══════════════════════════════════════════════════════════════ */
#ng-sections-area {
	position: absolute;
	bottom: 12px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 12;
	width: min(760px, calc(100% - 760px));
	pointer-events: auto;
}

/* Sections-Tabs nur in der Sections-Area – NICHT im HUD-Dock (Dock-li hat gleiche Klasse) */
body.ui-reboot .ui-frame.ui-frame--heavy.ng-sections-frame .ng-sections-area .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);
	margin: 0 auto var(--space-4);
	width: 100%;
}

body.ui-reboot.ng-shell.ng-game-layout .ui-frame.ui-frame--heavy.ng-sections-frame .ng-sections-area .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);
}

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

/* ═══════════════════════════════════════════════════════════════
   MODAL SYSTEM
   ═══════════════════════════════════════════════════════════════ */
.ng-modal-card, .ng-modal-frame {
	background: var(--ng-modal-surface);
	border: var(--ng-modal-border);
	border-radius: 14px;
	backdrop-filter: blur(var(--ng-modal-card-blur)) saturate(var(--ng-modal-card-saturate));
	-webkit-backdrop-filter: blur(var(--ng-modal-card-blur)) saturate(var(--ng-modal-card-saturate));
	box-shadow: var(--ng-modal-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.1);
	color: var(--ui-accent-cyan);
}

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

.ng-modal-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
	background: radial-gradient(circle at 50% 35%, var(--ng-modal-backdrop-scrim), var(--ng-modal-backdrop-scrim-edge));
	backdrop-filter: blur(var(--ng-modal-backdrop-blur));
	-webkit-backdrop-filter: blur(var(--ng-modal-backdrop-blur));
}

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

.ng-modal-backdrop.is-open .ng-modal-card, .ng-modal-backdrop.is-open .ng-modal {
	transform: translateY(0) scale(1);
}

.ng-modal-card.ng-modal-large {
	width: max-content;
	max-width: var(--ng-modal-width-default);
	max-height: 95vh;
	height: auto;
	display: flex;
	flex-direction: column;
}

.ng-modal-card.ng-modal-large .ng-modal-body {
	flex: 0 1 auto;
	min-height: 0;
	max-height: calc(95vh - 4.5rem);
	overflow: auto;
	width: max-content;
	max-width: 100%;
	box-sizing: border-box;
}

.ng-modal-header-row {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	gap: var(--space-12);
	background: var(--ng-modal-header-bg);
	border-bottom: 1px solid var(--ng-modal-header-border);
}

.ng-modal-title,
.ng-modal__title {
	flex: 1 1 auto;
	text-align: center;
	padding: 0 52px;
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-h2);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.8px;
	color: var(--ui-accent-cyan);
}

.ng-modal-title.ng-modal-title--alliance-brand,
.ng-modal-title.ng-modal-title--city-admin,
.ng-modal-title.ng-modal-title--coordinates {
	text-transform: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ng-modal-title.ng-modal-title--coordinates {
	padding: 8px 52px;
}

.ng-modal-title.ng-modal-title--coordinates .ng-coord-modal-title-bar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-12);
	width: 100%;
	margin: 0;
	padding: 0;
}

.ng-modal-title.ng-modal-title--coordinates .ng-coord-modal-title-label {
	white-space: nowrap;
}

.ng-modal-title.ng-modal-title--coordinates .ng-coord-embed-navbtn {
	width: 40px;
	min-width: 40px;
	min-height: 36px;
	height: 36px;
	border: 1px solid var(--ui-accent-cyan);
	border-radius: var(--card-radius);
	background: rgba(255, 255, 255, 0.06);
}

.ng-modal-title.ng-modal-title--coordinates .ng-coord-embed-navbtn:hover {
	background: rgba(255, 255, 255, 0.12);
}

.ng-modal-title.ng-modal-title--coordinates .ng-coord-embed-navbtn i {
	font-size: 22px;
	line-height: 1;
}

.ng-modal-title.ng-modal-title--city-admin {
	padding: 8px 52px;
}

.ng-modal-title.ng-modal-title--city-admin .ng-city-admin-title {
	width: 100%;
	margin: 0;
	padding: 0;
	border-bottom: none;
	text-transform: none;
}

.ng-modal-header-row .ng-modal-close-btn {
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
}

.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: var(--ng-modal-close-color);
	border: 1px solid var(--ng-modal-close-border);
	background: var(--ng-modal-close-bg);
	border-radius: 10px;
	cursor: pointer;
	padding: 4px 10px;
	transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.ng-modal-backdrop .ng-modal-close-btn:hover, .ng-modal__close:hover {
	color: var(--ui-accent-cyan);
	border-color: rgba(255, 255, 255, 0.28);
	background: rgba(48, 54, 60, 0.55);
	box-shadow: none;
}

.ng-modal-body :is(input, textarea, select) {
	background: var(--ng-modal-input-bg);
	border: 1px solid var(--ng-modal-input-border);
	color: var(--ui-accent-cyan);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	border-radius: 6px;
	padding: 6px 10px;
}

.ng-modal-body :is(input, textarea, select):focus {
	border-color: rgba(255, 255, 255, 0.32);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
	outline: none;
}

.ng-modal-body .ng-input,
.ng-modal-card .ng-input,
.ng-modal-backdrop .ng-input {
	background: var(--ng-modal-input-bg);
	border: 1px solid var(--ng-modal-input-border);
	color: var(--ui-accent-cyan);
}

.ng-modal-body .ng-input:focus,
.ng-modal-card .ng-input:focus,
.ng-modal-backdrop .ng-input:focus {
	border-color: rgba(255, 255, 255, 0.32);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
	outline: none;
}

.ng-modal__header { position: relative; text-align: center; padding: var(--space-8) var(--space-12); }
.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__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-modal-note { font-size: var(--fs-micro); color: rgba(191, 239, 255, 0.45); padding: 8px 12px; }
.ng-modal-status { font-size: var(--fs-body); padding: 4px 0; }

/* ═══════════════════════════════════════════════════════════════
   MODAL-INHALT & ALLIANZEN (aus design.css übernommen)
   ═══════════════════════════════════════════════════════════════ */
.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;
}

/* Mobil: Allianzbild etwas kompakter */
@media (max-width: 900px) {
	.ng-alliance-image-display {
		padding: var(--space-4) 0;
		max-width: min(220px, 76vw);
		margin-inline: auto;
		box-sizing: border-box;
	}

	.ng-alliance-image-overview {
		max-width: min(220px, 76vw);
	}

	.ng-alliance-image-empty {
		width: min(220px, 76vw, 100%);
		min-height: 160px;
		padding: var(--space-8);
	}
}

.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-stat-item {
	display: flex;
	gap: var(--space-8);
	align-items: center;
	border: none;
	background: transparent;
	border-radius: 12px;
	padding: 12px 14px;
	flex-direction: column;
	text-align: center;
}

.ng-stat-label {

	font-size: var(--fs-12);
	text-transform: uppercase;
	text-align: center;
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
}

.ng-stat-value {
	color: var(--ui-accent-cyan);
	text-align: center;
	width: 100%;
	box-sizing: border-box;
}

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

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

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

/* Allianz-Tabs: Seitenbezeichnung im Inhalt (Navigation bleibt zentriert wie Übersicht) */
.ng-alliance-content > .ng-section-title.ng-alliance-tab-heading {
	margin: 0 0 var(--space-12);
	padding-bottom: var(--space-6);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	text-align: center;
}

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

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

/* Allianz-Uebersicht: linker Block (Name/Tag + Tier-Badge-Zeile); Namen nicht per Widget-Uppercase verfaelschen */
.ng-widget-title--with-nav .ng-widget-title__lead {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-10);
	min-width: 0;
	flex: 1 1 auto;
}

.ng-widget-title--with-nav .ng-widget-title__lead.ng-alliance-widget-head {
	align-items: center;
	text-align: center;
	width: 100%;
	box-sizing: border-box;
}

.ng-widget-title--with-nav .ng-alliance-title-line {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: var(--space-6);
	text-transform: none;
	font-family: var(--font-body);
	font-size: var(--fs-h2);
	font-weight: 400;
	letter-spacing: 0.04em;
	color: inherit;
	width: 100%;
	box-sizing: border-box;
}

.ng-widget-title--with-nav .ng-alliance-title-name {
	color: inherit;
}

.ng-widget-title--with-nav .ng-alliance-title-tag {
	color: inherit;
	opacity: 0.9;
	font-size: 0.92em;
}

.ng-widget-title--with-nav .ng-alliance-tier-badge-row {
	display: flex;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
}

.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-widget-title--with-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: var(--space-12);
	box-sizing: border-box;
}

.ng-widget-title--nav-only {
	justify-content: center;
}

.ng-widget-title--nav-only .ng-widget-title__nav {
	justify-content: center;
	width: 100%;
}

.ng-widget-title__nav {
	display: inline-flex;
	align-items: center;
	gap: var(--space-28);
	flex-wrap: wrap;
	justify-content: flex-end;
	flex-shrink: 0;
}

/* Einstellungen / Praeferenzen: Tabs in der Widget-Titelzeile */
.ng-widget-title:has(.ng-pref-tabs) {
	display: flex;
	align-items: center;
	width: 100%;
}

.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-preference-sections,
#ng-spa-content .ng-preference-sections {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-16);
}

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

/* Remix-Icons in der Titel-Navigation groesser als der Link-Fliesstext (--fs-12). */
.ng-widget-title__nav .ng-widget-title__link > i {
	font-size: calc(var(--fs-20) + 4px);
	line-height: 1;
}

.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-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-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-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: 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-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;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: var(--space-12, 12px);
    padding-bottom: var(--space-8, 8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    gap: var(--space-8, 8px);
}

.ng-goal-header .ng-goal-timer {
	width: 100%;
	box-sizing: border-box;
}

.ng-goal-title {
    font-size: var(--fs-13, .85rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
	color: #fff;
	text-align: center;
}

.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;
    text-align: center;
}

.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: center;
    font-size: var(--fs-11, .7rem);
    color: var(--color-dim, #ffffff);
    margin-top: var(--space-4, 4px);
    font-variant-numeric: tabular-nums;
    width: 100%;
    box-sizing: border-box;
}

/* Donate Form */
.ng-goal-donate-form {
    display: flex;
    gap: var(--space-8, 8px);
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: var(--space-8, 8px);
}

.ng-goal-donate-form .ng-input {
    flex: 0 1 auto;
    width: min(200px, 100%);
    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-donate-form .ng-input { max-width: 100%; }

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

.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: var(--ng-modal-surface);
	border: var(--ng-modal-border);
	border-radius: 14px;
	backdrop-filter: blur(var(--ng-modal-card-blur)) saturate(var(--ng-modal-card-saturate));
	-webkit-backdrop-filter: blur(var(--ng-modal-card-blur)) saturate(var(--ng-modal-card-saturate));
	box-shadow: var(--ng-modal-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.1);
	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-/Dock-Modals: Breite am Inhalt orientiert, nicht 95vw */
.ng-modal-card.ng-modal-large {
	width: max-content;
	max-width: var(--ng-modal-width-default);
	max-height: 95vh;
	height: auto;
	display: flex;
	flex-direction: column;
}

.ng-modal-card.ng-modal-large .ng-modal-body {
	flex: 0 1 auto;
	min-height: 0;
	max-height: calc(95vh - 4.5rem);
	overflow: auto;
	width: max-content;
	max-width: 100%;
	box-sizing: border-box;
}

/* Breitere Inhalte (Kacheln, Handel, Tabellen) */
.ng-modal-card.ng-modal-large:has(.ng-trade-shell),
.ng-modal-card.ng-modal-large:has(.ng-build-tiles-grid),
.ng-modal-card.ng-modal-large:has(.ng-defense-tiles-grid),
.ng-modal-card.ng-modal-large:has(.ng-tiles-grid),
.ng-modal-card.ng-modal-large:has([data-section="airport"]),
.ng-modal-card.ng-modal-large:has(.ng-airport-layout),
.ng-modal-card.ng-modal-large:has(.ng-airport-wide),
.ng-modal-card.ng-modal-large:has(#ng-spa-content),
.ng-modal-card.ng-modal-large:has(.ng-comm-fullview-content):not(:has(.ng-toplist-content)):not(:has(.ng-modal-page--toplist)) {
	width: var(--ng-modal-width-airport);
	max-width: var(--ng-modal-width-airport);
}

/* Koordinaten: Modal-Breite = Tabellenbreite (nicht Default 38rem) */
.ng-modal-card.ng-modal-large:has(.ng-coord-embed),
.ng-modal-card.ng-modal-large:has(.ng-coord-table) {
	width: max-content;
	min-width: min(var(--ng-coord-embed-min), calc(100vw - 32px));
	max-width: min(var(--ng-modal-width-full), calc(100vw - 32px));
	overflow-x: visible;
}

.ng-modal-card.ng-modal-large:has(.ng-coord-embed) .ng-modal-body,
.ng-modal-card.ng-modal-large:has(.ng-coord-table) .ng-modal-body {
	width: auto;
	max-width: none;
	overflow-x: visible;
}

.ng-modal-card.ng-modal-large:has(.ng-alliance-members-table),
.ng-modal-card.ng-modal-large:has(.ng-preference-sections),
.ng-modal-card.ng-modal-large:has(.ng-combat-2col) {
	max-width: var(--ng-modal-width-wide);
}

.ng-modal-card.ng-modal-large:has(.ng-trade-shell) .ng-center-panel,
.ng-modal-card.ng-modal-large:has(.ng-build-tiles-grid) .ng-center-panel,
.ng-modal-card.ng-modal-large:has(.ng-defense-tiles-grid) .ng-center-panel,
.ng-modal-card.ng-modal-large:has([data-section="airport"]) .ng-center-panel,
.ng-modal-card.ng-modal-large:has(.ng-airport-layout) .ng-center-panel,
.ng-modal-card.ng-modal-large:has(.ng-coord-embed) .ng-center-panel,
.ng-modal-card.ng-modal-large:has(.ng-coord-table) .ng-center-panel,
.ng-modal-card.ng-modal-large:has(.ng-alliance-members-table) .ng-center-panel,
.ng-modal-card.ng-modal-large:has(.ng-preference-sections) .ng-center-panel,
.ng-modal-card.ng-modal-large:has(.ng-toplist-content) .ng-center-panel,
.ng-modal-card.ng-modal-large:has(.ng-modal-page--toplist) .ng-center-panel {
	max-width: 100%;
}

/* Dock-/Spiel-Modals (NG_UI.openModal, Terminal, Sections): oben, Auto-Höhe, fester Header */
.ng-modal-backdrop.ng-modal-backdrop--dock {
	align-items: flex-start;
	justify-content: center;
	padding: 12px 16px 20px;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.ng-modal-backdrop.ng-modal-backdrop--dock > .ng-modal-card.ng-modal-dock,
.ng-modal-backdrop.ng-modal-backdrop--dock > .ng-terminal-card.ng-modal-dock {
	align-self: flex-start;
	margin: 0 auto;
	width: max-content;
	max-width: var(--ng-modal-width-default);
	height: auto;
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
}

.ng-modal-card.ng-modal-dock .ng-modal-header-row {
	flex-shrink: 0;
	min-height: 3.25rem;
	padding: 12px 20px;
	box-sizing: border-box;
}

.ng-modal-card.ng-modal-dock .ng-modal-body {
	flex: 0 1 auto;
	min-height: 0;
	max-height: calc(100vh - 3.25rem - 32px);
	max-height: calc(100dvh - 3.25rem - 32px);
	overflow: auto;
}

/* Koordinaten: Dock-Defaults ueberschreiben (nach generischen Dock-Regeln) */
.ng-modal-backdrop.ng-modal-backdrop--dock:has(.ng-coord-embed),
.ng-modal-backdrop.ng-modal-backdrop--dock:has(.ng-coord-table) {
	overflow-x: auto;
}

.ng-modal-backdrop.ng-modal-backdrop--dock > .ng-modal-card.ng-modal-dock.ng-modal-large:has(.ng-coord-embed),
.ng-modal-backdrop.ng-modal-backdrop--dock > .ng-modal-card.ng-modal-dock.ng-modal-large:has(.ng-coord-table) {
	width: max-content;
	min-width: min(var(--ng-coord-embed-min), calc(100vw - 32px));
	max-width: min(var(--ng-modal-width-full), calc(100vw - 32px));
	overflow: visible;
}

.ng-modal-card.ng-modal-dock.ng-modal-large:has(.ng-coord-embed) .ng-modal-body,
.ng-modal-card.ng-modal-dock.ng-modal-large:has(.ng-coord-table) .ng-modal-body {
	width: auto;
	max-width: none;
	overflow-x: visible;
	overflow-y: auto;
}

.ng-modal-card.ng-modal-dock:has(.ng-coord-embed) .ng-modal-header-row,
.ng-modal-card.ng-modal-dock:has(.ng-coord-table) .ng-modal-header-row {
	width: 100%;
	box-sizing: border-box;
}

/* Flughafen: Dock-Modal immer 95 % Breite (viel Inhalt, ueberschreibt Dock-Default) */
.ng-modal-backdrop.ng-modal-backdrop--dock > .ng-modal-card.ng-modal-dock.ng-modal-large:has([data-section="airport"]),
.ng-modal-backdrop.ng-modal-backdrop--dock > .ng-modal-card.ng-modal-dock.ng-modal-large:has(.ng-airport-layout) {
	width: var(--ng-modal-width-airport);
	max-width: var(--ng-modal-width-airport);
}

.ng-modal-card.ng-modal-dock.ng-modal-large:has([data-section="airport"]) .ng-modal-body,
.ng-modal-card.ng-modal-dock.ng-modal-large:has(.ng-airport-layout) .ng-modal-body {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.ng-modal-card.ng-modal-dock:has([data-section="airport"]) .ng-modal-header-row,
.ng-modal-card.ng-modal-dock:has(.ng-airport-layout) .ng-modal-header-row {
	width: 100%;
	box-sizing: border-box;
}

.ng-modal-card.ng-modal-dock:has([data-section="airport"]) .ng-center-panel,
.ng-modal-card.ng-modal-dock:has([data-section="airport"]) .ng-airport-wide,
.ng-modal-card.ng-modal-dock:has(.ng-airport-layout) .ng-center-panel {
	max-width: 100%;
	width: 100%;
}

/* Allianz: feste Modal-Breite (Tab-Wechsel aendert Groesse nicht) */
.ng-modal-backdrop.ng-modal-backdrop--dock > .ng-modal-card.ng-modal-dock.ng-modal-large:has([data-section="alliances"]),
.ng-modal-backdrop.ng-modal-backdrop--dock > .ng-modal-card.ng-modal-dock.ng-modal-large:has(.ng-alliance-content),
.ng-modal-card.ng-modal-large:has([data-section="alliances"]),
.ng-modal-card.ng-modal-large:has(.ng-alliance-content) {
	width: var(--ng-modal-width-alliance);
	min-width: var(--ng-modal-width-alliance);
	max-width: var(--ng-modal-width-alliance);
}

.ng-modal-card.ng-modal-dock.ng-modal-large:has([data-section="alliances"]) .ng-modal-body,
.ng-modal-card.ng-modal-dock.ng-modal-large:has(.ng-alliance-content) .ng-modal-body {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.ng-modal-card.ng-modal-dock:has([data-section="alliances"]) .ng-center-panel,
.ng-modal-card.ng-modal-dock:has(.ng-alliance-content) .ng-center-panel {
	max-width: 100%;
	width: 100%;
}

/* Allianz-Modal: Titel-Navigation kompakter (Text + Symbole) */
.ng-modal-card:has([data-section="alliances"]) .ng-widget-title--with-nav,
.ng-modal-card:has(.ng-alliance-content) .ng-widget-title--with-nav {
	font-size: var(--fs-11);
	gap: var(--space-8);
}

.ng-modal-card:has([data-section="alliances"]) .ng-widget-title--with-nav .ng-alliance-title-line,
.ng-modal-card:has(.ng-alliance-content) .ng-widget-title--with-nav .ng-alliance-title-line {
	font-size: var(--fs-body);
	letter-spacing: 0.06em;
}

.ng-modal-card:has([data-section="alliances"]) .ng-widget-title__nav,
.ng-modal-card:has(.ng-alliance-content) .ng-widget-title__nav {
	gap: var(--space-10);
}

.ng-modal-card:has([data-section="alliances"]) .ng-widget-title__nav .ng-widget-title__link,
.ng-modal-card:has(.ng-alliance-content) .ng-widget-title__nav .ng-widget-title__link {
	font-size: var(--fs-11);
}

.ng-modal-card:has([data-section="alliances"]) .ng-widget-title__nav .ng-widget-title__link > i,
.ng-modal-card:has(.ng-alliance-content) .ng-widget-title__nav .ng-widget-title__link > i {
	font-size: var(--fs-16);
}

.ng-modal-card:has([data-section="alliances"]) .ng-widget-title--with-nav .ng-alliance-tier-badge,
.ng-modal-card:has(.ng-alliance-content) .ng-widget-title--with-nav .ng-alliance-tier-badge {
	font-size: var(--fs-10);
	padding: 2px 8px;
}

/* Weltrangliste / SPA-Inhalte im Dock-Modal */
.ng-modal-card.ng-modal-dock .ng-center-panel,
.ng-modal-card.ng-modal-dock .ng-modal-page .ng-center-panel,
.ng-modal-card.ng-modal-large .ng-center-panel {
	max-width: var(--ng-modal-width-default);
	width: auto;
	min-width: min(18rem, 100%);
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.ng-modal-card.ng-modal-dock .ng-widget,
.ng-modal-card.ng-modal-dock .ng-modal-page .ng-widget,
.ng-modal-card.ng-modal-large .ng-modal-body > .ng-widget {
	margin: 0;
	width: auto;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

/* Weltrangliste: feste Modal-Breite, Inhalt fuellt die volle Breite (nach den Default-38rem-Regeln) */
.ng-modal-backdrop.ng-modal-backdrop--dock > .ng-modal-card.ng-modal-dock.ng-modal-large:has(.ng-toplist-content),
.ng-modal-backdrop.ng-modal-backdrop--dock > .ng-modal-card.ng-modal-dock.ng-modal-large:has(.ng-modal-page--toplist),
.ng-modal-card.ng-modal-dock.ng-modal-large:has(.ng-toplist-content),
.ng-modal-card.ng-modal-dock.ng-modal-large:has(.ng-modal-page--toplist),
.ng-modal-card.ng-modal-large:has(.ng-toplist-content),
.ng-modal-card.ng-modal-large:has(.ng-modal-page--toplist) {
	width: var(--ng-modal-width-toplist);
	min-width: var(--ng-modal-width-toplist);
	max-width: var(--ng-modal-width-toplist);
}

.ng-modal-card.ng-modal-dock.ng-modal-large:has(.ng-toplist-content) .ng-modal-body,
.ng-modal-card.ng-modal-dock.ng-modal-large:has(.ng-modal-page--toplist) .ng-modal-body,
.ng-modal-card.ng-modal-large:has(.ng-toplist-content) .ng-modal-body,
.ng-modal-card.ng-modal-large:has(.ng-modal-page--toplist) .ng-modal-body {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.ng-modal-card.ng-modal-dock.ng-modal-large:has(.ng-toplist-content) .ng-comm-fullview-content,
.ng-modal-card.ng-modal-dock.ng-modal-large:has(.ng-modal-page--toplist) .ng-comm-fullview-content,
.ng-modal-card.ng-modal-large:has(.ng-toplist-content) .ng-comm-fullview-content,
.ng-modal-card.ng-modal-large:has(.ng-modal-page--toplist) .ng-modal-page--toplist {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.ng-modal-card.ng-modal-dock.ng-modal-large:has(.ng-toplist-content) .ng-center-panel.ng-toplist-content,
.ng-modal-card.ng-modal-dock.ng-modal-large:has(.ng-modal-page--toplist) .ng-center-panel.ng-toplist-content,
.ng-modal-card.ng-modal-large:has(.ng-toplist-content) .ng-center-panel.ng-toplist-content,
.ng-modal-card.ng-modal-large:has(.ng-modal-page--toplist) .ng-center-panel.ng-toplist-content {
	max-width: 100%;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.ng-modal-card.ng-modal-dock.ng-modal-large:has(.ng-toplist-content) .ng-widget,
.ng-modal-card.ng-modal-dock.ng-modal-large:has(.ng-modal-page--toplist) .ng-widget,
.ng-modal-card.ng-modal-large:has(.ng-toplist-content) .ng-center-panel .ng-widget,
.ng-modal-card.ng-modal-large:has(.ng-modal-page--toplist) .ng-center-panel .ng-widget {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.ng-modal-card.ng-modal-large:has(.ng-toplist-content) .ng-widget-body,
.ng-modal-card.ng-modal-large:has(.ng-modal-page--toplist) .ng-widget-body {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.ng-modal-card.ng-modal-large:has(.ng-toplist-content) .ng-toplist-table,
.ng-modal-card.ng-modal-large:has(.ng-modal-page--toplist) .ng-toplist-table {
	width: 100%;
	min-width: 100%;
	table-layout: auto;
}

.ng-modal-card.ng-modal-large:has(.ng-toplist-content) .ng-widget-title--with-nav.ng-widget-title--nav-only,
.ng-modal-card.ng-modal-large:has(.ng-modal-page--toplist) .ng-widget-title--with-nav.ng-widget-title--nav-only {
	justify-content: center;
}

.ng-modal-card.ng-modal-large:has(.ng-toplist-content) .ng-widget-title--nav-only .ng-widget-title__nav,
.ng-modal-card.ng-modal-large:has(.ng-modal-page--toplist) .ng-widget-title--nav-only .ng-widget-title__nav {
	justify-content: center;
	width: 100%;
}

/* Eingabefelder in Modals: nicht ueber die sinnvolle Inhaltsbreite hinaus */
.ng-modal-body .ng-form-input,
.ng-modal-body .ng-form-textarea,
.ng-modal-card .ng-form-input,
.ng-modal-card .ng-form-textarea {
	width: 100%;
	max-width: var(--ng-modal-field-max);
	box-sizing: border-box;
}

.ng-modal-body .ng-form-textarea,
.ng-modal-card .ng-form-textarea {
	max-width: var(--ng-modal-textarea-max);
}

.ng-modal-body .ng-input:not([type="checkbox"]):not([type="radio"]),
.ng-modal-card .ng-input:not([type="checkbox"]):not([type="radio"]) {
	max-width: var(--ng-modal-field-max);
	box-sizing: border-box;
}

.ng-modal-body .ng-textarea,
.ng-modal-card .ng-textarea {
	max-width: var(--ng-modal-textarea-max);
	box-sizing: border-box;
}

@media (orientation: portrait) {
	.ng-modal-card.ng-modal-large:not(:has(.ng-trade-shell)):not(:has(.ng-build-tiles-grid)):not(:has(.ng-defense-tiles-grid)):not(:has([data-section="airport"])):not(:has(.ng-airport-layout)):not(:has(.ng-toplist-content)):not(:has(.ng-modal-page--toplist)) {
		max-width: min(var(--ng-modal-width-default), calc(100vw - 24px));
	}
}

@media (orientation: landscape) and (max-width: 900px) {
	.ng-modal-card.ng-modal-large:not(:has(.ng-trade-shell)):not(:has(.ng-build-tiles-grid)):not(:has(.ng-defense-tiles-grid)):not(:has([data-section="airport"])):not(:has(.ng-airport-layout)):not(:has(.ng-toplist-content)):not(:has(.ng-modal-page--toplist)) {
		max-width: min(var(--ng-modal-width-default), calc(100vw - 24px));
	}
}

/* Mobil: Dock-Modals; Widget-Titel-Navigation kompakt (nur Icons). */
@media (max-width: 900px) {
	.ng-modal-backdrop.ng-modal-backdrop--dock {
		padding: 12px;
		align-items: flex-start;
	}

	.ng-modal-backdrop.ng-modal-backdrop--dock > .ng-modal-card.ng-modal-dock,
	.ng-modal-backdrop.ng-modal-backdrop--dock > .ng-terminal-card.ng-modal-dock {
		width: 100%;
		max-width: none;
		max-height: calc(100dvh - 24px);
		border-radius: 14px;
	}

	.ng-modal-backdrop.ng-modal-backdrop--dock > .ng-modal-card.ng-modal-dock .ng-modal-body {
		width: 100%;
		max-width: none;
		max-height: calc(100dvh - 3.25rem - 24px);
	}

	.ng-modal-card.ng-modal-large .ng-modal-body {
		width: 100%;
		max-width: none;
	}

	.ng-modal-card.ng-modal-dock .ng-center-panel,
	.ng-modal-card.ng-modal-large .ng-center-panel {
		max-width: none;
		width: 100%;
	}

	.ng-modal-card.ng-modal-dock .ng-widget,
	.ng-modal-card.ng-modal-large .ng-modal-body > .ng-widget {
		width: 100%;
	}

	.ng-widget-title.ng-widget-title--with-nav {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-8);
	}

	.ng-widget-title.ng-widget-title--with-nav.ng-widget-title--nav-only {
		justify-content: center;
	}

	.ng-widget-title__nav {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		gap: var(--space-4);
		flex: 1 1 auto;
		min-width: 0;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}

	.ng-widget-title__nav .ng-widget-title__link {
		position: relative;
		flex: 0 0 auto;
		gap: 0;
		justify-content: center;
		align-items: center;
		min-width: 3rem;
		min-height: 3rem;
		padding: var(--space-4);
		box-sizing: border-box;
	}

	.ng-widget-title__nav .ng-widget-title__link > i {
		font-size: clamp(1.35rem, 4.5vw, 1.65rem);
	}

	.ng-modal-card.ng-modal-dock:has([data-section="alliances"]) .ng-widget-title__nav .ng-widget-title__link,
	.ng-modal-card.ng-modal-dock:has(.ng-alliance-content) .ng-widget-title__nav .ng-widget-title__link {
		min-width: 2.25rem;
		min-height: 2.25rem;
		padding: var(--space-2);
	}

	.ng-modal-card.ng-modal-dock:has([data-section="alliances"]) .ng-widget-title__nav .ng-widget-title__link > i,
	.ng-modal-card.ng-modal-dock:has(.ng-alliance-content) .ng-widget-title__nav .ng-widget-title__link > i {
		font-size: 1.1rem;
	}

	/* Beschriftung nur fuer Screenreader / Tooltip; sichtbar nur Remix-Icon */
	.ng-widget-title__nav .ng-widget-title__link > span {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

.ng-modal-backdrop .ng-modal-close-btn, .ng-modal__close {
	color: var(--ng-modal-close-color);
	border: 1px solid var(--ng-modal-close-border);
	background: var(--ng-modal-close-bg);
	border-radius: 10px;
	transition: color 0.18s ease, border-color 0.18s ease, background 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: rgba(255, 255, 255, 0.28);
	background: rgba(48, 54, 60, 0.55);
	box-shadow: none;
}

.ng-modal-body :is(input, textarea, select), .ng-modal-card :is(input, textarea, select) {
	background: var(--ng-modal-input-bg);
	border: 1px solid var(--ng-modal-input-border);
	color: var(--ui-accent-cyan);
}

.ng-modal-body :is(input, textarea, select):focus, .ng-modal-card :is(input, textarea, select):focus {
	border-color: rgba(255, 255, 255, 0.32);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}

.ng-modal-body .ng-widget, .ng-modal-card .ng-widget, .ng-modal-backdrop .ng-widget {
	background: var(--ng-modal-widget-bg);
	border: 1px solid var(--ng-modal-widget-border);
	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, .ng-modal-backdrop .ng-center-panel, .ng-modal-backdrop .ng-center-panel > div {
	background: var(--ng-modal-panel-bg);
	border-color: var(--ng-modal-widget-border);
	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 var(--ng-modal-widget-border);
	background: var(--ng-modal-widget-bg);
}

.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 {
	text-align: center;
}

/* Widget mit Titel-Navigation: Flex-Layout nicht durch text-align:center im Modal zerstoeren */
.ng-modal-body .ng-center-panel .ng-widget:has(.ng-widget-title--with-nav),
.ng-modal-card .ng-center-panel .ng-widget:has(.ng-widget-title--with-nav),
.ng-modal-body .ng-widget-title--with-nav,
.ng-modal-card .ng-widget-title--with-nav,
.ng-modal-card.ng-modal-dock .ng-widget-title--with-nav {
	text-align: initial;
}

.ng-modal-body .ng-pref-tabs, .ng-modal-card .ng-pref-tabs {
	border-color: var(--ng-modal-widget-border);
	background: var(--ng-modal-panel-bg);
}

.ng-modal-body .ng-pref-tab, .ng-modal-card .ng-pref-tab {
	color: var(--ng-modal-label-muted);
}

.ng-modal-body .ng-pref-tab:hover, .ng-modal-card .ng-pref-tab:hover {
	color: var(--ui-accent-cyan);
	background: rgba(255, 255, 255, 0.08);
}

.ng-modal-body .ng-pref-tab.is-active, .ng-modal-card .ng-pref-tab.is-active {
	color: var(--ui-accent-cyan);
	background: rgba(255, 255, 255, 0.12);
}

.ng-modal-body .ui-btn.ui-btn-ghost, .ng-modal-card .ui-btn.ui-btn-ghost {
	background: var(--ng-modal-panel-bg);
	border-color: var(--ng-modal-widget-border);
	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(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.22);
}

.ng-modal-body .ng-alert, .ng-modal-card .ng-alert {
	background: var(--ng-modal-widget-bg);
	border-color: var(--ng-modal-widget-border);
	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--alliance-brand .ng-header-player-alli {
	max-width: 100%;
	justify-content: center;
}

.ng-modal-title.ng-modal-title--alliance-brand .ng-header-alliance-crest {
	width: 22px;
	height: 22px;
	border-radius: 4px;
}

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

.ng-modal-header-row .ng-pref-tabs {
	margin-right: 60px;
	flex-shrink: 1;
}

.ng-tile-backdrop {
	z-index: 15000;
}

.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;
	flex: 0 1 auto;
	flex-grow: 0;
	min-height: auto;
	max-height: min(420px, calc(100vh - 140px));
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

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

.ng-city-modal-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ng-city-modal-shortcuts {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 4px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.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;
	font-weight: 700;
	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;
}

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: var(--ng-modal-panel-bg);
	border: 1px solid var(--ng-modal-widget-border);
	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: var(--ng-modal-label-muted);
}

/* Hilfsklassen Allianz-Modal (in design.css nur kontextuell referenziert) */
.ng-info-box {
	padding: var(--space-12);
	margin-bottom: var(--space-8);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 12px;
}

.ng-form-section {
	margin-bottom: var(--space-12);
	padding: var(--space-12);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 12px;
}

.ng-form-section > h3 {
	margin: 0 0 var(--space-10);
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ng-section-content {
	color: rgba(191, 239, 255, 0.85);
	line-height: 1.6;
	text-align: left;
}

.ng-action-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-10);
	justify-content: center;
	align-items: center;
	margin-top: var(--space-12);
	padding-top: var(--space-12);
}

.ng-alliance-content .ng-coord-table,
.ng-alliance-content .ng-coord-table thead,
.ng-alliance-content .ng-coord-table tbody {
	width: 100%;
	border-collapse: collapse;
}

tr.ng-highlight-row,
.ng-data-table tr.ng-highlight-row {
	background: rgba(79, 172, 254, 0.12);
}

.ng-text-white { color: #fff; }
.ng-text-muted { color: rgba(191, 239, 255, 0.65); }
.ng-mt-10 { margin-top: 10px; }
.ng-mt-8 { margin-top: 8px; }
.ng-mr-12 { margin-right: 12px; }
.ng-inline-flex { display: inline-flex; }

.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, #4facfe);
	cursor: pointer;
	font-size: 0.75rem;
	letter-spacing: .5px;
	padding: 4px 10px;
	text-decoration: none;
	display: inline-block;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.ng-button-small:hover {
	background: rgba(0, 0, 0, 0.90);
	border-color: rgba(59, 130, 246, 0.40);
}

.ng-checkbox {
	accent-color: var(--ui-accent-cyan, #4facfe);
	width: 14px;
	height: 14px;
	cursor: pointer;
}

.ng-error-icon {
	font-size: 0.75rem;
	color: var(--ui-alert-orange, #ff5533);
}

.ng-coord-table-header {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ng-coord-header-row th {
	font-size: 0.75rem;
	color: var(--ui-accent-cyan, #4facfe);
	text-transform: uppercase;
	letter-spacing: .5px;
	padding: 6px 14px 8px;
}

.ng-alliance-report-row {
	cursor: default;
}

/* ═══════════════════════════════════════════════════════════════
   KOORDINATEN (Seite, Embed, Info-Modal)
   ═══════════════════════════════════════════════════════════════ */
.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 {
	width: max-content;
	max-width: 100%;
	box-sizing: border-box;
}

.ng-coord-table-wrap {
	width: max-content;
	max-width: 100%;
}

.ng-coord-embed-navbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	min-width: 40px;
	min-height: 36px;
	height: 36px;
	padding: 0;
	text-decoration: none;
	color: var(--ui-accent-cyan);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--ui-accent-cyan);
	border-radius: var(--card-radius);
}

.ng-coord-embed-navbtn:hover {
	color: var(--ui-accent-cyan);
	background: rgba(255, 255, 255, 0.12);
}

.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-comm-fullview-content .ng-coord-table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	table-layout: fixed;
	border-radius: 12px;
	overflow: hidden;
}

/* Embed/Modal: Tabelle bestimmt die Breite (nicht 100 % eines zu schmalen Containers) */
.ng-coord-embed .ng-coord-table {
	width: max-content;
	min-width: var(--ng-coord-table-min);
	max-width: none;
	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(--ui-accent-blue);
	text-decoration: underline;
}

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

/* Feste Spaltenbreiten – kein Umbruch in Besitzer (Modal/Tabelle wächst mit) */
.ng-coord-embed .ng-coord-table :is(th, td).ng-col-coord,
.ng-page-coordinates .ng-coord-table :is(th, td).ng-col-coord,
#ng-comm-fullview-content .ng-coord-table :is(th, td).ng-col-coord {
	width: var(--ng-coord-col-coord);
	min-width: var(--ng-coord-col-coord);
}

.ng-coord-embed .ng-coord-table :is(th, td).ng-col-name,
.ng-page-coordinates .ng-coord-table :is(th, td).ng-col-name,
#ng-comm-fullview-content .ng-coord-table :is(th, td).ng-col-name {
	width: var(--ng-coord-col-name);
	min-width: var(--ng-coord-col-name);
}

.ng-coord-embed .ng-coord-table :is(th, td).ng-col-owner,
.ng-page-coordinates .ng-coord-table :is(th, td).ng-col-owner,
#ng-comm-fullview-content .ng-coord-table :is(th, td).ng-col-owner {
	width: var(--ng-coord-col-owner);
	min-width: var(--ng-coord-col-owner);
	max-width: var(--ng-coord-col-owner);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ng-coord-embed .ng-coord-table :is(th, td).ng-col-points,
.ng-page-coordinates .ng-coord-table :is(th, td).ng-col-points,
#ng-comm-fullview-content .ng-coord-table :is(th, td).ng-col-points {
	width: var(--ng-coord-col-points);
	min-width: var(--ng-coord-col-points);
}

.ng-coord-embed .ng-coord-table :is(th, td).ng-col-actions,
.ng-page-coordinates .ng-coord-table :is(th, td).ng-col-actions,
#ng-comm-fullview-content .ng-coord-table :is(th, td).ng-col-actions {
	width: var(--ng-coord-col-actions);
	min-width: var(--ng-coord-col-actions);
}

.ng-coord-table .ng-col-owner .ng-coord-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
}

.ng-coord-table .ng-col-owner .ng-alliance-tag {
	display: inline;
	white-space: nowrap;
	margin-left: var(--space-4);
}

/* Koordinaten-Modal (Embed): Spalten zentriert, Besitzer inkl. Allianz voll sichtbar */
.ng-coord-embed .ng-coord-table :is(th, td) {
	text-align: center;
}

.ng-coord-embed .ng-coord-table thead th {
	text-align: center;
}

.ng-coord-embed .ng-coord-table :is(th, td).ng-col-owner {
	width: var(--ng-coord-col-owner);
	min-width: var(--ng-coord-col-owner);
	max-width: none;
	overflow: visible;
	text-overflow: clip;
	white-space: nowrap;
}

.ng-coord-embed .ng-coord-table .ng-col-owner .ng-coord-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	max-width: none;
	overflow: visible;
	text-overflow: clip;
	white-space: nowrap;
}

.ng-coord-embed .ng-coord-table .ng-col-name .ng-coord-link {
	display: inline-flex;
	justify-content: center;
	max-width: 100%;
}

.ng-coord-embed .ng-coord-table .ng-col-coord {
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.ng-coord-embed .ng-coord-table .ng-col-points {
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.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-quick-jump .ng-input-group {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-8);
}

.ng-quick-jump .ng-input-group > span {
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12);
}

.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-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-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-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-coord-select-row .ng-select-wide {
	min-width: 320px;
}

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

body.ui-reboot .ng-modal-backdrop#ng-coord-info-modal .ng-player-profile {
	background: var(--ng-modal-widget-bg);
	border: 1px solid var(--ng-modal-widget-border);
	color: var(--ui-accent-cyan);
}

body.ui-reboot .ng-modal-backdrop#ng-coord-info-modal .ng-player-profile__info p {
	color: var(--ng-modal-label-muted);
}

/* ═══════════════════════════════════════════════════════════════
   TOPLIST / WELTRANGLISTE
   ═══════════════════════════════════════════════════════════════ */
.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-toplist-rank--top td {
	font-size: var(--fs-16, 1rem);
	color: var(--color-accent, #4facfe);
	font-weight: 700;
}
.ng-toplist-rank--first td {
	font-size: var(--fs-18, 1.125rem);
}
.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, 0.75rem);
	color: var(--ui-accent-cyan);
	font-weight: 600;
}
.ng-toplist-alliance-name {
	font-size: var(--fs-12, 0.75rem);
}
.ng-widget-body {
	padding: var(--space-12, 12px);
}
.ng-overflow-x-auto {
	overflow-x: auto;
}
.ng-table-empty {
	text-align: center;
	padding: 24px;
	color: rgba(191, 239, 255, 0.45);
	font-size: var(--fs-12, 0.75rem);
}
.ng-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin-top: var(--space-12, 12px);
	flex-wrap: wrap;
}
.ng-page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding: 0 6px;
	border: 1px solid rgba(59, 130, 246, 0.12);
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.30);
	color: var(--ui-accent-cyan, #4facfe);
	font-size: var(--fs-12, 0.75rem);
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.ng-page-link:hover {
	background: rgba(0, 0, 0, 0.60);
	border-color: rgba(59, 130, 246, 0.40);
}
.ng-page-current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding: 0 6px;
	border: 1px solid var(--ui-accent-cyan, #4facfe);
	border-radius: 8px;
	background: rgba(79, 172, 254, 0.15);
	color: #fff;
	font-size: var(--fs-12, 0.75rem);
	font-weight: 600;
}
.ng-page-ellipsis {
	color: rgba(191, 239, 255, 0.45);
	padding: 0 4px;
	font-size: var(--fs-12, 0.75rem);
}

/* ═══════════════════════════════════════════════════════════════
   NACHRICHTEN / MESSAGES
   ═══════════════════════════════════════════════════════════════ */
.ng-message-tab {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4, 4px);
	padding: var(--space-8, 8px) var(--space-16, 16px);
	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, 0.75rem);
	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, #e0e0e8);
	text-shadow: 0 0 8px rgba(255, 255, 255, 0.20);
}
.ng-message-tab > * {
	position: relative;
	z-index: 1;
}
.ng-tab-label {
	text-transform: uppercase;
	position: relative;
	z-index: 1;
}
.ng-message-section {
	background: var(--ui-glass-fill, rgba(0,0,0,0.30));
	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, 12px);
	margin-bottom: 16px;
	padding-bottom: 12px;
}
.ng-section-controls {
	display: flex;
	gap: var(--space-12, 12px);
	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, 0.75rem);
	padding: 6px 10px;
	cursor: pointer;
	transition: all 0.2s ease;
}
.ng-filter-select:hover, .ng-filter-select:focus {
	border-color: var(--color-accent, #3b82f6);
	outline: none;
}
.ng-message-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-8, 8px);
}
.ng-message-item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-12, 12px);
	padding: 14px 16px;
	background: rgba(0, 0, 0, 0.25);
	border: 1px solid rgba(59, 130, 246, 0.10);
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.2s ease;
}
.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, #3b82f6);
}
.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, #3b82f6);
	cursor: pointer;
}
.ng-message-type {
	font-family: var(--font-body);
	font-size: var(--fs-12, 0.75rem);
	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, 0.75rem);
	color: var(--ui-accent-cyan);
}
.ng-message-details {
	display: flex;
	gap: var(--space-16, 16px);
	margin-top: 6px;
	flex-wrap: wrap;
}
.ng-detail {
	font-family: var(--font-body);
	font-size: var(--fs-12, 0.75rem);
	color: var(--ui-accent-cyan);
}
.ng-message-actions {
	display: flex;
	gap: var(--space-8, 8px);
	flex-wrap: wrap;
}
.ng-action-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-6, 6px);
	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, 0.75rem);
	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, #3b82f6);
	color: var(--color-accent, #3b82f6);
}
.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);
}
.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, #3b82f6);
	color: var(--color-accent, #3b82f6);
	border: 1px solid rgba(59, 130, 246, 0.50);
	padding: 12px 24px;
	display: flex;
	align-items: center;
	gap: var(--space-8, 8px);
}
.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, 0.75rem);
	text-transform: uppercase;
	letter-spacing: 1px;
}
.ng-page-tabs {
	display: flex;
	gap: var(--space-8, 8px);
	flex-wrap: wrap;
	margin-bottom: var(--space-12, 12px);
}
.ng-message-meta {
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}
.ng-meta-sender-row {
	display: flex;
	align-items: flex-start;
	gap: var(--space-12, 12px);
	margin-bottom: 12px;
}
.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, 0.75rem);
	color: var(--ui-accent-cyan);
	margin-bottom: 4px;
}
.ng-content-header {
	font-family: var(--font-body);
	font-size: var(--fs-12, 0.75rem);
	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, 0.75rem);
	color: var(--ui-accent-cyan);
	white-space: pre-wrap;
	word-break: break-word;
}
.ng-private-message {
	background: var(--ui-glass-fill, rgba(0,0,0,0.30));
	border: 1px solid rgba(59, 130, 246, 0.15);
	border-radius: 12px;
	padding: 16px;
}
.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, 0.75rem);
	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-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, 0.75rem);
	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, #3b82f6);
}
.ng-form-textarea {
	min-height: 120px;
	resize: vertical;
}
.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-compose-status {
	margin-top: 16px;
	padding: 12px 16px;
	border-radius: 12px;
	font-family: var(--font-body);
	font-size: var(--fs-12, 0.75rem);
	text-align: center;
}
.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-selected-recipient {
	margin-top: 8px;
}
.ng-system-message-body {
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12, 0.75rem);
	line-height: 1.5;
}
.ng-message-sender {
	font-size: var(--fs-12, 0.75rem);
	color: var(--ui-accent-cyan);
	font-weight: 600;
}
.ng-message-body {
	font-size: var(--fs-12, 0.75rem);
	color: var(--ui-accent-cyan);
	line-height: 1.5;
}
.ng-message-preview {
	font-size: var(--fs-12, 0.75rem);
	color: rgba(191, 239, 255, 0.55);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ng-message-status {
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 1px 6px;
	border-radius: 6px;
	background: rgba(59, 130, 246, 0.25);
	color: var(--ui-accent-cyan);
}
.ng-message-combat,
.ng-message-system,
.ng-message-private {
	border-left-width: 3px;
	border-left-style: solid;
}
.ng-message-combat { border-left-color: rgba(255, 100, 100, 0.5); }
.ng-message-system { border-left-color: rgba(100, 200, 255, 0.5); }
.ng-message-private { border-left-color: rgba(200, 150, 255, 0.5); }
.ng-justify-center { justify-content: center; }
.ng-quick-reply-form {
	background: rgba(0, 0, 0, 0.60);
	border: 1px solid rgba(59, 130, 246, 0.15);
	border-radius: 12px;
	padding: 16px;
	margin-top: var(--space-12, 12px);
}
.ng-quick-reply-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}
.ng-quick-reply-title {
	font-size: var(--fs-12, 0.75rem);
	color: var(--ui-accent-cyan);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.ng-quick-reply-close {
	cursor: pointer;
	color: rgba(191, 239, 255, 0.55);
	transition: color 0.15s;
}
.ng-quick-reply-close:hover {
	color: #fff;
}
.ng-msg-action-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	border: 1px solid rgba(59, 130, 246, 0.12);
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.30);
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12, 0.75rem);
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.ng-msg-action-btn:hover {
	background: rgba(0, 0, 0, 0.60);
	border-color: rgba(59, 130, 246, 0.40);
}
.ng-msg-delete { color: var(--ui-alert-orange, #ff5533); }
.ng-msg-mark-read { color: var(--ui-accent-cyan); }
.ng-msg-reply { color: var(--ui-accent-cyan); }

/* ═══════════════════════════════════════════════════════════════
   MISSIONEN / AIRPORT
   ═══════════════════════════════════════════════════════════════ */
.ng-airport-layout {
	align-items: start;
	display: grid;
	column-gap: var(--space-12, 12px);
	row-gap: var(--space-12, 12px);
	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.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-col h3 {
	align-items: center;
	color: var(--ui-accent-cyan);
	display: flex;
	font-family: var(--font-body);
	font-size: var(--fs-12, 0.75rem);
	gap: var(--space-8, 8px);
	letter-spacing: 1px;
	margin: 0 0 14px;
}
.ng-airport-col h3:before {
	background: var(--color-accent, #3b82f6);
	border-radius: 12px;
	content: "";
	height: 6px;
	width: 6px;
}
.ng-airport-stack {
	grid-area: left;
	display: flex;
	flex-direction: column;
	gap: var(--space-12, 12px);
}
.ng-airport-fleet-stack {
	grid-area: fleet;
	display: flex;
	flex-direction: column;
	gap: var(--space-12, 12px);
}
.ng-airport-mission-stack {
	grid-area: mission;
	display: flex;
	flex-direction: column;
	gap: var(--space-12, 12px);
}
.ng-airport-stack .ng-airport-col,
.ng-airport-fleet-stack .ng-airport-col,
.ng-airport-mission-stack .ng-airport-col {
	margin: 0;
}
.ng-airport-wide {
	grid-column: 1 / -1;
}
.ng-airport-left {
	grid-area: left;
}
.ng-fleet-grid {
	--thumb: 78px;
	display: grid;
	gap: var(--space-12, 12px);
	grid-template-columns: repeat(3, minmax(0, var(--ng-panel-cube-width, 1fr)));
}
.ng-fleet-item {
	border: none;
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.30);
	display: flex;
	flex-direction: column;
	gap: var(--space-6, 6px);
	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);
}
.ng-fleet-item:hover {
	border-color: rgba(59, 130, 246, 0.40);
	transform: translateY(-3px);
}
.ng-fleet-image-thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
.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, 0.75rem);
	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, 0.75rem);
	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, 6px);
	margin-top: 6px;
	align-items: stretch;
	justify-content: center;
	justify-items: center;
	padding: 0 var(--space-8, 8px) var(--space-8, 8px);
}
.ng-fleet-input-field {
	width: 100%;
	font-size: var(--fs-12, 0.75rem);
	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-minus, .ng-fleet-plus {
	min-width: 36px;
}
.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, 0.75rem);
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.ng-button-ghost: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, 12px);
	margin: 4px 0 10px;
	font-size: var(--fs-12, 0.75rem);
}
.ng-mission-option {
	align-items: center;
	cursor: pointer;
	display: grid;
	grid-template-columns: 16px 1fr;
	gap: var(--space-8, 8px);
	padding: 8px 12px;
	position: relative;
	color: var(--ui-accent-cyan);
}
.ng-mission-option input {
	justify-self: center;
	accent-color: var(--color-accent, #3b82f6);
	cursor: pointer;
}
.ng-mission-option:hover {
	background: rgba(0, 0, 0, 0.90);
	border-color: rgba(59, 130, 246, 0.40);
}
.ng-attack-option, .ng-transport-option {
	align-items: center;
	display: flex;
	font-size: var(--fs-12, 0.75rem);
	gap: var(--space-8, 8px);
	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, 0.75rem);
	letter-spacing: .5px;
	color: var(--clr-text-muted, rgba(191,239,255,0.55));
	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, 2px);
}
.ng-plunder-order__item {
	display: flex;
	align-items: center;
	gap: var(--space-6, 6px);
	padding: 4px 8px;
	font-size: var(--fs-12, 0.75rem);
	letter-spacing: .5px;
	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, 0.75rem);
	cursor: pointer;
	padding: 2px 4px;
	transition: color .15s;
}
.ng-plunder-order__btn:hover {
	color: var(--color-accent, #3b82f6);
}
.ng-transport-grid {
	display: grid;
	gap: var(--space-12, 12px);
	grid-template-columns: 1fr;
	margin-bottom: 8px;
}
.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, 8px);
	padding: 8px 10px;
}
.ng-transport-item label {
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12, 0.75rem);
	letter-spacing: .5px;
	min-width: 72px;
}
.ng-transport-item .ng-transport-input {
	flex: 0 0 auto;
	width: 10ch;
	font-size: var(--fs-12, 0.75rem);
	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-fleet-summary {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-6, 6px);
	margin-bottom: var(--space-6, 6px);
}
.ng-fleet-summary-stat {
	display: flex;
	flex-direction: column;
	gap: var(--space-4, 4px);
	padding: var(--space-4, 4px);
}
.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, 8px);
	min-height: 120px;
	align-items: center;
}
.ng-fleet-selected-list.is-empty {
	color: var(--ui-accent-cyan);
	letter-spacing: .4px;
}
.ng-coords-inline {
	align-items: center;
	display: flex;
	font-variant-numeric: tabular-nums;
	gap: var(--space-4, 4px);
	justify-content: center;
	padding: 10px 14px;
}
.ng-coord-field-mid { width: 80px; }
.ng-coord-sep {
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12, 0.75rem);
	padding: 0 2px;
}
.ng-coord-or-label {
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12, 0.75rem);
	text-align: center;
	margin: 8px 0 2px;
}
.ng-coord-select-row {
	display: flex;
	margin-top: 10px;
	gap: var(--space-12, 12px);
	width: max-content;
	margin-left: auto;
	margin-right: auto;
}
.ng-stats-grid {
	display: grid;
	gap: var(--space-12, 12px);
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}
.ng-section {
	margin-bottom: 16px;
}
.ng-section:last-child {
	margin-bottom: 0;
}
.ng-sub-options {
	margin-top: 12px;
	padding: 12px;
}
.ng-launch-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-12, 12px);
}
.ng-launch-summary {
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12, 0.75rem);
	display: inline-block;
}
.ng-alert-error {
	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, 0.75rem);
	margin: 8px auto 0;
	text-align: center;
}
.ng-button-large {
	padding: 12px 24px;
	font-size: var(--fs-12, 0.75rem);
	font-weight: 600;
}
.ng-button-secondary {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 12px;
	color: var(--ui-accent-cyan);
	padding: 8px 16px;
	font-size: var(--fs-12, 0.75rem);
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.ng-button-secondary:hover {
	background: rgba(0, 0, 0, 0.60);
	border-color: rgba(59, 130, 246, 0.40);
}
.ng-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, 0.75rem);
	padding: 6px 10px;
	cursor: pointer;
}
.ng-hidden { display: none; }
.ng-embed-fragment {
	width: 100%;
}
.ng-embed-inner {
	width: 100%;
}
.ng-icon-xl {
	font-size: var(--fs-12, 0.75rem);
	color: var(--color-accent, #3b82f6);
}
.ng-mt-20 { margin-top: 20px; }
.ng-quick-links {
	display: flex;
	gap: var(--space-8, 8px);
	flex-wrap: wrap;
}
.ng-info-text {
	font-size: var(--fs-12, 0.75rem);
	color: rgba(191, 239, 255, 0.55);
	line-height: 1.5;
}
.ng-warning-area {
	background: rgba(220, 38, 38, 0.08);
	border: 1px solid rgba(220, 38, 38, 0.25);
	border-radius: 12px;
	padding: 10px 14px;
	margin-top: var(--space-8, 8px);
}
.ng-fleet-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-12, 12px);
}
.ng-terminal {
	background: rgba(0, 0, 0, 0.60);
	border: 1px solid rgba(59, 130, 246, 0.12);
	border-radius: 12px;
	padding: 16px;
	font-family: var(--font-body);
}
.ng-terminal-content {
	font-size: var(--fs-12, 0.75rem);
	color: var(--ui-accent-cyan);
}
.ng-terminal-message {
	color: var(--ui-accent-cyan);
	font-size: var(--fs-12, 0.75rem);
	margin-bottom: 8px;
}
.ng-terminal-prompt {
	color: var(--color-accent, #3b82f6);
	font-size: var(--fs-12, 0.75rem);
}
.ng-cursor {
	display: inline-block;
	width: 8px;
	height: 1em;
	background: var(--ui-accent-cyan);
	animation: blink 1s step-end infinite;
	vertical-align: text-bottom;
}
@keyframes blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}
.ng-error-title {
	color: var(--ui-alert-orange, #ff5533);
	font-size: var(--fs-12, 0.75rem);
	font-weight: 600;
	margin-bottom: 8px;
}
.ng-panel-cube {
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.30);
	border: 1px solid rgba(59, 130, 246, 0.12);
	padding: 12px;
	transition: border-color 0.2s;
}
.ng-panel-cube:hover {
	border-color: rgba(59, 130, 246, 0.30);
}
.ng-panel-cube-grid {
	display: grid;
	gap: var(--space-12, 12px);
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.ng-button-icon {
	margin-right: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   ARTEFAKT-LABOR
   ═══════════════════════════════════════════════════════════════ */
.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); }
}
.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;
}
.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; }
}

/* ═══════════════════════════════════════════════════════════════
   TILE / CUBE / CITYVIEW / DEFENSE / BUILD-ROW / TECH-ROW /
   HANGAR-ROW / TILE-PROGRESS  (aus design.css uebernommen)
   ═══════════════════════════════════════════════════════════════ */

.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-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 .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-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: 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: var(--font-body);
}

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

/* ── Tile / Cube Basis-Regeln ── */

.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-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-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:hover, body.ui-reboot .ng-build-row .ng-tile:hover {
	border-color: rgba(255, 255, 255, 0.4);
	transform: translateY(-2px);
}

.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-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-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-tile:focus {
	border-color: #464543;
}
.ng-tile:focus-visible {
	outline: 2px solid #1e3a3f;
	outline-offset: 2px;
}

.ng-tile-disabled .ng-tile-bg {
	filter: grayscale(1) brightness(.5);
}
.ng-tile-disabled {
	cursor: not-allowed;
}

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

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

/* ── Tile-Cube 3D-Effekte ── */

.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-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-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-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-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-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-face-form .ng-face-btn { cursor: pointer; }

/* ── Tile-Tech ── */

.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-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.is-researching .ng-tile-bg { filter: none; }
.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.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;
}
.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-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-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-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);
}

/* ── Locked / Active / Busy States ── */

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

/* ── Section-Panel Animation-Resets ── */

.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-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-overlay {
	position: fixed;
	inset: 0;
	z-index: 15000;
	background: rgba(0, 0, 0, 0.60);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

/* ── Tile Progress / ETA / Pending / System Tiles ── */

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

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

/* Fortschrittsbalken in Sektions-Modals (Forschung / Hangar / Verteidigung) */
.ng-tech-progress-wrap,
.ng-hangar-progress-wrap,
.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;
	flex-shrink: 0;
}

.ng-tech-progress-bar,
.ng-hangar-progress-bar,
.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-hangar-progress-bar {
	background: linear-gradient(90deg, #9ecb6b, #c5e39b);
}

.ng-defense-progress-bar {
	background: linear-gradient(90deg, #c89d3a, #f1d17b);
}

.ng-tech-progress-bar span,
.ng-hangar-progress-bar span,
.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);
}

/* Progress-Leiste oben im Panel (wird per JS ans Ende angehängt) */
.ng-section-panel[data-section="tech"] .ng-section-panel-inner,
.ng-section-panel[data-section="hangar"] .ng-section-panel-inner,
.ng-section-panel[data-section="defense"] .ng-section-panel-inner {
	display: flex;
	flex-direction: column;
}

.ng-section-panel[data-section="tech"] .ng-tech-progress-wrap,
.ng-section-panel[data-section="hangar"] .ng-hangar-progress-wrap,
.ng-section-panel[data-section="defense"] .ng-defense-progress-wrap {
	order: -1;
}

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

/* ── Trade-Shell (Handel) ── */

.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-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: var(--ng-modal-widget-bg); border: 1px solid var(--ng-modal-widget-border); 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: var(--ng-modal-label-muted); }
.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: var(--ng-modal-widget-bg); border-color: var(--ng-modal-widget-border); 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: var(--ng-modal-input-bg); border-color: var(--ng-modal-input-border); 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(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.24); 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: var(--ng-modal-widget-bg); border-color: var(--ng-modal-widget-border); }
.ng-modal-body .ng-trade-shell .ng-trade-history-gridline, .ng-modal-card .ng-trade-shell .ng-trade-history-gridline { stroke: rgba(255, 255, 255, 0.18); }
.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); }

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: var(--ng-modal-widget-bg); border-color: var(--ng-modal-widget-border); 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: var(--ng-modal-label-muted); }
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(255, 255, 255, 0.18); }
body.ui-reboot .ng-modal-backdrop .ng-trade-shell .ng-trade-history-line { stroke: rgba(191, 239, 255, 0.92); }

/* ── Skills (Commander) ── */

.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; top: -16px; }
.ng-skills-sp-badge .ng-sp-icon { width: 64px; height: 64px; 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;
	font-size: .65rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	pointer-events: none;
	text-shadow: var(--badge-accent-text-shadow);
}
.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;
}
.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; }
}

/* ── Terminal (erweitertes Overlay) ── */

.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; }
.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-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: var(--font-body);
	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); }
.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: var(--font-body);
	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; }
.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: var(--font-body); font-size: 0.68rem; color: rgba(79, 172, 254, 0.75); letter-spacing: 0.06em; white-space: nowrap; }
.ng-terminal-counter { font-family: var(--font-body); 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; }

/* ── Messages (ng-msg-*) ── */

.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; }
.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); }
.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); }
.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); }
.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; }
.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); }
.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); }
.ng-msg-detail { width: 100%; }
.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); }
.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-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; }
}

/* ── Active Jobs ── */

.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-timer { align-items: center; background: transparent; border: none; display: flex; flex-shrink: 0; padding: 0; }
.ng-active-job-item.is-done { opacity: 0.5; }
.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-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; }
.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); } }
.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; }
.ng-job-timer.is-finishing .ng-timer-value { color: var(--ui-accent-cyan); }

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

/* ── Sonstige fehlende Klassen ── */

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

/* ═══════════════════════════════════════════════════════════════
   STADTVERWALTUNG (Modal / ng_city_administration.php)
   ═══════════════════════════════════════════════════════════════ */
.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-family: var(--font-body);
	font-size: var(--fs-h2);
	font-weight: 400;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: 0.8px;
	color: var(--ui-accent-cyan);
}

.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%, 28rem);
	margin: 0 auto;
}

/* Stadtverwaltung im Modal: kompakte Gesamtbreite */
.ng-modal-body .ng-city-admin-resources-grid,
.ng-modal-card .ng-city-admin-resources-grid {
	width: min(100%, 26rem);
}

.ng-modal-body .ng-admin-form,
.ng-modal-card .ng-admin-form {
	max-width: var(--ng-modal-field-max);
}

.ng-modal-body .ng-city-form-group,
.ng-modal-card .ng-city-form-group {
	max-width: var(--ng-modal-textarea-max);
}

.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: 0.3px;
	font-family: var(--font-body);
	font-size: var(--fs-12);
	color: var(--ui-accent-cyan);
	text-transform: uppercase;
}

.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: 0.2px;
	font-family: var(--font-body);
	font-size: var(--fs-12);
	color: rgba(191, 239, 255, 0.72);
}

.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 0.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-city-image-preview-img {
	display: block;
	max-width: 200px;
	max-height: 150px;
	border: 1px solid var(--ui-accent-cyan);
	border-radius: 8px;
}

.ng-city-coordinates {
	font-family: var(--font-body);
	font-size: var(--fs-12);
	color: var(--ui-accent-cyan);
}

.ng-city-type {
	font-family: var(--font-body);
	font-size: var(--fs-micro);
	letter-spacing: 0.12em;
	color: rgba(191, 239, 255, 0.62);
	margin-left: var(--space-8);
}

.ng-city-form-group {
	margin-bottom: var(--space-16);
}

.ng-help-content {
	display: grid;
	gap: var(--space-10);
	font-family: var(--font-body);
	font-size: var(--fs-12);
	color: rgba(191, 239, 255, 0.78);
	line-height: 1.5;
}

.ng-help-item strong {
	color: var(--ui-accent-cyan);
}

@media (min-width: 560px) {
	.ng-city-admin-resources-grid.ng-cityview-res-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

.ng-city-admin-icon { align-self: center; }

.ng-city-admin-icon:hover i,
.ng-city-admin-icon:focus-visible i {
	color: var(--ui-accent-cyan);
}
.ng-city-switcher-btn .ng-city-icon-colony { font-size: var(--fs-20); }
.ng-city-switcher-list { padding: 4px; background: transparent; }
.ng-citymap-info-tl .ng-citymap-info-line { font-size: 15px; line-height: 1.2; }

.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-grid-system { grid-area: system; }

.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;
	border-radius: 12px;
	font-size: var(--fs-12);
	font-weight: 700;
	flex-shrink: 0;
	text-shadow: var(--badge-accent-text-shadow);
}

.ng-resource-name { font-size: var(--fs-12); text-transform: uppercase; }

.ng-job-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-12); color: var(--ui-accent-cyan); }

.ng-dock-sp-badge,
.ng-skills-sp-badge__count,
.ng-combat-report-badge,
.ng-avatar-level-badge,
.ng-level-badge,
.ng-city-modal-item-badge,
.ng-badge-capital {
	background: var(--badge-accent-bg);
	color: var(--badge-accent-color);
}

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

.ng-cityview-dashboard.grid-stack, .ng-dashboard-gridstack.grid-stack {
	display: block;
	position: relative;
	width: 100%;
	min-height: 280px;
	overflow: visible;
}
.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.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);
}

.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: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-cityview-card.ng-grid-radar .ng-header-radar-mini.ng-radar-canvas-wrap:is(.ng-radar-alert, .is-alert)::before,
.ng-cityview-card.ng-grid-radar .ng-header-radar-mini.ng-radar-canvas-wrap:hover::before,
body.ui-reboot .hud-header > .ui-hud-floating-widget .ng-header-radar-mini.ng-radar-canvas-wrap:is(.ng-radar-alert, .is-alert)::before,
body.ui-reboot .hud-header > .ui-hud-floating-widget .ng-header-radar-mini.ng-radar-canvas-wrap:hover::before { opacity: 0.32; }

/* ── Avatar Modal ── */

.ng-avatar-modal-backdrop {
	position: fixed;
	inset: 0;
	background: radial-gradient(circle at 50% 35%, var(--ng-modal-backdrop-scrim), var(--ng-modal-backdrop-scrim-edge));
	z-index: 1100;
	backdrop-filter: blur(var(--ng-modal-backdrop-blur));
	-webkit-backdrop-filter: blur(var(--ng-modal-backdrop-blur));
	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: var(--ng-modal-surface);
	border: var(--ng-modal-border);
	border-radius: 14px;
	backdrop-filter: blur(var(--ng-modal-card-blur)) saturate(var(--ng-modal-card-saturate));
	-webkit-backdrop-filter: blur(var(--ng-modal-card-blur)) saturate(var(--ng-modal-card-saturate));
	box-shadow: var(--ng-modal-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.1);
	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 var(--ng-modal-header-border); background: var(--ng-modal-header-bg); flex-shrink: 0; }
.ng-avatar-modal-title { font-family: var(--font-body); font-size: var(--fs-h2); font-weight: 400; letter-spacing: 0.8px; line-height: 1.3; text-transform: none; color: var(--ui-accent-cyan); margin: 0; }
.ng-avatar-modal-close { border: 1px solid var(--ng-modal-close-border); background: var(--ng-modal-close-bg); color: var(--ng-modal-close-color); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 4px; transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease; border-radius: 10px; }
.ng-avatar-modal-close:hover { color: var(--ui-accent-cyan); border-color: rgba(255, 255, 255, 0.28); background: rgba(48, 54, 60, 0.55); box-shadow: none; }
.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); }
.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; }
.ng-avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.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; font-size: 0.65rem; font-weight: 700; padding: 2px 5px; border-radius: 3px; border: 1px solid var(--badge-accent-border); text-shadow: var(--badge-accent-text-shadow); }
.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; }
.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; }

.ng-dock-link--relative { position: relative; }
.ng-dock-tutorial-badge { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--badge-accent-border); pointer-events: none; box-shadow: var(--badge-accent-shadow); }
.ng-pref-avatar-select { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; padding: 4px 0 12px; }

/* ── 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-body); 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; }
}

/* ── Missions Modal & Levelup ── */

.ng-missions-modal { display: flex; flex-direction: column; gap: 16px; }
.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; }
.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); }
.ng-missions-tab.is-locked { opacity: .45; cursor: not-allowed; }
.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; }
.ng-missions-section-title { font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-accent, #D97706); margin-bottom: 8px; }
.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; }
.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; }
.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); color: #000; border-color: var(--color-accent, #D97706); font-weight: 600; }
.ng-missions-claim-btn:hover { background: #f59e0b; }
.ng-missions-empty { padding: 24px; text-align: center; color: rgba(255,255,255,.35); font-size: .88rem; }
.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; }
.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; }
.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; }

.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; border-radius: 10px; padding: 10px 20px; margin-bottom: 12px; animation: ng-levelup-fadein .5s ease .7s both; text-shadow: var(--badge-accent-text-shadow); }
.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; } }

/* ── Combat Modal ── */

.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: radial-gradient(circle at 50% 35%, var(--ng-modal-backdrop-scrim), var(--ng-modal-backdrop-scrim-edge)); backdrop-filter: blur(var(--ng-modal-backdrop-blur)); -webkit-backdrop-filter: blur(var(--ng-modal-backdrop-blur)); }
.ng-combat-modal-backdrop.is-open { opacity: 1; }
.ng-combat-modal-backdrop.is-open .ng-combat-modal-card { transform: scale(1); }
.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-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: 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); }

/* ── Build / Defense / Hangar / Tech ── */

.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-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-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-btn-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.ng-building-link { display: block; text-decoration: none; color: inherit; }

/* ── Airport / Fleet / Launch ── */

.ng-fleet-item-disabled { opacity: 0.4; filter: grayscale(1) brightness(0.55); pointer-events: none; }
.ng-fleet-item-disabled::before { opacity: 0.15; animation: none; }
.ng-fleet-item-disabled::after { background-image: linear-gradient(rgba(0,0,0,0.70), rgba(0,0,0,0.70)); animation: none; opacity: 1; }
.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-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-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-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-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; }

/* ── SPA Loading ── */

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

/* ── Terminal Feed / Unified Modal ── */

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

/* ── Badge (inline) ── */

.ng-badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: var(--fs-12); vertical-align: middle; margin-left: 8px; }

/* ── Modal-Content Resets (Phase 9) ── */

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: var(--ng-modal-panel-bg); border: 1px solid var(--ng-modal-widget-border); 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: var(--ng-modal-label-muted); }
body.ui-reboot .ng-modal-backdrop .ng-center-panel .ng-pref-tabs { border-color: var(--ng-modal-widget-border); background: var(--ng-modal-panel-bg); }
body.ui-reboot .ng-modal-backdrop .ng-center-panel .ng-pref-tab { color: var(--ng-modal-label-muted); }
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(255, 255, 255, 0.1); }

/* ═══════════════════════════════════════════════════════════════
   LOGIN-LANDING (ng_index.php, datasecurity, agb, impressum)
   ═══════════════════════════════════════════════════════════════ */

body.ui-reboot.ng-shell.ng-landing-page {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	box-sizing: border-box;
	background-color: var(--ui-bg-space);
	background-image: radial-gradient(ellipse 120% 80% at 50% 100%, rgba(5, 10, 21, 0.85) 0%, var(--ui-bg-space) 72%);
	overflow-x: hidden;
	--ng-landing-parallax-x: 0px;
	--ng-landing-parallax-y: 0px;
}

.ng-landing-bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	isolation: isolate;
}

.ng-landing-bg__layer,
.ng-landing-bg__stars {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.ng-landing-bg__stars {
	z-index: 1;
	transform: translate3d(
		calc(var(--ng-landing-parallax-x) * 0.55),
		calc(var(--ng-landing-parallax-y) * 0.55),
		0
	);
}

.ng-landing-bg__comet {
	position: absolute;
	inset: 0;
	z-index: 2;
	overflow: visible;
	pointer-events: none;
}

.ng-landing-bg__comet-track {
	position: absolute;
	left: 0;
	top: 0;
	width: 68px;
	height: 68px;
	will-change: transform, opacity;
	transform: translate3d(6vw, 8vh, 0) rotate(34deg);
	opacity: 0.78;
	animation: ngLandingCometPass 78s linear infinite;
}

.ng-landing-bg__comet-body {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	transform-origin: center center;
	animation: ngLandingCometTumble 18s linear infinite;
	shape-rendering: geometricPrecision;
}

@keyframes ngLandingCometTumble {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

@keyframes ngLandingCometPass {
	0% { transform: translate3d(6vw, 8vh, 0) rotate(34deg); opacity: 0.78; }
	88% { opacity: 0.62; }
	100% { transform: translate3d(94vw, 92vh, 0) rotate(34deg); opacity: 0; }
}

.ng-landing-bg__glow {
	z-index: 2;
	background:
		radial-gradient(ellipse 70% 55% at 50% 38%, rgba(79, 172, 254, 0.16) 0%, transparent 62%),
		radial-gradient(ellipse 55% 40% at 18% 72%, rgba(191, 239, 255, 0.07) 0%, transparent 58%),
		radial-gradient(ellipse 45% 35% at 82% 28%, rgba(79, 172, 254, 0.09) 0%, transparent 55%);
	opacity: 0.92;
	transform: translate3d(
		calc(var(--ng-landing-parallax-x) * 0.35),
		calc(var(--ng-landing-parallax-y) * 0.35),
		0
	);
}

.ng-landing-bg__fog {
	z-index: 3;
	filter: blur(42px);
	opacity: 0.75;
	transform: translate3d(
		calc(var(--ng-landing-parallax-x) * 0.65),
		calc(var(--ng-landing-parallax-y) * 0.65),
		0
	);
}

.ng-landing-bg__fog::before,
.ng-landing-bg__fog::after {
	content: '';
	position: absolute;
	inset: -12%;
	pointer-events: none;
}

.ng-landing-bg__fog::before {
	background:
		radial-gradient(ellipse 90% 55% at 30% 85%, rgba(79, 172, 254, 0.11) 0%, transparent 68%),
		radial-gradient(ellipse 75% 50% at 78% 18%, rgba(191, 239, 255, 0.08) 0%, transparent 65%);
}

.ng-landing-bg__fog::after {
	background: radial-gradient(ellipse 60% 45% at 52% 52%, rgba(2, 4, 8, 0.35) 0%, transparent 70%);
	opacity: 0.85;
}

.ng-landing-bg__grid {
	z-index: 4;
	background-image:
		linear-gradient(rgba(191, 239, 255, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(191, 239, 255, 0.045) 1px, transparent 1px);
	background-size: 28px 28px;
	mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 20%, transparent 78%);
	opacity: 0.55;
	transform: translate3d(
		calc(var(--ng-landing-parallax-x) * 0.18),
		calc(var(--ng-landing-parallax-y) * 0.18),
		0
	);
}

.ng-landing-bg__scan {
	z-index: 5;
	overflow: hidden;
	transform: translate3d(
		calc(var(--ng-landing-parallax-x) * 0.1),
		calc(var(--ng-landing-parallax-y) * 0.1),
		0
	);
}

.ng-landing-bg__scan::before {
	content: '';
	position: absolute;
	left: -8%;
	right: -8%;
	height: 18%;
	top: -22%;
	background: linear-gradient(
		180deg,
		transparent 0%,
		rgba(191, 239, 255, 0.02) 38%,
		rgba(79, 172, 254, 0.07) 50%,
		rgba(191, 239, 255, 0.02) 62%,
		transparent 100%
	);
	opacity: 0.85;
}

@keyframes ngLandingGlowPulse {
	0%, 100% { opacity: 0.82; }
	50% { opacity: 1; }
}

@keyframes ngLandingFogDrift {
	0% { transform: translate3d(0, 0, 0); opacity: 0.75; }
	100% { transform: translate3d(14px, -10px, 0); opacity: 0.95; }
}

@keyframes ngLandingScanSweep {
	0% { transform: translateY(-8%); }
	100% { transform: translateY(520%); }
}

@media (prefers-reduced-motion: no-preference) {
	.ng-landing-bg__glow { animation: ngLandingGlowPulse 18s ease-in-out infinite; }
	.ng-landing-bg__fog::before { animation: ngLandingFogDrift 32s ease-in-out infinite alternate; }
	.ng-landing-bg__scan::before { animation: ngLandingScanSweep 22s linear infinite; }
}

@media (prefers-reduced-motion: reduce) {
	.ng-landing-bg__glow,
	.ng-landing-bg__fog::before,
	.ng-landing-bg__scan::before { animation: none; }
	.ng-landing-bg__comet-track { animation: none; opacity: 0; }
	.ng-landing-bg__comet-body { animation: none; }
}

.landing-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	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.4), 0 0 80px rgba(255, 255, 255, 0.12); }
}

.landing-planet-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	flex-shrink: 0;
	padding: clamp(24px, 4vh, 48px) var(--space-20);
	box-sizing: border-box;
}

.landing-planet-hero .landing-logo {
	position: relative;
	z-index: 1;
}

.landing-planet-hero .landing-tagline {
	position: relative;
	z-index: 1;
	margin-bottom: 0;
}

.landing-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(2.5rem, 8vw, 5rem);
	text-transform: uppercase;
	margin-bottom: var(--space-8);
	font-family: var(--font-body);
	color: var(--ui-accent-cyan);
	letter-spacing: 4px;
	line-height: 1;
}

.landing-logo__label {
	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;
}

.landing-logo__label span,
.landing-logo span {
	color: var(--color-accent);
	opacity: 1;
}

.landing-logo--scanner .landing-logo__label {
	background: linear-gradient(90deg, var(--ui-accent-cyan) 0%, var(--ui-accent-cyan) 40%, #00ffcc 50%, var(--ui-accent-cyan) 60%, var(--ui-accent-cyan) 100%);
	background-size: 200% auto;
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	animation: ngLogoScanlight 3s linear infinite;
	text-shadow: none;
}

.landing-logo--scanner .landing-logo__label span {
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
}

@keyframes ngLogoScanlight {
	0% { background-position: -200% center; }
	100% { background-position: 200% center; }
}

.landing-logo--terminal .landing-logo__label {
	overflow: hidden;
	white-space: nowrap;
	border-right: 3px solid var(--ui-accent-cyan);
	width: 0;
	animation: ngLogoTyping 1.5s steps(13, end) forwards, ngLogoBlinkCaret 0.75s step-end infinite;
	text-shadow: none;
}

@keyframes ngLogoTyping {
	from { width: 0; }
	to { width: 13ch; }
}

@keyframes ngLogoBlinkCaret {
	from, to { border-color: transparent; }
	50% { border-color: var(--ui-accent-cyan); }
}

.landing-logo--glitch .landing-logo__label {
	position: relative;
	animation: none;
	text-shadow: none;
}

.landing-logo--glitch .landing-logo__label::before,
.landing-logo--glitch .landing-logo__label::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.8;
	pointer-events: none;
}

.landing-logo--glitch .landing-logo__label::before {
	color: #0ff;
	z-index: -1;
	animation: ngLogoGlitch 4s infinite;
	clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
	transform: translate(-2px, 1px);
}

.landing-logo--glitch .landing-logo__label::after {
	color: #f0f;
	z-index: -2;
	animation: ngLogoGlitch 4s infinite alternate-reverse;
	clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
	transform: translate(2px, -1px);
}

@keyframes ngLogoGlitch {
	0%, 96% { transform: translate(0, 0); opacity: 0; }
	97% { transform: translate(-2px, 1px); opacity: 1; }
	98% { transform: translate(2px, -1px); opacity: 1; }
	99% { transform: translate(-1px, 2px); opacity: 1; }
	100% { transform: translate(0, 0); opacity: 0; }
}

.landing-tagline {
	font-size: var(--fs-12);
	margin-bottom: var(--space-28);
	font-family: var(--font-body);
	letter-spacing: 1px;
	color: var(--ui-accent-cyan);
}

.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;
	color: var(--ui-accent-cyan);
}

.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;
	box-sizing: border-box;
}

.landing-input:-webkit-autofill,
.landing-input:-webkit-autofill:hover,
.landing-input:-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 {
	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;
	cursor: pointer;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: auto;
	box-sizing: border-box;
}

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

.landing-form > .landing-submit {
	justify-self: center;
}

.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;
	color: rgba(191, 239, 255, 0.52);
}

.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.is-primary {
	grid-column: 1 / -1;
	background: transparent;
}

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

.landing-alt-btn--disabled {
	opacity: 0.35;
	cursor: not-allowed;
	pointer-events: none;
}

.landing-alt-btn--hidden {
	display: none;
}

.landing-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: var(--landing-footer-padding-y) var(--space-20);
	padding-bottom: calc(var(--landing-footer-padding-y) + env(safe-area-inset-bottom, 0px));
	display: flex;
	justify-content: center;
	gap: var(--space-20);
	box-sizing: border-box;
	z-index: 2;
}

.landing-footer a {
	font-family: var(--font-body);
	font-size: var(--fs-12);
	color: var(--ui-accent-cyan);
	text-decoration: none;
	letter-spacing: 1px;
	transition: color 0.2s ease;
}

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

body.ui-reboot.ng-shell.ng-landing-page .landing-hero {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: clamp(16px, 3vh, 32px);
	width: 100%;
	min-height: 0;
	box-sizing: border-box;
	padding: clamp(24px, 4vh, 56px) var(--space-20) var(--space-20);
}

body.ui-reboot.ng-shell.ng-landing-page .landing-footer {
	position: relative;
	bottom: auto;
	left: auto;
	right: auto;
	z-index: 2;
	flex: 0 0 auto;
	margin-top: auto;
	width: 100%;
	box-sizing: border-box;
	padding-top: var(--landing-footer-padding-y);
	padding-bottom: calc(var(--landing-footer-padding-y) + env(safe-area-inset-bottom, 0px));
	padding-inline: var(--space-20);
}

@media (max-width: 768px) {
	body.ui-reboot.ng-shell.ng-landing-page .landing-hero {
		min-height: auto;
		padding: max(var(--space-16), env(safe-area-inset-top, 0px)) var(--space-16) var(--space-20);
		gap: 12px;
	}

	.landing-planet-hero {
		padding: 16px var(--space-16);
	}

	body.ui-reboot.ng-shell:is(.ng-landing-page, .ng-register-page, .ng-guest-page) .ng-landing-logo-globe.ng-galaxy-background {
		width: clamp(160px, 55vw, 280px);
		height: clamp(160px, 55vw, 280px);
	}

	body.ui-reboot.ng-shell.ng-landing-page .landing-logo {
		font-size: clamp(1.65rem, 7.5vw, 2.75rem);
		letter-spacing: 2px;
	}

	body.ui-reboot.ng-shell.ng-landing-page .landing-login-panel {
		width: min(480px, calc(100vw - 2 * var(--space-16)));
	}
}

/* ═══════════════════════════════════════════════════════════════
   LANDING PAGE TERMINAL ELEMENTS (ng_index.php)
   ═══════════════════════════════════════════════════════════════ */
.landing-login-panel {
	width: min(480px, 90vw);
	position: relative;
	padding: 0;
	overflow: visible;
	isolation: isolate;
	background: transparent;
	border: none;
	--landing-login-corner-border: rgba(191, 239, 255, 0.5);
	box-shadow: 0 0 28px rgba(79, 172, 254, 0.1), 0 18px 48px rgba(0, 0, 0, 0.42);
}

.ng-hud-terminal-feed.landing-login-panel {
	overflow: hidden;
}

.landing-login-panel::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: 2px;
	background:
		repeating-linear-gradient(0deg, rgba(191, 239, 255, 0.018) 0, rgba(191, 239, 255, 0.018) 1px, transparent 1px, transparent 3px),
		linear-gradient(165deg, rgba(8, 16, 28, 0.94) 0%, rgba(4, 8, 16, 0.88) 48%, rgba(6, 12, 22, 0.92) 100%);
	pointer-events: none;
}

.landing-login-panel > :not(.landing-login-panel__corner) { position: relative; z-index: 1; }

.landing-login-terminal__header {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 16px 20px 0;
	border-bottom: none;
	background:
		linear-gradient(90deg, rgba(79, 172, 254, 0.14) 0%, transparent 42%),
		linear-gradient(180deg, rgba(191, 239, 255, 0.06) 0%, transparent 100%);
	overflow: hidden;
	/* Seltene, starke Verzerrung ohne Positionsspruenge des gesamten Bereichs. */
	animation: landingTerminalFrameDistort 8.8s steps(1, end) infinite;
	will-change: clip-path, filter;
}

.landing-login-terminal__header::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(79, 172, 254, 0.2) 0%, transparent 42%),
		linear-gradient(180deg, rgba(191, 239, 255, 0.1) 0%, transparent 100%);
	mix-blend-mode: screen;
	opacity: 0.18;
	animation:
		ngGlitchBars 1.25s linear infinite,
		ngRadarGlitchDrop 8.8s steps(1, end) infinite,
		landingTerminalOverlaySlice 8.8s steps(1, end) infinite;
	will-change: clip-path, opacity, background-position;
}

.landing-login-terminal__header > * { position: relative; z-index: 1; }

.landing-login-terminal__header::after {
	content: '';
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(191, 239, 255, 0.55), transparent);
	opacity: 0.7;
	pointer-events: none;
}

.landing-login-terminal__header-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-12); }

.landing-login-terminal__badge {
	font-family: var(--font-body);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 3px 8px;
	border: 1px solid var(--badge-accent-border);
	font-weight: 700;
	text-shadow: var(--badge-accent-text-shadow);
	background: var(--badge-accent-bg);
	color: var(--badge-accent-color);
}

.landing-login-terminal__channel {
	font-family: var(--font-body);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 3px 8px;
	border: 1px solid rgba(79, 172, 254, 0.35);
	color: rgba(191, 239, 255, 0.78);
	background: rgba(2, 6, 14, 0.65);
}

.landing-login-terminal__title {
	margin: 0;
	text-align: center;
	font-family: var(--font-body);
	font-size: clamp(1.1rem, 3.2vw, 1.35rem);
	font-weight: 600;
	letter-spacing: 0.42em;
	text-indent: 0.42em;
	text-transform: uppercase;
	color: var(--ui-accent-cyan);
	text-shadow: 0 0 16px rgba(79, 172, 254, 0.35);
}

.landing-login-terminal__title-text,
.landing-login-terminal__status-text {
	position: relative;
	display: inline-block;
	animation: landingTerminalGlyphWarp 8.8s steps(1, end) infinite;
	will-change: filter, clip-path;
}

.landing-login-terminal__title-text::before,
.landing-login-terminal__title-text::after,
.landing-login-terminal__status-text::before,
.landing-login-terminal__status-text::after {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	mix-blend-mode: screen;
}

.landing-login-terminal__title-text::before,
.landing-login-terminal__status-text::before {
	color: rgba(0, 255, 255, 0.95);
	animation: landingTerminalTextSlice 8.8s steps(1, end) infinite;
}

.landing-login-terminal__title-text::after,
.landing-login-terminal__status-text::after {
	color: rgba(255, 0, 255, 0.95);
	animation: landingTerminalTextSlice 8.8s steps(1, end) infinite reverse;
}

.landing-login-terminal__status-text::before,
.landing-login-terminal__status-text::after,
.landing-login-terminal__status-text {
	animation-delay: -1.2s;
}

.landing-login-terminal__subtitle {
	margin: 10px 0 0;
	text-align: center;
	font-family: var(--font-body);
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(191, 239, 255, 0.52);
}

.landing-login-terminal__status {
	margin: 10px 0 0;
	padding: 8px 10px;
	border: 1px solid rgba(79, 172, 254, 0.14);
	background: rgba(0, 0, 0, 0.28);
	font-family: var(--font-body);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(191, 239, 255, 0.62);
	text-align: center;
}

.landing-login-terminal__status-label {
	display: inline-block;
	margin-right: 8px;
	padding: 1px 5px;
	color: var(--color-accent);
	border: 1px solid rgba(217, 119, 6, 0.35);
}

.landing-login-terminal__warn-banderole,
.warn-banderole {
	flex-shrink: 0;
	width: calc(100% + 40px);
	margin: 14px -20px 0;
	height: 25px;
	background: repeating-linear-gradient(-45deg, #ffcc00, #ffcc00 10px, #111111 10px, #111111 20px);
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.landing-login-terminal__body {
    padding: 5px 0px;
}

.landing-login-terminal__footer {
	padding: 14px 18px 16px;
	border-top: 1px solid rgba(79, 172, 254, 0.2);
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0%, transparent 100%), rgba(2, 5, 12, 0.55);
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.ng-hud-terminal-feed .landing-login-terminal__footer {
	padding: 10px 12px 12px;
}

/* Terminal-Cursor (blinkend) */
.landing-login-terminal__cursor {
	display: inline-block;
	width: 7px;
	height: 1em;
	margin-left: 2px;
	vertical-align: text-bottom;
	background: rgba(191, 239, 255, 0.75);
	animation: landingLoginTerminalBlink 1.05s step-end infinite;
}

@keyframes landingLoginTerminalBlink {
	0%, 49% { opacity: 1; }
	50%, 100% { opacity: 0; }
}

@keyframes landingTerminalFrameDistort {
	0%, 95%, 100% {
		clip-path: inset(0 0 0 0);
		filter: none;
	}
	96% {
		clip-path: polygon(0 0, 100% 0, 100% 38%, 0 42%);
		filter: contrast(1.24) saturate(1.2);
	}
	97% {
		clip-path: polygon(0 12%, 100% 4%, 100% 100%, 0 92%);
		filter: contrast(1.3) saturate(1.3);
	}
	98% {
		clip-path: polygon(0 0, 100% 10%, 100% 84%, 0 100%);
		filter: contrast(1.35) saturate(1.35);
	}
	99% {
		clip-path: inset(0 0 0 0);
		filter: contrast(1.08);
	}
}

@keyframes landingTerminalOverlaySlice {
	0%, 95%, 100% {
		opacity: 0.12;
		clip-path: inset(0 0 0 0);
	}
	96% {
		opacity: 0.5;
		clip-path: inset(6% 0 58% 0);
	}
	97% {
		opacity: 0.6;
		clip-path: inset(46% 0 18% 0);
	}
	98% {
		opacity: 0.52;
		clip-path: inset(74% 0 6% 0);
	}
	99% {
		opacity: 0.16;
		clip-path: inset(0 0 0 0);
	}
}

@keyframes landingTerminalGlyphWarp {
	0%, 95%, 100% {
		filter: none;
		clip-path: inset(0 0 0 0);
	}
	96% {
		filter: blur(0.25px) contrast(1.25);
		clip-path: inset(4% 0 54% 0);
	}
	97% {
		filter: blur(0.2px) contrast(1.35);
		clip-path: inset(48% 0 18% 0);
	}
	98% {
		filter: blur(0.15px) contrast(1.28);
		clip-path: inset(70% 0 4% 0);
	}
	99% {
		filter: none;
		clip-path: inset(0 0 0 0);
	}
}

@keyframes landingTerminalTextSlice {
	0%, 95%, 100% {
		opacity: 0;
		clip-path: inset(0 0 0 0);
		transform: skewX(0deg);
	}
	96% {
		opacity: 0.95;
		clip-path: inset(0 0 58% 0);
		transform: skewX(16deg);
	}
	97% {
		opacity: 0.9;
		clip-path: inset(44% 0 22% 0);
		transform: skewX(-14deg);
	}
	98% {
		opacity: 0.92;
		clip-path: inset(74% 0 2% 0);
		transform: skewX(12deg);
	}
	99% {
		opacity: 0;
		clip-path: inset(0 0 0 0);
		transform: skewX(0deg);
	}
}

@keyframes ngGlitchBars {
	0% { background-position: 0 0; }
	100% { background-position: 0 40px; }
}

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

/* Alien-Schrift-Code (Braille-Zeichen) – im Footer umbrechen, nicht ueberstehen */
.landing-login-terminal__alien-script {
	margin: 0 0 6px;
	max-width: 100%;
	font-family: var(--font-body);
	font-size: 10px;
	line-height: 1.45;
	letter-spacing: 0.06em;
	word-spacing: 0.1em;
	color: rgba(191, 239, 255, 0.28);
	text-shadow: 0 0 8px rgba(79, 172, 254, 0.12);
	overflow-wrap: anywhere;
	word-break: break-word;
	hyphens: auto;
}

.ng-hud-terminal-feed .landing-login-terminal__alien-script {
	font-size: 9px;
	letter-spacing: 0.04em;
	word-spacing: 0.06em;
	line-height: 1.4;
}

.landing-login-terminal__alien-script:last-of-type {
	margin-bottom: 10px;
}

/* Footer-Meta-Zeile */
.landing-login-terminal__footer-meta {
	margin: 0;
	max-width: 100%;
	font-family: var(--font-body);
	font-size: 9px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	color: rgba(191, 239, 255, 0.4);
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Responsive: Terminal-Cursor und Header-Glitch ohne Animation */
@media (prefers-reduced-motion: reduce) {
	.landing-login-terminal__header,
	.landing-login-terminal__header::before,
	.landing-login-terminal__title-text,
	.landing-login-terminal__title-text::before,
	.landing-login-terminal__title-text::after,
	.landing-login-terminal__status-text,
	.landing-login-terminal__status-text::before,
	.landing-login-terminal__status-text::after,
	.landing-login-terminal__cursor {
		animation: none;
	}

	.landing-login-terminal__cursor {
		opacity: 0.6;
	}

	.landing-login-terminal__header::before {
		opacity: 0.12;
	}
}

.landing-login-panel__corner { position: absolute; width: 24px; height: 24px; pointer-events: none; z-index: 3; border-color: var(--landing-login-corner-border); }
.landing-login-panel__corner--tl { top: 0; left: 0; border-top: 1px solid var(--landing-login-corner-border); border-left: 1px solid var(--landing-login-corner-border); }
.landing-login-panel__corner--tr { top: 0; right: 0; border-top: 1px solid var(--landing-login-corner-border); border-right: 1px solid var(--landing-login-corner-border); }
.landing-login-panel__corner--bl { bottom: 0; left: 0; border-bottom: 1px solid var(--landing-login-corner-border); border-left: 1px solid var(--landing-login-corner-border); }
.landing-login-panel__corner--br { bottom: 0; right: 0; border-bottom: 1px solid var(--landing-login-corner-border); border-right: 1px solid var(--landing-login-corner-border); }

.landing-login-panel .landing-input-group label {
	letter-spacing: 0.16em;
	color: rgba(191, 239, 255, 0.52);
}

.landing-login-panel .landing-input {
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.35);
	border-color: rgba(79, 172, 254, 0.32);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.landing-login-panel .landing-input:focus {
	border-color: var(--ui-accent-cyan);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.45),
		0 0 0 1px rgba(79, 172, 254, 0.35),
		0 0 14px rgba(79, 172, 254, 0.18);
}

.landing-login-panel .landing-submit {
	border-radius: 2px;
	letter-spacing: 0.18em;
	background: linear-gradient(180deg, rgba(79, 172, 254, 0.12) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.landing-login-panel .landing-submit:hover {
	background: linear-gradient(180deg, rgba(79, 172, 254, 0.22) 0%, rgba(0, 0, 0, 0.15) 100%);
	box-shadow: 0 0 16px rgba(79, 172, 254, 0.2);
}

.landing-login-panel .landing-error {
	border-radius: 2px;
	background: rgba(40, 12, 8, 0.45);
	border-color: rgba(255, 85, 51, 0.55);
}

.landing-login-panel .landing-divider::before,
.landing-login-panel .landing-divider::after {
	background: linear-gradient(90deg, transparent, rgba(79, 172, 254, 0.35), transparent);
}

/* ═══════════════════════════════════════════════════════════════
   TERMINAL MODAL (Grosses Terminal-Overlay)
   ═══════════════════════════════════════════════════════════════ */
.ng-terminal-backdrop {
	z-index: 99000;
}

.ng-terminal-backdrop.is-visible,
.ng-terminal-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
	background: radial-gradient(circle at 50% 35%, var(--ng-modal-backdrop-scrim), var(--ng-modal-backdrop-scrim-edge));
	backdrop-filter: blur(var(--ng-modal-backdrop-blur));
	-webkit-backdrop-filter: blur(var(--ng-modal-backdrop-blur));
}

.ng-terminal-backdrop.is-closing {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.24s ease;
}

.ng-terminal-card.ng-modal-dock {
	width: min(1060px, 95vw);
	max-width: min(1060px, 95vw);
	display: flex;
	flex-direction: row;
	overflow: hidden;
}

.ng-terminal-card .ng-terminal-header {
	position: relative;
	flex-shrink: 0;
}

.ng-terminal-card .ng-terminal-title-row {
	position: relative;
	min-height: 3.25rem;
	padding: 12px 20px;
	box-sizing: border-box;
}

.ng-terminal-card .ng-terminal-close {
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
}

/* Weltrangliste im Dock-Modal */
.ng-modal-card.ng-modal-dock .ng-table th,
.ng-modal-card.ng-modal-dock .ng-table td {
	vertical-align: middle;
	text-align: center;
}

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

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

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

.ng-terminal-feed { font-size: var(--fs-12); overflow: auto; position: relative; border-radius: 12px; padding: 10px; border: none; }

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.ng-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-8);
	padding: 8px 16px;
	border: 1px solid rgba(79, 172, 254, 0.24);
	border-radius: 8px;
	background: rgba(8, 16, 28, 0.6);
	color: var(--ui-accent-cyan);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	cursor: pointer;
	transition: border-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}

.ng-button:hover {
	border-color: rgba(191, 239, 255, 0.4);
	box-shadow: 0 0 14px rgba(79, 172, 254, 0.2);
}

.ng-button-primary {
	background: linear-gradient(180deg, rgba(79, 172, 254, 0.18), rgba(2, 4, 8, 0.3));
	border-color: rgba(79, 172, 254, 0.35);
}

/* ═══════════════════════════════════════════════════════════════
   CITYVIEW CARD (Basis, fuer Sections-Cards)
   ═══════════════════════════════════════════════════════════════ */
.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);
}

.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 {
	font-family: var(--font-body);
	padding: 8px 10px;
	font-size: var(--fs-12);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ui-accent-cyan);
}

body.ui-reboot .ng-cityview-card-title { font-family: var(--font-body); }

/* ═══════════════════════════════════════════════════════════════
   MOBILE NAV OVERLAY
   ═══════════════════════════════════════════════════════════════ */
.ng-mobile-nav-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(2, 4, 8, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.ng-mobile-nav-overlay.is-open { display: flex; }

.ng-mobile-nav-panel {
	width: min(320px, 90vw);
	max-height: 100vh;
	overflow-y: auto;
	padding: 20px;
	background: linear-gradient(155deg, rgba(10, 20, 30, 0.9), rgba(6, 12, 22, 0.8));
	border-right: 1px solid rgba(79, 172, 254, 0.2);
}

.ng-mobile-nav-close {
	position: absolute;
	top: 12px;
	right: 12px;
	background: none;
	border: none;
	color: var(--ui-accent-cyan);
	font-size: 24px;
	cursor: pointer;
}

.ng-mobile-nav-list {
	list-style: none;
	padding: 0;
	margin: 24px 0 0;
}

.ng-mobile-nav-list li a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 8px;
	color: var(--ui-accent-cyan);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	border-bottom: 1px solid rgba(79, 172, 254, 0.1);
}

.ng-mobile-nav-list li a:hover { background: rgba(79, 172, 254, 0.08); }
.ng-mobile-nav-list li a i { font-size: 18px; }

/* ── City Switcher ── */
.ng-city-switcher { position: relative; }
.ng-city-switcher-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
}
.ng-city-switcher-dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 100;
	min-width: 200px;
	background: linear-gradient(155deg, rgba(10, 20, 30, 0.92), rgba(6, 12, 22, 0.82));
	border: 1px solid rgba(79, 172, 254, 0.24);
	border-radius: 8px;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
	padding: 4px;
}
.ng-city-coords { font-family: var(--font-body); font-size: var(--fs-body); }

/* ═══════════════════════════════════════════════════════════════
   ng-root-grid & Additional Structural Elements
   ═══════════════════════════════════════════════════════════════ */
.ng-root-grid { position: relative; }

/* ── Comm Tabs ── */
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%;
}

/* ── ng-header-debug ── */
.ng-header-debug-badge {
	position: fixed;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 99999;
	background: rgba(255, 0, 255, 0.3);
	color: #fff;
	padding: 4px 12px;
	font-size: 10px;
	border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1400px) {
	.ng-hud-grid { grid-template-columns: 300px 1fr 300px; }
	.ng-hud-center-stage .ng-grid-citymap { width: min(560px, 54vw); height: min(390px, 48vh); }
	.ng-hud-topbar .hud-header { grid-template-columns: auto minmax(0, 1fr) auto; }
	.ng-hud-topbar .hud-header > .ng-header-primary.ng-header-top-left { max-width: none; }
	.ng-hud-topbar .hud-header > .ui-hud-floating-widget { width: auto; max-width: none; min-width: 0; }
}

@media (max-width: 1100px) {
	.ng-hud-grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr auto auto;
	}

	.ng-hud-topbar,
	.ng-hud-column--left,
	.ng-hud-column--right,
	.ng-hud-center-stage,
	.ng-hud-bottombar { grid-column: 1; }

	.ng-hud-column--left { grid-row: 2; }
	.ng-hud-center-stage { grid-row: 2; }
	.ng-hud-column--right { grid-row: 3; }
	.ng-hud-bottombar { grid-row: 4; }
}

@media (max-width: 768px) {
	:root {
		--fs-h1: 24px;
		--fs-h2: 16px;
		--fs-h3: 13px;
		--fs-body: 12px;
		--fs-micro: 8px;
		--fs-14: 13px;
		--fs-16: 13px;
		--fs-18: 16px;
		--fs-20: 16px;
	}
	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; }
	.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;
	}
	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: 1 / -1; width: 100%; max-width: 100%; min-width: 0; justify-self: stretch; overflow: visible; }
	body.ui-reboot .hud-header > .ng-header-top-left { grid-column: 1; width: 100%; padding: var(--space-4); }
	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; }
	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; }
	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; }
	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, .ng-tile-dashboard { width: 100% !important; max-width: 100% !important; padding: 0; }
	.ng-cityview-card.ng-grid-radar { overflow: hidden; }
	.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; }
	.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, .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; }
	body.ui-reboot.ng-shell.ng-game-layout .ng-dashboard-scene > .ng-galaxy-background { position: relative !important; width: 100% !important; height: 240px !important; order: 8; }
	body.ui-reboot.ng-shell.ng-game-layout .ng-dashboard-scene > .ng-galaxy-background .ng-galaxy-canvas { position: absolute !important; inset: 0; }
	.ng-citymap-info-tr { display: none !important; }
	.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; }
	.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(5.25rem, 5.25rem));
		gap: var(--space-4) var(--space-8);
	}
	.ui-hud-micro-group[data-group="oxygen"] { min-width: 5.25rem; grid-template-columns: minmax(5.25rem, 5.25rem); }
	.ui-hud-micro-item { min-width: 5.25rem; grid-template-columns: 1.1em minmax(9ch, 9ch); }
	.ui-hud-micro-item .v { min-width: 9ch; }
	.ui-hud-micro-item .ui-hud-prod { min-width: 8ch; }
	body.ui-reboot .hud-header > .ui-hud-micro { min-width: 0; flex: 1 1 auto; }
	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 { height: 18px; min-height: 18px; }
	.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-modal-title.ng-modal-title--coordinates .ng-coord-modal-title-bar { gap: var(--space-8); }
	.ng-modal-title.ng-modal-title--coordinates .ng-coord-embed-navbtn { width: 32px; min-width: 32px; min-height: 32px; 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-player-avatar--sm, .ng-page-coordinates .ng-player-avatar--sm { width: 18px; height: 18px; max-width: 18px; max-height: 18px; margin-right: 2px; }
	.ng-coord-embed .ng-col-name, .ng-page-coordinates .ng-col-name { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.ng-coord-embed .ng-coord-table :is(th, td).ng-col-owner { width: var(--ng-coord-col-owner); min-width: 20rem; max-width: none; overflow: visible; text-overflow: clip; white-space: nowrap; }
	.ng-coord-embed .ng-coord-table .ng-col-owner .ng-coord-link { max-width: none; overflow: visible; text-overflow: clip; }
	.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); }
	.ng-header-skills-mobile-only { display: inline-flex; }
	.ng-hud-bottombar .ng-dock-nav-list > li.ng-dock-item--home-desktop,
	.ng-hud-bottombar .ng-dock-nav-list > li.ng-dock-item--grid-cleanup-desktop,
	.ng-hud-bottombar .ng-dock-nav-list > li.ng-dock-logout,
	.ng-hud-bottombar .ng-dock-nav-list > li.ng-dock-item--commander-skills { display: none !important; }
}

@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: 900px) {
	body.ui-reboot.ng-shell.ng-game-layout .ng-dashboard-layout--mobile-static .ng-cityview-dashboard.grid-stack,
	body.ui-reboot.ng-shell.ng-game-layout .ng-dashboard-layout--mobile-static .ng-dashboard-gridstack.grid-stack { display: flex !important; flex-direction: column !important; position: relative !important; height: auto !important; gap: 8px; }
	body.ui-reboot.ng-shell.ng-game-layout .ng-dashboard-layout--mobile-static .ng-cityview-dashboard.grid-stack > .grid-stack-item,
	body.ui-reboot.ng-shell.ng-game-layout .ng-dashboard-layout--mobile-static .ng-dashboard-gridstack.grid-stack > .grid-stack-item { position: relative !important; width: auto !important; height: auto !important; left: auto !important; top: auto !important; }
	body.ui-reboot.ng-shell .ng-cityview-dashboard.grid-stack > .grid-stack-item[data-gs-id="cv_jobs"],
	body.ui-reboot.ng-shell .ng-dashboard-gridstack.grid-stack > .grid-stack-item[data-gs-id="cv_jobs"] { order: 1; }
	body.ui-reboot.ng-shell .ng-cityview-dashboard.grid-stack > .grid-stack-item[data-gs-id="cv_flotten_incoming"],
	body.ui-reboot.ng-shell .ng-dashboard-gridstack.grid-stack > .grid-stack-item[data-gs-id="cv_flotten_incoming"] { order: 2; }
	body.ui-reboot.ng-shell .ng-cityview-dashboard.grid-stack > .grid-stack-item[data-gs-id="cv_flotten_outgoing"],
	body.ui-reboot.ng-shell .ng-dashboard-gridstack.grid-stack > .grid-stack-item[data-gs-id="cv_flotten_outgoing"] { order: 3; }
	body.ui-reboot.ng-shell .ng-cityview-dashboard.grid-stack > .grid-stack-item[data-gs-id="cv_citymap"],
	body.ui-reboot.ng-shell .ng-dashboard-gridstack.grid-stack > .grid-stack-item[data-gs-id="cv_citymap"] { order: 4; }
	body.ui-reboot.ng-shell .ng-cityview-dashboard.grid-stack > .grid-stack-item[data-gs-id="cv_combat_reports"],
	body.ui-reboot.ng-shell .ng-dashboard-gridstack.grid-stack > .grid-stack-item[data-gs-id="cv_combat_reports"] { order: 5; }
	body.ui-reboot.ng-shell .ng-cityview-dashboard.grid-stack > .grid-stack-item[data-gs-id="cv_radar"],
	body.ui-reboot.ng-shell .ng-dashboard-gridstack.grid-stack > .grid-stack-item[data-gs-id="cv_radar"] { order: 6; }
	body.ui-reboot.ng-shell .ng-cityview-dashboard.grid-stack > .grid-stack-item:not([data-gs-id="cv_jobs"]):not([data-gs-id="cv_flotten_incoming"]):not([data-gs-id="cv_flotten_outgoing"]):not([data-gs-id="cv_combat_reports"]):not([data-gs-id="cv_radar"]):not([data-gs-id="cv_citymap"]),
	body.ui-reboot.ng-shell .ng-dashboard-gridstack.grid-stack > .grid-stack-item:not([data-gs-id="cv_jobs"]):not([data-gs-id="cv_flotten_incoming"]):not([data-gs-id="cv_flotten_outgoing"]):not([data-gs-id="cv_combat_reports"]):not([data-gs-id="cv_radar"]):not([data-gs-id="cv_citymap"]) { order: 10; }
	body.ui-reboot.ng-shell .ng-cityview-dashboard.grid-stack > .grid-stack-item[data-gs-id="cv_jobs"]:not(:has(.ng-active-job-item)),
	body.ui-reboot.ng-shell .ng-dashboard-gridstack.grid-stack > .grid-stack-item[data-gs-id="cv_jobs"]:not(:has(.ng-active-job-item)) { display: none !important; }
	body.ui-reboot.ng-shell .ng-cityview-dashboard.grid-stack > .grid-stack-item[data-gs-id="cv_flotten_incoming"]:not(:has(.ng-flight-list--has-incoming)),
	body.ui-reboot.ng-shell .ng-dashboard-gridstack.grid-stack > .grid-stack-item[data-gs-id="cv_flotten_incoming"]:not(:has(.ng-flight-list--has-incoming)) { display: none !important; }
	body.ui-reboot.ng-shell .ng-cityview-dashboard.grid-stack > .grid-stack-item[data-gs-id="cv_flotten_outgoing"]:not(:has(.ng-flight-list--has-outgoing)),
	body.ui-reboot.ng-shell .ng-dashboard-gridstack.grid-stack > .grid-stack-item[data-gs-id="cv_flotten_outgoing"]:not(:has(.ng-flight-list--has-outgoing)) { display: none !important; }
	body.ui-reboot.ng-shell .ng-cityview-dashboard .ng-card-drag-handle,
	body.ui-reboot.ng-shell .ng-dashboard-gridstack .ng-card-drag-handle { display: none; }
	body.ui-reboot.ng-shell.ng-game-layout { overflow-y: auto; overflow-x: hidden; height: auto; min-height: 100vh; min-height: 100dvh; }
	body.ui-reboot.ng-shell.ng-game-layout .ui-shell.ui-shell--modules { height: auto; min-height: min(100vh, 100dvh); overflow: visible; }
	body.ui-reboot.ng-shell.ng-game-layout .ui-shell .ui-center-hero { flex: 0 0 auto; min-height: 0; overflow: visible; }
	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,
	body.ui-reboot.ng-shell.ng-game-layout .ui-shell .ui-center-hero .ui-frame.ui-frame--heavy.ng-sections-frame,
	body.ui-reboot.ng-shell.ng-game-layout .ui-shell .ui-center-hero .ui-frame.ui-frame--heavy.ng-sections-frame > .ui-frame__body,
	body.ui-reboot.ng-shell.ng-game-layout .ng-shell-center,
	body.ui-reboot.ng-shell.ng-game-layout #ng-tile-dashboard,
	body.ui-reboot.ng-shell.ng-game-layout .ng-tile-dashboard { flex: 0 0 auto; min-height: 0; overflow: visible; }
	body.ui-reboot.ng-shell.ng-game-layout .ng-dashboard-scene { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-8); overflow: visible; flex: 0 0 auto; min-height: 0; height: auto; }
	body.ui-reboot.ng-shell.ng-game-layout .ng-dashboard-scene > .ng-cityview-dashboard.grid-stack { order: 1; flex: 0 0 auto; width: 100%; min-height: 0; }
	body.ui-reboot.ng-shell.ng-game-layout .ng-dashboard-scene > .ng-galaxy-background { order: 100; flex: 0 0 auto; width: 100%; position: relative !important; inset: auto !important; z-index: 1; min-height: 200px !important; height: auto !important; max-height: min(52vh, 360px) !important; }
	body.ui-reboot.ng-shell.ng-game-layout .ng-dashboard-scene > .ng-galaxy-background .ng-galaxy-canvas { position: absolute; inset: 0; touch-action: none; }
	body.ui-reboot.ng-shell.ng-game-layout .ui-shell.ui-shell--modules > .dock { flex: 0 0 auto; width: 100%; max-width: 100%; margin: 0; }
	body.ui-reboot.ng-shell.ng-game-layout .ui-shell.ui-shell--modules > .dock .ng-dock-panel { width: 100%; max-width: 100%; align-self: stretch; margin-left: 0; margin-right: 0; box-sizing: border-box; }
}

@media (max-width: 480px) {
	body.ui-reboot .hud-header .ng-header-player-name { font-size: 10px; }
	.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 {
		max-width: 60px;
	}
	.ng-coord-embed .ng-coord-table :is(th, td).ng-col-owner {
		min-width: 16rem;
		max-width: none;
		overflow: visible;
	}
	.ng-page-coordinates .ng-coord-table :is(th, td).ng-col-owner {
		min-width: 11rem;
		max-width: none;
	}
	.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;
	}
}

/* ═══════════════════════════════════════════════════════════════
   ZUSAETZLICHE UTILITY-KLASSEN & KOMPATIBILITAET
   ═══════════════════════════════════════════════════════════════ */
.ng-flex { display: flex; }
.ng-flex-col { flex-direction: column; }
.ng-gap-6 { gap: 6px; }
.ng-gap-10 { gap: 10px; }
.ng-justify-right { justify-content: flex-end; }
.ng-mt-5 { margin-top: 5px; }
.ng-font-12 { font-size: var(--fs-12); }
.ng-text-muted { color: rgba(191, 239, 255, 0.55); }
.ng-input {
	width: 100%;
	padding: 8px 12px;
	background: rgba(8, 16, 26, 0.72);
	border: 1px solid rgba(79, 172, 254, 0.24);
	color: var(--ui-accent-cyan);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	border-radius: 6px;
}
.ng-input:focus { border-color: var(--ui-accent-cyan); box-shadow: 0 0 0 2px rgba(191, 239, 255, 0.12); outline: none; }

/* Body-Scroll-Lock fuer Burger-Menu */
.ng-body-no-scroll { overflow: hidden !important; }

/* Scramble-Text Effekt (ng_scramble_text.js) */
.ng-scramble-char { display: inline-block; }

/* Galaxy-Tooltip (Basis; Karten-Layout siehe .ng-galaxy-tooltip--overlay oben) */
.ng-galaxy-tooltip {
	font-family: var(--font-body);
	font-size: var(--fs-body);
	color: var(--ui-accent-cyan);
	pointer-events: none;
}

/* ── Fehlende UI-Elemente ── */
.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;
}
.ng-hud-stats-btn:hover { color: var(--ui-accent-blue); }

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

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

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

/* Res-Meter mit korrrekter Basis */
.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;
}

/* ── Cityview Cards (fuer Sections: Bau, Tech, Hangar, Defense, Airport) ── */
.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 {
	color: rgba(255, 255, 255, 0.72);
	opacity: 1;
}

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

/* ── Dock: alte fixed-Positionierung entfernen ── */
body.ui-reboot.ng-shell .ui-shell .dock {
	display: none;
}

/* ── SPA Content ── */
#ng-spa-content { font-family: var(--font-body); color: var(--ui-accent-cyan); }

/* ── Tab-Styles ── */
.tab, .tab-group__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4) var(--space-12);
	font-family: var(--font-body);
	font-size: var(--fs-12);
	color: var(--ui-accent-cyan);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 8px;
	cursor: pointer;
	transition: background var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
	text-decoration: none;
}

.tab:hover, .tab-group__item:hover {
	background: rgba(79, 172, 254, 0.08);
	border-color: rgba(79, 172, 254, 0.2);
}

.tab.is-active, .tab-group__item.is-active {
	background: rgba(79, 172, 254, 0.12);
	border-color: rgba(191, 239, 255, 0.3);
	color: var(--ui-accent-cyan);
}

/* ── Combat Report Badge ── */
@keyframes ng-unread-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.15); } }

/* ── Defense: aktive Job-Pulsierung am Dock-Icon ── */
.ng-dock-link.is-defense-active i,
.ng-dock-link.is-build-active i,
.ng-dock-link.is-tech-active i,
.ng-dock-link.is-hangar-active i {
	color: var(--color-accent);
	filter: drop-shadow(0 0 4px rgba(217, 119, 6, 0.6));
	animation: ng-sp-dock-pulse 2s ease-in-out infinite;
}
@keyframes ng-sp-dock-pulse {
	0%, 100% { filter: drop-shadow(0 0 6px rgba(217,119,6,.6)) drop-shadow(0 0 10px rgba(217,119,6,.2)); }
	50%       { filter: drop-shadow(0 0 12px rgba(217,119,6,.9)) drop-shadow(0 0 20px rgba(217,119,6,.4)); }
}

/* ── Avatar Ring & Scan Animationen ── */
@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; }
}

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