/* Nanil Echo global design lock. Do not replace the image background with SVG/canvas. */
:root {
  --bg-midnight: #071426;
  --bg-indigo: #101B3A;
  --bg-petrol: #062A36;
  --bg-violet: #170D3A;
  --text-main: #F4F7FB;
  --text-soft: #B8C2D8;
  --text-muted: #7F8AA3;
  --cyan: #26D7EA;
  --teal: #13AFC1;
  --violet: #6F55F7;
  --magenta: #A65CFF;
  --champagne: #F6C76D;
  --pearl: #ECF8FF;
  --royal: #4E63FF;
  --glass-base: rgba(8, 18, 38, 0.64);
  --glass-dark: rgba(6, 13, 31, 0.74);
  --glass-border: rgba(150, 230, 255, 0.24);
  --glass-border-active: rgba(80, 225, 255, 0.40);
}

html,
body {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  background:
    radial-gradient(circle at 14% 80%, rgba(190,196,208,.09), transparent 30%),
    radial-gradient(circle at 82% 16%, rgba(170,178,192,.07), transparent 26%),
    radial-gradient(circle at 52% 48%, rgba(150,158,172,.05), transparent 22%),
    radial-gradient(circle at 28% 14%, rgba(210,215,225,.05), transparent 18%),
    radial-gradient(circle at 70% 74%, rgba(160,168,182,.06), transparent 24%),
    linear-gradient(148deg, #0a0f13 0%, #070a0e 52%, #0a0e12 100%) !important;
  color: var(--text-main) !important;
  overflow-x: hidden !important;
}

body {
  position: relative;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

.nanil-ref-home,
.app,
.phone,
.shell,
.wrap,
.page,
.room,
main {
  max-width: 100% !important;
  overflow-x: clip !important;
}

.nanil-ref-home {
  width: 100% !important;
}

body::before {
  content: "";
  position: fixed;
  inset: -5%;
  z-index: 0;
  background:
    radial-gradient(ellipse 58% 28% at 16% 48%, rgba(38,215,234,0.38), transparent 64%),
    radial-gradient(ellipse 48% 24% at 86% 18%, rgba(111,85,247,0.42), transparent 66%),
    radial-gradient(ellipse 60% 30% at 72% 38%, rgba(166,92,255,0.18), transparent 70%),
    radial-gradient(circle at 82% 20%, rgba(245,217,139,0.055), transparent 28%),
    linear-gradient(135deg, #04101E 0%, #071426 42%, #100A2E 100%);
  background-size: 150% 130%, 150% 130%, 125% 120%, 100% 100%, 100% 100%;
  background-position: 0% 50%, 100% 50%, 50% 50%, center, center;
  pointer-events: none;
  animation: nanilFrequencyDrift 22s ease-in-out infinite alternate;
  transform-origin: center;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse 72% 18% at 18% 3%, rgba(38,215,234,0.14), transparent 62%),
    radial-gradient(ellipse 58% 22% at 84% 4%, rgba(111,85,247,0.18), transparent 64%),
    radial-gradient(ellipse 36% 17% at 88% 15%, rgba(246,199,109,0.13), transparent 72%),
    linear-gradient(180deg, rgba(7,20,38,0.18), rgba(7,20,38,0.00) 28%),
    radial-gradient(circle at center, rgba(8,17,31,0.00) 0%, rgba(8,17,31,0.08) 56%, rgba(8,17,31,0.00) 100%);
  mix-blend-mode: screen;
  background-size: auto;
  background-position: 50% 49%, center, center, center, center;
  background-repeat: no-repeat;
  opacity: 0.42;
  pointer-events: none;
  animation: nanilTrueFrequency 18s ease-in-out infinite alternate;
}

body .nanil-ref-home::before,
body .page::before,
body .shell::before,
body .room::before,
body .app::before,
body .wrap::before {
  display: none !important;
  content: none !important;
}

@keyframes nanilFrequencyDrift {
  0% {
    transform: scale(1.025) translate3d(-1.1%, -0.7%, 0);
    filter: saturate(1.18) brightness(1.12);
  }
  50% {
    transform: scale(1.055) translate3d(1.0%, 0.6%, 0);
    filter: saturate(1.28) brightness(1.18);
  }
  100% {
    transform: scale(1.035) translate3d(-0.4%, 1.0%, 0);
    filter: saturate(1.22) brightness(1.14);
  }
}

@keyframes nanilLiquidField {
  0% {
    background-position: -7% 49%, 107% 52%, 44% 50%, center, center, center, center;
    opacity: 0.82;
  }
  50% {
    background-position: -2% 51%, 102% 49%, 54% 51%, center, center, center, center;
    opacity: 1;
  }
  100% {
    background-position: -5% 53%, 105% 50%, 48% 49%, center, center, center, center;
    opacity: 0.9;
  }
}

@keyframes nanilTrueFrequency {
  0% {
    transform: translate3d(-1.4%, -0.8%, 0) scale(1.02);
    background-position: 47% 49%, center, center, center, center;
    opacity: 0.48;
  }
  50% {
    transform: translate3d(1.2%, 0.7%, 0) scale(1.04);
    background-position: 53% 51%, center, center, center, center;
    opacity: 0.62;
  }
  100% {
    transform: translate3d(-0.4%, 1.1%, 0) scale(1.025);
    background-position: 49% 50%, center, center, center, center;
    opacity: 0.52;
  }
}

@keyframes nanilWaveBreath {
  0% {
    transform: translate3d(-2.5%, -1%, 0) scaleX(1.04);
    opacity: 0.52;
  }
  50% {
    transform: translate3d(1.5%, 1%, 0) scaleX(1.12);
    opacity: 0.82;
  }
  100% {
    transform: translate3d(-0.5%, 0.5%, 0) scaleX(1.07);
    opacity: 0.64;
  }
}

body > * {
  position: relative;
  z-index: 3;
}

.nanil-ref-home > *,
.page > *,
.shell > * {
  position: relative;
  z-index: 2;
}

.nanil-ref-logo,
.logo,
#logoBtn {
  position: relative !important;
  overflow: visible !important;
}

.nanil-ref-logo::after,
.logo::after,
#logoBtn::after {
  content: "";
  position: absolute;
  left: var(--nanil-logo-pulse-x, 24px);
  top: var(--nanil-logo-pulse-y, 24px);
  width: var(--nanil-logo-pulse-size, 9px);
  height: var(--nanil-logo-pulse-size, 9px);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, rgba(255,255,255,0.98) 0 18%, rgba(90,180,170,0.96) 38%, rgba(30,150,145,0.66) 62%, rgba(30,150,145,0) 76%);
  box-shadow:
    0 0 10px rgba(90,180,170,0.88),
    0 0 22px rgba(30,150,145,0.54),
    0 0 38px rgba(122,77,255,0.26);
  pointer-events: none;
  z-index: 4;
  animation: nanilLogoPointBeat 1.42s ease-in-out infinite;
}

