:root,
:root[data-theme="midnight"] {
--color-bg: #020617;
--color-surface: rgba(9, 16, 36, 0.76);
--color-surface-soft: rgba(10, 18, 42, 0.56);
--color-border: rgba(122, 139, 190, 0.18);
--color-border-soft: rgba(122, 139, 190, 0.1);
--color-text: #ffffff;
--color-text-muted: #c7ccdc;
--color-text-soft: #8f96aa;
--color-primary: #7c3aed;
--color-primary-light: #a855f7;
--color-primary-dark: #4c1d95;
--color-blue: #2563eb;
--color-cyan: #22d3ee;
--color-success: #22c55e;
--color-danger: #ff426d;
--color-warning: #fbbf24;

--sidebar-width: 240px;
--sidebar-bg: rgba(3, 9, 23, 0.92);
--sidebar-border: rgba(122, 139, 190, 0.14);
--sidebar-nav-text: #e5e7ef;
--sidebar-active-start: rgba(124, 58, 237, 0.86);
--sidebar-active-end: rgba(59, 7, 100, 0.5);
--sidebar-active-border: rgba(168, 85, 247, 0.5);
--sidebar-active-rail: #d946ef;
--sidebar-card-bg: rgba(9, 16, 36, 0.76);

/* Legacy aliases keep existing page styles theme-aware during migration. */
--bg: var(--color-bg);
--panel: var(--color-surface);
--panel-soft: var(--color-surface-soft);
--panel-strong: rgba(8, 15, 35, 0.92);
--border: var(--color-border);
--border-soft: var(--color-border-soft);
--border-strong: rgba(124, 58, 237, 0.38);
--border-purple: rgba(168, 85, 247, 0.42);
--text: var(--color-text);
--muted: var(--color-text-muted);
--soft: var(--color-text-soft);
--purple: var(--color-primary);
--purple-light: var(--color-primary-light);
--blue: var(--color-blue);
--cyan: var(--color-cyan);
--green: var(--color-success);
--red: var(--color-danger);
--yellow: var(--color-warning);
}

html {
color-scheme: dark;
scrollbar-width: none;
}

* {
scrollbar-width: none;
-ms-overflow-style: none;
}

*::-webkit-scrollbar {
width: 0;
height: 0;
}

.qf-brand-crown {
width: 84%;
height: 84%;
display: block;
object-fit: contain;
filter: drop-shadow(0 0 9px color-mix(in srgb, var(--color-primary-light) 72%, transparent));
}

.sidebar .brand-mark .qf-brand-crown {
width: 36px;
height: 30px;
max-width: none;
}

.reset-brand .brand-mark {
width: 36px;
height: 32px;
display: grid;
place-items: center;
}

input[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

select,
option,
optgroup {
color: var(--color-text);
background-color: #071123;
}

select {
color-scheme: dark;
accent-color: var(--color-primary);
}

select:focus {
outline: 2px solid color-mix(in srgb, var(--color-primary-light) 70%, transparent);
outline-offset: 2px;
}

select:disabled,
option:disabled {
color: var(--color-text-soft);
}

.qf-language-switcher {
display: inline-grid;
grid-template-columns: auto auto;
align-items: center;
gap: 8px;
padding: 7px 8px 7px 10px;
border: 1px solid rgba(168, 85, 247, 0.28);
border-radius: 999px;
background:
radial-gradient(circle at 100% 0%, rgba(168, 85, 247, 0.18), transparent 42%),
rgba(7, 13, 31, 0.72);
color: var(--color-text-muted);
font: 700 11px Inter, ui-sans-serif, system-ui, sans-serif;
letter-spacing: 0.01em;
white-space: nowrap;
}

.qf-language-switcher select {
height: 30px;
min-width: 104px;
padding: 0 28px 0 10px;
border: 1px solid rgba(122, 139, 190, 0.2);
border-radius: 999px;
background: rgba(2, 6, 23, 0.86);
color: #f8fafc;
font: inherit;
cursor: pointer;
}

@media (max-width: 720px) {
.qf-language-switcher {
grid-column: 1 / -1;
justify-self: stretch;
justify-content: space-between;
width: 100%;
}
}

.user-pill,
#userAvatar {
position: relative;
cursor: pointer;
}

