/*
 * Stable colour layer for Android WebView and Telegram's in-app browser.
 * It deliberately uses only hexadecimal and rgba() colours.
 */
:root{
  color-scheme:only light!important;
  --chu-accent-rgb:255,107,44;
}

html{
  color-scheme:only light!important;
  background-color:var(--paper,var(--night,#0f1519));
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  max-width:100%;
  overflow-x:hidden;
}

body{
  max-width:100%;
  overflow-x:hidden;
  -webkit-print-color-adjust:exact;
  print-color-adjust:exact;
}

button,
input,
select,
textarea{
  color-scheme:only light!important;
}

/*
 * Keep light and violet actions readable inside dark hero sections.
 * Some pages inherit the hero's white text colour more specifically than
 * their button component, which previously produced a white-on-white button.
 */
.btn.btn-white{
  color:#0f1519!important;
  -webkit-text-fill-color:#0f1519!important;
}

.btn.btn-violet{
  color:#0f1519!important;
  -webkit-text-fill-color:#0f1519!important;
}

/*
 * A universal, obvious return route for every internal page.
 * On phones it sits above the persistent Telegram/MAX contact bar.
 */
.chu-home-fab{
  position:fixed;
  z-index:120;
  left:max(16px,env(safe-area-inset-left));
  bottom:max(18px,env(safe-area-inset-bottom));
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:11px 16px;
  border:1px solid rgba(15,21,25,.16);
  border-radius:999px;
  background:#fff!important;
  color:#0f1519!important;
  -webkit-text-fill-color:#0f1519!important;
  box-shadow:0 14px 36px rgba(15,21,25,.22);
  text-decoration:none!important;
  font:900 12px/1.1 Arial,sans-serif;
  letter-spacing:-.01em;
  white-space:nowrap;
  transition:transform .2s ease,box-shadow .2s ease;
}

.chu-home-fab:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 42px rgba(15,21,25,.28);
}

.chu-home-fab:focus-visible{
  outline:3px solid #ff6b2c;
  outline-offset:3px;
}

@media(max-width:720px){
  .chu-home-fab{
    left:max(12px,env(safe-area-inset-left));
    bottom:calc(80px + env(safe-area-inset-bottom));
    min-height:42px;
    padding:10px 14px;
    font-size:11px;
  }
}

/*
 * The blur layer is not colour-stable in a number of Android WebView builds.
 * The existing backgrounds are already 92–95% opaque, so removing blur keeps
 * the design while preventing muddy grey/green tints.
 */
.nav,
.topbar,
.orbit-chip,
.node,
.order-node,
.flow-node,
.dialog-head,
dialog::backdrop{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* Main portal: explicit RGB fallbacks for every former color-mix() value. */
body[data-mode="auto"]{--chu-accent-rgb:255,107,44}
body[data-mode="home"]{--chu-accent-rgb:56,208,200}
body[data-mode="law"]{--chu-accent-rgb:169,155,245}

body[data-mode] .glow{
  background-color:transparent!important;
  background-image:radial-gradient(
    70% 46% at 50% 34%,
    rgba(var(--chu-accent-rgb),.30),
    rgba(var(--chu-accent-rgb),0) 70%
  )!important;
}

body[data-mode] .eyebrow,
body[data-mode] h1 em,
body[data-mode] .prop.active .p-lbl{
  color:var(--accent)!important;
  background-image:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  -webkit-text-fill-color:currentColor!important;
}

body[data-mode] .disc-ring{
  background-color:#171f24!important;
  background-image:
    radial-gradient(circle at 50% 47%,rgba(var(--chu-accent-rgb),.22),rgba(var(--chu-accent-rgb),0) 54%),
    conic-gradient(
      from 220deg,
      rgba(var(--chu-accent-rgb),.28),
      rgba(var(--chu-accent-rgb),0) 18%,
      rgba(var(--chu-accent-rgb),.12) 42%,
      rgba(var(--chu-accent-rgb),0) 68%,
      rgba(var(--chu-accent-rgb),.25)
    )!important;
  box-shadow:
    0 28px 80px rgba(0,0,0,.55),
    inset 0 0 60px rgba(0,0,0,.48),
    0 0 48px rgba(var(--chu-accent-rgb),.13)!important;
}

body[data-mode] .disc-ring::before{
  border-color:rgba(var(--chu-accent-rgb),.38)!important;
}

body[data-mode] .disc-ring::after{
  border-color:rgba(var(--chu-accent-rgb),.18)!important;
}

body[data-mode] .mode-index{
  color:var(--accent)!important;
}

body[data-mode] .orbit-chip{
  border-color:rgba(var(--chu-accent-rgb),.38)!important;
  background:#10171b!important;
}

body[data-mode] .chu-shoulders{
  border-color:rgba(var(--chu-accent-rgb),.52)!important;
}

body[data-mode] .chu-shoulders::before,
body[data-mode] .chu-shoulders::after{
  background:rgba(var(--chu-accent-rgb),.58)!important;
}

body[data-mode] .chu{
  background:var(--accent)!important;
  border-color:rgba(var(--chu-accent-rgb),.78)!important;
  box-shadow:
    inset 0 -16px 28px rgba(0,0,0,.13),
    inset 0 11px 18px rgba(255,255,255,.20),
    0 15px 36px rgba(var(--chu-accent-rgb),.32)!important;
}

body[data-mode] .chu-mouth::after{
  background:rgba(var(--chu-accent-rgb),.72)!important;
}

body[data-mode] .chu-character img{
  border-color:rgba(var(--chu-accent-rgb),.72)!important;
  box-shadow:
    0 22px 54px rgba(0,0,0,.46),
    0 0 38px rgba(var(--chu-accent-rgb),.27)!important;
}

body[data-mode] .prop.active{
  background:rgba(var(--chu-accent-rgb),.16)!important;
  box-shadow:
    0 8px 24px rgba(var(--chu-accent-rgb),.26),
    inset 0 0 0 1.5px var(--accent)!important;
}

body[data-mode] .enter{
  box-shadow:0 14px 36px rgba(var(--chu-accent-rgb),.42)!important;
}

/* Dynamic auto direction pages use the same stable RGB variable. */
.direction-page .btn-accent{
  box-shadow:0 18px 38px rgba(var(--chu-accent-rgb),.28)!important;
}

.direction-page #hero.hero::before{
  background:
    radial-gradient(760px 520px at 81% 28%,rgba(var(--chu-accent-rgb),.25),rgba(var(--chu-accent-rgb),0) 70%),
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px)!important;
  background-size:auto,44px 44px,44px 44px!important;
}

.direction-page .synergy::before{
  background:radial-gradient(
    700px 450px at 86% 25%,
    rgba(var(--chu-accent-rgb),.22),
    rgba(var(--chu-accent-rgb),0) 70%
  )!important;
}

/* Keep controls readable when Android is in system dark mode. */
@media (prefers-color-scheme:dark){
  :root,
  html{
    color-scheme:only light!important;
  }
}