:root {
  --growin-premium-bg: #f7efe1;
  --growin-premium-bg-deep: #ebdcc0;
  --growin-premium-surface: rgba(255, 250, 241, 0.96);
  --growin-premium-surface-soft: rgba(248, 238, 217, 0.88);
  --growin-premium-border-base: rgba(154, 116, 40, 0.16);
  --growin-premium-border-strong-base: rgba(154, 116, 40, 0.24);
  --growin-premium-border: var(--growin-premium-border-base);
  --growin-premium-border-strong: var(--growin-premium-border-strong-base);
  --growin-premium-text: #241b11;
  --growin-premium-muted: #746449;
  --growin-premium-accent: #9a7428;
  --growin-premium-accent-strong: #0f6b52;
  --growin-premium-shadow-sm-base: 0 14px 30px rgba(77, 55, 21, 0.08), 0 3px 12px rgba(77, 55, 21, 0.05);
  --growin-premium-shadow-base: 0 26px 52px rgba(77, 55, 21, 0.12), 0 8px 18px rgba(77, 55, 21, 0.08);
  --growin-premium-shadow-sm: var(--growin-premium-shadow-sm-base);
  --growin-premium-shadow: var(--growin-premium-shadow-base);
  --growin-shell-ambient-edge-rgb: 154 116 40;
  --growin-shell-ambient-highlight-rgb: 228 203 136;
  --growin-shell-ambient-rim-rgb: 188 150 66;
  --growin-shell-ambient-global-bloom-rgb: 206 176 86;
  --growin-shell-ambient-border-alpha: 0;
  --growin-shell-ambient-rim-alpha: 0;
  --growin-shell-ambient-highlight-alpha: 0;
  --growin-shell-ambient-panel-glow-alpha: 0;
  --growin-shell-ambient-global-bloom-alpha: 0;
  --growin-shell-ambient-duration: 16000ms;
  --growin-shell-ambient-drift: 10px;
  --growin-shell-ambient-scale: 1.01;
  --growin-shell-ambient-visible: 0;

  --bg: var(--growin-premium-bg);
  --card: #fffaf1;
  --border: var(--growin-premium-border);
  --text: var(--growin-premium-text);
  --muted: var(--growin-premium-muted);
  --shadow: var(--growin-premium-shadow);
  --shadow-sm: var(--growin-premium-shadow-sm);
}

body {
  background:
    radial-gradient(circle at top left, rgba(202, 166, 75, 0.14), transparent 26%),
    radial-gradient(circle at top right, rgba(15, 107, 82, 0.10), transparent 24%),
    radial-gradient(circle at bottom center, rgba(202, 166, 75, 0.09), transparent 30%),
    linear-gradient(180deg, #f9f2e5 0%, #efe2c4 100%) !important;
  color: var(--growin-premium-text);
}

body[data-shell-ambient-visible="1"],
body[data-shell-ambient-phase="visible"] {
  --growin-shell-ambient-visible: 1;
}

body.growin-route-busy,
body:not(.app-boot-complete) {
  --growin-shell-ambient-visible: 0;
}

body::before,
body::after {
  display: none;
}

#auth-screen,
#app {
  background: transparent !important;
}

#app {
  position: relative;
  isolation: isolate;
}

#app::before,
#app::after {
  content: "";
  position: fixed;
  width: min(40vw, 420px);
  height: min(40vw, 420px);
  border-radius: 999px;
  pointer-events: none;
  filter: blur(52px) saturate(106%);
  opacity: calc(0.26 * var(--growin-shell-ambient-visible));
  z-index: 0;
  transition: opacity 0.48s ease, filter 0.48s ease;
}

#app::before {
  top: clamp(88px, 14vh, 142px);
  right: max(4vw, 18px);
  background:
    radial-gradient(circle at center,
      rgba(var(--growin-shell-ambient-global-bloom-rgb) / calc(var(--growin-shell-ambient-global-bloom-alpha) * 1.08)) 0%,
      rgba(var(--growin-shell-ambient-global-bloom-rgb) / calc(var(--growin-shell-ambient-global-bloom-alpha) * 0.54)) 44%,
      transparent 74%);
  animation: growinAmbientBloom var(--growin-shell-ambient-duration) ease-in-out infinite;
}

