:root {
  color-scheme: light;
  --bg: #f7f4ec;
  --panel: #fffdf7;
  --panel-glass: rgba(255, 253, 247, 0.76);
  --section-glass: rgba(255, 253, 247, 0.72);
  --soft-glass: rgba(255, 253, 247, 0.68);
  --empty-glass: rgba(255, 253, 247, 0.56);
  --input-bg: #fff;
  --tile-icon-bg: #e5efe8;
  --ink: #1d2520;
  --muted: #647067;
  --line: #d9d2c0;
  --green: #2f6b4f;
  --green-dark: #244f3c;
  --blue: #275c7b;
  --red: #a83f35;
  --gold: #d6a928;
  --gold-ink: #76570a;
  --gold-soft: rgba(214, 169, 40, 0.1);
  --gold-border: rgba(214, 169, 40, 0.45);
  --gold-track: rgba(214, 169, 40, 0.18);
  --bg-wash-green: rgba(47, 107, 79, 0.12);
  --bg-wash-blue: rgba(39, 92, 123, 0.10);
  --shadow: 0 18px 45px rgba(45, 41, 30, 0.12);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111816;
  --panel: #1b2521;
  --panel-glass: rgba(27, 37, 33, 0.82);
  --section-glass: rgba(27, 37, 33, 0.78);
  --soft-glass: rgba(27, 37, 33, 0.70);
  --empty-glass: rgba(27, 37, 33, 0.58);
  --input-bg: #101715;
  --tile-icon-bg: #223b31;
  --ink: #edf5ef;
  --muted: #a8b7ad;
  --line: #3a4a43;
  --green: #75c797;
  --green-dark: #4fa875;
  --blue: #7bb8d6;
  --red: #f08c7f;
  --gold: #e1bb4d;
  --gold-ink: #f2d978;
  --gold-soft: rgba(225, 187, 77, 0.13);
  --gold-border: rgba(225, 187, 77, 0.5);
  --gold-track: rgba(225, 187, 77, 0.2);
  --bg-wash-green: rgba(117, 199, 151, 0.12);
  --bg-wash-blue: rgba(123, 184, 214, 0.10);
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    linear-gradient(140deg, var(--bg-wash-green), transparent 42%),
    linear-gradient(320deg, var(--bg-wash-blue), transparent 36%),
    var(--bg);
  color: var(--ink);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blue) 72%, transparent);
  outline-offset: 3px;
}

svg {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.25;
}

.app-shell {
  width: min(100%, 720px);
  min-height: 100vh;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(22px, env(safe-area-inset-bottom));
}

.login-shell {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 18px;
  width: min(100%, 440px);
  min-height: 100vh;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(22px, env(safe-area-inset-bottom));
}

.login-shell .theme-button {
  justify-self: end;
}

.login-card {
  align-self: center;
  display: grid;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--section-glass);
  box-shadow: var(--shadow);
}

.login-intro {
  margin: 0 0 4px;
  color: var(--muted);
  line-height: 1.45;
}

.google-login {
  display: grid;
  gap: 7px;
  justify-items: center;
  min-height: 52px;
}

.google-auth-button {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 22px;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid #747775;
  border-radius: 8px;
  background: #ffffff;
  color: #1f1f1f;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.google-auth-button span {
  grid-column: 2;
}

.google-auth-mark {
  grid-column: 1;
  display: block;
  width: 20px;
  height: 20px;
  justify-self: center;
  overflow: visible;
}

.google-auth-button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.login-biometric {
  display: grid;
  gap: 10px;
}

.login-biometric[hidden],
.private-pin-form[hidden],
.private-pin-card[hidden],
.private-tap-zone[hidden] {
  display: none;
}

.login-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.login-divider::before,
.login-divider::after {
  height: 1px;
  background: var(--line);
  content: "";
}

.face-id-button {
  min-height: 48px;
  border: 1px solid var(--green);
  border-radius: 8px;
  background: transparent;
  color: var(--green);
  font-weight: 800;
  cursor: pointer;
}

.face-id-button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.login-help {
  color: var(--muted);
  line-height: 1.4;
}

.sleep-checkin {
  position: fixed;
  z-index: 120;
  right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 16px;
  display: grid;
  place-items: end center;
  pointer-events: none;
}

.sleep-checkin[hidden] {
  display: none;
}

.sleep-checkin-panel {
  display: grid;
  gap: 10px;
  width: min(100%, 430px);
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--blue) 55%, var(--line));
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
  pointer-events: auto;
}

.sleep-checkin-eyebrow {
  color: var(--blue);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.sleep-checkin-panel > strong {
  font-size: 1.18rem;
}

.sleep-checkin-panel > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

.sleep-checkin-panel label {
  display: grid;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 900;
}

.sleep-checkin-panel input {
  width: 100%;
  height: 46px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
}

.sleep-checkin-panel .sleep-checkin-error {
  color: var(--red);
  font-weight: 800;
}

.sleep-checkin-error:empty {
  display: none;
}

.sleep-checkin-actions {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 8px;
}

.sleep-checkin-actions button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft-glass);
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
}

.sleep-checkin-actions button[type="submit"] {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

.account-strip {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--section-glass);
}

.account-strip span {
  display: grid;
  min-width: 0;
}

.account-strip small {
  color: var(--muted);
  font-weight: 700;
}

.account-strip strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-strip button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
}

.topbar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 22px;
}

.topbar-title {
  min-width: 0;
}

.topbar-actions {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: end;
  min-width: 0;
}

.topbar-user,
.topbar-wallet {
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
  height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-glass);
  color: var(--ink);
  font-weight: 850;
  cursor: pointer;
}

.topbar-user span {
  display: block;
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-wallet {
  color: var(--gold-ink);
}

.topbar-wallet strong {
  min-width: 1ch;
  font-variant-numeric: tabular-nums;
}

.topbar-credit-coin {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid #b88613;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff3a7 0 10%, #efc84b 38%, #c88e16 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 245, 163, 0.52);
  color: #705006;
}

.topbar-credit-coin b {
  color: rgba(91, 63, 4, 0.68);
  font-size: 0.38rem;
  font-weight: 900;
  line-height: 1;
}

.topbar-user:hover,
.topbar-wallet:hover {
  border-color: color-mix(in srgb, var(--green) 38%, var(--line));
}

.topbar h1,
.login-card h1,
.welcome h2,
.empty-state h2 {
  margin: 0;
  letter-spacing: 0;
}

.topbar h1 {
  font-size: 1.85rem;
  line-height: 1.05;
}

.login-card h1 {
  font-size: 2.1rem;
  line-height: 1;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--green);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.icon-button,
.check-button,
.delete-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-glass);
  color: var(--ink);
  cursor: pointer;
}

.icon-button:hover,
.check-button:hover,
.delete-button:hover {
  border-color: color-mix(in srgb, var(--green) 34%, var(--line));
}

.theme-button {
  justify-self: end;
}

@media (max-width: 600px) {
  .topbar {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .topbar-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 44px;
  }

  .topbar-user {
    justify-content: start;
  }

  .topbar-user span {
    max-width: 100%;
  }
}

.content {
  display: grid;
  gap: 16px;
}

.welcome {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--section-glass);
  box-shadow: var(--shadow);
}

.welcome h2 {
  max-width: 12ch;
  font-size: 2.55rem;
  line-height: 0.96;
}

.welcome p:last-child {
  max-width: 34rem;
  margin: 16px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.welcome-brand {
  display: grid;
  place-items: center;
  min-height: 150px;
  padding: 24px;
}

.home-logo {
  display: grid;
  place-items: center;
  min-width: 168px;
  padding: 14px 22px;
  border: 2px solid currentColor;
  border-radius: 8px;
  color: var(--ink);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.home-logo span {
  font-size: 1.75rem;
  letter-spacing: 0.14em;
}

.feature-grid {
  display: grid;
  gap: 12px;
}

.home-functions-empty {
  display: grid;
  gap: 4px;
  padding: 24px 16px;
  border: 1px dashed var(--line);
  border-radius: 7px;
  color: var(--muted);
  text-align: center;
}

.home-functions-empty strong {
  color: var(--ink);
}

.home-function-filter {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(72px, 1fr));
  gap: 3px;
  width: min(100%, 300px);
  margin-bottom: 12px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--input-bg);
}

.home-function-filter button {
  min-height: 36px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-weight: 850;
  cursor: pointer;
}

.home-function-filter button[aria-pressed="true"] {
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(18, 28, 24, 0.16);
}

.feature-tile {
  --feature-accent: var(--green);
  --feature-icon-ink: #fff;
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  align-items: center;
  min-height: 86px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--home-icon-color, var(--feature-accent)) 48%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--home-icon-color, var(--feature-accent)) 15%, var(--panel));
  color: var(--ink);
  text-align: left;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.engine-empty-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, #d7a82d 58%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, #d7a82d 12%, var(--panel));
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.engine-empty-banner[hidden] {
  display: none;
}

.engine-empty-banner > span:last-child {
  display: grid;
  gap: 2px;
}

.engine-empty-banner small {
  color: var(--muted);
}

.engine-power-symbol,
.engine-energy-token,
.tile-energy-warning {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 3px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: #c99414;
}

.engine-power-symbol i,
.engine-energy-token i,
.tile-energy-warning i {
  position: absolute;
  top: -5px;
  width: 4px;
  height: 19px;
  border-radius: 2px;
  background: currentColor;
}

.tile-energy-warning {
  position: absolute;
  z-index: 2;
  top: 7px;
  right: 7px;
  display: none;
  width: 24px;
  height: 24px;
  border-width: 2px;
  color: #d1a126;
}

.tile-energy-warning i {
  top: -4px;
  width: 3px;
  height: 12px;
}

.home-view.is-engine-empty .feature-tile:not(.is-always-available) {
  border-color: color-mix(in srgb, #6c716e 65%, var(--line));
  background: color-mix(in srgb, #6c716e 12%, var(--panel));
  box-shadow: inset 0 3px 9px rgba(20, 25, 22, 0.16);
  filter: grayscale(0.82) saturate(0.45);
}

.home-view.is-engine-empty .feature-tile:not(.is-always-available) .tile-icon {
  opacity: 0.58;
}

.home-view.is-engine-empty .feature-tile:not(.is-always-available) .tile-energy-warning {
  display: inline-grid;
  animation: engine-power-pulse 1.35s ease-in-out infinite;
}

@keyframes engine-power-pulse {
  0%, 100% { opacity: 0.35; filter: brightness(0.8); }
  50% { opacity: 1; filter: brightness(1.3); }
}

.community-view,
.settings-view,
.community-main,
.community-section,
.public-profile-view,
.profile-achievements,
.settings-achievements {
  display: grid;
  gap: 14px;
}

.friend-search {
  display: grid;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.friend-search label {
  font-size: 0.88rem;
  font-weight: 800;
}

.friend-search input {
  min-width: 0;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
}

.friend-search button,
.friend-action,
.profile-back {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--green);
  border-radius: 8px;
  background: var(--green);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.community-section-heading {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.community-section-heading h2,
.profile-achievements h3 {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: 0;
}

.community-section-heading button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  cursor: pointer;
}

.friend-list {
  display: grid;
  gap: 8px;
}

.friend-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  width: 100%;
  min-height: 66px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-glass);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.friend-row:hover {
  border-color: color-mix(in srgb, var(--green) 55%, var(--line));
}

.friend-row > span:nth-child(2) {
  display: grid;
  min-width: 0;
}

.friend-row strong,
.friend-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-row small,
.friend-row-state {
  color: var(--muted);
}

.friend-row-state {
  font-size: 0.78rem;
  font-weight: 800;
}

.profile-avatar {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 2px solid color-mix(in srgb, var(--green) 52%, var(--line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--green) 14%, var(--panel));
  color: var(--green);
  font-size: 1rem;
  font-weight: 900;
}

.profile-avatar.is-small {
  width: 44px;
  height: 44px;
  font-size: 0.8rem;
}

.profile-avatar.is-large {
  width: 96px;
  height: 96px;
  font-size: 1.55rem;
}

.profile-identity {
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 12px 0 20px;
  text-align: center;
  border-bottom: 1px solid var(--line);
}

.profile-identity h2 {
  margin: 0;
  font-size: 1.65rem;
  letter-spacing: 0;
}

.profile-identity .eyebrow {
  margin: 2px 0 -3px;
  text-transform: none;
}

.friend-action {
  min-width: 150px;
  margin-top: 5px;
}

.friend-action.is-remove {
  border-color: var(--red);
  background: transparent;
  color: var(--red);
}

.profile-back {
  justify-self: start;
  min-height: 40px;
  border-color: var(--line);
  background: transparent;
  color: var(--ink);
}

.settings-tabs {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft-glass);
}

.settings-tabs button {
  min-height: 42px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  cursor: pointer;
}

.settings-tabs button[aria-selected="true"] {
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(45, 41, 30, 0.1);
}

.settings-panel {
  min-height: 260px;
}

.settings-icon-colors {
  display: grid;
  gap: 16px;
}

.settings-icon-colors > header {
  display: flex;
  gap: 12px;
  align-items: start;
  justify-content: space-between;
}

.settings-icon-colors h3,
.settings-icon-colors p {
  margin: 0;
}

.settings-home-section-tabs {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(100px, 1fr));
  gap: 3px;
  width: min(100%, 260px);
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--input-bg);
}

.settings-home-section-tabs button {
  min-height: 36px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--muted);
  font-weight: 850;
  cursor: pointer;
}

.settings-home-section-tabs button[aria-pressed="true"] {
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(18, 28, 24, 0.16);
}

.settings-icon-colors p {
  margin-top: 4px;
  color: var(--muted);
}

.settings-color-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.settings-color-actions button {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.settings-color-actions .settings-color-save {
  min-width: 78px;
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

.settings-color-actions .settings-color-save:disabled {
  border-color: var(--line);
  background: color-mix(in srgb, var(--muted) 18%, var(--panel));
  color: var(--muted);
  cursor: default;
}

.settings-color-status {
  min-height: 20px;
  margin: 0;
  color: var(--green);
  font-size: 0.82rem;
  font-weight: 800;
}

.settings-color-status[data-state="unsaved"] {
  color: var(--red);
}

.settings-color-editor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.settings-color-editor label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
}

.settings-color-editor .settings-function-visibility {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--input-bg);
  color: var(--ink);
}

.settings-function-visibility input {
  width: 18px;
  height: 18px;
  accent-color: var(--green);
}

.settings-color-editor select {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 36px 0 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--input-bg);
  color: var(--ink);
  font: inherit;
}

.settings-color-choice {
  position: relative;
  display: block;
}

.settings-color-choice i {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 11px;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transform: translateY(-50%);
  pointer-events: none;
}

.settings-color-choice select {
  padding-left: 39px;
}

.settings-color-preview {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--preview-color) 42%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--preview-color) 10%, var(--panel));
}

.settings-color-preview > span {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--preview-color);
}

.settings-color-preview p,
.settings-color-preview strong,
.settings-color-preview small {
  display: block;
  margin: 0;
}

.settings-color-preview small {
  margin-top: 3px;
  color: var(--muted);
}

@media (max-width: 520px) {
  .settings-icon-colors > header {
    display: grid;
    align-items: start;
  }

  .settings-color-actions {
    justify-self: start;
  }

  .settings-color-editor {
    grid-template-columns: 1fr;
  }
}

.settings-account {
  display: grid;
  gap: 16px;
  justify-items: start;
  padding-top: 8px;
}

.settings-account > span {
  display: grid;
  gap: 3px;
}

.settings-account small {
  color: var(--muted);
  font-weight: 700;
}

.settings-credits {
  display: grid;
  gap: 18px;
  padding-top: 8px;
}

.credit-balance-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.credit-balance-heading h3,
.credit-balance-heading p {
  margin: 0;
}

.credit-balance-heading p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.8rem;
}

.credit-balance-heading button,
.credit-incoming-gifts button,
.credit-send-gift button {
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  font-weight: 850;
  cursor: pointer;
}

.credit-balance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.credit-return-notice,
.credit-terms,
.credit-section-heading h3,
.credit-section-heading p {
  margin: 0;
}

.credit-return-notice {
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--green) 42%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--green) 9%, var(--panel));
  color: var(--green);
  font-size: 0.86rem;
  font-weight: 800;
}

.credit-return-notice[data-state="cancelled"] {
  border-color: var(--line);
  background: var(--soft-glass);
  color: var(--muted);
}

.credit-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--green) 42%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--green) 10%, var(--panel));
}

.credit-balance.is-gift {
  border-color: color-mix(in srgb, #c85a7c 46%, var(--line));
  background: color-mix(in srgb, #c85a7c 9%, var(--panel));
}

.credit-balance span {
  display: grid;
  gap: 4px;
}

.credit-balance small,
.credit-section-heading p,
.credit-terms,
.credit-ledger small {
  color: var(--muted);
}

.credit-balance strong {
  font-size: 1.75rem;
  line-height: 1.1;
}

.credit-balance button {
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  font-weight: 850;
  cursor: pointer;
}

.currency-token-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.currency-token-wrap > span {
  display: grid;
  gap: 1px;
}

.currency-token-wrap small {
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 750;
}

.currency-token {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #72520b;
  font-style: normal;
}

.currency-token b {
  position: relative;
  z-index: 2;
  color: rgba(91, 63, 4, 0.68);
  font-size: 0.48rem;
  font-weight: 900;
  line-height: 1;
}

.currency-token.is-regular {
  border: 2px solid #9f7110;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff4a3 0 9%, #efca4f 31%, #c99018 73%, #9b6810 100%);
  box-shadow: inset 0 0 0 3px rgba(255, 245, 170, 0.36), 0 3px 8px rgba(96, 65, 4, 0.2);
}

.currency-token.is-gift {
  width: 36px;
  height: 32px;
  margin-top: 6px;
  border: 2px solid #8c3659;
  border-radius: 5px;
  background: linear-gradient(150deg, #e985a4, #be476d 70%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.28), 0 3px 8px rgba(97, 26, 55, 0.2);
}

.currency-token.is-gift::before {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  top: -7px;
  height: 8px;
  border: 2px solid #8c3659;
  border-radius: 4px 4px 2px 2px;
  background: #df7395;
}

.currency-token.is-gift::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -7px;
  bottom: 0;
  left: 50%;
  width: 6px;
  transform: translateX(-50%);
  background: #f4cd5e;
  box-shadow: -6px -5px 0 -2px #f4cd5e, 6px -5px 0 -2px #f4cd5e;
}

.credit-totals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: -10px 0 0;
}

.credit-totals div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--soft-glass);
}

