/* Extracted from index.html inline <style> to consolidate styles */

/* Advanced CSS Custom Properties */
:root {
    --primary-gradient: linear-gradient(160deg, #070b1a 0%, #0f1629 40%, #151030 100%);
    --primary-dark: #0f1629;
    --primary-light: #151030;
    --secondary-gradient: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
    --accent-color: #10b981;
    --accent-hover: #059669;
    --success-color: #22c55e;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    --text-light: rgba(255, 255, 255, 0.98);
    --text-muted: rgba(255, 255, 255, 0.85);
    --text-subtle: rgba(255, 255, 255, 0.7);
    --glass-bg: rgba(255, 255, 255, 0.12);
    --glass-bg-strong: rgba(255, 255, 255, 0.18);
    --glass-border: rgba(255, 255, 255, 0.25);
    --glass-border-strong: rgba(255, 255, 255, 0.35);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    --border-radius-sm: 8px;
    --border-radius: 12px;
    --border-radius-lg: 16px;
    --border-radius-xl: 20px;
    --border-radius-2xl: 24px;
    --font-primary: 'Inter', -apple-system, blinkmacsystemfont, 'Segoe UI', 'Helvetica Neue', arial, var(--emoji-fonts, 'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji','Twemoji Mozilla','EmojiOne Color','Segoe UI Symbol'), sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --z-loading: 9999;
    --z-modal: 9998;
    --z-overlay: 9997;
    --mobile-breakpoint: 768px;
    --tablet-breakpoint: 1024px;
    --desktop-breakpoint: 1200px;
    --wide-breakpoint: 1440px;
}

/* Scope resets under the EGKits app */
.egk-app *, .egk-app *::before, .egk-app *::after { box-sizing: border-box; }
html.egk-app { line-height: 1.15; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }

body.egk-app { overflow: hidden;
 height: 100%;
 margin: 0; padding: 0;
 background: var(--primary-gradient); font-family: var(--font-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizelegibility; font-feature-settings: 'kern' 1, 'liga' 1; font-variant-numeric: tabular-nums; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; touch-action: manipulation; }

.egk-app #app { position: relative;
 overflow: hidden;
 width: 100%; min-height: 100vh; min-height: 100dvh;
 background: var(--primary-gradient); }

body.egk-app.app-ready { overflow: auto;
 background: var(--mud-palette-background, #f8fafc);
 transition: background-color var(--transition-slow); }

html.egk-app.app-ready { overflow: auto;
 background: var(--mud-palette-background, #f8fafc); }

.egk-app #app.app-ready { overflow: visible;
 height: auto; min-height: 100vh; min-height: 100dvh;
 background: transparent;
 transition: background-color var(--transition-slow); }

.egk-app .loading-overlay { position: fixed; top: 0; left: 0; z-index: var(--z-loading);
 display: flex; align-items: center; justify-content: center;
 width: 100%; height: 100%;
 padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
 background: var(--primary-gradient); backdrop-filter: blur(12px); backdrop-filter: blur(12px); user-select: none; user-select: none; }

.egk-app .loading-overlay::before { content: ''; position: absolute; top: 0; left: 0;
 width: 100%; height: 100%;
 background: radial-gradient(ellipse 600px 600px at 20% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 70%), radial-gradient(ellipse 500px 500px at 80% 20%, rgba(139, 92, 246, 0.07) 0%, transparent 70%), radial-gradient(ellipse 800px 400px at 50% 50%, rgba(99, 102, 241, 0.04) 0%, transparent 60%);
 animation: backgroundShift 25s ease-in-out infinite; }
@keyframes backgroundShift { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.7; } }
.egk-app .loading-overlay.peek { transition: opacity var(--transition-normal) ease; opacity: 0.15; pointer-events: none; }
.egk-app .loading-overlay.fade-out { animation: professionalFadeOut 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
@keyframes professionalFadeOut { 0% { backdrop-filter: blur(12px); opacity: 1; transform: scale(1); }

 100% { visibility: hidden;
 backdrop-filter: blur(0); opacity: 0; transform: scale(1.01); pointer-events: none; } }

.egk-app .loading-content { position: relative; z-index: 10;
 max-width: min(90vw, 420px);
 margin: 0 auto; padding: 1.5rem 1rem;
 color: var(--text-light); text-align: center; }
.egk-app .loading-overlay.fade-out .loading-content { animation: contentSlideUp 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
@keyframes contentSlideUp { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-20px) scale(0.98); } }

.egk-app .loading-logo-container { position: relative;
 display: flex; align-items: center; justify-content: center; margin-bottom: 2.5rem; perspective: 1000px; }

.egk-app .loading-logo { position: relative; z-index: 10;
 display: flex; align-items: center; justify-content: center;
 width: 140px; height: 140px;
 border: none; border-radius: 50%;
 background: transparent;
 transition: all var(--transition-slow) cubic-bezier(0.25, 1, 0.5, 1); animation: professionalFloat 8s ease-in-out infinite;
 box-shadow: none; will-change: transform; }

.egk-app .loading-logo img { width: 82%; height: 82%;
 border-radius: 0;
 transition: all var(--transition-slow) ease;
 filter: drop-shadow(0 0 40px rgba(99, 102, 241, 0.25)) drop-shadow(0 0 80px rgba(99, 102, 241, 0.1)) brightness(1.05); object-fit: contain; }
@keyframes professionalFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.egk-app .loading-logo::before { content: ''; position: absolute; top: 50%; left: 50%;
 width: 180%; height: 180%; transform: translate(-50%, -50%);
 border-radius: 50%;
 background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, rgba(99, 102, 241, 0.04) 40%, transparent 70%);
 animation: logoGlow 5s ease-in-out infinite; opacity: 1; }
@keyframes logoGlow { 0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } }
.egk-app .loading-brand { margin-bottom: 2rem; }

