/* ═══════════════════════════════════════════════════════════════════
 * Sudanna Modern UI System v1.0
 * Aesthetic: Refined Dark Luxury — Arabic-first, Mobile-first
 * Font: Readex Pro (display) + Cairo (body) — both RTL native
 * Color: Deep Forest #062218 · Emerald #1DC874 · Warm Gold #C9A84C
 * Motion: Purposeful — entrance, hover, feedback only
 * ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@300;400;600;700;800&family=Cairo:wght@400;600;700;800;900&display=swap');

/* ── DESIGN TOKENS ───────────────────────────────────────────────── */
:root {
  /* Palette */
  --m-void:    #062218;   /* deepest bg */
  --m-dark:    #0A2E1C;   /* card bg */
  --m-mid:     #0F3D25;   /* elevated */
  --m-edge:    #1A5538;   /* borders */
  --m-em:      #1DC874;   /* emerald accent */
  --m-em2:     #15A05C;   /* darker emerald */
  --m-gold:    #C9A84C;   /* warm gold */
  --m-gold2:   #E8C96A;   /* light gold */
  --m-sand:    #FAF6F0;   /* light surface */
  --m-white:   #FFFFFF;
  --m-text:    #E8F0EB;   /* light text on dark */
  --m-text2:   rgba(232,240,235,.6);
  --m-glow:    rgba(29,200,116,.15);  /* emerald glow */
  --m-glow2:   rgba(201,168,76,.12);  /* gold glow */

  /* Radii */
  --mr-sm:  8px;
  --mr-md:  14px;
  --mr-lg:  20px;
  --mr-xl:  28px;

  /* Shadows */
  --ms-card:  0 2px 20px rgba(6,34,24,.5), 0 0 0 1px rgba(29,200,116,.06);
  --ms-glow:  0 0 40px rgba(29,200,116,.18), 0 8px 32px rgba(6,34,24,.6);
  --ms-gold:  0 0 30px rgba(201,168,76,.2), 0 4px 16px rgba(6,34,24,.5);
  --ms-lift:  0 16px 48px rgba(6,34,24,.6), 0 0 0 1px rgba(29,200,116,.1);

  /* Transitions */
  --mt-snap:  150ms cubic-bezier(.22,1,.36,1);
  --mt-base:  280ms cubic-bezier(.22,1,.36,1);
  --mt-slow:  500ms cubic-bezier(.22,1,.36,1);

  /* Typography */
  --mf-display: 'Readex Pro', 'Cairo', sans-serif;
  --mf-body:    'Cairo', 'Noto Sans Arabic', sans-serif;
}

/* ── GLOBAL RESETS & FONT UPGRADE ───────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family: var(--mf-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Hero & section headings use display font */
.hero h1, .sec-head h2, .app-title-bar h2,
h1.display, h2.display, h3.display {
  font-family: var(--mf-display) !important;
  letter-spacing: -0.02em;
}

/* ── NOISE TEXTURE OVERLAY (adds depth) ─────────────────────────── */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 200px;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

/* ── HERO UPGRADE ────────────────────────────────────────────────── */
.hero {
  background: radial-gradient(ellipse 80% 60% at 30% 40%, #0F3D25 0%, #062218 55%, #041810 100%) !important;
  position: relative;
}

/* Animated mesh orbs */
.hero::after {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(29,200,116,.12) 0%, transparent 70%);
  top: -100px; left: -200px;
  border-radius: 50%;
  animation: orb-drift 12s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

@keyframes orb-drift {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(60px, 40px) scale(1.15); }
}

/* Gold orb */
.hero-gold-orb {
  position: absolute;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(201,168,76,.1) 0%, transparent 70%);
  bottom: 0; right: 10%;
  border-radius: 50%;
  animation: orb-drift 16s ease-in-out infinite alternate-reverse;
  pointer-events: none;
  z-index: 1;
}

/* Hero content above overlays */
.hero > * { position: relative; z-index: 2; }
.hero-in { position: relative; z-index: 2; }