.credit-totals dt {
  color: var(--muted);
}

.credit-totals dd {
  margin: 0;
  font-weight: 900;
}

.credit-gift-section,
.credit-purchase-section,
.credit-activity {
  display: grid;
  gap: 12px;
}

.credit-gift-section {
  padding: 15px;
  border: 1px solid color-mix(in srgb, #c85a7c 40%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, #c85a7c 5%, var(--panel));
}

.credit-incoming-gifts {
  display: grid;
  gap: 8px;
}

.credit-incoming-gifts article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, #c85a7c 34%, var(--line));
  border-radius: 7px;
  background: var(--panel);
}

.credit-incoming-gifts article > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.credit-incoming-gifts small,
.credit-outgoing-gifts small {
  color: var(--muted);
}

.credit-incoming-gifts button,
.credit-send-gift button {
  border-color: #a94369;
  background: #a94369;
  color: #fff;
}

.credit-send-gift {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.credit-send-gift label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.credit-send-gift select {
  width: 100%;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--input-bg);
  color: var(--ink);
}

.credit-outgoing-gifts {
  display: grid;
  gap: 6px;
  padding-top: 2px;
}

.credit-outgoing-gifts h4,
.credit-outgoing-gifts p {
  margin: 0;
}

.credit-outgoing-gifts p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 7px;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
}

.credit-gift-section > .sync-status:empty {
  display: none;
}

.credit-section-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.credit-section-heading p,
.credit-terms {
  margin-top: 4px;
  font-size: 0.8rem;
  line-height: 1.45;
}

.credit-pack-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.credit-pack {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.credit-pack > span,
.credit-pack > small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.credit-pack-bonus {
  justify-self: start;
  margin-top: 7px;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--green) 45%, var(--line));
  border-radius: 5px;
  background: color-mix(in srgb, var(--green) 10%, var(--panel));
  color: var(--green);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
}

.credit-pack-total {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.75rem;
}

.credit-pack > strong {
  margin-top: 3px;
  font-size: 1.35rem;
}

.credit-pack button {
  min-height: 40px;
  margin-top: 9px;
  border: 1px solid var(--green);
  border-radius: 7px;
  background: var(--green);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.credit-pack button:disabled {
  border-color: var(--line);
  background: color-mix(in srgb, var(--muted) 18%, var(--panel));
  color: var(--muted);
  cursor: default;
}

.credit-purchase-section > .sync-status:empty {
  display: none;
}

.credit-shop-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--green) 35%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--green) 7%, var(--panel));
}

.credit-shop-link > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.credit-shop-link h3,
.credit-shop-link p {
  margin: 0;
}

.credit-shop-link p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.8rem;
}

.credit-shop-link button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--green);
  border-radius: 7px;
  background: var(--green);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.credit-ledger {
  display: grid;
  gap: 7px;
}

.credit-ledger article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
}

.credit-ledger article > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.credit-ledger b.is-positive {
  color: var(--green);
}

.credit-ledger b.is-negative {
  color: var(--red);
}

@media (max-width: 520px) {
  .credit-pack-grid {
    grid-template-columns: 1fr;
  }

  .credit-balance strong {
    font-size: 1.4rem;
  }

  .credit-balance-grid,
  .credit-send-gift {
    grid-template-columns: 1fr;
  }

  .credit-incoming-gifts article {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .credit-incoming-gifts button {
    grid-column: 1 / -1;
  }

  .credit-shop-link {
    align-items: stretch;
    flex-direction: column;
  }
}

.shop-view {
  display: grid;
  gap: 22px;
  width: 100%;
}

.shop-heading,
.shop-section > header,
.shop-orders > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.shop-heading h2,
.shop-heading p,
.shop-section h2,
.shop-section p,
.shop-orders h2,
.shop-terms {
  margin: 0;
}

.shop-heading h2,
.shop-section h2,
.shop-orders h2 {
  font-size: 1.15rem;
}

.shop-heading .icon-button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.shop-balances {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.shop-balances article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 16px;
  border: 1px solid color-mix(in srgb, #c7931f 40%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, #c7931f 8%, var(--panel));
}

.shop-balances article.is-energy {
  border-color: color-mix(in srgb, #3a9c72 42%, var(--line));
  background: color-mix(in srgb, #3a9c72 8%, var(--panel));
}

.shop-balances article > span:last-child {
  display: grid;
  gap: 3px;
}

.shop-balances small,
.shop-product > small,
.shop-product > span,
.shop-orders small,
.shop-terms,
.shop-fixed-note {
  color: var(--muted);
}

.shop-balances strong {
  font-size: 1.6rem;
}

.shop-payment-state,
.shop-return-notice {
  margin: -8px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--soft-glass);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.shop-payment-state[data-enabled="true"],
.shop-return-notice[data-state="success"] {
  border-color: color-mix(in srgb, var(--green) 40%, var(--line));
  background: color-mix(in srgb, var(--green) 8%, var(--panel));
  color: var(--green);
}

.shop-section,
.shop-orders {
  display: grid;
  gap: 12px;
}

.shop-section > header > span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 850;
}

.shop-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.shop-product {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.shop-product-token {
  margin-bottom: 7px;
}

.shop-product > strong {
  font-size: 1.55rem;
  line-height: 1.05;
}

.shop-product > em {
  justify-self: start;
  min-height: 25px;
  margin: 7px 0 5px;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--green) 42%, var(--line));
  border-radius: 5px;
  background: color-mix(in srgb, var(--green) 9%, var(--panel));
  color: var(--green);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
}

.shop-product > em.is-plain {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.shop-product button,
.shop-energy-product button {
  min-height: 42px;
  margin-top: auto;
  border: 1px solid var(--green);
  border-radius: 7px;
  background: var(--green);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  transition: filter 160ms ease, transform 160ms ease;
}

.shop-product button:disabled,
.shop-energy-product button:disabled {
  border-color: var(--line);
  background: color-mix(in srgb, var(--muted) 16%, var(--panel));
  color: var(--muted);
  cursor: default;
}

.shop-product button.is-processing,
.shop-energy-product button.is-processing {
  box-shadow: inset 0 3px 7px rgba(14, 22, 18, 0.28);
  filter: grayscale(0.65);
  transform: translateY(1px);
}

.shop-energy-product {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, #3a9c72 48%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, #3a9c72 7%, var(--panel));
}

.shop-energy-product > div:nth-child(2) {
  display: grid;
  gap: 4px;
}

.shop-energy-product small,
.shop-energy-product p {
  color: var(--muted);
}

.shop-energy-product strong {
  font-size: 1.45rem;
}

.shop-energy-product button {
  min-width: 132px;
  padding: 0 16px;
}

.shop-energy-visual {
  position: relative;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border: 1px solid color-mix(in srgb, #63d59a 50%, var(--line));
  border-radius: 50%;
  background: radial-gradient(circle, rgba(85, 213, 149, 0.2), rgba(85, 213, 149, 0.03) 62%, transparent 63%);
  overflow: hidden;
}

.shop-energy-visual > i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #68dba0;
  box-shadow: 0 0 8px rgba(104, 219, 160, 0.72);
}

.shop-energy-visual > i:nth-of-type(1) { top: 16px; left: 24px; }
.shop-energy-visual > i:nth-of-type(2) { right: 17px; bottom: 25px; width: 3px; height: 3px; }
.shop-energy-visual > i:nth-of-type(3) { bottom: 15px; left: 28px; width: 4px; height: 4px; }

.shop-fixed-note {
  margin: 0;
  font-size: 0.78rem;
}

.shop-orders article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-top: 1px solid var(--line);
}

.shop-orders article > div,
.shop-orders article > span:last-child {
  display: grid;
  gap: 2px;
}

.shop-orders article > span:last-child {
  justify-items: end;
  text-transform: capitalize;
}

.shop-orders [data-status="paid"] {
  color: var(--green);
}

.shop-terms {
  font-size: 0.75rem;
  line-height: 1.5;
}

.shop-view > .sync-status:empty {
  display: none;
}

@media (max-width: 650px) {
  .shop-product-grid {
    grid-template-columns: 1fr;
  }

  .shop-energy-product {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 13px;
  }

  .shop-energy-visual {
    width: 72px;
    height: 72px;
  }

  .shop-energy-product button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 390px) {
  .shop-balances {
    grid-template-columns: 1fr;
  }
}

.settings-engine-room {
  display: grid;
  gap: 16px;
  padding-top: 8px;
}

.engine-room-view:not(.is-embedded) {
  width: 100%;
}

.engine-visual-band {
  position: relative;
  width: 100%;
  min-height: 240px;
  overflow: hidden;
  background: #14201c;
  box-shadow: inset 0 -42px 70px rgba(0, 0, 0, 0.28);
  transition: background 240ms ease;
}

.engine-visual-band[data-visual-style="campfire"] {
  background: #231912;
}

.engine-visual-band::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 14, 12, 0.84), transparent 36%, transparent 68%, rgba(8, 14, 12, 0.48));
  content: "";
  pointer-events: none;
}

.engine-visual-band[data-visual-style="campfire"]::before {
  background: radial-gradient(circle at 50% 68%, rgba(214, 99, 37, 0.18), transparent 44%), linear-gradient(90deg, rgba(10, 8, 7, 0.76), transparent 38%, transparent 64%, rgba(10, 8, 7, 0.62));
}

.engine-visual-stage {
  position: absolute;
  inset: 0;
}

.engine-visual-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.engine-visual-stage.is-canvas-fallback {
  background: #25342f;
}

.engine-visual-label {
  position: absolute;
  z-index: 2;
  bottom: 18px;
  left: 18px;
  display: grid;
  gap: 3px;
  color: #fff;
  pointer-events: none;
  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.82);
}

.engine-visual-label small {
  color: #c7d5cf;
  font-weight: 800;
}

.engine-visual-label strong {
  font-size: 1.45rem;
}

.engine-visual-picker {
  position: absolute;
  z-index: 4;
  top: 14px;
  right: 14px;
  display: grid;
  gap: 4px;
  width: min(190px, calc(100% - 28px));
  color: #c7d5cf;
  font-size: 0.7rem;
  font-weight: 850;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
}

.engine-visual-picker select {
  width: 100%;
  min-height: 38px;
  padding: 0 34px 0 10px;
  border: 1px solid rgba(183, 205, 193, 0.34);
  border-radius: 7px;
  background: rgba(12, 21, 18, 0.84);
  color: #f4fff7;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.engine-visual-band[data-visual-style="campfire"] .engine-visual-picker select {
  border-color: rgba(230, 171, 111, 0.38);
  background: rgba(31, 20, 13, 0.86);
}

.engine-room-view > [data-engine-content] {
  display: grid;
  gap: 16px;
}

.settings-import-eligibility {
  margin: 0;
  padding: 11px 12px;
  border-left: 3px solid var(--gold-border);
  background: var(--soft-glass);
  color: var(--muted);
  line-height: 1.45;
}

.settings-import-eligibility[data-state="ok"] {
  border-left-color: #35ad70;
  color: var(--ink);
}

.engine-room-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft-glass);
}

.engine-room-status.is-powered {
  border-color: color-mix(in srgb, var(--green) 52%, var(--line));
  background: color-mix(in srgb, var(--green) 9%, var(--panel));
}

.engine-room-status.is-powered .engine-power-symbol {
  color: var(--green);
}

.engine-room-status.is-empty .engine-power-symbol {
  animation: engine-power-pulse 1.35s ease-in-out infinite;
}

.engine-room-status > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.engine-room-status small,
.engine-room-balances small,
.engine-room-action p,
.engine-room-activity small {
  color: var(--muted);
}

.engine-room-status strong {
  font-size: 1.55rem;
  line-height: 1.1;
}

.engine-room-status p,
.engine-room-action h3,
.engine-room-action p,
.engine-room-activity h3 {
  margin: 0;
}

.engine-room-status p {
  margin-top: 3px;
  font-size: 0.8rem;
}

.engine-room-status > button,
.engine-room-action > button,
.engine-day-choices button {
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  font-weight: 850;
  cursor: pointer;
}

.engine-room-balances {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.engine-room-balances article {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
}

.engine-room-balances article > span:last-child {
  display: grid;
  min-width: 0;
}

.engine-room-balances strong {
  font-size: 1.3rem;
}

.engine-energy-token {
  width: 34px;
  height: 34px;
  color: #d2a126;
}

.engine-energy-token.is-campfire-token {
  width: 42px;
  height: 34px;
  border: 0;
  border-radius: 0;
  color: #6b4124;
}

.engine-energy-token.is-campfire-token i,
.engine-energy-token.is-campfire-token i::before,
.engine-energy-token.is-campfire-token i::after {
  position: absolute;
  width: 30px;
  height: 10px;
  border: 1px solid #5b351d;
  border-radius: 999px;
  background:
    radial-gradient(circle at 15% 50%, #d09a56 0 3px, #7b4c2a 3.5px 5px, transparent 5.5px),
    linear-gradient(90deg, #5f351d, #9b6335 38%, #c0803f 62%, #6b3f22);
  box-shadow: inset 0 -2px 3px rgba(32, 17, 9, 0.34);
  content: "";
}

.engine-energy-token.is-campfire-token i {
  top: 16px;
  left: 6px;
  transform: rotate(18deg);
}

.engine-energy-token.is-campfire-token i::before {
  top: -9px;
  left: 1px;
  transform: rotate(-35deg);
}

.engine-energy-token.is-campfire-token i::after {
  top: 6px;
  left: -1px;
  transform: rotate(-24deg);
}

.engine-room-action {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(190px, 0.9fr) auto;
  align-items: end;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.engine-room-action > div:first-child {
  align-self: center;
}

.engine-room-action p {
  margin-top: 4px;
  font-size: 0.8rem;
  line-height: 1.4;
}

.engine-room-action label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.engine-room-action select,
.engine-room-action input {
  width: 100%;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--input-bg);
  color: var(--ink);
}

.engine-room-action > button {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

.engine-room-action.is-feed {
  grid-template-columns: minmax(0, 1.2fr) minmax(180px, auto) minmax(100px, 0.45fr) auto;
}

.engine-day-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.engine-day-choices button {
  min-height: 34px;
  padding: 0 9px;
  font-size: 0.76rem;
}

.settings-engine-room > .sync-status:empty {
  display: none;
}

.engine-room-activity {
  display: grid;
  gap: 8px;
}

.engine-room-activity article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
}

.engine-room-activity article > span {
  display: grid;
  gap: 2px;
}

.engine-room-activity b.is-positive {
  color: var(--green);
}

.engine-room-activity b.is-negative {
  color: var(--red);
}

@media (max-width: 720px) {
  .engine-visual-band {
    min-height: 210px;
  }

  .engine-room-balances,
  .engine-room-action,
  .engine-room-action.is-feed {
    grid-template-columns: 1fr;
  }

  .engine-room-action > button {
    width: 100%;
  }
}

@media (max-width: 460px) {
  .engine-room-status {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .engine-room-status > button {
    grid-column: 1 / -1;
  }

  .engine-visual-picker {
    width: 164px;
  }
}

.settings-import {
  display: grid;
  gap: 14px;
  padding-top: 8px;
}

.settings-import label {
  font-weight: 800;
}

.settings-import input[type="file"] {
  min-width: 0;
  width: 100%;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--ink);
}

.settings-import button {
  min-height: 44px;
  border: 1px solid var(--green);
  border-radius: 6px;
  background: var(--green);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.settings-import-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.settings-import .sync-status {
  margin: 0;
}

.settings-import .sync-status a {
  color: inherit;
  font-weight: 800;
}

.settings-legal {
  display: grid;
  gap: 18px;
  padding-top: 8px;
}

.settings-legal section {
  display: grid;
  gap: 7px;
}

.settings-legal h3,
.settings-legal p {
  margin: 0;
}

.settings-legal p,
.settings-legal li {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.settings-legal ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 20px;
}

.settings-legal a,
.data-attribution a {
  color: var(--blue);
  font-weight: 800;
}

.data-attribution {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.achievement-item {
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--gold-border);
  border-radius: 8px;
  background: var(--gold-soft);
}

.achievement-item.is-compact {
  padding: 13px;
}

.achievement-heading {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.achievement-heading > span:last-child {
  display: grid;
  gap: 3px;
}

.achievement-heading small {
  color: var(--muted);
  line-height: 1.35;
}

.achievement-medal {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-ink);
  font-size: 0.78rem;
  font-weight: 900;
}

.achievement-progress {
  overflow: hidden;
  height: 10px;
  border-radius: 5px;
  background: var(--gold-track);
}

.achievement-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--gold);
  transition: width 220ms ease;
}

.achievement-item p {
  margin: 0;
  color: var(--gold-ink);
  font-size: 0.82rem;
  font-weight: 800;
}

.achievement-item .achievement-reward {
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--gold) 38%, var(--line));
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.45;
}

.achievement-reward > span,
.achievement-reward > small {
  display: block;
}

.achievement-reward > small {
  margin-top: 8px;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.45;
}

.achievement-reward-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 9px;
}

.achievement-celebration-overlay {
  position: fixed;
  z-index: 1300;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(10, 16, 13, 0.68);
  backdrop-filter: blur(6px);
}

.achievement-celebration {
  position: relative;
  overflow: hidden;
  display: grid;
  justify-items: center;
  width: min(440px, 100%);
  padding: 30px 25px 24px;
  border: 1px solid var(--gold-border);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  text-align: center;
  animation: achievement-arrive 360ms cubic-bezier(.2, .8, .2, 1) both;
}

.achievement-celebration-kicker {
  color: var(--gold-ink);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.achievement-celebration h2 {
  margin: 7px 0 4px;
  font-size: 1.55rem;
}

.achievement-celebration > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.48;
}

.welcome-energy-dialog {
  gap: 8px;
}

