/* ============================================================
   dealer.css — CHAART Dealer ERP Styles
   Cleaned: 2026-02-20
   Merged 28 design patches → single canonical source.
   Dead patches removed, duplicates merged (last-wins),
   !important stripped where safe, CSS variable fallbacks removed.
   ============================================================ */


/* ── 1. Base Layout ────────────────────────────────────────── */

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow-x: hidden !important; overflow-y: auto; background: var(--bg); font-family: var(--sans); }

/* Ambient effects — disabled in dealer ERP mode */
body.erp-mode::before,
body.erp-mode::after,
#erp-section::before {
  display: none;
}

#erp-section {
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  height: 100vh !important;
  min-height: 100vh !important;
  position: relative !important;
  overflow: hidden !important;
  background: var(--surface-page) !important;
  padding-top: 64px !important;
  box-sizing: border-box !important;
  z-index: 2;
}


/* ── 2. Header & Sidebar Navigation ───────────────────────── */

/* Header bar (dark charcoal) */
.lst-fullscreen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32px;
  height: 52px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: var(--charcoal);
  box-shadow: none;
  position: relative;
  z-index: 10;
}
.mobile-menu-btn { display: none; background: none; border: none; font-size: var(--text-xl); cursor: pointer; color: var(--charcoal); padding: 4px 8px; margin-right: 12px; }

.lst-fullscreen-title {
  font-family: var(--type-page-title-font);
  font-size: var(--type-page-title-size);
  font-weight: var(--type-page-title-weight);
  letter-spacing: var(--type-page-title-spacing);
  text-transform: uppercase;
  color: var(--type-page-title-color);
  display: flex;
  align-items: center;
  gap: 10px;
}
.lst-fullscreen-title::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--red-brand);
  border-radius: 50%;
  flex-shrink: 0;
}
.lst-fullscreen-title span {
  color: rgba(255,255,255,0.35);
  font-size: var(--text-2xs);
  font-family: var(--mono);
  font-weight: 400;
  letter-spacing: 0.06em;
  margin-left: 12px;
}

.lst-fullscreen-actions { display: flex; gap: 8px; }
.lst-fs-action-btn {
  font-family: var(--mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  padding: 6px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all var(--dur-normal);
}
.lst-fs-action-btn:hover { color: var(--bg); border-color: rgba(255,255,255,0.35); }

/* Body: sidebar + main grid */
.lst-fullscreen-body {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  overflow: hidden;
  height: 100%;
}

/* Sidebar */
.lst-fs-nav {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  max-width: var(--sidebar-width);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Nav items */
.lst-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--sidebar-item-height);
  height: auto;
  padding: 0 var(--sidebar-item-px);
  font-family: var(--sidebar-item-font);
  font-size: var(--sidebar-item-size);
  font-weight: 500;
  letter-spacing: var(--sidebar-item-spacing);
  text-transform: uppercase;
  color: var(--sidebar-item-color);
  background: transparent;
  border-left: 2px solid transparent;
  border-bottom: 1px solid var(--alpha-6);
  border-right: none;
  border-top: none;
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}
.lst-nav-item:last-of-type { border-bottom: none; }

.lst-nav-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  opacity: 0.6;
  transition: opacity var(--dur-fast);
}

.lst-nav-item:hover {
  background: var(--datagrid-hover);
  color: var(--sidebar-active-color);
  border-left-color: rgba(150,30,35,0.25);
}
.lst-nav-item:hover svg {
  opacity: 1;
  transform: none;
}

.lst-nav-item:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }

.lst-nav-item.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-color);
  border-left-color: var(--sidebar-active-border);
  font-weight: 700;
}
.lst-nav-item.active svg {
  opacity: 1;
  stroke: var(--sidebar-active-color);
  stroke-width: 2.5;
}

/* Floor number label (hidden — no longer used in sidebar) */
.nav-floor-label {
  display: none;
}

.lst-nav-spacer { flex: 1; }

/* Profile section at sidebar bottom */
.lst-nav-profile {
  border-top: 1px solid var(--border);
  padding: 12px var(--sidebar-item-px);
  font-family: var(--sidebar-item-font);
  font-size: var(--sidebar-item-size);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background var(--dur-fast);
  flex-shrink: 0;
}
.lst-nav-profile:hover { background: var(--datagrid-hover); }
.profile-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--charcoal); color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: box-shadow var(--dur-normal);
}
.lst-nav-profile:hover .profile-avatar { box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--red-brand); }
.profile-info h4 { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.02em; }
.profile-info p { font-family: var(--mono); font-size: var(--text-2xs); letter-spacing: 0.06em; color: var(--red-brand); }


/* ── 3. Tabs & Content Areas ──────────────────────────────── */

/* Main content area */
.lst-fullscreen-main {
  padding: 32px var(--content-px);
  overflow-y: auto;
  background: var(--surface-page);
  position: relative;
}
.lst-main { display: none; animation: fadeIn 0.4s var(--ease); }
.lst-main.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Main title (section header) */
.lst-main-title {
  font-family: var(--section-hd-font);
  font-size: var(--section-hd-size);
  font-weight: var(--section-hd-weight);
  letter-spacing: var(--section-hd-spacing);
  text-transform: uppercase;
  color: var(--type-section-title-color);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.lst-main-title::before {
  content: "";
  display: inline-block;
  width: 3px; height: 12px;
  background: var(--red-brand);
  flex-shrink: 0;
}

/* Section header component */
.sys-section-hd {
  display: flex;
  align-items: center;
  padding: var(--section-hd-py) var(--section-hd-px);
  min-height: var(--section-hd-height);
  background: var(--section-hd-bg);
  font-family: var(--section-hd-font);
  font-size: var(--section-hd-size);
  font-weight: var(--section-hd-weight);
  letter-spacing: var(--section-hd-spacing);
  text-transform: uppercase;
  color: var(--section-hd-color);
  border: none;
}
.sys-section-hd.is-sub { background: var(--section-hd-bg-sub); }

/* Welcome box */
.lst-welcome {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--red-brand);
  padding: 20px 24px;
  margin-bottom: 32px;
  border-radius: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: none;
}
.lst-welcome h3 { font-size: var(--text-sm); font-weight: 400; color: var(--text-secondary); }
.lst-welcome strong { color: var(--charcoal); font-weight: 700; }
.lst-welcome p { font-size: var(--text-2xs); color: var(--text-muted); margin-top: var(--space-1); }

/* Tabs */
.lst-tabs { display: flex; gap: 4px; margin-bottom: 24px; border-bottom: 1px solid var(--border); }
.lst-tab {
  padding: 10px 20px;
  font-family: var(--type-meta-font);
  font-size: var(--type-meta-size);
  font-weight: 500;
  color: var(--type-meta-color);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--dur-normal) var(--ease);
  position: relative;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lst-tab:hover { color: var(--text); }
.lst-tab.is-active, .lst-tab.active {
  color: var(--type-section-title-color);
  font-weight: 700;
  border-bottom-color: var(--red-brand);
}
.tab-content { display: none; }
.tab-content.is-active { display: block; }


/* ── 4. Buttons ───────────────────────────────────────────── */

