*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-size: 16px;
}

body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 16px;
}

#root {
  width: 100%;
  height: 100%;
  overflow: auto;
  /* D-FUNDBAR-MOBILE-1 (21 Jul 2026): page-level guard — no component may
     widen the document and pan the whole page sideways on mobile */
  overflow-x: hidden;
}

:root {
  --bg-deep:    #080c18;
  --bg-base:    #0a0e1a;
  --bg-panel:   #0d1528;
  --bg-card:    #111827;
  --bg-hover:   #1a2540;
  --border:     rgba(255,255,255,0.08);
  --border-hi:  rgba(255,255,255,0.15);
  --text-hi:    #ffffff;
  --text-main:  rgba(255,255,255,0.85);
  --text-dim:   rgba(255,255,255,0.45);
  --text-muted: rgba(255,255,255,0.25);
  --blue:       #4a9eff;
  --green:      #4dff91;
  --red:        #ff6b6b;
  --amber:      #ffd32a;
  --purple:     #a29bfe;
  --cyan:       #00d2d3;
  --augra:      #1dd1a1;
  --font-mono:  'JetBrains Mono', 'Fira Code', monospace;
  --radius:     8px;
  --radius-lg:  12px;
}

body { background: var(--bg-deep); color: var(--text-main); font-family: 'Inter', 'Segoe UI', system-ui, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
code, pre { font-family: var(--font-mono); }
.mono { font-family: var(--font-mono); }
.green { color: var(--green); } .red { color: var(--red); } .amber { color: var(--amber); } .blue { color: var(--blue); }
.dim { color: var(--text-dim); } .muted { color: var(--text-muted); }
@keyframes pulse-live { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.pulse { animation: pulse-live 2s ease infinite; }
.regime-bull    { background: rgba(77,255,145,0.15); color: #4dff91; border-color: rgba(77,255,145,0.3); }
.regime-bear    { background: rgba(255,107,107,0.15); color: #ff6b6b; border-color: rgba(255,107,107,0.3); }
.regime-crisis  { background: rgba(255,211,42,0.15);  color: #ffd32a; border-color: rgba(255,211,42,0.3); }
.regime-ranging { background: rgba(162,155,254,0.15); color: #a29bfe; border-color: rgba(162,155,254,0.3); }

/* D-UI-IRIS-1: IrisLogo live/idle animation (7 Jun 2026) */
@keyframes iris-glow-pulse {
  0%, 100% { box-shadow: 0 0 6px 1px rgba(29,209,161,0.25), 0 0 12px 2px rgba(29,209,161,0.1); transform: scale(1); }
  50%       { box-shadow: 0 0 14px 4px rgba(29,209,161,0.55), 0 0 28px 8px rgba(29,209,161,0.2); transform: scale(1.08); }
}
.iris-live  { animation: iris-glow-pulse 2.4s ease-in-out infinite; border-radius: 50%; }
.iris-idle  { box-shadow: none; border-radius: 50%; opacity: 0.6; transition: opacity 0.4s; }

/* D-FUNDBAR-MOBILE-1 (21 Jul 2026): responsive FundSummaryBar.
   Desktop: identical 5-col layout as D-FUNDBAR-FOUR-METRIC-1 shipped it.
   ≤760px: label goes full-width, four metrics wrap 2×2 — nothing removed,
   nothing overflows. min-width:0 lets grid children shrink below their
   mono-string min-content width instead of pushing the document wider. */
.fund-summary-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 18px;
  align-items: center;
}
.fund-summary-grid > * { min-width: 0; }
@media (max-width: 760px) {
  .fund-summary-grid { grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  .fund-summary-grid > .fund-summary-label { grid-column: 1 / -1; }
}
/* D-UI-GLASS-1 (2 Oct 2026, James 22:01 "that looks great go ahead and apply to augra"):
   direction C's glass on the existing UI. Layout, type, content and colours are unchanged.
   1. Surfaces that use --bg-card / --bg-panel / --bg-hover become translucent; the floor shell lets the ambient layer through.
   2. Top-level cards and bars get backdrop blur; a card inside a card doesn't blur twice.
   3. A faint ambient iris (pulsing like the logo) and teal glow sit fixed behind the app.
   4. The header gradient comes through --hdr-bg (Header.jsx falls back to the old gradient).
   Rollback: remove the glass.css import from main.jsx and rebuild. */

:root {
  --bg-panel:  rgba(13,21,40,0.55);
  --bg-card:   rgba(17,24,39,0.42);
  --bg-hover:  rgba(26,37,64,0.55);
  --border:    rgba(255,255,255,0.10);
  --hdr-bg:    linear-gradient(90deg, rgba(10,22,40,0.62) 0%, rgba(13,28,53,0.55) 60%, rgba(10,22,40,0.62) 100%);
  --glass-blur: blur(18px) saturate(150%);
  --glass-bar:  blur(22px) saturate(160%);
}

/* Solid ground behind everything, then the ambient layer, then the app. */
html, body { background: #080c18; }
#root { position: relative; z-index: 1; }
/* The floor shell (TradingFloor root) is see-through so the ambient layer shows; wells keep solid --bg-deep. */
#root > div[style*="height: 100vh"][style*="var(--bg-deep)"] { background: transparent !important; }
body::before, body::after { content: ""; position: fixed; pointer-events: none; z-index: 0; }
body::before {
  width: min(1000px, 135vw); aspect-ratio: 1; right: max(-260px, -44vw); top: 12vh;
  opacity: var(--amb-opacity, 0.30); /* D-UI-MARKET-PULSE-1: dimmer when the market is closed */
  background: no-repeat center / contain;
  background-image: var(--amb-iris, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='16' fill='%2350c878'/%3E%3Ccircle cx='20' cy='20' r='10' fill='%23080c18'%3E%3Canimate attributeName='r' values='10;13;10' dur='2.4s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E")); /* D-UI-MARKET-PULSE-1: Header.jsx sets --amb-iris to the market beat */
}
body::after {
  width: min(560px, 95vw); aspect-ratio: 1; left: -140px; bottom: 8vh; border-radius: 50%;
  background: radial-gradient(circle, rgba(29,209,161,0.20), transparent 65%);
}
@media (prefers-reduced-motion: reduce) {
  body::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='16' fill='%2350c878'/%3E%3Ccircle cx='20' cy='20' r='11.5' fill='%23080c18'/%3E%3C/svg%3E"); }
}

/* Cards: frosted, with light catching the top edge. */
[style*="var(--bg-card)"], [style*="var(--bg-hover)"] {
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 32px rgba(0,0,0,0.35);
}
/* Bars and panels: tab bars, sub-tabs, sidebar, phone bottom bar, header. */
[style*="var(--bg-panel)"], [style*="var(--hdr-bg"] {
  backdrop-filter: var(--glass-bar);
  -webkit-backdrop-filter: var(--glass-bar);
}
/* Don't blur twice: anything glass inside something glass stays plain translucent. */
:is([style*="var(--bg-card)"], [style*="var(--bg-hover)"], [style*="var(--bg-panel)"]) :is([style*="var(--bg-card)"], [style*="var(--bg-hover)"], [style*="var(--bg-panel)"]) {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

/* Header iris glow pulse. D-UI-GLASS-2 (2 Oct 22:09, James: "the top left iris background square needs to be clear"):
   was box-shadow (iris-glow-pulse), which some browsers draw as a square box behind the svg. drop-shadow follows the
   iris's own round shape, so the area around the iris stays clear. No box, no background, no scale. */
@keyframes glass-iris-glow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(29,209,161,0.30)); }
  50%      { filter: drop-shadow(0 0 9px rgba(29,209,161,0.65)); }
}
[style*="var(--hdr-bg"] svg[viewBox="0 0 40 40"] {
  background: transparent; box-shadow: none; border-radius: 0;
  animation: glass-iris-glow var(--iris-dur, 2.4s) ease-in-out infinite; /* D-UI-MARKET-PULSE-1 */
}
@media (prefers-reduced-motion: reduce) {
  [style*="var(--hdr-bg"] svg[viewBox="0 0 40 40"] { animation: none; }
}

/* D-UI-TILES-1 (3 Oct 2026, James 07:41–07:47): desk and fund panels on the Floor are raised glass tiles with one edge colour.
   Light falls from the top left: lit top/left bevel, shaded right, heavy dark bottom, a solid lower lip, deep shadow.
   !important because the panels carry inline border/background styles (and DeskCard's hover recolours the border). */
.augra-tile {
  border-style: solid !important;
  border-width: 3px 3px 4px 3px !important;
  border-color: rgba(255,255,255,0.34) rgba(0,0,0,0.50) rgba(0,0,0,0.80) rgba(255,255,255,0.18) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.04) 22%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.22) 100%) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.20), inset 2px 0 0 rgba(255,255,255,0.08), inset 0 -5px 7px rgba(0,0,0,0.45), inset -2px 0 0 rgba(0,0,0,0.25),
    0 1px 0 rgba(0,0,0,0.6), 0 7px 0 rgba(4,8,16,0.88), 0 9px 2px rgba(0,0,0,0.35), 0 18px 26px rgba(0,0,0,0.5), 0 38px 62px rgba(0,0,0,0.45) !important;
}