@font-face {
  font-family: "Huiwen";
  src: url("Huiwen.otf") format("opentype");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --paper: #f7f4ee;
  --paper-deep: #ebe7de;
  --paper-warm: #f3efe7;
  --ink: #111414;
  --ink-2: #202423;
  --ink-soft: #64645f;
  --ash: rgba(17, 20, 20, 0.1);
  --wash-blue: rgba(89, 120, 139, 0.16);
  --wash-green: rgba(92, 132, 106, 0.13);
  --wash-red: rgba(174, 46, 35, 0.11);
  --verm: #b42b22;
  --ink-ui-bg: url("assets/ink-ui-bg.png");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.74' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  --ink-river: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 430 360'%3E%3Crect width='430' height='360' fill='none'/%3E%3Cg fill='%23111414'%3E%3Cpath d='M-20 174C42 150 72 176 120 160C156 148 188 106 232 124C266 138 268 170 310 166C354 162 386 124 450 146L450 206C394 198 366 232 314 230C260 228 244 196 206 196C166 196 142 232 96 230C46 228 24 204-20 214Z'/%3E%3Cpath d='M-26 264C24 228 66 230 106 246C146 262 174 300 228 286C280 272 286 232 340 232C386 232 414 260 456 268L456 372L-26 372Z'/%3E%3Cpath d='M44 108C70 84 100 86 122 108C138 124 142 148 122 156C96 166 76 144 52 146C38 148 28 140 34 126C36 120 40 114 44 108Z'/%3E%3Cpath d='M300 92C330 66 366 74 384 102C396 120 390 140 370 146C342 154 330 126 302 130C286 132 280 108 300 92Z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23f7f4ee' stroke-linecap='round' stroke-opacity='.86'%3E%3Cpath stroke-width='2.8' d='M-20 184C26 170 66 190 110 178C154 166 176 130 220 138C262 146 270 184 318 178C362 172 390 144 450 158'/%3E%3Cpath stroke-width='2.2' d='M-18 200C28 184 66 204 112 192C158 180 178 148 220 154C264 160 272 198 318 192C364 186 390 160 450 174'/%3E%3Cpath stroke-width='1.8' d='M-18 216C30 200 70 220 116 208C160 196 184 168 224 172C266 176 278 214 320 208C364 202 394 178 452 190'/%3E%3Cpath stroke-width='1.4' d='M-12 282C36 250 76 254 116 270C154 286 180 318 230 304C276 292 288 254 338 254C382 254 414 282 456 288'/%3E%3Cpath stroke-width='1.3' d='M-12 300C38 270 80 274 118 288C158 304 184 334 232 320C278 308 292 274 340 274C386 274 416 300 456 306'/%3E%3C/g%3E%3Cg fill='%23b42b22'%3E%3Ccircle cx='356' cy='88' r='3'/%3E%3Ccircle cx='80' cy='92' r='2.4'/%3E%3C/g%3E%3Cg fill='%235c846a' opacity='.76'%3E%3Ccircle cx='248' cy='118' r='3.4'/%3E%3Ccircle cx='258' cy='112' r='2.4'/%3E%3Ccircle cx='74' cy='136' r='2.6'/%3E%3C/g%3E%3C/svg%3E");
  --roofline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 430 120'%3E%3Cpath fill='%23111414' d='M-12 70C28 62 62 44 94 50C130 56 150 82 190 74C228 66 250 34 292 42C328 48 348 72 386 68C412 66 432 56 446 48L446 90C414 98 380 108 342 98C306 88 288 62 250 70C214 78 190 108 150 102C112 96 88 72 48 76C20 78 2 88-12 94Z'/%3E%3C/svg%3E");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body.dune-body {
  background:
    radial-gradient(860px 560px at 78% 2%, rgba(92, 132, 106, 0.08), transparent 55%),
    radial-gradient(720px 460px at 8% 86%, rgba(89, 120, 139, 0.1), transparent 58%),
    linear-gradient(180deg, #f8f5ee 0%, #f3efe6 48%, #ede8df 100%) !important;
  color: var(--ink);
  overflow-x: hidden;
}

body.dune-body::before,
body.dune-body::after,
.app-shell::before,
.app-shell::after,
.paper-card::before,
.paper-card::after,
.paper-card-soft::before,
.paper-card-soft::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

body.dune-body::before {
  position: fixed;
  inset: 0;
  background: var(--grain);
  opacity: 0.17;
  mix-blend-mode: multiply;
}

body.dune-body::after {
  position: fixed;
  inset: auto 0 0 0;
  height: 42vh;
  background:
    linear-gradient(180deg, transparent, rgba(17, 20, 20, 0.045)),
    var(--roofline);
  background-size: auto, 110% auto;
  background-position: center bottom;
  opacity: 0.18;
}

.app-shell {
  position: relative;
  border: 1px solid rgba(17, 20, 20, 0.18);
  border-radius: 26px;
  background:
    radial-gradient(240px 180px at 86% 9%, rgba(89, 120, 139, 0.13), transparent 70%),
    radial-gradient(260px 180px at 5% 82%, rgba(174, 46, 35, 0.055), transparent 68%),
    linear-gradient(180deg, rgba(250, 248, 242, 0.98), rgba(242, 238, 230, 0.98)) !important;
  box-shadow: 0 28px 80px rgba(17, 20, 20, 0.16);
}

.app-shell::before {
  inset: 0;
  background: var(--grain);
  opacity: 0.15;
  mix-blend-mode: multiply;
}

.app-shell::after {
  inset: 0;
  border-radius: inherit;
  border: 7px solid rgba(255, 255, 255, 0.24);
}

#app {
  position: relative;
  z-index: 1;
}

