:root {
  --bg: #05090d;
  --panel: rgba(9, 18, 20, .9);
  --panel-2: rgba(20, 34, 35, .82);
  --line: rgba(212, 168, 79, .28);
  --gold: #d4a84f;
  --gold-2: #f0d58a;
  --cyan: #62c4c2;
  --violet: #66577a;
  --green: #72c49a;
  --text: #f2ead8;
  --muted: #bdb8ad;
  --danger: #da8f86;
  --surface-strong: rgba(5, 11, 13, .94);
  --surface: rgba(8, 20, 22, .86);
  --surface-soft: rgba(12, 34, 36, .72);
  --surface-line: rgba(212, 168, 79, .18);
  --surface-highlight: rgba(255, 255, 255, .045);
  --surface-shadow: 0 18px 52px rgba(0, 0, 0, .25);
}

html {
  background: #05090d;
}

body * {
  letter-spacing: 0;
}

body {
  background:
    linear-gradient(180deg, rgba(4, 12, 14, .04), rgba(4, 10, 12, .26)),
    url("cosmic-starfield-v1.webp") center top / cover fixed no-repeat,
    var(--bg);
}

body::before {
  opacity: .09;
  background:
    repeating-linear-gradient(90deg, transparent 0 95px, rgba(98, 196, 194, .025) 96px),
    repeating-linear-gradient(0deg, transparent 0 95px, rgba(212, 168, 79, .02) 96px);
}

.app {
  background:
    radial-gradient(circle at 50% 1%, rgba(98, 196, 194, .11), transparent 28%),
    linear-gradient(180deg, rgba(12, 34, 36, .5), rgba(5, 12, 14, .66));
  box-shadow: 0 0 90px rgba(0, 0, 0, .3);
}

.topbar {
  border-bottom-color: rgba(212, 168, 79, .2);
}

.topbar::after,
.tabs::before {
  background: linear-gradient(90deg, var(--gold), var(--cyan), transparent);
}

.tabs {
  border-color: rgba(212, 168, 79, .28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 58%),
    rgba(5, 13, 14, .94);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .04), 0 0 30px rgba(98, 196, 194, .04);
}

.tabs button {
  color: #999e98;
}

.tabs button.active {
  color: var(--gold-2);
  background: linear-gradient(180deg, rgba(212, 168, 79, .08), transparent 76%);
}

.panel,
.key-card,
.ring-card {
  border-color: rgba(212, 168, 79, .17);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .04), transparent 38%),
    var(--surface);
  box-shadow: inset 0 1px rgba(255, 255, 255, .035), var(--surface-shadow);
}

.hero,
.keyring-stage,
.archive-horizon,
.collection-atlas,
.cosmic-passport,
.profile-drawer,
.vault-chronicle {
  background:
    linear-gradient(90deg, rgba(98, 196, 194, .045), transparent 38%, rgba(212, 168, 79, .035)),
    linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 48%),
    var(--surface-soft);
}

.cosmic-map,
.cosmic-tree {
  background-color: #071315;
}

.cosmic-tree {
  background:
    linear-gradient(180deg, rgba(6, 19, 21, .32), rgba(5, 13, 15, .72)),
    url("cosmic-starfield-v1.webp") center top / cover no-repeat,
    #071315;
}

.cosmic-tree::before {
  background: linear-gradient(180deg, rgba(240, 213, 138, .78), rgba(98, 196, 194, .55) 34%, rgba(77, 126, 154, .42) 68%, rgba(255, 255, 255, .08));
  box-shadow: 0 0 18px rgba(98, 196, 194, .14);
}

.tree-tier.tier-0,
.ring-chapter.tier-0 {
  --tier-rgb: 212, 168, 79;
}

.tree-tier.tier-1,
.ring-chapter.tier-1 {
  --tier-rgb: 98, 196, 194;
}

.tree-tier.tier-2,
.ring-chapter.tier-2 {
  --tier-rgb: 77, 126, 154;
}

.tree-tier.tier-3,
.ring-chapter.tier-3 {
  --tier-rgb: 187, 117, 92;
}

.tree-tier.tier-4,
.ring-chapter.tier-4 {
  --tier-rgb: 114, 196, 154;
}

