/* FIPS - Trading Platform Theme */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,700&display=swap');

/* ===========================================
   CSS Variables - Trading Platform Palette
   =========================================== */
:root {
  /* Typography */
  --font-main: 'JetBrains Mono', monospace;
  --font-logo: 'JetBrains Mono', monospace;
  --font-mono: 'JetBrains Mono', monospace;
  --font-heading: 'JetBrains Mono', monospace;

  /* Base colors - deep navy */
  --bg-primary: #0c0e13;
  --bg-secondary: #191d27;
  --bg-tertiary: #1e2230;
  --bg-hover: #252a38;
  --border-color: #2a2f3e;

  /* Text */
  --text-primary: #e8ecf4;
  --text-secondary: #8892a4;
  --text-muted: #556070;

  /* Accent colors - gold palette */
  --accent-primary: #f0c040;    /* Gold */
  --accent-secondary: #f0c040;  /* Gold */
  --accent-tertiary: #f0c040;   /* Gold */
  --accent-green: #22c55e;      /* Green */
  --accent-red: #ef4444;        /* Red */
  --accent-gold: #f0c040;       /* Gold */

  /* Trading colors */
  --bid-color: #22c55e;
  --ask-color: #ef4444;

  /* Glow effects - disabled for clean look */
  --glow-cyan: none;
  --glow-orange: none;
  --glow-green: none;
  --glow-red: none;

  /* Gradients - gold */
  --gradient-primary: linear-gradient(135deg, #f0c040 0%, #d4a020 100%);
  --gradient-secondary: linear-gradient(135deg, #f0c040 0%, #d4a020 100%);
  --gradient-dark: linear-gradient(180deg, #191d27 0%, #0c0e13 100%);
}

/* ===========================================
   Base Styles
   =========================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-main);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.7;
  min-height: 100vh;
  font-size: 13px;
  font-weight: 400;
}

/* Monospace for numbers/prices/data */
.mono, .price, .qty, .balance-value, .position-value {
  font-family: var(--font-mono);
}

/* Gold italic emphasis */
em, .emphasis {
  font-style: italic;
  color: var(--accent-primary);
  font-weight: 400;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem;
}

/* ===========================================
   Base Button Classes
   =========================================== */
.btn {
  padding: 0.6rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
  text-transform: none;
  letter-spacing: 0.05em;
  position: relative;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-sm {
  padding: 0.3rem 0.75rem;
  font-size: 0.75rem;
}

.btn-green {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #000;
  border-color: var(--accent-green);
}

.btn-green:hover:not(:disabled) {
  box-shadow: var(--glow-green);
  transform: translateY(-1px);
}

.btn-blue {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #000;
  border-color: var(--accent-primary);
}

.btn-blue:hover:not(:disabled) {
  box-shadow: var(--glow-cyan);
  transform: translateY(-1px);
}

.btn-gold {
  background: linear-gradient(135deg, #f0c040 0%, #d4a020 100%);
  color: #000;
}

.btn-gold:hover:not(:disabled) {
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

/* ===========================================
   Header
   =========================================== */
header {
  margin-bottom: 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(12, 14, 19, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.header-top > div:first-child {
  min-width: 0;
  flex: 1;
}

.header-top > div:last-child {
  flex-shrink: 0;
}

header h1 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}

header h1 em {
  color: var(--accent-primary);
}

.subtitle {
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}

/* User Panel - Stats overlay style */
.user-panel {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
  background: var(--bg-secondary);
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  transition: all 0.2s ease;
}

.user-panel:hover {
  border-color: var(--accent-primary);
  box-shadow: var(--glow-cyan);
}

.user-panel .account-name {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.9rem;
  text-transform: none;
}

.user-panel .balance {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.user-panel .balance strong {
  color: var(--accent-green);
  font-family: var(--font-mono);
  text-shadow: none;
}

.username-link {
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
}

.username-link:hover {
  color: var(--accent-primary);
  text-shadow: none;
}

.prefs-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
  transition: color 0.2s;
}

.prefs-link:hover {
  color: var(--accent-primary);
}

/* Header Actions */
.header-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.create-market-btn {
  padding: 0.6rem 1.25rem;
  background: transparent;
  color: var(--accent-green);
  border: 1px solid var(--accent-green);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
  transition: all 0.2s;
}

.create-market-btn:hover {
  background: var(--accent-green);
  color: #000;
  box-shadow: var(--glow-green);
}

.cancel-all-btn {
  padding: 0.6rem 1.25rem;
  background: transparent;
  color: var(--accent-red);
  border: 1px solid var(--accent-red);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  transition: all 0.2s;
}

.cancel-all-btn:hover {
  background: var(--accent-red);
  color: #fff;
  box-shadow: var(--glow-red);
}

.cancel-all-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.invite-btn {
  padding: 0.6rem 1.25rem;
  background: transparent;
  color: var(--accent-primary);
  border: 1px solid var(--accent-primary);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  transition: all 0.2s;
}

.invite-btn:hover {
  background: var(--accent-primary);
  color: #000;
  box-shadow: var(--glow-cyan);
}

.points-link {
  padding: 0.6rem 1.25rem;
  background: transparent;
  color: var(--accent-gold);
  border: 1px solid var(--accent-gold);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  transition: all 0.2s;
}

.points-link:hover {
  background: var(--accent-gold);
  color: #000;
  box-shadow: 0 0 20px rgba(240, 192, 64, 0.4);
}

.leaderboard-link {
  display: inline-block;
  padding: 0.6rem 1.25rem;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  transition: all 0.2s;
}

.leaderboard-link:hover {
  background: var(--bg-hover);
  border-color: var(--accent-tertiary);
  color: var(--accent-tertiary);
}

/* ===========================================
   Claim Banner - Alert style
   =========================================== */
.claim-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(90deg, rgba(240, 192, 64, 0.1) 0%, rgba(240, 192, 64, 0.1) 100%);
  border: 1px solid rgba(240, 192, 64, 0.5);
  border-radius: 8px;
  color: var(--accent-gold);
  font-size: 0.9rem;
  font-weight: 600;
}

.claim-btn {
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, #f0c040 0%, #d4a020 100%);
  color: #000;
  border: none;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  text-transform: none;
  letter-spacing: normal;
}

.claim-btn:hover {
  box-shadow: 0 0 20px rgba(240, 192, 64, 0.5);
  transform: scale(1.02);
}

.secondary-btn {
  width: 100%;
  padding: 0.6rem;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.secondary-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
}

/* Phone Input Group */
.phone-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.country-code-select {
  width: 100%;
  padding: 0.6rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.9rem;
  cursor: pointer;
}

.country-code-select:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.phone-input-group input {
  flex: 1;
  min-width: 150px;
  padding: 0.75rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 1rem;
}

.phone-input-group input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: var(--glow-cyan);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent-primary);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  text-transform: none;
  letter-spacing: normal;
}

.back-link::before {
  content: '◀';
  font-size: 0.7rem;
}

.back-link:hover {
  text-shadow: none;
}

/* ===========================================
   Loading, Error & Login States
   =========================================== */
.loading,
.error,
.login-required {
  text-align: center;
  padding: 3rem;
  color: var(--text-secondary);
  text-transform: none;
  letter-spacing: normal;
}

.loading::after {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid var(--accent-primary);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-left: 0.5rem;
  vertical-align: middle;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.error {
  color: var(--accent-red);
  text-shadow: none;
}

/* ===========================================
   Markets List
   =========================================== */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  gap: 1rem;
}

.section-header h2 {
  margin-bottom: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent-primary);
  font-weight: 600;
}

.markets-list h2 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.markets-list h2::before {
  display: none;
}

.markets-list + .markets-list {
  margin-top: 3rem;
}

.cancel-all-btn.small {
  padding: 0.3rem 0.75rem;
  font-size: 0.75rem;
}

/* ===========================================
   Skeleton Loading States
   =========================================== */
.skeleton-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.skeleton-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  padding: 1rem;
}

.skeleton-line {
  background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--border-color) 50%, var(--bg-tertiary) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.skeleton-line.title {
  height: 1.25rem;
  width: 70%;
  margin-bottom: 0.75rem;
}

.skeleton-line.meta {
  height: 0.75rem;
  width: 50%;
  margin-bottom: 1rem;
}

.skeleton-line.outcome {
  height: 1.5rem;
  width: 100%;
  margin-bottom: 0.5rem;
}

.skeleton-line.outcome:last-child {
  margin-bottom: 0;
}

@keyframes skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ===========================================
   Market Filter Tabs
   =========================================== */
.market-filters {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  align-items: center;
}

.market-filter-select {
  padding: 0.6rem 2.5rem 0.6rem 1rem;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23f0c040' d='M3 4.5L6 8l3-3.5H3z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}

.market-filter-select:hover {
  border-color: var(--accent-primary);
}

.market-filter-select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: var(--glow-cyan);
}

.filter-tab {
  padding: 0.6rem 1.25rem;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  text-transform: none;
  letter-spacing: normal;
  align-items: center;
  gap: 0.5rem;
}

.filter-tab:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-primary);
  color: var(--text-primary);
}

.filter-tab.active {
  background: var(--gradient-primary);
  border-color: var(--accent-primary);
  color: #000;
  font-weight: 800;
}

.filter-count {
  background: rgba(0, 0, 0, 0.3);
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
  font-family: var(--font-mono);
}

.filter-tab:not(.active) .filter-count {
  background: var(--bg-tertiary);
}

/* ===========================================
   Market Cards - Stat card style
   =========================================== */
.markets {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.market-card {
  display: block;
  position: relative;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 2rem;
  text-decoration: none;
  color: inherit;
  transition: all 0.25s ease;
}

.market-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity 0.25s;
}

.market-card.has-exposure {
  border-color: var(--accent-primary);
}

.market-card.has-exposure::before {
  opacity: 1;
}

.exposure-indicator {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 10px;
  height: 10px;
  background: var(--accent-primary);
  box-shadow: var(--glow-cyan);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.2); }
}

/* Trusted creator market cards */
.market-card.trusted-creator {
  border-color: #d4a900;
  background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(212, 169, 0, 0.05) 100%);
}

.market-card.trusted-creator::before {
  background: linear-gradient(180deg, #d4a900, #b8940a);
  opacity: 1;
}

.trusted-indicator {
  position: absolute;
  top: 0.75rem;
  right: 2rem;
  width: 16px;
  height: 16px;
  background: #d4a900;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.trusted-indicator::after {
  content: '✓';
  color: #000;
  font-size: 10px;
  font-weight: bold;
}

.trusted-badge {
  background: linear-gradient(135deg, #d4a900, #b8940a);
  color: #000;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  margin-left: 0.25rem;
}

.trust-count {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 400;
  margin-left: 0.25rem;
}

.market-card.trusted-creator:hover {
  border-color: #e6b800;
  box-shadow: 0 8px 32px rgba(212, 169, 0, 0.15);
}

.market-card:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(240, 192, 64, 0.1);
}

.market-card:hover::before {
  opacity: 1;
}

.market-card.has-exposure:hover {
  border-color: var(--accent-primary);
}

.market-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.market-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.8rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.outcome-count {
  color: var(--text-secondary);
}

.market-meta .creator-info {
  color: var(--text-muted);
}

.status {
  padding: 0.2rem 0.6rem;
  font-weight: 700;
  text-transform: none;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
}

.status.open {
  background: rgba(34, 197, 94, 0.15);
  color: var(--accent-green);
  border: 1px solid var(--accent-green);
}

.status.settled {
  background: rgba(139, 148, 158, 0.15);
  color: var(--text-secondary);
  border: 1px solid var(--text-muted);
}

.outcomes-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.outcome-chip {
  background: var(--bg-tertiary);
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.outcome-chip.more {
  color: var(--text-muted);
  font-style: italic;
}

.outcomes-with-odds {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.outcome-odds-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: var(--bg-tertiary);
  font-size: 0.9rem;
  border-left: 3px solid var(--border-color);
  transition: all 0.2s;
}

.outcome-odds-row:hover {
  border-left-color: var(--accent-primary);
  background: var(--bg-hover);
}

.outcome-name {
  color: var(--text-secondary);
  font-weight: 600;
}

.outcome-odds {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent-green);
  min-width: 3rem;
  text-align: right;
  text-shadow: none;
}

.more-outcomes {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  padding: 0.25rem;
  font-style: italic;
}

.market-card.settled {
  opacity: 0.6;
}

.settled-result {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 0.5rem;
}

.settled-result strong {
  color: var(--accent-green);
  text-shadow: none;
}

/* ===========================================
   Market Detail
   =========================================== */
.market-detail {
  padding-top: 0;
}

.market-info {
  margin-bottom: 1.5rem;
}

.point-type-info {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.point-type-info .point-symbol {
  font-size: inherit;
  font-weight: 700;
  color: var(--accent-gold);
}

.market-detail h2 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-primary);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.outcomes-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.outcome-card {
  display: block;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  padding: 2rem;
  text-decoration: none;
  color: inherit;
  transition: all 0.25s ease;
  position: relative;
}

.outcome-card::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity 0.25s;
}

.outcome-card:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-primary);
  transform: translateX(4px);
}

.outcome-card:hover::before {
  opacity: 1;
}

/* Settled outcome cards */
.outcome-card.settled {
  cursor: default;
}

.outcome-card.settled:hover {
  background: var(--bg-secondary);
  border-color: var(--border-color);
  transform: none;
}

.outcome-card.settled.winner {
  border-color: var(--accent-green);
  background: rgba(34, 197, 94, 0.05);
}

.outcome-card.settled.winner::before {
  opacity: 1;
  background: var(--accent-green);
}

.outcome-card.settled.loser {
  opacity: 0.5;
}

.outcome-result {
  margin-top: 0.5rem;
}

.winner-tag {
  display: inline-block;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #000;
  padding: 0.3rem 1rem;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: none;
  letter-spacing: normal;
}

.loser-tag {
  display: inline-block;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.outcome-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.outcome-label {
  font-weight: 700;
  font-size: 1.1rem;
}

.outcome-book {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 0.5rem;
}

.bid-side,
.ask-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: 0.75rem;
  position: relative;
}

.bid-side {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.ask-side {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.implied-price {
  font-style: italic;
  opacity: 0.55;
}

.bid-side .label,
.ask-side .label {
  font-size: 0.7rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
  font-weight: 700;
}

.bid-side .price {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--bid-color);
  text-shadow: none;
}

.ask-side .price {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ask-color);
  text-shadow: none;
}

.spread {
  width: 2px;
  height: 2.5rem;
  background: var(--border-color);
}

.tap-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: right;
  text-transform: none;
  letter-spacing: normal;
}

/* ===========================================
   Price Ladder
   =========================================== */
.ladder-container {
  padding-top: 1rem;
}

.ladder-info {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  padding: 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.ladder-info p {
  margin-bottom: 0.5rem;
}

.ladder-info p:last-child {
  margin-bottom: 0;
}

.ladder {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  overflow: hidden;
}

.ladder-header {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.1) 0%, var(--bg-tertiary) 50%, rgba(239, 68, 68, 0.1) 100%);
  padding: 0.75rem 1rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
}

.ladder-header .col-bid {
  text-align: left;
  color: var(--bid-color);
}

.ladder-header .col-price {
  text-align: center;
}

.ladder-header .col-ask {
  text-align: right;
  color: var(--ask-color);
}

.ladder-body {
  touch-action: manipulation;
}

.ladder-row {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  touch-action: manipulation;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.9rem;
  transition: background 0.1s;
}

.ladder-row:last-child {
  border-bottom: none;
}

.ladder-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

