/* 新版产品界面：仅覆盖视觉与布局，不改变分析逻辑。 */
.ui-modern {
  --bg: #f4f6f8;
  --panel: #ffffff;
  --line: #e4e8ee;
  --text: #172033;
  --muted: #687386;
  --buy: #14866d;
  --sell: #c84a54;
  --hold: #b47b1b;
  --accent: #2f63d8;
  --debate: #6c56cf;
  --sidebar-w: 216px;
  background:
    radial-gradient(circle at 96% 0, rgba(47, 99, 216, 0.06), transparent 24rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0.005em;
}

.ui-modern .sidebar {
  width: var(--sidebar-w);
  margin: 12px 0 12px 12px;
  border-radius: 18px;
  background: #182131;
  box-shadow: 0 16px 44px rgba(19, 29, 48, 0.14);
  overflow: hidden;
}

.ui-modern .sidebar-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 22px 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ui-modern .brand-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 11px;
  background: #3972eb;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 22px rgba(57, 114, 235, 0.28);
}

.ui-modern .sidebar-logo {
  padding: 0;
  border: 0;
  color: #f8fafc;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.ui-modern .sidebar-subtitle {
  padding: 3px 0 0;
  color: #8995a8;
  font-size: 11px;
  text-align: left;
}

.ui-modern .sidebar-nav {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 18px 12px;
}

.ui-modern .sidebar-nav .nav-item {
  gap: 11px;
  min-height: 46px;
  padding: 0 13px;
  border: 0;
  border-radius: 11px;
  color: #9da8b8;
  font-size: 14px;
  font-weight: 500;
}

.ui-modern .sidebar-nav .nav-item:hover {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.06);
}

.ui-modern .sidebar-nav .nav-item.active {
  color: #fff;
  background: rgba(65, 121, 239, 0.2);
  box-shadow: inset 0 0 0 1px rgba(101, 147, 244, 0.16);
}

.ui-modern .sidebar-nav .nav-item .icon {
  width: 23px;
  color: #74a0ff;
  font-size: 21px;
  line-height: 1;
}

.sidebar-version {
  margin-top: auto;
  padding: 14px 14px 18px;
}

.version-label {
  margin: 0 3px 7px;
  color: #718096;
  font-size: 11px;
}

.version-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 10px 11px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #d8e0ec;
  font-size: 12px;
  text-decoration: none;
  transition: 0.2s ease;
}

.version-switch:hover {
  border-color: rgba(116, 160, 255, 0.4);
  background: rgba(116, 160, 255, 0.1);
  color: #fff;
}

.sidebar-disclaimer {
  margin: 14px 3px 0;
  color: #657084;
  font-size: 10px;
  line-height: 1.6;
}

.ui-modern .main-content {
  width: calc(100% - var(--sidebar-w) - 12px);
  max-width: 1540px;
  margin: 0 0 0 calc(var(--sidebar-w) + 12px);
  padding: 28px 30px 42px;
}

.ui-modern .tab-header {
  align-items: flex-end;
  margin-bottom: 18px;
}

.ui-modern .page-heading {
  min-width: 260px;
}

.ui-modern .page-kicker {
  margin-bottom: 6px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ui-modern .tab-header h2 {
  margin: 0;
  color: #182238;
  font-size: clamp(23px, 2vw, 29px);
  font-weight: 760;
  letter-spacing: -0.025em;
}

.ui-modern .page-heading p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.ui-modern .tab-header > .controls-row {
  flex: 1 1 560px;
  justify-content: flex-end;
  min-height: 62px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 28px rgba(27, 39, 67, 0.055);
}

.ui-modern .control-label {
  color: #4b5769;
  font-size: 12px;
  font-weight: 650;
}

.ui-modern input,
.ui-modern button {
  min-height: 40px;
  border-radius: 9px;
  font-family: inherit;
}

.ui-modern input {
  border-color: #dce2ea;
  background: #fbfcfd;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.ui-modern input:hover {
  border-color: #c9d1dd;
  background: #fff;
}

.ui-modern input:focus {
  border-color: #7c9dec;
  outline: 0;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(47, 99, 216, 0.11);
}

.ui-modern button {
  padding: 0 17px;
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 6px 15px rgba(47, 99, 216, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.ui-modern button:hover:not(:disabled) {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 9px 20px rgba(47, 99, 216, 0.23);
}

.ui-modern button:active:not(:disabled) {
  transform: translateY(0);
}

.ui-modern #debateStatus {
  white-space: nowrap;
}

.ui-modern .debate-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.ui-modern #cancelDebateReport {
  margin: 0;
  box-shadow: none;
}

.ui-modern .research-guide {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--line);
  box-shadow: 0 8px 28px rgba(27, 39, 67, 0.04);
}

