:root {
  --jet-bg-0: #06080f;
  --jet-bg-1: #0a1020;
  --jet-bg-2: #0f1730;
  --jet-surface: rgba(17, 25, 45, 0.74);
  --jet-surface-strong: rgba(24, 34, 58, 0.92);
  --jet-card: rgba(15, 24, 44, 0.88);
  --jet-border: rgba(138, 158, 194, 0.24);
  --jet-border-strong: rgba(153, 174, 214, 0.34);
  --jet-text: #edf3ff;
  --jet-text-soft: #becae0;
  --jet-text-muted: #8f9db8;
  --jet-primary: #f59f0b;
  --jet-primary-strong: #e68307;
  --jet-primary-soft: rgba(245, 159, 11, 0.14);
  --jet-success: #32d29a;
  --jet-danger: #ff6f7a;
  --jet-radius-sm: 10px;
  --jet-radius-md: 12px;
  --jet-radius-lg: 16px;
  --jet-shadow-sm: 0 10px 28px rgba(3, 8, 18, 0.36);
  --jet-shadow-md: 0 18px 46px rgba(2, 6, 16, 0.5);
  --jet-motion: 150ms ease-in-out;
}

@keyframes jeton-fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes jeton-float-y {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -5px, 0);
  }
}

@keyframes jeton-light-sweep {
  from {
    transform: translateX(-120%);
    opacity: 0;
  }
  35% {
    opacity: 0.4;
  }
  70% {
    opacity: 0.18;
  }
  to {
    transform: translateX(120%);
    opacity: 0;
  }
}

*,
*::before,
*::after {
  font-family: Inter, "Segoe UI", Roboto, system-ui, -apple-system, sans-serif !important;
}

