:root {
      --bg: #ffffff;
      --bg-subtle: #f5f7fa;
      --card: #ffffff;
      --line: #eef1f5;
      --line-strong: #dfe3e8;
      --text: #0f172a;
      --muted: #8a93a3;
      --text-secondary: #334155;
      --surface-raised: #ffffff;
      --surface-soft: #f8fafc;
      --surface-input: #ffffff;
      --overlay: rgba(15, 23, 42, 0.36);
      --brand: #1e6fff;
      --brand-soft: #eaf1ff;
      --tone-red: #f5384e;
      --tone-green: #16b87a;
      --up: var(--tone-red);
      --down: var(--tone-green);
      /* 价格轴保留原有图表色与透明度，不统一为列表色。 */
      --price-up-rgb: 220, 38, 38;
      --price-down-rgb: 22, 163, 74;
      --sig-form: #16b87a;
      --sig-form-bg: #e6f7f0;
      --sig-warn: #f5a623;
      --sig-warn-bg: #fdf3e1;
      --sig-gone: #9aa3b0;
      --sig-gone-bg: #f0f2f5;
      --pos-0: #9aa3b0;
      --pos-4: #1e6fff;
      --pos-6: #16b87a;
      --pos-10: #f5384e;
      --ema21: #8ab8ff;
      --ema55: #f8c779;
      --ema120: #c4b5fd;
      --hilo-exit: #c8862a;
      --hilo-target: #3d7fd6;
      --gold: #b7791f;
      --gold-bg: #fff7ed;
      --radius-card: 16px;
      --radius-pill: 999px;
      --radius-btn: 12px;
      --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.05);
      --danger: #f5384e;
      --ok: #16b87a;
      --safe-top-cover: env(safe-area-inset-top);
    }

    :root[data-theme="dark"] {
      color-scheme: dark;
      --bg: #111827;
      --bg-subtle: #182233;
      --card: #1b2637;
      --line: #2e3b4e;
      --line-strong: #43536a;
      --text: #f1f5f9;
      --muted: #aab7c8;
      --text-secondary: #d6dfeb;
      --surface-raised: #1b2637;
      --surface-soft: #202d40;
      --surface-input: #111b2b;
      --overlay: rgba(2, 6, 23, 0.72);
      --brand: #76a7ff;
      --brand-soft: #1d355d;
      --tone-red: #fb7185;
      --tone-green: #4adea4;
      --danger: #fb7185;
      --ok: #4adea4;
      --sig-form: #4adea4;
      --sig-form-bg: #123a32;
      --sig-warn: #fbbf24;
      --sig-warn-bg: #493515;
      --sig-gone: #b2bdcb;
      --sig-gone-bg: #354154;
      --pos-0: #b2bdcb;
      --pos-4: #76a7ff;
      --pos-6: #4adea4;
      --pos-10: #fb7185;
      --ema21: #93c5fd;
      --ema55: #fcd34d;
      --ema120: #c4b5fd;
      --hilo-exit: #e8b164;
      --hilo-target: #8ab6f0;
      --gold: #f6c768;
      --gold-bg: #453415;
      --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.26), 0 8px 22px rgba(0, 0, 0, 0.22);
    }

    :root[data-price-colors="green_up"] {
      --up: var(--tone-green);
      --down: var(--tone-red);
      --price-up-rgb: 22, 163, 74;
      --price-down-rgb: 220, 38, 38;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      min-height: 100%;
      background: var(--bg);
      color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", sans-serif;
      -webkit-text-size-adjust: 100%;
      font-variant-numeric: tabular-nums;
    }

    body {
      overflow-x: hidden;
    }

    body.app-landscape-blocked {
      overflow: hidden;
      overscroll-behavior: none;
    }

    .app-orientation-gate {
      position: fixed;
      inset: 0;
      z-index: 210;
      display: none;
      place-items: center;
      gap: 12px;
      padding: max(16px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
      background: var(--bg);
      color: var(--text);
      text-align: center;
    }

    body.app-landscape-blocked .app-orientation-gate {
      display: grid;
    }

    .app-orientation-gate .orientation-phone {
      width: 54px;
      height: 54px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--bg-subtle);
      color: var(--brand);
      font-size: 32px;
      font-weight: 900;
      animation: rotateHintPulse 1.8s ease-in-out infinite;
    }

    .app-orientation-gate .orientation-title {
      font-size: 16px;
      font-weight: 900;
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
    }

    button {
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .market-tabs,
    .market-toolbar,
    .coin-table-head,
    .coin-row,
    .coin-row *,
    .op-sticky-filters,
    .op-card,
    .op-card *,
    .op-lock-summary,
    .op-lock-summary *,
    .watch-card,
    .watch-card * {
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
    }

    .app-shell {
      min-height: 100vh;
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      max-width: 430px;
      margin: 0 auto;
      padding-top: calc(max(14px, env(safe-area-inset-top)) + var(--pull-refresh-offset, 0px));
      padding-left: max(12px, env(safe-area-inset-left));
      padding-right: max(12px, env(safe-area-inset-right));
      padding-bottom: calc(84px + env(safe-area-inset-bottom));
      background: var(--bg);
      transition: padding-top 0.18s ease;
      touch-action: manipulation;
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
    }

    .app-shell input,
    .app-shell textarea,
    .app-shell select,
    .app-shell [contenteditable="true"] {
      -webkit-user-select: text;
      user-select: text;
      -webkit-touch-callout: default;
    }

    body.pull-refresh-tracking .app-shell {
      transition: none;
    }

    body.pull-refresh-loading .app-shell {
      transition: padding-top 0.18s ease;
    }

    .pull-refresh-indicator {
      position: fixed;
      z-index: 1100;
      top: calc(max(10px, env(safe-area-inset-top)) + 6px);
      left: 50%;
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: var(--card);
      border: 1px solid rgba(148, 163, 184, 0.18);
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
      opacity: var(--pull-refresh-opacity, 0);
      transform: translate(-50%, calc(-44px + var(--pull-refresh-offset, 0px) * 0.68)) scale(var(--pull-refresh-scale, 0.82));
      pointer-events: none;
      transition: opacity 0.16s ease, transform 0.18s ease;
    }

    body.pull-refresh-tracking .pull-refresh-indicator {
      transition: none;
    }

    .pull-refresh-indicator span {
      width: 16px;
      height: 16px;
      border-radius: 999px;
      border: 2px solid rgba(14, 165, 233, 0.22);
      border-top-color: var(--brand);
      transform: rotate(calc(var(--pull-refresh-progress, 0) * 240deg));
    }

    body.pull-refresh-ready .pull-refresh-indicator span,
    body.pull-refresh-loading .pull-refresh-indicator span {
      animation: refresh-spin 0.82s linear infinite;
    }

    .topbar {
      display: none;
      flex: 0 0 auto;
      padding: 6px 2px 12px;
      align-items: flex-end;
      justify-content: space-between;
      gap: 12px;
    }



    body[data-active-screen="markets"] .topbar {
      display: none;
    }

    body[data-active-screen="me"] .topbar {
      display: none;
    }

    .topbar h1 {
      margin: 0 0 4px;
      font-size: 26px;
      line-height: 1.15;
      letter-spacing: 0;
    }

    .sub {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.4;
    }

    .status-pill {
      min-height: 36px;
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
      padding: 0 11px;
      border-radius: var(--radius-pill);
      border: 1px solid var(--line);
      background: var(--card);
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .freshness-banner {
      margin: 0 0 10px;
      border: 1px solid var(--sig-warn-bg);
      border-radius: 10px;
      background: var(--sig-warn-bg);
      color: var(--sig-warn);
      padding: 8px 10px;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.35;
    }

    .screen {
      display: none;
      flex: 1 1 auto;
      min-width: 0;
    }

    .screen.active {
      display: block;
    }

    .card {
      margin-bottom: 10px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius-card);
      background: var(--card);
      box-shadow: var(--shadow-card);
    }

    .placeholder {
      min-height: 180px;
      display: grid;
      place-items: center;
      text-align: center;
      color: var(--muted);
      line-height: 1.7;
    }

    .market-grid > .placeholder {
      grid-column: 1 / -1;
      min-height: 360px;
    }

    .vstate {
      padding: 8px 0;
    }

    .skrow {
      height: 62px;
      margin-bottom: 9px;
      border-radius: 13px;
      background: linear-gradient(100deg, #eef1f5 30%, #f8fafc 50%, #eef1f5 70%);
      background-size: 200% 100%;
      animation: sk 1.2s linear infinite;
    }

    @keyframes sk {
      from { background-position: 200% 0; }
      to { background-position: -200% 0; }
    }

    .vmsg {
      min-height: 150px;
      display: grid;
      place-items: center;
      align-content: center;
      gap: 8px;
      padding: 38px 18px;
      text-align: center;
      color: var(--muted);
    }

    .vmsg .vic {
      font-size: 30px;
      font-weight: 900;
    }

    .vmsg .vt {
      color: var(--text);
      font-size: 15px;
      font-weight: 900;
    }

    .vmsg .vd {
      max-width: 250px;
      font-size: 12.5px;
      line-height: 1.5;
    }

    .section-title {
      margin: 0 0 10px;
      font-size: 15px;
      font-weight: 900;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 24px;
      padding: 0 10px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
      white-space: nowrap;
    }

    .pill.green,
    .pill.form {
      background: var(--sig-form-bg);
      color: var(--sig-form);
    }

    .pill.warn {
      background: var(--sig-warn-bg);
      color: var(--sig-warn);
    }

    .pill.gone,
    .pill.gray {
      background: var(--sig-gone-bg);
      color: var(--sig-gone);
    }

    .pill.pos,
    .pill.outline {
      border: 1px solid currentColor;
      background: var(--card);
      color: var(--brand);
    }

    .seg,
    .strategy-toggle {
      display: flex;
      gap: 0;
      overflow-x: auto;
      padding: 3px;
      border-radius: 11px;
      background: var(--bg-subtle);
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .seg::-webkit-scrollbar,
    .strategy-toggle::-webkit-scrollbar {
      display: none;
    }

    .market-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
    }

    .refresh-actions,
    .op-grade-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      min-width: 0;
    }

    .op-refresh-status {
      display: none;
    }

    .op-grade-actions .grade-strip {
      flex: 1 1 auto;
      min-width: 0;
      padding-bottom: 0;
    }

    .row .row-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .row.has-unread .row-unread-dot {
      display: inline-block;
    }

    .refresh-icon-btn {
      flex: 0 0 auto;
      font-size: 17px;
      line-height: 1;
      color: var(--brand);
      background: var(--brand-soft);
      border-color: rgba(14, 165, 233, 0.22);
    }

    .refresh-icon-btn:disabled {
      opacity: 0.55;
    }

    .refresh-icon-btn.loading {
      animation: refresh-spin 0.9s linear infinite;
    }

    @keyframes refresh-spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .monitor-mode-card,
    .op-filter-block,
    .monitor-period-panel {
      margin-bottom: 12px;
      background: transparent;
      border: 0;
      box-shadow: none;
      padding: 0;
    }

    .monitor-mode-card {
      padding-top: 14px;
    }

    .dashboard-sticky-nav {
      position: sticky;
      top: 0;
      z-index: 42;
      margin: calc(-1 * env(safe-area-inset-top)) 0 4px;
      padding: max(10px, env(safe-area-inset-top)) 0 6px;
      background: var(--card);
      backdrop-filter: blur(12px);
    }

    .dashboard-market-seg {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin-bottom: 8px;
      padding: 4px;
      border-radius: 13px;
      background: var(--bg-subtle);
    }

    /* 看板 / 订阅 市场切换复用行情页 .market-tab 底部下划线风格，三页顶部保持一致。 */
    .dashboard-market-tabs {
      margin: 0 0 10px;
      padding: 0 0 2px;
      gap: 2px;
      border-bottom: 1px solid var(--line);
    }

    /* 订阅市场条只有市场 tab（无子页 tab），收紧其与「我的订阅」卡片间距，密度对齐看板内容区。 */
    .watch-market-nav {
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .watch-market-nav .dashboard-market-tabs {
      margin-bottom: 8px;
    }

    /* 「我的订阅」工具行与状态行收紧，减少空白。 */
    #watchListPanel > .card > .market-toolbar {
      margin-bottom: 6px;
    }

    /* 订阅设置按钮压扁（.btn 基础 46px 太高），与「我的订阅」标题同排更紧凑。 */
    .btn.watch-settings-btn {
      min-height: 32px;
    }

    /* 状态筛选行：终态按钮占左侧，消息中心信封贴最右。 */
    .watch-status-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .watch-status-row .watch-status-strip {
      flex: 1 1 auto;
      min-width: 0;
    }

    /* 信封占用右侧后，四个终态按钮收紧一点以在一行内完整显示。 */
    .watch-status-row .watch-terminal-strip {
      gap: 6px;
    }

    .watch-status-row .watch-terminal-strip .watch-chip {
      padding: 0 10px;
    }

    .dashboard-view-tabs {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 4px;
      padding: 4px;
      border: 1px solid var(--line);
      border-radius: 13px;
      background: var(--card);
    }

    .dashboard-view-tab {
      min-width: 0;
      min-height: 38px;
      padding: 0 5px;
      border: 0;
      border-radius: 9px;
      background: transparent;
      color: var(--muted);
      font-size: 13px;
      font-weight: 950;
    }

    .dashboard-view-tab.active {
      background: var(--brand-soft);
      color: var(--brand);
    }

    .dashboard-pane-toolbar {
      min-height: 46px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }

    .dashboard-pane-toolbar .muted {
      margin-top: 3px;
      font-size: 11px;
    }

    .dashboard-selected-filters {
      position: static;
      margin-top: 0;
      padding-top: 0;
      backdrop-filter: none;
    }

    .resonance-history-list .message-history-time {
      min-width: 72px;
    }

    .monitor-period-panel .market-toolbar,
    .op-filter-block .market-toolbar {
      margin-bottom: 8px;
    }

    .op-filter-block > .muted {
      margin-bottom: 8px;
      padding: 0 2px;
    }

    .op-filter-block > .muted:empty {
      display: none;
    }

    .op-sticky-filters {
      position: sticky;
      top: 0;
      z-index: 40;
      margin: calc(-1 * env(safe-area-inset-top)) 0 10px;
      padding: env(safe-area-inset-top) 0 10px;
      background: var(--card);
      backdrop-filter: blur(12px);
      isolation: isolate;
    }

    .op-sticky-filters::before {
      content: "";
      position: absolute;
      left: -14px;
      right: -14px;
      top: -18px;
      bottom: -2px;
      z-index: -1;
      background: var(--card);
    }

    .op-sticky-filters .op-filter-block {
      margin-bottom: 10px;
    }

    .op-sticky-filters .grade-filter {
      margin-bottom: 0;
    }

    .grade-filter {
      margin-top: 2px;
    }

    .market-tabs {
      display: flex;
      align-items: center;
      gap: 0;
      margin: 0 -2px 12px;
      padding: 0 2px 6px;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      touch-action: pan-x;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    #marketListView {
      touch-action: pan-y;
    }

    #coinGrid {
      will-change: transform;
    }

    #coinGrid.mk-swipe-settle {
      transition: transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    #watchListPanel {
      touch-action: pan-y;
    }

    #watchList {
      will-change: transform;
    }

    #watchList.mk-swipe-settle {
      transition: transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    body[data-active-screen="markets"] #marketListView > .market-tabs {
      position: sticky;
      top: 0;
      z-index: 40;
      margin-top: calc(-1 * env(safe-area-inset-top));
      padding-top: env(safe-area-inset-top);
      background: var(--card);
      backdrop-filter: blur(12px);
      isolation: isolate;
    }

    body[data-active-screen="markets"] #marketListView > .market-tabs::before {
      content: "";
      position: absolute;
      left: -14px;
      right: -14px;
      top: -18px;
      bottom: -6px;
      z-index: -1;
      background: var(--card);
    }

    body[data-active-screen="markets"]::before,
    body[data-active-screen="opportunities"]::before {
      content: "";
      position: fixed;
      left: 50%;
      top: 0;
      width: min(100vw, 430px);
      height: var(--safe-top-cover);
      transform: translateX(-50%);
      z-index: 120;
      background: var(--card);
      pointer-events: none;
    }

    .market-tabs::-webkit-scrollbar {
      display: none;
    }

    .market-tab {
      position: relative;
      flex: 0 0 auto;
      min-height: 38px;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: var(--muted);
      padding: 0 10px;
      font-size: 16px;
      font-weight: 700;
      white-space: nowrap;
    }

    .market-tab.active {
      color: var(--text);
      font-weight: 900;
    }

    .market-tab.active::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 22px;
      height: 3px;
      border-radius: 3px;
      background: var(--brand);
      transform: translateX(-50%);
    }

    .market-tab.disabled {
      color: #c2c8d2;
    }

    .market-tab-menu {
      margin-left: auto;
      color: #3a4250;
      font-size: 20px;
      padding-right: 6px;
    }

    .market-list-actions {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    body[data-active-screen="markets"] #marketListView > .market-toolbar {
      position: sticky;
      top: calc(env(safe-area-inset-top) + 46px);
      z-index: 38;
      margin-bottom: 0;
      padding: 8px 0;
      background: var(--card);
      backdrop-filter: blur(12px);
      isolation: isolate;
      box-shadow: none;
    }

    body[data-active-screen="markets"] #marketListView > .market-toolbar::before {
      content: "";
      position: absolute;
      inset: -8px 0;
      z-index: -1;
      background: var(--card);
    }

    .icon-btn {
      width: 34px;
      height: 34px;
      display: inline-grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--card);
      color: #3a4250;
      font-size: 16px;
      font-weight: 900;
    }

    .icon-btn.active {
      width: auto;
      min-width: 42px;
      padding: 0 8px;
      border-color: var(--brand);
      background: var(--brand-soft);
      color: var(--brand);
      line-height: 1.05;
    }

    .market-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }







    .market-detail-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
    }

    [data-kline-detail] {
      transition: transform 0.18s ease;
      will-change: auto;
    }

    [data-kline-detail].hidden {
      transform: none;
      transition: none;
      will-change: auto;
    }

    /* 左边缘右滑返回跟手位移：K 线详情与各二级整屏共用（bindEdgeSwipeBack）。 */
    [data-kline-detail].edge-swipe-active,
    .screen.edge-swipe-active {
      transform: translateX(var(--edge-swipe-x, 0));
      transition: none;
      will-change: transform;
    }

    .kline-sticky-stack {
      position: sticky;
      top: max(6px, env(safe-area-inset-top));
      z-index: 28;
      margin: -2px -2px 10px;
      padding: 2px 2px 8px;
      background: var(--card);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .kline-topbar {
      position: relative;
      gap: 4px;
      min-height: 40px;
      margin-bottom: 6px;
      padding: 0 2px;
    }

    /* 返回键收窄一点，360 宽下给 BTCUSDT.P 留够完整显示的位置。 */
    .kline-topbar > .kline-back {
      width: 28px;
      flex: 0 0 auto;
    }

    .kline-back,
    .kline-action {
      width: 34px;
      height: 34px;
      display: inline-grid;
      place-items: center;
      border: 0;
      background: transparent;
      color: var(--text-secondary);
      font-size: 24px;
      font-weight: 800;
    }

    /* 产品负责人 2026-10-18：币种按钮从正中挪到返回键右侧，右边让给策略切换。
       长代码（1000PEPE 之类）在窄屏上按省略号收，不把右侧按钮挤出去。 */
    .kline-symbol-wrap {
      position: relative;
      z-index: 7;
      flex: 0 1 auto;
      min-width: 0;
      margin-right: auto;
    }

    .kline-symbol-btn {
      max-width: 100%;
      min-height: 36px;
      border: 1px solid var(--line);
      border-radius: var(--radius-pill);
      background: var(--bg-subtle);
      color: var(--text);
      padding: 0 10px;
      font-size: 15px;
      font-weight: 900;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .kline-symbol-btn.open {
      border-color: var(--brand);
      background: var(--brand-soft);
      color: var(--brand);
    }

    /* 报价区左右滑切换上/下一个自选，松手回弹。 */
    .kline-info.kline-coin-swipe-settle {
      transition: transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .kline-symbol-menu {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      width: min(300px, calc(100vw - 52px));
      max-height: min(400px, calc(100vh - 160px));
      overflow: auto;
      overscroll-behavior: contain;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--card);
      padding: 0 6px 6px;
      box-shadow: 0 14px 36px rgba(15, 23, 42, 0.18);
    }

    /* 搜索框吸在下拉列表顶部，滚动列表时也能随时改关键词。 */
    .kline-symbol-search {
      position: sticky;
      top: 0;
      z-index: 1;
      margin: 0 -6px 4px;
      padding: 6px 6px 4px;
      background: var(--card);
    }

    .symbol-search-field {
      position: relative;
      flex: 1 1 auto;
      min-width: 0;
    }

    .symbol-search-field::before {
      content: "";
      position: absolute;
      left: 11px;
      top: 50%;
      width: 15px;
      height: 15px;
      transform: translateY(-50%);
      background: var(--muted);
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E") center / contain no-repeat;
      pointer-events: none;
    }

    /* 要压过全局 input:not(...):not(...) 的 46px 高度与 12px 内衬。 */
    .symbol-search-field input.symbol-search-input[type="search"] {
      min-height: 0;
      width: 100%;
      height: 36px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--bg-subtle);
      color: var(--text);
      padding: 0 10px 0 32px;
      /* 16px 起，iOS 聚焦输入框时才不会整页放大。 */
      font-size: 16px;
      font-weight: 700;
      outline: none;
      -webkit-appearance: none;
      appearance: none;
    }

    .symbol-search-field input.symbol-search-input[type="search"]:focus {
      box-shadow: none;
      border-color: var(--brand);
      background: var(--card);
    }

    .symbol-search-field input.symbol-search-input::placeholder {
      color: var(--muted);
      font-weight: 600;
    }

    .symbol-search-empty {
      padding: 22px 10px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      text-align: center;
    }

    .coin-search-sheet {
      height: calc(100vh - env(safe-area-inset-top) - 18px);
    }

    /* 产品负责人 2026-10-18 真机反馈：搜索面板从底部滑上来的同时输入框聚焦，
       iOS 按输入框「还在屏幕外」的位置去平移视口，键盘弹出后整页被顶上去，
       搜索框看不到了。手机上改成全屏、不做位移动画（聚焦那一刻输入框已在顶部），
       并用 visualViewport 把面板高度贴合到键盘上方（syncCoinSearchViewport）。 */
    body:not([data-layout="desktop"]) #coinSearchSheet .coin-search-sheet {
      top: var(--coin-search-top, 0px);
      bottom: auto;
      height: var(--coin-search-height, 100%);
      max-height: none;
      padding-top: env(safe-area-inset-top);
      border-radius: 0;
      transform: none;
      transition: none;
    }

    .coin-search-sheet .sheet-body {
      flex: 1 1 auto;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 8px 8px calc(16px + env(safe-area-inset-bottom));
    }

    .market-search-btn {
      position: sticky;
      right: 0;
      flex: 0 0 auto;
      width: 38px;
      height: 38px;
      margin-left: auto;
      display: inline-grid;
      place-items: center;
      border: 0;
      background: var(--card);
      color: var(--text-secondary);
    }

    .kline-symbol-group + .kline-symbol-group {
      margin-top: 8px;
      padding-top: 6px;
      border-top: 1px solid var(--line);
    }

    .kline-symbol-group-title {
      padding: 5px 8px 4px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
      line-height: 1.2;
    }

    .kline-symbol-scrim {
      position: fixed;
      inset: 0;
      z-index: 6;
      border: 0;
      background: transparent;
    }

    .kline-symbol-item {
      width: 100%;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 84px;
      align-items: center;
      gap: 10px;
      border: 0;
      border-radius: 10px;
      background: var(--card);
      color: inherit;
      padding: 10px 12px;
      text-align: left;
    }

    .kline-symbol-main {
      min-width: 0;
    }

    .kline-symbol-quote {
      min-width: 84px;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    .kline-symbol-item.active {
      background: var(--brand-soft);
    }

    .kline-symbol-item strong {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 15px;
      font-weight: 900;
    }

    .kline-symbol-item span {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* .kline-symbol-item span 是给副标题（K 线名称行第二行）写的通配规则，
       但 `永续` 小标签也是嵌在 <strong> 里的 <span class="market-chip">，
       会被上面那条更高优先级的选择器强制 display:block、撑成整行——
       这里把它找补回来，恢复成小标签该有的 inline-flex。 */
    .kline-symbol-item .market-chip {
      display: inline-flex;
      margin-top: 0;
      white-space: nowrap;
      overflow: visible;
      text-overflow: clip;
    }

    .kline-symbol-item em {
      color: var(--brand);
      font-style: normal;
      font-weight: 900;
    }

    .kline-actions {
      display: flex;
      align-items: center;
      gap: 2px;
      margin-left: auto;
    }

    .kline-action.active {
      color: var(--sig-warn);
    }

    /* 产品负责人 2026-10-16：星星原来 24px 偏大，缩一号让给右侧的分享按钮。 */
    .kline-action.kline-favorite {
      width: 30px;
      font-size: 19px;
    }

    .kline-action.kline-share:disabled {
      opacity: 0.45;
    }

    /* 产品负责人 2026-10-16：三款海报不用按钮切换，改为左右滑动，圆点指示当前张。 */
    .kline-share-carousel {
      display: flex;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .kline-share-carousel::-webkit-scrollbar {
      display: none;
    }

    .kline-share-slide {
      flex: 0 0 100%;
      min-height: 200px;
      display: grid;
      place-items: center;
      scroll-snap-align: center;
      scroll-snap-stop: always;
    }

    #klineShareBody .content-share-preview {
      max-height: 62vh;
      width: auto;
      max-width: calc(100% - 16px);
      margin: 0 auto;
      object-fit: contain;
    }

    .kline-share-dots {
      display: flex;
      justify-content: center;
      gap: 6px;
      margin-top: 10px;
    }

    .kline-share-dots span {
      width: 6px;
      height: 6px;
      border-radius: var(--radius-pill);
      background: var(--line-strong);
      transition: width 0.2s ease, background 0.2s ease;
    }

    .kline-share-dots span.active {
      width: 16px;
      background: var(--brand);
    }

    .strategy-card {
      margin-bottom: 6px;
      padding: 0;
      border: 0;
      box-shadow: none;
      background: transparent;
    }

    /* 手机上策略切换已收进顶栏（.kline-strategy-mini），这一整行不再显示；桌面版式见下方覆盖。 */
    .kline-sticky-stack .strategy-card {
      display: none;
      margin-bottom: 0;
    }

    .kline-strategy-mini {
      flex: 0 0 auto;
      overflow: visible;
      margin-right: 4px;
      padding: 2px;
      border-radius: 10px;
    }

    .kline-strategy-mini .seg-btn {
      flex: 0 0 auto;
      min-height: 28px;
      padding: 0 8px;
      border-radius: 8px;
      font-size: 12.5px;
    }

    .kline-strategy-mini .seg-btn.active {
      box-shadow: 0 2px 6px rgba(30, 111, 255, 0.24);
    }

    .period-strip {
      display: flex;
      gap: 5px;
      overflow-x: auto;
      padding-bottom: 2px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .period-strip::-webkit-scrollbar {
      display: none;
    }

    .seg-btn,
    .period-btn {
      min-height: 30px;
      flex: 0 0 auto;
      border: 1px solid var(--line);
      border-radius: 9px;
      padding: 0 12px;
      background: var(--card);
      color: #334155;
      font-size: 13px;
      font-weight: 900;
      white-space: nowrap;
    }

    .period-btn {
      min-height: 30px;
      padding: 0 7px;
      font-size: 12px;
      text-align: center;
    }

    .seg-btn {
      flex: 1 1 0;
      min-width: 0;
      border: 0;
      background: transparent;
      color: var(--muted);
    }

    .seg-btn.active {
      background: var(--brand);
      color: #fff;
      box-shadow: 0 4px 10px rgba(30, 111, 255, 0.28);
    }

    .period-btn.active {
      border-color: var(--brand);
      background: var(--card);
      color: var(--brand);
    }

    .period-btn.locked::after {
      content: "会员";
      margin-left: 5px;
      color: #b7791f;
      font-size: 10px;
      font-weight: 900;
    }

    .chart-card {
      padding: 10px;
      position: relative;
    }

    .kline-fullscreen-btn {
      position: absolute;
      left: 8px;
      bottom: 8px;
      z-index: 5;
      width: 34px;
      height: 34px;
      display: inline-grid;
      place-items: center;
      border: 1px solid var(--line-strong);
      border-radius: 10px;
      background: var(--card);
      color: #334155;
      font-size: 18px;
      font-weight: 900;
      box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .kline-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      padding: 2px 2px 6px;
    }

    .kline-price-main {
      min-width: 0;
    }

    .kline-last {
      font-size: 22px;
      font-weight: 900;
      line-height: 1.05;
    }

    .kline-change {
      margin-top: 3px;
      font-size: 12px;
      font-weight: 800;
    }

    .kline-stats {
      display: grid;
      grid-template-columns: auto auto;
      column-gap: 18px;
      row-gap: 6px;
      flex: 0 0 auto;
    }

    .kline-stat {
      display: flex;
      flex-direction: column;
      gap: 1px;
    }

    .kline-stat span {
      color: var(--muted);
      font-size: 10.5px;
      font-weight: 700;
      white-space: nowrap;
    }

    /* 数字用常规字重：粗体数字一排排挤在图表上方太抢眼（产品负责人 2026-10-27）。 */
    .kline-stat strong {
      font-size: 12px;
      font-weight: 400;
      white-space: nowrap;
    }

    .kline-freshness {
      flex: 1 0 100%;
      margin-top: -4px;
      color: var(--muted);
      font-size: 11.5px;
      font-weight: 700;
      line-height: 1.35;
    }

    .kline-stat .hi { color: var(--up); }
    .kline-stat .lo { color: var(--down); }

    .indicator-bar {
      display: flex;
      align-items: center;
      gap: 7px;
      min-height: 24px;
      margin: 5px 0 7px;
      overflow: hidden;
    }

    .indicator-chip {
      flex: 0 0 auto;
      min-width: 38px;
      height: 22px;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
    }

    /* 小问号说明按钮：跟在标签或指标后面，16px 圆钮，热区靠外边距补足。 */
    .help-tip {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      margin: 0 0 0 4px;
      padding: 0;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      background: var(--card);
      color: var(--muted);
      font-family: inherit;
      font-size: 10px;
      font-weight: 900;
      line-height: 1;
      vertical-align: middle;
      cursor: pointer;
    }

    .help-tip[aria-expanded="true"] {
      border-color: var(--brand);
      color: var(--brand);
    }

    .indicator-bar .help-tip {
      margin-left: -4px;
    }

    .tag-row .help-tip {
      align-self: center;
      margin-left: -2px;
    }

    .help-tip-pop {
      position: fixed;
      z-index: 2000;
      padding: 12px 14px;
      border: 1px solid var(--line-strong);
      border-radius: 12px;
      background: var(--card);
      box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
      color: var(--text-secondary);
      font-size: 12.5px;
      line-height: 1.65;
    }

    .help-tip-pop strong {
      display: block;
      margin-bottom: 4px;
      color: var(--text);
      font-size: 13.5px;
    }

    .help-tip-pop p {
      margin: 0;
    }

    .help-tip-pop p + p {
      margin-top: 6px;
    }

    .indicator-chip.active {
      color: var(--text);
      box-shadow: inset 0 -2px 0 var(--brand);
    }

    .ema-row {
      display: flex;
      flex: 1 1 auto;
      flex-wrap: nowrap;
      gap: 6px;
      min-width: 0;
      padding: 0;
      font-size: 10px;
      font-weight: 400;
      line-height: 1.2;
      overflow: hidden;
      white-space: nowrap;
    }

    .ema-row.disabled {
      display: none;
    }

    .ema-row .e21 { color: var(--ema21); }
    .ema-row .e55 { color: var(--ema55); }
    .ema-row .e120 { color: var(--ema120); }

    /* Hilo 指标提示条：跟踪中显示信号进展，无信号/已结束时显示原因 */
    .kline-hilo-note {
      display: flex;
      align-items: center;
      gap: 6px;
      margin: 0 0 7px;
      padding: 6px 9px;
      border-radius: 9px;
      background: var(--line);
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      line-height: 1.35;
    }

    .kline-hilo-note .kline-hilo-tag {
      flex: 0 0 auto;
      padding: 1px 6px;
      border-radius: 6px;
      background: var(--card);
      color: var(--muted);
      font-size: 10px;
      font-weight: 900;
    }

    .kline-hilo-note .kline-hilo-text {
      flex: 1 1 auto;
      min-width: 0;
      font-variant-numeric: tabular-nums;
    }

    .kline-hilo-note.is-active {
      color: var(--text);
    }

    .kline-hilo-note.is-active .kline-hilo-tag {
      color: #fff;
    }

    .kline-hilo-note.is-active.dir-low .kline-hilo-tag { background: var(--tone-red); }
    .kline-hilo-note.is-active.dir-high .kline-hilo-tag { background: var(--tone-green); }

    /* 已完成（达到 T3）：亮色标签，和已退出/已超时共用的中性灰区分开，
       避免用绿/红——那两色已经被进行中的低点/高点方向占用了。 */
    .kline-hilo-note.is-complete .kline-hilo-tag {
      background: #f59e0b;
      color: #fff;
    }

    .kline-hilo-note .kline-hilo-sub {
      flex: 0 0 auto;
      color: var(--muted);
      font-size: 10.5px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
    }

    .kline-hilo-cta {
      flex: 0 0 auto;
      border: 0;
      border-radius: 7px;
      padding: 3px 9px;
      background: var(--brand);
      color: #fff;
      font-size: 10.5px;
      font-weight: 900;
    }

    .chart-meta {
      min-height: 22px;
      display: flex;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 8px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .app-chart {
      position: relative;
      width: calc(100% + 28px);
      /* 手机按屏宽分档（产品负责人 2026-10-27）：360 档保持 285；
         390 及更宽加到 315，让 K 线可看区域大一些；320 小屏降到 250，
         否则首屏看不到下方信号表。桌面版式另由 flex 撑满。 */
      height: 285px;
      margin-left: -14px;
      margin-right: -14px;
      display: block;
      border: 1px solid var(--line);
      border-left: 0;
      border-right: 0;
      border-radius: 0;
      background: transparent;
      overflow: hidden;
    }

    body.kline-fullscreen-active {
      overflow: hidden;
      overscroll-behavior: none;
    }

    .kline-fullscreen-overlay {
      position: fixed;
      inset: 0;
      z-index: 220;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      padding:
        max(8px, env(safe-area-inset-top))
        max(12px, env(safe-area-inset-right))
        max(8px, env(safe-area-inset-bottom))
        max(12px, env(safe-area-inset-left));
      background: var(--card);
      overflow: hidden;
      touch-action: none;
    }

    .kline-fullscreen-rotate-hint {
      flex: 1 1 auto;
      min-height: 0;
      display: grid;
      place-items: center;
      gap: 12px;
      color: var(--text);
      text-align: center;
    }

    .kline-fullscreen-rotate-hint .rotate-phone {
      width: 54px;
      height: 54px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--bg-subtle);
      color: var(--brand);
      font-size: 32px;
      font-weight: 900;
      animation: rotateHintPulse 1.8s ease-in-out infinite;
    }

    .kline-fullscreen-rotate-hint .rotate-title {
      font-size: 16px;
      font-weight: 900;
    }

    @keyframes rotateHintPulse {
      0%, 100% { transform: rotate(-6deg); }
      50% { transform: rotate(8deg); }
    }

    .kline-fullscreen-overlay.locking .kline-fullscreen-rotate-hint,
    .kline-fullscreen-overlay.locking .kline-fullscreen-stage,
    .kline-fullscreen-overlay.landscape .kline-fullscreen-rotate-hint,
    .kline-fullscreen-overlay.portrait .kline-fullscreen-stage {
      display: none;
    }

    .kline-fullscreen-stage {
      position: relative;
      width: 100%;
      height: 100%;
      min-width: 0;
      min-height: 0;
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      gap: 7px;
      background: var(--card);
      overflow: hidden;
    }

    .kline-fullscreen-topbar {
      flex: 0 0 auto;
      min-height: 34px;
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      padding-right: 48px;
    }

    .kline-fullscreen-topbar .kline-symbol-wrap {
      position: relative;
      left: auto;
      top: auto;
      z-index: 226;
      flex: 0 0 auto;
      margin-right: 0;
      transform: none;
    }

    .kline-fullscreen-topbar .kline-symbol-btn {
      min-height: 32px;
      padding: 0 12px;
      font-size: 13px;
      background: var(--card);
    }

    .kline-fullscreen-topbar .kline-symbol-menu {
      left: 0;
      width: min(300px, calc(100vw - 24px));
      max-height: calc(100vh - 82px);
      transform: none;
    }

    .kline-fullscreen-stage > .period-strip {
      flex: 0 0 30px;
      min-width: 0;
      padding: 0 48px 0 0;
    }

    .kline-fullscreen-stage > .period-strip .period-btn {
      min-height: 30px;
    }

    .kline-fullscreen-chart-pane {
      position: relative;
      flex: 1 1 auto;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
    }

    .kline-fullscreen-chart-pane .app-chart {
      width: 100%;
      height: 100%;
      margin: 0;
      border: 0;
      display: block;
    }

    .kline-fullscreen-topbar > .kline-info {
      position: relative;
      z-index: 221;
      display: flex;
      flex: 1 1 auto;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: nowrap;
      gap: 12px;
      min-width: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      overflow: hidden;
      pointer-events: none;
    }

    .kline-fullscreen-topbar > .kline-info .kline-price-main {
      flex: 0 0 auto;
      min-width: 0;
      display: flex;
      align-items: baseline;
      gap: 8px;
    }

    .kline-fullscreen-topbar > .kline-info .kline-last {
      font-size: 18px;
      line-height: 1;
      white-space: nowrap;
    }

    .kline-fullscreen-topbar > .kline-info .kline-change {
      margin-top: 0;
      font-size: 11px;
      white-space: nowrap;
    }

    .kline-fullscreen-topbar > .kline-info .kline-stats {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 10px;
      overflow: hidden;
    }

    .kline-fullscreen-topbar > .kline-info .kline-stat {
      flex: 0 0 auto;
      gap: 0;
    }

    .kline-fullscreen-topbar > .kline-info .kline-stat:nth-child(1),
    .kline-fullscreen-topbar > .kline-info .kline-stat:nth-child(3),
    .kline-fullscreen-topbar > .kline-info .kline-freshness {
      display: none;
    }

    .kline-fullscreen-topbar > .kline-info .kline-stat span {
      font-size: 9.5px;
      line-height: 1.05;
    }

    .kline-fullscreen-topbar > .kline-info .kline-stat strong {
      font-size: 11px;
      line-height: 1.1;
    }

    .kline-fullscreen-chart-pane .chart-readout {
      top: 10px;
      left: 10px;
      right: 10px;
      max-width: 520px;
    }

    .kline-fullscreen-chart-pane .kline-float {
      z-index: 8;
    }

    .kline-fullscreen-overlay > .kline-symbol-scrim {
      z-index: 224;
    }

    .kline-fullscreen-close {
      position: fixed;
      right: max(12px, env(safe-area-inset-right));
      top: max(12px, env(safe-area-inset-top));
      z-index: 230;
      width: 38px;
      height: 38px;
      display: inline-grid;
      place-items: center;
      border: 1px solid var(--line-strong);
      border-radius: 12px;
      background: var(--card);
      color: #334155;
      font-size: 24px;
      font-weight: 800;
      box-shadow: 0 8px 22px rgba(15, 23, 42, 0.16);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .market-price-overlay {
      position: absolute;
      inset: 0;
      z-index: 4;
      pointer-events: none;
      overflow: hidden;
      font-variant-numeric: tabular-nums;
    }

    /* 桌面版式的分隔线，手机版式下不出现。 */
    .desktop-pane-resizer {
      display: none;
    }

    .market-price-scale-gesture {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 58px;
      z-index: 6;
      background: transparent;
      cursor: ns-resize;
      touch-action: none;
      -webkit-tap-highlight-color: transparent;
    }

    .market-price-label {
      position: absolute;
      right: 7px;
      z-index: 2;
      transform: translateY(-50%);
      color: rgba(51, 65, 85, 0.58);
      font-size: 10.5px;
      font-weight: 400;
      line-height: 1;
      text-align: right;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 5px rgba(255, 255, 255, 0.82);
      white-space: nowrap;
    }

    :root[data-theme="dark"] .market-price-label {
      color: rgba(226, 232, 240, 0.72);
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    }

    .market-price-label.current {
      right: 6px;
      font-size: 11.5px;
      font-weight: 500;
    }

    /* HILO 价格线的名称落在右侧价格轴上，与刻度共用一套避让（见 addLabel）。
       垫一块不透明底色把线挡在文字后面——线直接横穿数字会把它劈成两半；
       上移躲线又会被相邻刻度挤掉，只能就地遮。配色另起一套蓝/琥珀，不用涨跌
       的红绿，否则和蜡烛糊在一起。 */
    .market-price-label.market-hilo-label {
      z-index: 3;
      padding: 1px 4px;
      border-radius: 5px;
      background: var(--card);
      font-size: 10px;
      font-weight: 800;
    }

    .market-price-label.market-hilo-label.exit { color: var(--hilo-exit); }
    .market-price-label.market-hilo-label.target { color: var(--hilo-target); opacity: 0.72; }
    .market-price-label.market-hilo-label.target.hit { opacity: 1; }

    .market-price-label.current.up {
      color: rgba(var(--price-up-rgb), 0.9);
    }

    .market-price-label.current.down {
      color: rgba(var(--price-down-rgb), 0.9);
    }

    .market-price-label.market-crosshair-price-label {
      right: 6px;
      z-index: 3;
      min-width: 58px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 2px;
      padding: 5px 7px;
      border-radius: 6px;
      background: rgba(71, 85, 105, 0.7);
      color: rgba(255, 255, 255, 0.92);
      font-size: 10.5px;
      font-weight: 650;
      line-height: 1.05;
      text-shadow: none;
      box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
    }

    .crosshair-label-price,
    .crosshair-label-delta {
      display: block;
    }

    .crosshair-label-delta {
      color: rgba(255, 255, 255, 0.76);
      font-size: 9.5px;
      font-weight: 500;
    }

    .market-price-label.market-crosshair-price-label.up {
      background: rgba(var(--price-up-rgb), 0.72);
    }

    .market-price-label.market-crosshair-price-label.down {
      background: rgba(var(--price-down-rgb), 0.72);
    }

    .market-current-price-line {
      position: absolute;
      z-index: 1;
      height: 0;
      transform: translateY(-50%);
      border-top: 1px dashed rgba(100, 116, 139, 0.56);
    }

    .market-current-price-line.up {
      border-top-color: rgba(var(--price-up-rgb), 0.62);
    }

    .market-current-price-line.down {
      border-top-color: rgba(var(--price-down-rgb), 0.62);
    }

    .chart-readout {
      position: absolute;
      top: 42px;
      left: 18px;
      right: 18px;
      z-index: 2;
      display: flex;
      flex-wrap: wrap;
      gap: 5px 8px;
      padding: 7px 9px;
      border: 1px solid var(--line-strong);
      border-radius: 8px;
      background: var(--card);
      color: #334155;
      font-size: 11px;
      font-weight: 800;
      line-height: 1.35;
      pointer-events: none;
      backdrop-filter: blur(8px);
    }

    :root[data-theme="dark"] .kline-float { background: rgba(17, 24, 39, 0.76); border-color: var(--line-strong); }

    .kline-float {
      position: absolute;
      top: 150px;
      z-index: 4;
      min-width: 132px;
      max-width: 172px;
      border: 1px solid var(--line-strong);
      border-radius: 9px;
      background: rgba(255, 255, 255, 0.76);
      box-shadow: 0 3px 10px rgba(15, 23, 42, 0.07);
      padding: 7px 9px;
      pointer-events: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .kline-float-row {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      font-size: 10.5px;
      line-height: 1.8;
    }

    .kline-float-row span {
      color: var(--muted);
      font-weight: 700;
    }

    .kline-float-row strong {
      font-weight: 800;
    }

    .kline-float-row .hi { color: var(--up); }
    .kline-float-row .lo { color: var(--down); }
    .kline-float-row .up { color: var(--up); }
    .kline-float-row .down { color: var(--down); }

    .chart-readout .up {
      color: var(--ok);
    }

    .chart-readout .down {
      color: var(--danger);
    }

    .chart-empty {
      min-height: 120px;
      display: grid;
      place-items: center;
      padding: 18px;
      text-align: center;
      color: var(--muted);
      line-height: 1.6;
    }

    .market-warning {
      border-color: #fed7aa;
      background: var(--gold-bg);
      color: #9a3412;
    }

    .monitor-mode-card {
      padding: 4px;
      margin-bottom: 10px;
      box-shadow: none;
      background: var(--bg-subtle);
    }

    .monitor-mode-seg .seg-btn {
      min-width: 0;
    }

    .monitor-stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 9px;
      margin-bottom: 10px;
    }

    .monitor-stat {
      min-height: 56px;
      padding: 11px 6px 9px;
      border: 0;
      border-radius: 13px;
      background: var(--bg-subtle);
      text-align: center;
      box-shadow: none;
    }

    .monitor-stat strong {
      display: block;
      margin-bottom: 6px;
      font-size: 21px;
      line-height: 1;
      font-weight: 900;
    }

    .monitor-stat strong.sig-low {
      color: var(--sig-form);
    }

    .monitor-stat strong.sig-high {
      color: var(--tone-red);
    }

    .monitor-stat strong.pos-0 {
      color: var(--pos-0);
    }

    .monitor-stat strong.pos-4 {
      color: var(--pos-4);
    }

    .monitor-stat strong.pos-6 {
      color: var(--pos-6);
    }

    .monitor-stat strong.pos-10 {
      color: var(--pos-10);
    }

    .monitor-stat strong.trend-stat-value {
      color: var(--text);
    }

    .monitor-stat span {
      color: var(--muted);
      font-size: 10.5px;
      line-height: 1.1;
      font-weight: 700;
      white-space: nowrap;
    }

    #monitorPeriodStrip .period-btn {
      min-width: 58px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      position: relative;
    }

    #monitorPeriodStrip.two-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 7px;
      overflow: visible;
      padding-bottom: 0;
    }

    #monitorPeriodStrip.two-row .period-btn {
      width: 100%;
      min-width: 0;
      padding-inline: 4px;
    }

    #monitorPeriodStrip .period-btn.locked::after {
      content: "🔒";
      margin-left: 0;
      color: var(--gold);
      font-size: 12px;
    }

    .period-count {
      min-width: 18px;
      height: 18px;
      display: inline-grid;
      place-items: center;
      border-radius: 999px;
      background: var(--bg-subtle);
      color: #475569;
      font-size: 11px;
      font-weight: 950;
      line-height: 1;
    }

    .period-btn.active .period-count {
      background: var(--card);
      color: var(--brand);
    }

    .monitor-dot {
      width: 9px;
      height: 9px;
      flex: 0 0 auto;
      border-radius: 999px;
      background: var(--brand);
    }

    .monitor-dot.bottom {
      background: var(--sig-form);
    }

    .monitor-dot.top {
      background: var(--tone-red);
    }

    .monitor-list {
      display: grid;
      gap: 8px;
      padding: 0;
    }

    .monitor-signal {
      padding: 11px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--card);
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
    }

    .monitor-signal.interactive {
      width: 100%;
      color: var(--text);
      font: inherit;
      text-align: left;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .monitor-signal.interactive:active {
      transform: scale(0.99);
      border-color: rgba(30, 111, 255, 0.28);
      background: var(--brand-soft);
    }

    .v4-monitor-card {
      min-height: 72px;
      padding: 13px 12px;
    }

    .v4-monitor-card.trend {
      border-left: 4px solid var(--brand);
    }

    .monitor-signal-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 0;
    }

    .monitor-signal-title {
      font-size: 18px;
      font-weight: 950;
      line-height: 1.15;
    }

    /* 等级徽标 + 信号类型徽标同行右对齐（形成信号才有等级）。 */
    .monitor-signal-side {
      display: flex;
      align-items: center;
      gap: 6px;
      flex: 0 0 auto;
    }

    .monitor-empty {
      min-height: 110px;
      display: grid;
      place-items: center;
      padding: 18px;
      text-align: center;
      color: var(--muted);
      line-height: 1.6;
    }

    .signal-badge.bottom {
      color: #047857;
      background: #dcfce7;
    }

    .signal-badge.top {
      color: #b91c1c;
      background: #fee2e2;
    }

    .signal-badge.bottom.pass {
      border: 1px solid #bbf7d0;
      background: #ecfdf5;
    }

    .signal-badge.bottom.form {
      color: #047857;
      background: #dcfce7;
    }

    .signal-badge.top.pass {
      border: 1px solid #fecdd3;
      background: #fff1f2;
    }

    .signal-badge.top.form {
      color: #b91c1c;
      background: #fee2e2;
    }

    .signal-badge.gone {
      color: #64748b;
      background: var(--bg-subtle);
    }

    /* 共振标题与机会/订阅详情弹窗标题里的方向词上色，与「高低」页保持一致
       （低点绿 / 高点红），仅高亮几个字。 */
    .resonance-dir,
    .signal-dir {
      display: inline-block;
      padding: 0 5px;
      border-radius: 5px;
    }

    .resonance-dir.bottom,
    .signal-dir.bottom {
      color: #047857;
      background: #dcfce7;
    }

    .resonance-dir.top,
    .signal-dir.top {
      color: #b91c1c;
      background: #fee2e2;
    }

    .monitor-trend-side {
      display: grid;
      justify-items: end;
      gap: 6px;
      flex: 0 0 auto;
    }

    .trend-transition {
      color: var(--text);
      font-size: 12px;
      font-weight: 950;
      white-space: nowrap;
    }

    .pill.pos.pos-0 {
      border-color: var(--pos-0);
      color: var(--pos-0);
    }

    .pill.pos.pos-4 {
      border-color: var(--pos-4);
      color: var(--pos-4);
    }

    .pill.pos.pos-6 {
      border-color: var(--pos-6);
      color: var(--pos-6);
    }

    .pill.pos.pos-10 {
      border-color: var(--pos-10);
      color: var(--pos-10);
    }

    .monitor-upgrade {
      margin-top: 12px;
    }

    .grade-strip {
      display: flex;
      gap: 7px;
      overflow-x: auto;
      padding-bottom: 4px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .grade-strip::-webkit-scrollbar {
      display: none;
    }

    .grade-chip {
      min-height: 42px;
      flex: 0 0 auto;
      border: 1px solid var(--line);
      border-radius: 11px;
      padding: 0 12px;
      background: var(--card);
      color: #334155;
      font-size: 13px;
      font-weight: 950;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .grade-chip.active {
      border-color: #bae6fd;
      background: var(--brand-soft);
      color: var(--brand);
    }

    .grade-chip.locked {
      color: #b7791f;
      background: var(--gold-bg);
    }

    .grade-lock {
      margin-left: 4px;
      font-size: 11px;
    }

    .grade-count {
      min-width: 18px;
      height: 18px;
      display: inline-grid;
      place-items: center;
      border-radius: 999px;
      background: var(--bg-subtle);
      color: #475569;
      font-size: 11px;
      font-weight: 950;
      font-variant-numeric: tabular-nums;
    }

    .grade-chip.active .grade-count {
      background: var(--card);
      color: var(--brand);
    }

    .grade-chip.locked .grade-count {
      background: #fff3e0;
      color: #b7791f;
    }

    .op-summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .op-card {
      position: relative;
      margin-bottom: 9px;
      padding: 12px 12px 11px;
      border: 1px solid var(--line);
      border-left: 4px solid #94a3b8;
      border-radius: 12px;
      background: var(--card);
      text-align: left;
      color: inherit;
      overflow: hidden;
      box-shadow: none;
    }

    .op-card.grade-S { border-left-color: #b7791f; }
    .op-card.grade-A { border-left-color: #dc2626; }
    .op-card.grade-B { border-left-color: #0f766e; }
    .op-card.grade-C { border-left-color: #d97706; }
    .op-card.grade-D { border-left-color: #94a3b8; }

    .op-lock-summary {
      margin-bottom: 10px;
      padding: 22px 16px;
      border: 1px solid var(--line);
      border-left: 4px solid #b7791f;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.94);
      text-align: center;
    }

    .op-lock-summary.grade-A {
      border-left-color: var(--danger);
    }

    .op-lock-summary .muted {
      margin: 7px 0 13px;
      font-size: 12px;
    }

    .op-card.locked-premium .op-card-content {
      filter: blur(0.4px);
      opacity: 0.42;
    }

    .lockmask {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: grid;
      place-items: center;
      gap: 8px;
      padding: 14px;
      text-align: center;
      background: var(--card);
      backdrop-filter: blur(5px);
    }

    .lockmask-icon {
      font-size: 24px;
      line-height: 1;
    }

    .lockmask-title {
      color: #7c2d12;
      font-size: 14px;
      font-weight: 950;
    }

    .unlock-btn {
      min-height: 34px;
      border: 0;
      border-radius: 999px;
      padding: 0 14px;
      background: #d97706;
      color: #fff;
      font-size: 12px;
      font-weight: 950;
    }

    .op-card-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 7px;
      margin-bottom: 8px;
    }

    .op-card-main {
      min-width: 0;
      flex: 1 1 auto;
    }

    .op-symbol {
      font-size: 16px;
      font-weight: 950;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
      line-height: 1.15;
    }

    .op-signal-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      min-height: 20px;
      padding: 0 8px;
      border-radius: 7px;
      background: var(--bg-subtle);
      color: #3a4250;
      font-size: 11px;
      font-weight: 900;
      white-space: nowrap;
    }

    .op-signal-dot {
      width: 13px;
      height: 13px;
      border-radius: 50%;
      flex: 0 0 auto;
      box-shadow: inset 0 -1px 2px rgba(15, 23, 42, 0.2);
    }

    .op-signal-chip.signal-low .op-signal-dot {
      background: linear-gradient(180deg, #22c55e 0%, #16a34a 70%, #15803d 100%);
    }

    .op-signal-chip.signal-high .op-signal-dot {
      background: linear-gradient(180deg, #fb7185 0%, #ef4444 68%, #b91c1c 100%);
    }

    .op-progress-tag {
      display: inline-flex;
      align-items: center;
      min-height: 20px;
      padding: 0 8px;
      border-radius: 7px;
      background: #ecfdf5;
      color: #047857;
      font-size: 11px;
      font-weight: 950;
      white-space: nowrap;
    }

    .op-progress-tag.complete {
      background: #fef3c7;
      color: #92400e;
    }

    .op-progress-tag.stopped {
      background: #fee2e2;
      color: #991b1b;
    }

    .op-progress-tag.expired {
      background: var(--bg-subtle);
      color: #64748b;
    }

    .op-time {
      margin-top: 6px;
      color: var(--muted);
      font-size: 11.5px;
      font-weight: 800;
      line-height: 1.25;
    }

    .op-time-part {
      white-space: nowrap;
    }

    .op-actions {
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
      gap: 6px;
      flex: 0 0 auto;
    }

    .score-badge {
      min-width: 38px;
      min-height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 7px;
      background: var(--surface-soft);
      padding: 0 8px;
      line-height: 1;
    }

    .score-badge strong {
      font-size: 15px;
      font-weight: 950;
    }

    .score-badge.grade-S strong { color: #b7791f; }
    .score-badge.grade-A strong { color: var(--danger); }
    .score-badge.grade-B strong { color: #0f766e; }
    .score-badge.grade-C strong { color: #d97706; }
    .score-badge.grade-D strong { color: #64748b; }

    .score-badge span {
      display: none;
    }

    .opportunity-pin-btn {
      width: 30px;
      height: 30px;
      display: inline-grid;
      place-items: center;
      flex: 0 0 30px;
      padding: 5px;
      border: 1px solid var(--line-strong);
      border-radius: 9px;
      background: rgba(248, 250, 252, 0.84);
      color: #64748b;
      box-shadow: none;
      transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.12s ease;
    }

    .opportunity-pin-btn svg {
      width: 17px;
      height: 17px;
      fill: currentColor;
      transition: transform 0.16s ease;
    }

    .opportunity-pin-btn:active {
      transform: scale(0.9);
    }

    /* 已置顶：整钮填充品牌色、图钉转白并轻微旋转放大，形成明显的动态置顶反馈。 */
    .opportunity-pin-btn.active {
      border-color: var(--brand);
      background: var(--brand);
      color: #fff;
      box-shadow: 0 2px 8px rgba(30, 111, 255, 0.28);
    }

    .opportunity-pin-btn.active svg {
      transform: rotate(-20deg) scale(1.05);
    }

    .opportunity-pin-detail {
      width: auto;
      height: 40px;
      display: inline-flex;
      gap: 7px;
      padding: 0 14px;
      font-size: 13px;
      font-weight: 750;
    }

    .op-price-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr) minmax(100px, 1.18fr);
      gap: 6px;
      margin: 9px 0 8px;
    }

    .op-price-grid div {
      min-width: 0;
      padding: 0;
      border-radius: 0;
      background: transparent;
    }

    .op-price-grid span {
      display: block;
      margin-bottom: 3px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 850;
      white-space: nowrap;
    }

    .op-price-grid strong {
      display: flex;
      align-items: baseline;
      gap: 4px;
      color: var(--text);
      font-size: 13.5px;
      font-weight: 800;
      line-height: 1.2;
      white-space: nowrap;
    }

    .op-price-value {
      min-width: 0;
    }

    .op-price-grid em {
      display: inline-flex;
      flex: 0 0 auto;
      font-style: normal;
      font-size: 10.5px;
      font-weight: 900;
      white-space: nowrap;
    }

    .op-price-grid em.up {
      color: var(--up);
    }

    .op-price-grid em.down {
      color: var(--down);
    }

    .op-price-grid .target-achieved span,
    .op-price-grid .target-achieved strong {
      color: #047857;
    }

    .op-tags {
      margin-top: 2px;
      gap: 5px;
    }

    .op-tags .tag {
      min-height: 20px;
      padding: 0 7px;
      border-radius: 7px;
      font-size: 11px;
    }

    .op-guest-panel {
      min-height: 230px;
      display: grid;
      place-items: center;
      text-align: center;
      padding: 28px 18px;
    }

    .gate-icon {
      width: 48px;
      height: 48px;
      display: inline-grid;
      place-items: center;
      margin-bottom: 12px;
      border-radius: 16px;
      background: var(--brand-soft);
      color: var(--brand);
      font-size: 24px;
    }

    .tag-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .tag {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 0 8px;
      border-radius: 999px;
      background: var(--bg-subtle);
      color: #334155;
      font-size: 12px;
      font-weight: 850;
    }

    .tag.risk {
      background: #fee2e2;
      color: #991b1b;
    }

    .op-empty {
      min-height: 150px;
      display: grid;
      place-items: center;
      padding: 18px;
      text-align: center;
      color: var(--muted);
      line-height: 1.6;
    }

    .factor-grid {
      display: grid;
      gap: 9px;
    }

    .factor-row {
      display: grid;
      grid-template-columns: 72px 1fr 42px;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 850;
    }

    .factor-bar {
      height: 8px;
      border-radius: 999px;
      background: #e2e8f0;
      overflow: hidden;
    }

    .op-detail-head .market-toolbar {
      margin-bottom: 8px;
    }

    .op-detail-sub {
      margin-bottom: 12px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
    }

    .op-detail-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 14px;
    }

    .op-detail-v4 {
      padding-bottom: 10px;
    }













    .od2-scorecard {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 2px 0 6px;
      padding: 13px 14px;
      border-radius: 14px;
      background: var(--bg-subtle);
    }

    .od2-sc-l {
      min-width: 0;
      flex: 1;
    }



    .od2-sc-tag {
      margin-top: 4px;
      color: var(--muted);
      font-size: 11.5px;
      font-weight: 800;
    }





    .od2-score {
      width: 56px;
      height: 56px;
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border-radius: 14px;
      background: #eef1f5;
      color: #8a93a3;
    }

    .od2-score b {
      font-size: 19px;
      line-height: 1;
      font-weight: 950;
    }

    .od2-score span {
      margin-top: 3px;
      font-size: 12px;
      font-weight: 800;
    }

    .od2-score.S { background: #fde8ea; color: var(--danger); }
    .od2-score.A { background: var(--gold-bg); color: var(--gold); }
    .od2-score.B { background: var(--brand-soft); color: var(--brand); }
    .od2-score.C,
    .od2-score.D { background: #eef1f5; color: #6b7280; }

    .od2-facs {
      margin: 10px 0 4px;
    }

    .od2-fac {
      display: flex;
      align-items: center;
      gap: 11px;
      margin: 10px 0;
    }

    .od2-fl {
      flex: 0 0 76px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
    }

    .od2-bar {
      height: 7px;
      flex: 1;
      border-radius: 4px;
      background: var(--line);
      overflow: hidden;
    }

    .od2-barfill {
      display: block;
      height: 100%;
      border-radius: 4px;
      background: linear-gradient(90deg, #9cc3ff, var(--brand));
    }

    .od2-fv {
      width: 30px;
      flex: 0 0 auto;
      color: var(--text);
      text-align: right;
      font-size: 13px;
      font-weight: 900;
    }

    .od2-plan-t {
      margin: 18px 0 6px;
      color: var(--text);
      font-size: 14px;
      font-weight: 900;
    }

    .od2-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      padding: 11px 2px;
      border-bottom: 1px solid var(--line);
    }

    .od2-row:last-child {
      border-bottom: 0;
    }

    .od2-row > span {
      flex: 0 0 auto;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
    }

    .od2-row > b {
      color: var(--text);
      text-align: right;
      font-size: 14.5px;
      font-weight: 850;
    }

    /* 参考时效的第二行（剩余根数 / 到期时刻）跟在主值下面，弱化一档。 */
    .od2-row-sub {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 11.5px;
      font-weight: 800;
    }

    .od2-tgts {
      text-align: right;
    }

    .od2-tgts div {
      margin: 2px 0;
      color: var(--text);
      font-size: 13px;
      font-weight: 850;
    }

    .od2-tgts .target-achieved {
      color: #047857;
    }

    .od-acts {
      display: flex;
      gap: 10px;
      margin-top: 18px;
    }

    .od-acts .btn {
      flex: 1;
      text-align: center;
    }

    .od-acts .btn.active {
      border-color: #bae6fd;
      background: var(--brand-soft);
      color: var(--brand);
    }

    .txtdn {
      color: var(--down);
    }

    .factor-bar span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #38bdf8, #0369a1);
    }

    .plan-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 9px 0;
      border-bottom: 1px dashed var(--line);
      font-size: 13px;
      line-height: 1.45;
    }

    .plan-row:last-child {
      border-bottom: 0;
    }

    .plan-row span {
      color: var(--muted);
      font-weight: 850;
    }

    .plan-row strong {
      text-align: right;
      font-weight: 950;
    }

    .message-settings-sheet {
      background: #f7f9fc;
    }

    .message-settings-body {
      display: grid;
      gap: 10px;
      padding-bottom: calc(84px + env(safe-area-inset-bottom));
    }

    .settings-hero {
      display: grid;
      gap: 12px;
      margin: 0;
      padding: 14px;
      border: 1px solid var(--line-strong);
      border-radius: 12px;
      background: linear-gradient(180deg, #ffffff, #f8fbff);
      box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
    }

    .settings-hero-main {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 12px;
    }

    .settings-eyebrow {
      color: var(--text);
      font-size: 15px;
      font-weight: 850;
    }

    .settings-status {
      margin-top: 2px;
      font-size: 13px;
      line-height: 1.3;
      font-weight: 700;
      color: var(--muted);
    }

    .settings-status.on {
      color: var(--brand);
    }

    .settings-status.off {
      color: #64748b;
    }

    .settings-switch {
      position: relative;
      width: 58px;
      height: 34px;
      flex: 0 0 auto;
    }

    .settings-switch input {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      margin: 0;
    }

    .settings-switch span {
      position: absolute;
      inset: 0;
      border-radius: 999px;
      background: #cbd5e1;
      transition: background 0.18s ease;
    }

    .settings-switch span::after {
      content: "";
      position: absolute;
      top: 4px;
      left: 4px;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: var(--card);
      box-shadow: 0 2px 7px rgba(15, 23, 42, 0.22);
      transition: transform 0.18s ease;
    }

    .settings-switch input:checked + span {
      background: var(--brand);
    }

    .settings-switch input:checked + span::after {
      transform: translateX(24px);
    }

    .settings-switch input:disabled + span {
      background: #e2e8f0;
    }

    .settings-hero-row {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--line);
    }

    .settings-hero-row-title {
      font-size: 15px;
      font-weight: 850;
      color: var(--text);
    }

    .settings-hero-row-desc {
      margin-top: 2px;
      font-size: 13px;
      font-weight: 700;
      color: var(--muted);
    }

    .settings-hero-row.member-setting-locked {
      cursor: pointer;
    }

    .settings-hero-row.member-setting-locked .settings-switch {
      pointer-events: none;
    }

    .settings-card {
      margin: 0;
      padding: 13px;
      border-radius: 12px;
      box-shadow: none;
    }

    .settings-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
      gap: 8px;
    }

    #appSettingsProfiles {
      grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    }

    .settings-section-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
    }

    .settings-section-head .section-title {
      margin: 0;
    }

    .settings-section-desc {
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .settings-section-head-spaced {
      margin-top: 14px;
    }

    /* 施工单 229：折叠卡——标的留在外层共享，提醒类型（周期/等级/子开关）
       折进各自的卡片里，折叠态只占一行，避免订阅设置页越堆越长。 */
    .settings-type-card {
      padding: 0;
      /* 不设 overflow: hidden——它是 .message-settings-body（display:grid）
         的网格项，若自身 overflow 非 visible 会让「自动最小尺寸」按规范退化成
         0，网格行随之塌成边框宽度、内容被裁没。折叠动画的裁切已经由子元素
         .settings-type-body 自己的 overflow: hidden 负责，这里不需要重复。 */
    }

    .settings-type-head {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 13px;
      border: 0;
      background: transparent;
      text-align: left;
      font: inherit;
      color: inherit;
      cursor: pointer;
    }

    .settings-type-title {
      font-size: 15px;
      font-weight: 850;
      color: var(--text);
    }

    .settings-type-summary {
      margin-top: 2px;
      font-size: 12px;
      font-weight: 700;
      color: var(--muted);
    }

    .settings-type-chevron {
      flex: 0 0 auto;
      width: 18px;
      height: 18px;
      border-right: 2px solid var(--muted);
      border-bottom: 2px solid var(--muted);
      transform: rotate(-45deg);
      transition: transform 0.18s ease;
    }

    .settings-type-card.expanded .settings-type-chevron {
      transform: rotate(45deg);
    }

    /* 展开后下方已经把完整配置摊开显示，折叠态才需要的摘要文字此时是
       重复信息——只在折叠态显示，展开态隐藏。 */
    .settings-type-card.expanded .settings-type-summary {
      display: none;
    }

    .settings-type-body {
      display: grid;
      gap: 10px;
      max-height: 0;
      overflow: hidden;
      padding: 0 13px;
      transition: max-height 0.2s ease, padding 0.2s ease;
    }

    .settings-type-card.expanded .settings-type-body {
      max-height: 1200px;
      padding: 0 13px 13px;
    }

    /* 高低点/趋势量化两个策略的独立标的订阅入口——点左边设高低点，点右边设
       趋势量化，每次只展示一个面板，避免用户混淆自己在改哪个策略的推送。 */
    .settings-strategy-tabs {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 5px;
      margin-bottom: 13px;
      padding: 4px;
      border-radius: 13px;
      background: var(--bg-subtle);
    }

    .settings-strategy-tab {
      min-height: 38px;
      border: 0;
      border-radius: 10px;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .settings-strategy-tab-title {
      font-size: 14px;
      font-weight: 900;
      color: var(--muted);
    }

    .settings-strategy-tab.active {
      background: var(--card);
      box-shadow: 0 2px 7px rgba(15, 23, 42, 0.08);
    }

    .settings-strategy-tab.active .settings-strategy-tab-title {
      color: var(--brand);
    }

    .settings-row {
      display: grid;
      gap: 10px;
    }

    #appSettingsGrades {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    #appSettingsGrades .check-chip {
      height: 36px;
      min-height: 36px;
      display: grid;
      grid-template-columns: 15px max-content;
      align-items: center;
      justify-content: flex-start;
      column-gap: 6px;
      padding: 0 8px;
      font-size: 12px;
      line-height: 1;
    }

    #appSettingsGrades .check-chip input[type="checkbox"] {
      width: 15px;
      height: 15px;
      min-width: 15px;
      min-height: 15px;
      align-self: center;
      flex-basis: 15px;
      justify-self: center;
    }

    #appSettingsGrades .settings-grade-label {
      display: inline-flex;
      align-items: center;
      min-height: 17px;
      align-self: center;
      line-height: 1;
    }

    #appSettingsTrendPeriods .check-chip {
      min-height: 36px;
      padding: 0 9px;
      font-size: 12px;
    }

    .settings-sticky-actions {
      position: sticky;
      bottom: -14px;
      z-index: 3;
      margin: 2px -14px -14px;
      padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
      border-top: 1px solid var(--line);
      background: var(--surface-soft);
      backdrop-filter: blur(14px);
    }

    .settings-feedback {
      margin: 0 0 8px;
      padding: 9px 10px;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 750;
      line-height: 1.4;
    }

    .settings-feedback.error {
      color: #b91c1c;
      background: #fef2f2;
      border: 1px solid #fecaca;
    }

    .settings-feedback.success {
      color: #166534;
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
    }

    .feedback-unread-badge {
      display: inline-grid;
      min-width: 8px;
      height: 8px;
      margin-left: 4px;
      border-radius: 999px;
      background: #dc2626;
      color: #fff;
      font-size: 9px;
      font-style: normal;
      line-height: 16px;
      text-align: center;
      vertical-align: middle;
    }

    .feedback-unread-badge:not(:empty) {
      min-width: 16px;
      height: 16px;
    }

    .feedback-thread-list,
    .feedback-message-list {
      display: grid;
      gap: 9px;
      margin-top: 12px;
    }

    .feedback-thread-card {
      width: 100%;
      display: grid;
      gap: 6px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--surface);
      color: var(--text);
      text-align: left;
    }

    .feedback-thread-top,
    .feedback-detail-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .feedback-thread-preview,
    .feedback-thread-meta {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .feedback-thread-preview { font-size: 13px; }
    .feedback-thread-meta { color: var(--muted); font-size: 11px; }
    .feedback-thread-meta b { color: var(--brand); }

    .feedback-status {
      flex: 0 0 auto;
      padding: 3px 7px;
      border-radius: 999px;
      background: #eff6ff;
      color: #1d4ed8;
      font-size: 11px;
      font-style: normal;
      font-weight: 800;
    }
    .feedback-status.resolved { background: #ecfdf5; color: #047857; }
    .feedback-status.closed { background: #f1f5f9; color: #64748b; }

    .feedback-detail-head { margin: 13px 0 8px; }
    .feedback-message { padding: 10px 11px; border-radius: 12px; background: var(--bg-subtle); }
    .feedback-message.admin { background: var(--brand-soft); }
    .feedback-message span { color: var(--muted); font-size: 11px; font-weight: 750; }
    .feedback-message p { margin: 6px 0 0; color: var(--text); font-size: 13px; line-height: 1.55; }
    :root[data-theme="dark"] .feedback-message.admin {
      background: rgba(96, 165, 250, 0.16);
      border: 1px solid rgba(147, 197, 253, 0.3);
    }
    :root[data-theme="dark"] .feedback-message.admin span { color: #bfdbfe; }

    .check-chip {
      width: 100%;
      min-height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 0 11px;
      background: var(--card);
      color: #334155;
      font-size: 12px;
      font-weight: 850;
      line-height: 1.2;
      overflow: hidden;
    }
    .check-chip-label {
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .check-chip input[type="checkbox"],
    .check-chip input[type="radio"] {
      width: 18px;
      height: 18px;
      min-width: 18px;
      min-height: 18px;
      flex: 0 0 18px;
      margin: 0;
      accent-color: var(--brand);
    }

    .check-chip:has(input:checked) {
      border-color: rgba(14, 165, 233, 0.4);
      background: var(--brand-soft);
      color: #0f172a;
    }

    .check-chip.locked {
      color: #b7791f;
      background: var(--gold-bg);
      border-color: #fed7aa;
    }

    .check-chip.disabled {
      opacity: 0.52;
    }

    .check-chip input:disabled {
      cursor: not-allowed;
    }

    select {
      width: 100%;
      min-height: 44px;
      border: 1px solid var(--line-strong);
      border-radius: 10px;
      padding: 0 12px;
      background: var(--card);
      color: var(--text);
      outline: none;
    }

    .watch-status-strip {
      display: flex;
      gap: 7px;
      overflow-x: auto;
      padding-bottom: 4px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .watch-status-strip::-webkit-scrollbar {
      display: none;
    }

    .watch-profile-strip {
      display: flex;
      flex-wrap: nowrap;
      gap: 7px;
      margin-top: 9px;
      padding-top: 9px;
      overflow-x: auto;
      border-top: 1px solid var(--line);
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }

    .watch-profile-strip.expanded {
      flex-wrap: wrap;
      overflow-x: visible;
    }

    .watch-toolbar-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 0 0 auto;
    }

    .watch-market-message-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .watch-market-message-row .market-filter-strip {
      flex: 1 1 auto;
      min-width: 0;
      padding-bottom: 0;
    }

    .watch-terminal-strip {
      margin-top: 8px;
    }

    .message-center-entry {
      position: relative;
      width: 42px;
      height: 42px;
      flex: 0 0 42px;
      display: grid;
      place-items: center;
      padding: 7px;
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: #40516a;
      box-shadow: none;
    }

    .message-center-entry svg {
      width: 26px;
      height: 19.5px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .message-center-entry:active {
      transform: scale(0.96);
      color: var(--brand);
      background: transparent;
    }

    .message-unread-badge {
      position: absolute;
      top: -6px;
      right: -6px;
      min-width: 19px;
      height: 19px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 5px;
      border: 2px solid #fff;
      border-radius: 999px;
      background: var(--danger);
      color: #fff;
      font-size: 10px;
      font-weight: 950;
      line-height: 1;
    }

    .message-center-screen {
      padding-bottom: calc(22px + env(safe-area-inset-bottom));
    }

    body[data-active-screen="messageCenter"] .tabbar {
      display: none;
    }

    body[data-active-screen="messageCenter"] .app-shell {
      padding-bottom: calc(22px + env(safe-area-inset-bottom));
    }

    .message-center-head {
      position: sticky;
      z-index: 8;
      top: 0;
      min-height: 62px;
      display: grid;
      /* 返回键收窄 42→40，配合更大的列间距，让标题块不被挤到偏右。 */
      grid-template-columns: 40px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      margin: 0 -12px 12px;
      padding: 10px 12px;
      border-bottom: 1px solid var(--line);
      background: var(--card);
      backdrop-filter: blur(14px);
    }

    .message-center-back {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--card);
      color: var(--text);
      /* 原本 30px 的 ‹ 塞在 42px 方框里，视觉重量压过标题，是左上角"别扭"的主因。 */
      font-size: 24px;
      line-height: 1;
      /* 字形本身偏右，微调回光学居中。 */
      padding-right: 2px;
    }

    .message-center-head .section-title {
      font-size: 18px;
      line-height: 1.3;
    }

    .message-center-head .muted {
      /* 11px 紧贴 18px 标题，落差过大且拥挤；放大一档并拉开行距。 */
      margin-top: 3px;
      font-size: 12px;
      line-height: 1.35;
    }

    .message-center-read-all {
      min-height: 36px;
      padding: 0 10px;
      border: 0;
      border-radius: 10px;
      background: var(--brand-soft);
      color: var(--brand);
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }

    .message-center-market-tabs {
      display: grid;
      /* 市场数量随会员范围变化（1~3 个），一律单行等分；原先固定两列，
         三个市场时「商品」会被挤到第二行，白占一行高度。 */
      grid-auto-columns: minmax(0, 1fr);
      grid-auto-flow: column;
      gap: 5px;
      margin-bottom: 8px;
      padding: 4px;
      border-radius: 13px;
      background: var(--bg-subtle);
    }

    .message-center-market-tabs.single {
      grid-template-columns: 1fr;
    }

    .message-market-tab {
      min-height: 38px;
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: var(--muted);
      font-size: 13px;
      font-weight: 950;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }

    .message-market-tab.active {
      background: var(--card);
      color: var(--brand);
      box-shadow: 0 2px 7px rgba(15, 23, 42, 0.08);
    }

    /* 市场 tab 上的未读数量标识：红色小圆点数字，方便看到每个市场有多少新信号。 */
    .message-market-badge {
      display: inline-block;
      min-width: 17px;
      padding: 0 5px;
      border-radius: 999px;
      background: #ef4444;
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      line-height: 17px;
      text-align: center;
    }

    .message-center-list {
      display: grid;
      gap: 10px;
    }

    /* 消息中心筛选：一行轻量筛选条（币种胶囊 + 信号类型文字分段），不加独立按钮。 */
    .message-filter-row {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 32px;
      margin: 0 2px 10px;
    }

    .message-filter-coin {
      flex: 0 1 auto;
      min-width: 0;
      height: 30px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 0 10px 0 9px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--card);
      color: var(--text);
      font-family: inherit;
      font-size: 12.5px;
      font-weight: 900;
      white-space: nowrap;
    }

    .message-filter-coin svg {
      width: 13px;
      height: 13px;
      flex: 0 0 13px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.6;
      stroke-linecap: round;
      color: var(--muted);
    }

    .message-filter-coin-label {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .message-filter-coin.active {
      border-color: transparent;
      background: var(--brand);
      color: #fff;
    }

    .message-filter-coin.active svg {
      color: #fff;
    }

    .message-filter-clear {
      width: 16px;
      height: 16px;
      flex: 0 0 16px;
      display: grid;
      place-items: center;
      margin-left: 1px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.26);
      font-size: 10px;
      line-height: 1;
    }

    .message-filter-stages {
      flex: 0 0 auto;
      display: flex;
      gap: 2px;
      margin-left: auto;
    }

    .message-filter-stage {
      height: 30px;
      padding: 0 8px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: var(--muted);
      font-family: inherit;
      font-size: 12.5px;
      font-weight: 850;
    }

    .message-filter-stage.active {
      background: var(--brand-soft);
      color: var(--brand);
    }

    .message-filter-summary {
      margin: -2px 3px 10px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      line-height: 1.45;
    }

    .message-filter-summary b {
      color: var(--text);
    }

    /* 卡片标题里的币种名：点它只看该币种，点卡片其余位置仍打开 K 线。 */
    .message-coin-link {
      border-radius: 4px;
    }

    .message-coin-link:active {
      background: var(--brand-soft);
    }

    .message-coin-hint {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 12px;
      border-radius: 12px;
      background: var(--brand-soft);
      color: var(--brand);
      font-size: 12px;
      font-weight: 800;
    }

    .message-coin-hint span {
      flex: 1 1 auto;
    }

    .message-coin-hint button {
      flex: 0 0 auto;
      min-height: 28px;
      padding: 0 10px;
      border: 0;
      border-radius: 8px;
      background: var(--brand);
      color: #fff;
      font-family: inherit;
      font-size: 12px;
      font-weight: 900;
    }

    .message-coin-sheet .sheet-head .sheet-title {
      flex: 1 1 auto;
    }

    .message-coin-sheet .sheet-body {
      padding-bottom: calc(22px + env(safe-area-inset-bottom));
    }

    .message-coin-search {
      display: flex;
      align-items: center;
      gap: 8px;
      height: 40px;
      padding: 0 12px;
      border-radius: 12px;
      background: var(--bg-subtle);
      color: var(--muted);
    }

    .message-coin-search svg {
      width: 16px;
      height: 16px;
      flex: 0 0 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.4;
      stroke-linecap: round;
    }

    /* 要压过全局 input:not(...):not(...) 的边框、46px 高度与内衬；16px 起 iOS 聚焦才不放大。 */
    .message-coin-search input#messageCoinSearch[type="search"] {
      flex: 1 1 auto;
      min-width: 0;
      min-height: 0;
      height: 100%;
      padding: 0;
      border: 0;
      border-radius: 0;
      outline: 0;
      background: transparent;
      box-shadow: none;
      color: var(--text);
      font-family: inherit;
      font-size: 16px;
      font-weight: 700;
      -webkit-appearance: none;
      appearance: none;
    }

    .message-coin-search:focus-within {
      box-shadow: 0 0 0 2px var(--brand);
    }

    .message-coin-search input#messageCoinSearch::placeholder {
      color: var(--muted);
      font-weight: 600;
    }

    .message-coin-section {
      margin: 14px 2px 8px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
    }

    .message-coin-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .message-coin-cell {
      min-width: 0;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 4px;
      padding: 0 10px;
      border: 1px solid var(--line);
      border-radius: 11px;
      background: var(--card);
      color: var(--text);
      font-family: inherit;
      font-size: 13.5px;
      font-weight: 900;
    }

    .message-coin-cell.active {
      border-color: var(--brand);
      background: var(--brand-soft);
      color: var(--brand);
    }

    .message-coin-name {
      min-width: 0;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .message-coin-name i {
      width: 6px;
      height: 6px;
      flex: 0 0 6px;
      border-radius: 999px;
      background: var(--brand);
    }

    .message-coin-cell small {
      flex: 0 0 auto;
      color: var(--muted);
      font-size: 11.5px;
      font-weight: 800;
    }

    .message-coin-empty {
      padding: 18px 4px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      text-align: center;
    }

    .message-date-label {
      padding: 5px 3px 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
    }

    .message-history-card {
      position: relative;
      width: 100%;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: start;
      gap: 10px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: var(--card);
      color: var(--text);
      text-align: left;
      box-shadow: var(--shadow-card);
    }

    .message-history-card.unread {
      border-color: rgba(30, 111, 255, 0.23);
      background: linear-gradient(135deg, #fff, #f7faff);
    }

    :root[data-theme="dark"] .message-history-card.unread {
      background: linear-gradient(135deg, var(--card), var(--brand-soft));
    }

    .message-history-main {
      min-width: 0;
      display: grid;
      gap: 5px;
    }

    .message-history-title {
      display: flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
      font-size: 15px;
      font-weight: 950;
    }

    .message-history-title-text {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .message-unread-dot {
      width: 7px;
      height: 7px;
      flex: 0 0 7px;
      border-radius: 999px;
      background: var(--brand);
    }

    .message-history-body {
      color: #5c6a7d;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.45;
    }

    :root[data-theme="dark"] .message-history-body {
      color: var(--text-secondary);
    }

    .resonance-validity {
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    /* 已失效共振卡：右上时间、右下「已失效」标签。 */
    .message-history-side {
      align-self: stretch;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: space-between;
      gap: 6px;
    }

    .resonance-validity.expired {
      padding: 1px 8px;
      border-radius: 999px;
      background: var(--line);
      color: var(--muted);
    }

    /* 已失效共振卡整体弱化，但仍可点开详情。 */
    .message-history-card.resonance-expired {
      box-shadow: none;
    }

    .message-history-card.resonance-expired .message-history-title,
    .message-history-card.resonance-expired .message-history-body {
      opacity: 0.55;
    }

    .message-history-time {
      padding-top: 2px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      white-space: nowrap;
    }

    .message-center-more {
      margin-top: 12px;
    }

    .watch-settings-btn {
      min-height: 34px;
      padding: 0 10px;
      font-size: 12px;
      font-weight: 950;
      white-space: nowrap;
    }

    .watch-profile-strip::-webkit-scrollbar {
      display: none;
    }

    .watch-profile-strip .watch-chip {
      min-height: 34px;
      padding: 0 11px;
      font-size: 12px;
      font-weight: 900;
    }

    .watch-chip-count {
      margin-left: 4px;
      color: var(--muted);
      font-weight: 950;
    }

    .watch-chip.active .watch-chip-count {
      color: var(--brand);
    }

    .watch-chip {
      min-height: 40px;
      flex: 0 0 auto;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 0 13px;
      background: var(--card);
      color: #334155;
      font-size: 13px;
      font-weight: 950;
      white-space: nowrap;
    }

    .watch-chip.active {
      border-color: #bae6fd;
      background: var(--brand-soft);
      color: var(--brand);
    }

    .watch-chip.disabled {
      color: var(--muted);
      background: var(--surface-soft);
    }

    .watch-toggle-chip {
      border-color: #cbd5e1;
      background: var(--surface-soft);
      color: #0f172a;
    }

    .watch-card {
      position: relative;
      margin-bottom: 10px;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--card);
      color: inherit;
      text-align: left;
      box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
      overflow: hidden;
      touch-action: pan-y;
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
    }

    .watch-card-main {
      position: relative;
      z-index: 2;
      min-height: 100%;
      padding: 13px 12px 12px 15px;
      background: var(--card);
      transition: transform 0.18s ease;
      will-change: transform;
    }

    .watch-card::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      z-index: 2;
      width: 4px;
      background: var(--sig-form);
    }

    .watch-card.expired,
    .watch-card.stopped {
      opacity: 0.82;
    }

    .watch-card.expired::before,
    .watch-card.stopped::before {
      background: var(--danger);
    }

    .watch-card.target_hit {
      border-color: #bbf7d0;
    }

    .watch-card.target_hit::before {
      background: var(--sig-form);
    }

    .watch-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 9px;
    }

    .watch-symbol {
      font-size: 16px;
      font-weight: 950;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
      line-height: 1.15;
    }

    .watch-signal-line {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 6px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
      line-height: 1.45;
    }

    .watch-dot {
      width: 7px;
      height: 7px;
      flex: 0 0 auto;
      border-radius: 999px;
      background: var(--sig-form);
    }

    .watch-dot.expired,
    .watch-dot.stopped {
      background: var(--danger);
    }

    .watch-card-title {
      min-width: 0;
      flex: 1 1 auto;
    }

    /* 看板「精选」复用订阅卡片骨架：置顶按钮靠标签行右侧，价格格在进度条下方。 */
    .watch-card .tag-row {
      align-items: center;
    }

    .watch-card-actions {
      display: inline-flex;
      margin-left: auto;
    }

    /* 置顶按钮不撑高标签行，精选卡片与订阅卡片保持同高。 */
    .selected-card .watch-card-actions {
      height: 20px;
      align-items: center;
      /* 26px 按钮在 20px 行里上下各溢出 3px，下沿正好贴住进度条右端的 T3 标签（Canary 反馈 2026-10-24，
         430 及以上大屏手机）。整体上移 6px 留出间隙，不占版面、卡片不增高；手机档在下方媒体查询里另调。 */
      position: relative;
      top: -6px;
    }

    .selected-card .opportunity-pin-btn {
      width: 26px;
      height: 26px;
      flex-basis: 26px;
      padding: 4px;
    }

    .signal-card-compact-tags,
    .signal-card-compact-badge {
      display: none;
    }

    /* 手机宽度（< 430px，覆盖 320/360/375/390/393）：语境评分用紧凑写法并到信号类型 chip 同排，
       「已达 Tn」并到触发行，整卡少一行；置顶按钮与大屏一样在价格下方，进度条单独一排。
       430 及以上（大屏手机、iPad、桌面）保持原版式。 */
    @media (max-width: 429.98px) {
      .signal-card .watch-card-main {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
          "title right"
          "title actions"
          "track track"
          "foot foot";
        grid-template-rows: auto 1fr;
        column-gap: 10px;
      }

      .signal-card .watch-card-head,
      .signal-card .signal-card-progress,
      .signal-card .signal-card-progress > .tag-row {
        display: contents;
      }

      .signal-card .watch-card-title {
        grid-area: title;
      }

      .signal-card .watch-head-right {
        grid-area: right;
      }

      .signal-card .watch-card-actions {
        grid-area: actions;
        align-self: end;
        justify-self: end;
        height: auto;
        margin-left: 0;
        /* 进度条右端的 T3 小标签会伸进这一行，置顶按钮视觉上往上让 6px（不占版面，卡片不增高；再多会压到价格）。 */
        position: relative;
        top: -6px;
      }

      .signal-card .signal-card-progress > .watch-track {
        grid-area: track;
      }

      .signal-card .watch-card-main > .watch-run-row {
        grid-area: foot;
      }

      .signal-card .signal-card-compact-tags {
        display: contents;
      }

      /* 信号类型 chip 与紧凑评分固定在标的名下方同一排（零高换行项把它们推到第二排）。 */
      .signal-card .watch-symbol {
        row-gap: 3px;
      }

      .signal-card .watch-symbol::before {
        content: "";
        order: 1;
        flex-basis: 100%;
        height: 0;
      }

      .signal-card .watch-symbol .op-signal-chip,
      .signal-card .watch-symbol .tag {
        order: 2;
      }

      .signal-card .watch-symbol .tag {
        min-height: 20px;
        padding: 0 7px;
        border-radius: 7px;
        font-size: 11px;
        white-space: nowrap;
      }

      .signal-card .signal-card-compact-badge {
        display: inline-flex;
        flex: 0 0 auto;
      }

      .signal-card .watch-signal-line {
        flex-wrap: wrap;
        row-gap: 4px;
      }

      .signal-card .signal-card-progress > .tag-row > .tag,
      .signal-card .signal-card-progress > .tag-row > .op-progress-tag {
        display: none;
      }
    }

    /* 320 小屏：标题列更窄，收紧标签内边距与间距（字号不变），让信号类型与紧凑评分仍在同一排。 */
    @media (max-width: 349.98px) {
      .signal-card .watch-card-main {
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas:
          "title right right"
          "line line actions"
          "track track track"
          "foot foot foot";
        /* 触发行两种卡片都预留置顶按钮的 26px 行高，订阅卡片（无置顶）与精选同高。 */
        grid-template-rows: auto minmax(26px, auto) auto auto;
        column-gap: 8px;
      }

      /* 触发行（含「已达 Tn」）几乎跨整卡宽度，置顶按钮在这一行最右侧、垂直居中。 */
      .signal-card .watch-card-actions {
        align-self: center;
        top: 0;
      }

      /* 这一档置顶按钮和 T3 标签上下紧挨，进度条多让出 6px（订阅卡片同样加，两种卡片仍同高）。 */
      .signal-card .signal-card-progress > .watch-track {
        margin-top: 20px;
      }

      .signal-card .watch-card-title {
        display: contents;
      }

      .signal-card .watch-symbol {
        grid-area: title;
      }

      .signal-card .watch-signal-line {
        grid-area: line;
        align-self: center;
        margin-top: 0;
      }

      .signal-card .watch-symbol {
        column-gap: 4px;
      }

      .signal-card .watch-symbol .op-signal-chip {
        gap: 3px;
        padding: 0 5px;
      }

      .signal-card .watch-symbol .tag {
        padding: 0 5px;
      }

      /* 退出 / 提醒(入场) / 目标三列：字号缩到 10px、列宽按内容并两端分布，6 位整数价格也不折行。 */
      .signal-card .watch-run-row {
        grid-template-columns: repeat(3, auto);
        justify-content: space-between;
        gap: 6px;
        font-size: 10px;
      }

      .signal-card .watch-run-row span {
        white-space: nowrap;
      }
    }

    .selected-card.locked-premium .watch-card-main {
      filter: blur(0.4px);
      opacity: 0.42;
    }

    .selected-card .lockmask {
      z-index: 3;
    }

    .watch-head-right {
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
      gap: 6px;
      flex: 0 0 auto;
    }

    .watch-current {
      max-width: 116px;
      color: var(--text);
      text-align: right;
      font-size: 13px;
      font-weight: 950;
      line-height: 1.35;
    }

    .watch-price,
    .watch-pct {
      display: block;
      white-space: nowrap;
    }

    .watch-pct.up {
      color: var(--up);
    }

    .watch-pct.down {
      color: var(--down);
    }

    .watch-pct.flat {
      color: var(--muted);
    }

    .watch-track {
      position: relative;
      height: 9px;
      /* T1/T2/T3 小标签借用上一行右侧的空白，卡片高度基本不变（只多 2px）。 */
      margin: 14px 2px 9px;
      border-radius: 999px;
      background: #e2e8f0;
      overflow: visible;
    }

    .watch-track-fill {
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #38bdf8, var(--brand));
    }

    /* T1/T2/T3：刻度上方带小标签；未达灰框，已达品牌蓝实心，最后一档达成用金色。 */
    .watch-track-target {
      position: absolute;
      top: -2px;
      width: 3px;
      height: 13px;
      border-radius: 2px;
      background: #94a3b8;
      transform: translateX(-50%);
    }

    .watch-track-target b {
      position: absolute;
      bottom: 13px;
      left: 50%;
      padding: 0 4px;
      border: 1px solid var(--line-strong);
      border-radius: 5px;
      background: var(--card);
      color: var(--muted);
      font-size: 9.5px;
      font-weight: 800;
      line-height: 12px;
      white-space: nowrap;
      transform: translateX(-50%);
    }

    .watch-track-target:last-of-type b {
      left: auto;
      right: -2px;
      transform: none;
    }

    .watch-track-target.hit {
      background: var(--brand);
    }

    .watch-track-target.hit b {
      border-color: var(--brand);
      background: var(--brand);
      color: #fff;
    }

    .watch-track-target.final {
      background: var(--gold);
    }

    .watch-track-target.final b {
      border-color: var(--gold);
      background: var(--gold);
    }

    .watch-track-exit {
      position: absolute;
      top: -2px;
      left: 0;
      width: 3px;
      height: 13px;
      border-radius: 2px;
      background: #475569;
    }

    .watch-track-entry {
      position: absolute;
      top: -4px;
      width: 2px;
      height: 17px;
      border-radius: 999px;
      background: #0f172a;
      transform: translateX(-50%);
    }

    .watch-track-pin {
      position: absolute;
      top: 50%;
      width: 13px;
      height: 13px;
      border: 2px solid #fff;
      border-radius: 999px;
      background: var(--danger);
      box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
      transform: translate(-50%, -50%);
    }

    .watch-run-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 7px;
      color: #64748b;
      font-size: 11px;
      font-weight: 800;
    }

    .watch-run-row span {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    /* 三列按固定顺序（退出 / 提醒或入场 / 目标）配色块，和进度条上的标记对应。 */
    .watch-run-row span::before {
      content: "";
      display: inline-block;
      width: 7px;
      height: 7px;
      margin-right: 4px;
      border-radius: 2px;
      vertical-align: 1px;
    }

    .watch-run-row span:nth-child(1) {
      color: #475569;
    }

    .watch-run-row span:nth-child(1)::before {
      background: #475569;
    }

    .watch-run-row span:nth-child(2) {
      color: var(--text);
    }

    .watch-run-row span:nth-child(2)::before {
      width: 3px;
      border-radius: 1px;
      background: var(--text);
    }

    .watch-run-row span:nth-child(3) {
      color: var(--brand);
    }

    .watch-run-row span:nth-child(3)::before {
      background: var(--brand);
    }

    :root[data-theme="dark"] .watch-track-exit,
    :root[data-theme="dark"] .watch-run-row span:nth-child(1)::before {
      background: #94a3b8;
    }

    :root[data-theme="dark"] .watch-run-row span:nth-child(1) {
      color: #94a3b8;
    }

    /* 浮动盈亏挪到"运行进展"标题同一行、进度条右上角，跟退出/入场/目标
       （进度条下方的 watch-run-row）分开，呼应列表卡片头部 watch-current
       的位置感。参考时效同理，把"有效窗口"这个和标题重复的子标签去掉，
       直接把时长/剩余值放到"参考时效"标题右侧。 */
    .watch-progress-title,
    .watch-validity-title {
      display: flex;
      justify-content: space-between;
    }

    .watch-progress-title {
      align-items: center;
    }

    .watch-validity-title {
      align-items: flex-start;
      gap: 12px;
    }

    .watch-validity-title strong {
      flex: 0 0 auto;
      color: var(--text);
      text-align: right;
      font-size: 14.5px;
      font-weight: 850;
    }

    .watch-limit-note {
      margin: 10px 2px 0;
      padding: 10px 12px;
      border: 1px solid #fed7aa;
      border-radius: 12px;
      background: var(--gold-bg);
      color: #9a3412;
      font-size: 12px;
      font-weight: 850;
      text-align: center;
    }

    .watch-empty {
      min-height: 160px;
      display: grid;
      place-items: center;
      padding: 18px;
      text-align: center;
      color: var(--muted);
      line-height: 1.6;
    }

    .event-list {
      margin-top: 10px;
    }

    .signal-list-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .signal-list-head .section-title {
      margin-bottom: 0;
    }

    .market-signal-card {
      margin-top: 8px;
    }

    /* 手机版 K 线页通栏（产品负责人 2026-10-27，参考 BN）：
       去掉卡片边框、圆角和左右留白，顶栏 / 图表 / 信号表三块之间只用一条细线分隔，
       省下的宽度和缝隙都给 K 线。桌面版式仍保持卡片分栏。 */
    body:not([data-layout="desktop"]) #marketDetailView {
      margin: 0 -12px;
      background: var(--card);
    }

    body:not([data-layout="desktop"]) #marketDetailView .kline-sticky-stack {
      margin: -2px 0 0;
      padding: 2px 12px 8px;
    }

    body:not([data-layout="desktop"]) #marketDetailView > .card {
      margin: 0;
      padding-left: 12px;
      padding-right: 12px;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }

    body:not([data-layout="desktop"]) #marketDetailView > .market-signal-card,
    body:not([data-layout="desktop"]) #marketDetailView > #periodGateCard {
      border-top: 1px solid var(--line);
    }

    body:not([data-layout="desktop"]) #marketDetailView .chart-card {
      padding-bottom: 0;
    }

    body:not([data-layout="desktop"]) #marketDetailView .app-chart {
      width: calc(100% + 24px);
      margin-left: -12px;
      margin-right: -12px;
      border-bottom: 0;
    }

    @media (min-width: 380px) {
      body:not([data-layout="desktop"]) #marketDetailView .app-chart {
        height: 315px;
      }
    }

    @media (max-width: 349.98px) {
      body:not([data-layout="desktop"]) #marketDetailView .app-chart {
        height: 250px;
      }
    }

    .signal-filter-btn {
      flex: 0 0 auto;
      min-height: 30px;
      padding: 0 10px 0 6px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--surface-soft);
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      white-space: nowrap;
    }

    .signal-filter-btn.active {
      border-color: #bfdbfe;
      background: var(--brand-soft);
      color: var(--brand);
    }

    .signal-filter-switch {
      position: relative;
      width: 28px;
      height: 16px;
      border-radius: 999px;
      background: #cbd5e1;
      box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
      transition: background 0.18s ease;
    }

    .signal-filter-switch::after {
      content: "";
      position: absolute;
      top: 2px;
      left: 2px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--card);
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22);
      transition: transform 0.18s ease;
    }

    .signal-filter-btn.active .signal-filter-switch {
      background: var(--brand);
    }

    .signal-filter-btn.active .signal-filter-switch::after {
      transform: translateX(12px);
    }

    .event-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: 44px;
      border-bottom: 1px solid var(--line);
      font-size: 13px;
    }

    .event-row:last-child {
      border-bottom: 0;
    }

    .signal-table {
      width: 100%;
      border-collapse: collapse;
    }

    .signal-table th {
      padding: 10px 4px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      text-align: left;
      white-space: nowrap;
    }

    .signal-table td {
      padding: 11px 4px;
      border-top: 1px solid var(--line);
      font-size: 12px;
      font-weight: 800;
      vertical-align: middle;
      white-space: nowrap;
    }

    .signal-table th:first-child,
    .signal-table td:first-child {
      padding-left: 0;
    }

    .signal-table th:last-child,
    .signal-table td:last-child {
      padding-right: 0;
    }

    .signal-table tr.clickable {
      cursor: pointer;
    }

    .signal-table tr.clickable:active td,
    .signal-table tr.focused td {
      background: var(--brand-soft);
    }

    .signal-table .right {
      text-align: right;
    }

    .signal-more-btn {
      width: 100%;
      min-height: 38px;
      margin-top: 10px;
      border: 1px solid #bfdbfe;
      border-radius: 12px;
      background: var(--brand-soft);
      color: var(--brand);
      font-size: 13px;
      font-weight: 900;
    }

    .signal-more-btn.disabled,
    .signal-more-btn:disabled {
      border-color: var(--line);
      background: var(--surface-soft);
      color: var(--muted);
      cursor: default;
    }

    .signal-type-dot {
      width: 8px;
      height: 8px;
      display: inline-block;
      margin-right: 7px;
      border-radius: 50%;
      vertical-align: 1px;
      background: var(--sig-gone);
    }

    .signal-type-dot.form { background: var(--sig-form); }
    .signal-type-dot.warn { background: var(--sig-warn); }
    .signal-type-dot.gone { background: var(--sig-gone); }
    .signal-type-dot.pos-0 { background: var(--pos-0); }
    .signal-type-dot.pos-4 { background: var(--pos-4); }
    .signal-type-dot.pos-6 { background: var(--pos-6); }
    .signal-type-dot.pos-10 { background: var(--pos-10); }

    /* 「最近高低点信号」里参与了共振的形成信号：信号类型后的「共振」小标签，点开共振详情。
       窄屏放不下时标签折到信号类型下一行，不把整张表撑出横向滚动。 */
    .signal-table td.signal-type-resonance {
      white-space: normal;
    }

    .signal-type-label {
      white-space: nowrap;
    }

    .signal-resonance-chip {
      display: inline-flex;
      align-items: center;
      margin-left: 4px;
      padding: 1px 4px;
      border: 1px solid var(--brand);
      border-radius: 5px;
      background: var(--brand-soft);
      color: var(--brand);
      font-family: inherit;
      font-size: 10px;
      font-weight: 900;
      line-height: 1.2;
      vertical-align: 1px;
      cursor: pointer;
    }

    /* 共振详情顶部「多币种 / 多周期」切换：只在同一信号两种共振都有时出现（K 线页入口）。 */
    .resonance-kind-switch {
      display: flex;
      gap: 3px;
      margin: 10px 14px 0;
      padding: 3px;
      border-radius: 10px;
      background: var(--surface-soft);
    }

    .resonance-kind-switch button {
      flex: 1;
      min-height: 30px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: var(--muted);
      font-family: inherit;
      font-size: 12px;
      font-weight: 900;
    }

    .resonance-kind-switch button.active {
      background: var(--card);
      color: var(--brand);
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
    }

    .signal-grade-chip {
      min-width: 24px;
      min-height: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid transparent;
      border-radius: 999px;
      padding: 0 7px;
      font-size: 11px;
      font-weight: 950;
      line-height: 1;
      white-space: nowrap;
    }

    .signal-grade-chip.grade-S {
      border-color: #facc15;
      background: #fef9c3;
      color: #a16207;
    }

    .signal-grade-chip.grade-A {
      border-color: #fecaca;
      background: #fee2e2;
      color: var(--danger);
    }

    .signal-grade-chip.grade-B {
      border-color: #99f6e4;
      background: #ccfbf1;
      color: #0f766e;
    }

    .signal-grade-chip.grade-C {
      border-color: #fed7aa;
      background: #ffedd5;
      color: #d97706;
    }

    .signal-grade-chip.locked {
      background: var(--surface-soft);
      border-color: var(--line);
      color: var(--muted);
    }

    .signal-grade-empty {
      color: var(--muted);
      font-weight: 900;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 0 8px;
      border-radius: 999px;
      background: var(--bg-subtle);
      color: #334155;
      font-size: 12px;
      font-weight: 900;
    }

    .profile {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .avatar {
      width: 52px;
      height: 52px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      background: linear-gradient(135deg, #e0f2fe, #ecfeff);
      color: var(--brand);
      font-size: 20px;
      font-weight: 900;
      overflow: hidden;
    }

    .avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .name {
      font-size: 17px;
      font-weight: 900;
      line-height: 1.35;
    }

    .muted {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .membership-card {
      color: #fff;
      background: linear-gradient(120deg, #0f4778, #0ea5e9);
      border: 0;
    }

    .membership-card.free {
      color: var(--text);
      background: var(--card);
      border: 1px solid var(--line);
    }

    .membership-card.gold {
      color: #7c2d12;
      background: linear-gradient(135deg, #fff7ed, #fffdf6);
      border: 1px solid #f3d08a;
    }

    .membership-card.expired {
      color: #4b5563;
      background: #f3f4f6;
      border: 1px solid var(--line-strong);
    }

    .membership-soon {
      margin-bottom: 10px;
      padding: 10px 12px;
      border: 1px solid #fed7aa;
      border-radius: 12px;
      background: var(--gold-bg);
      color: #9a3412;
      font-size: 12px;
      font-weight: 850;
      line-height: 1.5;
    }

    .membership-label {
      margin-bottom: 5px;
      font-size: 12px;
      font-weight: 800;
      opacity: 0.82;
    }

    .membership-tier {
      margin-bottom: 4px;
      font-size: 24px;
      font-weight: 950;
      letter-spacing: 0;
    }

    .membership-action {
      margin-top: 14px;
      min-width: 112px;
      background: var(--brand);
      color: #fff;
      border: 0;
    }

    .membership-card.gold .membership-action,
    .membership-action.gold {
      background: #7c2d12;
      color: #fff7ed;
    }

    #nationalDayClaimCard {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
    }
    .national-day-entry-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; }
    .national-day-entry-copy strong { color: var(--text); font-size: 14px; line-height: 1.25; }
    .national-day-entry-copy span { color: var(--muted); font-size: 11px; line-height: 1.25; }
    #nationalDayClaimCard .btn {
      flex: 0 0 auto;
      min-height: 34px;
      padding: 0 11px;
      border: 1px solid #e3c18b;
      border-radius: 9px;
      background: #fff8ed;
      box-shadow: none;
      color: #824121;
      font-size: 12px;
    }

    /* 施工单 244：独立于底部 sheet 的居中体验领取弹窗。 */
    .trial-claim-overlay {
      position: fixed;
      inset: 0;
      z-index: 240;
      display: grid;
      place-items: center;
      padding: 24px;
      background: var(--overlay);
      overscroll-behavior: contain;
    }

    .trial-claim-modal {
      position: relative;
      width: min(100%, 260px);
      overflow: hidden;
      border: 1px solid #e9bd68;
      border-radius: 15px;
      background: var(--card);
      box-shadow: 0 20px 48px rgba(69, 32, 7, 0.25);
      color: #4a2411;
    }

    .trial-claim-modal-hero { padding: 16px 35px 13px 15px; background: linear-gradient(135deg, #fff7ed 0%, #f9dfa4 52%, #f3d086 100%); }
    .trial-claim-modal-kicker { margin-bottom: 4px; color: #9a4f14; font-size: 8px; font-weight: 850; letter-spacing: 0.08em; }
    .trial-claim-modal h2 { margin: 0; color: #7c2d12; font-size: 17px; font-weight: 950; letter-spacing: -0.02em; }
    .trial-claim-modal-hero p { margin: 5px 0 0; color: #8a4314; font-size: 9px; font-weight: 700; line-height: 1.5; }

    .trial-claim-modal-close {
      position: absolute; z-index: 1; top: 8px; right: 8px; width: 21px; height: 21px;
      border: 1px solid rgba(124, 45, 18, 0.2); border-radius: 50%; background: rgba(255, 255, 255, 0.58);
      color: #7c2d12; font-size: 15px; line-height: 1;
    }

    .trial-claim-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 11px 12px 9px; }
    .trial-claim-benefit {
      display: grid; grid-template-columns: 19px minmax(0, 1fr); align-items: center; gap: 5px; min-height: 36px; padding: 6px;
      border: 1px solid #f1dfbd; border-radius: 8px; background: #fffaf1; color: #713717; font-size: 8px; font-weight: 850; line-height: 1.35;
    }
    .trial-claim-benefit svg {
      width: 19px; height: 19px; padding: 3px; border-radius: 6px; background: #fff0cf; fill: none; stroke: #a14e13;
      stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8;
    }
    .trial-claim-modal-action {
      display: block; width: calc(100% - 24px); min-height: 31px; margin: 0 12px; border: 0; border-radius: 9px;
      background: #7c2d12; box-shadow: 0 7px 14px rgba(124, 45, 18, 0.2); color: #fff7ed; font-size: 11px; font-weight: 900;
    }
    .trial-claim-modal-action:disabled { opacity: 0.66; cursor: wait; }
    .trial-claim-modal-note { margin: 7px 12px 11px; color: #9b7858; font-size: 7px; line-height: 1.45; text-align: center; }

    /* 国庆老用户礼：放大主信息，权益压成一行，避免双卡片留下大片空白。 */
    .national-day-modal {
      width: min(100%, 328px);
      border: 1px solid #e7cc9e;
      border-radius: 21px;
      background: #fffdf8;
      box-shadow: 0 22px 60px rgba(47, 28, 20, 0.25);
    }
    .national-day-modal .trial-claim-modal-hero {
      position: relative;
      min-height: 144px;
      padding: 23px 20px 20px;
      background: radial-gradient(circle at 98% 4%, rgba(246, 208, 133, 0.47), transparent 48%),
        linear-gradient(145deg, #fffaf0, #f9e8c4);
      border-bottom: 1px solid #efdcb7;
    }
    .national-day-modal .trial-claim-modal-kicker {
      display: inline-block;
      margin: 0;
      padding: 5px 9px;
      border-radius: 6px;
      background: #7e2e1d;
      color: #fff6e5;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.06em;
    }
    .national-day-modal h2 {
      margin-top: 13px;
      color: #672618;
      font-size: 25px;
      line-height: 1.15;
      letter-spacing: -0.03em;
    }
    .national-day-modal .trial-claim-modal-hero p {
      position: relative;
      z-index: 1;
      max-width: 265px;
      margin-top: 9px;
      color: #724a35;
      font-size: 12.5px;
      font-weight: 600;
      line-height: 1.55;
    }
    .national-day-modal .trial-claim-modal-close {
      top: 13px;
      right: 13px;
      width: 29px;
      height: 29px;
      border-color: #e1cba5;
      background: rgba(255, 253, 247, 0.85);
      color: #80412b;
      font-size: 20px;
    }
    .national-day-perks {
      display: flex;
      justify-content: center;
      gap: 0;
      padding: 17px 21px 13px;
      color: #6b4632;
    }
    .national-day-perk { white-space: nowrap; font-size: 12px; font-weight: 750; }
    .national-day-perk + .national-day-perk { margin-left: 15px; padding-left: 15px; border-left: 1px solid #ddc7a9; }
    .national-day-modal .trial-claim-modal-action {
      width: calc(100% - 42px);
      min-height: 45px;
      margin: 0 21px;
      border-radius: 11px;
      background: #842f1e;
      color: #fffaf1;
      box-shadow: 0 7px 14px rgba(102, 38, 24, 0.17);
      font-size: 14px;
    }
    .national-day-modal .trial-claim-modal-note {
      margin: 11px 15px 16px;
      color: #987c67;
      font-size: 10px;
      line-height: 1.4;
    }

    .membership-card.expired .membership-action {
      background: #4b5563;
      color: #fff;
    }

    #membershipCard {
      padding: 18px;
      border: 0;
      border-radius: 18px;
      box-shadow: none;
    }

    #membershipCard.free {
      color: #0f4778;
      background: linear-gradient(135deg, #eef3ff, #e0ebff);
    }

    #membershipCard.gold {
      color: #5c3d0a;
      background: linear-gradient(135deg, #fff3d6, #f3d086);
    }

    #membershipCard.expired {
      color: #6b7280;
      background: linear-gradient(135deg, #eef1f5, #e3e7ee);
    }

    #membershipCard .membership-label {
      display: none;
    }

    #membershipCard .membership-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    #membershipCard .membership-tier {
      margin: 0;
      color: #0f4778;
      font-size: 22px;
      font-weight: 950;
      line-height: 1.25;
    }

    #membershipCard.gold .membership-tier::before {
      content: "\265B";
      margin-right: 8px;
      font-size: 1.08em;
      opacity: 0.95;
    }

    #membershipCard.gold .membership-tier {
      color: #5c3d0a;
    }

    #membershipCard.expired .membership-tier {
      color: #6b7280;
    }

    #membershipCard #membershipExpire {
      margin: 6px 0 0;
      color: rgba(15, 71, 120, 0.72);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.45;
    }

    #membershipCard.gold #membershipExpire {
      color: rgba(92, 61, 10, 0.72);
    }

    #membershipCard.expired #membershipExpire {
      color: #7a818c;
    }

    #membershipCard .membership-action {
      min-height: 40px;
      margin-top: 14px;
      padding: 0 16px;
      border-radius: var(--radius-btn);
      font-size: 14px;
      font-weight: 900;
    }

    #membershipCard .membership-badge {
      padding: 3px 8px;
      border: 1px solid rgba(92, 61, 10, 0.22);
      border-radius: 999px;
      color: #5c3d0a;
      background: rgba(255, 255, 255, 0.42);
      font-size: 11px;
      font-weight: 900;
      line-height: 1.25;
    }

    #membershipCard.free .membership-badge,
    #membershipCard.expired .membership-badge {
      display: none;
    }

    #membershipCard .membership-scope-line {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid color-mix(in srgb, var(--lv) 24%, transparent);
      color: var(--lv-ink);
      font-size: 13px;
      font-weight: 800;
    }

    #membershipCard .membership-market-chip {
      display: inline-flex;
      margin-left: 4px;
      padding: 2px 7px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--lv) 20%, transparent);
      color: var(--lv-ink);
      font-size: 11px;
      font-weight: 900;
      line-height: 1.35;
    }

    #membershipCard .membership-change-market {
      padding: 0;
      border: 0;
      color: var(--lv-ink);
      background: transparent;
      font: inherit;
      font-weight: 900;
      cursor: pointer;
    }

    #membershipCard .membership-change-market:disabled {
      opacity: 0.62;
      cursor: not-allowed;
    }

    #membershipCard .membership-scope-hint {
      margin-top: 6px;
      color: inherit;
      opacity: 0.72;
    }

    .membership-screen {
      padding-bottom: 12px;
    }

    .membership-page-head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 2px 0 12px;
    }

    .membership-page-head .kline-back {
      width: 32px;
      height: 32px;
      flex: 0 0 32px;
    }

    .membership-page-head .section-title {
      font-size: 20px;
      font-weight: 950;
      line-height: 32px;
    }

    .membership-benefit-card {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .membership-benefits {
      width: 100%;
      table-layout: fixed;
      font-size: 11px;
    }

    .membership-benefits th,
    .membership-benefits td {
      padding: 8px 2px;
      word-break: break-word;
    }

    .membership-benefits th:first-child,
    .membership-benefits td:first-child {
      width: 28%;
    }

    .membership-purchase-area {
      margin-bottom: 10px;
    }

    .membership-purchase-card {
      display: grid;
      gap: 12px;
    }

    .membership-purchase-disabled {
      border-color: #dbe4f0;
      background: var(--surface-soft);
    }

    .membership-choice-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .membership-choice-grid.compact {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .membership-choice,
    .membership-channel {
      min-height: 64px;
      padding: 10px 8px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--card);
      color: var(--text);
      text-align: left;
    }

    .membership-choice strong,
    .membership-channel strong {
      display: block;
      font-size: 14px;
      font-weight: 950;
      line-height: 1.25;
    }

    .membership-choice span,
    .membership-channel span {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 750;
      line-height: 1.25;
    }

    .membership-choice.active,
    .membership-channel.active {
      border-color: #f1cf86;
      background: #fff8e6;
      color: #7c4a03;
    }

    .membership-channel.disabled {
      background: var(--surface-soft);
      color: var(--muted);
    }

    .membership-price-line,
    .membership-order-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 10px;
      background: var(--surface-soft);
      font-size: 13px;
    }

    .membership-price-line span,
    .membership-order-row strong {
      color: #7c4a03;
      font-weight: 950;
      text-align: right;
    }

    .membership-pay-methods {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .membership-order-panel {
      display: grid;
      gap: 10px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--card);
    }

    .membership-order-panel.active {
      border-color: #f1cf86;
      background: #fffdf6;
    }

    .membership-payment-info {
      display: grid;
      gap: 8px;
      padding: 12px;
      border: 1px solid var(--line-strong);
      border-radius: 12px;
      background: var(--card);
    }

    .membership-payment-info.unavailable {
      background: var(--surface-soft);
    }

    .membership-payment-info code {
      display: block;
      padding: 8px;
      overflow-wrap: anywhere;
      border-radius: 8px;
      background: var(--surface-soft);
      color: var(--text);
      font-size: 12px;
    }

    .membership-address-box {
      position: relative;
    }

    .membership-address-box code {
      padding-right: 58px;
      min-height: 40px;
    }

    .membership-address-box button {
      position: absolute;
      top: 4px;
      right: 4px;
      min-width: 44px;
      min-height: 32px;
      padding: 0 8px;
      border: 1px solid #f1cf86;
      border-radius: 8px;
      background: #fff8e6;
      color: #7c4a03;
      font-size: 12px;
      font-weight: 950;
    }

    .membership-payment-info img {
      width: 112px;
      height: 112px;
      object-fit: contain;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--card);
    }

    .membership-proof-box {
      display: grid;
      gap: 8px;
    }

    .membership-proof-preview img {
      display: block;
      max-width: 140px;
      max-height: 140px;
      width: auto;
      height: auto;
      object-fit: cover;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--card);
    }

    .membership-contact-line,
    .membership-exchange-uid {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-size: 13px;
    }

    .membership-exchange-uid code {
      flex: 1;
      text-align: right;
      -webkit-user-select: text;
      user-select: text;
      -webkit-touch-callout: default;
    }





    /* 会员购买区的三组网格（档位 / 周期 / 支付通道）在任何宽度下都保持三列。
       此处原有一条 `@media (max-width: 380px) { grid-template-columns: 1fr }`：
       iPhone 视口是 390/393/430 永远不命中，而安卓国产机普遍 360dp（用户再开
       「显示大小=大」会更窄）必然命中，于是同一个页面在安卓上塌成单列、在 iOS 上
       是三列。实测 320px 极端窄屏下三列每格仍有 83px、文档不溢出，只是
       「USDT-TRC20」折两行，观感远好于单列，故直接取消塌陷。窄屏靠下面的字号
       收缩来兜底，不再改列数。 */
    @media (max-width: 340px) {
      .membership-choice strong,
      .membership-channel strong {
        font-size: 13px;
      }
    }

    .profile-card {
      margin-top: 8px;
    }

    .profile-card.member {
      border-color: #f1cf86;
      background: linear-gradient(135deg, #fff7db 0%, #f7d88d 100%);
      box-shadow: 0 12px 34px rgba(161, 98, 7, 0.12);
    }

    .profile-card.member .avatar {
      background: rgba(255, 255, 255, 0.52);
      color: #9a5f0a;
    }

    .profile-card.member .name,
    .profile-card.member .muted,
    .profile-card.member .profile-tier.member {
      color: #7c4a03;
    }

    .profile-card.expired {
      background: linear-gradient(135deg, #f8fafc, #eef1f5);
    }

    .profile-tier {
      margin-top: 5px;
      font-size: 12px;
      font-weight: 850;
    }

    .profile-tier.free {
      color: var(--muted);
    }

    .profile-tier.member {
      color: var(--gold);
    }

    .profile-tier.expired {
      color: #6b7280;
    }

    .logout-btn {
      margin-top: 14px;
      border-color: #fecaca;
      color: var(--danger);
    }

    .native-app-update {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      width: 100%;
      min-height: 44px;
      margin: 12px 0 2px;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--muted);
      font: inherit;
      cursor: pointer;
    }

    .native-version {
      color: var(--muted);
      font-size: 12px;
      font-weight: 750;
      font-variant-numeric: tabular-nums;
    }

    .native-update-unread {
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--danger);
    }

    .row {
      min-height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      border-bottom: 1px solid var(--line);
      font-size: 14px;
      font-weight: 800;
    }

    button.row {
      width: 100%;
      border: 0;
      background: transparent;
      color: inherit;
      text-align: left;
      padding: 0;
    }

    .row:last-child {
      border-bottom: 0;
    }

    .row button {
      flex: 0 0 auto;
    }

    .chev {
      color: #94a3b8;
      font-size: 20px;
    }

    .field {
      margin-bottom: 12px;
    }

    .field label {
      display: block;
      margin-bottom: 6px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .input-row {
      display: flex;
      gap: 8px;
    }

    .auth-tabs {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 4px;
      margin-bottom: 16px;
      padding: 4px;
      border-radius: 12px;
      background: var(--bg-subtle);
    }

    .auth-tab {
      min-height: 38px;
      border: 0;
      border-radius: 9px;
      background: transparent;
      color: var(--muted);
      font-size: 14px;
      font-weight: 800;
    }

    .auth-tab.active {
      background: var(--card);
      color: var(--brand);
      box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
    }

    .auth-channel-tabs {
      display: flex;
      gap: 14px;
      align-items: center;
      margin: -2px 0 16px;
    }

    .auth-channel-tab {
      min-height: 28px;
      padding: 0;
      border: 0;
      border-bottom: 2px solid transparent;
      background: transparent;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
    }

    .auth-channel-tab.active {
      border-bottom-color: var(--brand);
      color: var(--brand);
    }

    .phone-input {
      display: flex;
      align-items: center;
      min-height: 46px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-btn);
      background: var(--card);
    }

    .phone-input:focus-within {
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(30, 111, 255, 0.12);
    }

    .phone-prefix {
      flex: 0 0 auto;
      padding-left: 12px;
      color: var(--text);
      font-size: 15px;
      font-weight: 800;
    }

    .phone-input input:not([type="checkbox"]):not([type="radio"]) {
      min-width: 0;
      min-height: 44px;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }

    .phone-input input:not([type="checkbox"]):not([type="radio"]):focus {
      border-color: transparent;
      box-shadow: none;
    }

    input:not([type="checkbox"]):not([type="radio"]),
    textarea {
      width: 100%;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-btn);
      background: var(--card);
      color: var(--text);
      outline: none;
    }

    input:not([type="checkbox"]):not([type="radio"]) {
      min-height: 46px;
      padding: 0 12px;
    }

    textarea {
      min-height: 110px;
      padding: 10px 12px;
      line-height: 1.5;
      resize: vertical;
    }

    input:not([type="checkbox"]):not([type="radio"]):focus,
    textarea:focus {
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(30, 111, 255, 0.12);
    }

    .btn {
      min-height: 46px;
      border: 0;
      border-radius: var(--radius-btn);
      padding: 0 14px;
      background: var(--brand);
      color: #fff;
      font-size: 14px;
      font-weight: 900;
      transition: transform 0.1s ease, background 0.16s ease, border-color 0.16s ease;
    }

    .btn:active {
      transform: scale(0.97);
    }

    .btn.block {
      width: 100%;
    }

    .btn.ghost {
      border: 1px solid var(--line-strong);
      background: var(--card);
      color: var(--text);
    }

    .btn.gold {
      background: linear-gradient(135deg, #f7d488, #e0a93f);
      color: #5a3d0a;
      box-shadow: 0 6px 16px rgba(224, 169, 63, 0.35);
    }

    .btn.danger {
      background: var(--card);
      color: var(--danger);
      border: 1px solid #fecaca;
    }

    .btn:disabled {
      cursor: not-allowed;
      opacity: 0.55;
    }

    .tabbar {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 50;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      /* 58 = 66 - 8，让内容区高度在有无安全区时都是 52px；
         直接加 inset 会与 padding-bottom 的 max(8px, …) 打架，把图标顶高 8px。 */
      min-height: calc(58px + max(8px, env(safe-area-inset-bottom)));
      padding: 6px 8px max(8px, env(safe-area-inset-bottom));
      border-top: 1px solid var(--line);
      background: var(--card);
      box-shadow: 0 -8px 26px rgba(15, 23, 42, 0.08);
      backdrop-filter: blur(14px);
    }

    body.sheet-open .tabbar {
      opacity: 0;
      pointer-events: none;
    }

    /* 弹层打开时把背景钉住：否则触摸在弹层上下滑动会穿透到背景页自己的
       滚动（订阅/看板列表）。position 由 JS 的 lockBodyScroll 配合设置 top
       偏移，保证解锁后滚动位置不跳变。 */
    body.sheet-open {
      position: fixed;
      left: 0;
      right: 0;
      width: 100%;
      overflow: hidden;
    }

    .tab {
      min-height: 50px;
      display: grid;
      place-items: center;
      gap: 3px;
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: #64748b;
      font-size: 12px;
      font-weight: 900;
    }

    .tab-icon {
      width: 24px;
      height: 24px;
      display: block;
      border-radius: 8px;
      line-height: 1;
    }

    .tab-icon svg {
      width: 24px;
      height: 24px;
      display: block;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .tab.active {
      color: var(--brand);
    }

    .tab.active .tab-icon { color: var(--brand); }

    /* 产品负责人 2026-09-15：桌面版左上角露出 HiLo 标识 + 下载二维码。
       默认不渲染——只有桌面版式的导航条顶部才有这块空地。 */
    .desktop-brand,
    .desktop-brand-pop {
      display: none;
    }

    .desktop-layout-control {
      position: fixed;
      z-index: 220;
      top: 12px;
      right: 14px;
      min-height: 34px;
      padding: 0 10px;
      border: 1px solid var(--line-strong);
      border-radius: 9px;
      background: var(--card);
      color: var(--text-secondary);
      font-size: 12px;
      font-weight: 850;
      box-shadow: var(--shadow-card);
    }

    /* 施工单 308：桌面增强完全由服务端开关 + 客户端结果双重门控；
       原生壳 resolveDesktopLayout() 恒写 mobile，因而永远不会命中本档。 */
    /* 产品负责人 2026-09-13：iPad / 折叠屏展开默认进桌面版式，但那是用手指点的，
       桌面版式里几个沿用基础样式的小控件（周期 30px、策略 30px、K线操作 34px、
       版式切换 34px）按 44px 触控基准偏小。这里只给「宽屏 + 粗指针」这一档放大——
       鼠标用户和手机都不受影响。注意：这些尺寸在手机上本来就是 30~34px，
       属产品既有取舍，此处不是修回归，是给平板单独加的照顾。 */
    @media (min-width: 1024px) and (pointer: coarse) {
      body[data-desktop-layout="enabled"][data-layout="desktop"] .desktop-layout-control {
        min-height: 44px;
        padding: 0 14px;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] #periodStrip button,
      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .strategy-toggle .seg-btn {
        min-height: 40px;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .kline-action {
        width: 40px;
        height: 40px;
      }

      /* 产品负责人 2026-09-13 第四轮反馈：「K 线放大进入全屏后周期按钮有一些被遮住」。
         上面把周期按钮放大到 40px，而全屏那条的轨道是硬编码的 flex: 0 0 30px——
         40px 的按钮塞进 30px 的槽里，下半截被裁掉。轨道跟着一起放开。 */
      body[data-desktop-layout="enabled"][data-layout="desktop"] .kline-fullscreen-stage > .period-strip {
        flex: 0 0 44px;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] .kline-fullscreen-stage > .period-strip .period-btn {
        min-height: 40px;
      }
    }

    @media (min-width: 1024px) {
      /* 产品负责人 2026-09-11 第二轮反馈：切到看板 / 订阅 / 我的时，整页不能退回
         手机版那种居中单栏——K 线要常驻右侧，左栏才是切换区。做法是把外壳变成
         两栏网格，左栏 440px 上限刚好容得下按 430px 设计的那几个页面。 */
      /* 产品负责人 2026-09-12 反馈：右栏上下滑时整个版面跟着动，不像 PC 看盘。
         桌面档改成「应用式」外壳——高度锁死一屏、页面本身不滚动，
         滚动只发生在两栏各自内部。 */
      body[data-desktop-layout="enabled"][data-layout="desktop"] {
        /* 左侧导航条宽度只此一处定义：外壳留白和弹层遮罩的左偏移都读它，
           免得两边各改各的对不上（产品负责人 2026-09-12 反馈弹层盖住了导航）。 */
        /* 产品负责人 2026-09-14 第四轮：K 线模块再向左右扩。导航只有图标 + 两字，
           84px 足够；省下的 12px 全部进内容区。 */
        --desktop-rail-width: 84px;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] .app-shell {
        max-width: none;
        margin: 0 0 0 calc(var(--desktop-rail-width) + env(safe-area-inset-left));
        /* 上下每一格都得省；第四轮起左右留白也一起收，K 线模块要更贴边。
           另加安全区：桌面版式此前只跑在浏览器里，浏览器自己的地址栏/工具栏挡着，
           这个问题一直没暴露；iPad App 横屏进桌面版后是全屏 WebView，
           顶部状态栏和底部 Home indicator 会直接压在版面上。
           env() 在浏览器里解析为 0，所以这四条对网页端没有任何影响。 */
        padding:
          calc(6px + env(safe-area-inset-top))
          calc(10px + env(safe-area-inset-right))
          calc(6px + env(safe-area-inset-bottom))
          10px;
        display: grid;
        /* 产品负责人 2026-09-13 第三轮反馈（iPad mini 横屏 1133px）：左右几乎均分，
           左栏太宽。根因是左栏此前给的是**固定像素**上限 440px——屏幕越窄它占比越大：
           1920px 宽时它只占 25%，1133px 宽时就涨到 46%，于是同样是浏览器，
           PC 看着正常、iPad 看着均分。改成「按比例取，再用像素封顶」：
           窄桌面按 32% 走，宽桌面仍封在 440px 不继续变宽。
           下限 300px 是自选列表三列（标的 / 价格 / 涨跌幅）不挤在一起的底线。 */
        grid-template-columns: minmax(300px, min(32%, 440px)) minmax(0, 1fr);
        gap: 10px;
        height: 100dvh;
        overflow: hidden;
      }

      /* 导航条是 align-content:center 的四个 tab，顶部本来就空着，标识正好落在那里，
         不参与 tab 的网格、也就不会把它们挤下去。 */
      body[data-desktop-layout="enabled"][data-layout="desktop"] .desktop-brand {
        position: fixed;
        left: env(safe-area-inset-left);
        top: env(safe-area-inset-top);
        z-index: 60;
        width: var(--desktop-rail-width);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 12px 0 8px;
        border: 0;
        background: transparent;
        cursor: pointer;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] .desktop-brand-mark {
        width: 34px;
        height: 34px;
        display: block;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] .desktop-brand-mark img {
        width: 100%;
        height: 100%;
        display: block;
        /* 源图是满幅方图（iOS 自己加圆角），网页这边得自己切。 */
        border-radius: 9px;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] .desktop-brand-word {
        font-size: 11.5px;
        font-weight: 900;
        letter-spacing: .04em;
        color: var(--text-secondary);
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] .desktop-brand:hover .desktop-brand-word {
        color: var(--brand);
      }

      /* 浮层贴着导航条右侧展开，不盖 K 线——这条沿用弹层那一轮定下的规矩。 */
      body[data-desktop-layout="enabled"][data-layout="desktop"] .desktop-brand-pop {
        position: fixed;
        left: calc(var(--desktop-rail-width) + env(safe-area-inset-left) + 8px);
        top: calc(12px + env(safe-area-inset-top));
        z-index: 230;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        width: 188px;
        padding: 14px;
        border: 1px solid var(--line-strong);
        border-radius: 14px;
        background: var(--card);
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] .desktop-brand-pop.hidden {
        display: none;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] .desktop-brand-pop-title {
        font-size: 13.5px;
        font-weight: 900;
        color: var(--text);
      }

      /* 二维码必须白底黑模块才扫得出来——深色主题下不能让它跟着反色。 */
      body[data-desktop-layout="enabled"][data-layout="desktop"] .desktop-brand-qr {
        padding: 8px;
        border-radius: 10px;
        background: #ffffff;
        line-height: 0;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] .desktop-brand-qr img {
        display: block;
        width: 132px;
        height: 132px;
        image-rendering: pixelated;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] .desktop-brand-pop-hint {
        font-size: 12px;
        color: var(--muted);
        text-align: center;
        line-height: 1.5;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] .desktop-brand-pop-link {
        font-size: 12px;
        font-weight: 800;
        color: var(--brand);
        text-decoration: none;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] .tabbar {
        top: 0;
        right: auto;
        bottom: 0;
        width: var(--desktop-rail-width);
        grid-template-columns: 1fr;
        /* 产品负责人 2026-09-12 反馈：这四个按钮按手机尺寸做的，PC 上偏小。
           行高 62→78、整体加 gap，点击目标和呼吸感都按桌面重来。 */
        grid-template-rows: repeat(4, minmax(0, 78px));
        gap: 10px;
        align-content: center;
        /* 基础样式里那份 env(safe-area-inset-bottom) 被这条覆盖掉了，这里补回来；
           左侧同理——安卓平板横屏时左边可能有安全区。 */
        /* 顶部留出 68px 给左上角的 HiLo 标识，四个 tab 仍在剩余空间里居中。 */
        padding: 68px 12px calc(18px + env(safe-area-inset-bottom));
        padding-left: calc(12px + env(safe-area-inset-left));
        border-top: 0;
        border-right: 1px solid var(--line);
        box-shadow: 8px 0 26px rgba(15, 23, 42, 0.05);
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] .tab {
        min-height: 72px;
        gap: 7px;
        font-size: 13px;
        border-radius: 14px;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] .tab-icon {
        width: 28px;
        height: 28px;
      }

      /* 产品负责人 2026-09-13 第三轮反馈：右上角这颗按钮压住了币种选择，
         而且和那一行的控件对不齐。桌面版式里它本来就不属于 K 线——它是外壳级开关，
         和左侧导航是一类。挪到导航条底部那片空白里：既不再和任何内容抢位置，
         也不用再跟 K 线行去对水平线。
         只改桌面档：宽屏平板选回手机版后没有导航条可挂，仍用基础样式的右上角。 */
      body[data-desktop-layout="enabled"][data-layout="desktop"] .desktop-layout-control {
        top: auto;
        right: auto;
        left: 12px;
        bottom: 18px;
        width: calc(var(--desktop-rail-width) - 16px);
        padding: 0 4px;
        text-align: center;
        /* 导航条收窄到 96px 后，「切换手机版」五个字按 12px 正好顶到边并折行。 */
        font-size: 11px;
        white-space: nowrap;
      }

      /* 币种按钮和左边的策略分段控件同处一行，高度对齐才不显突兀。 */
      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .kline-symbol-btn {
        min-height: 40px;
      }

      /* markets 这一层不再自己成框：无论它是不是当前 tab 都摊平成 display:contents，
         让 #marketListView 与 #marketDetailView 直接做外壳的网格项。
         不摊平的话，切到别的 tab 时整个 markets 段被 .screen{display:none} 收走，
         K 线会跟着一起消失——那正是本次要修的观感问题。 */
      body[data-desktop-layout="enabled"][data-layout="desktop"] [data-screen="markets"] {
        display: contents !important;
      }

      /* 左栏：各 screen 与行情列表叠在同一格，谁 active 谁可见。 */
      body[data-desktop-layout="enabled"][data-layout="desktop"] [data-screen]:not([data-screen="markets"]),
      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketListView {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        min-height: 0;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 4px;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketListView {
        display: none !important;
      }

      /* 产品负责人 2026-09-15：「自选/加密货币那排该置顶」「监控列表可以往上挪」。
         这一排在手机上要留出触摸滑动的余量，桌面右栏没这个需求，收掉一半。 */
      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketListView .market-tabs {
        margin-bottom: 6px;
        padding-bottom: 2px;
      }

      /* 和币种行同一个病：这一排在手机上也是吸顶条——sticky + z-index 40 +
         不透明底色 + 毛玻璃，外加一个向下延伸 6px 的不透明伪元素，
         都是为了吸顶时盖住从下面滚过的内容。桌面左栏是独立滚动的常驻栏，
         它不吸顶，这套遮挡能力就只会压住紧跟其后的监控卡片
         （产品负责人 2026-09-15 圈出的左栏重叠）。
         margin-top 那个负值更麻烦：它按 env(safe-area-inset-top) 取负，
         浏览器里是 0 看不出来，iPad App 里会把整排往上拽一个状态栏的高度。 */
      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketListView > .market-tabs {
        position: static;
        z-index: auto;
        margin-top: 0;
        padding-top: 0;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketListView > .market-tabs::before {
        display: none;
      }

      /* 产品负责人 2026-09-15 第二轮：行情页修好后，切到看板 / 订阅，同样的毛病
         原样重现。这是这套「手机吸顶条被桌面版式继承」的第三、四个现场。
         这两页的顶栏与筛选条在桌面左栏里是**真的会吸顶**的——左栏自己就是滚动容器，
         所以这里不像币种行、分类条那样整套拆掉，只拆按 env(safe-area-inset-*) 取值的
         那几项：它们在浏览器里恒等于 0，一到 iPad App 就变成真实的状态栏高度。

         .dashboard-sticky-nav 的两项各对应用户看到的一个症状：
           padding-top: max(10px, env(safe-area-inset-top)) —— App 里涨到状态栏高度，
             这就是「顶端留了很多空白」；顺带把浏览器里那 10px 也收掉，
             让看板 / 订阅的顶栏和行情页的分类条一样贴着外壳内边距起头。
           margin-top: calc(-1 * env(safe-area-inset-top)) —— App 里把整块往上拽
             一个状态栏的高度，连带后面的卡片一起上移，于是和顶栏叠在一起。 */
      body[data-desktop-layout="enabled"][data-layout="desktop"] .dashboard-sticky-nav {
        margin: 0 0 4px;
        padding: 0 0 6px;
      }

      /* 看板「精选」的筛选条在页面中段，桌面左栏滚起来时它吸顶是有用的，保留 sticky。
         但那个不透明伪元素是按手机卡片的 14px 内衬画的，向下还多探 2px——
         在桌面左栏里正好压住紧跟其后的那张卡片（和分类条 ::before 的 -6px 同一个套路）。
         上沿的 -18px 同理：吸顶时它落在滚动容器可视区之外，留着只会在未吸顶时多盖一截。 */
      body[data-desktop-layout="enabled"][data-layout="desktop"] .op-sticky-filters {
        margin: 0 0 10px;
        padding: 0 0 10px;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] .op-sticky-filters::before {
        top: 0;
        bottom: 0;
      }

      /* 同一次排查顺手扫出来的第五处：行情左栏这两条的吸顶偏移是按**手机**那一摞
         算出来的（分类条 46 + 工具条 56 = 102），而桌面档已经把分类条改成 static，
         上面那 46px 里什么都没有了——吸顶时它们会悬在半空，
         下面的内容从那道空隙里滚过去。偏移还各自叠着 env(safe-area-inset-top)，
         在 iPad App 里再往下掉一个状态栏的高度。
         桌面左栏的滚动口就从顶上开始，工具条吸在 0、表头吸在工具条高度处即可。
         这两条只影响滚动时的落位，静止版面（产品负责人已验收）一像素不动。 */
      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketListView > .market-toolbar {
        top: 0;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketListView .coin-table-head {
        /* 50px = 工具条在桌面左栏的实测高度（含 8px 上下内衬）。 */
        top: 50px;
      }

      /* 左栏比手机窄（手机是整屏 360dp，这里约 350px），而自选行的价格列与涨跌列
         是固定像素的——不收一收，第一列就只剩 150 上下，「BTCUSDT.P」会被截成
         「BTCU…」。收掉的 30px 全给标的名，桌面上六位以上的标的名才显示得完整。 */
      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketListView .coin-row {
        /* 产品负责人 2026-09-14 第五轮：价格和涨跌幅挨得太近、涨跌幅还顶出了色块。
           两列各收 2px、列间距 6 → 10，价格因此整体左移；涨跌字号另见下面一条。 */
        grid-template-columns: minmax(0, 1fr) 72px 52px;
        gap: 10px;
      }

      /* 「+5.47%」这类六字符在 14px 粗体下顶破了 52px 的色块，收到 12px 才装得下。 */
      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketListView .change-pill {
        min-width: 48px;
        padding: 8px 2px;
        font-size: 12px;
      }

      /* 同理：星标与两枚标签在窄栏里也要让路，省下的每一格都给标的名。 */
      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketListView .coin-name-line {
        gap: 3px;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketListView .coin-star {
        font-size: 17px;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketListView .market-chip {
        padding: 1px 4px;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] [data-screen="markets"].active #marketListView {
        display: block !important;
      }

      /* 施工单 308（产品负责人 2026-09-11 反馈）：第二列收成单栏——
         K 线在上、最近信号在下。原来把信号卡放第三列，既挤窄了图，
         也让 PC 看盘的主视觉不是那张图。 */
      /* 右栏：K 线常驻，跟当前选中哪个 tab 无关。
         刻意不加 position:sticky——右栏比视口高（图吃满首屏 + 下方信号列表），
         一旦左栏内容更长（订阅/看板卡片多时），粘住的右栏底部那段信号列表会
         永久滚不到。两栏一起滚虽然会把图滚走，但不会藏东西。 */
      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView,
      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView.hidden {
        grid-column: 2;
        grid-row: 1;
        display: flex !important;
        flex-direction: column;
        gap: 4px;
        height: 100%;
        min-height: 0;
        overflow: hidden;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .kline-sticky-stack,
      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView #periodGateCard {
        flex: 0 0 auto;
      }

      /* 产品负责人 2026-09-12 反馈：「高低量化 / 趋势量化」按钮偏大，还随窗口
         变宽一路拉长。桌面下把它从整行分段控件收成标的行右侧的紧凑控件——
         既不再随宽度伸缩，也顺带把原先它独占的一行高度还给 K 线。 */
      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .kline-sticky-stack {
        display: flex;
        align-items: center;
        gap: 16px;
        /* 这一行的高度由里面最高的控件（40px 触控基准）决定，卡片自己不再额外留边。
           手机上这一条是 sticky 吸顶条，带下边框和 10px 外边距；桌面右栏是固定版面，
           它既不吸顶也不需要那圈留白，全部收掉换给图。 */
        /* 产品负责人 2026-09-14 第五轮：币种按钮「有点靠右了，往左一点居中」。
           它本来是 absolute 居中的，但基准是 .kline-topbar——那一段从策略切换右边
           才开始，所以看着偏右。把定位基准提到整行上，它就落在 K 线模块的正中，
           左边策略切换、右边收藏星，三者对称。 */
        position: relative;
        /* 基础样式是 sticky + top: max(6px, env(safe-area-inset-top))。
           只把 position 换成 relative 而留着 top，元素会"向下偏移但占位不变"——
           浏览器里 env=0 偏移 6px（那 6px 错位就是它），iPad App 里 env 是真实的
           状态栏高度，一偏就是二十几 px：这一行被顶下去和图卡重叠，
           而图卡在 DOM 里靠后，正好盖住它上半截的策略切换和币种按钮。
           （产品负责人 2026-09-15 圈出来的就是这个。） */
        top: auto;
        min-height: 0;
        margin: 0;
        padding: 0;
        border-bottom: 0;
        /* iPad 用户 2026-09-15 反馈「价格被遮住」的真正原因就在这三行。
           手机上这条是 sticky 吸顶条，需要不透明底色 + z-index 28 + 毛玻璃
           去挡住从它下面滚过的内容；桌面右栏是固定版面，它压根不吸顶，
           这套遮挡能力就成了纯伤害——它和图卡有 2px 重叠，于是一块带 z-index 的
           白板正好压在价格那一行上。真机字号一大，吃掉的就不止 2px。 */
        z-index: auto;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .kline-topbar {
        position: static;
      }

      /* 产品负责人 2026-10-18 的手机顶栏改版（币种靠左、策略收进顶栏）只针对手机；
         桌面沿用 09-13/09-14 定下的「策略在左、币种居中、星在右」。 */
      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .kline-sticky-stack .strategy-card {
        display: block;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .kline-strategy-mini {
        display: none;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .kline-symbol-wrap {
        position: absolute;
        left: 50%;
        top: 2px;
        margin-right: 0;
        transform: translateX(-50%);
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .kline-symbol-btn {
        padding: 0 16px;
        font-size: 16px;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .kline-symbol-menu {
        left: 50%;
        transform: translateX(-50%);
      }

      /* 策略分段的外框自带 3px 内衬，把 40px 的按钮撑成 46px 的行高。 */
      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .strategy-toggle {
        padding: 0;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .kline-topbar {
        min-height: 0;
        margin-bottom: 0;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .kline-sticky-stack .market-detail-head {
        flex: 1 1 auto;
        min-width: 0;
      }

      /* 产品负责人 2026-09-13 反馈：放右上角会和收藏星挤在一起。挪到整行最左，
         标的名与收藏星留在右侧，两组控件不再互相干扰。 */
      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .strategy-card {
        flex: 0 0 auto;
        order: -1;
        margin-bottom: 0;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .strategy-toggle {
        width: auto;
        overflow: visible;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .strategy-toggle .seg-btn {
        flex: 0 0 auto;
        padding: 0 18px;
        white-space: nowrap;
      }

      /* 图这一段吃掉右栏剩余高度。chart-card 本身要变成纵向 flex，
         否则它内部的价格区/周期条之下，.app-chart 拿不到确定高度。 */
      /* 产品负责人 2026-09-13 第四轮反馈：周期按钮（15M/30M/1H…）整排看不见了。
         根因是 chart-card 变成纵向 flex 后，除了图之外的子项都还是默认的
         flex: 0 1 auto——高度一紧张，周期条、指标条这些就被 flex 压扁，
         按钮只剩上沿一道圆角露在外面。这些条子高度是固定的，明确禁止收缩。 */
      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .chart-card > .kline-info,
      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .chart-card > .period-strip,
      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .chart-card > .indicator-bar,
      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .chart-card > .kline-hilo-note {
        flex: 0 0 auto;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .chart-card {
        padding: 6px 10px;
        flex: 1 1 auto;
        /* 图这一段优先吃高度：min-height 给个下限，免得信号列表内容一多就把图压扁。
           下限同时用像素封顶——纯百分比在 iPad 横屏这种矮屏上会和提示卡、信号列表
           三者相加超过一屏，外层 overflow:hidden 就把它们挤成重叠（2026-09-13 第四轮反馈）。 */
        min-height: min(48%, 260px);
        display: flex;
        flex-direction: column;
      }

      /* 信号列表定高、**自己内部滚**——这是本次反馈的核心：
         K 线不该跟着信号列表一起被滚走。 */
      /* 产品负责人 2026-09-14 第二轮：「最近高低点模块必须留够可滑动的空间」
         「信号类型那一排文字再往上挪一点」。原来这张卡 140px 里，卡片内边距 28 +
         标题行 30 + 列表上边距 10 + 表头 40 就吃掉 108，只剩 32px 给数据——不到一行。
         把这几处的留白收掉，同样的高度能看到两行多，滚动也才有意义。 */
      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .market-signal-card {
        padding: 8px 12px;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .market-signal-card .event-list {
        margin-top: 2px;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .signal-table th {
        padding: 4px 4px;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .signal-table td {
        padding: 7px 4px;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .market-signal-card {
        /* 产品负责人 2026-09-14 第三轮：「至少要露出 2 个信号」「露出过多，压缩一下，
           露出 2 个信号就可以了」。所以这张卡不再按屏高取百分比，而是固定到刚好
           容下「标题行 + 表头 + 两行信号」。实测各段：卡片内边距 16、标题行 30、
           列表上边距 2、表头 26、数据行 39——两行合计 152，取 154 让第三行露个头，
           一眼就看得出这里还能往下滑。多出来的信号自己在卡内滚。
           这样每种屏上露出的信号条数一致，剩下的高度全部归 K 线；
           上一版那个「矮屏默认折叠、点开展开」的开关也随之取消——
           它会把整张卡推出屏幕，恰恰违背「始终看得到最近信号」。 */
        flex: 0 0 auto;
        max-height: 154px;
        /* 产品负责人 2026-09-13 第四轮反馈：登录提示卡和上面的图有重叠，
           「K 线模块高度可以再往下方信号列表方向加大一些」。
           原来这里钉了 min-height: 150px——外壳锁死一屏，这 150px 就是从图上
           硬扣走的；一旦「登录后查看」这类提示卡同时出现，三块相加超过一屏，
           而外层 overflow:hidden，于是挤成了重叠。降到 72px（标题 + 一行内容）：
           这块自己内部能滚，空间紧张时先让它收，剩余高度全部归 K 线。 */
        min-height: 72px;
        overflow-y: auto;
        margin: 0;
      }

      /* 用户反馈 2026-10-21：左栏宽度、信号列表高度要能自己拖。两条分隔线
         压在原有 10px / 4px 的间距里，不额外占位；拖出的尺寸由 desktop_panes.js
         夹紧后写进 CSS 变量，未拖过时仍走上面那套默认版式。 */
      body[data-desktop-layout="enabled"][data-layout="desktop"] .desktop-pane-resizer {
        display: block;
        position: relative;
        z-index: 20;
        touch-action: none;
        outline: none;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] .desktop-pane-resizer::after {
        content: "";
        position: absolute;
        border-radius: 2px;
        background: transparent;
        transition: background 0.15s ease;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] .desktop-pane-resizer:hover::after,
      body[data-desktop-layout="enabled"][data-layout="desktop"] .desktop-pane-resizer:focus-visible::after,
      body[data-desktop-layout="enabled"][data-layout="desktop"] .desktop-pane-resizer.dragging::after {
        background: var(--brand);
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] .desktop-pane-resizer[data-desktop-resizer="columns"] {
        grid-column: 1;
        grid-row: 1;
        justify-self: end;
        width: 10px;
        margin-right: -10px;
        cursor: col-resize;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] .desktop-pane-resizer[data-desktop-resizer="columns"]::after {
        top: 0;
        bottom: 0;
        left: 4px;
        width: 2px;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] .app-shell.has-custom-left-width {
        grid-template-columns: var(--desktop-left-width) minmax(0, 1fr);
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .desktop-pane-resizer[data-desktop-resizer="signals"] {
        flex: 0 0 6px;
        /* 6px 手柄 + 两侧 4px 间距，再用负外边距抵回去，总间距仍是 4px。 */
        margin: -5px 0;
        cursor: row-resize;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .desktop-pane-resizer[data-desktop-resizer="signals"]::after {
        left: 0;
        right: 0;
        top: 2px;
        height: 2px;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .market-signal-card.has-custom-height {
        height: var(--desktop-signal-height);
        max-height: none;
      }

      body.desktop-pane-resizing,
      body.desktop-pane-resizing * {
        user-select: none !important;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .kline-back {
        display: none;
      }

      /* 时间轴修回来之后才暴露的：全屏按钮钉在 bottom: 8px，正好落在图表底部
         那条 28px 的时间轴带里，把最左边的时间标签盖住了。抬到时间轴上方。 */
      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .kline-fullscreen-btn {
        bottom: 38px;
      }

      /* 「全屏横屏」形态：图吃掉右栏里 chrome 与信号列表之外的全部高度。
         高度纯由布局约束得出，不再用 JS 量 offsetTop 反算（那版在数据到齐后
         价格区撑开时会把图顶出首屏，得靠 ResizeObserver 追着修）。
         JS 现在只负责在容器尺寸变化后让 lightweight-charts 重画。 */
      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .app-chart {
        flex: 1 1 auto;
        height: auto;
        /* min-height 必须是 0：给它 220px 会在矮窗口（实测 1133×600）反过来撑破
           父卡片 .chart-card，图连同时间轴一起溢出到下方信号卡上——和 240 那个
           硬下限是同一类错误，只是换了个地方。图的下限交给 .chart-card 的
           min-height 去保证，这里只负责吃掉卡片里剩下的高度。 */
        min-height: 0;
        /* 兜底：marketChartHeight() 已改成严格跟随容器，这里再拦一道——
           万一哪天高度又算高了，宁可裁掉画布底边，也不许它盖到下面的信号卡上。 */
        overflow: hidden;
      }

      /* 产品负责人 2026-09-13 第五轮：iPad mini 横屏上真正画 K 线的画布只剩 113px，
         而它上方的固定条子（价格区 76 + 周期条 42 + 指标条 24 + 内边距 20 = 162）
         比图本身还高。下面 B、C 两条是纯压缩，桌面档一律生效。 */

      /* B：「登录/开通后查看」提示卡原来是标题、描述、按钮堆三行共 141px。
         改成左文右钮的两列——一个字不少，高度减一半。 */
      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView #periodGateCard {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 16px;
        row-gap: 2px;
        padding: 10px 14px;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView #periodGateTitle {
        grid-column: 1;
        grid-row: 1;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView #periodGateDesc {
        grid-column: 1;
        grid-row: 2;
      }

      /* 按钮带内联 margin-top，只能用 !important 压掉。 */
      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView #periodGateCard > button {
        grid-column: 2;
        grid-row: 1 / span 2;
        width: auto;
        min-width: 132px;
        margin-top: 0 !important;
      }

      /* 产品负责人 2026-09-14「画布至少扩大一倍」：大价格和涨跌幅原来竖排两行共 49px，
         并成一行后只占一行高度，省下的全给图。 */
      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .kline-price-main {
        display: flex;
        align-items: baseline;
        gap: 10px;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .kline-change {
        margin-top: 0;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .kline-info {
        padding: 0 2px 2px;
      }

      /* C：24h 最高/最低、资金费率、多空比原来排成 2×2，白占一行。收成一排四格。
         右栏不够宽时 .kline-info 本来就有 flex-wrap，会自己退回两行，不会挤坏。 */
      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .kline-stats {
        grid-template-columns: repeat(4, auto);
        column-gap: 14px;
      }

      /* 标签沿用的是手机上那档 10.5px 浅灰，在 iPad 高分屏上本来就吃力，
         户外反光下更难认——这次反馈里「看不到」很可能有它一份。桌面上放大提亮。 */
      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .kline-stat span {
        font-size: 12px;
        color: var(--text-secondary);
      }

      /* 产品负责人 2026-09-14 第五轮：资金费率要挨着大户持仓比，和 24h 最低价对调。
         这样 24h 最高/最低相邻，资金费率与持仓比相邻，两组各自成对。
         用 order 换位而不动 HTML——手机版式仍是 2×2，顺序不受影响。 */
      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .kline-stat:nth-child(1) { order: 1; }
      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .kline-stat:nth-child(2) { order: 3; }
      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .kline-stat:nth-child(3) { order: 2; }
      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView .kline-stat:nth-child(4) { order: 4; }

      /* 产品负责人 2026-09-12 反馈：订阅页/看板点开卡片，弹层把左边导航盖住了。
         桌面是常驻外壳，导航不该被模态吞掉——遮罩从导航条右边开始。 */
      body[data-desktop-layout="enabled"][data-layout="desktop"] .sheet-backdrop {
        left: var(--desktop-rail-width);
      }

      /* 产品负责人 2026-09-13 反馈：居中会把 K 线压住。要求靠左，只要不遮挡
         左侧导航即可——遮罩已从导航条右边起算，这里贴着遮罩左边缘再留一点间距，
         正好盖在左栏上方，右侧 K 线基本不受影响。
         （上一轮把它改成居中是过度修正：当时只是为了不贴着导航条，
           但代价是压住了这一版最该看见的东西。） */
      body[data-desktop-layout="enabled"][data-layout="desktop"] .sheet {
        left: 16px;
        right: auto;
        bottom: auto;
        top: 50%;
        width: min(460px, calc(100vw - var(--desktop-rail-width) - 48px));
        max-height: min(760px, calc(100dvh - 64px));
        border-radius: 18px;
        transform: translateY(-44%);
        opacity: 0;
      }

      body[data-desktop-layout="enabled"][data-layout="desktop"] .sheet-backdrop.open .sheet {
        transform: translateY(-50%);
        opacity: 1;
      }
    }

    /* A（产品负责人 2026-09-13 第五轮拍板）：提示卡和它下面的信号列表说的是同一件事——
       showMemberGate() 一次调用里既写提示卡文案，又往 #marketEventList 写
       「登录后可查看该周期策略信号」。两块加起来 225px，占掉 iPad 横屏的三分之一，
       挤掉的正是用户最想看的那张图。有提示卡时就不再重复渲染信号列表。

       只在**矮屏**这样做：700px 以下是 iPad 横屏去掉地址栏后的真实高度，那里是真不够分；
       笔记本和台式（800px 以上可视高）空间足够，两块都留着，不做这个取舍。
       门槛刻意避开 720——1280×720 是太常见的视口（Playwright 的默认值就是它），
       卡在门槛线上会让这条规则在登录前后反复开关，进而把别的用例带成偶发红。 */
    /* 产品负责人 2026-09-14：「不同的 iPad 尺寸一定要进行比例适配」。
       按实测可视高（已减掉 Safari 地址栏）：iPad mini 6 = 657、iPad 9 = 723、
       iPad 10 = 733、iPad Air/Pro 11 = 747，全部落在 860 以内；
       iPad Pro 13（1366×937）高度本来就够，不折叠。
       max-width 1400 把真正的桌面显示器排开——那里空间足够，信号列表保持常驻。
       这段查询与 JS 里的 DESKTOP_SIGNAL_FOLD_QUERY 必须一字不差，否则折叠状态
       和样式会对不上。 */
    @media (min-width: 1024px) and (max-width: 1400px) and (max-height: 860px) {
      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView #periodGateCard:not(.hidden) ~ .market-signal-card,
      body[data-desktop-layout="enabled"][data-layout="desktop"] #marketDetailView #periodGateCard:not(.hidden) ~ .desktop-pane-resizer {
        display: none !important;
      }

    }

    .sheet-backdrop {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: block;
      opacity: 0;
      pointer-events: none;
      background: rgba(15, 23, 42, 0.36);
      transition: opacity 0.22s ease;
    }

    .sheet-backdrop.open {
      opacity: 1;
      pointer-events: auto;
    }

    .sheet {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      max-height: calc(100vh - env(safe-area-inset-top) - 18px);
      display: flex;
      flex-direction: column;
      border-radius: 20px 20px 0 0;
      background: var(--card);
      overflow: hidden;
      transform: translateY(100%);
      transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.16);
    }

    .sheet-backdrop.open .sheet {
      transform: translateY(0);
    }

    .push-permission-sheet { padding: 8px 18px calc(18px + env(safe-area-inset-bottom)); }
    .push-permission-sheet .sheet-grip { width: 38px; height: 4px; margin: 0 auto 15px; border-radius: 999px; background: var(--line-strong); }
    .push-permission-head { display: flex; align-items: center; justify-content: center; gap: 12px; }
    .push-permission-icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); background: var(--sig-warn-bg); font-size: 21px; }
    .push-permission-head .sheet-title { font-size: 16.5px; }
    .push-permission-path { margin-top: 15px; padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--radius-btn); background: var(--surface-soft); color: var(--muted); font-size: 12px; line-height: 1.75; }
    .push-permission-path b { color: var(--text); font-weight: 850; }
    .push-permission-path span { margin: 0 4px; }
    .push-permission-actions { display: grid; gap: 8px; margin-top: 15px; }
    .push-permission-actions .btn { min-height: 46px; }
    .push-permission-dismiss { min-height: 36px; border: 0; background: transparent; color: var(--muted); font-family: inherit; font-size: 12.5px; font-weight: 800; }

    .op-detail-sheet::before {
      content: "";
      width: 38px;
      height: 4px;
      flex: 0 0 auto;
      align-self: center;
      margin: 9px auto 2px;
      border-radius: 999px;
      background: var(--line-strong);
    }

    .sheet-head {
      min-height: 54px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-bottom: 1px solid var(--line);
      background: var(--card);
    }

    .op-detail-sheet .sheet-head {
      min-height: 48px;
      padding: 8px 18px 12px;
    }

    .op-detail-sheet .sheet-body {
      padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }

    .guide-sheet {
      max-height: calc(100vh - env(safe-area-inset-top) - 10px);
    }

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

    .release-notes-sheet {
      max-height: calc(100vh - env(safe-area-inset-top) - 36px);
    }

    .release-notes-body {
      padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }

    .release-notes-list {
      display: grid;
      gap: 10px;
    }

    .release-note {
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--card);
    }

    .release-note-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }

    .release-note h3 {
      margin: 4px 0 0;
      font-size: 15px;
      line-height: 1.45;
    }

    .release-note-version {
      color: var(--brand);
      font-size: 11px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
    }

    .release-note time {
      flex: 0 0 auto;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      line-height: 1.7;
      font-variant-numeric: tabular-nums;
    }

    .release-note-summary {
      display: flex;
      align-items: flex-start;
      gap: 7px;
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
    }

    /* 摘要里的换行按原样显示，合并多项更新时一项一行（2026-10-21 起）。 */
    .release-note-summary > span:last-child {
      white-space: pre-line;
    }

    .release-note-credits {
      margin: 8px 0 0;
      padding-top: 8px;
      border-top: 1px dashed var(--line);
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }

    .release-note-credits strong {
      color: var(--text);
      font-weight: 600;
    }

    .release-note-kind {
      margin-top: 2px;
      padding: 3px 6px;
      border-radius: 999px;
      background: var(--bg-subtle);
      color: var(--muted);
      font-size: 10px;
      font-weight: 850;
      line-height: 1;
      white-space: nowrap;
    }

    .release-note-kind.feature { background: var(--brand-soft); color: var(--brand); }
    .release-note-kind.performance { background: var(--sig-warn-bg); color: var(--sig-warn); }
    .release-note-kind.experience { background: var(--sig-form-bg); color: var(--sig-form); }

    .release-notes-empty {
      display: grid;
      gap: 7px;
      color: var(--muted);
      text-align: center;
    }

    .release-notes-empty strong { color: var(--text); }
    .release-notes-empty .btn { justify-self: center; margin-top: 5px; }

    .resonance-sheet {
      max-height: calc(100vh - env(safe-area-inset-top) - 36px);
    }

    .resonance-list {
      display: grid;
      gap: 8px;
    }

    .resonance-member {
      width: 100%;
      min-height: 48px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--card);
      color: var(--text);
      text-align: left;
      font: inherit;
    }

    .resonance-member strong,
    .resonance-member span {
      min-width: 0;
    }

    .resonance-member-main {
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 0;
    }

    .resonance-member-head {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 6px;
      min-width: 0;
    }

    .resonance-member-head strong {
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
    }

    .resonance-member-tag {
      font-size: 13px;
      color: var(--muted);
      white-space: nowrap;
    }

    .resonance-member-sub {
      font-size: 13px;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .resonance-grade {
      min-width: 30px;
      padding: 3px 7px;
      border-radius: 999px;
      background: var(--surface-soft);
      color: var(--muted);
      font-size: 12px;
      font-weight: 950;
      text-align: center;
    }

    .guide-nav {
      position: sticky;
      top: -14px;
      z-index: 2;
      display: flex;
      gap: 8px;
      padding: 10px 0 12px;
      margin: -14px 0 8px;
      overflow-x: auto;
      background: var(--card);
      -webkit-overflow-scrolling: touch;
    }

    .guide-chip {
      flex: 0 0 auto;
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 12px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--surface-soft);
      color: #334155;
      font-size: 12px;
      font-weight: 900;
      text-decoration: none;
      white-space: nowrap;
    }

    .guide-content {
      display: grid;
      gap: 18px;
    }

    .guide-section {
      scroll-margin-top: 60px;
    }

    .guide-section h3 {
      margin: 0 0 8px;
      color: #0f172a;
      font-size: 17px;
      font-weight: 950;
    }

    .guide-intro {
      margin: 0 0 10px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.7;
    }

    .guide-items {
      display: grid;
      gap: 10px;
    }

    .guide-item {
      margin: 0;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--card);
      overflow: hidden;
    }

    .guide-text {
      padding: 12px;
      color: #334155;
      font-size: 13.5px;
      line-height: 1.75;
    }

    .guide-text p {
      margin: 0;
    }

    .guide-text p + p {
      margin-top: 8px;
    }

    .guide-highlights {
      margin: 0;
      padding: 12px 14px;
      list-style: none;
      display: grid;
      gap: 8px;
      background: var(--brand-soft);
      border: 1px solid var(--brand-soft);
    }

    .guide-highlights li {
      position: relative;
      padding-left: 16px;
      color: var(--text);
      font-size: 13.5px;
      font-weight: 700;
      line-height: 1.6;
    }

    .guide-highlights li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 8px;
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--brand);
    }

    .guide-image-wrap {
      background: var(--surface-soft);
    }

    .guide-image {
      display: block;
      width: 100%;
      height: auto;
      background: #e2e8f0;
      object-fit: contain;
    }

    .guide-image-fallback {
      display: none;
      width: 100%;
      border: 0;
      background: transparent;
      min-height: 120px;
      align-items: center;
      justify-content: center;
      padding: 18px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      text-align: center;
      cursor: pointer;
    }

    .guide-item.image-failed .guide-image {
      display: none;
    }

    .guide-item.image-failed .guide-image-fallback {
      display: flex;
    }

    .guide-image-wrap figcaption {
      padding: 9px 10px 10px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }

    .guide-empty {
      display: grid;
      gap: 6px;
      color: #334155;
      font-size: 13px;
    }

    .guide-empty strong {
      color: #0f172a;
      font-size: 15px;
    }

    .guide-image-viewer {
      position: fixed;
      inset: 0;
      z-index: 260;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: calc(20px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom));
      background: rgba(2, 6, 23, 0.92);
    }

    .guide-image-viewer.hidden {
      display: none;
    }

    .guide-image-viewer img {
      max-width: 100%;
      max-height: calc(100vh - 104px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
      object-fit: contain;
      border-radius: 8px;
      background: #0f172a;
      /* JS drives transform directly for pinch/double-tap zoom + pan; this
         must stay off or the browser's own touch scrolling/zooming fights
         the pointer-event math in setupGuideImageZoom(). */
      touch-action: none;
      transform-origin: center center;
      -webkit-user-drag: none;
      user-select: none;
      cursor: zoom-in;
    }

    .guide-image-viewer img.zoom-anim {
      transition: transform 0.2s ease-out;
    }

    .guide-image-viewer img.zoomed {
      cursor: grab;
    }

    .guide-image-viewer img.panning {
      cursor: grabbing;
    }

    .guide-image-close {
      position: fixed;
      top: calc(12px + env(safe-area-inset-top));
      right: 12px;
      width: 40px;
      height: 40px;
      border: 0;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.16);
      color: #fff;
      font-size: 24px;
      font-weight: 900;
      /* transform: scale() on .guide-image-viewer img makes it a stacking
         context that paints after this button in DOM order; without an
         explicit z-index a zoomed-in image visually covers the button and
         swallows its clicks. */
      z-index: 1;
    }

    .guide-image-caption {
      position: fixed;
      left: 16px;
      right: 16px;
      bottom: calc(14px + env(safe-area-inset-bottom));
      color: rgba(255, 255, 255, 0.86);
      font-size: 13px;
      line-height: 1.5;
      text-align: center;
      z-index: 1;
    }

    .sheet-close {
      width: 36px;
      height: 36px;
      border: 0;
      border-radius: 10px;
      background: var(--bg-subtle);
      color: #334155;
      font-size: 20px;
      font-weight: 900;
    }

    .sheet-title {
      font-size: 16px;
      font-weight: 950;
    }

    .sheet-title-clickable {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      cursor: pointer;
    }

    .sheet-title-jump {
      color: var(--muted);
      font-size: 15px;
      font-weight: 800;
    }

    .sheet-body {
      padding: 14px;
      overflow-y: auto;
      overscroll-behavior-y: contain;
      -webkit-overflow-scrolling: touch;
      background: var(--card);
    }

    #inviteSheet .sheet-head, #inviteSheet .invite-footer { flex-shrink: 0; }
    .invite-sheet-body { display: grid; gap: 18px; min-height: 0; }
    .invite-intro h2 { margin: 0 0 6px; font-size: 22px; line-height: 1.35; }
    .invite-intro p { margin: 0; font-size: 12px; line-height: 1.65; }
    .invite-info-row { display: flex; align-items: center; gap: 8px; min-height: 52px; border-bottom: 0.5px solid var(--line); }
    .invite-info-row > span:first-child { flex-shrink: 0; font-size: 13px; color: var(--muted); }
    .invite-info-row code, .invite-link-text { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
    .invite-info-row code { font-size: 16px; font-weight: 800; letter-spacing: 0.04em; }
    .invite-link-text { font-size: 12px; text-align: right; }
    .invite-copy { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; padding: 8px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
    .invite-copy svg, .invite-channel-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
    .invite-copy:disabled, .invite-share-channels button:disabled { opacity: 0.4; cursor: default; }
    .invite-redemptions-list { display: grid; }
    .invite-redemption-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 0.5px solid var(--line); font-size: 13px; }
    .invite-redemption-row strong { flex: 0 0 auto; font-size: 12px; }
    .invite-redemption-row .credited { color: var(--ok); }
    .invite-redemption-row .pending { color: var(--muted); }
    .invite-footer { padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); background: var(--card); border-top: 0.5px solid var(--line); }
    .invite-primary.btn { width: 100%; height: 44px; min-height: 44px; border-radius: 999px; border: 0; background: #15365d; color: #fff; }
    #inviteShareSheet { z-index: 210; }
    #inviteShareSheet .sheet-head { flex-shrink: 0; justify-content: center; }
    #inviteShareBody { min-height: 0; padding: 12px 14px 8px; }
    #inviteShareBody .content-share-preview { width: auto; max-width: 100%; max-height: 48vh; object-fit: contain; }
    #inviteShareBody [role="status"] { min-height: 18px; margin: 6px 0; text-align: center; font-size: 12px; }
    .invite-share-channels { display: flex; justify-content: space-around; gap: 8px; }
    .invite-share-channels button { display: grid; justify-items: center; gap: 6px; min-width: 0; padding: 4px 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 11px; cursor: pointer; }
    .invite-channel-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-soft); border: 1px solid var(--line); }
    .invite-share-cancel { flex-shrink: 0; min-height: 44px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); border: 0; border-top: 0.5px solid var(--line); background: var(--card); color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }

    .wechat-notice-body {
      display: grid;
      gap: 10px;
      padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }

    .wechat-notice-card {
      display: grid;
      gap: 12px;
      text-align: center;
    }

    .wechat-notice-qrcode {
      width: min(100%, 260px);
      justify-self: center;
      aspect-ratio: 1;
      object-fit: contain;
    }

    .benefits {
      width: 100%;
      border-collapse: collapse;
      overflow: hidden;
      border-radius: 12px;
      background: var(--card);
      font-size: 12px;
    }

    .benefits th,
    .benefits td {
      padding: 9px 4px;
      border-bottom: 1px solid var(--line);
      text-align: center;
      line-height: 1.35;
    }

    .benefits th:first-child,
    .benefits td:first-child {
      text-align: left;
    }

    .ok {
      color: var(--ok);
      font-weight: 900;
    }

    .hint {
      margin-top: 10px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }

    .toast {
      position: fixed;
      left: 14px;
      right: 14px;
      bottom: calc(84px + env(safe-area-inset-bottom));
      z-index: 205;
      display: none;
      padding: 11px 14px;
      border-radius: 999px;
      background: #0f172a;
      color: #fff;
      text-align: center;
      font-size: 13px;
      font-weight: 800;
      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22);
    }

    .toast.show {
      display: block;
    }

    .confirm-pop {
      position: fixed;
      inset: 0;
      z-index: 120;
      display: grid;
      place-items: center;
      padding: 24px;
      background: rgba(15, 23, 42, 0.36);
    }

    .confirm-card {
      width: min(320px, 100%);
      padding: 18px;
      border-radius: 18px;
      background: var(--card);
      box-shadow: 0 22px 70px rgba(15, 23, 42, 0.22);
      text-align: center;
    }

    .confirm-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 16px;
    }

    .native-app-update-card .muted {
      margin-top: 10px;
      line-height: 1.6;
    }

    .native-app-update-required {
      grid-template-columns: 1fr;
    }

    .membership-scope-line {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .membership-scope-line .muted {
      font-size: 13px;
    }

    .membership-scope-hint {
      margin-top: 8px;
      font-size: 12px;
    }

    .membership-scope-field {
      display: grid;
      gap: 6px;
      margin: 14px 0 10px;
    }

    .signal-scope-guide {
      display: grid;
      gap: 10px;
      border-color: rgba(217, 119, 6, .35);
      background: #fff8eb;
    }

    .signal-scope-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    /* 市场无量化信号：把信号列表做成蒙板锁定态（模糊示意信号 + 轻蒙板升级提示） */
    .signal-lock {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
    }
    .signal-lock-blur {
      filter: blur(5px);
      opacity: .5;
      pointer-events: none;
      user-select: none;
    }
    .signal-lock-veil {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 20px 16px;
      text-align: center;
      background: rgba(255, 255, 255, .74);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
    }
    .signal-lock-badge {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--gold-bg);
      border: 1px solid #fed7aa;
      font-size: 18px;
    }
    .signal-lock-text {
      max-width: 260px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.5;
    }
    .signal-lock-cta {
      min-width: 168px;
      margin-top: 2px;
    }

    .contact-card {
      display: grid;
      gap: 10px;
    }

    .contact-row {
      color: var(--text);
      font-size: 15px;
      font-weight: 800;
    }

    .hidden {
      display: none !important;
    }

    /* T13a 行情：今日市场情绪 hero + 自选卡片（走势/价格/涨跌） */
    .mk-hero {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--card);
      padding: 9px 10px;
      margin-bottom: 9px;
    }












    .market-grid { grid-template-columns: 1fr; }









    .mk-up { color: var(--up); }
    .mk-down { color: var(--down); }
    .mk-flat { color: var(--muted); }
    .mk-hero {
      border-radius: var(--radius-card);
      box-shadow: var(--shadow-card);
      min-height: 88px;
    }
    .market-summary {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 0;
      padding: 0;
      overflow: hidden;
    }
    .market-summary-card {
      min-width: 0;
      min-height: 88px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      border: 0;
      background: var(--card);
      padding: 8px 10px;
      text-align: left;
      color: inherit;
    }
    .summary-loading {
      min-height: 52px;
    }
    .summary-loading .vstate {
      padding: 0;
    }
    .summary-loading .skrow {
      height: 20px;
      margin-bottom: 6px;
    }
    .summary-loading .skrow:nth-child(n + 3) {
      display: none;
    }
    .summary-loading.trend-loading .skrow {
      height: 32px;
    }
    .summary-loading.trend-loading .skrow:nth-child(n + 2) {
      display: none;
    }
    .market-summary-card + .market-summary-card {
      border-left: 1px solid var(--line);
    }
    .review-hero { padding: 0; overflow: hidden; }
    /* 播报条与两张现网监控卡共用同一个最小高度，保证横滑切市场 tab 时 hero
       不跳。刻意用 CSS 而不是 JS 量：量高度要等两张卡渲染完，而开关打开后那
       两张卡已被替换掉，配置一重载（例如登录）就没有东西可量，hero 会空掉。 */
    .mk-hero.review-hero { min-height: 115px; }
    .review-ticker { height: 100%; min-height: 115px; background: var(--card); }
    .review-ticker-head { width: 100%; height: 34px; display: flex; align-items: center; gap: 7px; border: 0; border-bottom: 1px solid var(--line); padding: 0 12px; background: transparent; color: var(--text); font: inherit; text-align: left; }
    .review-ticker-head span { color: var(--gold); font-size: 13px; font-weight: 900; }
    .review-ticker-head i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--danger); }
    .review-ticker-head em { color: var(--muted); font-size: 11px; font-style: normal; font-weight: 700; }
    .review-ticker-head em { margin-left: auto; }
    .review-ticker-window { overflow: hidden; }
    .review-ticker-track { animation: review-ticker-scroll 15s linear infinite; }
    .review-ticker-row { width: 100%; height: 40px; display: flex; align-items: center; gap: 7px; padding: 0 12px; border: 0; border-bottom: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; text-align: left; white-space: nowrap; }
    .review-ticker-row b { font-size: 12.5px; }
    .review-ticker-row strong { flex: 0 0 auto; font-size: 13px; font-weight: 900; }
    .review-period, .review-direction { color: var(--muted); font-size: 12.5px; font-weight: 700; }
    .review-direction { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; }
    .review-ticker-time { flex: 0 0 auto; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
    .review-ticker-empty { height: 40px; display: grid; place-items: center; color: var(--muted); font-size: 12px; }
    .review-tag { flex: 0 0 auto; padding: 2px 6px; border-radius: 6px; font-size: 10px; font-weight: 900; }
    /* 档位标签沿用订阅/精选卡片 .op-progress-tag 的配色：达 T1/T2 是绿色
       「达成中」，只有达 T3 才是金色。此前 T2 也给了金色，和 T3 只差一圈描边，
       扫视时分不出来（2026-09-22 验收反馈）。暗色态见文件末尾的 dark 覆盖。 */
    .review-tag-t3 { border: 1px solid var(--gold-line); background: #fef3c7; color: #92400e; }
    .review-tag-t2, .review-tag-t1 { background: #ecfdf5; color: #047857; }
    .review-tag-run { background: var(--bg-subtle); color: var(--muted); }
    .review-repeat { flex: 0 0 auto; padding: 2px 5px; border-radius: 6px; font-size: 10px; font-weight: 700; background: var(--bg-subtle); color: var(--muted); letter-spacing: .2px; }
    @keyframes review-ticker-scroll { 0%, 12% { transform: translateY(0); } 100% { transform: translateY(-240px); } }
    .review-feed-view { width: 100%; min-width: 0; padding-top: 2px; }
    .review-page-head { display: flex; align-items: center; gap: 9px; padding: 2px 0 11px; }
    .review-page-head > button[data-review-back] { border: 0; padding: 0 3px; background: transparent; color: var(--text); font-size: 22px; }
    .review-page-head b { font-size: 16px; font-weight: 900; }
    .review-help { margin-left: auto; padding: 4px 9px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card); color: var(--text-secondary); font-family: inherit; font-size: 11px; font-weight: 800; line-height: 1.4; }
    .review-stats { display: grid; grid-template-columns: repeat(3, 1fr); padding: 10px 5px; border: 1px solid #24375a; border-radius: 13px; background: linear-gradient(135deg, #16233a, #1d2f4d); color: #e8eefb; }
    .review-stats span { border-right: 1px solid rgba(255,255,255,.12); color: #93a8c8; font-size: 10px; font-weight: 700; text-align: center; }
    .review-stats span:last-child { border-right: 0; }
    .review-stats b { display: block; color: #ffd48a; font-size: 17px; font-variant-numeric: tabular-nums; }
    .review-chips { display: flex; gap: 6px; overflow: auto; padding: 10px 0; }
    .review-chips button { flex: 0 0 auto; padding: 5px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card); color: var(--muted); font-family: inherit; font-size: 11.5px; font-weight: 800; }
    .review-chips button.active { border-color: var(--brand-soft); background: var(--brand-soft); color: var(--brand-ink); }
    .review-day { padding: 6px 3px 7px; color: var(--muted); font-size: 10.5px; font-weight: 900; }
    /* 两排：信号、时间、标签同排；价格在下排，涨幅右侧跨两排居中。 */
    .review-coin { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; overflow: hidden; border-radius: 10px; background: var(--brand-soft); color: var(--brand-ink); font-size: 10px; font-weight: 900; line-height: 1; white-space: nowrap; }
    .review-coin-mid { font-size: 8px; }
    .review-coin-long { font-size: 6.5px; letter-spacing: -0.2px; }
    .review-event { width: 100%; display: grid; align-items: center; margin-bottom: 9px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); color: var(--text); font: inherit; text-align: left; box-shadow: var(--shadow-card); grid-template-columns: 30px minmax(0,1fr) 52px 6px; grid-template-rows: auto auto; gap: 5px 6px; padding: 12px 10px; min-height: 70px; }
    .review-event > .review-coin { grid-column: 1; grid-row: 1 / 3; width: 30px; height: 34px; font-size: 8px; border-radius: 9px; }
    .review-event-header { grid-column: auto; grid-row: auto; display: flex; align-items: center; gap: 4px; white-space: nowrap; min-width: 0; }
    .review-event-header b { display: inline; font-size: 10.5px; font-weight: 800; }
    .review-event-header .review-event-time { font-size: 9px; }
    .review-event-header .review-tag { font-size: 9px; padding: 2px 4px; border-radius: 5px; }
    .review-event-header .review-repeat { font-size: 8px; padding: 2px 3px; }
    .review-prices { grid-column: auto; grid-row: auto; flex-wrap: nowrap; gap: 6px; font-size: 9px; line-height: 1.4; color: var(--muted); font-weight: 700; white-space: nowrap; min-width: 0; display: flex; }
    .review-event > strong { grid-column: 3; grid-row: 1 / 3; align-self: center; font-size: 13px; justify-self: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .review-event > em { grid-column: 4; grid-row: 1 / 3; align-self: center; font-size: 16px; justify-self: end; color: var(--line-strong); font-style: normal; }
    .review-event-main { grid-column: 2; grid-row: 1 / 3; min-width: 0; display: grid; gap: 5px; }
    .review-event-main b { grid-column: auto; grid-row: auto; }
    .review-card-period { font: inherit; }
    .review-direction-low { color: var(--danger); }
    .review-direction-high { color: var(--ok); }
    .review-event-time { color: var(--muted); font-variant-numeric: tabular-nums; }
    .review-event > .review-coin-long { font-size: 5.5px; }
    .review-event > .review-coin-mid { font-size: 5px; }
    /* 手机恢复改版前字号与字段排列，价格另占完整下排防止历史遮挡；平板继续使用上面的两排窄栏样式。 */
    @media (max-width: 600px) {
      .review-event { display: grid; grid-template-columns: 38px minmax(0,1fr) auto auto auto auto 6px; grid-template-rows: auto auto; gap: 3px 8px; padding: 13px 12px; min-height: 66px; }
      .review-event > .review-coin { width: 38px; height: 38px; font-size: 10px; border-radius: 10px; }
      /* 38px 徽标完整容纳七字母名称，避免恢复旧字号时重新截断。 */
      .review-event > .review-coin-mid { font-size: 6.5px; }
      .review-event > .review-coin-long { font-size: 6.5px; }
      .review-event-main { display: contents; }
      .review-event-main b { display: block; grid-column: 2; grid-row: 1; font-size: 13px; font-weight: 700; }
      .review-prices { flex-wrap: wrap; gap: 3px 7px; grid-column: 2 / -1; grid-row: 2; margin-top: 0; font-size: 10.5px; line-height: normal; white-space: normal; }
      .review-prices > span { max-width: 100%; white-space: nowrap; }
      .review-event-time { grid-column: 3; grid-row: 1; font-size: 10.5px; }
      .review-event-main .review-card-period, .review-event-main .review-card-direction { white-space: nowrap; }
      .review-event > .review-tag { grid-column: 4; grid-row: 1; }
      .review-event > .review-repeat { grid-column: 5; grid-row: 1; }
      .review-event > strong { grid-column: 6; grid-row: 1; font-size: 14px; }
      .review-event > em { grid-column: 7; grid-row: 1; margin-left: auto; font-size: 18px; }
      .review-event:not(:has(.review-repeat)) { grid-template-columns: 38px minmax(0,1fr) auto auto auto 6px; }
      .review-event:not(:has(.review-repeat)) > strong { grid-column: 5; }
      .review-event:not(:has(.review-repeat)) > em { grid-column: 6; }
    }
    @media (max-width: 340px) { .review-event { column-gap: 4px; } }
    .review-more { width: 100%; margin-top: 4px; padding: 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--card); color: var(--brand-ink); font-family: inherit; font-size: 12px; font-weight: 800; }
    /* 空态与加载态共用外观；口径说明已收进「说明」弹窗，页面底部不再重复一遍。 */
    .review-empty, .review-loading { margin: 12px 0 0; padding: 10px 11px; border: 1px dashed var(--line-strong); border-radius: 11px; background: var(--bg-subtle); color: var(--text-secondary); font-size: 11px; line-height: 1.65; }
    .review-help-body { display: grid; gap: 12px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); color: var(--text-secondary); font-size: 13px; line-height: 1.7; }
    .review-help-body p { margin: 0; }
    .review-help-body b { color: var(--text); }
    .review-help-disclaimer { padding: 10px 11px; border-radius: 10px; background: var(--bg-subtle); color: var(--muted); }
    .market-summary-title {
      margin-bottom: 5px;
      font-size: 14px;
      font-weight: 900;
    }
    .market-summary-row {
      display: flex;
      align-items: center;
      gap: 6px;
      min-height: 22px;
      margin-top: 5px;
    }
    .summary-icon {
      width: 22px;
      height: 22px;
      display: inline-grid;
      place-items: center;
      flex: 0 0 auto;
      border-radius: 8px;
      font-size: 11px;
      font-weight: 900;
    }
    .summary-icon.low {
      background: var(--sig-form-bg);
      color: var(--sig-form);
    }
    .summary-icon.high {
      background: #fdeaec;
      color: var(--tone-red);
    }
    .summary-label {
      min-width: 0;
      flex: 1;
      color: #3a4250;
      font-size: 11.5px;
      font-weight: 700;
      white-space: nowrap;
    }
    .summary-value {
      flex: 0 0 auto;
      font-size: 15px;
      font-weight: 900;
    }
    .summary-value.low { color: var(--sig-form); }
    .summary-value.high { color: var(--tone-red); }
    .trend-mini {
      width: 100%;
      margin-top: 0;
      border-collapse: collapse;
    }
    .trend-mini th {
      padding-bottom: 4px;
      color: var(--muted);
      font-size: 10.5px;
      font-weight: 700;
      text-align: center;
    }
    .trend-mini th:first-child,
    .trend-mini td:first-child {
      text-align: left;
    }
    .trend-mini td {
      text-align: center;
      font-size: 14px;
      font-weight: 900;
    }
    .coinchip {
      display: inline-block;
      border-radius: 8px;
      background: var(--brand-soft);
      color: var(--text);
      padding: 2px 8px;
      font-size: 11.5px;
      font-weight: 800;
    }
    .pos-0 { color: var(--pos-0); }
    .pos-4 { color: var(--pos-4); }
    .pos-6 { color: var(--pos-6); }
    .pos-10 { color: var(--pos-10); }

    .coin-table-head {
      position: sticky;
      top: calc(env(safe-area-inset-top) + 102px);
      z-index: 37;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 96px 96px;
      align-items: center;
      gap: 8px;
      margin-bottom: 4px;
      padding: 9px 14px;
      border-radius: 10px;
      background: var(--bg-subtle);
      color: var(--muted);
      font-size: 12.5px;
      font-weight: 800;
    }

    body[data-active-screen="markets"] #marketListView .coin-table-head {
      isolation: isolate;
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
    }

    body[data-active-screen="markets"] #marketListView .coin-table-head::before {
      content: "";
      position: absolute;
      inset: -8px -2px;
      z-index: -1;
      border-radius: 12px;
      background: var(--card);
    }
    .coin-sort {
      border: 0;
      background: transparent;
      color: inherit;
      padding: 0;
      text-align: right;
      font: inherit;
      white-space: nowrap;
    }
    .sortcar {
      display: inline-flex;
      flex-direction: column;
      line-height: 0.55;
      font-size: 8px;
      vertical-align: 1px;
    }
    .sortcar .ar { color: #c2c8d2; }
    .sortcar .ar.on { color: var(--brand); }
    .coin-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 92px 76px;
      align-items: center;
      gap: 8px;
      width: 100%;
      min-height: 52px;
      border: 0;
      background: transparent;
      color: inherit;
      padding: 7px 2px;
      text-align: left;
    }
    .coin-row:last-child {
      border-bottom: 0;
    }
    .coin-main {
      min-width: 0;
    }
    .coin-name-line {
      display: flex;
      align-items: center;
      gap: 4px;
      min-width: 0;
    }
    .coin-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 15px;
      font-weight: 700;
      line-height: 1.2;
    }
    .coin-contract {
      margin-top: 3px;
      color: var(--muted);
      font-size: 11.5px;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ticker-freshness {
      display: none !important;
      margin-top: 3px;
      color: #9a6700;
      font-size: 10.5px;
      font-weight: 800;
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .coin-pin-mark {
      display: inline-flex;
      align-items: center;
      flex: 0 0 auto;
      color: var(--brand);
    }
    .coin-pin-mark svg {
      width: 14px;
      height: 14px;
      fill: currentColor;
    }
    .coin-price-box {
      min-width: 0;
      text-align: right;
    }
    .coin-price {
      display: block;
      font-size: 16px;
      font-weight: 600;
      line-height: 1.2;
    }
    .change-pill {
      min-width: 70px;
      justify-content: center;
      border-radius: 10px;
      color: #fff;
      padding: 9px 0;
      font-size: 14px;
      font-weight: 900;
    }
    .change-pill.up { background: var(--up); }
    .change-pill.down { background: var(--down); }
    .change-pill.flat { background: var(--sig-gone); }
    .coin-row.manage {
      grid-template-columns: 28px minmax(0, 1fr) auto 30px;
      cursor: default;
    }
    .coin-delete,
    .coin-handle,
    .coin-star {
      border: 0;
      background: transparent;
      color: var(--muted);
      padding: 0;
      font-size: 20px;
      line-height: 1;
    }
    .coin-delete {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--danger);
      color: #fff;
      font-size: 18px;
    }
    .pin-btn {
      border: 1px solid var(--line-strong);
      border-radius: 9px;
      background: var(--card);
      color: #3a4250;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 800;
    }
    .pin-btn.active {
      border-color: var(--brand);
      background: var(--brand-soft);
      color: var(--brand);
    }
    .coin-handle {
      cursor: grab;
      font-size: 22px;
      touch-action: none;
    }
    .coin-row.dragging {
      border-radius: 12px;
      background: var(--card);
      box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14);
    }
    .coin-row.long-pressed,
    .coin-row.menu-open {
      position: relative;
      z-index: 2;
      border-radius: 12px;
      background: var(--card);
      box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14);
    }
    .coin-row.long-pressed {
      transform: scale(1.015);
      transition: transform .12s ease, box-shadow .12s ease;
    }
    .coin-action-layer {
      position: fixed;
      inset: 0;
      z-index: 1200;
      background: transparent;
    }
    .coin-action-menu {
      position: fixed;
      display: flex;
      gap: 4px;
      padding: 8px;
      border-radius: 14px;
      background: rgba(30, 37, 48, 0.96);
      box-shadow: 0 12px 32px rgba(15, 23, 42, 0.28);
      animation: coin-action-pop .14s ease-out;
    }
    .coin-action-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      min-width: 64px;
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: #fff;
      padding: 8px 6px;
      font-size: 13px;
      font-weight: 700;
    }
    .coin-action-item:active {
      background: rgba(255, 255, 255, 0.12);
    }
    .coin-action-item svg {
      width: 22px;
      height: 22px;
      fill: currentColor;
    }
    .coin-action-item[data-coin-action="delete"] {
      color: #ff8a98;
    }
    @keyframes coin-action-pop {
      from { opacity: 0; transform: translateY(-4px); }
      to { opacity: 1; transform: none; }
    }
    .coin-action-menu.above {
      animation-name: coin-action-pop-up;
    }
    @keyframes coin-action-pop-up {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: none; }
    }
    #marketChart.refreshing::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 4;
      background: rgba(15, 23, 42, 0.08);
      pointer-events: none;
    }
    #marketChart.refreshing {
      position: relative;
    }
    #marketChart.refreshing::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 5;
      width: 22px;
      height: 22px;
      margin: -11px;
      border: 2px solid var(--line-strong);
      border-top-color: var(--brand);
      border-radius: 50%;
      animation: market-chart-refresh-spin .7s linear infinite;
      pointer-events: none;
    }
    @keyframes market-chart-refresh-spin {
      to { transform: rotate(360deg); }
    }
    .coin-star {
      width: 24px;
      color: #c8cfd8;
    }
    .coin-star.active {
      color: var(--sig-warn);
    }
    .market-chip {
      display: inline-flex;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: var(--surface-soft);
      color: var(--muted);
      padding: 1px 5px;
      font-size: 10px;
      font-weight: 900;
      line-height: 1.25;
      vertical-align: middle;
    }
    .free-monitor-chip {
      border-color: rgba(14, 165, 233, 0.45);
      background: var(--brand-soft);
      color: var(--brand);
      flex: 0 0 auto;
    }
    .coin-name-line .market-chip {
      flex: 0 0 auto;
      white-space: nowrap;
    }
    .market-filter-strip {
      margin-top: 8px;
    }
    #appSettingsCoins, #appSettingsTrendCoins {
      grid-template-columns: 1fr;
    }
    .settings-market-group {
      display: grid;
      gap: 8px;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--card);
    }
    .settings-market-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
    }
    .settings-free-quota {
      color: var(--brand);
      font-size: 13px;
      font-weight: 900;
    }
    .settings-membership-link {
      border: 0;
      background: transparent;
      color: var(--brand);
      cursor: pointer;
      font: inherit;
      font-weight: 900;
      padding: 0;
      text-decoration: underline;
    }
    .settings-market-actions {
      justify-content: flex-start;
    }
    #appSettingsPeriodPresets {
      margin-bottom: 10px;
    }
    .mini-btn {
      border: 1px solid var(--line-strong);
      border-radius: 7px;
      background: var(--card);
      color: var(--text);
      padding: 5px 8px;
      font-size: 12px;
      font-weight: 800;
    }
    .mini-btn:active {
      transform: translateY(1px);
    }
    .mini-btn.active {
      border-color: rgba(14, 165, 233, 0.4);
      background: var(--brand-soft);
      color: var(--brand);
    }
    .settings-grid.nested {
      grid-template-columns: repeat(auto-fit, minmax(98px, 1fr));
      gap: 8px;
    }
    .settings-grid.nested .check-chip {
      width: auto;
      min-width: 0;
      justify-content: flex-start;
      padding: 0 8px;
      text-align: left;
      white-space: normal;
    }
    @media (max-width: 420px) {
      .market-summary-card {
        padding: 8px 9px;
      }
      .summary-label {
        font-size: 11px;
      }
      .coin-table-head {
        grid-template-columns: minmax(0, 1fr) 82px 82px;
      }
      /* 窄屏下价格与涨跌幅会挤在一起：82px 列放「62,740.56」只剩 4px 余量，
         药丸 min-width 70px 塞进 70px 列余量为 0，六位数价格直接溢出。
         给价格加宽 + 等宽数字 + 略缩字号，药丸相应收窄。 */
      .coin-row {
        /* 涨跌列用 auto：极端值（如 +100.00%）自动加宽，币种名列相应收窄，
           避免固定列宽下药丸文字被裁掉。 */
        grid-template-columns: minmax(0, 1fr) 90px minmax(62px, auto);
      }
      .coin-price {
        font-size: 15px;
        font-variant-numeric: tabular-nums;
      }
      .change-pill {
        min-width: 62px;
        font-size: 12px;
        padding: 8px 4px;
      }



    }

    /* 施工单 207：主题设置沿用现有 sheet，所有状态仅改 data-theme，不改卡片结构。 */
    .row-value {
      margin-left: auto;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
    }

    .checkin-entry .row-value { font-weight: 850; }
    .checkin-entry .row-value.gold { color: var(--gold-ink, #9a4f14); }
    .checkin-entry .row-value.brand { color: var(--brand); }
    .checkin-entry .row-unread-dot,
    .tab-checkin-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); }
    .checkin-entry .row-unread-dot { margin-left: 5px; vertical-align: middle; }
    .tab-checkin-dot { position: absolute; top: 7px; right: calc(50% - 18px); }
    .tab { position: relative; }

    .checkin-screen { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
    .checkin-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
    .checkin-stat { padding: 13px 12px; }
    .checkin-stat b { display: block; font-size: 23px; line-height: 1.1; font-variant-numeric: tabular-nums; }
    .checkin-stat span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 700; }
    .checkin-stat.gold b { color: var(--gold-ink, #9a4f14); }
    .checkin-cycle { border-color: var(--gold-line, #f3d08a); background: linear-gradient(135deg, var(--gold-bg, #fff7ed), var(--card)); }
    .checkin-cycle-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
    .checkin-cycle-head b { font-size: 15px; }
    .checkin-cycle-head span { color: var(--muted); font-size: 12px; font-weight: 700; }
    .checkin-season-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 2px 10px; }
    .checkin-season-head b { font-size: 14px; }
    .checkin-season-head button { border: 0; padding: 4px 0; background: transparent; color: var(--brand); font: inherit; font-size: 13px; font-weight: 800; }
    .checkin-season-warning { margin: 8px 0 0; color: var(--text-secondary); font-size: 12px; font-weight: 750; line-height: 1.5; }
    .checkin-ended { display: grid; gap: 6px; }
    .checkin-ended b { font-size: 16px; }
    .checkin-ended span { color: var(--muted); font-size: 13px; }
    .checkin-cycle-sub { margin: 5px 0 12px; color: var(--text-secondary); font-size: 12px; line-height: 1.55; }
    .checkin-track { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin: 16px 0 13px; }
    .checkin-track::before { content: ""; position: absolute; top: 13px; left: 7%; right: 7%; height: 2px; background: var(--line-strong); }
    .checkin-node { position: relative; z-index: 1; display: grid; justify-items: center; gap: 5px; min-width: 0; }
    .checkin-node i { display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--line-strong); border-radius: 50%; background: var(--card); color: var(--muted); font-size: 11px; font-style: normal; font-weight: 850; }
    .checkin-node.done i { border-color: var(--gold-ink, #b7791f); background: var(--gold-ink, #b7791f); color: #fff; }
    .checkin-node.today i { border-color: var(--gold-ink, #b7791f); color: var(--gold-ink, #b7791f); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-ink, #b7791f) 18%, transparent); }
    .checkin-node.gift i { width: 31px; height: 31px; margin-top: -3px; border-style: dashed; border-color: var(--gold-ink, #b7791f); color: var(--gold-ink, #b7791f); }
    .checkin-node.done.gift i { color: #fff; }
    .checkin-node small { min-height: 22px; color: var(--muted); font-size: 9px; line-height: 1.15; text-align: center; }
    .checkin-node.gift small { color: var(--gold-ink, #b7791f); font-weight: 850; }
    .checkin-node.makeup i { border-style: dashed; border-color: var(--brand, #2f6df6); background: var(--card); color: var(--brand, #2f6df6); }
    .checkin-node.makeup.done i { background: color-mix(in srgb, var(--brand, #2f6df6) 14%, var(--card)); }
    .checkin-node.makeup small { color: var(--brand, #2f6df6); font-weight: 700; }
    .checkin-makeup-choice .checkin-makeup-actions { display: flex; gap: 8px; margin-top: 10px; }
    .checkin-makeup-choice .checkin-makeup-actions .btn { flex: 1; }
    .checkin-action { width: 100%; margin-top: 3px; }
    .checkin-hint { margin-top: 10px; padding: 9px 10px; border: 1px solid var(--gold-line, #f3d08a); border-radius: 10px; background: var(--gold-bg, #fff7ed); color: var(--text-secondary); font-size: 12px; line-height: 1.55; }
    .checkin-makeup { margin-top: 10px; }
    .checkin-makeup .section-title { margin-bottom: 6px; }
    .checkin-makeup-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; font-variant-numeric: tabular-nums; }
    .checkin-makeup-row:first-of-type { border-top: 0; }
    .checkin-makeup-action { min-width: 64px; padding: 6px 10px; font-size: 12px; }
    .checkin-makeup-exhausted, .checkin-makeup-feedback { margin-top: 8px; font-size: 12px; line-height: 1.5; }
    .checkin-makeup-exhausted, .checkin-makeup-feedback.error { color: var(--danger); }
    .checkin-makeup-feedback.ok { color: var(--ok); }
    .checkin-makeup-upgrade { margin-top: 10px; }
    .checkin-rules { margin: 8px 0 0; padding-left: 18px; color: var(--text-secondary); font-size: 12px; line-height: 1.75; }
    .checkin-rules li::marker { color: var(--gold-ink, #9a4f14); }
    .checkin-start-banner { position: fixed; z-index: 51; left: 10px; right: 10px; bottom: calc(68px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; padding: 10px 11px 10px 13px; border: 1px solid var(--gold-line, #f3d08a); border-radius: 14px; background: var(--gold-bg, #fff7ed); box-shadow: 0 10px 28px rgba(15, 23, 42, .16); transition: opacity .3s ease, transform .3s ease; }
    .checkin-start-banner.leaving { opacity: 0; transform: translateY(8px); }
    .checkin-start-copy { display: grid; gap: 2px; min-width: 0; flex: 1; }
    .checkin-start-copy b { color: var(--gold-ink, #7c2d12); font-size: 13px; line-height: 1.35; }
    .checkin-start-copy span { color: var(--text-secondary); font-size: 11.5px; line-height: 1.4; }
    .checkin-start-banner button { flex: 0 0 auto; border: 0; border-radius: 10px; padding: 8px 13px; background: var(--gold-ink, #b7791f); color: #fff; font: inherit; font-size: 13px; font-weight: 850; }
    .checkin-start-banner .checkin-start-close { width: 44px; height: 44px; padding: 0; background: transparent; color: var(--gold-ink, #7c2d12); font-size: 24px; font-weight: 500; }

    .theme-settings-body {
      display: grid;
      gap: 8px;
      padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }

    .theme-option {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--surface-raised);
      color: var(--text);
      text-align: left;
    }

    .theme-option.selected {
      border-color: var(--brand);
      background: var(--brand-soft);
    }

    .theme-option-copy {
      display: grid;
      gap: 4px;
    }

    .theme-option-copy strong { font-size: 15px; }
    .theme-option-copy small { color: var(--muted); font-size: 12px; }
    .theme-option-check { color: var(--brand); font-size: 20px; font-weight: 900; opacity: 0; }
    .theme-option.selected .theme-option-check { opacity: 1; }

    .settings-screen {
      padding-bottom: 12px;
    }

    .settings-identity-card .profile {
      justify-content: space-between;
    }

    .settings-avatar-btn {
      position: relative;
      border: none;
      padding: 0;
      cursor: pointer;
    }

    .settings-avatar-edit-badge {
      position: absolute;
      right: -2px;
      bottom: -2px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--brand);
      color: #fff;
      display: grid;
      place-items: center;
      font-size: 11px;
      border: 2px solid var(--surface-raised);
    }

    .settings-nickname-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      border: 0;
      background: transparent;
      padding: 8px 0;
      font-size: 17px;
      font-weight: 900;
      color: var(--text);
    }

    .avatar-picker-body {
      padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }

    .avatar-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }

    .avatar-option {
      aspect-ratio: 1;
      border-radius: 16px;
      border: 2px solid var(--line);
      background: var(--surface-raised);
      padding: 6px;
      display: grid;
      place-items: center;
      overflow: hidden;
    }

    .avatar-option img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 10px;
    }

    .avatar-option.selected {
      border-color: var(--brand);
      background: var(--brand-soft);
    }

    /* 历史规则中最常见的白底/浅底表面统一收敛到语义 token；信号徽标使用固定基础色，行情涨跌由 --up/--down 控制。 */
    :root[data-theme="dark"] body,
    :root[data-theme="dark"] .app-shell,
    :root[data-theme="dark"] .app-orientation-gate,
    :root[data-theme="dark"] .sheet,
    :root[data-theme="dark"] .sheet-head,
    :root[data-theme="dark"] .sheet-body,
    :root[data-theme="dark"] .guide-nav,
    :root[data-theme="dark"] .tabbar,
    :root[data-theme="dark"] .resonance-member,
    :root[data-theme="dark"] .guide-item,
    :root[data-theme="dark"] input,
    :root[data-theme="dark"] select,
    :root[data-theme="dark"] textarea {
      background: var(--surface-raised);
      color: var(--text);
    }

    /* .guide-highlights carries the .guide-item class too (for card sizing/
       spacing) but needs its own brand-tinted background instead of the
       generic dark surface above — same selector specificity, later in
       source order, so this wins for just this one property pair. */
    :root[data-theme="dark"] .guide-highlights {
      background: var(--brand-soft);
      border-color: var(--brand-soft);
    }

    :root[data-theme="dark"] .sheet-backdrop { background: var(--overlay); }
    :root[data-theme="dark"] .sheet-close,
    :root[data-theme="dark"] .guide-chip,
    :root[data-theme="dark"] .resonance-grade,
    :root[data-theme="dark"] .guide-image-wrap,
    :root[data-theme="dark"] .guide-image,
    :root[data-theme="dark"] .skrow,
    :root[data-theme="dark"] .pull-refresh-indicator {
      background: var(--surface-soft);
      color: var(--text-secondary);
    }

    :root[data-theme="dark"] .guide-text,
    :root[data-theme="dark"] .guide-empty,
    :root[data-theme="dark"] .guide-section h3,
    :root[data-theme="dark"] .resonance-member-head strong,
    :root[data-theme="dark"] .resonance-member-sub { color: var(--text); }

    :root[data-theme="dark"] .settings-hero,
    :root[data-theme="dark"] .membership-card,
    :root[data-theme="dark"] .market-summary-card,
    :root[data-theme="dark"] .op-card,
    :root[data-theme="dark"] .watch-card {
      background: var(--card);
      border-color: var(--line);
    }

    /* 新组件专属暗色暖金，不跟随 membership-card 的通用深色降级。 */
    :root[data-theme="dark"] .trial-claim-modal {
      border-color: #8b5b1b;
      background: #251b12;
      color: #fff0cc;
      box-shadow: 0 22px 54px rgba(0, 0, 0, 0.52);
    }
    :root[data-theme="dark"] .checkin-cycle { background: linear-gradient(135deg, #3a2c12, var(--card)); border-color: #7a5c22; }
    :root[data-theme="dark"] .checkin-start-banner,
    :root[data-theme="dark"] .checkin-hint { background: #3a2c12; border-color: #7a5c22; }
    :root[data-theme="dark"] .checkin-start-copy b,
    :root[data-theme="dark"] .checkin-stat.gold b,
    :root[data-theme="dark"] .checkin-node.gift i,
    :root[data-theme="dark"] .checkin-node.gift small { color: #f6c768; }
    :root[data-theme="dark"] #checkinStartAction,
    :root[data-theme="dark"] .checkin-node.done i { background: #e4a73e; border-color: #e4a73e; color: #301b08; }
    :root[data-theme="dark"] .checkin-node.done.gift i { color: #301b08; }
    :root[data-theme="dark"] .checkin-start-banner .checkin-start-close { color: #f6c768; }
    :root[data-theme="dark"] .checkin-node.makeup i,
    :root[data-theme="dark"] .checkin-node.makeup small { color: #7aa8ff; border-color: #7aa8ff; }
    :root[data-theme="dark"] .checkin-node.makeup.done i { background: rgba(122, 168, 255, .16); }
    :root[data-theme="dark"] .trial-claim-modal-hero { background: linear-gradient(135deg, #533418, #6d471b 54%, #81591e); }
    :root[data-theme="dark"] .trial-claim-modal-kicker { color: #f6cb79; }
    :root[data-theme="dark"] .trial-claim-modal h2 { color: #fff1ce; }
    :root[data-theme="dark"] .trial-claim-modal-hero p { color: #f4d59a; }
    :root[data-theme="dark"] .trial-claim-modal-close { border-color: rgba(255, 230, 175, 0.34); background: rgba(38, 25, 13, 0.52); color: #fff0cc; }
    :root[data-theme="dark"] .trial-claim-benefit { border-color: #67461e; background: #322312; color: #ffe7b5; }
    :root[data-theme="dark"] .trial-claim-benefit svg { background: #503416; stroke: #ffd17a; }
    :root[data-theme="dark"] .trial-claim-modal-action { background: #e4a73e; color: #301b08; box-shadow: 0 7px 14px rgba(0, 0, 0, 0.3); }
    :root[data-theme="dark"] .trial-claim-modal-note { color: #d9bc87; }
    :root[data-theme="dark"] .national-day-modal { background: #2a211a; border-color: #765536; }
    :root[data-theme="dark"] .national-day-modal .trial-claim-modal-hero { background: linear-gradient(145deg, #4b3226, #65452c); border-bottom-color: #765536; }
    :root[data-theme="dark"] .national-day-modal .trial-claim-modal-kicker { background: #e5b86b; color: #372111; }
    :root[data-theme="dark"] .national-day-modal h2 { color: #ffedc5; }
    :root[data-theme="dark"] .national-day-modal .trial-claim-modal-hero p,
    :root[data-theme="dark"] .national-day-perks { color: #f0d5b0; }
    :root[data-theme="dark"] .national-day-modal .trial-claim-modal-action { background: #e5b86b; color: #372111; }
    :root[data-theme="dark"] #nationalDayClaimCard .btn { background: #493626; border-color: #8c6841; color: #ffe1ac; }

    :root[data-theme="dark"] .settings-hero-row { border-color: var(--line); }
    :root[data-theme="dark"] .settings-switch input:disabled + span { background: var(--line-strong); }
    :root[data-theme="dark"] .theme-option { box-shadow: none; }
    :root[data-theme="dark"] .summary-icon.high { background: rgba(251, 113, 133, 0.18); }

    /* 这些组件背景已经跟随 var(--card)/var(--bg-subtle) 变暗，但文字色是写死的深色，
       暗色下与背景撞成低对比度——统一收敛到 var(--text)，不逐条改动亮色态取值。 */
    :root[data-theme="dark"] .icon-btn,
    :root[data-theme="dark"] .seg-btn,
    :root[data-theme="dark"] .period-btn,
    :root[data-theme="dark"] .kline-fullscreen-btn,
    :root[data-theme="dark"] .kline-fullscreen-close,
    :root[data-theme="dark"] .chart-readout,
    :root[data-theme="dark"] .grade-chip,
    :root[data-theme="dark"] .op-signal-chip,
    :root[data-theme="dark"] .tag,
    :root[data-theme="dark"] .check-chip,
    :root[data-theme="dark"] .watch-chip,
    :root[data-theme="dark"] .pin-btn,
    :root[data-theme="dark"] .badge {
      color: var(--text);
    }
    :root[data-theme="dark"] .period-count,
    :root[data-theme="dark"] .grade-count,
    :root[data-theme="dark"] .signal-badge.gone,
    :root[data-theme="dark"] .op-progress-tag.expired {
      color: var(--text-secondary);
    }

    /* .signal-badge 系列自带饱和色底+深色字的语义配色（低点绿/高点红），
       未接入变量体系；上面通用 .badge 暗色规则跟它同选择器优先级，
       后声明会赢，只改了字色、没改底色，导致"字几乎看不见"。这里专门
       给这几个语义组合定深色底+亮色字，特异度更高（多一层 class），
       同时也顶掉通用 .badge 规则。 */
    :root[data-theme="dark"] .signal-badge.bottom,
    :root[data-theme="dark"] .signal-badge.bottom.form {
      color: var(--sig-form);
      background: var(--sig-form-bg);
    }
    :root[data-theme="dark"] .signal-badge.top,
    :root[data-theme="dark"] .signal-badge.top.form {
      color: var(--tone-red);
      background: rgba(251, 113, 133, 0.16);
    }
    :root[data-theme="dark"] .signal-badge.bottom.pass {
      border-color: rgba(74, 222, 164, 0.4);
      background: rgba(74, 222, 164, 0.1);
    }
    :root[data-theme="dark"] .signal-badge.top.pass {
      border-color: rgba(251, 113, 133, 0.4);
      background: rgba(251, 113, 133, 0.1);
    }

    /* .signal-grade-chip（S/A/B/C 小圆标）同样是自带饱和色底+深色字，
       暗色下偏闷、B 尤其发暗，给四档都配一套亮色态字+暗色态底。 */
    :root[data-theme="dark"] .signal-grade-chip.grade-S {
      border-color: rgba(246, 199, 104, 0.5);
      background: var(--gold-bg);
      color: var(--gold);
    }
    :root[data-theme="dark"] .signal-grade-chip.grade-A {
      border-color: rgba(251, 113, 133, 0.45);
      background: rgba(251, 113, 133, 0.14);
    }
    :root[data-theme="dark"] .signal-grade-chip.grade-B {
      border-color: rgba(45, 212, 191, 0.45);
      background: rgba(45, 212, 191, 0.14);
      color: #5eead4;
    }
    :root[data-theme="dark"] .signal-grade-chip.grade-C {
      border-color: rgba(251, 146, 60, 0.45);
      background: rgba(251, 146, 60, 0.14);
      color: #fdba74;
    }

    /* 共振标题/信号弹窗方向词，与 .signal-badge 同一套语义色，同样要重铺深色底。 */
    :root[data-theme="dark"] .resonance-dir.bottom,
    :root[data-theme="dark"] .signal-dir.bottom {
      color: var(--sig-form);
      background: var(--sig-form-bg);
    }
    :root[data-theme="dark"] .resonance-dir.top,
    :root[data-theme="dark"] .signal-dir.top {
      color: var(--tone-red);
      background: rgba(251, 113, 133, 0.16);
    }

    /* 机会/订阅卡片右上角的进行中/已完成/已退出角标，同样是饱和色底+深色字。 */
    :root[data-theme="dark"] .op-progress-tag {
      background: var(--sig-form-bg);
      color: var(--sig-form);
    }
    :root[data-theme="dark"] .op-progress-tag.complete {
      background: var(--sig-warn-bg);
      color: var(--sig-warn);
    }
    :root[data-theme="dark"] .op-progress-tag.stopped {
      background: rgba(251, 113, 133, 0.16);
      color: var(--danger);
    }
    /* 复盘中心的档位标签与上面三条同源，暗色下一并跟随。 */
    :root[data-theme="dark"] .review-tag-t3 {
      background: var(--sig-warn-bg);
      color: var(--sig-warn);
    }
    :root[data-theme="dark"] .review-tag-t2,
    :root[data-theme="dark"] .review-tag-t1 {
      background: var(--sig-form-bg);
      color: var(--sig-form);
    }
    :root[data-theme="dark"] .tag.risk {
      background: rgba(251, 113, 133, 0.16);
      color: var(--danger);
    }

    /* 首页"高低点监控"概览卡：文字色写死在子元素(.summary-label)上，
       跟父卡片(.market-summary-card)背景不在同一条规则里，之前几轮按
       "同一规则块背景+文字"扫描的方式漏掉了这类"父背景、子写死文字"的组合。 */
    :root[data-theme="dark"] .summary-label {
      color: var(--text-secondary);
    }
    :root[data-theme="dark"] .op-price-grid .target-achieved span,
    :root[data-theme="dark"] .op-price-grid .target-achieved strong {
      color: var(--sig-form);
    }
    :root[data-theme="dark"] .market-warning,
    :root[data-theme="dark"] .watch-limit-note,
    :root[data-theme="dark"] .membership-soon {
      color: var(--sig-warn);
    }
    :root[data-theme="dark"] .watch-toggle-chip {
      border-color: var(--line-strong);
      color: var(--text);
    }
    :root[data-theme="dark"] .check-chip:has(input:checked) {
      color: var(--brand);
    }

    /* 施工单 251：严格沿用原型的紧凑列表、阅读正文与提醒抽屉规格。 */
    .profile-card-button {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      border: 1px solid var(--line);
      color: inherit;
      font: inherit;
      text-align: left;
      cursor: pointer;
    }
    .profile-card-button:active {
      transform: scale(.99);
    }
    .profile-cta {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-left: auto;
      color: var(--muted);
      font-size: 20px;
    }
    .profile-upgrade-action {
      color: var(--brand);
      font-size: 13px;
      font-weight: 850;
      line-height: 1.2;
    }

    /* 施工单 321：账号入口与会员中心共用同一套等级视觉。 */
    .lv-free { --lv: #8a93a3; --lv-soft: #f1f5f9; --lv-ink: #475569; }
    .lv-plus { --lv: #0ea5e9; --lv-soft: #e6f6fd; --lv-ink: #0b6a86; }
    .lv-pro { --lv: #d9a441; --lv-soft: #fdf4e2; --lv-ink: #7a5510; }
    .lv-max { --lv: #c9a227; --lv-soft: #1f2937; --lv-ink: #f0d79b; }
    .lv-expired { --lv: #f59e0b; --lv-soft: #fff4e6; --lv-ink: #92400e; }
    :root[data-theme="dark"] .lv-free { --lv-soft: #223044; --lv-ink: #c2cddd; }
    :root[data-theme="dark"] .lv-plus { --lv-soft: #0c3547; --lv-ink: #8fdcf6; }
    :root[data-theme="dark"] .lv-pro { --lv-soft: #3d2f12; --lv-ink: #f3cf82; }
    :root[data-theme="dark"] .lv-max { --lv-soft: #14181f; --lv-ink: #f0d79b; }
    :root[data-theme="dark"] .lv-expired { --lv-soft: #43301a; --lv-ink: #fcd9a0; }

    .profile-card-button { position: relative; display: block; overflow: hidden; background: linear-gradient(135deg, var(--lv-soft) 0%, var(--card) 62%); border-color: color-mix(in srgb, var(--lv) 28%, var(--line)); }
    .profile-card-button.ismax, #membershipCard.ismax { color: #f8e8b8; background: linear-gradient(135deg, #111827, #2b2412); border-color: #75612b; }
    .profile-card-button .profile { align-items: center; }
    .profile-tier { position: absolute; top: 12px; right: 12px; margin: 0; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--lv-soft) 78%, white); color: var(--lv-ink); font-size: 11px; font-weight: 900; }
    .profile-avatar-wrap { position: relative; flex: 0 0 auto; }
    .profile-card-button .avatar { border: 3px solid var(--lv); box-shadow: 0 0 0 2px var(--card); }
    .profile-card-button.ismax .avatar, #membershipCard.ismax .avatar { background: #2b2412; color: #f0d79b; }
    .member-crest { display: inline-flex; align-items: center; justify-content: center; }
    .member-crest svg { width: 26px; height: 20px; overflow: visible; }
    .member-crest path, .member-crest rect { fill: var(--lv); }
    .member-crest .member-crest-gem { fill: var(--lv-soft); }
    .lv-max .member-crest path, .lv-max .member-crest rect { fill: url(#memberCrestMaxGrad); }
    .profile-crest { position: absolute; top: -11px; left: -3px; transform: rotate(-8deg); }
    .profile-member-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 11px; border-top: 1px solid color-mix(in srgb, var(--lv) 22%, transparent); color: var(--lv-ink); font-size: 13px; font-weight: 800; }
    .profile-card-button .profile-cta { font-size: 16px; color: var(--lv-ink); }
    .profile-card-button .profile-upgrade-action { color: inherit; }
    .profile-card-button.ismax .name, .profile-card-button.ismax .muted { color: inherit; }
    .member-crest-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

    #membershipCard { color: var(--lv-ink); background: linear-gradient(135deg, var(--lv-soft) 0%, var(--card) 62%); border: 1px solid color-mix(in srgb, var(--lv) 28%, var(--line)); }
    #membershipCard .membership-tier { display: flex; align-items: center; gap: 7px; color: inherit; font-size: 21px; }
    #membershipCard .membership-crest { min-height: 20px; }
    #membershipCard #membershipExpire { color: color-mix(in srgb, var(--lv-ink) 78%, var(--muted)); }
    #membershipCard .membership-action { margin-top: 14px; color: white; background: var(--lv); border-color: var(--lv); }
    #membershipCard.ismax .membership-action { color: #2b2412; background: #f0d79b; border-color: #f0d79b; }
    /* 免费档 --lv 是中性灰，直接当主按钮底色会被读成「已禁用」，改回品牌色。 */
    #membershipCard.lv-free .membership-action { color: #fff; background: var(--brand); border-color: var(--brand); }
    .profile-card-button.lv-free .profile-upgrade-action { color: var(--brand); }
    .membership-own-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
    .membership-own-grid div { padding: 9px; border-radius: 9px; background: var(--surface-soft); color: var(--text-secondary); font-size: 12px; font-weight: 750; }
    .membership-own-grid .own.no { opacity: .45; }
    .membership-own-grid .own.no span { color: var(--muted); }
    .membership-own-grid span { color: var(--lv); font-weight: 950; margin-right: 3px; }
    .membership-own-grid b { color: var(--text); font-weight: 900; }
    .membership-upsell-card { display: grid; gap: 12px; }
    .membership-upsell-list { display: grid; gap: 8px; color: var(--text-secondary); font-size: 13px; font-weight: 750; }
    .membership-upsell-list span { display: inline-block; width: 18px; color: var(--lv); font-weight: 950; }
    .membership-purchase-note { color: var(--muted); font-size: 13px; line-height: 1.5; }
    .membership-benefits-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 0; border: 0; color: var(--text); background: transparent; font: inherit; font-weight: 900; cursor: pointer; }
    .membership-benefits-toggle[aria-expanded="true"] .chev { transform: rotate(90deg); }
    .membership-benefits-body { margin-top: 12px; }
    .membership-benefits td.current-tier { background: var(--lv-soft); border-radius: 4px; }
    .membership-benefits-note { margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
    .content-screen {
      height: calc(100vh - max(14px, env(safe-area-inset-top)) - 84px - env(safe-area-inset-bottom));
      height: calc(100dvh - max(14px, env(safe-area-inset-top)) - 84px - env(safe-area-inset-bottom));
      min-height: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 0;
    }
    .content-sticky-head {
      position: sticky;
      top: 0;
      z-index: 3;
      margin: 0 0 12px;
      padding: 2px 0 0;
      background: var(--card);
    }
    .content-screen .membership-page-head {
      margin: 0 0 12px;
    }
    .content-screen .membership-page-head .section-title {
      margin: 0;
    }
    .content-reminder-btn {
      flex: 0 0 auto;
      margin-left: auto;
      min-height: 32px;
      padding: 0 10px;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      background: var(--card);
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }
    .content-body { padding: 0 12px 8px; }
    .content-seg {
      display: flex;
      gap: 2px;
      padding: 3px;
      margin: 0 0 12px;
      border-radius: 11px;
      background: var(--bg-subtle);
    }
    .content-seg button {
      flex: 1;
      min-height: 32px;
      border: 0;
      border-radius: 9px;
      color: var(--muted);
      background: transparent;
      font: inherit;
      font-size: 13px;
      font-weight: 800;
    }
    .content-seg button[aria-pressed="true"] {
      color: var(--text);
      background: var(--card);
      box-shadow: var(--shadow-card);
    }
    .content-post-list {
      padding: 0 14px;
      margin-bottom: 10px;
      border: 1px solid var(--line);
      border-radius: var(--radius-card);
      background: var(--card);
      box-shadow: var(--shadow-card);
    }
    .list-label {
      margin: 4px 2px 8px;
      color: var(--muted);
      font-size: 12.5px;
      font-weight: 800;
    }
    .more-link {
      display: block;
      width: 100%;
      padding: 12px 0;
      margin: 2px 0 0;
      border: 0;
      border-radius: var(--radius-card);
      background: transparent;
      color: var(--brand);
      font: inherit;
      font-size: 13.5px;
      font-weight: 800;
      text-align: center;
      cursor: pointer;
    }
    .more-link:active { opacity: .65; }
    .content-post-row {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      width: 100%;
      padding: 12px 0;
      border: 0;
      border-bottom: 1px solid var(--line);
      color: inherit;
      background: transparent;
      font: inherit;
      text-align: left;
      cursor: pointer;
    }
    .content-post-row:last-child { border-bottom: 0; }
    .content-post-row .unread-mark {
      flex: 0 0 6px;
      width: 6px;
      height: 6px;
      margin-top: 6px;
      border-radius: 50%;
      background: var(--brand);
    }
    .content-post-row.is-read .unread-mark { background: transparent; }
    .content-post-row .post-main { flex: 1; min-width: 0; }
    .post-meta { display: flex; gap: 7px; margin-bottom: 4px; }
    .post-day { color: var(--muted); font-size: 11.5px; font-weight: 800; }
    .post-title { display: block; margin-bottom: 4px; font-size: 14.5px; font-weight: 800; line-height: 1.42; }
    .post-sum { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 12.5px; line-height: 1.5; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .content-post-row .post-thumb { flex: 0 0 76px; width: 76px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--bg-subtle); object-fit: cover; }
    .content-post-row .post-thumb-empty { display: grid; place-items: center; color: var(--muted); opacity: .55; }
    .content-post-row .post-thumb-empty svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
    .content-loading .sk { height: 66px; margin-bottom: 10px; border-radius: 12px; background: linear-gradient(100deg, var(--bg-subtle) 30%, var(--card) 50%, var(--bg-subtle) 70%); background-size: 200% 100%; animation: sk 1.2s linear infinite; }
    .article-head { display: flex; align-items: flex-start; gap: 12px; padding: 4px 2px 14px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
    .article-head-main { flex: 1; min-width: 0; }
    .article-head .article-share { flex: none; margin: -2px -6px 0 0; }
    .article-title { margin: 0 0 8px; font-size: 21px; font-weight: 950; line-height: 1.34; letter-spacing: -.015em; }
    .article-byline, .article-foot { color: var(--muted); font-size: 12.5px; font-weight: 700; }
    .article p { margin: 0 0 15px; color: var(--text); font-size: 17px; line-height: 1.75; }
    .article figure { margin: 0 0 18px; }
    .fig-media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-subtle); cursor: zoom-in; }
    .fig-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .fig-zoom { position: absolute; right: 8px; bottom: 8px; padding: 3px 8px; border-radius: 999px; background: rgba(15, 23, 42, .62); color: #fff; font-size: 10.5px; font-weight: 800; }
    figcaption { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.5; text-align: center; }
    .article-foot { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 11.5px; line-height: 1.6; }
    .article-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 12px; }
    .article-react { display: flex; gap: 6px; }
    .react-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); }
    .react-btn.is-mine { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
    .react-btn:active { opacity: .65; }
    .react-emoji { font-size: 14px; line-height: 1; }
    .react-btn b { font-size: 11.5px; font-variant-numeric: tabular-nums; }
    .react-btn b:empty { display: none; }
    .article-share { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--brand); border-radius: 999px; background: var(--brand); color: #fff; }
    .article-share svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .article-share:active, .article-share:disabled { opacity: .55; }
    /* 标题旁的分享只做轻提示：灰色线框图标，不抢标题。 */
    .article-share.is-quiet { width: 36px; height: 36px; border-color: transparent; background: transparent; color: var(--muted); }
    .article-share.is-quiet svg { width: 19px; height: 19px; stroke-width: 1.8; }
    #contentSharePanel { margin-top: 10px; }
    .article-head + #contentSharePanel { margin: -6px 0 16px; }
    .content-share-preview { display: block; width: 100%; height: auto; border-radius: 12px; -webkit-touch-callout: default; -webkit-user-select: auto; user-select: auto; }
    .content-share-hint { margin-top: 8px; font-size: 11.5px; }
    .article-nav { display: flex; gap: 8px; margin-top: 14px; }
    .article-nav button { flex: 1; min-height: 44px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); background: var(--card); color: var(--text); text-align: left; }
    .article-nav span, .article-nav b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .article-nav span { color: var(--muted); font-size: 10.5px; }
    .article-nav b { font-size: 12.5px; }
    .content-settings-sheet .sheet { padding: 6px 14px calc(18px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; }
    .content-schedule { display: flex; gap: 8px; margin: 8px 0; }
    .content-schedule div { flex: 1; padding: 9px 11px; border-radius: 10px; background: var(--bg-subtle); }
    .content-schedule small, .content-schedule b { display: block; }
    .content-schedule small { margin-bottom: 3px; color: var(--muted); font-size: 11px; font-weight: 800; }
    .content-schedule b { font-size: 12.5px; }
    .content-disclaimer { margin-bottom: 12px; font-size: 11.5px; }
    .content-settings-card { margin-bottom: 10px; }
    .content-switch-row { display: flex; align-items: center; justify-content: space-between; min-height: 50px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 800; }
    .content-switch-row:last-child { border: 0; }
    .content-switch-row input { position: relative; width: 46px; height: 27px; border: 0; border-radius: 999px; background: var(--line-strong); appearance: none; }
    .content-switch-row input::after { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); content: ""; transition: transform .2s; }
    .content-switch-row input:checked { background: var(--brand); }
    .content-switch-row input:checked::after { transform: translateX(19px); }
    .content-lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; overflow: hidden; padding: 18px; background: rgba(4, 8, 15, .94); touch-action: none; }
    .content-lightbox img { max-width: 100%; max-height: 88vh; border-radius: 8px; touch-action: none; will-change: transform; }
    .content-lightbox button { position: absolute; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 18px; }

/* 邀请分享与确认版海报：保持窄屏可操作。 */
.invite-poster-actions{display:flex;gap:8px;margin-top:12px}.invite-poster-actions button{flex:1}

/* 活动标签与签到横条错开；导航高度含安全区，关闭按钮独立留出间隔。 */
.campaign-fab { position: fixed; z-index: 51; right: 12px; bottom: calc(82px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 14px; border-radius: 999px; background: linear-gradient(100deg, #0c2242, #0a3a7a); color: #fff; box-shadow: 0 8px 22px rgba(10,58,122,.35); }
.campaign-fab.above-checkin, .campaign-fab.above-toast { bottom: calc(164px + env(safe-area-inset-bottom)); }
.campaign-fab button { border: 0; background: transparent; color: inherit; font-family: inherit; cursor: pointer; }
.campaign-fab-open { min-height: 36px; padding: 0 4px; font-size: 13px; font-weight: 800; }
.campaign-fab-close { width: 36px; height: 36px; font-size: 22px; border-left: 1px solid rgba(255,255,255,.2) !important; }
.campaign-row-right { display: flex; align-items: center; gap: 8px; }
.campaign-tag { padding: 3px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: 11px; font-weight: 800; }
.campaign-sheet { height: calc(100dvh - env(safe-area-inset-top) - 18px); }
.campaign-sheet .sheet-title { flex: 1; }
.campaign-article { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 16px 24px; }
.campaign-article h2 { margin: 0 0 8px; font-size: 24px; line-height: 1.4; color: var(--text); }
.campaign-meta { margin-bottom: 20px; color: var(--muted); font-size: 13px; }
.campaign-article p { margin: 0 0 18px; font-size: 17px; line-height: 1.8; color: var(--text-secondary); }
.campaign-article h3 { margin: 26px 0 14px; padding-left: 9px; border-left: 4px solid var(--brand); font-size: 19px; }
.campaign-article u { text-decoration: none; border-bottom: 2px solid var(--brand); font-weight: 800; color: var(--text); padding-bottom: 1px; }
.campaign-cta { flex: 0 0 auto; padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--card); }
.campaign-cta .btn { min-height: 46px; background: var(--brand); color: #fff; font-weight: 800; }
.campaign-cta div { margin-top: 7px; text-align: center; font-size: 11.5px; line-height: 1.6; color: var(--muted); }
:root[data-theme="dark"] .campaign-fab { background: linear-gradient(100deg, #12305c, #1450a8); }

/* 施工单 2030：复用通知权限抽屉，品牌未核对时仅展示通用步骤。 */
.push-arrival-description{padding:13px 14px;border-radius:var(--radius-card);background:var(--surface-soft);border:1px solid var(--line);color:var(--text-secondary);font-size:13px;line-height:1.7}
.push-arrival-link{display:block;margin:6px auto 0;padding:6px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:12px;text-decoration:underline}
.push-settings-sheet{display:flex;flex-direction:column;max-height:92dvh}
.push-settings-brands{display:flex;gap:6px;overflow-x:auto;flex-shrink:0;padding:12px 16px}
.push-settings-brands .guide-chip{flex-shrink:0}
.push-settings-brands .selected{background:var(--brand-soft);color:var(--brand)}
.push-settings-step{padding:13px 0;border-bottom:1px solid var(--line)}
.push-settings-step p{font-size:13px;line-height:1.65;color:var(--text-secondary)}
.push-settings-path{background:var(--surface-soft);padding:8px;border-radius:var(--radius-card)}
.push-settings-footer{flex-shrink:0;margin:0;padding:12px 16px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;line-height:1.6}

/* 2031：活动与帮助二级页沿用应用主题变量和原有 sheet。 */
.help-screen { padding-bottom: 100px; }
.activity-entry { position: relative; padding: 0; }
.activity-entry-open { display:flex; align-items:center; gap:8px; width:100%; padding:16px 0; border:0; background:transparent; color:inherit; text-align:left; font:inherit; }
.activity-entry-open .row-label { flex:1; }
/* 不用 :has()：老安卓 WebView 不支持，改由 JS 给行加 has-inline-checkin。 */
.activity-entry.has-inline-checkin .activity-entry-open { padding-right:64px; }
.activity-entry.has-inline-checkin .activity-entry-open .chev { display:none; }
.activity-inline-checkin { position:absolute; right:0; top:50%; transform:translateY(-50%); padding:5px 12px; min-height:30px; font-size:12px; }
.me-primary-entries .row-value { font-size:11px; }
.help-search { width:100%; max-width:100%; margin:8px 0 18px; padding:13px 14px; border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--text); font:inherit; box-sizing:border-box; }
.help-section-head { display:flex; align-items:center; justify-content:space-between; }
.help-section-head .btn { padding:4px 0; border:0; background:transparent; color:var(--muted); box-shadow:none; font-size:13px; }
.help-chips { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 16px; }
.help-chips .btn { font-size:12px; padding:7px 10px; min-width:0; white-space:normal; }
.help-chips .active, .guide-legend .active { background:var(--brand-soft); color:var(--brand); }
.help-qa + .help-qa { border-top:1px solid var(--line); }
.help-qa .row { width:100%; text-align:left; gap:10px; white-space:normal; }
.help-qa .row span:first-child { flex:1; }
.help-answer { padding:0 4px 16px; font-size:13px; line-height:1.8; overflow-wrap:anywhere; }
.help-answer p { margin:8px 0; }
.help-answer ol { padding-left:22px; }
.help-actions { display:flex; flex-wrap:wrap; gap:8px; }
.help-actions .btn { font-size:12px; }
.help-footer { text-align:center; padding:18px; }
.activity-task { display:flex; align-items:center; gap:12px; padding:10px 0; }
.activity-task > div { flex:1; min-width:0; }
.activity-task p { font-size:12px; margin:8px 0 0; }
.activity-campaign-card, .guide-steps { background:linear-gradient(125deg,#102c50,#194f88); color:#fff; border-radius:18px; }
.activity-campaign-card { width:100%; border:0; text-align:left; padding:22px; display:grid; gap:12px; font:inherit; }
.activity-campaign-card strong { font-size:18px; }
.activity-campaign-card span { font-size:12px; }
.activity-campaign-apply { justify-self:start; padding:7px 12px; border:1px solid #ffffff66; border-radius:8px; }
.activity-checkin > .checkin-stats .card, .activity-checkin > .checkin-cycle { box-shadow:none; }
.guide-step { display:flex; gap:10px; align-items:center; padding:14px 0; }
.guide-step > div { flex:1; min-width:0; }
.guide-step p { font-size:12px; margin:5px 0 0; opacity:.8; }
.guide-step .btn { padding:6px; font-size:11px; flex-shrink:0; }
.guide-steps .btn { padding:6px 10px; background:rgba(255,255,255,.14); color:#fff; border:1px solid #ffffff55; box-shadow:none; }
.guide-step-number { border-radius:50%; background:#ffffff22; width:25px; height:25px; text-align:center; line-height:25px; flex-shrink:0; }
.guide-notifications-done { font-size:11px; }
.guide-example { position:relative; overflow:visible; padding:22px 24px 18px; margin:18px 10px 32px; }
.guide-example-label { position:absolute; right:30px; top:-10px; padding:2px 7px; border-radius:6px; background:var(--brand); color:white; font-size:10px; }
.guide-example .signal-head { gap:6px; align-items:center; font-size:13px; }
.guide-example .signal-tag { color:var(--sig-form); font-size:10px; }
.guide-example .score-badge { position:static; font-size:17px; padding:3px 8px; }
.guide-example .signal-levels { margin:12px 0; font-size:12px; line-height:1.8; }
.guide-example .signal-progress { color:var(--brand); font-size:12px; margin:8px 0; }
.guide-example .muted { font-size:11px; }
.guide-pins button { position:absolute; border:2px solid var(--card); border-radius:50%; color:white; background:var(--brand); width:25px; height:25px; font-weight:bold; }
.guide-pins button:nth-child(1) { left:-9px; top:8px; }
.guide-pins button:nth-child(2) { left:45%; top:-12px; }
.guide-pins button:nth-child(3) { right:-9px; top:8px; }
.guide-pins button:nth-child(4) { left:-9px; top:65px; }
.guide-pins button:nth-child(5) { right:-9px; bottom:7px; }
.guide-pins .active { box-shadow:0 0 0 4px var(--brand-soft); }
.guide-legend { display:grid; gap:5px; }
.guide-legend button { display:flex; gap:10px; border:0; border-radius:10px; padding:10px; background:transparent; color:var(--text); font:inherit; font-size:12px; text-align:left; line-height:1.7; }
.guide-legend b { color:var(--brand); }
#guideTermBody { font-size:13px; line-height:1.8; }
.guide-note { font-size:12px; line-height:1.7; }
html[data-theme="dark"] .guide-item.guide-steps { background:linear-gradient(125deg,#102c50,#194f88); }

.guide-steps, .guide-pages, .guide-anatomy, .guide-glossary, .guide-link { padding:14px; }
.activity-entry .row-unread-dot, #helpReleaseUnread { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--danger); flex-shrink:0; }
#campaignMeSlot { display:grid; gap:12px; }

/* 2031 验收反馈：使用说明精简、K 线 HILO 示意、真实订阅卡示例、回程小条 */
.help-return-chip { position: fixed; z-index: 60; left: 50%; bottom: calc(70px + env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 9px 16px; border: 0; border-radius: 999px; background: var(--text, #0f172a); color: var(--bg, #fff); font: inherit; font-size: 13px; font-weight: 850; box-shadow: 0 8px 22px rgba(15, 23, 42, .22); }
.guide-section h3 { margin: 22px 0 10px; font-size: 15px; }
.guide-section:first-child .guide-steps { margin-top: 4px; }
.guide-pin-host { position: relative; }
.guide-pin { position: absolute; z-index: 2; left: -11px; top: -11px; width: 22px; height: 22px; padding: 0; border: 2px solid var(--card); border-radius: 50%; background: var(--brand); color: #fff; font: inherit; font-size: 11px; font-weight: 900; line-height: 18px; }
.guide-pin.active { background: var(--danger); box-shadow: 0 0 0 3px var(--brand-soft); }
.guide-card-example { position: relative; padding: 14px 4px 4px; }
.guide-card-example .guide-example-label { position: absolute; right: 8px; top: 2px; padding: 2px 7px; border-radius: 6px; background: var(--brand); color: #fff; font-size: 10px; }
.guide-card-host { padding: 6px 4px 2px 12px; pointer-events: auto; }
.guide-card-host .watch-card { overflow: visible; margin: 0; cursor: default; }
.guide-kline-mock { margin: 4px 0 6px; padding: 10px 10px 4px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.guide-kline-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border-radius: 10px; background: var(--surface-soft, rgba(148,163,184,.12)); font-size: 12px; font-weight: 850; text-align: center; }
.guide-kline-seg span { padding: 6px 0; border-radius: 8px; color: var(--muted); }
.guide-kline-seg .on { background: var(--brand); color: #fff; }
.guide-kline-ind { display: flex; gap: 14px; margin: 10px 0 8px; font-size: 11px; font-weight: 850; color: var(--muted); }
.guide-kline-ind .on { color: var(--text); border-bottom: 2px solid var(--brand); }
.guide-kline-note { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; background: var(--surface-soft, rgba(148,163,184,.12)); font-size: 11.5px; font-weight: 800; }
.guide-kline-note b { padding: 1px 6px; border-radius: 6px; background: var(--danger); color: #fff; font-size: 10.5px; }
.guide-kline-note em { margin-left: auto; font-style: normal; color: var(--muted); font-weight: 700; }
.guide-kline-chart { position: relative; margin-top: 6px; }
.guide-kline-svg { display: block; width: 100%; height: auto; overflow: visible; }
.guide-kline-svg .gk-up { stroke: var(--up); fill: var(--up); }
.guide-kline-svg .gk-down { stroke: var(--down); fill: var(--down); }
.guide-kline-svg .gk-target { stroke: var(--brand); stroke-width: 1; stroke-dasharray: 3 3; }
.guide-kline-svg .gk-exit { stroke: var(--gold); stroke-width: 1; }
.guide-kline-svg .gk-target-text { fill: var(--brand); font-size: 9.5px; font-weight: 800; }
.guide-kline-svg .gk-exit-text { fill: var(--gold); font-size: 9.5px; font-weight: 800; }
.guide-kline-svg .gk-mark { fill: var(--sig-form); }
.guide-kline-svg .gk-mark-text { fill: var(--sig-form); font-size: 10px; font-weight: 900; }
.guide-kline-pin { position: absolute; width: 0; height: 0; }
.guide-kline-pin .guide-pin { left: -11px; top: -11px; }
.guide-footer { display: grid; justify-items: center; gap: 10px; padding: 18px 0 8px; text-align: center; }
.guide-footer p { margin: 0; font-size: 11.5px; }
[data-guide-nav][hidden], #guideVersion[hidden] { display: none !important; }
.guide-pin.guide-pin-r { left: auto; right: -14px; top: -12px; }
.guide-kline-note .guide-pin.guide-pin-r { right: -8px; }
.guide-kline-pin .guide-pin.guide-pin-r { left: -11px; right: auto; top: -11px; }
.guide-card-host { padding-left: 22px; }
.guide-card-host .guide-pin { left: -34px; top: 50%; transform: translateY(-50%); }
.guide-card-host .watch-symbol > .guide-pin { top: 10px; }
.guide-card-host .watch-head-right .guide-pin { left: -28px; }
.guide-kline-ind .guide-pin.guide-pin-r { right: -24px; top: -14px; }
/* 2031 验收反馈 v3：限时活动卡压成一行、日常活动合一个板块 */
.activity-campaign-card { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border-radius: 14px; }
.activity-campaign-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.activity-campaign-card strong { font-size: 15px; line-height: 1.3; }
.activity-campaign-card .activity-campaign-text span { font-size: 11.5px; color: #bcd6f7; }
.activity-campaign-card .activity-campaign-apply { flex: none; justify-self: auto; padding: 7px 12px; border: 0; border-radius: 999px; background: #fff; color: #0a3a7a; font-size: 12px; font-weight: 900; }
.activity-task-list { padding-top: 2px; padding-bottom: 2px; }
.activity-task-list .activity-task { padding: 12px 0; }
.activity-task-list .activity-task + .activity-task,
.activity-task-list #activityDailyTasks:not(:empty) + #activityTasks .activity-task:first-child { border-top: 1px solid var(--line); }
.activity-task-list .activity-task strong { font-size: 15px; }
.activity-task-list .activity-task p { margin-top: 4px; }
/* 2031 使用说明 · 什么是高低点（沿用官网首屏动效） */
.guide-hilo { padding: 12px 12px 14px; }
.guide-hilo > p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.guide-hilo-chart { position: relative; margin: 8px 0 10px; padding: 4px 4px 0; border-radius: 12px; background: var(--surface-soft, rgba(148,163,184,.08)); cursor: pointer; }
.guide-hilo-replay { position: absolute; right: 10px; top: 8px; font-size: 11px; font-weight: 800; color: var(--muted); }
.guide-hilo-svg .gh-candle { opacity: 0; animation: guideHiloIn .32s ease-out forwards; }
.guide-hilo-svg .gh-mark { opacity: 0; animation: guideHiloIn .36s ease-out forwards; }
.guide-hilo-svg .gh-mark text { font-size: 12px; font-weight: 900; }
.guide-hilo-svg .gh-warn polygon, .guide-hilo-svg .gh-warn text { fill: var(--sig-warn); }
.guide-hilo-svg .gh-form polygon, .guide-hilo-svg .gh-form text { fill: var(--sig-form); }
@keyframes guideHiloIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .guide-hilo-svg .gh-candle, .guide-hilo-svg .gh-mark { animation: none; opacity: 1; } }
.guide-hilo-legend { display: grid; gap: 6px; }
.guide-hilo-legend > div { display: flex; align-items: flex-start; gap: 8px; }
.guide-hilo-legend p { margin: 0; font-size: 12.5px; line-height: 1.5; }
.guide-hilo-legend b { margin-right: 6px; }
.gh-dot { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 3px; }
.gh-dot.gh-warn { background: var(--sig-warn); }
.gh-dot.gh-form { background: var(--sig-form); }
.guide-hilo-points { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; color: var(--muted); }
/* 施工单 2032：默认规则与单标的例外，复用设置页与主题 token。 */
/* 2032 订阅设置（v3 精简版，2026-10-15 真机反馈）：每个模块一张卡片、标题行统一、去掉说明小字；
   周期/等级为每行 4 个等大按钮；推送开关集中在底部卡片，App 推送关闭时上方区域置灰。 */
.message-settings-body .settings-strategy-tabs { margin: 0; }
.settings-rule-area, .settings-strategy-panel { display: grid; gap: 10px; }
.settings-rule-area .settings-strategy-panel.hidden { display: none; }
.settings-area-disabled { opacity: .42; pointer-events: none; filter: grayscale(.3); transition: opacity .18s ease; }
.card.settings-rule-card { margin: 0; padding: 14px 14px 16px; }
.settings-rule-card .settings-section-head { display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin: 0 0 12px; min-height: 24px; }
.settings-rule-card .settings-section-head .section-title { margin: 0; font-size: 15px; font-weight: 850; }
.settings-default-badge { padding: 2px 6px; border-radius: 5px; background: var(--bg-subtle); color: var(--muted); font-size: 11px; font-weight: 800; line-height: 1.4; }
.settings-section-meta { margin-left: auto; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.settings-link-btn { margin-left: auto; padding: 0; border: 0; background: none; color: var(--brand); font-size: 13px; font-weight: 800; cursor: pointer; }
.settings-section-meta + .settings-link-btn { margin-left: 10px; }
.settings-symbol-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.settings-symbol-tags .mini-btn { min-height: 32px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; }
.settings-symbol-tags .settings-symbol-custom { color: var(--brand); background: var(--brand-soft); border-color: var(--brand); }
.settings-symbol-tags .mini-btn.active { color: var(--brand); background: var(--brand-soft); border-color: var(--brand); }
/* 等大选项按钮：周期、等级（主页面与单标的弹层共用） */
.settings-grid.settings-opt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.settings-opt-grid .check-chip { position: relative; height: 38px; min-height: 38px; display: flex; justify-content: center; padding: 0 4px; border: 1px solid var(--line-strong); border-radius: 10px; font-size: 13px; color: var(--text-secondary); }
.settings-opt-grid .check-chip input[type="checkbox"] { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; min-height: 0; margin: 0; opacity: 0; cursor: pointer; }
.settings-opt-grid .check-chip .check-chip-label, .settings-opt-grid .check-chip .settings-grade-label { flex: 0 1 auto; text-align: center; }
.settings-opt-grid .check-chip.is-checked { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.settings-opt-grid .check-chip.locked { color: #b7791f; background: var(--gold-bg); border-color: #fed7aa; }
#appSettingsGrades .check-chip { display: flex; grid-template-columns: none; justify-content: center; padding: 0 4px; font-size: 13px; }
#appSettingsTrendPeriods .check-chip { padding: 0 4px; font-size: 13px; }
/* 单独设置列表 */
.settings-rule-row { display: flex; gap: 10px; align-items: center; width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); color: var(--text); background: transparent; text-align: left; cursor: pointer; }
.settings-rule-row b { font-size: 14px; }
.settings-rule-row span:first-of-type { flex: 1; text-align: right; font-size: 12.5px; font-weight: 750; color: var(--brand); }
.settings-rule-row span:last-of-type { color: var(--muted); }
.settings-rule-empty { margin: 0; color: var(--muted); font-size: 13px; }
.settings-rule-add { width: 100%; height: 40px; margin-top: 12px; border: 1px dashed var(--line-strong); border-radius: 10px; background: none; color: var(--brand); font-size: 13.5px; font-weight: 800; cursor: pointer; }
/* 推送开关卡片：只保留名称，会员专属显示「会员」标签，锁定说明点击后以 toast 呈现 */
.settings-switch-card .settings-hero-row { padding: 12px 0; border-top: 1px solid var(--line); }
.settings-switch-card .settings-section-head + .settings-hero-row { padding-top: 0; border-top: 0; }
.settings-switch-card .settings-hero-row:last-child { padding-bottom: 0; }
.settings-switch-card .settings-hero-row.hidden { display: none; }
.settings-switch-card .settings-hero-row-desc { display: none; }
.settings-switch-card .settings-hero-row-title { font-size: 14.5px; font-weight: 800; }
.settings-switch-card .settings-switch { width: 50px; height: 30px; }
.settings-switch-card .settings-switch span::after { top: 3px; left: 3px; width: 24px; height: 24px; }
.settings-switch-card .settings-switch input:checked + span::after { transform: translateX(20px); }
.settings-lock-badge { display: none; margin-left: 6px; padding: 2px 6px; border-radius: 5px; background: var(--gold-bg); color: var(--gold); font-size: 10.5px; font-weight: 800; vertical-align: 1px; }
.member-setting-locked .settings-lock-badge { display: inline-block; }
/* 管理 / 选择 / 单标的弹层 */
.settings-coin-dialog { position: absolute; inset: 0; z-index: 220; display: flex; align-items: flex-end; justify-content: center; background: var(--overlay); }
.settings-coin-dialog-card { width: min(100%, 520px); max-height: 86dvh; overflow-y: auto; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; background: var(--card); color: var(--text); box-shadow: var(--shadow-card); }
.settings-coin-dialog-card > .settings-section-head { display: flex; align-items: center; margin-bottom: 4px; }
.settings-coin-dialog-card > .settings-section-head .section-title { font-size: 17px; font-weight: 850; }
.settings-coin-dialog-card > .settings-section-head .mini-btn { margin-left: auto; }
.settings-coin-search { width: 100%; margin: 12px 0; padding: 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-input); color: var(--text); }
#appSettingsCoins .settings-type-head, #appSettingsTrendCoins .settings-type-head { display: none; }
#appSettingsCoins .settings-market-group, #appSettingsTrendCoins .settings-market-group { border: 0; margin: 0; }
#appSettingsCoins .settings-type-body, #appSettingsTrendCoins .settings-type-body { padding: 0; }
#appSettingsCoinMarkets { margin: 4px 0 14px; }
.settings-coin-dialog .settings-market-group .settings-market-actions { margin-bottom: 6px; }
.settings-rule-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 8px; padding: 3px; border-radius: 11px; background: var(--bg-subtle); }
.settings-rule-modes .mini-btn { min-height: 36px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 800; }
.settings-rule-modes .mini-btn.active { background: var(--card); color: var(--brand); box-shadow: 0 1px 3px rgba(15, 23, 42, .1); }
.settings-rule-summary { margin: 10px 0 0; color: var(--muted); font-size: 12.5px; }
.settings-rule-block { margin-top: 18px; }
.settings-rule-label { margin-bottom: 10px; color: var(--text-secondary); font-size: 13px; font-weight: 800; }
.settings-rule-copy { max-height: 110px; overflow-y: auto; }
.settings-rule-unsubscribe { margin-top: 20px; color: var(--tone-red); }

/* 信号交易：与我的页、订阅设置共用主题变量。 */
/* 关闭时移出无障碍树，避免隐藏 sheet 的「关闭」按钮与其他同名按钮冲突。 */
#signalTradingSheet:not(.open) { visibility: hidden; }
.st-coin-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; row-gap: 4px; width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; text-align: left; cursor: pointer; }
.st-coin-main { display: flex; align-items: center; gap: 8px; }
.st-coin-main b { font-size: 15px; }
.st-coin-row small { grid-column: 1; color: var(--muted); font-size: 12px; line-height: 1.5; }
.st-coin-row i { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; color: var(--muted); }
.st-dir { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--brand-soft); color: var(--brand); }
.st-dir.long { background: color-mix(in srgb, var(--up) 14%, transparent); color: var(--up); }
.st-dir.short { background: color-mix(in srgb, var(--down) 14%, transparent); color: var(--down); }
.st-search { width: 100%; box-sizing: border-box; margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: inherit; font-size: 14px; }
.st-pick-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.st-pick-list .st-hint { grid-column: 1 / -1; }
.st-danger-text { color: var(--tone-red); }
.st-screen { width: 100%; max-width: 680px; margin: 0 auto; padding-bottom: 28px; box-sizing: border-box; }
.st-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.st-head h2 { margin: 0; font-size: 20px; }
.st-section { padding: 18px; margin-bottom: 12px; }
.st-section h3 { font-size: 14px; margin: 0 0 14px; }
.st-section h2 { font-size: 23px; line-height: 1.4; margin: 10px 0; }
.st-section p { font-size: 13px; line-height: 1.7; margin: 12px 0; }
.st-options { display: flex; flex-wrap: wrap; gap: 8px; }
.st-options .btn { min-width: 54px; flex: 1 0 auto; }
.st-options .st-custom { position: relative; border-color: var(--brand, #2ca987); color: var(--brand, #2ca987); }
.st-options .st-custom::after { content: ""; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand, #2ca987); border: 2px solid var(--card, #fff); }
.st-options .selected { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.st-options button:disabled { padding: 9px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: transparent; }
.st-hero h2 { margin: 12px 0 10px; }
.st-pill { display: inline-block; font-size: 12px; font-weight: 700; color: var(--brand); background: var(--brand-soft); border-radius: 999px; padding: 3px 10px; }
.st-flow { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); align-items: stretch; gap: 6px; margin-top: 16px; }
.st-node { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; text-align: center; padding: 12px 6px; border-radius: 12px; background: var(--surface-soft); min-width: 0; }
.st-node b { font-size: 14px; line-height: 1.3; }
.st-node span { font-size: 11px; line-height: 1.4; color: var(--muted); }
.st-node.brand { background: var(--brand-soft); }
.st-node.brand b { color: var(--brand); }
.st-arrow { align-self: center; font-style: normal; color: var(--muted); font-size: 14px; }
.st-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.st-benefits li { display: flex; gap: 12px; align-items: flex-start; }
.st-benefits b { display: block; font-size: 14px; line-height: 1.4; }
.st-section .st-benefits p { margin: 4px 0 0; font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.st-check { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--sig-form); background: var(--sig-form-bg); }
.st-exchanges { display: flex; flex-wrap: wrap; gap: 8px; }
.st-exchange { font-size: 13px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); color: var(--muted); }
.st-exchange.on { font-weight: 700; color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.st-section .st-exchanges + p { margin-bottom: 0; }
.st-risk { font-size: 12px; line-height: 1.6; color: var(--muted); margin: 4px 4px 14px; }
.st-connection, .st-record > div, .st-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.st-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.st-toggle input, .st-checks input, .st-coin-check input { accent-color: var(--brand, #2ca987); width: 18px; height: 18px; flex-shrink: 0; }
.st-checks { display: grid; gap: 14px; margin-top: 20px; }
.st-checks label { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.6; }
.st-section input[type=password], .st-section select { display: block; width: 100%; box-sizing: border-box; margin-top: 8px; padding: 12px; background: transparent; color: inherit; border: 1px solid var(--line); border-radius: 10px; }
.st-stepper { display: flex; gap: 6px; }
.st-stepper span { height: 4px; flex: 1; border-radius: 4px; background: var(--line); }
.st-stepper .on { background: var(--brand, #2ca987); }
.st-figures { display: grid; gap: 14px; margin-top: 12px; }
.st-figure { margin: 0; }
.st-figure img { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.st-figure figcaption { margin-top: 6px; color: var(--muted); font-size: 12px; text-align: center; }
.st-howto { margin: 4px 0 12px; padding-left: 20px; line-height: 1.7; }
.st-howto li + li { margin-top: 6px; }
.st-warning { color: #b98624; background: rgba(193,143,45,.1); border-radius: 10px; padding: 12px; }
.st-note { font-size: 13px; line-height: 1.6; padding: 12px; border-radius: 10px; background: var(--surface-soft); }
.st-badge { font-size: 11px; border-radius: 7px; padding: 5px 8px; background: rgba(44,169,135,.1); white-space: nowrap; }
.st-badge.st-demo { margin-left: 6px; background: rgba(120,120,140,.14); }
.st-demo-label { font-size: 13px; color: var(--muted); margin: 12px 0 6px; }
.st-demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st-demo-grid.three { grid-template-columns: 1fr 1fr 1fr; }
.st-demo-grid .btn { min-width: 0; white-space: nowrap; font-size: 13px; padding-left: 4px; padding-right: 4px; }
#stDemoResult { margin-top: 12px; }
.st-sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.st-sec-head h3 { margin: 0; font-size: 15px; }
.st-tag { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--surface-soft); border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.st-count { font-size: 12px; color: var(--muted); }
.st-link { margin-left: auto; border: 0; background: none; padding: 4px 0; color: var(--brand); font-size: 13px; font-weight: 700; cursor: pointer; }
.st-hint, .st-section p.st-hint { font-size: 12px; line-height: 1.6; color: var(--muted); margin: 10px 0 0; }
.st-grid { display: grid; gap: 8px; }
.st-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.st-options.st-grid .btn { min-width: 0; padding-left: 4px; padding-right: 4px; }
.st-status { display: flex; align-items: center; gap: 12px; }
.st-logo { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #0b0e14; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.st-status-main { flex: 1; min-width: 0; }
.st-status-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 16px; font-weight: 800; }
.st-status-main small { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-state { font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2px 7px; }
.st-state.on { color: var(--sig-form); background: var(--sig-form-bg); }
.st-state.off { color: var(--sig-gone); background: var(--sig-gone-bg); }
.st-state.invalid { color: var(--sig-warn); background: var(--sig-warn-bg); }
.st-switch { position: relative; flex: none; width: 46px; height: 28px; }
.st-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.st-switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--line); transition: background .2s; }
.st-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s; }
.st-switch input:checked + span { background: var(--brand); }
.st-switch input:checked + span::after { transform: translateX(18px); }
.st-switch input:disabled + span { opacity: .5; }
.st-section .st-actions { display: flex; gap: 8px; margin-top: 14px; }
.st-section .st-actions .btn { flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px; }
.st-info { font-size: 12px; color: var(--muted); margin: 0 4px 12px; }
.st-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.st-chip { position: relative; font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: inherit; cursor: pointer; }
.st-chip.st-custom { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.st-chip.st-custom::after { content: ""; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); border: 2px solid var(--surface-raised); }
.st-rule-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; text-align: left; cursor: pointer; }
.st-rule-row b { flex: none; font-size: 14px; }
.st-rule-row span { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); text-align: right; }
.st-rule-row i { font-style: normal; color: var(--muted); }
.st-link-card { padding-top: 6px; padding-bottom: 6px; }
.st-link-card .st-rule-row { border-bottom: 0; }
.st-add { width: 100%; margin-top: 12px; padding: 11px; border: 1px dashed var(--line); border-radius: 12px; background: none; color: var(--brand); font-size: 13px; font-weight: 700; cursor: pointer; }
.st-sw-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; }
.st-sw-row + .st-sw-row { border-top: 1px solid var(--line); }
.st-sw-row b { display: block; font-size: 14px; }
.st-sw-row small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.st-fixed { flex: none; font-size: 12px; color: var(--muted); }
#signalTradingBody > .btn[data-st="save"] { margin: 4px 0 12px; }
.st-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.st-tabs button { min-width: 0; padding: 8px 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-raised); color: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.st-tabs button.on { background: var(--text, #0f172a); border-color: transparent; color: var(--surface-raised); }
.st-info-box { margin: 10px 0 0; font-size: 12px; line-height: 1.6; padding: 10px 12px; border-radius: 10px; color: var(--brand); background: var(--brand-soft); }
.st-day { font-size: 12px; font-weight: 700; color: var(--muted); margin: 16px 4px 0; }
.st-rec-top { display: flex; align-items: center; gap: 8px; }
.st-rec-top b { font-size: 15px; }
.st-rec-top time { margin-left: auto; font-size: 12px; color: var(--muted); }
.st-act { font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2px 7px; color: var(--brand); background: var(--brand-soft); }
.st-act.exit { color: var(--text-secondary); background: var(--surface-soft); }
.st-rec-mid { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: 13px; color: var(--text-secondary); }
.st-rec-st { flex: none; font-style: normal; font-size: 12px; font-weight: 700; }
.st-rec-st.delivered { color: var(--sig-form); }
.st-rec-st.rejected, .st-rec-st.failed { color: var(--danger, #f5384e); }
.st-rec-st.skipped, .st-rec-st.pending { color: var(--muted); }
.st-section .st-rec-err, .st-record .st-rec-err { margin: 10px 0 0; font-size: 12px; line-height: 1.6; padding: 8px 10px; border-radius: 8px; color: var(--muted); background: var(--surface-soft); }
.st-record .st-rec-err.rejected, .st-record .st-rec-err.failed { color: var(--danger, #f5384e); background: rgba(245,56,78,.08); }
.st-record { padding: 14px 16px; margin-top: 10px; }
.st-record p { font-size: 13px; line-height: 1.6; }
.st-record-head { position: sticky; top: 0; z-index: 1; background: var(--bg); padding-bottom: 8px; }
.st-empty { text-align: center; padding: 48px 12px; color: var(--muted); }
.st-coin-check { display: flex; align-items: center; gap: 6px; min-width: 80px; padding: 9px 0; }
#signalTradingBody > .btn { margin-top: 12px; }
#stSheetBody { overflow-y: auto; max-height: 70vh; }
    /* 趋势变化列表将时间价格放在次行，375px 也能完整读到来源与读法。 */
    .trend-summary { display: flex; align-items: center; gap: 8px; padding: 4px 0 8px; font-size: 12px; font-weight: 800; line-height: 1.5; }
    .trend-summary .pill { flex: none; }
    .signal-type-dot.trend-up { background: var(--up); }
    .signal-type-dot.trend-down { background: var(--down); }
    .signal-type-dot.trend-flat { background: var(--pos-0); }
    .pill.trend-up { background: color-mix(in srgb, var(--up) 12%, transparent); color: var(--up); }
    .pill.trend-down { background: color-mix(in srgb, var(--down) 12%, transparent); color: var(--down); }
    .pill.trend-flat { background: var(--sig-gone-bg); color: var(--sig-gone); }

/* 回馈卡片沿用现有活动与弹层，仅增加赠礼信息区域。 */
#feedbackRewardSlot:not(:empty) { margin-bottom: 12px; }
.feedback-reward-sheet .campaign-article p { font-size: 15px; line-height: 1.75; margin-bottom: 16px; }
.feedback-reward-sheet .campaign-article h2 { margin-bottom: 22px; }
.feedback-reward-gift { padding: 18px; margin-top: 24px; border-radius: 16px; background: var(--gold-bg); color: var(--gold); }
.feedback-reward-gift strong { display: block; font-size: 25px; margin: 8px 0; }
.feedback-reward-gift div { font-size: 13px; line-height: 1.6; }
    /* 均线快捷开关与参数面板；读数另起一行，六条同时显示时允许换行。 */
    /* 指标栏保持紧凑；设置是暗色小图标，用 ::after 把点击区扩到 44px，不撑高整行。 */
    #klineIndicatorBar { display: flex; align-items: center; gap: 12px; min-height: 28px; margin: 4px 0 2px; overflow: visible; }
    .indicator-settings-btn { position: relative; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
    .indicator-settings-btn::after { content: ""; position: absolute; inset: -8px; }
    .indicator-settings-btn:hover, .indicator-settings-btn:focus-visible { color: var(--text); }
    .indicator-settings-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
    #klineEmaRow { flex: 0 0 auto; flex-wrap: wrap; gap: 5px 12px; padding: 0 12px 6px; font-size: 11px; line-height: 1.5; overflow: visible; }
    #klineEmaRow.disabled { display: none; }
    .indicator-history-hint { padding: 0 12px 6px; font-size: 11px; color: var(--muted); }
    .indicator-history-retry { margin-left: 8px; border: 0; background: transparent; color: var(--brand); cursor: pointer; }
    .indicator-settings-sheet .sheet-head { justify-content: space-between; }
    .indicator-settings-sheet .sheet-body { padding: 8px 18px 0; }
    .indicator-settings-tabs { display: flex; padding: 4px; gap: 4px; border-radius: 12px; background: var(--bg-subtle); }
    .indicator-settings-tabs button { flex: 1; min-width: 0; min-height: 44px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font: inherit; font-size: 14px; cursor: pointer; }
    .indicator-settings-tabs button[aria-selected="true"] { background: var(--brand); color: #fff; font-weight: 800; }
    .indicator-group-toggle { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; font-size: 15px; font-weight: 750; min-height: 32px; }
    .indicator-group-toggle .settings-switch { width: 44px; height: 26px; }
    .indicator-group-toggle .settings-switch input { z-index: 1; cursor: pointer; }
    .indicator-group-toggle .settings-switch span::after { width: 20px; height: 20px; left: 3px; top: 3px; }
    .indicator-group-toggle .settings-switch input:checked + span::after { transform: translateX(18px); }
    .indicator-group-toggle .settings-switch:focus-within { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 99px; }
    .moving-average-strip { flex: 0 0 auto; }
    .indicator-description { font-size: 12px; line-height: 1.5; margin: 8px 0 14px; }
    .indicator-line-head, .indicator-line-row { display: grid; grid-template-columns: minmax(88px, 1fr) minmax(74px, 1fr) 50px; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); }
    .indicator-line-head { min-height: 34px; color: var(--muted); font-size: 12px; }
    .indicator-line-row { min-height: 61px; }
    .indicator-line-row label { display: flex; align-items: center; gap: 8px; font-size: 14px; }
    .indicator-line-row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--brand); }
    .indicator-line-row input[type="number"] { width: 100%; height: 40px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text); background: var(--surface-input); font-size: 16px; }
    .indicator-line-row input[type="color"] { width: 40px; height: 40px; padding: 3px; border: 1px solid var(--line); background: var(--surface-input); border-radius: 8px; cursor: pointer; }
    .indicator-settings-note { font-size: 12px; line-height: 1.6; border-top: 1px solid var(--line); padding-top: 12px; }
    .indicator-settings-footer { padding: 0 18px calc(18px + env(safe-area-inset-bottom)); flex-shrink: 0; }
    .indicator-settings-actions { display: flex; gap: 12px; }
    .indicator-settings-actions .btn { flex: 1; min-height: 48px; }
    .indicator-settings-actions .primary { background: var(--brand); color: #fff; }
    .indicator-settings-error { color: var(--danger); font-size: 12px; min-height: 22px; line-height: 1.5; }
    #indicatorSettingsSheet { z-index: 240; }

    /* 桌面保留图表与两行信号的既有高度；历史提示与均线读数共用一行。 */
    body[data-layout="desktop"] .moving-average-strip { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; padding-bottom: 3px; }
    body[data-layout="desktop"] #klineEmaRow { padding: 0; }
    body[data-layout="desktop"] .indicator-history-hint { padding: 0; font-size: 10px; }
    @media (pointer: fine) {
      body[data-layout="desktop"] #klineIndicatorBar { min-height: 26px; margin: 3px 0; }
      body[data-layout="desktop"] .indicator-settings-btn { width: 26px; height: 26px; }
    }
    /* K 线明细「状态」列的信号完成状态：配色沿用机会/订阅卡片 .op-progress-tag
       （达 T1/T2 绿、完成 T3 金、已退出红、已超时灰，§3 卡片契约）。 */
    .pill.outcome-active { background: var(--bg-subtle); color: var(--text-secondary); }
    .pill.outcome-hit { background: #ecfdf5; color: #047857; }
    .pill.outcome-t3 { background: #fef3c7; color: #92400e; }
    .pill.outcome-exited { background: #fee2e2; color: #991b1b; }
    .pill.outcome-timeout { background: var(--bg-subtle); color: #64748b; }
    .pill.outcome-none { background: transparent; color: var(--muted); }
    :root[data-theme="dark"] .pill.outcome-hit { background: var(--sig-form-bg); color: var(--sig-form); }
    :root[data-theme="dark"] .pill.outcome-t3 { background: var(--sig-warn-bg); color: var(--sig-warn); }
    :root[data-theme="dark"] .pill.outcome-exited { background: rgba(251, 113, 133, 0.16); color: var(--danger); }
    :root[data-theme="dark"] .pill.outcome-timeout { color: var(--text-secondary); }

    /* 复盘中心「按标的」统计：每个周期一行，比例用整数百分比（或按开关取 10% 档）。 */
    .review-mode { display: flex; gap: 6px; padding: 0 0 10px; }
    .review-mode button { flex: 1 1 0; padding: 7px 0; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--card); color: var(--muted); font-family: inherit; font-size: 12px; font-weight: 800; }
    .review-mode button.active { border-color: var(--brand-soft); background: var(--brand-soft); color: var(--brand-ink); }
    .review-symbol-picker { display: flex; gap: 8px; align-items: center; padding-bottom: 10px; }
    .review-symbol-picker select { flex: 1 1 auto; min-width: 0; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--card); color: var(--text); font-family: inherit; font-size: 13px; font-weight: 800; }
    .review-symbol-table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: 13px; background: var(--card); font-size: 12px; overflow: hidden; }
    .review-symbol-table th { padding: 8px 6px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10.5px; font-weight: 800; text-align: right; white-space: nowrap; }
    .review-symbol-table td { padding: 9px 6px; border-bottom: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; white-space: nowrap; }
    .review-symbol-table th:first-child, .review-symbol-table td:first-child { text-align: left; }
    .review-symbol-table tr:last-child td { border-bottom: 0; }
    .review-symbol-table td.review-symbol-insufficient { color: var(--muted); font-weight: 700; text-align: center; }
    .review-symbol-note { padding: 9px 3px 0; color: var(--muted); font-size: 10.5px; line-height: 1.5; }
/* AI 简报复用内容页与主题 token。方向色：高点红、低点绿。 */
.brief-slot { background:var(--brand-soft); color:var(--brand); border-radius:6px; padding:2px 7px; font-size:12px; font-weight:900; }
.content-screen .content-body:has(.brief-row), .content-screen .content-body:has(.brief-window) { padding-left:8px; padding-right:8px; }
.brief-row { display:block; width:100%; margin:0 0 10px; padding:13px 14px; border:1px solid var(--line); border-radius:var(--radius-card); background:var(--card); box-shadow:var(--shadow-card); color:inherit; font:inherit; text-align:left; cursor:pointer; }
.brief-row-meta { display:flex; align-items:center; gap:8px; margin-bottom:7px; color:var(--muted); font-size:13px; font-weight:700; }
.brief-unread { width:7px; height:7px; margin-left:auto; border-radius:50%; background:var(--brand); }
.brief-row-title { display:block; font-size:16px; font-weight:800; line-height:1.5; }
.brief-row.is-read .brief-row-title { color:var(--text-secondary); font-weight:700; }
.brief-window { display:flex; align-items:center; gap:8px; margin:0 2px 12px; color:var(--text-secondary); font-size:13.5px; font-weight:700; }
.brief-window span { padding:2px 8px; border-radius:6px; background:var(--bg-subtle); color:var(--muted); font-size:12px; font-weight:800; }
.brief-lead { border-radius:12px; background:var(--brand-soft); padding:13px 14px; line-height:1.7; font-size:16px; font-weight:700; margin-bottom:12px; }
.brief-closed { display:inline-block; margin:0 8px 4px 0; padding:1px 8px; border-radius:6px; background:var(--sig-warn-bg); color:var(--sig-warn); font-size:12px; font-weight:900; }
.content-brief-section { border:1px solid var(--line); border-radius:var(--radius-card); background:var(--card); padding:14px; margin-bottom:12px; box-shadow:var(--shadow-card); }
.content-brief-section h3 { margin:0 0 10px; font-size:16.5px; font-weight:900; }
.content-brief-section p { margin:10px 0 0; color:var(--text-secondary); font-size:15.5px; line-height:1.75; }
.brief-direction { padding:1px 7px; border-radius:6px; font-size:12.5px; font-weight:800; white-space:nowrap; }
.brief-direction.high { background:color-mix(in srgb, var(--danger) 12%, transparent); color:var(--danger); }
.brief-direction.low { background:color-mix(in srgb, var(--ok) 14%, transparent); color:var(--ok); }
.brief-coin { min-width:52px; font-size:16px; font-weight:900; }
.brief-grade { padding:0 6px; border-radius:5px; background:var(--gold-bg); color:var(--gold); font-size:12.5px; font-weight:900; line-height:19px; }
.brief-tags { display:flex; flex-wrap:nowrap; gap:4px; min-width:0; overflow:hidden; }
.brief-tags i { padding:0 6px; border:1px solid var(--line-strong); border-radius:5px; color:var(--text-secondary); font-size:11.5px; font-style:normal; font-weight:700; line-height:18px; white-space:nowrap; }
.brief-chev { color:var(--line-strong); font-size:19px; }
.brief-none { color:var(--muted) !important; }
.content-brief-section h3 .brief-closed { margin:0; }
.brief-market-lead { margin:0 0 10px !important; color:var(--text) !important; font-size:15px !important; font-weight:700; }
.brief-block { padding:9px 0; border-top:1px solid var(--line); }
.brief-block-label { display:inline-block; margin-bottom:2px; color:var(--brand); font-size:12.5px; font-weight:900; }
.content-brief-section .brief-block p { margin:0; font-size:14.5px; line-height:1.7; }
.content-brief-section h3 { display:flex; align-items:center; gap:8px; }
.brief-pick-list { border-top:1px solid var(--line); }
.brief-pick { position:relative; display:block; width:100%; padding:10px 22px 10px 0; border:0; border-bottom:1px solid var(--line); background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.brief-pick:last-child { border-bottom:0; }
.brief-pick-head { display:flex; flex-wrap:wrap; align-items:center; gap:7px; min-height:28px; }
.brief-pick-head .brief-tags { overflow:visible; }
.brief-pick-head .brief-chev { position:absolute; top:50%; right:0; transform:translateY(-50%); }
.brief-profile { color:var(--muted); font-size:12.5px; font-weight:800; white-space:nowrap; }
.brief-pick-time { display:block; margin-top:3px; color:var(--muted); font-size:12px; }
.brief-pick-fact, .brief-pick-note { display:block; margin-top:4px; font-size:14px; line-height:1.6; }
.brief-pick-fact { color:var(--muted); }
.brief-pick-note { color:var(--text-secondary); font-weight:700; }
.brief-closing { margin:4px 2px 12px; padding-top:10px; border-top:1px dashed var(--line-strong); color:var(--text); font-size:15.5px; font-weight:800; line-height:1.7; }


/* 历史原文候选未关联信号主键，只读展示。 */
.brief-pick-action { color:var(--muted); font-size:11px; }


/* HiLo AI 聊天浮窗：浮窗在底栏之上、弹层之下；聊天窗口盖住全部内容。 */
.hilo-fab { position:fixed; z-index:60; width:48px; height:48px; padding:0; border:0; border-radius:50%; background:transparent; filter:drop-shadow(0 6px 12px rgba(80,140,240,.24)); touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; cursor:pointer; transition:transform .32s ease, opacity .32s ease; }
.hilo-fab svg { display:block; margin:1px; }
.hilo-fab.dragging { transform:scale(1.1); filter:drop-shadow(0 10px 20px rgba(80,140,240,.32)); cursor:grabbing; }
.hilo-fab.snapping { transition:left .24s ease, top .24s ease, transform .18s ease; }
/* 收边：缩进停靠的那一侧，只露出朝屏幕里看的半个头；只在首页行情列表显示 */
.hilo-fab.tucked { transform:translateX(calc(42% + 8px)); opacity:.9; }
.hilo-fab.tucked[data-side="left"] { transform:translateX(calc(-42% - 8px)); }
.hilo-fab.off-page { display:none; }
.hilo-fab-dot { position:absolute; top:4px; right:4px; width:10px; height:10px; border:2px solid var(--card); border-radius:50%; background:#ff5b6b; }
/* 胶囊机器人：默认朝左上看；停在屏幕左边时整体镜像，改朝右（屏幕中间）看。 */
.hilo-bot-svg .hb-flip { transform-origin:32px 32px; transition:transform .28s ease; }
.hilo-fab[data-side="left"] .hb-flip { transform:scaleX(-1); }
.hilo-bot-svg .hb-eyes:not(.hb-open) { display:none; }
.hilo-fab[data-mood="happy"] .hb-open, .hilo-fab[data-mood="wink"] .hb-open, .hilo-fab[data-mood="wow"] .hb-open { display:none; }
.hilo-fab[data-mood="happy"] .hb-happy, .hilo-fab[data-mood="wink"] .hb-wink, .hilo-fab[data-mood="wow"] .hb-wow { display:inline; }
.hilo-fab .hb-float { animation:hilo-float 3.6s ease-in-out infinite; }
.hilo-fab .hb-blink { transform-box:fill-box; transform-origin:center; animation:hilo-blink 5.2s infinite; }
.hilo-fab[data-mood="glance"] .hb-look { animation:hilo-glance 1.6s ease-in-out; }
.hilo-fab[data-mood="happy"] .hb-float { animation:hilo-hop .5s ease-out 2; }
@keyframes hilo-float { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-2px); } }
@keyframes hilo-blink { 0%, 92%, 100% { transform:scaleY(1); } 95% { transform:scaleY(.15); } }
@keyframes hilo-glance { 0%, 100% { transform:translateX(0); } 30%, 70% { transform:translate(7px, 2px); } }
@keyframes hilo-hop { 0%, 100% { transform:translateY(0); } 40% { transform:translateY(-5px); } }
@keyframes hilo-glow { 0%, 100% { opacity:1; } 50% { opacity:.45; } }
@media (prefers-reduced-motion: reduce) { .hilo-fab .hb-float, .hilo-fab .hb-blink, .hilo-fab .hb-look, .hilo-bot-svg .hb-flip { animation:none; transition:none; } }
body.sheet-open .hilo-fab, body.kline-fullscreen-active .hilo-fab, body.guide-image-open .hilo-fab, body.hilo-chat-open .hilo-fab { display:none; }

.hilo-chat { position:fixed; inset:0; z-index:230; display:flex; align-items:flex-end; justify-content:center; }
.hilo-shade { position:absolute; inset:0; background:rgba(15,23,42,.42); }
.hilo-sheet { position:relative; display:flex; flex-direction:column; width:100%; max-width:560px; height:min(88vh, 760px); height:min(88dvh, 760px); overflow:hidden; border-radius:20px 20px 0 0; background:var(--bg-subtle); color:var(--text); box-shadow:0 -12px 40px rgba(15,23,42,.2); animation:hilo-rise .22s ease-out; }
@keyframes hilo-rise { from { transform:translateY(24px); opacity:.4; } to { transform:none; opacity:1; } }
.hilo-grab { display:flex; justify-content:center; padding:7px 0 0; background:var(--card); }
.hilo-grab span { width:36px; height:4px; border-radius:2px; background:var(--line-strong); }
.hilo-head { display:flex; align-items:center; gap:4px; padding:4px 8px 8px; border-bottom:1px solid var(--line); background:var(--card); }
.hilo-head h2 { display:flex; flex:1; align-items:center; justify-content:center; gap:7px; margin:0; font-size:17px; font-weight:800; }
.hilo-icon { display:grid; place-items:center; width:40px; height:40px; padding:0; border:0; border-radius:12px; background:transparent; color:var(--text); }
.hilo-icon:disabled { opacity:.35; }
.hilo-icon:active { background:var(--bg-subtle); }
.hilo-banner { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 14px; border-bottom:1px solid var(--line); background:var(--card); color:var(--muted); font-size:12px; }
.hilo-badge { padding:2px 8px; border-radius:999px; background:var(--brand-soft); color:var(--brand); font-weight:700; }
.hilo-out { color:#e0485a; font-weight:700; }
.hilo-locked { display:flex; flex:1; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:24px 32px; text-align:center; }
.hilo-locked b { font-size:17px; }
.hilo-locked span { color:var(--muted); font-size:14px; line-height:1.6; }
.hilo-primary { min-width:160px; margin-top:6px; padding:11px 20px; border:0; border-radius:12px; background:var(--brand); color:#fff; font-size:15px; font-weight:700; }
.hilo-msgs { display:flex; flex:1; flex-direction:column; gap:12px; overflow-y:auto; padding:14px 12px 18px; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.hilo-bot { display:flex; flex-direction:column; gap:4px; max-width:92%; }
.hilo-who { padding-left:4px; color:var(--muted); font-size:11.5px; font-weight:700; }
.hilo-bubble { padding:11px 13px; border:1px solid var(--line); border-radius:4px 16px 16px 16px; background:var(--card); font-size:14.5px; line-height:1.65; overflow-wrap:anywhere; }
.hilo-bubble p { margin:0 0 6px; }
.hilo-bubble p:last-child, .hilo-bubble ul:last-child { margin-bottom:0; }
.hilo-bubble ul { margin:2px 0 8px; padding-left:18px; }
.hilo-bubble li { margin:2px 0; }
.hilo-typing { color:var(--muted); animation:hilo-glow 1.4s ease-in-out infinite; }
.hilo-user { align-self:flex-end; max-width:82%; padding:10px 13px; border-radius:16px 4px 16px 16px; background:var(--brand); color:#fff; font-size:14.5px; line-height:1.6; overflow-wrap:anywhere; white-space:pre-wrap; }
.hilo-notice { align-self:center; max-width:90%; padding:8px 12px; border-radius:10px; background:var(--card); color:var(--muted); font-size:12.5px; line-height:1.55; text-align:center; }
.hilo-data-at { display:block; margin-top:8px; color:var(--muted); font-size:11px; }
.hilo-brief-tag { display:inline-block; margin-bottom:6px; padding:2px 8px; border-radius:999px; background:var(--brand-soft); color:var(--brand); font-size:11.5px; font-weight:700; }
.hilo-brief-lead { font-weight:800; }
.hilo-brief-line { color:var(--text); font-size:13.5px; }
.hilo-brief-sec { display:flex; flex-direction:column; gap:2px; margin-top:10px; font-size:13.5px; }
.hilo-brief-sec span { color:var(--text); }
.hilo-more { display:block; margin-top:8px; padding:4px 0; border:0; background:transparent; color:var(--brand); font-size:13px; font-weight:700; }
.hilo-pick { display:flex; flex-wrap:wrap; align-items:center; gap:6px; width:100%; margin-top:8px; padding:9px 10px; border:1px solid var(--line); border-radius:12px; background:var(--bg-subtle); color:var(--text); font-size:12.5px; text-align:left; }
.hilo-pick b { font-size:14px; }
.hilo-pick-period, .hilo-grade, .hilo-pick-profile { padding:1px 6px; border-radius:6px; background:var(--card); color:var(--muted); font-weight:700; }
.hilo-dir { padding:1px 6px; border-radius:6px; font-weight:700; }
.hilo-dir.low { background:rgba(22,163,74,.12); color:#16a34a; }
.hilo-dir.high { background:rgba(224,72,90,.12); color:#e0485a; }
.hilo-pick-go { margin-left:auto; color:var(--brand); font-weight:700; }
.hilo-suggest { display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.hilo-suggest-title { display:flex; align-items:center; justify-content:space-between; padding-left:4px; color:var(--muted); font-size:12px; font-weight:700; }
.hilo-suggest-more { display:inline-flex; align-items:center; gap:3px; padding:2px 4px; border:0; background:none; color:var(--brand); font-size:12px; font-weight:700; }
.hilo-suggest-item { display:flex; align-items:center; gap:10px; padding:11px 12px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--text); font-size:14px; text-align:left; }
.hilo-suggest-item svg { flex:none; color:var(--brand); }
.hilo-foot { padding:8px 10px calc(8px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--card); }
.hilo-input-row { display:flex; align-items:center; gap:8px; }
.hilo-input-row input { flex:1; min-width:0; height:42px; padding:0 14px; border:1px solid var(--line-strong); border-radius:21px; background:var(--bg-subtle); color:var(--text); font-size:16px; outline:none; }
.hilo-input-row input:focus { border-color:var(--brand); }
.hilo-send { display:grid; flex:none; place-items:center; width:42px; height:42px; padding:0; border:0; border-radius:50%; background:var(--brand); color:#fff; }
.hilo-send:disabled { background:var(--line-strong); color:var(--muted); }
.hilo-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.hilo-hint { margin:6px 0 0; color:var(--muted); font-size:11px; text-align:center; }
.hilo-drawer { position:absolute; inset:0; z-index:2; display:flex; }
.hilo-drawer-panel { display:flex; flex-direction:column; width:82%; max-width:340px; height:100%; background:var(--card); box-shadow:8px 0 28px rgba(15,23,42,.18); animation:hilo-slide .2s ease-out; }
@keyframes hilo-slide { from { transform:translateX(-24px); opacity:.4; } to { transform:none; opacity:1; } }
.hilo-drawer-rest { flex:1; border:0; background:rgba(15,23,42,.28); }
.hilo-tabs { display:flex; gap:4px; margin:14px 12px 6px; padding:3px; border-radius:12px; background:var(--bg-subtle); }
.hilo-tabs button { flex:1; padding:8px 0; border:0; border-radius:9px; background:transparent; color:var(--muted); font-size:13.5px; font-weight:700; }
.hilo-tabs button.on { background:var(--card); color:var(--text); box-shadow:0 1px 4px rgba(15,23,42,.1); }
.hilo-drawer-body { display:flex; flex:1; flex-direction:column; gap:4px; overflow-y:auto; padding:6px 10px calc(14px + env(safe-area-inset-bottom)); }
.hilo-drawer-empty, .hilo-drawer-note { padding:16px 6px; color:var(--muted); font-size:12.5px; text-align:center; }
.hilo-start { display:flex; align-items:center; justify-content:center; gap:6px; margin:2px 0 6px; padding:10px; border:1px dashed var(--line-strong); border-radius:12px; background:transparent; color:var(--brand); font-size:13.5px; font-weight:700; }
.hilo-group { padding:10px 6px 2px; color:var(--muted); font-size:11.5px; font-weight:700; }
.hilo-conv, .hilo-hist { display:flex; flex-direction:column; gap:3px; padding:10px; border:0; border-radius:10px; background:transparent; color:var(--text); text-align:left; }
.hilo-conv b, .hilo-hist b { overflow:hidden; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.hilo-conv span, .hilo-hist span { overflow:hidden; color:var(--muted); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.hilo-conv.on, .hilo-conv:active, .hilo-hist:active { background:var(--brand-soft); }
@media (min-width: 1024px) {
  .hilo-chat { align-items:flex-end; justify-content:flex-end; padding:0 24px 24px 0; }
  .hilo-shade { background:transparent; }
  .hilo-sheet { width:420px; height:min(720px, calc(100vh - 48px)); border-radius:20px; box-shadow:0 18px 48px rgba(15,23,42,.24); }
  .hilo-grab { display:none; }
}
body.hilo-chat-open .toast { z-index:236; bottom:calc(150px + env(safe-area-inset-bottom)); }

/* 免费用户：日报标签带锁，点开是会员引导。 */
.content-tab-lock { width:12px; height:12px; margin-left:3px; vertical-align:-1px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
.content-tab-locked { opacity:.75; }
.content-locked .more-link { margin-top:12px; }
/* HiLo AI 窗口打开时钉住背后页面；窗口内各滚动区不把滑动传给外层。 */
body.hilo-scroll-lock { position:fixed; left:0; right:0; width:100%; overflow:hidden; }
.hilo-sheet, .hilo-drawer-body { overscroll-behavior:contain; }

    /* 共振卡成员结果汇总（「8 个币种：6 已完成 · 2 已退出」）与详情成员结果标签。 */
    .resonance-outcome {
      color: var(--muted);
      font-size: 11px;
      font-weight: 600;
    }
    /* 有效期内：成员结果放卡片右下角，与左侧「有效期剩余」同一行。 */
    .resonance-outcome-side {
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }
    /* 成员行在等级前多一个可选的结果标签：列数随子元素自适应。 */
    .resonance-member {
      grid-template-columns: minmax(0, 1fr);
      grid-auto-flow: column;
      grid-auto-columns: auto;
    }
    .resonance-member-outcome {
      font-size: 11px;
      white-space: nowrap;
    }