@font-face {
  font-family: "XiguoInk";
  src: url("assets/fonts/surname-font.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  font-size: 16px;
}

:root {
  /* Global theme tokens: change the H5 palette here first. */
  --theme-page: #f8f7f5;
  --theme-card: #ffffff;
  --theme-primary: #4e8baa;
  --theme-button-text: #FFFFFF;
  --theme-tag: #EFF5F6;
  --theme-muted-accent: #4e8baa;
  --theme-accent: #C49A51;
  --theme-title: #273033;
  --theme-subtitle: #81796E;
  --theme-divider: #E6DED3;
  --theme-card-soft: rgba(255, 255, 255, 0.82);
  --theme-card-glass: rgba(255, 255, 255, 0.72);
}

nav iconify-icon:not([icon^="twemoji:"]) {
  color: var(--theme-primary) !important;
}

body,
.bg-\[\#f8f7f5\],
.min-h-screen.bg-white {
  background-color: var(--theme-page) !important;
}

.bg-white,
.glass-card,
section.bg-white,
div.bg-white,
a.bg-white,
button.bg-white,
nav.bg-white\/80,
.bg-white\/80,
.bg-white\/70,
.bg-white\/60,
.bg-white\/78,
.bg-white\/86 {
  background-color: var(--theme-card) !important;
}

.glass-card,
.bg-white\/70,
.bg-white\/78,
.bg-white\/80 {
  backdrop-filter: blur(14px);
}

.bg-gray-50,
.bg-slate-50,
.bg-indigo-50,
.bg-blue-50,
.bg-rose-50,
.bg-amber-50,
.bg-emerald-50,
.bg-fuchsia-50,
.bg-stone-50,
.bg-\[\#FAF7F0\],
.bg-\[\#F2EFE8\] {
  background-color: var(--theme-tag) !important;
}

.bg-indigo-100,
.bg-blue-100,
.bg-rose-100,
.bg-amber-100,
.bg-emerald-100 {
  background-color: color-mix(in srgb, var(--theme-tag) 72%, white) !important;
}

.bg-indigo-600,
.bg-blue-600,
.bg-\[\#4e8baa\],
.tab-active,
.energy-gradient,
.theme-gradient,
.bg-gradient-theme,
.lucky-hero {
  background: var(--theme-primary) !important;
  background-color: var(--theme-primary) !important;
  color: var(--theme-button-text) !important;
}

.tab-active {
  color: var(--theme-button-text) !important;
}

.ethereal-gradient {
  background: linear-gradient(135deg, var(--theme-card) 0%, var(--theme-tag) 100%) !important;
  color: var(--theme-title) !important;
}

.text-gray-900,
.text-gray-800,
.text-gray-700,
.text-indigo-900,
.text-slate-900 {
  color: var(--theme-title) !important;
}

.text-gray-600,
.text-gray-500,
.text-gray-400,
.text-slate-500,
.text-slate-400 {
  color: var(--theme-subtitle) !important;
}

.text-indigo-700,
.text-indigo-600,
.text-indigo-500,
.text-indigo-400,
.text-blue-600,
.text-blue-500,
.text-fuchsia-600,
.text-rose-600,
.text-\[\#4e8baa\] {
  color: var(--theme-muted-accent) !important;
}

.text-yellow-400,
.text-amber-600,
.text-amber-500,
.text-green-600,
.text-emerald-600,
.text-emerald-500,
.text-\[\#C49A51\] {
  color: var(--theme-accent) !important;
}

.border-indigo-50,
.border-indigo-100,
.border-blue-100,
.border-rose-100,
.border-amber-100,
.border-emerald-100,
.border-gray-100,
.border-slate-100,
.border-white,
.border-white\/40,
.border-white\/60,
.border-white\/70,
.border-white\/80,
.border-\[\#E6DED3\] {
  border-color: var(--theme-divider) !important;
}

.divide-\[\#E6DED3\] > :not([hidden]) ~ :not([hidden]),
.border-b.border-\[\#E6DED3\],
.border-t.border-\[\#E6DED3\] {
  border-color: var(--theme-divider) !important;
}

.border-t-\[\#4e8baa\],
.focus\:border-\[\#4e8baa\]:focus {
  border-color: var(--theme-primary) !important;
}

.mist-shadow,
.mist-blue-shadow,
.card-shadow,
.shadow-stone-200,
.shadow-stone-300 {
  box-shadow: 0 8px 24px rgba(39, 48, 51, 0.08) !important;
}

.ring-\[\#E6DED3\] {
  --tw-ring-color: var(--theme-divider) !important;
}

.color-dot {
  background: var(--lucky-dot, var(--theme-accent)) !important;
}

.calendar-day-selected::before,
.calendar-day-indicator,
.h-full.bg-\[\#4e8baa\],
.chip input:checked + span {
  background: var(--theme-primary) !important;
  background-color: var(--theme-primary) !important;
}

.calendar-day-today::after,
.calendar-day-score {
  border-color: var(--theme-divider) !important;
}

.calendar-day-score,
.chip input:checked + span {
  color: var(--theme-button-text) !important;
}

.ripple,
.orbit,
.dot {
  border-color: var(--theme-primary) !important;
  background-color: var(--theme-primary) !important;
}

input,
select,
textarea,
.field {
  background-color: color-mix(in srgb, var(--theme-card) 72%, white) !important;
  border-color: var(--theme-divider) !important;
  color: var(--theme-title) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--theme-subtitle) !important;
}

.field:focus {
  border-color: var(--theme-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary) 18%, transparent) !important;
}

button[type="submit"],
.bg-red-50 {
  border-color: var(--theme-divider) !important;
}

.text-\[10px\] {
  font-size: 12.5px !important;
  line-height: 1.55 !important;
}

.text-\[11px\] {
  font-size: 13px !important;
  line-height: 1.58 !important;
}

.text-xs {
  font-size: 13.5px !important;
  line-height: 1.62 !important;
}

.text-sm {
  font-size: 15.5px !important;
  line-height: 1.68 !important;
}

.text-base {
  line-height: 1.72 !important;
}

.leading-5 {
  line-height: 1.75rem !important;
}

.leading-6 {
  line-height: 1.95rem !important;
}

.leading-relaxed {
  line-height: 1.9 !important;
}

.mist-shadow.rounded-2xl,
.mist-shadow.rounded-\[24px\],
.mist-shadow.rounded-\[28px\],
.mist-shadow.rounded-\[32px\],
.glass-card.rounded-2xl,
.glass-card.rounded-\[24px\],
.glass-card.rounded-\[28px\],
.glass-card.rounded-\[32px\] {
  padding-top: 1.15rem;
  padding-bottom: 1.15rem;
}

nav .text-\[10px\] {
  font-size: 11.5px !important;
}

nav.fixed.bottom-0 {
  z-index: 80 !important;
}

/* UI designer extraction: paper texture, card depth. Navigation is intentionally untouched. */
:root {
  --xg-bg: var(--theme-page);
  --xg-paper: var(--theme-page);
  --xg-paper-deep: var(--theme-tag);
  --xg-ink: #242b29;
  --xg-sub: #70675b;
  --xg-faint: #9b8f7d;
  --xg-jade: var(--theme-primary);
  --xg-jade-soft: var(--theme-primary);
  --xg-gold: #c49a51;
  --xg-red: #a65845;
  --xg-line: rgba(91, 74, 50, 0.16);
  --xg-line-strong: rgba(91, 74, 50, 0.28);
  --xg-shadow: 0 18px 52px rgba(75, 54, 26, 0.14);
  --xg-shadow-soft: 0 10px 30px rgba(75, 54, 26, 0.1);
  --xg-ease: cubic-bezier(0.22, 0.72, 0, 1);
}

* {
  box-sizing: border-box;
  letter-spacing: 0 !important;
}

html {
  min-height: 100%;
  background: var(--theme-page);
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--xg-ink);
  background: var(--theme-page) !important;
  font-family: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  touch-action: manipulation;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background-image: none;
  background-size: 24px 24px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 62%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background-image: none;
}

body > .min-h-screen {
  width: 100%;
  min-height: 100dvh;
  margin: 0;
  position: relative;
  z-index: 1;
  overflow-x: hidden;
  background: var(--theme-page) !important;
}

body > .min-h-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: none;
}

body > .min-h-screen > div,
header,
main {
  position: relative;
  z-index: 1;
}

header h1,
main h1,
main h2,
main h3,
.title-block h1 {
  color: var(--xg-ink) !important;
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif !important;
  font-weight: 700 !important;
  text-wrap: balance;
}

header h1 {
  font-size: 22px !important;
}

header p,
main p,
.text-gray-400,
.text-gray-500,
.text-gray-600,
.text-slate-400,
.text-slate-500,
.text-\[\#81796E\] {
  color: var(--xg-sub) !important;
}

.text-gray-700,
.text-gray-800,
.text-gray-900,
.text-indigo-900,
.text-slate-900 {
  color: var(--xg-ink) !important;
}

.text-\[\#4e8baa\],
.text-indigo-400,
.text-indigo-500,
.text-indigo-600,
.text-blue-500,
.text-blue-600,
.text-fuchsia-600,
.text-emerald-600 {
  color: var(--xg-jade) !important;
}

.text-yellow-400,
.text-amber-500,
.text-amber-600,
.text-green-500,
.text-green-600,
.text-emerald-500,
.text-\[\#C49A51\] {
  color: var(--xg-gold) !important;
}

.text-red-500,
.text-rose-600 {
  color: var(--xg-red) !important;
}

a,
button,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
  transition-property: transform, background-color, color, border-color, box-shadow, opacity;
  transition-duration: 420ms;
  transition-timing-function: var(--xg-ease);
}

a:active,
button:active {
  transform: scale(0.985);
}

a:focus,
button:focus,
[role="button"]:focus {
  outline: none;
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(78, 139, 170, 0.14) !important;
}

.bg-white,
.bg-white\/60,
.bg-white\/70,
.bg-white\/78,
.bg-white\/80,
.bg-white\/86,
.glass-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.96), rgba(255,255,255,0.82)) !important;
}

.glass-card,
.bg-white\/70,
.bg-white\/78,
.bg-white\/80 {
  backdrop-filter: blur(18px) saturate(1.08);
}

.bg-gray-50,
.bg-slate-50,
.bg-indigo-50,
.bg-blue-50,
.bg-rose-50,
.bg-amber-50,
.bg-emerald-50,
.bg-fuchsia-50,
.bg-stone-50,
.bg-\[\#FAF7F0\],
.bg-\[\#F2EFE8\] {
  background: linear-gradient(145deg, rgba(239,245,246,0.86), rgba(255,255,255,0.74)) !important;
}

.tab-active,
.energy-gradient,
.theme-gradient,
.bg-gradient-theme {
  background: linear-gradient(135deg, var(--xg-jade), var(--xg-jade-soft)) !important;
  color: #ffffff !important;
}

.ethereal-gradient,
main .ethereal-gradient {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.96), rgba(239,245,246,0.74)),
    radial-gradient(circle at 90% 10%, rgba(78, 139, 170,0.12), transparent 140px) !important;
  color: var(--xg-ink) !important;
}