.screen {
  transition: opacity 0.36s ease, transform 0.36s cubic-bezier(0.2, 1, 0.24, 1) !important;
}

.screen.active {
  animation: inkAppear 0.42s cubic-bezier(0.2, 1, 0.24, 1);
}

@keyframes inkAppear {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.app-header {
  background: rgba(248, 246, 240, 0.88) !important;
  border-bottom: 1px solid rgba(17, 20, 20, 0.12) !important;
  backdrop-filter: blur(14px);
}

.app-header::after {
  content: "";
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: -5px;
  height: 7px;
  background: var(--roofline);
  background-size: 100% 100%;
  opacity: 0.5;
  pointer-events: none;
}

.app-header h1,
#screen-auth h2,
#screen-home h2,
#screen-home h3,
#screen-timeline h2,
#screen-checkin h2,
#screen-success h2,
#screen-ai-insight h2,
#screen-tutorial h2,
#screen-bedtime h2,
#screen-profile h2 {
  font-family: "Huiwen", "WenKai", "Kaiti SC", serif;
  color: var(--ink) !important;
  letter-spacing: 0 !important;
}

.app-header h1 {
  font-size: 1.1rem;
  font-weight: 700;
}

.app-header > div:last-child,
.home-heading > div:last-child,
.seed-overview > button .h-11,
.introspection-row .h-12,
.profile-stage .h-16,
.insight-stage .h-16,
#screen-success .h-32 {
  background: rgba(248, 246, 240, 0.78) !important;
  border: 1px solid rgba(17, 20, 20, 0.16) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 -5px 12px rgba(17, 20, 20, 0.035);
}

.home-stage,
.timeline-stage,
.checkin-stage,
.guide-stage,
.bedtime-stage,
.profile-stage,
.success-stage,
.auth-stage,
.insight-stage {
  position: relative;
  isolation: isolate;
}

