/* ============================================================
   TERMINAL MINIMAL — V2 Design System
   Bachar Nejem Portfolio
   ============================================================ */

/* ── 1. Tokens ─────────────────────────────────────────────── */
:root {
  --bg:       #040408;
  --surface:  #090910;
  --card:     #0c0c14;
  --elevated: #111118;
  --amber:    #ffb400;
  --amber-d:  rgba(255,180,0,0.12);
  --amber-b:  rgba(255,180,0,0.32);
  --green:    #00d67a;
  --green-d:  rgba(0,214,122,0.1);
  --red:      #ff4757;
  --t1:       #e8e8e4;
  --t2:       #8a8a82;
  --t3:       #444440;
  --border:   rgba(255,255,255,0.06);
  --border-m: rgba(255,255,255,0.11);
  --mono:     'JetBrains Mono', 'Fira Code', monospace;
  --sans:     'Space Grotesk', system-ui, sans-serif;
  --ease:     cubic-bezier(0.4,0,0.2,1);
  --spring:   cubic-bezier(0.34,1.56,0.64,1);
}

/* ── Light mode ─────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:       #f5f0e8;
  --surface:  #ede8df;
  --card:     #e6e0d6;
  --elevated: #ddd6c8;
  --amber:    #9a6600;
  --amber-d:  rgba(154,102,0,0.1);
  --amber-b:  rgba(154,102,0,0.28);
  --green:    #006e3c;
  --green-d:  rgba(0,110,60,0.1);
  --red:      #cc2233;
  --t1:       #1a1814;
  --t2:       #5a5650;
  --t3:       #9a9690;
  --border:   rgba(0,0,0,0.09);
  --border-m: rgba(0,0,0,0.15);
}

/* ── 2. Reset & Base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--t1);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
  margin: 0; padding: 0;
}

/* Scanlines — dark only */
body::after {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.025) 2px,
    rgba(0,0,0,0.025) 4px
  );
  pointer-events: none; z-index: 9998;
  opacity: 1;
  transition: opacity 0.3s;
}
[data-theme="light"] body::after { opacity: 0; }

::selection { background: var(--amber); color: #000; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--amber-b); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--amber); }

main, body > .container, body > div:not(#login-popup-container):not(.popup-overlay) {
  flex: 1;
}

/* ── 3. Typography ──────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--t1);
  line-height: 1.2;
  margin-top: 0;
}

a {
  color: var(--amber);
  text-decoration: none;
  transition: color 0.15s;
}
a:hover { color: var(--t1); }

[data-theme="light"] a { color: var(--amber); }
[data-theme="light"] a:hover { color: var(--t1); }

p { margin-top: 0; }

code, .mono {
  font-family: var(--mono);
}

/* ── 4. Navigation ──────────────────────────────────────────── */
.navbar-v2 {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(4,4,8,0.93);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
  padding: 0 1.5rem;
  height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  transition: background 0.3s, border-color 0.3s;
}
[data-theme="light"] .navbar-v2 {
  background: rgba(245,240,232,0.94);
}

.nav-brand-v2 {
  font-family: var(--mono); font-size: 0.9rem; font-weight: 700;
  color: var(--t1); text-decoration: none;
  display: flex; align-items: center; gap: 0; white-space: nowrap;
  flex-shrink: 0;
}
.nav-prompt { color: var(--green); }
.nav-cursor {
  display: inline-block; width: 7px; height: 0.9em;
  background: var(--amber); margin-left: 2px;
  animation: blink 1.2s step-end infinite;
  vertical-align: text-bottom;
}

@keyframes blink { 0%,50%{opacity:1} 51%,100%{opacity:0} }

.nav-links-v2 {
  display: flex; align-items: center; gap: 0;
  list-style: none; margin: 0; padding: 0;
}
.nav-links-v2 li a {
  font-family: var(--mono); font-size: 0.82rem; font-weight: 500;
  color: var(--t2); text-decoration: none;
  padding: 0.3rem 0.75rem;
  transition: color 0.15s;
  display: flex; align-items: center; gap: 4px;
}
.nav-links-v2 li a .nav-prefix { color: var(--amber); opacity: 0.6; }
.nav-links-v2 li a:hover { color: var(--t1); }
.nav-links-v2 li a:hover .nav-prefix { opacity: 1; }

.nav-right-v2 {
  display: flex; align-items: center; gap: 10px;
  list-style: none; margin: 0; padding: 0;
}
.nav-right-v2 li a {
  font-family: var(--mono); font-size: 0.75rem;
  color: var(--t2); text-decoration: none;
  padding: 0.3rem 0.75rem;
  transition: color 0.15s;
}
.nav-right-v2 li a:hover { color: var(--t1); }
.nav-right-v2 li a.nav-login-btn {
  color: var(--t1); font-weight: 600;
  border: 1px solid var(--border-m); border-radius: 2px;
  padding: 0.25rem 0.75rem;
  background: var(--elevated);
  transition: border-color 0.15s, background 0.15s;
}
.nav-right-v2 li a.nav-login-btn:hover { border-color: var(--amber-b); background: var(--card); }

.nav-user-photo-v2 {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--amber-b); vertical-align: middle;
  margin-right: 6px;
}