.nanil-ref-logo::before,
.logo::before,
#logoBtn::before {
  content: "";
  position: absolute;
  left: var(--nanil-logo-pulse-x, 24px);
  top: var(--nanil-logo-pulse-y, 24px);
  width: calc(var(--nanil-logo-pulse-size, 9px) * 2.8);
  height: calc(var(--nanil-logo-pulse-size, 9px) * 2.8);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(90,180,170,0.38);
  box-shadow: 0 0 20px rgba(30,150,145,0.24);
  pointer-events: none;
  z-index: 3;
  animation: nanilLogoPointRing 1.42s ease-out infinite;
}

.logo {
  --nanil-logo-pulse-x: 16px;
  --nanil-logo-pulse-y: 16px;
  --nanil-logo-pulse-size: 7px;
}

#logoBtn {
  --nanil-logo-pulse-x: 42px;
  --nanil-logo-pulse-y: 42px;
  --nanil-logo-pulse-size: 13px;
}

@keyframes nanilLogoPointBeat {
  0%, 100% {
    transform: translate(-50%, -50%) scale(0.82);
    opacity: 0.76;
    filter: brightness(1);
  }
  42% {
    transform: translate(-50%, -50%) scale(1.22);
    opacity: 1;
    filter: brightness(1.28);
  }
  62% {
    transform: translate(-50%, -50%) scale(0.98);
    opacity: 0.92;
    filter: brightness(1.08);
  }
}

@keyframes nanilLogoPointRing {
  0% {
    transform: translate(-50%, -50%) scale(0.42);
    opacity: 0.64;
  }
  72%, 100% {
    transform: translate(-50%, -50%) scale(1.42);
    opacity: 0;
  }
}

#nanilFlow,
canvas#nanilFlow {
  display: none !important;
}

.app,
.nl-app,
.morning,
.echo,
.rest,
.sleep {
  background: transparent !important;
  animation: none !important;
}

