@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root {
  color-scheme: dark;
  /* Airbnb-inspired warmth + Uber-inspired contrast (dark shell, crisp type) */
  --font-display: "Outfit", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --bg: #0a0a0a;
  --bg-elevated: #141414;
  --fg: #f7f7f7;
  --fg-soft: #c9c9c9;
  --muted: #8b8b8b;
  --panel: rgba(28, 28, 28, 0.92);
  --panel-hover: rgba(40, 40, 40, 0.95);
  --border: rgba(255, 255, 255, 0.1);
  --border-focus: rgba(255, 255, 255, 0.28);
  --accent: #ff385c;
  --accent2: #e61e4d;
  --accent-glow: rgba(255, 56, 92, 0.28);
  --gold: #e4b363;
  --success: #00a862;
  --error: #ff6b6b;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.5);
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --sidebar-w: 272px;
  --btn-primary-bg: #f7f7f7;
  --btn-primary-fg: #0a0a0a;
  --btn-primary-hover: #ffffff;
  --btn-primary-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  /* Form controls */
  --field-bg: rgba(32, 32, 32, 0.95);
  --chat-input-bar-bg: rgba(0, 0, 0, 0.28);
  --progress-track: rgba(255, 255, 255, 0.12);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  background:
    radial-gradient(1000px 480px at 80% -10%, rgba(255, 56, 92, 0.07), transparent 55%),
    radial-gradient(800px 400px at 10% 0%, rgba(0, 168, 98, 0.05), transparent 50%),
    var(--bg);
  color: var(--fg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .sidebar-brand .title, .page-header h1, .page-header h2, .auth-page-header h1 {
  font-family: var(--font-display);
  letter-spacing: -0.03em;
}

.container { width: min(1100px, 92vw); margin: 0 auto; padding: 0 20px; }

/* ----- App shell: sidebar + main ----- */
.app-content {
  flex: 1;
  min-width: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin-left: var(--sidebar-w);
}

.sidebar-menu-btn {
  display: none;
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 102;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(9, 11, 17, 0.92);
  backdrop-filter: blur(12px);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--fg);
  box-shadow: var(--shadow);
}

.sidebar-menu-icon {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}

.sidebar-backdrop[hidden] {
  display: none !important;
}

body.sidebar-open .sidebar-backdrop {
  display: block;
}

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar-w);
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: #000000;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 6px 0 40px rgba(0, 0, 0, 0.45);
}

.sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px 14px 24px;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 20px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}

.sidebar-brand:hover .title {
  color: var(--accent);
}

.sidebar-brand-text {
  min-width: 0;
}

.logo {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  letter-spacing: -0.5px;
  box-shadow: 0 4px 14px var(--accent-glow);
}
.title { font-weight: 800; letter-spacing: -0.02em; font-size: 1.05rem; line-height: 1.2; }
.subtitle { color: var(--muted); font-size: 0.7rem; margin-top: 4px; font-weight: 500; line-height: 1.35; }

.nav {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.sidebar-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.sidebar-nav a:hover {
  color: var(--fg);
  background: rgba(255, 255, 255, 0.08);
}

.sidebar-nav a.current {
  color: var(--fg);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 3px 0 0 var(--accent);
}

.sidebar-nav a.btn {
  margin-top: 4px;
  justify-content: center;
  text-align: center;
}

.sidebar-nav .user-greeting {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  padding: 4px 14px 8px;
  margin: 0;
}

.nav-auth-user {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--fg-soft);
  padding: 8px 14px;
  margin: 4px 0;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  line-height: 1.35;
  word-break: break-word;
  white-space: normal;
  max-width: none;
}

.sidebar-nav .btn.small {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

.sidebar-nav .sidebar-sign-out {
  margin-top: auto;
  flex-shrink: 0;
}

/* Fixed account controls (Log in / signed-in email) — top right */
.top-auth-bar {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 103;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  max-width: min(92vw - 56px, 320px);
}

.top-auth-bar .top-auth-login {
  flex-shrink: 0;
  background: rgba(9, 11, 17, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
[data-theme="light"] .top-auth-bar .top-auth-login {
  background: rgba(255, 255, 255, 0.94);
}

.top-auth-bar .top-auth-user {
  margin: 0;
  padding: 6px 12px;
  max-width: min(200px, 42vw);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
}

@media (max-width: 899px) {
  .app-content {
    margin-left: 0;
    padding-top: 56px;
  }

  .sidebar-menu-btn {
    display: flex;
  }

  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.28s ease;
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }
}

@media (min-width: 900px) {
  .sidebar {
    transform: none !important;
  }

  body.sidebar-open .sidebar-backdrop {
    display: none !important;
  }
}

/* ----- Buttons (Uber: black/white precision; Airbnb: soft motion) ----- */
.btn {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--fg);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  transition: border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn:hover {
  border-color: var(--border-focus);
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}
.btn.primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border-color: transparent;
  border-radius: 999px;
  padding: 11px 22px;
  box-shadow: var(--btn-primary-shadow);
}
.btn.primary:hover {
  background: var(--btn-primary-hover);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}
.btn.ghost { color: var(--muted); }
.btn.ghost:hover { color: var(--fg); }
.btn.small { padding: 8px 16px; border-radius: 999px; font-size: 0.8125rem; }

/* ----- Hero / Home ----- */
.hero {
  padding: 56px 0 44px;
  position: relative;
}
.hero .container {
  display: grid;
  gap: 12px;
  align-content: start;
}
.hero::before {
  content: "";
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 800px;
  height: 75%;
  background: radial-gradient(ellipse, rgba(111, 227, 142, 0.24) 0%, transparent 72%);
  pointer-events: none;
  opacity: 0.5;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 28%);
  mask-image: radial-gradient(100% 70% at 50% 0, #000 0, transparent 90%);
}

h1 {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1.02;
  margin: 0 0 18px;
  font-weight: 800;
  letter-spacing: -0.04em;
  max-width: 16ch;
  text-wrap: balance;
}
.hero-greeting {
  display: none;
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 8px;
}
.hero .hero-greeting,
.hero-greeting-wrap .hero-greeting {
  font-size: clamp(2.2rem, 5.2vw, 3.6rem);
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.03em;
}
.hero-greeting-wrap {
  padding-top: 24px;
  padding-bottom: 0;
}
.hero h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.9rem);
  font-weight: 800;
  line-height: 1.03;
  max-width: 15ch;
}
.hero .lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  margin: 0 0 30px;
  max-width: 60ch;
  color: var(--fg-soft);
}

.hero-signin-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin: 0 0 8px;
}

.hero-signin-hint {
  font-size: 0.875rem;
  max-width: 36ch;
  line-height: 1.45;
}
.lead {
  color: var(--fg-soft);
  font-size: 1.08rem;
  line-height: 1.65;
  margin: 0 0 24px;
  max-width: 62ch;
  text-wrap: pretty;
}