.border-\[\#E6DED3\],
.border-gray-100,
.border-slate-100,
.border-indigo-50,
.border-indigo-100,
.border-white,
.border-white\/40,
.border-white\/60,
.border-white\/70,
.border-white\/80 {
  border-color: var(--xg-line) !important;
}

.mist-shadow,
.mist-blue-shadow,
.card-shadow,
.shadow-stone-200,
.shadow-stone-300 {
  box-shadow: var(--xg-shadow-soft) !important;
}

.rounded-2xl {
  border-radius: 18px !important;
}

.rounded-\[24px\],
.rounded-\[28px\],
.rounded-\[32px\] {
  border-radius: 28px !important;
}

main .rounded-2xl,
main .rounded-\[24px\],
main .rounded-\[28px\],
main .rounded-\[32px\],
main .glass-card,
main .ethereal-gradient {
  position: relative;
}

main .rounded-2xl.bg-white,
main .rounded-\[24px\].bg-white,
main .rounded-\[28px\].bg-white,
main .rounded-\[32px\].bg-white,
main .rounded-2xl.bg-white\/70,
main .rounded-\[24px\].bg-white\/70,
main .rounded-\[28px\].bg-white\/70,
main .rounded-\[32px\].bg-white\/70,
main .ethereal-gradient,
main .glass-card {
  border: 1px solid var(--xg-line) !important;
  box-shadow: var(--xg-shadow-soft) !important;
}

main .rounded-2xl.bg-white::before,
main .rounded-\[24px\].bg-white::before,
main .rounded-\[28px\].bg-white::before,
main .rounded-\[32px\].bg-white::before,
main .rounded-2xl.bg-white\/70::before,
main .rounded-\[24px\].bg-white\/70::before,
main .rounded-\[28px\].bg-white\/70::before,
main .rounded-\[32px\].bg-white\/70::before,
main .ethereal-gradient::before,
main .glass-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}