.btn {
  padding: 10px 18px;
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: 0;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--dur-normal);
  font-family: var(--sans);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  white-space: nowrap;
  line-height: 1;
}
.btn-sm { padding: 5px 12px; font-size: var(--text-sm); }
.btn-primary { background: var(--charcoal); color: var(--white); }
.btn-primary:hover { background: var(--black); }
.btn-secondary { background: var(--bg-card); border-color: var(--border-strong); color: var(--text); }
.btn-secondary:hover { border-color: var(--charcoal); }
.btn-blue { background: var(--color-neutral); color: var(--white); }
.btn-blue:hover { background: #2d3a47; }
.btn-green { background: var(--color-success); color: var(--white); }
.btn-green:hover { background: #1f3625; }
.btn-outline-red { border-color: var(--color-danger); color: var(--color-danger); background: var(--bg-card); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:active:not(:disabled) { transform: translateY(1px); transition-duration: 50ms; }
.btn:disabled, .btn.is-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn.is-loading { position: relative; color: transparent; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--radius-round); animation: spin 0.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Concierge button */
.btn-concierge {
  background: var(--bg-card); border: 1px solid var(--charcoal); color: var(--charcoal);
  padding: 8px 14px; font-size: var(--text-xs); font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; border-radius: 0;
  transition: all var(--dur-normal); cursor: pointer; font-family: var(--sans); white-space: nowrap;
}
.btn-concierge:hover { background: var(--charcoal); color: var(--white); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.btn-concierge:active { transform: translateY(0); }

/* Inline util classes */
.btn-xs { padding: var(--space-1) var(--space-3); font-size: var(--text-2xs); }


/* ── 5. KPI Cards & Statistics ────────────────────────────── */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border: 1px solid var(--datagrid-divider);
  background: var(--kpi-rail-bg);
  margin-bottom: var(--space-6);
  border-top: 2px solid var(--emphasis-band-color) !important;
}
.kpi-card {
  padding: var(--kpi-rail-py) var(--kpi-rail-px);
  border-right: 1px solid var(--kpi-rail-divider);
  background: transparent;
  text-align: left;
  border-radius: 0;
  transition: all var(--dur-hover);
  box-shadow: none;
}
.kpi-card:last-child { border-right: none; }
.kpi-card:hover { box-shadow: 0 8px 24px rgba(150,30,35,0.08); border-color: var(--red-brand); transform: translateY(-2px); }
.kpi-label {
  font-family: var(--kpi-label-font);
  font-size: var(--kpi-label-size);
  color: var(--kpi-label-color);
  letter-spacing: var(--kpi-label-spacing);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.kpi-value {
  font-family: var(--type-kpi-value-font);
  font-size: var(--type-kpi-value-size);
  font-weight: var(--type-kpi-value-weight);
  letter-spacing: var(--type-kpi-value-spacing);
  color: var(--type-kpi-value-color);
  line-height: 1.1;
  margin-bottom: 6px;
}
.kpi-trend {
  font-family: var(--type-meta-font);
  font-size: var(--type-meta-size);
  color: var(--type-meta-color);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-1);
}
.kpi-trend.up { color: var(--color-success); }
.kpi-trend.down { color: var(--color-danger); }
.kpi-trend.neutral { color: var(--text-muted); }

/* Statistics grid */
.lst-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border); margin-bottom: 24px; background: var(--bg-card); border-radius: 0; overflow: hidden; box-shadow: var(--shadow-sm); }
.lst-cat-cell { padding: 16px 12px; text-align: center; border-right: 1px solid var(--border); transition: all var(--dur-hover); }
.lst-cat-cell:last-child { border-right: none; }
.lst-cat-cell:hover { background: rgba(150,30,35,0.02); }
.lst-cat-label { font-size: var(--text-11); letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 4px; font-family: var(--mono); }
.lst-cat-value { font-family: var(--mono); font-size: var(--text-lg); font-weight: 700; color: var(--charcoal); }


/* ── 6. Tables (Pretty Table) ─────────────────────────────── */

.lst-table-container { border: 1px solid var(--border); border-radius: 0; overflow: hidden; box-shadow: var(--shadow-sm); background: var(--bg-card); margin-top: 20px; }

.pretty-table { width: 100%; border-collapse: collapse; background: var(--bg-card); border: 1px solid var(--border); border-radius: 0; }
.pretty-table thead th,
.lst-table-container thead th {
  background: var(--datagrid-header-bg);
  color: var(--datagrid-header-color);
  font-family: var(--datagrid-header-font);
  font-size: var(--datagrid-header-size);
  letter-spacing: var(--datagrid-header-spacing);
  text-transform: uppercase;
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
}
.pretty-table tbody tr {
  border-bottom: 1px solid var(--datagrid-divider);
  cursor: pointer;
  transition: background var(--dur-micro);
}
.pretty-table tbody tr:hover td { background: var(--datagrid-hover); }
.pretty-table tbody td {
  font-family: var(--datagrid-row-font);
  font-size: var(--datagrid-row-size);
  color: var(--text);
  padding: 0 var(--space-4);
  height: var(--datagrid-row-height);
  vertical-align: middle;
  word-break: keep-all;
}
.pretty-table tbody tr:has(.row-select:checked) td { background: rgba(150,30,35,0.04); }

/* Amount emphasis */
.pretty-table .td-price,
.pretty-table [class*="amount"],
.pretty-table [class*="price"] {
  font-family: var(--datagrid-mono);
  color: var(--datagrid-accent);
  font-weight: 700;
}

.pt-art-info { display: flex; align-items: center; gap: 12px; }
.pt-thumb { width: 44px; height: 44px; background: var(--bg-secondary); border-radius: 0; margin-right: 12px; float: left; flex-shrink: 0; background-size: cover; }
.pt-text h4 { font-size: var(--text-13); font-weight: 600; margin-bottom: 3px; color: var(--charcoal); }
.pt-text p { font-size: var(--text-11); color: var(--text-secondary); margin: 0; }
.pt-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 0; font-size: var(--text-2xs); font-weight: 600; font-family: var(--mono); transition: all var(--dur-hover); }
.pt-badge.available { background: rgba(45,79,53,0.08); color: var(--color-success); animation: badgeBreath 4s ease-in-out infinite; }
.pt-badge.reserved { background: var(--color-gold-bg); color: var(--color-gold); animation: badgeBreath 4s ease-in-out infinite; }
.pt-badge.sold { background: var(--alpha-6); color: rgba(17,17,17,0.5); }
.pt-badge.process { background: rgba(150,30,35,0.08); color: var(--red-brand); animation: badgeBreath 4s ease-in-out infinite; }
.pt-badge.done { background: rgba(45,79,53,0.08); color: var(--color-success); animation: badgeBreath 4s ease-in-out infinite; }
.pt-badge.hold { background: var(--color-warning-bg); color: var(--color-warning); }
.pt-badge.cancel { background: #f3f4f6; color: var(--status-closed); text-decoration: line-through; }
.pt-btn-edit { border: 1px solid var(--border); background: var(--bg-card); padding: 6px 10px; border-radius: 0; font-size: var(--text-11); cursor: pointer; color: var(--text-secondary); transition: all var(--dur-normal); }
.pt-btn-edit:hover { border-color: var(--charcoal); color: var(--charcoal); }

@keyframes badgeBreath { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.85; transform: scale(1.02); } }


/* ── 7. Matching System ───────────────────────────────────── */

.matching-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }

.match-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 2px solid var(--border-strong);
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.match-card:hover {
  border-top-color: var(--red-brand);
  box-shadow: var(--shadow-sm);
  transform: translateY(-4px);
}
.match-card:has(.mc-badge:contains("MY REQUEST")) { background: var(--bg); border: 2px solid var(--red-brand); box-shadow: 0 4px 16px rgba(150,30,35,0.12); }
.match-card[style*="border:1px solid var(--color-neutral)"] { background: linear-gradient(135deg, var(--bg) 0%, var(--white) 100%); border: 2px solid var(--red-brand); box-shadow: 0 4px 16px rgba(150,30,35,0.12); border-left: 4px solid var(--red-brand); }
.match-card--mine { background: linear-gradient(135deg, var(--warm-bg) 0%, var(--bg-card) 100%); border: 2px solid var(--red-brand); box-shadow: var(--shadow-brand); border-left: 4px solid var(--red-brand); }