.link-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 20px;
  margin-top: 44px;
  min-width: 0;
}
.link-card {
  display: block;
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)),
    var(--panel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 26px;
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.link-card:hover {
  border-color: var(--border-focus);
  background: var(--panel-hover);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.link-card h3 {
  margin: 0 0 10px;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.link-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.62;
}

.mini { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
}

/* ----- Page layout ----- */
.page-header { padding: 36px 0 24px; }
.page-header h2 {
  margin: 0 0 10px;
  font-size: clamp(1.55rem, 2.5vw, 2.1rem);
  letter-spacing: -0.02em;
}
.page-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-bottom: 8px; }
.page-title-row h1 { margin: 0; }
.food-search-wrap { display: flex; gap: 8px; align-items: center; }
.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btn-icon-camera {
  width: 22px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b9196' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") center/contain no-repeat;
}
.btn-icon:hover .btn-icon-camera { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E"); }
.food-search-autocomplete-wrap { position: relative; flex-wrap: wrap; }
.food-search-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  z-index: 100;
  list-style: none;
  padding: 4px 0;
  margin: 0;
}
.food-search-autocomplete[hidden] { display: none !important; }
.food-search-autocomplete-loading {
  padding: 12px 14px;
  font-size: 0.875rem;
  color: var(--fg-soft);
}
.food-search-autocomplete-item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: none;
  color: var(--fg);
  font-size: 0.9375rem;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition);
}
.food-search-autocomplete-item:hover,
.food-search-autocomplete-item:focus { background: rgba(255, 255, 255, 0.08); outline: none; }
[data-theme="light"] .food-search-autocomplete-item:hover,
[data-theme="light"] .food-search-autocomplete-item:focus {
  background: rgba(0, 0, 0, 0.06);
}
.food-search-input {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--field-bg);
  color: var(--fg);
  font-size: 0.9375rem;
  min-width: 180px;
}
.food-search-panel { margin: 0; }
.food-search-panel h3 { margin: 0 0 12px; }
.food-search-results {
  margin-top: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  max-height: 320px;
  overflow-y: auto;
}
.food-search-results[hidden] { display: none !important; }
.food-search-result-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
  color: var(--fg-soft);
}
.food-search-result-item:last-child { border-bottom: none; }
.food-search-result-name { font-weight: 600; color: var(--fg); flex: 1 1 200px; }
.food-search-result-macros { white-space: nowrap; }
.food-search-result-servings { display: flex; align-items: center; gap: 6px; }
.food-search-result-servings input {
  width: 56px;
  padding: 6px 8px;
  text-align: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--field-bg);
  color: var(--fg);
  font-size: 0.875rem;
}
.page-header .lead { margin: 0; color: var(--fg-soft); }
.daylog-intro { font-size: 0.8125rem; line-height: 1.4; }
.page-header .page-actions { margin: 16px 0 0; }
.page-main { padding: 24px 0 56px; min-height: 50vh; }

/* Home: tighter spacing for greeting + overview */
main > .hero-greeting-wrap + .page-main .page-header { padding: 18px 0 20px; }
main > .hero-greeting-wrap + .page-main { padding: 0 0 34px; min-height: 0; }
main > .page-main + .hero { padding: 42px 0 48px; }

/* ----- Sections ----- */
.section { padding: 40px 0; }
.section.alt {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.section h2 { margin: 0 0 20px; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 900px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }
.overview-goals-panel { margin-bottom: 24px; }
.overview-goals-panel h3 { margin: 0 0 8px; }
.overview-goals-panel p { margin: 0 0 12px; color: var(--fg-soft); }
.overview-goals-list { margin: 0; padding-left: 1.25rem; color: var(--fg-soft); line-height: 1.6; }
.overview-goals-list li { margin-bottom: 8px; }

/* ----- Panels & cards ----- */
.panel, .card {
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)),
    var(--panel);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 24px;
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
}
[data-theme="light"] .panel {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}
.panel:hover, .card:hover { border-color: var(--border-focus); box-shadow: var(--shadow); }
.panel h3, .card h2 {
  margin: 0 0 12px;
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}
.panel p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 0.9375rem; }
.panel ul { margin: 0; padding-left: 20px; color: var(--muted); line-height: 1.75; font-size: 0.9375rem; }

.card {
  background:
    linear-gradient(165deg, rgba(255, 56, 92, 0.08) 0%, transparent 52%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    var(--panel);
  box-shadow: var(--shadow);
}
[data-theme="light"] .card {
  background: #ffffff;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}
.card-desc { font-size: 0.875rem; color: var(--muted); margin: 0 0 16px; }
.target-output { margin-top: 24px; }
.target-results { display: block; }
.target-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
@media (max-width: 560px) { .target-stats { grid-template-columns: repeat(2, 1fr); } }
.target-stat {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px 16px;
  text-align: center;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.target-stat:hover { border-color: var(--border-focus); }
.target-stat-value {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fg);
  line-height: 1.2;
}
.target-stat-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 6px;
}
.target-chart-wrap {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.target-chart-title {
  margin: 0 0 16px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--fg-soft);
}
.target-chart-row {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}
.target-chart-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  flex-shrink: 0;
}
.target-chart-pie-legend {
  display: flex;
  align-items: center;
  gap: 32px;
}
.target-chart-right {
  flex: 1;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.target-panel { margin: 0; }
.target-panel-title {
  margin: 0 0 6px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--fg);
}
.target-panel-desc {
  margin: 0 0 10px;
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.4;
}
.target-breakdown-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  color: var(--fg-soft);
  line-height: 1.6;
}
.target-breakdown-list li { margin-bottom: 4px; }
.target-slider-group { margin-bottom: 12px; }
.target-slider-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--fg-soft);
}
.target-slider {
  width: 100%;
  max-width: 200px;
  height: 8px;
  accent-color: var(--accent);
}
.target-slider-note { margin: 0; font-size: 0.8125rem; }
.target-ai-suggestion {
  width: 220px;
  height: 220px;
  box-sizing: border-box;
  padding: 14px;
  overflow: visible;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  color: var(--fg-soft);
  line-height: 1.4;
}
.target-ai-suggestion strong { color: var(--fg); }
.target-pie {
  width: 180px;
  height: 180px;
  min-width: 180px;
  min-height: 180px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.target-legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.target-legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--fg-soft);
}
.target-legend-item i {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 4px;
}
.target-error {
  margin: 0;
  padding: 14px 18px;
  background: rgba(240, 160, 160, 0.1);
  border: 1px solid var(--error);
  border-radius: var(--radius-sm);
  color: var(--error);
  font-size: 0.9375rem;
}
.card-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }

