/*
 * Gringotts' brand for the web: gold and vault navy, the same in both modes. Gold belongs to Gringotts alone.
 * The one brand Gringotts adds to HAi1Y (the whole palette is hers). Load after hai1y-design-web's hai1y.css. data-brand="gringotts" on a container paints HAi1Y's
 * shared pieces (ProgressBar, SegmentedSetting, SlideSwitch, SlideToConfirm) in Gringotts' colors (GringottsTheme).
 */
.h-theme { --g-vault: #26355E; --g-vault-d: #141C36; --g-on-vault: #FFFFFF; --g-on-vault-q: #B9C0DA;
  --g-gold-l: #F8DE95; --g-gold: #E0A526; --g-gold-d: #A86F06; --g-on-gold: #3A2600; --g-market-open: #5BE38A }
[data-brand="gringotts"] {
  --h-brand-fill: var(--g-gold); --h-brand-track: var(--g-vault); --h-brand-surface: var(--g-vault-d);
  --h-brand-on-surface: var(--g-on-vault); --h-brand-knob-a: var(--g-gold-l); --h-brand-knob-b: var(--g-gold);
  --h-brand-on-knob: var(--g-on-gold); --h-brand-chosen: var(--g-gold); --h-brand-on-chosen: var(--g-on-gold) }
.g-coin { border-radius: 50%; display: inline-grid; place-items: center; flex: none; font-family: var(--h-display); font-weight: 800;
  color: var(--g-on-gold); background: linear-gradient(145deg, var(--g-gold-l), var(--g-gold));
  box-shadow: 0 6px 16px -6px var(--g-gold), inset 0 0 0 1.5px rgb(58 38 0 / 0.35) }
.g-vault { background: linear-gradient(135deg, var(--g-vault), var(--g-vault-d)); color: var(--g-on-vault); border-radius: 22px; padding: 18px }
.g-vault small, .g-vault .g-quiet { color: var(--g-on-vault-q) }
.g-announce { display: flex; gap: 14px; align-items: flex-start }
.g-announce > div { flex: 1 } .g-announce h3 { margin: 0 0 4px; font: 700 17px var(--h-font) } .g-announce p { margin: 0; color: var(--g-on-vault-q) }
.g-announce button { color: var(--g-on-vault) }
.g-banner h2 { margin: 0; font: 800 26px var(--h-display); letter-spacing: -0.01em } .g-banner { display: flex; gap: 14px; align-items: center }
.g-account { display: flex; gap: 16px; align-items: center; flex-wrap: wrap }
.g-account .g-photo { width: 72px; height: 72px; border-radius: 50%; border: 3px solid var(--g-gold); padding: 4px; flex: none }
.g-account .g-photo span { width: 100%; height: 100%; border-radius: 50%; background: var(--g-gold-l); color: var(--g-on-gold); display: grid; place-items: center; font: 700 22px var(--h-font) }
.g-account .g-who { display: grid; flex: 1; min-width: 0 } .g-account .g-who b { font-size: 19px }
.g-account .g-acts { display: flex; gap: 8px; flex-wrap: wrap; width: 100% }
.g-vaultbtn { min-height: 44px; padding: 8px 16px; border-radius: 99px; border: 1.5px solid var(--g-on-vault-q); background: transparent;
  color: #6CB0FF; font: 700 15px var(--h-font); cursor: pointer }
.g-market { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 99px; background: #000000; color: #FFFFFF; font: 700 14px var(--h-font) }
.g-market .g-dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #FFFFFF }
.g-market[data-open="true"] .g-dot { background: var(--g-market-open); border-color: var(--g-market-open) }
.g-market small { color: #B9C0DA; font-weight: 400 }