/* Hero headline — larger, bolder */
.hero h1 {
  font-size: clamp(2.4rem, 5.5vw, 4.2rem) !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em;
  background: linear-gradient(135deg, #FFFFFF 0%, rgba(255,255,255,.82) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero h1 span {
  background: linear-gradient(135deg, var(--m-gold) 0%, var(--m-gold2) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Hero badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(29,200,116,.1);
  border: 1px solid rgba(29,200,116,.25);
  color: var(--m-em);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  margin-bottom: 20px;
  backdrop-filter: blur(8px);
  animation: badge-in .6s var(--mt-base) both;
}

@keyframes badge-in {
  from { opacity:0; transform:translateY(-8px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── STAT COUNTERS ───────────────────────────────────────────────── */
[data-stat] {
  font-family: 'Readex Pro', monospace !important;
  transition: all .3s ease;
  display: block;
}

/* Animated counter bounce on update */
[data-stat].counting {
  animation: stat-pop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes stat-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* ── NAV UPGRADE ─────────────────────────────────────────────────── */
nav#main-nav {
  background: rgba(6,34,24,.92) !important;
  border-bottom: 1px solid rgba(29,200,116,.12) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

/* Scrolled state */
nav#main-nav.scrolled {
  box-shadow: 0 4px 30px rgba(6,34,24,.8);
  border-bottom-color: rgba(29,200,116,.2) !important;
}

.logo { font-family: var(--mf-display) !important; }

/* Nav links hover — animated underline */
.nav-links a {
  position: relative;
  color: rgba(232,240,235,.75) !important;
  transition: color var(--mt-snap) !important;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 1.5px;
  background: var(--m-em);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--mt-base);
}
.nav-links a:hover { color: var(--m-em) !important; }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ── BUTTON SYSTEM ───────────────────────────────────────────────── */
.btn-gold {
  background: linear-gradient(135deg, #C9A84C, #E8C96A) !important;
  color: #062218 !important;
  box-shadow: 0 4px 20px rgba(201,168,76,.35) !important;
  font-weight: 800 !important;
  transition: transform var(--mt-snap), box-shadow var(--mt-snap) !important;
}
.btn-gold:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 32px rgba(201,168,76,.5) !important;
}
.btn-gold:active { transform: scale(.97) !important; }

.btn-primary {
  background: linear-gradient(135deg, #0F3D25, #1a5538) !important;
  border: 1px solid rgba(29,200,116,.25) !important;
  transition: transform var(--mt-snap), box-shadow var(--mt-snap) !important;
}
.btn-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 24px rgba(29,200,116,.25) !important;
  border-color: rgba(29,200,116,.4) !important;
}

/* ── CARD SYSTEM ─────────────────────────────────────────────────── */
.service-card {
  background: rgba(10,46,28,.6) !important;
  border: 1px solid rgba(29,200,116,.1) !important;
  border-radius: var(--mr-lg) !important;
  box-shadow: var(--ms-card) !important;
  backdrop-filter: blur(12px);
  transition: transform var(--mt-base), box-shadow var(--mt-base), border-color var(--mt-base) !important;
  position: relative;
  overflow: hidden;
}

/* Card shimmer on hover */
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(29,200,116,.06) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--mt-base);
}
.service-card:hover::before { opacity: 1; }
.service-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--ms-lift) !important;
  border-color: rgba(29,200,116,.25) !important;
}
.service-card:active { transform: scale(.98) !important; }

/* Card icon upgrade */
.service-card .svc-icon,
.service-card > div:first-child {
  font-size: 2rem;
  filter: drop-shadow(0 2px 8px rgba(29,200,116,.3));
}

/* ── CHAT WIDGET ─────────────────────────────────────────────────── */
/* Hero chat */
#hero-chat-box {
  background: rgba(10,46,28,.7) !important;
  border: 1px solid rgba(29,200,116,.15) !important;
  border-radius: var(--mr-xl) !important;
  box-shadow: var(--ms-glow) !important;
  backdrop-filter: blur(20px) !important;
}

/* Chat messages */
.chat-msg .chat-bubble.assistant,
.ai-msg.bot {
  background: rgba(15,61,37,.8) !important;
  border: 1px solid rgba(29,200,116,.12) !important;
  border-radius: 18px 18px 18px 4px !important;
  padding: 12px 16px !important;
  backdrop-filter: blur(8px);
  animation: msg-in .3s var(--mt-base) both;
}