/* ----- Inputs ----- */
.inputs { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.inputs label { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 500; }
.inputs label.optional { flex-basis: 100%; }
.inputs input[type="number"],
.inputs input[type="text"],
.inputs input[type="search"],
.inputs select {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--field-bg);
  color: var(--fg);
  min-width: 90px;
  font-family: inherit;
  font-size: 0.9375rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.inputs input:focus,
.inputs select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.inputs-inline { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px; }
.inputs-inline label { flex-direction: column; align-items: flex-start; }
.add-meal-panel .inputs-inline:not(.add-meal-macros-grid):not(.add-meal-name-row) { grid-template-columns: repeat(4, minmax(0, 90px)); }
.add-meal-panel .inputs-inline:not(.add-meal-macros-grid):not(.add-meal-name-row) input { max-width: 90px; box-sizing: border-box; }
@media (max-width: 480px) { .add-meal-panel .inputs-inline:not(.add-meal-macros-grid):not(.add-meal-name-row) { grid-template-columns: repeat(2, minmax(0, 90px)); } }

.section-lead { color: var(--muted); margin: 0 0 20px; }

/* ----- Day log ----- */
.daylog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; align-items: stretch; }
@media (max-width: 700px) { .daylog-grid { grid-template-columns: 1fr; } }
.daylog-add-col { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.daylog-add-col .food-search-panel { flex: 1; min-height: 200px; display: flex; flex-direction: column; }
.daylog-add-col .food-search-results {
  margin-top: 0;
  flex: 0 0 auto;
  height: 320px;
  max-height: 320px;
  min-height: 0;
  overflow-y: auto;
}
.daylog-progress-col { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.progress-panel-actions { margin: 0 0 4px; }
.daylog-col-spacer { min-height: 2.25rem; padding: 0; margin: 0 0 4px; visibility: hidden; line-height: 0; }
.add-meal-panel .add-meal-name-row { margin-bottom: 8px; display: block; }
.add-meal-panel .add-meal-name-label { display: flex; align-items: center; gap: 8px; white-space: nowrap; width: 100%; }
.add-meal-panel .add-meal-name-label input {
  min-width: 0;
  flex: 1;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--field-bg);
  color: var(--fg);
  font: inherit;
  font-size: 0.9375rem;
  box-shadow: none;
}
.add-meal-panel .add-meal-name-label input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.add-meal-panel .add-meal-name-label input::placeholder { color: var(--muted); }
.add-meal-panel .btn { margin-top: 14px; }
.progress-panel .progress-output { margin-top: 12px; }

.progress-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.progress-table th, .progress-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.progress-table th { font-weight: 600; color: var(--fg-soft); }
.progress-table .rem { color: var(--accent); font-weight: 500; }
.progress-table .rem.over { color: var(--error); }
.progress-table tr:last-child td { border-bottom: none; }
.progress-bar-row td { padding: 4px 12px 10px; border-bottom: none; vertical-align: top; }
.progress-bar-track {
  height: 8px;
  background: var(--progress-track);
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease, background 0.2s ease;
}
.progress-bar-fill.over { background: var(--error) !important; }

.meals-list-panel ul.meals-list { list-style: none; padding-left: 0; margin: 0; }
.meals-list li.meal-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}
.meals-list li.meal-item:last-child { border-bottom: none; }
.meal-item-left { min-width: 0; flex: 1; }
.meal-item-name { font-weight: 700; color: var(--fg); display: block; margin-bottom: 4px; }
.meal-item-macros { font-size: 0.8125rem; color: var(--muted); }
.meal-item-cal { font-weight: 500; color: var(--fg-soft); white-space: nowrap; text-align: right; }
#mealsEmpty { margin: 0; font-size: 0.875rem; color: var(--muted); }

.food-search-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 180px;
  padding: 24px;
  text-align: center;
}
.food-search-empty-state[hidden] { display: none !important; }
.food-search-empty-icon { font-size: 2.5rem; opacity: 0.5; margin-bottom: 12px; }
.food-search-empty-text { margin: 0; font-size: 0.9375rem; color: var(--muted); max-width: 240px; line-height: 1.4; }

.add-meal-panel .add-meal-macros-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 12px;
}
.add-meal-panel .add-meal-macros-grid label { flex-direction: column; align-items: flex-start; }
.add-meal-panel .add-meal-macros-grid input[type="number"] {
  padding: 12px 14px;
  border-radius: var(--radius);
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.footer-section { padding-bottom: 32px; }

/* ----- Terminal / code ----- */
.terminal {
  background: #080a0e;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  overflow: auto;
  color: var(--fg-soft);
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.6;
}

.hint { color: var(--muted); font-size: 0.8125rem; }
.muted { color: var(--muted); }

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  max-width: 280px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--fg-soft);
  font-size: 0.8125rem;
  box-shadow: var(--shadow);
  z-index: 1200;
  display: none;
}
.toast.show {
  display: block;
}

/* ----- Timeline / roadmap ----- */
.timeline { display: grid; gap: 16px; }
.step {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 16px;
  align-items: start;
  padding: 20px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  transition: border-color var(--transition);
}
.step:hover { border-color: var(--border-focus); }
.dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  margin-top: 6px;
  box-shadow: 0 0 12px var(--accent-glow);
}
.step h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 700; }
.step p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 0.9375rem; }

/* ----- Footer ----- */
/* Reset confirmation modal (Day log) */
.reset-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.reset-confirm-overlay[hidden] { display: none !important; }
.reset-confirm-modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 400px;
  width: 100%;
  box-shadow: var(--shadow);
}
.reset-confirm-title { margin: 0 0 12px; font-size: 1.125rem; font-weight: 700; }
.reset-confirm-msg { margin: 0 0 20px; color: var(--fg-soft); font-size: 0.9375rem; line-height: 1.5; }
.reset-confirm-actions { display: flex; gap: 12px; justify-content: flex-end; }

/* Scan food (camera) modal */
.scan-food-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.scan-food-overlay[hidden] { display: none !important; }
.scan-food-modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 420px;
  width: 100%;
  box-shadow: var(--shadow);
}
.scan-food-title { margin: 0 0 4px; font-size: 1.125rem; font-weight: 700; }
.scan-food-desc { margin: 0 0 16px; font-size: 0.875rem; }
.scan-food-preview-wrap {
  width: 100%;
  aspect-ratio: 4/3;
  max-height: 280px;
  background: #111;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 12px;
}
.scan-food-video, .scan-food-canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.scan-food-status { margin: 0 0 12px; font-size: 0.875rem; min-height: 1.2em; }
.scan-food-actions { display: flex; gap: 12px; justify-content: flex-end; }
.scan-food-stage[hidden] { display: none !important; }
.scan-food-loading-text { text-align: center; padding: 28px 12px; margin: 0; font-size: 0.9375rem; }
.scan-food-confirm-img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  margin: 0 0 14px;
  background: rgba(0, 0, 0, 0.2);
}
.scan-food-confirm-details { margin-bottom: 10px; }
.scan-food-confirm-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  font-size: 0.875rem;
  margin: 0;
}
.scan-food-confirm-dl dt { color: var(--muted); font-weight: 600; margin: 0; }
.scan-food-confirm-dl dd { margin: 0; font-weight: 500; }
.scan-food-servings-input {
  width: 78px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--field-bg);
  color: var(--fg);
  font: inherit;
  font-size: 0.875rem;
}
.scan-food-servings-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.scan-food-confirm-hint { font-size: 0.8125rem; margin: 0 0 16px; line-height: 1.45; }
.scan-food-actions-stack {
  flex-direction: column;
  align-items: stretch;
}
.scan-food-actions-stack .btn { justify-content: center; }

.footer {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 24px 0;
  margin-top: 24px;
}
.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.875rem;
}