.qf-has-profile-image {
background-color: rgba(9, 16, 36, 0.9) !important;
background-repeat: no-repeat !important;
}

#userAvatar > .qf-avatar-label {
width: 100%;
height: 100%;
border-radius: inherit;
display: grid;
place-items: center;
}

.qf-user-menu {
position: absolute;
top: calc(100% + 12px);
right: 0;
z-index: 1200;
width: 250px;
padding: 9px;
border: 1px solid rgba(139, 92, 246, 0.32);
border-radius: 13px;
background:
radial-gradient(circle at 90% 0%, rgba(124, 58, 237, 0.16), transparent 38%),
rgba(7, 13, 31, 0.98);
box-shadow: 0 22px 60px rgba(0, 0, 0, 0.44);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-7px);
transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
text-align: left;
font-size: 13px;
}

.qf-user-menu.open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}

.qf-user-menu-profile {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: 11px;
align-items: center;
padding: 9px 9px 13px;
margin-bottom: 6px;
border-bottom: 1px solid rgba(122, 139, 190, 0.12);
}

.qf-menu-avatar {
width: 44px !important;
height: 44px !important;
border-radius: 50%;
display: grid !important;
place-items: center;
border: 1px solid rgba(168, 85, 247, 0.58);
background:
radial-gradient(circle at 38% 26%, rgba(168, 85, 247, 0.62), rgba(49, 12, 86, 0.88));
font-weight: 780;
}

.user-pill .qf-user-menu span {
border: 0;
box-shadow: none;
font-size: inherit;
}

.user-pill .qf-user-menu > a span,
.user-pill .qf-user-menu > button span {
width: 18px;
height: auto;
border-radius: 0;
display: inline-block;
background: transparent;
}

.user-pill .qf-user-menu-profile .qf-menu-avatar {
width: 44px !important;
height: 44px !important;
border: 1px solid rgba(168, 85, 247, 0.58);
border-radius: 50%;
display: grid !important;
}

.qf-user-menu-profile strong,
.qf-user-menu-profile small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.qf-user-menu-profile small {
margin-top: 3px;
color: var(--color-text-soft);
font-size: 11px;
}

.qf-user-menu > a,
.qf-user-menu > button {
width: 100%;
height: 39px;
padding: 0 10px;
border: 0;
border-radius: 8px;
display: flex;
align-items: center;
gap: 10px;
background: transparent;
color: var(--color-text-muted);
text-decoration: none;
font: inherit;
cursor: pointer;
}

.qf-user-menu > a:hover,
.qf-user-menu > button:hover {
background: rgba(124, 58, 237, 0.13);
color: white;
}

.qf-user-menu > button {
margin-top: 4px;
color: #fecdd3;
}

.qf-user-menu > a span,
.qf-user-menu > button span {
width: 18px;
text-align: center;
color: var(--color-primary-light);
}

.mode-switch {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px;
border: 1px solid var(--color-border);
border-radius: 10px;
background: rgba(2, 6, 23, 0.48);
}

.mode-switch button {
height: 32px;
min-width: 68px;
padding: 0 14px;
border: 0;
border-radius: 7px;
background: transparent;
color: var(--color-text-soft);
font-weight: 700;
}

.mode-switch button.active[data-trading-mode="paper"] {
color: #bbf7d0;
background: rgba(34, 197, 94, 0.16);
box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.28);
}

.mode-switch button.active[data-trading-mode="live"] {
color: #fecdd3;
background: rgba(255, 66, 109, 0.14);
box-shadow: inset 0 0 0 1px rgba(255, 66, 109, 0.3);
}

.mode-banner {
min-height: 54px;
margin-bottom: 16px;
padding: 10px 16px;
border: 1px solid var(--color-border);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
background: var(--color-surface-soft);
}

.mode-banner > div:first-child {
display: grid;
gap: 4px;
}

.mode-banner strong {
font-size: 14px;
}

