/**
 * LOCKED — Shock Mode Light FINAL PRODUCTION BASELINE.
 * Scope: html.light .shock-mode-root .sm-light-shell
 * Dark Mode CSS remains untouched.
 *
 * Frozen: page rhythm, surfaces, borders, radii, typography, responsive.
 * Approved tokens: page #f2f3f5 · section-gap 18 · related-gap 14 · radius ~15/~12.
 * Do not refactor without explicit owner instruction.
 * See: .cursor/rules/shock-mode-light-locked.mdc
 */

html.light:has(.shock-mode-root),
html.light:has(.shock-mode-root) body {
  background: #f2f3f5;
  color-scheme: light;
}

html.light .shock-mode-root[data-zs-force-dark='true'] {
  color-scheme: light;
}

/*
 * Geometry: the app layout already offsets content via `body main { padding-top: var(--zs-header-height) }`.
 * Shock Mode nests a second <main.shock-mode-page>, which inherited the same offset and created a
 * ~72px dead band under the fixed header. Cancel only on the Light page shell — Dark untouched.
 */
html.light main.shock-mode-page.shock-mode-page--light {
  padding-top: 0;
}

html.light .shock-mode-root {
  /* Pearl institutional Light palette — unified with map/strip */
  --sm-page: #f2f3f5;
  --sm-card: #ffffff;
  --sm-border: rgba(20, 21, 24, 0.085);
  --sm-border-strong: rgba(20, 21, 24, 0.14);
  --sm-divider: rgba(20, 21, 24, 0.06);
  --sm-text: #141518;
  --sm-text-2: #3a404a;
  --sm-muted: #5c636e;
  --sm-muted-soft: #7b818b;
  --sm-orange: #b45309;
  --sm-orange-soft: #d97706;
  --sm-blue: #1d4ed8;
  --sm-blue-soft: #3b82f6;
  --sm-navy: #141518;
  --sm-red: #dc2626;
  --sm-green: #15803d;
  --sm-shadow: 0 1px 2px rgba(20, 21, 24, 0.03), 0 10px 28px -18px rgba(20, 21, 24, 0.16);
  --sm-shadow-float: 0 1px 2px rgba(20, 21, 24, 0.035), 0 14px 32px -20px rgba(20, 21, 24, 0.18);
  --sm-font: 'Tajawal', 'IBM Plex Sans Arabic', sans-serif;
  --sm-radius: 15px;
  --sm-radius-sm: 12px;
  --sm-section-gap: 18px;
  --sm-related-gap: 14px;

  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  min-height: 100dvh;
  background: var(--sm-page);
  color: var(--sm-text);
  font-family: var(--sm-font);
  font-synthesis: none;
  letter-spacing: 0;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

/* Hide dark shell entirely in light */
html.light .shock-mode-root .sm-dark-shell,
html.light .shock-mode-root .bg,
html.light .shock-mode-root .shock-aura,
html.light .shock-mode-root .particles {
  display: none !important;
}

/* Dark file hides light shell by default — show only under html.light */
html.light .shock-mode-root .sm-light-shell {
  display: block !important;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: min(1920px, 100%);
  margin-inline: auto;
  /* Header → workspace rhythm ~20px; page gutters aligned */
  padding: 20px 22px 28px;
  font-family: var(--sm-font);
  color: var(--sm-text);
}

/* Latin financial numerals — LTR island, lining + tabular */
html.light .shock-mode-root .sm-light-shell .num,
html.light .shock-mode-root .sml-xlab {
  font-family: 'Tajawal', 'IBM Plex Sans Arabic', sans-serif;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
  letter-spacing: 0;
  font-synthesis: none;
  unicode-bidi: isolate;
  direction: ltr;
  text-align: start;
  -webkit-font-smoothing: antialiased;
}

html.light .shock-mode-root .sml-bottom .num,
html.light .shock-mode-root .sml-rx__asset-val,
html.light .shock-mode-root .sml-rx__asset-pct,
html.light .shock-mode-root .sml-rx__end,
html.light .shock-mode-root .sml-rx__y-tick,
html.light .shock-mode-root .sml-rx__x-tick,
html.light .shock-mode-root .sml-rx__now-clock,
html.light .shock-mode-root .sml-rx__build-count,
html.light .shock-mode-root .sml-feed__time {
  font-family: 'Tajawal', 'IBM Plex Sans Arabic', sans-serif;
  letter-spacing: 0;
  font-synthesis: none;
}

/* ── 3-column dense grid ─────────────────────────────────────── */
html.light .shock-mode-root .sml-grid {
  display: grid;
  direction: ltr;
  grid-template-columns: minmax(240px, 16%) minmax(0, 1fr) minmax(240px, 16%);
  gap: var(--sm-section-gap);
  align-items: start;
  min-height: calc(100dvh - 68px);
}

html.light .shock-mode-root .sml-left,
html.light .shock-mode-root .sml-right {
  direction: rtl;
  display: flex;
  flex-direction: column;
  gap: var(--sm-related-gap);
  min-width: 0;
}

html.light .shock-mode-root .sml-main {
  direction: rtl;
  display: flex;
  flex-direction: column;
  gap: var(--sm-section-gap);
  min-width: 0;
}

/* ── Cards ───────────────────────────────────────────────────── */
html.light .shock-mode-root .sml-card {
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfa 100%);
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  box-shadow: var(--sm-shadow);
  padding: 15px 16px 14px;
}

html.light .shock-mode-root .sml-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--sm-divider);
}

html.light .shock-mode-root .sml-card__head h2 {
  flex: 1;
  margin: 0;
  font-size: 13.75px;
  font-weight: 600;
  color: var(--sm-navy);
  letter-spacing: 0;
  line-height: 1.3;
}

html.light .shock-mode-root .sml-ico {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid transparent;
}

html.light .shock-mode-root .sml-ico svg {
  width: 14px;
  height: 14px;
}

