/* Independent user workspace, PC and handheld layouts. */
.trading-portal .sidebar { position: sticky; top: 0; height: 100dvh; }
.trading-portal .view-root { max-width: 1680px; width: 100%; margin: 0 auto; }
.trading-portal input, .trading-portal select { min-height: 44px; }
.trading-portal .table-wrap { overscroll-behavior-x: contain; }
.trading-portal .user-strategy-table td:first-child { min-width: 180px; }
@media (max-width: 680px) {
  .trading-portal .sidebar { height: auto; z-index: 10; background: #0d2d25; }
  .trading-portal .sidebar-brand { display: none; }
  .trading-portal .main-nav { padding-bottom: 10px; scrollbar-width: none; }
  .trading-portal .nav-item { min-height: 44px; display: inline-flex; align-items: center; }
  .trading-portal .topbar { min-height: 64px; }
  .trading-portal .view-root { padding-bottom: max(32px, env(safe-area-inset-bottom)); }
  .trading-portal .user-strategy-table { min-width: 900px; }
  .trading-portal .totp-modal { max-height: 90dvh; overflow-y: auto; }
  .trading-portal input, .trading-portal select { font-size: 16px; }
}

/* Mobile is a dedicated card-and-tab interface. Desktop tables never enter it. */
/* Explicit H5 entry keeps its native-style layout at every viewport. */
  body.h5-user { background:#f4f7f5; color:#183c32; -webkit-text-size-adjust:100%; }
  .h5-user .app-shell { display:block; }
  .h5-user .sidebar, .h5-user .topbar { display:none; }
  .h5-user .content-shell { width:100%; }
  .h5-user .view-root { padding:0; max-width:none; }
  .h5-user .app-message { margin:12px 16px; }
  .m-app { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:14px; line-height:1.5; padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
  .m-app button, .m-app input, .m-app select { font:inherit; }
  .m-app button { cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .m-app button:disabled { opacity:.45; cursor:default; }
  .m-app button:focus-visible, .m-app a:focus-visible { outline:3px solid #91bdac; outline-offset:3px; }
  .m-app svg { width:22px; height:22px; flex-shrink:0; }
  .m-header { min-height:72px; padding:calc(14px + env(safe-area-inset-top)) 16px 12px; display:flex; align-items:center; justify-content:space-between; gap:8px; background:#f4f7f5; }
  .m-header > div { display:flex; align-items:center; gap:9px; min-width:0; }
  .m-header > div:first-child { font-size:20px; font-weight:700; letter-spacing:-.5px; }
  .m-header img { border-radius:9px; }
  .m-icon { border:0; background:transparent; color:#264f40; width:44px; height:44px; display:grid; place-items:center; padding:10px; }
  .m-test { font-size:10px; font-weight:650; padding:4px 7px; background:#e7ede4; color:#626f49; border-radius:6px; white-space:nowrap; }
  .m-account { margin:0 16px 18px; padding:10px 13px; border:1px solid #e0e8e2; border-radius:13px; background:#fff; display:block; width:calc(100% - 32px); text-align:left; color:#406356; }
  .m-account > span { font-size:10px; color:#71877c; }
  .m-account select { border:0; box-shadow:none; background:transparent; color:#264d3f; padding:2px 22px 2px 0; width:100%; min-height:30px; font-size:13px; font-weight:600; text-overflow:ellipsis; }
  .m-account-empty { display:flex; align-items:center; justify-content:space-between; min-height:48px; font-size:13px; }
  .m-content { padding:0 16px; min-width:0; }
  .m-content > * { min-width:0; }
  .m-app h1,.m-app h2,.m-app h3,.m-app p { margin:0; }
  .m-app h1 { font-size:24px; line-height:1.35; letter-spacing:-.6px; overflow-wrap:anywhere; }
  .m-app h2 { font-size:19px; letter-spacing:-.4px; }
  .m-app h3 { font-size:17px; line-height:1.4; letter-spacing:-.25px; }
  .m-app small { font-size:11px; color:#7a8d83; line-height:1.6; overflow-wrap:anywhere; }
  .m-app .m-gain { color:#16865b; }
  .m-app .m-loss { color:#c36350; }
  .m-hero { border-radius:23px; background:linear-gradient(130deg,#123e30,#245a45); color:#fff; padding:24px 22px; margin-bottom:22px; box-shadow:0 8px 22px #153d3010; overflow:hidden; }
  .m-hero-label { display:flex; justify-content:space-between; align-items:center; color:#c1d7cb; font-size:12px; }
  .m-hero-label svg { opacity:.6; width:18px; }
  .m-hero-total { display:block; font-size:38px; font-weight:650; letter-spacing:-1.6px; line-height:1.3; margin-top:10px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
  .m-hero > p { color:#b2cbbd; font-size:11px; margin:8px 0 0; }
  .m-hero .m-grid { border-top:1px solid #ffffff22; padding-top:16px; margin-top:20px; }
  .m-hero .m-metric span { color:#bcd2c5; }
  .m-hero .m-metric strong { font-size:19px; color:#fff; }
  .m-hero .m-metric .m-gain { color:#9bddb3; }
  .m-hero .m-metric .m-loss { color:#ffb4a3; }
  .m-hero .m-tag { background:#ffffff1c; color:#d5e9db; margin-bottom:13px; }
  .m-hero > svg { color:#bcd2c5; margin-bottom:10px; }
  .m-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; }
  .m-metric { min-width:0; }
  .m-metric span { display:block; color:#819087; font-size:11px; margin-bottom:5px; }
  .m-metric strong { font-size:22px; font-weight:650; line-height:1.25; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
  .m-card,.m-strategy-card,.m-position-card,.m-settings { background:white; border:1px solid #e6ece7; border-radius:18px; padding:19px; margin-bottom:14px; width:100%; color:#254c3d; text-align:left; }
  .m-card p,.m-connect p { color:#7b8c81; margin:10px 0; font-size:12px; line-height:1.8; }
  .m-card h3 { margin-bottom:10px; }
  .m-card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
  .m-card-top > svg { color:#9bafa2; width:18px; height:18px; }
  .m-card-top > strong { text-align:right; font-variant-numeric:tabular-nums; }
  .m-card-top small { display:block; font-weight:400; margin-top:3px; }
  .m-tag { display:inline-flex; padding:3px 8px; border-radius:6px; color:#5a8065; background:#edf4ed; font-size:10px; font-weight:600; }
  .m-strategy-card h3 { margin:12px 0 4px; font-size:18px; }
  .m-strategy-card > p { color:#9aa69e; font-size:11px; margin-bottom:20px; }
  .m-strategy-card .m-metric strong { font-size:24px; letter-spacing:-.7px; }
  .m-strategy-card footer { display:flex; justify-content:space-between; gap:10px; color:#92a097; border-top:1px solid #eef2ee; padding-top:13px; margin-top:14px; font-size:10px; flex-wrap:wrap; }
  .m-app .m-sparkline { width:100%; height:55px; display:block; margin-top:17px; color:#7aa688; }
  .m-section-title { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:25px 2px 15px; }
  .m-section-title span { color:#9aa69e; font-size:11px; }
  .m-shortcuts { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px; }
  .m-shortcuts .m-setting-row { background:#e9efe9; border:0; border-radius:13px; padding:13px; font-size:12px; font-weight:600; min-height:58px; }
  .m-shortcuts svg { width:15px; }
  .m-button { border:1px solid #d9e4db; border-radius:12px; padding:12px 15px; min-height:46px; color:#355f48; background:#fff; font-weight:600!important; }
  .m-button.primary { color:white; background:#285d43; border-color:#285d43; }
  .m-button.ghost { background:transparent; }
  .m-button.danger { color:#b65949; background:#fcf0eb; border-color:#f1ddd6; }
  .m-button.full { width:100%; margin:8px 0; }
  .m-risk { border:0; background:transparent; color:#718977; display:flex; width:100%; text-align:left; gap:9px; align-items:center; font-size:11px!important; padding:18px 2px 8px; min-height:48px; }
  .m-risk svg { width:16px; height:16px; }
  .m-risk svg:last-child { margin-left:auto; width:12px; }
  .m-footnote,.m-subtitle { font-size:11px; color:#95a197; line-height:1.8; margin:8px 2px 18px!important; }
  .m-caution { border:1px solid #e8dfc9; border-radius:12px; background:#faf5e9; color:#927949!important; padding:12px 14px; font-size:11px!important; margin:12px 0!important; line-height:1.8; overflow-wrap:anywhere; }
  .m-empty { text-align:center; padding:36px 15px; color:#97a49a; }
  .m-empty > svg { width:32px; height:32px; color:#bac9bd; margin-bottom:14px; }
  .m-empty h3 { color:#7e9382; font-size:15px; }
  .m-empty p { font-size:12px; margin-top:8px; overflow-wrap:anywhere; }
  .m-pair { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding:11px 0; border-bottom:1px solid #f0f3ef; font-size:12px; }
  .m-pair:last-child { border-bottom:0; }
  .m-pair > span { color:#8d9e90; flex-shrink:0; max-width:48%; }
  .m-pair strong { font-weight:550; text-align:right; overflow-wrap:anywhere; min-width:0; }
  .m-symbol > span { display:block; font-size:21px; font-weight:650; }
  .m-position-card .m-grid { margin-top:20px; }
  .m-position-card .m-metric strong { font-size:17px; }
  .m-segments { display:flex; background:#e8eee7; border-radius:12px; padding:4px; gap:4px; margin:20px 0; }
  .m-segments button { flex:1; border:0; border-radius:9px; background:transparent; padding:10px 6px; min-height:42px; color:#89988a; font-size:13px; }
  .m-segments button[aria-pressed=true] { background:#fff; color:#2c5c41; font-weight:600; box-shadow:0 2px 5px #153d3009; }
  .m-pills { display:flex; gap:10px; margin-bottom:18px; }
  .m-pills button { border:0; border-radius:20px; padding:8px 17px; min-height:40px; color:#8b9d8d; background:transparent; font-size:12px; }
  .m-pills button[aria-pressed=true] { color:#316345; background:#e4eee2; }
  .m-order summary { list-style:none; display:flex; justify-content:space-between; gap:12px; cursor:pointer; }
  .m-order summary::-webkit-details-marker { display:none; }
  .m-order summary > div { min-width:0; }
  .m-order summary > div:last-child { text-align:right; }
  .m-order summary small,.m-order summary span { display:block; font-size:10px; color:#94a092; margin-top:5px; overflow-wrap:anywhere; }
  .m-order summary b { font-size:10px; }
  .m-order summary strong { font-size:13px; overflow-wrap:anywhere; }
  .m-order-details { margin-top:14px; border-top:1px solid #e8eee5; }
  .m-profile { display:flex; align-items:center; gap:16px; padding:24px 20px; }
  .m-profile > div:last-child { min-width:0; }
  .m-profile p { font-size:11px; color:#c0d4c1; overflow-wrap:anywhere; margin:7px 0; }
  .m-profile small { color:#9fbca7; }
  .m-avatar { width:54px; height:54px; border:1px solid #ffffff30; border-radius:18px; display:grid; place-items:center; flex-shrink:0; background:#ffffff10; }
  .m-avatar svg { width:28px; height:28px; color:#c5dfc5; }
  .m-settings { padding:0 17px; }
  .m-setting-row { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:17px 0; min-height:56px; color:#3c6248; background:transparent; border:0; border-bottom:1px solid #eff2eb; width:100%; text-decoration:none; font-size:13px; }
  .m-setting-row:last-child { border-bottom:0; }
  .m-setting-row small { display:block; margin-top:4px; }
  .m-setting-row svg { width:15px; height:15px; color:#b0beb0; }
  .m-setting-row select { width:auto; max-width:150px; min-height:32px; border:0; background:transparent; color:#6d866d; font-size:13px; }
  .m-form { display:grid; gap:10px; }
  .m-form label,.m-field-label { font-size:12px; color:#789075; display:block; margin-top:9px; }
  .m-form input,.m-form select,.m-funding-input input { width:100%; min-width:0; padding:12px; min-height:48px; font-size:16px; border:1px solid #dce5d8; border-radius:10px; background:#fafcf8; color:#375f3d; box-shadow:none; }
  .m-form button { margin-top:12px; }
  .m-funding-input { display:flex; align-items:center; gap:10px; margin:8px 0; }
  .m-funding-input input { flex:1; }
  .m-funding-input button { flex-shrink:0; font-size:12px; }
  .m-pagination { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:18px 0; font-size:12px; }
  .m-pagination .m-button { font-size:11px; padding:10px 13px; }
  .m-comparison { margin-top:15px; border-top:1px solid #f0f3eb; padding-top:12px; }
  .m-comparison .m-metric strong { font-size:15px; }
  .m-skeleton { min-height:400px; display:grid; place-items:center; color:#82967f; font-size:12px; }
  .m-tabbar { position:fixed; bottom:0; left:0; right:0; z-index:25; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); padding:9px 8px calc(9px + env(safe-area-inset-bottom)); background:#ffffffed; backdrop-filter:blur(16px); border-top:1px solid #e0e8dc; box-shadow:0 -4px 18px #224d3004; }
  .m-tabbar button { border:0; background:transparent; color:#9aa898; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:48px; font-size:10px; }
  .m-tabbar button[aria-current=page] { color:#285b3b; font-weight:650; }
  .m-tabbar button[aria-current=page] svg { stroke-width:2.2; }
  .m-tabbar svg { width:22px; height:22px; }
  .h5-user .modal-backdrop { z-index:80; align-items:flex-end; padding:0; }
  .h5-user .totp-modal-panel { border-radius:24px 24px 0 0; width:100%; max-width:none; max-height:90dvh; overflow:auto; padding-bottom:env(safe-area-inset-bottom); }
  .h5-user .totp-modal-panel .form-actions { display:flex; flex-wrap:wrap; }
  .h5-user .totp-modal-panel .form-actions button { flex:1; min-height:48px; }
  .h5-user .totp-modal-panel input { font-size:20px; min-height:52px; }
  .h5-user #regional-risk-notice { font-size:13px; }
  .h5-user .auth-screen { padding:30px 20px max(30px,env(safe-area-inset-bottom)); background:#f4f7f2; }
  .h5-user .auth-layout { display:block; max-width:440px; width:100%; min-height:0; margin:auto; border:0; box-shadow:none; background:transparent; }
  .h5-user .auth-intro { padding:24px 10px 30px; background:transparent; color:#204c32; min-height:0; }
  .h5-user .auth-intro h1,.h5-user .auth-intro .auth-brand-description,.h5-user .auth-intro .auth-brand-line,.h5-user .intro-status-list,.h5-user .auth-intro-footer { display:none; }
  .h5-user .auth-lede { color:#789273; margin-top:16px; font-size:15px; }
  .h5-user .intro-brand .brand-wordmark { color:#204c32; font-size:29px; }
  .h5-user .auth-panel { padding:25px 20px; border:1px solid #e0e8db; border-radius:22px; background:#fff; }
  .h5-user .auth-panel input { min-height:50px; border-radius:12px; font-size:16px; }
  .h5-user .auth-panel button { min-height:48px; border-radius:12px; }
  .h5-user .auth-panel h2 { font-size:23px; }
  .h5-user .auth-panel .security-note { font-size:11px; }

@media (min-width: 761px) {
  body.h5-user { max-width: 480px; margin: 0 auto; }
  .h5-user .m-tabbar { max-width: 480px; margin: 0 auto; }
  .h5-user .app-shell { min-width: 0; }
}