/* Theme toggle */
.nav-right-v2 li:has(.theme-toggle) { display: flex; align-items: center; }
.theme-toggle {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--border-m);
  border-radius: 4px; cursor: pointer; flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  font-size: 0.85rem; color: var(--t2);
}
.theme-toggle:hover { border-color: var(--amber-b); color: var(--amber); background: var(--elevated); }
.theme-toggle .icon-sun  { display: flex; align-items: center; gap: 4px; } /* dark mode → show "☀ light" */
.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun  { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: flex; align-items: center; gap: 4px; } /* light mode → show "☽ dark" */

/* Mobile nav toggle */
.nav-hamburger {
  display: none;
  flex-direction: column; gap: 4px; cursor: pointer;
  padding: 6px; background: var(--card); border: 1px solid var(--border-m);
  border-radius: 4px; flex-shrink: 0;
}
.nav-hamburger span {
  width: 18px; height: 1.5px; background: var(--t2);
  border-radius: 1px; transition: background 0.2s;
}
.nav-hamburger:hover span { background: var(--t1); }

@media (max-width: 860px) {
  .nav-links-v2 { display: none; }
  .nav-hamburger { display: flex; }

  .nav-mobile-open .nav-links-v2 {
    display: flex; flex-direction: column;
    position: absolute; top: 56px; left: 0; right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0.5rem 0; z-index: 999;
  }
  .nav-mobile-open .nav-links-v2 li a {
    padding: 0.7rem 1.5rem;
    border-bottom: 1px solid var(--border);
  }
  .nav-mobile-open .nav-links-v2 li:last-child a { border-bottom: none; }
}

/* ── 5. Footer ──────────────────────────────────────────────── */
footer.footer-v2 {
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
  margin-top: auto;
  padding: 1.25rem 1.5rem;
  transition: background 0.3s, border-color 0.3s;
}

.footer-v2-inner {
  max-width: 1060px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}

.footer-brand-v2 {
  font-family: var(--mono); font-size: 0.8rem; color: var(--t3); white-space: nowrap;
}
.footer-brand-v2 .fp { color: var(--green); }
.footer-brand-v2 .fa-cursor { color: var(--amber); }

.footer-status {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.7rem; color: var(--t3); font-family: var(--mono);
}
.status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: pulse 2s infinite;
  flex-shrink: 0;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

.footer-copy-v2 { font-size: 0.7rem; color: var(--t3); font-family: var(--mono); }

@media (max-width: 600px) {
  .footer-v2-inner { flex-direction: column; gap: 0.5rem; text-align: center; }
}

/* ── 6. Page Layout ─────────────────────────────────────────── */
.page-wrap { max-width: 1060px; margin: 0 auto; padding: 3rem 1.5rem 4rem; }
.page-wrap-narrow { max-width: 640px; margin: 0 auto; padding: 3rem 1.5rem 4rem; }

/* Section divider */
.sec-divider {
  border: none; border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}

/* ── 7. Terminal Primitives ─────────────────────────────────── */
.term-prompt {
  font-size: 0.78rem; color: var(--t3); margin-bottom: 1.5rem;
  font-family: var(--mono);
}
.term-prompt .t-user { color: var(--green); }
.term-prompt .t-path { color: var(--amber); }
.term-prompt .t-sep  { color: var(--t3); }

.term-comment {
  font-size: 0.72rem; color: var(--t3); font-style: italic;
  font-family: var(--mono);
}

.sec-cmd {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 700;
  text-transform: none; letter-spacing: 0;
  color: var(--amber); margin-bottom: 1.5rem;
  display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap;
}
.sec-cmd .cmd-prefix { color: var(--t3); }

