/* Loxley Desk — product layout (fluid grid). Loads AFTER shell.css.
   Desktop ≥1100: viewport fill, no transform scale. Mobile ≤767: tabbed IA. */

:root {
  --col-left: 240px;
  --col-right: 340px;
  --chrome-h: 60px;
  --strip-h: 40px;
  --fs-body: 14px;
  --fs-label: 11px;
  --fs-title: 16px;
  --fs-hero: 32px;
  --gap: 12px;
  --desk-sans: "DM Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --desk-mono: "JetBrains Mono", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (min-width: 1600px) {
  :root {
    --col-left: 260px;
    --col-right: 360px;
    --fs-hero: 40px;
    --fs-title: 18px;
  }
}
@media (min-width: 1100px) and (max-width: 1365px) {
  :root {
    --col-left: 200px;
    --col-right: 300px;
    --fs-hero: 28px;
  }
}
@media (min-width: 1366px) and (max-width: 1599px) {
  :root {
    --col-left: 220px;
    --col-right: 340px;
    --fs-hero: 32px;
  }
}

/* ========== DESKTOP ≥1100: kill portrait canvas + scale ========== */
@media (min-width: 1100px) {
  :root { --sc: 1 !important; }

  html, body {
    height: 100%;
    width: 100%;
    max-width: none;
    overflow: hidden;
  }
  body {
    display: block !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    font-size: var(--fs-body);
  }

  .frame {
    position: relative !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  .desk {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  .desk > .aurora { display: none !important; }
  .desk > .desk-main {
    flex: 1 1 auto;
    min-height: 0;
  }
  .desk > .desk-bottom { flex: 0 0 auto; }
  .desk > #statusbar,
  .desk > .statusbar { flex: 0 0 auto; }
  .desk > .tape { flex: 0 0 26px; }
  .desk > #con { /* overlay */ }
  .desk > #fileIn { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }

  .desk-chrome,
  .desk .top.desk-chrome {
    display: flex;
    align-items: center;
    gap: 10px 12px;
    min-height: var(--chrome-h);
    max-height: none;
    padding: 8px 12px;
    flex-wrap: nowrap;
    overflow: hidden;
    z-index: 30;
  }
  .desk-chrome .searchwrap {
    flex: 1 1 auto;
    min-width: 180px;
    max-width: none;
  }
  .desk-chrome .netbar {
    flex: 0 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
  }
  .desk-chrome .walletbar {
    flex: 0 0 auto;
    max-width: none;
  }
  .desk-chrome .btn,
  .desk-chrome .go,
  .desk-chrome .lang-toggle {
    min-height: 32px;
  }

  .desk-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--strip-h);
    padding: 4px 12px;
    border-bottom: 1px solid var(--line, #2F3336);
    background: rgba(0, 0, 0, 0.85);
    overflow-x: auto;
    flex-wrap: nowrap;
    z-index: 28;
  }
  .desk-strip .tstat.aux { display: flex !important; }
  .desk-strip .lbl,
  .desk .lbl {
    font-size: var(--fs-label) !important;
  }

  /* Main 3-column product grid — right track stays fully on-screen at 1440/1600/1920 */
  .desk-main {
    display: grid !important;
    grid-template-columns: minmax(0, var(--col-left)) minmax(0, 1fr) minmax(var(--col-right), var(--col-right));
    gap: 10px 12px;
    min-height: 0;
    padding: 8px 12px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .col-left,
  .col-center,
  .col-right {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
  }
  .col-left,
  .col-right {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .col-right {
    min-width: var(--col-right);
    width: var(--col-right);
    max-width: var(--col-right);
    flex: 0 0 var(--col-right);
    box-sizing: border-box;
  }
  .col-center {
    min-width: 0;
    max-width: 100%;
  }
  .col-center #stageWrap,
  .col-center .stagewrap {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Neutralize old .body / .cols portrait packing */
  .desk-main .body,
  .desk-main > .body {
    display: contents;
  }
  .desk .cols {
    display: contents;
  }
  .desk .col {
    display: contents;
  }

  /* LEFT: Radar, Tape/feed, Risk */
  .col-left #cardRadar {
    flex: 1 1 auto;
    min-height: 180px;
  }
  .col-left #cardRadar #radar {
    width: 100%;
    height: 120px;
  }
  .col-left .card.hue-feed,
  .col-left #feed {
    min-height: 120px;
  }
  .col-left .card.hue-feed {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 100px;
  }
  .col-left #cardRisk {
    flex: 0 0 auto;
  }

  /* CENTER: Orb hero + council + chart */
  .col-center {
    overflow: hidden;
    min-height: 0;
  }
  .col-center #stageWrap,
  .col-center .stagewrap {
    flex: 1 1 0;
    min-height: 360px;
    height: auto;
  }
  .col-center .scorebig .n,
  .col-center #vN {
    font-size: var(--fs-hero) !important;
  }
  /* Glass status strip — keep copy, stop opaque black slab over cat hero */
  .col-center .verdict {
    margin-top: auto;
    padding: 7px 12px;
    gap: 10px 12px;
    align-items: center;
    flex-wrap: nowrap;
    background: rgba(16, 22, 30, 0.42) !important;
    background-image: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(12,16,22,0.36)) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-bottom: none !important;
    border-radius: 12px 12px 0 0;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.10),
      0 -10px 28px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(16px) saturate(1.25) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.25) !important;
    max-height: 84px;
    overflow: hidden;
  }
  .col-center .vbox {
    max-width: min(520px, 62%);
    min-width: 0;
    flex: 1 1 auto;
  }
  .col-center .vbox .k {
    font-size: 9px;
    letter-spacing: 0.14em;
  }
  .col-center .vbox h2 {
    font-size: clamp(13px, 1.05vw, 16px);
    margin-top: 2px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .col-center .vbox p {
    font-size: 11px;
    margin-top: 2px;
    line-height: 1.35;
    max-width: none;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .col-center .vkeys {
    flex: 0 0 auto;
    gap: 8px;
  }
  .col-center .vkey {
    padding: 5px 10px;
    min-width: 96px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .col-center .vkey .k {
    font-size: 8px;
  }
  .col-center .vkey .v {
    font-size: 14px;
  }
  .col-center .card.hue-cncl {
    flex: 0 0 auto;
    max-height: 150px;
    overflow: auto;
  }
  .col-center .roster {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px 8px;
  }
  .col-center .roster .ag {
    border-bottom: none;
    padding: 4px 6px;
    border: 1px solid var(--line, #2F3336);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.35);
  }
  .col-center .roster .ag .verd {
    font-size: 10px;
    max-width: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .col-center .roster .ag .nm {
    font-size: 11px;
  }
  .col-center .chartrow {
    flex: 0 1 auto;
    min-height: 120px;
    max-height: 200px;
    grid-template-columns: minmax(0, 1fr) minmax(160px, 220px);
  }
  .col-center #cardChart,
  .col-center .bigchart {
    min-height: 120px;
  }

  /* RIGHT: tokenDetail, tradePreview, supply */
  .col-right #tokenDetail.token-detail,
  .col-right #tokenDetail {
    display: grid !important;
    grid-template-columns: 1fr !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    flex: 0 0 auto;
    max-height: none;
    overflow: auto;
    position: static !important;
  }
  .col-right #tokenDetail[hidden] {
    display: grid !important;
    opacity: 0.92;
  }
  .col-right #tokenDetail .td-title {
    grid-column: 1 / -1;
  }
  .col-right #tokenDetail .td-meta {
    grid-column: 1 / -1;
  }

  .col-right #tradePreview.trade-preview,
  .col-right #tradePreview {
    margin: 0 !important;
    padding: 10px 12px !important;
    position: static !important;
    flex: 0 0 auto;
    overflow: auto;
    max-height: 46vh;
  }
  .col-right #tradePreview[hidden],
  .col-right #tradePreview[data-open="0"]:not(.is-open) {
    display: none !important;
  }
  .col-right #tradePreview.is-open,
  .col-right #tradePreview[data-open="1"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .col-right #cardSupply {
    flex: 1 1 auto;
    min-height: 140px;
  }
  .col-right .wallet-summary {
    flex: 0 0 auto;
    padding: 8px 10px;
    border: 1px solid var(--line, #2F3336);
    border-radius: 12px;
    background: var(--panel-elev, #0C0E12);
    font-family: var(--desk-mono);
    font-size: var(--fs-label);
    color: var(--dim, #8B98A5);
  }
  .col-right .wallet-summary b {
    color: var(--ink, #E7E9EA);
    font-weight: 700;
  }

  /* Bottom band */
  .desk-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1.2fr);
    gap: 8px 10px;
    padding: 0 12px 6px;
    min-height: 0;
    max-height: 140px;
    overflow: hidden;
    z-index: 2;
  }
  .desk-bottom #cardFlags,
  .desk-bottom #cardExit,
  .desk-bottom #alertBox {
    min-height: 0;
    overflow: auto;
    max-height: 160px;
  }
  .desk-bottom #statusbar,
  .desk > #statusbar {
    grid-column: 1 / -1;
  }

  /* Keep status + tape in desk flow */
  .desk > #statusbar.statusbar,
  .desk .statusbar {
    position: relative;
    z-index: 5;
  }
  .desk > .tape {
    flex: 0 0 auto;
  }

  /* Hide mobile tab bar on desktop */
  .desk-tabbar {
    display: none !important;
  }

  /* Typography bumps */
  .card .ch .t {
    font-size: var(--fs-label) !important;
  }
  .feed .frow .msg,
  .metric .k,
  .metric .v {
    font-size: var(--fs-body);
  }
  .metric .k { font-size: 13px; }
  .council-meta {
    font-size: var(--fs-label) !important;
  }

  /* Overlays stay above */
  #banner, #walletWrongNet, #con, #landing, #fx {
    z-index: 80;
  }
  #con { z-index: 90; }
}