.ui-modern .guide-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 73px;
  padding: 13px 15px;
  background: rgba(255, 255, 255, 0.95);
}

.ui-modern .guide-index {
  width: 29px;
  height: 29px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #edf3ff;
  color: var(--accent);
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  text-align: center;
}

.ui-modern .guide-item strong,
.ui-modern .guide-item div > span {
  display: block;
}

.ui-modern .guide-item strong {
  margin-bottom: 3px;
  color: #263248;
  font-size: 13px;
}

.ui-modern .guide-item div > span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.ui-modern .status {
  min-height: 41px;
  padding: 10px 2px;
}

.ui-modern #progressBar,
.ui-modern .progress-container {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(27, 39, 67, 0.04);
}

.ui-modern #progressBar {
  height: 54px !important;
  margin-bottom: 18px !important;
}

.ui-modern #progressFill,
.ui-modern .progress-bar-fill {
  background: linear-gradient(90deg, #3971e9, #19a17e) !important;
}

.ui-modern .progress-container {
  margin: 0 0 18px;
}

.ui-modern .progress-bar-wrap {
  height: 22px;
  background: #edf0f4;
}

.ui-modern #debateAnalysisProcess {
  margin: 0 0 18px !important;
  border-color: var(--line) !important;
  border-radius: 14px !important;
  background: #fff;
  box-shadow: 0 8px 24px rgba(27, 39, 67, 0.04);
}

.ui-modern #debateAnalysisToggle {
  min-height: 48px;
  padding: 0 16px !important;
  background: #fbfcfd !important;
}

.ui-modern .grid {
  gap: 15px;
}

.ui-modern .panel,
.ui-modern .card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 28px rgba(27, 39, 67, 0.045);
}

.ui-modern .panel {
  padding: 18px;
}

.ui-modern .card {
  padding: 20px;
}

.ui-modern .panel:hover,
.ui-modern .card:hover {
  border-color: #d7dde6;
}

.ui-modern .label {
  margin-bottom: 10px;
  color: #697587;
  font-size: 12px;
  font-weight: 600;
}

.ui-modern .value {
  color: #1d293e;
  font-size: 25px;
  letter-spacing: -0.025em;
}

.ui-modern .value.buy,
.ui-modern .buy {
  color: var(--buy);
}

.ui-modern .value.sell,
.ui-modern .sell {
  color: var(--sell);
}

.ui-modern .value.hold,
.ui-modern .hold {
  color: var(--hold);
}

.ui-modern .sub {
  color: var(--muted);
  line-height: 1.55;
}

.ui-modern table {
  font-size: 13px;
}

.ui-modern th,
.ui-modern td {
  padding: 11px 9px;
  border-color: #edf0f3;
}

.ui-modern th {
  background: #f8f9fb;
  color: #637083;
  font-size: 12px;
}

.ui-modern tbody tr {
  transition: background 0.15s ease;
}

.ui-modern tbody tr:hover {
  background: #fafbfd;
}

.ui-modern .report-container {
  max-width: none;
  padding: 0;
}

.ui-modern .report-header,
.ui-modern .header-bar {
  margin-bottom: 16px;
  padding: 24px 26px;
  border: 0;
  border-radius: 15px;
  background: #1d2b43;
  box-shadow: 0 14px 34px rgba(29, 43, 67, 0.14);
}

.ui-modern .report-title {
  font-size: 24px;
  letter-spacing: -0.02em;
}

.ui-modern .report-roles {
  max-width: 850px;
  margin-top: 10px;
  line-height: 1.65;
}

.ui-modern .btn-download {
  background: #fff;
  color: #21314d;
  box-shadow: none;
}

.ui-modern .btn-download:hover {
  background: #eef3fb;
}

.ui-modern .section {
  margin: 18px 0;
}