.welcome-energy-token-large {
  position: relative;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin-bottom: 4px;
  border: 1px solid rgba(101, 230, 157, 0.58);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #8affbb, #16985a 54%, #0d4d32 100%);
  box-shadow: 0 0 28px rgba(63, 218, 132, 0.26), inset 0 0 18px rgba(232, 255, 240, 0.26);
}

.welcome-energy-token-large::before {
  width: 24px;
  height: 32px;
  border: 4px solid rgba(239, 255, 245, 0.92);
  border-top: 0;
  border-radius: 0 0 16px 16px;
  content: "";
}

.welcome-energy-token-large i {
  position: absolute;
  top: 19px;
  width: 4px;
  height: 21px;
  border-radius: 3px;
  background: rgba(239, 255, 245, 0.92);
}

.achievement-celebration-rewards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 20px 0 15px;
}

.achievement-celebration-reward {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 145px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--soft-glass);
  text-align: left;
}

.achievement-celebration-reward > span {
  display: grid;
}

.achievement-celebration-reward strong {
  font-size: 1.15rem;
}

.achievement-celebration-reward small {
  color: var(--muted);
  font-weight: 750;
}

.achievement-celebration .achievement-celebration-note {
  font-size: 0.82rem;
}

.achievement-celebration > button {
  min-width: 140px;
  min-height: 43px;
  margin-top: 20px;
  border: 1px solid var(--green);
  border-radius: 7px;
  background: var(--green);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.achievement-celebration-burst {
  position: absolute;
  pointer-events: none;
  inset: 0;
}

.achievement-celebration-burst i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 16px;
  border-radius: 2px;
  background: var(--gold);
  transform: translate(-50%, -50%) rotate(var(--spark-rotation));
  animation: achievement-spark 750ms ease-out both;
}

.achievement-celebration-burst i:nth-child(1) { --spark-x: -125px; --spark-y: -95px; --spark-rotation: -42deg; }
.achievement-celebration-burst i:nth-child(2) { --spark-x: 5px; --spark-y: -135px; --spark-rotation: 8deg; animation-delay: 40ms; }
.achievement-celebration-burst i:nth-child(3) { --spark-x: 130px; --spark-y: -85px; --spark-rotation: 48deg; animation-delay: 80ms; }
.achievement-celebration-burst i:nth-child(4) { --spark-x: 145px; --spark-y: 55px; --spark-rotation: 118deg; animation-delay: 120ms; }
.achievement-celebration-burst i:nth-child(5) { --spark-x: -120px; --spark-y: 70px; --spark-rotation: -115deg; animation-delay: 160ms; }
.achievement-celebration-burst i:nth-child(6) { --spark-x: -155px; --spark-y: -5px; --spark-rotation: -82deg; animation-delay: 200ms; }

@keyframes achievement-arrive {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes achievement-spark {
  from { opacity: 1; transform: translate(-50%, -50%) rotate(var(--spark-rotation)) scale(0.75); }
  to { opacity: 0; transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) rotate(calc(var(--spark-rotation) + 135deg)) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .achievement-celebration,
  .achievement-celebration-burst i {
    animation: none;
  }
}

.achievement-item.is-unlocked {
  border-color: color-mix(in srgb, var(--green) 60%, var(--line));
  background: color-mix(in srgb, var(--green) 12%, var(--panel));
}

.achievement-item.is-unlocked .achievement-progress span {
  background: var(--green);
}

.community-view [hidden],
.public-profile-view[hidden],
.community-section[hidden] {
  display: none;
}

@media (max-width: 430px) {
  .friend-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .friend-row-state {
    display: none;
  }
}

.profile-card > input,
.profile-name-grid input {
  width: 100%;
}

.profile-name-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.profile-name-grid label {
  display: grid;
  gap: 7px;
}

.profile-name-grid label small {
  color: var(--muted);
  font-weight: 600;
}

.profile-card > button[type="submit"] {
  min-height: 48px;
  margin-top: 6px;
  border: 1px solid var(--green);
  border-radius: 8px;
  background: var(--green);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.profile-card > button[type="submit"]:disabled {
  cursor: wait;
  opacity: 0.65;
}

.profile-signout {
  min-height: 42px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 460px) {
  .profile-name-grid {
    grid-template-columns: 1fr;
  }
}

.feature-tile:hover {
  border-color: color-mix(in srgb, var(--home-icon-color, var(--feature-accent)) 72%, var(--line));
}

.feature-tile.feature-menu {
  --feature-accent: #36a861;
  --feature-icon-ink: #f7fff9;
}

.feature-tile.feature-friends {
  --feature-accent: #2f8a78;
  --feature-icon-ink: #f2fffb;
}

.feature-tile.feature-ingredients {
  --feature-accent: #3f8465;
  --feature-icon-ink: #f4fff8;
}

.feature-tile.feature-settings {
  --feature-accent: #596b7d;
  --feature-icon-ink: #f5f8fb;
}

.feature-tile.feature-developer {
  --feature-accent: #3e695d;
  --feature-icon-ink: #f3fff9;
}

.feature-tile.feature-shop {
  --feature-accent: #26865b;
  --feature-icon-ink: #f4fff8;
}

.feature-tile.feature-ideas {
  --feature-accent: #b1842d;
  --feature-icon-ink: #fff9e7;
}

.feature-tile.feature-diary {
  --feature-accent: #96549c;
  --feature-icon-ink: #fff7ff;
}

.feature-tile.feature-fitness {
  --feature-accent: #c7931f;
  --feature-icon-ink: #fff8df;
}

.feature-tile.feature-morning-checklist {
  --feature-accent: #3586ba;
  --feature-icon-ink: #f3fbff;
}

.feature-tile.feature-daily-schedule {
  --feature-accent: #8a6f2a;
  --feature-icon-ink: #fff8dc;
}

.feature-tile.feature-weather {
  --feature-accent: #397a96;
  --feature-icon-ink: #f2fbff;
}

.feature-tile.feature-shopping {
  --feature-accent: #b96d2c;
  --feature-icon-ink: #fff5ea;
}

.feature-tile.feature-todo {
  --feature-accent: #66746b;
  --feature-icon-ink: #f8fbf9;
}

.feature-tile.feature-healthy {
  --feature-accent: #c85a7c;
  --feature-icon-ink: #fff5f8;
}

.feature-tile.feature-hydration {
  --feature-accent: #2187a8;
  --feature-icon-ink: #f2fcff;
}

.feature-tile.feature-goals {
  --feature-accent: #7659b8;
  --feature-icon-ink: #fbf8ff;
}

.feature-tile.feature-finance {
  --feature-accent: #238294;
  --feature-icon-ink: #f0fdff;
}

.feature-tile.feature-occurrence {
  --feature-accent: #4f79c7;
  --feature-icon-ink: #f5f9ff;
}

.feature-tile.feature-calculator {
  --feature-accent: #9a5e35;
  --feature-icon-ink: #fff6ee;
}

.feature-tile.feature-storage {
  --feature-accent: #69778d;
  --feature-icon-ink: #f7faff;
}

.feature-tile .tile-icon {
  background: var(--home-icon-color, var(--feature-accent));
  color: var(--feature-icon-ink);
}

.feature-tile.is-alerting {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 18%, var(--panel));
  animation: reminder-tile-alert 1.1s ease-in-out infinite;
}

.feature-tile.is-alerting .tile-icon {
  background: var(--red);
  color: #fff;
}

@keyframes reminder-tile-alert {
  0%,
  100% {
    box-shadow: var(--shadow);
  }

  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 28%, transparent), var(--shadow);
  }
}

.feature-tile > span:last-child {
  min-width: 0;
}

.feature-tile strong,
.feature-tile small {
  display: block;
  overflow-wrap: anywhere;
}

.feature-tile strong {
  margin-bottom: 4px;
  font-size: 1.02rem;
}

.feature-tile small {
  color: var(--muted);
  line-height: 1.35;
}

.feature-tile.is-secondary {
  opacity: 0.3;
}

.home-view.is-private-unlocked .feature-tile.is-secondary {
  opacity: 1;
}

.feature-tile:not(.is-secondary) + .feature-tile.is-secondary,
.feature-tile.is-secondary + .feature-tile.is-secondary {
  margin-top: 18px;
}

.tile-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--tile-icon-bg);
  color: var(--green);
}

