.global-page { container: global-page / inline-size; }
.public-global-page.public-glass .global-page { padding-bottom: 2rem; }
/* Keep the same shell, independent navigation and header rhythm as other pages. */
.public-global-page.public-glass .global-header { display: flex; flex-wrap: wrap; align-items: center; align-content: center; gap: .75rem 2rem; min-height: 166px; height: auto; }
.public-global-page.public-glass .global-heading { flex: 1 1 15rem; min-width: 0; }
.public-global-page.public-glass .global-heading h1 { margin-bottom: 0; }
.public-global-page.public-glass .global-summary { flex: 1 1 19rem; min-width: 0; margin: 0; text-align: right; }
.public-global-page.public-glass .global-summary > strong { font-size: 1.25rem; white-space: normal; overflow-wrap: anywhere; }
.public-global-page.public-glass .global-header > .private-preview-banner { max-width: calc(100% - 2rem); white-space: normal; }
.public-global-page.public-glass .global-header > .private-preview-banner > span { flex-wrap: wrap; }
.public-global-page.public-glass > .help-feedback-footer { margin-top: 0; }

.global-core-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ui-layout-gap);
  margin-bottom: 1rem;
}
.global-core-card,
.global-panel {
  position: relative;
  min-width: 0;
  border: 1px solid var(--glass-border);
  background: var(--glass-panel);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(24px) saturate(118%);
  -webkit-backdrop-filter: blur(24px) saturate(118%);
}

