@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@400;600;700&family=Share+Tech+Mono&family=Rajdhani:wght@400;600;700&display=swap');

/* ══════════════════════════════════════════════════════════════════
   CARBON HOME — design5 theme applied to home-new.php
   ══════════════════════════════════════════════════════════════════ */

:root {
  --ch-ats:        #d4812a;
  --ch-ats-dim:    #8a4f12;
  --ch-ets:        #5b9ec9;
  --ch-ets-dim:    #3a6f92;
  --ch-dark:       #0d0d0e;
  --ch-mid:        #161718;
  --ch-light:      #1e2022;
  --ch-chrome:     #c8d8e0;
  --ch-chrome-dim: #8fa4ae;
  --ch-border:     rgba(200,216,224,.08);
  --ch-text:       #dce8ed;
  --ch-text-dim:   #7a9aaa;
  --ch-text-muted: #79858B;
  --ch-tech:       'Oxanium', sans-serif;
  --ch-mono:       'Share Tech Mono', monospace;
  --ch-disp:       'Rajdhani', sans-serif;
}

.d5-page {
  color: var(--d5-text);
  font-family: var(--d5-disp);
  padding: 20px 24px 40px;
  min-height: 100vh;
}

/* ══════════════════════════════════════════════════════════════════
   PROFILE CARD
   ══════════════════════════════════════════════════════════════════ */
.profile-card {
  background: linear-gradient(160deg, var(--ch-light), var(--ch-mid)) !important;
  border: 1px solid var(--ch-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05) !important;
  padding: 0 !important;
  overflow: hidden;
  position: relative;
  margin-bottom: 16px;
}

/* Orange top stripe */
.profile-card::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--ch-ats-dim), var(--ch-ats) 40%, var(--ch-ats-dim));
  box-shadow: 0 0 16px rgba(212,129,42,.4);
}

.profile-left {
  padding: 3px 5px 3px !important;
  gap: 18px !important;
}

.profile-avatar {
  width: auto !important;
  height: 220px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(212,129,42,.35) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.4), 0 0 24px rgba(212,129,42,.15) !important;
  object-fit: cover;
  flex-shrink: 0;
}

/* Name */
.profile-left h3 {
  font-family: var(--ch-tech) !important;
  font-size: 1.1rem !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--ch-chrome) !important;
  margin-bottom: 6px !important;
}

/* Level badge */
.level-badge {
  font-family: var(--ch-mono) !important;
  font-size: .6rem !important;
  letter-spacing: .12em !important;
  padding: 3px 10px !important;
  border-radius: 2px !important;
  text-transform: uppercase !important;
}

.profile-left .text-light,
.profile-left small {
  color: var(--ch-text-dim) !important;
  font-family: var(--ch-mono) !important;
  font-size: .68rem !important;
}

/* Career panels */
.profile-right {
  background: rgba(0,0,0,.2) !important;
  border: 1px solid var(--ch-border) !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  min-width: 220px;
}

.tsc-stat-career {
  border-bottom: 1px solid var(--ch-border) !important;
}

.current-job {
  font-family: var(--ch-mono) !important;
  font-size: .62rem !important;
  color: var(--ch-text-dim) !important;
  display: block;
  margin-bottom: 3px;
}

.current-job b {
  color: var(--ch-chrome) !important;
}

/* XP Progress bar */
.profile-left .progress {
  background: rgba(255,255,255,.06) !important;
  border-radius: 2px !important;
  height: 6px !important;
}

.profile-left .progress-bar {
  border-radius: 2px !important;
}