.mc-header { padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg); display: flex; justify-content: space-between; align-items: center; }
.mc-badge { font-family: var(--mono); font-size: var(--text-2xs); font-weight: 700; padding: 2px 6px; border-radius: 0; letter-spacing: 0.06em; }
.mc-badge.buy { color: var(--color-info-alt); background: var(--color-info-bg); border-color: var(--color-info-border); }
.mc-badge.sell { color: var(--color-success); background: var(--color-success-bg); border-color: var(--color-success-border); }
.mc-date { font-size: var(--text-2xs); color: var(--text-muted); font-family: var(--mono); }
.mc-body { padding: 16px; }
.mc-artist { font-family: var(--sans); font-size: var(--text-base); font-weight: 700; color: var(--charcoal); margin-bottom: 4px; }
.mc-work { font-size: var(--text-xs); color: var(--text-secondary); margin-bottom: 8px; }
.mc-price { font-size: var(--text-16); font-weight: 700; font-family: var(--mono); color: var(--charcoal); }
.mc-price span { font-size: var(--text-2xs); font-weight: 400; color: var(--text-muted); }
.mc-meta { font-size: var(--text-11); color: var(--text-muted); margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.mc-footer { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.mc-status { font-size: var(--text-11); font-weight: 600; color: var(--text-secondary); }
.mc-card--mine { border-top-color: var(--red-brand); }
.mc-card--neutral { border-top-color: var(--color-neutral); }

/* Option tags */
.opt-tag { display: inline-block; font-size: var(--text-2xs); font-weight: 600; padding: 2px 6px; border-radius: 0; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-muted); }
.opt-tag.active { border-color: var(--color-neutral); color: var(--color-neutral); background: var(--bg-secondary); }

/* Match grade (S/A/B/C) */
.match-grade { font-family: var(--mono); font-weight: 800; font-size: var(--text-xs); padding: 2px 8px; border-radius: 0; display: inline-flex; align-items: center; gap: 3px; letter-spacing: 0.04em; }
.match-grade--s { background: var(--color-info-bg); color: var(--color-info-alt); border: 1px solid var(--color-info-border); }
.match-grade--a { background: rgba(45,79,53,0.08); color: var(--color-success); border: 1px solid rgba(45,79,53,0.15); }
.match-grade--b { background: var(--color-gold-bg); color: var(--color-gold); border: 1px solid rgba(140,109,70,0.15); }
.match-grade--c { background: rgba(107,114,128,0.08); color: var(--status-closed); border: 1px solid rgba(107,114,128,0.15); }
.match-grade__factors { font-family: var(--mono); font-size: var(--text-9); color: var(--text-muted); font-weight: 500; margin-left: 4px; }

/* Match score breakdown */
.match-score-breakdown { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.match-factor { display: inline-flex; align-items: center; gap: 3px; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--text-9); font-weight: 600; letter-spacing: 0.03em; padding: 2px 7px; border-radius: 0; background: var(--color-info-bg); color: var(--color-info); }
.match-factor-group { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.match-factor.objective { background: rgba(37,99,235,0.06); border: 1px solid var(--color-info-border); color: var(--color-info-alt); }
.match-factor.subjective { background: rgba(140,109,70,0.06); border: 1px dashed rgba(140,109,70,0.20); color: var(--color-gold); }


/* ── 8. Pipeline / Kanban ─────────────────────────────────── */

.pipeline-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pipeline-col { background: var(--bg-subtle); border-radius: 0; padding: 12px; border: 1px solid var(--border); min-height: 200px; }
.pipeline-head { font-size: var(--text-xs); font-weight: 700; color: var(--text-muted); margin-bottom: 12px; display: flex; justify-content: space-between; font-family: var(--mono); }
.pipeline-card { background: var(--bg-card); padding: 12px; border-radius: 0; border: 1px solid var(--border); margin-bottom: 8px; cursor: pointer; transition: all var(--dur-hover); box-shadow: 0 1px 4px rgba(0,0,0,0.02); }
.pipeline-card:hover { border-color: var(--red-brand); box-shadow: 0 4px 16px rgba(150,30,35,0.1); }
.pc-artist { font-size: var(--text-13); font-weight: 700; margin-bottom: 2px; }
.pc-work { font-size: var(--text-11); color: var(--text-secondary); }
.pc-price { font-size: var(--text-sm); font-weight: 700; font-family: var(--mono); margin-top: 6px; }
.pc-meta { font-size: var(--text-2xs); color: var(--text-muted); margin-top: 6px; font-family: var(--mono); }
.pc-stale-alert {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: var(--text-9); font-weight: 700; letter-spacing: 0.04em;
  color: var(--color-warning); background: rgba(234,179,8,0.10);
  padding: 3px 8px; border-radius: 0;
  margin-top: 6px; animation: staleBreath 2.5s ease-in-out infinite;
}
@keyframes staleBreath { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* Pipeline card — new match */
.pipeline-card--new-match { border-left: 3px solid var(--red-brand); }


/* ── 9. Sourcing ──────────────────────────────────────────── */

.src-card {
  display: grid; grid-template-columns: 80px 1fr auto; gap: 16px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-top: 2px solid var(--border-strong);
  padding: 16px; border-radius: 0; align-items: center;
  transition: border-top-color var(--dur-fast), box-shadow var(--dur-fast);
  margin-bottom: 12px;
}
.src-card:hover { border-top-color: var(--red-brand); box-shadow: var(--shadow-sm); transform: none; }
.src-thumb { width: 80px; height: 80px; background: var(--bg-skeleton-to); border-radius: 0; background-size: cover; background-position: center; }
.src-info { display: flex; flex-direction: column; gap: 4px; }
.src-tag {
  display: inline-block; font-family: var(--mono); font-size: var(--text-2xs);
  padding: 2px 6px; background: var(--bg-secondary); color: var(--text-muted);
  border-radius: 0; align-self: flex-start; font-weight: 700; letter-spacing: 0.06em;
}
.src-tag.my { background: var(--color-neutral-bg); color: var(--color-neutral); }
.src-title { font-weight: 700; font-size: var(--text-base); }
.src-sub { font-size: var(--text-xs); color: var(--text-caption); }
.doc-chips { display: flex; gap: 6px; margin-top: 4px; }
.doc-chip { font-size: var(--text-2xs); padding: 2px 6px; border: 1px solid var(--border); border-radius: 0; color: var(--text-caption); background: var(--bg-subtle); }
.doc-chip.ok { color: var(--color-success); border-color: var(--color-success-border); background: var(--color-success-bg); }


/* ── 10. Modals & Overlays ────────────────────────────────── */

.modal-overlay, .tr-modal-overlay { position: fixed; inset: 0; background: rgba(17,17,17,0.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 10000; display: none; align-items: center; justify-content: center; }
.modal-overlay.show, .tr-modal-overlay.show { display: flex; animation: modalFadeIn 0.3s var(--ease); }
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-box, .tr-modal { background: var(--bg-card); width: 1000px; max-width: 95%; height: auto; max-height: 90vh; border-radius: 0; display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-xl), 0 0 0 1px rgba(0,0,0,0.05); animation: modalSlideUp 0.35s var(--ease-out-expo); }
@keyframes modalSlideUp { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-header, .tr-header { padding: 20px 28px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: var(--warm-bg); }
.modal-header h3, .tr-header h3 { font-family: var(--serif); font-size: var(--text-xl); font-weight: 400; color: var(--charcoal); letter-spacing: -0.01em; }
.modal-close { background: none; border: none; font-size: var(--text-20); cursor: pointer; color: var(--text-muted); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 0; transition: all var(--dur-fast); }
.modal-close:hover { background: var(--alpha-6); color: var(--charcoal); }
.modal-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.modal-footer { padding: var(--space-5) var(--space-6); border-top: 1px solid var(--border); display: flex; gap: var(--space-2); justify-content: flex-end; background: var(--warm-bg); }
.modal-body, .tr-body { flex: 1; overflow: hidden; display: grid; grid-template-columns: 1.2fr 0.8fr; }
.modal-body.body-3col { grid-template-columns: 1.1fr 1fr 0.9fr; }
.modal-col, .tr-col { padding: 28px; overflow-y: auto; }
.modal-col.bg, .tr-col.left { background: var(--bg-subtle); border-right: 1px solid rgba(17,17,17,0.06); }
.modal-col { border-right: 1px solid rgba(17,17,17,0.06); }

/* Trade modal sections */
.tr-section-title { font-family: var(--sans); font-size: var(--text-13); font-weight: 700; color: var(--text); margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; }
.tr-valuation-box { background: var(--bg-card); border: 1px solid var(--border); padding: 20px; border-radius: 0; margin-bottom: 24px; }
.tr-val-header { display: flex; justify-content: space-between; margin-bottom: 20px; }
.tr-val-opt { display: flex; gap: 8px; }
.tr-radio-label { font-size: var(--text-11); cursor: pointer; display: flex; align-items: center; gap: 4px; color: var(--text-muted); }
.tr-radio-label input { accent-color: var(--red-brand); }
.tr-radio-label.active { color: var(--charcoal); font-weight: 600; }
.tr-chart-bar { height: 8px; background: var(--bg-skeleton-to); border-radius: 0; position: relative; margin: 30px 0 10px; }
.tr-chart-range { position: absolute; top: 0; bottom: 0; left: 20%; width: 40%; background: rgba(59,130,246,0.2); border-radius: 0; }
.tr-chart-dot { position: absolute; top: 2px; width: 3px; height: 3px; background: var(--charcoal); transition: left 0.5s var(--ease-out-expo); border-radius: 50%; }
.tr-chart-dot::after { content: attr(data-label); position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: var(--text-2xs); color: var(--charcoal); white-space: nowrap; font-weight: 500; }
.tr-chart-dot.target { background: var(--red-brand); z-index: 2; width: 3px; height: 3px; top: -22px; }
.tr-chart-dot.target::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1px; height: 22px; background: var(--red-brand); z-index: 1; }
.tr-chart-dot.target::after { color: var(--white); font-size: var(--text-2xs); font-weight: 600; bottom: auto; top: -22px; background: var(--red-brand); padding: 2px 5px; border-radius: 0; text-shadow: none; white-space: nowrap; }
.tr-price-display { display: flex; justify-content: space-between; margin-top: 12px; font-family: var(--mono); font-size: var(--text-11); color: var(--text-muted); }
.tr-price-summary-box { background: var(--bg); border: 1px solid var(--border); border-radius: 0; padding: 12px; margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center; }
.tr-price-summary-item { padding: 8px; }
.tr-price-summary-label { font-size: var(--text-2xs); color: var(--text-muted); font-family: var(--mono); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.tr-price-summary-value { font-size: var(--text-base); font-weight: 700; color: var(--charcoal); font-family: var(--mono); }
.tr-price-summary-value.ai { color: var(--red-brand); }
.tr-memo-area { width: 100%; height: 120px; padding: 12px; border: 1px solid var(--border); font-family: var(--sans); font-size: var(--text-13); line-height: 1.6; resize: none; outline: none; box-sizing: border-box; }
.tr-memo-area:focus { border-color: var(--charcoal); }

/* AI confidence bar */
.tr-confidence-bar { position: absolute; top: -1px; height: 10px; background: rgba(150,30,35,0.12); border-radius: 0; border: 1px solid rgba(150,30,35,0.20); transition: left 0.5s var(--ease-out-expo), width 0.5s var(--ease-out-expo); }
.tr-confidence-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--text-2xs); color: var(--text-muted); letter-spacing: 0.03em; }
.tr-confidence-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 0; background: rgba(150,30,35,0.06); color: var(--red-brand); font-weight: 600; font-size: var(--text-2xs); }

/* Written bid */
.bid-round-card { border: 1px solid var(--border-strong); border-radius: 0; background: var(--bg-card); margin-bottom: 24px; overflow: hidden; }
.bid-header { padding: 12px 16px; background: var(--bg-subtle); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.bid-title { font-family: var(--sans); font-weight: 700; font-size: var(--text-xs); color: var(--charcoal); }
.bid-time { font-family: var(--mono); font-size: var(--text-2xs); color: var(--text-muted); }
.bid-content { padding: 20px 16px; }
.bid-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: var(--text-13); }
.bid-label { color: var(--text-muted); }
.bid-val { font-weight: 600; color: var(--charcoal); }
.sys-msg { text-align: center; margin: 20px 0; font-size: var(--text-11); color: var(--text-muted); position: relative; }
.sys-msg::before { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: var(--border); z-index: -1; }
.sys-msg span { background: var(--bg-card); padding: 0 12px; }


/* ── 11. CRM & Client Management ──────────────────────────── */

/* Client ID */
.client-id { font-family: var(--mono); font-weight: 700; color: var(--charcoal); font-size: var(--text-sm); }

/* Masked text (contacts) */
.masked-text { color: var(--text-muted); font-family: var(--mono); letter-spacing: 1px; background: rgba(0,0,0,0.03); padding: 2px 6px; border-radius: 0; font-size: var(--text-11); display: block; width: fit-content; margin-bottom: 2px; }

/* Insight chips */
.insight-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.insight-chip { font-size: var(--text-2xs); padding: 3px 8px; border-radius: 0; font-weight: 600; border: 1px solid transparent; display: inline-block; white-space: nowrap; }
.insight-chip.money { background: rgba(45,79,53,0.08); color: var(--color-success); border-color: rgba(45,79,53,0.15); }
.insight-chip.fast { background: rgba(62,76,89,0.08); color: var(--color-neutral); border-color: rgba(62,76,89,0.15); }
.insight-chip.warm { background: var(--color-gold-bg); color: var(--color-gold); border-color: rgba(140,109,70,0.15); }
.insight-chip.hot { background: rgba(220,38,38,0.06); color: var(--color-danger); border-color: rgba(220,38,38,0.12); }
.insight-chip.system { background: rgba(37,99,235,0.07); color: var(--color-info-alt); border: 1px solid var(--color-info-border); }
.insight-chip.user-tag { background: var(--bg-card); color: var(--text-secondary); border: 1px dashed var(--border-strong); font-weight: 500; }

/* Next Action badges */
.next-action-badge { font-size: var(--text-11); font-weight: 700; padding: 5px 10px; border-radius: 0; display: inline-block; white-space: nowrap; }
.next-action-badge.need-proposal { background: rgba(150,30,35,0.15); color: var(--red-brand); border: 1px solid rgba(150,30,35,0.2); }
.next-action-badge.wait-response { background: rgba(249,158,11,0.15); color: var(--color-warning); border: 1px solid rgba(249,158,11,0.2); }
.next-action-badge.follow-up { background: rgba(59,130,246,0.15); color: var(--color-info); border: 1px solid rgba(59,130,246,0.2); }

/* Online status */
.online-status { font-size: var(--text-11); font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 0; }
.online-status .status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.online-status.is-online { color: var(--status-online-alt); font-weight: 700; }
.online-status.is-online .status-dot { background: var(--status-online); box-shadow: 0 0 6px rgba(34,197,94,0.6); animation: online-pulse 1.5s ease-in-out infinite; }
@keyframes online-pulse { 0%,100% { box-shadow: 0 0 3px rgba(34,197,94,0.4); } 50% { box-shadow: 0 0 10px rgba(34,197,94,0.8); } }
.online-status.is-recent { color: var(--status-online-alt); }
.online-status.is-recent .status-dot { background: transparent; border: 2px solid var(--status-online); width: 5px; height: 5px; }
.online-status.is-today { color: var(--text-secondary); }
.online-status.is-today .status-dot { background: var(--status-pending); }
.online-status.is-inactive { color: var(--text-muted); }
.online-status.is-inactive .status-dot { background: var(--status-dormant); }

/* Pending expiry */
.pending-expires { font-size: var(--text-11); font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 0; }
.pending-expires.expires-critical { color: var(--color-danger); font-weight: 800; background: rgba(220,38,38,0.10); border: 1px solid rgba(220,38,38,0.2); animation: online-pulse-red 1.5s ease-in-out infinite; }
@keyframes online-pulse-red { 0%,100% { opacity:1; } 50% { opacity:0.6; } }
.pending-expires.expires-normal { color: var(--text-muted); background: rgba(0,0,0,0.03); }

/* Priority badge */
.priority-badge { font-size: var(--text-11); font-weight: 700; padding: 5px 10px; border-radius: 0; display: inline-block; white-space: nowrap; }
.priority-badge.target { background: rgba(239,68,68,0.15); color: var(--color-danger); border: 1px solid rgba(239,68,68,0.2); }
.priority-badge.watch { background: rgba(250,204,21,0.15); color: var(--color-warning); border: 1px solid rgba(250,204,21,0.2); }
.priority-badge.normal { background: rgba(107,114,128,0.1); color: var(--status-closed); border: 1px solid rgba(107,114,128,0.2); }

/* Quick menu dropdown */
.quick-menu-dropdown { transition: all 0.2s ease; }

/* Client chip */
.client-chip { display: inline-block; background: rgba(62,76,89,0.08); color: var(--color-neutral); font-size: var(--text-11); padding: 3px 8px; border-radius: 0; margin-right: 4px; margin-bottom: 2px; font-weight: 500; }

/* Client relay button */
.client-relay-btn { background: linear-gradient(135deg, var(--color-neutral), #2d3a47); color: var(--white); border: none; padding: 6px 12px; border-radius: 0; font-size: var(--text-11); font-weight: 600; cursor: pointer; font-family: var(--sans); transition: all var(--dur-normal); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.client-relay-btn:hover { background: linear-gradient(135deg, #2d3a47, #1f2834); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(62,76,89,0.3); }
.client-relay-btn:active { transform: translateY(0); }

/* CRM score tooltips */
.score-detail-trigger { position: relative; cursor: help; border-bottom: 1px dotted var(--text-muted); }
.score-detail-trigger .score-tooltip { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); width: 220px; background: var(--charcoal); color: var(--white); font-size: var(--text-2xs); line-height: 1.6; padding: 10px 12px; border-radius: 0; box-shadow: var(--shadow-lg); z-index: 100; font-family: var(--mono); font-weight: 400; }
.score-detail-trigger .score-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--charcoal); }
.score-detail-trigger:hover .score-tooltip { display: block; }
.chip-source-label { font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); opacity: 0.6; margin-right: 2px; }

/* Dual score cards (Financial Health + Interaction Vibe) */
.dual-score-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dual-score-card { background: var(--bg-card); padding: 14px 12px; border-radius: 0; border: 1px solid var(--border); position: relative; }
.dual-score-card__badge { font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; border-radius: var(--radius-pill); display: inline-block; margin-bottom: 8px; }
.dual-score-card__badge--verified { background: var(--color-info-bg); color: var(--color-info-alt); border: 1px solid var(--color-info-border); }
.dual-score-card__badge--dealer { background: var(--color-gold-bg); color: var(--color-gold); border: 1px dashed var(--color-gold-border); }
.dual-score-card__title { font-size: var(--text-2xs); font-weight: 700; color: var(--text-muted); margin-bottom: 6px; letter-spacing: 0.02em; }
.dual-score-card__value { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--text-20); font-weight: 800; line-height: 1; margin-bottom: 8px; }
.dual-score-card__value--financial { color: var(--color-success); }
.dual-score-card__value--vibe { color: var(--color-gold); }
.dual-score-card__detail { font-size: var(--text-9); color: var(--text-muted); line-height: 1.5; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dual-score-card__detail span { display: block; }
.dual-score-card__vibe-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.dual-score-card__vibe-chips .insight-chip { font-size: var(--text-9); padding: 2px 6px; }

/* Strategy tip */
.strategy-tip { background: rgba(37,99,235,0.04); border: 1px solid var(--color-info-border); border-radius: 0; padding: 10px 12px; margin-top: 10px; font-size: var(--text-2xs); color: var(--color-info); line-height: 1.5; }
.strategy-tip strong { font-weight: 700; }


/* ── 12. Settlement System ────────────────────────────────── */

/* Month navigation */
.stl-month-nav { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.stl-month-btn { width: 32px; height: 32px; border-radius: var(--radius-round); background: var(--bg-card); border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); color: var(--text-secondary); cursor: pointer; transition: all var(--dur-fast); font-family: var(--sans); }
.stl-month-btn:hover { border-color: var(--charcoal); color: var(--charcoal); background: var(--warm-bg); }
.stl-month-label { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--text-xl); font-weight: 700; color: var(--charcoal); letter-spacing: -0.01em; min-width: 100px; text-align: center; }
.stl-month-sub { font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-left: 4px; font-weight: 400; }