/* Hero title */
.hero-name-v2 {
  font-family: var(--mono);
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 700; line-height: 0.95;
  letter-spacing: -0.04em; color: var(--t1);
}
.hero-name-v2 .outline-text {
  color: transparent;
  -webkit-text-stroke: 1px var(--amber);
}

/* ── 8. Cards ───────────────────────────────────────────────── */
.card-v2 {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 3px;
  transition: border-color 0.2s, background 0.2s;
}
.card-v2:hover { border-color: var(--amber-b); }

.card-v2-header {
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 0.6rem;
}
.card-v2-header h3, .card-v2-header h4 {
  font-family: var(--mono); font-size: 0.8rem; font-weight: 700;
  color: var(--t1); margin: 0; letter-spacing: 0;
}
.card-v2-header .card-cmd { color: var(--amber); font-size: 0.75rem; }

.card-v2-body { padding: 1.25rem; }

/* ── 9. Buttons ─────────────────────────────────────────────── */
.btn-v2 {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 500;
  padding: 0.6rem 1.2rem;
  border-radius: 3px; text-decoration: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform 0.15s var(--spring), box-shadow 0.15s, background 0.15s;
  border: none;
}
.btn-v2::before { content: '$ '; opacity: 0.5; }

.btn-v2-fill {
  background: var(--amber); color: #000; font-weight: 700;
}
.btn-v2-fill:hover {
  color: #000; transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--amber-d);
}
[data-theme="light"] .btn-v2-fill { color: #000; }
[data-theme="light"] .btn-v2-fill:hover { color: #000; }

.btn-v2-outline {
  background: transparent; color: var(--t2);
  border: 1px solid var(--border-m);
}
.btn-v2-outline:hover {
  color: var(--t1); border-color: var(--amber-b);
  background: var(--amber-d); transform: translateY(-1px);
}

/* ── 10. Tags / Badges ──────────────────────────────────────── */
.tag-v2 {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 500;
  padding: 3px 9px;
  border: 1px solid var(--border-m);
  border-radius: 2px; color: var(--t3);
  display: inline-block;
}
.tag-v2-amber {
  border-color: var(--amber-b);
  color: var(--amber); background: var(--amber-d);
}
.tag-v2-green {
  border-color: rgba(0,214,122,0.3);
  color: var(--green); background: var(--green-d);
}

/* ── 11. Forms ──────────────────────────────────────────────── */
.form-control,
input.form-control,
textarea.form-control,
select.form-control {
  font-family: var(--mono) !important;
  font-size: 0.82rem !important;
  background: var(--elevated) !important;
  border: 1px solid var(--border-m) !important;
  color: var(--t1) !important;
  border-radius: 2px !important;
  padding: 0.7rem 0.9rem !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.form-control:focus {
  background: var(--elevated) !important;
  border-color: var(--amber) !important;
  box-shadow: 0 0 0 2px var(--amber-d) !important;
  color: var(--t1) !important;
  outline: none;
}
.form-control::placeholder { color: var(--t3) !important; }

.input-group-text {
  background: var(--elevated) !important;
  border-color: var(--border-m) !important;
  color: var(--amber) !important;
  font-family: var(--mono) !important;
  border-radius: 2px !important;
}

label {
  font-family: var(--mono); font-size: 0.72rem;
  color: var(--t3); margin-bottom: 5px;
}

/* ── 12. Tables ─────────────────────────────────────────────── */
.table-dark,
.table-dark td,
.table-dark th {
  background-color: var(--card) !important;
  color: var(--t1) !important;
  border-color: var(--border) !important;
  font-family: var(--mono) !important;
  font-size: 0.82rem !important;
}
.table-dark thead th {
  background: var(--elevated) !important;
  color: var(--amber) !important;
  font-size: 0.7rem !important; letter-spacing: 0.05em;
  border-bottom: 1px solid var(--amber-b) !important;
}

/* ── 13. Alerts ─────────────────────────────────────────────── */
.alert-info {
  background: var(--elevated) !important;
  border: 1px solid var(--border-m) !important;
  border-left: 2px solid var(--amber) !important;
  color: var(--t2) !important;
  font-family: var(--mono) !important; font-size: 0.82rem !important;
  border-radius: 2px !important;
}
.alert-secondary {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--t3) !important;
  font-family: var(--mono) !important; font-size: 0.82rem !important;
  border-radius: 2px !important;
}

/* ── 14. Popup / Modal ──────────────────────────────────────── */
.popup-overlay {
  position: fixed; inset: 0;
  background: rgba(2,2,6,0.85);
  backdrop-filter: blur(10px);
  z-index: 9998;
  animation: fadeIn 0.2s var(--ease);
}
[data-theme="light"] .popup-overlay { background: rgba(200,195,185,0.7); }

.popup {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 360px; max-width: 92%;
  background: var(--card);
  border: 1px solid var(--amber-b);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  border-radius: 4px; padding: 0;
  z-index: 9999;
  animation: popIn 0.25s var(--spring);
  overflow: hidden;
}

.popup-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  background: var(--elevated);
  border-bottom: 1px solid var(--border);
}
.popup-header h3 {
  margin: 0; color: var(--t1);
  font-family: var(--mono); font-size: 0.88rem; font-weight: 700;
}
.popup-header h3::before { content: '$ '; color: var(--amber); }
.popup-header button {
  background: transparent; border: 0;
  font-size: 18px; cursor: pointer; color: var(--t3); line-height: 1; padding: 0;
  transition: color 0.15s;
}
.popup-header button:hover { color: var(--t1); }

.popup-body { padding: 20px; text-align: center; }
.popup-body p { color: var(--t2); margin-bottom: 16px; font-size: 0.8rem; }

.popup-body .btn {
  display: block; width: 100%; padding: 11px 16px; margin-bottom: 8px;
  border-radius: 2px; font-family: var(--mono);
  font-size: 0.78rem; font-weight: 700;
  transition: transform 0.15s var(--spring), opacity 0.15s;
}
.popup-body .btn:hover { transform: translateY(-1px); opacity: 0.9; }
.popup-body .btn:last-child { margin-bottom: 0; }
.popup-body .btn-google { background: #db4437; border: none; color: white; }
.popup-body .btn-facebook { background: #4267B2; border: none; color: white; }

/* ── 15. CV Overrides ───────────────────────────────────────── */
.cv-section {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 3px !important;
  overflow: hidden; margin-bottom: 1rem;
  transition: background 0.3s, border-color 0.3s;
}
.cv-header {
  background: var(--elevated) !important;
  padding: 0.75rem 1.25rem !important;
  border-bottom: 1px solid var(--border) !important;
}
.cv-header h3 {
  color: var(--amber) !important;
  font-family: var(--mono) !important; font-size: 0.82rem !important;
  font-weight: 700; margin: 0;
}
.cv-header h3::before { content: '// '; opacity: 0.6; }
.cv-body { padding: 1.25rem !important; }

.experience-item {
  background: var(--elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: 2px !important;
  padding: 1.1rem !important;
  margin-bottom: 0.75rem !important;
}
.experience-item:last-child { margin-bottom: 0 !important; }

.job-title {
  color: var(--amber) !important;
  font-family: var(--mono) !important; font-size: 0.85rem !important;
  font-weight: 700; margin-bottom: 3px !important;
}
.company-name {
  color: var(--t1) !important;
  font-family: var(--mono) !important; font-size: 0.82rem !important;
}
.job-period {
  color: var(--t3) !important;
  font-family: var(--mono) !important; font-size: 0.75rem !important;
}
.job-description {
  padding-left: 12px !important;
  border-left: 1px solid var(--amber-b) !important;
  margin-top: 0.75rem !important;
}
.job-description li {
  color: var(--t2) !important;
  font-family: var(--mono) !important; font-size: 0.78rem !important;
  margin-bottom: 3px !important;
}
.tech-stack {
  background: var(--card) !important; color: var(--amber) !important;
  font-family: var(--mono) !important; font-size: 0.72rem !important;
  border: 1px solid var(--amber-b) !important;
  border-radius: 2px !important; display: inline-block;
  padding: 3px 8px !important; margin-top: 8px !important;
}
.tech-stack::before { content: '> '; opacity: 0.5; }

.skill-badge {
  background: var(--elevated) !important;
  color: var(--t2) !important; border: 1px solid var(--border-m) !important;
  font-family: var(--mono) !important; font-size: 0.75rem !important;
  padding: 4px 10px !important; border-radius: 2px !important; margin: 3px !important;
  display: inline-block !important;
}
.skill-badge.highlight {
  background: var(--amber-d) !important;
  color: var(--amber) !important; border-color: var(--amber-b) !important;
}

.profile-header { text-align: center; padding: 2rem 1rem !important; }
.profile-name { color: var(--t1) !important; font-family: var(--mono) !important; }
.profile-title { color: var(--amber) !important; font-family: var(--mono) !important; font-size: 0.85rem !important; }
.contact-icons a {
  background: var(--elevated) !important; color: var(--t1) !important;
  border: 1px solid var(--border-m) !important; border-radius: 2px !important;
  font-family: var(--mono) !important; font-size: 0.78rem !important;
}
.contact-icons a:hover { background: var(--amber-d) !important; border-color: var(--amber-b) !important; color: var(--amber) !important; }

.cert-item { background: var(--elevated) !important; border: 1px solid var(--border) !important; border-radius: 2px !important; }

/* ── 16. World Cup Overrides ────────────────────────────────── */
.match-card {
  background: var(--elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: 2px !important;
}
.match-teams { color: var(--t1) !important; font-family: var(--mono) !important; }
.match-info  { color: var(--t3) !important; font-family: var(--mono) !important; }
.stage-header {
  color: var(--amber) !important;
  border-bottom: 1px solid var(--amber-b) !important;
  font-family: var(--mono) !important; font-size: 0.82rem !important;
  letter-spacing: 0.05em;
}
.stage-header::before { content: '// '; opacity: 0.6; }

.badge-locked { background: var(--amber) !important; color: #000 !important; }
.badge-completed { background: var(--green) !important; color: #000 !important; }
.badge-open { background: var(--card) !important; color: var(--t2) !important; border: 1px solid var(--border-m) !important; }

.score-input {
  background: var(--elevated) !important;
  border: 1px solid var(--border-m) !important;
  color: var(--t1) !important; border-radius: 2px !important;
  font-family: var(--mono) !important;
}

/* ── 17. World Cup Ranking ──────────────────────────────────── */
.ranking-table th { background: var(--elevated) !important; color: var(--amber) !important; border-color: var(--border) !important; }
.ranking-table td { border-color: var(--border) !important; color: var(--t1) !important; }
.ranking-table { background: var(--card) !important; border-radius: 2px !important; }
.current-user { background: var(--amber-d) !important; border-left: 2px solid var(--amber) !important; }
.rank-badge { border-radius: 2px !important; font-family: var(--mono) !important; font-size: 0.72rem !important; }
.rank-1 .rank-badge { background: var(--amber) !important; color: #000 !important; }
.rank-2 .rank-badge { background: var(--t3) !important; color: var(--bg) !important; }
.rank-3 .rank-badge { background: #7a5520 !important; color: var(--t1) !important; }
.points-display { color: var(--green) !important; font-family: var(--mono) !important; }

/* ── 18. QR / Convert-color Overrides ──────────────────────── */
.btn-group-toggle .btn {
  background: var(--elevated) !important;
  border-color: var(--border-m) !important;
  color: var(--t2) !important;
  font-family: var(--mono) !important; font-size: 0.78rem !important;
  border-radius: 2px !important;
}
.btn-group-toggle .btn.active,
.btn-group-toggle .btn:active {
  background: var(--amber-d) !important;
  border-color: var(--amber-b) !important;
  color: var(--amber) !important;
}
#visitCardContainer, #singleInputContainer {
  background: var(--elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: 2px !important;
}
#qrImageLinkName { color: var(--green) !important; font-family: var(--mono) !important; }
#qrImage { border-radius: 2px !important; }

/* ── 19. Animations ─────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn {
  from { opacity: 0; transform: translate(-50%,-50%) scale(0.9); }
  to   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}

.anim-up { animation: fadeUp 0.5s var(--ease) both; }
.anim-1  { animation-delay: 0.08s; }
.anim-2  { animation-delay: 0.16s; }
.anim-3  { animation-delay: 0.24s; }
.anim-4  { animation-delay: 0.32s; }
.anim-5  { animation-delay: 0.40s; }

/* ── 20. Bootstrap Resets ───────────────────────────────────── */
.container { max-width: 1060px; }

.text-muted { color: var(--t3) !important; }
.text-white { color: var(--t1) !important; }

.bg-dark { background: var(--card) !important; }

.badge { font-family: var(--mono); border-radius: 2px; }

/* ── 21. Misc ───────────────────────────────────────────────── */
.worldcup-promo-card { /* handled via card-v2 */ }

hr {
  border-color: var(--border);
}

img.company-logo {
  width: 28px !important;
  height: 28px !important;
  object-fit: cover !important;
  border-radius: 2px !important;
  border: 1px solid var(--border) !important;
  padding: 3px !important;
  background: var(--elevated) !important;
  filter: grayscale(20%);
  flex-shrink: 0;
  margin-right: 12px !important;
  align-self: flex-start !important;
}
[data-theme="light"] img.company-logo { filter: grayscale(0%); }