.private-tap-zone {
  min-height: 96px;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.is-login-private-trigger {
  min-height: 42px;
}

.ios-install-card {
  position: relative;
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 16px 44px 16px 16px;
  border: 1px solid var(--green);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.ios-install-card h2,
.ios-install-card p {
  margin: 0;
}

.ios-install-card h2 {
  font-size: 1rem;
}

.ios-install-card > p:last-child {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.ios-install-close {
  position: absolute;
  top: 7px;
  right: 7px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.35rem;
  cursor: pointer;
}

.private-pin-card {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.private-pin-form {
  display: grid;
  gap: 9px;
}

.private-pin-form label {
  font-size: 0.88rem;
  font-weight: 800;
}

.private-pin-error {
  min-height: 1.2em;
  margin: 0;
  color: var(--red);
  font-size: 0.85rem;
}

.todo-view {
  display: grid;
  gap: 14px;
}

.morning-checklist-view {
  display: grid;
  gap: 12px;
}

.morning-progress {
  display: grid;
  gap: 11px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.is-login-private-card {
  margin-top: 0;
}

.is-login-private-card > strong {
  color: var(--green);
  font-size: 0.9rem;
}

.morning-progress-copy {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}

.morning-progress-copy div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.morning-progress-copy span,
.morning-progress-copy b {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 850;
}

.morning-progress-copy strong {
  overflow-wrap: anywhere;
  font-size: 1.08rem;
}

.morning-progress-copy b {
  flex: 0 0 auto;
  color: var(--green);
  text-align: right;
}

.morning-progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 65%, transparent);
}

.morning-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #35a865, #8fdb72);
  transition: width 180ms ease;
}

.morning-task-list {
  display: grid;
  gap: 9px;
}

.morning-task {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 40px;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 9px 10px 9px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  transition: border-color 160ms ease, background 160ms ease;
}

.morning-task.is-complete {
  border-color: color-mix(in srgb, var(--green) 42%, var(--line));
  background: color-mix(in srgb, var(--green) 9%, var(--panel));
}

.morning-task > span {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.morning-task.is-complete > span {
  color: var(--muted);
  text-decoration: line-through;
}

.morning-task-check {
  width: 21px;
  height: 21px;
  margin: 0;
  accent-color: var(--green);
  cursor: pointer;
}

.morning-task-delete {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.morning-task-delete:hover,
.morning-task-delete:focus-visible {
  border-color: color-mix(in srgb, var(--red) 32%, var(--line));
  background: color-mix(in srgb, var(--red) 8%, transparent);
}

.morning-task-delete svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

@media (max-width: 430px) {
  .morning-progress-copy {
    align-items: start;
    flex-direction: column;
    gap: 7px;
  }

  .morning-progress-copy b {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .morning-progress-track span,
  .morning-task {
    transition: none;
  }
}

.developer-view {
  display: grid;
  gap: 18px;
}

.developer-heading,
.developer-summary,
.developer-users > header,
.developer-users > article {
  display: grid;
  align-items: center;
}

.developer-heading {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
}

.developer-heading h2 {
  margin: 2px 0 0;
  font-size: 1.5rem;
}

.developer-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--line);
}

.developer-summary > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 16px;
  border-right: 1px solid var(--line);
}

.developer-summary > div:last-child {
  border-right: 0;
}

.developer-summary small,
.developer-users small,
.developer-privacy-note {
  color: var(--muted);
}

.developer-summary strong {
  font-size: 1.45rem;
  font-variant-numeric: tabular-nums;
}

.developer-search {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.developer-search input {
  width: 100%;
}

.developer-users {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.developer-users > header,
.developer-users > article {
  grid-template-columns: minmax(150px, 1.15fr) minmax(180px, 1fr) minmax(150px, 1fr) minmax(90px, 0.55fr);
  gap: 14px;
  padding: 12px 14px;
}

.developer-users > header {
  background: color-mix(in srgb, var(--green) 9%, var(--panel));
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.developer-users > article {
  border-top: 1px solid var(--line);
}

.developer-users > article > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.developer-users strong,
.developer-users small {
  overflow-wrap: anywhere;
}

.developer-users strong {
  font-size: 0.86rem;
}

.developer-users small {
  font-size: 0.72rem;
}

.developer-privacy-note {
  margin: 0;
  font-size: 0.77rem;
}

@media (max-width: 760px) {
  .developer-summary {
    grid-template-columns: 1fr;
  }

  .developer-summary > div {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .developer-summary > div:last-child {
    border-bottom: 0;
  }

  .developer-users > header {
    display: none;
  }

  .developer-users > article {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 460px) {
  .developer-users > article {
    grid-template-columns: 1fr;
  }
}

.add-task,
.fitness-form,
.occurrence-form,
.healthy-form,
.finance-form,
.storage-form,
.calculator-form,
.goal-selector,
.date-selector {
  display: grid;
  gap: 9px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.add-task label,
.fitness-form label,
.occurrence-form label,
.healthy-form label,
.finance-form label,
.storage-form label,
.calculator-form label,
.goal-selector label,
.date-selector label,
.login-card label {
  font-size: 0.88rem;
  font-weight: 800;
}

.input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.date-step-control {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.date-step-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.date-step-button:hover {
  border-color: color-mix(in srgb, var(--green) 34%, var(--line));
}

.input-row input,
.storage-pile-input,
.date-selector input,
.fitness-form > input,
.occurrence-form input,
.healthy-form > input,
.finance-form > input,
.storage-form select,
.storage-consumption-fields select,
.storage-consumption-fields input[type="number"],
.calculator-form input,
.calculator-form select,
.goal-selector select,
.login-card input,
.graph-controls input,
.graph-controls select {
  min-width: 0;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 13px;
  background: var(--input-bg);
  color: var(--ink);
}

.input-row button {
  min-width: 72px;
  height: 48px;
  border: 0;
  border-radius: 8px;
  background: var(--green);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.storage-form.is-pile-mode #storage-amount {
  display: none;
}

.storage-total-preview {
  display: grid;
  min-width: 0;
  height: 48px;
  place-items: center start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 13px;
  background: var(--input-bg);
  color: var(--green);
  font-weight: 900;
}

.storage-total-preview[hidden] {
  display: none;
}

.storage-pile-editor {
  display: grid;
  gap: 9px;
}

.storage-pile-editor[hidden] {
  display: none;
}

.storage-pile-list {
  display: grid;
  gap: 8px;
}

.storage-pile-cell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 8px;
  align-items: end;
}

.storage-pile-cell label {
  display: grid;
  gap: 5px;
}

.storage-pile-cell span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.storage-pile-input {
  width: 100%;
}

.storage-remove-pile,
.storage-add-pile {
  border: 0;
  border-radius: 8px;
  font-weight: 900;
  cursor: pointer;
}

.storage-remove-pile {
  width: 44px;
  height: 48px;
  background: color-mix(in srgb, var(--red) 12%, var(--panel));
  color: var(--red);
}

.storage-add-pile {
  height: 42px;
  background: var(--soft-glass);
  color: var(--green);
}

.storage-consumption-fields {
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--green) 30%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--green) 8%, var(--panel));
}

.storage-consumption-fields[hidden] {
  display: none;
}

.storage-consumption-heading,
.storage-consumption-toggle {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.storage-consumption-heading strong {
  color: var(--ink);
  font-size: 0.9rem;
}

.storage-consumption-preview {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--panel-glass);
  color: var(--green);
  font-size: 0.82rem;
  font-weight: 900;
}

.storage-consumption-toggle {
  justify-content: flex-start;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.storage-consumption-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--green);
}

.storage-consumption-toggle:has(input:disabled) {
  opacity: 0.62;
}

.occurrence-form {
  gap: 18px;
}

.occurrence-form > button {
  height: 48px;
  border: 0;
  border-radius: 8px;
  background: var(--green);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.code-group {
  display: grid;
  gap: 9px;
  min-width: 0;
  margin: 0;
  padding: 0 0 18px;
  border: 0;
  border-bottom: 1px solid var(--line);
}

.code-group:last-of-type {
  padding-bottom: 0;
  border-bottom: 0;
}

.code-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 10px;
}

.occurrence-graph-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.occurrence-display-graphs {
  display: grid;
  gap: 14px;
}

.occurrence-display-graphs article {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.occurrence-display-graphs h3 {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 900;
  text-transform: uppercase;
}

.occurrence-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.occurrence-day-card {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.occurrence-day-card > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.occurrence-day-card > strong {
  color: var(--ink);
  font-size: 1.18rem;
  line-height: 1.1;
}

.occurrence-date-control {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  gap: 7px;
  align-items: center;
}

.occurrence-date-step {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.occurrence-date-input {
  min-width: 0;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 8px;
  background: var(--input-bg);
  color: var(--ink);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
}

.occurrence-day-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.occurrence-day-breakdown span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 4px 7px;
  border-radius: 8px;
  background: var(--soft-glass);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.occurrence-day-breakdown i {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 999px;
}

.fitness-dashboard {
  display: grid;
  gap: 10px;
}

.healthy-dashboard {
  display: grid;
  gap: 10px;
}

.fitness-entry-panel,
.healthy-entry-panel {
  display: grid;
  gap: 10px;
}

.healthy-entry-panel {
  order: 1;
}

.healthy-chart-left,
.healthy-chart-right {
  order: 2;
}

.fitness-average,
.fitness-remaining {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.fitness-average {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.fitness-average article {
  display: grid;
  gap: 4px;
}

.fitness-average span,
.fitness-remaining span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.fitness-average strong {
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
}

.fitness-remaining strong {
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.1;
}

.fitness-chart-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.fitness-chart-card h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.1;
  letter-spacing: 0;
}

.fitness-chart {
  min-width: 0;
  min-height: 210px;
  overflow: hidden;
}

.healthy-day-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.healthy-day-stats span {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--panel-glass);
  color: var(--muted);
  font-size: 0.9rem;
}

.healthy-day-stats strong {
  color: var(--ink);
}

.healthy-view .fitness-chart {
  min-height: 0;
}

.graph-controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.healthy-graph-controls,
.fitness-graph-controls,
.storage-graph-controls {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.graph-controls label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.occurrence-chart {
  min-height: 220px;
}

.occurrence-chart-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  fill: none;
  stroke: none;
}

.chart-grid line {
  stroke: var(--line);
  stroke-width: 1;
}

.chart-grid text,
.chart-labels text {
  fill: var(--muted);
  font-size: 12px;
}

.chart-axis {
  stroke: var(--line);
  stroke-width: 1.5;
}

.chart-total-line {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.chart-ghours-line {
  stroke: #4f83a5;
}

.chart-z-total-line {
  stroke: var(--muted);
  stroke-width: 2.25;
}

.chart-target-line {
  stroke: var(--red);
  stroke-dasharray: 7 6;
  stroke-linecap: round;
  stroke-width: 2;
}

.chart-trend-line {
  fill: none;
  stroke: var(--red);
  stroke-dasharray: 4 5;
  stroke-linecap: round;
  stroke-width: 2.25;
}

.chart-target-label {
  fill: var(--red);
  font-size: 12px;
  font-weight: 800;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  color: var(--muted);
  font-size: 0.86rem;
}

.chart-legend span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.chart-legend i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.chart-legend strong {
  color: var(--ink);
}

.calculator-view {
  display: grid;
  gap: 12px;
}

.finance-view {
  display: grid;
  gap: 12px;
}

.storage-view {
  display: grid;
  gap: 12px;
}

.storage-safety-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.storage-create-toggle,
.storage-empty-button,
.storage-backup-toggle {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 13px;
  border-radius: 8px;
  font-weight: 900;
  cursor: pointer;
}

.storage-create-toggle {
  border: 1px solid var(--green);
  background: var(--green);
  color: #fff;
}

.storage-create-toggle svg,
.storage-empty-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.storage-empty-button {
  border: 1px solid var(--red);
  background: transparent;
  color: var(--red);
}

.storage-backup-toggle {
  margin-left: auto;
  border: 1px solid var(--line);
  background: var(--soft-glass);
  color: var(--ink);
}

.storage-backup-panel {
  flex: 1 0 100%;
  display: grid;
  gap: 9px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.storage-create-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--green) 46%, var(--line));
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.storage-create-panel[hidden] {
  display: none;
}

.storage-create-heading {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.storage-create-heading > div {
  display: grid;
  gap: 3px;
}

.storage-create-heading span {
  color: var(--green);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.storage-create-heading strong {
  color: var(--ink);
  font-size: 1.12rem;
}

.storage-create-heading svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.storage-create-form {
  display: grid;
  gap: 13px;
}

.storage-create-form label,
.storage-color-picker legend {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
}

.storage-create-form [hidden] {
  display: none;
}

.storage-create-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.storage-create-form input,
.storage-create-form select {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 13px;
  background: var(--input-bg);
  color: var(--ink);
  font: inherit;
}

.storage-color-picker {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.storage-pod-type-picker {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.storage-pod-type-picker legend {
  padding: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
}

.storage-pod-type-picker > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.storage-pod-type-picker label {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 108px;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 9px 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft-glass);
  color: var(--muted);
  cursor: pointer;
}

.storage-pod-type-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.storage-pod-type-picker label > span {
  display: grid;
  width: 46px;
  height: 58px;
  place-items: center;
  border-radius: 7px;
  color: color-mix(in srgb, var(--blue) 66%, var(--ink));
}

.storage-pod-type-picker svg {
  width: 38px;
  height: 48px;
  fill: currentColor;
  stroke: none;
}

.storage-pod-type-picker small {
  max-width: 100%;
  color: inherit;
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.25;
  text-align: center;
}

.storage-pod-type-picker label:has(input:checked) {
  border-color: var(--green);
  box-shadow: inset 0 0 0 2px var(--green);
  color: var(--ink);
}

.storage-pod-type-picker label:has(input:focus-visible) {
  outline: 3px solid color-mix(in srgb, var(--blue) 72%, transparent);
  outline-offset: 2px;
}

.storage-color-picker > div {
  display: grid;
  grid-template-columns: repeat(6, minmax(48px, 1fr));
  gap: 7px;
}

.storage-color-picker label {
  display: grid;
  place-items: center;
  gap: 5px;
  min-width: 0;
  padding: 7px 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft-glass);
  cursor: pointer;
}

.storage-color-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.storage-color-picker label > span {
  width: 28px;
  height: 28px;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--stock-primary) 0 50%, var(--stock-secondary) 50%);
  box-shadow: 0 0 0 1px var(--line);
}

.storage-color-picker input:checked + span {
  box-shadow: 0 0 0 3px var(--green);
}

.storage-color-picker small {
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storage-create-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.storage-create-actions button {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--green);
  border-radius: 8px;
  background: var(--green);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.storage-create-actions .secondary-button {
  border-color: var(--line);
  background: var(--soft-glass);
  color: var(--ink);
}

.storage-backup-panel[hidden] {
  display: none;
}

.storage-backup-list {
  display: grid;
  gap: 7px;
}

.storage-backup-list > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.storage-backup-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.storage-backup-row:last-child {
  border-bottom: 0;
}

.storage-backup-row > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.storage-backup-row small {
  color: var(--muted);
}

.storage-backup-row button {
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid var(--green);
  border-radius: 8px;
  background: transparent;
  color: var(--green);
  font-weight: 900;
  cursor: pointer;
}

.goals-view {
  display: grid;
  gap: 12px;
}

.goal-panel {
  display: grid;
  gap: 12px;
}

.goal-panel[hidden] {
  display: none;
}

.goal-progress-card,
.goal-day-card {
  display: grid;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.goal-card-heading {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.goal-card-heading h2 {
  margin: 0;
  font-size: 1.2rem;
}

.goal-legend {
  display: flex;
  gap: 7px 12px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.goal-legend span {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

.goal-legend i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #aeb5b0;
}

.goal-legend i.is-completed {
  background: var(--green);
}

.goal-legend i.is-red {
  background: var(--red);
}

.goal-legend i.is-bonus {
  background: var(--gold);
}

.goal-progress-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(132px, 0.48fr);
  gap: 14px;
  align-items: center;
}

.goal-donut {
  display: grid;
  gap: 14px;
  place-items: center;
}

.goal-donut-wrap {
  position: relative;
  width: min(100%, 270px);
  aspect-ratio: 1;
}

.goal-donut-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
}

.goal-donut-track,
.goal-donut-segment {
  fill: none;
  stroke-width: 28;
}

.goal-donut-track {
  stroke: #aeb5b0;
}

.goal-donut-segment {
  stroke-linecap: butt;
}

.goal-donut-segment.is-completed {
  stroke: var(--green);
}

.goal-donut-segment.is-red {
  stroke: var(--red);
}

.goal-donut-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}

.goal-donut-center strong {
  font-size: 2.5rem;
  line-height: 1;
}

.goal-donut-center span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.82rem;
}

.goal-progress-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.goal-progress-stats article {
  display: grid;
  gap: 3px;
  padding: 10px;
  border-radius: 8px;
  background: var(--soft-glass);
  text-align: center;
}

.goal-progress-stats strong {
  font-size: 1.25rem;
}

.goal-progress-stats span {
  color: var(--muted);
  font-size: 0.76rem;
}

.goal-bonus-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--gold-border);
  border-radius: 8px;
  background: var(--gold-soft);
}

.goal-bonus-card h3 {
  margin: 0;
  color: var(--gold-ink);
  font-size: 0.9rem;
}

.goal-bonus-chart {
  display: grid;
  gap: 2px;
  text-align: center;
}

.goal-bonus-total {
  color: var(--gold-ink);
  font-size: 2rem;
  line-height: 1;
}

.goal-bonus-total-label {
  color: var(--muted);
  font-size: 0.72rem;
}

.goal-bonus-bars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  align-items: end;
  min-height: 128px;
  margin-top: 8px;
}

.goal-bonus-bars article {
  display: grid;
  gap: 3px;
  min-width: 0;
  justify-items: center;
}

.goal-bonus-bar-track {
  position: relative;
  width: 100%;
  height: 72px;
  overflow: hidden;
  border-radius: 5px 5px 2px 2px;
  background: var(--gold-track);
}

.goal-bonus-bar-track span {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  background: var(--gold);
}

.goal-bonus-bars article > strong {
  color: var(--gold-ink);
  font-size: 0.85rem;
}

.goal-bonus-bars small {
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.54rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goal-transfer-button {
  height: 48px;
  border: 0;
  border-radius: 8px;
  background: var(--gold);
  color: #2b2208;
  font-weight: 900;
  cursor: pointer;
}

.goal-transfer-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.goal-transfer-status {
  min-height: 1.2rem;
  margin: -8px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.goal-day-card > label {
  font-size: 0.88rem;
  font-weight: 800;
}

.goal-day-card .date-step-input {
  min-width: 0;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 13px;
  background: var(--input-bg);
  color: var(--ink);
}

.goal-day-status {
  min-height: 1.2rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.goal-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.goal-choice {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  align-items: center;
  min-height: 58px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.goal-choice-check {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: transparent;
}

.goal-choice.is-selected {
  border-color: var(--green);
  box-shadow: inset 3px 0 0 var(--green);
}

.goal-choice.is-selected .goal-choice-check {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

.goal-choice.is-red-choice {
  grid-column: 1 / -1;
  background: var(--red);
  min-height: 54px;
}

.goal-choice.is-red-choice.is-selected {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--ink);
}

.goal-red-box {
  grid-column: 1 / -1;
  width: 100%;
  height: 26px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 5px;
}

.goal-help {
  color: var(--muted);
}

.nutrition-goal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.75fr);
  gap: 14px;
  align-items: center;
}

.nutrition-goal-donut,
.sleep-goal-donut {
  display: grid;
  place-items: center;
}

.nutrition-goal-breakdown {
  display: grid;
  gap: 8px;
}

.nutrition-goal-breakdown article {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 10px;
  padding: 11px;
  border-radius: 8px;
  background: var(--soft-glass);
}

.nutrition-goal-breakdown span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.nutrition-goal-breakdown strong {
  grid-row: 1 / 3;
  grid-column: 2;
  align-self: center;
  color: var(--green);
  font-size: 1.35rem;
}

.nutrition-goal-breakdown .is-red-stat strong {
  color: var(--red);
}

.nutrition-goal-breakdown small,
.nutrition-goal-help {
  color: var(--muted);
}

.nutrition-goal-help {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
}

.storage-chart-card {
  display: grid;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.storage-group-control {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.storage-group-control label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.storage-group-control select {
  min-width: 0;
  width: 100%;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 13px;
  background: var(--input-bg);
  color: var(--ink);
}

.storage-chart-card h2 {
  margin: 0;
  font-size: 1rem;
}

.storage-chart-heading {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.storage-total-stock {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 8px;
}

.storage-total-stock:empty {
  display: none;
}

.storage-total-stock article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 8px;
  background: var(--soft-glass);
}

.storage-total-stock span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
}

.storage-total-stock strong {
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 900;
}

.storage-chart {
  min-width: 0;
  min-height: 220px;
  overflow: hidden;
}

.storage-jar-chart {
  min-width: 0;
  overflow: hidden;
}

.storage-chart-filter {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.storage-chart-filter legend {
  padding: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.storage-chart-filter-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.storage-chart-filter label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft-glass);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 850;
}

.storage-chart-filter input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--green);
}

.storage-chart-filter span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.storage-chart-filter i {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 999px;
}

.storage-jar-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  fill: none;
  stroke: none;
}

.storage-jar-stage {
  fill: var(--soft-glass);
  stroke: var(--line);
  stroke-width: 1;
}

.storage-jar-lid {
  fill: color-mix(in srgb, var(--ink) 10%, var(--panel));
  stroke: var(--line);
  stroke-width: 2;
}

.storage-jar-lid-band {
  fill: color-mix(in srgb, var(--green) 24%, transparent);
}

.storage-jar-body {
  fill: rgba(255, 255, 255, 0.18);
  stroke: color-mix(in srgb, var(--blue) 36%, var(--line));
  stroke-width: 3;
}

.storage-jar-column {
  cursor: pointer;
  outline: none;
}

.storage-jar-column:focus-visible .storage-jar-body,
.storage-jar-column:focus-visible .storage-rosin-body {
  stroke: var(--blue);
  stroke-width: 4;
}

.storage-jar-piece.is-back {
  opacity: 0.64;
}

.storage-jar-piece.is-back .storage-jar-label {
  display: none;
}

.storage-jar-piece.is-back .storage-jar-amount {
  display: none;
}

.storage-jar-svg.is-expanded .storage-jar-piece {
  opacity: 1;
}

.storage-weed-fill,
.storage-weed-fill-top {
  fill: #203e2d;
  opacity: 0.7;
}

.storage-avb-fill,
.storage-avb-fill-top {
  fill: #5d4130;
  opacity: 0.66;
}

.storage-weed-nug-instance {
  filter: drop-shadow(0 2px 1px rgba(23, 42, 27, 0.28));
}

.storage-weed-nug-main {
  fill: var(--storage-nug-main-fill, url("#storage-weed-nug-green"));
  stroke: var(--storage-nug-main-stroke, rgba(21, 46, 24, 0.68));
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.storage-weed-nug-shadow {
  fill: var(--storage-nug-shadow-fill, #173923);
  opacity: 0.6;
}

.storage-weed-nug-lump {
  fill: var(--storage-nug-lump-fill, url("#storage-weed-nug-deep"));
  opacity: 0.54;
}

.storage-weed-nug-instance.is-avb {
  --storage-nug-main-fill: url("#storage-avb-nug-brown");
  --storage-nug-main-stroke: rgba(55, 34, 23, 0.82);
  --storage-nug-shadow-fill: #2f1e16;
  --storage-nug-lump-fill: url("#storage-avb-nug-deep");
  --storage-nug-line-stroke: rgba(73, 44, 28, 0.82);
  --storage-nug-pistil-stroke: #b77b3f;
  filter: drop-shadow(0 2px 1px rgba(58, 36, 24, 0.3));
}

.storage-weed-nug-line {
  fill: none;
  stroke: var(--storage-nug-line-stroke, rgba(22, 63, 28, 0.76));
  stroke-linecap: round;
  stroke-width: 3;
}

.storage-weed-pistil {
  fill: none;
  stroke: var(--storage-nug-pistil-stroke, #d99038);
  stroke-linecap: round;
  stroke-width: 2;
}

.storage-weed-frost {
  fill: rgba(243, 239, 188, 0.9);
  stroke: none;
}

.storage-hash-fill,
.storage-hash-fill-top {
  fill: #4f3527;
  opacity: 0.76;
}

.storage-hash-piece {
  fill: #7b5037;
  stroke: rgba(47, 31, 22, 0.58);
  stroke-width: 1.4;
  filter: drop-shadow(0 2px 1px rgba(39, 24, 17, 0.22));
}

.storage-hash-piece.is-light {
  fill: #9a6f4c;
}

.storage-hash-piece.is-dark {
  fill: #442d22;
}

.storage-hash-piece.is-uniform-dark {
  fill: #201714;
  stroke: rgba(12, 9, 8, 0.78);
}

.storage-hash-piece.is-golden {
  fill: #d6ae62;
  stroke: rgba(146, 103, 42, 0.52);
}

.storage-polen-fill,
.storage-polen-fill-top {
  fill: #caa15d;
  opacity: 0.84;
}

.storage-polen-fill-top {
  fill: #e5c77f;
}

.storage-polen-speck {
  fill: rgba(104, 72, 35, 0.34);
  stroke: none;
}

.storage-rosin-lid {
  fill: color-mix(in srgb, var(--ink) 14%, var(--panel));
  stroke: var(--line);
  stroke-width: 2;
}

.storage-rosin-lid-band {
  fill: color-mix(in srgb, #d9aa35 40%, transparent);
}

.storage-rosin-body {
  fill: rgba(255, 255, 255, 0.2);
  stroke: color-mix(in srgb, var(--blue) 32%, var(--line));
  stroke-width: 3;
}

.storage-rosin-fill,
.storage-rosin-fill-top {
  fill: #d69a25;
  opacity: 0.9;
}

.storage-rosin-fill-top {
  fill: #f2c85c;
}

.storage-rosin-glow {
  fill: rgba(255, 231, 129, 0.5);
  stroke: none;
}

.storage-jar-shadow {
  fill: rgba(29, 37, 32, 0.07);
}

.storage-jar-amount {
  fill: var(--ink);
  font-size: 18px;
  font-weight: 900;
}

.storage-jar-label {
  fill: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.storage-bottle-cap {
  fill: color-mix(in srgb, var(--ink) 14%, var(--panel));
  stroke: var(--line);
  stroke-width: 2;
}

.storage-bottle-cap.is-gorilla {
  fill: color-mix(in srgb, var(--ink) 18%, var(--panel));
}

.storage-bottle-neck {
  fill: rgba(255, 255, 255, 0.18);
  stroke: color-mix(in srgb, var(--blue) 34%, var(--line));
  stroke-width: 2;
}

.storage-bottle-body {
  fill: rgba(255, 255, 255, 0.16);
  stroke: color-mix(in srgb, var(--blue) 38%, var(--line));
  stroke-linejoin: round;
  stroke-width: 3;
}

.storage-bottle-body.is-gorilla {
  stroke-width: 3.4;
}

.storage-bottle-fill,
.storage-bottle-fill-top {
  opacity: 0.72;
}

.storage-bottle-bubble {
  opacity: 0.48;
}

.storage-bottle-highlight {
  fill: none;
  stroke: rgba(255, 255, 255, 0.74);
  stroke-linecap: round;
  stroke-width: 6;
}

.storage-gum-pack-lid {
  fill: color-mix(in srgb, var(--ink) 14%, var(--panel));
  stroke: var(--line);
  stroke-width: 2;
}

.storage-gum-pack-body {
  fill: rgba(255, 255, 255, 0.22);
  stroke: color-mix(in srgb, var(--ink) 26%, var(--line));
  stroke-width: 2;
}

.storage-gum-pack-fill {
  opacity: 0.42;
}

.storage-gum-piece {
  fill: #f8fafc;
  stroke: rgba(118, 130, 150, 0.34);
  stroke-width: 1.1;
  filter: drop-shadow(0 2px 1px rgba(55, 65, 81, 0.16));
}

.storage-gum-piece.is-light {
  fill: #ffffff;
}

.storage-gum-piece.is-shadow {
  fill: #e8edf3;
}

.storage-bottle-capacity {
  fill: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.storage-bottle-label-backing {
  fill: rgba(255, 255, 255, 0.86);
  stroke: rgba(29, 37, 32, 0.14);
  stroke-width: 1;
}

.storage-bottle-label-image {
  opacity: 0.96;
}

.storage-insights-card,
.storage-current-card,
.storage-average-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.storage-insights-card h2,
.storage-current-card h2,
.storage-average-card h2 {
  margin: 0;
  font-size: 0.95rem;
}

.storage-insights-card small,
.storage-average-card small {
  color: var(--muted);
}

.storage-daily-consumption {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.storage-daily-consumption article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft-glass);
}

.storage-daily-consumption span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.storage-daily-consumption strong {
  color: var(--ink);
  font-size: 1.45rem;
  line-height: 1;
}

.storage-recent-consumption {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 10px;
}

.storage-recent-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-glass);
  animation: storage-recent-cycle 12s ease-in-out infinite;
  animation-delay: calc(var(--cycle-index) * -2.4s);
}

.storage-recent-heading {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
}

.storage-recent-heading h3 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.12;
}

.storage-recent-heading i {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 999px;
}

.storage-recent-heading span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
}

.storage-recent-sparkline {
  display: block;
  width: 100%;
  min-height: 72px;
}

.storage-recent-sparkline polyline {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.storage-recent-sparkline line {
  stroke: var(--line);
  stroke-width: 1;
}

.storage-recent-sparkline text {
  fill: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.storage-recent-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.storage-recent-stats span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px;
  border-radius: 8px;
  background: var(--soft-glass);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.storage-recent-stats strong {
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1;
}

@keyframes storage-recent-cycle {
  0%,
  72%,
  100% {
    border-color: var(--line);
    transform: translateY(0);
  }

  12%,
  24% {
    border-color: rgba(79, 131, 165, 0.55);
    transform: translateY(-2px);
  }
}

.storage-current,
.storage-averages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}

.storage-current article,
.storage-averages article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  border-radius: 8px;
  background: var(--soft-glass);
}

.storage-current span,
.storage-averages span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.storage-current i,
.storage-averages i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
}

.storage-current strong,
.storage-averages strong {
  overflow: hidden;
  font-size: 1.2rem;
  text-overflow: ellipsis;
}

.storage-stock-line {
  stroke-width: 4;
}

.storage-stock-line.is-striped-accent {
  stroke-dasharray: 8 8;
  stroke-linecap: butt;
}

.storage-positive-spike {
  stroke-linecap: round;
  stroke-width: 8;
}

.storage-positive-spike.is-striped-accent {
  stroke-dasharray: 7 7;
  stroke-linecap: butt;
  stroke-width: 8;
}

.storage-help {
  color: var(--muted);
}

.meal-plan-view {
  display: grid;
  gap: 12px;
}

.menu-view {
  display: grid;
  gap: 12px;
  padding-bottom: 72px;
}

.menu-selection-card,
.menu-editor-card,
.menu-meal-card,
.menu-log-item {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.menu-selection-card {
  border-color: color-mix(in srgb, #4fca70 46%, var(--line));
  background: color-mix(in srgb, #4fca70 12%, var(--panel));
}

.menu-heading,
.menu-section-title {
  display: grid;
  gap: 4px;
}

.menu-heading span,
.menu-section-title span,
.menu-meal-card span,
.menu-log-item span,
.menu-log-item small {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.menu-heading span,
.menu-section-title span {
  text-transform: uppercase;
}

.menu-heading strong,
.menu-section-title strong {
  color: var(--ink);
  font-size: 1.2rem;
  line-height: 1.1;
}

.menu-log-form,
.menu-meal-form {
  display: grid;
  gap: 9px;
}

.menu-log-form label,
.menu-meal-form label {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.menu-date-control {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.menu-date-control input[type="date"] {
  display: block;
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  height: 48px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: var(--input-bg);
  color: var(--ink);
  font: inherit;
  line-height: 48px;
  text-align: left;
}

.menu-date-control input[type="date"]::-webkit-date-and-time-value {
  min-width: 0;
  text-align: left;
}

.menu-date-control input[type="date"]::-webkit-calendar-picker-indicator {
  margin: 0;
}

.menu-log-form > input,
.menu-log-form > select,
.menu-meal-form > input,
.menu-meal-form > textarea,
.menu-macro-grid input {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
}

.menu-log-form > input,
.menu-log-form > select,
.menu-meal-form > input,
.menu-macro-grid input {
  height: 46px;
  padding: 0 12px;
}

.menu-meal-form > textarea {
  min-height: 92px;
  resize: vertical;
  padding: 11px 12px;
  line-height: 1.35;
}

.menu-macro-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.menu-macro-grid label {
  display: grid;
  gap: 7px;
}

.menu-log-form > button,
.menu-meal-form > button {
  min-height: 46px;
  border: 0;
  border-radius: 8px;
  background: #3fbf63;
  color: #102316;
  font-weight: 900;
  cursor: pointer;
}

.menu-log-form > button:disabled {
  cursor: not-allowed;
}

@supports (-webkit-touch-callout: none) {
  .menu-date-control input[type="date"] {
    min-height: 48px;
    line-height: normal;
    -webkit-appearance: none;
    appearance: none;
  }
}

.menu-list,
.menu-log-list {
  display: grid;
  gap: 10px;
}

.menu-meal-card strong,
.menu-log-item strong {
  color: var(--ink);
  font-size: 1.04rem;
  overflow-wrap: anywhere;
}

.menu-meal-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.menu-delete-button {
  justify-self: start;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--red) 36%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--red) 10%, var(--panel));
  color: var(--red);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

.menu-heading-card,
.menu-toolbar,
.menu-category-card,
.menu-dish-card,
.menu-totals article {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.menu-heading-card {
  position: relative;
  overflow: hidden;
  padding: 16px 18px;
  border-color: color-mix(in srgb, #4fca70 46%, var(--line));
  background: linear-gradient(110deg, color-mix(in srgb, #4fca70 18%, var(--panel)), var(--panel));
}

.menu-heading-card::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 100%;
  background: #4fca70;
  content: "";
}

.menu-heading-card span,
.menu-toolbar span,
.menu-category-card span,
.menu-dish-card span,
.menu-totals span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

.menu-heading-card strong,
.menu-toolbar strong,
.menu-category-card strong,
.menu-dish-card strong,
.menu-totals strong {
  color: var(--ink);
  font-size: 1.18rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.menu-toolbar {
  grid-template-columns: auto 1fr;
  align-items: center;
}

.menu-back-button,
.menu-secondary-button {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft-glass);
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}

.menu-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.menu-category-card,
.menu-dish-card {
  width: 100%;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.menu-category-card {
  --category-accent: #4fca70;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 96px;
  padding: 14px;
  border-color: color-mix(in srgb, var(--category-accent) 38%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--category-accent) 9%, var(--panel)), var(--panel) 72%);
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--category-accent) 24%, transparent), var(--shadow);
  transition: border-color 150ms ease, transform 150ms ease, background 150ms ease;
}

.menu-category-breakfast {
  --category-accent: #f0b34d;
}

.menu-category-lunch {
  --category-accent: #65bd7b;
}

.menu-category-dinner {
  --category-accent: #79a8d8;
}

.menu-category-snack {
  --category-accent: #d58485;
}

.menu-category-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--category-accent) 50%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--category-accent) 18%, var(--panel));
  color: var(--category-accent);
}

.menu-category-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.menu-category-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.menu-category-card .menu-category-count {
  width: fit-content;
  padding: 3px 7px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--category-accent) 14%, var(--soft-glass));
  color: color-mix(in srgb, var(--category-accent) 72%, var(--ink));
  font-size: 0.72rem;
  line-height: 1.2;
}

.menu-category-arrow {
  color: color-mix(in srgb, var(--category-accent) 72%, var(--muted));
  font-size: 1.25rem;
  font-weight: 800;
  transition: transform 150ms ease;
}

.menu-category-card:hover,
.menu-dish-card:hover {
  border-color: color-mix(in srgb, #4fca70 64%, var(--line));
}

.menu-category-card:hover {
  border-color: color-mix(in srgb, var(--category-accent) 72%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--category-accent) 14%, var(--panel)), var(--panel) 72%);
  transform: translateY(-1px);
}

.menu-category-card:hover .menu-category-arrow {
  transform: translateX(2px);
}

.menu-sheet-status {
  position: relative;
  padding-left: 31px;
}

.menu-sheet-status::before {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  content: "";
  transform: translateY(-50%);
}

.menu-totals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.menu-totals article {
  box-shadow: none;
}

.menu-ingredient-form,
.menu-add-form,
.menu-library-ingredient-form {
  display: grid;
  gap: 10px;
}

.menu-add-form label,
.menu-library-ingredient-form label {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.menu-add-form input,
.menu-add-form select,
.menu-add-form textarea,
.menu-library-ingredient-form input,
.menu-library-ingredient-form select {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
}

.menu-add-form input,
.menu-add-form select,
.menu-library-ingredient-form input,
.menu-library-ingredient-form select {
  height: 46px;
  padding: 0 12px;
}

.menu-add-form textarea {
  min-height: 92px;
  resize: vertical;
  padding: 11px 12px;
  line-height: 1.35;
}

.menu-ingredient-list {
  display: grid;
  gap: 10px;
}

.menu-ingredient-row {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft-glass);
}

.menu-ingredient-row > input,
.menu-ingredient-row select,
.menu-ingredient-row label input,
.menu-ingredient-amount input {
  min-width: 0;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
}

.menu-ingredient-amount,
.menu-ingredient-macros {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.menu-ingredient-macros label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.menu-ingredient-row > span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.menu-ingredient-form > button[type="submit"],
.menu-add-form > button,
.menu-library-ingredient-form > button[type="submit"],
.menu-steps-form > button,
.menu-add-dish-button {
  min-height: 46px;
  border: 0;
  border-radius: 8px;
  background: #3fbf63;
  color: #102316;
  font-weight: 900;
  cursor: pointer;
}

.menu-add-dish-button {
  width: 100%;
}

.menu-full-button {
  width: 100%;
}

.menu-scan-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.menu-scan-row button,
.menu-scan-button {
  display: grid;
  place-items: center;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--green) 34%, var(--line));
  border-radius: 8px;
  background: var(--soft-glass);
  color: var(--green);
  font-size: 0.9rem;
  font-weight: 900;
  text-align: center;
  cursor: pointer;
}