.home-stage,
.timeline-stage,
.checkin-stage,
.guide-stage,
.bedtime-stage,
.profile-stage,
.success-stage,
.auth-stage,
.insight-stage {
  background:
    linear-gradient(180deg, rgba(248, 246, 240, 0.25), rgba(248, 246, 240, 0.5) 58%, rgba(248, 246, 240, 0.86)),
    var(--ink-ui-bg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center top;
}

.home-stage {
  background-size: 112% auto;
  background-position: center -0.6rem;
}

.timeline-stage {
  background:
    linear-gradient(180deg, rgba(248, 246, 240, 0.38), rgba(248, 246, 240, 0.58) 48%, rgba(248, 246, 240, 0.9)),
    var(--ink-ui-bg);
  background-size: 148% auto;
  background-position: 54% -7rem;
}

.checkin-stage {
  background:
    linear-gradient(180deg, rgba(248, 246, 240, 0.32), rgba(248, 246, 240, 0.52) 44%, rgba(248, 246, 240, 0.88)),
    var(--ink-ui-bg);
  background-size: 135% auto;
  background-position: 48% -10rem;
}

.guide-stage,
.insight-stage {
  background:
    linear-gradient(180deg, rgba(248, 246, 240, 0.48), rgba(248, 246, 240, 0.68) 58%, rgba(248, 246, 240, 0.92)),
    var(--ink-ui-bg);
  background-size: 155% auto;
  background-position: 44% -22rem;
}

.bedtime-stage {
  background:
    linear-gradient(180deg, rgba(248, 246, 240, 0.36), rgba(248, 246, 240, 0.6) 44%, rgba(248, 246, 240, 0.9)),
    var(--ink-ui-bg);
  background-size: 162% auto;
  background-position: 58% -30rem;
}

.profile-stage {
  background:
    linear-gradient(180deg, rgba(248, 246, 240, 0.34), rgba(248, 246, 240, 0.58) 52%, rgba(248, 246, 240, 0.9)),
    var(--ink-ui-bg);
  background-size: 144% auto;
  background-position: 38% -18rem;
}

.success-stage,
.auth-stage {
  background:
    linear-gradient(180deg, rgba(248, 246, 240, 0.34), rgba(248, 246, 240, 0.58) 62%, rgba(248, 246, 240, 0.88)),
    var(--ink-ui-bg);
  background-size: 142% auto;
  background-position: 52% -13rem;
}

.home-stage > *,
.timeline-stage > *,
.checkin-stage > *,
.guide-stage > *,
.bedtime-stage > *,
.profile-stage > *,
.success-stage > *,
.auth-stage > *,
.insight-stage > * {
  position: relative;
  z-index: 1;
}

.home-stage::before,
.timeline-stage::before,
.profile-stage::before,
.checkin-stage::before,
.guide-stage::before,
.bedtime-stage::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  right: -3.2rem;
  width: 12rem;
  height: 8rem;
  background: radial-gradient(closest-side, var(--wash-blue), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}

.timeline-stage::before {
  top: 6rem;
  right: auto;
  left: -3.8rem;
  width: 13rem;
  height: 12rem;
  background: radial-gradient(closest-side, rgba(17, 20, 20, 0.08), transparent 72%);
}

.checkin-stage::before {
  top: 11rem;
  right: -4.8rem;
  width: 16rem;
  height: 12rem;
  background: radial-gradient(closest-side, rgba(89, 120, 139, 0.13), transparent 72%);
}

.guide-stage::before,
.insight-stage::before {
  top: 2.5rem;
  right: auto;
  left: -4.2rem;
  width: 15rem;
  height: 10rem;
  background: radial-gradient(closest-side, rgba(92, 132, 106, 0.12), transparent 72%);
}

.bedtime-stage::before {
  top: 1.2rem;
  right: -5.4rem;
  width: 16rem;
  height: 14rem;
  background: radial-gradient(closest-side, rgba(174, 46, 35, 0.08), transparent 72%);
}

.profile-stage::before {
  top: 9rem;
  right: -5rem;
  width: 16rem;
  height: 13rem;
  background: radial-gradient(closest-side, rgba(92, 132, 106, 0.13), transparent 72%);
}

.home-stage::after,
.timeline-stage::after,
.checkin-stage::after,
.guide-stage::after,
.bedtime-stage::after,
.profile-stage::after,
.success-stage::after,
.auth-stage::after,
.insight-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(247, 244, 237, 0) 0 70%, rgba(247, 244, 237, 0.82) 92%),
    var(--grain);
  opacity: 0.2;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.home-heading p:first-child,
