:root {
      --page-bg: #f4f7fb;
      --ink: #17202a;
      --muted: #657386;
      --good: #159570;
      --watch: #b7791f;
      --risk: #c2413a;
      --line: #dde5ee;
    }

    html,
    body {
      min-height: 100dvh;
    }

    * {
      box-sizing: border-box;
    }

    body {
      background: var(--page-bg);
      color: var(--ink);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Microsoft YaHei", sans-serif;
      letter-spacing: 0;
      overflow-x: hidden;
    }

    a {
      text-decoration: none;
    }

    .navbar {
      border-bottom: 1px solid var(--line);
    }

    .brand-mark {
      background: linear-gradient(135deg, #159570 0%, #2563eb 100%);
      border-radius: 8px;
      display: inline-block;
      height: 28px;
      position: relative;
      width: 28px;
    }

    .brand-mark::after {
      background: #fff;
      border-radius: 999px;
      content: "";
      height: 6px;
      left: 11px;
      position: absolute;
      top: 11px;
      width: 6px;
    }

    .app-content {
      padding: 0.75rem;
    }

    .market-navbar {
      background: #fff;
      border-bottom: 1px solid var(--line);
      min-height: 40px;
      padding: 0.35rem 0.75rem;
    }

    .card {
      border-color: var(--line);
      border-radius: 8px;
      box-shadow: 0 8px 22px rgba(34, 49, 70, 0.06);
      min-width: 0;
    }

    .card-header {
      background: #fff;
      border-bottom-color: var(--line);
      font-weight: 800;
      min-width: 0;
    }

    .metric-card {
      min-height: 120px;
    }

    .summary-grid {
      display: grid;
      gap: 0.5rem;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 142px), 1fr));
      min-width: 0;
    }

    .summary-item {
      min-width: 0;
    }

    .metric-card .card-body {
      min-width: 0;
      padding: 0.9rem;
    }

    .metric-label {
      color: var(--muted);
      font-size: 0.74rem;
      font-weight: 800;
      text-transform: uppercase;
      overflow-wrap: anywhere;
    }

    .metric-value {
      font-size: clamp(1.2rem, 0.9rem + 0.65vw, 1.55rem);
      font-weight: 850;
      line-height: 1.08;
      overflow-wrap: anywhere;
    }

    .metric-detail {
      color: var(--muted);
      font-size: 0.8rem;
      line-height: 1.45;
      overflow-wrap: anywhere;
    }

    .quote-pulse {
      background: #dff5ed;
      border-radius: 999px;
      display: inline-block;
      height: 8px;
      width: 8px;
    }

    .tone-good {
      background: #dff5ed;
      color: #087052;
    }

    .tone-watch {
      background: #fff2cf;
      color: #86530c;
    }

    .tone-risk {
      background: #ffe3df;
      color: #9d2d27;
    }

    .score-ring {
      --ring: #2563eb;
      align-items: center;
      aspect-ratio: 1;
      background: conic-gradient(var(--ring) calc(var(--score) * 1%), #e3e8ee 0);
      border-radius: 999px;
      display: grid;
      max-width: 148px;
      place-items: center;
      position: relative;
      width: 100%;
    }

    .score-ring::after {
      background: #fff;
      border-radius: 999px;
      content: "";
      inset: 12px;
      position: absolute;
    }

    .score-ring.tone-good {
      --ring: var(--good);
    }

    .score-ring.tone-watch {
      --ring: var(--watch);
    }

    .score-ring.tone-risk {
      --ring: var(--risk);
    }

    .score-ring-compact {
      max-width: 64px;
    }

    .score-ring-compact::after {
      inset: 10px;
    }

    .ring-value {
      position: relative;
      text-align: center;
      z-index: 1;
    }

    .ring-value strong {
      display: block;
      font-size: 2rem;
      line-height: 1;
    }

    .ring-value .ring-score-compact {
      font-size: 0.88rem;
      font-variant-numeric: tabular-nums;
      line-height: 0.95;
    }

    .ring-value span {
      color: var(--muted);
      display: block;
      font-size: 0.78rem;
      font-weight: 800;
      margin-top: 4px;
    }

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

    .score-breakdown-item {
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 12px;
    }

    .score-breakdown-label {
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .score-breakdown-value {
      font-size: 1.35rem;
      font-weight: 800;
      line-height: 1;
    }

    .score-breakdown-value.tone-good {
      background: transparent;
      color: var(--good);
    }

    .score-breakdown-value.tone-watch {
      background: transparent;
      color: #b7791f;
    }

    .score-breakdown-value.tone-risk {
      background: transparent;
      color: var(--risk);
    }

    @media (min-width: 992px) {
      .score-breakdown-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }

    .chart-wrap {
      background: linear-gradient(180deg, #f7fbff 0%, #fff 100%);
      border: 1px solid #e3eaf2;
      border-radius: 8px;
      overflow: hidden;
    }

    .price-chart {
      display: block;
      height: auto;
      width: 100%;
    }

    .realtime-kline-chart {
      min-height: 120px;
      width: 100%;
    }

    .chart-line {
      fill: none;
      stroke: #2563eb;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 4;
    }

    .chart-area {
      fill: url("#chartArea");
    }

    .chart-line.tone-good {
      stroke: var(--good);
    }

    .chart-line.tone-risk {
      stroke: var(--risk);
    }

    .chart-axis {
      stroke: #d8e1eb;
      stroke-width: 1;
    }

    .watchlist-table th {
      color: var(--muted);
      font-size: 0.76rem;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .watchlist-table {
      min-width: 520px;
      table-layout: fixed;
    }

    .watchlist-table th:nth-child(1) {
      width: 52%;
    }

    .watchlist-table th:nth-child(2) {
      width: 20%;
    }

    .watchlist-table th:nth-child(3) {
      width: 28%;
    }

    .watchlist-table td {
      overflow-wrap: anywhere;
      vertical-align: middle;
    }

    .watchlist-action-btn {
      font-size: 0.8rem;
    }

    .watchlist-row {
      cursor: pointer;
    }

    .watchlist-row:focus {
      box-shadow: inset 0 0 0 2px #2563eb;
      outline: none;
    }

    .active-stock {
      background: #eef6ff;
      box-shadow: inset 4px 0 0 #2563eb;
    }

    .active-stock td {
      background: transparent;
    }

    .drag-handle {
      color: var(--muted);
      cursor: grab;
      font-weight: 800;
      user-select: none;
    }

    .dragging-row {
      opacity: 0.45;
    }

    /* 左侧面板：大屏吸附视口，内部可滚动 */
    .sidebar-col {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    @media (min-width: 1200px) {
      #analysisPanel {
        display: flex;
        flex-direction: column;
        min-height: calc(100dvh - 40px - 1.5rem);
        min-width: 0;
      }

      .analysis-fill-section {
        flex: 1 1 0;
        min-height: 0;
      }

      .analysis-fill-section > [class*="col-"] {
        display: flex;
      }

      .analysis-fill-section .card {
        width: 100%;
      }

      .analysis-fill-section .card-body {
        min-height: 0;
        overflow-y: auto;
      }

      .sidebar-col {
        height: calc(100dvh - 40px - 1.5rem);
        /* 视口 - navbar - 上下padding */
        overflow-y: auto;
        position: sticky;
        top: 0.75rem;
      }
    }

    .list-card {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
    }

    .list-card .card-body {
      flex: 1 1 0;
      min-height: 0;
      overflow-y: auto;
    }

    @media (min-width: 1200px) and (max-width: 1399.98px) {
      .sidebar-col {
        height: auto;
        overflow-y: visible;
        position: static;
      }
    }

    @media (max-width: 1399.98px) {
      .list-card .card-body {
        flex-basis: auto;
        max-height: min(52dvh, 420px);
      }
    }

    /* 图表卡片：矮屏保底 280px，高屏自动放大到视口 40% */
    .chart-panel {
      height: clamp(280px, 40vh, 600px);
    }

    .chart-card-body {
      height: calc(100% - 49px);
    }

    .price-history-chart {
      height: 100%;
      width: 100%;
    }

    .news-card .card-body {
      max-height: 260px;
      overflow-y: auto;
    }

    .compact-list li {
      background: #f8fafc;
      border: 1px solid #e5edf5;
      border-radius: 8px;
      margin-bottom: 0.5rem;
      padding: 0.65rem 0.75rem;
    }

    @media (min-width: 768px) {
      .summary-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      }
    }

    @media (min-width: 1200px) {
      .summary-grid {
        grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
      }
    }

    @media (min-width: 1400px) {
      .summary-grid {
        grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
      }
    }

    @media (max-width: 575.98px) {
      .app-content {
        padding: 0.5rem;
      }

      .metric-card {
        min-height: 112px;
      }

      .metric-card .card-body {
        padding: 0.8rem;
      }

      .metric-value {
        font-size: 1.2rem;
      }
    }