.profile-left .progress-bar.bg-info    { background: linear-gradient(90deg, var(--ch-ets-dim), var(--ch-ets)) !important; }
.profile-left .progress-bar.bg-warning { background: linear-gradient(90deg, var(--ch-ats-dim), var(--ch-ats)) !important; }
.profile-left .progress-bar.bg-danger  { background: linear-gradient(90deg, #7a1a1a, #c0392b) !important; }
.profile-left .progress-bar.bg-success { background: linear-gradient(90deg, #1a5a2a, #27ae60) !important; }
.profile-left .progress-bar.bg-primary { background: linear-gradient(90deg, #1a3a7a, #2980b9) !important; }

.profile-left .d-flex.justify-content-between.small span {
  font-family: var(--ch-mono) !important;
  font-size: .58rem !important;
  color: var(--ch-text-muted) !important;
}

/* Divider in profile card */
.profile-left hr {
  border-top: 1px solid var(--ch-border) !important;
  opacity: 1 !important;
}

/* ── Achievement ticker ── */
#atk-outer {
  background: rgba(0,0,0,.2);
  border-radius: 4px;
  height: 75px !important;
}

.atk-card {
  background: linear-gradient(160deg, var(--ch-light), var(--ch-mid)) !important;
  border: 1px solid var(--ch-border) !important;
  border-radius: 4px !important;
  font-family: var(--ch-mono) !important;
  color: var(--ch-text-dim) !important;
  margin-right: 6px;
  transition: transform .15s ease, box-shadow .15s ease;
}

/* Colour accent line on earned */
.atk-card:not(.locked).ats::before {
    content: '';
    position: absolute;
    top: 0; left: 15%; right: 15%; height: 2px;
    background: var(--ats);
    border-radius: 0 0 2px 2px;
    box-shadow: 0 0 8px rgba(212,129,42,.55);
}
.atk-card:not(.locked).ets::before {
    content: '';
    position: absolute;
    top: 0; left: 15%; right: 15%; height: 2px;
    background: var(--ets);
    border-radius: 0 0 2px 2px;
    box-shadow: 0 0 8px rgba(91,158,201,.55);
}

@keyframes pulse-ats {
    0%   { box-shadow: 0 0 4px  rgba(212,129,42,.2); outline-color: rgba(212,129,42,.2); }
    50%  { box-shadow: 0 0 6px rgba(212,129,42,.7); outline-color: rgba(212,129,42,.9); }
    100% { box-shadow: 0 0 4px  rgba(212,129,42,.2); outline-color: rgba(212,129,42,.2); }
}
@keyframes pulse-ets {
    0%   { box-shadow: 0 0 4px  rgba(91,158,201,.2); outline-color: rgba(91,158,201,.2); }
    50%  { box-shadow: 0 0 6px rgba(91,158,201,.7); outline-color: rgba(91,158,201,.9); }
    100% { box-shadow: 0 0 4px  rgba(91,158,201,.2); outline-color: rgba(91,158,201,.2); }
}

.atk-card:not(.locked).ats:hover {
    outline: 1px solid rgba(212,129,42,.2);
    animation: pulse-ats 1.2s ease-in-out infinite;
}
.atk-card:not(.locked).ets:hover {
    outline: 1px solid rgba(91,158,201,.2);
    animation: pulse-ets 1.2s ease-in-out infinite;
}
.atk-card:not(.locked).ats:hover { box-shadow: 0 0 4px rgba(212,129,42,.4); }
.atk-card:not(.locked).ets:hover { box-shadow: 0 0 4px rgba(91,158,201,.4); }

.atk-card.locked { opacity: .45; }

.atk-stripe.ats { background: var(--ch-ats) !important; height: 2px; }
.atk-stripe.ets { background: var(--ch-ets) !important; height: 2px; }

.atk-pip.ats {
  background: linear-gradient(135deg, var(--ch-ats-dim), var(--ch-ats)) !important;
  color: #fff !important;
  border-radius: 2px !important;
  padding: 1px 5px !important;
}

.atk-pip.ets {
  background: linear-gradient(135deg, var(--ch-ets-dim), var(--ch-ets)) !important;
  color: #fff !important;
  border-radius: 2px !important;
  padding: 1px 5px !important;
}

.atk-label { color: var(--ch-chrome) !important; font-family: var(--ch-tech) !important; }
.atk-desc  { color: var(--ch-text-dim) !important; }
.atk-date  { color: var(--ch-text-muted) !important; }

/* ══════════════════════════════════════════════════════════════════
   SECTION DIVIDERS
   ══════════════════════════════════════════════════════════════════ */
.d-flex.align-items-center hr {
  border-color: var(--ch-border) !important;
  opacity: 1 !important;
}

.d-flex.align-items-center h4 {
  font-family: var(--ch-tech) !important;
  font-size: .72rem !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--ch-text-muted) !important;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   TRUCK STAT CARDS
   ══════════════════════════════════════════════════════════════════ */
.truck-stat-card {
  background: linear-gradient(160deg, var(--ch-light), var(--ch-mid)) !important;
  border: 1px solid var(--ch-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04) !important;
  overflow: hidden;
}

.tsc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px !important;
  border-bottom: 1px solid var(--ch-border) !important;
  background: rgba(0,0,0,.2) !important;
}

.tsc-header h5 {
  font-family: var(--ch-tech) !important;
  font-size: .72rem !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--ch-chrome-dim) !important;
  margin: 0 !important;
}

.ats-header { border-top: 2px solid var(--ch-ats) !important; box-shadow: 0 -0px 12px rgba(212,129,42,.15) inset; }
.ets-header { border-top: 2px solid var(--ch-ets) !important; box-shadow: 0 -0px 12px rgba(91,158,201,.15) inset; }

.tsc-game-badge {
  font-family: var(--ch-mono) !important;
  font-size: .58rem !important;
  letter-spacing: .12em !important;
  padding: 3px 8px !important;
  border-radius: 2px !important;
}

.badge-ats { background: linear-gradient(135deg, var(--ch-ats-dim), var(--ch-ats)) !important; color: #fff !important; }
.badge-ets { background: linear-gradient(135deg, var(--ch-ets-dim), var(--ch-ets)) !important; color: #fff !important; }

.tsc-game-badge-career { font-family: var(--ch-mono) !important; font-size: .58rem !important; letter-spacing: .1em; padding: 2px 8px; border-radius: 2px; }
.badge-ats-career { background: linear-gradient(135deg, var(--ch-ats-dim), var(--ch-ats)) !important; color: #fff !important; }
.badge-ets-career { background: linear-gradient(135deg, var(--ch-ets-dim), var(--ch-ets)) !important; color: #fff !important; }

.tsc-truck-name {
  font-family: var(--ch-tech) !important;
  font-size: .78rem !important;
  letter-spacing: .08em !important;
  color: var(--ch-chrome) !important;
}

.tsc-body { background: transparent !important; }

/* Truck image */
.truck-image {
  border-bottom: 1px solid var(--ch-border);
  display: block;
  width: 100%;
}

/* Net profit overlay card */
.stat-card {
  background: linear-gradient(160deg, rgba(30,32,34,.95), rgba(14,15,16,.95)) !important;
  border: 1px solid var(--ch-border) !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  backdrop-filter: blur(8px);
  width: 150px;
}

.sc-main { display: flex; align-items: center; gap: 8px; }

.sc-icon {
  font-size: 1.1rem;
}

.sc-val {
  font-family: var(--ch-tech) !important;
  font-size: 1rem !important;
  color: var(--ch-chrome) !important;
  line-height: 1.1;
}

.sc-label {
  font-family: var(--ch-mono) !important;
  font-size: .52rem !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--ch-text-muted) !important;
}

.sc-delta {
  font-family: var(--ch-mono) !important;
  font-size: .58rem !important;
  margin-top: 3px !important;
}

.sc-delta.arrow-up   { color: #4cad7a !important; }
.sc-delta.arrow-down { color: #e05555 !important; }
.sc-delta.ats-minus,
.sc-delta.ets-minus  { color: var(--ch-text-muted) !important; }

/* Stat rows inside truck card */
.tsc-stats {
  border-top: 1px solid var(--ch-border) !important;
}

.tsc-stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,.03) !important;
}

.tsc-stat-row.top { border-top: none !important; }

.tsc-stat-icon {
  width: 30px;
  height: 30px;
  border-radius: 4px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: .8rem;
}

.tsc-stat-label {
  font-family: var(--ch-mono) !important;
  font-size: .52rem !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--ch-text-muted) !important;
}

.tsc-stat-value {
  font-family: var(--ch-tech) !important;
  font-size: .82rem !important;
  color: var(--ch-chrome) !important;
}

.tsc-stat-sub {
  font-family: var(--ch-mono) !important;
  font-size: .58rem !important;
  color: var(--ch-text-muted) !important;
  margin-left: auto;
}

/* Heaviest load row */
.tsc-heavy-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,.03) !important;
}

.tsc-heavy-label {
  font-family: var(--ch-mono) !important;
  font-size: .52rem !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--ch-text-muted) !important;
}

.tsc-heavy-value {
  font-family: var(--ch-tech) !important;
  font-size: .8rem !important;
}

.tsc-heavy-weight { margin-left: auto; text-align: right; }

.tsc-heavy-wval {
  font-family: var(--ch-tech) !important;
  font-size: .9rem !important;
  line-height: 1;
}

.tsc-heavy-wlbl {
  font-family: var(--ch-mono) !important;
  font-size: .54rem !important;
  color: var(--ch-text-muted) !important;
}

/* Mileage / KM progress section */
.mileage-section { padding: 0 2px 6px; }

.milestone-dots { display: flex; justify-content: space-between; padding: 4px 0 3px; }

.ms-dot-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }

.ms-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ch-border);
  border: 1px solid rgba(255,255,255,.1);
  transition: all .2s;
}