.menu-scan-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 9px;
}

.menu-scan-button-primary {
  min-height: 58px;
  border-color: color-mix(in srgb, #3fbf63 72%, var(--line));
  background: linear-gradient(180deg, #53d276, #35b75b);
  color: #ffffff;
  text-shadow: 0 1px 2px rgb(0 0 0 / 28%);
  box-shadow: 0 12px 26px rgb(63 191 99 / 24%);
}

.menu-library-ingredient-form .menu-scan-button-primary {
  color: #ffffff;
}

.menu-scan-button-primary:hover,
.menu-scan-button-primary:focus-visible {
  color: #ffffff;
  background: linear-gradient(180deg, #65df86, #42c767);
}

.menu-library-ingredient-form .menu-scan-button-primary:hover,
.menu-library-ingredient-form .menu-scan-button-primary:focus-visible {
  color: #ffffff;
}

.menu-barcode-guide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--green) 20%, var(--line));
  border-radius: 8px;
  background: rgb(255 255 255 / 3%);
}

.menu-barcode-card {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
  padding: 10px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.menu-barcode-card.is-correct {
  border-color: color-mix(in srgb, #3fbf63 44%, var(--line));
  color: #9bf0b0;
}

.menu-barcode-card.is-wrong {
  border-color: color-mix(in srgb, #e35050 44%, var(--line));
  color: #ffaaaa;
}

.menu-phone-icon {
  position: relative;
  width: 58px;
  height: 82px;
  border: 3px solid color-mix(in srgb, var(--ink) 70%, var(--line));
  border-radius: 8px;
  background: #07120d;
}

.menu-phone-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 14px;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  transform: translateX(-50%);
}

.menu-camera-dot {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 46%, transparent);
  transform: translateX(-50%);
}

.menu-barcode-icon {
  position: absolute;
  left: 50%;
  top: 22px;
  width: 34px;
  height: 38px;
  border-radius: 3px;
  background:
    linear-gradient(90deg,
      #f7fff9 0 5%,
      transparent 5% 9%,
      #f7fff9 9% 14%,
      transparent 14% 19%,
      #f7fff9 19% 29%,
      transparent 29% 35%,
      #f7fff9 35% 39%,
      transparent 39% 45%,
      #f7fff9 45% 56%,
      transparent 56% 63%,
      #f7fff9 63% 68%,
      transparent 68% 75%,
      #f7fff9 75% 84%,
      transparent 84% 90%,
      #f7fff9 90% 100%);
  transform: translateX(-50%);
}

.menu-barcode-icon.is-rotated {
  top: 27px;
  transform: translateX(-50%) rotate(90deg);
}

.menu-barcode-number-line {
  position: absolute;
  left: 50%;
  top: 63px;
  width: 32px;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, #f7fff9 72%, transparent);
  transform: translateX(-50%);
}

.menu-wrong-mark {
  position: absolute;
  inset: 15px 11px;
}

.menu-wrong-mark::before,
.menu-wrong-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 4px;
  border-radius: 999px;
  background: #e35050;
  transform-origin: center;
}

.menu-wrong-mark::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.menu-wrong-mark::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.menu-library-ingredient-form input.menu-scan-file {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.menu-name-popup {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgb(7 18 13 / 72%);
  backdrop-filter: blur(4px);
}

.menu-name-popup-panel {
  display: grid;
  gap: 14px;
  width: min(100%, 430px);
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--green) 28%, var(--line));
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 18px 48px rgb(0 0 0 / 32%);
}

.menu-name-popup-heading {
  display: grid;
  gap: 3px;
}

.menu-name-popup-heading span {
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.menu-name-popup-heading strong {
  color: var(--ink);
  font-size: 1.15rem;
}

.menu-name-popup-panel label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.menu-name-popup-panel input,
.menu-name-popup-panel select {
  min-width: 0;
  width: 100%;
  min-height: 44px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
  font: inherit;
}

.menu-name-popup-panel input[readonly] {
  color: var(--muted);
}

.menu-name-popup-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.menu-name-popup-actions button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft-glass);
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
}

.menu-name-popup-actions button[data-name-choice="accept"] {
  border-color: #3fbf63;
  background: #3fbf63;
  color: #102316;
}

.menu-step-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 1.25rem;
  color: var(--muted);
  line-height: 1.45;
}

.menu-steps-form {
  display: grid;
  gap: 10px;
}

.menu-steps-form label {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.menu-steps-form textarea {
  min-width: 0;
  width: 100%;
  min-height: 220px;
  resize: vertical;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
  line-height: 1.4;
}

.placeholder-feature-view {
  display: grid;
  gap: 12px;
}

.placeholder-feature-heading {
  display: grid;
  gap: 5px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.placeholder-feature-heading span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

.placeholder-feature-heading strong {
  color: var(--ink);
  font-size: 1.8rem;
  line-height: 1;
}

.daily-schedule-view {
  --schedule-accent: #b28b4f;
  display: grid;
  gap: 12px;
  padding-bottom: 64px;
}

.schedule-toolbar,
.schedule-sleep-panel,
.schedule-agenda,
.schedule-timeline-panel,
.weather-forecast-panel,
.schedule-timezone-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.placeholder-feature-heading h2 {
  margin: 0;
  font-size: 1.35rem;
}

.menu-dish-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  cursor: default;
}

.menu-dish-open {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.menu-dish-card-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.food-image {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #57ad74 35%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, #57ad74 12%, var(--soft-glass));
}

.food-image-detail {
  width: clamp(132px, 34vw, 184px);
  height: clamp(132px, 34vw, 184px);
  margin-inline: auto;
}

.food-image-fallback {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  font-size: 1.7rem;
  line-height: 1;
}

.food-image-detail .food-image-fallback {
  font-size: 4.4rem;
}

.food-image > .food-image-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--panel);
}

.food-image-fallback img {
  display: block;
  width: 78%;
  height: 78%;
  object-fit: contain;
}

.food-icon-drink,
.food-icon-fish {
  background: color-mix(in srgb, #67b7d1 16%, var(--soft-glass));
}

.food-icon-fruit,
.food-icon-dessert,
.food-icon-meat {
  background: color-mix(in srgb, #d77c77 14%, var(--soft-glass));
}

.food-icon-bread,
.food-icon-coffee,
.food-icon-bowl,
.food-icon-soup {
  background: color-mix(in srgb, #d5a65b 16%, var(--soft-glass));
}

.food-image-editor {
  display: grid;
  justify-items: center;
  gap: 9px;
  padding-block: 4px;
}

.food-image-editor-preview {
  min-height: 132px;
}

.food-image-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

.menu-hub-view,
.menu-tab-host {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.menu-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft-glass);
}

.menu-tabs button {
  min-height: 42px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
  cursor: pointer;
}

.menu-tabs button.is-active {
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 1px 4px rgb(0 0 0 / 10%);
}

.food-editable-name {
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: text;
}

.food-category-field {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-inline: auto;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--soft-glass);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 850;
  cursor: pointer;
}

.food-category-field i {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.food-picker-layer {
  position: fixed;
  z-index: 110;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgb(4 10 8 / 72%);
  backdrop-filter: blur(5px);
}

.food-picker-panel {
  position: relative;
  display: grid;
  gap: 12px;
  width: min(100%, 620px);
  max-height: min(760px, calc(100dvh - 36px));
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 22px 60px rgb(0 0 0 / 34%);
}

.food-picker-panel.is-scrollable {
  grid-template-rows: auto auto minmax(0, 1fr);
  height: min(760px, calc(100dvh - 36px));
}

.food-picker-panel > header {
  display: grid;
  gap: 3px;
  padding-right: 42px;
}

.food-picker-panel > header span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 850;
  text-transform: uppercase;
}

.food-picker-panel > header strong {
  color: var(--ink);
  font-size: 1.2rem;
}

.food-picker-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--soft-glass);
  color: var(--ink);
  cursor: pointer;
}