.shell,
.nl-shell,
main,
.page,
.page-wrap {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.shell,
.nl-shell {
  width: 100% !important;
  max-width: none !important;
  min-height: 100dvh !important;
}

.page-inner {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 16px 64px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.glass-card,
.glass-panel,
.glass-tile,
.tool-tile,
.nl-card,
.nl-tile,
.presence,
.action,
.panel,
.sheet .panel,
.ich-section,
.mission-card,
.modal,
.card,
.tile,
.box,
.download-card,
.task-card {
  background: rgba(8, 14, 28, 0.56) !important;
  border: 1px solid rgba(120, 220, 255, 0.22) !important;
  border-radius: 22px !important;
  color: var(--text-main) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow:
    0 22px 70px rgba(3, 14, 38, 0.34),
    0 0 32px rgba(36, 214, 232, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

.glass-card,
.glass-panel,
.glass-tile,
.tool-tile,
.nl-card,
.nl-tile,
.presence,
.action,
.panel,
.sheet .panel,
.ich-section,
.mission-card,
.modal,
.card,
.tile,
.box,
.download-card,
.task-card,
.nanil-ref-tile,
.nanil-primary-card {
  isolation: isolate;
}

.glass-card:hover,
.glass-panel:hover,
.glass-tile:hover,
.tool-tile:hover,
.nl-card:hover,
.nl-tile:hover,
.action:hover,
.card:hover,
.tile:hover {
  border-color: rgba(36, 214, 232, 0.34) !important;
  box-shadow:
    0 26px 78px rgba(3, 14, 38, 0.42),
    0 0 34px rgba(36, 214, 232, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

h1,
h2,
h3,
h4,
.hero h1,
.welcome-title,
.nl-h1,
.nl-h2,
.nl-h3,
.tool-tile,
.tool-tile *,
.nl-tile-title,
.action b {
  color: var(--text-main) !important;
}

p,
span,
small,
.hero p,
.nl-body,
.nl-quiet,
.nl-tile-sub,
.action small,
.ich-row,
.ich-row-val {
  color: var(--text-soft) !important;
}

.brand,
.brand *,
.nl-kicker,
.tool-group-lbl,
.eyebrow,
.lang .on,
.tab.on,
.nl-tab.is-active {
  color: #6fc9bf !important;
}

.lang button,
.mode,
.tab,
.nl-tab,
.nl-btn,
button,
input,
textarea {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.lang button,
.mode,
.tab,
.nl-tabbar,
.dock,
.nl-btn-ghost,
.soft,
input,
textarea {
  background: rgba(8, 14, 28, 0.48) !important;
  border-color: rgba(120, 220, 255, 0.18) !important;
  color: var(--text-main) !important;
}

.nl-btn-primary,
.primary,
.go {
  background: linear-gradient(135deg, rgba(30,150,145,0.86), rgba(122,77,255,0.72)) !important;
  color: #F4F7FB !important;
}

.tool-grid,
.all-tools-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 14px;
  width: min(920px, 100%);
  margin: 0 auto;
}

.tool-tile {
  min-height: 92px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
}

.primary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 22px;
  width: min(760px, 100%);
  margin: 28px auto 18px;
}

.primary-card {
  min-height: 160px;
  padding: 24px;
}

#camFsOv {
  z-index: 2147482000 !important;
  background:
    radial-gradient(circle at 20% 45%, rgba(30,150,145,0.14), transparent 42%),
    radial-gradient(circle at 78% 45%, rgba(180,92,255,0.14), transparent 44%),
    #08111F !important;
}

#camFsVid,
#camView {
  background: #08111F !important;
}

/* Apple-style polish: calmer, clearer, premium glass with navy depth only. */
:root {
  --apple-glass: rgba(14, 28, 55, 0.68);
  --apple-glass-strong: rgba(14, 28, 55, 0.82);
  --apple-hairline: rgba(188, 232, 255, 0.22);
  --apple-hairline-active: rgba(188, 232, 255, 0.38);
  --apple-shadow: rgba(3, 14, 38, 0.36);
}

html,
body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body::before {
  filter: saturate(1.12) brightness(1.10);
}

body::after {
  opacity: 0.46;
  filter: saturate(1.08);
}

body::after {
  background-size: 92% 62%, auto, auto, auto, auto;
  background-position: 0% 50%, center, center, center, center;
  opacity: 0.54;
  animation: nanilFlowingFrequency 11s linear infinite;
  will-change: background-position, transform, opacity;
}

body .nanil-ref-home::before,
body .page::before,
body .shell::before {
  opacity: 0.34;
  filter: blur(7px);
}

.glass-card,
.glass-panel,
.glass-tile,
.tool-tile,
.nl-card,
.nl-tile,
.presence,
.action,
.panel,
.sheet .panel,
.ich-section,
.mission-card,
.modal,
.card,
.tile,
.box,
.download-card,
.task-card {
  background:
    linear-gradient(180deg, rgba(18, 34, 64, 0.78), rgba(10, 23, 49, 0.70)) !important;
  border-color: var(--apple-hairline) !important;
  border-radius: 24px !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.18);
  backdrop-filter: blur(28px) saturate(1.18);
  box-shadow:
    0 18px 60px var(--apple-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(120, 220, 255, 0.06) !important;
}

.glass-card:hover,
.glass-panel:hover,
.glass-tile:hover,
.tool-tile:hover,
.nl-card:hover,
.nl-tile:hover,
.action:hover,
.card:hover,
.tile:hover {
  transform: translateY(-1px);
  border-color: var(--apple-hairline-active) !important;
  box-shadow:
    0 24px 76px rgba(3, 14, 38, 0.44),
    0 0 30px rgba(36, 214, 232, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

button,
.nl-btn,
.primary,
.go,
.tool-tile,
.tile,
.card,
a {
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

body,
main,
section,
article,
label,
li,
td,
th,
input,
textarea,
select,
button {
  color: #F7FBFF !important;
}

p,
span,
small,
label,
li,
.sub,
.hint,
.desc,
.muted,
.quiet,
.choice-sub,
.rec-hint,
.nl-body,
.nl-quiet {
  color: rgba(232, 241, 255, 0.78) !important;
  line-height: 1.55;
}

h1,
h2,
h3,
h4,
.title,
.headline,
.nl-h1,
.nl-h2,
.nl-h3 {
  color: #F8FCFF !important;
  letter-spacing: 0 !important;
  text-shadow: 0 16px 46px rgba(3, 14, 38, 0.32);
}

a {
  color: inherit;
}

input,
textarea,
select {
  background: rgba(14, 28, 55, 0.78) !important;
  border: 1px solid rgba(188, 232, 255, 0.24) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(232, 241, 255, 0.50) !important;
}

.page,
.shell,
.nl-shell,
.sheet,
.overlay,
#bodyDoubleOverlay,
#listenOverlay,
#breathOverlay,
#farewellOverlay {
  color-scheme: dark;
}

.nanil-ref-tile,
.tool-tile,
.nl-tile,
.tile {
  overflow: hidden;
}

.mirror-disc,
.mirror-orb,
.call-orb {
  position: relative !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,0.98) 0 10%, rgba(219,238,255,0.84) 16%, transparent 27%),
    radial-gradient(circle at 38% 34%, rgba(140,195,185,0.92) 0 18%, rgba(64,184,255,0.58) 34%, rgba(122,77,255,0.48) 58%, rgba(24,41,116,0.62) 100%) !important;
  box-shadow:
    0 0 30px rgba(206,197,176,0.58),
    0 0 70px rgba(30,150,145,0.26),
    0 22px 58px rgba(3,14,38,0.42),
    inset -16px -20px 30px rgba(31,30,122,0.58),
    inset 12px 12px 24px rgba(255,255,255,0.36),
    inset 0 0 0 1px rgba(255,255,255,0.16) !important;
  animation: nanilMirrorFloat 6.5s ease-in-out infinite !important;
}

.mirror-disc::before,
.mirror-orb::before,
.call-orb::before {
  content: "";
  position: absolute;
  inset: -18%;
  border-radius: inherit;
  background:
    conic-gradient(from 210deg, transparent 0 18%, rgba(206,197,176,0.42) 27%, transparent 38%, rgba(180,92,255,0.32) 58%, transparent 72%),
    radial-gradient(circle, rgba(30,150,145,0.22), transparent 62%);
  filter: blur(5px);
  mix-blend-mode: screen;
  animation: nanilMirrorRefraction 9s linear infinite;
}

.mirror-disc::after,
.mirror-orb::after,
.call-orb::after {
  content: "";
  position: absolute;
  left: 20%;
  top: 15%;
  width: 30%;
  height: 22%;
  border-radius: 50%;
  background: rgba(255,255,255,0.78);
  filter: blur(3px);
  transform: rotate(-22deg);
}

@keyframes nanilFlowingFrequency {
  0% {
    transform: translate3d(0, -0.6%, 0) scale(1.03);
    background-position: 0% 49%, center, center, center, center;
    opacity: 0.48;
  }
  25% {
    transform: translate3d(0, 0.7%, 0) scale(1.04);
    background-position: 32% 51%, center, center, center, center;
    opacity: 0.58;
  }
  50% {
    transform: translate3d(0, -0.2%, 0) scale(1.035);
    background-position: 64% 50%, center, center, center, center;
    opacity: 0.54;
  }
  75% {
    transform: translate3d(0, 0.9%, 0) scale(1.045);
    background-position: 96% 52%, center, center, center, center;
    opacity: 0.60;
  }
  100% {
    transform: translate3d(0, -0.6%, 0) scale(1.03);
    background-position: 128% 49%, center, center, center, center;
    opacity: 0.48;
  }
}

@keyframes nanilMirrorFloat {
  0%, 100% {
    transform: translateY(0) rotateX(0deg) rotateY(0deg) scale(1);
  }
  50% {
    transform: translateY(-7px) rotateX(4deg) rotateY(-6deg) scale(1.045);
  }
}

@keyframes nanilMirrorRefraction {
  to {
    transform: rotate(360deg);
  }
}

#camFsVid {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* 2026-06-21: User decision lock.
   The old page-wide frequency-wave layers are intentionally disabled.
   The living visual focus is the centered 3D Nanil geometry canvas. */
body::after,
body .nanil-ref-home::before,
body .page::before,
body .shell::before {
  display: none !important;
  content: none !important;
  background: none !important;
  animation: none !important;
}

body:has(.nanil-ref-home) {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body:has(.nanil-ref-home) #app,
body:has(.nanil-ref-home) .app#app {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.nanil-ref-home {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow-x: clip !important;
}

/* 2026-06-21 Vortex direction lock:
   Use the provided real image as the global living background. */
html,
body {
  background:
    radial-gradient(circle at 20% 48%, rgba(30,150,145,0.16), transparent 46%),
    radial-gradient(circle at 78% 50%, rgba(180,92,255,0.14), transparent 48%),
    linear-gradient(135deg, #071324 0%, #0A1732 46%, #120A2A 100%) !important;
}

body::before {
  content: "" !important;
  display: block !important;
  position: fixed !important;
  inset: -10vmax !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-image:
    radial-gradient(ellipse 52% 38% at 74% 28%, rgba(30,150,145,0.18), transparent 68%),
    radial-gradient(ellipse 46% 34% at 84% 18%, rgba(180,92,255,0.12), transparent 70%),
    linear-gradient(180deg, rgba(7,19,36,0.08), rgba(7,19,36,0.14)) !important;
  background-position:
    center,
    center,
    center !important;
  background-size:
    100% 100%,
    100% 100%,
    100% 100% !important;
  background-repeat: no-repeat !important;
  opacity: 0.94 !important;
  filter: saturate(1.22) brightness(1.08) contrast(1.04) !important;
  transform-origin: 96% 11%;
  animation: nanilVortexLiving 12.5s cubic-bezier(.45,0,.24,1) infinite !important;
  will-change: transform, filter, opacity;
}

body::after {
  content: "" !important;
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse 42% 28% at 13% 9%, rgba(30,150,145,0.24), transparent 68%),
    radial-gradient(ellipse 38% 24% at 88% 9%, rgba(180,92,255,0.18), transparent 70%),
    radial-gradient(circle at 57% 50%, rgba(30,150,145,0.03) 0%, rgba(122,77,255,0.08) 36%, rgba(7,19,36,0.30) 86%),
    linear-gradient(180deg, rgba(7,19,36,0.10) 0%, rgba(7,19,36,0.00) 34%, rgba(7,19,36,0.28) 100%) !important;
  mix-blend-mode: normal !important;
  opacity: 0.30 !important;
  filter: blur(24px) saturate(1.14) brightness(1.06) !important;
  transform-origin: 96% 10%;
  animation: nanilVortexBreath 10.5s ease-in-out infinite !important;
}

.nanil-primary-card,
.primary-card {
  background:
    linear-gradient(180deg, rgba(13, 27, 52, 0.44), rgba(6, 15, 34, 0.30)) !important;
  border: 1px solid rgba(170, 232, 255, 0.34) !important;
  -webkit-backdrop-filter: blur(34px) saturate(1.32) brightness(1.06) !important;
  backdrop-filter: blur(34px) saturate(1.32) brightness(1.06) !important;
  box-shadow:
    0 28px 80px rgba(2, 10, 28, 0.42),
    0 0 42px rgba(36, 214, 232, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(80,172,162,0.08) !important;
}

.nanil-primary-card:nth-child(2) {
  border-color: rgba(205, 166, 255, 0.36) !important;
  box-shadow:
    0 28px 80px rgba(2, 10, 28, 0.42),
    0 0 46px rgba(180,92,255,0.14),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(180,92,255,0.10) !important;
}

.nanil-ref-tile,
.tool-tile,
.glass-tile {
  background:
    linear-gradient(180deg, rgba(13, 27, 52, 0.36), rgba(6, 15, 34, 0.24)) !important;
  border: 1px solid rgba(170, 232, 255, 0.24) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.28) !important;
  backdrop-filter: blur(28px) saturate(1.28) !important;
  box-shadow:
    0 18px 46px rgba(2,10,28,0.32),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(80,172,162,0.06) !important;
}

.nanil-ref-video,
.nanil-ref-lang {
  background: rgba(8, 18, 38, 0.34) !important;
  border-color: rgba(170, 232, 255, 0.24) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.25) !important;
  backdrop-filter: blur(28px) saturate(1.25) !important;
  box-shadow:
    0 16px 42px rgba(2,10,28,0.28),
    inset 0 1px 0 rgba(255,255,255,0.14) !important;
}

#nanilFlow,
canvas#nanilFlow,
#nanilGeometry,
canvas#nanilGeometry {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

#nanilFlow,
canvas#nanilFlow {
  display: block !important;
  visibility: visible !important;
  opacity: 0.82 !important;
  z-index: 0 !important;
  mix-blend-mode: screen !important;
}

#nanilWebglFlow,
canvas#nanilWebglFlow {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  visibility: visible !important;
  opacity: 0.92 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  filter: saturate(1.16) brightness(1.08) contrast(1.07) !important;
}