.ats-dot.reached { background: var(--ch-ats) !important; box-shadow: 0 0 6px rgba(212,129,42,.6); }
.ets-dot.reached { background: var(--ch-ets) !important; box-shadow: 0 0 6px rgba(91,158,201,.6); }

.ms-label {
  font-family: var(--ch-mono) !important;
  font-size: .42rem !important;
  color: var(--ch-text-muted) !important;
}

.ms-label.reached { color: var(--ch-text-dim) !important; }

.mile-bar-outer {
  height: 6px !important;
  background: rgba(255,255,255,.06) !important;
  border-radius: 3px !important;
  overflow: visible !important;
  margin: 4px 0 !important;
}

.mile-bar-fill {
  height: 100%;
  border-radius: 3px;
}

.ats-bar { background: linear-gradient(90deg, var(--ch-ats-dim), var(--ch-ats)) !important; box-shadow: 0 0 8px rgba(212,129,42,.4) !important; }
.ets-bar { background: linear-gradient(90deg, var(--ch-ets-dim), var(--ch-ets)) !important; box-shadow: 0 0 8px rgba(91,158,201,.4) !important; }

.ats-bar-today { background: rgba(212,129,42,.3) !important; border-left: 1px solid var(--ch-ats) !important; }
.ets-bar-today { background: rgba(91,158,201,.3) !important; border-left: 1px solid var(--ch-ets) !important; }