#dailyQuoteBg {
  border: 1px solid rgba(255,255,255,0.42) !important;
  border-radius: 28px !important;
  box-shadow: 0 24px 62px rgba(59, 43, 24, 0.22) !important;
}

#dailyQuoteBg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(28,34,30,0.05), rgba(28,34,30,0.2) 52%, rgba(28,34,30,0.42));
}

#dailyQuoteBg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 68% 18%, rgba(255,255,255,0.2), transparent 120px),
    linear-gradient(0deg, rgba(16,20,16,0.16), transparent 42%);
}

#dailyQuoteBg .relative.z-10 {
  text-shadow: 0 2px 14px rgba(0,0,0,0.24);
}

#dailyQuoteBg p {
  color: rgba(255,255,255,0.88) !important;
  font-family: "XiguoInk", "Noto Serif SC", "STKaiti", "KaiTi", "Songti SC", "SimSun", serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em;
}

#dailyQuote {
  color: #ffffff !important;
  font-size: 38px !important;
  line-height: 1.28 !important;
  font-family: "XiguoInk", "Noto Serif SC", "STKaiti", "KaiTi", "Songti SC", "SimSun", serif !important;
  font-weight: 400 !important;
  text-shadow: 0 3px 18px rgba(0,0,0,0.36), 0 1px 0 rgba(255,255,255,0.16);
}

