/* 三足鼎立 · 深色主题（红涨绿跌） */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: #0e1319; color: #d8dee6;
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  font-size: 14px; min-height: 100vh; display: flex; flex-direction: column;
}
a { color: #58a6ff; text-decoration: none; }
.container { max-width: 1080px; margin: 0 auto; padding: 0 16px; width: 100%; }
main.container { flex: 1; padding-top: 24px; padding-bottom: 40px; }

/* 顶栏 */
.topbar { background: #131a23; border-bottom: 1px solid #232d3a; }
.topbar-in { display: flex; justify-content: space-between; align-items: center; height: 56px; }
.brand { font-size: 17px; font-weight: 700; color: #f0c674; letter-spacing: 1px; }
.brand-sub { font-size: 11px; color: #7a8694; font-weight: 400; margin-left: 10px; }
.nav { display: flex; align-items: center; gap: 16px; }
.nav a { color: #aeb8c4; }
.nav a:hover { color: #fff; }
.nav-user { color: #7a8694; }
.btn-logout { border: 1px solid #37424f; padding: 4px 12px; border-radius: 4px; }

/* 卡片 */
.card {
  background: #161d27; border: 1px solid #232d3a; border-radius: 10px;
  padding: 18px 20px; margin-bottom: 18px;
}
.card-title { font-size: 15px; font-weight: 600; color: #e8edf3; margin-bottom: 12px;
  padding-left: 9px; border-left: 3px solid #f0c674; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}

.page-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.page-h2 { font-size: 18px; margin: 4px 0 16px; }
.data-date { color: #e8edf3; font-weight: 600; }
.muted { color: #7a8694; }

/* 数据状态标签 */
.kind { display: inline-block; margin-left: 10px; padding: 2px 8px;
  border-radius: 4px; font-size: 12px; font-weight: 600; }
.kind-intraday { background: #3a2a18; color: #f0c674; border: 1px solid #6a4a1a; }
.kind-closing  { background: #3a2510; color: #ffa05a; border: 1px solid #7a4a18; }
.kind-closed   { background: #1a3322; color: #6dd49a; border: 1px solid #2a5a3a; }
.kind-overnight{ background: #1d2530; color: #8a95a2; border: 1px solid #2a3340; }
.small { font-size: 12px; }
.center { text-align: center; }
.up { color: #ef5350; } .down { color: #26a67d; }

/* 建议横幅 */
.advice { border-radius: 10px; padding: 22px 26px; margin-bottom: 18px; border: 1px solid; }
.advice-label { font-size: 12px; letter-spacing: 2px; opacity: .75; margin-bottom: 8px; }
.advice-text { font-size: 26px; font-weight: 700; margin-bottom: 8px; }
.advice-reason { font-size: 13px; opacity: .85; }
.advice-BUY  { background: linear-gradient(135deg, #4a1f1d, #3a2320); border-color: #a04a44; color: #ff8f88; }
.advice-SELL { background: linear-gradient(135deg, #12352a, #17291f); border-color: #2f8f68; color: #6fe0ac; }
.advice-HOLD { background: linear-gradient(135deg, #3d3520, #2d2a1c); border-color: #b8983f; color: #f0c674; }
.advice-WAIT { background: linear-gradient(135deg, #1d2733, #1a222c); border-color: #3d4c5e; color: #9fb2c6; }

/* 表格 */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid #212a36; }
.table th { color: #7a8694; font-weight: 600; font-size: 12px; }
.table tr:hover td { background: #1a2230; }
.kv { width: 100%; border-collapse: collapse; }
.kv td { padding: 6px 4px; border-bottom: 1px dashed #212a36; }
.kv td:first-child { color: #7a8694; width: 42%; }
.kv tr:last-child td { border-bottom: none; }

/* 标签 */
.tag { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 12px; }
.tag-ok   { background: #1d3a2c; color: #57cf8d; }
.tag-no   { background: #40222a; color: #ff7b8a; }
.tag-hold { background: #3d3520; color: #f0c674; }
.tag-wait { background: #232d3a; color: #9fb2c6; }
.tag-buy  { background: #47201d; color: #ff8f88; }
.tag-sell { background: #123529; color: #57cf8d; }
.tag-admin{ background: #3d3520; color: #f0c674; }
.tag-user { background: #232d3a; color: #9fb2c6; }
.ctype { color: #7a8694; font-size: 12px; }

/* 按钮 / 表单 */
.btn { cursor: pointer; border: none; border-radius: 6px; padding: 8px 18px; font-size: 13px; }
.btn-primary { background: #f0c674; color: #1a1408; font-weight: 600; }
.btn-primary:hover { background: #ffd98a; }
.btn-ghost { background: transparent; border: 1px solid #3d4c5e; color: #9fb2c6; padding: 5px 14px; }
.btn-ghost:hover { border-color: #58a6ff; color: #58a6ff; }
.btn-danger { background: #5c2830; color: #ff9aa5; padding: 4px 12px; }
.btn-danger:hover { background: #7a3340; }
.btn-sm { padding: 4px 12px; font-size: 12px; }
.btn-block { width: 100%; padding: 11px; font-size: 15px; }
.inline { display: inline; }

.field { margin-bottom: 14px; }
.field label { display: block; color: #7a8694; margin-bottom: 5px; font-size: 12px; }
.field input, .field-inline input, .field-inline select {
  width: 100%; padding: 9px 11px; background: #0e1319; color: #d8dee6;
  border: 1px solid #2c3744; border-radius: 6px; font-size: 14px;
}
.field input:focus { border-color: #58a6ff; outline: none; }
.form-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.form-row .field-inline { flex: 1; min-width: 160px; }
.field-inline label { display: block; color: #7a8694; margin-bottom: 5px; font-size: 12px; }

/* 登录 */
.login-wrap { display: flex; justify-content: center; padding-top: 8vh; }
.login-card { width: 360px; padding: 32px 30px; }
.login-title { font-size: 20px; font-weight: 700; color: #f0c674; text-align: center; }
.login-sub { text-align: center; color: #7a8694; font-size: 12px; margin: 6px 0 24px; }
.login-note { margin-top: 18px; text-align: center; color: #55606d; font-size: 12px; }

/* 图表 */
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: #212a36; stroke-width: 1; }
.chart .tick { fill: #66717e; font-size: 11px; font-family: Consolas, monospace; }
.chart .legend { fill: #8a95a2; font-size: 11px; }
.closeline { fill: none; stroke: #ef5350; stroke-width: 1.8; }
.ma20line { fill: none; stroke: #f0c674; stroke-width: 1.4; stroke-dasharray: 5 3; }
.ssecline { fill: none; stroke: #58a6ff; stroke-width: 1.8; }
.ma250line { fill: none; stroke: #f0c674; stroke-width: 1.4; stroke-dasharray: 5 3; }
.lastdot { fill: #ffd98a; }

/* 上证择时卡片布局 */
.sse-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin-bottom: 8px; }
@media (max-width: 600px) { .sse-grid { grid-template-columns: 1fr; } }

/* 宽表格横向滚动（手机友好） */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------------- 条件明细上色 ---------------- */
.table td.cond-ok {
  background: rgba(38, 166, 125, 0.12);
  color: #57cf8d;
  font-weight: 600;
}
.table td.cond-no {
  background: rgba(239, 83, 80, 0.12);
  color: #ff7b8a;
  font-weight: 600;
}
.table tr:hover td.cond-ok,
.table tr:hover td.cond-no { color: #fff; }

/* ---------------- 持仓录入表单 ---------------- */
.pos-form {
  display: grid;
  grid-template-columns: 110px 90px 110px 110px 1fr auto;
  gap: 8px;
  align-items: end;
  margin-bottom: 14px;
}
.pos-form .field-inline label { color: #7a8694; font-size: 11px; margin-bottom: 4px; }
.pos-form .field-inline input,
.pos-form .field-inline select {
  padding: 7px 9px; background: #0e1319; color: #d8dee6;
  border: 1px solid #2c3744; border-radius: 5px; font-size: 13px;
}
.pos-form .field-inline input:focus,
.pos-form .field-inline select:focus { border-color: #58a6ff; outline: none; }
@media (max-width: 760px) {
  .pos-form {
    grid-template-columns: 1fr 1fr;
  }
  .pos-form .field-inline.note { grid-column: 1 / -1; }
  .pos-form .field-inline.submit { grid-column: 1 / -1; }
  .pos-form .field-inline.submit .btn { width: 100%; }
}

/* 持仓汇总块 */
.pos-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #232d3a;
}
.pos-summary .item { padding: 8px 10px; background: #131a23; border-radius: 6px; }
.pos-summary .label { color: #7a8694; font-size: 11px; margin-bottom: 4px; }
.pos-summary .value { font-size: 17px; font-weight: 600; color: #e8edf3; }
.pos-summary .value.up { color: #ef5350; }
.pos-summary .value.down { color: #26a67d; }
@media (max-width: 760px) {
  .pos-summary { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------- 移动端适配 ---------------- */
@media (max-width: 760px) {
  body { font-size: 13px; }
  .container { padding: 0 12px; }
  main.container { padding-top: 14px; padding-bottom: 28px; }

  /* 顶栏换行 */
  .topbar-in { height: auto; flex-wrap: wrap; padding: 10px 0; gap: 6px; }
  .brand { font-size: 15px; }
  .brand-sub { display: none; }
  .nav { gap: 12px; font-size: 13px; flex-wrap: wrap; }
  .nav-user { font-size: 12px; }

  /* 建议横幅 */
  .advice { padding: 14px 16px; }
  .advice-text { font-size: 20px; }
  .advice-reason { font-size: 12px; }

  /* 卡片 */
  .card { padding: 14px 12px; border-radius: 8px; margin-bottom: 12px; }
  .card-title { font-size: 14px; margin-bottom: 10px; }

  .page-head { flex-wrap: wrap; gap: 8px; }

  /* 表格 */
  .table th, .table td { padding: 7px 8px; font-size: 12px; white-space: nowrap; }
  .kv td { padding: 6px 2px; font-size: 13px; }
  .kv td:first-child { width: 40%; }

  /* 图表字号放大，抵消手机端缩放（SVG viewBox 等比缩小） */
  .chart .tick { font-size: 26px; }

  /* 登录页 */
  .login-wrap { padding-top: 4vh; }
  .login-card { width: 100%; max-width: 360px; padding: 26px 20px; }

  /* 表单行 */
  .form-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .form-row .field-inline { min-width: 0; }
  .form-row .btn { width: 100%; }

  /* 页脚 */
  .footer { font-size: 11px; line-height: 1.7; }
}

/* 提示 */
.flash { padding: 10px 16px; border-radius: 6px; margin-bottom: 14px; font-size: 13px; }
.flash-ok { background: #163226; color: #57cf8d; border: 1px solid #2c5c44; }
.flash-error { background: #3a1f26; color: #ff8f9c; border: 1px solid #6b3543; }

/* 页脚 */
.footer { background: #131a23; border-top: 1px solid #232d3a; padding: 18px 0;
  text-align: center; color: #55606d; font-size: 12px; line-height: 1.8; }

/* 历史交易区间交互图（v8） */
.histwrap { position: relative; }
.histwrap svg { touch-action: pan-y; cursor: grab; }
.histwrap svg:active { cursor: grabbing; }
.chart .datelab { fill: #66717e; font-size: 11px; font-family: Consolas, monospace; }
.histbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 6px; }
.histbtns { display: flex; gap: 8px; }
.hbtn { background: #1c2530; border: 1px solid #2b3644; color: #aab6c3; border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.hbtn:hover:not(:disabled) { border-color: #46566a; color: #e8eef4; }
.hbtn:disabled { opacity: 0.35; cursor: default; }
.hist-tip { position: absolute; z-index: 5; pointer-events: none; background: rgba(14,19,25,0.96); border: 1px solid #2b3644; border-radius: 6px; padding: 6px 10px; font-size: 12px; color: #cfd8e3; line-height: 1.7; white-space: nowrap; }
@media (max-width: 600px) {
  .chart .datelab { font-size: 24px; }
  .hbtn { font-size: 13px; padding: 6px 12px; }
}
.hist-tip .tip-buy { color: #ff7b7b; }
.hist-tip .tip-sell { color: #4fd1a5; }
.ma45line { fill: none; stroke: #6fb3e0; stroke-width: 1.2; stroke-dasharray: 2 3; }

/* SVG 图下方 HTML 图例（小号、自动换行，替代 SVG 内图例） */
.svg-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: 11px; color: #8a95a2; }
.svg-legend span { display: inline-flex; align-items: center; gap: 5px; }
.svg-legend .sw-line { display: inline-block; width: 14px; height: 0; border-top: 2px solid; }
.svg-legend .sw-line.sw-dash { border-top-style: dashed; }
.svg-legend .sw-band { display: inline-block; width: 12px; height: 10px; border-radius: 2px; }
.svg-legend .sw-tri { display: inline-block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; }
.svg-legend .sw-tri.tri-up { border-bottom: 9px solid; }
.svg-legend .sw-tri.tri-down { border-top: 9px solid; }

/* 主页建议卡片（v9.2） */
.home-wrap { max-width: 880px; margin: 48px auto 0; }
.home-link { text-decoration: none; display: block; }
.home-card { border-radius: 14px; padding: 30px 34px; border: 1px solid; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.home-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.4); }
.home-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.home-title { font-size: 15px; font-weight: 700; letter-spacing: 1px; }
.home-advice-text { font-size: 34px; font-weight: 700; margin: 10px 0 12px; }
.home-hint { margin-top: 20px; font-size: 12px; opacity: .65; }
@media (max-width: 600px) {
  .home-wrap { margin-top: 24px; }
  .home-card { padding: 22px 20px; }
  .home-advice-text { font-size: 26px; }
}
.home-sub { font-size: 11px; opacity: .7; }

/* 主页「我的持仓」标签页（v9.5） */
.pos-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pos-tab {
  cursor: pointer; background: #131a23; border: 1px solid #2b3644; color: #8a95a2;
  border-radius: 8px; padding: 7px 14px; font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px; transition: all .15s ease;
}
.pos-tab:hover { border-color: #46566a; color: #d8dee6; }
.pos-tab.active { background: #232d3a; border-color: #f0c674; color: #f0c674; font-weight: 600; }
.pos-tab-dot { font-size: 10px; background: #3d3520; color: #f0c674; border-radius: 8px; padding: 1px 6px; font-weight: 400; }
.pos-panel[hidden] { display: none; }
.pos-price { font-size: 13px; color: #aeb8c4; margin-bottom: 10px; }
.pos-price b { color: #e8edf3; font-size: 15px; }
.pos-summary-top { margin: 0 0 14px; padding-top: 0; border-top: none; }
@media (max-width: 760px) {
  .pos-tab { font-size: 12px; padding: 6px 10px; }
}

/* ---------------- 提醒设置（v9.6） ---------------- */
.steps { margin: 0 0 10px; padding-left: 20px; color: #c3ccd8; font-size: 13px; line-height: 1.95; }
.steps a { color: #58a6ff; }
.steps b { color: #e8edf3; }
.check-row { display: flex; align-items: center; gap: 9px; margin: 9px 0; }
.check-row input { width: auto; flex: none; }
.check-row label { color: #c3ccd8; font-size: 13px; cursor: pointer; }
.token-input { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .4px; }
.form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }