/* ── Prospect Exchange Module Styles ──────────────────────────────────────── */

.prospect-exchange-root {
  font-family: monospace;
  color: #2d3748;
  background: #f0f7ff;
  border-radius: 6px;
  overflow: hidden;
}

/* Loading state */
.pe-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px;
  color: #718096;
  font-size: 13px;
}
.pe-loading-spinner {
  width: 20px; height: 20px;
  border: 2px solid #bee3f8;
  border-top-color: #2b6cb0;
  border-radius: 50%;
  animation: pe-spin 0.8s linear infinite;
}
@keyframes pe-spin { to { transform: rotate(360deg); } }

/* ── Ticker ─────────────────────────────────────────────────────────────────── */
.pe-ticker {
  background: #1e3a5f;
  border-bottom: 1px solid #2d5282;
  overflow: hidden;
  padding: 7px 0;
  white-space: nowrap;
}
.pe-ticker-inner {
  display: inline-block;
  animation: pe-ticker 55s linear infinite;
}
@keyframes pe-ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.pe-tick-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: 36px;
  font-size: 11px;
}
.pe-tick-name { color: #90cdf4; font-weight: 700; }
.pe-tick-price { color: #e2e8f0; }

/* ── Nav ────────────────────────────────────────────────────────────────────── */
.pe-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid #dbeafe;
  background: #fff;
  flex-wrap: wrap;
  gap: 12px;
}
.pe-eyebrow { font-size: 9px; color: #4a90d9; letter-spacing: 0.25em; margin-bottom: 4px; }
.pe-title {
  font-family: 'Barlow Condensed', Georgia, sans-serif;
  font-weight: 800; font-size: 28px; color: #1a365d; line-height: 1;
}
.pe-title-dot { color: #38a169; }
.pe-subtitle { font-size: 9px; color: #a0aec0; margin-top: 4px; }

.pe-portfolio-btn {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border: 1px solid #bee3f8; border-radius: 6px;
  padding: 10px 16px; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: all 0.15s; font-family: monospace;
}
.pe-portfolio-btn:hover { border-color: #90cdf4; box-shadow: 0 4px 12px rgba(30,58,95,0.1); }
.pe-pf-label { font-size: 8px; color: #718096; letter-spacing: 0.1em; }
.pe-pf-total { font-family: 'Barlow Condensed', Georgia, sans-serif; font-weight: 700; font-size: 18px; color: #1a365d; }
.pe-pf-pnl { font-weight: 700; font-size: 13px; }

/* ── Controls ───────────────────────────────────────────────────────────────── */
.pe-controls {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 24px; background: #fff;
  border-bottom: 1px solid #e2e8f0; flex-wrap: wrap; gap: 8px;
}
.pe-filter-row { display: flex; gap: 5px; align-items: center; }
.pe-filter-label { font-size: 9px; color: #a0aec0; letter-spacing: 0.1em; margin-right: 4px; }
.pe-filter-btn {
  background: transparent; border: 1px solid #e2e8f0; color: #a0aec0;
  font-family: monospace; font-size: 10px; padding: 3px 9px;
  border-radius: 4px; cursor: pointer; transition: all 0.15s;
}
.pe-filter-btn:hover { border-color: #90cdf4; color: #2b6cb0; }
.pe-filter-active { background: #ebf8ff !important; border-color: #90cdf4 !important; color: #2b6cb0 !important; font-weight: 700; }

.pe-stats-row { display: flex; gap: 16px; font-size: 10px; flex-wrap: wrap; }
.pe-stat-inline { color: #718096; }
.pe-stat-inline strong { color: #2d3748; }

/* ── Banner ─────────────────────────────────────────────────────────────────── */
.pe-banner {
  margin: 14px 24px 0;
  padding: 10px 14px;
  background: #ebf8ff; border: 1px solid #bee3f8; border-radius: 6px;
  font-size: 11px; color: #2b6cb0;
}

/* ── Cards grid ─────────────────────────────────────────────────────────────── */
.pe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  padding: 16px 24px 40px;
}

.pe-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.pe-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(30,58,95,0.12); }

.pe-owned-badge {
  position: absolute; top: 0; right: 0;
  background: #fef3c7; border-left: 1px solid #fbd38d; border-bottom: 1px solid #fbd38d;
  border-bottom-left-radius: 6px;
  padding: 3px 8px; font-size: 9px; color: #b7791f; font-family: monospace;
}
.pe-card-rank {
  position: absolute; top: 10px; right: 12px;
  font-size: 9px; color: #cbd5e0;
}
.pe-owned-badge ~ .pe-card-rank { top: 28px; }

.pe-card-header { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; }
.pe-nation { font-size: 12px; }
.pe-player-name {
  font-family: 'Barlow Condensed', Georgia, sans-serif;
  font-weight: 700; font-size: 15px; color: #1a365d;
}
.pe-card-meta { display: flex; gap: 6px; margin-bottom: 10px; }
.pe-pos-badge {
  background: #ebf8ff; color: #2b6cb0;
  font-size: 9px; padding: 1px 6px; border-radius: 3px; border: 1px solid #bee3f8;
}
.pe-meta-text { color: #a0aec0; font-size: 9px; }

.pe-card-body { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 12px; }
.pe-price {
  font-family: 'Barlow Condensed', Georgia, sans-serif;
  font-weight: 800; font-size: 26px; color: #1a365d; line-height: 1;
}
.pe-ipo-row { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.pe-ipo-label { font-size: 9px; color: #a0aec0; }
.pe-chg { font-weight: 700; font-size: 10px; }
.pe-sparkline-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.pe-awaiting { font-size: 8px; color: #cbd5e0; }

.pe-card-actions { display: flex; gap: 6px; }
.pe-btn-buy, .pe-btn-sell {
  flex: 1; padding: 7px; border-radius: 4px;
  font-family: monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  cursor: pointer; transition: all 0.15s;
}
.pe-btn-buy {
  border: 1px solid #c6f6d5; background: #f0fff4; color: #276749;
}
.pe-btn-buy:hover { background: #c6f6d5; border-color: #9ae6b4; }
.pe-btn-sell {
  border: 1px solid #fed7d7; background: #fff5f5; color: #c53030;
}
.pe-btn-sell:hover:not([disabled]) { background: #fed7d7; border-color: #fc8181; }
.pe-btn-sell[disabled] {
  border-color: #e2e8f0; background: #f7fafc; color: #cbd5e0; cursor: not-allowed;
}

/* ── Modal ──────────────────────────────────────────────────────────────────── */
.pe-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(30,58,95,0.55); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
}
.pe-modal {
  background: #fff; border: 1px solid #bee3f8; border-radius: 8px;
  padding: 28px 30px; width: 370px; max-width: 95vw;
  box-shadow: 0 20px 60px rgba(30,58,95,0.2);
}
.pe-modal-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.pe-modal-title { font-family: 'Barlow Condensed', Georgia, sans-serif; font-weight: 800; font-size: 20px; color: #1a365d; }
.pe-modal-sub { font-size: 10px; color: #718096; margin-top: 2px; }
.pe-modal-close { background: none; border: none; color: #a0aec0; font-size: 18px; cursor: pointer; line-height: 1; }

.pe-modal-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.pe-stat-box { border-radius: 6px; padding: 9px 10px; border: 1px solid; }
.pe-stat-blue { background: #ebf8ff; border-color: #bee3f8; }
.pe-stat-yellow { background: #fffbeb; border-color: #fbd38d; }
.pe-stat-gray { background: #f7fafc; border-color: #e2e8f0; }
.pe-stat-label { font-size: 8px; letter-spacing: 0.1em; margin-bottom: 4px; color: #718096; }
.pe-stat-blue .pe-stat-label { color: #4a90d9; }
.pe-stat-yellow .pe-stat-label { color: #b7791f; }
.pe-stat-val { font-family: 'Barlow Condensed', Georgia, sans-serif; font-weight: 700; font-size: 15px; color: #2d3748; }
.pe-stat-blue .pe-stat-val { color: #2b6cb0; }
.pe-stat-yellow .pe-stat-val { color: #b7791f; }

.pe-mode-toggle { display: flex; background: #f7fafc; border-radius: 6px; padding: 3px; border: 1px solid #e2e8f0; margin-bottom: 14px; }
.pe-mode-btn { flex: 1; padding: 8px; border: none; border-radius: 4px; cursor: pointer; font-family: monospace; font-weight: 700; font-size: 12px; letter-spacing: 0.1em; background: transparent; color: #718096; border-bottom: 2px solid transparent; transition: all 0.15s; }
.pe-mode-buy-active { background: #c6f6d5 !important; color: #276749 !important; border-bottom-color: #38a169 !important; }
.pe-mode-sell-active { background: #fed7d7 !important; color: #c53030 !important; border-bottom-color: #e53e3e !important; }

.pe-qty-label { font-size: 9px; color: #718096; letter-spacing: 0.1em; margin-bottom: 8px; }
.pe-qty-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pe-qty-btn { width: 36px; height: 36px; background: #f7fafc; border: 1px solid #e2e8f0; color: #4a5568; font-size: 18px; border-radius: 4px; cursor: pointer; line-height: 1; }
.pe-qty-input { flex: 1; background: #fff; border: 1px solid #bee3f8; color: #1a365d; font-family: 'Barlow Condensed', Georgia, sans-serif; font-weight: 700; font-size: 22px; text-align: center; padding: 6px; border-radius: 4px; outline: none; }
input[type=number].pe-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }

.pe-impact-note { font-size: 9px; color: #a0aec0; text-align: center; margin-bottom: 10px; }

.pe-order-summary { background: #f7fafc; border-radius: 6px; padding: 12px; margin-bottom: 14px; border: 1px solid #e2e8f0; }
.pe-order-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.pe-order-row:last-child { margin-bottom: 0; }
.pe-order-label { font-size: 10px; color: #718096; }
.pe-order-total { font-family: 'Barlow Condensed', Georgia, sans-serif; font-weight: 700; font-size: 18px; color: #1a365d; }
#pe-order-secondary-val { font-size: 12px; font-weight: 600; }

.pe-execute-btn {
  width: 100%; padding: 13px; border: none; border-radius: 6px;
  font-family: monospace; font-weight: 700; font-size: 13px; letter-spacing: 0.1em;
  cursor: pointer; transition: all 0.15s; color: #fff;
}
.pe-execute-buy { background: linear-gradient(135deg, #38a169, #276749); box-shadow: 0 4px 14px rgba(56,161,105,0.35); }
.pe-execute-sell { background: linear-gradient(135deg, #e53e3e, #c53030); box-shadow: 0 4px 14px rgba(229,62,62,0.35); }
.pe-execute-disabled { background: #e2e8f0 !important; color: #a0aec0 !important; box-shadow: none !important; cursor: not-allowed !important; }

/* ── Portfolio panel ────────────────────────────────────────────────────────── */
.pe-portfolio-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(30,58,95,0.5); backdrop-filter: blur(6px);
  display: flex; align-items: stretch; justify-content: flex-end;
}
.pe-portfolio-panel {
  width: 420px; max-width: 100vw;
  background: #f0f7ff; border-left: 1px solid #bee3f8;
  overflow-y: auto; padding: 24px;
}
.pe-portfolio-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.pe-portfolio-title { font-family: 'Barlow Condensed', Georgia, sans-serif; font-weight: 800; font-size: 22px; color: #1a365d; }
.pe-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
.pe-summary-grid .pe-stat-box { padding: 10px 12px; }
.pe-summary-grid .pe-stat-val { font-size: 17px; }

.pe-section-label { font-size: 9px; color: #4a90d9; letter-spacing: 0.15em; margin-bottom: 10px; }

.pe-position-card { background: #fff; border-radius: 6px; padding: 12px; margin-bottom: 8px; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.pe-pos-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.pe-pos-name { font-family: 'Barlow Condensed', Georgia, sans-serif; font-weight: 700; font-size: 15px; color: #1a365d; }
.pe-pos-sub { font-size: 9px; color: #718096; }
.pe-pos-val { font-family: 'Barlow Condensed', Georgia, sans-serif; font-weight: 700; font-size: 15px; color: #1a365d; }
.pe-pos-pnl { font-size: 10px; font-weight: 600; }
.pe-pos-footer { display: flex; justify-content: space-between; font-size: 9px; color: #a0aec0; }

.pe-trade-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid #e2e8f0; }
.pe-trade-left { display: flex; gap: 8px; align-items: center; }
.pe-trade-badge { font-size: 8px; font-weight: 700; letter-spacing: 0.08em; padding: 2px 6px; border-radius: 3px; }
.pe-badge-buy { background: #c6f6d5; color: #276749; }
.pe-badge-sell { background: #fed7d7; color: #c53030; }
.pe-trade-name { font-size: 12px; color: #2d3748; font-family: 'Barlow Condensed', Georgia, sans-serif; font-weight: 600; }
.pe-trade-sub { font-size: 9px; color: #a0aec0; }
.pe-trade-amt { font-size: 12px; font-weight: 600; }
.pe-empty-msg { color: #a0aec0; font-size: 12px; text-align: center; padding: 20px 0; }

/* ── Toast ──────────────────────────────────────────────────────────────────── */
.pe-toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(70px);
  border-radius: 6px; padding: 11px 20px;
  font-family: monospace; font-size: 12px; font-weight: 600;
  white-space: nowrap; z-index: 10000;
  box-shadow: 0 8px 24px rgba(30,58,95,0.15);
  transition: transform 0.35s ease, opacity 0.35s ease;
  opacity: 0;
}
.pe-toast-visible { transform: translateX(-50%) translateY(0); opacity: 1; }
.pe-toast-buy { background: #f0fff4; border: 1px solid #9ae6b4; color: #276749; }
.pe-toast-sell { background: #fff5f5; border: 1px solid #fc8181; color: #c53030; }

/* ── Error state ────────────────────────────────────────────────────────────── */
.pe-error-msg {
  padding: 32px 24px;
  text-align: center;
  color: #718096;
  font-size: 14px;
  line-height: 1.6;
}
.pe-error-msg a { color: #2b6cb0; }
.pe-modal-error {
  background: #fff5f5; border: 1px solid #fed7d7; border-radius: 4px;
  color: #c53030; font-size: 11px; padding: 8px 12px; margin-bottom: 12px;
}