.mode-banner span,
.mode-banner > b {
color: var(--color-text-soft);
font-size: 12px;
font-weight: 550;
}

.mode-banner.paper {
border-color: rgba(34, 197, 94, 0.24);
background: linear-gradient(90deg, rgba(34, 197, 94, 0.09), rgba(9, 16, 36, 0.72));
}

.mode-banner.live {
border-color: rgba(255, 66, 109, 0.28);
background: linear-gradient(90deg, rgba(255, 66, 109, 0.09), rgba(9, 16, 36, 0.72));
}

.qf-search-native-select {
position: absolute !important;
inline-size: 1px !important;
block-size: 1px !important;
opacity: 0 !important;
pointer-events: none !important;
}

.qf-search-select {
position: relative;
width: 100%;
min-width: 0;
}

.qf-search-select-trigger {
width: 100%;
min-height: 38px;
padding: 0 12px;
border: 1px solid rgba(122, 139, 190, 0.2);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
background: rgba(2, 6, 23, 0.42);
color: var(--color-text);
font: inherit;
text-align: left;
cursor: pointer;
}

.qf-search-select-value {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.qf-search-select-trigger b {
color: var(--color-primary-light);
font-size: 13px;
}

.qf-search-select-panel {
position: absolute;
z-index: 1400;
top: calc(100% + 7px);
left: 0;
right: 0;
padding: 9px;
border: 1px solid rgba(168, 85, 247, 0.28);
border-radius: 12px;
background:
radial-gradient(circle at 100% 0%, rgba(168, 85, 247, 0.14), transparent 42%),
rgba(7, 13, 31, 0.98);
box-shadow: 0 22px 54px rgba(0, 0, 0, 0.42);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-4px);
transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}

.qf-search-select.open .qf-search-select-panel {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}

.qf-search-select-input {
width: 100%;
height: 38px;
padding: 0 11px;
border: 1px solid rgba(122, 139, 190, 0.18);
border-radius: 9px;
background: rgba(2, 6, 23, 0.76);
color: var(--color-text);
font: 700 12px Inter, ui-sans-serif, system-ui, sans-serif;
outline: none;
}

.qf-search-select-input:focus {
border-color: rgba(168, 85, 247, 0.54);
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.13);
}

.qf-search-select-list {
max-height: 260px;
margin-top: 8px;
display: grid;
gap: 4px;
overflow-y: auto;
}

.qf-search-select-list button {
width: 100%;
min-height: 34px;
padding: 7px 9px;
border: 1px solid transparent;
border-radius: 8px;
background: transparent;
color: var(--color-text-muted);
font: 750 12px Inter, ui-sans-serif, system-ui, sans-serif;
text-align: left;
cursor: pointer;
}

.qf-search-select-list button:hover,
.qf-search-select-list button.active {
border-color: rgba(168, 85, 247, 0.26);
background: rgba(124, 58, 237, 0.16);
color: white;
}

.qf-search-select-empty {
padding: 12px;
color: var(--color-text-soft);
font-size: 12px;
text-align: center;
}

/* Shared mobile layout layer. Page CSS is intentionally diverse; these rules
   keep the app usable on phones without changing the desktop composition. */
@media (max-width: 980px) {
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}

body {
padding-bottom: calc(86px + env(safe-area-inset-bottom));
}

.page,
.dashboard-main {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
padding: 20px 16px calc(112px + env(safe-area-inset-bottom)) !important;
overflow-x: hidden !important;
}

.topbar,
.settings-topbar,
.detail-topbar,
.pricing-header,
.history-head,
.section-head,
.panel-head,
.mode-banner {
width: 100%;
max-width: 100%;
align-items: stretch !important;
flex-direction: column !important;
gap: 12px !important;
}

.topbar h1,
.settings-topbar h1,
.detail-topbar h1 {
font-size: clamp(24px, 7vw, 31px) !important;
line-height: 1.05;
}

.top-actions,
.header-actions,
.settings-actions,
.topbar-actions,
.mode-account,
.table-tools,
.signal-config-actions {
width: 100%;
max-width: 100%;
flex-wrap: wrap !important;
justify-content: flex-start !important;
gap: 10px !important;
}