.food-picker-search,
.food-name-editor label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.food-picker-search[hidden] {
  display: none;
}

.food-picker-search input,
.food-name-editor input {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--input-bg);
  color: var(--ink);
  font: inherit;
}

.food-picker-results {
  min-height: 0;
}

.food-picker-panel.is-scrollable .food-picker-results {
  overflow-y: scroll;
  overscroll-behavior: contain;
  scrollbar-color: #6a8c7d color-mix(in srgb, var(--line) 64%, transparent);
  scrollbar-gutter: stable;
  scrollbar-width: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.food-picker-panel.is-scrollable .food-picker-results::-webkit-scrollbar {
  width: 11px;
}

.food-picker-panel.is-scrollable .food-picker-results::-webkit-scrollbar-track {
  border-radius: 8px;
  background: color-mix(in srgb, var(--line) 64%, transparent);
}

.food-picker-panel.is-scrollable .food-picker-results::-webkit-scrollbar-thumb {
  border: 2px solid color-mix(in srgb, var(--line) 64%, transparent);
  border-radius: 8px;
  background: #6a8c7d;
}

.food-picker-panel.is-scrollable .food-picker-results::-webkit-scrollbar-thumb:hover {
  background: #4e7563;
}

.food-icon-picker-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.food-icon-choice {
  display: grid;
  min-width: 0;
  min-height: 88px;
  place-items: center;
  gap: 6px;
  padding: 8px 5px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--soft-glass);
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
}

.food-icon-choice img {
  width: 43px;
  height: 43px;
  object-fit: contain;
}

.food-icon-choice span {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.food-icon-choice.is-selected,
.food-category-choice.is-selected {
  border-color: #3f8465;
  background: color-mix(in srgb, #3f8465 13%, var(--panel));
}

.food-category-picker-list {
  display: grid;
  gap: 5px;
}

.food-category-choice {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--soft-glass);
  color: var(--ink);
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.food-category-choice small {
  color: #3f8465;
  font-size: 0.68rem;
}

.food-icon-recommendation {
  display: grid;
  gap: 18px;
}

.food-icon-recommendation-preview {
  display: grid;
  justify-items: center;
  gap: 9px;
  padding: 18px;
  border-block: 1px solid var(--line);
}

.food-icon-recommendation-preview img {
  width: 112px;
  height: 112px;
  object-fit: contain;
}

.food-icon-recommendation-preview strong {
  color: var(--ink);
  font-size: 1.05rem;
}

.food-icon-recommendation-actions,
.food-name-editor form > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.food-icon-recommendation-actions button,
.food-name-editor button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--soft-glass);
  color: var(--ink);
  font-weight: 850;
  cursor: pointer;
}

.food-icon-recommendation-actions button:last-child,
.food-name-editor button[type="submit"] {
  border-color: #3f8465;
  background: #3f8465;
  color: #fff;
}

.food-name-editor form {
  display: grid;
  gap: 14px;
}

.food-picker-empty {
  margin: 0;
  padding: 18px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 520px) {
  .food-picker-panel.is-scrollable {
    height: calc(100dvh - 24px);
  }

  .food-icon-picker-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.food-image-action,
.food-image-default {
  display: grid;
  min-height: 38px;
  place-items: center;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--soft-glass);
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 850;
  cursor: pointer;
}

.food-image-action:hover,
.food-image-default:hover {
  border-color: color-mix(in srgb, #57ad74 55%, var(--line));
  background: color-mix(in srgb, #57ad74 10%, var(--soft-glass));
}

.menu-add-form input.food-image-file,
.menu-library-ingredient-form input.food-image-file,
input.food-image-file {
  position: fixed;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.food-image-status {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
  text-align: center;
}

.schedule-sleep-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-color: color-mix(in srgb, var(--blue) 38%, var(--line));
}

.schedule-sleep-selector {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft-glass);
}

.schedule-sleep-selector label {
  min-width: 0;
  cursor: pointer;
}

.schedule-sleep-selector input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.schedule-sleep-selector span {
  display: grid;
  min-height: 42px;
  place-items: center;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 900;
  text-align: center;
}

.schedule-sleep-selector input:checked + span {
  background: var(--panel);
  color: var(--blue);
  box-shadow: 0 2px 10px rgba(45, 41, 30, 0.1);
}

.schedule-sleep-selector input:focus-visible + span {
  outline: 3px solid color-mix(in srgb, var(--blue) 72%, transparent);
  outline-offset: 3px;
}

.schedule-regular-sleep,
.schedule-segment-lengths,
.schedule-manual-sleep {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.schedule-regular-sleep label,
.schedule-segment-lengths label,
.schedule-manual-sleep label,
.schedule-timezone-panel label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 900;
}

.schedule-regular-sleep input,
.schedule-segment-lengths input,
.schedule-manual-sleep input,
.schedule-timezone-panel select,
.schedule-timezone-panel input {
  min-width: 0;
  width: 100%;
  height: 46px;
  padding: 0 38px 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
}

.schedule-regular-sleep input[type="time"]::-webkit-date-and-time-value,
.schedule-manual-sleep input[type="time"]::-webkit-date-and-time-value {
  min-width: 0;
  text-align: left;
}

.schedule-regular-sleep input[type="time"]::-webkit-calendar-picker-indicator,
.schedule-manual-sleep input[type="time"]::-webkit-calendar-picker-indicator {
  margin-right: -24px;
  padding: 10px;
}

.schedule-segment-lengths label > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.schedule-segment-lengths small {
  color: var(--muted);
  font-size: 0.76rem;
}

.schedule-bed-now-row {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 2px;
}

.schedule-sleep-now-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: min(100%, 520px);
  min-width: 0;
}

.schedule-bed-now-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 55%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 12%, var(--panel));
  color: var(--blue);
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
}

.schedule-wake-now-button {
  border-color: color-mix(in srgb, #e29a39 58%, var(--line));
  background: color-mix(in srgb, #e29a39 13%, var(--panel));
  color: color-mix(in srgb, #d5841e 88%, var(--ink));
}

.schedule-bed-now-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.schedule-bed-now-button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.schedule-bed-now-row small {
  max-width: 280px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
  text-align: right;
}

.schedule-segmented-summary {
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 35%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 8%, var(--soft-glass));
  color: var(--blue);
  font-size: 0.84rem;
  font-weight: 800;
}

.schedule-short-night {
  display: grid;
  gap: 11px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--red) 55%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--red) 8%, var(--panel));
}

.schedule-short-night p {
  margin: 0;
  color: var(--red);
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.4;
}

.schedule-timezone-panel {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.schedule-location-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.schedule-location-heading > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.schedule-location-heading span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.schedule-location-heading strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 0.98rem;
}

.schedule-location-heading button,
.schedule-city-picker > button {
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--blue) 42%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 9%, var(--soft-glass));
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

.schedule-city-picker {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 5%, var(--soft-glass));
}

.schedule-city-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.schedule-city-picker label,
.schedule-city-picker [data-location-results-wrap] {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 900;
}

.schedule-city-picker p {
  min-height: 1.1em;
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.schedule-city-picker .schedule-use-city {
  border-color: color-mix(in srgb, var(--green) 65%, var(--line));
  background: var(--green);
  color: #fff;
}

.schedule-timezone-panel small {
  color: var(--muted);
  line-height: 1.4;
}

.schedule-timezone-panel a {
  color: var(--blue);
  font-weight: 800;
}

.schedule-regular-sleep[hidden],
.schedule-segment-lengths[hidden],
.schedule-segmented-summary[hidden],
.schedule-short-night[hidden],
.schedule-city-picker[hidden],
.schedule-timezone-panel [hidden] {
  display: none;
}

.schedule-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px;
  border-color: color-mix(in srgb, var(--schedule-accent) 50%, var(--line));
  background: linear-gradient(120deg, color-mix(in srgb, var(--schedule-accent) 14%, var(--panel)), var(--panel) 70%);
}

.schedule-day-heading {
  display: grid;
  gap: 4px;
  min-width: 0;
  align-content: center;
}

.schedule-day-heading span,
.schedule-section-heading > div > span,
.schedule-editor-panel header span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.schedule-day-heading strong {
  color: var(--ink);
  font-size: 1.12rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.schedule-add-button {
  display: inline-flex;
  min-width: 88px;
  height: 46px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--green) 70%, var(--line));
  border-radius: 8px;
  background: var(--green);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.schedule-add-button svg {
  width: 18px;
  height: 18px;
}

.schedule-date-control {
  grid-column: 1 / -1;
  width: 100%;
}

.schedule-date-control input {
  min-width: 0;
  width: 100%;
  height: 48px;
  padding: 0 38px 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
  font-weight: 800;
}

.schedule-date-control input::-webkit-date-and-time-value {
  min-width: 0;
  text-align: center;
}

.schedule-date-control input::-webkit-calendar-picker-indicator {
  margin-right: -24px;
  padding: 10px;
}

.schedule-agenda,
.schedule-timeline-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.schedule-section-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.schedule-section-heading > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.schedule-section-heading strong {
  color: var(--ink);
  font-size: 1.08rem;
}

.schedule-section-heading > button {
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--schedule-accent) 42%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--schedule-accent) 10%, var(--soft-glass));
  color: color-mix(in srgb, var(--schedule-accent) 76%, var(--ink));
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
}

.schedule-event-list {
  display: grid;
  gap: 8px;
}

.schedule-event-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  min-width: 0;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 6%, var(--soft-glass));
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.schedule-event-card:hover {
  border-color: color-mix(in srgb, var(--blue) 55%, var(--line));
}

.schedule-timeline-panel .schedule-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(176px, auto) auto auto;
}

.schedule-graph-style {
  display: grid;
  gap: 4px;
  min-width: 176px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
}

.schedule-graph-style select {
  min-width: 0;
  height: 36px;
  padding: 0 30px 0 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--input-bg);
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 800;
}

.schedule-grid-toggle {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
  cursor: pointer;
}

.schedule-grid-toggle input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--blue);
}

.schedule-temperature-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 11px;
  border-left: 3px solid var(--blue);
  background: color-mix(in srgb, var(--blue) 7%, var(--soft-glass));
}

.schedule-temperature-summary[hidden] {
  display: none;
}

.schedule-temperature-summary span {
  color: var(--muted);
  font-size: 0.77rem;
  font-weight: 800;
}

.schedule-temperature-summary strong {
  color: var(--ink);
  font-size: 1.05rem;
}

.schedule-event-card.is-sleep {
  border-color: color-mix(in srgb, var(--blue) 48%, var(--line));
  background: color-mix(in srgb, var(--blue) 11%, var(--panel));
  cursor: default;
}

.schedule-event-card.is-sleep > svg {
  color: var(--blue);
}

.schedule-event-card > time {
  display: grid;
  gap: 2px;
  color: var(--blue);
  font-size: 0.88rem;
  font-weight: 900;
}

.schedule-event-card > time small {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
}

.schedule-event-card > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.schedule-event-card strong,
.schedule-event-card small {
  overflow-wrap: anywhere;
}

.schedule-event-card strong {
  font-size: 0.96rem;
}

.schedule-event-card small {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.3;
}

.schedule-event-card > svg {
  width: 17px;
  height: 17px;
  color: var(--muted);
}

.schedule-empty-day {
  display: grid;
  gap: 4px;
  padding: 18px 14px;
  border: 1px dashed color-mix(in srgb, var(--schedule-accent) 42%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--schedule-accent) 6%, var(--empty-glass));
}

.schedule-empty-day strong {
  color: var(--ink);
  font-size: 0.94rem;
}

.schedule-empty-day span {
  color: var(--muted);
  font-size: 0.82rem;
}

.schedule-now-legend {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.schedule-now-legend i {
  width: 3px;
  height: 17px;
  border-radius: 2px;
  background: var(--red);
}

.schedule-timeline-scroll {
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: color-mix(in srgb, var(--schedule-accent) 50%, var(--line)) transparent;
  scrollbar-width: thin;
}

.schedule-timeline-canvas {
  position: relative;
  min-width: 780px;
  height: 250px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--schedule-accent) 30%, var(--line));
  border-radius: 8px;
  background: var(--input-bg);
}

.schedule-sky {
  position: absolute;
  z-index: 0;
  inset: 0 0 39px;
  display: flex;
  overflow: hidden;
  background:
    radial-gradient(circle at 4% 18%, rgba(255, 255, 255, 0.8) 0 1px, transparent 1.4px),
    radial-gradient(circle at 11% 43%, rgba(255, 255, 255, 0.52) 0 1px, transparent 1.5px),
    radial-gradient(circle at 18% 72%, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.4px),
    radial-gradient(circle at 83% 26%, rgba(255, 255, 255, 0.64) 0 1px, transparent 1.5px),
    radial-gradient(circle at 91% 60%, rgba(255, 255, 255, 0.78) 0 1px, transparent 1.4px),
    radial-gradient(circle at 97% 84%, rgba(255, 255, 255, 0.48) 0 1px, transparent 1.5px),
    linear-gradient(to bottom, #04070c, #101828 70%, #172236);
}

.schedule-neutral-sky {
  position: absolute;
  z-index: 0;
  inset: 0 0 39px;
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--panel) 82%, var(--blue)), color-mix(in srgb, var(--panel) 95%, var(--blue)));
}

.daily-schedule-view:not(.sleep-only-view) .schedule-sleep-panel,
.weather-only-view .schedule-sync-status,
.weather-only-view .schedule-agenda,
.weather-only-view .schedule-editor,
.weather-only-view .schedule-add-button,
.weather-only-view .schedule-graph-style {
  display: none;
}

.sleep-only-view .schedule-toolbar,
.sleep-only-view .schedule-sync-status,
.sleep-only-view .schedule-agenda,
.sleep-only-view .schedule-timeline-panel,
.sleep-only-view .schedule-editor,
.sleep-only-view .schedule-add-button {
  display: none;
}