.mile-labels {
  display: flex;
  justify-content: space-between;
  position: relative;
  font-family: var(--ch-mono) !important;
  font-size: .6rem !important;
}

.mile-current { font-family: var(--ch-mono) !important; font-size: .62rem !important; }
.ats-accent   { color: var(--ch-ats) !important; }
.ets-accent   { color: var(--ch-ets) !important; }

.mile-togo {
  font-family: var(--ch-mono) !important;
  font-size: .6rem !important;
  color: var(--ch-text-muted) !important;
}

.tsc-stat-row hr,
.tsc-body hr {
  border-color: rgba(212,129,42,.2) !important;
  opacity: 1 !important;
  margin: 4px 5px !important;
}

/* ══════════════════════════════════════════════════════════════════
   STATS BOXES
   ══════════════════════════════════════════════════════════════════ */
.stats-box {
  background: linear-gradient(160deg, var(--ch-light), var(--ch-mid)) !important;
  border: 1px solid var(--ch-border) !important;
  border-radius: 6px !important;
  padding: 10px 8px !important;
  text-align: center;
  font-family: var(--ch-tech) !important;
  font-size: .82rem !important;
  color: var(--ch-chrome) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.3) !important;
  position: relative;
  overflow: hidden;
  transition: transform .15s;
}