.nanil-webgl-active #nanilFlow,
.nanil-webgl-active canvas#nanilFlow {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

#camFsCtrl {
  z-index: 2147482001 !important;
}

/* Premium cinematic palette lock: deep contrast + cyan/violet frequency + restrained champagne gold. */
.nanil-primary-card,
.primary-card,
.glass-card,
.glass-panel,
.glass-tile,
.tool-tile,
.nanil-ref-tile,
.card,
.last-card,
.mirror-card,
.choice-btn,
.choice-single,
.navtile {
  background:
    linear-gradient(145deg, rgba(12, 31, 55, 0.68), rgba(7, 13, 34, 0.58) 48%, rgba(17, 12, 48, 0.62)) !important;
  border-color: rgba(156, 226, 255, 0.25) !important;
  color: var(--text-main) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.32) brightness(1.05) !important;
  backdrop-filter: blur(30px) saturate(1.32) brightness(1.05) !important;
  box-shadow:
    0 24px 72px rgba(3, 10, 26, 0.46),
    0 0 36px rgba(38, 215, 234, 0.10),
    inset 0 1px 0 rgba(236, 248, 255, 0.16),
    inset 0 -1px 0 rgba(246, 199, 109, 0.08) !important;
}

.nanil-primary-card:first-child,
.primary-card:first-child {
  border-color: rgba(38, 215, 234, 0.40) !important;
  box-shadow:
    0 28px 84px rgba(3, 10, 26, 0.50),
    0 0 42px rgba(38, 215, 234, 0.16),
    inset 0 1px 0 rgba(236, 248, 255, 0.18),
    inset 0 -1px 0 rgba(246, 199, 109, 0.10) !important;
}