.weather-only-view .schedule-timeline-panel .schedule-section-heading {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.weather-only-view .schedule-toolbar {
  grid-template-columns: 1fr;
}

.weather-only-view .schedule-date-control {
  grid-column: 1;
}

.weather-only-view .schedule-timeline-event {
  display: none;
}

.schedule-daylight-wave {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.schedule-daylight-wave path {
  fill: url(#schedule-daylight-gradient);
  stroke: none;
}

.schedule-night-wave {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.schedule-night-fill {
  fill: #070c14;
  stroke: none;
}

.schedule-night-stars {
  fill: url(#schedule-night-stars);
  opacity: 0.72;
  stroke: none;
}

.schedule-twilight-glow {
  opacity: 0.7;
  pointer-events: none;
  stroke: none;
  stroke-width: 0;
}

.schedule-day-edge-haze {
  fill: none;
  stroke: url(#schedule-sun-track-gradient);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 54;
  opacity: 0.2;
  filter: url(#schedule-day-haze-blur);
}

.schedule-day-edge-feather {
  fill: none;
  stroke: url(#schedule-sun-track-gradient);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 25;
  opacity: 0.3;
  filter: url(#schedule-day-feather-blur);
}

.schedule-sun-track {
  fill: none;
  stroke: url(#schedule-sun-track-gradient);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  opacity: 0.78;
  filter: none;
}

.schedule-twilight-dot {
  fill: #ffac51;
  stroke: rgba(255, 250, 221, 0.96);
  stroke-width: 2;
  filter: drop-shadow(0 0 5px rgba(255, 139, 68, 0.92));
}

.schedule-sky-hour {
  position: relative;
  z-index: 1;
  flex: 0 0 calc(100% / 24);
  height: 100%;
  overflow: hidden;
  background: transparent;
}

.schedule-sky-hour > i {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0.78;
}

.schedule-sky-hour.weather-cloudy > i {
  background: linear-gradient(to bottom, rgba(101, 116, 128, 0.74), rgba(156, 169, 178, 0.5) 58%, transparent);
}

.schedule-sky-hour.weather-fog > i {
  background: repeating-linear-gradient(to bottom, rgba(192, 201, 207, 0.78) 0 13px, rgba(132, 147, 157, 0.62) 13px 18px);
}

.schedule-sky-hour.weather-drizzle > i,
.schedule-sky-hour.weather-rain > i {
  background: linear-gradient(to bottom, rgba(71, 86, 99, 0.82), rgba(66, 112, 143, 0.48));
}

.schedule-sky-hour.weather-drizzle > i {
  opacity: 0.48;
}

.schedule-sky-hour.weather-snow > i {
  background: linear-gradient(to bottom, rgba(151, 168, 178, 0.74), rgba(221, 232, 238, 0.54));
}

.schedule-sky-hour.weather-storm > i {
  background: repeating-linear-gradient(112deg, rgba(38, 43, 52, 0.9) 0 14px, rgba(104, 109, 124, 0.82) 14px 18px, rgba(30, 35, 44, 0.9) 18px 31px);
}

.schedule-sky-hour[class*="weather-"] > i {
  display: none;
}

.schedule-weather-canvas {
  position: absolute;
  z-index: 3;
  inset: 0 0 39px;
  width: 100%;
  height: calc(100% - 39px);
  pointer-events: none;
  image-rendering: auto;
}

.schedule-hour-grid {
  position: absolute;
  top: 0;
  bottom: 39px;
  left: var(--hour-position);
  width: 1px;
  background: color-mix(in srgb, var(--line) 72%, transparent);
  z-index: 5;
}

.schedule-hour-grid-minor {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 39px;
  left: var(--hour-position);
  width: 1px;
  background: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--line) 62%, transparent) 0 2px,
    transparent 2px 6px
  );
  opacity: 0.72;
}

.schedule-hour-label {
  position: absolute;
  bottom: 12px;
  left: clamp(25px, var(--hour-position), calc(100% - 25px));
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  transform: translateX(-50%);
  z-index: 9;
}

.schedule-timeline-track {
  position: absolute;
  right: 0;
  bottom: 43px;
  left: 0;
  height: 2px;
  background: color-mix(in srgb, var(--schedule-accent) 55%, var(--line));
  z-index: 6;
}

.schedule-timeline-event {
  position: absolute;
  bottom: 43px;
  left: var(--event-start);
  width: max(2px, var(--event-duration));
  height: 50px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  z-index: 7;
}

.schedule-timeline-canvas.hide-hour-grid .schedule-hour-grid,
.schedule-timeline-canvas.hide-hour-grid .schedule-hour-grid-minor {
  opacity: 0;
}

.weather-forecast-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.weather-range-select {
  display: grid;
  gap: 4px;
  min-width: 148px;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 850;
}

.weather-range-select select {
  min-width: 0;
  height: 36px;
  padding: 0 30px 0 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--input-bg);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.78);
}

.weather-forecast-list {
  display: grid;
  gap: 8px;
}

.weather-forecast-list.is-hourly {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.weather-forecast-list.is-week {
  grid-template-columns: repeat(7, minmax(112px, 1fr));
  overflow-x: auto;
  padding-bottom: 3px;
}

.weather-forecast-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 3px 9px;
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--blue) 4%, var(--soft-glass));
}

.weather-forecast-card time,
.weather-forecast-card strong,
.weather-forecast-card span:not(.weather-condition-icon),
.weather-forecast-card small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.weather-forecast-card time {
  grid-column: 1 / -1;
  color: #fff;
  font-size: 0.71rem;
  font-weight: 850;
}

.weather-forecast-card strong {
  color: var(--ink);
  font-size: 0.92rem;
}

.weather-forecast-card > span:not(.weather-condition-icon) {
  grid-column: 2;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 750;
}

.weather-forecast-card small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.3;
}

.weather-condition-icon {
  position: relative;
  grid-row: span 2;
  width: 32px;
  height: 25px;
}

.weather-condition-icon::before {
  position: absolute;
  top: 2px;
  left: 8px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #f4be42;
  box-shadow: 0 0 8px rgba(244, 190, 66, 0.32);
  content: "";
}

.weather-condition-icon::after {
  position: absolute;
  right: 1px;
  bottom: 5px;
  left: 2px;
  height: 10px;
  border-radius: 8px 8px 5px 5px;
  background: #aebcc7;
  box-shadow: 6px -5px 0 -1px #c6d1d8, 13px -3px 0 -2px #b8c5ce;
  content: "";
}

.weather-condition-icon[data-weather-kind="clear"]::after {
  display: none;
}

.weather-condition-icon[data-weather-kind="fog"]::before,
.weather-condition-icon[data-weather-kind="drizzle"]::before,
.weather-condition-icon[data-weather-kind="rain"]::before,
.weather-condition-icon[data-weather-kind="snow"]::before,
.weather-condition-icon[data-weather-kind="storm"]::before {
  display: none;
}

.weather-condition-icon[data-weather-kind="rain"] i,
.weather-condition-icon[data-weather-kind="drizzle"] i,
.weather-condition-icon[data-weather-kind="storm"] i {
  position: absolute;
  right: 5px;
  bottom: 0;
  width: 2px;
  height: 7px;
  background: #71a9c6;
  box-shadow: -8px 1px #71a9c6, -16px -1px #71a9c6;
  transform: skewX(-16deg);
}

.weather-condition-icon[data-weather-kind="snow"] i {
  position: absolute;
  right: 4px;
  bottom: -1px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #d9edf5;
  box-shadow: -9px 1px #d9edf5, -18px -1px #d9edf5;
}

.weather-condition-icon[data-weather-kind="fog"] i {
  position: absolute;
  right: 1px;
  bottom: 1px;
  left: 1px;
  height: 2px;
  background: #aebbc1;
  box-shadow: 0 4px #87979f;
}

.weather-condition-icon[data-weather-kind="storm"]::after {
  background: #687681;
  box-shadow: 6px -5px 0 -1px #7d8991, 13px -3px 0 -2px #5a6873;
}

.weather-forecast-empty {
  padding: 18px 12px;
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
}

.schedule-timeline-event.is-sleep {
  cursor: default;
}

.schedule-timeline-event.is-sleep .schedule-event-bubble {
  border-color: color-mix(in srgb, var(--blue) 70%, var(--line));
  background: color-mix(in srgb, var(--blue) 20%, var(--panel));
}

.schedule-timeline-event.is-carryover .schedule-event-bubble {
  border-left-style: dashed;
  border-radius: 0 7px 7px 0;
}

.schedule-timeline-event.is-continuing .schedule-event-bubble {
  border-right-style: dashed;
  border-radius: 7px 0 0 7px;
}

.schedule-event-bubble {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  gap: 2px;
  width: 100%;
  min-width: 0;
  height: 46px;
  align-content: center;
  padding: 7px 9px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--blue) 55%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 13%, var(--panel));
  box-shadow: 0 7px 18px color-mix(in srgb, var(--blue) 13%, transparent);
  box-sizing: border-box;
}

.schedule-event-bubble time {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--blue);
  font-size: 0.66rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-event-bubble strong {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-size: 0.76rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-timeline-event:focus-visible .schedule-event-bubble {
  outline: 3px solid color-mix(in srgb, var(--blue) 75%, transparent);
  outline-offset: 2px;
}

.schedule-now-marker {
  position: absolute;
  z-index: 10;
  top: 0;
  bottom: 39px;
  left: var(--now-position);
  width: 2px;
  background: var(--red);
  box-shadow: 0 0 8px color-mix(in srgb, var(--red) 48%, transparent);
  pointer-events: none;
}

.schedule-now-marker[hidden] {
  display: none;
}

.schedule-now-time {
  position: absolute;
  top: -1px;
  left: 50%;
  padding: 3px 6px;
  border-radius: 5px;
  background: var(--red);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 900;
  transform: translate(-50%, -1px);
}

.schedule-celestial-marker {
  position: absolute;
  top: var(--celestial-top);
  left: 50%;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  background: #ffd34f;
  box-shadow: 0 0 7px rgba(255, 211, 79, 0.8);
  transform: translate(-50%, -50%);
}

.schedule-celestial-marker[data-celestial="moon"] {
  overflow: hidden;
  border-color: rgba(235, 243, 247, 0.94);
  background: #eef4f3;
  box-shadow: 0 0 6px rgba(210, 226, 232, 0.55);
}

.schedule-celestial-marker[data-celestial="moon"]::after {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: #13202d;
  content: "";
  transform: translateX(4px);
}

.schedule-celestial-marker[hidden] {
  display: none;
}

.schedule-editor {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(4, 10, 8, 0.66);
  backdrop-filter: blur(8px);
}

.schedule-editor[hidden] {
  display: none;
}

.schedule-editor-panel {
  display: grid;
  gap: 9px;
  width: min(100%, 500px);
  max-height: 92vh;
  overflow-y: auto;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--schedule-accent) 50%, var(--line));
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}

.schedule-editor-panel header {
  display: grid;
  gap: 3px;
  margin-bottom: 3px;
}

.schedule-editor-panel header strong {
  color: var(--ink);
  font-size: 1.35rem;
}

.schedule-editor-panel > label,
.schedule-editor-date-time label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 900;
}

.schedule-editor-panel > label span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.schedule-editor-panel input,
.schedule-editor-panel textarea {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--ink);
}

.schedule-editor-panel input {
  height: 48px;
  padding: 0 12px;
}

.schedule-editor-panel textarea {
  min-height: 92px;
  padding: 11px 12px;
  line-height: 1.4;
  resize: vertical;
}

.schedule-editor-date-time {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.schedule-editor-date {
  grid-column: 1 / -1;
}

.schedule-editor-actions {
  display: grid;
  grid-template-columns: auto 1fr 1.25fr;
  gap: 8px;
  margin-top: 5px;
}

.schedule-editor-actions button {
  min-width: 0;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft-glass);
  color: var(--ink);
  font-weight: 900;
  cursor: pointer;
}

.schedule-editor-actions .schedule-save-button {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

.schedule-editor-actions .schedule-delete-button {
  border-color: color-mix(in srgb, var(--red) 52%, var(--line));
  color: var(--red);
}

.schedule-delete-button[hidden] {
  display: none;
}

@media (max-width: 440px) {
  .date-step-control.schedule-date-control {
    grid-template-columns: 40px minmax(138px, 1fr) 40px;
    gap: 6px;
  }

  .date-step-control.schedule-date-control .date-step-button {
    width: 40px;
    height: 46px;
    font-size: 1.35rem;
  }

  .schedule-date-control input {
    height: 46px;
    padding-right: 34px;
    font-size: 0.86rem;
  }

  .schedule-regular-sleep {
    grid-template-columns: 1fr;
  }

  .schedule-regular-sleep input,
  .schedule-manual-sleep input {
    height: 48px;
    padding-right: 34px;
    font-size: 1rem;
  }

  .schedule-timeline-panel .schedule-section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .schedule-timeline-panel .schedule-graph-style {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
  }

  .schedule-timeline-panel .schedule-grid-toggle {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .weather-only-view .schedule-timeline-panel .schedule-grid-toggle {
    grid-column: 1;
    grid-row: 2;
  }

  .schedule-timeline-panel .schedule-now-legend {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .weather-forecast-panel .schedule-section-heading {
    align-items: end;
  }

  .weather-range-select {
    min-width: 132px;
  }

  .weather-forecast-list.is-hourly {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-day-heading strong {
    font-size: 1rem;
  }

  .schedule-event-card {
    grid-template-columns: 62px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .schedule-editor-date-time {
    grid-template-columns: 1fr;
  }

  .schedule-segment-lengths,
  .schedule-manual-sleep {
    grid-template-columns: 1fr;
  }

  .schedule-bed-now-row,
  .schedule-location-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .schedule-bed-now-row small {
    max-width: none;
    text-align: left;
  }

  .schedule-city-fields {
    grid-template-columns: 1fr;
  }

  .schedule-editor-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-editor-actions .schedule-delete-button:not([hidden]) {
    grid-column: 1 / -1;
  }
}

.reminders-view {
  display: grid;
  gap: 14px;
  padding-bottom: 72px;
}

.reminders-toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 4px 0 8px;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(14px);
}

.reminders-summary {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.reminders-summary strong {
  color: var(--ink);
  font-size: 1.35rem;
  line-height: 1;
}

.reminders-summary span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.reminders-add-button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--green);
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.reminders-add-button.is-open {
  transform: rotate(45deg);
  border-color: var(--red);
  background: var(--red);
}

.reminders-form {
  grid-column: 1 / -1;
  display: grid;
  gap: 9px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.reminders-form[hidden] {
  display: none;
}

.reminders-form label {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.reminders-form > input,
.reminders-form .input-row input {
  min-width: 0;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 13px;
  background: var(--input-bg);
  color: var(--ink);
}

.reminders-cancel {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft-glass);
  color: var(--muted);
  font-weight: 800;
  cursor: pointer;
}

.reminders-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.reminders-grid .empty-state {
  grid-column: 1 / -1;
}

.reminder-card {
  display: grid;
  gap: 7px;
  min-width: 0;
  justify-items: center;
  min-height: 232px;
  padding: 12px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 48px, color-mix(in srgb, var(--ring-color, var(--green)) 22%, transparent), transparent 82px),
    var(--panel);
  box-shadow: var(--shadow);
  text-align: center;
  transition: border-color 160ms ease, transform 160ms ease;
}

.reminder-card.is-due {
  border-color: var(--red);
  background:
    radial-gradient(circle at 50% 48px, color-mix(in srgb, var(--red) 18%, transparent), transparent 82px),
    var(--panel);
  animation: reminder-card-due 1.15s ease-in-out infinite alternate;
}

.reminder-ring {
  display: grid;
  place-items: center;
  width: min(100%, 128px);
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    conic-gradient(var(--ring-color) calc(var(--elapsed) * 1%), color-mix(in srgb, var(--ring-color) 28%, var(--line)) 0),
    var(--panel);
  box-shadow:
    0 0 12px color-mix(in srgb, var(--ring-color) 26%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--ring-color) 38%, transparent);
}

.reminder-ring > div {
  display: grid;
  place-items: center;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--panel);
}

.reminder-ring strong {
  color: var(--ink);
  font-size: 2.1rem;
  line-height: 0.9;
}

.reminder-ring span,
.reminder-card small {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.reminder-card h2 {
  display: -webkit-box;
  min-height: 2.3em;
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.reminder-due-date {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.reminder-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  width: 100%;
}

.reminder-reset,
.reminder-delete {
  min-height: 34px;
  min-width: 0;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft-glass);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

.reminder-reset {
  border-color: color-mix(in srgb, var(--green) 34%, var(--line));
  color: var(--green);
}

.reminder-card.is-due .reminder-delete {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

@keyframes reminder-card-due {
  from {
    box-shadow: var(--shadow), 0 0 0 color-mix(in srgb, var(--red) 0%, transparent);
  }
  to {
    box-shadow: var(--shadow), 0 0 18px color-mix(in srgb, var(--red) 36%, transparent);
  }
}

.meal-plan-heading,
.meal-plan-item,
.finance-person-heading,
.finance-person,
.finance-history-item {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.meal-plan-heading span,
.meal-plan-item span,
.finance-person-heading span,
.finance-history-item small {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

.meal-plan-heading strong {
  font-size: 1.8rem;
  line-height: 1;
}

.meal-plan-list,
.finance-list,
.finance-history {
  display: grid;
  gap: 10px;
}

.finance-home,
.finance-detail {
  display: grid;
  gap: 12px;
}

.finance-home[hidden],
.finance-detail[hidden],
.finance-person-form[hidden] {
  display: none;
}

.finance-person {
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100%;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.finance-person:hover {
  border-color: color-mix(in srgb, var(--green) 34%, var(--line));
}

.finance-person span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 800;
}

.finance-person strong,
.finance-person-heading strong,
.finance-history-item strong {
  font-size: 1.2rem;
}

.finance-person strong.is-positive,
.finance-person-heading strong.is-positive,
.finance-history-item strong.is-positive,
.finance-net strong.is-positive {
  color: var(--green);
}

.finance-person strong.is-negative,
.finance-person-heading strong.is-negative,
.finance-history-item strong.is-negative,
.finance-net strong.is-negative {
  color: var(--red);
}

.finance-net span,
.finance-net small {
  color: var(--muted);
}

.finance-net {
  display: grid;
  gap: 5px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.finance-net strong {
  color: var(--ink);
  font-size: 2rem;
  line-height: 1;
}

.finance-add-button {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid var(--green);
  border-radius: 999px;
  background: var(--green);
  color: var(--panel);
  box-shadow: var(--shadow);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.finance-person-form,
.finance-entry-form {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.finance-person-form label,
.finance-entry-form label {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.finance-entry-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, auto) auto;
  gap: 8px;
}

.finance-back-button {
  justify-self: start;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}

@media (max-width: 520px) {
  .finance-entry-row {
    grid-template-columns: 1fr;
  }

  .menu-scan-row,
  .menu-scan-actions {
    grid-template-columns: 1fr;
  }
}

.calculator-result {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.calculator-result span {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.calculator-result strong {
  color: var(--ink);
  font-size: 2.45rem;
  line-height: 1;
}

.login-error {
  min-height: 1.25rem;
  margin: 0;
  color: var(--red);
  font-size: 0.9rem;
}

.todo-stats,
.fitness-summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sync-status {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft-glass);
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.35;
}

.sync-status[data-state="ok"] {
  border-color: rgba(47, 107, 79, 0.35);
  color: var(--green);
}

.sync-status[data-state="loading"] {
  border-color: rgba(74, 192, 115, 0.35);
  color: var(--ink);
}

.sync-status[data-state="error"] {
  border-color: rgba(168, 63, 53, 0.35);
  color: var(--red);
}

.sync-progress {
  display: block;
  height: 5px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.sync-progress span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), #b6f2c8);
  transform-origin: left center;
  animation: sync-progress-fill 30s linear forwards;
}

@keyframes sync-progress-fill {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.todo-stats span,
.fitness-summary span {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--panel-glass);
  color: var(--muted);
  font-size: 0.9rem;
}

.todo-stats strong,
.fitness-summary strong {
  color: var(--ink);
}

.todo-list,
.fitness-list,
.fitness-view,
.occurrence-view,
.healthy-view {
  display: grid;
  gap: 10px;
}

.nutrition-tab-panel,
.nutrition-food-list {
  display: grid;
  gap: 10px;
}

.nutrition-tab-panel[hidden] {
  display: none;
}

.nutrition-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft-glass);
}

.nutrition-tabs button {
  min-width: 0;
  min-height: 42px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-weight: 850;
  cursor: pointer;
}

.nutrition-tabs button[aria-selected="true"] {
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.nutrition-food-heading {
  display: grid;
  gap: 3px;
  padding: 4px 2px;
}

.nutrition-food-heading span,
.nutrition-food-item span,
.nutrition-food-item small {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.nutrition-food-heading strong {
  font-size: 1.08rem;
}

.nutrition-food-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, #4fca70 16%, var(--panel));
}

.nutrition-food-item div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.nutrition-food-item strong {
  overflow-wrap: anywhere;
}

.nutrition-food-item button {
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--red) 38%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--red) 9%, var(--panel));
  color: var(--red);
  font-weight: 850;
  cursor: pointer;
}

.todo-item {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 10px;
  align-items: center;
  min-height: 64px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.fitness-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  min-height: 70px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  cursor: pointer;
}

.fitness-item.is-selected {
  border-color: rgba(47, 107, 79, 0.5);
  box-shadow: inset 3px 0 0 var(--green);
}

.fitness-item span {
  color: var(--muted);
  font-size: 0.92rem;
}

.todo-item span {
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.todo-item.is-complete span {
  color: var(--muted);
  text-decoration: line-through;
}

.todo-item.is-complete .check-button {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

.delete-button {
  color: var(--red);
}

.empty-state {
  padding: 26px 18px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--empty-glass);
  text-align: center;
}

.empty-state h2 {
  font-size: 1.25rem;
}

.empty-state p {
  margin: 7px 0 0;
  color: var(--muted);
}

@media (min-width: 680px) {
  .app-shell {
    padding-top: 32px;
  }

  .topbar h1 {
    font-size: 2.25rem;
  }

  .welcome h2 {
    font-size: 3.35rem;
  }

  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature-tile:not(.is-secondary) + .feature-tile.is-secondary,
  .feature-tile.is-secondary + .feature-tile.is-secondary {
    margin-top: 0;
  }

  .code-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .graph-controls {
    grid-template-columns: 0.8fr 1fr 1fr;
  }

  .occurrence-display-graphs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .storage-graph-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 679px) {
  .storage-create-grid {
    grid-template-columns: 1fr;
  }

  .storage-color-picker > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .storage-pod-type-picker > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-view .feature-grid {
    margin-top: 10px;
  }

  .feature-tile:not(.is-secondary) + .feature-tile.is-secondary {
    margin-top: 42vh;
  }

  .feature-tile.is-secondary + .feature-tile.is-secondary {
    margin-top: 18px;
  }

  .goal-progress-layout {
    grid-template-columns: minmax(0, 1fr) 126px;
  }

  .nutrition-goal-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 440px) {
  .menu-category-card {
    grid-template-columns: 36px minmax(0, 1fr);
    min-height: 88px;
    padding: 11px;
  }

  .menu-category-icon {
    width: 36px;
    height: 36px;
  }

  .menu-category-icon svg {
    width: 19px;
    height: 19px;
  }

  .menu-category-card strong {
    font-size: 1rem;
  }

  .menu-category-arrow {
    display: none;
  }
}

@media (min-width: 920px) {
  .app-shell:has(.daily-schedule-view) {
    width: min(100%, 980px);
  }

  .app-shell:has(.fitness-view) {
    width: min(100%, 1120px);
  }

  .app-shell:has(.healthy-view) {
    width: min(100%, 1120px);
  }

  .fitness-dashboard {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px) minmax(0, 1fr);
    align-items: start;
  }

  .healthy-dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .healthy-entry-panel {
    grid-column: 1 / -1;
    width: min(100%, 760px);
    margin: 0 auto;
  }

  .healthy-form {
    grid-template-columns: 180px minmax(0, 1fr);
    align-items: center;
  }

  .fitness-chart-card {
    min-height: 100%;
  }

  .fitness-chart-weight,
  .fitness-chart-protein {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .fitness-chart-weight .fitness-chart,
  .fitness-chart-protein .fitness-chart {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100%;
    min-height: 420px;
  }

  .fitness-chart-weight .fitness-chart-svg,
  .fitness-chart-protein .fitness-chart-svg {
    height: 100%;
    min-height: 360px;
  }

  .healthy-view .fitness-chart-card {
    min-height: 0;
    align-content: start;
  }

}

.nutrition-weight-reminder-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft-glass);
}

.nutrition-weight-reminder-setting > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.nutrition-weight-reminder-setting strong {
  color: var(--ink);
  font-size: 0.88rem;
}

.nutrition-weight-reminder-setting small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.nutrition-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 26px;
  cursor: pointer;
}

.nutrition-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.nutrition-toggle i {
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--muted) 55%, var(--line));
  border-radius: 13px;
  background: color-mix(in srgb, var(--muted) 18%, var(--panel));
  transition: background 150ms ease, border-color 150ms ease;
}

.nutrition-toggle i::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(24, 34, 37, 0.24);
  content: "";
  transition: transform 150ms ease;
}

