/* Final luxury-fintech surface pass. Presentation only; approved navy hero is intentionally untouched. */
:root{
  --lux-bg-0:#cbd2d6;
  --lux-bg-1:#d7dde1;
  --lux-bg-2:#c7ced3;
  --lux-surface:#e7ebed;
  --lux-surface-2:#dde3e6;
  --lux-surface-3:#d5dce0;
  --lux-line:#b8c1c7;
  --lux-line-soft:#c7ced2;
  --lux-ink:#172129;
  --lux-muted:#5f6b73;
  --lux-navy:#152d3f;
  --lux-navy-2:#1c394d;
  --lux-graphite:#222b31;
  --lux-graphite-2:#2d373e;
  --lux-silver:#e1e5e7;
  --lux-shadow:0 18px 42px rgba(20,29,35,.12),0 1px 0 rgba(255,255,255,.55) inset;
}

html{background:var(--lux-bg-2)}
body{
  background:
    radial-gradient(circle at 10% 5%,rgba(255,255,255,.42),transparent 24%),
    radial-gradient(circle at 88% 22%,rgba(255,255,255,.18),transparent 20%),
    linear-gradient(145deg,var(--lux-bg-0) 0%,var(--lux-bg-1) 46%,var(--lux-bg-2) 100%);
  background-attachment:fixed;
  color:var(--lux-ink);
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.38;
  background:
    linear-gradient(120deg,transparent 0 34%,rgba(255,255,255,.16) 34.2%,transparent 34.5% 100%),
    linear-gradient(300deg,transparent 0 72%,rgba(72,86,96,.05) 72.2%,transparent 72.5% 100%);
}

.top{
  background:rgba(223,228,231,.88)!important;
  border-bottom:1px solid #b9c2c7!important;
  box-shadow:0 10px 28px rgba(24,32,38,.08),inset 0 -1px 0 rgba(255,255,255,.45)!important;
  backdrop-filter:blur(18px) saturate(.85);
}
.status{
  background:#dce5df!important;
  border-color:#bdcbc2!important;
  color:#3f5f4c!important;
}

/* Do not restyle the approved hero. */
.hero{box-shadow:0 30px 72px rgba(12,27,39,.22)!important}

