:root {
  color-scheme: dark;
  font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #080b10;
  color: #eef2f7;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 0%, rgba(20, 184, 166, 0.16), transparent 30%),
    radial-gradient(circle at 90% 10%, rgba(245, 158, 11, 0.12), transparent 24%),
    #080b10;
}

button, input {
  font: inherit;
}

button {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #f8fafc;
  border-radius: 8px;
  padding: 11px 14px;
  cursor: pointer;
}

button:hover {
  border-color: rgba(20,184,166,0.6);
  background: rgba(20,184,166,0.12);
}

button.primary {
  background: #14b8a6;
  border-color: #2dd4bf;
  color: #06100f;
  font-weight: 800;
}

.app-shell {
  width: min(1280px, calc(100% - 28px));
  margin: 0 auto;
  padding: 26px 0 42px;
}

.app-booting {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.notice-card {
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.82);
  border-radius: 8px;
  padding: 16px;
  color: #eef2f7;
}

.notice-card.danger {
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(127, 29, 29, 0.22);
}

.mono-text {
  font-family: "Cascadia Code", Consolas, monospace;
  word-break: break-word;
}

.topbar {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 380px);
  gap: 20px;
  align-items: end;
  margin-bottom: 20px;
}

.eyebrow {
  color: #5eead4;
  letter-spacing: 0.08em;
  font-size: 12px;
  margin: 0 0 8px;
  font-weight: 800;
}

h1 {
  margin: 0;
  font-size: clamp(32px, 5vw, 58px);
  line-height: 1.02;
}

.lead {
  color: rgba(226,232,240,0.72);
  margin: 12px 0 0;
}

.disclaimer {
  border: 1px solid rgba(245,158,11,0.28);
  color: rgba(255,237,213,0.9);
  background: rgba(245,158,11,0.08);
  border-radius: 8px;
  padding: 14px 16px;
  line-height: 1.7;
  font-size: 13px;
}

.input-panel, .watch-panel, .panel, .hero-card, .mock-notice, .csv-panel, .backend-panel {
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(10,15,23,0.82);
  border-radius: 8px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.26);
}

.input-panel {
  padding: 16px;
  margin-bottom: 16px;
}

.csv-panel {
  padding: 16px;
  margin-bottom: 16px;
}

.backend-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
  gap: 16px;
  align-items: start;
  padding: 16px;
  margin-bottom: 16px;
  border-color: rgba(59,130,246,0.24);
}

.backend-panel p {
  margin: 6px 0 0;
  color: rgba(203,213,225,0.74);
  line-height: 1.65;
  font-size: 13px;
}

.backend-status-card {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.035);
  border-radius: 8px;
  padding: 12px;
}

.backend-status-card.ok {
  border-color: rgba(20,184,166,0.28);
  background: rgba(20,184,166,0.07);
}

.backend-status-card.error {
  border-color: rgba(239,68,68,0.28);
  background: rgba(239,68,68,0.07);
}

.backend-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.backend-grid div {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(8,11,16,0.42);
  border-radius: 8px;
  padding: 9px;
  display: grid;
  gap: 3px;
}

.backend-grid span {
  color: rgba(203,213,225,0.62);
  font-size: 11px;
}

.backend-grid strong {
  color: #f8fafc;
  font-size: 13px;
}

.backend-message,
.backend-detail {
  color: rgba(226,232,240,0.84);
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 10px;
}

.backend-detail {
  color: rgba(254,202,202,0.88);
}

.backend-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.compact-status-bar {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(15,23,42,0.68);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 12px;
}

.mock-status-banner {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(20,184,166,0.24);
  background: rgba(20,184,166,0.08);
  border-radius: 8px;
  padding: 9px 12px;
  margin-bottom: 10px;
}

.mock-status-banner strong {
  color: #99f6e4;
  font-size: 14px;
}

.mock-status-banner p {
  margin: 2px 0 0;
  color: rgba(226,232,240,0.82);
  font-size: 12px;
  line-height: 1.45;
}