.ui-modern .section > h2 {
  margin: 0 0 12px;
  color: #202c40;
  font-size: 17px;
  font-weight: 730;
}

.ui-modern .section > h2 .icon {
  margin-right: 6px;
}

.ui-modern .grid-2,
.ui-modern .grid-3 {
  gap: 15px;
  margin-bottom: 15px;
}

.ui-modern .card h3 {
  margin-bottom: 14px;
  padding-bottom: 11px;
  border-bottom: 1px solid #edf0f3;
  color: #263247;
  font-size: 15px;
}

.ui-modern .verdict-box {
  border-width: 1px;
  border-radius: 12px;
}

.ui-modern .opinion-card {
  padding: 19px 20px;
  border-left-width: 3px;
}

.ui-modern .opinion-list li {
  padding: 8px 0;
  border-color: #edf0f3;
}

.ui-modern .price-item {
  background: #f7f9fb;
}

.ui-modern .meta-tag,
.ui-modern .badge {
  border-radius: 999px;
}

.ui-modern .confidence-note {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.ui-modern canvas {
  max-width: 100%;
}

.ui-classic .sidebar-version {
  border-top: 1px solid #334155;
}

.ui-classic .version-switch {
  color: #cbd5e1;
}

.ui-classic .sidebar-disclaimer {
  display: none;
}

.ui-classic .page-kicker,
.ui-classic .page-heading p {
  display: none;
}

@media (max-width: 1180px) {
  .ui-modern .research-guide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .ui-modern .sidebar {
    width: 68px;
    margin: 8px 0 8px 8px;
    border-radius: 15px;
  }

  .ui-modern .sidebar-brand {
    justify-content: center;
    padding: 15px 8px;
  }

  .ui-modern .sidebar-brand > div:last-child,
  .ui-modern .sidebar-nav .nav-item > span:last-child,
  .ui-modern .sidebar-version {
    display: none;
  }

  .ui-modern .sidebar-logo::after {
    content: none;
  }

  .ui-modern .sidebar-nav .nav-item {
    justify-content: center;
    padding: 0;
    font-size: 0;
  }

  .ui-modern .sidebar-nav .nav-item .icon {
    font-size: 21px;
  }

  .ui-modern .main-content {
    width: calc(100% - 76px);
    margin-left: 76px;
    padding: 22px 20px 34px;
  }

  .ui-modern .tab-header {
    align-items: stretch;
    flex-direction: column;
  }

  .ui-modern .tab-header > .controls-row {
    flex-basis: auto;
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .ui-modern {
    display: block;
  }

  .ui-modern .sidebar {
    position: sticky;
    top: 0;
    width: auto;
    height: auto;
    margin: 0;
    border-radius: 0;
    flex-direction: row;
    align-items: center;
  }

  .ui-modern .sidebar-brand {
    border: 0;
    padding: 9px 12px;
  }

  .ui-modern .brand-mark {
    width: 32px;
    height: 32px;
  }

  .ui-modern .sidebar-nav {
    grid-template-columns: repeat(2, auto);
    margin-left: auto;
    padding: 8px 10px 8px 0;
  }

  .ui-modern .sidebar-nav .nav-item {
    min-width: 42px;
    min-height: 38px;
  }

  .ui-modern .main-content {
    width: 100%;
    margin: 0;
    padding: 20px 14px 30px;
  }

  .ui-modern .research-guide {
    grid-template-columns: 1fr;
  }

  .ui-modern .guide-item {
    min-height: 61px;
  }

  .ui-modern .tab-header > .controls-row,
  .ui-modern .controls-row {
    align-items: stretch;
    flex-direction: column;
  }

  .ui-modern .controls-row > *,
  .ui-modern .controls-row input,
  .ui-modern #debateStock {
    width: 100% !important;
  }

  .ui-modern .debate-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ui-modern .debate-actions button {
    width: 100%;
  }

  .ui-modern .controls-row .dropdown {
    align-items: stretch !important;
    flex-direction: column;
  }

  .ui-modern .report-header {
    padding: 20px;
    flex-direction: column;
  }

  .ui-modern .report-header-right {
    width: 100%;
    margin: 12px 0 0;
    text-align: left;
  }

  .ui-modern .btn-download {
    width: 100%;
    justify-content: center;
  }
}