.ladder-row .col-bid {
  cursor: pointer;
  padding: 0.5rem;
  transition: all 0.15s;
}

.ladder-row .col-bid:hover {
  background: rgba(34, 197, 94, 0.2);
  box-shadow: inset 0 0 20px rgba(34, 197, 94, 0.1);
}

.ladder-row.has-bid .col-bid {
  background: rgba(34, 197, 94, 0.1);
  border-left: 3px solid var(--bid-color);
}

.ladder-row.best-bid {
  border-left: 3px solid var(--bid-color);
}

.ladder-row .col-ask {
  cursor: pointer;
  padding: 0.5rem;
  transition: all 0.15s;
}

.ladder-row .col-ask:hover {
  background: rgba(239, 68, 68, 0.2);
  box-shadow: inset 0 0 20px rgba(239, 68, 68, 0.1);
}

.ladder-row.has-ask .col-ask {
  background: rgba(239, 68, 68, 0.1);
  border-right: 3px solid var(--ask-color);
}

.col-bid {
  text-align: left;
}

.col-price {
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-secondary);
}

/* Counterparty display in ladder */
.qty-cp-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
}

.qty-cp-wrapper .qty {
  font-family: var(--font-mono);
  font-weight: 700;
  min-width: 2ch;
}

.qty-cp-wrapper .cp-name {
  font-size: 0.75rem;
  color: var(--text-muted);
  opacity: 0.7;
  font-weight: 500;
}

/* User Info */
.user-info {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.user-info .balance strong {
  color: var(--accent-green);
  font-family: var(--font-mono);
}

/* ===========================================
   Order Form
   =========================================== */
.outcome-card-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.outcome-card {
  cursor: pointer;
}

.order-form {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.order-form-inner {
  padding: 1.25rem;
}

.form-row {
  margin-bottom: 1.25rem;
}

.form-row:last-child {
  margin-bottom: 0;
}

.form-row label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.form-row input {
  width: 100%;
  padding: 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 1rem;
  transition: all 0.2s;
}

.form-row input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: var(--glow-cyan);
}

.form-row select {
  width: 100%;
  padding: 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23f0c040' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.5rem;
}

.form-row select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: var(--glow-cyan);
}

.form-row select:hover {
  border-color: var(--accent-primary);
}

.side-buttons {
  display: flex;
  gap: 0.75rem;
}

.side-btn {
  flex: 1;
  padding: 0.875rem;
  border: 3px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: none;
  letter-spacing: normal;
}

.side-btn.buy:hover, .side-btn.bid:hover,
.side-btn.buy.active, .side-btn.bid.active {
  border-color: var(--bid-color);
  background: rgba(34, 197, 94, 0.15);
  color: var(--bid-color);
  box-shadow: inset 0 0 30px rgba(34, 197, 94, 0.1);
}

.side-btn.sell:hover, .side-btn.ask:hover,
.side-btn.sell.active, .side-btn.ask.active {
  border-color: var(--ask-color);
  background: rgba(239, 68, 68, 0.15);
  color: var(--ask-color);
  box-shadow: inset 0 0 30px rgba(239, 68, 68, 0.1);
}

.order-summary {
  padding: 0.75rem;
  background: var(--bg-secondary);
  text-align: center;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.order-summary strong {
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.submit-order {
  width: 100%;
  padding: 1rem;
  border: none;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 1rem;
  text-transform: none;
  letter-spacing: normal;
}

.submit-order.buy {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #000;
}

.submit-order.buy:hover {
  box-shadow: var(--glow-green);
  transform: translateY(-2px);
}

.submit-order.sell {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
}

.submit-order.sell:hover {
  box-shadow: var(--glow-red);
  transform: translateY(-2px);
}

.submit-order:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.order-message {
  margin-top: 1rem;
  padding: 0.75rem;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
}

.order-message.success {
  background: rgba(34, 197, 94, 0.1);
  color: var(--accent-green);
  border: 1px solid var(--accent-green);
}

.order-message.error {
  background: rgba(239, 68, 68, 0.1);
  color: var(--accent-red);
  border: 1px solid var(--accent-red);
}

.order-message.warning {
  background: rgba(240, 192, 64, 0.1);
  color: var(--accent-gold);
  border: 1px solid var(--accent-gold);
}

.ladder-link {
  display: block;
  text-align: center;
  padding: 0.5rem;
  color: var(--accent-primary);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}

.ladder-link:hover {
  text-shadow: none;
}

/* Order Entry */
.order-entry {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  padding: 1rem;
  margin-bottom: 1rem;
}

.order-entry-row {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
}

.order-entry .side-buttons {
  flex: 1;
}

.qty-input {
  flex: 0 0 100px;
}

.qty-input label {
  display: block;
  font-size: 0.7rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
  font-weight: 700;
}

.qty-input input {
  width: 100%;
  padding: 0.5rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 1rem;
  text-align: center;
}

.order-hint {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
}

.sell-disabled-hint {
  color: var(--accent-red);
  opacity: 0.8;
}

.no-shares-hint {
  color: var(--accent-red);
  font-size: 0.8rem;
  opacity: 0.8;
}

.position-info {
  margin-left: 1rem;
  padding-left: 1rem;
  border-left: 1px solid var(--border-color);
}

.position-info strong {
  color: var(--accent-primary);
  font-family: var(--font-mono);
}

/* ===========================================
   Recent Trades
   =========================================== */
.recent-trades {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  padding: 1rem;
  margin-bottom: 1rem;
}

.recent-trades h3 {
  font-size: 0.7rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

.trades-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.trade-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--border-color);
}

.trade-item:last-child {
  border-bottom: none;
}

.trade-qty {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-primary);
}

.trade-price {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent-primary);
}

.trade-parties {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-left: 0.5rem;
}

.trade-parties .buyer-name {
  color: var(--bid-color);
}

.trade-parties .seller-name {
  color: var(--ask-color);
}

.trade-parties .trade-arrow {
  opacity: 0.5;
}

/* ===========================================
   Modal
   =========================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1rem;
}

.modal {
  background: var(--bg-secondary);
  border: 1px solid var(--accent-primary);
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 450px;
  width: 100%;
  position: relative;
  box-shadow: 0 0 60px rgba(240, 192, 64, 0.15);
}

.modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--gradient-primary);
}

.modal h2 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  text-transform: none;
  letter-spacing: normal;
}

.modal > p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.modal .form-row {
  margin-bottom: 1rem;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.25rem;
  transition: all 0.2s;
}

.modal-close:hover {
  color: var(--accent-red);
  text-shadow: none;
}

/* Onboarding Modal */
.onboarding-modal {
  max-width: 440px;
  text-align: center;
}

.onboarding-welcome h2 {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
  background: var(--gradient-primary);
}

.onboarding-subtitle {
  color: var(--text-secondary);
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

.onboarding-points {
  background: linear-gradient(135deg, rgba(240, 192, 64, 0.1), rgba(240, 192, 64, 0.05));
  border: 1px solid rgba(240, 192, 64, 0.3);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.onboarding-points .points-amount {
  font-size: 3rem;
  font-weight: 700;
  color: var(--accent-primary);
  line-height: 1;
  text-shadow: none;
}

.onboarding-points .points-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
  text-transform: none;
  letter-spacing: normal;
}

.onboarding-explainer {
  text-align: left;
  margin-bottom: 1.5rem;
}

.onboarding-explainer h3 {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 0.75rem;
}

.explainer-steps {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.explainer-steps .step {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.explainer-steps .step-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: var(--gradient-primary);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 800;
}

.onboarding-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.onboarding-actions .primary-btn {
  width: 100%;
  padding: 1rem;
  background: var(--gradient-primary);
  border: none;
  color: #000;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: none;
  letter-spacing: normal;
}

.onboarding-actions .primary-btn:hover {
  box-shadow: var(--glow-cyan);
  transform: translateY(-2px);
}

.onboarding-actions .secondary-btn {
  width: 100%;
  padding: 0.75rem;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.onboarding-actions .secondary-btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-primary);
  color: var(--text-primary);
}

.invite-result {
  margin-top: 1rem;
}

.invite-result p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.invite-result input {
  width: 100%;
  padding: 0.75rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.copy-btn {
  width: 100%;
  padding: 0.75rem;
  background: var(--gradient-primary);
  color: #000;
  border: none;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
}

.copy-btn:hover {
  box-shadow: var(--glow-cyan);
}

.invite-note {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

.invite-mode-toggle {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.invite-mode-toggle .mode-btn {
  flex: 1;
  padding: 0.5rem 1rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}

.invite-mode-toggle .mode-btn:hover {
  border-color: var(--accent-primary);
  color: var(--text-primary);
}

.invite-mode-toggle .mode-btn.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #000;
  font-weight: 600;
}

.invite-result.success {
  text-align: center;
  padding: 1.5rem;
  background: rgba(46, 160, 67, 0.1);
  border: 1px solid rgba(46, 160, 67, 0.3);
  border-radius: 8px;
}

.invite-result.success p {
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.invite-result.success .invite-note {
  color: var(--text-secondary);
}

/* ===========================================
   Settlement
   =========================================== */
.settle-btn {
  padding: 0.5rem 1rem;
  background: var(--accent-primary);
  color: #000;
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  margin-left: 0.75rem;
  text-transform: none;
  letter-spacing: normal;
  transition: opacity 0.2s;
}

.settle-btn:hover {
  opacity: 0.85;
}

.futures-badge {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  background: rgba(240, 192, 64, 0.15);
  color: var(--accent-primary);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid rgba(240, 192, 64, 0.3);
  border-radius: 4px;
  margin-left: 0.75rem;
}

.settle-range-hint {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.settlement-value-tag {
  color: var(--accent-primary);
  font-weight: 600;
}

.settled-result.futures {
  background: rgba(240, 192, 64, 0.1);
  border-color: rgba(240, 192, 64, 0.3);
  color: var(--accent-primary);
}

.outcome-card.settled.futures {
  border-color: var(--accent-primary);
  background: rgba(240, 192, 64, 0.05);
}

.winning-badge {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  background: var(--accent-green);
  color: #000;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 4px;
  margin-left: 0.5rem;
  text-transform: none;
  letter-spacing: normal;
}

.settle-outcomes {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 1rem 0;
}

.settle-outcome-btn {
  padding: 0.875rem 1rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
}

.settle-outcome-btn:hover {
  border-color: var(--accent-primary);
  background: var(--bg-hover);
}

.settle-outcome-btn.selected {
  border-color: var(--accent-green);
  background: rgba(34, 197, 94, 0.1);
  box-shadow: inset 0 0 20px rgba(34, 197, 94, 0.1);
}

/* ===========================================
   Account Page
   =========================================== */
.account-balance {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  padding: 2rem;
  margin-bottom: 1.5rem;
  position: relative;
}

.account-balance::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--gradient-primary);
}

.account-balance .balance-row {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0;
}

.account-balance .balance-row:not(:last-child) {
  border-bottom: 1px solid var(--border-color);
}

.account-balance .balance-label {
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}

.account-balance .balance-value {
  font-family: var(--font-mono);
  font-weight: 700;
}

.account-balance .balance-value.positive {
  color: var(--accent-green);
  text-shadow: none;
}


.account-section {
  margin-bottom: 2.5rem;
}

.account-section h2 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-primary);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.account-section h2::before {
  display: none;
}

.data-table {
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.data-table table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  background: var(--bg-tertiary);
  padding: 0.875rem 1rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-secondary);
}

.data-table td {
  padding: 0.875rem 1rem;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--border-color);
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tr:hover td {
  background: var(--bg-tertiary);
}

.data-table .text-right {
  text-align: right;
}

.data-table .text-center {
  text-align: center;
}

.data-table .side-buy, .data-table .side-bid {
  color: var(--accent-green);
  font-weight: 700;
}

.data-table .side-sell, .data-table .side-ask {
  color: var(--accent-red);
  font-weight: 700;
}

.data-table .counterparty-cell {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.data-table .status-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
}

.data-table .status-open {
  background: rgba(240, 192, 64, 0.15);
  color: var(--accent-primary);
  border: 1px solid var(--accent-primary);
}

.data-table .status-partial {
  background: rgba(34, 197, 94, 0.15);
  color: var(--accent-green);
  border: 1px solid var(--accent-green);
}

.data-table .status-filled {
  background: rgba(139, 148, 158, 0.15);
  color: var(--text-secondary);
  border: 1px solid var(--text-muted);
}

.data-table .status-cancelled {
  background: rgba(239, 68, 68, 0.15);
  color: var(--accent-red);
  border: 1px solid var(--accent-red);
}

.data-table .cancel-btn {
  padding: 0.3rem 0.6rem;
  background: transparent;
  border: 1px solid var(--accent-red);
  color: var(--accent-red);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: none;
}

.data-table .cancel-btn:hover {
  background: var(--accent-red);
  color: #fff;
}

.data-table .position-positive {
  color: var(--accent-green);
  font-family: var(--font-mono);
  font-weight: 700;
}

.data-table .position-negative {
  color: var(--accent-red);
  font-family: var(--font-mono);
  font-weight: 700;
}

.empty-state {
  padding: 3rem;
  text-align: center;
  color: var(--text-muted);
}

.empty-state-card {
  background: var(--bg-secondary);
  border: 2px dashed var(--border-color);
  padding: 3rem 2rem;
  text-align: center;
}

.empty-state-card .empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.empty-state-card h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.empty-state-card p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

.empty-action {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--gradient-primary);
  border: none;
  color: #000;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: none;
  letter-spacing: normal;
}

.empty-action:hover {
  box-shadow: var(--glow-cyan);
  transform: translateY(-2px);
}

.tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.tab-btn {
  padding: 0.6rem 1.25rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  transition: all 0.2s;
}

.tab-btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-primary);
}

.tab-btn.active {
  background: var(--gradient-primary);
  border-color: var(--accent-primary);
  color: #000;
}

.outcome-link {
  color: var(--accent-primary);
  text-decoration: none;
  font-weight: 600;
}

.outcome-link:hover {
  text-shadow: none;
}

/* Settled Markets Section */
.section-hint {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.settled-markets-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.settled-market-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  padding: 1.25rem;
}

.settled-market-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.market-title-link {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 700;
}

.market-title-link:hover {
  color: var(--accent-primary);
  text-shadow: none;
}

.creator-info {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.reputation-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  min-height: 1.4em;
}

.reputation-badge.positive {
  background: rgba(34, 197, 94, 0.15);
  color: var(--accent-green);
}

.reputation-badge.negative {
  background: rgba(239, 68, 68, 0.15);
  color: var(--accent-red);
}

/* Point Type Badge */
.point-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  font-size: 0.85rem;
  min-height: 1.4em;
}

/* Category Badge */
.category-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  min-height: 1.4em;
  background: rgba(139, 92, 246, 0.15);
  color: var(--accent-tertiary);
  border: 1px solid var(--accent-tertiary);
}

/* Owned Point Types on Account Page */
.owned-point-types {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.owned-point-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
}

.point-symbol-large {
  font-size: 2.5rem;
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
}

.point-details {
  flex: 1;
}

.point-name {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--text-primary);
}

.point-stats {
  display: flex;
  gap: 1rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

.point-growth {
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: none;
}

.point-growth.growth-unlimited {
  background: rgba(34, 197, 94, 0.15);
  color: var(--accent-green);
  border: 1px solid var(--accent-green);
}

.point-growth.growth-fixed {
  background: rgba(139, 148, 158, 0.15);
  color: var(--text-secondary);
  border: 1px solid var(--text-muted);
}

.point-growth.growth-fixed-inflation {
  background: rgba(240, 192, 64, 0.15);
  color: var(--accent-primary);
  border: 1px solid var(--accent-primary);
}

.owned-point-card .manage-link {
  padding: 0.6rem 1rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--accent-primary);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: none;
}