html.light .shock-mode-root .sml-ico--orange {
  background: linear-gradient(160deg, #fff7ed, #ffedd5);
  color: #c2410c;
  border-color: rgba(234, 88, 12, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

html.light .shock-mode-root .sml-ico--blue {
  background: linear-gradient(160deg, #eff6ff, #dbeafe);
  color: var(--sm-blue);
  border-color: rgba(26, 86, 219, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

html.light .shock-mode-root .sml-info {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--sm-border-strong);
  color: var(--sm-muted);
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Gauges ──────────────────────────────────────────────────── */
html.light .shock-mode-root .sml-gauge {
  text-align: center;
}

html.light .shock-mode-root .sml-gauge__wrap {
  position: relative;
  max-width: 200px;
  margin: 0 auto;
}

html.light .shock-mode-root .sml-gauge__wrap svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* Shared institutional gauge numerals — both fear + severity */
html.light .shock-mode-root .sml-gauge-num {
  font-family: 'Tajawal', 'IBM Plex Sans Arabic', sans-serif;
  font-synthesis: none;
  letter-spacing: 0;
  text-rendering: geometricPrecision;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
  unicode-bidi: isolate;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}

html.light .shock-mode-root .sml-gauge__val {
  position: absolute;
  left: 0;
  right: 0;
  top: 36%;
  bottom: auto;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  pointer-events: none;
}

html.light .shock-mode-root .sml-gauge__val .sml-gauge-num:not(.sml-gauge-num--denom):not(.sml-gauge__dash) {
  display: block;
  font-size: 48px;
  font-weight: 600;
  color: var(--sm-navy);
  line-height: 0.95;
  margin: 0;
  padding: 0;
}

html.light .shock-mode-root .sml-gauge-num--denom,
html.light .shock-mode-root .sml-gauge__denom {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--sm-muted-soft);
  line-height: 1;
  letter-spacing: 0;
  margin: 7px 0 0;
  padding: 0;
}

html.light .shock-mode-root .sml-gauge__label {
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: #b45309;
  line-height: 1.25;
  letter-spacing: 0;
  font-synthesis: none;
  text-align: center;
}

html.light .shock-mode-root .sml-gauge__dash {
  font-size: 28px !important;
  font-weight: 500 !important;
  color: var(--sm-muted-soft) !important;
  line-height: 1 !important;
}

html.light .shock-mode-root .sml-gauge__unavailable {
  display: block;
  margin: 8px 0 0;
  max-width: 11.5rem;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--sm-muted);
  line-height: 1.3;
}

html.light .shock-mode-root .sml-gauge.is-unavailable .sml-gauge__val {
  top: 38%;
}

/* Gauge label semantics — blue is informational only, never warning/risk */
html.light .shock-mode-root .sml-gauge--blue .sml-gauge__label {
  color: var(--sm-blue);
}

html.light .shock-mode-root .sml-gauge--orange .sml-gauge__label {
  color: #b45309;
}

html.light .shock-mode-root .sml-gauge--red .sml-gauge__label {
  color: #dc2626;
}

html.light .shock-mode-root .sml-gauge--green .sml-gauge__label {
  color: var(--sm-green);
}

html.light .shock-mode-root .sml-hint {
  margin: 10px 0 0;
  text-align: center;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--sm-muted);
  line-height: 1.55;
}

html.light .shock-mode-root .sml-spark {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--sm-divider);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

html.light .shock-mode-root .sml-spark__bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 34px;
  flex: 1;
}

html.light .shock-mode-root .sml-spark__bars span {
  flex: 1;
  background: linear-gradient(180deg, #fdba74, #ea580c);
  border-radius: 2px 2px 0 0;
  opacity: 0.9;
}

html.light .shock-mode-root .sml-spark__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  font-size: 12px;
  font-weight: 500;
  color: var(--sm-muted);
  line-height: 1.35;
}

html.light .shock-mode-root .sml-spark__delta {
  color: var(--sm-text-2);
  font-weight: 600;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

html.light .shock-mode-root .sml-spark__delta.is-down {
  color: var(--sm-text-2);
}

/* ── Drivers ─────────────────────────────────────────────────── */
html.light .shock-mode-root .sml-drivers {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

html.light .shock-mode-root .sml-driver__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--sm-text-2);
  margin-bottom: 6px;
  line-height: 1.35;
}

html.light .shock-mode-root .sml-driver__top strong {
  color: #0f172a;
  font-weight: 600;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  min-width: 2.6rem;
  text-align: end;
}

html.light .shock-mode-root .sml-driver__track {
  height: 6px;
  border-radius: 999px;
  background: #eef2f6;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.02);
}

html.light .shock-mode-root .sml-driver__track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7eb6f8, #2563eb);
  box-shadow: 0 0 0 0.5px rgba(37, 99, 235, 0.08);
}

html.light .shock-mode-root .sml-driver[data-tone='warn'] .sml-driver__track i {
  background: linear-gradient(90deg, #fdba74, #c2410c);
}

html.light .shock-mode-root .sml-driver[data-tone='blue'] .sml-driver__track i {
  background: linear-gradient(90deg, #93c5fd, #1d4ed8);
}

html.light .shock-mode-root .sml-driver[data-tone='muted'] .sml-driver__track i {
  background: #94a3b8;
}

/* ── Top event ───────────────────────────────────────────────── */
html.light .shock-mode-root .sml-event-hit {
  display: block;
  color: inherit;
  text-decoration: none;
}

html.light .shock-mode-root .sml-event-hit:hover .sml-event-title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

html.light .shock-mode-root .sml-event-media {
  position: relative;
  height: 124px;
  border-radius: 12px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(7, 17, 31, 0.15) 0%, transparent 45%),
    linear-gradient(180deg, transparent 35%, rgba(7, 17, 31, 0.55) 100%),
    radial-gradient(90% 80% at 80% 20%, #fdba74 0%, #ea580c 32%, #1e3a5f 68%, #0f172a 100%);
  margin-bottom: 12px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 8px 20px rgba(7, 17, 31, 0.08);
}

html.light .shock-mode-root .sml-event-media--article {
  background: #0f172a;
}

html.light .shock-mode-root .sml-event-media--article::before {
  display: none;
}

html.light .shock-mode-root .sml-event-media--article::after {
  background: linear-gradient(180deg, transparent 28%, rgba(7, 17, 31, 0.55) 100%);
}

html.light .shock-mode-root .sml-event-media::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 48%, transparent 100%);
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 1;
}

html.light .shock-mode-root .sml-event-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 17, 31, 0.08) 0%, transparent 35%, rgba(7, 17, 31, 0.62) 100%);
  pointer-events: none;
  z-index: 1;
}

html.light .shock-mode-root .sml-event-media img,
html.light .shock-mode-root .sml-event-photo,
html.light .shock-mode-root .sml-event-photo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

html.light .shock-mode-root .sml-event-media--article .sml-event-photo__img {
  opacity: 1;
  mix-blend-mode: normal;
  filter: none;
}

html.light .shock-mode-root .sml-event-media .sml-event-chips {
  position: absolute;
  inset-inline-start: 11px;
  bottom: 11px;
  margin-bottom: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

html.light .shock-mode-root .sml-event-media .sml-event-chips span {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--sm-navy);
  font-weight: 600;
  font-size: 10.5px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 1px 3px rgba(20, 21, 24, 0.12);
  line-height: 1;
}

html.light .shock-mode-root .sml-event-title {
  margin: 0 0 5px;
  font-size: 16px;
  font-weight: 600;
  color: var(--sm-navy);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

html.light .shock-mode-root .sml-event-desc {
  margin: 0 0 11px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--sm-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

html.light .shock-mode-root .sml-event-empty .sml-event-desc {
  margin: 8px 0 0;
  -webkit-line-clamp: unset;
  display: block;
}

html.light .shock-mode-root .sml-event-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 9px;
}

html.light .shock-mode-root .sml-event-chips span {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--sm-border);
  background: #f8fafc;
  color: var(--sm-text-2);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
}

html.light .shock-mode-root .sml-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: none;
  padding: 0;
  color: var(--sm-blue);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.3;
  letter-spacing: 0;
  text-decoration: none;
}

html.light .shock-mode-root .sml-link:hover {
  color: #1341b0;
}

html.light .shock-mode-root .sml-link--footer {
  margin-top: 12px;
}

/* ── Center header ───────────────────────────────────────────── */
html.light .shock-mode-root .sml-main-head {
  display: grid;
  direction: ltr;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  row-gap: 4px;
  margin-bottom: 0;
  min-height: 54px;
  padding: 0 2px 2px;
}

html.light .shock-mode-root .sml-live,
html.light .shock-mode-root .sml-regions,
html.light .shock-mode-root .sml-title-block {
  direction: rtl;
}

html.light .shock-mode-root .sml-live {
  justify-self: end;
}

html.light .shock-mode-root .sml-title-block {
  justify-self: center;
  text-align: center;
}

html.light .shock-mode-root .sml-regions {
  justify-self: start;
  direction: ltr;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

html.light .shock-mode-root .sml-globe {
  width: 18px;
  height: 18px;
  color: var(--sm-muted);
  opacity: 0.85;
}

html.light .shock-mode-root .sml-globe svg {
  width: 100%;
  height: 100%;
}

html.light .shock-mode-root .sml-regions button {
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--sm-border);
  background: #fff;
  color: var(--sm-text-2);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.02);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

html.light .shock-mode-root .sml-regions button:hover {
  border-color: var(--sm-border-strong);
  color: var(--sm-text);
}

html.light .shock-mode-root .sml-regions button.is-active {
  background: var(--sm-navy);
  border-color: var(--sm-navy);
  color: #fff;
  font-weight: 600;
  box-shadow: none;
}

html.light .shock-mode-root .sml-title-block h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  color: var(--sm-navy);
  line-height: 1.12;
  letter-spacing: 0;
}

html.light .shock-mode-root .sml-title-block h1 em {
  font-style: normal;
  color: var(--sm-orange);
}

html.light .shock-mode-root .sml-title-block p {
  margin: 5px 0 0;
  font-size: 12.75px;
  font-weight: 500;
  color: var(--sm-muted);
  max-width: 380px;
  line-height: 1.45;
}

html.light .shock-mode-root .sml-live {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
}

html.light .shock-mode-root .sml-live__time {
  text-align: end;
}

html.light .shock-mode-root .sml-live__time span {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--sm-muted);
  line-height: 1.2;
}

html.light .shock-mode-root .sml-live__time strong {
  display: block;
  margin-top: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--sm-text);
  font-variant-numeric: tabular-nums;
}

html.light .shock-mode-root .sml-live__time small {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--sm-muted-soft);
  margin-top: 0;
}