.chat-msg .chat-bubble.user,
.ai-msg.user {
  background: linear-gradient(135deg, #0F3D25, #1a5538) !important;
  border: 1px solid rgba(29,200,116,.2) !important;
  border-radius: 18px 18px 4px 18px !important;
  padding: 12px 16px !important;
  animation: msg-in-user .3s var(--mt-base) both;
}

@keyframes msg-in {
  from { opacity:0; transform:translateX(12px) scale(.96); }
  to   { opacity:1; transform:translateX(0) scale(1); }
}
@keyframes msg-in-user {
  from { opacity:0; transform:translateX(-12px) scale(.96); }
  to   { opacity:1; transform:translateX(0) scale(1); }
}

/* Chat input */
#hero-q, #app-input-field {
  background: rgba(6,34,24,.6) !important;
  border: 1.5px solid rgba(29,200,116,.15) !important;
  color: #fff !important;
  border-radius: 14px !important;
  transition: border-color var(--mt-snap), box-shadow var(--mt-snap) !important;
}
#hero-q:focus, #app-input-field:focus {
  border-color: rgba(29,200,116,.5) !important;
  box-shadow: 0 0 0 3px rgba(29,200,116,.1) !important;
  outline: none !important;
}

/* Send button */
#app-send-btn,
button[onclick*="heroSendMsg"],
button[onclick*="appSend"] {
  background: linear-gradient(135deg, #C9A84C, #E8C96A) !important;
  border: none !important;
  border-radius: 12px !important;
  color: #062218 !important;
  font-weight: 800 !important;
  transition: transform var(--mt-snap), box-shadow var(--mt-snap) !important;
  box-shadow: 0 3px 12px rgba(201,168,76,.3) !important;
}
#app-send-btn:hover,
button[onclick*="heroSendMsg"]:hover {
  transform: scale(1.04) !important;
  box-shadow: 0 6px 20px rgba(201,168,76,.45) !important;
}

/* ── APP SIDEBAR ─────────────────────────────────────────────────── */
#app-sidebar {
  background: rgba(6,34,24,.97) !important;
  border-left: 1px solid rgba(29,200,116,.1) !important;
  backdrop-filter: blur(20px) !important;
}

.sb-item {
  border-radius: var(--mr-md) !important;
  transition: background var(--mt-snap), color var(--mt-snap), transform var(--mt-snap) !important;
}
.sb-item:hover {
  background: rgba(29,200,116,.1) !important;
  transform: translateX(-2px);
}
.sb-item.active {
  background: rgba(29,200,116,.15) !important;
  border: 1px solid rgba(29,200,116,.25) !important;
  color: var(--m-em) !important;
}

/* ── APP TOPBAR ──────────────────────────────────────────────────── */
#app-topbar {
  background: rgba(6,34,24,.95) !important;
  border-bottom: 1px solid rgba(29,200,116,.1) !important;
  backdrop-filter: blur(20px) !important;
}

/* Context badge pill */
.ctx-badge {
  border-radius: 999px !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  padding: 4px 12px !important;
  border: 1px solid rgba(29,200,116,.25) !important;
  background: rgba(29,200,116,.12) !important;
  color: var(--m-em) !important;
}

/* ── PANEL VIEW — CARDS ──────────────────────────────────────────── */
#app-content .card, .app-card {
  background: rgba(10,46,28,.5) !important;
  border: 1px solid rgba(29,200,116,.1) !important;
  border-radius: var(--mr-lg) !important;
  box-shadow: var(--ms-card) !important;
  transition: transform var(--mt-base), box-shadow var(--mt-base) !important;
  overflow: hidden;
}
#app-content .card:hover { 
  transform: translateY(-2px) !important;
  box-shadow: var(--ms-lift) !important;
}