.mock-status-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.mock-status-pills span {
  border: 1px solid rgba(20,184,166,0.24);
  background: rgba(8,11,16,0.36);
  color: #ccfbf1;
  border-radius: 6px;
  padding: 4px 7px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.compact-status-bar div,
.decision-score-grid div,
.key-metric {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(8,11,16,0.42);
  border-radius: 8px;
  padding: 9px;
  min-width: 0;
}

.compact-status-bar span,
.decision-score-grid span,
.key-metric span {
  display: block;
  color: rgba(203,213,225,0.62);
  font-size: 11px;
  margin-bottom: 3px;
}

.compact-status-bar strong,
.decision-score-grid strong,
.key-metric strong {
  color: #f8fafc;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.csv-import-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.csv-import-row > span, .csv-help {
  color: rgba(203,213,225,0.68);
  font-size: 13px;
  line-height: 1.6;
}

.csv-help {
  margin-top: 10px;
}

.file-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(20,184,166,0.36);
  background: rgba(20,184,166,0.12);
  color: #99f6e4;
  border-radius: 8px;
  padding: 10px 13px;
  font-weight: 900;
  cursor: pointer;
}

.file-button input {
  display: none;
}

.csv-result {
  margin-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 14px;
}

.csv-result-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.csv-result-head strong {
  color: #e2e8f0;
}

.csv-result-head div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.csv-stock-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.csv-stock-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.035);
  border-radius: 8px;
  padding: 9px 10px;
}

.csv-stock-row > span:last-child {
  display: flex;
  gap: 8px;
}

.csv-stock-row button {
  padding: 6px 9px;
  font-size: 12px;
}

.csv-errors, .error-box {
  margin-top: 12px;
  border: 1px solid rgba(239,68,68,0.28);
  background: rgba(239,68,68,0.09);
  color: rgba(254,226,226,0.95);
  border-radius: 8px;
  padding: 12px 14px;
}

.csv-errors p {
  margin: 6px 0 0;
}

.storage-panel {
  border-color: rgba(59,130,246,0.22);
}

.storage-message {
  border: 1px solid rgba(20,184,166,0.24);
  background: rgba(20,184,166,0.08);
  color: #99f6e4;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-weight: 800;
}

.storage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.storage-grid div {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.035);
  border-radius: 8px;
  padding: 10px 11px;
  display: grid;
  gap: 4px;
}

.storage-grid span {
  color: rgba(203,213,225,0.62);
  font-size: 12px;
}

.storage-grid strong {
  color: #f8fafc;
  font-size: 14px;
}

.storage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.mock-notice {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 15px 18px;
  margin-bottom: 16px;
  border-color: rgba(245,158,11,0.36);
  background: rgba(245,158,11,0.09);
}

.mock-notice strong {
  color: #fbbf24;
  font-size: 16px;
}

.mock-notice p {
  margin: 5px 0 0;
  color: rgba(255,237,213,0.86);
  line-height: 1.65;
  font-size: 13px;
}

.mock-notice > span, .mini-source, .data-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  font-weight: 900;
  white-space: nowrap;
}

.mock-notice > span {
  padding: 8px 11px;
  color: #fbbf24;
  background: rgba(245,158,11,0.14);
  border: 1px solid rgba(245,158,11,0.32);
  font-size: 12px;
}

.input-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto auto;
  gap: 10px;
}

input {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: #fff;
  border-radius: 8px;
  padding: 12px 14px;
  outline: none;
}

input:focus {
  border-color: rgba(20,184,166,0.75);
}

.sample-row, .watch-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.sample-picker {
  margin-top: 12px;
}

.sample-picker summary {
  display: inline-flex;
  cursor: pointer;
  color: #bfdbfe;
  font-weight: 900;
  font-size: 13px;
}

.sample-picker .sample-row {
  max-width: 100%;
  overflow-x: auto;
  flex-wrap: nowrap;
  padding-bottom: 4px;
}

.sample-picker .sample-row button {
  flex: 0 0 auto;
}

.favorite-panel,
.recent-panel {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(15,23,42,0.58);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}

.favorite-head,
.recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.favorite-head p,
.recent-head p {
  margin: 4px 0 0;
  color: rgba(203,213,225,0.68);
  font-size: 12px;
}

.favorite-add {
  flex: 0 0 auto;
  padding: 8px 11px;
  border-radius: 7px;
  border-color: rgba(250,204,21,0.28);
  background: rgba(250,204,21,0.09);
  color: #fde68a;
}

.favorite-add.saved {
  background: rgba(34,197,94,0.12);
  border-color: rgba(34,197,94,0.28);
  color: #bbf7d0;
}