@media (min-width: 1100px) and (min-height: 1000px) {
  .col-center #stageWrap,
  .col-center .stagewrap {
    min-height: 480px;
  }
}
@media (min-width: 1100px) and (max-height: 820px) {
  .col-center #stageWrap,
  .col-center .stagewrap {
    min-height: 260px;
  }
  .desk-bottom {
    max-height: 110px;
  }
  .col-center .chartrow {
    max-height: 150px;
    min-height: 120px;
  }
  .desk-strip .tstat.aux {
    display: none !important;
  }
}


/* Desktop/tablet ≥768: glass verdict strip (mobile ≤767 keeps stacked orb verdict) */
@media (min-width: 768px) and (max-width: 1099px) {
  .col-center .verdict {
    padding: 7px 12px;
    gap: 10px;
    align-items: center;
    background: rgba(16, 22, 30, 0.42) !important;
    background-image: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(12,16,22,0.36)) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-bottom: none !important;
    border-radius: 12px 12px 0 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(16px) saturate(1.25) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.25) !important;
    max-height: 90px;
    overflow: hidden;
  }
  .col-center .vbox h2 {
    font-size: 14px;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .col-center .vbox p {
    font-size: 11px;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .col-center .vkey {
    padding: 5px 10px;
    min-width: 96px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.10);
  }
}