html.light .shock-mode-root .sml-live__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--sm-border);
  background: #fff;
  color: var(--sm-text);
  font-size: 12px;
  font-weight: 600;
  box-shadow: var(--sm-shadow);
  white-space: nowrap;
}

html.light .shock-mode-root .sml-regions {
  justify-self: start;
  direction: ltr;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

html.light .shock-mode-root .sml-live__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sm-red);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
  animation: sml-pulse 1.6s ease-in-out infinite;
}

@keyframes sml-pulse {
  50% {
    opacity: 0.7;
    transform: scale(0.92);
  }
}

/* ── Map (Light presentation rebuild — reference baseline) ───── */
html.light .shock-mode-root .sml-map-card {
  background: #f3f2ef;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  box-shadow: var(--sm-shadow);
  overflow: hidden;
}

html.light .shock-mode-root .sml-map {
  position: relative;
  width: 100%;
  height: clamp(480px, 58vh, 620px);
  /* Continuous ocean — matches SVG ocean so no floating inner canvas */
  background: #ebf2f8;
}

/* Premium map host — do not paint old blue stage under .zspm */
html.light .shock-mode-root .sml-map.sml-map--premium {
  height: auto;
  min-height: 0;
  background: transparent;
  overflow: visible;
}

html.light .shock-mode-root .sml-map.sml-map--premium .zspm {
  width: 100%;
  position: relative;
  z-index: 1;
}

/* Strip overlays the premium stage; keep above map chrome */
html.light .shock-mode-root .sml-map.sml-map--premium .sml-ristrip,
html.light .shock-mode-root .sml-map.sml-map--premium .sml-rist {
  z-index: 5;
}

/* Geographic base — fills map surface (projection fitWidth; NO CSS scale) */
html.light .shock-mode-root .sml-map-world {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform: none;
  pointer-events: none;
}

html.light .shock-mode-root .sml-map-world .sml-rlabel {
  pointer-events: auto;
}

html.light .shock-mode-root .sml-geo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

html.light .shock-mode-root .sml-geo__svg {
  width: 100%;
  height: 100%;
  display: block;
  shape-rendering: geometricPrecision;
}

html.light .shock-mode-root .sml-geo__ocean {
  /* filled via SVG gradient */
}

html.light .shock-mode-root .sml-geo__grain {
  pointer-events: none;
  mix-blend-mode: soft-light;
}

html.light .shock-mode-root .sml-geo__atmo {
  pointer-events: none;
}

html.light .shock-mode-root .sml-geo__bloom-path {
  fill: #2563eb;
  opacity: 0.85;
  stroke: none;
}

html.light .shock-mode-root .sml-geo__country {
  fill: #5e7a96;
  stroke: none;
  transition: fill 180ms ease, opacity 180ms ease;
}

/* Subtle regional tonal depth — same family, not choropleth */
html.light .shock-mode-root .sml-geo__country--north-america {
  fill: #5c7894;
}
html.light .shock-mode-root .sml-geo__country--south-america {
  fill: #617e99;
}
html.light .shock-mode-root .sml-geo__country--europe {
  fill: #5a7692;
}
html.light .shock-mode-root .sml-geo__country--africa {
  fill: #628099;
}
html.light .shock-mode-root .sml-geo__country--asia {
  fill: #5d7995;
}
html.light .shock-mode-root .sml-geo__country--middle-east {
  fill: #647f98;
}
html.light .shock-mode-root .sml-geo__country--australia {
  fill: #5f7b96;
}

html.light .shock-mode-root .sml-geo__country.is-focus {
  fill: #3474bc;
}

html.light .shock-mode-root .sml-geo__country.is-soft {
  opacity: 0.9;
}

/* Crisp institutional borders — refined at larger fitted scale */
html.light .shock-mode-root .sml-geo__border {
  fill: none;
  stroke: #9eb6cc;
  stroke-width: 0.38;
  stroke-opacity: 0.55;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}

html.light .shock-mode-root .sml-geo__border.is-focus {
  stroke: #eef5fb;
  stroke-width: 0.5;
  stroke-opacity: 0.9;
}

html.light .shock-mode-root .sml-map-viz {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}

/* Routes — thinner core, softer outer edge, no laser */
html.light .shock-mode-root .sml-flow-arc-glow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 0.28;
  opacity: 0.18;
  shape-rendering: geometricPrecision;
}

html.light .shock-mode-root .sml-flow-arc-glow--info {
  stroke: #60a5fa;
}

html.light .shock-mode-root .sml-flow-arc-glow--elevated {
  stroke: #fb923c;
  opacity: 0.22;
}

html.light .shock-mode-root .sml-flow-arc-glow--critical {
  stroke: #fb7185;
  opacity: 0.16;
}

html.light .shock-mode-root .sml-flow-arc {
  fill: none;
  stroke-width: 0.075;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.58;
  shape-rendering: geometricPrecision;
}

html.light .shock-mode-root .sml-flow-arc--info {
  opacity: 0.62;
}

html.light .shock-mode-root .sml-flow-arc--elevated {
  opacity: 0.72;
  stroke-width: 0.085;
}

html.light .shock-mode-root .sml-flow-arc--critical {
  opacity: 0.48;
  stroke-width: 0.08;
}

html.light .shock-mode-root .sml-flow-arc.is-focus,
html.light .shock-mode-root .sml-flow-arc-glow.is-focus {
  opacity: 0.92;
}

html.light .shock-mode-root .sml-flow-arc.is-focus {
  stroke-width: 0.095;
}

html.light .shock-mode-root .sml-flow-arc-glow.is-focus {
  stroke-width: 0.34;
  opacity: 0.28;
}

html.light .shock-mode-root .sml-flow-travel {
  fill: none;
  stroke: #93c5fd;
  stroke-width: 0.14;
  stroke-linecap: round;
  stroke-dasharray: 0.55 98;
  stroke-dashoffset: 0;
  opacity: 0;
  animation: sml-flow-travel var(--sml-flow-dur, 8.5s) cubic-bezier(0.42, 0, 0.58, 1) infinite;
  animation-delay: var(--sml-flow-delay, 0s);
  will-change: stroke-dashoffset, opacity;
}

html.light .shock-mode-root .sml-flow-travel--elevated {
  stroke: #fdba74;
  stroke-width: 0.155;
}

html.light .shock-mode-root .sml-flow-travel--critical {
  stroke: #fb7185;
}

@keyframes sml-flow-travel {
  0% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
  8% {
    opacity: 0.48;
  }
  45% {
    opacity: 0.22;
  }
  88% {
    opacity: 0;
  }
  100% {
    stroke-dashoffset: -99;
    opacity: 0;
  }
}

/* Telemetry nodes — tiny bright core + controlled halo */
html.light .shock-mode-root .sml-map-node__halo,
html.light .shock-mode-root .sml-map-node__pulse,
html.light .shock-mode-root .sml-map-node__core,
html.light .shock-mode-root .sml-map-node__spec {
  transform-box: fill-box;
  transform-origin: center;
}

html.light .shock-mode-root .sml-map-node__halo {
  opacity: 0.82;
  animation: sml-halo-breathe var(--sml-pulse-dur, 4s) ease-in-out infinite;
  animation-delay: var(--sml-pulse-delay, 0s);
}

html.light .shock-mode-root .sml-map-node__pulse {
  opacity: 0;
  animation: sml-hub-beacon var(--sml-pulse-dur, 4.2s) ease-out infinite;
  animation-delay: var(--sml-pulse-delay, 0s);
}

html.light .shock-mode-root .sml-map-node__core {
  fill: #1e40af;
  stroke: #ffffff;
  stroke-width: 0.06;
  opacity: 0.96;
}

html.light .shock-mode-root .sml-map-node--hub .sml-map-node__core {
  fill: #2563eb;
  animation: sml-core-breathe calc(var(--sml-pulse-dur, 3.8s) * 1.15) ease-in-out infinite;
  animation-delay: var(--sml-pulse-delay, 0s);
}

html.light .shock-mode-root .sml-map-node--elevated .sml-map-node__core {
  fill: #ea580c;
  stroke: #fff7ed;
}

html.light .shock-mode-root .sml-map-node--critical .sml-map-node__core {
  fill: #e11d48;
}

html.light .shock-mode-root .sml-map-node--cluster .sml-map-node__core {
  fill: #8aa3bb;
  stroke: none;
  opacity: 0.18;
}