.favorite-list,
.recent-list {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.favorite-chip,
.recent-chip {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  max-width: 260px;
  border: 1px solid rgba(148,163,184,0.2);
  background: rgba(30,41,59,0.72);
  border-radius: 7px;
  overflow: hidden;
}

.favorite-chip.active,
.recent-chip.active {
  border-color: rgba(94,234,212,0.42);
}

.favorite-chip > button:first-child,
.recent-chip > button:first-child {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 8px 10px;
  color: #e2e8f0;
  text-align: left;
}

.favorite-chip span,
.favorite-chip small,
.recent-chip span,
.recent-chip small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.favorite-chip small,
.recent-chip small {
  margin-top: 2px;
  color: rgba(203,213,225,0.62);
  font-size: 11px;
}

.favorite-remove,
.recent-remove {
  width: 28px;
  border: 0;
  border-left: 1px solid rgba(148,163,184,0.16);
  border-radius: 0;
  background: rgba(15,23,42,0.64);
  color: rgba(248,113,113,0.88);
  padding: 0;
}

.favorite-empty,
.recent-empty {
  margin-top: 10px;
  color: rgba(203,213,225,0.68);
  font-size: 13px;
}

.favorite-message,
.recent-message {
  margin-bottom: 12px;
}

.recent-clear {
  padding: 8px 11px;
  font-size: 12px;
}

.sample-row button, .watch-list button {
  padding: 7px 10px;
  font-size: 13px;
}

.theme-input-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}

.theme-input-row span {
  color: rgba(203,213,225,0.68);
  font-size: 12px;
}

.watch-list button {
  display: grid;
  gap: 3px;
  justify-items: start;
}

.watch-list small {
  color: rgba(203,213,225,0.62);
  font-size: 11px;
}

.compact-hero {
  align-items: center;
}

.stock-meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
  color: rgba(203,213,225,0.74);
  font-size: 13px;
}

.primary-decision-card {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(240px, 0.5fr);
  gap: 8px;
  border: 1px solid rgba(20,184,166,0.22);
  background: linear-gradient(135deg, rgba(20,184,166,0.11), rgba(15,23,42,0.72));
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
}

.decision-label {
  color: #f8fafc;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.15;
}

.decision-comment {
  color: rgba(226,232,240,0.84);
  margin-top: 4px;
  line-height: 1.4;
  font-size: 13px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.decision-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 9px;
}

.decision-score-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.decision-score-grid strong {
  font-size: 16px;
}

.key-metrics-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.key-metric strong {
  font-size: 18px;
}

.key-metric.warning {
  grid-column: span 2;
  border-color: rgba(245,158,11,0.28);
  background: rgba(245,158,11,0.08);
}

.collapsible-section {
  grid-column: 1 / -1;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(15,23,42,0.58);
  border-radius: 8px;
  overflow: hidden;
}

.collapsible-section summary {
  cursor: pointer;
  padding: 13px 15px;
  color: #f8fafc;
  font-weight: 900;
  list-style: none;
}

.collapsible-section summary::-webkit-details-marker {
  display: none;
}

.collapsible-section summary::after {
  content: "＋";
  float: right;
  color: #5eead4;
}

.collapsible-section[open] summary::after {
  content: "－";
}

.collapsible-body {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 12px;
}

.collapsible-body > .panel,
.collapsible-body > .csv-panel,
.collapsible-body > .backend-panel {
  margin: 0 0 12px;
}

.collapsible-body > .panel:last-child,
.collapsible-body > .csv-panel:last-child,
.collapsible-body > .backend-panel:last-child {
  margin-bottom: 0;
}

.detail-group-title {
  grid-column: 1 / -1;
  color: rgba(203,213,225,0.72);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0;
  margin: 6px 0 -2px;
}

.page-section-title {
  color: rgba(203,213,225,0.72);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0;
  margin: 12px 0 8px;
}

.detail-theme-input {
  margin: 0 0 12px;
}

.ai-summary-panel .panel-title {
  margin-bottom: 8px;
}

.mock-ai-badge {
  display: inline-flex;
  border: 1px solid rgba(96,165,250,0.24);
  background: rgba(59,130,246,0.12);
  color: #bfdbfe;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 800;
}