#dailyQuote.quote-compact,
#dailyQuote.quote-tight {
  font-size: 34px !important;
  line-height: 1.24 !important;
}

.quote-font-warmup {
  position: fixed;
  left: -10000px;
  top: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  font-family: "XiguoInk", "Noto Serif SC", "STKaiti", "KaiTi", "Songti SC", "SimSun", serif;
  font-size: 38px;
  font-weight: 400;
}

#fortuneScore,
#todayEnergy,
#boundJewelryCount,
#fiveElementBias,
#selectedScore {
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif !important;
  color: var(--xg-jade) !important;
}

#fortuneScore {
  color: var(--xg-ink) !important;
  text-shadow: 0 10px 24px rgba(78, 139, 170,0.13);
}

.fortune-hero-card,
.weekly-trend-card {
  background:
    linear-gradient(135deg, rgba(78, 139, 170,0.14), rgba(255,255,255,0.94) 48%, rgba(78, 139, 170,0.10)) !important;
  border-color: var(--xg-line-strong) !important;
  box-shadow: var(--xg-shadow) !important;
}

.fortune-hero-card::before,
.weekly-trend-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.78);
}

.fortune-keywords-card,
.weekly-focus-card {
  align-items: flex-start !important;
  text-align: left !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.98), rgba(239,245,246,0.84)) !important;
  border-color: var(--xg-line) !important;
  box-shadow: var(--xg-shadow-soft) !important;
}

