/* Milo Liquid Blue — visual layer v2 */
:root {
  --bg: #edf4ff;
  --paper: rgba(255, 255, 255, 0.76);
  --ink: #102044;
  --muted: #5c6d8f;
  --line: rgba(76, 111, 183, 0.22);
  --line-strong: rgba(63, 101, 181, 0.38);
  --blue: #356dff;
  --blue-dark: #2254e8;
  --blue-soft: rgba(218, 230, 255, 0.82);
  --green: #17856a;
  --green-soft: rgba(215, 244, 235, 0.8);
  --surface: rgba(226, 236, 255, 0.66);
  --glass: rgba(255, 255, 255, 0.7);
  --glass-blue: rgba(226, 237, 255, 0.7);
  --glass-line: rgba(255, 255, 255, 0.82);
  --shadow: 0 1px 2px rgba(27, 61, 126, 0.05), 0 16px 46px rgba(35, 73, 148, 0.11);
  --shadow-raised: 0 3px 8px rgba(31, 66, 137, 0.08), 0 26px 70px rgba(42, 80, 158, 0.16);
}

html { background: #edf4ff; }
body {
  position: relative;
  isolation: isolate;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 7%, rgba(70, 128, 255, 0.23), transparent 29rem),
    radial-gradient(circle at 91% 10%, rgba(117, 92, 255, 0.17), transparent 25rem),
    radial-gradient(circle at 54% 96%, rgba(24, 184, 212, 0.13), transparent 32rem),
    linear-gradient(135deg, #f1f6ff 0%, #e7f0ff 48%, #f0ecff 100%) !important;
  background-attachment: fixed !important;
}
body::before {
  content: "" !important;
  display: block !important;
  position: fixed;
  inset: -18%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(32% 30% at 18% 18%, rgba(58, 112, 255, 0.22), transparent 72%),
    radial-gradient(28% 32% at 79% 22%, rgba(132, 91, 255, 0.17), transparent 74%),
    radial-gradient(30% 28% at 62% 83%, rgba(32, 187, 214, 0.15), transparent 72%);
  filter: blur(30px);
  transform: translate3d(0, 0, 0);
  animation: liquidBackdrop 16s ease-in-out infinite alternate;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.42;
  background:
    linear-gradient(115deg, rgba(255,255,255,0.42), transparent 28%, rgba(255,255,255,0.18) 62%, transparent),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.55), transparent 38%);
}
@keyframes liquidBackdrop {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to { transform: translate3d(1.8%, 1.2%, 0) scale(1.035); }
}

