* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { min-height: 100%; }
body { overflow-x: hidden; }
.local-data-card { margin-bottom: 20px; min-width: 0; }
.local-data-card p { margin-bottom: 12px; line-height: 1.7; font-size: 13px; color: #40556b; }
.local-data-card .toolbar { flex-wrap: wrap; align-items: center; margin-top: 12px; }
.local-data-filters label { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.local-data-card td { max-width: 420px; overflow-wrap: anywhere; }
.local-data-card select { max-width: 100%; }
.local-data-card .table-scroll { width: 100%; overflow-x: auto; }
.local-data-card .table-scroll table { min-width: 750px; width: 100%; }
.local-data-card .table-scroll td { white-space: normal; }
body { font-family: "Microsoft YaHei", sans-serif; background: #f5f6fa; }
.layout { display: flex; min-height: 100vh; }
.sidebar { width: 200px; flex: 0 0 200px; background: #2c3e50; color: white; padding: 20px 0; }
.sidebar-header { position: relative; }
.sidebar h2 { text-align: center; margin-bottom: 30px; font-size: 20px; }
.sidebar-close { display: none; }
.sidebar ul { list-style: none; }
.sidebar li a { display: block; padding: 12px 20px; color: #bdc3c7; text-decoration: none; transition: 0.2s; }
.sidebar li a:hover, .sidebar li a.active { background: #34495e; color: white; }
.main { min-width: 0; flex: 1; padding: 20px; }
.mobile-header, .sidebar-backdrop { display: none; }
.page { display: none; }
.page.active { display: block; }
h1 { margin-bottom: 20px; color: #2c3e50; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px; }
.card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.card h3 { margin-bottom: 15px; color: #555; font-size: 14px; }
.card .value { font-size: 28px; font-weight: bold; color: #2c3e50; }
.card .sub { font-size: 12px; color: #888; margin-top: 5px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
table { width: 100%; background: white; border-collapse: collapse; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 20px; }
th, td { padding: 10px; text-align: left; border-bottom: 1px solid #eee; font-size: 13px; }
th { background: #f8f9fa; font-weight: 600; }
.toolbar { margin-bottom: 15px; display: flex; gap: 10px; }
.toolbar input, .toolbar select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; }
.service-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.service-actions { display: flex; gap: 8px; }
.danger-button { background: #c0392b; }
.danger-button:hover { background: #a93226; }
button { padding: 8px 16px; background: #3498db; color: white; border: none; border-radius: 4px; cursor: pointer; }
button:hover { background: #2980b9; }
.tabs { margin-bottom: 15px; }
.tab { padding: 8px 16px; background: #c8d6e5; color: #2c3e50; border: none; cursor: pointer; margin-right: 5px; border-radius: 4px 4px 0 0; font-weight: 500; }
.tab:hover { background: #a5b8c9; }
.tab.active { background: #3498db; color: #ffffff; font-weight: bold; }
.badge { padding: 2px 8px; border-radius: 4px; font-size: 12px; }
.badge.success { background: #d4edda; color: #155724; }
.badge.danger { background: #f8d7da; color: #721c24; }
.badge.warning { background: #fff3cd; color: #856404; }

.up { color: #e74c3c; font-weight: 600; }
.down { color: #27ae60; font-weight: 600; }
.breadth-market-stats { margin: -5px 0 10px; line-height: 1.8; font-size: 13px; }
.hot-sector-tabs { margin-bottom: 8px; }
.dashboard-hot-rankings-card { margin-bottom: 20px; }
.hot-rankings-grid { display: grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap: 12px; }
.hot-ranking-card { min-width: 0; border: 1px solid #e7edf2; border-radius: 6px; padding: 12px; background: #fbfcfd; }
.hot-ranking-card h4 { margin-bottom: 8px; color: #34495e; font-size: 14px; }
.hot-ranking-card .table-scroll { overflow-x: auto; margin-bottom: 0; }
.hot-ranking-card table { width: 100%; min-width: 0; table-layout: fixed; margin-bottom: 0; box-shadow: none; }
.hot-ranking-card th, .hot-ranking-card td { padding: 6px 5px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hot-ranking-card th:nth-child(1), .hot-ranking-card td:nth-child(1) { width: 10%; }
.hot-ranking-card th:nth-child(2), .hot-ranking-card td:nth-child(2) { width: 24%; }
.hot-ranking-card th:nth-child(3), .hot-ranking-card td:nth-child(3) { width: 28%; }
.hot-ranking-card th:nth-child(4), .hot-ranking-card td:nth-child(4) { width: 18%; }
.hot-ranking-card th:nth-child(5), .hot-ranking-card td:nth-child(5) { width: 20%; }
#hotRankingsUpdated { color: #888; font-size: 12px; }

.wencai-card { margin-bottom:20px; }
.wencai-card textarea { display:block; width:100%; margin:8px 0 12px; padding:10px; border:1px solid #aaa; border-radius:4px; font:inherit; }
.wencai-card p { margin:10px 0; overflow-wrap:anywhere; }
button:disabled { opacity:0.6; cursor:not-allowed; }

.stock-link { color: #1769aa; text-decoration: underline; text-underline-offset: 2px; }
.stock-link:visited { color: #6b4599; }
.stock-link:hover, .stock-link:focus-visible { color: #124d7c; text-decoration-thickness: 2px; }

/* More specific than .card .value so performance follows A-share colors. */
.card .value.up { color: #e74c3c; }
.card .value.down { color: #27ae60; }
#dashboardUpdated { align-self: center; color: #555; font-size: 13px; }

.screen-settings-card { margin-bottom: 15px; }
.screen-settings-card label { display: block; cursor: pointer; }
.pool-sort-hint { margin: 0 0 10px; color: #555; font-size: 13px; }
.sort-button { padding: 4px 0; background: transparent; color: #2c3e50; font: inherit; font-weight: 600; }
.sort-button:hover { background: #e4edf5; color: #124d7c; }
.sort-button:focus-visible { outline: 2px solid #1769aa; outline-offset: 3px; }
.sort-indicator { color: #1769aa; margin-left: 4px; }
.history-settings { margin-bottom: 15px; }
.history-settings input { width: 80px; padding: 6px; margin: 0 5px; }
.history-settings p { margin-top: 10px; color: #555; font-size: 13px; }
.return-date { display: block; color: #666; font-size: 11px; font-weight: normal; margin-top: 4px; }
[hidden] { display: none !important; }

.table-scroll { width: 100%; overflow-x: auto; overflow-y: hidden; margin-bottom: 20px; }
.table-scroll table { min-width: 1500px; margin-bottom: 0; }
.table-scroll th, .table-scroll td { white-space: nowrap; }
/* The dashboard ranking tables are compact card tables, not wide data tables. */
.hot-ranking-card .table-scroll { overflow-x: auto; }
.hot-ranking-card .table-scroll table { width: 100%; min-width: 0; table-layout: fixed; }
.dashboard-limit-up-card { margin-bottom: 20px; }
.limit-up-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.limit-up-header h3 { margin-bottom: 0; }
#limitUpUpdated { color: #888; font-size: 12px; }
.limit-up-date-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 15px 0 10px; }
.limit-up-date-tab { background: #eef3f7; color: #2c3e50; border: 1px solid #d5e0e8; }
.limit-up-date-tab:hover, .limit-up-date-tab.active { background: #3498db; color: #fff; border-color: #3498db; }
.limit-up-summary { color: #555; font-size: 13px; margin: 8px 0 12px; }
.limit-up-table-scroll table { min-width: 900px; }
.limit-up-table-scroll td, .limit-up-table-scroll th { text-align: center; }
.limit-up-table-scroll td:nth-child(3), .limit-up-table-scroll td:nth-child(4) { text-align: left; }
.limit-up-level { display: inline-block; min-width: 38px; padding: 3px 8px; border-radius: 12px; font-weight: 700; }
.limit-up-level.normal { background: #edf2f7; color: #52606d; }
.limit-up-level.warning { background: #fff3cd; color: #8a6500; }
.limit-up-level.danger { background: #f8d7da; color: #b4232d; }
@media (max-width: 1100px) { .hot-rankings-grid { grid-template-columns: repeat(2, minmax(260px, 1fr)); } }
@media (max-width: 700px) { .hot-rankings-grid { grid-template-columns: 1fr; } }

/* Widths are percentages of each card's table, never the full dashboard. */
.hot-ranking-card .table-scroll table { min-width: 360px; width: 100%; table-layout: fixed; }
.hot-ranking-card th:nth-child(1), .hot-ranking-card td:nth-child(1) { width: 8%; }
.hot-ranking-card th:nth-child(2), .hot-ranking-card td:nth-child(2) { width: 18%; }
.hot-ranking-card th:nth-child(3), .hot-ranking-card td:nth-child(3) { width: 22%; }
.hot-ranking-card th:nth-child(4), .hot-ranking-card td:nth-child(4) { width: 15%; }
.hot-ranking-card th:nth-child(5), .hot-ranking-card td:nth-child(5) { width: 17%; }
.hot-ranking-card th:nth-child(6), .hot-ranking-card td:nth-child(6) { width: 20%; }
.ranking-meta { overflow-wrap: anywhere; margin-bottom: 8px; line-height: 1.5; }
.ranking-history-controls { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:10px 0; }
.ranking-history-controls select { width:auto; max-width:100%; }
.ranking-with-count .table-scroll table { min-width:440px; }
.ranking-with-count th:nth-child(1), .ranking-with-count td:nth-child(1) { width:7%; }
.ranking-with-count th:nth-child(2), .ranking-with-count td:nth-child(2) { width:17%; }
.ranking-with-count th:nth-child(3), .ranking-with-count td:nth-child(3) { width:20%; }
.ranking-with-count th:nth-child(4), .ranking-with-count td:nth-child(4) { width:13%; }
.ranking-with-count th:nth-child(5), .ranking-with-count td:nth-child(5) { width:14%; }
.ranking-with-count th:nth-child(6), .ranking-with-count td:nth-child(6) { width:16%; }
.ranking-with-count th:nth-child(7), .ranking-with-count td:nth-child(7) { width:13%; }
#hotRankingFrequency { margin-top:16px; }
.ranking-frequency .table-scroll { max-height:360px; overflow:auto; }
.ranking-frequency .table-scroll table { min-width:340px; }
.ranking-frequency th:nth-child(1), .ranking-frequency td:nth-child(1) { width:32%; }
.ranking-frequency th:nth-child(2), .ranking-frequency td:nth-child(2),
.ranking-frequency th:nth-child(3), .ranking-frequency td:nth-child(3) { width:18%; }
.ranking-frequency th:nth-child(4), .ranking-frequency td:nth-child(4) { width:32%; }
#poolTable { min-width: 850px; }

/* Radar widths are scoped to its card; long evidence never expands the page. */
.radar-card { margin-bottom:20px; min-width:0; }
.repair-radar-card { margin-bottom:20px; min-width:0; }
.repair-radar-indexes { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.repair-index-state { border:1px solid #d9e4ec; border-radius:5px; padding:7px 10px; font-size:12px; color:#52606d; }
.repair-radar-card .radar-scroll table { min-width:1200px; }
.radar-card details { margin:12px 0; }
.radar-card summary { cursor:pointer; color:#334e68; margin-bottom:8px; }
.radar-card p { line-height:1.7; overflow-wrap:anywhere; }
.radar-note { font-size:12px; color:#52606d; margin:10px 0; }
.radar-scroll table { min-width:1150px; }
.radar-card pre { max-width:340px; max-height:240px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px; }
.radar-tabs { margin-top:15px; }
.radar-settings label { display:inline-flex; align-items:center; gap:6px; margin:8px 14px 8px 0; }
.radar-settings input[type=number] { width:80px; padding:5px; }
.radar-card td { vertical-align:top; }
@media(max-width:700px) { .radar-card .limit-up-header { align-items:flex-start; flex-direction:column; gap:8px; } .radar-settings label { display:flex; } }

.live-update-status { color:#dbeafe; font-size:12px; line-height:1.6; padding:0 16px; overflow-wrap:anywhere; }
#radarBoards .table-scroll { max-height:340px; overflow:auto; }

.repair-radar-card p { line-height:1.7; margin:10px 0; overflow-wrap:anywhere; }
.repair-radar-card details { margin:10px 0; }
.repair-radar-card summary { cursor:pointer; margin-bottom:8px; color:#334e68; }
.repair-radar-card pre { max-width:330px; max-height:240px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; }
#repairRadarDiagnostics { white-space:pre-line; font-size:13px; }
.repair-radar-card .table-scroll td { vertical-align:top; }
@media(max-width:700px) { .repair-radar-card .limit-up-header { align-items:flex-start; flex-direction:column; } .repair-index-state { flex:1 1 100%; } }

/* Mobile navigation and compact page layout. The desktop sidebar remains unchanged. */
@media (max-width: 767px) {
    .layout { display: block; min-height: 100vh; }
    .sidebar {
        position: fixed;
        z-index: 1000;
        inset: 0 auto 0 0;
        width: min(82vw, 300px);
        max-width: 300px;
        padding: 16px 0 24px;
        box-shadow: 8px 0 24px rgba(15, 23, 42, .22);
        transform: translateX(-105%);
        transition: transform .2s ease;
        overflow-y: auto;
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 0 14px; }
    .sidebar h2 { margin: 4px 0 22px; text-align: left; padding-left: 6px; }
    .sidebar-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        padding: 0;
        border-radius: 50%;
        background: rgba(255,255,255,.12);
        color: #fff;
        font-size: 27px;
        line-height: 1;
    }
    .sidebar-close:hover, .sidebar-close:focus-visible { background: rgba(255,255,255,.22); }
    .sidebar-nav a { padding: 15px 24px; font-size: 16px; }
    .live-update-status { padding: 0 22px; margin-bottom: 10px; }
    .sidebar-backdrop {
        position: fixed;
        z-index: 999;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
        border-radius: 0;
        background: rgba(15, 23, 42, .46);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }
    .sidebar-backdrop.visible { opacity: 1; pointer-events: auto; }
    .main { width: 100%; padding: 12px; }
    .mobile-header {
        position: sticky;
        top: 0;
        z-index: 20;
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 48px;
        margin: -12px -12px 16px;
        padding: 6px 12px;
        background: rgba(245,246,250,.96);
        border-bottom: 1px solid #e2e8f0;
        backdrop-filter: blur(8px);
        color: #2c3e50;
    }
    .mobile-header strong { font-size: 15px; }
    .mobile-header span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #52606d; font-size: 14px; }
    .menu-toggle { width: 40px; height: 36px; padding: 0; font-size: 21px; line-height: 1; }
    h1 { margin-bottom: 14px; font-size: 23px; }
    .card { padding: 14px; border-radius: 7px; }
    .cards, .grid-2 { grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; }
    /* Keep the four compact dashboard cards slightly narrower on phones so the
       surrounding page margin remains visible without shrinking their content. */
    .dashboard-compact-card { width: calc(100% - 16px); margin-inline: auto; }
    .toolbar { flex-wrap: wrap; align-items: stretch; gap: 8px; }
    .toolbar input, .toolbar select, .toolbar button { max-width: 100%; }
    .toolbar input, .toolbar select { min-width: 0; flex: 1 1 150px; }
    table { min-width: 620px; }
    .table-scroll { -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
    .table-scroll table { min-width: 900px; }
    .hot-rankings-grid { grid-template-columns: 1fr; gap: 10px; }
    .hot-ranking-card { padding: 10px; }
    .hot-ranking-card .table-scroll table { min-width: 360px; }
    .limit-up-date-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .limit-up-date-tab { flex: 0 0 auto; }
    .service-toolbar { align-items: stretch; flex-direction: column; gap: 10px; }
    .service-actions { flex-wrap: wrap; }
    .service-actions button { flex: 1 1 130px; }
    .radar-settings label { margin-right: 0; }
    .radar-settings input[type=number] { max-width: 90px; }
    .wencai-card textarea { min-height: 88px; }
    body.sidebar-open { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar, .sidebar-backdrop { transition: none; }
}
/* Mobile dashboard density: keep the market distribution card close to the compact reference layout. */
@media (max-width: 767px) {
    .dashboard-compact-card:first-of-type {
        padding: 10px 8px;
    }

    .dashboard-compact-card:first-of-type h1,
    .dashboard-compact-card:first-of-type h2,
    .dashboard-compact-card:first-of-type h3,
    .dashboard-compact-card:first-of-type h4,
    .dashboard-compact-card:first-of-type .card-title {
        font-size: 0.88rem;
        line-height: 1.25;
    }

    .dashboard-compact-card:first-of-type table,
    .dashboard-compact-card:first-of-type th,
    .dashboard-compact-card:first-of-type td,
    .dashboard-compact-card:first-of-type .metric,
    .dashboard-compact-card:first-of-type .stat,
    .dashboard-compact-card:first-of-type .distribution-label {
        font-size: 0.72rem;
    }

    .dashboard-compact-card:first-of-type th,
    .dashboard-compact-card:first-of-type td {
        padding: 3px 4px;
    }

    .dashboard-compact-card:first-of-type canvas {
        max-height: 190px;
    }
}