html.light .shock-mode-root .sml-map-node__spec {
  fill: #ffffff;
  opacity: 0.62;
  pointer-events: none;
}

@keyframes sml-halo-breathe {
  0%,
  100% {
    opacity: 0.72;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.035);
  }
}

@keyframes sml-hub-beacon {
  0% {
    opacity: 0.18;
    transform: scale(0.94);
  }
  55% {
    opacity: 0;
    transform: scale(1.28);
  }
  100% {
    opacity: 0;
    transform: scale(1.28);
  }
}

@keyframes sml-core-breathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.97;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

@keyframes sml-rlabel-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes sml-pin-twinkle {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 0.85;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.light .shock-mode-root .sml-flow-travel,
  html.light .shock-mode-root .sml-map-node__halo,
  html.light .shock-mode-root .sml-map-node__pulse,
  html.light .shock-mode-root .sml-map-node__core,
  html.light .shock-mode-root .sml-rlabel,
  html.light .shock-mode-root .sml-rlabel__pin::after,
  html.light .shock-mode-root .sml-live__dot,
  html.light .shock-mode-root .sml-rist {
    animation: none !important;
  }

  html.light .shock-mode-root .sml-flow-travel {
    display: none;
  }

  html.light .shock-mode-root .sml-map-node__halo,
  html.light .shock-mode-root .sml-map-node__core {
    opacity: 1;
    transform: none;
  }

  html.light .shock-mode-root .sml-map-node__pulse {
    display: none;
  }
}

/* Region callouts — reference white cards */
html.light .shock-mode-root .sml-rlabel {
  position: absolute;
  z-index: 4;
  min-width: 92px;
  max-width: 118px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: start;
  cursor: pointer;
  font-family: inherit;
  transform: translate(-50%, calc(-100% - 4px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  animation: sml-rlabel-in 0.45s ease-out both;
}

html.light .shock-mode-root .sml-rlabel__body {
  width: 100%;
  padding: 8px 11px 9px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 5px 16px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

html.light .shock-mode-root .sml-rlabel__pin {
  width: 1.5px;
  height: 10px;
  background: rgba(100, 116, 139, 0.45);
  margin-top: 0;
}

html.light .shock-mode-root .sml-rlabel__pin::after {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  margin: 0 auto;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.16);
  transform: translateX(-1.25px);
  animation: sml-pin-twinkle 3.6s ease-in-out infinite;
}

html.light .shock-mode-root .sml-rlabel.is-dim {
  opacity: 0.2;
  pointer-events: none;
  filter: grayscale(0.25);
}

html.light .shock-mode-root .sml-rlabel__top {
  display: flex;
  align-items: center;
  gap: 5px;
}

html.light .shock-mode-root .sml-rlabel__mark {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.14);
  flex-shrink: 0;
}

html.light .shock-mode-root .sml-rlabel--watch .sml-rlabel__mark {
  background: var(--sm-orange-soft);
  box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.14);
}

html.light .shock-mode-root .sml-rlabel--stress .sml-rlabel__mark,
html.light .shock-mode-root .sml-rlabel--critical .sml-rlabel__mark {
  background: var(--sm-red);
  box-shadow: 0 0 0 2px rgba(225, 29, 72, 0.12);
}

html.light .shock-mode-root .sml-rlabel__name {
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.2;
  letter-spacing: 0;
  font-synthesis: none;
}

html.light .shock-mode-root .sml-rlabel__pct {
  margin-top: 3px;
  font-size: 20px;
  font-weight: 600;
  color: #0f172a;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
  line-height: 1;
  letter-spacing: 0;
  font-synthesis: none;
}

html.light .shock-mode-root .sml-rlabel__pct.semantic-negative {
  color: var(--sm-red);
}

html.light .shock-mode-root .sml-rlabel__pct.semantic-positive {
  color: var(--sm-green);
}

html.light .shock-mode-root .sml-rlabel__pct.semantic-warning {
  color: var(--sm-orange);
}

html.light .shock-mode-root .sml-rlabel--stress .sml-rlabel__pct,
html.light .shock-mode-root .sml-rlabel--critical .sml-rlabel__pct {
  color: var(--sm-red);
}

html.light .shock-mode-root .sml-rlabel--watch .sml-rlabel__pct {
  color: var(--sm-orange);
}

html.light .shock-mode-root .sml-rlabel__sub {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 400;
  color: #94a3b8;
  line-height: 1.2;
}

html.light .shock-mode-root .sml-legend {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  direction: ltr;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--sm-muted);
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--sm-border);
  box-shadow: var(--sm-shadow);
}

html.light .shock-mode-root .sml-legend i {
  width: 132px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #93c5fd, #fdba74 55%, #ea580c);
}

html.light .shock-mode-root .sml-rlabel:focus,
html.light .shock-mode-root .sml-rlabel:focus-visible {
  outline: none;
}

html.light .shock-mode-root .sml-rlabel.is-active {
  outline: none;
  box-shadow: none;
  z-index: 5;
}

html.light .shock-mode-root .sml-rlabel.is-active .sml-rlabel__body {
  border: 1.5px solid #3b82f6;
  background: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 0 0 3px rgba(59, 130, 246, 0.08),
    0 6px 18px rgba(15, 23, 42, 0.08);
  padding: 8px 11px 9px;
}

html.light .shock-mode-root .sml-rlabel.is-active .sml-rlabel__name {
  font-size: 12.5px;
}

html.light .shock-mode-root .sml-rlabel.is-active .sml-rlabel__pct {
  font-size: 22px;
}

html.light .shock-mode-root .sml-rlabel.is-active .sml-rlabel__mark {
  width: 6px;
  height: 6px;
  background: #2563eb;
  box-shadow: 0 0 0 2.5px rgba(37, 99, 235, 0.2);
}

html.light .shock-mode-root .sml-rlabel.is-soft-dim {
  opacity: 0.86;
}

/* Selected-region: quiet unrelated routes/nodes; elevate focused node */
html.light .shock-mode-root .sml-map.is-region-focus .sml-flow-layer > g.is-dimmed,
html.light .shock-mode-root .sml-map.is-region-focus .sml-flow-travel.is-dimmed,
html.light .shock-mode-root .sml-map.is-region-focus .sml-map-node.is-dimmed {
  opacity: 0.48;
}

html.light .shock-mode-root .sml-map.is-region-focus .sml-map-node.is-focus .sml-map-node__halo {
  opacity: 1;
  transform: scale(1.1);
}

html.light .shock-mode-root .sml-map.is-region-focus .sml-map-node.is-focus .sml-map-node__core {
  fill: #1d4ed8;
  stroke: #ffffff;
  stroke-width: 0.07;
}

/* Region Intelligence Strip — premium institutional 5-zone surface */
html.light .shock-mode-root .sml-rist {
  --rist-ink: #141518;
  --rist-ink-2: #4b5059;
  --rist-ink-3: #7b818b;
  --rist-line: rgba(20, 21, 24, 0.08);
  --rist-pearl: #fbfbfa;
  --rist-stable: #15803d;
  --rist-watch: #b45309;
  --rist-severe: #dc2626;
  --rist-partial: #aeb4be;

  position: absolute;
  left: 50%;
  bottom: 58px;
  transform: translateX(-50%);
  z-index: 6;
  width: min(94%, 1240px);
  height: 144px;
  box-sizing: border-box;
  display: grid;
  /* RTL: STATUS | IMPACT | DRIVER | REGION | VISUAL (right → left) */
  grid-template-columns: minmax(176px, 1.08fr) minmax(198px, 1.22fr) minmax(220px, 1.38fr) minmax(140px, 0.92fr) 192px;
  direction: rtl;
  align-items: stretch;
  gap: 0;
  padding: 20px 22px;
  border-radius: 14px;
  border: 1px solid var(--rist-line);
  background: linear-gradient(180deg, #ffffff 0%, var(--rist-pearl) 100%);
  box-shadow: 0 1px 2px rgba(20, 21, 24, 0.03), 0 12px 28px -18px rgba(20, 21, 24, 0.18);
  overflow: hidden;
  animation: sml-rist-in 220ms ease-out both;
  pointer-events: auto;
  font-family: 'Tajawal', 'IBM Plex Sans Arabic', sans-serif;
  font-synthesis: none;
  letter-spacing: 0;
  text-rendering: geometricPrecision;
}

@keyframes sml-rist-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

html.light .shock-mode-root .sml-rist__zone {
  min-width: 0;
  min-height: 0;
  padding: 2px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  border-inline-start: 1px solid var(--rist-line);
  box-sizing: border-box;
}

html.light .shock-mode-root .sml-rist__zone--status {
  border-inline-start: 0;
  padding-inline-start: 2px;
}

html.light .shock-mode-root .sml-rist__zone--visual {
  padding: 0 2px 0 4px;
  justify-content: center;
  align-items: center;
  border-inline-start: 1px solid var(--rist-line);
}

html.light .shock-mode-root .sml-rist__head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rist-ink-3);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.1;
  margin: 0 0 2px;
}