.owned-point-card .manage-link:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
}

.balance-section {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}

.balance-section:last-of-type {
  border-bottom: none;
}

.links-row {
  display: flex;
  gap: 1rem;
}

.links-row a {
  color: var(--accent-primary);
  font-weight: 600;
}

.success {
  color: var(--accent-green);
  padding: 0.5rem;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid var(--accent-green);
  margin-top: 0.5rem;
}

.settled-market-result {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.settled-market-result strong {
  color: var(--accent-green);
  font-family: var(--font-mono);
}

.pnl-section {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: var(--bg-tertiary);
  border-left: 4px solid var(--accent-primary);
}

.pnl-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-transform: none;
  letter-spacing: normal;
}

.pnl-value {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 700;
}

.pnl-value.positive {
  color: var(--accent-green);
  text-shadow: none;
}

.pnl-value.negative {
  color: var(--accent-red);
  text-shadow: none;
}

.feedback-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.feedback-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: normal;
}

.feedback-buttons {
  display: flex;
  gap: 0.5rem;
}

.feedback-btn {
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: none;
}

.feedback-btn.agree {
  background: transparent;
  border: 1px solid var(--accent-green);
  color: var(--accent-green);
}

.feedback-btn.agree:hover,
.feedback-btn.agree.active {
  background: rgba(34, 197, 94, 0.15);
  box-shadow: var(--glow-green);
}

.feedback-btn.disagree {
  background: transparent;
  border: 1px solid var(--accent-red);
  color: var(--accent-red);
}

.feedback-btn.disagree:hover,
.feedback-btn.disagree.active {
  background: rgba(239, 68, 68, 0.15);
  box-shadow: var(--glow-red);
}

.feedback-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.feedback-status {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Account Security Section */
.security-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  padding: 1.25rem;
}

.security-section h2 {
  margin: 0 0 1rem 0;
  padding: 0;
  border: none;
}

.security-row {
  display: flex;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border-color);
}

.security-label {
  color: var(--text-secondary);
  font-weight: 600;
}

.security-value {
  font-weight: 700;
}

.security-value.claimed {
  color: var(--accent-green);
}

.security-value.unclaimed {
  color: var(--accent-gold);
}

.security-value.warning {
  color: var(--accent-gold);
}

.security-actions {
  margin-top: 1rem;
}

.security-warning {
  background: rgba(240, 192, 64, 0.1);
  border: 1px solid rgba(240, 192, 64, 0.5);
  padding: 1rem;
}

.security-warning p {
  margin: 0 0 0.75rem 0;
  color: var(--accent-gold);
  font-size: 0.9rem;
}

.security-ok {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.5);
  padding: 1rem;
}

.security-ok p {
  margin: 0;
  color: var(--accent-green);
  font-size: 0.9rem;
}

.claim-link-btn {
  display: inline-block;
  padding: 0.6rem 1.25rem;
  background: linear-gradient(135deg, #f0c040 0%, #d4a020 100%);
  color: #000;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s;
  text-transform: none;
  letter-spacing: normal;
}

.claim-link-btn:hover {
  box-shadow: 0 0 20px rgba(240, 192, 64, 0.5);
}

.remove-invite-btn {
  padding: 0.6rem 1.25rem;
  background: transparent;
  color: var(--accent-red);
  border: 1px solid var(--accent-red);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: none;
}

.remove-invite-btn:hover:not(:disabled) {
  background: var(--accent-red);
  color: #fff;
}

.remove-invite-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* API Tokens Section */
.api-tokens-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  padding: 1.25rem;
}

.api-tokens-section h2 {
  margin: 0 0 0.5rem 0;
  padding: 0;
  border: none;
}

.api-tokens-section .section-description {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin: 0 0 1.25rem 0;
}

.api-tokens-list {
  margin-bottom: 1.25rem;
}

.api-token-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  margin-bottom: 0.5rem;
}

.api-token-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.api-token-name {
  font-weight: 700;
  color: var(--text-primary);
}

.api-token-preview {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent-primary);
}

