/* MYSTOCK — BON UI styling layer */
@import url("./bon/colors_and_type.css");

:root {
  /* KR convention: red = up, blue = down */
  --up: #F4361E;
  --up-soft: rgba(244, 54, 30, 0.08);
  --down: #3283FD;
  --down-soft: rgba(50, 131, 253, 0.08);
  --flat: var(--bon-ink-500);

  --buy: var(--up);
  --buy-soft: var(--up-soft);
  --sell: var(--down);
  --sell-soft: var(--down-soft);
  --hold: var(--bon-ink-500);
  --hold-soft: var(--bon-ink-200);

  --kr: #F4361E;
  --us: #3283FD;
}

[data-theme="dark"] {
  --up: #FF5A44;
  --up-soft: rgba(255, 90, 68, 0.14);
  --down: #5AA1FF;
  --down-soft: rgba(90, 161, 255, 0.14);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--bon-font-sans);
  color: var(--bon-fg);
  background: var(--bon-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: var(--bon-tracking-tight);
}

a { color: inherit; text-decoration: none; }

.tabular { font-variant-numeric: tabular-nums; }

/* ====== Page shell ====== */
.page {
  width: 1400px;
  background: var(--bon-bg);
  color: var(--bon-fg);
  font-size: 15px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 32px;
  border-bottom: 1px solid var(--bon-border);
  background: var(--bon-bg);
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.5px;
}
.brand-mark {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--bon-fg);
  border-radius: 2px;
  margin-right: 2px;
  transform: translateY(-1px);
}
.brand-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--bon-fg-subtle);
  border: 1px solid var(--bon-border);
  border-radius: 999px;
  padding: 2px 8px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.nav {
  display: flex;
  gap: 4px;
}
.nav a {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--bon-fg-muted);
  transition: background 120ms;
}
.nav a:hover { background: var(--bon-bg-subtle); color: var(--bon-fg); }
.nav a.active {
  background: var(--bon-fg);
  color: var(--bon-bg);
}
.topbar-right { display: flex; align-items: center; gap: 12px; }
.iconbtn {
  width: 36px; height: 36px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--bon-border);
  border-radius: 8px;
  background: transparent;
  color: var(--bon-fg-muted);
}
.user-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px 0 6px;
  border-radius: 999px; border: 1px solid var(--bon-border);
  font-size: 13px; font-weight: 600;
}
.user-chip .avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bon-ink-700); color: white;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
}

/* ====== Common UI ====== */
.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bon-fg-subtle);
  margin-bottom: 6px;
}
.section-title {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 0 0 16px;
}
.section-title h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.4px;
}
.section-title .meta {
  font-size: 13px;
  color: var(--bon-fg-subtle);
}

.card {
  background: var(--bon-bg-elev);
  border: 1px solid var(--bon-border);
  border-radius: 12px;
}
.card-pad { padding: 20px; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px;
  border-radius: 8px;
  font-size: 13px; font-weight: 600;
  border: 1px solid var(--bon-border);
  background: var(--bon-bg);
  color: var(--bon-fg);
  cursor: pointer;
}
.btn--primary {
  background: var(--bon-fg);
  color: var(--bon-bg);
  border-color: var(--bon-fg);
}
.btn--ghost { border-color: transparent; }
.btn--sm { height: 28px; font-size: 12px; padding: 0 10px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px;
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  border: 1px solid var(--bon-border);
  color: var(--bon-fg-muted);
  background: var(--bon-bg);
}
.chip.is-active {
  background: var(--bon-fg);
  color: var(--bon-bg);
  border-color: var(--bon-fg);
}

.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.dot--kr { background: var(--kr); }
.dot--us { background: var(--us); }
.dot--both {
  background: linear-gradient(90deg, var(--kr) 0%, var(--kr) 50%, var(--us) 50%, var(--us) 100%);
}

.market-badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 18px; padding: 0 6px;
  font-size: 10px; font-weight: 700;
  border-radius: 4px;
  letter-spacing: 0.4px;
}
.market-badge--kr { background: rgba(244, 54, 30, 0.1); color: #B91C1C; }
.market-badge--us { background: rgba(50, 131, 253, 0.1); color: #1D4ED8; }

[data-theme="dark"] .market-badge--kr { background: rgba(255, 90, 68, 0.18); color: #FCA5A0; }
[data-theme="dark"] .market-badge--us { background: rgba(90, 161, 255, 0.2); color: #A5C8FF; }

.label-pill {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 8px;
  font-size: 11px; font-weight: 700;
  border-radius: 4px;
  letter-spacing: 0.3px;
}
.label-pill--buy { background: var(--up-soft); color: var(--up); }
.label-pill--sell { background: var(--down-soft); color: var(--down); }
.label-pill--hold { background: var(--bon-bg-muted); color: var(--bon-fg-muted); }

.score-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.delta-up { color: var(--up); }
.delta-down { color: var(--down); }
.delta-flat { color: var(--flat); }

.muted { color: var(--bon-fg-subtle); }
.divider { height: 1px; background: var(--bon-border); margin: 0; }