.egk-app .loading-title { background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.75) 100%);
 line-height: 1.1; letter-spacing: -0.03em; font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; margin-bottom: 0.5rem; background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: none; }
.egk-app .loading-subtitle { color: rgba(148, 163, 184, 0.8); letter-spacing: 0.2em; font-size: clamp(0.6rem, 1.4vw, 0.72rem); font-weight: 500; text-transform: uppercase; margin-bottom: 0.6rem; opacity: 1; }

.egk-app .loading-tagline { max-width: 360px;
 color: rgba(148, 163, 184, 0.45); line-height: 1.5; font-size: clamp(0.7rem, 1.4vw, 0.78rem); font-weight: 400; margin-bottom: 2.5rem; margin-left: auto; margin-right: auto; opacity: 1; }

.egk-app .loading-progress-container { width: 100%; max-width: 200px;
 margin: 0 auto; }

.egk-app .loading-progress { position: relative;
 overflow: hidden;
 width: 100%; height: 2px;
 border: none; border-radius: 2px;
 background: rgba(255, 255, 255, 0.06);
 box-shadow: none; }

.egk-app .loading-progress-fill { position: absolute; top: 0; left: 0;
 width: 0%; height: 100%;
 border-radius: 2px;
 background: linear-gradient(90deg, #6366f1 0%, #818cf8 50%, #a78bfa 100%);
 transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
 box-shadow: 0 0 8px rgba(99, 102, 241, 0.3); }

.egk-app .loading-progress-fill::after { content: ''; position: absolute; top: 0; left: 0;
 width: 100%; height: 100%;
 background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
 animation: progressFlow 2.2s ease-in-out infinite; }
@keyframes progressFlow { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } }

.egk-app .loading-dots { display: none; }

.egk-app .loading-dot { width: 8px; height: 8px;
 border-radius: 50%;
 background: var(--accent-color);
 animation: professionalDotPulse 1.8s ease-in-out infinite;
 box-shadow: 0 0 10px rgba(16, 185, 129, 0.2); }
.egk-app .loading-dot:nth-child(1) { animation-delay: 0s; }
.egk-app .loading-dot:nth-child(2) { animation-delay: 0.2s; }
.egk-app .loading-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes professionalDotPulse { 0%, 80%, 100% { transform: scale(1); opacity: 0.7; } 40% { transform: scale(1.2); opacity: 1; } }

.egk-app .loading-stage { min-height: 1.2rem;
 color: rgba(148, 163, 184, 0.5); letter-spacing: 0.04em;
 animation: stageTransition 0.5s ease-in-out; font-size: clamp(0.72rem, 1.3vw, 0.8rem); font-weight: 400; margin-top: 1.25rem; font-family: var(--font-primary); }

.egk-app .loading-stage::before { content: none; }
@keyframes stageTransition { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 0.9; transform: translateY(0); } }
.egk-app #app > div:not(.loading-overlay) { transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1); opacity: 0; }
.egk-app #app.app-ready > div:not(.loading-overlay) { opacity: 1; }
.egk-app #app.show-content > div:not(.loading-overlay) { opacity: 1; }