.stats-box:hover { transform: translateY(-1px); }

.stats-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}

.stats-box.blue::before   { background: linear-gradient(90deg, transparent, var(--ch-ets), transparent); }
.stats-box.green::before  { background: linear-gradient(90deg, transparent, #4cad7a, transparent); }
.stats-box.yellow::before { background: linear-gradient(90deg, transparent, var(--ch-ats), transparent); }
.stats-box.red::before    { background: linear-gradient(90deg, transparent, #c0392b, transparent); }

.stats-box small {
  font-family: var(--ch-mono) !important;
  font-size: .5rem !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--ch-text-muted) !important;
  display: block;
  margin-top: 2px;
}

.d5-job-panel thead tr:hover,
.d5-job-panel thead tr:hover td,
.d5-job-panel thead tr:hover th {
  background: rgba(0,0,0,.15) !important;
  cursor: default !important;
}

.d5-day-row:hover,
.d5-day-row:hover td {
  background: rgba(0,0,0,.25) !important;
  cursor: default !important;
}

/* Wrap the card in the same panel shell */
.card.text-white.mb-4 {
  background: linear-gradient(160deg, var(--ch-light), var(--ch-mid)) !important;
  border: 1px solid var(--ch-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04) !important;
  overflow: hidden;
}

.card.text-white.mb-4 .card-header {
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--ch-border) !important;
  background: rgba(0,0,0,.2) !important;
}

.card.text-white.mb-4 .card-header h5 {
  font-family: var(--ch-tech) !important;
  font-size: .66rem !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--ch-chrome-dim) !important;
  margin: 0 !important;
}

/* Table itself */
.card.text-white.mb-4 table {
  width: 100%;
  border-collapse: collapse !important;
  font-size: .78rem !important;
}

/* thead */
.card.text-white.mb-4 table thead tr {
  background: rgba(0,0,0,.15) !important;
}

.card.text-white.mb-4 table thead tr:hover,
.card.text-white.mb-4 table thead tr:hover th {
  background: rgba(0,0,0,.15) !important;
  cursor: default !important;
}

.card.text-white.mb-4 table th {
  padding: 9px 14px !important;
  font-family: var(--ch-mono) !important;
  font-size: .48rem !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: var(--ch-chrome-dim) !important;
  border: 1px solid var(--ch-border) !important;
  background: rgba(0,0,0,.15) !important;
  text-align: left !important;
}

/* Day header rows — override inline background-color: #333333 */
.card.text-white.mb-4 table tbody tr[style*="background-color"],
.card.text-white.mb-4 table tbody tr[style*="background-color"]:hover {
  background: rgba(0,0,0,.25) !important;
  cursor: default !important;
}

.card.text-white.mb-4 table tbody tr[style*="background-color"] td {
  padding: 6px 14px !important;
  font-family: var(--ch-mono) !important;
  font-size: .56rem !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: var(--ch-ats) !important;
  border-top: 1px solid rgba(212,129,42,.12) !important;
  border-bottom: 1px solid rgba(212,129,42,.12) !important;
  border-left: none !important;
  border-right: none !important;
}

/* Job rows */
.card.text-white.mb-4 table tbody tr.open-modal {
  cursor: pointer;
  transition: background .12s;
}

.card.text-white.mb-4 table tbody tr.open-modal:hover {
  background: rgba(255,255,255,.025) !important;
}

.card.text-white.mb-4 table tbody tr.open-modal td {
  padding: 9px 14px !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,.03) !important;
  color: var(--ch-text) !important;
  font-size: .78rem !important;
}

/* Job ID cell */
.card.text-white.mb-4 table tbody tr.open-modal td:nth-child(1) {
  font-family: var(--ch-mono) !important;
  font-size: .6rem !important;
  color: var(--ch-text);
  text-align: center !important;
}