/* Summary dashboard */
.stl-summary-grid { display: grid; grid-template-columns: 1fr 280px; gap: 20px; margin-bottom: 28px; }
.stl-summary-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 0; padding: 0; box-shadow: var(--shadow-sm); overflow: hidden; }
.stl-summary-card__header { padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--warm-bg); display: flex; align-items: center; justify-content: space-between; }
.stl-summary-card__title { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.stl-summary-card__period { font-family: var(--mono); font-size: var(--text-xs); color: var(--text-muted); letter-spacing: 0.04em; }
.stl-summary-card__body { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; }

/* KPI cells in settlement */
.stl-kpi { padding: 20px; text-align: center; border-right: 1px solid var(--border); position: relative; }
.stl-kpi:last-child { border-right: none; }
.stl-kpi__label { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--text-9); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.stl-kpi__value { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--text-lg); font-weight: 700; color: var(--charcoal); letter-spacing: -0.02em; line-height: 1; }
.stl-kpi__value--brand { color: var(--red-brand); }
.stl-kpi__value--warning { color: var(--color-warning); }
.stl-kpi__value--danger { color: var(--color-danger); }
.stl-kpi__sub { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--text-2xs); color: var(--text-muted); margin-top: 6px; letter-spacing: 0.02em; }
.stl-kpi__divider { position: absolute; top: 20px; right: -0.5px; bottom: 20px; width: 1px; background: var(--border); }

/* Mini bar chart */
.stl-chart-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 0; padding: 0; box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; }
.stl-chart-card__header { padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--warm-bg); }
.stl-chart-card__title { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.stl-chart-card__body { flex: 1; padding: 16px; display: flex; flex-direction: column; justify-content: flex-end; }
.stl-chart-bars { display: flex; align-items: flex-end; gap: 8px; height: 100px; padding-bottom: 4px; }
.stl-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.stl-bar { width: 100%; border-radius: 0; transition: height 0.6s var(--ease-out-expo); position: relative; min-height: 4px; }
.stl-bar--muted { background: rgba(17,17,17,0.07); }
.stl-bar--current { background: var(--red-brand); }
.stl-bar-val { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--text-9); font-weight: 600; color: var(--text-muted); letter-spacing: -0.01em; white-space: nowrap; }
.stl-bar-col:last-child .stl-bar-val { color: var(--red-brand); font-weight: 700; }
.stl-bar-month { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--text-9); letter-spacing: 0.06em; color: var(--text-muted); text-transform: uppercase; }
.stl-bar-col:last-child .stl-bar-month { color: var(--charcoal); font-weight: 600; }
.stl-chart-baseline { height: 1px; background: var(--border-strong); margin-top: 0; margin-bottom: 8px; }

/* Settlement status badges */
.stl-status-badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); font-weight: 700; padding: 4px 10px; border-radius: 0; white-space: nowrap; }
.stl-status-badge--pending { color: var(--color-warning); background: rgba(202,138,4,0.08); }
.stl-status-badge--request { color: var(--color-info-alt); background: rgba(37,99,235,0.08); }
.stl-status-badge--complete { color: var(--status-online-alt); background: rgba(22,163,106,0.08); }
.stl-status-badge--overdue { color: var(--color-danger); background: var(--color-danger-bg); }
.stl-date-condition { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--text-9); color: var(--text-muted); letter-spacing: 0.02em; display: block; margin-top: 2px; }
.stl-bizday-badge { font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: 0.04em; color: var(--color-warning); background: rgba(234,179,8,0.10); border: 1px solid rgba(234,179,8,0.18); padding: 1px 5px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; vertical-align: middle; }
.stl-bizday-badge svg { width: 9px; height: 9px; }


/* ── 13. My Page ──────────────────────────────────────────── */

/* Forms */
.mp-form-group { margin-bottom: 16px; }
.mp-label { display: block; font-size: var(--text-11); color: var(--text-muted); margin-bottom: 6px; font-family: var(--sans); }
.mp-input, select.mp-input { width: 100%; padding: 10px; border: 1px solid var(--border); font-family: var(--sans); font-size: var(--text-13); outline: none; box-sizing: border-box; }
.mp-input:focus { border-color: var(--charcoal); }
.mp-btn { width: 100%; padding: 12px; background: var(--charcoal); color: var(--white); border: none; font-size: var(--text-xs); font-weight: 600; cursor: pointer; margin-top: 8px; font-family: var(--sans); }
.mp-btn.secondary { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); }
.mp-btn:hover { opacity: 0.9; }
.mp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mp-card { border: 1px solid var(--border); background: var(--bg-card); padding: 24px; }

/* Welcome banner */
.mypage-welcome-banner { background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid var(--red-brand); border-radius: 0; padding: 24px 28px; margin-bottom: 32px; color: var(--text); box-shadow: var(--shadow-sm); }

/* Today tasks */
.today-task-widget { background: var(--bg-card); border: 1px solid var(--border); border-radius: 0; padding: 24px 28px; margin-bottom: 32px; box-shadow: var(--shadow-sm); }
.task-card { background: linear-gradient(135deg, var(--bg) 0%, #f3f0eb 100%); border: 1px solid var(--border); border-radius: 0; padding: 20px 16px; transition: all var(--dur-slow) var(--ease); text-align: center; }
.task-card:hover { border-color: var(--border-strong); box-shadow: 0 4px 16px rgba(0,0,0,0.05); transform: translateY(-2px); }
.task-card__count { font-size: var(--text-2xl); font-weight: 700; }
.task-card__count--urgent { color: var(--red-brand); }
.task-card__count--warning { color: var(--color-warning); }
.task-card__count--info { color: var(--color-info); }
.task-card__label { font-size: var(--text-base); color: var(--text-secondary); margin-top: var(--space-1); }
.task-card__detail { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-2); }

/* Main grid */
.mypage-main-grid { display: grid; grid-template-columns: 320px 1fr; gap: 32px; }
.mypage-profile-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 0; padding: 28px 24px; text-align: center; height: fit-content; box-shadow: var(--shadow-sm); }
.mpc-avatar-section { position: relative; margin-bottom: 16px; display: flex; justify-content: center; }
.mpc-tier-badge { position: static; display: inline-block; margin: 6px 0 8px 0; background: rgba(26,26,26,0.85); color: var(--white); font-size: 7px; font-weight: 900; padding: 2px 4px; border-radius: 0; border: 1px solid rgba(255,255,255,0.15); letter-spacing: 0.08em; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.tier-progress-container { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.tier-progress-label { font-size: var(--text-2xs); color: var(--text-muted); margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; }
.tier-progress-bar { width: 100%; height: 6px; background: var(--alpha-6); border-radius: 0; overflow: hidden; }
.tier-progress-fill { height: 100%; background: linear-gradient(90deg, var(--red-brand), #c2273c); border-radius: 0; transition: width 0.6s var(--ease); }
.mpc-name { font-size: var(--text-md); font-weight: 700; color: var(--charcoal); margin-bottom: 4px; }
.mpc-email { font-size: var(--text-11); color: var(--text-secondary); font-family: var(--mono); margin-bottom: 12px; }
.mpc-category { display: flex; justify-content: center; margin-bottom: 8px; }
.mpc-category-label { background: rgba(26,26,26,0.08); color: var(--charcoal); font-size: var(--text-2xs); font-weight: 600; padding: 4px 8px; border-radius: 0; font-family: var(--mono); }
.mpc-affiliation { font-size: var(--text-xs); color: var(--text-secondary); margin-bottom: 16px; }

/* Details section */
.mypage-details-section { display: flex; flex-direction: column; gap: 24px; }
.mypage-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: 0; padding: 24px; box-shadow: var(--shadow-sm); }
.mypage-section h4 { font-size: var(--text-13); font-weight: 700; color: var(--charcoal); margin-bottom: 16px; }
.mys-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.mys-header h4 { margin: 0; }
.mys-edit-btn { background: none; border: none; font-size: var(--text-11); color: var(--color-neutral); cursor: pointer; font-weight: 600; font-family: var(--sans); padding: 4px 8px; transition: all var(--dur-normal); }
.mys-edit-btn:hover { color: #2d3a47; text-decoration: underline; }
.mys-content { display: flex; flex-direction: column; gap: 8px; }
.mys-label { font-size: var(--text-11); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.mys-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.mys-tag { display: inline-block; background: rgba(62,76,89,0.08); color: var(--color-neutral); font-size: var(--text-xs); padding: 6px 10px; border-radius: 0; border: 1px solid rgba(62,76,89,0.15); font-weight: 500; }
.mys-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mys-stat-item { text-align: center; padding: 16px; background: var(--bg-subtle); border-radius: 0; border: 1px solid var(--border); transition: all var(--dur-hover); }
.mys-stat-item:hover { border-color: var(--red-brand); background: rgba(150,30,35,0.03); }
.mys-stat-label { display: block; font-size: var(--text-2xs); color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--mono); }
.mys-stat-value { display: block; font-size: var(--text-md); font-weight: 700; color: var(--charcoal); font-family: var(--mono); }

/* Stats period tabs */
.stats-period-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.stats-period-tab { padding: 8px 12px; font-size: var(--text-11); font-weight: 500; color: var(--text-muted); background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: all var(--dur-normal); }
.stats-period-tab.is-active { color: var(--charcoal); border-bottom-color: var(--red-brand); }
.stats-period-tab:hover { color: var(--charcoal); }

/* Trend indicators */
.trend-indicator { font-size: var(--text-2xs); font-weight: 600; font-family: var(--mono); margin-top: 2px; }
.trend-indicator.up { color: var(--color-success); }
.trend-indicator.down { color: var(--red-ui); }

/* Tier table */
.tier-table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: var(--text-xs); border: 1px solid var(--border); overflow: hidden; }
.tier-table th { background: var(--bg-subtle); color: var(--text-secondary); font-weight: 600; padding: 12px; border-bottom: 2px solid var(--border); text-align: center; }
.tier-table td { padding: 12px; border-bottom: 1px solid var(--border); text-align: center; color: var(--charcoal); }
.tier-table .row-head { text-align: left; font-weight: 600; color: var(--text-secondary); background: var(--bg); width: 120px; }
.tier-table .section-row td { background: var(--charcoal); color: var(--white); font-weight: 700; font-size: var(--text-11); text-align: left; padding: 6px 12px; letter-spacing: 0.04em; }
.tier-table th.highlight { background: rgba(150,30,35,0.08); color: var(--red-brand); border-bottom-color: rgba(150,30,35,0.2); }
.tier-table td.highlight-cell { background: rgba(150,30,35,0.03); font-weight: 600; border-left: 1px solid rgba(150,30,35,0.1); border-right: 1px solid rgba(150,30,35,0.1); }


/* ── 14. Badges & Status ──────────────────────────────────── */

.badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px 8px; border-radius: 0; font-size: var(--text-xs); font-weight: 700; font-family: var(--mono); white-space: nowrap; line-height: 1.4; border: 1px solid transparent; }
.badge--success { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success-border); }
.badge--warning { background: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning-border); }
.badge--danger { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger-border); }
.badge--info { background: var(--color-info-bg); color: var(--color-info); border-color: var(--color-info-border); }
.badge--neutral { background: var(--color-neutral-bg); color: var(--color-neutral); border-color: var(--color-neutral-border); }