.nanil-primary-card:nth-child(2),
.primary-card:nth-child(2) {
  border-color: rgba(166, 92, 255, 0.38) !important;
  background:
    linear-gradient(145deg, rgba(18, 24, 62, 0.70), rgba(10, 12, 38, 0.60) 48%, rgba(37, 18, 72, 0.64)) !important;
  box-shadow:
    0 28px 84px rgba(3, 10, 26, 0.50),
    0 0 42px rgba(166, 92, 255, 0.15),
    0 0 24px rgba(246, 199, 109, 0.055),
    inset 0 1px 0 rgba(236, 248, 255, 0.18),
    inset 0 -1px 0 rgba(246, 199, 109, 0.12) !important;
}

.nanil-ref-video,
.nanil-ref-lang,
.nanil-live-pill {
  background:
    linear-gradient(135deg, rgba(10, 25, 48, 0.62), rgba(10, 13, 38, 0.58)) !important;
  border-color: rgba(246, 199, 109, 0.52) !important;
  box-shadow:
    0 16px 48px rgba(3, 10, 26, 0.36),
    0 0 24px rgba(38, 215, 234, 0.10),
    0 0 22px rgba(246, 199, 109, 0.16),
    inset 0 1px 0 rgba(236, 248, 255, 0.15),
    inset 0 -1px 0 rgba(246, 199, 109, 0.10) !important;
}

.nanil-primary-card::after,
.primary-card::after,
.nanil-ref-video::after,
.nanil-ref-lang::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(246, 199, 109, 0.34), transparent 20%, transparent 70%, rgba(236, 248, 255, 0.10));
  opacity: 0.68;
  mix-blend-mode: screen;
}

.nanil-primary-card,
.primary-card,
.nanil-ref-video,
.nanil-ref-lang {
  position: relative !important;
  overflow: hidden !important;
}

.nanil-ref-logo {
  gap: 15px !important;
  color: #ECF8FF !important;
  text-shadow: 0 0 18px rgba(38, 215, 234, 0.24) !important;
}

.nanil-ref-logo img {
  width: 58px !important;
  height: 58px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter:
    brightness(1.18)
    saturate(1.18)
    drop-shadow(0 0 10px rgba(38, 215, 234, 0.34))
    drop-shadow(0 0 22px rgba(246, 199, 109, 0.12)) !important;
}

.nanil-ref-logo span {
  color: #F6C76D !important;
  text-shadow:
    0 0 18px rgba(246, 199, 109, 0.22),
    0 0 26px rgba(38, 215, 234, 0.12) !important;
}

.nanil-ref-logo::before {
  opacity: 0.34 !important;
  background: rgba(246, 199, 109, 0.55) !important;
  box-shadow:
    0 0 12px rgba(246, 199, 109, 0.52),
    0 0 32px rgba(38, 215, 234, 0.32) !important;
}

.nanil-ref-logo::after {
  opacity: 0.88 !important;
  background: #ECF8FF !important;
  box-shadow:
    0 0 10px rgba(236, 248, 255, 0.84),
    0 0 24px rgba(38, 215, 234, 0.44),
    0 0 34px rgba(246, 199, 109, 0.22) !important;
}

.nanil-ref-home h1,
#nanilRefTitle {
  color: #ECF8FF !important;
  text-shadow:
    0 2px 24px rgba(2, 8, 24, 0.72),
    0 0 32px rgba(38, 215, 234, 0.12) !important;
}

.nanil-ref-kicker,
.nanil-direct,
.nanil-write-row {
  color: rgba(236, 248, 255, 0.74) !important;
}