.global-core-card {
  container: global-core / inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: .875rem 1.125rem;
  border-radius: var(--glass-radius);
  transition: box-shadow .28s ease, transform .28s var(--glass-ease), background-color .28s ease;
  color: inherit;
  text-decoration: none;
}
.vix-meter {
  position: relative;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  flex: 1;
  min-width: 0;
}
.vix-meter-caption,
.vix-meter-scale { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vix-meter-caption { grid-row: 1 / 3; margin: 0; }
.vix-meter-caption strong { font-size: 11px; white-space: nowrap; }
.vix-meter-caption span { color: var(--glass-muted); font-size: 10px; }
.vix-meter-track {
  position: relative;
  height: 7px;
  border-radius: 3px;
  background: linear-gradient(90deg, #75a78e 0 24%, #aeb9ae 24% 40%, #cbb979 40% 60%, #c99568 60% 80%, #bc736a 80% 100%);
}
.vix-meter-track i {
  position: absolute;
  left: var(--vix-position);
  top: 50%;
  width: 13px;
  height: 13px;
  border: 3px solid rgba(255, 255, 255, .92);
  border-radius: 50%;
  background: var(--glass-ink);
  box-shadow: 0 1px 5px rgba(22, 28, 24, .26);
  transform: translate(-50%, -50%);
}
.vix-meter-scale { grid-column: 2; margin-top: 4px; color: var(--glass-muted); font-size: 7px; gap: 3px; }
.vix-meter-scale span { min-width: 0; text-align: center; white-space: nowrap; }
.treasury-secondary {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--glass-muted);
  font-size: 9px;
  text-align: center;
  white-space: nowrap;
}
.treasury-secondary strong { margin-left: 4px; color: var(--glass-ink); font-size: 10px; }
.global-core-content {
  margin-top: 8px;
}
.global-core-primary,
.global-core-visual { min-width: 0; }
.global-core-primary { display: grid; justify-items: center; gap: 4px; }
.global-core-visual { margin-top: 8px; }
.global-card-head,
.global-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.global-card-head { align-items: flex-start; flex-wrap: wrap; min-height: 32px; }
.global-card-head > div:first-child { flex: 1 1 8rem; min-width: 0; overflow-wrap: anywhere; }
.global-card-head > .global-quote-status { flex-shrink: 0; }
.global-card-head h2 { margin: 2px 0 0; font-size: .875rem; letter-spacing: -.02em; }
.global-code { color: var(--glass-muted); font-size: .625rem; font-weight: 650; letter-spacing: .04em; }
.global-core-value { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px; min-width: 0; max-width: 100%; margin: 0; }
.global-core-value strong { min-width: 0; max-width: 100%; overflow-wrap: anywhere; font-size: 1.875rem; font-size: clamp(1.75rem, 9cqi, 2.125rem); line-height: 1.1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.global-core-value span { color: var(--glass-muted); font-size: 11px; }
.global-core-day { display: flex; justify-content: center; align-items: baseline; gap: 5px; line-height: 1.2; }
.global-core-day > span { color: var(--glass-muted); font-size: 10px; }
.global-card-context { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .625rem; min-width: 0; margin: 0 0 .5rem; }
.global-card-context .vix-meter { max-width: 14rem; }
.global-card-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem .75rem; align-items: center; margin-top: auto; padding-top: .5rem; border-top: 1px solid var(--glass-line); color: var(--glass-muted); font-size: .6875rem; }
.global-core-visual { margin-bottom: .5rem; }
.global-card-meta > * { min-width: 0; }
.global-change { color: var(--glass-ink); font-size: 14px; font-weight: 680; }
.positive .global-change { color: var(--ui-positive); }
.negative .global-change { color: var(--ui-negative); }


.global-region-grid {
  display: grid;
  /* Fit content-sized panels; cap at three columns without device breakpoints. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--ui-layout-panel-min), calc((100% - 2 * var(--ui-layout-gap)) / 3))), 1fr));
  align-items: start;
  gap: var(--ui-layout-gap);
}
.global-region-grid.is-independent-stack { position: relative; }
.global-region-grid.is-independent-stack > .global-panel { position: absolute; }
.global-panel {
  container: global-market / inline-size;
  padding: 1rem 1.125rem .375rem;
  border-radius: var(--glass-radius);
  transition: box-shadow .28s ease, transform .28s var(--glass-ease);
}
.global-panel-head { position: relative; padding: 0 2px .75rem; border-bottom: 1px solid var(--glass-line); flex-wrap: wrap; gap: .5rem .75rem; }
.global-panel-head h2 { margin: 0; font-size: 1rem; letter-spacing: -.025em; }
.global-panel-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .375rem .625rem; min-width: 0; }
.global-panel-title h2 { overflow-wrap: anywhere; }
.global-group-unit { color: var(--glass-muted); font-size: .6875rem; }
.global-time-note { margin: 1rem 0 0; color: var(--glass-muted); font-size: .6875rem; text-align: right; }
.global-quote-list { display: grid; }
.global-quote-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ui-quote-spark-width) minmax(var(--ui-quote-price-min), 1.1fr);
  grid-template-areas: "name spark price";
  column-gap: var(--ui-quote-row-gap);
  row-gap: 0;
  align-items: center;
  min-height: 4.5rem;
  padding: .5rem 2px;
  border-bottom: 1px solid var(--glass-line);
  color: inherit;
  text-decoration: none;
  transition: border-color .22s ease, background-color .22s ease, box-shadow .28s ease, transform .28s var(--glass-ease);
}
.global-quote-row:last-child { border-bottom: 0; }
.global-quote-name { grid-area: name; }
.global-row-spark-wrap { grid-area: spark; }
.global-quote-price { grid-area: price; }
.global-quote-name,
.global-quote-price { min-width: 0; }
.global-quote-name strong,
.global-quote-price strong { display: block; overflow-wrap: anywhere; }
.global-quote-name strong { font-size: .8125rem; line-height: 1.3; white-space: normal; }
.global-quote-name span,
.global-quote-price span { display: block; margin-top: 4px; color: var(--glass-muted); font-size: .6875rem; overflow-wrap: anywhere; }
.global-quote-name > span { margin-top: .125rem; line-height: 1.2; }
.global-quote-name > [data-global-time] { display: block; margin-top: .1875rem; line-height: 1.2; }
.global-quote-price {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: baseline;
  gap: .25rem;
  text-align: right;
  white-space: normal;
}
.global-quote-number { display: grid; justify-items: end; gap: .25rem; min-width: 0; }
.global-quote-price.has-unit { grid-template-columns: minmax(0, 1fr) max-content; }
.global-quote-price [data-global-value] {
  overflow: visible;
  font-size: .875rem;
  font-size: clamp(.8125rem, 4cqi, 1rem);
  text-overflow: clip;
  font-variant-numeric: tabular-nums;
}
.global-quote-value { min-width: 0; max-width: 100%; }
.global-quote-price span { margin: 0; }
.global-quote-number > .global-change { font-size: .75rem; line-height: 1.2; max-width: 100%; }
.global-sparkline { min-width: 0; height: 28px; overflow: visible; }
.global-sparkline path { vector-effect: non-scaling-stroke; }
.global-sparkline [data-global-spark-area] { fill: rgba(23, 101, 79, .055); stroke: none; }
.global-sparkline [data-global-spark-line] {
  fill: none;
  stroke: #728079;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}
.global-sparkline.spark-positive [data-global-spark-area] { fill: rgba(13, 116, 73, .08); }
.global-sparkline.spark-positive [data-global-spark-line] { stroke: var(--ui-positive); }
.global-sparkline.spark-negative [data-global-spark-area] { fill: rgba(162, 58, 45, .07); }
.global-sparkline.spark-negative [data-global-spark-line] { stroke: var(--ui-negative); }
.global-sparkline.is-missing { opacity: .24; }
.global-spark-wrap { position: relative; min-width: 0; }
.global-spark-period {
  color: var(--glass-muted);
  font-size: 10px;
  font-weight: 560;
  white-space: nowrap;
}
.global-spark-caption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1px 5px; line-height: 1.25; margin-bottom: 3px; }
.global-trend-change { color: var(--glass-muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.global-trend-change.trend-positive { color: var(--ui-positive); }
.global-trend-change.trend-negative { color: var(--ui-negative); }
.global-trend-status { flex-basis: 100%; color: var(--glass-muted); font-size: 10px; }
.global-row-spark-wrap { height: auto; }
.global-row-sparkline { display: block; width: 100%; height: 24px; }
.global-core-spark-wrap {
  position: relative;
  width: 100%;
  height: auto;
}
.global-core-sparkline { display: block; width: 100%; height: 32px; }
.vix-card .global-core-spark-wrap { width: 100%; height: auto; }
.vix-card .global-core-sparkline { height: 32px; }

.global-core-card:hover,
.global-core-card:focus-visible,
.global-quote-row:hover,
.global-quote-row:focus-visible {
  z-index: 4;
  animation: none;
  outline: 0;
  border-color: rgba(255, 255, 255, .94);
  background: linear-gradient(135deg, rgba(255,255,255,.76), rgba(244,248,245,.59));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    inset 0 0 0 1px rgba(23,101,79,.07),
    0 14px 34px rgba(38,52,43,.12),
    0 3px 10px rgba(23,101,79,.07);
  transform: translateY(-2px) scale(1.014);
  backdrop-filter: blur(30px) saturate(128%);
  -webkit-backdrop-filter: blur(30px) saturate(128%);
}
.global-quote-row:hover,
.global-quote-row:focus-visible { border-bottom-color: transparent; border-radius: 12px; }
.global-core-card:hover::after,
.global-core-card:focus-visible::after,
.global-quote-row:hover::after,
.global-quote-row:focus-visible::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: inherit;
  box-shadow: inset 0 0 20px rgba(255,255,255,.2);
  content: "";
  pointer-events: none;
}
.public-global-page.public-glass.motion-enabled .global-core-card:hover,
.public-global-page.public-glass.motion-enabled .global-core-card:focus-visible,
.public-global-page.public-glass.motion-enabled .global-quote-row:hover,
.public-global-page.public-glass.motion-enabled .global-quote-row:focus-visible {
  animation: none;
  transform: translateY(-2px) scale(1.014);
}
.public-global-page.public-glass.motion-enabled .global-core-card.is-global-pop,
.public-global-page.public-glass.motion-enabled .global-quote-row.is-global-pop { animation: global-glass-pop .3s cubic-bezier(.2,.82,.24,1); }
.public-global-page.public-glass.motion-enabled .global-core-card.is-global-opening,
.public-global-page.public-glass.motion-enabled .global-quote-row.is-global-opening { animation: global-glass-open .18s cubic-bezier(.2,.78,.2,1) forwards; }

@keyframes global-glass-pop {
  0% { opacity: .78; transform: translateY(1px) scale(.982); }
  62% { opacity: 1; transform: translateY(-3px) scale(1.024); }
  100% { transform: translateY(-2px) scale(1.014); }
}
@keyframes global-glass-open {
  from { transform: translateY(-2px) scale(1.014); }
  to { background-color: rgba(255,255,255,.88); box-shadow: 0 20px 46px rgba(23,101,79,.16); transform: translateY(-3px) scale(1.035); }
}

@media (prefers-reduced-motion: reduce) {
  .global-core-card,
  .global-quote-row { transition: none; }
  .global-core-card.is-global-pop,
  .global-quote-row.is-global-pop,
  .global-core-card.is-global-opening,
  .global-quote-row.is-global-opening { animation: none; }
}

/* Columns follow the content budget: 2 x 16rem + gap, then 4 x 16rem + 3 gaps.
   No tablet/phone model, orientation, user-agent or viewport exception. */
@container global-page (min-width: 32.875rem) {
  .global-core-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container global-page (min-width: 66.625rem) {
  .global-core-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container global-page (max-width: 36rem) {
  .public-global-page.public-glass .global-summary { text-align: left; }
  .public-global-page.public-glass .global-header > .private-preview-banner { position: static; order: -1; flex-basis: 100%; flex-wrap: wrap; margin: 0; transform: none; }
}
@container global-core (max-width: 18rem) {
  .global-card-head { gap: .5rem; }
  .global-card-head h2 { font-size: .875rem; }
}
/* 5rem name + 7rem chart + 6.5rem price + two .75rem gaps.
   Reflow the whole chart at its content budget; never reserve a unit column. */
@container global-market (max-width: 20rem) {
  .global-quote-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-areas: "name price" "spark spark";
    row-gap: .5rem;
  }
}
/* Extra narrow containers and enlarged fonts get full-width fields. */
@container global-market (max-width: 13rem) {
  .global-quote-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "name" "price" "spark";
  }
}
/* Older engines keep readable stacked content without relying on UA checks. */
@supports not (container-type: inline-size) {
  .global-region-grid { grid-template-columns: minmax(0, 1fr); }
  .global-quote-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "name" "price" "spark";
  }
}