.ai-summary-main {
  font-size: 15px;
  line-height: 1.7;
}

.ai-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ai-summary-block.warnings {
  font-size: 13px;
  background: rgba(245,158,11,0.06);
  border-color: rgba(245,158,11,0.2);
}

.structured-summary-panel .panel-title {
  margin-bottom: 8px;
}

.structured-headline {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(15,23,42,0.54);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
}

.structured-headline span {
  display: block;
  color: #f8fafc;
  font-weight: 900;
  margin-bottom: 4px;
}

.structured-headline p {
  margin: 0;
  color: rgba(226,232,240,0.82);
  font-size: 13px;
  line-height: 1.45;
}

.structured-list-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.structured-mini-block {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(15,23,42,0.46);
  border-radius: 8px;
  padding: 10px;
}

.structured-mini-block h3 {
  margin: 0 0 6px;
  color: #c4b5fd;
  font-size: 13px;
}

.structured-mini-block ul {
  margin: 0;
  padding-left: 16px;
  color: rgba(226,232,240,0.82);
  font-size: 12.5px;
  line-height: 1.45;
}

.compact-policy {
  margin-top: 10px;
  font-size: 13px;
}

.hero-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 24px;
  margin-bottom: 16px;
}

.stock-id {
  color: rgba(226,232,240,0.7);
  margin-bottom: 12px;
  font-weight: 700;
}

.source-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.data-badge {
  padding: 5px 9px;
  background: rgba(148,163,184,0.12);
  border: 1px solid rgba(148,163,184,0.24);
  color: #cbd5e1;
  font-size: 12px;
}

.data-badge.mock {
  color: #fbbf24;
  background: rgba(245,158,11,0.12);
  border-color: rgba(245,158,11,0.3);
}

.data-badge.csv {
  color: #bfdbfe;
  background: rgba(59,130,246,0.12);
  border-color: rgba(96,165,250,0.28);
}

.data-badge.danger {
  color: #f87171;
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.3);
}

.mini-source {
  margin-left: 5px;
  padding: 2px 6px;
  color: #fbbf24;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.28);
  font-size: 10px;
}

.mini-source.verify {
  color: #bfdbfe;
  background: rgba(59,130,246,0.12);
  border-color: rgba(96,165,250,0.26);
}

.hero-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
  color: rgba(226,232,240,0.72);
}

/* confidence は疑似算出の参考値であることを明示する注記 */
.confidence-note {
  display: block;
  color: rgba(148,163,184,0.8);
  font-size: 11px;
  line-height: 1.4;
  margin-top: 4px;
}

.hero-sub .confidence-note {
  flex-basis: 100%;
}

.primary-decision-card .confidence-note {
  grid-column: 1 / -1;
}

