:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1d2939;
  background: #e9eef4;
  font-synthesis: none;
  --ink: #1d2939;
  --muted: #66758a;
  --faint: #8a98a9;
  --line: #e5ebf2;
  --page: #f6f8fb;
  --white: #ffffff;
  --blue: #1768cf;
  --blue-soft: #e9f2ff;
  --green: #098861;
  --green-soft: #e7f7ef;
  --red: #cf4d5b;
  --red-soft: #fff0f1;
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; min-height: 100vh; background: #e9eef4; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .5; cursor: not-allowed; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
h1, h2, h3, h4, p { margin-top: 0; }
.icon { width: 19px; height: 19px; flex: none; vertical-align: middle; }
.positive { color: var(--green) !important; }
.negative { color: var(--red) !important; }
.sidebar, .crumb, .search-button, .feed-pill { display: none !important; }

.app-shell { width: min(100%, 460px); margin: 0 auto; min-height: 100vh; background: var(--page); box-shadow: 0 0 45px #1e3a5f17; }
.app-main { min-width: 0; }
.topbar { height: 62px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 20; background: #ffffffed; backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.mobile-brand { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; color: #132c51; font-size: 18px; letter-spacing: -.6px; font-weight: 800; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--blue); color: white; font-size: 20px; font-weight: 800; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.mode-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 99px; color: #8b681e; background: #fff6db; font-size: 10px; font-weight: 750; white-space: nowrap; }
.mode-pill.live { color: var(--green); background: var(--green-soft); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.content { padding: 22px 16px 112px; }
.page-heading { margin-bottom: 20px; }
.eyebrow { color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .4px; }
h1 { margin: 4px 0 4px; font-size: 24px; letter-spacing: -.75px; line-height: 1.22; }
.subheading { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 0; }
.heading-actions { margin-top: 12px; display: flex; gap: 8px; }
.button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; background: white; border: 1px solid #d9e3ed; border-radius: 10px; color: var(--ink); font-size: 12px; font-weight: 750; white-space: nowrap; }
.button .icon { width: 15px; height: 15px; }
.button:hover:not(:disabled) { border-color: #a7bbd1; }
.button-primary { background: var(--blue); border-color: var(--blue); color: white; }
.button-primary:hover:not(:disabled) { background: #0f59b8; border-color: #0f59b8; }
.button-secondary { background: var(--blue-soft); color: var(--blue); border-color: #cbdffb; }
.button-danger { color: white; background: var(--red); border-color: var(--red); }
.connect-button { min-height: 31px; border-radius: 8px; font-size: 10px; padding: 0 10px; }
.icon-button { width: 33px; height: 33px; border-radius: 9px; border: 1px solid var(--line); background: white; color: var(--muted); display: grid; place-items: center; }
.icon-button .icon { width: 17px; height: 17px; }

.mobile-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, 460px); min-height: 70px; padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(5, 1fr); z-index: 25; background: #ffffffee; backdrop-filter: blur(14px); border-top: 1px solid var(--line); box-shadow: 0 -4px 18px #142b4810; }
.mobile-nav button { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; background: transparent; border: 0; color: #7b8ba0; font-size: 10px; font-weight: 700; }
.mobile-nav button.active { color: var(--blue); }
.mobile-nav button .icon { width: 20px; height: 20px; }

.panel { background: white; border: 1px solid var(--line); border-radius: 15px; overflow: hidden; box-shadow: 0 3px 12px #23436308; }
.section-spacer { margin-top: 15px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; min-height: 60px; padding: 13px 15px; gap: 10px; border-bottom: 1px solid var(--line); }
.panel-head h2 { font-size: 14px; letter-spacing: -.2px; margin: 0; }
.panel-head p { color: var(--muted); margin: 3px 0 0; font-size: 10px; }
.panel-link { display: inline-flex; align-items: center; gap: 2px; border: 0; background: transparent; color: var(--blue); white-space: nowrap; font-size: 11px; font-weight: 800; }
.panel-link .icon { width: 13px; height: 13px; }
.empty-state { color: var(--muted); padding: 35px 20px; text-align: center; font-size: 12px; line-height: 1.55; }
.empty-state .icon { width: 28px; height: 28px; display: block; color: var(--faint); margin: 0 auto 8px; }
.info-banner { display: flex; align-items: flex-start; gap: 8px; border-radius: 11px; padding: 11px 12px; background: #e9f3ff; border: 1px solid #cfe3fb; color: #315d8e; font-size: 11px; line-height: 1.5; margin-bottom: 15px; }
.info-banner .icon { width: 16px; height: 16px; }
.status-chip { display: inline-flex; align-items: center; border-radius: 7px; padding: 5px 8px; font-size: 10px; font-weight: 750; white-space: nowrap; }
.status-chip.open, .status-chip.active, .status-chip.completed { color: var(--green); background: var(--green-soft); }
.status-chip.pending, .status-chip.review { color: #9b7220; background: #fff4d9; }
.side-label { color: var(--green); text-transform: uppercase; font-size: 10px; font-weight: 800; }
.side-label.sell { color: var(--red); }


.market-card-list, .position-card-list, .payment-card-list { padding: 0 15px; }
.market-card { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 67px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; }
.market-card:last-child, .position-card:last-child, .payment-card:last-child { border-bottom: 0; }
.market-card.selected .symbol-badge { box-shadow: 0 0 0 2px #bad7ff; }
.market-card-main { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.market-card-main strong, .table-symbol strong { display: block; font-size: 12px; font-weight: 800; }
.market-card-main small, .table-symbol small { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; }
.market-card-price { text-align: right; white-space: nowrap; }
.market-card-price strong { display: block; font-size: 12px; }
.market-card-price small { display: block; font-size: 10px; font-weight: 750; margin-top: 3px; }
.market-card > .icon { color: var(--faint); width: 15px; height: 15px; }
.symbol-badge { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: #e4f3ed; color: #228566; font-size: 11px; font-weight: 800; }
.symbol-badge.blue { background: #e8f0ff; color: #326cc4; }
.symbol-badge.violet { background: #f0ebff; color: #7756ad; }
.symbol-badge.amber { background: #fff3df; color: #a47017; }
.symbol-badge.slate { background: #edf0f5; color: #5b708a; }
.symbol-badge.pink { background: #ffeef4; color: #b96084; }
.table-symbol { display: flex; align-items: center; gap: 9px; min-width: 0; }
.table-symbol .symbol-badge { width: 34px; height: 34px; }

.position-card { padding: 14px 0; border-bottom: 1px solid var(--line); }
.position-card-top, .position-card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.position-pnl { font-size: 13px; font-weight: 800; white-space: nowrap; }
.position-card-bottom { padding-left: 43px; color: var(--muted); margin-top: 11px; font-size: 10px; }
.card-actions { display: flex; gap: 7px; justify-content: flex-end; margin-top: 12px; }
.card-actions .button { min-height: 44px; padding: 0 18px; font-size: 13px; background: var(--red-soft); border-color: #eab7bd; color: #ad3946; }
.trade-summary { background: white; border: 1px solid var(--line); border-radius: 14px; padding: 17px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 15px; margin-bottom: 15px; }
.trade-summary div + div { border-left: 1px solid var(--line); padding-left: 18px; }
.trade-summary small { display: block; color: var(--muted); font-size: 11px; margin-bottom: 7px; }
.trade-summary strong { display: block; font-size: 19px; letter-spacing: -.5px; }
.large-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 5px 15px 0; gap: 5px; border-bottom: 1px solid var(--line); }
.large-tabs button { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 11px; color: var(--muted); font-size: 12px; font-weight: 800; }
.large-tabs button.active { color: var(--blue); border-color: var(--blue); }

.market-search-wrap { display: flex; align-items: center; gap: 8px; margin: 15px; padding: 0 12px; height: 41px; background: var(--page); border: 1px solid var(--line); border-radius: 10px; color: var(--muted); }
.market-search-wrap .icon { width: 17px; height: 17px; }
.market-search-wrap input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 12px; }
.market-search-wrap input::placeholder { color: var(--faint); }
.add-symbol-screen { overflow: hidden; }
.add-symbol-back { display: inline-flex; align-items: center; gap: 4px; padding: 8px 10px; color: var(--blue); background: var(--blue-soft); border: 1px solid #cfe1f8; border-radius: 9px; font-size: 11px; font-weight: 750; }
.add-symbol-back .icon { transform: rotate(180deg); }
.segment-menu button { width: 100%; min-height: 56px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; border: 0; border-bottom: 1px solid var(--line); background: white; color: var(--ink); font-size: 13px; font-weight: 700; text-align: left; }
.segment-menu button:last-child { border-bottom: 0; }
.segment-menu .icon { color: var(--blue); }
.segment-search, .add-symbol-search { height: 43px; margin: 14px 15px; padding: 0 12px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--page); color: var(--muted); }
.segment-search .icon, .add-symbol-search .icon { width: 18px; height: 18px; }
.segment-search input, .add-symbol-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 12px; }
.segment-search input::placeholder, .add-symbol-search input::placeholder { color: var(--faint); }
.add-symbol-list { border-top: 1px solid var(--line); }
.add-symbol-row { min-height: 67px; padding: 10px 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.add-symbol-row:last-child { border-bottom: 0; }
.add-symbol-row > span { min-width: 0; }
.add-symbol-row strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: 12px; font-weight: 750; }
.add-symbol-row small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.add-symbol-row button { flex: none; width: 34px; height: 34px; border: 1px solid #cfe1f8; border-radius: 9px; background: var(--blue-soft); color: var(--blue); font-size: 21px; line-height: 1; font-weight: 700; }
.add-symbol-row button:disabled { color: var(--green); background: var(--green-soft); border-color: #ccebdc; opacity: 1; }
.add-symbol-more { display: block; margin: 15px auto; padding: 9px 18px; border: 1px solid #cfe1f8; border-radius: 9px; background: var(--blue-soft); color: var(--blue); font-size: 11px; font-weight: 750; }
.add-symbol-note { margin: 12px 15px 17px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.script-heading { min-height: 49px; }
.script-list { padding: 0 12px; }
.script-row { display: flex; align-items: center; gap: 7px; min-height: 65px; border-bottom: 1px solid var(--line); }
.script-row:last-child { border-bottom: 0; }
.script-view { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; min-height: 63px; padding: 7px 0; border: 0; background: transparent; color: var(--ink); text-align: left; }
.script-view .symbol-badge { width: 34px; height: 34px; }
.script-name { flex: 1; min-width: 0; }
.script-name strong, .script-price strong { display: block; font-size: 11px; }
.script-name small, .script-price small { display: block; color: var(--muted); font-size: 9px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.script-price { text-align: right; flex: none; max-width: 75px; }
.script-add { flex: none; min-width: 51px; padding: 7px 6px; border: 1px solid #bdd6f5; border-radius: 8px; background: var(--blue-soft); color: var(--blue); font-size: 10px; font-weight: 800; }
.script-add.added { color: var(--muted); background: #f4f6f8; border-color: var(--line); }
.filter-chips { display: flex; gap: 7px; padding: 0 15px 12px; overflow-x: auto; scrollbar-width: none; }
.filter-chips::-webkit-scrollbar { display: none; }
.filter-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 99px; background: white; color: var(--muted); padding: 7px 12px; white-space: nowrap; font-size: 11px; font-weight: 700; }
.filter-chip.active { color: var(--blue); background: var(--blue-soft); border-color: #bdd6f5; }
.selected-market-label { color: var(--muted); font-size: 11px; font-weight: 750; margin: 20px 3px 9px; }
.trade-shortcut { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 10px; min-height: 41px; padding: 0 14px; border: 1px solid #bfd9fa; border-radius: 10px; color: var(--blue); background: var(--blue-soft); font-size: 12px; font-weight: 800; }
.trade-shortcut .icon { width: 15px; height: 15px; }

.chart-panel { margin-bottom: 15px; }
.chart-picker { margin-bottom: 15px; padding: 13px 15px; }
.chart-picker label { display: block; color: var(--muted); font-size: 11px; font-weight: 750; margin-bottom: 7px; }
.quick-trade { padding: 14px; margin-bottom: 15px; }
.quick-trade-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.quick-trade-head strong { font-size: 13px; }
.quick-trade-head span { color: var(--blue); background: var(--blue-soft); border-radius: 99px; padding: 5px 8px; font-size: 10px; font-weight: 800; }
.quick-trade-volume { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0 5px; color: var(--muted); font-size: 11px; }
.quick-trade-field { display: grid; gap: 5px; font-weight: 750; }
.quick-trade-volume input { width: 100%; min-width: 0; min-height: 38px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); text-align: center; font-size: 14px; }
.quick-trade-lot-size { display: block; margin-bottom: 10px; color: var(--muted); font-size: 10px; }
.quick-trade-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quick-trade-buttons button { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; min-height: 65px; padding: 9px 13px; border: 0; border-radius: 11px; color: white; }
.quick-trade-buttons span { font-size: 10px; font-weight: 850; letter-spacing: .8px; }
.quick-trade-buttons strong { font-size: 17px; line-height: 1; }
.quick-sell { background: #c94455; }
.quick-buy { background: #1768cf; }
.quick-trade > p { color: var(--muted); font-size: 10px; line-height: 1.4; margin: 10px 0 0; }
.chart-heading { padding: 15px 15px 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.symbol-title { display: flex; align-items: center; gap: 9px; }
.symbol-title h2 { font-size: 13px; margin: 0 0 3px; }
.symbol-title small { color: var(--muted); font-size: 10px; }
.chart-price { text-align: right; white-space: nowrap; }
.chart-price strong { font-size: 15px; }
.chart-price span { display: block; font-size: 10px; margin-top: 3px; }
.chart-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px 0; }
.tab-list { display: inline-flex; gap: 4px; }
.tab { padding: 6px 9px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 10px; font-weight: 750; }
.tab.active { color: var(--blue); background: var(--blue-soft); }
.chart-caption { color: var(--faint); font-size: 9px; text-align: right; }
.chart-area { height: 178px; padding: 10px 10px 0; }
.chart-area svg { display: block; width: 100%; height: 100%; }
.trade-chart { position: relative; height: 262px; margin: 12px 14px 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(#ffffff, #f7faff); }
.chart-preview { position: absolute; inset: 0; filter: blur(5px); background: repeating-linear-gradient(0deg, transparent 0 66px, #dfe9f3 67px 68px), repeating-linear-gradient(90deg, transparent 0 66px, #e8eef5 67px 68px), linear-gradient(160deg, #f7fbff, #edf4fc); }
.chart-preview::after { content: ''; position: absolute; inset: 22% 5%; background: #8fb8e5; opacity: .35; clip-path: polygon(0 70%, 13% 55%, 24% 62%, 35% 34%, 48% 46%, 58% 28%, 70% 36%, 81% 18%, 100% 25%, 100% 100%, 0 100%); }
.chart-reveal { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 18px; text-align: center; background: #ffffff9c; }
.chart-reveal strong { color: var(--ink); font-size: 15px; }
.chart-reveal p { margin: 0; color: var(--muted); font-size: 11px; }
.chart-reveal button, .chart-error button { min-height: 40px; padding: 0 20px; border: 0; border-radius: 9px; background: var(--blue); color: white; font-size: 12px; font-weight: 800; cursor: pointer; }
.chart-error { flex-direction: column; gap: 12px; }
.current-level { position: absolute; left: 0; right: 0; border-top: 1px dotted var(--blue); pointer-events: none; }
.current-level span { position: absolute; right: 3px; top: -15px; padding: 2px 4px; color: var(--blue); background: #ffffffed; font-size: 9px; font-weight: 800; }
.entry-level { position: absolute; left: 0; right: 0; border-top: 1px dashed #8899ab; pointer-events: none; }
.entry-level span { position: absolute; left: 6px; top: -15px; padding: 2px 4px; color: #607086; background: #ffffffdb; font-size: 9px; font-weight: 800; }
.trade-level { position: absolute; left: 0; right: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; min-height: 32px; padding: 0 5px; border: 0; border-top: 2px dashed currentColor; background: transparent; transform: translateY(-1px); cursor: grab; touch-action: none; text-align: left; }
.trade-level:active, .trade-level.dragging { cursor: grabbing; }
.trade-level.stop { color: #c94455; }
.trade-level.take { color: #098861; }
.trade-level.draft { opacity: .78; }
.trade-level span, .trade-level strong { padding: 4px 6px; border-radius: 5px; background: #ffffffed; font-size: 10px; font-weight: 850; box-shadow: 0 1px 4px #172d4619; }
.trade-level.dragging span, .trade-level.dragging strong { background: #edf5ff; }
.chart-empty { height: 100%; display: grid; place-items: center; text-align: center; color: var(--muted); font-size: 11px; }
.chart-axis { display: flex; justify-content: space-between; color: var(--faint); font-size: 9px; padding: 0 14px 12px; }
.market-foot { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.market-foot div { padding: 11px 8px; text-align: center; border-right: 1px solid var(--line); }
.market-foot div:last-child { border-right: 0; }
.market-foot small { display: block; color: var(--muted); font-size: 9px; margin-bottom: 4px; }
.market-foot strong { font-size: 10px; }
.risk-panel { margin-bottom: 15px; }
.risk-help { color: var(--muted); padding: 15px; font-size: 11px; line-height: 1.5; margin: 0; }
.risk-form { padding: 15px; }
.risk-form label { display: block; color: #435368; font-size: 11px; font-weight: 750; margin-bottom: 6px; }
.risk-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.risk-form > .button { width: 100%; }
.risk-form p { color: var(--muted); font-size: 10px; line-height: 1.4; margin: 9px 0 0; }
.advanced-order > summary { display: flex; align-items: center; min-height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--blue); font-size: 11px; font-weight: 800; cursor: pointer; }
.chart-product-note { margin: 0 0 12px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.advanced-order > .trade-panel { margin-top: 10px; }

.trade-panel { scroll-margin-top: 76px; }
.trade-panel .panel-head { border-bottom: 1px solid var(--line); }
.order-form { padding: 15px; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; background: #f3f6f9; border-radius: 10px; padding: 4px; gap: 4px; margin-bottom: 15px; }
.segmented button { min-height: 35px; background: transparent; border: 0; border-radius: 8px; color: var(--muted); font-size: 12px; font-weight: 800; }
.segmented button.active.buy { background: var(--green-soft); color: var(--green); }
.segmented button.active.sell { background: var(--red-soft); color: var(--red); }
.field { margin-bottom: 14px; }
.field label { display: flex; align-items: center; justify-content: space-between; color: #435368; font-size: 11px; font-weight: 750; margin-bottom: 7px; }
.field label em { color: var(--faint); font-size: 10px; font-style: normal; font-weight: 500; }
.input, .select { display: block; width: 100%; min-height: 42px; padding: 0 11px; border-radius: 9px; border: 1px solid #dce5ee; background: white; color: var(--ink); font-size: 12px; }
.input::placeholder { color: var(--faint); }
.input:disabled { background: #f2f5f8; color: var(--muted); }
.inline-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quote-box { background: #f6f9fc; border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px; margin-bottom: 13px; }
.quote-box .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 10px; padding: 4px 0; }
.quote-box strong { color: var(--ink); font-size: 11px; }
.order-submit { width: 100%; min-height: 44px; }
.order-submit.button-primary { background: var(--green); border-color: var(--green); }
.order-submit.button-primary:hover { background: #087451; border-color: #087451; }
.trade-note { color: var(--muted); font-size: 10px; line-height: 1.45; text-align: center; margin: 10px 0 0; }

.funds-grid { display: grid; gap: 15px; margin-bottom: 15px; }
.balance-hero { background: white; border: 1px solid #d8e6f3; border-radius: 15px; padding: 19px; }
.balance-hero > small { color: var(--muted); font-size: 11px; font-weight: 750; }
.balance-hero > strong { display: block; color: #173a69; font-size: 29px; margin: 8px 0 17px; letter-spacing: -.8px; }
.balance-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.balance-meta span { display: block; color: var(--muted); font-size: 10px; margin-bottom: 5px; }
.balance-meta b { font-size: 12px; }
.form-panel { padding: 16px; }
.form-panel h3 { font-size: 14px; margin: 0 0 4px; }
.form-panel p { color: var(--muted); font-size: 11px; margin: 0 0 13px; line-height: 1.5; }
.form-panel .button { width: 100%; min-height: 44px; }
.payment-method-details { margin: 0 0 14px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: #f6f9fc; }
.payment-method-details p { margin: 0 0 7px; white-space: pre-wrap; overflow-wrap: anywhere; }
.payment-method-details p:last-child { margin-bottom: 0; }
.payment-card { display: flex; align-items: center; gap: 10px; min-height: 69px; border-bottom: 1px solid var(--line); padding: 11px 0; }
.payment-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: none; border-radius: 10px; background: var(--green-soft); color: var(--green); }
.payment-icon.payout { background: var(--red-soft); color: var(--red); }
.payment-info { flex: 1; min-width: 0; }
.payment-info strong, .payment-amount strong { display: block; font-size: 12px; }
.payment-info small, .payment-amount small { display: block; color: var(--muted); font-size: 10px; margin-top: 4px; }
.payment-amount { text-align: right; white-space: nowrap; }

.activity-list { padding: 0 15px; }
.activity-item { display: flex; align-items: flex-start; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.activity-item:last-child { border-bottom: 0; }
.activity-icon { width: 32px; height: 32px; display: grid; place-items: center; flex: none; border-radius: 9px; background: var(--green-soft); color: var(--green); }
.activity-icon.funds { color: var(--blue); background: var(--blue-soft); }
.activity-icon .icon { width: 16px; height: 16px; }
.activity-item div { min-width: 0; }
.activity-item strong { display: block; font-size: 11px; margin: 1px 0 4px; }
.activity-item p { color: var(--muted); font-size: 10px; margin: 0; }
.activity-item time { color: var(--faint); font-size: 9px; text-align: right; margin-left: auto; max-width: 70px; }
.notification-read { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--blue); font-size: 10px; font-weight: 750; }

.account-card { display: flex; align-items: center; gap: 11px; padding: 16px; background: white; border: 1px solid var(--line); border-radius: 15px; margin-bottom: 15px; }
.avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--blue); background: var(--blue-soft); font-size: 13px; font-weight: 800; }
.account-card strong { display: block; font-size: 13px; }
.account-card small { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }
.menu-panel { padding: 0 15px; }
.menu-panel button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 66px; background: white; border: 0; border-bottom: 1px solid var(--line); text-align: left; color: var(--ink); padding: 8px 0; }
.menu-panel button:last-child { border-bottom: 0; }
.menu-panel button > .icon:first-child { width: 21px; height: 21px; color: var(--blue); }
.menu-panel button > .icon:last-child { width: 15px; height: 15px; color: var(--faint); }
.menu-panel button span { flex: 1; }
.menu-panel strong { display: block; font-size: 12px; }
.menu-panel small { display: block; color: var(--muted); font-size: 10px; margin-top: 4px; }
.more-note { color: var(--muted); text-align: center; font-size: 10px; line-height: 1.5; margin: 18px 8px; }

.ops-feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin: 15px 0; }
.ops-feature { padding: 13px; background: white; border: 1px solid var(--line); border-radius: 12px; }
.ops-feature .icon { color: var(--blue); }
.ops-feature strong { display: block; font-size: 11px; margin: 8px 0 4px; }
.ops-feature small { color: var(--muted); display: block; font-size: 10px; line-height: 1.4; }
.ops-tabs { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 12px; scrollbar-width: none; }
.ops-tabs::-webkit-scrollbar { display: none; }
.ops-row-list { padding: 0 15px; }
.ops-row { display: flex; align-items: center; gap: 10px; min-height: 65px; border-bottom: 1px solid var(--line); }
.ops-row:last-child { border-bottom: 0; }
.ops-row > span:nth-child(2) { flex: 1; min-width: 0; }
.ops-row strong { display: block; font-size: 11px; }
.ops-row small { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; }
.ops-row b { font-size: 11px; white-space: nowrap; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; text-align: left; }
th, td { padding: 12px 14px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); background: #f8fafc; font-size: 10px; }
td { font-size: 11px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: #18283b91; }
.modal { width: min(100%, 428px); max-height: 90vh; overflow-y: auto; padding: 21px; background: white; border-radius: 17px; box-shadow: 0 20px 70px #16283c38; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.modal-head h2 { font-size: 19px; margin: 5px 0; }
.modal-head p { color: var(--muted); font-size: 11px; line-height: 1.5; margin: 0; }
.modal-summary { padding: 4px 13px; background: #f7f9fc; border: 1px solid var(--line); border-radius: 10px; }
.modal-summary .row { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 11px; }
.modal-summary .row:last-child { border-bottom: 0; }
.modal-summary span { color: var(--muted); }
.modal-summary strong { text-align: right; }
.modal-warning { color: #846a39; font-size: 10px; line-height: 1.5; margin: 14px 0 0; }
.modal-actions { display: flex; gap: 8px; margin-top: 16px; }
.modal-actions .button { flex: 1; }
.close-position-modal .modal-actions .button { min-height: 46px; font-size: 13px; }
.close-position-modal .modal-warning { font-size: 11px; }
.toast { position: fixed; bottom: 83px; left: 50%; transform: translateX(-50%); z-index: 60; width: min(calc(100% - 28px), 432px); background: #183b32; color: white; border-radius: 10px; padding: 12px 14px; box-shadow: 0 10px 30px #15291c26; font-size: 11px; }
.toast.error { background: #893944; }

.page-overview { padding-top: 8px; }
.quote-board { margin: -8px -16px 18px; background: white; border-bottom: 1px solid var(--line); }
.quote-board .empty-state { padding: 45px 20px; }
.quote-board-head { height: 54px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; }
.quote-board-head h2 { margin: 0; font-size: 18px; letter-spacing: -.4px; }
.quote-manage { display: flex; align-items: center; gap: 4px; border: 0; background: transparent; color: var(--blue); font-size: 11px; font-weight: 750; }
.quote-manage .icon { width: 16px; height: 16px; }
.quote-search { display: flex; align-items: center; gap: 8px; height: 43px; margin: 0 15px 8px; padding: 0 12px; border: 1px solid #dce5ee; border-radius: 10px; color: var(--muted); background: #f8fafc; }
.quote-search .icon { width: 18px; height: 18px; }
.quote-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 13px; }
.quote-row { display: flex; align-items: stretch; border-bottom: 1px solid #edf0f4; }
.quote-row:last-child { border-bottom: 0; }
.quote-open { flex: 1; min-width: 0; padding: 13px 4px 13px 15px; border: 0; background: white; color: var(--ink); text-align: left; }
.quote-row-top, .quote-row-bottom { display: grid; grid-template-columns: minmax(76px, 1fr) 90px 90px; align-items: baseline; gap: 5px; }
.quote-row-top strong { font-size: 13px; }
.quote-row-top .quote-bid, .quote-row-top .quote-ask { text-align: right; font-size: 20px; font-weight: 760; letter-spacing: -.5px; }
.quote-row-bottom { margin-top: 3px; color: var(--muted); font-size: 10px; }
.quote-row-bottom small:nth-child(n+2) { text-align: right; }
.quote-row-bottom small:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote-add { width: 35px; flex: none; border: 0; background: white; color: var(--muted); font-size: 23px; font-weight: 400; }

.page-chart { padding: 10px 0 112px; background: white; }
.chart-controls { padding: 0 13px 9px; }
.chart-timeframes { display: flex; align-items: center; gap: 4px; margin-top: 7px; }
.chart-timeframes button { min-width: 45px; padding: 6px 9px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 800; }
.chart-timeframes button.active { color: var(--blue); background: var(--blue-soft); }
.page-chart .quick-trade { margin: 0 12px 9px; padding: 10px 12px; border-radius: 10px; box-shadow: none; }
.page-chart .quick-trade-volume { margin: 7px 0; }
.page-chart .quick-trade-buttons button { min-height: 52px; }
.page-chart .quick-trade > p { margin-top: 6px; }
.page-chart .chart-panel { margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.chart-legend { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 7px; padding: 8px 12px 5px; font-size: 10px; }
.chart-legend strong { color: var(--blue); font-size: 11px; }
.chart-legend span { color: #526174; }
.chart-legend small { display: block; width: 100%; color: var(--muted); font-size: 10px; }
.page-chart .trade-chart { height: clamp(420px, 62vh, 680px); margin: 0; border: 0; border-top: 1px solid #eef2f6; border-bottom: 1px solid #eef2f6; border-radius: 0; background: white; }
.page-chart .trade-chart > svg { width: calc(100% - 52px); }
.price-axis { position: absolute; top: 0; bottom: 0; right: 0; width: 52px; border-left: 1px solid #dfe5ec; background: white; color: #66717e; font-size: 10px; pointer-events: none; }
.price-axis span { position: absolute; left: 3px; transform: translateY(-50%); }
.price-axis span:first-child { transform: none; }
.price-axis span:last-child { transform: translateY(-100%); }
.page-chart .current-level, .page-chart .entry-level, .page-chart .trade-level { right: 52px; }
.page-chart .trade-level { min-height: 30px; }
.page-chart .trade-level span, .page-chart .trade-level strong { font-size: 9px; }
.page-chart .market-foot { border-bottom: 1px solid var(--line); }
.page-chart .risk-panel, .page-chart .advanced-order { margin: 12px; }
.fixed-instrument { padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: #f8fafc; color: var(--ink); font-size: 12px; font-weight: 750; }

.page-portfolio, .page-trades { padding: 0 0 112px; background: white; }
.position-account { padding: 20px 16px 13px; }
.position-account-head { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; }
.position-account-head button { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #f1f6fc; color: var(--ink); }
.position-account > strong { display: block; margin: 2px 0 17px; text-align: center; font-size: 24px; }
.position-account dl { margin: 0; }
.position-account dl div { display: flex; justify-content: space-between; gap: 10px; margin: 7px 0; font-size: 12px; }
.position-account dt { color: #465467; }
.position-account dd { margin: 0; font-weight: 700; }
.position-list-head { display: flex; justify-content: space-between; align-items: center; padding: 11px 15px; background: #f5f7fa; }
.position-list-head h1 { margin: 0; font-size: 14px; }
.position-list-head span { color: var(--muted); font-size: 11px; }
.position-line { padding: 14px 15px 12px; border-bottom: 1px solid #edf0f4; }
.position-line-main, .position-line-sub { display: flex; justify-content: space-between; gap: 8px; }
.position-line-main strong, .position-line-main b { font-size: 14px; }
.position-line-main strong span { font-weight: 650; }
.position-line-sub { margin-top: 4px; color: var(--muted); font-size: 11px; }
.position-line-actions { display: flex; gap: 10px; margin-top: 12px; }
.position-line-actions button { flex: 1; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: white; color: var(--blue); font-size: 12px; font-weight: 750; }
.position-line-actions [data-close-position] { border-color: #eab7bd; background: var(--red-soft); color: #ad3946; font-size: 13px; font-weight: 800; }

.history-head { display: flex; align-items: baseline; justify-content: space-between; padding: 17px 15px 11px; }
.history-head h1 { margin: 0; font-size: 18px; }
.history-head span { color: var(--muted); font-size: 10px; }
.history-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 0 15px 7px; padding: 4px; border-radius: 11px; background: #f2f4f7; }
.history-tabs button { min-height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font-size: 12px; }
.history-tabs button.active { background: white; box-shadow: 0 1px 5px #2033481f; font-weight: 750; }
.history-row { padding: 13px 14px; border-bottom: 1px solid #eef0f3; }
.history-row-top, .history-row-bottom { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.history-row-top strong, .history-row-top b { font-size: 13px; }
.history-row-top strong span { font-weight: 650; }
.history-row-bottom { margin-top: 4px; color: var(--muted); font-size: 11px; }
.history-row-bottom time { text-align: right; white-space: nowrap; }
.history-status { color: var(--muted); text-transform: capitalize; }
.history-status.filled { color: var(--green); }
.history-status.pending { color: #ad812c; }
.history-total { margin: 15px; padding-top: 11px; border-top: 1px solid var(--line); }
.history-total div { display: flex; justify-content: space-between; gap: 10px; margin: 7px 0; font-size: 12px; }

@media (max-width: 370px) {
  .mode-pill { font-size: 9px; padding: 6px; }
  .content { padding-left: 12px; padding-right: 12px; }
  .market-card-price strong { font-size: 11px; }
  .chart-caption { display: none; }
  .activity-item time { display: none; }
  .quote-row-top, .quote-row-bottom { grid-template-columns: minmax(66px, 1fr) 76px 76px; }
  .quote-row-top .quote-bid, .quote-row-top .quote-ask { font-size: 17px; }
}