.tree-tier.tier-5,
.ring-chapter.tier-5 {
  --tier-rgb: 96, 88, 119;
}

.tree-tier.tier-6,
.ring-chapter.tier-6 {
  --tier-rgb: 137, 145, 158;
}

.tree-tier.tier-7,
.ring-chapter.tier-7 {
  --tier-rgb: 240, 213, 138;
}

.tree-node,
.tree-ring-core,
.tier-branch-route::after {
  background-color: #071315;
}

.tree-description,
.tree-key-name,
.branch-promise,
.ring-chapter-key-copy small,
.ring-chapter-gate strong {
  color: #c6c1b7;
}

.state-stamp,
.ring-chapter-key-copy strong {
  color: #e8e1d3;
}

.tree-key.locked .tree-key-shell,
.tree-key.sealed .tree-key-shell {
  border-color: rgba(102, 87, 122, .5);
  color: #aba4b6;
}

.map-command {
  background: #061012;
}

.map-command-shade {
  background:
    linear-gradient(180deg, rgba(3, 9, 10, .04) 0%, rgba(3, 9, 10, .22) 36%, rgba(3, 12, 13, .9) 84%, #061012 100%),
    linear-gradient(90deg, rgba(4, 12, 14, .72), rgba(4, 12, 14, .03) 58%, rgba(4, 12, 14, .32));
}

.map-command-geometry {
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(240, 213, 138, .32) 50%, transparent 50.2%),
    repeating-linear-gradient(90deg, transparent 0 48px, rgba(98, 196, 194, .045) 49px),
    repeating-linear-gradient(0deg, transparent 0 48px, rgba(212, 168, 79, .035) 49px);
}

.arrival-sequence,
.arrival-identity {
  background:
    linear-gradient(180deg, rgba(4, 13, 14, .04), rgba(4, 11, 12, .34)),
    url("cosmic-starfield-v1.webp") center / cover fixed no-repeat,
    #071315;
}

.arrival-shade {
  background:
    linear-gradient(180deg, rgba(2, 7, 8, .05) 0%, rgba(2, 7, 8, .08) 36%, rgba(3, 11, 12, .64) 82%, rgba(3, 10, 11, .84) 100%),
    linear-gradient(90deg, rgba(3, 10, 11, .48) 0%, rgba(3, 10, 11, .04) 64%, rgba(3, 10, 11, .3) 100%);
}

.arrival-geometry::after,
.arrival-avatar-orbit::after {
  border-color: rgba(102, 87, 122, .24);
  box-shadow: 0 0 38px rgba(102, 87, 122, .04);
}

.arrival-note {
  color: #d0c9bc;
}

.arrival-ledger {
  background: rgba(4, 12, 13, .58);
}

.arrival-skip {
  color: #bdb8ad;
}

.arrival-identity-visual {
  border-bottom-color: rgba(212, 168, 79, .28);
  background:
    linear-gradient(180deg, rgba(3, 10, 11, .03), rgba(3, 11, 12, .6)),
    url("cosmic-vault-atlas-dark-v2.webp") center 47% / cover;
}

.arrival-identity-visual::after {
  background: linear-gradient(90deg, rgba(3, 11, 12, .42), transparent 50%, rgba(3, 11, 12, .32));
}

.arrival-identity-form {
  background:
    radial-gradient(circle at 84% 12%, rgba(98, 196, 194, .1), transparent 30%),
    linear-gradient(180deg, rgba(13, 35, 37, .76), rgba(5, 14, 15, .88)),
    url("cosmic-starfield-v1.webp") 72% center / cover fixed no-repeat,
    #081719;
}

.arrival-avatar-orbit .avatar-sigil {
  background: rgba(5, 12, 13, .92);
}

.ring-chapter {
  background:
    linear-gradient(135deg, rgba(var(--tier-rgb), .075), transparent 50%),
    linear-gradient(180deg, rgba(7, 20, 22, .94), rgba(5, 12, 14, .98));
}

.ring-chapter-key {
  background: rgba(6, 16, 18, .82);
}

@media (min-width: 720px) {
  .app {
    background:
      radial-gradient(circle at 50% 1%, rgba(98, 196, 194, .1), transparent 28%),
      linear-gradient(180deg, rgba(12, 34, 36, .46), rgba(5, 12, 14, .62));
  }
}