.api-token-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.delete-token-btn {
  padding: 0.4rem 0.8rem;
  background: transparent;
  color: var(--accent-red);
  border: 1px solid var(--accent-red);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.delete-token-btn:hover:not(:disabled) {
  background: var(--accent-red);
  color: #fff;
}

.delete-token-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.no-tokens {
  padding: 1rem;
  text-align: center;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  margin-bottom: 1rem;
}

.new-token-display {
  padding: 1rem;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid var(--accent-green);
  margin-bottom: 1rem;
}

.new-token-header {
  font-weight: 700;
  color: var(--accent-green);
  margin-bottom: 0.75rem;
}

.new-token-value {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.new-token-value code {
  flex: 1;
  padding: 0.5rem;
  background: var(--bg-tertiary);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  word-break: break-all;
  border: 1px solid var(--border-color);
}

.copy-token-btn {
  padding: 0.5rem 1rem;
  background: var(--accent-green);
  color: #000;
  border: none;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.new-token-warning {
  font-size: 0.8rem;
  color: var(--accent-gold);
  margin: 0 0 0.75rem 0;
}

.dismiss-token-btn {
  padding: 0.4rem 1rem;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  cursor: pointer;
  font-weight: 600;
}

.create-token-form {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.token-name-input {
  flex: 1;
  padding: 0.6rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.9rem;
}

.token-name-input:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.create-token-btn {
  padding: 0.6rem 1.25rem;
  background: var(--accent-primary);
  color: #000;
  border: none;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: normal;
}

.create-token-btn:hover:not(:disabled) {
  box-shadow: var(--glow-primary);
}

.create-token-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Trusted Creators Section */
.trusted-creators-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  padding: 1.25rem;
}

.trusted-creators-section h2 {
  margin: 0 0 0.5rem 0;
  padding: 0;
  border: none;
}

.trusted-creators-section .section-description {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin: 0 0 1.25rem 0;
}

.trust-search-form {
  position: relative;
  margin-bottom: 1.25rem;
}

.trust-search-input {
  width: 100%;
  padding: 0.6rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.9rem;
}

.trust-search-input:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.trust-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-top: none;
  max-height: 200px;
  overflow-y: auto;
  z-index: 100;
}

.trust-search-result {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem;
  cursor: pointer;
  transition: background 0.2s;
}

.trust-search-result:hover {
  background: var(--bg-secondary);
}

.trust-search-result .result-username {
  font-weight: 600;
}

.trust-search-result .result-reputation {
  font-size: 0.8rem;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  margin-left: 0.5rem;
}

.trust-search-result .result-reputation.positive {
  background: rgba(34, 197, 94, 0.1);
  color: var(--accent-green);
}

.trust-search-result .result-reputation.negative {
  background: rgba(255, 78, 78, 0.1);
  color: var(--accent-red);
}

.trust-search-result .trust-btn {
  padding: 0.3rem 0.6rem;
  background: linear-gradient(135deg, #d4a900, #b8940a);
  color: #000;
  border: none;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.trust-search-empty {
  padding: 0.75rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.trusted-list {
  margin-bottom: 1rem;
}

.trusted-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  margin-bottom: 0.5rem;
}

.trusted-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.trusted-username {
  font-weight: 700;
  color: var(--text-primary);
}

.trusted-reputation {
  font-size: 0.8rem;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
}

.trusted-reputation.positive {
  background: rgba(34, 197, 94, 0.1);
  color: var(--accent-green);
}

.trusted-reputation.negative {
  background: rgba(255, 78, 78, 0.1);
  color: var(--accent-red);
}

.trusted-since {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.untrust-btn {
  padding: 0.4rem 0.8rem;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.untrust-btn:hover:not(:disabled) {
  background: var(--accent-red);
  color: #fff;
  border-color: var(--accent-red);
}

.untrust-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.no-trusted {
  padding: 1rem;
  text-align: center;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
}

@media (max-width: 640px) {
  .header-top {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .header-top > div:last-child {
    justify-content: space-between;
  }

  header h1 {
    font-size: 1.1rem;
    word-break: break-word;
  }

  .create-token-form {
    flex-direction: column;
  }

  .token-name-input,
  .create-token-btn {
    width: 100%;
  }

  .new-token-value {
    flex-direction: column;
  }

  .new-token-value code {
    width: 100%;
  }
}

/* Utility: Hide elements until Alpine initializes */
[x-cloak] {
  display: none !important;
}

/* ===========================================
   Points Page Specific Styles
   =========================================== */
.point-types-grid {
  display: grid;
  gap: 1rem;
  margin-bottom: 2rem;
}

.point-type-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  padding: 1.25rem;
  transition: all 0.2s;
}

.point-type-card:hover {
  border-color: var(--accent-primary);
}

.point-type-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.point-symbol {
  font-size: 2rem;
  line-height: 1;
}

.point-type-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

.point-type-meta span {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.growth-fixed { color: var(--text-secondary); }
.growth-unlimited { color: var(--accent-green); }
.growth-fixed-inflation { color: var(--accent-primary); }

.my-balance {
  background: var(--bg-tertiary);
  padding: 0.75rem 1rem;
  margin-top: 0.5rem;
  border-left: 4px solid var(--accent-primary);
}

.my-balance-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-transform: none;
  letter-spacing: normal;
}

.my-balance-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.25rem;
}

.action-buttons {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.action-buttons button {
  flex: 1;
  padding: 0.5rem;
  font-size: 0.85rem;
}

.create-form, .mint-form, .give-form {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.symbol-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 0.25rem;
  margin-top: 0.5rem;
}

.symbol-option {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  border: 1px solid var(--border-color);
  cursor: pointer;
  background: var(--bg-primary);
  transition: all 0.15s;
}

.symbol-option:hover {
  background: var(--bg-secondary);
  border-color: var(--accent-primary);
}

.symbol-option.selected {
  background: var(--gradient-primary);
  color: #000;
  border-color: var(--accent-primary);
}

.symbol-option.taken {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Modal header variant */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.modal-header h3 {
  margin: 0;
  text-transform: none;
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.2s;
}

.close-btn:hover {
  color: var(--accent-red);
}

/* ===========================================
   Market Maker Dashboard
   =========================================== */
.section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.snap-all-btn {
  padding: 0.4rem 0.8rem;
  font-size: 0.75rem;
}

.mm-dashboard {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mm-market-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 0.75rem;
}

.mm-market-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mm-market-title {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}

.mm-market-title:hover {
  color: var(--accent-primary);
}

.mm-market-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
}

.snap-result {
  font-size: 0.75rem;
  font-family: var(--font-mono);
}

.snap-result.snap-success {
  color: var(--accent-green);
}

.snap-result.snap-error {
  color: var(--accent-red);
}

.mm-outcomes {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mm-outcome-row {
  display: flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  background: var(--bg-tertiary);
  border-radius: 3px;
  font-size: 0.8rem;
}

.mm-outcome-label {
  font-weight: 500;
  color: var(--text-secondary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mm-prices {
  width: 100px;
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.mm-price-group {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.mm-price-label {
  color: var(--text-muted);
  font-size: 0.65rem;
  text-transform: none;
}

.mm-bid {
  color: var(--bid-color);
}

.mm-ask {
  color: var(--ask-color);
}

.mm-sep {
  color: var(--text-muted);
}

/* My Markets page stats */
.mm-stats {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.mm-stat {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mm-stat-value {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-primary);
}

.mm-stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: normal;
}

.mm-actions {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.snap-all-result {
  color: var(--accent-green);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.mm-external-badge {
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  color: var(--text-muted);
  text-transform: none;
}

.mm-outcome-header {
  display: flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: none;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 0.25rem;
}

.mm-outcome-header .mm-outcome-label {
  flex: 1;
  min-width: 0;
}

.mm-price-header {
  font-family: var(--font-mono);
  width: 100px;
  text-align: right;
  flex-shrink: 0;
}

.mm-outcome-row a.mm-outcome-label {
  color: var(--text-secondary);
  text-decoration: none;
}

.mm-outcome-row a.mm-outcome-label:hover {
  color: var(--accent-primary);
}

.section-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.manage-orders-link {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-decoration: none;
}

.manage-orders-link:hover {
  color: var(--accent-primary);
}

/* Trading Summary Cards */
.trading-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.trading-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s;
}

.trading-card:hover {
  border-color: var(--accent-primary);
  background: var(--bg-tertiary);
}

.trading-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.trading-card-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.trading-card-content {
  flex: 1;
}

.trading-card-content h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--text-primary);
}

.trading-card-content p {
  margin: 0.25rem 0 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.trading-card-arrow {
  color: var(--text-muted);
  font-size: 1.25rem;
}

.trading-card:hover .trading-card-arrow {
  color: var(--accent-primary);
}

/* ===========================================
   Responsive
   =========================================== */
@media (min-width: 640px) {
  .container {
    padding: 2rem;
  }

  header h1 {
    font-size: 2.25rem;
  }

  .market-card h3 {
    font-size: 1.2rem;
  }
}

/* ===========================================
   Scrollbar Styling
   =========================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary);
}

/* ===========================================
   Selection
   =========================================== */
::selection {
  background: var(--accent-primary);
  color: #000;
}

/* ===========================================
   Friends Quick Select (Invite Modal)
   =========================================== */
.friends-quick-select {
  margin-bottom: 1rem;
}

.friends-quick-select label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

.friends-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.friend-chip {
  padding: 0.35rem 0.75rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  color: var(--text-primary);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s;
}

.friend-chip:hover {
  background: var(--bg-secondary);
  border-color: var(--accent-primary);
}

.friend-chip.selected {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #000;
}


/* ===========================================
   Admin Page
   =========================================== */
.admin-layout {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .admin-nav {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 1rem;
      background: var(--bg-secondary);
      padding: 0.75rem 1rem;
      border-radius: 8px;
    }

    .nav-dropdown {
      padding: 0.5rem 1rem;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      color: var(--text-primary);
      font-size: 1rem;
      cursor: pointer;
      min-width: 150px;
    }

    .nav-dropdown:focus {
      outline: none;
      border-color: var(--accent-primary);
    }

    .goose-link {
      padding: 0.5rem 1rem;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      color: var(--text-primary);
      text-decoration: none;
      font-size: 0.9rem;
      white-space: nowrap;
    }

    .goose-link:hover {
      background: var(--bg-primary);
      border-color: var(--accent-primary);
    }

    .nav-status {
      display: flex;
      gap: 1rem;
      margin-left: auto;
    }

    .status-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.8rem;
    }

    .status-label {
      color: var(--text-muted);
    }

    .status-badge {
      padding: 0.15rem 0.5rem;
      border-radius: 10px;
      font-size: 0.7rem;
      font-weight: 600;
      background: var(--accent-blue);
      color: white;
    }

    .status-badge.ok {
      background: var(--accent-green);
    }

    .status-badge.error {
      background: var(--accent-red);
    }

    .admin-content {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    @media (max-width: 600px) {
      .admin-nav {
        flex-direction: column;
        align-items: stretch;
      }

      .nav-dropdown {
        width: 100%;
      }

      .nav-status {
        margin-left: 0;
        justify-content: space-around;
      }
    }

    .admin-section {
      background: var(--bg-secondary);
      border-radius: 8px;
      padding: 1.5rem;
    }

    .admin-section h2 {
      margin-bottom: 1rem;
      font-size: 1.1rem;
      color: var(--text-primary);
    }

    .admin-section h3 {
      margin: 1.5rem 0 0.75rem;
      font-size: 1rem;
      color: var(--text-secondary);
    }

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.5rem;
    }

    .section-header h2 {
      margin-bottom: 0;
    }

    .section-description {
      color: var(--text-muted);
      font-size: 0.875rem;
      margin-bottom: 1rem;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 1rem;
    }

    .stat-card {
      background: var(--bg-tertiary);
      padding: 1rem;
      border-radius: 6px;
      text-align: center;
    }

    .stat-value {
      font-size: 2rem;
      font-weight: 700;
      color: var(--accent-green);
    }

    .stat-label {
      font-size: 0.75rem;
      color: var(--text-muted);
      text-transform: none;
    }

    .activity-controls {
      display: flex;
      gap: 1rem;
      margin-bottom: 1rem;
    }

    .activity-controls select {
      padding: 0.5rem;
      border-radius: 4px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      color: var(--text-primary);
    }

    .activity-log {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      max-height: 400px;
      overflow-y: auto;
    }

    .activity-item {
      display: grid;
      grid-template-columns: 140px 100px 120px 1fr 100px;
      gap: 0.75rem;
      padding: 0.75rem;
      background: var(--bg-tertiary);
      border-radius: 4px;
      font-size: 0.875rem;
      align-items: center;
    }

    .activity-time {
      color: var(--text-muted);
      font-family: monospace;
      font-size: 0.75rem;
    }

    .activity-user {
      font-weight: 600;
      color: var(--text-primary);
    }

    .activity-action {
      padding: 0.25rem 0.5rem;
      border-radius: 4px;
      font-size: 0.7rem;
      text-transform: none;
      text-align: center;
    }

    .activity-action.login { background: var(--accent-blue); color: white; }
    .activity-action.order { background: var(--accent-green); color: white; }
    .activity-action.trade { background: #9b59b6; color: white; }
    .activity-action.market { background: #e67e22; color: white; }
    .activity-action.admin { background: var(--accent-gold); color: black; }
    .activity-action.error { background: var(--accent-red); color: white; }

    .activity-details {
      color: var(--text-secondary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .activity-ip {
      color: var(--text-muted);
      font-family: monospace;
      font-size: 0.75rem;
    }

    .error-report {
      grid-template-columns: 140px 60px 1fr 200px;
    }

    .error-code {
      color: var(--accent-red);
      font-weight: 700;
    }

    .error-message {
      color: var(--text-primary);
    }

    .error-url {
      color: var(--text-muted);
      font-size: 0.75rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 1px solid var(--border-color);
    }

    .btn-small {
      padding: 0.4rem 0.75rem;
      font-size: 0.75rem;
    }

    .btn-danger {
      background: var(--accent-red);
      border-color: var(--accent-red);
    }

    .empty-state {
      text-align: center;
      padding: 2rem;
      color: var(--text-muted);
    }

    /* Sessions */
    .sessions-list {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .session-item {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 100px auto;
      gap: 1rem;
      padding: 0.75rem;
      background: var(--bg-tertiary);
      border-radius: 4px;
      align-items: center;
    }

    .session-user .username {
      font-weight: 600;
      display: block;
    }

    .session-user .user-id {
      font-size: 0.75rem;
      color: var(--text-muted);
    }

    .session-meta {
      font-size: 0.875rem;
      color: var(--text-secondary);
    }

    .session-meta span {
      display: block;
    }

    .session-activity {
      font-size: 0.875rem;
      color: var(--text-muted);
    }

    .session-subscriptions {
      font-size: 0.875rem;
      color: var(--text-muted);
    }

    /* Users */
    .search-box {
      margin-bottom: 1rem;
    }

    .search-box input {
      width: 100%;
      padding: 0.75rem;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      color: var(--text-primary);
    }

    .users-list, .admin-markets-list {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      max-height: 300px;
      overflow-y: auto;
    }

    .user-item {
      display: flex;
      gap: 1rem;
      padding: 0.75rem;
      background: var(--bg-tertiary);
      border-radius: 4px;
      cursor: pointer;
      align-items: center;
    }

    .user-item:hover {
      background: var(--bg-primary);
    }

    .user-item .username {
      font-weight: 600;
    }

    .user-item .user-id {
      color: var(--text-muted);
      font-size: 0.875rem;
    }

    .admin-badge {
      background: var(--accent-gold);
      color: black;
      padding: 0.2rem 0.5rem;
      border-radius: 4px;
      font-size: 0.7rem;
      font-weight: 600;
    }

    .user-details {
      margin-top: 1rem;
    }

    .user-info-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 1rem;
      margin-bottom: 1rem;
    }

    .info-item label {
      display: block;
      font-size: 0.75rem;
      color: var(--text-muted);
      text-transform: none;
    }

    .info-item span {
      font-weight: 600;
    }

    .balances-list {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .balance-item {
      display: flex;
      gap: 1rem;
      padding: 0.5rem;
      background: var(--bg-tertiary);
      border-radius: 4px;
      align-items: center;
    }

    .balance-symbol {
      font-size: 1.25rem;
    }

    .balance-name {
      flex: 1;
    }

    .balance-amount {
      font-weight: 600;
      font-family: monospace;
    }

    .balance-reserved {
      color: var(--text-muted);
      font-size: 0.875rem;
    }

    .positions-list {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      max-height: 200px;
      overflow-y: auto;
    }

    .position-item {
      display: grid;
      grid-template-columns: 1fr 1fr auto;
      gap: 1rem;
      padding: 0.5rem;
      background: var(--bg-tertiary);
      border-radius: 4px;
    }

    .position-market {
      font-weight: 600;
    }

    .position-qty {
      font-family: monospace;
      font-weight: 600;
    }

    .position-qty.long { color: var(--accent-green); }
    .position-qty.short { color: var(--accent-red); }

    /* Trusted creators admin */
    .trusted-creators-admin-list {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      max-height: 200px;
      overflow-y: auto;
    }

    .trusted-item {
      display: flex;
      gap: 0.75rem;
      padding: 0.5rem;
      background: var(--bg-tertiary);
      border-radius: 4px;
      align-items: center;
    }

    .trusted-item .username {
      font-weight: 600;
    }

    .trusted-item .trusted-since {
      font-size: 0.8rem;
      color: var(--text-muted);
      margin-left: auto;
    }

    /* Markets */
    .market-admin-item {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 1rem;
      padding: 0.75rem;
      background: var(--bg-tertiary);
      border-radius: 4px;
      align-items: center;
    }

    .market-info {
      display: flex;
      gap: 0.5rem;
      align-items: center;
    }

    .market-title {
      font-weight: 600;
    }

    .market-status {
      padding: 0.2rem 0.5rem;
      border-radius: 4px;
      font-size: 0.7rem;
      text-transform: none;
    }

    .status-open { background: var(--accent-green); color: white; }
    .status-settled { background: var(--text-muted); color: white; }
    .status-voided { background: var(--accent-red); color: white; }

    .market-meta {
      font-size: 0.875rem;
      color: var(--text-muted);
    }

    .market-actions {
      display: flex;
      gap: 0.5rem;
    }

    /* Modal */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }

    .modal {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 1.5rem;
      max-width: 400px;
      width: 90%;
    }

    .modal h3 {
      margin: 0 0 1rem;
    }

    .modal .warning {
      color: var(--accent-red);
      font-size: 0.875rem;
    }

    .form-group {
      margin-bottom: 1rem;
    }

    .form-group label {
      display: block;
      margin-bottom: 0.25rem;
      font-size: 0.875rem;
      color: var(--text-secondary);
    }

    .form-group input,
    .form-group select {
      width: 100%;
      padding: 0.5rem;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      color: var(--text-primary);
    }

    .modal-actions {
      display: flex;
      gap: 0.5rem;
      justify-content: flex-end;
      margin-top: 1.5rem;
    }

    /* Positions Table */
    .positions-table, .reconciliation-table {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }

    .table-header {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 80px 100px;
      gap: 0.5rem;
      padding: 0.5rem;
      background: var(--bg-tertiary);
      border-radius: 4px;
      font-size: 0.75rem;
      text-transform: none;
      color: var(--text-muted);
    }

    .table-row {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 80px 100px;
      gap: 0.5rem;
      padding: 0.5rem;
      background: var(--bg-tertiary);
      border-radius: 4px;
      font-size: 0.875rem;
    }

    .table-row.row-error {
      border: 1px solid var(--accent-red);
    }

    .reconciliation-table .table-header,
    .reconciliation-table .table-row {
      grid-template-columns: 1fr repeat(5, 100px) 80px;
    }

    .reconciliation-status {
      padding: 1rem;
      border-radius: 4px;
      margin-bottom: 1rem;
      text-align: center;
    }

    .reconciliation-status.status-OK {
      background: rgba(34, 197, 94, 0.1);
      border: 1px solid var(--accent-green);
      color: var(--accent-green);
    }

    .reconciliation-status.status-MISMATCH {
      background: rgba(255, 68, 68, 0.1);
      border: 1px solid var(--accent-red);
      color: var(--accent-red);
    }

    .long { color: var(--accent-green); }
    .short { color: var(--accent-red); }
    .text-success { color: var(--accent-green); }
    .text-danger { color: var(--accent-red); }

    /* Market Maker Logs */
    .tab-badge.mm-running {
      background: var(--accent-blue);
      animation: pulse 1s infinite;
    }

    .tab-badge.mm-error {
      background: var(--accent-red);
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }

    .header-actions {
      display: flex;
      gap: 0.5rem;
    }

    .mm-filters {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 1rem;
    }

    .mm-filters select {
      padding: 0.5rem;
      border-radius: 4px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      color: var(--text-primary);
    }

    .mm-logs {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      max-height: 500px;
      overflow-y: auto;
      font-family: monospace;
      font-size: 0.8rem;
    }

    .mm-log-item {
      display: grid;
      grid-template-columns: 140px 80px 1fr;
      gap: 0.75rem;
      padding: 0.5rem;
      background: var(--bg-tertiary);
      border-radius: 4px;
      border-left: 3px solid var(--border-color);
    }

    .mm-log-item.log-info {
      border-left-color: var(--accent-blue);
    }

    .mm-log-item.log-warn {
      border-left-color: var(--accent-gold);
      background: rgba(255, 193, 7, 0.1);
    }

    .mm-log-item.log-error {
      border-left-color: var(--accent-red);
      background: rgba(255, 68, 68, 0.1);
    }

    .log-time {
      color: var(--text-muted);
      font-size: 0.7rem;
    }

    .log-source {
      padding: 0.15rem 0.4rem;
      border-radius: 3px;
      font-size: 0.65rem;
      text-transform: none;
      text-align: center;
      font-weight: 600;
    }

    .source-sync { background: var(--accent-blue); color: white; }
    .source-mm { background: var(--accent-green); color: white; }
    .source-kalshi { background: #6366f1; color: white; }
    .source-eia { background: #f0c040; color: black; }
    .source-eia-mm { background: #d4a020; color: white; }
    .source-ercot { background: #10b981; color: white; }
    .source-zig { background: #ec4899; color: white; }

    .log-message {
      color: var(--text-primary);
      white-space: pre-wrap;
      word-break: break-word;
    }

    .mm-logs-footer {
      text-align: center;
      padding: 0.5rem;
      color: var(--text-muted);
      font-size: 0.8rem;
    }

    @media (max-width: 768px) {
      .activity-item {
        grid-template-columns: 1fr;
        gap: 0.25rem;
      }

      .activity-ip {
        display: none;
      }

      .session-item {
        grid-template-columns: 1fr;
        gap: 0.5rem;
      }

      .table-header, .table-row {
        grid-template-columns: 1fr 1fr;
        font-size: 0.75rem;
      }
    }


/* ===========================================
   Market Page
   =========================================== */
.market-action-links {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin: 1rem 0;
    }

    .market-action-links > *,
    .market-action-links .external-source-badge,
    .market-action-links button.external-source-badge {
      flex: 1;
      text-align: center;
    }

    .external-market-link {
      display: contents;
    }

    .external-source-badge {
      background: #6e40c9;
      color: #fff;
      padding: 0.25rem 0.75rem;
      border: none;
      border-radius: 4px;
      font-size: 0.8rem;
      text-transform: capitalize;
      font-weight: 500;
      text-decoration: none;
      cursor: pointer;
      transition: background 0.15s;
      font-family: var(--font-mono);
    }

    a.external-source-badge[target="_blank"]::after {
      content: ' ↗';
      font-size: 0.7rem;
    }

    .external-source-badge:hover {
      background: #8b5cf6;
    }

    .snap-btn {
      padding: 0.35rem 0.9rem;
      background: linear-gradient(135deg, #f0c040 0%, #d4a020 100%);
      border: none;
      border-radius: 4px;
      color: #000;
      font-size: 0.8rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.15s;
      text-transform: none;
      letter-spacing: normal;
    }

    .snap-btn:hover:not(:disabled) {
      box-shadow: 0 0 15px rgba(240, 192, 64, 0.4);
      transform: translateY(-1px);
    }

    .snap-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .snap-message {
      margin-top: 0.75rem;
      padding: 0.5rem 0.75rem;
      border-radius: 4px;
      font-size: 0.875rem;
    }

    .snap-message.success {
      background: rgba(46, 160, 67, 0.15);
      color: #3fb950;
    }

    .snap-message.error {
      background: rgba(248, 81, 73, 0.15);
      color: #f85149;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      flex-wrap: wrap;
    }

    .snap-message.error span:first-child {
      flex: 1;
    }

    .report-btn {
      background: rgba(248, 81, 73, 0.3);
      border: 1px solid rgba(248, 81, 73, 0.5);
      color: #f85149;
      padding: 0.25rem 0.5rem;
      border-radius: 4px;
      font-size: 0.75rem;
      cursor: pointer;
      transition: background 0.2s;
    }

    .report-btn:hover {
      background: rgba(248, 81, 73, 0.5);
    }

    .reported-msg {
      font-size: 0.75rem;
      color: #3fb950;
    }

    /* User Position Summary */
    .user-position-summary {
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 1rem;
      margin-bottom: 1.5rem;
    }

    .position-header {
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: none;
      letter-spacing: normal;
      color: var(--text-secondary);
      margin-bottom: 0.75rem;
    }

    .position-list {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
    }

    .position-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      background: var(--bg-secondary);
      padding: 0.5rem 0.75rem;
      border-radius: 6px;
    }

    .position-outcome {
      font-size: 0.875rem;
      color: var(--text-primary);
    }

    .position-qty {
      font-size: 0.875rem;
      font-weight: 600;
    }

    .position-qty.positive {
      color: var(--accent-green);
    }

    .position-qty.negative {
      color: var(--accent-red);
    }

    /* Chart button and modal */
    .section-header .chart-btn {
      background: transparent;
      border: none;
      padding: 0.35rem;
      cursor: pointer;
      color: var(--text-secondary);
      border-radius: 4px;
      transition: color 0.15s, background 0.15s;
    }

    .section-header .chart-btn:hover {
      color: var(--text-primary);
      background: var(--bg-tertiary);
    }

    .market-history-modal {
      max-width: 700px;
      width: 90vw;
    }

    .chart-controls {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 0.75rem;
    }

    .chart-controls select {
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      color: var(--text-primary);
      padding: 0.5rem;
      border-radius: 4px;
      font-size: 0.875rem;
    }

    .chart-loading {
      color: var(--text-secondary);
      font-size: 0.875rem;
    }

    .chart-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      margin-bottom: 0.75rem;
      font-size: 0.8rem;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 0.35rem;
    }

    .legend-color {
      width: 12px;
      height: 12px;
      border-radius: 2px;
    }

    .chart-container {
      position: relative;
      background: #000;
      border-radius: 8px;
      overflow: hidden;
    }

    .chart-container canvas {
      display: block;
      width: 100%;
      height: auto;
    }

    .chart-empty {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #666;
      font-size: 0.875rem;
    }

    /* Outcome wrapper for implications */
    .outcome-wrapper {
      position: relative;
    }

    .outcome-implications {
      padding: 0.5rem 0.75rem;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-top: none;
      border-radius: 0 0 8px 8px;
      margin-top: -8px;
      padding-top: 12px;
    }

    .implication-link {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.8rem;
      padding: 0.25rem 0;
    }

    .impl-arrow {
      color: var(--text-muted);
      font-weight: bold;
    }

    .implies .impl-arrow {
      color: #6e40c9;
    }

    .implied-by .impl-arrow {
      color: #3fb950;
    }

    .impl-target {
      color: var(--text-secondary);
      text-decoration: none;
    }

    .impl-target:hover {
      color: var(--text-primary);
      text-decoration: underline;
    }

    .impl-delete {
      background: none;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      font-size: 1rem;
      padding: 0 0.25rem;
      line-height: 1;
    }

    .impl-delete:hover {
      color: var(--accent-red);
    }

    .add-impl-btn {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      padding: 0.25rem 0.5rem;
      font-size: 0.7rem;
      color: var(--text-secondary);
      cursor: pointer;
      opacity: 0;
      transition: opacity 0.15s, background 0.15s;
    }

    .outcome-wrapper:hover .add-impl-btn {
      opacity: 1;
    }

    .add-impl-btn:hover {
      background: var(--bg-secondary);
      color: var(--text-primary);
    }

    /* Implication Modal */
    .implication-modal {
      max-width: 500px;
    }

    .impl-explanation {
      font-size: 0.85rem;
      color: var(--text-secondary);
      margin-bottom: 1rem;
      padding: 0.5rem;
      background: var(--bg-tertiary);
      border-radius: 4px;
    }

    .search-results {
      max-height: 200px;
      overflow-y: auto;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      margin-top: 0.5rem;
    }

    .search-result {
      padding: 0.75rem;
      cursor: pointer;
      border-bottom: 1px solid var(--border-color);
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }

    .search-result:last-child {
      border-bottom: none;
    }

    .search-result:hover {
      background: var(--bg-tertiary);
    }

    .result-seq {
      font-family: monospace;
      font-size: 0.8rem;
      color: #6e40c9;
    }

    .result-label {
      font-weight: 500;
    }

    .result-market {
      font-size: 0.8rem;
      color: var(--text-muted);
    }

    .search-empty,
    .search-loading {
      text-align: center;
      padding: 1rem;
      color: var(--text-muted);
      font-size: 0.875rem;
    }

    /* Eliminated outcomes */
    .outcome-wrapper.eliminated {
      opacity: 0.6;
    }

    .outcome-card.eliminated {
      background: var(--bg-tertiary);
      border: 1px dashed var(--border-color);
      cursor: default;
    }

    .eliminated-badge {
      background: var(--accent-red);
      color: #fff;
      padding: 0.15rem 0.5rem;
      border-radius: 3px;
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.05em;
      margin-left: auto;
    }

    .eliminated-reason {
      font-size: 0.8rem;
      color: var(--text-muted);
      margin-top: 0.5rem;
    }

    /* Invite button */
    .invite-btn {
      padding: 0.4rem 0.8rem;
      background: var(--accent-primary);
      color: #000;
      border: none;
      border-radius: 4px;
      font-size: 0.8rem;
      font-weight: 600;
      cursor: pointer;
      transition: opacity 0.15s;
    }

    .invite-btn:hover {
      opacity: 0.9;
    }

    .invite-subtext {
      font-size: 0.875rem;
      color: var(--text-secondary);
      margin-bottom: 1rem;
    }

    .invite-result {
      text-align: center;
    }

    .invite-result input {
      width: 100%;
      padding: 0.75rem;
      margin: 0.5rem 0;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      background: var(--bg-secondary);
      color: var(--text-primary);
      font-size: 0.875rem;
    }

    .invite-result .copy-btn {
      padding: 0.5rem 1.5rem;
      background: var(--accent-primary);
      color: #000;
      border: none;
      border-radius: 4px;
      font-weight: 600;
      cursor: pointer;
    }

    .invite-note {
      font-size: 0.8rem;
      color: var(--text-muted);
      margin-top: 0.5rem;
    }

    .balance-hint {
      font-weight: normal;
      color: var(--text-muted);
      font-size: 0.85em;
    }


/* ===========================================
   Create Page
   =========================================== */
.login-required {
      text-align: center;
      padding: 2rem;
      color: var(--text-secondary);
    }

    .create-flow {
      max-width: 600px;
      margin: 0 auto;
    }

    .step-intro {
      font-size: 1.1rem;
      color: var(--text-secondary);
      margin-bottom: 1.5rem;
    }

    .step-desc {
      font-size: 0.9rem;
      color: var(--text-muted);
      margin-bottom: 1.5rem;
    }

    .back-step {
      background: none;
      border: none;
      color: var(--text-secondary);
      font-size: 0.9rem;
      cursor: pointer;
      padding: 0;
      margin-bottom: 1rem;
    }

    .back-step:hover {
      color: var(--text-primary);
    }

    /* Source Selection Grid */
    .source-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
    }

    @media (max-width: 500px) {
      .source-grid {
        grid-template-columns: 1fr;
      }
    }

    .source-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 1.5rem 1rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.15s;
      text-align: center;
      color: var(--text-primary);
    }

    .source-card:hover {
      border-color: var(--accent-blue);
      background: var(--bg-hover);
    }

    .source-icon {
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg-tertiary);
      border-radius: 12px;
      font-size: 1.5rem;
      font-weight: 600;
      margin-bottom: 0.75rem;
      color: var(--text-secondary);
    }

    .source-card.source-kalshi .source-icon { background: rgba(138, 99, 210, 0.2); color: #a78bfa; }
    .source-card.source-eia .source-icon { background: rgba(249, 115, 22, 0.2); color: #fb923c; }
    .source-card.source-weather .source-icon { background: rgba(16, 185, 129, 0.2); color: #60a5fa; }
    .source-card.source-futures .source-icon { background: rgba(16, 185, 129, 0.2); color: #10b981; }

    .source-name {
      font-weight: 600;
      font-size: 1rem;
      margin-bottom: 0.25rem;
    }

    .source-desc {
      font-size: 0.8rem;
      color: var(--text-muted);
    }

    /* Form Elements */
    .form-group {
      margin-bottom: 1.5rem;
    }

    .form-group label {
      display: block;
      font-weight: 600;
      margin-bottom: 0.5rem;
    }

    .form-group input[type="text"],
    .form-group input[type="number"],
    .form-group input[type="date"],
    .form-group select {
      width: 100%;
      padding: 0.75rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      color: var(--text-primary);
      font-size: 1rem;
    }

    .form-group input:focus,
    .form-group select:focus {
      outline: none;
      border-color: var(--accent-blue);
    }

    .hint {
      font-size: 0.85rem;
      color: var(--text-muted);
      margin-top: 0.5rem;
    }

    /* Outcomes */
    .outcomes-inputs {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .outcome-input-row {
      display: flex;
      gap: 0.5rem;
    }

    .outcome-input-row input {
      flex: 1;
    }

    .remove-outcome-btn {
      width: 40px;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      color: var(--accent-red);
      font-size: 1.25rem;
      cursor: pointer;
    }

    .add-outcome-btn {
      margin-top: 0.5rem;
      padding: 0.5rem;
      background: var(--bg-tertiary);
      border: 1px dashed var(--border-color);
      border-radius: 6px;
      color: var(--text-secondary);
      font-size: 0.875rem;
      cursor: pointer;
      width: 100%;
    }

    .add-outcome-btn:hover {
      border-color: var(--accent-blue);
      color: var(--accent-blue);
    }

    /* Buttons */
    .create-btn {
      width: 100%;
      padding: 1rem;
      background: var(--accent-blue);
      border: none;
      border-radius: 6px;
      color: #fff;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
    }

    .create-btn:hover:not(:disabled) {
      background: #4c93e6;
    }

    .create-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .cancel-btn {
      padding: 0.75rem 1rem;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      color: var(--text-primary);
      cursor: pointer;
    }

    /* Search */
    .search-box input {
      width: 100%;
      padding: 0.75rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      color: var(--text-primary);
      font-size: 1rem;
      margin-bottom: 1rem;
    }

    .search-loading {
      text-align: center;
      padding: 2rem;
      color: var(--text-secondary);
    }

    .search-results {
      max-height: 400px;
      overflow-y: auto;
    }

    .search-result {
      padding: 0.75rem;
      border: 1px solid var(--border-color);
      border-radius: 6px;
      margin-bottom: 0.5rem;
      cursor: pointer;
    }

    .search-result:hover {
      background: var(--bg-secondary);
    }

    .result-title {
      font-weight: 500;
      margin-bottom: 0.25rem;
    }

    .result-meta {
      font-size: 0.8rem;
      color: var(--text-muted);
    }

    .result-category {
      background: var(--bg-tertiary);
      padding: 0.125rem 0.5rem;
      border-radius: 4px;
    }

    .empty-state {
      text-align: center;
      padding: 2rem;
      color: var(--text-muted);
    }

    /* Selected Event Preview */
    .selected-event {
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 1rem;
      background: var(--bg-secondary);
    }

    .selected-event h3 {
      margin-bottom: 1rem;
      font-size: 1rem;
    }

    .outcomes-preview {
      margin-bottom: 1rem;
    }

    .outcome-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.5rem 0.75rem;
      background: var(--bg-primary);
      border-radius: 4px;
      margin-bottom: 0.25rem;
      font-size: 0.9rem;
    }

    .outcome-price {
      color: #60a5fa;
      font-weight: 500;
      margin-left: 1rem;
      white-space: nowrap;
    }

    .selected-actions {
      display: flex;
      gap: 0.5rem;
    }

    .selected-actions .create-btn {
      flex: 1;
    }

    /* EIA Specific */
    .commodity-cards {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.75rem;
    }

    .commodity-card {
      display: flex;
      flex-direction: column;
      padding: 1rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      cursor: pointer;
      text-align: left;
      color: var(--text-primary);
    }

    .commodity-card:hover:not(.selected) {
      border-color: var(--accent-blue);
    }

    .commodity-card.selected {
      border-color: #f97316;
      background: rgba(249, 115, 22, 0.1);
    }

    .commodity-card.selected:hover {
      border-color: #f97316;
    }

    .commodity-name {
      font-weight: 600;
      font-size: 0.9rem;
      margin-bottom: 0.25rem;
      color: var(--text-primary);
    }

    .commodity-price {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--text-primary);
    }

    .commodity-unit {
      font-size: 0.75rem;
      color: var(--text-muted);
    }

    .loading-commodities {
      text-align: center;
      padding: 2rem;
      color: var(--text-muted);
    }

    .direction-toggle {
      display: flex;
      gap: 0.5rem;
    }

    .direction-btn {
      flex: 1;
      padding: 0.75rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      color: var(--text-primary);
      font-size: 0.9rem;
      cursor: pointer;
    }

    .direction-btn:hover {
      border-color: var(--accent-blue);
    }

    .direction-btn.selected {
      border-color: #f97316;
      background: rgba(249, 115, 22, 0.1);
    }

    .preview-box {
      padding: 1rem;
      background: rgba(249, 115, 22, 0.1);
      border: 1px solid rgba(249, 115, 22, 0.3);
      border-radius: 6px;
      margin-bottom: 1rem;
    }

    .preview-label {
      font-size: 0.8rem;
      color: var(--text-muted);
      display: block;
      margin-bottom: 0.25rem;
    }

    .preview-title {
      font-weight: 500;
    }

    /* Futures Range Inputs */
    .futures-range-inputs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    .futures-range-inputs label {
      font-size: 0.85rem;
      color: var(--text-secondary);
      margin-bottom: 0.25rem;
      display: block;
    }

    .futures-range-inputs input {
      width: 100%;
    }

    /* Messages */
    .message {
      padding: 0.75rem;
      border-radius: 6px;
      margin-top: 1rem;
      font-size: 0.9rem;
    }

    .message.error {
      background: rgba(248, 81, 73, 0.15);
      color: var(--accent-red);
    }

    .message.success {
      background: rgba(34, 197, 94, 0.15);
      color: var(--accent-green);
    }

    .step h2 {
      margin-bottom: 1rem;
    }

    /* Weather Specific */
    .forecast-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 0.75rem;
    }

    .forecast-card {
      display: flex;
      flex-direction: column;
      padding: 0.75rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      color: var(--text-primary);
    }

    .forecast-card:hover:not(.selected) {
      border-color: var(--accent-blue);
    }

    .forecast-card.selected {
      border-color: #10b981;
      background: rgba(16, 185, 129, 0.1);
    }

    .forecast-name {
      font-weight: 600;
      font-size: 0.85rem;
      margin-bottom: 0.25rem;
    }

    .forecast-temp {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--text-primary);
    }

    .forecast-desc {
      font-size: 0.7rem;
      color: var(--text-muted);
      margin-top: 0.25rem;
    }

    .loading-text {
      color: var(--text-muted);
      font-style: italic;
    }


/* ===========================================
   Ladder Page
   =========================================== */
/* Ladder-specific styles */
    .ladder-wrapper {
      max-width: 420px;
      margin: 0 auto;
    }

    .trading-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.75rem 1rem;
      margin-bottom: 1rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      flex-wrap: wrap;
    }

    .trading-bar .market-prices {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 1.1rem;
      font-weight: 600;
    }

    .trading-bar .bid-price { color: var(--bid-color); }
    .trading-bar .ask-price { color: var(--ask-color); }
    .trading-bar .price-label {
      font-size: 0.65rem;
      text-transform: none;
      opacity: 0.7;
      margin-right: 0.15rem;
    }
    .trading-bar .ask-price .price-label {
      margin-right: 0;
      margin-left: 0.15rem;
    }

    .trading-bar .position-display {
      font-size: 0.9rem;
      color: var(--text-secondary);
    }
    .trading-bar .position-display .pos-value {
      font-weight: 600;
      margin-left: 0.25rem;
    }
    .trading-bar .position-display .pos-value.positive { color: var(--bid-color); }
    .trading-bar .position-display .pos-value.negative { color: var(--ask-color); }

    .trading-bar .qty-controls {
      display: flex;
      align-items: center;
      gap: 0.25rem;
    }
    .trading-bar .qty-btn {
      width: 28px;
      height: 28px;
      border: 1px solid var(--border-color);
      background: var(--bg-tertiary);
      color: var(--text-primary);
      border-radius: 4px;
      cursor: pointer;
      font-size: 1rem;
    }
    .trading-bar .qty-btn:hover { background: var(--bg-secondary); }
    .trading-bar .qty-input {
      width: 50px;
      text-align: center;
      padding: 0.25rem;
      border: 1px solid var(--border-color);
      background: var(--bg-tertiary);
      color: var(--text-primary);
      border-radius: 4px;
      font-size: 0.9rem;
    }

    .ladder-container {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      overflow: hidden;
      user-select: none;
    }

    .ladder-col-header,
    .ladder-row {
      display: grid;
      grid-template-columns: 36px 40px 1fr 48px 1fr 40px 36px;
    }

    .no-click { cursor: default; }
    .col-bid.no-click:hover, .col-ask.no-click:hover { background: none; }

    .ladder-col-header {
      font-size: 0.7rem;
      color: var(--text-muted);
      text-transform: none;
      background: var(--bg-tertiary);
      border-bottom: 1px solid var(--border-color);
      position: sticky;
      top: 0;
      z-index: 10;
    }
    .ladder-col-header > span {
      padding: 0.5rem 4px;
      text-align: left;
    }
    /* Left side columns (Vol, My, Bid) - right align toward price */
    .ladder-col-header > span:nth-child(1),
    .ladder-col-header > span:nth-child(2),
    .ladder-col-header > span:nth-child(3) {
      text-align: right;
    }
    /* Price column - center */
    .ladder-col-header > span:nth-child(4) {
      text-align: center;
    }
    /* Right side columns (Ask, My, Vol) - left align toward price */
    .ladder-col-header > span:nth-child(5),
    .ladder-col-header > span:nth-child(6),
    .ladder-col-header > span:nth-child(7) {
      text-align: left;
    }
    .ladder-col-header .col-bid { color: var(--bid-color); }
    .ladder-col-header .col-ask { color: var(--ask-color); }

    .ladder-scroll {
      max-height: 60vh;
      overflow-y: auto;
    }

    .ladder-row {
      border-bottom: 1px solid var(--border-subtle, #222);
      position: relative;
    }
    .ladder-row:hover { background: rgba(255,255,255,0.03); }

    .ladder-row > span {
      padding: 0.4rem 4px;
    }

    .ladder-row .col-vol {
      font-size: 0.7rem;
      color: var(--text-muted);
    }

    .ladder-row .col-my-bid,
    .ladder-row .col-my-ask {
      font-size: 0.8rem;
      cursor: pointer;
      color: var(--text-muted);
    }
    .ladder-row .col-my-bid:hover,
    .ladder-row .col-my-ask:hover { background: rgba(255,255,255,0.08); }
    .ladder-row .col-my-bid.has-qty { color: var(--bid-color); font-weight: 600; }
    .ladder-row .col-my-ask.has-qty { color: var(--ask-color); font-weight: 600; }

    .ladder-row .col-bid,
    .ladder-row .col-ask {
      cursor: pointer;
    }
    .ladder-row .col-bid:hover { background: rgba(63, 185, 80, 0.15); }
    .ladder-row .col-ask:hover { background: rgba(248, 81, 73, 0.15); }

    .ladder-row .col-bid .qty-cp-wrapper {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 0.25rem;
    }
    .ladder-row .col-ask .qty-cp-wrapper {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 0.25rem;
    }
    .ladder-row .qty-cp-wrapper .cp-name {
      font-size: 0.65rem;
      color: var(--text-muted);
    }
    .ladder-row .qty-cp-wrapper .qty {
      font-weight: 600;
    }
    .ladder-row .col-bid .qty { color: var(--bid-color); }
    .ladder-row .col-ask .qty { color: var(--ask-color); }
    .ladder-row .col-price {
      text-align: center;
      font-weight: 600;
      font-size: 1rem;
    }

    .ladder-row.best-bid { background: rgba(63, 185, 80, 0.08); }
    .ladder-row.best-ask { background: rgba(248, 81, 73, 0.08); }
    .ladder-row.best-bid.best-ask { background: linear-gradient(90deg, rgba(63, 185, 80, 0.08) 50%, rgba(248, 81, 73, 0.08) 50%); }

    .ladder-row.implied-bid { background: rgba(63, 185, 80, 0.03); }
    .ladder-row.implied-ask { background: rgba(248, 81, 73, 0.03); }

    .implied-marker {
      font-style: italic;
      font-size: 0.8rem;
      opacity: 0.45;
      display: flex;
      align-items: center;
      gap: 0.25rem;
      width: 100%;
    }
    .implied-marker .qty { font-weight: 600; }
    .implied-marker .cp-name { font-size: 0.65rem; }
    .col-bid .implied-marker { color: var(--bid-color); justify-content: flex-end; }
    .col-ask .implied-marker { color: var(--ask-color); justify-content: flex-start; }

    .implied-bid-label {
      color: var(--bid-color);
      opacity: 0.5;
      font-size: 0.85em;
    }
    .implied-ask-label {
      color: var(--ask-color);
      opacity: 0.5;
      font-size: 0.85em;
    }

    /* Inline notifications */
    .inline-notifications {
      position: absolute;
      pointer-events: none;
      z-index: 5;
    }
    .inline-notifications.above {
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
    }
    .inline-notifications.below {
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
    }
    .inline-trade-notification {
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      padding: 0.2rem 0.5rem;
      font-size: 0.75rem;
      white-space: nowrap;
      margin: 2px 0;
    }
    .inline-trade-notification .buy { color: var(--bid-color); }
    .inline-trade-notification .sell { color: var(--ask-color); }

    /* Inline edit row */
    .inline-edit-row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem;
      background: var(--bg-tertiary);
      border-bottom: 1px solid var(--border-color);
      flex-wrap: wrap;
    }
    .edit-label { font-weight: 600; font-size: 0.8rem; }
    .edit-label.buy { color: var(--bid-color); }
    .edit-label.sell { color: var(--ask-color); }
    .edit-filled { font-size: 0.8rem; color: var(--text-muted); }
    .edit-qty-input {
      width: 60px;
      padding: 0.25rem;
      border: 1px solid var(--border-color);
      background: var(--bg-secondary);
      color: var(--text-primary);
      border-radius: 4px;
    }
    .edit-btn {
      padding: 0.25rem 0.5rem;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 0.8rem;
    }
    .edit-btn.save { background: var(--bid-color); color: #000; }
    .edit-btn.cancel { background: var(--ask-color); color: #fff; }
    .edit-btn.close { background: transparent; color: var(--text-muted); }
    .edit-message { font-size: 0.8rem; }
    .edit-message.success { color: var(--bid-color); }
    .edit-message.error { color: var(--ask-color); }

    .order-hint {
      text-align: center;
      font-size: 0.8rem;
      color: var(--text-muted);
      margin-bottom: 0.75rem;
    }

    .order-message {
      text-align: center;
      padding: 0.5rem;
      margin-top: 0.5rem;
      border-radius: 4px;
    }
    .order-message.error { background: rgba(248, 81, 73, 0.2); color: var(--ask-color); }
    .order-message.success { background: rgba(63, 185, 80, 0.2); color: var(--bid-color); }

    .settled-banner {
      text-align: center;
      padding: 1rem;
      margin-bottom: 1rem;
      border-radius: 8px;
    }
    .settled-result.winner { background: rgba(63, 185, 80, 0.2); color: var(--bid-color); }
    .settled-result.loser { background: rgba(248, 81, 73, 0.2); color: var(--ask-color); }


/* ===========================================
   Order Page
   =========================================== */
.order-detail {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .detail-section {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 1.5rem;
    }

    .detail-section h2 {
      margin: 0 0 1rem;
      font-size: 1rem;
      color: var(--text-secondary);
    }

    .order-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1.5rem;
    }

    .order-id {
      display: flex;
      flex-direction: column;
    }

    .id-label {
      font-size: 0.75rem;
      color: var(--text-muted);
      text-transform: none;
    }

    .id-value {
      font-family: var(--font-mono);
      font-size: 1.25rem;
      color: var(--text-primary);
      word-break: break-all;
    }

    .status-badge.large {
      padding: 0.5rem 1rem;
      font-size: 0.9rem;
    }

    .order-info-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 1rem;
    }

    .info-item {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }

    .info-item label {
      font-size: 0.75rem;
      color: var(--text-muted);
      text-transform: none;
    }

    .info-item span,
    .info-item a {
      font-weight: 600;
      color: var(--text-primary);
    }

    .info-item a {
      color: var(--accent-primary);
      text-decoration: none;
    }

    .info-item a:hover {
      text-decoration: underline;
    }

    .mono {
      font-family: var(--font-mono);
    }

    .side-buy, .side-bid {
      color: var(--accent-green);
    }

    .side-sell, .side-ask {
      color: var(--accent-red);
    }

    .fill-progress {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .progress-bar {
      height: 8px;
      background: var(--bg-tertiary);
      border-radius: 4px;
      overflow: hidden;
    }

    .progress-fill {
      height: 100%;
      background: var(--accent-green);
      transition: width 0.3s;
    }

    .progress-text {
      display: flex;
      justify-content: space-between;
      font-size: 0.875rem;
      color: var(--text-muted);
    }

    .time-cell {
      font-size: 0.85rem;
      color: var(--text-muted);
      white-space: nowrap;
    }

    .timeline {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .timeline-item {
      display: flex;
      gap: 1rem;
      padding: 0.75rem 0;
      position: relative;
    }

    .timeline-item:not(:last-child)::before {
      content: '';
      position: absolute;
      left: 7px;
      top: 28px;
      bottom: 0;
      width: 2px;
      background: var(--border-color);
    }

    .timeline-dot {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .timeline-dot.created {
      background: var(--accent-primary);
    }

    .timeline-dot.fill {
      background: var(--accent-green);
    }

    .timeline-dot.completed {
      background: var(--accent-gold);
    }

    .timeline-dot.cancelled {
      background: var(--accent-red);
    }

    .timeline-content {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }

    .timeline-label {
      font-weight: 600;
      color: var(--text-primary);
    }

    .timeline-time {
      font-size: 0.8rem;
      color: var(--text-muted);
    }

    .timeline-detail {
      font-size: 0.875rem;
      color: var(--text-secondary);
    }

    .empty-state {
      text-align: center;
      padding: 2rem;
      color: var(--text-muted);
    }

    @media (max-width: 640px) {
      .order-info-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }


/* ===========================================
   About Page
   =========================================== */
.about-content {
      max-width: 800px;
      margin: 0 auto;
      line-height: 1.8;
    }

    .hero-section {
      text-align: center;
      padding: 3rem 0;
      margin-bottom: 2rem;
      border-bottom: 1px solid var(--border-color);
      background: radial-gradient(ellipse at 50% 0%, rgba(240, 192, 64, 0.06) 0%, transparent 70%);
    }

    .hero-section h1 {
      font-family: var(--font-heading);
      font-size: clamp(2rem, 5vw, 2.75rem);
      font-weight: 700;
      margin-bottom: 0.5rem;
      color: var(--accent-primary);
    }

    .hero-tagline {
      font-size: 1.25rem;
      color: var(--text-secondary);
      line-height: 1.8;
    }

.about-content h1,
    .about-content h2 {
      margin-top: 2.5rem;
      color: var(--text-primary);
      border-bottom: 1px solid var(--accent-primary);
      padding-bottom: 0.5rem;
      font-family: var(--font-heading);
      font-size: 1.75rem;
      font-weight: 700;
    }

    .about-content p {
      color: var(--text-secondary);
      margin: 1rem 0;
      font-size: 1rem;
      line-height: 1.8;
    }

    .about-content ul {
      color: var(--text-secondary);
      margin: 1rem 0;
      padding-left: 1.5rem;
    }

    .about-content li {
      margin: 0.75rem 0;
    }

    .about-content code {
      background: var(--bg-tertiary);
      padding: 0.2rem 0.5rem;
      border-radius: 4px;
      font-size: 0.9em;
      color: var(--accent-primary);
    }

    .about-content a {
      color: var(--accent-primary);
      text-decoration: none;
    }

    .about-content a:hover {
      text-decoration: underline;
    }

    .example-box {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-left: 3px solid #a08020;
      border-radius: 0 6px 6px 0;
      padding: 1.5rem;
      margin: 1.5rem 0;
    }

    .example-box h4 {
      margin: 0 0 0.75rem 0;
      color: var(--accent-primary);
      font-size: 0.9rem;
      text-transform: none;
      letter-spacing: normal;
    }

    .example-box p {
      margin: 0.5rem 0;
    }

    .example-box ul {
      margin: 0.5rem 0;
    }

    .future-section {
      margin-top: 0;
    }

    .future-section h2 {
      margin-top: 2.5rem;
    }

    .future-section h3 {
      color: var(--text-secondary);
      font-size: 1rem;
      margin: 1.5rem 0 0.5rem 0;
    }

    .future-section h3:first-of-type {
      margin-top: 1rem;
    }


/* ===========================================
   Settled Markets Page
   =========================================== */
.stats-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    .stat-card {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 1rem;
      text-align: center;
    }

    .stat-card.positive {
      border-color: var(--accent-green);
    }

    .stat-card.negative {
      border-color: var(--accent-red);
    }

    .stat-value {
      font-size: 1.5rem;
      font-weight: 700;
      font-family: var(--font-mono);
      color: var(--text-primary);
    }

    .stat-card.positive .stat-value {
      color: var(--accent-green);
    }

    .stat-card.negative .stat-value {
      color: var(--accent-red);
    }

    .stat-label {
      font-size: 0.75rem;
      color: var(--text-muted);
      margin-top: 0.25rem;
      text-transform: none;
      letter-spacing: normal;
    }

    .settled-markets-list {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .settled-market-card {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 1.25rem;
    }

    .settled-market-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 1rem;
      margin-bottom: 0.75rem;
    }

    .market-title-link {
      font-weight: 600;
      color: var(--accent-primary);
      text-decoration: none;
    }

    .market-title-link:hover {
      text-decoration: underline;
    }

    .creator-info {
      font-size: 0.8rem;
      color: var(--text-muted);
      white-space: nowrap;
    }

    .reputation-badge {
      display: inline-block;
      padding: 0.125rem 0.375rem;
      border-radius: 4px;
      font-size: 0.75rem;
      font-weight: 600;
      margin-left: 0.25rem;
    }

    .reputation-badge.positive {
      background: rgba(34, 197, 94, 0.15);
      color: var(--accent-green);
    }

    .reputation-badge.negative {
      background: rgba(255, 68, 68, 0.15);
      color: var(--accent-red);
    }

    .settled-market-result {
      margin-bottom: 0.75rem;
      color: var(--text-secondary);
    }

    .pnl-section {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.5rem;
    }

    .pnl-label {
      color: var(--text-muted);
    }

    .pnl-value {
      font-weight: 600;
      font-family: var(--font-mono);
    }

    .pnl-value.positive {
      color: var(--accent-green);
    }

    .pnl-value.negative {
      color: var(--accent-red);
    }

    .pnl-breakdown {
      display: flex;
      gap: 1rem;
      font-size: 0.8rem;
      color: var(--text-muted);
      margin-bottom: 1rem;
    }

    .feedback-section {
      padding-top: 1rem;
      border-top: 1px solid var(--border-color);
    }

    .feedback-label {
      display: block;
      font-size: 0.85rem;
      color: var(--text-secondary);
      margin-bottom: 0.5rem;
    }

    .feedback-buttons {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 0.5rem;
    }

    .feedback-btn {
      padding: 0.4rem 1rem;
      border-radius: 4px;
      font-size: 0.85rem;
      cursor: pointer;
      border: 1px solid var(--border-color);
      background: var(--bg-primary);
      color: var(--text-secondary);
      transition: all 0.2s;
    }

    .feedback-btn:hover:not(:disabled) {
      border-color: var(--text-secondary);
    }

    .feedback-btn.agree.active {
      background: rgba(34, 197, 94, 0.15);
      border-color: var(--accent-green);
      color: var(--accent-green);
    }

    .feedback-btn.disagree.active {
      background: rgba(255, 68, 68, 0.15);
      border-color: var(--accent-red);
      color: var(--accent-red);
    }

    .feedback-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .feedback-status {
      font-size: 0.8rem;
      color: var(--text-muted);
    }


/* ===========================================
   Transactions Page
   =========================================== */
.history-filters {
      margin-bottom: 1rem;
    }

    .filter-tabs {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
    }

    .filter-tab {
      padding: 0.5rem 1rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      color: var(--text-secondary);
      cursor: pointer;
      font-size: 0.85rem;
      transition: all 0.2s;
    }

    .filter-tab:hover {
      border-color: var(--accent-primary);
    }

    .filter-tab.active {
      background: var(--accent-primary);
      border-color: var(--accent-primary);
      color: #000;
    }

    .filter-count {
      opacity: 0.7;
      font-size: 0.8em;
      margin-left: 0.25rem;
    }

    .results-info {
      padding: 0.5rem 0;
      font-size: 0.85rem;
      color: var(--text-muted);
    }

    .transactions-list {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .transaction-row {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 6px;
    }

    .transaction-row.positive {
      border-left: 3px solid var(--accent-green);
    }

    .transaction-row.negative {
      border-left: 3px solid var(--accent-red);
    }

    .tx-icon {
      font-size: 1.5rem;
      width: 2.5rem;
      text-align: center;
    }

    .tx-details {
      flex: 1;
      min-width: 0;
    }

    .tx-description {
      font-weight: 500;
      color: var(--text-primary);
      margin-bottom: 0.25rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .tx-meta {
      font-size: 0.8rem;
      color: var(--text-muted);
      display: flex;
      gap: 1rem;
    }

    .tx-type {
      text-transform: capitalize;
    }

    .tx-amount {
      text-align: right;
      white-space: nowrap;
    }

    .amount-value {
      font-weight: 600;
      font-size: 1.1rem;
      font-family: var(--font-mono);
    }

    .amount-value.positive {
      color: var(--accent-green);
    }

    .amount-value.negative {
      color: var(--accent-red);
    }

    .point-symbol {
      font-size: 0.9em;
      margin-left: 0.25rem;
    }

    .balance-after {
      display: block;
      font-size: 0.75rem;
      color: var(--text-muted);
      margin-top: 0.25rem;
    }

    .pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1rem;
      margin-top: 1.5rem;
      padding-top: 1rem;
      border-top: 1px solid var(--border-color);
    }

    .page-btn {
      padding: 0.5rem 1rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.2s;
    }

    .page-btn:hover:not(:disabled) {
      border-color: var(--accent-primary);
      color: var(--accent-primary);
    }

    .page-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .page-info {
      font-family: var(--font-mono);
      font-size: 0.9rem;
      color: var(--text-muted);
    }


/* ===========================================
   Order History Page
   =========================================== */
.history-filters {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-bottom: 1rem;
    }

    .search-box input {
      width: 100%;
      padding: 0.75rem 1rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      color: var(--text-primary);
      font-size: 0.9rem;
    }

    .search-box input:focus {
      outline: none;
      border-color: var(--accent-primary);
    }

    .search-box input::placeholder {
      color: var(--text-muted);
    }

    .filter-tabs {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
    }

    .filter-tab {
      padding: 0.5rem 1rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      color: var(--text-secondary);
      cursor: pointer;
      font-size: 0.85rem;
      transition: all 0.2s;
    }

    .filter-tab:hover {
      border-color: var(--accent-primary);
    }

    .filter-tab.active {
      background: var(--accent-primary);
      border-color: var(--accent-primary);
      color: #000;
    }

    .filter-count {
      opacity: 0.7;
      font-size: 0.8em;
      margin-left: 0.25rem;
    }

    .side-filter {
      display: flex;
      gap: 0.5rem;
    }

    .side-btn {
      padding: 0.4rem 0.8rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      color: var(--text-secondary);
      cursor: pointer;
      font-size: 0.8rem;
    }

    .side-btn.active {
      border-color: var(--text-primary);
      color: var(--text-primary);
    }

    .side-btn.buy.active, .side-btn.bid.active {
      border-color: var(--accent-green);
      color: var(--accent-green);
    }

    .side-btn.sell.active, .side-btn.ask.active {
      border-color: var(--accent-red);
      color: var(--accent-red);
    }

    .results-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.5rem 0;
      font-size: 0.85rem;
      color: var(--text-muted);
    }

    .clear-search {
      color: var(--accent-primary);
      cursor: pointer;
    }

    .clear-search:hover {
      text-decoration: underline;
    }

    .time-cell {
      font-size: 0.8rem;
      color: var(--text-muted);
      white-space: nowrap;
    }

    .order-link {
      font-family: var(--font-mono);
      font-size: 0.85rem;
      color: var(--accent-primary);
      text-decoration: none;
    }

    .order-link:hover {
      text-decoration: underline;
    }

    .pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1rem;
      margin-top: 1.5rem;
      padding-top: 1rem;
      border-top: 1px solid var(--border-color);
    }

    .page-btn {
      padding: 0.5rem 1rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.2s;
    }

    .page-btn:hover:not(:disabled) {
      border-color: var(--accent-primary);
      color: var(--accent-primary);
    }

    .page-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .page-info {
      font-family: var(--font-mono);
      font-size: 0.9rem;
      color: var(--text-muted);
    }


/* ===========================================
   Goose Page
   =========================================== */
.goose-page {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .goose-header-section {
      background: var(--bg-secondary);
      border-radius: 8px;
      padding: 1.5rem;
    }

    .goose-description {
      color: var(--text-secondary);
      margin: 0 0 1rem 0;
    }

    .goose-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      color: var(--text-muted);
      font-size: 0.875rem;
    }

    .goose-summary {
      text-align: center;
      padding: 1rem;
      border-radius: 8px;
    }

    .summary-ok {
      background: rgba(34, 197, 94, 0.1);
      border: 1px solid var(--accent-green);
      color: var(--accent-green);
      font-weight: 600;
    }

    .summary-error {
      background: rgba(255, 68, 68, 0.1);
      border: 1px solid var(--accent-red);
      color: var(--accent-red);
      font-weight: 600;
    }

    .goose-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1rem;
    }

    .goose-card {
      background: var(--bg-secondary);
      border-radius: 8px;
      padding: 1.25rem;
      border-left: 4px solid var(--border-color);
    }

    .goose-card.healthy {
      border-left-color: var(--accent-green);
    }

    .goose-card.unhealthy {
      border-left-color: var(--accent-red);
      background: rgba(255, 68, 68, 0.05);
    }

    .card-header {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.75rem;
    }

    .card-icon {
      font-size: 1.25rem;
      font-weight: bold;
    }

    .goose-card.healthy .card-icon {
      color: var(--accent-green);
    }

    .goose-card.unhealthy .card-icon {
      color: var(--accent-red);
    }

    .card-name {
      font-weight: 600;
      font-size: 1.1rem;
    }

    .card-message {
      font-size: 0.875rem;
      color: var(--text-secondary);
      margin-bottom: 0.5rem;
      word-break: break-word;
    }

    .card-time {
      font-size: 0.75rem;
      color: var(--text-muted);
    }

    .goose-info {
      background: var(--bg-secondary);
      border-radius: 8px;
      padding: 1.5rem;
      margin-top: 1rem;
    }

    .goose-info h3 {
      margin: 0 0 1rem 0;
      color: var(--text-primary);
    }

    .goose-info ul {
      margin: 0;
      padding-left: 1.5rem;
      color: var(--text-secondary);
    }

    .goose-info li {
      margin: 0.5rem 0;
    }

    .empty-state {
      text-align: center;
      padding: 3rem;
      color: var(--text-muted);
      grid-column: 1 / -1;
    }


/* ===========================================
   Trades Page
   =========================================== */
.history-filters {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-bottom: 1rem;
    }

    .search-box input {
      width: 100%;
      padding: 0.75rem 1rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      color: var(--text-primary);
      font-size: 0.9rem;
    }

    .search-box input:focus {
      outline: none;
      border-color: var(--accent-primary);
    }

    .search-box input::placeholder {
      color: var(--text-muted);
    }

    .side-filter {
      display: flex;
      gap: 0.5rem;
    }

    .side-btn {
      padding: 0.4rem 0.8rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      color: var(--text-secondary);
      cursor: pointer;
      font-size: 0.8rem;
    }

    .side-btn.active {
      border-color: var(--text-primary);
      color: var(--text-primary);
    }

    .side-btn.buy.active, .side-btn.bid.active {
      border-color: var(--accent-green);
      color: var(--accent-green);
    }

    .side-btn.sell.active, .side-btn.ask.active {
      border-color: var(--accent-red);
      color: var(--accent-red);
    }

    .results-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.5rem 0;
      font-size: 0.85rem;
      color: var(--text-muted);
    }

    .clear-search {
      color: var(--accent-primary);
      cursor: pointer;
    }

    .clear-search:hover {
      text-decoration: underline;
    }

    .counterparty-cell {
      font-size: 0.85rem;
      color: var(--text-secondary);
    }

    .time-cell {
      font-size: 0.8rem;
      color: var(--text-muted);
      white-space: nowrap;
    }

    .pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1rem;
      margin-top: 1.5rem;
      padding-top: 1rem;
      border-top: 1px solid var(--border-color);
    }

    .page-btn {
      padding: 0.5rem 1rem;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.2s;
    }

    .page-btn:hover:not(:disabled) {
      border-color: var(--accent-primary);
      color: var(--accent-primary);
    }

    .page-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .page-info {
      font-family: var(--font-mono);
      font-size: 0.9rem;
      color: var(--text-muted);
    }


/* ===========================================
   Error Page
   =========================================== */
.error-container {
      max-width: 600px;
      margin: 2rem auto;
      text-align: center;
    }

    .error-code {
      font-size: 4rem;
      font-weight: 700;
      color: var(--accent-red, #dc3545);
      margin-bottom: 0.5rem;
    }

    .error-message {
      font-size: 1.25rem;
      color: var(--text-secondary);
      margin-bottom: 2rem;
    }

    .error-details {
      text-align: left;
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 1rem;
      margin-bottom: 2rem;
    }

    .error-details summary {
      cursor: pointer;
      font-weight: 600;
      color: var(--text-secondary);
    }

    .error-info {
      margin-top: 1rem;
    }

    .info-row {
      margin-bottom: 0.75rem;
    }

    .info-label {
      display: block;
      font-size: 0.75rem;
      color: var(--text-muted);
      text-transform: none;
      margin-bottom: 0.25rem;
    }

    .info-value {
      font-family: monospace;
      font-size: 0.875rem;
      color: var(--text-primary);
      word-break: break-all;
    }

    pre.info-value {
      background: var(--bg-tertiary, #1a1a1a);
      padding: 0.5rem;
      border-radius: 4px;
      overflow-x: auto;
      white-space: pre-wrap;
      margin: 0;
    }

    .error-actions {
      display: flex;
      gap: 0.75rem;
      justify-content: center;
      flex-wrap: wrap;
    }

    .btn {
      padding: 0.75rem 1.5rem;
      border-radius: 6px;
      font-weight: 600;
      text-decoration: none;
      border: none;
      cursor: pointer;
      font-size: 0.875rem;
    }

    .btn-primary {
      background: var(--accent-green);
      color: white;
    }

    .btn-secondary {
      background: var(--bg-secondary);
      color: var(--text-primary);
      border: 1px solid var(--border-color);
    }

    .btn-report {
      background: var(--accent-blue, #0066cc);
      color: white;
    }

    .btn:hover {
      opacity: 0.9;
    }

    .report-status {
      margin-top: 1rem;
      padding: 0.75rem;
      border-radius: 6px;
      font-size: 0.875rem;
    }

    .report-status.success {
      background: var(--success-bg, #d4edda);
      color: var(--success-color, #155724);
    }

    .report-status.error {
      background: var(--error-bg, #f8d7da);
      color: var(--error-color, #721c24);
    }


/* ===========================================
   Claim Page
   =========================================== */
.claim-container {
      max-width: 400px;
      margin: 2rem auto;
      padding: 2rem;
      background: var(--bg-secondary);
      border-radius: 8px;
      border: 1px solid var(--border-color);
    }

    .claim-container h2 {
      margin-bottom: 0.5rem;
    }

    .invite-info {
      background: var(--bg-tertiary);
      padding: 1rem;
      border-radius: 6px;
      margin-bottom: 1.5rem;
    }

    .invite-info p {
      margin: 0.25rem 0;
      color: var(--text-secondary);
    }

    .form-row {
      margin-bottom: 1rem;
    }

    .form-row label {
      display: block;
      margin-bottom: 0.5rem;
      color: var(--text-secondary);
      font-size: 0.875rem;
    }

    .form-row input {
      width: 100%;
      padding: 0.75rem;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      color: var(--text-primary);
      font-size: 1rem;
    }

    .form-row input:focus {
      outline: none;
      border-color: var(--accent-blue);
    }

    .phone-input-group {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .country-code-select {
      width: 100%;
      padding: 0.75rem;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      color: var(--text-primary);
      font-size: 0.875rem;
    }

    .phone-input-group input {
      flex: 1;
      min-width: 0;
      width: auto;
    }

    .submit-order {
      width: 100%;
      padding: 0.75rem;
      border: none;
      border-radius: 6px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.15s;
    }

    .submit-order.buy {
      background: var(--accent-green);
      color: #fff;
    }

    .submit-order.buy:hover:not(:disabled) {
      background: #2ea043;
    }

    .submit-order:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .secondary-btn {
      width: 100%;
      padding: 0.5rem;
      background: transparent;
      border: 1px solid var(--border-color);
      border-radius: 6px;
      color: var(--text-secondary);
      font-size: 0.875rem;
      cursor: pointer;
    }

    .secondary-btn:hover {
      background: var(--bg-tertiary);
    }


/* ===========================================
   Scoreboard Page
   =========================================== */
.point-type-selector {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.point-type-btn {
  padding: 0.5rem 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.15s;
}

.point-type-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.point-type-btn.active {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #fff;
}

/* ═══════════════════════════════════════════════════
   SCOREBOARD
   ═══════════════════════════════════════════════════ */

.scoreboard-title {
  font-family: var(--font-logo);
  font-size: 2.4rem;
  letter-spacing: 0.05em;
  text-transform: none;
  color: #fff;
  margin-bottom: 0.25rem;
}

/* Match bar */
.sb-match-bar {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(180deg, rgba(15, 19, 25, 0.95) 0%, rgba(10, 13, 19, 0.98) 100%);
  border: 1px solid rgba(16, 185, 129, 0.15);
  border-radius: 2px;
  margin-bottom: 1.5rem;
  position: relative;
}

.sb-match-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.5), transparent);
}

.sb-match-stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.sb-match-label {
  font-size: 0.65rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-muted);
  font-weight: 600;
}

.sb-match-value {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  text-shadow: none;
}

.sb-sort-tabs {
  display: flex;
  gap: 0;
  margin-left: auto;
}

.sb-sort-tab {
  background: transparent;
  border: 1px solid rgba(16, 185, 129, 0.2);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: all 0.2s;
}

.sb-sort-tab:first-child { border-radius: 2px 0 0 2px; }
.sb-sort-tab:last-child { border-radius: 0 2px 2px 0; }
.sb-sort-tab + .sb-sort-tab { border-left: none; }

.sb-sort-tab:hover {
  color: #fff;
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.4);
}

.sb-sort-tab.active {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.6);
  color: var(--accent-primary);
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.15), inset 0 0 15px rgba(16, 185, 129, 0.05);
}

/* Awards/Badges — medal cards */
.sb-badges {
  margin-bottom: 1.5rem;
}

.sb-badges-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  padding-left: 0.25rem;
}

.sb-badges-grid {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(16, 185, 129, 0.2) transparent;
}

.sb-badge {
  flex: 0 0 auto;
  min-width: 190px;
  padding: 1rem 1.25rem;
  background: linear-gradient(180deg, rgba(21, 27, 36, 0.9) 0%, rgba(15, 19, 25, 0.95) 100%);
  border: 1px solid rgba(240, 192, 64, 0.2);
  border-radius: 3px;
  border-top: 3px solid var(--accent-gold);
  position: relative;
  overflow: hidden;
}

.sb-badge::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(180deg, rgba(240, 192, 64, 0.06) 0%, transparent 100%);
  pointer-events: none;
}

.sb-badge--best {
  border-top-color: var(--accent-gold);
  border-color: rgba(240, 192, 64, 0.2);
  box-shadow: 0 0 20px rgba(240, 192, 64, 0.08), inset 0 0 30px rgba(240, 192, 64, 0.02);
}

.sb-badge--most {
  border-top-color: var(--accent-primary);
  border-color: rgba(16, 185, 129, 0.2);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.08), inset 0 0 30px rgba(16, 185, 129, 0.02);
}
.sb-badge--most::after { background: linear-gradient(180deg, rgba(16, 185, 129, 0.06) 0%, transparent 100%); }

.sb-badge--hot {
  border-top-color: #ef4444;
  border-color: rgba(239, 68, 68, 0.2);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.08), inset 0 0 30px rgba(239, 68, 68, 0.02);
}
.sb-badge--hot::after { background: linear-gradient(180deg, rgba(239, 68, 68, 0.06) 0%, transparent 100%); }

.sb-badge--sharpshooter {
  border-top-color: var(--accent-green);
  border-color: rgba(34, 197, 94, 0.2);
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.08), inset 0 0 30px rgba(34, 197, 94, 0.02);
}
.sb-badge--sharpshooter::after { background: linear-gradient(180deg, rgba(34, 197, 94, 0.06) 0%, transparent 100%); }

.sb-badge--high {
  border-top-color: #8b5cf6;
  border-color: rgba(139, 92, 246, 0.2);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.08), inset 0 0 30px rgba(139, 92, 246, 0.02);
}
.sb-badge--high::after { background: linear-gradient(180deg, rgba(139, 92, 246, 0.06) 0%, transparent 100%); }

.sb-badge-title {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
  color: var(--accent-gold);
  margin-bottom: 0.4rem;
  position: relative;
  z-index: 1;
}

.sb-badge--most .sb-badge-title { color: var(--accent-primary); }
.sb-badge--hot .sb-badge-title { color: #ef4444; }
.sb-badge--sharpshooter .sb-badge-title { color: var(--accent-green); }
.sb-badge--high .sb-badge-title { color: #8b5cf6; }

.sb-badge-player {
  font-weight: 800;
  font-size: 1.1rem;
  color: #fff;
  position: relative;
  z-index: 1;
}

.sb-badge-detail {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
  position: relative;
  z-index: 1;
}

/* Scoreboard table */
.sb-table {
  background: rgba(10, 13, 19, 0.9);
  border: 1px solid rgba(16, 185, 129, 0.1);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.sb-table::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.4), transparent);
}

.sb-header {
  display: grid;
  grid-template-columns: 52px 1fr 130px 130px 120px;
  padding: 0.75rem 1.25rem;
  background: rgba(16, 185, 129, 0.04);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 700;
  color: rgba(16, 185, 129, 0.5);
  border-bottom: 1px solid rgba(16, 185, 129, 0.1);
}

.sb-row {
  display: grid;
  grid-template-columns: 52px 1fr 130px 130px 120px;
  padding: 0.75rem 1.25rem;
  align-items: center;
  border-top: 1px solid rgba(42, 53, 72, 0.3);
  transition: all 0.2s;
  position: relative;
}

.sb-row:first-of-type {
  border-top: none;
}

.sb-row:hover {
  background: rgba(16, 185, 129, 0.03);
}

/* Top 3 rows */
.sb-row--gold {
  background: linear-gradient(90deg, rgba(240, 192, 64, 0.08) 0%, rgba(240, 192, 64, 0.02) 60%, transparent 100%);
  border-left: 3px solid rgba(240, 192, 64, 0.6);
  border-top-color: rgba(240, 192, 64, 0.15);
}

.sb-row--gold:hover {
  background: linear-gradient(90deg, rgba(240, 192, 64, 0.12) 0%, rgba(240, 192, 64, 0.04) 60%, transparent 100%);
}

.sb-row--gold .sb-rank {
  color: #f0c040;
  font-size: 1.1rem;
  font-weight: 700;
  text-shadow: none;
}

.sb-row--gold .sb-player-name {
  color: #f0c040;
  text-shadow: none;
}

.sb-row--silver {
  background: linear-gradient(90deg, rgba(192, 192, 192, 0.06) 0%, rgba(192, 192, 192, 0.01) 60%, transparent 100%);
  border-left: 3px solid rgba(192, 192, 192, 0.4);
  border-top-color: rgba(192, 192, 192, 0.1);
}

.sb-row--silver:hover {
  background: linear-gradient(90deg, rgba(192, 192, 192, 0.1) 0%, rgba(192, 192, 192, 0.03) 60%, transparent 100%);
}

.sb-row--silver .sb-rank {
  color: #e0e0e0;
  font-size: 1rem;
  font-weight: 800;
  text-shadow: none;
}

.sb-row--silver .sb-player-name {
  color: #e0e0e0;
}

.sb-row--bronze {
  background: linear-gradient(90deg, rgba(205, 127, 50, 0.06) 0%, rgba(205, 127, 50, 0.01) 60%, transparent 100%);
  border-left: 3px solid rgba(205, 127, 50, 0.4);
  border-top-color: rgba(205, 127, 50, 0.1);
}

.sb-row--bronze:hover {
  background: linear-gradient(90deg, rgba(205, 127, 50, 0.1) 0%, rgba(205, 127, 50, 0.03) 60%, transparent 100%);
}

.sb-row--bronze .sb-rank {
  color: #cd7f32;
  font-size: 1rem;
  font-weight: 800;
  text-shadow: none;
}

.sb-row--bronze .sb-player-name {
  color: #cd7f32;
}

.sb-rank {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.sb-player-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

.sb-stat-win, .sb-stat-loss {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
}

.sb-stat-count {
  font-weight: 800;
  font-size: 0.95rem;
}

.sb-stat-win .sb-stat-count {
  color: var(--accent-green);
  text-shadow: none;
}

.sb-stat-loss .sb-stat-count {
  color: var(--accent-red);
  text-shadow: none;
}

.sb-stat-amount {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.sb-col-net {
  text-align: right;
}

.sb-net {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.95rem;
}

.sb-net--pos {
  color: var(--accent-green);
  text-shadow: none;
}

.sb-net--neg {
  color: var(--accent-red);
  text-shadow: none;
}

.sb-net-symbol {
  color: var(--text-muted);
  font-size: 0.75rem;
  margin-left: 0.25rem;
}

/* Mobile */
@media (max-width: 640px) {
  .scoreboard-title {
    font-size: 1.8rem;
    letter-spacing: 0.05em;
  }

  .sb-header, .sb-row {
    grid-template-columns: 36px 1fr 90px 90px 80px;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
  }

  .sb-match-bar {
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.75rem 1rem;
  }

  .sb-badges-grid {
    gap: 0.5rem;
  }

  .sb-badge {
    min-width: 160px;
  }

  .sb-stat-amount {
    font-size: 0.65rem;
  }
}

@media (max-width: 480px) {
  .scoreboard-title {
    font-size: 1.4rem;
    letter-spacing: 0.03em;
  }

  .sb-header, .sb-row {
    grid-template-columns: 30px 1fr 75px 75px 65px;
    font-size: 0.75rem;
    gap: 0.1rem;
    padding: 0.5rem;
  }

  .sb-stat-win, .sb-stat-loss {
    font-size: 0.75rem;
  }

  .sb-stat-count {
    font-size: 0.8rem;
  }

  .sb-badge {
    min-width: 140px;
    padding: 0.75rem;
  }
}

    .empty-state {
      text-align: center;
      padding: 3rem;
      color: var(--text-secondary);
    }


/* ===========================================
   Health Page
   =========================================== */
.health-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 1rem;
      margin-bottom: 2rem;
    }
    .health-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 1rem;
    }
    .health-card h3 {
      margin: 0 0 0.75rem 0;
      font-size: 0.9rem;
      color: var(--text-secondary);
      text-transform: none;
      letter-spacing: normal;
    }
    .stat-row {
      display: flex;
      justify-content: space-between;
      padding: 0.25rem 0;
      border-bottom: 1px solid var(--border-color);
    }
    .stat-row:last-child {
      border-bottom: none;
    }
    .stat-label {
      color: var(--text-secondary);
    }
    .stat-value {
      font-family: monospace;
      color: var(--text-primary);
    }
    .stat-value.good {
      color: var(--color-success);
    }
    .stat-value.warn {
      color: var(--color-warning);
    }
    .stat-value.bad {
      color: var(--color-error);
    }
    .connection-list {
      max-height: 200px;
      overflow-y: auto;
    }
    .connection-item {
      display: flex;
      justify-content: space-between;
      padding: 0.25rem 0;
      font-size: 0.85rem;
      border-bottom: 1px solid var(--border-color);
    }
    .book-table {
      width: 100%;
      font-size: 0.85rem;
    }
    .book-table th {
      text-align: left;
      padding: 0.25rem;
      border-bottom: 1px solid var(--border-color);
      color: var(--text-secondary);
    }
    .book-table td {
      padding: 0.25rem;
    }
    .error-item {
      padding: 0.5rem;
      margin-bottom: 0.5rem;
      background: rgba(255, 100, 100, 0.1);
      border-radius: 4px;
      font-size: 0.85rem;
    }
    .refresh-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
      padding: 0.5rem;
      background: var(--bg-card);
      border-radius: 4px;
    }
    .auto-refresh {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.85rem;
    }


/* ===========================================
   Models Page
   =========================================== */
.model-section {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 1.5rem;
      margin-bottom: 1.5rem;
    }

    .model-header {
      margin-bottom: 0.75rem;
    }

    .model-header h2 {
      margin: 0;
      font-size: 1.25rem;
    }

    .model-description {
      color: var(--text-secondary);
      font-size: 0.9rem;
      margin-bottom: 1.5rem;
    }

    .model-params {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .param-row {
      display: grid;
      grid-template-columns: 180px 100px 1fr;
      gap: 1rem;
      align-items: center;
    }

    @media (max-width: 640px) {
      .param-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
      }
    }

    .param-row label {
      font-weight: 600;
      color: var(--text-primary);
    }

    .param-row input {
      padding: 0.5rem;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      color: var(--text-primary);
      font-family: var(--font-mono);
      text-align: right;
    }

    .param-row input:focus {
      outline: none;
      border-color: var(--accent-primary);
    }

    .param-hint {
      font-size: 0.8rem;
      color: var(--text-muted);
    }

    .save-status {
      padding: 0.75rem;
      background: rgba(34, 197, 94, 0.1);
      border: 1px solid var(--accent-green);
      border-radius: 4px;
      text-align: center;
      color: var(--accent-green);
    }

    .model-example {
      margin-top: 1.5rem;
      padding: 1rem;
      background: var(--bg-tertiary);
      border-radius: 6px;
      border-left: 3px solid var(--accent-blue);
    }

    .model-example h4 {
      margin: 0 0 0.75rem 0;
      font-size: 0.9rem;
      color: var(--text-secondary);
    }

    .example-text {
      margin: 0.25rem 0;
      font-size: 0.85rem;
      color: var(--text-primary);
      font-family: var(--font-mono);
    }


/* ===========================================
   Login Page
   =========================================== */
.login-container {
      max-width: 400px;
      margin: 2rem auto;
      padding: 2rem;
      background: var(--bg-secondary);
      border-radius: 8px;
      border: 1px solid var(--border-color);
    }

    .login-container h2 {
      margin-bottom: 0.5rem;
    }

    .form-row {
      margin-bottom: 1rem;
    }

    .form-row label {
      display: block;
      margin-bottom: 0.5rem;
      color: var(--text-secondary);
      font-size: 0.875rem;
    }

    .form-row input {
      width: 100%;
      padding: 0.75rem;
      background: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      color: var(--text-primary);
      font-size: 1rem;
    }

    .form-row input:focus {
      outline: none;
      border-color: var(--accent-blue);
    }

    .submit-order {
      width: 100%;
      padding: 0.75rem;
      border: none;
      border-radius: 6px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.15s;
    }

    .submit-order.buy {
      background: var(--accent-green);
      color: #fff;
    }

    .submit-order.buy:hover:not(:disabled) {
      background: #2ea043;
    }

    .submit-order:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }


/* ===========================================
   Preferences Page
   =========================================== */
.preferences-form {
      max-width: 400px;
      margin: 2rem auto;
      padding: 1.5rem;
      background: var(--card-bg);
      border-radius: 8px;
    }

    .form-group {
      margin-bottom: 1.5rem;
    }

    .form-group label {
      display: block;
      margin-bottom: 0.5rem;
      font-weight: 600;
    }

    .form-group input {
      width: 100%;
      padding: 0.75rem;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      font-size: 1rem;
      background: var(--bg-color);
      color: var(--text-color);
    }

    .form-hint {
      margin-top: 0.5rem;
      font-size: 0.85rem;
      color: var(--text-muted);
    }

    .save-status {
      padding: 0.75rem;
      background: var(--success-bg, #d4edda);
      color: var(--success-color, #155724);
      border-radius: 4px;
      text-align: center;
    }


/* ===========================================
   Positions Page
   =========================================== */
.positions-summary {
      display: flex;
      gap: 1.5rem;
      margin-bottom: 1.5rem;
      flex-wrap: wrap;
    }

    .summary-stat {
      background: var(--bg-secondary);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      padding: 1rem 1.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .summary-value {
      font-family: var(--font-mono);
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--text-primary);
    }

    .summary-value.positive { color: var(--accent-green); }
    .summary-value.negative { color: var(--accent-red); }

    .summary-label {
      font-size: 0.75rem;
      color: var(--text-muted);
      text-transform: none;
      letter-spacing: normal;
    }

    /* Admin Invite QR */
    .invite-gen-form {
      max-width: 400px;
    }
    .invite-gen-form .form-group {
      margin-bottom: 1rem;
    }
    .invite-gen-form label {
      display: block;
      margin-bottom: 0.25rem;
      color: var(--text-secondary);
      font-size: 0.85rem;
    }
    .invite-gen-form input {
      width: 100%;
      padding: 0.5rem;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      background: var(--bg-secondary);
      color: var(--text-primary);
      font-size: 1rem;
    }
    .invite-qr-result {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }
    .qr-card {
      background: #fff;
      border-radius: 12px;
      padding: 1.5rem;
      text-align: center;
      max-width: 320px;
    }
    .qr-card svg {
      display: block;
      margin: 0 auto;
    }
    .qr-name {
      font-size: 1.1rem;
      font-weight: 600;
      color: #111;
      margin-bottom: 0.75rem;
    }
    .qr-url {
      font-size: 0.7rem;
      color: #666;
      margin-top: 0.75rem;
      word-break: break-all;
    }
    .qr-actions {
      display: flex;
      gap: 0.75rem;
    }
    .invite-list-admin {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }
    .invite-list-item {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 0.5rem 0.75rem;
      border-radius: 4px;
      background: var(--bg-secondary);
    }
    .invite-list-item.claimed {
      opacity: 0.6;
    }
    .invite-list-item .inv-name {
      font-weight: 600;
      min-width: 120px;
    }
    .invite-list-item .inv-amount {
      color: var(--text-muted);
      font-size: 0.85rem;
    }
    .invite-list-item .inv-status {
      margin-left: auto;
      font-size: 0.8rem;
      color: var(--text-muted);
    }
    .invite-list-item.claimed .inv-status {
      color: var(--accent-green);
    }