#app::after {
  left: max(3vw, 12px);
  bottom: calc(var(--nav-h) + var(--safe-bottom) + 48px);
  background:
    radial-gradient(circle at center,
      rgba(var(--growin-shell-ambient-global-bloom-rgb) / calc(var(--growin-shell-ambient-global-bloom-alpha) * 0.82)) 0%,
      rgba(var(--growin-shell-ambient-global-bloom-rgb) / calc(var(--growin-shell-ambient-global-bloom-alpha) * 0.42)) 42%,
      transparent 74%);
  animation: growinAmbientBloomReverse calc(var(--growin-shell-ambient-duration) * 1.08) ease-in-out infinite;
}

.main-content {
  max-width: 1160px;
  padding-top: 22px;
  z-index: 1;
}

.page-title {
  background: none !important;
  color: #2b2013 !important;
  letter-spacing: -0.04em;
  font-weight: 860;
}

.tab-subtitle,
.profile-note,
.analysis-empty,
.notes-empty,
.habit-manage-empty {
  color: #756347;
}

.auth-brand-hero,
.app-brand-hero {
  background:
    radial-gradient(circle at top right, rgba(202, 166, 75, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(255, 253, 248, 0.96) 0%, rgba(247, 239, 223, 0.92) 100%);
  border: 1px solid var(--growin-premium-border);
  box-shadow: var(--growin-premium-shadow-sm);
}

.brand-kicker,
.app-brand-kicker {
  color: var(--growin-premium-accent);
}

.brand-subtitle,
.app-brand-subtitle {
  color: #786749;
}

.auth-card,
.today-card,
.score-block,
.wish-banner,
.notes-entry,
.notes-recent-card,
.analysis-period-card,
.analysis-top-card,
.analysis-counts-card,
.analysis-insight-card,
.analysis-actions-card,
.analysis-score-card,
.chart-details-card,
.analysis-ai-card,
.habit-segment-card,
.add-habit-form,
.goal-card,
.chart-hero-card,
.chart-detail-metric,
.chart-detail-panel,
.modal-card,
.profile-hero-card,
#screen-profile .profile-section,
#screen-profile .profile-subcard,
#screen-profile .profile-engineer-card,
#screen-profile .profile-summary-toggle,
#screen-analysis .ctrl-segment,
#screen-chart .ctrl-segment,
#screen-notes .ctrl-segment {
  background:
    radial-gradient(circle at top right, rgba(202, 166, 75, 0.10), transparent 28%),
    linear-gradient(180deg, rgba(255, 253, 248, 0.97) 0%, rgba(248, 239, 221, 0.92) 100%) !important;
  border: 1px solid var(--growin-premium-border) !important;
  box-shadow: var(--growin-premium-shadow-sm) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.auth-brand-hero,
.app-brand-hero,
.auth-card,
.today-card,
.score-block,
.wish-banner,
.notes-entry,
.notes-recent-card,
.analysis-period-card,
.analysis-top-card,
.analysis-counts-card,
.analysis-insight-card,
.analysis-actions-card,
.analysis-score-card,
.chart-details-card,
.analysis-ai-card,
.habit-segment-card,
.add-habit-form,
.goal-card,
.chart-hero-card,
.chart-detail-metric,
.chart-detail-panel,
.modal-card,
.profile-hero-card,
#screen-profile .profile-section,
#screen-profile .profile-subcard,
#screen-profile .profile-engineer-card,
#screen-profile .profile-summary-toggle,
#screen-analysis .ctrl-segment,
#screen-chart .ctrl-segment,
#screen-notes .ctrl-segment,
.habit-item,
.goal-item {
  position: relative;
  isolation: isolate;
}

.auth-brand-hero::after,
.app-brand-hero::after,
.auth-card::after,
.today-card::after,
.score-block::after,
.wish-banner::after,
.notes-entry::after,
.notes-recent-card::after,
.analysis-period-card::after,
.analysis-top-card::after,
.analysis-counts-card::after,
.analysis-insight-card::after,
.analysis-actions-card::after,
.analysis-score-card::after,
.chart-details-card::after,
.analysis-ai-card::after,
.habit-segment-card::after,
.add-habit-form::after,
.goal-card::after,
.chart-hero-card::after,
.chart-detail-metric::after,
.chart-detail-panel::after,
.modal-card::after,
.profile-hero-card::after,
#screen-profile .profile-section::after,
#screen-profile .profile-subcard::after,
#screen-profile .profile-engineer-card::after,
#screen-profile .profile-summary-toggle::after,
#screen-analysis .ctrl-segment::after,
#screen-chart .ctrl-segment::after,
#screen-notes .ctrl-segment::after,
.habit-item::after,
.goal-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: calc(0.92 * var(--growin-shell-ambient-visible));
  border: 1px solid rgba(var(--growin-shell-ambient-edge-rgb) / calc(var(--growin-shell-ambient-border-alpha) * 0.92));
  background:
    linear-gradient(145deg,
      rgba(var(--growin-shell-ambient-highlight-rgb) / calc(var(--growin-shell-ambient-highlight-alpha) * 0.96)) 0%,
      rgba(var(--growin-shell-ambient-highlight-rgb) / calc(var(--growin-shell-ambient-highlight-alpha) * 0.26)) 24%,
      transparent 46%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.20) 0%,
      transparent 32%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 0 0 1px rgba(var(--growin-shell-ambient-rim-rgb) / calc(var(--growin-shell-ambient-rim-alpha) * 0.98)),
    0 6px 16px rgba(var(--growin-shell-ambient-rim-rgb) / calc(var(--growin-shell-ambient-panel-glow-alpha) * 0.42));
  transition:
    opacity 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    background 0.4s ease;
}

