/* Shared responsive shell; matches the supplied mobile layout. */
:root { --tf-page:#f6f5f9; --tf-card:#fff; --tf-ink:#202023; --tf-muted:#717176; --tf-line:#e8e7ec; }
body.trade-fe-dark-theme { --tf-page:#141416; --tf-card:#202023; --tf-ink:#f5f5f7; --tf-muted:#aaaab0; --tf-line:#35353b; }
.tf-mobile-header,.tf-mobile-actions { display:none; }
.tf-responsive-page { min-height:100dvh; background:var(--tf-page); color:var(--tf-ink); font-family:Kraken-Product,'IBM Plex Sans',sans-serif; }
.tf-responsive-page * { box-sizing:border-box; }
.tf-responsive-page [data-shell-layout] { display:grid; grid-template-columns:200px minmax(0,1fr); grid-template-areas:'sidebar header' 'sidebar main' 'sidebar footer'; gap:24px; padding:0 32px 40px 0; }
.tf-responsive-page [data-shell-area=header] { grid-area:header; min-height:76px; display:flex; justify-content:flex-end; align-items:center; gap:12px; }
.tf-responsive-page [data-shell-area=main] { grid-area:main; width:100%; max-width:1040px; margin:auto; }
.tf-responsive-page [data-shell-area=sidebar] { grid-area:sidebar; padding:28px 20px; }
.tf-responsive-page [data-shell-area=sidebar] a { display:block; padding:14px; color:inherit; text-decoration:none; }
.tf-responsive-page [data-shell-area=footer] { grid-area:footer; }
.tf-settings-layout { display:grid!important; grid-template-columns:180px minmax(0,1fr); gap:32px!important; min-width:0; }
.tf-settings-nav { min-width:0; }
.tf-settings-layout > :last-child { min-width:0; width:100%; }
.tf-settings-layout section { min-width:0; max-width:100%; }
.tf-settings-layout .SubscriptionPageHeader-module_container__I5mNo { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:32px; border-radius:24px; background:radial-gradient(ellipse at bottom right,#352550,#17151f 75%); color:#fff; overflow:hidden; }
.tf-settings-layout .SubscriptionPageHeader-module_container__I5mNo .text-ds-strong { color:#fff!important; }
.tf-settings-layout .SubscriptionPageHeader-module_container__I5mNo .text-ds-neutral { color:#bbb8c3!important; }
.tf-settings-layout .SubscriptionPageHeader-module_container__I5mNo button { background:#fff!important; color:#17151f!important; border-radius:999px; }
.tf-settings-nav a[aria-current=page] { border-radius:999px; background:var(--tf-card); color:var(--tf-ink); outline:1px solid var(--tf-line); }
.tf-settings-layout .ds-container { overflow-wrap:anywhere; }
.tf-screen { display:grid; gap:28px; padding:12px 0 36px; }
.tf-screen h1,.tf-screen h2 { font-size:24px; line-height:1.25; letter-spacing:-.025em; font-weight:500; margin:0 0 16px; }
.tf-screen h3 { font-size:16px; margin:0 0 8px; font-weight:600; }
.tf-screen p { color:var(--tf-muted); line-height:1.5; margin:8px 0 16px; }
.tf-surface { padding:24px; background:var(--tf-card); border-radius:24px; }
.tf-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 0; }
.tf-row + .tf-row { border-top:1px solid var(--tf-line); }
.tf-row p { margin-bottom:0; }
.tf-pill { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 20px; border:0; border-radius:999px; background:var(--tf-line); color:var(--tf-ink); text-decoration:none; font:inherit; cursor:pointer; }
.tf-pill-primary { background:#111; color:#fff; }
.tf-pill:disabled { opacity:.5; cursor:not-allowed; }
.tf-empty { text-align:center; padding:48px 20px; }
.tf-empty svg { width:32px; height:32px; margin:0 auto 16px; color:var(--tf-muted); }
.tf-promo { background:radial-gradient(ellipse at bottom right,#352550,#141419 70%); color:white; border-radius:24px; padding:32px; text-align:center; }
.tf-promo p { color:#c5c2cb; }
.tf-promo img { width:180px; height:180px; object-fit:contain; margin:24px auto; }
.tf-support-links { display:grid; gap:10px; }
.tf-support-links a { display:flex; justify-content:space-between; align-items:center; padding:16px 0; color:inherit; text-decoration:none; border-bottom:1px solid var(--tf-line); }
.tf-footer-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 32px; max-width:760px; margin:40px auto; padding:28px 16px; border-top:1px solid var(--tf-line); }
.tf-footer-links a { color:var(--tf-muted); text-decoration:none; font-size:14px; }
.tf-panel { position:fixed; inset:0; z-index:4600; background:rgba(20,20,24,.42); display:flex; justify-content:flex-end; }
.tf-panel[hidden] { display:none!important; }
html.tf-shell-open { overflow:hidden; }
.tf-panel-content { width:min(440px,100%); max-height:100dvh; overflow:auto; background:var(--tf-page); color:var(--tf-ink); padding:20px; display:flex; flex-direction:column; }
.tf-panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.tf-panel-head img { width:32px; height:32px; object-fit:contain; }
.tf-icon-button { display:inline-flex; justify-content:center; align-items:center; width:44px; height:44px; border:0; background:transparent; color:inherit; border-radius:50%; cursor:pointer; flex-shrink:0; }
.tf-icon-button svg { width:22px; height:22px; }
.tf-nav-links { display:grid; gap:8px; }
.tf-nav-links a { display:flex; gap:14px; align-items:center; padding:14px 8px; color:inherit; text-decoration:none; font-size:16px; }
.tf-nav-links svg { width:22px; height:22px; }
.tf-nav-links a[aria-current=page] { color:#6841dc; background:var(--tf-card); border-radius:12px; }
.tf-panel-bottom { margin-top:auto; padding-top:48px; }
.tf-panel-content { padding:0 16px 20px; background:#fafbfb; }
.tf-panel-head { min-height:56px; border-bottom:1px solid var(--tf-line); margin:0 -16px 20px; padding:0 20px; }
.tf-nav-links { gap:0; }
.tf-nav-links a { min-height:44px; padding:10px 12px; font-size:15px; color:#65686d; }
.tf-panel-bottom [data-signout] { justify-content:flex-start; background:transparent; border-radius:0; border-top:1px solid var(--tf-line); width:100%; margin-top:24px; padding:22px 12px; color:#65686d; }
.tf-responsive-page { margin:0; }
.tf-support-page { max-width:600px; }
.tf-support-page h2 { font-size:14px; color:#647080; margin:24px 0 10px; letter-spacing:0; }
.tf-support-page .tf-support-links a { border:0; padding:10px 8px; min-height:36px; font-size:15px; color:#344255; }
.tf-support-page > a { color:#344255; font-size:14px; text-decoration:none; }
.tf-settings-nav a { text-decoration:none; color:var(--tf-muted); padding:12px; font-size:14px; display:block; white-space:nowrap; }
.tf-tab-controls { display:none; }
.tf-app-field input,.tf-app-field select { min-width:0; width:100%; font-size:16px; color:var(--tf-ink); background:var(--tf-card); }
.tf-app-btn { font-family:inherit; }
.tf-app-btn-primary { background:#111; color:#fff; border-radius:999px; }
.tf-app-btn-ghost { background:#eeeeef; color:#202023; border-radius:999px; }
.tf-app-card { position:relative; background:var(--tf-card); color:var(--tf-ink); max-height:calc(100dvh - 48px); }
.tf-app-card [data-tf-title] { padding-right:36px; }
.tf-modal-close { position:absolute; right:12px; top:12px; }
.tf-trade-options { display:grid; gap:12px; }
.tf-trade-option { display:flex; align-items:center; justify-content:space-between; width:100%; padding:20px; border:1px solid var(--tf-line); border-radius:16px; background:var(--tf-card); color:var(--tf-ink); text-align:left; font:inherit; text-decoration:none; }
button.tf-trade-option { cursor:pointer; }
.tf-trade-option small { display:block; margin-top:6px; color:var(--tf-muted); font-size:13px; }
.tf-trade-option[aria-disabled=true] { opacity:.6; }
.tf-shell-menu { max-height:calc(100dvh - 90px); overflow:auto; }
.tf-shell-notify { height:100dvh; }
.tf-shell-notify-empty { margin:12px 16px 16px; border-radius:20px; background:var(--tf-card); }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid #7250cf; outline-offset:3px; }
@media(max-width:1023px) {
  body:has([data-shell-layout]) { background:var(--tf-page)!important; }
  [data-shell-layout],.tf-responsive-page [data-shell-layout] { grid-template-columns:minmax(0,1fr)!important; grid-template-rows:auto auto 1fr auto!important; grid-template-areas:'disclaimer' 'header' 'main' 'footer'!important; padding:0 16px calc(100px + env(safe-area-inset-bottom))!important; gap:0!important; width:100%; min-width:0; }
  [data-shell-area=sidebar] { display:none!important; }
  [data-shell-area=header] { position:sticky!important; top:0; z-index:50; min-height:72px!important; background:transparent!important; margin:0 -16px; padding:0 12px!important; }
  [data-shell-area=header] > header,[data-shell-area=header] > .tf-desktop-header { display:none!important; }
  [data-shell-area=header]:has(.tf-mobile-header) > :not(.tf-mobile-header) { display:none!important; }
  .tf-mobile-header { display:flex!important; align-items:center; justify-content:space-between; width:100%; height:72px; gap:8px; flex-shrink:0; }
  .tf-mobile-header .tf-mobile-right { display:flex; align-items:center; gap:8px; }
  .tf-mobile-header .tf-mobile-profile { display:flex; align-items:center; gap:6px; border:0; background:transparent; color:var(--tf-muted); cursor:pointer; padding:8px 0; }
  .tf-mobile-initials { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--tf-line); font-size:11px; }
  [data-shell-area=main],.Content-module_container__AS220,.Content-module_content__jI9XG { min-width:0!important; width:100%!important; max-width:100%!important; overflow:visible!important; margin-left:0!important; margin-right:0!important; }
  .tf-settings-layout { display:flex!important; flex-direction:column; gap:28px!important; }
  .tf-settings-nav { display:flex!important; flex-direction:row!important; align-items:center!important; gap:4px!important; overflow-x:auto; width:100%; max-width:100%; padding:12px 0; scrollbar-width:none; scroll-padding-inline:12px; }
  .tf-settings-nav a { flex:none; padding:10px 14px; border-radius:999px; }
  .tf-settings-nav a[aria-current=page] { background:var(--tf-card)!important; color:var(--tf-ink)!important; }
  .tf-settings-layout > :last-child { width:100%; min-width:0; }
  .tf-settings-layout section { width:100%!important; }
  .tf-settings-layout .ds-container { padding:20px!important; border-radius:24px!important; }
  .tf-settings-layout [class*='PersonalInfo-module'] { display:grid!important; gap:24px!important; }
  .tf-settings-layout [aria-label] > .flex-col { flex-direction:column!important; align-items:flex-start!important; gap:4px; }
  .tf-settings-layout img { max-width:100%; }
  .tf-settings-layout .SubscriptionPageHeader-module_container__I5mNo { flex-direction:column; text-align:center; padding:28px 20px; gap:20px; }
  .tf-settings-layout .SubscriptionPlansOfferPage-module_offsetIllustration__T0Xn2 { position:static!important; transform:none!important; }
  .tf-settings-layout .SubscriptionPlansOfferPage-module_offsetIllustration__T0Xn2 img { width:180px; height:180px; object-fit:contain; margin:0 auto; }
  .tf-mobile-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; position:fixed; z-index:60; inset:auto 0 0; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:linear-gradient(transparent,var(--tf-page) 28%); }
  .tf-mobile-actions :is(button,a) { display:flex; align-items:center; justify-content:center; min-width:0; text-decoration:none; height:46px; border:0; border-radius:999px; font:500 14px Kraken-Product,'IBM Plex Sans',sans-serif; background:#e5e5e7; color:#171719; cursor:pointer; }
  .tf-mobile-actions button:last-child { color:#fff; background:#0c0c0e; }
  .tf-app-lock .tf-mobile-actions,.tf-shell-open .tf-mobile-actions { visibility:hidden; }
  .tf-app-modal { padding:0; align-items:end; }
  .tf-app-card { width:100%; border-radius:24px 24px 0 0; max-height:calc(100dvh - 24px); padding:28px 20px calc(24px + env(safe-area-inset-bottom)); }
  .tf-app-card:before { content:''; display:block; width:36px; height:4px; background:#d5d4d9; border-radius:8px; margin:-16px auto 24px; }
  .tf-app-card iframe { height:min(630px,70dvh)!important; }
  .tf-app-actions { display:flex; flex-wrap:wrap; }
  .tf-app-actions button { flex:1; }
  .tf-shell-notify { width:100%; z-index:4700; }
  .tf-shell-notify-head { min-height:64px; padding:12px 16px; }
  .tf-shell-notify-head h2 { font-size:22px; }
  #tf-transfer-menu { inset:auto 0 0!important; width:100%; border-radius:24px 24px 0 0; padding:28px 16px calc(16px + env(safe-area-inset-bottom)); background:var(--tf-card); color:var(--tf-ink); box-shadow:0 -10px 0 var(--tf-page); }
  #tf-transfer-menu:before { content:''; display:block; height:4px; width:36px; background:#d5d4d9; border-radius:8px; margin:-17px auto 20px; }
  #tf-transfer-menu .tf-shell-item { color:var(--tf-ink); padding:20px; border:1px solid var(--tf-line); border-radius:14px; }
  #tf-transfer-menu .tf-shell-item-sub { color:var(--tf-muted); }
  #tf-account-menu { top:64px!important; left:12px!important; width:min(340px,calc(100vw - 24px)); }
  .tf-panel-content { width:100%; }
  .tf-app-toast { left:16px; right:16px; bottom:88px; max-width:none; }
  [data-shell-area=main] svg { max-width:100%; }
  .tf-screen { gap:28px; }
  .tf-screen h1,.tf-screen h2 { font-size:23px; }
  .tf-screen.tf-support-page h2 { font-size:14px; margin:24px 0 10px; }
  .tf-screen.tf-support-page { gap:0; padding-top:8px; }
  .tf-row { align-items:flex-start; }
  .tf-surface { padding:20px; }
}
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; } }

/* Keep the signed-in discovery layout inside the phone viewport. */
@media (max-width: 767px) {
  [data-shell-layout] [data-shell-area=main] .flex:has(> .flex-1 [class*="DiscoverabilityCard-module_card"]) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
  }
  [data-shell-layout] [data-shell-area=main] .flex:has(> .flex-1 [class*="DiscoverabilityCard-module_card"]) > .flex-1,
  [data-shell-layout] [data-shell-area=main] .flex:has(> .flex-1 [class*="DiscoverabilityCard-module_card"]) [style*="min-width"] {
    min-width: 0 !important;
    max-width: 100%;
  }
  [data-shell-layout] [data-shell-area=main] [class*="grid-cols-"][class*="minmax(300px,1fr)"] {
    grid-template-columns: minmax(0, 1fr);
  }
  [data-shell-layout] [class*="Content-module_primary"] > *,
  [data-shell-layout] [class*="Content-module_header"] > * {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 1023px) {
  .invest-hub { scroll-margin-top: 88px; }
  body:has(.invest-hub) [data-shell-area=header] { background: var(--tf-page) !important; }
}
/* Compact account navigation shared across customer pages. */
@media(max-width:1023px){
 [data-shell-area=header]:has(.tf-mobile-header){background:var(--tf-card)!important;border-bottom:1px solid var(--tf-line)}
 .tf-mobile-header{height:76px;gap:8px!important}
 .tf-mobile-left,.tf-mobile-header .tf-mobile-right{display:flex;align-items:center;gap:8px}
 .tf-mobile-header .tf-icon-button{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;min-width:38px;padding:9px;border-radius:50%;border:0;background:var(--tf-page);color:var(--tf-muted)}
 .tf-mobile-header .tf-mobile-profile{padding:0;background:none}
 .tf-mobile-header .tf-mobile-initials{width:38px;height:38px;font-size:12px;font-weight:500;color:var(--tf-ink);background:var(--tf-line)}
 .tf-mobile-balance{display:flex;align-items:center;justify-content:center;min-height:38px;padding:8px 12px;max-width:112px;border:1px solid var(--tf-line);border-radius:30px;text-decoration:none;color:var(--tf-ink);font-size:13px;font-weight:500;box-shadow:0 2px 4px #00000005;overflow:hidden}
 .tf-mobile-header svg{width:20px;height:20px}
}
@media(max-width:359px){.tf-mobile-left,.tf-mobile-header .tf-mobile-right{gap:5px}.tf-mobile-header .tf-icon-button,.tf-mobile-header .tf-mobile-initials{width:34px;height:34px;min-width:34px}.tf-mobile-balance{max-width:78px;padding:8px;font-size:11px}.tf-mobile-header{gap:5px!important}}

/* Keep the full account footer on desktop; omit it from the mobile account shell. */
@media(max-width:1023px){
 [data-shell-layout] [data-shell-area=footer],
 [data-shell-layout] [data-shell-area=footer].tf-account-footer{display:none!important}
}

/* Show funding actions after the balance on mobile account dashboards. */
@media(max-width:1023px){
 [data-shell-area=main] [class*="BalanceHeader-module_container"]{padding-top:24px!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:20px!important}
 [data-shell-area=main] [class*="BalanceHeader-module_balanceAndDeltaContainer"]{order:0!important;width:100%!important;min-width:0}
 [data-shell-area=main] [data-testid="action-buttons-container"]{order:1!important;position:static!important;inset:auto!important;transform:none!important;align-self:flex-start!important;margin:0!important;width:100%}
 [data-shell-area=main] [data-testid="action-buttons-container"]>div{display:flex!important;flex-wrap:wrap;gap:12px!important;margin-top:0!important}
}