.fortune-keywords-card::before,
.weekly-focus-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}

.fortune-keywords-card .flex {
  width: 100%;
  justify-content: space-between;
  gap: 8px !important;
}

#keywordOne,
#keywordTwo,
#keywordThree {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--xg-ink) !important;
}

.fortune-keywords-card .bg-indigo-200 {
  background-color: rgba(196,154,81,0.42) !important;
}

.weekly-trend-card .text-4xl {
  color: var(--xg-ink) !important;
  text-shadow: 0 10px 24px rgba(78, 139, 170,0.12);
}

.weekly-trend-card .text-\[11px\].bg-white\/70 {
  background: rgba(255, 255, 255, 0.76) !important;
  border: 1px solid rgba(91, 74, 50, 0.12) !important;
  color: var(--xg-jade) !important;
}

.weekly-focus-card > .flex:first-child {
  width: 100%;
}

.weekly-focus-card .space-y-4 > .flex {
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px !important;
}

.weekly-focus-card .space-y-4 > .flex > div:last-child {
  min-width: 0;
  flex: 1;
}

#profileAvatar {
  box-shadow: 0 10px 26px rgba(75,54,26,0.16) !important;
}

section.space-y-4 > a {
  border: 1px solid var(--xg-line) !important;
  box-shadow: 0 12px 30px rgba(75, 54, 26, 0.08) !important;
}

section.space-y-4 > a > div:first-child {
  min-width: 0;
}

section.space-y-4 > a > div:first-child > div:last-child {
  min-width: 0;
}