.side,
.card,
.dishChat,
.premiumModal,
.loadingStage,
.mobile,
.accountPopover,
.confirmBox {
  border: 1px solid var(--glass-line) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.82), rgba(229,239,255,0.66)) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.55) !important;
  backdrop-filter: blur(28px) saturate(1.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.94),
    inset 0 0 0 1px rgba(73,111,191,0.09),
    var(--shadow) !important;
}
.side {
  overflow: visible;
  border-color: rgba(255,255,255,0.86) !important;
  background:
    linear-gradient(120deg, rgba(255,255,255,0.86), rgba(226,237,255,0.72) 60%, rgba(239,232,255,0.69)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.98),
    0 12px 38px rgba(38,75,151,0.13) !important;
}
.side::before {
  content: "";
  position: absolute;
  inset: 1px 12% auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent);
}
.brand { color: #132b5d !important; }
.brand::after {
  background: linear-gradient(135deg, #2e78ff, #7a5cff) !important;
  box-shadow: 0 0 12px rgba(53,109,255,0.52);
}
.topNav button,
.sideLinks button { color: #5a6b8b !important; }
.topNav button:hover,
.sideLinks button:hover {
  color: #19376f !important;
  background: rgba(255,255,255,0.58) !important;
}
.topNav button.on,
.topNav button[aria-current="page"] {
  color: #19469f !important;
  background: rgba(255,255,255,0.72) !important;
  box-shadow: inset 0 0 0 1px rgba(75,113,194,0.13), 0 5px 15px rgba(41,79,157,0.08);
}
.profileCircle {
  border-color: rgba(255,255,255,0.9) !important;
  background: linear-gradient(145deg, rgba(255,255,255,0.9), rgba(220,233,255,0.78)) !important;
  color: #1d4ba8 !important;
  box-shadow: inset 0 1px 0 #fff, 0 7px 20px rgba(42,78,151,0.16) !important;
}

/* Premium is intentionally the strongest action in the navigation. */
.side > .premiumBuy,
.premiumActivate,
#premiumActivate {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 176px;
  border: 1px solid rgba(255,255,255,0.62) !important;
  background: linear-gradient(115deg, #1f57f2 0%, #3f7bff 48%, #7959f4 100%) !important;
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(16,39,100,0.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.42),
    0 10px 26px rgba(44,99,255,0.36),
    0 0 28px rgba(83,102,255,0.2) !important;
  animation: premiumGlow 3.4s ease-in-out infinite;
}
.side > .premiumBuy::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  vertical-align: -1px;
  background: #eff6ff;
  clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.85));
}
.side > .premiumBuy::after,
.premiumActivate::after,
#premiumActivate::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -80%;
  bottom: -80%;
  left: -45%;
  width: 34%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.56), transparent);
  transform: rotate(18deg) translateX(-220%);
  animation: premiumShine 4.6s ease-in-out infinite;
}
.side > .premiumBuy:hover,
.premiumActivate:hover,
#premiumActivate:hover {
  border-color: rgba(255,255,255,0.85) !important;
  background: linear-gradient(115deg, #194bdf 0%, #3473ff 48%, #6a4be9 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 14px 34px rgba(44,99,255,0.45),
    0 0 38px rgba(102,84,255,0.27) !important;
  transform: translateY(-2px) scale(1.015) !important;
}
@keyframes premiumGlow {
  0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 10px 26px rgba(44,99,255,.34), 0 0 22px rgba(83,102,255,.16); }
  50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 13px 32px rgba(44,99,255,.43), 0 0 36px rgba(107,88,255,.27); }
}
@keyframes premiumShine {
  0%,62% { transform: rotate(18deg) translateX(-240%); }
  82%,100% { transform: rotate(18deg) translateX(560%); }
}