/* Verified badge */
.verified-badge { display: inline-flex; align-items: center; gap: 3px; font-size: var(--text-2xs); font-weight: 700; color: var(--color-info-alt); letter-spacing: 0.02em; white-space: nowrap; }
.verified-badge svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Risk source tag */
.risk-source-tag { display: inline-flex; align-items: center; gap: 3px; font-family: var(--mono); font-size: var(--text-9); font-weight: 600; padding: 1px 6px; border-radius: 0; background: rgba(62,76,89,0.08); color: var(--text-secondary); vertical-align: middle; letter-spacing: 0.02em; }

/* Tier info tooltip */
.tier-info-trigger { position: relative; cursor: help; border-bottom: 1px dotted var(--text-muted); }
.tier-info-trigger .tier-tooltip { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); width: 200px; background: var(--charcoal); color: var(--white); font-size: var(--text-2xs); line-height: 1.5; padding: 10px 12px; border-radius: 0; box-shadow: var(--shadow-lg); z-index: 100; font-family: var(--mono); font-weight: 400; }
.tier-info-trigger .tier-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--charcoal); }
.tier-info-trigger:hover .tier-tooltip { display: block; }

/* Auction compare chip */
.auction-compare-chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.04em; padding: 4px 10px; border-radius: var(--radius-pill); background: rgba(150,30,35,0.06); color: var(--red-brand); border: 1px solid rgba(150,30,35,0.15); cursor: default; white-space: nowrap; }
.auction-compare-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

/* Chips */
.chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 5px 12px; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); cursor: default; transition: all var(--dur-fast); font-family: var(--sans); }
.chip--interactive { cursor: pointer; }
.chip--interactive:hover { border-color: var(--charcoal); color: var(--charcoal); background: var(--warm-bg); }
.chip--interactive.is-active, .chip--interactive:active { background: var(--charcoal); color: var(--white); border-color: var(--charcoal); }

/* Deal timeline */
.deal-timeline { position: relative; padding-left: 20px; margin-bottom: 24px; }
.deal-timeline::before { content: ''; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 1.5px; background: var(--border-strong); }
.deal-tl-item { position: relative; padding: 0 0 16px 16px; }
.deal-tl-item:last-child { padding-bottom: 0; }
.deal-tl-item::before { content: ''; position: absolute; left: -17px; top: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); border: 1.5px solid var(--bg-card); box-shadow: 0 0 0 1.5px var(--border-strong); }
.deal-tl-item.is-current::before { background: var(--red-brand); box-shadow: 0 0 0 1.5px var(--red-brand), 0 0 0 4px rgba(150,30,35,0.12); }
.deal-tl-date { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--text-2xs); font-weight: 600; color: var(--text-muted); letter-spacing: 0.06em; margin-bottom: 2px; }
.deal-tl-text { font-size: var(--text-xs); color: var(--charcoal); line-height: 1.5; font-weight: 500; }
.deal-tl-item.is-current .deal-tl-date { color: var(--red-brand); }
.deal-tl-item.is-current .deal-tl-text { color: var(--red-brand); font-weight: 700; }


/* ── 15. Interaction States ───────────────────────────────── */

/* Global focus ring */
*:focus-visible { outline: none; box-shadow: var(--focus-ring); }
*:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* Press feedback */
.match-card:active { transform: translateY(0px); }
.pipeline-card:active { transform: scale(0.99); }
.lst-nav-item:active { background: rgba(150,30,35,0.06); }

/* Custom scrollbars */
.lst-fullscreen-main::-webkit-scrollbar, .modal-col::-webkit-scrollbar, .tr-col::-webkit-scrollbar { width: 6px; }
.lst-fullscreen-main::-webkit-scrollbar-track, .modal-col::-webkit-scrollbar-track, .tr-col::-webkit-scrollbar-track { background: transparent; }
.lst-fullscreen-main::-webkit-scrollbar-thumb, .modal-col::-webkit-scrollbar-thumb, .tr-col::-webkit-scrollbar-thumb { background: var(--alpha-12); border-radius: var(--radius-pill); }
.lst-fullscreen-main::-webkit-scrollbar-thumb:hover, .modal-col::-webkit-scrollbar-thumb:hover, .tr-col::-webkit-scrollbar-thumb:hover { background: rgba(17,17,17,0.22); }
.lst-fullscreen-main, .modal-col, .tr-col { scrollbar-width: thin; scrollbar-color: var(--alpha-12) transparent; }

/* Card hover glow */
.match-card:hover { box-shadow: var(--shadow-brand-lg); }

/* Selection color */
::selection { background: rgba(150,30,35,0.15); color: var(--charcoal); }

/* Hover micro-radius */
.card:hover,
.match-card:hover,
.src-card:hover,
.task-card:hover,
.quick-action-card:hover,
.pipeline-card:hover,
.bid-round-card:hover,
.mc-card:hover,
.pc-card:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-blue:hover,
.btn-green:hover,
.lst-fs-action-btn:hover,
.chip--interactive:hover,
.selectable-chip:hover,
.stl-month-btn:hover,
.form-input:focus,
.form-select:focus,
.suggestion-item:hover,
.lst-nav-item:hover,
.pt-btn-edit:hover,
.pretty-table tbody tr:hover {
  border-radius: var(--radius-hover);
}

/* Form controls */
.form-input { padding: var(--space-3); border: 1px solid var(--border); border-radius: 0; font-family: var(--sans); font-size: var(--text-md); color: var(--text); background: var(--bg-card); transition: border-color var(--dur-fast); outline: none; }
.form-input:focus { border-color: var(--charcoal); box-shadow: 0 0 0 3px rgba(26,26,26,0.06); }
.form-input::placeholder { color: var(--text-muted); }
.form-select { padding: var(--space-3); border: 1px solid var(--border); border-radius: 0; font-family: var(--sans); font-size: var(--text-md); color: var(--text); background: var(--bg-card); cursor: pointer; outline: none; }
.form-select:focus { border-color: var(--charcoal); }
.form-input:disabled, .form-select:disabled { background: var(--bg-secondary); color: var(--text-muted); cursor: not-allowed; opacity: 0.7; }