.nanil-write-row::before,
.nanil-write-row::after {
  background: linear-gradient(90deg, transparent, rgba(246, 199, 109, 0.30), rgba(38, 215, 234, 0.18), transparent) !important;
}

/* ADHS / Termine: keep the functional forms premium instead of pale default panels. */
.wrap,
#termine,
#start {
  color: var(--text-main) !important;
}

.wrap:has(#termine),
.wrap:has(#start) {
  width: min(720px, calc(100% - 32px)) !important;
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.wrap .brand,
.wrap .sub,
#tmSub,
#tmStatus,
#tmNote {
  color: rgba(236, 248, 255, 0.74) !important;
}

.wrap .h1,
#tmH,
#h1 {
  color: #ECF8FF !important;
  text-shadow: 0 2px 22px rgba(2, 8, 24, 0.62) !important;
}

.tile,
.card2,
#tmCal,
#termine > div[style*="display:flex"],
#tmList > div {
  background:
    linear-gradient(145deg, rgba(12, 31, 55, 0.62), rgba(7, 13, 34, 0.54) 52%, rgba(17, 12, 48, 0.58)) !important;
  border: 1px solid rgba(156, 226, 255, 0.24) !important;
  color: var(--text-main) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.28) !important;
  backdrop-filter: blur(26px) saturate(1.28) !important;
  box-shadow:
    0 18px 52px rgba(3, 10, 26, 0.38),
    inset 0 1px 0 rgba(236, 248, 255, 0.13),
    inset 0 -1px 0 rgba(246, 199, 109, 0.08) !important;
}

.tile b,
.tile small,
.card2 .lbl,
.prio input,
#tmList div,
#tmCal div {
  color: rgba(236, 248, 255, 0.88) !important;
}

.tile small,
.card2 .lbl,
#tmList div[style*="font-size:13"] {
  color: rgba(184, 194, 216, 0.82) !important;
}

#tmText,
#tmWhen,
.bar textarea,
.prio input,
.add-input,
.pin-input {
  background: rgba(5, 13, 31, 0.56) !important;
  border: 1px solid rgba(156, 226, 255, 0.24) !important;
  color: #ECF8FF !important;
  -webkit-backdrop-filter: blur(18px) !important;
  backdrop-filter: blur(18px) !important;
}

#tmText::placeholder,
.bar textarea::placeholder,
.prio input::placeholder,
.add-input::placeholder {
  color: rgba(184, 194, 216, 0.58) !important;
}

#tmAdd,
.bar button,
.pin-btn,
.add-btn,
.echip.on {
  background: linear-gradient(135deg, rgba(38, 215, 234, 0.92), rgba(111, 85, 247, 0.78)) !important;
  color: #ECF8FF !important;
  border: 1px solid rgba(246, 199, 109, 0.26) !important;
  box-shadow: 0 16px 42px rgba(38, 215, 234, 0.16), inset 0 1px 0 rgba(236, 248, 255, 0.22) !important;
}

#tmMic,
#tmEnable,
#tmBack,
.chip2,
.home,
.back-btn,
.download-btn {
  background: rgba(7, 18, 38, 0.62) !important;
  border: 1px solid rgba(246, 199, 109, 0.30) !important;
  color: #F6C76D !important;
  -webkit-backdrop-filter: blur(18px) !important;
  backdrop-filter: blur(18px) !important;
}

#tmMic {
  position: relative !important;
  overflow: hidden !important;
  font-weight: 750 !important;
  letter-spacing: 0.01em !important;
  box-shadow:
    0 14px 36px rgba(246, 199, 109, 0.12),
    inset 0 1px 0 rgba(236, 248, 255, 0.14) !important;
}

#tmMic::after {
  content: "" !important;
  position: absolute !important;
  inset: -40% !important;
  background: radial-gradient(circle, rgba(246, 199, 109, 0.22), transparent 42%) !important;
  opacity: 0 !important;
  transform: scale(0.6) !important;
  transition: opacity 0.22s ease, transform 0.22s ease !important;
  pointer-events: none !important;
}

#tmMic.is-listening {
  border-color: rgba(246, 199, 109, 0.62) !important;
  color: #FFE3A3 !important;
  box-shadow:
    0 18px 46px rgba(246, 199, 109, 0.20),
    0 0 34px rgba(38, 215, 234, 0.12),
    inset 0 1px 0 rgba(236, 248, 255, 0.20) !important;
}

#tmMic.is-listening::after {
  opacity: 1 !important;
  transform: scale(1) !important;
  animation: nanilMicPulse 1.4s ease-in-out infinite !important;
}

@keyframes nanilMicPulse {
  0%,
  100% {
    transform: scale(0.72);
    opacity: 0.28;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.58;
  }
}

.calDay {
  background: rgba(7, 18, 38, 0.58) !important;
  color: rgba(236, 248, 255, 0.84) !important;
  border: 1px solid rgba(156, 226, 255, 0.16) !important;
}

#tmList button[aria-label="Kalender-Datei"] {
  background: rgba(246, 199, 109, 0.16) !important;
  color: #F6C76D !important;
}

#tmList button[aria-label="löschen"] {
  background: rgba(236, 248, 255, 0.08) !important;
  color: rgba(236, 248, 255, 0.72) !important;
}

.nanil-ref-tile:nth-child(4n+1) i,
.tool-tile:nth-child(4n+1) i {
  color: #26D7EA !important;
  filter: drop-shadow(0 0 14px rgba(38, 215, 234, 0.48)) !important;
}

.nanil-ref-tile:nth-child(4n+2) i,
.tool-tile:nth-child(4n+2) i {
  color: #8CA7FF !important;
  filter: drop-shadow(0 0 14px rgba(78, 99, 255, 0.42)) !important;
}

.nanil-ref-tile:nth-child(4n+3) i,
.tool-tile:nth-child(4n+3) i {
  color: #C9A5FF !important;
  filter: drop-shadow(0 0 14px rgba(166, 92, 255, 0.42)) !important;
}