.nutrition-toggle input:checked + i {
  border-color: #3f8465;
  background: #3f8465;
}

.nutrition-toggle input:checked + i::after {
  transform: translateX(20px);
}

.nutrition-toggle input:focus-visible + i {
  outline: 3px solid color-mix(in srgb, var(--blue) 72%, transparent);
  outline-offset: 3px;
}

.home-weight-reminder {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(20, 28, 29, 0.5);
  backdrop-filter: blur(4px);
}

.home-weight-reminder-panel {
  display: grid;
  gap: 16px;
  width: min(100%, 420px);
  padding: 20px;
  border: 1px solid color-mix(in srgb, #3f8465 45%, var(--line));
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 18px 55px rgba(15, 24, 25, 0.3);
}

.home-weight-reminder-panel h2 {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 1.35rem;
  letter-spacing: 0;
}

.home-weight-reminder-form {
  display: grid;
  gap: 8px;
}

.home-weight-reminder-form label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.78);
}

.home-weight-reminder-form input {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--input-bg);
  color: var(--ink);
  font: inherit;
}

.home-weight-reminder-error {
  min-height: 18px;
  margin: 0;
  color: var(--red);
  font-size: 0.78rem;
  font-weight: 750;
}

.home-weight-reminder-form > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.home-weight-reminder-form button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--soft-glass);
  color: var(--ink);
  font-weight: 850;
  cursor: pointer;
}

.home-weight-reminder-form button[type="submit"] {
  border-color: #3f8465;
  background: #3f8465;
  color: #fff;
}

.star-rating {
  display: inline-grid;
  grid-template-columns: repeat(5, 28px);
  align-items: center;
  gap: 1px;
  width: max-content;
}

.star-rating-button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--muted) 45%, transparent);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: color 120ms ease, transform 120ms ease;
}

.star-rating-button:hover,
.star-rating-button.is-filled {
  color: #d39a24;
}

.star-rating-button:active {
  transform: scale(0.88);
}

.ingredients-view {
  display: grid;
  gap: 14px;
  padding-bottom: 72px;
}

.ingredients-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.ingredients-heading h2 {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 1.55rem;
  letter-spacing: 0;
}

.ingredients-heading > strong {
  color: #3f8465;
  font-size: 0.85rem;
}

.ingredients-controls {
  display: grid;
  grid-template-columns: minmax(180px, 1.5fr) repeat(4, minmax(120px, 1fr));
  gap: 9px;
  padding: 14px;
  border-block: 1px solid var(--line);
  background: var(--section-glass);
}

.ingredients-controls label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.ingredients-controls label > span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 850;
}

.ingredients-controls input,
.ingredients-controls select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--input-bg);
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
}

.ingredients-sync {
  margin: 0;
}

.ingredients-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ingredient-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 11px 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.ingredient-card-open {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.ingredient-card-name {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ingredient-card header {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ingredient-card-name > span,
.ingredient-card footer,
.ingredient-card dt {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ingredient-card-name strong {
  color: var(--ink);
  font-size: 1.02rem;
  overflow-wrap: anywhere;
}

.ingredient-detail-layer {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgb(4 10 8 / 72%);
  backdrop-filter: blur(5px);
}

.ingredient-detail {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 12px;
  width: min(100%, 440px);
  max-height: min(720px, calc(100dvh - 36px));
  overflow-y: auto;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 22px 60px rgb(0 0 0 / 34%);
}

.ingredient-detail-close {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  color: var(--ink);
  cursor: pointer;
}

.ingredient-detail-heading {
  display: grid;
  gap: 3px;
  text-align: center;
}

.ingredient-detail-heading span,
.ingredient-detail dt {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ingredient-detail-heading h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.35rem;
  letter-spacing: 0;
}

.ingredient-detail-heading .food-editable-name {
  text-align: center;
}

.ingredient-detail dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin: 0;
}

.ingredient-detail dl > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px;
  border-left: 2px solid color-mix(in srgb, #57ad74 48%, var(--line));
  background: var(--soft-glass);
}

.ingredient-detail dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.ideas-view {
  display: grid;
  gap: 14px;
  padding-bottom: 72px;
}

.ideas-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.ideas-heading h2 {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 1.55rem;
  letter-spacing: 0;
}

.ideas-heading > strong {
  color: #8d6a25;
  font-size: 0.85rem;
}

.ideas-form {
  display: grid;
  grid-template-columns: minmax(160px, 0.8fr) minmax(220px, 1.4fr) auto;
  align-items: end;
  gap: 8px;
  padding: 14px;
  border-block: 1px solid var(--line);
  background: var(--section-glass);
}

.ideas-form label {
  display: none;
}

.ideas-form input,
.ideas-form textarea {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--input-bg);
  color: var(--ink);
  font: inherit;
}

.ideas-form input {
  height: 44px;
  padding: 0 11px;
}

.ideas-form textarea {
  height: 44px;
  min-height: 44px;
  padding: 11px;
  resize: vertical;
}

.ideas-form button {
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 7px;
  background: #b1842d;
  color: #fffdf6;
  font-weight: 900;
  cursor: pointer;
}

.ideas-sync {
  margin: 0;
}

.ideas-list {
  display: grid;
  gap: 9px;
}

.idea-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid color-mix(in srgb, #b1842d 55%, var(--line));
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.idea-item.is-pinned {
  border-color: color-mix(in srgb, #b1842d 58%, var(--line));
  background: color-mix(in srgb, #b1842d 9%, var(--panel));
}

.idea-item header {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.idea-item header span {
  color: #8d6a25;
  font-size: 0.7rem;
  font-weight: 850;
  text-transform: uppercase;
}

.idea-item header strong {
  color: var(--ink);
  font-size: 1.04rem;
  overflow-wrap: anywhere;
}

.idea-item p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.idea-item button {
  align-self: start;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--red) 38%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--red) 8%, var(--panel));
  color: var(--red);
  font-weight: 850;
  cursor: pointer;
}

@media (max-width: 700px) {
  .ideas-form {
    grid-template-columns: 1fr;
  }

  .ideas-form textarea {
    height: 84px;
  }
}

.ingredient-card dl {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.ingredient-card dl > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px;
  border-left: 2px solid color-mix(in srgb, #3f8465 48%, var(--line));
  background: var(--soft-glass);
}

.ingredient-card dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.ingredient-card footer {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.ingredient-card footer small {
  font: inherit;
}

@media (max-width: 760px) {
  .ingredients-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ingredients-search {
    grid-column: 1 / -1;
  }

  .ingredients-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .settings-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .menu-dish-card,
  .ingredient-card {
    grid-template-columns: 1fr;
  }

  .menu-dish-rating,
  .ingredient-card .star-rating {
    grid-column: 1;
  }

  .ingredients-controls {
    grid-template-columns: 1fr;
  }

  .ingredients-search {
    grid-column: 1;
  }

  .ingredient-card dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.hydration-view {
  display: grid;
  gap: 16px;
}

.hydration-heading,
.hydration-section-heading,
.hydration-settings {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.hydration-heading h2,
.hydration-section-heading h3,
.hydration-settings h3,
.hydration-today h2 {
  margin: 0;
  letter-spacing: 0;
}

.hydration-unit-control {
  display: grid;
  gap: 5px;
  min-width: min(48%, 180px);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.hydration-unit-control select,
.hydration-custom-form input,
.hydration-goal-form input {
  min-width: 0;
  height: 44px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--input-bg);
  color: var(--ink);
}

.hydration-dashboard {
  display: grid;
  grid-template-columns: minmax(150px, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  min-height: 340px;
  padding: 24px;
  border: 1px solid color-mix(in srgb, #2187a8 42%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(155deg, color-mix(in srgb, #65c7df 13%, transparent), transparent 58%),
    var(--section-glass);
  box-shadow: var(--shadow);
}

.hydration-bottle-wrap {
  display: grid;
  place-items: center;
  min-width: 0;
}

.hydration-bottle {
  position: relative;
  width: 132px;
  height: 274px;
  filter: drop-shadow(0 13px 16px rgba(24, 82, 102, 0.16));
}

.hydration-bottle-cap {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 39px;
  width: 54px;
  height: 27px;
  border: 2px solid color-mix(in srgb, #1c7898 76%, var(--line));
  border-radius: 6px 6px 3px 3px;
  background: repeating-linear-gradient(90deg, #287f9c 0 4px, #3997b5 4px 7px);
}

.hydration-bottle-neck {
  position: absolute;
  z-index: 2;
  top: 23px;
  left: 45px;
  width: 42px;
  height: 35px;
  border: 3px solid color-mix(in srgb, #5b9db4 60%, var(--line));
  border-bottom: 0;
  background: color-mix(in srgb, #dff7ff 32%, var(--panel));
}

.hydration-bottle-body {
  position: absolute;
  z-index: 1;
  inset: 51px 4px 0;
  overflow: hidden;
  border: 3px solid color-mix(in srgb, #5b9db4 64%, var(--line));
  border-radius: 25px 25px 30px 30px / 22px 22px 18px 18px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.38), transparent 22% 78%, rgba(38, 112, 137, 0.12)),
    color-mix(in srgb, #ddf7ff 27%, var(--panel));
  box-shadow: inset 8px 0 12px rgba(255, 255, 255, 0.22), inset -7px 0 12px rgba(31, 113, 140, 0.1);
}

.hydration-water {
  --hydration-level: 0%;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--hydration-level);
  min-height: 0;
  background: linear-gradient(180deg, #4fc5e8 0%, #238eb9 62%, #16749e 100%);
  transition: height 520ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.hydration-bottle.is-empty .hydration-water {
  visibility: hidden;
}

.hydration-water::before,
.hydration-water::after {
  position: absolute;
  top: -7px;
  width: 72px;
  height: 15px;
  border-radius: 50%;
  background: #6ed3ed;
  content: "";
}

.hydration-water::before {
  left: -8px;
  animation: hydration-wave 3.2s ease-in-out infinite alternate;
}

.hydration-water::after {
  right: -10px;
  opacity: 0.72;
  animation: hydration-wave 2.6s ease-in-out infinite alternate-reverse;
}

.hydration-water > span {
  position: absolute;
  inset: 12px 14px auto;
  height: 45%;
  border-left: 7px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
}

.hydration-bottle-marks {
  position: absolute;
  z-index: 2;
  inset: 26px 10px;
  display: grid;
  align-content: space-evenly;
  pointer-events: none;
}

.hydration-bottle-marks i {
  justify-self: end;
  width: 21px;
  height: 1px;
  background: color-mix(in srgb, #2b7690 58%, transparent);
}

.hydration-bottle.is-complete .hydration-bottle-body {
  border-color: color-mix(in srgb, #22a6c8 85%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, #45c6e6 14%, transparent), inset 8px 0 12px rgba(255, 255, 255, 0.22);
}

@keyframes hydration-wave {
  from { transform: translateX(-6px) rotate(-2deg); }
  to { transform: translateX(7px) rotate(2deg); }
}

.hydration-today {
  display: grid;
  gap: 7px;
  justify-items: start;
  min-width: 0;
}

.hydration-today h2 {
  max-width: 100%;
  color: #187c9f;
  font-size: 3.4rem;
  line-height: 1;
  overflow-wrap: anywhere;
}

[data-theme="dark"] .hydration-today h2 {
  color: #68cbe7;
}

.hydration-today > p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.hydration-today > strong {
  margin-top: 5px;
  color: var(--ink);
  font-size: 1.2rem;
}

.hydration-undo {
  min-height: 40px;
  margin-top: 9px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blue);
  font-weight: 800;
  cursor: pointer;
}

.hydration-add,
.hydration-settings,
.hydration-history {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--section-glass);
}

.hydration-add,
.hydration-history {
  display: grid;
  gap: 15px;
}

.hydration-quick-adds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.hydration-quick-adds button {
  min-width: 0;
  min-height: 47px;
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, #2187a8 48%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, #41b8d8 10%, var(--panel));
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 850;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.hydration-quick-adds button span {
  margin-right: 3px;
  color: #2187a8;
  font-size: 1.05rem;
}

.hydration-add.is-processing .hydration-quick-adds button,
.hydration-add.is-processing .hydration-custom-form button {
  border-color: color-mix(in srgb, #707a7d 55%, var(--line));
  background: color-mix(in srgb, #8a9497 22%, var(--panel));
  color: color-mix(in srgb, var(--muted) 88%, var(--ink));
  box-shadow: inset 0 3px 7px rgba(24, 34, 37, 0.24);
  opacity: 0.82;
  transform: translateY(1px);
  cursor: wait;
}

.hydration-add.is-processing .hydration-quick-adds button span {
  color: currentColor;
}

.hydration-custom-form {
  display: grid;
  gap: 7px;
}

.hydration-custom-form > label {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.hydration-custom-form > div,
.hydration-goal-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
}

.hydration-custom-form span,
.hydration-goal-form span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.hydration-custom-form button,
.hydration-goal-form button {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #2187a8;
  border-radius: 7px;
  background: #2187a8;
  color: #fff;
  font-weight: 850;
  cursor: pointer;
}

.hydration-settings > div {
  flex: 0 0 auto;
}

.hydration-goal-form {
  width: min(100%, 340px);
}

.hydration-history-list {
  display: grid;
}

.hydration-history-row {
  display: grid;
  grid-template-columns: minmax(88px, 0.8fr) minmax(80px, 1.4fr) 42px;
  gap: 11px;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.hydration-history-row:last-child {
  border-bottom: 0;
}

.hydration-history-row > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.hydration-history-row small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.hydration-history-row > small:last-child {
  text-align: right;
}

.hydration-history-row.is-today strong {
  color: #2187a8;
}

.hydration-history-track {
  overflow: hidden;
  height: 8px;
  border-radius: 4px;
  background: color-mix(in srgb, #2187a8 13%, var(--line));
}

.hydration-history-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #237eaa, #51c8e4);
}

.hydration-sync {
  margin: 0;
}

@media (max-width: 520px) {
  .hydration-heading {
    align-items: end;
  }

  .hydration-dashboard {
    grid-template-columns: 128px minmax(0, 1fr);
    min-height: 300px;
    padding: 17px 12px;
  }

  .hydration-bottle {
    width: 108px;
    height: 242px;
  }

  .hydration-bottle-cap {
    left: 31px;
    width: 46px;
  }

  .hydration-bottle-neck {
    left: 36px;
    width: 36px;
  }

  .hydration-today h2 {
    font-size: 2rem;
  }

  .hydration-quick-adds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hydration-custom-form > div,
  .hydration-goal-form {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .hydration-custom-form button,
  .hydration-goal-form button {
    grid-column: 1 / -1;
  }

  .hydration-settings {
    display: grid;
  }

  .hydration-goal-form {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-view.is-engine-empty .tile-energy-warning,
  .engine-room-status.is-empty .engine-power-symbol {
    animation: none;
    opacity: 1;
  }

  .hydration-water::before,
  .hydration-water::after {
    animation: none;
  }

  .hydration-water {
    transition: none;
  }
}