:root {
  --wb-bg: #07111f;
  --wb-surface: #101b2b;
  --wb-surface-2: #142238;
  --wb-surface-3: #192a44;
  --wb-border: rgba(120, 154, 205, .22);
  --wb-border-soft: rgba(120, 154, 205, .13);
  --wb-text: #e5eefb;
  --wb-muted: #98a8bf;
  --wb-faint: #6f819b;
  --wb-blue: #3b82f6;
  --wb-blue-soft: rgba(59, 130, 246, .15);
  --wb-red: #f87171;
  --wb-yellow: #fbbf24;
  --wb-green: #34d399;
}

* { box-sizing: border-box; }
html,
body {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  color-scheme: dark;
}
body {
  margin: 0;
  background:
    radial-gradient(circle at 22% -18%, rgba(59, 130, 246, .16), transparent 34%),
    linear-gradient(135deg, #060b13 0%, var(--wb-bg) 46%, #081827 100%);
  color: var(--wb-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
}
a { color: #93c5fd; text-decoration: none; overflow-wrap: anywhere; }
button,
input,
select,
textarea { font: inherit; }
button,
.wb-button {
  min-height: 38px;
  border: 1px solid var(--wb-border);
  border-radius: 10px;
  background: rgba(20, 34, 56, .88);
  color: var(--wb-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  font-weight: 760;
}
button:hover,
.wb-button:hover { border-color: rgba(96, 165, 250, .52); }
button.primary,
.wb-button.primary {
  border-color: rgba(96, 165, 250, .45);
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  color: #fff;
}
input,
select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--wb-border);
  border-radius: 10px;
  background: rgba(15, 27, 44, .92);
  color: var(--wb-text);
  padding: 10px 12px;
  outline: none;
}
select option { background: #101827; color: #e5eefb; }
input::placeholder { color: #6f819b; }

.workbench {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 20px;
  padding: 16px;
}
.wb-sidebar {
  position: sticky;
  top: 16px;
  height: calc(100vh - 32px);
  overflow: auto;
  border: 1px solid var(--wb-border-soft);
  border-radius: 18px;
  background: rgba(10, 18, 31, .78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 16px;
}
.wb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: #f8fbff;
  font-size: 20px;
  font-weight: 880;
}
.wb-brand img { width: 30px; height: 30px; }
.wb-nav { display: grid; gap: 8px; margin-top: 18px; }
.wb-nav button,
.wb-nav a {
  min-height: 40px;
  justify-content: flex-start;
  width: 100%;
  background: transparent;
  border-color: transparent;
  color: #c9d5e7;
  text-align: left;
}
.wb-nav button.active { background: var(--wb-blue-soft); border-color: rgba(96, 165, 250, .28); color: #bfdbfe; }
.wb-side-card {
  margin-top: 18px;
  padding: 13px;
  border: 1px solid var(--wb-border-soft);
  border-radius: 14px;
  background: rgba(16, 27, 43, .62);
}
.wb-side-title { color: var(--wb-muted); font-size: 12px; font-weight: 820; margin-bottom: 10px; }
.wb-side-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wb-side-kpis div { min-width: 0; padding: 10px; border-radius: 10px; background: rgba(7, 17, 31, .55); }
.wb-side-kpis span { display: block; color: var(--wb-faint); font-size: 11px; }
.wb-side-kpis strong { display: block; margin-top: 5px; color: #dbeafe; font-size: 20px; }

.wb-main { width: min(1220px, 100%); min-width: 0; margin: 0 auto; padding: 14px 0 40px; }
.wb-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.wb-title h1 { margin: 0; color: #f8fbff; font-size: 30px; line-height: 1.16; }
.wb-title p { margin: 8px 0 0; color: var(--wb-muted); line-height: 1.55; }
.wb-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.wb-mobile-nav { display: none; }

.wb-grid { display: grid; gap: 14px; min-width: 0; }
.wb-grid.two { grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); }
.wb-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wb-panel {
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--wb-border-soft);
  border-radius: 16px;
  background: rgba(16, 27, 43, .88);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
  overflow: hidden;
}
.wb-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 15px; border-bottom: 1px solid var(--wb-border-soft); }
.wb-panel-head h2,
.wb-panel-head h3 { margin: 0; color: #f3f7ff; font-size: 16px; }
.wb-panel-body { padding: 14px; min-width: 0; }
.wb-muted { color: var(--wb-muted); }
.wb-small { color: var(--wb-faint); font-size: 12px; }
.wb-note { margin: 0 0 12px; color: var(--wb-muted); font-size: 13px; line-height: 1.6; }

.wb-searchbar { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(160px, .55fr) minmax(160px, .55fr) auto; gap: 10px; align-items: center; }
.wb-quick-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.wb-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 5px 9px; border: 1px solid var(--wb-border-soft); border-radius: 999px; background: rgba(7, 17, 31, .45); color: #cbd5e1; font-size: 12px; font-weight: 760; }
.wb-chip.high { color: #fecaca; border-color: rgba(248, 113, 113, .28); background: rgba(248, 113, 113, .12); }
.wb-chip.medium { color: #fde68a; border-color: rgba(251, 191, 36, .28); background: rgba(251, 191, 36, .10); }
.wb-chip.low { color: #bbf7d0; border-color: rgba(52, 211, 153, .22); background: rgba(52, 211, 153, .08); }
.wb-chip.noise { color: #b6c2d4; }

.wb-list { display: grid; gap: 10px; min-width: 0; }
.wb-item { display: grid; grid-template-columns: minmax(78px, .18fr) minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px; border: 1px solid var(--wb-border-soft); border-radius: 13px; background: rgba(7, 17, 31, .42); min-width: 0; }
.wb-item-main { min-width: 0; }
.wb-ticker { color: #bfdbfe; font-weight: 900; letter-spacing: .03em; }
.wb-item h3 { margin: 2px 0 0; color: #f1f5f9; font-size: 15px; line-height: 1.42; overflow-wrap: anywhere; }
.wb-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; color: var(--wb-muted); font-size: 12px; }
.wb-explain { margin-top: 8px; color: #aab9cf; font-size: 13px; line-height: 1.48; overflow-wrap: anywhere; }
.wb-link { white-space: nowrap; min-height: 32px; padding: 6px 10px; border: 1px solid rgba(59, 130, 246, .3); border-radius: 9px; background: rgba(59, 130, 246, .1); color: #93c5fd; font-size: 13px; font-weight: 820; }
.wb-empty { padding: 28px 14px; color: var(--wb-muted); text-align: center; }

.wb-company-grid,
.wb-industry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.wb-card { min-width: 0; padding: 14px; border: 1px solid var(--wb-border-soft); border-radius: 14px; background: rgba(7, 17, 31, .42); }
.wb-card h3 { margin: 0; color: #f1f5f9; font-size: 18px; }
.wb-card p { margin: 7px 0 0; color: var(--wb-muted); line-height: 1.48; overflow-wrap: anywhere; }
.wb-card-actions { display: flex; gap: 8px; margin-top: 12px; }
.wb-card-actions a { flex: 1; }

.wb-table-wrap { overflow-x: auto; max-width: 100%; }
.wb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.wb-table th,
.wb-table td { padding: 11px 12px; border-bottom: 1px solid var(--wb-border-soft); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.wb-table th { color: var(--wb-faint); font-size: 12px; white-space: nowrap; }
.wb-table td { color: #d8e2f1; }

.wb-detail-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; margin-bottom: 14px; padding: 16px; border: 1px solid var(--wb-border-soft); border-radius: 16px; background: rgba(16, 27, 43, .88); min-width: 0; }
.wb-detail-hero h1 { margin: 0; font-size: 28px; overflow-wrap: anywhere; }
.wb-detail-hero p { margin: 8px 0 0; color: var(--wb-muted); overflow-wrap: anywhere; }
.wb-fact-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.wb-fact-grid div { min-width: 0; padding: 10px; border-radius: 11px; background: rgba(7, 17, 31, .42); }
.wb-fact-grid span { display: block; color: var(--wb-faint); font-size: 12px; }
.wb-fact-grid strong { display: block; margin-top: 5px; color: var(--wb-text); overflow-wrap: anywhere; }
.wb-section-stack { display: grid; gap: 14px; }
.wb-placeholder { border: 1px dashed rgba(120, 154, 205, .24); border-radius: 12px; padding: 12px; color: var(--wb-muted); background: rgba(7, 17, 31, .28); }

@media (max-width: 900px) {
  .workbench { grid-template-columns: 1fr; padding: 0; width: 100%; max-width: 100%; overflow-x: hidden; }
  .wb-sidebar { display: none; }
  .wb-main { width: 100%; max-width: 100%; padding: calc(76px + env(safe-area-inset-top)) 12px calc(92px + env(safe-area-inset-bottom)); overflow-x: hidden; }
  .wb-mobile-nav { position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 50; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 7px; border: 1px solid var(--wb-border-soft); border-radius: 18px; background: rgba(8, 15, 26, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .wb-mobile-nav button { min-height: 42px; padding: 6px 4px; border-radius: 12px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
  .wb-topbar { position: fixed; top: calc(8px + env(safe-area-inset-top)); left: 12px; right: 12px; z-index: 45; align-items: center; padding: 9px; border: 1px solid var(--wb-border-soft); border-radius: 18px; background: rgba(8, 15, 26, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .wb-title h1 { font-size: 18px; }
  .wb-title p { display: none; }
  .wb-actions { display: none; }
  .wb-grid.two,
  .wb-grid.three { grid-template-columns: 1fr; }
  .wb-searchbar { grid-template-columns: 1fr; }
  .wb-item { grid-template-columns: 1fr; gap: 8px; }
  .wb-link { width: 100%; justify-content: center; text-align: center; }
  .wb-detail-hero { grid-template-columns: 1fr; }
  .wb-fact-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .wb-main { padding-left: 10px; padding-right: 10px; }
  .wb-panel-head { align-items: flex-start; flex-direction: column; }
  .wb-company-grid,
  .wb-industry-grid { grid-template-columns: 1fr; }
  .wb-card-actions { flex-direction: column; }
  .wb-fact-grid { grid-template-columns: 1fr; }
}