html.light .shock-mode-root .sml-rist__status {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--rist-ink);
  line-height: 1.25;
}

html.light .shock-mode-root .sml-rist__status-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--rist-partial);
  box-shadow: 0 0 0 2px rgba(174, 180, 190, 0.28);
}

html.light .shock-mode-root .sml-rist__status-dot--stable {
  background: var(--rist-stable);
  box-shadow: 0 0 0 2px rgba(21, 128, 61, 0.16);
}

html.light .shock-mode-root .sml-rist__status-dot--watch {
  background: var(--rist-watch);
  box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.16);
}

html.light .shock-mode-root .sml-rist__status-dot--severe {
  background: var(--rist-severe);
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.16);
}

html.light .shock-mode-root .sml-rist__status-dot--partial {
  background: linear-gradient(145deg, #f7f8fa 0%, #c5cad3 100%);
  box-shadow: 0 0 0 1px rgba(72, 78, 88, 0.35), 0 0 0 2.5px rgba(197, 202, 211, 0.25);
}

html.light .shock-mode-root .sml-rist__status-dot--unavailable {
  background: #8a9099;
  box-shadow: 0 0 0 2px rgba(138, 144, 153, 0.16);
}

html.light .shock-mode-root .sml-rist__support {
  margin: 0;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--rist-ink-2);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

html.light .shock-mode-root .sml-rist__time {
  display: inline-flex;
  align-items: center;
  margin-top: 2px;
  font-size: 10.75px;
  font-weight: 500;
  color: var(--rist-ink-3);
  line-height: 1.2;
}

html.light .shock-mode-root .sml-rist__time b {
  font-weight: 600;
  color: var(--rist-ink-2);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

html.light .shock-mode-root .sml-rist__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

html.light .shock-mode-root .sml-rist__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-height: 29px;
  height: 29px;
  border-bottom: 1px solid rgba(20, 21, 24, 0.06);
  box-sizing: border-box;
  direction: ltr; /* symbol → value → indicator as a deliberate LTR island */
}

html.light .shock-mode-root .sml-rist__row:last-child {
  border-bottom: 0;
}

html.light .shock-mode-root .sml-rist__row--empty {
  grid-template-columns: 1fr;
  height: auto;
  min-height: 29px;
  padding: 4px 0;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--rist-ink-3);
}

html.light .shock-mode-root .sml-rist__sym {
  font-size: 12.25px;
  font-weight: 500;
  color: var(--rist-ink-2);
  font-variant-numeric: tabular-nums lining-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.light .shock-mode-root .sml-rist__sd {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rist-ink-2);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  white-space: nowrap;
}

html.light .shock-mode-root .sml-rist__sd.is-up {
  color: var(--rist-stable);
}

html.light .shock-mode-root .sml-rist__sd.is-down {
  color: var(--rist-severe);
}

html.light .shock-mode-root .sml-rist__dir {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  flex: none;
}

html.light .shock-mode-root .sml-rist__dir--up {
  background: var(--rist-stable);
}

html.light .shock-mode-root .sml-rist__dir--down {
  background: var(--rist-severe);
}

html.light .shock-mode-root .sml-rist__driver {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--rist-ink);
  line-height: 1.3;
}

html.light .shock-mode-root .sml-rist__driver--empty {
  color: var(--rist-ink-3);
  font-weight: 500;
}

html.light .shock-mode-root .sml-rist__driver-metric {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--rist-ink-2);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  line-height: 1.2;
}

html.light .shock-mode-root .sml-rist__driver-ctx {
  margin: 0;
  font-size: 11.75px;
  font-weight: 500;
  color: var(--rist-ink-3);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

html.light .shock-mode-root .sml-rist__region-name {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

html.light .shock-mode-root .sml-rist__region-name strong {
  font-size: 16px;
  font-weight: 600;
  color: var(--rist-ink);
  line-height: 1.15;
}

html.light .shock-mode-root .sml-rist__pin {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rist-partial);
  flex-shrink: 0;
}

html.light .shock-mode-root .sml-rist__pin--stable {
  background: var(--rist-stable);
}

html.light .shock-mode-root .sml-rist__pin--watch {
  background: var(--rist-watch);
}

html.light .shock-mode-root .sml-rist__pin--severe {
  background: var(--rist-severe);
}

html.light .shock-mode-root .sml-rist__pin--partial {
  background: linear-gradient(145deg, #f7f8fa 0%, #c5cad3 100%);
  box-shadow: 0 0 0 1px rgba(72, 78, 88, 0.35);
}

html.light .shock-mode-root .sml-rist__pin--unavailable {
  background: #8a9099;
}

html.light .shock-mode-root .sml-rist__monitor {
  font-size: 11.25px;
  font-weight: 500;
  color: var(--rist-ink-3);
  line-height: 1.2;
}

html.light .shock-mode-root .sml-rist__score {
  margin: 2px 0 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--rist-ink);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

html.light .shock-mode-root .sml-rist[data-coverage='PARTIAL'] .sml-rist__score,
html.light .shock-mode-root .sml-rist[data-coverage='UNAVAILABLE'] .sml-rist__score {
  color: #5c636e;
  font-size: 23px;
}

html.light .shock-mode-root .sml-rist__coverage {
  margin-top: 2px;
  font-size: 11.25px;
  font-weight: 500;
  color: var(--rist-ink-2);
  line-height: 1.2;
}

html.light .shock-mode-root .sml-rist__coverage--partial,
html.light .shock-mode-root .sml-rist__coverage--unavailable {
  color: #6b717a;
}

html.light .shock-mode-root .sml-rist__photo {
  width: 172px;
  max-width: 172px;
  height: 106px;
  border-radius: 13px;
  overflow: hidden;
  border: 1px solid rgba(20, 21, 24, 0.07);
  background: #eceff3;
  flex-shrink: 0;
}

html.light .shock-mode-root .sml-rist__photo--neutral {
  background: linear-gradient(145deg, #f3f4f6 0%, #e8eaee 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

html.light .shock-mode-root .sml-rist__neutral {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--rist-ink-3);
  text-align: center;
  padding: 10px;
}

html.light .shock-mode-root .sml-rist__neutral span {
  font-size: 12px;
  font-weight: 500;
  color: var(--rist-ink-2);
}

html.light .shock-mode-root .sml-rist__photo-frame {
  display: block;
  width: 100%;
  height: 100%;
}

html.light .shock-mode-root .sml-rist__photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: contrast(1.03) saturate(0.94);
}

/* Tablet — 2-row composition, hierarchy preserved */
@media (max-width: 1200px) {
  html.light .shock-mode-root .sml-rist {
    width: min(96%, 980px);
    height: auto;
    min-height: 248px;
    grid-template-columns: 1.1fr 1.2fr 1fr;
    grid-template-areas:
      'status impact region'
      'driver driver visual';
    bottom: 48px;
    padding: 16px 18px;
    gap: 0;
  }

  html.light .shock-mode-root .sml-rist__zone--status { grid-area: status; border-inline-start: 0; }
  html.light .shock-mode-root .sml-rist__zone--impact { grid-area: impact; }
  html.light .shock-mode-root .sml-rist__zone--driver { grid-area: driver; border-top: 1px solid var(--rist-line); border-inline-start: 0; padding-top: 12px; }
  html.light .shock-mode-root .sml-rist__zone--region { grid-area: region; }
  html.light .shock-mode-root .sml-rist__zone--visual {
    grid-area: visual;
    border-top: 1px solid var(--rist-line);
    border-inline-start: 1px solid var(--rist-line);
    padding-top: 12px;
  }

  html.light .shock-mode-root .sml-rist__zone {
    padding: 8px 12px;
  }

  html.light .shock-mode-root .sml-rist__photo {
    width: 160px;
    max-width: 160px;
    height: 98px;
  }
}

/* Mobile — Region+Status → Driver → Impact → Visual */
@media (max-width: 720px) {
  html.light .shock-mode-root .sml-rist {
    width: calc(100% - 20px);
    min-height: 0;
    height: auto;
    bottom: 16px;
    padding: 14px 14px 16px;
    grid-template-columns: 1fr;
    grid-template-areas:
      'region'
      'status'
      'driver'
      'impact'
      'visual';
    border-radius: 12px;
  }

  html.light .shock-mode-root .sml-rist__zone {
    border-inline-start: 0;
    border-top: 1px solid var(--rist-line);
    padding: 12px 2px;
  }

  html.light .shock-mode-root .sml-rist__zone--region {
    border-top: 0;
    padding-top: 2px;
  }

  html.light .shock-mode-root .sml-rist__zone--visual {
    border-inline-start: 0;
    align-items: stretch;
  }

  html.light .shock-mode-root .sml-rist__photo {
    width: 100%;
    max-width: none;
    height: 120px;
    border-radius: 12px;
  }

  html.light .shock-mode-root .sml-rist__score {
    font-size: 23px;
  }

  html.light .shock-mode-root .sml-rist__status,
  html.light .shock-mode-root .sml-rist__driver {
    font-size: 14.5px;
  }
}

/* Strip preview QA frame — force mobile composition inside desktop viewport */
html.light .shock-mode-root .sml-strip-mobile-frame .sml-rist {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  grid-template-columns: 1fr !important;
  grid-template-areas:
    'region'
    'status'
    'driver'
    'impact'
    'visual' !important;
  padding: 14px !important;
  border-radius: 12px !important;
}

html.light .shock-mode-root .sml-strip-mobile-frame .sml-rist__zone {
  border-inline-start: 0 !important;
  border-top: 1px solid var(--rist-line) !important;
  padding: 12px 2px !important;
}

html.light .shock-mode-root .sml-strip-mobile-frame .sml-rist__zone--region {
  grid-area: region !important;
  border-top: 0 !important;
  padding-top: 2px !important;
}

html.light .shock-mode-root .sml-strip-mobile-frame .sml-rist__zone--status {
  grid-area: status !important;
}

html.light .shock-mode-root .sml-strip-mobile-frame .sml-rist__zone--driver {
  grid-area: driver !important;
}

html.light .shock-mode-root .sml-strip-mobile-frame .sml-rist__zone--impact {
  grid-area: impact !important;
}

html.light .shock-mode-root .sml-strip-mobile-frame .sml-rist__zone--visual {
  grid-area: visual !important;
  border-inline-start: 0 !important;
  align-items: stretch !important;
}

html.light .shock-mode-root .sml-strip-mobile-frame .sml-rist__photo {
  width: 100% !important;
  max-width: none !important;
  height: 120px !important;
}

/* ── Bottom panels — reference-matched Light workspace ───────── */
html.light .shock-mode-root .sml-bottom {
  display: grid;
  direction: ltr;
  grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr);
  gap: 16px;
  align-items: stretch;
  grid-auto-rows: auto;
}

html.light .shock-mode-root .sml-bottom > .sml-card {
  direction: rtl;
  min-width: 0;
  min-height: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfa 100%);
  border: 1px solid var(--sm-border);
  border-radius: 14px;
  box-shadow: var(--sm-shadow);
  overflow: hidden;
}