/* Tag input system */
.tag-input-container { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: 0; background: var(--bg-card); min-height: 42px; cursor: text; transition: border-color 0.2s; }
.tag-input-container:focus-within { border-color: var(--charcoal); box-shadow: 0 0 0 3px rgba(26,26,26,0.06); }
.input-tag { display: inline-flex; align-items: center; gap: 4px; background: rgba(150,30,35,0.08); color: var(--red-brand); font-size: var(--text-xs); font-weight: 600; padding: 2px 8px; border-radius: 0; border: 1px solid rgba(150,30,35,0.15); }
.input-tag button { background: none; border: none; color: var(--red-brand); font-size: var(--text-sm); cursor: pointer; padding: 0; line-height: 1; opacity: 0.6; }
.input-tag button:hover { opacity: 1; }
.tag-input-field { border: none; outline: none; font-family: var(--sans); font-size: var(--text-13); flex: 1; min-width: 80px; background: transparent; padding: 4px 0; }
.suggestion-dropdown { position: absolute; background: var(--bg-card); border: 1px solid var(--border); border-radius: 0; width: calc(100% - 48px); max-height: 150px; overflow-y: auto; box-shadow: var(--shadow-md); z-index: 100; margin-top: 4px; }
.suggestion-item { padding: 8px 12px; font-size: var(--text-13); cursor: pointer; color: var(--charcoal); }
.suggestion-item:hover { background: var(--warm-bg); color: var(--red-brand); }

/* Selectable chips */
.chip-selector { display: flex; flex-wrap: wrap; gap: 8px; }
.selectable-chip { background: var(--bg-card); border: 1px solid var(--border); border-radius: 0; padding: 6px 12px; font-size: var(--text-xs); color: var(--text-secondary); cursor: pointer; transition: all var(--dur-normal); font-family: var(--sans); }
.selectable-chip:hover { border-color: var(--border-strong); }
.selectable-chip.selected { background: var(--charcoal); color: var(--white); border-color: var(--charcoal); font-weight: 600; }

/* File upload */
.file-upload-box { border: 2px dashed var(--border-strong); border-radius: 0; padding: 32px 24px; text-align: center; cursor: pointer; transition: all var(--dur-hover); background: var(--bg); }
.file-upload-box:hover { border-color: var(--red-brand); background: var(--bg-card); }
.file-txt { font-size: var(--text-xs); color: var(--text-muted); margin-top: 8px; }

/* Toast */
.toast-box { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px); background: rgba(26,26,26,0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--white); padding: 14px 28px; border-radius: 0; font-size: var(--text-13); font-weight: 500; opacity: 0; transition: opacity var(--dur-hover), transform var(--dur-hover); pointer-events: none; z-index: 20000; box-shadow: var(--shadow-lg); }
.toast-box.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

/* Bulk action bar */
.bulk-action-bar { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: var(--charcoal); color: var(--white); padding: 12px 24px; border-radius: 0; display: flex; gap: 16px; align-items: center; box-shadow: 0 8px 24px rgba(0,0,0,0.15); z-index: 1000; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.bulk-action-bar.show { opacity: 1; pointer-events: all; }
.bulk-count { font-size: var(--text-13); font-weight: 500; }

/* Filter chips */
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; align-items: center; }
.filter-chip { background: rgba(45,79,53,0.08); color: var(--color-success); padding: 6px 12px; border-radius: 0; font-size: var(--text-xs); font-weight: 500; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.filter-chip:hover { background: rgba(45,79,53,0.12); }
.filter-chip button { background: none; border: none; cursor: pointer; font-size: var(--text-sm); padding: 0; }
.filter-clear { padding: 6px 12px; border: 1px solid var(--border); border-radius: 0; font-size: var(--text-xs); background: var(--bg-card); cursor: pointer; transition: all var(--dur-normal); }
.filter-clear:hover { border-color: var(--charcoal); }

/* Inline margin util */
.inline-margin-v { margin: var(--space-2) 0; }


/* ── 16. Design Wash Composition Tokens ───────────────────── */

/* Typography Hierarchy — body type */
.lst-welcome h3,
.mc-work,
.src-sub,
.update-feed__detail {
  font-family: var(--type-body-font);
  font-size: var(--type-body-size);
  color: var(--type-body-color);
}

/* Typography Hierarchy — meta type */
.mc-meta,
.mc-date,
.kpi-trend,
.update-feed__time,
.lst-tab {
  font-family: var(--type-meta-font);
  font-size: var(--type-meta-size);
  color: var(--type-meta-color);
}

/* Section title type */
.lst-main-title,
.card__header .text-subheading {
  font-family: var(--type-section-title-font);
  font-size: var(--type-section-title-size);
  font-weight: var(--type-section-title-weight);
  letter-spacing: var(--type-section-title-spacing);
  color: var(--type-section-title-color);
}

/* KPI value type */
.kpi-value,
.task-card__count {
  font-family: var(--type-kpi-value-font);
  font-size: var(--type-kpi-value-size);
  font-weight: var(--type-kpi-value-weight);
  letter-spacing: var(--type-kpi-value-spacing);
  color: var(--type-kpi-value-color);
}

/* Update feed — datagrid texture */
.update-feed { display: flex; flex-direction: column; }
.update-feed__item {
  display: flex; align-items: center; gap: var(--space-3);
  height: var(--datagrid-row-height);
  border-bottom: 1px solid var(--datagrid-divider);
  padding: 0;
  transition: background var(--dur-micro);
}
.update-feed__item:last-child { border-bottom: none; }
.update-feed__item:hover { background: var(--datagrid-hover); }
.update-feed__icon { font-size: var(--text-sm); flex-shrink: 0; }
.update-feed__content { flex: 1; }
.update-feed__title { font-size: var(--datagrid-row-size); font-weight: 600; color: var(--charcoal); display: inline; }
.update-feed__detail { font-size: var(--text-sm); color: var(--text-muted); margin-left: var(--space-2); display: inline; }
.update-feed__time { font-family: var(--type-meta-font); font-size: var(--type-meta-size); color: var(--type-meta-color); white-space: nowrap; margin-left: auto; }

/* Quick action cards */
.quick-action-card { display: flex; align-items: center; gap: var(--space-3); padding: 14px 18px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 0; cursor: pointer; text-align: left; transition: all var(--dur-fast); font-family: var(--sans); position: relative; }
.quick-action-card:hover { border-color: var(--red-brand); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.quick-action-card__icon { font-size: var(--text-20); flex-shrink: 0; }
.quick-action-card__title { font-size: var(--text-base); font-weight: 700; color: var(--charcoal); }
.quick-action-card__desc { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.quick-action-card__badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; padding: 0 5px; font-size: var(--text-xs); font-weight: 700; color: var(--white); }

/* Text utilities (used in components) */
.text-section-title { font-size: var(--text-md); font-weight: 700; color: var(--charcoal); }
.text-price { font-family: var(--mono); font-weight: 700; color: var(--charcoal); }


/* ── 17. JS-Generated Element Classes ─────────────────────── */

/* Modal Overlay */
.js-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.js-modal-box { background: var(--bg-card); border: 1px solid var(--border); padding: 28px 32px; max-width: 380px; width: 90%; box-shadow: var(--shadow-xl); }
.js-modal-box h3 { font-size: var(--text-sm); font-weight: 700; color: var(--charcoal); margin-bottom: 12px; }
.js-modal-info { background: var(--surface-muted); padding: 14px; margin-bottom: 16px; border: 1px solid var(--border); }
.js-modal-info-label { font-size: var(--text-2xs); color: var(--text-secondary); margin-bottom: 4px; font-family: var(--mono); letter-spacing: 0.04em; }
.js-modal-info-value { font-size: var(--text-sm); font-weight: 700; color: var(--charcoal); font-family: var(--mono); }
.js-modal-desc { font-size: var(--text-2xs); color: var(--text-secondary); margin-bottom: 20px; line-height: 1.6; }
.js-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* Trade badge status */
.tr-badge--waiting { background: var(--color-warning-bg); color: var(--color-warning); }
.tr-badge--info { background: var(--color-warning-bg); color: var(--color-warning); }
.tr-badge--done { background: var(--color-success-bg); color: var(--color-success); }

/* Delta badge strategy */
.delta-badge--conservative { background: var(--alpha-4); color: var(--text-secondary); }
.delta-badge--neutral { background: var(--alpha-4); color: var(--text-muted); }
.delta-badge--aggressive { background: var(--alpha-4); color: var(--charcoal); }

/* Wishlist thumbnail placeholder */
.js-thumb-placeholder { width: 60px; height: 60px; background: var(--surface-muted); border: 1px solid var(--border); flex-shrink: 0; }

/* Theme chip */
.js-theme-chip { background: var(--alpha-8); color: var(--text-secondary); font-family: var(--mono); font-size: var(--text-2xs); letter-spacing: 0.04em; padding: 4px 8px; border: 1px solid var(--border); white-space: nowrap; }

/* Wishlist item */
.js-wishlist-item { background: var(--surface-panel); padding: 12px; border: 1px solid var(--border); display: flex; gap: 12px; }
.js-wishlist-info { flex: 1; }
.js-wishlist-title { font-size: var(--text-sm); font-weight: 700; color: var(--charcoal); margin-bottom: 2px; }
.js-wishlist-meta { font-family: var(--mono); font-size: var(--text-2xs); color: var(--text-muted); margin-bottom: 4px; }
.js-wishlist-price { font-family: var(--mono); font-size: var(--text-2xs); color: var(--red-brand); font-weight: 700; }

/* Modal action buttons */
.btn-modal-dark { background: var(--charcoal); color: var(--bg); padding: 14px 16px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--text-13); font-weight: 600; border: none; cursor: pointer; transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); box-shadow: var(--shadow-sm); width: 100%; }
.btn-modal-dark:hover { background: #000; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-modal-brand { background: var(--red-brand); color: var(--bg); padding: 14px 16px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--text-13); font-weight: 600; border: none; cursor: pointer; transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); box-shadow: 0 2px 8px var(--red-brand-dim); width: 100%; }
.btn-modal-brand:hover { background: var(--red-brand-hover); box-shadow: 0 4px 12px var(--red-brand-half); transform: translateY(-1px); }
.btn-modal-outline { background: var(--bg-card); color: var(--charcoal); padding: 14px 16px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--text-13); font-weight: 600; border: 1px solid var(--border-strong); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); box-shadow: none; width: 100%; }
.btn-modal-outline:hover { border-color: var(--charcoal); box-shadow: var(--shadow-sm); transform: translateY(-1px); }

