.splash-screen { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 25% 20%, rgba(83, 217, 255, 0.16), transparent 28%), radial-gradient(circle at 75% 22%, rgba(53, 255, 141, 0.12), transparent 22%), linear-gradient(180deg, rgba(3, 7, 11, 0.96), rgba(4, 7, 11, 0.98)); transition: opacity 280ms ease, visibility 280ms ease; }
.splash-screen.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-card { display: grid; gap: 12px; justify-items: center; text-align: center; }
.fx-logo { position: relative; display: grid; place-items: center; overflow: hidden; color: var(--white); font-weight: 800; letter-spacing: 0.08em; background: radial-gradient(circle at 24% 18%, rgba(83, 217, 255, 0.2), transparent 32%), radial-gradient(circle at 78% 78%, rgba(53, 255, 141, 0.18), transparent 28%), linear-gradient(145deg, rgba(6, 16, 24, 0.98), rgba(10, 25, 35, 0.96)); border: 1px solid rgba(83, 217, 255, 0.32); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(255, 255, 255, 0.03); }
.fx-logo-grid, .fx-logo-stroke { position: absolute; inset: 0; }
.fx-logo-grid { background-image: linear-gradient(rgba(83, 217, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(83, 217, 255, 0.08) 1px, transparent 1px); background-size: 12px 12px; opacity: 0.55; mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 95%); }
.fx-logo-stroke::before, .fx-logo-stroke::after { content: ""; position: absolute; border-radius: 999px; filter: blur(0.2px); }
.fx-logo-stroke::before { width: 128%; height: 10px; left: -16%; top: 28%; background: linear-gradient(90deg, transparent, rgba(83, 217, 255, 0.95), transparent); transform: rotate(-24deg); box-shadow: 0 0 18px rgba(83, 217, 255, 0.45); }
.fx-logo-stroke::after { width: 112%; height: 10px; left: -8%; bottom: 22%; background: linear-gradient(90deg, transparent, rgba(53, 255, 141, 0.92), transparent); transform: rotate(18deg); box-shadow: 0 0 16px rgba(53, 255, 141, 0.32); }
.fx-logo-text { position: relative; z-index: 1; text-shadow: 0 0 18px rgba(83, 217, 255, 0.38); }
.fx-logo-splash { width: 96px; height: 96px; border-radius: 28px; }
.fx-logo-splash .fx-logo-text { font-size: 30px; }
.fx-logo-header { width: 46px; height: 46px; border-radius: 15px; flex: 0 0 auto; }
.fx-logo-header .fx-logo-text { font-size: 15px; }
.splash-brand { margin: 0; font-size: clamp(28px, 5vw, 40px); font-weight: 700; }
.splash-tagline { margin: 0; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; }
.splash-loader { position: relative; width: 82px; height: 82px; margin-top: 8px; display: grid; place-items: center; }
.splash-loader-ring, .splash-loader-core { position: absolute; border-radius: 999px; }
.splash-loader-ring { inset: 0; background: conic-gradient(from 0deg, rgba(83, 217, 255, 0.12), rgba(83, 217, 255, 0.92), rgba(53, 255, 141, 0.9), rgba(83, 217, 255, 0.12)); animation: splash-spin 1.25s linear infinite; box-shadow: 0 0 20px rgba(83, 217, 255, 0.22); }
.splash-loader-ring::after { content: ""; position: absolute; inset: 8px; border-radius: 999px; background: rgba(4, 7, 11, 0.98); box-shadow: inset 0 0 0 1px rgba(83, 217, 255, 0.12); }
.splash-loader-core { width: 18px; height: 18px; background: radial-gradient(circle, rgba(242, 255, 255, 1), rgba(83, 217, 255, 0.72)); box-shadow: 0 0 18px rgba(83, 217, 255, 0.38); }
.splash-loading-text { margin: 0; color: var(--muted); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
@keyframes splash-spin { to { transform: rotate(360deg); } }
.shell { min-height: 100vh; min-height: 100dvh; padding: calc(16px + var(--safe-top)) calc(16px + var(--safe-right)) calc(16px + var(--safe-bottom)) calc(16px + var(--safe-left)); }
.topbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 16px; background: rgba(8, 14, 20, 0.96); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px); }
html[data-fixed-header="0"] .topbar { position: static; top: auto; }
.pair-status.is-updating { color: var(--amber); animation: topbar-status-pulse 1.05s ease-in-out infinite; }
@keyframes topbar-status-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pair-status.is-updating { animation: none; opacity: 1; } }
.brand-lockup { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.brand-copy { display: grid; gap: 3px; min-width: 0; }
.brand-copy strong { font-size: 15px; letter-spacing: 0.03em; overflow-wrap: anywhere; }
.brand-copy span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; overflow-wrap: anywhere; }
.pair-switcher { display: inline-flex; gap: 10px; align-items: center; color: var(--muted); font-size: 12px; min-width: 0; }
.pair-switcher.is-hidden { display: none; }
.pair-switcher.is-timeframe-disabled .pair-select { opacity: 0.56; cursor: not-allowed; }
.pair-status { white-space: nowrap; min-width: 4.5em; color: var(--muted); }
.pair-status.is-hidden { display: none; }
.pair-switcher label { white-space: nowrap; }
.pair-select { appearance: none; border: 1px solid var(--border); background: #0a1118; color: var(--text); border-radius: 10px; padding: 10px 12px; font: inherit; width: 188px; min-width: 188px; max-width: 188px; }
.lang-switcher { display: inline-flex; gap: 8px; align-items: center; }
.lang-btn { -webkit-appearance: none; appearance: none; border: 1px solid var(--border); background: #0a1118; color: var(--muted); border-radius: 999px; padding: 8px 12px; font: inherit; cursor: pointer; }
.theme-btn { -webkit-appearance: none; appearance: none; border: 1px solid var(--border); background: #0a1118; color: var(--muted); border-radius: 999px; padding: 9px 14px; font: inherit; cursor: pointer; min-width: 112px; }
.theme-btn.is-active { color: var(--text); border-color: rgba(83, 217, 255, 0.55); background: linear-gradient(135deg, rgba(53, 255, 141, 0.12), rgba(83, 217, 255, 0.14)); }
.lang-btn.is-active { color: var(--text); border-color: rgba(83, 217, 255, 0.55); background: linear-gradient(135deg, rgba(53, 255, 141, 0.12), rgba(83, 217, 255, 0.14)); }
.notice-banner { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; border-radius: 16px; padding: 12px 16px; }
.notice-banner-update { border: 1px solid rgba(83, 217, 255, 0.18); border-radius: 16px; background: linear-gradient(135deg, rgba(8, 14, 20, 0.94), rgba(9, 24, 32, 0.96)); }
.notice-banner-install { border: 1px solid rgba(53, 255, 141, 0.16); background: linear-gradient(135deg, rgba(9, 14, 18, 0.94), rgba(12, 25, 24, 0.96)); }
.notice-banner.is-hidden { display: none; }
.notice-dismiss-btn { appearance: none; -webkit-appearance: none; width: 32px; height: 32px; display: inline-grid; place-items: center; border: 1px solid rgba(83, 217, 255, 0.24); border-radius: 999px; background: rgba(7, 15, 23, 0.62); color: var(--text); font: inherit; line-height: 1; cursor: pointer; }
.notice-dismiss-btn:hover, .notice-dismiss-btn:focus-visible { border-color: rgba(83, 217, 255, 0.48); background: rgba(43, 213, 255, 0.12); }
.install-copy { display: grid; gap: 3px; }
.install-copy strong { font-size: 13px; }
.install-copy span { color: var(--muted); font-size: 11px; line-height: 1.5; }
.install-actions { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.layout { display: grid; gap: 16px; margin-top: 16px; }
.workspace-tabs { margin-top: 14px; padding: 10px; }
.tabbar { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 10px; }
.workspace-tab { -webkit-appearance: none; appearance: none; border: 1px solid var(--border); border-radius: 14px; background: rgba(8, 14, 20, 0.9); color: var(--muted); padding: 12px 14px; font: inherit; font-weight: 700; letter-spacing: 0.06em; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.workspace-tab.is-active { color: var(--white); border-color: rgba(83, 217, 255, 0.6); background: linear-gradient(135deg, rgba(53, 255, 141, 0.12), rgba(83, 217, 255, 0.16)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02); }
.workspace-tab-settings { letter-spacing: 0.03em; }
.panel { border: 1px solid var(--border); border-radius: 18px; background-color: var(--panel); background: linear-gradient(180deg, rgba(10, 17, 24, 0.98), rgba(7, 12, 18, 0.98)); box-shadow: 0 14px 42px rgba(0, 0, 0, 0.22); }
html[data-theme="light"] .topbar { background: rgba(255, 255, 255, 0.88); box-shadow: 0 10px 26px rgba(101, 131, 154, 0.12); }
html[data-theme="light"] .panel { background-color: #ffffff; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 248, 252, 0.98)); box-shadow: 0 14px 42px rgba(101, 131, 154, 0.14); }
html[data-theme="light"] .workspace-tab, html[data-theme="light"] .pair-select, html[data-theme="light"] .lang-btn, html[data-theme="light"] .theme-btn { background: rgba(255, 255, 255, 0.92); color: var(--text); border-color: var(--border); }
html[data-theme="light"] .notice-banner-update, html[data-theme="light"] .notice-banner-install { background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 247, 252, 0.98)); border-color: rgba(108, 146, 173, 0.22); box-shadow: 0 16px 38px rgba(101, 131, 154, 0.16); }
html[data-theme="light"] html[data-theme="light"] .fx-logo, html[data-theme="light"] .splash-screen { color-scheme: dark; }

@media (max-width: 1200px) {
  .notice-banner { grid-template-columns: 1fr; }
  .install-actions { justify-content: flex-start; }
  .topbar { top: 0; }
}

@media (max-width: 760px) {
  .shell { padding: calc(10px + var(--safe-top)) calc(10px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(10px + var(--safe-left)); }
  .topbar { align-items: flex-start; flex-direction: column; padding: 12px; }
  .lang-switcher,
  .pair-switcher,
  .brand-lockup,
  .pair-switcher { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; }
  .lang-switcher { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tabbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lang-btn { width: 100%; }
  .pair-select { width: 100%; min-width: 0; max-width: 100%; }
  .install-actions { width: 100%; }
  .install-actions .btn { width: 100%; }
  .fx-logo-splash { width: 78px; height: 78px; border-radius: 24px; }
}

html[data-theme="light"] .workspace-tab.is-active, html[data-theme="light"] .theme-btn.is-active, html[data-theme="light"] .lang-btn.is-active, html[data-theme="light"] .btn-primary { color: var(--text); border-color: rgba(108, 146, 173, 0.34); background: #e8f2fa; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
html[data-theme="light"] .pair-select, html[data-theme="light"] .lang-btn, html[data-theme="light"] .theme-btn, html[data-theme="light"] .btn { background: #fbfdff; }