.timeline-stage p:first-child,
.insight-stage p:first-child {
  letter-spacing: 0.16em !important;
  color: var(--ink-soft) !important;
}

#greeting-text {
  font-size: clamp(2rem, 1.78rem + 0.9vw, 2.5rem) !important;
  line-height: 1.02;
}

.paper-card,
.paper-card-soft {
  --module-wash: transparent;
  position: relative;
  overflow: hidden;
  border-radius: 6px !important;
  border: 1px solid rgba(17, 20, 20, 0.14) !important;
  background:
    radial-gradient(160px 90px at 88% 12%, var(--module-wash), transparent 72%),
    linear-gradient(180deg, rgba(250, 248, 242, 0.93), rgba(247, 244, 237, 0.88)) !important;
  box-shadow:
    0 12px 28px rgba(17, 20, 20, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
}

.paper-card::before,
.paper-card-soft::before {
  display: none;
}

.paper-card::after,
.paper-card-soft::after {
  inset: 0;
  background: var(--grain);
  opacity: 0.1;
  mix-blend-mode: multiply;
}

.paper-card > *,
.paper-card-soft > * {
  position: relative;
  z-index: 1;
}

.paper-card-soft {
  background:
    radial-gradient(150px 100px at 78% 18%, rgba(92, 132, 106, 0.12), transparent 74%),
    linear-gradient(180deg, rgba(250, 248, 242, 0.96), rgba(246, 242, 234, 0.92)) !important;
}

.home-stage .paper-card,
.home-stage .paper-card-soft,
.timeline-stage .paper-card,
.timeline-stage .paper-card-soft,
.checkin-stage .paper-card,
.checkin-stage .paper-card-soft,
.guide-stage .paper-card,
.guide-stage .paper-card-soft,
.bedtime-stage .paper-card,
.bedtime-stage .paper-card-soft,
.profile-stage .paper-card,
.profile-stage .paper-card-soft,
.success-stage .paper-card,
.success-stage .paper-card-soft,
.insight-stage .paper-card,
.insight-stage .paper-card-soft {
  background:
    radial-gradient(130px 86px at 88% 14%, var(--module-wash), transparent 76%),
    rgba(250, 248, 242, 0.52) !important;
  border-color: rgba(17, 20, 20, 0.09) !important;
  box-shadow: 0 10px 22px rgba(17, 20, 20, 0.035) !important;
  backdrop-filter: blur(1.5px);
}

.home-stage .seed-overview .paper-card,
.home-stage .introspection-row,
.home-stage .offering-card,
.home-stage .insight-preview,
.timeline-stage .paper-card,
.checkin-stage .paper-card,
.checkin-stage .paper-card-soft,
.guide-stage .paper-card,
.bedtime-stage .paper-card,
.bedtime-stage .paper-card-soft,
.profile-stage .paper-card,
.profile-stage .paper-card-soft,
.insight-stage .paper-card,
.success-stage .paper-card,
.success-stage .paper-card-soft {
  background:
    linear-gradient(180deg, rgba(250, 248, 242, 0.54), rgba(250, 248, 242, 0.42)) !important;
}

.dune-hero {
  display: flex;
  min-height: 27.5rem;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.25rem !important;
  border-radius: 6px !important;
  border-color: rgba(17, 20, 20, 0.08) !important;
  background:
    linear-gradient(180deg, rgba(250, 248, 242, 0.86) 0%, rgba(250, 248, 242, 0.54) 38%, rgba(250, 248, 242, 0.2) 70%, rgba(250, 248, 242, 0.78) 100%) !important;
  background-size: 100% 100%, 122% auto !important;
  background-position: center, center 58% !important;
  box-shadow: none !important;
}

.dune-hero::before {
  inset: 0;
  background:
    radial-gradient(110px 70px at 72% 12%, rgba(92, 132, 106, 0.18), transparent 70%),
    radial-gradient(80px 70px at 17% 22%, rgba(174, 46, 35, 0.08), transparent 74%);
  opacity: 0.9;
}

.dune-hero::after {
  inset: 0;
  background: var(--grain);
  opacity: 0.06;
}

.dune-hero > div:first-child {
  padding: 0.55rem 0.35rem 0.8rem;
  background: linear-gradient(180deg, rgba(250, 248, 242, 0.82), rgba(250, 248, 242, 0.08));
}

.dune-hero > div:last-child {
  border-radius: 4px !important;
  border: 1px solid rgba(17, 20, 20, 0.13);
  background:
    radial-gradient(80px 60px at 86% 18%, rgba(89, 120, 139, 0.12), transparent 74%),
    rgba(250, 248, 242, 0.72) !important;
  box-shadow: 0 12px 24px rgba(17, 20, 20, 0.04);
}

.paper-btn,
#btn-home-next-record,
#btn-withdraw-pool,
#btn-enable-notifications {
  position: relative;
  overflow: hidden;
  border-radius: 4px !important;
  border: 0 !important;
  background: var(--ink) !important;
  color: var(--paper) !important;
  box-shadow: 0 14px 24px rgba(17, 20, 20, 0.18) !important;
}