.user-pill {
margin-left: auto;
}

.qf-user-menu {
position: fixed;
top: 74px;
right: 12px;
left: 12px;
width: auto;
}

.qf-language-switcher {
min-width: 0;
}

.market-status,
.mode-switch,
.qf-language-switcher,
.dashboard-market,
.search-box {
max-width: 100%;
}

.dashboard-market,
.trade-controls,
.signal-controls,
.manual-pnl-strip,
.metric-grid,
.stats-grid,
.create-grid,
.field-grid,
.exchange-overview,
.pnl-grid,
.owner-metrics,
.permission-grid,
.signal-card-grid,
.content-grid,
.dashboard-grid,
.manual-layout,
.exchange-layout,
.portfolio-layout,
.bot-layout,
.settings-grid,
.runtime-grid,
.runtime-summary,
.signal-runtime-grid,
.analysis-grid,
.analysis-summary-grid,
.analysis-ma-grid,
.analysis-detail-grid,
.grid-layer-cards,
.tracked-source-grid,
.comparison-grid,
.price-mapping-grid,
.order-edit-grid,
.side-balances,
.signal-output-summary,
.two-col,
.form-grid,
.input-grid {
grid-template-columns: 1fr !important;
}

.generate-btn,
.configure-signal-btn,
.signal-current-price,
.history-filters .export-btn,
.price-mapping-grid label:last-child {
grid-column: auto !important;
grid-row: auto !important;
}

.panel,
.metric-card,
.signal-card,
.order-panel,
.exchange-card,
.saved-connection,
.profile-card,
.layout-card,
.runtime-panel,
.performance-panel,
.ownership-panel,
.records-panel,
.portfolio-hero,
.notice-card {
min-width: 0;
}

.table-wrap,
.history-table-wrap,
.positions-panel,
.signals-panel,
.records-panel,
.connection-list,
.tracked-table-wrap {
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

table {
width: max-content;
min-width: 760px;
}

select,
input,
button,
textarea {
max-width: 100%;
}

.chart-panel,
.manual-chart-panel,
#manualTradeChart,
.tradingview-widget-container {
max-width: 100%;
min-width: 0;
}
}

@media (max-width: 680px) {
.page,
.dashboard-main {
padding-inline: 12px !important;
}

.topbar p,
.settings-topbar p,
.detail-topbar p,
.panel-head p {
font-size: 12px !important;
line-height: 1.45;
}

.top-actions > *,
.topbar-actions > *,
.settings-actions > *,
.market-status,
.mode-switch,
.qf-language-switcher,
.dashboard-market,
.dashboard-market select,
.search-box,
.filter-tabs,
.analysis-tabs {
width: 100%;
}

.mode-switch {
display: grid;
grid-template-columns: 1fr 1fr;
}

.mode-switch button {
width: 100%;
}

.filter-tabs,
.analysis-tabs,
.settings-section-nav {
display: flex !important;
overflow-x: auto;
padding-bottom: 4px;
scroll-snap-type: x proximity;
}

.filter-tabs > *,
.analysis-tabs > *,
.settings-section-nav > * {
flex: 0 0 auto;
scroll-snap-align: start;
}

.card-row,
.exchange-card,
.saved-connection,
.notice-card,
.activity-row,
.bot-row,
.signal-history-row {
grid-template-columns: 1fr !important;
align-items: stretch !important;
}

.manual-chart-panel,
#manualTradeChart {
min-height: 380px;
}

.modal-card,
.settings-modal-card,
.action-dialog-card {
width: min(100%, 94vw) !important;
max-height: calc(100vh - 28px);
overflow-y: auto;
}
}

@media (max-width: 420px) {
.page,
.dashboard-main {
padding-inline: 10px !important;
}

.topbar h1,
.settings-topbar h1,
.detail-topbar h1 {
font-size: 24px !important;
}

.qf-language-switcher {
grid-template-columns: 1fr;
border-radius: 16px;
}

.qf-language-switcher select {
width: 100%;
}

table {
min-width: 680px;
}
}