/* ----- Chat ----- */
.chat-page .container { max-width: 720px; }
.daylog-meals-chat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 800px) {
  .daylog-meals-chat-row { grid-template-columns: 1fr; }
}
.daylog-meals-chat-row .panel.meals-list-panel { min-height: 320px; display: flex; flex-direction: column; }
.daylog-meals-chat-row .daylog-chat-section { min-height: 0; }
.daylog-chat-section {
  display: flex;
  flex-direction: column;
}
.daylog-chat-title { margin: 0 0 6px; font-size: 1.0625rem; font-weight: 700; }
.daylog-chat-desc { margin: 0 0 14px; font-size: 0.8125rem; }
.daylog-chat-section .chat-box-embedded {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.daylog-chat-section .chat-messages { flex: 1 1 auto; max-height: 380px; min-height: 120px; }
.chat-box-embedded .chat-messages { max-height: 400px; }
.chat-box {
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    var(--panel);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-shadow: var(--shadow);
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 60vh;
}
.chat-msg { display: flex; flex-direction: column; gap: 6px; }
.chat-msg.user { align-items: flex-end; }
.chat-msg.user p {
  background: linear-gradient(145deg, var(--accent), var(--accent2));
  color: #051007;
  box-shadow: 0 8px 26px var(--accent-glow);
}
.chat-msg.assistant p {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
}
.chat-msg p {
  margin: 0;
  padding: 14px 18px;
  border-radius: 14px;
  max-width: 85%;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.55;
  font-size: 0.9375rem;
}
.chat-role {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.chat-input-wrap {
  display: flex;
  gap: 12px;
  padding: 20px 20px;
  border-top: 1px solid var(--border);
  align-items: flex-end;
  background: var(--chat-input-bar-bg);
}
.chat-input-wrap textarea {
  flex: 1;
  min-height: 48px;
  max-height: 120px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--field-bg);
  color: var(--fg);
  font: inherit;
  font-size: 0.9375rem;
  resize: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.chat-input-wrap textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.chat-input-wrap .btn { flex-shrink: 0; }
.chat-daylog-status { margin: 0 20px 20px; font-size: 0.8125rem; color: var(--muted); }
.chat-error { display: none; margin: 0 20px 20px; color: var(--error); font-size: 0.8125rem; }

/* ----- User greeting (personalization) ----- */
.user-greeting {
  display: none;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
  padding: 8px 12px;
  margin-right: 4px;
}

/* ----- Settings page ----- */
.settings-panel { margin-bottom: 24px; }
.settings-panel h2 { margin: 0 0 16px; font-size: 1.0625rem; }

.settings-name-panel {
  padding: 28px 24px;
  background: linear-gradient(165deg, rgba(124, 156, 248, 0.06) 0%, transparent 60%);
  border-color: var(--border);
}
.settings-name-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}
.settings-name-icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}
.settings-name-title {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.02em;
}
.settings-name-desc {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.5;
}
.settings-name-input-wrap {
  max-width: 420px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.settings-name-input-wrap .settings-name-input { flex: 1; min-width: 0; }
.settings-name-input {
  display: block;
  width: 100%;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--field-bg);
  color: var(--fg);
  font: inherit;
  font-size: 1rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.settings-name-input::placeholder { color: var(--muted); }
.settings-name-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.settings-section-desc { margin: 0 0 16px; font-size: 0.875rem; }
.settings-group { margin-bottom: 24px; }
.settings-group:last-child { margin-bottom: 0; }
.settings-group-label,
.settings-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--fg-soft);
}
.settings-input,
.settings-textarea {
  display: block;
  width: 100%;
  max-width: 400px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--field-bg);
  color: var(--fg);
  font: inherit;
  font-size: 0.9375rem;
}
.settings-textarea { min-height: 72px; resize: vertical; }
.settings-select {
  display: block;
  width: 100%;
  max-width: 320px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--field-bg);
  color: var(--fg);
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.settings-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.settings-appearance-panel .settings-group { margin-bottom: 18px; }
.settings-appearance-panel .settings-group:last-child { margin-bottom: 0; }
.settings-hint {
  margin: 8px 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
}
.settings-check-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--fg-soft);
  cursor: pointer;
  user-select: none;
}
.settings-check-label input {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--accent);
  cursor: pointer;
}
.settings-input::placeholder, .settings-textarea::placeholder { color: var(--muted); }
.settings-input:focus, .settings-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.settings-group-label {
  margin-bottom: 12px;
}
.settings-options { display: flex; flex-wrap: wrap; gap: 10px; }
.settings-option-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--fg-soft);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
  user-select: none;
}
.settings-option-btn:hover {
  border-color: var(--border-focus);
  background: var(--panel-hover);
  color: var(--fg);
}
.settings-option-btn input {
  margin: 0;
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent);
}
.settings-option-btn:has(input:checked) {
  border-color: var(--accent);
  background: rgba(124, 156, 248, 0.12);
  color: var(--fg);
}
[data-accent="warm"] .settings-option-btn:has(input:checked) { background: rgba(212, 160, 36, 0.12); border-color: var(--accent); }
[data-accent="green"] .settings-option-btn:has(input:checked) { background: rgba(13, 148, 136, 0.12); border-color: var(--accent); }
.settings-actions { display: flex; align-items: center; gap: 16px; margin-top: 28px; }
.settings-saved { font-size: 0.875rem; }

.settings-budget-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 10px;
}
.settings-label-inline {
  margin: 0;
  font-weight: 500;
  font-size: 0.8125rem;
}
.settings-input-inline {
  max-width: 140px;
}
.settings-budget-summary {
  margin: 8px 0 0;
  font-size: 0.8125rem;
}
.settings-budget-summary.over {
  color: var(--muted);
  opacity: 0.85;
}

/* ----- Light theme (Airbnb-open canvas + Uber-black CTAs) ----- */
[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f7f7;
  --bg-elevated: #ffffff;
  --fg: #222222;
  --fg-soft: #525252;
  --muted: #717171;
  --panel: #ffffff;
  --panel-hover: #f7f7f7;
  --border: #dddddd;
  --border-focus: #b0b0b0;
  --shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.12);
  --field-bg: #fafafa;
  --chat-input-bar-bg: rgba(0, 0, 0, 0.03);
  --progress-track: rgba(0, 0, 0, 0.08);
  --btn-primary-bg: #222222;
  --btn-primary-fg: #ffffff;
  --btn-primary-hover: #000000;
  --btn-primary-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