html,
body {
  color: var(--jet-text) !important;
  background:
    radial-gradient(circle at 14% 8%, rgba(67, 93, 151, 0.28), transparent 32%),
    radial-gradient(circle at 86% 10%, rgba(245, 159, 11, 0.14), transparent 34%),
    radial-gradient(circle at 50% 120%, rgba(67, 93, 151, 0.22), transparent 36%),
    linear-gradient(180deg, var(--jet-bg-1), var(--jet-bg-0) 42%, #05070d 100%) !important;
}

body::before {
  opacity: 0.3 !important;
}

body::after {
  background: radial-gradient(circle at center, transparent 24%, rgba(2, 4, 10, 0.54) 100%) !important;
}

h1,
h2,
h3 {
  color: var(--jet-text) !important;
  letter-spacing: -0.02em !important;
}

h1 {
  font-size: clamp(2.35rem, 5.1vw, 3.7rem) !important;
  line-height: 1.06 !important;
  font-weight: 800 !important;
}

h2 {
  font-size: clamp(1.28rem, 2.25vw, 1.78rem) !important;
  font-weight: 760 !important;
}

h3 {
  font-size: clamp(1rem, 1.7vw, 1.2rem) !important;
  font-weight: 700 !important;
}

.hero,
.panel,
.value-card,
.other-value-link,
.chore-profile-card,
.milestone-group,
.milestone-item,
.suggestion-item,
.approval-item,
.chore-item,
.chore-chart-item,
.profile-item,
.value-scripture {
  border: 1px solid var(--jet-border) !important;
  background: linear-gradient(155deg, rgba(20, 31, 53, 0.9), rgba(11, 18, 34, 0.9) 78%) !important;
  box-shadow: var(--jet-shadow-sm) !important;
  border-radius: var(--jet-radius-md) !important;
}

.hero {
  border-color: var(--jet-border-strong) !important;
  border-radius: var(--jet-radius-lg) !important;
  background:
    radial-gradient(circle at 84% 30%, rgba(245, 159, 11, 0.2), transparent 20%),
    linear-gradient(150deg, rgba(24, 36, 61, 0.88), rgba(11, 19, 36, 0.9) 75%) !important;
  backdrop-filter: blur(16px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(130%) !important;
  box-shadow: var(--jet-shadow-md) !important;
  padding: 1.65rem 1.5rem !important;
  transform: translate3d(var(--jeton-mx, 0px), var(--jeton-my, 0px), 0);
  transition: transform 280ms ease-out;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg, transparent 28%, rgba(255, 214, 144, 0.14) 48%, transparent 68%);
  animation: jeton-light-sweep 6.4s ease-in-out infinite;
}

.hero__content {
  max-width: 820px !important;
}

.layout,
.detail-layout,
.chore-chart-layout {
  gap: 1rem !important;
}

.panel {
  padding: 1.45rem !important;
  transform-style: preserve-3d;
}

.value-card__link {
  padding: 1.02rem 1.04rem !important;
  gap: 0.55rem !important;
}

.value-card__summary.is-hidden {
  display: none !important;
}

.value-card__link.value-card__link--compact {
  grid-template-columns: 38px minmax(0, 1fr) !important;
  grid-template-areas: "badge name" !important;
  align-items: center !important;
}

body.view-mode-mobile .value-card__link.value-card__link--compact {
  grid-template-columns: 38px minmax(0, 1fr) !important;
  grid-template-areas: "badge name" !important;
}

.panel-meta,
.eyebrow,
.hero__filter-hint {
  color: var(--jet-text-muted) !important;
  font-size: 0.78rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  opacity: 0.9 !important;
}

.hint,
.intro,
.spotlight-message,
.memory-value,
.memory-practice,
.scenario-text,
.value-card__summary,
.value-focus-meaning,
.value-detail-group p,
.value-detail-group li,
.age-example-text,
.approval-meta,
.reflection-list li {
  color: var(--jet-text-soft) !important;
}

.spotlight-value,
.memory-ref,
.value-card__name,
.value-focus-header h2,
.chore-name,
.chore-chart-name,
.approval-title,
.milestone-group h3,
.chore-profile-header h3 {
  color: var(--jet-text) !important;
}

.hero__view,
.hero__filter,
.hero__layout-controls {
  border: 1px solid var(--jet-border) !important;
  background: rgba(11, 18, 32, 0.74) !important;
  box-shadow: 0 8px 24px rgba(3, 8, 18, 0.4) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.hero__layout-controls {
  margin-top: 1rem !important;
  padding: 0.5rem !important;
  border-radius: 12px !important;
}

.hero__layout-status {
  color: var(--jet-text-muted) !important;
}

.btn,
.btn--small,
.btn--alt,
.btn--danger,
.chore-complete,
.chore-remove,
.chore-chart-remove,
.hero__view-btn {
  border-radius: var(--jet-radius-sm) !important;
  font-weight: 700 !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  transition:
    transform var(--jet-motion),
    background-color var(--jet-motion),
    border-color var(--jet-motion),
    color var(--jet-motion),
    box-shadow var(--jet-motion) !important;
}

.btn,
.btn--small {
  background: linear-gradient(135deg, var(--jet-primary), var(--jet-primary-strong)) !important;
  border-color: #cf7306 !important;
  color: #161008 !important;
}

.btn:hover,
.btn:focus-visible,
.btn--small:hover,
.btn--small:focus-visible {
  background: linear-gradient(135deg, #ffb33a, var(--jet-primary)) !important;
  box-shadow: 0 0 0 2px rgba(245, 159, 11, 0.2) !important;
}

.btn--alt,
.hero__view-btn,
.chore-complete,
.profile-pill {
  background: rgba(20, 30, 50, 0.9) !important;
  border-color: var(--jet-border-strong) !important;
  color: var(--jet-text) !important;
}

.btn--alt:hover,
.btn--alt:focus-visible,
.hero__view-btn:hover,
.hero__view-btn:focus-visible,
.chore-complete:hover,
.chore-complete:focus-visible {
  border-color: var(--jet-primary) !important;
  color: #ffe0b1 !important;
  background: rgba(31, 43, 67, 0.95) !important;
}

.hero__view-btn.is-active {
  background: linear-gradient(135deg, var(--jet-primary), var(--jet-primary-strong)) !important;
  border-color: #cf7306 !important;
  color: #161008 !important;
}

.btn--danger,
.chore-remove,
.chore-chart-remove {
  background: rgba(70, 23, 34, 0.6) !important;
  border-color: rgba(255, 111, 122, 0.5) !important;
  color: #ffd5da !important;
}

.btn--danger:hover,
.btn--danger:focus-visible,
.chore-remove:hover,
.chore-remove:focus-visible,
.chore-chart-remove:hover,
.chore-chart-remove:focus-visible {
  background: rgba(95, 30, 42, 0.72) !important;
  border-color: rgba(255, 111, 122, 0.72) !important;
}

.panel-link,
.memory-value-link,
.chore-value,
.chore-chart-value,
.other-value-link {
  color: #ffd295 !important;
}

input[type="text"],
select {
  appearance: none !important;
  -webkit-appearance: none !important;
  border-radius: var(--jet-radius-sm) !important;
  border: 1px solid var(--jet-border) !important;
  background: rgba(8, 14, 26, 0.88) !important;
  color: var(--jet-text) !important;
  min-height: 44px !important;
  padding: 0.68rem 0.82rem !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  transition: border-color var(--jet-motion), box-shadow var(--jet-motion), background-color var(--jet-motion) !important;
}

input[type="text"]::placeholder {
  color: #7e8aa3 !important;
}

select {
  padding-right: 2.2rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%2397a6c3' d='M3.3 5.1a.8.8 0 0 1 1.13 0L7 7.68 9.57 5.1a.8.8 0 1 1 1.13 1.13l-3.14 3.14a.8.8 0 0 1-1.13 0L3.3 6.23a.8.8 0 0 1 0-1.13Z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% - 12px) 50% !important;
  background-size: 14px 14px !important;
}

select::-ms-expand {
  display: none;
}

input[type="text"]:focus-visible,
select:focus-visible {
  border-color: rgba(245, 159, 11, 0.72) !important;
  box-shadow: 0 0 0 3px rgba(245, 159, 11, 0.2) !important;
  outline: none !important;
}

.read-aloud-target {
  position: relative !important;
}

.read-aloud-target > h1,
.read-aloud-target > h2,
.read-aloud-target > h3 {
  padding-right: 2.5rem !important;
}

.read-aloud-btn {
  position: absolute !important;
  top: 0.82rem !important;
  right: 0.82rem !important;
  z-index: 16 !important;
  width: 1.95rem !important;
  height: 1.95rem !important;
  min-height: 1.95rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 1px solid var(--jet-border) !important;
  background: rgba(9, 15, 28, 0.85) !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  box-shadow: 0 4px 12px rgba(2, 6, 16, 0.35) !important;
  opacity: 0.95;
}

.read-aloud-btn::before {
  content: "\1F50A";
  color: var(--jet-text-muted);
  font-size: 0.82rem;
  line-height: 1;
}

.read-aloud-btn.is-speaking {
  border-color: rgba(245, 159, 11, 0.72) !important;
  background: rgba(245, 159, 11, 0.15) !important;
}

.read-aloud-btn.is-speaking::before {
  content: "\23F9";
  color: #ffd295;
  font-size: 0.68rem;
}

@media (hover: hover) {
  .read-aloud-btn {
    opacity: 0;
    transform: translateY(-2px) scale(0.95);
  }

  .read-aloud-target:hover > .read-aloud-btn,
  .read-aloud-target:focus-within > .read-aloud-btn,
  .read-aloud-btn.is-speaking {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

body.layout-editing .read-aloud-btn {
  display: none !important;
}

body.layout-editing .layout > .panel {
  outline-color: rgba(245, 159, 11, 0.34) !important;
}

.panel-layout-drag,
.panel-layout-size,
.panel-layout-resize {
  border-color: var(--jet-border) !important;
  background: rgba(10, 17, 32, 0.9) !important;
  color: var(--jet-text-soft) !important;
}

.panel-layout-size {
  color: var(--jet-text-muted) !important;
}

.value-card,
.other-value-link {
  transition:
    transform var(--jet-motion),
    border-color var(--jet-motion),
    background-color var(--jet-motion),
    box-shadow var(--jet-motion) !important;
  transform:
    perspective(900px)
    rotateX(var(--jeton-tilt-y, 0deg))
    rotateY(var(--jeton-tilt-x, 0deg));
}

.value-card:hover,
.value-card:focus-within,
.other-value-link:hover,
.other-value-link:focus-visible {
  border-color: rgba(245, 159, 11, 0.62) !important;
  background: linear-gradient(155deg, rgba(26, 39, 66, 0.94), rgba(13, 22, 41, 0.94) 78%) !important;
  box-shadow:
    0 16px 30px rgba(3, 8, 18, 0.48),
    0 0 0 1px rgba(245, 159, 11, 0.26),
    0 0 24px rgba(245, 159, 11, 0.16) !important;
}

.jeton-reveal {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
}

.jeton-reveal.is-inview {
  animation: jeton-fade-up 560ms cubic-bezier(0.22, 0.78, 0.24, 1) both;
  animation-delay: calc(var(--jeton-order, 0) * 28ms);
}

.jeton-float {
  animation: jeton-float-y 5.4s ease-in-out infinite;
  animation-delay: var(--jeton-float-delay, 0s);
}

.jeton-motion-ready .hero__sparkles span:nth-child(1) {
  transform: translate3d(calc(var(--jeton-mx, 0px) * 0.55), calc(var(--jeton-my, 0px) * 0.4), 0);
}

.jeton-motion-ready .hero__sparkles span:nth-child(2) {
  transform: translate3d(calc(var(--jeton-mx, 0px) * -0.5), calc(var(--jeton-my, 0px) * -0.35), 0);
}

.jeton-motion-ready .hero__sparkles span:nth-child(3) {
  transform: translate3d(calc(var(--jeton-mx, 0px) * 0.4), calc(var(--jeton-my, 0px) * -0.55), 0);
}

body.layout-editing .jeton-float {
  animation: none !important;
}

body.layout-editing .layout > .panel {
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero,
  .value-card,
  .other-value-link,
  .jeton-reveal,
  .jeton-float {
    animation: none !important;
    transform: none !important;
    transition: none !important;
    opacity: 1 !important;
  }

  .hero::after {
    animation: none !important;
  }
}

@media (max-width: 900px) {
  .hero {
    padding: 1.22rem 1rem !important;
  }

  .panel {
    padding: 1.06rem !important;
  }

  .hero__layout-controls {
    padding: 0.42rem !important;
    gap: 0.42rem !important;
  }

  .read-aloud-btn {
    opacity: 1 !important;
    transform: none !important;
  }
}