section.space-y-4 > a .text-sm,
section.space-y-4 > a .text-xs {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rounded-2xl.bg-white,
.rounded-\[24px\].bg-white,
.rounded-\[28px\].bg-white,
.rounded-\[32px\].bg-white,
.rounded-2xl.bg-white\/70,
.rounded-\[24px\].bg-white\/70,
.rounded-\[28px\].bg-white\/70,
.rounded-\[32px\].bg-white\/70,
.rounded-2xl.bg-gray-50,
.rounded-\[24px\].bg-gray-50,
.rounded-\[28px\].bg-gray-50,
.rounded-\[32px\].bg-gray-50,
.rounded-2xl.bg-slate-50,
.rounded-\[24px\].bg-slate-50,
.rounded-\[28px\].bg-slate-50,
.rounded-\[32px\].bg-slate-50,
.rounded-2xl.bg-\[\#FAF7F0\],
.rounded-\[24px\].bg-\[\#FAF7F0\],
.rounded-\[28px\].bg-\[\#FAF7F0\],
.rounded-\[32px\].bg-\[\#FAF7F0\],
.rounded-2xl.bg-\[\#F2EFE8\],
.rounded-\[24px\].bg-\[\#F2EFE8\],
.rounded-\[28px\].bg-\[\#F2EFE8\],
.rounded-\[32px\].bg-\[\#F2EFE8\],
.rounded-2xl.bg-gradient-to-br,
.rounded-\[24px\].bg-gradient-to-br,
.rounded-\[28px\].bg-gradient-to-br,
.rounded-\[32px\].bg-gradient-to-br,
section.space-y-4 > a {
  position: relative;
  border: 1px solid var(--xg-line) !important;
  box-shadow: var(--xg-shadow-soft) !important;
}

.rounded-2xl.bg-white::before,
.rounded-\[24px\].bg-white::before,
.rounded-\[28px\].bg-white::before,
.rounded-\[32px\].bg-white::before,
.rounded-2xl.bg-white\/70::before,
.rounded-\[24px\].bg-white\/70::before,
.rounded-\[28px\].bg-white\/70::before,
.rounded-\[32px\].bg-white\/70::before,
.rounded-2xl.bg-gray-50::before,
.rounded-\[24px\].bg-gray-50::before,
.rounded-\[28px\].bg-gray-50::before,
.rounded-\[32px\].bg-gray-50::before,
.rounded-2xl.bg-slate-50::before,
.rounded-\[24px\].bg-slate-50::before,
.rounded-\[28px\].bg-slate-50::before,
.rounded-\[32px\].bg-slate-50::before,
.rounded-2xl.bg-\[\#FAF7F0\]::before,
.rounded-\[24px\].bg-\[\#FAF7F0\]::before,
.rounded-\[28px\].bg-\[\#FAF7F0\]::before,
.rounded-\[32px\].bg-\[\#FAF7F0\]::before,
.rounded-2xl.bg-\[\#F2EFE8\]::before,
.rounded-\[24px\].bg-\[\#F2EFE8\]::before,
.rounded-\[28px\].bg-\[\#F2EFE8\]::before,
.rounded-\[32px\].bg-\[\#F2EFE8\]::before,
.rounded-2xl.bg-gradient-to-br::before,
.rounded-\[24px\].bg-gradient-to-br::before,
.rounded-\[28px\].bg-gradient-to-br::before,
.rounded-\[32px\].bg-gradient-to-br::before,
section.space-y-4 > a::before {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}

main .rounded-2xl.bg-white,
main .rounded-\[24px\].bg-white,
main .rounded-\[28px\].bg-white,
main .rounded-\[32px\].bg-white,
main .rounded-2xl.bg-gray-50,
main .rounded-2xl.bg-slate-50,
main .rounded-2xl.bg-\[\#FAF7F0\],
main .rounded-2xl.bg-\[\#F2EFE8\],
main .rounded-\[24px\].bg-\[\#FAF7F0\],
main .rounded-\[28px\].bg-\[\#F2EFE8\],
section.space-y-4 > a {
  border: 1px solid var(--xg-line) !important;
  box-shadow: var(--xg-shadow-soft) !important;
}

main .rounded-2xl.bg-white::before,
main .rounded-\[24px\].bg-white::before,
main .rounded-\[28px\].bg-white::before,
main .rounded-\[32px\].bg-white::before,
main .rounded-2xl.bg-gray-50::before,
main .rounded-2xl.bg-slate-50::before,
main .rounded-2xl.bg-\[\#FAF7F0\]::before,
main .rounded-2xl.bg-\[\#F2EFE8\]::before,
main .rounded-\[24px\].bg-\[\#FAF7F0\]::before,
main .rounded-\[28px\].bg-\[\#F2EFE8\]::before,
section.space-y-4 > a::before {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}

input,
select,
textarea,
.field {
  background: rgba(255,255,255,0.95) !important;
}

.field:focus {
  border-color: rgba(78, 139, 170,0.55) !important;
  box-shadow: 0 0 0 4px rgba(78, 139, 170, 0.13) !important;
}

@media (min-width: 431px) {
  body {
    background: var(--theme-page) !important;
  }

  body > .min-h-screen {
    margin: 0;
    box-shadow: none;
  }
}

@media (min-width: 768px) {
  .px-5 {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  header.py-4 {
    padding-top: calc(24px + env(safe-area-inset-top)) !important;
  }

  #dailyQuoteBg {
    min-height: 42vh !important;
  }

  main .grid.grid-cols-2,
  main .grid.grid-cols-3 {
    gap: 18px !important;
  }
}

@media (max-width: 360px) {
  #dailyQuoteBg {
    min-height: 46vh !important;
    padding: 24px !important;
  }

  #dailyQuote {
    font-size: 28px !important;
  }
}