/* Premium graphite rail with real segmented navigation states. */
.flow{
  background:linear-gradient(180deg,#273139,#1f282e)!important;
  border:1px solid #36424a!important;
  box-shadow:0 16px 34px rgba(21,28,33,.20),inset 0 1px 0 rgba(255,255,255,.08)!important;
  padding:8px!important;
  gap:6px!important;
}
.flow span{
  min-height:38px!important;
  display:inline-flex!important;
  align-items:center!important;
  border-radius:9px!important;
  border:1px solid transparent!important;
  padding:9px 12px!important;
  color:#aeb8bf!important;
  font-weight:850!important;
}
.flow span:hover,.flow span.viewing{
  color:#f0f3f5!important;
  background:#344049!important;
  border-color:#46545e!important;
  transform:translateY(-1px);
}
.flow span.active{
  color:#18252d!important;
  background:linear-gradient(180deg,#e0e4e6,#d2d8dc)!important;
  border-color:#eef1f2!important;
  box-shadow:0 5px 14px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.9)!important;
}
.flow span.done{
  color:#d8e2dc!important;
  background:#34433b!important;
  border-color:#45564b!important;
}
.flow span.locked{opacity:.62}
.flow span:not(:last-child):after{color:#71808a!important}

/* Main content uses layered silver/graphite surfaces instead of white. */
.card,.process,#evidenceBoundaryCard{
  background:linear-gradient(180deg,#e7ebed,#e1e6e8)!important;
  border:1px solid var(--lux-line)!important;
  box-shadow:var(--lux-shadow)!important;
}
.head{
  background:linear-gradient(180deg,#dde3e6,#d5dce0)!important;
  border-bottom:1px solid #bcc5ca!important;
}
.body,.scenarioCard .body,.decisionCard .body{
  background:linear-gradient(180deg,#e9edef,#e3e8ea)!important;
}
.head h2{color:#17242d!important}
.head p,.helper,.footer{color:var(--lux-muted)!important}
.kicker,.processKicker{color:#65737c!important}

/* Inputs and extracted-evidence panels: darker silver so cards visibly separate from page. */
.scenario textarea{
  background:#dbe1e4!important;
  border:1px solid #b7c0c6!important;
  color:#18232b!important;
  box-shadow:inset 0 1px 2px rgba(23,32,39,.035),0 1px 0 rgba(255,255,255,.50)!important;
}
.scenario textarea:focus{
  background:#e1e6e8!important;
  border-color:#6f818d!important;
  box-shadow:0 0 0 4px rgba(44,65,79,.10)!important;
}
.parsed,.evidenceUX{
  background:#dce2e5!important;
  border-color:#b8c2c8!important;
}
.fact,.evidenceUXCol,.evidenceCol{
  background:#e8ecee!important;
  border-color:#bdc6cb!important;
}
.unknown{background:#d5dce0!important;color:#52616a!important}

/* Buttons: one navy primary, satin-silver secondary; no random SaaS colors. */
.btn{
  background:linear-gradient(180deg,#e1e5e7,#d2d8dc)!important;
  color:#22313a!important;
  border:1px solid #b7c0c6!important;
  box-shadow:0 5px 13px rgba(29,39,46,.08),inset 0 1px 0 rgba(255,255,255,.72)!important;
}
.btn:hover{
  background:linear-gradient(180deg,#e8ebed,#d8dee1)!important;
  border-color:#a9b4bb!important;
  box-shadow:0 8px 18px rgba(27,37,44,.12)!important;
}
.btn.dark{
  background:linear-gradient(180deg,#1b394d,#132b3c)!important;
  color:#f3f6f7!important;
  border-color:#12293a!important;
  box-shadow:0 8px 18px rgba(15,33,46,.20),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.btn.dark:hover{background:linear-gradient(180deg,#21445b,#173247)!important}
.btn.soft{background:linear-gradient(180deg,#d9dfe2,#cdd4d8)!important;color:#26343d!important}
.hero .btn,.heroBtn{
  background:#f5f5f2!important;
  color:#13283a!important;
  border-color:#f5f5f2!important;
}

/* Rule / action components use satin-metal surfaces. */
.check,.mini,.sysStep,.why,.actionProcess,.principle:not(.primary),.sysFact{
  background:#dce2e5!important;
  border-color:#bac4c9!important;
}
.check.running,.mini.running,.sysStep.running{
  background:#d2d9dd!important;
  border-color:#93a2ab!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45)!important;
}
.progress,.miniBar{background:#c7cfd4!important}
.progress>div,.miniBar>div{background:linear-gradient(90deg,#304e61,#586f7e)!important}

.decision{
  background:linear-gradient(135deg,#e6ddde,#eceff0)!important;
  border-color:#cab5b8!important;
  border-left-color:#8a4c50!important;
}
.decision.amber{
  background:linear-gradient(135deg,#e7e2d7,#eceff0)!important;
  border-color:#cbc1a9!important;
  border-left-color:#816a3d!important;
}
.metric span{background:#d8dee1!important}
.principle.primary,.fabricHub,.closingPrinciple{
  background:linear-gradient(180deg,#19384c,#142d3f)!important;
  border-color:#142d3f!important;
}
.systemicGate,.systemicResult{background:#e5e0d4!important;border-color:#c9bea4!important}
.ai{background:#dce2e4!important;border-color:#b9c4c9!important;border-left-color:#355367!important}

.compare .before{background:#e7ddde!important;border-color:#cab8ba!important}
.compare .after{background:#dce5df!important;border-color:#bccbc1!important}
.transitionNote{background:#d5dbde!important;color:#46545d!important}
.fabricMap{background:#d9dfe2!important;border-color:#b9c2c7!important}
.institution{background:#e7ebed!important;border-color:#bcc5ca!important}
.institution span{background:#cfd7db!important;color:#2e4553!important}
.reject{background:#d2d8db!important;color:#44525b!important}

/* Evidence blocks keep meaning through restrained tones, not bright fills. */
.evidenceUXCol.known{background:#dfe7e2!important;border-color:#bcc9c0!important}
.evidenceUXCol.unknown{background:#e7e2d6!important;border-color:#ccc1a7!important}
.evidenceUXCol.next{background:#d5dce0!important;border-color:#bbc4c9!important}
.evidenceRule{background:#e3ded2!important;border-color:#c8bda3!important}

@media(max-width:760px){
  body{background:linear-gradient(180deg,#cdd4d8,#d8dde0)!important}
  .flow{background:linear-gradient(180deg,#273139,#1f282e)!important}
}