* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #0f1117; color: #e1e4e8; min-height: 100vh; }
a { color: #58a6ff; text-decoration: none; transition: .2s ease; }

/* nav */
nav { background: #161b22; border-bottom: 1px solid #30363d; padding: 0 24px; display: flex; align-items: center; gap: 0; height: 48px; }
nav .brand { font-weight: 800; font-size: 17px; color: #f0f6fc; margin-right: 32px; letter-spacing: -0.5px; }
nav a.nav-link { padding: 12px 16px; color: #8b949e; font-size: 14px; border-bottom: 2px solid transparent; transition: .2s ease; }
nav a.nav-link:hover { color: #f0f6fc; border-bottom-color: #f78166; }
nav a.nav-link.active { color: #f0f6fc; border-bottom-color: #f78166; font-weight: 600; }

/* layout */
.container { max-width: 1400px; margin: 0 auto; padding: 24px; }

/* buttons */
.btn { padding: 8px 20px; border-radius: 8px; font-size: 14px; cursor: pointer; border: none; font-weight: 500; transition: .2s ease; display: inline-flex; align-items: center; gap: 6px; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: #f78166; color: #000; }
.btn-primary:hover { background: #f79477; box-shadow: 0 0 10px rgba(247,129,102,.4); }
.btn-secondary { background: #21262d; color: #c9d1d9; border: 1px solid #30363d; }
.btn-secondary:hover { background: #30363d; border-color: #484f58; box-shadow: 0 0 8px rgba(139,148,158,.15); }
.btn-sm { padding: 5px 14px; font-size: 13px; border-radius: 6px; }
.btn-warn { background: #d29922; color: #000; }
.btn-warn:hover { background: #e2a82a; box-shadow: 0 0 10px rgba(210,153,34,.4); }
.btn-danger { background: #da3633; color: #fff; }
.btn-danger:hover { background: #f85149; box-shadow: 0 0 10px rgba(248,81,73,.4); }

/* filters */
.filter-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; padding: 14px 18px; background: #161b22; border: 1px solid #30363d; border-radius: 10px; }
.filter-bar label { font-size: 13px; color: #8b949e; white-space: nowrap; }
.filter-bar select, .filter-bar input[type="text"] { background: #0d1117; color: #e1e4e8; border: 1px solid #30363d; border-radius: 6px; padding: 7px 10px; font-size: 14px; height: 36px; min-width: 80px; transition: .2s ease; }
.filter-bar select:focus, .filter-bar input:focus { outline: none; border-color: #f78166; box-shadow: 0 0 0 2px rgba(247,129,102,.2); }
.filter-bar input[type="checkbox"] { accent-color: #f78166; width: 15px; height: 15px; cursor: pointer; }

/* tables */
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
th { background: #161b22; color: #8b949e; font-weight: 600; text-align: left; padding: 10px 8px; border-bottom: 1px solid #30363d; position: sticky; top: 0; z-index: 1; }
th:first-child { border-radius: 8px 0 0 0; }
th:last-child { border-radius: 0 8px 0 0; }
td { padding: 8px 8px; border-bottom: 1px solid #21262d; }
tr:nth-child(even) td { background: rgba(22,27,34,.4); }
tr:hover td { background: #1c2833 !important; }
tr:last-child td:first-child { border-radius: 0 0 0 8px; }
tr:last-child td:last-child { border-radius: 0 0 8px 0; }
tr.row-buy { box-shadow: inset 3px 0 0 #f85149; }
tr.row-buy td { background: rgba(248,81,73,.06) !important; }
tr.row-sell { box-shadow: inset 3px 0 0 #3fb950; }
tr.row-sell td { background: rgba(63,185,80,.06) !important; }
.timing-cell { font-size: 12px; white-space: nowrap; color: #c9d1d9; }
.timing-tag { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 11px; margin-right: 4px; vertical-align: middle; font-weight: 600; }
.tag-buy { background: rgba(248,81,73,.18); color: #f85149; }
.tag-sell { background: rgba(63,185,80,.18); color: #3fb950; }
.tag-wait { background: rgba(139,148,158,.12); color: #8b949e; }

/* score colors — 红涨绿跌，中国股市惯例 */
.score-pos { color: #f85149; }
.score-neg { color: #3fb950; }
.score-zero { color: #8b949e; }
.tier-SSS, .tier-SS, .tier-S { color: #f85149; font-weight: 700; }
.tier-A, .tier-B, .tier-C, .tier-D, .tier-E, .tier-F { color: #f0f6fc; }

/* query page */
.query-card { background: #161b22; border: 1px solid #30363d; border-radius: 10px; padding: 24px; margin-bottom: 20px; }
.query-card h2 { font-size: 18px; margin-bottom: 16px; color: #f0f6fc; }
.dim-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.dim-cell { background: #0d1117; border: 1px solid #21262d; border-radius: 8px; padding: 12px; transition: .2s ease; }
.dim-cell:hover { border-color: #30363d; }
.dim-cell .dim-name { font-size: 12px; color: #8b949e; }
.dim-cell .dim-value { font-size: 13px; color: #c9d1d9; margin: 2px 0; }
.dim-cell .dim-score { font-size: 22px; font-weight: 700; }

/* search */
.search-box { display: flex; gap: 10px; margin-bottom: 20px; }
.search-box input { flex: 1; background: #0d1117; color: #e1e4e8; border: 1px solid #30363d; border-radius: 8px; padding: 10px 14px; font-size: 16px; max-width: 300px; transition: .2s ease; }
.search-box input:focus { outline: none; border-color: #f78166; box-shadow: 0 0 0 2px rgba(247,129,102,.2); }

/* kline table */
.kline-table { margin-top: 16px; }
.kline-table td { font-family: "SF Mono", "Cascadia Code", Consolas, monospace; font-size: 13px; }
.kline-up { color: #f85149; }
.kline-down { color: #3fb950; }

/* watchlist */
.wl-bar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.wl-bar .wl-row { display: flex; gap: 10px; align-items: center; }
.wl-bar input { background: #0d1117; color: #e1e4e8; border: 1px solid #30363d; border-radius: 8px; padding: 8px 12px; font-size: 14px; width: 200px; transition: .2s ease; }
.wl-bar input:focus { outline: none; border-color: #f78166; box-shadow: 0 0 0 2px rgba(247,129,102,.2); }

/* status */
.status-bar { font-size: 13px; color: #8b949e; margin-bottom: 12px; background: #161b22; border-radius: 6px; padding: 8px 14px; border: 1px solid #21262d; }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid #30363d; border-top-color: #f78166; border-radius: 50%; animation: spin .6s linear infinite; margin-right: 8px; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
.hidden { display: none; }

/* section card */
.section-card { background: #161b22; border: 1px solid #30363d; border-radius: 10px; padding: 20px; margin-bottom: 16px; }
.section-card h3 { font-size: 15px; color: #f0f6fc; margin-bottom: 12px; }

/* detail list */
.detail-list { font-family: "SF Mono", "Cascadia Code", Consolas, monospace; font-size: 13px; line-height: 1.7; color: #c9d1d9; }

/* warning & risk tags */
.warning-tag { display: inline-block; background: #3a2e0a; color: #d29922; padding: 2px 8px; border-radius: 4px; font-size: 12px; margin: 2px; }
.risk-tag { display: inline-block; background: #3a2e0a; color: #d29922; padding: 1px 5px; border-radius: 3px; font-size: 10px; margin-left: 3px; vertical-align: middle; cursor: help; }

/* pager */
.pager { display: flex; gap: 0; align-items: center; justify-content: center; margin-bottom: 16px; }
.pager.hidden { display: none; }
.pager .btn-sm { padding: 5px 14px; font-size: 13px; border-radius: 0; cursor: pointer; border: 1px solid #30363d; background: #21262d; color: #c9d1d9; transition: .2s ease; }
.pager .btn-sm:hover:not(:disabled) { background: #30363d; border-color: #484f58; }
.pager .btn-sm:disabled { opacity: 0.35; cursor: default; }
.pager .btn-sm:first-child { border-radius: 6px 0 0 6px; }
.pager .btn-sm:last-child { border-radius: 0 6px 6px 0; }
.pager .pager-info { font-size: 13px; color: #8b949e; padding: 5px 18px; border-top: 1px solid #30363d; border-bottom: 1px solid #30363d; background: #0d1117; min-width: 200px; text-align: center; }
.pager-full {}
.pager-mini { display: none; }

/* detail column toggle */
.col-detail {}
.detail-collapsed .col-detail { display: none; }

/* responsive */
@media (max-width: 768px) {
  .container { padding: 10px; }

  /* nav */
  nav { padding: 0 10px; height: 44px; }
  nav .brand { font-size: 15px; margin-right: 12px; }
  nav a.nav-link { padding: 10px 10px; font-size: 13px; }

  /* filters */
  .filter-bar { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; }
  .filter-bar label { font-size: 12px; }
  .filter-bar select, .filter-bar input[type="text"] { width: 100%; height: 40px; font-size: 16px; }

  /* search */
  .search-box { flex-direction: column; }
  .search-box input { max-width: none; width: 100%; height: 40px; font-size: 16px; }

  /* table scroll wrapper */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -10px; padding: 0 10px; }
  table { font-size: 12px; white-space: nowrap; min-width: 600px; }
  th, td { padding: 6px 5px; }

  /* detail columns: hidden on mobile by default, toggleable */
  .col-detail { display: none; }
  .detail-expanded .col-detail { display: table-cell; }

  /* watchlist bar */
  .wl-bar { gap: 8px; }
  .wl-bar .wl-row { gap: 8px; }
  .wl-bar .wl-row.wl-actions .btn { flex: 1; }
  .wl-bar input { flex: 1; min-width: 0; height: 40px; font-size: 16px; }
  .wl-bar .btn { padding: 8px 14px; font-size: 14px; min-height: 40px; white-space: nowrap; }
  .wl-bar .btn-primary { flex-shrink: 0; }

  /* pager */
  .pager { flex-wrap: wrap; gap: 2px; }
  .pager .btn-sm { padding: 4px 8px; font-size: 12px; border-radius: 4px; }
  .pager .btn-sm:first-child, .pager .btn-sm:last-child { border-radius: 4px; }
  .pager .pager-info { font-size: 11px; padding: 4px 8px; min-width: 0; white-space: nowrap; }
  .pager-full { display: none; }
  .pager-mini { display: inline; }

  /* status */
  .status-bar { font-size: 12px; padding: 6px 10px; }

  /* dim grid */
  .dim-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .dim-cell { padding: 10px; }
  .dim-cell .dim-score { font-size: 18px; }

  /* query card */
  .query-card { padding: 16px; }
  .query-card h2 { font-size: 16px; }

  /* chart */
  .chart-panel { padding: 10px; }
  .chart-title { font-size: 14px; }
  .period-btn { padding: 4px 10px; font-size: 13px; }

  /* section card */
  .section-card { padding: 14px; }

  /* footer */
  .site-footer { padding: 16px 10px; font-size: 11px; }
  .footer-info { flex-direction: column; gap: 4px; }

  /* modal */
  .modal-dialog { width: calc(100% - 20px); max-height: 90vh; border-radius: 10px; }
  .modal-header { padding: 14px 16px; }
  .modal-title { font-size: 16px; }
  .modal-body { padding: 16px; }
  .modal-close { font-size: 28px; padding: 4px 8px; }
  .modal-text { font-size: 12px; line-height: 1.7; }
  .modal-text h3 { font-size: 14px; }
  .modal-text table { font-size: 11px; }
  .modal-text table th, .modal-text table td { padding: 4px 6px; }

  /* buttons */
  .hide-mob { display: none !important; }
  .btn { min-height: 40px; padding: 8px 16px; font-size: 14px; border-radius: 8px; }
  .btn-sm { min-height: 36px; padding: 6px 14px; font-size: 13px; border-radius: 6px; }

  /* filter bar: primary action full-width, secondary inline */
  .filter-bar .btn-primary { width: 100%; justify-content: center; padding: 12px 0; font-size: 16px; font-weight: 600; }
  .filter-bar .btn:not(.btn-primary) { flex: 1; min-width: 0; justify-content: center; padding: 10px 8px; font-size: 13px; }
  .filter-bar .btn-row { display: flex; gap: 8px; width: 100%; }

  /* kline table */
  .kline-table { font-size: 11px; }
  .kline-table td { padding: 4px 5px; }

  /* heading */
  h2 { font-size: 17px; }
}

/* extra small */
@media (max-width: 400px) {
  .dim-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .dim-cell .dim-score { font-size: 16px; }
  .dim-cell .dim-name { font-size: 11px; }
  nav a.nav-link { padding: 10px 8px; font-size: 12px; }
  nav .brand { font-size: 14px; margin-right: 6px; }
}

/* chart panel */
.chart-panel { background: #0f1117; border: 1px solid #30363d; border-radius: 10px; padding: 16px; margin-bottom: 20px; }
.chart-panel a[href*="tradingview"] { display: none; }
#tv-chart > a { display: none; }
.chart-title-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.chart-title { font-size: 15px; color: #f0f6fc; font-weight: 600; }
.period-selector { display: flex; gap: 2px; flex-wrap: wrap; }
.period-btn { padding: 3px 10px; font-size: 12px; border: 1px solid #30363d; background: #0d1117; color: #8b949e; border-radius: 4px; cursor: pointer; transition: .15s ease; }
.period-btn:hover { border-color: #f78166; color: #f0f6fc; }
.period-btn.active { background: #f78166; color: #000; border-color: #f78166; font-weight: 600; }

/* footer */
.site-footer { text-align: center; padding: 24px; font-size: 12px; color: #484f58; border-top: 1px solid #21262d; margin-top: 40px; }
.site-footer a { color: #8b949e; transition: .2s ease; }
.site-footer a:hover { color: #f78166; }
.footer-sep { margin: 0 10px; color: #30363d; }
.footer-info { display: flex; justify-content: center; gap: 24px; margin-bottom: 10px; font-size: 11px; color: #484f58; }
.footer-links { display: flex; justify-content: center; align-items: center; }

/* modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-overlay.hidden { display: none; }
.modal-dialog { background: #161b22; border: 1px solid #30363d; border-radius: 12px; max-width: 680px; width: calc(100% - 40px); max-height: 80vh; overflow-y: auto; box-shadow: 0 8px 40px rgba(0,0,0,.6); }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; border-bottom: 1px solid #21262d; }
.modal-title { font-size: 17px; font-weight: 700; color: #f0f6fc; }
.modal-close { background: none; border: none; color: #8b949e; font-size: 24px; cursor: pointer; padding: 0; line-height: 1; transition: .2s ease; }
.modal-close:hover { color: #f85149; }
.modal-body { padding: 24px; }
.modal-text { font-size: 13px; line-height: 1.8; color: #c9d1d9; }
.modal-text h3 { font-size: 15px; color: #f0f6fc; margin: 20px 0 10px; padding-bottom: 8px; border-bottom: 1px solid #21262d; }
.modal-text h3:first-child { margin-top: 0; }
.modal-text p { margin: 8px 0; }
.modal-text ul { margin: 8px 0; }
.modal-text li { margin: 4px 0; }
.modal-text table { margin: 10px 0; }
.modal-text table th { background: #0d1117; }
.modal-text strong { color: #f0f6fc; }
.modal-text em { color: #f78166; font-style: normal; }