.nanil-ref-tile:nth-child(4n) i,
.tool-tile:nth-child(4n) i {
  color: #F6C76D !important;
  filter: drop-shadow(0 0 14px rgba(246, 199, 109, 0.34)) !important;
}

@media (max-width: 900px) {
  .tool-grid,
  .all-tools-grid {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }
}

@media (max-width: 720px) {
  .primary-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .tool-grid,
  .all-tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Spirale leuchtend — überall ── */
#nanilWebglFlow,
canvas#nanilWebglFlow {
  opacity: 0.97 !important;
  filter: saturate(1.38) brightness(1.24) contrast(1.1) !important;
}

body::before {
  filter: saturate(1.48) brightness(1.34) contrast(1.08) !important;
  opacity: 0.96 !important;
}

body::after {
  content: "" !important;
  display: block !important;
  position: fixed !important;
  inset: -15% !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: conic-gradient(
    from 0deg at 50% 50%,
    rgba(30,150,145,0)    0%,
    rgba(30,150,145,.22)  6%,
    rgba(122,77,255,.18) 12%,
    rgba(30,150,145,0)   18%,
    rgba(180,92,255,.15) 24%,
    rgba(30,150,145,.20) 30%,
    rgba(30,150,145,0)   36%,
    rgba(122,77,255,.14) 42%,
    rgba(30,150,145,.18) 48%,
    rgba(30,150,145,0)   54%,
    rgba(180,92,255,.12) 60%,
    rgba(30,150,145,.16) 66%,
    rgba(30,150,145,0)   72%,
    rgba(122,77,255,.13) 78%,
    rgba(30,150,145,.14) 84%,
    rgba(30,150,145,0)   90%,
    rgba(180,92,255,.10) 96%,
    rgba(30,150,145,0)  100%
  ) !important;
  filter: blur(28px) saturate(1.6) brightness(1.38) !important;
  mix-blend-mode: screen !important;
  opacity: 0.80 !important;
  animation: nanilSpiraleSpin 24s linear infinite !important;
  will-change: transform;
}

@keyframes nanilSpiraleSpin {
  to { transform: rotate(360deg); }
}

/* ── Anthrazit meliert — alle Seiten global ── */
.glass-card,
.glass-panel,
.glass-tile,
.tool-tile,
.nanil-ref-tile,
.nl-card,
.nl-tile,
.presence,
.action,
.panel,
.sheet .panel,
.ich-section,
.mission-card,
.modal,
.card,
.tile,
.box,
.download-card,
.task-card,
.choice-btn,
.choice-single,
.navtile,
.last-card,
.nanil-primary-card,
.primary-card {
  background:
    radial-gradient(circle at 14% 80%, rgba(190,196,208,.09) 0%, transparent 30%),
    radial-gradient(circle at 82% 16%, rgba(170,178,192,.07) 0%, transparent 26%),
    radial-gradient(circle at 52% 48%, rgba(150,158,172,.06) 0%, transparent 22%),
    radial-gradient(circle at 28% 14%, rgba(210,215,225,.05) 0%, transparent 18%),
    radial-gradient(circle at 70% 74%, rgba(160,168,182,.06) 0%, transparent 24%),
    radial-gradient(circle at 92% 55%, rgba(140,148,162,.04) 0%, transparent 16%),
    linear-gradient(148deg, #0a0f13 0%, #070a0e 52%, #0a0e12 100%) !important;
  border-color: rgba(90,160,152,.22) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.12) !important;
  backdrop-filter: blur(22px) saturate(1.12) !important;
  box-shadow:
    0 18px 56px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.11) !important;
}
/* ═══════════ NANIL SCHACHBRETT 2026-07-02b — echtes Dunkel/Hell-Schachbrett ═══════════
   nanil-rhythm.js vergibt pro Kachel .nkD (dunkel) / .nkL (hell) nach echter
   (Zeile+Spalte)-Position -> immer Schachbrett, nie Spalten-Blöcke.
   Höhere Spezifität (body .card.nkX) schlägt alle alten Regeln (.nvx.nvl, nth-child…). */