.egk-app #blazor-error-ui { position: fixed; bottom: 0; left: 0; z-index: 10000;
 display: none;
 width: 100%;
 padding: 1rem 1.5rem;
 background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 50%, #fecaca 100%); backdrop-filter: blur(8px);
 color: #7f1d1d;
 box-shadow: var(--shadow-xl); border-top: 3px solid var(--error-color); font-family: var(--font-primary); font-weight: 500; padding-bottom: max(1rem, env(safe-area-inset-bottom)); }

.egk-app #blazor-error-ui .dismiss { position: absolute; top: 50%; right: 1rem;
 display: flex; align-items: center; justify-content: center;
 width: 24px; height: 24px; min-width: 44px; min-height: 44px;
 border: none; border-radius: 50%;
 background: transparent;
 color: #991b1b;
 transition: color var(--transition-fast); cursor: pointer; transform: translateY(-50%); font-size: 1.2rem; }

.egk-app #blazor-error-ui .dismiss:hover, .egk-app #blazor-error-ui .dismiss:focus { background: rgba(185, 28, 28, 0.1);
 color: #7f1d1d; outline: 2px solid rgba(185, 28, 28, 0.3); outline-offset: 2px; }

.egk-app #blazor-error-ui .reload { display: inline-flex; align-items: center;
 min-height: 44px;
 padding: 0.2rem 0.4rem;
 border-radius: var(--border-radius-sm);
 color: #991b1b;
 transition: color var(--transition-fast); text-decoration: none; font-weight: 600; margin-left: 0.5rem; }

.egk-app #blazor-error-ui .reload:hover, .egk-app #blazor-error-ui .reload:focus { background: rgba(185, 28, 28, 0.1);
 color: #7f1d1d; text-decoration: underline; outline: 2px solid rgba(185, 28, 28, 0.3); outline-offset: 2px; }
@media (width <= 768px) { .egk-app .loading-logo { width: 120px; height: 120px; } .egk-app .loading-progress-container { max-width: 240px; }

 .egk-app .loading-content { max-width: 95vw;
 padding: 1.2rem 0.8rem; } .egk-app .loading-dots { gap: 8px; } .egk-app .loading-dot { width: 6px; height: 6px; } .egk-app .loading-brand { margin-bottom: 1.2rem; } .egk-app .loading-tagline { margin-bottom: 1.5rem; } .egk-app .loading-title { font-size: clamp(1.3rem, 6vw, 1.8rem); } .egk-app .loading-subtitle { font-size: clamp(0.55rem, 2.5vw, 0.65rem); } .egk-app .loading-stage { font-size: clamp(0.65rem, 2.5vw, 0.75rem); } }
@media (width <= 480px) { .egk-app .loading-logo { width: 100px; height: 100px;
 border-radius: 50%; } .egk-app .loading-progress-container { max-width: 160px; }

 .egk-app .loading-content { max-width: 98vw;
 padding: 1rem 0.6rem; } .egk-app .loading-brand { margin-bottom: 1rem; } .egk-app .loading-tagline { max-width: 280px; margin-bottom: 1.2rem; } .egk-app .loading-title { font-size: clamp(1.2rem, 7vw, 1.6rem); } }
@media (width >= 769px) and (width <= 1024px) { .egk-app .loading-logo { width: 160px; height: 160px; }

 .egk-app .loading-content { max-width: 480px;
 padding: 2rem 1.5rem; } .egk-app .loading-progress-container { max-width: 240px; } }
@media (width >= 1025px) { .egk-app .loading-logo { width: 180px; height: 180px; }

 .egk-app .loading-content { max-width: 520px;
 padding: 2.5rem 2rem; } .egk-app .loading-progress-container { max-width: 280px; } .egk-app .loading-brand { margin-bottom: 2rem; } .egk-app .loading-tagline { margin-bottom: 2.5rem; } }
@media (width >= 1440px) { .egk-app .loading-logo { width: 200px; height: 200px; }

 .egk-app .loading-content { max-width: 600px;
 padding: 3rem 2.5rem; } }