.paper-btn::before,
#btn-home-next-record::before,
#btn-withdraw-pool::before,
#btn-enable-notifications::before {
  content: "";
  position: absolute;
  inset: -24% -8%;
  background:
    linear-gradient(100deg, transparent 0 14%, rgba(255, 255, 255, 0.16) 16%, transparent 19% 100%),
    var(--grain);
  opacity: 0.28;
}

.paper-btn > *,
#btn-home-next-record > *,
#btn-withdraw-pool > *,
#btn-enable-notifications > * {
  position: relative;
  z-index: 1;
}

button,
input,
textarea {
  transition: background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

button:active {
  transform: translateY(1px) scale(0.99);
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(180, 43, 34, 0.12) !important;
}

input,
textarea {
  border-radius: 4px !important;
  border-color: rgba(17, 20, 20, 0.14) !important;
  background:
    radial-gradient(90px 56px at 92% 10%, rgba(89, 120, 139, 0.1), transparent 74%),
    rgba(250, 248, 242, 0.78) !important;
  color: var(--ink) !important;
  box-shadow: inset 0 -10px 18px rgba(17, 20, 20, 0.035);
}

input::placeholder,
textarea::placeholder {
  color: rgba(100, 100, 95, 0.66) !important;
}

.text-ink,
.text-primary,
.text-secondary,
.text-tertiary,
.text-green-700,
.paper-card h2,
.paper-card h3,
.paper-card-soft h2,
.paper-card-soft h3,
.paper-card span,
.paper-card-soft span {
  color: var(--ink) !important;
}

.text-muted,
.home-stage .text-muted,
.profile-stage .text-muted,
.checkin-stage .text-muted,
.timeline-stage .text-muted,
.guide-stage .text-muted,
.bedtime-stage .text-muted,
.insight-stage .text-muted {
  color: var(--ink-soft) !important;
}

.auth-stage > div {
  position: relative;
  overflow: hidden;
  padding: 2rem 1.5rem;
  border: 1px solid rgba(17, 20, 20, 0.18);
  border-radius: 4px;
  background:
    radial-gradient(120px 84px at 78% 10%, var(--wash-green), transparent 74%),
    linear-gradient(180deg, rgba(250, 248, 242, 0.94), rgba(247, 244, 237, 0.88));
  box-shadow: 0 24px 48px rgba(17, 20, 20, 0.12);
}

.auth-stage > div::before {
  display: none;
}

#seed-wealth {
  --module-wash: var(--wash-red);
}

#seed-kindness {
  --module-wash: var(--wash-green);
}

#seed-health,
.offering-card,
.profile-stage .paper-card-soft {
  --module-wash: var(--wash-blue);
}

.introspection-row,
.focus-panel,
.insight-preview {
  --module-wash: rgba(17, 20, 20, 0.075);
}

.seed-overview > button {
  min-height: 10rem;
  padding-top: 1.05rem !important;
}

.seed-overview > button .material-symbols-outlined,
.introspection-row .material-symbols-outlined,
.profile-stage .material-symbols-outlined,
.insight-stage .material-symbols-outlined,
#screen-success .material-symbols-outlined {
  color: var(--ink) !important;
}