html.light .shock-mode-root .sml-bottom > .sml-card--rx {
  width: auto;
  max-width: none;
  flex: unset;
  padding: 0 !important;
}

html.light .shock-mode-root .sml-bottom > .sml-card--feed {
  padding: 16px 17px 16px;
}

html.light .shock-mode-root .sml-bottom > .sml-card > .sml-card__head {
  margin-bottom: 0;
  padding: 0 0 12px;
  border-bottom: 1px solid #f1f4f8;
  flex-shrink: 0;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
}

html.light .shock-mode-root .sml-bottom > .sml-card > .sml-card__head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  font-synthesis: none;
  letter-spacing: 0;
  color: #0b1f3a;
  line-height: 1.25;
}

html.light .shock-mode-root .sml-bottom > .sml-card--feed .sml-ico {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid #f3e8d8;
  background: #fffaf3;
  color: #ea580c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

html.light .shock-mode-root .sml-bottom > .sml-card--feed .sml-ico svg {
  width: 13px;
  height: 13px;
}

html.light .shock-mode-root .sml-right .sml-market__row,
html.light .shock-mode-root .sml-right .sml-sectors__row {
  min-height: 40px;
  padding: 7px 0;
}

html.light .shock-mode-root .sml-right .sml-market__price {
  min-width: 0;
  text-align: end;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
}

html.light .shock-mode-root .sml-map-card {
  border: 1px solid var(--sm-border);
  box-shadow: var(--sm-shadow);
}

html.light .shock-mode-root .sml-feed-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 12px;
  flex-shrink: 0;
  direction: rtl;
  justify-content: flex-start;
}

html.light .shock-mode-root .sml-feed-tabs button {
  height: 30px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid #e8edf3;
  background: #fff;
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  font-synthesis: none;
  letter-spacing: 0;
  cursor: pointer;
}

html.light .shock-mode-root .sml-feed-tabs button.is-active {
  background: #0b1f3a;
  color: #fff;
  border-color: #0b1f3a;
  font-weight: 500;
}

/* ── Live reaction panel ─────────────────────────────────────── */
html.light .shock-mode-root .sml-card--rx {
  padding: 0 !important;
  overflow: hidden;
  min-height: 0;
  height: auto;
  border-color: #e6ebf2;
  box-shadow: 0 1px 2px rgba(7, 17, 31, 0.03), 0 8px 22px rgba(7, 17, 31, 0.035);
}

html.light .shock-mode-root .sml-rx {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: auto;
  width: 100%;
  max-width: 100%;
  background: #ffffff;
  font-family: 'Tajawal', 'IBM Plex Sans Arabic', sans-serif;
  font-synthesis: none;
  letter-spacing: 0;
  text-rendering: geometricPrecision;
}

html.light .shock-mode-root .sml-rx .num {
  font-family: 'Tajawal', 'IBM Plex Sans Arabic', sans-serif;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  direction: ltr;
  unicode-bidi: isolate;
  letter-spacing: 0;
  font-synthesis: none;
}

html.light .shock-mode-root .sml-rx__head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid #f1f4f8;
  direction: rtl;
  flex-shrink: 0;
  min-height: 40px;
  box-sizing: content-box;
}

html.light .shock-mode-root .sml-rx__head-start {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  direction: rtl;
}

html.light .shock-mode-root .sml-rx__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #0b1f3a;
  line-height: 1.25;
  font-synthesis: none;
  letter-spacing: 0;
}

html.light .shock-mode-root .sml-rx__icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid #e8eef5;
  background: #f7f9fc;
  color: #6b849e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: default;
}

html.light .shock-mode-root .sml-rx__icon svg {
  width: 13px;
  height: 13px;
}

html.light .shock-mode-root .sml-rx__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 18px 0;
  direction: rtl;
  flex-shrink: 0;
}

html.light .shock-mode-root .sml-rx__filters button {
  height: 30px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid #e8edf3;
  background: #fff;
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  font-synthesis: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

html.light .shock-mode-root .sml-rx__filters button.is-on {
  background: #0b1f3a;
  border-color: #0b1f3a;
  color: #fff;
  font-weight: 500;
}

/* Body: compact summary (left) | divider | chart */
html.light .shock-mode-root .sml-rx__main {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 76px 1px minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 0;
  padding: 12px 18px 8px 12px;
  direction: ltr;
  min-height: 0;
  align-items: stretch;
  min-width: 0;
}

html.light .shock-mode-root .sml-rx__summary {
  direction: rtl;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  justify-self: start;
  width: 76px;
  min-width: 72px;
  max-width: 78px;
  box-sizing: border-box;
  gap: 10px;
  padding: 4px 0 0;
  margin: 0;
  overflow: visible;
}

html.light .shock-mode-root .sml-rx__vdiv {
  width: 1px;
  align-self: stretch;
  background: #eef2f6;
  margin: 2px 0;
}

html.light .shock-mode-root .sml-rx__asset {
  display: flex;
  flex-direction: column;
  /* RTL: flex-end = physical left — pin labels/values flush-left */
  align-items: flex-end;
  gap: 3px;
  width: 100%;
}

html.light .shock-mode-root .sml-rx__asset-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  direction: ltr;
  font-size: 11.5px;
  font-weight: 500;
  color: #64748b;
  line-height: 1.15;
  font-synthesis: none;
  letter-spacing: 0;
}