.hero h1,
.askHeading h2,
.result h2,
.profileSummary b,
.welcomeFoot h3,
.formGroup legend,
.accCard h2,
.accCard h3 { color: #112349 !important; }
.eyebrow,
.premiumKicker { color: #3267ee !important; }
.authStory h1 em {
  color: transparent !important;
  background: linear-gradient(110deg, #1f62f2 0%, #4e79ff 48%, #7757ec 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 8px 18px rgba(61,103,230,0.13));
}

.card,
.dishChat {
  position: relative;
  overflow: hidden;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease !important;
}
.card::after,
.dishChat::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(125deg, rgba(255,255,255,0.4), transparent 23%, transparent 72%, rgba(122,153,255,0.07)),
    radial-gradient(70% 28% at 18% 0%, rgba(255,255,255,0.66), transparent 72%);
}
.card > *,
.dishChat > * { position: relative; z-index: 1; }
@media (hover:hover) {
  .card:hover {
    border-color: rgba(255,255,255,0.98) !important;
    transform: translateY(-2px) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.96),
      inset 0 0 0 1px rgba(73,111,191,0.1),
      var(--shadow-raised) !important;
  }
}
.askCard {
  border-color: rgba(255,255,255,0.94) !important;
  background:
    linear-gradient(132deg, rgba(255,255,255,0.84), rgba(225,237,255,0.7) 68%, rgba(236,230,255,0.64)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.98),
    0 18px 58px rgba(43,82,161,0.14) !important;
}
.askbox,
.field input,
.field select,
.field textarea,
.authField input {
  border-color: rgba(80,112,178,0.28) !important;
  background: rgba(255,255,255,0.68) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 5px 16px rgba(42,78,151,0.05) !important;
}
.askbox:focus,
.field input:focus,
.field select:focus,
.field textarea:focus,
.authField input:focus {
  border-color: rgba(53,109,255,0.72) !important;
  background: rgba(255,255,255,0.82) !important;
  box-shadow: 0 0 0 4px rgba(53,109,255,0.12), inset 0 1px 0 #fff !important;
}
.limitPill {
  border: 1px solid rgba(255,255,255,0.72) !important;
  background: linear-gradient(135deg, rgba(221,232,255,0.96), rgba(231,225,255,0.9)) !important;
  color: #2e5ed6 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 5px 14px rgba(43,82,161,0.08) !important;
}
.chips button,
.secondary,
.toolBtn,
.chatAsk,
.wishExamples button,
.chatPrompts button,
.accRow button {
  border-color: rgba(79,111,179,0.22) !important;
  background: linear-gradient(145deg, rgba(255,255,255,0.75), rgba(225,236,255,0.62)) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.25) !important;
  backdrop-filter: blur(14px) saturate(1.25) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.88), 0 6px 18px rgba(39,75,149,0.07) !important;
}
.chips button:hover,
.secondary:hover,
.toolBtn:hover,
.chatAsk:hover,
.wishExamples button:hover,
.chatPrompts button:hover,
.accRow button:hover {
  border-color: rgba(65,105,199,0.4) !important;
  background: linear-gradient(145deg, rgba(255,255,255,0.88), rgba(216,230,255,0.78)) !important;
}
.primary,
.authBtn {
  border-color: rgba(255,255,255,0.5) !important;
  background: linear-gradient(115deg, #255eea, #3e78fa 58%, #526ff4) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.34), 0 10px 24px rgba(44,99,230,0.24) !important;
}
.primary:hover,
.authBtn:hover {
  background: linear-gradient(115deg, #1d52db, #316ef3 58%, #485fe0) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 13px 28px rgba(44,99,230,0.31) !important;
}
.profileSummary {
  border-color: rgba(93,126,199,0.19) !important;
  background: linear-gradient(145deg, rgba(239,246,255,0.8), rgba(222,235,255,0.68)) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.35) !important;
  backdrop-filter: blur(20px) saturate(1.35) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 9px 28px rgba(42,78,151,0.08) !important;
}
.profileSummary .wishText { border-color: rgba(80,114,184,0.18) !important; }
.welcomeFoot > div,
.recipeGrid > section,
.tip,
.accStat,
.legalList button,
.quickHelp,
.disclaimer {
  border-color: rgba(77,110,180,0.18) !important;
  background: linear-gradient(145deg, rgba(255,255,255,0.7), rgba(226,237,255,0.56)) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.35) !important;
  backdrop-filter: blur(20px) saturate(1.35) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.86), 0 8px 24px rgba(40,77,151,0.06) !important;
}
.facts span {
  border-color: rgba(78,111,182,0.16) !important;
  background: rgba(229,238,255,0.72) !important;
  color: #284c96 !important;
}
.chefChatCta {
  border: 1px solid rgba(255,255,255,0.34) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(118,172,255,0.42), transparent 42%),
    linear-gradient(125deg, #183f9a 0%, #285dc3 52%, #5948b9 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 18px 44px rgba(28,64,139,0.25) !important;
}
.chatBubble.ai { background: rgba(255,255,255,0.74) !important; }
.chatBubble.user { background: linear-gradient(135deg, #275de1, #6d55e8) !important; }

.authScene .side {
  border-color: transparent transparent rgba(73,107,177,0.18) transparent !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
.authLanding .authCard {
  border-color: rgba(255,255,255,0.92) !important;
  background: linear-gradient(145deg, rgba(255,255,255,0.82), rgba(226,237,255,0.69)) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.55) !important;
  backdrop-filter: blur(32px) saturate(1.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.98),
    inset 0 0 0 1px rgba(79,113,188,0.08),
    0 28px 78px rgba(39,77,154,0.18) !important;
}
.authPromises span,
.recipePreview,
.previewBadge {
  border-color: rgba(255,255,255,0.86) !important;
  background: linear-gradient(145deg, rgba(255,255,255,0.75), rgba(222,234,255,0.66)) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.4) !important;
  backdrop-filter: blur(22px) saturate(1.4) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), var(--shadow) !important;
}
.recipePreview { box-shadow: inset 0 1px 0 rgba(255,255,255,0.96), var(--shadow-raised) !important; }
.previewBadge { color: #285ed1 !important; }
.googleNote.is-primary-path {
  border-color: rgba(98,129,198,0.2) !important;
  background: rgba(225,235,255,0.64) !important;
  color: #526688 !important;
}
.passwordStrength i { background: rgba(95,119,170,0.2) !important; }
.passwordStrength[data-score="1"] i:nth-child(-n+1),
.passwordStrength[data-score="2"] i:nth-child(-n+2) { background: #d78a4d !important; }
.passwordStrength[data-score="3"] i:nth-child(-n+3),
.passwordStrength[data-score="4"] i:nth-child(-n+4) { background: linear-gradient(90deg, #2b75ef, #24a79b) !important; }

.modal {
  background: rgba(25,45,91,0.53) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.35) !important;
  backdrop-filter: blur(18px) saturate(1.35) !important;
}
.premiumModal {
  border-color: rgba(255,255,255,0.88) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(184,211,255,0.64), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,0.88), rgba(224,235,255,0.76)) !important;
  box-shadow: inset 0 1px 0 #fff, 0 34px 90px rgba(19,45,105,0.34) !important;
}
.plan {
  border-color: rgba(78,111,181,0.2) !important;
  background: linear-gradient(145deg, rgba(255,255,255,0.72), rgba(224,235,255,0.6)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.88), 0 8px 20px rgba(40,76,149,0.07) !important;
}
.plan.on {
  border-color: rgba(53,109,255,0.7) !important;
  background: linear-gradient(145deg, rgba(218,231,255,0.94), rgba(230,222,255,0.88)) !important;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 3px rgba(53,109,255,0.1), 0 12px 28px rgba(46,90,186,0.16) !important;
}
.loading { background: rgba(226,236,255,0.76) !important; -webkit-backdrop-filter: blur(24px) !important; backdrop-filter: blur(24px) !important; }
.toast { background: linear-gradient(135deg, rgba(18,43,94,0.94), rgba(49,73,138,0.94)) !important; border: 1px solid rgba(255,255,255,0.2); -webkit-backdrop-filter: blur(16px) !important; backdrop-filter: blur(16px) !important; }

@media (max-width: 760px) {
  body { background-attachment: scroll !important; }
  body::before { animation-duration: 20s; filter: blur(40px); }
  .side {
    background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(220,233,255,0.7)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.98), 0 10px 30px rgba(35,73,148,0.13) !important;
  }
  .mobile {
    border-color: rgba(255,255,255,0.9) !important;
    background: linear-gradient(145deg, rgba(255,255,255,0.82), rgba(218,231,255,0.76)) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.6) !important;
    backdrop-filter: blur(30px) saturate(1.6) !important;
    box-shadow: inset 0 1px 0 #fff, 0 16px 42px rgba(30,68,145,0.22) !important;
  }
  .mobile button:first-child {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.48) !important;
    background: linear-gradient(135deg, #285fe9, #6c54e8) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 7px 16px rgba(52,95,221,0.28) !important;
  }
  .mobile button:first-child::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 5px; background: #fff; clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%); }
  .mobile button.on:not(:first-child) {
    background: rgba(255,255,255,0.66) !important;
    color: #2554b6 !important;
    box-shadow: inset 0 0 0 1px rgba(68,104,182,0.11) !important;
  }
  .askCard,
  .authLanding .authCard { box-shadow: inset 0 1px 0 #fff, 0 18px 50px rgba(37,76,153,0.14) !important; }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  .side > .premiumBuy,
  .premiumActivate,
  #premiumActivate,
  .side > .premiumBuy::after,
  .premiumActivate::after,
  #premiumActivate::after { animation: none !important; }
}

@media print {
  body { background: #fff !important; }
  body::before,
  body::after { display: none !important; }
  .card,
  .recipeGrid > section,
  .tip { background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}