[data-theme="light"] html,
[data-theme="light"] body {
  background:
    radial-gradient(1000px 420px at 90% -5%, rgba(255, 56, 92, 0.06), transparent 55%),
    radial-gradient(720px 380px at 5% 100%, rgba(0, 168, 98, 0.05), transparent 48%),
    var(--bg);
}
[data-theme="light"] .sidebar {
  background: #ffffff;
  border-right-color: var(--border);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .sidebar-brand {
  border-bottom-color: var(--border);
}
[data-theme="light"] .sidebar-menu-btn {
  background: rgba(255, 255, 255, 0.98);
  border-color: var(--border);
  color: var(--fg);
}
[data-theme="light"] .sidebar-nav a.current {
  box-shadow: inset 3px 0 0 var(--accent);
}
[data-theme="light"] .terminal { background: #e8eaee; color: #1a1d23; border-color: var(--border); }

/* ----- Accent: warm (amber) ----- */
[data-accent="warm"] {
  --accent: #d4a024;
  --accent2: #e4b363;
  --accent-glow: rgba(212, 160, 36, 0.25);
}
[data-accent="warm"] .logo { box-shadow: 0 4px 14px var(--accent-glow); }

/* ----- Accent: green (teal) ----- */
[data-accent="green"] {
  --accent: #0d9488;
  --accent2: #2dd4bf;
  --accent-glow: rgba(13, 148, 136, 0.25);
}
[data-accent="green"] .logo { box-shadow: 0 4px 14px var(--accent-glow); }

/* ----- Accent: ocean (blue) ----- */
[data-accent="blue"] {
  --accent: #2563eb;
  --accent2: #1d4ed8;
  --accent-glow: rgba(37, 99, 235, 0.28);
}
[data-accent="blue"] .logo { box-shadow: 0 4px 14px var(--accent-glow); }

/* ----- Accent: violet ----- */
[data-accent="violet"] {
  --accent: #7c3aed;
  --accent2: #6d28d9;
  --accent-glow: rgba(124, 58, 237, 0.28);
}
[data-accent="violet"] .logo { box-shadow: 0 4px 14px var(--accent-glow); }

[data-accent="blue"] .settings-option-btn:has(input:checked) { background: rgba(37, 99, 235, 0.12); border-color: var(--accent); }
[data-accent="violet"] .settings-option-btn:has(input:checked) { background: rgba(124, 58, 237, 0.12); border-color: var(--accent); }

/* ----- Appearance: corner radius ----- */
:root[data-radius="soft"] {
  --radius: 14px;
  --radius-sm: 10px;
}
:root[data-radius="sharp"] {
  --radius: 11px;
  --radius-sm: 7px;
}

/* ----- Appearance: text scale ----- */
:root[data-font-size="sm"] { font-size: 93.75%; }
:root[data-font-size="lg"] { font-size: 112.5%; }

/* ----- Appearance: compact density ----- */
[data-density="compact"] .page-main { padding: 16px 0 40px; }
[data-density="compact"] .panel,
[data-density="compact"] .card { padding: 16px 18px; }
[data-density="compact"] .settings-panel { margin-bottom: 16px; }
[data-density="compact"] .settings-group { margin-bottom: 16px; }
[data-density="compact"] .settings-name-panel { padding: 20px 18px; }
[data-density="compact"] .settings-name-header { margin-bottom: 14px; gap: 12px; }
[data-density="compact"] .grid-2,
[data-density="compact"] .grid-3 { gap: 14px; }
[data-density="compact"] .section { padding: 28px 0; }
[data-density="compact"] .sidebar-inner { padding: 16px 12px 18px; }
[data-density="compact"] .sidebar-nav a { padding: 8px 12px; }
[data-density="compact"] .overview-goals-panel { margin-bottom: 16px; }

/* ----- Reduced motion (system preference) ----- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ----- Weekly planner (Apple Calendar inspired) ----- */
.weekly-planner-page {
  --wp-bg: var(--bg);
  --wp-fg: var(--fg);
  --wp-muted: var(--muted);
  --wp-surface: var(--panel);
  --wp-surface-2: var(--bg-elevated);
  --wp-border: var(--border);
  /* Time labels column: shrinks on narrow screens so week grid fits without horizontal scroll */
  --weekly-time-col: clamp(44px, 5.5vw, 64px);
  --wp-border-soft: rgba(255, 255, 255, 0.08);
  --wp-pill-bg: rgba(255, 255, 255, 0.03);
  --wp-pill-active-bg: rgba(255, 255, 255, 0.08);
  --wp-remove: #c8cdd6;
  --wp-blue-bg: rgba(96, 165, 250, 0.22);
  --wp-blue-br: #60a5fa;
  --wp-green-bg: rgba(74, 222, 128, 0.2);
  --wp-green-br: #4ade80;
  --wp-pink-bg: rgba(251, 113, 133, 0.22);
  --wp-pink-br: #fb7185;
  --wp-orange-bg: rgba(245, 158, 11, 0.22);
  --wp-orange-br: #f59e0b;
  --wp-purple-bg: rgba(192, 132, 252, 0.2);
  --wp-purple-br: #c084fc;
  background: var(--wp-bg);
  color: var(--wp-fg);
}
.weekly-planner-page .sidebar {
  border-right-color: var(--wp-border);
}
.weekly-planner-page .title { color: var(--wp-fg); }
.weekly-planner-page .subtitle { color: var(--wp-muted); }
.weekly-planner-page .sidebar-nav a { color: var(--wp-muted); }
.weekly-planner-page .sidebar-nav a.current {
  color: var(--wp-fg);
  background: var(--wp-pill-active-bg);
}
.weekly-planner-page .top-auth-bar .top-auth-user {
  border-color: var(--wp-border);
  background: var(--wp-surface);
  color: var(--wp-muted);
}
.weekly-planner-page .page-main { padding-bottom: 40px; }
.weekly-page-header { padding-bottom: 14px; }
.weekly-page-header .lead { color: var(--wp-muted); }
.weekly-page-header .lead a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.weekly-page-header .lead a:hover {
  color: var(--accent2);
}

.weekly-card-light {
  background: var(--wp-surface);
  border: 1px solid var(--wp-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.weekly-planner-card { margin-bottom: 16px; }
.weekly-planner-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--wp-muted);
  min-width: 0;
}
.weekly-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 14px;
  align-items: start;
}
.weekly-form-grid > label:nth-child(1) { grid-column: 1; }
.weekly-form-grid > label:nth-child(2) { grid-column: 2; }
.weekly-form-grid > label:nth-child(3) { grid-column: 3; }
.weekly-form-grid > label:nth-child(4) { grid-column: 1 / -1; }
.weekly-form-grid > label:nth-child(5) { grid-column: 1 / -1; }
.weekly-form-grid > .weekly-add-event-btn {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 2px;
}

.weekly-planner-page .weekly-planner-card select,
.weekly-planner-page .weekly-planner-card input[type="time"],
.weekly-planner-page .weekly-planner-card input[type="text"],
.weekly-planner-page .weekly-planner-card textarea {
  width: 100%;
  box-sizing: border-box;
  margin-top: 0;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid var(--wp-border);
  background: rgba(0, 0, 0, 0.32);
  color: var(--wp-fg);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.weekly-planner-page .weekly-planner-card textarea {
  min-height: 76px;
  resize: vertical;
  line-height: 1.45;
}
.weekly-planner-page .weekly-planner-card select:focus,
.weekly-planner-page .weekly-planner-card input:focus,
.weekly-planner-page .weekly-planner-card textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.weekly-helper { margin: 10px 2px 0; color: var(--wp-muted); font-size: 0.8125rem; }

.weekly-calendar-shell {
  border: 1px solid var(--wp-border);
  border-radius: 12px;
  background: var(--wp-surface);
  display: flex;
  flex-direction: column;
  max-height: min(72vh, 820px);
  min-height: 280px;
  overflow: hidden;
}
.weekly-calendar-shell .weekly-calendar-grid {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: rgba(255, 255, 255, 0.22) rgba(0, 0, 0, 0.2);
}
.weekly-calendar-shell .weekly-calendar-grid::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}
.weekly-calendar-shell .weekly-calendar-grid::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 8px;
}
.weekly-calendar-shell .weekly-calendar-grid::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 8px;
}
.weekly-calendar-shell .weekly-calendar-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* Weekly planner: event detail + clear-all as centered pop-ups */
.weekly-detail-overlay:not([hidden]),
.weekly-clear-confirm-overlay:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  box-sizing: border-box;
}
.weekly-detail-backdrop,
.weekly-clear-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.weekly-detail-dialog,
.weekly-clear-confirm-dialog {
  position: relative;
  z-index: 1;
  width: min(460px, 100%);
  max-height: min(78vh, 560px);
  overflow: auto;
  margin: 0;
  padding: 22px 24px 24px;
  border-radius: 16px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.5);
  -webkit-overflow-scrolling: touch;
}
.weekly-detail-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--wp-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.weekly-detail-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--wp-fg);
}
.weekly-detail-heading {
  margin: 0 40px 8px 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--wp-fg);
  line-height: 1.2;
}
.weekly-detail-meta {
  margin: 0 0 14px;
  font-size: 0.875rem;
}
.weekly-detail-body {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--wp-fg);
  white-space: normal;
  word-break: break-word;
}
.weekly-detail-empty,
.weekly-detail-text {
  margin: 0;
  color: var(--wp-fg);
}
.weekly-detail-section + .weekly-detail-section {
  margin-top: 14px;
}
.weekly-detail-section-title {
  margin: 0 0 8px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wp-muted);
}
.weekly-detail-steps {
  margin: 0;
  padding-left: 18px;
}
.weekly-detail-steps li + li {
  margin-top: 6px;
}
.weekly-detail-shopping-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.weekly-detail-shopping-row {
  display: grid;
  grid-template-columns: 1.2fr auto 1.2fr;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--wp-border);
  border-radius: 10px;
  padding: 9px 10px;
  background: var(--wp-pill-bg);
}
.weekly-detail-shopping-item {
  font-weight: 600;
}
.weekly-detail-shopping-price {
  color: var(--wp-muted);
  white-space: nowrap;
}
.weekly-detail-shopping-where {
  text-align: right;
  color: var(--wp-muted);
}
@media (max-width: 640px) {
  .weekly-detail-shopping-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .weekly-detail-shopping-where {
    text-align: left;
  }
}