.introspection-row {
  border-left: 8px solid var(--ink) !important;
}

.offering-card {
  border-top: 8px solid var(--ink) !important;
}

.offering-card #home-offering-pool,
#profile-current-pool,
#profile-lifetime-money,
#success-money,
#next-reminder-time,
#current-session-index,
#home-ring-done,
#home-ring-total,
#checkin-seconds {
  color: var(--ink) !important;
}

.dune-hero #next-reminder-label {
  background: rgba(180, 43, 34, 0.1) !important;
  color: var(--verm) !important;
}

.bg-primary,
.bg-secondary,
.bg-tertiary,
.bg-green-700 {
  background: var(--verm) !important;
}

.bg-primary\/10,
.bg-secondary\/10,
.bg-tertiary\/10,
.bg-green-700\/10,
.bg-white\/70,
.bg-white\/80,
.bg-surface {
  background: rgba(250, 248, 242, 0.72) !important;
}

.border-outline,
.border-outline\/50,
.border-red-200 {
  border-color: rgba(17, 20, 20, 0.14) !important;
}

#home-ring-progress,
#checkin-timer-ring {
  color: var(--ink) !important;
  filter: drop-shadow(0 2px 0 rgba(180, 43, 34, 0.15));
}

#timer-box {
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(250, 248, 242, 0.84) 0 42%, rgba(17, 20, 20, 0.055) 43% 46%, transparent 47%),
    radial-gradient(circle, var(--wash-blue), transparent 70%);
}

.tag-chip {
  border-radius: 4px !important;
  border: 1px solid rgba(17, 20, 20, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(250, 248, 242, 0.88), rgba(245, 241, 232, 0.72)) !important;
  color: var(--ink-2) !important;
}

.tag-chip.active {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--paper) !important;
  box-shadow: 0 8px 16px rgba(17, 20, 20, 0.14);
}

#calendar-grid > div {
  border: 1px solid rgba(17, 20, 20, 0.12);
  border-radius: 2px !important;
  box-shadow: inset 0 -5px 10px rgba(17, 20, 20, 0.035);
}

#reminder-list > div {
  display: grid !important;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem !important;
  border-radius: 8px;
  padding: 0.35rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(17, 20, 20, 0.1);
}

#reminder-list > div > span {
  width: auto !important;
  padding-left: 0.15rem;
  color: rgba(32, 36, 35, 0.72) !important;
}

#reminder-list input[type="time"] {
  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(250, 248, 242, 0.78), rgba(246, 242, 234, 0.56)) !important;
  box-shadow: inset 0 -8px 16px rgba(17, 20, 20, 0.03);
}

#notification-status,
#profile-save-feedback,
#reminder-save-feedback,
#withdraw-feedback,
#auth-toggle-link {
  color: var(--verm) !important;
}

#bottom-nav {
  background:
    linear-gradient(180deg, rgba(248, 246, 240, 0.86), rgba(242, 238, 230, 0.94)) !important;
  border-top: 1px solid rgba(17, 20, 20, 0.16) !important;
  backdrop-filter: blur(14px);
}

#bottom-nav::before {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  top: -2px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(17, 20, 20, 0.42), transparent);
  opacity: 0.48;
  pointer-events: none;
}

.nav-item {
  position: relative;
  gap: 0.2rem !important;
}

.nav-item.text-primary::after {
  content: "";
  position: absolute;
  top: 0.4rem;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--verm);
  transform: translateX(-50%);
}

.nav-item span:last-child {
  letter-spacing: 0 !important;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 230, "GRAD" 0, "opsz" 24 !important;
}

button.rounded-2xl,
button.rounded-xl,
.rounded-2xl,
.rounded-3xl,
.rounded-full {
  border-radius: 4px !important;
}

.rounded-full {
  border-radius: 999px !important;
}

@media (max-width: 480px) {
  .app-shell {
    max-width: 100%;
    border-inline: none;
    border-radius: 0;
  }

  .dune-hero {
    min-height: 27.4rem;
  }
}