/* ── STAGGERED ENTRANCE ANIMATIONS ──────────────────────────────── */
.fade-up {
  animation: fade-up .5s var(--mt-base) both;
}
@keyframes fade-up {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Auto stagger for grids */
.card-grid .card:nth-child(1), .service-cards .service-card:nth-child(1) { animation-delay: 0ms; }
.card-grid .card:nth-child(2), .service-cards .service-card:nth-child(2) { animation-delay: 60ms; }
.card-grid .card:nth-child(3), .service-cards .service-card:nth-child(3) { animation-delay: 120ms; }
.card-grid .card:nth-child(4), .service-cards .service-card:nth-child(4) { animation-delay: 180ms; }
.card-grid .card:nth-child(5), .service-cards .service-card:nth-child(5) { animation-delay: 240ms; }

/* ── TOAST UPGRADE ───────────────────────────────────────────────── */
#toast {
  background: rgba(10,46,28,.97) !important;
  border: 1px solid rgba(29,200,116,.25) !important;
  box-shadow: 0 8px 32px rgba(6,34,24,.7), 0 0 0 1px rgba(29,200,116,.1) !important;
  backdrop-filter: blur(20px) !important;
  border-radius: 14px !important;
  font-family: var(--mf-body) !important;
  font-weight: 700 !important;
}

/* ── PWA INSTALL PROMPT ──────────────────────────────────────────── */
#pwa-install-bar {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  z-index: 9000;
  background: rgba(10,46,28,.98);
  border: 1px solid rgba(29,200,116,.3);
  border-radius: 20px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 12px 40px rgba(6,34,24,.8), 0 0 0 1px rgba(29,200,116,.15);
  backdrop-filter: blur(20px);
  transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .5s ease;
  opacity: 0;
  min-width: 280px;
  max-width: 360px;
  direction: rtl;
}
#pwa-install-bar.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
#pwa-install-bar .pwa-icon {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, #0F3D25, #1a5538);
  border: 1px solid rgba(29,200,116,.25);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
#pwa-install-bar .pwa-text { flex: 1; }
#pwa-install-bar .pwa-title {
  font-weight: 800;
  font-size: .88rem;
  color: #E8F0EB;
  line-height: 1.3;
}
#pwa-install-bar .pwa-sub {
  font-size: .72rem;
  color: rgba(232,240,235,.55);
  margin-top: 2px;
}
#pwa-install-bar .pwa-btn-install {
  background: linear-gradient(135deg, #C9A84C, #E8C96A);
  color: #062218;
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 800;
  font-size: .82rem;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .15s;
  font-family: var(--mf-body);
}
#pwa-install-bar .pwa-btn-install:hover { transform: scale(1.04); }
#pwa-install-bar .pwa-btn-dismiss {
  background: none; border: none;
  color: rgba(232,240,235,.4);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 4px;
  transition: color .2s;
}
#pwa-install-bar .pwa-btn-dismiss:hover { color: rgba(232,240,235,.8); }

/* ── SW UPDATE NOTIFICATION ──────────────────────────────────────── */
#sw-update-bar {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%) translateY(-80px);
  z-index: 9001;
  background: linear-gradient(135deg, #0F3D25, #1a5538);
  border: 1px solid rgba(29,200,116,.35);
  border-radius: 14px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 30px rgba(6,34,24,.7);
  transition: transform .4s cubic-bezier(.22,1,.36,1), opacity .4s ease;
  opacity: 0;
  direction: rtl;
  font-family: var(--mf-body);
}
#sw-update-bar.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
#sw-update-bar span { font-size: .85rem; font-weight: 700; color: #E8F0EB; }
#sw-update-bar button {
  background: var(--m-em);
  border: none; color: #fff;
  border-radius: 8px; padding: 5px 12px;
  font-size: .78rem; font-weight: 700;
  cursor: pointer;
  font-family: var(--mf-body);
  transition: background .15s;
}
#sw-update-bar button:hover { background: var(--m-em2); }

/* ── TYPING INDICATOR ────────────────────────────────────────────── */
.typing-dots {
  display: flex; gap: 4px; padding: 8px 4px; align-items: center;
}
.typing-dots span {
  width: 7px; height: 7px;
  background: var(--m-em);
  border-radius: 50%;
  animation: typing .8s ease-in-out infinite;
  opacity: .4;
}
.typing-dots span:nth-child(2) { animation-delay: .15s; }
.typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes typing {
  0%,60%,100% { transform:translateY(0); opacity:.4; }
  30%          { transform:translateY(-5px); opacity:1; }
}