.weekly-clear-confirm-dialog {
  text-align: center;
  padding: 28px 24px 26px;
}
.weekly-clear-confirm-icon {
  margin: 0 auto 14px;
  color: var(--wp-muted);
  display: flex;
  justify-content: center;
}
.weekly-clear-confirm-title {
  margin: 0 0 10px;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--wp-fg);
}
.weekly-clear-confirm-msg {
  margin: 0 0 22px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--wp-muted);
  text-align: center;
}
.weekly-clear-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.weekly-clear-confirm-delete {
  background: rgba(220, 80, 80, 0.22);
  border-color: rgba(248, 113, 113, 0.45);
  color: #fecaca;
}
.weekly-clear-confirm-delete:hover {
  background: rgba(220, 80, 80, 0.32);
  color: #fff;
}

[data-theme="light"] .weekly-detail-close:hover {
  background: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .weekly-clear-confirm-delete {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}
[data-theme="light"] .weekly-clear-confirm-delete:hover {
  background: #fee2e2;
  color: #991b1b;
}

.weekly-calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--wp-border);
  flex-shrink: 0;
}
.weekly-view-pills { display: inline-flex; gap: 6px; }
.weekly-pill, .weekly-today-pill {
  border: 1px solid var(--wp-border);
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 0.8125rem;
  color: var(--wp-muted);
  background: var(--wp-pill-bg);
}
.weekly-pill-active {
  background: var(--wp-pill-active-bg);
  color: var(--wp-fg);
  font-weight: 600;
}

.weekly-calendar-grid.weekly-view-week {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.weekly-calendar-grid.weekly-view-day {
  min-width: 0;
  width: 100%;
}
.weekly-header-row.weekly-header-single {
  grid-template-columns: 72px minmax(0, 1fr);
}
.weekly-all-day-row.weekly-all-day-single {
  grid-template-columns: 72px minmax(0, 1fr);
}
.weekly-day-columns.is-single {
  grid-template-columns: minmax(0, 1fr);
}
.weekly-calendar-grid.weekly-view-day .weekly-day-header {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--wp-fg);
  padding: 14px 12px;
}
.weekly-calendar-grid.weekly-view-day .weekly-day-track {
  border-right: none;
}
.weekly-calendar-grid.weekly-view-day .weekly-body-row {
  grid-template-columns: 72px minmax(0, 1fr);
}
.weekly-header-row {
  display: grid;
  grid-template-columns: var(--weekly-time-col) repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--wp-border);
}
.weekly-time-col-header { border-right: 1px solid var(--wp-border); }
.weekly-day-header {
  text-align: center;
  padding: 8px 2px;
  color: var(--wp-muted);
  font-weight: 600;
  font-size: clamp(0.68rem, 1.5vw, 0.8125rem);
  border-right: 1px solid var(--wp-border-soft);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.weekly-all-day-row {
  display: grid;
  grid-template-columns: var(--weekly-time-col) repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--wp-border);
}
.weekly-all-day-label {
  color: var(--wp-muted);
  font-size: 0.8125rem;
  padding: 7px 6px;
  border-right: 1px solid var(--wp-border);
}
.weekly-all-day-cell {
  min-height: 34px;
  min-width: 0;
  border-right: 1px solid var(--wp-border-soft);
  padding: 3px;
}
.weekly-all-day-event {
  border-radius: 7px;
  padding: 2px 6px;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin-bottom: 4px;
}
.weekly-all-day-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.weekly-body-row {
  display: grid;
  grid-template-columns: var(--weekly-time-col) minmax(0, 1fr);
}
.weekly-time-col {
  border-right: 1px solid var(--wp-border);
  background: var(--wp-surface);
}
.weekly-hour-label {
  height: 58px;
  font-size: 0.75rem;
  color: var(--wp-muted);
  padding: 4px 6px;
  border-bottom: 1px solid var(--wp-border-soft);
}
.weekly-day-columns {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-width: 0;
}
.weekly-day-track {
  position: relative;
  min-height: 1392px;
  min-width: 0;
  border-right: 1px solid var(--wp-border-soft);
  background: var(--wp-surface);
}
.weekly-calendar-grid.weekly-view-day .weekly-day-track {
  min-width: 0;
}
.weekly-hour-line {
  height: 58px;
  border-bottom: 1px solid var(--wp-border-soft);
}
.weekly-event-block {
  position: absolute;
  left: 4px;
  right: 4px;
  min-height: 44px;
  border-radius: 8px;
  padding: 5px 6px 6px;
  font-size: 0.75rem;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  cursor: grab;
}
.weekly-event-block.dragging {
  cursor: grabbing;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
  z-index: 4;
}
.weekly-event-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.weekly-shift-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  color: #1f2937;
  cursor: pointer;
  font-size: 0.82rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.weekly-shift-left { left: 3px; }
.weekly-shift-right { right: 3px; }
.weekly-event-block .weekly-event-row,
.weekly-event-block .weekly-event-title { padding: 0 14px; }
.weekly-event-time { font-weight: 600; font-size: 0.7rem; color: var(--wp-fg); }
.weekly-event-title {
  font-size: 0.8rem;
  line-height: 1.15;
  margin-top: 3px;
  font-weight: 600;
  color: var(--wp-fg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.weekly-event-remove-mini {
  border: 0;
  background: transparent;
  color: var(--wp-remove);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
}

.weekly-all-day-event .weekly-shift-btn,
.weekly-all-day-event .weekly-event-remove-mini {
  position: static;
  transform: none;
}

[data-theme="light"] .weekly-shift-btn {
  background: rgba(255, 255, 255, 0.8);
  color: #374151;
}
.weekly-empty { color: var(--wp-muted); font-size: 0.8rem; }

.weekly-color-blue { background: var(--wp-blue-bg); border-left: 3px solid var(--wp-blue-br); }
.weekly-color-green { background: var(--wp-green-bg); border-left: 3px solid var(--wp-green-br); }
.weekly-color-pink { background: var(--wp-pink-bg); border-left: 3px solid var(--wp-pink-br); }
.weekly-color-orange { background: var(--wp-orange-bg); border-left: 3px solid var(--wp-orange-br); }
.weekly-color-purple { background: var(--wp-purple-bg); border-left: 3px solid var(--wp-purple-br); }

[data-theme="light"] .weekly-planner-page {
  --wp-bg: #f7f7f7;
  --wp-fg: #1f2937;
  --wp-muted: #6b7280;
  --wp-surface: #fff;
  --wp-surface-2: #fff;
  --wp-border: #e5e7eb;
  --wp-border-soft: #eef0f4;
  --wp-pill-bg: #fff;
  --wp-pill-active-bg: #f3f4f6;
  --wp-remove: #4b5563;
  --wp-blue-bg: #dbeafe;
  --wp-blue-br: #60a5fa;
  --wp-green-bg: #dcfce7;
  --wp-green-br: #4ade80;
  --wp-pink-bg: #ffe4e6;
  --wp-pink-br: #fb7185;
  --wp-orange-bg: #fef3c7;
  --wp-orange-br: #f59e0b;
  --wp-purple-bg: #f3e8ff;
  --wp-purple-br: #c084fc;
}
[data-theme="light"] .weekly-planner-page .sidebar {
  background: rgba(255, 255, 255, 0.96);
  border-right-color: var(--wp-border);
}

[data-theme="light"] .weekly-planner-page .weekly-planner-card select,
[data-theme="light"] .weekly-planner-page .weekly-planner-card input[type="time"],
[data-theme="light"] .weekly-planner-page .weekly-planner-card input[type="text"],
[data-theme="light"] .weekly-planner-page .weekly-planner-card textarea {
  background: #fff;
  border-color: var(--wp-border);
  color: var(--wp-fg);
}
[data-theme="light"] .weekly-calendar-shell .weekly-calendar-grid {
  scrollbar-color: rgba(0, 0, 0, 0.22) #e5e7eb;
}
[data-theme="light"] .weekly-calendar-shell .weekly-calendar-grid::-webkit-scrollbar-track {
  background: #eef0f4;
}
[data-theme="light"] .weekly-calendar-shell .weekly-calendar-grid::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}
[data-theme="light"] .weekly-calendar-shell .weekly-calendar-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.32);
}