/* 銘柄ヘッダー付近に常時表示するデータソース・取得日 */
.stock-freshness {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  font-size: 12px;
  color: rgba(203,213,225,0.85);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.panel {
  padding: 18px;
}

.panel.wide {
  grid-column: 1 / -1;
}

.panel-title {
  color: rgba(148,163,184,0.95);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.signal-badge {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  border-radius: 8px;
  padding: 9px 20px;
  font-size: clamp(24px, 4vw, 42px);
  font-weight: 900;
}

.signal-badge.good { color: #5eead4; background: rgba(20,184,166,0.12); border: 1px solid rgba(20,184,166,0.3); }
.signal-badge.wait { color: #fbbf24; background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.3); }
.signal-badge.neutral { color: #cbd5e1; background: rgba(148,163,184,0.1); border: 1px solid rgba(148,163,184,0.22); }
.signal-badge.warning { color: #fb923c; background: rgba(249,115,22,0.12); border: 1px solid rgba(249,115,22,0.3); }
.signal-badge.danger { color: #f87171; background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.3); }

.risk-badge {
  display: inline-flex;
  border-radius: 6px;
  padding: 4px 9px;
  font-weight: 900;
  font-size: 12px;
}

.risk-badge.low { color: #5eead4; background: rgba(20,184,166,0.12); }
.risk-badge.medium { color: #fbbf24; background: rgba(245,158,11,0.12); }
.risk-badge.high { color: #f87171; background: rgba(239,68,68,0.12); }

.score-gauge {
  display: flex;
  gap: 18px;
  align-items: center;
}

.gauge-ring {
  width: 150px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(#14b8a6 calc(var(--score) * 1%), rgba(255,255,255,0.08) 0);
}

.gauge-center {
  width: 112px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #0b111a;
  display: grid;
  place-items: center;
  align-content: center;
}

.gauge-center span, .buy-score span {
  font-size: 36px;
  font-weight: 900;
}

.gauge-center small, .buy-score small {
  color: rgba(203,213,225,0.65);
  font-size: 12px;
}

.buy-score {
  min-width: 110px;
  display: grid;
  gap: 2px;
}

.data-source-panel {
  margin-top: 12px;
  display: grid;
  gap: 7px;
  min-width: 230px;
}

.data-source-panel div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.035);
  border-radius: 8px;
  padding: 9px 10px;
}

.data-source-panel span {
  color: rgba(203,213,225,0.62);
  font-size: 12px;
}

.data-source-panel strong {
  font-size: 13px;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.metric-grid.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.035);
  border-radius: 8px;
  padding: 11px;
  min-height: 68px;
  display: grid;
  align-content: space-between;
}

.metric span {
  color: rgba(203,213,225,0.62);
  font-size: 12px;
}

.metric strong {
  color: #f8fafc;
  font-size: 18px;
}

.positive { color: #5eead4 !important; }
.negative { color: #f87171 !important; }
.warning { color: #fbbf24 !important; }

.risk-checks {
  display: grid;
  gap: 8px;
}

.risk-check, .score-entry {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 9px 0;
}

.risk-check strong {
  color: rgba(203,213,225,0.8);
}

.risk-check.active strong {
  color: #f87171;
}

.verdict {
  margin-top: 16px;
  border-radius: 8px;
  padding: 14px;
  font-size: 20px;
  font-weight: 900;
}

.verdict.low { color: #5eead4; background: rgba(20,184,166,0.09); }
.verdict.medium { color: #fbbf24; background: rgba(245,158,11,0.1); }
.verdict.high { color: #f87171; background: rgba(239,68,68,0.1); }

.summary-box {
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.035);
  border-radius: 8px;
  padding: 13px 14px;
  color: rgba(226,232,240,0.82);
  line-height: 1.75;
}

.policy-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.policy-related, .relation {
  border-radius: 6px;
  padding: 6px 10px;
  background: rgba(148,163,184,0.12);
  color: #cbd5e1;
  font-weight: 900;
  font-size: 12px;
}

.policy-related.on, .relation.direct {
  background: rgba(20,184,166,0.12);
  color: #5eead4;
}

.relation.indirect {
  background: rgba(245,158,11,0.12);
  color: #fbbf24;
}

.theme-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.theme-tags span {
  background: rgba(59,130,246,0.12);
  border: 1px solid rgba(96,165,250,0.22);
  color: #bfdbfe;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
}

.meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.meta-grid div {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 9px;
  background: rgba(255,255,255,0.035);
}

.meta-grid span {
  display: block;
  color: rgba(203,213,225,0.62);
  font-size: 11px;
  margin-bottom: 3px;
}

.meta-grid strong {
  color: #f8fafc;
  font-size: 13px;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.tag {
  border: 1px solid rgba(96,165,250,0.24);
  background: rgba(59,130,246,0.12);
  color: #bfdbfe;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
}

.reason-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.mock-inline-warning {
  margin-bottom: 12px;
  border: 1px solid rgba(245,158,11,0.25);
  background: rgba(245,158,11,0.08);
  color: rgba(255,237,213,0.92);
  border-radius: 8px;
  padding: 11px 13px;
  line-height: 1.6;
}

.reason-block {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 13px;
  background: rgba(255,255,255,0.035);
}

.reason-block h3 {
  margin: 0 0 10px;
  font-size: 15px;
}

.reason-block ul {
  margin: 0;
  padding-left: 18px;
  color: rgba(226,232,240,0.82);
  line-height: 1.7;
}

.policy-note {
  margin-top: 12px;
  border-left: 3px solid #14b8a6;
  padding: 6px 0 6px 13px;
}

.policy-note.muted {
  border-left-color: #64748b;
}

.policy-note p {
  margin: 5px 0 0;
  color: rgba(226,232,240,0.82);
}

.score-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}

.watch-panel {
  margin-top: 16px;
  padding: 18px;
}

.batch-table {
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  overflow: hidden;
}

.batch-row {
  display: grid;
  grid-template-columns: 1.7fr 90px 1fr 80px 90px;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.batch-row.head {
  background: rgba(255,255,255,0.06);
  color: rgba(203,213,225,0.7);
  font-weight: 900;
}

.batch-row:last-child {
  border-bottom: 0;
}

.bulk-panel {
  margin-bottom: 16px;
}

.bulk-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.bulk-head p {
  margin: -6px 0 0;
  color: rgba(255,237,213,0.78);
  font-size: 13px;
}

.bulk-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.bulk-summary div {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.035);
  border-radius: 8px;
  padding: 9px 10px;
  display: grid;
  gap: 3px;
}

.bulk-summary span {
  color: rgba(203,213,225,0.62);
  font-size: 11px;
}

.bulk-summary strong {
  color: #f8fafc;
  font-size: 18px;
}

.bulk-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(4, minmax(150px, 180px));
  gap: 10px;
  margin-bottom: 12px;
}

.bulk-controls label {
  display: grid;
  gap: 5px;
  color: rgba(203,213,225,0.68);
  font-size: 12px;
}

.bulk-controls select {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.14);
  background: #0b111a;
  color: #fff;
  border-radius: 8px;
  padding: 11px 12px;
}

.bulk-count {
  color: rgba(203,213,225,0.7);
  font-size: 13px;
  margin-bottom: 10px;
}

.bulk-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
}

.bulk-table {
  width: 100%;
  min-width: 2200px;
  border-collapse: collapse;
  font-size: 12px;
}

.bulk-table th,
.bulk-table td {
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 9px 10px;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

.bulk-table td:nth-child(24),
.bulk-table td:nth-child(25) {
  white-space: normal;
  min-width: 260px;
}

.bulk-table th {
  position: sticky;
  top: 0;
  background: #111827;
  color: rgba(203,213,225,0.78);
  z-index: 1;
}

.bulk-table tbody tr {
  cursor: pointer;
}

.bulk-table tbody tr:hover {
  background: rgba(20,184,166,0.08);
}

.bulk-table .row-good {
  background: rgba(20,184,166,0.045);
}

.bulk-table .row-danger {
  background: rgba(239,68,68,0.05);
}

.bulk-table .row-wait {
  background: rgba(245,158,11,0.055);
}

.risk-cell {
  border-radius: 6px;
  padding: 3px 7px;
  font-weight: 900;
}

.risk-cell.low {
  color: #5eead4;
  background: rgba(20,184,166,0.12);
}

.risk-cell.medium {
  color: #fbbf24;
  background: rgba(245,158,11,0.12);
}

.risk-cell.high {
  color: #f87171;
  background: rgba(239,68,68,0.14);
}

.loading {
  padding: 24px;
  color: rgba(226,232,240,0.7);
}

@media (max-width: 860px) {
  .topbar, .hero-card, .dashboard-grid, .reason-grid, .score-list, .primary-decision-card, .ai-summary-grid, .structured-list-grid {
    grid-template-columns: 1fr;
  }

  .compact-status-bar,
  .key-metrics-grid,
  .decision-score-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .backend-panel {
    grid-template-columns: 1fr;
  }

  .backend-grid {
    grid-template-columns: 1fr;
  }

  .input-row {
    grid-template-columns: 1fr 1fr;
  }

  .favorite-head {
    align-items: stretch;
    flex-direction: column;
  }

  .recent-head {
    align-items: stretch;
    flex-direction: column;
  }

  .favorite-add {
    width: 100%;
  }

  .recent-clear {
    width: 100%;
  }

  .input-row input {
    grid-column: 1 / -1;
  }

  .theme-input-row {
    grid-template-columns: 1fr;
  }

  .panel.wide {
    grid-column: auto;
  }

  .metric-grid, .metric-grid.compact {
    grid-template-columns: 1fr;
  }

  .batch-row {
    grid-template-columns: 1.5fr 68px 1fr 55px 64px;
    font-size: 13px;
  }

  .csv-stock-row {
    grid-template-columns: 1fr;
  }

  .storage-grid {
    grid-template-columns: 1fr;
  }

  .mock-notice {
    align-items: flex-start;
    flex-direction: column;
  }

  .mock-status-banner {
    align-items: flex-start;
    flex-direction: column;
  }

  .mock-status-pills {
    justify-content: flex-start;
  }

  .bulk-head {
    flex-direction: column;
  }

  .bulk-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bulk-controls {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .compact-status-bar,
  .key-metrics-grid,
  .decision-score-grid,
  .input-row {
    grid-template-columns: 1fr;
  }

  .decision-label {
    font-size: 20px;
  }

.favorite-chip {
  max-width: 82vw;
}
}

.stock-search-suggestions {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.72);
  margin-top: 10px;
  padding: 10px;
}

.suggestions-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  color: #e5e7eb;
  font-weight: 700;
}

.suggestions-head small,
.suggestion-empty,
.suggestion-more {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 500;
}

.suggestion-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  max-height: 280px;
  overflow: auto;
}

.suggestion-card {
  align-items: center;
  background: rgba(30, 41, 59, 0.74);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  color: #e5e7eb;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  text-align: left;
  width: 100%;
}

.suggestion-card:hover {
  border-color: rgba(56, 189, 248, 0.5);
  background: rgba(15, 23, 42, 0.95);
}

.suggestion-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.suggestion-main strong {
  overflow-wrap: anywhere;
}

.suggestion-main small {
  color: #94a3b8;
}

.suggestion-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.mini-source.favorite {
  border-color: rgba(250, 204, 21, 0.45);
  color: #fde68a;
}

.mini-source.recent {
  border-color: rgba(168, 85, 247, 0.45);
  color: #e9d5ff;
}

.mini-source.watch {
  border-color: rgba(56, 189, 248, 0.45);
  color: #bae6fd;
}

.mini-source.csv {
  border-color: rgba(34, 197, 94, 0.45);
  color: #bbf7d0;
}

.mini-source.csv-master {
  border-color: rgba(251, 146, 60, 0.45);
  color: #fed7aa;
}

.stock-master-csv-panel {
  margin-bottom: 14px;
}

.encoding-actions {
  align-items: end;
}

.mini-field {
  display: grid;
  gap: 5px;
  color: #94a3b8;
  font-size: 12px;
}

.mini-field select {
  min-width: 180px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.92);
  color: #e5e7eb;
  padding: 9px 10px;
}

.csv-warning {
  margin-top: 10px;
  border: 1px solid rgba(251, 146, 60, 0.32);
  border-radius: 8px;
  background: rgba(251, 146, 60, 0.1);
  color: #fed7aa;
  padding: 10px 12px;
  font-size: 13px;
}

.compact-storage-grid {
  margin-top: 10px;
}

.stock-master-preview {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  max-height: 220px;
  overflow: auto;
}

.pretrade-panel {
  border-color: rgba(250, 204, 21, 0.2);
}

.pretrade-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 10px 0;
}

.pretrade-status.ok,
.pretrade-check-block.ok {
  border-color: rgba(34, 197, 94, 0.32);
  background: rgba(34, 197, 94, 0.08);
}

.pretrade-status.warning,
.pretrade-check-block.warning {
  border-color: rgba(250, 204, 21, 0.28);
  background: rgba(250, 204, 21, 0.08);
}

.pretrade-status.danger,
.pretrade-check-block.danger {
  border-color: rgba(248, 113, 113, 0.34);
  background: rgba(248, 113, 113, 0.1);
}

.pretrade-summary,
.pretrade-note {
  color: #cbd5e1;
  line-height: 1.6;
  margin: 8px 0;
}

.pretrade-note {
  color: #fbbf24;
  font-size: 13px;
}

.pretrade-mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.pretrade-check-block {
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  padding: 9px 10px;
  display: grid;
  gap: 4px;
}

.pretrade-check-block span,
.pretrade-check-block small {
  color: #94a3b8;
}

.pretrade-check-block strong {
  color: #f8fafc;
}

.pretrade-details {
  margin-top: 10px;
}

.pretrade-details summary {
  cursor: pointer;
  color: #bae6fd;
}

.pretrade-checklist {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.pretrade-check-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  padding: 9px 10px;
}

.pretrade-check-item small {
  color: #facc15;
}

.pretrade-warnings {
  margin-top: 10px;
  color: #fed7aa;
}
.simulation-record-panel {
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.72);
  border-radius: 8px;
  padding: 16px;
  color: #e5e7eb;
}

.simulation-record-panel.compact {
  align-self: stretch;
}

.simulation-record-head,
.simulation-record-summary,
.simulation-record-list-head,
.simulation-record-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.simulation-record-note,
.simulation-record-warning {
  color: #a7b0c0;
  font-size: 0.85rem;
  line-height: 1.55;
  margin: 6px 0 0;
}

.simulation-record-warning {
  color: #fbbf24;
}

.simulation-record-form,
.simulation-record-list-panel,
.simulation-record-edit {
  display: grid;
  gap: 10px;
}

.simulation-filter-panel,
.simulation-summary-card,
.simulation-group-summary {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.34);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.simulation-group-summary {
  margin-top: 12px;
}

.simulation-filter-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
}

.simulation-filter-grid label {
  display: grid;
  gap: 6px;
  color: #cbd5e1;
  font-size: 0.85rem;
}

.simulation-filter-grid input,
.simulation-filter-grid select {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 6px;
  background: rgba(2, 6, 23, 0.72);
  color: #e5e7eb;
  padding: 9px;
}

.simulation-summary-card > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #e5e7eb;
}

.simulation-summary-card > div:first-child span {
  color: #a7b0c0;
  font-size: 0.85rem;
}

.simulation-summary-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
}

.simulation-summary-grid.compact {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
}

.simulation-summary-grid span {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.08);
  color: #cbd5e1;
  font-size: 0.82rem;
  padding: 5px 9px;
}

.compact-actions {
  justify-content: flex-start;
}

.simulation-group-summary-head,
.simulation-group-controls,
.simulation-group-summary-row > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.simulation-group-controls label {
  display: grid;
  gap: 6px;
  color: #cbd5e1;
  font-size: 0.85rem;
}

.simulation-group-controls select {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 6px;
  background: rgba(2, 6, 23, 0.72);
  color: #e5e7eb;
  padding: 9px;
}

.simulation-group-summary-list {
  display: grid;
  gap: 10px;
}

.simulation-group-summary-row {
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.48);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.simulation-group-summary-row > div:first-child span {
  color: #a7b0c0;
  font-size: 0.82rem;
}

.simulation-record-textarea {
  width: 100%;
  min-height: 48px;
  resize: vertical;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 6px;
  background: rgba(2, 6, 23, 0.72);
  color: #e5e7eb;
  padding: 10px;
  font: inherit;
}

.simulation-record-list {
  display: grid;
  gap: 10px;
}

.simulation-record-row {
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: rgba(2, 6, 23, 0.44);
  padding: 12px;
  display: grid;
  gap: 12px;
}

.simulation-record-meta,
.simulation-score-pill {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: #a7b0c0;
  font-size: 0.82rem;
}

.simulation-record-meta span,
.simulation-score-pill span {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 999px;
  padding: 3px 8px;
}

.simulation-record-edit {
  grid-template-columns: 150px minmax(180px, 1fr) minmax(180px, 1fr);
}

.simulation-record-edit label {
  display: grid;
  gap: 6px;
  color: #cbd5e1;
  font-size: 0.85rem;
}

.simulation-record-edit select {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 6px;
  background: rgba(2, 6, 23, 0.72);
  color: #e5e7eb;
  padding: 9px;
}

.simulation-price-check {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.5);
  padding: 10px;
  color: #cbd5e1;
  font-size: 0.85rem;
}

.simulation-price-check span {
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.1);
  padding: 4px 9px;
}

.simulation-price-check.positive span:nth-child(2) {
  color: #86efac;
}

.simulation-price-check.negative span:nth-child(2) {
  color: #fca5a5;
}

.simulation-price-check.neutral span:nth-child(2) {
  color: #cbd5e1;
}

@media (max-width: 780px) {
  .simulation-record-head,
  .simulation-record-summary,
  .simulation-record-list-head,
  .simulation-record-actions,
  .simulation-group-summary-head,
  .simulation-group-controls,
  .simulation-group-summary-row > div:first-child {
    align-items: stretch;
    flex-direction: column;
  }

  .simulation-filter-grid,
  .simulation-summary-grid {
    grid-template-columns: 1fr;
  }

  .simulation-record-edit {
    grid-template-columns: 1fr;
  }
}