.habit-item::after,
.goal-item::after {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 0 0 1px rgba(var(--growin-shell-ambient-rim-rgb) / calc(var(--growin-shell-ambient-rim-alpha) * 0.72));
}

.auth-tabs,
.notes-tabs,
.type-toggle,
#screen-chart .chart-controls,
#screen-analysis .analysis-period-btns,
#screen-notes .notes-range-row {
  background: rgba(255, 251, 244, 0.82) !important;
  border: 1px solid rgba(154, 116, 40, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.auth-tab,
.notes-tab,
.chart-btn,
.analysis-period-btn,
.notes-range-btn,
.type-btn,
.btn,
.btn-outline,
.goal-add-btn,
.goal-edit-toggle,
.goal-save-btn,
.goal-icon-btn,
.icon-btn {
  border-radius: 15px;
}

.auth-tab,
.notes-tab,
.chart-btn,
.analysis-period-btn,
.notes-range-btn,
.type-btn {
  color: #6d5c3f;
  font-weight: 800;
}

.auth-tab.active,
.notes-tab.active,
.chart-btn.active,
.analysis-period-btn.active,
.notes-range-btn.active,
.type-btn.active,
.btn,
.goal-save-btn,
.nav-btn.active::before {
  background: linear-gradient(135deg, #24180d 0%, #6b4a18 58%, #a57c2c 100%) !important;
  color: #fffef9 !important;
  border-color: rgba(92, 67, 24, 0.22) !important;
  box-shadow: 0 12px 22px rgba(92, 67, 24, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.btn {
  color: #fffef9;
}

.btn-outline,
.goal-edit-toggle {
  background: rgba(255, 251, 244, 0.84);
  color: #281d10;
  border: 1px solid rgba(154, 116, 40, 0.18);
}

.btn-outline:hover,
.goal-edit-toggle:hover,
.auth-tab:hover,
.notes-tab:hover,
.chart-btn:hover,
.analysis-period-btn:hover,
.notes-range-btn:hover,
.type-btn:hover {
  border-color: rgba(154, 116, 40, 0.28) !important;
  background: rgba(255, 252, 247, 0.94) !important;
}

.form-group input,
.form-group textarea,
.form-group select,
.goal-add-input,
.goal-inline-input,
.habit-manage-weight,
.profile-big-textarea,
.diary-textarea,
.date-picker-row input[type=date],
.notes-date-row input[type=date] {
  background: rgba(255, 252, 247, 0.92);
  border-color: rgba(154, 116, 40, 0.14);
  color: #281d10;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
.goal-add-input:focus,
.goal-inline-input:focus,
.habit-manage-weight:focus,
.profile-big-textarea:focus,
.diary-textarea:focus,
.date-picker-row input[type=date]:focus,
.notes-date-row input[type=date]:focus {
  border-color: rgba(154, 116, 40, 0.34);
  box-shadow: 0 0 0 3px rgba(202, 166, 75, 0.18);
  background: rgba(255, 255, 251, 0.96);
}

.score-top-label,
.analysis-ai-title,
.chart-details-title,
.profile-section-kicker,
.profile-hero-kicker {
  color: var(--growin-premium-accent);
}

.score-number,
.profile-hero-name,
.profile-section-title,
.profile-subcard-title,
.page-title {
  color: #281d10;
}

.profile-hero-note,
.profile-section-note,
.profile-subcard-note,
.profile-engineer-summary-note {
  color: #786749;
}

.profile-hero-chip,
.profile-section-badge {
  background: rgba(255, 250, 241, 0.88);
  border-color: rgba(154, 116, 40, 0.16);
  color: #62492a;
}

#screen-profile #profile-engineer-section {
  background:
    radial-gradient(circle at top right, rgba(202, 166, 75, 0.14), transparent 30%),
    linear-gradient(180deg, rgba(255, 250, 238, 0.98) 0%, rgba(243, 233, 210, 0.94) 100%) !important;
  border-color: rgba(154, 116, 40, 0.22) !important;
}

#screen-profile .profile-summary-toggle summary {
  background: transparent;
}

nav {
  border-top-color: rgba(154, 116, 40, 0.16);
  z-index: 2;
}

body[data-shell-ambient-visible="1"] .nav-btn.active::before,
body[data-shell-ambient-phase="visible"] .nav-btn.active::before {
  border-color: rgba(var(--growin-shell-ambient-edge-rgb) / calc(var(--growin-shell-ambient-border-alpha) * 0.88)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(var(--growin-shell-ambient-rim-rgb) / calc(var(--growin-shell-ambient-rim-alpha) * 0.72)) !important;
}

@keyframes growinAmbientBloom {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(calc(var(--growin-shell-ambient-drift) * -0.28), calc(var(--growin-shell-ambient-drift) * -1), 0) scale(var(--growin-shell-ambient-scale));
  }
}

@keyframes growinAmbientBloomReverse {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(calc(var(--growin-shell-ambient-drift) * 0.32), var(--growin-shell-ambient-drift), 0) scale(var(--growin-shell-ambient-scale));
  }
}

@media (min-width: 901px) {
  nav {
    left: 14px;
    right: 14px;
    bottom: 12px;
    width: auto;
    max-width: 840px !important;
    margin: 0 auto;
    height: auto;
    padding: 10px 12px calc(10px + var(--safe-bottom));
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255, 248, 236, 0.96) 0%, rgba(245, 235, 212, 0.96) 100%) !important;
    box-shadow: 0 18px 34px rgba(56, 39, 10, 0.14), 0 4px 12px rgba(56, 39, 10, 0.08);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    justify-content: space-between;
    gap: 8px;
    overflow: visible;
  }

  .nav-btn {
    min-height: 58px;
    border-radius: 18px !important;
    color: #695d43 !important;
    font-weight: 750 !important;
    position: relative;
  }

  .nav-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%, rgba(255, 252, 245, 0.60) 100%);
    border: 1px solid rgba(202, 166, 75, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.70);
    z-index: -1;
    opacity: 0.96;
  }

  .nav-btn.active {
    color: #fffef9 !important;
  }

  .nav-btn.active .icon,
  .nav-btn.active span:not(.icon) {
    color: #fffef9 !important;
  }
}

@media (max-width: 640px) {
  .page-title {
    font-size: clamp(19px, 6vw, 24px);
  }

  .auth-card,
  .today-card,
  .score-block,
  .wish-banner,
  .notes-entry,
  .notes-recent-card,
  .analysis-period-card,
  .analysis-top-card,
  .analysis-counts-card,
  .analysis-insight-card,
  .analysis-actions-card,
  .analysis-score-card,
  .chart-details-card,
  .analysis-ai-card,
  .habit-segment-card,
  .add-habit-form,
  .goal-card,
  .chart-hero-card,
  .chart-detail-metric,
  .chart-detail-panel,
  .modal-card,
  .profile-hero-card,
  #screen-profile .profile-section,
  #screen-profile .profile-subcard,
  #screen-profile .profile-engineer-card,
  #screen-profile .profile-summary-toggle,
  #screen-analysis .ctrl-segment,
  #screen-chart .ctrl-segment,
  #screen-notes .ctrl-segment {
    box-shadow: 0 12px 24px rgba(77, 55, 21, 0.08), 0 2px 10px rgba(77, 55, 21, 0.04) !important;
  }
}