@media (max-width: 900px) {
  .weekly-form-grid {
    grid-template-columns: 1fr 1fr;
  }
  .weekly-form-grid > label:nth-child(1) { grid-column: 1; }
  .weekly-form-grid > label:nth-child(2) { grid-column: 2; }
  .weekly-form-grid > label:nth-child(3) { grid-column: 1 / -1; }
  .weekly-form-grid > label:nth-child(4),
  .weekly-form-grid > label:nth-child(5),
  .weekly-form-grid > .weekly-add-event-btn {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .weekly-form-grid {
    grid-template-columns: 1fr;
  }
  .weekly-form-grid > label:nth-child(1),
  .weekly-form-grid > label:nth-child(2),
  .weekly-form-grid > label:nth-child(3) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .hero {
    padding: 40px 0 30px;
  }
  .hero h1 {
    max-width: 100%;
  }
  .hero .lead {
    font-size: 0.98rem;
    margin-bottom: 22px;
  }
  .link-cards {
    margin-top: 28px;
    gap: 14px;
  }
}

/* ----- Auth / login ----- */
.auth-tablist {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 0 0 20px;
  border-radius: 999px;
  background: var(--field-bg);
  border: 1px solid var(--border);
}
.auth-tab {
  flex: 1;
  margin: 0;
  min-height: 44px;
  padding: 10px 14px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    color var(--transition),
    background var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
}
.auth-tab:hover {
  color: var(--fg-soft);
}
.auth-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.auth-tab-active {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  box-shadow: var(--btn-primary-shadow);
}
.auth-tab-active:hover {
  color: var(--btn-primary-fg);
  background: var(--btn-primary-hover);
}
.auth-tab-body {
  min-width: 0;
}
.auth-tab-panel {
  min-width: 0;
}

.auth-config-warn code {
  font-size: 0.85em;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
}

.auth-stack {
  display: grid;
  gap: 20px;
  max-width: 440px;
}

.auth-panel-title {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.auth-panel-desc {
  margin: 0 0 18px;
  font-size: 0.875rem;
}

.auth-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.auth-email-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-email-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg-soft);
}

.auth-email-label input {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--field-bg);
  color: var(--fg);
  font: inherit;
  font-size: 0.9375rem;
}

.auth-email-label input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.auth-message {
  margin: 12px 0 0;
  font-size: 0.875rem;
  line-height: 1.45;
  min-height: 1.2em;
}

.auth-password-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.auth-forgot-wrap {
  margin: 12px 0 0;
}

.btn.link-like {
  border: none;
  background: none;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}

.btn.link-like:hover {
  color: var(--fg-soft);
  transform: none;
}

/* ----- AI Meal Plan page ----- */
.meal-plan-page .page-main {
  flex: 1;
  padding-bottom: 48px;
  min-width: 0;
  width: 100%;
}
.meal-plan-page .container {
  width: 100%;
  max-width: min(1360px, calc(100vw - 40px));
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.meal-plan-header {
  padding-bottom: 20px;
  margin-bottom: 8px;
}
.meal-plan-header h1 {
  font-size: clamp(1.85rem, 3.5vw, 2.35rem);
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}
.meal-plan-intro {
  max-width: 52ch;
  line-height: 1.65;
  font-size: 0.98rem;
}
.meal-plan-intro a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.meal-plan-intro a:hover {
  color: var(--accent2);
}

.meal-plan-setup-card {
  margin-bottom: 28px;
  padding: 22px 20px 20px;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%), var(--panel);
  box-shadow: var(--shadow);
}
.meal-plan-setup-top {
  margin-bottom: 20px;
}
.meal-plan-setup-card h2 {
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.meal-plan-params-hint {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  max-width: 60ch;
}
.meal-plan-params-hint a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.meal-plan-context-root {
  margin-bottom: 22px;
  min-width: 0;
  max-width: 100%;
}
.meal-plan-customize-wrap {
  margin-top: 2px;
  margin-bottom: 16px;
}
.meal-plan-customize-label {
  display: block;
  margin: 0 0 8px;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--fg-soft);
}
.meal-plan-customize-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--field-bg);
  color: var(--fg);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.45;
  resize: vertical;
  min-height: 74px;
}
.meal-plan-customize-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.meal-plan-customize-hint {
  margin: 8px 2px 0;
  font-size: 0.78rem;
  line-height: 1.45;
}
.meal-plan-empty {
  padding: 20px 18px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border);
  background: rgba(0, 0, 0, 0.12);
  text-align: center;
}
.meal-plan-empty-title {
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 0.95rem;
}
.meal-plan-empty-text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  max-width: 44ch;
  margin-inline: auto;
}
.meal-plan-empty-text a {
  color: var(--accent);
  font-weight: 600;
}