/* VIP tier badge */
.tier-badge--vip { background: var(--charcoal); color: #FFF500; font-size: var(--text-2xs); font-weight: 700; padding: 4px 10px; display: inline-block; letter-spacing: 0.06em; font-family: var(--mono); }

/* CTA toast buttons */
.js-toast-close { background: none; border: none; color: rgba(255,255,255,0.6); cursor: pointer; font-size: var(--text-2xs); margin-left: 8px; font-family: var(--mono); }
.js-toast-close:hover { color: rgba(255,255,255,0.9); }
.js-toast-cta { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.4); color: var(--white); padding: 4px 12px; font-size: var(--text-2xs); font-weight: 600; font-family: var(--mono); cursor: pointer; margin-left: 8px; transition: background var(--dur-fast); }
.js-toast-cta:hover { background: rgba(255,255,255,0.35); }

/* Bid card + client badge (Token Hygiene) */
.bid-header--active { background: var(--gm-ink); color: var(--white); }
.bid-header--active .bid-title,
.bid-header--active .bid-time { color: var(--white); }
.bid-card--waiting { background: var(--bg); }
.client-badge--pending { background: var(--alpha-8); color: var(--text-muted); border: 1px solid var(--alpha-16); font-size: var(--text-2xs); font-weight: 700; padding: 4px 8px; border-radius: 4px; }


/* ── 18. Responsive ───────────────────────────────────────── */

@media (max-width: 1024px) {
  .lst-fullscreen-body { grid-template-columns: 200px 1fr !important; }
  .lst-fullscreen-main { padding: 24px 32px !important; }
  .kpi-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 12px; }
  .pipeline-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px; }
  .matching-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px; }
  .mypage-main-grid { grid-template-columns: 1fr; }
  .mys-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  #erp-section { height: auto !important; min-height: 100vh !important; }
  .lst-fullscreen-body { grid-template-columns: 1fr !important; }
  .lst-fs-nav {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    padding: 8px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    overflow-x: auto !important;
    width: auto !important;
    min-width: unset !important;
    max-width: unset !important;
  }
  .lst-nav-item {
    padding: 8px 12px !important;
    font-size: var(--text-xs) !important;
    border-left: none !important;
    border-bottom: 2px solid transparent !important;
    white-space: nowrap !important;
    min-height: unset !important;
  }
  .lst-nav-item.active {
    border-left-color: transparent !important;
    border-bottom-color: var(--red-brand) !important;
  }
  .lst-nav-spacer, .lst-nav-profile { display: none !important; }
  .mobile-menu-btn { display: block; }
  .lst-fullscreen-header { padding: 12px 16px !important; }
  .lst-fullscreen-main { padding: 20px !important; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .kpi-card { padding: 12px !important; }
  .kpi-label { font-size: var(--text-9) !important; }
  .pipeline-grid { grid-template-columns: 1fr 1fr !important; }
  .matching-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .lst-table-container { overflow-x: auto; }
  .pretty-table { font-size: var(--text-xs) !important; }
  .pretty-table th, .pretty-table td { padding: 8px 6px !important; }
  .pt-thumb { width: 32px !important; height: 32px !important; }
  .pt-text h4 { font-size: var(--text-xs) !important; }
  .pt-text p { font-size: var(--text-2xs) !important; }
  .mobile-nav-toggle { display: block; }
  .lst-fs-action-btn { font-size: var(--text-9) !important; padding: 4px 8px !important; }
  .mypage-welcome-banner { padding: 12px 16px; font-size: var(--text-xs); }
  .mypage-profile-card { padding: 16px; }
  .mys-stats-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .lst-fullscreen-header { padding: 8px 12px !important; flex-wrap: wrap; }
  .lst-fullscreen-title { font-size: var(--text-xs) !important; }
  .lst-fullscreen-title span { display: none; }
  .kpi-grid { grid-template-columns: 1fr !important; gap: 8px; }
  .kpi-card { padding: 10px !important; }
  .kpi-value { font-size: var(--text-16) !important; margin-bottom: 4px; }
  .kpi-label { font-size: 8px !important; }
  .kpi-trend { font-size: var(--text-2xs) !important; }
  .lst-main-title { font-size: var(--text-sm) !important; margin-bottom: 16px; }
  .lst-welcome { flex-direction: column; gap: 12px; }
  .btn { padding: 8px 12px !important; font-size: var(--text-11) !important; }
  .pretty-table { font-size: var(--text-2xs) !important; }
  .pretty-table th, .pretty-table td { padding: 6px 4px !important; }
  .filter-chips { gap: 6px; }
  .filter-chip { padding: 4px 8px; font-size: var(--text-11); }
  .pipeline-grid { grid-template-columns: 1fr !important; }
}

/* ── 19. Icon Utility Classes ── */
.icon-svg { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 24px; height: 24px; }

/* ── 20. Artist DB (adb-*) — JS-generated ── */
.adb-card { background: var(--bg-card); border: 1px solid var(--border); padding: 16px; transition: all var(--dur-normal); }
.adb-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.adb-name { font-size: var(--text-sm); font-weight: 700; color: var(--charcoal); margin-bottom: 2px; }
.adb-name-en { font-size: var(--text-2xs); color: var(--text-muted); font-family: var(--mono); margin-bottom: 6px; }
.adb-meta { font-size: var(--text-2xs); color: var(--text-caption); margin-bottom: 8px; }
.adb-grade { display: inline-block; font-size: var(--text-2xs); font-weight: 700; font-family: var(--mono); padding: 2px 8px; border: 1px solid var(--border); margin-bottom: 8px; letter-spacing: 0.04em; }
.adb-grade--ss { background: var(--charcoal); color: var(--white); border-color: var(--charcoal); }
.adb-grade--s { background: var(--red-brand); color: var(--white); border-color: var(--red-brand); }
.adb-grade--a { color: var(--red-brand); border-color: var(--red-brand); }
.adb-grade--b { color: var(--color-success); border-color: var(--color-success); }
.adb-grade--c { color: var(--text-muted); border-color: var(--border); }
.adb-grade--new { color: var(--color-info-alt); border-color: var(--color-info-alt); }
.adb-medium-tag { display: inline-block; font-size: var(--text-2xs); color: var(--text-caption); background: var(--alpha-4); padding: 2px 8px; margin-bottom: 8px; font-family: var(--mono); }
.adb-prices { display: flex; gap: 16px; margin-top: 8px; }
.adb-price-item { flex: 1; }
.adb-price-label { font-size: var(--text-2xs); color: var(--text-muted); font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
.adb-price-value { font-size: var(--text-sm); font-weight: 700; color: var(--charcoal); font-family: var(--mono); }
.adb-no-results { text-align: center; padding: 40px; color: var(--text-muted); font-size: var(--text-sm); }
.adb-show-more { display: block; width: 100%; padding: 10px; background: none; border: 1px solid var(--border); color: var(--text-secondary); font-size: var(--text-xs); font-family: var(--mono); cursor: pointer; transition: all var(--dur-normal); margin-top: 8px; }
.adb-show-more:hover { border-color: var(--charcoal); color: var(--charcoal); }

/* ── 21. Red Seal & Missing Utility Classes ── */
.red-seal { position: relative; }
.red-seal::after { content: "✓"; position: absolute; top: -2px; right: -6px; font-size: 8px; color: var(--red-brand); font-weight: 800; }
.tr-badge { display: inline-block; padding: 3px 10px; font-size: var(--text-2xs); font-weight: 600; font-family: var(--mono); letter-spacing: 0.02em; }
.tr-title { font-size: var(--text-base); font-weight: 700; color: var(--charcoal); margin-bottom: 4px; }
.bid-body { padding: 12px 16px; }
.quick-action-menu { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.quick-filter-chip { cursor: pointer; transition: all var(--dur-normal); }
.quick-filter-chip.is-active { background: var(--charcoal); color: var(--white); border-color: var(--charcoal); }
.src-action { margin-top: 12px; display: flex; gap: 8px; }
.thumb-icon { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; opacity: 0.4; }