html.light .shock-mode-root .sml-rx__asset-label i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

html.light .shock-mode-root .sml-rx__asset-val {
  padding-inline-start: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.15;
  font-synthesis: none;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}

html.light .shock-mode-root .sml-rx__asset-pct {
  display: none !important;
}

/* Chart / build surface
 * LOCKED (Light market-reaction geometry):
 * LIVE/READY → min-height 210px
 * Do not change unless a proven responsive bug exists.
 */
html.light .shock-mode-root .sml-rx__chart {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  box-sizing: border-box;
  /* Tiny top inset for Y caption above +2.0 — inside locked height, not added to it */
  padding-top: 12px;
  width: 100%;
  min-width: 0;
  min-height: 210px;
  height: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fcfdff;
  overflow: hidden;
}

/* Y-axis HTML gutter — true CSS px (not SVG viewBox units) */
html.light .shock-mode-root .sml-rx__y-axis {
  position: relative;
  flex: 0 0 38px;
  width: 38px;
  min-width: 38px;
  max-width: 38px;
  align-self: stretch;
  z-index: 2;
  pointer-events: none;
}

html.light .shock-mode-root .sml-rx__y-caption {
  position: absolute;
  /* Centered on the tick glyphs (right-aligned in 38px gutter), not the plot edge */
  top: 4px;
  left: 24.5px;
  right: auto;
  transform: translateX(-50%);
  width: max-content;
  z-index: 3;
  font-size: 10.5px;
  font-weight: 500;
  color: #64748b;
  line-height: 1;
  font-family: inherit;
  font-synthesis: none;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: visible;
  direction: rtl;
  pointer-events: none;
}

html.light .shock-mode-root .sml-rx__y-tick {
  position: absolute;
  inset-inline-end: 4px;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 500;
  color: #475569;
  line-height: 1;
  font-family: inherit;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-synthesis: none;
  letter-spacing: 0;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
  text-align: end;
}

html.light .shock-mode-root .sml-rx__plot {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
}

html.light .shock-mode-root .sml-rx__svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* Horizontal grid — clearer on light wash, still soft */
html.light .shock-mode-root .sml-rx__grid line {
  stroke: #e2e8f0;
  stroke-width: 1;
}

/* Vertical guides — slightly quieter than horizontals, but readable */
html.light .shock-mode-root .sml-rx__v {
  stroke: #e6ebf2 !important;
}

/* X-axis HTML ticks — true CSS px */
html.light .shock-mode-root .sml-rx__x-axis {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

html.light .shock-mode-root .sml-rx__x-tick {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
  line-height: 1;
  font-family: inherit;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-synthesis: none;
  letter-spacing: 0;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
}

html.light .shock-mode-root .sml-rx__now-line line {
  stroke: #94a3b8;
  stroke-width: 1.25;
  stroke-dasharray: 3.5 4;
}

html.light .shock-mode-root .sml-rx__now-pill,
html.light .shock-mode-root .sml-rx__now-clock {
  position: absolute;
  transform: translateX(-50%);
  pointer-events: none;
  white-space: nowrap;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  font-synthesis: none;
  letter-spacing: 0;
}

html.light .shock-mode-root .sml-rx__now-pill {
  top: 8px;
  background: #e8eef5;
  color: #475569;
}

html.light .shock-mode-root .sml-rx__now-clock {
  bottom: 8px;
  background: #0b1f3a;
  color: #fff;
  font-variant-numeric: tabular-nums lining-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

html.light .shock-mode-root .sml-rx__ends {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

html.light .shock-mode-root .sml-rx__end {
  position: absolute;
  transform: translate(8px, -50%);
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  color: #fff;
  font-size: 10.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  direction: ltr;
  unicode-bidi: isolate;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
  white-space: nowrap;
}

html.light .shock-mode-root .sml-rx__tip {
  position: absolute;
  top: 18%;
  z-index: 3;
  transform: translateX(-50%);
  min-width: 140px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e8eef5;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  pointer-events: none;
}

html.light .shock-mode-root .sml-rx__tip-time {
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: #0f172a;
  font-variant-numeric: tabular-nums lining-nums;
  direction: ltr;
  unicode-bidi: isolate;
  font-synthesis: none;
  letter-spacing: 0;
}

html.light .shock-mode-root .sml-rx__tip ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

html.light .shock-mode-root .sml-rx__tip li {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  direction: rtl;
}

html.light .shock-mode-root .sml-rx__tip li i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

html.light .shock-mode-root .sml-rx__tip li span {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
}

html.light .shock-mode-root .sml-rx__tip li b {
  font-size: 12px;
  font-weight: 500;
  color: #0f172a;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  direction: ltr;
  unicode-bidi: isolate;
}

/* Building state — compact panel height, no fake chart */
html.light .shock-mode-root .sml-rx.is-building .sml-rx__head {
  padding: 12px 18px 8px;
  min-height: 36px;
}

html.light .shock-mode-root .sml-rx.is-building .sml-rx__filters {
  padding: 8px 18px 0;
}

html.light .shock-mode-root .sml-rx.is-building .sml-rx__main {
  flex: 0 1 auto;
  padding: 8px 18px 6px 12px;
}

html.light .shock-mode-root .sml-rx.is-building .sml-rx__summary {
  gap: 6px;
  padding-top: 0;
}

html.light .shock-mode-root .sml-rx.is-building .sml-rx__asset {
  gap: 2px;
}

/* LOCKED building chart geometry (Light market-reaction):
 * height 160px · card ~334px @1680 · SVG frame visible · ~48px overlay breathing space
 * Do not change unless a proven responsive bug exists. Never revert to ~120px invisible.
 */
html.light .shock-mode-root .sml-rx.is-building .sml-rx__chart {
  background: #fcfdff;
  min-height: 160px;
  height: 160px;
}

html.light .shock-mode-root .sml-rx.is-building .sml-rx__foot {
  padding: 6px 18px 8px;
}

html.light .shock-mode-root .sml-rx__build {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
  pointer-events: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 12px 16px;
  width: auto;
  box-sizing: border-box;
}

html.light .shock-mode-root .sml-rx__build-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 500;
  color: #15803d;
  line-height: 1;
  font-synthesis: none;
  letter-spacing: 0;
}

html.light .shock-mode-root .sml-rx__build-live::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.12);
}

html.light .shock-mode-root .sml-rx__build-title {
  margin: 0 0 4px;
  font-size: 14.5px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.25;
  font-synthesis: none;
  letter-spacing: 0;
}

html.light .shock-mode-root .sml-rx__build-copy {
  margin: 0 0 8px;
  max-width: 248px;
  font-size: 12px;
  font-weight: 400;
  color: #94a3b8;
  line-height: 1.5;
  font-synthesis: none;
  letter-spacing: 0;
}

html.light .shock-mode-root .sml-rx__build-track {
  width: 132px;
  height: 3px;
  margin: 0 0 6px;
  border-radius: 999px;
  background: #eef2f6;
  overflow: hidden;
}

html.light .shock-mode-root .sml-rx__build-track > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #60a5fa;
}

html.light .shock-mode-root .sml-rx__build-count {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: #94a3b8;
  font-synthesis: none;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

html.light .shock-mode-root .sml-rx__build-count .num {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Footer */
html.light .shock-mode-root .sml-rx__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px 14px;
  border-top: 1px solid #f1f4f8;
  direction: ltr;
  flex-wrap: wrap;
  margin-top: 0;
  flex-shrink: 0;
}

html.light .shock-mode-root .sml-rx__foot-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 400;
  color: #94a3b8;
  direction: ltr;
  line-height: 1;
  font-synthesis: none;
  letter-spacing: 0;
}

html.light .shock-mode-root .sml-rx__foot-status svg {
  width: 12px;
  height: 12px;
  color: #cbd5e1;
  flex-shrink: 0;
}

html.light .shock-mode-root .sml-rx__foot-status b {
  font-weight: 500;
  color: #64748b;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  direction: ltr;
  unicode-bidi: isolate;
}