/* ========== TABLET 768–1099 ========== */
@media (min-width: 768px) and (max-width: 1099px) {
  :root { --sc: 1 !important; }

  html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  body {
    display: block !important;
    font-size: 14px;
  }
  .frame, .desk {
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
  }
  .desk {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  .desk > .desk-main { flex: 1 1 auto; min-height: 0; }
  .desk-main {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 8px 10px;
    min-height: 0;
    overflow: auto;
  }
  .col-left { order: 2; overflow: auto; min-height: 0; }
  .col-center { order: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
  .col-right {
    order: 3;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-height: 280px;
    overflow: auto;
  }
  .col-center #stageWrap { min-height: 320px; flex: 1; }
  .desk .body, .desk .cols, .desk .col { display: contents; }
  .desk-tabbar { display: none !important; }
  .desk-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 10px 6px;
    max-height: 140px;
    overflow: auto;
  }
  .col-right #tokenDetail,
  .col-right #tokenDetail[hidden] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    margin: 0 !important;
  }
  .col-right #tradePreview.is-open,
  .col-right #tradePreview[data-open="1"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    margin: 0 !important;
  }
}

/* ========== MOBILE ≤767: separate tabbed IA (NOT scaled desktop) ========== */
@media (max-width: 767px) {
  :root { --sc: 1 !important; }

  html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  body {
    display: block !important;
    font-size: 15px;
    align-items: stretch !important;
    justify-content: stretch !important;
  }
  .frame, .desk {
    width: 100% !important;
    height: 100% !important;
    height: 100dvh !important;
    transform: none !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    overflow: hidden !important;
  }
  /* Fixed bottom stack: status above tabbar, both clear content.
     padding-bottom = status + gap + tabbar + safe-area-inset-bottom */
  :root {
    --lox-tabbar-h: 58px; /* tabbar chrome excl. safe-area (buttons+pad+border) */
    --lox-status-h: 28px;
    --lox-bottom-gap: 8px;
    --lox-safe-b: env(safe-area-inset-bottom, 0px);
    --lox-bottom-stack: calc(var(--lox-status-h) + var(--lox-bottom-gap) + var(--lox-tabbar-h) + var(--lox-safe-b));
  }
  .desk {
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    padding-bottom: var(--lox-bottom-stack);
  }
  .desk > .desk-main { flex: 1 1 auto; min-height: 0; }

  .desk-chrome,
  .desk .top.desk-chrome {
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 8px;
  }
  .desk-chrome .btn,
  .desk-chrome .lang-toggle,
  .desk-chrome .walletbar .btn {
    min-height: 34px !important;
    padding: 6px 10px !important;
    font-size: 10px;
  }
  .desk-chrome .search {
    padding: 4px 4px 4px 12px;
  }
  .desk-chrome .search .go {
    min-height: 34px !important;
    padding: 8px 16px !important;
    font-size: 12px;
  }
  .desk-chrome .netbar .netbtn,
  .desk-chrome .padrow .padchip {
    min-height: 32px !important;
    min-width: 0 !important;
    padding: 5px 8px !important;
    font-size: 10px;
  }
  .desk-chrome .logo .sub { display: none; }
  .desk-chrome .netbar {
    width: 100%;
    overflow-x: auto;
    order: 3;
  }
  .desk-chrome .searchwrap {
    width: 100%;
    max-width: none;
    order: 4;
    min-width: 0;
  }
  .desk-chrome .walletbar { order: 2; margin-left: auto; }
  /* iPhone safe-area on the root chrome */
  html {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  .desk-strip {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto;
    align-items: center;
    gap: 4px 8px;
    padding: 6px 10px;
    overflow-x: hidden;
    overflow-y: visible;
    flex-wrap: unset;
    min-height: 0;
  }
  .desk-strip #sndBtn {
    grid-column: 1 / 4;
    justify-self: start;
  }
  .desk-strip #conBtn {
    grid-column: 4;
    justify-self: end;
  }
  .desk-strip .tstat.aux { display: none !important; }
  .desk-strip .tstat {
    min-width: 0 !important;
    overflow: hidden;
    gap: 0;
  }
  /* spark canvas hidden on narrow — kill reserved padding that caused PRICE/MCAP crush */
  .desk-strip .tstat.px {
    padding-right: 0 !important;
  }
  .desk-strip .tstat .lbl {
    font-size: 9px !important;
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .desk-strip .tstat .v {
    font-size: 12px !important;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .desk-strip #sndBtn {
    font-size: 9px;
    letter-spacing: 0.04em;
    padding: 6px 8px;
    min-height: 34px !important;
    min-width: 0;
    white-space: nowrap;
  }
  .desk-strip #conBtn {
    min-width: 36px;
    min-height: 36px;
    padding: 6px 8px;
  }

  .desk-main {
    display: block !important;
    min-height: 0;
    overflow: hidden;
    padding: 0 8px;
    position: relative;
    padding-bottom: 8px;
  }
  .desk .body, .desk .cols, .desk .col { display: contents; }

  .col-left,
  .col-center,
  .col-right,
  .desk-bottom {
    display: none;
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    flex-direction: column;
    gap: 10px;
    /* desk padding clears fixed status+nav; keep small inner pad only */
    padding-bottom: 12px;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Tab panes via body[data-mobile-tab] */
  body[data-mobile-tab="orb"] .col-center,
  body:not([data-mobile-tab]) .col-center {
    display: flex !important;
  }
  body[data-mobile-tab="radar"] .col-left {
    display: flex !important;
  }
  body[data-mobile-tab="token"] .col-right {
    display: flex !important;
  }
  body[data-mobile-tab="token"] .col-right > *:not(#tokenDetail):not(.wallet-summary) {
    display: none !important;
  }
  body[data-mobile-tab="token"] .col-right #tokenDetail,
  body[data-mobile-tab="token"] .col-right #tokenDetail[hidden] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    margin: 0 !important;
    flex: 1;
  }
  body[data-mobile-tab="trade"] .col-right {
    display: flex !important;
  }
  body[data-mobile-tab="trade"] .col-right > *:not(#tradePreview) {
    display: none !important;
  }
  body[data-mobile-tab="trade"] .col-right #tradePreview,
  body[data-mobile-tab="trade"] .col-right #tradePreview[hidden],
  body[data-mobile-tab="trade"] .col-right #tradePreview[data-open="0"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    margin: 0 !important;
    max-height: none;
    flex: 1;
  }
  body[data-mobile-tab="more"] .desk-bottom {
    display: flex !important;
    flex-direction: column;
    max-height: none;
    height: auto !important;
    overflow: visible;
    padding: 0 8px 12px;
    flex: 0 0 auto;
  }
  body[data-mobile-tab="more"] .col-center .chartrow,
  body[data-mobile-tab="more"] .col-right #cardSupply,
  body[data-mobile-tab="more"] .col-right #cardSupply {
    display: flex;
    flex-direction: column;
    height: auto !important;
    min-height: 0;
  }
  /* More tab also shows chart/supply/paper from other cols */
  /* MORE: scroll the whole desk column so chart + flags + exit share one flow */
  body[data-mobile-tab="more"] .desk {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  body[data-mobile-tab="more"] .desk-main {
    display: flex !important;
    flex-direction: column;
    overflow: visible !important;
    height: auto !important;
    flex: 0 0 auto !important;
    min-height: 0;
  }
  body[data-mobile-tab="more"] .col-center {
    display: flex !important;
    height: auto !important;
    overflow: visible;
    flex: 0 0 auto;
  }
  body[data-mobile-tab="more"] .col-center #stageWrap,
  body[data-mobile-tab="more"] .col-center .card.hue-cncl {
    display: none !important;
  }
  body[data-mobile-tab="more"] .col-right {
    display: flex !important;
    height: auto !important;
    overflow: visible;
    flex: 0 0 auto;
  }
  body[data-mobile-tab="more"] .col-right #tokenDetail,
  body[data-mobile-tab="more"] .col-right #tradePreview,
  body[data-mobile-tab="more"] .col-right .wallet-summary {
    display: none !important;
  }
  /* kill chart blank + sidestack-on-chart overlap */
  body[data-mobile-tab="more"] .chartrow {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 10px;
    overflow: visible;
  }
  body[data-mobile-tab="more"] #cardChart,
  body[data-mobile-tab="more"] .bigchart {
    min-height: 0 !important;
    height: auto !important;
    flex: 0 0 auto !important;
    position: relative;
    z-index: 0;
    overflow: hidden;
  }
  body[data-mobile-tab="more"] .bigchart .chhead {
    gap: 6px 10px;
  }
  body[data-mobile-tab="more"] #candles {
    flex: 0 0 auto !important;
    height: 150px !important;
    min-height: 130px !important;
    max-height: 170px;
    position: relative;
  }
  body[data-mobile-tab="more"] .sidestack {
    display: flex !important;
    flex-direction: column !important;
    position: relative;
    z-index: 1;
    min-height: 0 !important;
    height: auto !important;
    flex: 0 0 auto !important;
    width: 100%;
    max-width: 100%;
  }
  body[data-mobile-tab="more"] .sidestack .card {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
  }
  body[data-mobile-tab="more"] .sidestack .ch,
  body[data-mobile-tab="more"] .bigchart .chhead {
    flex-wrap: wrap;
    max-width: 100%;
  }
  body[data-mobile-tab="more"] .sidestack .ch .lbl,
  body[data-mobile-tab="more"] .sidestack .ch .t {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  body[data-mobile-tab="more"] .desk > .desk-bottom {
    /* desk-bottom is a sibling of desk-main — keep in flow, no 100% height */
    max-height: none;
  }

  /* ---- ORB: densify overlays so text/values don't cover each other ---- */
  .col-center #stageWrap,
  .col-center .stagewrap {
    min-height: 280px !important;
    max-height: min(58vh, 460px);
    flex: 0 1 auto;
  }
  .col-center .stagewrap {
    display: flex;
    flex-direction: column;
  }
  .col-center .stage-top {
    order: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px 6px;
  }
  .col-center .leftstack { order: 2; }
  .col-center .xray { order: 3; }
  .col-center .verdict { order: 4; }
  .col-center .tokhead .sym {
    font-size: 26px !important;
  }
  .col-center .tokhead .nm { font-size: 12px; }
  .col-center .tokhead .ca {
    font-size: 9px;
    word-break: break-all;
    white-space: normal;
  }
  .col-center .scorebig {
    align-items: flex-start;
    text-align: left;
  }
  .col-center .scorebig .n,
  .col-center #vN {
    font-size: 36px !important;
  }
  .col-center .vstamp {
    font-size: 13px;
    padding: 5px 12px;
  }
  /* HUD + compute were absolute and collided with score/verdict */
  .col-center .leftstack {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    max-width: 100%;
    pointer-events: none;
    padding: 0 10px 6px;
    gap: 6px;
  }
  .col-center .leftstack .hud {
    width: 100%;
    max-width: 100%;
  }
  .col-center .compute {
    width: 100% !important;
    max-width: 100%;
  }
  .col-center .compute .cl {
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .col-center .xray {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    max-width: 100%;
    align-items: flex-start;
    padding: 0 10px 6px;
  }
  .col-center .xray .xrow {
    white-space: normal;
    max-width: 100%;
  }
  .col-center .verdict {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 12px 12px;
    gap: 10px;
  }
  .col-center .vbox {
    max-width: 100% !important;
  }
  .col-center .vbox h2 {
    font-size: 16px !important;
    margin-top: 4px;
  }
  .col-center .vbox p {
    font-size: 12px;
    max-width: none;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .col-center .vkeys {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .col-center .vkey {
    min-width: 0;
    padding: 8px 10px;
  }

  /* ---- RADAR: fixed sweep height, list fills phone ---- */
  body[data-mobile-tab="radar"] .col-left {
    gap: 8px;
  }
  body[data-mobile-tab="radar"] #cardRadar {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
  }
  body[data-mobile-tab="radar"] #radar {
    flex: 0 0 auto !important;
    height: 110px !important;
    min-height: 110px !important;
    max-height: 120px !important;
    width: 100%;
  }
  body[data-mobile-tab="radar"] #rlist {
    flex: 1 1 auto;
    min-height: 80px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  body[data-mobile-tab="radar"] .col-left .card.hue-feed {
    flex: 0 0 auto !important;
    max-height: 18vh;
    min-height: 64px;
  }
  body[data-mobile-tab="radar"] #rlist {
    min-height: 120px;
  }
  body[data-mobile-tab="radar"] .col-left #cardRisk {
    flex: 0 0 auto;
  }
  body[data-mobile-tab="radar"] .rrow {
    font-size: 11px;
    padding: 5px 0;
    grid-template-columns: 36px minmax(0, 1fr) 48px 44px;
  }

  /* ---- TRADE: stop clipped/stacked field labels ---- */
  body[data-mobile-tab="trade"] .col-right #tradePreview {
    overflow: auto;
    overflow-x: hidden;
    max-height: none !important;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    margin: 0 !important;
    align-content: start;
  }
  body[data-mobile-tab="trade"] .trade-preview .tp-head {
    gap: 8px;
  }
  body[data-mobile-tab="trade"] .trade-preview .tp-form label {
    display: flex;
    flex-flow: row wrap;
    align-items: baseline;
    gap: 2px 6px;
    letter-spacing: 0.04em;
    line-height: 1.35;
  }
  body[data-mobile-tab="trade"] .trade-preview .tp-form label > input,
  body[data-mobile-tab="trade"] .trade-preview .tp-form label > select {
    flex: 1 1 100%;
    width: 100%;
    margin-top: 4px;
    box-sizing: border-box;
  }
  body[data-mobile-tab="trade"] .trade-preview dl {
    grid-template-columns: max-content minmax(0, 1fr);
  }
  body[data-mobile-tab="trade"] .trade-preview dd {
    overflow-wrap: anywhere;
  }

  /* ---- TOKEN: keep readable; only ensure no nav cover / overflow ---- */
  body[data-mobile-tab="token"] .col-right #tokenDetail {
    overflow: auto;
    overflow-x: hidden;
    max-height: none !important;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }

  .col-center .roster {
    display: flex !important;
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
  }
  .col-center .roster .ag {
    flex: 0 0 auto;
    min-width: 120px;
    border: 1px solid var(--line, #2F3336);
    border-radius: 10px;
    padding: 8px;
  }

  /* Compact chrome; prevent net/pad horizontal blowout */
  .desk-chrome .netbar {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .desk-chrome .padrow {
    flex-wrap: wrap;
    max-width: 100%;
  }
  .desk-chrome .walletbar {
    max-width: 100%;
    flex-wrap: wrap;
  }

  /* status fixed ABOVE tabbar with clear gap; never overlap nav or content */
  .desk > .statusbar,
  .desk > #statusbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--lox-tabbar-h) + var(--lox-safe-b) + var(--lox-bottom-gap));
    z-index: 49;
    flex: 0 0 auto;
    height: var(--lox-status-h);
    min-height: var(--lox-status-h);
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    padding-left: calc(10px + env(safe-area-inset-left, 0px));
    padding-right: calc(10px + env(safe-area-inset-right, 0px));
    max-width: 100%;
    background: #000;
    border-top: 1px solid var(--line, #2F3336);
  }
  .desk > .tape {
    display: none !important; /* avoid ticker colliding with fixed tabbar */
  }

  .desk-tabbar {
    display: flex !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    height: calc(var(--lox-tabbar-h) + var(--lox-safe-b));
    min-height: calc(var(--lox-tabbar-h) + var(--lox-safe-b));
    gap: 2px;
    padding: 6px 6px calc(6px + var(--lox-safe-b));
    padding-left: calc(6px + env(safe-area-inset-left, 0px));
    padding-right: calc(6px + env(safe-area-inset-right, 0px));
    background: rgba(0, 0, 0, 0.96);
    border-top: 1px solid var(--line, #2F3336);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-sizing: border-box;
  }
  .desk-tabbar button {
    flex: 1 1 0;
    min-height: 44px;
    min-width: 44px;
    border: 1px solid var(--line, #2F3336);
    border-radius: 10px;
    background: #0A0D12;
    color: var(--dim, #8B98A5);
    font-family: var(--desk-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 8px 4px;
  }
  .desk-tabbar button[aria-selected="true"],
  .desk-tabbar button.is-active {
    color: #CCFF00;
    border-color: rgba(204, 255, 0, 0.45);
    box-shadow: inset 0 0 0 1px rgba(204, 255, 0, 0.25);
  }

  .desk-bottom #statusbar { order: 99; }

  /* Touch targets */
  .desk-chrome .btn,
  .desk-chrome .go,
  .walletbar .btn,
  .netbar .netbtn,
  .padrow .padchip {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Fallback: if wrappers missing, still kill scale on wide screens */
@media (min-width: 1100px) {
  .desk:not(:has(.desk-main)) .body {
    /* legacy fallback unused once wrappers present */
  }
}

/* strip should not inherit .topstats margin-left:auto from inline CSS */
.desk-strip.topstats {
  margin-left: 0 !important;
  flex: 0 0 auto !important;
  width: 100%;
}
.desk-chrome .walletbar {
  margin-left: 0;
}
/* kill legacy height-based --sc ladder when fluid layout active */
@media (min-width: 768px) {
  :root { --sc: 1 !important; }
}
@media (max-width: 767px) {
  :root { --sc: 1 !important; }
}
/* readable labels globally under fluid layout */
@media (min-width: 768px) {
  .lbl { font-size: var(--fs-label, 11px) !important; }
  .card .ch .t { font-size: 11px !important; letter-spacing: .14em; }
  .tokhead .sym { font-size: clamp(28px, 3vw, 44px); }
}


/* ---- zh-CN typography (no layout redesign) ---- */
:root {
  --desk-sans: "DM Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --desk-mono: "JetBrains Mono", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", ui-monospace, monospace;
}
body, .desk, .shell, .landing, button, input, select, textarea {
  font-family: var(--desk-sans);
}
.mono, .v, .tstat .v, code, .con, .feed, .roster, .metric .v, .tag, .vstamp, .chart-lbl, .sb {
  font-family: var(--desk-mono);
}
html[lang="zh-CN"] .ch .t,
html[lang="zh-CN"] .panel-title,
html[lang="zh-CN"] .k,
html[lang="zh-CN"] .lbl {
  letter-spacing: 0.02em;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
html[lang="zh-CN"] .btn,
html[lang="zh-CN"] .go,
html[lang="zh-CN"] .lang-toggle {
  min-width: 4.5em;
}
html[lang="zh-CN"] .vstamp {
  letter-spacing: 0.06em;
  font-size: 0.92em;
}


/* ========== NARRATIVE PANEL (additive) ========== */
.hue-narr { --hue: #C084FC; }
#narrativeCard.card {
  flex: 0 0 auto;
}
.narrative-panel {
  font-family: var(--desk-mono, ui-monospace, Menlo, monospace);
  font-size: 11px;
  color: var(--dim, #8B98A5);
  max-height: 220px;
  overflow: auto;
  padding: 4px 2px 6px;
}
.narrative-panel .narr-empty {
  opacity: 0.7;
  padding: 8px 4px;
  line-height: 1.4;
}
.narrative-panel[data-state="loading"] .narr-empty {
  color: var(--accent, #CCFF00);
  opacity: 0.9;
}
.narr-hero {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.narr-score {
  flex: 0 0 auto;
  min-width: 72px;
  text-align: center;
  padding: 8px 6px;
  border: 1px solid var(--line, #2F3336);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
}
.narr-score-n {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--txt, #E7E9EA);
  line-height: 1.1;
}
.narr-score.high .narr-score-n { color: var(--good, #00C805); }
.narr-score.mid .narr-score-n { color: var(--warn, #F5A623); }
.narr-score.low .narr-score-n { color: var(--bad, #FF5000); }
.narr-score-k {
  display: block;
  margin-top: 4px;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
}
.narr-hero-meta { flex: 1 1 auto; min-width: 0; }
.narr-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 8px;
  margin: 6px 0 8px;
}
.narr-metric {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px solid rgba(47, 51, 54, 0.55);
}
.narr-k {
  color: var(--faint, #71767B);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 9px;
}
.narr-v {
  color: var(--txt, #E7E9EA);
  font-weight: 600;
  text-align: right;
}
.narr-summary {
  margin: 4px 0 8px;
}
.narr-summary p {
  margin: 4px 0 0;
  color: var(--txt, #E7E9EA);
  line-height: 1.45;
  font-size: 12px;
}
.narr-block { margin-top: 8px; }
.narr-block-h {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint, #71767B);
  margin-bottom: 4px;
}
.narr-list, .narr-evidence {
  list-style: none;
  margin: 0;
  padding: 0;
}
.narr-list li, .narr-evidence li {
  padding: 4px 0;
  border-bottom: 1px solid rgba(47, 51, 54, 0.4);
  line-height: 1.35;
}
.narr-li-text { color: var(--txt, #E7E9EA); }
.narr-cite {
  display: block;
  margin-top: 2px;
  font-size: 9px;
  opacity: 0.65;
}
.narr-src {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid rgba(192, 132, 252, 0.35);
  color: #C084FC;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.narr-claim { color: var(--txt, #E7E9EA); }
.narr-insufficient {
  padding: 6px 4px 8px;
  border: 1px dashed rgba(245, 166, 35, 0.45);
  border-radius: 10px;
  background: rgba(245, 166, 35, 0.06);
  margin-bottom: 8px;
}
.narr-insuf-title {
  color: var(--warn, #F5A623);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10px;
}
.narr-insuf-sum {
  margin: 4px 0 8px;
  color: var(--txt, #E7E9EA);
}
.narr-empty-line { opacity: 0.55; padding: 2px 0; }

@media (min-width: 1100px) {
  .col-center #narrativeCard.card {
    flex: 0 0 auto;
    max-height: 240px;
    overflow: hidden;
  }
  .col-center #narrativeCard .narrative-panel {
    max-height: 190px;
  }
}

@media (max-width: 767px) {
  body[data-mobile-tab="more"] .col-center #narrativeCard {
    display: none !important;
  }
  .narrative-panel { max-height: 280px; }
  .narr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ========== MOBILE POLISH ≤430: tighter strip / orb on iPhone width ========== */
@media (max-width: 430px) {
  .desk-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px 6px;
    padding: 5px 8px;
  }
  .desk-strip .tstat .v { font-size: 11px !important; }
  .desk-strip #sndBtn {
    font-size: 8px;
    padding: 5px 6px;
    min-height: 34px;
  }
  .col-center #stageWrap,
  .col-center .stagewrap {
    min-height: 260px !important;
    max-height: min(54vh, 420px);
  }
  .col-center .scorebig .n,
  .col-center #vN { font-size: 32px !important; }
  .col-center .tokhead .sym { font-size: 22px !important; }
}








/* mobile only: carousel under #aiAnalysisCore; token+nodes first */
@media (max-width: 767px) {
  .col-center .stagewrap,
  .col-center #stageWrap {
    display: flex !important;
    flex-direction: column !important;
  }
  .col-center #aiAnalysisCore {
    display: flex !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    order: 2;
    z-index: 2;
    width: 100% !important;
    height: 240px !important;
    margin: 4px auto 0 !important;
  }
  .col-center #aiAnalysisCore[hidden] { display: none !important; }
  .col-center #stageRightPane.scorebig,
  .col-center .scorebig#stageRightPane {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    order: 3;
    z-index: 1;
    width: auto !important;
    max-width: 100% !important;
    margin: 8px 10px 6px !important;
  }
  .col-center .stage-top { order: 1; }
}