body .card.nkD{
  background:linear-gradient(158deg,rgba(20,58,54,.28),rgba(7,18,18,.40)) !important;
  border:1px solid rgba(150,200,190,.22) !important;
  -webkit-backdrop-filter:blur(20px) saturate(1.3) !important;backdrop-filter:blur(20px) saturate(1.3) !important;
  box-shadow:0 12px 30px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.12) !important;
}
body .card.nkL{
  background:linear-gradient(158deg,rgba(224,242,238,.44),rgba(248,252,250,.30)) !important;
  border:1px solid rgba(42,150,140,.34) !important;
  -webkit-backdrop-filter:blur(20px) saturate(1.2) !important;backdrop-filter:blur(20px) saturate(1.2) !important;
  box-shadow:0 12px 30px rgba(20,50,60,.18),inset 0 1px 0 rgba(255,255,255,.50) !important;
}
body .card.nkD .ct .t, body .card.nkD .t{color:#F8FCFF !important}
body .card.nkD .ct .m, body .card.nkD .m{color:rgba(206,230,245,.82) !important}
body .card.nkD :where(span,div,p,b,strong,small,li,h1,h2,h3,h4){color:#EAF6F3 !important;text-shadow:none !important}
body .card.nkL .ct .t, body .card.nkL .t{color:#0e2830 !important}
body .card.nkL .ct .m, body .card.nkL .m{color:rgba(18,50,60,.82) !important}
body .card.nkL span, body .card.nkL div, body .card.nkL p, body .card.nkL b, body .card.nkL strong, body .card.nkL small, body .card.nkL li, body .card.nkL h1, body .card.nkL h2, body .card.nkL h3, body .card.nkL h4{color:#0e2830 !important;text-shadow:none !important}
body .card.nkL .ic i, body .card.nkL .play, body .card.nkL #pp{color:#0e2830 !important}

/* ═══════════ NANIL PALETTE B 2026-07-02 — Champagner-Gold für die EINE Hauptaktion ═══════════
   Premium-Prinzip: tiefdunkle Basis + ruhiges Teal-System + Gold nur für den wichtigsten Knopf. */
body .btn-teal,
body button.btn-teal{
  background:linear-gradient(135deg,#ecd4a0,#cdac68) !important;
  color:#2a2213 !important;
  border:1px solid rgba(255,240,205,.5) !important;
  box-shadow:0 10px 26px rgba(180,150,80,.30),inset 0 1px 0 rgba(255,255,255,.55) !important;
}

/* ═══════════ NANIL PREMIUM-ICONS 2026-07-02 — EIN einheitlicher Icon-Stil überall ═══════════
   Ersetzt den bunten Regenbogen (grün/blau/lila) durch dunkles Petrol-Glas + Champagner-Symbol.
   Höchste Spezifität + !important -> schlägt auch die Inline-Gradienten der Kacheln. */
body .tool-tile-ic, body .onb-pill .ic{
  background:linear-gradient(160deg,rgba(70,130,120,.24),rgba(12,26,26,.44)) !important;
  border:1px solid rgba(150,210,200,.20) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 16px rgba(0,0,0,.30) !important;
}
body .tool-tile-ic svg, body .tool-tile-ic svg *, body .onb-pill .ic svg, body .onb-pill .ic svg *{
  stroke:#ecdfc2 !important; color:#ecdfc2 !important; fill:none !important;
}
body .onb-pill .ic svg[fill]:not([fill="none"]), body .onb-pill .ic svg[fill] *{ fill:#ecdfc2 !important; }
body .tool-tile-ic::after{ opacity:.35 !important; }
/* Sektions-Überschriften warm & ruhig (kein cyan Geflacker) */
body .settings-group-title{ color:rgba(228,208,168,.82)!important; text-shadow:none!important; -webkit-text-fill-color:rgba(228,208,168,.82)!important; background:none!important; animation:none!important; }

/* ═══════════ NANIL FLAGSHIP-POLISH 2026-07-02 — „teurer" wirkende Kacheln + veredelte Icons ═══════════ */
/* Kachel-Glas: sauberer, weniger Farbschleier, feine Champagner-Kante, mehr Tiefe */
body .tool-tile{
  background:linear-gradient(162deg,rgba(255,255,255,.06),rgba(10,16,20,.34)) !important;
  border:1px solid rgba(214,198,160,.20) !important;
  border-radius:20px !important;
  -webkit-backdrop-filter:blur(26px) saturate(1.15) !important;backdrop-filter:blur(26px) saturate(1.15) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 .5px rgba(214,198,160,.10) !important;
}
body .tool-tile:active{ transform:translateY(-2px) scale(1.005); border-color:rgba(230,204,146,.42) !important; }
/* Icons veredelt: feiner Strich + zarter Gold-Schimmer, champagner */
body .tool-tile-ic{ border-radius:15px !important; }
body .tool-tile-ic svg{ stroke-width:1.6 !important; filter:drop-shadow(0 0 5px rgba(230,204,146,.28)) drop-shadow(0 1px 1px rgba(0,0,0,.3)) !important; }
body .tool-tile-ic svg, body .tool-tile-ic svg *{ stroke:#efe3c6 !important; color:#efe3c6 !important; }
/* Karten-Titel etwas edler */
body .tool-tile .tool-tile-nm{ letter-spacing:.005em; }
/* ERSTE SEITE LEBENDIG (Nutzerwunsch 2026-07-06): Kacheln klar sichtbar farbig umrandet (rotierend)
   + weicher Farb-Halo, damit der Unterschied auf einen Blick da ist. Nur Palette: teal/violett/
   tiefes Blau/champagner-gold — KEIN Rosa, kein reines Schwarz, weicher Glow (kein Kitsch). */
body .tool-tile{ border-width:2px !important; }
body .tool-tile:nth-child(4n+1){ border-color:rgba(52,208,226,.92) !important; box-shadow:0 14px 30px rgba(0,0,0,.42),0 0 0 1px rgba(52,208,226,.34),0 0 22px rgba(52,208,226,.30) !important; }   /* teal */
body .tool-tile:nth-child(4n+2){ border-color:rgba(150,120,255,.90) !important; box-shadow:0 14px 30px rgba(0,0,0,.42),0 0 0 1px rgba(150,120,255,.32),0 0 22px rgba(150,120,255,.28) !important; }  /* violett */
body .tool-tile:nth-child(4n+3){ border-color:rgba(86,162,226,.90) !important; box-shadow:0 14px 30px rgba(0,0,0,.42),0 0 0 1px rgba(86,162,226,.32),0 0 22px rgba(86,162,226,.28) !important; }   /* tiefes Blau */
body .tool-tile:nth-child(4n){ border-color:rgba(224,198,140,.92) !important; box-shadow:0 14px 30px rgba(0,0,0,.42),0 0 0 1px rgba(224,198,140,.36),0 0 22px rgba(224,198,140,.30) !important; }     /* champagner-gold — KEIN Rosa */

/* ═══════════ NANIL 150 — Seele: lebendiger Gold-Schimmer + weiche Einblendung ═══════════ */
body #echoGreet{
  background:linear-gradient(100deg,#f3ecdb 18%,#eacf93 45%,#f6e9c8 57%,#f3ecdb 82%) !important;
  background-size:220% 100% !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
  animation:nanShine 8.5s ease-in-out infinite !important;
}
@keyframes nanShine{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media (prefers-reduced-motion:no-preference){
  body #tabEcho.active{ animation:nanFade .7s ease both; }
  body #onboarding{ animation:nanFade .6s ease both; }
}
@keyframes nanFade{ from{opacity:0} to{opacity:1} }