/* ── SCROLL-TRIGGER REVEAL ───────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal:nth-child(2) { transition-delay: .1s; }
.reveal:nth-child(3) { transition-delay: .2s; }
.reveal:nth-child(4) { transition-delay: .3s; }

/* ── AUTH MODAL UPGRADE ──────────────────────────────────────────── */
#auth-overlay .modal-box, .modal-box {
  background: rgba(10,46,28,.98) !important;
  border: 1px solid rgba(29,200,116,.18) !important;
  box-shadow: 0 30px 80px rgba(6,34,24,.9) !important;
  backdrop-filter: blur(30px) !important;
  border-radius: var(--mr-xl) !important;
  animation: modal-in .35s cubic-bezier(.22,1,.36,1) both;
}
@keyframes modal-in {
  from { opacity:0; transform:scale(.94) translateY(16px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}

/* ── SECTION HEADS ───────────────────────────────────────────────── */
.sec-head h2 {
  background: linear-gradient(135deg, #062218 0%, #0F3D25 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── MOBILE BOTTOM NAV (PWA standalone) ─────────────────────────── */
@media (display-mode: standalone), (max-width: 768px) {
  #pwa-bottom-nav {
    display: flex !important;
  }
}
#pwa-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 8000;
  background: rgba(6,34,24,.98);
  border-top: 1px solid rgba(29,200,116,.12);
  backdrop-filter: blur(20px);
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  justify-content: space-around;
  align-items: center;
}
#pwa-bottom-nav .pbn-item {
  display: flex; flex-direction: column;
  align-items: center; gap: 3px;
  padding: 6px 12px;
  border: none; background: none;
  cursor: pointer; color: rgba(232,240,235,.5);
  font-family: var(--mf-body);
  font-size: .62rem; font-weight: 700;
  border-radius: 12px;
  transition: color .2s, transform .15s;
  min-width: 56px;
}
#pwa-bottom-nav .pbn-item .pbn-icon {
  font-size: 1.3rem;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
#pwa-bottom-nav .pbn-item:hover .pbn-icon { transform: scale(1.2); }
#pwa-bottom-nav .pbn-item.active { color: var(--m-em); }
#pwa-bottom-nav .pbn-item.active .pbn-icon { transform: scale(1.1); }
#pwa-bottom-nav .pbn-fab {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, #C9A84C, #E8C96A);
  border-radius: 50%; border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 4px 20px rgba(201,168,76,.4);
  cursor: pointer;
  margin-bottom: 4px;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
  flex-shrink: 0;
}
#pwa-bottom-nav .pbn-fab:hover { transform: scale(1.1) rotate(5deg); }
#pwa-bottom-nav .pbn-fab:active { transform: scale(.95); }

/* Body bottom padding when bottom nav shown (inside app) */
body.has-bottom-nav #app-section {
  padding-bottom: calc(70px + env(safe-area-inset-bottom));
}

/* ── CARD-GRID RESPONSIVE ────────────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
@media (max-width: 480px) {
  .card-grid { grid-template-columns: 1fr; }
}

/* ── SCROLLBAR STYLING ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: rgba(6,34,24,.3); }
::-webkit-scrollbar-thumb {
  background: rgba(29,200,116,.2);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(29,200,116,.4); }

/* ── EXEC TRACE BADGE ────────────────────────────────────────────── */
.exec-trace-badge {
  background: rgba(6,34,24,.7) !important;
  border: 1px solid rgba(29,200,116,.1) !important;
  border-radius: 8px !important;
  backdrop-filter: blur(8px) !important;
}

/* ── LOADING SHIMMER ─────────────────────────────────────────────── */
.shimmer {
  background: linear-gradient(90deg, rgba(15,61,37,.5) 25%, rgba(26,85,56,.5) 50%, rgba(15,61,37,.5) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--mr-md);
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── SELECTION COLOR ─────────────────────────────────────────────── */
::selection { background: rgba(29,200,116,.25); color: #E8F0EB; }

/* ── REDUCED MOTION ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}