/* Optical glass: thin edges, clear centres and bright local highlights.
   Kept separate from layout so the same material covers every app screen. */
/* Native option popups need opaque colours; translucent select fills do not carry over. */
:root {
  --language-menu-bg: #1c2b3c;
  --language-menu-text: #e8f1fa;
}
:root[data-theme="light"] {
  --language-menu-bg: #f5f8fc;
  --language-menu-text: #172334;
}
:root[data-theme="dark"] :is([data-language-select], #profile-language) { color-scheme: dark; }
:root[data-theme="light"] :is([data-language-select], #profile-language) { color-scheme: light; }
:root :is([data-language-select], #profile-language) option {
  color: var(--language-menu-text);
  background-color: var(--language-menu-bg);
}
:root {
  --radius: var(--block-radius, 10px);
  --glass-rim: rgba(220, 245, 255, var(--glass-border-opacity, .14));
  --glass-inner-rim: rgba(227, 247, 255, var(--glass-inner-opacity, .1));
  --glass-shadow: 0 14px 40px rgba(1, 8, 18, var(--glass-shadow-opacity, .12));
}

/* A visible shape behind the panels makes the transparency perceptible. */
.ambient {
  background: radial-gradient(ellipse at 48% 4%, #253b54 0, transparent 65%), #0c1522;
}
.ambient::before,
.ambient::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  display: var(--ribbon-display, block);
  opacity: var(--ribbon-opacity, .75);
}
.ambient::before {
  width: 1050px;
  height: 510px;
  right: -300px;
  top: 12%;
  border: 64px solid rgba(128, 205, 230, .12);
  box-shadow: 0 0 45px rgba(122, 202, 225, .08), inset 0 0 35px rgba(122, 202, 225, .1);
  transform: rotate(-32deg);
  filter: blur(9px);
}
.ambient::after {
  width: 1000px;
  height: 470px;
  left: -470px;
  bottom: -210px;
  border: 76px solid rgba(173, 159, 230, .13);
  box-shadow: 0 0 55px rgba(184, 164, 244, .07), inset 0 0 45px rgba(184, 164, 244, .09);
  transform: rotate(26deg);
  filter: blur(13px);
}
.orb-one {
  background: #3e9caa;
  filter: blur(95px);
  opacity: .32;
  left: -350px;
  top: 16%;
}
.orb-two {
  background: #8670bd;
  filter: blur(95px);
  opacity: .35;
  right: -290px;
  top: -250px;
}
.orb-three {
  background: #4e9c85;
  opacity: .24;
}

/* The outer sheet has a lighter blur than the smaller floating panels. */
.app-shell {
  position: relative;
  isolation: isolate;
  background: linear-gradient(125deg, #cbe8ff06, #abc5f001 65%, #bbd9f407);
  border: var(--glass-thickness, 1px) solid var(--glass-rim);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
  box-shadow: inset 0 1px 0 #ffffff0d, 0 24px 70px rgba(1, 8, 18, var(--glass-shadow-opacity, .12));
}
.app-shell::before,
.glass::before,
.dialog::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: var(--glass-thickness, 1px);
  border: 0;
  border-radius: inherit;
  background:
    var(--glass-highlight-gradient, none),
    linear-gradient(132deg, var(--glass-rim), #b2d9ec08 55%, var(--glass-rim));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 5;
}
.app-shell::before {
  /* Keep the large outer sheet free of a mask layer above all app content. */
  display: none;
}
/* Narrow edge pieces also light the outer sheet without a full-size overlay. */
:where([data-glass-cursor]) { position: relative; isolation: isolate; }
.app-shell[data-glass-cursor] { position: relative; isolation: isolate; }
.hero-food-label { pointer-events: auto; }
.glass-cursor-light {
  display: contents;
  pointer-events: none;
}
.glass-cursor-piece {
  position: absolute;
  display: none;
  overflow: hidden;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
}
[data-cursor-lit] > .glass-cursor-light > .glass-cursor-piece {
  display: block;
  opacity: calc(var(--glass-cursor-intensity, .7) * var(--piece-opacity, 1));
}
.workspace { position: relative; z-index: 1; transform: translateZ(0); backface-visibility: hidden; }
.app-shell > .glass-cursor-light > .glass-cursor-piece { z-index: 0; }
.glass-cursor-edge {
  background: radial-gradient(var(--glass-cursor-size, 100px) circle at var(--cursor-x, 0px) var(--cursor-y, 0px), var(--glass-highlight-color, #97dfff), transparent 75%);
}
.glass-cursor-corner {
  box-sizing: border-box;
  border: 0 solid var(--glass-highlight-color, #97dfff);
}
.glass-cursor-top-left {
  border-top-width: var(--glass-cursor-thickness, 2px);
  border-left-width: var(--glass-cursor-thickness, 2px);
  border-top-left-radius: var(--cursor-radius, 10px);
}
.glass-cursor-top-right {
  border-top-width: var(--glass-cursor-thickness, 2px);
  border-right-width: var(--glass-cursor-thickness, 2px);
  border-top-right-radius: var(--cursor-radius, 10px);
}
.glass-cursor-bottom-right {
  border-bottom-width: var(--glass-cursor-thickness, 2px);
  border-right-width: var(--glass-cursor-thickness, 2px);
  border-bottom-right-radius: var(--cursor-radius, 10px);
}
.glass-cursor-bottom-left {
  border-bottom-width: var(--glass-cursor-thickness, 2px);
  border-left-width: var(--glass-cursor-thickness, 2px);
  border-bottom-left-radius: var(--cursor-radius, 10px);
}
.app-shell::after,
.glass::after,
.dialog::after {
  content: "";
  position: absolute;
  display: var(--glass-inner-display, none);
  inset: var(--glass-inner-offset, 3px);
  border: 1px solid var(--glass-inner-rim);
  border-radius: max(0px, calc(var(--block-radius, 10px) - var(--glass-inner-offset, 3px)));
  background: none;
  box-shadow: none;
  pointer-events: none;
  z-index: 4;
}
.sidebar {
  border-right-color: #d9f0ff25;
  background: linear-gradient(115deg, #e6f6ff09, #a3c5df02 55%, #1422350a);
  box-shadow: inset -1px 0 0 #d3ecff09, 5px 0 20px #020c170a;
}

.glass,
.dialog {
  border: var(--glass-thickness, 1px) solid var(--glass-rim);
  -webkit-backdrop-filter: blur(var(--glass-blur, 20px)) saturate(var(--glass-saturation, 145%));
  backdrop-filter: blur(var(--glass-blur, 20px)) saturate(var(--glass-saturation, 145%));
  box-shadow: var(--glass-shadow), inset 0 1px 0 #ffffff0b;
}
.glass:not(.recipe-hero),
.glass.recipe-hero {
  background:
    linear-gradient(126deg, rgba(240, 250, 255, var(--glass-reflection-opacity, .045)), transparent 28.2%),
    linear-gradient(150deg, rgba(216, 234, 255, var(--glass-surface-opacity, .045)), rgba(154, 203, 234, calc(var(--glass-surface-opacity, .045) * .35)));
}
.glass.recipe-hero {
  background:
    linear-gradient(126deg, rgba(237, 255, 245, var(--glass-reflection-opacity, .045)), transparent 29.2%),
    radial-gradient(ellipse at 100% 70%, #82c9b31c, transparent 70%),
    linear-gradient(145deg, rgba(212, 245, 233, var(--glass-surface-opacity, .045)), rgba(174, 207, 228, calc(var(--glass-surface-opacity, .045) * .35)));
}
.recipe-hero .hero-orbit {
  border-color: #c2f4e22b;
  box-shadow: 0 0 0 26px #c2f3db04, 0 0 0 27px #c2f3db10,
    0 0 0 58px #c2f3db03, 0 0 0 59px #c2f3db0a;
}

/* Small controls use a quiet single edge. */
.scan-option,
.suggestion,
.inventory-cards .product-row,
.search-field,
.chat-compose,
.period-control,
.view-switch {
  border-color: var(--glass-rim);
  background:
    linear-gradient(125deg, #eef9ff12, #d9efff03 37%, transparent 37.2%),
    linear-gradient(150deg, #c6dff50c, #b8d6ec04);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: inset 0 1px 0 #f1ffff12, 0 5px 12px #020c1b18;
}
.scan-option:hover,
.suggestion:hover {
  border-color: #e2faff70;
  background:
    radial-gradient(ellipse at 0% 0%, #dfffee1c, transparent 80%),
    linear-gradient(125deg, #eef9ff18, #d9efff04 37%, transparent 37.2%);
  box-shadow: inset 0 1px 0 #f3ffff2b, 0 8px 18px #020c1b26;
}
.nav-link.active,
.filter.active,
.period-control button.active,
.view-switch button.active {
  border-color: #bcebd752;
  background: linear-gradient(125deg, #caffed24, #b8e8dc0c 55%, #c6ecff10);
  box-shadow: inset 0 1px 0 #e9fff81a, 0 4px 10px #07151e18;
  color: #d0f6e6;
}
.nav-link.active .icon { color: #c1f4df; }
.nav-link:hover:not(.active) { background: #d4ecff09; }
.hero-label,
.expiry,
.count-badge,
.trend-pill,
.summary-icon,
.food-icon {
  box-shadow: inset 0 1px 1px #f1ffff1e, inset 0 -1px 1px #c7eeff0c;
}
.hero-label { border-color: #c7f7e03b; background: #b9eddb10; }
.hero-food-label {
  border-color: #e5fff66b;
  background: linear-gradient(125deg, #d9fff33b, #3d675ead 65%, #729f8b80);
  box-shadow: inset 0 1px 0 #f4fff92b, 0 10px 20px #02141630;
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}
.button {
  border-color: #def2ff40;
  background: linear-gradient(125deg, #effaff17, #cce4ff06 48%, #bedcf50b);
  box-shadow: inset 0 1px 0 #efffff1a, 0 4px 9px #020c1b18;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.button:hover {
  border-color: #e6f9ff78;
  background: linear-gradient(125deg, #effaff25, #cce4ff09 48%, #bedcf512);
}
.button-primary {
  border-color: #defff4ba;
  color: #123c33;
  background:
    linear-gradient(115deg, #ffffff54, transparent 43%),
    linear-gradient(175deg, #c7ffe5d4, #8bd2c4ad 70%, #b4edddcc);
  box-shadow: inset 0 1px 0 #ffffff88, 0 3px 18px #92ddc414;
}
.button-primary:hover {
  border-color: #effffde6;
  background:
    linear-gradient(115deg, #ffffff6b, transparent 48%),
    linear-gradient(175deg, #d1ffebed, #a1e9d7c2 70%, #c6ffeee0);
  box-shadow: inset 0 1px 0 #ffffffaa, 0 5px 22px #92ddc425;
}
.button-subtle { border-color: transparent; background: transparent; box-shadow: none; }
.button-subtle:hover { border-color: transparent; background: #d4eaff08; }
.danger-button { color: #f0b3ba; border-color: #f1b9c149; background: #d8a3a60b; }
.topbar .icon-button,
.top-avatar,
.brand-mark,
.summary-icon,
.save-recipe,
.bot-avatar {
  border: 1px solid #def3ff3b;
  background: linear-gradient(135deg, #e5f7ff1f, #b1c9ef05 50%, #c5dbf510);
  box-shadow: inset 0 1px 0 #f4ffff26, 0 4px 9px #020c1b18;
}
.topbar .icon-button { border-radius: 50%; }
.topbar .icon-button:hover { border-color: #ecfbff80; background: #d9f2ff1c; }
.brand-mark { color: #c9ffeb; }
.stat-card.active {
  border-color: #dcfff48c;
  box-shadow: var(--glass-shadow), inset 0 1px 0 #f5ffff1a, 0 0 28px #b8f4dc09;
}
.assistant-nav.active {
  border-color: #d5baff66;
  background: linear-gradient(125deg, #d8c7ff29, #b9c9ff0a 60%, #bc9de814);
  box-shadow: inset 0 1px 1px #f4eaff70, inset 0 -1px 1px #d0b8ff35, 0 0 24px #b697ec0d;
}
.dialog {
  --radius: var(--block-radius, 10px);
  background:
    linear-gradient(126deg, rgba(240, 250, 255, var(--glass-reflection-opacity, .045)), transparent 30.2%),
    radial-gradient(ellipse at 100% 0%, #92d8ca16, transparent 80%),
    linear-gradient(145deg, rgba(36, 58, 76, var(--glass-dialog-opacity, .9)), rgba(22, 38, 56, var(--glass-dialog-opacity, .9)));
}
.overlay { background: #071020b8; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.field input,
.field select,
.scan-result input {
  border-color: #d7edff38;
  background: linear-gradient(180deg, #07132333, #c3e1f008);
  box-shadow: inset 0 2px 5px #06122040, 0 1px 0 #d9f5ff12;
}
.dialog .search-field { background-color: #0a182329; }
.chat-compose:focus-within,
.search-field:focus-within { border-color: #d2ffee82; box-shadow: inset 0 1px 2px #f2ffff52, 0 0 18px #b1e6d410; }
.toast {
  border-color: #dafff38a;
  background: linear-gradient(125deg, #8dbca047, #274b40eb 45%, #294b49e8);
  box-shadow: inset 0 1px 2px #f1fff680, inset 0 -1px 2px #c3f9dc3d, 0 12px 30px #020c1b40;
}

@media (max-width: 600px) {
  .app-shell {
    position: static;
    isolation: auto;
    background: transparent;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .app-shell::before,
  .app-shell::after { display: none; }
  .ambient::before {
    width: 650px;
    height: 340px;
    right: -390px;
    top: 170px;
    border-width: 52px;
  }
  .ambient::after {
    width: 650px;
    height: 360px;
    left: -400px;
    bottom: -180px;
    border-width: 60px;
  }
  .glass, .dialog {
    -webkit-backdrop-filter: blur(var(--glass-mobile-blur, 14px)) saturate(var(--glass-saturation, 145%));
    backdrop-filter: blur(var(--glass-mobile-blur, 14px)) saturate(var(--glass-saturation, 145%));
  }
  .sidebar {
    border-top-color: #e3f7ff69;
    background: linear-gradient(130deg, #a7d3e633, #132537ce 45%, #30415abf);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
    box-shadow: inset 0 1px 1px #f0ffff42, inset 0 4px 0 #c5e8ff08, 0 -8px 28px #020c1b30;
  }
  .nav-link.active { border-color: #bcebd729; }
  .nav-link .icon { filter: drop-shadow(0 1px 1px #08152155); }
}
/* These win over the older per-component and mobile corner sizes. */
.app-shell,
.glass,
.glass.recipe-hero,
.glass.add-card,
.dialog,
.scan-option,
.suggestion,
.inventory-cards .product-row,
.search-field,
.chat-compose,
.period-control,
.view-switch,
.upload-zone,
.hero-food-label,
.demo-notice,
.toast {
  border-radius: var(--block-radius, 10px);
}
.button,
.button.button-sm,
.filter,
.send-button,
.icon-button,
.nav-link,
.field input,
.field select,
.scan-result input,
.period-control button,
.view-switch button {
  border-radius: var(--control-radius, 10px);
}
/* Sun / moon switch stays visible on desktop and mobile. */
.theme-toggle {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  flex-shrink: 0;
  width: 58px;
  height: 32px;
  gap: 2px;
  padding: 3px;
  border: 1px solid #def3ff2e;
  border-radius: var(--control-radius, 10px);
  background: linear-gradient(125deg, #d4eaff0f, #a8c3e603);
  box-shadow: inset 0 1px 0 #f0ffff16, 0 3px 8px #020c1b18;
}
.theme-toggle .icon { position: relative; z-index: 1; width: 15px; height: 15px; }
.theme-toggle .theme-sun { color: #8399ad; }
.theme-toggle .theme-moon { color: #d1eee1; }
.theme-toggle-thumb {
  position: absolute;
  left: 3px;
  top: 3px;
  bottom: 3px;
  width: calc((100% - 8px) / 2);
  border: 1px solid #d5f4e338;
  border-radius: max(0px, calc(var(--control-radius, 10px) - 3px));
  background: linear-gradient(135deg, #d5f6e729, #b5dfd216);
  box-shadow: inset 0 1px 0 #f3fff92b, 0 2px 4px #020c1b1a;
  transform: translateX(calc(100% + 2px));
  transition: transform .2s ease;
}
:root[data-theme="light"] .theme-toggle-thumb { transform: translateX(0); }
@media (max-width: 600px) {
  .theme-toggle { width: 50px; height: 29px; }
  .theme-toggle .icon { width: 13px; height: 13px; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass:not(.recipe-hero), .glass.recipe-hero, .dialog { background: #213346f5; }
}