@media (prefers-reduced-motion: reduce) { .egk-app .loading-logo, .egk-app .loading-dot, .egk-app .loading-progress-fill::after, .egk-app .loading-stage::before, .egk-app .loading-overlay::before { animation: none !important; } .egk-app .loading-logo { transform: none !important; } }
@media (prefers-contrast: high) { :root { --glass-bg: rgba(255, 255, 255, 0.25); --glass-border: rgba(255, 255, 255, 0.5); --text-light: rgba(255, 255, 255, 1); --text-muted: rgba(255, 255, 255, 0.95); } .egk-app .loading-logo { border: 2px solid rgba(255, 255, 255, 0.6); } .egk-app .loading-progress { border: 1px solid rgba(255, 255, 255, 0.4); } }
@media (prefers-color-scheme: dark) { :root { --glass-bg: rgba(0, 0, 0, 0.15); --glass-bg-strong: rgba(0, 0, 0, 0.2); --glass-border: rgba(255, 255, 255, 0.2); --glass-border-strong: rgba(255, 255, 255, 0.3); } }
@media (min-device-pixel-ratio: 2), (resolution >= 192dpi) { .egk-app .loading-logo img { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } }
.egk-app .loading-logo, .egk-app .loading-logo::before { will-change: transform, opacity; }
.egk-app .loading-progress-fill, .egk-app .loading-progress-fill::after { will-change: width, transform; }
.egk-app .loading-dot { will-change: transform, opacity; }
@media print { .egk-app .loading-overlay { display: none !important; } .egk-app #blazor-error-ui { display: none !important; } }
@supports (padding: env(safe-area-inset-top)) { .egk-app .loading-overlay { padding: max(1.5rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); } }
@media (height <= 500px) and (orientation: landscape) { .egk-app .loading-content { max-width: 90vw;
 padding: 0.8rem 1rem; } .egk-app .loading-logo { width: 80px; height: 80px; } .egk-app .loading-brand { margin-bottom: 0.8rem; } .egk-app .loading-tagline { margin-bottom: 1rem; } .egk-app .loading-progress-container { margin: 1rem auto; } .egk-app .loading-dots { margin: 1rem auto 0.5rem; } */

/* Mobile/tablet horizontal overflow fix and symmetric padding */
@media (max-width:1024px) {
 /* Prevent any accidental horizontal scroll caused by injected elements or negative margins */
 html, body, .egk-app, .egk-app #app {
 overflow-x: hidden !important;
 }

 /* Ensure main content wrapper never grows beyond viewport and respects box sizing */
 .egk-app .content-wrapper,
 .egk-app .mud-main-content,
 .egk-app .mud-container,
 .egk-app .loading-content {
 max-width:100% !important;
 box-sizing: border-box !important;
 }

 /* Normalize left/right spacing so content is centered and symmetric */
 .egk-app .mud-container,
 .egk-app .content-wrapper > .mud-container,
 .egk-app .loading-content {
 padding-left:1rem !important;
 padding-right:1rem !important;
 }

 /* If any element is positioned with a large right offset, clamp it */
 .egk-app [style*="right:"] {
 max-width:100vw;
 box-sizing: border-box;
 }
}

/* Strong, last-resort horizontal overflow fixes (apply across all viewports) */
html, body, .egk-app, .egk-app #app, #app {
 overflow-x: hidden !important;
}

/* Ensure main content and container elements never exceed viewport width and have symmetric padding */
.egk-app .mud-main-content,
.egk-app .content-wrapper,
.egk-app .mud-container,
.egk-app .loading-content,
.egk-app .showcase-main-content {
 max-width:100% !important;
 box-sizing: border-box !important;
 padding-left:1rem !important;
 padding-right:1rem !important;
 margin-left: auto !important;
 margin-right: auto !important;
}

/* Prevent elements using100vw from causing overflow (accounts for scrollbars and safe-area-inset) */
*[style*="100vw" i], *[style*="calc(100vw" i] {
 width:100% !important;
 max-width:100% !important;
 box-sizing: border-box !important;
}

/* Clamp common large media and chart elements */
.egk-app img, .egk-app svg, .egk-app canvas, .egk-app iframe, .egk-app .chart, .egk-app .echarts, .egk-app .apexcharts-canvas {
 max-width:100% !important;
 height: auto !important;
 box-sizing: border-box !important;
}

/* If any positioned element uses a right offset that causes overflow, clamp its width */
.egk-app [style*="right:"] {
 max-width:100vw !important;
 box-sizing: border-box !important;
}

/* Make sure MudDrawer overlay doesn't introduce horizontal scroll when open on small screens */
.mud-drawer-open .mud-drawer, .mud-drawer-open .mud-drawer + .mud-overlay {
 -webkit-overflow-scrolling: touch;
 overflow-x: hidden !important;
}

/* Keep touch areas accessible but avoid off-canvas nudges on mobile */
@media (max-width:1024px) {
 .egk-app .mud-container, .egk-app .content-wrapper > .mud-container { padding-left:0.75rem !important; padding-right:0.75rem !important; }
}

/* Preserve desktop behaviour but still protect against accidental overflow from third-party charts */
@media (min-width:1025px) {
 .egk-app .mud-container { padding-left:1rem; padding-right:1rem; }
}