.meal-plan-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 12px;
  margin-bottom: 20px;
  min-width: 0;
}
.meal-plan-stat-card {
  padding: 14px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 88px;
  min-width: 0;
  justify-content: center;
}
.meal-plan-stat-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.meal-plan-stat-value {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--fg);
}
.meal-plan-stat-unit {
  font-size: 1rem;
  font-weight: 600;
  color: var(--fg-soft);
}
.meal-plan-stat-macros {
  min-height: auto;
}
.meal-plan-macro-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.meal-plan-macro-chip {
  flex: 1 1 calc(33.333% - 8px);
  min-width: 5.5rem;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  box-sizing: border-box;
}
.meal-plan-macro-chip strong {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.meal-plan-macro-name {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.meal-plan-macro-p {
  border-left: 3px solid #60a5fa;
}
.meal-plan-macro-c {
  border-left: 3px solid #4ade80;
}
.meal-plan-macro-f {
  border-left: 3px solid #fbbf24;
}

.meal-plan-settings-block {
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.meal-plan-settings-heading {
  margin: 0 0 12px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.meal-plan-detail-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.meal-plan-detail-row {
  display: grid;
  grid-template-columns: minmax(120px, 160px) 1fr;
  gap: 12px 20px;
  font-size: 0.9rem;
  line-height: 1.45;
  align-items: start;
}
.meal-plan-detail-row-block {
  grid-template-columns: 1fr;
}
.meal-plan-detail-row-block .meal-plan-detail-key {
  margin-bottom: 4px;
}
.meal-plan-detail-key {
  color: var(--muted);
  font-weight: 600;
}
.meal-plan-detail-val {
  color: var(--fg-soft);
  word-break: break-word;
}

.meal-plan-actions-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  padding-top: 4px;
}
.meal-plan-generate-btn {
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 0.9rem;
}
.meal-plan-status {
  font-size: 0.875rem;
  color: var(--fg-soft);
  min-height: 1.2em;
}

.meal-plan-results {
  margin-top: 8px;
}
.meal-plan-summary-card {
  margin-bottom: 20px;
  padding: 20px 22px;
  border-radius: var(--radius);
}
.meal-plan-summary-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 18px;
  margin-bottom: 16px;
}
.meal-plan-total-cost {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.meal-plan-budget-note {
  font-size: 0.875rem;
}
.meal-plan-import-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.meal-plan-import-status {
  font-size: 0.8125rem;
  flex: 1;
  min-width: 200px;
}

.meal-plan-days-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.meal-plan-content-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(250px, 0.75fr);
  gap: 22px;
  align-items: start;
}
.meal-plan-grocery-card {
  position: sticky;
  top: 12px;
  padding: 16px 14px 14px;
}
.meal-plan-grocery-title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.meal-plan-grocery-meta {
  margin: 0 0 10px;
  font-size: 0.8125rem;
}
.meal-plan-grocery-list {
  max-height: 70vh;
  overflow: auto;
}
.meal-plan-grocery-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.76rem;
}
.meal-plan-grocery-table th,
.meal-plan-grocery-table td {
  border: 1px solid var(--border);
  padding: 6px 7px;
  text-align: left;
  vertical-align: top;
}
.meal-plan-grocery-table th {
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-weight: 700;
}
.meal-plan-grocery-where {
  color: var(--fg-soft);
}
.meal-plan-directions-link {
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.meal-plan-content-layout .meal-plan-days-grid {
  min-width: 0;
}
.meal-plan-day-block {
  padding: 18px 20px 20px;
  border-radius: var(--radius);
}
.meal-plan-day-title {
  margin: 0 0 14px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.meal-plan-day-meta {
  margin: -4px 0 12px;
  font-size: 0.78rem;
  line-height: 1.35;
}
.meal-plan-meal-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.meal-plan-meal-card {
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.12);
}
.meal-plan-meal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin-bottom: 12px;
}
.meal-plan-slot {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.meal-plan-meal-title {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 1.05rem;
  font-weight: 700;
}
.meal-plan-meal-cost {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg-soft);
}
.meal-plan-meal-servings {
  margin-top: 6px;
  font-size: 0.78rem;
  line-height: 1.35;
}
.meal-plan-meal-macros {
  margin-top: 6px;
  font-size: 0.78rem;
  line-height: 1.4;
}
.meal-plan-usda-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.meal-plan-recipe,
.meal-plan-shop {
  margin-top: 10px;
  font-size: 0.875rem;
  line-height: 1.55;
}
.meal-plan-recipe strong,
.meal-plan-shop strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8125rem;
  color: var(--muted);
}
.meal-plan-recipe p {
  margin: 0;
  white-space: pre-wrap;
}
.meal-plan-shop-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  margin-top: 8px;
}
.meal-plan-shop-table th,
.meal-plan-shop-table td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
}
.meal-plan-shop-table th {
  background: rgba(255, 255, 255, 0.05);
  font-weight: 600;
  color: var(--muted);
}
.meal-plan-shop-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.meal-plan-shop-row {
  display: grid;
  grid-template-columns: 1.2fr auto 1.1fr;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
}
.meal-plan-shop-item {
  font-weight: 600;
}
.meal-plan-shop-price {
  color: var(--fg-soft);
  white-space: nowrap;
}
.meal-plan-shop-where {
  text-align: right;
}

/* ----- Grocery list page ----- */
.grocery-list-page .page-main {
  padding-top: 20px;
}
.grocery-list-page {
  background: var(--bg) !important;
}
.grocery-list-page .top-auth-bar .top-auth-login {
  background: var(--panel) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.grocery-list-page .app-content {
  background: var(--bg) !important;
}
html:has(body.grocery-list-page) {
  background: var(--bg) !important;
}
.grocery-list-page .container {
  max-width: 760px;
}
.grocery-list-card {
  max-width: 700px;
  margin: 0;
}
.grocery-list-page .page-header {
  max-width: 700px;
  margin: 0 auto;
}
.grocery-list-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.grocery-list-toolbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
}
.grocery-list-toolbar #groceryStatus {
  width: 100%;
  text-align: left;
}
.grocery-list-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 180px);
  gap: 10px 12px;
  align-items: end;
  margin-bottom: 14px;
}
.grocery-list-form label:nth-child(3) {
  grid-column: 1 / -1;
}
.grocery-list-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 600;
}
.grocery-list-form input {
  width: 100%;
  min-height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--field-bg);
  color: var(--fg);
  padding: 9px 11px;
  font: inherit;
}
.grocery-list-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.grocery-add-btn {
  min-height: 40px;
  padding: 0 16px;
  white-space: nowrap;
  justify-self: start;
}
.grocery-delete-item-btn {
  white-space: nowrap;
}

[data-theme="light"] .meal-plan-setup-card {
  background: #fff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .meal-plan-stat-card {
  background: #f6f7f9;
}
[data-theme="light"] .meal-plan-macro-chip {
  background: #fff;
}
[data-theme="light"] .meal-plan-empty {
  background: #f6f7f9;
}
[data-theme="light"] .meal-plan-meal-card {
  background: #fafafa;
}
[data-theme="light"] .meal-plan-shop-row {
  background: #fff;
}
[data-theme="light"] .grocery-list-form input {
  background: #fff;
}
[data-theme="light"] .meal-plan-intro a,
[data-theme="light"] .meal-plan-params-hint a {
  color: #0071e3;
}
[data-theme="light"] .meal-plan-intro a:hover {
  color: #0077ed;
}

@media (max-width: 560px) {
  .grocery-list-card {
    max-width: 100%;
  }
  .grocery-list-toolbar {
    justify-content: stretch;
  }
  .grocery-list-toolbar-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .grocery-list-toolbar #groceryStatus {
    width: 100%;
    text-align: left;
  }
  .grocery-list-form {
    grid-template-columns: 1fr;
  }
  .grocery-add-btn {
    width: auto;
  }
  .meal-plan-shop-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .meal-plan-shop-where {
    text-align: left;
  }
  .meal-plan-detail-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .meal-plan-setup-card {
    padding: 18px 14px;
  }
  .meal-plan-stat-grid {
    grid-template-columns: 1fr;
  }
  .meal-plan-macro-chip {
    flex: 1 1 100%;
    min-width: 0;
  }
  .meal-plan-stat-value {
    font-size: 1.45rem;
  }
}
@media (max-width: 980px) {
  .meal-plan-content-layout {
    grid-template-columns: 1fr;
  }
  .meal-plan-grocery-card {
    position: static;
  }
}