/* Journey cell — bold city names */
.card.text-white.mb-4 table tbody tr.open-modal td:nth-child(2) b {
  font-family: var(--ch-tech) !important;
  font-size: .7rem !important;
  color: var(--ch-chrome) !important;
  font-weight: 600 !important;
}

/* Arrow → */
.card.text-white.mb-4 table tbody tr.open-modal td:nth-child(2) {
  color: var(--ch-ats) !important;
  font-family: var(--ch-mono) !important;
  font-size: .62rem !important;
}

/* Cargo cell */
.card.text-white.mb-4 table tbody tr.open-modal td:nth-child(3) {
  font-family: var(--ch-mono) !important;
  font-size: .62rem !important;
  color: var(--ch-text-dim) !important;
  text-align: center !important;
}

/* Driven cell */
.card.text-white.mb-4 table tbody tr.open-modal td:nth-child(4) {
  font-family: var(--ch-tech) !important;
  font-size: .7rem !important;
  color: var(--ch-ats);
  text-align: center !important;
}

/* Time cell */
.card.text-white.mb-4 table tbody tr.open-modal td:nth-child(5) {
  font-family: var(--ch-mono) !important;
  font-size: .62rem !important;
  color: var(--ch-text-dim) !important;
  text-align: center !important;
}

/* No Jobs row */
.card.text-white.mb-4 table tbody tr.open-modal[data-id="000001"] td {
  color: var(--ch-text-muted) !important;
  font-style: italic !important;
  text-align: center !important;
  font-size: .65rem !important;
}

/* ETS2 rows — driven cell in blue */
.card.text-white.mb-4 table tbody tr.open-modal td:nth-child(1)[style*="5A9CC6"],
.card.text-white.mb-4 table tbody tr.open-modal[style*="5A9CC6"] td:nth-child(4) {
  color: var(--ch-ets) !important;
}
/* ══════════════════════════════════════════════════════════════════
   ECONOMY / CHART CARDS
   ══════════════════════════════════════════════════════════════════ */
.card {
  background: linear-gradient(160deg, var(--ch-light), var(--ch-mid)) !important;
  border: 1px solid var(--ch-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04) !important;
  color: var(--ch-text) !important;
  overflow: hidden;
}

.card-header {
  background: rgba(0,0,0,.2) !important;
  border-bottom: 1px solid var(--ch-border) !important;
  padding: 10px 16px !important;
}

.card-header h5 {
  font-family: var(--ch-tech) !important;
  font-size: .7rem !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--ch-chrome-dim) !important;
  margin: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   MODAL TABLES
   ══════════════════════════════════════════════════════════════════ */
.modal-content.bg-custom-modal-dark {
  background: var(--ch-mid) !important;
  border: 1px solid var(--ch-border) !important;
  color: var(--ch-text) !important;
}

.mod-header h6 {
  font-family: var(--ch-tech) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--ch-chrome) !important;
}

.bg-custom-dark { background: var(--ch-dark) !important; }
.bg-custom-cat  { background: rgba(0,0,0,.3) !important; font-family: var(--ch-mono) !important; font-size: .62rem !important; letter-spacing: .12em !important; }
.bg-custom-head { background: rgba(0,0,0,.2) !important; font-family: var(--ch-mono) !important; font-size: .58rem !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--ch-chrome-dim) !important; }
.bg-custom-data { background: transparent !important; font-family: var(--ch-mono) !important; font-size: .68rem !important; color: var(--ch-text) !important; }

/* ══════════════════════════════════════════════════════════════════
   UTILITY
   ══════════════════════════════════════════════════════════════════ */
.text-light { color: var(--ch-text) !important; }

/* Timeago abbr */
abbr.timeago { color: var(--ch-ats) !important; font-style: normal !important; }

@media (max-width: 768px) {
  .profile-left    { flex-direction: column !important; }
  .profile-right   { min-width: 0 !important; width: 100% !important; }
  .d-flex.justify-content-between.align-items-stretch { flex-direction: column !important; gap: 10px !important; }
}