html.light .shock-mode-root .sml-rx__foot-status em {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.12);
  font-style: normal;
  flex-shrink: 0;
}

html.light .shock-mode-root .sml-rx__foot-status strong {
  font-weight: 500;
  color: #16a34a;
  font-size: 11px;
}

html.light .shock-mode-root .sml-rx__foot-tools {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

html.light .shock-mode-root .sml-rx__ranges {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  direction: rtl;
}

html.light .shock-mode-root .sml-rx__ranges button {
  height: 24px;
  min-width: 32px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid #e8edf3;
  background: #fff;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 400;
  font-family: inherit;
  font-synthesis: none;
  letter-spacing: 0;
  cursor: pointer;
}

html.light .shock-mode-root .sml-rx__ranges button.is-on {
  background: #0b1f3a;
  border-color: #0b1f3a;
  color: #fff;
  font-weight: 500;
}

html.light .shock-mode-root .sml-rx__foot-caption {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 400;
  color: #64748b;
  direction: rtl;
  line-height: 1;
  font-synthesis: none;
  letter-spacing: 0;
}

html.light .shock-mode-root .sml-rx__foot-caption svg {
  width: 12px;
  height: 12px;
  color: #94a3b8;
}

@media (max-width: 980px) {
  html.light .shock-mode-root .sml-rx__main {
    grid-template-columns: 1fr;
  }
  html.light .shock-mode-root .sml-rx__vdiv {
    display: none;
  }
  html.light .shock-mode-root .sml-rx__summary {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px 22px;
  }
}

/* ── Feed (monitoring) ───────────────────────────────────────── */
html.light .shock-mode-root .sml-card--feed {
  justify-content: flex-start;
}

html.light .shock-mode-root .sml-feed {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
}

html.light .shock-mode-root .sml-feed__row {
  display: grid;
  grid-template-columns: 40px 6px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 40px;
  padding: 7px 0;
  border-bottom: 1px solid #eef2f6;
  direction: rtl;
}

html.light .shock-mode-root .sml-feed__row:last-child {
  border-bottom: 0;
}

html.light .shock-mode-root .sml-feed__time {
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  line-height: 1.3;
  font-synthesis: none;
  letter-spacing: 0;
}

html.light .shock-mode-root .sml-feed__row > i {
  width: 5px;
  height: 5px;
  margin-top: 0;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
}

html.light .shock-mode-root .sml-feed__row > i[data-sev='warn'],
html.light .shock-mode-root .sml-feed__row > i[data-sev='risk'] {
  background: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
}

html.light .shock-mode-root .sml-feed__row > i[data-sev='ok'] {
  background: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
}

html.light .shock-mode-root .sml-feed__row > i[data-sev='info'],
html.light .shock-mode-root .sml-feed__row > i[data-sev='watch'] {
  background: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
}

html.light .shock-mode-root .sml-feed__row p {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.4;
  font-variant-numeric: lining-nums tabular-nums;
  font-synthesis: none;
  letter-spacing: 0;
  min-width: 0;
  writing-mode: horizontal-tb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html.light .shock-mode-root .sml-feed__tag {
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid #e8edf3;
  background: #f8fafc;
  color: #64748b;
  font-size: 10.5px;
  font-weight: 500;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-synthesis: none;
  letter-spacing: 0;
}

html.light .shock-mode-root .sml-card--feed .sml-link--footer {
  margin-top: 13px;
  padding-top: 0;
  margin-bottom: 0;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  color: #3b82f6;
  font-synthesis: none;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 0;
  cursor: pointer;
  align-self: flex-start;
}

html.light .shock-mode-root .sml-empty {
  margin: 8px 0;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--sm-muted);
  line-height: 1.5;
}

/* Premium unavailable scaffolding */
html.light .shock-mode-root .sml-soft-empty {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0 2px;
  min-height: 132px;
  justify-content: center;
}

html.light .shock-mode-root .sml-soft-empty__rows {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

html.light .shock-mode-root .sml-soft-empty__rows > span {
  display: block;
  height: 10px;
  width: var(--sml-empty-w, 72%);
  max-width: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #eef2f6 0%, #f7f9fc 50%, #eef2f6 100%);
  background-size: 180% 100%;
  animation: sml-soft-shimmer 2.4s ease-in-out infinite;
  box-shadow: inset 0 0 0 1px rgba(228, 233, 240, 0.8);
}

html.light .shock-mode-root .sml-soft-empty > p {
  margin: 2px 0 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--sm-muted);
  line-height: 1.45;
  text-align: center;
}

@keyframes sml-soft-shimmer {
  0%,
  100% {
    background-position: 100% 0;
  }
  50% {
    background-position: 0 0;
  }
}

/* ── Market / sectors ────────────────────────────────────────── */
html.light .shock-mode-root .sml-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 20px;
  min-width: 0;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
  border: 1px solid transparent;
  line-height: 1;
  letter-spacing: 0;
  font-synthesis: none;
  unicode-bidi: isolate;
  direction: ltr;
  box-sizing: border-box;
}

html.light .shock-mode-root .sml-pill__val {
  font-weight: 600;
  font-size: 11px;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
  letter-spacing: 0;
  line-height: 1;
}

html.light .shock-mode-root .sml-pill__unit {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.36;
  letter-spacing: 0.02em;
  margin-inline-start: 1px;
  line-height: 1;
  transform: translateY(0.5px);
}

html.light .shock-mode-root .sml-pill.is-up {
  color: #166534;
  background: rgba(22, 163, 74, 0.08);
  border-color: rgba(22, 101, 52, 0.12);
  box-shadow: none;
}

html.light .shock-mode-root .sml-pill.is-down {
  color: #be123c;
  background: rgba(225, 29, 72, 0.07);
  border-color: rgba(190, 18, 60, 0.12);
  box-shadow: none;
}

html.light .shock-mode-root .sml-pill i {
  font-size: 7px;
  font-style: normal;
  line-height: 1;
}

html.light .shock-mode-root .sml-market,
html.light .shock-mode-root .sml-sectors {
  display: flex;
  flex-direction: column;
}

html.light .shock-mode-root .sml-market__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4rem 3.9rem;
  gap: 6px;
  align-items: center;
  min-height: 40px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.62);
}

html.light .shock-mode-root .sml-sectors__row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) 3.9rem;
  gap: 6px;
  align-items: center;
  min-height: 40px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.62);
}

html.light .shock-mode-root .sml-market__row .sml-pill,
html.light .shock-mode-root .sml-sectors__row .sml-pill {
  justify-self: end;
  width: 100%;
  max-width: 3.9rem;
}

html.light .shock-mode-root .sml-market__row:last-child,
html.light .shock-mode-root .sml-sectors__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

html.light .shock-mode-root .sml-market__name,
html.light .shock-mode-root .sml-sectors__name {
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  line-height: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.light .shock-mode-root .sml-market__price {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
  text-align: end;
  min-width: 0;
  letter-spacing: 0;
  font-synthesis: none;
  direction: ltr;
  unicode-bidi: isolate;
  line-height: 1;
}

html.light .shock-mode-root .sml-sectors__ico {
  color: var(--sm-muted);
  font-size: 8px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1200px) {
  html.light .shock-mode-root .sm-light-shell {
    padding: 16px 16px 24px;
    overflow-x: clip;
  }

  html.light .shock-mode-root .sml-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  html.light .shock-mode-root .sml-main {
    gap: 16px;
  }

  html.light .shock-mode-root .sml-main-head {
    grid-template-columns: 1fr;
  }

  html.light .shock-mode-root .sml-live {
    justify-self: start;
  }

  html.light .shock-mode-root .sml-bottom {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  html.light .shock-mode-root .sml-left,
  html.light .shock-mode-root .sml-right {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
}

@media (max-width: 720px) {
  html.light .shock-mode-root .sm-light-shell {
    padding: 12px 12px 20px;
    overflow-x: clip;
  }

  html.light .shock-mode-root .sml-title-block h1 {
    font-size: 24px;
    line-height: 1.15;
  }

  html.light .shock-mode-root .sml-left,
  html.light .shock-mode-root .sml-right {
    grid-template-columns: 1fr;
  }

  html.light .shock-mode-root .sml-rx__main {
    grid-template-columns: 1fr;
  }

  html.light .shock-mode-root .sml-regions {
    max-width: 100%;
  }
}